@viglet/viglet-design-system 2026.3.2 → 2026.3.4

package/dist/bento/bento-actions-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-actions-menu.d.ts","sourceRoot":"","sources":["../../src/bento/bento-actions-menu.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,aAAa,CAAC;AAExD,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,IAAI,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvC;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAQD;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,QAAQ,CAAC,qBAAqB,CAAC,sCAkC1F"}

package/dist/bento/bento-back-to-top.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Floating "scroll to top" button — appears with an iOS spring
+ * animation once the user has scrolled past the threshold, and
+ * smooth-scrolls back to the top on click.
+ *
+ * Complements the sticky header rather than replacing it: the header
+ * keeps navigation/branding always reachable, this button just cuts
+ * the long way back when content is heavy.
+ */
+export declare function BentoBackToTop(): import("react").JSX.Element;
+//# sourceMappingURL=bento-back-to-top.d.ts.map

package/dist/bento/bento-back-to-top.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-back-to-top.d.ts","sourceRoot":"","sources":["../../src/bento/bento-back-to-top.tsx"],"names":[],"mappings":"AAcA;;;;;;;;GAQG;AACH,wBAAgB,cAAc,gCA6B7B"}

package/dist/bento/bento-command-palette.d.ts

@@ -0,0 +1,28 @@
+import { BentoNavItem } from './bento-nav';
+export interface BentoCommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /**
+     * The surfaces this reader may jump to, already filtered — the same array the
+     * nav rail is given, so `⌘K` and the rail can never disagree about what
+     * exists.
+     *
+     * A product's routes and entity names are the one thing this package must
+     * never hold: a palette shipping its own array would offer one console's
+     * surfaces inside another's.
+     */
+    items: BentoNavItem[];
+}
+/**
+ * The Bento `⌘K` command palette (T549) — a keyboard-first launcher over
+ * every navigable area. Built on the Radix `Dialog` primitive (zero extra
+ * deps): a filter box + a flat, arrow-key-navigable result list. Migrated
+ * surfaces navigate inside the bento shell; not-yet-migrated areas link out
+ * to the console (marked with an external-link glyph) so the palette reaches
+ * everything during the migration.
+ *
+ * Global open/close (⌘K / Ctrl+K) is owned by the parent shell; this
+ * component only renders and drives selection while `open`.
+ */
+export declare function BentoCommandPalette({ open, onOpenChange, items }: Readonly<BentoCommandPaletteProps>): import("react").JSX.Element;
+//# sourceMappingURL=bento-command-palette.d.ts.map

package/dist/bento/bento-command-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-command-palette.d.ts","sourceRoot":"","sources":["../../src/bento/bento-command-palette.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;;;;;OAQG;IACH,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC,wBAAwB,CAAC,+BAsJpG"}

package/dist/bento/bento-count-tile.d.ts

@@ -0,0 +1,18 @@
+import { ComponentType } from 'react';
+import { BentoTone } from './bento-tones';
+export interface BentoCountTileProps {
+    to?: string;
+    icon: ComponentType<{
+        size?: number;
+    }>;
+    tone: BentoTone;
+    label: string;
+    count: number;
+    span: string;
+}
+/**
+ * Compact Bento tile that highlights a single number — typical for
+ * counters (e.g., "12 LLMs", "3 MCP servers").
+ */
+export declare function BentoCountTile({ to, icon: Icon, tone, label, count, span, }: Readonly<BentoCountTileProps>): import("react").JSX.Element;
+//# sourceMappingURL=bento-count-tile.d.ts.map

package/dist/bento/bento-count-tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-count-tile.d.ts","sourceRoot":"","sources":["../../src/bento/bento-count-tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/D,MAAM,WAAW,mBAAmB;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EAAE,IAAI,EACV,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,CAAC,+BAkB/B"}

package/dist/bento/bento-empty-state.d.ts

@@ -0,0 +1,35 @@
+import { Icon as TablerIcon } from '@tabler/icons-react';
+import { ReactNode } from 'react';
+import { BentoTone } from './bento-tones';
+export interface BentoEmptyStateProps {
+    /** Tonal icon in the leading chip. Defaults to a sparkle. */
+    icon?: TablerIcon;
+    /** Tone driving the icon chip gradient. Default `indigo`. */
+    tone?: BentoTone;
+    /** Headline — what's missing, in plain language. */
+    title: string;
+    /** One-line hint on how to fill it. */
+    description?: ReactNode;
+    /** Optional call-to-action (a `BentoEntityTile`-style link, a button, …). */
+    action?: ReactNode;
+    /**
+     * Content alignment. `center` (default) suits standalone panels — a chart
+     * with no data, an analytics tab before the first run. `start` suits an
+     * empty cell inside a mosaic (see the list-page `EmptyHintTile`).
+     */
+    align?: "center" | "start";
+    className?: string;
+}
+/**
+ * The one canonical Bento empty-state (T572). Every "nothing here yet" surface
+ * — an empty entity list, a chart with no samples, an analytics tab before its
+ * first data point — renders this so the void reads the same everywhere: a
+ * frosted `bento-glass` panel, a tonal icon chip, a short title, a one-line
+ * hint, and an optional CTA. Consistency here is the delight: an empty screen
+ * that looks designed rather than broken.
+ *
+ * The list mosaic's `EmptyHintTile` delegates to this component (wrapping it in
+ * the grid span), so lists and standalone panels stay visually identical.
+ */
+export declare function BentoEmptyState({ icon: Icon, tone, title, description, action, align, className, }: Readonly<BentoEmptyStateProps>): import("react").JSX.Element;
+//# sourceMappingURL=bento-empty-state.d.ts.map

package/dist/bento/bento-empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-empty-state.d.ts","sourceRoot":"","sources":["../../src/bento/bento-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/D,MAAM,WAAW,oBAAoB;IACnC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EAAE,IAAmB,EACzB,IAAe,EACf,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAgB,EAChB,SAAS,GACV,EAAE,QAAQ,CAAC,oBAAoB,CAAC,+BAyBhC"}

package/dist/bento/bento-entity-shell.d.ts

@@ -0,0 +1,123 @@
+import { Icon as TablerIcon } from '@tabler/icons-react';
+import { ReactNode } from 'react';
+import { BentoActionsMenuItem } from './bento-actions-menu';
+import { BentoTone } from './bento-tones';
+/**
+ * The identity fields every Bento entity hero owns: title, description,
+ * an optional Iconify icon, and an `enabled` status flag (0/1). These
+ * are edited in the hero (inline-edit + icon picker + status pill), not
+ * in the form body — the form's own FormFields for these are lifted out.
+ */
+export interface BentoIdentity {
+    title: string;
+    description: string;
+    icon: string | null;
+    /** 0 = idle, 1 = active. Only surfaced as a pill when `hasStatus`. */
+    enabled: number;
+}
+/** Form state the render-prop child reports up so the hero can mirror it. */
+export interface BentoShellFormState {
+    isDirty: boolean;
+    isSubmitting: boolean;
+}
+/**
+ * Fields the shell reads off the entity to seed the hero identity. `title` /
+ * `description` tolerate `null` so entities whose columns are nullable (e.g.
+ * Custom Tool) satisfy the constraint without a cast.
+ */
+type BentoEntityLike = {
+    id?: string;
+    title?: string | null;
+    description?: string | null;
+    icon?: string | null;
+    enabled?: number;
+};
+export interface BentoEntityShellRenderArgs {
+    /** Latest hero identity — merged into the form's create/update payload. */
+    staged: BentoIdentity;
+    /** Form reports dirty/submitting so the hero renders Save/Cancel correctly. */
+    onStateChange: (state: BentoShellFormState) => void;
+}
+export interface BentoEntityShellProps<TEntity extends BentoEntityLike> {
+    /** The entity being edited. In `isNew` mode pass an empty object. */
+    entity: TEntity;
+    isNew: boolean;
+    /** Placeholder shown in the title inline-edit when empty. */
+    headlineFallback: string;
+    /** Breadcrumb label above the title — usually the section name. */
+    eyebrow: ReactNode;
+    /** List route the eyebrow links to and Cancel/Delete navigate back to. */
+    listRoute: string;
+    /** Default hero icon when no Iconify icon is picked. */
+    icon: TablerIcon;
+    tone: BentoTone;
+    /** DOM id of the `<form>` the hero-anchored Save button submits (`form="…"`). */
+    formId: string;
+    /** i18n'd feature label used in toasts (e.g. `t("llm.title")`). */
+    feature: string;
+    /** Render the Active/Idle status pill (driven by `enabled`). */
+    hasStatus?: boolean;
+    /**
+     * Hide the hero icon picker for entities that have no `icon` field
+     * (e.g. API Token, Git). A static default-icon chip renders instead and
+     * no `icon` patch is ever emitted.
+     */
+    hideIcon?: boolean;
+    /**
+     * Read-only mode — used by BYO-infra surfaces for the shared GLOBAL pool
+     * (T372) when the caller is not a platform admin. Suppresses inline-edit,
+     * the icon picker, the status toggle, the save buttons and destructive
+     * actions; identity renders as plain text. Pair with a `notice`.
+     */
+    readOnly?: boolean;
+    /**
+     * The page has no submittable body form — identity auto-saves on blur and
+     * every other action (sub-lists, generate, import) has its own button, so
+     * the hero "Save changes" button would be permanently inert. When true it
+     * is hidden on existing entities (Cancel/back stays); the new-entity Save
+     * still shows because it is what creates the entity. Use for pages like the
+     * Thesaurus KB whose only editable fields live in the hero.
+     */
+    autosaveOnly?: boolean;
+    /** Small chip rendered in the hero trailing slot (e.g. a GLOBAL badge). */
+    badge?: ReactNode;
+    /** Banner rendered directly under the hero (e.g. a read-only notice). */
+    notice?: ReactNode;
+    /**
+     * Existing-mode immediate save. Receives the entity already merged with
+     * the changed identity patch. Omit in new mode (fields stage locally and
+     * the form's Save creates the entity).
+     *
+     * Reject to refuse the edit: the shell shows it optimistically, and puts the
+     * fields the patch touched back to the entity's own values when this rejects.
+     */
+    onUpdate?: (next: TEntity) => Promise<unknown>;
+    /** Delete callback; returns whether the delete succeeded. */
+    onDelete?: () => Promise<boolean>;
+    /** Extra `⋮` menu actions rendered above the built-in Delete. */
+    extraActions?: BentoActionsMenuItem[];
+    children: (args: BentoEntityShellRenderArgs) => ReactNode;
+}
+/**
+ * The reusable Bento detail scaffold — the lever that makes every remaining
+ * CRUD screen a thin config instead of a bespoke ~360-line page (T548).
+ *
+ * Owns everything the LLM/AI-Agent detail pattern settled on:
+ *
+ *   - **Identity hero** — `BentoInlineEdit` title/description, a
+ *     `BentoHeroIconPicker`, and (optionally) a clickable Active/Idle pill.
+ *   - **Two modes** — *existing*: each identity field commits immediately
+ *     via `onUpdate` (type → blur → saved); *new*: fields stage locally and
+ *     the form's Save creates the entity (no mutation until Save).
+ *   - **Scroll-linked hero → sticky-save-bar morph** — a single rAF loop
+ *     writes `--bento-fade` on `<html>`; the hero's Save/Cancel
+ *     (`bento-fade-out`) and the form's fixed `BentoSaveBar` (`bento-fade-in`)
+ *     both interpolate off it with zero React re-renders during scroll.
+ *   - **Destructive actions** in a `⋮` `BentoActionsMenu`, never the save bar.
+ *
+ * The form body is a render prop receiving `{ staged, onStateChange }` and
+ * wraps the existing react-hook-form fields in `BentoFormSection`s unchanged.
+ */
+export declare function BentoEntityShell<TEntity extends BentoEntityLike>({ entity, isNew, headlineFallback, eyebrow, listRoute, icon, tone, formId, feature, hasStatus, hideIcon, readOnly, autosaveOnly, badge, notice, onUpdate, onDelete, extraActions, children, }: Readonly<BentoEntityShellProps<TEntity>>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=bento-entity-shell.d.ts.map

package/dist/bento/bento-entity-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-entity-shell.d.ts","sourceRoot":"","sources":["../../src/bento/bento-entity-shell.tsx"],"names":[],"mappings":"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"}

package/dist/bento/bento-entity-tile.d.ts

@@ -0,0 +1,40 @@
+import { Icon as TablerIcon } from '@tabler/icons-react';
+import { ReactNode } from 'react';
+import { BentoEmphasis } from './bento-layout';
+import { BentoTone } from './bento-tones';
+export interface BentoEntityTileProps {
+    /** Link target for the tile. */
+    to: string;
+    /**
+     * Tile prominence. `LARGE` = 2×2 hero, `MEDIUM` = 2×1 wide (default),
+     * `SMALL` = compact 1×1. Takes precedence over the legacy `featured` flag.
+     */
+    emphasis?: BentoEmphasis;
+    /**
+     * Legacy prominence flag (still used by the home + area mosaics): `true` maps
+     * to `LARGE`, `false` to `MEDIUM`. Ignored when `emphasis` is set.
+     */
+    featured?: boolean;
+    /** Default Tabler icon when no Iconify `icon` is set. */
+    defaultIcon: TablerIcon;
+    /** User-picked Iconify icon name, if any. */
+    icon?: string | null;
+    tone?: BentoTone;
+    title: string;
+    description?: string | null;
+    /** Optional meta chips/text under the title (e.g. vendor, model name). */
+    meta?: ReactNode;
+    /** Render the Active/Idle status pill (driven by `enabled`). */
+    enabled?: number;
+    hasStatus?: boolean;
+    /** iOS shared-element transition name (matches the detail page). */
+    viewTransitionName?: string;
+}
+/**
+ * The common Bento content tile: tonal icon chip + optional status pill +
+ * title + description + optional meta row, sized by {@link BentoEmphasis}.
+ * Covers the shape shared by the entity lists; entities with a bespoke tile can
+ * skip it and pass their own node to {@link BentoListPage}'s `renderTile`.
+ */
+export declare function BentoEntityTile({ to, emphasis, featured, defaultIcon: DefaultIcon, icon, tone, title, description, meta, enabled, hasStatus, viewTransitionName, }: Readonly<BentoEntityTileProps>): import("react").JSX.Element;
+//# sourceMappingURL=bento-entity-tile.d.ts.map

package/dist/bento/bento-entity-tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-entity-tile.d.ts","sourceRoot":"","sources":["../../src/bento/bento-entity-tile.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAuB,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/D,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,WAAW,EAAE,UAAU,CAAC;IACxB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,0EAA0E;IAC1E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,WAAW,EAAE,WAAW,EACxB,IAAI,EACJ,IAAe,EACf,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,SAAiB,EACjB,kBAAkB,GACnB,EAAE,QAAQ,CAAC,oBAAoB,CAAC,+BAkDhC"}

package/dist/bento/bento-form-hero.d.ts

@@ -0,0 +1,91 @@
+import { ReactNode } from 'react';
+import { BentoHeroProps } from './bento-hero';
+export interface BentoFormHeroProps extends BentoHeroProps {
+    /**
+     * Convenience back-link breadcrumb: when set, the hero renders its own
+     * `eyebrow` as the shared {@link BentoBackLink} (arrow + label) — the same
+     * affordance `BentoEntityShell` and `BentoHero` bake in — so every form page
+     * gets a consistent "← back" breadcrumb without hand-assembling it. Overrides
+     * `eyebrow`. Pair with {@link backLabel}.
+     */
+    backTo?: string;
+    /** Text of the {@link backTo} breadcrumb (e.g. the parent entity name). */
+    backLabel?: ReactNode;
+    /** Cancel / back navigation (both the hero button and the sticky bar). */
+    onCancel: () => void;
+    /**
+     * Escape hatch replacing the default `type="submit"` Save + Cancel pair in
+     * **both** copies (the hero-anchored fade-out one and the sticky bar), for
+     * pages that save *imperatively* via `onClick` instead of a form submit —
+     * e.g. the SN custom-facet item editor. Supplying it keeps the morph and the
+     * "one component owns both halves" guarantee; `loading`, `saveDisabled`,
+     * `dirty` and `titleMissing` then only drive the sticky bar's status marker,
+     * since the buttons are yours. Prefer a real `<form>` submit when you can.
+     *
+     * Never pass a controlled delete dialog here — it would be mounted twice and
+     * open two modals at once. Destructive actions belong in {@link trailing}.
+     */
+    actions?: ReactNode;
+    /** Submit in progress — spins the Save button in both places. */
+    loading?: boolean;
+    /** Amber "unsaved changes" marker + enables Save. */
+    dirty?: boolean;
+    /** Red "title required" marker; disables Save (takes precedence over dirty). */
+    titleMissing?: boolean;
+    /**
+     * Force-disable Save. When omitted, Save is disabled while `titleMissing` or
+     * while there is nothing to save (`!dirty`).
+     */
+    saveDisabled?: boolean;
+    /** Title shown in the fixed sticky bar once the hero scrolls away. */
+    stickyTitle?: string;
+    /** Badges shown next to the sticky-bar title. */
+    stickyBadges?: ReactNode;
+}
+/**
+ * The **single drop-in** that gives a Bento form page the exact "hero → sticky
+ * save bar" morph the {@link BentoEntityShell} pioneered (the LLM/AI-agent
+ * detail look): at the top, Save/Cancel live in the hero and fade + lift away
+ * as you scroll; once the hero is gone a fixed frosted save bar fades in below
+ * the shell header.
+ *
+ * Use it for form pages that render their **own** hero and therefore can't use
+ * {@link BentoEntityShell} — e.g. the persona editor (a shared form behind a
+ * pill tab-bar) or any surface with a custom title/leading. It wraps
+ * {@link BentoHero} (injecting the fade-out Save/Cancel into `trailing`,
+ * *after* any extra `trailing` you pass such as a status pill or a `⋮`
+ * {@link BentoActionsMenu}) and renders the {@link BentoScrollSaveBar} twin — so
+ * the two halves can never drift apart or be half-wired.
+ *
+ * Render it as the first child **inside the `<form>`** it submits — both the
+ * hero Save button and the sticky-bar Save button are plain `type="submit"`
+ * controls that post the enclosing form, so the hero must live in the form.
+ * Pages that save imperatively (no form submit) pass their own
+ * {@link BentoFormHeroProps.actions} instead and can live outside a `<form>`.
+ *
+ * ```tsx
+ * <form onSubmit={handleSubmit(onSubmit)}>
+ *   <BentoFormHero
+ *     eyebrow={<Link to={listRoute}>{feature}</Link>}
+ *     leading={<IconChip />}
+ *     title={watchedTitle}
+ *     subtitle={description}
+ *     trailing={!isNew && <BentoActionsMenu actions={[del]} />}
+ *     onCancel={() => navigate(listRoute)}
+ *     loading={isSubmitting}
+ *     titleMissing={!watchedTitle.trim()}
+ *     dirty={isNew || isDirty}
+ *     stickyTitle={watchedTitle}
+ *   />
+ *   &lt;PillNav /&gt; and the form sections go here
+ * </form>
+ * ```
+ *
+ * Keep destructive actions in the hero `trailing` (`⋮` menu) — never in the
+ * save bar, which is Save/Cancel only.
+ *
+ * @author Alexandre Oliveira
+ * @since 2026.3.4
+ */
+export declare function BentoFormHero({ eyebrow, backTo, backLabel, leading, title, subtitle, trailing, onCancel, actions, loading, dirty, titleMissing, saveDisabled, stickyTitle, stickyBadges, }: Readonly<BentoFormHeroProps>): import("react").JSX.Element;
+//# sourceMappingURL=bento-form-hero.d.ts.map

package/dist/bento/bento-form-hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-form-hero.d.ts","sourceRoot":"","sources":["../../src/bento/bento-form-hero.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAG7E,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gFAAgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,YAAY,GACb,EAAE,QAAQ,CAAC,kBAAkB,CAAC,+BAwD9B"}

package/dist/bento/bento-form-section.d.ts

@@ -0,0 +1,31 @@
+import { ComponentType, ReactNode } from 'react';
+import { BentoTone } from './bento-tones';
+export interface BentoFormSectionProps {
+    /**
+     * Heading level for the section title. Defaults to `h2`: a form section sits
+     * directly under the hero's `h1`, and skipping to `h3` leaves a screen reader
+     * with a broken outline. Override when a section nests inside another.
+     */
+    as?: "h2" | "h3" | "h4";
+    icon: ComponentType<{
+        size?: number;
+    }>;
+    tone: BentoTone;
+    title: string;
+    description?: string;
+    children: ReactNode;
+    /** Optional trailing slot in the header (badges, status pill, etc.). */
+    trailing?: ReactNode;
+}
+/**
+ * Frosted-glass section wrapper for Bento forms — the form-page
+ * counterpart of `BentoTile`. Groups related fields under a tonal
+ * icon chip + title + description, with the same iOS-spring entry
+ * and `bento-glass` surface used elsewhere in the bento language.
+ *
+ * Stays content-agnostic: any react-hook-form field combo can sit
+ * inside `children`, so existing FormField/Input/Select/Switch
+ * components are reused without modification.
+ */
+export declare function BentoFormSection({ icon: Icon, tone, title, description, children, trailing, as: Heading, }: Readonly<BentoFormSectionProps>): import("react").JSX.Element;
+//# sourceMappingURL=bento-form-section.d.ts.map

package/dist/bento/bento-form-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-form-section.d.ts","sourceRoot":"","sources":["../../src/bento/bento-form-section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/D,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxB,IAAI,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EAAE,IAAI,EACV,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,EAAE,EAAE,OAAc,GACnB,EAAE,QAAQ,CAAC,qBAAqB,CAAC,+BAoBjC"}

package/dist/bento/bento-hero-icon-picker.d.ts

@@ -0,0 +1,35 @@
+import { ComponentType } from 'react';
+import { BentoTone } from './bento-tones';
+export interface BentoHeroIconPickerProps {
+    /** Current Iconify icon string (e.g. "tabler:robot"). When null/undefined, the default icon renders. */
+    value?: string | null;
+    /** Persist a new icon. */
+    onChange: (icon: string) => void;
+    /** Optional clear callback. When provided, a hover-revealed × badge appears on the chip when an icon is set. */
+    onClear?: () => void;
+    /** Default icon when `value` is empty. */
+    defaultIcon: ComponentType<{
+        size?: number;
+    }>;
+    /** Tone — drives the chip gradient. */
+    tone: BentoTone;
+    /** Title of the entity (passed to the dialog for AI suggestions). */
+    title?: string;
+    /** Description of the entity (passed to the dialog for AI suggestions). */
+    description?: string;
+    /** Render a static chip (no picker dialog, no hover overlay / clear). */
+    readOnly?: boolean;
+}
+/**
+ * Bento-flavoured icon picker. Renders as the leading chip of a
+ * `BentoHero` (h-12 w-12 rounded-2xl with the page tone gradient),
+ * with a hover overlay that signals it's editable. Click opens the
+ * shared icon-picker dialog; a hover-revealed × in the corner clears
+ * the current icon without opening the dialog.
+ *
+ * Designed to be the standard pattern for editable entity icons
+ * across all bento detail/header pages — replacing the in-form
+ * IconPicker field with a single click target on the page header.
+ */
+export declare function BentoHeroIconPicker({ value, onChange, onClear, defaultIcon: DefaultIcon, tone, title, description, readOnly, }: Readonly<BentoHeroIconPickerProps>): import("react").JSX.Element;
+//# sourceMappingURL=bento-hero-icon-picker.d.ts.map

package/dist/bento/bento-hero-icon-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-hero-icon-picker.d.ts","sourceRoot":"","sources":["../../src/bento/bento-hero-icon-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/D,MAAM,WAAW,wBAAwB;IACvC,wGAAwG;IACxG,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,0BAA0B;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,gHAAgH;IAChH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,WAAW,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9C,uCAAuC;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EAAE,WAAW,EACxB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAgB,GACjB,EAAE,QAAQ,CAAC,wBAAwB,CAAC,+BAwDpC"}

package/dist/bento/bento-hero.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+/**
+ * Canonical breadcrumb back-link for Bento heroes — a leading
+ * `IconArrowLeft` followed by the label, pointing at the parent list/route.
+ *
+ * Centralised here so the arrow is part of the shared component instead of
+ * being re-typed inline on every page (which is how the persona dashboard
+ * ended up without it). Use it directly only when the eyebrow needs extra
+ * trailing content (e.g. a status marker); otherwise pass
+ * {@link BentoHeroProps.backTo} / {@link BentoHeroProps.backLabel} and let
+ * {@link BentoHero} render it.
+ */
+export declare function BentoBackLink({ to, children }: Readonly<{
+    to: string;
+    children: ReactNode;
+}>): import("react").JSX.Element;
+export interface BentoHeroProps {
+    /**
+     * Small label above the headline. Typically the parent section
+     * name (acts as a breadcrumb back-link). Accepts a `ReactNode` so
+     * consumers can pass bespoke content.
+     *
+     * Prefer {@link BentoHeroProps.backTo} for the common "breadcrumb back to
+     * the parent list" case — it renders the canonical leading `IconArrowLeft`
+     * so no page can forget it. Pass `eyebrow` only for bespoke content (e.g. a
+     * status marker appended after the link, composed with {@link BentoBackLink}).
+     * If both are set, `eyebrow` wins.
+     */
+    eyebrow?: ReactNode;
+    /**
+     * Convenience for the canonical breadcrumb: renders the eyebrow as a
+     * back-link (leading `IconArrowLeft` + {@link BentoHeroProps.backLabel})
+     * pointing at this route. Ignored when `eyebrow` is provided.
+     */
+    backTo?: string;
+    /** Label for the {@link BentoHeroProps.backTo} back-link. */
+    backLabel?: ReactNode;
+    /** Headline — a greeting, the page title, etc. */
+    title: ReactNode;
+    /** Sub-line below the title. */
+    subtitle?: ReactNode;
+    /** Visual badge / logo on the left of the headline. */
+    leading?: ReactNode;
+    /** Trailing slot — actions, chips, etc. Pushed to the far right. */
+    trailing?: ReactNode;
+}
+/**
+ * Page-level hero block used at the top of every Bento page.
+ *
+ * Mirrors the "navigation title" pattern from iOS — large, airy,
+ * left-aligned by default, and animates in with the same spring as
+ * the rest of the bento shell. Stays outside the bento grid (no
+ * frosted-glass surface) so it reads as a section header rather
+ * than as a tile.
+ *
+ * Layout contract: leading + title block always anchor to the start;
+ * the optional `trailing` slot is pushed to the far right via
+ * `ml-auto` so single-child (no trailing) renders deterministically
+ * left-aligned without depending on `justify-content` quirks.
+ */
+export declare function BentoHero({ eyebrow, backTo, backLabel, title, subtitle, leading, trailing, }: Readonly<BentoHeroProps>): import("react").JSX.Element;
+//# sourceMappingURL=bento-hero.d.ts.map

package/dist/bento/bento-hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-hero.d.ts","sourceRoot":"","sources":["../../src/bento/bento-hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAAC,+BAO5F;AAED,MAAM,WAAW,cAAc;IAC7B;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,kDAAkD;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,EAAE,QAAQ,CAAC,cAAc,CAAC,+BAyB1B"}

package/dist/bento/bento-inline-edit.d.ts

@@ -0,0 +1,52 @@
+export interface BentoInlineEditProps {
+    /** Current persisted value. */
+    value: string;
+    /**
+     * Called when the user commits a non-empty change. Awaited if a Promise
+     * is returned — used to keep the field in "saving" state while the
+     * underlying mutation resolves.
+     *
+     * Reject to refuse the edit: the field returns to `value` and the rejection
+     * is not rethrown. Reporting it is yours — you know what failed.
+     */
+    onSave: (next: string) => void | Promise<void>;
+    /** Multiline mode renders a textarea + Cmd/Ctrl+Enter to save (Enter just adds a line). */
+    multiline?: boolean;
+    /** Shown when value is empty and the field is not being edited. */
+    placeholder?: string;
+    /** Class applied to BOTH the display element and the input/textarea — keeps typography consistent so there's no visual jump entering/leaving edit mode. */
+    className?: string;
+    /** Accessible label for the input. */
+    ariaLabel?: string;
+    /**
+     * Start in edit mode on mount — useful for "new entity" flows where
+     * the placeholder field needs to be filled before anything else
+     * makes sense. The user sees a focused input on landing.
+     */
+    autoFocus?: boolean;
+    /**
+     * Render as plain, non-editable text — no click-to-edit affordance.
+     * Used by read-only surfaces (e.g. the shared GLOBAL BYO-infra pool
+     * when the caller is not a platform admin).
+     */
+    readOnly?: boolean;
+    /**
+     * Push every keystroke up through `onSave` (live), instead of only on
+     * blur/Enter. Used by "new entity" flows where the field stages locally
+     * (no mutation per keystroke) and downstream gates — e.g. the Save
+     * button's `titleMissing` check — must react as the user types. With
+     * commit-on-blur, a user who types the name then clicks the (still
+     * disabled) Save button never commits, so Save appears stuck disabled.
+     */
+    commitOnChange?: boolean;
+}
+/**
+ * Click-to-edit inline text. Reads as plain text until clicked, then
+ * swaps to a controlled input/textarea that commits on blur / Enter.
+ *
+ * Display mode shows a subtle bottom border on hover (the canonical
+ * "this is editable" hint). Edit mode keeps the same font size /
+ * weight as the display so the text doesn't jump when toggling.
+ */
+export declare function BentoInlineEdit({ value, onSave, multiline, placeholder, className, ariaLabel, autoFocus, readOnly, commitOnChange, }: Readonly<BentoInlineEditProps>): import("react").JSX.Element;
+//# sourceMappingURL=bento-inline-edit.d.ts.map

package/dist/bento/bento-inline-edit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-inline-edit.d.ts","sourceRoot":"","sources":["../../src/bento/bento-inline-edit.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,oBAAoB;IACnC,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,2FAA2F;IAC3F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2JAA2J;IAC3J,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,MAAM,EACN,SAAiB,EACjB,WAAW,EACX,SAAc,EACd,SAAS,EACT,SAAiB,EACjB,QAAgB,EAChB,cAAsB,GACvB,EAAE,QAAQ,CAAC,oBAAoB,CAAC,+BAkKhC"}

package/dist/bento/bento-layout.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The shared layout vocabulary for customisable bento lists: the
+ * {@link BentoEmphasis} sizes, the persisted layout shape, the emphasis-to-grid-span
+ * map, and the pure resolver that turns persisted entries (or the built-in
+ * default) into an ordered, sized list.
+ *
+ * Where the layout is stored is the product's business; resolving it is not.
+ * Keeping the resolver pure is what lets a product hand in whatever its own API
+ * returned and get back a list it can render, with no DOM and no network.
+ */
+/** How prominent one tile is, decoupled from its position. */
+export type BentoEmphasis = "SMALL" | "MEDIUM" | "LARGE";
+/** Which cascade layer produced the resolved layout. */
+export type BentoLayoutSource = "USER" | "GLOBAL" | "DEFAULT";
+/** One item's persisted placement. */
+export interface BentoLayoutEntry {
+    itemId: string;
+    emphasis: BentoEmphasis;
+    displayOrder: number;
+}
+/** The resolved layout a product's API returns for a list surface. */
+export interface BentoLayoutResponse {
+    listId: string;
+    source: BentoLayoutSource;
+    canEditGlobal: boolean;
+    entries: BentoLayoutEntry[];
+}
+/**
+ * Grid span per emphasis. `LARGE` = the 2×2 hero, `MEDIUM` = the 2×1 wide tile
+ * (the non-featured default), `SMALL` = a compact 1×1 that a `grid-flow-dense`
+ * pass uses to fill holes.
+ */
+export declare const BENTO_EMPHASIS_SPAN: Record<BentoEmphasis, string>;
+/** Next size when cycling the per-tile emphasis affordance. */
+export declare const BENTO_EMPHASIS_NEXT: Record<BentoEmphasis, BentoEmphasis>;
+/** An item paired with its resolved key + emphasis, in resolved order. */
+export interface ResolvedBentoItem<T> {
+    item: T;
+    key: string;
+    emphasis: BentoEmphasis;
+}
+/**
+ * Resolve items into ordered, sized tiles. With no persisted entries this is the
+ * built-in default — first item `LARGE`, the rest `MEDIUM`. With entries, order
+ * by `displayOrder` (items absent from the layout — e.g. created since it was
+ * saved — keep their natural order at the end) and size by the persisted
+ * emphasis (absent → `MEDIUM`).
+ */
+export declare function resolveBentoLayout<T>(items: T[], itemKey: (item: T) => string, entries: BentoLayoutEntry[] | undefined): ResolvedBentoItem<T>[];
+/** Serialize a resolved list back into persistable entries (order = array index). */
+export declare function toBentoLayoutEntries<T>(resolved: ResolvedBentoItem<T>[]): BentoLayoutEntry[];
+//# sourceMappingURL=bento-layout.d.ts.map