astro-tractstack 2.0.0-rc.32 → 2.0.0-rc.33

package/dist/index.js

@@ -1028,6 +1028,12 @@ async function w(t, e, c) {
       dest: "src/components/form/advanced/APIConfigSection.tsx"
     },
     // StoryKeep Dashboard Components
+    {
+      src: t(
+        "../templates/src/components/storykeep/StoryKeepBackdrop.astro"
+      ),
+      dest: "src/components/storykeep/StoryKeepBackdrop.astro"
+    },
     {
       src: t("../templates/src/components/storykeep/Dashboard.tsx"),
       dest: "src/components/storykeep/Dashboard.tsx"

package/package.json

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

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

@@ -1,10 +1,12 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { useStore } from '@nanostores/react';
+import { Select } from '@ark-ui/react/select';
+import { createListCollection } from '@ark-ui/react/collection';
 import BackgroundImage from './BackgroundImage';
 import ArtpackImage from './ArtpackImage';
 import ColorPickerCombo from './ColorPickerCombo';
 import { getCtx } from '@/stores/nodes';
-import { hasArtpacksStore } from '@/stores/storykeep';
+import { hasArtpacksStore, settingsPanelStore } from '@/stores/storykeep';
 import { cloneDeep } from '@/utils/helpers';
 import type { BrandConfig } from '@/types/tractstack';
 import type {
@@ -19,6 +21,36 @@ export interface BackgroundImageWrapperProps {
   config?: BrandConfig;
 }
 
+const CheckIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-5 w-5"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fillRule="evenodd"
+      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+const ChevronDownIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-5 w-5"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fillRule="evenodd"
+      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
 const BackgroundImageWrapper = ({
   paneId,
   config,
@@ -27,11 +59,8 @@ const BackgroundImageWrapper = ({
   const allNodes = useStore(ctx.allNodes);
   const $artpacks = useStore(hasArtpacksStore);
   const hasArtpacks = $artpacks && Object.keys($artpacks).length > 0;
-
-  // State to force re-renders when child components need it
   const [, setUpdateCounter] = useState(0);
 
-  // Using useCallback to create a stable reference to the update function
   const onUpdate = useCallback(() => {
     setUpdateCounter((prev) => prev + 1);
   }, []);
@@ -89,8 +118,47 @@ const BackgroundImageWrapper = ({
   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 collection = useMemo(
+    () =>
+      createListCollection({
+        items: positionOptions,
+        itemToValue: (item) => item.value,
+        itemToString: (item) => item.label,
+      }),
+    []
+  );
+
+  const selectItemStyles = `
+    .position-item[data-highlighted] {
+      background-color: #0891b2; /* bg-cyan-600 */
+      color: white;
+    }
+    .position-item[data-highlighted] .position-indicator {
+      color: white;
+    }
+    .position-item[data-state="checked"] .position-indicator {
+      display: flex;
+    }
+    .position-item .position-indicator {
+      display: none;
+    }
+    .position-item[data-state="checked"] {
+      font-weight: bold;
+    }
+  `;
+
   return (
     <div className="w-full space-y-6">
+      <style>{selectItemStyles}</style>
+
       <h3 className="text-sm font-bold text-gray-700">Background</h3>
 
       <ColorPickerCombo
@@ -115,39 +183,64 @@ const BackgroundImageWrapper = ({
       )}
       {bgNode && (
         <div className="w-full space-y-6">
-          {/* Position Toggle */}
           <div className="space-y-2">
-            <label className="block text-sm font-bold text-gray-700">
-              Position
-            </label>
-            <div className="flex flex-wrap space-x-4">
-              {(
-                [
-                  'background',
-                  'left',
-                  'right',
-                  'leftBleed',
-                  'rightBleed',
-                ] as const
-              ).map((pos) => (
-                <label key={pos} className="inline-flex items-center">
-                  <input
-                    type="radio"
-                    name="position"
-                    value={pos}
-                    checked={position === pos}
-                    onChange={() => handlePositionChange(pos)}
-                    className="text-myblue focus:ring-myblue h-4 w-4 border-gray-300"
+            <Select.Root
+              collection={collection}
+              positioning={{ sameWidth: true }}
+              value={[position]}
+              onValueChange={(details) => {
+                const currentSignal = settingsPanelStore.get();
+                if (currentSignal) {
+                  settingsPanelStore.set({
+                    ...currentSignal,
+                    editLock: Date.now(),
+                  });
+                }
+                handlePositionChange(
+                  details.value[0] as
+                    | 'background'
+                    | 'left'
+                    | 'right'
+                    | 'leftBleed'
+                    | 'rightBleed'
+                );
+              }}
+            >
+              <Select.Label className="block text-sm font-bold text-gray-700">
+                Position
+              </Select.Label>
+              <Select.Control>
+                <Select.Trigger className="focus:border-myblue focus:ring-myblue flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1">
+                  <Select.ValueText
+                    className="capitalize"
+                    placeholder="Select a position"
                   />
-                  <span className="ml-2 text-sm capitalize text-gray-700">
-                    {pos}
-                  </span>
-                </label>
-              ))}
-            </div>
+                  <Select.Indicator>
+                    <ChevronDownIcon />
+                  </Select.Indicator>
+                </Select.Trigger>
+              </Select.Control>
+              <Select.Positioner>
+                <Select.Content className="z-10 mt-1 w-full rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                  <Select.ItemGroup>
+                    {collection.items.map((item) => (
+                      <Select.Item
+                        key={item.value}
+                        item={item}
+                        className="position-item relative cursor-pointer select-none py-2 pl-10 pr-4 text-sm text-gray-900"
+                      >
+                        <Select.ItemText>{item.label}</Select.ItemText>
+                        <Select.ItemIndicator className="position-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
+                          <CheckIcon />
+                        </Select.ItemIndicator>
+                      </Select.Item>
+                    ))}
+                  </Select.ItemGroup>
+                </Select.Content>
+              </Select.Positioner>
+            </Select.Root>
           </div>
 
-          {/* Size Toggle - Only show when position is left or right */}
           {position !== 'background' && (
             <div className="space-y-2">
               <label className="block text-sm font-bold text-gray-700">
@@ -177,7 +270,6 @@ const BackgroundImageWrapper = ({
             </div>
           )}
 
-          {/* Render the appropriate image component */}
           {isArtpackImageNode(bgNode) ? (
             <ArtpackImage paneId={paneId} onUpdate={onUpdate} />
           ) : (

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

@@ -202,7 +202,9 @@ export default function ActionBuilderField({
                 onChange={(e) => {
                   const newValue = e.target.value;
                   setParam1(newValue);
-                  updateValue(selectedTarget, '', newValue);
+                }}
+                onBlur={(e) => {
+                  updateValue(selectedTarget, '', e.target.value);
                 }}
                 placeholder="https://..."
                 className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700"

package/templates/src/components/storykeep/StoryKeepBackdrop.astro

@@ -0,0 +1,86 @@
+---
+let MODE = 'logo'; // 'wordmark' | 'logo'
+
+interface Props {
+  brandConfig: {
+    LOGO?: string;
+    WORDMARK?: string;
+  };
+}
+
+const { brandConfig } = Astro.props;
+
+const getAssetPath = (
+  configPath: string | undefined,
+  fallback: string
+): string => {
+  if (configPath && configPath !== '') {
+    return configPath;
+  }
+  return fallback;
+};
+
+let assetUrl;
+if (MODE === `wordmark`)
+  assetUrl = getAssetPath(brandConfig?.WORDMARK, '/brand/wordmark.svg');
+else assetUrl = getAssetPath(brandConfig?.LOGO, '/brand/logo.svg');
+
+// Generate positions programmatically for triple density
+const generatePositions = () => {
+  const positions = [];
+  const rows = 15; // More rows to extend beyond boundaries
+  const cols = 12; // More cols to extend beyond boundaries
+
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      // Skip some positions for natural spacing
+      if ((row + col) % 3 !== 0) continue;
+
+      // Allow logos to extend beyond container edges (no margins)
+      const top = (row / (rows - 1)) * 120 - 10; // Extend 10% beyond top/bottom
+      const left = (col / (cols - 1)) * 120 - 10; // Extend 10% beyond left/right
+      const rotation = -45 + Math.random() * 90;
+
+      positions.push({
+        top: `${top}%`,
+        left: `${left}%`,
+        rotation: `${rotation}deg`,
+      });
+    }
+  }
+
+  return positions;
+};
+
+const logoPositions = generatePositions();
+---
+
+{
+  assetUrl && (
+    <div
+      class="pointer-events-none absolute overflow-hidden rounded-2xl p-1.5 md:p-3.5"
+      style={{
+        top: '2rem',
+        left: '64rem',
+        right: '0',
+        bottom: '3.5rem',
+        opacity: '0.85',
+        //filter: 'grayscale(1)',
+      }}
+    >
+      {logoPositions.map((position) => (
+        <img
+          src={assetUrl}
+          style={{
+            position: 'absolute',
+            top: position.top,
+            left: position.left,
+            width: '120px',
+            height: 'auto',
+            transform: `rotate(${position.rotation})`,
+          }}
+        />
+      ))}
+    </div>
+  )
+}

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

@@ -1,5 +1,6 @@
 ---
 import Layout from '@/layouts/Layout.astro';
+import StoryKeepBackdrop from '@/components/storykeep/StoryKeepBackdrop.astro';
 import StoryKeepDashboard from '@/components/storykeep/Dashboard';
 import StoryKeepDashboard_Advanced from '@/components/storykeep/Dashboard_Advanced';
 import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
@@ -53,6 +54,7 @@ try {
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
   <main id="main-content" class="min-h-screen w-full">
+    <StoryKeepBackdrop brandConfig={brandConfig} />
     <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"

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

@@ -1,5 +1,6 @@
 ---
 import Layout from '@/layouts/Layout.astro';
+import StoryKeepBackdrop from '@/components/storykeep/StoryKeepBackdrop.astro';
 import BrandingPageWrapper from '@/components/storykeep/state/BrandingWrapper';
 import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
 import { getFullContentMap } from '@/stores/analytics';
@@ -42,6 +43,7 @@ try {
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
   <main id="main-content" class="min-h-screen w-full">
+    <StoryKeepBackdrop brandConfig={brandConfig} />
     <div class="max-w-5xl p-3.5 md:p-8">
       <BrandingPageWrapper
         client:only="react"

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

@@ -1,5 +1,6 @@
 ---
 import Layout from '@/layouts/Layout.astro';
+import StoryKeepBackdrop from '@/components/storykeep/StoryKeepBackdrop.astro';
 import StoryKeepDashboard from '@/components/storykeep/Dashboard';
 import StoryKeepDashboard_Content from '@/components/storykeep/Dashboard_Content';
 import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
@@ -49,6 +50,7 @@ try {
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
   <main id="main-content" class="min-h-screen w-full">
+    <StoryKeepBackdrop brandConfig={brandConfig} />
     <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"

package/templates/src/pages/storykeep.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '@/layouts/Layout.astro';
+import StoryKeepBackdrop from '@/components/storykeep/StoryKeepBackdrop.astro';
 import StoryKeepDashboard from '@/components/storykeep/Dashboard';
 import StoryKeepDashboard_Analytics from '@/components/storykeep/Dashboard_Analytics';
 import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
@@ -50,7 +51,8 @@ try {
 ---
 
 <Layout title={title} isStoryKeep={true} slug="storykeep">
-  <main id="main-content" class="min-h-screen w-full">
+  <main id="main-content" class="relative min-h-screen w-full">
+    <StoryKeepBackdrop brandConfig={brandConfig} />
     <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"

package/templates/src/stores/nodes.ts

@@ -340,6 +340,18 @@ export class NodesContext {
         handleClickEventDefault(node, dblClick, this.clickedParentLayer.get());
         break;
       case `text`:
+        if (
+          node.nodeType === 'TagElement' &&
+          'tagName' in node &&
+          (node.tagName === 'a' || node.tagName === 'button')
+        ) {
+          this.toolModeValStore.set({ value: 'styles' });
+          handleClickEventDefault(
+            node,
+            dblClick,
+            this.clickedParentLayer.get()
+          );
+        }
         if (dblClick && ![`Markdown`].includes(node.nodeType)) {
           this.toolModeValStore.set({ value: 'styles' });
           handleClickEventDefault(

package/utils/inject-files.ts

@@ -1046,6 +1046,12 @@ export async function injectTemplateFiles(
     },
 
     // StoryKeep Dashboard Components
+    {
+      src: resolve(
+        '../templates/src/components/storykeep/StoryKeepBackdrop.astro'
+      ),
+      dest: 'src/components/storykeep/StoryKeepBackdrop.astro',
+    },
     {
       src: resolve('../templates/src/components/storykeep/Dashboard.tsx'),
       dest: 'src/components/storykeep/Dashboard.tsx',