@jimmy_harika/websitekit 0.5.3 → 0.5.5

package/package.json

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

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

package/src/editor/EditorDock.tsx

@@ -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-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",
+        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 bg-card/80 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-primary text-primary-foreground 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/InsertPoint.tsx

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

package/src/editor/Inspector.tsx

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