astro-tractstack 2.0.17 → 2.0.18

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

@@ -45,7 +45,7 @@
   },
   "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."
   }