@drawnagency/primitives 0.1.86 → 0.1.88

package/src/components/brandguide/Colors.tsx

@@ -1,11 +1,6 @@
-import { useState, useEffect } from "react";
-import { Eye, EyeOff } from "lucide-react";
-import { cn } from "../../lib/cn";
-import { containerGridClass } from "../../lib/container-grid";
-import { EditableGrid } from "../primitives/EditableGrid";
-import { EditablePlainText } from "../primitives/EditablePlainText";
 import type { ReactNode } from "react";
-import ColorSwatchSettings from "./ColorSwatchSettings";
+import ColorsView from "./ColorsView";
+import ColorsEditable from "./ColorsEditable";
 import type { ColorItem } from "../sections/Colors/schema";
 import type { SectionContent } from "../../schemas/sections";
 
@@ -20,36 +15,6 @@ interface Props {
   onDelete?: () => void;
 }
 
-function getContrastClass(hex: string | undefined): string {
-  if (!hex) return "text-white";
-  const h = hex.replace("#", "");
-  if (h.length < 6) return "text-white";
-  const r = parseInt(h.substring(0, 2), 16);
-  const g = parseInt(h.substring(2, 4), 16);
-  const b = parseInt(h.substring(4, 6), 16);
-  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-  return yiq >= 128 ? "text-black" : "text-white";
-}
-
-const createColorItem = (): ColorItem => ({
-  name: "",
-  spaces: [{ hex: "#cccccc" }],
-});
-
-function buildContent(
-  colors: ColorItem[],
-  options: { label?: string; columns?: number; collapsing?: boolean; showLabel?: boolean },
-): SectionContent {
-  const { label, columns, collapsing, showLabel } = options;
-  return {
-    type: "colors",
-    content: { colors },
-    ...(label || columns || collapsing !== undefined || showLabel !== undefined
-      ? { options: { label, columns, collapsing, showLabel } }
-      : {}),
-  };
-}
-
 export default function Colors({ colors, columns = 3, label, collapsing, showLabel = true, onChange, openModal, onDelete }: Props) {
   if (onChange && openModal) {
     return (
@@ -68,241 +33,3 @@ export default function Colors({ colors, columns = 3, label, collapsing, showLab
 
   return <ColorsView colors={colors} columns={columns} label={label} collapsing={collapsing} showLabel={showLabel} />;
 }
-
-function ColorsView({
-  colors,
-  columns,
-  label,
-  collapsing,
-  showLabel,
-}: {
-  colors: ColorItem[];
-  columns: number;
-  label?: string;
-  collapsing?: boolean;
-  showLabel?: boolean;
-}) {
-  const [expanded, setExpanded] = useState(!collapsing);
-  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
-
-  const handleCopy = (value: string, colorIndex: number) => {
-    if (navigator.clipboard?.writeText) {
-      navigator.clipboard.writeText(value);
-    } else {
-      const ta = document.createElement("textarea");
-      ta.value = value;
-      ta.style.position = "fixed";
-      ta.style.opacity = "0";
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand("copy");
-      document.body.removeChild(ta);
-    }
-    setCopiedIndex(colorIndex);
-    setTimeout(() => setCopiedIndex(null), 1500);
-  };
-
-  return (
-    <div>
-      {(showLabel && !!label || collapsing) && (
-        <div className="mb-4 flex items-center gap-2">
-          {showLabel && !!label && (
-            <span className="text-lg font-bold">{label}</span>
-          )}
-          {collapsing && (
-            <button
-              onClick={() => setExpanded(!expanded)}
-              className="cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast"
-            >
-              <span>{expanded ? "Hide Details" : "Show Details"}</span>
-              {expanded ? <EyeOff size={16} /> : <Eye size={16} />}
-            </button>
-          )}
-        </div>
-      )}
-
-      <div className="@container">
-        <div className={cn("grid gap-4", containerGridClass[columns] || containerGridClass[3])}>
-          {colors.map((color, i) => {
-            const hex = color.spaces[0]?.hex;
-            const contrast = getContrastClass(hex);
-            return (
-              <div key={i} className="flex h-full flex-col overflow-hidden rounded-outer border border-base-200">
-                <div className={cn("relative flex min-h-[80px] items-end p-3", contrast)} style={{ backgroundColor: hex || "#ccc" }}>
-                  {color.name && <span className="text-sm font-bold">{color.name}</span>}
-                  {copiedIndex === i && (
-                    <span className={cn(
-                      "absolute top-2 right-2 rounded-full px-2.5 py-0.5 text-xs font-medium",
-                      getContrastClass(hex) === "text-black" ? "bg-black/15 text-black" : "bg-white/25 text-white",
-                    )}>
-                      Copied!
-                    </span>
-                  )}
-                </div>
-                {expanded && (
-                  // flex-1 so every swatch's label block grows to the tallest in its row.
-                  <div className="flex-1 space-y-1 bg-base-accent p-3 text-sm">
-                    {color.spaces.map((space, j) =>
-                      Object.entries(space).map(([key, value]) =>
-                        value ? (
-                          <button key={`${j}-${key}`} onClick={() => handleCopy(value, i)} className="cursor-pointer flex w-full justify-between hover:text-primary">
-                            <span className="font-medium uppercase">{key}</span>
-                            <span>{value}</span>
-                          </button>
-                        ) : null
-                      )
-                    )}
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ColorsEditable({
-  colors,
-  columns,
-  label,
-  collapsing,
-  showLabel,
-  onChange,
-  openModal,
-  onDelete,
-}: {
-  colors: ColorItem[];
-  columns: number;
-  label?: string;
-  collapsing?: boolean;
-  showLabel?: boolean;
-  onChange: (content: SectionContent) => void;
-  openModal: (title: string, content: ReactNode) => void;
-  onDelete?: () => void;
-}) {
-  const [expanded, setExpanded] = useState(!collapsing);
-  const options = { label, columns, collapsing, showLabel };
-
-  // Sync expanded state when collapsing option changes via settings
-  useEffect(() => {
-    setExpanded(!collapsing);
-  }, [collapsing]);
-
-  const handleItemSettings = (index: number) => {
-    const color = colors[index];
-    openModal(
-      "Color Settings",
-      <ColorSwatchSettings color={color} onChange={(updated) => {
-        const newColors = colors.map((c, i) => (i === index ? updated : c));
-        onChange(buildContent(newColors, options));
-      }} />,
-    );
-  };
-
-  return (
-    <div>
-      {(showLabel && !!label || collapsing) && (
-        <div className="mb-4 flex items-center gap-2">
-          {showLabel && !!label && (
-            <EditablePlainText
-              tag="span"
-              value={label}
-              onChange={(newLabel) => onChange(buildContent(colors, { ...options, label: newLabel }))}
-              isEditMode={true}
-              className="text-lg font-bold"
-            />
-          )}
-          {collapsing && (
-            <button
-              onClick={() => setExpanded(!expanded)}
-              className="cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast"
-            >
-              <span>{expanded ? "Hide Details" : "Show Details"}</span>
-              {expanded ? <EyeOff size={16} /> : <Eye size={16} />}
-            </button>
-          )}
-        </div>
-      )}
-
-      <EditableGrid
-        items={colors}
-        columns={columns}
-        // Shared group lets a swatch be dragged from one colors section into another.
-        group="colors"
-        // When the last swatch is dragged out to another section, delete this now-empty one.
-        onEmptied={onDelete}
-        onChange={(newColors) => onChange(buildContent(newColors, options))}
-        createItem={createColorItem}
-        isEditMode={true}
-        onItemSettings={handleItemSettings}
-        renderItem={(color, { index }) => (
-          <ColorSwatchEditable
-            color={color}
-            index={index}
-            colors={colors}
-            options={options}
-            onChange={onChange}
-            expanded={expanded}
-          />
-        )}
-      />
-    </div>
-  );
-}
-
-function ColorSwatchEditable({
-  color,
-  index,
-  colors,
-  options,
-  onChange,
-  expanded,
-}: {
-  color: ColorItem;
-  index: number;
-  colors: ColorItem[];
-  options: { label?: string; columns?: number; collapsing?: boolean; showLabel?: boolean };
-  onChange: (content: SectionContent) => void;
-  expanded: boolean;
-}) {
-  const hex = color.spaces[0]?.hex;
-  const contrast = getContrastClass(hex);
-
-  const updateColor = (updated: ColorItem) => {
-    const newColors = colors.map((c, i) => (i === index ? updated : c));
-    onChange(buildContent(newColors, options));
-  };
-
-  return (
-    <div className="flex h-full flex-col overflow-hidden rounded-outer border border-base-200">
-      <div className={cn("flex min-h-[80px] items-end p-3", contrast)} style={{ backgroundColor: hex || "#ccc" }}>
-        <EditablePlainText
-          tag="span"
-          value={color.name || ""}
-          onChange={(name) => updateColor({ ...color, name })}
-          isEditMode={true}
-          placeholder="Color name"
-          className="text-sm font-bold"
-        />
-      </div>
-      {expanded && (
-        // flex-1 so every swatch's label block grows to the tallest in its row.
-        <div className="flex-1 space-y-1 bg-base-accent p-3 text-sm">
-          {color.spaces.map((space, j) =>
-            Object.entries(space).map(([key, value]) =>
-              value ? (
-                <div key={`${j}-${key}`} className="flex w-full justify-between">
-                  <span className="font-medium uppercase">{key}</span>
-                  <span>{value}</span>
-                </div>
-              ) : null
-            )
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-

package/src/components/brandguide/ColorsEditable.tsx

@@ -0,0 +1,155 @@
+import { useState, useEffect } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { EditableGrid } from "../primitives/EditableGrid";
+import { EditablePlainText } from "../primitives/EditablePlainText";
+import type { ReactNode } from "react";
+import ColorSwatchSettings from "./ColorSwatchSettings";
+import { getContrastClass, createColorItem } from "./colors-shared";
+import type { ColorItem } from "../sections/Colors/schema";
+import type { SectionContent } from "../../schemas/sections";
+
+export function buildContent(
+  colors: ColorItem[],
+  options: { label?: string; columns?: number; collapsing?: boolean; showLabel?: boolean },
+): SectionContent {
+  const { label, columns, collapsing, showLabel } = options;
+  return {
+    type: "colors",
+    content: { colors },
+    ...(label || columns || collapsing !== undefined || showLabel !== undefined
+      ? { options: { label, columns, collapsing, showLabel } }
+      : {}),
+  };
+}
+
+export default function ColorsEditable({
+  colors, columns, label, collapsing, showLabel, onChange, openModal, onDelete,
+}: {
+  colors: ColorItem[];
+  columns: number;
+  label?: string;
+  collapsing?: boolean;
+  showLabel?: boolean;
+  onChange: (content: SectionContent) => void;
+  openModal: (title: string, content: ReactNode) => void;
+  onDelete?: () => void;
+}) {
+  const [expanded, setExpanded] = useState(!collapsing);
+  const options = { label, columns, collapsing, showLabel };
+
+  // Sync expanded state when collapsing option changes via settings
+  useEffect(() => {
+    setExpanded(!collapsing);
+  }, [collapsing]);
+
+  const handleItemSettings = (index: number) => {
+    const color = colors[index];
+    openModal(
+      "Color Settings",
+      <ColorSwatchSettings color={color} onChange={(updated) => {
+        const newColors = colors.map((c, i) => (i === index ? updated : c));
+        onChange(buildContent(newColors, options));
+      }} />,
+    );
+  };
+
+  return (
+    <div>
+      {(showLabel && !!label || collapsing) && (
+        <div className="mb-4 flex items-center gap-2">
+          {showLabel && !!label && (
+            <EditablePlainText
+              tag="span"
+              value={label}
+              onChange={(newLabel) => onChange(buildContent(colors, { ...options, label: newLabel }))}
+              isEditMode={true}
+              className="text-lg font-bold"
+            />
+          )}
+          {collapsing && (
+            <button
+              onClick={() => setExpanded(!expanded)}
+              className="cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast"
+            >
+              <span>{expanded ? "Hide Details" : "Show Details"}</span>
+              {expanded ? <EyeOff size={16} /> : <Eye size={16} />}
+            </button>
+          )}
+        </div>
+      )}
+
+      <EditableGrid
+        items={colors}
+        columns={columns}
+        // Shared group lets a swatch be dragged from one colors section into another.
+        group="colors"
+        // When the last swatch is dragged out to another section, delete this now-empty one.
+        onEmptied={onDelete}
+        onChange={(newColors) => onChange(buildContent(newColors, options))}
+        createItem={createColorItem}
+        isEditMode={true}
+        onItemSettings={handleItemSettings}
+        renderItem={(color, { index }) => (
+          <ColorSwatchEditable
+            color={color}
+            index={index}
+            colors={colors}
+            options={options}
+            onChange={onChange}
+            expanded={expanded}
+          />
+        )}
+      />
+    </div>
+  );
+}
+
+function ColorSwatchEditable({
+  color, index, colors, options, onChange, expanded,
+}: {
+  color: ColorItem;
+  index: number;
+  colors: ColorItem[];
+  options: { label?: string; columns?: number; collapsing?: boolean; showLabel?: boolean };
+  onChange: (content: SectionContent) => void;
+  expanded: boolean;
+}) {
+  const hex = color.spaces[0]?.hex;
+  const contrast = getContrastClass(hex);
+
+  const updateColor = (updated: ColorItem) => {
+    const newColors = colors.map((c, i) => (i === index ? updated : c));
+    onChange(buildContent(newColors, options));
+  };
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden rounded-outer border border-base-200">
+      <div className={cn("flex min-h-[80px] items-end p-3", contrast)} style={{ backgroundColor: hex || "#ccc" }}>
+        <EditablePlainText
+          tag="span"
+          value={color.name || ""}
+          onChange={(name) => updateColor({ ...color, name })}
+          isEditMode={true}
+          placeholder="Color name"
+          className="text-sm font-bold"
+        />
+      </div>
+      {expanded && (
+        // flex-1 so every swatch's label block grows to the tallest in its row.
+        <div className="flex-1 space-y-1 bg-base-accent p-3 text-sm">
+          {color.spaces.map((space, j) =>
+            Object.entries(space).map(([key, value]) =>
+              value ? (
+                <div key={`${j}-${key}`} className="flex w-full justify-between">
+                  <span className="font-medium uppercase">{key}</span>
+                  <span>{value}</span>
+                </div>
+              ) : null
+            )
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/brandguide/ColorsView.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { containerGridClass } from "../../lib/container-grid";
+import { getContrastClass } from "./colors-shared";
+import type { ColorItem } from "../sections/Colors/schema";
+
+export default function ColorsView({
+  colors,
+  columns,
+  label,
+  collapsing,
+  showLabel,
+}: {
+  colors: ColorItem[];
+  columns: number;
+  label?: string;
+  collapsing?: boolean;
+  showLabel?: boolean;
+}) {
+  const [expanded, setExpanded] = useState(!collapsing);
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+
+  const handleCopy = (value: string, colorIndex: number) => {
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard.writeText(value);
+    } else {
+      const ta = document.createElement("textarea");
+      ta.value = value;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+    }
+    setCopiedIndex(colorIndex);
+    setTimeout(() => setCopiedIndex(null), 1500);
+  };
+
+  return (
+    <div>
+      {(showLabel && !!label || collapsing) && (
+        <div className="mb-4 flex items-center gap-2">
+          {showLabel && !!label && (
+            <span className="text-lg font-bold">{label}</span>
+          )}
+          {collapsing && (
+            <button
+              onClick={() => setExpanded(!expanded)}
+              className="cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast"
+            >
+              <span>{expanded ? "Hide Details" : "Show Details"}</span>
+              {expanded ? <EyeOff size={16} /> : <Eye size={16} />}
+            </button>
+          )}
+        </div>
+      )}
+
+      <div className="@container">
+        <div className={cn("grid gap-4", containerGridClass[columns] || containerGridClass[3])}>
+          {colors.map((color, i) => {
+            const hex = color.spaces[0]?.hex;
+            const contrast = getContrastClass(hex);
+            return (
+              <div key={i} className="flex h-full flex-col overflow-hidden rounded-outer border border-base-200">
+                <div className={cn("relative flex min-h-[80px] items-end p-3", contrast)} style={{ backgroundColor: hex || "#ccc" }}>
+                  {color.name && <span className="text-sm font-bold">{color.name}</span>}
+                  {copiedIndex === i && (
+                    <span className={cn(
+                      "absolute top-2 right-2 rounded-full px-2.5 py-0.5 text-xs font-medium",
+                      getContrastClass(hex) === "text-black" ? "bg-black/15 text-black" : "bg-white/25 text-white",
+                    )}>
+                      Copied!
+                    </span>
+                  )}
+                </div>
+                {expanded && (
+                  // flex-1 so every swatch's label block grows to the tallest in its row.
+                  <div className="flex-1 space-y-1 bg-base-accent p-3 text-sm">
+                    {color.spaces.map((space, j) =>
+                      Object.entries(space).map(([key, value]) =>
+                        value ? (
+                          <button key={`${j}-${key}`} onClick={() => handleCopy(value, i)} className="cursor-pointer flex w-full justify-between hover:text-primary">
+                            <span className="font-medium uppercase">{key}</span>
+                            <span>{value}</span>
+                          </button>
+                        ) : null
+                      )
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/brandguide/colors-shared.ts

@@ -0,0 +1,17 @@
+import type { ColorItem } from "../sections/Colors/schema";
+
+export function getContrastClass(hex: string | undefined): string {
+  if (!hex) return "text-white";
+  const h = hex.replace("#", "");
+  if (h.length < 6) return "text-white";
+  const r = parseInt(h.substring(0, 2), 16);
+  const g = parseInt(h.substring(2, 4), 16);
+  const b = parseInt(h.substring(4, 6), 16);
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+  return yiq >= 128 ? "text-black" : "text-white";
+}
+
+export const createColorItem = (): ColorItem => ({
+  name: "",
+  spaces: [{ hex: "#cccccc" }],
+});

package/src/components/sections/Colors/index.tsx

@@ -24,6 +24,7 @@ const schema = z.object({
 
 export default defineSection({
   type: "colors",
+  interactive: true,
   category: "brand-guide",
   label: "Colors",
   icon: <Palette size={18} />,

package/src/components/sections/SectionIsland.tsx

@@ -0,0 +1,21 @@
+import { ensureSectionsRegistered } from "./register";
+import { getSection } from "../../lib/registry";
+
+// Registering on import means the registry is populated both during SSR of the
+// island and after it hydrates client-side (register runs again in the browser
+// bundle; the Symbol.for-keyed singleton dedupes).
+ensureSectionsRegistered();
+
+interface Props {
+  type: string;
+  content: unknown;
+  options?: Record<string, unknown>;
+}
+
+export default function SectionIsland({ type, content, options }: Props) {
+  const def = getSection(type);
+  if (!def) return null;
+  const Component = def.component;
+  // Viewer mode: no onChange / openModal callbacks -> the view (not editable) path.
+  return <Component content={content} options={options} isEditMode={false} />;
+}

package/src/components/shared/Navigation.tsx

@@ -14,12 +14,13 @@ interface Props {
   siteName: string;
   darkMode: "light" | "dark" | "optional";
   lastUpdated: string | null;
+  logo?: { lightUrl: string; darkUrl: string | null; invertInDark: boolean } | null;
   // Optional same-island handler (tests). In production the editor nav is a
   // separate island from EditorShell, so a click dispatches pageSelectEvent.
   onPageSelect?: (pageId: string) => void;
 }
 
-export default function Navigation({ siteNav: initialNav, siteName, darkMode, lastUpdated, onPageSelect }: Props) {
+export default function Navigation({ siteNav: initialNav, siteName, darkMode, lastUpdated, logo, onPageSelect }: Props) {
   const [isOpen, setIsOpen] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
   const [currentDarkMode, setCurrentDarkMode] = useState(darkMode);
@@ -135,6 +136,19 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
     </ul>
   );
 
+  const logoMark = logo ? (
+    <>
+      <img
+        src={logo.lightUrl}
+        alt={currentSiteName}
+        className={logo.darkUrl ? "block h-8 w-auto object-contain dark:hidden" : logo.invertInDark ? "h-8 w-auto object-contain dark:invert" : "h-8 w-auto object-contain"}
+      />
+      {logo.darkUrl && (
+        <img src={logo.darkUrl} alt={currentSiteName} className="hidden h-8 w-auto object-contain dark:block" />
+      )}
+    </>
+  ) : null;
+
   const handlePageClick = useCallback((id: string) => {
     if (onPageSelect) onPageSelect(id);
     else pageSelectEvent.dispatch(id);
@@ -193,7 +207,10 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
     <>
       <header className="fixed top-0 left-0 right-0 z-50 bg-base lg:hidden">
         <div className="mx-auto max-w-screen-xl flex h-16 items-center justify-between px-4">
-          <span className="text-lg font-bold text-primary">{currentSiteName}</span>
+          <div className="flex flex-col items-start gap-1">
+            {logoMark}
+            <span className="text-lg font-bold text-primary">{currentSiteName}</span>
+          </div>
           <button onClick={() => setIsOpen(!isOpen)} className="cursor-pointer p-2 text-base-contrast" aria-label="Toggle navigation">
             <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
               {isOpen
@@ -209,6 +226,7 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
       <nav className={cn("fixed top-0 left-0 lg:left-auto z-40 h-full w-64 flex flex-col overflow-y-auto border-r border-base-200 bg-base pt-16 transition-transform lg:translate-x-0 nav-sidebar",
         isOpen ? "translate-x-0" : "-translate-x-full")}>
         <div className="hidden px-4 py-4 lg:block">
+          {logoMark}
           <span className="text-lg font-bold text-primary">{currentSiteName}</span>
         </div>
 

package/src/components/shell/EditorShell.tsx

@@ -363,6 +363,10 @@ export default function EditorShell({
     markSectionDirty: persistence.markSectionDirty,
     onUploadError: (message) => setUploadErrorMessage(message),
     onUploadNotice: setUploadNotice,
+    onSiteConfigChange: (updater) => {
+      if (!siteConfig) return;
+      handleSiteConfigChange(updater(siteConfig));
+    },
   });
 
   const buildStatus = useBuildStatus();