astro-tractstack 2.0.47 → 2.1.1

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

@@ -47,7 +47,7 @@ const ContentSummary = ({ fullContentMap }: ContentSummaryProps) => {
         <h2 className="mb-4 text-xl font-bold text-gray-900">
           Content Overview
         </h2>
-        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-8">
+        <div className="sm:grid-cols-4 lg:grid-cols-8 grid grid-cols-2 gap-4">
           <div className="text-center">
             <div className="text-2xl font-bold text-cyan-600">
               {contentStats.storyfragments}
@@ -89,7 +89,7 @@ const ContentSummary = ({ fullContentMap }: ContentSummaryProps) => {
       {/* Quick Actions */}
       <div className="rounded-lg bg-white p-6 shadow">
         <h2 className="mb-4 text-xl font-bold text-gray-900">Quick Actions</h2>
-        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+        <div className="sm:grid-cols-4 grid grid-cols-2 gap-4">
           <a
             href="/create/edit"
             className="rounded-lg border-2 border-dashed border-gray-300 p-4 text-center hover:border-cyan-500 hover:text-cyan-600"

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

@@ -195,7 +195,7 @@ const KnownResourceTable = ({
                     <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
                       {fieldCount} {fieldCount === 1 ? 'field' : 'fields'}
                     </td>
-                    <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-bold sm:pr-6">
+                    <td className="sm:pr-6 relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-bold">
                       <div className="flex items-center justify-end space-x-2">
                         {/* Edit button */}
                         <button

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

@@ -403,10 +403,10 @@ const ManageContent = ({
                 className={classNames(
                   activeTab === tab.id
                     ? tab.isResourceCategory
-                      ? 'text-mydarkgrey border-dashed border-gray-500 bg-white'
+                      ? 'border-dashed border-gray-500 bg-white text-mydarkgrey'
                       : 'border-cyan-500 bg-cyan-100 text-cyan-700'
                     : tab.isResourceCategory
-                      ? 'text-mydarkgrey border-transparent bg-orange-50 hover:bg-orange-100'
+                      ? 'border-transparent bg-orange-50 text-mydarkgrey hover:bg-orange-100'
                       : 'border-transparent bg-gray-100 text-gray-500 hover:bg-gray-200',
                   'rounded-xl border-2 px-4 py-1.5 text-sm font-bold transition-colors duration-200'
                 )}

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

@@ -212,7 +212,7 @@ export default function MenuForm({
                   </div>
                 </div>
 
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <div className="sm:grid-cols-2 grid grid-cols-1 gap-4">
                   <StringInput
                     label="Link Name"
                     value={link.name}

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="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-bold sm:pr-6">
+                  <td className="sm:pr-6 relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-bold">
                     <div className="flex items-center justify-end space-x-2">
                       {/* Edit button */}
                       <button

package/templates/src/components/widgets/Impression.tsx

@@ -82,14 +82,14 @@ const Impression = ({ payload, currentPage, config }: ImpressionProps) => {
       <h3 className="text-md font-action leading-6 text-black">
         {payload.title}
       </h3>
-      <div className="xs:flex xs:items-start xs:justify-between mt-2">
+      <div className="mt-2 xs:flex xs:items-start xs:justify-between">
         <div className="max-w-xl text-sm text-black">
           <p>
             {payload.body}
             {` `}
             <a
               onClick={() => pushEvent()}
-              className="hover:text-myorange cursor-pointer text-black underline underline-offset-4"
+              className="cursor-pointer text-black underline underline-offset-4 hover:text-myorange"
               href={actionPayload || '#'}
             >
               {payload.buttonText}

package/templates/src/components/widgets/ImpressionWrapper.tsx

@@ -126,7 +126,7 @@ const ImpressionWrapper = ({
         <button
           type="button"
           title="Click for notifications"
-          className="bg-brand-1 hover:bg-brand-3 flex h-6 w-6 items-center justify-center rounded-full text-sm font-bold text-white transition-colors motion-safe:animate-bounce"
+          className="flex h-6 w-6 items-center justify-center rounded-full bg-brand-1 text-sm font-bold text-white transition-colors hover:bg-brand-3 motion-safe:animate-bounce"
           onClick={() => setIsExpanded(true)}
         >
           <span className="sr-only">Show impressions</span>
@@ -149,7 +149,7 @@ const ImpressionWrapper = ({
           {/* Close button */}
           <button
             type="button"
-            className="focus:ring-brand-1 absolute right-2 top-2 z-10 rounded-md bg-white text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2"
+            className="absolute right-2 top-2 z-10 rounded-md bg-white text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-brand-1 focus:ring-offset-2"
             onClick={() => setIsExpanded(false)}
           >
             <span className="sr-only">Close impressions</span>

package/templates/src/hooks/useSearch.ts

@@ -42,7 +42,7 @@ export function useSearch(): UseSearchReturn {
   const [isRetrieving, setIsRetrieving] = useState(false);
   const [retrieveError, setRetrieveError] = useState<string | null>(null);
 
-  const searchTimerRef = useRef<NodeJS.Timeout>();
+  const searchTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const lastExecutionTimeRef = useRef<number>(0);
   const pendingQueryRef = useRef<string | null>(null);
   const inflightQueryRef = useRef<string | null>(null);

package/templates/src/layouts/Layout.astro

@@ -244,7 +244,7 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
       document.addEventListener('astro:page-load', updateTractstackConfig);
     </script>
   </head>
-  <body class="font-main w-full">
+  <body class="w-full font-main">
     <div class="overflow-hidden">
       {!isStoryKeep && !isEditor && <HeaderWidget tenantId={tenantId} />}
       {
@@ -271,7 +271,7 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
       </div>
       <div
         id="loading-indicator"
-        class="bg-myorange fixed left-0 top-0 h-1 w-full scale-x-0 transform transition-transform duration-300 ease-out"
+        class="fixed left-0 top-0 h-1 w-full scale-x-0 transform bg-myorange transition-transform duration-300 ease-out"
         style="opacity: 0.5; filter: blur(0.5px); z-index: 99999;"
       >
       </div>

package/templates/src/pages/[...slug]/edit.astro

@@ -162,7 +162,7 @@ for (const [key, value] of Astro.url.searchParams) {
   <section
     id="storykeepHeader"
     role="banner"
-    class="z-101 bg-mywhite left-0 right-0 drop-shadow transition-all duration-200"
+    class="left-0 right-0 z-101 bg-mywhite drop-shadow transition-all duration-200"
   >
     <StoryKeepHeader slug={slug} isContext={false} client:only="react" />
   </section>
@@ -173,7 +173,7 @@ for (const [key, value] of Astro.url.searchParams) {
 
     <!-- Main Content Area -->
     <main id="mainContent" class="relative flex-1 overflow-x-auto">
-      <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
+      <div class="h-full bg-myblue/20 bg-mylightgrey p-1.5">
         <div
           class="h-fit min-h-screen pb-96"
           style={{
@@ -199,7 +199,7 @@ for (const [key, value] of Astro.url.searchParams) {
   <!-- Floating Controls (Settings Panel & HUD OR ToolBar) -->
   <aside
     id="settingsControls"
-    class="z-101 pointer-events-none fixed bottom-16 right-2 flex flex-col items-end gap-2 md:bottom-2"
+    class="pointer-events-none fixed bottom-16 right-2 z-101 flex flex-col items-end gap-2 md:bottom-2"
   >
     <div class="pointer-events-none flex-grow"></div>
 

package/templates/src/pages/[...slug].astro

@@ -172,7 +172,7 @@ paneIds.forEach((paneId: string) => {
                     {Array.isArray(storyData.codeHookVisibility?.[paneId]) && (
                       <button
                         type="button"
-                        class="text-mydarkgrey absolute right-2 top-2 z-10 rounded-full bg-white p-1.5 hover:bg-black hover:text-white"
+                        class="absolute right-2 top-2 z-10 rounded-full bg-white p-1.5 text-mydarkgrey hover:bg-black hover:text-white"
                         title="Go Back"
                         hx-post="/api/v1/state"
                         hx-trigger="click"

package/templates/src/pages/context/[...contextSlug]/edit.astro

@@ -149,7 +149,7 @@ for (const [key, value] of Astro.url.searchParams) {
   <section
     id="storykeepHeader"
     role="banner"
-    class="z-101 bg-mywhite left-0 right-0 drop-shadow transition-all duration-200"
+    class="left-0 right-0 z-101 bg-mywhite drop-shadow transition-all duration-200"
   >
     <StoryKeepHeader slug={contextSlug} isContext={true} client:only="react" />
   </section>
@@ -160,7 +160,7 @@ for (const [key, value] of Astro.url.searchParams) {
 
     <!-- Main Content Area -->
     <main id="mainContent" class="relative flex-1 overflow-x-auto">
-      <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
+      <div class="h-full bg-myblue/20 bg-mylightgrey p-1.5">
         <div
           class="h-fit min-h-screen pb-96"
           style={{
@@ -186,7 +186,7 @@ for (const [key, value] of Astro.url.searchParams) {
   <!-- Floating Controls (Settings Panel & HUD OR ToolBar) -->
   <aside
     id="settingsControls"
-    class="z-101 pointer-events-none fixed bottom-16 right-2 flex flex-col items-end gap-2 md:bottom-2"
+    class="pointer-events-none fixed bottom-16 right-2 z-101 flex flex-col items-end gap-2 md:bottom-2"
   >
     <div class="pointer-events-none flex-grow"></div>
 

package/templates/src/pages/maint.astro

@@ -18,7 +18,7 @@ const wordmark = getAssetPath(brandConfig?.WORDMARK, '/brand/wordmark.svg');
 ---
 
 <!doctype html>
-<html lang="en" class="bg-mywhite h-full">
+<html lang="en" class="h-full bg-mywhite">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -27,7 +27,7 @@ const wordmark = getAssetPath(brandConfig?.WORDMARK, '/brand/wordmark.svg');
     <link rel="stylesheet" href="/styles/storykeep.css" />
   </head>
   <body class="h-full">
-    <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+    <div class="sm:px-6 lg:px-8 flex min-h-full flex-col justify-center py-12">
       <div class="mx-auto pb-6">
         <div class="flex flex-col items-center justify-center gap-4">
           <div class="h-16 w-auto">
@@ -47,7 +47,7 @@ const wordmark = getAssetPath(brandConfig?.WORDMARK, '/brand/wordmark.svg');
         </div>
 
         <h2
-          class="text-mydarkgrey mt-6 text-center text-2xl font-bold leading-9 tracking-tight"
+          class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-mydarkgrey"
         >
           Service Temporarily Unavailable
         </h2>
@@ -56,7 +56,7 @@ const wordmark = getAssetPath(brandConfig?.WORDMARK, '/brand/wordmark.svg');
       <div class="mx-auto">
         <div class="rounded-lg bg-white px-6 py-12 shadow-inner">
           <div class="space-y-6 text-center">
-            <div class="text-myorange mx-auto h-12 w-12">
+            <div class="mx-auto h-12 w-12 text-myorange">
               <svg
                 fill="none"
                 stroke="currentColor"
@@ -72,16 +72,16 @@ const wordmark = getAssetPath(brandConfig?.WORDMARK, '/brand/wordmark.svg');
               </svg>
             </div>
 
-            <p class="text-mydarkgrey text-sm">
+            <p class="text-sm text-mydarkgrey">
               We're experiencing technical difficulties. The service will be
               restored automatically.
             </p>
 
             <div
               id="status-indicator"
-              class="border-mylightgrey inline-flex items-center rounded-md border bg-white px-4 py-2 shadow-sm"
+              class="inline-flex items-center rounded-md border border-mylightgrey bg-white px-4 py-2 shadow-sm"
             >
-              <div class="text-myorange -ml-1 mr-3 h-5 w-5 animate-spin">
+              <div class="-ml-1 mr-3 h-5 w-5 animate-spin text-myorange">
                 <svg fill="none" viewBox="0 0 24 24">
                   <circle
                     class="opacity-25"
@@ -97,12 +97,12 @@ const wordmark = getAssetPath(brandConfig?.WORDMARK, '/brand/wordmark.svg');
                   ></path>
                 </svg>
               </div>
-              <span class="text-mydarkgrey text-sm"
+              <span class="text-sm text-mydarkgrey"
                 >Checking service status...</span
               >
             </div>
 
-            <div class="text-mylightgrey text-center text-xs">
+            <div class="text-center text-xs text-mylightgrey">
               <p>
                 This page will automatically refresh when the service is
                 available

package/templates/src/pages/sandbox.astro

@@ -48,10 +48,6 @@ const urlParams: Record<string, string | boolean> = {};
 for (const [key, value] of Astro.url.searchParams) {
   urlParams[key] = value === '' ? true : value;
 }
-
-const hasProfile = Astro.request.headers
-  .get('cookie')
-  ?.includes('tractstack_profile=true');
 ---
 
 <Layout
@@ -81,71 +77,64 @@ const hasProfile = Astro.request.headers
     menu={null}
   />
 
-  {
-    hasProfile && (
-      <>
-        <section
-          id="storykeepHeader"
-          role="banner"
-          class="z-101 bg-mywhite left-0 right-0 drop-shadow transition-all duration-200"
+  <section
+    id="storykeepHeader"
+    role="banner"
+    class="left-0 right-0 z-101 bg-mywhite drop-shadow transition-all duration-200"
+  >
+    <StoryKeepHeader
+      slug="sandbox"
+      isContext={false}
+      isSandboxMode={true}
+      client:only="react"
+    />
+  </section>
+
+  <div class="flex min-h-screen">
+    <StoryKeepToolMode isContext={false} client:only="react" />
+
+    <main id="mainContent" class="relative flex-1 overflow-x-auto">
+      <div class="h-full bg-myblue/20 bg-mylightgrey p-1.5">
+        <div
+          class="h-fit min-h-screen pb-96"
+          style={{
+            backgroundImage:
+              'repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px)',
+          }}
         >
-          <StoryKeepHeader
-            slug="sandbox"
-            isContext={false}
+          <Compositor
+            id={storyFragmentID}
+            nodes={loadData}
+            config={brandConfig}
+            fullContentMap={fullContentMap}
+            fullCanonicalURL="/sandbox"
+            urlParams={urlParams}
+            availableCodeHooks={Object.keys(codeHookComponents)}
             isSandboxMode={true}
             client:only="react"
           />
-        </section>
-
-        <div class="flex min-h-screen">
-          <StoryKeepToolMode isContext={false} client:only="react" />
-
-          <main id="mainContent" class="relative flex-1 overflow-x-auto">
-            <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
-              <div
-                class="h-fit min-h-screen pb-96"
-                style={{
-                  backgroundImage:
-                    'repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px)',
-                }}
-              >
-                <Compositor
-                  id={storyFragmentID}
-                  nodes={loadData}
-                  config={brandConfig}
-                  fullContentMap={fullContentMap}
-                  fullCanonicalURL="/sandbox"
-                  urlParams={urlParams}
-                  availableCodeHooks={Object.keys(codeHookComponents)}
-                  isSandboxMode={true}
-                  client:only="react"
-                />
-              </div>
-            </div>
-          </main>
         </div>
+      </div>
+    </main>
+  </div>
 
-        <aside
-          id="settingsControls"
-          class="z-101 pointer-events-none fixed bottom-16 right-2 flex flex-col items-end gap-2 md:bottom-2"
-        >
-          <div class="pointer-events-none flex-grow" />
+  <aside
+    id="settingsControls"
+    class="pointer-events-none fixed bottom-16 right-2 z-101 flex flex-col items-end gap-2 md:bottom-2"
+  >
+    <div class="pointer-events-none flex-grow"></div>
 
-          <div class="pointer-events-auto flex-shrink-0">
-            <StoryKeepToolBar client:only="react" />
-          </div>
+    <div class="pointer-events-auto flex-shrink-0">
+      <StoryKeepToolBar client:only="react" />
+    </div>
 
-          <div class="pointer-events-auto max-h-full">
-            <SettingsPanel
-              config={brandConfig}
-              availableCodeHooks={Object.keys(codeHookComponents)}
-              client:only="react"
-            />
-          </div>
-        </aside>
-      </>
-    )
-  }
+    <div class="pointer-events-auto max-h-full">
+      <SettingsPanel
+        availableCodeHooks={Object.keys(codeHookComponents)}
+        client:only="react"
+      />
+    </div>
+  </aside>
 </Layout>
 
 <script>

package/templates/src/pages/storykeep/login.astro

@@ -39,7 +39,7 @@ const mainStylesUrl = isDev
 ---
 
 <!doctype html>
-<html lang="en" class="bg-mywhite h-full">
+<html lang="en" class="h-full bg-mywhite">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -48,7 +48,7 @@ const mainStylesUrl = isDev
     <link rel="stylesheet" href={mainStylesUrl} />
   </head>
   <body class="h-full">
-    <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+    <div class="sm:px-6 lg:px-8 flex min-h-full flex-col justify-center py-12">
       <div class="mx-auto pb-6">
         <!-- Logo and Wordmark -->
         <div class="flex flex-col items-center justify-center gap-4">
@@ -69,7 +69,7 @@ const mainStylesUrl = isDev
         </div>
 
         <h2
-          class="text-mydarkgrey mt-6 text-center text-2xl font-bold leading-9 tracking-tight"
+          class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-mydarkgrey"
         >
           Sign in to your Storykeep
         </h2>
@@ -113,7 +113,7 @@ const mainStylesUrl = isDev
             <div>
               <label
                 for="password"
-                class="text-mydarkgrey block text-sm font-bold leading-6"
+                class="block text-sm font-bold leading-6 text-mydarkgrey"
               >
                 Password
               </label>
@@ -123,7 +123,7 @@ const mainStylesUrl = isDev
                   name="password"
                   type="password"
                   required
-                  class="text-mydarkgrey ring-mylightgrey placeholder:text-mylightgrey focus:ring-myorange block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
+                  class="sm:text-sm sm:leading-6 block w-full rounded-md border-0 px-3 py-1.5 text-mydarkgrey shadow-sm ring-1 ring-inset ring-mylightgrey placeholder:text-mylightgrey focus:ring-2 focus:ring-inset focus:ring-myorange"
                 />
               </div>
             </div>
@@ -139,7 +139,7 @@ const mainStylesUrl = isDev
               <button
                 type="button"
                 id="submitButton"
-                class="bg-myblue hover:bg-myorange focus-visible:outline-myorange flex w-full justify-center rounded-md px-3 py-1.5 text-sm font-bold leading-6 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                class="flex w-full justify-center rounded-md bg-myblue px-3 py-1.5 text-sm font-bold leading-6 text-white shadow-sm hover:bg-myorange focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-myorange"
               >
                 Sign in
               </button>

package/templates/src/types/formTypes.ts

@@ -17,8 +17,9 @@ export interface StringInputProps extends BaseFormComponentProps<string> {
 }
 
 // String array input props (for tags/chips)
-export interface StringArrayInputProps
-  extends BaseFormComponentProps<string[]> {
+export interface StringArrayInputProps extends BaseFormComponentProps<
+  string[]
+> {
   maxItems?: number;
   allowDuplicates?: boolean;
   separator?: string; // For parsing pasted content
@@ -151,8 +152,9 @@ export interface StringInputProps extends BaseFormComponentProps<string> {
 }
 
 // String array input props (for tags/chips)
-export interface StringArrayInputProps
-  extends BaseFormComponentProps<string[]> {
+export interface StringArrayInputProps extends BaseFormComponentProps<
+  string[]
+> {
   maxItems?: number;
   allowDuplicates?: boolean;
   separator?: string; // For parsing pasted content

package/templates/src/types/nodeProps.ts

@@ -1,7 +1,7 @@
-import type { MouseEvent } from 'react';
 import { NodesContext } from '@/stores/nodes';
 import type { BrandConfig } from './tractstack';
 import type { Tag } from './compositorTypes';
+import type { MouseEvent, JSX } from 'react';
 
 export interface WidgetProps {
   nodeId: string;

package/templates/src/types/tractstack.ts

@@ -66,8 +66,7 @@ export interface TractStackEvent {
 
 // Fragment component props
 export interface FragmentProps
-  extends BaseComponentProps,
-    Partial<HTMXAttributes> {
+  extends BaseComponentProps, Partial<HTMXAttributes> {
   /** Fragment ID */
   fragmentId?: string;
 

package/templates/src/utils/compositor/nodesHelper.ts

@@ -85,7 +85,7 @@ export const canEditText = (props: NodeTagProps): boolean => {
   const parentIsButton = getCtx(props).getParentNodeByTagNames(nodeId, ['a']);
   if (parentIsButton?.length > 0) return false;
 
-  if (forbiddenEditTags.has(props.tagName)) return false;
+  if (forbiddenEditTags.has(props.tagName as string)) return false;
   return true;
 };
 

package/templates/src/utils/compositor/typeGuards.ts

@@ -70,9 +70,9 @@ export const isContextPaneNode = (
 ): node is PaneNode & { isContextPane: boolean } => {
   return Boolean(
     node?.nodeType === 'Pane' &&
-      'isContextPane' in node &&
-      typeof node.isContextPane === 'boolean' &&
-      node.isContextPane
+    'isContextPane' in node &&
+    typeof node.isContextPane === 'boolean' &&
+    node.isContextPane
   );
 };