@jimmy_harika/websitekit 0.3.1

package/src/editor/Canvas.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+/**
+ * The editing surface. Renders the document inside a device-width frame, with
+ * insert points between sections and a single drag monitor that resolves both
+ * reorders (drag a section) and inserts (drag a block-library variant), picking
+ * the edge from the pointer position vs. the drop target's mid-line.
+ */
+import { useEffect } from "react";
+import { Plus } from "lucide-react";
+import { createSectionId } from "../model";
+import {
+  type Catalog,
+  defaultPropsFor,
+  getDefinition,
+} from "../registry";
+import { themeVars } from "../theme";
+import { useBuilder } from "../store";
+import { SectionFrame } from "./SectionFrame";
+import { SectionErrorBoundary } from "./ErrorBoundary";
+import { InsertPoint } from "./InsertPoint";
+import { monitorForElements } from "./dnd";
+import { useEditorUi } from "./ui-context";
+
+const DEVICE_WIDTH: Record<string, string> = {
+  desktop: "100%",
+  tablet: "834px",
+  mobile: "390px",
+};
+
+export function Canvas({ catalog }: { catalog: Catalog }) {
+  const sections = useBuilder((s) => s.doc.sections);
+  const theme = useBuilder((s) => s.doc.theme);
+  const moveSection = useBuilder((s) => s.moveSection);
+  const insertSection = useBuilder((s) => s.insertSection);
+  const setProps = useBuilder((s) => s.setProps);
+  const select = useBuilder((s) => s.select);
+  const ui = useEditorUi();
+
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) =>
+        source.data.kind === "section" || source.data.kind === "lib-variant",
+      onDrop: ({ source, location }) => {
+        const target = location.current.dropTargets[0];
+        if (!target) return;
+        const overIndex = target.data.targetIndex as number;
+        const rect = (target.element as HTMLElement).getBoundingClientRect();
+        const after = location.current.input.clientY > rect.top + rect.height / 2;
+        const destIndex = after ? overIndex + 1 : overIndex;
+
+        if (source.data.kind === "section") {
+          const from = source.data.index as number;
+          let to = destIndex;
+          if (from < to) to -= 1;
+          if (from !== to) moveSection(from, to);
+        } else if (source.data.kind === "lib-variant") {
+          const def = getDefinition(catalog, source.data.type as string);
+          if (!def) return;
+          const variant = source.data.variant as string | undefined;
+          insertSection(
+            {
+              id: createSectionId(),
+              type: def.type,
+              variant,
+              props: defaultPropsFor(def, variant),
+            },
+            destIndex,
+          );
+        }
+      },
+    });
+  }, [catalog, moveSection, insertSection]);
+
+  return (
+    <div
+      className="flex-1 overflow-auto bg-muted p-4 sm:p-6"
+      onClick={() => select(null)}
+    >
+      <div
+        className="mx-auto bg-background shadow-sm ring-1 ring-border transition-[width] duration-200"
+        style={{ width: DEVICE_WIDTH[ui.device], maxWidth: "100%" }}
+      >
+        <div style={themeVars(theme)} className="min-h-[60vh]">
+          {sections.length === 0 ? (
+            <button
+              type="button"
+              onClick={(e) => {
+                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"
+            >
+              <span className="flex size-12 items-center justify-center rounded-full border-2 border-dashed border-current">
+                <Plus className="size-6" />
+              </span>
+              <span className="text-sm font-medium">Add your first section</span>
+            </button>
+          ) : (
+            <>
+              <InsertPoint index={0} />
+              {sections.map((section, i) => {
+                const def = getDefinition(catalog, section.type);
+                return (
+                  <div key={section.id}>
+                    {def ? (
+                      <SectionErrorBoundary
+                        resetKey={section.id}
+                        onReset={() => setProps(section.id, defaultPropsFor(def))}
+                      >
+                        <SectionFrame section={section} index={i} def={def} />
+                      </SectionErrorBoundary>
+                    ) : (
+                      <div className="px-6 py-8 text-center text-xs opacity-40">
+                        Unknown section: {section.type}
+                      </div>
+                    )}
+                    <InsertPoint index={i + 1} />
+                  </div>
+                );
+              })}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/editor/ErrorBoundary.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+/**
+ * Per-section error boundary. A throwing block Component used to white-screen
+ * the whole canvas; this isolates the failure to one section and offers a
+ * reset to defaults. Auto-clears when `resetKey` changes (e.g. the section is
+ * swapped for another).
+ */
+import { Component, type ReactNode } from "react";
+
+interface Props {
+  resetKey: string;
+  onReset?: () => void;
+  children: ReactNode;
+}
+
+interface State {
+  error: Error | null;
+}
+
+export class SectionErrorBoundary extends Component<Props, State> {
+  state: State = { error: null };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error };
+  }
+
+  componentDidUpdate(prev: Props) {
+    if (this.state.error && prev.resetKey !== this.props.resetKey) {
+      this.setState({ error: null });
+    }
+  }
+
+  render() {
+    const { error } = this.state;
+    if (!error) return this.props.children;
+    return (
+      <div className="m-6 rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm">
+        <p className="font-semibold text-destructive">Section failed to render.</p>
+        <pre className="mt-2 max-h-32 overflow-auto whitespace-pre-wrap text-xs text-destructive/80">
+          {String(error.message ?? error)}
+        </pre>
+        {this.props.onReset && (
+          <button
+            onClick={this.props.onReset}
+            className="mt-3 rounded-md border border-destructive/30 px-3 py-1.5 text-xs text-destructive hover:bg-destructive/10"
+          >
+            Reset to defaults
+          </button>
+        )}
+      </div>
+    );
+  }
+}

package/src/editor/InsertPoint.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Plus } from "lucide-react";
+import { useEditorUi } from "./ui-context";
+
+/** A zero-height hover zone between sections; reveals a centered "+" that opens
+ *  the block library to insert at this index. */
+export function InsertPoint({ index }: { index: number }) {
+  const ui = useEditorUi();
+  return (
+    <div className="group/ins relative z-30 h-0">
+      {/* 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" />
+        <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"
+          title="Add section here"
+        >
+          <Plus className="size-4" />
+        </button>
+        <div className="h-px flex-1 bg-sky-400/70" />
+      </div>
+    </div>
+  );
+}

package/src/editor/Inspector.tsx

@@ -0,0 +1,341 @@
+"use client";
+
+/** Right-rail inspector: layout-variant switcher + the selected section's
+ *  non-inline fields (driven by `def.fields`), plus duplicate/delete. */
+import { useContext, useEffect, useRef, useState, type ChangeEvent } from "react";
+import { Monitor, Smartphone, Tablet, X } from "lucide-react";
+import { type Catalog, type FieldDescriptor, getDefinition } from "../registry";
+import { useBuilder } from "../store";
+import { useEditorUi } from "./ui-context";
+import { EditorCapsContext } from "./edit-primitives";
+import type { Breakpoint } from "../model";
+import { cn } from "../lib/cn";
+
+const BP: { id: Breakpoint; icon: typeof Monitor; label: string }[] = [
+  { id: "mobile", icon: Smartphone, label: "Mobile" },
+  { id: "tablet", icon: Tablet, label: "Tablet" },
+  { id: "desktop", icon: Monitor, label: "Desktop" },
+];
+
+export function Inspector({ catalog }: { catalog: Catalog }) {
+  const ui = useEditorUi();
+  const selectedId = useBuilder((s) => s.selectedId);
+  const section = useBuilder(
+    (s) => s.doc.sections.find((x) => x.id === selectedId) ?? null,
+  );
+  const updateProps = useBuilder((s) => s.updateProps);
+  const setVariant = useBuilder((s) => s.setVariant);
+  const setHideOn = useBuilder((s) => s.setHideOn);
+  const remove = useBuilder((s) => s.removeSection);
+  const duplicate = useBuilder((s) => s.duplicateSection);
+
+  if (!ui.inspectorOpen || !section) return null;
+  const def = getDefinition(catalog, section.type);
+  if (!def) return null;
+
+  const hidden = new Set<Breakpoint>(section.hideOn ?? []);
+  const toggleBp = (bp: Breakpoint) => {
+    const next = new Set(hidden);
+    if (next.has(bp)) next.delete(bp);
+    else next.add(bp);
+    setHideOn(section.id, [...next]);
+  };
+
+  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>
+        </div>
+        <button
+          onClick={() => ui.setInspectorOpen(false)}
+          className="rounded p-1 hover:bg-accent"
+        >
+          <X className="size-4" />
+        </button>
+      </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">
+            Show on
+          </label>
+          <div className="grid grid-cols-3 gap-1.5">
+            {BP.map((b) => {
+              const Icon = b.icon;
+              const isHidden = hidden.has(b.id);
+              return (
+                <button
+                  key={b.id}
+                  title={isHidden ? `Show on ${b.label.toLowerCase()}` : `Hide on ${b.label.toLowerCase()}`}
+                  onClick={() => toggleBp(b.id)}
+                  className={cn(
+                    "flex items-center justify-center gap-1 rounded-md border px-1.5 py-1.5 text-[11px]",
+                    isHidden
+                      ? "border-border text-muted-foreground/50 line-through opacity-60"
+                      : "border-foreground/30 bg-secondary text-secondary-foreground",
+                  )}
+                >
+                  <Icon className="size-3.5" />
+                  <span className="hidden sm:inline">{b.label}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+        {def.variants && def.variants.length > 1 && (
+          <div>
+            <label className="mb-1.5 block text-xs font-medium text-muted-foreground">
+              Layout
+            </label>
+            <div className="grid grid-cols-2 gap-2">
+              {def.variants.map((v) => (
+                <button
+                  key={v.id}
+                  onClick={() =>
+                    setVariant(section.id, v.id, {
+                      ...def.defaults,
+                      ...section.props,
+                      ...(v.props ?? {}),
+                    })
+                  }
+                  className={cn(
+                    "rounded-md border px-2 py-1.5 text-xs",
+                    section.variant === v.id
+                      ? "border-foreground/30 bg-secondary text-secondary-foreground"
+                      : "border-border hover:border-foreground/30",
+                  )}
+                >
+                  {v.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+        {(def.fields ?? []).map((f) => (
+          <Field
+            key={f.key}
+            field={f}
+            value={section.props[f.key]}
+            allProps={section.props}
+            setProp={(key, val) => updateProps(section.id, { [key]: val })}
+          />
+        ))}
+        {(def.fields ?? []).length === 0 &&
+          (!def.variants || def.variants.length <= 1) && (
+            <p className="text-xs text-muted-foreground/70">
+              This section is edited directly on the canvas.
+            </p>
+          )}
+      </div>
+      <div className="flex gap-2 border-t p-3">
+        <button
+          onClick={() => duplicate(section.id)}
+          className="flex-1 rounded-md border px-3 py-2 text-xs hover:bg-muted"
+        >
+          Duplicate
+        </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"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+  );
+}
+
+const INPUT =
+  "w-full rounded-md border border-border px-2.5 py-1.5 text-sm focus:border-foreground/40 focus:outline-none focus:ring-2 focus:ring-ring/30";
+
+/**
+ * Hold a local draft while focused; commit on blur. Keeps typing in a text/
+ * textarea/number field to ONE undo step (instead of one per keystroke) and
+ * matches the canvas EditableText blur-commit behavior. Selects don't need it
+ * (they commit once per pick). Syncs from the prop when unfocused so external
+ * changes (undo/redo, variant switch) still land.
+ */
+function useBlurCommit(value: string, onCommit: (v: string) => void) {
+  const [local, setLocal] = useState(value);
+  const focused = useRef(false);
+  if (!focused.current && local !== value) setLocal(value);
+  return {
+    value: local,
+    onFocus: () => {
+      focused.current = true;
+    },
+    onBlur: () => {
+      focused.current = false;
+      if (local !== value) onCommit(local);
+    },
+    set: setLocal,
+  };
+}
+
+function Field({
+  field,
+  value,
+  allProps,
+  setProp,
+}: {
+  field: FieldDescriptor;
+  value: unknown;
+  allProps: Record<string, unknown>;
+  setProp: (key: string, val: unknown) => void;
+}) {
+  const str = typeof value === "string" ? value : value == null ? "" : String(value);
+  const onChange = (val: unknown) => setProp(field.key, val);
+  const c = useBlurCommit(str, (v) => onChange(v));
+  return (
+    <div>
+      <label className="mb-1.5 block text-xs font-medium text-muted-foreground">
+        {field.label}
+      </label>
+      {field.widget === "textarea" || field.widget === "list" ? (
+        <textarea
+          className={cn(INPUT, "min-h-24 resize-y font-mono text-xs")}
+          value={c.value}
+          onFocus={c.onFocus}
+          onChange={(e) => c.set(e.target.value)}
+          onBlur={c.onBlur}
+        />
+      ) : field.widget === "select" ? (
+        <select className={INPUT} value={str} onChange={(e) => onChange(e.target.value)}>
+          {field.options.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      ) : field.widget === "number" ? (
+        <input
+          type="number"
+          className={INPUT}
+          value={c.value}
+          min={field.min}
+          max={field.max}
+          onFocus={c.onFocus}
+          onChange={(e) => c.set(e.target.value)}
+          onBlur={() => {
+            const v = c.value;
+            c.onBlur();
+            onChange(v === "" ? undefined : Number(v));
+          }}
+        />
+      ) : field.widget === "image" ? (
+        <ImageField
+          value={str}
+          onChange={onChange}
+          altKey={field.altKey}
+          altValue={
+            field.altKey
+              ? typeof allProps[field.altKey] === "string"
+                ? (allProps[field.altKey] as string)
+                : ""
+              : undefined
+          }
+          onAltChange={(alt) => field.altKey && setProp(field.altKey, alt)}
+        />
+      ) : (
+        <input
+          type={field.widget === "url" ? "url" : "text"}
+          className={INPUT}
+          value={c.value}
+          placeholder={field.placeholder}
+          onFocus={c.onFocus}
+          onChange={(e) => c.set(e.target.value)}
+          onBlur={c.onBlur}
+        />
+      )}
+      {field.help && <p className="mt-1 text-[11px] text-muted-foreground/70">{field.help}</p>}
+    </div>
+  );
+}
+
+function ImageField({
+  value,
+  onChange,
+  altKey,
+  altValue,
+  onAltChange,
+}: {
+  value: string;
+  onChange: (val: unknown) => void;
+  altKey?: string;
+  altValue?: string;
+  onAltChange?: (alt: string) => void;
+}) {
+  const caps = useContext(EditorCapsContext);
+  const ref = 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 pick(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) 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;
+      }
+      onChange(url);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <div className="space-y-2">
+      {value ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={value} alt={altValue ?? ""} className="h-24 w-full rounded-md object-cover" />
+      ) : (
+        <div className="flex h-24 items-center justify-center rounded-md border border-dashed text-xs text-muted-foreground/70">
+          No image
+        </div>
+      )}
+      <div className="flex gap-2">
+        <button
+          onClick={() => ref.current?.click()}
+          className="flex-1 rounded-md border px-2 py-1.5 text-xs hover:bg-muted"
+        >
+          {busy ? "Uploading…" : value ? "Replace" : "Upload"}
+        </button>
+        {value && (
+          <button
+            onClick={() => onChange("")}
+            className="rounded-md border px-2 py-1.5 text-xs hover:bg-muted"
+          >
+            Remove
+          </button>
+        )}
+      </div>
+      <input ref={ref} type="file" accept="image/*" hidden onChange={pick} />
+      <input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="or paste image URL"
+        className="w-full rounded-md border border-border px-2.5 py-1.5 text-xs"
+      />
+      {altKey && (
+        <input
+          value={altValue ?? ""}
+          onChange={(e) => onAltChange?.(e.target.value)}
+          placeholder={`Alt text (a11y + SEO)`}
+          className="w-full rounded-md border border-border px-2.5 py-1.5 text-xs"
+        />
+      )}
+    </div>
+  );
+}