@wildo-ai/saas-frontend-lib 1.1.9 → 1.1.11

package/dist/esm/core/ui/themes/focus-indicator.js

@@ -0,0 +1,229 @@
+/**
+ * Keyboard-focus indicators — the ONE contract every theme recipe and every component draws focus with.
+ *
+ * ## Why focus is a contract and not a theme's personality
+ *
+ * A theme may decide how a hovered button looks, how heavy a card's shadow is, how fast an overlay
+ * fades. It may not decide whether a keyboard user can see where they are. So the GEOMETRY of the
+ * indicator lives here, once, and every theme imports it; what a theme owns is the COLOUR (the
+ * `--ring` token of its palette) and anything it wants to ADD on top (every shipped theme turns a
+ * field's border to the ring colour beneath the outline). A theme can make focus louder. It cannot make
+ * it thinner, move it, or make it disappear.
+ *
+ * ## What it replaced, and the five defects that made it necessary (measured 2026-10-02)
+ *
+ * Every theme drew focus as a Tailwind `ring` — a `box-shadow` — and most added
+ * `ring-offset-2 ring-offset-background` plus `border-ring`. Rendered on the real Wonder Todos tokens:
+ *
+ * 1. **A railway track on every control.** `border-ring` repainted the 1px border in the ring colour,
+ *    the offset painted a 2px gap, and the ring drew a second 2px line outside it: two parallel
+ *    coloured lines around every focused button, checkbox and switch — and around every text input on
+ *    every MOUSE click, because a text field matches `:focus-visible` whenever it has focus.
+ * 2. **The gap was painted, in the PAGE colour.** A ring offset is a solid shadow in
+ *    `--background`. On a card (`surface-raised`), a sidebar (`surface-sunken`), a popover or a dark
+ *    page, that band is visibly the wrong colour around the control.
+ * 3. **Clipped to stray lines.** A shadow drawn outside the box is cut by any `overflow-hidden`
+ *    ancestor. A settings card clips its rows (it must, so their dividers run to the rounded corner),
+ *    and a focused row showed only two horizontal blue strokes.
+ * 4. **Invisible in forced-colors mode.** User agents force `box-shadow` to `none` there, so a
+ *    Windows High Contrast user lost every focus indicator in the framework.
+ *    spec-cite: MDN, `@media (forced-colors)` — "`box-shadow` is forced to 'none'" —
+ *    https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
+ * 5. **Invisible in the sidebar.** `SelectableVariant.FILLED` coloured its ring with
+ *    `ring-surface-sunken-border` — the sidebar's own border colour, about 1.1:1 against the sidebar —
+ *    so a keyboard user moving through the navigation saw nothing move.
+ *
+ * ## The answer the field converged on
+ *
+ * An `outline`: 2px, solid, in the focus colour. It follows `border-radius` in every evergreen
+ * browser, its offset gap is TRANSPARENT (so it reads correctly on any surface without knowing which
+ * one), and forced-colors mode keeps it and repaints it in a system colour instead of removing it.
+ * GitHub Primer, Radix Themes, Atlassian, Shopify Polaris and IBM Carbon all draw focus this way.
+ *
+ * ## Light by design: one 2px line, and the AAA area only where 2px already reaches it
+ *
+ * Every shape is ONE 2px line on an ordinary control (a field's edge is its border plus a pixel, so 2px on
+ * the usual 1px border, 3px on a 2px one). A field's edge was 4px from 2026-10-02 to 2026-10-05, sized for the AAA
+ * Focus Appearance area (see below); it showed on every mouse click into a text field, and on a form it
+ * read as the heaviest thing on the page. Paul asked for a discreet, light indicator (2026-10-05), and
+ * what was given up is exactly the AAA area on fields. The AA guarantee is unchanged. OFFSET's gap went
+ * from 2px to 1px in the same change: the gap only has to keep the outline off a fill of the ring
+ * colour (a primary button), and 1px does that without the indicator floating away from its control.
+ *
+ * ## What it guarantees: WCAG 2.2 AA, and the AAA area where 2px reaches it
+ *
+ * The guarantee is AA: an indicator is always visible (SC 2.4.7), and it holds 3:1 against what it is
+ * drawn on (SC 1.4.11). For OFFSET that is the surface outside the control; for FIELD it is the field's
+ * interior and, at the outline's outer edge, the surface around the field; for INSET it is the item's own
+ * fill, and where the ring cannot clear a fill by 3:1 the fill declares a band that does (see INSET).
+ *
+ * What the named-theme contract test measures, per theme and per mode: the ring against every surface token
+ * a control sits on (page, muted, accent, secondary, and the sunken, raised, overlay and inset surfaces), and
+ * every fill an INSET item can hold focus on in the interactive and selectable families (at rest, selected,
+ * highlighted, open), a fill at /50 or more composited over each of those surfaces. What it does not measure:
+ * a tint below /50 (it reads as the surface beneath, which the ring test covers), a FIELD's interior (a surface
+ * or a tint in every theme today), and a control an application places on a fill outside the surface set, such
+ * as an OFFSET button inside a primary-filled card.
+ * spec-cite: Understanding WCAG 2.2 SC 1.4.11 — "the visual focus indicator for a component must have
+ * sufficient contrast against the adjacent background when the component is focused" —
+ * https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
+ *
+ * OFFSET and INSET also reach the AAA Focus Appearance area (SC 2.4.13) on the controls most screens are
+ * made of; FIELD and WITHIN do not, by choice (above). Two clauses of its Understanding document decide which:
+ * spec-cite: Understanding WCAG 2.2 SC 2.4.13, "Partially contrasting indicators" — "only the part of the
+ * indicator which meets the change-of-contrast requirement should be included in the calculation" —
+ * https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
+ * spec-cite: same page, "Minimum area" — "Indicators that are inset further within the component (not
+ * directly against the component's outer edge) need to be thicker than 2 CSS pixels to meet the minimum
+ * size requirement."
+ *
+ * | shape | what changes by 3:1 | band | AAA area |
+ * |---|---|---|---|
+ * | OFFSET | the surface outside the box turns ring | 2px, outside the edge, 1px off it | met |
+ * | FIELD, WITHIN | the pixel inside the border turns ring; the border itself does not count (on the default palette border-strong → ring is 1.66:1 light, 2.68:1 dark; neo-brutalist's border IS the ring colour) | 1px, from the border's inner edge | NOT met: an inset band must be thicker than 2px, and this one is 1px. AA holds: the outline's outer edge sits against the surface outside, which the ring clears by 3:1 |
+ * | INSET | the item's own fill (surface, hover or a selection tint) turns ring | 2px, against the outer edge | met on an unbordered item |
+ * | INSET on a fill the ring cannot clear | the outline changes too little (ring = primary in six of eight themes; foreground and destructive fills in some); the band the fill declares changes it: primary → primary-foreground (at least 4.6:1 in every theme), foreground → background, destructive → background or destructive-foreground, measured on the fill as painted | 3px, from 2px to 5px in | met |
+ *
+ * AAA is also NOT met where the control's own edge, under the indicator, is the ring colour or close to it:
+ * an INSET item with a grey edge, a field with a 2px ring-coloured border (neo-brutalist), a selected
+ * underline tab whose 2px edge is primary = ring. Meeting it there, and on every field, means about 4px
+ * inside every bordered control, the weight this contract set out to remove, and AAA is not the baseline
+ * the field holds itself to:
+ * spec-cite: Understanding WCAG 2.2, Understanding Requirement 1 — "It is not recommended that Level AAA
+ * conformance be required as a general policy for entire sites because it is not possible to satisfy all
+ * Level AAA success criteria for some content." — https://www.w3.org/WAI/WCAG22/Understanding/conformance
+ * The measured cases and what meeting AAA would cost are recorded in issue #2399.
+ *
+ * `focus-indicator.geometry.test.ts` recomputes each row's area from the class strings below: the rows
+ * that claim the AAA area fail there with the clause they break if they get thinner, and FIELD and WITHIN
+ * are held to the AA shape (drawn inside, covering the border and a pixel within it, for a border of any width). The colour
+ * obligations are the PALETTE's: `--ring` must hold 3:1 against every surface a control sits on, and `--primary-foreground` against
+ * `--primary`, in both modes; the named-theme contract test measures both.
+ *
+ * ## Why every shape restates `outline-solid`
+ *
+ * Several controls carry `outline-none` (or `outline-hidden`) in their structural classes to suppress
+ * the browser's own outline. In Tailwind v4 those set `--tw-outline-style: none`, and `outline-2`
+ * reads its style FROM that variable — so `outline-2` alone would draw nothing on exactly those
+ * controls. `outline-solid` sets the style explicitly and wins on `:focus-visible` specificity.
+ *
+ * ## Why this file lives in saas-frontend-lib and not in presets-components-models
+ *
+ * Tailwind emits a utility only if it finds the class string in a file it scans, and applications
+ * scan `saas-frontend-lib` and `presets-components` (source or dist) — never the models package. A
+ * class string defined only in the models package produces no CSS at all, silently. Keep these
+ * literals here.
+ *
+ * ## The two restatements, and what holds each to this file
+ *
+ * - The design-tokens generator (presets-components-models) emits the same shapes as the
+ *   `@utility focus-ring-*` declarations of an application's `index.css`, for
+ *   markup the application writes itself. It cannot import this file (the dependency runs the other
+ *   way), so `generated-focus-utilities.parity.test.ts` in presets-components holds the two equal.
+ * - `pnpm check:focus-ring-patterns` refuses a focus indicator drawn by hand anywhere else in the two
+ *   scanned packages, unless the site states why in a `focus-indicator-waiver:` comment.
+ */
+/**
+ * @wildo_source:part:start saas.frontend.focus-indicator facet:layer:frontend facet:family:theme facet:audience:app-developer
+ *
+ * The closed vocabulary of keyboard-focus geometries. Which one a control takes is a question about
+ * WHERE the control sits and WHAT its edge means — never about which theme is active.
+ *
+ * Import from `@wildo-ai/saas-frontend-lib`. Every framework component and every shipped theme
+ * already draws focus this way; reach for it yourself only when you make an element focusable that
+ * no framework component renders (a custom view's clickable tile, a hand-built row), or when you
+ * write a theme's `states.focus`. Never hand-write a `ring-*` focus state: a box-shadow ring is
+ * removed in forced-colors mode, and a `ring-offset-*` gap is painted in one fixed colour that is
+ * wrong on every surface but the page.
+ */
+export var FocusIndicatorShape;
+(function (FocusIndicatorShape) {
+    /**
+     * A standalone control — a button, a link, a checkbox, a switch, a radio, a badge link, a filter
+     * chip, a selectable card. A 2px outline OUTSIDE the box with a 1px transparent gap, so the indicator
+     * never merges with a filled control of the same colour (a primary button) and reads against
+     * whatever surface lies beneath, while staying close enough to read as the control's own edge.
+     */
+    FocusIndicatorShape["OFFSET"] = "offset";
+    /**
+     * A control whose border IS its identity — a text input, a textarea, a select or combobox trigger.
+     * An outline drawn INSIDE the box that covers the field's border and the pixel within it: 2px on the
+     * usual 1px border. The edge reads as one solid focus edge, nothing is drawn outside the box (so it
+     * cannot be clipped and does not double the border), and an invalid field keeps its error colour.
+     *
+     * The width follows the border, through `--field-border-width` (1px when unset). A field whose border
+     * is thicker DECLARES it on the element that draws the border (`[--field-border-width:2px]` beside
+     * `border-2`), or the outline would repaint exactly the border and, where the border is the ring
+     * colour (neo-brutalist's 2px foreground edge), change nothing at all. The named-theme contract test
+     * holds every theme's field recipes to declaring the width they draw.
+     *
+     * Why 2px and not 4: a text field matches `:focus-visible` on every mouse click, so its indicator is
+     * the one a user sees most. 4px met the WCAG 2.2 Focus Appearance AAA area (the border pixel changes by
+     * under 3:1 and does not count, so the counted band must be 3px) and was the heaviest line on any
+     * form. 2px meets AA, which is the guarantee; the AAA area on fields was given up on purpose
+     * (2026-10-05, issue #2399).
+     */
+    FocusIndicatorShape["FIELD"] = "field";
+    /**
+     * An item packed or clipped inside a container — a menu or listbox option, a sidebar item, a tab, a
+     * segment, a table row, a settings row, a list card in a clipped list. A 2px outline drawn INSIDE the
+     * box (offset −2px), so a clipping ancestor cannot cut it and it never overlaps a neighbour.
+     *
+     * On an item whose FILL the ring cannot clear by 3:1, a 3px band sits inside the outline. Ring is primary
+     * in most palettes, so on a primary fill the outline alone would change no pixel at all; some themes fill
+     * a selected item with foreground or a button with destructive, which their ring clears by about 2:1.
+     * The band's colour is `--focus-band`, which INSET draws as `transparent` unless the element sets it,
+     * and whatever paints such a fill sets it under the same state, to a colour that clears it:
+     *
+     *     data-[state=active]:bg-primary data-[state=active]:[--focus-band:var(--color-primary-foreground)]
+     *     data-[state=on]:bg-foreground data-[state=on]:[--focus-band:var(--color-background)]
+     *
+     * primary-foreground is owed 4.5:1 against primary for text, and background against foreground, so
+     * those bands show. A translucent fill (`dark:bg-destructive/60`) is measured as painted, composited
+     * over each surface beneath it, which can call for a different band colour than the opaque token would.
+     * Every other item gets no visible band, whatever its state. A band in a colour that is not the item's own reads as
+     * a painted gap (the defect this contract replaced), and keying it on "selected" instead drew it on
+     * tinted selections and on an active tab PANEL, which Radix also marks `data-state="active"`.
+     *
+     * The band is an inset ring (`--tw-inset-ring-shadow`), a separate layer from the item's own drop shadow
+     * (`--tw-shadow`), so focusing an item never removes its shadow. It does replace an inset ring the item
+     * draws itself (no framework component does). The application's generated stylesheet registers
+     * `--focus-band` with `inherits: false`, so a band declared on a filled card or pill does not reach a
+     * focusable control inside it.
+     */
+    FocusIndicatorShape["INSET"] = "inset";
+    /**
+     * A composite whose DOM focus lands on an inner slice — a code editor, an input group, a chips
+     * input, a segmented date entry. The WRAPPER draws the FIELD edge (its border plus a pixel, inside) while any
+     * descendant is focus-visible; an indicator on the inner slice would float mid-row. A composite that
+     * also holds buttons keys the edge on its TEXT slice instead (`has-[textarea:focus-visible]:`), or a
+     * focused button would draw two indicators at once.
+     */
+    FocusIndicatorShape["WITHIN"] = "within";
+})(FocusIndicatorShape || (FocusIndicatorShape = {}));
+/**
+ * The class strings for each shape. Colour comes from `--ring` (`outline-ring`), which the palette
+ * owns; geometry is fixed. A theme composes these into its recipes' `states.focus` and may append to
+ * them; components that are not recipe-driven use them directly.
+ */
+export const FOCUS_INDICATOR_CLASSES = {
+    [FocusIndicatorShape.OFFSET]: 'focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring',
+    [FocusIndicatorShape.FIELD]: 'focus-visible:outline-solid focus-visible:outline-[length:calc(var(--field-border-width,1px)_+_1px)] focus-visible:-outline-offset-[calc(var(--field-border-width,1px)_+_1px)] focus-visible:outline-ring aria-invalid:focus-visible:outline-destructive',
+    [FocusIndicatorShape.INSET]: 'focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring focus-visible:inset-ring-5 focus-visible:inset-ring-[color:var(--focus-band,transparent)]',
+    [FocusIndicatorShape.WITHIN]: 'has-focus-visible:outline-solid has-focus-visible:outline-[length:calc(var(--field-border-width,1px)_+_1px)] has-focus-visible:-outline-offset-[calc(var(--field-border-width,1px)_+_1px)] has-focus-visible:outline-ring has-[[aria-invalid=true]]:outline-destructive',
+};
+/**
+ * Shorthand for `FOCUS_INDICATOR_CLASSES[shape]`, for call sites that compose classes inline.
+ *
+ * @example
+ * // A custom view's clickable tile: standalone, so OFFSET.
+ * <button className={cn('rounded-lg p-card text-start', focusIndicatorClasses(FocusIndicatorShape.OFFSET))} />
+ *
+ * // A row in a list that clips its rows: INSET, so the outline is drawn inside the row.
+ * <li tabIndex={0} className={cn('px-card py-card-sm', focusIndicatorClasses(FocusIndicatorShape.INSET))} />
+ */
+export function focusIndicatorClasses(shape) {
+    return FOCUS_INDICATOR_CLASSES[shape];
+}
+/** @wildo_source:part:end saas.frontend.focus-indicator */
+//# sourceMappingURL=focus-indicator.js.map

package/dist/esm/core/ui/themes/focus-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-indicator.js","sourceRoot":"","sources":["../../../../../../src/core/ui/themes/focus-indicator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4HG;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,CAAN,IAAY,mBAkEX;AAlED,WAAY,mBAAmB;IAC7B;;;;;OAKG;IACH,wCAAiB,CAAA;IAEjB;;;;;;;;;;;;;;;;;OAiBG;IACH,sCAAe,CAAA;IAEf;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,sCAAe,CAAA;IAEf;;;;;;OAMG;IACH,wCAAiB,CAAA;AACnB,CAAC,EAlEW,mBAAmB,KAAnB,mBAAmB,QAkE9B;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAkD;IACpF,CAAC,mBAAmB,CAAC,MAAM,CAAC,EAAE,+GAA+G;IAC7I,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACzB,0PAA0P;IAC5P,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACzB,0MAA0M;IAC5M,CAAC,mBAAmB,CAAC,MAAM,CAAC,EAC1B,yQAAyQ;CAC5Q,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAA0B;IAC9D,OAAO,uBAAuB,CAAC,KAAK,CAAC,CAAC;AACxC,CAAC;AACD,2DAA2D","sourcesContent":["/**\n * Keyboard-focus indicators — the ONE contract every theme recipe and every component draws focus with.\n *\n * ## Why focus is a contract and not a theme's personality\n *\n * A theme may decide how a hovered button looks, how heavy a card's shadow is, how fast an overlay\n * fades. It may not decide whether a keyboard user can see where they are. So the GEOMETRY of the\n * indicator lives here, once, and every theme imports it; what a theme owns is the COLOUR (the\n * `--ring` token of its palette) and anything it wants to ADD on top (every shipped theme turns a\n * field's border to the ring colour beneath the outline). A theme can make focus louder. It cannot make\n * it thinner, move it, or make it disappear.\n *\n * ## What it replaced, and the five defects that made it necessary (measured 2026-10-02)\n *\n * Every theme drew focus as a Tailwind `ring` — a `box-shadow` — and most added\n * `ring-offset-2 ring-offset-background` plus `border-ring`. Rendered on the real Wonder Todos tokens:\n *\n * 1. **A railway track on every control.** `border-ring` repainted the 1px border in the ring colour,\n *    the offset painted a 2px gap, and the ring drew a second 2px line outside it: two parallel\n *    coloured lines around every focused button, checkbox and switch — and around every text input on\n *    every MOUSE click, because a text field matches `:focus-visible` whenever it has focus.\n * 2. **The gap was painted, in the PAGE colour.** A ring offset is a solid shadow in\n *    `--background`. On a card (`surface-raised`), a sidebar (`surface-sunken`), a popover or a dark\n *    page, that band is visibly the wrong colour around the control.\n * 3. **Clipped to stray lines.** A shadow drawn outside the box is cut by any `overflow-hidden`\n *    ancestor. A settings card clips its rows (it must, so their dividers run to the rounded corner),\n *    and a focused row showed only two horizontal blue strokes.\n * 4. **Invisible in forced-colors mode.** User agents force `box-shadow` to `none` there, so a\n *    Windows High Contrast user lost every focus indicator in the framework.\n *    spec-cite: MDN, `@media (forced-colors)` — \"`box-shadow` is forced to 'none'\" —\n *    https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors\n * 5. **Invisible in the sidebar.** `SelectableVariant.FILLED` coloured its ring with\n *    `ring-surface-sunken-border` — the sidebar's own border colour, about 1.1:1 against the sidebar —\n *    so a keyboard user moving through the navigation saw nothing move.\n *\n * ## The answer the field converged on\n *\n * An `outline`: 2px, solid, in the focus colour. It follows `border-radius` in every evergreen\n * browser, its offset gap is TRANSPARENT (so it reads correctly on any surface without knowing which\n * one), and forced-colors mode keeps it and repaints it in a system colour instead of removing it.\n * GitHub Primer, Radix Themes, Atlassian, Shopify Polaris and IBM Carbon all draw focus this way.\n *\n * ## Light by design: one 2px line, and the AAA area only where 2px already reaches it\n *\n * Every shape is ONE 2px line on an ordinary control (a field's edge is its border plus a pixel, so 2px on\n * the usual 1px border, 3px on a 2px one). A field's edge was 4px from 2026-10-02 to 2026-10-05, sized for the AAA\n * Focus Appearance area (see below); it showed on every mouse click into a text field, and on a form it\n * read as the heaviest thing on the page. Paul asked for a discreet, light indicator (2026-10-05), and\n * what was given up is exactly the AAA area on fields. The AA guarantee is unchanged. OFFSET's gap went\n * from 2px to 1px in the same change: the gap only has to keep the outline off a fill of the ring\n * colour (a primary button), and 1px does that without the indicator floating away from its control.\n *\n * ## What it guarantees: WCAG 2.2 AA, and the AAA area where 2px reaches it\n *\n * The guarantee is AA: an indicator is always visible (SC 2.4.7), and it holds 3:1 against what it is\n * drawn on (SC 1.4.11). For OFFSET that is the surface outside the control; for FIELD it is the field's\n * interior and, at the outline's outer edge, the surface around the field; for INSET it is the item's own\n * fill, and where the ring cannot clear a fill by 3:1 the fill declares a band that does (see INSET).\n *\n * What the named-theme contract test measures, per theme and per mode: the ring against every surface token\n * a control sits on (page, muted, accent, secondary, and the sunken, raised, overlay and inset surfaces), and\n * every fill an INSET item can hold focus on in the interactive and selectable families (at rest, selected,\n * highlighted, open), a fill at /50 or more composited over each of those surfaces. What it does not measure:\n * a tint below /50 (it reads as the surface beneath, which the ring test covers), a FIELD's interior (a surface\n * or a tint in every theme today), and a control an application places on a fill outside the surface set, such\n * as an OFFSET button inside a primary-filled card.\n * spec-cite: Understanding WCAG 2.2 SC 1.4.11 — \"the visual focus indicator for a component must have\n * sufficient contrast against the adjacent background when the component is focused\" —\n * https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html\n *\n * OFFSET and INSET also reach the AAA Focus Appearance area (SC 2.4.13) on the controls most screens are\n * made of; FIELD and WITHIN do not, by choice (above). Two clauses of its Understanding document decide which:\n * spec-cite: Understanding WCAG 2.2 SC 2.4.13, \"Partially contrasting indicators\" — \"only the part of the\n * indicator which meets the change-of-contrast requirement should be included in the calculation\" —\n * https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html\n * spec-cite: same page, \"Minimum area\" — \"Indicators that are inset further within the component (not\n * directly against the component's outer edge) need to be thicker than 2 CSS pixels to meet the minimum\n * size requirement.\"\n *\n * | shape | what changes by 3:1 | band | AAA area |\n * |---|---|---|---|\n * | OFFSET | the surface outside the box turns ring | 2px, outside the edge, 1px off it | met |\n * | FIELD, WITHIN | the pixel inside the border turns ring; the border itself does not count (on the default palette border-strong → ring is 1.66:1 light, 2.68:1 dark; neo-brutalist's border IS the ring colour) | 1px, from the border's inner edge | NOT met: an inset band must be thicker than 2px, and this one is 1px. AA holds: the outline's outer edge sits against the surface outside, which the ring clears by 3:1 |\n * | INSET | the item's own fill (surface, hover or a selection tint) turns ring | 2px, against the outer edge | met on an unbordered item |\n * | INSET on a fill the ring cannot clear | the outline changes too little (ring = primary in six of eight themes; foreground and destructive fills in some); the band the fill declares changes it: primary → primary-foreground (at least 4.6:1 in every theme), foreground → background, destructive → background or destructive-foreground, measured on the fill as painted | 3px, from 2px to 5px in | met |\n *\n * AAA is also NOT met where the control's own edge, under the indicator, is the ring colour or close to it:\n * an INSET item with a grey edge, a field with a 2px ring-coloured border (neo-brutalist), a selected\n * underline tab whose 2px edge is primary = ring. Meeting it there, and on every field, means about 4px\n * inside every bordered control, the weight this contract set out to remove, and AAA is not the baseline\n * the field holds itself to:\n * spec-cite: Understanding WCAG 2.2, Understanding Requirement 1 — \"It is not recommended that Level AAA\n * conformance be required as a general policy for entire sites because it is not possible to satisfy all\n * Level AAA success criteria for some content.\" — https://www.w3.org/WAI/WCAG22/Understanding/conformance\n * The measured cases and what meeting AAA would cost are recorded in issue #2399.\n *\n * `focus-indicator.geometry.test.ts` recomputes each row's area from the class strings below: the rows\n * that claim the AAA area fail there with the clause they break if they get thinner, and FIELD and WITHIN\n * are held to the AA shape (drawn inside, covering the border and a pixel within it, for a border of any width). The colour\n * obligations are the PALETTE's: `--ring` must hold 3:1 against every surface a control sits on, and `--primary-foreground` against\n * `--primary`, in both modes; the named-theme contract test measures both.\n *\n * ## Why every shape restates `outline-solid`\n *\n * Several controls carry `outline-none` (or `outline-hidden`) in their structural classes to suppress\n * the browser's own outline. In Tailwind v4 those set `--tw-outline-style: none`, and `outline-2`\n * reads its style FROM that variable — so `outline-2` alone would draw nothing on exactly those\n * controls. `outline-solid` sets the style explicitly and wins on `:focus-visible` specificity.\n *\n * ## Why this file lives in saas-frontend-lib and not in presets-components-models\n *\n * Tailwind emits a utility only if it finds the class string in a file it scans, and applications\n * scan `saas-frontend-lib` and `presets-components` (source or dist) — never the models package. A\n * class string defined only in the models package produces no CSS at all, silently. Keep these\n * literals here.\n *\n * ## The two restatements, and what holds each to this file\n *\n * - The design-tokens generator (presets-components-models) emits the same shapes as the\n *   `@utility focus-ring-*` declarations of an application's `index.css`, for\n *   markup the application writes itself. It cannot import this file (the dependency runs the other\n *   way), so `generated-focus-utilities.parity.test.ts` in presets-components holds the two equal.\n * - `pnpm check:focus-ring-patterns` refuses a focus indicator drawn by hand anywhere else in the two\n *   scanned packages, unless the site states why in a `focus-indicator-waiver:` comment.\n */\n\n/**\n * @wildo_source:part:start saas.frontend.focus-indicator facet:layer:frontend facet:family:theme facet:audience:app-developer\n *\n * The closed vocabulary of keyboard-focus geometries. Which one a control takes is a question about\n * WHERE the control sits and WHAT its edge means — never about which theme is active.\n *\n * Import from `@wildo-ai/saas-frontend-lib`. Every framework component and every shipped theme\n * already draws focus this way; reach for it yourself only when you make an element focusable that\n * no framework component renders (a custom view's clickable tile, a hand-built row), or when you\n * write a theme's `states.focus`. Never hand-write a `ring-*` focus state: a box-shadow ring is\n * removed in forced-colors mode, and a `ring-offset-*` gap is painted in one fixed colour that is\n * wrong on every surface but the page.\n */\nexport enum FocusIndicatorShape {\n  /**\n   * A standalone control — a button, a link, a checkbox, a switch, a radio, a badge link, a filter\n   * chip, a selectable card. A 2px outline OUTSIDE the box with a 1px transparent gap, so the indicator\n   * never merges with a filled control of the same colour (a primary button) and reads against\n   * whatever surface lies beneath, while staying close enough to read as the control's own edge.\n   */\n  OFFSET = 'offset',\n\n  /**\n   * A control whose border IS its identity — a text input, a textarea, a select or combobox trigger.\n   * An outline drawn INSIDE the box that covers the field's border and the pixel within it: 2px on the\n   * usual 1px border. The edge reads as one solid focus edge, nothing is drawn outside the box (so it\n   * cannot be clipped and does not double the border), and an invalid field keeps its error colour.\n   *\n   * The width follows the border, through `--field-border-width` (1px when unset). A field whose border\n   * is thicker DECLARES it on the element that draws the border (`[--field-border-width:2px]` beside\n   * `border-2`), or the outline would repaint exactly the border and, where the border is the ring\n   * colour (neo-brutalist's 2px foreground edge), change nothing at all. The named-theme contract test\n   * holds every theme's field recipes to declaring the width they draw.\n   *\n   * Why 2px and not 4: a text field matches `:focus-visible` on every mouse click, so its indicator is\n   * the one a user sees most. 4px met the WCAG 2.2 Focus Appearance AAA area (the border pixel changes by\n   * under 3:1 and does not count, so the counted band must be 3px) and was the heaviest line on any\n   * form. 2px meets AA, which is the guarantee; the AAA area on fields was given up on purpose\n   * (2026-10-05, issue #2399).\n   */\n  FIELD = 'field',\n\n  /**\n   * An item packed or clipped inside a container — a menu or listbox option, a sidebar item, a tab, a\n   * segment, a table row, a settings row, a list card in a clipped list. A 2px outline drawn INSIDE the\n   * box (offset −2px), so a clipping ancestor cannot cut it and it never overlaps a neighbour.\n   *\n   * On an item whose FILL the ring cannot clear by 3:1, a 3px band sits inside the outline. Ring is primary\n   * in most palettes, so on a primary fill the outline alone would change no pixel at all; some themes fill\n   * a selected item with foreground or a button with destructive, which their ring clears by about 2:1.\n   * The band's colour is `--focus-band`, which INSET draws as `transparent` unless the element sets it,\n   * and whatever paints such a fill sets it under the same state, to a colour that clears it:\n   *\n   *     data-[state=active]:bg-primary data-[state=active]:[--focus-band:var(--color-primary-foreground)]\n   *     data-[state=on]:bg-foreground data-[state=on]:[--focus-band:var(--color-background)]\n   *\n   * primary-foreground is owed 4.5:1 against primary for text, and background against foreground, so\n   * those bands show. A translucent fill (`dark:bg-destructive/60`) is measured as painted, composited\n   * over each surface beneath it, which can call for a different band colour than the opaque token would.\n   * Every other item gets no visible band, whatever its state. A band in a colour that is not the item's own reads as\n   * a painted gap (the defect this contract replaced), and keying it on \"selected\" instead drew it on\n   * tinted selections and on an active tab PANEL, which Radix also marks `data-state=\"active\"`.\n   *\n   * The band is an inset ring (`--tw-inset-ring-shadow`), a separate layer from the item's own drop shadow\n   * (`--tw-shadow`), so focusing an item never removes its shadow. It does replace an inset ring the item\n   * draws itself (no framework component does). The application's generated stylesheet registers\n   * `--focus-band` with `inherits: false`, so a band declared on a filled card or pill does not reach a\n   * focusable control inside it.\n   */\n  INSET = 'inset',\n\n  /**\n   * A composite whose DOM focus lands on an inner slice — a code editor, an input group, a chips\n   * input, a segmented date entry. The WRAPPER draws the FIELD edge (its border plus a pixel, inside) while any\n   * descendant is focus-visible; an indicator on the inner slice would float mid-row. A composite that\n   * also holds buttons keys the edge on its TEXT slice instead (`has-[textarea:focus-visible]:`), or a\n   * focused button would draw two indicators at once.\n   */\n  WITHIN = 'within',\n}\n\n/**\n * The class strings for each shape. Colour comes from `--ring` (`outline-ring`), which the palette\n * owns; geometry is fixed. A theme composes these into its recipes' `states.focus` and may append to\n * them; components that are not recipe-driven use them directly.\n */\nexport const FOCUS_INDICATOR_CLASSES: Readonly<Record<FocusIndicatorShape, string>> = {\n  [FocusIndicatorShape.OFFSET]: 'focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring',\n  [FocusIndicatorShape.FIELD]:\n    'focus-visible:outline-solid focus-visible:outline-[length:calc(var(--field-border-width,1px)_+_1px)] focus-visible:-outline-offset-[calc(var(--field-border-width,1px)_+_1px)] focus-visible:outline-ring aria-invalid:focus-visible:outline-destructive',\n  [FocusIndicatorShape.INSET]:\n    'focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring focus-visible:inset-ring-5 focus-visible:inset-ring-[color:var(--focus-band,transparent)]',\n  [FocusIndicatorShape.WITHIN]:\n    'has-focus-visible:outline-solid has-focus-visible:outline-[length:calc(var(--field-border-width,1px)_+_1px)] has-focus-visible:-outline-offset-[calc(var(--field-border-width,1px)_+_1px)] has-focus-visible:outline-ring has-[[aria-invalid=true]]:outline-destructive',\n};\n\n/**\n * Shorthand for `FOCUS_INDICATOR_CLASSES[shape]`, for call sites that compose classes inline.\n *\n * @example\n * // A custom view's clickable tile: standalone, so OFFSET.\n * <button className={cn('rounded-lg p-card text-start', focusIndicatorClasses(FocusIndicatorShape.OFFSET))} />\n *\n * // A row in a list that clips its rows: INSET, so the outline is drawn inside the row.\n * <li tabIndex={0} className={cn('px-card py-card-sm', focusIndicatorClasses(FocusIndicatorShape.INSET))} />\n */\nexport function focusIndicatorClasses(shape: FocusIndicatorShape): string {\n  return FOCUS_INDICATOR_CLASSES[shape];\n}\n/** @wildo_source:part:end saas.frontend.focus-indicator */\n"]}

package/dist/esm/core/ui/ui.frontend.schemas.d.ts

@@ -162,6 +162,7 @@ export declare const UIConfigurationSchema: z.ZodObject<{
                 group: z.ZodOptional<z.ZodString>;
                 runtimeAvailability: z.ZodOptional<z.ZodObject<{
                     requiredCapabilities: z.ZodOptional<z.ZodArray<z.ZodString>>;
+                    requiredRoles: z.ZodOptional<z.ZodArray<z.ZodString>>;
                 }, z.core.$strip>>;
                 notificationBadgeRef: z.ZodOptional<z.ZodString>;
             }, z.core.$strip>>>>;
@@ -193,6 +194,7 @@ export declare const UIConfigurationSchema: z.ZodObject<{
                 iconOnly: z.ZodOptional<z.ZodBoolean>;
                 runtimeAvailability: z.ZodOptional<z.ZodObject<{
                     requiredCapabilities: z.ZodOptional<z.ZodArray<z.ZodString>>;
+                    requiredRoles: z.ZodOptional<z.ZodArray<z.ZodString>>;
                 }, z.core.$strip>>;
             }, z.core.$strip>>>>;
         }, z.core.$strip>]>>;
@@ -224,6 +226,7 @@ export declare const UIConfigurationSchema: z.ZodObject<{
                 description: z.ZodOptional<z.ZodString>;
                 runtimeAvailability: z.ZodOptional<z.ZodObject<{
                     requiredCapabilities: z.ZodOptional<z.ZodArray<z.ZodString>>;
+                    requiredRoles: z.ZodOptional<z.ZodArray<z.ZodString>>;
                 }, z.core.$strip>>;
             }, z.core.$strip>>>>;
             emitShortcuts: z.ZodOptional<z.ZodArray<z.ZodObject<{
@@ -277,6 +280,7 @@ export declare const UIConfigurationSchema: z.ZodObject<{
                 displayPolicy: z.ZodOptional<z.ZodEnum<typeof import("../../core/config/app-level-components.frontend.schemas").CommandMenuDisplayPolicy>>;
                 runtimeAvailability: z.ZodOptional<z.ZodObject<{
                     requiredCapabilities: z.ZodOptional<z.ZodArray<z.ZodString>>;
+                    requiredRoles: z.ZodOptional<z.ZodArray<z.ZodString>>;
                 }, z.core.$strip>>;
             }, z.core.$strip>>>>;
             searchResources: z.ZodOptional<z.ZodArray<z.ZodType<import("../../core/config/launcher-items.frontend.schemas").CommandMenuSearchResource, unknown, z.core.$ZodTypeInternals<import("../../core/config/launcher-items.frontend.schemas").CommandMenuSearchResource, unknown>>>>;
@@ -309,6 +313,7 @@ export declare const UIConfigurationSchema: z.ZodObject<{
                 displayPolicy: z.ZodOptional<z.ZodEnum<typeof import("../../core/config/app-level-components.frontend.schemas").QuickActionDisplayPolicy>>;
                 runtimeAvailability: z.ZodOptional<z.ZodObject<{
                     requiredCapabilities: z.ZodOptional<z.ZodArray<z.ZodString>>;
+                    requiredRoles: z.ZodOptional<z.ZodArray<z.ZodString>>;
                 }, z.core.$strip>>;
             }, z.core.$strip>>>>;
         }, z.core.$strip>]>>;
@@ -339,6 +344,7 @@ export declare const UIConfigurationSchema: z.ZodObject<{
                 section: z.ZodOptional<z.ZodString>;
                 runtimeAvailability: z.ZodOptional<z.ZodObject<{
                     requiredCapabilities: z.ZodOptional<z.ZodArray<z.ZodString>>;
+                    requiredRoles: z.ZodOptional<z.ZodArray<z.ZodString>>;
                 }, z.core.$strip>>;
             }, z.core.$strip>>>>;
         }, z.core.$strip>]>>;
@@ -370,6 +376,7 @@ export declare const UIConfigurationSchema: z.ZodObject<{
                 icon: z.ZodString;
                 label: z.ZodString;
             }, z.core.$strip>], "kind">>>;
+            icon: z.ZodOptional<z.ZodString>;
             position: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<HorizontalPlacement.START>, z.ZodLiteral<HorizontalPlacement.END>]>>;
         }, z.core.$strip>]>>;
     }, z.core.$strip>;

package/dist/esm/core/ui/ui.frontend.schemas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.frontend.schemas.d.ts","sourceRoot":"","sources":["../../../../../src/core/ui/ui.frontend.schemas.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAG9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,iEAAiE,CAAC;AAC1G,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAyC1E,eAAO,MAAM,qBAAqB;;;;;;;;8BAas/3B,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC;;;;;;;;;;;;;;8BAAmiC,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC;;;;;;;;;;;;;;8BAAoiC,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC;;;;;;;;;;;;;;0BAAo9B,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;0BAAgiB,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;;;;;;;;;0BAAk2B,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;0BAAmR,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAJzglC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"ui.frontend.schemas.d.ts","sourceRoot":"","sources":["../../../../../src/core/ui/ui.frontend.schemas.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAG9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,iEAAiE,CAAC;AAC1G,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAyC1E,eAAO,MAAM,qBAAqB;;;;;;;;8BAas/3B,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC;;;;;;;;;;;;;;8BAAmiC,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC;;;;;;;;;;;;;;8BAAoiC,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC;;;;;;;;;;;;;;0BAAo9B,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;0BAAgiB,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;;;;;;;;;0BAAk2B,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;0BAAmR,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAJzglC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/esm/core/ui/useThemePreferenceControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThemePreferenceControl.d.ts","sourceRoot":"","sources":["../../../../../src/core/ui/useThemePreferenceControl.ts"],"names":[],"mappings":"AAoCA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;AAK/B,MAAM,WAAW,sBAAsB;IACrC,0FAA0F;IAC1F,eAAe,EAAE,SAAS,CAAC;IAC3B,+EAA+E;IAC/E,WAAW,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC;AA0BD,wBAAgB,yBAAyB,IAAI,sBAAsB,CA0BlE"}
+{"version":3,"file":"useThemePreferenceControl.d.ts","sourceRoot":"","sources":["../../../../../src/core/ui/useThemePreferenceControl.ts"],"names":[],"mappings":"AAoCA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;AAK/B,MAAM,WAAW,sBAAsB;IACrC,0FAA0F;IAC1F,eAAe,EAAE,SAAS,CAAC;IAC3B,+EAA+E;IAC/E,WAAW,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC;AAyBD,wBAAgB,yBAAyB,IAAI,sBAAsB,CA0BlE"}

package/dist/esm/core/ui/useThemePreferenceControl.js

@@ -50,8 +50,7 @@ function findApiCallOperation(registry, resourceType, operationId) {
     return config.operations.find((o) => o.operationIdentifier === operationId
         && o.isOperationDefault === true
         && o.isBulkOperation !== true
-        && (o.variantType === ResourceOperationVariantType.API_CALL
-            || o.variantType === ResourceOperationVariantType.API_CALL_WITH_CALLBACK)) ?? null;
+        && (o.variantType === ResourceOperationVariantType.API_CALL)) ?? null;
 }
 export function useThemePreferenceControl() {
     const { themePreference, setTheme } = useUI();

package/dist/esm/core/ui/useThemePreferenceControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"useThemePreferenceControl.js","sourceRoot":"","sources":["../../../../../src/core/ui/useThemePreferenceControl.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,4BAA4B,EAC5B,kCAAkC,GAEnC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wDAAwD,CAAC;AAU7F;;;;;GAKG;AACH,SAAS,oBAAoB,CAC3B,QAAiD,EACjD,YAAoB,EACpB,WAAmB;IAEnB,MAAM,MAAM,GAAG,QAAQ,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC;IAC7D,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IACzB,OAAO,MAAM,CAAC,UAAU,CAAC,IAAI,CAC3B,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,KAAK,WAAW;WAC5C,CAAC,CAAC,kBAAkB,KAAK,IAAI;WAC7B,CAAC,CAAC,eAAe,KAAK,IAAI;WAC1B,CACD,CAAC,CAAC,WAAW,KAAK,4BAA4B,CAAC,QAAQ;eACpD,CAAC,CAAC,WAAW,KAAK,4BAA4B,CAAC,sBAAsB,CACzE,CACJ,IAAI,IAAI,CAAC;AACZ,CAAC;AAED,MAAM,UAAU,yBAAyB;IACvC,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,CAAC;IAC9C,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAExD,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAgB,EAAQ,EAAE;QACzB,2EAA2E;QAC3E,wEAAwE;QACxE,QAAQ,CAAC,KAAK,CAAC,CAAC;QAEhB,MAAM,SAAS,GAAG,oBAAoB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;QACvH,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,MAAM,aAAa,GAAG,kCAAkC,CAAC,kCAAkC,CAAC,SAAS,CAAC,CAAC;QAEvG,2EAA2E;QAC3E,wEAAwE;QACxE,mEAAmE;QACnE,oCAAoC;QACpC,KAAK,WAAW,CAAC,aAAa,EAAE,EAAE,oBAAoB,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;YACvG,yDAAyD;QAC3D,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAClC,CAAC;IAEF,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC;AAC1C,CAAC","sourcesContent":["/**\n * `useThemePreferenceControl` — the SEMANTIC theme action: \"the user chose a theme\".\n *\n * `useUI().setTheme()` is the MECHANICAL half. It repaints the document\n * (`data-theme` / `.dark`) and mirrors the choice into `localStorage`, and that\n * is deliberately all it does: `UIProvider` sits ABOVE `ResourceRegistryProvider`\n * in the tree, so the UI layer cannot reach a resource transport even in\n * principle. Anything that needs to durably record the choice has to live at or\n * below the registry — which is what this hook is.\n *\n * ## Why the split is load-bearing\n *\n * The two halves were not merely separate, they were UNPAIRED, and the missing\n * half was silently destructive rather than merely absent:\n *\n * - `UserPreferences.ui.theme` is a real persisted field, and `UIProvider`\n *   APPLIES it on every `USER_PREFERENCES_CHANGED` event.\n * - Nothing ever WROTE it. The user-preferences page had dropped its editable\n *   `ui.theme` field on the grounds that the Appearance panel \"owns theme\n *   selection\" — but the panel had only ever owned the local application.\n *\n * So the server's value stayed at its schema default (`AUTO`) forever and was\n * pushed over the user's pick on the next preferences event — login, a refetch,\n * a websocket update. Choosing Dark did not merely fail to follow you to another\n * device; it silently undid itself in place. A read path with no matching write\n * path is worse than no persistence at all, because the stale default becomes\n * authoritative.\n *\n * ## Use this, not `setTheme`, for anything the user did\n *\n * `setTheme` remains correct for applying a theme the app already decided (the\n * boot-time restore, the OS-scheme listener, the preferences event handler).\n * Every USER-initiated selection goes through `selectTheme` so the write cannot\n * be forgotten at the next call site that grows a theme control.\n */\nimport { useCallback } from 'react';\nimport {\n  CoreResourceOperation,\n  CoreResourceType,\n  ResourceOperationVariantType,\n  ResourcesConfig_OperationPathUtils,\n  type UserTheme,\n} from '@wildo-ai/saas-models';\nimport { useUI } from '~wildo-frontend-lib/core/ui/useUI';\nimport { useResourceRegistry } from '~wildo-frontend-lib/core/resources/useResourceRegistry';\nimport type { ResourceRegistryContextType } from '~wildo-frontend-lib/core/resources/ResourceRegistryContext';\n\nexport interface ThemePreferenceControl {\n  /** The user's chosen preference (`LIGHT` / `DARK` / `AUTO`), not the resolved boolean. */\n  themePreference: UserTheme;\n  /** Apply the theme locally AND durably record it on the user's preferences. */\n  selectTheme: (theme: UserTheme) => void;\n}\n\n/**\n * Resolve the default, single-instance, non-bulk API-call operation for a\n * resource — the same shape the guidance persistence path uses. Returns `null`\n * when the resource is not registered in this application, which is a legitimate\n * state (an app may not mount user preferences at all), not an error.\n */\nfunction findApiCallOperation(\n  registry: ResourceRegistryContextType['registry'],\n  resourceType: string,\n  operationId: string,\n) {\n  const config = registry.resourceConfigurations[resourceType];\n  if (!config) return null;\n  return config.operations.find(\n    (o: any) => o.operationIdentifier === operationId\n      && o.isOperationDefault === true\n      && o.isBulkOperation !== true\n      && (\n        o.variantType === ResourceOperationVariantType.API_CALL\n        || o.variantType === ResourceOperationVariantType.API_CALL_WITH_CALLBACK\n      ),\n  ) ?? null;\n}\n\nexport function useThemePreferenceControl(): ThemePreferenceControl {\n  const { themePreference, setTheme } = useUI();\n  const { doOperation, registry } = useResourceRegistry();\n\n  const selectTheme = useCallback(\n    (theme: UserTheme): void => {\n      // Paint first: the control must feel immediate, and the persisted write is\n      // a durability concern, not a precondition for the theme being correct.\n      setTheme(theme);\n\n      const operation = findApiCallOperation(registry, CoreResourceType.USER_SELF_PREFERENCES, CoreResourceOperation.UPDATE);\n      if (!operation) return;\n      const operationPath = ResourcesConfig_OperationPathUtils.buildOperationPathKeyFromOperation(operation);\n\n      // Best-effort, and deliberately not awaited: an offline or unauthenticated\n      // session still gets the local theme, and the next successful selection\n      // reconciles the server. Failing loudly here would turn a cosmetic\n      // preference into a blocking error.\n      void doOperation(operationPath, { contextualParameters: {}, requestData: { ui: { theme } } }).catch(() => {\n        /* see above — the local application already succeeded */\n      });\n    },\n    [doOperation, registry, setTheme],\n  );\n\n  return { themePreference, selectTheme };\n}\n"]}
+{"version":3,"file":"useThemePreferenceControl.js","sourceRoot":"","sources":["../../../../../src/core/ui/useThemePreferenceControl.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,4BAA4B,EAC5B,kCAAkC,GAEnC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wDAAwD,CAAC;AAU7F;;;;;GAKG;AACH,SAAS,oBAAoB,CAC3B,QAAiD,EACjD,YAAoB,EACpB,WAAmB;IAEnB,MAAM,MAAM,GAAG,QAAQ,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC;IAC7D,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IACzB,OAAO,MAAM,CAAC,UAAU,CAAC,IAAI,CAC3B,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,KAAK,WAAW;WAC5C,CAAC,CAAC,kBAAkB,KAAK,IAAI;WAC7B,CAAC,CAAC,eAAe,KAAK,IAAI;WAC1B,CACD,CAAC,CAAC,WAAW,KAAK,4BAA4B,CAAC,QAAQ,CACxD,CACJ,IAAI,IAAI,CAAC;AACZ,CAAC;AAED,MAAM,UAAU,yBAAyB;IACvC,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,CAAC;IAC9C,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAExD,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAgB,EAAQ,EAAE;QACzB,2EAA2E;QAC3E,wEAAwE;QACxE,QAAQ,CAAC,KAAK,CAAC,CAAC;QAEhB,MAAM,SAAS,GAAG,oBAAoB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;QACvH,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,MAAM,aAAa,GAAG,kCAAkC,CAAC,kCAAkC,CAAC,SAAS,CAAC,CAAC;QAEvG,2EAA2E;QAC3E,wEAAwE;QACxE,mEAAmE;QACnE,oCAAoC;QACpC,KAAK,WAAW,CAAC,aAAa,EAAE,EAAE,oBAAoB,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;YACvG,yDAAyD;QAC3D,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAClC,CAAC;IAEF,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC;AAC1C,CAAC","sourcesContent":["/**\n * `useThemePreferenceControl` — the SEMANTIC theme action: \"the user chose a theme\".\n *\n * `useUI().setTheme()` is the MECHANICAL half. It repaints the document\n * (`data-theme` / `.dark`) and mirrors the choice into `localStorage`, and that\n * is deliberately all it does: `UIProvider` sits ABOVE `ResourceRegistryProvider`\n * in the tree, so the UI layer cannot reach a resource transport even in\n * principle. Anything that needs to durably record the choice has to live at or\n * below the registry — which is what this hook is.\n *\n * ## Why the split is load-bearing\n *\n * The two halves were not merely separate, they were UNPAIRED, and the missing\n * half was silently destructive rather than merely absent:\n *\n * - `UserPreferences.ui.theme` is a real persisted field, and `UIProvider`\n *   APPLIES it on every `USER_PREFERENCES_CHANGED` event.\n * - Nothing ever WROTE it. The user-preferences page had dropped its editable\n *   `ui.theme` field on the grounds that the Appearance panel \"owns theme\n *   selection\" — but the panel had only ever owned the local application.\n *\n * So the server's value stayed at its schema default (`AUTO`) forever and was\n * pushed over the user's pick on the next preferences event — login, a refetch,\n * a websocket update. Choosing Dark did not merely fail to follow you to another\n * device; it silently undid itself in place. A read path with no matching write\n * path is worse than no persistence at all, because the stale default becomes\n * authoritative.\n *\n * ## Use this, not `setTheme`, for anything the user did\n *\n * `setTheme` remains correct for applying a theme the app already decided (the\n * boot-time restore, the OS-scheme listener, the preferences event handler).\n * Every USER-initiated selection goes through `selectTheme` so the write cannot\n * be forgotten at the next call site that grows a theme control.\n */\nimport { useCallback } from 'react';\nimport {\n  CoreResourceOperation,\n  CoreResourceType,\n  ResourceOperationVariantType,\n  ResourcesConfig_OperationPathUtils,\n  type UserTheme,\n} from '@wildo-ai/saas-models';\nimport { useUI } from '~wildo-frontend-lib/core/ui/useUI';\nimport { useResourceRegistry } from '~wildo-frontend-lib/core/resources/useResourceRegistry';\nimport type { ResourceRegistryContextType } from '~wildo-frontend-lib/core/resources/ResourceRegistryContext';\n\nexport interface ThemePreferenceControl {\n  /** The user's chosen preference (`LIGHT` / `DARK` / `AUTO`), not the resolved boolean. */\n  themePreference: UserTheme;\n  /** Apply the theme locally AND durably record it on the user's preferences. */\n  selectTheme: (theme: UserTheme) => void;\n}\n\n/**\n * Resolve the default, single-instance, non-bulk API-call operation for a\n * resource — the same shape the guidance persistence path uses. Returns `null`\n * when the resource is not registered in this application, which is a legitimate\n * state (an app may not mount user preferences at all), not an error.\n */\nfunction findApiCallOperation(\n  registry: ResourceRegistryContextType['registry'],\n  resourceType: string,\n  operationId: string,\n) {\n  const config = registry.resourceConfigurations[resourceType];\n  if (!config) return null;\n  return config.operations.find(\n    (o: any) => o.operationIdentifier === operationId\n      && o.isOperationDefault === true\n      && o.isBulkOperation !== true\n      && (\n        o.variantType === ResourceOperationVariantType.API_CALL\n      ),\n  ) ?? null;\n}\n\nexport function useThemePreferenceControl(): ThemePreferenceControl {\n  const { themePreference, setTheme } = useUI();\n  const { doOperation, registry } = useResourceRegistry();\n\n  const selectTheme = useCallback(\n    (theme: UserTheme): void => {\n      // Paint first: the control must feel immediate, and the persisted write is\n      // a durability concern, not a precondition for the theme being correct.\n      setTheme(theme);\n\n      const operation = findApiCallOperation(registry, CoreResourceType.USER_SELF_PREFERENCES, CoreResourceOperation.UPDATE);\n      if (!operation) return;\n      const operationPath = ResourcesConfig_OperationPathUtils.buildOperationPathKeyFromOperation(operation);\n\n      // Best-effort, and deliberately not awaited: an offline or unauthenticated\n      // session still gets the local theme, and the next successful selection\n      // reconciles the server. Failing loudly here would turn a cosmetic\n      // preference into a blocking error.\n      void doOperation(operationPath, { contextualParameters: {}, requestData: { ui: { theme } } }).catch(() => {\n        /* see above — the local application already succeeded */\n      });\n    },\n    [doOperation, registry, setTheme],\n  );\n\n  return { themePreference, selectTheme };\n}\n"]}

package/dist/esm/index.d.ts

@@ -5,6 +5,9 @@ export * from './core/config/launcher-items.frontend.schemas';
 export * from './core/config/verify-launcher-content';
 export * from './core/config/settings-hub.frontend.schemas';
 export * from './core/config/engine-settings-destinations';
+export * from './core/config/directory-provisioning-capabilities.frontend.utils';
+export * from './core/config/relationship-side-capabilities.frontend.utils';
+export * from './core/config/decision-inbox-capability.frontend.utils';
 export * from './core/config/useSettingsHubConfig';
 export * from './core/config/verify-settings-hub-content';
 export * from './core/config/config-merge-utilities';
@@ -29,6 +32,7 @@ export * from './core/execution/execution-failure-handling.utils';
 export * from './core/runtime/app-config-overrides.frontend.definitions';
 export * from './core/commons/devices.frontend.schemas';
 export * from './core/commons/local-storage.frontend.schemas';
+export * from './core/commons/save-blob-as-file.frontend.utils';
 export * from './core/commons/window-event.frontend.schemas';
 export * from './core/errors/ErrorContext';
 export * from './core/errors/useError';
@@ -57,8 +61,10 @@ export * from './core/loading/AppLoadingGate';
 export * from './core/i18n/I18nContext';
 export * from './core/i18n/useI18n';
 export * from './core/i18n/component-label-resolution.utils';
+export * from './core/i18n/regional-preference-resolution.frontend.utils';
 export * from './core/external-providers/frontend-provider-display-label.frontend.utils';
 export * from './core/external-providers/frontend-provider-registry.frontend.service';
+export * from './core/external-providers/chat-sign-in-completion.frontend';
 export * from './core/components-registry/provider-component-registry.frontend.service';
 export * from './core/components-registry/useProviderComponent.frontend.hooks';
 export * from './core/external-providers/provider-file-selection.frontend.utils';
@@ -110,10 +116,16 @@ export * from './core/app-shell/app-shell.schemas';
 export * from './core/app-shell/app-shell.utils';
 export * from './core/branding/useBrandIdentity';
 export * from './core/branding/useBrandPresentation';
+export * from './core/branding/useDisplayableImageUrl';
 export * from './core/app-shell/useAppShellLayout';
 export * from './core/app-shell/usePublicShellLayout';
 export * from './core/app-shell/PortalContainerContext';
 export * from './core/app-shell/AppShellBuildingBlocks';
+export * from './core/app-shell/shell-layout';
+export * from './core/app-shell/shell-motion/shell-motion-vocabulary';
+export * from './core/app-shell/shell-motion/use-shell-motion';
+export * from './core/app-shell/shell-motion/shell-motion-origins';
+export * from './core/app-shell/shell-motion/shell-layout-stylesheet';
 export * from './core/components-registry/ComponentNotInjected';
 export * from './core/components-registry/component-registry.frontend.service';
 export * from './core/components-registry/component-registry.frontend.schemas';
@@ -127,6 +139,7 @@ export * from './core/ui/design-token.utils';
 export * from './core/ui/color-conversion.utils';
 export * from './core/ui/chart-style-defaults';
 export * from './core/ui/themes/default.theme';
+export * from './core/ui/themes/focus-indicator';
 export * from './core/ui/SurfacePolicyContext';
 export * from './core/ui/SurfaceErrorBoundary';
 export * from './core/ui/surface-a11y.utils';
@@ -188,6 +201,7 @@ export * from './core/events/useEventBus';
 export * from './core/events/toast';
 export * from './core/events/NotificationContext';
 export * from './core/events/useNotification';
+export * from './core/events/useNotificationPreferenceKinds';
 export * from './core/events/notification-display-policy.frontend.schemas';
 export * from './core/requests/websockets/WebSocketContext';
 export * from './core/requests/websockets/useWebSocket';
@@ -222,14 +236,23 @@ export * from './core/guidance/renderers/GuidanceSurvey';
 export * from './core/flows-actors/FlowsActorsContext';
 export * from './core/flows-actors/useFlowsActors';
 export * from './core/flows-actors/usePendingDecisions';
+export * from './core/flows-actors/conversation-thread.model';
+export * from './core/flows-actors/conversation-history.model';
+export * from './core/flows-actors/graph-view.model';
+export * from './core/flows-actors/graph-view.layout';
 export * from './components/flows-actors/flows-actors-ui.utils';
+export * from './components/flows-actors/actor';
 export * from './components/flows-actors/flow-node-badges';
+export * from './components/flows-actors/flow-step-visuals';
 export * from './components/flows-actors/flows-actors-graph.lazy';
+export * from './components/flows-actors/graph-viewer.models';
 export * from './components/flows-actors/system-catalog';
 export * from './components/flows-actors/execution-plan';
 export * from './components/flows-actors/task-detail';
 export * from './components/flows-actors/task-memory';
+export * from './components/flows-actors/execution-usage';
 export * from './components/flows-actors/approval';
+export * from './components/flows-actors/human-decision-form';
 export * from './components/flows-actors/artifact-browser';
 export * from './components/flows-actors/agent-config';
 export * from './core/external-providers/frontend-provider-registry.frontend.service';
@@ -241,6 +264,7 @@ export * from './core/hotkey/DefaultHotkeyHandler';
 export * from './core/hotkey/HotkeyShortcutsHelpDialog';
 export * from './core/resources/resource-path.frontend.schemas';
 export * from './core/resources/resources.frontend.schemas';
+export * from './core/resources/ui-behavior-presentation.frontend.utils';
 export * from './core/enums/common-enum-registry';
 export * from './core/automated-layout/automated-layout.frontend.schemas';
 export * from './core/automated-layout/automated-layout.frontend.utils';
@@ -258,6 +282,8 @@ export * from './components/data-display/avatar';
 export type { AvatarCompound } from './components/data-display/avatar';
 export * from './components/data-display/badge';
 export * from './components/data-display/badge-tone';
+export * from './components/data-display/tone-marker';
+export * from './components/data-display/empty-value-mark';
 export * from './components/data-display/notification-indicator';
 export * from './components/data-display/description-list';
 export * from './components/data-display/identifier';
@@ -343,12 +369,14 @@ export * from './components/form/form-context.utils';
 export * from './components/form/automated/useArrayItemAutosaveField';
 export * from './components/form/validation-errors/useServerErrorInjection';
 export * from './components/form/validation-errors/scroll-to-first-error.utils';
+export * from './components/form/validation-errors/field-reveal';
 export * from './components/form/useFormSchemaContext';
 export * from './components/form/combobox';
 export * from './components/form/controls/date-time/calendar';
 export * from './components/form/controls/boolean/checkbox';
 export type { CheckboxCompound } from './components/form/controls/boolean/checkbox';
 export * from './components/form/controls/string/inline-edit-text';
+export * from './components/form/controls/string/chips-input';
 export * from './components/form/controls/string/markdown-editor';
 export * from './components/form/controls/string/color-input';
 export * from './components/form/controls/date-time/date-range-picker';
@@ -457,6 +485,7 @@ export * from './components/sections/collapsible';
 export type { CollapsibleCompound } from './components/sections/collapsible';
 export * from './components/sections/ContentSectionContainer';
 export * from './components/sections/content-section';
+export * from './components/sections/section-legend-voice';
 export * from './components/sections/pagination';
 export type { PaginationCompound } from './components/sections/pagination';
 export * from './components/sections/stacked-layout';
@@ -482,6 +511,7 @@ export * from './components/ai-elements/decision/approval';
 export * from './components/ai-elements/meta/agent-wrappers';
 export * from './components/ai-elements/chat/conversation';
 export type { AI_ConversationCompound } from './components/ai-elements/chat/conversation';
+export * from './components/ai-elements/chat/conversation-thread';
 export * from './components/ai-elements/chat/message';
 export type { AI_MessageCompound } from './components/ai-elements/chat/message';
 export * from './components/ai-elements/chat/prompt-input';
@@ -557,6 +587,7 @@ export * from './components/app/AppLayout_RouterErrorBoundary';
 export * from './components/app/PublicLayout_MainContainer';
 export * from './components/app/PublicLayout_StaticContentContainer';
 export * from './components/app/PublicLayout_Terms';
+export * from './components/app/PublicLayout_LegalNotice';
 export * from './components/auth/Auth_Main';
 export * from './components/auth/Auth_ConfirmEmail';
 export * from './components/auth/Auth_Invitation';
@@ -574,6 +605,7 @@ export * from './core/security/organization-onboarding.frontend.utils';
 export * from './components/auth/Auth_OAuthConsent';
 export * from './components/auth/Auth_OAuthLoggedOut';
 export * from './components/auth/Auth_OAuthLogoutConfirm';
+export * from './components/auth/Auth_ChatIdentityLink';
 export * from './components/auth/admin-config/ResourceLayoutPreset_Create_SamlWizard';
 export * from './components/auth/admin-config/ResourceLayoutPreset_Read_SsoSaml';
 export * from './components/views/composite-view/CompositeViewContext';
@@ -596,6 +628,7 @@ export * from './components/resources/ResourceLayout_Create';
 export * from './components/resources/ResourceLayout_Filters';
 export * from './components/resources/ResourceLayout_Header';
 export * from './components/resources/ResourceLayout_DangerZone';
+export * from './components/resources/ResourceLayout_RecordSharing';
 export * from './components/resources/ResourceLayout_List';
 export * from './components/resources/ResourceLayout_OperationBulk';
 export * from './components/resources/ResourceLayout_OperationsItems';
@@ -621,6 +654,7 @@ export * from './components/resources/skeleton/Section';
 export * from './components/resources/skeleton/WizardLayout';
 export * from './components/resources/skeleton/WizardStep';
 export * from './components/resources/skeleton/Group';
+export * from './components/resources/skeleton/FieldTiles';
 export * from './components/resources/skeleton/ObjectScope';
 export * from './components/resources/skeleton/ArrayField';
 export * from './components/resources/skeleton/ArrayItemTemplate';