astro-tractstack 2.0.15 → 2.0.16

package/dist/index.js

@@ -138,6 +138,18 @@ async function w(t, e, c) {
       ),
       dest: "src/components/compositor/nodes/Pane_layout.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/codehooks/SandboxAuthWrapper.tsx"
+      ),
+      dest: "src/components/codehooks/SandboxAuthWrapper.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/codehooks/SandboxRegisterForm.tsx"
+      ),
+      dest: "src/components/codehooks/SandboxRegisterForm.tsx"
+    },
     {
       src: t("../templates/src/components/compositor/nodes/Markdown.tsx"),
       dest: "src/components/compositor/nodes/Markdown.tsx"
@@ -440,14 +452,6 @@ async function w(t, e, c) {
       ),
       dest: "src/components/edit/pane/RestylePaneModal.tsx"
     },
-    {
-      src: t("../templates/src/components/edit/pane/AiPaneGenerator.tsx"),
-      dest: "src/components/edit/pane/AiPaneGenerator.tsx"
-    },
-    {
-      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"
@@ -599,11 +603,6 @@ async function w(t, e, c) {
       src: t("../templates/src/stores/selection.ts"),
       dest: "src/stores/selection.ts"
     },
-    // AAI utils
-    {
-      src: t("../templates/src/utils/aai/getTitleSlug.ts"),
-      dest: "src/utils/aai/getTitleSlug.ts"
-    },
     // Compositor utils - etl
     {
       src: t("../templates/src/utils/etl/index.ts"),
@@ -834,6 +833,10 @@ async function w(t, e, c) {
       ),
       dest: "src/pages/context/[...contextSlug]/edit.astro"
     },
+    {
+      src: t("../templates/src/pages/sandbox.astro"),
+      dest: "src/pages/sandbox.astro"
+    },
     {
       src: t("../templates/src/pages/storykeep.astro"),
       dest: "src/pages/storykeep.astro"
@@ -878,6 +881,10 @@ async function w(t, e, c) {
       src: t("../templates/src/pages/api/tailwind.ts"),
       dest: "src/pages/api/tailwind.ts"
     },
+    {
+      src: t("../templates/src/pages/api/sandbox.ts"),
+      dest: "src/pages/api/sandbox.ts"
+    },
     // Authentication Pages
     {
       src: t("../templates/src/pages/storykeep/login.astro"),
@@ -2110,6 +2117,13 @@ async function w(t, e, c) {
     },
     // Example Components (Conditional)
     ...c?.includeExamples ? [
+      {
+        src: t(
+          "../templates/custom/with-examples/SandboxLauncher.tsx"
+        ),
+        dest: "src/custom/SandboxLauncher.tsx",
+        protected: !0
+      },
       {
         src: t("../templates/custom/with-examples/CustomHero.astro"),
         dest: "src/custom/CustomHero.astro",

package/package.json

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

package/templates/custom/with-examples/CodeHook.astro

@@ -7,6 +7,7 @@ import BunnyVideoWrapper from '@/components/codehooks/BunnyVideoWrapper.astro';
 import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
 import ProductCardWrapper from './ProductCardWrapper.astro';
 import ProductGrid from './ProductGrid.astro';
+import SandboxLauncher from './SandboxLauncher';
 import type { FullContentMapItem } from '@/types/tractstack';
 import type { ResourceNode } from '@/types/compositorTypes';
 
@@ -30,6 +31,7 @@ export const components = {
   'search-widget': true,
   'product-card': true,
   'product-grid': true,
+  'get-crafting': true,
   'bunny-video': import.meta.env.PUBLIC_ENABLE_BUNNY === 'true',
   epinet: true,
 };
@@ -48,6 +50,8 @@ export const components = {
     <SearchWidget fullContentMap={fullContentMap} client:load />
   ) : target === 'bunny-video' && import.meta.env.PUBLIC_ENABLE_BUNNY ? (
     <BunnyVideoWrapper options={options} />
+  ) : target === 'get-crafting' ? (
+    <SandboxLauncher client:only="react" />
   ) : target === 'custom-hero' ? (
     <CustomHero />
   ) : target === 'epinet' ? (

package/templates/custom/with-examples/SandboxLauncher.tsx

@@ -0,0 +1,65 @@
+import { useState, useEffect } from 'react';
+import { ProfileStorage } from '@/utils/profileStorage';
+import SandboxRegisterForm from '@/components/codehooks/SandboxRegisterForm';
+
+export default function SandboxLauncher() {
+  const [profileExists, setProfileExists] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    // This check must run on the client to access localStorage
+    setProfileExists(ProfileStorage.hasProfile());
+  }, []);
+
+  const handleRegistrationSuccess = () => {
+    setProfileExists(true);
+  };
+
+  // Avoid a flash of the wrong state during server-side rendering
+  if (profileExists === null) {
+    return null;
+  }
+
+  return (
+    <div className="mx-auto my-16 max-w-6xl px-4 md:my-24">
+      <div className="flex flex-col items-center gap-12 md:flex-row md:gap-16">
+        {/* Column 1: The Pitch (Always Visible) */}
+        <div className="px-6 text-right md:w-1/2">
+          <h2 className="text-4xl font-bold text-gray-900 md:text-5xl">
+            Press <span className="italic text-blue-600">your own</span> Tract
+            Stack
+          </h2>
+          <p className="mt-4 text-lg text-gray-600">
+            Create an interactive webpage in a sandbox! No credit card required.
+          </p>
+          <p className="mt-8 text-sm text-gray-500">
+            Already connected?{' '}
+            <a
+              href="/storykeep/profile"
+              className="font-bold text-blue-600 underline hover:text-blue-500"
+            >
+              Unlock your profile
+            </a>
+          </p>
+        </div>
+
+        {/* Column 2: The Action (Switches between Form and Button) */}
+        <div className="w-full max-w-xl md:w-1/2">
+          {!profileExists ? (
+            <SandboxRegisterForm onSuccess={handleRegistrationSuccess} />
+          ) : (
+            <div className="flex justify-center md:justify-start">
+              <div className="flex justify-center md:justify-start">
+                <a
+                  className="transform rounded-xl bg-blue-600 px-6 py-6 text-3xl font-bold text-white shadow-xl transition-transform hover:scale-105 md:text-5xl"
+                  href="/sandbox"
+                >
+                  Get Crafting
+                </a>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/env.example

@@ -6,3 +6,6 @@ PUBLIC_GO_BACKEND=http://localhost:8080
 PUBLIC_TENANTID=default
 # OPTIONAL: Multi-Tenant Configuration
 PUBLIC_ENABLE_MULTI_TENANT=false
+# OPTIONAL: Enable Sandbox DEMO mode
+# ***SPECIAL*** has security implications
+#PRIVATE_SANDBOX_SECRET=strong-secret-password

package/templates/src/components/codehooks/SandboxAuthWrapper.tsx

@@ -0,0 +1,75 @@
+import { useState, useEffect } from 'react';
+import { Dialog } from '@ark-ui/react/dialog';
+import { Portal } from '@ark-ui/react/portal';
+import XMarkIcon from '@heroicons/react/24/solid/XMarkIcon';
+import { ProfileStorage } from '@/utils/profileStorage';
+import SandboxRegisterForm from '@/components/codehooks/SandboxRegisterForm';
+
+export default function SandboxAuthWrapper() {
+  const [profileExists, setProfileExists] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    setProfileExists(ProfileStorage.hasProfile());
+  }, []);
+
+  const handleRegistrationSuccess = () => {
+    setProfileExists(true);
+  };
+
+  const handleClose = () => {
+    window.location.href = '/';
+  };
+
+  if (profileExists === null || profileExists === true) {
+    return null;
+  }
+
+  return (
+    <Dialog.Root open={true} modal={true} trapFocus={false}>
+      <Portal>
+        <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="relative grid w-full max-w-6xl grid-cols-1 overflow-hidden rounded-lg bg-white shadow-2xl md:grid-cols-2">
+            <button
+              onClick={handleClose}
+              className="absolute right-4 top-4 z-10 rounded-full bg-gray-100 p-2 text-gray-600 shadow-sm transition-colors hover:bg-gray-200"
+              title="Close and exit Sandbox"
+            >
+              <XMarkIcon className="h-5 w-5" />
+            </button>
+
+            <div className="flex flex-col justify-center bg-gray-50 p-8 text-right">
+              <h2 className="text-4xl font-bold text-gray-900 md:text-5xl">
+                Press <span className="italic text-blue-600">your own</span>{' '}
+                Tract Stack
+              </h2>
+              <p className="mt-4 text-lg text-gray-600">
+                Create an interactive webpage in a sandbox! No credit card
+                required.
+              </p>
+              <p className="mt-8 text-sm text-gray-500">
+                Already connected?{' '}
+                <a
+                  href="/storykeep/profile"
+                  className="font-bold text-blue-600 underline hover:text-blue-500"
+                >
+                  Unlock your profile
+                </a>
+              </p>
+            </div>
+
+            <div className="flex flex-col justify-center p-8">
+              <SandboxRegisterForm onSuccess={handleRegistrationSuccess} />
+            </div>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  );
+}

package/templates/src/components/codehooks/SandboxRegisterForm.tsx

@@ -0,0 +1,202 @@
+import { useState } from 'react';
+import { ProfileStorage } from '@/utils/profileStorage';
+import type { FormEvent } from 'react';
+
+interface SandboxRegisterFormProps {
+  onSuccess: () => void;
+}
+
+async function createProfile(payload: {
+  firstname: string;
+  email: string;
+  codeword: string;
+  persona: 'major' | 'none';
+}) {
+  try {
+    const sessionData = ProfileStorage.prepareHandshakeData();
+    const currentConsent = payload.persona === 'major' ? '1' : '0';
+
+    const response = await fetch('/api/auth/profile', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        firstname: payload.firstname,
+        email: payload.email,
+        codeword: payload.codeword,
+        contactPersona: payload.persona,
+        shortBio: '',
+        sessionId: sessionData.sessionId,
+        consent: currentConsent,
+        isUpdate: false,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (!result.success) {
+      return {
+        success: false,
+        error: result.error || 'Profile creation failed',
+      };
+    }
+
+    if (result.profile) {
+      ProfileStorage.setProfileData({
+        firstname: result.profile.firstname,
+        contactPersona: result.profile.contactPersona,
+        email: result.profile.email,
+        shortBio: result.profile.shortBio,
+      });
+    }
+    if (result.token) {
+      ProfileStorage.storeProfileToken(result.token);
+    }
+    if (result.encryptedEmail && result.encryptedCode) {
+      ProfileStorage.storeEncryptedCredentials(
+        result.encryptedEmail,
+        result.encryptedCode
+      );
+    }
+    if (result.consent) {
+      ProfileStorage.storeConsent(result.consent);
+    }
+
+    return { success: true };
+  } catch (e) {
+    console.error('Sandbox profile creation error:', e);
+    return { success: false, error: 'A network error occurred.' };
+  }
+}
+
+export default function SandboxRegisterForm({
+  onSuccess,
+}: SandboxRegisterFormProps) {
+  const [firstname, setFirstname] = useState('');
+  const [email, setEmail] = useState('');
+  const [codeword, setCodeword] = useState('');
+  const [consent, setConsent] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!email || !codeword || !firstname) {
+      setError('Please fill out all required fields.');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    const persona = consent ? 'major' : 'none';
+
+    const result = await createProfile({
+      firstname,
+      email,
+      codeword,
+      persona,
+    });
+
+    if (result.success) {
+      onSuccess();
+    } else {
+      setError(result.error || 'An unknown error occurred. Please try again.');
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="rounded-lg border bg-white p-6 shadow-sm"
+    >
+      <div className="space-y-4">
+        <div>
+          <label htmlFor="firstname" className="block text-sm text-gray-700">
+            First Name
+          </label>
+          <input
+            type="text"
+            name="firstname"
+            id="firstname"
+            autoComplete="given-name"
+            value={firstname}
+            onChange={(e) => setFirstname(e.target.value)}
+            disabled={isLoading}
+            className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+            required
+          />
+        </div>
+
+        <div>
+          <label htmlFor="email" className="block text-sm text-gray-700">
+            Email address
+          </label>
+          <input
+            type="email"
+            name="email"
+            id="email"
+            autoComplete="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            disabled={isLoading}
+            className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+            required
+          />
+        </div>
+
+        <div>
+          <label htmlFor="codeword" className="block text-sm text-gray-700">
+            Create a Codeword (to unlock your account)
+          </label>
+          <input
+            type="password"
+            name="codeword"
+            id="codeword"
+            autoComplete="new-password"
+            value={codeword}
+            onChange={(e) => setCodeword(e.target.value)}
+            disabled={isLoading}
+            className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+            required
+          />
+        </div>
+
+        <div className="flex items-start">
+          <div className="flex h-5 items-center">
+            <input
+              id="consent"
+              name="consent"
+              type="checkbox"
+              checked={consent}
+              onChange={(e) => setConsent(e.target.checked)}
+              disabled={isLoading}
+              className="h-4 w-4 rounded border-gray-300 text-cyan-600 focus:ring-cyan-500"
+            />
+          </div>
+          <div className="ml-3 text-sm">
+            <label htmlFor="consent" className="text-gray-700">
+              Keep me in touch with major updates
+            </label>
+          </div>
+        </div>
+
+        {error && (
+          <p className="text-sm text-red-600" role="alert">
+            {error}
+          </p>
+        )}
+
+        <div>
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="flex w-full justify-center rounded-md border border-transparent bg-black px-4 py-2 text-sm font-bold text-white shadow-sm transition-colors hover:bg-orange-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-gray-400"
+          >
+            {isLoading ? 'Creating...' : 'Start Crafting'}
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}

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

@@ -50,6 +50,7 @@ export type CompositorProps = {
   availableCodeHooks: string[];
   urlParams: Record<string, string | boolean>;
   fullCanonicalURL: string;
+  isSandboxMode?: boolean;
 };
 
 const VERBOSE = false;
@@ -464,6 +465,7 @@ export const Compositor = (props: CompositorProps) => {
           key={`${props.id}-${updateCounter}`}
           ctx={props.ctx}
           config={props.config}
+          isSandboxMode={props.isSandboxMode}
           onDragStart={handleDragStart}
         />
       )}

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

@@ -104,6 +104,7 @@ const EmptyPageHandler = (props: NodeProps) => {
       ctx={ctx}
       isStoryFragment={true}
       config={props.config!}
+      isSandboxMode={props.isSandboxMode}
     />
   );
 };
@@ -115,7 +116,11 @@ const getElement = (
   if (node === undefined) return <></>;
   const isPreview = getCtx(props).rootNodeId.get() === `tmp`;
   const hasPanes = useStore(getCtx(props).hasPanes);
-  const sharedProps = { ...props, nodeId: node.id };
+  const sharedProps = {
+    ...props,
+    nodeId: node.id,
+    isSandboxMode: props.isSandboxMode,
+  };
   const type = getType(node);
 
   switch (type) {

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

@@ -14,10 +14,6 @@ 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'],
   });
@@ -56,6 +52,10 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
     setIsSaveModalOpen(true);
   };
 
+  if (!props.config || !props.config.TENANT_ID) {
+    return <></>;
+  }
+
   return (
     <div id={getPaneId()} className="pane min-h-16">
       <div id={ctx.getNodeSlug(props.nodeId)} className={wrapperClasses}>
@@ -68,13 +68,15 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
           }}
         >
           <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>
+            {props.isSandboxMode && (
+              <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}

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

@@ -51,20 +51,22 @@ export const PaneLayout = (props: NodeProps) => {
             e.stopPropagation();
           }}
         >
-          <button
-            title="Apply New Layout"
-            onClick={(e) => {
-              getCtx(props).setClickedNodeId(props.nodeId);
-              e.stopPropagation();
-            }}
-            onDoubleClick={(e) => {
-              getCtx(props).setClickedNodeId(props.nodeId, true);
-              e.stopPropagation();
-            }}
-            className="absolute right-2 top-2 z-10 rounded-full bg-cyan-700 p-1.5 hover:bg-black"
-          >
-            <PuzzlePieceIcon className="h-10 w-10 text-white" />
-          </button>
+          {!props.isSandboxMode && (
+            <button
+              title="Apply New Layout"
+              onClick={(e) => {
+                getCtx(props).setClickedNodeId(props.nodeId);
+                e.stopPropagation();
+              }}
+              onDoubleClick={(e) => {
+                getCtx(props).setClickedNodeId(props.nodeId, true);
+                e.stopPropagation();
+              }}
+              className="absolute right-2 top-2 z-10 rounded-full bg-cyan-700 p-1.5 hover:bg-black"
+            >
+              <PuzzlePieceIcon className="h-10 w-10 text-white" />
+            </button>
+          )}
           {codeHookPayload ? (
             <CodeHookContainer payload={codeHookPayload} />
           ) : (

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

@@ -21,9 +21,14 @@ import SaveModal from '@/components/edit/state/SaveModal';
 interface StoryKeepHeaderProps {
   slug: string;
   isContext: boolean;
+  isSandboxMode?: boolean;
 }
 
-const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
+const StoryKeepHeader = ({
+  slug,
+  isContext = false,
+  isSandboxMode = false,
+}: StoryKeepHeaderProps) => {
   const viewport = useStore(viewportModeStore);
   const pendingHomePageSlug = useStore(pendingHomePageSlugStore);
   const ctx = getCtx();
@@ -162,7 +167,7 @@ const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
           </div>
         )}
 
-        {shouldShowSave && (
+        {shouldShowSave && !isSandboxMode && (
           <div className="flex flex-wrap items-center justify-center gap-2 text-sm">
             <button
               onClick={handleSave}
@@ -179,6 +184,7 @@ const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
         isContext={isContext}
         show={showSaveModal}
         onClose={handleCloseSaveModal}
+        isSandboxMode={isSandboxMode}
       />
     </>
   );

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

@@ -52,10 +52,6 @@ const PanelSwitch = ({
 }: SettingsPanelProps) => {
   const signal = useStore(settingsPanelStore);
 
-  if (!signal) {
-    return null;
-  }
-
   useEffect(() => {
     if (signal?.action && onTitleChange) {
       const title = getSettingsPanelTitle(signal.action);
@@ -63,6 +59,10 @@ const PanelSwitch = ({
     }
   }, [signal?.action, onTitleChange]);
 
+  if (!signal) {
+    return null;
+  }
+
   const ctx = getCtx();
   const allNodes = ctx.allNodes.get();
   const clickedNode = allNodes.get(signal.nodeId) as FlatNode | undefined;

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

@@ -16,6 +16,7 @@ interface AddPanePanelProps {
   isStoryFragment?: boolean;
   isContextPane?: boolean;
   config?: BrandConfig;
+  isSandboxMode?: boolean;
 }
 
 const AddPanePanel = ({
@@ -25,6 +26,7 @@ const AddPanePanel = ({
   isStoryFragment = false,
   isContextPane = false,
   config,
+  isSandboxMode = false,
 }: AddPanePanelProps) => {
   const [reset, setReset] = useState(false);
   const lookup = first ? `${nodeId}-0` : nodeId;
@@ -66,6 +68,7 @@ const AddPanePanel = ({
           isStoryFragment={isStoryFragment}
           isContextPane={isContextPane}
           config={config!}
+          isSandboxMode={isSandboxMode}
         />
       ) : mode === PaneAddMode.BREAK && !isContextPane ? (
         <AddPaneBreakPanel