astro-tractstack 2.0.17 → 2.0.18

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;