astro-tractstack 2.0.16 → 2.0.18

package/templates/src/components/edit/pane/steps/DirectInjectStep.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { parseAiPane } from '@/utils/compositor/aiPaneParser';
+import type { TemplatePane } from '@/types/compositorTypes';
+
+interface DirectInjectStepProps {
+  onBack: () => void;
+  onCreatePane: (template: TemplatePane) => void;
+}
+
+export const DirectInjectStep = ({
+  onBack,
+  onCreatePane,
+}: DirectInjectStepProps) => {
+  const [shellJson, setShellJson] = useState('');
+  const [copyHtml, setCopyHtml] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCreate = () => {
+    setError(null);
+    if (!shellJson.trim() || !copyHtml.trim()) {
+      setError('Both Shell JSON and Inner HTML must be provided.');
+      return;
+    }
+
+    try {
+      const finalPane = parseAiPane(shellJson, copyHtml, 'DirectInject');
+      onCreatePane(finalPane);
+    } catch (err: any) {
+      console.error('Direct Inject Error:', err);
+      setError(
+        `Failed to parse inputs: ${err.message || 'Unknown error'}. Check console.`
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-6 p-4">
+      <div className="space-y-4">
+        <div>
+          <label
+            htmlFor="shellJson"
+            className="block text-sm font-bold text-gray-700"
+          >
+            Shell JSON
+          </label>
+          <textarea
+            id="shellJson"
+            rows={10}
+            value={shellJson}
+            onChange={(e) => setShellJson(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 p-2 font-mono text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            placeholder={`{ "bgColour": "#ffffff", "parentClasses": [...], "defaultClasses": {...} }`}
+          />
+        </div>
+        <div>
+          <label
+            htmlFor="copyHtml"
+            className="block text-sm font-bold text-gray-700"
+          >
+            Inner HTML
+          </label>
+          <textarea
+            id="copyHtml"
+            rows={10}
+            value={copyHtml}
+            onChange={(e) => setCopyHtml(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 p-2 font-mono text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            placeholder={`<h2 class="...">...</h2>\n<p class="...">...</p>`}
+          />
+        </div>
+      </div>
+
+      {error && (
+        <div className="rounded-md bg-red-50 p-4">
+          <p className="text-sm font-bold text-red-800">{error}</p>
+        </div>
+      )}
+
+      <div className="flex justify-between">
+        <button
+          onClick={onBack}
+          className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 shadow-sm hover:bg-gray-50"
+        >
+          ← Back
+        </button>
+        <button
+          onClick={handleCreate}
+          disabled={!shellJson.trim() || !copyHtml.trim()}
+          className="rounded-md bg-cyan-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-700 disabled:cursor-not-allowed disabled:bg-gray-400"
+        >
+          Create Pane
+        </button>
+      </div>
+    </div>
+  );
+};

package/templates/src/components/edit/panels/StyleElementPanel.tsx

@@ -5,18 +5,22 @@ import {
   settingsPanelStore,
 } from '@/stores/storykeep';
 import { StylesMemory } from '@/components/edit/state/StylesMemory';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import { tagTitles } from '@/types/compositorTypes';
 import type {
   Tag,
   FlatNode,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 
-interface StyleElementPanelProps {
+export interface StyleElementPanelProps {
   node: FlatNode;
-  parentNode: MarkdownPaneFragmentNode;
+  parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
   onTitleChange?: (title: string) => void;
 }
 
@@ -25,7 +29,10 @@ const StyleElementPanel = ({
   parentNode,
   onTitleChange,
 }: StyleElementPanelProps) => {
-  if (!node?.tagName || !isMarkdownPaneFragmentNode(parentNode)) {
+  if (
+    !node?.tagName ||
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
+  ) {
     return null;
   }
 

package/templates/src/components/edit/panels/StyleElementPanel_add.tsx

@@ -9,13 +9,13 @@ import {
   settingsPanelStore,
 } from '@/stores/storykeep';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
-import { useDropdownDirection } from '@/utils/helpers';
 import {
-  tagTitles,
-  type Tag,
-  type BasePanelProps,
-} from '@/types/compositorTypes';
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
+import { useDropdownDirection } from '@/utils/helpers';
+import type { StyleElementPanelProps } from './StyleElementPanel';
+import { tagTitles, type Tag } from '@/types/compositorTypes';
 
 const RECOMMENDED_STYLES: {
   [key: string]: Array<{ key: string; title: string }>;
@@ -123,7 +123,7 @@ const StyleElementPanelAdd = ({
   node,
   parentNode,
   onTitleChange,
-}: BasePanelProps) => {
+}: StyleElementPanelProps) => {
   const [query, setQuery] = useState('');
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
@@ -134,7 +134,7 @@ const StyleElementPanelAdd = ({
     !node ||
     !node.tagName ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   ) {
     return null;
   }

package/templates/src/components/edit/panels/StyleElementPanel_remove.tsx

@@ -6,22 +6,32 @@ import {
 } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 import { tagTitles } from '@/types/compositorTypes';
 import type {
   Tag,
-  BasePanelProps,
   FlatNode,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 
+export interface StyleElementRemovePanelProps {
+  node: FlatNode;
+  parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
+  className: string;
+  onTitleChange?: (title: string) => void;
+}
+
 const StyleElementRemovePanel = ({
   node,
   parentNode,
   className,
   onTitleChange,
-}: BasePanelProps) => {
+}: StyleElementRemovePanelProps) => {
   if (!className || !node?.tagName) return null;
 
   const friendlyName = tailwindClasses[className]?.title || className;
@@ -40,7 +50,7 @@ const StyleElementRemovePanel = ({
       !node ||
       !className ||
       !parentNode ||
-      !isMarkdownPaneFragmentNode(parentNode)
+      (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
     ) {
       console.error('Missing required properties for class removal');
       return;

package/templates/src/components/edit/panels/StyleElementPanel_update.tsx

@@ -7,15 +7,27 @@ import {
 import ViewportComboBox from '@/components/fields/ViewportComboBox';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import { getCtx } from '@/stores/nodes';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 import { tagTitles } from '@/types/compositorTypes';
 import type {
   Tag,
-  BasePanelProps,
   FlatNode,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
+import type { BrandConfig } from '@/types/tractstack';
+
+export interface StyleElementUpdatePanelProps {
+  node: FlatNode;
+  parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
+  className: string;
+  onTitleChange?: (title: string) => void;
+  config?: BrandConfig | null;
+}
 
 const StyleElementUpdatePanel = ({
   node,
@@ -23,12 +35,12 @@ const StyleElementUpdatePanel = ({
   className,
   onTitleChange,
   config,
-}: BasePanelProps) => {
+}: StyleElementUpdatePanelProps) => {
   if (
     !node ||
     !className ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   )
     return null;
 

package/templates/src/components/edit/panels/StyleImagePanel.tsx

@@ -2,20 +2,24 @@ import { useMemo, useState } from 'react';
 import { getCtx } from '@/stores/nodes';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { cloneDeep } from '@/utils/helpers';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { StylesMemory } from '@/components/edit/state/StylesMemory';
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import ImageUpload, { type ImageParams } from '@/components/fields/ImageUpload';
 import type {
   FlatNode,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 
 interface StyleImagePanelProps {
   node: FlatNode;
   containerNode: FlatNode;
   outerContainerNode: FlatNode;
-  parentNode: MarkdownPaneFragmentNode;
+  parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
 }
 
 const StyleImagePanel = ({
@@ -24,6 +28,7 @@ const StyleImagePanel = ({
   outerContainerNode,
   parentNode,
 }: StyleImagePanelProps) => {
+  console.log(`StyleImagePanel`, parentNode, node);
   const [altDescription, setAltDescription] = useState(node.alt || '');
 
   const imgDefaultClasses = parentNode.defaultClasses?.[node.tagName];
@@ -300,7 +305,7 @@ const StyleImagePanel = ({
     !node?.tagName ||
     !containerNode?.tagName ||
     !outerContainerNode?.tagName ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   ) {
     return null;
   }

package/templates/src/components/edit/panels/StyleImagePanel_add.tsx

@@ -6,7 +6,10 @@ import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { useDropdownDirection } from '@/utils/helpers';
 import type { BasePanelProps } from '@/types/compositorTypes';
 
@@ -77,7 +80,11 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
   const comboboxRef = useRef<HTMLDivElement>(null);
   const { openAbove } = useDropdownDirection(comboboxRef);
 
-  if (!node?.tagName || !parentNode || !isMarkdownPaneFragmentNode(parentNode))
+  if (
+    !node?.tagName ||
+    !parentNode ||
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
+  )
     return null;
 
   const isOuterContainer = node.tagName === 'ul' || node.tagName === 'ol';

package/templates/src/components/edit/panels/StyleImagePanel_remove.tsx

@@ -2,7 +2,10 @@ import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import type { FlatNode, BasePanelProps } from '@/types/compositorTypes';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 
 const StyleImageRemovePanel = ({
@@ -15,7 +18,7 @@ const StyleImageRemovePanel = ({
     !className ||
     !node?.tagName ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   ) {
     return null;
   }

package/templates/src/components/edit/panels/StyleImagePanel_update.tsx

@@ -3,7 +3,10 @@ import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import ViewportComboBox from '@/components/fields/ViewportComboBox';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 import type {
   BasePanelProps,
@@ -22,7 +25,7 @@ const StyleImageUpdatePanel = ({
     !node ||
     !className ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   )
     return null;
 

package/templates/src/components/edit/panels/StyleLiElementPanel.tsx

@@ -1,6 +1,9 @@
 import { useMemo } from 'react';
 import { settingsPanelStore } from '@/stores/storykeep';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import { StylesMemory } from '@/components/edit/state/StylesMemory';
 import { tagTitles } from '@/types/compositorTypes';
@@ -8,12 +11,13 @@ import type {
   Tag,
   FlatNode,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 
 interface StyleLiElementPanelProps {
   node: FlatNode;
   outerContainerNode: FlatNode;
-  parentNode: MarkdownPaneFragmentNode;
+  parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
 }
 
 const StyleLiElementPanel = ({
@@ -24,7 +28,7 @@ const StyleLiElementPanel = ({
   if (
     !node?.tagName ||
     !outerContainerNode?.tagName ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   ) {
     return null;
   }

package/templates/src/components/edit/panels/StyleLiElementPanel_add.tsx

@@ -6,7 +6,10 @@ import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { useDropdownDirection } from '@/utils/helpers';
 import type { BasePanelProps, FlatNode } from '@/types/compositorTypes';
 
@@ -70,7 +73,11 @@ const StyleLiElementAddPanel = ({
   const comboboxRef = useRef<HTMLDivElement>(null);
   const { openAbove } = useDropdownDirection(comboboxRef);
 
-  if (!node?.tagName || !parentNode || !isMarkdownPaneFragmentNode(parentNode))
+  if (
+    !node?.tagName ||
+    !parentNode ||
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
+  )
     return null;
 
   const isContainer = node.tagName === 'ul' || node.tagName === 'ol';

package/templates/src/components/edit/panels/StyleLiElementPanel_remove.tsx

@@ -1,7 +1,10 @@
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 import type {
   BasePanelProps,
@@ -19,7 +22,7 @@ const StyleLiElementRemovePanel = ({
     !className ||
     !node?.tagName ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   )
     return null;
 

package/templates/src/components/edit/panels/StyleLiElementPanel_update.tsx

@@ -3,7 +3,10 @@ import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import ViewportComboBox from '@/components/fields/ViewportComboBox';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 import type {
   BasePanelProps,
@@ -22,7 +25,7 @@ const StyleLiElementUpdatePanel = ({
     !node ||
     !className ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   )
     return null;