astro-tractstack 2.0.11 → 2.0.12

package/templates/src/utils/compositor/nodesHelper.ts

@@ -352,14 +352,18 @@ export function processRichTextToNodes(
 
   // Process each node to restore interactive element properties
   parsedNodes.forEach((node) => {
-    if (['a', 'button'].includes(node.tagName)) {
+    if (['a', 'button', 'span'].includes(node.tagName)) {
       const matchingOriginalNode = findMatchingNode(node, originalNodes);
-
       if (matchingOriginalNode) {
-        // Preserve properties from the original node
-        node.buttonPayload = matchingOriginalNode.buttonPayload;
-        if (node.tagName === 'a' && matchingOriginalNode.href) {
-          node.href = matchingOriginalNode.href;
+        if (node.tagName === 'a') {
+          if (matchingOriginalNode.href) {
+            node.href = matchingOriginalNode.href;
+          }
+        } else if (node.tagName === 'button') {
+          node.buttonPayload = matchingOriginalNode.buttonPayload;
+        } else if (node.tagName === 'span') {
+          node.elementCss = matchingOriginalNode.elementCss;
+          node.overrideClasses = matchingOriginalNode.overrideClasses;
         }
       } else if (onInsertSignal) {
         // New interactive element detected, trigger insert signal
@@ -381,49 +385,64 @@ export function findMatchingNode(
   newNode: FlatNode,
   originalNodes: FlatNode[]
 ): FlatNode | undefined {
-  if (newNode.tagName === 'a' && newNode.href) {
-    // Exact href match for links
-    const hrefMatch = originalNodes.find(
-      (node) => node.tagName === 'a' && node.href === newNode.href
-    );
-    if (hrefMatch) return hrefMatch;
-
-    // Domain-based partial match
-    const partialMatch = originalNodes.find((node) => {
-      if (node.tagName !== 'a' || !node.href || !newNode.href) return false;
-      try {
-        const origDomain = new URL(node.href).hostname;
-        const newDomain = new URL(newNode.href).hostname;
-        return origDomain === newDomain;
-      } catch {
-        return false;
+  switch (newNode.tagName) {
+    case 'a': {
+      if (!newNode.href) {
+        break;
       }
-    });
-    if (partialMatch) return partialMatch;
-  }
 
-  if (newNode.tagName === 'button') {
-    const newText = getNodeText(newNode);
-    const buttonMatches = originalNodes.filter(
-      (node) => node.tagName === 'button'
-    );
+      const hrefMatch = originalNodes.find(
+        (node) => node.tagName === 'a' && node.href === newNode.href
+      );
+      if (hrefMatch) {
+        return hrefMatch;
+      }
+
+      const partialMatch = originalNodes.find((node) => {
+        if (node.tagName !== 'a' || !node.href || !newNode.href) {
+          return false;
+        }
+        try {
+          const origDomain = new URL(node.href).hostname;
+          const newDomain = new URL(newNode.href).hostname;
+          return origDomain === newDomain;
+        } catch {
+          return false;
+        }
+      });
+      if (partialMatch) {
+        return partialMatch;
+      }
+
+      break;
+    }
+
+    case 'button':
+    case 'span': {
+      const newText = getNodeText(newNode);
+      const matches = originalNodes.filter(
+        (node) => node.tagName === newNode.tagName
+      );
+
+      for (const match of matches) {
+        const matchText = getNodeText(match);
+        if (
+          matchText.includes(newText) ||
+          newText.includes(matchText) ||
+          calculateSimilarity(matchText, newText) > 0.7
+        ) {
+          return match;
+        }
+      }
 
-    for (const button of buttonMatches) {
-      const buttonText = getNodeText(button);
       if (
-        buttonText.includes(newText) ||
-        newText.includes(buttonText) ||
-        calculateSimilarity(buttonText, newText) > 0.7
+        matches.length === 1 &&
+        originalNodes.filter((n) => n.tagName === newNode.tagName).length === 1
       ) {
-        return button;
+        return matches[0];
       }
-    }
 
-    if (
-      buttonMatches.length === 1 &&
-      originalNodes.filter((n) => n.tagName === 'button').length === 1
-    ) {
-      return buttonMatches[0];
+      break;
     }
   }
 

package/templates/src/utils/compositor/tailwindClasses.ts

@@ -444,17 +444,7 @@ export const tailwindClasses: TailwindClasses = {
     priority: 0,
   },
   fontWEIGHT: {
-    values: [
-      //"thin",
-      //"extralight",
-      //"light",
-      'normal',
-      //"medium",
-      //"semibold",
-      'bold',
-      //"extrabold",
-      //"black",
-    ],
+    values: ['normal', 'bold'],
     group: 'Typography',
     title: 'Font Weight',
     className: 'font',
@@ -740,6 +730,7 @@ export const tailwindClasses: TailwindClasses = {
     className: 'm',
     prefix: 'm-',
     priority: 1,
+    allowNegative: true,
   },
   mx: {
     values: [...spacing],
@@ -748,6 +739,7 @@ export const tailwindClasses: TailwindClasses = {
     className: 'mx',
     prefix: 'mx-',
     priority: 1,
+    allowNegative: true,
   },
   my: {
     values: [...spacing],
@@ -756,6 +748,7 @@ export const tailwindClasses: TailwindClasses = {
     className: 'my',
     prefix: 'my-',
     priority: 1,
+    allowNegative: true,
   },
   mt: {
     values: [...spacing],
@@ -764,6 +757,7 @@ export const tailwindClasses: TailwindClasses = {
     className: 'mt',
     prefix: 'mt-',
     priority: 1,
+    allowNegative: true,
   },
   mr: {
     values: [...spacing],
@@ -772,6 +766,7 @@ export const tailwindClasses: TailwindClasses = {
     className: 'mr',
     prefix: 'mr-',
     priority: 1,
+    allowNegative: true,
   },
   mb: {
     values: [...spacing],
@@ -780,6 +775,7 @@ export const tailwindClasses: TailwindClasses = {
     className: 'mb',
     prefix: 'mb-',
     priority: 1,
+    allowNegative: true,
   },
   ml: {
     values: [...spacing],
@@ -788,6 +784,7 @@ export const tailwindClasses: TailwindClasses = {
     className: 'ml',
     prefix: 'ml-',
     priority: 1,
+    allowNegative: true,
   },
   p: {
     values: [...spacing],
@@ -845,6 +842,24 @@ export const tailwindClasses: TailwindClasses = {
     prefix: 'pl-',
     priority: 1,
   },
+  spaceX: {
+    values: [...spacing],
+    group: 'Spacing',
+    title: 'Space Between X',
+    className: 'space-x',
+    prefix: 'space-x-',
+    priority: 1,
+    allowNegative: true,
+  },
+  spaceY: {
+    values: [...spacing],
+    group: 'Spacing',
+    title: 'Space Between Y',
+    className: 'space-y',
+    prefix: 'space-y-',
+    priority: 1,
+    allowNegative: true,
+  },
   flex: {
     values: ['1', 'auto', 'initial', 'none'],
     group: 'Flexbox',
@@ -869,6 +884,48 @@ export const tailwindClasses: TailwindClasses = {
     prefix: 'flex-',
     priority: 1,
   },
+  flexGROW: {
+    values: ['0', '1'],
+    group: 'Flexbox',
+    title: 'Flex Grow',
+    className: 'grow',
+    prefix: 'grow-',
+    priority: 1,
+  },
+  flexSHRINK: {
+    values: ['0', '1'],
+    group: 'Flexbox',
+    title: 'Flex Shrink',
+    className: 'shrink',
+    prefix: 'shrink-',
+    priority: 1,
+  },
+  flexBASIS: {
+    values: [
+      ...spacing,
+      '1/2',
+      '1/3',
+      '2/3',
+      '1/4',
+      '3/4',
+      '1/5',
+      '2/5',
+      '3/5',
+      '4/5',
+      '1/6',
+      '5/6',
+      '1/12',
+      '5/12',
+      '7/12',
+      '11/12',
+      'full',
+    ],
+    group: 'Flexbox',
+    title: 'Flex Basis',
+    className: 'basis',
+    prefix: 'basis-',
+    priority: 1,
+  },
   justifyITEMS: {
     values: ['start', 'end', 'center', 'stretch'],
     group: 'Flexbox',
@@ -978,7 +1035,7 @@ export const tailwindClasses: TailwindClasses = {
     group: 'Flexbox',
     title: 'Gap X',
     className: 'gap-x',
-    prefix: 'gap-',
+    prefix: 'gap-x-',
     priority: 1,
   },
   gapY: {
@@ -1022,7 +1079,7 @@ export const tailwindClasses: TailwindClasses = {
     group: 'Flexbox',
     title: 'Gap Y',
     className: 'gap-y',
-    prefix: 'gap-',
+    prefix: 'gap-y-',
     priority: 1,
   },
   borderSTYLE: {
@@ -1034,25 +1091,49 @@ export const tailwindClasses: TailwindClasses = {
     priority: 2,
   },
   borderWIDTH: {
-    values: ['0', '2', '4', '8'],
+    values: ['0', '1', '2', '4', '8'],
     group: 'Borders',
     title: 'Border Width',
     className: 'border',
     prefix: 'border-',
     priority: 2,
   },
-  borderCOLOR: {
-    values: ['inherit', 'current', 'transparent', ...colorValues],
+  borderT_WIDTH: {
+    values: ['0', '1', '2', '4', '8'],
     group: 'Borders',
-    title: 'Border Color',
-    className: 'border',
-    prefix: 'border-',
+    title: 'Border Top Width',
+    className: 'border-t',
+    prefix: 'border-t-',
     priority: 2,
   },
-  borderSTROKE: {
-    values: ['0', '2', '4', '8'],
+  borderR_WIDTH: {
+    values: ['0', '1', '2', '4', '8'],
+    group: 'Borders',
+    title: 'Border Right Width',
+    className: 'border-r',
+    prefix: 'border-r-',
+    priority: 2,
+  },
+  borderB_WIDTH: {
+    values: ['0', '1', '2', '4', '8'],
     group: 'Borders',
-    title: 'Border Stroke Size',
+    title: 'Border Bottom Width',
+    className: 'border-b',
+    prefix: 'border-b-',
+    priority: 2,
+  },
+  borderL_WIDTH: {
+    values: ['0', '1', '2', '4', '8'],
+    group: 'Borders',
+    title: 'Border Left Width',
+    className: 'border-l',
+    prefix: 'border-l-',
+    priority: 2,
+  },
+  borderCOLOR: {
+    values: ['inherit', 'current', 'transparent', ...colorValues],
+    group: 'Borders',
+    title: 'Border Color',
     className: 'border',
     prefix: 'border-',
     priority: 2,
@@ -1069,8 +1150,8 @@ export const tailwindClasses: TailwindClasses = {
     values: ['0', '2', '4', '8'],
     group: 'Borders',
     title: 'Divide Width',
-    className: 'divide',
-    prefix: 'divide-',
+    className: 'divide-x',
+    prefix: 'divide-x-',
     priority: 2,
   },
   divideCOLOR: {
@@ -1090,7 +1171,7 @@ export const tailwindClasses: TailwindClasses = {
     priority: 2,
   },
   outlineWIDTH: {
-    values: ['0', '2', '4', '8'],
+    values: ['0', '1', '2', '4', '8'],
     group: 'Borders',
     title: 'Outline Width',
     className: 'outline',
@@ -1114,7 +1195,7 @@ export const tailwindClasses: TailwindClasses = {
     priority: 2,
   },
   ringWIDTH: {
-    values: ['0', '2', '4', '8'],
+    values: ['0', '1', '2', '4', '8'],
     group: 'Borders',
     title: 'Ring Width',
     className: 'ring',
@@ -1130,7 +1211,7 @@ export const tailwindClasses: TailwindClasses = {
     priority: 2,
   },
   ringOffsetWIDTH: {
-    values: ['0', '2', '4', '8'],
+    values: ['0', '1', '2', '4', '8'],
     group: 'Borders',
     title: 'Ring Offset Width',
     className: 'ring-offset',
@@ -1219,6 +1300,38 @@ export const tailwindClasses: TailwindClasses = {
     prefix: 'bg-origin-',
     priority: 2,
   },
+  bgGradientDIRECTION: {
+    values: ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'],
+    group: 'Backgrounds',
+    title: 'Gradient Direction',
+    className: 'bg-gradient-to',
+    prefix: 'bg-gradient-to-',
+    priority: 2,
+  },
+  gradientFrom: {
+    values: ['inherit', 'current', 'transparent', ...colorValues],
+    group: 'Backgrounds',
+    title: 'Gradient From',
+    className: 'from',
+    prefix: 'from-',
+    priority: 2,
+  },
+  gradientVia: {
+    values: ['inherit', 'current', 'transparent', ...colorValues],
+    group: 'Backgrounds',
+    title: 'Gradient Via',
+    className: 'via',
+    prefix: 'via-',
+    priority: 2,
+  },
+  gradientTo: {
+    values: ['inherit', 'current', 'transparent', ...colorValues],
+    group: 'Backgrounds',
+    title: 'Gradient To',
+    className: 'to',
+    prefix: 'to-',
+    priority: 2,
+  },
   fill: {
     values: ['inherit', 'current', 'transparent', ...colorValues],
     group: 'Colors',
@@ -1276,7 +1389,7 @@ export const tailwindClasses: TailwindClasses = {
     useKeyAsClass: true,
     priority: 3,
   },
-  transitionPROPERTY: {
+  transition: {
     values: ['none', 'all', 'colors', 'opacity', 'shadow', 'transform'],
     group: 'Transitions',
     title: 'Transition Property',
@@ -1296,47 +1409,44 @@ export const tailwindClasses: TailwindClasses = {
     values: ['0', '1', '2', '3', '6', '12'],
     group: 'Transforms',
     title: 'Skew',
-    className: 'skew',
-    prefix: 'skew-',
+    className: 'skew-x',
+    prefix: 'skew-x-',
     priority: 3,
+    allowNegative: true,
   },
   translate: {
     values: [
-      '0',
-      '1',
-      '2',
-      '3',
-      '4',
-      '5',
-      '6',
-      '7',
-      '8',
-      '9',
-      '10',
-      '11',
-      '12',
-      '14',
-      '16',
-      '20',
-      '24',
-      '28',
-      '32',
-      '36',
-      '40',
-      '44',
-      '48',
-      '52',
-      '56',
-      '60',
-      '64',
-      '72',
-      '80',
-      '96',
+      ...spacing.slice(0, 31),
+      '1/2',
+      '1/3',
+      '1/4',
+      '2/3',
+      '3/4',
+      'full',
     ],
     group: 'Transforms',
     title: 'Translate',
-    className: 'translate',
-    prefix: 'translate-',
+    className: 'translate-x',
+    prefix: 'translate-x-',
+    priority: 3,
+    allowNegative: true,
+  },
+  transformORIGIN: {
+    values: [
+      'center',
+      'top',
+      'top-right',
+      'right',
+      'bottom-right',
+      'bottom',
+      'bottom-left',
+      'left',
+      'top-left',
+    ],
+    group: 'Transforms',
+    title: 'Transform Origin',
+    className: 'origin',
+    prefix: 'origin-',
     priority: 3,
   },
   listSTYLETYPE: {
@@ -1506,6 +1616,7 @@ export const tailwindClasses: TailwindClasses = {
     className: 'hue-rotate',
     prefix: 'hue-rotate-',
     priority: 3,
+    allowNegative: true,
   },
   invert: {
     values: ['0', '1'],
@@ -1591,6 +1702,7 @@ export const tailwindClasses: TailwindClasses = {
     className: 'backdrop-hue-rotate',
     prefix: 'backdrop-hue-rotate-',
     priority: 3,
+    allowNegative: true,
   },
   backdropINVERT: {
     values: ['0', '1'],
@@ -1640,14 +1752,6 @@ export const tailwindClasses: TailwindClasses = {
     prefix: 'backdrop-sepia-',
     priority: 3,
   },
-  transition: {
-    values: ['none', 'all', 'colors', 'opacity', 'shadow', 'transform'],
-    group: 'Transitions',
-    title: 'Transition',
-    className: 'transition',
-    prefix: 'transition-',
-    priority: 3,
-  },
   transitionDURATION: {
     values: ['75', '100', '150', '200', '300', '500', '700', '1000'],
     group: 'Transitions',
@@ -1725,6 +1829,14 @@ export const tailwindClasses: TailwindClasses = {
     prefix: 'cursor-',
     priority: 3,
   },
+  appearance: {
+    values: ['none', 'auto'],
+    group: 'Interactivity',
+    title: 'Appearance',
+    className: 'appearance',
+    prefix: 'appearance-',
+    priority: 3,
+  },
   pointerEVENTS: {
     values: ['none', 'auto'],
     group: 'Interactivity',
@@ -1749,6 +1861,15 @@ export const tailwindClasses: TailwindClasses = {
     prefix: 'scroll-',
     priority: 3,
   },
+  scrollMARGIN: {
+    values: [...spacing],
+    group: 'Interactivity',
+    title: 'Scroll Margin',
+    className: 'scroll-m',
+    prefix: 'scroll-m-',
+    priority: 3,
+    allowNegative: true,
+  },
   scrollSNAP: {
     values: ['none', 'x', 'y', 'both'],
     group: 'Interactivity',
@@ -1792,4 +1913,13 @@ export const tailwindClasses: TailwindClasses = {
     prefix: 'will-change-',
     priority: 3,
   },
+  screenREADERS: {
+    values: ['sr-only', 'not-sr-only'],
+    group: 'Accessibility',
+    title: 'Screen Readers',
+    className: 'sr-only',
+    prefix: '',
+    useKeyAsClass: true,
+    priority: 3,
+  },
 };

package/utils/inject-files.ts

@@ -430,22 +430,12 @@ export async function injectTemplateFiles(
       dest: 'src/components/edit/pane/AddPanePanel_codehook.tsx',
     },
     {
-      src: resolve(
-        '../templates/src/components/edit/pane/AddPanePanel_newAICopy_modal.tsx'
-      ),
-      dest: 'src/components/edit/pane/AddPanePanel_newAICopy_modal.tsx',
-    },
-    {
-      src: resolve(
-        '../templates/src/components/edit/pane/AddPanePanel_newAICopy.tsx'
-      ),
-      dest: 'src/components/edit/pane/AddPanePanel_newAICopy.tsx',
+      src: resolve('../templates/src/components/edit/pane/AiPaneGenerator.tsx'),
+      dest: 'src/components/edit/pane/AiPaneGenerator.tsx',
     },
     {
-      src: resolve(
-        '../templates/src/components/edit/pane/AddPanePanel_newCopyMode.tsx'
-      ),
-      dest: 'src/components/edit/pane/AddPanePanel_newCopyMode.tsx',
+      src: resolve('../templates/src/components/edit/pane/AiPanePreview.tsx'),
+      dest: 'src/components/edit/pane/AiPanePreview.tsx',
     },
     {
       src: resolve(
@@ -607,6 +597,10 @@ export async function injectTemplateFiles(
       dest: 'src/utils/etl/loader.ts',
     },
     // Compositor utils
+    {
+      src: resolve('../templates/src/utils/compositor/aiPaneParser.ts'),
+      dest: 'src/utils/compositor/aiPaneParser.ts',
+    },
     {
       src: resolve('../templates/src/utils/compositor/processMarkdown.ts'),
       dest: 'src/utils/compositor/processMarkdown.ts',