feat: enhance code structure handling and UI interactions

- Added initialScript.js to provide a default script template for users.
- Updated App.vue and CodeStructuresStage.vue to improve layout and visual feedback with new padding and highlight effects.
- Introduced a new 'No Transform' option in the template catalog for exporting match-only scaffolds.
- Enhanced store functionality with methods for adding pipeline steps and handling no-transform steps.
- Improved ParseButton and PipelineBuilder components to support new features and better user experience.

Author: ctrl-escp

src/App.vue

@@ -128,6 +128,7 @@ onBeforeUnmount(() => {
   min-width: 0;
   display: flex;
   align-items: center;
+  padding-top: 0.35rem;
 }
 
 .left-column {

src/components/CodeStructuresStage.vue

@@ -13,6 +13,14 @@ const hasResults = computed(() =>
   (store.areFiltersActive ? store.filteredNodes : store.arb?.ast ?? []).length > 0,
 );
 const hasNodeInfo = computed(() => Boolean(store.getSelectedNode()));
+const shouldHighlightResults = computed(() =>
+  hasResults.value &&
+  !store.hasVisitedExploreNodes &&
+  !store.shouldPulseCodeStructuresStage,
+);
+const shouldPulseStructures = computed(() =>
+  store.shouldPulseCodeStructuresStage,
+);
 
 const tabs = computed(() => [
   {
@@ -78,6 +86,7 @@ function openTab(tabId) {
     return;
   }
 
+  store.shouldPulseCodeStructuresStage = false;
   store.setActiveWorkspaceTab('explorer');
 }
 </script>
@@ -89,7 +98,11 @@ function openTab(tabId) {
         v-for="tab in tabs"
         :key="tab.id"
         class="subtab-btn"
-        :class="{active: activeSubview === tab.id}"
+        :class="{
+          active: activeSubview === tab.id,
+          highlighted: tab.id === 'results' && shouldHighlightResults,
+          pulsating: tab.id === 'structures' && shouldPulseStructures,
+        }"
         type="button"
         :disabled="!tab.enabled || activeSubview === tab.id"
         :title="tab.label"
@@ -120,6 +133,8 @@ function openTab(tabId) {
   display: flex;
   gap: 0.55rem;
   flex-wrap: wrap;
+  padding-top: 0.35rem;
+  padding-left: 0.35rem;
 }
 
 .subtab-btn {
@@ -141,6 +156,35 @@ function openTab(tabId) {
   box-shadow: inset 0 0 0 1px rgba(126, 202, 255, 0.12);
 }
 
+.subtab-btn.highlighted {
+  border-color: rgba(255, 215, 64, 0.95);
+  background: rgba(255, 215, 64, 0.2);
+  box-shadow: 0 0 0 0 rgba(255, 215, 64, 0.65);
+  animation: pulse-results-glow 2s infinite;
+}
+
+.subtab-btn.highlighted:hover:not(:disabled):not(.active),
+.subtab-btn.highlighted:focus-visible:not(:disabled):not(.active) {
+  background: rgba(255, 215, 64, 0.26);
+  border-color: rgba(255, 215, 64, 1);
+}
+
+.subtab-btn.pulsating {
+  border-color: rgba(255, 215, 64, 0.95);
+  background: rgba(255, 215, 64, 0.22);
+  box-shadow: 0 0 0 0 rgba(255, 215, 64, 0.7);
+  animation: pulse-structures-glow 2s infinite;
+  position: relative;
+  z-index: 1;
+}
+
+.subtab-btn.pulsating:hover:not(:disabled):not(.active),
+.subtab-btn.pulsating:focus-visible:not(:disabled):not(.active) {
+  background: rgba(255, 215, 64, 0.28);
+  border-color: rgba(255, 215, 64, 1);
+  outline: none;
+}
+
 .subtab-btn:hover:not(:disabled):not(.active),
 .subtab-btn:focus-visible:not(:disabled):not(.active) {
   background: rgba(126, 202, 255, 0.1);
@@ -162,4 +206,32 @@ function openTab(tabId) {
   width: 1rem;
   height: 1rem;
 }
+
+@keyframes pulse-results-glow {
+  0% {
+    box-shadow:
+      0 0 0 0 rgba(255, 215, 64, 0.65),
+      0 0 18px rgba(255, 215, 64, 0.28);
+  }
+
+  100% {
+    box-shadow:
+      0 0 0 15px rgba(255, 215, 64, 0),
+      0 0 24px rgba(255, 215, 64, 0.12);
+  }
+}
+
+@keyframes pulse-structures-glow {
+  0% {
+    box-shadow:
+      0 0 0 0 rgba(255, 215, 64, 0.7),
+      0 0 9px rgba(255, 215, 64, 0.32);
+  }
+
+  100% {
+    box-shadow:
+      0 0 0 7.5px rgba(255, 215, 64, 0),
+      0 0 12px rgba(255, 215, 64, 0.14);
+  }
+}
 </style>

src/components/FileLoader.vue

@@ -208,13 +208,13 @@ function loadSample(sampleId) {
   0% {
     box-shadow:
       0 0 0 0 rgba(0, 204, 255, 0.7),
-      0 0 18px rgba(0, 204, 255, 0.32);
+      0 0 9px rgba(0, 204, 255, 0.32);
   }
 
   100% {
     box-shadow:
-      0 0 0 15px rgba(0, 204, 255, 0),
-      0 0 24px rgba(0, 204, 255, 0.14);
+      0 0 0 7.5px rgba(0, 204, 255, 0),
+      0 0 12px rgba(0, 204, 255, 0.14);
   }
 }
 

src/components/InputCodeEditor.vue

@@ -1,23 +1,13 @@
 <script setup>
+import initialScript from '../initialScript.js?raw';
 import store from '../store';
 import CodeEditor from './CodeEditor.vue';
 
-const initialValue = `/*
-flASTer usage:
-
-1. Paste JavaScript here or load a local file / saved sample from the top menu.
-2. Samples parse automatically. For pasted code or loaded files, click Parse to build the AST and enable structure matching.
-3. Use the Structure Explorer to match patterns, inspect results, and open transforms.
-4. Apply built-in or custom transforms from the inspector when you are ready.
-
-Replace this comment with the code you want to analyze.
-*/`;
-
 </script>
 
 <template>
   <div class="code-editor-wrapper">
-    <code-editor :editor-id="store.editorIds.inputCodeEditor" :initial-value="initialValue"/>
+    <code-editor :editor-id="store.editorIds.inputCodeEditor" :initial-value="initialScript"/>
   </div>
 </template>
 

src/components/ParseButton.vue

@@ -43,11 +43,13 @@ function resetParsedState() {
   store.arb = {ast: [], script: ''};
   store.clearKnownStructureResults();
   store.parsedContentVersion = -1;
+  store.hasVisitedExploreNodes = false;
+  store.shouldPulseCodeStructuresStage = false;
   setContentUnparsed();
   store.page = 0;
 }
 
-function parseContent() {
+function parseContent({focusExploreNodes = false, pulseCodeStructures = false} = {}) {
   if (!canParse.value) {
     return;
   }
@@ -73,6 +75,15 @@ function parseContent() {
       store.filteredNodes = store.arb.ast;
       store.markCurrentInputParsed();
       setContentParsed();
+
+      if (focusExploreNodes) {
+        store.setActiveWorkspaceTab('results');
+        store.setActiveInspectorPanel('browser');
+      }
+
+      if (pulseCodeStructures) {
+        store.shouldPulseCodeStructuresStage = true;
+      }
     }).catch((error) => store.logMessage(error.message, 'error'));
   } catch (error) {
     store.logMessage(error.message, 'error');
@@ -88,7 +99,10 @@ onMounted(() => {
     }
 
     store.shouldAutoParseInitialInput = false;
-    parseContent();
+    parseContent({
+      focusExploreNodes: true,
+      pulseCodeStructures: true,
+    });
     return true;
   };
 

src/components/PipelineBuilder.vue

@@ -4,6 +4,7 @@ import IconArrowUp from './icons/IconArrowUp.vue';
 import IconArrowDown from './icons/IconArrowDown.vue';
 import IconEye from './icons/IconEye.vue';
 import IconClose from './icons/IconClose.vue';
+import IconTransform from './icons/IconTransform.vue';
 </script>
 
 <template>
@@ -52,6 +53,15 @@ import IconClose from './icons/IconClose.vue';
           <button class="mini-btn icon-btn icon-btn-sm" type="button" :title="step.enabled === false ? 'Enable this step' : 'Disable this step'" :aria-label="step.enabled === false ? 'Enable step' : 'Disable step'" @click.stop="store.togglePipelineStep(index)">
             <icon-eye />
           </button>
+          <button
+            class="mini-btn icon-btn icon-btn-sm"
+            type="button"
+            title="Replace this step by reparsing and reopening the Transform panel"
+            aria-label="Replace step transform"
+            @click.stop="store.editPipelineStep(index)"
+          >
+            <icon-transform />
+          </button>
           <button class="mini-btn icon-btn icon-btn-sm" type="button" title="Remove this step from the pipeline" aria-label="Remove step" @click.stop="store.removePipelineStep(index)">
             <icon-close />
           </button>

src/components/TemplateWorkbench.vue

@@ -222,6 +222,16 @@ const transformOptions = computed(() => store.templateCatalog.map((template) =>
     };
   }
 
+  if (template.type === 'no-transform') {
+    return {
+      ...template,
+      disabled: !activeStructure.value || activeMatchCount.value < 1,
+      detail: activeStructure.value && activeMatchCount.value > 0
+        ? 'Export matcher scaffolding without changing the current script.'
+        : 'Choose a matched structure first.',
+    };
+  }
+
   return {
     ...template,
     disabled: !activeStructure.value || activeMatchCount.value < 1,

src/composition/scriptGenerator.js

@@ -149,7 +149,9 @@ function createImportPlan(steps) {
       });
 
       if (implementation?.importPath && implementation?.namespaceImport) {
-        needsKnownStructureRuntime = true;
+        if (stepNeedsKnownStructureRuntime(step)) {
+          needsKnownStructureRuntime = true;
+        }
         const importEntry = restringerImports.get(implementation.importPath) ?? {
           importPath: implementation.importPath,
           namespaceImport: implementation.namespaceImport,
@@ -257,6 +259,10 @@ function createPipelineEpilogue() {
  * @returns {string}
  */
 function createCustomStepBlock(step, stepNumber, combineFilters) {
+  if (isNoTransformStep(step)) {
+    return createNoTransformStepBlock(step, stepNumber, combineFilters);
+  }
+
   const enabledFilters = step?.kind === 'custom'
     ? step.filters?.filter((filter) => filter?.enabled && !!filter?.src) ?? []
     : [];
@@ -429,6 +435,14 @@ function isStructureSelectionStep(step) {
     step?.templateType === 'isolate-structure-matches';
 }
 
+function isNoTransformStep(step) {
+  return step?.templateType === 'no-transform';
+}
+
+function stepNeedsKnownStructureRuntime(step) {
+  return step?.kind === 'known-structure-transform' || isStructureSelectionStep(step);
+}
+
 function getCustomStepRunMode(step) {
   const runMode = step?.runMode ?? step?.params?.runMode ?? 'until-stable';
   return ['once', 'count', 'until-stable'].includes(runMode) ? runMode : 'until-stable';
@@ -449,6 +463,79 @@ function getCustomStepMaxIterations(step) {
   return 1;
 }
 
+function createNoTransformStepBlock(step, stepNumber, combineFilters) {
+  const structureId = step?.selectionSource?.kind === 'known-structure'
+    ? step.selectionSource.structureId ?? step?.params?.structureId ?? ''
+    : step?.params?.structureId ?? '';
+  const implementation = structureId
+    ? maybeResolveKnownStructureImplementation({structureId})
+    : null;
+  const enabledFilters = step?.kind === 'custom'
+    ? step.filters?.filter((filter) => filter?.enabled && !!filter?.src) ?? []
+    : [];
+  const filter = enabledFilters.length
+    ? combineFilters(enabledFilters.map((filterEntry) => filterEntry.src))
+    : 'true';
+  const arbVar = `arb${stepNumber}`;
+  const rawMatchesVar = `rawMatches${stepNumber}`;
+  const matchFuncVar = `customMatchFunc${stepNumber}`;
+  const transformFuncVar = `customTransform${stepNumber}`;
+  const nextChangesVar = `appliedChanges${stepNumber}`;
+
+  if (implementation?.matcherName && implementation?.namespaceImport) {
+    return `// Step ${stepNumber}: ${step?.label ?? 'No Transform'}
+function ${transformFuncVar}(arb, matches) {
+  // Intentionally empty. Edit this after export.
+  return arb;
+}
+let ${arbVar} = new Arborist(script);
+const ${rawMatchesVar} = ${implementation.namespaceImport}.${implementation.matcherName}(${arbVar}, () => true);
+
+${transformFuncVar}(${arbVar}, ${rawMatchesVar});
+
+const ${nextChangesVar} = ${arbVar}.applyChanges();
+script = ${arbVar}.script;
+
+console.debug(
+  \`[i] Step ${stepNumber} matched \${${rawMatchesVar}.length} group\${${rawMatchesVar}.length === 1 ? '' : 's'} for ${step?.label ?? 'No Transform'}\`,
+);
+
+if (${nextChangesVar} > 0) {
+  console.debug(
+    \`[+] Step ${stepNumber} applied \${${nextChangesVar}} change\${${nextChangesVar} === 1 ? '' : 's'}\`,
+  );
+} else {
+  console.debug(\`[!] Step ${stepNumber} did not change the script\`);
+}`;
+  }
+
+  return `// Step ${stepNumber}: ${step?.label ?? 'No Transform'}
+const ${matchFuncVar} = (arb) => (arb.ast ?? []).filter((n) => ${filter});
+function ${transformFuncVar}(arb, matches) {
+  // Intentionally empty. Edit this after export.
+  return arb;
+}
+let ${arbVar} = new Arborist(script);
+const ${rawMatchesVar} = ${matchFuncVar}(${arbVar});
+
+${transformFuncVar}(${arbVar}, ${rawMatchesVar});
+
+const ${nextChangesVar} = ${arbVar}.applyChanges();
+script = ${arbVar}.script;
+
+console.debug(
+  \`[i] Step ${stepNumber} matched \${${rawMatchesVar}.length} node\${${rawMatchesVar}.length === 1 ? '' : 's'} for ${step?.label ?? 'No Transform'}\`,
+);
+
+if (${nextChangesVar} > 0) {
+  console.debug(
+    \`[+] Step ${stepNumber} applied \${${nextChangesVar}} change\${${nextChangesVar} === 1 ? '' : 's'}\`,
+  );
+} else {
+  console.debug(\`[!] Step ${stepNumber} did not change the script\`);
+}`;
+}
+
 function createStructureSelectionStepBlock(step, stepNumber, resolveStructureFilter) {
   const structureId = step?.params?.structureId ?? step?.selectionSource?.structureId ?? '';
   const structureTitle = step?.label?.replace(/^(Delete|Isolate|Keep only)\s+/u, '').replace(/\s+matches$/u, '') ||

src/initialScript.js

@@ -0,0 +1,12 @@
+/*
+flASTer usage:
+
+1. Paste JavaScript here or load a local file / saved sample from the top menu.
+2. Samples parse automatically. For pasted code or loaded files, click Parse to build the AST and enable structure matching.
+3. Use the Structure Explorer to match patterns, inspect results, and open transforms.
+4. Apply built-in or custom transforms from the inspector when you are ready.
+
+Replace this comment with the code you want to analyze.
+*/
+const arr = ['Here,', 'have', 'some', 'interesting', 'nodes', 'for', 'starters'];
+console.log(arr.join(' '));