@jimmy_harika/websitekit 0.5.4 → 0.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jimmy_harika/websitekit",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "Snow Labs website builder engine. Block-agnostic, curated-section. One shared builder across every Snow Labs app — engine + design-system-agnostic blocks + per-industry catalogs (author, photographer, …). Each app plugs in a catalog + theme + persistence adapter.",
   "license": "UNLICENSED",
   "private": false,

package/src/editor/Canvas.tsx

@@ -89,7 +89,7 @@ export function Canvas({ catalog }: { catalog: Catalog }) {
                 e.stopPropagation();
                 ui.openLibrary(0);
               }}
-              className="flex min-h-[60vh] w-full flex-col items-center justify-center gap-3 text-muted-foreground/70 transition hover:text-sky-500"
+              className="flex min-h-[60vh] w-full flex-col items-center justify-center gap-3 text-muted-foreground/70 transition hover:text-primary"
             >
               <span className="flex size-12 items-center justify-center rounded-full border-2 border-dashed border-current">
                 <Plus className="size-6" />

package/src/editor/EditorDock.tsx

@@ -9,29 +9,42 @@ import type { ReactNode } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn";
 
+export type EditorDockSize = "default" | "wide" | "xl";
+
+const DOCK_WIDTH: Record<EditorDockSize, string> = {
+  default: "w-[min(22rem,100vw)]",
+  wide: "w-[min(32rem,100vw)]",
+  xl: "w-[min(40rem,100vw)]",
+};
+
 export function EditorDock({
   title,
   subtitle,
   onClose,
   children,
   wide,
+  size,
   className,
 }: {
   title: string;
   subtitle?: string;
   onClose?: () => void;
   children: ReactNode;
-  /** Wider dock for Add Block library (~28rem default, ~36rem wide). */
+  /** @deprecated Prefer `size`. Wider dock for Add Block library. */
   wide?: boolean;
+  /** default ~22rem · wide ~32rem · xl ~40rem (SEO / plan managers). */
+  size?: EditorDockSize;
   className?: string;
 }) {
+  const resolved: EditorDockSize = size ?? (wide ? "wide" : "default");
   return (
     <aside
       data-editor-dock
+      data-size={resolved}
       className={cn(
-        "flex h-full shrink-0 flex-col border-l border-border/50 bg-card/90 text-foreground shadow-[-12px_0_40px_-20px_rgba(0,0,0,0.45)] backdrop-blur-2xl",
-        wide ? "w-[min(36rem,100vw)]" : "w-[min(22rem,100vw)]",
-        "max-md:fixed max-md:inset-x-0 max-md:bottom-0 max-md:top-auto max-md:z-50 max-md:h-[min(78vh,100%)] max-md:w-full max-md:rounded-t-2xl max-md:border-l-0 max-md:border-t max-md:shadow-2xl",
+        "flex h-full min-h-0 shrink-0 flex-col border-l border-border/50 bg-card/90 text-foreground shadow-none backdrop-blur-2xl",
+        DOCK_WIDTH[resolved],
+        "max-md:fixed max-md:inset-x-0 max-md:bottom-0 max-md:top-auto max-md:z-50 max-md:h-[min(85vh,100%)] max-md:w-full max-md:rounded-t-2xl max-md:border-l-0 max-md:border-t max-md:shadow-2xl",
         className,
       )}
     >
@@ -79,7 +92,7 @@ export function EditorRail({
       data-editor-rail
       aria-label="Editor tools"
       className={cn(
-        "z-20 hidden w-[4.25rem] shrink-0 flex-col items-stretch gap-0.5 border-r border-border/40 bg-card/50 py-2 backdrop-blur-xl md:flex",
+        "z-20 hidden w-[4.25rem] shrink-0 flex-col items-stretch gap-0.5 border-r border-border bg-card/80 py-2 backdrop-blur-xl md:flex",
         className,
       )}
     >
@@ -92,7 +105,7 @@ export function EditorRail({
           className={cn(
             "mx-1 flex flex-col items-center gap-0.5 rounded-xl px-1 py-2 text-[9px] font-medium uppercase tracking-[0.08em] transition",
             item.active
-              ? "bg-foreground text-background shadow-sm"
+              ? "bg-primary text-primary-foreground shadow-sm"
               : "text-muted-foreground hover:bg-muted hover:text-foreground",
           )}
         >

package/src/editor/InsertPoint.tsx

@@ -12,19 +12,19 @@ export function InsertPoint({ index }: { index: number }) {
       {/* Always visible on touch/small screens (group-hover doesn't fire on touch);
           hover-reveal on desktop. Without this a mobile user can't add a 2nd section. */}
       <div className="pointer-events-none absolute inset-x-0 -top-4 flex h-8 items-center justify-center px-6 opacity-100 transition group-hover/ins:opacity-100 md:opacity-0 md:group-hover/ins:opacity-100">
-        <div className="h-px flex-1 bg-sky-400/70" />
+        <div className="h-px flex-1 bg-primary/70" />
         <button
           type="button"
           onClick={(e) => {
             e.stopPropagation();
             ui.openLibrary(index);
           }}
-          className="pointer-events-auto mx-2 flex size-7 items-center justify-center rounded-full bg-sky-500 text-white shadow-md transition hover:scale-105 hover:bg-sky-600"
+          className="pointer-events-auto mx-2 flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-md transition hover:scale-105 hover:bg-primary/90"
           title="Add section here"
         >
           <Plus className="size-4" />
         </button>
-        <div className="h-px flex-1 bg-sky-400/70" />
+        <div className="h-px flex-1 bg-primary/70" />
       </div>
     </div>
   );

package/src/editor/Inspector.tsx

@@ -17,7 +17,14 @@ const BP: { id: Breakpoint; icon: typeof Monitor; label: string }[] = [
   { id: "desktop", icon: Monitor, label: "Desktop" },
 ];
 
-export function Inspector({ catalog }: { catalog: Catalog }) {
+export function Inspector({
+  catalog,
+  /** When true (docked mode), skip the outer chrome — parent dock owns the title bar. */
+  embedded,
+}: {
+  catalog: Catalog;
+  embedded?: boolean;
+}) {
   const ui = useEditorUi();
   const selectedId = useBuilder((s) => s.selectedId);
   const section = useBuilder(
@@ -29,7 +36,9 @@ export function Inspector({ catalog }: { catalog: Catalog }) {
   const remove = useBuilder((s) => s.removeSection);
   const duplicate = useBuilder((s) => s.duplicateSection);
 
-  if (!ui.inspectorOpen || !section) return null;
+  // In embedded/dock mode the parent already decided to show us — don't require inspectorOpen.
+  if (!embedded && !ui.inspectorOpen) return null;
+  if (!section) return null;
   const def = getDefinition(catalog, section.type);
   if (!def) return null;
 
@@ -43,18 +52,27 @@ export function Inspector({ catalog }: { catalog: Catalog }) {
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <div className="flex items-center justify-between border-b px-4 py-3">
-        <div>
-          <p className="text-[11px] uppercase tracking-wider text-muted-foreground/70">Section</p>
-          <h3 className="text-sm font-semibold">{def.label}</h3>
+      {!embedded && (
+        <div className="flex items-center justify-between border-b border-border px-4 py-3">
+          <div>
+            <p className="text-[11px] uppercase tracking-wider text-muted-foreground">
+              Section
+            </p>
+            <h3 className="text-sm font-semibold text-foreground">{def.label}</h3>
+          </div>
+          <button
+            onClick={() => ui.setInspectorOpen(false)}
+            className="rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+          >
+            <X className="size-4" />
+          </button>
         </div>
-        <button
-          onClick={() => ui.setInspectorOpen(false)}
-          className="rounded p-1 hover:bg-accent"
-        >
-          <X className="size-4" />
-        </button>
-      </div>
+      )}
+      {embedded && (
+        <div className="border-b border-border px-4 py-2.5">
+          <p className="text-sm font-semibold text-foreground">{def.label}</p>
+        </div>
+      )}
       <div className="flex-1 space-y-5 overflow-auto p-4">
         <div>
           <label className="mb-1.5 block text-xs font-medium text-muted-foreground">
@@ -137,7 +155,7 @@ export function Inspector({ catalog }: { catalog: Catalog }) {
         </button>
         <button
           onClick={() => remove(section.id)}
-          className="flex-1 rounded-md border border-red-200 px-3 py-2 text-xs text-red-600 hover:bg-red-50"
+          className="flex-1 rounded-md border border-destructive/30 px-3 py-2 text-xs text-destructive hover:bg-destructive/10"
         >
           Delete
         </button>
@@ -328,7 +346,7 @@ function ImageField({
         <img
           src={value}
           alt={altValue ?? ""}
-          className={`h-24 w-full rounded-md object-cover ${dragOver ? "ring-2 ring-sky-400" : ""}`}
+          className={`h-24 w-full rounded-md object-cover ${dragOver ? "ring-2 ring-primary" : ""}`}
           onDragOver={(e) => {
             e.preventDefault();
             setDragOver(true);
@@ -344,7 +362,7 @@ function ImageField({
       ) : (
         <div
           className={`flex h-24 items-center justify-center rounded-md border border-dashed text-xs text-muted-foreground/70 ${
-            dragOver ? "border-sky-400 bg-sky-400/10" : ""
+            dragOver ? "border-primary bg-primary/10" : ""
           }`}
           onDragOver={(e) => {
             e.preventDefault();
@@ -377,7 +395,7 @@ function ImageField({
           </button>
         )}
       </div>
-      {err && <p className="text-[10px] text-red-600 dark:text-red-400">{err}</p>}
+      {err && <p className="text-[10px] text-destructive">{err}</p>}
       <input ref={ref} type="file" accept="image/*,.heic,.heif,image/heic,image/heif" hidden onChange={pick} />
       <input
         value={value}
@@ -482,7 +500,7 @@ function ImageListField({
             <div key={`${url}-${i}`} className="group relative">
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src={url} alt="" className="aspect-square w-full rounded-md object-cover" />
-              <div className="absolute inset-0 hidden items-end justify-between rounded-md bg-black/40 p-1 group-hover:flex">
+              <div className="absolute inset-0 hidden items-end justify-between rounded-md bg-foreground/40 p-1 group-hover:flex">
                 <div className="flex gap-0.5">
                   <button
                     title="Move left"
@@ -515,7 +533,7 @@ function ImageListField({
       ) : (
         <div
           className={`flex h-16 items-center justify-center rounded-md border border-dashed text-xs text-muted-foreground/70 ${
-            dragOver ? "border-sky-400 bg-sky-400/10" : ""
+            dragOver ? "border-primary bg-primary/10" : ""
           }`}
           onDragOver={(e) => {
             e.preventDefault();
@@ -535,7 +553,7 @@ function ImageListField({
         onClick={() => ref.current?.click()}
         disabled={busy || room === 0}
         className={`w-full rounded-md border px-2 py-1.5 text-xs hover:bg-muted disabled:opacity-50 ${
-          dragOver ? "border-sky-400" : ""
+          dragOver ? "border-primary" : ""
         }`}
         onDragOver={(e) => {
           e.preventDefault();
@@ -670,7 +688,7 @@ function ItemListField({
               <button
                 title="Remove"
                 onClick={() => onChange(value.filter((_, j) => j !== i))}
-                className="rounded border px-1 text-[10px] leading-4 text-red-600"
+                className="rounded border px-1 text-[10px] leading-4 text-destructive"
               >
                 ×
               </button>

package/src/editor/PageBuilder.tsx

@@ -50,6 +50,16 @@ export interface HostRailItem {
   onClick: () => void;
 }
 
+export type HostDockSize = "default" | "wide" | "xl";
+
+export interface HostDock {
+  title: string;
+  subtitle?: string;
+  body: ReactNode;
+  /** Wide panels for dense host UIs (SEO, plan). Default fits inspector. */
+  size?: HostDockSize;
+}
+
 export interface PageBuilderProps {
   catalog: Catalog;
   initialDocument: PageDocument;
@@ -59,10 +69,14 @@ export interface PageBuilderProps {
   templates?: TemplateMeta[];
   saving?: "idle" | "saving" | "saved";
   leading?: ReactNode;
+  /** Site pages switcher — rendered at the top of the Pages dock. */
+  pagesSlot?: ReactNode;
   /** Host tools in the labeled left rail (SEO, Domain, …). */
   hostRail?: HostRailItem[];
   /** When set, dock shows this host body (same right dock as all other panels). */
-  hostDock?: { title: string; subtitle?: string; body: ReactNode } | null;
+  hostDock?: HostDock | null;
+  /** Fires when the dock mode changes so hosts can clear host tool selection. */
+  onDockChange?: (mode: DockMode) => void;
   viewUrl?: string;
   layout?: "floating" | "classic";
 }
@@ -86,9 +100,11 @@ function PageBuilderInner({
   templates,
   saving,
   leading,
+  pagesSlot,
   viewUrl,
   hostRail,
   hostDock,
+  onDockChange,
   layout = "floating",
 }: PageBuilderProps) {
   const doc = useBuilder((s) => s.doc);
@@ -100,24 +116,33 @@ function PageBuilderInner({
   const [templatesOpen, setTemplatesOpen] = useState(false);
   const [dock, setDock] = useState<DockMode>("sections");
   const [mobilePanel, setMobilePanel] = useState<MobilePanel>(null);
+  const onDockChangeRef = useRef(onDockChange);
+  onDockChangeRef.current = onDockChange;
+
+  const setDockMode = (mode: DockMode) => {
+    setDock(mode);
+    onDockChangeRef.current?.(mode);
+  };
 
   // Library open → force library dock. Close library → restore sections.
   useEffect(() => {
-    if (libraryIndex !== null) setDock("library");
+    if (libraryIndex !== null) setDockMode("library");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [libraryIndex]);
 
   // Selecting a section opens inspector in the same dock.
   useEffect(() => {
     if (selectedId && libraryIndex === null && !hostDock) {
-      setDock("inspector");
+      setDockMode("inspector");
       setInspectorOpen(true);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedId, libraryIndex, hostDock]);
 
   // Host dock takes over the unified dock when provided.
   useEffect(() => {
-    if (hostDock) setDock("host");
-    else if (dock === "host") setDock("sections");
+    if (hostDock) setDockMode("host");
+    else if (dock === "host") setDockMode("sections");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hostDock]);
 
@@ -128,11 +153,18 @@ function PageBuilderInner({
       libraryIndex,
       openLibrary: (index: number | null) => {
         setLibraryIndex(index);
-        if (index !== null) setDock("library");
+        if (index !== null) {
+          setDock("library");
+          onDockChangeRef.current?.("library");
+        }
       },
       closeLibrary: () => {
         setLibraryIndex(null);
-        setDock((d) => (d === "library" ? "sections" : d));
+        setDock((d) => {
+          const next = d === "library" ? "sections" : d;
+          if (next !== d) onDockChangeRef.current?.(next);
+          return next;
+        });
       },
       inspectorOpen,
       setInspectorOpen,
@@ -167,20 +199,20 @@ function PageBuilderInner({
     }
     // Toggle off if same dock re-clicked
     if (mode !== null && mode === dock) {
-      setDock(null);
+      setDockMode(null);
       return;
     }
     // Leaving library
     if (libraryIndex !== null) {
       setLibraryIndex(null);
     }
-    setDock(mode);
+    setDockMode(mode);
     if (mode === "inspector") setInspectorOpen(true);
   };
 
   const closeDock = () => {
     if (libraryIndex !== null) ui.closeLibrary();
-    setDock(null);
+    setDockMode(null);
     select(null);
   };
 
@@ -228,7 +260,8 @@ function PageBuilderInner({
       id: h.id,
       label: h.label,
       icon: h.icon,
-      active: !!h.active || (dock === "host" && hostDock != null),
+      // Only the clicked host tool is active — never light up every host item.
+      active: !!h.active,
       onClick: () => {
         h.onClick();
       },
@@ -304,28 +337,37 @@ function PageBuilderInner({
               title={dockTitle}
               subtitle={dockSubtitle}
               onClose={closeDock}
-              wide={dock === "library"}
+              size={
+                dock === "library"
+                  ? "wide"
+                  : dock === "host"
+                    ? (hostDock?.size ?? "default")
+                    : "default"
+              }
             >
-              {dock === "sections" && <SectionsPanel catalog={catalog} />}
+              {dock === "sections" && (
+                <SectionsPanel catalog={catalog} embedded pagesSlot={pagesSlot} />
+              )}
               {dock === "design" && <ThemePanel />}
-              {dock === "inspector" && (
-                <div className="p-1">
-                  {selectedId ? (
-                    <Inspector catalog={catalog} />
-                  ) : (
-                    <p className="p-4 text-sm text-muted-foreground">
-                      Click a section on the page to edit its content and layout.
-                    </p>
-                  )}
+              {dock === "inspector" &&
+                (selectedId ? (
+                  <Inspector catalog={catalog} embedded />
+                ) : (
+                  <p className="p-4 text-sm text-muted-foreground">
+                    Click a section on the page to edit its content and layout.
+                  </p>
+                ))}
+              {dock === "library" && <BlockLibraryBody catalog={catalog} />}
+              {dock === "host" && (
+                <div className="min-h-0 flex-1 overflow-auto p-3 sm:p-4">
+                  {hostDock?.body}
                 </div>
               )}
-              {dock === "library" && <BlockLibraryBody catalog={catalog} />}
-              {dock === "host" && hostDock?.body}
             </EditorDock>
           )}
         </div>
 
-        <MobileBar onOpenDock={openDock} />
+        <MobileBar dock={dock} onOpenDock={openDock} />
         {templates && templates.length > 0 && (
           <TemplateGallery templates={templates} />
         )}
@@ -336,8 +378,10 @@ function PageBuilderInner({
 }
 
 function MobileBar({
+  dock,
   onOpenDock,
 }: {
+  dock: DockMode;
   onOpenDock: (m: DockMode) => void;
 }) {
   const ui = useEditorUi();
@@ -351,20 +395,27 @@ function MobileBar({
           ["design", "Design", <Palette className="size-5" key="d" />],
           ["inspector", "Edit", <Sliders className="size-5" key="i" />],
         ] as const
-      ).map(([mode, label, icon]) => (
-        <button
-          key={mode}
-          type="button"
-          onClick={() => {
-            if (mode === "library") ui.openLibrary(sections.length);
-            else onOpenDock(mode);
-          }}
-          className="flex flex-1 flex-col items-center gap-0.5 py-1.5 text-[10px] text-muted-foreground"
-        >
-          {icon}
-          <span>{label}</span>
-        </button>
-      ))}
+      ).map(([mode, label, icon]) => {
+        const active = dock === mode;
+        return (
+          <button
+            key={mode}
+            type="button"
+            onClick={() => {
+              if (mode === "library") ui.openLibrary(sections.length);
+              else onOpenDock(mode);
+            }}
+            className={
+              active
+                ? "flex flex-1 flex-col items-center gap-0.5 py-1.5 text-[10px] font-semibold text-primary"
+                : "flex flex-1 flex-col items-center gap-0.5 py-1.5 text-[10px] text-muted-foreground"
+            }
+          >
+            {icon}
+            <span>{label}</span>
+          </button>
+        );
+      })}
     </nav>
   );
 }

package/src/editor/SectionFrame.tsx

@@ -61,14 +61,14 @@ export function SectionFrame({
           className={cn(
             "pointer-events-none absolute inset-0 z-10 ring-inset transition",
             selected
-              ? "ring-2 ring-sky-500"
-              : "ring-1 ring-transparent group-hover/sec:ring-2 group-hover/sec:ring-sky-300",
-            over && "ring-2 ring-sky-400",
+              ? "ring-2 ring-primary"
+              : "ring-1 ring-transparent group-hover/sec:ring-2 group-hover/sec:ring-primary/40",
+            over && "ring-2 ring-primary",
           )}
         />
         <div
           className={cn(
-            "absolute right-3 top-3 z-20 flex items-center gap-0.5 rounded-lg border border-black/10 bg-background/95 p-1 text-foreground shadow-sm backdrop-blur transition",
+            "absolute right-3 top-3 z-20 flex items-center gap-0.5 rounded-lg border border-border bg-card/95 p-1 text-foreground shadow-sm backdrop-blur transition",
             selected
               ? "opacity-100"
               : "pointer-events-none opacity-0 group-hover/sec:pointer-events-auto group-hover/sec:opacity-100",
@@ -103,7 +103,7 @@ export function SectionFrame({
           <button
             title="Delete"
             onClick={stop(() => remove(section.id))}
-            className="rounded p-1.5 text-red-600 hover:bg-red-50"
+            className="rounded p-1.5 text-destructive hover:bg-destructive/10"
           >
             <Trash2 className="size-4" />
           </button>
@@ -111,7 +111,7 @@ export function SectionFrame({
         {section.hideOn && section.hideOn.length > 0 && (
           <div
             title={`Hidden on ${section.hideOn.join(", ")}`}
-            className="absolute left-3 top-3 z-20 flex items-center gap-1 rounded-md border border-black/10 bg-background/95 px-1.5 py-1 text-foreground/70 shadow-sm backdrop-blur"
+            className="absolute left-3 top-3 z-20 flex items-center gap-1 rounded-md border border-border bg-background/95 px-1.5 py-1 text-foreground/70 shadow-sm backdrop-blur"
           >
             <EyeOff className="size-3.5" />
             {section.hideOn.map((bp) => {

package/src/editor/SectionsPanel.tsx

@@ -6,7 +6,7 @@
  * reorder; the Add button opens the block library. Reorder rides the same
  * pragmatic-drag-and-drop monitor as the canvas (kind "section").
  */
-import { useRef, useState } from "react";
+import { useRef, useState, type ReactNode } from "react";
 import { ChevronDown, ChevronUp, GripVertical, Plus, Trash2 } from "lucide-react";
 import { type Catalog, getDefinition } from "../registry";
 import { useBuilder } from "../store";
@@ -14,19 +14,37 @@ import { useEditorUi } from "./ui-context";
 import { useDraggable, useDropTarget } from "./dnd";
 import { cn } from "../lib/cn";
 
-export function SectionsPanel({ catalog }: { catalog: Catalog }) {
+export function SectionsPanel({
+  catalog,
+  embedded,
+  pagesSlot,
+}: {
+  catalog: Catalog;
+  /** Dock owns the title — only show the Add control. */
+  embedded?: boolean;
+  /** Site page switcher (host). Renders above the block list. */
+  pagesSlot?: ReactNode;
+}) {
   const sections = useBuilder((s) => s.doc.sections);
   const ui = useEditorUi();
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <div className="flex items-center justify-between border-b border-border px-3 py-2.5">
-        <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-          Sections
+      {pagesSlot && (
+        <div className="shrink-0 border-b border-border/60 px-3 py-3">{pagesSlot}</div>
+      )}
+      <div
+        className={cn(
+          "flex items-center border-b border-border px-3 py-2.5",
+          embedded ? "justify-between" : "justify-between",
+        )}
+      >
+        <span className="text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+          Blocks on this page
         </span>
         <button
           onClick={() => ui.openLibrary(sections.length)}
-          className="flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground transition hover:opacity-90"
+          className="flex items-center gap-1 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition hover:opacity-90"
         >
           <Plus className="size-3.5" /> Add
         </button>
@@ -139,7 +157,7 @@ function SectionRow({
         <button
           title="Delete section"
           onClick={stop(() => remove(id))}
-          className="rounded p-0.5 text-muted-foreground hover:text-red-500"
+          className="rounded p-0.5 text-muted-foreground hover:text-destructive"
         >
           <Trash2 className="size-3.5" />
         </button>

package/src/editor/ThemePanel.tsx

@@ -53,7 +53,7 @@ export function ThemePanel() {
                 {[p.colors.bg, p.colors.text, p.colors.accent].map((c, i) => (
                   <span
                     key={i}
-                    className="size-4 rounded-full border border-black/10"
+                    className="size-4 rounded-full border border-border"
                     style={{ background: c }}
                   />
                 ))}

package/src/editor/edit-primitives.tsx

@@ -62,7 +62,7 @@ function EditableText({
     Tag,
     {
       ref,
-      className: cn("outline-none focus:ring-2 focus:ring-sky-400/60 rounded-sm", className),
+      className: cn("outline-none focus:ring-2 focus:ring-primary/60 rounded-sm", className),
       style,
       contentEditable: true,
       suppressContentEditableWarning: true,
@@ -175,8 +175,8 @@ function EditableImage({ field, src, alt, className, style, width, height, prior
           loading={priority ? "eager" : "lazy"}
           fetchPriority={priority ? "high" : "auto"}
           className={cn(
-            "cursor-pointer outline-2 outline-offset-2 outline-transparent hover:outline-sky-400",
-            dragOver && "outline-sky-400",
+            "cursor-pointer outline-2 outline-offset-2 outline-transparent hover:outline-primary",
+            dragOver && "outline-primary",
             className,
           )}
           style={style}
@@ -187,8 +187,8 @@ function EditableImage({ field, src, alt, className, style, width, height, prior
       ) : (
         <div
           className={cn(
-            "flex cursor-pointer items-center justify-center bg-black/[0.04] text-[11px] uppercase tracking-wider opacity-50 outline-2 outline-dashed outline-black/15 hover:outline-sky-400",
-            dragOver && "outline-sky-400 opacity-80",
+            "flex cursor-pointer items-center justify-center bg-foreground/[0.04] text-[11px] uppercase tracking-wider opacity-50 outline-2 outline-dashed outline-foreground/15 hover:outline-primary",
+            dragOver && "outline-primary opacity-80",
             className,
           )}
           style={style}
@@ -199,7 +199,7 @@ function EditableImage({ field, src, alt, className, style, width, height, prior
         </div>
       )}
       {err && (
-        <p className="mt-1 text-[10px] text-red-600 dark:text-red-400" title={err}>
+        <p className="mt-1 text-[10px] text-destructive" title={err}>
           {err}
         </p>
       )}

package/src/editor/index.tsx

@@ -6,9 +6,11 @@ export {
   PageBuilder,
   type PageBuilderProps,
   type HostRailItem,
+  type HostDock,
+  type HostDockSize,
   type DockMode,
 } from "./PageBuilder";
-export { EditorDock, EditorRail } from "./EditorDock";
+export { EditorDock, EditorRail, type EditorDockSize } from "./EditorDock";
 export { type TemplateMeta } from "./TemplateGallery";
 export { type Device } from "./ui-context";
 export { type EditorCapabilities } from "./edit-primitives";