@jimmy_harika/websitekit 0.5.5 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jimmy_harika/websitekit",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "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/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-none 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,
       )}
     >

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,9 +337,17 @@ 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} embedded />}
+              {dock === "sections" && (
+                <SectionsPanel catalog={catalog} embedded pagesSlot={pagesSlot} />
+              )}
               {dock === "design" && <ThemePanel />}
               {dock === "inspector" &&
                 (selectedId ? (
@@ -317,12 +358,14 @@ function PageBuilderInner({
                   </p>
                 ))}
               {dock === "library" && <BlockLibraryBody catalog={catalog} />}
-              {dock === "host" && hostDock?.body}
+              {dock === "host" && (
+                <div className="p-3 sm:p-4">{hostDock?.body}</div>
+              )}
             </EditorDock>
           )}
         </div>
 
-        <MobileBar onOpenDock={openDock} />
+        <MobileBar dock={dock} onOpenDock={openDock} />
         {templates && templates.length > 0 && (
           <TemplateGallery templates={templates} />
         )}
@@ -333,8 +376,10 @@ function PageBuilderInner({
 }
 
 function MobileBar({
+  dock,
   onOpenDock,
 }: {
+  dock: DockMode;
   onOpenDock: (m: DockMode) => void;
 }) {
   const ui = useEditorUi();
@@ -348,20 +393,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/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";
@@ -17,32 +17,36 @@ import { cn } from "../lib/cn";
 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">
+      {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-end" : "justify-between",
+          embedded ? "justify-between" : "justify-between",
         )}
       >
-        {!embedded && (
-          <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-            Sections
-          </span>
-        )}
+        <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-primary px-2 py-1 text-xs font-medium text-primary-foreground transition hover:opacity-90"
         >
-          <Plus className="size-3.5" /> Add block
+          <Plus className="size-3.5" /> Add
         </button>
       </div>
       <div className="min-h-0 flex-1 overflow-auto p-2">

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";