astro-tractstack 2.0.18 → 2.0.20

package/templates/src/components/edit/widgets/InteractiveDisclosureWidget.tsx

@@ -3,7 +3,6 @@ import { TractStackAPI } from '@/utils/api';
 import { fullContentMapStore } from '@/stores/storykeep';
 import { heldBeliefsScales } from '@/constants/beliefs';
 import { biIcons } from '@/constants';
-import type { BrandConfig } from '@/types/tractstack';
 import type { FlatNode, BeliefNode } from '@/types/compositorTypes';
 import SingleParam from '@/components/fields/SingleParam';
 import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
@@ -42,7 +41,6 @@ type StoredDisclosureItem = Omit<DisclosureItem, 'id' | 'isDisabled'>;
 interface InteractiveDisclosureWidgetProps {
   node: FlatNode;
   onUpdate: (params: string[]) => void;
-  config: BrandConfig;
 }
 
 const generateId = (): string => Math.random().toString(36).substring(2, 9);
@@ -254,7 +252,6 @@ const DisclosureItemEditor = ({
 export default function InteractiveDisclosureWidget({
   node,
   onUpdate,
-  config,
 }: InteractiveDisclosureWidgetProps) {
   const [mode, setMode] = useState<'belief' | 'open'>('belief');
   const [beliefs, setBeliefs] = useState<BeliefNode[]>([]);
@@ -628,7 +625,6 @@ export default function InteractiveDisclosureWidget({
                               onColorChange={(hex) =>
                                 handleColorChange('bgColor', hex)
                               }
-                              config={config}
                               allowNull={true}
                               skipTailwind={false}
                             />
@@ -640,7 +636,6 @@ export default function InteractiveDisclosureWidget({
                               onColorChange={(hex) =>
                                 handleColorChange('textColor', hex)
                               }
-                              config={config}
                               allowNull={true}
                               skipTailwind={false}
                             />

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

@@ -8,7 +8,6 @@ import ColorPickerCombo from './ColorPickerCombo';
 import { getCtx } from '@/stores/nodes';
 import { hasArtpacksStore, settingsPanelStore } from '@/stores/storykeep';
 import { cloneDeep } from '@/utils/helpers';
-import type { BrandConfig } from '@/types/tractstack';
 import type {
   BgImageNode,
   ArtpackImageNode,
@@ -18,7 +17,6 @@ import { isArtpackImageNode } from '@/utils/compositor/typeGuards';
 
 export interface BackgroundImageWrapperProps {
   paneId: string;
-  config?: BrandConfig;
 }
 
 const CheckIcon = () => (
@@ -51,10 +49,7 @@ const ChevronDownIcon = () => (
   </svg>
 );
 
-const BackgroundImageWrapper = ({
-  paneId,
-  config,
-}: BackgroundImageWrapperProps) => {
+const BackgroundImageWrapper = ({ paneId }: BackgroundImageWrapperProps) => {
   const ctx = getCtx();
   const allNodes = useStore(ctx.allNodes);
   const $artpacks = useStore(hasArtpacksStore);
@@ -165,7 +160,6 @@ const BackgroundImageWrapper = ({
         title="Pane Background Color"
         defaultColor={(allNodes.get(paneId) as PaneNode)?.bgColour || ''}
         onColorChange={handleColorChange}
-        config={config!}
         allowNull={true}
       />
       {!bgNode && (

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

@@ -12,12 +12,11 @@ import {
   findClosestTailwindColor,
   getComputedColor,
 } from '@/utils/compositor/tailwindColors';
+import { brandConfigStore } from '@/stores/storykeep';
 import { debounce, useDropdownDirection } from '@/utils/helpers';
-import type { BrandConfig } from '@/types/tractstack';
 
 export interface ColorPickerProps {
   title: string;
-  config: BrandConfig;
   defaultColor: string;
   onColorChange: (color: string) => void;
   skipTailwind?: boolean;
@@ -28,14 +27,14 @@ const ColorPickerCombo = ({
   title,
   defaultColor,
   onColorChange,
-  config,
   skipTailwind = false,
   allowNull = false,
 }: ColorPickerProps) => {
+  const brandColors = brandConfigStore.get()?.BRAND_COLOURS || '';
   const [hexColor, setHexColor] = useState(defaultColor);
   const initialTailwindColor = skipTailwind
     ? ''
-    : hexToTailwind(defaultColor, config.BRAND_COLOURS) || '';
+    : hexToTailwind(defaultColor, brandColors) || '';
   const [selectedTailwindColor, setSelectedTailwindColor] =
     useState(initialTailwindColor);
   const [query, setQuery] = useState('');
@@ -79,10 +78,7 @@ const ColorPickerCombo = ({
       setHexColor(computedColor);
 
       if (!skipTailwind) {
-        const exactTailwindColor = hexToTailwind(
-          computedColor,
-          config.BRAND_COLOURS
-        );
+        const exactTailwindColor = hexToTailwind(computedColor, brandColors);
         if (exactTailwindColor) {
           setSelectedTailwindColor(exactTailwindColor);
           setQuery('');
@@ -101,7 +97,7 @@ const ColorPickerCombo = ({
 
       onColorChange(computedColor);
     }, 16),
-    [onColorChange, skipTailwind, config.BRAND_COLOURS]
+    [onColorChange, skipTailwind, brandColors]
   );
 
   // Handle Tailwind color selection
@@ -114,12 +110,12 @@ const ColorPickerCombo = ({
       setQuery(''); // Clear query after selection
 
       const newHexColor = getComputedColor(
-        tailwindToHex(`bg-${newTailwindColor}`, config.BRAND_COLOURS || null)
+        tailwindToHex(`bg-${newTailwindColor}`, brandColors || null)
       );
       setHexColor(newHexColor);
       onColorChange(newHexColor);
     },
-    [onColorChange, config, skipTailwind]
+    [onColorChange, brandColors, skipTailwind]
   );
 
   // New function to handle color removal
@@ -259,7 +255,7 @@ const ColorPickerCombo = ({
                               style={{
                                 backgroundColor: tailwindToHex(
                                   `bg-${color}`,
-                                  config.BRAND_COLOURS || null
+                                  brandColors
                                 ),
                               }}
                             />

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

@@ -13,9 +13,8 @@ import DevicePhoneMobileIcon from '@heroicons/react/24/outline/DevicePhoneMobile
 import DeviceTabletIcon from '@heroicons/react/24/outline/DeviceTabletIcon';
 import ComputerDesktopIcon from '@heroicons/react/24/outline/ComputerDesktopIcon';
 import { classNames } from '@/utils/helpers';
-import { settingsPanelStore } from '@/stores/storykeep';
+import { brandConfigStore, settingsPanelStore } from '@/stores/storykeep';
 import { tailwindToHex, colorValues } from '@/utils/compositor/tailwindColors';
-import type { BrandConfig } from '@/types/tractstack';
 
 interface ViewportComboBoxProps {
   value: string;
@@ -29,7 +28,6 @@ interface ViewportComboBoxProps {
   allowNegative?: boolean;
   isNegative?: boolean;
   isInferred?: boolean;
-  config: BrandConfig;
 }
 
 const ViewportComboBox = ({
@@ -40,8 +38,8 @@ const ViewportComboBox = ({
   allowNegative = false,
   isNegative = false,
   isInferred = false,
-  config,
 }: ViewportComboBoxProps) => {
+  const brandColors = brandConfigStore.get()?.BRAND_COLOURS || '';
   const [internalValue, setInternalValue] = useState(value);
   const [query, setQuery] = useState('');
   const [isNowNegative, setIsNowNegative] = useState(isNegative);
@@ -174,7 +172,7 @@ const ViewportComboBox = ({
                       style={{
                         backgroundColor: tailwindToHex(
                           internalValue,
-                          config.BRAND_COLOURS || null
+                          brandColors
                         ),
                       }}
                     />
@@ -218,7 +216,7 @@ const ViewportComboBox = ({
                                 style={{
                                   backgroundColor: tailwindToHex(
                                     item,
-                                    config.BRAND_COLOURS || null
+                                    brandColors
                                   ),
                                 }}
                               />

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-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>"
+        }
+      }
+    }
   }
 }