@nadicodeai/ui 1.1.1 → 2.0.0
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/alert-dialog.js +1 -1
- package/dist/components/card.js +1 -1
- package/dist/components/chart-breakdown-table.d.ts +1 -1
- package/dist/components/chart-sparkline.d.ts +2 -1
- package/dist/components/chart-sparkline.d.ts.map +1 -1
- package/dist/components/chart-time-series.js +1 -1
- package/dist/components/chart.js +3 -3
- package/dist/components/combobox.js +1 -1
- package/dist/components/context-menu.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/drawer.js +1 -1
- package/dist/components/dropdown-menu.js +1 -1
- package/dist/components/glass-control.js +1 -1
- package/dist/components/hover-card.js +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/navigation-menu.js +2 -2
- package/dist/components/popover.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sheet.js +1 -1
- package/dist/components/sidebar.js +1 -1
- package/dist/components/sonner.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/eslint/rules/confirm-destructive-action.js +1 -1
- package/dist/eslint/rules/jsx-class-utility.js +1 -1
- package/dist/eslint/rules/no-app-feature-component.js +1 -1
- package/dist/eslint/rules/no-elevated-edge.js +10 -13
- package/dist/eslint/rules/no-mono-title-register.js +1 -1
- package/dist/eslint/rules/no-package-component-redefinition.js +1 -1
- package/dist/eslint/rules/no-paired-size-utility.js +1 -1
- package/dist/eslint/rules/no-repainted-focus.js +1 -1
- package/dist/eslint/rules/no-resting-settings-control.js +1 -1
- package/dist/eslint/rules/shadcn-composition.js +1 -1
- package/dist/internal/assistant-ui/thread.js +1 -1
- package/dist/internal/assistant-ui/tool-fallback.js +1 -1
- package/dist/internal/assistant-ui/tool-group.js +1 -1
- package/dist/styles/globals.css +25 -1
- package/docs/agent-visual.md +107 -0
- package/docs/consuming-cross-repo.md +3 -3
- package/docs/contract.md +25 -30
- package/docs/migration/2.0.0.md +69 -0
- package/llms.txt +2 -1
- package/package.json +2 -3
|
@@ -17,7 +17,7 @@ function AlertDialogOverlay({ className, ...props }) {
|
|
|
17
17
|
return (_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-scrim/scrim", overlayBackdropMotion, className), ...props }));
|
|
18
18
|
}
|
|
19
19
|
function AlertDialogContent({ className, size = "default", ...props }) {
|
|
20
|
-
return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-3xl border-0 bg-popover p-nadicode-lg text-popover-foreground
|
|
20
|
+
return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-3xl border-0 bg-popover p-nadicode-lg text-popover-foreground nc-elevation-modal outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm", modalOverlayMotion, className), ...props })] }));
|
|
21
21
|
}
|
|
22
22
|
function AlertDialogHeader({ className, ...props }) {
|
|
23
23
|
return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className), ...props }));
|
package/dist/components/card.js
CHANGED
|
@@ -6,7 +6,7 @@ function Card({ className, render, size = "default", surface = "resting", varian
|
|
|
6
6
|
return useRender({
|
|
7
7
|
defaultTagName: "div",
|
|
8
8
|
props: mergeProps({
|
|
9
|
-
className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-3xl border-0 bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:var(--spacing-nadicode-lg)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:var(--spacing-nadicode-md)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-3xl *:[img:last-child]:rounded-b-3xl", surface === "resting" && "
|
|
9
|
+
className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-3xl border-0 bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:var(--spacing-nadicode-lg)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:var(--spacing-nadicode-md)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-3xl *:[img:last-child]:rounded-b-3xl", surface === "resting" && "nc-elevation-resting", surface === "raised" && "nc-elevation-raised", variant === "interactive" && "cursor-pointer", variant === "link" && "nc-transition-paint", className),
|
|
10
10
|
}, props),
|
|
11
11
|
render,
|
|
12
12
|
state: { size, slot: "card", surface, variant },
|
|
@@ -4,7 +4,7 @@ import { type EntityColorMap } from "./chart-entity-colors.js";
|
|
|
4
4
|
/**
|
|
5
5
|
* chart-breakdown-table — entity breakdown with proportion bars for the
|
|
6
6
|
* console chart kit (issue #166; DESIGN.md "Entity-color assignment",
|
|
7
|
-
* proportion-bar carve-out
|
|
7
|
+
* proportion-bar carve-out).
|
|
8
8
|
*
|
|
9
9
|
* Real `<table>` semantics: each entity row reads name + value + proportion
|
|
10
10
|
* bar + share of total, with the entity-color dot resolved from the shared
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
/**
|
|
3
3
|
* chart-sparkline — hand-rolled SVG sparkline for the console chart kit
|
|
4
|
-
* (issue #166;
|
|
4
|
+
* (issue #166; sparkline carve-out from the Recharts chart pattern the rest of
|
|
5
|
+
* the kit is built on; DESIGN.md "Delta and trend
|
|
5
6
|
* encoding", "Mark specs").
|
|
6
7
|
*
|
|
7
8
|
* Sparklines normalize against a meaningful baseline, never the visible
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-sparkline.d.ts","sourceRoot":"","sources":["../../src/components/chart-sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B
|
|
1
|
+
{"version":3,"file":"chart-sparkline.d.ts","sourceRoot":"","sources":["../../src/components/chart-sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;;GAkBG;AAEH,KAAK,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C;;;;;GAKG;AACH,iBAAS,wBAAwB,CAC/B,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,WAAW,SAAI,GACd,cAAc,EAAE,CAgBlB;AAED,iBAAS,SAAS,CAAC,EACjB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAW,EACX,MAAW,EACX,MAA4B,EAC5B,WAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG;IAClF,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,yEAAyE;IACzE,QAAQ,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,qBA6CA;AAED,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -6,7 +6,7 @@ import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartToo
|
|
|
6
6
|
import { CHART_ENTITY_OTHER_COLOR, entityColor, } from "./chart-entity-colors.js";
|
|
7
7
|
/**
|
|
8
8
|
* chart-time-series — daily stacked time-series charts for the console chart
|
|
9
|
-
* kit (issue #166), built on the
|
|
9
|
+
* kit (issue #166), built on the Recharts foundation
|
|
10
10
|
* (ChartContainer / ChartTooltip / ChartLegend; chart.tsx untouched).
|
|
11
11
|
*
|
|
12
12
|
* Contract highlights (DESIGN.md "Mark specs", "Legends and labels"):
|
package/dist/components/chart.js
CHANGED
|
@@ -8,7 +8,7 @@ const THEMES = { light: "", dark: ".dark" };
|
|
|
8
8
|
const INITIAL_DIMENSION = { width: 320, height: 200 };
|
|
9
9
|
// Deviates from stock base-nova (raw interpolation): chart id and color values
|
|
10
10
|
// are sanitized before they reach the injected <style> tag, closing the CSS
|
|
11
|
-
// injection surface. Exercised through hostile-input rendering tests
|
|
11
|
+
// injection surface. Exercised through hostile-input rendering tests.
|
|
12
12
|
function sanitizeChartToken(value) {
|
|
13
13
|
const sanitized = value
|
|
14
14
|
.trim()
|
|
@@ -38,7 +38,7 @@ function ChartContainer({ id, className, children, config, initialDimension = IN
|
|
|
38
38
|
const uniqueId = React.useId();
|
|
39
39
|
const chartId = sanitizeChartToken(`chart-${id ?? uniqueId.replace(/:/g, "")}`);
|
|
40
40
|
return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn(
|
|
41
|
-
// eslint-disable-next-line no-restricted-syntax -- the hexes here are MATCH KEYS for Recharts' hardcoded default strokes (#ccc grid and reference lines, #fff dot and sector outlines), remapped onto theme tokens
|
|
41
|
+
// eslint-disable-next-line no-restricted-syntax -- the hexes here are MATCH KEYS for Recharts' hardcoded default strokes (#ccc grid and reference lines, #fff dot and sector outlines), remapped onto theme tokens. None of them is a colour this component emits.
|
|
42
42
|
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
|
|
43
43
|
}
|
|
44
44
|
const ChartStyle = ({ id, config }) => {
|
|
@@ -85,7 +85,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
|
|
|
85
85
|
return null;
|
|
86
86
|
}
|
|
87
87
|
const nestLabel = payload.length === 1 && indicator !== "dot";
|
|
88
|
-
return (_jsxs("div", { className: cn("grid min-w-32 items-start gap-1.5 rounded-md border-0 bg-popover px-nadicode-sm py-nadicode-filter-chip-gap text-xs text-popover-foreground
|
|
88
|
+
return (_jsxs("div", { className: cn("grid min-w-32 items-start gap-1.5 rounded-md border-0 bg-popover px-nadicode-sm py-nadicode-filter-chip-gap text-xs text-popover-foreground nc-elevation-floating", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload
|
|
89
89
|
.filter((item) => item.type !== "none")
|
|
90
90
|
.map((item, index) => {
|
|
91
91
|
const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
|
|
@@ -20,7 +20,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
|
|
|
20
20
|
return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
|
|
21
21
|
}
|
|
22
22
|
function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
|
|
23
|
-
return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-2xl border-0 nc-glass text-popover-foreground
|
|
23
|
+
return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-2xl border-0 nc-glass text-popover-foreground nc-elevation-floating data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-control-height *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none", anchoredOverlayMotion, className), ...props }) }) }));
|
|
24
24
|
}
|
|
25
25
|
function ComboboxList({ className, ...props }) {
|
|
26
26
|
return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-nadicode-xxs data-empty:p-0", className), ...props }));
|
|
@@ -14,7 +14,7 @@ function ContextMenuTrigger({ className, ...props }) {
|
|
|
14
14
|
return (_jsx(ContextMenuPrimitive.Trigger, { "data-slot": "context-menu-trigger", className: cn("select-none", className), ...props }));
|
|
15
15
|
}
|
|
16
16
|
function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) {
|
|
17
|
-
return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(ContextMenuPrimitive.Popup, { "data-slot": "context-menu-content", className: cn("z-50 max-h-(--available-height) min-w-36 overflow-x-hidden overflow-y-auto rounded-2xl border-0 nc-glass p-nadicode-xxs text-popover-foreground
|
|
17
|
+
return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(ContextMenuPrimitive.Popup, { "data-slot": "context-menu-content", className: cn("z-50 max-h-(--available-height) min-w-36 overflow-x-hidden overflow-y-auto rounded-2xl border-0 nc-glass p-nadicode-xxs text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden", anchoredOverlayMotion, className), ...props }) }) }));
|
|
18
18
|
}
|
|
19
19
|
function ContextMenuGroup({ ...props }) {
|
|
20
20
|
return _jsx(ContextMenuPrimitive.Group, { "data-slot": "context-menu-group", ...props });
|
|
@@ -20,7 +20,7 @@ function DialogOverlay({ className, motion = "default", ...props }) {
|
|
|
20
20
|
return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-scrim/scrim", motion === "instant" ? instantOverlayBackdropMotion : overlayBackdropMotion, className), ...props }));
|
|
21
21
|
}
|
|
22
22
|
function DialogContent({ className, children, showCloseButton = true, closeLabel = "Close", motion = "default", ...props }) {
|
|
23
|
-
return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, { motion: motion }), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-var(--nc-xl))] -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-3xl border-0 bg-popover p-nadicode-lg text-sm text-popover-foreground
|
|
23
|
+
return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, { motion: motion }), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-var(--nc-xl))] -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-3xl border-0 bg-popover p-nadicode-lg text-sm text-popover-foreground nc-elevation-modal outline-none sm:max-w-sm", motion === "instant" ? instantModalOverlayMotion : modalOverlayMotion, className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-nadicode-md right-nadicode-md", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] }));
|
|
24
24
|
}
|
|
25
25
|
function DialogHeader({ className, ...props }) {
|
|
26
26
|
return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));
|
|
@@ -36,7 +36,7 @@ function DrawerContent({ className, children, ...props }) {
|
|
|
36
36
|
const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
|
|
37
37
|
return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [modal === true && _jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? "" : undefined }), _jsx(DrawerPrimitive.Viewport, { "data-slot": "drawer-viewport", "data-modal": modal, className: "pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto", children: _jsxs(DrawerPrimitive.Popup, { "data-slot": "drawer-popup", "data-swipe-axis": swipeAxis, "data-snap-points": hasSnapPoints ? "" : undefined, className: cn(
|
|
38
38
|
// Base.
|
|
39
|
-
"group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col border-0 bg-popover text-sm text-popover-foreground
|
|
39
|
+
"group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col border-0 bg-popover text-sm text-popover-foreground nc-elevation-modal transition-[transform,opacity] duration-[var(--nc-duration-drawer)] ease-[var(--nc-ease-drawer)] outline-none select-none data-[swipe-direction=down]:rounded-t-3xl data-[swipe-direction=left]:rounded-r-3xl data-[swipe-direction=right]:rounded-l-3xl data-[swipe-direction=up]:rounded-b-3xl motion-reduce:transition-none",
|
|
40
40
|
// Nested.
|
|
41
41
|
"data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
|
|
42
42
|
// Bleed.
|
|
@@ -13,7 +13,7 @@ function DropdownMenuTrigger({ ...props }) {
|
|
|
13
13
|
return _jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
|
|
14
14
|
}
|
|
15
15
|
function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
|
|
16
|
-
return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 overflow-x-hidden overflow-y-auto rounded-2xl border-0 nc-glass p-nadicode-xxs text-popover-foreground
|
|
16
|
+
return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 overflow-x-hidden overflow-y-auto rounded-2xl border-0 nc-glass p-nadicode-xxs text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden", anchoredOverlayMotion, className), ...props }) }) }));
|
|
17
17
|
}
|
|
18
18
|
function DropdownMenuGroup({ ...props }) {
|
|
19
19
|
return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
|
|
@@ -5,7 +5,7 @@ function GlassControl({ className, render, shape = "control", ...props }) {
|
|
|
5
5
|
return useRender({
|
|
6
6
|
defaultTagName: "div",
|
|
7
7
|
props: mergeProps({
|
|
8
|
-
className: cn("nc-glass flex items-center border-0 text-popover-foreground
|
|
8
|
+
className: cn("nc-glass flex items-center border-0 text-popover-foreground nc-elevation-floating", shape === "control" && "rounded-3xl", shape === "bar" && "rounded-none", className),
|
|
9
9
|
}, props),
|
|
10
10
|
render,
|
|
11
11
|
state: { shape, slot: "glass-control" },
|
|
@@ -10,6 +10,6 @@ function HoverCardTrigger({ ...props }) {
|
|
|
10
10
|
return _jsx(PreviewCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
|
|
11
11
|
}
|
|
12
12
|
function HoverCardContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }) {
|
|
13
|
-
return (_jsx(PreviewCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(PreviewCardPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PreviewCardPrimitive.Popup, { "data-slot": "hover-card-content", className: cn("z-50 w-64 rounded-2xl border-0 bg-popover p-control-padding-inline text-sm text-popover-foreground
|
|
13
|
+
return (_jsx(PreviewCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(PreviewCardPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PreviewCardPrimitive.Popup, { "data-slot": "hover-card-content", className: cn("z-50 w-64 rounded-2xl border-0 bg-popover p-control-padding-inline text-sm text-popover-foreground nc-elevation-floating outline-hidden", anchoredOverlayMotion, className), ...props }) }) }));
|
|
14
14
|
}
|
|
15
15
|
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
|
@@ -21,7 +21,7 @@ function MenubarTrigger({ className, ...props }) {
|
|
|
21
21
|
return (_jsx(DropdownMenuTrigger, { "data-slot": "menubar-trigger", className: cn("flex min-h-touch-target items-center rounded-md px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted [@media(hover:hover)_and_(pointer:fine)]:min-h-0", className), ...props }));
|
|
22
22
|
}
|
|
23
23
|
function MenubarContent({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }) {
|
|
24
|
-
return (_jsx(DropdownMenuContent, { "data-slot": "menubar-content", align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn("min-w-36 rounded-2xl border-0 nc-glass p-nadicode-xxs text-popover-foreground
|
|
24
|
+
return (_jsx(DropdownMenuContent, { "data-slot": "menubar-content", align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn("min-w-36 rounded-2xl border-0 nc-glass p-nadicode-xxs text-popover-foreground nc-elevation-floating", className), ...props }));
|
|
25
25
|
}
|
|
26
26
|
function MenubarItem({ className, inset, variant = "default", ...props }) {
|
|
27
27
|
return (_jsx(DropdownMenuItem, { "data-slot": "menubar-item", "data-inset": inset, "data-variant": variant, className: cn("group/menubar-item min-h-touch-target gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-[var(--nc-error-deep)] data-[variant=destructive]:focus:bg-[var(--nc-error-soft)] data-[variant=destructive]:focus:text-[var(--nc-error-deep)] data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-[var(--nc-error-deep)]!", className), ...props }));
|
|
@@ -17,10 +17,10 @@ function NavigationMenuTrigger({ className, children, ...props }) {
|
|
|
17
17
|
return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), "group", className), ...props, children: [children, " ", _jsx(ChevronDownIcon, { className: "nc-transition-transform relative top-px ml-1 size-3 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180", "aria-hidden": "true" })] }));
|
|
18
18
|
}
|
|
19
19
|
function NavigationMenuContent({ className, ...props }) {
|
|
20
|
-
return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn("h-full w-auto p-nadicode-xxs group-data-[viewport=false]/navigation-menu:origin-(--transform-origin) group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:border-0 group-data-[viewport=false]/navigation-menu:nc-glass group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:
|
|
20
|
+
return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn("h-full w-auto p-nadicode-xxs group-data-[viewport=false]/navigation-menu:origin-(--transform-origin) group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:border-0 group-data-[viewport=false]/navigation-menu:nc-glass group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:nc-elevation-floating group-data-[viewport=false]/navigation-menu:transition-[opacity,scale] group-data-[viewport=false]/navigation-menu:duration-[var(--nc-duration-close)] group-data-[viewport=false]/navigation-menu:ease-[var(--nc-ease-out-strong)] group-data-[viewport=false]/navigation-menu:data-open:duration-[var(--nc-duration-open)] group-data-[viewport=false]/navigation-menu:data-ending-style:opacity-0 group-data-[viewport=false]/navigation-menu:data-ending-style:scale-[0.98] group-data-[viewport=false]/navigation-menu:data-starting-style:opacity-0 group-data-[viewport=false]/navigation-menu:data-starting-style:scale-[0.98] motion-reduce:transition-none motion-reduce:data-ending-style:opacity-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:opacity-100 motion-reduce:data-starting-style:scale-100 **:data-[slot=navigation-menu-link]:focus:outline-none", className), ...props }));
|
|
21
21
|
}
|
|
22
22
|
function NavigationMenuPositioner({ className, side = "bottom", sideOffset = 8, align = "start", alignOffset = 0, ...props }) {
|
|
23
|
-
return (_jsx(NavigationMenuPrimitive.Portal, { children: _jsx(NavigationMenuPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, className: cn("group/navigation-menu-positioner isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0", className), ...props, children: _jsx(NavigationMenuPrimitive.Popup, { className: "relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-2xl border-0 nc-glass text-popover-foreground
|
|
23
|
+
return (_jsx(NavigationMenuPrimitive.Portal, { children: _jsx(NavigationMenuPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, className: cn("group/navigation-menu-positioner isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0", className), ...props, children: _jsx(NavigationMenuPrimitive.Popup, { className: "relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-2xl border-0 nc-glass text-popover-foreground nc-elevation-floating transition-[opacity,scale] duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] outline-none data-open:duration-[var(--nc-duration-open)] group-data-instant/navigation-menu-positioner:transition-none data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 motion-reduce:transition-none motion-reduce:data-ending-style:scale-100 motion-reduce:data-ending-style:opacity-100 motion-reduce:data-starting-style:scale-100 motion-reduce:data-starting-style:opacity-100", children: _jsx(NavigationMenuPrimitive.Viewport, { className: "relative size-full overflow-hidden" }) }) }) }));
|
|
24
24
|
}
|
|
25
25
|
function NavigationMenuLink({ className, ...props }) {
|
|
26
26
|
return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("nc-transition-paint flex min-h-touch-target min-w-touch-target items-center gap-2 rounded-md p-2 text-sm hover:bg-muted focus:bg-muted data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
|
|
@@ -9,7 +9,7 @@ function PopoverTrigger({ ...props }) {
|
|
|
9
9
|
return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
10
10
|
}
|
|
11
11
|
function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
|
|
12
|
-
return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn("z-50 flex w-72 flex-col gap-control-padding-inline rounded-2xl border-0 nc-glass p-control-padding-inline text-sm text-popover-foreground
|
|
12
|
+
return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn("z-50 flex w-72 flex-col gap-control-padding-inline rounded-2xl border-0 nc-glass p-control-padding-inline text-sm text-popover-foreground nc-elevation-floating outline-hidden", anchoredOverlayMotion, className), ...props }) }) }));
|
|
13
13
|
}
|
|
14
14
|
function PopoverHeader({ className, ...props }) {
|
|
15
15
|
return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-0.5 text-sm", className), ...props }));
|
|
@@ -15,7 +15,7 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
|
15
15
|
return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex h-control-height min-h-touch-target w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-background py-2 pr-2 pl-control-padding-inline text-sm whitespace-nowrap transition-colors select-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-placeholder:text-placeholder data-[size=sm]:h-7 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
|
|
16
16
|
}
|
|
17
17
|
function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
|
|
18
|
-
return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 overflow-x-hidden overflow-y-auto rounded-2xl border-0 nc-glass text-popover-foreground
|
|
18
|
+
return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 overflow-x-hidden overflow-y-auto rounded-2xl border-0 nc-glass text-popover-foreground nc-elevation-floating data-[align-trigger=true]:transition-none", anchoredOverlayMotion, className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
|
|
19
19
|
}
|
|
20
20
|
function SelectLabel({ className, ...props }) {
|
|
21
21
|
return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn("px-1.5 py-1 text-xs text-muted-foreground", className), ...props }));
|
package/dist/components/sheet.js
CHANGED
|
@@ -21,7 +21,7 @@ function SheetOverlay({ className, ...props }) {
|
|
|
21
21
|
return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-scrim/scrim", overlayBackdropMotion, className), ...props }));
|
|
22
22
|
}
|
|
23
23
|
function SheetContent({ className, children, side = "right", showCloseButton = true, closeLabel = "Close", ...props }) {
|
|
24
|
-
return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn("fixed z-50 flex max-h-[calc(100%-var(--nc-lg))] flex-col gap-nadicode-md rounded-3xl border-0 bg-popover bg-clip-padding text-sm text-popover-foreground
|
|
24
|
+
return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn("fixed z-50 flex max-h-[calc(100%-var(--nc-lg))] flex-col gap-nadicode-md rounded-3xl border-0 bg-popover bg-clip-padding text-sm text-popover-foreground nc-elevation-modal transition-[opacity,translate] duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] data-open:duration-[var(--nc-duration-open)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none motion-reduce:data-ending-style:opacity-100 motion-reduce:data-starting-style:opacity-100 data-[side=bottom]:inset-x-nadicode-sm data-[side=bottom]:bottom-nadicode-sm data-[side=bottom]:h-auto data-[side=bottom]:data-ending-style:translate-y-nadicode-md data-[side=bottom]:data-starting-style:translate-y-nadicode-md motion-reduce:data-[side=bottom]:data-ending-style:translate-none motion-reduce:data-[side=bottom]:data-starting-style:translate-none data-[side=left]:inset-y-nadicode-sm data-[side=left]:left-nadicode-sm data-[side=left]:w-3/4 data-[side=left]:data-ending-style:-translate-x-nadicode-md data-[side=left]:data-starting-style:-translate-x-nadicode-md motion-reduce:data-[side=left]:data-ending-style:translate-none motion-reduce:data-[side=left]:data-starting-style:translate-none data-[side=right]:inset-y-nadicode-sm data-[side=right]:right-nadicode-sm data-[side=right]:w-3/4 data-[side=right]:data-ending-style:translate-x-nadicode-md data-[side=right]:data-starting-style:translate-x-nadicode-md motion-reduce:data-[side=right]:data-ending-style:translate-none motion-reduce:data-[side=right]:data-starting-style:translate-none data-[side=top]:inset-x-nadicode-sm data-[side=top]:top-nadicode-sm data-[side=top]:h-auto data-[side=top]:data-ending-style:-translate-y-nadicode-md data-[side=top]:data-starting-style:-translate-y-nadicode-md motion-reduce:data-[side=top]:data-ending-style:translate-none motion-reduce:data-[side=top]:data-starting-style:translate-none data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-nadicode-md right-nadicode-md", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] }));
|
|
25
25
|
}
|
|
26
26
|
function SheetHeader({ className, ...props }) {
|
|
27
27
|
return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-0.5 p-nadicode-lg", className), ...props }));
|
|
@@ -94,7 +94,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
|
|
|
94
94
|
// Adjust the padding for floating and inset variants.
|
|
95
95
|
variant === "floating" || variant === "inset"
|
|
96
96
|
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+var(--nc-rounded-xs))]"
|
|
97
|
-
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-3xl group-data-[variant=floating]:border-0 group-data-[variant=floating]:bg-popover group-data-[variant=floating]:
|
|
97
|
+
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-3xl group-data-[variant=floating]:border-0 group-data-[variant=floating]:bg-popover group-data-[variant=floating]:nc-elevation-floating", children: children }) })] }));
|
|
98
98
|
}
|
|
99
99
|
function SidebarTrigger({ className, onClick, ...props }) {
|
|
100
100
|
const { toggleSidebar } = useSidebar();
|
|
@@ -12,6 +12,6 @@ function TooltipTrigger({ ...props }) {
|
|
|
12
12
|
return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
13
13
|
}
|
|
14
14
|
function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
|
|
15
|
-
return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn("z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md border-0 bg-popover px-nadicode-sm py-nadicode-filter-chip-gap text-xs text-popover-foreground
|
|
15
|
+
return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn("z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md border-0 bg-popover px-nadicode-sm py-nadicode-filter-chip-gap text-xs text-popover-foreground nc-elevation-floating has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-md", anchoredOverlayMotion, className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-var(--nc-rounded-xs))] rotate-45 rounded-xs border border-border bg-popover fill-popover data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })] }) }) }));
|
|
16
16
|
}
|
|
17
17
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* binds it under that prop's name, so the convention holds at the site where
|
|
16
16
|
* the binding is actually written and this rule sees it there.
|
|
17
17
|
*
|
|
18
|
-
* Standard tool checked
|
|
18
|
+
* Standard tool checked first: `no-restricted-syntax` judges one
|
|
19
19
|
* node at a time, and the archive shape is a relationship between two — an
|
|
20
20
|
* ordinary `action={updateCustomerAction}` binding on the form, and the
|
|
21
21
|
* `lifecycle_status="archived"` field somewhere below it, which is what makes
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
* hop, `<Card className={tones.warning} />` repaints a primitive and no rule
|
|
20
20
|
* sees it; with it, the table's own values are read.
|
|
21
21
|
*
|
|
22
|
-
* Standard tool checked
|
|
22
|
+
* Standard tool checked first: `eslint-plugin-better-tailwindcss`
|
|
23
23
|
* reads lookup tables through a `variable` selector with an `objectValues`
|
|
24
24
|
* matcher, and the root config uses exactly that so a table's classes are
|
|
25
25
|
* checked for existence. What it cannot do is say WHERE a value lands: its
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* boundary is named in the app's vocabulary, so the rule reads names: the
|
|
6
6
|
* module's own file name and everything it exports.
|
|
7
7
|
*
|
|
8
|
-
* Standard tool checked
|
|
8
|
+
* Standard tool checked first: core `no-restricted-syntax` matches
|
|
9
9
|
* an exported identifier against a regex through esquery, but it is given one
|
|
10
10
|
* node at a time and never the file that node is in — and a module called
|
|
11
11
|
* `activation.tsx` exporting `Banner` is the case the file name is there to
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* An elevated surface draws its own edge. `
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
2
|
+
* An elevated surface draws its own edge. `nc-elevation-*` paints the rung's
|
|
3
|
+
* whole recipe, whose last layer is its own optical ring (DESIGN.md,
|
|
4
|
+
* "core.elevation"), so a border or a second ring on the same target paints a
|
|
5
|
+
* second edge over it: the seam this repository keeps reintroducing when a
|
|
6
|
+
* stock shadcn shape is pasted next to an elevation.
|
|
7
7
|
*
|
|
8
|
-
* Standard tool checked
|
|
8
|
+
* Standard tool checked first: `better-tailwindcss`'s
|
|
9
9
|
* `no-restricted-classes` judges one class at a time. `border` and `ring-1` are
|
|
10
10
|
* legal on their own — they are wrong only beside an elevation, and only when
|
|
11
11
|
* both land on the same target, so `*:data-[slot=input]:border-input` under an
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
*/
|
|
20
20
|
import { nodeClassUtilities } from "./jsx-class-utility.js";
|
|
21
21
|
|
|
22
|
-
const ELEVATION = /^
|
|
22
|
+
const ELEVATION = /^nc-elevation-(?:resting|raised|floating|modal)$/;
|
|
23
23
|
|
|
24
24
|
/*
|
|
25
25
|
* The callees that compose a class list out of several strings. A class written
|
|
@@ -65,7 +65,6 @@ function isZeroWidthUtility(utility) {
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
function edgeRule(utility) {
|
|
68
|
-
if (utility.startsWith("smooth-ring-")) return "ringTintOverride";
|
|
69
68
|
if (/^border(?:$|-)/.test(utility) && !isZeroWidthUtility(utility)) return "borderWithElevation";
|
|
70
69
|
if (/^ring(?:$|-)/.test(utility) && !isZeroWidthUtility(utility)) return "ringWithElevation";
|
|
71
70
|
return undefined;
|
|
@@ -109,16 +108,14 @@ export const noElevatedEdge = {
|
|
|
109
108
|
type: "problem",
|
|
110
109
|
docs: {
|
|
111
110
|
description:
|
|
112
|
-
"Disallow a border
|
|
111
|
+
"Disallow a border or a second ring on the same target as an nc-elevation-* utility",
|
|
113
112
|
},
|
|
114
113
|
schema: [],
|
|
115
114
|
messages: {
|
|
116
115
|
borderWithElevation:
|
|
117
|
-
'"{{token}}" draws a hard border on the same target as {{shadow}}. An elevated surface carries
|
|
116
|
+
'"{{token}}" draws a hard border on the same target as {{shadow}}. An elevated surface carries its own optical ring: drop the border, or drop the elevation.',
|
|
118
117
|
ringWithElevation:
|
|
119
|
-
'"{{token}}" draws a second ring on the same target as {{shadow}}. An elevated surface carries
|
|
120
|
-
ringTintOverride:
|
|
121
|
-
'"{{token}}" repaints the vendor ring beside {{shadow}}. The elevation owns its ring tint, including the dark-mode one.',
|
|
118
|
+
'"{{token}}" draws a second ring on the same target as {{shadow}}. An elevated surface carries its own optical ring already.',
|
|
122
119
|
},
|
|
123
120
|
},
|
|
124
121
|
create(context) {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* judgment-bearing stays out of it: an eyebrow, a fact label, an identifier or
|
|
6
6
|
* a marketing label may all be mono, and none of them is a title slot.
|
|
7
7
|
*
|
|
8
|
-
* Standard tool checked
|
|
8
|
+
* Standard tool checked first: `better-tailwindcss`'s
|
|
9
9
|
* `no-restricted-classes` judges one class at a time and never against the
|
|
10
10
|
* element it lands on, so it can ban `font-mono` everywhere or nowhere. The
|
|
11
11
|
* register is a PAIR of classes on a TITLE element, which is a relationship —
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* a component added or removed by the package changes this rule's answer with
|
|
13
13
|
* no edit at all.
|
|
14
14
|
*
|
|
15
|
-
* Standard tool checked
|
|
15
|
+
* Standard tool checked first: core `no-redeclare` and
|
|
16
16
|
* `no-shadow` answer only inside one scope chain, and `no-restricted-syntax`
|
|
17
17
|
* would need every name spelled into a selector — the hand list this derivation
|
|
18
18
|
* exists to avoid. Deferred here from #819 for exactly that reason.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* A square is written once: `size-4`, never `h-4 w-4`.
|
|
3
3
|
*
|
|
4
|
-
* Standard tool checked
|
|
4
|
+
* Standard tool checked first: `better-tailwindcss`'s
|
|
5
5
|
* `no-restricted-classes` judges one class at a time, so it can ban `h-4`
|
|
6
6
|
* outright but cannot see that a `w-4` is beside it — and the pair is the whole
|
|
7
7
|
* point, since `h-4 w-full` is fine. The relationship lives here, on the shared
|
|
@@ -5,7 +5,7 @@ import { classUtilities } from "./jsx-class-utility.js";
|
|
|
5
5
|
* ink outline on every :focus-visible element (DESIGN.md "Focus ring"), and an
|
|
6
6
|
* invalid control takes the same geometry in the destructive hue. A component
|
|
7
7
|
* that paints focus with a box-shadow ring, a raw outline width, or its own
|
|
8
|
-
* hue forks that treatment. Standard tool checked
|
|
8
|
+
* hue forks that treatment. Standard tool checked first: no
|
|
9
9
|
* upstream Tailwind rule models "focus variant may only suppress or restate
|
|
10
10
|
* the canonical outline".
|
|
11
11
|
*
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* toolbar's search or a mobile nav select is never a violation — a guard whose
|
|
16
16
|
* allow-list carries live violations documents debt instead of preventing it.
|
|
17
17
|
*
|
|
18
|
-
* Standard tool checked
|
|
18
|
+
* Standard tool checked first: `no-restricted-syntax` selects one
|
|
19
19
|
* node by shape and cannot ask what else the file renders, nor whether an
|
|
20
20
|
* ancestor summoned the subtree. Both are relationships, so the rule lives
|
|
21
21
|
* here. Replaces `restingSettingsControlViolations` in the retired portal
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
* - a lucide icon inside a `Button` carries `data-icon`, the hook the button's
|
|
12
12
|
* own spacing rules key on.
|
|
13
13
|
*
|
|
14
|
-
* Standard tool checked
|
|
14
|
+
* Standard tool checked first: `jsx-a11y` covers roles and ARIA on
|
|
15
15
|
* intrinsic elements and says nothing about these composed components;
|
|
16
16
|
* `no-restricted-syntax` selects a node by its own shape, and every one of
|
|
17
17
|
* these is a statement about an ancestor or a descendant. Replaces the JSX half
|
|
@@ -102,7 +102,7 @@ const AssistantMessage = () => {
|
|
|
102
102
|
} }), _jsx(MessageError, {})] }), _jsxs("div", { "data-slot": "aui_assistant-message-footer", className: cn("ms-2 flex items-center", ACTION_BAR_HEIGHT), children: [_jsx(BranchPicker, {}), _jsx(AssistantActionBar, {})] })] }));
|
|
103
103
|
};
|
|
104
104
|
const AssistantActionBar = () => {
|
|
105
|
-
return (_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, autohide: "not-last", className: "aui-assistant-action-bar-root nc-transition-opacity col-start-3 row-start-2 -ms-1 flex gap-1 text-muted-foreground", children: [_jsxs(ActionBarPrimitive.Copy, { render: _jsx(TooltipIconButton, { tooltip: "Copy" }), children: [_jsx(AuiIf, { condition: (s) => s.message.isCopied, children: _jsx(CheckIcon, {}) }), _jsx(AuiIf, { condition: (s) => !s.message.isCopied, children: _jsx(CopyIcon, {}) })] }), _jsx(ActionBarPrimitive.Reload, { render: _jsx(TooltipIconButton, { tooltip: "Refresh" }), children: _jsx(RefreshCwIcon, {}) }), _jsxs(ActionBarMorePrimitive.Root, { children: [_jsx(ActionBarMorePrimitive.Trigger, { render: _jsx(TooltipIconButton, { tooltip: "More", className: "data-[state=open]:bg-accent" }), children: _jsx(MoreHorizontalIcon, {}) }), _jsx(ActionBarMorePrimitive.Content, { side: "bottom", align: "start", sideOffset: 6, className: "aui-action-bar-more-content nc-transition-opacity z-50 min-w-[8rem] overflow-hidden rounded-xl border-0 bg-popover p-1.5 text-popover-foreground
|
|
105
|
+
return (_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, autohide: "not-last", className: "aui-assistant-action-bar-root nc-transition-opacity col-start-3 row-start-2 -ms-1 flex gap-1 text-muted-foreground", children: [_jsxs(ActionBarPrimitive.Copy, { render: _jsx(TooltipIconButton, { tooltip: "Copy" }), children: [_jsx(AuiIf, { condition: (s) => s.message.isCopied, children: _jsx(CheckIcon, {}) }), _jsx(AuiIf, { condition: (s) => !s.message.isCopied, children: _jsx(CopyIcon, {}) })] }), _jsx(ActionBarPrimitive.Reload, { render: _jsx(TooltipIconButton, { tooltip: "Refresh" }), children: _jsx(RefreshCwIcon, {}) }), _jsxs(ActionBarMorePrimitive.Root, { children: [_jsx(ActionBarMorePrimitive.Trigger, { render: _jsx(TooltipIconButton, { tooltip: "More", className: "data-[state=open]:bg-accent" }), children: _jsx(MoreHorizontalIcon, {}) }), _jsx(ActionBarMorePrimitive.Content, { side: "bottom", align: "start", sideOffset: 6, className: "aui-action-bar-more-content nc-transition-opacity z-50 min-w-[8rem] overflow-hidden rounded-xl border-0 bg-popover p-1.5 text-popover-foreground nc-elevation-floating data-[state=closed]:opacity-0 data-[state=open]:opacity-100", children: _jsxs(ActionBarPrimitive.ExportMarkdown, { render: _jsx(ActionBarMorePrimitive.Item, { className: "aui-action-bar-more-item hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm outline-none select-none" }), children: [_jsx(DownloadIcon, { className: "size-4" }), "Export as Markdown"] }) })] })] }));
|
|
106
106
|
};
|
|
107
107
|
const UserMessage = () => {
|
|
108
108
|
return (_jsxs(MessagePrimitive.Root, { "data-slot": "aui_user-message-root", className: "grid auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 [contain-intrinsic-size:auto_200px] [content-visibility:auto] [&:where(>*)]:col-start-2", "data-role": "user", children: [_jsx(UserMessageAttachments, {}), _jsxs("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: [_jsx("div", { className: "aui-user-message-content peer bg-muted text-foreground rounded-xl px-4 py-2 wrap-break-word empty:hidden", children: _jsx(MessagePrimitive.Parts, {}) }), _jsx("div", { className: "aui-user-action-bar-wrapper absolute start-0 top-1/2 -translate-x-full -translate-y-1/2 pe-2 peer-empty:hidden rtl:translate-x-full", children: _jsx(UserActionBar, {}) })] }), _jsx(BranchPicker, { "data-slot": "aui_user-branch-picker", className: "col-span-full col-start-1 row-start-3 -me-1 justify-end" })] }));
|
|
@@ -53,7 +53,7 @@ function ToolFallbackTrigger({ toolName, status, className, ...props }) {
|
|
|
53
53
|
const isCancelled = status?.type === "incomplete" && status.reason === "cancelled";
|
|
54
54
|
const Icon = statusIconMap[statusType];
|
|
55
55
|
const label = isCancelled ? "Cancelled tool" : "Used tool";
|
|
56
|
-
return (_jsxs(CollapsibleTrigger, { "data-slot": "tool-fallback-trigger", className: cn("aui-tool-fallback-trigger nc-transition-paint group/trigger flex w-fit origin-left items-center gap-2 py-1.5 text-sm text-muted-foreground hover:text-foreground", className), ...props, children: [_jsx(Icon, { "data-slot": "tool-fallback-trigger-icon", className: cn("aui-tool-fallback-trigger-icon size-4 shrink-0", isCancelled && "text-muted-foreground", isRunning && "animate-spin [animation-duration:
|
|
56
|
+
return (_jsxs(CollapsibleTrigger, { "data-slot": "tool-fallback-trigger", className: cn("aui-tool-fallback-trigger nc-transition-paint group/trigger flex w-fit origin-left items-center gap-2 py-1.5 text-sm text-muted-foreground hover:text-foreground", className), ...props, children: [_jsx(Icon, { "data-slot": "tool-fallback-trigger-icon", className: cn("aui-tool-fallback-trigger-icon size-4 shrink-0", isCancelled && "text-muted-foreground", isRunning && "animate-spin [animation-duration:var(--nc-duration-spin)]") }), _jsxs("span", { "data-slot": "tool-fallback-trigger-label", className: cn("aui-tool-fallback-trigger-label-wrapper relative inline-block text-start leading-none", isCancelled && "text-muted-foreground line-through"), children: [_jsxs("span", { children: [label, ": ", _jsx("b", { children: toolName })] }), isRunning && (_jsxs("span", { "aria-hidden": true, "data-slot": "tool-fallback-trigger-shimmer", className: "aui-tool-fallback-trigger-shimmer shimmer pointer-events-none absolute inset-0 motion-reduce:animate-none", children: [label, ": ", _jsx("b", { children: toolName })] }))] }), _jsx(ToolFallbackDuration, {}), _jsx(ChevronDownIcon, { "data-slot": "tool-fallback-trigger-chevron", className: cn("aui-tool-fallback-trigger-chevron size-4 shrink-0", "transition-transform duration-(--animation-duration) ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none", "-rotate-90", "group-data-open/trigger:rotate-0", "group-data-panel-open/trigger:rotate-0") })] }));
|
|
57
57
|
}
|
|
58
58
|
function ToolFallbackContent({ className, children, ...props }) {
|
|
59
59
|
return (_jsx(CollapsibleContent, { "data-slot": "tool-fallback-content", className: cn("aui-tool-fallback-content relative overflow-hidden text-sm outline-none", "group/collapsible-content", "data-closed:pointer-events-none", className), ...props, children: _jsx("div", { className: cn("nc-transition-opacity flex flex-col gap-2 ps-6 pt-1 pb-2"), children: children }) }));
|
|
@@ -36,7 +36,7 @@ function ToolGroupRoot({ className, variant, open: controlledOpen, onOpenChange:
|
|
|
36
36
|
}
|
|
37
37
|
function ToolGroupTrigger({ count, active = false, className, ...props }) {
|
|
38
38
|
const label = `${count} tool ${count === 1 ? "call" : "calls"}`;
|
|
39
|
-
return (_jsxs(CollapsibleTrigger, { "data-slot": "tool-group-trigger", className: cn("aui-tool-group-trigger nc-transition-paint group/trigger flex origin-left items-center gap-2 text-sm", "group-data-[variant=ghost]/tool-group-root:text-muted-foreground group-data-[variant=ghost]/tool-group-root:hover:text-foreground group-data-[variant=ghost]/tool-group-root:py-1.5", "group-data-[variant=outline]/tool-group-root:w-full group-data-[variant=outline]/tool-group-root:px-4", "group-data-[variant=muted]/tool-group-root:w-full group-data-[variant=muted]/tool-group-root:px-4", className), ...props, children: [active && (_jsx(LoaderIcon, { "data-slot": "tool-group-trigger-loader", className: "aui-tool-group-trigger-loader size-3 shrink-0 animate-spin [animation-duration:
|
|
39
|
+
return (_jsxs(CollapsibleTrigger, { "data-slot": "tool-group-trigger", className: cn("aui-tool-group-trigger nc-transition-paint group/trigger flex origin-left items-center gap-2 text-sm", "group-data-[variant=ghost]/tool-group-root:text-muted-foreground group-data-[variant=ghost]/tool-group-root:hover:text-foreground group-data-[variant=ghost]/tool-group-root:py-1.5", "group-data-[variant=outline]/tool-group-root:w-full group-data-[variant=outline]/tool-group-root:px-4", "group-data-[variant=muted]/tool-group-root:w-full group-data-[variant=muted]/tool-group-root:px-4", className), ...props, children: [active && (_jsx(LoaderIcon, { "data-slot": "tool-group-trigger-loader", className: "aui-tool-group-trigger-loader size-3 shrink-0 animate-spin [animation-duration:var(--nc-duration-spin)]" })), _jsxs("span", { "data-slot": "tool-group-trigger-label", className: cn("aui-tool-group-trigger-label-wrapper relative inline-block text-start leading-none font-medium", "group-data-[variant=ghost]/tool-group-root:font-normal", "group-data-[variant=outline]/tool-group-root:grow", "group-data-[variant=muted]/tool-group-root:grow"), children: [_jsx("span", { className: "text-xs", children: label }), active && (_jsx("span", { "aria-hidden": true, "data-slot": "tool-group-trigger-shimmer", className: "aui-tool-group-trigger-shimmer shimmer pointer-events-none absolute inset-0 text-xs motion-reduce:animate-none", children: label }))] }), _jsx(ChevronDownIcon, { "data-slot": "tool-group-trigger-chevron", className: cn("aui-tool-group-trigger-chevron size-3 shrink-0", "transition-transform duration-(--animation-duration) ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none", "-rotate-90", "group-data-open/trigger:rotate-0", "group-data-panel-open/trigger:rotate-0") })] }));
|
|
40
40
|
}
|
|
41
41
|
function ToolGroupContent({ className, children, ...props }) {
|
|
42
42
|
return (_jsx(CollapsibleContent, { "data-slot": "tool-group-content", className: cn("aui-tool-group-content relative overflow-hidden text-sm outline-none", "group/collapsible-content", "data-closed:pointer-events-none", className), ...props, children: _jsx("div", { className: cn("mt-2 flex flex-col gap-2", "group-data-[variant=ghost]/tool-group-root:mt-1 group-data-[variant=ghost]/tool-group-root:gap-1", "group-data-[variant=outline]/tool-group-root:mt-3 group-data-[variant=outline]/tool-group-root:border-t group-data-[variant=outline]/tool-group-root:px-4 group-data-[variant=outline]/tool-group-root:pt-3", "group-data-[variant=muted]/tool-group-root:mt-3 group-data-[variant=muted]/tool-group-root:border-t group-data-[variant=muted]/tool-group-root:px-4 group-data-[variant=muted]/tool-group-root:pt-3", "[&>*]:nc-transition-opacity"), children: children }) }));
|
package/dist/styles/globals.css
CHANGED
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
@layer tokens, theme, reset, base, foundation, motion, layout, primitives, components, utilities;
|
|
15
15
|
|
|
16
16
|
@import "tailwindcss";
|
|
17
|
-
@import "shadow-plugin";
|
|
18
17
|
@import "tw-animate-css";
|
|
19
18
|
@import "tw-shimmer";
|
|
20
19
|
@import "@assistant-ui/react-markdown/styles/dot.css";
|
|
@@ -92,6 +91,31 @@
|
|
|
92
91
|
}
|
|
93
92
|
}
|
|
94
93
|
|
|
94
|
+
/*
|
|
95
|
+
* The four elevation rungs. Each utility paints the whole recipe of its rung
|
|
96
|
+
* from the generated --nc-elevation-* token, whose last layer is the rung's
|
|
97
|
+
* own optical ring in the current mode (design-system DESIGN.md
|
|
98
|
+
* "core.elevation"). An elevated surface therefore draws no second edge:
|
|
99
|
+
* never pair one of these with border-*, ring-*, or another box-shadow
|
|
100
|
+
* (`nadicodeai/no-elevated-edge` enforces it). Declared as utilities so
|
|
101
|
+
* variant prefixes can gate them.
|
|
102
|
+
*/
|
|
103
|
+
@utility nc-elevation-resting {
|
|
104
|
+
box-shadow: var(--nc-elevation-resting);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@utility nc-elevation-raised {
|
|
108
|
+
box-shadow: var(--nc-elevation-raised);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@utility nc-elevation-floating {
|
|
112
|
+
box-shadow: var(--nc-elevation-floating);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
@utility nc-elevation-modal {
|
|
116
|
+
box-shadow: var(--nc-elevation-modal);
|
|
117
|
+
}
|
|
118
|
+
|
|
95
119
|
/*
|
|
96
120
|
* The proxy focus outline: the one restatement of the canonical treatment
|
|
97
121
|
* above, for an element that carries the indicator on another element's
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# Agent Visual System
|
|
2
|
+
|
|
3
|
+
The Agent visual is the decorative identity for a persistent Agent in Nadia.
|
|
4
|
+
It is a living, multicolour metaball form whose recipe is assigned by Agent
|
|
5
|
+
type. It does not represent status, capability, runtime activity, or work
|
|
6
|
+
output. Those facts stay in text, status components, assistant-ui, and the
|
|
7
|
+
product surfaces that own them.
|
|
8
|
+
|
|
9
|
+
This system is distinct from Nadia's portrait. Nadia keeps the one canonical
|
|
10
|
+
identity in `brand/AGENTS.md` "Nadia's identity"; Agent visuals identify the other named,
|
|
11
|
+
role-specific Agents that a company operates inside Nadia.
|
|
12
|
+
|
|
13
|
+
## Approved form
|
|
14
|
+
|
|
15
|
+
- One connected metaball entity sits on a true-black field.
|
|
16
|
+
- The entity is always multicolour and uses only the five NadicodeAI campi:
|
|
17
|
+
Cobalto, Verde, Arancio, Giallo, and Rosso.
|
|
18
|
+
- The entity itself carries the surface. Texture never paints the background.
|
|
19
|
+
- The four approved surfaces are solid, ordered points, borderless triangular
|
|
20
|
+
wire, and irregular living particles.
|
|
21
|
+
- Ordered points form a regular, readable field. Living particles vary in
|
|
22
|
+
position, size, and brightness so the two surfaces remain visibly distinct.
|
|
23
|
+
- Triangular wire has no outer stroke. The clipped triangular network alone
|
|
24
|
+
defines the body.
|
|
25
|
+
- The visual has no initials, letters, face, avatar frame, status tint, or
|
|
26
|
+
caller-selected colour.
|
|
27
|
+
|
|
28
|
+
## Closed recipes
|
|
29
|
+
|
|
30
|
+
The five recipes below are the complete public set. Their names, palettes,
|
|
31
|
+
surface assignments, ball counts, sizes, and deterministic frames are fixed.
|
|
32
|
+
Applications assign one recipe explicitly. They never hash an id, inspect a
|
|
33
|
+
free-form role label, randomize a recipe, or expose these parameters to a
|
|
34
|
+
caller.
|
|
35
|
+
|
|
36
|
+
| Recipe | Surface | Palette order | Count | Size | Still frame |
|
|
37
|
+
| ------------- | ---------------- | -------------------------------------- | ----: | ---: | ----------: |
|
|
38
|
+
| General | Solid | Cobalto, Verde, Arancio, Giallo, Rosso | 10 | 0.83 | 0 |
|
|
39
|
+
| Reasoning | Ordered points | Cobalto, Verde, Giallo | 10 | 0.83 | 0 |
|
|
40
|
+
| Coordination | Triangular wire | Verde, Cobalto, Arancio | 8 | 0.76 | 2700 |
|
|
41
|
+
| Communication | Solid | Giallo, Arancio, Rosso | 12 | 0.69 | 5400 |
|
|
42
|
+
| Execution | Living particles | Rosso, Arancio, Cobalto | 6 | 0.92 | 8100 |
|
|
43
|
+
|
|
44
|
+
`general` is the deliberate fallback when a product has not stored an Agent's
|
|
45
|
+
recipe yet. It is not an inference from the Agent's name, id, role, status, or
|
|
46
|
+
position in a list.
|
|
47
|
+
|
|
48
|
+
## Placement and motion
|
|
49
|
+
|
|
50
|
+
The same recipe keeps the same identity wherever it appears. Each recipe owns
|
|
51
|
+
both its approved deterministic SVG poster form and its ambient shader
|
|
52
|
+
parameters in one internal record. The two presentations are intentionally
|
|
53
|
+
recognizable realizations of one recipe, not pixel-identical renderers.
|
|
54
|
+
|
|
55
|
+
- Registry cells, `AgentCard`, focal Agent detail, and the design-system
|
|
56
|
+
showcase use the ambient reference motion at speed 0.24. The text name
|
|
57
|
+
remains the primary identity, and motion never reports status or activity.
|
|
58
|
+
- The shared component mounts the renderer only while the visual intersects
|
|
59
|
+
the viewport and releases its WebGL context offscreen; the vendor pauses it
|
|
60
|
+
when the document is hidden. Compact registry placement therefore keeps the
|
|
61
|
+
same identity without retaining offscreen shader canvases.
|
|
62
|
+
- Reduced-motion, missing WebGL2, shader initialization failure, and context
|
|
63
|
+
loss all keep the same deterministic still. They do not substitute a new
|
|
64
|
+
shape, colour, icon, or blank box.
|
|
65
|
+
- The still renders before the client shader is eligible so server rendering
|
|
66
|
+
and hydration never present an empty visual slot.
|
|
67
|
+
|
|
68
|
+
The visual is normally hidden from assistive technology because the adjacent
|
|
69
|
+
Agent name carries the identity. A picker in which the visual is itself the
|
|
70
|
+
choice may give it an accessible name. Status and job information never enter
|
|
71
|
+
that name.
|
|
72
|
+
|
|
73
|
+
## Implementation ownership
|
|
74
|
+
|
|
75
|
+
`@nadicodeai/ui` owns the typed `AgentVisual` implementation and the
|
|
76
|
+
presentational `AgentCard` composition. The API exposes the closed recipe and
|
|
77
|
+
approved presentation roles, not raw colours, shader source, speed, count,
|
|
78
|
+
frame, density, material, or arbitrary tuning.
|
|
79
|
+
|
|
80
|
+
Consuming products own the stored recipe assignment, Agent data, routing,
|
|
81
|
+
actions, permissions, and placement. An Agent registry remains a table when
|
|
82
|
+
the job is comparison; the visual may appear inside its identity cell without
|
|
83
|
+
turning the row into a new `AgentRow` component.
|
|
84
|
+
|
|
85
|
+
## Source and modification record
|
|
86
|
+
|
|
87
|
+
The solid form mounts the published `metaballsFragmentShader` from
|
|
88
|
+
`@paper-design/shaders` version `0.0.78` verbatim. The other three surfaces use
|
|
89
|
+
a NadicodeAI modification of that release's published Metaballs shader. The
|
|
90
|
+
modification preserves metaball generation, motion, colour blending, edge
|
|
91
|
+
calculation, and background composition, then changes only the fill clipped
|
|
92
|
+
inside the final entity shape.
|
|
93
|
+
|
|
94
|
+
The package is Apache-2.0 and includes a `NOTICE` file. Any distributed
|
|
95
|
+
modified source must keep the Apache-2.0 license, retain the upstream notices,
|
|
96
|
+
carry a prominent modification notice, and include the upstream NOTICE text:
|
|
97
|
+
|
|
98
|
+
```text
|
|
99
|
+
Paper Shaders
|
|
100
|
+
Copyright 2026 Paper
|
|
101
|
+
|
|
102
|
+
Powered by Paper Shaders:
|
|
103
|
+
https://shaders.paper.design
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
The identity system is one closed, package-owned system; additions go through
|
|
107
|
+
this document, never through a new ad-hoc visual.
|
|
@@ -42,9 +42,9 @@ import "@nadicodeai/ui/globals.css";
|
|
|
42
42
|
```
|
|
43
43
|
|
|
44
44
|
`@nadicodeai/ui/globals.css` is the complete React style interface. It composes
|
|
45
|
-
Tailwind v4, shadcn, the
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
Tailwind v4, shadcn, and the complete design-system CSS module, and it declares
|
|
46
|
+
the four `nc-elevation-*` utilities over the generated elevation tokens.
|
|
47
|
+
Consumers do not add a second border or ring to package-owned elevated roots.
|
|
48
48
|
Do not import `@nadicodeai/design-system/css`, generated theme files, or CSS
|
|
49
49
|
partials beside it. The package declares its own built component sources; Tailwind's
|
|
50
50
|
normal automatic detection covers the consumer application. The app still owns
|
package/docs/contract.md
CHANGED
|
@@ -11,23 +11,26 @@ The normative invariants for the `@nadicodeai/ui` package: what may live here, h
|
|
|
11
11
|
|
|
12
12
|
### Material surfaces
|
|
13
13
|
|
|
14
|
-
`
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
`
|
|
18
|
-
|
|
14
|
+
`globals.css` declares the four elevation utilities, `nc-elevation-resting`,
|
|
15
|
+
`nc-elevation-raised`, `nc-elevation-floating`, and `nc-elevation-modal`. Each
|
|
16
|
+
sets `box-shadow` to the generated `--nc-elevation-<rung>` token, pinned by
|
|
17
|
+
`packages/design-system/DESIGN.md` "core.elevation": one recipe per rung per
|
|
18
|
+
mode, whose last layer is that rung's optical ring, black at 5% in light and
|
|
19
|
+
white at 18% in dark. No package or consumer declares a second elevation
|
|
20
|
+
vocabulary. Never pair an `nc-elevation-*` root with `border-*`, a separate
|
|
21
|
+
`ring-*`, or another `box-shadow` (`nadicodeai/no-elevated-edge` enforces it).
|
|
19
22
|
|
|
20
23
|
Physical role, not content importance, chooses depth:
|
|
21
24
|
|
|
22
|
-
- `Card surface="resting"` (the default) uses `
|
|
23
|
-
- `Card surface="raised"` uses `
|
|
25
|
+
- `Card surface="resting"` (the default) uses `nc-elevation-resting`.
|
|
26
|
+
- `Card surface="raised"` uses `nc-elevation-raised`; active or selected
|
|
24
27
|
work chooses it explicitly.
|
|
25
28
|
- `Card surface="plain"` is the explicit structural/auth/website escape and
|
|
26
29
|
carries no elevation.
|
|
27
30
|
- Tooltip, menu, popover, select, combobox, navigation popup, hover card,
|
|
28
|
-
chart tooltip, and toast roots own `
|
|
29
|
-
- Dialog, alert dialog, drawer, and sheet roots own
|
|
30
|
-
|
|
31
|
+
chart tooltip, and toast roots own `nc-elevation-floating` internally.
|
|
32
|
+
- Dialog, alert dialog, drawer, and sheet roots own `nc-elevation-modal`
|
|
33
|
+
internally.
|
|
31
34
|
|
|
32
35
|
All solid surfaces use the one semantic fill. Dark mode therefore stays true
|
|
33
36
|
black; depth never comes from progressively greyer cards.
|
|
@@ -102,26 +105,18 @@ Assistant conversation and runtime APIs enter through `@nadicodeai/ui/agents`; A
|
|
|
102
105
|
|
|
103
106
|
### Agent identity presentation
|
|
104
107
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
`
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
`AgentCard` composes the fundamental `Card` with explicit `visual`, `name`,
|
|
119
|
-
`job`, `status`, `meta`, and `action` slots. It owns presentation only. The app
|
|
120
|
-
still owns Agent data, recipe assignment, status grammar, routing, actions, and
|
|
121
|
-
heading hierarchy; when the Card is the page identity, the `name` slot carries
|
|
122
|
-
that page's `h1`.
|
|
123
|
-
There is no `AgentGlyph`, `AgentRow`, `KpiCard`, or product-domain `agent`
|
|
124
|
-
object prop in the shared package.
|
|
108
|
+
The visual system (the closed recipes, motion, fallbacks, and licensing) is
|
|
109
|
+
owned by [`agent-visual.md`](agent-visual.md). What this contract adds is the
|
|
110
|
+
package shape: `AgentVisual` exposes only a recipe (`general`, `reasoning`,
|
|
111
|
+
`coordination`, `communication`, `execution`) and a presentation (`registry`,
|
|
112
|
+
`card`, `detail`); it is decorative by default, and a meaningful selectable
|
|
113
|
+
image opts into `decorative={false}` with a `label`. `AgentCard` composes the
|
|
114
|
+
fundamental `Card` with explicit `visual`, `name`, `job`, `status`, `meta`,
|
|
115
|
+
and `action` slots and owns presentation only; when it is the page identity,
|
|
116
|
+
the `name` slot carries the page's `h1`. The app owns Agent data, recipe
|
|
117
|
+
assignment, status grammar, routing, and actions. There is no `AgentGlyph`,
|
|
118
|
+
`AgentRow`, `KpiCard`, or product-domain `agent` object prop in the shared
|
|
119
|
+
package.
|
|
125
120
|
|
|
126
121
|
- **Standard components, not app-owned product features.** This package ships primitives, standard UI components, assistant-ui compositions, brand adapters, React adapters, reusable sections, and presentational product components. It must not ship app-specific feature/use-case screens or names such as operator-login, portal activation, customer credential control, or customer management. Generic data tables, command palettes, and chart cards are app-owned shadcn registry adaptations. The source-backed `chart-*` package surface is the plan-approved exception per issue #166; chart cards remain app-owned. Every data-shaped chart exposes an equivalent non-visual data alternative. A component whose complete value is already available in visible text or `aria-valuetext` does not add a redundant table.
|
|
127
122
|
- **Auth routes are consumer-owned shadcn block work.** Login, signup, OTP, two-factor, magic-link, and provider-button flows start from the selected shadcn block/example in the consuming app, with app-owned Better Auth behavior. Do not ship generic auth, signup, OTP, federated-login, or provider abstractions from this package unless a later explicit boundary decision replaces the selected shadcn block.
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# Migrating to `@nadicodeai/ui` 2.0.0
|
|
2
|
+
|
|
3
|
+
This release makes elevation package-owned. `shadow-plugin` is gone from the
|
|
4
|
+
dependency tree, and `@nadicodeai/ui/globals.css` declares the four elevation
|
|
5
|
+
utilities itself over the `--nc-elevation-*` tokens that
|
|
6
|
+
`@nadicodeai/design-system` 2.0.0 generates. The recipes are the plugin's own
|
|
7
|
+
values, copied byte for byte, so nothing renders differently in either mode.
|
|
8
|
+
|
|
9
|
+
`@nadicodeai/ui` 2.0.0 requires `@nadicodeai/design-system` 2.0.0; the two
|
|
10
|
+
packages are released in lockstep.
|
|
11
|
+
|
|
12
|
+
## Elevation utilities
|
|
13
|
+
|
|
14
|
+
Rename every call site by the rung's role. Each utility paints the same
|
|
15
|
+
`box-shadow` its predecessor did, with two differences in mechanics: the vendor
|
|
16
|
+
utilities carried `!important` and tinted the falloff through
|
|
17
|
+
`--tw-shadow-color`; `nc-elevation-*` are plain `box-shadow`, so a `shadow-*`
|
|
18
|
+
or `hover:shadow-*` on the same element now wins where it used to lose, and no
|
|
19
|
+
colour tints the falloff.
|
|
20
|
+
|
|
21
|
+
| 1.x | 2.0.0 | Role |
|
|
22
|
+
| --- | --- | --- |
|
|
23
|
+
| `smooth-shadow-ring-md` | `nc-elevation-resting` | The card that sits on the page |
|
|
24
|
+
| `smooth-shadow-ring-lg` | `nc-elevation-raised` | Active or selected work |
|
|
25
|
+
| `smooth-shadow-ring-xl` | `nc-elevation-floating` | Menu, popover, tooltip, toast |
|
|
26
|
+
| `smooth-shadow-ring-2xl` | `nc-elevation-modal` | Dialog, drawer, sheet |
|
|
27
|
+
|
|
28
|
+
The plugin's other utilities have no replacement. `smooth-ring-*` and the
|
|
29
|
+
`--smooth-ring-color` override are gone: each rung's optical ring is the last
|
|
30
|
+
layer of its own recipe, black at 5% in light and white at 18% in dark, and a
|
|
31
|
+
call site never repaints it. `nadicodeai/no-elevated-edge` still rejects a
|
|
32
|
+
`border-*` or a second `ring-*` on the same target as an elevation.
|
|
33
|
+
|
|
34
|
+
Consumers stop installing `shadow-plugin`. It was never a documented direct
|
|
35
|
+
dependency; drop it if it was added anyway.
|
|
36
|
+
|
|
37
|
+
## DTCG token paths
|
|
38
|
+
|
|
39
|
+
The generated token file nests every group under a `core` or a `register`
|
|
40
|
+
parent. A consumer reading
|
|
41
|
+
`@nadicodeai/design-system/tokens/dtcg` by path changes
|
|
42
|
+
`nadicode.<group>` to `nadicode.core.<group>`:
|
|
43
|
+
|
|
44
|
+
| 1.x path | 2.0.0 path |
|
|
45
|
+
| --- | --- |
|
|
46
|
+
| `nadicode.color` | `nadicode.core.color` |
|
|
47
|
+
| `nadicode.spacing` | `nadicode.core.spacing` |
|
|
48
|
+
| `nadicode.rounded` | `nadicode.core.rounded` |
|
|
49
|
+
| `nadicode.typography` | `nadicode.core.typography` |
|
|
50
|
+
|
|
51
|
+
`nadicode.core` also gains `material`, `elevation`, and `motion`, and
|
|
52
|
+
`nadicode.register` holds the per-surface data. The emitted CSS custom property
|
|
53
|
+
and Tailwind `@theme` names are unchanged: only the authoring path moved. The
|
|
54
|
+
`./tailwind` JSON export's `spacing` map now holds core only; the website's
|
|
55
|
+
page-grammar geometry and the Portal's chip density are read from
|
|
56
|
+
`nadicode.register.website.layout` and `nadicode.register.portal.density`.
|
|
57
|
+
|
|
58
|
+
## Removed easing aliases
|
|
59
|
+
|
|
60
|
+
`--nc-ease-bounce` and `--nc-ease-out` are removed. They were aliases of two
|
|
61
|
+
curves that ship under their own names:
|
|
62
|
+
|
|
63
|
+
| Removed | Use |
|
|
64
|
+
| --- | --- |
|
|
65
|
+
| `--nc-ease-bounce` | `--nc-ease-in-out-strong` |
|
|
66
|
+
| `--nc-ease-out` | `--nc-ease-out-strong` |
|
|
67
|
+
|
|
68
|
+
React call sites can also write the Tailwind form, `ease-nc-in-out-strong` and
|
|
69
|
+
`ease-nc-out-strong`.
|
package/llms.txt
CHANGED
|
@@ -14,7 +14,8 @@ Use this file as a map; read the owning document before changing behavior.
|
|
|
14
14
|
`dist/components/**/*.d.ts` declarations in an installed package.
|
|
15
15
|
- Public Agent UI interface: `src/agents.ts`, exported as `@nadicodeai/ui/agents`.
|
|
16
16
|
- Material, Card, Empty, glass-control, AgentVisual, and AgentCard semantics:
|
|
17
|
-
`docs/contract.md`; 1.0 adoption steps: `docs/migration/1.0.0.md
|
|
17
|
+
`docs/contract.md`; 1.0 adoption steps: `docs/migration/1.0.0.md`; the 2.0
|
|
18
|
+
elevation-utility rename and DTCG paths: `docs/migration/2.0.0.md`.
|
|
18
19
|
- Maintained conversation implementation: `src/internal/assistant-ui/`.
|
|
19
20
|
- Product compositions and sections: `docs/product-compositions.md` and
|
|
20
21
|
`docs/product-sections.md`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nadicodeai/ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"@assistant-ui/react": "0.15.1",
|
|
64
64
|
"@assistant-ui/react-markdown": "0.14.8",
|
|
65
65
|
"@base-ui/react": "^1.6.0",
|
|
66
|
-
"@nadicodeai/design-system": "
|
|
66
|
+
"@nadicodeai/design-system": "2.0.0",
|
|
67
67
|
"@paper-design/shaders": "0.0.78",
|
|
68
68
|
"class-variance-authority": "^0.7.1",
|
|
69
69
|
"clsx": "^2.1.1",
|
|
@@ -78,7 +78,6 @@
|
|
|
78
78
|
"react-resizable-panels": "^4.11.2",
|
|
79
79
|
"recharts": "^3.8.0",
|
|
80
80
|
"remark-gfm": "^4.0.1",
|
|
81
|
-
"shadow-plugin": "1.2.7",
|
|
82
81
|
"sonner": "^2.0.7",
|
|
83
82
|
"tailwind-merge": "^3.0.0",
|
|
84
83
|
"tw-animate-css": "^1.4.0",
|