@nadicodeai/ui 12.1.166 → 12.1.168
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/data-table.d.ts +3 -4
- package/dist/components/data-table.d.ts.map +1 -1
- package/dist/components/data-table.js +17 -13
- package/dist/components/record-list.d.ts +5 -4
- package/dist/components/record-list.d.ts.map +1 -1
- package/dist/components/record-list.js +35 -21
- package/dist/components/table-layouts.d.ts +32 -9
- package/dist/components/table-layouts.d.ts.map +1 -1
- package/dist/components/table-layouts.js +35 -10
- package/dist/internal/table-compact-line.d.ts +23 -5
- package/dist/internal/table-compact-line.d.ts.map +1 -1
- package/dist/internal/table-compact-line.js +28 -7
- package/dist/showcase/usage.generated.js +2 -2
- package/dist/standalone/index.js +1 -1
- package/dist/styles/components.css +13 -0
- package/package.json +2 -2
|
@@ -3,7 +3,6 @@ import { columnFilteringFeature, columnSizingFeature, columnVisibilityFeature, c
|
|
|
3
3
|
import type { CollectionNote } from "../internal/collection-note.js";
|
|
4
4
|
import { type RecordMenu } from "./action-menu.js";
|
|
5
5
|
import { type EmptyStateProps } from "./empty-state.js";
|
|
6
|
-
import { type TableCompactLayout } from "./table-layouts.js";
|
|
7
6
|
type DataTableFeatures = {
|
|
8
7
|
columnFilteringFeature: typeof columnFilteringFeature;
|
|
9
8
|
columnSizingFeature: typeof columnSizingFeature;
|
|
@@ -116,8 +115,6 @@ type DataTableBaseProps<TData extends RowData> = {
|
|
|
116
115
|
primaryColumns: string[];
|
|
117
116
|
/** The column that names the record and carries the row link; the first column when left out. */
|
|
118
117
|
primaryColumnId?: string;
|
|
119
|
-
/** Override the layout worked out from the columns' sizes when this comparison needs a later compact breakpoint. */
|
|
120
|
-
compactLayout?: TableCompactLayout;
|
|
121
118
|
/** Names the table for assistive technology, and says what it lists: "Usage by Agent". */
|
|
122
119
|
tableLabel: string;
|
|
123
120
|
/**
|
|
@@ -222,6 +219,8 @@ type EntityTableProps<TData extends RowData> = DataTableProps<TData> & {
|
|
|
222
219
|
rowEditor?: EntityRowEditor<TData>;
|
|
223
220
|
/** The record's menu, opened from its row by a right-click as from its three dots. */
|
|
224
221
|
rowMenu?: (row: TData) => RecordMenu | null;
|
|
222
|
+
/** Controls drawn under the record's name, outside the row's link, so pressing one never opens the record. */
|
|
223
|
+
rowUnderName?: (row: TData) => React.ReactNode;
|
|
225
224
|
};
|
|
226
225
|
export declare function columnMenuLabel<TData extends RowData, TValue extends CellData = CellData>(column: Pick<DataTableColumn<TData, TValue>, "id"> & {
|
|
227
226
|
columnDef: Pick<DataTableColumn<TData, TValue>["columnDef"], "header">;
|
|
@@ -236,7 +235,7 @@ export declare function columnMenuLabel<TData extends RowData, TValue extends Ce
|
|
|
236
235
|
* @instead “For a row of descriptive content paired with a single action (membership row, integration row), use `Entity` instead.” (https://vercel.com/geist/table)
|
|
237
236
|
* “For a key/value metadata block on a detail page, use `Description`, not a two-column table.” (https://vercel.com/geist/table)
|
|
238
237
|
* Ours: Geist's `Entity` is a `RecordList` row. A registry of entities whose columns `RecordList` cannot hold, more than three facts beside a filter bar the product owns, as Vercel's Deployments list, is this table with `rows="entities"`, which draws the same rows: headings for assistive technology only, 72 px rows, a `RecordIdentity` in the identity column. Its `Description` is `ObjectFacts`. A list on a page of its own is a `CollectionPage`. A descriptive list is `ItemGroup`.
|
|
239
|
-
* @behaviour Every column has a `header`; a column without one does not compile. The headings are always visible, medium weight in the cells' body grey, 48 px high, with 12 px of room under the labels and then the rule, so the first row starts at the rule like every other; rows are 40 px. Each column is as wide as its definition's `size`, in pixels, and the columns without one share the rest, so a table gives a size to every column but the one that takes the spare width; a value too long for its column ends in an ellipsis, whole in its title (a record's name carries its own), unless the column `wraps`; a column marked `identifier` holds ids or paths and is cut in the middle instead. The last column trails unless it `wraps` or is `centered`; a `centered` column's heading and values sit in the middle of it. Records are divided by a 1 px rule, none after the last. The first and last columns stand in from the card's edges by the card's spacing, so the first lines up with the title. Records of several kinds stand in one table under `group` headings (Vercel's Usage page: *Delivery network*, *Functions*): a heading row that spans the columns, in ink, medium text, 36 px high with the same rule under it, one per group in the order the groups first appear, never a second table; a heading is the group's name and carries no figure of its own. A row that opens a record takes `accent` on hover, and any row on focus within and while its menu is open; a row that opens nothing never reacts to hover. A selected row takes `muted`; headers and footers never highlight and carry no fill. A row never scrolls sideways: on a card narrower than its columns (the sized ones and 160 px for each without a size) the row keeps its name and its `primaryColumns`, and every other column leaves it, its value joining the one muted line under the name, joined by a middle dot (a `Tag` reads as its text there); entity facts wrap below the name so every value stays readable, while other rows end in an ellipsis unless a column `wraps`, or `dropped` when its `compact` says so, or beside an entity row's name, which ends in an ellipsis before it, when it says `name`, as Vercel's lists read on a phone: no labels, no second line; an `optional` column's empty value is left out of the line. A table whose every column is in `primaryColumns`, a settings matrix, lays out by its content there instead, so the name wraps beside the columns. A document's table, such as a legal page's, is read whole instead: its columns take the `wraps` option, so their words wrap and the row grows, and it keeps its header row; in the compact layout every cell but the identity wraps between words. A bounded page's paging stands in the card's footer strip at its trailing edge, opposite `footer`, which stands at the leading edge: its `status` ("Page 2 of 7") before Previous and Next, which are the product's router links (`previousLink`, `nextLink`) when each page is its own address, and buttons otherwise; the one that leads nowhere stays, disabled. A note about the whole table is `footerNote`, in a strip of its own under that one: one muted line, an optional *Learn more* after it at the left and one secondary action at the right (Vercel's deployments list ends "Deployment retention is enabled. Learn more" with *View recently deleted*); it is the one place a table says a sentence. Colour is neutral: headings and cells in the body grey, no hue, except a status badge or a tone the cell itself carries.
|
|
238
|
+
* @behaviour Every column has a `header`; a column without one does not compile. The headings are always visible, medium weight in the cells' body grey, 48 px high, with 12 px of room under the labels and then the rule, so the first row starts at the rule like every other; rows are 40 px. Each column is as wide as its definition's `size`, in pixels, and the columns without one share the rest, so a table gives a size to every column but the one that takes the spare width; a value too long for its column ends in an ellipsis, whole in its title (a record's name carries its own), unless the column `wraps`; a column marked `identifier` holds ids or paths and is cut in the middle instead. The last column trails unless it `wraps` or is `centered`; a `centered` column's heading and values sit in the middle of it. Records are divided by a 1 px rule, none after the last. The first and last columns stand in from the card's edges by the card's spacing, so the first lines up with the title. Records of several kinds stand in one table under `group` headings (Vercel's Usage page: *Delivery network*, *Functions*): a heading row that spans the columns, in ink, medium text, 36 px high with the same rule under it, one per group in the order the groups first appear, never a second table; a heading is the group's name and carries no figure of its own. A row that opens a record takes `accent` on hover, and any row on focus within and while its menu is open; a row that opens nothing never reacts to hover. A selected row takes `muted`; headers and footers never highlight and carry no fill. A row never scrolls sideways and never gives a column without a size less than 160 px: on a card narrower than its columns (the sized ones and 160 px for each without a size, however wide that is; columns no card holds lay out this way on every card) the row keeps its name and its `primaryColumns`, and every other column leaves it, its value joining the one muted line under the name, joined by a middle dot (a `Tag` reads as its text there); entity facts wrap below the name so every value stays readable, while other rows end in an ellipsis unless a column `wraps`, or `dropped` when its `compact` says so, or beside an entity row's name, which ends in an ellipsis before it, when it says `name`, as Vercel's lists read on a phone: no labels, no second line; an `optional` column's empty value is left out of the line. A table whose every column is in `primaryColumns`, a settings matrix, lays out by its content there instead, so the name wraps beside the columns. A document's table, such as a legal page's, is read whole instead: its columns take the `wraps` option, so their words wrap and the row grows, and it keeps its header row; in the compact layout every cell but the identity wraps between words. A bounded page's paging stands in the card's footer strip at its trailing edge, opposite `footer`, which stands at the leading edge: its `status` ("Page 2 of 7") before Previous and Next, which are the product's router links (`previousLink`, `nextLink`) when each page is its own address, and buttons otherwise; the one that leads nowhere stays, disabled. A note about the whole table is `footerNote`, in a strip of its own under that one: one muted line, an optional *Learn more* after it at the left and one secondary action at the right (Vercel's deployments list ends "Deployment retention is enabled. Learn more" with *View recently deleted*); it is the one place a table says a sentence. Colour is neutral: headings and cells in the body grey, no hue, except a status badge or a tone the cell itself carries.
|
|
240
239
|
* “When the underlying list is empty (filter cleared, never created), render `Empty State` outside the table rather than an empty `<Table.Body>`.” (https://vercel.com/geist/table)
|
|
241
240
|
* “After an async filter change, wrap the region in `aria-live="polite"` so screen readers announce the new state.” (https://vercel.com/geist/empty-state)
|
|
242
241
|
* Ours: empty sits outside the body, in a polite live region that stays in place so a filter that empties the table is announced.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,sBAAsB,EACtB,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,uBAAuB,EACvB,sBAAsB,EACtB,mBAAmB,EAGnB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,WAAW,EAIX,KAAK,QAAQ,EACb,KAAK,MAAM,EACX,KAAK,SAAS,EAGd,KAAK,OAAO,EAGb,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAqB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAU9E,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -13,7 +13,7 @@ import { EmptyState } from "./empty-state.js";
|
|
|
13
13
|
import { MiddleTruncate } from "./middle-truncate.js";
|
|
14
14
|
import { Table, TableCell, TableCol, TableColgroup, TableDetailRow, TableHead, TableHeader, TableRecordGroup, TableRow, } from "./table.js";
|
|
15
15
|
import { TableCard } from "./table-card.js";
|
|
16
|
-
import { TableCompactLine,
|
|
16
|
+
import { TableCompactLayoutOf, TableCompactLine, } from "../internal/table-compact-line.js";
|
|
17
17
|
import { compactLayoutFor, tableCompactLayouts, } from "./table-layouts.js";
|
|
18
18
|
import { titleWhenCut } from "../internal/title-when-cut.js";
|
|
19
19
|
const dataTableFeatures = tableFeatures({
|
|
@@ -79,12 +79,14 @@ function primaryRowLinkProps({ href, label, wraps, content, }) {
|
|
|
79
79
|
// Below its layout's width the table lays out by content, so the identity takes the room the
|
|
80
80
|
// other columns leave and a long name ends in an ellipsis instead of widening the table.
|
|
81
81
|
const COMPACT_IDENTITY_CLASS = {
|
|
82
|
-
narrow: "@max-md/table:w-full @max-md/table:max-w-0",
|
|
83
82
|
tight: "@max-xl/table:w-full @max-xl/table:max-w-0",
|
|
84
83
|
standard: "@max-3xl/table:w-full @max-3xl/table:max-w-0",
|
|
85
84
|
wide: "@max-5xl/table:w-full @max-5xl/table:max-w-0",
|
|
86
85
|
roomy: "@max-[68rem]/table:w-full @max-[68rem]/table:max-w-0",
|
|
87
86
|
spacious: "@max-6xl/table:w-full @max-6xl/table:max-w-0",
|
|
87
|
+
broad: "@max-7xl/table:w-full @max-7xl/table:max-w-0",
|
|
88
|
+
vast: "@max-[96rem]/table:w-full @max-[96rem]/table:max-w-0",
|
|
89
|
+
always: "w-full max-w-0",
|
|
88
90
|
};
|
|
89
91
|
function identityWidthClass(column, identityColumnId, compactLayout) {
|
|
90
92
|
return column.id === identityColumnId && compactLayout
|
|
@@ -127,11 +129,14 @@ function useShownLayout() {
|
|
|
127
129
|
const [shownLayout, setShownLayout] = React.useState("both");
|
|
128
130
|
const probeRef = React.useCallback((probe) => {
|
|
129
131
|
const container = probe?.closest('[data-slot="table-container"]');
|
|
130
|
-
if (!probe || !container
|
|
132
|
+
if (!probe || !container)
|
|
131
133
|
return;
|
|
132
134
|
const read = () => getComputedStyle(probe).display === "none" ? "columns" : "details";
|
|
133
135
|
let shown = read();
|
|
134
136
|
setShownLayout(shown);
|
|
137
|
+
// Without a ResizeObserver to follow the card, the first measurement stands.
|
|
138
|
+
if (typeof ResizeObserver === "undefined")
|
|
139
|
+
return;
|
|
135
140
|
const show = (next) => {
|
|
136
141
|
if (next === shown)
|
|
137
142
|
return;
|
|
@@ -166,7 +171,7 @@ function useShownLayout() {
|
|
|
166
171
|
return [shownLayout, probeRef];
|
|
167
172
|
}
|
|
168
173
|
function LayoutProbeLeadingRecords({ layout, probeRef, children, }) {
|
|
169
|
-
return (_jsxs(_Fragment, { children: [
|
|
174
|
+
return (_jsxs(_Fragment, { children: [_jsx("tbody", { ref: probeRef, "aria-hidden": "true", "data-slot": "table-layout-probe", className: tableCompactLayouts[layout].details }, layout), children] }));
|
|
170
175
|
}
|
|
171
176
|
const defaultRowLink = ({ children, ...props }) => (_jsx("a", { ...props, children: children }));
|
|
172
177
|
function PagerButton({ enabled, label, link, onClick, }) {
|
|
@@ -191,7 +196,7 @@ function DefaultToolbar({ actions }) {
|
|
|
191
196
|
* @instead “For a row of descriptive content paired with a single action (membership row, integration row), use `Entity` instead.” (https://vercel.com/geist/table)
|
|
192
197
|
* “For a key/value metadata block on a detail page, use `Description`, not a two-column table.” (https://vercel.com/geist/table)
|
|
193
198
|
* Ours: Geist's `Entity` is a `RecordList` row. A registry of entities whose columns `RecordList` cannot hold, more than three facts beside a filter bar the product owns, as Vercel's Deployments list, is this table with `rows="entities"`, which draws the same rows: headings for assistive technology only, 72 px rows, a `RecordIdentity` in the identity column. Its `Description` is `ObjectFacts`. A list on a page of its own is a `CollectionPage`. A descriptive list is `ItemGroup`.
|
|
194
|
-
* @behaviour Every column has a `header`; a column without one does not compile. The headings are always visible, medium weight in the cells' body grey, 48 px high, with 12 px of room under the labels and then the rule, so the first row starts at the rule like every other; rows are 40 px. Each column is as wide as its definition's `size`, in pixels, and the columns without one share the rest, so a table gives a size to every column but the one that takes the spare width; a value too long for its column ends in an ellipsis, whole in its title (a record's name carries its own), unless the column `wraps`; a column marked `identifier` holds ids or paths and is cut in the middle instead. The last column trails unless it `wraps` or is `centered`; a `centered` column's heading and values sit in the middle of it. Records are divided by a 1 px rule, none after the last. The first and last columns stand in from the card's edges by the card's spacing, so the first lines up with the title. Records of several kinds stand in one table under `group` headings (Vercel's Usage page: *Delivery network*, *Functions*): a heading row that spans the columns, in ink, medium text, 36 px high with the same rule under it, one per group in the order the groups first appear, never a second table; a heading is the group's name and carries no figure of its own. A row that opens a record takes `accent` on hover, and any row on focus within and while its menu is open; a row that opens nothing never reacts to hover. A selected row takes `muted`; headers and footers never highlight and carry no fill. A row never scrolls sideways: on a card narrower than its columns (the sized ones and 160 px for each without a size) the row keeps its name and its `primaryColumns`, and every other column leaves it, its value joining the one muted line under the name, joined by a middle dot (a `Tag` reads as its text there); entity facts wrap below the name so every value stays readable, while other rows end in an ellipsis unless a column `wraps`, or `dropped` when its `compact` says so, or beside an entity row's name, which ends in an ellipsis before it, when it says `name`, as Vercel's lists read on a phone: no labels, no second line; an `optional` column's empty value is left out of the line. A table whose every column is in `primaryColumns`, a settings matrix, lays out by its content there instead, so the name wraps beside the columns. A document's table, such as a legal page's, is read whole instead: its columns take the `wraps` option, so their words wrap and the row grows, and it keeps its header row; in the compact layout every cell but the identity wraps between words. A bounded page's paging stands in the card's footer strip at its trailing edge, opposite `footer`, which stands at the leading edge: its `status` ("Page 2 of 7") before Previous and Next, which are the product's router links (`previousLink`, `nextLink`) when each page is its own address, and buttons otherwise; the one that leads nowhere stays, disabled. A note about the whole table is `footerNote`, in a strip of its own under that one: one muted line, an optional *Learn more* after it at the left and one secondary action at the right (Vercel's deployments list ends "Deployment retention is enabled. Learn more" with *View recently deleted*); it is the one place a table says a sentence. Colour is neutral: headings and cells in the body grey, no hue, except a status badge or a tone the cell itself carries.
|
|
199
|
+
* @behaviour Every column has a `header`; a column without one does not compile. The headings are always visible, medium weight in the cells' body grey, 48 px high, with 12 px of room under the labels and then the rule, so the first row starts at the rule like every other; rows are 40 px. Each column is as wide as its definition's `size`, in pixels, and the columns without one share the rest, so a table gives a size to every column but the one that takes the spare width; a value too long for its column ends in an ellipsis, whole in its title (a record's name carries its own), unless the column `wraps`; a column marked `identifier` holds ids or paths and is cut in the middle instead. The last column trails unless it `wraps` or is `centered`; a `centered` column's heading and values sit in the middle of it. Records are divided by a 1 px rule, none after the last. The first and last columns stand in from the card's edges by the card's spacing, so the first lines up with the title. Records of several kinds stand in one table under `group` headings (Vercel's Usage page: *Delivery network*, *Functions*): a heading row that spans the columns, in ink, medium text, 36 px high with the same rule under it, one per group in the order the groups first appear, never a second table; a heading is the group's name and carries no figure of its own. A row that opens a record takes `accent` on hover, and any row on focus within and while its menu is open; a row that opens nothing never reacts to hover. A selected row takes `muted`; headers and footers never highlight and carry no fill. A row never scrolls sideways and never gives a column without a size less than 160 px: on a card narrower than its columns (the sized ones and 160 px for each without a size, however wide that is; columns no card holds lay out this way on every card) the row keeps its name and its `primaryColumns`, and every other column leaves it, its value joining the one muted line under the name, joined by a middle dot (a `Tag` reads as its text there); entity facts wrap below the name so every value stays readable, while other rows end in an ellipsis unless a column `wraps`, or `dropped` when its `compact` says so, or beside an entity row's name, which ends in an ellipsis before it, when it says `name`, as Vercel's lists read on a phone: no labels, no second line; an `optional` column's empty value is left out of the line. A table whose every column is in `primaryColumns`, a settings matrix, lays out by its content there instead, so the name wraps beside the columns. A document's table, such as a legal page's, is read whole instead: its columns take the `wraps` option, so their words wrap and the row grows, and it keeps its header row; in the compact layout every cell but the identity wraps between words. A bounded page's paging stands in the card's footer strip at its trailing edge, opposite `footer`, which stands at the leading edge: its `status` ("Page 2 of 7") before Previous and Next, which are the product's router links (`previousLink`, `nextLink`) when each page is its own address, and buttons otherwise; the one that leads nowhere stays, disabled. A note about the whole table is `footerNote`, in a strip of its own under that one: one muted line, an optional *Learn more* after it at the left and one secondary action at the right (Vercel's deployments list ends "Deployment retention is enabled. Learn more" with *View recently deleted*); it is the one place a table says a sentence. Colour is neutral: headings and cells in the body grey, no hue, except a status badge or a tone the cell itself carries.
|
|
195
200
|
* “When the underlying list is empty (filter cleared, never created), render `Empty State` outside the table rather than an empty `<Table.Body>`.” (https://vercel.com/geist/table)
|
|
196
201
|
* “After an async filter change, wrap the region in `aria-live="polite"` so screen readers announce the new state.” (https://vercel.com/geist/empty-state)
|
|
197
202
|
* Ours: empty sits outside the body, in a polite live region that stays in place so a filter that empties the table is announced.
|
|
@@ -217,7 +222,7 @@ export function DataTable(props) {
|
|
|
217
222
|
export function EntityTable(props) {
|
|
218
223
|
return _jsx(RecordsTable, { ...props, kind: "entities" });
|
|
219
224
|
}
|
|
220
|
-
function RecordsTable({ kind, columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns,
|
|
225
|
+
function RecordsTable({ kind, columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns, tableLabel, heading, footer, footerNote, group, embedded = false, summary, rowHref, rowLabel, primaryColumnId, empty, noMatchMessage, columnsLabel, clearSearchLabel, pageLabels, toolbarActions, externalFilter, sorting: externalSorting, pagination, renderRowLink = defaultRowLink, renderToolbar = DefaultToolbar, wrapCard, rowEditor, rowMenu, rowUnderName, }) {
|
|
221
226
|
const entities = kind === "entities";
|
|
222
227
|
const [sorting, setSorting] = React.useState([]);
|
|
223
228
|
const [columnFilters, setColumnFilters] = React.useState([]);
|
|
@@ -251,8 +256,7 @@ function RecordsTable({ kind, columns, data, getRowId, filterColumnId, filterPla
|
|
|
251
256
|
const hasDetailColumns = table
|
|
252
257
|
.getAllLeafColumns()
|
|
253
258
|
.some((column) => !primaryColumns.includes(column.id));
|
|
254
|
-
const neededLayout =
|
|
255
|
-
compactLayoutFor(table.getVisibleLeafColumns().map((column) => sizeOf.get(column.id)));
|
|
259
|
+
const neededLayout = compactLayoutFor(table.getVisibleLeafColumns().map((column) => sizeOf.get(column.id)));
|
|
256
260
|
const compactLayout = hasDetailColumns ? neededLayout : undefined;
|
|
257
261
|
// A table whose every column stays lays out by its content on a narrow card, so the name wraps
|
|
258
262
|
// beside the columns instead of collapsing between them.
|
|
@@ -329,9 +333,9 @@ function RecordsTable({ kind, columns, data, getRowId, filterColumnId, filterPla
|
|
|
329
333
|
return _jsx(TableCell, { className: className }, cell.id);
|
|
330
334
|
}
|
|
331
335
|
const content = holdsCompactLine ? (_jsx(TableCompactLine, { ...compactLine, children: renderCell(cell) })) : (renderCell(cell));
|
|
332
|
-
return (
|
|
333
|
-
|
|
334
|
-
|
|
336
|
+
return (_jsxs(TableCell, { className: className, onFocus: cutByEllipsis ? titleWhenCut : undefined, onPointerEnter: cutByEllipsis ? titleWhenCut : undefined, children: [isPrimaryLink
|
|
337
|
+
? renderRowLink(primaryRowLinkProps({ href, label, wraps, content }))
|
|
338
|
+
: content, cell.column.id === identityColumnId ? rowUnderName?.(row.original) : null] }, cell.id));
|
|
335
339
|
}) }), rowEditor?.rowId === row.id ? (_jsx(TableRow, { "data-slot": "table-row-editor", className: "h-auto! [&>td]:bg-transparent!", children: _jsx(TableCell, { colSpan: visibleCells.length, className: "p-0 whitespace-normal", children: rowEditor.render(row.original) }) })) : null, detailRowShown ? (_jsx(TableDetailRow, { layout: compactLayout, colSpan: visibleCells.filter((cell) => !collapseClass(cell.column, primaryColumns, compactLayout)).length, facts: detailFacts() })) : null] }));
|
|
336
340
|
return (_jsx(React.Fragment, { children: _jsx(ActionContextMenu, { ...(menu ?? NO_ROW_MENU), children: record }) }, row.id));
|
|
337
341
|
};
|
|
@@ -345,13 +349,13 @@ function RecordsTable({ kind, columns, data, getRowId, filterColumnId, filterPla
|
|
|
345
349
|
},
|
|
346
350
|
}
|
|
347
351
|
: empty) }));
|
|
348
|
-
const tableNode = (_jsxs(_Fragment, { children: [_jsx("div", { "aria-live": "polite", "data-slot": "data-table-absence", children: absence }), rows.length === 0 ? null : (_jsx(
|
|
352
|
+
const tableNode = (_jsxs(_Fragment, { children: [_jsx("div", { "aria-live": "polite", "data-slot": "data-table-absence", children: absence }), rows.length === 0 ? null : (_jsx(TableCompactLayoutOf, { layout: tableLayout, shown: shownLayout, children: _jsxs(Table, { "aria-label": tableLabel, className: "table-fixed text-body-sm", compactDetails: tableLayout, density: entities ? "comfortable" : "default", children: [_jsx(TableColgroup, { children: table.getVisibleLeafColumns().map((column) => {
|
|
349
353
|
const size = sizeOf.get(column.id);
|
|
350
354
|
return (_jsx(TableCol, { className: cn(collapseTrackClass(column, primaryColumns, compactLayout)), style: size === undefined ? undefined : { width: size } }, column.id));
|
|
351
355
|
}) }), _jsx(TableHeader, { className: entities ? "sr-only" : undefined, children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableHead, { "aria-sort": sortOrder(header.column.getIsSorted()), "data-identity": header.column.id === identityColumnId ? "" : undefined, className: cn(isNumericColumn(header.column) && "text-right tabular-nums", header.column.columnDef.meta?.wraps === true && "last:text-left", header.column.columnDef.meta?.centered === true &&
|
|
352
356
|
"text-center last:text-center", identityWidthClass(header.column, identityColumnId, tableLayout), collapseClass(header.column, primaryColumns, compactLayout)), children: header.isPlaceholder
|
|
353
357
|
? null
|
|
354
|
-
: flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(LayoutProbeLeadingRecords, { layout:
|
|
358
|
+
: flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(LayoutProbeLeadingRecords, { layout: tableLayout, probeRef: layoutProbeRef, children: sections.map((section) => (_jsxs(React.Fragment, { children: [section.heading === undefined ? null : (_jsx(GroupHeading, { span: table.getVisibleLeafColumns().length, children: section.heading })), section.rows.map(renderRow)] }, section.heading ?? ""))) })] }) }))] }));
|
|
355
359
|
const actions = columnsControl || toolbarActions ? (_jsxs(_Fragment, { children: [columnsControl, toolbarActions] })) : null;
|
|
356
360
|
const toolbarSlots = { actions };
|
|
357
361
|
if (filterColumn && filterPlaceholder !== undefined && clearSearchLabel !== undefined) {
|
|
@@ -88,8 +88,8 @@ export type RecordListProps<TRecord extends RowData> = {
|
|
|
88
88
|
select?: RecordSelection<TRecord>;
|
|
89
89
|
/**
|
|
90
90
|
* `line` draws Vercel's project row: the facts and the status share one muted line between the
|
|
91
|
-
* name and the time, and the row ends in the ring and the three dots even for one command
|
|
92
|
-
*
|
|
91
|
+
* name and the time, and the row ends in the ring and the three dots even for one command; it
|
|
92
|
+
* folds like every list, once the card is narrower than its columns; `columns`, the
|
|
93
93
|
* default, gives each fact its own column. A `CollectionPage` with a `rail` sets it.
|
|
94
94
|
*/
|
|
95
95
|
layout?: "columns" | "line";
|
|
@@ -159,7 +159,8 @@ export type RecordListProps<TRecord extends RowData> = {
|
|
|
159
159
|
footer?: RecordListFooter;
|
|
160
160
|
/**
|
|
161
161
|
* The row's visible commands, one or two outline buttons of 32 px before the three dots:
|
|
162
|
-
* "Connect account", "Open report". A third goes in the menu.
|
|
162
|
+
* "Connect account", "Open report". A third goes in the menu. A compact row draws them under
|
|
163
|
+
* the name.
|
|
163
164
|
*/
|
|
164
165
|
command?: (record: TRecord) => PageCommand | readonly [PageCommand, PageCommand] | null;
|
|
165
166
|
/** The record's own action failed or was refused: its message inside its row. */
|
|
@@ -184,7 +185,7 @@ export type RecordListWithout<TRecord extends RowData, Key extends PropertyKey>
|
|
|
184
185
|
* @instead “For tabular data with sortable columns and shared row shape, use `Table` instead.” (https://vercel.com/geist/entity)
|
|
185
186
|
* “For a static key/value metadata block on a detail page, use `Description`.” (https://vercel.com/geist/entity)
|
|
186
187
|
* Ours: Geist's `Table` is a `DataTable`: this list has no visible headings and at most three facts, so a fourth fact is a table, and anything more than a few facts lives on the record's page. A screen gives `RecordList` the records and what each one says, never its own toolbar, table, rows or menus, and nothing else draws a record row. Its `Description` is `ObjectFacts`. Events in time are an `ActivityFeed`. Reusable things a person adds from a catalogue are a `LibraryShelf`. A descriptive row with prose is an `Item`.
|
|
187
|
-
* @behaviour One bordered card, a 1 px rule between records and none after the last. A row is 72 px, with 16 px above and below, and its columns stand left to right at the widths the list declares, so a person reads every list the same way: the `select` box (40 px, only when the list is picked from, an optional column), the identity (the rest: the one column without a size), the facts (each its `size`), the status (`status.size`), the time (`time.size`, tabular), the `checklist` ring (52 px, only when the record has steps to be ready) and the commands (as wide as the widest row's buttons, a failed action's next steps and the three dots or the chevron after them need, worked out from their labels, each label at most 8 px a character and a button holding the longer of its label and its pending label, the dots at their 44 px touch target; 64 px for the three dots or the chevron alone; a row that draws a button or next steps is never narrower than a `commandsSize` the caller gives). A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name (600) and, under it, one muted 14 px line; `name` and the mark are required; a record with nothing to say under its name leaves the line out and is the name alone, never a dash. Give every column a `size` in pixels; the name takes the rest. With `layout="line"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card
|
|
188
|
+
* @behaviour One bordered card, a 1 px rule between records and none after the last. A row is 72 px, with 16 px above and below, and its columns stand left to right at the widths the list declares, so a person reads every list the same way: the `select` box (40 px, only when the list is picked from, an optional column), the identity (the rest: the one column without a size), the facts (each its `size`), the status (`status.size`), the time (`time.size`, tabular), the `checklist` ring (52 px, only when the record has steps to be ready) and the commands (as wide as the widest row's buttons, a failed action's next steps and the three dots or the chevron after them need, worked out from their labels, each label at most 8 px a character and a button holding the longer of its label and its pending label, the dots at their 44 px touch target; 64 px for the three dots or the chevron alone; a row that draws a button or next steps is never narrower than a `commandsSize` the caller gives). A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name (600) and, under it, one muted 14 px line; `name` and the mark are required; a record with nothing to say under its name leaves the line out and is the name alone, never a dash. Give every column a `size` in pixels; the name takes the rest. With `layout="line"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card wide enough for its sized columns and 160 px each for the name and the summary, and on a narrower card the summary and the time move under the name as muted text joined by a middle dot that wraps, the status keeping its mark whole and breaking between its words only when it alone is wider than the line, in the same row, their labels read by assistive technology only. Rows of `columns` follow the same rule once the card is narrower than their columns: the facts and the time leave the row for that muted text, wrapping so every value stays readable, never a labelled list, and the status stands beside the name, which ends in an ellipsis before it, so the exception is never the part a phone's line cuts. `facts` takes at most three. A menu of one command that is not destructive, with no row command, is that command's button, except in a `line` row, which keeps it in the three dots as Vercel's project row does, and the column is as wide as the widest such button, so its label is never cut. The commands never take the name's room: once the row is compact, its commands column holds only the three dots or the chevron, a sole menu command stays in the dots and the row's own buttons stand under the name, beside a failed action's next steps, outside the row's link, so pressing one never opens the record. Status is only for the exception, empty for the usual record, and its column stands only while a record in the list shows one, so the name and its line keep the room; the commands column likewise stands only while a record has a command, a menu or a message, or the rows open, and it widens for a failed action's next steps only while a row shows one. Never the three dots before the button, a decorative icon for the record's mark, a status on every row, or a destructive button on every row: a destructive command stays in the three dots. A `line` row's summary joins only the facts the record has, so it never ends in a dot. A failed or refused action of the record shows as its catalogue message inside its own row, never a notice under the row: it replaces the detail line, with its next steps beside its commands, or under the message on a card too narrow for the row's columns. With `open` the whole row is one target and takes the `accent` hover, and a row that only opens ends in a muted chevron; a row that opens nothing never reacts to hover. With `editor` the record's row opens its form under its line. `empty` is required: `null` is the choice to draw nothing for a list with no records, and any other value is the state it draws. A note about the whole list is `footer.note`: one muted line, an optional *Learn more* after it at the left and one secondary action at the right, in a strip of its own under the count and the paging, as Vercel ends its deployments list ("Deployment retention is enabled. Learn more", *View recently deleted*). Colour is neutral, the name in ink and every other cell in the body grey, except the status badge and a failed action's message.
|
|
188
189
|
* “Pick the variant by what the user needs: no-results for a filtered list that returned zero rows, blank slate or informational for a resource the user hasn’t created, cleared for completed work, permission for role or tier denials, error for a failed load.” (https://vercel.com/geist/empty-state)
|
|
189
190
|
* Ours: `failed`, `noMatch` and `empty` are those variants, drawn inside the card.
|
|
190
191
|
* “The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.” (https://vercel.com/geist/entity)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"record-list.d.ts","sourceRoot":"","sources":["../../src/components/record-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAiB,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAExE,OAAO,EAEL,KAAK,qBAAqB,EAE3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AAIjG,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"record-list.d.ts","sourceRoot":"","sources":["../../src/components/record-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAiB,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAExE,OAAO,EAEL,KAAK,qBAAqB,EAE3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AAIjG,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAI9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,KAAK,UAAU,EAAqC,MAAM,wBAAwB,CAAC;AAG5F,YAAY,EAAE,UAAU,EAAE,CAAC;AAE3B,MAAM,MAAM,UAAU,GAAG;IACvB,uFAAuF;IACvF,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0GAA0G;IAC1G,IAAI,EAAE,iBAAiB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,SAAS,CAAC;IACnC,+FAA+F;IAC/F,IAAI,EAAE,MAAM,CAAC;IACb,gHAAgH;IAChH,KAAK,CAAC,EAAE,IAAI,CAAC;CACd,CAAC;AAEF,kGAAkG;AAClG,MAAM,MAAM,WAAW,CAAC,OAAO,IAC3B,SAAS,EAAE,GACX,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAC9B,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,GACnD,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;AAE7E,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,eAAe,CAAA;CAAE,CAAC;AAgFpE,MAAM,MAAM,gBAAgB,CAAC,OAAO,IAAI;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,6EAA6E;IAC7E,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,MAAM,CAAC;IAClD,mFAAmF;IACnF,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kGAAkG;IAClG,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,OAAO,IAAI;IACrC,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,CAAC;IACnC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IACtC,eAAe,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,SAAS,CAAC;QAClB,aAAa,EAAE,MAAM,CAAC;QACtB,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;QACtC,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;QAClC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;KAC/B,CAAC;IACF,2IAA2I;IAC3I,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,OAAO,SAAS,OAAO,IAAI;IACrD,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,OAAO,EAAE,SAAS,OAAO,EAAE,GAAG,SAAS,CAAC;IACxC,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,CAAC;IACnC,gHAAgH;IAChH,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,UAAU,CAAC;IACtC,+EAA+E;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAClC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,yDAAyD;IACzD,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,YAAY,GAAG,IAAI,CAAC;QAC7C,gGAAgG;QAChG,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,IAAI,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE;QACV,0DAA0D;QAC1D,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,sBAAsB,GAAG,IAAI,CAAC;KACxD,CAAC;IACF,mEAAmE;IACnE,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,CAAA;KAAE,GAAG,IAAI,CAAC;IACvF;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kEAAkE;IAClE,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,GAAG,IAAI,CAAC;QACzC,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,CAAC;QACnC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,SAAS,CAAC;KAC1D,CAAC;IACF;;;;OAIG;IACH,MAAM,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,SAAS,CAAA;KAAE,CAAC;IAChE,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;;OAGG;IACH,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,cAAc,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC;IACxE,kDAAkD;IAClD,OAAO,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,CAAC;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,SAAS,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC;IACvE,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,WAAW,GAAG,SAAS,CAAC,WAAW,EAAE,WAAW,CAAC,GAAG,IAAI,CAAC;IACxF,iFAAiF;IACjF,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,UAAU,GAAG,IAAI,CAAC;IAC/C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,OAAO,SAAS,OAAO,EAAE,GAAG,SAAS,WAAW,IAAI,IAAI,CACpF,eAAe,CAAC,OAAO,CAAC,EACxB,GAAG,CACJ,CAAC;AA4VF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,UAAU,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,sCAwClF"}
|
|
@@ -16,7 +16,7 @@ import { TableCard } from "./table-card.js";
|
|
|
16
16
|
import { TableValue } from "./table-value.js";
|
|
17
17
|
import { soleMenuButton } from "../internal/record-menu-items.js";
|
|
18
18
|
import { RowMessageActions, RowMessageLine } from "../internal/row-message.js";
|
|
19
|
-
import {
|
|
19
|
+
import { CompactOnly, WideOnly } from "../internal/table-compact-line.js";
|
|
20
20
|
const CELL_START = 8;
|
|
21
21
|
const CELL_END_AT_CARD_EDGE = 20;
|
|
22
22
|
const COMMANDS_GAP = 8;
|
|
@@ -34,12 +34,20 @@ function shownCommands(list, record) {
|
|
|
34
34
|
const menu = list.menu?.(record);
|
|
35
35
|
const commands = menu?.commands ?? [];
|
|
36
36
|
const own = list.command?.(record);
|
|
37
|
+
const ownButtons = own ? [own].flat() : [];
|
|
38
|
+
// A sole menu command is the row's button on a wide card and stays in the dots on a compact one.
|
|
37
39
|
const menuButton = own || list.layout === "line" ? undefined : soleMenuButton(commands);
|
|
38
|
-
const buttons = own ? [own].flat() : menuButton ? [menuButton] : [];
|
|
39
40
|
const state = list.state?.(record) ?? null;
|
|
40
|
-
const dots = menu && commands.length > 0
|
|
41
|
-
const
|
|
42
|
-
return {
|
|
41
|
+
const dots = menu && commands.length > 0 ? menu : undefined;
|
|
42
|
+
const opens = Boolean(list.open?.href(record)) && !state;
|
|
43
|
+
return {
|
|
44
|
+
besideDots: menuButton ? [menuButton] : ownButtons,
|
|
45
|
+
underName: ownButtons,
|
|
46
|
+
menuButton,
|
|
47
|
+
state,
|
|
48
|
+
dots,
|
|
49
|
+
opens,
|
|
50
|
+
};
|
|
43
51
|
}
|
|
44
52
|
function buttonRoom(command, size) {
|
|
45
53
|
const longerLabel = Math.max(command.label.length, command.pendingLabel?.length ?? 0);
|
|
@@ -49,14 +57,16 @@ function buttonRoom(command, size) {
|
|
|
49
57
|
longerLabel * WIDEST_LABEL_CHARACTER);
|
|
50
58
|
}
|
|
51
59
|
function commandsRoom(list, record) {
|
|
52
|
-
const {
|
|
60
|
+
const { besideDots, menuButton, state, dots, opens } = shownCommands(list, record);
|
|
61
|
+
const wideDots = dots && !menuButton;
|
|
62
|
+
const chevron = opens && !wideDots;
|
|
53
63
|
const widths = [
|
|
54
|
-
...
|
|
64
|
+
...besideDots.map((command) => buttonRoom(command, "sm")),
|
|
55
65
|
...(state?.message.actions ?? []).map((action) => buttonRoom(action, "default")),
|
|
56
66
|
];
|
|
57
67
|
if (widths.length === 0)
|
|
58
68
|
return DOTS_ALONE_SIZE;
|
|
59
|
-
if (
|
|
69
|
+
if (wideDots)
|
|
60
70
|
widths.push(TOUCH_TARGET);
|
|
61
71
|
if (chevron)
|
|
62
72
|
widths.push(CHEVRON);
|
|
@@ -88,8 +98,16 @@ function NameCell({ row }) {
|
|
|
88
98
|
const list = useShownList();
|
|
89
99
|
const shown = list.name(row.original);
|
|
90
100
|
const state = list.state?.(row.original);
|
|
91
|
-
|
|
92
|
-
|
|
101
|
+
return (_jsx(RecordIdentity, { detail: state ? (_jsx("span", { className: "block wrap-break-word whitespace-normal", children: _jsx(RowMessageLine, { state: state }) })) : (shown.detail), mark: shown.mark, name: shown.name, wraps: list.wraps }));
|
|
102
|
+
}
|
|
103
|
+
function UnderName({ record }) {
|
|
104
|
+
const list = useShownList();
|
|
105
|
+
const state = list.state?.(record);
|
|
106
|
+
const nextSteps = state?.message.actions.length ? state : null;
|
|
107
|
+
const { underName } = shownCommands(list, record);
|
|
108
|
+
if (!nextSteps && underName.length === 0)
|
|
109
|
+
return null;
|
|
110
|
+
return (_jsx(CompactOnly, { children: _jsxs("span", { className: "flex flex-wrap gap-2 pt-2 pl-12 whitespace-normal", "data-slot": "record-under-name", children: [nextSteps ? _jsx(RowMessageActions, { state: nextSteps }) : null, underName.map((command) => (_jsx(PageCommandButton, { command: command, size: "sm", variant: "outline" }, command.label)))] }) }));
|
|
93
111
|
}
|
|
94
112
|
function SelectCell({ row }) {
|
|
95
113
|
const select = useShownList().select;
|
|
@@ -137,13 +155,12 @@ function ChecklistCell({ row }) {
|
|
|
137
155
|
function CommandsCell({ row }) {
|
|
138
156
|
const list = useShownList();
|
|
139
157
|
const record = row.original;
|
|
140
|
-
const {
|
|
141
|
-
|
|
142
|
-
const
|
|
143
|
-
|
|
144
|
-
if (buttons.length === 0 && !state && !end)
|
|
158
|
+
const { besideDots, menuButton, state, dots, opens } = shownCommands(list, record);
|
|
159
|
+
const menu = dots ? (_jsx(ActionMenu, { commands: dots.commands, label: dots.label, record: list.name(record).name })) : null;
|
|
160
|
+
const chevron = opens ? (_jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 text-muted-foreground" })) : null;
|
|
161
|
+
if (besideDots.length === 0 && !state && !menu && !chevron)
|
|
145
162
|
return null;
|
|
146
|
-
return (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [
|
|
163
|
+
return (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsxs(WideOnly, { children: [besideDots.length > 0 ? (_jsx("div", { className: "flex min-w-0 justify-end gap-2 *:max-w-full *:min-w-0 *:shrink [&>*>span:not([data-icon])]:truncate", children: besideDots.map((command) => (_jsx(PageCommandButton, { command: command, size: "sm", variant: "outline" }, command.label))) })) : null, state ? _jsx(RowMessageActions, { state: state }) : null] }), menu && menuButton ? _jsx(CompactOnly, { children: menu }) : menu, chevron && menu && menuButton ? _jsx(WideOnly, { children: chevron }) : null, chevron && !menu ? chevron : null] }));
|
|
147
164
|
}
|
|
148
165
|
function LoadingRecords({ label }) {
|
|
149
166
|
return (_jsx("div", { "aria-busy": "true", "aria-label": label, className: "divide-y divide-border", role: "status", children: Array.from({ length: 3 }, (_, index) => (_jsxs("div", { className: "flex items-center gap-4 px-2 py-4", children: [_jsx(Skeleton, { className: "shrink-0", height: 32, width: 32 }), _jsxs("div", { className: "grid min-w-0 gap-2", children: [_jsx(Skeleton, { className: "max-w-full", height: 16, width: 160 }), _jsx(Skeleton, { className: "max-w-full", height: 16, width: 224 })] }), _jsx(Skeleton, { className: "ml-auto", height: 16, width: 92 })] }, index))) }));
|
|
@@ -239,9 +256,6 @@ function recordColumns(props) {
|
|
|
239
256
|
}
|
|
240
257
|
function RecordRows(props) {
|
|
241
258
|
const columns = recordColumns(props);
|
|
242
|
-
const layout = {};
|
|
243
|
-
if (props.layout === "line")
|
|
244
|
-
layout.compactLayout = "narrow";
|
|
245
259
|
const menu = props.menu;
|
|
246
260
|
const table = {
|
|
247
261
|
columns,
|
|
@@ -257,8 +271,8 @@ function RecordRows(props) {
|
|
|
257
271
|
getRowId: props.getId,
|
|
258
272
|
primaryColumnId: "name",
|
|
259
273
|
primaryColumns: ["select", "name", "checklist", "commands"],
|
|
260
|
-
...layout,
|
|
261
274
|
rowEditor: props.editor ? { rowId: props.editor.id, render: props.editor.render } : undefined,
|
|
275
|
+
rowUnderName: (record) => _jsx(UnderName, { record: record }),
|
|
262
276
|
tableLabel: props.label,
|
|
263
277
|
};
|
|
264
278
|
return props.open ? (_jsx(EntityTable, { ...table, renderRowLink: props.open.renderLink, rowHref: props.open.href, rowLabel: props.open.label })) : (_jsx(EntityTable, { ...table }));
|
|
@@ -274,7 +288,7 @@ function RecordRows(props) {
|
|
|
274
288
|
* @instead “For tabular data with sortable columns and shared row shape, use `Table` instead.” (https://vercel.com/geist/entity)
|
|
275
289
|
* “For a static key/value metadata block on a detail page, use `Description`.” (https://vercel.com/geist/entity)
|
|
276
290
|
* Ours: Geist's `Table` is a `DataTable`: this list has no visible headings and at most three facts, so a fourth fact is a table, and anything more than a few facts lives on the record's page. A screen gives `RecordList` the records and what each one says, never its own toolbar, table, rows or menus, and nothing else draws a record row. Its `Description` is `ObjectFacts`. Events in time are an `ActivityFeed`. Reusable things a person adds from a catalogue are a `LibraryShelf`. A descriptive row with prose is an `Item`.
|
|
277
|
-
* @behaviour One bordered card, a 1 px rule between records and none after the last. A row is 72 px, with 16 px above and below, and its columns stand left to right at the widths the list declares, so a person reads every list the same way: the `select` box (40 px, only when the list is picked from, an optional column), the identity (the rest: the one column without a size), the facts (each its `size`), the status (`status.size`), the time (`time.size`, tabular), the `checklist` ring (52 px, only when the record has steps to be ready) and the commands (as wide as the widest row's buttons, a failed action's next steps and the three dots or the chevron after them need, worked out from their labels, each label at most 8 px a character and a button holding the longer of its label and its pending label, the dots at their 44 px touch target; 64 px for the three dots or the chevron alone; a row that draws a button or next steps is never narrower than a `commandsSize` the caller gives). A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name (600) and, under it, one muted 14 px line; `name` and the mark are required; a record with nothing to say under its name leaves the line out and is the name alone, never a dash. Give every column a `size` in pixels; the name takes the rest. With `layout="line"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card
|
|
291
|
+
* @behaviour One bordered card, a 1 px rule between records and none after the last. A row is 72 px, with 16 px above and below, and its columns stand left to right at the widths the list declares, so a person reads every list the same way: the `select` box (40 px, only when the list is picked from, an optional column), the identity (the rest: the one column without a size), the facts (each its `size`), the status (`status.size`), the time (`time.size`, tabular), the `checklist` ring (52 px, only when the record has steps to be ready) and the commands (as wide as the widest row's buttons, a failed action's next steps and the three dots or the chevron after them need, worked out from their labels, each label at most 8 px a character and a button holding the longer of its label and its pending label, the dots at their 44 px touch target; 64 px for the three dots or the chevron alone; a row that draws a button or next steps is never narrower than a `commandsSize` the caller gives). A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name (600) and, under it, one muted 14 px line; `name` and the mark are required; a record with nothing to say under its name leaves the line out and is the name alone, never a dash. Give every column a `size` in pixels; the name takes the rest. With `layout="line"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card wide enough for its sized columns and 160 px each for the name and the summary, and on a narrower card the summary and the time move under the name as muted text joined by a middle dot that wraps, the status keeping its mark whole and breaking between its words only when it alone is wider than the line, in the same row, their labels read by assistive technology only. Rows of `columns` follow the same rule once the card is narrower than their columns: the facts and the time leave the row for that muted text, wrapping so every value stays readable, never a labelled list, and the status stands beside the name, which ends in an ellipsis before it, so the exception is never the part a phone's line cuts. `facts` takes at most three. A menu of one command that is not destructive, with no row command, is that command's button, except in a `line` row, which keeps it in the three dots as Vercel's project row does, and the column is as wide as the widest such button, so its label is never cut. The commands never take the name's room: once the row is compact, its commands column holds only the three dots or the chevron, a sole menu command stays in the dots and the row's own buttons stand under the name, beside a failed action's next steps, outside the row's link, so pressing one never opens the record. Status is only for the exception, empty for the usual record, and its column stands only while a record in the list shows one, so the name and its line keep the room; the commands column likewise stands only while a record has a command, a menu or a message, or the rows open, and it widens for a failed action's next steps only while a row shows one. Never the three dots before the button, a decorative icon for the record's mark, a status on every row, or a destructive button on every row: a destructive command stays in the three dots. A `line` row's summary joins only the facts the record has, so it never ends in a dot. A failed or refused action of the record shows as its catalogue message inside its own row, never a notice under the row: it replaces the detail line, with its next steps beside its commands, or under the message on a card too narrow for the row's columns. With `open` the whole row is one target and takes the `accent` hover, and a row that only opens ends in a muted chevron; a row that opens nothing never reacts to hover. With `editor` the record's row opens its form under its line. `empty` is required: `null` is the choice to draw nothing for a list with no records, and any other value is the state it draws. A note about the whole list is `footer.note`: one muted line, an optional *Learn more* after it at the left and one secondary action at the right, in a strip of its own under the count and the paging, as Vercel ends its deployments list ("Deployment retention is enabled. Learn more", *View recently deleted*). Colour is neutral, the name in ink and every other cell in the body grey, except the status badge and a failed action's message.
|
|
278
292
|
* “Pick the variant by what the user needs: no-results for a filtered list that returned zero rows, blank slate or informational for a resource the user hasn’t created, cleared for completed work, permission for role or tier denials, error for a failed load.” (https://vercel.com/geist/empty-state)
|
|
279
293
|
* Ours: `failed`, `noMatch` and `empty` are those variants, drawn inside the card.
|
|
280
294
|
* “The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.” (https://vercel.com/geist/entity)
|
|
@@ -1,19 +1,11 @@
|
|
|
1
1
|
export declare const tableCompactLayouts: {
|
|
2
|
-
/** Only by request: a row that must stay one line on any card wider than a phone's. */
|
|
3
|
-
readonly narrow: {
|
|
4
|
-
readonly width: 448;
|
|
5
|
-
readonly column: "hidden @md/table:table-cell";
|
|
6
|
-
readonly track: "hidden @md/table:table-column";
|
|
7
|
-
readonly row: "@max-md/table:[&>td]:border-b-0 @max-md/table:[&>td]:after:hidden @max-md/table:h-auto! @max-md/table:[&>td]:pb-1!";
|
|
8
|
-
readonly details: "@md/table:hidden";
|
|
9
|
-
readonly table: "@max-md/table:table-auto @max-md/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-md/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-md/table:[&_td]:whitespace-normal @max-md/table:[&_th:not(:first-child):not([data-identity])]:w-px @max-md/table:[&_tr:not([data-slot=table-detail-row])>td:not(:first-child)]:pl-0 @max-md/table:[&_tr:not([data-slot=table-detail-row])>td:not(:first-child):not(:last-child)]:pr-0";
|
|
10
|
-
};
|
|
11
2
|
readonly tight: {
|
|
12
3
|
readonly width: 576;
|
|
13
4
|
readonly column: "hidden @xl/table:table-cell";
|
|
14
5
|
readonly track: "hidden @xl/table:table-column";
|
|
15
6
|
readonly row: "@max-xl/table:[&>td]:border-b-0 @max-xl/table:[&>td]:after:hidden @max-xl/table:h-auto! @max-xl/table:[&>td]:pb-1!";
|
|
16
7
|
readonly details: "@xl/table:hidden";
|
|
8
|
+
readonly wideOnly: "hidden @xl/table:contents";
|
|
17
9
|
readonly table: "@max-xl/table:table-auto @max-xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-xl/table:[&_td]:whitespace-normal @max-xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
18
10
|
};
|
|
19
11
|
readonly standard: {
|
|
@@ -22,6 +14,7 @@ export declare const tableCompactLayouts: {
|
|
|
22
14
|
readonly track: "hidden @3xl/table:table-column";
|
|
23
15
|
readonly row: "@max-3xl/table:[&>td]:border-b-0 @max-3xl/table:[&>td]:after:hidden @max-3xl/table:h-auto! @max-3xl/table:[&>td]:pb-1!";
|
|
24
16
|
readonly details: "@3xl/table:hidden";
|
|
17
|
+
readonly wideOnly: "hidden @3xl/table:contents";
|
|
25
18
|
readonly table: "@max-3xl/table:table-auto @max-3xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-3xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-3xl/table:[&_td]:whitespace-normal @max-3xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
26
19
|
};
|
|
27
20
|
readonly wide: {
|
|
@@ -30,6 +23,7 @@ export declare const tableCompactLayouts: {
|
|
|
30
23
|
readonly track: "hidden @5xl/table:table-column";
|
|
31
24
|
readonly row: "@max-5xl/table:[&>td]:border-b-0 @max-5xl/table:[&>td]:after:hidden @max-5xl/table:h-auto! @max-5xl/table:[&>td]:pb-1!";
|
|
32
25
|
readonly details: "@5xl/table:hidden";
|
|
26
|
+
readonly wideOnly: "hidden @5xl/table:contents";
|
|
33
27
|
readonly table: "@max-5xl/table:table-auto @max-5xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-5xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-5xl/table:[&_td]:whitespace-normal @max-5xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
34
28
|
};
|
|
35
29
|
readonly roomy: {
|
|
@@ -38,6 +32,7 @@ export declare const tableCompactLayouts: {
|
|
|
38
32
|
readonly track: "hidden @min-[68rem]/table:table-column";
|
|
39
33
|
readonly row: "@max-[68rem]/table:[&>td]:border-b-0 @max-[68rem]/table:[&>td]:after:hidden @max-[68rem]/table:h-auto! @max-[68rem]/table:[&>td]:pb-1!";
|
|
40
34
|
readonly details: "@min-[68rem]/table:hidden";
|
|
35
|
+
readonly wideOnly: "hidden @min-[68rem]/table:contents";
|
|
41
36
|
readonly table: "@max-[68rem]/table:table-auto @max-[68rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-[68rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-[68rem]/table:[&_td]:whitespace-normal @max-[68rem]/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
42
37
|
};
|
|
43
38
|
readonly spacious: {
|
|
@@ -46,8 +41,36 @@ export declare const tableCompactLayouts: {
|
|
|
46
41
|
readonly track: "hidden @6xl/table:table-column";
|
|
47
42
|
readonly row: "@max-6xl/table:[&>td]:border-b-0 @max-6xl/table:[&>td]:after:hidden @max-6xl/table:h-auto! @max-6xl/table:[&>td]:pb-1!";
|
|
48
43
|
readonly details: "@6xl/table:hidden";
|
|
44
|
+
readonly wideOnly: "hidden @6xl/table:contents";
|
|
49
45
|
readonly table: "@max-6xl/table:table-auto @max-6xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-6xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-6xl/table:[&_td]:whitespace-normal @max-6xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
50
46
|
};
|
|
47
|
+
readonly broad: {
|
|
48
|
+
readonly width: 1280;
|
|
49
|
+
readonly column: "hidden @7xl/table:table-cell";
|
|
50
|
+
readonly track: "hidden @7xl/table:table-column";
|
|
51
|
+
readonly row: "@max-7xl/table:[&>td]:border-b-0 @max-7xl/table:[&>td]:after:hidden @max-7xl/table:h-auto! @max-7xl/table:[&>td]:pb-1!";
|
|
52
|
+
readonly details: "@7xl/table:hidden";
|
|
53
|
+
readonly wideOnly: "hidden @7xl/table:contents";
|
|
54
|
+
readonly table: "@max-7xl/table:table-auto @max-7xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-7xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-7xl/table:[&_td]:whitespace-normal @max-7xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
55
|
+
};
|
|
56
|
+
readonly vast: {
|
|
57
|
+
readonly width: 1536;
|
|
58
|
+
readonly column: "hidden @min-[96rem]/table:table-cell";
|
|
59
|
+
readonly track: "hidden @min-[96rem]/table:table-column";
|
|
60
|
+
readonly row: "@max-[96rem]/table:[&>td]:border-b-0 @max-[96rem]/table:[&>td]:after:hidden @max-[96rem]/table:h-auto! @max-[96rem]/table:[&>td]:pb-1!";
|
|
61
|
+
readonly details: "@min-[96rem]/table:hidden";
|
|
62
|
+
readonly wideOnly: "hidden @min-[96rem]/table:contents";
|
|
63
|
+
readonly table: "@max-[96rem]/table:table-auto @max-[96rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-[96rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-[96rem]/table:[&_td]:whitespace-normal @max-[96rem]/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
64
|
+
};
|
|
65
|
+
readonly always: {
|
|
66
|
+
readonly width: number;
|
|
67
|
+
readonly column: "hidden";
|
|
68
|
+
readonly track: "hidden";
|
|
69
|
+
readonly row: "[&>td]:border-b-0 [&>td]:after:hidden h-auto! [&>td]:pb-1!";
|
|
70
|
+
readonly details: "";
|
|
71
|
+
readonly wideOnly: "hidden";
|
|
72
|
+
readonly table: "table-auto [&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal [&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words [&_td]:whitespace-normal [&_th:not(:first-child):not([data-identity])]:w-px";
|
|
73
|
+
};
|
|
51
74
|
};
|
|
52
75
|
export type TableCompactLayout = keyof typeof tableCompactLayouts;
|
|
53
76
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-layouts.d.ts","sourceRoot":"","sources":["../../src/components/table-layouts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB
|
|
1
|
+
{"version":3,"file":"table-layouts.d.ts","sourceRoot":"","sources":["../../src/components/table-layouts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFtB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAelE;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GAAG,kBAAkB,CAG3F"}
|
|
@@ -1,19 +1,11 @@
|
|
|
1
1
|
export const tableCompactLayouts = {
|
|
2
|
-
/** Only by request: a row that must stay one line on any card wider than a phone's. */
|
|
3
|
-
narrow: {
|
|
4
|
-
width: 448,
|
|
5
|
-
column: "hidden @md/table:table-cell",
|
|
6
|
-
track: "hidden @md/table:table-column",
|
|
7
|
-
row: "@max-md/table:[&>td]:border-b-0 @max-md/table:[&>td]:after:hidden @max-md/table:h-auto! @max-md/table:[&>td]:pb-1!",
|
|
8
|
-
details: "@md/table:hidden",
|
|
9
|
-
table: "@max-md/table:table-auto @max-md/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-md/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-md/table:[&_td]:whitespace-normal @max-md/table:[&_th:not(:first-child):not([data-identity])]:w-px @max-md/table:[&_tr:not([data-slot=table-detail-row])>td:not(:first-child)]:pl-0 @max-md/table:[&_tr:not([data-slot=table-detail-row])>td:not(:first-child):not(:last-child)]:pr-0",
|
|
10
|
-
},
|
|
11
2
|
tight: {
|
|
12
3
|
width: 576,
|
|
13
4
|
column: "hidden @xl/table:table-cell",
|
|
14
5
|
track: "hidden @xl/table:table-column",
|
|
15
6
|
row: "@max-xl/table:[&>td]:border-b-0 @max-xl/table:[&>td]:after:hidden @max-xl/table:h-auto! @max-xl/table:[&>td]:pb-1!",
|
|
16
7
|
details: "@xl/table:hidden",
|
|
8
|
+
wideOnly: "hidden @xl/table:contents",
|
|
17
9
|
table: "@max-xl/table:table-auto @max-xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-xl/table:[&_td]:whitespace-normal @max-xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
18
10
|
},
|
|
19
11
|
standard: {
|
|
@@ -22,6 +14,7 @@ export const tableCompactLayouts = {
|
|
|
22
14
|
track: "hidden @3xl/table:table-column",
|
|
23
15
|
row: "@max-3xl/table:[&>td]:border-b-0 @max-3xl/table:[&>td]:after:hidden @max-3xl/table:h-auto! @max-3xl/table:[&>td]:pb-1!",
|
|
24
16
|
details: "@3xl/table:hidden",
|
|
17
|
+
wideOnly: "hidden @3xl/table:contents",
|
|
25
18
|
table: "@max-3xl/table:table-auto @max-3xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-3xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-3xl/table:[&_td]:whitespace-normal @max-3xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
26
19
|
},
|
|
27
20
|
wide: {
|
|
@@ -30,6 +23,7 @@ export const tableCompactLayouts = {
|
|
|
30
23
|
track: "hidden @5xl/table:table-column",
|
|
31
24
|
row: "@max-5xl/table:[&>td]:border-b-0 @max-5xl/table:[&>td]:after:hidden @max-5xl/table:h-auto! @max-5xl/table:[&>td]:pb-1!",
|
|
32
25
|
details: "@5xl/table:hidden",
|
|
26
|
+
wideOnly: "hidden @5xl/table:contents",
|
|
33
27
|
table: "@max-5xl/table:table-auto @max-5xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-5xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-5xl/table:[&_td]:whitespace-normal @max-5xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
34
28
|
},
|
|
35
29
|
roomy: {
|
|
@@ -38,6 +32,7 @@ export const tableCompactLayouts = {
|
|
|
38
32
|
track: "hidden @min-[68rem]/table:table-column",
|
|
39
33
|
row: "@max-[68rem]/table:[&>td]:border-b-0 @max-[68rem]/table:[&>td]:after:hidden @max-[68rem]/table:h-auto! @max-[68rem]/table:[&>td]:pb-1!",
|
|
40
34
|
details: "@min-[68rem]/table:hidden",
|
|
35
|
+
wideOnly: "hidden @min-[68rem]/table:contents",
|
|
41
36
|
table: "@max-[68rem]/table:table-auto @max-[68rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-[68rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-[68rem]/table:[&_td]:whitespace-normal @max-[68rem]/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
42
37
|
},
|
|
43
38
|
spacious: {
|
|
@@ -46,8 +41,36 @@ export const tableCompactLayouts = {
|
|
|
46
41
|
track: "hidden @6xl/table:table-column",
|
|
47
42
|
row: "@max-6xl/table:[&>td]:border-b-0 @max-6xl/table:[&>td]:after:hidden @max-6xl/table:h-auto! @max-6xl/table:[&>td]:pb-1!",
|
|
48
43
|
details: "@6xl/table:hidden",
|
|
44
|
+
wideOnly: "hidden @6xl/table:contents",
|
|
49
45
|
table: "@max-6xl/table:table-auto @max-6xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-6xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-6xl/table:[&_td]:whitespace-normal @max-6xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
50
46
|
},
|
|
47
|
+
broad: {
|
|
48
|
+
width: 1280,
|
|
49
|
+
column: "hidden @7xl/table:table-cell",
|
|
50
|
+
track: "hidden @7xl/table:table-column",
|
|
51
|
+
row: "@max-7xl/table:[&>td]:border-b-0 @max-7xl/table:[&>td]:after:hidden @max-7xl/table:h-auto! @max-7xl/table:[&>td]:pb-1!",
|
|
52
|
+
details: "@7xl/table:hidden",
|
|
53
|
+
wideOnly: "hidden @7xl/table:contents",
|
|
54
|
+
table: "@max-7xl/table:table-auto @max-7xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-7xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-7xl/table:[&_td]:whitespace-normal @max-7xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
55
|
+
},
|
|
56
|
+
vast: {
|
|
57
|
+
width: 1536,
|
|
58
|
+
column: "hidden @min-[96rem]/table:table-cell",
|
|
59
|
+
track: "hidden @min-[96rem]/table:table-column",
|
|
60
|
+
row: "@max-[96rem]/table:[&>td]:border-b-0 @max-[96rem]/table:[&>td]:after:hidden @max-[96rem]/table:h-auto! @max-[96rem]/table:[&>td]:pb-1!",
|
|
61
|
+
details: "@min-[96rem]/table:hidden",
|
|
62
|
+
wideOnly: "hidden @min-[96rem]/table:contents",
|
|
63
|
+
table: "@max-[96rem]/table:table-auto @max-[96rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-[96rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-[96rem]/table:[&_td]:whitespace-normal @max-[96rem]/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
64
|
+
},
|
|
65
|
+
always: {
|
|
66
|
+
width: Number.POSITIVE_INFINITY,
|
|
67
|
+
column: "hidden",
|
|
68
|
+
track: "hidden",
|
|
69
|
+
row: "[&>td]:border-b-0 [&>td]:after:hidden h-auto! [&>td]:pb-1!",
|
|
70
|
+
details: "",
|
|
71
|
+
wideOnly: "hidden",
|
|
72
|
+
table: "table-auto [&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal [&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words [&_td]:whitespace-normal [&_th:not(:first-child):not([data-identity])]:w-px",
|
|
73
|
+
},
|
|
51
74
|
};
|
|
52
75
|
/** The least a column without a size needs, in pixels: below it the card lays out compact. */
|
|
53
76
|
const UNSIZED_COLUMN_FLOOR = 160;
|
|
@@ -57,6 +80,8 @@ const NARROWEST_FIRST = [
|
|
|
57
80
|
"wide",
|
|
58
81
|
"roomy",
|
|
59
82
|
"spacious",
|
|
83
|
+
"broad",
|
|
84
|
+
"vast",
|
|
60
85
|
];
|
|
61
86
|
/**
|
|
62
87
|
* The compact layout for columns of these sizes: the narrowest card width at which every sized
|
|
@@ -66,5 +91,5 @@ const NARROWEST_FIRST = [
|
|
|
66
91
|
*/
|
|
67
92
|
export function compactLayoutFor(sizes) {
|
|
68
93
|
const needed = sizes.reduce((sum, size) => sum + (size ?? UNSIZED_COLUMN_FLOOR), 0);
|
|
69
|
-
return NARROWEST_FIRST.find((name) => tableCompactLayouts[name].width >= needed) ?? "
|
|
94
|
+
return NARROWEST_FIRST.find((name) => tableCompactLayouts[name].width >= needed) ?? "always";
|
|
70
95
|
}
|
|
@@ -28,13 +28,31 @@ export declare function TableCompactFacts(): React.JSX.Element | null;
|
|
|
28
28
|
/** The compact facts that stand beside the name of the row this stands in, which no ellipsis cuts; nothing outside such a row or on a card wide enough for the columns. */
|
|
29
29
|
export declare function TableCompactNameFacts(): React.JSX.Element | null;
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
32
|
-
*
|
|
31
|
+
* The layout the table last measured its card at: `both` until it has measured, `columns` for a
|
|
32
|
+
* card wide enough for the row's columns, `details` for a compact one.
|
|
33
33
|
*/
|
|
34
|
-
export
|
|
35
|
-
|
|
34
|
+
export type ShownLayout = "both" | "columns" | "details";
|
|
35
|
+
type TableCompactLayoutValue = {
|
|
36
|
+
layout: TableCompactLayout;
|
|
37
|
+
shown: ShownLayout;
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* The layout the entity rows around it fold by. Until the table has measured its card, a row draws
|
|
41
|
+
* what goes beside its name on a wide card and under it on a compact one both, and this layout's
|
|
42
|
+
* container query shows the one that fits, so the server's first draw is already the browser's and
|
|
43
|
+
* nothing moves when it hydrates. Once measured, only the placement that fits stands, so the page
|
|
44
|
+
* holds one copy of each command, and a menu opened on a compact card goes when the card widens.
|
|
45
|
+
*/
|
|
46
|
+
export declare function TableCompactLayoutOf({ layout, shown, children, }: TableCompactLayoutValue & {
|
|
36
47
|
children: React.ReactNode;
|
|
37
48
|
}): React.JSX.Element;
|
|
38
|
-
|
|
49
|
+
/** What stands only on a card wide enough for the row's columns. */
|
|
50
|
+
export declare function WideOnly({ children }: {
|
|
51
|
+
children: React.ReactNode;
|
|
52
|
+
}): React.JSX.Element | null;
|
|
53
|
+
/** What stands only once the row is compact. */
|
|
54
|
+
export declare function CompactOnly({ children }: {
|
|
55
|
+
children: React.ReactNode;
|
|
56
|
+
}): React.JSX.Element | null;
|
|
39
57
|
export {};
|
|
40
58
|
//# sourceMappingURL=table-compact-line.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-compact-line.d.ts","sourceRoot":"","sources":["../../src/internal/table-compact-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG1F,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wGAAwG;IACxG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,eAAe,8EACiD,CAAC;AAE9E,eAAO,MAAM,eAAe,+EACkD,CAAC;AAE/E,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,gBAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,uBAQA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,CAAC;AAI/F,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEvD;AAED,4IAA4I;AAC5I,wBAAgB,iBAAiB,6BAahC;AAED,2KAA2K;AAC3K,wBAAgB,qBAAqB,6BAkBpC;
|
|
1
|
+
{"version":3,"file":"table-compact-line.d.ts","sourceRoot":"","sources":["../../src/internal/table-compact-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG1F,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wGAAwG;IACxG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,eAAe,8EACiD,CAAC;AAE9E,eAAO,MAAM,eAAe,+EACkD,CAAC;AAE/E,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,gBAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,uBAQA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,CAAC;AAI/F,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEvD;AAED,4IAA4I;AAC5I,wBAAgB,iBAAiB,6BAahC;AAED,2KAA2K;AAC3K,wBAAgB,qBAAqB,6BAkBpC;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEzD,KAAK,uBAAuB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,WAAW,CAAA;CAAE,CAAC;AAMlF;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,KAAK,EACL,QAAQ,GACT,EAAE,uBAAuB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAGzD;AAQD,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4BAQnE;AAED,gDAAgD;AAChD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4BAQtE"}
|
|
@@ -33,14 +33,35 @@ export function TableCompactNameFacts() {
|
|
|
33
33
|
return null;
|
|
34
34
|
return (_jsx("span", { className: cn("flex shrink-0 items-center gap-2", tableCompactLayouts[line.layout].details), "data-slot": "table-name-facts", children: facts.map((fact) => (_jsxs("span", { className: "flex items-center", children: [_jsxs("span", { className: "sr-only", children: [fact.label, ": "] }), fact.value] }, fact.id))) }));
|
|
35
35
|
}
|
|
36
|
-
const
|
|
36
|
+
const TableCompactLayoutContext = React.createContext(undefined);
|
|
37
37
|
/**
|
|
38
|
-
*
|
|
39
|
-
*
|
|
38
|
+
* The layout the entity rows around it fold by. Until the table has measured its card, a row draws
|
|
39
|
+
* what goes beside its name on a wide card and under it on a compact one both, and this layout's
|
|
40
|
+
* container query shows the one that fits, so the server's first draw is already the browser's and
|
|
41
|
+
* nothing moves when it hydrates. Once measured, only the placement that fits stands, so the page
|
|
42
|
+
* holds one copy of each command, and a menu opened on a compact card goes when the card widens.
|
|
40
43
|
*/
|
|
41
|
-
export function
|
|
42
|
-
|
|
44
|
+
export function TableCompactLayoutOf({ layout, shown, children, }) {
|
|
45
|
+
const value = React.useMemo(() => ({ layout, shown }), [layout, shown]);
|
|
46
|
+
return _jsx(TableCompactLayoutContext, { value: value, children: children });
|
|
43
47
|
}
|
|
44
|
-
|
|
45
|
-
|
|
48
|
+
function useCompactLayout() {
|
|
49
|
+
const value = React.useContext(TableCompactLayoutContext);
|
|
50
|
+
if (!value)
|
|
51
|
+
throw new Error("A row's placements stand only inside a table's compact layout");
|
|
52
|
+
return value;
|
|
53
|
+
}
|
|
54
|
+
/** What stands only on a card wide enough for the row's columns. */
|
|
55
|
+
export function WideOnly({ children }) {
|
|
56
|
+
const { layout, shown } = useCompactLayout();
|
|
57
|
+
if (shown === "details")
|
|
58
|
+
return null;
|
|
59
|
+
return (_jsx("span", { className: tableCompactLayouts[layout].wideOnly, "data-slot": "wide-only", children: children }));
|
|
60
|
+
}
|
|
61
|
+
/** What stands only once the row is compact. */
|
|
62
|
+
export function CompactOnly({ children }) {
|
|
63
|
+
const { layout, shown } = useCompactLayout();
|
|
64
|
+
if (shown === "columns")
|
|
65
|
+
return null;
|
|
66
|
+
return (_jsx("span", { className: cn("contents", tableCompactLayouts[layout].details), "data-slot": "compact-only", children: children }));
|
|
46
67
|
}
|
|
@@ -186,7 +186,7 @@ export const USAGE = [
|
|
|
186
186
|
summary: "Entity rows: objects a person opens or acts on, one line each on one resting card: the identity mark and name over what it is, a few facts, a status only for the exception, when it happened, at most two row commands, and the three dots last.",
|
|
187
187
|
when: "“Use `<Entity>` for a row of descriptive content paired with one or two controls (member rows, integration rows, domain rows).” (https://vercel.com/geist/entity) Ours: the records are things a person opens or acts on and that name themselves: projects, deployments, domains, members, integrations, Agents, Skills, mailboxes. A list inside another page: an Overview's exceptions, an object page's \"Needs attention\". A page whose whole job is the list is a `CollectionPage`, which draws this. Values edited in place (a domain, an environment variable) are the same rows with an `editor`: the row expands into its form. Of the three kinds of list, entity rows and rows edited in place are this; records compared across columns are a `DataTable`.",
|
|
188
188
|
instead: "“For tabular data with sortable columns and shared row shape, use `Table` instead.” (https://vercel.com/geist/entity) “For a static key/value metadata block on a detail page, use `Description`.” (https://vercel.com/geist/entity) Ours: Geist's `Table` is a `DataTable`: this list has no visible headings and at most three facts, so a fourth fact is a table, and anything more than a few facts lives on the record's page. A screen gives `RecordList` the records and what each one says, never its own toolbar, table, rows or menus, and nothing else draws a record row. Its `Description` is `ObjectFacts`. Events in time are an `ActivityFeed`. Reusable things a person adds from a catalogue are a `LibraryShelf`. A descriptive row with prose is an `Item`.",
|
|
189
|
-
behaviour: "One bordered card, a 1 px rule between records and none after the last. A row is 72 px, with 16 px above and below, and its columns stand left to right at the widths the list declares, so a person reads every list the same way: the `select` box (40 px, only when the list is picked from, an optional column), the identity (the rest: the one column without a size), the facts (each its `size`), the status (`status.size`), the time (`time.size`, tabular), the `checklist` ring (52 px, only when the record has steps to be ready) and the commands (as wide as the widest row's buttons, a failed action's next steps and the three dots or the chevron after them need, worked out from their labels, each label at most 8 px a character and a button holding the longer of its label and its pending label, the dots at their 44 px touch target; 64 px for the three dots or the chevron alone; a row that draws a button or next steps is never narrower than a `commandsSize` the caller gives). A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name (600) and, under it, one muted 14 px line; `name` and the mark are required; a record with nothing to say under its name leaves the line out and is the name alone, never a dash. Give every column a `size` in pixels; the name takes the rest. With `layout=\"line\"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card
|
|
189
|
+
behaviour: "One bordered card, a 1 px rule between records and none after the last. A row is 72 px, with 16 px above and below, and its columns stand left to right at the widths the list declares, so a person reads every list the same way: the `select` box (40 px, only when the list is picked from, an optional column), the identity (the rest: the one column without a size), the facts (each its `size`), the status (`status.size`), the time (`time.size`, tabular), the `checklist` ring (52 px, only when the record has steps to be ready) and the commands (as wide as the widest row's buttons, a failed action's next steps and the three dots or the chevron after them need, worked out from their labels, each label at most 8 px a character and a button holding the longer of its label and its pending label, the dots at their 44 px touch target; 64 px for the three dots or the chevron alone; a row that draws a button or next steps is never narrower than a `commandsSize` the caller gives). A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name (600) and, under it, one muted 14 px line; `name` and the mark are required; a record with nothing to say under its name leaves the line out and is the name alone, never a dash. Give every column a `size` in pixels; the name takes the rest. With `layout=\"line\"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card wide enough for its sized columns and 160 px each for the name and the summary, and on a narrower card the summary and the time move under the name as muted text joined by a middle dot that wraps, the status keeping its mark whole and breaking between its words only when it alone is wider than the line, in the same row, their labels read by assistive technology only. Rows of `columns` follow the same rule once the card is narrower than their columns: the facts and the time leave the row for that muted text, wrapping so every value stays readable, never a labelled list, and the status stands beside the name, which ends in an ellipsis before it, so the exception is never the part a phone's line cuts. `facts` takes at most three. A menu of one command that is not destructive, with no row command, is that command's button, except in a `line` row, which keeps it in the three dots as Vercel's project row does, and the column is as wide as the widest such button, so its label is never cut. The commands never take the name's room: once the row is compact, its commands column holds only the three dots or the chevron, a sole menu command stays in the dots and the row's own buttons stand under the name, beside a failed action's next steps, outside the row's link, so pressing one never opens the record. Status is only for the exception, empty for the usual record, and its column stands only while a record in the list shows one, so the name and its line keep the room; the commands column likewise stands only while a record has a command, a menu or a message, or the rows open, and it widens for a failed action's next steps only while a row shows one. Never the three dots before the button, a decorative icon for the record's mark, a status on every row, or a destructive button on every row: a destructive command stays in the three dots. A `line` row's summary joins only the facts the record has, so it never ends in a dot. A failed or refused action of the record shows as its catalogue message inside its own row, never a notice under the row: it replaces the detail line, with its next steps beside its commands, or under the message on a card too narrow for the row's columns. With `open` the whole row is one target and takes the `accent` hover, and a row that only opens ends in a muted chevron; a row that opens nothing never reacts to hover. With `editor` the record's row opens its form under its line. `empty` is required: `null` is the choice to draw nothing for a list with no records, and any other value is the state it draws. A note about the whole list is `footer.note`: one muted line, an optional *Learn more* after it at the left and one secondary action at the right, in a strip of its own under the count and the paging, as Vercel ends its deployments list (\"Deployment retention is enabled. Learn more\", *View recently deleted*). Colour is neutral, the name in ink and every other cell in the body grey, except the status badge and a failed action's message. “Pick the variant by what the user needs: no-results for a filtered list that returned zero rows, blank slate or informational for a resource the user hasn’t created, cleared for completed work, permission for role or tier denials, error for a failed load.” (https://vercel.com/geist/empty-state) Ours: `failed`, `noMatch` and `empty` are those variants, drawn inside the card. “The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.” (https://vercel.com/geist/entity) Ours: one or two row commands (outline buttons of 32 px) stand before the three dots (36 px), the Dots Menu. “Render the Skeleton variant (`entity-with-skeleton`) during load instead of an empty row, and swap to real content once data resolves.” (https://vercel.com/geist/entity) Ours: three still skeleton rows hold the place, in a region that announces what replaces them; then the first that holds: the failed read, no match, the empty state, the rows.",
|
|
190
190
|
words: '“Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`).” (https://vercel.com/geist/entity) Ours: the name is the record\'s own and the labels around it are sentence case, not Title Case. “Keep right-column buttons Verb + Noun (`Remove Member`, `Resend Invite`). Bare verbs like `Remove` or `Confirm` lose context once the row scrolls offscreen.” (https://vercel.com/geist/entity) Ours: every string is the product\'s: `label` names the list, a time\'s `phrase` writes its sentence ("Updated {when}"), `missing` is what a screen reader hears for a record with no time, the menu\'s `label` reads "More for {record}". A row command names its result in sentence case ("Edit domain"). A status is the exception\'s word ("Needs attention"), never "Active" on every row.',
|
|
191
191
|
access: '“Wrap the loading region in `aria-busy="true"` and announce completion with `aria-live="polite"` on the destination container, not the skeleton itself.” (https://vercel.com/geist/skeleton) Ours: the loading rows sit in one `SkeletonRegion` that is busy while they stand and announces what replaces them. A table named by `label`, its column headings read by assistive technology only; the commands column\'s is `commandsHeader`, and empty without one, since its controls name themselves, never the list\'s name a second time. The row link carries `open.label`; the three dots carry the menu\'s `label`, and the menu\'s first line names the record. The loading rows are a status named by `loadingLabel`, inside the one live region that announces what replaces them. “For multi-select rows, the leading `Checkbox` carries `aria-label="Select {entity name}"` so the row is selectable without relying on the visual label.” (https://vercel.com/geist/entity) Ours: each box is named by `select.label`, which reads "Select {record}".',
|
|
192
192
|
},
|
|
@@ -1033,7 +1033,7 @@ export const USAGE = [
|
|
|
1033
1033
|
summary: "Records compared across columns: the same facts for every record, read down a column and across a row, inside their `TableCard`.",
|
|
1034
1034
|
when: "“Use `<Table>` for tabular data where rows share the same shape and at least one column is sortable or comparable across rows.” (https://vercel.com/geist/table) Ours: the person compares: usage per Agent, statements, invoices, customers with their partner and count. The columns are fixed, each has a heading, and at least one is a figure or can be sorted. There are three kinds of list. Objects a person opens (a project, a deployment, a member, an integration) are entity rows: a `RecordList`. Values edited in place (a domain, an environment variable) are entity rows that expand into their form: a `RecordList`'s `editor`. Records compared across columns are this table.",
|
|
1035
1035
|
instead: "“For a row of descriptive content paired with a single action (membership row, integration row), use `Entity` instead.” (https://vercel.com/geist/table) “For a key/value metadata block on a detail page, use `Description`, not a two-column table.” (https://vercel.com/geist/table) Ours: Geist's `Entity` is a `RecordList` row. A registry of entities whose columns `RecordList` cannot hold, more than three facts beside a filter bar the product owns, as Vercel's Deployments list, is this table with `rows=\"entities\"`, which draws the same rows: headings for assistive technology only, 72 px rows, a `RecordIdentity` in the identity column. Its `Description` is `ObjectFacts`. A list on a page of its own is a `CollectionPage`. A descriptive list is `ItemGroup`.",
|
|
1036
|
-
behaviour: "Every column has a `header`; a column without one does not compile. The headings are always visible, medium weight in the cells' body grey, 48 px high, with 12 px of room under the labels and then the rule, so the first row starts at the rule like every other; rows are 40 px. Each column is as wide as its definition's `size`, in pixels, and the columns without one share the rest, so a table gives a size to every column but the one that takes the spare width; a value too long for its column ends in an ellipsis, whole in its title (a record's name carries its own), unless the column `wraps`; a column marked `identifier` holds ids or paths and is cut in the middle instead. The last column trails unless it `wraps` or is `centered`; a `centered` column's heading and values sit in the middle of it. Records are divided by a 1 px rule, none after the last. The first and last columns stand in from the card's edges by the card's spacing, so the first lines up with the title. Records of several kinds stand in one table under `group` headings (Vercel's Usage page: *Delivery network*, *Functions*): a heading row that spans the columns, in ink, medium text, 36 px high with the same rule under it, one per group in the order the groups first appear, never a second table; a heading is the group's name and carries no figure of its own. A row that opens a record takes `accent` on hover, and any row on focus within and while its menu is open; a row that opens nothing never reacts to hover. A selected row takes `muted`; headers and footers never highlight and carry no fill. A row never scrolls sideways: on a card narrower than its columns (the sized ones and 160 px for each without a size) the row keeps its name and its `primaryColumns`, and every other column leaves it, its value joining the one muted line under the name, joined by a middle dot (a `Tag` reads as its text there); entity facts wrap below the name so every value stays readable, while other rows end in an ellipsis unless a column `wraps`, or `dropped` when its `compact` says so, or beside an entity row's name, which ends in an ellipsis before it, when it says `name`, as Vercel's lists read on a phone: no labels, no second line; an `optional` column's empty value is left out of the line. A table whose every column is in `primaryColumns`, a settings matrix, lays out by its content there instead, so the name wraps beside the columns. A document's table, such as a legal page's, is read whole instead: its columns take the `wraps` option, so their words wrap and the row grows, and it keeps its header row; in the compact layout every cell but the identity wraps between words. A bounded page's paging stands in the card's footer strip at its trailing edge, opposite `footer`, which stands at the leading edge: its `status` (\"Page 2 of 7\") before Previous and Next, which are the product's router links (`previousLink`, `nextLink`) when each page is its own address, and buttons otherwise; the one that leads nowhere stays, disabled. A note about the whole table is `footerNote`, in a strip of its own under that one: one muted line, an optional *Learn more* after it at the left and one secondary action at the right (Vercel's deployments list ends \"Deployment retention is enabled. Learn more\" with *View recently deleted*); it is the one place a table says a sentence. Colour is neutral: headings and cells in the body grey, no hue, except a status badge or a tone the cell itself carries. “When the underlying list is empty (filter cleared, never created), render `Empty State` outside the table rather than an empty `<Table.Body>`.” (https://vercel.com/geist/table) “After an async filter change, wrap the region in `aria-live=\"polite\"` so screen readers announce the new state.” (https://vercel.com/geist/empty-state) Ours: empty sits outside the body, in a polite live region that stays in place so a filter that empties the table is announced. “Sortable column headers are buttons. The visible label stays Title Case; the sort-direction arrow is decorative and the button announces the next sort state to assistive tech.” (https://vercel.com/geist/table) Ours: the order has one owner, the app's `sorting`, which the URL holds, so no heading is a button and every page of a paged list follows one order. “Apply `tabular-nums` (or Geist Mono) to numeric columns so digits align across rows for comparison.” (https://vercel.com/geist/table) Ours: a numeric column trails in tabular figures.",
|
|
1036
|
+
behaviour: "Every column has a `header`; a column without one does not compile. The headings are always visible, medium weight in the cells' body grey, 48 px high, with 12 px of room under the labels and then the rule, so the first row starts at the rule like every other; rows are 40 px. Each column is as wide as its definition's `size`, in pixels, and the columns without one share the rest, so a table gives a size to every column but the one that takes the spare width; a value too long for its column ends in an ellipsis, whole in its title (a record's name carries its own), unless the column `wraps`; a column marked `identifier` holds ids or paths and is cut in the middle instead. The last column trails unless it `wraps` or is `centered`; a `centered` column's heading and values sit in the middle of it. Records are divided by a 1 px rule, none after the last. The first and last columns stand in from the card's edges by the card's spacing, so the first lines up with the title. Records of several kinds stand in one table under `group` headings (Vercel's Usage page: *Delivery network*, *Functions*): a heading row that spans the columns, in ink, medium text, 36 px high with the same rule under it, one per group in the order the groups first appear, never a second table; a heading is the group's name and carries no figure of its own. A row that opens a record takes `accent` on hover, and any row on focus within and while its menu is open; a row that opens nothing never reacts to hover. A selected row takes `muted`; headers and footers never highlight and carry no fill. A row never scrolls sideways and never gives a column without a size less than 160 px: on a card narrower than its columns (the sized ones and 160 px for each without a size, however wide that is; columns no card holds lay out this way on every card) the row keeps its name and its `primaryColumns`, and every other column leaves it, its value joining the one muted line under the name, joined by a middle dot (a `Tag` reads as its text there); entity facts wrap below the name so every value stays readable, while other rows end in an ellipsis unless a column `wraps`, or `dropped` when its `compact` says so, or beside an entity row's name, which ends in an ellipsis before it, when it says `name`, as Vercel's lists read on a phone: no labels, no second line; an `optional` column's empty value is left out of the line. A table whose every column is in `primaryColumns`, a settings matrix, lays out by its content there instead, so the name wraps beside the columns. A document's table, such as a legal page's, is read whole instead: its columns take the `wraps` option, so their words wrap and the row grows, and it keeps its header row; in the compact layout every cell but the identity wraps between words. A bounded page's paging stands in the card's footer strip at its trailing edge, opposite `footer`, which stands at the leading edge: its `status` (\"Page 2 of 7\") before Previous and Next, which are the product's router links (`previousLink`, `nextLink`) when each page is its own address, and buttons otherwise; the one that leads nowhere stays, disabled. A note about the whole table is `footerNote`, in a strip of its own under that one: one muted line, an optional *Learn more* after it at the left and one secondary action at the right (Vercel's deployments list ends \"Deployment retention is enabled. Learn more\" with *View recently deleted*); it is the one place a table says a sentence. Colour is neutral: headings and cells in the body grey, no hue, except a status badge or a tone the cell itself carries. “When the underlying list is empty (filter cleared, never created), render `Empty State` outside the table rather than an empty `<Table.Body>`.” (https://vercel.com/geist/table) “After an async filter change, wrap the region in `aria-live=\"polite\"` so screen readers announce the new state.” (https://vercel.com/geist/empty-state) Ours: empty sits outside the body, in a polite live region that stays in place so a filter that empties the table is announced. “Sortable column headers are buttons. The visible label stays Title Case; the sort-direction arrow is decorative and the button announces the next sort state to assistive tech.” (https://vercel.com/geist/table) Ours: the order has one owner, the app's `sorting`, which the URL holds, so no heading is a button and every page of a paged list follows one order. “Apply `tabular-nums` (or Geist Mono) to numeric columns so digits align across rows for comparison.” (https://vercel.com/geist/table) Ours: a numeric column trails in tabular figures.",
|
|
1037
1037
|
words: '“Column headers (`<Table.Head>`) are Title Case nouns or noun phrases: `Last Used`, `Requests (7d)`, `Created`, `Status`. Never sentences.” (https://vercel.com/geist/table) “Render `—` in cells where a value is unknown or not applicable. Don’t substitute `N/A`, `null`, or an empty string.” (https://vercel.com/geist/table) “Use the canonical short relative-time form in cells (`2m ago`, `5h ago`); switch to `Mar 14, 2026` past 7 days. See `Relative Time Card`.” (https://vercel.com/geist/table) “Pagination labels are `Previous` and `Next`. Page-count copy reads `Page 2 of 7` or `21–40 of 142` with an en-dash inside the range.” (https://vercel.com/geist/table) Ours: headings are sentence case nouns with their unit, "Cost (€)", "Tokens", where Geist writes Title Case. The words of a time and of Previous and Next are the product\'s catalogue, in both languages. The footer is a count or the paging; totals and paging each stand in a footer zone of their own, the paging at the trailing edge; the summary row is a labelled total. Italian headings run a third longer and never wrap.',
|
|
1038
1038
|
access: 'A native table named by `tableLabel`, which is required; `th scope="col"`; the record\'s name is the row\'s one link. A sorted column\'s heading carries `aria-sort`. Ours: a missing value is a hidden "—" with screen-reader text, never blank.',
|
|
1039
1039
|
},
|
package/dist/standalone/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export const agentOrbScript = "\"use strict\";(()=>{function et(t,o,e){return t+(o-t)*e}function Dt(t){return t-Math.floor(t)}function ot(t,o){let e=Math.floor(t),s=Math.floor(o),n=t-e,r=o-s;n=n*n*(3-2*n),r=r*r*(3-2*r);let a=W(e,s),p=W(e+1,s),d=W(e,s+1),m=W(e+1,s+1);return a+(p-a)*n+(d-a)*r+(a-p-d+m)*n*r}function W(t,o){let e=Math.sin(t*12.9898+o*78.233)*43758.5453;return e-Math.floor(e)}function st(t,o){let e=Math.PI*(3-Math.sqrt(5)),s=1-2*(t+.5)/o,n=Math.sqrt(1-s*s),r=t*e;return[n*Math.cos(r),s,n*Math.sin(r)]}function Xt(t,o){return Math.atan2(Math.sin(t-o),Math.cos(t-o))}function q(t,o,e,s,n){let r=Math.sin(o),a=Math.cos(o),p=Math.sin(t),d=Math.cos(t);return(m,f,h)=>{let c=m*d+h*p,u=-m*p+h*d,M=f*a-u*r,x=f*r+u*a;return[e+c*n,s-M*n,x]}}function Pt(t,o,e,s){if(!s){let r=Math.round((e?1-t:t)*255);return`rgba(${r},${r},${r},${o})`}let n=r=>Math.round(e?r*(1-t):r+(255-r)*t);return`rgba(${n(s.r)},${n(s.g)},${n(s.b)},${o})`}function Et(t,o,e,s=.3,n){for(let r of o){let a=r.a??1,p=Math.min(1,Math.max(0,r.white));t.fillStyle=Pt(p,a,e,n),t.beginPath(),t.arc(r.x,r.y,r.r,0,Math.PI*2),t.fill()}}function kt(t,o,e,s){for(let n of o){let r=n.a??1,a=Math.min(1,Math.max(0,n.white));t.strokeStyle=Pt(a,r,e,s),t.lineWidth=n.w,t.beginPath(),t.moveTo(n.x1,n.y1),t.lineTo(n.x2,n.y2),t.stroke()}}function j(t,o,e=.3){let s=[];for(let n of t)(n.a??1)<.02||(n.r=Math.max(e,n.r),s.push(n));return s.sort((n,r)=>n.z-r.z),{dots:s,lines:o.filter(n=>(n.a??1)>=.02)}}function Tt(t,o,e,s){o.lines.length&&kt(t,o.lines,e,s),Et(t,o.dots,e,.3,s)}function K(t,o){return(t/300)**o}var te=[[\"latRings\",\"lonDensity\"],[\"rings\",\"lonDensity\"],[\"lanes\",\"segs\"]],ee=[\"orbitN\",\"ghostN\",\"nodeN\",\"strandN\",\"signals\"],oe=[\"iconD\"],ne=[\"rBase\",\"rDepth\",\"rActive\",\"rDot\",\"ghostR\",\"partR\",\"partRDepth\",\"nodeR\",\"nodeRDepth\"];function re(t,o){let e={...t},s=new Set,n=Math.sqrt(o);for(let[r,a]of te){let p=e[r],d=e[a];p!=null&&d!=null&&!s.has(r)&&!s.has(a)&&(e[r]=Math.max(2,Math.round(p*n)),e[a]=Math.max(2,Math.round(d*n)),s.add(r),s.add(a))}for(let r of ee){let a=e[r];a!=null&&a!==0&&!s.has(r)&&(e[r]=Math.max(1,Math.round(a*o)))}for(let r of oe){let a=e[r];a!=null&&(e[r]=Math.max(.02,a*o))}return e}function se(t,o){let e={...t};for(let s of ne){let n=e[s];n!=null&&(e[s]=n*o)}return e.rSizeMul=(e.rSizeMul??1)*o,e}var ae={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}},ie=(t,o,e)=>{let s=t/2,n=t/2,r=t/2*.76,a=q(o*.4,.3,s,n,1),p=K(t,e.rsPow??.6),d=[],m=e.ghostN??150;for(let c=0;c<m;c++){let u=st(c,m),[M,x,i]=a(u[0]*r,u[1]*r,u[2]*r),y=(i/r+1)/2;d.push({x:M,y:x,z:i,r:.8*p,white:.78,a:.1+.22*y})}let f=e.strandN??52,h=e.turns??3;for(let c=0;c<3;c++){let u=c/3*2*Math.PI;for(let M=0;M<f;M++){let x=(Dt(M/f+o*.045)*2-1)*.96,i=Math.sqrt(Math.max(0,1-x*x)),y=Math.min(1,(1-Math.abs(x))/.1),v=x*Math.PI*h+u,b=1+.075*Math.sin(x*Math.PI*h*2+u*2+o*.8),O=i*r*b,[w,A,g]=a(Math.cos(v)*O,x*r*b,Math.sin(v)*O),l=(g/r+1)/2;d.push({x:w,y:A,z:g,r:((e.rBase??1.2)+(e.rDepth??1.8)*l)*p,white:.55-.45*l,a:y*(.45+.55*l)})}}return j(d,[],e.rMin)};function ce(t,o,e,s){let n=2*o*e+s,r=t%n,a=new Array(o).fill(0),p=-1;if(r<2*o*e){let d=Math.floor(r/e),m=(r-d*e)/e,h=1-(1-Math.min(1,m/.7))**3;if(d<o){for(let c=0;c<d;c++)a[c]=1;a[d]=h,p=d}else{let c=2*o-1-d;for(let u=0;u<c;u++)a[u]=1;a[c]=1-h,p=c}}return{amount:a,active:p}}function le(t,o,e){let[s,n,r]=t,a=!1;for(let p=0;p<o.length;p++){if(e.amount[p]<=0)continue;let d=o[p],m=d.axis===0?s:d.axis===1?n:r;if(m<d.lo||m>=d.hi)continue;p===e.active&&(a=!0);let f=d.ang*e.amount[p],h=Math.cos(f),c=Math.sin(f);if(d.axis===0){let u=n*h-r*c;r=n*c+r*h,n=u}else if(d.axis===1){let u=s*h+r*c;r=-s*c+r*h,s=u}else{let u=s*h-n*c;n=s*c+n*h,s=u}}return[s,n,r,a]}function pe(t){let o=[];for(let e=0;e<t;e++){let s=Math.min(2,Math.floor(W(e,2.3)*3)),n=-1+.5*Math.min(3,Math.floor(W(e,5.9)*4)),r=W(e,7.7)<.5?1:-1;o.push({axis:s,lo:n,hi:n+.5,ang:r*Math.PI/2})}return o}var fe=(t,o,e)=>{let n=t/2,r=t/2,a=t/2*.82,p=.4+.06*Math.sin(o*.35),d=q(o*.5,p,n,r,a),m=o*(.5+(1.7-.5)*(e.scanMul??1)),f=K(t,e.rsPow??.6),h=e.dimBase??1,c=[],u=e.latRings??17,M=e.lonDensity??44;for(let x=0;x<=u;x++){let i=-Math.PI/2+x/u*Math.PI,y=Math.cos(i),v=Math.sin(i),b=Math.max(1,Math.round(Math.abs(y)*M));for(let O=0;O<b;O++){let w=O/b*2*Math.PI,[A,g,l]=d(y*Math.cos(w),v,y*Math.sin(w)),S=(l+1)/2,D=Xt(w+o*.5,m),E=Math.exp(-(D*D)/.18)*Math.max(0,l);c.push({x:A,y:g,z:l,r:((e.rBase??.6)+(e.rDepth??1.7)*S+(e.rBoost??1)*E)*f,white:(e.inkFar??.62)-(e.inkSpan??.54)*S,a:h+(1-h)*Math.min(1,E)})}}return j(c,[],e.rMin)},ue=(t,o,e)=>{let s=t/2,n=t/2,r=t/2*.82,a=q(o*.55,.35+.1*Math.sin(o*.9),s,n,r),p=K(t,e.rsPow??.6),d=e.moveCount??14,m=pe(d),f=ce(o,d,.42,1.2),h=[],c=e.latRings??15,u=e.lonDensity??40;for(let M=0;M<=c;M++){let x=-Math.PI/2+M/c*Math.PI,i=Math.cos(x),y=Math.sin(x),v=Math.max(1,Math.round(Math.abs(i)*u));for(let b=0;b<v;b++){let O=b/v*2*Math.PI,[w,A,g,l]=le([i*Math.cos(O),y,i*Math.sin(O)],m,f),[S,D,E]=a(w,A,g),k=(E+1)/2;h.push({x:S,y:D,z:E,r:((e.rBase??.6)+(e.rDepth??1.7)*k+(l?e.rActive??.3:0))*p,white:(e.inkFar??.62)-(e.inkSpan??.54)*k-(l?.14:0)})}}return j(h,[],e.rMin)},me=(t,o,e)=>{let s=t/2,n=t/2,r=t/2*.874,a=q(o*.18,.38,s,n,1),p=K(t,e.rsPow??.6),d=[],m=e.rings??15,f=e.lonDensity??40;for(let h=0;h<=m;h++){let c=-Math.PI/2+h/m*Math.PI,u=Math.cos(c),M=Math.sin(c),x=.62*Math.sin(o*2.1-h*.52)+.38*Math.sin(o*1.27+h*.83),i=r*(.88+.105*x),y=Math.max(1,Math.round(Math.abs(u)*f));for(let v=0;v<y;v++){let b=v/y*2*Math.PI,[O,w,A]=a(u*Math.cos(b)*i,M*i,u*Math.sin(b)*i),g=(A/r+1)/2,l=Math.max(0,x);d.push({x:O,y:w,z:A,r:((e.rBase??.6)+(e.rDepth??1.7)*g)*(1+.4*l)*p,white:.66-.56*g-.1*l})}}return j(d,[],e.rMin)};function de(t){return t*t*(3-2*t)}function Rt(t){let o=t.length,e=[],s=0;for(let n=0;n<o;n++){let r=t[n],a=t[(n+1)%o],p=Math.hypot(a[0]-r[0],a[1]-r[1]);e.push(p),s+=p}return n=>{let r=n*s,a=0;for(;r>e[a]&&a<o-1;)r-=e[a],a++;let p=t[a],d=t[(a+1)%o],m=e[a]?Math.min(1,r/e[a]):0;return[p[0]+(d[0]-p[0])*m,p[1]+(d[1]-p[1])*m]}}var he=t=>{let o=-Math.PI/2+t*2*Math.PI;return[Math.cos(o)*.24,Math.sin(o)*.24]},ge=Rt([[0,-.26],[.24,.16],[-.24,.16]]),Me=Rt([[0,-.2],[.2,-.2],[.2,.2],[-.2,.2],[-.2,-.2]]),nt=[he,ge,Me];function be(t){return Math.max(6,Math.round(34*t))}var rt=1.4,Ct=.9,Z=rt+Ct,xe=(t,o,e)=>{let s=nt.length,n=o%(Z*s),r=e.shape!=null&&e.shape>=0&&e.shape<s?Math.floor(e.shape):-1,a=r>=0?r:Math.floor(n/Z),p=r>=0?o%Z:n-a*Z,d=r>=0?0:p>rt?de((p-rt)/Ct):0,m=e.spread??1,f=nt[a],h=r>=0?f:nt[(a+1)%s],c=160,u=[];for(let g=0;g<c;g++){let l=g/c,S=f(l),D=h(l);u.push([(S[0]+(D[0]-S[0])*d)*m,(S[1]+(D[1]-S[1])*d)*m])}let M=[],x=0;for(let g=0;g<c;g++){let l=u[g],S=u[(g+1)%c],D=Math.hypot(S[0]-l[0],S[1]-l[1]);M.push(D),x+=D}let i=be(e.iconD??1),y=(e.rDot??.021)*1.35*m,v=1+.02*Math.sin(p*3.1),b=[],O=t/2,w=0,A=0;for(let g=0;g<i;g++){let l=g/i*x;for(;A+M[w]<l&&w<c-1;)A+=M[w],w++;let S=u[w],D=u[(w+1)%c],E=M[w]?Math.min(1,(l-A)/M[w]):0,k=(S[0]+(D[0]-S[0])*E)*v,T=(S[1]+(D[1]-S[1])*E)*v;b.push({x:O+k*t,y:O+T*t,z:0,r:Math.max(.35,y*t),white:.1})}return j(b,[],e.rMin)},ye=(t,o,e)=>{let s=t/2,n=t/2,r=t/2*.82,a=q(o*.12,.3,s,n,1),p=K(t,e.rsPow??.6),d=[],m=e.orbitN??12,f=e.ghostN??40,h=e.particles??3;for(let c=0;c<m;c++){let u=W(c,1.7),M=W(c,5.2),x=W(c,8.9),i=r*(.45+.52*u),y=u*2*Math.PI,v=Math.acos(2*M-1),b=Math.sin(v)*Math.cos(y),O=Math.cos(v),w=Math.sin(v)*Math.sin(y),A=-O,g=b,l=0,S=Math.max(1e-6,Math.sqrt(A*A+g*g));A/=S,g/=S;let D=O*l-w*g,E=w*A-b*l,k=b*g-O*A,T=(.25+.55*x)*(x>.5?1:-1);for(let C=0;C<f;C++){let R=C/f*2*Math.PI,[I,B,L]=a((A*Math.cos(R)+D*Math.sin(R))*i,(g*Math.cos(R)+E*Math.sin(R))*i,(l*Math.cos(R)+k*Math.sin(R))*i),N=(L/i+1)/2;d.push({x:I,y:B,z:L,r:(e.ghostR??.9)*p,white:.72,a:(e.ghostA??.5)*(.4+.6*N)})}for(let C=0;C<h;C++){let R=o*T+C/h*2*Math.PI+M*6,[I,B,L]=a((A*Math.cos(R)+D*Math.sin(R))*i,(g*Math.cos(R)+E*Math.sin(R))*i,(l*Math.cos(R)+k*Math.sin(R))*i),N=(L/i+1)/2;d.push({x:I,y:B,z:L,r:((e.partR??1.2)+(e.partRDepth??1.6)*N)*p,white:.3-.22*N})}}return j(d,[],e.rMin)},At=(t,o,e)=>{let s=t/2,n=t/2,r=t/2*.78,a=e.spin??1,p=.3,d=q(o*.1*a,p,s,n,1),m=K(t,e.rsPow??.6),f=[],h=e.ghostN??150;for(let k=0;k<h;k++){let T=st(k,h),[C,R,I]=d(T[0]*r,T[1]*r,T[2]*r),B=(I/r+1)/2;f.push({x:C,y:R,z:I,r:.8*m,white:.78,a:.1+.22*B})}let c=o*.24*a,u=e.faceOn?-p:.55+.3*Math.sin(o*.18)*a,M=Math.cos(c),x=0,i=Math.sin(c),y=-i*Math.sin(u),v=Math.cos(u),b=M*Math.sin(u),O=x*b-i*v,w=i*y-M*b,A=M*v-x*y,g=.23*(e.wobMul??1),l=e.faceOn?r/(1+.85*g):r,S=e.lanes??5,D=e.segs??88,E=Math.max(1,Math.round(S*(e.bandMul??1)));for(let k=0;k<E;k++){let T=(k-(E-1)/2)*.075,C=Math.abs(k-(E-1)/2)/Math.max(1,(E-1)/2);for(let R=0;R<D;R++){let I=R/D*2*Math.PI,B=(.16*Math.sin(I*3-o*1.7+k*.22)+.07*Math.sin(I*5+o*1.1))*(e.wobMul??1),L=e.faceOn?1+B:1,N=e.faceOn?T:T+B,_=M*Math.cos(I)+y*Math.sin(I)+O*N,P=x*Math.cos(I)+v*Math.sin(I)+w*N,V=i*Math.cos(I)+b*Math.sin(I)+A*N,F=Math.sqrt(_*_+P*P+V*V),G=l*L,[Jt,Qt,wt]=d(_/F*G,P/F*G,V/F*G),tt=(wt/r+1)/2;f.push({x:Jt,y:Qt,z:wt,r:((e.rBase??1.1)+(e.rDepth??1.7)*tt)*(1-.25*C)*m,white:.52-.44*tt+.18*C,a:.4+.6*tt})}}return j(f,[],e.rMin)},ve=(t,o,e)=>{let s=t/2,n=t/2,r=t/2*.8*(e.spread??1),a=q(o*.12,.32,s,n,r),p=K(t,e.rsPow??.6),d=e.nodeN??30,m=e.thr??.72,f=e.nodeR??1.4,h=e.nodeRDepth??1.8,c=[];for(let i=0;i<d;i++){let y=st(i,d),v=y[0]+.3*(ot(i*.31+9,o*.24)-.5)*2,b=y[1]+.3*(ot(i*.53+27,o*.21)-.5)*2,O=y[2]+.3*(ot(i*.77+55,o*.27)-.5)*2,w=Math.sqrt(v*v+b*b+O*O);c.push([v/w,b/w,O/w])}let u=[],M=[];for(let i=0;i<d;i++)for(let y=i+1;y<d;y++){let v=c[i][0]-c[y][0],b=c[i][1]-c[y][1],O=c[i][2]-c[y][2],w=Math.sqrt(v*v+b*b+O*O);if(w>=m)continue;let[A,g,l]=a(c[i][0],c[i][1],c[i][2]),[S,D,E]=a(c[y][0],c[y][1],c[y][2]),k=((l+E)/2+1)/2;u.push({x1:A,y1:g,x2:S,y2:D,white:.42,a:(1-w/m)*(.3+.55*k),w:Math.max(.6,(e.lineW??.8)*p)})}for(let i=0;i<d;i++){let[y,v,b]=a(c[i][0],c[i][1],c[i][2]),O=(b+1)/2,w=1+.25*Math.sin(o*1.4+i*2.7);M.push({x:y,y:v,z:b,r:(f+h*O)*w*p,white:.55-.45*O})}let x=e.signals??5;for(let i=0;i<x;i++){let y=Math.floor(o*.55+i*7.31),v=Math.floor(W(y,i*3.1+1.7)*d),b=Math.floor(W(y,i*5.7+4.2)*d);if(v===b)continue;let O=Dt(o*.55+i*7.31),w=et(c[v][0],c[b][0],O),A=et(c[v][1],c[b][1],O),g=et(c[v][2],c[b][2],O),l=Math.max(1e-6,Math.sqrt(w*w+A*A+g*g)),[S,D,E]=a(w/l,A/l,g/l),k=(E+1)/2;M.push({x:S,y:D,z:E,r:(f*1.5+h*k)*p,white:.05,a:.5+.5*k})}return j(M,u,e.rMin)},U={orbits:ye,globe:fe,rubik:ue,wave:me,web:ve,braid:ie,ribbon:At,ring:At,morph:xe},Se=Object.fromEntries(Object.entries(U).map(([t,o])=>[t,(e,s,n,r,a)=>Tt(e,o(s,n,a),r)])),Vt={working:\"orbits\",searching:\"globe\",solving:\"rubik\",listening:\"wave\",connecting:\"web\",weaving:\"braid\",composing:\"ribbon\",breathing:\"ring\",shaping:\"morph\"},we={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 at(t,o){let e=`${t}-${o}`,s=Ot.get(e);if(s)return s;let n=Vt[t],r=we[n][o],a={...ae[n]};r.count!==1&&(a=re(a,r.count)),r.size!==1&&(a=se(a,r.size)),r.extra&&(a={...a,...r.extra});let p={mode:n,speed:r.speed,opts:a};return Ot.set(e,p),p}var it=(t,o,e)=>e>o?o:e<t?t:e;var ct=()=>{};var H=t=>t*1e3,$=t=>t/1e3;var It=(t,o,e=10)=>{let s=\"\",n=Math.max(Math.round(o/e),2);for(let r=0;r<n;r++)s+=Math.round(t(r/(n-1))*1e4)/1e4+\", \";return`linear(${s.substring(0,s.length-2)})`};function J(t,o=50,e=2e4,s){let n=0,r=t.next(n);for(s?.push(r.value);!r.done&&n<e;)n+=o,r=t.next(n),s?.push(r.value);return n>=e?1/0:n}function Ft(t,o=100,e){let{keyframes:s,velocity:n}=t,r=s&&s[s.length-1]-s[0],a=e({...t,velocity:n&&r?n*o/r:n,keyframes:[0,o]}),p=Math.min(J(a),2e4);return{type:\"keyframes\",ease:d=>a.next(p*d).value/o,duration:$(p)}}var z={stiffness:100,damping:10,mass:1,duration:800,bounce:.3,visualDuration:.3,restSpeed:{granular:.01,default:2},restDelta:{granular:.005,default:.5},minDuration:.01,maxDuration:10,minDamping:.05},zt=t=>t<0?1/Math.max(1+t,z.minDamping):Math.max(1-t,z.minDamping);function Nt(t,o){if(!(t>1))return 1;let e=Math.sqrt(t*t-1),s=t-e,n=t+e,r=2*e*Math.exp(-o)*(1+o);return Bt(a=>n*Math.exp(-s*a)-s*Math.exp(-n*a)-r,a=>Math.exp(-n*a)-Math.exp(-s*a),o)/o}function ut(t,o){return t*Math.sqrt(1-o*o)}var Ae=12;function Bt(t,o,e){let s=e;for(let n=1;n<Ae;n++)s=s-t(s)/o(s);return s}var pt=.001;function Oe({duration:t=z.duration,bounce:o=z.bounce}){let e,s;ct(t<=H(z.maxDuration),\"Spring duration must be 10 seconds or less\",\"spring-duration-limit\");let n=zt(o);t=it(z.minDuration,z.maxDuration,$(t)),n<1?(e=m=>{let f=m*n,h=f*t,c=ut(m,n),u=Math.exp(-h);return pt-f/c*u},s=m=>{let h=m*n*t,c=n*n*m*m*t,u=Math.exp(-h),M=ut(m*m,n);return(-e(m)+pt>0?-1:1)*-c*u/M}):(e=m=>{let f=Math.exp(-m*t),h=m*t+1;return-pt+f*h},s=m=>{let f=Math.exp(-m*t),h=-m*(t*t);return f*h});let r=5/t,a=Bt(e,s,r),p=a*Nt(n,a*t),d=p*p;return{stiffness:d,damping:n*2*Math.sqrt(d),duration:H(t)}}var mt=(t,o)=>(o?t>=0:t>0)&&t<1/0;function ft(t,o){if(mt(t,o))return t}function De(t){let o=ft(t.stiffness),e=ft(t.damping,!0),s=ft(t.mass),n={...t,stiffness:o??z.stiffness,damping:e??z.damping,mass:s??z.mass,isResolvedFromDuration:!1,isTimeDefined:(o??e??s)===void 0&&(t.duration!==void 0||t.bounce!==void 0)};if(n.isTimeDefined){if(t.visualDuration){let r=zt(t.bounce||0),a=2*Math.PI/(t.visualDuration*1.2)*Nt(r,2*Math.PI/1.2);n.stiffness=a*a,n.damping=2*r*Math.sqrt(n.stiffness)}else Object.assign(n,Oe(n)),n.isResolvedFromDuration=!0;(!mt(n.stiffness)||!mt(n.damping,!0))&&(n.stiffness=z.stiffness,n.damping=z.damping)}return n}function Y(t=z.visualDuration,o=z.bounce){let e=typeof t!=\"object\"?{visualDuration:t,keyframes:[0,1],bounce:o}:t,s=e.keyframes[0],n=e.keyframes[e.keyframes.length-1],r={done:!1,value:s},{stiffness:a,damping:p,mass:d,duration:m,isResolvedFromDuration:f,isTimeDefined:h}=De({...e}),c=g=>h?0:-$(g),u=p/(2*Math.sqrt(a*d)),M=$(Math.sqrt(a/d)),x=u*M,i={target:n,delta:n-s,velocity:c(e.velocity||0)||0,restSpeed:0,restDelta:0},y=()=>{let g=Math.abs(i.delta)<5;i.restSpeed=e.restSpeed||(g?z.restSpeed.granular:z.restSpeed.default),i.restDelta=e.restDelta||(g?z.restDelta.granular:z.restDelta.default)};y();let v,b,O;if(u<1){let g=ut(M,u),l={A:0,sinC:0,cosC:0,t:-1,env:0,sin:0,cos:0};O=()=>{l.A=(i.velocity+x*i.delta)/g,l.sinC=x*l.A+i.delta*g,l.cosC=x*i.delta-l.A*g};let S=D=>{D!==l.t&&(l.t=D,l.env=Math.exp(-x*D),l.sin=Math.sin(g*D),l.cos=Math.cos(g*D))};v=D=>(S(D),i.target-l.env*(l.A*l.sin+i.delta*l.cos)),b=D=>(S(D),l.env*(l.sinC*l.sin+l.cosC*l.cos))}else if(u===1){v=l=>i.target-Math.exp(-M*l)*(i.delta+(i.velocity+M*i.delta)*l);let g={C:0};O=()=>{g.C=i.velocity+M*i.delta},b=l=>Math.exp(-M*l)*(M*g.C*l-i.velocity)}else{let g=M*Math.sqrt(u*u-1),l=x-g,S=x+g,D=h?1/0:300/g,E=(T,C)=>Math.exp(C>D?-T*D-x*(C-D):-T*C),k={S:0,F:0};O=()=>{let T=(i.velocity+x*i.delta)/g;k.S=(i.delta+T)/2,k.F=(i.delta-T)/2},v=T=>i.target-k.S*E(l,T)-k.F*E(S,T),b=T=>l*k.S*E(l,T)+S*k.F*E(S,T)}O();let w=f&&m||null,A={calculatedDuration:w,retarget:(g,l)=>{i.target=g[g.length-1],i.delta=i.target-g[0],i.velocity=c(l),e.restSpeed&&e.restDelta||y(),A.calculatedDuration=w,r.done=!1,O()},velocity:g=>H(b(g)),next:g=>{let l=v(g);if(f)r.done=g>=m;else{let S=H(b(g));r.done=Math.abs(S)<=i.restSpeed&&Math.abs(i.target-l)<=i.restDelta}return r.value=r.done?i.target:l,r},toString:()=>{let g=Math.min(J(A),2e4),l=It(S=>A.next(g*S).value,g,30);return g+\"ms \"+l},toTransition:()=>{}};return A}Y.applyToOptions=t=>{let o=Ft(t,100,Y);return t.ease=o.ease,t.duration=H(o.duration),t.type=\"keyframes\",t};var Pe=[\"idle\",\"working\",\"waiting\",\"blocked\",\"thinking\",\"done\"],Lt=t=>Pe.some(o=>o===t),Ee={ribbon:{speed:.55},nadia:{speed:.55},sofia:{speed:.9},lattice:{speed:.28},orbit:{speed:.7},globe:{speed:.35},network:{speed:.55},braid:{speed:.65},morph:{speed:.9}};function ht(t){return Ee[t].speed}function Gt(t,o,e=0,s=Mt){return{idle:.864,working:1,thinking:.55,waiting:0,blocked:0,done:e>=s.doneDuration?.72:.65}[t]*ht(o)}var gt={resting:15,busy:30},ke=1.6;function Wt(t,o){return t!==\"thinking\"&&t!==\"working\"?1:1-.55*((1-Math.cos(o*Math.PI*2/ke))/2)}function X(t){let o=(p,d)=>{let m=t?.getPropertyValue(`--nc-duration-${p}`).trim()??\"\";return m?Number.parseFloat(m)*(m.endsWith(\"ms\")?.001:1):d},e=o(\"wait\",1.6),s=o(\"confirm\",.18),n=o(\"transition\",.24),r=p=>Math.round(e*p*1e3)/1e3,a=Y({keyframes:[0,1],duration:n*2e3,bounce:.1});return{wait:e,confirm:s,transition:n,doneDuration:r(3),blockedDuration:r(1.25),gestureAge:p=>p*n*2/e,settle:(p,d=0)=>p<d?0:a.next((p-d)*1e3).value}}var Mt=X(),Q=t=>Math.min(1,Math.max(0,t)),dt=t=>{let o=Q(t);return o*o*(3-2*o)};function jt(t,o,e=Mt,s=!1){let n=.82,r=.82,a=0,p=0,d=0;if(t===\"idle\"){let m=Math.sin((s?.6:o)*Math.PI*2/(e.wait*4));n+=m*.01,r+=m*.01,a=-m*.004}else if(!s&&t===\"waiting\"){let m=e.gestureAge(o),f=Math.sin(o*Math.PI*2/(e.wait*3)),h=Math.sin(Q(m/e.confirm)*Math.PI),c=e.settle(m,e.confirm*.55),u=1-h*.018+f*.006;n*=u,r*=u,a=-c*.018,d=-c*4.5*Math.PI/180}else if(!s&&t===\"blocked\"){let m=e.gestureAge(o),f=e.confirm*.85,h=dt(m/f)*(1-e.settle(m,f));n*=1-h*.018,r*=1+h*.012,p=-h*.034,a=h*.014,d=-h*4*Math.PI/180}else if(!s&&t===\"done\"){let m=o*1.3/(e.wait*2.25);if(m<.18){let f=Math.sin(Math.PI*m/.18);n+=.03*f,r-=.04*f,a=.012*f}else if(m<1.3){let f=(m-.18)/1.12;a=-.07*Math.sin(Math.PI*f),n+=.025*Math.sin(Math.PI*f),r+=.035*Math.sin(Math.PI*f),d=Math.sin(f*Math.PI*2)*.07}}return{sx:n,sy:r,x:p,y:a,rotation:d}}function Te(t,o,e,s,n,r,a){let p=a.gestureAge(s),d=n?1:dt((p-a.confirm*.35)/a.confirm),m=n?1:a.settle(p,a.confirm*.35),f=Math.max(7,Math.min(36,e*.26));if(t.save(),t.fillStyle=r,t.strokeStyle=r,t.globalAlpha=d*.95,t.translate(e/2,e/2),o===\"waiting\"){let h=n?0:a.settle(p,a.confirm*.55),c=n?0:Math.sin(s*Math.PI*2/(a.wait*3));t.translate(0,(1-m)*-.12*f),t.rotate(-h*2*Math.PI/180);let u=.94+m*.06;t.scale(u,u),t.scale(f/24,f/24);for(let[M,x]of[14,5].entries()){let i=n?1:a.settle(p,a.confirm*(M===0?.65:.2)),y=M===0?1:-1;t.save(),t.globalAlpha=d*.95*Q(i)*(n?1:.96+c*.04),t.translate(x-9.5+y*(1-i)*1.45*5,(1-i)*-.24*18),t.rotate(y*(1-i)*14*Math.PI/180),t.scale(1,1+(1-i)*.12),t.beginPath(),t.roundRect(-2.5,-9,5,18,1),t.fill(),t.restore()}}else{t.translate(0,(1-m)*-.1*f),t.rotate((1-m)*-12*Math.PI/180);let h=1+(1-m)*.18;t.scale(h,h),t.scale(f/24,f/24),t.lineWidth=Math.max(1.6,24/f),t.lineCap=\"round\",t.beginPath(),t.arc(0,0,10,0,Math.PI*2),t.stroke();let c=n?1:dt((p-a.confirm*.8)/a.confirm);if(t.beginPath(),t.moveTo(-7.071,-7.071),t.lineTo(-7.071+14.141*c,-7.071+14.142*c),t.stroke(),!n&&e>=40){let u=Q((p-a.confirm*.85)/a.transition);t.globalAlpha*=Math.sin(u*Math.PI)*.65,t.lineWidth=1.4*24/f;for(let M of[-1,1]){t.beginPath();let x=M*(14.52+u*5.472),i=M*(10.34+u*1.68);t.moveTo(x-1.612,i-1.612),t.lineTo(x+1.612,i+1.612),t.stroke()}}}t.restore()}function bt(t,o,e,s,n,r,a,p=1,d=Mt,m=r[0]??\"currentColor\"){if(o===\"waiting\"||o===\"blocked\"){a===\"front\"&&Te(t,o,e,s,n,m,d);return}if(o!==\"working\"&&o!==\"thinking\"&&o!==\"done\")return;let f=s*(o===\"done\"?3.1/d.doneDuration:o===\"working\"?7.2/(d.wait*2):3.6/(d.wait*1.5));if(t.save(),o===\"thinking\"){if(a===\"front\")for(let h=0;h<3;h++){let c=n?.5:(1+Math.cos(f*Math.PI*2/3.6-h*Math.PI*2/3))/2,u=r[h%r.length];u!==void 0&&(t.fillStyle=u),t.globalAlpha=(.65+c*.35)*p,t.beginPath(),t.arc(e*(.5+(h-1)*.09),e*.08,Math.max(1,e*(.022+c*.005)),0,Math.PI*2),t.fill()}}else if(o===\"working\"||!n&&f<3.1){let h=o===\"done\"?3:1;for(let c=0;c<h;c++){let u=o===\"done\"?(f-c*.38)/2.2:0;if(u<0||u>1)continue;let M=o===\"done\"?Math.sin(u*Math.PI):1,x=(n?.8:f*Math.PI*2/7.2)+c*2.1,i=Math.PI*1.4,y=-.38+c*.4,v=e*(.44+u*.03),b=e*(.19+u*.11),O=A=>{let g=Math.cos(A)*v,l=Math.sin(A)*b;return[e/2+g*Math.cos(y)-l*Math.sin(y),e/2+g*Math.sin(y)+l*Math.cos(y)]},w=t.createLinearGradient(e*.1,e*.7,e*.9,e*.3);r.forEach((A,g)=>w.addColorStop(g/Math.max(1,r.length-1),A)),t.strokeStyle=w,t.lineCap=\"butt\";for(let A=0;A<100;A++){let g=A/100,l=x-i+i*g,S=Math.sin(l)>=0;if(S!==(a===\"front\"))continue;let D=Math.sin(Math.PI*(.04+g*.92));t.globalAlpha=M*(S?.92:.55)*(.25+D*.75)*p,t.lineWidth=Math.max(.65,e*.027*D),t.beginPath(),t.moveTo(...O(l)),t.lineTo(...O(l+i/100)),t.stroke()}}}t.restore()}var qt={orbit:\"working\",globe:\"searching\",lattice:\"solving\",network:\"connecting\",braid:\"weaving\",ribbon:\"composing\",morph:\"shaping\"},Kt=t=>Object.hasOwn(qt,t)||t===\"nadia\"||t===\"sofia\",Re=[20,24,32,40,64,96,160],Ht=t=>Re.some(o=>o===t),Ce={plain:{alpha:1,radius:1},\"over-picture\":{alpha:2.3,radius:1.9}},$t=[\"--nc-identity-azzurro\",\"--nc-identity-verde\",null,\"--nc-identity-rosso\"],Ut=[\"--nc-acqua-700\",\"--nc-viola-700\",\"--nc-warning\",\"--nc-rosso-700\"],vt={waiting:\"--nc-warning-deep\",blocked:\"--nc-error\"},_t=new Map,St=[\"--nc-identity-cobalto\",\"--nc-identity-verde\",\"--nc-identity-giallo\",\"--nc-identity-arancio\",\"--nc-identity-rosso\"],Ve={nadia:$t,sofia:St},Ie=[...Ut,...[...$t,...St].filter(t=>t!==null),...Object.values(vt),\"--nc-duration-wait\",\"--nc-duration-confirm\",\"--nc-duration-transition\"];function Fe(t,o){let e=1-2*(t+.5)/o,s=Math.sqrt(1-e*e),n=t*Math.PI*(3-Math.sqrt(5));return[s*Math.cos(n),e,s*Math.sin(n)]}function ze(t,o,e){let s=t/2,n=t/2*.78,r=e.spin??1,a=q(o*.1*r,.3,s,s,1),p=K(t,e.rsPow??.6),d=[],m=e.ghostN??150;for(let S=0;S<m;S++){let[D,E,k]=Fe(S,m),[T,C,R]=a(D*n,E*n,k*n);d.push({x:T,y:C,z:R,r:.8*p,white:.78,a:.1+.22*((R/n+1)/2)})}let f=o*.24*r,h=e.faceOn?-.3:.55+.3*Math.sin(o*.18)*r,[c,u,M]=[Math.cos(f),0,Math.sin(f)],[x,i,y]=[-M*Math.sin(h),Math.cos(h),c*Math.sin(h)],[v,b,O]=[u*y-M*i,M*x-c*y,c*i-u*x],w=e.wobMul??1,A=e.faceOn?n/(1+.85*.23*w):n,g=e.segs??88,l=Math.max(1,Math.round((e.lanes??5)*(e.bandMul??1)));for(let S=0;S<l;S++){let D=(S-(l-1)/2)*.075,E=Math.abs(S-(l-1)/2)/Math.max(1,(l-1)/2);for(let k=0;k<g;k++){let T=k/g*2*Math.PI,C=(.16*Math.sin(T*3-o*1.7+S*.22)+.07*Math.sin(T*5+o*1.1))*w,R=e.faceOn?1+C:1,I=e.faceOn?D:D+C,B=c*Math.cos(T)+x*Math.sin(T)+v*I,L=u*Math.cos(T)+i*Math.sin(T)+b*I,N=M*Math.cos(T)+y*Math.sin(T)+O*I,_=Math.sqrt(B*B+L*L+N*N),[P,V,F]=a(B/_*A*R,L/_*A*R,N/_*A*R),G=(F/n+1)/2;d.push({x:P,y:V,z:F,r:((e.rBase??1.1)+(e.rDepth??1.7)*G)*(1-.25*E)*p,white:.08+.1*E,a:.55+.45*G,stripe:Math.min(3,Math.floor(S/l*4))})}}return j(d,[],e.rMin)}function Ne(t,o){let e=t.dots;for(let[s,n]of e.entries())n.stripe=Math.floor(s/e.length*o);return t}function Be(t){return t===\"nadia\"?\"ribbon\":t===\"sofia\"?\"morph\":t}function Le(t){return t<=32?20:t<=48?32:64}function Yt(t,o,e,s){return e===\"ambient\"||t===\"done\"&&o>=s.doneDuration?\"idle\":t}function Ge(t,o){let{form:e,size:s,seconds:n,color:r,state:a,age:p,reduced:d,breath:m,celebrationColors:f,stripeColors:h}=o,c=Ce[o.presence],u=at(qt[Be(e)],Le(s)),M=e===\"nadia\"?ze(s,n,u.opts):e===\"sofia\"?Ne(U[u.mode](s,n,u.opts),St.length):U[u.mode](s,n,u.opts);t.clearRect(0,0,s,s);let x=a===\"done\"&&p>=o.timing.doneDuration,i=Yt(a,p,o.motion,o.timing),y=o.motion===\"ambient\"?0:x?p-o.timing.doneDuration:p,v=jt(i,y,o.timing,d),b=x?p-o.timing.doneDuration:p,O=i===\"waiting\"||i===\"blocked\"?o.statusColors[i]:r,w=(l,S)=>{let D=(l-s/2)*v.sx,E=(S-s/2)*v.sy;return[s/2+D*Math.cos(v.rotation)-E*Math.sin(v.rotation)+v.x*s,s/2+D*Math.sin(v.rotation)+E*Math.cos(v.rotation)+v.y*s]},A=m;o.motion===\"status\"&&bt(t,i,s,b,d,f,\"back\",m,o.timing,O),t.fillStyle=r,t.strokeStyle=r;for(let l of M.lines)t.globalAlpha=Math.min(1,Math.max(0,(1-l.white)*(l.a??1)*A*c.alpha)),t.lineWidth=l.w*c.radius,t.beginPath(),t.moveTo(...w(l.x1,l.y1)),t.lineTo(...w(l.x2,l.y2)),t.stroke();let g=M.dots;for(let l of g)t.fillStyle=l.stripe===void 0?r:h[l.stripe]??r,t.globalAlpha=Math.min(1,Math.max(0,(1-l.white)*(l.a??1)*A*c.alpha)),t.beginPath(),t.arc(...w(l.x,l.y),l.r*c.radius,0,Math.PI*2),t.fill();t.globalAlpha=1,o.motion===\"status\"&&bt(t,i,s,b,d,f,\"front\",m,o.timing,O)}function We(t){let o=new Map,e=window.matchMedia(\"(prefers-reduced-motion: reduce)\");function s(f){let h=u=>{for(let M=u;M;M=M.parentElement)if(f.has(M))return!0;return!1},c=[...o].flatMap(([u,M])=>h(u)?[M.readChange()]:[]);for(let u of c)u?.()}function n(){for(let f of o.values())f.play()}let r=typeof IntersectionObserver>\"u\"?void 0:new IntersectionObserver(f=>{for(let h of f)o.get(h.target)?.setVisible(h.isIntersecting)}),a=new MutationObserver(f=>{s(new Set(f.map(h=>h.target)))});a.observe(document.documentElement,{attributes:!0,attributeFilter:[\"class\",\"style\",\"data-theme\"],subtree:!0});let p=new ResizeObserver(f=>{let h=f.map(c=>o.get(c.target)?.readResize());for(let c of h)c?.()});function d(f){f.propertyName===\"color\"&&f.target instanceof Node&&s(new Set([f.target]))}function m(){s(new Set([document.documentElement]))}return document.addEventListener(\"transitionend\",d,!0),e.addEventListener(\"change\",n),document.addEventListener(\"visibilitychange\",n),window.addEventListener(\"resize\",m),{motion:e,watch(f,h){o.set(f,h),r?.observe(f),p.observe(f)},unwatch(f,h){if(o.get(f)===h){if(o.delete(f),o.size>0){r?.unobserve(f),p.unobserve(f);return}r?.disconnect(),a.disconnect(),p.disconnect(),document.removeEventListener(\"transitionend\",d,!0),e.removeEventListener(\"change\",n),document.removeEventListener(\"visibilitychange\",n),window.removeEventListener(\"resize\",m),t()}}}}var xt;function je(){let t=new Set,o=0;function e(s){o=0;for(let n of[...t])n(s)||t.delete(n);t.size>0&&o===0&&(o=requestAnimationFrame(e))}return{run(s){t.add(s),o===0&&(o=requestAnimationFrame(e))},stop(s){t.delete(s),!(t.size>0||o===0)&&(cancelAnimationFrame(o),o=0)}}}var yt=je(),_e=4;function qe(){return xt??=We(()=>{xt=void 0}),xt}var Ke=.1;function Zt(t,o){let{form:e,presence:s=\"plain\"}=o,n=t.getContext(\"2d\");if(!n)return{destroy(){},setPaused(P){},setState(P){}};let r=qe(),{motion:a}=r,p=o.paused??!1,d=!0,m=!1,f=.6,h=0,c=0,u=o.state??\"idle\",M=o.motion??\"status\",x=null,i=0,y=1,v=o.size,b=getComputedStyle(t).color,O=[b],w=[b],A=\"\",g=X(),l={waiting:b,blocked:b};function S(){let P=t.getBoundingClientRect(),V=Math.min(P.width,P.height);return V>0?V:o.size}function D(){!n||m||!t.isConnected||(n.setTransform(y,0,0,y,0,0),Ge(n,{form:e,size:v,seconds:f,color:b,state:u,age:h,reduced:a.matches,breath:a.matches?Wt(u,c):1,presence:s,motion:M,celebrationColors:O,stripeColors:w,statusColors:l,timing:g}))}function E(){return m||!t.isConnected||!d||document.hidden||p?!1:a.matches?M===\"status\"&&(u===\"thinking\"||u===\"working\"):M===\"ambient\"?!0:!(u===\"blocked\"&&h>=g.blockedDuration)}function k(P){if(!E())return!1;if(x!==null){let F=Math.min((P-x)/1e3,Ke);a.matches?c+=F:(f+=F*(M===\"ambient\"?ht(e):Gt(u,e,h,g)),M===\"status\"&&(h+=F))}x=P;let V=Yt(u,h,M,g)===\"idle\"?gt.resting:gt.busy;return(P-i>=1e3/V-_e||!E())&&(D(),i=P),E()}function T(){x=null,D(),E()?yt.run(k):yt.stop(k)}function C(P){let V=_t.get(P);if(V)return V;let F=document.createElement(\"span\");F.hidden=!0,F.style.color=P,(t.parentElement??document.body).append(F);let G=getComputedStyle(F).color;return F.remove(),G?(_t.set(P,G),G):b}function R(){let P=getComputedStyle(t),V=new Map(Ie.map(G=>[G,P.getPropertyValue(G).trim()]));return{key:[window.devicePixelRatio||1,P.color,...V.values()].join(\"|\"),color:P.color,tokens:V,timing:X(P)}}function I(P){if(m||!t.isConnected)return;v=P;let V=Math.max(1,Math.round(v*Math.min(window.devicePixelRatio||1,2)));t.width=V,t.height=V,y=V/v,T()}function B(P,V){A=P.key,b=P.color,g=P.timing,l={waiting:C(P.tokens.get(vt.waiting)||b),blocked:C(P.tokens.get(vt.blocked)||b)},O=Ut.map(F=>C(`color-mix(in oklch, ${P.tokens.get(F)||b} 75%, white)`)),w=(Ve[e]??[]).map(F=>(F?P.tokens.get(F):void 0)||b),I(V)}function L(){if(m||!t.isConnected)return;let P=S();return Math.abs(P-v)>=.5?()=>I(P):void 0}function N(){if(m||!t.isConnected)return;let P=R();if(P.key===A)return L();let V=S();return()=>B(P,V)}let _={readChange:N,readResize:L,setVisible(P){d=P,T()},play:T};return r.watch(t,_),N()?.(),{setState(P){u=P,h=0,c=0,T()},setPaused(P){p=P,T()},destroy(){m=!0,yt.stop(k),r.unwatch(t,_)}}}for(let t of document.querySelectorAll(\"canvas[data-agent-orb]\")){let o=t.dataset.agentOrb??\"\",e=Number(t.dataset.size),s=t.dataset.state??\"idle\";Kt(o)&&Ht(e)&&Lt(s)&&Zt(t,{form:o,size:e,state:s})}})();\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.5005 0.2804 266.17);\n --nc-action-foreground: oklch(1.0000 0.0000 0.00);\n --nc-action-hover: oklch(0.4602 0.2797 266.14);\n --nc-action-active: oklch(0.4202 0.2522 266.14);\n --nc-ink: oklch(0.1776 0.0000 0.00);\n --nc-body: oklch(0.5103 0.0000 0.00);\n --nc-muted: oklch(0.5278 0.0000 0.00);\n --nc-canvas: oklch(1.0000 0.0000 0.00);\n --nc-canvas-soft: oklch(0.9851 0.0000 0.00);\n --nc-canvas-soft-2: oklch(0.9702 0.0000 0.00);\n --nc-material-workspace: oklch(0.9851 0.0000 0.00);\n --nc-material-solid: oklch(1.0000 0.0000 0.00);\n --nc-material-resting: oklch(1.0000 0.0000 0.00);\n --nc-material-raised: oklch(1.0000 0.0000 0.00);\n --nc-material-floating: oklch(1.0000 0.0000 0.00);\n --nc-material-modal: oklch(1.0000 0.0000 0.00);\n --nc-line: oklch(0.9219 0.0000 0.00);\n --nc-input: oklch(0.5624 0.0000 0.00);\n --nc-focus-ring: oklch(0.1776 0.0000 0.00);\n --nc-scrim: oklch(0.9612 0.0000 0.00);\n --nc-link: oklch(0.5005 0.2804 266.17);\n --nc-link-deep: oklch(0.4202 0.2522 266.14);\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-logo-guide: oklch(0.6830 0.0000 0.00);\n --nc-chart-1: oklch(0.5005 0.2804 266.17);\n --nc-chart-2: oklch(0.6398 0.2044 356.46);\n --nc-chart-3: oklch(0.5015 0.1883 294.99);\n --nc-chart-4: oklch(0.6824 0.2108 37.70);\n --nc-chart-5: oklch(0.6161 0.1062 208.85);\n --nc-chart-6: oklch(0.5688 0.1995 26.59);\n --nc-chart-7: oklch(0.7691 0.1577 84.69);\n --nc-chart-8: oklch(0.6415 0.1644 153.23);\n --nc-chart-9: oklch(0.7191 0.1452 266.33);\n --nc-chart-10: oklch(0.8309 0.1048 356.57);\n --nc-cobalto-100: oklch(0.9754 0.0115 264.51);\n --nc-cobalto-200: oklch(0.9543 0.0215 265.76);\n --nc-cobalto-300: oklch(0.9297 0.0334 265.23);\n --nc-cobalto-400: oklch(0.8944 0.0509 267.00);\n --nc-cobalto-500: oklch(0.8308 0.0837 265.90);\n --nc-cobalto-600: oklch(0.7191 0.1452 266.33);\n --nc-cobalto-700: oklch(0.5005 0.2804 266.17);\n --nc-cobalto-800: oklch(0.4602 0.2797 266.14);\n --nc-cobalto-900: oklch(0.4202 0.2522 266.14);\n --nc-cobalto-1000: oklch(0.2811 0.1684 266.17);\n --nc-rosso-100: oklch(0.9752 0.0122 29.87);\n --nc-rosso-200: oklch(0.9552 0.0222 27.81);\n --nc-rosso-300: oklch(0.9290 0.0360 26.28);\n --nc-rosso-400: oklch(0.8944 0.0552 26.52);\n --nc-rosso-500: oklch(0.8304 0.0942 26.48);\n --nc-rosso-600: oklch(0.7201 0.1742 26.79);\n --nc-rosso-700: oklch(0.5688 0.1995 26.59);\n --nc-rosso-800: oklch(0.5297 0.1996 26.67);\n --nc-rosso-900: oklch(0.4882 0.1797 26.59);\n --nc-rosso-1000: oklch(0.2805 0.1143 26.81);\n --nc-arancio-100: oklch(0.9749 0.0125 35.73);\n --nc-arancio-200: oklch(0.9544 0.0233 37.38);\n --nc-arancio-300: oklch(0.9298 0.0366 36.77);\n --nc-arancio-400: oklch(0.8945 0.0567 37.21);\n --nc-arancio-500: oklch(0.8292 0.0974 37.12);\n --nc-arancio-600: oklch(0.7428 0.1602 37.76);\n --nc-arancio-700: oklch(0.6824 0.2108 37.70);\n --nc-arancio-800: oklch(0.6419 0.2102 37.75);\n --nc-arancio-900: oklch(0.4993 0.1647 37.64);\n --nc-arancio-1000: oklch(0.2801 0.0916 38.02);\n --nc-giallo-100: oklch(0.9860 0.0154 86.42);\n --nc-giallo-200: oklch(0.9699 0.0272 83.54);\n --nc-giallo-300: oklch(0.9555 0.0420 85.96);\n --nc-giallo-400: oklch(0.9298 0.0673 84.45);\n --nc-giallo-500: oklch(0.9004 0.1074 84.93);\n --nc-giallo-600: oklch(0.8696 0.1403 84.42);\n --nc-giallo-700: oklch(0.8466 0.1678 84.63);\n --nc-giallo-800: oklch(0.7691 0.1577 84.69);\n --nc-giallo-900: oklch(0.5305 0.1090 83.33);\n --nc-giallo-1000: oklch(0.3186 0.0654 84.14);\n --nc-verde-100: oklch(0.9747 0.0157 154.48);\n --nc-verde-200: oklch(0.9560 0.0265 152.38);\n --nc-verde-300: oklch(0.9290 0.0407 153.11);\n --nc-verde-400: oklch(0.8955 0.0664 152.93);\n --nc-verde-500: oklch(0.8310 0.1403 153.27);\n --nc-verde-600: oklch(0.7191 0.1645 153.16);\n --nc-verde-700: oklch(0.6415 0.1644 153.23);\n --nc-verde-800: oklch(0.6017 0.1542 153.23);\n --nc-verde-900: oklch(0.4992 0.1279 153.23);\n --nc-verde-1000: oklch(0.2815 0.0723 153.13);\n --nc-acqua-100: oklch(0.9752 0.0109 211.04);\n --nc-acqua-200: oklch(0.9559 0.0171 205.84);\n --nc-acqua-300: oklch(0.9297 0.0259 208.75);\n --nc-acqua-400: oklch(0.8954 0.0424 207.56);\n --nc-acqua-500: oklch(0.8304 0.0902 209.06);\n --nc-acqua-600: oklch(0.7205 0.1064 208.54);\n --nc-acqua-700: oklch(0.6161 0.1062 208.85);\n --nc-acqua-800: oklch(0.5765 0.0992 208.28);\n --nc-acqua-900: oklch(0.4990 0.0860 208.78);\n --nc-acqua-1000: oklch(0.2797 0.0484 210.29);\n --nc-viola-100: oklch(0.9745 0.0134 295.33);\n --nc-viola-200: oklch(0.9545 0.0243 296.12);\n --nc-viola-300: oklch(0.9290 0.0381 295.47);\n --nc-viola-400: oklch(0.8954 0.0563 294.18);\n --nc-viola-500: oklch(0.8289 0.0954 295.03);\n --nc-viola-600: oklch(0.7204 0.1631 294.91);\n --nc-viola-700: oklch(0.5015 0.1883 294.99);\n --nc-viola-800: oklch(0.4620 0.1886 294.84);\n --nc-viola-900: oklch(0.4227 0.1694 295.05);\n --nc-viola-1000: oklch(0.2796 0.1131 295.14);\n --nc-rosa-100: oklch(0.9746 0.0139 355.00);\n --nc-rosa-200: oklch(0.9555 0.0241 358.28);\n --nc-rosa-300: oklch(0.9307 0.0386 357.63);\n --nc-rosa-400: oklch(0.8944 0.0614 356.49);\n --nc-rosa-500: oklch(0.8309 0.1048 356.57);\n --nc-rosa-600: oklch(0.7193 0.1969 356.59);\n --nc-rosa-700: oklch(0.6398 0.2044 356.46);\n --nc-rosa-800: oklch(0.6001 0.2050 356.50);\n --nc-rosa-900: oklch(0.5009 0.1842 356.43);\n --nc-rosa-1000: oklch(0.2808 0.1147 356.80);\n --nc-dark-canvas: oklch(0.0000 0.0000 0.00);\n --nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00);\n --nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00);\n --nc-dark-material-workspace: oklch(0.0000 0.0000 0.00);\n --nc-dark-material-solid: oklch(0.0000 0.0000 0.00);\n --nc-dark-material-resting: oklch(0.1448 0.0000 0.00);\n --nc-dark-material-raised: oklch(0.1684 0.0000 0.00);\n --nc-dark-material-floating: oklch(0.1684 0.0000 0.00);\n --nc-dark-material-modal: oklch(0.1684 0.0000 0.00);\n --nc-card-graphite: oklch(0.1957 0.0000 0.00);\n --nc-dark-ink: oklch(0.9461 0.0000 0.00);\n --nc-dark-body: oklch(0.7090 0.0000 0.00);\n --nc-dark-muted: oklch(0.6993 0.0000 0.00);\n --nc-dark-line: oklch(0.2686 0.0000 0.00);\n --nc-dark-input: oklch(0.5590 0.0000 0.00);\n --nc-dark-on-primary: oklch(0.1448 0.0000 0.00);\n --nc-dark-action: oklch(0.5005 0.2804 266.17);\n --nc-dark-action-foreground: oklch(1.0000 0.0000 0.00);\n --nc-dark-action-hover: oklch(0.4602 0.2797 266.14);\n --nc-dark-action-active: oklch(0.4202 0.2522 266.14);\n --nc-dark-link: oklch(0.7993 0.1005 266.67);\n --nc-dark-link-deep: oklch(0.8944 0.0509 267.00);\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.5005 0.2804 266.17);\n --nc-dark-state-review: oklch(0.8466 0.1678 84.63);\n --nc-dark-state-blocked: oklch(0.5688 0.1995 26.59);\n --nc-dark-state-complete: oklch(0.6415 0.1644 153.23);\n --nc-dark-logo-dot: oklch(0.5923 0.2215 269.61);\n --nc-dark-navigation-selection-bg: oklch(0.2393 0.0000 0.00);\n --nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00);\n --nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00);\n --nc-dark-chart-1: oklch(0.6007 0.2160 266.02);\n --nc-dark-chart-2: oklch(0.6611 0.1941 356.61);\n --nc-dark-chart-3: oklch(0.6004 0.1789 294.79);\n --nc-dark-chart-4: oklch(0.6612 0.2003 37.74);\n --nc-dark-chart-5: oklch(0.6568 0.1009 208.69);\n --nc-dark-chart-6: oklch(0.6084 0.1887 26.65);\n --nc-dark-chart-7: oklch(0.8466 0.1678 84.63);\n --nc-dark-chart-8: oklch(0.6608 0.1568 153.03);\n --nc-dark-chart-9: oklch(0.7993 0.1005 266.67);\n --nc-dark-chart-10: oklch(0.8005 0.1279 356.32);\n --nc-dark-cobalto-100: oklch(0.1915 0.0982 266.32);\n --nc-dark-cobalto-200: oklch(0.2197 0.1184 266.25);\n --nc-dark-cobalto-300: oklch(0.2604 0.1398 265.97);\n --nc-dark-cobalto-400: oklch(0.2997 0.1624 266.24);\n --nc-dark-cobalto-500: oklch(0.3702 0.1966 266.08);\n --nc-dark-cobalto-600: oklch(0.6007 0.2160 266.02);\n --nc-dark-cobalto-700: oklch(0.5005 0.2804 266.17);\n --nc-dark-cobalto-800: oklch(0.4602 0.2797 266.14);\n --nc-dark-cobalto-900: oklch(0.7993 0.1005 266.67);\n --nc-dark-cobalto-1000: oklch(0.9604 0.0186 265.98);\n --nc-dark-rosso-100: oklch(0.1907 0.0689 26.80);\n --nc-dark-rosso-200: oklch(0.2215 0.0837 26.41);\n --nc-dark-rosso-300: oklch(0.2596 0.0994 26.37);\n --nc-dark-rosso-400: oklch(0.3014 0.1159 26.97);\n --nc-dark-rosso-500: oklch(0.3705 0.1397 26.54);\n --nc-dark-rosso-600: oklch(0.6084 0.1887 26.65);\n --nc-dark-rosso-700: oklch(0.5688 0.1995 26.59);\n --nc-dark-rosso-800: oklch(0.5297 0.1996 26.67);\n --nc-dark-rosso-900: oklch(0.7992 0.1149 26.43);\n --nc-dark-rosso-1000: oklch(0.9598 0.0198 25.17);\n --nc-dark-arancio-100: oklch(0.1909 0.0632 37.47);\n --nc-dark-arancio-200: oklch(0.2201 0.0732 37.26);\n --nc-dark-arancio-300: oklch(0.2598 0.0852 37.90);\n --nc-dark-arancio-400: oklch(0.2988 0.0989 37.50);\n --nc-dark-arancio-500: oklch(0.3706 0.1219 37.77);\n --nc-dark-arancio-600: oklch(0.6612 0.2003 37.74);\n --nc-dark-arancio-700: oklch(0.6824 0.2108 37.70);\n --nc-dark-arancio-800: oklch(0.6419 0.2102 37.75);\n --nc-dark-arancio-900: oklch(0.7993 0.1180 37.52);\n --nc-dark-arancio-1000: oklch(0.9590 0.0208 36.03);\n --nc-dark-giallo-100: oklch(0.1903 0.0391 84.07);\n --nc-dark-giallo-200: oklch(0.2185 0.0449 83.81);\n --nc-dark-giallo-300: oklch(0.2592 0.0532 83.54);\n --nc-dark-giallo-400: oklch(0.3008 0.0616 85.18);\n --nc-dark-giallo-500: oklch(0.3705 0.0759 85.25);\n --nc-dark-giallo-600: oklch(0.6598 0.1353 84.83);\n --nc-dark-giallo-700: oklch(0.8466 0.1678 84.63);\n --nc-dark-giallo-800: oklch(0.8064 0.1654 84.43);\n --nc-dark-giallo-900: oklch(0.8007 0.1595 84.74);\n --nc-dark-giallo-1000: oklch(0.9604 0.0256 84.59);\n --nc-dark-verde-100: oklch(0.1910 0.0488 153.39);\n --nc-dark-verde-200: oklch(0.2208 0.0571 152.80);\n --nc-dark-verde-300: oklch(0.2606 0.0664 153.49);\n --nc-dark-verde-400: oklch(0.2987 0.0765 153.24);\n --nc-dark-verde-500: oklch(0.3685 0.0944 153.24);\n --nc-dark-verde-600: oklch(0.6608 0.1568 153.03);\n --nc-dark-verde-700: oklch(0.6415 0.1644 153.23);\n --nc-dark-verde-800: oklch(0.6017 0.1542 153.23);\n --nc-dark-verde-900: oklch(0.7994 0.1555 153.29);\n --nc-dark-verde-1000: oklch(0.9600 0.0248 152.88);\n --nc-dark-acqua-100: oklch(0.1914 0.0330 209.05);\n --nc-dark-acqua-200: oklch(0.2192 0.0379 209.81);\n --nc-dark-acqua-300: oklch(0.2610 0.0450 209.30);\n --nc-dark-acqua-400: oklch(0.3011 0.0519 208.95);\n --nc-dark-acqua-500: oklch(0.3711 0.0639 208.82);\n --nc-dark-acqua-600: oklch(0.6568 0.1009 208.69);\n --nc-dark-acqua-700: oklch(0.6161 0.1062 208.85);\n --nc-dark-acqua-800: oklch(0.5765 0.0992 208.28);\n --nc-dark-acqua-900: oklch(0.8004 0.1007 208.37);\n --nc-dark-acqua-1000: oklch(0.9596 0.0161 206.44);\n --nc-dark-viola-100: oklch(0.1897 0.0654 295.79);\n --nc-dark-viola-200: oklch(0.2192 0.0805 294.49);\n --nc-dark-viola-300: oklch(0.2605 0.0949 295.18);\n --nc-dark-viola-400: oklch(0.2990 0.1087 294.76);\n --nc-dark-viola-500: oklch(0.3702 0.1310 295.14);\n --nc-dark-viola-600: oklch(0.6004 0.1789 294.79);\n --nc-dark-viola-700: oklch(0.5015 0.1883 294.99);\n --nc-dark-viola-800: oklch(0.4620 0.1886 294.84);\n --nc-dark-viola-900: oklch(0.8000 0.1131 295.20);\n --nc-dark-viola-1000: oklch(0.9591 0.0215 294.60);\n --nc-dark-rosa-100: oklch(0.1902 0.0716 355.67);\n --nc-dark-rosa-200: oklch(0.2198 0.0850 357.06);\n --nc-dark-rosa-300: oklch(0.2591 0.1026 356.37);\n --nc-dark-rosa-400: oklch(0.3000 0.1188 356.62);\n --nc-dark-rosa-500: oklch(0.3695 0.1426 356.71);\n --nc-dark-rosa-600: oklch(0.6611 0.1941 356.61);\n --nc-dark-rosa-700: oklch(0.6398 0.2044 356.46);\n --nc-dark-rosa-800: oklch(0.6001 0.2050 356.50);\n --nc-dark-rosa-900: oklch(0.8005 0.1279 356.32);\n --nc-dark-rosa-1000: oklch(0.9599 0.0220 356.32);\n --nc-category-teal-soft: oklch(0.9585 0.0244 187.32);\n --nc-category-teal-deep: oklch(0.4600 0.0788 185.34);\n --nc-dark-category-teal-soft: oklch(0.2627 0.0410 187.13);\n --nc-dark-category-teal-deep: oklch(0.8398 0.1008 186.70);\n --nc-category-purple-soft: oklch(0.9464 0.0327 307.17);\n --nc-category-purple-deep: oklch(0.4541 0.1958 308.26);\n --nc-dark-category-purple-soft: oklch(0.2479 0.0790 306.78);\n --nc-dark-category-purple-deep: oklch(0.7911 0.1271 310.92);\n --nc-category-pink-soft: oklch(0.9476 0.0263 347.12);\n --nc-category-pink-deep: oklch(0.4863 0.1711 355.09);\n --nc-dark-category-pink-soft: oklch(0.2550 0.0598 353.51);\n --nc-dark-category-pink-deep: oklch(0.8108 0.1129 347.21);\n --nc-xxs: 4px;\n --nc-xs: 8px;\n --nc-sm: 12px;\n --nc-md: 16px;\n --nc-lg: 24px;\n --nc-xl: 32px;\n --nc-2xl: 40px;\n --nc-3xl: 48px;\n --nc-4xl: 64px;\n --nc-5xl: 96px;\n --nc-6xl: 128px;\n --nc-guide: 1px;\n --nc-icon-stroke: 1.5px;\n --nc-icon-stroke-sm: 1.25px;\n --nc-focus-outline-width: 2px;\n --nc-focus-outline-offset: 2px;\n --nc-control-height: 36px;\n --nc-control-height-sm: 32px;\n --nc-control-height-lg: 40px;\n --nc-control-height-xs: 24px;\n --nc-control-padding-inline: 12px;\n --nc-button-padding-inline-sm: 6px;\n --nc-button-padding-inline: 10px;\n --nc-button-padding-inline-lg: 14px;\n --nc-card-padding: 20px;\n --nc-touch-target: 44px;\n --nc-rounded-none: 0px;\n --nc-rounded-xs: 2px;\n --nc-rounded-xs-plus: 4px;\n --nc-rounded-sm: 6px;\n --nc-rounded-md: 8px;\n --nc-rounded-lg: 12px;\n --nc-rounded-xl: 16px;\n --nc-rounded-2xl: 20px;\n --nc-rounded-3xl: 24px;\n --nc-rounded-full: 9999px;\n --nc-type-display-xl-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-xl-font-size: 72px;\n --nc-type-display-xl-font-weight: 600;\n --nc-type-display-xl-line-height: 72px;\n --nc-type-display-xl-letter-spacing: -4.32px;\n --nc-type-display-wide-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-wide-font-size: 64px;\n --nc-type-display-wide-font-weight: 600;\n --nc-type-display-wide-line-height: 64px;\n --nc-type-display-wide-letter-spacing: -3.84px;\n --nc-type-display-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-lg-font-size: 56px;\n --nc-type-display-lg-font-weight: 600;\n --nc-type-display-lg-line-height: 56px;\n --nc-type-display-lg-letter-spacing: -3.36px;\n --nc-type-display-section-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-section-font-size: 48px;\n --nc-type-display-section-font-weight: 600;\n --nc-type-display-section-line-height: 56px;\n --nc-type-display-section-letter-spacing: -2.88px;\n --nc-type-display-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-md-font-size: 40px;\n --nc-type-display-md-font-weight: 600;\n --nc-type-display-md-line-height: 48px;\n --nc-type-display-md-letter-spacing: -2.4px;\n --nc-type-heading-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-lg-font-size: 32px;\n --nc-type-heading-lg-font-weight: 600;\n --nc-type-heading-lg-line-height: 40px;\n --nc-type-heading-lg-letter-spacing: -1.28px;\n --nc-type-heading-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-md-font-size: 24px;\n --nc-type-heading-md-font-weight: 600;\n --nc-type-heading-md-line-height: 32px;\n --nc-type-heading-md-letter-spacing: -0.96px;\n --nc-type-heading-sm-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-sm-font-size: 20px;\n --nc-type-heading-sm-font-weight: 600;\n --nc-type-heading-sm-line-height: 26px;\n --nc-type-heading-sm-letter-spacing: -0.4px;\n --nc-type-heading-xs-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-xs-font-size: 16px;\n --nc-type-heading-xs-font-weight: 600;\n --nc-type-heading-xs-line-height: 24px;\n --nc-type-heading-xs-letter-spacing: -0.32px;\n --nc-type-heading-compact-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-compact-font-size: 14px;\n --nc-type-heading-compact-font-weight: 600;\n --nc-type-heading-compact-line-height: 20px;\n --nc-type-heading-compact-letter-spacing: -0.28px;\n --nc-type-button-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-button-lg-font-size: 16px;\n --nc-type-button-lg-font-weight: 500;\n --nc-type-button-lg-line-height: 24px;\n --nc-type-button-lg-letter-spacing: 0px;\n --nc-type-button-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-button-font-size: 14px;\n --nc-type-button-font-weight: 500;\n --nc-type-button-line-height: 21px;\n --nc-type-button-letter-spacing: 0px;\n --nc-type-button-xs-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-button-xs-font-size: 12px;\n --nc-type-button-xs-font-weight: 500;\n --nc-type-button-xs-line-height: 16px;\n --nc-type-button-xs-letter-spacing: 0px;\n --nc-type-label-display-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-display-font-size: 20px;\n --nc-type-label-display-font-weight: 400;\n --nc-type-label-display-line-height: 32px;\n --nc-type-label-display-letter-spacing: 0px;\n --nc-type-label-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-lg-font-size: 18px;\n --nc-type-label-lg-font-weight: 400;\n --nc-type-label-lg-line-height: 20px;\n --nc-type-label-lg-letter-spacing: 0px;\n --nc-type-label-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-md-font-size: 16px;\n --nc-type-label-md-font-weight: 400;\n --nc-type-label-md-line-height: 20px;\n --nc-type-label-md-letter-spacing: 0px;\n --nc-type-label-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-font-size: 14px;\n --nc-type-label-font-weight: 400;\n --nc-type-label-line-height: 20px;\n --nc-type-label-letter-spacing: 0px;\n --nc-type-label-sm-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-sm-font-size: 13px;\n --nc-type-label-sm-font-weight: 400;\n --nc-type-label-sm-line-height: 16px;\n --nc-type-label-sm-letter-spacing: 0px;\n --nc-type-caption-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-caption-font-size: 12px;\n --nc-type-caption-font-weight: 400;\n --nc-type-caption-line-height: 16px;\n --nc-type-caption-letter-spacing: 0px;\n --nc-type-label-mono-lg-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-label-mono-lg-font-size: 14px;\n --nc-type-label-mono-lg-font-weight: 400;\n --nc-type-label-mono-lg-line-height: 20px;\n --nc-type-label-mono-lg-letter-spacing: 0px;\n --nc-type-label-mono-md-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-label-mono-md-font-size: 13px;\n --nc-type-label-mono-md-font-weight: 400;\n --nc-type-label-mono-md-line-height: 20px;\n --nc-type-label-mono-md-letter-spacing: 0px;\n --nc-type-label-mono-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-label-mono-font-size: 12px;\n --nc-type-label-mono-font-weight: 400;\n --nc-type-label-mono-line-height: 16px;\n --nc-type-label-mono-letter-spacing: 0px;\n --nc-type-body-display-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-display-font-size: 24px;\n --nc-type-body-display-font-weight: 400;\n --nc-type-body-display-line-height: 36px;\n --nc-type-body-display-letter-spacing: 0px;\n --nc-type-body-lead-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-lead-font-size: 20px;\n --nc-type-body-lead-font-weight: 400;\n --nc-type-body-lead-line-height: 36px;\n --nc-type-body-lead-letter-spacing: 0px;\n --nc-type-body-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-lg-font-size: 18px;\n --nc-type-body-lg-font-weight: 400;\n --nc-type-body-lg-line-height: 28px;\n --nc-type-body-lg-letter-spacing: 0px;\n --nc-type-body-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-md-font-size: 16px;\n --nc-type-body-md-font-weight: 400;\n --nc-type-body-md-line-height: 24px;\n --nc-type-body-md-letter-spacing: 0px;\n --nc-type-body-sm-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-sm-font-size: 14px;\n --nc-type-body-sm-font-weight: 400;\n --nc-type-body-sm-line-height: 20px;\n --nc-type-body-sm-letter-spacing: 0px;\n --nc-type-body-compact-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-compact-font-size: 13px;\n --nc-type-body-compact-font-weight: 400;\n --nc-type-body-compact-line-height: 18px;\n --nc-type-body-compact-letter-spacing: 0px;\n --nc-type-code-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-code-font-size: 13px;\n --nc-type-code-font-weight: 400;\n --nc-type-code-line-height: 18px;\n --nc-type-code-letter-spacing: 0px;\n --nc-material-scrim-opacity: 80%;\n --nc-material-dark-scrim-opacity: 60%;\n --nc-material-glass-opacity: 55%;\n --nc-material-glass-saturation: 180%;\n --nc-material-glass-blur: 20px;\n --nc-elevation-resting: 0px 0px 0px 1px rgb(0% 0% 0% / 0.08), 0px 2px 2px 0px rgb(0% 0% 0% / 0.04);\n --nc-elevation-raised:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 2px 2px 0px rgb(0% 0% 0% / 0.04),\n 0px 8px 16px -4px rgb(0% 0% 0% / 0.08);\n --nc-elevation-floating:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 1px 1px 0px rgb(0% 0% 0% / 0.02),\n 0px 4px 8px -4px rgb(0% 0% 0% / 0.06),\n 0px 16px 32px -8px rgb(0% 0% 0% / 0.1);\n --nc-elevation-modal:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 8px 24px -12px rgb(0% 0% 0% / 0.12),\n 0px 32px 72px -12px rgb(0% 0% 0% / 0.12);\n --nc-elevation-glass:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.75),\n inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.35),\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 4px 8px -4px rgb(0% 0% 0% / 0.06),\n 0px 16px 32px -8px rgb(0% 0% 0% / 0.08);\n --nc-duration-control: 100ms;\n --nc-duration-close: 140ms;\n --nc-duration-confirm: 180ms;\n --nc-duration-open: 220ms;\n --nc-duration-msg-in: 240ms;\n --nc-duration-transition: 240ms;\n --nc-duration-arrive: 300ms;\n --nc-duration-drawer-swipe: 400ms;\n --nc-duration-drawer: 450ms;\n --nc-duration-wait: 1.6s;\n --nc-ease-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1);\n --nc-ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);\n --nc-ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);\n --nc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);\n --nc-content-max: 1200px;\n --nc-gutter-mobile: 20px;\n --nc-gutter-tablet: 40px;\n --nc-gutter-desktop: 64px;\n --nc-section-step-mobile: 64px;\n --nc-section-step-desktop: 96px;\n }\n}\n\n\n@layer theme {\n .dark {\n --nc-canvas: var(--nc-dark-canvas);\n --nc-canvas-soft: var(--nc-dark-canvas-soft);\n --nc-canvas-soft-2: var(--nc-dark-canvas-soft-2);\n --nc-material-workspace: var(--nc-dark-material-workspace);\n --nc-material-solid: var(--nc-dark-material-solid);\n --nc-material-resting: var(--nc-dark-material-resting);\n --nc-material-raised: var(--nc-dark-material-raised);\n --nc-material-floating: var(--nc-dark-material-floating);\n --nc-material-modal: var(--nc-dark-material-modal);\n --nc-ink: var(--nc-dark-ink);\n --nc-body: var(--nc-dark-body);\n --nc-muted: var(--nc-dark-muted);\n --nc-line: var(--nc-dark-line);\n --nc-input: var(--nc-dark-input);\n --nc-action: var(--nc-dark-action);\n --nc-action-foreground: var(--nc-dark-action-foreground);\n --nc-action-hover: var(--nc-dark-action-hover);\n --nc-action-active: var(--nc-dark-action-active);\n --nc-link: var(--nc-dark-link);\n --nc-link-deep: var(--nc-dark-link-deep);\n --nc-link-bg-soft: var(--nc-dark-link-bg-soft);\n --nc-focus-ring: var(--nc-dark-focus-ring);\n --nc-scrim: var(--nc-dark-scrim);\n --nc-error: var(--nc-dark-error);\n --nc-error-soft: var(--nc-dark-error-soft);\n --nc-error-deep: var(--nc-dark-error-deep);\n --nc-warning: var(--nc-dark-warning);\n --nc-warning-soft: var(--nc-dark-warning-soft);\n --nc-warning-deep: var(--nc-dark-warning-deep);\n --nc-info: var(--nc-dark-info);\n --nc-info-soft: var(--nc-dark-info-soft);\n --nc-info-deep: var(--nc-dark-info-deep);\n --nc-success: var(--nc-dark-success);\n --nc-success-soft: var(--nc-dark-success-soft);\n --nc-success-deep: var(--nc-dark-success-deep);\n --nc-state-ready: var(--nc-dark-state-ready);\n --nc-state-running: var(--nc-dark-state-running);\n --nc-state-review: var(--nc-dark-state-review);\n --nc-state-blocked: var(--nc-dark-state-blocked);\n --nc-state-complete: var(--nc-dark-state-complete);\n --nc-logo-dot: var(--nc-dark-logo-dot);\n --nc-navigation-selection-bg: var(--nc-dark-navigation-selection-bg);\n --nc-navigation-selection-fg: var(--nc-dark-navigation-selection-fg);\n --nc-navigation-selection-hover: var(--nc-dark-navigation-selection-hover);\n --nc-chart-1: var(--nc-dark-chart-1);\n --nc-chart-2: var(--nc-dark-chart-2);\n --nc-chart-3: var(--nc-dark-chart-3);\n --nc-chart-4: var(--nc-dark-chart-4);\n --nc-chart-5: var(--nc-dark-chart-5);\n --nc-chart-6: var(--nc-dark-chart-6);\n --nc-chart-7: var(--nc-dark-chart-7);\n --nc-chart-8: var(--nc-dark-chart-8);\n --nc-chart-9: var(--nc-dark-chart-9);\n --nc-chart-10: var(--nc-dark-chart-10);\n --nc-cobalto-100: var(--nc-dark-cobalto-100);\n --nc-cobalto-200: var(--nc-dark-cobalto-200);\n --nc-cobalto-300: var(--nc-dark-cobalto-300);\n --nc-cobalto-400: var(--nc-dark-cobalto-400);\n --nc-cobalto-500: var(--nc-dark-cobalto-500);\n --nc-cobalto-600: var(--nc-dark-cobalto-600);\n --nc-cobalto-700: var(--nc-dark-cobalto-700);\n --nc-cobalto-800: var(--nc-dark-cobalto-800);\n --nc-cobalto-900: var(--nc-dark-cobalto-900);\n --nc-cobalto-1000: var(--nc-dark-cobalto-1000);\n --nc-rosso-100: var(--nc-dark-rosso-100);\n --nc-rosso-200: var(--nc-dark-rosso-200);\n --nc-rosso-300: var(--nc-dark-rosso-300);\n --nc-rosso-400: var(--nc-dark-rosso-400);\n --nc-rosso-500: var(--nc-dark-rosso-500);\n --nc-rosso-600: var(--nc-dark-rosso-600);\n --nc-rosso-700: var(--nc-dark-rosso-700);\n --nc-rosso-800: var(--nc-dark-rosso-800);\n --nc-rosso-900: var(--nc-dark-rosso-900);\n --nc-rosso-1000: var(--nc-dark-rosso-1000);\n --nc-arancio-100: var(--nc-dark-arancio-100);\n --nc-arancio-200: var(--nc-dark-arancio-200);\n --nc-arancio-300: var(--nc-dark-arancio-300);\n --nc-arancio-400: var(--nc-dark-arancio-400);\n --nc-arancio-500: var(--nc-dark-arancio-500);\n --nc-arancio-600: var(--nc-dark-arancio-600);\n --nc-arancio-700: var(--nc-dark-arancio-700);\n --nc-arancio-800: var(--nc-dark-arancio-800);\n --nc-arancio-900: var(--nc-dark-arancio-900);\n --nc-arancio-1000: var(--nc-dark-arancio-1000);\n --nc-giallo-100: var(--nc-dark-giallo-100);\n --nc-giallo-200: var(--nc-dark-giallo-200);\n --nc-giallo-300: var(--nc-dark-giallo-300);\n --nc-giallo-400: var(--nc-dark-giallo-400);\n --nc-giallo-500: var(--nc-dark-giallo-500);\n --nc-giallo-600: var(--nc-dark-giallo-600);\n --nc-giallo-700: var(--nc-dark-giallo-700);\n --nc-giallo-800: var(--nc-dark-giallo-800);\n --nc-giallo-900: var(--nc-dark-giallo-900);\n --nc-giallo-1000: var(--nc-dark-giallo-1000);\n --nc-verde-100: var(--nc-dark-verde-100);\n --nc-verde-200: var(--nc-dark-verde-200);\n --nc-verde-300: var(--nc-dark-verde-300);\n --nc-verde-400: var(--nc-dark-verde-400);\n --nc-verde-500: var(--nc-dark-verde-500);\n --nc-verde-600: var(--nc-dark-verde-600);\n --nc-verde-700: var(--nc-dark-verde-700);\n --nc-verde-800: var(--nc-dark-verde-800);\n --nc-verde-900: var(--nc-dark-verde-900);\n --nc-verde-1000: var(--nc-dark-verde-1000);\n --nc-acqua-100: var(--nc-dark-acqua-100);\n --nc-acqua-200: var(--nc-dark-acqua-200);\n --nc-acqua-300: var(--nc-dark-acqua-300);\n --nc-acqua-400: var(--nc-dark-acqua-400);\n --nc-acqua-500: var(--nc-dark-acqua-500);\n --nc-acqua-600: var(--nc-dark-acqua-600);\n --nc-acqua-700: var(--nc-dark-acqua-700);\n --nc-acqua-800: var(--nc-dark-acqua-800);\n --nc-acqua-900: var(--nc-dark-acqua-900);\n --nc-acqua-1000: var(--nc-dark-acqua-1000);\n --nc-viola-100: var(--nc-dark-viola-100);\n --nc-viola-200: var(--nc-dark-viola-200);\n --nc-viola-300: var(--nc-dark-viola-300);\n --nc-viola-400: var(--nc-dark-viola-400);\n --nc-viola-500: var(--nc-dark-viola-500);\n --nc-viola-600: var(--nc-dark-viola-600);\n --nc-viola-700: var(--nc-dark-viola-700);\n --nc-viola-800: var(--nc-dark-viola-800);\n --nc-viola-900: var(--nc-dark-viola-900);\n --nc-viola-1000: var(--nc-dark-viola-1000);\n --nc-rosa-100: var(--nc-dark-rosa-100);\n --nc-rosa-200: var(--nc-dark-rosa-200);\n --nc-rosa-300: var(--nc-dark-rosa-300);\n --nc-rosa-400: var(--nc-dark-rosa-400);\n --nc-rosa-500: var(--nc-dark-rosa-500);\n --nc-rosa-600: var(--nc-dark-rosa-600);\n --nc-rosa-700: var(--nc-dark-rosa-700);\n --nc-rosa-800: var(--nc-dark-rosa-800);\n --nc-rosa-900: var(--nc-dark-rosa-900);\n --nc-rosa-1000: var(--nc-dark-rosa-1000);\n --nc-category-teal-soft: var(--nc-dark-category-teal-soft);\n --nc-category-teal-deep: var(--nc-dark-category-teal-deep);\n --nc-category-purple-soft: var(--nc-dark-category-purple-soft);\n --nc-category-purple-deep: var(--nc-dark-category-purple-deep);\n --nc-category-pink-soft: var(--nc-dark-category-pink-soft);\n --nc-category-pink-deep: var(--nc-dark-category-pink-deep);\n --nc-material-scrim-opacity: var(--nc-material-dark-scrim-opacity);\n --nc-elevation-resting:\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.145),\n 0px 0px 0px 2px rgb(0% 0% 0%),\n 0px 1px 2px 0px rgb(0% 0% 0% / 0.5);\n --nc-elevation-raised:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.06),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.16),\n 0px 0px 0px 2px rgb(0% 0% 0%),\n 0px 12px 24px -8px rgb(0% 0% 0% / 0.8);\n --nc-elevation-floating:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.08),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.16),\n 0px 0px 0px 2px rgb(0% 0% 0%),\n 0px 24px 48px -12px rgb(0% 0% 0% / 0.9);\n --nc-elevation-modal:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.1),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.18),\n 0px 0px 0px 2px rgb(0% 0% 0%),\n 0px 48px 96px -24px rgb(0% 0% 0%);\n --nc-elevation-glass:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.1),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.14),\n 0px 16px 32px -12px rgb(0% 0% 0% / 0.8);\n }\n}";
|
|
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.5005 0.2804 266.17);\n --nc-action-foreground: oklch(1.0000 0.0000 0.00);\n --nc-action-hover: oklch(0.4602 0.2797 266.14);\n --nc-action-active: oklch(0.4202 0.2522 266.14);\n --nc-ink: oklch(0.1776 0.0000 0.00);\n --nc-body: oklch(0.5103 0.0000 0.00);\n --nc-muted: oklch(0.5278 0.0000 0.00);\n --nc-canvas: oklch(1.0000 0.0000 0.00);\n --nc-canvas-soft: oklch(0.9851 0.0000 0.00);\n --nc-canvas-soft-2: oklch(0.9702 0.0000 0.00);\n --nc-material-workspace: oklch(0.9851 0.0000 0.00);\n --nc-material-solid: oklch(1.0000 0.0000 0.00);\n --nc-material-resting: oklch(1.0000 0.0000 0.00);\n --nc-material-raised: oklch(1.0000 0.0000 0.00);\n --nc-material-floating: oklch(1.0000 0.0000 0.00);\n --nc-material-modal: oklch(1.0000 0.0000 0.00);\n --nc-line: oklch(0.9219 0.0000 0.00);\n --nc-input: oklch(0.5624 0.0000 0.00);\n --nc-focus-ring: oklch(0.1776 0.0000 0.00);\n --nc-scrim: oklch(0.9612 0.0000 0.00);\n --nc-link: oklch(0.5005 0.2804 266.17);\n --nc-link-deep: oklch(0.4202 0.2522 266.14);\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-logo-guide: oklch(0.6830 0.0000 0.00);\n --nc-chart-1: oklch(0.5005 0.2804 266.17);\n --nc-chart-2: oklch(0.6398 0.2044 356.46);\n --nc-chart-3: oklch(0.5015 0.1883 294.99);\n --nc-chart-4: oklch(0.6824 0.2108 37.70);\n --nc-chart-5: oklch(0.6161 0.1062 208.85);\n --nc-chart-6: oklch(0.5688 0.1995 26.59);\n --nc-chart-7: oklch(0.7691 0.1577 84.69);\n --nc-chart-8: oklch(0.6415 0.1644 153.23);\n --nc-chart-9: oklch(0.7191 0.1452 266.33);\n --nc-chart-10: oklch(0.8309 0.1048 356.57);\n --nc-cobalto-100: oklch(0.9754 0.0115 264.51);\n --nc-cobalto-200: oklch(0.9543 0.0215 265.76);\n --nc-cobalto-300: oklch(0.9297 0.0334 265.23);\n --nc-cobalto-400: oklch(0.8944 0.0509 267.00);\n --nc-cobalto-500: oklch(0.8308 0.0837 265.90);\n --nc-cobalto-600: oklch(0.7191 0.1452 266.33);\n --nc-cobalto-700: oklch(0.5005 0.2804 266.17);\n --nc-cobalto-800: oklch(0.4602 0.2797 266.14);\n --nc-cobalto-900: oklch(0.4202 0.2522 266.14);\n --nc-cobalto-1000: oklch(0.2811 0.1684 266.17);\n --nc-rosso-100: oklch(0.9752 0.0122 29.87);\n --nc-rosso-200: oklch(0.9552 0.0222 27.81);\n --nc-rosso-300: oklch(0.9290 0.0360 26.28);\n --nc-rosso-400: oklch(0.8944 0.0552 26.52);\n --nc-rosso-500: oklch(0.8304 0.0942 26.48);\n --nc-rosso-600: oklch(0.7201 0.1742 26.79);\n --nc-rosso-700: oklch(0.5688 0.1995 26.59);\n --nc-rosso-800: oklch(0.5297 0.1996 26.67);\n --nc-rosso-900: oklch(0.4882 0.1797 26.59);\n --nc-rosso-1000: oklch(0.2805 0.1143 26.81);\n --nc-arancio-100: oklch(0.9749 0.0125 35.73);\n --nc-arancio-200: oklch(0.9544 0.0233 37.38);\n --nc-arancio-300: oklch(0.9298 0.0366 36.77);\n --nc-arancio-400: oklch(0.8945 0.0567 37.21);\n --nc-arancio-500: oklch(0.8292 0.0974 37.12);\n --nc-arancio-600: oklch(0.7428 0.1602 37.76);\n --nc-arancio-700: oklch(0.6824 0.2108 37.70);\n --nc-arancio-800: oklch(0.6419 0.2102 37.75);\n --nc-arancio-900: oklch(0.4993 0.1647 37.64);\n --nc-arancio-1000: oklch(0.2801 0.0916 38.02);\n --nc-giallo-100: oklch(0.9860 0.0154 86.42);\n --nc-giallo-200: oklch(0.9699 0.0272 83.54);\n --nc-giallo-300: oklch(0.9555 0.0420 85.96);\n --nc-giallo-400: oklch(0.9298 0.0673 84.45);\n --nc-giallo-500: oklch(0.9004 0.1074 84.93);\n --nc-giallo-600: oklch(0.8696 0.1403 84.42);\n --nc-giallo-700: oklch(0.8466 0.1678 84.63);\n --nc-giallo-800: oklch(0.7691 0.1577 84.69);\n --nc-giallo-900: oklch(0.5305 0.1090 83.33);\n --nc-giallo-1000: oklch(0.3186 0.0654 84.14);\n --nc-verde-100: oklch(0.9747 0.0157 154.48);\n --nc-verde-200: oklch(0.9560 0.0265 152.38);\n --nc-verde-300: oklch(0.9290 0.0407 153.11);\n --nc-verde-400: oklch(0.8955 0.0664 152.93);\n --nc-verde-500: oklch(0.8310 0.1403 153.27);\n --nc-verde-600: oklch(0.7191 0.1645 153.16);\n --nc-verde-700: oklch(0.6415 0.1644 153.23);\n --nc-verde-800: oklch(0.6017 0.1542 153.23);\n --nc-verde-900: oklch(0.4992 0.1279 153.23);\n --nc-verde-1000: oklch(0.2815 0.0723 153.13);\n --nc-acqua-100: oklch(0.9752 0.0109 211.04);\n --nc-acqua-200: oklch(0.9559 0.0171 205.84);\n --nc-acqua-300: oklch(0.9297 0.0259 208.75);\n --nc-acqua-400: oklch(0.8954 0.0424 207.56);\n --nc-acqua-500: oklch(0.8304 0.0902 209.06);\n --nc-acqua-600: oklch(0.7205 0.1064 208.54);\n --nc-acqua-700: oklch(0.6161 0.1062 208.85);\n --nc-acqua-800: oklch(0.5765 0.0992 208.28);\n --nc-acqua-900: oklch(0.4990 0.0860 208.78);\n --nc-acqua-1000: oklch(0.2797 0.0484 210.29);\n --nc-viola-100: oklch(0.9745 0.0134 295.33);\n --nc-viola-200: oklch(0.9545 0.0243 296.12);\n --nc-viola-300: oklch(0.9290 0.0381 295.47);\n --nc-viola-400: oklch(0.8954 0.0563 294.18);\n --nc-viola-500: oklch(0.8289 0.0954 295.03);\n --nc-viola-600: oklch(0.7204 0.1631 294.91);\n --nc-viola-700: oklch(0.5015 0.1883 294.99);\n --nc-viola-800: oklch(0.4620 0.1886 294.84);\n --nc-viola-900: oklch(0.4227 0.1694 295.05);\n --nc-viola-1000: oklch(0.2796 0.1131 295.14);\n --nc-rosa-100: oklch(0.9746 0.0139 355.00);\n --nc-rosa-200: oklch(0.9555 0.0241 358.28);\n --nc-rosa-300: oklch(0.9307 0.0386 357.63);\n --nc-rosa-400: oklch(0.8944 0.0614 356.49);\n --nc-rosa-500: oklch(0.8309 0.1048 356.57);\n --nc-rosa-600: oklch(0.7193 0.1969 356.59);\n --nc-rosa-700: oklch(0.6398 0.2044 356.46);\n --nc-rosa-800: oklch(0.6001 0.2050 356.50);\n --nc-rosa-900: oklch(0.5009 0.1842 356.43);\n --nc-rosa-1000: oklch(0.2808 0.1147 356.80);\n --nc-dark-canvas: oklch(0.0000 0.0000 0.00);\n --nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00);\n --nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00);\n --nc-dark-material-workspace: oklch(0.0000 0.0000 0.00);\n --nc-dark-material-solid: oklch(0.0000 0.0000 0.00);\n --nc-dark-material-resting: oklch(0.1448 0.0000 0.00);\n --nc-dark-material-raised: oklch(0.1684 0.0000 0.00);\n --nc-dark-material-floating: oklch(0.1684 0.0000 0.00);\n --nc-dark-material-modal: oklch(0.1684 0.0000 0.00);\n --nc-card-graphite: oklch(0.1957 0.0000 0.00);\n --nc-dark-ink: oklch(0.9461 0.0000 0.00);\n --nc-dark-body: oklch(0.7090 0.0000 0.00);\n --nc-dark-muted: oklch(0.6993 0.0000 0.00);\n --nc-dark-line: oklch(0.3485 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.5005 0.2804 266.17);\n --nc-dark-action-foreground: oklch(1.0000 0.0000 0.00);\n --nc-dark-action-hover: oklch(0.4602 0.2797 266.14);\n --nc-dark-action-active: oklch(0.4202 0.2522 266.14);\n --nc-dark-link: oklch(0.7993 0.1005 266.67);\n --nc-dark-link-deep: oklch(0.8944 0.0509 267.00);\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.5005 0.2804 266.17);\n --nc-dark-state-review: oklch(0.8466 0.1678 84.63);\n --nc-dark-state-blocked: oklch(0.5688 0.1995 26.59);\n --nc-dark-state-complete: oklch(0.6415 0.1644 153.23);\n --nc-dark-logo-dot: oklch(0.5923 0.2215 269.61);\n --nc-dark-navigation-selection-bg: oklch(0.2393 0.0000 0.00);\n --nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00);\n --nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00);\n --nc-dark-chart-1: oklch(0.6007 0.2160 266.02);\n --nc-dark-chart-2: oklch(0.6611 0.1941 356.61);\n --nc-dark-chart-3: oklch(0.6004 0.1789 294.79);\n --nc-dark-chart-4: oklch(0.6612 0.2003 37.74);\n --nc-dark-chart-5: oklch(0.6568 0.1009 208.69);\n --nc-dark-chart-6: oklch(0.6084 0.1887 26.65);\n --nc-dark-chart-7: oklch(0.8466 0.1678 84.63);\n --nc-dark-chart-8: oklch(0.6608 0.1568 153.03);\n --nc-dark-chart-9: oklch(0.7993 0.1005 266.67);\n --nc-dark-chart-10: oklch(0.8005 0.1279 356.32);\n --nc-dark-cobalto-100: oklch(0.1915 0.0982 266.32);\n --nc-dark-cobalto-200: oklch(0.2197 0.1184 266.25);\n --nc-dark-cobalto-300: oklch(0.2604 0.1398 265.97);\n --nc-dark-cobalto-400: oklch(0.2997 0.1624 266.24);\n --nc-dark-cobalto-500: oklch(0.3702 0.1966 266.08);\n --nc-dark-cobalto-600: oklch(0.6007 0.2160 266.02);\n --nc-dark-cobalto-700: oklch(0.5005 0.2804 266.17);\n --nc-dark-cobalto-800: oklch(0.4602 0.2797 266.14);\n --nc-dark-cobalto-900: oklch(0.7993 0.1005 266.67);\n --nc-dark-cobalto-1000: oklch(0.9604 0.0186 265.98);\n --nc-dark-rosso-100: oklch(0.1907 0.0689 26.80);\n --nc-dark-rosso-200: oklch(0.2215 0.0837 26.41);\n --nc-dark-rosso-300: oklch(0.2596 0.0994 26.37);\n --nc-dark-rosso-400: oklch(0.3014 0.1159 26.97);\n --nc-dark-rosso-500: oklch(0.3705 0.1397 26.54);\n --nc-dark-rosso-600: oklch(0.6084 0.1887 26.65);\n --nc-dark-rosso-700: oklch(0.5688 0.1995 26.59);\n --nc-dark-rosso-800: oklch(0.5297 0.1996 26.67);\n --nc-dark-rosso-900: oklch(0.7992 0.1149 26.43);\n --nc-dark-rosso-1000: oklch(0.9598 0.0198 25.17);\n --nc-dark-arancio-100: oklch(0.1909 0.0632 37.47);\n --nc-dark-arancio-200: oklch(0.2201 0.0732 37.26);\n --nc-dark-arancio-300: oklch(0.2598 0.0852 37.90);\n --nc-dark-arancio-400: oklch(0.2988 0.0989 37.50);\n --nc-dark-arancio-500: oklch(0.3706 0.1219 37.77);\n --nc-dark-arancio-600: oklch(0.6612 0.2003 37.74);\n --nc-dark-arancio-700: oklch(0.6824 0.2108 37.70);\n --nc-dark-arancio-800: oklch(0.6419 0.2102 37.75);\n --nc-dark-arancio-900: oklch(0.7993 0.1180 37.52);\n --nc-dark-arancio-1000: oklch(0.9590 0.0208 36.03);\n --nc-dark-giallo-100: oklch(0.1903 0.0391 84.07);\n --nc-dark-giallo-200: oklch(0.2185 0.0449 83.81);\n --nc-dark-giallo-300: oklch(0.2592 0.0532 83.54);\n --nc-dark-giallo-400: oklch(0.3008 0.0616 85.18);\n --nc-dark-giallo-500: oklch(0.3705 0.0759 85.25);\n --nc-dark-giallo-600: oklch(0.6598 0.1353 84.83);\n --nc-dark-giallo-700: oklch(0.8466 0.1678 84.63);\n --nc-dark-giallo-800: oklch(0.8064 0.1654 84.43);\n --nc-dark-giallo-900: oklch(0.8007 0.1595 84.74);\n --nc-dark-giallo-1000: oklch(0.9604 0.0256 84.59);\n --nc-dark-verde-100: oklch(0.1910 0.0488 153.39);\n --nc-dark-verde-200: oklch(0.2208 0.0571 152.80);\n --nc-dark-verde-300: oklch(0.2606 0.0664 153.49);\n --nc-dark-verde-400: oklch(0.2987 0.0765 153.24);\n --nc-dark-verde-500: oklch(0.3685 0.0944 153.24);\n --nc-dark-verde-600: oklch(0.6608 0.1568 153.03);\n --nc-dark-verde-700: oklch(0.6415 0.1644 153.23);\n --nc-dark-verde-800: oklch(0.6017 0.1542 153.23);\n --nc-dark-verde-900: oklch(0.7994 0.1555 153.29);\n --nc-dark-verde-1000: oklch(0.9600 0.0248 152.88);\n --nc-dark-acqua-100: oklch(0.1914 0.0330 209.05);\n --nc-dark-acqua-200: oklch(0.2192 0.0379 209.81);\n --nc-dark-acqua-300: oklch(0.2610 0.0450 209.30);\n --nc-dark-acqua-400: oklch(0.3011 0.0519 208.95);\n --nc-dark-acqua-500: oklch(0.3711 0.0639 208.82);\n --nc-dark-acqua-600: oklch(0.6568 0.1009 208.69);\n --nc-dark-acqua-700: oklch(0.6161 0.1062 208.85);\n --nc-dark-acqua-800: oklch(0.5765 0.0992 208.28);\n --nc-dark-acqua-900: oklch(0.8004 0.1007 208.37);\n --nc-dark-acqua-1000: oklch(0.9596 0.0161 206.44);\n --nc-dark-viola-100: oklch(0.1897 0.0654 295.79);\n --nc-dark-viola-200: oklch(0.2192 0.0805 294.49);\n --nc-dark-viola-300: oklch(0.2605 0.0949 295.18);\n --nc-dark-viola-400: oklch(0.2990 0.1087 294.76);\n --nc-dark-viola-500: oklch(0.3702 0.1310 295.14);\n --nc-dark-viola-600: oklch(0.6004 0.1789 294.79);\n --nc-dark-viola-700: oklch(0.5015 0.1883 294.99);\n --nc-dark-viola-800: oklch(0.4620 0.1886 294.84);\n --nc-dark-viola-900: oklch(0.8000 0.1131 295.20);\n --nc-dark-viola-1000: oklch(0.9591 0.0215 294.60);\n --nc-dark-rosa-100: oklch(0.1902 0.0716 355.67);\n --nc-dark-rosa-200: oklch(0.2198 0.0850 357.06);\n --nc-dark-rosa-300: oklch(0.2591 0.1026 356.37);\n --nc-dark-rosa-400: oklch(0.3000 0.1188 356.62);\n --nc-dark-rosa-500: oklch(0.3695 0.1426 356.71);\n --nc-dark-rosa-600: oklch(0.6611 0.1941 356.61);\n --nc-dark-rosa-700: oklch(0.6398 0.2044 356.46);\n --nc-dark-rosa-800: oklch(0.6001 0.2050 356.50);\n --nc-dark-rosa-900: oklch(0.8005 0.1279 356.32);\n --nc-dark-rosa-1000: oklch(0.9599 0.0220 356.32);\n --nc-category-teal-soft: oklch(0.9585 0.0244 187.32);\n --nc-category-teal-deep: oklch(0.4600 0.0788 185.34);\n --nc-dark-category-teal-soft: oklch(0.2627 0.0410 187.13);\n --nc-dark-category-teal-deep: oklch(0.8398 0.1008 186.70);\n --nc-category-purple-soft: oklch(0.9464 0.0327 307.17);\n --nc-category-purple-deep: oklch(0.4541 0.1958 308.26);\n --nc-dark-category-purple-soft: oklch(0.2479 0.0790 306.78);\n --nc-dark-category-purple-deep: oklch(0.7911 0.1271 310.92);\n --nc-category-pink-soft: oklch(0.9476 0.0263 347.12);\n --nc-category-pink-deep: oklch(0.4863 0.1711 355.09);\n --nc-dark-category-pink-soft: oklch(0.2550 0.0598 353.51);\n --nc-dark-category-pink-deep: oklch(0.8108 0.1129 347.21);\n --nc-xxs: 4px;\n --nc-xs: 8px;\n --nc-sm: 12px;\n --nc-md: 16px;\n --nc-lg: 24px;\n --nc-xl: 32px;\n --nc-2xl: 40px;\n --nc-3xl: 48px;\n --nc-4xl: 64px;\n --nc-5xl: 96px;\n --nc-6xl: 128px;\n --nc-guide: 1px;\n --nc-icon-stroke: 1.5px;\n --nc-icon-stroke-sm: 1.25px;\n --nc-focus-outline-width: 2px;\n --nc-focus-outline-offset: 2px;\n --nc-control-height: 36px;\n --nc-control-height-sm: 32px;\n --nc-control-height-lg: 40px;\n --nc-control-height-xs: 24px;\n --nc-control-padding-inline: 12px;\n --nc-button-padding-inline-sm: 6px;\n --nc-button-padding-inline: 10px;\n --nc-button-padding-inline-lg: 14px;\n --nc-card-padding: 20px;\n --nc-touch-target: 44px;\n --nc-rounded-none: 0px;\n --nc-rounded-xs: 2px;\n --nc-rounded-xs-plus: 4px;\n --nc-rounded-sm: 6px;\n --nc-rounded-md: 8px;\n --nc-rounded-lg: 12px;\n --nc-rounded-xl: 16px;\n --nc-rounded-2xl: 20px;\n --nc-rounded-3xl: 24px;\n --nc-rounded-full: 9999px;\n --nc-type-display-xl-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-xl-font-size: 72px;\n --nc-type-display-xl-font-weight: 600;\n --nc-type-display-xl-line-height: 72px;\n --nc-type-display-xl-letter-spacing: -4.32px;\n --nc-type-display-wide-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-wide-font-size: 64px;\n --nc-type-display-wide-font-weight: 600;\n --nc-type-display-wide-line-height: 64px;\n --nc-type-display-wide-letter-spacing: -3.84px;\n --nc-type-display-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-lg-font-size: 56px;\n --nc-type-display-lg-font-weight: 600;\n --nc-type-display-lg-line-height: 56px;\n --nc-type-display-lg-letter-spacing: -3.36px;\n --nc-type-display-section-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-section-font-size: 48px;\n --nc-type-display-section-font-weight: 600;\n --nc-type-display-section-line-height: 56px;\n --nc-type-display-section-letter-spacing: -2.88px;\n --nc-type-display-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-display-md-font-size: 40px;\n --nc-type-display-md-font-weight: 600;\n --nc-type-display-md-line-height: 48px;\n --nc-type-display-md-letter-spacing: -2.4px;\n --nc-type-heading-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-lg-font-size: 32px;\n --nc-type-heading-lg-font-weight: 600;\n --nc-type-heading-lg-line-height: 40px;\n --nc-type-heading-lg-letter-spacing: -1.28px;\n --nc-type-heading-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-md-font-size: 24px;\n --nc-type-heading-md-font-weight: 600;\n --nc-type-heading-md-line-height: 32px;\n --nc-type-heading-md-letter-spacing: -0.96px;\n --nc-type-heading-sm-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-sm-font-size: 20px;\n --nc-type-heading-sm-font-weight: 600;\n --nc-type-heading-sm-line-height: 26px;\n --nc-type-heading-sm-letter-spacing: -0.4px;\n --nc-type-heading-xs-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-xs-font-size: 16px;\n --nc-type-heading-xs-font-weight: 600;\n --nc-type-heading-xs-line-height: 24px;\n --nc-type-heading-xs-letter-spacing: -0.32px;\n --nc-type-heading-compact-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-heading-compact-font-size: 14px;\n --nc-type-heading-compact-font-weight: 600;\n --nc-type-heading-compact-line-height: 20px;\n --nc-type-heading-compact-letter-spacing: -0.28px;\n --nc-type-button-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-button-lg-font-size: 16px;\n --nc-type-button-lg-font-weight: 500;\n --nc-type-button-lg-line-height: 24px;\n --nc-type-button-lg-letter-spacing: 0px;\n --nc-type-button-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-button-font-size: 14px;\n --nc-type-button-font-weight: 500;\n --nc-type-button-line-height: 21px;\n --nc-type-button-letter-spacing: 0px;\n --nc-type-button-xs-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-button-xs-font-size: 12px;\n --nc-type-button-xs-font-weight: 500;\n --nc-type-button-xs-line-height: 16px;\n --nc-type-button-xs-letter-spacing: 0px;\n --nc-type-label-display-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-display-font-size: 20px;\n --nc-type-label-display-font-weight: 400;\n --nc-type-label-display-line-height: 32px;\n --nc-type-label-display-letter-spacing: 0px;\n --nc-type-label-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-lg-font-size: 18px;\n --nc-type-label-lg-font-weight: 400;\n --nc-type-label-lg-line-height: 20px;\n --nc-type-label-lg-letter-spacing: 0px;\n --nc-type-label-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-md-font-size: 16px;\n --nc-type-label-md-font-weight: 400;\n --nc-type-label-md-line-height: 20px;\n --nc-type-label-md-letter-spacing: 0px;\n --nc-type-label-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-font-size: 14px;\n --nc-type-label-font-weight: 400;\n --nc-type-label-line-height: 20px;\n --nc-type-label-letter-spacing: 0px;\n --nc-type-label-sm-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-label-sm-font-size: 13px;\n --nc-type-label-sm-font-weight: 400;\n --nc-type-label-sm-line-height: 16px;\n --nc-type-label-sm-letter-spacing: 0px;\n --nc-type-caption-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-caption-font-size: 12px;\n --nc-type-caption-font-weight: 400;\n --nc-type-caption-line-height: 16px;\n --nc-type-caption-letter-spacing: 0px;\n --nc-type-label-mono-lg-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-label-mono-lg-font-size: 14px;\n --nc-type-label-mono-lg-font-weight: 400;\n --nc-type-label-mono-lg-line-height: 20px;\n --nc-type-label-mono-lg-letter-spacing: 0px;\n --nc-type-label-mono-md-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-label-mono-md-font-size: 13px;\n --nc-type-label-mono-md-font-weight: 400;\n --nc-type-label-mono-md-line-height: 20px;\n --nc-type-label-mono-md-letter-spacing: 0px;\n --nc-type-label-mono-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-label-mono-font-size: 12px;\n --nc-type-label-mono-font-weight: 400;\n --nc-type-label-mono-line-height: 16px;\n --nc-type-label-mono-letter-spacing: 0px;\n --nc-type-body-display-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-display-font-size: 24px;\n --nc-type-body-display-font-weight: 400;\n --nc-type-body-display-line-height: 36px;\n --nc-type-body-display-letter-spacing: 0px;\n --nc-type-body-lead-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-lead-font-size: 20px;\n --nc-type-body-lead-font-weight: 400;\n --nc-type-body-lead-line-height: 36px;\n --nc-type-body-lead-letter-spacing: 0px;\n --nc-type-body-lg-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-lg-font-size: 18px;\n --nc-type-body-lg-font-weight: 400;\n --nc-type-body-lg-line-height: 28px;\n --nc-type-body-lg-letter-spacing: 0px;\n --nc-type-body-md-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-md-font-size: 16px;\n --nc-type-body-md-font-weight: 400;\n --nc-type-body-md-line-height: 24px;\n --nc-type-body-md-letter-spacing: 0px;\n --nc-type-body-sm-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-sm-font-size: 14px;\n --nc-type-body-sm-font-weight: 400;\n --nc-type-body-sm-line-height: 20px;\n --nc-type-body-sm-letter-spacing: 0px;\n --nc-type-body-compact-font-family:\n Geist,\n Inter,\n system-ui,\n -apple-system,\n sans-serif;\n --nc-type-body-compact-font-size: 13px;\n --nc-type-body-compact-font-weight: 400;\n --nc-type-body-compact-line-height: 18px;\n --nc-type-body-compact-letter-spacing: 0px;\n --nc-type-code-font-family:\n Geist Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n monospace;\n --nc-type-code-font-size: 13px;\n --nc-type-code-font-weight: 400;\n --nc-type-code-line-height: 18px;\n --nc-type-code-letter-spacing: 0px;\n --nc-material-scrim-opacity: 80%;\n --nc-material-dark-scrim-opacity: 60%;\n --nc-material-glass-opacity: 55%;\n --nc-material-glass-saturation: 180%;\n --nc-material-glass-blur: 20px;\n --nc-elevation-resting: 0px 0px 0px 1px rgb(0% 0% 0% / 0.08), 0px 2px 2px 0px rgb(0% 0% 0% / 0.04);\n --nc-elevation-raised:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 2px 2px 0px rgb(0% 0% 0% / 0.04),\n 0px 8px 16px -4px rgb(0% 0% 0% / 0.08);\n --nc-elevation-floating:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 1px 1px 0px rgb(0% 0% 0% / 0.02),\n 0px 4px 8px -4px rgb(0% 0% 0% / 0.06),\n 0px 16px 32px -8px rgb(0% 0% 0% / 0.1);\n --nc-elevation-modal:\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 8px 24px -12px rgb(0% 0% 0% / 0.12),\n 0px 32px 72px -12px rgb(0% 0% 0% / 0.12);\n --nc-elevation-glass:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.75),\n inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.35),\n 0px 0px 0px 1px rgb(0% 0% 0% / 0.08),\n 0px 4px 8px -4px rgb(0% 0% 0% / 0.06),\n 0px 16px 32px -8px rgb(0% 0% 0% / 0.08);\n --nc-duration-control: 100ms;\n --nc-duration-close: 140ms;\n --nc-duration-confirm: 180ms;\n --nc-duration-open: 220ms;\n --nc-duration-msg-in: 240ms;\n --nc-duration-transition: 240ms;\n --nc-duration-arrive: 300ms;\n --nc-duration-drawer-swipe: 400ms;\n --nc-duration-drawer: 450ms;\n --nc-duration-wait: 1.6s;\n --nc-ease-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1);\n --nc-ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);\n --nc-ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);\n --nc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);\n --nc-content-max: 1200px;\n --nc-gutter-mobile: 20px;\n --nc-gutter-tablet: 40px;\n --nc-gutter-desktop: 64px;\n --nc-section-step-mobile: 64px;\n --nc-section-step-desktop: 96px;\n }\n}\n\n\n@layer theme {\n .dark {\n --nc-canvas: var(--nc-dark-canvas);\n --nc-canvas-soft: var(--nc-dark-canvas-soft);\n --nc-canvas-soft-2: var(--nc-dark-canvas-soft-2);\n --nc-material-workspace: var(--nc-dark-material-workspace);\n --nc-material-solid: var(--nc-dark-material-solid);\n --nc-material-resting: var(--nc-dark-material-resting);\n --nc-material-raised: var(--nc-dark-material-raised);\n --nc-material-floating: var(--nc-dark-material-floating);\n --nc-material-modal: var(--nc-dark-material-modal);\n --nc-ink: var(--nc-dark-ink);\n --nc-body: var(--nc-dark-body);\n --nc-muted: var(--nc-dark-muted);\n --nc-line: var(--nc-dark-line);\n --nc-input: var(--nc-dark-input);\n --nc-action: var(--nc-dark-action);\n --nc-action-foreground: var(--nc-dark-action-foreground);\n --nc-action-hover: var(--nc-dark-action-hover);\n --nc-action-active: var(--nc-dark-action-active);\n --nc-link: var(--nc-dark-link);\n --nc-link-deep: var(--nc-dark-link-deep);\n --nc-link-bg-soft: var(--nc-dark-link-bg-soft);\n --nc-focus-ring: var(--nc-dark-focus-ring);\n --nc-scrim: var(--nc-dark-scrim);\n --nc-error: var(--nc-dark-error);\n --nc-error-soft: var(--nc-dark-error-soft);\n --nc-error-deep: var(--nc-dark-error-deep);\n --nc-warning: var(--nc-dark-warning);\n --nc-warning-soft: var(--nc-dark-warning-soft);\n --nc-warning-deep: var(--nc-dark-warning-deep);\n --nc-info: var(--nc-dark-info);\n --nc-info-soft: var(--nc-dark-info-soft);\n --nc-info-deep: var(--nc-dark-info-deep);\n --nc-success: var(--nc-dark-success);\n --nc-success-soft: var(--nc-dark-success-soft);\n --nc-success-deep: var(--nc-dark-success-deep);\n --nc-state-ready: var(--nc-dark-state-ready);\n --nc-state-running: var(--nc-dark-state-running);\n --nc-state-review: var(--nc-dark-state-review);\n --nc-state-blocked: var(--nc-dark-state-blocked);\n --nc-state-complete: var(--nc-dark-state-complete);\n --nc-logo-dot: var(--nc-dark-logo-dot);\n --nc-navigation-selection-bg: var(--nc-dark-navigation-selection-bg);\n --nc-navigation-selection-fg: var(--nc-dark-navigation-selection-fg);\n --nc-navigation-selection-hover: var(--nc-dark-navigation-selection-hover);\n --nc-chart-1: var(--nc-dark-chart-1);\n --nc-chart-2: var(--nc-dark-chart-2);\n --nc-chart-3: var(--nc-dark-chart-3);\n --nc-chart-4: var(--nc-dark-chart-4);\n --nc-chart-5: var(--nc-dark-chart-5);\n --nc-chart-6: var(--nc-dark-chart-6);\n --nc-chart-7: var(--nc-dark-chart-7);\n --nc-chart-8: var(--nc-dark-chart-8);\n --nc-chart-9: var(--nc-dark-chart-9);\n --nc-chart-10: var(--nc-dark-chart-10);\n --nc-cobalto-100: var(--nc-dark-cobalto-100);\n --nc-cobalto-200: var(--nc-dark-cobalto-200);\n --nc-cobalto-300: var(--nc-dark-cobalto-300);\n --nc-cobalto-400: var(--nc-dark-cobalto-400);\n --nc-cobalto-500: var(--nc-dark-cobalto-500);\n --nc-cobalto-600: var(--nc-dark-cobalto-600);\n --nc-cobalto-700: var(--nc-dark-cobalto-700);\n --nc-cobalto-800: var(--nc-dark-cobalto-800);\n --nc-cobalto-900: var(--nc-dark-cobalto-900);\n --nc-cobalto-1000: var(--nc-dark-cobalto-1000);\n --nc-rosso-100: var(--nc-dark-rosso-100);\n --nc-rosso-200: var(--nc-dark-rosso-200);\n --nc-rosso-300: var(--nc-dark-rosso-300);\n --nc-rosso-400: var(--nc-dark-rosso-400);\n --nc-rosso-500: var(--nc-dark-rosso-500);\n --nc-rosso-600: var(--nc-dark-rosso-600);\n --nc-rosso-700: var(--nc-dark-rosso-700);\n --nc-rosso-800: var(--nc-dark-rosso-800);\n --nc-rosso-900: var(--nc-dark-rosso-900);\n --nc-rosso-1000: var(--nc-dark-rosso-1000);\n --nc-arancio-100: var(--nc-dark-arancio-100);\n --nc-arancio-200: var(--nc-dark-arancio-200);\n --nc-arancio-300: var(--nc-dark-arancio-300);\n --nc-arancio-400: var(--nc-dark-arancio-400);\n --nc-arancio-500: var(--nc-dark-arancio-500);\n --nc-arancio-600: var(--nc-dark-arancio-600);\n --nc-arancio-700: var(--nc-dark-arancio-700);\n --nc-arancio-800: var(--nc-dark-arancio-800);\n --nc-arancio-900: var(--nc-dark-arancio-900);\n --nc-arancio-1000: var(--nc-dark-arancio-1000);\n --nc-giallo-100: var(--nc-dark-giallo-100);\n --nc-giallo-200: var(--nc-dark-giallo-200);\n --nc-giallo-300: var(--nc-dark-giallo-300);\n --nc-giallo-400: var(--nc-dark-giallo-400);\n --nc-giallo-500: var(--nc-dark-giallo-500);\n --nc-giallo-600: var(--nc-dark-giallo-600);\n --nc-giallo-700: var(--nc-dark-giallo-700);\n --nc-giallo-800: var(--nc-dark-giallo-800);\n --nc-giallo-900: var(--nc-dark-giallo-900);\n --nc-giallo-1000: var(--nc-dark-giallo-1000);\n --nc-verde-100: var(--nc-dark-verde-100);\n --nc-verde-200: var(--nc-dark-verde-200);\n --nc-verde-300: var(--nc-dark-verde-300);\n --nc-verde-400: var(--nc-dark-verde-400);\n --nc-verde-500: var(--nc-dark-verde-500);\n --nc-verde-600: var(--nc-dark-verde-600);\n --nc-verde-700: var(--nc-dark-verde-700);\n --nc-verde-800: var(--nc-dark-verde-800);\n --nc-verde-900: var(--nc-dark-verde-900);\n --nc-verde-1000: var(--nc-dark-verde-1000);\n --nc-acqua-100: var(--nc-dark-acqua-100);\n --nc-acqua-200: var(--nc-dark-acqua-200);\n --nc-acqua-300: var(--nc-dark-acqua-300);\n --nc-acqua-400: var(--nc-dark-acqua-400);\n --nc-acqua-500: var(--nc-dark-acqua-500);\n --nc-acqua-600: var(--nc-dark-acqua-600);\n --nc-acqua-700: var(--nc-dark-acqua-700);\n --nc-acqua-800: var(--nc-dark-acqua-800);\n --nc-acqua-900: var(--nc-dark-acqua-900);\n --nc-acqua-1000: var(--nc-dark-acqua-1000);\n --nc-viola-100: var(--nc-dark-viola-100);\n --nc-viola-200: var(--nc-dark-viola-200);\n --nc-viola-300: var(--nc-dark-viola-300);\n --nc-viola-400: var(--nc-dark-viola-400);\n --nc-viola-500: var(--nc-dark-viola-500);\n --nc-viola-600: var(--nc-dark-viola-600);\n --nc-viola-700: var(--nc-dark-viola-700);\n --nc-viola-800: var(--nc-dark-viola-800);\n --nc-viola-900: var(--nc-dark-viola-900);\n --nc-viola-1000: var(--nc-dark-viola-1000);\n --nc-rosa-100: var(--nc-dark-rosa-100);\n --nc-rosa-200: var(--nc-dark-rosa-200);\n --nc-rosa-300: var(--nc-dark-rosa-300);\n --nc-rosa-400: var(--nc-dark-rosa-400);\n --nc-rosa-500: var(--nc-dark-rosa-500);\n --nc-rosa-600: var(--nc-dark-rosa-600);\n --nc-rosa-700: var(--nc-dark-rosa-700);\n --nc-rosa-800: var(--nc-dark-rosa-800);\n --nc-rosa-900: var(--nc-dark-rosa-900);\n --nc-rosa-1000: var(--nc-dark-rosa-1000);\n --nc-category-teal-soft: var(--nc-dark-category-teal-soft);\n --nc-category-teal-deep: var(--nc-dark-category-teal-deep);\n --nc-category-purple-soft: var(--nc-dark-category-purple-soft);\n --nc-category-purple-deep: var(--nc-dark-category-purple-deep);\n --nc-category-pink-soft: var(--nc-dark-category-pink-soft);\n --nc-category-pink-deep: var(--nc-dark-category-pink-deep);\n --nc-material-scrim-opacity: var(--nc-material-dark-scrim-opacity);\n --nc-elevation-resting:\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.145),\n 0px 0px 0px 2px rgb(0% 0% 0%),\n 0px 1px 2px 0px rgb(0% 0% 0% / 0.5);\n --nc-elevation-raised:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.06),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.16),\n 0px 0px 0px 2px rgb(0% 0% 0%),\n 0px 12px 24px -8px rgb(0% 0% 0% / 0.8);\n --nc-elevation-floating:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.08),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.16),\n 0px 0px 0px 2px rgb(0% 0% 0%),\n 0px 24px 48px -12px rgb(0% 0% 0% / 0.9);\n --nc-elevation-modal:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.1),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.18),\n 0px 0px 0px 2px rgb(0% 0% 0%),\n 0px 48px 96px -24px rgb(0% 0% 0%);\n --nc-elevation-glass:\n inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.1),\n 0px 0px 0px 1px rgb(100% 100% 100% / 0.14),\n 0px 16px 32px -12px rgb(0% 0% 0% / 0.8);\n }\n}";
|
|
3
3
|
export const brandWordmarkSvg = "<svg data-slot=\"brand-wordmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 858 150\" width=\"137\" height=\"24\" class=\"block h-6 w-auto\" role=\"img\" aria-label=\"nadicode\"><g fill=\"none\" stroke=\"currentColor\" stroke-width=\"18\"><path d=\"M9 150V100A41 41 0 0 1 91 100V150\"></path><circle cx=\"172\" cy=\"100\" r=\"41\"></circle><path d=\"M213 50V150\"></path><circle cx=\"294\" cy=\"100\" r=\"41\"></circle><path d=\"M335 0V150\"></path><path d=\"M375 50V150\"></path><path d=\"M484.99 71.01A41 41 0 1 0 484.99 128.99\"></path><circle cx=\"564\" cy=\"100\" r=\"41\"></circle><circle cx=\"686\" cy=\"100\" r=\"41\"></circle><path d=\"M727 0V150\"></path><path d=\"M767 100H849A41 41 0 1 0 839.41 126.35\"></path></g><circle cx=\"375\" cy=\"21\" r=\"14\" fill=\"var(--nc-logo-dot)\"></circle></svg>";
|
|
@@ -66,6 +66,19 @@
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
+
/*
|
|
70
|
+
* A conversation's chat bar, in every product that has one (DESIGN.md
|
|
71
|
+
* "Elevation & Depth"): glass over the messages that scroll under it, with
|
|
72
|
+
* the glass edge and no border of its own, at the chat bar's corner. Each
|
|
73
|
+
* product's adapter applies it to the bar it carries; none draws the bar
|
|
74
|
+
* itself, so Nadia's and Alveare's never drift apart.
|
|
75
|
+
*/
|
|
76
|
+
@utility nc-chat-bar {
|
|
77
|
+
@apply nc-glass;
|
|
78
|
+
border: 0;
|
|
79
|
+
border-radius: var(--nc-rounded-3xl);
|
|
80
|
+
}
|
|
81
|
+
|
|
69
82
|
/*
|
|
70
83
|
* The four elevation rungs. Each utility paints the whole recipe of its rung
|
|
71
84
|
* from the generated --nc-elevation-* token, which carries the rung's own
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nadicodeai/ui",
|
|
3
|
-
"version": "12.1.
|
|
3
|
+
"version": "12.1.168",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"imports": {
|
|
6
6
|
"#jsx": "./src/jsx/index.ts",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"@base-ui/react": "^1.9.0",
|
|
73
73
|
"@iconify-icons/logos": "^2.0.3",
|
|
74
74
|
"@iconify/react": "^6.0.2",
|
|
75
|
-
"@nadicodeai/design-system": "12.1.
|
|
75
|
+
"@nadicodeai/design-system": "12.1.168",
|
|
76
76
|
"@tanstack/react-table": "^9.3.1",
|
|
77
77
|
"@vgpu/wgsl": "0.6.0",
|
|
78
78
|
"class-variance-authority": "^0.7.1",
|