@viglet/viglet-design-system 2026.3.2 → 2026.3.4

package/dist/bento/index.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The bento layer — the second era of chrome this package ships.
+ *
+ * Deliberately a subpath rather than part of the root barrel. A consumer still
+ * on console chrome should not carry this in its bundle, and an import that
+ * says `@viglet/viglet-design-system/bento` states which era a page belongs to,
+ * which is something a reviewer and a lint can both see.
+ *
+ * Requires `react-router-dom`. The package declares that peer optional, which
+ * is true of the root entry and false of this one and ./router — six components
+ * here render a `Link`, and npm cannot say "optional for one entry point, required
+ * for another". Importing this without it fails at build time with a missing
+ * module, so it is stated here, in the README, and enforced by the build.
+ *
+ * The stylesheet is a separate entry rather than imported from here, so that a
+ * consumer taking only the layout maths does not pull CSS it never renders:
+ *
+ *   import "@viglet/viglet-design-system/bento.css"
+ *
+ * The shell is three pieces and no provider: BentoNavRail down the left,
+ * BentoUserMenu in the header, BentoBackToTop at the corner. Wrap the routed
+ * page in `bento-rail-gutter` so content clears the rail.
+ *
+ * There is deliberately no sidebar provider here, and no context between them.
+ * The console era needs one because its sidebar collapses, remembers and
+ * pushes content around; the rail does none of that -- it is fixed, it is one
+ * width, and it is hidden below md. A provider would be state nothing reads.
+ *
+ * docs/BENTO-AUTHORING.md is the contract for writing a page with these, and
+ * docs/BENTO-BOUNDARY.md says which of the product's bento exports belong here
+ * and which stay in the product.
+ */
+export { BentoActionsMenu, type BentoActionsMenuItem, type BentoActionsMenuProps, type BentoActionTone } from './bento-actions-menu';
+export { BentoCountTile, type BentoCountTileProps } from './bento-count-tile';
+export { BentoEmptyState, type BentoEmptyStateProps } from './bento-empty-state';
+export { BentoEntityShell, type BentoEntityShellProps, type BentoEntityShellRenderArgs, type BentoIdentity, type BentoShellFormState, } from './bento-entity-shell';
+export { BentoEntityTile, type BentoEntityTileProps } from './bento-entity-tile';
+export { BentoListPage, type BentoListPageProps, type BentoListLayout, BentoTileGrid, type BentoTileGridProps, } from './bento-list-page';
+export { BentoHeroIconPicker, type BentoHeroIconPickerProps } from './bento-hero-icon-picker';
+export { BentoInlineEdit, type BentoInlineEditProps } from './bento-inline-edit';
+export { BentoFormHero, type BentoFormHeroProps } from './bento-form-hero';
+export { BentoFormSection, type BentoFormSectionProps } from './bento-form-section';
+export { BentoBackToTop } from './bento-back-to-top';
+export { BentoCommandPalette, type BentoCommandPaletteProps } from './bento-command-palette';
+export { BentoShortcutsDialog, type BentoShortcutsDialogProps } from './bento-shortcuts-dialog';
+export { BentoNavRail, type BentoNavRailProps } from './bento-nav-rail';
+export { BentoUserMenu, type BentoUserMenuProps } from './bento-user-menu';
+export { bentoNavTarget, type BentoNavGroup, type BentoNavItem, type BentoNavSection, type BentoNavSectionId, } from './bento-nav';
+export { BentoBackLink, BentoHero, type BentoHeroProps } from './bento-hero';
+export { BentoSaveBar, type BentoSaveBarProps } from './bento-save-bar';
+export { useBentoScrollFade } from './bento-scroll-fade';
+export { BentoScrollSaveBar } from './bento-scroll-save-bar';
+export { AdaptiveSectionCard, type AdaptiveSectionCardProps, SectionCardChromeProvider, type SectionChrome, useSectionChrome, } from './bento-section-chrome';
+export { BentoSection, type BentoSectionProps } from './bento-section';
+export { BentoStatusMarker, type BentoStatusMarkerProps } from './bento-status-marker';
+export { BentoTile, type BentoTileProps } from './bento-tile';
+export { BENTO_TONES, BENTO_TONE_CLASS, bentoChipClass, type BentoTone, } from './bento-tones';
+export { BENTO_EMPHASIS_NEXT, BENTO_EMPHASIS_SPAN, resolveBentoLayout, toBentoLayoutEntries, type BentoEmphasis, type BentoLayoutEntry, type BentoLayoutResponse, type BentoLayoutSource, type ResolvedBentoItem, } from './bento-layout';
+//# sourceMappingURL=index.d.ts.map

package/dist/bento/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/bento/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAKH,OAAO,EAAE,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,KAAK,qBAAqB,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACrI,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,0BAA0B,EAC/B,KAAK,aAAa,EAClB,KAAK,mBAAmB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACpB,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAC7F,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EACL,cAAc,EACd,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,iBAAiB,GACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,yBAAyB,EACzB,KAAK,aAAa,EAClB,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,KAAK,SAAS,GACf,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,GACvB,MAAM,gBAAgB,CAAC"}

package/dist/bento.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./badge-locale-sIsBdP_e.cjs"),t=require("./user.context-r50nSWER.cjs"),n=require("./loading-provider-1mgM91iY.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@tabler/icons-react"),o=require("react-i18next"),s=require("@iconify/react"),c=require("react-router-dom"),l=require("@dnd-kit/core"),u=require("@dnd-kit/sortable"),d=require("@dnd-kit/utilities"),f=require("sonner");var p={default:``,destructive:`bento-item-danger`};function m({actions:t,triggerLabel:n}){let{t:r}=(0,o.useTranslation)();return t.length===0?null:(0,i.jsxs)(e.f,{children:[(0,i.jsx)(e.E,{asChild:!0,children:(0,i.jsx)(`button`,{type:`button`,"aria-label":n??r(`forms.formActions.moreActions`,{defaultValue:`More actions`}),className:`bento-tile-clickable inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/60 bg-card/60 text-muted-foreground backdrop-blur transition-colors duration-200 hover:text-foreground`,children:(0,i.jsx)(a.IconDotsVertical,{size:18})})}),(0,i.jsx)(e.m,{align:`end`,sideOffset:8,className:`bento-dropdown min-w-44 p-1.5`,children:t.map(t=>{let n=t.icon,r=p[t.tone??`default`];return(0,i.jsxs)(e.g,{onSelect:t.onSelect,disabled:t.disabled,className:`bento-dropdown-item cursor-pointer gap-2 px-3 py-2 ${r}`,children:[(0,i.jsx)(n,{size:16}),t.label]},t.label)})})]})}var h={blue:`bento-tone-blue`,indigo:`bento-tone-indigo`,violet:`bento-tone-violet`,emerald:`bento-tone-emerald`,amber:`bento-tone-amber`,rose:`bento-tone-rose`,slate:`bento-tone-slate`},g=Object.keys(h);function _(e){return`bento-chip ${h[e]??h.slate}`}function v({to:e,icon:t,tone:n,label:r,count:a,span:o}){let s=(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`span`,{className:`grid h-9 w-9 place-items-center rounded-2xl text-white shadow-md ${_(n)}`,children:(0,i.jsx)(t,{size:18})}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`div`,{className:`text-3xl font-semibold tabular-nums tracking-tight`,children:a}),(0,i.jsx)(`div`,{className:`text-[11px] uppercase tracking-wider text-muted-foreground`,children:r})]})]}),l=`bento-tile bento-glass group relative flex flex-col justify-between overflow-hidden p-4 ${o}${e?` bento-tile-clickable`:``}`;return e?(0,i.jsx)(c.Link,{to:e,className:l,children:s}):(0,i.jsx)(`div`,{className:l,children:s})}function y({icon:t=a.IconSparkles,tone:n=`indigo`,title:r,description:o,action:s,align:c=`center`,className:l}){let u=_(n),d=c===`center`;return(0,i.jsxs)(`div`,{className:e.U(`bento-tile bento-glass flex flex-col gap-3 rounded-3xl p-8`,d?`items-center text-center`:`items-start text-left`,l),children:[(0,i.jsx)(`span`,{className:`grid h-12 w-12 place-items-center rounded-2xl ${u} text-white shadow-md`,children:(0,i.jsx)(t,{size:24})}),(0,i.jsx)(`div`,{className:`text-lg font-semibold tracking-tight`,children:r}),o&&(0,i.jsx)(`p`,{className:e.U(`max-w-md text-sm text-muted-foreground`,d&&`mx-auto`),children:o}),s&&(0,i.jsx)(`div`,{className:e.U(`mt-1`,d&&`mx-auto`),children:s})]})}function b({to:e,children:t}){return(0,i.jsxs)(c.Link,{to:e,className:`inline-flex items-center gap-1 hover:text-foreground`,children:[(0,i.jsx)(a.IconArrowLeft,{size:14,"aria-hidden":!0}),t]})}function x({eyebrow:e,backTo:t,backLabel:n,title:r,subtitle:a,leading:o,trailing:s}){let c=e??(t==null?null:(0,i.jsx)(b,{to:t,children:n}));return(0,i.jsx)(`header`,{className:`bento-shell-header mb-6 flex flex-col items-start gap-3 md:mb-10`,children:(0,i.jsxs)(`div`,{className:`flex w-full items-start gap-4`,children:[o&&(0,i.jsx)(`div`,{className:`shrink-0`,children:o}),(0,i.jsxs)(`div`,{className:`flex flex-1 flex-col gap-1`,children:[c&&(0,i.jsx)(`span`,{className:`text-xs uppercase tracking-[0.18em] text-muted-foreground`,children:c}),(0,i.jsx)(`h1`,{className:`text-3xl font-semibold tracking-tight md:text-4xl`,children:r}),a&&(0,i.jsx)(`p`,{className:`max-w-2xl text-sm text-muted-foreground`,children:a})]}),s&&(0,i.jsx)(`div`,{className:`ml-auto flex shrink-0 items-center gap-2`,children:s})]})})}function S({value:e,onChange:n,onClear:c,defaultIcon:l,tone:u,title:d,description:f,readOnly:p=!1}){let{t:m}=(0,o.useTranslation)(),[h,g]=(0,r.useState)(!1);return p?(0,i.jsx)(`span`,{className:`grid h-12 w-12 place-items-center rounded-2xl ${_(u)} text-white shadow-md`,children:e?(0,i.jsx)(s.Icon,{icon:e,className:`size-6 text-white`}):(0,i.jsx)(l,{size:24})}):(0,i.jsxs)(`div`,{className:`group relative`,children:[(0,i.jsxs)(`button`,{type:`button`,onClick:()=>g(!0),"aria-label":m(`forms.iconPicker.chooseAnIcon`),className:`group/icon relative grid h-12 w-12 cursor-pointer place-items-center overflow-hidden rounded-2xl ${_(u)} text-white shadow-md outline-none transition-all duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring active:scale-95`,children:[e?(0,i.jsx)(s.Icon,{icon:e,className:`size-6 text-white`}):(0,i.jsx)(l,{size:24}),(0,i.jsx)(`span`,{className:`pointer-events-none absolute inset-0 grid place-items-center bg-black/40 opacity-0 transition-opacity duration-200 group-hover/icon:opacity-100`,children:(0,i.jsx)(a.IconPalette,{className:`size-5 text-white`})})]}),e&&c&&(0,i.jsx)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),c()},"aria-label":m(`forms.common.remove`),title:m(`forms.common.remove`),className:`absolute -right-1.5 -top-1.5 grid h-5 w-5 cursor-pointer place-items-center rounded-full border border-border/60 bg-card/90 text-foreground opacity-0 shadow-md backdrop-blur transition-opacity duration-200 bento-clear focus-visible:opacity-100 group-hover:opacity-100`,children:(0,i.jsx)(a.IconX,{size:12})}),(0,i.jsx)(t.s,{open:h,onOpenChange:g,value:e,onSelect:n,onClear:c,title:d,description:f})]})}function C({value:t,onSave:n,multiline:a=!1,placeholder:s,className:c=``,ariaLabel:l,autoFocus:u=!1,readOnly:d=!1,commitOnChange:f=!1}){let{t:p}=(0,o.useTranslation)(),[m,h]=(0,r.useState)(u),[g,_]=(0,r.useState)(t),[v,y]=(0,r.useState)(!1),b=(0,r.useRef)(null),[x,S]=(0,r.useState)(t);!m&&t!==x&&(S(t),_(t)),(0,r.useEffect)(()=>{m&&b.current&&(b.current.focus(),b.current.select())},[m]);async function C(){let e=g.trim();if(e===t){h(!1);return}if(!e&&!s){_(t),h(!1);return}y(!0);try{await n(e)}catch{_(t)}finally{y(!1),h(!1)}}function w(){_(t),h(!1)}function T(e){_(e),f&&n(e)}let E=!t;if(d)return(0,i.jsx)(`span`,{className:`block w-full ${c}`,"aria-label":l,children:t||(0,i.jsx)(`span`,{className:`text-muted-foreground/80`,children:s??`—`})});let D=`w-full bg-transparent outline-none border-b transition-colors duration-200 ${c}`,O=`${D} cursor-text rounded-sm ${E?`border-dashed border-border/70 hover:border-foreground/40`:`border-transparent hover:border-border/60 focus-visible:border-border/80`} ${v?`opacity-60`:``}`,k=`${D} bento-editing`;if(!m)return(0,i.jsx)(`button`,{type:`button`,onClick:()=>h(!0),className:`${O} text-left`,"aria-label":l??p(`forms.formActions.edit`),disabled:v,children:t||(0,i.jsx)(`span`,{className:`text-muted-foreground/80`,children:s??`—`})});function A(e){if(e.key===`Escape`){e.preventDefault(),w();return}e.key===`Enter`&&(!a||e.metaKey||e.ctrlKey)&&(e.preventDefault(),C())}return a?(0,i.jsx)(`textarea`,{ref:b,value:g,onChange:e=>T(e.target.value),onBlur:C,onKeyDown:A,placeholder:s,"aria-label":l,rows:3,className:`${k} resize-none py-0.5 leading-snug`}):(0,i.jsx)(e.l,{ref:b,value:g,onChange:e=>T(e.target.value),onBlur:C,onKeyDown:A,placeholder:s,"aria-label":l,className:`${k} h-auto px-0 py-0 shadow-none focus-visible:ring-0`})}function w({titleMissing:e,dirty:t,className:n}){let{t:r}=(0,o.useTranslation)();if(!e&&!t)return null;let s=`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium normal-case leading-none tracking-normal`;return e?(0,i.jsxs)(`span`,{className:`${s} bento-status bento-status-error ${n??``}`,children:[(0,i.jsx)(a.IconAlertTriangle,{className:`size-3`}),r(`bento.saveBar.titleRequired`,{defaultValue:`Title required`})]}):(0,i.jsxs)(`span`,{className:`${s} bento-status bento-status-warn ${n??``}`,children:[(0,i.jsx)(`span`,{className:`h-1.5 w-1.5 rounded-full bento-status-dot bento-pulse`}),r(`bento.saveBar.unsaved`,{defaultValue:`Unsaved changes`})]})}function T(e){(0,r.useEffect)(()=>{let t=e.current;if(!t)return;let n=document.documentElement,r=0,i=()=>{r=0;let e=t.getBoundingClientRect().top,i=Math.max(0,Math.min(1,(160-e)/80));n.style.setProperty(`--bento-fade`,String(i)),n.classList.toggle(`bento-fade-half`,i>.5)},a=()=>{r||=requestAnimationFrame(i)};return i(),window.addEventListener(`scroll`,a,{passive:!0}),window.addEventListener(`resize`,a),()=>{r&&cancelAnimationFrame(r),window.removeEventListener(`scroll`,a),window.removeEventListener(`resize`,a),n.style.removeProperty(`--bento-fade`),n.classList.remove(`bento-fade-half`)}},[e])}function E(e,t){let n={};for(let r of Object.keys(e))Object.assign(n,{[r]:t[r]});return n}function D({entity:t,isNew:s,headlineFallback:l,eyebrow:u,listRoute:d,icon:p,tone:h,formId:g,feature:_,hasStatus:v=!1,hideIcon:y=!1,readOnly:D=!1,autosaveOnly:O=!1,badge:k,notice:A,onUpdate:j,onDelete:M,extraActions:N,children:P}){let{t:F}=(0,o.useTranslation)(),I=(0,c.useNavigate)(),[L,R]=(0,r.useState)(!1),[z,B]=(0,r.useState)({isDirty:!1,isSubmitting:!1}),V=(0,r.useRef)(null);T(V);let H={title:t.title??``,description:t.description??``,icon:t.icon??null,enabled:t.enabled??1},[U,W]=(0,r.useState)(H),[G,K]=(0,r.useState)(H);(H.title!==G.title||H.description!==G.description||H.icon!==G.icon||H.enabled!==G.enabled)&&(K(H),W(H));async function q(e){if(W(t=>({...t,...e})),s||!j)return;let n=e.title??U.title;try{await j({...t,...e}),f.toast.success(F(`forms.common.updated`,{name:n,feature:_}))}catch(t){console.error(`Failed to update entity field`,t),W(t=>({...t,...E(e,H)})),f.toast.error(F(`forms.common.notUpdated`,{name:H.title||n,feature:_}))}}async function J(){if(M){try{await M()?(f.toast.success(F(`forms.common.deleted`,{name:U.title,feature:_})),I(d)):f.toast.error(F(`forms.common.notDeleted`,{name:U.title,feature:_}))}catch(e){console.error(`Failed to delete entity`,e),f.toast.error(F(`forms.common.notDeleted`,{name:U.title,feature:_}))}R(!1)}}let Y=U.enabled===1,ee=!D,te=!(O&&!s),X=!U.title.trim(),ne=!s&&!z.isDirty,re=X||ne,Z=[...N??[],...M&&!D?[{label:F(`forms.formActions.delete`),icon:a.IconTrash,tone:`destructive`,onSelect:()=>R(!0)}]:[]];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(x,{eyebrow:(0,i.jsxs)(`span`,{className:`inline-flex items-center gap-2`,children:[(0,i.jsx)(b,{to:d,children:u}),!D&&(0,i.jsx)(w,{titleMissing:X,dirty:s||z.isDirty})]}),leading:(0,i.jsx)(S,{value:U.icon,onChange:e=>q({icon:e}),onClear:()=>q({icon:null}),defaultIcon:p,tone:h,title:U.title,description:U.description,readOnly:D||y}),title:(0,i.jsx)(C,{value:U.title,onSave:e=>q({title:e}),placeholder:l,className:`text-3xl font-semibold tracking-tight md:text-4xl`,ariaLabel:F(`forms.common.title`),autoFocus:s,commitOnChange:s,readOnly:D}),subtitle:(0,i.jsx)(C,{value:U.description,onSave:e=>q({description:e}),multiline:!0,placeholder:F(`forms.common.description`),className:`max-w-2xl text-sm text-muted-foreground`,ariaLabel:F(`forms.common.description`),commitOnChange:s,readOnly:D}),trailing:(0,i.jsxs)(i.Fragment,{children:[ee&&(0,i.jsxs)(`div`,{className:`bento-fade-out flex shrink-0 items-center gap-2`,children:[te&&(0,i.jsxs)(e.u,{type:`submit`,form:g,size:`sm`,loading:z.isSubmitting,disabled:re,children:[(0,i.jsx)(a.IconDeviceFloppy,{className:`size-4`}),F(`forms.formActions.saveChanges`)]}),(0,i.jsxs)(e.u,{type:`button`,size:`sm`,variant:`outline`,onClick:()=>I(d),children:[(0,i.jsx)(a.IconX,{className:`size-4`}),F(`forms.formActions.cancel`)]})]}),k,v&&(D?(0,i.jsxs)(`span`,{className:`flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[10px] uppercase tracking-wider ${Y?`bento-status bento-status-on`:`border-border bg-muted text-muted-foreground`}`,children:[(0,i.jsx)(`span`,{className:`h-1.5 w-1.5 rounded-full ${Y?`bento-status-dot bento-pulse`:`bg-muted-foreground/60`}`}),Y?F(`common.active`,{defaultValue:`Active`}):F(`common.idle`,{defaultValue:`Idle`})]}):(0,i.jsxs)(`button`,{type:`button`,onClick:()=>q({enabled:+!Y}),"aria-label":F(`forms.common.enabled`),title:F(Y?`common.activeToggleHint`:`common.idleToggleHint`),className:`bento-tile-clickable flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[10px] uppercase tracking-wider transition-colors duration-200 ${Y?`bento-status bento-status-on`:`border-border bg-muted text-muted-foreground hover:bg-muted/80`}`,children:[(0,i.jsx)(`span`,{className:`h-1.5 w-1.5 rounded-full ${Y?`bento-status-dot bento-pulse`:`bg-muted-foreground/60`}`}),Y?F(`common.active`,{defaultValue:`Active`}):F(`common.idle`,{defaultValue:`Idle`})]})),!s&&Z.length>0&&(0,i.jsx)(m,{actions:Z})]})}),(0,i.jsx)(`div`,{ref:V,"aria-hidden":!0,className:`h-px`}),A,!s&&M&&(0,i.jsx)(n.i,{feature:_,name:U.title,onDelete:J,open:L,setOpen:R,trigger:(0,i.jsx)(`span`,{className:`hidden`,"aria-hidden":!0})}),P({staged:U,onStateChange:B})]})}var O={LARGE:`col-span-2 row-span-2 md:col-span-2 md:row-span-2 lg:col-span-2 lg:row-span-2`,MEDIUM:`col-span-2 row-span-1 md:col-span-2 md:row-span-1 lg:col-span-2 lg:row-span-1`,SMALL:`col-span-1 row-span-1`},k={SMALL:`MEDIUM`,MEDIUM:`LARGE`,LARGE:`SMALL`};function A(e,t,n){if(!n||n.length===0)return e.map((e,n)=>({item:e,key:t(e),emphasis:n===0?`LARGE`:`MEDIUM`}));let r=new Map,i=new Map;for(let e of n)r.set(e.itemId,e.displayOrder),i.set(e.itemId,e.emphasis);return e.map((e,n)=>({item:e,key:t(e),idx:n})).sort((e,t)=>{let n=r.has(e.key)?r.get(e.key):2**53-1,i=r.has(t.key)?r.get(t.key):2**53-1;return n===i?e.idx-t.idx:n-i}).map(({item:e,key:t})=>({item:e,key:t,emphasis:i.get(t)??`MEDIUM`}))}function j(e){return e.map((e,t)=>({itemId:e.key,emphasis:e.emphasis,displayOrder:t}))}function M({to:e,emphasis:t,featured:n,defaultIcon:r,icon:a,tone:l=`indigo`,title:u,description:d,meta:f,enabled:p,hasStatus:m=!1,viewTransitionName:h}){let{t:g}=(0,o.useTranslation)(),v=_(l),y=t??(n?`LARGE`:`MEDIUM`),b=y===`LARGE`,x=y===`SMALL`,S=O[y],C=p===1,w=b?`p-6 md:p-7`:x?`p-4`:`p-5`,T=b?`h-14 w-14`:x?`h-8 w-8`:`h-9 w-9`,E=b?28:x?16:18,D=b?`text-xl md:text-2xl`:x?`text-sm`:`text-base md:text-lg`;return(0,i.jsxs)(c.Link,{to:e,className:`bento-tile bento-tile-clickable bento-glass group relative flex flex-col ${b?`gap-5`:`gap-4`} overflow-hidden ${w} ${S}`,style:h?{viewTransitionName:h}:void 0,children:[b&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{"aria-hidden":!0,className:`pointer-events-none absolute -bottom-10 -right-10 h-64 w-64 rounded-full ${v} opacity-40 blur-2xl dark:opacity-50`}),(0,i.jsx)(`div`,{"aria-hidden":!0,className:`pointer-events-none absolute right-12 top-1/3 h-32 w-32 rounded-full ${v} bento-chip-tr opacity-20 blur-2xl dark:opacity-30`})]}),(0,i.jsxs)(`div`,{className:`relative z-1 flex items-center justify-between`,children:[(0,i.jsx)(`span`,{className:`grid place-items-center rounded-2xl ${v} text-white shadow-md ${T}`,children:a?(0,i.jsx)(s.Icon,{icon:a,className:b?`size-7 text-white`:`size-4.5 text-white`}):(0,i.jsx)(r,{size:E})}),m&&(0,i.jsxs)(`span`,{className:`flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[10px] uppercase tracking-wider ${C?`bento-status bento-status-on`:`border-border bg-muted text-muted-foreground`}`,children:[(0,i.jsx)(`span`,{className:`h-1.5 w-1.5 rounded-full ${C?`bento-status-dot bento-pulse`:`bg-muted-foreground/60`}`}),C?g(`common.active`,{defaultValue:`Active`}):g(`common.idle`,{defaultValue:`Idle`})]})]}),(0,i.jsxs)(`div`,{className:`relative z-1`,children:[(0,i.jsx)(`div`,{className:`font-semibold tracking-tight ${D}`,children:u}),!x&&f&&(0,i.jsx)(`div`,{className:`mt-1 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground`,children:f}),!x&&d&&(0,i.jsx)(`p`,{className:`mt-2 text-sm text-muted-foreground`,children:d})]})]})}var N=`bento-grid grid auto-rows-[minmax(140px,auto)] grid-cols-2 gap-4 md:grid-cols-4 md:gap-5 lg:grid-cols-6`;function P({items:e,error:s,tryAgainUrl:c,listId:l,eyebrow:u,backTo:d,backLabel:f,heroIcon:p,title:m,subtitle:h,tone:g=`indigo`,headerAction:v,newRoute:y,newLabel:b,newSubtitle:S,hideNew:C=!1,itemKey:w,renderTile:T,emptyTitle:E,emptyDescription:D,layout:O}){let{t:k}=(0,o.useTranslation)(),j=_(g),[M,N]=(0,r.useState)(!1),P=(0,r.useMemo)(()=>A(e??[],w,O?.data?.entries),[e,w,O?.data?.entries]),F=!!l&&!!O&&(e?.length??0)>0;return(0,i.jsxs)(n.t,{checkIsNotUndefined:e,error:s??null,tryAgainUrl:c,children:[(0,i.jsx)(x,{eyebrow:u,backTo:d,backLabel:f,leading:(0,i.jsx)(`span`,{className:`grid h-12 w-12 place-items-center rounded-2xl ${j} text-white shadow-md`,children:(0,i.jsx)(p,{size:24})}),title:m,subtitle:h}),(v||F&&!M)&&(0,i.jsxs)(`div`,{className:`mb-4 flex flex-wrap items-center gap-2`,children:[v,F&&!M&&(0,i.jsxs)(t.c,{variant:`outline`,size:`sm`,onClick:()=>N(!0),className:`ml-auto gap-2`,children:[(0,i.jsx)(a.IconAdjustmentsHorizontal,{size:16}),k(`bento.layout.customize`,{defaultValue:`Customize layout`})]})]}),M&&l&&O?(0,i.jsx)(L,{layout:O,resolved:P,canEditGlobal:O?.data?.canEditGlobal??!1,isCustomized:O?.data?.source===`USER`,renderTile:T,chip:j,hideNew:C,newRoute:y,newLabel:b,newSubtitle:S,onClose:()=>N(!1)}):(0,i.jsx)(I,{resolved:P,renderTile:T,chip:j,hideNew:C,newRoute:y,newLabel:b,newSubtitle:S,isEmpty:e?.length===0,emptyTitle:E,emptyDescription:D})]})}function F({items:e,error:t,tryAgainUrl:r,tone:a=`indigo`,newRoute:o,newLabel:s,newSubtitle:c,hideNew:l=!1,itemKey:u,renderTile:d,emptyTitle:f,emptyDescription:p}){let m=_(a);return(0,i.jsx)(n.t,{checkIsNotUndefined:e,error:t??null,tryAgainUrl:r,children:(0,i.jsxs)(`div`,{className:N,children:[!l&&o&&s?(0,i.jsx)(V,{route:o,label:s,subtitle:c,chip:m}):null,(e??[]).map(e=>(0,i.jsx)(`span`,{className:`contents`,children:d(e)},u(e))),e?.length===0&&(0,i.jsx)(H,{title:f,description:p})]})})}function I({resolved:t,renderTile:n,chip:r,hideNew:a,newRoute:o,newLabel:s,newSubtitle:c,isEmpty:l,emptyTitle:u,emptyDescription:d}){let f=t.some(e=>e.emphasis===`SMALL`);return(0,i.jsxs)(`div`,{className:e.U(N,f&&`grid-flow-dense`),children:[!a&&(0,i.jsx)(V,{route:o,label:s,subtitle:c,chip:r}),t.map(({item:e,key:t,emphasis:r})=>(0,i.jsx)(`span`,{className:`contents`,children:n(e,r)},t)),l&&(0,i.jsx)(H,{title:u,description:d})]})}function L({layout:n,resolved:s,canEditGlobal:c,isCustomized:d,renderTile:f,chip:p,hideNew:m,newRoute:h,newLabel:g,newSubtitle:_,onClose:v}){let{t:y}=(0,o.useTranslation)(),[b,x]=(0,r.useState)(s),S=n.saving??!1,[C,w]=(0,r.useState)(!1),T=e=>async()=>{if(e){w(!1);try{await e(),v()}catch(e){console.error(`Failed to save the bento layout`,e),w(!0)}}},E=(0,l.useSensors)((0,l.useSensor)(l.PointerSensor,{activationConstraint:{distance:8}}),(0,l.useSensor)(l.KeyboardSensor));function D(e){let{active:t,over:n}=e;!n||t.id===n.id||x(e=>{let r=e.findIndex(e=>e.key===t.id),i=e.findIndex(e=>e.key===n.id);return r<0||i<0?e:(0,u.arrayMove)(e,r,i)})}function O(e,t){x(n=>n.map(n=>n.key===e?{...n,emphasis:t}:n))}let k=(0,r.useMemo)(()=>j(b),[b]),A=b.some(e=>e.emphasis===`SMALL`);return(0,i.jsxs)(`div`,{children:[(0,i.jsxs)(`div`,{className:`mb-4 flex flex-wrap items-center gap-2 rounded-2xl border border-border/60 bg-card/40 p-3 backdrop-blur-md`,children:[(0,i.jsx)(`span`,{className:`mr-auto text-sm text-muted-foreground`,children:y(`bento.layout.editHint`,{defaultValue:`Drag tiles to reorder · tap the size button to resize`})}),d&&n.onReset&&(0,i.jsxs)(t.c,{variant:`ghost`,size:`sm`,className:`gap-2`,disabled:S,onClick:T(n.onReset),children:[(0,i.jsx)(a.IconArrowBackUp,{size:16}),y(`bento.layout.reset`,{defaultValue:`Reset to default`})]}),c&&n.onSaveGlobal&&(0,i.jsxs)(t.c,{variant:`outline`,size:`sm`,className:`gap-2`,disabled:S,onClick:T(()=>n.onSaveGlobal?.(k)),children:[(0,i.jsx)(a.IconUsers,{size:16}),y(`bento.layout.saveGlobal`,{defaultValue:`Set as default for everyone`})]}),(0,i.jsxs)(t.c,{variant:`ghost`,size:`sm`,className:`gap-2`,disabled:S,onClick:v,children:[(0,i.jsx)(a.IconX,{size:16}),y(`common.cancel`,{defaultValue:`Cancel`})]}),(0,i.jsxs)(t.c,{size:`sm`,className:`gap-2`,disabled:S,onClick:T(()=>n.onSave(k)),children:[(0,i.jsx)(a.IconDeviceFloppy,{size:16}),y(`bento.layout.save`,{defaultValue:`Save layout`})]}),C&&(0,i.jsx)(`p`,{role:`alert`,className:`w-full text-sm text-destructive`,children:y(`bento.layout.saveFailed`,{defaultValue:`The layout could not be saved. Nothing has changed — try again.`})})]}),(0,i.jsx)(l.DndContext,{sensors:E,collisionDetection:l.closestCenter,onDragEnd:D,children:(0,i.jsx)(u.SortableContext,{items:b.map(e=>e.key),strategy:u.rectSortingStrategy,children:(0,i.jsxs)(`div`,{className:e.U(N,A&&`grid-flow-dense`),children:[!m&&(0,i.jsx)(V,{route:h,label:g,subtitle:_,chip:p}),b.map(({item:e,key:t,emphasis:n})=>(0,i.jsx)(B,{id:t,emphasis:n,onSetEmphasis:e=>O(t,e),children:f(e,n)},t))]})})})]})}var R=[`SMALL`,`MEDIUM`,`LARGE`],z={SMALL:{key:`bento.layout.size.small`,def:`Small`},MEDIUM:{key:`bento.layout.size.medium`,def:`Medium`},LARGE:{key:`bento.layout.size.large`,def:`Large`}};function B({id:t,emphasis:n,onSetEmphasis:r,children:s}){let{t:c}=(0,o.useTranslation)(),{attributes:l,listeners:f,setNodeRef:p,transform:m,transition:h,isDragging:g}=(0,u.useSortable)({id:t}),_={transform:d.CSS.Translate.toString(m),transition:h,opacity:g?.6:1,zIndex:g?50:void 0};return(0,i.jsxs)(`div`,{ref:p,style:_,className:e.U(`relative h-full`,O[n]),children:[(0,i.jsx)(`div`,{className:`pointer-events-none h-full select-none [&>*]:h-full [&>*]:w-full`,children:s}),(0,i.jsxs)(`div`,{className:`absolute right-2 top-2 z-10 flex items-center gap-1`,children:[(0,i.jsx)(`div`,{role:`group`,"aria-label":c(`bento.layout.sizeGroup`,{defaultValue:`Tile size`}),className:`flex items-center gap-0.5 rounded-full border border-border/60 bg-background/80 p-0.5 shadow-sm backdrop-blur`,children:R.map(t=>{let a=t===n,o=c(z[t].key,{defaultValue:z[t].def});return(0,i.jsx)(`button`,{type:`button`,onClick:()=>r(t),"aria-pressed":a,"aria-label":o,title:o,className:e.U(`grid h-6 w-6 place-items-center rounded-full text-[11px] font-semibold uppercase transition-colors`,a?`bg-primary text-primary-foreground shadow`:`text-muted-foreground hover:bg-muted`),children:o.charAt(0)},t)})}),(0,i.jsx)(`button`,{type:`button`,...l,...f,"aria-label":c(`bento.layout.dragToReorder`,{defaultValue:`Drag to reorder`}),className:`grid h-7 w-7 cursor-grab place-items-center rounded-full border border-border/60 bg-background/80 shadow-sm backdrop-blur hover:bg-background active:cursor-grabbing`,children:(0,i.jsx)(a.IconGripVertical,{size:14,className:`text-muted-foreground`})})]})]})}function V({route:e,label:t,subtitle:n,chip:r}){let{t:s}=(0,o.useTranslation)();return(0,i.jsxs)(c.Link,{to:e,className:`bento-tile bento-tile-clickable col-span-2 row-span-1 flex flex-col gap-3 rounded-3xl border-2 border-dashed border-border/60 bg-card/30 p-5 backdrop-blur-md bento-new-tile hover:bg-card/50 md:col-span-2 md:row-span-1 lg:col-span-2 lg:row-span-1`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,i.jsx)(`span`,{className:`bento-pulse grid h-10 w-10 place-items-center rounded-2xl ${r} text-white shadow-md`,children:(0,i.jsx)(a.IconPlus,{size:20})}),(0,i.jsx)(`span`,{className:`text-[11px] uppercase tracking-wider text-muted-foreground`,children:s(`forms.formActions.new`,{defaultValue:`New`})})]}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`div`,{className:`text-base font-semibold tracking-tight md:text-lg`,children:(0,i.jsx)(`span`,{className:`${r} bg-clip-text text-transparent`,children:t})}),n&&(0,i.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:n})]})]})}function H({title:e,description:t}){return(0,i.jsx)(y,{icon:a.IconSparkles,title:e,description:t,align:`start`,className:`col-span-2 row-span-2 justify-end md:col-span-4`})}function U({title:t,badges:n,actions:r,onCancel:s,loading:c,disabled:l,dirty:u,titleMissing:d}){let{t:f}=(0,o.useTranslation)();return(0,i.jsxs)(`div`,{className:`bento-glass flex items-center justify-between gap-4 rounded-2xl px-4 py-3 shadow-md backdrop-blur-xl`,children:[(0,i.jsxs)(`div`,{className:`flex min-w-0 items-center gap-3`,children:[t&&(0,i.jsx)(`p`,{className:`truncate text-base font-semibold tracking-tight md:text-lg`,children:t}),(0,i.jsx)(w,{titleMissing:d,dirty:u}),n&&(0,i.jsx)(`div`,{className:`flex shrink-0 items-center gap-1.5`,children:n})]}),(0,i.jsx)(`div`,{className:`flex shrink-0 gap-2`,children:r??(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.u,{type:`submit`,size:`sm`,loading:c,disabled:l,children:[(0,i.jsx)(a.IconDeviceFloppy,{className:`size-4`}),f(`forms.formActions.saveChanges`)]}),s&&(0,i.jsxs)(e.u,{type:`button`,variant:`outline`,size:`sm`,onClick:s,children:[(0,i.jsx)(a.IconX,{className:`size-4`}),f(`forms.formActions.cancel`)]})]})})]})}function W({children:e}){return(0,i.jsx)(`span`,{className:`rounded-full border border-border/60 bg-card/50 px-2 py-0.5 text-[10px] uppercase tracking-wider text-muted-foreground backdrop-blur`,children:e})}U.Badge=W;function G(e){let t=(0,r.useRef)(null);return T(t),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{ref:t,"aria-hidden":!0,className:`h-px`}),(0,i.jsx)(`div`,{"aria-hidden":!0,className:`bento-save-bar-spacer`}),(0,i.jsx)(`div`,{className:`bento-fade-in fixed inset-x-0 top-20 z-20 mx-auto w-full max-w-7xl px-4 md:px-8`,children:(0,i.jsx)(U,{...e})})]})}function K({eyebrow:t,backTo:n,backLabel:r,leading:s,title:c,subtitle:l,trailing:u,onCancel:d,actions:f,loading:p,dirty:m,titleMissing:h,saveDisabled:g,stickyTitle:_,stickyBadges:v}){let{t:y}=(0,o.useTranslation)(),S=g??(!!h||!m);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(x,{eyebrow:n===void 0?t:(0,i.jsx)(b,{to:n,children:r}),leading:s,title:c,subtitle:l,trailing:(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:`bento-fade-out flex shrink-0 items-center gap-2`,children:f??(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.u,{type:`submit`,size:`sm`,loading:p,disabled:S,children:[(0,i.jsx)(a.IconDeviceFloppy,{className:`size-4`}),y(`forms.formActions.saveChanges`)]}),(0,i.jsxs)(e.u,{type:`button`,variant:`outline`,size:`sm`,onClick:d,children:[(0,i.jsx)(a.IconX,{className:`size-4`}),y(`forms.formActions.cancel`)]})]})}),u]})}),(0,i.jsx)(G,{title:_,badges:v,actions:f,onCancel:d,loading:p,disabled:S,dirty:m,titleMissing:h})]})}function q({icon:e,tone:t,title:n,description:r,children:a,trailing:o,as:s=`h2`}){return(0,i.jsxs)(`section`,{className:`bento-tile bento-glass relative flex flex-col gap-5 overflow-hidden rounded-3xl p-5 md:p-6`,children:[(0,i.jsxs)(`header`,{className:`flex items-start justify-between gap-3`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,i.jsx)(`span`,{className:`grid h-10 w-10 place-items-center rounded-2xl text-white shadow-md ${_(t)}`,children:(0,i.jsx)(e,{size:20})}),(0,i.jsxs)(`div`,{className:`flex flex-col gap-0.5`,children:[(0,i.jsx)(s,{className:`text-base font-semibold tracking-tight md:text-lg`,children:n}),r&&(0,i.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:r})]})]}),o&&(0,i.jsx)(`div`,{className:`shrink-0`,children:o})]}),(0,i.jsx)(`div`,{className:`flex flex-col gap-5`,children:a})]})}var J=480;function Y(e){return window.addEventListener(`scroll`,e,{passive:!0}),()=>window.removeEventListener(`scroll`,e)}function ee(){return window.scrollY>J}function te(){let e=(0,r.useSyncExternalStore)(Y,ee,()=>!1);return(0,i.jsx)(`button`,{type:`button`,"aria-label":`Back to top`,tabIndex:e?0:-1,onClick:()=>window.scrollTo({top:0,behavior:`smooth`}),className:`fixed bottom-6 right-6 z-40 grid h-11 w-11 place-items-center rounded-full border border-border/60 bg-card/80 text-foreground shadow-lg backdrop-blur-xl transition-all duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] hover:-translate-y-0.5 hover:shadow-xl active:scale-95 ${e?`translate-y-0 scale-100 opacity-100`:`pointer-events-none translate-y-4 scale-90 opacity-0`}`,children:(0,i.jsx)(a.IconArrowUp,{size:18})})}function X(e){return e.bentoRoute??e.fallbackRoute}function ne({open:t,onOpenChange:n,items:s}){let{t:l}=(0,o.useTranslation)(),u=(0,c.useNavigate)(),[d,f]=(0,r.useState)(``),[p,m]=(0,r.useState)(0),h=(0,r.useRef)(null),g=(0,r.useMemo)(()=>{let e=d.trim().toLowerCase(),t=s.map(e=>({item:e,label:l(e.titleKey),description:l(e.descriptionKey)}));if(!e)return t;let n=[],r=[];for(let i of t)i.label.toLowerCase().includes(e)?n.push(i):i.description.toLowerCase().includes(e)&&r.push(i);return[...n,...r]},[s,d,l]),[_,v]=(0,r.useState)(t);t!==_&&(v(t),t&&(f(``),m(0)));let y=g.length===0?0:g.length-1;p>y&&m(y),(0,r.useEffect)(()=>{(h.current?.querySelector(`[data-index="${p}"]`))?.scrollIntoView({block:`nearest`})},[p]);function b(e){n(!1),u(X(e))}function x(e){if(e.key===`ArrowDown`)e.preventDefault(),m(e=>g.length===0?0:(e+1)%g.length);else if(e.key===`ArrowUp`)e.preventDefault(),m(e=>g.length===0?0:(e-1+g.length)%g.length);else if(e.key===`Enter`){e.preventDefault();let t=g[p];t&&b(t.item)}}return(0,i.jsx)(e.D,{open:t,onOpenChange:n,children:(0,i.jsxs)(e.k,{showCloseButton:!1,className:`top-[15%] max-w-xl translate-y-0 gap-0 overflow-hidden p-0`,onKeyDown:x,children:[(0,i.jsx)(e.F,{className:`sr-only`,children:l(`bento.palette.title`,{defaultValue:`Command palette`})}),(0,i.jsx)(e.A,{className:`sr-only`,children:l(`bento.palette.description`,{defaultValue:`Search and jump to any area`})}),(0,i.jsxs)(`div`,{className:`flex items-center gap-3 border-b border-border/60 px-4`,children:[(0,i.jsx)(a.IconSearch,{size:18,className:`shrink-0 text-muted-foreground`}),(0,i.jsx)(`input`,{autoFocus:!0,type:`text`,role:`combobox`,"aria-expanded":`true`,"aria-controls":`bento-palette-list`,"aria-activedescendant":g[p]?`bento-palette-opt-${p}`:void 0,value:d,onChange:e=>f(e.target.value),placeholder:l(`bento.palette.placeholder`,{defaultValue:`Search areas…`}),className:`h-12 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground`})]}),(0,i.jsxs)(`div`,{ref:h,id:`bento-palette-list`,role:`listbox`,"aria-label":l(`bento.palette.title`,{defaultValue:`Command palette`}),className:`max-h-80 overflow-y-auto p-2`,children:[g.length===0&&(0,i.jsx)(`p`,{className:`px-3 py-6 text-center text-sm text-muted-foreground`,children:l(`bento.palette.noResults`,{defaultValue:`No matches`})}),g.map(({item:e,label:t},n)=>{let r=!e.bentoRoute,o=n===p,s=e.icon;return(0,i.jsxs)(`button`,{type:`button`,id:`bento-palette-opt-${n}`,"data-index":n,role:`option`,"aria-selected":o?`true`:`false`,onMouseEnter:()=>m(n),onClick:()=>b(e),className:`flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm transition-colors ${o?`bg-accent text-accent-foreground`:`text-foreground`}`,children:[(0,i.jsx)(s,{size:18,className:`shrink-0 text-muted-foreground`}),(0,i.jsx)(`span`,{className:`flex-1 truncate`,children:t}),r?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(a.IconExternalLink,{"aria-hidden":!0,size:15,className:`shrink-0 text-muted-foreground/70`}),(0,i.jsx)(`span`,{className:`sr-only`,children:l(`bento.palette.opensConsole`,{defaultValue:`Opens in console`})})]}):o&&(0,i.jsx)(a.IconArrowRight,{"aria-hidden":!0,size:15,className:`shrink-0 text-muted-foreground`})]},e.id)})]})]})})}function re({open:t,onOpenChange:n,isMac:r}){let{t:s}=(0,o.useTranslation)(),c=r?`⌘`:`Ctrl`,l=[{heading:s(`bento.shortcuts.global`,{defaultValue:`Global`}),rows:[{keys:[c,`K`],label:s(`bento.palette.open`,{defaultValue:`Open command palette`})},{keys:[`?`],label:s(`bento.shortcuts.openGuide`,{defaultValue:`Show keyboard shortcuts`})}]},{heading:s(`bento.shortcuts.palette`,{defaultValue:`Command palette`}),rows:[{keys:[`↑`,`↓`],label:s(`bento.shortcuts.navigate`,{defaultValue:`Move between results`})},{keys:[`↵`],label:s(`bento.shortcuts.openSelected`,{defaultValue:`Open the selected area`})},{keys:[`Esc`],label:s(`bento.shortcuts.dismiss`,{defaultValue:`Close the palette or a dialog`})}]}];return(0,i.jsx)(e.D,{open:t,onOpenChange:n,children:(0,i.jsxs)(e.k,{className:`max-w-md`,children:[(0,i.jsxs)(e.M,{children:[(0,i.jsxs)(e.F,{className:`flex items-center gap-2`,children:[(0,i.jsx)(a.IconKeyboard,{size:20,className:`bento-accent-icon`}),s(`bento.shortcuts.title`,{defaultValue:`Keyboard shortcuts`})]}),(0,i.jsx)(e.A,{children:s(`bento.shortcuts.description`,{defaultValue:`Move around Turing without leaving the keyboard.`})})]}),(0,i.jsx)(`div`,{className:`flex flex-col gap-5`,children:l.map(e=>(0,i.jsxs)(`section`,{children:[(0,i.jsx)(`h3`,{className:`mb-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground`,children:e.heading}),(0,i.jsx)(`ul`,{className:`flex flex-col gap-1.5`,children:e.rows.map(e=>(0,i.jsxs)(`li`,{className:`flex items-center justify-between gap-4`,children:[(0,i.jsx)(`span`,{className:`text-sm text-foreground`,children:e.label}),(0,i.jsx)(`span`,{className:`flex shrink-0 items-center gap-1`,children:e.keys.map(e=>(0,i.jsx)(`kbd`,{className:`inline-flex min-w-6 items-center justify-center rounded-md border border-border/60 bg-muted px-1.5 py-0.5 text-[11px] font-medium tracking-wide`,children:e},e))})]},e.label))})]},e.heading))})]})})}function Z(e,t){return e===t||e.startsWith(`${t}/`)}function ie(e,t){return t.section.areaRoute&&Z(e,t.section.areaRoute)?!0:t.items.some(t=>t.bentoRoute&&Z(e,t.bentoRoute))}function ae({groups:t,homeRoute:n,homeAliases:s,homeLabel:l}){let{t:u}=(0,o.useTranslation)(),{pathname:d}=(0,c.useLocation)(),f=(0,r.useMemo)(()=>t.filter(e=>e.section.areaRoute),[t]),p=d===n||(s?.includes(d)??!1);return(0,i.jsx)(e.o,{delayDuration:200,children:(0,i.jsxs)(`nav`,{"aria-label":u(`bento.nav.label`,{defaultValue:`Primary`}),className:`fixed inset-y-0 left-0 z-40 hidden w-16 flex-col items-center gap-1 overflow-y-auto overflow-x-hidden border-r border-border/40 bg-background/55 pt-20 pb-4 backdrop-blur-xl backdrop-saturate-150 md:flex`,children:[(0,i.jsx)(oe,{to:n,icon:a.IconHome,label:l??u(`home.title`,{defaultValue:`Home`}),active:p}),f.length>0&&(0,i.jsx)(`span`,{"aria-hidden":!0,className:`my-1 h-px w-6 bg-border/60`}),f.map(e=>(0,i.jsx)(oe,{to:e.section.areaRoute,icon:e.section.icon,label:u(e.section.labelKey),active:ie(d,e)},e.section.id))]})})}function oe({to:t,icon:n,label:r,active:a}){return(0,i.jsxs)(e.i,{children:[(0,i.jsx)(e.s,{asChild:!0,children:(0,i.jsx)(c.Link,{to:t,"aria-label":r,"aria-current":a?`page`:void 0,className:`bento-tile-clickable grid h-11 w-11 shrink-0 place-items-center rounded-2xl border transition-colors duration-200 ${a?`bento-rail-active`:`border-transparent text-muted-foreground hover:border-border/60 hover:bg-card/60 hover:text-foreground`}`,children:(0,i.jsx)(n,{size:20})})}),(0,i.jsx)(e.a,{side:`right`,children:r})]})}function se({accountRoute:n,logoutUrl:r,organizationsRoute:s,tenantAdminRoute:l,onOpenShortcuts:u,onReplayTour:d}){let{user:f,status:p}=t.n(),{t:m}=(0,o.useTranslation)(),h=(0,c.useNavigate)(),g=`${f.firstName??``} ${f.lastName??``}`.trim()||f.username||``;return p===`loading`?(0,i.jsx)(`div`,{className:`h-9 w-9 rounded-full bg-muted/40`,"aria-hidden":!0}):(0,i.jsxs)(e.f,{children:[(0,i.jsx)(e.E,{asChild:!0,children:(0,i.jsx)(`button`,{type:`button`,title:g||f.username,className:`bento-tile-clickable cursor-pointer rounded-full p-0.5 ring-1 ring-border/60 outline-none transition-shadow duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] bento-ring hover:ring-2 focus-visible:ring-2 focus-visible:ring-ring`,children:(0,i.jsx)(t.r,{givenName:f.firstName,familyName:f.lastName,name:g||f.username,src:f.avatarUrl||void 0,alt:f.username})})}),(0,i.jsxs)(e.m,{align:`end`,sideOffset:10,className:`bento-dropdown min-w-64 p-2`,children:[(0,i.jsx)(e._,{className:`p-0 font-normal`,children:(0,i.jsxs)(`div`,{className:`flex items-center gap-3 rounded-xl px-2 py-2 text-left text-sm`,children:[(0,i.jsx)(`span`,{className:`rounded-full p-0.5 ring-1 ring-border/60`,children:(0,i.jsx)(t.r,{givenName:f.firstName,familyName:f.lastName,name:g||f.username,src:f.avatarUrl||void 0,alt:f.username})}),(0,i.jsxs)(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[g&&(0,i.jsx)(`span`,{className:`truncate font-medium`,children:g}),f.email&&(0,i.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:f.email})]})]})}),(0,i.jsx)(e.x,{className:`my-1.5 bg-border/50`}),(0,i.jsxs)(e.h,{children:[(0,i.jsxs)(e.g,{onSelect:()=>h(n),className:`bento-dropdown-item cursor-pointer gap-2 px-3 py-2`,children:[(0,i.jsx)(a.IconUserCircle,{size:18}),m(`nav.account`)]}),s&&(0,i.jsxs)(e.g,{onSelect:()=>h(s),className:`bento-dropdown-item cursor-pointer gap-2 px-3 py-2`,children:[(0,i.jsx)(a.IconBuildingCommunity,{size:18}),m(`nav.organizations`,{defaultValue:`Organizations`})]}),l&&(0,i.jsxs)(e.g,{onSelect:()=>h(l),className:`bento-dropdown-item cursor-pointer gap-2 px-3 py-2`,children:[(0,i.jsx)(a.IconBuildingSkyscraper,{size:18}),m(`nav.tenantAdmin`,{defaultValue:`Tenant administration`})]})]}),(u||d)&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.x,{className:`my-1.5 bg-border/50`}),(0,i.jsxs)(e.h,{children:[d&&(0,i.jsxs)(e.g,{onSelect:()=>d(),className:`bento-dropdown-item cursor-pointer gap-2 px-3 py-2`,children:[(0,i.jsx)(a.IconSparkles,{size:18}),m(`bento.tour.replay`,{defaultValue:`Take the tour`})]}),u&&(0,i.jsxs)(e.g,{onSelect:()=>u(),className:`bento-dropdown-item cursor-pointer gap-2 px-3 py-2`,children:[(0,i.jsx)(a.IconKeyboard,{size:18}),m(`bento.shortcuts.title`,{defaultValue:`Keyboard shortcuts`})]})]})]}),(0,i.jsx)(e.x,{className:`my-1.5 bg-border/50`}),(0,i.jsxs)(e.g,{onSelect:()=>{globalThis.location.href=r},className:`bento-dropdown-item cursor-pointer gap-2 px-3 py-2 bento-item-danger`,children:[(0,i.jsx)(a.IconLogout,{size:18}),m(`nav.logOut`)]})]})]})}var Q=(0,r.createContext)(`console`);function ce({chrome:e,children:t}){return(0,i.jsx)(Q.Provider,{value:e,children:t})}function le(){return(0,r.useContext)(Q)}var ue={blue:`blue`,violet:`violet`,emerald:`emerald`,amber:`amber`,rose:`rose`,slate:`slate`,cyan:`blue`,orange:`amber`};function $({variant:e=`blue`,defaultOpen:n,className:a,children:o}){let s=(0,r.useContext)(Q),c,l;return s===`bento`&&r.Children.forEach(o,e=>{if(!(0,r.isValidElement)(e))return;let{type:n}=e;n===t.o.Header||n===t.o.StaticHeader?c=e.props:n===t.o.Content&&(l=e.props.children)}),s===`bento`&&c?(0,i.jsx)(q,{icon:c.icon,tone:ue[e]??`blue`,title:c.title,description:c.description,children:l}):(0,i.jsx)(t.o,{variant:e,defaultOpen:n,className:a,children:o})}$.Header=t.o.Header,$.StaticHeader=t.o.StaticHeader,$.Content=t.o.Content;var de=`bento-grid grid auto-rows-[minmax(140px,auto)] grid-cols-2 gap-4 md:grid-cols-4 md:gap-5 lg:grid-cols-6`;function fe({eyebrow:e,title:t,description:n,titleHref:r,children:o,gridClassName:s=de}){let l=(0,i.jsx)(`h2`,{className:`text-xl font-semibold tracking-tight md:text-2xl`,children:t});return(0,i.jsxs)(`section`,{className:`mb-8 md:mb-10`,children:[(0,i.jsxs)(`header`,{className:`bento-shell-header mb-4 flex flex-col gap-0.5`,children:[e&&(0,i.jsx)(`span`,{className:`text-xs uppercase tracking-[0.18em] text-muted-foreground`,children:e}),r?(0,i.jsxs)(c.Link,{to:r,className:`group inline-flex w-fit items-center gap-1 text-foreground transition-colors hover:text-primary`,children:[l,(0,i.jsx)(a.IconChevronRight,{size:20,className:`text-muted-foreground transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-1`})]}):l,n&&(0,i.jsx)(`p`,{className:`max-w-2xl text-sm text-muted-foreground`,children:n})]}),(0,i.jsx)(`div`,{className:s,children:o})]})}function pe({to:e,onClick:t,disabled:n=!1,disabledHint:r,icon:o,tone:s,eyebrow:l,title:u,span:d,featured:f=!1,children:p}){let m=!n&&!!(e||t),h=f?`h-14 w-14 rounded-2xl`:`h-9 w-9 rounded-2xl`,g=f?28:18,v=f?`text-xl font-semibold tracking-tight md:text-2xl`:`text-base font-semibold tracking-tight md:text-lg`,y=(0,i.jsxs)(i.Fragment,{children:[f&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{"aria-hidden":!0,className:`pointer-events-none absolute -bottom-10 -right-10 h-64 w-64 rounded-full ${_(s)} opacity-40 blur-2xl dark:opacity-50`}),(0,i.jsx)(`div`,{"aria-hidden":!0,className:`pointer-events-none absolute right-12 top-1/3 h-32 w-32 rounded-full ${_(s)} bento-chip-tr opacity-20 blur-2xl dark:opacity-30`})]}),(0,i.jsxs)(`div`,{className:`relative z-1 flex items-center justify-between`,children:[(0,i.jsx)(`span`,{className:`grid place-items-center ${_(s)} text-white shadow-md ${h}`,children:(0,i.jsx)(o,{size:g})}),m&&(0,i.jsx)(a.IconChevronRight,{size:f?18:16,className:`text-muted-foreground transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-1`})]}),(0,i.jsxs)(`div`,{className:`relative z-1`,children:[(0,i.jsx)(`div`,{className:`text-[11px] uppercase tracking-wider text-muted-foreground`,children:l}),(0,i.jsx)(`div`,{className:`mt-0.5 ${v}`,children:u}),p&&(0,i.jsx)(`div`,{className:`mt-2`,children:p})]})]}),b=`bento-tile bento-glass group relative flex flex-col ${f?`gap-5`:`gap-4`} overflow-hidden text-left ${f?`p-6 md:p-7`:`p-5`} ${d}${m?` bento-tile-clickable`:``}${n?` cursor-not-allowed opacity-60`:``}`;return n?(0,i.jsx)(`div`,{className:b,"aria-disabled":`true`,title:r,children:y}):e?(0,i.jsx)(c.Link,{to:e,className:b,children:y}):t?(0,i.jsx)(`button`,{type:`button`,onClick:t,className:`${b} w-full`,children:y}):(0,i.jsx)(`div`,{className:b,children:y})}exports.AdaptiveSectionCard=$,exports.BENTO_EMPHASIS_NEXT=k,exports.BENTO_EMPHASIS_SPAN=O,exports.BENTO_TONES=g,exports.BENTO_TONE_CLASS=h,exports.BentoActionsMenu=m,exports.BentoBackLink=b,exports.BentoBackToTop=te,exports.BentoCommandPalette=ne,exports.BentoCountTile=v,exports.BentoEmptyState=y,exports.BentoEntityShell=D,exports.BentoEntityTile=M,exports.BentoFormHero=K,exports.BentoFormSection=q,exports.BentoHero=x,exports.BentoHeroIconPicker=S,exports.BentoInlineEdit=C,exports.BentoListPage=P,exports.BentoNavRail=ae,exports.BentoSaveBar=U,exports.BentoScrollSaveBar=G,exports.BentoSection=fe,exports.BentoShortcutsDialog=re,exports.BentoStatusMarker=w,exports.BentoTile=pe,exports.BentoTileGrid=F,exports.BentoUserMenu=se,exports.SectionCardChromeProvider=ce,exports.bentoChipClass=_,exports.bentoNavTarget=X,exports.resolveBentoLayout=A,exports.toBentoLayoutEntries=j,exports.useBentoScrollFade=T,exports.useSectionChrome=le;

package/dist/bento.css

@@ -0,0 +1,442 @@
+/*
+ * Bento UI — the motion language the layer is built on.
+ *
+ * `--bento-spring` is the curve every tile uses for press, hover and route
+ * transitions, so the whole surface shares one physical sensation rather than
+ * three. Every rule this stylesheet gains keys off these three properties, which
+ * is why they arrive with the subpath rather than with the first component.
+ *
+ * Imported from `@viglet/viglet-design-system/bento.css`. It is listed in the
+ * package's `sideEffects`, so a bundler keeps it while still tree-shaking the
+ * JavaScript beside it.
+ *
+ * It reads `--primary`, `--card`, `--popover` and `--border`, which the preset
+ * aliases from its own `--vg-*` tokens. So the frosted surfaces take the
+ * product's palette rather than carrying one — but a consumer importing this
+ * without `@viglet/viglet-design-system/preset` gets surfaces with no colour.
+ */
+
+@layer base {
+  :root {
+    --bento-spring: cubic-bezier(0.32, 0.72, 0, 1);
+    --bento-soft: cubic-bezier(0.22, 1, 0.36, 1);
+    --bento-radius: 1.5rem;
+  }
+}
+
+/*
+ * The tonal icon chip.
+ *
+ * A tone used to be a pair of Tailwind colour classes baked into the component,
+ * which meant the palette was the package's rather than the product's: Turing is
+ * blue and Shio is orange, and a shared component naming its own colours makes
+ * one of the two look wrong. Now a tone sets two custom properties and the chip
+ * reads them, so re-keying a tone is redefining `--vg-bento-tone-<name>-from`
+ * and `-to` in the preset — no component is forked to do it.
+ *
+ * A product can also set `--bento-tone-from` / `--bento-tone-to` directly on any
+ * subtree to tint one region without touching the tokens at all.
+ */
+.bento-chip {
+  background-image: linear-gradient(
+    var(--bento-tone-angle, to bottom right),
+    var(--bento-tone-from, var(--vg-bento-tone-slate-from)),
+    var(--bento-tone-to, var(--vg-bento-tone-slate-to))
+  );
+}
+
+/* The tile's upper glow runs the other way, so the two blooms behind one tile
+   do not read as a single band. Direction is a property for the same reason the
+   colours are: a product changes it without forking the component. */
+.bento-chip-tr {
+  --bento-tone-angle: to top right;
+}
+
+.bento-tone-blue {
+  --bento-tone-from: var(--vg-bento-tone-blue-from);
+  --bento-tone-to: var(--vg-bento-tone-blue-to);
+}
+
+.bento-tone-indigo {
+  --bento-tone-from: var(--vg-bento-tone-indigo-from);
+  --bento-tone-to: var(--vg-bento-tone-indigo-to);
+}
+
+.bento-tone-violet {
+  --bento-tone-from: var(--vg-bento-tone-violet-from);
+  --bento-tone-to: var(--vg-bento-tone-violet-to);
+}
+
+.bento-tone-emerald {
+  --bento-tone-from: var(--vg-bento-tone-emerald-from);
+  --bento-tone-to: var(--vg-bento-tone-emerald-to);
+}
+
+.bento-tone-amber {
+  --bento-tone-from: var(--vg-bento-tone-amber-from);
+  --bento-tone-to: var(--vg-bento-tone-amber-to);
+}
+
+.bento-tone-rose {
+  --bento-tone-from: var(--vg-bento-tone-rose-from);
+  --bento-tone-to: var(--vg-bento-tone-rose-to);
+}
+
+.bento-tone-slate {
+  --bento-tone-from: var(--vg-bento-tone-slate-from);
+  --bento-tone-to: var(--vg-bento-tone-slate-to);
+}
+
+/* ===========================================================================
+ * The surface and the lift.
+ *
+ * Moved verbatim from the product that grew it. The animation is what makes a
+ * page read as bento, and until now no second console could reach it.
+ * ========================================================================= */
+
+@keyframes bento-tile-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.96);
+    filter: blur(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+}
+
+@keyframes bento-shell-in {
+  from { opacity: 0; transform: translateY(-10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* The glow reads a property, so a product re-keys it like everything else here.
+   `--bento-pulse` on any subtree overrides the token for that region. */
+@keyframes bento-pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 0 0 color-mix(in oklab, var(--bento-pulse, var(--vg-bento-pulse)) 0%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 12px color-mix(in oklab, var(--bento-pulse, var(--vg-bento-pulse)) 15%, transparent);
+  }
+}
+
+.bento-tile {
+  position: relative;
+  border-radius: var(--bento-radius);
+  transition:
+    transform     420ms var(--bento-spring),
+    box-shadow    420ms var(--bento-spring),
+    border-color  300ms var(--bento-soft),
+    background    300ms var(--bento-soft);
+  will-change: transform, box-shadow;
+  animation: bento-tile-in 600ms var(--bento-spring) both;
+}
+
+.bento-tile:hover {
+  transform: translateY(-3px);
+  box-shadow:
+    0 18px 40px -18px color-mix(in oklab, var(--primary) 40%, transparent),
+    0 4px 12px -4px rgba(0,0,0,0.08);
+}
+
+/* iOS press: tile compresses then springs back when released */
+.bento-tile:active { transform: translateY(0) scale(0.985); }
+
+.bento-tile-clickable { cursor: pointer; }
+
+/* Stagger entry: nth-child gives each tile a tiny delay */
+.bento-grid > .bento-tile:nth-child(1) { animation-delay:  20ms; }
+.bento-grid > .bento-tile:nth-child(2) { animation-delay:  60ms; }
+.bento-grid > .bento-tile:nth-child(3) { animation-delay: 100ms; }
+.bento-grid > .bento-tile:nth-child(4) { animation-delay: 140ms; }
+.bento-grid > .bento-tile:nth-child(5) { animation-delay: 180ms; }
+.bento-grid > .bento-tile:nth-child(6) { animation-delay: 220ms; }
+.bento-grid > .bento-tile:nth-child(7) { animation-delay: 260ms; }
+.bento-grid > .bento-tile:nth-child(8) { animation-delay: 300ms; }
+.bento-grid > .bento-tile:nth-child(9) { animation-delay: 340ms; }
+.bento-grid > .bento-tile:nth-child(n+10) { animation-delay: 380ms; }
+
+.bento-shell-header {
+  animation: bento-shell-in 380ms var(--bento-soft) both;
+}
+
+.bento-pulse {
+  animation: bento-pulse-glow 2.4s var(--bento-soft) infinite;
+}
+
+/* Ambient gradient blobs that drift into view behind the tiles. */
+.bento-blob   { animation: bento-shell-in 1200ms var(--bento-spring) both; }
+.bento-blob-2 { animation: bento-shell-in 1400ms var(--bento-spring) 120ms both; }
+.bento-blob-3 { animation: bento-shell-in 1600ms var(--bento-spring) 240ms both; }
+
+/* Save bar entrance — used when a form becomes dirty and the bar slides in.
+   Shorter and subtler than `.bento-shell-header` so it doesn't compete with
+   content already on the page. */
+.bento-save-bar-enter {
+  animation: bento-shell-in 280ms var(--bento-spring) both;
+}
+
+/*
+ * Scroll-linked "header -> sticky bar" handoff.
+ *
+ * The page shell sets `--bento-fade` (0..1) on `<html>` from a
+ * requestAnimationFrame loop — CSS inheritance distributes it everywhere, so a
+ * page opts in by using one of these classes and never re-renders for it.
+ *
+ *   - 0 = at the top of the page (hero in full force)
+ *   - 1 = scrolled past the morph range (sticky bar fully settled)
+ *
+ * `bento-fade-out`: hero-anchored elements that fade away as scroll advances.
+ * `bento-fade-in`: the fixed sticky-bar wrapper that fades in as it advances.
+ *
+ * `bento-fade-half` is toggled on `<html>` once progress passes 0.5, and swaps
+ * pointer-events so the fading-out elements stop catching clicks meant for the
+ * fading-in ones after they have crossed the visual midpoint.
+ */
+.bento-fade-out {
+  opacity: calc(1 - var(--bento-fade, 0));
+  transform: translateY(calc(var(--bento-fade, 0) * -8px));
+}
+
+.bento-fade-in {
+  opacity: var(--bento-fade, 0);
+  transform: translateY(calc((1 - var(--bento-fade, 0)) * -8px));
+  pointer-events: none;
+}
+
+.bento-fade-half .bento-fade-out { pointer-events: none; }
+.bento-fade-half .bento-fade-in  { pointer-events: auto; }
+
+/* Layout spacer that grows with scroll progress. Reserves space in form flow
+   for the fixed save bar so content slides down gradually as it materialises. */
+.bento-save-bar-spacer {
+  height: calc(var(--bento-fade, 0) * 4rem); /* 0 to 64px */
+}
+
+/* ---------------------------------------------------------------------------
+ * Bento dropdown surface — the frosted-glass tile aesthetic, for a popover.
+ * ------------------------------------------------------------------------- */
+.bento-dropdown {
+  border-radius: calc(var(--bento-radius) - 0.25rem);
+  background: color-mix(in oklab, var(--popover) 78%, transparent);
+  -webkit-backdrop-filter: blur(22px) saturate(180%);
+  backdrop-filter: blur(22px) saturate(180%);
+  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
+  box-shadow:
+    0 24px 60px -24px rgba(0, 0, 0, 0.35),
+    0 4px 14px -4px rgba(0, 0, 0, 0.12);
+}
+
+.bento-dropdown-item {
+  border-radius: 0.75rem;
+  transition:
+    background 200ms var(--bento-soft),
+    transform  200ms var(--bento-spring);
+}
+
+.bento-dropdown-item:active { transform: scale(0.98); }
+
+/* Frosted-glass surface — works in light and dark through the design tokens */
+.bento-glass {
+  background: color-mix(in oklab, var(--card) 72%, transparent);
+  -webkit-backdrop-filter: blur(18px) saturate(180%);
+  backdrop-filter: blur(18px) saturate(180%);
+  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
+}
+
+/* View-Transitions API: smooth tile-to-detail morph when navigating */
+@supports (view-transition-name: bento-hero) {
+  .bento-vt-hero { view-transition-name: bento-hero; }
+}
+
+::view-transition-old(bento-hero),
+::view-transition-new(bento-hero) {
+  animation-duration: 520ms;
+  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* ---------------------------------------------------------------------------
+ * Reduced motion.
+ *
+ * Every animation this stylesheet starts is answered here, in one block rather
+ * than three, so "did we cover that one" is a question with a single place to
+ * look. src/styles/reduced-motion.test.ts fails the build if a stylesheet
+ * animates without asking.
+ * ------------------------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .bento-tile,
+  .bento-shell-header,
+  .bento-pulse,
+  .bento-save-bar-enter,
+  .bento-blob,
+  .bento-blob-2,
+  .bento-blob-3 {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .bento-tile:hover { transform: none; }
+
+  .bento-dropdown-item { transition: none !important; }
+  .bento-dropdown-item:active { transform: none; }
+
+  /* The hero-to-save-bar morph is driven by the --bento-fade custom property
+     rather than by a CSS animation, so the opacity swap still works; only the
+     translate is neutralised. */
+  .bento-fade-out,
+  .bento-fade-in {
+    transform: none !important;
+  }
+
+  /* The tile-to-detail View-Transitions morph is decorative, so it becomes an
+     instant swap rather than a 520ms cross-fade. It was once the single
+     animation outside this guard. */
+  ::view-transition-old(bento-hero),
+  ::view-transition-new(bento-hero) {
+    animation: none !important;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * Status intents.
+ *
+ * The "Active" pill, the warning and error markers, and the destructive item in
+ * an actions menu. These were Tailwind colour classes inside the components,
+ * which is the same failure the tones had: a shared component naming colours
+ * the product cannot re-key. The tint percentages are the ones the classes
+ * encoded — border at 40%, surface at 10% — so nothing shifted on the way here.
+ * ------------------------------------------------------------------------- */
+.bento-status {
+  border-color: color-mix(in oklab, var(--bento-status-mark) 40%, transparent);
+  background-color: color-mix(in oklab, var(--bento-status-mark) 10%, transparent);
+  color: var(--bento-status-text);
+}
+
+/* The dot inside a pill, and any bare mark that takes the intent colour. */
+.bento-status-dot {
+  background-color: var(--bento-status-mark);
+}
+
+.bento-status-on {
+  --bento-status-mark: var(--vg-bento-on-mark);
+  --bento-status-text: var(--vg-bento-on-text);
+}
+
+.bento-status-warn {
+  --bento-status-mark: var(--vg-bento-warn-mark);
+  --bento-status-text: var(--vg-bento-warn-text);
+}
+
+.bento-status-error {
+  --bento-status-mark: var(--vg-bento-error-mark);
+  --bento-status-text: var(--vg-bento-error-text);
+}
+
+.dark .bento-status-on,
+[data-theme="dark"] .bento-status-on {
+  --bento-status-text: var(--vg-bento-on-text-dark);
+}
+
+.dark .bento-status-warn,
+[data-theme="dark"] .bento-status-warn {
+  --bento-status-text: var(--vg-bento-warn-text-dark);
+}
+
+.dark .bento-status-error,
+[data-theme="dark"] .bento-status-error {
+  --bento-status-text: var(--vg-bento-error-text-dark);
+}
+
+/* The destructive item in a menu: text only until focused, then a faint wash. */
+.bento-item-danger {
+  color: var(--vg-bento-danger-text);
+}
+
+.bento-item-danger:focus,
+.bento-item-danger:focus-visible {
+  background-color: color-mix(in oklab, var(--vg-bento-danger-mark) 10%, transparent);
+  color: var(--vg-bento-danger-text);
+}
+
+.dark .bento-item-danger,
+[data-theme="dark"] .bento-item-danger {
+  color: var(--vg-bento-danger-text-dark);
+}
+
+.dark .bento-item-danger:focus,
+.dark .bento-item-danger:focus-visible,
+[data-theme="dark"] .bento-item-danger:focus,
+[data-theme="dark"] .bento-item-danger:focus-visible {
+  color: var(--vg-bento-danger-text-dark-hover);
+}
+
+/* A control that clears or removes, warming to the danger intent on hover.
+   The chip's × badge; the menu item's equivalent is .bento-item-danger. */
+.bento-clear:hover {
+  background-color: color-mix(in oklab, var(--vg-bento-danger-mark) 15%, transparent);
+  color: var(--vg-bento-danger-text);
+}
+
+.dark .bento-clear:hover,
+[data-theme="dark"] .bento-clear:hover {
+  color: var(--vg-bento-danger-text-dark);
+}
+
+/* The field being edited in place. The accent is the product's primary rather
+   than a colour of the layer's own — an inline edit is a focus affordance, and
+   focus is already the product's colour everywhere else. */
+.bento-editing {
+  border-style: solid;
+  border-color: color-mix(in oklab, var(--primary) 60%, transparent);
+}
+
+.bento-editing:focus {
+  border-color: var(--primary);
+}
+
+/* The dashed "New" tile warms to the product's accent on hover, rather than to
+   a colour of the layer's own — same reasoning as .bento-editing. */
+.bento-new-tile:hover {
+  border-color: color-mix(in oklab, var(--primary) 60%, transparent);
+}
+
+/* The rail's active section, and the avatar's hover ring. Both take the
+   product's accent — the rail marking "you are here" in a colour of the layer's
+   own is the clearest case of a shared component making one product look wrong. */
+.bento-rail-active {
+  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
+  background-image: linear-gradient(
+    to bottom right,
+    color-mix(in oklab, var(--primary) 15%, transparent),
+    color-mix(in oklab, var(--primary) 15%, transparent)
+  );
+  color: var(--primary);
+}
+
+.bento-ring:hover {
+  --tw-ring-color: color-mix(in oklab, var(--primary) 50%, transparent);
+}
+
+/* Reserves the gutter the fixed nav rail occupies, so page content is not
+   underneath it. The rail is `w-16` and hidden below `md`, and this matches on
+   both counts — put it on whatever element wraps the routed page.
+
+   It is a class rather than a layout component on purpose: a shell is the one
+   thing every product already has, and the useful part is the measurement, not
+   another wrapper to nest inside. */
+@media (min-width: 48rem) {
+  .bento-rail-gutter {
+    padding-left: 4rem;
+  }
+}
+
+/* An icon that leads a dialog title, in the product's accent rather than the
+   layer's own. */
+.bento-accent-icon {
+  color: var(--primary);
+}
+
+