astro-tractstack 2.0.13 → 2.0.15

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

@@ -0,0 +1,205 @@
+import { useState, useMemo, useEffect } from 'react';
+import type { BrandConfig } from '@/types/tractstack';
+import { savePaneToLibrary } from '@/utils/compositor/designLibraryHelper';
+import StringInput from '@/components/form/StringInput';
+import { CheckIcon } from '@heroicons/react/20/solid';
+
+interface SaveToLibraryModalProps {
+  paneId: string;
+  config: BrandConfig;
+  tenantId: string;
+  onClose: () => void;
+}
+
+type CopyMode = 'retain' | 'lorem' | 'blank';
+type SaveState = 'idle' | 'saving' | 'saved';
+
+const copyOptions: { id: CopyMode; title: string; description: string }[] = [
+  {
+    id: 'retain',
+    title: 'Retain Copy',
+    description: 'Save the design with all current text and content.',
+  },
+  {
+    id: 'lorem',
+    title: 'Lorem Ipsum',
+    description:
+      'Save the design structure, replacing text with placeholders and removing overrides.',
+  },
+  {
+    id: 'blank',
+    title: 'Blank',
+    description: 'Save the design structure with no content nodes.',
+  },
+];
+
+const OTHER_CATEGORY = 'other';
+
+export function SaveToLibraryModal({
+  paneId,
+  config,
+  tenantId,
+  onClose,
+}: SaveToLibraryModalProps) {
+  const [title, setTitle] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState(OTHER_CATEGORY);
+  const [customCategory, setCustomCategory] = useState('');
+  const [copyMode, setCopyMode] = useState<CopyMode>('retain');
+  const [saveState, setSaveState] = useState<SaveState>('idle');
+  const [error, setError] = useState('');
+
+  const categories = useMemo(() => {
+    const cats =
+      config.DESIGN_LIBRARY?.map((item) => item.category).filter(
+        (v, i, a) => a.indexOf(v) === i
+      ) || [];
+    return [...cats, OTHER_CATEGORY];
+  }, [config.DESIGN_LIBRARY]);
+
+  useEffect(() => {
+    if (saveState === 'saved') {
+      const timer = setTimeout(() => {
+        onClose();
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [saveState, onClose]);
+
+  const handleSave = async () => {
+    const finalCategory =
+      selectedCategory === OTHER_CATEGORY ? customCategory : selectedCategory;
+    if (!title || !finalCategory) {
+      setError('Title and category are required.');
+      return;
+    }
+    setError('');
+    setSaveState('saving');
+
+    const formData = {
+      title: title,
+      category: finalCategory,
+      copyMode: copyMode,
+    };
+
+    const success = await savePaneToLibrary(paneId, tenantId, config, formData);
+
+    if (success) {
+      setSaveState('saved');
+    } else {
+      setSaveState('idle');
+      setError('Failed to save template. Please try again.');
+    }
+  };
+
+  return (
+    <div
+      className="z-105 fixed inset-0 flex items-center justify-center bg-black/50"
+      onClick={saveState === 'idle' ? onClose : undefined}
+    >
+      <div
+        className="w-full max-w-lg rounded-lg bg-white p-6 shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-medium text-gray-900">
+            Save Pane to Library
+          </h2>
+        </div>
+
+        <div className="mt-4 space-y-4">
+          <StringInput label="Title" value={title} onChange={setTitle} />
+
+          <div>
+            <label
+              htmlFor="category-select"
+              className="block text-sm font-medium text-gray-700"
+            >
+              Category
+            </label>
+            <select
+              id="category-select"
+              value={selectedCategory}
+              onChange={(e) => setSelectedCategory(e.target.value)}
+              className="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm"
+            >
+              {categories.map((cat) => (
+                <option key={cat} value={cat}>
+                  {cat === OTHER_CATEGORY ? 'New Category...' : cat}
+                </option>
+              ))}
+            </select>
+            {selectedCategory === OTHER_CATEGORY && (
+              <StringInput
+                label="New Category Name"
+                value={customCategory}
+                onChange={setCustomCategory}
+                className="mt-2"
+              />
+            )}
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700">
+              Content Mode
+            </label>
+            <fieldset className="mt-2">
+              <legend className="sr-only">Copy Mode</legend>
+              <div className="space-y-2">
+                {copyOptions.map((option) => (
+                  <div key={option.id} className="flex items-center">
+                    <input
+                      id={option.id}
+                      name="copy-mode"
+                      type="radio"
+                      value={option.id}
+                      checked={copyMode === option.id}
+                      onChange={() => setCopyMode(option.id)}
+                      className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
+                    />
+                    <label
+                      htmlFor={option.id}
+                      className="ml-3 block text-sm font-medium text-gray-700"
+                    >
+                      {option.title}
+                      <p className="text-xs text-gray-500">
+                        {option.description}
+                      </p>
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </fieldset>
+          </div>
+
+          {error && <p className="text-sm text-red-600">{error}</p>}
+        </div>
+
+        <div className="mt-6 flex justify-end space-x-3">
+          <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"
+            onClick={onClose}
+          >
+            Cancel
+          </button>
+          <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"
+            onClick={handleSave}
+          >
+            {saveState === 'idle' && 'Save to Library'}
+            {saveState === 'saving' && 'Saving...'}
+            {saveState === 'saved' && (
+              <>
+                <CheckIcon className="mr-2 h-5 w-5" />
+                Saved
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/src/constants/prompts.json

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

package/templates/src/stores/selection.ts

@@ -19,6 +19,8 @@ export interface SelectionStoreState extends SelectionRange {
   isActive: boolean;
   selectionBox: SelectionBox | null;
   pendingAction: 'style' | 'link' | null;
+  isRestyleModalOpen: boolean;
+  paneToRestyleId: string | null;
 }
 
 const DEFAULT_SELECTION_STATE: SelectionStoreState = {
@@ -32,6 +34,8 @@ const DEFAULT_SELECTION_STATE: SelectionStoreState = {
   endCharOffset: 0,
   selectionBox: null,
   pendingAction: null,
+  isRestyleModalOpen: false,
+  paneToRestyleId: null,
 };
 
 export const selectionStore = map<SelectionStoreState>(DEFAULT_SELECTION_STATE);

package/templates/src/types/compositorTypes.ts

@@ -11,6 +11,7 @@ export type ToolModeVal =
   | 'eraser'
   | 'move'
   | 'layout'
+  | 'designLibrary'
   | 'debug';
 
 export const toolAddModes = [
@@ -404,7 +405,56 @@ export type TemplatePane = PaneNode & {
   id?: string;
   parentId?: string;
   markdown?: TemplateMarkdown;
-  bgPane?: VisualBreakNode | ArtpackImageNode;
+  bgPane?: VisualBreakNode | ArtpackImageNode | BgImageNode;
+};
+
+export type StorageArtpackImageNode = Omit<
+  ArtpackImageNode,
+  'id' | 'parentId' | 'isChanged'
+>;
+export type StorageBgImageNode = Omit<
+  BgImageNode,
+  'id' | 'parentId' | 'isChanged' | 'base64Data'
+>;
+export type StorageVisualBreakNode = Omit<
+  VisualBreakNode,
+  'id' | 'parentId' | 'isChanged'
+>;
+
+export type StorageBgPane =
+  | StorageArtpackImageNode
+  | StorageBgImageNode
+  | StorageVisualBreakNode;
+
+export type StorageNode = Omit<
+  FlatNode,
+  'id' | 'parentId' | 'isChanged' | 'base64Data' | 'isPlaceholder'
+> & {
+  nodes?: StorageNode[];
+};
+
+export type StorageMarkdown = Omit<
+  MarkdownPaneFragmentNode,
+  'id' | 'parentId' | 'isChanged' | 'markdownId' | 'parentCss' | 'nodes'
+> & {
+  nodes?: StorageNode[];
+};
+
+export type StoragePane = Omit<
+  PaneNode,
+  | 'id'
+  | 'parentId'
+  | 'isChanged'
+  | 'created'
+  | 'changed'
+  | 'heldBeliefs'
+  | 'withheldBeliefs'
+  | 'codeHookTarget'
+  | 'codeHookPayload'
+  | 'markdown'
+> & {
+  markdown?: StorageMarkdown;
+  bgPane?: StorageBgPane;
 };
 
 export interface LinkNode extends FlatNode {

package/templates/src/types/tractstack.ts

@@ -1,16 +1,19 @@
-// Base component props that all TractStack components should support
+import type { StoragePane } from './compositorTypes';
+
+export type DesignLibraryEntry = {
+  category: string;
+  title: string;
+  template: StoragePane;
+};
+
+export type DesignLibraryConfig = DesignLibraryEntry[];
+
 export interface BaseComponentProps {
-  /** Additional CSS classes */
   class?: string;
-
-  /** Inline styles */
   style?: React.CSSProperties | string;
-
-  /** Component ID */
   id?: string;
 }
 
-// HTMX-specific attributes for components
 export interface HTMXAttributes {
   'hx-get'?: string;
   'hx-post'?: string;
@@ -148,39 +151,40 @@ export interface FullContentMapItem {
 }
 
 export interface BrandConfig {
-  // Core site configuration
-  SITE_INIT: boolean;
-  WORDMARK_MODE: string;
-  OPEN_DEMO: boolean;
-  STYLES_VER: number;
-  HOME_SLUG: string;
-  TRACTSTACK_HOME_SLUG: string;
-  THEME: string; // e.g., "light-bold"
-  BRAND_COLOURS: string; // e.g., "10120d,fcfcfc,f58333,c8df8c,293f58,a7b1b7,393d34,e3e3e3"
-  SOCIALS: string; // e.g., "github|https://github.com/user,twitter|https://twitter.com/user"
-  LOGO: string;
-  WORDMARK: string;
-  FAVICON: string;
-  SITE_URL: string;
-  SLOGAN: string;
-  FOOTER: string;
-  OG: string;
-  OGLOGO: string;
-  OGTITLE: string;
-  OGAUTHOR: string;
-  OGDESC: string;
+  TENANT_ID: string;
+  SITE_INIT?: boolean;
+  WORDMARK_MODE?: string;
+  OPEN_DEMO?: boolean;
+  STYLES_VER?: number;
+  HOME_SLUG?: string;
+  TRACTSTACK_HOME_SLUG?: string;
+  THEME?: string; // e.g., "light-bold"
+  BRAND_COLOURS?: string; // e.g., "10120d,fcfcfc,f58333,c8df8c,293f58,a7b1b7,393d34,e3e3e3"
+  SOCIALS?: string; // e.g., "github|https://github.com/user,twitter|https://twitter.com/user"
+  LOGO?: string;
+  WORDMARK?: string;
+  FAVICON?: string;
+  SITE_URL?: string;
+  SLOGAN?: string;
+  FOOTER?: string;
+  OG?: string;
+  OGLOGO?: string;
+  OGTITLE?: string;
+  OGAUTHOR?: string;
+  OGDESC?: string;
   LOGO_BASE64?: string;
   WORDMARK_BASE64?: string;
   OG_BASE64?: string;
   OGLOGO_BASE64?: string;
   FAVICON_BASE64?: string;
-  GTAG: string;
+  GTAG?: string;
   KNOWN_RESOURCES?: KnownResourcesConfig;
-  HAS_AAI: boolean;
+  DESIGN_LIBRARY?: DesignLibraryConfig;
+  HAS_AAI?: boolean;
 }
 
 export interface BrandConfigState {
-  // Core site configuration
+  tenantId: string;
   siteInit: boolean;
   wordmarkMode: string;
   openDemo: boolean;
@@ -208,6 +212,7 @@ export interface BrandConfigState {
   faviconBase64?: string;
   gtag: string;
   knownResources: KnownResourcesConfig;
+  designLibrary?: DesignLibraryConfig;
   hasAAI: boolean;
 }
 

package/templates/src/utils/aai/getTitleSlug.ts

@@ -38,7 +38,7 @@ Example response format:
   "slug": "short-descriptive-title"
 }`,
         input_text: markdownContent,
-        final_model: 'anthropic/claude-3-5-sonnet',
+        final_model: '',
       }),
     });
 

package/templates/src/utils/api/brandConfig.ts

@@ -7,9 +7,11 @@ export async function saveBrandConfig(
   brandConfig: BrandConfig
 ): Promise<BrandConfig> {
   const api = new TractStackAPI(tenantId);
+  const config: any = brandConfig;
+  delete config.TENANT_ID;
   try {
     const response = await api.put('/api/v1/config/brand', {
-      ...brandConfig,
+      ...config,
       SITE_INIT: true,
     });
     if (!response.success) {
@@ -39,6 +41,7 @@ export async function getBrandConfig(tenantId: string): Promise<BrandConfig> {
       ) {
         // Return empty/default config when backend is down
         return {
+          TENANT_ID: tenantId,
           SITE_INIT: false,
           WORDMARK_MODE: '',
           BRAND_COLOURS: '',
@@ -61,16 +64,18 @@ export async function getBrandConfig(tenantId: string): Promise<BrandConfig> {
           GTAG: '',
           STYLES_VER: 1,
           KNOWN_RESOURCES: {},
+          DESIGN_LIBRARY: [],
           HAS_AAI: false,
         } as BrandConfig;
       }
       throw new Error(response.error || 'Failed to get brand configuration');
     }
-    return response.data;
+    return { ...response.data, TENANT_ID: tenantId };
   } catch (error) {
     // If it's a network error (backend down), return default config
     if (error instanceof TypeError && error.message.includes('fetch failed')) {
       return {
+        TENANT_ID: tenantId,
         SITE_INIT: false,
         WORDMARK_MODE: '',
         BRAND_COLOURS: '',
@@ -93,6 +98,7 @@ export async function getBrandConfig(tenantId: string): Promise<BrandConfig> {
         GTAG: '',
         STYLES_VER: 1,
         KNOWN_RESOURCES: {},
+        DESIGN_LIBRARY: [],
         HAS_AAI: false,
       } as BrandConfig;
     }

package/templates/src/utils/api/brandHelpers.ts

@@ -11,6 +11,7 @@ export function convertToLocalState(
   brandConfig: BrandConfig
 ): BrandConfigState {
   return {
+    tenantId: brandConfig.TENANT_ID || `default`,
     siteInit: brandConfig.SITE_INIT ?? false,
     wordmarkMode: brandConfig.WORDMARK_MODE ?? '',
     brandColours: brandConfig.BRAND_COLOURS
@@ -37,6 +38,7 @@ export function convertToLocalState(
     gtag: brandConfig.GTAG ?? '',
     stylesVer: brandConfig.STYLES_VER ?? 1,
     knownResources: brandConfig.KNOWN_RESOURCES ?? {},
+    designLibrary: brandConfig.DESIGN_LIBRARY ?? undefined,
     hasAAI: brandConfig.HAS_AAI ?? false,
   };
 }
@@ -49,6 +51,7 @@ export function convertToBackendFormat(
   localState: BrandConfigState
 ): BrandConfig {
   return {
+    TENANT_ID: localState.tenantId,
     SITE_INIT: localState.siteInit,
     WORDMARK_MODE: localState.wordmarkMode,
     BRAND_COLOURS: localState.brandColours.join(','),
@@ -66,6 +69,7 @@ export function convertToBackendFormat(
     OGDESC: localState.ogdesc,
     GTAG: localState.gtag,
     KNOWN_RESOURCES: localState.knownResources,
+    DESIGN_LIBRARY: localState.designLibrary,
     HAS_AAI: localState.hasAAI,
 
     // ALWAYS send asset paths (current state)