@jimmy_harika/websitekit 0.5.1 → 0.5.3

package/package.json

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

@@ -74,7 +74,7 @@ export function Canvas({ catalog }: { catalog: Catalog }) {
 
   return (
     <div
-      className="flex-1 overflow-auto bg-muted p-4 sm:p-6"
+      className="flex-1 overflow-auto bg-transparent p-3 sm:p-5 md:p-6"
       onClick={() => select(null)}
     >
       <div

package/src/editor/PageBuilder.tsx

@@ -1,14 +1,12 @@
 "use client";
 
 /**
- * Top-level editor. The app wires it with a `catalog`, an `initialDocument`,
- * and capability callbacks (autosave via `onChange`, `onPublish`, `uploadImage`,
- * optional `templates`). Owns the store, editor UI state, and the layout:
- * top toolbar · [design panel] · canvas · [inspector] · overlays (library,
- * templates).
+ * 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.
  */
 import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { List, Palette, Plus, Sliders, X } from "lucide-react";
+import { List, Palette, PanelRight, Plus, Sliders, X } from "lucide-react";
 import type { PageDocument } from "../model";
 import type { Catalog } from "../registry";
 import { BuilderProvider, useBuilder, useCreateBuilderStore } from "../store";
@@ -22,21 +20,27 @@ import { ThemePanel } from "./ThemePanel";
 import { SectionsPanel } from "./SectionsPanel";
 import { TemplateGallery, type TemplateMeta } from "./TemplateGallery";
 import { useEditorShortcuts } from "./shortcuts";
+import { cn } from "../lib/cn";
 
 export interface PageBuilderProps {
   catalog: Catalog;
   initialDocument: PageDocument;
-  /** Fires (debounced upstream) whenever the document changes — for autosave. */
   onChange?: (doc: PageDocument) => void;
   onPublish?: (doc: PageDocument) => void | Promise<void>;
-  /** Upload a picked file, return its public URL (R2 / Convex storage). */
   uploadImage?: (file: File) => Promise<string>;
   templates?: TemplateMeta[];
   saving?: "idle" | "saving" | "saved";
-  /** Header gate content (e.g. exit link + site name), pinned far left. */
   leading?: ReactNode;
-  /** "View live site" link target. */
+  /** 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;
   viewUrl?: string;
+  /**
+   * floating (default) = max canvas, panels on-call.
+   * classic = permanent 3-column rails.
+   */
+  layout?: "floating" | "classic";
 }
 
 export function PageBuilder(props: PageBuilderProps) {
@@ -51,6 +55,8 @@ export function PageBuilder(props: PageBuilderProps) {
   );
 }
 
+type LeftPanel = "sections" | "design" | null;
+
 function PageBuilderInner({
   catalog,
   onChange,
@@ -59,15 +65,24 @@ function PageBuilderInner({
   saving,
   leading,
   viewUrl,
+  railExtra,
+  hostPanel,
+  layout = "floating",
 }: PageBuilderProps) {
   const doc = useBuilder((s) => s.doc);
+  const selectedId = useBuilder((s) => s.selectedId);
   const [device, setDevice] = useState<Device>("desktop");
   const [libraryIndex, setLibraryIndex] = useState<number | null>(null);
-  const [inspectorOpen, setInspectorOpen] = useState(true);
+  const [inspectorOpen, setInspectorOpen] = useState(false);
   const [templatesOpen, setTemplatesOpen] = useState(false);
-  const [designOpen, setDesignOpen] = useState(false);
+  const [leftPanel, setLeftPanel] = useState<LeftPanel>("sections");
   const [mobilePanel, setMobilePanel] = useState<MobilePanel>(null);
 
+  // Open inspector when a section is selected (floating mode); keep open in classic.
+  useEffect(() => {
+    if (layout === "floating" && selectedId) setInspectorOpen(true);
+  }, [selectedId, layout]);
+
   const ui: EditorUi = useMemo(
     () => ({
       device,
@@ -85,7 +100,6 @@ function PageBuilderInner({
     [device, libraryIndex, inspectorOpen, templatesOpen, mobilePanel],
   );
 
-  // Autosave: emit document changes (skip the initial render).
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
   const firstRender = useRef(true);
@@ -97,55 +111,226 @@ function PageBuilderInner({
     onChangeRef.current?.(doc);
   }, [doc]);
 
-  // Keyboard shortcuts (⌘Z/⌘⇧Z, Delete, ⌘D, Esc, ⌘/, ⌘⇧P, ↑/↓).
-  // `ui` is passed in (not read from context) because this hook runs in
-  // PageBuilderInner, which sits ABOVE its own <EditorUiContext.Provider>.
   useEditorShortcuts({ ui, onPublish: onPublish ? () => onPublish(doc) : undefined });
 
+  const toggleLeft = (p: LeftPanel) =>
+    setLeftPanel((cur) => (cur === p ? null : p));
+
+  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>
+    );
+  }
+
+  // ── Floating layout (default): max canvas, panels on-call ──────────────
   return (
     <EditorUiContext.Provider value={ui}>
-      <div data-websitekit-editor className="flex h-full min-h-0 flex-col bg-muted">
+      <div
+        data-websitekit-editor
+        data-layout="floating"
+        className="relative flex h-full min-h-0 flex-col bg-transparent"
+      >
         <Toolbar
           onPublish={onPublish ? () => onPublish(doc) : undefined}
           saving={saving}
-          designOpen={designOpen}
-          onToggleDesign={() => setDesignOpen((v) => !v)}
+          designOpen={leftPanel === "design"}
+          onToggleDesign={() => toggleLeft("design")}
           hasTemplates={!!templates && templates.length > 0}
           leading={leading}
           viewUrl={viewUrl}
+          floating
+          inspectorOpen={inspectorOpen}
+          onToggleInspector={() => setInspectorOpen((v) => !v)}
+          sectionsOpen={leftPanel === "sections"}
+          onToggleSections={() => toggleLeft("sections")}
         />
-        <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">
-            {designOpen ? (
-              <>
-                <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} />
+
+        <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>
+
+          {/* 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>
             )}
-          </aside>
-          <Canvas catalog={catalog} />
-          {/* Desktop inspector rail */}
-          <aside className="hidden w-80 shrink-0 flex-col border-l border-border bg-card md:flex">
-            <Inspector catalog={catalog} />
-          </aside>
+
+            {/* Host panel (SEO / Domain / …) */}
+            {hostPanel}
+
+            {/* Floating inspector — only when open */}
+            {inspectorOpen && (
+              <FloatingCard
+                side="right"
+                onClose={() => setInspectorOpen(false)}
+                title="Inspector"
+                wide
+              >
+                <Inspector catalog={catalog} />
+              </FloatingCard>
+            )}
+          </div>
         </div>
+
         <MobileBar />
-        <MobileSheet catalog={catalog} designOpen={designOpen} />
+        <MobileSheet catalog={catalog} />
         <BlockLibrary catalog={catalog} />
         {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>
+        <EditorStyle />
       </div>
     </EditorUiContext.Provider>
   );
 }
 
-/** Mobile bottom tab bar — the only way to reach panels on < md. */
+function RailBtn({
+  active,
+  onClick,
+  title,
+  children,
+}: {
+  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;
+}) {
+  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>
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded-lg p-1 text-muted-foreground transition hover:bg-muted hover:text-foreground"
+          aria-label="Close panel"
+        >
+          <X className="size-3.5" />
+        </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);
@@ -163,7 +348,7 @@ function MobileBar() {
     </button>
   );
   return (
-    <nav className="flex shrink-0 items-stretch border-t border-border bg-card px-1 pb-[env(safe-area-inset-bottom)] md:hidden">
+    <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"
@@ -179,8 +364,7 @@ function MobileBar() {
   );
 }
 
-/** Bottom-sheet overlay rendering the active mobile panel. */
-function MobileSheet({ catalog, designOpen }: { catalog: Catalog; designOpen: boolean }) {
+function MobileSheet({ catalog }: { catalog: Catalog }) {
   const ui = useEditorUi();
   if (ui.mobilePanel === null) return null;
   return (
@@ -190,10 +374,14 @@ function MobileSheet({ catalog, designOpen }: { catalog: Catalog; designOpen: bo
         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 pb-[env(safe-area-inset-bottom)]">
+      <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"}
+            {ui.mobilePanel === "sections"
+              ? "Sections"
+              : ui.mobilePanel === "design"
+                ? "Design"
+                : "Section"}
           </span>
           <button
             onClick={() => ui.setMobilePanel(null)}

package/src/editor/Toolbar.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-/** Single cohesive editor header: gate (exit + site name) · design · templates ·
- *  device preview · undo/redo · view · save status · publish. Theme-optimized
- *  (bg-card surface, semantic tokens). */
+/** Editor header — glass-friendly surface, device switcher, undo/redo, publish. */
 import type { ReactNode } from "react";
 import {
   ExternalLink,
   LayoutGrid,
+  List,
   Monitor,
   Palette,
+  PanelRight,
   Redo2,
   Smartphone,
   Tablet,
@@ -32,16 +32,24 @@ export function Toolbar({
   hasTemplates,
   leading,
   viewUrl,
+  floating,
+  inspectorOpen,
+  onToggleInspector,
+  sectionsOpen,
+  onToggleSections,
 }: {
   onPublish?: () => void;
   saving?: "idle" | "saving" | "saved";
   designOpen: boolean;
   onToggleDesign: () => void;
   hasTemplates?: boolean;
-  /** Gate content (exit + site name), pinned far left. */
   leading?: ReactNode;
-  /** "View live site" link target. */
   viewUrl?: string;
+  floating?: boolean;
+  inspectorOpen?: boolean;
+  onToggleInspector?: () => void;
+  sectionsOpen?: boolean;
+  onToggleSections?: () => void;
 }) {
   const ui = useEditorUi();
   const undo = useTemporal((s) => s.undo);
@@ -50,26 +58,49 @@ export function Toolbar({
   const canRedo = useTemporal((s) => s.futureStates.length > 0);
 
   return (
-    <header className="relative z-40 flex h-12 shrink-0 items-center gap-1 border-b border-border bg-card px-2 text-foreground sm:px-3">
+    <header
+      className={cn(
+        "relative z-40 flex h-12 shrink-0 items-center gap-1 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">
+        <div className="flex min-w-0 items-center gap-1.5 pr-1.5 sm:border-r sm:border-border/40">
           {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 md:inline">Design</span>
+          <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 md:inline">Templates</span>
+            <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>
 
-      <div className="absolute left-1/2 flex -translate-x-1/2 items-center rounded-lg border border-border bg-background p-0.5">
+      <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) => {
           const Icon = d.icon;
           return (
@@ -78,9 +109,9 @@ export function Toolbar({
               title={d.label}
               onClick={() => ui.setDevice(d.id)}
               className={cn(
-                "rounded-md p-1.5 transition",
+                "rounded-lg p-1.5 transition",
                 ui.device === d.id
-                  ? "bg-secondary text-secondary-foreground"
+                  ? "bg-secondary text-secondary-foreground shadow-sm"
                   : "text-muted-foreground hover:bg-muted",
               )}
             >
@@ -95,7 +126,7 @@ export function Toolbar({
           onClick={() => undo()}
           disabled={!canUndo}
           title="Undo"
-          className="rounded-md p-1.5 text-muted-foreground hover:bg-muted disabled:opacity-30"
+          className="rounded-lg p-1.5 text-muted-foreground hover:bg-muted disabled:opacity-30"
         >
           <Undo2 className="size-4" />
         </button>
@@ -103,7 +134,7 @@ export function Toolbar({
           onClick={() => redo()}
           disabled={!canRedo}
           title="Redo"
-          className="rounded-md p-1.5 text-muted-foreground hover:bg-muted disabled:opacity-30"
+          className="rounded-lg p-1.5 text-muted-foreground hover:bg-muted disabled:opacity-30"
         >
           <Redo2 className="size-4" />
         </button>
@@ -113,9 +144,9 @@ export function Toolbar({
             target="_blank"
             rel="noreferrer"
             title="View live site"
-            className="ml-1 hidden items-center gap-1 rounded-md px-2 py-1.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground lg:flex"
+            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"
           >
-            <ExternalLink className="size-3.5" /> View
+            <ExternalLink className="size-3.5" /> Preview
           </a>
         )}
         <span className="mx-1 w-12 text-right text-[11px] text-muted-foreground/70">
@@ -124,7 +155,7 @@ export function Toolbar({
         {onPublish && (
           <button
             onClick={onPublish}
-            className="rounded-lg bg-primary px-3.5 py-1.5 text-sm font-medium 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 sm:px-4"
           >
             Publish
           </button>
@@ -150,7 +181,7 @@ function ToolButton({
       onClick={onClick}
       title={title}
       className={cn(
-        "flex items-center gap-1.5 rounded-md px-2 py-1.5 sm:px-2.5",
+        "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",

package/src/editor/edit-primitives.tsx

@@ -14,6 +14,7 @@ import {
   useRef,
   useState,
   type ChangeEvent,
+  type DragEvent as ReactDragEvent,
   type ElementType,
   type FocusEvent as ReactFocusEvent,
   type KeyboardEvent as ReactKeyboardEvent,
@@ -138,17 +139,17 @@ function EditableImage({ field, src, alt, className, style, width, height, prior
     inputRef.current?.click();
   };
 
-  const onDragOver = (e: React.DragEvent) => {
+  const onDragOver = (e: ReactDragEvent) => {
     e.preventDefault();
     e.stopPropagation();
     setDragOver(true);
   };
-  const onDragLeave = (e: React.DragEvent) => {
+  const onDragLeave = (e: ReactDragEvent) => {
     e.preventDefault();
     e.stopPropagation();
     setDragOver(false);
   };
-  const onDrop = (e: React.DragEvent) => {
+  const onDrop = (e: ReactDragEvent) => {
     e.preventDefault();
     e.stopPropagation();
     setDragOver(false);