astro-tractstack 2.0.17 → 2.0.19

package/templates/src/components/edit/panels/StyleParentPanel_update.tsx

@@ -1,141 +1,209 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
-import ViewportComboBox from '@/components/fields/ViewportComboBox';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
+import ViewportComboBox from '@/components/fields/ViewportComboBox';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import type {
-  BasePanelProps,
+  ParentBasePanelProps,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
+  DefaultClassValue,
 } from '@/types/compositorTypes';
 
-const StyleParentUpdatePanel = ({
+type StyleableNode = MarkdownPaneFragmentNode | GridLayoutNode;
+
+type ViewportValues = {
+  mobile: string;
+  tablet: string;
+  desktop: string;
+};
+
+type CustomPanelProps = ParentBasePanelProps & {
+  targetProperty: 'parentClasses' | 'gridClasses';
+};
+
+const StyleParentPanelUpdate = ({
   node,
   layer,
   className,
+  targetProperty,
   config,
-}: BasePanelProps) => {
-  if (!node || !className || !layer) return null;
-  if (!isMarkdownPaneFragmentNode(node)) return null;
-
-  const [mobileValue, setMobileValue] = useState<string>(``);
-  const [tabletValue, setTabletValue] = useState<string>(``);
-  const [desktopValue, setDesktopValue] = useState<string>(``);
-  const [pendingUpdate, setPendingUpdate] = useState<{
-    value: string;
-    viewport: 'mobile' | 'tablet' | 'desktop';
-  } | null>(null);
-
-  const friendlyName = tailwindClasses[className]?.title || className;
-  const values = tailwindClasses[className]?.values || [];
-
-  const resetStore = () => {
-    if (node?.id)
-      settingsPanelStore.set({
-        nodeId: node.id,
-        layer: layer,
-        action: `style-parent`,
-        expanded: true,
-      });
+}: CustomPanelProps) => {
+  const ctx = getCtx();
+  const styleableNode = node as StyleableNode | null;
+
+  if (
+    !styleableNode ||
+    (!isMarkdownPaneFragmentNode(styleableNode) &&
+      !isGridLayoutNode(styleableNode)) ||
+    !layer ||
+    !className ||
+    !config // Ensure config exists
+  ) {
+    return (
+      <div>
+        Error: Could not find node, layer, class name, or config to update.
+        <pre>
+          {JSON.stringify(
+            {
+              nodeExists: !!styleableNode,
+              layer,
+              className,
+              targetProperty,
+              configExists: !!config,
+            },
+            null,
+            2
+          )}
+        </pre>
+      </div>
+    );
+  }
+
+  const tailwindConfig = tailwindClasses[className];
+  if (!tailwindConfig) {
+    return <div>Error: Tailwind config not found for {className}</div>;
+  }
+
+  const getInitialValues = (): ViewportValues => {
+    let classesSource: DefaultClassValue | undefined;
+
+    if (targetProperty === 'parentClasses') {
+      const layerIndex = layer - 1;
+      classesSource = styleableNode.parentClasses?.[layerIndex];
+    } else if (
+      targetProperty === 'gridClasses' &&
+      isMarkdownPaneFragmentNode(styleableNode)
+    ) {
+      classesSource = styleableNode.gridClasses;
+    }
+
+    return {
+      mobile: classesSource?.mobile?.[className] || '',
+      tablet: classesSource?.tablet?.[className] || '',
+      desktop: classesSource?.desktop?.[className] || '',
+    };
   };
+
+  const [values, setValues] = useState<ViewportValues>(getInitialValues);
+
+  const validTailwindValues = useMemo(() => {
+    return ['', ...tailwindConfig.values];
+  }, [tailwindConfig]);
+
   const handleCancel = () => {
-    resetStore();
+    settingsPanelStore.set({
+      nodeId: styleableNode.id,
+      layer: layer,
+      action: 'style-parent',
+      expanded: true,
+    });
   };
 
-  // Initialize values from current node state
-  useEffect(() => {
-    const layerIndex = layer - 1;
-    const layerClasses = node?.parentClasses?.[layerIndex];
-    if (!layerClasses) return;
-
-    setMobileValue(layerClasses.mobile[className] || '');
-    setTabletValue(layerClasses.tablet[className] || '');
-    setDesktopValue(layerClasses.desktop[className] || '');
-  }, [node, layer, className]);
-
-  // Handle updates after state changes
-  useEffect(() => {
-    if (!pendingUpdate) return;
-
-    const ctx = getCtx();
-    const allNodes = ctx.allNodes.get();
-    const markdownNode = cloneDeep(
-      allNodes.get(node.id)
-    ) as MarkdownPaneFragmentNode;
-    if (!markdownNode) return;
-
-    const layerIndex = layer - 1;
-    const layerClasses = markdownNode.parentClasses?.[layerIndex];
-    if (!layerClasses) return;
-
-    switch (pendingUpdate.viewport) {
-      case 'mobile':
-        layerClasses.mobile[className] = pendingUpdate.value;
-        setMobileValue(pendingUpdate.value);
-        break;
-      case 'tablet':
-        layerClasses.tablet[className] = pendingUpdate.value;
-        setTabletValue(pendingUpdate.value);
-        break;
-      case 'desktop':
-        layerClasses.desktop[className] = pendingUpdate.value;
-        setDesktopValue(pendingUpdate.value);
-        break;
-    }
+  const handleUpdate = useCallback(
+    (value: string, viewport: 'mobile' | 'tablet' | 'desktop') => {
+      const newValues = { ...values, [viewport]: value };
+      setValues(newValues);
 
-    ctx.modifyNodes([{ ...markdownNode, isChanged: true }]);
-    setPendingUpdate(null);
-  }, [pendingUpdate, node.id, layer, className]);
+      const updatedNode = cloneDeep(styleableNode);
+      let classesTarget: DefaultClassValue | undefined;
 
-  const handleFinalChange = useCallback(
-    (value: string, viewport: 'mobile' | 'tablet' | 'desktop') => {
-      setPendingUpdate({ value, viewport });
+      if (targetProperty === 'parentClasses') {
+        const layerIndex = layer - 1;
+        if (!updatedNode.parentClasses) {
+          updatedNode.parentClasses = [];
+        }
+        while (updatedNode.parentClasses.length <= layerIndex) {
+          updatedNode.parentClasses.push({
+            mobile: {},
+            tablet: {},
+            desktop: {},
+          });
+        }
+        if (!updatedNode.parentClasses[layerIndex]) {
+          updatedNode.parentClasses[layerIndex] = {
+            mobile: {},
+            tablet: {},
+            desktop: {},
+          };
+        }
+        classesTarget = updatedNode.parentClasses[layerIndex];
+      } else if (
+        targetProperty === 'gridClasses' &&
+        isMarkdownPaneFragmentNode(updatedNode)
+      ) {
+        if (!updatedNode.gridClasses) {
+          updatedNode.gridClasses = { mobile: {}, tablet: {}, desktop: {} };
+        }
+        classesTarget = updatedNode.gridClasses;
+      }
+
+      if (classesTarget) {
+        if (!classesTarget.mobile) classesTarget.mobile = {};
+        if (!classesTarget.tablet) classesTarget.tablet = {};
+        if (!classesTarget.desktop) classesTarget.desktop = {};
+
+        classesTarget[viewport][className] = value;
+
+        updatedNode.isChanged = true;
+        ctx.modifyNodes([updatedNode]);
+        ctx.notifyNode('root');
+      }
     },
-    []
+    [styleableNode, layer, className, targetProperty, values, ctx]
   );
 
   return (
-    <div className="isolate z-50 space-y-4">
+    <div className="space-y-4">
       <div className="flex flex-row flex-nowrap justify-between">
-        <h3 className="text-xl font-bold">
-          <span className="font-bold">{friendlyName}</span> (Layer {layer})
-        </h3>
         <button
-          className="text-myblue hover:text-black"
           title="Return to preview pane"
-          onClick={() => handleCancel()}
+          onClick={handleCancel}
+          className="text-myblue hover:text-black"
         >
           Go Back
         </button>
       </div>
-      <div className="text-mydarkgrey my-3 flex flex-col gap-y-2.5 text-xl">
+      <div>
+        <h3 className="text-xl font-bold">{tailwindConfig.title}</h3>
+        <p className="text-mydarkgrey mt-1 font-mono text-sm">
+          {tailwindConfig.className}
+        </p>
+      </div>
+
+      <div className="space-y-3">
         <ViewportComboBox
-          value={mobileValue}
-          onFinalChange={handleFinalChange}
-          values={values}
           viewport="mobile"
-          config={config!}
+          value={values.mobile}
+          values={validTailwindValues}
+          onFinalChange={handleUpdate}
+          config={config}
+          allowNegative={tailwindConfig.allowNegative}
         />
         <ViewportComboBox
-          value={tabletValue}
-          onFinalChange={handleFinalChange}
-          values={values}
           viewport="tablet"
-          isInferred={tabletValue === mobileValue}
-          config={config!}
+          value={values.tablet}
+          values={validTailwindValues}
+          onFinalChange={handleUpdate}
+          config={config}
+          allowNegative={tailwindConfig.allowNegative}
         />
         <ViewportComboBox
-          value={desktopValue}
-          onFinalChange={handleFinalChange}
-          values={values}
           viewport="desktop"
-          isInferred={desktopValue === tabletValue}
-          config={config!}
+          value={values.desktop}
+          values={validTailwindValues}
+          onFinalChange={handleUpdate}
+          config={config}
+          allowNegative={tailwindConfig.allowNegative}
         />
       </div>
     </div>
   );
 };
 
-export default StyleParentUpdatePanel;
+export default StyleParentPanelUpdate;

package/templates/src/components/edit/panels/StyleWidgetPanel.tsx

@@ -3,19 +3,23 @@ import Cog6ToothIcon from '@heroicons/react/24/outline/Cog6ToothIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { StylesMemory } from '@/components/edit/state/StylesMemory';
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { regexpHook, widgetMeta } from '@/constants';
 import { getCtx } from '@/stores/nodes';
 import type {
   FlatNode,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 
 interface StyleWidgetPanelProps {
   node: FlatNode;
   containerNode: FlatNode;
   outerContainerNode: FlatNode;
-  parentNode: MarkdownPaneFragmentNode;
+  parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
 }
 
 const StyleWidgetPanel = ({
@@ -28,7 +32,7 @@ const StyleWidgetPanel = ({
     !node?.tagName ||
     !containerNode?.tagName ||
     !outerContainerNode?.tagName ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   ) {
     return null;
   }

package/templates/src/components/edit/panels/StyleWidgetPanel_add.tsx

@@ -6,7 +6,10 @@ import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { useDropdownDirection } from '@/utils/helpers';
 import type { BasePanelProps } from '@/types/compositorTypes';
 
@@ -72,7 +75,11 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
   const comboboxRef = useRef<HTMLDivElement>(null);
   const { openAbove } = useDropdownDirection(comboboxRef);
 
-  if (!node?.tagName || !parentNode || !isMarkdownPaneFragmentNode(parentNode))
+  if (
+    !node?.tagName ||
+    !parentNode ||
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
+  )
     return null;
 
   const isOuterContainer = node.tagName === 'ul' || node.tagName === 'ol';

package/templates/src/components/edit/panels/StyleWidgetPanel_remove.tsx

@@ -1,7 +1,10 @@
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 import type { BasePanelProps, FlatNode } from '@/types/compositorTypes';
 
@@ -15,7 +18,7 @@ const StyleWidgetRemovePanel = ({
     !className ||
     !node?.tagName ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   ) {
     return null;
   }

package/templates/src/components/edit/panels/StyleWidgetPanel_update.tsx

@@ -3,12 +3,16 @@ import { settingsPanelStore } from '@/stores/storykeep';
 import ViewportComboBox from '@/components/fields/ViewportComboBox';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import { getCtx } from '@/stores/nodes';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 import type {
   BasePanelProps,
   FlatNode,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 
 const StyleWidgetUpdatePanel = ({
@@ -22,7 +26,7 @@ const StyleWidgetUpdatePanel = ({
     !node ||
     !className ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   )
     return null;
 

package/templates/src/components/edit/state/SaveModal.tsx

@@ -65,8 +65,14 @@ const INDETERMINATE_STAGES: SaveStage[] = [
 const SandboxUpgradeNotice = ({ onClose }: { onClose: () => void }) => (
   <Dialog.Root open={true} onOpenChange={() => onClose()} modal={true}>
     <Portal>
-      <Dialog.Backdrop className="fixed inset-0 z-[9005] bg-black bg-opacity-75" />
-      <Dialog.Positioner className="fixed inset-0 z-[9005] flex items-center justify-center p-4">
+      <Dialog.Backdrop
+        className="fixed inset-0 bg-black bg-opacity-75"
+        style={{ zIndex: 9005 }}
+      />
+      <Dialog.Positioner
+        className="fixed inset-0 flex items-center justify-center p-4"
+        style={{ zIndex: 9005 }}
+      >
         <Dialog.Content className="w-full max-w-md overflow-hidden rounded-lg bg-white shadow-xl">
           <div className="p-6 text-center">
             <Dialog.Title className="text-xl font-bold text-gray-900">
@@ -447,6 +453,8 @@ export default function SaveModal({
             `Processing ${dirtyPanes.length} panes via -> POST ${endpoint}`
           );
 
+          //console.log(`bulkPayload`, bulkPayload)
+
           try {
             const response = await fetch(endpoint, {
               method: 'POST',

package/templates/src/components/edit/state/SaveToLibraryModal.tsx

@@ -101,7 +101,7 @@ export function SaveToLibraryModal({
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between">
-          <h2 className="text-lg font-medium text-gray-900">
+          <h2 className="text-lg font-bold text-gray-900">
             Save Pane to Library
           </h2>
         </div>
@@ -112,7 +112,7 @@ export function SaveToLibraryModal({
           <div>
             <label
               htmlFor="category-select"
-              className="block text-sm font-medium text-gray-700"
+              className="block text-sm font-bold text-gray-700"
             >
               Category
             </label>
@@ -139,7 +139,7 @@ export function SaveToLibraryModal({
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700">
+            <label className="block text-sm font-bold text-gray-700">
               Content Mode
             </label>
             <fieldset className="mt-2">
@@ -158,7 +158,7 @@ export function SaveToLibraryModal({
                     />
                     <label
                       htmlFor={option.id}
-                      className="ml-3 block text-sm font-medium text-gray-700"
+                      className="ml-3 block text-sm font-bold text-gray-700"
                     >
                       {option.title}
                       <p className="text-xs text-gray-500">
@@ -178,7 +178,7 @@ export function SaveToLibraryModal({
           <button
             type="button"
             disabled={saveState !== 'idle'}
-            className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-50"
+            className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-50"
             onClick={onClose}
           >
             Cancel
@@ -186,7 +186,7 @@ export function SaveToLibraryModal({
           <button
             type="button"
             disabled={saveState !== 'idle'}
-            className="flex min-w-36 items-center justify-center rounded-md border border-transparent bg-cyan-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-cyan-700 disabled:cursor-not-allowed disabled:opacity-50"
+            className="flex min-w-36 items-center justify-center rounded-md border border-transparent bg-cyan-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-700 disabled:cursor-not-allowed disabled:opacity-50"
             onClick={handleSave}
           >
             {saveState === 'idle' && 'Save to Library'}

package/templates/src/components/fields/PaneBreakShapeSelector.tsx

@@ -48,7 +48,7 @@ export default function PaneBreakShapeSelector({
 
     const svgData = SvgBreaks[fullShapeName];
     return (
-      <div className="flex w-[150px] items-center justify-center">
+      <div className="flex w-56 items-center justify-center">
         <svg
           viewBox={`0 0 ${svgData.viewBox[0]} ${svgData.viewBox[1]}`}
           className="h-auto w-full"

package/templates/src/components/widgets/ImpressionWrapper.tsx

@@ -141,7 +141,10 @@ const ImpressionWrapper = ({
     const currentImpression = visibleImpressions[currentImpressionIndex];
 
     return (
-      <div className="impression-overlay fixed bottom-4 right-4 z-50 w-96 max-w-[calc(100vw-2rem)]">
+      <div
+        className="impression-overlay fixed bottom-4 right-4 z-50 w-96"
+        style={{ maxWidth: 'calc(100vw - 2rem)' }}
+      >
         <div className="relative rounded-lg border border-gray-200 bg-white shadow-lg">
           {/* Close button */}
           <button

package/templates/src/constants/prompts.json

@@ -41,12 +41,33 @@
   },
   "aiPaneShellPrompt": {
     "system": "You are an expert web designer. Your task is to generate the structural design for a component as a single JSON object. Respond *only* with the JSON.",
-    "user_template": "Generate the design JSON for a component with the following characteristics:\n\nDesign Style: \"{{DESIGN_INPUT}}\"\nLayout Type: \"{{LAYOUT_TYPE}}\"\n\nCRITICAL RULES:\n1. You must respond with a JSON object with keys: `bgColour`, `parentClasses`, `defaultClasses`.\n2. The `parentClasses` value *must* be structured with our internal responsive object schema (e.g., `[ { \"mobile\": { \"px\": \"4\", \"py\": \"12\" } } ]`).\n3. The `defaultClasses` value *must* be structured with responsive keys (`mobile`, `tablet`, `desktop`) containing Tailwind class strings.\n4. Ensure the selected `bgColour` provides **high contrast** (meeting at least WCAG AA standards - 4.5:1 for normal text, 3:1 for large text) with the primary text colors defined in `defaultClasses`.\n\nEXAMPLE:\n{\n  \"bgColour\": \"#050710\",\n  \"parentClasses\": [\n    { \"mobile\": { \"px\": \"6\", \"py\": \"24\" }, \"tablet\": { \"px\": \"8\", \"py\": \"32\" } },\n    { \"mobile\": { \"mx\": \"auto\", \"maxW\": \"2xl\", \"textALIGN\": \"center\" }, \"tablet\": { \"maxW\": \"4xl\" } }\n  ],\n  \"defaultClasses\": {\n    \"h2\": { \"mobile\": \"text-4xl font-bold tracking-tight text-white mt-4\", \"tablet\": \"text-6xl\", \"desktop\": \"text-7xl\" },\n    \"p\": { \"mobile\": \"text-lg leading-8 text-gray-300 mt-6\", \"tablet\": \"text-xl\", \"desktop\": \"\" }\n  }\n}"
+    "user_template": "Generate the design JSON for a component with the following characteristics:\n\nDesign Style: \"{{DESIGN_INPUT}}\"\nLayout Type: \"{{LAYOUT_TYPE}}\"\n\nCRITICAL RULES:\n1. You must respond with a JSON object with keys: `bgColour`, `parentClasses`, `defaultClasses`.\n2. The `parentClasses` value *must* be an array of objects. Each object must have `mobile`, `tablet`, or `desktop` keys, and their values *must* be a single string of space-separated Tailwind CSS classes.\n3. The `defaultClasses` value *must* be structured with responsive keys (`mobile`, `tablet`, `desktop`) containing Tailwind class strings.\n4. Ensure the selected `bgColour` provides **high contrast** (meeting at least WCAG AA standards - 4.5:1 for normal text, 3:1 for large text) with the primary text colors defined in `defaultClasses`.\n\nEXAMPLE:\n{\n  \"bgColour\": \"#050710\",\n  \"parentClasses\": [\n    { \"mobile\": \"mx-auto max-w-2xl text-center\", \"tablet\": \"max-w-4xl\" },\n    { \"mobile\": \"px-6 py-24\", \"tablet\": \"px-8 py-32\" }\n  ],\n  \"defaultClasses\": {\n    \"h2\": { \"mobile\": \"text-4xl font-bold tracking-tight text-white mt-4\", \"tablet\": \"text-6xl\", \"desktop\": \"text-7xl\" },\n    \"p\": { \"mobile\": \"text-lg leading-8 text-gray-300 mt-6\", \"tablet\": \"text-xl\", \"desktop\": \"\" }\n  }\n}"
   },
   "aiPaneCopyPrompt": {
     "system": "You are an expert **web designer and copywriter**. Your task is to generate a single, visually compelling block of HTML content. You must ensure the content is well-written, engaging, **beautifully spaced**, and **highly readable**.",
-    "user_template": "Here is the design 'shell' and 'theme' (bgColour, parentClasses, and defaultClasses) you must write your HTML for. Your HTML will be placed *inside* this shell. Use the `defaultClasses` as your base theme for styling:\n{{SHELL_JSON}}\n\nNow, generate the HTML content based on these inputs:\n\nContent Prompt: \"{{COPY_INPUT}}\"\nDesign Style: **strictly for visual reference** when choosing element styles **DO NOT** include any words or concepts from the `Design Style` input in the written copy text itself.\"{{DESIGN_INPUT}}\"\nLayout Type: \"{{LAYOUT_TYPE}}\"\n\nCRITICAL RULES:\n1. You are responsible for the **inner layout and visual rhythm**. You MUST add appropriate vertical margins (e.g., `mt-4`, `mt-6`, `mt-8`) directly to any HTML block elements that *deviate* from the default spacing. **Elements must not touch.**\n2. You **MUST NOT** use `<h1>` tags. You must use `<h2>`, `<h3>`, and `<p>` tags for all text content.\n3. For responsive styles, you *must* only use `md:` and `xl:` prefixes.\n4. To make headlines pop, you MUST wrap key words in `<span>` tags with creative classes (e.g., gradient text, different colors).\n5. **All text**, even short links or phrases (like 'Learn more →'), **must** be wrapped in a block element like `<p>` or `<button>`.\n6. You MUST include at least one `<button>` tag for the primary call-to-action.\n7. Verify that **all text elements**, including text within `<span>` tags, `<button>` elements, and any elements using override classes, maintain **high contrast** (meeting at least WCAG AA standards - 4.5:1 for normal text, 3:1 for large text) against the `bgColour` provided in the `SHELL_JSON`. **Prioritize readability above all else**.\n8. Respond *only* with the raw HTML.\n\nEXAMPLE of a good, well-spaced response:\n<h2 class=\"text-4xl font-bold tracking-tight text-white md:text-6xl\"><span class=\"bg-gradient-to-r from-purple-500 to-indigo-400 bg-clip-text text-transparent\">Own the Art.</span> Possess the Reality.</h2>\n<p class=\"mt-6 text-lg leading-8 text-gray-300 md:text-xl\">Every Sneaky Productions NFT is your key. This is where digital rarity meets tangible legacy.</p>\n<button class=\"mt-8 rounded-md bg-indigo-600 px-5 py-3 text-base font-semibold text-white shadow-sm hover:bg-indigo-500\">Secure Your Drop</button>\n<p class=\"mt-4 text-sm text-gray-400\">Learn more <span>→</span></p>",
+    "user_template": "Here is the design 'shell' and 'theme' (bgColour, parentClasses, and defaultClasses) you must write your HTML for. Your HTML will be placed *inside* this shell. Use the `defaultClasses` as your base theme for styling:\n{{SHELL_JSON}}\n\nNow, generate the HTML content based on these inputs:\n\nContent Prompt: \"{{COPY_INPUT}}\"\nDesign Style: **strictly for visual reference** when choosing element styles **DO NOT** include any words or concepts from the `Design Style` input in the written copy text itself.\"{{DESIGN_INPUT}}\"\nLayout Type: \"{{LAYOUT_TYPE}}\"\n\nCRITICAL RULES:\n1. You are responsible for the **inner layout and visual rhythm**. You MUST add appropriate vertical margins (e.g., `mt-4`, `mt-6`, `mt-8`) directly to any HTML block elements that *deviate* from the default spacing. **Elements must not touch.**\n2. You **MUST NOT** use `<h1>` tags. You must use `<h2>`, `<h3>`, and `<p>` tags for all text content.\n3. For responsive styles, you *must* only use `md:` and `xl:` prefixes.\n4. To make headlines pop, you MUST wrap key words in `<span>` tags with creative classes (e.g., gradient text, different colors).\n5. **All text**, even short links or phrases (like 'Learn more →'), **must** be wrapped in a block element like `<p>` or `<button>`.\n6. You MUST include at least one `<button>` tag for the primary call-to-action.\n7. Verify that **all text elements**, including text within `<span>` tags, `<button>` elements, and any elements using override classes, maintain **high contrast** (meeting at least WCAG AA standards - 4.5:1 for normal text, 3:1 for large text) against the `bgColour` provided in the `SHELL_JSON`. **Prioritize readability above all else**.\n8. Respond *only* with the raw HTML.\n\nEXAMPLE of a good, well-spaced response:\n<h2 class=\"text-4xl font-bold tracking-tight text-white md:text-6xl\"><span class=\"bg-gradient-to-r from-purple-500 to-indigo-400 bg-clip-text text-transparent\">Own the Art.</span> Possess the Reality.</h2>\n<p class=\"mt-6 text-lg leading-8 text-gray-300 md:text-xl\">Every Sneaky Productions NFT is your key. This is where digital rarity meets tangible legacy.</p>\n<button class=\"mt-8 rounded-md bg-indigo-600 px-5 py-3 text-base font-bold text-white shadow-sm hover:bg-indigo-500\">Secure Your Drop</button>\n<p class=\"mt-4 text-sm text-gray-400\">Learn more <span>→</span></p>",
     "heroDefault": "A compelling hero section for a website about [topic]. It should have a strong, attention-grabbing headline, a brief paragraph explaining the core value proposition, and a clear call-to-action.",
     "contentDefault": "A content section that follows a hero. It should elaborate on a key feature or benefit related to [topic]. Include a sub-headline and a descriptive paragraph."
+  },
+  "aiPaneShellPrompt_2cols": {
+    "system": "You are an expert web designer. Your task is to generate the structural design for a component as a single JSON object. Respond *only* with the JSON.",
+    "user_template": "Generate the design JSON for the following component. The component is a 2-column grid layout where the columns stack vertically on mobile. Your task is to design the outer container shell (`parentClasses`), the shared typography theme (`defaultClasses`), and the specific styles for the individual columns (`columns`).\n\nComponent Brief: \"{{COPY_INPUT}}\"\n\nDesign Style: \"{{DESIGN_INPUT}}\"\n\nCRITICAL RULES:\n1. You must respond with a JSON object with the top-level keys: `bgColour`, `parentClasses`, `defaultClasses`, and `columns`.\n2. The `parentClasses` value is for the OUTER container's spacing and width ONLY (e.g. `max-w-7xl`, `py-24`). It is **FORBIDDEN** to include `grid`, `grid-cols-*`, or `gap-*` properties in `parentClasses`. The application will handle the grid creation. Any response violating this rule will be rejected. The `parentClasses` value *must* be an ARRAY of objects.\n3. The `defaultClasses` value defines the theme and *must* be structured with responsive keys (`mobile`, `tablet`, `desktop`) containing Tailwind class strings.\n4. The `columns` key *must* be an array containing exactly **two** objects. Each object represents an individual column and must have a `gridClasses` key. The value for `gridClasses` is a responsive object where each key's value is a string of Tailwind classes. This is used to style the column's wrapper. Crucially, you must remember that Tailwind is mobile-first, so you must reset styles at larger breakpoints if needed. For example, to add spacing for the mobile stack that is removed on larger screens, you would use `{ \"mobile\": \"mt-12\", \"tablet\": \"mt-0\" }`.\n5. Ensure the selected `bgColour` provides **high contrast** (meeting at least WCAG AA standards) with the primary text colors defined in `defaultClasses`. Prioritize readability.\n\nEXAMPLE:\n{\n  \"bgColour\": \"#0d1117\",\n  \"parentClasses\": [\n    { \n      \"mobile\": \"mx-auto max-w-7xl\"\n    },\n    {\n      \"mobile\": \"px-6 py-24\",\n      \"tablet\": \"px-8 py-32\"\n    }\n  ],\n  \"defaultClasses\": {\n    \"h2\": {\n      \"mobile\": \"text-4xl font-bold tracking-tight text-white\",\n      \"tablet\": \"text-6xl\"\n    },\n    \"p\": {\n      \"mobile\": \"text-lg leading-8 text-gray-300 mt-6\"\n    }\n  },\n  \"columns\": [\n    {\n      \"gridClasses\": {\n        \"mobile\": \"text-center\",\n        \"tablet\": \"text-left\"\n      }\n    },\n    {\n      \"gridClasses\": {\n        \"mobile\": \"flex flex-col items-center mt-12\",\n        \"tablet\": \"items-start mt-0\"\n      }\n    }\n  ]\n}"
+  },
+  "aiPaneCopyPrompt_2cols": {
+    "system": "You are an expert **web designer and copywriter**. Your task is to generate a single, visually compelling block of HTML content. You must ensure the content is well-written, engaging, **beautifully spaced**, and **highly readable**.",
+    "user_template": "Here is the design 'shell' and 'theme' (bgColour, parentClasses, and defaultClasses) you must write your HTML for. Your HTML will be placed *inside* a column defined by this shell. Use the `defaultClasses` as your base theme for styling:\n{{SHELL_JSON}}\n\nNow, generate the HTML content based on these inputs. Your primary goal is to perform the following specific task for this single column. Use the \"Overall Component Brief\" only for context about the product or topic.\n\nSPECIFIC TASK: \"{{COLUMN_PROMPT}}\"\nOverall Component Brief (for context only): \"{{COPY_INPUT}}\"\nDesign Style: **strictly for visual reference** when choosing element styles **DO NOT** include any words or concepts from the `Design Style` input in the written copy text itself.\"{{DESIGN_INPUT}}\"\nLayout Type: \"{{LAYOUT_TYPE}}\"\n\nCRITICAL RULES:\n1. You are responsible for the **inner layout and visual rhythm**. Each element should be a separate block element.\n2. You **MUST NOT** use `<h1>` tags. You must use `<h2>`, `<h3>`, and `<p>` tags for all text content.\n3. For responsive styles, you *must* only use `md:` and `xl:` prefixes.\n4. To make headlines pop, you MUST wrap key words in `<span>` tags with creative classes (e.g., gradient text, different colors).\n5. **All text, including secondary links, must** be wrapped in a block element like `<p>` or `<button>`. Even when placing CTAs side-by-side in a `div`, this rule MUST be followed.\n6. Verify that **all text elements**, including text within `<span>` tags, `<button>` elements, and any elements using override classes, maintain **high contrast** (meeting at least WCAG AA standards - 4.5:1 for normal text, 3:1 for large text) against the `bgColour` provided in the `SHELL_JSON`. **Prioritize readability above all else**.\n7. Respond *only* with the raw HTML.\n\nEXAMPLE of a good response for THIS SPECIFIC TASK:\n{{COLUMN_EXAMPLE}}",
+    "presets": {
+      "heroDefault": {
+        "default": "A compelling hero section for a website about [topic]. It should have a strong, attention-grabbing headline, a brief paragraph explaining the core value proposition, and a clear call-to-action.",
+        "left": {
+          "prompt": "Generate a slogan with very large typography. Just the slogan in this column.",
+          "example": "<h2 class=\"text-4xl font-bold tracking-tight text-slate-100 md:text-5xl xl:text-6xl\">\n<span class=\"block\">Orchestrate Complexity.</span>\n<span class=\"block bg-gradient-to-r from-sky-400 to-cyan-300 bg-clip-text text-transparent md:mt-2\">Deploy with Certainty.</span>\n</h2>"
+        },
+        "right": {
+          "prompt": "Generate a small sub-heading, a brief compelling paragraph of hook text, and two vertically stacked call-to-action buttons below it.",
+          "example": "<h3 class=\"text-xl font-bold text-white\">Join us this week</h3>\n<p class=\"mt-4 text-lg leading-8 text-gray-300\">We're all about creating a place where anyone and everyone can know God & encounter Him.</p>\n<button class=\"mt-8 rounded-md bg-white px-4 py-3 text-base font-semibold text-gray-900 shadow-sm hover:bg-gray-100 w-full\">Plan a Visit</button>\n<button class=\"mt-4 rounded-md border border-white px-4 py-3 text-base font-semibold text-white shadow-sm hover:bg-white/10 w-full\">Get Involved</button>"
+        }
+      }
+    }
   }
 }