astro-tractstack 2.1.2 → 2.2.0

package/templates/src/components/edit/state/SaveToLibraryModal.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect } from 'react';
-import { CheckIcon } from '@heroicons/react/20/solid';
+import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { savePaneToLibrary } from '@/utils/compositor/designLibraryHelper';
 import { convertToBackendFormat } from '@/utils/api/brandHelpers';
 import StringInput from '@/components/form/StringInput';
@@ -165,7 +165,7 @@ export function SaveToLibraryModal({
               id="category-select"
               value={selectedCategory}
               onChange={(e) => setSelectedCategory(e.target.value)}
-              className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-cyan-500 focus:outline-none focus:ring-cyan-500"
+              className="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 md:text-sm"
             >
               {categories.map((cat) => (
                 <option key={cat} value={cat}>

package/templates/src/components/edit/storyfragment/StoryFragmentPanel_menu.tsx

@@ -282,7 +282,7 @@ const StoryFragmentMenuPanel = ({
                     />
                   </Combobox.Trigger>
                 </div>
-                <Combobox.Content className="sm:text-sm absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none md:text-sm">
                   {filteredMenus.length === 0 && query !== '' ? (
                     <div className="relative cursor-default select-none px-4 py-2 text-mydarkgrey">
                       Nothing found.

package/templates/src/components/edit/widgets/BunnyWidget.tsx

@@ -382,7 +382,7 @@ function BunnyWidget({ node, onUpdate }: BunnyWidgetProps) {
                   </Dialog.Title>
                 </div>
                 <div className="flex-1 overflow-y-auto p-4">
-                  <div className="lg:grid-cols-2 grid grid-cols-1 gap-4">
+                  <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
                     <div className="rounded-lg border border-gray-200 bg-white shadow-sm">
                       <div className="flex items-center justify-between border-b border-gray-200 p-3">
                         <h3 className="text-base font-bold text-gray-900">
@@ -433,7 +433,7 @@ function BunnyWidget({ node, onUpdate }: BunnyWidgetProps) {
                                   onBlur={() =>
                                     handleUpdate(videoId, title, chapters)
                                   }
-                                  className={`sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm ${formErrors[`title-${index}`] ? 'border-red-300' : 'focus:border-cyan-500 focus:ring-cyan-500'}`}
+                                  className={`mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm md:text-sm ${formErrors[`title-${index}`] ? 'border-red-300' : 'focus:border-cyan-500 focus:ring-cyan-500'}`}
                                 />
                               </div>
                               <div>
@@ -451,7 +451,7 @@ function BunnyWidget({ node, onUpdate }: BunnyWidgetProps) {
                                   onBlur={() =>
                                     handleUpdate(videoId, title, chapters)
                                   }
-                                  className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+                                  className="mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
                                 />
                               </div>
                               <div className="grid grid-cols-2 gap-2">
@@ -472,7 +472,7 @@ function BunnyWidget({ node, onUpdate }: BunnyWidgetProps) {
                                     onBlur={() =>
                                       handleUpdate(videoId, title, chapters)
                                     }
-                                    className={`sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm ${formErrors[`startTime-${index}`] || formErrors[`overlap-${index}`] ? 'border-red-300' : 'focus:border-cyan-500 focus:ring-cyan-500'}`}
+                                    className={`mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm md:text-sm ${formErrors[`startTime-${index}`] || formErrors[`overlap-${index}`] ? 'border-red-300' : 'focus:border-cyan-500 focus:ring-cyan-500'}`}
                                   />
                                 </div>
                                 <div>
@@ -491,7 +491,7 @@ function BunnyWidget({ node, onUpdate }: BunnyWidgetProps) {
                                     onBlur={() =>
                                       handleUpdate(videoId, title, chapters)
                                     }
-                                    className={`sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm ${formErrors[`endTime-${index}`] || formErrors[`overlap-${index}`] ? 'border-red-300' : 'focus:border-cyan-500 focus:ring-cyan-500'}`}
+                                    className={`mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm md:text-sm ${formErrors[`endTime-${index}`] || formErrors[`overlap-${index}`] ? 'border-red-300' : 'focus:border-cyan-500 focus:ring-cyan-500'}`}
                                   />
                                 </div>
                               </div>

package/templates/src/components/edit/widgets/InteractiveDisclosureWidget.tsx

@@ -621,7 +621,7 @@ export default function InteractiveDisclosureWidget({
                         <h3 className="font-bold text-gray-800">
                           Widget Styles
                         </h3>
-                        <div className="sm:grid-cols-3 grid grid-cols-1 gap-4">
+                        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
                           <div>
                             <ColorPickerCombo
                               title="Background Color"

package/templates/src/components/edit/widgets/SignupWidget.tsx

@@ -135,7 +135,7 @@ function SignupWidget({ node, onUpdate }: SignupWidgetProps) {
               />
             </Combobox.Trigger>
           </div>
-          <Combobox.Content className="sm:text-sm absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none md:text-sm">
             {collection.items.length === 0 ? (
               <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
                 Nothing found.

package/templates/src/components/fields/ActionBuilderTimeSelector.tsx

@@ -270,7 +270,7 @@ export default function ActionBuilderTimeSelector({
             </Combobox.Trigger>
           </div>
 
-          <Combobox.Content className="sm:text-sm absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none md:text-sm">
             {availableVideos.length > 0 ? (
               collection.items.length === 0 ? (
                 <div className="relative cursor-default select-none px-4 py-2 text-gray-700">

package/templates/src/components/fields/ArtpackImage.tsx

@@ -9,7 +9,7 @@ import SwatchIcon from '@heroicons/react/24/outline/SwatchIcon';
 import ChevronUpDownIcon from '@heroicons/react/24/outline/ChevronUpDownIcon';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { getCtx } from '@/stores/nodes';
-import { hasArtpacksStore } from '@/stores/storykeep';
+import { hasArtpacksStore, settingsPanelStore } from '@/stores/storykeep';
 import { cloneDeep } from '@/utils/helpers';
 import type { ArtpackImageNode, PaneNode } from '@/types/compositorTypes';
 
@@ -157,7 +157,15 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
     ctx.modifyNodes([updatedPaneNode]);
     setArtpackNode(updatedArtNode);
     setIsModalOpen(false);
+    const currentSignal = settingsPanelStore.get();
+    if (currentSignal) {
+      settingsPanelStore.set({
+        ...currentSignal,
+        editLock: Date.now(),
+      });
+    }
     onUpdate();
+    ctx.notifyNode('root');
   };
 
   const handleRemoveImage = () => {
@@ -395,7 +403,7 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
                             />
                           </Combobox.Trigger>
                         </div>
-                        <Combobox.Content className="sm:text-sm absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                        <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none md:text-sm">
                           {collection.items.length === 0 ? (
                             <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
                               No collections found.
@@ -429,7 +437,7 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
                       <label className="mb-2 block text-sm font-bold text-mydarkgrey">
                         Select Image from {selectedCollection}
                       </label>
-                      <div className="sm:grid-cols-3 grid grid-cols-2 gap-4 p-2 md:grid-cols-4">
+                      <div className="grid grid-cols-2 gap-4 p-2 md:grid-cols-3">
                         {availableImages.map((image) => (
                           <div
                             key={image}

package/templates/src/components/fields/BackgroundImage.tsx

@@ -9,6 +9,7 @@ import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import ChevronUpDownIcon from '@heroicons/react/24/outline/ChevronUpDownIcon';
 import { getCtx } from '@/stores/nodes';
 import { cloneDeep } from '@/utils/helpers';
+import { settingsPanelStore } from '@/stores/storykeep';
 import type {
   ImageFileNode,
   BgImageNode,
@@ -166,6 +167,13 @@ const BackgroundImage = ({ paneId, onUpdate }: BackgroundImageProps) => {
     ctx.modifyNodes([updatedPaneNode]);
     setBgImageNode(updatedBgNode);
     setLocalAltDescription(updatedBgNode.alt || '');
+    const currentSignal = settingsPanelStore.get();
+    if (currentSignal) {
+      settingsPanelStore.set({
+        ...currentSignal,
+        editLock: Date.now(),
+      });
+    }
     onUpdate();
     ctx.notifyNode('root');
   };

package/templates/src/components/fields/BackgroundImageWrapper.tsx

@@ -17,6 +17,7 @@ import { isArtpackImageNode } from '@/utils/compositor/typeGuards';
 
 export interface BackgroundImageWrapperProps {
   paneId: string;
+  isGrid: boolean;
 }
 
 const CheckIcon = () => (
@@ -49,7 +50,10 @@ const ChevronDownIcon = () => (
   </svg>
 );
 
-const BackgroundImageWrapper = ({ paneId }: BackgroundImageWrapperProps) => {
+const BackgroundImageWrapper = ({
+  paneId,
+  isGrid,
+}: BackgroundImageWrapperProps) => {
   const ctx = getCtx();
   const allNodes = useStore(ctx.allNodes);
   const $artpacks = useStore(hasArtpacksStore);
@@ -113,13 +117,15 @@ const BackgroundImageWrapper = ({ paneId }: BackgroundImageWrapperProps) => {
   const position = bgNode?.position || 'background';
   const size = bgNode?.size || 'equal';
 
-  const positionOptions = [
-    { label: 'Background', value: 'background' },
-    { label: 'Left', value: 'left' },
-    { label: 'Right', value: 'right' },
-    { label: 'Left Bleed', value: 'leftBleed' },
-    { label: 'Right Bleed', value: 'rightBleed' },
-  ];
+  const positionOptions = isGrid
+    ? [{ label: 'Background', value: 'background' }]
+    : [
+        { label: 'Background', value: 'background' },
+        { label: 'Left', value: 'left' },
+        { label: 'Right', value: 'right' },
+        { label: 'Left Bleed', value: 'leftBleed' },
+        { label: 'Right Bleed', value: 'rightBleed' },
+      ];
 
   const collection = useMemo(
     () =>
@@ -163,7 +169,7 @@ const BackgroundImageWrapper = ({ paneId }: BackgroundImageWrapperProps) => {
         allowNull={true}
       />
       {!bgNode && (
-        <div className="sm:flex-row flex flex-col gap-4">
+        <div className="flex flex-col gap-4 md:flex-row">
           <div className="flex-1">
             <h4 className="mb-2 text-sm font-bold text-gray-700">
               Background Image

package/templates/src/components/fields/ImageUpload.tsx

@@ -21,6 +21,8 @@ export interface ImageParams {
   srcSet?: string;
   altDescription: string;
   base64Data?: string;
+  collection?: string | null;
+  image?: string | null;
 }
 
 interface ImageUploadProps {
@@ -144,6 +146,8 @@ export const ImageUpload = ({
         src: selected.src,
         srcSet: selected.srcSet,
         altDescription: selected.altDescription || missingAlt,
+        collection: null,
+        image: null,
       });
 
       // Update the node for existing files
@@ -192,6 +196,8 @@ export const ImageUpload = ({
         fileId: ulid(),
         src: base64, // Use base64 as src for immediate display
         altDescription: defaultAlt,
+        collection: null,
+        image: null,
       });
 
       // Update the node with base64Data

package/templates/src/components/form/ActionBuilderField.tsx

@@ -15,6 +15,7 @@ interface ActionBuilderFieldProps {
   label?: string;
   error?: string;
   slug?: string;
+  restriction?: 'navigation' | 'action';
 }
 
 const parseActionLisp = (
@@ -42,6 +43,7 @@ export default function ActionBuilderField({
   label = 'Action',
   error,
   slug,
+  restriction,
 }: ActionBuilderFieldProps) {
   const [command, setCommand] = useState<ActionCommand>('goto');
   const [params, setParams] = useState('');
@@ -109,6 +111,8 @@ export default function ActionBuilderField({
   };
 
   const handleCommandChange = (newCommand: ActionCommand) => {
+    if (restriction === 'navigation' && newCommand !== 'goto') return;
+    if (restriction === 'action' && newCommand === 'goto') return;
     setCommand(newCommand);
     setParams('');
   };
@@ -183,11 +187,17 @@ export default function ActionBuilderField({
           onChange={(e) => handleCommandChange(e.target.value as ActionCommand)}
           className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700"
         >
-          {Object.entries(ACTION_COMMANDS).map(([key, data]) => (
-            <option key={key} value={key}>
-              {data.name}
-            </option>
-          ))}
+          {Object.entries(ACTION_COMMANDS)
+            .filter(([key]) => {
+              if (restriction === 'navigation') return key === 'goto';
+              if (restriction === 'action') return key !== 'goto';
+              return true;
+            })
+            .map(([key, data]) => (
+              <option key={key} value={key}>
+                {data.name}
+              </option>
+            ))}
         </select>
         <p className="mt-1 text-sm text-gray-500">
           {ACTION_COMMANDS[command]?.description}

package/templates/src/components/form/ActionBuilderSlugSelector.tsx

@@ -151,7 +151,7 @@ const ActionBuilderSlugSelector = ({
           </Combobox.Trigger>
         </div>
 
-        <Combobox.Content className="sm:text-sm absolute z-10 mt-1 max-h-60 w-full max-w-md overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full max-w-md overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none md:text-sm">
           {filteredItems.length === 0 ? (
             <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
               {query ? 'No matching items found' : 'No items available'}

package/templates/src/components/form/ColorPicker.tsx

@@ -127,7 +127,7 @@ const ColorPicker = ({
               disabled
                 ? 'cursor-not-allowed bg-gray-50 text-gray-500'
                 : 'bg-white',
-              'sm:text-sm sm:leading-6'
+              'md:text-sm md:leading-6'
             )}
           />
         </div>

package/templates/src/components/form/EnumSelect.tsx

@@ -56,7 +56,7 @@ const EnumSelect = ({
           'block w-fit min-w-48 rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset',
           error ? 'ring-red-300 focus:ring-red-500' : 'focus:ring-cyan-600',
           disabled ? 'cursor-not-allowed bg-gray-50 text-gray-500' : 'bg-white',
-          'sm:text-sm sm:leading-6'
+          'md:text-sm md:leading-6'
         )}
       >
         {(allowEmpty || !value) && (

package/templates/src/components/form/NumberInput.tsx

@@ -83,7 +83,7 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             disabled
               ? 'cursor-not-allowed bg-gray-50 text-gray-500'
               : 'bg-white',
-            'sm:text-sm sm:leading-6'
+            'md:text-sm md:leading-6'
           )}
         />
         {error && (

package/templates/src/components/form/StringArrayInput.tsx

@@ -140,7 +140,7 @@ const StringArrayInput = ({
           className={classNames(
             'block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset',
             error ? 'ring-red-300 focus:ring-red-500' : 'focus:ring-cyan-600',
-            'sm:text-sm sm:leading-6'
+            'md:text-sm md:leading-6'
           )}
         />
       )}

package/templates/src/components/form/StringInput.tsx

@@ -70,7 +70,7 @@ const StringInput = forwardRef<HTMLInputElement, StringInputProps>(
             disabled
               ? 'cursor-not-allowed bg-gray-50 text-gray-500'
               : 'bg-white',
-            'sm:text-sm sm:leading-6'
+            'md:text-sm md:leading-6'
           )}
         />
         {error && (

package/templates/src/components/form/UnsavedChangesBar.tsx

@@ -147,7 +147,7 @@ export default function UnsavedChangesBar<T>({
       <div className="absolute inset-0 bg-black/10 backdrop-blur-sm" />
 
       {/* Main content bar */}
-      <div className="sm:px-6 lg:px-8 relative mx-auto max-w-7xl px-4 py-4">
+      <div className="relative mx-auto max-w-7xl px-4 py-4 md:px-6 xl:px-8">
         <div
           className={`flex items-center justify-between rounded-lg border px-4 py-3 shadow-lg ${styling.bgColor} ${styling.borderColor}`}
         >

package/templates/src/components/form/advanced/APIConfigSection.tsx

@@ -19,8 +19,8 @@ export default function APIConfigSection({
   const aaiConfigured = status?.aaiAPIKeySet;
 
   return (
-    <div className="sm:rounded-lg bg-white shadow">
-      <div className="sm:p-6 px-4 py-5">
+    <div className="bg-white shadow md:rounded-lg">
+      <div className="px-4 py-5 md:p-6">
         <div className="flex items-center justify-between">
           <h3 className="text-base font-bold leading-6 text-gray-900">
             API Configuration

package/templates/src/components/form/advanced/AuthConfigSection.tsx

@@ -20,8 +20,8 @@ export default function AuthConfigSection({
   const editorConfigured = status?.editorPasswordSet;
 
   return (
-    <div className="sm:rounded-lg bg-white shadow">
-      <div className="sm:p-6 px-4 py-5">
+    <div className="bg-white shadow md:rounded-lg">
+      <div className="px-4 py-5 md:p-6">
         <h3 className="text-base font-bold leading-6 text-gray-900">
           Authentication Configuration
         </h3>

package/templates/src/components/profile/ProfileCreate.tsx

@@ -332,7 +332,7 @@ export const ProfileCreate = ({ onSuccess, onError }: ProfileCreateProps) => {
 
                   <Portal>
                     <Select.Positioner>
-                      <Select.Content className="sm:text-sm relative z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                      <Select.Content className="relative z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none md:text-sm">
                         {contactPersona.map((item) => (
                           <Select.Item
                             key={item.id}

package/templates/src/components/profile/ProfileEdit.tsx

@@ -294,7 +294,7 @@ export const ProfileEdit = ({ onSuccess, onError }: ProfileEditProps) => {
 
                   <Portal>
                     <Select.Positioner>
-                      <Select.Content className="sm:text-sm relative z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                      <Select.Content className="relative z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none md:text-sm">
                         {contactPersona.map((item) => (
                           <Select.Item
                             key={item.id}

package/templates/src/components/storykeep/Dashboard_Advanced.tsx

@@ -100,8 +100,8 @@ export default function StoryKeepDashboard_Advanced({
     const icon = status?.tursoEnabled ? '☁️' : '📁';
 
     return (
-      <div className="sm:rounded-lg bg-white shadow">
-        <div className="sm:p-6 px-4 py-5">
+      <div className="bg-white shadow md:rounded-lg">
+        <div className="px-4 py-5 md:p-6">
           <h3 className="text-base font-bold leading-6 text-gray-900">
             Database Configuration
           </h3>

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

@@ -288,7 +288,7 @@ export default function BeliefForm({
                 onChange={(e) => handleCustomValueChange(e.target.value)}
                 onKeyDown={handleKeyDown}
                 placeholder="Enter custom value"
-                className={`sm:text-sm sm:leading-6 block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset ${
+                className={`block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset md:text-sm md:leading-6 ${
                   customValueError
                     ? 'ring-red-500 focus:ring-red-600'
                     : 'ring-gray-300 focus:ring-cyan-600'

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

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

@@ -11,6 +11,7 @@ import { getBeliefById } from '@/utils/api/beliefConfig';
 import { getResource } from '@/utils/api/resourceConfig';
 import ContentSummary from './ContentSummary';
 import StoryFragmentTable from './StoryFragmentTable';
+import PaneTable from './PaneTable';
 import MenuTable from './MenuTable';
 import MenuForm from './MenuForm';
 import BeliefTable from './BeliefTable';
@@ -45,7 +46,7 @@ const staticContentManagementTabs: ContentManagementTab[] = [
   { id: 'menus', name: 'Menus' },
   { id: 'resources', name: 'Resources' },
   { id: 'beliefs', name: 'Beliefs' },
-  //{ id: 'panes', name: 'Panes' },
+  { id: 'panes', name: 'Panes' },
   //{ id: 'epinets', name: 'Epinets' },
   //{ id: 'files', name: 'Files' },
 ];
@@ -313,11 +314,10 @@ const ManageContent = ({
 
       case 'panes':
         return (
-          <div className="rounded-lg bg-white p-8 text-center shadow">
-            <div className="text-lg text-gray-600">
-              Panes management - Coming soon
-            </div>
-          </div>
+          <PaneTable
+            fullContentMap={currentContentMap}
+            onRefresh={refreshData}
+          />
         );
 
       case 'menus':

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

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