@nadicodeai/ui 12.1.117 → 12.1.119

package/dist/components/page-actions.d.ts

@@ -67,6 +67,10 @@ export declare function PageActionsRow({ period, primary, secondary, menu }: Pag
  * Holds the place on the title's row where the open page puts its actions. The
  * product's chrome draws the row (`PageHeader`) and the page below draws its
  * commands (`PageActions`), so the two meet here rather than through props.
+ *
+ * The context's value never changes: a changed context value above a page whose
+ * server HTML is still streaming makes React render that page again in the
+ * browser, beside the server's copy.
  */
 export declare function PageActionsHostProvider({ children }: {
     children: ReactNode;

package/dist/components/page-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-actions.d.ts","sourceRoot":"","sources":["../../src/components/page-actions.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"page-actions.d.ts","sourceRoot":"","sources":["../../src/components/page-actions.tsx"],"names":[],"mappings":"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"}

package/dist/components/page-actions.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowUpRight } from "lucide-react";
-import { createContext, useCallback, useContext, useEffect, useId, useState, } from "react";
+import { createContext, useContext, useEffect, useId, useState, } from "react";
 import { createPortal } from "react-dom";
+import { createStore, useStore } from "zustand";
 import { ActionMenu } from "./action-menu.js";
 import { Button, ButtonLink } from "./button.js";
 export function PageCommandButton({ command, shape, size, variant, }) {
@@ -31,23 +32,34 @@ export function PageActionsRow({ period, primary, secondary, menu }) {
         return null;
     return (_jsxs("div", { "data-slot": "page-actions", className: "flex max-w-full min-w-0 flex-wrap items-center gap-2", children: [period, secondary ? _jsx(PageCommandButton, { command: secondary, variant: "outline" }) : null, primary ? _jsx(PageCommandButton, { command: primary, variant: "default" }) : null, menu ? _jsx(ActionMenu, { ...menu }) : null] }));
 }
+function createHost() {
+    return createStore((set) => ({
+        element: null,
+        owner: null,
+        attach: (element) => set({ element }),
+        claim: (owner) => set({ owner }),
+        release: (owner) => set((state) => (state.owner === owner ? { owner: null } : state)),
+    }));
+}
+const unhosted = createHost();
 const PageActionsHostContext = createContext(null);
 /**
  * Holds the place on the title's row where the open page puts its actions. The
  * product's chrome draws the row (`PageHeader`) and the page below draws its
  * commands (`PageActions`), so the two meet here rather than through props.
+ *
+ * The context's value never changes: a changed context value above a page whose
+ * server HTML is still streaming makes React render that page again in the
+ * browser, beside the server's copy.
  */
 export function PageActionsHostProvider({ children }) {
-    const [element, attach] = useState(null);
-    const [owner, setOwner] = useState(null);
-    const claim = useCallback((next) => setOwner(next), []);
-    const release = useCallback((previous) => setOwner((current) => (current === previous ? null : current)), []);
-    return (_jsx(PageActionsHostContext, { value: { element, attach, owner, claim, release }, children: children }));
+    const [host] = useState(createHost);
+    return _jsx(PageActionsHostContext, { value: host, children: children });
 }
 /** The element on `PageHeader`'s title row that the page's `PageActions` render into. */
 export function PageActionsSlot() {
     const host = useContext(PageActionsHostContext);
-    return (_jsx("div", { "data-slot": "page-header-actions", className: "flex max-w-full min-w-0 items-center empty:hidden", ref: host?.attach }));
+    return (_jsx("div", { "data-slot": "page-header-actions", className: "flex max-w-full min-w-0 items-center empty:hidden", ref: host?.getState().attach }));
 }
 /**
  * A page's actions, drawn on its title's row. Only the page shown last owns
@@ -64,8 +76,10 @@ export function PageActionsSlot() {
 export function PageActions(props) {
     const host = useContext(PageActionsHostContext);
     const id = useId();
-    const claim = host?.claim;
-    const release = host?.release;
+    const element = useStore(host ?? unhosted, (state) => state.element);
+    const owner = useStore(host ?? unhosted, (state) => state.owner);
+    const claim = host?.getState().claim;
+    const release = host?.getState().release;
     const hasActions = Boolean(props.period || props.primary || props.secondary || props.menu);
     useEffect(() => {
         if (!hasActions)
@@ -76,7 +90,7 @@ export function PageActions(props) {
     if (!host) {
         return (_jsx("div", { className: "flex justify-end empty:hidden", children: _jsx(PageActionsRow, { ...props }) }));
     }
-    if (!host.element || host.owner !== id)
+    if (!element || owner !== id)
         return null;
-    return createPortal(_jsx(PageActionsRow, { ...props }), host.element);
+    return createPortal(_jsx(PageActionsRow, { ...props }), element);
 }

package/dist/components/scope-switcher.d.ts

@@ -4,6 +4,7 @@ export type ScopeOption = {
     label: string;
     group?: string;
     keywords?: readonly string[];
+    mark?: React.ReactNode;
 };
 export type ScopeSwitcherCopy = {
     label: string;
@@ -22,16 +23,17 @@ export type ScopeSwitcherProps = {
         label: string;
         onSelect: () => void;
     };
+    variant?: "scope" | "navigation";
 };
 /**
  * Says which part of the account a page reads, and changes it.
  *
  * @family Navigation
- * @when Changing which part of the account a page reads, such as Analytics' scope: the whole fleet, one partner, one customer. Only when the viewer has more than one.
+ * @when Changing which part of the account a page reads, such as Analytics' scope, or switching between objects from the shell's top bar with `variant="navigation"`.
  * @instead A viewer with one scope and nothing to create reads its name with no control, which this draws by itself. Finding anything is `CommandDialog`; narrowing rows is `CollectionFilters`.
- * @behaviour A ghost trigger, at most 16rem, opens a 288 px popover with focus in its search. Type to filter, Enter chooses and closes; choosing the current one changes nothing. The caller writes the choice to the URL in `onValueChange`, so sibling pages keep it. An optional create command sits last.
+ * @behaviour A ghost trigger, at most 16rem, opens a 288 px popover with focus in its search. Navigation omits the visible prefix, carries each option's identity mark and opens a 384 px popover constrained to the viewport. Type to filter, Enter chooses and closes; choosing the current one changes nothing. The caller writes the choice to the URL in `onValueChange`, so sibling pages keep it. An optional create command sits last.
  * @words `copy.label` names what is chosen ("Scope") beside the current scope's name. Search and empty lines name the thing: "Find a scope", "No scope matches".
  * @access The trigger reads "Scope: All customers"; the popover has a hidden title; options are a listbox with the current one checked.
  */
-export declare function ScopeSwitcher({ value, options, onValueChange, copy, create }: ScopeSwitcherProps): React.JSX.Element;
+export declare function ScopeSwitcher({ value, options, onValueChange, copy, create, variant, }: ScopeSwitcherProps): React.JSX.Element;
 //# sourceMappingURL=scope-switcher.d.ts.map

package/dist/components/scope-switcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scope-switcher.d.ts","sourceRoot":"","sources":["../../src/components/scope-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IAChC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CAClD,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,kBAAkB,qBA6FhG"}
+{"version":3,"file":"scope-switcher.d.ts","sourceRoot":"","sources":["../../src/components/scope-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IAChC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACjD,OAAO,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;CAClC,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EACP,aAAa,EACb,IAAI,EACJ,MAAM,EACN,OAAiB,GAClB,EAAE,kBAAkB,qBA0GpB"}

package/dist/components/scope-switcher.js

@@ -5,20 +5,22 @@ import { ChevronsUpDown, Plus } from "lucide-react";
 import { Button } from "./button.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "./command.js";
 import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "./popover.js";
+import { cn } from "../lib/utils.js";
 /**
  * Says which part of the account a page reads, and changes it.
  *
  * @family Navigation
- * @when Changing which part of the account a page reads, such as Analytics' scope: the whole fleet, one partner, one customer. Only when the viewer has more than one.
+ * @when Changing which part of the account a page reads, such as Analytics' scope, or switching between objects from the shell's top bar with `variant="navigation"`.
  * @instead A viewer with one scope and nothing to create reads its name with no control, which this draws by itself. Finding anything is `CommandDialog`; narrowing rows is `CollectionFilters`.
- * @behaviour A ghost trigger, at most 16rem, opens a 288 px popover with focus in its search. Type to filter, Enter chooses and closes; choosing the current one changes nothing. The caller writes the choice to the URL in `onValueChange`, so sibling pages keep it. An optional create command sits last.
+ * @behaviour A ghost trigger, at most 16rem, opens a 288 px popover with focus in its search. Navigation omits the visible prefix, carries each option's identity mark and opens a 384 px popover constrained to the viewport. Type to filter, Enter chooses and closes; choosing the current one changes nothing. The caller writes the choice to the URL in `onValueChange`, so sibling pages keep it. An optional create command sits last.
  * @words `copy.label` names what is chosen ("Scope") beside the current scope's name. Search and empty lines name the thing: "Find a scope", "No scope matches".
  * @access The trigger reads "Scope: All customers"; the popover has a hidden title; options are a listbox with the current one checked.
  */
-export function ScopeSwitcher({ value, options, onValueChange, copy, create }) {
+export function ScopeSwitcher({ value, options, onValueChange, copy, create, variant = "scope", }) {
     const [open, setOpen] = React.useState(false);
     const search = React.useRef(null);
-    const currentLabel = options.find((option) => option.value === value)?.label ?? value;
+    const current = options.find((option) => option.value === value);
+    const currentLabel = current?.label ?? value;
     const groups = React.useMemo(() => {
         const byGroup = new Map();
         for (const option of options) {
@@ -34,12 +36,12 @@ export function ScopeSwitcher({ value, options, onValueChange, copy, create }) {
             onValueChange(next);
     };
     const switchable = options.length > 1 || create !== undefined;
-    return (_jsxs("span", { "data-slot": "scope-switcher", className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { "aria-hidden": switchable ? "true" : undefined, className: "text-xs font-medium text-muted-foreground", children: copy.label }), switchable ? (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { variant: "ghost", className: "max-w-64", suffix: _jsx(ChevronsUpDown, { "aria-hidden": "true" }) }), children: [_jsxs("span", { className: "sr-only", children: [copy.label, ":"] }), " ", _jsx("span", { className: "truncate", children: currentLabel })] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-0", initialFocus: search, children: [_jsx(PopoverTitle, { className: "sr-only", children: copy.label }), _jsxs(Command, { label: copy.search, resultCount: copy.results, children: [_jsx(CommandInput, { ref: search, "aria-label": copy.search, placeholder: copy.search }), _jsxs(CommandList, { label: copy.label, children: [_jsx(CommandEmpty, { children: copy.empty }), groups.map(([group, items]) => (_jsx(CommandGroup, { heading: group, children: items.map((option) => (_jsx(CommandItem, { value: option.value, keywords: [
+    return (_jsxs("span", { "data-slot": "scope-switcher", className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { "aria-hidden": switchable ? "true" : undefined, className: cn("text-xs font-medium text-muted-foreground", variant === "navigation" && "sr-only"), children: copy.label }), switchable ? (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { variant: "ghost", className: "min-w-0 max-w-64 shrink", prefix: current?.mark ? _jsx("span", { "aria-hidden": "true", children: current.mark }) : undefined, suffix: _jsx(ChevronsUpDown, { "aria-hidden": "true" }) }), children: [_jsxs("span", { className: "sr-only", children: [copy.label, ":"] }), " ", _jsx("span", { className: "truncate", children: currentLabel })] }), _jsxs(PopoverContent, { align: "start", className: cn("w-72 max-w-[calc(100vw-2rem)] p-0", variant === "navigation" && "w-96"), initialFocus: search, children: [_jsx(PopoverTitle, { className: "sr-only", children: copy.label }), _jsxs(Command, { label: copy.search, resultCount: copy.results, children: [_jsx(CommandInput, { ref: search, "aria-label": copy.search, placeholder: copy.search }), _jsxs(CommandList, { label: copy.label, children: [_jsx(CommandEmpty, { children: copy.empty }), groups.map(([group, items]) => (_jsx(CommandGroup, { heading: group, children: items.map((option) => (_jsxs(CommandItem, { value: option.value, keywords: [
                                                         option.label,
                                                         ...(option.group ? [option.group] : []),
                                                         ...(option.keywords ?? []),
-                                                    ], "data-checked": option.value === value, onSelect: () => choose(option.value), children: _jsx("span", { className: "truncate", children: option.label }) }, option.value))) }, group ?? ""))), create ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, { alwaysRender: true }), _jsx(CommandGroup, { forceMount: true, heading: undefined, children: _jsxs(CommandItem, { value: `create ${create.label}`, forceMount: true, onSelect: () => {
+                                                    ], "data-checked": option.value === value, onSelect: () => choose(option.value), children: [option.mark ? _jsx("span", { "aria-hidden": "true", children: option.mark }) : null, _jsx("span", { className: "truncate", children: option.label })] }, option.value))) }, group ?? ""))), create ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, { alwaysRender: true }), _jsx(CommandGroup, { forceMount: true, heading: undefined, children: _jsxs(CommandItem, { value: `create ${create.label}`, forceMount: true, onSelect: () => {
                                                                 setOpen(false);
                                                                 create.onSelect();
-                                                            }, children: [_jsx(Plus, { "aria-hidden": "true" }), create.label] }) })] })) : null] })] })] })] })) : (_jsx("span", { className: "truncate px-3 text-sm", children: currentLabel }))] }));
+                                                            }, children: [_jsx(Plus, { "aria-hidden": "true" }), create.label] }) })] })) : null] })] })] })] })) : (_jsxs("span", { className: "flex min-w-0 items-center gap-2 px-3 text-sm", children: [current?.mark ? _jsx("span", { "aria-hidden": "true", children: current.mark }) : null, _jsx("span", { className: "truncate", children: currentLabel })] }))] }));
 }

package/dist/showcase/usage.generated.js

@@ -866,9 +866,9 @@ export const USAGE = [
         module: "scope-switcher",
         family: "Navigation",
         summary: "Says which part of the account a page reads, and changes it.",
-        when: "Changing which part of the account a page reads, such as Analytics' scope: the whole fleet, one partner, one customer. Only when the viewer has more than one.",
+        when: "Changing which part of the account a page reads, such as Analytics' scope, or switching between objects from the shell's top bar with `variant=\"navigation\"`.",
         instead: "A viewer with one scope and nothing to create reads its name with no control, which this draws by itself. Finding anything is `CommandDialog`; narrowing rows is `CollectionFilters`.",
-        behaviour: "A ghost trigger, at most 16rem, opens a 288 px popover with focus in its search. Type to filter, Enter chooses and closes; choosing the current one changes nothing. The caller writes the choice to the URL in `onValueChange`, so sibling pages keep it. An optional create command sits last.",
+        behaviour: "A ghost trigger, at most 16rem, opens a 288 px popover with focus in its search. Navigation omits the visible prefix, carries each option's identity mark and opens a 384 px popover constrained to the viewport. Type to filter, Enter chooses and closes; choosing the current one changes nothing. The caller writes the choice to the URL in `onValueChange`, so sibling pages keep it. An optional create command sits last.",
         words: '`copy.label` names what is chosen ("Scope") beside the current scope\'s name. Search and empty lines name the thing: "Find a scope", "No scope matches".',
         access: 'The trigger reads "Scope: All customers"; the popover has a hidden title; options are a listbox with the current one checked.',
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.117",
+  "version": "12.1.119",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -67,7 +67,8 @@
     "generate:merge-tokens": "node scripts/generate-merge-tokens.mjs",
     "generate:usage": "node scripts/generate-usage.mjs",
     "prepack": "npm run build",
-    "lint": "node scripts/generate-merge-tokens.mjs --check && node scripts/generate-usage.mjs --check && node ../../tools/workspace/heavy-slots.mjs -- eslint --max-warnings=0",
+    "lint": "npm run lint:oxlint && node scripts/generate-merge-tokens.mjs --check && node scripts/generate-usage.mjs --check && node ../../tools/workspace/heavy-slots.mjs -- eslint --max-warnings=0",
+    "lint:oxlint": "node ../../tools/workspace/heavy-slots.mjs -- oxlint",
     "typecheck": "node ../../tools/workspace/heavy-slots.mjs -- node ../../node_modules/typescript-native/bin/tsc --checkers 2 --noEmit",
     "check": "npm run lint && npm run typecheck",
     "check:static": "npm run check",
@@ -77,12 +78,12 @@
     "test:distribution": "node ../../tools/release/package-smoke-test.mjs"
   },
   "dependencies": {
-    "@assistant-ui/react": "0.15.28",
-    "@assistant-ui/react-markdown": "0.14.22",
+    "@assistant-ui/react": "0.15.29",
+    "@assistant-ui/react-markdown": "0.14.23",
     "@base-ui/react": "^1.9.0",
     "@iconify-icons/logos": "^2.0.3",
     "@iconify/react": "^6.0.2",
-    "@nadicodeai/design-system": "12.1.117",
+    "@nadicodeai/design-system": "12.1.119",
     "@tanstack/react-table": "^9.3.1",
     "@vgpu/wgsl": "0.6.0",
     "class-variance-authority": "^0.7.1",
@@ -92,7 +93,7 @@
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",
     "lucide-react": "1.57.0",
-    "motion": "^13.4.4",
+    "motion": "^14.3.0",
     "next-themes": "^0.4.6",
     "qrcode": "^1.5.4",
     "react-day-picker": "^10.0.2",
@@ -115,7 +116,10 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
     "@lobehub/icons-static-svg": "^1.95.1",
+    "@nadicodeai/eslint-config": "*",
     "@nadicodeai/eslint-plugin": "*",
+    "@nadicodeai/oxlint-config": "*",
+    "@nadicodeai/test-support": "*",
     "@stryker-mutator/core": "10.0.0",
     "@stryker-mutator/vitest-runner": "10.0.0",
     "@tailwindcss/postcss": "^4.3.3",
@@ -127,6 +131,7 @@
     "esbuild": "^0.28.2",
     "eslint": "^9.39.4",
     "jsdom": "^30.1.3",
+    "oxlint": "1.88.0",
     "postcss": "^8.5.30",
     "publint": "^0.3.25",
     "react": "19.3.1",
@@ -135,6 +140,6 @@
     "tailwindcss": "^4.3.3",
     "typescript": "^6",
     "typescript-native": "npm:typescript@7.0.2",
-    "vitest": "^5.0.0"
+    "vitest": "^5.0.5"
   }
 }