@jimmy_harika/websitekit 0.5.3 → 0.5.5

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 (layout === "floating" && selectedId) setInspectorOpen(true);
-  }, [selectedId, layout]);
+    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 (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,213 @@ 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} embedded />}
+              {dock === "design" && <ThemePanel />}
+              {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" && 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/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) => {