@xiwebdesign/xicms-core 7.24.0 → 7.26.0

package/dist/admin.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-emerald-700:oklch(50.8% .118 165.612);--color-blue-600:oklch(54.6% .245 262.881);--color-indigo-500:oklch(58.5% .233 277.117);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-3xl:48rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--ease-out:cubic-bezier(0, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--color-brand:#4f46e5;--color-brand-50:#eef2ff;--color-brand-500:#4f46e5;--color-brand-600:#4f46e5;--color-brand-700:#3730a3}}@scope(.xicms-admin){@layer utilities{.pointer-events-none{pointer-events:none!important}.visible{visibility:visible!important}.sr-only{clip-path:inset(50%)!important;white-space:nowrap!important;border-width:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.static{position:static!important}.sticky{position:sticky!important}.inset-x-0{inset-inline:0!important}.-top-0\.5{top:calc(var(--spacing) * -.5)!important}.-top-2{top:calc(var(--spacing) * -2)!important}.top-0{top:0!important}.-right-2{right:calc(var(--spacing) * -2)!important}.right-0{right:0!important}.-bottom-2{bottom:calc(var(--spacing) * -2)!important}.bottom-0{bottom:0!important}.-left-2{left:calc(var(--spacing) * -2)!important}.left-1\/2{left:50%!important}.z-10{z-index:10!important}.col-span-2{grid-column:span 2/span 2!important}.col-span-full{grid-column:1/-1!important}.container{width:100%!important}@media (min-width:40rem){.container{max-width:40rem!important}}@media (min-width:48rem){.container{max-width:48rem!important}}@media (min-width:64rem){.container{max-width:64rem!important}}@media (min-width:80rem){.container{max-width:80rem!important}}@media (min-width:96rem){.container{max-width:96rem!important}}.-mx-1{margin-inline:calc(var(--spacing) * -1)!important}.-mx-4{margin-inline:calc(var(--spacing) * -4)!important}.mt-0\.5{margin-top:calc(var(--spacing) * .5)!important}.mt-1{margin-top:var(--spacing)!important}.mt-2{margin-top:calc(var(--spacing) * 2)!important}.mt-3{margin-top:calc(var(--spacing) * 3)!important}.mt-4{margin-top:calc(var(--spacing) * 4)!important}.mt-5{margin-top:calc(var(--spacing) * 5)!important}.mt-6{margin-top:calc(var(--spacing) * 6)!important}.mt-auto{margin-top:auto!important}.mr-1{margin-right:var(--spacing)!important}.mr-2{margin-right:calc(var(--spacing) * 2)!important}.mb-1{margin-bottom:var(--spacing)!important}.mb-2{margin-bottom:calc(var(--spacing) * 2)!important}.mb-3{margin-bottom:calc(var(--spacing) * 3)!important}.mb-4{margin-bottom:calc(var(--spacing) * 4)!important}.ml-1{margin-left:var(--spacing)!important}.ml-1\.5{margin-left:calc(var(--spacing) * 1.5)!important}.ml-auto{margin-left:auto!important}.block{display:block!important}.contents{display:contents!important}.flex{display:flex!important}.grid{display:grid!important}.hidden{display:none!important}.inline{display:inline!important}.inline-block{display:inline-block!important}.inline-flex{display:inline-flex!important}.table{display:table!important}.aspect-square{aspect-ratio:1!important}.h-1\.5{height:calc(var(--spacing) * 1.5)!important}.h-2{height:calc(var(--spacing) * 2)!important}.h-4{height:calc(var(--spacing) * 4)!important}.h-5{height:calc(var(--spacing) * 5)!important}.h-6{height:calc(var(--spacing) * 6)!important}.h-8{height:calc(var(--spacing) * 8)!important}.h-9{height:calc(var(--spacing) * 9)!important}.h-10{height:calc(var(--spacing) * 10)!important}.h-12{height:calc(var(--spacing) * 12)!important}.h-14{height:calc(var(--spacing) * 14)!important}.h-16{height:calc(var(--spacing) * 16)!important}.h-28{height:calc(var(--spacing) * 28)!important}.h-32{height:calc(var(--spacing) * 32)!important}.h-\[70vh\]{height:70vh!important}.h-fit{height:fit-content!important}.h-full{height:100%!important}.max-h-\[55vh\]{max-height:55vh!important}.max-h-\[60vh\]{max-height:60vh!important}.min-h-\[8rem\]{min-height:8rem!important}.min-h-screen{min-height:100vh!important}.w-2{width:calc(var(--spacing) * 2)!important}.w-4{width:calc(var(--spacing) * 4)!important}.w-5{width:calc(var(--spacing) * 5)!important}.w-6{width:calc(var(--spacing) * 6)!important}.w-8{width:calc(var(--spacing) * 8)!important}.w-11{width:calc(var(--spacing) * 11)!important}.w-14{width:calc(var(--spacing) * 14)!important}.w-16{width:calc(var(--spacing) * 16)!important}.w-20{width:calc(var(--spacing) * 20)!important}.w-24{width:calc(var(--spacing) * 24)!important}.w-28{width:calc(var(--spacing) * 28)!important}.w-32{width:calc(var(--spacing) * 32)!important}.w-36{width:calc(var(--spacing) * 36)!important}.w-44{width:calc(var(--spacing) * 44)!important}.w-fit{width:fit-content!important}.w-full{width:100%!important}.max-w-3xl{max-width:var(--container-3xl)!important}.max-w-4xl{max-width:var(--container-4xl)!important}.max-w-40{max-width:calc(var(--spacing) * 40)!important}.max-w-md{max-width:var(--container-md)!important}.max-w-sm{max-width:var(--container-sm)!important}.max-w-xs{max-width:var(--container-xs)!important}.min-w-0{min-width:0!important}.min-w-8{min-width:calc(var(--spacing) * 8)!important}.flex-1{flex:1!important}.shrink-0{flex-shrink:0!important}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)!important}.cursor-crosshair{cursor:crosshair!important}.cursor-default{cursor:default!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!important}.list-decimal{list-style-type:decimal!important}.list-disc{list-style-type:disc!important}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.grid-cols-\[1fr_1\.4fr_auto\]{grid-template-columns:1fr 1.4fr auto!important}.grid-cols-\[1fr_1fr_90px_90px_auto\]{grid-template-columns:1fr 1fr 90px 90px auto!important}.grid-cols-\[1fr_150px_70px_auto\]{grid-template-columns:1fr 150px 70px auto!important}.grid-cols-\[120px_1fr\]{grid-template-columns:120px 1fr!important}.grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.place-items-center{place-items:center!important}.items-baseline{align-items:baseline!important}.items-center{align-items:center!important}.items-end{align-items:flex-end!important}.items-start{align-items:flex-start!important}.justify-between{justify-content:space-between!important}.justify-center{justify-content:center!important}.justify-end{justify-content:flex-end!important}.gap-0\.5{gap:calc(var(--spacing) * .5)!important}.gap-1{gap:var(--spacing)!important}.gap-1\.5{gap:calc(var(--spacing) * 1.5)!important}.gap-2{gap:calc(var(--spacing) * 2)!important}.gap-2\.5{gap:calc(var(--spacing) * 2.5)!important}.gap-3{gap:calc(var(--spacing) * 3)!important}.gap-4{gap:calc(var(--spacing) * 4)!important}.gap-6{gap:calc(var(--spacing) * 6)!important}.gap-x-3{column-gap:calc(var(--spacing) * 3)!important}.gap-x-5{column-gap:calc(var(--spacing) * 5)!important}.gap-y-1{row-gap:var(--spacing)!important}.self-center{align-self:center!important}.self-end{align-self:flex-end!important}.truncate{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.overflow-x-auto{overflow-x:auto!important}.overflow-y-auto{overflow-y:auto!important}.rounded{border-radius:.25rem!important}.rounded-full{border-radius:3.40282e38px!important}.rounded-lg{border-radius:var(--radius-lg)!important}.rounded-md{border-radius:var(--radius-md)!important}.rounded-xl{border-radius:var(--radius-xl)!important}.rounded-t-lg{border-top-left-radius:var(--radius-lg)!important;border-top-right-radius:var(--radius-lg)!important}.rounded-b-lg{border-bottom-right-radius:var(--radius-lg)!important;border-bottom-left-radius:var(--radius-lg)!important}.border{border-style:var(--tw-border-style)!important;border-width:1px!important}.border-2{border-style:var(--tw-border-style)!important;border-width:2px!important}.border-t{border-top-style:var(--tw-border-style)!important;border-top-width:1px!important}.border-t-0{border-top-style:var(--tw-border-style)!important;border-top-width:0!important}.border-b{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:1px!important}.border-amber-300{border-color:var(--color-amber-300)!important}.border-brand-500{border-color:var(--color-brand-500)!important}.border-red-200{border-color:var(--color-red-200)!important}.border-slate-100{border-color:var(--color-slate-100)!important}.border-slate-200{border-color:var(--color-slate-200)!important}.border-slate-300{border-color:var(--color-slate-300)!important}.border-white{border-color:var(--color-white)!important}.bg-amber-50{background-color:var(--color-amber-50)!important}.bg-amber-50\/40{background-color:#fffbeb66!important}@supports (color:color-mix(in lab, red, red)){.bg-amber-50\/40{background-color:color-mix(in oklab, var(--color-amber-50) 40%, transparent)!important}}.bg-brand-50{background-color:var(--color-brand-50)!important}.bg-brand-500{background-color:var(--color-brand-500)!important}.bg-red-50{background-color:var(--color-red-50)!important}.bg-slate-50{background-color:var(--color-slate-50)!important}.bg-slate-100{background-color:var(--color-slate-100)!important}.bg-slate-200{background-color:var(--color-slate-200)!important}.bg-slate-700{background-color:var(--color-slate-700)!important}.bg-transparent{background-color:#0000!important}.bg-white{background-color:var(--color-white)!important}.object-contain{object-fit:contain!important}.object-cover{object-fit:cover!important}.p-0\.5{padding:calc(var(--spacing) * .5)!important}.p-1{padding:var(--spacing)!important}.p-2{padding:calc(var(--spacing) * 2)!important}.p-3{padding:calc(var(--spacing) * 3)!important}.p-4{padding:calc(var(--spacing) * 4)!important}.p-5{padding:calc(var(--spacing) * 5)!important}.p-6{padding:calc(var(--spacing) * 6)!important}.px-1{padding-inline:var(--spacing)!important}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)!important}.px-2{padding-inline:calc(var(--spacing) * 2)!important}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)!important}.px-3{padding-inline:calc(var(--spacing) * 3)!important}.px-4{padding-inline:calc(var(--spacing) * 4)!important}.py-0\.5{padding-block:calc(var(--spacing) * .5)!important}.py-1{padding-block:var(--spacing)!important}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)!important}.py-2{padding-block:calc(var(--spacing) * 2)!important}.py-3{padding-block:calc(var(--spacing) * 3)!important}.py-8{padding-block:calc(var(--spacing) * 8)!important}.py-16{padding-block:calc(var(--spacing) * 16)!important}.pt-0{padding-top:0!important}.pt-1{padding-top:var(--spacing)!important}.pt-3{padding-top:calc(var(--spacing) * 3)!important}.pt-4{padding-top:calc(var(--spacing) * 4)!important}.pt-5{padding-top:calc(var(--spacing) * 5)!important}.pr-2{padding-right:calc(var(--spacing) * 2)!important}.pb-1{padding-bottom:var(--spacing)!important}.pb-2{padding-bottom:calc(var(--spacing) * 2)!important}.pl-1{padding-left:var(--spacing)!important}.pl-5{padding-left:calc(var(--spacing) * 5)!important}.text-center{text-align:center!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.align-top{vertical-align:top!important}.font-mono{font-family:var(--font-mono)!important}.text-3xl{font-size:var(--text-3xl)!important;line-height:var(--tw-leading,var(--text-3xl--line-height))!important}.text-base{font-size:var(--text-base)!important;line-height:var(--tw-leading,var(--text-base--line-height))!important}.text-lg{font-size:var(--text-lg)!important;line-height:var(--tw-leading,var(--text-lg--line-height))!important}.text-sm{font-size:var(--text-sm)!important;line-height:var(--tw-leading,var(--text-sm--line-height))!important}.text-xl{font-size:var(--text-xl)!important;line-height:var(--tw-leading,var(--text-xl--line-height))!important}.text-xs{font-size:var(--text-xs)!important;line-height:var(--tw-leading,var(--text-xs--line-height))!important}.text-\[10px\]{font-size:10px!important}.text-\[11px\]{font-size:11px!important}.font-bold{--tw-font-weight:var(--font-weight-bold)!important;font-weight:var(--font-weight-bold)!important}.font-medium{--tw-font-weight:var(--font-weight-medium)!important;font-weight:var(--font-weight-medium)!important}.font-normal{--tw-font-weight:var(--font-weight-normal)!important;font-weight:var(--font-weight-normal)!important}.font-semibold{--tw-font-weight:var(--font-weight-semibold)!important;font-weight:var(--font-weight-semibold)!important}.tracking-wide{--tw-tracking:var(--tracking-wide)!important;letter-spacing:var(--tracking-wide)!important}.whitespace-nowrap{white-space:nowrap!important}.whitespace-pre-wrap{white-space:pre-wrap!important}.text-amber-600{color:var(--color-amber-600)!important}.text-amber-700{color:var(--color-amber-700)!important}.text-amber-800{color:var(--color-amber-800)!important}.text-amber-900{color:var(--color-amber-900)!important}.text-brand-700{color:var(--color-brand-700)!important}.text-brand-700\/70{color:#3730a3b3!important}@supports (color:color-mix(in lab, red, red)){.text-brand-700\/70{color:color-mix(in oklab, var(--color-brand-700) 70%, transparent)!important}}.text-emerald-700{color:var(--color-emerald-700)!important}.text-red-600{color:var(--color-red-600)!important}.text-red-700{color:var(--color-red-700)!important}.text-slate-400{color:var(--color-slate-400)!important}.text-slate-500{color:var(--color-slate-500)!important}.text-slate-600{color:var(--color-slate-600)!important}.text-slate-700{color:var(--color-slate-700)!important}.text-slate-800{color:var(--color-slate-800)!important}.text-slate-900{color:var(--color-slate-900)!important}.text-white{color:var(--color-white)!important}.uppercase{text-transform:uppercase!important}.italic{font-style:italic!important}.tabular-nums{--tw-numeric-spacing:tabular-nums!important;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)!important}.line-through{text-decoration-line:line-through!important}.underline{text-decoration-line:underline!important}.opacity-70{opacity:.7!important}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.ring-brand-500{--tw-ring-color:var(--color-brand-500)!important}.outline{outline-style:var(--tw-outline-style)!important;outline-width:1px!important}.outline-2{outline-style:var(--tw-outline-style)!important;outline-width:2px!important}.outline-offset-4{outline-offset:4px!important}.outline-brand-500{outline-color:var(--color-brand-500)!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.grayscale{--tw-grayscale:grayscale(100%)!important;filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events!important;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))!important;transition-duration:var(--tw-duration,var(--default-transition-duration))!important}.transition-\[filter\]{transition-property:filter!important;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))!important;transition-duration:var(--tw-duration,var(--default-transition-duration))!important}.ease-out{--tw-ease:var(--ease-out)!important;transition-timing-function:var(--ease-out)!important}.outline-dashed{--tw-outline-style:dashed!important;outline-style:dashed!important}.outline-none{--tw-outline-style:none!important;outline-style:none!important}@media (hover:hover){.group-hover\:opacity-80:is(:where(.group):hover *){opacity:.8!important}}.last\:border-0:last-child{border-style:var(--tw-border-style)!important;border-width:0!important}@media (hover:hover){.hover\:border-brand-500:hover{border-color:var(--color-brand-500)!important}.hover\:bg-slate-50:hover{background-color:var(--color-slate-50)!important}.hover\:bg-slate-100:hover{background-color:var(--color-slate-100)!important}.hover\:bg-slate-200:hover{background-color:var(--color-slate-200)!important}.hover\:text-slate-600:hover{color:var(--color-slate-600)!important}.hover\:text-slate-700:hover{color:var(--color-slate-700)!important}.hover\:text-slate-900:hover{color:var(--color-slate-900)!important}.hover\:underline:hover{text-decoration-line:underline!important}.hover\:brightness-95:hover{--tw-brightness:brightness(95%)!important;filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.focus\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)!important}.focus\:outline-none:focus{--tw-outline-style:none!important;outline-style:none!important}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.focus-visible\:ring-brand-500:focus-visible{--tw-ring-color:var(--color-brand-500)!important}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style)!important;outline-width:2px!important}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px!important}.focus-visible\:outline-blue-600:focus-visible{outline-color:var(--color-blue-600)!important}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none!important;outline-style:none!important}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed!important}.disabled\:opacity-50:disabled{opacity:.5!important}.aria-\[current\=page\]\:bg-slate-200[aria-current=page]{background-color:var(--color-slate-200)!important}.aria-\[current\=page\]\:text-slate-900[aria-current=page]{color:var(--color-slate-900)!important}.data-\[state\=active\]\:border-b-2[data-state=active]{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:2px!important}.data-\[state\=active\]\:border-brand-600[data-state=active]{border-color:var(--color-brand-600)!important}.data-\[state\=active\]\:bg-slate-100[data-state=active]{background-color:var(--color-slate-100)!important}.data-\[state\=active\]\:text-brand-700[data-state=active]{color:var(--color-brand-700)!important}.data-\[state\=active\]\:text-slate-900[data-state=active]{color:var(--color-slate-900)!important}.data-\[state\=active\]\:shadow-\[inset_2px_0_0_0_var\(--color-brand-500\)\][data-state=active]{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,var(--color-brand-500))!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}@media (min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}}@media (min-width:48rem){.md\:sticky{position:sticky!important}.md\:top-0{top:0!important}.md\:col-span-5{grid-column:span 5/span 5!important}.md\:block{display:block!important}.md\:flex{display:flex!important}.md\:grid{display:grid!important}.md\:h-screen{height:100vh!important}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}.md\:grid-cols-\[1fr_1fr_140px_auto_auto\]{grid-template-columns:1fr 1fr 140px auto auto!important}.md\:grid-cols-\[1fr_110px\]{grid-template-columns:1fr 110px!important}.md\:grid-cols-\[1fr_130px_90px_110px_auto\]{grid-template-columns:1fr 130px 90px 110px auto!important}.md\:grid-cols-\[1fr_140px_1fr_150px\]{grid-template-columns:1fr 140px 1fr 150px!important}.md\:grid-cols-\[1fr_auto_1fr\]{grid-template-columns:1fr auto 1fr!important}.md\:grid-cols-\[248px_1fr\]{grid-template-columns:248px 1fr!important}.md\:grid-cols-\[260px_1fr\]{grid-template-columns:260px 1fr!important}.md\:grid-cols-\[280px_1fr\]{grid-template-columns:280px 1fr!important}.md\:grid-cols-\[300px_1fr\]{grid-template-columns:300px 1fr!important}.md\:grid-cols-\[340px_1fr\]{grid-template-columns:340px 1fr!important}.md\:flex-col{flex-direction:column!important}.md\:items-end{align-items:flex-end!important}.md\:overflow-visible{overflow:visible!important}.md\:border-r{border-right-style:var(--tw-border-style)!important;border-right-width:1px!important}.md\:border-b-0{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0!important}.md\:p-8{padding:calc(var(--spacing) * 8)!important}.md\:px-8{padding-inline:calc(var(--spacing) * 8)!important}}@media (min-width:64rem){.lg\:col-span-2{grid-column:span 2/span 2!important}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}}}}.xicms-admin,.xicms-admin *,.xicms-admin :before,.xicms-admin :after{box-sizing:border-box}.xicms-admin{-webkit-font-smoothing:antialiased;--color-white:#fff;--color-slate-50:#faf9f6;--color-slate-100:#f3f1ec;--color-slate-200:#e5e2da;--color-slate-300:#d5d1c7;--color-slate-400:#a8a399;--color-slate-500:#6e6a62;--color-slate-600:#57534b;--color-slate-700:#403c36;--color-slate-900:#1b1a17;--color-brand:var(--xicms-primary,#4f46e5);--color-brand-500:var(--xicms-primary,#4f46e5);--color-brand-600:var(--xicms-primary,#4f46e5);--color-brand-700:var(--xicms-primary,#4f46e5);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}@supports (color:color-mix(in lab, red, red)){.xicms-admin{--color-brand-700:color-mix(in srgb, var(--xicms-primary,#4f46e5) 78%, #1b1a17)}}.xicms-admin{--color-brand-50:var(--xicms-primary,#4f46e5)}@supports (color:color-mix(in lab, red, red)){.xicms-admin{--color-brand-50:color-mix(in srgb, var(--xicms-primary,#4f46e5) 10%, #fff)}}.xicms-admin{--admin-canvas:#f6f5f2;--admin-sidebar:#f0eee9;--color-background-body:var(--color-white);--color-background-surface:var(--color-white);--color-background-card:var(--color-white);--color-background-muted:var(--color-slate-100);--color-text-primary:var(--color-slate-900);--color-text-secondary:var(--color-slate-500);--color-border:var(--color-slate-200);--color-accent:var(--color-brand-500);--color-on-accent:#fff;--color-error:#dc2626;color-scheme:light;color:var(--color-text-primary);background:var(--admin-canvas)}.xicms-admin h1,.xicms-admin h2,.xicms-admin h3,.xicms-admin p,.xicms-admin figure{margin:0}.xicms-admin button{font:inherit;cursor:pointer}.xicms-admin input,.xicms-admin textarea,.xicms-admin select{font:inherit;color:inherit}.xicms-admin .ProseMirror{outline:none;min-height:8rem}.xicms-admin .ProseMirror p{margin:0 0 .6rem}.xicms-admin .ProseMirror:focus{outline:none}@media (prefers-reduced-motion:reduce){.xicms-admin *,.xicms-admin :before,.xicms-admin :after,.xicms-ve *,.xicms-ve :before,.xicms-ve :after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.xicms-admin__midden,.xicms-admin__raster{min-height:100vh}.xicms-admin--ingebed .xicms-admin__midden{min-height:50vh}.xicms-admin--ingebed .xicms-admin__raster{min-height:60vh;display:block}.xicms-admin--ingebed .xicms-admin__rail{border-bottom-width:1px;border-right:0;flex-flow:wrap;align-items:center;gap:1rem;height:auto;padding:.5rem 1rem;position:static}.xicms-admin--ingebed .xicms-admin__lijst{flex-direction:row;overflow-x:auto}.xicms-admin--ingebed .xicms-admin__voet{border-top:0;flex-direction:row;align-items:center;gap:.75rem;margin-top:0;margin-left:auto;padding-top:0;display:flex}.xicms-admin--ingebed .xicms-admin__kop{position:static}.xicms-admin--ingebed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-emerald-700:oklch(50.8% .118 165.612);--color-blue-600:oklch(54.6% .245 262.881);--color-indigo-500:oklch(58.5% .233 277.117);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-3xl:48rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--ease-out:cubic-bezier(0, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--color-brand:#4f46e5;--color-brand-50:#eef2ff;--color-brand-500:#4f46e5;--color-brand-600:#4f46e5;--color-brand-700:#3730a3}}@scope(.xicms-admin){@layer utilities{.pointer-events-none{pointer-events:none!important}.visible{visibility:visible!important}.sr-only{clip-path:inset(50%)!important;white-space:nowrap!important;border-width:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.static{position:static!important}.sticky{position:sticky!important}.inset-x-0{inset-inline:0!important}.-top-0\.5{top:calc(var(--spacing) * -.5)!important}.-top-2{top:calc(var(--spacing) * -2)!important}.top-0{top:0!important}.-right-2{right:calc(var(--spacing) * -2)!important}.right-0{right:0!important}.-bottom-2{bottom:calc(var(--spacing) * -2)!important}.bottom-0{bottom:0!important}.-left-2{left:calc(var(--spacing) * -2)!important}.left-1\/2{left:50%!important}.z-10{z-index:10!important}.col-span-2{grid-column:span 2/span 2!important}.col-span-full{grid-column:1/-1!important}.container{width:100%!important}@media (min-width:40rem){.container{max-width:40rem!important}}@media (min-width:48rem){.container{max-width:48rem!important}}@media (min-width:64rem){.container{max-width:64rem!important}}@media (min-width:80rem){.container{max-width:80rem!important}}@media (min-width:96rem){.container{max-width:96rem!important}}.-mx-1{margin-inline:calc(var(--spacing) * -1)!important}.-mx-4{margin-inline:calc(var(--spacing) * -4)!important}.mt-0\.5{margin-top:calc(var(--spacing) * .5)!important}.mt-1{margin-top:var(--spacing)!important}.mt-2{margin-top:calc(var(--spacing) * 2)!important}.mt-3{margin-top:calc(var(--spacing) * 3)!important}.mt-4{margin-top:calc(var(--spacing) * 4)!important}.mt-5{margin-top:calc(var(--spacing) * 5)!important}.mt-6{margin-top:calc(var(--spacing) * 6)!important}.mt-auto{margin-top:auto!important}.mr-1{margin-right:var(--spacing)!important}.mr-2{margin-right:calc(var(--spacing) * 2)!important}.mb-1{margin-bottom:var(--spacing)!important}.mb-2{margin-bottom:calc(var(--spacing) * 2)!important}.mb-3{margin-bottom:calc(var(--spacing) * 3)!important}.mb-4{margin-bottom:calc(var(--spacing) * 4)!important}.ml-1{margin-left:var(--spacing)!important}.ml-1\.5{margin-left:calc(var(--spacing) * 1.5)!important}.ml-auto{margin-left:auto!important}.block{display:block!important}.contents{display:contents!important}.flex{display:flex!important}.grid{display:grid!important}.hidden{display:none!important}.inline{display:inline!important}.inline-block{display:inline-block!important}.inline-flex{display:inline-flex!important}.table{display:table!important}.aspect-square{aspect-ratio:1!important}.h-1\.5{height:calc(var(--spacing) * 1.5)!important}.h-2{height:calc(var(--spacing) * 2)!important}.h-4{height:calc(var(--spacing) * 4)!important}.h-5{height:calc(var(--spacing) * 5)!important}.h-6{height:calc(var(--spacing) * 6)!important}.h-8{height:calc(var(--spacing) * 8)!important}.h-9{height:calc(var(--spacing) * 9)!important}.h-10{height:calc(var(--spacing) * 10)!important}.h-12{height:calc(var(--spacing) * 12)!important}.h-14{height:calc(var(--spacing) * 14)!important}.h-16{height:calc(var(--spacing) * 16)!important}.h-28{height:calc(var(--spacing) * 28)!important}.h-32{height:calc(var(--spacing) * 32)!important}.h-\[70vh\]{height:70vh!important}.h-fit{height:fit-content!important}.h-full{height:100%!important}.max-h-\[55vh\]{max-height:55vh!important}.max-h-\[60vh\]{max-height:60vh!important}.min-h-\[8rem\]{min-height:8rem!important}.min-h-screen{min-height:100vh!important}.w-2{width:calc(var(--spacing) * 2)!important}.w-4{width:calc(var(--spacing) * 4)!important}.w-5{width:calc(var(--spacing) * 5)!important}.w-6{width:calc(var(--spacing) * 6)!important}.w-8{width:calc(var(--spacing) * 8)!important}.w-11{width:calc(var(--spacing) * 11)!important}.w-14{width:calc(var(--spacing) * 14)!important}.w-16{width:calc(var(--spacing) * 16)!important}.w-20{width:calc(var(--spacing) * 20)!important}.w-24{width:calc(var(--spacing) * 24)!important}.w-28{width:calc(var(--spacing) * 28)!important}.w-32{width:calc(var(--spacing) * 32)!important}.w-36{width:calc(var(--spacing) * 36)!important}.w-44{width:calc(var(--spacing) * 44)!important}.w-fit{width:fit-content!important}.w-full{width:100%!important}.max-w-3xl{max-width:var(--container-3xl)!important}.max-w-4xl{max-width:var(--container-4xl)!important}.max-w-40{max-width:calc(var(--spacing) * 40)!important}.max-w-md{max-width:var(--container-md)!important}.max-w-sm{max-width:var(--container-sm)!important}.max-w-xs{max-width:var(--container-xs)!important}.min-w-0{min-width:0!important}.min-w-8{min-width:calc(var(--spacing) * 8)!important}.flex-1{flex:1!important}.shrink-0{flex-shrink:0!important}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)!important}.cursor-crosshair{cursor:crosshair!important}.cursor-default{cursor:default!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!important}.list-decimal{list-style-type:decimal!important}.list-disc{list-style-type:disc!important}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.grid-cols-\[1fr_1\.4fr_auto\]{grid-template-columns:1fr 1.4fr auto!important}.grid-cols-\[1fr_1fr_90px_90px_auto\]{grid-template-columns:1fr 1fr 90px 90px auto!important}.grid-cols-\[1fr_150px_70px_auto\]{grid-template-columns:1fr 150px 70px auto!important}.grid-cols-\[120px_1fr\]{grid-template-columns:120px 1fr!important}.grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.place-items-center{place-items:center!important}.items-baseline{align-items:baseline!important}.items-center{align-items:center!important}.items-end{align-items:flex-end!important}.items-start{align-items:flex-start!important}.justify-between{justify-content:space-between!important}.justify-center{justify-content:center!important}.justify-end{justify-content:flex-end!important}.gap-0\.5{gap:calc(var(--spacing) * .5)!important}.gap-1{gap:var(--spacing)!important}.gap-1\.5{gap:calc(var(--spacing) * 1.5)!important}.gap-2{gap:calc(var(--spacing) * 2)!important}.gap-2\.5{gap:calc(var(--spacing) * 2.5)!important}.gap-3{gap:calc(var(--spacing) * 3)!important}.gap-4{gap:calc(var(--spacing) * 4)!important}.gap-6{gap:calc(var(--spacing) * 6)!important}.gap-x-3{column-gap:calc(var(--spacing) * 3)!important}.gap-x-5{column-gap:calc(var(--spacing) * 5)!important}.gap-y-1{row-gap:var(--spacing)!important}.self-center{align-self:center!important}.self-end{align-self:flex-end!important}.truncate{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.overflow-x-auto{overflow-x:auto!important}.overflow-y-auto{overflow-y:auto!important}.rounded{border-radius:.25rem!important}.rounded-full{border-radius:3.40282e38px!important}.rounded-lg{border-radius:var(--radius-lg)!important}.rounded-md{border-radius:var(--radius-md)!important}.rounded-xl{border-radius:var(--radius-xl)!important}.rounded-t-lg{border-top-left-radius:var(--radius-lg)!important;border-top-right-radius:var(--radius-lg)!important}.rounded-b-lg{border-bottom-right-radius:var(--radius-lg)!important;border-bottom-left-radius:var(--radius-lg)!important}.border{border-style:var(--tw-border-style)!important;border-width:1px!important}.border-2{border-style:var(--tw-border-style)!important;border-width:2px!important}.border-t{border-top-style:var(--tw-border-style)!important;border-top-width:1px!important}.border-t-0{border-top-style:var(--tw-border-style)!important;border-top-width:0!important}.border-b{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:1px!important}.border-amber-300{border-color:var(--color-amber-300)!important}.border-brand-500{border-color:var(--color-brand-500)!important}.border-red-200{border-color:var(--color-red-200)!important}.border-slate-100{border-color:var(--color-slate-100)!important}.border-slate-200{border-color:var(--color-slate-200)!important}.border-slate-300{border-color:var(--color-slate-300)!important}.border-white{border-color:var(--color-white)!important}.bg-amber-50{background-color:var(--color-amber-50)!important}.bg-amber-50\/40{background-color:#fffbeb66!important}@supports (color:color-mix(in lab, red, red)){.bg-amber-50\/40{background-color:color-mix(in oklab, var(--color-amber-50) 40%, transparent)!important}}.bg-brand-50{background-color:var(--color-brand-50)!important}.bg-brand-500{background-color:var(--color-brand-500)!important}.bg-red-50{background-color:var(--color-red-50)!important}.bg-slate-50{background-color:var(--color-slate-50)!important}.bg-slate-100{background-color:var(--color-slate-100)!important}.bg-slate-200{background-color:var(--color-slate-200)!important}.bg-slate-700{background-color:var(--color-slate-700)!important}.bg-transparent{background-color:#0000!important}.bg-white{background-color:var(--color-white)!important}.object-contain{object-fit:contain!important}.object-cover{object-fit:cover!important}.p-0\.5{padding:calc(var(--spacing) * .5)!important}.p-1{padding:var(--spacing)!important}.p-2{padding:calc(var(--spacing) * 2)!important}.p-3{padding:calc(var(--spacing) * 3)!important}.p-4{padding:calc(var(--spacing) * 4)!important}.p-5{padding:calc(var(--spacing) * 5)!important}.p-6{padding:calc(var(--spacing) * 6)!important}.px-1{padding-inline:var(--spacing)!important}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)!important}.px-2{padding-inline:calc(var(--spacing) * 2)!important}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)!important}.px-3{padding-inline:calc(var(--spacing) * 3)!important}.px-4{padding-inline:calc(var(--spacing) * 4)!important}.py-0\.5{padding-block:calc(var(--spacing) * .5)!important}.py-1{padding-block:var(--spacing)!important}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)!important}.py-2{padding-block:calc(var(--spacing) * 2)!important}.py-3{padding-block:calc(var(--spacing) * 3)!important}.py-8{padding-block:calc(var(--spacing) * 8)!important}.py-16{padding-block:calc(var(--spacing) * 16)!important}.pt-0{padding-top:0!important}.pt-1{padding-top:var(--spacing)!important}.pt-3{padding-top:calc(var(--spacing) * 3)!important}.pt-4{padding-top:calc(var(--spacing) * 4)!important}.pt-5{padding-top:calc(var(--spacing) * 5)!important}.pr-2{padding-right:calc(var(--spacing) * 2)!important}.pb-1{padding-bottom:var(--spacing)!important}.pb-2{padding-bottom:calc(var(--spacing) * 2)!important}.pl-1{padding-left:var(--spacing)!important}.pl-5{padding-left:calc(var(--spacing) * 5)!important}.text-center{text-align:center!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.align-top{vertical-align:top!important}.font-mono{font-family:var(--font-mono)!important}.text-3xl{font-size:var(--text-3xl)!important;line-height:var(--tw-leading,var(--text-3xl--line-height))!important}.text-base{font-size:var(--text-base)!important;line-height:var(--tw-leading,var(--text-base--line-height))!important}.text-lg{font-size:var(--text-lg)!important;line-height:var(--tw-leading,var(--text-lg--line-height))!important}.text-sm{font-size:var(--text-sm)!important;line-height:var(--tw-leading,var(--text-sm--line-height))!important}.text-xl{font-size:var(--text-xl)!important;line-height:var(--tw-leading,var(--text-xl--line-height))!important}.text-xs{font-size:var(--text-xs)!important;line-height:var(--tw-leading,var(--text-xs--line-height))!important}.text-\[10px\]{font-size:10px!important}.text-\[11px\]{font-size:11px!important}.font-bold{--tw-font-weight:var(--font-weight-bold)!important;font-weight:var(--font-weight-bold)!important}.font-medium{--tw-font-weight:var(--font-weight-medium)!important;font-weight:var(--font-weight-medium)!important}.font-normal{--tw-font-weight:var(--font-weight-normal)!important;font-weight:var(--font-weight-normal)!important}.font-semibold{--tw-font-weight:var(--font-weight-semibold)!important;font-weight:var(--font-weight-semibold)!important}.tracking-wide{--tw-tracking:var(--tracking-wide)!important;letter-spacing:var(--tracking-wide)!important}.whitespace-nowrap{white-space:nowrap!important}.whitespace-pre-wrap{white-space:pre-wrap!important}.text-amber-600{color:var(--color-amber-600)!important}.text-amber-700{color:var(--color-amber-700)!important}.text-amber-800{color:var(--color-amber-800)!important}.text-amber-900{color:var(--color-amber-900)!important}.text-brand-700{color:var(--color-brand-700)!important}.text-brand-700\/70{color:#3730a3b3!important}@supports (color:color-mix(in lab, red, red)){.text-brand-700\/70{color:color-mix(in oklab, var(--color-brand-700) 70%, transparent)!important}}.text-emerald-700{color:var(--color-emerald-700)!important}.text-red-600{color:var(--color-red-600)!important}.text-red-700{color:var(--color-red-700)!important}.text-slate-400{color:var(--color-slate-400)!important}.text-slate-500{color:var(--color-slate-500)!important}.text-slate-600{color:var(--color-slate-600)!important}.text-slate-700{color:var(--color-slate-700)!important}.text-slate-800{color:var(--color-slate-800)!important}.text-slate-900{color:var(--color-slate-900)!important}.text-white{color:var(--color-white)!important}.uppercase{text-transform:uppercase!important}.italic{font-style:italic!important}.tabular-nums{--tw-numeric-spacing:tabular-nums!important;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)!important}.line-through{text-decoration-line:line-through!important}.underline{text-decoration-line:underline!important}.opacity-70{opacity:.7!important}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.ring-brand-500{--tw-ring-color:var(--color-brand-500)!important}.outline{outline-style:var(--tw-outline-style)!important;outline-width:1px!important}.outline-2{outline-style:var(--tw-outline-style)!important;outline-width:2px!important}.outline-offset-4{outline-offset:4px!important}.outline-brand-500{outline-color:var(--color-brand-500)!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.grayscale{--tw-grayscale:grayscale(100%)!important;filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events!important;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))!important;transition-duration:var(--tw-duration,var(--default-transition-duration))!important}.transition-\[filter\]{transition-property:filter!important;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))!important;transition-duration:var(--tw-duration,var(--default-transition-duration))!important}.ease-out{--tw-ease:var(--ease-out)!important;transition-timing-function:var(--ease-out)!important}.outline-dashed{--tw-outline-style:dashed!important;outline-style:dashed!important}.outline-none{--tw-outline-style:none!important;outline-style:none!important}@media (hover:hover){.group-hover\:opacity-80:is(:where(.group):hover *){opacity:.8!important}}.last\:border-0:last-child{border-style:var(--tw-border-style)!important;border-width:0!important}@media (hover:hover){.hover\:border-brand-500:hover{border-color:var(--color-brand-500)!important}.hover\:bg-slate-50:hover{background-color:var(--color-slate-50)!important}.hover\:bg-slate-100:hover{background-color:var(--color-slate-100)!important}.hover\:bg-slate-200:hover{background-color:var(--color-slate-200)!important}.hover\:text-slate-600:hover{color:var(--color-slate-600)!important}.hover\:text-slate-700:hover{color:var(--color-slate-700)!important}.hover\:text-slate-900:hover{color:var(--color-slate-900)!important}.hover\:underline:hover{text-decoration-line:underline!important}.hover\:brightness-95:hover{--tw-brightness:brightness(95%)!important;filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.focus\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)!important}.focus\:outline-none:focus{--tw-outline-style:none!important;outline-style:none!important}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.focus-visible\:ring-brand-500:focus-visible{--tw-ring-color:var(--color-brand-500)!important}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style)!important;outline-width:2px!important}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px!important}.focus-visible\:outline-blue-600:focus-visible{outline-color:var(--color-blue-600)!important}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none!important;outline-style:none!important}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed!important}.disabled\:opacity-50:disabled{opacity:.5!important}.aria-\[current\=page\]\:bg-slate-200[aria-current=page]{background-color:var(--color-slate-200)!important}.aria-\[current\=page\]\:text-slate-900[aria-current=page]{color:var(--color-slate-900)!important}.data-\[state\=active\]\:border-b-2[data-state=active]{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:2px!important}.data-\[state\=active\]\:border-brand-600[data-state=active]{border-color:var(--color-brand-600)!important}.data-\[state\=active\]\:bg-slate-100[data-state=active]{background-color:var(--color-slate-100)!important}.data-\[state\=active\]\:text-brand-700[data-state=active]{color:var(--color-brand-700)!important}.data-\[state\=active\]\:text-slate-900[data-state=active]{color:var(--color-slate-900)!important}.data-\[state\=active\]\:shadow-\[inset_2px_0_0_0_var\(--color-brand-500\)\][data-state=active]{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,var(--color-brand-500))!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}@media (min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}}@media (min-width:48rem){.md\:sticky{position:sticky!important}.md\:top-0{top:0!important}.md\:col-span-5{grid-column:span 5/span 5!important}.md\:block{display:block!important}.md\:flex{display:flex!important}.md\:grid{display:grid!important}.md\:h-screen{height:100vh!important}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}.md\:grid-cols-\[1fr_1fr_140px_auto_auto\]{grid-template-columns:1fr 1fr 140px auto auto!important}.md\:grid-cols-\[1fr_110px\]{grid-template-columns:1fr 110px!important}.md\:grid-cols-\[1fr_130px_90px_110px_auto\]{grid-template-columns:1fr 130px 90px 110px auto!important}.md\:grid-cols-\[1fr_140px_1fr_150px\]{grid-template-columns:1fr 140px 1fr 150px!important}.md\:grid-cols-\[1fr_auto_1fr\]{grid-template-columns:1fr auto 1fr!important}.md\:grid-cols-\[248px_1fr\]{grid-template-columns:248px 1fr!important}.md\:grid-cols-\[260px_1fr\]{grid-template-columns:260px 1fr!important}.md\:grid-cols-\[280px_1fr\]{grid-template-columns:280px 1fr!important}.md\:grid-cols-\[300px_1fr\]{grid-template-columns:300px 1fr!important}.md\:grid-cols-\[340px_1fr\]{grid-template-columns:340px 1fr!important}.md\:flex-col{flex-direction:column!important}.md\:items-end{align-items:flex-end!important}.md\:overflow-visible{overflow:visible!important}.md\:border-r{border-right-style:var(--tw-border-style)!important;border-right-width:1px!important}.md\:border-b-0{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0!important}.md\:p-8{padding:calc(var(--spacing) * 8)!important}.md\:px-8{padding-inline:calc(var(--spacing) * 8)!important}}@media (min-width:64rem){.lg\:col-span-2{grid-column:span 2/span 2!important}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}}}}.xicms-admin,.xicms-admin *,.xicms-admin :before,.xicms-admin :after{box-sizing:border-box}.xicms-admin{-webkit-font-smoothing:antialiased;--color-white:#fff;--color-slate-50:#faf9f6;--color-slate-100:#f3f1ec;--color-slate-200:#e5e2da;--color-slate-300:#d5d1c7;--color-slate-400:#a8a399;--color-slate-500:#6e6a62;--color-slate-600:#57534b;--color-slate-700:#403c36;--color-slate-900:#1b1a17;--color-brand:var(--xicms-primary,#4f46e5);--color-brand-500:var(--xicms-primary,#4f46e5);--color-brand-600:var(--xicms-primary,#4f46e5);--color-brand-700:var(--xicms-primary,#4f46e5);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}@supports (color:color-mix(in lab, red, red)){.xicms-admin{--color-brand-700:color-mix(in srgb, var(--xicms-primary,#4f46e5) 78%, #1b1a17)}}.xicms-admin{--color-brand-50:var(--xicms-primary,#4f46e5)}@supports (color:color-mix(in lab, red, red)){.xicms-admin{--color-brand-50:color-mix(in srgb, var(--xicms-primary,#4f46e5) 10%, #fff)}}.xicms-admin{--admin-canvas:#f6f5f2;--admin-sidebar:#f0eee9;--color-background-body:var(--color-white);--color-background-surface:var(--color-white);--color-background-card:var(--color-white);--color-background-muted:var(--color-slate-100);--color-text-primary:var(--color-slate-900);--color-text-secondary:var(--color-slate-500);--color-border:var(--color-slate-200);--color-accent:var(--color-brand-500);--color-on-accent:#fff;--color-error:#dc2626;color-scheme:light;color:var(--color-text-primary);background:var(--admin-canvas)}.xicms-admin h1,.xicms-admin h2,.xicms-admin h3,.xicms-admin p,.xicms-admin figure{margin:0}.xicms-admin button{font:inherit;cursor:pointer}.xicms-admin input,.xicms-admin textarea,.xicms-admin select{font:inherit;color:inherit}.xicms-admin .ProseMirror{outline:none;min-height:8rem}.xicms-admin .ProseMirror p{margin:0 0 .6rem}.xicms-admin .ProseMirror:focus{outline:none}@media (prefers-reduced-motion:reduce){.xicms-admin *,.xicms-admin :before,.xicms-admin :after,.xicms-ve *,.xicms-ve :before,.xicms-ve :after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.xicms-admin__midden,.xicms-admin__raster{min-height:100vh}.xicms-admin--ingebed .xicms-admin__midden{min-height:50vh}.xicms-admin--ingebed .xicms-admin__raster{min-height:60vh;display:block}.xicms-admin--ingebed .xicms-admin__rail{border-bottom-width:1px;border-right:0;flex-flow:wrap;align-items:center;gap:1rem;height:auto;padding:.5rem 1rem;position:static}.xicms-admin--ingebed .xicms-admin__lijst{-webkit-overflow-scrolling:touch;flex-direction:row;flex:100%;min-width:0;overflow-x:auto}.xicms-admin--ingebed .xicms-admin__voet{border-top:0;flex-direction:row;align-items:center;gap:.75rem;margin-top:0;margin-left:auto;padding-top:0;display:flex}.xicms-admin--ingebed .xicms-admin__kop{position:static}.xicms-admin--ingebed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

package/dist/components/EditBar.d.ts

@@ -21,6 +21,14 @@ import { type Bewerkmodus } from "../editor/EditorProvider.js";
  * knop die oplicht.
  */
 export declare function EditBar(): import("react").JSX.Element | null;
+/**
+ * Klein merkicoontje + naam (7.26) — gedeeld door de balk hierboven en die van de visuele editor
+ * (VisualEditor.tsx), zodat "hetzelfde gereedschap, ongeacht waar" ook geldt voor het merkje zelf.
+ * Puur decoratief: het icoon is `aria-hidden`, de naam draagt de eigenlijke betekenis.
+ */
+export declare function EditbarBrand({ label }: {
+    label: string;
+}): import("react").JSX.Element;
 /**
  * De vier opties zelf, los zodat de editor ze kan hergebruiken.
  *

package/dist/components/EditBar.js

@@ -17,10 +17,19 @@ function useSiteConfigSiteId() {
 function EditBarVoorEditor({ siteId }) {
   const nietLive = useNietLive(siteId);
   return /* @__PURE__ */ jsxs("div", { className: "xicms-editbar", role: "toolbar", "aria-label": "Beheer", "data-xicms-tooling": "", children: [
-    /* @__PURE__ */ jsx("span", { className: "xicms-editbar__brand", children: "XiCMS" }),
+    /* @__PURE__ */ jsx(EditbarBrand, { label: "XiCMS" }),
     /* @__PURE__ */ jsx(AdminModes, { actief: "live", nietLive })
   ] });
 }
+function EditbarBrand({ label }) {
+  return /* @__PURE__ */ jsxs("span", { className: "xicms-editbar__brand", children: [
+    /* @__PURE__ */ jsxs("svg", { className: "xicms-editbar__mark", viewBox: "0 0 16 16", width: "13", height: "13", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("rect", { width: "16", height: "16", rx: "4.5", fill: "currentColor", opacity: "0.22" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 3c.28 1.95 1.17 2.84 3.1 3.1-1.93.26-2.82 1.15-3.1 3.1-.28-1.95-1.17-2.84-3.1-3.1 1.93-.26 2.82-1.15 3.1-3.1z", fill: "currentColor" })
+    ] }),
+    label
+  ] });
+}
 function useNietLive(siteId) {
   const [nietLive, setNietLive] = useState(false);
   useEffect(() => {
@@ -68,6 +77,7 @@ function AdminModes({
 }
 export {
   AdminModes,
-  EditBar
+  EditBar,
+  EditbarBrand
 };
 //# sourceMappingURL=EditBar.js.map

package/dist/components/EditBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/EditBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { useAuth } from \"../auth/AuthProvider\";\nimport { useSiteConfig } from \"../config\";\nimport { canEdit } from \"../auth/roles\";\nimport { useEditor, type Bewerkmodus } from \"../editor/EditorProvider\";\n\n/**\n * Zwevende werkbalk voor ingelogde beheerders/editors.\n *\n * Bewust met EIGEN klassen en eigen kleuren, niet met `.xicms-btn`. Die knop leest de\n * `--xicms-*`-tokens van de klantsite, en dit balkje zweeft over die site heen: het nam daardoor\n * half de huisstijl over (en op plekken waar de tokens niet in scope zijn, viel het terug op een\n * indigo die bij niets hoorde). Gereedschap hoort er als gereedschap uit te zien — hetzelfde op\n * elke site, herkenbaar los van de pagina eronder.\n *\n * ── VIER OPTIES, ALTIJD DEZELFDE (7.8) ────────────────────────────────────────────────────\n *\n * De balk had één hoofdactie (\"Pagina bewerken\") en verdween zodra je die indrukte: de editor\n * bracht zijn eigen balk mee, met andere knoppen op andere plekken. Je verloor dus je houvast op\n * het moment dat je het het hardst nodig had, en er was geen weg terug naar de live site zonder\n * de editor te sluiten.\n *\n * Nu staan er vier vaste opties — Live site · Bewerken · Beheren · Uitloggen — en die staan er in\n * béide toestanden, op dezelfde plek. `AdminModes` hieronder is letterlijk hetzelfde component in\n * de balk van de editor, zodat het overschakelen geen wisseling van balk is maar alleen een andere\n * knop die oplicht.\n */\nexport function EditBar() {\n  // Bewust via useAuth (niet via het deprecated ContentProvider-pad): de EditBar hoort bij het\n  // block-model en mag niet aan het legacy inline-systeem hangen.\n  const { user, role } = useAuth();\n  const { open } = useEditor();\n  // Geen useBalkOffset meer: het pilletje zweeft óver de site (7.16), er wordt niets meer\n  // omlaag geduwd — dus valt er ook niets meer onder een balk vandaan te schuiven.\n\n  // In de bewerkmodus tekent de editor de balk (met dezelfde vier opties plus zijn gereedschap);\n  // twee balken onder elkaar zou de site twee keer zo ver omlaag duwen.\n  if (!canEdit(role) || !user || open) return null;\n\n  return <EditBarVoorEditor siteId={useSiteConfigSiteId()} />;\n}\n\nfunction useSiteConfigSiteId(): string {\n  return useSiteConfig().siteId;\n}\n\n/**\n * Apart component zodat de draft-lezing hieronder ALLEEN draait voor een ingelogde editor — het\n * bovenliggende EditBar rendert voor elke bezoeker en mag geen Firestore aanraken.\n */\nfunction EditBarVoorEditor({ siteId }: { siteId: string }) {\n  const nietLive = useNietLive(siteId);\n  return (\n    <div className=\"xicms-editbar\" role=\"toolbar\" aria-label=\"Beheer\" data-xicms-tooling=\"\">\n      <span className=\"xicms-editbar__brand\">XiCMS</span>\n      <AdminModes actief=\"live\" nietLive={nietLive} />\n    </div>\n  );\n}\n\n/**\n * Staat er op DEZE pagina een werkversie die afwijkt van wat live staat? (7.24)\n *\n * Eén lezing van de draft bij het laden (geen listener): dit is een signaal bij binnenkomst, geen\n * monitor. De vergelijking is dezelfde als in /beheer → Pagina's (`heeftOngepubliceerdeWijzigingen`).\n * Faalt stil — een hik mag de balk niet raken, en zonder signaal is er hoogstens geen stipje.\n */\nfunction useNietLive(siteId: string): boolean {\n  const [nietLive, setNietLive] = useState(false);\n  useEffect(() => {\n    let actief = true;\n    const raw = window.location.pathname || \"/\";\n    const path = raw === \"/\" ? \"/\" : raw.replace(/\\/$/, \"\");\n    void import(\"../admin/lib/pagesClient\")\n      .then(async ({ getDraftByPath, heeftOngepubliceerdeWijzigingen }) => {\n        const d = await getDraftByPath(siteId, path);\n        if (actief && d) setNietLive(heeftOngepubliceerdeWijzigingen(d));\n      })\n      .catch(() => undefined);\n    return () => {\n      actief = false;\n    };\n  }, [siteId]);\n  return nietLive;\n}\n\n/**\n * De vier opties zelf, los zodat de editor ze kan hergebruiken.\n *\n * `actief` zegt welke toestand je nú bekijkt, niet wat de knop doet: \"Live site\" is ingedrukt\n * zolang je de pagina ziet zoals een bezoeker hem ziet. Zonder die markering is er geen verschil\n * te zien tussen \"ik kijk naar de live site\" en \"ik bewerk maar heb nog niets veranderd\", en dat\n * verschil is precies waar deze balk over gaat.\n */\nexport function AdminModes({\n  actief,\n  voorSwitch,\n  nietLive = false,\n}: {\n  actief: Bewerkmodus;\n  /** 7.24: toon een stipje op \"Bewerken\" — er ligt een werkversie die niemand ziet. */\n  nietLive?: boolean;\n  /**\n   * Kans voor de editor om iets te zeggen vóór je weggaat — bijvoorbeeld dat er nog wijzigingen\n   * klaarstaan die niet live staan. Bewust niet blokkerend: sluiten bewaart je werk, dus een\n   * bevestigingsvraag zou alleen maar in de weg zitten. Melden is genoeg, tegenhouden is te veel.\n   */\n  voorSwitch?: (modus: Bewerkmodus) => void;\n}) {\n  const { demo, signOut } = useAuth();\n  const { zetModus } = useEditor();\n\n  const knop = (modus: Bewerkmodus, label: string, titel: string) => (\n    <button\n      type=\"button\"\n      className={`xicms-editbar__btn${actief === modus ? \" is-actief\" : \"\"}${modus === \"bewerken\" && nietLive ? \" heeft-wijzigingen\" : \"\"}`}\n      aria-pressed={actief === modus}\n      title={titel}\n      onClick={() => {\n        if (modus !== actief) voorSwitch?.(modus);\n        zetModus(modus);\n      }}\n    >\n      {label}\n    </button>\n  );\n\n  return (\n    <>\n      {knop(\"live\", \"Live site\", \"De pagina precies zoals een bezoeker hem ziet\")}\n      {knop(\"bewerken\", \"Bewerken\", nietLive ? \"Er staan wijzigingen klaar die nog niet live zijn\" : \"Dezelfde pagina, met de werkversie en potlood/tandwiel per blok\")}\n      <span className=\"xicms-editbar__sep\" aria-hidden=\"true\" />\n      {/* In de demo bestaat er geen /beheer-route; daar bewerk je alleen op de pagina. */}\n      {!demo && (\n        <a href=\"/beheer\" className=\"xicms-editbar__btn\" title=\"Pagina's, media, instellingen, webwinkel\">\n          Beheren\n        </a>\n      )}\n      <button type=\"button\" className=\"xicms-editbar__btn\" onClick={() => void signOut()}>\n        Uitloggen\n      </button>\n    </>\n  );\n}\n"],"mappings":";AAyCS,SAyFL,UAzFK,KAcL,YAdK;AAvCT,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAC9B,SAAS,eAAe;AACxB,SAAS,iBAAmC;AAuBrC,SAAS,UAAU;AAGxB,QAAM,EAAE,MAAM,KAAK,IAAI,QAAQ;AAC/B,QAAM,EAAE,KAAK,IAAI,UAAU;AAM3B,MAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,KAAM,QAAO;AAE5C,SAAO,oBAAC,qBAAkB,QAAQ,oBAAoB,GAAG;AAC3D;AAEA,SAAS,sBAA8B;AACrC,SAAO,cAAc,EAAE;AACzB;AAMA,SAAS,kBAAkB,EAAE,OAAO,GAAuB;AACzD,QAAM,WAAW,YAAY,MAAM;AACnC,SACE,qBAAC,SAAI,WAAU,iBAAgB,MAAK,WAAU,cAAW,UAAS,sBAAmB,IACnF;AAAA,wBAAC,UAAK,WAAU,wBAAuB,mBAAK;AAAA,IAC5C,oBAAC,cAAW,QAAO,QAAO,UAAoB;AAAA,KAChD;AAEJ;AASA,SAAS,YAAY,QAAyB;AAC5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,YAAU,MAAM;AACd,QAAI,SAAS;AACb,UAAM,MAAM,OAAO,SAAS,YAAY;AACxC,UAAM,OAAO,QAAQ,MAAM,MAAM,IAAI,QAAQ,OAAO,EAAE;AACtD,SAAK,OAAO,0BAA0B,EACnC,KAAK,OAAO,EAAE,gBAAgB,gCAAgC,MAAM;AACnE,YAAM,IAAI,MAAM,eAAe,QAAQ,IAAI;AAC3C,UAAI,UAAU,EAAG,aAAY,gCAAgC,CAAC,CAAC;AAAA,IACjE,CAAC,EACA,MAAM,MAAM,MAAS;AACxB,WAAO,MAAM;AACX,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AACX,SAAO;AACT;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAUG;AACD,QAAM,EAAE,MAAM,QAAQ,IAAI,QAAQ;AAClC,QAAM,EAAE,SAAS,IAAI,UAAU;AAE/B,QAAM,OAAO,CAAC,OAAoB,OAAe,UAC/C;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,qBAAqB,WAAW,QAAQ,eAAe,EAAE,GAAG,UAAU,cAAc,WAAW,uBAAuB,EAAE;AAAA,MACnI,gBAAc,WAAW;AAAA,MACzB,OAAO;AAAA,MACP,SAAS,MAAM;AACb,YAAI,UAAU,OAAQ,cAAa,KAAK;AACxC,iBAAS,KAAK;AAAA,MAChB;AAAA,MAEC;AAAA;AAAA,EACH;AAGF,SACE,iCACG;AAAA,SAAK,QAAQ,aAAa,+CAA+C;AAAA,IACzE,KAAK,YAAY,YAAY,WAAW,sDAAsD,iEAAiE;AAAA,IAChK,oBAAC,UAAK,WAAU,sBAAqB,eAAY,QAAO;AAAA,IAEvD,CAAC,QACA,oBAAC,OAAE,MAAK,WAAU,WAAU,sBAAqB,OAAM,4CAA2C,qBAElG;AAAA,IAEF,oBAAC,YAAO,MAAK,UAAS,WAAU,sBAAqB,SAAS,MAAM,KAAK,QAAQ,GAAG,uBAEpF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/EditBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { useAuth } from \"../auth/AuthProvider\";\nimport { useSiteConfig } from \"../config\";\nimport { canEdit } from \"../auth/roles\";\nimport { useEditor, type Bewerkmodus } from \"../editor/EditorProvider\";\n\n/**\n * Zwevende werkbalk voor ingelogde beheerders/editors.\n *\n * Bewust met EIGEN klassen en eigen kleuren, niet met `.xicms-btn`. Die knop leest de\n * `--xicms-*`-tokens van de klantsite, en dit balkje zweeft over die site heen: het nam daardoor\n * half de huisstijl over (en op plekken waar de tokens niet in scope zijn, viel het terug op een\n * indigo die bij niets hoorde). Gereedschap hoort er als gereedschap uit te zien — hetzelfde op\n * elke site, herkenbaar los van de pagina eronder.\n *\n * ── VIER OPTIES, ALTIJD DEZELFDE (7.8) ────────────────────────────────────────────────────\n *\n * De balk had één hoofdactie (\"Pagina bewerken\") en verdween zodra je die indrukte: de editor\n * bracht zijn eigen balk mee, met andere knoppen op andere plekken. Je verloor dus je houvast op\n * het moment dat je het het hardst nodig had, en er was geen weg terug naar de live site zonder\n * de editor te sluiten.\n *\n * Nu staan er vier vaste opties — Live site · Bewerken · Beheren · Uitloggen — en die staan er in\n * béide toestanden, op dezelfde plek. `AdminModes` hieronder is letterlijk hetzelfde component in\n * de balk van de editor, zodat het overschakelen geen wisseling van balk is maar alleen een andere\n * knop die oplicht.\n */\nexport function EditBar() {\n  // Bewust via useAuth (niet via het deprecated ContentProvider-pad): de EditBar hoort bij het\n  // block-model en mag niet aan het legacy inline-systeem hangen.\n  const { user, role } = useAuth();\n  const { open } = useEditor();\n  // Geen useBalkOffset meer: het pilletje zweeft óver de site (7.16), er wordt niets meer\n  // omlaag geduwd — dus valt er ook niets meer onder een balk vandaan te schuiven.\n\n  // In de bewerkmodus tekent de editor de balk (met dezelfde vier opties plus zijn gereedschap);\n  // twee balken onder elkaar zou de site twee keer zo ver omlaag duwen.\n  if (!canEdit(role) || !user || open) return null;\n\n  return <EditBarVoorEditor siteId={useSiteConfigSiteId()} />;\n}\n\nfunction useSiteConfigSiteId(): string {\n  return useSiteConfig().siteId;\n}\n\n/**\n * Apart component zodat de draft-lezing hieronder ALLEEN draait voor een ingelogde editor — het\n * bovenliggende EditBar rendert voor elke bezoeker en mag geen Firestore aanraken.\n */\nfunction EditBarVoorEditor({ siteId }: { siteId: string }) {\n  const nietLive = useNietLive(siteId);\n  return (\n    <div className=\"xicms-editbar\" role=\"toolbar\" aria-label=\"Beheer\" data-xicms-tooling=\"\">\n      <EditbarBrand label=\"XiCMS\" />\n      <AdminModes actief=\"live\" nietLive={nietLive} />\n    </div>\n  );\n}\n\n/**\n * Klein merkicoontje + naam (7.26) — gedeeld door de balk hierboven en die van de visuele editor\n * (VisualEditor.tsx), zodat \"hetzelfde gereedschap, ongeacht waar\" ook geldt voor het merkje zelf.\n * Puur decoratief: het icoon is `aria-hidden`, de naam draagt de eigenlijke betekenis.\n */\nexport function EditbarBrand({ label }: { label: string }) {\n  return (\n    <span className=\"xicms-editbar__brand\">\n      {/* Bewust een sterretje, geen kruis: twee kruisende lijnen op deze schaal las als een\n          sluitknopje naast de merknaam — precies de handeling die je hier niet wilt suggereren. */}\n      <svg className=\"xicms-editbar__mark\" viewBox=\"0 0 16 16\" width=\"13\" height=\"13\" aria-hidden=\"true\">\n        <rect width=\"16\" height=\"16\" rx=\"4.5\" fill=\"currentColor\" opacity=\"0.22\" />\n        <path d=\"M8 3c.28 1.95 1.17 2.84 3.1 3.1-1.93.26-2.82 1.15-3.1 3.1-.28-1.95-1.17-2.84-3.1-3.1 1.93-.26 2.82-1.15 3.1-3.1z\" fill=\"currentColor\" />\n      </svg>\n      {label}\n    </span>\n  );\n}\n\n/**\n * Staat er op DEZE pagina een werkversie die afwijkt van wat live staat? (7.24)\n *\n * Eén lezing van de draft bij het laden (geen listener): dit is een signaal bij binnenkomst, geen\n * monitor. De vergelijking is dezelfde als in /beheer → Pagina's (`heeftOngepubliceerdeWijzigingen`).\n * Faalt stil — een hik mag de balk niet raken, en zonder signaal is er hoogstens geen stipje.\n */\nfunction useNietLive(siteId: string): boolean {\n  const [nietLive, setNietLive] = useState(false);\n  useEffect(() => {\n    let actief = true;\n    const raw = window.location.pathname || \"/\";\n    const path = raw === \"/\" ? \"/\" : raw.replace(/\\/$/, \"\");\n    void import(\"../admin/lib/pagesClient\")\n      .then(async ({ getDraftByPath, heeftOngepubliceerdeWijzigingen }) => {\n        const d = await getDraftByPath(siteId, path);\n        if (actief && d) setNietLive(heeftOngepubliceerdeWijzigingen(d));\n      })\n      .catch(() => undefined);\n    return () => {\n      actief = false;\n    };\n  }, [siteId]);\n  return nietLive;\n}\n\n/**\n * De vier opties zelf, los zodat de editor ze kan hergebruiken.\n *\n * `actief` zegt welke toestand je nú bekijkt, niet wat de knop doet: \"Live site\" is ingedrukt\n * zolang je de pagina ziet zoals een bezoeker hem ziet. Zonder die markering is er geen verschil\n * te zien tussen \"ik kijk naar de live site\" en \"ik bewerk maar heb nog niets veranderd\", en dat\n * verschil is precies waar deze balk over gaat.\n */\nexport function AdminModes({\n  actief,\n  voorSwitch,\n  nietLive = false,\n}: {\n  actief: Bewerkmodus;\n  /** 7.24: toon een stipje op \"Bewerken\" — er ligt een werkversie die niemand ziet. */\n  nietLive?: boolean;\n  /**\n   * Kans voor de editor om iets te zeggen vóór je weggaat — bijvoorbeeld dat er nog wijzigingen\n   * klaarstaan die niet live staan. Bewust niet blokkerend: sluiten bewaart je werk, dus een\n   * bevestigingsvraag zou alleen maar in de weg zitten. Melden is genoeg, tegenhouden is te veel.\n   */\n  voorSwitch?: (modus: Bewerkmodus) => void;\n}) {\n  const { demo, signOut } = useAuth();\n  const { zetModus } = useEditor();\n\n  const knop = (modus: Bewerkmodus, label: string, titel: string) => (\n    <button\n      type=\"button\"\n      className={`xicms-editbar__btn${actief === modus ? \" is-actief\" : \"\"}${modus === \"bewerken\" && nietLive ? \" heeft-wijzigingen\" : \"\"}`}\n      aria-pressed={actief === modus}\n      title={titel}\n      onClick={() => {\n        if (modus !== actief) voorSwitch?.(modus);\n        zetModus(modus);\n      }}\n    >\n      {label}\n    </button>\n  );\n\n  return (\n    <>\n      {knop(\"live\", \"Live site\", \"De pagina precies zoals een bezoeker hem ziet\")}\n      {knop(\"bewerken\", \"Bewerken\", nietLive ? \"Er staan wijzigingen klaar die nog niet live zijn\" : \"Dezelfde pagina, met de werkversie en potlood/tandwiel per blok\")}\n      <span className=\"xicms-editbar__sep\" aria-hidden=\"true\" />\n      {/* In de demo bestaat er geen /beheer-route; daar bewerk je alleen op de pagina. */}\n      {!demo && (\n        <a href=\"/beheer\" className=\"xicms-editbar__btn\" title=\"Pagina's, media, instellingen, webwinkel\">\n          Beheren\n        </a>\n      )}\n      <button type=\"button\" className=\"xicms-editbar__btn\" onClick={() => void signOut()}>\n        Uitloggen\n      </button>\n    </>\n  );\n}\n"],"mappings":";AAyCS,SA4GL,UA5GK,KAcL,YAdK;AAvCT,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAC9B,SAAS,eAAe;AACxB,SAAS,iBAAmC;AAuBrC,SAAS,UAAU;AAGxB,QAAM,EAAE,MAAM,KAAK,IAAI,QAAQ;AAC/B,QAAM,EAAE,KAAK,IAAI,UAAU;AAM3B,MAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,KAAM,QAAO;AAE5C,SAAO,oBAAC,qBAAkB,QAAQ,oBAAoB,GAAG;AAC3D;AAEA,SAAS,sBAA8B;AACrC,SAAO,cAAc,EAAE;AACzB;AAMA,SAAS,kBAAkB,EAAE,OAAO,GAAuB;AACzD,QAAM,WAAW,YAAY,MAAM;AACnC,SACE,qBAAC,SAAI,WAAU,iBAAgB,MAAK,WAAU,cAAW,UAAS,sBAAmB,IACnF;AAAA,wBAAC,gBAAa,OAAM,SAAQ;AAAA,IAC5B,oBAAC,cAAW,QAAO,QAAO,UAAoB;AAAA,KAChD;AAEJ;AAOO,SAAS,aAAa,EAAE,MAAM,GAAsB;AACzD,SACE,qBAAC,UAAK,WAAU,wBAGd;AAAA,yBAAC,SAAI,WAAU,uBAAsB,SAAQ,aAAY,OAAM,MAAK,QAAO,MAAK,eAAY,QAC1F;AAAA,0BAAC,UAAK,OAAM,MAAK,QAAO,MAAK,IAAG,OAAM,MAAK,gBAAe,SAAQ,QAAO;AAAA,MACzE,oBAAC,UAAK,GAAE,oHAAmH,MAAK,gBAAe;AAAA,OACjJ;AAAA,IACC;AAAA,KACH;AAEJ;AASA,SAAS,YAAY,QAAyB;AAC5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,YAAU,MAAM;AACd,QAAI,SAAS;AACb,UAAM,MAAM,OAAO,SAAS,YAAY;AACxC,UAAM,OAAO,QAAQ,MAAM,MAAM,IAAI,QAAQ,OAAO,EAAE;AACtD,SAAK,OAAO,0BAA0B,EACnC,KAAK,OAAO,EAAE,gBAAgB,gCAAgC,MAAM;AACnE,YAAM,IAAI,MAAM,eAAe,QAAQ,IAAI;AAC3C,UAAI,UAAU,EAAG,aAAY,gCAAgC,CAAC,CAAC;AAAA,IACjE,CAAC,EACA,MAAM,MAAM,MAAS;AACxB,WAAO,MAAM;AACX,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AACX,SAAO;AACT;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAUG;AACD,QAAM,EAAE,MAAM,QAAQ,IAAI,QAAQ;AAClC,QAAM,EAAE,SAAS,IAAI,UAAU;AAE/B,QAAM,OAAO,CAAC,OAAoB,OAAe,UAC/C;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,qBAAqB,WAAW,QAAQ,eAAe,EAAE,GAAG,UAAU,cAAc,WAAW,uBAAuB,EAAE;AAAA,MACnI,gBAAc,WAAW;AAAA,MACzB,OAAO;AAAA,MACP,SAAS,MAAM;AACb,YAAI,UAAU,OAAQ,cAAa,KAAK;AACxC,iBAAS,KAAK;AAAA,MAChB;AAAA,MAEC;AAAA;AAAA,EACH;AAGF,SACE,iCACG;AAAA,SAAK,QAAQ,aAAa,+CAA+C;AAAA,IACzE,KAAK,YAAY,YAAY,WAAW,sDAAsD,iEAAiE;AAAA,IAChK,oBAAC,UAAK,WAAU,sBAAqB,eAAY,QAAO;AAAA,IAEvD,CAAC,QACA,oBAAC,OAAE,MAAK,WAAU,WAAU,sBAAqB,OAAM,4CAA2C,qBAElG;AAAA,IAEF,oBAAC,YAAO,MAAK,UAAS,WAAU,sBAAqB,SAAS,MAAM,KAAK,QAAQ,GAAG,uBAEpF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/FeedbackWidget.js

@@ -149,6 +149,7 @@ function FeedbackWidget({ siteId }) {
       "button",
       {
         type: "button",
+        className: "xicms-feedback-fab",
         "data-xicms-feedback-ignore": "",
         onClick: () => setMode("picking"),
         style: fabStyle,
@@ -159,7 +160,7 @@ function FeedbackWidget({ siteId }) {
         ]
       }
     ),
-    mode === "form" && picked && /* @__PURE__ */ jsxs("div", { "data-xicms-feedback-ignore": "", style: cardStyle, children: [
+    mode === "form" && picked && /* @__PURE__ */ jsxs("div", { className: "xicms-feedback-fab", "data-xicms-feedback-ignore": "", style: cardStyle, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
         /* @__PURE__ */ jsx("strong", { style: { fontSize: 13 }, children: "Feedback op dit onderdeel" }),
         /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "#8a8f98", fontFamily: "monospace" }, children: picked.type || "block" })
@@ -185,17 +186,13 @@ function FeedbackWidget({ siteId }) {
         /* @__PURE__ */ jsx("button", { type: "button", onClick: submit, disabled: busy || !message.trim(), style: primaryBtn, children: busy ? "Versturen\u2026" : "Versturen" })
       ] })
     ] }),
-    mode === "sent" && /* @__PURE__ */ jsxs("div", { "data-xicms-feedback-ignore": "", style: { ...cardStyle, textAlign: "center" }, children: [
+    mode === "sent" && /* @__PURE__ */ jsxs("div", { className: "xicms-feedback-fab", "data-xicms-feedback-ignore": "", style: { ...cardStyle, textAlign: "center" }, children: [
       /* @__PURE__ */ jsx("div", { style: { fontSize: 22 }, children: "\u2713" }),
       /* @__PURE__ */ jsx("p", { style: { fontSize: 13, margin: "4px 0 0", color: "#111827" }, children: "Bedankt! Je feedback is opgeslagen." })
     ] })
   ] });
 }
 const fabStyle = {
-  position: "fixed",
-  left: 20,
-  bottom: 20,
-  zIndex: 2147483e3,
   display: "inline-flex",
   alignItems: "center",
   gap: 7,
@@ -211,10 +208,6 @@ const fabStyle = {
   boxShadow: "0 4px 14px rgba(79,70,229,0.4)"
 };
 const cardStyle = {
-  position: "fixed",
-  left: 20,
-  bottom: 20,
-  zIndex: 2147483e3,
   width: 320,
   maxWidth: "calc(100vw - 40px)",
   padding: 16,

package/dist/components/FeedbackWidget.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/FeedbackWidget.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useAuth } from \"../auth/AuthProvider\";\nimport { canEdit } from \"../auth/roles\";\nimport { useEditor } from \"../editor/EditorProvider\";\nimport { addFeedback, uploadFeedbackShot } from \"../firebase/feedback\";\n\n/**\n * Feedback per onderdeel — zichtbaar voor ingelogde editors/siteadmins (vaak de klant zelf) én\n * wanneer de editor open staat (preview). Zelfde zichtbaarheidslogica als de EditBar. De gebruiker\n * kiest een onderdeel op de pagina (hover-highlight + klik → het dichtstbijzijnde block met\n * `data-xicms-block`), schrijft feedback en stuurt optioneel een screenshot van dat onderdeel mee.\n * Alles landt in `sites/{siteId}/feedback` en wordt verzameld in het agency-dashboard.\n *\n * Losstaand: inline styles (geen afhankelijkheid van de huisstijl van de site), alle eigen nodes\n * dragen `data-xicms-feedback-ignore` zodat ze buiten screenshots blijven.\n */\ntype Mode = \"idle\" | \"picking\" | \"form\" | \"sent\";\ntype Picked = { key: string; type: string; el: HTMLElement };\ntype Rect = { top: number; left: number; width: number; height: number };\n\nconst ACCENT = \"#4f46e5\";\n\nexport function FeedbackWidget({ siteId }: { siteId: string }) {\n  const { user, role } = useAuth();\n  const { open } = useEditor();\n\n  const [mode, setMode] = useState<Mode>(\"idle\");\n  const [picked, setPicked] = useState<Picked | null>(null);\n  const [rect, setRect] = useState<Rect | null>(null);\n  const [message, setMessage] = useState(\"\");\n  const [withShot, setWithShot] = useState(true);\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const pickedRef = useRef<Picked | null>(null);\n\n  const active = (Boolean(user) && canEdit(role)) || open;\n\n  const reset = useCallback(() => {\n    setMode(\"idle\");\n    setPicked(null);\n    pickedRef.current = null;\n    setRect(null);\n    setMessage(\"\");\n    setError(null);\n  }, []);\n\n  // Pick-modus: volg de muis, teken een highlight om het dichtstbijzijnde block, en leg bij klik\n  // het doelblock vast. Widget-eigen elementen (data-xicms-feedback-ignore) negeren we.\n  useEffect(() => {\n    if (mode !== \"picking\") return;\n\n    const blockAt = (x: number, y: number): HTMLElement | null => {\n      const el = document.elementFromPoint(x, y) as HTMLElement | null;\n      if (!el || el.closest(\"[data-xicms-feedback-ignore]\")) return null;\n      return el.closest<HTMLElement>(\"[data-xicms-block]\");\n    };\n\n    const onMove = (e: PointerEvent) => {\n      const block = blockAt(e.clientX, e.clientY);\n      if (!block) {\n        setRect(null);\n        return;\n      }\n      const r = block.getBoundingClientRect();\n      setRect({ top: r.top, left: r.left, width: r.width, height: r.height });\n    };\n\n    const onClick = (e: MouseEvent) => {\n      const block = blockAt(e.clientX, e.clientY);\n      if (!block) return;\n      e.preventDefault();\n      e.stopPropagation();\n      const p: Picked = {\n        key: block.dataset.xicmsBlock ?? \"\",\n        type: block.dataset.xicmsBlockType ?? \"\",\n        el: block,\n      };\n      pickedRef.current = p;\n      setPicked(p);\n      setMode(\"form\");\n    };\n\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") reset();\n    };\n\n    document.addEventListener(\"pointermove\", onMove, true);\n    document.addEventListener(\"click\", onClick, true);\n    document.addEventListener(\"keydown\", onKey, true);\n    return () => {\n      document.removeEventListener(\"pointermove\", onMove, true);\n      document.removeEventListener(\"click\", onClick, true);\n      document.removeEventListener(\"keydown\", onKey, true);\n    };\n  }, [mode, reset]);\n\n  async function captureShot(el: HTMLElement): Promise<Blob | null> {\n    try {\n      const mod = await import(\"html2canvas-pro\");\n      const html2canvas = mod.default;\n      const canvas = await html2canvas(el, {\n        useCORS: true,\n        backgroundColor: null,\n        scale: Math.min(1.5, window.devicePixelRatio || 1),\n        logging: false,\n        ignoreElements: (node) => node.hasAttribute?.(\"data-xicms-feedback-ignore\"),\n      });\n      return await new Promise<Blob | null>((res) => canvas.toBlob((b) => res(b), \"image/png\"));\n    } catch {\n      return null; // screenshot is best-effort; feedback gaat alsnog door\n    }\n  }\n\n  async function submit() {\n    if (!picked || !message.trim()) return;\n    setBusy(true);\n    setError(null);\n    try {\n      let screenshotPath: string | undefined;\n      if (withShot) {\n        const blob = await captureShot(picked.el);\n        if (blob) screenshotPath = await uploadFeedbackShot(siteId, blob).catch(() => undefined);\n      }\n      await addFeedback(siteId, {\n        message: message.trim(),\n        blockKey: picked.key,\n        blockType: picked.type || undefined,\n        pageRoute: typeof window !== \"undefined\" ? window.location.pathname : undefined,\n        authorUid: user?.uid,\n        authorEmail: user?.email ?? undefined,\n        screenshotPath,\n      });\n      setMode(\"sent\");\n      setTimeout(reset, 2200);\n    } catch (e) {\n      setError(e instanceof Error ? e.message : \"Versturen mislukt.\");\n    } finally {\n      setBusy(false);\n    }\n  }\n\n  if (!active) return null;\n\n  return (\n    <div data-xicms-feedback-ignore=\"\">\n      {/* Highlight-overlay tijdens het kiezen (pointer-events uit zodat klikken doorgaat). */}\n      {mode === \"picking\" && rect && (\n        <div\n          data-xicms-feedback-ignore=\"\"\n          style={{\n            position: \"fixed\",\n            top: rect.top,\n            left: rect.left,\n            width: rect.width,\n            height: rect.height,\n            border: `2px solid ${ACCENT}`,\n            background: \"rgba(79,70,229,0.08)\",\n            borderRadius: 6,\n            zIndex: 2147483000,\n            pointerEvents: \"none\",\n            boxShadow: \"0 0 0 9999px rgba(15,15,25,0.04)\",\n            transition: \"all 60ms ease-out\",\n          }}\n        />\n      )}\n\n      {/* Instructiebalk tijdens het kiezen. */}\n      {mode === \"picking\" && (\n        <div\n          data-xicms-feedback-ignore=\"\"\n          style={{ ...bannerStyle, pointerEvents: \"none\" }}\n        >\n          Klik op een onderdeel om er feedback op te geven · <b>Esc</b> om te annuleren\n        </div>\n      )}\n\n      {/* Zwevende knop (linksonder — EditBar zit rechtsonder). */}\n      {mode === \"idle\" && (\n        <button\n          type=\"button\"\n          data-xicms-feedback-ignore=\"\"\n          onClick={() => setMode(\"picking\")}\n          style={fabStyle}\n          title=\"Feedback geven op een onderdeel\"\n        >\n          <span style={{ fontSize: 15 }}>💬</span> Feedback\n        </button>\n      )}\n\n      {/* Formulier na het kiezen van een onderdeel. */}\n      {mode === \"form\" && picked && (\n        <div data-xicms-feedback-ignore=\"\" style={cardStyle}>\n          <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", marginBottom: 8 }}>\n            <strong style={{ fontSize: 13 }}>Feedback op dit onderdeel</strong>\n            <span style={{ fontSize: 11, color: \"#8a8f98\", fontFamily: \"monospace\" }}>{picked.type || \"block\"}</span>\n          </div>\n          <textarea\n            autoFocus\n            value={message}\n            onChange={(e) => setMessage(e.target.value)}\n            placeholder=\"Wat moet er anders aan dit onderdeel?\"\n            rows={4}\n            style={textareaStyle}\n          />\n          <label style={{ display: \"flex\", alignItems: \"center\", gap: 6, fontSize: 12, color: \"#4b5563\", margin: \"8px 0\" }}>\n            <input type=\"checkbox\" checked={withShot} onChange={(e) => setWithShot(e.target.checked)} />\n            Screenshot van dit onderdeel meesturen\n          </label>\n          {error && <p style={{ color: \"#dc2626\", fontSize: 12, margin: \"0 0 8px\" }}>{error}</p>}\n          <div style={{ display: \"flex\", gap: 8, justifyContent: \"flex-end\" }}>\n            <button type=\"button\" onClick={reset} disabled={busy} style={ghostBtn}>Annuleren</button>\n            <button type=\"button\" onClick={submit} disabled={busy || !message.trim()} style={primaryBtn}>\n              {busy ? \"Versturen…\" : \"Versturen\"}\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* Bevestiging. */}\n      {mode === \"sent\" && (\n        <div data-xicms-feedback-ignore=\"\" style={{ ...cardStyle, textAlign: \"center\" }}>\n          <div style={{ fontSize: 22 }}>✓</div>\n          <p style={{ fontSize: 13, margin: \"4px 0 0\", color: \"#111827\" }}>Bedankt! Je feedback is opgeslagen.</p>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* ── Inline styles (los van de huisstijl van de site) ──────────────────────── */\nconst fabStyle: React.CSSProperties = {\n  position: \"fixed\",\n  left: 20,\n  bottom: 20,\n  zIndex: 2147483000,\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  gap: 7,\n  padding: \"9px 14px\",\n  border: \"none\",\n  borderRadius: 999,\n  background: ACCENT,\n  color: \"#fff\",\n  fontSize: 13,\n  fontWeight: 600,\n  fontFamily: \"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif\",\n  cursor: \"pointer\",\n  boxShadow: \"0 4px 14px rgba(79,70,229,0.4)\",\n};\nconst cardStyle: React.CSSProperties = {\n  position: \"fixed\",\n  left: 20,\n  bottom: 20,\n  zIndex: 2147483000,\n  width: 320,\n  maxWidth: \"calc(100vw - 40px)\",\n  padding: 16,\n  background: \"#fff\",\n  borderRadius: 14,\n  boxShadow: \"0 12px 40px rgba(15,15,25,0.22)\",\n  border: \"1px solid #eceef2\",\n  fontFamily: \"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif\",\n  color: \"#111827\",\n};\nconst bannerStyle: React.CSSProperties = {\n  position: \"fixed\",\n  top: 16,\n  left: \"50%\",\n  transform: \"translateX(-50%)\",\n  zIndex: 2147483000,\n  padding: \"8px 16px\",\n  background: \"#111827\",\n  color: \"#fff\",\n  borderRadius: 999,\n  fontSize: 13,\n  fontFamily: \"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif\",\n  boxShadow: \"0 6px 20px rgba(0,0,0,0.3)\",\n};\nconst textareaStyle: React.CSSProperties = {\n  width: \"100%\",\n  boxSizing: \"border-box\",\n  padding: \"8px 10px\",\n  border: \"1px solid #d7dae0\",\n  borderRadius: 8,\n  fontSize: 13,\n  fontFamily: \"inherit\",\n  resize: \"vertical\",\n  color: \"#111827\",\n};\nconst primaryBtn: React.CSSProperties = {\n  padding: \"7px 14px\",\n  border: \"none\",\n  borderRadius: 8,\n  background: ACCENT,\n  color: \"#fff\",\n  fontSize: 13,\n  fontWeight: 600,\n  cursor: \"pointer\",\n};\nconst ghostBtn: React.CSSProperties = {\n  padding: \"7px 12px\",\n  border: \"1px solid #d7dae0\",\n  borderRadius: 8,\n  background: \"#fff\",\n  color: \"#4b5563\",\n  fontSize: 13,\n  cursor: \"pointer\",\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/FeedbackWidget.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useAuth } from \"../auth/AuthProvider\";\nimport { canEdit } from \"../auth/roles\";\nimport { useEditor } from \"../editor/EditorProvider\";\nimport { addFeedback, uploadFeedbackShot } from \"../firebase/feedback\";\n\n/**\n * Feedback per onderdeel — zichtbaar voor ingelogde editors/siteadmins (vaak de klant zelf) én\n * wanneer de editor open staat (preview). Zelfde zichtbaarheidslogica als de EditBar. De gebruiker\n * kiest een onderdeel op de pagina (hover-highlight + klik → het dichtstbijzijnde block met\n * `data-xicms-block`), schrijft feedback en stuurt optioneel een screenshot van dat onderdeel mee.\n * Alles landt in `sites/{siteId}/feedback` en wordt verzameld in het agency-dashboard.\n *\n * Losstaand: inline styles (geen afhankelijkheid van de huisstijl van de site), alle eigen nodes\n * dragen `data-xicms-feedback-ignore` zodat ze buiten screenshots blijven.\n */\ntype Mode = \"idle\" | \"picking\" | \"form\" | \"sent\";\ntype Picked = { key: string; type: string; el: HTMLElement };\ntype Rect = { top: number; left: number; width: number; height: number };\n\nconst ACCENT = \"#4f46e5\";\n\nexport function FeedbackWidget({ siteId }: { siteId: string }) {\n  const { user, role } = useAuth();\n  const { open } = useEditor();\n\n  const [mode, setMode] = useState<Mode>(\"idle\");\n  const [picked, setPicked] = useState<Picked | null>(null);\n  const [rect, setRect] = useState<Rect | null>(null);\n  const [message, setMessage] = useState(\"\");\n  const [withShot, setWithShot] = useState(true);\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const pickedRef = useRef<Picked | null>(null);\n\n  const active = (Boolean(user) && canEdit(role)) || open;\n\n  const reset = useCallback(() => {\n    setMode(\"idle\");\n    setPicked(null);\n    pickedRef.current = null;\n    setRect(null);\n    setMessage(\"\");\n    setError(null);\n  }, []);\n\n  // Pick-modus: volg de muis, teken een highlight om het dichtstbijzijnde block, en leg bij klik\n  // het doelblock vast. Widget-eigen elementen (data-xicms-feedback-ignore) negeren we.\n  useEffect(() => {\n    if (mode !== \"picking\") return;\n\n    const blockAt = (x: number, y: number): HTMLElement | null => {\n      const el = document.elementFromPoint(x, y) as HTMLElement | null;\n      if (!el || el.closest(\"[data-xicms-feedback-ignore]\")) return null;\n      return el.closest<HTMLElement>(\"[data-xicms-block]\");\n    };\n\n    const onMove = (e: PointerEvent) => {\n      const block = blockAt(e.clientX, e.clientY);\n      if (!block) {\n        setRect(null);\n        return;\n      }\n      const r = block.getBoundingClientRect();\n      setRect({ top: r.top, left: r.left, width: r.width, height: r.height });\n    };\n\n    const onClick = (e: MouseEvent) => {\n      const block = blockAt(e.clientX, e.clientY);\n      if (!block) return;\n      e.preventDefault();\n      e.stopPropagation();\n      const p: Picked = {\n        key: block.dataset.xicmsBlock ?? \"\",\n        type: block.dataset.xicmsBlockType ?? \"\",\n        el: block,\n      };\n      pickedRef.current = p;\n      setPicked(p);\n      setMode(\"form\");\n    };\n\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") reset();\n    };\n\n    document.addEventListener(\"pointermove\", onMove, true);\n    document.addEventListener(\"click\", onClick, true);\n    document.addEventListener(\"keydown\", onKey, true);\n    return () => {\n      document.removeEventListener(\"pointermove\", onMove, true);\n      document.removeEventListener(\"click\", onClick, true);\n      document.removeEventListener(\"keydown\", onKey, true);\n    };\n  }, [mode, reset]);\n\n  async function captureShot(el: HTMLElement): Promise<Blob | null> {\n    try {\n      const mod = await import(\"html2canvas-pro\");\n      const html2canvas = mod.default;\n      const canvas = await html2canvas(el, {\n        useCORS: true,\n        backgroundColor: null,\n        scale: Math.min(1.5, window.devicePixelRatio || 1),\n        logging: false,\n        ignoreElements: (node) => node.hasAttribute?.(\"data-xicms-feedback-ignore\"),\n      });\n      return await new Promise<Blob | null>((res) => canvas.toBlob((b) => res(b), \"image/png\"));\n    } catch {\n      return null; // screenshot is best-effort; feedback gaat alsnog door\n    }\n  }\n\n  async function submit() {\n    if (!picked || !message.trim()) return;\n    setBusy(true);\n    setError(null);\n    try {\n      let screenshotPath: string | undefined;\n      if (withShot) {\n        const blob = await captureShot(picked.el);\n        if (blob) screenshotPath = await uploadFeedbackShot(siteId, blob).catch(() => undefined);\n      }\n      await addFeedback(siteId, {\n        message: message.trim(),\n        blockKey: picked.key,\n        blockType: picked.type || undefined,\n        pageRoute: typeof window !== \"undefined\" ? window.location.pathname : undefined,\n        authorUid: user?.uid,\n        authorEmail: user?.email ?? undefined,\n        screenshotPath,\n      });\n      setMode(\"sent\");\n      setTimeout(reset, 2200);\n    } catch (e) {\n      setError(e instanceof Error ? e.message : \"Versturen mislukt.\");\n    } finally {\n      setBusy(false);\n    }\n  }\n\n  if (!active) return null;\n\n  return (\n    <div data-xicms-feedback-ignore=\"\">\n      {/* Highlight-overlay tijdens het kiezen (pointer-events uit zodat klikken doorgaat). */}\n      {mode === \"picking\" && rect && (\n        <div\n          data-xicms-feedback-ignore=\"\"\n          style={{\n            position: \"fixed\",\n            top: rect.top,\n            left: rect.left,\n            width: rect.width,\n            height: rect.height,\n            border: `2px solid ${ACCENT}`,\n            background: \"rgba(79,70,229,0.08)\",\n            borderRadius: 6,\n            zIndex: 2147483000,\n            pointerEvents: \"none\",\n            boxShadow: \"0 0 0 9999px rgba(15,15,25,0.04)\",\n            transition: \"all 60ms ease-out\",\n          }}\n        />\n      )}\n\n      {/* Instructiebalk tijdens het kiezen. */}\n      {mode === \"picking\" && (\n        <div\n          data-xicms-feedback-ignore=\"\"\n          style={{ ...bannerStyle, pointerEvents: \"none\" }}\n        >\n          Klik op een onderdeel om er feedback op te geven · <b>Esc</b> om te annuleren\n        </div>\n      )}\n\n      {/* Zwevende knop, linksonder. Op smalle schermen (zie xicms-feedback-fab in styles.css)\n          schuift hij boven de beheerbalk uit — die loopt daar van rand tot rand, dus botst hij\n          anders met precies dit hoekje. */}\n      {mode === \"idle\" && (\n        <button\n          type=\"button\"\n          className=\"xicms-feedback-fab\"\n          data-xicms-feedback-ignore=\"\"\n          onClick={() => setMode(\"picking\")}\n          style={fabStyle}\n          title=\"Feedback geven op een onderdeel\"\n        >\n          <span style={{ fontSize: 15 }}>💬</span> Feedback\n        </button>\n      )}\n\n      {/* Formulier na het kiezen van een onderdeel. */}\n      {mode === \"form\" && picked && (\n        <div className=\"xicms-feedback-fab\" data-xicms-feedback-ignore=\"\" style={cardStyle}>\n          <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", marginBottom: 8 }}>\n            <strong style={{ fontSize: 13 }}>Feedback op dit onderdeel</strong>\n            <span style={{ fontSize: 11, color: \"#8a8f98\", fontFamily: \"monospace\" }}>{picked.type || \"block\"}</span>\n          </div>\n          <textarea\n            autoFocus\n            value={message}\n            onChange={(e) => setMessage(e.target.value)}\n            placeholder=\"Wat moet er anders aan dit onderdeel?\"\n            rows={4}\n            style={textareaStyle}\n          />\n          <label style={{ display: \"flex\", alignItems: \"center\", gap: 6, fontSize: 12, color: \"#4b5563\", margin: \"8px 0\" }}>\n            <input type=\"checkbox\" checked={withShot} onChange={(e) => setWithShot(e.target.checked)} />\n            Screenshot van dit onderdeel meesturen\n          </label>\n          {error && <p style={{ color: \"#dc2626\", fontSize: 12, margin: \"0 0 8px\" }}>{error}</p>}\n          <div style={{ display: \"flex\", gap: 8, justifyContent: \"flex-end\" }}>\n            <button type=\"button\" onClick={reset} disabled={busy} style={ghostBtn}>Annuleren</button>\n            <button type=\"button\" onClick={submit} disabled={busy || !message.trim()} style={primaryBtn}>\n              {busy ? \"Versturen…\" : \"Versturen\"}\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* Bevestiging. */}\n      {mode === \"sent\" && (\n        <div className=\"xicms-feedback-fab\" data-xicms-feedback-ignore=\"\" style={{ ...cardStyle, textAlign: \"center\" }}>\n          <div style={{ fontSize: 22 }}>✓</div>\n          <p style={{ fontSize: 13, margin: \"4px 0 0\", color: \"#111827\" }}>Bedankt! Je feedback is opgeslagen.</p>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* ── Inline styles (los van de huisstijl van de site) ──────────────────────── */\n/* Positie (fixed/left/bottom/z-index) staat in styles.css (.xicms-feedback-fab) — dat is de ENE\n * plek die ook weet waar de beheerbalk zit, en dus de enige die de twee uit elkaar kan houden op\n * smalle schermen. De rest (kleur, vorm, schaduw) blijft hier los van de site-huisstijl. */\nconst fabStyle: React.CSSProperties = {\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  gap: 7,\n  padding: \"9px 14px\",\n  border: \"none\",\n  borderRadius: 999,\n  background: ACCENT,\n  color: \"#fff\",\n  fontSize: 13,\n  fontWeight: 600,\n  fontFamily: \"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif\",\n  cursor: \"pointer\",\n  boxShadow: \"0 4px 14px rgba(79,70,229,0.4)\",\n};\nconst cardStyle: React.CSSProperties = {\n  width: 320,\n  maxWidth: \"calc(100vw - 40px)\",\n  padding: 16,\n  background: \"#fff\",\n  borderRadius: 14,\n  boxShadow: \"0 12px 40px rgba(15,15,25,0.22)\",\n  border: \"1px solid #eceef2\",\n  fontFamily: \"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif\",\n  color: \"#111827\",\n};\nconst bannerStyle: React.CSSProperties = {\n  position: \"fixed\",\n  top: 16,\n  left: \"50%\",\n  transform: \"translateX(-50%)\",\n  zIndex: 2147483000,\n  padding: \"8px 16px\",\n  background: \"#111827\",\n  color: \"#fff\",\n  borderRadius: 999,\n  fontSize: 13,\n  fontFamily: \"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif\",\n  boxShadow: \"0 6px 20px rgba(0,0,0,0.3)\",\n};\nconst textareaStyle: React.CSSProperties = {\n  width: \"100%\",\n  boxSizing: \"border-box\",\n  padding: \"8px 10px\",\n  border: \"1px solid #d7dae0\",\n  borderRadius: 8,\n  fontSize: 13,\n  fontFamily: \"inherit\",\n  resize: \"vertical\",\n  color: \"#111827\",\n};\nconst primaryBtn: React.CSSProperties = {\n  padding: \"7px 14px\",\n  border: \"none\",\n  borderRadius: 8,\n  background: ACCENT,\n  color: \"#fff\",\n  fontSize: 13,\n  fontWeight: 600,\n  cursor: \"pointer\",\n};\nconst ghostBtn: React.CSSProperties = {\n  padding: \"7px 12px\",\n  border: \"1px solid #d7dae0\",\n  borderRadius: 8,\n  background: \"#fff\",\n  color: \"#4b5563\",\n  fontSize: 13,\n  cursor: \"pointer\",\n};\n"],"mappings":"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","names":[]}

package/dist/schema/mail.d.ts

@@ -51,6 +51,18 @@ export declare const MAIL_TEMPLATE_DEFS: readonly [{
     readonly hint: "Naar de klant bij annulering.";
     readonly module: "shop";
     readonly placeholders: "{{naam}} {{ordernummer}} {{sitenaam}}";
+}, {
+    readonly key: "shopkeeperOrderCancelled";
+    readonly label: "Bestelling geannuleerd (naar jou)";
+    readonly hint: "Naar jou bij elke annulering — ook automatisch (bv. een verlopen betaling).";
+    readonly module: "shop";
+    readonly placeholders: "{{sitenaam}} {{ordernummer}} {{totaal}} {{klant}} {{regels}}";
+}, {
+    readonly key: "paymentRequest";
+    readonly label: "Betaalverzoek";
+    readonly hint: "Naar de klant als je vanuit een openstaande bestelling een betaallink verstuurt.";
+    readonly module: "shop";
+    readonly placeholders: "{{naam}} {{ordernummer}} {{betaallink}} {{regels}} {{totaal}} {{verzendadres}} {{sitenaam}}";
 }, {
     readonly key: "orderRefunded";
     readonly label: "Terugbetaald";
@@ -103,9 +115,17 @@ export declare const MailTemplatesSchema: z.ZodMiniObject<{
         subject: z.ZodMiniOptional<z.ZodMiniString<string>>;
         bodyText: z.ZodMiniOptional<z.ZodMiniString<string>>;
     }, z.core.$strip>>;
+    paymentRequest: z.ZodMiniOptional<z.ZodMiniObject<{
+        subject: z.ZodMiniOptional<z.ZodMiniString<string>>;
+        bodyText: z.ZodMiniOptional<z.ZodMiniString<string>>;
+    }, z.core.$strip>>;
     shopkeeperNotification: z.ZodMiniOptional<z.ZodMiniObject<{
         subject: z.ZodMiniOptional<z.ZodMiniString<string>>;
         bodyText: z.ZodMiniOptional<z.ZodMiniString<string>>;
     }, z.core.$strip>>;
+    shopkeeperOrderCancelled: z.ZodMiniOptional<z.ZodMiniObject<{
+        subject: z.ZodMiniOptional<z.ZodMiniString<string>>;
+        bodyText: z.ZodMiniOptional<z.ZodMiniString<string>>;
+    }, z.core.$strip>>;
 }, z.core.$strip>;
 export type MailTemplates = z.infer<typeof MailTemplatesSchema>;

package/dist/schema/mail.js

@@ -42,6 +42,20 @@ const MAIL_TEMPLATE_DEFS = [
     module: "shop",
     placeholders: "{{naam}} {{ordernummer}} {{sitenaam}}"
   },
+  {
+    key: "shopkeeperOrderCancelled",
+    label: "Bestelling geannuleerd (naar jou)",
+    hint: "Naar jou bij elke annulering \u2014 ook automatisch (bv. een verlopen betaling).",
+    module: "shop",
+    placeholders: "{{sitenaam}} {{ordernummer}} {{totaal}} {{klant}} {{regels}}"
+  },
+  {
+    key: "paymentRequest",
+    label: "Betaalverzoek",
+    hint: "Naar de klant als je vanuit een openstaande bestelling een betaallink verstuurt.",
+    module: "shop",
+    placeholders: "{{naam}} {{ordernummer}} {{betaallink}} {{regels}} {{totaal}} {{verzendadres}} {{sitenaam}}"
+  },
   {
     key: "orderRefunded",
     label: "Terugbetaald",

package/dist/schema/mail.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/schema/mail.ts"],"sourcesContent":["import * as z from \"zod/mini\";\n\n/**\n * E-mailtemplates (site-breed, 3.7) — `sites/{siteId}/settings/mailTemplates`. Per template een\n * onderwerp + platte-tekst-body met `{{placeholders}}`. Bewust géén HTML van beheerders; de\n * huisstijl-opmaak komt in de mail-pipeline (functions `mailLayout.ts`) om de tekst heen.\n *\n * De keys zijn getagd met de module waartoe ze horen (`core`/`shop`), zodat de editor in /beheer\n * shop-templates alleen toont op sites met de webwinkel. `core`-keys (formulieren) gelden altijd.\n */\n\nexport interface MailTemplateDef {\n  key: string;\n  label: string;\n  hint: string;\n  module: \"core\" | \"shop\";\n  /** Beschikbare invulvelden, als tonende hint in de editor. */\n  placeholders: string;\n}\n\nexport const MAIL_TEMPLATE_DEFS = [\n  {\n    key: \"formNotification\",\n    label: \"Formulier-notificatie (naar jou)\",\n    hint: \"Naar jou zodra iemand een formulier invult.\",\n    module: \"core\",\n    placeholders: \"{{sitenaam}} {{formulier}} {{regels}}\",\n  },\n  {\n    key: \"formConfirmation\",\n    label: \"Formulier-bevestiging (naar de inzender)\",\n    hint: \"Ontvangstbevestiging naar wie het formulier invulde.\",\n    module: \"core\",\n    placeholders: \"{{sitenaam}} {{formulier}} {{regels}}\",\n  },\n  {\n    key: \"orderConfirmation\",\n    label: \"Bestelbevestiging\",\n    hint: \"Naar de klant zodra de betaling binnen is — met factuur-PDF als bijlage.\",\n    module: \"shop\",\n    placeholders: \"{{naam}} {{ordernummer}} {{regels}} {{totaal}} {{verzendadres}} {{notitie}} {{sitenaam}}\",\n  },\n  {\n    key: \"shopkeeperNotification\",\n    label: \"Nieuwe-bestelling-notificatie (naar jou)\",\n    hint: \"Naar jou bij elke nieuwe bestelling.\",\n    module: \"shop\",\n    placeholders: \"{{sitenaam}} {{ordernummer}} {{totaal}} {{klant}} {{regels}} {{verzendadres}} {{notitie}}\",\n  },\n  {\n    key: \"orderShipped\",\n    label: \"Bestelling verzonden\",\n    hint: \"Naar de klant wanneer je de status op ‘verzonden’ zet.\",\n    module: \"shop\",\n    placeholders: \"{{naam}} {{ordernummer}} {{regels}} {{trackingUrl}} {{verzendadres}} {{sitenaam}}\",\n  },\n  {\n    key: \"orderCancelled\",\n    label: \"Bestelling geannuleerd\",\n    hint: \"Naar de klant bij annulering.\",\n    module: \"shop\",\n    placeholders: \"{{naam}} {{ordernummer}} {{sitenaam}}\",\n  },\n  {\n    key: \"orderRefunded\",\n    label: \"Terugbetaald\",\n    hint: \"Naar de klant na een terugbetaling.\",\n    module: \"shop\",\n    placeholders: \"{{naam}} {{ordernummer}} {{totaal}} {{sitenaam}}\",\n  },\n  {\n    key: \"donationThanks\",\n    label: \"Donatie-bedankje\",\n    hint: \"Naar de gever na een donatie.\",\n    module: \"shop\",\n    placeholders: \"{{naam}} {{regels}} {{sitenaam}}\",\n  },\n] as const satisfies readonly MailTemplateDef[];\n\nexport const MAIL_TEMPLATE_KEYS = MAIL_TEMPLATE_DEFS.map((d) => d.key) as unknown as readonly MailTemplateKey[];\nexport type MailTemplateKey = (typeof MAIL_TEMPLATE_DEFS)[number][\"key\"];\n\n/** Formulier-mails — bewerkbaar in het Formulieren-gedeelte. */\nexport const FORM_TEMPLATE_KEYS = MAIL_TEMPLATE_DEFS.filter((d) => d.module === \"core\").map((d) => d.key) as readonly MailTemplateKey[];\n/** Shop-mails — bewerkbaar in het Webwinkel-gedeelte. */\nexport const SHOP_TEMPLATE_KEYS = MAIL_TEMPLATE_DEFS.filter((d) => d.module === \"shop\").map((d) => d.key) as readonly MailTemplateKey[];\n\nexport const MailTemplateSchema = z.object({\n  subject: z.optional(z.string().check(z.maxLength(200))),\n  bodyText: z.optional(z.string().check(z.maxLength(10_000))),\n});\nexport const MailTemplatesSchema = z.object(\n  Object.fromEntries(MAIL_TEMPLATE_DEFS.map((d) => [d.key, z.optional(MailTemplateSchema)])) as Record<\n    MailTemplateKey,\n    z.ZodMiniOptional<typeof MailTemplateSchema>\n  >,\n);\nexport type MailTemplates = z.infer<typeof MailTemplatesSchema>;\n"],"mappings":"AAAA,YAAY,OAAO;AAoBZ,MAAM,qBAAqB;AAAA,EAChC;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,qBAAqB,mBAAmB,IAAI,CAAC,MAAM,EAAE,GAAG;AAI9D,MAAM,qBAAqB,mBAAmB,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG;AAEjG,MAAM,qBAAqB,mBAAmB,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG;AAEjG,MAAM,qBAAqB,EAAE,OAAO;AAAA,EACzC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,GAAG,CAAC,CAAC;AAAA,EACtD,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,GAAM,CAAC,CAAC;AAC5D,CAAC;AACM,MAAM,sBAAsB,EAAE;AAAA,EACnC,OAAO,YAAY,mBAAmB,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,SAAS,kBAAkB,CAAC,CAAC,CAAC;AAI3F;","names":[]}
+{"version":3,"sources":["../../src/schema/mail.ts"],"sourcesContent":["import * as z from \"zod/mini\";\n\n/**\n * E-mailtemplates (site-breed, 3.7) — `sites/{siteId}/settings/mailTemplates`. Per template een\n * onderwerp + platte-tekst-body met `{{placeholders}}`. Bewust géén HTML van beheerders; de\n * huisstijl-opmaak komt in de mail-pipeline (functions `mailLayout.ts`) om de tekst heen.\n *\n * De keys zijn getagd met de module waartoe ze horen (`core`/`shop`), zodat de editor in /beheer\n * shop-templates alleen toont op sites met de webwinkel. `core`-keys (formulieren) gelden altijd.\n */\n\nexport interface MailTemplateDef {\n  key: string;\n  label: string;\n  hint: string;\n  module: \"core\" | \"shop\";\n  /** Beschikbare invulvelden, als tonende hint in de editor. */\n  placeholders: string;\n}\n\nexport const MAIL_TEMPLATE_DEFS = [\n  {\n    key: \"formNotification\",\n    label: \"Formulier-notificatie (naar jou)\",\n    hint: \"Naar jou zodra iemand een formulier invult.\",\n    module: \"core\",\n    placeholders: \"{{sitenaam}} {{formulier}} {{regels}}\",\n  },\n  {\n    key: \"formConfirmation\",\n    label: \"Formulier-bevestiging (naar de inzender)\",\n    hint: \"Ontvangstbevestiging naar wie het formulier invulde.\",\n    module: \"core\",\n    placeholders: \"{{sitenaam}} {{formulier}} {{regels}}\",\n  },\n  {\n    key: \"orderConfirmation\",\n    label: \"Bestelbevestiging\",\n    hint: \"Naar de klant zodra de betaling binnen is — met factuur-PDF als bijlage.\",\n    module: \"shop\",\n    placeholders: \"{{naam}} {{ordernummer}} {{regels}} {{totaal}} {{verzendadres}} {{notitie}} {{sitenaam}}\",\n  },\n  {\n    key: \"shopkeeperNotification\",\n    label: \"Nieuwe-bestelling-notificatie (naar jou)\",\n    hint: \"Naar jou bij elke nieuwe bestelling.\",\n    module: \"shop\",\n    placeholders: \"{{sitenaam}} {{ordernummer}} {{totaal}} {{klant}} {{regels}} {{verzendadres}} {{notitie}}\",\n  },\n  {\n    key: \"orderShipped\",\n    label: \"Bestelling verzonden\",\n    hint: \"Naar de klant wanneer je de status op ‘verzonden’ zet.\",\n    module: \"shop\",\n    placeholders: \"{{naam}} {{ordernummer}} {{regels}} {{trackingUrl}} {{verzendadres}} {{sitenaam}}\",\n  },\n  {\n    key: \"orderCancelled\",\n    label: \"Bestelling geannuleerd\",\n    hint: \"Naar de klant bij annulering.\",\n    module: \"shop\",\n    placeholders: \"{{naam}} {{ordernummer}} {{sitenaam}}\",\n  },\n  {\n    key: \"shopkeeperOrderCancelled\",\n    label: \"Bestelling geannuleerd (naar jou)\",\n    hint: \"Naar jou bij elke annulering — ook automatisch (bv. een verlopen betaling).\",\n    module: \"shop\",\n    placeholders: \"{{sitenaam}} {{ordernummer}} {{totaal}} {{klant}} {{regels}}\",\n  },\n  {\n    key: \"paymentRequest\",\n    label: \"Betaalverzoek\",\n    hint: \"Naar de klant als je vanuit een openstaande bestelling een betaallink verstuurt.\",\n    module: \"shop\",\n    placeholders: \"{{naam}} {{ordernummer}} {{betaallink}} {{regels}} {{totaal}} {{verzendadres}} {{sitenaam}}\",\n  },\n  {\n    key: \"orderRefunded\",\n    label: \"Terugbetaald\",\n    hint: \"Naar de klant na een terugbetaling.\",\n    module: \"shop\",\n    placeholders: \"{{naam}} {{ordernummer}} {{totaal}} {{sitenaam}}\",\n  },\n  {\n    key: \"donationThanks\",\n    label: \"Donatie-bedankje\",\n    hint: \"Naar de gever na een donatie.\",\n    module: \"shop\",\n    placeholders: \"{{naam}} {{regels}} {{sitenaam}}\",\n  },\n] as const satisfies readonly MailTemplateDef[];\n\nexport const MAIL_TEMPLATE_KEYS = MAIL_TEMPLATE_DEFS.map((d) => d.key) as unknown as readonly MailTemplateKey[];\nexport type MailTemplateKey = (typeof MAIL_TEMPLATE_DEFS)[number][\"key\"];\n\n/** Formulier-mails — bewerkbaar in het Formulieren-gedeelte. */\nexport const FORM_TEMPLATE_KEYS = MAIL_TEMPLATE_DEFS.filter((d) => d.module === \"core\").map((d) => d.key) as readonly MailTemplateKey[];\n/** Shop-mails — bewerkbaar in het Webwinkel-gedeelte. */\nexport const SHOP_TEMPLATE_KEYS = MAIL_TEMPLATE_DEFS.filter((d) => d.module === \"shop\").map((d) => d.key) as readonly MailTemplateKey[];\n\nexport const MailTemplateSchema = z.object({\n  subject: z.optional(z.string().check(z.maxLength(200))),\n  bodyText: z.optional(z.string().check(z.maxLength(10_000))),\n});\nexport const MailTemplatesSchema = z.object(\n  Object.fromEntries(MAIL_TEMPLATE_DEFS.map((d) => [d.key, z.optional(MailTemplateSchema)])) as Record<\n    MailTemplateKey,\n    z.ZodMiniOptional<typeof MailTemplateSchema>\n  >,\n);\nexport type MailTemplates = z.infer<typeof MailTemplatesSchema>;\n"],"mappings":"AAAA,YAAY,OAAO;AAoBZ,MAAM,qBAAqB;AAAA,EAChC;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,qBAAqB,mBAAmB,IAAI,CAAC,MAAM,EAAE,GAAG;AAI9D,MAAM,qBAAqB,mBAAmB,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG;AAEjG,MAAM,qBAAqB,mBAAmB,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG;AAEjG,MAAM,qBAAqB,EAAE,OAAO;AAAA,EACzC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,GAAG,CAAC,CAAC;AAAA,EACtD,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,GAAM,CAAC,CAAC;AAC5D,CAAC;AACM,MAAM,sBAAsB,EAAE;AAAA,EACnC,OAAO,YAAY,mBAAmB,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,SAAS,kBAAkB,CAAC,CAAC,CAAC;AAI3F;","names":[]}

package/dist/schema/shop.d.ts

@@ -266,6 +266,8 @@ export declare const OrderSchema: z.ZodMiniObject<{
         by: z.ZodMiniOptional<z.ZodMiniString<string>>;
         subject: z.ZodMiniString<string>;
         body: z.ZodMiniString<string>;
+        automatisch: z.ZodMiniOptional<z.ZodMiniBoolean<boolean>>;
+        mislukt: z.ZodMiniOptional<z.ZodMiniBoolean<boolean>>;
     }, z.core.$strip>>>;
     trackingUrl: z.ZodMiniOptional<z.ZodMiniString<string>>;
     invoicePath: z.ZodMiniOptional<z.ZodMiniString<string>>;

package/dist/schema/shop.js

@@ -223,12 +223,22 @@ const OrderSchema = z.object({
   manual: z.optional(z.boolean()),
   /** 7.18: som van alle (gedeeltelijke) terugbetalingen in centen. */
   refundedCents: z.optional(z.int().check(z.minimum(0))),
-  /** 7.18: berichten die de winkelier vanuit /beheer aan de klant stuurde. */
+  /**
+   * 7.18: berichten die naar de klant zijn gestuurd — handmatig vanuit /beheer, en sinds 7.25
+   * ook automatisch (bevestiging, verzonden, geannuleerd, terugbetaald, betaalverzoek). Zonder
+   * dat spoor was er geen manier om te zien of een klant-mail is aangekomen of dat de order
+   * stilletjes zonder bericht is geannuleerd.
+   */
   messages: z.optional(z.array(z.object({
     at: z.string().check(z.maxLength(40)),
+    /** uid van de medewerker, of "systeem" bij een automatische mail. */
     by: z.optional(z.string().check(z.maxLength(200))),
     subject: z.string().check(z.maxLength(200)),
-    body: z.string().check(z.maxLength(2e3))
+    body: z.string().check(z.maxLength(2e3)),
+    /** 7.25: automatisch verstuurd (order-gebeurtenis) i.p.v. handmatig getypt. */
+    automatisch: z.optional(z.boolean()),
+    /** 7.25: het versturen is mislukt — blijft zichtbaar i.p.v. stil te verdwijnen. */
+    mislukt: z.optional(z.boolean())
   })).check(z.maxLength(50))),
   /** 5.6: track & trace-link (gezet bij "verzonden"). */
   trackingUrl: z.optional(z.string().check(z.maxLength(500))),