@nadicodeai/ui 12.1.101 → 12.1.102
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.
- package/dist/components/account-menu.d.ts +18 -18
- package/dist/components/account-menu.d.ts.map +1 -1
- package/dist/components/account-menu.js +17 -13
- package/dist/components/menu-choice-row.d.ts +6 -8
- package/dist/components/menu-choice-row.d.ts.map +1 -1
- package/dist/components/menu-choice-row.js +8 -8
- package/dist/components/portal-sidebar-frame.d.ts.map +1 -1
- package/dist/components/portal-sidebar-frame.js +2 -2
- package/dist/components/settings-page.d.ts +2 -2
- package/dist/components/settings-page.js +2 -2
- package/dist/components/settings-section.d.ts +2 -2
- package/dist/components/settings-section.js +2 -2
- package/dist/components/switch.d.ts +3 -3
- package/dist/components/switch.js +3 -3
- package/dist/components/theme-mode-switcher.d.ts +2 -2
- package/dist/components/theme-mode-switcher.d.ts.map +1 -1
- package/dist/components/theme-mode-switcher.js +3 -4
- package/dist/showcase/specimens/menus.d.ts.map +1 -1
- package/dist/showcase/specimens/menus.js +1 -2
- package/dist/showcase/usage.generated.d.ts.map +1 -1
- package/dist/showcase/usage.generated.js +11 -11
- package/dist/standalone/index.js +1 -1
- package/package.json +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ComponentProps,
|
|
1
|
+
import type { ComponentProps, ReactNode } from "react";
|
|
2
2
|
import type { MenuCommand } from "./action-menu.js";
|
|
3
3
|
import { type MenuChoiceRowProps } from "./menu-choice-row.js";
|
|
4
4
|
import type { PageCommandAction } from "./page-actions.js";
|
|
@@ -16,26 +16,29 @@ export type AccountIdentity = {
|
|
|
16
16
|
/** The name a person recognises as theirs. */
|
|
17
17
|
name: string;
|
|
18
18
|
/**
|
|
19
|
-
* Under the name: an email, the scope they are working
|
|
20
|
-
*
|
|
21
|
-
* them all.
|
|
19
|
+
* Under the name in the menu's header: an email, the scope they are working
|
|
20
|
+
* in. The trigger shows none of them.
|
|
22
21
|
*/
|
|
23
22
|
lines?: ReactNode[];
|
|
23
|
+
/**
|
|
24
|
+
* A condition the person must see without opening the menu, such as the
|
|
25
|
+
* account being suspended: the trigger shows it under the name, and the
|
|
26
|
+
* menu's header shows it first.
|
|
27
|
+
*/
|
|
28
|
+
notice?: ReactNode;
|
|
24
29
|
};
|
|
25
30
|
export type AccountMenuIdentityProps = {
|
|
26
31
|
className?: string;
|
|
27
32
|
identity: AccountIdentity;
|
|
28
33
|
/** The picture alone, for a navigation rail drawn too narrow for the name. */
|
|
29
34
|
pictureOnly?: boolean;
|
|
30
|
-
/** `lg` is the menu's own header; `default` is the trigger. */
|
|
31
|
-
size?: "default" | "lg";
|
|
32
35
|
};
|
|
33
36
|
/**
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
+
* Whose account it is at the sidebar's foot, as Vercel draws it: the picture,
|
|
38
|
+
* the name with any notice under it, and the three dots at the end. The
|
|
39
|
+
* account menu's trigger draws it, and so does a sample of the Portal's column.
|
|
37
40
|
*/
|
|
38
|
-
export declare function AccountMenuIdentity({ className, identity, pictureOnly,
|
|
41
|
+
export declare function AccountMenuIdentity({ className, identity, pictureOnly, }: AccountMenuIdentityProps): import("react").JSX.Element;
|
|
39
42
|
export type AccountMenuCommand = MenuCommand & {
|
|
40
43
|
/** A reading at the row's end: "62% left". */
|
|
41
44
|
value?: ReactNode;
|
|
@@ -43,7 +46,6 @@ export type AccountMenuCommand = MenuCommand & {
|
|
|
43
46
|
/** A product's own exclusive setting, in a submenu: Alveare's presence. */
|
|
44
47
|
export type AccountMenuChoice = {
|
|
45
48
|
label: string;
|
|
46
|
-
icon: ReactElement;
|
|
47
49
|
value: string;
|
|
48
50
|
/** Each option's name, its mark, and one muted line under the name when the name alone does not say what it is. */
|
|
49
51
|
options: readonly {
|
|
@@ -75,19 +77,17 @@ export type AccountMenuProps = {
|
|
|
75
77
|
};
|
|
76
78
|
/** Applies at once and keeps the menu open. */
|
|
77
79
|
theme: ComponentProps<typeof ThemeModeMenu>;
|
|
78
|
-
language?: MenuChoiceRowProps<string
|
|
79
|
-
icon: ReactElement;
|
|
80
|
-
};
|
|
80
|
+
language?: MenuChoiceRowProps<string>;
|
|
81
81
|
choices?: readonly AccountMenuChoice[];
|
|
82
82
|
commands?: readonly AccountMenuCommand[];
|
|
83
|
+
/** Where the product's commands stand: first, above Theme, or after its choices. */
|
|
84
|
+
commandsAt?: "end" | "start";
|
|
83
85
|
signOut: AccountMenuSignOut;
|
|
84
86
|
/**
|
|
85
87
|
* The trigger shows the picture alone, for a navigation rail drawn too narrow
|
|
86
88
|
* for the name; the menu still opens on the whole identity.
|
|
87
89
|
*/
|
|
88
90
|
pictureOnly?: boolean;
|
|
89
|
-
/** The element the trigger renders as, when a shell has its own button. */
|
|
90
|
-
triggerRender?: ReactElement;
|
|
91
91
|
align?: "center" | "end" | "start";
|
|
92
92
|
side?: "bottom" | "left" | "right" | "top";
|
|
93
93
|
/** Runs when the menu opens or closes, for a shell that records where it was. */
|
|
@@ -100,9 +100,9 @@ export type AccountMenuProps = {
|
|
|
100
100
|
* @family Menus
|
|
101
101
|
* @when The account at the sidebar's foot in the Portal, Nadia and Alveare: the gear to the account's settings, Theme, Language, a product's own settings, its commands, and Sign out.
|
|
102
102
|
* @instead A record's or a page's commands are an ActionMenu; a setting with more than a few options or one that needs a Save belongs on a SettingsPage.
|
|
103
|
-
* @behaviour The menu opens
|
|
103
|
+
* @behaviour The menu opens 6 px above its trigger, 288 px wide, as Vercel's does: a header of the name and every line under it with the gear at its end, one divider, then 36 px rows, each its label leading and its icon or control trailing: Theme and Language as small round pills, the product's choices as submenus, its commands with any reading before their icon, and Sign out last. Theme and Language apply at once and keep the menu open. While signing out, Sign out says its pending word, the menu stays open and the trigger is locked; a failure shows under it. A Sign out that `confirms` closes the menu instead, for the product's own confirmation.
|
|
104
104
|
* @words The menu's name ("Account"), the person's name and lines, then each row's noun or verb from the product's catalogue: "Theme", "Language", "Usage", "Sign out" and "Signing out".
|
|
105
105
|
* @access The trigger and the menu are named "{label}: {name}"; the gear carries its label; the pending sign-out is aria-busy and announced through a status; a failure is an alert.
|
|
106
106
|
*/
|
|
107
|
-
export declare function AccountMenu({ align, choices, commands, identity, label, language, onOpenChange, pictureOnly, settings, side, signOut, theme,
|
|
107
|
+
export declare function AccountMenu({ align, choices, commands, commandsAt, identity, label, language, onOpenChange, pictureOnly, settings, side, signOut, theme, }: AccountMenuProps): import("react").JSX.Element;
|
|
108
108
|
//# sourceMappingURL=account-menu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"account-menu.d.ts","sourceRoot":"","sources":["../../src/components/account-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"account-menu.d.ts","sourceRoot":"","sources":["../../src/components/account-menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { Ellipsis, LogOut, Settings, UserRound } from "lucide-react";
|
|
4
4
|
import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
|
|
5
|
-
import { DropdownMenu,
|
|
5
|
+
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
|
|
6
6
|
import { FieldError } from "./field.js";
|
|
7
7
|
import { MenuChoiceRow } from "./menu-choice-row.js";
|
|
8
8
|
import { PendingLabel } from "./pending-label.js";
|
|
9
9
|
import { bodyBeyondTitle } from "./product-message.js";
|
|
10
10
|
import { ThemeModeMenu } from "./theme-mode-switcher.js";
|
|
11
|
-
import {
|
|
11
|
+
import { menuItemAction } from "../internal/record-menu-items.js";
|
|
12
12
|
import { cn } from "../lib/utils.js";
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
14
|
+
* Whose account it is at the sidebar's foot, as Vercel draws it: the picture,
|
|
15
|
+
* the name with any notice under it, and the three dots at the end. The
|
|
16
|
+
* account menu's trigger draws it, and so does a sample of the Portal's column.
|
|
17
17
|
*/
|
|
18
|
-
export function AccountMenuIdentity({ className, identity, pictureOnly = false,
|
|
19
|
-
return (_jsxs("span", { className: cn("flex min-w-0 items-center gap-2 text-left text-sm", className), "data-slot": "account-menu-identity", children: [_jsxs(Avatar, { "aria-hidden": "true",
|
|
18
|
+
export function AccountMenuIdentity({ className, identity, pictureOnly = false, }) {
|
|
19
|
+
return (_jsxs("span", { className: cn("flex min-w-0 items-center gap-2 text-left text-sm", !pictureOnly && "flex-1", className), "data-slot": "account-menu-identity", children: [_jsxs(Avatar, { "aria-hidden": "true", className: "size-5", size: "sm", children: [identity.image ? _jsx(AvatarImage, { alt: "", src: identity.image }) : null, _jsx(AvatarFallback, { children: identity.initials || _jsx(UserRound, { "aria-hidden": "true", className: "size-3/5" }) })] }), pictureOnly ? null : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "grid min-w-0 flex-1 leading-tight", children: [_jsx("span", { className: "truncate text-foreground", children: identity.name }), identity.notice ? _jsx("span", { className: "truncate text-xs", children: identity.notice }) : null] }), _jsx("span", { "aria-hidden": "true", className: "grid size-6 shrink-0 place-content-center rounded-full border border-border bg-popover text-muted-foreground transition-colors group-hover/account:text-foreground group-data-[popup-open]/account:text-foreground", children: _jsx(Ellipsis, { className: "size-3" }) })] }))] }));
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
22
|
* The account menu at the foot of a shell's navigation: whose account it is,
|
|
@@ -25,20 +25,24 @@ export function AccountMenuIdentity({ className, identity, pictureOnly = false,
|
|
|
25
25
|
* @family Menus
|
|
26
26
|
* @when The account at the sidebar's foot in the Portal, Nadia and Alveare: the gear to the account's settings, Theme, Language, a product's own settings, its commands, and Sign out.
|
|
27
27
|
* @instead A record's or a page's commands are an ActionMenu; a setting with more than a few options or one that needs a Save belongs on a SettingsPage.
|
|
28
|
-
* @behaviour The menu opens
|
|
28
|
+
* @behaviour The menu opens 6 px above its trigger, 288 px wide, as Vercel's does: a header of the name and every line under it with the gear at its end, one divider, then 36 px rows, each its label leading and its icon or control trailing: Theme and Language as small round pills, the product's choices as submenus, its commands with any reading before their icon, and Sign out last. Theme and Language apply at once and keep the menu open. While signing out, Sign out says its pending word, the menu stays open and the trigger is locked; a failure shows under it. A Sign out that `confirms` closes the menu instead, for the product's own confirmation.
|
|
29
29
|
* @words The menu's name ("Account"), the person's name and lines, then each row's noun or verb from the product's catalogue: "Theme", "Language", "Usage", "Sign out" and "Signing out".
|
|
30
30
|
* @access The trigger and the menu are named "{label}: {name}"; the gear carries its label; the pending sign-out is aria-busy and announced through a status; a failure is an alert.
|
|
31
31
|
*/
|
|
32
|
-
export function AccountMenu({ align = "start", choices = [], commands = [], identity, label, language, onOpenChange, pictureOnly = false, settings, side = "top", signOut, theme,
|
|
32
|
+
export function AccountMenu({ align = "start", choices = [], commands = [], commandsAt = "end", identity, label, language, onOpenChange, pictureOnly = false, settings, side = "top", signOut, theme, }) {
|
|
33
33
|
const name = `${label}: ${identity.name}`;
|
|
34
|
-
|
|
34
|
+
const commandRows = commands.map(({ value, ...command }) => (_jsx(AccountMenuRow, { "aria-label": command.accessibleName, disabled: command.disabled, icon: command.icon, reason: command.reason, value: value, ...menuItemAction(command), children: command.label }, command.label)));
|
|
35
|
+
return (_jsxs(DropdownMenu, { onOpenChange: onOpenChange, children: [_jsx(DropdownMenuTrigger, { "aria-label": name, className: cn("group/account flex min-h-9 min-w-0 items-center rounded-full outline-none focus-visible:nc-focus-outline focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50", pictureOnly ? "justify-center" : "w-full pr-2 pl-2.5"), disabled: signOut.pending, children: _jsx(AccountMenuIdentity, { identity: identity, pictureOnly: pictureOnly }) }), _jsxs(DropdownMenuContent, { align: align, "aria-label": name, className: "w-72 max-w-[calc(100vw-2rem)] p-1.5", density: "comfortable", side: side, sideOffset: 6, children: [_jsxs(DropdownMenuGroup, { className: "flex min-w-0 items-center gap-2 py-1.5 pl-2", "data-slot": "account-menu-header", children: [_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 text-left", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: identity.name }), identity.notice ? _jsx("span", { className: "text-xs", children: identity.notice }) : null, identity.lines?.map((line, index) => (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: line }, index)))] }), settings ? (_jsx(DropdownMenuItem, { "aria-label": settings.label, className: "text-muted-foreground", iconOnly: true, ...menuItemAction(settings), children: _jsx(Settings, { "aria-hidden": "true" }) })) : null] }), _jsx(DropdownMenuSeparator, { className: "-mx-1.5 my-1.5" }), _jsxs(DropdownMenuGroup, { children: [commandsAt === "start" ? commandRows : null, _jsx(ThemeModeMenu, { ...theme }), language ? _jsx(MenuChoiceRow, { ...language }) : null, choices.map((choice) => (_jsx(AccountMenuChoiceRow, { choice: choice }, choice.label))), commandsAt === "end" ? commandRows : null, _jsx(AccountMenuRow, { "aria-busy": signOut.pending || undefined, closeOnClick: signOut.confirms === true, disabled: signOut.pending, icon: _jsx(LogOut, {}), onClick: () => {
|
|
35
36
|
if (!signOut.pending)
|
|
36
37
|
signOut.onSignOut();
|
|
37
|
-
},
|
|
38
|
+
}, children: _jsx(PendingLabel, { pending: signOut.pending, pendingLabel: signOut.pendingLabel, children: signOut.label }) }), signOut.pending ? (_jsx("span", { className: "sr-only", role: "status", children: signOut.pendingLabel })) : null, signOut.failure ? (_jsxs(FieldError, { className: "mx-2 mb-1 break-words", "data-message-code": signOut.failure.code, children: [_jsx("span", { className: "block font-medium", children: signOut.failure.title }), bodyBeyondTitle(signOut.failure) ? (_jsx("span", { className: "block", children: bodyBeyondTitle(signOut.failure) })) : null] })) : null] })] })] }));
|
|
39
|
+
}
|
|
40
|
+
function AccountMenuRow({ children, icon, reason, value, ...props }) {
|
|
41
|
+
return (_jsxs(DropdownMenuItem, { ...props, className: "min-h-9 gap-3 px-2 py-1.5 group-data-[density=comfortable]/menu:px-2 group-data-[density=comfortable]/menu:py-1.5 [@media(hover:hover)_and_(pointer:fine)]:min-h-9", children: [_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5", children: [_jsx("span", { className: "truncate", children: children }), reason ? _jsx("span", { className: "text-xs text-muted-foreground", children: reason }) : null] }), value === undefined ? null : " ", value === undefined ? null : (_jsx(DropdownMenuShortcut, { className: "ml-0", children: value })), _jsx("span", { "aria-hidden": "true", className: "flex shrink-0 items-center text-muted-foreground", children: icon })] }));
|
|
38
42
|
}
|
|
39
43
|
function AccountMenuChoiceRow({ choice }) {
|
|
40
44
|
const current = choice.options.find((option) => option.value === choice.value);
|
|
41
|
-
return (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { className: "gap-2.5
|
|
45
|
+
return (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { className: "min-h-9 gap-3 px-2 py-1.5 group-data-[density=comfortable]/menu:px-2 group-data-[density=comfortable]/menu:py-1.5 [@media(hover:hover)_and_(pointer:fine)]:min-h-9", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: choice.label }), current ? (_jsx(DropdownMenuShortcut, { className: "ml-0", children: current.label })) : null] }), _jsx(DropdownMenuSubContent, { children: _jsx(DropdownMenuRadioGroup, { "aria-label": choice.label, onValueChange: (next) => {
|
|
42
46
|
const selected = choice.options.find((option) => option.value === next);
|
|
43
47
|
if (selected)
|
|
44
48
|
choice.onValueChange(selected.value);
|
|
@@ -8,25 +8,23 @@ export type MenuChoiceOption<Value extends string = string> = {
|
|
|
8
8
|
};
|
|
9
9
|
export type MenuChoiceRowProps<Value extends string = string> = Omit<React.ComponentProps<"div">, "children" | "onChange"> & {
|
|
10
10
|
label: string;
|
|
11
|
-
/** Leads the label, so the row starts on the commands' line: the current theme's glyph. */
|
|
12
|
-
icon?: React.ReactElement | undefined;
|
|
13
11
|
options: readonly MenuChoiceOption<Value>[];
|
|
14
12
|
onValueChange: (value: Value) => void;
|
|
15
13
|
value: Value;
|
|
16
14
|
disabled?: boolean;
|
|
17
15
|
};
|
|
18
16
|
/**
|
|
19
|
-
* A named preference inside a menu: its
|
|
20
|
-
* exclusive choices
|
|
21
|
-
*
|
|
17
|
+
* A named preference inside a menu: its label at the leading edge and the
|
|
18
|
+
* exclusive choices in one small round pill at the trailing edge, as Vercel's
|
|
19
|
+
* account menu draws Theme.
|
|
22
20
|
*
|
|
23
21
|
* @family Menus
|
|
24
22
|
* @when A setting that applies at once from inside a menu: the account menu's Theme and Language.
|
|
25
23
|
* @instead A product's own setting with more choices or longer names is a submenu of radio items (`AccountMenu`'s `choices`). A setting on a page is a `ToggleGroup` or a `Select` in its section.
|
|
26
|
-
* @behaviour
|
|
24
|
+
* @behaviour The label leads on the row's 36 px line; the choices sit in one round pill at the trailing edge, the chosen one ringed. Choosing applies at once and keeps the menu open, so the result shows without reopening it.
|
|
27
25
|
* @words The label is a noun: "Theme", "Language". Each choice carries a full name even when it shows a glyph or a short code: "EN" is named "English".
|
|
28
|
-
* @access A radio group named by the label; each choice is a radio named by its `label`, with the same text as its tooltip.
|
|
26
|
+
* @access A radio group named by the label; each choice is a radio named by its `label`, with the same text as its tooltip.
|
|
29
27
|
*/
|
|
30
|
-
declare function MenuChoiceRow<Value extends string = string>({ className, disabled,
|
|
28
|
+
declare function MenuChoiceRow<Value extends string = string>({ className, disabled, label, onValueChange, options, value, ...props }: MenuChoiceRowProps<Value>): React.JSX.Element;
|
|
31
29
|
export { MenuChoiceRow };
|
|
32
30
|
//# sourceMappingURL=menu-choice-row.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-choice-row.d.ts","sourceRoot":"","sources":["../../src/components/menu-choice-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI;IAC5D,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAClE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,UAAU,GAAG,UAAU,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,
|
|
1
|
+
{"version":3,"file":"menu-choice-row.d.ts","sourceRoot":"","sources":["../../src/components/menu-choice-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI;IAC5D,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAClE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,UAAU,GAAG,UAAU,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5C,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,iBAAS,aAAa,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,EACpD,SAAS,EACT,QAAQ,EACR,KAAK,EACL,aAAa,EACb,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,CAAC,qBAkC3B;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -2,22 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { DropdownMenuRadioGroup, DropdownMenuRadioItem } from "./dropdown-menu.js";
|
|
3
3
|
import { cn } from "../lib/utils.js";
|
|
4
4
|
/**
|
|
5
|
-
* A named preference inside a menu: its
|
|
6
|
-
* exclusive choices
|
|
7
|
-
*
|
|
5
|
+
* A named preference inside a menu: its label at the leading edge and the
|
|
6
|
+
* exclusive choices in one small round pill at the trailing edge, as Vercel's
|
|
7
|
+
* account menu draws Theme.
|
|
8
8
|
*
|
|
9
9
|
* @family Menus
|
|
10
10
|
* @when A setting that applies at once from inside a menu: the account menu's Theme and Language.
|
|
11
11
|
* @instead A product's own setting with more choices or longer names is a submenu of radio items (`AccountMenu`'s `choices`). A setting on a page is a `ToggleGroup` or a `Select` in its section.
|
|
12
|
-
* @behaviour
|
|
12
|
+
* @behaviour The label leads on the row's 36 px line; the choices sit in one round pill at the trailing edge, the chosen one ringed. Choosing applies at once and keeps the menu open, so the result shows without reopening it.
|
|
13
13
|
* @words The label is a noun: "Theme", "Language". Each choice carries a full name even when it shows a glyph or a short code: "EN" is named "English".
|
|
14
|
-
* @access A radio group named by the label; each choice is a radio named by its `label`, with the same text as its tooltip.
|
|
14
|
+
* @access A radio group named by the label; each choice is a radio named by its `label`, with the same text as its tooltip.
|
|
15
15
|
*/
|
|
16
|
-
function MenuChoiceRow({ className, disabled,
|
|
17
|
-
return (_jsxs("div", { "data-slot": "menu-choice-row", className: cn("flex
|
|
16
|
+
function MenuChoiceRow({ className, disabled, label, onValueChange, options, value, ...props }) {
|
|
17
|
+
return (_jsxs("div", { "data-slot": "menu-choice-row", className: cn("flex h-9 items-center justify-between gap-3 px-2 text-sm", className), ...props, children: [_jsx("span", { className: "min-w-0 truncate", children: label }), _jsx(DropdownMenuRadioGroup, { "aria-label": label, className: "flex shrink-0 items-center rounded-full border border-border", value: value, onValueChange: (next) => {
|
|
18
18
|
const selected = options.find((option) => option.value === next);
|
|
19
19
|
if (selected)
|
|
20
20
|
onValueChange(selected.value);
|
|
21
|
-
}, children: options.map((option) => (_jsx(DropdownMenuRadioItem, { value: option.value, "aria-label": option.label, title: option.label, iconOnly: true, closeOnClick: false, disabled: disabled, children: option.content }, option.value))) })] }));
|
|
21
|
+
}, children: options.map((option) => (_jsx(DropdownMenuRadioItem, { value: option.value, "aria-label": option.label, title: option.label, iconOnly: true, className: "size-6 rounded-full text-xs text-muted-foreground data-checked:bg-popover data-checked:text-foreground data-checked:ring-1 data-checked:ring-border", closeOnClick: false, disabled: disabled, children: option.content }, option.value))) })] }));
|
|
22
22
|
}
|
|
23
23
|
export { MenuChoiceRow };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"portal-sidebar-frame.d.ts","sourceRoot":"","sources":["../../src/components/portal-sidebar-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAkBtF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,WAAW,GACZ,EAAE;IACD,OAAO,EAAE,eAAe,CAAC;IACzB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,+
|
|
1
|
+
{"version":3,"file":"portal-sidebar-frame.d.ts","sourceRoot":"","sources":["../../src/components/portal-sidebar-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAkBtF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,WAAW,GACZ,EAAE;IACD,OAAO,EAAE,eAAe,CAAC;IACzB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,+BAkEA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { Search } from "lucide-react";
|
|
4
4
|
import { AccountMenuIdentity } from "./account-menu.js";
|
|
5
5
|
import { BrandWordmark } from "./brand.js";
|
|
6
6
|
import { Kbd, KbdGroup } from "./kbd.js";
|
|
@@ -36,5 +36,5 @@ function ItemRow({ item, variant }) {
|
|
|
36
36
|
* `role="img"` named nadicode.
|
|
37
37
|
*/
|
|
38
38
|
export function PortalSidebarFrame({ account, bands, className, findLabel, footerItem, subtitle, toggleLabel, }) {
|
|
39
|
-
return (_jsx(Sidebar, { collapsible: "none", className: cn("h-auto shrink-0", className), children: _jsxs("div", { className: "grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)_auto_auto] bg-border *:min-w-0", children: [_jsxs("div", { className: "grid grid-rows-[3.5rem_auto] gap-px bg-border *:bg-sidebar", children: [_jsxs(SidebarHeader, { className: "h-full flex-row items-center justify-between gap-1 px-3 py-0", children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-0", children: [_jsx(BrandWordmark, { alt: "", className: "h-5 w-28 max-w-full" }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: subtitle })] }), _jsx(SidebarTrigger, { "aria-label": toggleLabel, className: "shrink-0" })] }), _jsx("div", { className: "p-2", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { variant: "outline", children: [_jsx(Search, { "aria-hidden": "true", className: "text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left text-muted-foreground", children: findLabel }), _jsxs(KbdGroup, { className: "ml-auto", children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })] }) }) }) })] }), _jsx(SidebarContent, { className: "bg-sidebar", children: bands.map((band) => (_jsxs(SidebarGroup, { children: [band.label ? (_jsx(SidebarGroupLabel, { render: _jsx("h2", {}), children: band.label })) : null, _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: band.items.map((item) => (_jsx(ItemRow, { item: item }, item.id))) }) })] }, band.id))) }), footerItem ? (_jsx(SidebarGroup, { className: "border-t bg-sidebar", children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: _jsx(ItemRow, { item: footerItem, variant: "outline" }) }) }) })) : null, _jsx(SidebarFooter, { className: "border-t bg-sidebar", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, {
|
|
39
|
+
return (_jsx(Sidebar, { collapsible: "none", className: cn("h-auto shrink-0", className), children: _jsxs("div", { className: "grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)_auto_auto] bg-border *:min-w-0", children: [_jsxs("div", { className: "grid grid-rows-[3.5rem_auto] gap-px bg-border *:bg-sidebar", children: [_jsxs(SidebarHeader, { className: "h-full flex-row items-center justify-between gap-1 px-3 py-0", children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-0", children: [_jsx(BrandWordmark, { alt: "", className: "h-5 w-28 max-w-full" }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: subtitle })] }), _jsx(SidebarTrigger, { "aria-label": toggleLabel, className: "shrink-0" })] }), _jsx("div", { className: "p-2", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { variant: "outline", children: [_jsx(Search, { "aria-hidden": "true", className: "text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left text-muted-foreground", children: findLabel }), _jsxs(KbdGroup, { className: "ml-auto", children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })] }) }) }) })] }), _jsx(SidebarContent, { className: "bg-sidebar", children: bands.map((band) => (_jsxs(SidebarGroup, { children: [band.label ? (_jsx(SidebarGroupLabel, { render: _jsx("h2", {}), children: band.label })) : null, _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: band.items.map((item) => (_jsx(ItemRow, { item: item }, item.id))) }) })] }, band.id))) }), footerItem ? (_jsx(SidebarGroup, { className: "border-t bg-sidebar", children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: _jsx(ItemRow, { item: footerItem, variant: "outline" }) }) }) })) : null, _jsx(SidebarFooter, { className: "border-t bg-sidebar", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { className: "group/account flex min-h-9 items-center pr-2 pl-2.5", children: _jsx(AccountMenuIdentity, { identity: account }) }) }) })] }) }));
|
|
40
40
|
}
|
|
@@ -11,8 +11,8 @@ export type SettingsPageProps = {
|
|
|
11
11
|
*
|
|
12
12
|
* @family Compositions
|
|
13
13
|
* @when A place whose job is changing how something behaves: an account's profile, a company's identity, Nadia's notifications.
|
|
14
|
-
* @instead One object's page with a settings card among its sections is an ObjectPage
|
|
15
|
-
* @behaviour The sections stack 20 apart in a centred column at most 56rem wide. The page draws no header and no save of its own: each SettingsSection saves from its footer.
|
|
14
|
+
* @instead One object's page with a settings card among its sections is an ObjectPage.
|
|
15
|
+
* @behaviour The sections stack 20 apart in a centred column at most 56rem wide. The page draws no header and no save of its own: a choice applies at once, and each SettingsSection of typed values saves from its footer.
|
|
16
16
|
* @words `title` names the place as the navigation does ("Profile"); the sections' titles and lines carry the rest.
|
|
17
17
|
* @access `title` becomes a visually hidden h1 for a product whose chrome shows the place without a heading; leave it out where the chrome already draws the h1.
|
|
18
18
|
*/
|
|
@@ -6,8 +6,8 @@ import { ReadingColumn } from "./reading-column.js";
|
|
|
6
6
|
*
|
|
7
7
|
* @family Compositions
|
|
8
8
|
* @when A place whose job is changing how something behaves: an account's profile, a company's identity, Nadia's notifications.
|
|
9
|
-
* @instead One object's page with a settings card among its sections is an ObjectPage
|
|
10
|
-
* @behaviour The sections stack 20 apart in a centred column at most 56rem wide. The page draws no header and no save of its own: each SettingsSection saves from its footer.
|
|
9
|
+
* @instead One object's page with a settings card among its sections is an ObjectPage.
|
|
10
|
+
* @behaviour The sections stack 20 apart in a centred column at most 56rem wide. The page draws no header and no save of its own: a choice applies at once, and each SettingsSection of typed values saves from its footer.
|
|
11
11
|
* @words `title` names the place as the navigation does ("Profile"); the sections' titles and lines carry the rest.
|
|
12
12
|
* @access `title` becomes a visually hidden h1 for a product whose chrome shows the place without a heading; leave it out where the chrome already draws the h1.
|
|
13
13
|
*/
|
|
@@ -31,8 +31,8 @@ export type SettingsSectionProps = Omit<React.ComponentProps<"section">, "title"
|
|
|
31
31
|
* A card of related settings that says what changing them does and saves them from its own footer.
|
|
32
32
|
*
|
|
33
33
|
* @family Compositions
|
|
34
|
-
* @when A few related
|
|
35
|
-
* @instead Read-only values are a SettingsFactsSection;
|
|
34
|
+
* @when A few related settings on a SettingsPage or as a section of an ObjectPage: choices that apply at once, without `save` (Notifications), or typed values a person saves together, with `save` (Personal details, Company identity).
|
|
35
|
+
* @instead Read-only values are a SettingsFactsSection; a collection is a CollectionPage; a record's edit in a list is a RowEditForm.
|
|
36
36
|
* @behaviour With `save`: Save stays disabled until a field differs from what is saved, says `pendingLabel` while saving with Cancel held beside it, then calls `saved`, which the product answers with its own toast; the footer never shows a saved state. A failure keeps every value and shows under its field until that field changes, or above the footer until the next save. A `cancel` that runs work of its own says its `pendingLabel` while `pending`. Without `save`, the footer holds `footerHint` and `footer`, and is left out when both are.
|
|
37
37
|
* @words The title names the values ("Personal details"); the description says what changing them does, in one line; the hint is optional and says what is specific to this card: a limit ("Please use 32 characters at maximum."), what a value is for, the plan a feature needs, or a "Learn more" link, never one sentence every card repeats; Save and Saving come from the product's catalogue, and the saved toast from its notices.
|
|
38
38
|
* @access The title is the section's h2 and names the form that saves it. The saved toast is announced by the product's toast region; a failure under a field marks the control invalid and describes it.
|
|
@@ -9,8 +9,8 @@ import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLab
|
|
|
9
9
|
* A card of related settings that says what changing them does and saves them from its own footer.
|
|
10
10
|
*
|
|
11
11
|
* @family Compositions
|
|
12
|
-
* @when A few related
|
|
13
|
-
* @instead Read-only values are a SettingsFactsSection;
|
|
12
|
+
* @when A few related settings on a SettingsPage or as a section of an ObjectPage: choices that apply at once, without `save` (Notifications), or typed values a person saves together, with `save` (Personal details, Company identity).
|
|
13
|
+
* @instead Read-only values are a SettingsFactsSection; a collection is a CollectionPage; a record's edit in a list is a RowEditForm.
|
|
14
14
|
* @behaviour With `save`: Save stays disabled until a field differs from what is saved, says `pendingLabel` while saving with Cancel held beside it, then calls `saved`, which the product answers with its own toast; the footer never shows a saved state. A failure keeps every value and shows under its field until that field changes, or above the footer until the next save. A `cancel` that runs work of its own says its `pendingLabel` while `pending`. Without `save`, the footer holds `footerHint` and `footer`, and is left out when both are.
|
|
15
15
|
* @words The title names the values ("Personal details"); the description says what changing them does, in one line; the hint is optional and says what is specific to this card: a limit ("Please use 32 characters at maximum."), what a value is for, the plan a feature needs, or a "Learn more" link, never one sentence every card repeats; Save and Saving come from the product's catalogue, and the saved toast from its notices.
|
|
16
16
|
* @access The title is the section's h2 and names the form that saves it. The saved toast is announced by the product's toast region; a failure under a field marks the control invalid and describes it.
|
|
@@ -3,12 +3,12 @@ import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
|
|
|
3
3
|
* A setting that is on or off.
|
|
4
4
|
*
|
|
5
5
|
* @family Choices
|
|
6
|
-
* @when A setting that is either on or off, inside a settings section
|
|
6
|
+
* @when A setting that is either on or off, inside a settings section.
|
|
7
7
|
* @instead Choosing or agreeing to something is a `Checkbox`. A tool button that stays pressed is a
|
|
8
8
|
* `Toggle`. Choosing between named values is a `RadioGroup`.
|
|
9
9
|
* @behaviour Off is the input grey, on is ink; the thumb travels 16 px. Space flips it. On a
|
|
10
|
-
* settings page the change
|
|
11
|
-
*
|
|
10
|
+
* settings page the change applies at once and the product's toast confirms it. A failed change
|
|
11
|
+
* leaves the switch showing the true state.
|
|
12
12
|
* @words The label names what on means: *Approvals*, with help saying when. Never *Enable
|
|
13
13
|
* approvals*, and no On/Off text beside the switch.
|
|
14
14
|
* @access `role="switch"` with `aria-checked`. The name is the visible label and stays the same in
|
|
@@ -5,12 +5,12 @@ import { cn } from "../lib/utils.js";
|
|
|
5
5
|
* A setting that is on or off.
|
|
6
6
|
*
|
|
7
7
|
* @family Choices
|
|
8
|
-
* @when A setting that is either on or off, inside a settings section
|
|
8
|
+
* @when A setting that is either on or off, inside a settings section.
|
|
9
9
|
* @instead Choosing or agreeing to something is a `Checkbox`. A tool button that stays pressed is a
|
|
10
10
|
* `Toggle`. Choosing between named values is a `RadioGroup`.
|
|
11
11
|
* @behaviour Off is the input grey, on is ink; the thumb travels 16 px. Space flips it. On a
|
|
12
|
-
* settings page the change
|
|
13
|
-
*
|
|
12
|
+
* settings page the change applies at once and the product's toast confirms it. A failed change
|
|
13
|
+
* leaves the switch showing the true state.
|
|
14
14
|
* @words The label names what on means: *Approvals*, with help saying when. Never *Enable
|
|
15
15
|
* approvals*, and no On/Off text beside the switch.
|
|
16
16
|
* @access `role="switch"` with `aria-checked`. The name is the visible label and stays the same in
|
|
@@ -32,8 +32,8 @@ export type ThemeModeSwitcherProps = Omit<React.ComponentProps<typeof RadioGroup
|
|
|
32
32
|
declare function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact, disabled, itemClassName, labels, onValueChange, renderItem, value, ...props }: ThemeModeSwitcherProps): React.JSX.Element;
|
|
33
33
|
export { ThemeModeSwitcher };
|
|
34
34
|
/**
|
|
35
|
-
* The appearance as one row of a menu: its name
|
|
36
|
-
*
|
|
35
|
+
* The appearance as one row of a menu: its name leading, the three modes as a
|
|
36
|
+
* small round pill at its end.
|
|
37
37
|
*
|
|
38
38
|
* @family Menus
|
|
39
39
|
* @when The account menu's Theme row, in the Portal and in Nadia.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAkB,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AACnC,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EACvC,UAAU,GAAG,cAAc,GAAG,eAAe,GAAG,OAAO,CACxD,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAQF;;;;;;;;;GASG;AACH,iBAAS,iBAAiB,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAa,EACb,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,qBA6CxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACb,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,qBAAqB,CAAC;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,
|
|
1
|
+
{"version":3,"file":"theme-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAkB,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AACnC,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EACvC,UAAU,GAAG,cAAc,GAAG,eAAe,GAAG,OAAO,CACxD,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAQF;;;;;;;;;GASG;AACH,iBAAS,iBAAiB,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAa,EACb,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,qBA6CxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACb,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,qBAAqB,CAAC;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBAkBA"}
|
|
@@ -36,8 +36,8 @@ function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false
|
|
|
36
36
|
}
|
|
37
37
|
export { ThemeModeSwitcher };
|
|
38
38
|
/**
|
|
39
|
-
* The appearance as one row of a menu: its name
|
|
40
|
-
*
|
|
39
|
+
* The appearance as one row of a menu: its name leading, the three modes as a
|
|
40
|
+
* small round pill at its end.
|
|
41
41
|
*
|
|
42
42
|
* @family Menus
|
|
43
43
|
* @when The account menu's Theme row, in the Portal and in Nadia.
|
|
@@ -47,8 +47,7 @@ export { ThemeModeSwitcher };
|
|
|
47
47
|
* @access A radio group inside the menu, named by the row's label; each mode is a menu radio item with its name.
|
|
48
48
|
*/
|
|
49
49
|
export function ThemeModeMenu({ label, labels, value, onValueChange, disabled, }) {
|
|
50
|
-
|
|
51
|
-
return (_jsx(MenuChoiceRow, { "data-slot": "theme-mode-menu", icon: _jsx(CurrentModeIcon, { "aria-hidden": "true" }), label: label, disabled: disabled, value: value, onValueChange: onValueChange, options: themeModes.map((mode) => {
|
|
50
|
+
return (_jsx(MenuChoiceRow, { "data-slot": "theme-mode-menu", label: label, disabled: disabled, value: value, onValueChange: onValueChange, options: themeModes.map((mode) => {
|
|
52
51
|
const Icon = themeModeIcons[mode];
|
|
53
52
|
return {
|
|
54
53
|
value: mode,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menus.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/menus.tsx"],"names":[],"mappings":"AAuFA,iBAAS,mBAAmB,
|
|
1
|
+
{"version":3,"file":"menus.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/menus.tsx"],"names":[],"mappings":"AAuFA,iBAAS,mBAAmB,gCA8B3B;AAED,iBAAS,gBAAgB,gCAoBxB;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;CA0IS,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Copy,
|
|
3
|
+
import { Copy, Pencil, Settings2 } from "lucide-react";
|
|
4
4
|
import { useState } from "react";
|
|
5
5
|
import { AccountMenu } from "../../components/account-menu.js";
|
|
6
6
|
import { ActionContextMenu, ActionMenu } from "../../components/action-menu.js";
|
|
@@ -24,7 +24,6 @@ function AccountMenuSpecimen() {
|
|
|
24
24
|
const [theme, setTheme] = useState("system");
|
|
25
25
|
const [language, setLanguage] = useState("en");
|
|
26
26
|
return (_jsx("div", { className: "max-w-xs", children: _jsx(AccountMenu, { commands: [{ label: "Usage", icon: _jsx(Settings2, {}), value: "62% left", onClick: nothing }], identity: { name: "Ada Rossi", initials: "AR", lines: ["ada@acme.it"] }, label: "Account: Ada Rossi", language: {
|
|
27
|
-
icon: _jsx(Languages, {}),
|
|
28
27
|
label: "Language",
|
|
29
28
|
onValueChange: setLanguage,
|
|
30
29
|
options: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usage.generated.d.ts","sourceRoot":"","sources":["../../src/showcase/usage.generated.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"usage.generated.d.ts","sourceRoot":"","sources":["../../src/showcase/usage.generated.ts"],"names":[],"mappings":"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"}
|
|
@@ -218,8 +218,8 @@ export const USAGE = [
|
|
|
218
218
|
family: "Compositions",
|
|
219
219
|
summary: "A page of settings: a centred column of section cards, each saving its own values.",
|
|
220
220
|
when: "A place whose job is changing how something behaves: an account's profile, a company's identity, Nadia's notifications.",
|
|
221
|
-
instead: "One object's page with a settings card among its sections is an ObjectPage
|
|
222
|
-
behaviour: "The sections stack 20 apart in a centred column at most 56rem wide. The page draws no header and no save of its own: each SettingsSection saves from its footer.",
|
|
221
|
+
instead: "One object's page with a settings card among its sections is an ObjectPage.",
|
|
222
|
+
behaviour: "The sections stack 20 apart in a centred column at most 56rem wide. The page draws no header and no save of its own: a choice applies at once, and each SettingsSection of typed values saves from its footer.",
|
|
223
223
|
words: '`title` names the place as the navigation does ("Profile"); the sections\' titles and lines carry the rest.',
|
|
224
224
|
access: "`title` becomes a visually hidden h1 for a product whose chrome shows the place without a heading; leave it out where the chrome already draws the h1.",
|
|
225
225
|
},
|
|
@@ -228,8 +228,8 @@ export const USAGE = [
|
|
|
228
228
|
module: "settings-section",
|
|
229
229
|
family: "Compositions",
|
|
230
230
|
summary: "A card of related settings that says what changing them does and saves them from its own footer.",
|
|
231
|
-
when: "A few related
|
|
232
|
-
instead: "Read-only values are a SettingsFactsSection;
|
|
231
|
+
when: "A few related settings on a SettingsPage or as a section of an ObjectPage: choices that apply at once, without `save` (Notifications), or typed values a person saves together, with `save` (Personal details, Company identity).",
|
|
232
|
+
instead: "Read-only values are a SettingsFactsSection; a collection is a CollectionPage; a record's edit in a list is a RowEditForm.",
|
|
233
233
|
behaviour: "With `save`: Save stays disabled until a field differs from what is saved, says `pendingLabel` while saving with Cancel held beside it, then calls `saved`, which the product answers with its own toast; the footer never shows a saved state. A failure keeps every value and shows under its field until that field changes, or above the footer until the next save. A `cancel` that runs work of its own says its `pendingLabel` while `pending`. Without `save`, the footer holds `footerHint` and `footer`, and is left out when both are.",
|
|
234
234
|
words: 'The title names the values ("Personal details"); the description says what changing them does, in one line; the hint is optional and says what is specific to this card: a limit ("Please use 32 characters at maximum."), what a value is for, the plan a feature needs, or a "Learn more" link, never one sentence every card repeats; Save and Saving come from the product\'s catalogue, and the saved toast from its notices.',
|
|
235
235
|
access: "The title is the section's h2 and names the form that saves it. The saved toast is announced by the product's toast region; a failure under a field marks the control invalid and describes it.",
|
|
@@ -492,9 +492,9 @@ export const USAGE = [
|
|
|
492
492
|
module: "switch",
|
|
493
493
|
family: "Choices",
|
|
494
494
|
summary: "A setting that is on or off.",
|
|
495
|
-
when: "A setting that is either on or off, inside a settings section
|
|
495
|
+
when: "A setting that is either on or off, inside a settings section.",
|
|
496
496
|
instead: "Choosing or agreeing to something is a `Checkbox`. A tool button that stays pressed is a `Toggle`. Choosing between named values is a `RadioGroup`.",
|
|
497
|
-
behaviour: "Off is the input grey, on is ink; the thumb travels 16 px. Space flips it. On a settings page the change
|
|
497
|
+
behaviour: "Off is the input grey, on is ink; the thumb travels 16 px. Space flips it. On a settings page the change applies at once and the product's toast confirms it. A failed change leaves the switch showing the true state.",
|
|
498
498
|
words: "The label names what on means: *Approvals*, with help saying when. Never *Enable approvals*, and no On/Off text beside the switch.",
|
|
499
499
|
access: '`role="switch"` with `aria-checked`. The name is the visible label and stays the same in both states. `sm` only inside a dense row.',
|
|
500
500
|
},
|
|
@@ -1308,7 +1308,7 @@ export const USAGE = [
|
|
|
1308
1308
|
summary: "The account menu at the foot of a shell's navigation: whose account it is, and the menu opening on that same identity with what they can do beneath it.",
|
|
1309
1309
|
when: "The account at the sidebar's foot in the Portal, Nadia and Alveare: the gear to the account's settings, Theme, Language, a product's own settings, its commands, and Sign out.",
|
|
1310
1310
|
instead: "A record's or a page's commands are an ActionMenu; a setting with more than a few options or one that needs a Save belongs on a SettingsPage.",
|
|
1311
|
-
behaviour: "The menu opens
|
|
1311
|
+
behaviour: "The menu opens 6 px above its trigger, 288 px wide, as Vercel's does: a header of the name and every line under it with the gear at its end, one divider, then 36 px rows, each its label leading and its icon or control trailing: Theme and Language as small round pills, the product's choices as submenus, its commands with any reading before their icon, and Sign out last. Theme and Language apply at once and keep the menu open. While signing out, Sign out says its pending word, the menu stays open and the trigger is locked; a failure shows under it. A Sign out that `confirms` closes the menu instead, for the product's own confirmation.",
|
|
1312
1312
|
words: 'The menu\'s name ("Account"), the person\'s name and lines, then each row\'s noun or verb from the product\'s catalogue: "Theme", "Language", "Usage", "Sign out" and "Signing out".',
|
|
1313
1313
|
access: 'The trigger and the menu are named "{label}: {name}"; the gear carries its label; the pending sign-out is aria-busy and announced through a status; a failure is an alert.',
|
|
1314
1314
|
},
|
|
@@ -1404,12 +1404,12 @@ export const USAGE = [
|
|
|
1404
1404
|
name: "MenuChoiceRow",
|
|
1405
1405
|
module: "menu-choice-row",
|
|
1406
1406
|
family: "Menus",
|
|
1407
|
-
summary: "A named preference inside a menu: its
|
|
1407
|
+
summary: "A named preference inside a menu: its label at the leading edge and the exclusive choices in one small round pill at the trailing edge, as Vercel's account menu draws Theme.",
|
|
1408
1408
|
when: "A setting that applies at once from inside a menu: the account menu's Theme and Language.",
|
|
1409
1409
|
instead: "A product's own setting with more choices or longer names is a submenu of radio items (`AccountMenu`'s `choices`). A setting on a page is a `ToggleGroup` or a `Select` in its section.",
|
|
1410
|
-
behaviour: "
|
|
1410
|
+
behaviour: "The label leads on the row's 36 px line; the choices sit in one round pill at the trailing edge, the chosen one ringed. Choosing applies at once and keeps the menu open, so the result shows without reopening it.",
|
|
1411
1411
|
words: 'The label is a noun: "Theme", "Language". Each choice carries a full name even when it shows a glyph or a short code: "EN" is named "English".',
|
|
1412
|
-
access: "A radio group named by the label; each choice is a radio named by its `label`, with the same text as its tooltip.
|
|
1412
|
+
access: "A radio group named by the label; each choice is a radio named by its `label`, with the same text as its tooltip.",
|
|
1413
1413
|
},
|
|
1414
1414
|
{
|
|
1415
1415
|
name: "Menubar",
|
|
@@ -1448,7 +1448,7 @@ export const USAGE = [
|
|
|
1448
1448
|
name: "ThemeModeMenu",
|
|
1449
1449
|
module: "theme-mode-switcher",
|
|
1450
1450
|
family: "Menus",
|
|
1451
|
-
summary: "The appearance as one row of a menu: its name
|
|
1451
|
+
summary: "The appearance as one row of a menu: its name leading, the three modes as a small round pill at its end.",
|
|
1452
1452
|
when: "The account menu's Theme row, in the Portal and in Nadia.",
|
|
1453
1453
|
instead: "On a settings page the choice is ThemeModeSwitcher, with its names shown.",
|
|
1454
1454
|
behaviour: "Choosing a mode applies it at once and keeps the menu open, so the result shows without reopening it. The order is System, Light, Dark.",
|
package/dist/standalone/index.js
CHANGED
|
@@ -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.1448 0.0000 0.00);\n --nc-dark-material-raised: oklch(0.1684 0.0000 0.00);\n --nc-dark-material-floating: oklch(0.1776 0.0000 0.00);\n --nc-dark-material-modal: oklch(0.1776 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-card-padding: 20px;\n --nc-touch-target: 44px;\n --nc-rounded-none: 0px;\n --nc-rounded-xs: 2px;\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: 20px;\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: 20px;\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-material-glass-highlight: inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.18);\n --nc-elevation-resting:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 2px 2px 0px rgb(0% 0% 0% / 0.04),\n 0px 0px 0px 1px rgb(100% 100% 100%);\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 8px -8px rgb(0% 0% 0% / 0.04),\n 0px 0px 0px 1px rgb(100% 100% 100%);\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.04),\n 0px 16px 24px -8px rgb(0% 0% 0% / 0.06),\n 0px 0px 0px 1px rgb(100% 100% 100%);\n --nc-elevation-modal:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 1px 1px 0px rgb(0% 0% 0% / 0.02),\n 0px 8px 16px -4px rgb(0% 0% 0% / 0.04),\n 0px 24px 32px -8px rgb(0% 0% 0% / 0.06),\n 0px 0px 0px 1px rgb(100% 100% 100%);\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 0px 0px 0px 1px rgb(100% 100% 100% / 0.145),\n 0px 1px 2px 0px rgb(0% 0% 0% / 0.16),\n 0px 0px 0px 1px rgb(0% 0% 0%);\n --nc-elevation-raised:\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.145),\n 0px 2px 2px 0px rgb(0% 0% 0% / 0.2),\n 0px 8px 8px -8px rgb(0% 0% 0% / 0.3),\n 0px 0px 0px 1px rgb(0% 0% 0%);\n --nc-elevation-floating:\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.145),\n 0px 4px 8px -4px rgb(0% 0% 0% / 0.4),\n 0px 16px 24px -8px rgb(0% 0% 0% / 0.5),\n 0px 0px 0px 1px rgb(0% 0% 0%);\n --nc-elevation-modal:\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.145),\n 0px 8px 16px -4px rgb(0% 0% 0% / 0.4),\n 0px 24px 32px -8px rgb(0% 0% 0% / 0.55),\n 0px 0px 0px 1px rgb(0% 0% 0%);\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.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.1448 0.0000 0.00);\n --nc-dark-material-raised: oklch(0.1448 0.0000 0.00);\n --nc-dark-material-floating: oklch(0.1448 0.0000 0.00);\n --nc-dark-material-modal: oklch(0.1776 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-card-padding: 20px;\n --nc-touch-target: 44px;\n --nc-rounded-none: 0px;\n --nc-rounded-xs: 2px;\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: 20px;\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: 20px;\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-material-glass-highlight: inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.18);\n --nc-elevation-resting:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 2px 2px 0px rgb(0% 0% 0% / 0.04),\n 0px 0px 0px 1px rgb(100% 100% 100%);\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 8px -8px rgb(0% 0% 0% / 0.04),\n 0px 0px 0px 1px rgb(100% 100% 100%);\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.04),\n 0px 16px 24px -8px rgb(0% 0% 0% / 0.06),\n 0px 0px 0px 1px rgb(100% 100% 100%);\n --nc-elevation-modal:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 1px 1px 0px rgb(0% 0% 0% / 0.02),\n 0px 8px 16px -4px rgb(0% 0% 0% / 0.04),\n 0px 24px 32px -8px rgb(0% 0% 0% / 0.06),\n 0px 0px 0px 1px rgb(100% 100% 100%);\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 0px 0px 0px 1px rgb(100% 100% 100% / 0.145),\n 0px 1px 2px 0px rgb(0% 0% 0% / 0.16),\n 0px 0px 0px 1px rgb(0% 0% 0%);\n --nc-elevation-raised:\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.145),\n 0px 2px 2px 0px rgb(0% 0% 0% / 0.2),\n 0px 8px 8px -8px rgb(0% 0% 0% / 0.3),\n 0px 0px 0px 1px rgb(0% 0% 0%);\n --nc-elevation-floating:\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.145),\n 0px 4px 8px -4px rgb(0% 0% 0% / 0.4),\n 0px 16px 24px -8px rgb(0% 0% 0% / 0.5),\n 0px 0px 0px 1px rgb(0% 0% 0%);\n --nc-elevation-modal:\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.145),\n 0px 8px 16px -4px rgb(0% 0% 0% / 0.4),\n 0px 24px 32px -8px rgb(0% 0% 0% / 0.55),\n 0px 0px 0px 1px rgb(0% 0% 0%);\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>";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nadicodeai/ui",
|
|
3
|
-
"version": "12.1.
|
|
3
|
+
"version": "12.1.102",
|
|
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.
|
|
83
|
+
"@nadicodeai/design-system": "12.1.102",
|
|
84
84
|
"@tanstack/react-table": "^9.2.8",
|
|
85
85
|
"class-variance-authority": "^0.7.1",
|
|
86
86
|
"clsx": "^2.1.1",
|