astro-tractstack 2.0.12 → 2.0.14

package/dist/index.js

@@ -126,6 +126,12 @@ async function w(t, e, c) {
       ),
       dest: "src/components/compositor/nodes/Pane_eraser.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/compositor/nodes/Pane_DesignLibrary.tsx"
+      ),
+      dest: "src/components/compositor/nodes/Pane_DesignLibrary.tsx"
+    },
     {
       src: t(
         "../templates/src/components/compositor/nodes/Pane_layout.tsx"
@@ -428,6 +434,12 @@ async function w(t, e, c) {
       ),
       dest: "src/components/edit/pane/AddPanePanel_codehook.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/edit/pane/RestylePaneModal.tsx"
+      ),
+      dest: "src/components/edit/pane/RestylePaneModal.tsx"
+    },
     {
       src: t("../templates/src/components/edit/pane/AiPaneGenerator.tsx"),
       dest: "src/components/edit/pane/AiPaneGenerator.tsx"
@@ -624,6 +636,10 @@ async function w(t, e, c) {
       src: t("../templates/src/utils/compositor/typeGuards.ts"),
       dest: "src/utils/compositor/typeGuards.ts"
     },
+    {
+      src: t("../templates/src/utils/compositor/designLibraryHelper.ts"),
+      dest: "src/utils/compositor/designLibraryHelper.ts"
+    },
     {
       src: t("../templates/src/utils/compositor/domHelpers.ts"),
       dest: "src/utils/compositor/domHelpers.ts"
@@ -1345,6 +1361,12 @@ async function w(t, e, c) {
       src: t("../templates/src/components/edit/state/SaveModal.tsx"),
       dest: "src/components/edit/state/SaveModal.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/edit/state/SaveToLibraryModal.tsx"
+      ),
+      dest: "src/components/edit/state/SaveToLibraryModal.tsx"
+    },
     {
       src: t("../templates/src/components/edit/state/StylesMemory.tsx"),
       dest: "src/components/edit/state/StylesMemory.tsx"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.12",
+  "version": "2.0.14",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/client/view.js

@@ -42,6 +42,11 @@ async function sendStateUpdate(data) {
     return;
   }
   const config = window.TractStackApp.getConfig();
+
+  if (!config.sessionId || !config.storyfragmentId) {
+    return;
+  }
+
   const url = `${config.backendUrl}/api/v1/state`;
   const body = { paneId: '', duration: 0, ...data };
   log('Sending state update to backend.', { url, body });

package/templates/src/components/compositor/Compositor.tsx

@@ -284,11 +284,12 @@ export const Compositor = (props: CompositorProps) => {
 
   useEffect(() => {
     fullContentMapStore.set(props.fullContentMap);
-    hasAssemblyAIStore.set(props.config.HAS_AAI);
+    hasAssemblyAIStore.set(props.config?.HAS_AAI || false);
     urlParamsStore.set(props.urlParams);
     canonicalURLStore.set(props.fullCanonicalURL);
     preferredThemeStore.set(props.config.THEME as Theme);
-    brandColourStore.set(props.config.BRAND_COLOURS);
+    if (props.config.BRAND_COLOURS)
+      brandColourStore.set(props.config.BRAND_COLOURS);
     codehookMapStore.set(props.availableCodeHooks);
   }, [
     props.fullContentMap,

package/templates/src/components/compositor/Node.tsx

@@ -30,6 +30,7 @@ import { NodeBasicTag } from './nodes/tagElements/NodeBasicTag';
 import { NodeBasicTagInsert } from './nodes/tagElements/NodeBasicTag_insert';
 import { NodeBasicTagEraser } from './nodes/tagElements/NodeBasicTag_eraser';
 import { NodeBasicTagSettings } from './nodes/tagElements/NodeBasicTag_settings';
+import { Pane_DesignLibrary } from './nodes/Pane_DesignLibrary';
 import AddPanePanel from '@/components/edit/pane/AddPanePanel';
 import PageCreationSelector from '@/components/edit/pane/PageGenSelector';
 import ConfigPanePanel from '@/components/edit/pane/ConfigPanePanel';
@@ -155,6 +156,7 @@ const getElement = (
               nodeId={props.nodeId}
               ctx={getCtx(props)}
               isTemplate={isTemplate}
+              config={props.config!}
             />
           ) : (
             <>
@@ -179,6 +181,9 @@ const getElement = (
       const toolModeVal = getCtx(props).toolModeValStore.get().value;
       const paneNodes = getCtx(props).getChildNodeIDs(node.id);
       const paneNode = node as PaneNode;
+      if (toolModeVal === 'designLibrary') {
+        return <Pane_DesignLibrary {...sharedProps} />;
+      }
       if (paneNode.isContextPane) {
         if (!isPreview)
           getCtx(props).hasTitle.set(!(!paneNode.slug || !paneNode.title));
@@ -215,6 +220,7 @@ const getElement = (
                       nodeId={node.id}
                       first={true}
                       ctx={getCtx(props)}
+                      config={props.config!}
                       isContextPane={true}
                     />
                   </PanelVisibilityWrapper>
@@ -242,7 +248,12 @@ const getElement = (
               panelType="add"
               ctx={getCtx(props)}
             >
-              <AddPanePanel nodeId={node.id} first={true} ctx={getCtx(props)} />
+              <AddPanePanel
+                nodeId={node.id}
+                first={true}
+                ctx={getCtx(props)}
+                config={props.config!}
+              />
             </PanelVisibilityWrapper>
           )}
           <div className="py-0.5">
@@ -266,7 +277,12 @@ const getElement = (
             panelType="add"
             ctx={getCtx(props)}
           >
-            <AddPanePanel nodeId={node.id} first={false} ctx={getCtx(props)} />
+            <AddPanePanel
+              nodeId={node.id}
+              first={false}
+              ctx={getCtx(props)}
+              config={props.config!}
+            />
           </PanelVisibilityWrapper>
         </>
       );

package/templates/src/components/compositor/nodes/Pane_DesignLibrary.tsx

@@ -0,0 +1,105 @@
+import { type CSSProperties, useEffect, useState } from 'react';
+import { useStore } from '@nanostores/react';
+import ArchiveBoxArrowDownIcon from '@heroicons/react/24/outline/ArchiveBoxArrowDownIcon';
+import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRoundedSquareIcon';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { RenderChildren } from './RenderChildren';
+import { CodeHookContainer } from './Pane';
+import type { NodeProps } from '@/types/nodeProps';
+import { SaveToLibraryModal } from '@/components/edit/state/SaveToLibraryModal';
+import { RestylePaneModal } from '@/components/edit/pane/RestylePaneModal';
+import { selectionStore } from '@/stores/selection';
+
+export const Pane_DesignLibrary = (props: NodeProps) => {
+  const ctx = getCtx(props);
+
+  if (!props.config || !props.config.TENANT_ID) {
+    return <></>;
+  }
+
+  const { isRestyleModalOpen } = useStore(selectionStore, {
+    keys: ['isRestyleModalOpen'],
+  });
+
+  const wrapperClasses = `grid ${ctx.getNodeClasses(
+    props.nodeId,
+    viewportKeyStore.get().value
+  )}`;
+  const contentClasses = 'relative w-full h-auto justify-self-start';
+  const contentStyles: CSSProperties = {
+    ...ctx.getNodeCSSPropertiesStyles(props.nodeId),
+    gridArea: '1/1/1/1',
+  };
+  const codeHookPayload = ctx.getNodeCodeHookPayload(props.nodeId);
+  const [children, setChildren] = useState<string[]>([
+    ...ctx.getChildNodeIDs(props.nodeId),
+  ]);
+  const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
+  const getPaneId = (): string => `pane-${props.nodeId}`;
+
+  useEffect(() => {
+    const unsubscribe = ctx.notifications.subscribe(props.nodeId, () => {
+      setChildren([...ctx.getChildNodeIDs(props.nodeId)]);
+    });
+    return unsubscribe;
+  }, [props.nodeId, ctx.notifications]);
+
+  const handleRestyleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    selectionStore.setKey('paneToRestyleId', props.nodeId);
+    selectionStore.setKey('isRestyleModalOpen', true);
+  };
+
+  const handleSaveClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsSaveModalOpen(true);
+  };
+
+  return (
+    <div id={getPaneId()} className="pane min-h-16">
+      <div id={ctx.getNodeSlug(props.nodeId)} className={wrapperClasses}>
+        <div
+          className={contentClasses}
+          style={contentStyles}
+          onClick={(e) => {
+            ctx.setClickedNodeId(props.nodeId);
+            e.stopPropagation();
+          }}
+        >
+          <div className="absolute left-2 top-2 z-10 flex flex-col gap-y-2">
+            <button
+              title="Save Pane to Design Library"
+              onClick={handleSaveClick}
+              className="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-600 p-1.5 shadow-lg hover:bg-cyan-700"
+            >
+              <ArchiveBoxArrowDownIcon className="h-7 w-7 text-white" />
+            </button>
+            <button
+              title="Restyle Pane from Design Library"
+              onClick={handleRestyleClick}
+              className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 p-1.5 shadow-lg hover:bg-blue-700"
+            >
+              <ArrowPathRoundedSquareIcon className="h-7 w-7 text-white" />
+            </button>
+          </div>
+          {codeHookPayload ? (
+            <CodeHookContainer payload={codeHookPayload} />
+          ) : (
+            <RenderChildren children={children} nodeProps={props} />
+          )}
+        </div>
+      </div>
+      {isSaveModalOpen && (
+        <SaveToLibraryModal
+          paneId={props.nodeId}
+          config={props.config}
+          tenantId={props.config.TENANT_ID}
+          onClose={() => setIsSaveModalOpen(false)}
+        />
+      )}
+
+      {isRestyleModalOpen && <RestylePaneModal config={props.config} />}
+    </div>
+  );
+};

package/templates/src/components/edit/ToolMode.tsx

@@ -3,6 +3,7 @@ import { useStore } from '@nanostores/react';
 import PencilSquareIcon from '@heroicons/react/24/outline/PencilSquareIcon';
 import PaintBrushIcon from '@heroicons/react/24/outline/PaintBrushIcon';
 import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
+import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRoundedSquareIcon';
 import ArrowsUpDownIcon from '@heroicons/react/24/outline/ArrowsUpDownIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import BugAntIcon from '@heroicons/react/24/outline/BugAntIcon';
@@ -45,6 +46,12 @@ const storykeepToolModes = [
     title: 'Move',
     description: 'Keyboard accessible re-order',
   },
+  {
+    key: 'designLibrary' as const,
+    Icon: ArrowPathRoundedSquareIcon,
+    title: 'Design Library',
+    description: 'Save pane to design library',
+  },
 ] as const;
 
 interface StoryKeepToolModeProps {

package/templates/src/components/edit/pane/AddPanePanel.tsx

@@ -5,8 +5,9 @@ import AddPaneNewPanel from './AddPanePanel_new';
 import AddPaneBreakPanel from './AddPanePanel_break';
 import AddPaneReUsePanel from './AddPanePanel_reuse';
 import AddPaneCodeHookPanel from './AddPanePanel_codehook';
-import { NodesContext, ROOT_NODE_NAME, getCtx } from '@/stores/nodes'; // Import getCtx
+import { NodesContext, ROOT_NODE_NAME, getCtx } from '@/stores/nodes';
 import { PaneAddMode } from '@/types/compositorTypes';
+import type { BrandConfig } from '@/types/tractstack';
 
 interface AddPanePanelProps {
   nodeId: string;
@@ -14,6 +15,7 @@ interface AddPanePanelProps {
   ctx?: NodesContext;
   isStoryFragment?: boolean;
   isContextPane?: boolean;
+  config?: BrandConfig;
 }
 
 const AddPanePanel = ({
@@ -22,6 +24,7 @@ const AddPanePanel = ({
   ctx,
   isStoryFragment = false,
   isContextPane = false,
+  config,
 }: AddPanePanelProps) => {
   const [reset, setReset] = useState(false);
   const lookup = first ? `${nodeId}-0` : nodeId;
@@ -62,6 +65,7 @@ const AddPanePanel = ({
           ctx={nodesCtx}
           isStoryFragment={isStoryFragment}
           isContextPane={isContextPane}
+          config={config!}
         />
       ) : mode === PaneAddMode.BREAK && !isContextPane ? (
         <AddPaneBreakPanel

package/templates/src/components/edit/pane/AddPanePanel_new.tsx

@@ -26,7 +26,7 @@ import {
 import { templateCategories } from '@/utils/compositor/templateMarkdownStyles';
 import { AiPaneGenerator } from './AiPaneGenerator';
 import { AddPaneNewCustomCopy } from './AddPanePanel_newCustomCopy';
-import { themes, type Theme } from '@/types/tractstack';
+import { themes, type Theme, type BrandConfig } from '@/types/tractstack';
 import { PaneAddMode, type TemplatePane } from '@/types/compositorTypes';
 import { useStore } from '@nanostores/react';
 
@@ -37,6 +37,7 @@ interface AddPaneNewPanelProps {
   ctx?: NodesContext;
   isStoryFragment?: boolean;
   isContextPane?: boolean;
+  config?: BrandConfig;
 }
 
 interface PreviewPane {
@@ -65,6 +66,7 @@ const AddPaneNewPanel = ({
   ctx,
   isStoryFragment = false,
   isContextPane = false,
+  config,
 }: AddPaneNewPanelProps) => {
   const brand = useStore(brandColourStore);
   const hasAssemblyAI = useStore(hasAssemblyAIStore);
@@ -384,6 +386,7 @@ const AddPaneNewPanel = ({
                 ownerId={nodeId}
                 onComplete={handleApplyGeneratedPane}
                 onCancel={() => setMode('template')}
+                config={config!}
               />
             </div>
           )}