astro-tractstack 2.0.13 → 2.0.15

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"
@@ -436,6 +448,24 @@ async function w(t, e, c) {
       src: t("../templates/src/components/edit/pane/AiPanePreview.tsx"),
       dest: "src/components/edit/pane/AiPanePreview.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/edit/pane/steps/CopyInputStep.tsx"
+      ),
+      dest: "src/components/edit/pane/steps/CopyInputStep.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/edit/pane/steps/DesignLibraryStep.tsx"
+      ),
+      dest: "src/components/edit/pane/steps/DesignLibraryStep.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/edit/pane/steps/AiDesignStep.tsx"
+      ),
+      dest: "src/components/edit/pane/steps/AiDesignStep.tsx"
+    },
     {
       src: t(
         "../templates/src/components/edit/pane/AddPanePanel_newCustomCopy.tsx"
@@ -624,6 +654,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 +1379,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.13",
+  "version": "2.0.15",
   "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,8 +30,8 @@ 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';
 import StoryFragmentConfigPanel from '@/components/edit/storyfragment/StoryFragmentConfigPanel';
 import StoryFragmentTitlePanel from '@/components/edit/storyfragment/StoryFragmentPanel_title';
@@ -45,6 +45,7 @@ import type {
   BaseNode,
   FlatNode,
 } from '@/types/compositorTypes';
+import { PaneAddMode } from '@/types/compositorTypes';
 import { handleClickEventDefault } from '@/utils/compositor/handleClickEvent';
 import { selectionStore } from '@/stores/selection';
 import type { NodeProps, SelectionOrigin } from '@/types/nodeProps';
@@ -88,6 +89,25 @@ function parseCodeHook(node: BaseNode | FlatNode) {
   return null;
 }
 
+// Helper component to safely set the panel mode for an empty page
+const EmptyPageHandler = (props: NodeProps) => {
+  const ctx = getCtx(props);
+  useEffect(() => {
+    ctx.setPaneAddMode(props.nodeId, PaneAddMode.NEW);
+  }, []);
+
+  // Now that the mode is set, render the panel which will read it.
+  return (
+    <AddPanePanel
+      nodeId={props.nodeId}
+      first={true}
+      ctx={ctx}
+      isStoryFragment={true}
+      config={props.config!}
+    />
+  );
+};
+
 const getElement = (
   node: BaseNode | FlatNode,
   props: NodeProps
@@ -95,7 +115,6 @@ const getElement = (
   if (node === undefined) return <></>;
   const isPreview = getCtx(props).rootNodeId.get() === `tmp`;
   const hasPanes = useStore(getCtx(props).hasPanes);
-  const isTemplate = useStore(getCtx(props).isTemplate);
   const sharedProps = { ...props, nodeId: node.id };
   const type = getType(node);
 
@@ -151,12 +170,7 @@ const getElement = (
               </div>
             </div>
           ) : !hasPanes && sf.slug && sf.title && !isPreview ? (
-            <PageCreationSelector
-              nodeId={props.nodeId}
-              ctx={getCtx(props)}
-              isTemplate={isTemplate}
-              config={props.config!}
-            />
+            <EmptyPageHandler {...sharedProps} />
           ) : (
             <>
               <PanelVisibilityWrapper
@@ -180,6 +194,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));

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 {