@nadicodeai/ui 12.1.106 → 12.1.108

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -19,7 +19,7 @@ export type CollectionToolbarProps = Omit<ComponentPropsWithoutRef<"div">, "chil
19
19
  * @when The row above a collection's rows that holds its search, filters, sort and status.
20
20
  * @instead A page action never sits here: it is `PageActions` on the title's row. Finding across
21
21
  * the product is `CommandDialog`.
22
- * @behaviour Glass on the floating height, held at the top of the scrolling content while the rows
22
+ * @behaviour Glass, the resting surface at 72% with its own edge, held at the top of the scrolling content while the rows
23
23
  * pass under it; inside a titled `TableCard`, on the title's row at its trailing edge, or with `surface="plain"`, the plain row. A search
24
24
  * alone is always the plain row. Below 640 px the search takes the first line and the controls and
25
25
  * the actions stand on one line under it, each scrolling sideways when it outgrows its share, never
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  /*
3
- * A page's collection toolbar is a control bar over its own rows: glass on the
4
- * floating rung, held at the top of the scrolling content while the rows pass
3
+ * A page's collection toolbar is a control bar over its own rows: glass with its own
4
+ * edge, held at the top of the scrolling content while the rows pass
5
5
  * under it (DESIGN.md "Elevation & Depth"). Inside a titled TableCard the bar
6
6
  * stands on the card's solid ground, where glass would show nothing, so there
7
7
  * it is the plain row it always was, and a page whose rows never pass under
@@ -17,7 +17,7 @@ const IN_CARD = "[[data-slot=table-card-toolbar]_&]:relative [[data-slot=table-c
17
17
  * @when The row above a collection's rows that holds its search, filters, sort and status.
18
18
  * @instead A page action never sits here: it is `PageActions` on the title's row. Finding across
19
19
  * the product is `CommandDialog`.
20
- * @behaviour Glass on the floating height, held at the top of the scrolling content while the rows
20
+ * @behaviour Glass, the resting surface at 72% with its own edge, held at the top of the scrolling content while the rows
21
21
  * pass under it; inside a titled `TableCard`, on the title's row at its trailing edge, or with `surface="plain"`, the plain row. A search
22
22
  * alone is always the plain row. Below 640 px the search takes the first line and the controls and
23
23
  * the actions stand on one line under it, each scrolling sideways when it outgrows its share, never
@@ -24,7 +24,7 @@ import { type FieldSize } from "../internal/input-box.js";
24
24
  * open-list button is 30 px high and centred at the default size, full height at `sm` and `lg`).
25
25
  * Colour sits in one place: an error turns the ring red, fills the halo and colours the typed text;
26
26
  * the placeholder, marks and list stay neutral. `label` and `error` go on `ComboboxInput`, and a
27
- * string `label` requires `id`; a box with no name does not compile. The list opens 8 px under it
27
+ * string `label` requires `id`; a box with no name does not compile. The list, a solid floating surface, opens 8 px under it
28
28
  * at its width (a narrower `className` width centres under the box), in a 6 px inset, up to five
29
29
  * and a half rows tall (210 px) so a cut row shows there is more, with rows 36 px tall and no gap.
30
30
  * A row is one line that ends in an ellipsis, with a 16 px mark 12 px before the name and a 14 px
@@ -29,7 +29,7 @@ import { ChevronDownIcon, XIcon, CheckIcon, SearchIcon } from "lucide-react";
29
29
  * open-list button is 30 px high and centred at the default size, full height at `sm` and `lg`).
30
30
  * Colour sits in one place: an error turns the ring red, fills the halo and colours the typed text;
31
31
  * the placeholder, marks and list stay neutral. `label` and `error` go on `ComboboxInput`, and a
32
- * string `label` requires `id`; a box with no name does not compile. The list opens 8 px under it
32
+ * string `label` requires `id`; a box with no name does not compile. The list, a solid floating surface, opens 8 px under it
33
33
  * at its width (a narrower `className` width centres under the box), in a 6 px inset, up to five
34
34
  * and a half rows tall (210 px) so a cut row shows there is more, with rows 36 px tall and no gap.
35
35
  * A row is one line that ends in an ellipsis, with a 16 px mark 12 px before the name and a 14 px
@@ -86,7 +86,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
86
86
  return (_jsx(FieldFrame, { label: label, error: error, size: size, control: props, children: (aria) => (_jsxs(InputGroup, { size: size, className: className, children: [_jsx(InputGroupAddon, { children: _jsx(SearchIcon, { "aria-hidden": "true" }) }), _jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupControl, { disabled: disabled, className: cn("aria-invalid:text-destructive", hasButton && "pr-0") }), ...props, ...aria }), hasButton ? (_jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && triggerLabel !== undefined ? (_jsx(InputGroupButton, { size: "icon", variant: "ghost", "aria-label": triggerLabel, render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "group-data-[size=default]/input-group:h-7.5 group-data-[size=default]/input-group:self-center group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled })) : null, showClear && clearLabel !== undefined ? (_jsx(ComboboxClear, { "aria-label": clearLabel, disabled: disabled })) : null] })) : null, children] })) }));
87
87
  }
88
88
  function ComboboxContent({ className, side = "bottom", sideOffset = 8, align = "center", alignOffset = 0, anchor, empty, children, ...props }) {
89
- return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsxs(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", className: cn("pointer-events-auto", "group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) overflow-hidden rounded-lg border-0 nc-glass text-popover-foreground nc-elevation-floating *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-control-height *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-[0_0_0_1px_color-mix(in_oklab,var(--input)_30%,transparent)]", anchoredOverlayMotion, className), ...props, children: [empty === null ? null : _jsx(ComboboxEmpty, { children: empty }), children] }) }) }));
89
+ return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsxs(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", className: cn("pointer-events-auto", "group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) overflow-hidden rounded-lg border-0 bg-popover text-popover-foreground nc-elevation-floating *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-control-height *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-[0_0_0_1px_color-mix(in_oklab,var(--input)_30%,transparent)]", anchoredOverlayMotion, className), ...props, children: [empty === null ? null : _jsx(ComboboxEmpty, { children: empty }), children] }) }) }));
90
90
  }
91
91
  function ComboboxList({ className, ...props }) {
92
92
  return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("no-scrollbar max-h-[min(--spacing(52.5),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1.5 data-empty:p-0", className), ...props }));
@@ -13,7 +13,7 @@ declare function Command({ className, children, resultCount, ...props }: React.C
13
13
  * @family Navigation
14
14
  * @when "Use CommandMenu for a global, keyboard-first command palette that finds resources and runs actions across the app." (https://vercel.com/geist/command-menu) Ours: finding anything across the product and going there: an Agent, a customer, a page, a creation page (*New Agent*). Opened by ⌘K or the sidebar's Find. It goes to places and never runs a command.
15
15
  * @instead "For a menu opened from a visible trigger on a single resource, use `Menu`; for right-click on a row, use `ContextMenu`." (https://vercel.com/geist/command-menu) "Group items into pages (`Projects`, `Team Settings`) when a single flat list would exceed roughly 30 items or span multiple resource types." (https://vercel.com/geist/command-menu) Ours: those are `DropdownMenu` and `ContextMenu`. One record's commands are its `ActionMenu`. Search inside one collection is `CollectionSearch`. Choosing the page's scope is `ScopeSwitcher`. `CommandDialog` has no pages: its list is groups.
16
- * @behaviour "Bind `⌘K` on macOS and `Ctrl+K` elsewhere. Don’t reuse the binding for any in-page filter input; it’s a global shortcut." (https://vercel.com/geist/command-menu) "Open into the root page; preserve the search query when navigating back from a sub-page so the user’s typing isn’t lost." (https://vercel.com/geist/command-menu) "Trap focus inside the overlay while it’s open and return focus to the previously active element on close." (https://vercel.com/geist/command-menu) "Show a recent or default item set when the input is empty so the menu is useful before typing." (https://vercel.com/geist/command-menu) Ours: opens instantly, 640 px wide and 15% down the window; on a phone it is a bottom sheet, 640 px high with 8 px top corners and the list filling it. The input row stands above the list with a line under it, the field in large type with no icon and an *Esc* key at its end that closes the dialog and is the next stop after the field on Tab; the list scrolls past 436 px. The first row is highlighted on open. No match says so. Every row is 36 px with the pointer cursor, a group's heading is a muted 36 px row, a divider bleeds across the list. A row's shortcut is a `CommandShortcut` and a word or icon at its end is a `CommandSuffix`. Colour carries nothing: the highlighted row is a faint neutral wash with its text unchanged, group headings, suffixes and the empty line are muted, and no row, key or divider takes a hue.
16
+ * @behaviour "Bind `⌘K` on macOS and `Ctrl+K` elsewhere. Don’t reuse the binding for any in-page filter input; it’s a global shortcut." (https://vercel.com/geist/command-menu) "Open into the root page; preserve the search query when navigating back from a sub-page so the user’s typing isn’t lost." (https://vercel.com/geist/command-menu) "Trap focus inside the overlay while it’s open and return focus to the previously active element on close." (https://vercel.com/geist/command-menu) "Show a recent or default item set when the input is empty so the menu is useful before typing." (https://vercel.com/geist/command-menu) Ours: a solid surface, never glass; opens instantly, 640 px wide and 15% down the window; on a phone it is a bottom sheet, 640 px high with 8 px top corners and the list filling it. The input row stands above the list with a line under it, the field in large type with no icon and an *Esc* key at its end that closes the dialog and is the next stop after the field on Tab; the list scrolls past 436 px. The first row is highlighted on open. No match says so. Every row is 36 px with the pointer cursor, a group's heading is a muted 36 px row, a divider bleeds across the list. A row's shortcut is a `CommandShortcut` and a word or icon at its end is a `CommandSuffix`. Colour carries nothing: the highlighted row is a faint neutral wash with its text unchanged, group headings, suffixes and the empty line are muted, and no row, key or divider takes a hue.
17
17
  * @words "`<CommandMenu.Item>` children are Title Case verb phrases (`Deploy Project`, `Invite Team Member`). Avoid navigation phrasing like `Go to project page`; CommandMenu commands act, not browse." (https://vercel.com/geist/command-menu) "`CommandMenuPage.label` is Title Case and names the scope (`Projects`, `Team Settings`)." (https://vercel.com/geist/command-menu) "`CommandMenuPage.placeholder` is sentence case, action-oriented, and ends with `…` (`Search projects…`, `Type a command or search…`). Bare `Search…` is wrong because it doesn’t name the scope." (https://vercel.com/geist/command-menu) "`<CommandMenu.Group heading>` is Title Case, 1–2 words (`Actions`, `Recent`)." (https://vercel.com/geist/command-menu) Ours: groups are plural nouns in sentence case (*Agents*, *Go to*), one or two words. Items are names, or verb and noun for a creation page (*New Agent*), because the dialog goes to places. The placeholder names what is searched, never a bare "Search". No match quotes the query.
18
18
  * @access "Use `aria-live="polite"` on the result count so screen readers hear how the list narrows as the user types." (https://vercel.com/geist/command-menu) "Up/Down arrows move highlight, Enter activates, Escape closes. Backspace at an empty input pops the page stack." (https://vercel.com/geist/command-menu) "Display each item’s `keybind` as a `Kbd` slot so the shortcut is discoverable to sighted users and announced as a label to screen readers." (https://vercel.com/geist/command-menu) Ours: a dialog with a screen-reader `title` and `description`, both required; the *Esc* key is a button named by `closeLabel`, which is required; the field is a combobox over a listbox; the highlighted item is `aria-selected`. A polite live region reads `resultCount` as the list narrows, and it is required. `CommandInput` requires its `placeholder`, `CommandGroup` its `heading` and `CommandItem` its `onSelect`, so no field, group or row is left unnamed or inert; a row with no group stands outside a `CommandGroup`. A shortcut is a `CommandShortcut`, drawn as `kbd` elements. With no pages there is no stack for Backspace to pop.
19
19
  */
@@ -13,7 +13,7 @@ function CommandResultCount({ resultCount }) {
13
13
  return (_jsx("div", { "aria-live": "polite", className: "sr-only", "data-slot": "command-result-count", role: "status", children: resultCount(count) }));
14
14
  }
15
15
  function Command({ className, children, resultCount, ...props }) {
16
- return (_jsxs(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-lg! nc-glass text-popover-foreground", className), ...props, children: [children, _jsx(CommandResultCount, { resultCount: resultCount })] }));
16
+ return (_jsxs(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-lg! bg-popover text-popover-foreground", className), ...props, children: [children, _jsx(CommandResultCount, { resultCount: resultCount })] }));
17
17
  }
18
18
  /**
19
19
  * Find anything across the product and go there.
@@ -21,12 +21,12 @@ function Command({ className, children, resultCount, ...props }) {
21
21
  * @family Navigation
22
22
  * @when "Use CommandMenu for a global, keyboard-first command palette that finds resources and runs actions across the app." (https://vercel.com/geist/command-menu) Ours: finding anything across the product and going there: an Agent, a customer, a page, a creation page (*New Agent*). Opened by ⌘K or the sidebar's Find. It goes to places and never runs a command.
23
23
  * @instead "For a menu opened from a visible trigger on a single resource, use `Menu`; for right-click on a row, use `ContextMenu`." (https://vercel.com/geist/command-menu) "Group items into pages (`Projects`, `Team Settings`) when a single flat list would exceed roughly 30 items or span multiple resource types." (https://vercel.com/geist/command-menu) Ours: those are `DropdownMenu` and `ContextMenu`. One record's commands are its `ActionMenu`. Search inside one collection is `CollectionSearch`. Choosing the page's scope is `ScopeSwitcher`. `CommandDialog` has no pages: its list is groups.
24
- * @behaviour "Bind `⌘K` on macOS and `Ctrl+K` elsewhere. Don’t reuse the binding for any in-page filter input; it’s a global shortcut." (https://vercel.com/geist/command-menu) "Open into the root page; preserve the search query when navigating back from a sub-page so the user’s typing isn’t lost." (https://vercel.com/geist/command-menu) "Trap focus inside the overlay while it’s open and return focus to the previously active element on close." (https://vercel.com/geist/command-menu) "Show a recent or default item set when the input is empty so the menu is useful before typing." (https://vercel.com/geist/command-menu) Ours: opens instantly, 640 px wide and 15% down the window; on a phone it is a bottom sheet, 640 px high with 8 px top corners and the list filling it. The input row stands above the list with a line under it, the field in large type with no icon and an *Esc* key at its end that closes the dialog and is the next stop after the field on Tab; the list scrolls past 436 px. The first row is highlighted on open. No match says so. Every row is 36 px with the pointer cursor, a group's heading is a muted 36 px row, a divider bleeds across the list. A row's shortcut is a `CommandShortcut` and a word or icon at its end is a `CommandSuffix`. Colour carries nothing: the highlighted row is a faint neutral wash with its text unchanged, group headings, suffixes and the empty line are muted, and no row, key or divider takes a hue.
24
+ * @behaviour "Bind `⌘K` on macOS and `Ctrl+K` elsewhere. Don’t reuse the binding for any in-page filter input; it’s a global shortcut." (https://vercel.com/geist/command-menu) "Open into the root page; preserve the search query when navigating back from a sub-page so the user’s typing isn’t lost." (https://vercel.com/geist/command-menu) "Trap focus inside the overlay while it’s open and return focus to the previously active element on close." (https://vercel.com/geist/command-menu) "Show a recent or default item set when the input is empty so the menu is useful before typing." (https://vercel.com/geist/command-menu) Ours: a solid surface, never glass; opens instantly, 640 px wide and 15% down the window; on a phone it is a bottom sheet, 640 px high with 8 px top corners and the list filling it. The input row stands above the list with a line under it, the field in large type with no icon and an *Esc* key at its end that closes the dialog and is the next stop after the field on Tab; the list scrolls past 436 px. The first row is highlighted on open. No match says so. Every row is 36 px with the pointer cursor, a group's heading is a muted 36 px row, a divider bleeds across the list. A row's shortcut is a `CommandShortcut` and a word or icon at its end is a `CommandSuffix`. Colour carries nothing: the highlighted row is a faint neutral wash with its text unchanged, group headings, suffixes and the empty line are muted, and no row, key or divider takes a hue.
25
25
  * @words "`<CommandMenu.Item>` children are Title Case verb phrases (`Deploy Project`, `Invite Team Member`). Avoid navigation phrasing like `Go to project page`; CommandMenu commands act, not browse." (https://vercel.com/geist/command-menu) "`CommandMenuPage.label` is Title Case and names the scope (`Projects`, `Team Settings`)." (https://vercel.com/geist/command-menu) "`CommandMenuPage.placeholder` is sentence case, action-oriented, and ends with `…` (`Search projects…`, `Type a command or search…`). Bare `Search…` is wrong because it doesn’t name the scope." (https://vercel.com/geist/command-menu) "`<CommandMenu.Group heading>` is Title Case, 1–2 words (`Actions`, `Recent`)." (https://vercel.com/geist/command-menu) Ours: groups are plural nouns in sentence case (*Agents*, *Go to*), one or two words. Items are names, or verb and noun for a creation page (*New Agent*), because the dialog goes to places. The placeholder names what is searched, never a bare "Search". No match quotes the query.
26
26
  * @access "Use `aria-live="polite"` on the result count so screen readers hear how the list narrows as the user types." (https://vercel.com/geist/command-menu) "Up/Down arrows move highlight, Enter activates, Escape closes. Backspace at an empty input pops the page stack." (https://vercel.com/geist/command-menu) "Display each item’s `keybind` as a `Kbd` slot so the shortcut is discoverable to sighted users and announced as a label to screen readers." (https://vercel.com/geist/command-menu) Ours: a dialog with a screen-reader `title` and `description`, both required; the *Esc* key is a button named by `closeLabel`, which is required; the field is a combobox over a listbox; the highlighted item is `aria-selected`. A polite live region reads `resultCount` as the list narrows, and it is required. `CommandInput` requires its `placeholder`, `CommandGroup` its `heading` and `CommandItem` its `onSelect`, so no field, group or row is left unnamed or inert; a row with no group stands outside a `CommandGroup`. A shortcut is a `CommandShortcut`, drawn as `kbd` elements. With no pages there is no stack for Backspace to pop.
27
27
  */
28
28
  function CommandDialog({ title, description, children, className, closeLabel, resultCount, filter, ...props }) {
29
- return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-[15%] translate-y-0 overflow-hidden bg-transparent p-0! max-sm:h-160 max-sm:rounded-t-md sm:max-w-160", className), motion: "instant", showCloseButton: false, children: _jsx(CommandDialogCloseLabel.Provider, { value: closeLabel, children: _jsx(Command, { className: "max-sm:rounded-t-md! max-sm:rounded-b-none! **:data-[slot=command-list]:max-h-109 max-sm:**:data-[slot=command-list]:max-h-none max-sm:**:data-[slot=command-list]:flex-1", filter: filter, label: title, resultCount: resultCount, children: children }) }) })] }));
29
+ return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-[15%] translate-y-0 overflow-hidden p-0! max-sm:h-160 max-sm:rounded-t-md sm:max-w-160", className), motion: "instant", showCloseButton: false, children: _jsx(CommandDialogCloseLabel.Provider, { value: closeLabel, children: _jsx(Command, { className: "bg-transparent max-sm:rounded-t-md! max-sm:rounded-b-none! **:data-[slot=command-list]:max-h-109 max-sm:**:data-[slot=command-list]:max-h-none max-sm:**:data-[slot=command-list]:flex-1", filter: filter, label: title, resultCount: resultCount, children: children }) }) })] }));
30
30
  }
31
31
  function CommandInput({ className, ...props }) {
32
32
  const closeLabel = React.useContext(CommandDialogCloseLabel);
@@ -22,7 +22,7 @@ function tokenColor(element, token) {
22
22
  }
23
23
  export function foilColors(element, edition) {
24
24
  return {
25
- graphite: tokenColor(element, "dark-material-floating"),
25
+ graphite: tokenColor(element, "card-graphite"),
26
26
  ink: tokenColor(element, "identity-white"),
27
27
  hues: GPU_FOIL[edition].map((hue) => tokenColor(element, `identity-${hue}`)),
28
28
  };
@@ -7,8 +7,9 @@ type GlassControlShape = "control" | "bar";
7
7
  * @when A control that floats over content passing under it: a period picker over a chart, a bar
8
8
  * over the product view.
9
9
  * @instead A control on a solid ground is drawn plain; glass over nothing reads as a bordered box.
10
- * A toolbar over its own rows is `CollectionToolbar`.
11
- * @behaviour The glass material at the floating height; `shape="control"` takes 6 px corners,
10
+ * A toolbar over its own rows is `CollectionToolbar`. A menu, a popover or a toast is solid, never
11
+ * this.
12
+ * @behaviour Glass, the resting surface at 72% with its own edge, over content that moves under it; `shape="control"` takes 6 px corners,
12
13
  * `shape="bar"` none. The caller renders the element through `render`.
13
14
  * @words None of its own.
14
15
  * @access Takes the semantics of what it renders; the glass is paint.
@@ -1 +1 @@
1
- {"version":3,"file":"glass-control.d.ts","sourceRoot":"","sources":["../../src/components/glass-control.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,KAAK,iBAAiB,GAAG,SAAS,GAAG,KAAK,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,MAAM,EACN,KAAiB,EACjB,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,iBAAiB,CAAA;CAAE,8FAiBjE;AAED,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,CAAC"}
1
+ {"version":3,"file":"glass-control.d.ts","sourceRoot":"","sources":["../../src/components/glass-control.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,KAAK,iBAAiB,GAAG,SAAS,GAAG,KAAK,CAAC;AAE3C;;;;;;;;;;;;;GAaG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,MAAM,EACN,KAAiB,EACjB,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,iBAAiB,CAAA;CAAE,8FAiBjE;AAED,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,CAAC"}
@@ -8,8 +8,9 @@ import { cn } from "../lib/utils.js";
8
8
  * @when A control that floats over content passing under it: a period picker over a chart, a bar
9
9
  * over the product view.
10
10
  * @instead A control on a solid ground is drawn plain; glass over nothing reads as a bordered box.
11
- * A toolbar over its own rows is `CollectionToolbar`.
12
- * @behaviour The glass material at the floating height; `shape="control"` takes 6 px corners,
11
+ * A toolbar over its own rows is `CollectionToolbar`. A menu, a popover or a toast is solid, never
12
+ * this.
13
+ * @behaviour Glass, the resting surface at 72% with its own edge, over content that moves under it; `shape="control"` takes 6 px corners,
13
14
  * `shape="bar"` none. The caller renders the element through `render`.
14
15
  * @words None of its own.
15
16
  * @access Takes the semantics of what it renders; the glass is paint.
@@ -1,14 +1,14 @@
1
1
  import * as React from "react";
2
2
  import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
3
3
  /**
4
- * A small control set tied to its trigger, on glass.
4
+ * A small control set tied to its trigger, on a solid floating surface.
5
5
  *
6
6
  * @family Menus
7
7
  * @when A small control set tied to its trigger: filters, a scope chooser, a date range, a feedback
8
8
  * form. The page stays live behind it.
9
9
  * @instead For commands use `DropdownMenu`. For a form that adds a record use `FormDialog`. For one
10
10
  * phrase use `Tooltip`; for facts on hover use `HoverCard`.
11
- * @behaviour Glass floating surface, 12 px padding and gap. Opens on click, closes on Escape or
11
+ * @behaviour Solid floating surface, 12 px padding and gap. Opens on click, closes on Escape or
12
12
  * outside press, focus returns to the trigger. Applies at once; no Save inside.
13
13
  * @words Title names the control's job (*Filter skills*); an optional one-line description. Options
14
14
  * are nouns.
@@ -3,14 +3,14 @@ import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
3
3
  import { cn } from "../lib/utils.js";
4
4
  import { anchoredOverlayMotion } from "../lib/motion.js";
5
5
  /**
6
- * A small control set tied to its trigger, on glass.
6
+ * A small control set tied to its trigger, on a solid floating surface.
7
7
  *
8
8
  * @family Menus
9
9
  * @when A small control set tied to its trigger: filters, a scope chooser, a date range, a feedback
10
10
  * form. The page stays live behind it.
11
11
  * @instead For commands use `DropdownMenu`. For a form that adds a record use `FormDialog`. For one
12
12
  * phrase use `Tooltip`; for facts on hover use `HoverCard`.
13
- * @behaviour Glass floating surface, 12 px padding and gap. Opens on click, closes on Escape or
13
+ * @behaviour Solid floating surface, 12 px padding and gap. Opens on click, closes on Escape or
14
14
  * outside press, focus returns to the trigger. Applies at once; no Save inside.
15
15
  * @words Title names the control's job (*Filter skills*); an optional one-line description. Options
16
16
  * are nouns.
@@ -24,7 +24,7 @@ function PopoverTrigger({ ...props }) {
24
24
  return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
25
25
  }
26
26
  function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, anchor, ...props }) {
27
- return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, anchor: anchor, className: "isolate z-50", children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn("pointer-events-auto", "z-50 flex w-72 flex-col gap-control-padding-inline rounded-lg border-0 nc-glass p-control-padding-inline text-sm text-popover-foreground nc-elevation-floating outline-hidden", anchoredOverlayMotion, className), ...props }) }) }));
27
+ return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, anchor: anchor, className: "isolate z-50", children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn("pointer-events-auto", "z-50 flex w-72 flex-col gap-control-padding-inline rounded-lg border-0 bg-popover p-control-padding-inline text-sm text-popover-foreground nc-elevation-floating outline-hidden", anchoredOverlayMotion, className), ...props }) }) }));
28
28
  }
29
29
  function PopoverHeader({ className, ...props }) {
30
30
  return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-0.5 text-sm", className), ...props }));
@@ -18,7 +18,7 @@ import { type FieldSize } from "../internal/input-box.js";
18
18
  * and fills the halo, and colours the message; the fill, the value, the chevron and the label stay
19
19
  * neutral. It shows the chosen value, after an optional `prefix` mark, with the chevron at the end
20
20
  * in the muted grey (a `suffix` mark takes the chevron's place), and fills its container; it keeps
21
- * the hover edge while its list is open. The list opens under it, 8 px away, never covering the
21
+ * the hover edge while its list is open. The list, a solid floating surface, opens under it, 8 px away, never covering the
22
22
  * trigger (`alignItemWithTrigger` is off), in a 6 px inset, with a 14 px check at the chosen row's
23
23
  * end, rows 36 px tall and no gap between them; a row that cannot be chosen turns its text muted,
24
24
  * never dimmed. Arrows, typing, Enter, Escape. A placeholder reads in the muted grey and is never
@@ -23,7 +23,7 @@ import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
23
23
  * and fills the halo, and colours the message; the fill, the value, the chevron and the label stay
24
24
  * neutral. It shows the chosen value, after an optional `prefix` mark, with the chevron at the end
25
25
  * in the muted grey (a `suffix` mark takes the chevron's place), and fills its container; it keeps
26
- * the hover edge while its list is open. The list opens under it, 8 px away, never covering the
26
+ * the hover edge while its list is open. The list, a solid floating surface, opens under it, 8 px away, never covering the
27
27
  * trigger (`alignItemWithTrigger` is off), in a 6 px inset, with a 14 px check at the chosen row's
28
28
  * end, rows 36 px tall and no gap between them; a row that cannot be chosen turns its text muted,
29
29
  * never dimmed. Arrows, typing, Enter, Escape. A placeholder reads in the muted grey and is never
@@ -74,7 +74,7 @@ function SelectTrigger({ className, size = "default", prefix, suffix, label, des
74
74
  return (_jsx(FieldFrame, { label: label, description: description, error: error, size: size, control: props, children: (aria) => (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, "data-field-frame": "", className: cn(selectTriggerVariants({ size }), fieldStates, fieldOpen, className), ...props, ...aria, children: [prefix ? (_jsx("span", { "data-slot": "select-prefix", "aria-hidden": "true", className: "mr-1.5 flex shrink-0 items-center text-muted-foreground", children: prefix })) : null, children, suffix ? (_jsx("span", { "data-slot": "select-suffix", "aria-hidden": "true", className: "flex shrink-0 items-center text-muted-foreground", children: suffix })) : (_jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) }))] })) }));
75
75
  }
76
76
  function SelectContent({ className, children, side = "bottom", sideOffset = 8, align = "center", alignOffset = 0, alignItemWithTrigger = false, ...props }) {
77
- return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("pointer-events-auto", "relative isolate z-50 max-h-(--available-height) w-auto max-w-(--available-width) min-w-(--anchor-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 nc-glass text-popover-foreground nc-elevation-floating data-[align-trigger=true]:transition-none", anchoredOverlayMotion, className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { className: "p-1.5", children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
77
+ return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("pointer-events-auto", "relative isolate z-50 max-h-(--available-height) w-auto max-w-(--available-width) min-w-(--anchor-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 bg-popover text-popover-foreground nc-elevation-floating data-[align-trigger=true]:transition-none", anchoredOverlayMotion, className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { className: "p-1.5", children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
78
78
  }
79
79
  function SelectLabel({ className, ...props }) {
80
80
  return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));
@@ -86,9 +86,9 @@ function SelectSeparator({ className, ...props }) {
86
86
  return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props }));
87
87
  }
88
88
  function SelectScrollUpButton({ className, ...props }) {
89
- return (_jsx(SelectPrimitive.ScrollUpArrow, { "data-slot": "select-scroll-up-button", className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center nc-glass py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronUpIcon, {}) }));
89
+ return (_jsx(SelectPrimitive.ScrollUpArrow, { "data-slot": "select-scroll-up-button", className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronUpIcon, {}) }));
90
90
  }
91
91
  function SelectScrollDownButton({ className, ...props }) {
92
- return (_jsx(SelectPrimitive.ScrollDownArrow, { "data-slot": "select-scroll-down-button", className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center nc-glass py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronDownIcon, {}) }));
92
+ return (_jsx(SelectPrimitive.ScrollDownArrow, { "data-slot": "select-scroll-down-button", className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronDownIcon, {}) }));
93
93
  }
94
94
  export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, selectTriggerVariants, SelectValue, };
@@ -12,7 +12,7 @@ type ToasterOwnProps = Omit<ToasterProps, "closeButton" | "containerAriaLabel" |
12
12
  * @family Feedback
13
13
  * @when "A succinct message that is displayed temporarily." (https://vercel.com/geist/toast) "Use a toast for non-blocking acknowledgments of user-initiated actions: `Domain added`, `Project archived`, `Deployment canceled`." (https://vercel.com/geist/toast) "Pick the method by how the user experienced the event, not by HTTP status. A user-canceled deploy is `toasts.message('Deployment canceled')`, not `success`. A partial deploy with skipped routes is `toasts.warning(...)`." (https://vercel.com/geist/toast) Ours: mount it once and raise toasts through `showMessageToast`. `toasts.message` is the tone `info`, and `success`, `warning` and `error` keep their names.
14
14
  * @instead "Don’t use a toast alone for billing failures, permission denials, or build failures the user has to triage. Pair a ≤6-word toast (`Build failed`) with a persistent row carrying the recovery step and a stable identifier." (https://vercel.com/geist/toast) "Field-level validation belongs on the `Input`, not in a toast. Persistent configuration warnings belong in `Note` or `Banner`." (https://vercel.com/geist/toast) Ours: the persistent row is a `MessageNotice`, a field's wrong value stays on the field (`FieldError`), and a lasting condition is a `NoticeBanner`.
15
- * @behaviour "Default toasts auto-dismiss; pass `preserve` only when the user must read or act on the message before it disappears." (https://vercel.com/geist/toast) "Undo snackbars stay on screen for 5–10 seconds and pair the past-tense toast with a single `Undo` action button." (https://vercel.com/geist/toast) "Don’t stack toasts to narrate one async flow; emit the success or error toast at the terminal step." (https://vercel.com/geist/toast) Ours: `showMessageToast` takes no `preserve`, so every toast leaves after 6 s, which is also the Undo window; the first action with a handler becomes the toast's one button. Colour sits on the whole toast: `success` fills it with the accent blue (Geist's blue success, the same hue as an `info` note), `warning` and `error` with their solid colour, each with that colour's text; `info` stays the plain surface. The tone's mark stays, because a tone must read without colour and the hidden tone word Geist uses would need a word in the product's language that `showMessageToast` does not take. A toast is 420 px wide at most, 16 px padded, with a close button of 32 px at its trailing edge. A toast that stays up shows the waiting line, not a spinner. Required: `closeLabel` and `regionLabel`, because the close button and the region need a name in the product's language.
15
+ * @behaviour "Default toasts auto-dismiss; pass `preserve` only when the user must read or act on the message before it disappears." (https://vercel.com/geist/toast) "Undo snackbars stay on screen for 5–10 seconds and pair the past-tense toast with a single `Undo` action button." (https://vercel.com/geist/toast) "Don’t stack toasts to narrate one async flow; emit the success or error toast at the terminal step." (https://vercel.com/geist/toast) Ours: `showMessageToast` takes no `preserve`, so every toast leaves after 6 s, which is also the Undo window; the first action with a handler becomes the toast's one button. Colour sits on the whole toast: `success` fills it with the accent blue (Geist's blue success, the same hue as an `info` note), `warning` and `error` with their solid colour, each with that colour's text; `info` stays the solid floating surface, never glass. The tone's mark stays, because a tone must read without colour and the hidden tone word Geist uses would need a word in the product's language that `showMessageToast` does not take. A toast is 420 px wide at most, 16 px padded, with a close button of 32 px at its trailing edge. A toast that stays up shows the waiting line, not a spinner. Required: `closeLabel` and `regionLabel`, because the close button and the region need a name in the product's language.
16
16
  * @words "One sentence, sentence case, no trailing period when the toast is a single sentence." (https://vercel.com/geist/toast) "Completion toasts follow `{Noun} {past-participle}`: `Blob deleted`, `Domain added`, `Environment variable saved`. Never include `successfully`; the action name implies it." (https://vercel.com/geist/toast) "Error toasts are two sentences with periods and end with a recovery step: `Couldn’t verify domain. Try again.` Use `Couldn’t` for user-state errors and `Failed to` for system or infra errors; match adjacent shipped copy and don’t flip mid-flow." (https://vercel.com/geist/toast) "Pair the toast verb 1:1 with the destructive button verb (`Delete Project` then `Project deleted`, never `Project removed`)." (https://vercel.com/geist/toast) "Undo snackbars use the literal label `Undo`, never `Restore`, `Bring Back`, or `Cancel`. Only use the pattern when the rollback is safe." (https://vercel.com/geist/toast) Ours: the words come from the catalogue; *Mailbox removed* pairs with its button *Remove mailbox*.
17
17
  * @access "The toast region announces with `aria-live="polite"`; reserve `assertive` for blocking errors that interrupt a flow." (https://vercel.com/geist/toast) "Don’t put primary navigation inside a toast; transient surfaces vanish before keyboard users can reach them." (https://vercel.com/geist/toast) Ours: the toaster's live region is named by `regionLabel` and the close button by `closeLabel`. Navigation is never the only route to recovery: the record's own row keeps its controls. Undo is reachable by keyboard (Alt+T moves focus to the toasts) while it shows.
18
18
  */
@@ -1 +1 @@
1
- {"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/components/sonner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AAQ9D,KAAK,aAAa,GAAG;IACnB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,eAAe,GAAG,IAAI,CACzB,YAAY,EACZ,aAAa,GAAG,oBAAoB,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAC7E,CAAC;AAEF;;;;;;;;;GASG;AACH,QAAA,MAAM,OAAO,GAAI,uCAAuC,eAAe,GAAG,aAAa,gCAiDtF,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
1
+ {"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/components/sonner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AAQ9D,KAAK,aAAa,GAAG;IACnB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,eAAe,GAAG,IAAI,CACzB,YAAY,EACZ,aAAa,GAAG,oBAAoB,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAC7E,CAAC;AAEF;;;;;;;;;GASG;AACH,QAAA,MAAM,OAAO,GAAI,uCAAuC,eAAe,GAAG,aAAa,gCAgDtF,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
@@ -12,7 +12,7 @@ const TOAST_DURATION_MS = 6000;
12
12
  * @family Feedback
13
13
  * @when "A succinct message that is displayed temporarily." (https://vercel.com/geist/toast) "Use a toast for non-blocking acknowledgments of user-initiated actions: `Domain added`, `Project archived`, `Deployment canceled`." (https://vercel.com/geist/toast) "Pick the method by how the user experienced the event, not by HTTP status. A user-canceled deploy is `toasts.message('Deployment canceled')`, not `success`. A partial deploy with skipped routes is `toasts.warning(...)`." (https://vercel.com/geist/toast) Ours: mount it once and raise toasts through `showMessageToast`. `toasts.message` is the tone `info`, and `success`, `warning` and `error` keep their names.
14
14
  * @instead "Don’t use a toast alone for billing failures, permission denials, or build failures the user has to triage. Pair a ≤6-word toast (`Build failed`) with a persistent row carrying the recovery step and a stable identifier." (https://vercel.com/geist/toast) "Field-level validation belongs on the `Input`, not in a toast. Persistent configuration warnings belong in `Note` or `Banner`." (https://vercel.com/geist/toast) Ours: the persistent row is a `MessageNotice`, a field's wrong value stays on the field (`FieldError`), and a lasting condition is a `NoticeBanner`.
15
- * @behaviour "Default toasts auto-dismiss; pass `preserve` only when the user must read or act on the message before it disappears." (https://vercel.com/geist/toast) "Undo snackbars stay on screen for 5–10 seconds and pair the past-tense toast with a single `Undo` action button." (https://vercel.com/geist/toast) "Don’t stack toasts to narrate one async flow; emit the success or error toast at the terminal step." (https://vercel.com/geist/toast) Ours: `showMessageToast` takes no `preserve`, so every toast leaves after 6 s, which is also the Undo window; the first action with a handler becomes the toast's one button. Colour sits on the whole toast: `success` fills it with the accent blue (Geist's blue success, the same hue as an `info` note), `warning` and `error` with their solid colour, each with that colour's text; `info` stays the plain surface. The tone's mark stays, because a tone must read without colour and the hidden tone word Geist uses would need a word in the product's language that `showMessageToast` does not take. A toast is 420 px wide at most, 16 px padded, with a close button of 32 px at its trailing edge. A toast that stays up shows the waiting line, not a spinner. Required: `closeLabel` and `regionLabel`, because the close button and the region need a name in the product's language.
15
+ * @behaviour "Default toasts auto-dismiss; pass `preserve` only when the user must read or act on the message before it disappears." (https://vercel.com/geist/toast) "Undo snackbars stay on screen for 5–10 seconds and pair the past-tense toast with a single `Undo` action button." (https://vercel.com/geist/toast) "Don’t stack toasts to narrate one async flow; emit the success or error toast at the terminal step." (https://vercel.com/geist/toast) Ours: `showMessageToast` takes no `preserve`, so every toast leaves after 6 s, which is also the Undo window; the first action with a handler becomes the toast's one button. Colour sits on the whole toast: `success` fills it with the accent blue (Geist's blue success, the same hue as an `info` note), `warning` and `error` with their solid colour, each with that colour's text; `info` stays the solid floating surface, never glass. The tone's mark stays, because a tone must read without colour and the hidden tone word Geist uses would need a word in the product's language that `showMessageToast` does not take. A toast is 420 px wide at most, 16 px padded, with a close button of 32 px at its trailing edge. A toast that stays up shows the waiting line, not a spinner. Required: `closeLabel` and `regionLabel`, because the close button and the region need a name in the product's language.
16
16
  * @words "One sentence, sentence case, no trailing period when the toast is a single sentence." (https://vercel.com/geist/toast) "Completion toasts follow `{Noun} {past-participle}`: `Blob deleted`, `Domain added`, `Environment variable saved`. Never include `successfully`; the action name implies it." (https://vercel.com/geist/toast) "Error toasts are two sentences with periods and end with a recovery step: `Couldn’t verify domain. Try again.` Use `Couldn’t` for user-state errors and `Failed to` for system or infra errors; match adjacent shipped copy and don’t flip mid-flow." (https://vercel.com/geist/toast) "Pair the toast verb 1:1 with the destructive button verb (`Delete Project` then `Project deleted`, never `Project removed`)." (https://vercel.com/geist/toast) "Undo snackbars use the literal label `Undo`, never `Restore`, `Bring Back`, or `Cancel`. Only use the pattern when the rollback is safe." (https://vercel.com/geist/toast) Ours: the words come from the catalogue; *Mailbox removed* pairs with its button *Remove mailbox*.
17
17
  * @access "The toast region announces with `aria-live="polite"`; reserve `assertive` for blocking errors that interrupt a flow." (https://vercel.com/geist/toast) "Don’t put primary navigation inside a toast; transient surfaces vanish before keyboard users can reach them." (https://vercel.com/geist/toast) Ours: the toaster's live region is named by `regionLabel` and the close button by `closeLabel`. Navigation is never the only route to recovery: the record's own row keeps its controls. Undo is reachable by keyboard (Alt+T moves focus to the toasts) while it shows.
18
18
  */
@@ -30,7 +30,7 @@ const Toaster = ({ closeLabel, regionLabel, ...props }) => {
30
30
  },
31
31
  // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
32
32
  style: {
33
- "--normal-bg": "color-mix(in srgb, var(--popover) var(--nc-material-glass-opacity), transparent)",
33
+ "--normal-bg": "var(--nc-material-floating)",
34
34
  "--normal-text": "var(--popover-foreground)",
35
35
  "--normal-border": "transparent",
36
36
  "--border-radius": "var(--radius-lg)",
@@ -38,7 +38,7 @@ const Toaster = ({ closeLabel, regionLabel, ...props }) => {
38
38
  }, toastOptions: {
39
39
  closeButtonAriaLabel: closeLabel,
40
40
  classNames: {
41
- toast: "nc-toast nc-glass nc-elevation-floating min-h-16 pr-16! text-body-sm!",
41
+ toast: "nc-toast nc-elevation-floating min-h-16 pr-16! text-body-sm!",
42
42
  title: "font-normal!",
43
43
  description: "text-current!",
44
44
  closeButton: "top-4! right-4! left-auto! size-8! transform-none! rounded-sm! border-0! bg-transparent! opacity-100! hover:bg-current/10!",
@@ -1,8 +1,8 @@
1
1
  /**
2
- * A dropdown and a context menu carry the same commands, so both take this floating glass surface (DESIGN.md
3
- * "Elevation & Depth"): the content under an open menu stays in view, saturated, behind its rows.
2
+ * A dropdown and a context menu carry the same commands, so both take this one solid floating surface (DESIGN.md
3
+ * "Elevation & Depth").
4
4
  */
5
- export declare const menuSurface = "group/menu z-50 max-h-(--available-height) w-max min-w-[min(12.5rem,var(--available-width))] max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 nc-glass p-1.5 text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden";
5
+ export declare const menuSurface = "group/menu z-50 max-h-(--available-height) w-max min-w-[min(12.5rem,var(--available-width))] max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 bg-popover p-1.5 text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden";
6
6
  /**
7
7
  * Every row of a menu, whatever it holds, so the parts of one menu never differ in height. A row that can be
8
8
  * chosen shows the pointer cursor; one that cannot turns its text muted, never dimmed, keeps the default cursor
@@ -1 +1 @@
1
- {"version":3,"file":"menu-surface.d.ts","sourceRoot":"","sources":["../../src/internal/menu-surface.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,uRAC8P,CAAC;AAEvR;;;;;GAKG;AACH,eAAO,MAAM,OAAO,8iBACyhB,CAAC"}
1
+ {"version":3,"file":"menu-surface.d.ts","sourceRoot":"","sources":["../../src/internal/menu-surface.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,yRACgQ,CAAC;AAEzR;;;;;GAKG;AACH,eAAO,MAAM,OAAO,8iBACyhB,CAAC"}
@@ -1,8 +1,8 @@
1
1
  /**
2
- * A dropdown and a context menu carry the same commands, so both take this floating glass surface (DESIGN.md
3
- * "Elevation & Depth"): the content under an open menu stays in view, saturated, behind its rows.
2
+ * A dropdown and a context menu carry the same commands, so both take this one solid floating surface (DESIGN.md
3
+ * "Elevation & Depth").
4
4
  */
5
- export const menuSurface = "group/menu z-50 max-h-(--available-height) w-max min-w-[min(12.5rem,var(--available-width))] max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 nc-glass p-1.5 text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden";
5
+ export const menuSurface = "group/menu z-50 max-h-(--available-height) w-max min-w-[min(12.5rem,var(--available-width))] max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 bg-popover p-1.5 text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden";
6
6
  /**
7
7
  * Every row of a menu, whatever it holds, so the parts of one menu never differ in height. A row that can be
8
8
  * chosen shows the pointer cursor; one that cannot turns its text muted, never dimmed, keeps the default cursor
@@ -1 +1 @@
1
- {"version":3,"file":"foundations.d.ts","sourceRoot":"","sources":["../../src/showcase/foundations.tsx"],"names":[],"mappings":"AA0FA,wBAAgB,WAAW,gCAqI1B"}
1
+ {"version":3,"file":"foundations.d.ts","sourceRoot":"","sources":["../../src/showcase/foundations.tsx"],"names":[],"mappings":"AAiGA,wBAAgB,WAAW,gCAmJ1B"}
@@ -1,12 +1,12 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { Search } from "lucide-react";
3
+ import { ChevronDown, Copy, Pencil, Search } from "lucide-react";
4
4
  import { AgentOrb } from "../components/agent-orb.js";
5
5
  import { Alert, AlertDescription, AlertTitle } from "../components/alert.js";
6
- import { BrandField } from "../components/brand-field.js";
7
6
  import { Button } from "../components/button.js";
8
7
  import { Card, CardDescription, CardHeader, CardTitle } from "../components/card.js";
9
8
  import { CardRow } from "../components/card-row.js";
9
+ import { DropdownMenu, DropdownMenuCommand, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuTrigger, } from "../components/dropdown-menu.js";
10
10
  import { GlassControl } from "../components/glass-control.js";
11
11
  import { Input } from "../components/input.js";
12
12
  import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "../components/popover.js";
@@ -65,5 +65,5 @@ function Group({ title, children }) {
65
65
  return (_jsxs("section", { "aria-label": title, className: "grid gap-4", children: [_jsx("h3", { className: "text-sm font-semibold", children: title }), children] }));
66
66
  }
67
67
  export function Foundations() {
68
- return (_jsxs("div", { className: "grid gap-12", children: [_jsxs(Group, { title: "Colour", children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-3 lg:grid-cols-6", children: [NEUTRAL_ROLES.map(([role, fill]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md border border-border ${fill}` }), _jsx(Name, { children: role })] }, role))), EDGE_ROLES.map(([role, edge]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md border-2 bg-background ${edge}` }), _jsx(Name, { children: role })] }, role)))] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-5", children: CHART_ROLES.map(([role, fill]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md ${fill}` }), _jsx(Name, { children: role })] }, role))) }), _jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [_jsxs(Alert, { variant: "info", children: [_jsx(AlertTitle, { children: "Info" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "info-soft" }) })] }), _jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: "Warning" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "warning-soft" }) })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTitle, { children: "Error" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "destructive-soft" }) })] })] })] }), _jsxs(Group, { title: "Type", children: [_jsx("div", { className: "grid gap-4", children: TYPE_TOKENS.map(([token, typeClass, sample]) => (_jsxs("div", { className: "grid gap-1 border-b border-border pb-4 last:border-0", children: [_jsx(Name, { children: token }), _jsx("p", { className: `m-0 ${typeClass}`, children: sample })] }, token))) }), _jsx("div", { className: "grid gap-4", children: EMPHASIS_ROLES.map(([token, typeClass, textClass, lead, emphasised]) => (_jsxs("div", { className: "grid gap-1 border-b border-border pb-4 last:border-0", children: [_jsx(Name, { children: token }), _jsxs("p", { className: `m-0 ${typeClass}`, children: [lead, " ", _jsx("strong", { children: emphasised })] }), _jsxs("p", { className: `m-0 ${textClass}`, children: [lead, " ", _jsx("strong", { children: emphasised })] })] }, token))) })] }), _jsx(Group, { title: "Heights", children: _jsxs(CardRow, { columns: 3, from: "md", children: [["resting", "raised", "outlined", "plain"].map((surface) => (_jsx(Card, { surface: surface, children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "capitalize", children: surface }), _jsxs(CardDescription, { className: "grid gap-1", children: [_jsx(Name, { children: `Card surface="${surface}"` }), _jsx(Name, { children: `${SURFACE_CORNERS[surface]} px corner` })] })] }) }, surface))), ["floating", "modal"].map((height) => (_jsxs("div", { className: `nc-elevation-${height} grid gap-1 rounded-md bg-popover p-6 text-popover-foreground`, children: [_jsx("p", { className: "text-base font-semibold capitalize", children: height }), _jsx(Name, { children: `nc-elevation-${height}` })] }, height)))] }) }), _jsx(Group, { title: "Glass", children: _jsx("div", { className: "overflow-hidden rounded-md", children: _jsxs(BrandField, { className: "relative isolate grid min-h-80 content-center p-6 sm:p-10", children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 -z-10 flex items-center justify-around", children: [_jsx(AgentOrb, { color: COBALTO, decorative: true, form: "globe", motion: "ambient", size: 160 }), _jsx(AgentOrb, { color: VERDE, decorative: true, form: "network", motion: "ambient", size: 96 }), _jsx(AgentOrb, { color: ARANCIO, decorative: true, form: "morph", motion: "ambient", size: 160 })] }), _jsxs(GlassControl, { className: "mx-auto flex w-full max-w-3xl flex-wrap gap-2 p-2", children: [_jsx("div", { className: "min-w-48 flex-1", children: _jsx(Input, { "aria-label": "Find", placeholder: "Find an Agent", prefix: _jsx(Search, { "aria-hidden": "true" }) }) }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { render: _jsx(Button, { variant: "outline", children: "Popover" }) }), _jsx(PopoverContent, { align: "end", children: _jsxs(PopoverHeader, { children: [_jsx(PopoverTitle, { children: "Glass over colour" }), _jsx(PopoverDescription, { children: "The stage and the moving Agents show through." })] }) })] })] })] }) }) })] }));
68
+ return (_jsxs("div", { className: "grid gap-12", children: [_jsxs(Group, { title: "Colour", children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-3 lg:grid-cols-6", children: [NEUTRAL_ROLES.map(([role, fill]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md border border-border ${fill}` }), _jsx(Name, { children: role })] }, role))), EDGE_ROLES.map(([role, edge]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md border-2 bg-background ${edge}` }), _jsx(Name, { children: role })] }, role)))] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-5", children: CHART_ROLES.map(([role, fill]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md ${fill}` }), _jsx(Name, { children: role })] }, role))) }), _jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [_jsxs(Alert, { variant: "info", children: [_jsx(AlertTitle, { children: "Info" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "info-soft" }) })] }), _jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: "Warning" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "warning-soft" }) })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTitle, { children: "Error" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "destructive-soft" }) })] })] })] }), _jsxs(Group, { title: "Type", children: [_jsx("div", { className: "grid gap-4", children: TYPE_TOKENS.map(([token, typeClass, sample]) => (_jsxs("div", { className: "grid gap-1 border-b border-border pb-4 last:border-0", children: [_jsx(Name, { children: token }), _jsx("p", { className: `m-0 ${typeClass}`, children: sample })] }, token))) }), _jsx("div", { className: "grid gap-4", children: EMPHASIS_ROLES.map(([token, typeClass, textClass, lead, emphasised]) => (_jsxs("div", { className: "grid gap-1 border-b border-border pb-4 last:border-0", children: [_jsx(Name, { children: token }), _jsxs("p", { className: `m-0 ${typeClass}`, children: [lead, " ", _jsx("strong", { children: emphasised })] }), _jsxs("p", { className: `m-0 ${textClass}`, children: [lead, " ", _jsx("strong", { children: emphasised })] })] }, token))) })] }), _jsx(Group, { title: "Heights", children: _jsxs(CardRow, { columns: 3, from: "md", children: [["resting", "raised", "outlined", "plain"].map((surface) => (_jsx(Card, { surface: surface, children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "capitalize", children: surface }), _jsxs(CardDescription, { className: "grid gap-1", children: [_jsx(Name, { children: `Card surface="${surface}"` }), _jsx(Name, { children: `${SURFACE_CORNERS[surface]} px corner` })] })] }) }, surface))), ["floating", "modal"].map((height) => (_jsxs("div", { className: `nc-elevation-${height} grid gap-1 rounded-lg bg-popover p-6 text-popover-foreground`, children: [_jsx("p", { className: "text-base font-semibold capitalize", children: height }), _jsx(Name, { children: `nc-elevation-${height}` })] }, height)))] }) }), _jsx(Group, { title: "Glass", children: _jsxs("div", { className: "relative isolate grid min-h-80 content-center overflow-hidden rounded-md bg-background p-6 sm:p-10", children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 -z-10 flex items-center justify-around", children: [_jsx(AgentOrb, { color: COBALTO, decorative: true, form: "globe", motion: "ambient", size: 160 }), _jsx(AgentOrb, { color: VERDE, decorative: true, form: "network", motion: "ambient", size: 96 }), _jsx(AgentOrb, { color: ARANCIO, decorative: true, form: "morph", motion: "ambient", size: 160 })] }), _jsxs(GlassControl, { className: "mx-auto flex w-full max-w-3xl flex-wrap gap-2 p-2", children: [_jsx("div", { className: "min-w-48 flex-1", children: _jsx(Input, { "aria-label": "Find", placeholder: "Find an Agent", prefix: _jsx(Search, { "aria-hidden": "true" }) }) }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { render: _jsx(Button, { variant: "outline", children: "Popover" }) }), _jsx(PopoverContent, { align: "end", children: _jsxs(PopoverHeader, { children: [_jsx(PopoverTitle, { children: "Solid over the glass" }), _jsx(PopoverDescription, { children: "The bar is glass because the Agents move under it. What opens from it is solid." })] }) })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { suffix: _jsx(ChevronDown, {}), variant: "outline", children: "Menu" }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Orders Agent" }), _jsx(DropdownMenuCommand, { icon: _jsx(Pencil, {}), children: "Rename Agent" }), _jsx(DropdownMenuCommand, { icon: _jsx(Copy, {}), children: "Copy link" })] }) })] })] })] }) })] }));
69
69
  }
@@ -1 +1 @@
1
- {"version":3,"file":"menus.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/menus.tsx"],"names":[],"mappings":"AAkHA,iBAAS,mBAAmB,gCA8B3B;AAED,iBAAS,gBAAgB,gCA0BxB;AAqDD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;CA+MS,CAAC"}
1
+ {"version":3,"file":"menus.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/menus.tsx"],"names":[],"mappings":"AAmHA,iBAAS,mBAAmB,gCA8B3B;AAED,iBAAS,gBAAgB,gCA0BxB;AAqDD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;CAwNS,CAAC"}
@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { ArrowRightLeft, ChevronDown, Copy, Pencil, Settings2, Trash2 } from "lucide-react";
4
4
  import { useState } from "react";
5
5
  import { AccountMenu } from "../../components/account-menu.js";
6
+ import { AgentOrb } from "../../components/agent-orb.js";
6
7
  import { ActionContextMenu, ActionMenu } from "../../components/action-menu.js";
7
8
  import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "../../components/alert-dialog.js";
8
9
  import { Button } from "../../components/button.js";
@@ -18,7 +19,7 @@ import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitl
18
19
  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/select.js";
19
20
  import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "../../components/sheet.js";
20
21
  import { ThemeModeMenu } from "../../components/theme-mode-switcher.js";
21
- import { nothing, RECORD_COMMANDS } from "../samples.js";
22
+ import { COBALTO, nothing, RECORD_COMMANDS, VERDE } from "../samples.js";
22
23
  const THEME_LABELS = { light: "Light", dark: "Dark", system: "System" };
23
24
  const REGIONS = [
24
25
  { value: "fra1", label: "Frankfurt" },
@@ -86,7 +87,7 @@ export const MENUS = {
86
87
  Dialog: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, { variant: "outline", children: "Add MCP server" }) }), _jsxs(DialogContent, { closeLabel: "Close", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add MCP server" }), _jsx(DialogDescription, { children: "Agents can call its tools once it is added." })] }), _jsx(DialogBody, { children: _jsx(Input, { id: "showcase-mcp-url", label: "Address", placeholder: "https://mcp.acme.it", type: "url" }) }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { render: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(Button, { children: "Add server" })] })] })] }), _jsx(CreateDatabaseDialog, {}), _jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, { variant: "outline", children: "Connect mailbox" }) }), _jsxs(DialogContent, { closeLabel: "Close", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "pec@acme.it is connected" }), _jsx(DialogDescription, { children: "Agents can read and send from this address." })] }), _jsx(DialogFooter, { children: _jsx(DialogClose, { render: _jsx(Button, { children: "Done" }) }) })] })] })] })),
87
88
  Drawer: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs(Drawer, { height: 320, children: [_jsx(DrawerTrigger, { render: _jsx(Button, { variant: "outline", children: "Connect Telegram" }) }), _jsxs(DrawerContent, { children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Connect Telegram" }), _jsx(DrawerDescription, { children: "Step 1 of 2: open the bot on your phone." })] }), _jsx(DrawerBody, { className: "text-sm text-muted-foreground", children: "Scan the code with Telegram, then come back here." }), _jsxs(DrawerFooter, { children: [_jsx(Button, { children: "Continue" }), _jsx(DrawerClose, { render: _jsx(Button, { variant: "outline", children: "Cancel" }) })] })] })] }), _jsx("span", { className: "text-sm text-muted-foreground", children: "Phone only: it rises from the bottom edge." })] })),
88
89
  DropdownMenu: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { suffix: _jsx(ChevronDown, {}), variant: "outline", children: "Actions" }) }), _jsxs(DropdownMenuContent, { align: "start", children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "pec@acme.it" }), _jsx(DropdownMenuCommand, { icon: _jsx(Pencil, {}), children: "Rename mailbox" }), _jsx(DropdownMenuCommand, { icon: _jsx(Copy, {}), suffix: _jsx(Kbd, { meta: true, size: "sm", children: "C" }), children: "Copy address" }), _jsx(DropdownMenuCommand, { disabledReason: "Connect the mailbox first", icon: _jsx(Copy, {}), children: "Copy password" })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuCommand, { icon: _jsx(Trash2, {}), variant: "destructive", children: "Remove mailbox" })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { suffix: _jsx(ChevronDown, {}), variant: "outline", children: "Manage" }) }), _jsx(DropdownMenuContent, { align: "start", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Rossi Ottica" }), _jsx(DropdownMenuLink, { href: "#billing", children: "Open billing" }), _jsx(DropdownMenuCommand, { icon: _jsx(ArrowRightLeft, {}), locked: true, reason: "Only an owner can transfer a mailbox", children: "Transfer mailbox" })] }) })] })] })),
89
- GlassControl: () => (_jsxs(GlassControl, { className: "flex w-fit items-center gap-2 p-2", children: [_jsx(Button, { variant: "ghost", children: "Day" }), _jsx(Button, { variant: "ghost", children: "Week" }), _jsx(Button, { variant: "ghost", children: "Month" })] })),
90
+ GlassControl: () => (_jsxs("div", { className: "relative isolate grid min-h-40 place-items-center overflow-hidden rounded-md p-6", children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 -z-10 flex items-center justify-around", children: [_jsx(AgentOrb, { color: COBALTO, decorative: true, form: "globe", motion: "ambient", size: 96 }), _jsx(AgentOrb, { color: VERDE, decorative: true, form: "network", motion: "ambient", size: 96 })] }), _jsxs(GlassControl, { className: "flex w-fit items-center gap-2 p-2", children: [_jsx(Button, { variant: "ghost", children: "Day" }), _jsx(Button, { variant: "ghost", children: "Week" }), _jsx(Button, { variant: "ghost", children: "Month" })] })] })),
90
91
  MenuChoiceRow: MenuRowsSpecimen,
91
92
  Popover: () => (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { render: _jsx(Button, { variant: "outline", children: "Filter" }) }), _jsx(PopoverContent, { align: "start", children: _jsxs(PopoverHeader, { children: [_jsx(PopoverTitle, { children: "Filter skills" }), _jsx(PopoverDescription, { children: "Show the skills every Agent has." })] }) })] })),
92
93
  Sheet: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Sheet, { children: [_jsx(SheetTrigger, { render: _jsx(Button, { variant: "outline", children: "Inspect Rossi Ottica" }) }), _jsx(RossiOtticaSheet, {})] }), _jsxs(Sheet, { modal: true, children: [_jsx(SheetTrigger, { render: _jsx(Button, { variant: "outline", children: "Inspect Rossi Ottica, page dimmed" }) }), _jsx(RossiOtticaSheet, {})] })] })),
@@ -76,7 +76,7 @@ export const USAGE = [
76
76
  summary: "A collection's control bar: its filters, its search and its sort, over its own rows.",
77
77
  when: "The row above a collection's rows that holds its search, filters, sort and status.",
78
78
  instead: "A page action never sits here: it is `PageActions` on the title's row. Finding across the product is `CommandDialog`.",
79
- behaviour: "Glass on the floating height, held at the top of the scrolling content while the rows pass under it; inside a titled `TableCard`, on the title's row at its trailing edge, or with `surface=\"plain\"`, the plain row. A search alone is always the plain row. Below 640 px the search takes the first line and the controls and the actions stand on one line under it, each scrolling sideways when it outgrows its share, never wrapping into a second; each line contains what it scrolls, a chip's hidden label included, so the page never scrolls with it.",
79
+ behaviour: "Glass, the resting surface at 72% with its own edge, held at the top of the scrolling content while the rows pass under it; inside a titled `TableCard`, on the title's row at its trailing edge, or with `surface=\"plain\"`, the plain row. A search alone is always the plain row. Below 640 px the search takes the first line and the controls and the actions stand on one line under it, each scrolling sideways when it outgrows its share, never wrapping into a second; each line contains what it scrolls, a chip's hidden label included, so the page never scrolls with it.",
80
80
  words: "The label names the collection's tools: *Customer filters*.",
81
81
  access: '`role="toolbar"` named by `label`.',
82
82
  },
@@ -483,7 +483,7 @@ export const USAGE = [
483
483
  summary: "Type to find one value, or several, in a known set.",
484
484
  when: '"Filters large lists to selectable options based on the matching query." (https://vercel.com/geist/combobox) "Pick `<Combobox>` when users type to filter a known list of values (regions, frameworks, env-var names)." (https://vercel.com/geist/combobox) Ours: assign an Agent, choose a time zone, add several Agents at once with `multiple`.',
485
485
  instead: '"For short, fixed lists where typing adds nothing, switch to `Select`." (https://vercel.com/geist/combobox) "When more than one value can be chosen at once, use `MultiSelect`." (https://vercel.com/geist/combobox) "For free-form filter strings that don’t resolve to a single option, drop in `Input` with the `search` variant." (https://vercel.com/geist/combobox) Ours: several values chosen from a list you scan rather than type into is a `MultiSelect`; `Combobox` takes several with `multiple`. `Input` has no `search` variant, so free text is an `Input` and narrowing a collection is `CollectionFilters`.',
486
- behaviour: 'The box is `Input`\'s: its three sizes (`size` on `ComboboxInput`), its ring, hover, focus halo and disabled, with the search mark at the start, a `placeholder` that names the scope, and the open-list or clear button flush at the end, in the muted grey until hovered (the open-list button is 30 px high and centred at the default size, full height at `sm` and `lg`). Colour sits in one place: an error turns the ring red, fills the halo and colours the typed text; the placeholder, marks and list stay neutral. `label` and `error` go on `ComboboxInput`, and a string `label` requires `id`; a box with no name does not compile. The list opens 8 px under it at its width (a narrower `className` width centres under the box), in a 6 px inset, up to five and a half rows tall (210 px) so a cut row shows there is more, with rows 36 px tall and no gap. A row is one line that ends in an ellipsis, with a 16 px mark 12 px before the name and a 14 px check at the chosen row\'s end, after the name. A row that cannot be chosen turns its text muted, never dimmed. Typing filters the list. "Options can opt out of the fixed row height with `ignoreDefaultHeight` to render multi-line content (e.g. a shared environment variable name plus its target). The list sizes each row to its content and stays scrollable." (https://vercel.com/geist/combobox) Ours: there is no `ignoreDefaultHeight`; a two-line row is an explicit column child. "Show a loading state for async results; don’t collapse the list while the request is in flight." (https://vercel.com/geist/combobox) Ours: while results load the list stays and `ComboboxLoading` says so, and the chosen value stays; `ComboboxContent` requires `empty`, the sentence for no match, or `null` while a search is still running. "Render a custom empty state of the form `No {items} match "{query}"` rather than a bare `No results`." (https://vercel.com/geist/combobox) "Keep arrow-key navigation through `<Combobox.Option>` items; don’t hijack Enter to submit the surrounding form while the list is open." (https://vercel.com/geist/combobox) "Set `clearable` to show a clear button when a value is selected." (https://vercel.com/geist/combobox) Ours: `showClear` with a `clearLabel` does it; clear empties the box and keeps focus there. With `multiple`, each choice is a chip with its own remove; Backspace in an empty box removes the last. "It is common to use Combobox inside a Modal. On mobile, the Modal automatically renders a Dialog instead." (https://vercel.com/geist/combobox) "Inside a `Modal`, Geist switches to a Dialog on mobile automatically; don’t layer a second portal." (https://vercel.com/geist/combobox) Ours: our overlay is `Dialog`, and `ComboboxContent` is the list\'s one portal.',
486
+ behaviour: 'The box is `Input`\'s: its three sizes (`size` on `ComboboxInput`), its ring, hover, focus halo and disabled, with the search mark at the start, a `placeholder` that names the scope, and the open-list or clear button flush at the end, in the muted grey until hovered (the open-list button is 30 px high and centred at the default size, full height at `sm` and `lg`). Colour sits in one place: an error turns the ring red, fills the halo and colours the typed text; the placeholder, marks and list stay neutral. `label` and `error` go on `ComboboxInput`, and a string `label` requires `id`; a box with no name does not compile. The list, a solid floating surface, opens 8 px under it at its width (a narrower `className` width centres under the box), in a 6 px inset, up to five and a half rows tall (210 px) so a cut row shows there is more, with rows 36 px tall and no gap. A row is one line that ends in an ellipsis, with a 16 px mark 12 px before the name and a 14 px check at the chosen row\'s end, after the name. A row that cannot be chosen turns its text muted, never dimmed. Typing filters the list. "Options can opt out of the fixed row height with `ignoreDefaultHeight` to render multi-line content (e.g. a shared environment variable name plus its target). The list sizes each row to its content and stays scrollable." (https://vercel.com/geist/combobox) Ours: there is no `ignoreDefaultHeight`; a two-line row is an explicit column child. "Show a loading state for async results; don’t collapse the list while the request is in flight." (https://vercel.com/geist/combobox) Ours: while results load the list stays and `ComboboxLoading` says so, and the chosen value stays; `ComboboxContent` requires `empty`, the sentence for no match, or `null` while a search is still running. "Render a custom empty state of the form `No {items} match "{query}"` rather than a bare `No results`." (https://vercel.com/geist/combobox) "Keep arrow-key navigation through `<Combobox.Option>` items; don’t hijack Enter to submit the surrounding form while the list is open." (https://vercel.com/geist/combobox) "Set `clearable` to show a clear button when a value is selected." (https://vercel.com/geist/combobox) Ours: `showClear` with a `clearLabel` does it; clear empties the box and keeps focus there. With `multiple`, each choice is a chip with its own remove; Backspace in an empty box removes the last. "It is common to use Combobox inside a Modal. On mobile, the Modal automatically renders a Dialog instead." (https://vercel.com/geist/combobox) "Inside a `Modal`, Geist switches to a Dialog on mobile automatically; don’t layer a second portal." (https://vercel.com/geist/combobox) Ours: our overlay is `Dialog`, and `ComboboxContent` is the list\'s one portal.',
487
487
  words: '"Visible label is a short Title Case noun (`Region`, `Environment Variable Name`)." (https://vercel.com/geist/combobox) "Placeholder is the inline hint: `Search regions`, `DATABASE_URL`. Never bare `Search…` and never the label restated." (https://vercel.com/geist/combobox) "Option text is Title Case for short values and matches canonical branding (`Next.js`, not `NextJS`); same register across the list." (https://vercel.com/geist/combobox) "Validation names the field and constraint, sentence case with a period (`Select a region.`)." (https://vercel.com/geist/combobox) Ours: the label and the rows are sentence case. The hint is scoped: *Find an Agent*. No match quotes the query: *No Agent matches “Xy”.* A chip reads as the record\'s name.',
488
488
  access: '"`<Combobox>` has no `label` prop; pair a sibling `<Label htmlFor>` with the root `id`, or set `aria-label` on the root for icon-only triggers." (https://vercel.com/geist/combobox) "The root accepts `aria-label` only; there is no `aria-labelledby` prop, so the sibling-label path is the way to reference visible text." (https://vercel.com/geist/combobox) "Trap focus inside the popover when nested in a `Modal` so Tab cycles options instead of the page behind it." (https://vercel.com/geist/combobox) Ours: `ComboboxInput` takes a visible `label` tied to the box by `id`, or `aria-label` or `aria-labelledby`; combobox and listbox roles; the open-list and clear buttons are named by `triggerLabel` and `clearLabel`; each chip\'s remove is named: *Remove Acme Quotes*. An Agent\'s orb in a row is a decorative mark beside her name.',
489
489
  },
@@ -549,7 +549,7 @@ export const USAGE = [
549
549
  summary: "A short fixed list in our style, opened from a trigger that shows the choice.",
550
550
  when: '"Display a dropdown list of items." (https://vercel.com/geist/select) "Pick `<Select>` for short, fixed lists (under ~10 items) where typing adds nothing; switch to `Combobox` once filtering helps." (https://vercel.com/geist/select) Ours: four or more options, each short enough to need no sentence: how often a task runs.',
551
551
  instead: '"Use `MultiSelect` when more than one value can be chosen at once; use `Switch` for a 2–3 option segmented choice." (https://vercel.com/geist/select) Ours: two or three options are radios or a segmented control. Inside a native form a long list is `NativeSelect`.',
552
- behaviour: 'The trigger is `Input`\'s box: its sizes, its ring, hover, focus halo and disabled, the label above it and the message under it. Colour sits in one place: an error turns the ring red and fills the halo, and colours the message; the fill, the value, the chevron and the label stay neutral. It shows the chosen value, after an optional `prefix` mark, with the chevron at the end in the muted grey (a `suffix` mark takes the chevron\'s place), and fills its container; it keeps the hover edge while its list is open. The list opens under it, 8 px away, never covering the trigger (`alignItemWithTrigger` is off), in a 6 px inset, with a 14 px check at the chosen row\'s end, rows 36 px tall and no gap between them; a row that cannot be chosen turns its text muted, never dimmed. Arrows, typing, Enter, Escape. A placeholder reads in the muted grey and is never an option. `label` and `error` go on `SelectTrigger`, and a string `label` requires `id`; a trigger with no name does not compile. "Group options past ~10 items with native `<optgroup>`; Geist `<Select>` has no `.Group` static." (https://vercel.com/geist/select) Ours: group the options with `SelectGroup`. "Validate on blur and pass a string to `error`; messages name the field and end in a period (`Select a framework.`)." (https://vercel.com/geist/select) "Don’t wrap a labelled `<Select>` in a `Tooltip`; put the hint on a sibling icon button so the label stays announced." (https://vercel.com/geist/select) Other form rules are `Field`\'s.',
552
+ behaviour: 'The trigger is `Input`\'s box: its sizes, its ring, hover, focus halo and disabled, the label above it and the message under it. Colour sits in one place: an error turns the ring red and fills the halo, and colours the message; the fill, the value, the chevron and the label stay neutral. It shows the chosen value, after an optional `prefix` mark, with the chevron at the end in the muted grey (a `suffix` mark takes the chevron\'s place), and fills its container; it keeps the hover edge while its list is open. The list, a solid floating surface, opens under it, 8 px away, never covering the trigger (`alignItemWithTrigger` is off), in a 6 px inset, with a 14 px check at the chosen row\'s end, rows 36 px tall and no gap between them; a row that cannot be chosen turns its text muted, never dimmed. Arrows, typing, Enter, Escape. A placeholder reads in the muted grey and is never an option. `label` and `error` go on `SelectTrigger`, and a string `label` requires `id`; a trigger with no name does not compile. "Group options past ~10 items with native `<optgroup>`; Geist `<Select>` has no `.Group` static." (https://vercel.com/geist/select) Ours: group the options with `SelectGroup`. "Validate on blur and pass a string to `error`; messages name the field and end in a period (`Select a framework.`)." (https://vercel.com/geist/select) "Don’t wrap a labelled `<Select>` in a `Tooltip`; put the hint on a sibling icon button so the label stays announced." (https://vercel.com/geist/select) Other form rules are `Field`\'s.',
553
553
  words: '"Options are Title Case when short and match canonical branding (`Next.js`, not `NextJS`); keep the same register across the list." (https://vercel.com/geist/select) "Label is a short Title Case noun (`Framework`, `Region`); accept the prop directly on `<Select>`." (https://vercel.com/geist/select) "Placeholder is action-oriented (`Select a framework`), never `Choose one…`, `Pick`, or the label restated." (https://vercel.com/geist/select) Ours: options are parallel phrases in sentence case (*Every hour*, *Every weekday*), the label is a short noun in sentence case, and the trigger never says *Select…* or *Choose one*.',
554
554
  access: "A visible label tied to the trigger by `id`, or `aria-label` or `aria-labelledby`. Listbox and option roles from Base UI; focus returns to the trigger on close. The prefix and suffix are decorative and not part of the trigger's name.",
555
555
  },
@@ -835,7 +835,7 @@ export const USAGE = [
835
835
  summary: "Find anything across the product and go there.",
836
836
  when: '"Use CommandMenu for a global, keyboard-first command palette that finds resources and runs actions across the app." (https://vercel.com/geist/command-menu) Ours: finding anything across the product and going there: an Agent, a customer, a page, a creation page (*New Agent*). Opened by ⌘K or the sidebar\'s Find. It goes to places and never runs a command.',
837
837
  instead: '"For a menu opened from a visible trigger on a single resource, use `Menu`; for right-click on a row, use `ContextMenu`." (https://vercel.com/geist/command-menu) "Group items into pages (`Projects`, `Team Settings`) when a single flat list would exceed roughly 30 items or span multiple resource types." (https://vercel.com/geist/command-menu) Ours: those are `DropdownMenu` and `ContextMenu`. One record\'s commands are its `ActionMenu`. Search inside one collection is `CollectionSearch`. Choosing the page\'s scope is `ScopeSwitcher`. `CommandDialog` has no pages: its list is groups.',
838
- behaviour: '"Bind `⌘K` on macOS and `Ctrl+K` elsewhere. Don’t reuse the binding for any in-page filter input; it’s a global shortcut." (https://vercel.com/geist/command-menu) "Open into the root page; preserve the search query when navigating back from a sub-page so the user’s typing isn’t lost." (https://vercel.com/geist/command-menu) "Trap focus inside the overlay while it’s open and return focus to the previously active element on close." (https://vercel.com/geist/command-menu) "Show a recent or default item set when the input is empty so the menu is useful before typing." (https://vercel.com/geist/command-menu) Ours: opens instantly, 640 px wide and 15% down the window; on a phone it is a bottom sheet, 640 px high with 8 px top corners and the list filling it. The input row stands above the list with a line under it, the field in large type with no icon and an *Esc* key at its end that closes the dialog and is the next stop after the field on Tab; the list scrolls past 436 px. The first row is highlighted on open. No match says so. Every row is 36 px with the pointer cursor, a group\'s heading is a muted 36 px row, a divider bleeds across the list. A row\'s shortcut is a `CommandShortcut` and a word or icon at its end is a `CommandSuffix`. Colour carries nothing: the highlighted row is a faint neutral wash with its text unchanged, group headings, suffixes and the empty line are muted, and no row, key or divider takes a hue.',
838
+ behaviour: '"Bind `⌘K` on macOS and `Ctrl+K` elsewhere. Don’t reuse the binding for any in-page filter input; it’s a global shortcut." (https://vercel.com/geist/command-menu) "Open into the root page; preserve the search query when navigating back from a sub-page so the user’s typing isn’t lost." (https://vercel.com/geist/command-menu) "Trap focus inside the overlay while it’s open and return focus to the previously active element on close." (https://vercel.com/geist/command-menu) "Show a recent or default item set when the input is empty so the menu is useful before typing." (https://vercel.com/geist/command-menu) Ours: a solid surface, never glass; opens instantly, 640 px wide and 15% down the window; on a phone it is a bottom sheet, 640 px high with 8 px top corners and the list filling it. The input row stands above the list with a line under it, the field in large type with no icon and an *Esc* key at its end that closes the dialog and is the next stop after the field on Tab; the list scrolls past 436 px. The first row is highlighted on open. No match says so. Every row is 36 px with the pointer cursor, a group\'s heading is a muted 36 px row, a divider bleeds across the list. A row\'s shortcut is a `CommandShortcut` and a word or icon at its end is a `CommandSuffix`. Colour carries nothing: the highlighted row is a faint neutral wash with its text unchanged, group headings, suffixes and the empty line are muted, and no row, key or divider takes a hue.',
839
839
  words: '"`<CommandMenu.Item>` children are Title Case verb phrases (`Deploy Project`, `Invite Team Member`). Avoid navigation phrasing like `Go to project page`; CommandMenu commands act, not browse." (https://vercel.com/geist/command-menu) "`CommandMenuPage.label` is Title Case and names the scope (`Projects`, `Team Settings`)." (https://vercel.com/geist/command-menu) "`CommandMenuPage.placeholder` is sentence case, action-oriented, and ends with `…` (`Search projects…`, `Type a command or search…`). Bare `Search…` is wrong because it doesn’t name the scope." (https://vercel.com/geist/command-menu) "`<CommandMenu.Group heading>` is Title Case, 1–2 words (`Actions`, `Recent`)." (https://vercel.com/geist/command-menu) Ours: groups are plural nouns in sentence case (*Agents*, *Go to*), one or two words. Items are names, or verb and noun for a creation page (*New Agent*), because the dialog goes to places. The placeholder names what is searched, never a bare "Search". No match quotes the query.',
840
840
  access: '"Use `aria-live="polite"` on the result count so screen readers hear how the list narrows as the user types." (https://vercel.com/geist/command-menu) "Up/Down arrows move highlight, Enter activates, Escape closes. Backspace at an empty input pops the page stack." (https://vercel.com/geist/command-menu) "Display each item’s `keybind` as a `Kbd` slot so the shortcut is discoverable to sighted users and announced as a label to screen readers." (https://vercel.com/geist/command-menu) Ours: a dialog with a screen-reader `title` and `description`, both required; the *Esc* key is a button named by `closeLabel`, which is required; the field is a combobox over a listbox; the highlighted item is `aria-selected`. A polite live region reads `resultCount` as the list narrows, and it is required. `CommandInput` requires its `placeholder`, `CommandGroup` its `heading` and `CommandItem` its `onSelect`, so no field, group or row is left unnamed or inert; a row with no group stands outside a `CommandGroup`. A shortcut is a `CommandShortcut`, drawn as `kbd` elements. With no pages there is no stack for Backspace to pop.',
841
841
  },
@@ -1385,7 +1385,7 @@ export const USAGE = [
1385
1385
  summary: "The one place toasts appear, mounted once per product.",
1386
1386
  when: '"A succinct message that is displayed temporarily." (https://vercel.com/geist/toast) "Use a toast for non-blocking acknowledgments of user-initiated actions: `Domain added`, `Project archived`, `Deployment canceled`." (https://vercel.com/geist/toast) "Pick the method by how the user experienced the event, not by HTTP status. A user-canceled deploy is `toasts.message(\'Deployment canceled\')`, not `success`. A partial deploy with skipped routes is `toasts.warning(...)`." (https://vercel.com/geist/toast) Ours: mount it once and raise toasts through `showMessageToast`. `toasts.message` is the tone `info`, and `success`, `warning` and `error` keep their names.',
1387
1387
  instead: '"Don’t use a toast alone for billing failures, permission denials, or build failures the user has to triage. Pair a ≤6-word toast (`Build failed`) with a persistent row carrying the recovery step and a stable identifier." (https://vercel.com/geist/toast) "Field-level validation belongs on the `Input`, not in a toast. Persistent configuration warnings belong in `Note` or `Banner`." (https://vercel.com/geist/toast) Ours: the persistent row is a `MessageNotice`, a field\'s wrong value stays on the field (`FieldError`), and a lasting condition is a `NoticeBanner`.',
1388
- behaviour: "\"Default toasts auto-dismiss; pass `preserve` only when the user must read or act on the message before it disappears.\" (https://vercel.com/geist/toast) \"Undo snackbars stay on screen for 5–10 seconds and pair the past-tense toast with a single `Undo` action button.\" (https://vercel.com/geist/toast) \"Don’t stack toasts to narrate one async flow; emit the success or error toast at the terminal step.\" (https://vercel.com/geist/toast) Ours: `showMessageToast` takes no `preserve`, so every toast leaves after 6 s, which is also the Undo window; the first action with a handler becomes the toast's one button. Colour sits on the whole toast: `success` fills it with the accent blue (Geist's blue success, the same hue as an `info` note), `warning` and `error` with their solid colour, each with that colour's text; `info` stays the plain surface. The tone's mark stays, because a tone must read without colour and the hidden tone word Geist uses would need a word in the product's language that `showMessageToast` does not take. A toast is 420 px wide at most, 16 px padded, with a close button of 32 px at its trailing edge. A toast that stays up shows the waiting line, not a spinner. Required: `closeLabel` and `regionLabel`, because the close button and the region need a name in the product's language.",
1388
+ behaviour: "\"Default toasts auto-dismiss; pass `preserve` only when the user must read or act on the message before it disappears.\" (https://vercel.com/geist/toast) \"Undo snackbars stay on screen for 5–10 seconds and pair the past-tense toast with a single `Undo` action button.\" (https://vercel.com/geist/toast) \"Don’t stack toasts to narrate one async flow; emit the success or error toast at the terminal step.\" (https://vercel.com/geist/toast) Ours: `showMessageToast` takes no `preserve`, so every toast leaves after 6 s, which is also the Undo window; the first action with a handler becomes the toast's one button. Colour sits on the whole toast: `success` fills it with the accent blue (Geist's blue success, the same hue as an `info` note), `warning` and `error` with their solid colour, each with that colour's text; `info` stays the solid floating surface, never glass. The tone's mark stays, because a tone must read without colour and the hidden tone word Geist uses would need a word in the product's language that `showMessageToast` does not take. A toast is 420 px wide at most, 16 px padded, with a close button of 32 px at its trailing edge. A toast that stays up shows the waiting line, not a spinner. Required: `closeLabel` and `regionLabel`, because the close button and the region need a name in the product's language.",
1389
1389
  words: '"One sentence, sentence case, no trailing period when the toast is a single sentence." (https://vercel.com/geist/toast) "Completion toasts follow `{Noun} {past-participle}`: `Blob deleted`, `Domain added`, `Environment variable saved`. Never include `successfully`; the action name implies it." (https://vercel.com/geist/toast) "Error toasts are two sentences with periods and end with a recovery step: `Couldn’t verify domain. Try again.` Use `Couldn’t` for user-state errors and `Failed to` for system or infra errors; match adjacent shipped copy and don’t flip mid-flow." (https://vercel.com/geist/toast) "Pair the toast verb 1:1 with the destructive button verb (`Delete Project` then `Project deleted`, never `Project removed`)." (https://vercel.com/geist/toast) "Undo snackbars use the literal label `Undo`, never `Restore`, `Bring Back`, or `Cancel`. Only use the pattern when the rollback is safe." (https://vercel.com/geist/toast) Ours: the words come from the catalogue; *Mailbox removed* pairs with its button *Remove mailbox*.',
1390
1390
  access: '"The toast region announces with `aria-live="polite"`; reserve `assertive` for blocking errors that interrupt a flow." (https://vercel.com/geist/toast) "Don’t put primary navigation inside a toast; transient surfaces vanish before keyboard users can reach them." (https://vercel.com/geist/toast) Ours: the toaster\'s live region is named by `regionLabel` and the close button by `closeLabel`. Navigation is never the only route to recovery: the record\'s own row keeps its controls. Undo is reachable by keyboard (Alt+T moves focus to the toasts) while it shows.',
1391
1391
  },
@@ -1516,8 +1516,8 @@ export const USAGE = [
1516
1516
  family: "Menus",
1517
1517
  summary: "A control or a bar on glass, floating over content that moves under it.",
1518
1518
  when: "A control that floats over content passing under it: a period picker over a chart, a bar over the product view.",
1519
- instead: "A control on a solid ground is drawn plain; glass over nothing reads as a bordered box. A toolbar over its own rows is `CollectionToolbar`.",
1520
- behaviour: 'The glass material at the floating height; `shape="control"` takes 6 px corners, `shape="bar"` none. The caller renders the element through `render`.',
1519
+ instead: "A control on a solid ground is drawn plain; glass over nothing reads as a bordered box. A toolbar over its own rows is `CollectionToolbar`. A menu, a popover or a toast is solid, never this.",
1520
+ behaviour: 'Glass, the resting surface at 72% with its own edge, over content that moves under it; `shape="control"` takes 6 px corners, `shape="bar"` none. The caller renders the element through `render`.',
1521
1521
  words: "None of its own.",
1522
1522
  access: "Takes the semantics of what it renders; the glass is paint.",
1523
1523
  },
@@ -1536,10 +1536,10 @@ export const USAGE = [
1536
1536
  name: "Popover",
1537
1537
  module: "popover",
1538
1538
  family: "Menus",
1539
- summary: "A small control set tied to its trigger, on glass.",
1539
+ summary: "A small control set tied to its trigger, on a solid floating surface.",
1540
1540
  when: "A small control set tied to its trigger: filters, a scope chooser, a date range, a feedback form. The page stays live behind it.",
1541
1541
  instead: "For commands use `DropdownMenu`. For a form that adds a record use `FormDialog`. For one phrase use `Tooltip`; for facts on hover use `HoverCard`.",
1542
- behaviour: "Glass floating surface, 12 px padding and gap. Opens on click, closes on Escape or outside press, focus returns to the trigger. Applies at once; no Save inside.",
1542
+ behaviour: "Solid floating surface, 12 px padding and gap. Opens on click, closes on Escape or outside press, focus returns to the trigger. Applies at once; no Save inside.",
1543
1543
  words: "Title names the control's job (*Filter skills*); an optional one-line description. Options are nouns.",
1544
1544
  access: "Trigger has a visible name and `aria-expanded`. The popup is a labelled dialog that does not trap focus; Tab leaves it in order.",
1545
1545
  },
@@ -1,3 +1,3 @@
1
1
  export const agentOrbScript = "\"use strict\";(()=>{function U(n,e,t){return n+(e-n)*t}function at(n){return n-Math.floor(n)}function V(n,e){let t=Math.floor(n),a=Math.floor(e),o=n-t,s=e-a;o=o*o*(3-2*o),s=s*s*(3-2*s);let r=_(t,a),u=_(t+1,a),c=_(t,a+1),M=_(t+1,a+1);return r+(u-r)*o+(c-r)*s+(r-u-c+M)*o*s}function _(n,e){let t=Math.sin(n*12.9898+e*78.233)*43758.5453;return t-Math.floor(t)}function J(n,e){let t=Math.PI*(3-Math.sqrt(5)),a=1-2*(n+.5)/e,o=Math.sqrt(1-a*a),s=n*t;return[o*Math.cos(s),a,o*Math.sin(s)]}function Pt(n,e){return Math.atan2(Math.sin(n-e),Math.cos(n-e))}function j(n,e,t,a,o){let s=Math.sin(e),r=Math.cos(e),u=Math.sin(n),c=Math.cos(n);return(M,O,l)=>{let i=M*c+l*u,p=-M*u+l*c,m=O*r-p*s,b=O*s+p*r;return[t+i*o,a-m*o,b]}}function rt(n,e,t,a){if(!a){let s=Math.round((t?1-n:n)*255);return`rgba(${s},${s},${s},${e})`}let o=s=>Math.round(t?s*(1-n):s+(255-s)*n);return`rgba(${o(a.r)},${o(a.g)},${o(a.b)},${e})`}function it(n,e,t,a=.3,o){for(let s of e){let r=s.a??1,u=Math.min(1,Math.max(0,s.white));n.fillStyle=rt(u,r,t,o),n.beginPath(),n.arc(s.x,s.y,s.r,0,Math.PI*2),n.fill()}}function ct(n,e,t,a){for(let o of e){let s=o.a??1,r=Math.min(1,Math.max(0,o.white));n.strokeStyle=rt(r,s,t,a),n.lineWidth=o.w,n.beginPath(),n.moveTo(o.x1,o.y1),n.lineTo(o.x2,o.y2),n.stroke()}}function q(n,e,t=.3){let a=[];for(let o of n)(o.a??1)<.02||(o.r=Math.max(t,o.r),a.push(o));return a.sort((o,s)=>o.z-s.z),{dots:a,lines:e.filter(o=>(o.a??1)>=.02)}}function ht(n,e,t,a){e.lines.length&&ct(n,e.lines,t,a),it(n,e.dots,t,.3,a)}function $(n,e){return(n/300)**e}var St=[[\"latRings\",\"lonDensity\"],[\"rings\",\"lonDensity\"],[\"lanes\",\"segs\"]],At=[\"orbitN\",\"ghostN\",\"nodeN\",\"strandN\",\"signals\"],vt=[\"iconD\"],kt=[\"rBase\",\"rDepth\",\"rActive\",\"rDot\",\"ghostR\",\"partR\",\"partRDepth\",\"nodeR\",\"nodeRDepth\"];function Rt(n,e){let t={...n},a=new Set,o=Math.sqrt(e);for(let[s,r]of St){let u=t[s],c=t[r];u!=null&&c!=null&&!a.has(s)&&!a.has(r)&&(t[s]=Math.max(2,Math.round(u*o)),t[r]=Math.max(2,Math.round(c*o)),a.add(s),a.add(r))}for(let s of At){let r=t[s];r!=null&&r!==0&&!a.has(s)&&(t[s]=Math.max(1,Math.round(r*e)))}for(let s of vt){let r=t[s];r!=null&&(t[s]=Math.max(.02,r*e))}return t}function Dt(n,e){let t={...n};for(let a of kt){let o=t[a];o!=null&&(t[a]=o*e)}return t.rSizeMul=(t.rSizeMul??1)*e,t}var zt={globe:{latRings:17,lonDensity:44,rBase:.6,rDepth:1.7,rBoost:1,inkFar:.62,inkSpan:.54,rsPow:.6,rMin:.3},orbits:{orbitN:12,ghostN:40,ghostR:.9,ghostA:.5,particles:3,partR:1.2,partRDepth:1.6,rsPow:.6,rMin:.3},rubik:{latRings:15,lonDensity:40,moveCount:14,rBase:.6,rDepth:1.7,rActive:.3,inkFar:.62,inkSpan:.54,rsPow:.6,rMin:.3},wave:{rings:15,lonDensity:40,rBase:.6,rDepth:1.7,rsPow:.6,rMin:.3},web:{nodeN:30,thr:.72,signals:5,nodeR:1.4,nodeRDepth:1.8,lineW:.8,rsPow:.6,rMin:.3},braid:{strandN:52,turns:3,ghostN:150,rBase:1.2,rDepth:1.8,rsPow:.6,rMin:.3},ribbon:{lanes:5,segs:88,ghostN:150,rBase:1.1,rDepth:1.7,rsPow:.6,rMin:.3},ring:{lanes:5,segs:88,ghostN:0,faceOn:1,rBase:1.1,rDepth:1.7,rsPow:.6,rMin:.3},morph:{rDot:.021,iconD:1,rMin:.25}},It=(n,e,t)=>{let a=n/2,o=n/2,s=n/2*.76,r=j(e*.4,.3,a,o,1),u=$(n,t.rsPow??.6),c=[],M=t.ghostN??150;for(let i=0;i<M;i++){let p=J(i,M),[m,b,h]=r(p[0]*s,p[1]*s,p[2]*s),g=(h/s+1)/2;c.push({x:m,y:b,z:h,r:.8*u,white:.78,a:.1+.22*g})}let O=t.strandN??52,l=t.turns??3;for(let i=0;i<3;i++){let p=i/3*2*Math.PI;for(let m=0;m<O;m++){let b=(at(m/O+e*.045)*2-1)*.96,h=Math.sqrt(Math.max(0,1-b*b)),g=Math.min(1,(1-Math.abs(b))/.1),y=b*Math.PI*l+p,f=1+.075*Math.sin(b*Math.PI*l*2+p*2+e*.8),d=h*s*f,[x,S,w]=r(Math.cos(y)*d,b*s*f,Math.sin(y)*d),P=(w/s+1)/2;c.push({x,y:S,z:w,r:((t.rBase??1.2)+(t.rDepth??1.8)*P)*u,white:.55-.45*P,a:g*(.45+.55*P)})}}return q(c,[],t.rMin)};function Ct(n,e,t,a){let o=2*e*t+a,s=n%o,r=new Array(e).fill(0),u=-1;if(s<2*e*t){let c=Math.floor(s/t),M=(s-c*t)/t,l=1-(1-Math.min(1,M/.7))**3;if(c<e){for(let i=0;i<c;i++)r[i]=1;r[c]=l,u=c}else{let i=2*e-1-c;for(let p=0;p<i;p++)r[p]=1;r[i]=1-l,u=i}}return{amount:r,active:u}}function Et(n,e,t){let[a,o,s]=n,r=!1;for(let u=0;u<e.length;u++){if(t.amount[u]<=0)continue;let c=e[u],M=c.axis===0?a:c.axis===1?o:s;if(M<c.lo||M>=c.hi)continue;u===t.active&&(r=!0);let O=c.ang*t.amount[u],l=Math.cos(O),i=Math.sin(O);if(c.axis===0){let p=o*l-s*i;s=o*i+s*l,o=p}else if(c.axis===1){let p=a*l+s*i;s=-a*i+s*l,a=p}else{let p=a*l-o*i;o=a*i+o*l,a=p}}return[a,o,s,r]}function Ft(n){let e=[];for(let t=0;t<n;t++){let a=Math.min(2,Math.floor(_(t,2.3)*3)),o=-1+.5*Math.min(3,Math.floor(_(t,5.9)*4)),s=_(t,7.7)<.5?1:-1;e.push({axis:a,lo:o,hi:o+.5,ang:s*Math.PI/2})}return e}var Nt=(n,e,t)=>{let o=n/2,s=n/2,r=n/2*.82,u=.4+.06*Math.sin(e*.35),c=j(e*.5,u,o,s,r),M=e*(.5+(1.7-.5)*(t.scanMul??1)),O=$(n,t.rsPow??.6),l=t.dimBase??1,i=[],p=t.latRings??17,m=t.lonDensity??44;for(let b=0;b<=p;b++){let h=-Math.PI/2+b/p*Math.PI,g=Math.cos(h),y=Math.sin(h),f=Math.max(1,Math.round(Math.abs(g)*m));for(let d=0;d<f;d++){let x=d/f*2*Math.PI,[S,w,P]=c(g*Math.cos(x),y,g*Math.sin(x)),v=(P+1)/2,R=Pt(x+e*.5,M),k=Math.exp(-(R*R)/.18)*Math.max(0,P);i.push({x:S,y:w,z:P,r:((t.rBase??.6)+(t.rDepth??1.7)*v+(t.rBoost??1)*k)*O,white:(t.inkFar??.62)-(t.inkSpan??.54)*v,a:l+(1-l)*Math.min(1,k)})}}return q(i,[],t.rMin)},Bt=(n,e,t)=>{let a=n/2,o=n/2,s=n/2*.82,r=j(e*.55,.35+.1*Math.sin(e*.9),a,o,s),u=$(n,t.rsPow??.6),c=t.moveCount??14,M=Ft(c),O=Ct(e,c,.42,1.2),l=[],i=t.latRings??15,p=t.lonDensity??40;for(let m=0;m<=i;m++){let b=-Math.PI/2+m/i*Math.PI,h=Math.cos(b),g=Math.sin(b),y=Math.max(1,Math.round(Math.abs(h)*p));for(let f=0;f<y;f++){let d=f/y*2*Math.PI,[x,S,w,P]=Et([h*Math.cos(d),g,h*Math.sin(d)],M,O),[v,R,k]=r(x,S,w),D=(k+1)/2;l.push({x:v,y:R,z:k,r:((t.rBase??.6)+(t.rDepth??1.7)*D+(P?t.rActive??.3:0))*u,white:(t.inkFar??.62)-(t.inkSpan??.54)*D-(P?.14:0)})}}return q(l,[],t.rMin)},Lt=(n,e,t)=>{let a=n/2,o=n/2,s=n/2*.874,r=j(e*.18,.38,a,o,1),u=$(n,t.rsPow??.6),c=[],M=t.rings??15,O=t.lonDensity??40;for(let l=0;l<=M;l++){let i=-Math.PI/2+l/M*Math.PI,p=Math.cos(i),m=Math.sin(i),b=.62*Math.sin(e*2.1-l*.52)+.38*Math.sin(e*1.27+l*.83),h=s*(.88+.105*b),g=Math.max(1,Math.round(Math.abs(p)*O));for(let y=0;y<g;y++){let f=y/g*2*Math.PI,[d,x,S]=r(p*Math.cos(f)*h,m*h,p*Math.sin(f)*h),w=(S/s+1)/2,P=Math.max(0,b);c.push({x:d,y:x,z:S,r:((t.rBase??.6)+(t.rDepth??1.7)*w)*(1+.4*P)*u,white:.66-.56*w-.1*P})}}return q(c,[],t.rMin)};function Tt(n){return n*n*(3-2*n)}function lt(n){let e=n.length,t=[],a=0;for(let o=0;o<e;o++){let s=n[o],r=n[(o+1)%e],u=Math.hypot(r[0]-s[0],r[1]-s[1]);t.push(u),a+=u}return o=>{let s=o*a,r=0;for(;s>t[r]&&r<e-1;)s-=t[r],r++;let u=n[r],c=n[(r+1)%e],M=t[r]?Math.min(1,s/t[r]):0;return[u[0]+(c[0]-u[0])*M,u[1]+(c[1]-u[1])*M]}}var _t=n=>{let e=-Math.PI/2+n*2*Math.PI;return[Math.cos(e)*.24,Math.sin(e)*.24]},qt=lt([[0,-.26],[.24,.16],[-.24,.16]]),jt=lt([[0,-.2],[.2,-.2],[.2,.2],[-.2,.2],[-.2,-.2]]),Q=[_t,qt,jt];function $t(n){return Math.max(6,Math.round(34*n))}var X=1.4,ut=.9,Y=X+ut,Wt=(n,e,t)=>{let a=Q.length,o=e%(Y*a),s=t.shape!=null&&t.shape>=0&&t.shape<a?Math.floor(t.shape):-1,r=s>=0?s:Math.floor(o/Y),u=s>=0?e%Y:o-r*Y,c=s>=0?0:u>X?Tt((u-X)/ut):0,M=t.spread??1,O=Q[r],l=s>=0?O:Q[(r+1)%a],i=160,p=[];for(let w=0;w<i;w++){let P=w/i,v=O(P),R=l(P);p.push([(v[0]+(R[0]-v[0])*c)*M,(v[1]+(R[1]-v[1])*c)*M])}let m=[],b=0;for(let w=0;w<i;w++){let P=p[w],v=p[(w+1)%i],R=Math.hypot(v[0]-P[0],v[1]-P[1]);m.push(R),b+=R}let h=$t(t.iconD??1),g=(t.rDot??.021)*1.35*M,y=1+.02*Math.sin(u*3.1),f=[],d=n/2,x=0,S=0;for(let w=0;w<h;w++){let P=w/h*b;for(;S+m[x]<P&&x<i-1;)S+=m[x],x++;let v=p[x],R=p[(x+1)%i],k=m[x]?Math.min(1,(P-S)/m[x]):0,D=(v[0]+(R[0]-v[0])*k)*y,C=(v[1]+(R[1]-v[1])*k)*y;f.push({x:d+D*n,y:d+C*n,z:0,r:Math.max(.35,g*n),white:.1})}return q(f,[],t.rMin)},Kt=(n,e,t)=>{let a=n/2,o=n/2,s=n/2*.82,r=j(e*.12,.3,a,o,1),u=$(n,t.rsPow??.6),c=[],M=t.orbitN??12,O=t.ghostN??40,l=t.particles??3;for(let i=0;i<M;i++){let p=_(i,1.7),m=_(i,5.2),b=_(i,8.9),h=s*(.45+.52*p),g=p*2*Math.PI,y=Math.acos(2*m-1),f=Math.sin(y)*Math.cos(g),d=Math.cos(y),x=Math.sin(y)*Math.sin(g),S=-d,w=f,P=0,v=Math.max(1e-6,Math.sqrt(S*S+w*w));S/=v,w/=v;let R=d*P-x*w,k=x*S-f*P,D=f*w-d*S,C=(.25+.55*b)*(b>.5?1:-1);for(let E=0;E<O;E++){let z=E/O*2*Math.PI,[F,N,L]=r((S*Math.cos(z)+R*Math.sin(z))*h,(w*Math.cos(z)+k*Math.sin(z))*h,(P*Math.cos(z)+D*Math.sin(z))*h),B=(L/h+1)/2;c.push({x:F,y:N,z:L,r:(t.ghostR??.9)*u,white:.72,a:(t.ghostA??.5)*(.4+.6*B)})}for(let E=0;E<l;E++){let z=e*C+E/l*2*Math.PI+m*6,[F,N,L]=r((S*Math.cos(z)+R*Math.sin(z))*h,(w*Math.cos(z)+k*Math.sin(z))*h,(P*Math.cos(z)+D*Math.sin(z))*h),B=(L/h+1)/2;c.push({x:F,y:N,z:L,r:((t.partR??1.2)+(t.partRDepth??1.6)*B)*u,white:.3-.22*B})}}return q(c,[],t.rMin)},st=(n,e,t)=>{let a=n/2,o=n/2,s=n/2*.78,r=t.spin??1,u=.3,c=j(e*.1*r,u,a,o,1),M=$(n,t.rsPow??.6),O=[],l=t.ghostN??150;for(let D=0;D<l;D++){let C=J(D,l),[E,z,F]=c(C[0]*s,C[1]*s,C[2]*s),N=(F/s+1)/2;O.push({x:E,y:z,z:F,r:.8*M,white:.78,a:.1+.22*N})}let i=e*.24*r,p=t.faceOn?-u:.55+.3*Math.sin(e*.18)*r,m=Math.cos(i),b=0,h=Math.sin(i),g=-h*Math.sin(p),y=Math.cos(p),f=m*Math.sin(p),d=b*f-h*y,x=h*g-m*f,S=m*y-b*g,w=.23*(t.wobMul??1),P=t.faceOn?s/(1+.85*w):s,v=t.lanes??5,R=t.segs??88,k=Math.max(1,Math.round(v*(t.bandMul??1)));for(let D=0;D<k;D++){let C=(D-(k-1)/2)*.075,E=Math.abs(D-(k-1)/2)/Math.max(1,(k-1)/2);for(let z=0;z<R;z++){let F=z/R*2*Math.PI,N=(.16*Math.sin(F*3-e*1.7+D*.22)+.07*Math.sin(F*5+e*1.1))*(t.wobMul??1),L=t.faceOn?1+N:1,B=t.faceOn?C:C+N,A=m*Math.cos(F)+g*Math.sin(F)+d*B,I=b*Math.cos(F)+y*Math.sin(F)+x*B,T=h*Math.cos(F)+f*Math.sin(F)+S*B,W=Math.sqrt(A*A+I*I+T*T),K=P*L,[wt,Ot,et]=c(A/W*K,I/W*K,T/W*K),G=(et/s+1)/2;O.push({x:wt,y:Ot,z:et,r:((t.rBase??1.1)+(t.rDepth??1.7)*G)*(1-.25*E)*M,white:.52-.44*G+.18*E,a:.4+.6*G})}}return q(O,[],t.rMin)},Yt=(n,e,t)=>{let a=n/2,o=n/2,s=n/2*.8*(t.spread??1),r=j(e*.12,.32,a,o,s),u=$(n,t.rsPow??.6),c=t.nodeN??30,M=t.thr??.72,O=t.nodeR??1.4,l=t.nodeRDepth??1.8,i=[];for(let h=0;h<c;h++){let g=J(h,c),y=g[0]+.3*(V(h*.31+9,e*.24)-.5)*2,f=g[1]+.3*(V(h*.53+27,e*.21)-.5)*2,d=g[2]+.3*(V(h*.77+55,e*.27)-.5)*2,x=Math.sqrt(y*y+f*f+d*d);i.push([y/x,f/x,d/x])}let p=[],m=[];for(let h=0;h<c;h++)for(let g=h+1;g<c;g++){let y=i[h][0]-i[g][0],f=i[h][1]-i[g][1],d=i[h][2]-i[g][2],x=Math.sqrt(y*y+f*f+d*d);if(x>=M)continue;let[S,w,P]=r(i[h][0],i[h][1],i[h][2]),[v,R,k]=r(i[g][0],i[g][1],i[g][2]),D=((P+k)/2+1)/2;p.push({x1:S,y1:w,x2:v,y2:R,white:.42,a:(1-x/M)*(.3+.55*D),w:Math.max(.6,(t.lineW??.8)*u)})}for(let h=0;h<c;h++){let[g,y,f]=r(i[h][0],i[h][1],i[h][2]),d=(f+1)/2,x=1+.25*Math.sin(e*1.4+h*2.7);m.push({x:g,y,z:f,r:(O+l*d)*x*u,white:.55-.45*d})}let b=t.signals??5;for(let h=0;h<b;h++){let g=Math.floor(e*.55+h*7.31),y=Math.floor(_(g,h*3.1+1.7)*c),f=Math.floor(_(g,h*5.7+4.2)*c);if(y===f)continue;let d=at(e*.55+h*7.31),x=U(i[y][0],i[f][0],d),S=U(i[y][1],i[f][1],d),w=U(i[y][2],i[f][2],d),P=Math.max(1e-6,Math.sqrt(x*x+S*S+w*w)),[v,R,k]=r(x/P,S/P,w/P),D=(k+1)/2;m.push({x:v,y:R,z:k,r:(O*1.5+l*D)*u,white:.05,a:.5+.5*D})}return q(m,p,t.rMin)},H={orbits:Kt,globe:Nt,rubik:Bt,wave:Lt,web:Yt,braid:It,ribbon:st,ring:st,morph:Wt},Ht=Object.fromEntries(Object.entries(H).map(([n,e])=>[n,(t,a,o,s,r)=>ht(t,e(a,o,r),s)])),pt={working:\"orbits\",searching:\"globe\",solving:\"rubik\",listening:\"wave\",connecting:\"web\",weaving:\"braid\",composing:\"ribbon\",breathing:\"ring\",shaping:\"morph\"},Gt={orbits:{64:{speed:1.885,count:1,size:1},32:{speed:2.9072,count:.4251,size:1.6849},20:{speed:3.9,count:.238,size:2.4}},globe:{64:{speed:2.015,count:.42,size:1.15,extra:{scanMul:4.08,dimBase:.45}},32:{speed:2.3803,count:.1839,size:1.4769,extra:{scanMul:4.2301,dimBase:.45}},20:{speed:2.665,count:.105,size:1.75,extra:{scanMul:4.335,dimBase:.45}}},rubik:{64:{speed:1.82,count:.35,size:1.05},32:{speed:1.8964,count:.1537,size:1.4951},20:{speed:1.95,count:.088,size:1.9}},wave:{64:{speed:4.388,count:.341,size:1},32:{speed:4.1512,count:.169,size:1.3232},20:{speed:3.998,count:.105,size:1.6}},web:{64:{speed:3.315,count:1.35,size:.95},32:{speed:5.0104,count:.4942,size:1.2571},20:{speed:6.63,count:.25,size:1.52}},braid:{64:{speed:1.625,count:.5,size:1},32:{speed:2.2234,count:.2056,size:1.2011},20:{speed:2.75,count:.1125,size:1.36}},ribbon:{64:{speed:2.34,count:.25,size:.85,extra:{spin:0,bandMul:3.9,wobMul:1}},32:{speed:2.7776,count:.0969,size:.9766,extra:{spin:0,bandMul:4.49,wobMul:1}},20:{speed:3.12,count:.051,size:1.073,extra:{spin:0,bandMul:4.94,wobMul:1}}},ring:{64:{speed:3.24,count:.25,size:.956,extra:{spin:0,bandMul:3.627,wobMul:.368}},32:{speed:3.5517,count:.0678,size:1.31,extra:{spin:0,bandMul:3.8265,wobMul:.4751}},20:{speed:3.78,count:.028,size:1.622,extra:{spin:0,bandMul:3.968,wobMul:.565}}},morph:{64:{speed:2.405,count:.702,size:.395,extra:{spread:1.45}},32:{speed:2.2057,count:.5937,size:.6916,extra:{spread:1.45}},20:{speed:2.08,count:.53,size:1.011,extra:{spread:1.45}}}},ot=new Map;function Z(n,e){let t=`${n}-${e}`,a=ot.get(t);if(a)return a;let o=pt[n],s=Gt[o][e],r={...zt[o]};s.count!==1&&(r=Rt(r,s.count)),s.size!==1&&(r=Dt(r,s.size)),s.extra&&(r={...r,...s.extra});let u={mode:o,speed:s.speed,opts:r};return ot.set(t,u),u}var dt={ribbon:{speed:.55,tilt:.15},nadia:{speed:.55,tilt:.15},sofia:{speed:.55,tilt:-.15},lattice:{speed:.28,tilt:-.12},orbit:{speed:.7,tilt:.2},globe:{speed:.35,tilt:-.16},network:{speed:.55,tilt:.1},braid:{speed:.65,tilt:-.2},morph:{speed:.9,tilt:.12}};function tt(n){return dt[n].speed}function Mt(n,e){return{idle:1,working:1,thinking:1,waiting:0,blocked:0,done:.65}[n]*tt(e)}var Ut=1.6;function ft(n,e){return n!==\"thinking\"&&n!==\"working\"?1:1-.55*((1-Math.cos(e*Math.PI*2/Ut))/2)}function bt(n,e,t){let a=dt[n],o=.82,s=.82,r=0,u=0,c=0,M=0,O=1;if(e===\"idle\"){let l=Math.sin(t*Math.PI/2);o+=l*.01,s+=l*.01,r=-l*.004}else if(e===\"waiting\")o=.8,s=.84,r=-.015,O=.75;else if(e===\"blocked\"){let l=Math.min(1,t/.25),i=Math.sin(l*Math.PI);o=.8+i*.015,s=.82-l*.08,r=l*.025-i*.018,c=a.tilt*l*.4,O=1-l*.4}else if(e===\"done\"){if(t<.18){let l=Math.sin(Math.PI*t/.18);o+=.03*l,s-=.04*l,r=.012*l}else if(t<1.3){let l=(t-.18)/1.12;r=-.07*Math.sin(Math.PI*l),o+=.025*Math.sin(Math.PI*l),s+=.035*Math.sin(Math.PI*l),c=Math.sin(l*Math.PI*2)*.07}}return{sx:o,sy:s,x:u,y:r,rotation:c,split:M,opacity:O}}function nt(n,e,t,a,o,s,r,u=1){if(!(e!==\"working\"&&e!==\"thinking\"&&e!==\"done\")){if(n.save(),e===\"thinking\"){if(r===\"front\")for(let c=0;c<3;c++){let M=o?.5:(1+Math.cos(a*Math.PI*2/3.6-c*Math.PI*2/3))/2,O=s[c%s.length];O!==void 0&&(n.fillStyle=O),n.globalAlpha=(.65+M*.35)*u,n.beginPath(),n.arc(t*(.5+(c-1)*.09),t*.08,Math.max(1,t*(.022+M*.005)),0,Math.PI*2),n.fill()}}else if(e===\"working\"||!o&&a<3.1){let c=e===\"done\"?3:1;for(let M=0;M<c;M++){let O=e===\"done\"?(a-M*.38)/2.2:0;if(O<0||O>1)continue;let l=e===\"done\"?Math.sin(O*Math.PI):1,i=(o?.8:a*Math.PI*2/7.2)+M*2.1,p=Math.PI*1.4,m=-.38+M*.4,b=t*(.44+O*.03),h=t*(.19+O*.11),g=f=>{let d=Math.cos(f)*b,x=Math.sin(f)*h;return[t/2+d*Math.cos(m)-x*Math.sin(m),t/2+d*Math.sin(m)+x*Math.cos(m)]},y=n.createLinearGradient(t*.1,t*.7,t*.9,t*.3);s.forEach((f,d)=>y.addColorStop(d/Math.max(1,s.length-1),f)),n.strokeStyle=y,n.lineCap=\"butt\";for(let f=0;f<100;f++){let d=f/100,x=i-p+p*d,S=Math.sin(x)>=0;if(S!==(r===\"front\"))continue;let w=Math.sin(Math.PI*(.04+d*.92));n.globalAlpha=l*(S?.92:.55)*(.25+w*.75)*u,n.lineWidth=Math.max(.65,t*.027*w),n.beginPath(),n.moveTo(...g(x)),n.lineTo(...g(x+p/100)),n.stroke()}}}n.restore()}}var Vt={orbit:\"working\",globe:\"searching\",lattice:\"solving\",network:\"connecting\",braid:\"weaving\",ribbon:\"composing\",morph:\"shaping\"},Qt={plain:{alpha:1,radius:1},\"over-picture\":{alpha:2.3,radius:1.9}},mt=[\"--nc-identity-azzurro\",\"--nc-identity-verde\",null,\"--nc-identity-rosso\"],yt=[\"--nc-acqua-700\",\"--nc-viola-700\",\"--nc-warning\",\"--nc-rosso-700\"],Xt=[...yt,...mt.filter(n=>n!==null)],Jt=[\"--nc-identity-cobalto\",\"--nc-identity-giallo\",null,\"--nc-identity-arancio\"],Zt={nadia:mt,sofia:Jt};function tn(n,e){let t=1-2*(n+.5)/e,a=Math.sqrt(1-t*t),o=n*Math.PI*(3-Math.sqrt(5));return[a*Math.cos(o),t,a*Math.sin(o)]}function gt(n,e,t){let a=n/2,o=n/2*.78,s=t.spin??1,r=j(e*.1*s,.3,a,a,1),u=$(n,t.rsPow??.6),c=[],M=t.ghostN??150;for(let v=0;v<M;v++){let[R,k,D]=tn(v,M),[C,E,z]=r(R*o,k*o,D*o);c.push({x:C,y:E,z,r:.8*u,white:.78,a:.1+.22*((z/o+1)/2)})}let O=e*.24*s,l=t.faceOn?-.3:.55+.3*Math.sin(e*.18)*s,[i,p,m]=[Math.cos(O),0,Math.sin(O)],[b,h,g]=[-m*Math.sin(l),Math.cos(l),i*Math.sin(l)],[y,f,d]=[p*g-m*h,m*b-i*g,i*h-p*b],x=t.wobMul??1,S=t.faceOn?o/(1+.85*.23*x):o,w=t.segs??88,P=Math.max(1,Math.round((t.lanes??5)*(t.bandMul??1)));for(let v=0;v<P;v++){let R=(v-(P-1)/2)*.075,k=Math.abs(v-(P-1)/2)/Math.max(1,(P-1)/2);for(let D=0;D<w;D++){let C=D/w*2*Math.PI,E=(.16*Math.sin(C*3-e*1.7+v*.22)+.07*Math.sin(C*5+e*1.1))*x,z=t.faceOn?1+E:1,F=t.faceOn?R:R+E,N=i*Math.cos(C)+b*Math.sin(C)+y*F,L=p*Math.cos(C)+h*Math.sin(C)+f*F,B=m*Math.cos(C)+g*Math.sin(C)+d*F,A=Math.sqrt(N*N+L*L+B*B),[I,T,W]=r(N/A*S*z,L/A*S*z,B/A*S*z),K=(W/o+1)/2;c.push({x:I,y:T,z:W,r:((t.rBase??1.1)+(t.rDepth??1.7)*K)*(1-.25*k)*u,white:.08+.1*k,a:.55+.45*K,stripe:Math.min(3,Math.floor(v/P*4))})}}return q(c,[],t.rMin)}function nn(n,e){for(let t of n.dots)t.x=e-t.x;return n}function en(n,e){let{form:t,size:a,seconds:o,color:s,state:r,age:u,reduced:c,breath:M,celebrationColors:O,stripeColors:l}=e,i=Qt[e.presence],p=Z(Vt[t===\"nadia\"||t===\"sofia\"?\"ribbon\":t],a<=32?20:64),m=t===\"nadia\"?gt(a,o,p.opts):t===\"sofia\"?nn(gt(a,o,p.opts),a):H[p.mode](a,o,p.opts);n.clearRect(0,0,a,a);let b=bt(t,e.motion===\"ambient\"?\"idle\":r,c?r===\"done\"?2:.6:u),h=c?.8:u/(r===\"done\"?.575:.2875),g=(d,x)=>{let S=(d-a/2)*b.sx,w=(x-a/2)*b.sy;return[a/2+S*Math.cos(b.rotation)-w*Math.sin(b.rotation)+(b.x+Math.sign(S)*b.split)*a,a/2+S*Math.sin(b.rotation)+w*Math.cos(b.rotation)+b.y*a]},y=b.opacity*M;e.motion===\"status\"&&nt(n,r,a,h,c,O,\"back\",M),n.fillStyle=s,n.strokeStyle=s;for(let d of m.lines)n.globalAlpha=Math.min(1,Math.max(0,(1-d.white)*(d.a??1)*y*i.alpha)),n.lineWidth=d.w*i.radius,n.beginPath(),n.moveTo(...g(d.x1,d.y1)),n.lineTo(...g(d.x2,d.y2)),n.stroke();let f=m.dots;for(let d of f)n.fillStyle=d.stripe===void 0?s:l[d.stripe]??s,n.globalAlpha=Math.min(1,Math.max(0,(1-d.white)*(d.a??1)*y*i.alpha)),n.beginPath(),n.arc(...g(d.x,d.y),d.r*i.radius,0,Math.PI*2),n.fill();n.globalAlpha=1,e.motion===\"status\"&&nt(n,r,a,h,c,O,\"front\",M)}function xt(n,e){let{form:t,presence:a=\"plain\"}=e,o=n.getContext(\"2d\");if(!o)return{destroy(){},setPaused(A){},setState(A){}};let s=window.matchMedia(\"(prefers-reduced-motion: reduce)\"),r=e.paused??!1,u=!0,c=!1,M=0,O=.6,l=0,i=0,p=e.state??\"idle\",m=e.motion??\"status\",b=null,h=0,g=1,y=e.size,f=getComputedStyle(n).color,d=[f],x=[f],S=\"\";function w(){let A=n.getBoundingClientRect(),I=Math.min(A.width,A.height);return I>0?I:e.size}function P(){!o||c||!n.isConnected||(o.setTransform(g,0,0,g,0,0),en(o,{form:t,size:y,seconds:O,color:f,state:p,age:l,reduced:s.matches,breath:s.matches?ft(p,i):1,presence:a,motion:m,celebrationColors:d,stripeColors:x}))}function v(){return c||!n.isConnected||!u||document.hidden||r?!1:s.matches?m===\"status\"&&(p===\"thinking\"||p===\"working\"):m===\"ambient\"?!0:p!==\"waiting\"&&!(p===\"blocked\"&&l>=.3)}function R(A){if(M=0,!!v()){if(b!==null){let I=Math.min((A-b)/1e3,.1);s.matches?i+=I:(O+=I*(m===\"ambient\"?tt(t):Mt(p,t)),m===\"status\"&&(l+=I*(p===\"done\"?.575:.2875)),p===\"done\"&&l>=1.8&&(p=\"idle\",l=0))}b=A,A-h>=1e3/30&&(P(),h=A),M=requestAnimationFrame(R)}}function k(){cancelAnimationFrame(M),M=0,b=null,P(),v()&&(M=requestAnimationFrame(R))}function D(A){let I=document.createElement(\"span\");I.hidden=!0,I.style.color=A,(n.parentElement??document.body).append(I);let T=getComputedStyle(I).color;return I.remove(),T||f}function C(A,I){return[I,window.devicePixelRatio||1,A.color,...Xt.map(T=>A.getPropertyValue(T))].join(\"|\")}function E(){C(getComputedStyle(n),w())!==S&&z()}function z(){if(c||!n.isConnected)return;y=w();let A=Math.max(1,Math.round(y*Math.min(window.devicePixelRatio||1,2)));n.width=A,n.height=A,g=A/y;let I=getComputedStyle(n);S=C(I,y),f=I.color,d=yt.map(T=>D(`color-mix(in oklch, ${I.getPropertyValue(T).trim()||f} 75%, white)`)),x=(Zt[t]??[]).map(T=>T&&I.getPropertyValue(T).trim()||f),k()}let F=new IntersectionObserver(([A])=>{u=A?.isIntersecting??!1,k()});F.observe(n);let N=new MutationObserver(E);for(let A=n;A;A=A.parentElement)N.observe(A,{attributes:!0,attributeFilter:[\"class\",\"style\",\"data-theme\"]});let L=new ResizeObserver(()=>{Math.abs(w()-y)>=.5&&z()});L.observe(n);function B(A){A.propertyName===\"color\"&&A.target instanceof Node&&A.target.contains(n)&&E()}return document.addEventListener(\"transitionend\",B,!0),s.addEventListener(\"change\",k),document.addEventListener(\"visibilitychange\",k),window.addEventListener(\"resize\",E),z(),{setState(A){p=A,l=0,i=0,k()},setPaused(A){r=A,k()},destroy(){c=!0,cancelAnimationFrame(M),F.disconnect(),N.disconnect(),L.disconnect(),document.removeEventListener(\"transitionend\",B,!0),s.removeEventListener(\"change\",k),document.removeEventListener(\"visibilitychange\",k),window.removeEventListener(\"resize\",E)}}}for(let n of document.querySelectorAll(\"canvas[data-agent-orb]\"))xt(n,{form:n.dataset.agentOrb,size:Number(n.dataset.size),state:n.dataset.state??\"idle\"});})();\n";
2
- export const designTokensCss = "@layer tokens, theme;\n\n\n\n\n\n\n\n\n\n@layer tokens {\n :root {\n --nc-action: oklch(0.1776 0.0000 0.00);\n --nc-action-foreground: oklch(1.0000 0.0000 0.00);\n --nc-action-hover: oklch(0.3012 0.0000 0.00);\n --nc-action-active: oklch(0.0000 0.0000 0.00);\n --nc-ink: oklch(0.1776 0.0000 0.00);\n --nc-body: oklch(0.5103 0.0000 0.00);\n --nc-muted: oklch(0.5278 0.0000 0.00);\n --nc-canvas: oklch(1.0000 0.0000 0.00);\n --nc-canvas-soft: oklch(0.9851 0.0000 0.00);\n --nc-canvas-soft-2: oklch(0.9702 0.0000 0.00);\n --nc-material-workspace: oklch(0.9851 0.0000 0.00);\n --nc-material-solid: oklch(1.0000 0.0000 0.00);\n --nc-material-resting: oklch(1.0000 0.0000 0.00);\n --nc-material-raised: oklch(1.0000 0.0000 0.00);\n --nc-material-floating: oklch(1.0000 0.0000 0.00);\n --nc-material-modal: oklch(1.0000 0.0000 0.00);\n --nc-line: oklch(0.9219 0.0000 0.00);\n --nc-input: oklch(0.5624 0.0000 0.00);\n --nc-focus-ring: oklch(0.1776 0.0000 0.00);\n --nc-scrim: oklch(0.0000 0.0000 0.00);\n --nc-link: oklch(0.5339 0.1875 256.73);\n --nc-link-deep: oklch(0.4653 0.1652 257.00);\n --nc-link-bg-soft: oklch(0.9656 0.0171 248.01);\n --nc-info: oklch(0.5005 0.2804 266.17);\n --nc-info-soft: oklch(0.9457 0.0259 276.40);\n --nc-info-deep: oklch(0.3197 0.1758 266.79);\n --nc-success: oklch(0.6415 0.1644 153.23);\n --nc-success-soft: oklch(0.9170 0.0519 161.77);\n --nc-success-deep: oklch(0.3852 0.0953 154.99);\n --nc-error: oklch(0.5688 0.1995 26.59);\n --nc-error-soft: oklch(0.9522 0.0207 17.52);\n --nc-error-deep: oklch(0.4235 0.1525 27.08);\n --nc-warning: oklch(0.8466 0.1678 84.63);\n --nc-warning-soft: oklch(0.9649 0.0461 90.87);\n --nc-warning-deep: oklch(0.4834 0.0995 82.44);\n --nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00);\n --nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00);\n --nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00);\n --nc-state-ready: oklch(0.5278 0.0000 0.00);\n --nc-state-running: oklch(0.5005 0.2804 266.17);\n --nc-state-review: oklch(0.8466 0.1678 84.63);\n --nc-state-blocked: oklch(0.5688 0.1995 26.59);\n --nc-state-complete: oklch(0.6415 0.1644 153.23);\n --nc-identity-verde: oklch(0.6415 0.1644 153.23);\n --nc-identity-rosso: oklch(0.5688 0.1995 26.59);\n --nc-identity-arancio: oklch(0.6824 0.2108 37.70);\n --nc-identity-giallo: oklch(0.8466 0.1678 84.63);\n --nc-identity-cobalto: oklch(0.5005 0.2804 266.17);\n --nc-identity-azzurro: oklch(0.5618 0.2019 258.24);\n --nc-identity-ink: oklch(0.0000 0.0000 0.00);\n --nc-identity-white: oklch(1.0000 0.0000 0.00);\n --nc-logo-dot: oklch(0.5005 0.2804 266.17);\n --nc-chart-1: oklch(0.5005 0.2804 266.17);\n --nc-chart-2: oklch(0.6398 0.2044 356.46);\n --nc-chart-3: oklch(0.5015 0.1883 294.99);\n --nc-chart-4: oklch(0.6824 0.2108 37.70);\n --nc-chart-5: oklch(0.6161 0.1062 208.85);\n --nc-chart-6: oklch(0.5688 0.1995 26.59);\n --nc-chart-7: oklch(0.7691 0.1577 84.69);\n --nc-chart-8: oklch(0.6415 0.1644 153.23);\n --nc-chart-9: oklch(0.7191 0.1452 266.33);\n --nc-chart-10: oklch(0.8309 0.1048 356.57);\n --nc-cobalto-100: oklch(0.9754 0.0115 264.51);\n --nc-cobalto-200: oklch(0.9543 0.0215 265.76);\n --nc-cobalto-300: oklch(0.9297 0.0334 265.23);\n --nc-cobalto-400: oklch(0.8944 0.0509 267.00);\n --nc-cobalto-500: oklch(0.8308 0.0837 265.90);\n --nc-cobalto-600: oklch(0.7191 0.1452 266.33);\n --nc-cobalto-700: oklch(0.5005 0.2804 266.17);\n --nc-cobalto-800: oklch(0.4602 0.2797 266.14);\n --nc-cobalto-900: oklch(0.4202 0.2522 266.14);\n --nc-cobalto-1000: oklch(0.2811 0.1684 266.17);\n --nc-rosso-100: oklch(0.9752 0.0122 29.87);\n --nc-rosso-200: oklch(0.9552 0.0222 27.81);\n --nc-rosso-300: oklch(0.9290 0.0360 26.28);\n --nc-rosso-400: oklch(0.8944 0.0552 26.52);\n --nc-rosso-500: oklch(0.8304 0.0942 26.48);\n --nc-rosso-600: oklch(0.7201 0.1742 26.79);\n --nc-rosso-700: oklch(0.5688 0.1995 26.59);\n --nc-rosso-800: oklch(0.5297 0.1996 26.67);\n --nc-rosso-900: oklch(0.4882 0.1797 26.59);\n --nc-rosso-1000: oklch(0.2805 0.1143 26.81);\n --nc-arancio-100: oklch(0.9749 0.0125 35.73);\n --nc-arancio-200: oklch(0.9544 0.0233 37.38);\n --nc-arancio-300: oklch(0.9298 0.0366 36.77);\n --nc-arancio-400: oklch(0.8945 0.0567 37.21);\n --nc-arancio-500: oklch(0.8292 0.0974 37.12);\n --nc-arancio-600: oklch(0.7428 0.1602 37.76);\n --nc-arancio-700: oklch(0.6824 0.2108 37.70);\n --nc-arancio-800: oklch(0.6419 0.2102 37.75);\n --nc-arancio-900: oklch(0.4993 0.1647 37.64);\n --nc-arancio-1000: oklch(0.2801 0.0916 38.02);\n --nc-giallo-100: oklch(0.9860 0.0154 86.42);\n --nc-giallo-200: oklch(0.9699 0.0272 83.54);\n --nc-giallo-300: oklch(0.9555 0.0420 85.96);\n --nc-giallo-400: oklch(0.9298 0.0673 84.45);\n --nc-giallo-500: oklch(0.9004 0.1074 84.93);\n --nc-giallo-600: oklch(0.8696 0.1403 84.42);\n --nc-giallo-700: oklch(0.8466 0.1678 84.63);\n --nc-giallo-800: oklch(0.7691 0.1577 84.69);\n --nc-giallo-900: oklch(0.5305 0.1090 83.33);\n --nc-giallo-1000: oklch(0.3186 0.0654 84.14);\n --nc-verde-100: oklch(0.9747 0.0157 154.48);\n --nc-verde-200: oklch(0.9560 0.0265 152.38);\n --nc-verde-300: oklch(0.9290 0.0407 153.11);\n --nc-verde-400: oklch(0.8955 0.0664 152.93);\n --nc-verde-500: oklch(0.8310 0.1403 153.27);\n --nc-verde-600: oklch(0.7191 0.1645 153.16);\n --nc-verde-700: oklch(0.6415 0.1644 153.23);\n --nc-verde-800: oklch(0.6017 0.1542 153.23);\n --nc-verde-900: oklch(0.4992 0.1279 153.23);\n --nc-verde-1000: oklch(0.2815 0.0723 153.13);\n --nc-acqua-100: oklch(0.9752 0.0109 211.04);\n --nc-acqua-200: oklch(0.9559 0.0171 205.84);\n --nc-acqua-300: oklch(0.9297 0.0259 208.75);\n --nc-acqua-400: oklch(0.8954 0.0424 207.56);\n --nc-acqua-500: oklch(0.8304 0.0902 209.06);\n --nc-acqua-600: oklch(0.7205 0.1064 208.54);\n --nc-acqua-700: oklch(0.6161 0.1062 208.85);\n --nc-acqua-800: oklch(0.5765 0.0992 208.28);\n --nc-acqua-900: oklch(0.4990 0.0860 208.78);\n --nc-acqua-1000: oklch(0.2797 0.0484 210.29);\n --nc-viola-100: oklch(0.9745 0.0134 295.33);\n --nc-viola-200: oklch(0.9545 0.0243 296.12);\n --nc-viola-300: oklch(0.9290 0.0381 295.47);\n --nc-viola-400: oklch(0.8954 0.0563 294.18);\n --nc-viola-500: oklch(0.8289 0.0954 295.03);\n --nc-viola-600: oklch(0.7204 0.1631 294.91);\n --nc-viola-700: oklch(0.5015 0.1883 294.99);\n --nc-viola-800: oklch(0.4620 0.1886 294.84);\n --nc-viola-900: oklch(0.4227 0.1694 295.05);\n --nc-viola-1000: oklch(0.2796 0.1131 295.14);\n --nc-rosa-100: oklch(0.9746 0.0139 355.00);\n --nc-rosa-200: oklch(0.9555 0.0241 358.28);\n --nc-rosa-300: oklch(0.9307 0.0386 357.63);\n --nc-rosa-400: oklch(0.8944 0.0614 356.49);\n --nc-rosa-500: oklch(0.8309 0.1048 356.57);\n --nc-rosa-600: oklch(0.7193 0.1969 356.59);\n --nc-rosa-700: oklch(0.6398 0.2044 356.46);\n --nc-rosa-800: oklch(0.6001 0.2050 356.50);\n --nc-rosa-900: oklch(0.5009 0.1842 356.43);\n --nc-rosa-1000: oklch(0.2808 0.1147 356.80);\n --nc-dark-canvas: oklch(0.0000 0.0000 0.00);\n --nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00);\n --nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00);\n --nc-dark-material-workspace: oklch(0.0000 0.0000 0.00);\n --nc-dark-material-solid: oklch(0.0000 0.0000 0.00);\n --nc-dark-material-resting: oklch(0.1543 0.0000 0.00);\n --nc-dark-material-raised: oklch(0.1776 0.0000 0.00);\n --nc-dark-material-floating: oklch(0.1957 0.0000 0.00);\n --nc-dark-material-modal: oklch(0.1957 0.0000 0.00);\n --nc-dark-ink: oklch(0.9461 0.0000 0.00);\n --nc-dark-body: oklch(0.7090 0.0000 0.00);\n --nc-dark-muted: oklch(0.6993 0.0000 0.00);\n --nc-dark-line: oklch(0.2686 0.0000 0.00);\n --nc-dark-input: oklch(0.5590 0.0000 0.00);\n --nc-dark-on-primary: oklch(0.1448 0.0000 0.00);\n --nc-dark-action: oklch(0.9461 0.0000 0.00);\n --nc-dark-action-foreground: oklch(0.1448 0.0000 0.00);\n --nc-dark-action-hover: oklch(0.8761 0.0000 0.00);\n --nc-dark-action-active: oklch(0.8297 0.0000 0.00);\n --nc-dark-link: oklch(0.7173 0.1522 251.00);\n --nc-dark-link-deep: oklch(0.8135 0.0986 247.81);\n --nc-dark-link-bg-soft: oklch(0.2518 0.0572 257.41);\n --nc-dark-focus-ring: oklch(0.9461 0.0000 0.00);\n --nc-dark-scrim: oklch(0.0000 0.0000 0.00);\n --nc-dark-error: oklch(0.7955 0.0980 21.02);\n --nc-dark-error-soft: oklch(0.2296 0.0728 26.06);\n --nc-dark-error-deep: oklch(0.8856 0.0534 19.64);\n --nc-dark-warning: oklch(0.8939 0.1387 90.47);\n --nc-dark-warning-soft: oklch(0.3135 0.0643 85.04);\n --nc-dark-warning-deep: oklch(0.9320 0.0896 90.86);\n --nc-dark-info: oklch(0.7067 0.1528 272.08);\n --nc-dark-info-soft: oklch(0.2118 0.1033 268.28);\n --nc-dark-info-deep: oklch(0.8222 0.0888 274.44);\n --nc-dark-success: oklch(0.7019 0.1753 153.20);\n --nc-dark-success-soft: oklch(0.2893 0.0697 156.32);\n --nc-dark-success-deep: oklch(0.8524 0.0996 159.83);\n --nc-dark-state-ready: oklch(0.5624 0.0000 0.00);\n --nc-dark-state-running: oklch(0.5923 0.2215 269.61);\n --nc-dark-state-review: oklch(0.8466 0.1678 84.63);\n --nc-dark-state-blocked: oklch(0.5688 0.1995 26.59);\n --nc-dark-state-complete: oklch(0.6415 0.1644 153.23);\n --nc-dark-logo-dot: oklch(0.5923 0.2215 269.61);\n --nc-dark-navigation-selection-bg: oklch(0.2393 0.0000 0.00);\n --nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00);\n --nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00);\n --nc-dark-chart-1: oklch(0.6007 0.2160 266.02);\n --nc-dark-chart-2: oklch(0.6611 0.1941 356.61);\n --nc-dark-chart-3: oklch(0.6004 0.1789 294.79);\n --nc-dark-chart-4: oklch(0.6612 0.2003 37.74);\n --nc-dark-chart-5: oklch(0.6568 0.1009 208.69);\n --nc-dark-chart-6: oklch(0.6084 0.1887 26.65);\n --nc-dark-chart-7: oklch(0.8466 0.1678 84.63);\n --nc-dark-chart-8: oklch(0.6608 0.1568 153.03);\n --nc-dark-chart-9: oklch(0.7993 0.1005 266.67);\n --nc-dark-chart-10: oklch(0.8005 0.1279 356.32);\n --nc-dark-cobalto-100: oklch(0.1915 0.0982 266.32);\n --nc-dark-cobalto-200: oklch(0.2197 0.1184 266.25);\n --nc-dark-cobalto-300: oklch(0.2604 0.1398 265.97);\n --nc-dark-cobalto-400: oklch(0.2997 0.1624 266.24);\n --nc-dark-cobalto-500: oklch(0.3702 0.1966 266.08);\n --nc-dark-cobalto-600: oklch(0.6007 0.2160 266.02);\n --nc-dark-cobalto-700: oklch(0.5005 0.2804 266.17);\n --nc-dark-cobalto-800: oklch(0.4602 0.2797 266.14);\n --nc-dark-cobalto-900: oklch(0.7993 0.1005 266.67);\n --nc-dark-cobalto-1000: oklch(0.9604 0.0186 265.98);\n --nc-dark-rosso-100: oklch(0.1907 0.0689 26.80);\n --nc-dark-rosso-200: oklch(0.2215 0.0837 26.41);\n --nc-dark-rosso-300: oklch(0.2596 0.0994 26.37);\n --nc-dark-rosso-400: oklch(0.3014 0.1159 26.97);\n --nc-dark-rosso-500: oklch(0.3705 0.1397 26.54);\n --nc-dark-rosso-600: oklch(0.6084 0.1887 26.65);\n --nc-dark-rosso-700: oklch(0.5688 0.1995 26.59);\n --nc-dark-rosso-800: oklch(0.5297 0.1996 26.67);\n --nc-dark-rosso-900: oklch(0.7992 0.1149 26.43);\n --nc-dark-rosso-1000: oklch(0.9598 0.0198 25.17);\n --nc-dark-arancio-100: oklch(0.1909 0.0632 37.47);\n --nc-dark-arancio-200: oklch(0.2201 0.0732 37.26);\n --nc-dark-arancio-300: oklch(0.2598 0.0852 37.90);\n --nc-dark-arancio-400: oklch(0.2988 0.0989 37.50);\n --nc-dark-arancio-500: oklch(0.3706 0.1219 37.77);\n --nc-dark-arancio-600: oklch(0.6612 0.2003 37.74);\n --nc-dark-arancio-700: oklch(0.6824 0.2108 37.70);\n --nc-dark-arancio-800: oklch(0.6419 0.2102 37.75);\n --nc-dark-arancio-900: oklch(0.7993 0.1180 37.52);\n --nc-dark-arancio-1000: oklch(0.9590 0.0208 36.03);\n --nc-dark-giallo-100: oklch(0.1903 0.0391 84.07);\n --nc-dark-giallo-200: oklch(0.2185 0.0449 83.81);\n --nc-dark-giallo-300: oklch(0.2592 0.0532 83.54);\n --nc-dark-giallo-400: oklch(0.3008 0.0616 85.18);\n --nc-dark-giallo-500: oklch(0.3705 0.0759 85.25);\n --nc-dark-giallo-600: oklch(0.6598 0.1353 84.83);\n --nc-dark-giallo-700: oklch(0.8466 0.1678 84.63);\n --nc-dark-giallo-800: oklch(0.8064 0.1654 84.43);\n --nc-dark-giallo-900: oklch(0.8007 0.1595 84.74);\n --nc-dark-giallo-1000: oklch(0.9604 0.0256 84.59);\n --nc-dark-verde-100: oklch(0.1910 0.0488 153.39);\n --nc-dark-verde-200: oklch(0.2208 0.0571 152.80);\n --nc-dark-verde-300: oklch(0.2606 0.0664 153.49);\n --nc-dark-verde-400: oklch(0.2987 0.0765 153.24);\n --nc-dark-verde-500: oklch(0.3685 0.0944 153.24);\n --nc-dark-verde-600: oklch(0.6608 0.1568 153.03);\n --nc-dark-verde-700: oklch(0.6415 0.1644 153.23);\n --nc-dark-verde-800: oklch(0.6017 0.1542 153.23);\n --nc-dark-verde-900: oklch(0.7994 0.1555 153.29);\n --nc-dark-verde-1000: oklch(0.9600 0.0248 152.88);\n --nc-dark-acqua-100: oklch(0.1914 0.0330 209.05);\n --nc-dark-acqua-200: oklch(0.2192 0.0379 209.81);\n --nc-dark-acqua-300: oklch(0.2610 0.0450 209.30);\n --nc-dark-acqua-400: oklch(0.3011 0.0519 208.95);\n --nc-dark-acqua-500: oklch(0.3711 0.0639 208.82);\n --nc-dark-acqua-600: oklch(0.6568 0.1009 208.69);\n --nc-dark-acqua-700: oklch(0.6161 0.1062 208.85);\n --nc-dark-acqua-800: oklch(0.5765 0.0992 208.28);\n --nc-dark-acqua-900: oklch(0.8004 0.1007 208.37);\n --nc-dark-acqua-1000: oklch(0.9596 0.0161 206.44);\n --nc-dark-viola-100: oklch(0.1897 0.0654 295.79);\n --nc-dark-viola-200: oklch(0.2192 0.0805 294.49);\n --nc-dark-viola-300: oklch(0.2605 0.0949 295.18);\n --nc-dark-viola-400: oklch(0.2990 0.1087 294.76);\n --nc-dark-viola-500: oklch(0.3702 0.1310 295.14);\n --nc-dark-viola-600: oklch(0.6004 0.1789 294.79);\n --nc-dark-viola-700: oklch(0.5015 0.1883 294.99);\n --nc-dark-viola-800: oklch(0.4620 0.1886 294.84);\n --nc-dark-viola-900: oklch(0.8000 0.1131 295.20);\n --nc-dark-viola-1000: oklch(0.9591 0.0215 294.60);\n --nc-dark-rosa-100: oklch(0.1902 0.0716 355.67);\n --nc-dark-rosa-200: oklch(0.2198 0.0850 357.06);\n --nc-dark-rosa-300: oklch(0.2591 0.1026 356.37);\n --nc-dark-rosa-400: oklch(0.3000 0.1188 356.62);\n --nc-dark-rosa-500: oklch(0.3695 0.1426 356.71);\n --nc-dark-rosa-600: oklch(0.6611 0.1941 356.61);\n --nc-dark-rosa-700: oklch(0.6398 0.2044 356.46);\n --nc-dark-rosa-800: oklch(0.6001 0.2050 356.50);\n --nc-dark-rosa-900: oklch(0.8005 0.1279 356.32);\n --nc-dark-rosa-1000: oklch(0.9599 0.0220 356.32);\n --nc-category-teal-soft: oklch(0.9585 0.0244 187.32);\n --nc-category-teal-deep: oklch(0.4600 0.0788 185.34);\n --nc-dark-category-teal-soft: oklch(0.2627 0.0410 187.13);\n --nc-dark-category-teal-deep: oklch(0.8398 0.1008 186.70);\n --nc-category-purple-soft: oklch(0.9464 0.0327 307.17);\n --nc-category-purple-deep: oklch(0.4541 0.1958 308.26);\n --nc-dark-category-purple-soft: oklch(0.2479 0.0790 306.78);\n --nc-dark-category-purple-deep: oklch(0.7911 0.1271 310.92);\n --nc-category-pink-soft: oklch(0.9476 0.0263 347.12);\n --nc-category-pink-deep: oklch(0.4863 0.1711 355.09);\n --nc-dark-category-pink-soft: oklch(0.2550 0.0598 353.51);\n --nc-dark-category-pink-deep: oklch(0.8108 0.1129 347.21);\n --nc-xxs: 4px;\n --nc-xs: 8px;\n --nc-sm: 12px;\n --nc-md: 16px;\n --nc-lg: 24px;\n --nc-xl: 32px;\n --nc-2xl: 40px;\n --nc-3xl: 48px;\n --nc-4xl: 64px;\n --nc-5xl: 96px;\n --nc-6xl: 128px;\n --nc-guide: 1px;\n --nc-icon-stroke: 1.5px;\n --nc-icon-stroke-sm: 1.25px;\n --nc-focus-outline-width: 2px;\n --nc-focus-outline-offset: 2px;\n --nc-control-height: 36px;\n --nc-control-height-sm: 32px;\n --nc-control-height-lg: 40px;\n --nc-control-height-xs: 24px;\n --nc-control-padding-inline: 12px;\n --nc-button-padding-inline-sm: 6px;\n --nc-button-padding-inline: 10px;\n --nc-button-padding-inline-lg: 14px;\n --nc-card-padding: 20px;\n --nc-touch-target: 44px;\n --nc-rounded-none: 0px;\n --nc-rounded-xs: 2px;\n --nc-rounded-xs-plus: 4px;\n --nc-rounded-sm: 6px;\n --nc-rounded-md: 8px;\n --nc-rounded-lg: 12px;\n --nc-rounded-xl: 16px;\n --nc-rounded-2xl: 20px;\n --nc-rounded-3xl: 24px;\n --nc-rounded-full: 9999px;\n --nc-type-display-xl-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-xl-font-size: 72px;\n --nc-type-display-xl-font-weight: 600;\n --nc-type-display-xl-line-height: 72px;\n --nc-type-display-xl-letter-spacing: -4.32px;\n --nc-type-display-wide-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-wide-font-size: 64px;\n --nc-type-display-wide-font-weight: 600;\n --nc-type-display-wide-line-height: 64px;\n --nc-type-display-wide-letter-spacing: -3.84px;\n --nc-type-display-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-lg-font-size: 56px;\n --nc-type-display-lg-font-weight: 600;\n --nc-type-display-lg-line-height: 56px;\n --nc-type-display-lg-letter-spacing: -3.36px;\n --nc-type-display-section-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-section-font-size: 48px;\n --nc-type-display-section-font-weight: 600;\n --nc-type-display-section-line-height: 56px;\n --nc-type-display-section-letter-spacing: -2.88px;\n --nc-type-display-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-md-font-size: 40px;\n --nc-type-display-md-font-weight: 600;\n --nc-type-display-md-line-height: 48px;\n --nc-type-display-md-letter-spacing: -2.4px;\n --nc-type-heading-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-lg-font-size: 32px;\n --nc-type-heading-lg-font-weight: 600;\n --nc-type-heading-lg-line-height: 40px;\n --nc-type-heading-lg-letter-spacing: -1.28px;\n --nc-type-heading-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-md-font-size: 24px;\n --nc-type-heading-md-font-weight: 600;\n --nc-type-heading-md-line-height: 32px;\n --nc-type-heading-md-letter-spacing: -0.96px;\n --nc-type-heading-sm-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-sm-font-size: 20px;\n --nc-type-heading-sm-font-weight: 600;\n --nc-type-heading-sm-line-height: 26px;\n --nc-type-heading-sm-letter-spacing: -0.4px;\n --nc-type-heading-xs-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-xs-font-size: 16px;\n --nc-type-heading-xs-font-weight: 600;\n --nc-type-heading-xs-line-height: 24px;\n --nc-type-heading-xs-letter-spacing: -0.32px;\n --nc-type-heading-compact-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-compact-font-size: 14px;\n --nc-type-heading-compact-font-weight: 600;\n --nc-type-heading-compact-line-height: 20px;\n --nc-type-heading-compact-letter-spacing: -0.28px;\n --nc-type-button-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-button-lg-font-size: 16px;\n --nc-type-button-lg-font-weight: 500;\n --nc-type-button-lg-line-height: 24px;\n --nc-type-button-lg-letter-spacing: 0px;\n --nc-type-button-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-button-font-size: 14px;\n --nc-type-button-font-weight: 500;\n --nc-type-button-line-height: 21px;\n --nc-type-button-letter-spacing: 0px;\n --nc-type-button-xs-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-button-xs-font-size: 12px;\n --nc-type-button-xs-font-weight: 500;\n --nc-type-button-xs-line-height: 16px;\n --nc-type-button-xs-letter-spacing: 0px;\n --nc-type-label-display-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-display-font-size: 20px;\n --nc-type-label-display-font-weight: 400;\n --nc-type-label-display-line-height: 32px;\n --nc-type-label-display-letter-spacing: 0px;\n --nc-type-label-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-lg-font-size: 18px;\n --nc-type-label-lg-font-weight: 400;\n --nc-type-label-lg-line-height: 20px;\n --nc-type-label-lg-letter-spacing: 0px;\n --nc-type-label-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-md-font-size: 16px;\n --nc-type-label-md-font-weight: 400;\n --nc-type-label-md-line-height: 20px;\n --nc-type-label-md-letter-spacing: 0px;\n --nc-type-label-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-font-size: 14px;\n --nc-type-label-font-weight: 400;\n --nc-type-label-line-height: 20px;\n --nc-type-label-letter-spacing: 0px;\n --nc-type-label-sm-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-sm-font-size: 13px;\n --nc-type-label-sm-font-weight: 400;\n --nc-type-label-sm-line-height: 16px;\n --nc-type-label-sm-letter-spacing: 0px;\n --nc-type-caption-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-caption-font-size: 12px;\n --nc-type-caption-font-weight: 400;\n --nc-type-caption-line-height: 16px;\n --nc-type-caption-letter-spacing: 0px;\n --nc-type-label-mono-lg-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-label-mono-lg-font-size: 14px;\n --nc-type-label-mono-lg-font-weight: 400;\n --nc-type-label-mono-lg-line-height: 20px;\n --nc-type-label-mono-lg-letter-spacing: 0px;\n --nc-type-label-mono-md-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-label-mono-md-font-size: 13px;\n --nc-type-label-mono-md-font-weight: 400;\n --nc-type-label-mono-md-line-height: 20px;\n --nc-type-label-mono-md-letter-spacing: 0px;\n --nc-type-label-mono-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-label-mono-font-size: 12px;\n --nc-type-label-mono-font-weight: 400;\n --nc-type-label-mono-line-height: 16px;\n --nc-type-label-mono-letter-spacing: 0px;\n --nc-type-body-display-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-display-font-size: 24px;\n --nc-type-body-display-font-weight: 400;\n --nc-type-body-display-line-height: 36px;\n --nc-type-body-display-letter-spacing: 0px;\n --nc-type-body-lead-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-lead-font-size: 20px;\n --nc-type-body-lead-font-weight: 400;\n --nc-type-body-lead-line-height: 36px;\n --nc-type-body-lead-letter-spacing: 0px;\n --nc-type-body-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-lg-font-size: 18px;\n --nc-type-body-lg-font-weight: 400;\n --nc-type-body-lg-line-height: 28px;\n --nc-type-body-lg-letter-spacing: 0px;\n --nc-type-body-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-md-font-size: 16px;\n --nc-type-body-md-font-weight: 400;\n --nc-type-body-md-line-height: 24px;\n --nc-type-body-md-letter-spacing: 0px;\n --nc-type-body-sm-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-sm-font-size: 14px;\n --nc-type-body-sm-font-weight: 400;\n --nc-type-body-sm-line-height: 20px;\n --nc-type-body-sm-letter-spacing: 0px;\n --nc-type-body-compact-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-compact-font-size: 13px;\n --nc-type-body-compact-font-weight: 400;\n --nc-type-body-compact-line-height: 18px;\n --nc-type-body-compact-letter-spacing: 0px;\n --nc-type-code-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-code-font-size: 13px;\n --nc-type-code-font-weight: 400;\n --nc-type-code-line-height: 18px;\n --nc-type-code-letter-spacing: 0px;\n --nc-material-scrim-opacity: 50%;\n --nc-material-glass-opacity: 60%;\n --nc-material-glass-saturation: 180%;\n --nc-material-glass-blur: 20px;\n --nc-elevation-resting:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 1px 2px 0px rgb(0% 0% 0% / 0.05),\n 0px 2px 8px -2px rgb(0% 0% 0% / 0.06);\n --nc-elevation-raised:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 1px 2px 0px rgb(0% 0% 0% / 0.06),\n 0px 6px 12px -4px rgb(0% 0% 0% / 0.08),\n 0px 16px 32px -8px rgb(0% 0% 0% / 0.1);\n --nc-elevation-floating:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 2px 4px 0px rgb(0% 0% 0% / 0.06),\n 0px 12px 24px -6px rgb(0% 0% 0% / 0.12),\n 0px 32px 64px -16px rgb(0% 0% 0% / 0.16);\n --nc-elevation-modal:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 2px 4px 0px rgb(0% 0% 0% / 0.06),\n 0px 24px 48px -12px rgb(0% 0% 0% / 0.18),\n 0px 64px 128px -32px rgb(0% 0% 0% / 0.26);\n --nc-elevation-glass:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.75),\n inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.35),\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.07),\n 0px 2px 4px 0px rgb(0% 0% 0% / 0.06),\n 0px 12px 24px -6px rgb(0% 0% 0% / 0.12),\n 0px 32px 64px -16px rgb(0% 0% 0% / 0.16);\n --nc-duration-control: 100ms;\n --nc-duration-close: 140ms;\n --nc-duration-confirm: 180ms;\n --nc-duration-open: 220ms;\n --nc-duration-msg-in: 240ms;\n --nc-duration-transition: 240ms;\n --nc-duration-arrive: 300ms;\n --nc-duration-drawer-swipe: 400ms;\n --nc-duration-drawer: 450ms;\n --nc-duration-wait: 1.6s;\n --nc-ease-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1);\n --nc-ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);\n --nc-ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);\n --nc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);\n --nc-content-max: 1200px;\n --nc-gutter-mobile: 20px;\n --nc-gutter-tablet: 40px;\n --nc-gutter-desktop: 64px;\n --nc-section-step-mobile: 64px;\n --nc-section-step-desktop: 96px;\n }\n}\n\n\n@layer theme {\n .dark {\n --nc-canvas: var(--nc-dark-canvas);\n --nc-canvas-soft: var(--nc-dark-canvas-soft);\n --nc-canvas-soft-2: var(--nc-dark-canvas-soft-2);\n --nc-material-workspace: var(--nc-dark-material-workspace);\n --nc-material-solid: var(--nc-dark-material-solid);\n --nc-material-resting: var(--nc-dark-material-resting);\n --nc-material-raised: var(--nc-dark-material-raised);\n --nc-material-floating: var(--nc-dark-material-floating);\n --nc-material-modal: var(--nc-dark-material-modal);\n --nc-ink: var(--nc-dark-ink);\n --nc-body: var(--nc-dark-body);\n --nc-muted: var(--nc-dark-muted);\n --nc-line: var(--nc-dark-line);\n --nc-input: var(--nc-dark-input);\n --nc-action: var(--nc-dark-action);\n --nc-action-foreground: var(--nc-dark-action-foreground);\n --nc-action-hover: var(--nc-dark-action-hover);\n --nc-action-active: var(--nc-dark-action-active);\n --nc-link: var(--nc-dark-link);\n --nc-link-deep: var(--nc-dark-link-deep);\n --nc-link-bg-soft: var(--nc-dark-link-bg-soft);\n --nc-focus-ring: var(--nc-dark-focus-ring);\n --nc-scrim: var(--nc-dark-scrim);\n --nc-error: var(--nc-dark-error);\n --nc-error-soft: var(--nc-dark-error-soft);\n --nc-error-deep: var(--nc-dark-error-deep);\n --nc-warning: var(--nc-dark-warning);\n --nc-warning-soft: var(--nc-dark-warning-soft);\n --nc-warning-deep: var(--nc-dark-warning-deep);\n --nc-info: var(--nc-dark-info);\n --nc-info-soft: var(--nc-dark-info-soft);\n --nc-info-deep: var(--nc-dark-info-deep);\n --nc-success: var(--nc-dark-success);\n --nc-success-soft: var(--nc-dark-success-soft);\n --nc-success-deep: var(--nc-dark-success-deep);\n --nc-state-ready: var(--nc-dark-state-ready);\n --nc-state-running: var(--nc-dark-state-running);\n --nc-state-review: var(--nc-dark-state-review);\n --nc-state-blocked: var(--nc-dark-state-blocked);\n --nc-state-complete: var(--nc-dark-state-complete);\n --nc-logo-dot: var(--nc-dark-logo-dot);\n --nc-navigation-selection-bg: var(--nc-dark-navigation-selection-bg);\n --nc-navigation-selection-fg: var(--nc-dark-navigation-selection-fg);\n --nc-navigation-selection-hover: var(--nc-dark-navigation-selection-hover);\n --nc-chart-1: var(--nc-dark-chart-1);\n --nc-chart-2: var(--nc-dark-chart-2);\n --nc-chart-3: var(--nc-dark-chart-3);\n --nc-chart-4: var(--nc-dark-chart-4);\n --nc-chart-5: var(--nc-dark-chart-5);\n --nc-chart-6: var(--nc-dark-chart-6);\n --nc-chart-7: var(--nc-dark-chart-7);\n --nc-chart-8: var(--nc-dark-chart-8);\n --nc-chart-9: var(--nc-dark-chart-9);\n --nc-chart-10: var(--nc-dark-chart-10);\n --nc-cobalto-100: var(--nc-dark-cobalto-100);\n --nc-cobalto-200: var(--nc-dark-cobalto-200);\n --nc-cobalto-300: var(--nc-dark-cobalto-300);\n --nc-cobalto-400: var(--nc-dark-cobalto-400);\n --nc-cobalto-500: var(--nc-dark-cobalto-500);\n --nc-cobalto-600: var(--nc-dark-cobalto-600);\n --nc-cobalto-700: var(--nc-dark-cobalto-700);\n --nc-cobalto-800: var(--nc-dark-cobalto-800);\n --nc-cobalto-900: var(--nc-dark-cobalto-900);\n --nc-cobalto-1000: var(--nc-dark-cobalto-1000);\n --nc-rosso-100: var(--nc-dark-rosso-100);\n --nc-rosso-200: var(--nc-dark-rosso-200);\n --nc-rosso-300: var(--nc-dark-rosso-300);\n --nc-rosso-400: var(--nc-dark-rosso-400);\n --nc-rosso-500: var(--nc-dark-rosso-500);\n --nc-rosso-600: var(--nc-dark-rosso-600);\n --nc-rosso-700: var(--nc-dark-rosso-700);\n --nc-rosso-800: var(--nc-dark-rosso-800);\n --nc-rosso-900: var(--nc-dark-rosso-900);\n --nc-rosso-1000: var(--nc-dark-rosso-1000);\n --nc-arancio-100: var(--nc-dark-arancio-100);\n --nc-arancio-200: var(--nc-dark-arancio-200);\n --nc-arancio-300: var(--nc-dark-arancio-300);\n --nc-arancio-400: var(--nc-dark-arancio-400);\n --nc-arancio-500: var(--nc-dark-arancio-500);\n --nc-arancio-600: var(--nc-dark-arancio-600);\n --nc-arancio-700: var(--nc-dark-arancio-700);\n --nc-arancio-800: var(--nc-dark-arancio-800);\n --nc-arancio-900: var(--nc-dark-arancio-900);\n --nc-arancio-1000: var(--nc-dark-arancio-1000);\n --nc-giallo-100: var(--nc-dark-giallo-100);\n --nc-giallo-200: var(--nc-dark-giallo-200);\n --nc-giallo-300: var(--nc-dark-giallo-300);\n --nc-giallo-400: var(--nc-dark-giallo-400);\n --nc-giallo-500: var(--nc-dark-giallo-500);\n --nc-giallo-600: var(--nc-dark-giallo-600);\n --nc-giallo-700: var(--nc-dark-giallo-700);\n --nc-giallo-800: var(--nc-dark-giallo-800);\n --nc-giallo-900: var(--nc-dark-giallo-900);\n --nc-giallo-1000: var(--nc-dark-giallo-1000);\n --nc-verde-100: var(--nc-dark-verde-100);\n --nc-verde-200: var(--nc-dark-verde-200);\n --nc-verde-300: var(--nc-dark-verde-300);\n --nc-verde-400: var(--nc-dark-verde-400);\n --nc-verde-500: var(--nc-dark-verde-500);\n --nc-verde-600: var(--nc-dark-verde-600);\n --nc-verde-700: var(--nc-dark-verde-700);\n --nc-verde-800: var(--nc-dark-verde-800);\n --nc-verde-900: var(--nc-dark-verde-900);\n --nc-verde-1000: var(--nc-dark-verde-1000);\n --nc-acqua-100: var(--nc-dark-acqua-100);\n --nc-acqua-200: var(--nc-dark-acqua-200);\n --nc-acqua-300: var(--nc-dark-acqua-300);\n --nc-acqua-400: var(--nc-dark-acqua-400);\n --nc-acqua-500: var(--nc-dark-acqua-500);\n --nc-acqua-600: var(--nc-dark-acqua-600);\n --nc-acqua-700: var(--nc-dark-acqua-700);\n --nc-acqua-800: var(--nc-dark-acqua-800);\n --nc-acqua-900: var(--nc-dark-acqua-900);\n --nc-acqua-1000: var(--nc-dark-acqua-1000);\n --nc-viola-100: var(--nc-dark-viola-100);\n --nc-viola-200: var(--nc-dark-viola-200);\n --nc-viola-300: var(--nc-dark-viola-300);\n --nc-viola-400: var(--nc-dark-viola-400);\n --nc-viola-500: var(--nc-dark-viola-500);\n --nc-viola-600: var(--nc-dark-viola-600);\n --nc-viola-700: var(--nc-dark-viola-700);\n --nc-viola-800: var(--nc-dark-viola-800);\n --nc-viola-900: var(--nc-dark-viola-900);\n --nc-viola-1000: var(--nc-dark-viola-1000);\n --nc-rosa-100: var(--nc-dark-rosa-100);\n --nc-rosa-200: var(--nc-dark-rosa-200);\n --nc-rosa-300: var(--nc-dark-rosa-300);\n --nc-rosa-400: var(--nc-dark-rosa-400);\n --nc-rosa-500: var(--nc-dark-rosa-500);\n --nc-rosa-600: var(--nc-dark-rosa-600);\n --nc-rosa-700: var(--nc-dark-rosa-700);\n --nc-rosa-800: var(--nc-dark-rosa-800);\n --nc-rosa-900: var(--nc-dark-rosa-900);\n --nc-rosa-1000: var(--nc-dark-rosa-1000);\n --nc-category-teal-soft: var(--nc-dark-category-teal-soft);\n --nc-category-teal-deep: var(--nc-dark-category-teal-deep);\n --nc-category-purple-soft: var(--nc-dark-category-purple-soft);\n --nc-category-purple-deep: var(--nc-dark-category-purple-deep);\n --nc-category-pink-soft: var(--nc-dark-category-pink-soft);\n --nc-category-pink-deep: var(--nc-dark-category-pink-deep);\n --nc-elevation-resting:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.05),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.08),\n 0px 1px 2px 0px rgb(0% 0% 0% / 0.6);\n --nc-elevation-raised:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.07),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.1),\n 0px 16px 32px -8px rgb(0% 0% 0% / 0.6);\n --nc-elevation-floating:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.09),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.12),\n 0px 32px 64px -16px rgb(0% 0% 0% / 0.7);\n --nc-elevation-modal:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.11),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.14),\n 0px 64px 128px -32px rgb(0% 0% 0% / 0.8);\n --nc-elevation-glass:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.12),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.12),\n 0px 32px 64px -16px rgb(0% 0% 0% / 0.7);\n }\n}";
2
+ export const designTokensCss = "@layer tokens, theme;\n\n\n\n\n\n\n\n\n\n@layer tokens {\n :root {\n --nc-action: oklch(0.1776 0.0000 0.00);\n --nc-action-foreground: oklch(1.0000 0.0000 0.00);\n --nc-action-hover: oklch(0.3012 0.0000 0.00);\n --nc-action-active: oklch(0.0000 0.0000 0.00);\n --nc-ink: oklch(0.1776 0.0000 0.00);\n --nc-body: oklch(0.5103 0.0000 0.00);\n --nc-muted: oklch(0.5278 0.0000 0.00);\n --nc-canvas: oklch(1.0000 0.0000 0.00);\n --nc-canvas-soft: oklch(0.9851 0.0000 0.00);\n --nc-canvas-soft-2: oklch(0.9702 0.0000 0.00);\n --nc-material-workspace: oklch(0.9851 0.0000 0.00);\n --nc-material-solid: oklch(1.0000 0.0000 0.00);\n --nc-material-resting: oklch(1.0000 0.0000 0.00);\n --nc-material-raised: oklch(1.0000 0.0000 0.00);\n --nc-material-floating: oklch(1.0000 0.0000 0.00);\n --nc-material-modal: oklch(1.0000 0.0000 0.00);\n --nc-line: oklch(0.9219 0.0000 0.00);\n --nc-input: oklch(0.5624 0.0000 0.00);\n --nc-focus-ring: oklch(0.1776 0.0000 0.00);\n --nc-scrim: oklch(0.9612 0.0000 0.00);\n --nc-link: oklch(0.5339 0.1875 256.73);\n --nc-link-deep: oklch(0.4653 0.1652 257.00);\n --nc-link-bg-soft: oklch(0.9656 0.0171 248.01);\n --nc-info: oklch(0.5005 0.2804 266.17);\n --nc-info-soft: oklch(0.9457 0.0259 276.40);\n --nc-info-deep: oklch(0.3197 0.1758 266.79);\n --nc-success: oklch(0.6415 0.1644 153.23);\n --nc-success-soft: oklch(0.9170 0.0519 161.77);\n --nc-success-deep: oklch(0.3852 0.0953 154.99);\n --nc-error: oklch(0.5688 0.1995 26.59);\n --nc-error-soft: oklch(0.9522 0.0207 17.52);\n --nc-error-deep: oklch(0.4235 0.1525 27.08);\n --nc-warning: oklch(0.8466 0.1678 84.63);\n --nc-warning-soft: oklch(0.9649 0.0461 90.87);\n --nc-warning-deep: oklch(0.4834 0.0995 82.44);\n --nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00);\n --nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00);\n --nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00);\n --nc-state-ready: oklch(0.5278 0.0000 0.00);\n --nc-state-running: oklch(0.5005 0.2804 266.17);\n --nc-state-review: oklch(0.8466 0.1678 84.63);\n --nc-state-blocked: oklch(0.5688 0.1995 26.59);\n --nc-state-complete: oklch(0.6415 0.1644 153.23);\n --nc-identity-verde: oklch(0.6415 0.1644 153.23);\n --nc-identity-rosso: oklch(0.5688 0.1995 26.59);\n --nc-identity-arancio: oklch(0.6824 0.2108 37.70);\n --nc-identity-giallo: oklch(0.8466 0.1678 84.63);\n --nc-identity-cobalto: oklch(0.5005 0.2804 266.17);\n --nc-identity-azzurro: oklch(0.5618 0.2019 258.24);\n --nc-identity-ink: oklch(0.0000 0.0000 0.00);\n --nc-identity-white: oklch(1.0000 0.0000 0.00);\n --nc-logo-dot: oklch(0.5005 0.2804 266.17);\n --nc-chart-1: oklch(0.5005 0.2804 266.17);\n --nc-chart-2: oklch(0.6398 0.2044 356.46);\n --nc-chart-3: oklch(0.5015 0.1883 294.99);\n --nc-chart-4: oklch(0.6824 0.2108 37.70);\n --nc-chart-5: oklch(0.6161 0.1062 208.85);\n --nc-chart-6: oklch(0.5688 0.1995 26.59);\n --nc-chart-7: oklch(0.7691 0.1577 84.69);\n --nc-chart-8: oklch(0.6415 0.1644 153.23);\n --nc-chart-9: oklch(0.7191 0.1452 266.33);\n --nc-chart-10: oklch(0.8309 0.1048 356.57);\n --nc-cobalto-100: oklch(0.9754 0.0115 264.51);\n --nc-cobalto-200: oklch(0.9543 0.0215 265.76);\n --nc-cobalto-300: oklch(0.9297 0.0334 265.23);\n --nc-cobalto-400: oklch(0.8944 0.0509 267.00);\n --nc-cobalto-500: oklch(0.8308 0.0837 265.90);\n --nc-cobalto-600: oklch(0.7191 0.1452 266.33);\n --nc-cobalto-700: oklch(0.5005 0.2804 266.17);\n --nc-cobalto-800: oklch(0.4602 0.2797 266.14);\n --nc-cobalto-900: oklch(0.4202 0.2522 266.14);\n --nc-cobalto-1000: oklch(0.2811 0.1684 266.17);\n --nc-rosso-100: oklch(0.9752 0.0122 29.87);\n --nc-rosso-200: oklch(0.9552 0.0222 27.81);\n --nc-rosso-300: oklch(0.9290 0.0360 26.28);\n --nc-rosso-400: oklch(0.8944 0.0552 26.52);\n --nc-rosso-500: oklch(0.8304 0.0942 26.48);\n --nc-rosso-600: oklch(0.7201 0.1742 26.79);\n --nc-rosso-700: oklch(0.5688 0.1995 26.59);\n --nc-rosso-800: oklch(0.5297 0.1996 26.67);\n --nc-rosso-900: oklch(0.4882 0.1797 26.59);\n --nc-rosso-1000: oklch(0.2805 0.1143 26.81);\n --nc-arancio-100: oklch(0.9749 0.0125 35.73);\n --nc-arancio-200: oklch(0.9544 0.0233 37.38);\n --nc-arancio-300: oklch(0.9298 0.0366 36.77);\n --nc-arancio-400: oklch(0.8945 0.0567 37.21);\n --nc-arancio-500: oklch(0.8292 0.0974 37.12);\n --nc-arancio-600: oklch(0.7428 0.1602 37.76);\n --nc-arancio-700: oklch(0.6824 0.2108 37.70);\n --nc-arancio-800: oklch(0.6419 0.2102 37.75);\n --nc-arancio-900: oklch(0.4993 0.1647 37.64);\n --nc-arancio-1000: oklch(0.2801 0.0916 38.02);\n --nc-giallo-100: oklch(0.9860 0.0154 86.42);\n --nc-giallo-200: oklch(0.9699 0.0272 83.54);\n --nc-giallo-300: oklch(0.9555 0.0420 85.96);\n --nc-giallo-400: oklch(0.9298 0.0673 84.45);\n --nc-giallo-500: oklch(0.9004 0.1074 84.93);\n --nc-giallo-600: oklch(0.8696 0.1403 84.42);\n --nc-giallo-700: oklch(0.8466 0.1678 84.63);\n --nc-giallo-800: oklch(0.7691 0.1577 84.69);\n --nc-giallo-900: oklch(0.5305 0.1090 83.33);\n --nc-giallo-1000: oklch(0.3186 0.0654 84.14);\n --nc-verde-100: oklch(0.9747 0.0157 154.48);\n --nc-verde-200: oklch(0.9560 0.0265 152.38);\n --nc-verde-300: oklch(0.9290 0.0407 153.11);\n --nc-verde-400: oklch(0.8955 0.0664 152.93);\n --nc-verde-500: oklch(0.8310 0.1403 153.27);\n --nc-verde-600: oklch(0.7191 0.1645 153.16);\n --nc-verde-700: oklch(0.6415 0.1644 153.23);\n --nc-verde-800: oklch(0.6017 0.1542 153.23);\n --nc-verde-900: oklch(0.4992 0.1279 153.23);\n --nc-verde-1000: oklch(0.2815 0.0723 153.13);\n --nc-acqua-100: oklch(0.9752 0.0109 211.04);\n --nc-acqua-200: oklch(0.9559 0.0171 205.84);\n --nc-acqua-300: oklch(0.9297 0.0259 208.75);\n --nc-acqua-400: oklch(0.8954 0.0424 207.56);\n --nc-acqua-500: oklch(0.8304 0.0902 209.06);\n --nc-acqua-600: oklch(0.7205 0.1064 208.54);\n --nc-acqua-700: oklch(0.6161 0.1062 208.85);\n --nc-acqua-800: oklch(0.5765 0.0992 208.28);\n --nc-acqua-900: oklch(0.4990 0.0860 208.78);\n --nc-acqua-1000: oklch(0.2797 0.0484 210.29);\n --nc-viola-100: oklch(0.9745 0.0134 295.33);\n --nc-viola-200: oklch(0.9545 0.0243 296.12);\n --nc-viola-300: oklch(0.9290 0.0381 295.47);\n --nc-viola-400: oklch(0.8954 0.0563 294.18);\n --nc-viola-500: oklch(0.8289 0.0954 295.03);\n --nc-viola-600: oklch(0.7204 0.1631 294.91);\n --nc-viola-700: oklch(0.5015 0.1883 294.99);\n --nc-viola-800: oklch(0.4620 0.1886 294.84);\n --nc-viola-900: oklch(0.4227 0.1694 295.05);\n --nc-viola-1000: oklch(0.2796 0.1131 295.14);\n --nc-rosa-100: oklch(0.9746 0.0139 355.00);\n --nc-rosa-200: oklch(0.9555 0.0241 358.28);\n --nc-rosa-300: oklch(0.9307 0.0386 357.63);\n --nc-rosa-400: oklch(0.8944 0.0614 356.49);\n --nc-rosa-500: oklch(0.8309 0.1048 356.57);\n --nc-rosa-600: oklch(0.7193 0.1969 356.59);\n --nc-rosa-700: oklch(0.6398 0.2044 356.46);\n --nc-rosa-800: oklch(0.6001 0.2050 356.50);\n --nc-rosa-900: oklch(0.5009 0.1842 356.43);\n --nc-rosa-1000: oklch(0.2808 0.1147 356.80);\n --nc-dark-canvas: oklch(0.0000 0.0000 0.00);\n --nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00);\n --nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00);\n --nc-dark-material-workspace: oklch(0.0000 0.0000 0.00);\n --nc-dark-material-solid: oklch(0.0000 0.0000 0.00);\n --nc-dark-material-resting: oklch(0.1448 0.0000 0.00);\n --nc-dark-material-raised: oklch(0.1684 0.0000 0.00);\n --nc-dark-material-floating: oklch(0.1684 0.0000 0.00);\n --nc-dark-material-modal: oklch(0.1684 0.0000 0.00);\n --nc-card-graphite: oklch(0.1957 0.0000 0.00);\n --nc-dark-ink: oklch(0.9461 0.0000 0.00);\n --nc-dark-body: oklch(0.7090 0.0000 0.00);\n --nc-dark-muted: oklch(0.6993 0.0000 0.00);\n --nc-dark-line: oklch(0.2686 0.0000 0.00);\n --nc-dark-input: oklch(0.5590 0.0000 0.00);\n --nc-dark-on-primary: oklch(0.1448 0.0000 0.00);\n --nc-dark-action: oklch(0.9461 0.0000 0.00);\n --nc-dark-action-foreground: oklch(0.1448 0.0000 0.00);\n --nc-dark-action-hover: oklch(0.8761 0.0000 0.00);\n --nc-dark-action-active: oklch(0.8297 0.0000 0.00);\n --nc-dark-link: oklch(0.7173 0.1522 251.00);\n --nc-dark-link-deep: oklch(0.8135 0.0986 247.81);\n --nc-dark-link-bg-soft: oklch(0.2518 0.0572 257.41);\n --nc-dark-focus-ring: oklch(0.9461 0.0000 0.00);\n --nc-dark-scrim: oklch(0.0000 0.0000 0.00);\n --nc-dark-error: oklch(0.7955 0.0980 21.02);\n --nc-dark-error-soft: oklch(0.2296 0.0728 26.06);\n --nc-dark-error-deep: oklch(0.8856 0.0534 19.64);\n --nc-dark-warning: oklch(0.8939 0.1387 90.47);\n --nc-dark-warning-soft: oklch(0.3135 0.0643 85.04);\n --nc-dark-warning-deep: oklch(0.9320 0.0896 90.86);\n --nc-dark-info: oklch(0.7067 0.1528 272.08);\n --nc-dark-info-soft: oklch(0.2118 0.1033 268.28);\n --nc-dark-info-deep: oklch(0.8222 0.0888 274.44);\n --nc-dark-success: oklch(0.7019 0.1753 153.20);\n --nc-dark-success-soft: oklch(0.2893 0.0697 156.32);\n --nc-dark-success-deep: oklch(0.8524 0.0996 159.83);\n --nc-dark-state-ready: oklch(0.5624 0.0000 0.00);\n --nc-dark-state-running: oklch(0.5923 0.2215 269.61);\n --nc-dark-state-review: oklch(0.8466 0.1678 84.63);\n --nc-dark-state-blocked: oklch(0.5688 0.1995 26.59);\n --nc-dark-state-complete: oklch(0.6415 0.1644 153.23);\n --nc-dark-logo-dot: oklch(0.5923 0.2215 269.61);\n --nc-dark-navigation-selection-bg: oklch(0.2393 0.0000 0.00);\n --nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00);\n --nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00);\n --nc-dark-chart-1: oklch(0.6007 0.2160 266.02);\n --nc-dark-chart-2: oklch(0.6611 0.1941 356.61);\n --nc-dark-chart-3: oklch(0.6004 0.1789 294.79);\n --nc-dark-chart-4: oklch(0.6612 0.2003 37.74);\n --nc-dark-chart-5: oklch(0.6568 0.1009 208.69);\n --nc-dark-chart-6: oklch(0.6084 0.1887 26.65);\n --nc-dark-chart-7: oklch(0.8466 0.1678 84.63);\n --nc-dark-chart-8: oklch(0.6608 0.1568 153.03);\n --nc-dark-chart-9: oklch(0.7993 0.1005 266.67);\n --nc-dark-chart-10: oklch(0.8005 0.1279 356.32);\n --nc-dark-cobalto-100: oklch(0.1915 0.0982 266.32);\n --nc-dark-cobalto-200: oklch(0.2197 0.1184 266.25);\n --nc-dark-cobalto-300: oklch(0.2604 0.1398 265.97);\n --nc-dark-cobalto-400: oklch(0.2997 0.1624 266.24);\n --nc-dark-cobalto-500: oklch(0.3702 0.1966 266.08);\n --nc-dark-cobalto-600: oklch(0.6007 0.2160 266.02);\n --nc-dark-cobalto-700: oklch(0.5005 0.2804 266.17);\n --nc-dark-cobalto-800: oklch(0.4602 0.2797 266.14);\n --nc-dark-cobalto-900: oklch(0.7993 0.1005 266.67);\n --nc-dark-cobalto-1000: oklch(0.9604 0.0186 265.98);\n --nc-dark-rosso-100: oklch(0.1907 0.0689 26.80);\n --nc-dark-rosso-200: oklch(0.2215 0.0837 26.41);\n --nc-dark-rosso-300: oklch(0.2596 0.0994 26.37);\n --nc-dark-rosso-400: oklch(0.3014 0.1159 26.97);\n --nc-dark-rosso-500: oklch(0.3705 0.1397 26.54);\n --nc-dark-rosso-600: oklch(0.6084 0.1887 26.65);\n --nc-dark-rosso-700: oklch(0.5688 0.1995 26.59);\n --nc-dark-rosso-800: oklch(0.5297 0.1996 26.67);\n --nc-dark-rosso-900: oklch(0.7992 0.1149 26.43);\n --nc-dark-rosso-1000: oklch(0.9598 0.0198 25.17);\n --nc-dark-arancio-100: oklch(0.1909 0.0632 37.47);\n --nc-dark-arancio-200: oklch(0.2201 0.0732 37.26);\n --nc-dark-arancio-300: oklch(0.2598 0.0852 37.90);\n --nc-dark-arancio-400: oklch(0.2988 0.0989 37.50);\n --nc-dark-arancio-500: oklch(0.3706 0.1219 37.77);\n --nc-dark-arancio-600: oklch(0.6612 0.2003 37.74);\n --nc-dark-arancio-700: oklch(0.6824 0.2108 37.70);\n --nc-dark-arancio-800: oklch(0.6419 0.2102 37.75);\n --nc-dark-arancio-900: oklch(0.7993 0.1180 37.52);\n --nc-dark-arancio-1000: oklch(0.9590 0.0208 36.03);\n --nc-dark-giallo-100: oklch(0.1903 0.0391 84.07);\n --nc-dark-giallo-200: oklch(0.2185 0.0449 83.81);\n --nc-dark-giallo-300: oklch(0.2592 0.0532 83.54);\n --nc-dark-giallo-400: oklch(0.3008 0.0616 85.18);\n --nc-dark-giallo-500: oklch(0.3705 0.0759 85.25);\n --nc-dark-giallo-600: oklch(0.6598 0.1353 84.83);\n --nc-dark-giallo-700: oklch(0.8466 0.1678 84.63);\n --nc-dark-giallo-800: oklch(0.8064 0.1654 84.43);\n --nc-dark-giallo-900: oklch(0.8007 0.1595 84.74);\n --nc-dark-giallo-1000: oklch(0.9604 0.0256 84.59);\n --nc-dark-verde-100: oklch(0.1910 0.0488 153.39);\n --nc-dark-verde-200: oklch(0.2208 0.0571 152.80);\n --nc-dark-verde-300: oklch(0.2606 0.0664 153.49);\n --nc-dark-verde-400: oklch(0.2987 0.0765 153.24);\n --nc-dark-verde-500: oklch(0.3685 0.0944 153.24);\n --nc-dark-verde-600: oklch(0.6608 0.1568 153.03);\n --nc-dark-verde-700: oklch(0.6415 0.1644 153.23);\n --nc-dark-verde-800: oklch(0.6017 0.1542 153.23);\n --nc-dark-verde-900: oklch(0.7994 0.1555 153.29);\n --nc-dark-verde-1000: oklch(0.9600 0.0248 152.88);\n --nc-dark-acqua-100: oklch(0.1914 0.0330 209.05);\n --nc-dark-acqua-200: oklch(0.2192 0.0379 209.81);\n --nc-dark-acqua-300: oklch(0.2610 0.0450 209.30);\n --nc-dark-acqua-400: oklch(0.3011 0.0519 208.95);\n --nc-dark-acqua-500: oklch(0.3711 0.0639 208.82);\n --nc-dark-acqua-600: oklch(0.6568 0.1009 208.69);\n --nc-dark-acqua-700: oklch(0.6161 0.1062 208.85);\n --nc-dark-acqua-800: oklch(0.5765 0.0992 208.28);\n --nc-dark-acqua-900: oklch(0.8004 0.1007 208.37);\n --nc-dark-acqua-1000: oklch(0.9596 0.0161 206.44);\n --nc-dark-viola-100: oklch(0.1897 0.0654 295.79);\n --nc-dark-viola-200: oklch(0.2192 0.0805 294.49);\n --nc-dark-viola-300: oklch(0.2605 0.0949 295.18);\n --nc-dark-viola-400: oklch(0.2990 0.1087 294.76);\n --nc-dark-viola-500: oklch(0.3702 0.1310 295.14);\n --nc-dark-viola-600: oklch(0.6004 0.1789 294.79);\n --nc-dark-viola-700: oklch(0.5015 0.1883 294.99);\n --nc-dark-viola-800: oklch(0.4620 0.1886 294.84);\n --nc-dark-viola-900: oklch(0.8000 0.1131 295.20);\n --nc-dark-viola-1000: oklch(0.9591 0.0215 294.60);\n --nc-dark-rosa-100: oklch(0.1902 0.0716 355.67);\n --nc-dark-rosa-200: oklch(0.2198 0.0850 357.06);\n --nc-dark-rosa-300: oklch(0.2591 0.1026 356.37);\n --nc-dark-rosa-400: oklch(0.3000 0.1188 356.62);\n --nc-dark-rosa-500: oklch(0.3695 0.1426 356.71);\n --nc-dark-rosa-600: oklch(0.6611 0.1941 356.61);\n --nc-dark-rosa-700: oklch(0.6398 0.2044 356.46);\n --nc-dark-rosa-800: oklch(0.6001 0.2050 356.50);\n --nc-dark-rosa-900: oklch(0.8005 0.1279 356.32);\n --nc-dark-rosa-1000: oklch(0.9599 0.0220 356.32);\n --nc-category-teal-soft: oklch(0.9585 0.0244 187.32);\n --nc-category-teal-deep: oklch(0.4600 0.0788 185.34);\n --nc-dark-category-teal-soft: oklch(0.2627 0.0410 187.13);\n --nc-dark-category-teal-deep: oklch(0.8398 0.1008 186.70);\n --nc-category-purple-soft: oklch(0.9464 0.0327 307.17);\n --nc-category-purple-deep: oklch(0.4541 0.1958 308.26);\n --nc-dark-category-purple-soft: oklch(0.2479 0.0790 306.78);\n --nc-dark-category-purple-deep: oklch(0.7911 0.1271 310.92);\n --nc-category-pink-soft: oklch(0.9476 0.0263 347.12);\n --nc-category-pink-deep: oklch(0.4863 0.1711 355.09);\n --nc-dark-category-pink-soft: oklch(0.2550 0.0598 353.51);\n --nc-dark-category-pink-deep: oklch(0.8108 0.1129 347.21);\n --nc-xxs: 4px;\n --nc-xs: 8px;\n --nc-sm: 12px;\n --nc-md: 16px;\n --nc-lg: 24px;\n --nc-xl: 32px;\n --nc-2xl: 40px;\n --nc-3xl: 48px;\n --nc-4xl: 64px;\n --nc-5xl: 96px;\n --nc-6xl: 128px;\n --nc-guide: 1px;\n --nc-icon-stroke: 1.5px;\n --nc-icon-stroke-sm: 1.25px;\n --nc-focus-outline-width: 2px;\n --nc-focus-outline-offset: 2px;\n --nc-control-height: 36px;\n --nc-control-height-sm: 32px;\n --nc-control-height-lg: 40px;\n --nc-control-height-xs: 24px;\n --nc-control-padding-inline: 12px;\n --nc-button-padding-inline-sm: 6px;\n --nc-button-padding-inline: 10px;\n --nc-button-padding-inline-lg: 14px;\n --nc-card-padding: 20px;\n --nc-touch-target: 44px;\n --nc-rounded-none: 0px;\n --nc-rounded-xs: 2px;\n --nc-rounded-xs-plus: 4px;\n --nc-rounded-sm: 6px;\n --nc-rounded-md: 8px;\n --nc-rounded-lg: 12px;\n --nc-rounded-xl: 16px;\n --nc-rounded-2xl: 20px;\n --nc-rounded-3xl: 24px;\n --nc-rounded-full: 9999px;\n --nc-type-display-xl-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-xl-font-size: 72px;\n --nc-type-display-xl-font-weight: 600;\n --nc-type-display-xl-line-height: 72px;\n --nc-type-display-xl-letter-spacing: -4.32px;\n --nc-type-display-wide-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-wide-font-size: 64px;\n --nc-type-display-wide-font-weight: 600;\n --nc-type-display-wide-line-height: 64px;\n --nc-type-display-wide-letter-spacing: -3.84px;\n --nc-type-display-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-lg-font-size: 56px;\n --nc-type-display-lg-font-weight: 600;\n --nc-type-display-lg-line-height: 56px;\n --nc-type-display-lg-letter-spacing: -3.36px;\n --nc-type-display-section-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-section-font-size: 48px;\n --nc-type-display-section-font-weight: 600;\n --nc-type-display-section-line-height: 56px;\n --nc-type-display-section-letter-spacing: -2.88px;\n --nc-type-display-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-md-font-size: 40px;\n --nc-type-display-md-font-weight: 600;\n --nc-type-display-md-line-height: 48px;\n --nc-type-display-md-letter-spacing: -2.4px;\n --nc-type-heading-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-lg-font-size: 32px;\n --nc-type-heading-lg-font-weight: 600;\n --nc-type-heading-lg-line-height: 40px;\n --nc-type-heading-lg-letter-spacing: -1.28px;\n --nc-type-heading-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-md-font-size: 24px;\n --nc-type-heading-md-font-weight: 600;\n --nc-type-heading-md-line-height: 32px;\n --nc-type-heading-md-letter-spacing: -0.96px;\n --nc-type-heading-sm-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-sm-font-size: 20px;\n --nc-type-heading-sm-font-weight: 600;\n --nc-type-heading-sm-line-height: 26px;\n --nc-type-heading-sm-letter-spacing: -0.4px;\n --nc-type-heading-xs-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-xs-font-size: 16px;\n --nc-type-heading-xs-font-weight: 600;\n --nc-type-heading-xs-line-height: 24px;\n --nc-type-heading-xs-letter-spacing: -0.32px;\n --nc-type-heading-compact-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-compact-font-size: 14px;\n --nc-type-heading-compact-font-weight: 600;\n --nc-type-heading-compact-line-height: 20px;\n --nc-type-heading-compact-letter-spacing: -0.28px;\n --nc-type-button-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-button-lg-font-size: 16px;\n --nc-type-button-lg-font-weight: 500;\n --nc-type-button-lg-line-height: 24px;\n --nc-type-button-lg-letter-spacing: 0px;\n --nc-type-button-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-button-font-size: 14px;\n --nc-type-button-font-weight: 500;\n --nc-type-button-line-height: 21px;\n --nc-type-button-letter-spacing: 0px;\n --nc-type-button-xs-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-button-xs-font-size: 12px;\n --nc-type-button-xs-font-weight: 500;\n --nc-type-button-xs-line-height: 16px;\n --nc-type-button-xs-letter-spacing: 0px;\n --nc-type-label-display-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-display-font-size: 20px;\n --nc-type-label-display-font-weight: 400;\n --nc-type-label-display-line-height: 32px;\n --nc-type-label-display-letter-spacing: 0px;\n --nc-type-label-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-lg-font-size: 18px;\n --nc-type-label-lg-font-weight: 400;\n --nc-type-label-lg-line-height: 20px;\n --nc-type-label-lg-letter-spacing: 0px;\n --nc-type-label-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-md-font-size: 16px;\n --nc-type-label-md-font-weight: 400;\n --nc-type-label-md-line-height: 20px;\n --nc-type-label-md-letter-spacing: 0px;\n --nc-type-label-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-font-size: 14px;\n --nc-type-label-font-weight: 400;\n --nc-type-label-line-height: 20px;\n --nc-type-label-letter-spacing: 0px;\n --nc-type-label-sm-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-sm-font-size: 13px;\n --nc-type-label-sm-font-weight: 400;\n --nc-type-label-sm-line-height: 16px;\n --nc-type-label-sm-letter-spacing: 0px;\n --nc-type-caption-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-caption-font-size: 12px;\n --nc-type-caption-font-weight: 400;\n --nc-type-caption-line-height: 16px;\n --nc-type-caption-letter-spacing: 0px;\n --nc-type-label-mono-lg-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-label-mono-lg-font-size: 14px;\n --nc-type-label-mono-lg-font-weight: 400;\n --nc-type-label-mono-lg-line-height: 20px;\n --nc-type-label-mono-lg-letter-spacing: 0px;\n --nc-type-label-mono-md-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-label-mono-md-font-size: 13px;\n --nc-type-label-mono-md-font-weight: 400;\n --nc-type-label-mono-md-line-height: 20px;\n --nc-type-label-mono-md-letter-spacing: 0px;\n --nc-type-label-mono-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-label-mono-font-size: 12px;\n --nc-type-label-mono-font-weight: 400;\n --nc-type-label-mono-line-height: 16px;\n --nc-type-label-mono-letter-spacing: 0px;\n --nc-type-body-display-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-display-font-size: 24px;\n --nc-type-body-display-font-weight: 400;\n --nc-type-body-display-line-height: 36px;\n --nc-type-body-display-letter-spacing: 0px;\n --nc-type-body-lead-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-lead-font-size: 20px;\n --nc-type-body-lead-font-weight: 400;\n --nc-type-body-lead-line-height: 36px;\n --nc-type-body-lead-letter-spacing: 0px;\n --nc-type-body-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-lg-font-size: 18px;\n --nc-type-body-lg-font-weight: 400;\n --nc-type-body-lg-line-height: 28px;\n --nc-type-body-lg-letter-spacing: 0px;\n --nc-type-body-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-md-font-size: 16px;\n --nc-type-body-md-font-weight: 400;\n --nc-type-body-md-line-height: 24px;\n --nc-type-body-md-letter-spacing: 0px;\n --nc-type-body-sm-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-sm-font-size: 14px;\n --nc-type-body-sm-font-weight: 400;\n --nc-type-body-sm-line-height: 20px;\n --nc-type-body-sm-letter-spacing: 0px;\n --nc-type-body-compact-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-compact-font-size: 13px;\n --nc-type-body-compact-font-weight: 400;\n --nc-type-body-compact-line-height: 18px;\n --nc-type-body-compact-letter-spacing: 0px;\n --nc-type-code-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-code-font-size: 13px;\n --nc-type-code-font-weight: 400;\n --nc-type-code-line-height: 18px;\n --nc-type-code-letter-spacing: 0px;\n --nc-material-scrim-opacity: 80%;\n --nc-material-dark-scrim-opacity: 60%;\n --nc-material-glass-opacity: 72%;\n --nc-material-glass-saturation: 180%;\n --nc-material-glass-blur: 20px;\n --nc-elevation-resting: 0px 0px 0px 1px rgb(0% 0% 0% / 0.08), 0px 2px 2px 0px rgb(0% 0% 0% / 0.04);\n --nc-elevation-raised:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 2px 2px 0px rgb(0% 0% 0% / 0.04),\n 0px 8px 16px -4px rgb(0% 0% 0% / 0.08);\n --nc-elevation-floating:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 1px 1px 0px rgb(0% 0% 0% / 0.02),\n 0px 4px 8px -4px rgb(0% 0% 0% / 0.06),\n 0px 16px 32px -8px rgb(0% 0% 0% / 0.1);\n --nc-elevation-modal:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 8px 24px -12px rgb(0% 0% 0% / 0.12),\n 0px 32px 72px -12px rgb(0% 0% 0% / 0.12);\n --nc-elevation-glass:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.75),\n inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.35),\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 4px 8px -4px rgb(0% 0% 0% / 0.06),\n 0px 16px 32px -8px rgb(0% 0% 0% / 0.08);\n --nc-duration-control: 100ms;\n --nc-duration-close: 140ms;\n --nc-duration-confirm: 180ms;\n --nc-duration-open: 220ms;\n --nc-duration-msg-in: 240ms;\n --nc-duration-transition: 240ms;\n --nc-duration-arrive: 300ms;\n --nc-duration-drawer-swipe: 400ms;\n --nc-duration-drawer: 450ms;\n --nc-duration-wait: 1.6s;\n --nc-ease-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1);\n --nc-ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);\n --nc-ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);\n --nc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);\n --nc-content-max: 1200px;\n --nc-gutter-mobile: 20px;\n --nc-gutter-tablet: 40px;\n --nc-gutter-desktop: 64px;\n --nc-section-step-mobile: 64px;\n --nc-section-step-desktop: 96px;\n }\n}\n\n\n@layer theme {\n .dark {\n --nc-canvas: var(--nc-dark-canvas);\n --nc-canvas-soft: var(--nc-dark-canvas-soft);\n --nc-canvas-soft-2: var(--nc-dark-canvas-soft-2);\n --nc-material-workspace: var(--nc-dark-material-workspace);\n --nc-material-solid: var(--nc-dark-material-solid);\n --nc-material-resting: var(--nc-dark-material-resting);\n --nc-material-raised: var(--nc-dark-material-raised);\n --nc-material-floating: var(--nc-dark-material-floating);\n --nc-material-modal: var(--nc-dark-material-modal);\n --nc-ink: var(--nc-dark-ink);\n --nc-body: var(--nc-dark-body);\n --nc-muted: var(--nc-dark-muted);\n --nc-line: var(--nc-dark-line);\n --nc-input: var(--nc-dark-input);\n --nc-action: var(--nc-dark-action);\n --nc-action-foreground: var(--nc-dark-action-foreground);\n --nc-action-hover: var(--nc-dark-action-hover);\n --nc-action-active: var(--nc-dark-action-active);\n --nc-link: var(--nc-dark-link);\n --nc-link-deep: var(--nc-dark-link-deep);\n --nc-link-bg-soft: var(--nc-dark-link-bg-soft);\n --nc-focus-ring: var(--nc-dark-focus-ring);\n --nc-scrim: var(--nc-dark-scrim);\n --nc-error: var(--nc-dark-error);\n --nc-error-soft: var(--nc-dark-error-soft);\n --nc-error-deep: var(--nc-dark-error-deep);\n --nc-warning: var(--nc-dark-warning);\n --nc-warning-soft: var(--nc-dark-warning-soft);\n --nc-warning-deep: var(--nc-dark-warning-deep);\n --nc-info: var(--nc-dark-info);\n --nc-info-soft: var(--nc-dark-info-soft);\n --nc-info-deep: var(--nc-dark-info-deep);\n --nc-success: var(--nc-dark-success);\n --nc-success-soft: var(--nc-dark-success-soft);\n --nc-success-deep: var(--nc-dark-success-deep);\n --nc-state-ready: var(--nc-dark-state-ready);\n --nc-state-running: var(--nc-dark-state-running);\n --nc-state-review: var(--nc-dark-state-review);\n --nc-state-blocked: var(--nc-dark-state-blocked);\n --nc-state-complete: var(--nc-dark-state-complete);\n --nc-logo-dot: var(--nc-dark-logo-dot);\n --nc-navigation-selection-bg: var(--nc-dark-navigation-selection-bg);\n --nc-navigation-selection-fg: var(--nc-dark-navigation-selection-fg);\n --nc-navigation-selection-hover: var(--nc-dark-navigation-selection-hover);\n --nc-chart-1: var(--nc-dark-chart-1);\n --nc-chart-2: var(--nc-dark-chart-2);\n --nc-chart-3: var(--nc-dark-chart-3);\n --nc-chart-4: var(--nc-dark-chart-4);\n --nc-chart-5: var(--nc-dark-chart-5);\n --nc-chart-6: var(--nc-dark-chart-6);\n --nc-chart-7: var(--nc-dark-chart-7);\n --nc-chart-8: var(--nc-dark-chart-8);\n --nc-chart-9: var(--nc-dark-chart-9);\n --nc-chart-10: var(--nc-dark-chart-10);\n --nc-cobalto-100: var(--nc-dark-cobalto-100);\n --nc-cobalto-200: var(--nc-dark-cobalto-200);\n --nc-cobalto-300: var(--nc-dark-cobalto-300);\n --nc-cobalto-400: var(--nc-dark-cobalto-400);\n --nc-cobalto-500: var(--nc-dark-cobalto-500);\n --nc-cobalto-600: var(--nc-dark-cobalto-600);\n --nc-cobalto-700: var(--nc-dark-cobalto-700);\n --nc-cobalto-800: var(--nc-dark-cobalto-800);\n --nc-cobalto-900: var(--nc-dark-cobalto-900);\n --nc-cobalto-1000: var(--nc-dark-cobalto-1000);\n --nc-rosso-100: var(--nc-dark-rosso-100);\n --nc-rosso-200: var(--nc-dark-rosso-200);\n --nc-rosso-300: var(--nc-dark-rosso-300);\n --nc-rosso-400: var(--nc-dark-rosso-400);\n --nc-rosso-500: var(--nc-dark-rosso-500);\n --nc-rosso-600: var(--nc-dark-rosso-600);\n --nc-rosso-700: var(--nc-dark-rosso-700);\n --nc-rosso-800: var(--nc-dark-rosso-800);\n --nc-rosso-900: var(--nc-dark-rosso-900);\n --nc-rosso-1000: var(--nc-dark-rosso-1000);\n --nc-arancio-100: var(--nc-dark-arancio-100);\n --nc-arancio-200: var(--nc-dark-arancio-200);\n --nc-arancio-300: var(--nc-dark-arancio-300);\n --nc-arancio-400: var(--nc-dark-arancio-400);\n --nc-arancio-500: var(--nc-dark-arancio-500);\n --nc-arancio-600: var(--nc-dark-arancio-600);\n --nc-arancio-700: var(--nc-dark-arancio-700);\n --nc-arancio-800: var(--nc-dark-arancio-800);\n --nc-arancio-900: var(--nc-dark-arancio-900);\n --nc-arancio-1000: var(--nc-dark-arancio-1000);\n --nc-giallo-100: var(--nc-dark-giallo-100);\n --nc-giallo-200: var(--nc-dark-giallo-200);\n --nc-giallo-300: var(--nc-dark-giallo-300);\n --nc-giallo-400: var(--nc-dark-giallo-400);\n --nc-giallo-500: var(--nc-dark-giallo-500);\n --nc-giallo-600: var(--nc-dark-giallo-600);\n --nc-giallo-700: var(--nc-dark-giallo-700);\n --nc-giallo-800: var(--nc-dark-giallo-800);\n --nc-giallo-900: var(--nc-dark-giallo-900);\n --nc-giallo-1000: var(--nc-dark-giallo-1000);\n --nc-verde-100: var(--nc-dark-verde-100);\n --nc-verde-200: var(--nc-dark-verde-200);\n --nc-verde-300: var(--nc-dark-verde-300);\n --nc-verde-400: var(--nc-dark-verde-400);\n --nc-verde-500: var(--nc-dark-verde-500);\n --nc-verde-600: var(--nc-dark-verde-600);\n --nc-verde-700: var(--nc-dark-verde-700);\n --nc-verde-800: var(--nc-dark-verde-800);\n --nc-verde-900: var(--nc-dark-verde-900);\n --nc-verde-1000: var(--nc-dark-verde-1000);\n --nc-acqua-100: var(--nc-dark-acqua-100);\n --nc-acqua-200: var(--nc-dark-acqua-200);\n --nc-acqua-300: var(--nc-dark-acqua-300);\n --nc-acqua-400: var(--nc-dark-acqua-400);\n --nc-acqua-500: var(--nc-dark-acqua-500);\n --nc-acqua-600: var(--nc-dark-acqua-600);\n --nc-acqua-700: var(--nc-dark-acqua-700);\n --nc-acqua-800: var(--nc-dark-acqua-800);\n --nc-acqua-900: var(--nc-dark-acqua-900);\n --nc-acqua-1000: var(--nc-dark-acqua-1000);\n --nc-viola-100: var(--nc-dark-viola-100);\n --nc-viola-200: var(--nc-dark-viola-200);\n --nc-viola-300: var(--nc-dark-viola-300);\n --nc-viola-400: var(--nc-dark-viola-400);\n --nc-viola-500: var(--nc-dark-viola-500);\n --nc-viola-600: var(--nc-dark-viola-600);\n --nc-viola-700: var(--nc-dark-viola-700);\n --nc-viola-800: var(--nc-dark-viola-800);\n --nc-viola-900: var(--nc-dark-viola-900);\n --nc-viola-1000: var(--nc-dark-viola-1000);\n --nc-rosa-100: var(--nc-dark-rosa-100);\n --nc-rosa-200: var(--nc-dark-rosa-200);\n --nc-rosa-300: var(--nc-dark-rosa-300);\n --nc-rosa-400: var(--nc-dark-rosa-400);\n --nc-rosa-500: var(--nc-dark-rosa-500);\n --nc-rosa-600: var(--nc-dark-rosa-600);\n --nc-rosa-700: var(--nc-dark-rosa-700);\n --nc-rosa-800: var(--nc-dark-rosa-800);\n --nc-rosa-900: var(--nc-dark-rosa-900);\n --nc-rosa-1000: var(--nc-dark-rosa-1000);\n --nc-category-teal-soft: var(--nc-dark-category-teal-soft);\n --nc-category-teal-deep: var(--nc-dark-category-teal-deep);\n --nc-category-purple-soft: var(--nc-dark-category-purple-soft);\n --nc-category-purple-deep: var(--nc-dark-category-purple-deep);\n --nc-category-pink-soft: var(--nc-dark-category-pink-soft);\n --nc-category-pink-deep: var(--nc-dark-category-pink-deep);\n --nc-material-scrim-opacity: var(--nc-material-dark-scrim-opacity);\n --nc-elevation-resting:\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.145),\n 0px 0px 0px 2px rgb(0% 0% 0%),\n 0px 1px 2px 0px rgb(0% 0% 0% / 0.5);\n --nc-elevation-raised:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.06),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.16),\n 0px 0px 0px 2px rgb(0% 0% 0%),\n 0px 12px 24px -8px rgb(0% 0% 0% / 0.8);\n --nc-elevation-floating:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.08),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.16),\n 0px 0px 0px 2px rgb(0% 0% 0%),\n 0px 24px 48px -12px rgb(0% 0% 0% / 0.9);\n --nc-elevation-modal:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.1),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.18),\n 0px 0px 0px 2px rgb(0% 0% 0%),\n 0px 48px 96px -24px rgb(0% 0% 0%);\n --nc-elevation-glass:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.1),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.14),\n 0px 16px 32px -12px rgb(0% 0% 0% / 0.8);\n }\n}";
3
3
  export const brandWordmarkSvg = "<svg data-slot=\"brand-wordmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 858 150\" width=\"137\" height=\"24\" class=\"block h-6 w-auto\" role=\"img\" aria-label=\"nadicode\"><g fill=\"none\" stroke=\"currentColor\" stroke-width=\"18\"><path d=\"M9 150V100A41 41 0 0 1 91 100V150\"></path><circle cx=\"172\" cy=\"100\" r=\"41\"></circle><path d=\"M213 50V150\"></path><circle cx=\"294\" cy=\"100\" r=\"41\"></circle><path d=\"M335 0V150\"></path><path d=\"M375 50V150\"></path><path d=\"M484.99 71.01A41 41 0 1 0 484.99 128.99\"></path><circle cx=\"564\" cy=\"100\" r=\"41\"></circle><circle cx=\"686\" cy=\"100\" r=\"41\"></circle><path d=\"M727 0V150\"></path><path d=\"M767 100H849A41 41 0 1 0 839.41 126.35\"></path></g><circle cx=\"375\" cy=\"21\" r=\"14\" fill=\"var(--nc-logo-dot)\"></circle></svg>";
@@ -1,6 +1,6 @@
1
1
  /*
2
2
  * @nadicodeai/ui/components.css — what the components need from a stylesheet,
3
- * and nothing that styles a page.
3
+ * and nothing that styles a page but its text rendering.
4
4
  *
5
5
  * `globals.css` owns an application: it imports Tailwind, the complete design
6
6
  * system with its reset and base layer, and this file. A host that already
@@ -14,7 +14,9 @@
14
14
  * It carries the three things without which a component renders unstyled: the
15
15
  * `@source` lines that let the host's Tailwind see the components' class names
16
16
  * (Tailwind never scans node_modules), the `nc-*` utilities those names use,
17
- * and the few rules that belong to a component and not to a page.
17
+ * and the few rules that belong to a component and not to a page. The text
18
+ * rendering (DESIGN.md "Typography") sits here because every product takes
19
+ * this file, through `globals.css` or as a host.
18
20
  *
19
21
  * What the host must already have: the shadcn role names in its own theme
20
22
  * (`--color-popover`, `--color-border`, `--color-muted-foreground`, …), mapped
@@ -23,6 +25,13 @@
23
25
  * that its theming, skins included, reaches our components unchanged.
24
26
  */
25
27
 
28
+ @layer base {
29
+ html {
30
+ -webkit-font-smoothing: antialiased;
31
+ -moz-osx-font-smoothing: grayscale;
32
+ }
33
+ }
34
+
26
35
  @layer components {
27
36
  :where(
28
37
  [data-slot="table"][data-variant="striped"] [data-slot="table-body"] > tr:nth-child(even)
@@ -32,32 +41,28 @@
32
41
  }
33
42
 
34
43
  /*
35
- * The one glass material (DESIGN.md "Elevation & Depth"): floating chrome —
36
- * menus, popovers, selects, comboboxes, the command palette, bars and toasts —
37
- * may carry it; content surfaces stay solid. Glass composites only over our own
38
- * content. Its edge is the glass recipe: a top highlight, an inner hairline,
39
- * an outer edge and the floating rung's shadows (DESIGN.md, "Glass"). A fine grain
40
- * over the fill keeps the blurred colour behind it from banding. Declared as a
41
- * utility so variant prefixes can gate it (navigation-menu's non-viewport
42
- * popup). Reduced transparency falls back to the same solid surface at the
43
- * same elevation.
44
+ * Glass, where DESIGN.md "Elevation & Depth" places it: the resting surface at
45
+ * the glass opacity, blurred and saturated, with its own edge
46
+ * (`--nc-elevation-glass`); a fine grain over the fill keeps the blurred colour
47
+ * behind it from banding. Declared as a utility so variant prefixes can gate it.
48
+ * Without backdrop-filter, or with reduced transparency, the fill is the solid
49
+ * resting surface.
44
50
  */
45
51
  @utility nc-glass {
46
- background: var(--popover);
52
+ background: var(--nc-material-resting);
47
53
  box-shadow: var(--nc-elevation-glass);
48
54
 
49
55
  @supports (backdrop-filter: blur(1px)) {
50
56
  background:
51
57
  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSdnJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNnKScgb3BhY2l0eT0nLjA1Jy8+PC9zdmc+"),
52
- color-mix(in srgb, var(--popover) var(--nc-material-glass-opacity), transparent);
58
+ color-mix(in srgb, var(--nc-material-resting) var(--nc-material-glass-opacity), transparent);
53
59
  backdrop-filter: blur(var(--nc-material-glass-blur))
54
60
  saturate(var(--nc-material-glass-saturation));
55
61
  }
56
62
 
57
63
  @media (prefers-reduced-transparency: reduce) {
58
- background: var(--popover);
64
+ background: var(--nc-material-resting);
59
65
  backdrop-filter: none;
60
- box-shadow: var(--nc-elevation-floating);
61
66
  }
62
67
  }
63
68
 
@@ -82,10 +87,6 @@
82
87
 
83
88
  &.nc-glass {
84
89
  box-shadow: var(--nc-elevation-glass);
85
-
86
- @media (prefers-reduced-transparency: reduce) {
87
- box-shadow: var(--nc-elevation-floating);
88
- }
89
90
  }
90
91
  }
91
92
 
@@ -112,6 +113,7 @@
112
113
  @layer components {
113
114
  .nc-toast {
114
115
  border: 0 !important;
116
+ box-shadow: var(--nc-elevation-floating) !important;
115
117
  }
116
118
 
117
119
  /*
@@ -708,7 +710,7 @@
708
710
  aspect-ratio: 856 / 540;
709
711
  overflow: hidden;
710
712
  border-radius: 3.7cqi;
711
- background: var(--nc-dark-material-floating);
713
+ background: var(--nc-card-graphite);
712
714
  color: var(--nc-identity-white);
713
715
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
714
716
  transition: transform var(--nc-duration-transition) var(--nc-ease-out-strong);
@@ -30,13 +30,12 @@
30
30
  @custom-variant dark (&:where(.dark, .dark *));
31
31
 
32
32
  /*
33
- * Dark mode carries height in tone (DESIGN.md "Elevation & Depth"): the page
34
- * stays true black and each rung's surface is one fixed step lighter. The rung
33
+ * Each height has its surface tone (DESIGN.md "Elevation & Depth"). The rung
35
34
  * sets the card and popover roles on its own element, so whichever role that
36
35
  * surface paints with takes the rung's tone, whatever order the classes land
37
- * in. A rung behind a variant prefix keeps the page's roles. In light every
38
- * tone is the solid white. This belongs to the application
39
- * stylesheet, not components.css, because a host keeps its own roles.
36
+ * in. A rung behind a variant prefix keeps the page's roles. This belongs to
37
+ * the application stylesheet, not components.css, because a host keeps its
38
+ * own roles.
40
39
  */
41
40
  @layer components {
42
41
  .nc-elevation-resting {
@@ -75,15 +74,6 @@
75
74
  --nc-field: color-mix(in srgb, var(--nc-dark-canvas) 45%, var(--card));
76
75
  }
77
76
 
78
- /* In dark, what floats is lit from above: a white wash fading out over its first 120 px. */
79
- :where(.dark) :is(.nc-elevation-floating, .nc-elevation-modal):not(.nc-glass) {
80
- background-image: linear-gradient(
81
- to bottom,
82
- rgb(255 255 255 / 0.045),
83
- rgb(255 255 255 / 0) 120px
84
- );
85
- }
86
-
87
77
  /*
88
78
  * A lifted dark surface is lighter than the soft steps the hover, selected
89
79
  * and keycap fills take on the black page, so on it those fills step up
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nadicodeai/ui",
3
- "version": "12.1.106",
3
+ "version": "12.1.108",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -80,7 +80,7 @@
80
80
  "@base-ui/react": "^1.9.0",
81
81
  "@iconify-icons/logos": "^2.0.2",
82
82
  "@iconify/react": "^6.0.2",
83
- "@nadicodeai/design-system": "12.1.106",
83
+ "@nadicodeai/design-system": "12.1.108",
84
84
  "@tanstack/react-table": "^9.2.8",
85
85
  "class-variance-authority": "^0.7.1",
86
86
  "clsx": "^2.1.1",