astro-tractstack 2.1.3 → 2.2.1

package/templates/src/components/storykeep/controls/content/PaneTable.tsx

@@ -0,0 +1,358 @@
+import { useState, useMemo, useEffect } from 'react';
+import { useStore } from '@nanostores/react';
+import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
+import LockClosedIcon from '@heroicons/react/24/outline/LockClosedIcon';
+import CheckCircleIcon from '@heroicons/react/24/outline/CheckCircleIcon';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+import { Toggle } from '@ark-ui/react/toggle';
+import { orphanAnalysisStore } from '@/stores/orphanAnalysis';
+import {
+  PaneSnapshotGenerator,
+  type SnapshotData,
+} from '@/components/compositor/preview/PaneSnapshotGenerator';
+import { usePaneFragments } from '@/hooks/usePaneFragments';
+import { TractStackAPI } from '@/utils/api';
+import type { FullContentMapItem } from '@/types/tractstack';
+
+interface PaneTableProps {
+  fullContentMap: FullContentMapItem[];
+  onRefresh: () => void;
+}
+
+interface PanePreviewItem {
+  pane: FullContentMapItem;
+  snapshot?: SnapshotData;
+}
+
+const ITEMS_PER_PAGE = 6;
+
+const DeletingModal = ({ count }: { count: number }) => (
+  <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+    <div className="flex flex-col items-center gap-4 rounded-lg bg-white p-8 shadow-xl">
+      <div className="h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-red-600" />
+      <div className="text-center">
+        <h3 className="text-lg font-bold text-gray-900">Deleting Content</h3>
+        <p className="text-gray-500">Removing {count} pane(s)...</p>
+      </div>
+    </div>
+  </div>
+);
+
+const PaneTable = ({ fullContentMap, onRefresh }: PaneTableProps) => {
+  const orphanState = useStore(orphanAnalysisStore);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [currentPage, setCurrentPage] = useState(0);
+  const [previews, setPreviews] = useState<PanePreviewItem[]>([]);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showOnlyUnused, setShowOnlyUnused] = useState(false);
+
+  const tenantId =
+    window.TRACTSTACK_CONFIG?.tenantId ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
+
+  const isOrphan = (id: string) => {
+    if (!orphanState.data?.panes) return false;
+    const deps = orphanState.data.panes[id];
+    return deps && deps.length === 0;
+  };
+
+  const allPanes = useMemo(
+    () => fullContentMap.filter((item) => item.type === 'Pane'),
+    [fullContentMap]
+  );
+
+  const filteredPanes = useMemo(() => {
+    if (!showOnlyUnused) return allPanes;
+    return allPanes.filter((p) => isOrphan(p.id));
+  }, [allPanes, showOnlyUnused, orphanState.data]);
+
+  useEffect(() => {
+    setPreviews(filteredPanes.map((pane) => ({ pane })));
+    setCurrentPage(0);
+    setSelectedIds(new Set());
+  }, [filteredPanes]);
+
+  const totalPages = Math.ceil(previews.length / ITEMS_PER_PAGE);
+
+  const handlePageChange = (newPage: number) => {
+    if (newPage >= 0 && newPage < totalPages) {
+      setCurrentPage(newPage);
+    }
+  };
+
+  const visiblePreviews = useMemo(() => {
+    const startIndex = currentPage * ITEMS_PER_PAGE;
+    return previews.slice(startIndex, startIndex + ITEMS_PER_PAGE);
+  }, [previews, currentPage]);
+
+  const visiblePaneIds = useMemo(
+    () => visiblePreviews.map((p) => p.pane.id),
+    [visiblePreviews]
+  );
+
+  const {
+    fragments,
+    errors,
+    isLoading: fragmentsLoading,
+  } = usePaneFragments(visiblePaneIds);
+
+  const handleSnapshotComplete = (id: string, snapshot: SnapshotData) => {
+    const paneId = id.replace('table-', '');
+    setPreviews((prev) =>
+      prev.map((item) =>
+        item.pane.id === paneId ? { ...item, snapshot } : item
+      )
+    );
+  };
+
+  const toggleSelection = (id: string) => {
+    const newSet = new Set(selectedIds);
+    if (newSet.has(id)) {
+      newSet.delete(id);
+    } else {
+      newSet.add(id);
+    }
+    setSelectedIds(newSet);
+  };
+
+  const unusedCount = useMemo(() => {
+    return allPanes.filter((p) => isOrphan(p.id)).length;
+  }, [allPanes, orphanState.data]);
+
+  const handleSelectAllUnused = () => {
+    const newSet = new Set(selectedIds);
+    allPanes.forEach((p) => {
+      if (isOrphan(p.id)) {
+        newSet.add(p.id);
+      }
+    });
+    setSelectedIds(newSet);
+  };
+
+  const handleClearSelection = () => {
+    setSelectedIds(new Set());
+  };
+
+  const handleDelete = async () => {
+    if (selectedIds.size === 0) return;
+    if (
+      !confirm(
+        `Are you sure you want to delete ${selectedIds.size} pane(s)? This action cannot be undone.`
+      )
+    )
+      return;
+
+    setIsDeleting(true);
+    try {
+      const api = new TractStackAPI(tenantId);
+      const response = await api.request('/api/v1/nodes/panes/bulk', {
+        method: 'DELETE',
+        body: JSON.stringify({ paneIds: Array.from(selectedIds) }),
+      });
+
+      if (response.success) {
+        setSelectedIds(new Set());
+        onRefresh();
+      } else {
+        alert(`Failed to delete panes: ${response.error}`);
+      }
+    } catch (error) {
+      console.error('Delete failed:', error);
+      alert('An error occurred while deleting panes.');
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {isDeleting && <DeletingModal count={selectedIds.size} />}
+
+      <div className="flex flex-wrap items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 p-4">
+        <div className="flex items-center gap-6">
+          <div className="flex items-center gap-4">
+            <div className="text-sm text-gray-700">
+              {selectedIds.size} of {filteredPanes.length} Selected
+            </div>
+            {selectedIds.size > 0 && (
+              <button
+                onClick={handleClearSelection}
+                className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700"
+              >
+                <XMarkIcon className="h-3 w-3" />
+                Clear
+              </button>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2 border-l border-gray-300 pl-6">
+            <span className="text-xs font-bold uppercase tracking-wider text-gray-500">
+              Filter:
+            </span>
+            <Toggle.Root
+              pressed={showOnlyUnused}
+              onPressedChange={setShowOnlyUnused}
+              className={`flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-bold shadow-sm transition-all ${
+                showOnlyUnused
+                  ? 'border-cyan-600 bg-cyan-600 text-white'
+                  : 'border-gray-300 bg-white text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              Show Unused Only ({unusedCount})
+            </Toggle.Root>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <button
+            onClick={handleSelectAllUnused}
+            className="flex items-center gap-1.5 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs text-gray-700 shadow-sm hover:bg-gray-50"
+            title={`Select all ${unusedCount} unused panes`}
+          >
+            <CheckCircleIcon className="h-4 w-4 text-green-600" />
+            Select All Unused
+          </button>
+
+          {selectedIds.size > 0 && (
+            <button
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="flex items-center gap-2 rounded-md bg-red-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-red-700 disabled:opacity-50"
+            >
+              <TrashIcon className="h-4 w-4" />
+              Delete ({selectedIds.size})
+            </button>
+          )}
+        </div>
+      </div>
+
+      {previews.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-200 bg-white py-12">
+          <p className="text-gray-500">
+            No panes found matching the current filter.
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-wrap items-start justify-start gap-4 p-2">
+          {visiblePreviews.map((item) => {
+            const orphan = isOrphan(item.pane.id);
+            const isSelected = selectedIds.has(item.pane.id);
+
+            return (
+              <div
+                key={item.pane.id}
+                className={`relative flex min-w-72 flex-1 basis-1/4 flex-col rounded-lg border-2 bg-white shadow-sm transition-all ${
+                  isSelected
+                    ? 'border-cyan-600 ring-2 ring-cyan-100'
+                    : 'border-transparent hover:border-gray-300'
+                }`}
+              >
+                <div className="absolute right-2 top-2 z-10">
+                  {orphan ? (
+                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-white shadow-md transition-transform hover:scale-110">
+                      <input
+                        type="checkbox"
+                        checked={isSelected}
+                        onChange={() => toggleSelection(item.pane.id)}
+                        className="h-4 w-4 cursor-pointer rounded border-gray-300 text-cyan-600 focus:ring-cyan-500"
+                      />
+                    </div>
+                  ) : (
+                    <div
+                      className="flex h-7 w-7 items-center justify-center rounded-full bg-gray-100 shadow-md"
+                      title="This pane is in use and cannot be deleted"
+                    >
+                      <LockClosedIcon className="h-3.5 w-3.5 text-gray-400" />
+                    </div>
+                  )}
+                </div>
+
+                <div className="relative w-full overflow-hidden rounded-t-lg bg-gray-50">
+                  {fragmentsLoading && !fragments[item.pane.id] && (
+                    <div className="flex h-24 items-center justify-center text-gray-400">
+                      <span className="text-xs">Loading...</span>
+                    </div>
+                  )}
+
+                  {errors[item.pane.id] && (
+                    <div className="flex h-24 items-center justify-center text-red-400">
+                      <span className="text-xs">Preview Error</span>
+                    </div>
+                  )}
+
+                  {fragments[item.pane.id] &&
+                    !item.snapshot &&
+                    !errors[item.pane.id] && (
+                      <div className="max-h-32 overflow-hidden">
+                        <PaneSnapshotGenerator
+                          id={`table-${item.pane.id}`}
+                          htmlString={fragments[item.pane.id]}
+                          onComplete={handleSnapshotComplete}
+                          outputWidth={400}
+                        />
+                      </div>
+                    )}
+
+                  {item.snapshot && (
+                    <img
+                      src={item.snapshot.imageData}
+                      alt={item.pane.title}
+                      className="max-h-32 w-full object-cover object-top"
+                    />
+                  )}
+                </div>
+
+                <div className="bg-gray-50 p-2">
+                  <h4
+                    className="truncate text-xs font-bold text-gray-900"
+                    title={item.pane.title}
+                  >
+                    {item.pane.title}
+                  </h4>
+                  <div className="mt-0.5 flex items-center justify-between">
+                    <span
+                      className="truncate font-mono text-base text-gray-500"
+                      title={item.pane.slug}
+                    >
+                      /{item.pane.slug}
+                    </span>
+                    {!orphan && (
+                      <span className="rounded-full bg-green-100 px-1.5 py-0.5 text-base text-green-800">
+                        In Use
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {totalPages > 1 && (
+        <div className="flex justify-center gap-2 pt-4">
+          <button
+            onClick={() => handlePageChange(currentPage - 1)}
+            disabled={currentPage === 0}
+            className="rounded border border-gray-300 bg-white px-3 py-1 text-sm disabled:opacity-50"
+          >
+            Previous
+          </button>
+          <span className="flex items-center text-sm text-gray-600">
+            Page {currentPage + 1} of {totalPages}
+          </span>
+          <button
+            onClick={() => handlePageChange(currentPage + 1)}
+            disabled={currentPage === totalPages - 1}
+            className="rounded border border-gray-300 bg-white px-3 py-1 text-sm disabled:opacity-50"
+          >
+            Next
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PaneTable;

package/templates/src/components/storykeep/controls/content/ResourceTable.tsx

@@ -162,7 +162,7 @@ export default function ResourceTable({
                   <td className="px-6 py-4 text-sm text-gray-500">
                     {(resource as any).oneliner || '-'}
                   </td>
-                  <td className="sm:pr-6 relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-bold">
+                  <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-bold md:pr-6">
                     <div className="flex items-center justify-end space-x-2">
                       {/* Edit button */}
                       <button

package/templates/src/constants/prompts.json

@@ -63,7 +63,7 @@
   ],
   "aiPaneStyleOnlyPrompt": {
     "system": "You are an expert **frontend developer**. Your task is to convert **raw Markdown** text into semantic HTML with Tailwind CSS classes based on a provided design theme. **CRITICAL: DO NOT REWRITE, SUMMARIZE, OR CHANGE THE TEXT CONTENT.** Your job is purely structural translation (Markdown -> HTML) and aesthetic formatting.",
-    "user_template": "Here is the design 'shell' and 'theme' (bgColour, parentClasses, and defaultClasses) you must use. Use the `defaultClasses` as your base theme for styling:\n{{SHELL_JSON}}\n\nHere is the **RAW MARKDOWN** content you must style:\n\"{{COPY_INPUT}}\"\n\nCRITICAL RULES:\n1. **Parse the Markdown:** Convert headings (`##`, `###`) to tags (`<h2>`, `<h3>`), lists (`-`, `1.`) to (`<ul>`, `<ol>`), and formatting (`**`, `*`) to (`<strong>`, `<em>`). **DO NOT use `<h1>` tags.**\n2. **Apply Theme:** Add the Tailwind classes from the Shell's `defaultClasses` to the corresponding HTML tags.\n3. **Visual Rhythm:** 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 to ensure they do not touch.\n4. **Responsive Styles:** For responsive styles, you *must* only use `md:` and `xl:` prefixes.\n5. **Interactive Elements:** If the markdown contains a link `[text](url)` or a clear Call-to-Action phrase, style it as a `<button>` or styled `<a>` tag using the theme's button styles (if available) or high-contrast styling.\n6. **Block Wrapping:** **All text** must be wrapped in a block element like `<p>`, `<h2>`, `<h3>`, or `<li>`.\n7. **Contrast:** Verify that **all text elements** maintain **high contrast** against the `bgColour` provided in the `SHELL_JSON`. Prioritize readability.\n8. **OUTPUT ONLY THE RAW HTML.**"
+    "user_template": "Here is the design 'shell' and 'theme' (bgColour, parentClasses, and defaultClasses) you must use. Use the `defaultClasses` as your base theme for styling:\n{{SHELL_JSON}}\n\nHere is the **RAW MARKDOWN** content you must style:\n\"{{COPY_INPUT}}\"\n\nCRITICAL RULES:\n1. **Parse the Markdown:** Convert headings (`##`, `###`) to tags (`<h2>`, `<h3>`), lists (`-`, `1.`) to (`<ul>`, `<ol>`), and formatting (`**`, `*`) to (`<strong>`, `<em>`). **DO NOT use `<h1>` tags.**\n2. **Apply Theme:** Add the Tailwind classes from the Shell's `defaultClasses` to the corresponding HTML tags.\n3. **Visual Rhythm:** 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 to ensure they do not touch.\n4. **Responsive Styles:** For responsive styles, you *must* only use `md:` and `xl:` prefixes. DO NOT USE sm: or lg: modifiers. \n5. **Interactive Elements:** If the markdown contains a link `[text](url)` or a clear Call-to-Action phrase, style it as a `<button>` or styled `<a>` tag using the theme's button styles (if available) or high-contrast styling.\n6. **Block Wrapping:** **All text** must be wrapped in a block element like `<p>`, `<h2>`, `<h3>`, or `<li>`.\n7. **Contrast:** Verify that **all text elements** maintain **high contrast** against the `bgColour` provided in the `SHELL_JSON`. Prioritize readability.\n8. **OUTPUT ONLY THE RAW HTML.**"
   },
   "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.",
@@ -71,12 +71,12 @@
   },
   "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.",
-    "articleIntro": "A powerful introductory paragraph (Lede) for an article about [topic]. Use large, legible typography (e.g. text-xl or text-2xl) to hook the reader immediately.",
-    "articleBody": "A semantic article body section about [topic]. Use H3 subheadings, prose-style paragraphs, and unordered lists to structure the content for high readability.",
-    "sectionHeader": "A distinct section header (sub-hero) for [topic]. Use a high-contrast background, a prominent H2 title, and a short descriptive lead paragraph to act as a visual divider."
+    "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. DO NOT USE sm: or lg: modifiers. \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.",
+    "articleIntro": "A powerful introductory paragraph (Lede) for an article about {{TOPIC}}. Use large, legible typography (e.g. text-xl or text-2xl) to hook the reader immediately.",
+    "articleBody": "A semantic article body section about {{TOPIC}}. Use H3 subheadings, prose-style paragraphs, and unordered lists to structure the content for high readability.",
+    "sectionHeader": "A distinct section header (sub-hero) for {{TOPIC}}. Use a high-contrast background, a prominent H2 title, and a short descriptive lead paragraph to act as a visual divider."
   },
   "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.",
@@ -84,19 +84,27 @@
   },
   "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}}",
+    "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. DO NOT USE sm: or lg: modifiers. \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.",
+        "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>"
+          "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-bold 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-bold text-white shadow-sm hover:bg-white/10 w-full\">Get Involved</button>"
         }
       }
     }
+  },
+  "aiPaneCreativePrompt": {
+    "system": "You are an expert **Web Designer and Copywriter**. You specialize in building beautiful, high-converting page sections using Tailwind CSS. You combine striking visual layouts with engaging, persuasive copy. Your code is clean, semantic, and accessible.",
+    "user_template": "Design and code a **full-width, responsive page section** based on the brief below.\n\n**CONTENT BRIEF:** \"{{TOPIC}}\"\n**DESIGN DIRECTION:** \"{{DESIGN_NOTES}}\"\n\n**ARCHITECTURAL STANDARDS:**\n1. **Full-Width Root:** The outermost element MUST be a semantic tag (`<section>` or `<div>`) with the class `w-full` (and optional background colors). It must NOT have a max-width.\n2. **Inner Container:** All text and content MUST be wrapped in an inner container (e.g., `mx-auto max-w-7xl px-6 xl:px-8`) to ensuring readability on large screens while the background spans the full width.\n3. **Responsive Flow:** Design mobile-first. Use `md:` (tablet) and `xl:` (desktop) prefixes to switch from vertical stacks to grids or side-by-side layouts. DO NOT USE sm: or lg: modifiers. \n4. **Visual Rhythm:** Use generous vertical spacing (e.g., `py-24`, `gap-12`) to create a professional, airy feel. Elements should never feel cramped.\n\n**TECHNICAL CONSTRAINTS:**\n- **Output:** Return ONLY the raw HTML string. **NO Markdown backticks** (strictly forbidden).\n- **Scope:** No `<html>`, `<body>`, or `<script>` tags. Just the section markup.\n- **Assets:** Use `src=\"/static.jpg\"` for all images. Use `href=\"#\"` for all links.\n- **Interactivity:** Use `group` and `group-hover` classes for interactive states.\n\n**GENERATE HTML:**"
+  },
+  "aiPaneCreativeRefinePrompt": {
+    "system": "You are an expert **Web Designer**. Your task is to refine an existing web component based on the user's instructions. You must interpret the provided 'Current Context' (HTML+CSS) and output the updated version using **Standard HTML + Tailwind CSS**. CRITICAL: You MUST preserve the data-ast-id attribute on any element that contains it. Do not remove or alter this attribute.",
+    "user_template": "Refine the component below.\n\n**REFINEMENT REQUEST:** \"{{DESIGN_NOTES}}\"\n\n**CURRENT CONTEXT (For Reference):**\n<style>\n{{CSS_INPUT}}\n</style>\n{{HTML_INPUT}}\n\n**OUTPUT STANDARDS:**\n1. **Format:** Generate **standard HTML** tags. Do NOT use the hashed classes (e.g. `t8k-xxx`) from the context in your output.\n2. **Styling:** Re-implement the styles (with your refinements) using **Tailwind CSS utility classes**. Use `md:` and `xl:` prefixes for responsiveness. DO NOT USE sm: or lg: modifiers. \n3. **Custom Values:** For specific colors or values not available in standard Tailwind, use **inline `style=\"...\"` attributes**.\n4. **Result:** Return **ONLY** the raw HTML string. No backticks. No `<style>` blocks."
   }
 }

package/templates/src/constants.ts

@@ -142,6 +142,7 @@ export const toolAddModes = [
   'identify',
   'toggle',
   'interactiveDisclosure',
+  'span',
   //"aside",
 ] as const;
 
@@ -161,6 +162,7 @@ export const toolAddModeTitles: Record<ToolAddMode, string> = {
   identify: 'Identity As',
   toggle: 'Toggle Belief',
   interactiveDisclosure: 'Interactive Disclosure',
+  span: 'Creative Span',
   //aside: "Aside Text",
 };
 
@@ -177,6 +179,7 @@ export const toolAddModesIcons: Record<ToolAddMode, string> = {
   toggle: '',
   belief: '',
   interactiveDisclosure: '',
+  span: '',
   //aside: "",
 };
 

package/templates/src/hooks/usePaneFragments.ts

@@ -0,0 +1,60 @@
+import { useState, useEffect, useRef } from 'react';
+import { TractStackAPI } from '@/utils/api';
+
+export const usePaneFragments = (paneIds: string[]) => {
+  const [fragments, setFragments] = useState<Record<string, string>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const loadedIds = useRef<Set<string>>(new Set());
+
+  const tenantId =
+    (typeof window !== 'undefined' && window.TRACTSTACK_CONFIG?.tenantId) ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
+
+  useEffect(() => {
+    // Identify IDs that haven't been loaded yet
+    const neededIds = paneIds.filter((id) => !loadedIds.current.has(id));
+
+    if (neededIds.length === 0) return;
+
+    let isMounted = true;
+
+    const fetchFragments = async () => {
+      setIsLoading(true);
+      try {
+        const api = new TractStackAPI(tenantId);
+        const response = await api.post('/api/v1/fragments/panes', {
+          paneIds: neededIds,
+        });
+
+        if (!isMounted) return;
+
+        if (response.success && response.data) {
+          const newFragments = response.data.fragments || {};
+          const newErrors = response.data.errors || {};
+
+          // Update cache refs
+          Object.keys(newFragments).forEach((id) => loadedIds.current.add(id));
+          Object.keys(newErrors).forEach((id) => loadedIds.current.add(id));
+
+          setFragments((prev) => ({ ...prev, ...newFragments }));
+          setErrors((prev) => ({ ...prev, ...newErrors }));
+        }
+      } catch (error) {
+        console.error('Failed to fetch fragments:', error);
+      } finally {
+        if (isMounted) setIsLoading(false);
+      }
+    };
+
+    fetchFragments();
+
+    return () => {
+      isMounted = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(paneIds), tenantId]);
+
+  return { fragments, errors, isLoading };
+};