@undefineds.co/xpod 0.4.20 → 0.4.25

package/node_modules/@undefineds.co/shared-ui/dist/segmented-control.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface SegmentedControlOption<T extends string> {
+    value: T;
+    /** Visible segment text. Omit when the segment is icon-only. */
+    label?: React.ReactNode;
+    /** Decorative glyph rendered before the label. */
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    /** Accessible name for an icon-only segment. */
+    'aria-label'?: string;
+}
+export interface SegmentedControlProps<T extends string> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children' | 'defaultValue'> {
+    value: T;
+    onValueChange: (value: T) => void;
+    options: ReadonlyArray<SegmentedControlOption<T>>;
+    /** Accessible name for the single-choice group. */
+    ariaLabel: string;
+    /** Native radio group name. Generated when omitted so the radios stay one group. */
+    name?: string;
+    size?: 'sm' | 'md';
+}
+/**
+ * Single-choice segmented control backed by a native radio group.
+ *
+ * Controlled via `value` / `onValueChange`; disabled options are skipped by
+ * pointer and by the roving Arrow/Home/End keyboard model. When a caller needs
+ * to switch tab panels, use a tablist instead: this control truthfully exposes
+ * radio semantics for filters and view toggles.
+ */
+export declare function SegmentedControl<T extends string>({ value, onValueChange, options, ariaLabel, name, size, className, onKeyDown, ...props }: SegmentedControlProps<T>): React.JSX.Element;

package/node_modules/@undefineds.co/shared-ui/dist/segmented-control.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from './utils.js';
+const sizeClass = {
+    // Height is a lower bound: 36px for precise pointers, 44px for coarse ones.
+    sm: 'min-h-9 px-2.5 text-xs [@media(pointer:coarse)]:min-h-11',
+    md: 'min-h-9 px-3 text-sm [@media(pointer:coarse)]:min-h-11',
+};
+const selectedClass = 'bg-card font-semibold text-primary shadow-sm';
+const idleClass = 'text-foreground hover:text-primary';
+/**
+ * Single-choice segmented control backed by a native radio group.
+ *
+ * Controlled via `value` / `onValueChange`; disabled options are skipped by
+ * pointer and by the roving Arrow/Home/End keyboard model. When a caller needs
+ * to switch tab panels, use a tablist instead: this control truthfully exposes
+ * radio semantics for filters and view toggles.
+ */
+export function SegmentedControl({ value, onValueChange, options, ariaLabel, name, size = 'md', className, onKeyDown, ...props }) {
+    const generatedName = React.useId();
+    const groupName = name ?? generatedName;
+    const refs = React.useRef([]);
+    const selectedIndex = options.findIndex(option => option.value === value);
+    const enabledIndices = options
+        .map((option, index) => (option.disabled ? -1 : index))
+        .filter(index => index >= 0);
+    const tabbableIndex = selectedIndex >= 0 && !options[selectedIndex]?.disabled
+        ? selectedIndex
+        : enabledIndices[0];
+    const select = (index) => {
+        const option = options[index];
+        if (!option || option.disabled)
+            return;
+        refs.current[index]?.focus();
+        if (option.value !== value)
+            onValueChange(option.value);
+    };
+    const step = (from, direction) => {
+        if (enabledIndices.length === 0)
+            return;
+        const position = enabledIndices.indexOf(from);
+        const nextPosition = position < 0
+            ? (direction > 0 ? 0 : enabledIndices.length - 1)
+            : (position + direction + enabledIndices.length) % enabledIndices.length;
+        select(enabledIndices[nextPosition]);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        const activeIndex = refs.current.findIndex(element => element === document.activeElement);
+        const from = activeIndex >= 0 ? activeIndex : tabbableIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                step(from, 1);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                step(from, -1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                step(-1, 1);
+                break;
+            case 'End':
+                event.preventDefault();
+                step(-1, -1);
+                break;
+            default:
+                break;
+        }
+    };
+    return (_jsx("div", { role: "radiogroup", "aria-label": ariaLabel, className: cn('inline-flex items-center gap-0.5 rounded-lg bg-muted p-0.5', className), onKeyDown: handleKeyDown, ...props, children: options.map((option, index) => {
+            const checked = option.value === value;
+            const accessibleLabel = option['aria-label'];
+            return (_jsxs("label", { className: cn('relative inline-flex min-w-0 grow cursor-pointer select-none items-center justify-center gap-1.5 rounded-md transition-colors', sizeClass[size], checked ? selectedClass : idleClass, option.disabled && 'cursor-not-allowed opacity-50'), children: [_jsx("input", { ref: element => { refs.current[index] = element; }, type: "radio", className: "absolute inset-0 m-0 h-full w-full cursor-pointer appearance-none opacity-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed", name: groupName, value: option.value, checked: checked, disabled: option.disabled, tabIndex: index === tabbableIndex ? 0 : -1, "aria-label": accessibleLabel, onChange: () => select(index) }), option.icon ? _jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0 items-center", children: option.icon }) : null, option.label ? _jsx("span", { className: "min-w-0 break-words text-center", children: option.label }) : null] }, option.value));
+        }) }));
+}

package/node_modules/@undefineds.co/shared-ui/dist/select.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, };

package/node_modules/@undefineds.co/shared-ui/dist/select.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { controlFocusClass } from './focus.js';
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown } from 'lucide-react';
+import { cn } from './utils.js';
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm', 'placeholder:text-muted-foreground', controlFocusClass, 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { ref: ref, className: cn('relative z-[var(--layer-popover)] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2', 'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
+                'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }) }) })));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('px-2 py-1.5 text-sm font-semibold', className), ...props })));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none', 'focus:bg-accent focus:text-accent-foreground', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, };

package/node_modules/@undefineds.co/shared-ui/dist/setting-row.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface SettingRowControlProps {
+    id: string;
+    'aria-describedby'?: string;
+}
+export interface SettingRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    /**
+     * Render the control; callers must apply the supplied `id` to the actual
+     * control so the visible label is associated with it.
+     */
+    control: (props: SettingRowControlProps) => React.ReactNode;
+}
+/** Pure label/description/control row. Business state stays with the caller. */
+export declare function SettingRow({ label, description, control, className, ...props }: SettingRowProps): React.JSX.Element;
+export interface SwitchSettingRowProps extends Omit<SettingRowProps, 'control'> {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+}
+/** Convenience setting row that reuses the shared `Switch` implementation. */
+export declare function SwitchSettingRow({ checked, onCheckedChange, disabled, ...props }: SwitchSettingRowProps): React.JSX.Element;

package/node_modules/@undefineds.co/shared-ui/dist/setting-row.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Switch } from './switch.js';
+import { cn } from './utils.js';
+/** Pure label/description/control row. Business state stays with the caller. */
+export function SettingRow({ label, description, control, className, ...props }) {
+    const id = React.useId();
+    const descriptionId = description ? `${id}-description` : undefined;
+    return (_jsxs("div", { className: cn('flex min-h-16 items-center justify-between gap-3 border-b border-border', className), ...props, children: [_jsxs("div", { className: "min-w-0", children: [_jsx("label", { htmlFor: id, className: "text-sm leading-normal text-foreground", children: label }), description ? (_jsx("p", { id: descriptionId, className: "mt-1 text-xs leading-normal text-muted-foreground", children: description })) : null] }), _jsx("div", { className: "shrink-0", children: control({ id, 'aria-describedby': descriptionId }) })] }));
+}
+/** Convenience setting row that reuses the shared `Switch` implementation. */
+export function SwitchSettingRow({ checked, onCheckedChange, disabled, ...props }) {
+    return (_jsx(SettingRow, { ...props, control: ({ id, 'aria-describedby': describedBy }) => (_jsx(Switch, { id: id, checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, "aria-describedby": describedBy })) }));
+}

package/node_modules/@undefineds.co/shared-ui/dist/status.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+/**
+ * Canonical semantic tones shared by the visual feedback primitives.
+ * Callers map their own domain states onto these names; the components never
+ * branch on provider or business vocabulary.
+ */
+export type StatusTone = 'success' | 'warning' | 'destructive' | 'info' | 'neutral';
+declare const dotSizeClass: {
+    readonly sm: "h-1.5 w-1.5";
+    readonly md: "h-2 w-2";
+};
+export interface StatusDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    tone: StatusTone;
+    /**
+     * Accessible name for a standalone dot. Omit it when adjacent visible text
+     * already names the status so the meaning is not announced twice.
+     */
+    label?: string;
+    size?: keyof typeof dotSizeClass;
+}
+/**
+ * A small colour dot that never relies on colour alone: either it carries a
+ * `label`, or it is decorative next to visible text.
+ */
+export declare function StatusDot({ tone, label, size, className, 'aria-label': ariaLabel, ...props }: StatusDotProps): React.JSX.Element;
+export interface StatusLineProps extends React.HTMLAttributes<HTMLSpanElement> {
+    tone: StatusTone;
+    /** Visible status text; it is the accessible name for the line. */
+    children: React.ReactNode;
+    /** Dot size; defaults to the denser `sm` used by inline status rows. */
+    dotSize?: keyof typeof dotSizeClass;
+}
+/** Dot + visible status word. The dot is decorative so nothing is announced twice. */
+export declare function StatusLine({ tone, children, dotSize, className, ...props }: StatusLineProps): React.JSX.Element;
+export {};

package/node_modules/@undefineds.co/shared-ui/dist/status.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './utils.js';
+const dotToneClass = {
+    success: 'bg-success',
+    warning: 'bg-warning',
+    destructive: 'bg-destructive',
+    // No dedicated `--info` token exists; `info` intentionally maps to `--primary`.
+    info: 'bg-primary',
+    neutral: 'border border-muted-foreground bg-transparent',
+};
+const dotSizeClass = {
+    sm: 'h-1.5 w-1.5',
+    md: 'h-2 w-2',
+};
+/**
+ * A small colour dot that never relies on colour alone: either it carries a
+ * `label`, or it is decorative next to visible text.
+ */
+export function StatusDot({ tone, label, size = 'md', className, 'aria-label': ariaLabel, ...props }) {
+    const accessibleName = label ?? ariaLabel;
+    const accessibleProps = accessibleName
+        ? { role: 'img', 'aria-label': accessibleName, title: accessibleName }
+        : { 'aria-hidden': true };
+    return (_jsx("span", { className: cn('inline-block shrink-0 rounded-full', dotSizeClass[size], dotToneClass[tone], className), ...props, ...accessibleProps }));
+}
+/** Dot + visible status word. The dot is decorative so nothing is announced twice. */
+export function StatusLine({ tone, children, dotSize = 'sm', className, ...props }) {
+    return (_jsxs("span", { className: cn('inline-flex items-center gap-1.5', className), ...props, children: [_jsx(StatusDot, { tone: tone, size: dotSize }), _jsx("span", { children: children })] }));
+}

package/node_modules/@undefineds.co/shared-ui/dist/textarea.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/node_modules/@undefineds.co/shared-ui/dist/textarea.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { formControlClass } from './form-control.js';
+import { cn } from './utils.js';
+export const Textarea = React.forwardRef(({ className, ...props }, ref) => (_jsx("textarea", { ref: ref, className: cn(formControlClass, 'min-h-20 resize-y', className), ...props })));
+Textarea.displayName = 'Textarea';

package/node_modules/@undefineds.co/shared-ui/dist/theme.css

@@ -1,28 +1,25 @@
 @layer base {
   :root {
     color-scheme: light;
-    --background: 42 38.5% 94.9%; /* canvas #F7F4ED */
-    --foreground: 30 13.2% 14.9%; /* text #2B2621 */
-    --card: 45 33.3% 97.6%; /* raised #FBFAF7 */
+    --background: 42 38.5% 94.9%;
+    --foreground: 30 13.2% 14.9%;
+    --card: 45 33.3% 97.6%;
     --card-foreground: 30 13.2% 14.9%;
     --popover: 45 33.3% 97.6%;
     --popover-foreground: 30 13.2% 14.9%;
-    --primary: 260.6 36.1% 38%; /* action #563E84 */
-    --primary-foreground: 42 38.5% 94.9%; /* on-action #F7F4ED */
-    --primary-hover: 261 35.7% 32.9%; /* action hover #4B3672 */
-    --primary-pressed: 261.2 35.7% 28%; /* action pressed #402E61 */
-    --secondary: 0 10.2% 90.4%; /* tint canvas #E9E4E4 */
+    --primary: 260.6 36.1% 38%;
+    --primary-foreground: 42 38.5% 94.9%;
+    --secondary: 0 10.2% 90.4%;
     --secondary-foreground: 30 13.2% 14.9%;
-    --muted: 18 15.6% 87.5%; /* tint sunken #E4DDDA */
-    --muted-foreground: 33.3 9.8% 36.1%; /* muted #655D53 */
-    --accent: 0 10.2% 90.4%; /* tint #E9E4E4 */
+    --muted: 18 15.6% 87.5%;
+    --muted-foreground: 33.3 9.8% 36.1%;
+    --accent: 324 7.5% 86.9%;
     --accent-foreground: 30 13.2% 14.9%;
     --destructive: 352 43% 49%;
     --destructive-foreground: 0 0% 100%;
-    --border: 36 13.5% 85.5%; /* line #DFDBD5 */
-    --input: 36 4% 51%; /* control #87837D */
-    --control-strong: 33.3 9.8% 36.1%; /* control-strong on tint #655D53 */
-    --ring: 260.6 36.1% 38%; /* focus = action #563E84 */
+    --border: 36 13.5% 85.5%;
+    --input: 36 4% 51%;
+    --ring: 260.6 36.1% 38%;
     --lineage: 260.6 36.1% 38%;
     --lineage-foreground: 42 38.5% 94.9%;
     --boundary: 202 34% 37%;
@@ -39,44 +36,55 @@
     --radius-2xl: 16px;
     --radius-3xl: 16px;
     --radius: 0.5rem;
-    --layout-sidebar: 41.3 38.1% 91.8%; /* sunken #F2EDE2 */
-    --layout-list-header: 42 38.5% 94.9%; /* canvas #F7F4ED */
-    --layout-list-hover: 0 10.2% 90.4%; /* tint #E9E4E4 */
-    --layout-list-item: 45 33.3% 97.6%; /* raised #FBFAF7 */
-    --layout-list-selected: 0 10.2% 90.4%; /* tint #E9E4E4 */
-    --layout-content: 42 38.5% 94.9%; /* canvas #F7F4ED */
+    --layout-sidebar: 41.3 38.1% 91.8%;
+    --layout-list-header: 42 38.5% 94.9%;
+    --layout-list-hover: 0 10.2% 90.4%;
+    --layout-list-item: 45 33.3% 97.6%;
+    --layout-list-selected: 324 7.5% 86.9%;
+    --layout-content: 42 38.5% 94.9%;
     --purple-medium: 260.6 36.1% 38%;
     --purple-deep: 261.2 35.7% 28%;
     --purple-light: 258 48% 84%;
-    --sunken: 41.3 38.1% 91.8%; /* sunken #F2EDE2 */
+    --control-strong: 33.3 9.8% 36.1%;
+    --primary-hover: 261 35.7% 32.9%;
+    --primary-pressed: 261.2 35.7% 28%;
+    --sunken: 41.3 38.1% 91.8%;
+    --action-hover: 261 35.7% 32.9%;
+    --action-pressed: 261.2 35.7% 28%;
+    --tint-canvas: 0 10.2% 90.4%;
+    --tint-sunken: 18 15.6% 87.5%;
+    --tint-badge: 324 7.5% 86.9%;
+    /* 公共叠层：§8.2 层级表的唯一来源，页面不得自带数值 */
+    --layer-base: 0;
+    --layer-sticky: 10;
+    --layer-popover: 20;
+    --layer-backdrop: 30;
+    --layer-modal: 40;
+    --layer-toast: 50;
+    --scrim: 30 13.8% 11.4%;
   }
 
   .dark {
     color-scheme: dark;
-    --background: 30 13.8% 11.4%; /* canvas #211D19 */
-    --foreground: 42 38.5% 94.9%; /* text #F7F4ED */
-    --card: 30 13.2% 14.9%; /* raised #2B2621 */
+    --background: 30 13.8% 11.4%;
+    --foreground: 42 38.5% 94.9%;
+    --card: 30 13.2% 14.9%;
     --card-foreground: 42 38.5% 94.9%;
     --popover: 30 13.2% 14.9%;
     --popover-foreground: 42 38.5% 94.9%;
-    /* R2 §8.4: the fixed brand violet is 1.93:1 on dark canvas, so the dark
-       action role is the lightened mapping, never #563E84 itself. */
-    --primary: 270 16.7% 71.8%; /* action #B7ABC3 */
-    --primary-foreground: 30 13.8% 11.4%; /* on-action #211D19 */
-    --primary-hover: 271.6 16.8% 77.8%; /* action hover #C7BDD0 */
-    --primary-pressed: 264.4 18.8% 66.7%; /* action pressed #A79ABA */
-    --secondary: 276.9 11.7% 21.8%; /* tint #39313E */
+    --primary: 270 16.7% 71.8%;
+    --primary-foreground: 30 13.8% 11.4%;
+    --secondary: 276.9 11.7% 21.8%;
     --secondary-foreground: 42 38.5% 94.9%;
-    --muted: 276.9 11.7% 21.8%; /* tint #39313E */
-    --muted-foreground: 34.3 15.8% 73.9%; /* muted #C7BEB2 */
-    --accent: 276.9 11.7% 21.8%; /* tint #39313E */
+    --muted: 276.9 11.7% 21.8%;
+    --muted-foreground: 34.3 15.8% 73.9%;
+    --accent: 276.9 11.7% 21.8%;
     --accent-foreground: 42 38.5% 94.9%;
     --destructive: 352 43% 49%;
     --destructive-foreground: 0 0% 100%;
-    --border: 30 12.3% 25.5%; /* line #494139 */
-    --input: 32.7 9.2% 53.3%; /* control #93897D */
-    --control-strong: 33.9 13.6% 66.9%; /* control-strong on tint #B6AC9F */
-    --ring: 270 16.7% 71.8%; /* focus = action #B7ABC3 */
+    --border: 30 12.3% 25.5%;
+    --input: 32.7 9.2% 53.3%;
+    --ring: 270 16.7% 71.8%;
     --lineage: 270 16.7% 71.8%;
     --lineage-foreground: 30 13.8% 11.4%;
     --boundary: 202 34% 48%;
@@ -85,13 +93,31 @@
     --success-foreground: 0 0% 100%;
     --warning: 44 72% 48%;
     --warning-foreground: 0 0% 100%;
-    --layout-sidebar: 30 13.6% 8.6%; /* sunken #191613 */
-    --layout-list-header: 30 13.8% 11.4%; /* canvas #211D19 */
-    --layout-list-hover: 276.9 11.7% 21.8%; /* tint #39313E */
-    --layout-list-item: 30 13.2% 14.9%; /* raised #2B2621 */
-    --layout-list-selected: 276.9 11.7% 21.8%; /* tint #39313E */
-    --layout-content: 30 13.8% 11.4%; /* canvas #211D19 */
-    --sunken: 30 13.6% 8.6%; /* sunken #191613 */
+    --layout-sidebar: 30 13.6% 8.6%;
+    --layout-list-header: 30 13.8% 11.4%;
+    --layout-list-hover: 276.9 11.7% 21.8%;
+    --layout-list-item: 30 13.2% 14.9%;
+    --layout-list-selected: 276.9 11.7% 21.8%;
+    --layout-content: 30 13.8% 11.4%;
+    --control-strong: 33.9 13.6% 66.9%;
+    --primary-hover: 271.6 16.8% 77.8%;
+    --primary-pressed: 264.4 18.8% 66.7%;
+    --sunken: 30 13.6% 8.6%;
+    --action-hover: 271.6 16.8% 77.8%;
+    --action-pressed: 264.4 18.8% 66.7%;
+    --tint-canvas: 276.9 11.7% 21.8%;
+    --tint-sunken: 276.9 11.7% 21.8%;
+    --tint-badge: 276.9 11.7% 21.8%;
+    --purple-medium: 270 16.7% 71.8%;
+    --purple-deep: 264.4 18.8% 66.7%;
+    /* 公共叠层：§8.2 层级表的唯一来源，页面不得自带数值 */
+    --layer-base: 0;
+    --layer-sticky: 10;
+    --layer-popover: 20;
+    --layer-backdrop: 30;
+    --layer-modal: 40;
+    --layer-toast: 50;
+    --scrim: 30 13.8% 11.4%;
   }
 
   .light {
@@ -104,19 +130,16 @@
     --popover-foreground: 30 13.2% 14.9%;
     --primary: 260.6 36.1% 38%;
     --primary-foreground: 42 38.5% 94.9%;
-    --primary-hover: 261 35.7% 32.9%;
-    --primary-pressed: 261.2 35.7% 28%;
     --secondary: 0 10.2% 90.4%;
     --secondary-foreground: 30 13.2% 14.9%;
     --muted: 18 15.6% 87.5%;
     --muted-foreground: 33.3 9.8% 36.1%;
-    --accent: 0 10.2% 90.4%;
+    --accent: 324 7.5% 86.9%;
     --accent-foreground: 30 13.2% 14.9%;
     --destructive: 352 43% 49%;
     --destructive-foreground: 0 0% 100%;
     --border: 36 13.5% 85.5%;
     --input: 36 4% 51%;
-    --control-strong: 33.3 9.8% 36.1%;
     --ring: 260.6 36.1% 38%;
     --lineage: 260.6 36.1% 38%;
     --lineage-foreground: 42 38.5% 94.9%;
@@ -130,12 +153,28 @@
     --layout-list-header: 42 38.5% 94.9%;
     --layout-list-hover: 0 10.2% 90.4%;
     --layout-list-item: 45 33.3% 97.6%;
-    --layout-list-selected: 0 10.2% 90.4%;
+    --layout-list-selected: 324 7.5% 86.9%;
     --layout-content: 42 38.5% 94.9%;
     --purple-medium: 260.6 36.1% 38%;
     --purple-deep: 261.2 35.7% 28%;
     --purple-light: 258 48% 84%;
+    --control-strong: 33.3 9.8% 36.1%;
+    --primary-hover: 261 35.7% 32.9%;
+    --primary-pressed: 261.2 35.7% 28%;
     --sunken: 41.3 38.1% 91.8%;
+    --action-hover: 261 35.7% 32.9%;
+    --action-pressed: 261.2 35.7% 28%;
+    --tint-canvas: 0 10.2% 90.4%;
+    --tint-sunken: 18 15.6% 87.5%;
+    --tint-badge: 324 7.5% 86.9%;
+    /* 公共叠层：§8.2 层级表的唯一来源，页面不得自带数值 */
+    --layer-base: 0;
+    --layer-sticky: 10;
+    --layer-popover: 20;
+    --layer-backdrop: 30;
+    --layer-modal: 40;
+    --layer-toast: 50;
+    --scrim: 30 13.8% 11.4%;
   }
 
   html,
@@ -176,22 +215,12 @@
     --tw-ring-offset-color: hsl(var(--background));
   }
 
-  /*
-   * Clear @tailwindcss/forms' fixed blue focus colour (border + ring box-shadow)
-   * so it cannot stack with the shared outline into the double frame the design
-   * forbids. Every native control is covered — text inputs, textarea, select and
-   * also checkbox/radio, whose plugin rule is `input:where([type=...]):focus`
-   * (0,1,1) like the text fields and would otherwise keep its blue 2px/4px ring.
-   * This selector is deliberately (0,1,2): it outranks every plugin base
-   * (0,1,1) but loses to the shared `focus-visible:outline-*` utility (0,2,0),
-   * which stays the single owner of the visible control focus boundary. The
-   * checked/hover state selectors (0,2,1) still win, so a checked box keeps its
-   * filled appearance.
-   */
+  /* Replace the forms plugin's blue ring with the control's existing border.
+   * Include checkbox/radio and plain native controls, even without utilities. */
   html input:focus,
   html textarea:focus,
   html select:focus {
-    border-color: hsl(var(--input));
+    border-color: hsl(var(--ring));
     outline: none;
     box-shadow: none;
     --tw-ring-shadow: 0 0 #0000;
@@ -213,20 +242,22 @@
     outline: none;
   }
 
-  /*
-   * Keyboard-focus fallback for legacy native controls that never adopted the
-   * shared `controlFocusClass` (settings pages, document panels, plain
-   * selects). The blanket `:focus { outline: none }` above must not erase the
-   * keyboard affordance, so this rule wins on source order at the same
-   * specificity and restores the one ink-violet outline. Shared controls keep
-   * the utility as the single owner: `focus-visible:outline-*` is (0,2,0) and
-   * outranks this (0,1,2) fallback, so no second boundary appears.
-   */
+  /* A stronger existing border preserves visible keyboard focus without a
+   * separate outline or shadow outside the control. */
   html input:focus-visible,
   html textarea:focus-visible,
   html select:focus-visible {
-    outline: 2px solid hsl(var(--ring));
-    outline-offset: 3px;
+    border-color: hsl(var(--ring));
+    border-width: 2px;
+    outline: none;
+    box-shadow: none;
+  }
+
+  /* Filled toggles need a contrasting border, and must outrank forms' checked
+   * focus rule which otherwise makes the only keyboard boundary transparent. */
+  html input:where([type='checkbox'], [type='radio']):checked:focus-visible,
+  html input:where([type='checkbox']):indeterminate:focus-visible {
+    border-color: hsl(var(--primary-foreground));
   }
 
   html input:-webkit-autofill,
@@ -283,6 +314,33 @@
     line-height: 22px;
   }
 
+  .pod-sign-in h1 {
+    font-size: 22px;
+    line-height: 1.4;
+  }
+
+  /* Keep the choices visible at the native window's minimum height. */
+  @media (max-height: 559px) {
+    .pod-sign-in[data-pod-sign-in-frame='window'] [data-pod-sign-in='main'] {
+      gap: 1rem;
+      padding-top: 1rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .pod-sign-in[data-pod-sign-in-frame='window'] [data-pod-sign-in='actions'] {
+      gap: 0.75rem;
+      padding-top: 0.75rem;
+      padding-bottom: 1rem;
+    }
+  }
+
+  /* Taller native windows keep the submit action close to the form. */
+  @media (min-width: 400px) and (min-height: 560px) {
+    .pod-sign-in[data-pod-sign-in-frame='window'] [data-pod-sign-in='actions'] {
+      padding-bottom: 5rem;
+    }
+  }
+
   /*
    * Front-door focus for links, buttons and summary. Form controls are excluded:
    * the shared control primitive owns their focus outline, so a control never
@@ -293,6 +351,36 @@
     outline-offset: 3px;
   }
 
+  /* Short native login keeps full-size controls; only surrounding space shrinks.
+   * The form owns overflow so errors and enlarged text use one vertical scroll. */
+  [data-pod-sign-in-frame="window"] [data-pod-sign-in-state="idp-sign-in"] {
+    overflow-y: auto;
+  }
+
+  [data-pod-sign-in-frame="window"] [data-pod-sign-in-state="idp-sign-in"] [data-pod-sign-in="idp-chrome"] {
+    height: 32px;
+  }
+
+  [data-pod-sign-in-frame="window"] [data-pod-sign-in-state="idp-sign-in"] [data-pod-sign-in="main"] {
+    flex: 1 0 auto;
+    overflow: visible;
+    gap: 8px;
+    padding: 8px 16px;
+  }
+
+  [data-pod-sign-in-frame="window"] [data-pod-sign-in-state="idp-sign-in"] [data-pod-sign-in="fields"] {
+    gap: 8px;
+  }
+
+  [data-pod-sign-in-frame="window"] [data-pod-sign-in-state="idp-sign-in"] [data-pod-sign-in="field"] {
+    gap: 2px;
+  }
+
+  [data-pod-sign-in-frame="window"] [data-pod-sign-in-state="idp-sign-in"] [data-pod-sign-in="actions"] {
+    gap: 0;
+    padding: 8px 16px;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .pod-sign-in,
     .pod-sign-in * {
@@ -301,6 +389,11 @@
     }
   }
 
+  /* 弹层遮罩的唯一实现：颜色来自 --scrim，透明度不散落在页面 */
+  .xpod-overlay-scrim {
+    background-color: hsl(var(--scrim) / 0.45);
+  }
+
   .warm-card {
     border: 1px solid hsl(var(--border) / 0.5);
     border-radius: var(--radius-xl);

package/node_modules/@undefineds.co/shared-ui/dist/toast.js

@@ -64,5 +64,5 @@ function getSnapshot() {
 }
 export function Toaster({ className }) {
     const toasts = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-    return (_jsx("div", { "aria-live": "polite", role: "status", className: cn('pointer-events-none fixed bottom-4 right-4 z-[100] flex w-full max-w-sm flex-col gap-2', className), children: toasts.map((item) => (_jsxs("div", { className: cn(toastVariants({ variant: item.variant }), item.className), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [item.title ? _jsx("p", { className: "font-medium", children: item.title }) : null, item.description ? _jsx("p", { className: cn(item.title ? 'mt-0.5' : undefined), children: item.description }) : null] }), _jsx("button", { type: "button", "aria-label": "\u5173\u95ED\u901A\u77E5", className: cn('shrink-0 rounded-sm opacity-60 transition-opacity hover:opacity-100', interactiveFocusClass), onClick: () => dismissToast(item.id), children: _jsx(X, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) })] }, item.id))) }));
+    return (_jsx("div", { "aria-live": "polite", role: "status", className: cn('pointer-events-none fixed bottom-4 right-4 z-[var(--layer-toast)] flex w-full max-w-sm flex-col gap-2', className), children: toasts.map((item) => (_jsxs("div", { className: cn(toastVariants({ variant: item.variant }), item.className), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [item.title ? _jsx("p", { className: "font-medium", children: item.title }) : null, item.description ? _jsx("p", { className: cn(item.title ? 'mt-0.5' : undefined), children: item.description }) : null] }), _jsx("button", { type: "button", "aria-label": "\u5173\u95ED\u901A\u77E5", className: cn('shrink-0 rounded-sm opacity-60 transition-opacity hover:opacity-100', interactiveFocusClass), onClick: () => dismissToast(item.id), children: _jsx(X, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) })] }, item.id))) }));
 }

package/node_modules/@undefineds.co/shared-ui/dist/tooltip.d.ts

@@ -3,5 +3,6 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
 declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipPortal: React.FC<TooltipPrimitive.TooltipPortalProps>;
 declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipPortal, TooltipProvider };