@jimmy_harika/websitekit 0.3.1

package/src/editor/ThemePanel.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+/** Theme controls: curated font pairings + palettes + spacing/radius. */
+import { FONT_PAIRS, PALETTES } from "../theme";
+import { useBuilder } from "../store";
+import type { ThemeTokens } from "../model";
+import { cn } from "../lib/cn";
+
+export function ThemePanel() {
+  const theme = useBuilder((s) => s.doc.theme);
+  const setTheme = useBuilder((s) => s.setTheme);
+
+  return (
+    <div className="space-y-6 p-4">
+      <Section title="Fonts">
+        <div className="space-y-2">
+          {FONT_PAIRS.map((p) => (
+            <button
+              key={p.id}
+              onClick={() => setTheme({ fontHeading: p.heading, fontBody: p.body })}
+              className={cn(
+                "flex w-full items-baseline justify-between gap-2 rounded-md border px-3 py-2 text-left",
+                theme.fontHeading === p.heading
+                  ? "border-foreground/30 bg-secondary"
+                  : "border-border hover:border-foreground/30",
+              )}
+            >
+              <span style={{ fontFamily: `'${p.heading}', serif` }} className="text-lg">
+                {p.label}
+              </span>
+              <span className="truncate text-[10px] text-muted-foreground/70">
+                {p.heading} / {p.body}
+              </span>
+            </button>
+          ))}
+        </div>
+      </Section>
+
+      <Section title="Palette">
+        <div className="grid grid-cols-2 gap-2">
+          {PALETTES.map((p) => (
+            <button
+              key={p.id}
+              onClick={() => setTheme({ colors: p.colors })}
+              className={cn(
+                "flex items-center gap-2 rounded-md border px-3 py-2",
+                theme.colors.accent === p.colors.accent && theme.colors.bg === p.colors.bg
+                  ? "border-foreground/30 bg-secondary"
+                  : "border-border hover:border-foreground/30",
+              )}
+            >
+              <span className="flex gap-1">
+                {[p.colors.bg, p.colors.text, p.colors.accent].map((c, i) => (
+                  <span
+                    key={i}
+                    className="size-4 rounded-full border border-black/10"
+                    style={{ background: c }}
+                  />
+                ))}
+              </span>
+              <span className="text-xs">{p.label}</span>
+            </button>
+          ))}
+        </div>
+      </Section>
+
+      <Section title="Spacing">
+        <Segmented
+          options={[
+            { value: "tight", label: "Tight" },
+            { value: "normal", label: "Normal" },
+            { value: "roomy", label: "Roomy" },
+          ]}
+          value={theme.spacing}
+          onChange={(v) => setTheme({ spacing: v as ThemeTokens["spacing"] })}
+        />
+      </Section>
+
+      <Section title="Corners">
+        <Segmented
+          options={[
+            { value: "none", label: "None" },
+            { value: "sm", label: "S" },
+            { value: "md", label: "M" },
+            { value: "lg", label: "L" },
+          ]}
+          value={theme.radius}
+          onChange={(v) => setTheme({ radius: v as ThemeTokens["radius"] })}
+        />
+      </Section>
+    </div>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+        {title}
+      </h4>
+      {children}
+    </div>
+  );
+}
+
+function Segmented({
+  options,
+  value,
+  onChange,
+}: {
+  options: { value: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div className="inline-flex rounded-md border border-border p-0.5">
+      {options.map((o) => (
+        <button
+          key={o.value}
+          onClick={() => onChange(o.value)}
+          className={cn(
+            "rounded px-3 py-1 text-xs",
+            value === o.value ? "bg-foreground text-background" : "text-muted-foreground hover:bg-muted",
+          )}
+        >
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/editor/Toolbar.tsx

@@ -0,0 +1,162 @@
+"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). */
+import type { ReactNode } from "react";
+import {
+  ExternalLink,
+  LayoutGrid,
+  Monitor,
+  Palette,
+  Redo2,
+  Smartphone,
+  Tablet,
+  Undo2,
+} from "lucide-react";
+import { useTemporal } from "../store";
+import { type Device, useEditorUi } from "./ui-context";
+import { cn } from "../lib/cn";
+
+const DEVICES: { id: Device; icon: typeof Monitor; label: string }[] = [
+  { id: "desktop", icon: Monitor, label: "Desktop" },
+  { id: "tablet", icon: Tablet, label: "Tablet" },
+  { id: "mobile", icon: Smartphone, label: "Mobile" },
+];
+
+export function Toolbar({
+  onPublish,
+  saving = "idle",
+  designOpen,
+  onToggleDesign,
+  hasTemplates,
+  leading,
+  viewUrl,
+}: {
+  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;
+}) {
+  const ui = useEditorUi();
+  const undo = useTemporal((s) => s.undo);
+  const redo = useTemporal((s) => s.redo);
+  const canUndo = useTemporal((s) => s.pastStates.length > 0);
+  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">
+      {leading && (
+        <div className="flex min-w-0 items-center gap-1.5 pr-1.5 sm:border-r sm:border-border">
+          {leading}
+        </div>
+      )}
+      <div className="flex items-center gap-0.5 pl-0.5">
+        <ToolButton active={designOpen} onClick={onToggleDesign} title="Design">
+          <Palette className="size-4" />
+          <span className="hidden text-xs md: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>
+          </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">
+        {DEVICES.map((d) => {
+          const Icon = d.icon;
+          return (
+            <button
+              key={d.id}
+              title={d.label}
+              onClick={() => ui.setDevice(d.id)}
+              className={cn(
+                "rounded-md p-1.5 transition",
+                ui.device === d.id
+                  ? "bg-secondary text-secondary-foreground"
+                  : "text-muted-foreground hover:bg-muted",
+              )}
+            >
+              <Icon className="size-4" />
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="ml-auto flex items-center gap-0.5">
+        <button
+          onClick={() => undo()}
+          disabled={!canUndo}
+          title="Undo"
+          className="rounded-md p-1.5 text-muted-foreground hover:bg-muted disabled:opacity-30"
+        >
+          <Undo2 className="size-4" />
+        </button>
+        <button
+          onClick={() => redo()}
+          disabled={!canRedo}
+          title="Redo"
+          className="rounded-md p-1.5 text-muted-foreground hover:bg-muted disabled:opacity-30"
+        >
+          <Redo2 className="size-4" />
+        </button>
+        {viewUrl && (
+          <a
+            href={viewUrl}
+            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"
+          >
+            <ExternalLink className="size-3.5" /> View
+          </a>
+        )}
+        <span className="mx-1 w-12 text-right text-[11px] text-muted-foreground/70">
+          {saving === "saving" ? "Saving…" : saving === "saved" ? "Saved" : ""}
+        </span>
+        {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"
+          >
+            Publish
+          </button>
+        )}
+      </div>
+    </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-md 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/dnd.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+/**
+ * Drag wiring on @atlaskit/pragmatic-drag-and-drop. Sections are draggable +
+ * drop targets; block-library variants are draggable. A single monitor in the
+ * Canvas resolves drops (reorder existing / insert from library) using the
+ * pointer position vs. the target's mid-line to pick an edge.
+ */
+import { useEffect, type RefObject } from "react";
+import {
+  draggable,
+  dropTargetForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+
+export type DragData =
+  | { kind: "section"; id: string; index: number }
+  | { kind: "lib-variant"; type: string; variant?: string };
+
+/** Make an element draggable, optionally via a handle. */
+export function useDraggable(
+  elementRef: RefObject<HTMLElement | null>,
+  data: DragData,
+  handleRef?: RefObject<HTMLElement | null>,
+) {
+  const key = JSON.stringify(data);
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    return draggable({
+      element,
+      dragHandle: handleRef?.current ?? undefined,
+      getInitialData: () => data as unknown as Record<string, unknown>,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+}
+
+/** Mark an element as a drop target carrying its section index. */
+export function useDropTarget(
+  elementRef: RefObject<HTMLElement | null>,
+  data: { id: string; index: number },
+  onOver?: (isOver: boolean) => void,
+) {
+  const key = `${data.id}:${data.index}`;
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    return dropTargetForElements({
+      element,
+      getData: () => ({ targetIndex: data.index }),
+      onDragEnter: () => onOver?.(true),
+      onDragLeave: () => onOver?.(false),
+      onDrop: () => onOver?.(false),
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+}
+
+export {
+  monitorForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

package/src/editor/edit-primitives.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+/**
+ * Editor-side editable primitives. The canvas injects `editPrimitives` into each
+ * section's `edit` prop; blocks render them via `renderText`/`renderImage`.
+ * Plain text is edited in place (contentEditable, commit on blur); images open a
+ * file picker wired to the app's `uploadImage` capability.
+ */
+import {
+  createContext,
+  createElement,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ElementType,
+  type FocusEvent as ReactFocusEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
+  type RefObject,
+} from "react";
+import type { EditPrimitives, ImageEditProps, TextEditProps } from "../editable";
+import { useBuilder } from "../store";
+import { cn } from "../lib/cn";
+
+/** Id of the section currently being rendered on the canvas. */
+export const EditSectionContext = createContext<string | null>(null);
+
+export interface EditorCapabilities {
+  uploadImage?: (file: File) => Promise<string>;
+}
+export const EditorCapsContext = createContext<EditorCapabilities>({});
+
+function EditableText({
+  field,
+  value,
+  as,
+  className,
+  style,
+  placeholder,
+  multiline,
+}: TextEditProps) {
+  const Tag = (as ?? "span") as ElementType;
+  const sectionId = useContext(EditSectionContext);
+  const updateProps = useBuilder((s) => s.updateProps);
+  const ref = useRef<HTMLElement>(null) as RefObject<HTMLElement>;
+
+  // Set textContent imperatively — never let React reconcile children here,
+  // because a parent re-render mid-keystroke would reset the DOM and lose the
+  // cursor + any uncommitted characters. Skip while focused (user owns the DOM).
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (typeof document !== "undefined" && document.activeElement === el) return;
+    const next = value ?? "";
+    if (el.textContent !== next) el.textContent = next;
+  }, [value]);
+
+  return createElement(
+    Tag,
+    {
+      ref,
+      className: cn("outline-none focus:ring-2 focus:ring-sky-400/60 rounded-sm", className),
+      style,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      spellCheck: false,
+      "data-pb-field": field,
+      "data-pb-placeholder": placeholder ?? "",
+      onClick: (e: ReactMouseEvent) => e.stopPropagation(),
+      onBlur: (e: ReactFocusEvent<HTMLElement>) => {
+        if (!sectionId) return;
+        const text = e.currentTarget.textContent ?? "";
+        if (text !== value) updateProps(sectionId, { [field]: text });
+      },
+      onKeyDown: (e: ReactKeyboardEvent<HTMLElement>) => {
+        if (!multiline && e.key === "Enter") {
+          e.preventDefault();
+          e.currentTarget.blur();
+        }
+      },
+    },
+    // No React-managed children — textContent is set via the effect above so the
+    // user's cursor is never clobbered by a re-render.
+  );
+}
+
+function EditableImage({ field, src, alt, className, style, width, height, priority }: ImageEditProps) {
+  const sectionId = useContext(EditSectionContext);
+  const updateProps = useBuilder((s) => s.updateProps);
+  const caps = useContext(EditorCapsContext);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [busy, setBusy] = useState(false);
+  // Track object URLs we minted so we can revoke them (avoid leaks on replace/unmount).
+  const blobRef = useRef<string | null>(null);
+  useEffect(() => {
+    return () => {
+      if (blobRef.current) URL.revokeObjectURL(blobRef.current);
+    };
+  }, []);
+
+  async function onPick(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file || !sectionId) return;
+    setBusy(true);
+    try {
+      const usedFallback = !caps.uploadImage;
+      const url = caps.uploadImage
+        ? await caps.uploadImage(file)
+        : URL.createObjectURL(file);
+      if (usedFallback) {
+        if (blobRef.current) URL.revokeObjectURL(blobRef.current);
+        blobRef.current = url;
+      }
+      updateProps(sectionId, { [field]: url });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const open = (e: ReactMouseEvent) => {
+    e.stopPropagation();
+    inputRef.current?.click();
+  };
+
+  return (
+    <>
+      {src ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={src}
+          alt={alt ?? ""}
+          width={width}
+          height={height}
+          loading={priority ? "eager" : "lazy"}
+          fetchPriority={priority ? "high" : "auto"}
+          className={cn("cursor-pointer outline-2 outline-offset-2 outline-transparent hover:outline-sky-400", className)}
+          style={style}
+          title={busy ? "Uploading…" : "Click to replace"}
+          onClick={open}
+        />
+      ) : (
+        <div
+          className={cn(
+            "flex cursor-pointer items-center justify-center bg-black/[0.04] text-[11px] uppercase tracking-wider opacity-50 outline-2 outline-dashed outline-black/15 hover:outline-sky-400",
+            className,
+          )}
+          style={style}
+          onClick={open}
+        >
+          {busy ? "Uploading…" : "Add image"}
+        </div>
+      )}
+      <input ref={inputRef} type="file" accept="image/*" hidden onChange={onPick} />
+    </>
+  );
+}
+
+export const editPrimitives: EditPrimitives = {
+  Text: EditableText,
+  Image: EditableImage,
+};

package/src/editor/index.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+/** 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 { type TemplateMeta } from "./TemplateGallery";
+export { type Device } from "./ui-context";
+export { type EditorCapabilities } from "./edit-primitives";

package/src/editor/shortcuts.ts

@@ -0,0 +1,106 @@
+"use client";
+
+/**
+ * Editor keyboard shortcuts. Binds one keydown listener (refs keep it current
+ * without re-binding on every render). Ignored while typing in an input /
+ * textarea / contenteditable, EXCEPT global escapes (⌘⇧P publish, Esc).
+ *
+ *   ⌘Z / ⌘⇧Z  undo / redo
+ *   Delete    remove the selected section
+ *   ⌘D        duplicate the selected section
+ *   Esc       close the library / deselect
+ *   ⌘/        toggle the block library
+ *   ⌘⇧P       publish
+ *   ↑ / ↓     move the selected section up / down
+ */
+import { useEffect, useRef } from "react";
+import { useBuilder, useTemporal } from "../store";
+import type { EditorUi } from "./ui-context";
+
+function isTypingTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  return (
+    tag === "INPUT" ||
+    tag === "TEXTAREA" ||
+    tag === "SELECT" ||
+    target.isContentEditable
+  );
+}
+
+export function useEditorShortcuts({ ui, onPublish }: { ui: EditorUi; onPublish?: () => void }) {
+  const selectedId = useBuilder((s) => s.selectedId);
+  const sections = useBuilder((s) => s.doc.sections);
+  const select = useBuilder((s) => s.select);
+  const removeSection = useBuilder((s) => s.removeSection);
+  const duplicateSection = useBuilder((s) => s.duplicateSection);
+  const moveSection = useBuilder((s) => s.moveSection);
+  const undo = useTemporal((t) => t.undo);
+  const redo = useTemporal((t) => t.redo);
+
+  // Refs so the listener binds once and always reads current values.
+  const ref = useRef({ selectedId, sections, select, removeSection, duplicateSection, moveSection, undo, redo, ui, onPublish });
+  ref.current = { selectedId, sections, select, removeSection, duplicateSection, moveSection, undo, redo, ui, onPublish };
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      const s = ref.current;
+      const mod = e.metaKey || e.ctrlKey;
+      const typing = isTypingTarget(e.target);
+      const key = e.key;
+
+      // ⌘⇧P — publish (global; works even while typing).
+      if (mod && e.shiftKey && key.toLowerCase() === "p") {
+        if (s.onPublish) {
+          e.preventDefault();
+          s.onPublish();
+        }
+        return;
+      }
+      // Esc — close library, else deselect. Always available.
+      if (key === "Escape") {
+        if (s.ui.libraryIndex !== null) s.ui.closeLibrary();
+        else if (s.selectedId) s.select(null);
+        return;
+      }
+      // Everything else is ignored while typing.
+      if (typing) return;
+
+      if (mod && key.toLowerCase() === "z") {
+        e.preventDefault();
+        if (e.shiftKey) s.redo();
+        else s.undo();
+        return;
+      }
+      if (mod && key === "/") {
+        e.preventDefault();
+        if (s.ui.libraryIndex !== null) s.ui.closeLibrary();
+        else s.ui.openLibrary(0);
+        return;
+      }
+      if (mod && key.toLowerCase() === "d") {
+        if (!s.selectedId) return;
+        e.preventDefault();
+        s.duplicateSection(s.selectedId);
+        return;
+      }
+      if ((key === "Delete" || key === "Backspace") && s.selectedId) {
+        e.preventDefault();
+        s.removeSection(s.selectedId);
+        return;
+      }
+      if (key === "ArrowUp" || key === "ArrowDown") {
+        if (!s.selectedId) return;
+        const idx = s.sections.findIndex((sec) => sec.id === s.selectedId);
+        if (idx === -1) return;
+        const to = key === "ArrowUp" ? idx - 1 : idx + 1;
+        if (to < 0 || to >= s.sections.length) return;
+        e.preventDefault();
+        s.moveSection(idx, to);
+        return;
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+}

package/src/editor/ui-context.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+export type Device = "desktop" | "tablet" | "mobile";
+
+/** Which panel is shown as a bottom sheet on mobile (< md). Null = none. */
+export type MobilePanel = "sections" | "design" | "inspector" | null;
+
+/** Cross-component editor UI state (not part of the document / history). */
+export interface EditorUi {
+  device: Device;
+  setDevice(d: Device): void;
+  /** Insert index when the block library is open; null = library closed. */
+  libraryIndex: number | null;
+  openLibrary(index: number | null): void;
+  closeLibrary(): void;
+  inspectorOpen: boolean;
+  setInspectorOpen(open: boolean): void;
+  templatesOpen: boolean;
+  setTemplatesOpen(open: boolean): void;
+  mobilePanel: MobilePanel;
+  setMobilePanel(p: MobilePanel): void;
+}
+
+export const EditorUiContext = createContext<EditorUi | null>(null);
+
+export function useEditorUi(): EditorUi {
+  const v = useContext(EditorUiContext);
+  if (!v) throw new Error("useEditorUi must be used within <PageBuilder>");
+  return v;
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @jimmy_harika/websitekit — curated-section website builder engine.
+ *
+ * Root export = framework-agnostic model + registry + theme (safe in RSC and
+ * client). The editor (client-only) is at "@jimmy_harika/websitekit/editor", the
+ * renderer (RSC-safe) at "@jimmy_harika/websitekit/renderer", the store at
+ * "@jimmy_harika/websitekit/store".
+ */
+export * from "./model";
+export * from "./registry";
+export * from "./theme";

package/src/lib/cn.ts

@@ -0,0 +1,8 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Tailwind-aware className merge. Kept local so the engine has no @pixbox/ui
+ *  dependency and stays independently publishable. */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}