@snap-rail/framework-shadcn 0.0.0-stage → 0.2.0

package/lib/types/settings-update-page.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The 软件更新 settings page: one live snapshot of the update channel plus
+ * its two configuration seats. The phase (and progress) arrive as full
+ * `update/status` snapshots, so the view is a pure projection — check /
+ * download / restart-to-install buttons map one-to-one onto the update
+ * domain's methods, and the feed URL / auto-check seats write
+ * `settings.json` keys (hot-applied, no restart).
+ *
+ * @module @snap-rail/framework-shadcn/settings-update-page
+ */
+// Wire rows for the update-domain methods and the settings keys this page calls.
+import '@snap-rail/app-boot/contract';
+import { UPDATE_AUTO_CHECK_KEY, UPDATE_FEED_URL_KEY, updateStatusSchema, } from '@snap-rail/app-boot/contract';
+import { rpcErrorText, subscribeFrame } from '@snap-rail/connection';
+import { Button, Input, Label, Progress, Switch, } from "./ui/index.js";
+import { settingsChangedSchema } from '@snap-rail/station-rpc/contract';
+import { useEffect, useState } from 'react';
+/** The phase's one-line copy; `error`/`unconfigured` carry their own message. */
+function phaseHint(status) {
+    switch (status.phase) {
+        case 'unsupported': return '当前为开发模式，无法检查更新。';
+        case 'unconfigured': return status.message ?? '未配置更新源。';
+        case 'idle': return '就绪，可手动检查更新。';
+        case 'checking': return '正在检查更新…';
+        case 'available': return '发现新版本，正在后台自动下载。';
+        case 'none': return '已是最新版本。';
+        case 'downloading': return `正在下载新版本… ${Math.round(status.percent ?? 0)}%`;
+        case 'ready': return '新版本已就绪，重启后自动完成安装。';
+        case 'error': return `更新失败：${status.message ?? '未知错误'}`;
+    }
+}
+/** The 软件更新 page. */
+export function UpdatePage({ ctx }) {
+    const [status, setStatus] = useState(undefined);
+    const [failed, setFailed] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [actionError, setActionError] = useState(undefined);
+    const [feedUrl, setFeedUrl] = useState('');
+    const [feedError, setFeedError] = useState(undefined);
+    const [autoCheck, setAutoCheck] = useState(true);
+    const link = ctx.get('client').link;
+    // Mount reads seed the snapshot and the two seats; the frames keep every
+    // surface converged afterwards (update/status on every transition,
+    // settings/changed when a seat changes — including our own writes).
+    useEffect(() => {
+        void link.call('update.state', {}).then(result => {
+            if (result.ok)
+                setStatus(result.value.status);
+            else
+                setFailed(true);
+        }).catch(() => setFailed(true));
+        void link.call('settings.get', { key: UPDATE_AUTO_CHECK_KEY }).then(result => {
+            if (result.ok && typeof result.value.value === 'boolean')
+                setAutoCheck(result.value.value);
+        }).catch(() => undefined);
+        void link.call('settings.get', { key: UPDATE_FEED_URL_KEY }).then(result => {
+            if (result.ok && typeof result.value.value === 'string')
+                setFeedUrl(result.value.value);
+        }).catch(() => undefined);
+        const offStatus = subscribeFrame(link, 'update/status', updateStatusSchema, next => setStatus(next));
+        const offSettings = subscribeFrame(link, 'settings/changed', settingsChangedSchema, change => {
+            if (change.key === UPDATE_FEED_URL_KEY)
+                setFeedUrl(typeof change.value === 'string' ? change.value : '');
+            if (change.key === UPDATE_AUTO_CHECK_KEY)
+                setAutoCheck(change.value !== false);
+        });
+        return () => {
+            offStatus();
+            offSettings();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ctx]);
+    /** Run a snapshot-returning update method; failures surface next to the buttons. */
+    const run = (method) => {
+        setBusy(true);
+        setActionError(undefined);
+        void link.call(method, {}).then(result => {
+            if (result.ok)
+                setStatus(result.value.status);
+            else
+                setActionError(rpcErrorText(result.error));
+            setBusy(false);
+        }).catch(() => setBusy(false));
+    };
+    const install = () => {
+        setBusy(true);
+        setActionError(undefined);
+        void link.call('update.install', {}).then(result => {
+            if (!result.ok) {
+                setActionError(rpcErrorText(result.error));
+                setBusy(false);
+            }
+            // On success the host quits into the installer; nothing left to render.
+        }).catch(() => setBusy(false));
+    };
+    const saveFeedUrl = () => {
+        const value = feedUrl.trim();
+        if (value !== '') {
+            try {
+                const parsed = new URL(value);
+                if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:')
+                    throw new Error('protocol');
+            }
+            catch {
+                setFeedError('请填写 http(s) 开头的更新源地址');
+                return;
+            }
+        }
+        setFeedError(undefined);
+        void link.call('settings.set', { key: UPDATE_FEED_URL_KEY, value });
+    };
+    if (failed)
+        return _jsx("div", { className: "text-sm text-muted-foreground", children: "\u66F4\u65B0\u72B6\u6001\u8BFB\u53D6\u5931\u8D25\u3002" });
+    if (status === undefined)
+        return _jsx("div", { className: "text-sm text-muted-foreground", children: "\u6B63\u5728\u8FDE\u63A5\u66F4\u65B0\u901A\u9053\u2026" });
+    const phase = status.phase;
+    const showCheck = phase === 'idle' || phase === 'none' || phase === 'error' || phase === 'available';
+    const percent = Math.min(100, Math.max(0, Math.round(status.percent ?? 0)));
+    return (_jsxs("div", { "data-region": "update-page", className: "flex max-w-xl flex-col gap-4", children: [_jsxs("div", { "data-update-status": phase, className: "flex flex-col gap-3 rounded-md border border-border px-4 py-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "\u5F53\u524D\u7248\u672C" }), _jsx("span", { className: "font-mono text-sm", children: status.currentVersion })] }), status.version !== undefined && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "\u65B0\u7248\u672C" }), _jsx("span", { className: "font-mono text-sm", children: status.version })] })), _jsx("p", { "data-update-hint": true, className: "text-sm text-muted-foreground", children: phaseHint(status) }), phase === 'downloading' && (_jsx(Progress, { "data-update-progress": percent, "aria-label": "\u4E0B\u8F7D\u8FDB\u5EA6", value: percent })), actionError !== undefined && _jsx("p", { "data-update-error": true, className: "text-sm text-destructive", children: actionError }), _jsxs("div", { className: "flex items-center gap-2", children: [showCheck && (_jsx(Button, { "data-update-check": true, disabled: busy, onClick: () => run('update.check'), children: phase === 'error' ? '重新检查' : '检查更新' })), phase === 'available' && (_jsx(Button, { "data-update-download": true, variant: "outline", disabled: busy, onClick: () => run('update.download'), children: "\u7ACB\u5373\u4E0B\u8F7D" })), phase === 'ready' && (_jsx(Button, { "data-update-install": true, disabled: busy, onClick: install, children: "\u91CD\u542F\u5E76\u5B89\u88C5" }))] })] }), _jsxs("div", { className: "flex flex-col gap-3 rounded-md border border-border px-4 py-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-sm", children: "\u542F\u52A8\u65F6\u81EA\u52A8\u68C0\u67E5\u66F4\u65B0" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "\u53D1\u73B0\u65B0\u7248\u672C\u540E\u81EA\u52A8\u540E\u53F0\u4E0B\u8F7D\uFF1B\u5B89\u88C5\u4ECD\u9700\u624B\u52A8\u786E\u8BA4\u91CD\u542F\u3002" })] }), _jsx(Switch, { "aria-label": "\u542F\u52A8\u65F6\u81EA\u52A8\u68C0\u67E5\u66F4\u65B0", checked: autoCheck, onCheckedChange: next => {
+                                    setAutoCheck(next);
+                                    void link.call('settings.set', { key: UPDATE_AUTO_CHECK_KEY, value: next });
+                                } })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "update-feed-url", children: "\u66F4\u65B0\u6E90\u5730\u5740" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: "update-feed-url", value: feedUrl, placeholder: "https://updates.example.com/snap-rail/", onChange: event => setFeedUrl(event.target.value) }), _jsx(Button, { variant: "outline", "data-update-save-feed": true, onClick: saveFeedUrl, children: "\u4FDD\u5B58" })] }), feedError !== undefined && _jsx("p", { className: "text-sm text-destructive", children: feedError }), _jsx("p", { className: "text-xs text-muted-foreground", children: "\u6307\u5411\u5B58\u653E\u5B89\u88C5\u5305\u4E0E latest.yml \u7684\u76EE\u5F55\uFF1B\u7559\u7A7A\u65F6\u4F7F\u7528\u5B89\u88C5\u5305\u5185\u7F6E\u914D\u7F6E\u3002\u4FDD\u5B58\u540E\u518D\u70B9\u300C\u68C0\u67E5\u66F4\u65B0\u300D\u7ACB\u5373\u751F\u6548\u3002" })] })] })] }));
+}

package/lib/types/slots.d.ts

@@ -0,0 +1,114 @@
+/**
+ * The UI panel seam: a small vocabulary of well-known slots that any client
+ * plugin can occupy, plus the `ctx.uiSlots` registry backing it. The
+ * vocabulary is deliberately closed for phase 1; `custom:*` ids are the
+ * reserved extension seat for community layouts.
+ *
+ * Degradation rule: every slot is optional. The layout owner decides what an
+ * empty slot renders (usually nothing); nothing throws on a missing occupant.
+ *
+ * Occupancy modes: `stack` slots render every occupant in order (menu items,
+ * actions); `single` slots render only the winner — the highest
+ * `precedence`, ties by latest registration — so a component plugin can
+ * replace a default tenant (a third-party titlebar over the suite's
+ * built-in one) and unloading it falls back to the default automatically:
+ * the default is never destroyed, only shadowed. The framework owns the mode
+ * table for its standard slots; `custom:*` slots are stack.
+ *
+ * @module @snap-rail/framework-shadcn/slots
+ */
+import { Context, type Plugin } from '@snap-rail/cordis';
+import type { ReactNode } from 'react';
+/** Stable semantic slot names shared by every layout implementation. */
+export declare const UI_SLOT_IDS: {
+    readonly layout: "shell.layout";
+    readonly titlebar: "shell.titlebar";
+    readonly titlebarActions: "shell.titlebar.actions";
+    readonly menu: "shell.menu";
+    readonly sidebar: "shell.sidebar";
+    readonly main: "shell.main";
+    readonly view: "shell.view";
+    readonly statusbar: "shell.statusbar";
+    readonly overlay: "shell.overlay";
+};
+/** Runtime set used by manifest/semantic validation as well as TypeScript. */
+export declare const STANDARD_UI_SLOT_IDS: ReadonlySet<string>;
+/** A custom slot is owned by a publisher and a local slot name. */
+export declare const CUSTOM_UI_SLOT_PATTERN: RegExp;
+/** Check the public slot naming contract at runtime. */
+export declare function isValidUiSlotId(value: string): value is SlotId;
+/** A layout may add a namespaced extension slot without changing the core vocabulary. */
+export type SlotId = typeof UI_SLOT_IDS[keyof typeof UI_SLOT_IDS] | `custom:${string}`;
+/** How a slot renders its occupants: all in order, or one elected winner. */
+export type UiSlotMode = 'stack' | 'single';
+/**
+ * The mode table for the standard slots — the framework owns it.
+ *
+ * `titlebar` and `main` are `single`: exactly one tenant renders (a skin or
+ * replacement displaces the default and falls back on unload). `layout`
+ * stays `stack` on purpose — the settings dialog is a permanent overlay
+ * occupant beside the active layout, and the fallback shell yields by
+ * counting; every other slot collects contributions.
+ */
+export declare const UI_SLOT_MODES: {
+    readonly "shell.layout": "stack";
+    readonly "shell.titlebar": "single";
+    readonly "shell.titlebar.actions": "stack";
+    readonly "shell.menu": "stack";
+    readonly "shell.sidebar": "stack";
+    readonly "shell.main": "single";
+    readonly "shell.view": "stack";
+    readonly "shell.statusbar": "stack";
+    readonly "shell.overlay": "stack";
+};
+/** The occupancy mode of a slot; `custom:*` slots are `stack`. */
+export declare function slotModeOf(slot: SlotId): UiSlotMode;
+/** What one occupant contributes to a slot. */
+export interface SlotOccupant {
+    /** Stable plugin-chosen key; later registrations with it replace earlier ones. */
+    id: string;
+    /** Rendering order within the slot; ties break by registration time. */
+    order: number;
+    /**
+     * Winner election for `single` slots: the highest value renders, and
+     * unloading it falls back to the next (a built-in default stays at 0, an
+     * override registers higher). Ignored in `stack` slots. Default 0.
+     */
+    precedence?: number;
+    render(): ReactNode;
+}
+/** Registry of slot occupants exposed as `ctx.uiSlots`. */
+export interface UiSlotsService {
+    /**
+     * Current occupants of a slot in render order. `single` slots answer with
+     * at most one occupant — the elected winner.
+     *
+     * @param slot - the slot to read.
+     */
+    list(slot: SlotId): readonly SlotOccupant[];
+    /** Occupy a slot; disposal removes the occupant.
+     * @param slot - target slot.
+     * @param occupant - the contribution; same-id re-registration replaces.
+     * @param caller - owning context; unload drops the occupant.
+     */
+    register(caller: Context, slot: SlotId, occupant: SlotOccupant): () => void;
+}
+declare module '@snap-rail/cordis' {
+    interface Context {
+        uiSlots: UiSlotsService;
+    }
+    interface Events {
+        /** A slot's occupants changed (any add, replace, or removal).
+         * @param slot - the affected slot id.
+         */
+        'ui/slot-changed'(slot: SlotId): void;
+    }
+}
+/** Mounts the `ctx.uiSlots` registry.
+ *
+ * The facade binds everything to construction-time closures: traceable
+ * context proxies rebind `this` on every method access, so `this`-reached
+ * state cannot back a service here (mirrors the field seam's external core).
+ */
+declare const slotsPlugin: Plugin.Object<void>;
+export default slotsPlugin;

package/lib/types/slots.js

@@ -0,0 +1,119 @@
+/**
+ * The UI panel seam: a small vocabulary of well-known slots that any client
+ * plugin can occupy, plus the `ctx.uiSlots` registry backing it. The
+ * vocabulary is deliberately closed for phase 1; `custom:*` ids are the
+ * reserved extension seat for community layouts.
+ *
+ * Degradation rule: every slot is optional. The layout owner decides what an
+ * empty slot renders (usually nothing); nothing throws on a missing occupant.
+ *
+ * Occupancy modes: `stack` slots render every occupant in order (menu items,
+ * actions); `single` slots render only the winner — the highest
+ * `precedence`, ties by latest registration — so a component plugin can
+ * replace a default tenant (a third-party titlebar over the suite's
+ * built-in one) and unloading it falls back to the default automatically:
+ * the default is never destroyed, only shadowed. The framework owns the mode
+ * table for its standard slots; `custom:*` slots are stack.
+ *
+ * @module @snap-rail/framework-shadcn/slots
+ */
+import { Context } from '@snap-rail/cordis';
+/** Stable semantic slot names shared by every layout implementation. */
+export const UI_SLOT_IDS = {
+    layout: 'shell.layout',
+    titlebar: 'shell.titlebar',
+    titlebarActions: 'shell.titlebar.actions',
+    menu: 'shell.menu',
+    sidebar: 'shell.sidebar',
+    main: 'shell.main',
+    view: 'shell.view',
+    statusbar: 'shell.statusbar',
+    overlay: 'shell.overlay',
+};
+/** Runtime set used by manifest/semantic validation as well as TypeScript. */
+export const STANDARD_UI_SLOT_IDS = new Set(Object.values(UI_SLOT_IDS));
+/** A custom slot is owned by a publisher and a local slot name. */
+export const CUSTOM_UI_SLOT_PATTERN = /^custom:[a-z0-9][a-z0-9-]*\.[a-z0-9][a-z0-9-]*$/;
+/** Check the public slot naming contract at runtime. */
+export function isValidUiSlotId(value) {
+    return STANDARD_UI_SLOT_IDS.has(value) || CUSTOM_UI_SLOT_PATTERN.test(value);
+}
+/**
+ * The mode table for the standard slots — the framework owns it.
+ *
+ * `titlebar` and `main` are `single`: exactly one tenant renders (a skin or
+ * replacement displaces the default and falls back on unload). `layout`
+ * stays `stack` on purpose — the settings dialog is a permanent overlay
+ * occupant beside the active layout, and the fallback shell yields by
+ * counting; every other slot collects contributions.
+ */
+export const UI_SLOT_MODES = {
+    [UI_SLOT_IDS.layout]: 'stack',
+    [UI_SLOT_IDS.titlebar]: 'single',
+    [UI_SLOT_IDS.titlebarActions]: 'stack',
+    [UI_SLOT_IDS.menu]: 'stack',
+    [UI_SLOT_IDS.sidebar]: 'stack',
+    [UI_SLOT_IDS.main]: 'single',
+    [UI_SLOT_IDS.view]: 'stack',
+    [UI_SLOT_IDS.statusbar]: 'stack',
+    [UI_SLOT_IDS.overlay]: 'stack',
+};
+const STANDARD_SLOT_MODES = new Map(Object.entries(UI_SLOT_MODES));
+/** The occupancy mode of a slot; `custom:*` slots are `stack`. */
+export function slotModeOf(slot) {
+    return STANDARD_SLOT_MODES.get(slot) ?? 'stack';
+}
+/** Mounts the `ctx.uiSlots` registry.
+ *
+ * The facade binds everything to construction-time closures: traceable
+ * context proxies rebind `this` on every method access, so `this`-reached
+ * state cannot back a service here (mirrors the field seam's external core).
+ */
+const slotsPlugin = {
+    name: 'framework slots',
+    apply(ctx) {
+        const slots = new Map();
+        const entryOf = (slot) => {
+            let entry = slots.get(slot);
+            if (entry === undefined) {
+                entry = { occupants: new Map(), nextSeq: 0 };
+                slots.set(slot, entry);
+            }
+            return entry;
+        };
+        ctx.provide('uiSlots', {
+            list(slot) {
+                const entry = entryOf(slot);
+                const ranked = [...entry.occupants.values()]
+                    .sort((a, b) => a.occupant.order - b.occupant.order || a.seq - b.seq);
+                if (slotModeOf(slot) === 'single' && ranked.length > 0) {
+                    // Winner election: precedence first, latest registration breaks
+                    // ties. Losers stay registered — dropping the winner falls back.
+                    const winner = ranked.reduce((best, item) => {
+                        const byPrecedence = (item.occupant.precedence ?? 0) - (best.occupant.precedence ?? 0);
+                        return byPrecedence > 0 || (byPrecedence === 0 && item.seq > best.seq) ? item : best;
+                    });
+                    return [winner.occupant];
+                }
+                return ranked.map(item => item.occupant);
+            },
+            register(caller, slot, occupant) {
+                const entry = entryOf(slot);
+                entry.occupants.set(occupant.id, { occupant, seq: entry.nextSeq++ });
+                ctx.emit('ui/slot-changed', slot);
+                const remove = () => {
+                    // Disposal is by occupant id: an earlier handle still removes the
+                    // seat after a same-id replacement (fiber unload drops the current
+                    // occupant), and repeat calls are no-ops.
+                    if (entry.occupants.delete(occupant.id))
+                        ctx.emit('ui/slot-changed', slot);
+                };
+                // Effects take a body producing the disposer; passing `remove`
+                // itself would run it as setup.
+                caller.effect(() => remove);
+                return remove;
+            },
+        });
+    },
+};
+export default slotsPlugin;

package/lib/types/ui/badge.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Badge: small status/label chip. `success` carries the online/live state,
+ * `warning` the attention state (e.g. partial failure, float type),
+ * `destructive` the offline/abnormal one.
+ *
+ * @module @snap-rail/framework-shadcn/ui/badge
+ */
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Props of {@link Badge}. */
+export type BadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVariants>;
+/** A themed status chip. */
+export declare function Badge({ className, variant, ...props }: BadgeProps): import("react").JSX.Element;
+export {};

package/lib/types/ui/badge.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Badge: small status/label chip. `success` carries the online/live state,
+ * `warning` the attention state (e.g. partial failure, float type),
+ * `destructive` the offline/abnormal one.
+ *
+ * @module @snap-rail/framework-shadcn/ui/badge
+ */
+import { cva } from 'class-variance-authority';
+import { cn } from "./utils.js";
+const badgeVariants = cva('inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-sm font-medium whitespace-nowrap', {
+    variants: {
+        variant: {
+            default: 'border-transparent bg-primary text-primary-foreground',
+            secondary: 'border-transparent bg-secondary text-secondary-foreground',
+            success: 'border-transparent bg-success/15 text-success',
+            warning: 'border-transparent bg-warning/15 text-warning',
+            destructive: 'border-transparent bg-destructive/15 text-destructive',
+            outline: 'text-muted-foreground',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+/** A themed status chip. */
+export function Badge({ className, variant, ...props }) {
+    return _jsx("span", { className: cn(badgeVariants({ variant }), className), ...props });
+}

package/lib/types/ui/button.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Button: cva variants over a native button. Ghost/outline cover chrome
+ * surfaces (titlebar, panel toggles); `icon` size squares the padding for
+ * glyph-only controls.
+ *
+ * @module @snap-rail/framework-shadcn/ui/button
+ */
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "xl" | "lg" | "sm" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Props of {@link Button}. */
+export type ButtonProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+};
+/** A themed button; `asChild` renders the child element instead. */
+export declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): import("react").JSX.Element;
+export {};

package/lib/types/ui/button.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Button: cva variants over a native button. Ghost/outline cover chrome
+ * surfaces (titlebar, panel toggles); `icon` size squares the padding for
+ * glyph-only controls.
+ *
+ * @module @snap-rail/framework-shadcn/ui/button
+ */
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from "./utils.js";
+const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+            destructive: 'bg-destructive/90 text-destructive-foreground hover:bg-destructive',
+            outline: 'border border-border bg-transparent hover:bg-accent hover:text-accent-foreground',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            xl: 'h-16 px-8 text-lg',
+            lg: 'h-14 px-6 text-lg',
+            default: 'h-12 px-5 py-1.5',
+            sm: 'h-10 px-4 text-sm',
+            icon: 'h-12 w-12',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+/** A themed button; `asChild` renders the child element instead. */
+export function Button({ className, variant, size, asChild = false, ...props }) {
+    const Component = asChild ? Slot : 'button';
+    return _jsx(Component, { className: cn(buttonVariants({ variant, size }), className), ...props });
+}

package/lib/types/ui/card.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Card: the panel container family (card, header, title, content).
+ *
+ * @module @snap-rail/framework-shadcn/ui/card
+ */
+import type { ComponentProps } from 'react';
+/** The container surface. */
+export declare function Card({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** Top padding/heading zone of a card. */
+export declare function CardHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** Card heading line. */
+export declare function CardTitle({ className, ...props }: ComponentProps<'h3'>): import("react").JSX.Element;
+/** Body zone of a card. */
+export declare function CardContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;

package/lib/types/ui/card.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./utils.js";
+/** The container surface. */
+export function Card({ className, ...props }) {
+    return _jsx("div", { className: cn('rounded-lg border border-border bg-card text-card-foreground', className), ...props });
+}
+/** Top padding/heading zone of a card. */
+export function CardHeader({ className, ...props }) {
+    return _jsx("div", { className: cn('flex flex-col gap-1 p-5', className), ...props });
+}
+/** Card heading line. */
+export function CardTitle({ className, ...props }) {
+    return _jsx("h3", { className: cn('text-sm font-medium text-muted-foreground', className), ...props });
+}
+/** Body zone of a card. */
+export function CardContent({ className, ...props }) {
+    return _jsx("div", { className: cn('p-5 pt-0', className), ...props });
+}

package/lib/types/ui/checkbox.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Checkbox: themed check entry over Radix Checkbox; the indicator is an
+ * inline stroke so the UI seam needs no icon dependency.
+ *
+ * @module @snap-rail/framework-shadcn/ui/checkbox
+ */
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import type { ComponentProps } from 'react';
+/** A themed checkbox. */
+export declare function Checkbox({ className, ...props }: ComponentProps<typeof CheckboxPrimitive.Root>): import("react").JSX.Element;

package/lib/types/ui/checkbox.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Checkbox: themed check entry over Radix Checkbox; the indicator is an
+ * inline stroke so the UI seam needs no icon dependency.
+ *
+ * @module @snap-rail/framework-shadcn/ui/checkbox
+ */
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cn } from "./utils.js";
+/** A themed checkbox. */
+export function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { className: cn('h-6 w-6 shrink-0 rounded-sm border border-input bg-transparent', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'data-[state=checked]:border-primary data-[state=checked]:bg-primary', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-primary-foreground", children: _jsx("svg", { viewBox: "0 0 12 12", className: "h-4 w-4", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M2 6.5 4.8 9 10 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }));
+}

package/lib/types/ui/collapsible.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Collapsible: the shadcn collapsible over Radix Collapsible — an
+ * independently controlled show/hide section. The root carries the card
+ * surface. A section may carry several triggers (title zone, chevron zone);
+ * each renders the shared {@link CollapsibleChevron} where it wants the
+ * rotating arrow. Icons are inline strokes so the UI seam needs no icon
+ * dependency.
+ *
+ * @module @snap-rail/framework-shadcn/ui/collapsible
+ */
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import type { ComponentProps, ReactNode } from 'react';
+/** Controlled/uncontrolled root; renders the bordered card surface. */
+export declare function Collapsible({ className, ...props }: ComponentProps<typeof CollapsiblePrimitive.Root>): import("react").JSX.Element;
+/** The header button. The `group` class lets a nested chevron sense the
+ * open state (see {@link CollapsibleChevron}). */
+export declare function CollapsibleTrigger({ className, ...props }: ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react").JSX.Element;
+/** The rotating disclosure arrow; renders inside a trigger and turns with
+ * that trigger's open state. */
+export declare function CollapsibleChevron({ className }: {
+    className?: string;
+}): ReactNode;
+/** The body; mounted only while open. */
+export declare function CollapsibleContent({ className, ...props }: ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react").JSX.Element;

package/lib/types/ui/collapsible.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Collapsible: the shadcn collapsible over Radix Collapsible — an
+ * independently controlled show/hide section. The root carries the card
+ * surface. A section may carry several triggers (title zone, chevron zone);
+ * each renders the shared {@link CollapsibleChevron} where it wants the
+ * rotating arrow. Icons are inline strokes so the UI seam needs no icon
+ * dependency.
+ *
+ * @module @snap-rail/framework-shadcn/ui/collapsible
+ */
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { cn } from "./utils.js";
+/** Controlled/uncontrolled root; renders the bordered card surface. */
+export function Collapsible({ className, ...props }) {
+    return (_jsx(CollapsiblePrimitive.Root, { className: cn('rounded-md border border-border bg-card', className), ...props }));
+}
+/** The header button. The `group` class lets a nested chevron sense the
+ * open state (see {@link CollapsibleChevron}). */
+export function CollapsibleTrigger({ className, ...props }) {
+    return (_jsx(CollapsiblePrimitive.CollapsibleTrigger, { className: cn('group flex w-full items-center gap-2 text-sm font-medium', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', className), ...props }));
+}
+/** The rotating disclosure arrow; renders inside a trigger and turns with
+ * that trigger's open state. */
+export function CollapsibleChevron({ className }) {
+    return (_jsx("svg", { viewBox: "0 0 12 12", className: cn('h-4 w-4 shrink-0 opacity-60 transition-transform duration-200 group-data-[state=open]:rotate-180', className), fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m2.5 4.5 3.5 3.5 3.5-3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/** The body; mounted only while open. */
+export function CollapsibleContent({ className, ...props }) {
+    return (_jsx(CollapsiblePrimitive.CollapsibleContent, { className: cn('overflow-hidden', className), ...props }));
+}

package/lib/types/ui/dialog.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Dialog: modal overlay + panel over Radix Dialog. Chrome surfaces use it
+ * for confirmations (window close, technician id entry); content pages use
+ * it for small forms. No built-in close affordance — callers render their
+ * own buttons in the footer.
+ *
+ * @module @snap-rail/framework-shadcn/ui/dialog
+ */
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import type { ComponentProps } from 'react';
+/** Controlled/uncontrolled root; re-exported so callers need one import. */
+export declare const Dialog: import("react").FC<DialogPrimitive.DialogProps>;
+/** The overlay + centered panel; mounts through a portal into body. */
+export declare function DialogContent({ className, children, ...props }: ComponentProps<typeof DialogPrimitive.Content>): import("react").JSX.Element;
+/** Title bar block inside a dialog. */
+export declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** The dialog's accessible title. */
+export declare const DialogTitle: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+/** Optional supporting line under the title. */
+export declare const DialogDescription: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+/** Action row (buttons) at the bottom; defaults to right-aligned. */
+export declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;

package/lib/types/ui/dialog.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Dialog: modal overlay + panel over Radix Dialog. Chrome surfaces use it
+ * for confirmations (window close, technician id entry); content pages use
+ * it for small forms. No built-in close affordance — callers render their
+ * own buttons in the footer.
+ *
+ * @module @snap-rail/framework-shadcn/ui/dialog
+ */
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cn } from "./utils.js";
+/** Controlled/uncontrolled root; re-exported so callers need one import. */
+export const Dialog = DialogPrimitive.Root;
+/** The overlay + centered panel; mounts through a portal into body. */
+export function DialogContent({ className, children, ...props }) {
+    return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: "overlay-in fixed inset-0 z-50 bg-background/80 backdrop-blur-[1px]" }), _jsx(DialogPrimitive.Content, { className: cn('dialog-in fixed left-1/2 top-1/2 z-50 w-[calc(100%-2.5rem)] max-w-md -translate-x-1/2 -translate-y-1/2', 'rounded-lg border border-border bg-card text-card-foreground shadow-xl', 'p-5 focus:outline-none', className), ...props, children: children })] }));
+}
+/** Title bar block inside a dialog. */
+export function DialogHeader({ className, ...props }) {
+    return _jsx("div", { className: cn('mb-4 space-y-1', className), ...props });
+}
+/** The dialog's accessible title. */
+export const DialogTitle = DialogPrimitive.Title;
+/** Optional supporting line under the title. */
+export const DialogDescription = DialogPrimitive.Description;
+/** Action row (buttons) at the bottom; defaults to right-aligned. */
+export function DialogFooter({ className, ...props }) {
+    return _jsx("div", { className: cn('mt-5 flex justify-end gap-3', className), ...props });
+}