@jimmy_harika/websitekit 0.5.3 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jimmy_harika/websitekit",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "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/BlockLibrary.tsx

@@ -1,14 +1,11 @@
 "use client";
 
 /**
- * The "Add section" library (screenshot #3): categories on the left, live mini
- * previews of each section + its layout variants on the right. Click inserts at
- * the chosen index. Previews render the real catalog Component (scaled), so what
- * you see is what you get.
+ * Add Block library — Pixieset-style: category chips + visual grid of live
+ * mini-previews. Renders INSIDE the unified right EditorDock (not a random
+ * portal side). Click inserts at the open library index.
  */
-import { createElement, useEffect, useState } from "react";
-import { createPortal } from "react-dom";
-import { X } from "lucide-react";
+import { createElement, useMemo, useState } from "react";
 import {
   type Catalog,
   type SectionDefinition,
@@ -20,16 +17,20 @@ import { useBuilder } from "../store";
 import { useEditorUi } from "./ui-context";
 import { cn } from "../lib/cn";
 
-export function BlockLibrary({ catalog }: { catalog: Catalog }) {
+export function BlockLibraryBody({ catalog }: { catalog: Catalog }) {
   const ui = useEditorUi();
   const theme = useBuilder((s) => s.doc.theme);
   const insertSection = useBuilder((s) => s.insertSection);
-  const [active, setActive] = useState(catalog.categories[0] ?? "");
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
+  const categories = catalog.categories.length
+    ? catalog.categories
+    : ["All"];
+  const [active, setActive] = useState(categories[0] ?? "All");
 
-  if (ui.libraryIndex === null || !mounted) return null;
-  const items = Object.values(catalog.sections).filter((d) => d.category === active);
+  const items = useMemo(() => {
+    const all = Object.values(catalog.sections);
+    if (active === "All" || !catalog.categories.length) return all;
+    return all.filter((d) => d.category === active);
+  }, [catalog, active]);
 
   function add(def: SectionDefinition, variant?: string) {
     insertSection(
@@ -44,67 +45,94 @@ export function BlockLibrary({ catalog }: { catalog: Catalog }) {
     ui.closeLibrary();
   }
 
-  return createPortal(
-    <div className="fixed inset-0 z-[100] flex">
-      <div className="flex-1 bg-black/50" onClick={() => ui.closeLibrary()} />
-      <div className="flex h-full w-full max-w-3xl flex-col bg-card text-foreground shadow-2xl">
-        <div className="flex items-center justify-between border-b border-border px-5 py-3">
-          <h2 className="text-sm font-semibold">Add section</h2>
-          <button
-            onClick={() => ui.closeLibrary()}
-            className="rounded p-1 hover:bg-accent"
-          >
-            <X className="size-5" />
-          </button>
+  if (ui.libraryIndex === null) return null;
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="shrink-0 space-y-2 border-b border-border/40 px-3 py-3">
+        <p className="text-xs text-muted-foreground">
+          Click a block to insert it on the page.
+        </p>
+        <div className="flex flex-wrap gap-1.5">
+          {categories.map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => setActive(c)}
+              className={cn(
+                "rounded-full px-2.5 py-1 text-[11px] font-medium transition",
+                active === c
+                  ? "bg-foreground text-background"
+                  : "bg-muted text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {c}
+            </button>
+          ))}
         </div>
-        <div className="flex min-h-0 flex-1">
-          <nav className="w-40 shrink-0 overflow-auto border-r p-2">
-            {catalog.categories.map((c) => (
-              <button
-                key={c}
-                onClick={() => setActive(c)}
-                className={cn(
-                  "block w-full rounded px-3 py-2 text-left text-sm",
-                  active === c
-                    ? "bg-secondary font-medium text-secondary-foreground"
-                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                )}
-              >
-                {c}
-              </button>
-            ))}
-          </nav>
-          <div className="grid flex-1 grid-cols-1 content-start gap-4 overflow-auto p-4 sm:grid-cols-2">
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-auto p-3">
+        {items.length === 0 ? (
+          <p className="py-8 text-center text-sm text-muted-foreground">
+            No blocks in this category.
+          </p>
+        ) : (
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
             {items.flatMap((def) => {
               const variants =
                 def.variants && def.variants.length
                   ? def.variants
-                  : [{ id: undefined as string | undefined, label: def.label }];
+                  : [{ id: undefined as string | undefined, label: "Default" }];
               return variants.map((v) => (
                 <button
-                  key={def.type + (v.id ?? "")}
+                  key={def.type + (v.id ?? "default")}
+                  type="button"
                   onClick={() => add(def, v.id)}
-                  className="group overflow-hidden rounded-lg border bg-muted text-left transition hover:border-sky-400 hover:shadow"
+                  className="group overflow-hidden rounded-xl border border-border/60 bg-muted/40 text-left transition hover:border-foreground/30 hover:shadow-md"
                 >
-                  <div className="relative h-32 overflow-hidden bg-background">
+                  <div className="relative h-28 overflow-hidden bg-background">
                     <div
                       className="pointer-events-none absolute left-0 top-0 origin-top-left"
-                      style={{ ...themeVars(theme), width: 1100, transform: "scale(0.318)" }}
+                      style={{
+                        ...themeVars(theme),
+                        width: 960,
+                        transform: "scale(0.28)",
+                      }}
                     >
                       {createElement(def.Component, defaultPropsFor(def, v.id))}
                     </div>
+                    <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-background/40 to-transparent opacity-0 transition group-hover:opacity-100" />
                   </div>
-                  <div className="border-t px-3 py-2 text-xs font-medium text-foreground">
-                    {def.label}
-                    {variants.length > 1 ? ` · ${v.label}` : ""}
+                  <div className="border-t border-border/40 px-3 py-2">
+                    <div className="text-xs font-semibold text-foreground">
+                      {def.label}
+                      {variants.length > 1 ? (
+                        <span className="font-normal text-muted-foreground">
+                          {" "}
+                          · {v.label}
+                        </span>
+                      ) : null}
+                    </div>
+                    {def.description && (
+                      <p className="mt-0.5 line-clamp-2 text-[10px] leading-snug text-muted-foreground">
+                        {def.description}
+                      </p>
+                    )}
                   </div>
                 </button>
               ));
             })}
           </div>
-        </div>
+        )}
       </div>
-    </div>,
-    document.body,
+    </div>
   );
 }
+
+/** @deprecated portal-based library — kept export name for any external import. */
+export function BlockLibrary({ catalog }: { catalog: Catalog }) {
+  // Dock hosts BlockLibraryBody; this no-op keeps the export stable.
+  void catalog;
+  return null;
+}

package/src/editor/EditorDock.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+/**
+ * Single consistent right-side dock for ALL editor panels (sections, design,
+ * inspector, block library, host tools). Same position, size, chrome — only
+ * the body swaps. Host apps theme via [data-websitekit-editor] tokens.
+ */
+import type { ReactNode } from "react";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn";
+
+export function EditorDock({
+  title,
+  subtitle,
+  onClose,
+  children,
+  wide,
+  className,
+}: {
+  title: string;
+  subtitle?: string;
+  onClose?: () => void;
+  children: ReactNode;
+  /** Wider dock for Add Block library (~28rem default, ~36rem wide). */
+  wide?: boolean;
+  className?: string;
+}) {
+  return (
+    <aside
+      data-editor-dock
+      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",
+        className,
+      )}
+    >
+      <header className="flex shrink-0 items-start justify-between gap-3 border-b border-border/40 px-4 py-3">
+        <div className="min-w-0">
+          <h2 className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+            {title}
+          </h2>
+          {subtitle && (
+            <p className="mt-0.5 truncate text-sm font-medium text-foreground">{subtitle}</p>
+          )}
+        </div>
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg p-1.5 text-muted-foreground transition hover:bg-muted hover:text-foreground"
+            aria-label="Close panel"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </header>
+      <div className="min-h-0 flex-1 overflow-auto">{children}</div>
+    </aside>
+  );
+}
+
+/** Thin left tool rail with icon + label so tools are discoverable. */
+export function EditorRail({
+  items,
+  className,
+}: {
+  items: {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    active?: boolean;
+    onClick: () => void;
+  }[];
+  className?: string;
+}) {
+  return (
+    <nav
+      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",
+        className,
+      )}
+    >
+      {items.map((item) => (
+        <button
+          key={item.id}
+          type="button"
+          title={item.label}
+          onClick={item.onClick}
+          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"
+              : "text-muted-foreground hover:bg-muted hover:text-foreground",
+          )}
+        >
+          <span className="flex size-5 items-center justify-center [&_svg]:size-4">
+            {item.icon}
+          </span>
+          <span className="max-w-full truncate leading-none">{item.label}</span>
+        </button>
+      ))}
+    </nav>
+  );
+}

package/src/editor/PageBuilder.tsx

@@ -1,26 +1,54 @@
 "use client";
 
 /**
- * Top-level editor. Floating-panel layout: canvas owns the space; left/right
- * tools open as on-call glass cards so the live page stays large (Pixieset-style
- * preview-first). Host apps theme via [data-websitekit-editor] + CSS vars.
+ * Editor shell — canvas-first with ONE consistent right dock for every panel
+ * (sections, design, inspect, add block, host tools). Left rail is labeled.
  */
 import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { List, Palette, PanelRight, Plus, Sliders, X } from "lucide-react";
+import {
+  LayoutTemplate,
+  List,
+  Palette,
+  PanelRight,
+  Plus,
+  Sliders,
+} from "lucide-react";
 import type { PageDocument } from "../model";
 import type { Catalog } from "../registry";
 import { BuilderProvider, useBuilder, useCreateBuilderStore } from "../store";
 import { EditorCapsContext } from "./edit-primitives";
-import { EditorUiContext, type Device, type EditorUi, type MobilePanel, useEditorUi } from "./ui-context";
+import {
+  EditorUiContext,
+  type Device,
+  type EditorUi,
+  type MobilePanel,
+  useEditorUi,
+} from "./ui-context";
 import { Toolbar } from "./Toolbar";
 import { Canvas } from "./Canvas";
 import { Inspector } from "./Inspector";
-import { BlockLibrary } from "./BlockLibrary";
+import { BlockLibraryBody } from "./BlockLibrary";
 import { ThemePanel } from "./ThemePanel";
 import { SectionsPanel } from "./SectionsPanel";
 import { TemplateGallery, type TemplateMeta } from "./TemplateGallery";
 import { useEditorShortcuts } from "./shortcuts";
-import { cn } from "../lib/cn";
+import { EditorDock, EditorRail } from "./EditorDock";
+
+export type DockMode =
+  | "sections"
+  | "design"
+  | "inspector"
+  | "library"
+  | "host"
+  | null;
+
+export interface HostRailItem {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  active?: boolean;
+  onClick: () => void;
+}
 
 export interface PageBuilderProps {
   catalog: Catalog;
@@ -31,15 +59,11 @@ export interface PageBuilderProps {
   templates?: TemplateMeta[];
   saving?: "idle" | "saving" | "saved";
   leading?: ReactNode;
-  /** Extra tools in the left icon rail (host app: SEO, Domain, …). */
-  railExtra?: ReactNode;
-  /** Floating host panel body (when host manages its own panel open state). */
-  hostPanel?: 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;
   viewUrl?: string;
-  /**
-   * floating (default) = max canvas, panels on-call.
-   * classic = permanent 3-column rails.
-   */
   layout?: "floating" | "classic";
 }
 
@@ -55,8 +79,6 @@ export function PageBuilder(props: PageBuilderProps) {
   );
 }
 
-type LeftPanel = "sections" | "design" | null;
-
 function PageBuilderInner({
   catalog,
   onChange,
@@ -65,31 +87,53 @@ function PageBuilderInner({
   saving,
   leading,
   viewUrl,
-  railExtra,
-  hostPanel,
+  hostRail,
+  hostDock,
   layout = "floating",
 }: PageBuilderProps) {
   const doc = useBuilder((s) => s.doc);
   const selectedId = useBuilder((s) => s.selectedId);
+  const select = useBuilder((s) => s.select);
   const [device, setDevice] = useState<Device>("desktop");
   const [libraryIndex, setLibraryIndex] = useState<number | null>(null);
   const [inspectorOpen, setInspectorOpen] = useState(false);
   const [templatesOpen, setTemplatesOpen] = useState(false);
-  const [leftPanel, setLeftPanel] = useState<LeftPanel>("sections");
+  const [dock, setDock] = useState<DockMode>("sections");
   const [mobilePanel, setMobilePanel] = useState<MobilePanel>(null);
 
-  // Open inspector when a section is selected (floating mode); keep open in classic.
+  // Library open → force library dock. Close library → restore sections.
+  useEffect(() => {
+    if (libraryIndex !== null) setDock("library");
+  }, [libraryIndex]);
+
+  // Selecting a section opens inspector in the same dock.
+  useEffect(() => {
+    if (selectedId && libraryIndex === null && !hostDock) {
+      setDock("inspector");
+      setInspectorOpen(true);
+    }
+  }, [selectedId, libraryIndex, hostDock]);
+
+  // Host dock takes over the unified dock when provided.
   useEffect(() => {
-    if (layout === "floating" && selectedId) setInspectorOpen(true);
-  }, [selectedId, layout]);
+    if (hostDock) setDock("host");
+    else if (dock === "host") setDock("sections");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hostDock]);
 
   const ui: EditorUi = useMemo(
     () => ({
       device,
       setDevice,
       libraryIndex,
-      openLibrary: setLibraryIndex,
-      closeLibrary: () => setLibraryIndex(null),
+      openLibrary: (index: number | null) => {
+        setLibraryIndex(index);
+        if (index !== null) setDock("library");
+      },
+      closeLibrary: () => {
+        setLibraryIndex(null);
+        setDock((d) => (d === "library" ? "sections" : d));
+      },
       inspectorOpen,
       setInspectorOpen,
       templatesOpen,
@@ -111,295 +155,216 @@ function PageBuilderInner({
     onChangeRef.current?.(doc);
   }, [doc]);
 
-  useEditorShortcuts({ ui, onPublish: onPublish ? () => onPublish(doc) : undefined });
+  useEditorShortcuts({
+    ui,
+    onPublish: onPublish ? () => onPublish(doc) : undefined,
+  });
 
-  const toggleLeft = (p: LeftPanel) =>
-    setLeftPanel((cur) => (cur === p ? null : p));
+  const openDock = (mode: DockMode) => {
+    if (mode === "library") {
+      ui.openLibrary(doc.sections.length);
+      return;
+    }
+    // Toggle off if same dock re-clicked
+    if (mode !== null && mode === dock) {
+      setDock(null);
+      return;
+    }
+    // Leaving library
+    if (libraryIndex !== null) {
+      setLibraryIndex(null);
+    }
+    setDock(mode);
+    if (mode === "inspector") setInspectorOpen(true);
+  };
 
-  if (layout === "classic") {
-    return (
-      <EditorUiContext.Provider value={ui}>
-        <div data-websitekit-editor data-layout="classic" className="flex h-full min-h-0 flex-col bg-muted">
-          <Toolbar
-            onPublish={onPublish ? () => onPublish(doc) : undefined}
-            saving={saving}
-            designOpen={leftPanel === "design"}
-            onToggleDesign={() => toggleLeft("design")}
-            hasTemplates={!!templates && templates.length > 0}
-            leading={leading}
-            viewUrl={viewUrl}
-          />
-          <div className="flex min-h-0 flex-1">
-            <aside className="hidden w-64 shrink-0 flex-col border-r border-border bg-card md:flex">
-              {leftPanel === "design" ? (
-                <>
-                  <div className="border-b border-border px-3 py-2.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                    Design
-                  </div>
-                  <div className="min-h-0 flex-1 overflow-auto">
-                    <ThemePanel />
-                  </div>
-                </>
-              ) : (
-                <SectionsPanel catalog={catalog} />
-              )}
-            </aside>
-            <Canvas catalog={catalog} />
-            <aside className="hidden w-80 shrink-0 flex-col border-l border-border bg-card md:flex">
-              <Inspector catalog={catalog} />
-            </aside>
-          </div>
-          <MobileBar />
-          <MobileSheet catalog={catalog} />
-          <BlockLibrary catalog={catalog} />
-          {templates && templates.length > 0 && <TemplateGallery templates={templates} />}
-          <EditorStyle />
-        </div>
-      </EditorUiContext.Provider>
-    );
-  }
+  const closeDock = () => {
+    if (libraryIndex !== null) ui.closeLibrary();
+    setDock(null);
+    select(null);
+  };
+
+  const railItems = [
+    {
+      id: "sections",
+      label: "Pages",
+      icon: <List />,
+      active: dock === "sections",
+      onClick: () => openDock("sections"),
+    },
+    {
+      id: "add",
+      label: "Add",
+      icon: <Plus />,
+      active: dock === "library",
+      onClick: () => openDock("library"),
+    },
+    {
+      id: "design",
+      label: "Design",
+      icon: <Palette />,
+      active: dock === "design",
+      onClick: () => openDock("design"),
+    },
+    {
+      id: "inspect",
+      label: "Edit",
+      icon: <PanelRight />,
+      active: dock === "inspector",
+      onClick: () => openDock("inspector"),
+    },
+    ...(templates && templates.length
+      ? [
+          {
+            id: "templates",
+            label: "Looks",
+            icon: <LayoutTemplate />,
+            active: templatesOpen,
+            onClick: () => ui.setTemplatesOpen(true),
+          },
+        ]
+      : []),
+    ...(hostRail ?? []).map((h) => ({
+      id: h.id,
+      label: h.label,
+      icon: h.icon,
+      active: !!h.active || (dock === "host" && hostDock != null),
+      onClick: () => {
+        h.onClick();
+      },
+    })),
+  ];
+
+  const dockTitle =
+    dock === "library"
+      ? "Add block"
+      : dock === "design"
+        ? "Design"
+        : dock === "inspector"
+          ? "Edit section"
+          : dock === "host"
+            ? (hostDock?.title ?? "Site")
+            : dock === "sections"
+              ? "Page structure"
+              : "";
+
+  const dockSubtitle =
+    dock === "host"
+      ? hostDock?.subtitle
+      : dock === "inspector"
+        ? selectedId
+          ? "Selected block"
+          : "Select a block on the page"
+        : dock === "library"
+          ? "Browse layouts"
+          : undefined;
+
+  const showDock = dock !== null;
 
-  // ── Floating layout (default): max canvas, panels on-call ──────────────
   return (
     <EditorUiContext.Provider value={ui}>
       <div
         data-websitekit-editor
-        data-layout="floating"
+        data-layout={layout}
         className="relative flex h-full min-h-0 flex-col bg-transparent"
       >
         <Toolbar
           onPublish={onPublish ? () => onPublish(doc) : undefined}
           saving={saving}
-          designOpen={leftPanel === "design"}
-          onToggleDesign={() => toggleLeft("design")}
+          designOpen={dock === "design"}
+          onToggleDesign={() => openDock("design")}
           hasTemplates={!!templates && templates.length > 0}
           leading={leading}
           viewUrl={viewUrl}
           floating
-          inspectorOpen={inspectorOpen}
-          onToggleInspector={() => setInspectorOpen((v) => !v)}
-          sectionsOpen={leftPanel === "sections"}
-          onToggleSections={() => toggleLeft("sections")}
+          compact
+          onAddBlock={() => openDock("library")}
         />
 
         <div className="relative flex min-h-0 flex-1">
-          {/* Icon rail — always present, thin */}
-          <nav
-            className="z-30 hidden w-12 shrink-0 flex-col items-center gap-1 border-r border-border/40 bg-card/40 py-2 backdrop-blur-xl md:flex"
-            aria-label="Editor tools"
-          >
-            <RailBtn
-              active={leftPanel === "sections"}
-              onClick={() => toggleLeft("sections")}
-              title="Sections"
-            >
-              <List className="size-4" />
-            </RailBtn>
-            <RailBtn
-              active={leftPanel === "design"}
-              onClick={() => toggleLeft("design")}
-              title="Design"
-            >
-              <Palette className="size-4" />
-            </RailBtn>
-            <RailBtn
-              active={false}
-              onClick={() => ui.openLibrary(doc.sections.length)}
-              title="Add block"
-            >
-              <Plus className="size-4" />
-            </RailBtn>
-            <RailBtn
-              active={inspectorOpen}
-              onClick={() => setInspectorOpen((v) => !v)}
-              title="Inspector"
-            >
-              <PanelRight className="size-4" />
-            </RailBtn>
-            {railExtra}
-          </nav>
+          <EditorRail items={railItems} />
 
-          {/* Canvas fills everything else */}
           <div className="relative min-w-0 flex-1">
             <Canvas catalog={catalog} />
-
-            {/* Floating left panel */}
-            {leftPanel && (
-              <FloatingCard side="left" onClose={() => setLeftPanel(null)} title={leftPanel === "design" ? "Design" : "Sections"}>
-                {leftPanel === "design" ? <ThemePanel /> : <SectionsPanel catalog={catalog} />}
-              </FloatingCard>
-            )}
-
-            {/* Host panel (SEO / Domain / …) */}
-            {hostPanel}
-
-            {/* Floating inspector — only when open */}
-            {inspectorOpen && (
-              <FloatingCard
-                side="right"
-                onClose={() => setInspectorOpen(false)}
-                title="Inspector"
-                wide
+            {/* On-canvas Add Block CTA */}
+            <div className="pointer-events-none absolute inset-x-0 bottom-4 z-10 flex justify-center">
+              <button
+                type="button"
+                onClick={() => openDock("library")}
+                className="pointer-events-auto inline-flex items-center gap-2 rounded-full border border-border/60 bg-card/90 px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-foreground shadow-xl backdrop-blur-xl transition hover:bg-card"
               >
-                <Inspector catalog={catalog} />
-              </FloatingCard>
-            )}
+                <Plus className="size-3.5" />
+                Add block
+              </button>
+            </div>
           </div>
+
+          {showDock && (
+            <EditorDock
+              title={dockTitle}
+              subtitle={dockSubtitle}
+              onClose={closeDock}
+              wide={dock === "library"}
+            >
+              {dock === "sections" && <SectionsPanel catalog={catalog} />}
+              {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>
+                  )}
+                </div>
+              )}
+              {dock === "library" && <BlockLibraryBody catalog={catalog} />}
+              {dock === "host" && hostDock?.body}
+            </EditorDock>
+          )}
         </div>
 
-        <MobileBar />
-        <MobileSheet catalog={catalog} />
-        <BlockLibrary catalog={catalog} />
-        {templates && templates.length > 0 && <TemplateGallery templates={templates} />}
-        <EditorStyle />
+        <MobileBar onOpenDock={openDock} />
+        {templates && templates.length > 0 && (
+          <TemplateGallery templates={templates} />
+        )}
+        <style>{`[data-websitekit-editor] [data-pb-field]:empty::before{content:attr(data-pb-placeholder);opacity:.4;pointer-events:none;}`}</style>
       </div>
     </EditorUiContext.Provider>
   );
 }
 
-function RailBtn({
-  active,
-  onClick,
-  title,
-  children,
+function MobileBar({
+  onOpenDock,
 }: {
-  active: boolean;
-  onClick: () => void;
-  title: string;
-  children: ReactNode;
-}) {
-  return (
-    <button
-      type="button"
-      title={title}
-      onClick={onClick}
-      className={cn(
-        "flex size-9 items-center justify-center rounded-xl transition",
-        active
-          ? "bg-foreground text-background shadow-sm"
-          : "text-muted-foreground hover:bg-muted hover:text-foreground",
-      )}
-    >
-      {children}
-    </button>
-  );
-}
-
-function FloatingCard({
-  side,
-  title,
-  onClose,
-  children,
-  wide,
-}: {
-  side: "left" | "right";
-  title: string;
-  onClose: () => void;
-  children: ReactNode;
-  wide?: boolean;
+  onOpenDock: (m: DockMode) => void;
 }) {
+  const ui = useEditorUi();
+  const sections = useBuilder((s) => s.doc.sections);
   return (
-    <div
-      className={cn(
-        "absolute top-3 bottom-3 z-20 flex flex-col overflow-hidden rounded-2xl border border-border/50 bg-card/85 shadow-2xl backdrop-blur-2xl",
-        wide ? "w-[min(22rem,calc(100%-1.5rem))]" : "w-[min(18rem,calc(100%-1.5rem))]",
-        side === "left" ? "left-3" : "right-3",
-      )}
-      data-floating-panel={side}
-    >
-      <div className="flex items-center justify-between border-b border-border/40 px-3 py-2">
-        <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-          {title}
-        </span>
+    <nav className="flex shrink-0 items-stretch border-t border-border/50 bg-card/80 px-1 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl md:hidden">
+      {(
+        [
+          ["sections", "Pages", <List className="size-5" key="l" />],
+          ["library", "Add", <Plus className="size-5" key="p" />],
+          ["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={onClose}
-          className="rounded-lg p-1 text-muted-foreground transition hover:bg-muted hover:text-foreground"
-          aria-label="Close panel"
+          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"
         >
-          <X className="size-3.5" />
+          {icon}
+          <span>{label}</span>
         </button>
-      </div>
-      <div className="min-h-0 flex-1 overflow-auto">{children}</div>
-    </div>
-  );
-}
-
-function EditorStyle() {
-  return (
-    <style>{`[data-websitekit-editor] [data-pb-field]:empty::before{content:attr(data-pb-placeholder);opacity:.4;pointer-events:none;}`}</style>
-  );
-}
-
-function MobileBar() {
-  const ui = useEditorUi();
-  const sections = useBuilder((s) => s.doc.sections);
-  const tab = (p: MobilePanel, label: string, icon: ReactNode) => (
-    <button
-      type="button"
-      onClick={() => {
-        if (p === "inspector") ui.setInspectorOpen(true);
-        ui.setMobilePanel(ui.mobilePanel === p ? null : p);
-      }}
-      className={`flex flex-1 flex-col items-center gap-0.5 py-1.5 text-[10px] ${ui.mobilePanel === p ? "text-foreground" : "text-muted-foreground"}`}
-    >
-      {icon}
-      <span>{label}</span>
-    </button>
-  );
-  return (
-    <nav className="flex shrink-0 items-stretch border-t border-border/50 bg-card/80 px-1 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl md:hidden">
-      {tab("sections", "Sections", <List className="size-5" />)}
-      <button
-        type="button"
-        onClick={() => ui.openLibrary(sections.length)}
-        className="flex flex-1 flex-col items-center gap-0.5 py-1.5 text-[10px] text-muted-foreground"
-      >
-        <Plus className="size-5" />
-        <span>Add</span>
-      </button>
-      {tab("design", "Design", <Palette className="size-5" />)}
-      {tab("inspector", "Section", <Sliders className="size-5" />)}
+      ))}
     </nav>
   );
 }
-
-function MobileSheet({ catalog }: { catalog: Catalog }) {
-  const ui = useEditorUi();
-  if (ui.mobilePanel === null) return null;
-  return (
-    <div className="fixed inset-0 z-50 flex flex-col justify-end md:hidden">
-      <button
-        aria-label="Close panel"
-        onClick={() => ui.setMobilePanel(null)}
-        className="absolute inset-0 bg-black/40"
-      />
-      <div className="relative max-h-[70vh] overflow-auto rounded-t-2xl border-t border-border bg-card/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-2xl">
-        <div className="flex items-center justify-between border-b border-border px-4 py-2.5">
-          <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-            {ui.mobilePanel === "sections"
-              ? "Sections"
-              : ui.mobilePanel === "design"
-                ? "Design"
-                : "Section"}
-          </span>
-          <button
-            onClick={() => ui.setMobilePanel(null)}
-            className="rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
-          >
-            <X className="size-4" />
-          </button>
-        </div>
-        <div className="min-h-[30vh]">
-          {ui.mobilePanel === "sections" && <SectionsPanel catalog={catalog} />}
-          {ui.mobilePanel === "design" && <ThemePanel />}
-          {ui.mobilePanel === "inspector" && (
-            <div className="p-4">
-              <Inspector catalog={catalog} />
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/editor/Toolbar.tsx

@@ -1,14 +1,11 @@
 "use client";
 
-/** Editor header — glass-friendly surface, device switcher, undo/redo, publish. */
+/** Clean editor header: leading · devices · undo · preview · publish. */
 import type { ReactNode } from "react";
 import {
   ExternalLink,
-  LayoutGrid,
-  List,
   Monitor,
-  Palette,
-  PanelRight,
+  Plus,
   Redo2,
   Smartphone,
   Tablet,
@@ -27,30 +24,29 @@ const DEVICES: { id: Device; icon: typeof Monitor; label: string }[] = [
 export function Toolbar({
   onPublish,
   saving = "idle",
-  designOpen,
-  onToggleDesign,
-  hasTemplates,
+  designOpen: _designOpen,
+  onToggleDesign: _onToggleDesign,
+  hasTemplates: _hasTemplates,
   leading,
   viewUrl,
   floating,
-  inspectorOpen,
-  onToggleInspector,
-  sectionsOpen,
-  onToggleSections,
+  compact,
+  onAddBlock,
 }: {
   onPublish?: () => void;
   saving?: "idle" | "saving" | "saved";
-  designOpen: boolean;
-  onToggleDesign: () => void;
+  designOpen?: boolean;
+  onToggleDesign?: () => void;
   hasTemplates?: boolean;
   leading?: ReactNode;
   viewUrl?: string;
   floating?: boolean;
-  inspectorOpen?: boolean;
-  onToggleInspector?: () => void;
-  sectionsOpen?: boolean;
-  onToggleSections?: () => void;
+  compact?: boolean;
+  onAddBlock?: () => void;
 }) {
+  void _designOpen;
+  void _onToggleDesign;
+  void _hasTemplates;
   const ui = useEditorUi();
   const undo = useTemporal((s) => s.undo);
   const redo = useTemporal((s) => s.redo);
@@ -60,45 +56,18 @@ export function Toolbar({
   return (
     <header
       className={cn(
-        "relative z-40 flex h-12 shrink-0 items-center gap-1 px-2 text-foreground sm:px-3",
+        "relative z-40 flex h-12 shrink-0 items-center gap-2 px-2 text-foreground sm:px-3",
         floating
           ? "border-b border-border/40 bg-card/50 backdrop-blur-xl"
           : "border-b border-border bg-card",
       )}
     >
       {leading && (
-        <div className="flex min-w-0 items-center gap-1.5 pr-1.5 sm:border-r sm:border-border/40">
+        <div className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
           {leading}
         </div>
       )}
-      <div className="flex items-center gap-0.5 pl-0.5">
-        {floating && onToggleSections && (
-          <ToolButton active={!!sectionsOpen} onClick={onToggleSections} title="Sections">
-            <List className="size-4" />
-            <span className="hidden text-xs lg:inline">Sections</span>
-          </ToolButton>
-        )}
-        <ToolButton active={designOpen} onClick={onToggleDesign} title="Design">
-          <Palette className="size-4" />
-          <span className="hidden text-xs lg:inline">Design</span>
-        </ToolButton>
-        {hasTemplates && (
-          <ToolButton onClick={() => ui.setTemplatesOpen(true)} title="Templates">
-            <LayoutGrid className="size-4" />
-            <span className="hidden text-xs lg:inline">Templates</span>
-          </ToolButton>
-        )}
-        {floating && onToggleInspector && (
-          <ToolButton
-            active={!!inspectorOpen}
-            onClick={onToggleInspector}
-            title="Inspector"
-          >
-            <PanelRight className="size-4" />
-            <span className="hidden text-xs lg:inline">Inspect</span>
-          </ToolButton>
-        )}
-      </div>
+      {!leading && <div className="flex-1" />}
 
       <div className="absolute left-1/2 flex -translate-x-1/2 items-center rounded-xl border border-border/50 bg-background/70 p-0.5 backdrop-blur-md">
         {DEVICES.map((d) => {
@@ -121,7 +90,16 @@ export function Toolbar({
         })}
       </div>
 
-      <div className="ml-auto flex items-center gap-0.5">
+      <div className="ml-auto flex shrink-0 items-center gap-0.5">
+        {onAddBlock && !compact && (
+          <button
+            type="button"
+            onClick={onAddBlock}
+            className="mr-1 hidden items-center gap-1 rounded-xl border border-border/50 px-2.5 py-1.5 text-xs font-medium text-foreground hover:bg-muted sm:inline-flex"
+          >
+            <Plus className="size-3.5" /> Add
+          </button>
+        )}
         <button
           onClick={() => undo()}
           disabled={!canUndo}
@@ -143,19 +121,19 @@ export function Toolbar({
             href={viewUrl}
             target="_blank"
             rel="noreferrer"
-            title="View live site"
-            className="ml-1 hidden items-center gap-1 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground lg:flex"
+            title="Preview live site"
+            className="ml-0.5 hidden items-center gap-1 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground sm:flex"
           >
-            <ExternalLink className="size-3.5" /> Preview
+            <ExternalLink className="size-3.5" />
           </a>
         )}
-        <span className="mx-1 w-12 text-right text-[11px] text-muted-foreground/70">
-          {saving === "saving" ? "Saving…" : saving === "saved" ? "Saved" : ""}
+        <span className="mx-1 hidden w-10 text-right text-[10px] text-muted-foreground/70 sm:block">
+          {saving === "saving" ? "…" : saving === "saved" ? "Saved" : ""}
         </span>
         {onPublish && (
           <button
             onClick={onPublish}
-            className="rounded-xl bg-primary px-3.5 py-1.5 text-sm font-semibold text-primary-foreground shadow-sm transition hover:opacity-90 sm:px-4"
+            className="rounded-xl bg-primary px-3.5 py-1.5 text-sm font-semibold text-primary-foreground shadow-sm transition hover:opacity-90"
           >
             Publish
           </button>
@@ -164,30 +142,3 @@ export function Toolbar({
     </header>
   );
 }
-
-function ToolButton({
-  active,
-  onClick,
-  title,
-  children,
-}: {
-  active?: boolean;
-  onClick: () => void;
-  title: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <button
-      onClick={onClick}
-      title={title}
-      className={cn(
-        "flex items-center gap-1.5 rounded-xl px-2 py-1.5 sm:px-2.5",
-        active
-          ? "bg-secondary text-secondary-foreground"
-          : "text-muted-foreground hover:bg-muted hover:text-foreground",
-      )}
-    >
-      {children}
-    </button>
-  );
-}

package/src/editor/index.tsx

@@ -2,7 +2,13 @@
 
 /** Client editor entry. Production rendering lives at
  *  "@jimmy_harika/websitekit/renderer"; the model/registry at the package root. */
-export { PageBuilder, type PageBuilderProps } from "./PageBuilder";
+export {
+  PageBuilder,
+  type PageBuilderProps,
+  type HostRailItem,
+  type DockMode,
+} from "./PageBuilder";
+export { EditorDock, EditorRail } from "./EditorDock";
 export { type TemplateMeta } from "./TemplateGallery";
 export { type Device } from "./ui-context";
 export { type EditorCapabilities } from "./edit-primitives";