@jimmy_harika/websitekit 0.3.1

package/src/editor/PageBuilder.tsx

@@ -0,0 +1,217 @@
+"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).
+ */
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { List, Palette, Plus, Sliders, X } 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 { Toolbar } from "./Toolbar";
+import { Canvas } from "./Canvas";
+import { Inspector } from "./Inspector";
+import { BlockLibrary } from "./BlockLibrary";
+import { ThemePanel } from "./ThemePanel";
+import { SectionsPanel } from "./SectionsPanel";
+import { TemplateGallery, type TemplateMeta } from "./TemplateGallery";
+import { useEditorShortcuts } from "./shortcuts";
+
+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. */
+  viewUrl?: string;
+}
+
+export function PageBuilder(props: PageBuilderProps) {
+  const store = useCreateBuilderStore(props.initialDocument);
+  const caps = useMemo(() => ({ uploadImage: props.uploadImage }), [props.uploadImage]);
+  return (
+    <BuilderProvider store={store}>
+      <EditorCapsContext.Provider value={caps}>
+        <PageBuilderInner {...props} />
+      </EditorCapsContext.Provider>
+    </BuilderProvider>
+  );
+}
+
+function PageBuilderInner({
+  catalog,
+  onChange,
+  onPublish,
+  templates,
+  saving,
+  leading,
+  viewUrl,
+}: PageBuilderProps) {
+  const doc = useBuilder((s) => s.doc);
+  const [device, setDevice] = useState<Device>("desktop");
+  const [libraryIndex, setLibraryIndex] = useState<number | null>(null);
+  const [inspectorOpen, setInspectorOpen] = useState(true);
+  const [templatesOpen, setTemplatesOpen] = useState(false);
+  const [designOpen, setDesignOpen] = useState(false);
+  const [mobilePanel, setMobilePanel] = useState<MobilePanel>(null);
+
+  const ui: EditorUi = useMemo(
+    () => ({
+      device,
+      setDevice,
+      libraryIndex,
+      openLibrary: setLibraryIndex,
+      closeLibrary: () => setLibraryIndex(null),
+      inspectorOpen,
+      setInspectorOpen,
+      templatesOpen,
+      setTemplatesOpen,
+      mobilePanel,
+      setMobilePanel,
+    }),
+    [device, libraryIndex, inspectorOpen, templatesOpen, mobilePanel],
+  );
+
+  // Autosave: emit document changes (skip the initial render).
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const firstRender = useRef(true);
+  useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+    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 });
+
+  return (
+    <EditorUiContext.Provider value={ui}>
+      <div data-websitekit-editor className="flex h-full min-h-0 flex-col bg-muted">
+        <Toolbar
+          onPublish={onPublish ? () => onPublish(doc) : undefined}
+          saving={saving}
+          designOpen={designOpen}
+          onToggleDesign={() => setDesignOpen((v) => !v)}
+          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">
+            {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} />
+            )}
+          </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>
+        </div>
+        <MobileBar />
+        <MobileSheet catalog={catalog} designOpen={designOpen} />
+        <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>
+      </div>
+    </EditorUiContext.Provider>
+  );
+}
+
+/** Mobile bottom tab bar — the only way to reach panels on < md. */
+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 bg-card px-1 pb-[env(safe-area-inset-bottom)] 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>
+  );
+}
+
+/** Bottom-sheet overlay rendering the active mobile panel. */
+function MobileSheet({ catalog, designOpen }: { catalog: Catalog; designOpen: boolean }) {
+  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 pb-[env(safe-area-inset-bottom)]">
+        <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

@@ -0,0 +1,127 @@
+"use client";
+
+/**
+ * Wraps one rendered section with editor chrome: selection outline, a floating
+ * toolbar (drag handle · change layout · duplicate · delete), and drop-target
+ * wiring. Renders the catalog Component with `edit` injected so inline fields
+ * are editable.
+ */
+import { createElement, useRef, useState, type ComponentType } from "react";
+import { Copy, EyeOff, GripVertical, LayoutTemplate, Monitor, Smartphone, Tablet, Trash2 } from "lucide-react";
+import type { Section } from "../model";
+import { type SectionDefinition, resolveProps } from "../registry";
+import { useBuilder } from "../store";
+import { cn } from "../lib/cn";
+import { EditSectionContext, editPrimitives } from "./edit-primitives";
+import { useDraggable, useDropTarget } from "./dnd";
+import { useEditorUi } from "./ui-context";
+
+export function SectionFrame({
+  section,
+  index,
+  def,
+}: {
+  section: Section;
+  index: number;
+  def: SectionDefinition;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLButtonElement>(null);
+  const [over, setOver] = useState(false);
+  const selected = useBuilder((s) => s.selectedId === section.id);
+  const select = useBuilder((s) => s.select);
+  const duplicate = useBuilder((s) => s.duplicateSection);
+  const remove = useBuilder((s) => s.removeSection);
+  const ui = useEditorUi();
+
+  useDraggable(ref, { kind: "section", id: section.id, index }, handleRef);
+  useDropTarget(ref, { id: section.id, index }, setOver);
+
+  const props = resolveProps(def, section.props);
+  const Comp = def.Component as ComponentType<Record<string, unknown>>;
+  const hasLayouts = (def.variants?.length ?? 0) > 1;
+
+  const stop = (fn: () => void) => (e: { stopPropagation: () => void }) => {
+    e.stopPropagation();
+    fn();
+  };
+
+  return (
+    <EditSectionContext.Provider value={section.id}>
+      <div
+        ref={ref}
+        onClick={stop(() => {
+          select(section.id);
+          ui.setInspectorOpen(true);
+        })}
+        className="group/sec relative"
+      >
+        <div
+          aria-hidden
+          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",
+          )}
+        />
+        <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",
+            selected
+              ? "opacity-100"
+              : "pointer-events-none opacity-0 group-hover/sec:pointer-events-auto group-hover/sec:opacity-100",
+          )}
+        >
+          <button
+            ref={handleRef}
+            title="Drag to reorder"
+            className="cursor-grab rounded p-1.5 hover:bg-accent active:cursor-grabbing"
+          >
+            <GripVertical className="size-4" />
+          </button>
+          {hasLayouts && (
+            <button
+              title="Change layout"
+              onClick={stop(() => {
+                select(section.id);
+                ui.setInspectorOpen(true);
+              })}
+              className="rounded p-1.5 hover:bg-accent"
+            >
+              <LayoutTemplate className="size-4" />
+            </button>
+          )}
+          <button
+            title="Duplicate"
+            onClick={stop(() => duplicate(section.id))}
+            className="rounded p-1.5 hover:bg-accent"
+          >
+            <Copy className="size-4" />
+          </button>
+          <button
+            title="Delete"
+            onClick={stop(() => remove(section.id))}
+            className="rounded p-1.5 text-red-600 hover:bg-red-50"
+          >
+            <Trash2 className="size-4" />
+          </button>
+        </div>
+        {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"
+          >
+            <EyeOff className="size-3.5" />
+            {section.hideOn.map((bp) => {
+              const Icon = bp === "mobile" ? Smartphone : bp === "tablet" ? Tablet : Monitor;
+              return <Icon key={bp} className="size-3.5" />;
+            })}
+          </div>
+        )}
+        {createElement(Comp, { ...props, edit: editPrimitives })}
+      </div>
+    </EditSectionContext.Provider>
+  );
+}

package/src/editor/SectionsPanel.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+/**
+ * Persistent left rail: a visible, drag-to-reorder list of the page's sections
+ * (the "blocks UI"). Click a row to select + edit it; drag the handle to
+ * reorder; the Add button opens the block library. Reorder rides the same
+ * pragmatic-drag-and-drop monitor as the canvas (kind "section").
+ */
+import { useRef, useState } from "react";
+import { ChevronDown, ChevronUp, GripVertical, Plus, Trash2 } from "lucide-react";
+import { type Catalog, getDefinition } from "../registry";
+import { useBuilder } from "../store";
+import { useEditorUi } from "./ui-context";
+import { useDraggable, useDropTarget } from "./dnd";
+import { cn } from "../lib/cn";
+
+export function SectionsPanel({ catalog }: { catalog: Catalog }) {
+  const sections = useBuilder((s) => s.doc.sections);
+  const ui = useEditorUi();
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="flex items-center justify-between border-b border-border px-3 py-2.5">
+        <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          Sections
+        </span>
+        <button
+          onClick={() => ui.openLibrary(sections.length)}
+          className="flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground transition hover:opacity-90"
+        >
+          <Plus className="size-3.5" /> Add
+        </button>
+      </div>
+      <div className="min-h-0 flex-1 overflow-auto p-2">
+        {sections.length === 0 ? (
+          <button
+            onClick={() => ui.openLibrary(0)}
+            className="flex w-full flex-col items-center gap-1.5 rounded-lg border border-dashed border-border px-3 py-8 text-center text-xs text-muted-foreground transition hover:border-foreground/30 hover:text-foreground"
+          >
+            <Plus className="size-5" />
+            Add your first section
+          </button>
+        ) : (
+          <ul className="space-y-0.5">
+            {sections.map((s, i) => (
+              <SectionRow
+                key={s.id}
+                catalog={catalog}
+                id={s.id}
+                type={s.type}
+                index={i}
+                total={sections.length}
+              />
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SectionRow({
+  catalog,
+  id,
+  type,
+  index,
+  total,
+}: {
+  catalog: Catalog;
+  id: string;
+  type: string;
+  index: number;
+  total: number;
+}) {
+  const ref = useRef<HTMLLIElement>(null);
+  const handleRef = useRef<HTMLButtonElement>(null);
+  const [over, setOver] = useState(false);
+  const selected = useBuilder((s) => s.selectedId === id);
+  const select = useBuilder((s) => s.select);
+  const remove = useBuilder((s) => s.removeSection);
+  const move = useBuilder((s) => s.moveSection);
+  const ui = useEditorUi();
+  const def = getDefinition(catalog, type);
+
+  useDraggable(ref, { kind: "section", id, index }, handleRef);
+  useDropTarget(ref, { id, index }, setOver);
+
+  const stop = (fn: () => void) => (e: { stopPropagation: () => void }) => {
+    e.stopPropagation();
+    fn();
+  };
+
+  return (
+    <li
+      ref={ref}
+      onClick={() => {
+        select(id);
+        ui.setInspectorOpen(true);
+      }}
+      className={cn(
+        "group/row relative flex items-center gap-1.5 rounded-md px-1.5 py-2 text-sm transition",
+        selected
+          ? "bg-secondary text-secondary-foreground"
+          : "text-muted-foreground hover:bg-muted hover:text-foreground",
+        over && "ring-1 ring-foreground/40",
+      )}
+    >
+      <button
+        ref={handleRef}
+        title="Drag to reorder"
+        onClick={(e) => e.stopPropagation()}
+        className="cursor-grab text-muted-foreground/50 transition hover:text-foreground active:cursor-grabbing"
+      >
+        <GripVertical className="size-4" />
+      </button>
+      <span className="flex-1 truncate">{def?.label ?? type}</span>
+      <div
+        className={cn(
+          "flex items-center opacity-0 transition group-hover/row:opacity-100",
+          selected && "opacity-100",
+        )}
+      >
+        <button
+          title="Move up"
+          disabled={index === 0}
+          onClick={stop(() => move(index, index - 1))}
+          className="rounded p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30"
+        >
+          <ChevronUp className="size-3.5" />
+        </button>
+        <button
+          title="Move down"
+          disabled={index === total - 1}
+          onClick={stop(() => move(index, index + 1))}
+          className="rounded p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30"
+        >
+          <ChevronDown className="size-3.5" />
+        </button>
+        <button
+          title="Delete section"
+          onClick={stop(() => remove(id))}
+          className="rounded p-0.5 text-muted-foreground hover:text-red-500"
+        >
+          <Trash2 className="size-3.5" />
+        </button>
+      </div>
+    </li>
+  );
+}

package/src/editor/TemplateGallery.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+/** Full-screen template picker. Solid opaque surface (bg-card — the app paints a
+ *  translucent body, so bg-background would show the canvas through). */
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import type { PageDocument, TemplateMeta } from "../model";
+import { useBuilder } from "../store";
+import { useEditorUi } from "./ui-context";
+import { cn } from "../lib/cn";
+
+export type { TemplateMeta } from "../model";
+
+export function TemplateGallery({ templates }: { templates: TemplateMeta[] }) {
+  const ui = useEditorUi();
+  const replace = useBuilder((s) => s.replaceDocument);
+  const cats = Array.from(new Set(templates.map((t) => t.category)));
+  const [active, setActive] = useState(cats[0] ?? "");
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!ui.templatesOpen || !mounted) return null;
+  const items = templates.filter((t) => t.category === active);
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100] overflow-auto bg-card text-foreground">
+      <div className="sticky top-0 z-10 flex items-center justify-between border-b border-border bg-card px-6 py-4">
+        <div>
+          <h2 className="text-lg font-semibold">Choose a template</h2>
+          <p className="text-xs text-muted-foreground">
+            Starts a fresh page — replaces your current one. Your theme is kept.
+          </p>
+        </div>
+        <button
+          onClick={() => ui.setTemplatesOpen(false)}
+          className="rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          <X className="size-5" />
+        </button>
+      </div>
+      <div className="mx-auto max-w-6xl px-6 py-8">
+        {cats.length > 1 && (
+          <div className="mb-6 flex flex-wrap gap-2">
+            {cats.map((c) => (
+              <button
+                key={c}
+                onClick={() => setActive(c)}
+                className={cn(
+                  "rounded-full px-4 py-1.5 text-sm transition",
+                  active === c
+                    ? "bg-secondary text-secondary-foreground ring-1 ring-border"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                )}
+              >
+                {c}
+              </button>
+            ))}
+          </div>
+        )}
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {items.map((t) => (
+            <button
+              key={t.id}
+              onClick={() => {
+                replace(t.build());
+                ui.setTemplatesOpen(false);
+              }}
+              className="group overflow-hidden rounded-xl border border-border bg-background text-left transition hover:border-foreground/30 hover:shadow-lg"
+            >
+              <div className="aspect-[4/3] overflow-hidden bg-muted">
+                {t.thumb ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={t.thumb}
+                    alt={t.name}
+                    className="size-full object-cover transition duration-300 group-hover:scale-105"
+                  />
+                ) : (
+                  <div className="flex size-full items-center justify-center text-sm text-muted-foreground/50">
+                    {t.name}
+                  </div>
+                )}
+              </div>
+              <div className="p-4">
+                <h3 className="font-medium">{t.name}</h3>
+                {t.description && (
+                  <p className="mt-1 text-sm text-muted-foreground">{t.description}</p>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}