makersclaw 0.2.0 → 0.3.0

package/registry/blocks/page-builder/panels.jsx

@@ -0,0 +1,588 @@
+"use client";
+
+// The builder's panels, in the kit: Add (blocks), Layers (the page's tree),
+// Design (the selected element's look, token choices only) and the
+// template picker. Each reads the GrapesJS editor it is handed and changes
+// the page through the editor's own API, so undo/redo covers every edit.
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button, Field, FileInput, Icon, IconButton, Input, Select, Swatch, Switch, ToggleGroup, Tooltip, cx, toast } from "../../ui";
+import { BlocksProvider } from "./grapes";
+import { BlockThumb, PageThumb } from "./thumbs";
+import { currentOption, groupsFor, patchFor, swatchVar } from "./tokens";
+
+// ---- helpers over components ------------------------------------------------
+
+const TEXT_TAGS = new Set(["h1", "h2", "h3", "h4", "h5", "h6", "p", "li", "span", "strong", "em", "blockquote", "label", "small"]);
+
+/** text · link · image · box — which Design groups apply. */
+export function kindOf(c) {
+  if (!c) return "box";
+  if (c.is("image")) return "image";
+  if (c.is("link")) return "link";
+  if (c.is("text") || TEXT_TAGS.has(String(c.get("tagName") ?? "").toLowerCase())) return "text";
+  return "box";
+}
+
+export function nameOf(editor, c) {
+  if (!c) return "";
+  const own = c.get("name") || c.getAttributes?.()["data-gjs-name"];
+  if (own) return own;
+  const tag = String(c.get("tagName") ?? "").toLowerCase();
+  if (/^h[1-6]$/.test(tag)) return "Heading";
+  if (tag === "p") return "Text";
+  if (tag === "ul" || tag === "ol") return "List";
+  if (tag === "li") return "List item";
+  if (tag === "hr") return "Divider";
+  if (tag === "nav") return "Links";
+  if (c.is("link")) return c.getClasses?.().includes("pb-button") ? "Button" : "Link";
+  if (c.is("image")) return "Image";
+  if (c.is("text")) return "Text";
+  return editor?.Layers?.getName?.(c) || c.getName?.() || "Box";
+}
+
+/** The children a layer tree shows: no bare text nodes, nothing inside a
+ *  text (its bold and italic runs are part of the text). */
+function layerKids(c) {
+  if (!c || c.is("text") || c.is("link")) return [];
+  return c.components().filter((k) => k.get("type") !== "textnode" && k.get("layerable") !== false);
+}
+
+export function topLevel(editor, c) {
+  const wrapper = editor.getWrapper();
+  let cur = c;
+  while (cur?.parent() && cur.parent() !== wrapper) cur = cur.parent();
+  return cur;
+}
+
+// ---- Add ---------------------------------------------------------------------
+
+/** The block library: search, blocks grouped by category, click or drag. */
+export function AddPanel({ editor, blocks, templates, onAdd, onDragging, onTemplates }) {
+  const [query, setQuery] = useState("");
+  const q = query.trim().toLowerCase();
+  const groups = useMemo(() => {
+    const out = new Map();
+    for (const b of blocks) {
+      if (q && !`${b.label} ${b.description} ${b.category}`.toLowerCase().includes(q)) continue;
+      if (!out.has(b.category)) out.set(b.category, []);
+      out.get(b.category).push(b);
+    }
+    return [...out.entries()];
+  }, [blocks, q]);
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex items-center gap-2 px-3 pb-3">
+        <Input
+          type="search"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search blocks"
+          aria-label="Search blocks"
+        />
+        {templates?.length ? (
+          <Tooltip label="Start from a template">
+            <IconButton icon="file" label="Templates" size="sm" variant="secondary" onClick={onTemplates} />
+          </Tooltip>
+        ) : null}
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-4">
+        {groups.length === 0 ? (
+          <p className="px-1 py-6 text-center text-sm text-muted-foreground">No block matches “{query}”.</p>
+        ) : (
+          <BlocksProvider>
+            {({ dragStart, dragStop }) => (
+              <div className="grid gap-5">
+                {groups.map(([category, list]) => (
+                  <section key={category} aria-label={category} className="grid gap-2">
+                    <h3 className="px-1 text-xs font-medium text-muted-foreground">{category}</h3>
+                    <div className="grid grid-cols-2 gap-2">
+                      {list.map((b) => (
+                        <BlockTile
+                          key={b.id}
+                          block={b}
+                          onAdd={() => onAdd(b)}
+                          onDragStart={(ev) => {
+                            const gb = editor?.Blocks.get(b.id);
+                            if (!gb) return;
+                            onDragging?.(true);
+                            dragStart(gb, ev);
+                          }}
+                          onDragEnd={() => {
+                            dragStop(false);
+                            onDragging?.(false);
+                          }}
+                        />
+                      ))}
+                    </div>
+                  </section>
+                ))}
+              </div>
+            )}
+          </BlocksProvider>
+        )}
+      </div>
+      <p className="border-t border-border px-4 py-2.5 text-xs text-muted-foreground">
+        Click to add below the selection, or drag onto the page.
+      </p>
+    </div>
+  );
+}
+
+function BlockTile({ block, onAdd, onDragStart, onDragEnd }) {
+  // raw: a tile that is both a button and an HTML5 drag source; a kit
+  // Button is not draggable in every browser (Firefox drops drags that
+  // start on a <button>), so this is a div with the button role and keys.
+  const tile = (
+    <div
+      role="button"
+      tabIndex={0}
+      draggable
+      aria-label={`Add ${block.label}`}
+      onClick={onAdd}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onAdd();
+        }
+      }}
+      onDragStart={(e) => {
+        e.dataTransfer.effectAllowed = "copy";
+        onDragStart(e.nativeEvent);
+      }}
+      onDragEnd={onDragEnd}
+      className={cx(
+        "group grid cursor-grab gap-1.5 rounded-lg border border-transparent p-1.5 text-left outline-none transition-colors duration-150 active:cursor-grabbing",
+        "hover:border-border hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+      )}
+    >
+      <BlockThumb name={block.thumb} className="aspect-[16/10] w-full transition-shadow duration-150 group-hover:shadow-sm" />
+      <span className="truncate px-0.5 text-xs font-medium">{block.label}</span>
+    </div>
+  );
+  return block.description ? (
+    <Tooltip label={block.description} side="right">
+      {tile}
+    </Tooltip>
+  ) : (
+    tile
+  );
+}
+
+// ---- Templates -----------------------------------------------------------------
+
+/** Template cards: a stacked wireframe, a name, a line. */
+export function TemplateGrid({ templates, onPick, compact = false }) {
+  return (
+    <div className={cx("grid gap-3", compact ? "grid-cols-2 @2xl:grid-cols-3" : "grid-cols-1 sm:grid-cols-2")}>
+      {templates.map((t) => (
+        // raw: a card-sized choice (picture, name, description); Button is a
+        // one-line control and cannot hold this layout.
+        <button
+          key={t.id}
+          type="button"
+          onClick={() => onPick(t)}
+          className={cx(
+            "group grid gap-2 rounded-lg border border-border bg-card p-2 text-left outline-none transition-[border-color,box-shadow] duration-150",
+            "hover:border-primary/50 hover:shadow-sm focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+          )}
+        >
+          <PageThumb names={t.thumbs ?? []} className="w-full" />
+          <span className="grid gap-0.5 px-1 pb-1">
+            <span className="text-sm font-medium">{t.label}</span>
+            {t.description ? <span className="text-xs text-muted-foreground">{t.description}</span> : null}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ---- Layers ----------------------------------------------------------------------
+
+/** The page as a tree: select, fold, hide. Arrow keys walk it. */
+export function LayersPanel({ editor, selected, rev, onSelect }) {
+  const [closed, setClosed] = useState(() => new Set());
+  const list = useRef(null);
+  const wrapper = editor?.getWrapper();
+  // `rev` changes whenever the page does; the tree is rebuilt from the editor.
+  const rows = useMemo(() => {
+    const out = [];
+    const walk = (c, depth) => {
+      for (const k of layerKids(c)) {
+        const kids = layerKids(k);
+        out.push({ c: k, depth, hasKids: kids.length > 0 });
+        if (kids.length && !closed.has(k.cid)) walk(k, depth + 1);
+      }
+    };
+    if (wrapper) walk(wrapper, 0);
+    return out;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wrapper, rev, closed]);
+
+  const toggle = (cid) =>
+    setClosed((s) => {
+      const n = new Set(s);
+      n.has(cid) ? n.delete(cid) : n.add(cid);
+      return n;
+    });
+
+  function onKeyDown(e, i, row) {
+    const items = [...(list.current?.querySelectorAll("[data-layer-row]") ?? [])];
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      items[Math.min(items.length - 1, Math.max(0, i + (e.key === "ArrowDown" ? 1 : -1)))]?.focus();
+    } else if (e.key === "ArrowRight" && row.hasKids && closed.has(row.c.cid)) {
+      e.preventDefault();
+      toggle(row.c.cid);
+    } else if (e.key === "ArrowLeft" && row.hasKids && !closed.has(row.c.cid)) {
+      e.preventDefault();
+      toggle(row.c.cid);
+    }
+  }
+
+  if (!rows.length) {
+    return <p className="px-4 py-8 text-center text-sm text-muted-foreground">Nothing on the page yet. Add a section to begin.</p>;
+  }
+  return (
+    <ul ref={list} role="tree" aria-label="Page layers" className="grid gap-px px-2 pb-4">
+      {rows.map((row, i) => {
+        const on = selected === row.c;
+        const hidden = editor.Layers.isVisible(row.c) === false;
+        const open = !closed.has(row.c.cid);
+        return (
+          <li key={row.c.cid} role="treeitem" aria-selected={on} aria-expanded={row.hasKids ? open : undefined} aria-level={row.depth + 1}>
+            <div
+              className={cx(
+                "group flex min-h-9 items-center gap-1 rounded-md pr-1 text-sm transition-colors duration-150 motion-reduce:transition-none",
+                on ? "bg-accent text-accent-foreground" : "hover:bg-accent/60",
+                hidden && "text-muted-foreground",
+              )}
+              style={{ paddingInlineStart: 4 + row.depth * 14 }}
+            >
+              {row.hasKids ? (
+                // raw: a 24px fold chevron inside a 36px row; the kit's
+                // smallest IconButton is the row's own height.
+                <button
+                  type="button"
+                  tabIndex={-1}
+                  aria-label={open ? "Fold" : "Unfold"}
+                  onClick={() => toggle(row.c.cid)}
+                  className="grid size-6 shrink-0 place-items-center rounded text-muted-foreground hover:text-foreground"
+                >
+                  <Icon name={open ? "chevron-down" : "chevron-right"} size={14} />
+                </button>
+              ) : (
+                <span className="size-6 shrink-0" />
+              )}
+              {/* raw: the row's name is the tree item's focus target; a kit
+                  Button would add its own padding and 36px minimum inside the row. */}
+              <button
+                type="button"
+                data-layer-row
+                onClick={() => onSelect(row.c)}
+                onKeyDown={(e) => onKeyDown(e, i, row)}
+                className="min-w-0 flex-1 truncate py-1.5 text-left outline-none focus-visible:underline"
+              >
+                {nameOf(editor, row.c)}
+              </button>
+              <Tooltip label={hidden ? "Show while editing" : "Hide while editing"}>
+                <IconButton
+                  icon={hidden ? "eye-off" : "eye"}
+                  label={hidden ? `Show ${nameOf(editor, row.c)}` : `Hide ${nameOf(editor, row.c)}`}
+                  size="sm"
+                  onClick={() => editor.Layers.setVisible(row.c, hidden)}
+                  className={cx("transition-opacity duration-150", hidden ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-100")}
+                />
+              </Tooltip>
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+// ---- Design ------------------------------------------------------------------------
+
+/** The selected element's look — only the token choices in `groups` — plus
+ *  its link or picture, and the moves (parent, up, down, copy, delete). */
+export function DesignPanel({ editor, selected, rev, groups, onUploadImage, onAction }) {
+  if (!selected) {
+    return (
+      <div className="grid gap-4 px-4 py-8 text-center">
+        <span className="mx-auto grid size-10 place-items-center rounded-full bg-muted text-muted-foreground">
+          <Icon name="mouse-pointer" size={18} />
+        </span>
+        <div className="grid gap-1">
+          <p className="text-sm font-medium">Select something to style it</p>
+          <p className="text-sm text-muted-foreground">Click any part of the page. Double-click text to edit the words.</p>
+        </div>
+      </div>
+    );
+  }
+  const kind = kindOf(selected);
+  const style = selected.getStyle?.() ?? {};
+  const shown = groupsFor(groups, kind);
+  const parent = selected.parent();
+  const index = selected.index();
+  const siblings = parent ? parent.components().length : 0;
+
+  function apply(group, value) {
+    const next = { ...(selected.getStyle?.() ?? {}) };
+    for (const [k, v] of Object.entries(patchFor(group, value))) {
+      if (v === "") delete next[k];
+      else next[k] = v;
+    }
+    selected.setStyle(next);
+  }
+
+  return (
+    <div className="grid gap-5 px-4 pb-6" key={selected.cid}>
+      <div className="grid gap-2">
+        <div className="flex items-baseline justify-between gap-2">
+          <p className="truncate text-sm font-semibold">{nameOf(editor, selected)}</p>
+          <p className="shrink-0 text-xs text-muted-foreground">{KIND_LABEL[kind]}</p>
+        </div>
+        <div className="flex flex-wrap gap-1" role="toolbar" aria-label="Arrange">
+          <Tooltip label="Select the parent">
+            <IconButton icon="arrow-up" label="Select the parent" size="sm" variant="secondary" disabled={!parent || parent === editor.getWrapper()} onClick={() => onAction("parent")} />
+          </Tooltip>
+          <Tooltip label="Move up">
+            <IconButton icon="chevron-up" label="Move up" size="sm" variant="secondary" disabled={index <= 0} onClick={() => onAction("up")} />
+          </Tooltip>
+          <Tooltip label="Move down">
+            <IconButton icon="chevron-down" label="Move down" size="sm" variant="secondary" disabled={index < 0 || index >= siblings - 1} onClick={() => onAction("down")} />
+          </Tooltip>
+          <Tooltip label="Duplicate">
+            <IconButton icon="copy" label="Duplicate" size="sm" variant="secondary" onClick={() => onAction("duplicate")} />
+          </Tooltip>
+          <Tooltip label="Delete">
+            <IconButton icon="trash" label="Delete" size="sm" variant="danger" onClick={() => onAction("delete")} />
+          </Tooltip>
+        </div>
+      </div>
+
+      {kind === "link" ? <LinkFields key={`l${selected.cid}`} component={selected} /> : null}
+      {kind === "image" ? <ImageFields key={`i${selected.cid}`} component={selected} onUploadImage={onUploadImage} /> : null}
+
+      {shown.map((g) => (
+        <StyleGroup key={g.id} group={g} value={currentOption(g, style)} onChange={(v) => apply(g, v)} />
+      ))}
+
+      {Object.keys(style).length ? (
+        <Button variant="quiet" size="sm" icon="refresh" onClick={() => selected.setStyle({})} className="justify-self-start">
+          Clear this element’s style
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+const KIND_LABEL = { text: "Text", link: "Link", image: "Image", box: "Box" };
+
+function StyleGroup({ group, value, onChange }) {
+  const current = group.options.find((o) => o.value === value);
+  const choices = group.options.filter((o) => o.value !== "");
+  const id = `pb-${group.id}`;
+  return (
+    <div className="grid gap-2">
+      <div className="flex min-h-5 items-center justify-between gap-2">
+        <span id={id} className="text-xs font-medium">
+          {group.label}
+        </span>
+        {value ? (
+          <span className="flex items-center gap-2 text-xs text-muted-foreground">
+            {value === "custom" ? "Custom" : current?.label}
+            <Button variant="link" size="inherit" tone="muted" onClick={() => onChange("")}>
+              Reset
+            </Button>
+          </span>
+        ) : (
+          <span className="text-xs text-muted-foreground">Default</span>
+        )}
+      </div>
+      {group.kind === "swatch" ? (
+        <SwatchRow labelledBy={id} options={choices} value={value} onChange={onChange} />
+      ) : group.kind === "select" ? (
+        <Select
+          aria-labelledby={id}
+          value={value === "custom" ? "" : value}
+          onChange={(e) => onChange(e.target.value)}
+          options={group.options.map((o) => ({ value: o.value, label: o.label }))}
+        />
+      ) : (
+        <ToggleGroup
+          aria-label={group.label}
+          size="sm"
+          value={value}
+          onChange={(v) => onChange(v === value ? "" : v)}
+          items={choices.map((o) => (o.icon ? { value: o.value, label: o.label, icon: o.icon, iconOnly: true } : { value: o.value, label: o.label }))}
+          className="w-full"
+        />
+      )}
+    </div>
+  );
+}
+
+function SwatchRow({ labelledBy, options, value, onChange }) {
+  const refs = useRef([]);
+  const at = Math.max(0, options.findIndex((o) => o.value === value));
+  function onKeyDown(e, i) {
+    const d = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+    if (!d) return;
+    e.preventDefault();
+    const n = (i + d + options.length) % options.length;
+    refs.current[n]?.focus();
+    onChange(options[n].value);
+  }
+  return (
+    <div role="radiogroup" aria-labelledby={labelledBy} className="flex flex-wrap gap-1.5">
+      {options.map((o, i) => {
+        const on = o.value === value;
+        const color = swatchVar(o);
+        return (
+          <Tooltip key={o.value} label={o.label}>
+            {/* raw: a colour choice is a swatch you press; the kit's
+                ToggleGroup items carry an icon or words, not a colour. */}
+            <button
+              ref={(el) => {
+                refs.current[i] = el;
+              }}
+              type="button"
+              role="radio"
+              aria-checked={on}
+              aria-label={o.label}
+              tabIndex={i === at ? 0 : -1}
+              onClick={() => onChange(on ? "" : o.value)}
+              onKeyDown={(e) => onKeyDown(e, i)}
+              className={cx(
+                "grid size-9 place-items-center rounded-md outline-none transition-shadow duration-150 motion-reduce:transition-none",
+                "focus-visible:ring-2 focus-visible:ring-ring",
+                on ? "ring-2 ring-primary" : "hover:bg-accent",
+              )}
+            >
+              {color ? (
+                <Swatch color={color} className="size-6 rounded-full" />
+              ) : (
+                <span aria-hidden="true" className="relative block size-6 overflow-hidden rounded-full border border-border bg-background">
+                  <span className="absolute left-1/2 top-[-2px] h-[calc(100%+4px)] w-px -translate-x-1/2 rotate-45 bg-muted-foreground" />
+                </span>
+              )}
+            </button>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---- Content fields ---------------------------------------------------------------
+
+function LinkFields({ component }) {
+  const attrs = component.getAttributes();
+  const [href, setHref] = useState(attrs.href ?? "");
+  const [blank, setBlank] = useState(attrs.target === "_blank");
+  const commit = () => {
+    const v = href.trim();
+    if (v === (component.getAttributes().href ?? "")) return;
+    if (/^\s*javascript:/i.test(v)) {
+      toast.error("That link cannot be used", { description: "Use a web address or a path such as /pricing." });
+      setHref(component.getAttributes().href ?? "");
+      return;
+    }
+    component.addAttributes({ href: v });
+  };
+  return (
+    <div className="grid gap-3">
+      <Field id={`pb-href-${component.cid}`} label="Link" hint="A path like /pricing, or a full web address.">
+        <Input
+          id={`pb-href-${component.cid}`}
+          value={href}
+          onChange={(e) => setHref(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => e.key === "Enter" && commit()}
+          placeholder="/signup"
+        />
+      </Field>
+      <Switch
+        id={`pb-blank-${component.cid}`}
+        label="Open in a new tab"
+        checked={blank}
+        onChange={(next) => {
+          const on = typeof next === "boolean" ? next : next?.target?.checked;
+          setBlank(on);
+          if (on) component.addAttributes({ target: "_blank", rel: "noopener" });
+          else component.removeAttributes(["target", "rel"]);
+        }}
+      />
+    </div>
+  );
+}
+
+function ImageFields({ component, onUploadImage }) {
+  const attrs = component.getAttributes();
+  const [src, setSrc] = useState(/^data:image\/svg/.test(attrs.src ?? "") ? "" : attrs.src ?? "");
+  const [alt, setAlt] = useState(attrs.alt ?? "");
+  const [busy, setBusy] = useState(false);
+  const commitSrc = (v = src) => {
+    const next = v.trim();
+    if (!next || /^\s*javascript:/i.test(next)) return;
+    component.set("src", next);
+  };
+  async function upload(files) {
+    const file = files?.[0];
+    if (!file) return;
+    setBusy(true);
+    try {
+      const res = await onUploadImage(file);
+      if (res?.ok && res.url) {
+        setSrc(res.url);
+        component.set("src", res.url);
+      } else {
+        toast.error("The picture was not uploaded", { description: res?.error ?? "Try again, or paste an image address instead." });
+      }
+    } catch {
+      toast.error("The picture was not uploaded", { description: "Try again, or paste an image address instead." });
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <div className="grid gap-3">
+      <Field id={`pb-src-${component.cid}`} label="Picture" hint={onUploadImage ? "Upload one, or paste its address." : "Paste the picture’s address."}>
+        <div className="flex gap-2">
+          <Input
+            id={`pb-src-${component.cid}`}
+            value={src}
+            onChange={(e) => setSrc(e.target.value)}
+            onBlur={() => commitSrc()}
+            onKeyDown={(e) => e.key === "Enter" && commitSrc()}
+            placeholder="https://…"
+           
+          />
+          {onUploadImage ? (
+            <FileInput accept="image/*" onFiles={upload} label="Upload a picture" size="sm" variant="secondary" disabled={busy} />
+          ) : null}
+        </div>
+      </Field>
+      <Field id={`pb-alt-${component.cid}`} label="Describe the picture" hint="For people using a screen reader. Leave empty if it is decoration.">
+        <Input
+          id={`pb-alt-${component.cid}`}
+          value={alt}
+          onChange={(e) => setAlt(e.target.value)}
+          onBlur={() => component.addAttributes({ alt: alt.trim() })}
+        />
+      </Field>
+    </div>
+  );
+}
+
+/** Keep a stable callback identity for handlers that read fresh props. */
+export function useLatest(value) {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}