@xiwebdesign/xicms-core 7.30.0 → 8.15.0

package/dist/admin/AdminApp.js.map

@@ -1 +1 @@
-{"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 { AdminNavContext } from \"./navContext\";\nimport { AdminHelp } from \"./AdminHelp\";\nimport { CoreVersion, WatIsNieuw } 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          <AdminNavContext.Provider value={setActief}>\n          {/*\n           * Ingebed vs. losstaand kiest hier al TUSSEN de Tailwind-classnamen, niet erna via CSS.\n           *\n           * De eerdere aanpak (7.28/7.29) probeerde deze layout via CSS te overrulen — een\n           * `.xicms-admin--ingebed`-selector met `!important` tegen Tailwinds eigen, ook al\n           * `!important` gemaakte utilities (de `@scope`-import bovenin admin.css). Op de echte\n           * klantsite bleek dat na TWEE releases nog steeds niet te werken: `getComputedStyle`\n           * liet zien dat `md:grid`/`md:sticky`/`flex-col` het bleven winnen, wat een CSS-\n           * cascade-gevecht is dat theoretisch nooit betrouwbaar te winnen is (laag-volgorde\n           * en @scope-proximiteit gedragen zich niet zoals de commentaren daar veronderstelden).\n           * De enige robuuste oplossing: de conflicterende classnamen helemaal niet uitzenden\n           * wanneer ingebed, zodat er geen cascade-gevecht kán ontstaan.\n           */}\n          <Tabs\n            value={actief ?? firstTab}\n            onValueChange={setActief}\n            orientation=\"vertical\"\n            className={embedded ? \"xicms-admin__raster\" : \"xicms-admin__raster md:grid md:grid-cols-[248px_1fr]\"}\n          >\n            {/* ── Zijbalk ─────────────────────────────────────────────────────────── */}\n            <div\n              className={\n                embedded\n                  ? \"xicms-admin__rail flex flex-row flex-wrap items-center gap-4 border-b border-slate-200 p-2\"\n                  : \"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              }\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\n                aria-label=\"Beheer-secties\"\n                className={\n                  embedded\n                    ? \"xicms-admin__lijst -mx-1 flex flex-row gap-1 overflow-x-auto\"\n                    : \"xicms-admin__lijst -mx-1 flex gap-1 overflow-x-auto md:flex-col md:overflow-visible\"\n                }\n              >\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                    {/* Op paneel-sleutel, niet module-id: Menu, Bouwstenen en Start delen de\n                        content-module maar zijn drie verschillende plekken met drie vormen. */}\n                    <PanelIcon id={sleutel(p)} />\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\n                className={\n                  embedded\n                    ? \"xicms-admin__voet ml-auto flex min-w-0 flex-row items-center gap-3 border-t-0 pt-0\"\n                    : \"xicms-admin__voet mt-auto hidden min-w-0 flex-col gap-3 border-t border-slate-200 pt-3 md:flex\"\n                }\n              >\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\n                className={\n                  embedded\n                    ? \"xicms-admin__kop static z-10 flex items-center justify-between gap-4 border-b border-slate-200 px-4 py-3 md:px-8\"\n                    : \"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\"\n                }\n                style={{ background: \"var(--admin-canvas)\" }}\n              >\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                <WatIsNieuw />\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          </AdminNavContext.Provider>\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 { useCallback, useEffect, useMemo, useRef, 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, useConfirm } from \"./ui/ConfirmDialog\";\nimport { heeftOnopgeslagen, ONOPGESLAGEN_VRAAG, vergeetOnopgeslagen } from \"./lib/onopgeslagen\";\nimport { Button } from \"./ui/primitives\";\nimport { Icon } from \"./ui/Icon\";\nimport { PanelIcon } from \"./ui/PanelIcon\";\nimport { builtinPanels, type PanelDefinition } from \"./panelRegistry\";\nimport { AdminNavContext } from \"./navContext\";\nimport { AdminHelp } from \"./AdminHelp\";\nimport { ZoekPalet } from \"./ZoekPalet\";\nimport { CoreVersion, WatIsNieuw } 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  if (min === \"superadmin\") return role === \"superadmin\";\n  return min === \"siteadmin\" ? canManageSite(role) : canEdit(role);\n}\n\n/** Rollen in klanttaal (8.2: de zijbalk toonde \"siteadmin\"). */\nconst ROL_NAAM: Record<string, string> = { superadmin: \"Xi Webdesign\", siteadmin: \"Beheerder\", editor: \"Redacteur\" };\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  const geldig = (tab: string | undefined) => (tab && panels.some((p) => sleutel(p) === tab) ? tab : undefined);\n  const panelSleutels = panels.map(sleutel).join(\",\");\n\n  /**\n   * 8.2: het tabblad staat in het adres (`/beheer#instellingen`). Herladen bracht je terug naar\n   * Start, \"Terug\" in de browser verliet /beheer, en naar \"Instellingen\" linken kon niet.\n   */\n  useEffect(() => {\n    const uitHash = decodeURIComponent(window.location.hash.slice(1));\n    if (geldig(uitHash)) setActief(uitHash);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [panelSleutels]);\n\n  /** Bevestigen gebeurt in een kind van ConfirmHost (zie ConfirmBrug); hier alleen de referentie. */\n  const bevestigRef = useRef<ReturnType<typeof useConfirm> | null>(null);\n  const actiefRef = useRef(actief);\n  actiefRef.current = actief;\n\n  /** Naar een ander paneel — met een vraag als er onopgeslagen werk weg zou gaan. */\n  const gaNaar = useCallback(async (tab: string, opties: { geschiedenis?: boolean } = {}) => {\n    if (tab === actiefRef.current) return true;\n    if (heeftOnopgeslagen() && bevestigRef.current) {\n      if (!(await bevestigRef.current(ONOPGESLAGEN_VRAAG))) return false;\n      vergeetOnopgeslagen();\n    }\n    setActief(tab);\n    if (opties.geschiedenis !== false) window.history.pushState(null, \"\", `#${encodeURIComponent(tab)}`);\n    return true;\n  }, []);\n\n  // 8.4: zoekpalet (Ctrl/Cmd+K).\n  const [zoekOpen, setZoekOpen] = useState(false);\n  useEffect(() => {\n    const toets = (e: KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === \"k\") {\n        e.preventDefault();\n        setZoekOpen(true);\n      }\n    };\n    window.addEventListener(\"keydown\", toets);\n    return () => window.removeEventListener(\"keydown\", toets);\n  }, []);\n  // Gememoiseerd: een nieuwe array bij elke render zou het palet tijdens het typen laten herladen.\n  const zoekPanelen = useMemo(\n    () => panels.map((p) => ({ tab: sleutel(p), label: p.label })),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [panelSleutels],\n  );\n\n  useEffect(() => {\n    const terug = () => {\n      const tab = decodeURIComponent(window.location.hash.slice(1)) || firstTab;\n      if (!tab) return;\n      void gaNaar(tab, { geschiedenis: false }).then((ok) => {\n        // Terug geannuleerd: het adres weer gelijk trekken met wat er getoond wordt.\n        if (!ok && actiefRef.current) window.history.pushState(null, \"\", `#${encodeURIComponent(actiefRef.current)}`);\n      });\n    };\n    window.addEventListener(\"popstate\", terug);\n    return () => window.removeEventListener(\"popstate\", terug);\n  }, [gaNaar, firstTab]);\n\n  return (\n    <div className={embedded ? \"xicms-admin xicms-admin--ingebed\" : \"xicms-admin\"}>\n      <ToastProvider>\n       <ConfirmHost>\n        <ConfirmBrug zet={(c) => { bevestigRef.current = c; }} />\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          <AdminNavContext.Provider value={(tab) => void gaNaar(tab)}>\n          {/*\n           * Ingebed vs. losstaand kiest hier al TUSSEN de Tailwind-classnamen, niet erna via CSS.\n           *\n           * De eerdere aanpak (7.28/7.29) probeerde deze layout via CSS te overrulen — een\n           * `.xicms-admin--ingebed`-selector met `!important` tegen Tailwinds eigen, ook al\n           * `!important` gemaakte utilities (de `@scope`-import bovenin admin.css). Op de echte\n           * klantsite bleek dat na TWEE releases nog steeds niet te werken: `getComputedStyle`\n           * liet zien dat `md:grid`/`md:sticky`/`flex-col` het bleven winnen, wat een CSS-\n           * cascade-gevecht is dat theoretisch nooit betrouwbaar te winnen is (laag-volgorde\n           * en @scope-proximiteit gedragen zich niet zoals de commentaren daar veronderstelden).\n           * De enige robuuste oplossing: de conflicterende classnamen helemaal niet uitzenden\n           * wanneer ingebed, zodat er geen cascade-gevecht kán ontstaan.\n           */}\n          <Tabs\n            value={actief ?? firstTab}\n            onValueChange={(tab) => void gaNaar(tab)}\n            orientation=\"vertical\"\n            className={embedded ? \"xicms-admin__raster\" : \"xicms-admin__raster md:grid md:grid-cols-[248px_1fr]\"}\n          >\n            {/* ── Zijbalk ─────────────────────────────────────────────────────────── */}\n            <div\n              className={\n                embedded\n                  ? \"xicms-admin__rail flex flex-row flex-wrap items-center gap-4 border-b border-slate-200 p-2\"\n                  : \"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              }\n              style={{ background: \"var(--admin-sidebar)\" }}\n            >\n              {/* Ingebed (8.6): naam, zoeken én account op één regel, de tabs eronder. Eerst liep de\n                  voet als derde rij onder de tabs door — ruim 50px kop extra boven elk paneel. */}\n              <div className={embedded ? \"flex w-full min-w-0 items-center gap-2 px-2 pt-1\" : \"flex min-w-0 items-start justify-between gap-2 px-2 pt-1\"}>\n                <div className=\"min-w-0\">\n                  <p className=\"truncate text-sm font-semibold\">{name}</p>\n                  <p className=\"text-xs text-slate-500\">Beheer</p>\n                </div>\n                <button\n                  type=\"button\"\n                  onClick={() => setZoekOpen(true)}\n                  className=\"xicms-admin-btn inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs text-slate-600 hover:bg-slate-100\"\n                  aria-label=\"Zoeken in het beheer (Ctrl of Cmd + K)\"\n                  title=\"Zoeken (Ctrl/Cmd + K)\"\n                >\n                  <Icon naam=\"zoek\" grootte={14} />\n                  Zoeken\n                </button>\n                {embedded && (\n                  <div className=\"xicms-admin__voet ml-auto flex min-w-0 items-center gap-3\">\n                    <p className=\"hidden min-w-0 truncate text-xs text-slate-600 sm:block\" title={`${user.email ?? \"\"} · ${ROL_NAAM[role ?? \"editor\"] ?? role}`}>\n                      {user.email}\n                    </p>\n                    <CoreVersion compact />\n                    <Button variant=\"secondary\" size=\"sm\" onClick={() => void signOut()}>\n                      Uitloggen\n                    </Button>\n                  </div>\n                )}\n              </div>\n\n              <TabsPrimitive.List\n                aria-label=\"Beheer-secties\"\n                className={\n                  embedded\n                    ? \"xicms-admin__lijst -mx-1 flex flex-row gap-1 overflow-x-auto\"\n                    : \"xicms-admin__lijst -mx-1 flex gap-1 overflow-x-auto md:flex-col md:overflow-visible\"\n                }\n              >\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-100 hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:outline-none data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-[inset_2px_0_0_0_var(--color-brand-500),0_1px_2px_rgba(27,26,23,0.08)]\"\n                  >\n                    {/* Op paneel-sleutel, niet module-id: Menu, Bouwstenen en Start delen de\n                        content-module maar zijn drie verschillende plekken met drie vormen. */}\n                    <PanelIcon id={sleutel(p)} />\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              {!embedded && (\n              <div className=\"xicms-admin__voet mt-auto flex min-w-0 flex-row flex-wrap items-center gap-3 border-t border-slate-200 pt-3 md:flex-col md:items-stretch\">\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-500\">{ROL_NAAM[role ?? \"editor\"] ?? role}</p>\n                </div>\n                <CoreVersion />\n                <Button variant=\"secondary\" size=\"sm\" onClick={() => void signOut()}>\n                  Uitloggen\n                </Button>\n              </div>\n              )}\n            </div>\n\n            {/* ── Werkblad ────────────────────────────────────────────────────────── */}\n            <div className=\"min-w-0\">\n              <header\n                className={\n                  embedded\n                    ? \"xicms-admin__kop static z-10 flex items-center justify-between gap-4 border-b border-slate-200 px-4 py-3 md:px-8\"\n                    : \"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\"\n                }\n                style={{ background: \"var(--admin-canvas)\" }}\n              >\n                <h1 className=\"truncate text-lg font-semibold tracking-tight\">{actievePanel?.label ?? \"Beheer\"}</h1>\n                <a\n                  className=\"inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg border border-slate-200 bg-white 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                  <Icon naam=\"extern\" grootte={14} />\n                </a>\n              </header>\n              {/* minmax(0,1fr): zonder dit nam een breed kind (tabel, grafiek) de kolom mee en liepen\n                  op een telefoon alle kaarten over de rechterrand (8.6). */}\n              <div className=\"grid grid-cols-[minmax(0,1fr)] gap-6 p-4 md:p-8\">\n                {/* Alleen op Start: boven elk paneel duwde hij het werk omlaag (8.6). */}\n                {actievePanel?.id === \"start\" && <WatIsNieuw />}\n                {panels.map((p) => (\n                  <TabsContent key={sleutel(p)} value={sleutel(p)} className=\"pt-0\">\n                    <p.Panel siteId={siteId} />\n                  </TabsContent>\n                ))}\n                {/* Start heeft zijn eigen \"Zo werkt je site\"; twee uitlegblokken op één scherm is ruis. */}\n                {actievePanel?.id !== \"start\" && <AdminHelp />}\n              </div>\n            </div>\n          </Tabs>\n          <ZoekPalet siteId={siteId} panelen={zoekPanelen} gaNaar={(tab) => void gaNaar(tab)} open={zoekOpen} onOpenChange={setZoekOpen} />\n          </AdminNavContext.Provider>\n        )}\n       </ConfirmHost>\n      </ToastProvider>\n    </div>\n  );\n}\n\n/** Maakt `useConfirm` (alleen beschikbaar ín ConfirmHost) bruikbaar voor AdminApp zelf. */\nfunction ConfirmBrug({ zet }: { zet: (c: ReturnType<typeof useConfirm>) => void }) {\n  const confirm = useConfirm();\n  useEffect(() => zet(confirm), [confirm, zet]);\n  return null;\n}\n"],"mappings":"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","names":[]}

package/dist/admin/AdminHelp.d.ts

@@ -6,4 +6,4 @@
  * waarvoor je kwam. Nu een rustige notitie in de neutrale schaal: vindbaar zolang je hem nodig
  * hebt, wegklikbaar zodra dat niet meer zo is.
  */
-export declare function AdminHelp(): import("react").JSX.Element | null;
+export declare function AdminHelp(): import("react").JSX.Element;

package/dist/admin/AdminHelp.js

@@ -1,60 +1,68 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 const KEY = "xicms-help-dismissed";
 function AdminHelp() {
-  const [hidden, setHidden] = useState(true);
-  useEffect(() => {
+  const [hidden, setHidden] = useState(() => {
     try {
-      setHidden(localStorage.getItem(KEY) === "1");
+      return typeof window !== "undefined" && localStorage.getItem(KEY) === "1";
     } catch {
-      setHidden(false);
+      return false;
     }
-  }, []);
-  if (hidden) return null;
+  });
+  const zet = (v) => {
+    try {
+      if (v) localStorage.setItem(KEY, "1");
+      else localStorage.removeItem(KEY);
+    } catch {
+    }
+    setHidden(v);
+  };
+  if (hidden) {
+    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-admin-btn rounded-lg px-2 py-1 text-xs text-slate-600 hover:bg-slate-100", onClick: () => zet(false), children: "Hoe werkt het beheer?" }) });
+  }
   return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-slate-200 p-4 text-sm text-slate-600", style: { background: "var(--color-background-card)" }, children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
       /* @__PURE__ */ jsx("strong", { className: "text-slate-700", children: "Zo werkt het beheer" }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "text-xs text-slate-500 hover:underline",
-          onClick: () => {
-            try {
-              localStorage.setItem(KEY, "1");
-            } catch {
-            }
-            setHidden(true);
-          },
-          children: "Verbergen"
-        }
-      )
+      /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-admin-btn rounded px-2 py-1 text-xs text-slate-600 hover:bg-slate-100", onClick: () => zet(true), children: "Verbergen" })
     ] }),
     /* @__PURE__ */ jsxs("ul", { className: "grid list-disc gap-1 pl-5", children: [
       /* @__PURE__ */ jsxs("li", { children: [
-        /* @__PURE__ */ jsx("strong", { children: "Pagina's" }),
-        ": pas teksten en secties aan. Je wijzigingen gaan pas live als je op",
-        /* @__PURE__ */ jsx("strong", { children: " Publiceren" }),
-        " klikt \u2014 experimenteren kan dus veilig."
+        /* @__PURE__ */ jsx("strong", { children: "Teksten en foto's" }),
+        " wijzig je op de site zelf: open de pagina, kies",
+        /* @__PURE__ */ jsx("strong", { children: " Bewerken" }),
+        " in de balk onderaan, en klik het ",
+        /* @__PURE__ */ jsx("strong", { children: "potlood" }),
+        " bij een blok (op de pagina bewerken) of het ",
+        /* @__PURE__ */ jsx("strong", { children: "tandwiel" }),
+        " (alle instellingen)."
       ] }),
       /* @__PURE__ */ jsxs("li", { children: [
-        "Liever direct op de site typen? Klik op de website zelf op ",
-        /* @__PURE__ */ jsx("strong", { children: "\u201CPagina bewerken\u201D" }),
-        "."
+        "Wat je bewerkt is eerst een ",
+        /* @__PURE__ */ jsx("strong", { children: "werkversie" }),
+        "; pas met ",
+        /* @__PURE__ */ jsx("strong", { children: "Publiceren" }),
+        " ziet een bezoeker het. Experimenteren kan dus veilig, en ",
+        /* @__PURE__ */ jsx("strong", { children: "Ongedaan maken" }),
+        " werkt altijd."
+      ] }),
+      /* @__PURE__ */ jsxs("li", { children: [
+        "Onder ",
+        /* @__PURE__ */ jsx("strong", { children: "Pagina's" }),
+        " maak je een nieuwe pagina, en stel je het adres en de weergave in Google in."
       ] }),
       /* @__PURE__ */ jsxs("li", { children: [
         /* @__PURE__ */ jsx("strong", { children: "Nieuws" }),
-        ": plaats artikelen. ",
+        ", ",
         /* @__PURE__ */ jsx("strong", { children: "Media" }),
-        ": upload foto's \u2014 die worden automatisch verkleind om je site snel te houden."
+        " (foto's, met een korte beschrijving voor slechtzienden en Google) en ",
+        /* @__PURE__ */ jsx("strong", { children: "Formulieren" }),
+        " (inzendingen bekijken en exporteren) hebben elk een eigen tabblad."
       ] }),
       /* @__PURE__ */ jsxs("li", { children: [
-        "Maak af en toe een ",
-        /* @__PURE__ */ jsx("strong", { children: "back-up" }),
-        " onder ",
-        /* @__PURE__ */ jsx("strong", { children: "Instellingen" }),
-        "; terugzetten kan altijd."
+        "Instellingen, menu en nieuws met ",
+        /* @__PURE__ */ jsx("strong", { children: "Opslaan \u2014 direct live" }),
+        " staan meteen online; daar is geen werkversie."
       ] })
     ] })
   ] });

package/dist/admin/AdminHelp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/admin/AdminHelp.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nconst KEY = \"xicms-help-dismissed\";\n\n/**\n * Korte, vriendelijke uitleg voor (a-technische) gebruikers die voor het eerst inloggen.\n *\n * BEWUST INGETOGEN en onder het werk geplaatst. In merkkleur bovenaan was dit het grootste en\n * felste element op het scherm — uitleg die je één keer leest, die visueel won van de pagina's\n * waarvoor je kwam. Nu een rustige notitie in de neutrale schaal: vindbaar zolang je hem nodig\n * hebt, wegklikbaar zodra dat niet meer zo is.\n */\nexport function AdminHelp() {\n  const [hidden, setHidden] = useState(true);\n  useEffect(() => {\n    try {\n      setHidden(localStorage.getItem(KEY) === \"1\");\n    } catch {\n      setHidden(false);\n    }\n  }, []);\n  if (hidden) return null;\n  return (\n    <div className=\"rounded-xl border border-slate-200 p-4 text-sm text-slate-600\" style={{ background: \"var(--color-background-card)\" }}>\n      <div className=\"mb-2 flex items-center justify-between\">\n        <strong className=\"text-slate-700\">Zo werkt het beheer</strong>\n        <button\n          type=\"button\"\n          className=\"text-xs text-slate-500 hover:underline\"\n          onClick={() => {\n            try {\n              localStorage.setItem(KEY, \"1\");\n            } catch {\n              /* opslag geweigerd */\n            }\n            setHidden(true);\n          }}\n        >\n          Verbergen\n        </button>\n      </div>\n      <ul className=\"grid list-disc gap-1 pl-5\">\n        <li>\n          <strong>Pagina&apos;s</strong>: pas teksten en secties aan. Je wijzigingen gaan pas live als je op\n          <strong> Publiceren</strong> klikt — experimenteren kan dus veilig.\n        </li>\n        <li>\n          Liever direct op de site typen? Klik op de website zelf op <strong>“Pagina bewerken”</strong>.\n        </li>\n        <li>\n          <strong>Nieuws</strong>: plaats artikelen. <strong>Media</strong>: upload foto&apos;s — die worden\n          automatisch verkleind om je site snel te houden.\n        </li>\n        <li>\n          Maak af en toe een <strong>back-up</strong> onder <strong>Instellingen</strong>; terugzetten kan altijd.\n        </li>\n      </ul>\n    </div>\n  );\n}\n"],"mappings":";AA0BM,SACE,KADF;AAxBN,SAAS,WAAW,gBAAgB;AAEpC,MAAM,MAAM;AAUL,SAAS,YAAY;AAC1B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,YAAU,MAAM;AACd,QAAI;AACF,gBAAU,aAAa,QAAQ,GAAG,MAAM,GAAG;AAAA,IAC7C,QAAQ;AACN,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,CAAC;AACL,MAAI,OAAQ,QAAO;AACnB,SACE,qBAAC,SAAI,WAAU,iEAAgE,OAAO,EAAE,YAAY,+BAA+B,GACjI;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,0BAAC,YAAO,WAAU,kBAAiB,iCAAmB;AAAA,MACtD;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM;AACb,gBAAI;AACF,2BAAa,QAAQ,KAAK,GAAG;AAAA,YAC/B,QAAQ;AAAA,YAER;AACA,sBAAU,IAAI;AAAA,UAChB;AAAA,UACD;AAAA;AAAA,MAED;AAAA,OACF;AAAA,IACA,qBAAC,QAAG,WAAU,6BACZ;AAAA,2BAAC,QACC;AAAA,4BAAC,YAAO,sBAAa;AAAA,QAAS;AAAA,QAC9B,oBAAC,YAAO,yBAAW;AAAA,QAAS;AAAA,SAC9B;AAAA,MACA,qBAAC,QAAG;AAAA;AAAA,QACyD,oBAAC,YAAO,yCAAiB;AAAA,QAAS;AAAA,SAC/F;AAAA,MACA,qBAAC,QACC;AAAA,4BAAC,YAAO,oBAAM;AAAA,QAAS;AAAA,QAAoB,oBAAC,YAAO,mBAAK;AAAA,QAAS;AAAA,SAEnE;AAAA,MACA,qBAAC,QAAG;AAAA;AAAA,QACiB,oBAAC,YAAO,qBAAO;AAAA,QAAS;AAAA,QAAO,oBAAC,YAAO,0BAAY;AAAA,QAAS;AAAA,SACjF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/admin/AdminHelp.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\n\nconst KEY = \"xicms-help-dismissed\";\n\n/**\n * Korte, vriendelijke uitleg voor (a-technische) gebruikers die voor het eerst inloggen.\n *\n * BEWUST INGETOGEN en onder het werk geplaatst. In merkkleur bovenaan was dit het grootste en\n * felste element op het scherm — uitleg die je één keer leest, die visueel won van de pagina's\n * waarvoor je kwam. Nu een rustige notitie in de neutrale schaal: vindbaar zolang je hem nodig\n * hebt, wegklikbaar zodra dat niet meer zo is.\n */\nexport function AdminHelp() {\n  // 8.12: direct bij de eerste render lezen. Eerst verborgen en na het lezen openklappen liet de\n  // hele pagina verspringen. Het beheer draait pas na het inloggen, dus altijd in de browser.\n  const [hidden, setHidden] = useState(() => {\n    try {\n      return typeof window !== \"undefined\" && localStorage.getItem(KEY) === \"1\";\n    } catch {\n      return false;\n    }\n  });\n  const zet = (v: boolean) => {\n    try {\n      if (v) localStorage.setItem(KEY, \"1\");\n      else localStorage.removeItem(KEY);\n    } catch {\n      /* opslag geweigerd */\n    }\n    setHidden(v);\n  };\n  // 8.2: weggeklikt was voorgoed weg. Nu blijft er een klein knopje om hem terug te halen.\n  if (hidden) {\n    return (\n      <div>\n        <button type=\"button\" className=\"xicms-admin-btn rounded-lg px-2 py-1 text-xs text-slate-600 hover:bg-slate-100\" onClick={() => zet(false)}>\n          Hoe werkt het beheer?\n        </button>\n      </div>\n    );\n  }\n  return (\n    <div className=\"rounded-xl border border-slate-200 p-4 text-sm text-slate-600\" style={{ background: \"var(--color-background-card)\" }}>\n      <div className=\"mb-2 flex items-center justify-between\">\n        <strong className=\"text-slate-700\">Zo werkt het beheer</strong>\n        <button type=\"button\" className=\"xicms-admin-btn rounded px-2 py-1 text-xs text-slate-600 hover:bg-slate-100\" onClick={() => zet(true)}>\n          Verbergen\n        </button>\n      </div>\n      {/* 8.2: bijgewerkt. Stond nog \"Pagina's: pas teksten en secties aan\" (kan sinds 7.24 alleen\n          op de site zelf) en een knop \"Pagina bewerken\" die inmiddels \"Bewerken\" heet. */}\n      <ul className=\"grid list-disc gap-1 pl-5\">\n        <li>\n          <strong>Teksten en foto&apos;s</strong> wijzig je op de site zelf: open de pagina, kies\n          <strong> Bewerken</strong> in de balk onderaan, en klik het <strong>potlood</strong> bij een blok (op de\n          pagina bewerken) of het <strong>tandwiel</strong> (alle instellingen).\n        </li>\n        <li>\n          Wat je bewerkt is eerst een <strong>werkversie</strong>; pas met <strong>Publiceren</strong> ziet een\n          bezoeker het. Experimenteren kan dus veilig, en <strong>Ongedaan maken</strong> werkt altijd.\n        </li>\n        <li>\n          Onder <strong>Pagina&apos;s</strong> maak je een nieuwe pagina, en stel je het adres en de weergave in\n          Google in.\n        </li>\n        <li>\n          <strong>Nieuws</strong>, <strong>Media</strong> (foto&apos;s, met een korte beschrijving voor\n          slechtzienden en Google) en <strong>Formulieren</strong> (inzendingen bekijken en exporteren) hebben\n          elk een eigen tabblad.\n        </li>\n        <li>\n          Instellingen, menu en nieuws met <strong>Opslaan — direct live</strong> staan meteen online; daar is\n          geen werkversie.\n        </li>\n      </ul>\n    </div>\n  );\n}\n"],"mappings":";AAqCQ,cAQF,YARE;AAnCR,SAAS,gBAAgB;AAEzB,MAAM,MAAM;AAUL,SAAS,YAAY;AAG1B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,MAAM;AACzC,QAAI;AACF,aAAO,OAAO,WAAW,eAAe,aAAa,QAAQ,GAAG,MAAM;AAAA,IACxE,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AACD,QAAM,MAAM,CAAC,MAAe;AAC1B,QAAI;AACF,UAAI,EAAG,cAAa,QAAQ,KAAK,GAAG;AAAA,UAC/B,cAAa,WAAW,GAAG;AAAA,IAClC,QAAQ;AAAA,IAER;AACA,cAAU,CAAC;AAAA,EACb;AAEA,MAAI,QAAQ;AACV,WACE,oBAAC,SACC,8BAAC,YAAO,MAAK,UAAS,WAAU,kFAAiF,SAAS,MAAM,IAAI,KAAK,GAAG,mCAE5I,GACF;AAAA,EAEJ;AACA,SACE,qBAAC,SAAI,WAAU,iEAAgE,OAAO,EAAE,YAAY,+BAA+B,GACjI;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,0BAAC,YAAO,WAAU,kBAAiB,iCAAmB;AAAA,MACtD,oBAAC,YAAO,MAAK,UAAS,WAAU,+EAA8E,SAAS,MAAM,IAAI,IAAI,GAAG,uBAExI;AAAA,OACF;AAAA,IAGA,qBAAC,QAAG,WAAU,6BACZ;AAAA,2BAAC,QACC;AAAA,4BAAC,YAAO,+BAAsB;AAAA,QAAS;AAAA,QACvC,oBAAC,YAAO,uBAAS;AAAA,QAAS;AAAA,QAAkC,oBAAC,YAAO,qBAAO;AAAA,QAAS;AAAA,QAC5D,oBAAC,YAAO,sBAAQ;AAAA,QAAS;AAAA,SACnD;AAAA,MACA,qBAAC,QAAG;AAAA;AAAA,QAC0B,oBAAC,YAAO,wBAAU;AAAA,QAAS;AAAA,QAAU,oBAAC,YAAO,wBAAU;AAAA,QAAS;AAAA,QAC5C,oBAAC,YAAO,4BAAc;AAAA,QAAS;AAAA,SACjF;AAAA,MACA,qBAAC,QAAG;AAAA;AAAA,QACI,oBAAC,YAAO,sBAAa;AAAA,QAAS;AAAA,SAEtC;AAAA,MACA,qBAAC,QACC;AAAA,4BAAC,YAAO,oBAAM;AAAA,QAAS;AAAA,QAAE,oBAAC,YAAO,mBAAK;AAAA,QAAS;AAAA,QACnB,oBAAC,YAAO,yBAAW;AAAA,QAAS;AAAA,SAE1D;AAAA,MACA,qBAAC,QAAG;AAAA;AAAA,QAC+B,oBAAC,YAAO,wCAAqB;AAAA,QAAS;AAAA,SAEzE;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/CoreVersion.d.ts

@@ -12,8 +12,11 @@ export declare function CoreVersion({ compact }: {
     compact?: boolean;
 }): import("react").JSX.Element;
 /**
- * "Wat is nieuw" (7.24): de release-notitie van de huidige engine, één keer per minor, in het
- * werkblad. Features die je bouwt zonder dat de klant het hoort, bestaan voor die klant niet.
- * Wegklikken onthoudt de versie (localStorage); de volgende minor toont de volgende notitie.
+ * "Wat is nieuw" (7.24): de release-notitie van de huidige engine, één keer per minor.
+ * Features die je bouwt zonder dat de klant het hoort, bestaan voor die klant niet.
+ *
+ * 8.6: was een groot groen blok boven élk paneel tot je "Gelezen" vond — het duwde het werk
+ * omlaag. Nu één rustige regel, alleen op Start; openklappen toont de punten, × onthoudt de versie
+ * (localStorage), en wie hem één keer opengeklapt en weer dichtgedaan heeft, ziet hem ook niet meer.
  */
 export declare function WatIsNieuw(): import("react").JSX.Element | null;

package/dist/admin/CoreVersion.js

@@ -37,6 +37,7 @@ function WatIsNieuw() {
   const note = releaseNoteVoor(CORE_VERSION);
   const sleutel = `xicms-nieuw-gezien:${note?.versie ?? ""}`;
   const [toon, setToon] = useState(false);
+  const [open, setOpen] = useState(false);
   useEffect(() => {
     if (!note) return;
     try {
@@ -46,31 +47,66 @@ function WatIsNieuw() {
     }
   }, [note, sleutel]);
   if (!note || !toon) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-brand-200 bg-brand-50 p-4 text-sm text-slate-700", role: "status", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs("strong", { className: "text-slate-800", children: [
-        "Nieuw in het beheer (",
-        note.versie,
-        ")"
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "text-xs text-slate-500 hover:underline",
-          onClick: () => {
-            try {
-              localStorage.setItem(sleutel, "1");
-            } catch {
+  const gezien = () => {
+    try {
+      localStorage.setItem(sleutel, "1");
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": `Nieuw in versie ${note.versie}`,
+      className: "rounded-lg border border-slate-200 bg-white text-sm text-slate-700",
+      style: { background: "var(--color-background-card, #fff)" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-base leading-none", children: "\u2728" }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "xicms-admin-btn min-w-0 flex-1 truncate text-left hover:underline",
+              "aria-expanded": open,
+              onClick: () => {
+                if (open) {
+                  gezien();
+                  setToon(false);
+                } else setOpen(true);
+              },
+              children: [
+                /* @__PURE__ */ jsxs("strong", { className: "font-semibold text-slate-800", children: [
+                  "Nieuw in versie ",
+                  note.versie
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "text-slate-500", children: [
+                  " \xB7 ",
+                  note.punten.length,
+                  " verbeteringen \u2014 ",
+                  open ? "verbergen" : "bekijk"
+                ] })
+              ]
             }
-            setToon(false);
-          },
-          children: "Gelezen"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("ul", { className: "grid list-disc gap-1 pl-5", children: note.punten.map((p) => /* @__PURE__ */ jsx("li", { children: p }, p)) })
-  ] });
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "xicms-admin-btn h-7 w-7 shrink-0 rounded text-slate-500 hover:bg-slate-100",
+              "aria-label": "Niet meer tonen",
+              title: "Niet meer tonen",
+              onClick: () => {
+                gezien();
+                setToon(false);
+              },
+              children: "\xD7"
+            }
+          )
+        ] }),
+        open && /* @__PURE__ */ jsx("ul", { className: "grid list-disc gap-1 border-t border-slate-100 px-3 py-2 pl-8", children: note.punten.map((p) => /* @__PURE__ */ jsx("li", { children: p }, p)) })
+      ]
+    }
+  );
 }
 export {
   CoreVersion,

package/dist/admin/CoreVersion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/admin/CoreVersion.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { CORE_VERSION, CORE_PACKAGE, isNieuwer } from \"../version\";\nimport { releaseNoteVoor } from \"../releaseNotes\";\n\n/**\n * Toont op welke engine deze site draait, en of er een nieuwere is.\n *\n * De laatste versie komt rechtstreeks van de npm-registry. Dat is een publiek, CORS-vrij endpoint\n * en het is de enige bron die niet kan verouderen — een waarde die we zelf ergens zouden bijhouden\n * loopt per definitie achter op de release die hem zou moeten bijwerken.\n *\n * Faalt stil: geen netwerk of een registry die hapert mag het beheer niet in de weg zitten. Je ziet\n * dan alleen de eigen versie, wat nog steeds het antwoord is op de vraag \"waar draai ik op\".\n */\nexport function CoreVersion({ compact = false }: { compact?: boolean }) {\n  const [laatste, setLaatste] = useState<string | null>(null);\n\n  useEffect(() => {\n    const ctrl = new AbortController();\n    fetch(`https://registry.npmjs.org/${CORE_PACKAGE}/latest`, { signal: ctrl.signal })\n      .then((r) => (r.ok ? r.json() : null))\n      .then((d: { version?: string } | null) => {\n        if (typeof d?.version === \"string\") setLaatste(d.version);\n      })\n      .catch(() => {});\n    return () => ctrl.abort();\n  }, []);\n\n  const update = laatste ? isNieuwer(laatste, CORE_VERSION) : false;\n\n  if (compact) {\n    return (\n      <span className=\"font-mono text-[11px] text-slate-500\">\n        core {CORE_VERSION}\n        {update && <span className=\"ml-1 text-amber-600\">→ {laatste}</span>}\n      </span>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-2 text-xs\">\n      <span className=\"text-slate-500\">Engine</span>\n      <span className=\"rounded px-1.5 py-0.5 font-mono text-slate-700\" style={{ background: \"var(--color-background-muted)\" }}>\n        {CORE_VERSION}\n      </span>\n      {update ? (\n        <span className=\"text-amber-700\">\n          Nieuwer beschikbaar: <span className=\"font-mono\">{laatste}</span>\n        </span>\n      ) : laatste ? (\n        <span className=\"text-slate-500\">Bijgewerkt</span>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * \"Wat is nieuw\" (7.24): de release-notitie van de huidige engine, één keer per minor, in het\n * werkblad. Features die je bouwt zonder dat de klant het hoort, bestaan voor die klant niet.\n * Wegklikken onthoudt de versie (localStorage); de volgende minor toont de volgende notitie.\n */\nexport function WatIsNieuw() {\n  const note = releaseNoteVoor(CORE_VERSION);\n  const sleutel = `xicms-nieuw-gezien:${note?.versie ?? \"\"}`;\n  const [toon, setToon] = useState(false);\n  useEffect(() => {\n    if (!note) return;\n    try {\n      setToon(localStorage.getItem(sleutel) !== \"1\");\n    } catch {\n      setToon(true);\n    }\n  }, [note, sleutel]);\n  if (!note || !toon) return null;\n  return (\n    <div className=\"rounded-xl border border-brand-200 bg-brand-50 p-4 text-sm text-slate-700\" role=\"status\">\n      <div className=\"mb-2 flex items-center justify-between gap-2\">\n        <strong className=\"text-slate-800\">Nieuw in het beheer ({note.versie})</strong>\n        <button\n          type=\"button\"\n          className=\"text-xs text-slate-500 hover:underline\"\n          onClick={() => {\n            try {\n              localStorage.setItem(sleutel, \"1\");\n            } catch {\n              /* opslag geweigerd */\n            }\n            setToon(false);\n          }}\n        >\n          Gelezen\n        </button>\n      </div>\n      <ul className=\"grid list-disc gap-1 pl-5\">\n        {note.punten.map((p) => (\n          <li key={p}>{p}</li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":";AAoCmB,SAOb,KAPa;AAlCnB,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc,cAAc,iBAAiB;AACtD,SAAS,uBAAuB;AAYzB,SAAS,YAAY,EAAE,UAAU,MAAM,GAA0B;AACtE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwB,IAAI;AAE1D,YAAU,MAAM;AACd,UAAM,OAAO,IAAI,gBAAgB;AACjC,UAAM,8BAA8B,YAAY,WAAW,EAAE,QAAQ,KAAK,OAAO,CAAC,EAC/E,KAAK,CAAC,MAAO,EAAE,KAAK,EAAE,KAAK,IAAI,IAAK,EACpC,KAAK,CAAC,MAAmC;AACxC,UAAI,OAAO,GAAG,YAAY,SAAU,YAAW,EAAE,OAAO;AAAA,IAC1D,CAAC,EACA,MAAM,MAAM;AAAA,IAAC,CAAC;AACjB,WAAO,MAAM,KAAK,MAAM;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS,UAAU,UAAU,SAAS,YAAY,IAAI;AAE5D,MAAI,SAAS;AACX,WACE,qBAAC,UAAK,WAAU,wCAAuC;AAAA;AAAA,MAC/C;AAAA,MACL,UAAU,qBAAC,UAAK,WAAU,uBAAsB;AAAA;AAAA,QAAG;AAAA,SAAQ;AAAA,OAC9D;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAU,6CACb;AAAA,wBAAC,UAAK,WAAU,kBAAiB,oBAAM;AAAA,IACvC,oBAAC,UAAK,WAAU,kDAAiD,OAAO,EAAE,YAAY,gCAAgC,GACnH,wBACH;AAAA,IACC,SACC,qBAAC,UAAK,WAAU,kBAAiB;AAAA;AAAA,MACV,oBAAC,UAAK,WAAU,aAAa,mBAAQ;AAAA,OAC5D,IACE,UACF,oBAAC,UAAK,WAAU,kBAAiB,wBAAU,IACzC;AAAA,KACN;AAEJ;AAOO,SAAS,aAAa;AAC3B,QAAM,OAAO,gBAAgB,YAAY;AACzC,QAAM,UAAU,sBAAsB,MAAM,UAAU,EAAE;AACxD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,QAAI;AACF,cAAQ,aAAa,QAAQ,OAAO,MAAM,GAAG;AAAA,IAC/C,QAAQ;AACN,cAAQ,IAAI;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAClB,MAAI,CAAC,QAAQ,CAAC,KAAM,QAAO;AAC3B,SACE,qBAAC,SAAI,WAAU,6EAA4E,MAAK,UAC9F;AAAA,yBAAC,SAAI,WAAU,gDACb;AAAA,2BAAC,YAAO,WAAU,kBAAiB;AAAA;AAAA,QAAsB,KAAK;AAAA,QAAO;AAAA,SAAC;AAAA,MACtE;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM;AACb,gBAAI;AACF,2BAAa,QAAQ,SAAS,GAAG;AAAA,YACnC,QAAQ;AAAA,YAER;AACA,oBAAQ,KAAK;AAAA,UACf;AAAA,UACD;AAAA;AAAA,MAED;AAAA,OACF;AAAA,IACA,oBAAC,QAAG,WAAU,6BACX,eAAK,OAAO,IAAI,CAAC,MAChB,oBAAC,QAAY,eAAJ,CAAM,CAChB,GACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/admin/CoreVersion.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { CORE_VERSION, CORE_PACKAGE, isNieuwer } from \"../version\";\nimport { releaseNoteVoor } from \"../releaseNotes\";\n\n/**\n * Toont op welke engine deze site draait, en of er een nieuwere is.\n *\n * De laatste versie komt rechtstreeks van de npm-registry. Dat is een publiek, CORS-vrij endpoint\n * en het is de enige bron die niet kan verouderen — een waarde die we zelf ergens zouden bijhouden\n * loopt per definitie achter op de release die hem zou moeten bijwerken.\n *\n * Faalt stil: geen netwerk of een registry die hapert mag het beheer niet in de weg zitten. Je ziet\n * dan alleen de eigen versie, wat nog steeds het antwoord is op de vraag \"waar draai ik op\".\n */\nexport function CoreVersion({ compact = false }: { compact?: boolean }) {\n  const [laatste, setLaatste] = useState<string | null>(null);\n\n  useEffect(() => {\n    const ctrl = new AbortController();\n    fetch(`https://registry.npmjs.org/${CORE_PACKAGE}/latest`, { signal: ctrl.signal })\n      .then((r) => (r.ok ? r.json() : null))\n      .then((d: { version?: string } | null) => {\n        if (typeof d?.version === \"string\") setLaatste(d.version);\n      })\n      .catch(() => {});\n    return () => ctrl.abort();\n  }, []);\n\n  const update = laatste ? isNieuwer(laatste, CORE_VERSION) : false;\n\n  if (compact) {\n    return (\n      <span className=\"font-mono text-[11px] text-slate-500\">\n        core {CORE_VERSION}\n        {update && <span className=\"ml-1 text-amber-600\">→ {laatste}</span>}\n      </span>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-2 text-xs\">\n      <span className=\"text-slate-500\">Engine</span>\n      <span className=\"rounded px-1.5 py-0.5 font-mono text-slate-700\" style={{ background: \"var(--color-background-muted)\" }}>\n        {CORE_VERSION}\n      </span>\n      {update ? (\n        <span className=\"text-amber-700\">\n          Nieuwer beschikbaar: <span className=\"font-mono\">{laatste}</span>\n        </span>\n      ) : laatste ? (\n        <span className=\"text-slate-500\">Bijgewerkt</span>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * \"Wat is nieuw\" (7.24): de release-notitie van de huidige engine, één keer per minor.\n * Features die je bouwt zonder dat de klant het hoort, bestaan voor die klant niet.\n *\n * 8.6: was een groot groen blok boven élk paneel tot je \"Gelezen\" vond — het duwde het werk\n * omlaag. Nu één rustige regel, alleen op Start; openklappen toont de punten, × onthoudt de versie\n * (localStorage), en wie hem één keer opengeklapt en weer dichtgedaan heeft, ziet hem ook niet meer.\n */\nexport function WatIsNieuw() {\n  const note = releaseNoteVoor(CORE_VERSION);\n  const sleutel = `xicms-nieuw-gezien:${note?.versie ?? \"\"}`;\n  const [toon, setToon] = useState(false);\n  const [open, setOpen] = useState(false);\n  useEffect(() => {\n    if (!note) return;\n    try {\n      setToon(localStorage.getItem(sleutel) !== \"1\");\n    } catch {\n      setToon(true);\n    }\n  }, [note, sleutel]);\n  if (!note || !toon) return null;\n  const gezien = () => {\n    try {\n      localStorage.setItem(sleutel, \"1\");\n    } catch {\n      /* opslag geweigerd */\n    }\n  };\n  return (\n    <section\n      aria-label={`Nieuw in versie ${note.versie}`}\n      className=\"rounded-lg border border-slate-200 bg-white text-sm text-slate-700\"\n      style={{ background: \"var(--color-background-card, #fff)\" }}\n    >\n      <div className=\"flex items-center gap-2 px-3 py-2\">\n        <span aria-hidden className=\"text-base leading-none\">✨</span>\n        <button\n          type=\"button\"\n          className=\"xicms-admin-btn min-w-0 flex-1 truncate text-left hover:underline\"\n          aria-expanded={open}\n          onClick={() => {\n            if (open) {\n              gezien();\n              setToon(false);\n            } else setOpen(true);\n          }}\n        >\n          <strong className=\"font-semibold text-slate-800\">Nieuw in versie {note.versie}</strong>\n          <span className=\"text-slate-500\"> · {note.punten.length} verbeteringen — {open ? \"verbergen\" : \"bekijk\"}</span>\n        </button>\n        <button\n          type=\"button\"\n          className=\"xicms-admin-btn h-7 w-7 shrink-0 rounded text-slate-500 hover:bg-slate-100\"\n          aria-label=\"Niet meer tonen\"\n          title=\"Niet meer tonen\"\n          onClick={() => {\n            gezien();\n            setToon(false);\n          }}\n        >\n          ×\n        </button>\n      </div>\n      {open && (\n        <ul className=\"grid list-disc gap-1 border-t border-slate-100 px-3 py-2 pl-8\">\n          {note.punten.map((p) => (\n            <li key={p}>{p}</li>\n          ))}\n        </ul>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/NewsEditor.d.ts

@@ -1,3 +1,10 @@
+/** "2026-10-18" → "18 oktober 2026" (8.2: de lijst toonde de ruwe ISO-datum). */
+export declare function nlDatum(iso: string | undefined): string;
+/** Zichtbaar, ingepland (gepubliceerd maar met een datum in de toekomst) of concept. */
+export declare function nieuwsToestand(a: {
+    published: boolean;
+    date?: string;
+}, vandaag?: string): "zichtbaar" | "ingepland" | "concept";
 /**
  * Beheer van nieuwsartikelen — zelfde look & feel als de rest van /beheer.
  *