@xiwebdesign/xicms-core 7.12.0 → 7.13.0

package/dist/admin/AdminApp.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { registerBuiltinSchemas } from "../blocks/builtinSchemas.js";
+registerBuiltinSchemas();
 import { useState } from "react";
 import { useAuth } from "../auth/AuthProvider.js";
 import { LoginForm } from "../auth/LoginForm.js";

package/dist/admin/AdminApp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/admin/AdminApp.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { useAuth } from \"../auth/AuthProvider\";\nimport { LoginForm } from \"../auth/LoginForm\";\nimport { useSiteConfig } from \"../config\";\nimport { useModules } from \"../modules/context\";\nimport { canEdit, canManageSite, type Role } from \"../auth/roles\";\nimport { Tabs, TabsContent } from \"./ui/tabs\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { ToastProvider } from \"./ui/toast\";\nimport { ConfirmHost } from \"./ui/ConfirmDialog\";\nimport { Button } from \"./ui/primitives\";\nimport { PanelIcon } from \"./ui/PanelIcon\";\nimport { builtinPanels, type PanelDefinition } from \"./panelRegistry\";\nimport { AdminHelp } from \"./AdminHelp\";\nimport { CoreVersion } from \"./CoreVersion\";\n\n/**\n * Rol-bewaakt beheer (XiCMS 3.0). De secties komen uit de paneel-registry, gefilterd op de actieve\n * modules (`SiteConfig.modules`/`features`) en de rol van de gebruiker. Een module met een eigen\n * paneel (ook klant-modules via `extraPanels`) verschijnt automatisch.\n *\n * VORM: een schermvullend werkblad met een vaste zijbalk, geen kaart in de pagina. Het beheer viel\n * hiervoor binnen de site-chrome — nav erboven, footer eronder, cookiebanner eroverheen — en las\n * daardoor als een blok ergens op de website in plaats van als gereedschap. De site-chrome leeft nu\n * in `app/(site)/layout.tsx`; /beheer valt daarbuiten.\n *\n * De zijbalk verving de horizontale tabstrip omdat die bij zeven of meer panelen al omsloeg naar een\n * tweede regel. Verticaal is er bovendien ruimte voor een icoon naast het woord, en `orientation`\n * houdt de pijltjestoetsen correct (Radix).\n *\n * Wikkel in `.xicms-admin` zodat de Tailwind-stijlen uit `@xiwebdesign/xicms-core/admin.css` scoped\n * blijven en niet naar de site lekken. Importeer die CSS alleen op de /beheer-route.\n */\nfunction roleAllows(role: Role | null, min: PanelDefinition[\"minRole\"]): boolean {\n  return min === \"siteadmin\" ? canManageSite(role) : canEdit(role);\n}\n\n/** Gecentreerde boodschap voor de toestanden waarin er (nog) geen beheer te tonen is. */\nfunction Melding({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"xicms-admin__midden grid place-items-center p-6\">\n      <div className=\"w-full max-w-md rounded-xl border border-slate-200 bg-white p-6 text-sm shadow-sm\">{children}</div>\n    </div>\n  );\n}\n\nexport function AdminApp({\n  extraPanels = [],\n  embedded = false,\n}: {\n  extraPanels?: PanelDefinition[];\n  /**\n   * Draait het beheer BINNEN de site-schil (header, logo, menu, footer eromheen) in plaats van als\n   * schermvullend werkblad op een kale pagina?\n   *\n   * Het verschil is niet cosmetisch. Los rekent het werkblad met het VENSTER: `min-h-screen`, en een\n   * zijbalk die met `sticky top-0` aan de bovenkant van het scherm plakt. Zet je daar een\n   * site-header boven, dan loopt de pagina 100vh + de hoogte van die header, en plakt de zijbalk\n   * onder de header vast in plaats van erlangs. Ingebed laat de zijbalk daarom los van het venster\n   * en wordt hij een balk over de volle breedte — dat vecht niet met de navigatie erboven.\n   */\n  embedded?: boolean;\n}) {\n  const { user, role, loading, configured, signOut } = useAuth();\n  const { name, siteId } = useSiteConfig();\n  const { activeIds } = useModules();\n\n  // Panelen van actieve modules waar de rol toegang toe heeft, gesorteerd op volgorde.\n  const panels = [...builtinPanels, ...extraPanels]\n    .filter((p) => activeIds.has(p.moduleId) && roleAllows(role, p.minRole))\n    .sort((a, b) => a.order - b.order);\n  /** Sleutel van een paneel in de tabbladen: eigen `id` als die er is, anders de module-id. */\n  const sleutel = (p: PanelDefinition) => p.id ?? p.moduleId;\n  const firstTab = panels[0] && sleutel(panels[0]);\n  // Gecontroleerd i.p.v. `defaultValue`: het werkblad toont de naam van de sectie waar je in zit.\n  // Zonder die kop lees je alleen aan de zijbalk-markering af waar je bent, en dat is te weinig\n  // houvast op een breed scherm waar de zijbalk ver van je blik af staat.\n  const [actief, setActief] = useState<string | undefined>(firstTab);\n  const actievePanel = panels.find((p) => sleutel(p) === (actief ?? firstTab));\n\n  return (\n    <div className={embedded ? \"xicms-admin xicms-admin--ingebed\" : \"xicms-admin\"}>\n      <ToastProvider>\n       <ConfirmHost>\n        {!configured ? (\n          <Melding>\n            Firebase is nog niet geconfigureerd. Vul de <code>NEXT_PUBLIC_FIREBASE_*</code>-variabelen in\n            om het beheer aan te zetten.\n          </Melding>\n        ) : loading ? (\n          <Melding>\n            <span className=\"text-slate-500\">Bezig met laden…</span>\n          </Melding>\n        ) : !user ? (\n          <div className=\"xicms-admin__midden grid place-items-center p-6\">\n            <div className=\"w-full max-w-sm\">\n              <p className=\"mb-4 text-center text-sm text-slate-500\">Beheer · {name}</p>\n              {/*\n                Na inloggen naar de HOMEPAGINA, niet naar dit scherm.\n\n                Dat is een sturende keuze, geen detail. Wie op het beheer uitkomt gaat daar\n                rondkijken en bewerkt zijn teksten in formulieren. Wie op zijn eigen site uitkomt\n                ziet de beheerbalk over de pagina heen en past de tekst aan op de plek waar hij\n                staat — en dat is waar XiCMS voor gemaakt is. Het beheer blijft één klik weg, via\n                \"Beheren\" in die balk, voor het werk dat er wél thuishoort.\n\n                Ook hier en niet alleen op /login: je komt op /beheer terecht via een bladwijzer of\n                een oude link, en dan gold die keuze ineens niet.\n              */}\n              <LoginForm onSuccess={() => { window.location.replace(\"/\"); }} />\n            </div>\n          </div>\n        ) : !canEdit(role) ? (\n          <Melding>\n            Je bent ingelogd als <strong>{user.email}</strong>, maar hebt geen beheerrechten voor deze site.\n            <div className=\"mt-3\">\n              <Button variant=\"secondary\" size=\"sm\" onClick={() => void signOut()}>Uitloggen</Button>\n            </div>\n          </Melding>\n        ) : panels.length === 0 ? (\n          <Melding>Geen actieve beheer-modules voor deze site.</Melding>\n        ) : (\n          <Tabs value={actief ?? firstTab} onValueChange={setActief} orientation=\"vertical\" className=\"xicms-admin__raster md:grid md:grid-cols-[248px_1fr]\">\n            {/* ── Zijbalk ─────────────────────────────────────────────────────────── */}\n            <div\n              className=\"xicms-admin__rail flex flex-col gap-4 border-b border-slate-200 p-4 md:sticky md:top-0 md:h-screen md:border-r md:border-b-0\"\n              style={{ background: \"var(--admin-sidebar)\" }}\n            >\n              <div className=\"min-w-0 px-2 pt-1\">\n                <p className=\"truncate text-sm font-semibold\">{name}</p>\n                <p className=\"text-xs text-slate-500\">Beheer</p>\n              </div>\n\n              <TabsPrimitive.List aria-label=\"Beheer-secties\" className=\"xicms-admin__lijst -mx-1 flex gap-1 overflow-x-auto md:flex-col md:overflow-visible\">\n                {panels.map((p) => (\n                  <TabsPrimitive.Trigger\n                    key={sleutel(p)}\n                    value={sleutel(p)}\n                    className=\"flex shrink-0 items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-200 hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:outline-none data-[state=active]:bg-slate-100 data-[state=active]:text-slate-900 data-[state=active]:shadow-[inset_2px_0_0_0_var(--color-brand-500)]\"\n                  >\n                    <PanelIcon id={p.moduleId} />\n                    {p.label}\n                  </TabsPrimitive.Trigger>\n                ))}\n              </TabsPrimitive.List>\n\n              {/* Voet van de zijbalk: wie ben ik, welke engine draait er, en eruit. Stond eerder als\n                  vier losse regels op elkaar gepakt — e-mail, rol, versie en een onderstreepte link\n                  liepen visueel in elkaar over. Nu drie duidelijke lagen met lucht ertussen, en\n                  Uitloggen als een echte knop in plaats van een tekstlink. */}\n              <div className=\"xicms-admin__voet mt-auto hidden min-w-0 flex-col gap-3 border-t border-slate-200 pt-3 md:flex\">\n                <div className=\"min-w-0\">\n                  <p className=\"truncate text-xs font-medium text-slate-600\" title={user.email ?? undefined}>{user.email}</p>\n                  <p className=\"text-xs text-slate-400\">{role}</p>\n                </div>\n                <CoreVersion />\n                <Button variant=\"secondary\" size=\"sm\" onClick={() => void signOut()}>\n                  Uitloggen\n                </Button>\n              </div>\n            </div>\n\n            {/* ── Werkblad ────────────────────────────────────────────────────────── */}\n            <div className=\"min-w-0\">\n              <header className=\"xicms-admin__kop sticky top-0 z-10 flex items-center justify-between gap-4 border-b border-slate-200 px-4 py-3 md:px-8\" style={{ background: \"var(--admin-canvas)\" }}>\n                <h1 className=\"truncate text-base font-semibold\">{actievePanel?.label ?? \"Beheer\"}</h1>\n                <a\n                  className=\"inline-flex h-8 shrink-0 items-center rounded-lg border border-slate-200 px-3 text-sm hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:outline-none\"\n                  href=\"/\"\n                >\n                  Bekijk site ↗\n                </a>\n              </header>\n              <div className=\"grid gap-6 p-4 md:p-8\">\n                {panels.map((p) => (\n                  <TabsContent key={sleutel(p)} value={sleutel(p)} className=\"pt-0\">\n                    <p.Panel siteId={siteId} />\n                  </TabsContent>\n                ))}\n                <AdminHelp />\n              </div>\n            </div>\n          </Tabs>\n        )}\n       </ConfirmHost>\n      </ToastProvider>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/admin/AdminApp.tsx"],"sourcesContent":["\"use client\";\n\nimport { registerBuiltinSchemas } from \"../blocks/builtinSchemas\";\n// Schema's zijn lazy (7.13): dit is een editor-chunk, dus hier horen ze thuis.\nregisterBuiltinSchemas();\nimport { useState } from \"react\";\nimport { useAuth } from \"../auth/AuthProvider\";\nimport { LoginForm } from \"../auth/LoginForm\";\nimport { useSiteConfig } from \"../config\";\nimport { useModules } from \"../modules/context\";\nimport { canEdit, canManageSite, type Role } from \"../auth/roles\";\nimport { Tabs, TabsContent } from \"./ui/tabs\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { ToastProvider } from \"./ui/toast\";\nimport { ConfirmHost } from \"./ui/ConfirmDialog\";\nimport { Button } from \"./ui/primitives\";\nimport { PanelIcon } from \"./ui/PanelIcon\";\nimport { builtinPanels, type PanelDefinition } from \"./panelRegistry\";\nimport { AdminHelp } from \"./AdminHelp\";\nimport { CoreVersion } from \"./CoreVersion\";\n\n/**\n * Rol-bewaakt beheer (XiCMS 3.0). De secties komen uit de paneel-registry, gefilterd op de actieve\n * modules (`SiteConfig.modules`/`features`) en de rol van de gebruiker. Een module met een eigen\n * paneel (ook klant-modules via `extraPanels`) verschijnt automatisch.\n *\n * VORM: een schermvullend werkblad met een vaste zijbalk, geen kaart in de pagina. Het beheer viel\n * hiervoor binnen de site-chrome — nav erboven, footer eronder, cookiebanner eroverheen — en las\n * daardoor als een blok ergens op de website in plaats van als gereedschap. De site-chrome leeft nu\n * in `app/(site)/layout.tsx`; /beheer valt daarbuiten.\n *\n * De zijbalk verving de horizontale tabstrip omdat die bij zeven of meer panelen al omsloeg naar een\n * tweede regel. Verticaal is er bovendien ruimte voor een icoon naast het woord, en `orientation`\n * houdt de pijltjestoetsen correct (Radix).\n *\n * Wikkel in `.xicms-admin` zodat de Tailwind-stijlen uit `@xiwebdesign/xicms-core/admin.css` scoped\n * blijven en niet naar de site lekken. Importeer die CSS alleen op de /beheer-route.\n */\nfunction roleAllows(role: Role | null, min: PanelDefinition[\"minRole\"]): boolean {\n  return min === \"siteadmin\" ? canManageSite(role) : canEdit(role);\n}\n\n/** Gecentreerde boodschap voor de toestanden waarin er (nog) geen beheer te tonen is. */\nfunction Melding({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"xicms-admin__midden grid place-items-center p-6\">\n      <div className=\"w-full max-w-md rounded-xl border border-slate-200 bg-white p-6 text-sm shadow-sm\">{children}</div>\n    </div>\n  );\n}\n\nexport function AdminApp({\n  extraPanels = [],\n  embedded = false,\n}: {\n  extraPanels?: PanelDefinition[];\n  /**\n   * Draait het beheer BINNEN de site-schil (header, logo, menu, footer eromheen) in plaats van als\n   * schermvullend werkblad op een kale pagina?\n   *\n   * Het verschil is niet cosmetisch. Los rekent het werkblad met het VENSTER: `min-h-screen`, en een\n   * zijbalk die met `sticky top-0` aan de bovenkant van het scherm plakt. Zet je daar een\n   * site-header boven, dan loopt de pagina 100vh + de hoogte van die header, en plakt de zijbalk\n   * onder de header vast in plaats van erlangs. Ingebed laat de zijbalk daarom los van het venster\n   * en wordt hij een balk over de volle breedte — dat vecht niet met de navigatie erboven.\n   */\n  embedded?: boolean;\n}) {\n  const { user, role, loading, configured, signOut } = useAuth();\n  const { name, siteId } = useSiteConfig();\n  const { activeIds } = useModules();\n\n  // Panelen van actieve modules waar de rol toegang toe heeft, gesorteerd op volgorde.\n  const panels = [...builtinPanels, ...extraPanels]\n    .filter((p) => activeIds.has(p.moduleId) && roleAllows(role, p.minRole))\n    .sort((a, b) => a.order - b.order);\n  /** Sleutel van een paneel in de tabbladen: eigen `id` als die er is, anders de module-id. */\n  const sleutel = (p: PanelDefinition) => p.id ?? p.moduleId;\n  const firstTab = panels[0] && sleutel(panels[0]);\n  // Gecontroleerd i.p.v. `defaultValue`: het werkblad toont de naam van de sectie waar je in zit.\n  // Zonder die kop lees je alleen aan de zijbalk-markering af waar je bent, en dat is te weinig\n  // houvast op een breed scherm waar de zijbalk ver van je blik af staat.\n  const [actief, setActief] = useState<string | undefined>(firstTab);\n  const actievePanel = panels.find((p) => sleutel(p) === (actief ?? firstTab));\n\n  return (\n    <div className={embedded ? \"xicms-admin xicms-admin--ingebed\" : \"xicms-admin\"}>\n      <ToastProvider>\n       <ConfirmHost>\n        {!configured ? (\n          <Melding>\n            Firebase is nog niet geconfigureerd. Vul de <code>NEXT_PUBLIC_FIREBASE_*</code>-variabelen in\n            om het beheer aan te zetten.\n          </Melding>\n        ) : loading ? (\n          <Melding>\n            <span className=\"text-slate-500\">Bezig met laden…</span>\n          </Melding>\n        ) : !user ? (\n          <div className=\"xicms-admin__midden grid place-items-center p-6\">\n            <div className=\"w-full max-w-sm\">\n              <p className=\"mb-4 text-center text-sm text-slate-500\">Beheer · {name}</p>\n              {/*\n                Na inloggen naar de HOMEPAGINA, niet naar dit scherm.\n\n                Dat is een sturende keuze, geen detail. Wie op het beheer uitkomt gaat daar\n                rondkijken en bewerkt zijn teksten in formulieren. Wie op zijn eigen site uitkomt\n                ziet de beheerbalk over de pagina heen en past de tekst aan op de plek waar hij\n                staat — en dat is waar XiCMS voor gemaakt is. Het beheer blijft één klik weg, via\n                \"Beheren\" in die balk, voor het werk dat er wél thuishoort.\n\n                Ook hier en niet alleen op /login: je komt op /beheer terecht via een bladwijzer of\n                een oude link, en dan gold die keuze ineens niet.\n              */}\n              <LoginForm onSuccess={() => { window.location.replace(\"/\"); }} />\n            </div>\n          </div>\n        ) : !canEdit(role) ? (\n          <Melding>\n            Je bent ingelogd als <strong>{user.email}</strong>, maar hebt geen beheerrechten voor deze site.\n            <div className=\"mt-3\">\n              <Button variant=\"secondary\" size=\"sm\" onClick={() => void signOut()}>Uitloggen</Button>\n            </div>\n          </Melding>\n        ) : panels.length === 0 ? (\n          <Melding>Geen actieve beheer-modules voor deze site.</Melding>\n        ) : (\n          <Tabs value={actief ?? firstTab} onValueChange={setActief} orientation=\"vertical\" className=\"xicms-admin__raster md:grid md:grid-cols-[248px_1fr]\">\n            {/* ── Zijbalk ─────────────────────────────────────────────────────────── */}\n            <div\n              className=\"xicms-admin__rail flex flex-col gap-4 border-b border-slate-200 p-4 md:sticky md:top-0 md:h-screen md:border-r md:border-b-0\"\n              style={{ background: \"var(--admin-sidebar)\" }}\n            >\n              <div className=\"min-w-0 px-2 pt-1\">\n                <p className=\"truncate text-sm font-semibold\">{name}</p>\n                <p className=\"text-xs text-slate-500\">Beheer</p>\n              </div>\n\n              <TabsPrimitive.List aria-label=\"Beheer-secties\" className=\"xicms-admin__lijst -mx-1 flex gap-1 overflow-x-auto md:flex-col md:overflow-visible\">\n                {panels.map((p) => (\n                  <TabsPrimitive.Trigger\n                    key={sleutel(p)}\n                    value={sleutel(p)}\n                    className=\"flex shrink-0 items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-200 hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:outline-none data-[state=active]:bg-slate-100 data-[state=active]:text-slate-900 data-[state=active]:shadow-[inset_2px_0_0_0_var(--color-brand-500)]\"\n                  >\n                    <PanelIcon id={p.moduleId} />\n                    {p.label}\n                  </TabsPrimitive.Trigger>\n                ))}\n              </TabsPrimitive.List>\n\n              {/* Voet van de zijbalk: wie ben ik, welke engine draait er, en eruit. Stond eerder als\n                  vier losse regels op elkaar gepakt — e-mail, rol, versie en een onderstreepte link\n                  liepen visueel in elkaar over. Nu drie duidelijke lagen met lucht ertussen, en\n                  Uitloggen als een echte knop in plaats van een tekstlink. */}\n              <div className=\"xicms-admin__voet mt-auto hidden min-w-0 flex-col gap-3 border-t border-slate-200 pt-3 md:flex\">\n                <div className=\"min-w-0\">\n                  <p className=\"truncate text-xs font-medium text-slate-600\" title={user.email ?? undefined}>{user.email}</p>\n                  <p className=\"text-xs text-slate-400\">{role}</p>\n                </div>\n                <CoreVersion />\n                <Button variant=\"secondary\" size=\"sm\" onClick={() => void signOut()}>\n                  Uitloggen\n                </Button>\n              </div>\n            </div>\n\n            {/* ── Werkblad ────────────────────────────────────────────────────────── */}\n            <div className=\"min-w-0\">\n              <header className=\"xicms-admin__kop sticky top-0 z-10 flex items-center justify-between gap-4 border-b border-slate-200 px-4 py-3 md:px-8\" style={{ background: \"var(--admin-canvas)\" }}>\n                <h1 className=\"truncate text-base font-semibold\">{actievePanel?.label ?? \"Beheer\"}</h1>\n                <a\n                  className=\"inline-flex h-8 shrink-0 items-center rounded-lg border border-slate-200 px-3 text-sm hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:outline-none\"\n                  href=\"/\"\n                >\n                  Bekijk site ↗\n                </a>\n              </header>\n              <div className=\"grid gap-6 p-4 md:p-8\">\n                {panels.map((p) => (\n                  <TabsContent key={sleutel(p)} value={sleutel(p)} className=\"pt-0\">\n                    <p.Panel siteId={siteId} />\n                  </TabsContent>\n                ))}\n                <AdminHelp />\n              </div>\n            </div>\n          </Tabs>\n        )}\n       </ConfirmHost>\n      </ToastProvider>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/lib/zodFields.d.ts

@@ -17,7 +17,7 @@ export interface SchemaField {
  * (array/object/record) worden als `json` teruggegeven zodat een fallback-editor ze tóch kan
  * aanbieden; een aanroeper die alleen simpele velden wil, filtert op `kind !== "json"`.
  */
-export declare function introspectObjectSchema(schema: ZodTypeAny): SchemaField[];
+export declare function introspectObjectSchema(schema: ZodTypeAny | undefined): SchemaField[];
 export type { FieldHints } from "../../schema/fields.js";
 import type { FieldHints } from "../../schema/fields.js";
 /**
@@ -28,4 +28,4 @@ import type { FieldHints } from "../../schema/fields.js";
  * - al het overige (records, scalar-arrays, unions) → **json** (laatste redmiddel).
  * `hints` verfijnt per (dotted) sleutel: type-overrides (date/slider/…) en `showIf`.
  */
-export declare function introspectToFields(schema: ZodTypeAny, hints?: FieldHints, prefix?: string): Field[];
+export declare function introspectToFields(schema: ZodTypeAny | undefined, hints?: FieldHints, prefix?: string): Field[];

package/dist/admin/lib/zodFields.js

@@ -29,6 +29,7 @@ function unwrap(schema) {
   return { def: defOf(s), description, inner: s };
 }
 function introspectObjectSchema(schema) {
+  if (!schema) return [];
   const shape = shapeOf(schema);
   if (!shape) return [];
   const out = [];
@@ -65,6 +66,7 @@ function introspectObjectSchema(schema) {
 const IMAGE_KEY = /image|photo|foto|logo|cover|avatar|poster/i;
 const URL_KEY = /^(href|url|link)$|Url$|Href$/;
 function introspectToFields(schema, hints, prefix = "") {
+  if (!schema) return [];
   const shape = shapeOf(schema);
   if (!shape) return [];
   const out = [];

package/dist/admin/lib/zodFields.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/lib/zodFields.ts"],"sourcesContent":["/**\n * Zod-introspectie voor automatisch gegenereerde formulieren. Gedeeld door:\n * - de `GenericEditor` (fallback-editor voor blokken zonder eigen `Editor`), en\n * - het `ModuleSettingsForm` (instellingen van een module in /beheer).\n *\n * Twee lagen:\n * - `introspectObjectSchema` (legacy, plat): simpele kinds — blijft bestaan voor module-settings.\n * - `introspectToFields` (5.0): levert de rijke **Field-IR** (schema/fields.ts, primo-port) met\n *   échte repeaters/groepen (recursief), richtext-/image-/link-detectie en optionele per-block\n *   hints (`defineBlock({ fields })`). De GenericEditor 2.0 rendert deze IR.\n *\n * Een veld krijgt zijn label uit `.describe(\"…\")` op het schema; zonder beschrijving valt het\n * terug op de veldsleutel. Puur (geen React) — apart testbaar.\n */\nimport { globalRegistry } from \"zod/mini\";\nimport type { $ZodType as ZodTypeAny } from \"zod/v4/core\";\nimport type { Field } from \"../../schema/fields\";\n\nexport interface SchemaField {\n  key: string;\n  kind: \"number\" | \"boolean\" | \"string\" | \"enum\" | \"json\";\n  /** Leesbaar label: `.describe()` van het schema, anders de veldsleutel. */\n  label: string;\n  options?: string[];\n  /** Max-lengte van een string (bepaalt Input vs Textarea in de UI). */\n  maxLength?: number;\n  /** Het volledige veld-schema — voor validatie van json-velden vóór commit. */\n  schema: ZodTypeAny;\n}\n\n/**\n * Zod 4-interne vorm. In Zod 3 heette dit `_def.typeName` (\"ZodObject\") met `shape` als FUNCTIE en\n * de beschrijving op `_def.description`; sinds Zod 4 is het `_def.type` (\"object\") met `shape` als\n * gewoon object, staat de beschrijving op de schema-instantie, dragen enums hun waarden in\n * `entries`, en zit een string-check achter `checks[i]._zod.def` als\n * `{ check: \"max_length\", maximum: n }`.\n *\n * Dit blijft leunen op interne velden — er is geen publieke introspectie-API in Zod. De\n * Field-IR-tests (fields.test.ts) zijn daarom het vangnet: die vallen om zodra Zod zijn interne\n * vorm opnieuw wijzigt, in plaats van dat de GenericEditor stilletjes lege formulieren toont.\n */\ntype ZodKind =\n  | \"object\" | \"string\" | \"number\" | \"boolean\" | \"enum\" | \"array\" | \"record\"\n  | \"default\" | \"optional\" | \"nullable\" | \"literal\" | (string & {});\n\ninterface AnyDef {\n  type?: ZodKind;\n  innerType?: unknown;\n  entries?: Record<string, string>;\n  element?: unknown;\n  checks?: { _zod?: { def?: { check?: string; maximum?: number } } }[];\n  shape?: Record<string, unknown>;\n}\n\n/**\n * De interne definitie van een schema.\n *\n * LET OP: `_def` is een alias die alléén de classic-façade aanbiedt — `zod/mini` (waar core op\n * draait) heeft hem niet en zet alles op `_zod.def`. Lees dus `_zod.def` eerst, met `_def` als\n * terugval voor classic-schema's uit een klantrepo. Zonder die volgorde levert introspectie\n * stilletjes niets op en toont de GenericEditor lege formulieren.\n */\nconst defOf = (schema: unknown): AnyDef | undefined =>\n  (schema as { _zod?: { def?: AnyDef } })?._zod?.def ?? (schema as { _def?: AnyDef })?._def;\n\n/** Max-lengte van een string-schema (Zod 4: checks dragen hun regel onder `_zod.def`). */\nfunction maxLengthOf(def: AnyDef | undefined): number | undefined {\n  for (const c of def?.checks ?? []) {\n    const rule = c?._zod?.def;\n    if (rule?.check === \"max_length\") return rule.maximum;\n  }\n  return undefined;\n}\n\n/** Waarden van een enum (Zod 4 levert een entries-map i.p.v. een values-array). */\nconst valuesOf = (def: AnyDef | undefined): string[] => Object.values(def?.entries ?? {});\n\n/** De velden van een objectschema; leeg als het geen object is. */\nfunction shapeOf(schema: unknown): Record<string, unknown> | null {\n  const def = defOf(schema);\n  if (def?.type !== \"object\" || !def.shape || typeof def.shape !== \"object\") return null;\n  return def.shape;\n}\n\n/**\n * De beschrijving van een schema — de bron van de veldlabels in /beheer.\n *\n * `zod/mini` heeft géén `.description`-getter (die hoort bij de classic-façade), maar `.describe()`\n * en `.register()` schrijven allebei naar dezelfde `globalRegistry`. Die lezen we hier dus direct,\n * met de getter als terugval zodat een classic-schema uit een klantrepo blijft werken.\n */\nfunction describedAs(s: unknown): string | undefined {\n  const uitRegister = globalRegistry.get(s as never)?.description;\n  return uitRegister ?? (s as { description?: string } | null)?.description;\n}\n\n/** Pakt het binnenste type uit default/optional/nullable; bewaart de buitenste beschrijving. */\nfunction unwrap(schema: unknown): { def?: AnyDef; description?: string; inner?: unknown } {\n  let s: unknown = schema;\n  let description = describedAs(s);\n  for (;;) {\n    const def = defOf(s);\n    if (def?.type !== \"default\" && def?.type !== \"optional\" && def?.type !== \"nullable\") break;\n    s = def.innerType;\n    description = description ?? describedAs(s);\n  }\n  return { def: defOf(s), description, inner: s };\n}\n\n/**\n * Leidt een formulier-beschrijving af uit een Zod-objectschema. Interne velden (`_key`/`_type`/\n * `_style`) worden overgeslagen — die beheren de editor-chrome en de StyleEditor. Complexe velden\n * (array/object/record) worden als `json` teruggegeven zodat een fallback-editor ze tóch kan\n * aanbieden; een aanroeper die alleen simpele velden wil, filtert op `kind !== \"json\"`.\n */\nexport function introspectObjectSchema(schema: ZodTypeAny): SchemaField[] {\n  const shape = shapeOf(schema);\n  if (!shape) return [];\n  const out: SchemaField[] = [];\n  for (const [key, field] of Object.entries(shape)) {\n    if (key.startsWith(\"_\")) continue;\n    const { def: inner, description } = unwrap(field);\n    const label = description ?? key;\n    const fieldSchema = field as ZodTypeAny;\n    switch (inner?.type) {\n      case \"number\":\n        out.push({ key, kind: \"number\", label, schema: fieldSchema });\n        break;\n      case \"boolean\":\n        out.push({ key, kind: \"boolean\", label, schema: fieldSchema });\n        break;\n      case \"enum\":\n        out.push({ key, kind: \"enum\", label, options: valuesOf(inner), schema: fieldSchema });\n        break;\n      case \"string\": {\n        out.push({ key, kind: \"string\", label, maxLength: maxLengthOf(inner), schema: fieldSchema });\n        break;\n      }\n      case \"array\":\n      case \"object\":\n      case \"record\":\n        out.push({ key, kind: \"json\", label, schema: fieldSchema });\n        break;\n      default:\n        // ZodLiteral (bv. _type), unions e.d.: geen zinvol generiek veld.\n        break;\n    }\n  }\n  return out;\n}\n\nexport type { FieldHints } from \"../../schema/fields\";\nimport type { FieldHints } from \"../../schema/fields\";\n\n/** Herkent een beeld-URL-veld aan de sleutelnaam (zelfde heuristiek als de oude GenericEditor). */\nconst IMAGE_KEY = /image|photo|foto|logo|cover|avatar|poster/i;\n/** Herkent een URL-veld aan de sleutelnaam. */\nconst URL_KEY = /^(href|url|link)$|Url$|Href$/;\n\n/**\n * Leidt de rijke Field-IR af uit een Zod-objectschema (5.0). Verschillen met de platte laag:\n * - `z.array(z.object)` → **repeater** met recursief geïntrospecteerde subvelden;\n * - genest `z.object` → **group** (of **link** als de vorm exact `{label, href}` is);\n * - stringvelden `html`/`*Html` → **richtext**, beeld-sleutels → **image**, URL-sleutels → **url**;\n * - al het overige (records, scalar-arrays, unions) → **json** (laatste redmiddel).\n * `hints` verfijnt per (dotted) sleutel: type-overrides (date/slider/…) en `showIf`.\n */\nexport function introspectToFields(schema: ZodTypeAny, hints?: FieldHints, prefix = \"\"): Field[] {\n  const shape = shapeOf(schema);\n  if (!shape) return [];\n  const out: Field[] = [];\n  for (const [key, raw] of Object.entries(shape)) {\n    if (key.startsWith(\"_\")) continue;\n    const { def: inner, description, inner: innerSchema } = unwrap(raw);\n    const label = description ?? key;\n    const path = prefix ? `${prefix}.${key}` : key;\n    const hint = hints?.[path];\n    const push = (f: Field) => out.push({ ...f, ...(hint as Partial<Field>), key, label: (hint?.label as string) ?? label } as Field);\n    switch (inner?.type) {\n      case \"number\":\n        push({ key, label, type: \"number\" });\n        break;\n      case \"boolean\":\n        push({ key, label, type: \"switch\" });\n        break;\n      case \"enum\":\n        push({ key, label, type: \"select\", options: valuesOf(inner).map((v) => ({ value: v, label: v })) });\n        break;\n      case \"string\": {\n        const max = maxLengthOf(inner);\n        if (key === \"html\" || key.endsWith(\"Html\")) push({ key, label, type: \"richtext\" });\n        else if (IMAGE_KEY.test(key)) push({ key, label, type: \"image\" });\n        else if (URL_KEY.test(key)) push({ key, label, type: \"url\" });\n        else if ((max ?? 0) > 500) push({ key, label, type: \"textarea\", maxLength: max });\n        else push({ key, label, type: \"text\", maxLength: max });\n        break;\n      }\n      case \"object\": {\n        const sub = introspectToFields(innerSchema as ZodTypeAny, hints, path);\n        const isLink = sub.length === 2 && sub.some((f) => f.key === \"label\") && sub.some((f) => f.key === \"href\");\n        if (isLink) push({ key, label, type: \"link\" });\n        else if (sub.length > 0) push({ key, label, type: \"group\", fields: sub });\n        else push({ key, label, type: \"json\" });\n        break;\n      }\n      case \"array\": {\n        const { def: elDef, inner: elSchema } = unwrap(inner?.element);\n        if (elDef?.type === \"object\") {\n          const sub = introspectToFields(elSchema as ZodTypeAny, hints, path);\n          if (sub.length > 0) {\n            push({ key, label, type: \"repeater\", fields: sub });\n            break;\n          }\n        }\n        push({ key, label, type: \"json\" });\n        break;\n      }\n      case \"record\":\n        push({ key, label, type: \"json\" });\n        break;\n      default:\n        break;\n    }\n  }\n  return out;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/admin/lib/zodFields.ts"],"sourcesContent":["/**\n * Zod-introspectie voor automatisch gegenereerde formulieren. Gedeeld door:\n * - de `GenericEditor` (fallback-editor voor blokken zonder eigen `Editor`), en\n * - het `ModuleSettingsForm` (instellingen van een module in /beheer).\n *\n * Twee lagen:\n * - `introspectObjectSchema` (legacy, plat): simpele kinds — blijft bestaan voor module-settings.\n * - `introspectToFields` (5.0): levert de rijke **Field-IR** (schema/fields.ts, primo-port) met\n *   échte repeaters/groepen (recursief), richtext-/image-/link-detectie en optionele per-block\n *   hints (`defineBlock({ fields })`). De GenericEditor 2.0 rendert deze IR.\n *\n * Een veld krijgt zijn label uit `.describe(\"…\")` op het schema; zonder beschrijving valt het\n * terug op de veldsleutel. Puur (geen React) — apart testbaar.\n */\nimport { globalRegistry } from \"zod/mini\";\nimport type { $ZodType as ZodTypeAny } from \"zod/v4/core\";\nimport type { Field } from \"../../schema/fields\";\n\nexport interface SchemaField {\n  key: string;\n  kind: \"number\" | \"boolean\" | \"string\" | \"enum\" | \"json\";\n  /** Leesbaar label: `.describe()` van het schema, anders de veldsleutel. */\n  label: string;\n  options?: string[];\n  /** Max-lengte van een string (bepaalt Input vs Textarea in de UI). */\n  maxLength?: number;\n  /** Het volledige veld-schema — voor validatie van json-velden vóór commit. */\n  schema: ZodTypeAny;\n}\n\n/**\n * Zod 4-interne vorm. In Zod 3 heette dit `_def.typeName` (\"ZodObject\") met `shape` als FUNCTIE en\n * de beschrijving op `_def.description`; sinds Zod 4 is het `_def.type` (\"object\") met `shape` als\n * gewoon object, staat de beschrijving op de schema-instantie, dragen enums hun waarden in\n * `entries`, en zit een string-check achter `checks[i]._zod.def` als\n * `{ check: \"max_length\", maximum: n }`.\n *\n * Dit blijft leunen op interne velden — er is geen publieke introspectie-API in Zod. De\n * Field-IR-tests (fields.test.ts) zijn daarom het vangnet: die vallen om zodra Zod zijn interne\n * vorm opnieuw wijzigt, in plaats van dat de GenericEditor stilletjes lege formulieren toont.\n */\ntype ZodKind =\n  | \"object\" | \"string\" | \"number\" | \"boolean\" | \"enum\" | \"array\" | \"record\"\n  | \"default\" | \"optional\" | \"nullable\" | \"literal\" | (string & {});\n\ninterface AnyDef {\n  type?: ZodKind;\n  innerType?: unknown;\n  entries?: Record<string, string>;\n  element?: unknown;\n  checks?: { _zod?: { def?: { check?: string; maximum?: number } } }[];\n  shape?: Record<string, unknown>;\n}\n\n/**\n * De interne definitie van een schema.\n *\n * LET OP: `_def` is een alias die alléén de classic-façade aanbiedt — `zod/mini` (waar core op\n * draait) heeft hem niet en zet alles op `_zod.def`. Lees dus `_zod.def` eerst, met `_def` als\n * terugval voor classic-schema's uit een klantrepo. Zonder die volgorde levert introspectie\n * stilletjes niets op en toont de GenericEditor lege formulieren.\n */\nconst defOf = (schema: unknown): AnyDef | undefined =>\n  (schema as { _zod?: { def?: AnyDef } })?._zod?.def ?? (schema as { _def?: AnyDef })?._def;\n\n/** Max-lengte van een string-schema (Zod 4: checks dragen hun regel onder `_zod.def`). */\nfunction maxLengthOf(def: AnyDef | undefined): number | undefined {\n  for (const c of def?.checks ?? []) {\n    const rule = c?._zod?.def;\n    if (rule?.check === \"max_length\") return rule.maximum;\n  }\n  return undefined;\n}\n\n/** Waarden van een enum (Zod 4 levert een entries-map i.p.v. een values-array). */\nconst valuesOf = (def: AnyDef | undefined): string[] => Object.values(def?.entries ?? {});\n\n/** De velden van een objectschema; leeg als het geen object is. */\nfunction shapeOf(schema: unknown): Record<string, unknown> | null {\n  const def = defOf(schema);\n  if (def?.type !== \"object\" || !def.shape || typeof def.shape !== \"object\") return null;\n  return def.shape;\n}\n\n/**\n * De beschrijving van een schema — de bron van de veldlabels in /beheer.\n *\n * `zod/mini` heeft géén `.description`-getter (die hoort bij de classic-façade), maar `.describe()`\n * en `.register()` schrijven allebei naar dezelfde `globalRegistry`. Die lezen we hier dus direct,\n * met de getter als terugval zodat een classic-schema uit een klantrepo blijft werken.\n */\nfunction describedAs(s: unknown): string | undefined {\n  const uitRegister = globalRegistry.get(s as never)?.description;\n  return uitRegister ?? (s as { description?: string } | null)?.description;\n}\n\n/** Pakt het binnenste type uit default/optional/nullable; bewaart de buitenste beschrijving. */\nfunction unwrap(schema: unknown): { def?: AnyDef; description?: string; inner?: unknown } {\n  let s: unknown = schema;\n  let description = describedAs(s);\n  for (;;) {\n    const def = defOf(s);\n    if (def?.type !== \"default\" && def?.type !== \"optional\" && def?.type !== \"nullable\") break;\n    s = def.innerType;\n    description = description ?? describedAs(s);\n  }\n  return { def: defOf(s), description, inner: s };\n}\n\n/**\n * Leidt een formulier-beschrijving af uit een Zod-objectschema. Interne velden (`_key`/`_type`/\n * `_style`) worden overgeslagen — die beheren de editor-chrome en de StyleEditor. Complexe velden\n * (array/object/record) worden als `json` teruggegeven zodat een fallback-editor ze tóch kan\n * aanbieden; een aanroeper die alleen simpele velden wil, filtert op `kind !== \"json\"`.\n */\nexport function introspectObjectSchema(schema: ZodTypeAny | undefined): SchemaField[] {\n  if (!schema) return [];\n  const shape = shapeOf(schema);\n  if (!shape) return [];\n  const out: SchemaField[] = [];\n  for (const [key, field] of Object.entries(shape)) {\n    if (key.startsWith(\"_\")) continue;\n    const { def: inner, description } = unwrap(field);\n    const label = description ?? key;\n    const fieldSchema = field as ZodTypeAny;\n    switch (inner?.type) {\n      case \"number\":\n        out.push({ key, kind: \"number\", label, schema: fieldSchema });\n        break;\n      case \"boolean\":\n        out.push({ key, kind: \"boolean\", label, schema: fieldSchema });\n        break;\n      case \"enum\":\n        out.push({ key, kind: \"enum\", label, options: valuesOf(inner), schema: fieldSchema });\n        break;\n      case \"string\": {\n        out.push({ key, kind: \"string\", label, maxLength: maxLengthOf(inner), schema: fieldSchema });\n        break;\n      }\n      case \"array\":\n      case \"object\":\n      case \"record\":\n        out.push({ key, kind: \"json\", label, schema: fieldSchema });\n        break;\n      default:\n        // ZodLiteral (bv. _type), unions e.d.: geen zinvol generiek veld.\n        break;\n    }\n  }\n  return out;\n}\n\nexport type { FieldHints } from \"../../schema/fields\";\nimport type { FieldHints } from \"../../schema/fields\";\n\n/** Herkent een beeld-URL-veld aan de sleutelnaam (zelfde heuristiek als de oude GenericEditor). */\nconst IMAGE_KEY = /image|photo|foto|logo|cover|avatar|poster/i;\n/** Herkent een URL-veld aan de sleutelnaam. */\nconst URL_KEY = /^(href|url|link)$|Url$|Href$/;\n\n/**\n * Leidt de rijke Field-IR af uit een Zod-objectschema (5.0). Verschillen met de platte laag:\n * - `z.array(z.object)` → **repeater** met recursief geïntrospecteerde subvelden;\n * - genest `z.object` → **group** (of **link** als de vorm exact `{label, href}` is);\n * - stringvelden `html`/`*Html` → **richtext**, beeld-sleutels → **image**, URL-sleutels → **url**;\n * - al het overige (records, scalar-arrays, unions) → **json** (laatste redmiddel).\n * `hints` verfijnt per (dotted) sleutel: type-overrides (date/slider/…) en `showIf`.\n */\nexport function introspectToFields(schema: ZodTypeAny | undefined, hints?: FieldHints, prefix = \"\"): Field[] {\n  // Lazy schema's (7.13): vóór registerBuiltinSchemas kan een def nog geen schema hebben —\n  // dan geen velden i.p.v. een crash (komt in de praktijk alleen in tests/randgevallen voor).\n  if (!schema) return [];\n  const shape = shapeOf(schema);\n  if (!shape) return [];\n  const out: Field[] = [];\n  for (const [key, raw] of Object.entries(shape)) {\n    if (key.startsWith(\"_\")) continue;\n    const { def: inner, description, inner: innerSchema } = unwrap(raw);\n    const label = description ?? key;\n    const path = prefix ? `${prefix}.${key}` : key;\n    const hint = hints?.[path];\n    const push = (f: Field) => out.push({ ...f, ...(hint as Partial<Field>), key, label: (hint?.label as string) ?? label } as Field);\n    switch (inner?.type) {\n      case \"number\":\n        push({ key, label, type: \"number\" });\n        break;\n      case \"boolean\":\n        push({ key, label, type: \"switch\" });\n        break;\n      case \"enum\":\n        push({ key, label, type: \"select\", options: valuesOf(inner).map((v) => ({ value: v, label: v })) });\n        break;\n      case \"string\": {\n        const max = maxLengthOf(inner);\n        if (key === \"html\" || key.endsWith(\"Html\")) push({ key, label, type: \"richtext\" });\n        else if (IMAGE_KEY.test(key)) push({ key, label, type: \"image\" });\n        else if (URL_KEY.test(key)) push({ key, label, type: \"url\" });\n        else if ((max ?? 0) > 500) push({ key, label, type: \"textarea\", maxLength: max });\n        else push({ key, label, type: \"text\", maxLength: max });\n        break;\n      }\n      case \"object\": {\n        const sub = introspectToFields(innerSchema as ZodTypeAny, hints, path);\n        const isLink = sub.length === 2 && sub.some((f) => f.key === \"label\") && sub.some((f) => f.key === \"href\");\n        if (isLink) push({ key, label, type: \"link\" });\n        else if (sub.length > 0) push({ key, label, type: \"group\", fields: sub });\n        else push({ key, label, type: \"json\" });\n        break;\n      }\n      case \"array\": {\n        const { def: elDef, inner: elSchema } = unwrap(inner?.element);\n        if (elDef?.type === \"object\") {\n          const sub = introspectToFields(elSchema as ZodTypeAny, hints, path);\n          if (sub.length > 0) {\n            push({ key, label, type: \"repeater\", fields: sub });\n            break;\n          }\n        }\n        push({ key, label, type: \"json\" });\n        break;\n      }\n      case \"record\":\n        push({ key, label, type: \"json\" });\n        break;\n      default:\n        break;\n    }\n  }\n  return out;\n}\n"],"mappings":"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","names":[]}

package/dist/admin/ui/toast.d.ts

@@ -5,6 +5,10 @@ interface ToastApi {
         title: string;
         description?: string;
         tone?: ToastTone;
+        action?: {
+            label: string;
+            onClick: () => void;
+        };
     }) => void;
 }
 /**

package/dist/admin/ui/toast.js

@@ -9,14 +9,20 @@ function useToast() {
   const show = useAstryxToast();
   const showRef = useRef(show);
   showRef.current = show;
-  const toast = useCallback(({ title, description, tone = "default" }) => {
+  const toast = useCallback(({ title, description, tone = "default", action }) => {
     showRef.current({
       body: /* @__PURE__ */ jsxs("span", { children: [
         /* @__PURE__ */ jsx("strong", { children: title }),
-        description ? /* @__PURE__ */ jsx("span", { style: { display: "block", opacity: 0.8 }, children: description }) : null
+        description ? /* @__PURE__ */ jsx("span", { style: { display: "block", opacity: 0.8 }, children: description }) : null,
+        action ? (
+          // Eén optionele vervolg-actie in de melding zelf ("Bekijk als bezoeker →"): de melding
+          // is precies het moment waarop die vraag leeft, en een knop sluit de mentale lus die
+          // een instructie in prozavorm open laat staan.
+          /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-toast__actie", onClick: action.onClick, children: action.label })
+        ) : null
       ] }),
       type: tone === "error" ? "error" : "info",
-      isAutoHide: tone !== "error"
+      isAutoHide: tone !== "error" && !action
     });
   }, []);
   return useMemo(() => ({ toast }), [toast]);

package/dist/admin/ui/toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/ui/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useRef, type ReactNode } from \"react\";\nimport { useToast as useAstryxToast, ToastViewport } from \"@astryxdesign/core/Toast\";\n\ntype ToastTone = \"default\" | \"success\" | \"error\";\ninterface ToastApi {\n  toast: (t: { title: string; description?: string; tone?: ToastTone }) => void;\n}\n\n/**\n * Admin-toasts op de **Astryx Toast** (ToastViewport + useToast). De bestaande API\n * `toast({title, description, tone})` blijft, zodat de editors ongewijzigd blijven. Fouten blijven\n * staan tot de gebruiker ze sluit (auto-hide uit); overige verdwijnen vanzelf.\n */\nexport function ToastProvider({ children }: { children: ReactNode }) {\n  return (\n    <ToastViewport position=\"bottomEnd\" maxVisible={4}>\n      {children}\n    </ToastViewport>\n  );\n}\n\n/**\n * `toast` MOET stabiel zijn over renders heen.\n *\n * Dit gaf `{ toast: (t) => … }` terug — een nieuw object met een nieuwe functie bij ELKE render.\n * Op zichzelf onschuldig, tot je bedenkt dat drie effecten in het beheer `toast` in hun\n * afhankelijkheden hebben (de mediakiezer, de mediabeheerder en de visuele editor). Zo'n effect\n * draait dan bij elke render opnieuw, zet state, en die state veroorzaakt weer een render:\n * \"Maximum update depth exceeded\", en een pagina die niet meer laadt.\n *\n * Dat maakte de visuele editor onbruikbaar op élke pagina mét werkversie — daar hangt de\n * mediakiezer in de boom. Op een pagina zónder werkversie kwam de editor nooit zo ver, en precies\n * daarom kon dit lang onopgemerkt blijven: wie het probeerde op een lege pagina zag niets bijzonders.\n *\n * `show` komt uit Astryx en biedt geen garantie over zijn eigen stabiliteit; daarom via een ref, en\n * niet als afhankelijkheid. Anders verplaatsen we het probleem alleen maar één laag.\n */\nexport function useToast(): ToastApi {\n  const show = useAstryxToast();\n  const showRef = useRef(show);\n  showRef.current = show;\n\n  const toast = useCallback<ToastApi[\"toast\"]>(({ title, description, tone = \"default\" }) => {\n    showRef.current({\n      body: (\n        <span>\n          <strong>{title}</strong>\n          {description ? <span style={{ display: \"block\", opacity: 0.8 }}>{description}</span> : null}\n        </span>\n      ),\n      type: tone === \"error\" ? \"error\" : \"info\",\n      isAutoHide: tone !== \"error\",\n    });\n  }, []);\n\n  return useMemo(() => ({ toast }), [toast]);\n}\n"],"mappings":";AAiBI,cA8BI,YA9BJ;AAfJ,SAAS,aAAa,SAAS,cAA8B;AAC7D,SAAS,YAAY,gBAAgB,qBAAqB;AAYnD,SAAS,cAAc,EAAE,SAAS,GAA4B;AACnE,SACE,oBAAC,iBAAc,UAAS,aAAY,YAAY,GAC7C,UACH;AAEJ;AAkBO,SAAS,WAAqB;AACnC,QAAM,OAAO,eAAe;AAC5B,QAAM,UAAU,OAAO,IAAI;AAC3B,UAAQ,UAAU;AAElB,QAAM,QAAQ,YAA+B,CAAC,EAAE,OAAO,aAAa,OAAO,UAAU,MAAM;AACzF,YAAQ,QAAQ;AAAA,MACd,MACE,qBAAC,UACC;AAAA,4BAAC,YAAQ,iBAAM;AAAA,QACd,cAAc,oBAAC,UAAK,OAAO,EAAE,SAAS,SAAS,SAAS,IAAI,GAAI,uBAAY,IAAU;AAAA,SACzF;AAAA,MAEF,MAAM,SAAS,UAAU,UAAU;AAAA,MACnC,YAAY,SAAS;AAAA,IACvB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SAAO,QAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;AAC3C;","names":[]}
+{"version":3,"sources":["../../../src/admin/ui/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useRef, type ReactNode } from \"react\";\nimport { useToast as useAstryxToast, ToastViewport } from \"@astryxdesign/core/Toast\";\n\ntype ToastTone = \"default\" | \"success\" | \"error\";\ninterface ToastApi {\n  toast: (t: { title: string; description?: string; tone?: ToastTone; action?: { label: string; onClick: () => void } }) => void;\n}\n\n/**\n * Admin-toasts op de **Astryx Toast** (ToastViewport + useToast). De bestaande API\n * `toast({title, description, tone})` blijft, zodat de editors ongewijzigd blijven. Fouten blijven\n * staan tot de gebruiker ze sluit (auto-hide uit); overige verdwijnen vanzelf.\n */\nexport function ToastProvider({ children }: { children: ReactNode }) {\n  return (\n    <ToastViewport position=\"bottomEnd\" maxVisible={4}>\n      {children}\n    </ToastViewport>\n  );\n}\n\n/**\n * `toast` MOET stabiel zijn over renders heen.\n *\n * Dit gaf `{ toast: (t) => … }` terug — een nieuw object met een nieuwe functie bij ELKE render.\n * Op zichzelf onschuldig, tot je bedenkt dat drie effecten in het beheer `toast` in hun\n * afhankelijkheden hebben (de mediakiezer, de mediabeheerder en de visuele editor). Zo'n effect\n * draait dan bij elke render opnieuw, zet state, en die state veroorzaakt weer een render:\n * \"Maximum update depth exceeded\", en een pagina die niet meer laadt.\n *\n * Dat maakte de visuele editor onbruikbaar op élke pagina mét werkversie — daar hangt de\n * mediakiezer in de boom. Op een pagina zónder werkversie kwam de editor nooit zo ver, en precies\n * daarom kon dit lang onopgemerkt blijven: wie het probeerde op een lege pagina zag niets bijzonders.\n *\n * `show` komt uit Astryx en biedt geen garantie over zijn eigen stabiliteit; daarom via een ref, en\n * niet als afhankelijkheid. Anders verplaatsen we het probleem alleen maar één laag.\n */\nexport function useToast(): ToastApi {\n  const show = useAstryxToast();\n  const showRef = useRef(show);\n  showRef.current = show;\n\n  const toast = useCallback<ToastApi[\"toast\"]>(({ title, description, tone = \"default\", action }) => {\n    showRef.current({\n      body: (\n        <span>\n          <strong>{title}</strong>\n          {description ? <span style={{ display: \"block\", opacity: 0.8 }}>{description}</span> : null}\n          {action ? (\n            // Eén optionele vervolg-actie in de melding zelf (\"Bekijk als bezoeker →\"): de melding\n            // is precies het moment waarop die vraag leeft, en een knop sluit de mentale lus die\n            // een instructie in prozavorm open laat staan.\n            <button type=\"button\" className=\"xicms-toast__actie\" onClick={action.onClick}>\n              {action.label}\n            </button>\n          ) : null}\n        </span>\n      ),\n      type: tone === \"error\" ? \"error\" : \"info\",\n      isAutoHide: tone !== \"error\" && !action,\n    });\n  }, []);\n\n  return useMemo(() => ({ toast }), [toast]);\n}\n"],"mappings":";AAiBI,cA8BI,YA9BJ;AAfJ,SAAS,aAAa,SAAS,cAA8B;AAC7D,SAAS,YAAY,gBAAgB,qBAAqB;AAYnD,SAAS,cAAc,EAAE,SAAS,GAA4B;AACnE,SACE,oBAAC,iBAAc,UAAS,aAAY,YAAY,GAC7C,UACH;AAEJ;AAkBO,SAAS,WAAqB;AACnC,QAAM,OAAO,eAAe;AAC5B,QAAM,UAAU,OAAO,IAAI;AAC3B,UAAQ,UAAU;AAElB,QAAM,QAAQ,YAA+B,CAAC,EAAE,OAAO,aAAa,OAAO,WAAW,OAAO,MAAM;AACjG,YAAQ,QAAQ;AAAA,MACd,MACE,qBAAC,UACC;AAAA,4BAAC,YAAQ,iBAAM;AAAA,QACd,cAAc,oBAAC,UAAK,OAAO,EAAE,SAAS,SAAS,SAAS,IAAI,GAAI,uBAAY,IAAU;AAAA,QACtF;AAAA;AAAA;AAAA;AAAA,UAIC,oBAAC,YAAO,MAAK,UAAS,WAAU,sBAAqB,SAAS,OAAO,SAClE,iBAAO,OACV;AAAA,YACE;AAAA,SACN;AAAA,MAEF,MAAM,SAAS,UAAU,UAAU;AAAA,MACnC,YAAY,SAAS,WAAW,CAAC;AAAA,IACnC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SAAO,QAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;AAC3C;","names":[]}

package/dist/admin/visual/VisualEditor.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { registerBuiltinSchemas } from "../../blocks/builtinSchemas.js";
+registerBuiltinSchemas();
 import "@xiwebdesign/xicms-core/admin.css";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useSiteConfig } from "../../config.js";
@@ -203,6 +205,20 @@ function VisualEditorInner({ onClose }) {
   const handleClose = useCallback(() => {
     void flushSave().finally(() => onClose());
   }, [flushSave, onClose]);
+  const [toonStartHint, setToonStartHint] = useState(false);
+  useEffect(() => {
+    try {
+      if (!localStorage.getItem("xicms-hint-bewerken-v1")) setToonStartHint(true);
+    } catch {
+    }
+  }, []);
+  const sluitStartHint = useCallback(() => {
+    setToonStartHint(false);
+    try {
+      localStorage.setItem("xicms-hint-bewerken-v1", "1");
+    } catch {
+    }
+  }, []);
   useEffect(() => {
     let active = true;
     getDraftByPath(siteId, path).then((d) => {
@@ -856,8 +872,10 @@ function VisualEditorInner({ onClose }) {
       setLiveBlocks(structuredClone(d.blocks));
       toast({
         title: "Gepubliceerd",
-        description: demo ? "In deze demo blijft de wijziging in je browser staan." : "Zelf zie je de nieuwe tekst meteen. Voor overige bezoekers duurt het nog ongeveer 15 minuten.",
-        tone: "success"
+        description: demo ? "In deze demo blijft de wijziging in je browser staan." : "Binnen enkele seconden zichtbaar voor iedereen.",
+        tone: "success",
+        // Sluit de mentale lus "staat het er nu echt?": één klik en je kijkt als bezoeker.
+        action: { label: "Bekijk als bezoeker \u2192", onClick: handleClose }
       });
     } catch (e) {
       toast({ title: "Publiceren mislukt", description: e.message, tone: "error" });
@@ -881,6 +899,18 @@ function VisualEditorInner({ onClose }) {
     setConflict(false);
   }, [siteId, path, mutateDraft]);
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "xicms-ve__shell", "data-xicms-tooling": "", role: "group", "aria-label": `Pagina bewerken: ${path}`, children: [
+    toonStartHint && /* @__PURE__ */ jsxs("div", { className: "xicms-ve-starthint", role: "status", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "\u270F\uFE0F Klik het ",
+        /* @__PURE__ */ jsx("strong", { children: "potlood" }),
+        " naast een tekst om die op de pagina zelf te bewerken; foto's wissel je met ",
+        /* @__PURE__ */ jsx("strong", { children: "\u{1F4F7} Foto wijzigen" }),
+        ". Klaar? ",
+        /* @__PURE__ */ jsx("strong", { children: "Publiceren" }),
+        " staat rechtsonder."
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: sluitStartHint, children: "Begrepen" })
+    ] }),
     /* @__PURE__ */ jsxs("header", { className: "xicms-ve__bar", role: "toolbar", "aria-label": "Beheer", children: [
       /* @__PURE__ */ jsx("span", { className: "xicms-editbar__brand", children: isDemoActive() ? "XiCMS \xB7 demo" : "XiCMS" }),
       /* @__PURE__ */ jsx(