@xiwebdesign/xicms-core 7.31.0 → 8.16.0

package/dist/admin/visual/BlokKiezer.js

@@ -0,0 +1,225 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Dialog, DialogContent } from "../ui/dialog.js";
+import { Button } from "../ui/primitives.js";
+import { useRegistry } from "../../blocks/context.js";
+import { builtinPatterns, collectPatternTypes, instantiatePattern } from "../../patterns/index.js";
+import { GROEPEN, blokInfo } from "../lib/blokInfo.js";
+function BlokKiezer({
+  open,
+  onOpenChange,
+  onBlok,
+  onSectie,
+  patterns = builtinPatterns
+}) {
+  const registry = useRegistry();
+  const [zoek, setZoek] = useState("");
+  const [tab, setTab] = useState("blokken");
+  const zoekRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    setZoek("");
+    setTab("blokken");
+    const t = setTimeout(() => zoekRef.current?.focus(), 50);
+    return () => clearTimeout(t);
+  }, [open]);
+  const perGroep = useMemo(() => {
+    const q = zoek.trim().toLowerCase();
+    const m = /* @__PURE__ */ new Map();
+    for (const def of registry.values()) {
+      const info = blokInfo(def.type, def.category);
+      const item = { type: def.type, label: def.label, icon: def.icon, uitleg: info.uitleg };
+      if (q && !`${item.label} ${item.uitleg ?? ""}`.toLowerCase().includes(q)) continue;
+      m.set(info.groep, [...m.get(info.groep) ?? [], item]);
+    }
+    return GROEPEN.map((g) => ({ ...g, items: m.get(g.id) ?? [] })).filter((g) => g.items.length > 0);
+  }, [registry, zoek]);
+  const secties = useMemo(() => {
+    const q = zoek.trim().toLowerCase();
+    return patterns.filter((p) => collectPatternTypes(p).every((t) => registry.get(t))).filter((p) => !q || `${p.label} ${p.description ?? ""} ${p.category}`.toLowerCase().includes(q));
+  }, [patterns, registry, zoek]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { title: "Toevoegen", width: "min(94vw, 46rem)", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "Wat toevoegen", className: "inline-flex rounded-lg bg-slate-100 p-0.5", children: ["blokken", "secties"].map((t) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": tab === t,
+          onClick: () => setTab(t),
+          className: "xicms-admin-btn rounded-md px-3 py-1.5 text-sm font-medium text-slate-600 aria-[selected=true]:bg-white aria-[selected=true]:text-slate-900 aria-[selected=true]:shadow-sm",
+          children: t === "blokken" ? "Losse blokken" : "Kant-en-klare secties"
+        },
+        t
+      )) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: zoekRef,
+          type: "search",
+          value: zoek,
+          onChange: (e) => setZoek(e.target.value),
+          placeholder: "Zoek, bv. foto, prijzen, team\u2026",
+          "aria-label": "Zoek een blok",
+          className: "min-w-0 flex-1 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid max-h-[60vh] gap-4 overflow-y-auto pr-1", children: [
+      tab === "blokken" && (perGroep.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "py-6 text-center text-sm text-slate-500", children: [
+        "Niets gevonden voor \u201C",
+        zoek,
+        "\u201D."
+      ] }) : perGroep.map((g) => /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx("h4", { className: "mb-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500", children: g.label }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5 sm:grid-cols-2", children: g.items.map((b) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onBlok(b.type);
+              onOpenChange(false);
+            },
+            className: "xicms-admin-btn flex items-start gap-3 rounded-lg border border-slate-200 bg-white p-2.5 text-left hover:border-slate-400 hover:bg-slate-50",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "grid h-9 w-9 shrink-0 place-items-center rounded-md bg-slate-100 text-lg", "aria-hidden": true, children: b.icon ?? "\u25AB" }),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium text-slate-900", children: b.label }),
+                b.uitleg && /* @__PURE__ */ jsx("span", { className: "block text-xs leading-snug text-slate-500", children: b.uitleg })
+              ] })
+            ]
+          },
+          b.type
+        )) })
+      ] }, g.id))),
+      tab === "secties" && (secties.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-6 text-center text-sm text-slate-500", children: "Geen secties gevonden." }) : /* @__PURE__ */ jsx("div", { className: "grid gap-1.5 sm:grid-cols-2", children: secties.map((p) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onSectie(instantiatePattern(p));
+            onOpenChange(false);
+          },
+          className: "xicms-admin-btn rounded-lg border border-slate-200 bg-white p-2.5 text-left hover:border-slate-400 hover:bg-slate-50",
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-slate-900", children: p.label }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm opacity-70", "aria-hidden": true, children: p.blocks.slice(0, 5).map((b, i) => /* @__PURE__ */ jsx("span", { children: registry.get(b._type)?.icon ?? "\u{1F9E9}" }, i)) })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "block text-xs text-slate-500", children: p.description ?? p.category })
+          ]
+        },
+        p.id
+      )) }))
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => onOpenChange(false), children: "Sluiten" }) })
+  ] }) }) });
+}
+function TussenPlus({ sleutels, onKies }) {
+  const [plek, setPlek] = useState(null);
+  useEffect(() => {
+    const set = new Set(sleutels);
+    const meet = (el) => {
+      let r = el.getBoundingClientRect();
+      if (r.width === 0 && r.height === 0) {
+        const kids = Array.from(el.children).map((k) => k.getBoundingClientRect()).filter((k) => k.width || k.height);
+        if (!kids.length) return null;
+        const left = Math.min(...kids.map((k) => k.left));
+        const right = Math.max(...kids.map((k) => k.right));
+        const bottom = Math.max(...kids.map((k) => k.bottom));
+        r = { left, right, bottom, width: right - left };
+      }
+      return { top: r.bottom, left: r.left + r.width / 2 };
+    };
+    const opOver = (e) => {
+      const doel = e.target;
+      if (doel?.closest?.(".xicms-ve-tussenplus")) return;
+      let blok = doel?.closest?.("[data-xicms-block]") ?? null;
+      while (blok && !set.has(blok.dataset.xicmsBlock ?? "")) blok = blok.parentElement?.closest("[data-xicms-block]") ?? null;
+      if (!blok) return setPlek(null);
+      const p = meet(blok);
+      if (!p || p.top > window.innerHeight - 70) return setPlek(null);
+      const key = blok.dataset.xicmsBlock;
+      setPlek((v) => v && v.key === key && v.top === p.top ? v : { key, ...p });
+    };
+    const opScroll = () => setPlek(null);
+    document.addEventListener("mouseover", opOver, true);
+    window.addEventListener("scroll", opScroll, { capture: true, passive: true });
+    return () => {
+      document.removeEventListener("mouseover", opOver, true);
+      window.removeEventListener("scroll", opScroll, { capture: true });
+    };
+  }, [sleutels]);
+  if (!plek) return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "xicms-ve-tussenplus",
+      style: { top: plek.top, left: plek.left },
+      title: "Hier een blok of sectie toevoegen",
+      "aria-label": "Hier een blok of sectie toevoegen",
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: () => onKies(plek.key),
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "+" })
+    }
+  );
+}
+function omtrek(el) {
+  let r = el.getBoundingClientRect();
+  if (r.width === 0 && r.height === 0) {
+    const kids = Array.from(el.children).map((k) => k.getBoundingClientRect()).filter((k) => k.width || k.height);
+    if (!kids.length) return null;
+    const left = Math.min(...kids.map((k) => k.left));
+    const top = Math.min(...kids.map((k) => k.top));
+    r = { left, top, width: Math.max(...kids.map((k) => k.right)) - left, height: Math.max(...kids.map((k) => k.bottom)) - top };
+  }
+  return { top: r.top, left: r.left, width: r.width, height: r.height };
+}
+function BlokKader({ sleutels, gekozen, labelVoor }) {
+  const [aangewezen, setAangewezen] = useState(null);
+  const [, setTik] = useState(0);
+  useEffect(() => {
+    const set = new Set(sleutels);
+    const opOver = (e) => {
+      const doel = e.target;
+      if (doel?.closest?.("[data-xicms-tooling], .xicms-ve-snel, .xicms-ve-item, .xicms-ve-blokknoppen, .xicms-ve-pencil, .xicms-ve-tussenplus")) return;
+      let blok = doel?.closest?.("[data-xicms-block]") ?? null;
+      while (blok && !set.has(blok.dataset.xicmsBlock ?? "")) blok = blok.parentElement?.closest("[data-xicms-block]") ?? null;
+      setAangewezen(blok?.dataset.xicmsBlock ?? null);
+    };
+    let frame = 0;
+    const her = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => setTik((n) => n + 1));
+    };
+    document.addEventListener("mouseover", opOver, true);
+    window.addEventListener("scroll", her, { capture: true, passive: true });
+    window.addEventListener("resize", her);
+    return () => {
+      cancelAnimationFrame(frame);
+      document.removeEventListener("mouseover", opOver, true);
+      window.removeEventListener("scroll", her, { capture: true });
+      window.removeEventListener("resize", her);
+    };
+  }, [sleutels]);
+  const teken = (key, soort) => {
+    if (!key) return null;
+    const el = document.querySelector(`[data-xicms-block="${CSS.escape(key)}"]`);
+    const r = el ? omtrek(el) : null;
+    if (!r) return null;
+    return /* @__PURE__ */ jsx("div", { className: `xicms-ve-kader is-${soort}`, style: { top: r.top, left: r.left, width: r.width, height: r.height }, "aria-hidden": true, children: soort === "aangewezen" && /* @__PURE__ */ jsx("span", { className: "xicms-ve-kader__naam", children: labelVoor(key) }) });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    aangewezen !== gekozen && teken(aangewezen, "aangewezen"),
+    teken(gekozen, "gekozen")
+  ] });
+}
+export {
+  BlokKader,
+  BlokKiezer,
+  TussenPlus
+};
+//# sourceMappingURL=BlokKiezer.js.map

package/dist/admin/visual/BlokKiezer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/visual/BlokKiezer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Dialog, DialogContent } from \"../ui/dialog\";\nimport { Button } from \"../ui/primitives\";\nimport { useRegistry } from \"../../blocks/context\";\nimport { builtinPatterns, collectPatternTypes, instantiatePattern, type Pattern } from \"../../patterns\";\nimport { GROEPEN, blokInfo, type BlokGroep } from \"../lib/blokInfo\";\n\n/**\n * De blokkiezer (8.11): wat wil je hier toevoegen?\n *\n * Verving een platte keuzelijst van zo'n zestig namen. Nu: een zoekveld, groepen (\"Over je bedrijf\",\n * \"Contact en afspraken\"), per blok één zin uitleg, en een tweede tabblad met kant-en-klare secties\n * (de patronen) — die zaten achter een aparte knop in de zijbalk. Opent vanaf de \"+\" tussen twee\n * blokken op de pagina én vanuit de zijbalk.\n */\nexport function BlokKiezer({\n  open,\n  onOpenChange,\n  onBlok,\n  onSectie,\n  patterns = builtinPatterns,\n}: {\n  open: boolean;\n  onOpenChange: (v: boolean) => void;\n  onBlok: (type: string) => void;\n  onSectie: (blocks: Array<Record<string, unknown>>) => void;\n  patterns?: Pattern[];\n}) {\n  const registry = useRegistry();\n  const [zoek, setZoek] = useState(\"\");\n  const [tab, setTab] = useState<\"blokken\" | \"secties\">(\"blokken\");\n  const zoekRef = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (!open) return;\n    setZoek(\"\");\n    setTab(\"blokken\");\n    const t = setTimeout(() => zoekRef.current?.focus(), 50);\n    return () => clearTimeout(t);\n  }, [open]);\n\n  const perGroep = useMemo(() => {\n    const q = zoek.trim().toLowerCase();\n    const m = new Map<BlokGroep, { type: string; label: string; icon?: string; uitleg?: string }[]>();\n    for (const def of registry.values()) {\n      const info = blokInfo(def.type, def.category);\n      const item = { type: def.type, label: def.label, icon: def.icon, uitleg: info.uitleg };\n      if (q && !`${item.label} ${item.uitleg ?? \"\"}`.toLowerCase().includes(q)) continue;\n      m.set(info.groep, [...(m.get(info.groep) ?? []), item]);\n    }\n    return GROEPEN.map((g) => ({ ...g, items: m.get(g.id) ?? [] })).filter((g) => g.items.length > 0);\n  }, [registry, zoek]);\n\n  const secties = useMemo(() => {\n    const q = zoek.trim().toLowerCase();\n    return patterns\n      .filter((p) => collectPatternTypes(p).every((t) => registry.get(t)))\n      .filter((p) => !q || `${p.label} ${p.description ?? \"\"} ${p.category}`.toLowerCase().includes(q));\n  }, [patterns, registry, zoek]);\n\n  if (!open) return null;\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent title=\"Toevoegen\" width=\"min(94vw, 46rem)\">\n        <div className=\"grid gap-3\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <div role=\"tablist\" aria-label=\"Wat toevoegen\" className=\"inline-flex rounded-lg bg-slate-100 p-0.5\">\n              {([\"blokken\", \"secties\"] as const).map((t) => (\n                <button\n                  key={t}\n                  type=\"button\"\n                  role=\"tab\"\n                  aria-selected={tab === t}\n                  onClick={() => setTab(t)}\n                  className=\"xicms-admin-btn rounded-md px-3 py-1.5 text-sm font-medium text-slate-600 aria-[selected=true]:bg-white aria-[selected=true]:text-slate-900 aria-[selected=true]:shadow-sm\"\n                >\n                  {t === \"blokken\" ? \"Losse blokken\" : \"Kant-en-klare secties\"}\n                </button>\n              ))}\n            </div>\n            <input\n              ref={zoekRef}\n              type=\"search\"\n              value={zoek}\n              onChange={(e) => setZoek(e.target.value)}\n              placeholder=\"Zoek, bv. foto, prijzen, team…\"\n              aria-label=\"Zoek een blok\"\n              className=\"min-w-0 flex-1 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm\"\n            />\n          </div>\n\n          <div className=\"grid max-h-[60vh] gap-4 overflow-y-auto pr-1\">\n            {tab === \"blokken\" &&\n              (perGroep.length === 0 ? (\n                <p className=\"py-6 text-center text-sm text-slate-500\">Niets gevonden voor “{zoek}”.</p>\n              ) : (\n                perGroep.map((g) => (\n                  <section key={g.id}>\n                    <h4 className=\"mb-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500\">{g.label}</h4>\n                    <div className=\"grid gap-1.5 sm:grid-cols-2\">\n                      {g.items.map((b) => (\n                        <button\n                          key={b.type}\n                          type=\"button\"\n                          onClick={() => {\n                            onBlok(b.type);\n                            onOpenChange(false);\n                          }}\n                          className=\"xicms-admin-btn flex items-start gap-3 rounded-lg border border-slate-200 bg-white p-2.5 text-left hover:border-slate-400 hover:bg-slate-50\"\n                        >\n                          <span className=\"grid h-9 w-9 shrink-0 place-items-center rounded-md bg-slate-100 text-lg\" aria-hidden>\n                            {b.icon ?? \"▫\"}\n                          </span>\n                          <span className=\"min-w-0\">\n                            <span className=\"block text-sm font-medium text-slate-900\">{b.label}</span>\n                            {b.uitleg && <span className=\"block text-xs leading-snug text-slate-500\">{b.uitleg}</span>}\n                          </span>\n                        </button>\n                      ))}\n                    </div>\n                  </section>\n                ))\n              ))}\n            {tab === \"secties\" &&\n              (secties.length === 0 ? (\n                <p className=\"py-6 text-center text-sm text-slate-500\">Geen secties gevonden.</p>\n              ) : (\n                <div className=\"grid gap-1.5 sm:grid-cols-2\">\n                  {secties.map((p) => (\n                    <button\n                      key={p.id}\n                      type=\"button\"\n                      onClick={() => {\n                        onSectie(instantiatePattern(p));\n                        onOpenChange(false);\n                      }}\n                      className=\"xicms-admin-btn rounded-lg border border-slate-200 bg-white p-2.5 text-left hover:border-slate-400 hover:bg-slate-50\"\n                    >\n                      <span className=\"flex items-center justify-between gap-2\">\n                        <span className=\"text-sm font-medium text-slate-900\">{p.label}</span>\n                        <span className=\"shrink-0 text-sm opacity-70\" aria-hidden>\n                          {p.blocks.slice(0, 5).map((b, i) => (\n                            <span key={i}>{registry.get(b._type)?.icon ?? \"🧩\"}</span>\n                          ))}\n                        </span>\n                      </span>\n                      <span className=\"block text-xs text-slate-500\">{p.description ?? p.category}</span>\n                    </button>\n                  ))}\n                </div>\n              ))}\n          </div>\n          <div className=\"flex justify-end\">\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => onOpenChange(false)}>\n              Sluiten\n            </Button>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/**\n * Een \"+\" op de naad onder het blok waar je muis is: hier iets invoegen. Alleen voor blokken op het\n * hoogste niveau van de pagina (`sleutels`), niet voor blokken in kolommen of tabbladen.\n */\nexport function TussenPlus({ sleutels, onKies }: { sleutels: string[]; onKies: (na: string) => void }) {\n  const [plek, setPlek] = useState<{ key: string; top: number; left: number } | null>(null);\n  useEffect(() => {\n    const set = new Set(sleutels);\n    const meet = (el: HTMLElement) => {\n      let r = el.getBoundingClientRect();\n      if (r.width === 0 && r.height === 0) {\n        const kids = Array.from(el.children).map((k) => k.getBoundingClientRect()).filter((k) => k.width || k.height);\n        if (!kids.length) return null;\n        const left = Math.min(...kids.map((k) => k.left));\n        const right = Math.max(...kids.map((k) => k.right));\n        const bottom = Math.max(...kids.map((k) => k.bottom));\n        r = { left, right, bottom, width: right - left } as DOMRect;\n      }\n      return { top: r.bottom, left: r.left + r.width / 2 };\n    };\n    const opOver = (e: MouseEvent) => {\n      const doel = e.target as HTMLElement | null;\n      if (doel?.closest?.(\".xicms-ve-tussenplus\")) return;\n      let blok = doel?.closest?.<HTMLElement>(\"[data-xicms-block]\") ?? null;\n      // Het buitenste blok: in kolommen staan blokken in blokken.\n      while (blok && !set.has(blok.dataset.xicmsBlock ?? \"\")) blok = blok.parentElement?.closest<HTMLElement>(\"[data-xicms-block]\") ?? null;\n      if (!blok) return setPlek(null);\n      const p = meet(blok);\n      if (!p || p.top > window.innerHeight - 70) return setPlek(null);\n      const key = blok.dataset.xicmsBlock!;\n      setPlek((v) => (v && v.key === key && v.top === p.top ? v : { key, ...p }));\n    };\n    const opScroll = () => setPlek(null);\n    document.addEventListener(\"mouseover\", opOver, true);\n    window.addEventListener(\"scroll\", opScroll, { capture: true, passive: true });\n    return () => {\n      document.removeEventListener(\"mouseover\", opOver, true);\n      window.removeEventListener(\"scroll\", opScroll, { capture: true });\n    };\n  }, [sleutels]);\n  if (!plek) return null;\n  return (\n    <button\n      type=\"button\"\n      className=\"xicms-ve-tussenplus\"\n      style={{ top: plek.top, left: plek.left }}\n      title=\"Hier een blok of sectie toevoegen\"\n      aria-label=\"Hier een blok of sectie toevoegen\"\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={() => onKies(plek.key)}\n    >\n      <span aria-hidden>+</span>\n    </button>\n  );\n}\n\nfunction omtrek(el: HTMLElement): { top: number; left: number; width: number; height: number } | null {\n  let r = el.getBoundingClientRect();\n  if (r.width === 0 && r.height === 0) {\n    const kids = Array.from(el.children).map((k) => k.getBoundingClientRect()).filter((k) => k.width || k.height);\n    if (!kids.length) return null;\n    const left = Math.min(...kids.map((k) => k.left));\n    const top = Math.min(...kids.map((k) => k.top));\n    r = { left, top, width: Math.max(...kids.map((k) => k.right)) - left, height: Math.max(...kids.map((k) => k.bottom)) - top } as DOMRect;\n  }\n  return { top: r.top, left: r.left, width: r.width, height: r.height };\n}\n\n/**\n * Kaders (8.11): een stippellijn met de naam rond het blok onder je muis, een doorgetrokken lijn\n * rond het blok dat je bewerkt. Zonder kader was niet te zien waar een blok begon en eindigde — de\n * CSS ervoor bestond nog uit de tijd van het canvas, maar niets gebruikte hem.\n */\nexport function BlokKader({ sleutels, gekozen, labelVoor }: { sleutels: string[]; gekozen: string | null; labelVoor: (key: string) => string }) {\n  const [aangewezen, setAangewezen] = useState<string | null>(null);\n  const [, setTik] = useState(0);\n  useEffect(() => {\n    const set = new Set(sleutels);\n    const opOver = (e: MouseEvent) => {\n      const doel = e.target as HTMLElement | null;\n      if (doel?.closest?.(\"[data-xicms-tooling], .xicms-ve-snel, .xicms-ve-item, .xicms-ve-blokknoppen, .xicms-ve-pencil, .xicms-ve-tussenplus\")) return;\n      let blok = doel?.closest?.<HTMLElement>(\"[data-xicms-block]\") ?? null;\n      while (blok && !set.has(blok.dataset.xicmsBlock ?? \"\")) blok = blok.parentElement?.closest<HTMLElement>(\"[data-xicms-block]\") ?? null;\n      setAangewezen(blok?.dataset.xicmsBlock ?? null);\n    };\n    let frame = 0;\n    const her = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => setTik((n) => n + 1));\n    };\n    document.addEventListener(\"mouseover\", opOver, true);\n    window.addEventListener(\"scroll\", her, { capture: true, passive: true });\n    window.addEventListener(\"resize\", her);\n    return () => {\n      cancelAnimationFrame(frame);\n      document.removeEventListener(\"mouseover\", opOver, true);\n      window.removeEventListener(\"scroll\", her, { capture: true });\n      window.removeEventListener(\"resize\", her);\n    };\n  }, [sleutels]);\n  const teken = (key: string | null, soort: \"aangewezen\" | \"gekozen\") => {\n    if (!key) return null;\n    const el = document.querySelector<HTMLElement>(`[data-xicms-block=\"${CSS.escape(key)}\"]`);\n    const r = el ? omtrek(el) : null;\n    if (!r) return null;\n    return (\n      <div className={`xicms-ve-kader is-${soort}`} style={{ top: r.top, left: r.left, width: r.width, height: r.height }} aria-hidden>\n        {soort === \"aangewezen\" && <span className=\"xicms-ve-kader__naam\">{labelVoor(key)}</span>}\n      </div>\n    );\n  };\n  return (\n    <>\n      {aangewezen !== gekozen && teken(aangewezen, \"aangewezen\")}\n      {teken(gekozen, \"gekozen\")}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/visual/InlineGereedschap.d.ts

@@ -0,0 +1,52 @@
+import type { BlockDefinition } from "../../blocks/registry.js";
+import type { Field } from "../../schema/fields.js";
+/**
+ * Bewerken op de pagina, voorbij de tekst (8.11): het POTLOOD.
+ *
+ * De wens: potlood = op de pagina zelf bewerken, tandwiel = de zijbalk. Tot nu toe deed het potlood
+ * alleen tekst; voor al het andere moest je toch naar de zijbalk — een kaart toevoegen, een knop
+ * naar een andere pagina laten wijzen, van drie naar vier kolommen. Dit gereedschap verschijnt bij
+ * het geselecteerde blok en doet precies dat, op de plek zelf:
+ *
+ *  - **Lijsten** (kaarten, teamleden, reviews, stappen …): bij het onderdeel onder je muis ↑ ↓ ⧉ 🗑,
+ *    en onder de lijst "+ Kaart". De onderdelen worden gevonden via de veldhaken die de blokken al
+ *    zetten (`data-xicms-edit="items.2.title"`) — geen wijziging aan een Render nodig, ook niet aan
+ *    maatwerkblokken.
+ *  - **Links**: wie een knoptekst aanwijst of bewerkt, krijgt eronder "🔗 Contact" — klik, en kies
+ *    een pagina of adres.
+ *  - **Snelle keuzes**: de paar keuzes die het uiterlijk van het blok bepalen (kolommen, stijl,
+ *    uitlijning), als een balkje boven het blok. Alles daarbuiten blijft in de zijbalk.
+ */
+type Blok = Record<string, unknown> & {
+    _key: string;
+    _type: string;
+};
+export interface LijstItem {
+    lijst: string;
+    index: number;
+    el: HTMLElement;
+}
+/**
+ * Vind de onderdelen van de lijsten in een blok, via de veldhaken. Per onderdeel: de laagste
+ * voorouder die al zijn velden bevat, en dan zo ver omhoog als kan zonder een ánder onderdeel van
+ * dezelfde lijst te raken — dat is de kaart, de rij, het teamlid.
+ */
+export declare function vindLijstItems(host: HTMLElement): LijstItem[];
+/** "sections.0.items" → "sections.items": de vorm waarop lijst- en onderdeelnamen per blok staan. */
+export declare function lijstVorm(lijst: string): string;
+/** Bij een knoptekst-veld: welk veld bevat de link? `null` = geen link bij dit veld. */
+export declare function linkVeldVoor(veld: string, blok: Record<string, unknown>): string | null;
+/** De snelle keuzes van een blok: keuzelijsten, kleine getallen en schakelaars die het uiterlijk bepalen. */
+export declare function snelleKeuzes(velden: Field[]): Field[];
+export declare function InlineGereedschap({ blok, def, siteId, onWijzig, onInstellingen, onStartVeld, onVerwijderd, }: {
+    blok: Blok;
+    def: BlockDefinition | undefined;
+    siteId: string;
+    /** Nieuwe versie van het blok (één ongedaan-maak-stap). */
+    onWijzig: (volgend: Blok) => void;
+    onInstellingen: () => void;
+    /** Zet het bewerken van een veld aan (na het toevoegen van een onderdeel). */
+    onStartVeld: (veld: string) => void;
+    onVerwijderd: (wat: string) => void;
+}): import("react").JSX.Element;
+export {};