@svadmin/ui 0.70.0 → 0.73.0

package/dist/components/svar-grid-panes.d.ts

@@ -0,0 +1,34 @@
+import type { Component } from 'svelte';
+import type { SvarInteractiveApi, SvarInteractiveEngineProps } from './svar-grid-interactions.js';
+export interface SvarManagedApi extends SvarInteractiveApi {
+    exec(action: string, params?: Record<string, unknown>): Promise<unknown>;
+    getState(): {
+        selectedRows?: unknown;
+        scrollTop?: number;
+        flatData?: Record<string, unknown>[];
+        focusCell?: {
+            row?: string | number;
+            column?: string | number;
+        };
+    };
+}
+export interface SvarManagedEngineProps extends Omit<SvarInteractiveEngineProps, 'init' | 'columns'> {
+    columns: (SvarInteractiveEngineProps['columns'][number] & {
+        hidden?: boolean;
+        cell?: Component<{
+            row: unknown;
+            column: unknown;
+        }>;
+    })[];
+    dynamic?: {
+        rowCount?: number;
+    };
+    init?: (api: SvarManagedApi) => void;
+}
+/** 两个公开 Grid 实例组成固定右侧面板，不读取或改写上游 Community 功能开关。 */
+export declare function createSvarPanePair(current: () => boolean): {
+    attach: (side: 0 | 1, api: SvarManagedApi) => void;
+    focus: (side: 0 | 1, row: string | number, column: string) => void;
+    get: (side: 0 | 1) => SvarManagedApi | undefined;
+    dispose(): void;
+};

package/dist/components/svar-grid-panes.js

@@ -0,0 +1,66 @@
+function own(event, key) {
+    return event && typeof event === 'object' ? Object.getOwnPropertyDescriptor(event, key)?.value : undefined;
+}
+function mirroredEvent(action, event) {
+    if (action === 'scroll-to') {
+        const top = own(event, 'top');
+        return typeof top === 'number' && Number.isFinite(top) && top >= 0 ? { top } : undefined;
+    }
+    if (action === 'open-row' || action === 'close-row') {
+        const id = own(event, 'id');
+        return typeof id === 'string' ? { id, nested: own(event, 'nested') === true } : undefined;
+    }
+    const key = own(event, 'key');
+    if (typeof key !== 'string')
+        return undefined;
+    if (action === 'sort-rows') {
+        // 上游首次排序可能省略 order，其公开语义为升序。
+        const order = own(event, 'order') ?? 'asc';
+        if (order !== 'asc' && order !== 'desc')
+            return undefined;
+        return { key, order, add: own(event, 'add') === true };
+    }
+    const value = own(event, 'value');
+    return typeof value === 'string' || value == null ? { key, value: value ?? '' } : undefined;
+}
+/** 两个公开 Grid 实例组成固定右侧面板，不读取或改写上游 Community 功能开关。 */
+export function createSvarPanePair(current) {
+    const panes = new Map();
+    let disposed = false;
+    let synchronizing = 0;
+    function attach(side, api) {
+        panes.set(side, api);
+        for (const action of ['scroll-to', 'sort-rows', 'filter-rows', 'open-row', 'close-row']) {
+            api.on(action, event => {
+                const peer = panes.get(side === 0 ? 1 : 0);
+                if (disposed || synchronizing || panes.get(side) !== api || !peer || !current())
+                    return;
+                const next = mirroredEvent(action, event);
+                if (!next)
+                    return;
+                if (action === 'scroll-to' && peer.getState().scrollTop === next['top'])
+                    return;
+                synchronizing++;
+                try {
+                    void Promise.resolve(peer.exec(action, next)).catch(() => { }).finally(() => { synchronizing--; });
+                }
+                catch {
+                    synchronizing--;
+                }
+            });
+        }
+        if (side === 1) {
+            const top = panes.get(0)?.getState().scrollTop;
+            if (typeof top === 'number' && top > 0)
+                void api.exec('scroll-to', { top }).catch(() => { });
+        }
+    }
+    function focus(side, row, column) {
+        if (disposed || !current())
+            return;
+        const api = panes.get(side);
+        if (api)
+            void api.exec('focus-cell', { row, column, eventSource: 'svadmin-pinned-navigation' }).catch(() => { });
+    }
+    return { attach, focus, get: (side) => panes.get(side), dispose() { disposed = true; panes.clear(); } };
+}

package/dist/components/svar-grid-resource-loading.d.ts

@@ -0,0 +1,18 @@
+import { type SvarRange, type SvarWindowPage } from './svar-grid-loading.js';
+export interface SvarLazyTree {
+    /** Resource field containing the parent record ID. */
+    readonly parentField: string;
+    readonly rootValue?: string | number | null;
+    readonly hasChildrenKey?: string;
+    /** A branch is rejected rather than silently truncated above this bound. Default: 10,000. */
+    readonly maxChildren?: number;
+}
+export type SvarResourcePageReader = (pagination: {
+    current: number;
+    pageSize: number;
+}) => Promise<SvarWindowPage>;
+/** Translate a zero-based exclusive grid window to the existing one-based Provider pagination. */
+export declare function loadSvarResourceWindow(range: SvarRange, pageSize: number, read: SvarResourcePageReader, signal: AbortSignal, primaryKey?: string): Promise<SvarWindowPage>;
+/** Load all children in bounded pages. Partial branches must never masquerade as complete trees. */
+export declare function loadSvarResourceChildren(pageSize: number, maxChildren: number, read: SvarResourcePageReader, signal: AbortSignal, primaryKey?: string, childrenKey?: string): Promise<readonly Record<string, unknown>[]>;
+export declare function appendSvarResourcePage(rows: readonly Record<string, unknown>[], page: SvarWindowPage, expectedTotal: number, primaryKey?: string): readonly Record<string, unknown>[];

package/dist/components/svar-grid-resource-loading.js

@@ -0,0 +1,68 @@
+import { snapshotSvarRecords, snapshotSvarWindow, SvarLoadCancelled } from './svar-grid-loading.js';
+function checkSignal(signal) {
+    if (signal.aborted)
+        throw new SvarLoadCancelled();
+}
+function checkPageSize(pageSize) {
+    if (!Number.isSafeInteger(pageSize) || pageSize < 1 || pageSize > 1000)
+        throw new Error('Invalid resource page size');
+}
+function checkPage(page, start, size, primaryKey) {
+    return snapshotSvarWindow(page, { start, end: start + size }, primaryKey);
+}
+/** Translate a zero-based exclusive grid window to the existing one-based Provider pagination. */
+export async function loadSvarResourceWindow(range, pageSize, read, signal, primaryKey = 'id') {
+    checkPageSize(pageSize);
+    checkSignal(signal);
+    if (!Number.isSafeInteger(range.start) || !Number.isSafeInteger(range.end) || range.start < 0
+        || range.end < range.start || range.end > 10_000_000 || range.end - range.start > 2048)
+        throw new Error('Invalid resource window');
+    const first = Math.floor(range.start / pageSize);
+    const last = Math.max(first, Math.ceil(range.end / pageSize) - 1);
+    let total;
+    const rows = [];
+    for (let pageIndex = first; pageIndex <= last; pageIndex++) {
+        checkSignal(signal);
+        const page = checkPage(await read({ current: pageIndex + 1, pageSize }), pageIndex * pageSize, pageSize, primaryKey);
+        checkSignal(signal);
+        if (total !== undefined && total !== page.total)
+            throw new Error('Resource changed during window loading; refresh');
+        total = page.total;
+        rows.push(...page.data);
+        if ((pageIndex + 1) * pageSize >= total)
+            break;
+    }
+    const data = rows.slice(range.start - first * pageSize, range.end - first * pageSize);
+    return snapshotSvarWindow({ data, total: total ?? 0 }, range, primaryKey);
+}
+/** Load all children in bounded pages. Partial branches must never masquerade as complete trees. */
+export async function loadSvarResourceChildren(pageSize, maxChildren, read, signal, primaryKey = 'id', childrenKey = 'children') {
+    checkPageSize(pageSize);
+    checkSignal(signal);
+    if (!Number.isSafeInteger(maxChildren) || maxChildren < 1 || maxChildren > 100_000)
+        throw new Error('Invalid child limit');
+    let total;
+    const rows = [];
+    for (let pageIndex = 0;; pageIndex++) {
+        checkSignal(signal);
+        const page = checkPage(await read({ current: pageIndex + 1, pageSize }), pageIndex * pageSize, pageSize, primaryKey);
+        checkSignal(signal);
+        if (page.total > maxChildren)
+            throw new Error('Branch exceeds the configured child limit');
+        if (total !== undefined && total !== page.total)
+            throw new Error('Branch changed during loading; retry');
+        total = page.total;
+        rows.push(...page.data);
+        if (rows.length >= total)
+            return snapshotSvarRecords(rows, primaryKey, childrenKey);
+    }
+}
+export function appendSvarResourcePage(rows, page, expectedTotal, primaryKey = 'id') {
+    if (!Number.isSafeInteger(expectedTotal) || expectedTotal < 0 || expectedTotal > 10_000_000)
+        throw new Error('Invalid expected total');
+    if (page.total !== expectedTotal)
+        throw new Error('Resource changed during infinite loading; refresh');
+    if (rows.length + page.data.length > expectedTotal || (!page.data.length && rows.length < expectedTotal))
+        throw new Error('Invalid next resource page');
+    return snapshotSvarRecords([...rows, ...page.data], primaryKey);
+}

package/dist/components/svar-grid-resource-session.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteMap } from 'svelte/reactivity';
+import type { Filter, Sort } from '@svadmin/core';
+import type { SvarResourceReadRequest } from './SvarResourceRead.svelte';
+import { type SvarWindowPage } from './svar-grid-loading.js';
+import type { SvarRecordId } from './svar-grid-operations.js';
+/** Query workers remain descendants of the host AdminContext and QueryClientProvider. */
+export declare function createSvarResourceReads<Scope extends object>(options: {
+    scope: () => Scope;
+    current: (scope: Scope) => boolean;
+    authorize: (scope: Scope, parentId?: SvarRecordId) => Promise<boolean>;
+    resourceName: () => string;
+    dataScopeKey: () => string | number;
+    primaryKey: () => string;
+    childrenKey: () => string | undefined;
+}): {
+    requests: SvelteMap<number, SvarResourceReadRequest>;
+    read: (input: {
+        scope: Scope;
+        signal: AbortSignal;
+        pagination: {
+            current: number;
+            pageSize: number;
+        };
+        filters: Filter[];
+        sorters: Sort[];
+        parentId?: SvarRecordId;
+    }) => Promise<SvarWindowPage>;
+    cancelAll: () => void;
+};

package/dist/components/svar-grid-resource-session.svelte.js

@@ -0,0 +1,61 @@
+import { onDestroy, untrack } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+import { SvarLoadCancelled } from './svar-grid-loading.js';
+/** Query workers remain descendants of the host AdminContext and QueryClientProvider. */
+export function createSvarResourceReads(options) {
+    const requests = new SvelteMap();
+    const pending = new Map();
+    let sequence = 0;
+    let alive = true;
+    function cancelAll() { for (const entry of [...pending.values()])
+        entry.cancel(); }
+    onDestroy(() => { alive = false; cancelAll(); });
+    $effect.pre(() => {
+        const scope = options.scope();
+        const available = options.current(scope);
+        untrack(() => {
+            for (const entry of [...pending.values()])
+                if (!available || entry.scope !== scope)
+                    entry.cancel();
+        });
+    });
+    async function read(input) {
+        const { scope, signal } = input;
+        const current = () => alive && !signal.aborted && options.current(scope);
+        if (!current())
+            throw new SvarLoadCancelled();
+        if (!await options.authorize(scope, input.parentId))
+            throw new Error('Resource read access denied');
+        if (!current())
+            throw new SvarLoadCancelled();
+        return new Promise((resolve, reject) => {
+            const id = ++sequence;
+            let settled = false;
+            const finish = (callback) => {
+                if (settled)
+                    return;
+                settled = true;
+                signal.removeEventListener('abort', abort);
+                pending.delete(id);
+                requests.delete(id);
+                callback();
+            };
+            const abort = () => finish(() => reject(new SvarLoadCancelled()));
+            pending.set(id, { scope, cancel: abort });
+            signal.addEventListener('abort', abort, { once: true });
+            if (!current()) {
+                abort();
+                return;
+            }
+            const childrenKey = options.childrenKey();
+            requests.set(id, {
+                resourceName: options.resourceName(), dataScopeKey: options.dataScopeKey(), primaryKey: options.primaryKey(),
+                ...(childrenKey === undefined ? {} : { childrenKey }),
+                pagination: { ...input.pagination }, filters: input.filters, sorters: input.sorters,
+                resolve(page) { finish(() => current() ? resolve(page) : reject(new SvarLoadCancelled())); },
+                reject(error) { finish(() => reject(current() ? error : new SvarLoadCancelled())); },
+            });
+        });
+    }
+    return { requests, read, cancelAll };
+}

package/dist/components/table-contract.d.ts

@@ -0,0 +1,13 @@
+import type { BaseRecord } from '@svadmin/core';
+export type TableRecord = BaseRecord & {
+    id: string | number;
+};
+/** The list hook validates business fields; this adapter proves table identity and detaches UI reads. */
+export declare function copyTableRecord(value: unknown): TableRecord;
+export declare function tableRowKey(id: string | number): string;
+export declare function checkedTableRows(rows: readonly unknown[]): TableRecord[];
+/** Keep distinct display columns and neutralize spreadsheet expressions at this export boundary. */
+export declare function tableExportRows(rows: readonly TableRecord[], fields: readonly {
+    key: string;
+    label: string;
+}[]): Record<string, unknown>[];

package/dist/components/table-contract.js

@@ -0,0 +1,42 @@
+import { Type } from '@sinclair/typebox';
+import { checkExact, decodeBaseRecord, snapshotPlainData, rejectProviderResponse } from '@svadmin/core/schema';
+const recordShape = Type.Intersect([
+    Type.Record(Type.String(), Type.Unknown()),
+    Type.Object({ id: Type.Union([Type.String(), Type.Number()]) }),
+]);
+/** The list hook validates business fields; this adapter proves table identity and detaches UI reads. */
+export function copyTableRecord(value) {
+    const record = decodeBaseRecord(snapshotPlainData(value));
+    if (!checkExact(recordShape, record))
+        return rejectProviderResponse();
+    return record;
+}
+export function tableRowKey(id) {
+    return JSON.stringify([typeof id, id]);
+}
+export function checkedTableRows(rows) {
+    const records = rows.map(copyTableRecord);
+    const keys = new Set(records.map(record => tableRowKey(record.id)));
+    if (keys.size !== records.length)
+        return rejectProviderResponse();
+    return records;
+}
+/** Keep distinct display columns and neutralize spreadsheet expressions at this export boundary. */
+export function tableExportRows(rows, fields) {
+    const protect = (value) => typeof value === 'string' && (/^[\t\r\n]/.test(value) || /^\s*[=+@-]/.test(value))
+        ? `'${value}` : value;
+    const used = new Set();
+    const columns = fields.map(field => {
+        const base = String(protect(field.label));
+        let label = base;
+        let suffix = 1;
+        while (used.has(label))
+            label = `${base} (${suffix++})`;
+        used.add(label);
+        return { key: field.key, label };
+    });
+    return rows.map(row => {
+        const record = copyTableRecord(row);
+        return Object.fromEntries(columns.map(column => [column.label, protect(record[column.key] ?? null)]));
+    });
+}

package/dist/components/task-utils.js

@@ -20,8 +20,10 @@ const STATUS_ALIASES = {
     aborted: 'cancelled',
 };
 export function normalizeTaskStatus(status) {
-    const value = String(status ?? '').trim().toLowerCase();
-    return STATUS_ALIASES[value] ?? 'unknown';
+    if (typeof status !== 'string')
+        return 'unknown';
+    const value = status.trim().toLowerCase();
+    return Object.hasOwn(STATUS_ALIASES, value) ? STATUS_ALIASES[value] ?? 'unknown' : 'unknown';
 }
 export function isTaskActive(task) {
     const lifecycle = normalizeTaskStatus(task.status);

package/dist/components/ui/alert/alert-variants.d.ts

@@ -1,7 +1,6 @@
 export type AlertVariant = "default" | "destructive" | "warning" | "success";
 export declare const alertVariants: ({ variant, class: className, className: extraClassName, }?: {
     variant?: AlertVariant | null;
-    class?: Parameters<typeof clsx>[number];
-    className?: Parameters<typeof clsx>[number];
+    class?: string;
+    className?: string;
 }) => string;
-import { clsx } from "cn/engine";

package/dist/components/ui/alert/alert-variants.js

@@ -1,2 +1 @@
-export const alertVariants = ({ variant = "default", class: className = "", className: extraClassName = "", } = {}) => clsx("svadmin-alert", variant && `svadmin-alert--${variant}`, className, extraClassName);
-import { clsx } from "cn/engine";
+export const alertVariants = ({ variant = "default", class: className = "", className: extraClassName = "", } = {}) => ["svadmin-alert", variant && `svadmin-alert--${variant}`, className, extraClassName].filter(Boolean).join(" ");

package/dist/components/ui/alert/alert.svelte

@@ -1,15 +1,14 @@
 <script lang="ts" module>
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { alertVariants as variants, type AlertVariant as Variant } from "./alert-variants.js";
+	import { alertVariants as resolveAlertVariants, type AlertVariant as AlertVariantValue } from "./alert-variants.js";
 
-	export const alertVariants = variants;
-	export type AlertVariant = Variant;
+	export { alertVariants, type AlertVariant } from "./alert-variants.js";
 </script>
 
 <script lang="ts">
 	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		variant?: AlertVariant;
+		variant?: AlertVariantValue;
 	};
 
 	let {
@@ -26,7 +25,7 @@
 	data-slot="alert"
 	role="alert"
 	data-variant={variant}
-	class={cn(alertVariants({ variant }), className)}
+	class={cn(resolveAlertVariants({ variant }), className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/alert/alert.svelte.d.ts

@@ -1,14 +1,9 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-import { type AlertVariant as Variant } from "./alert-variants.js";
-export declare const alertVariants: ({ variant, class: className, className: extraClassName, }?: {
-    variant?: Variant | null;
-    class?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-    className?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-}) => string;
-export type AlertVariant = Variant;
+import { type AlertVariant as AlertVariantValue } from "./alert-variants.js";
+export { alertVariants, type AlertVariant } from "./alert-variants.js";
 type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-    variant?: AlertVariant;
+    variant?: AlertVariantValue;
 };
 declare const Alert: import("svelte").Component<Props, {}, "ref">;
 type Alert = ReturnType<typeof Alert>;

package/dist/components/ui/alert/index.js

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 import Alert, { alertVariants } from "./alert.svelte";
 import AlertTitle from "./alert-title.svelte";
 import AlertDescription from "./alert-description.svelte";

package/dist/components/ui/avatar/avatar-variants.d.ts

@@ -1,7 +1,6 @@
 export type AvatarSize = "default" | "sm" | "lg" | "xl";
 export declare const avatarVariants: ({ size, class: className, className: extraClassName, }?: {
     size?: AvatarSize | null;
-    class?: Parameters<typeof clsx>[number];
-    className?: Parameters<typeof clsx>[number];
+    class?: string;
+    className?: string;
 }) => string;
-import { clsx } from "cn/engine";

package/dist/components/ui/avatar/avatar-variants.js

@@ -1,2 +1 @@
-export const avatarVariants = ({ size = "default", class: className = "", className: extraClassName = "", } = {}) => clsx("svadmin-avatar", size && `svadmin-avatar-size--${size}`, className, extraClassName);
-import { clsx } from "cn/engine";
+export const avatarVariants = ({ size = "default", class: className = "", className: extraClassName = "", } = {}) => ["svadmin-avatar", size && `svadmin-avatar-size--${size}`, className, extraClassName].filter(Boolean).join(" ");

package/dist/components/ui/avatar/avatar.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" module>
-	import { avatarVariants as variants, type AvatarSize as Size } from "./avatar-variants.js";
+	import { avatarVariants as resolveAvatarVariants, type AvatarSize as AvatarSizeValue } from "./avatar-variants.js";
 
-	export const avatarVariants = variants;
-	export type AvatarSize = Size;
+	export { avatarVariants, type AvatarSize } from "./avatar-variants.js";
 </script>
 
 <script lang="ts">
@@ -10,7 +9,7 @@
 	import type { HTMLImgAttributes } from "svelte/elements";
 
 	type Props = WithElementRef<HTMLImgAttributes, HTMLImageElement> & {
-		size?: AvatarSize;
+		size?: AvatarSizeValue;
 		fallback?: string;
 	};
 
@@ -28,7 +27,7 @@
 </script>
 
 {#if src && !imgError}
-	<span data-size={size} class={cn(avatarVariants({ size }), className)}>
+	<span data-size={size} class={cn(resolveAvatarVariants({ size }), className)}>
 		<img
 			bind:this={ref}
 			data-slot="avatar"
@@ -44,7 +43,7 @@
 		data-slot="avatar-fallback"
 		data-size={size}
 		class={cn(
-			avatarVariants({ size }),
+			resolveAvatarVariants({ size }),
 			"svadmin-avatar-fallback",
 			className
 		)}

package/dist/components/ui/avatar/avatar.svelte.d.ts

@@ -1,14 +1,9 @@
-import { type AvatarSize as Size } from "./avatar-variants.js";
-export declare const avatarVariants: ({ size, class: className, className: extraClassName, }?: {
-    size?: Size | null;
-    class?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-    className?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-}) => string;
-export type AvatarSize = Size;
+import { type AvatarSize as AvatarSizeValue } from "./avatar-variants.js";
+export { avatarVariants, type AvatarSize } from "./avatar-variants.js";
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLImgAttributes } from "svelte/elements";
 type Props = WithElementRef<HTMLImgAttributes, HTMLImageElement> & {
-    size?: AvatarSize;
+    size?: AvatarSizeValue;
     fallback?: string;
 };
 declare const Avatar: import("svelte").Component<Props, {}, "ref">;

package/dist/components/ui/badge/badge-variants.d.ts

@@ -1,7 +1,6 @@
 export type BadgeVariant = "default" | "secondary" | "destructive" | "subtle" | "subtle-success" | "subtle-warning" | "subtle-destructive" | "subtle-pill" | "outline" | "ghost" | "link";
 export declare const badgeVariants: ({ variant, class: className, className: extraClassName, }?: {
     variant?: BadgeVariant | null;
-    class?: Parameters<typeof clsx>[number];
-    className?: Parameters<typeof clsx>[number];
+    class?: string;
+    className?: string;
 }) => string;
-import { clsx } from "cn/engine";

package/dist/components/ui/badge/badge-variants.js

@@ -1,2 +1,3 @@
-export const badgeVariants = ({ variant = "default", class: className = "", className: extraClassName = "", } = {}) => clsx("svadmin-badge", variant && `svadmin-badge--${variant}`, className, extraClassName);
-import { clsx } from "cn/engine";
+import { uiBadge } from '../../../styled-system/recipes/index.js';
+export const badgeVariants = ({ variant = "default", class: className = "", className: extraClassName = "", } = {}) => ["svadmin-badge", variant && `svadmin-badge--${variant}`,
+    uiBadge(variant ? { variant } : {}), className, extraClassName].filter(Boolean).join(" ");

package/dist/components/ui/badge/badge.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" module>
-	import { badgeVariants as variants, type BadgeVariant as Variant } from "./badge-variants.js";
+	import { badgeVariants as resolveBadgeVariants, type BadgeVariant as BadgeVariantValue } from "./badge-variants.js";
 
-	export const badgeVariants = variants;
-	export type BadgeVariant = Variant;
+	export { badgeVariants, type BadgeVariant } from "./badge-variants.js";
 </script>
 
 <script lang="ts">
@@ -17,7 +16,7 @@
 		children,
 		...restProps
 	}: WithElementRef<HTMLAnchorAttributes> & {
-		variant?: BadgeVariant;
+		variant?: BadgeVariantValue;
 	} = $props();
 </script>
 
@@ -27,7 +26,7 @@
 	data-slot="badge"
 	data-variant={variant}
 	{href}
-	class={cn(badgeVariants({ variant }), className)}
+	class={cn(resolveBadgeVariants({ variant }), className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/badge/badge.svelte.d.ts

@@ -1,14 +1,9 @@
-import { type BadgeVariant as Variant } from "./badge-variants.js";
-export declare const badgeVariants: ({ variant, class: className, className: extraClassName, }?: {
-    variant?: Variant | null;
-    class?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-    className?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-}) => string;
-export type BadgeVariant = Variant;
+import { type BadgeVariant as BadgeVariantValue } from "./badge-variants.js";
+export { badgeVariants, type BadgeVariant } from "./badge-variants.js";
 import type { HTMLAnchorAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
 type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
-    variant?: BadgeVariant;
+    variant?: BadgeVariantValue;
 };
 declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Badge = ReturnType<typeof Badge>;

package/dist/components/ui/badge/index.js

@@ -1,4 +1,2 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 export { default as Badge } from "./badge.svelte";
 export { badgeVariants } from "./badge.svelte";

package/dist/components/ui/button/button-variants.d.ts

@@ -3,7 +3,6 @@ export type ButtonSize = "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "
 export declare const buttonVariants: ({ variant, size, class: className, className: extraClassName, }?: {
     variant?: ButtonVariant | null;
     size?: ButtonSize | null;
-    class?: Parameters<typeof clsx>[number];
-    className?: Parameters<typeof clsx>[number];
+    class?: string;
+    className?: string;
 }) => string;
-import { clsx } from "cn/engine";

package/dist/components/ui/button/button-variants.js

@@ -1,3 +1,5 @@
-// Keep the public helper for composition, while styles are owned by app.css.
-export const buttonVariants = ({ variant = "default", size = "default", class: className = "", className: extraClassName = "", } = {}) => clsx("svadmin-button", variant && `svadmin-button--${variant}`, size && `svadmin-button-size--${size}`, className, extraClassName);
-import { clsx } from "cn/engine";
+import { uiButton } from '../../../styled-system/recipes/index.js';
+// 保留公开 helper、语义标记和 null 行为；样式由预生成 Panda recipe 提供。
+export const buttonVariants = ({ variant = "default", size = "default", class: className = "", className: extraClassName = "", } = {}) => ["svadmin-button", variant && `svadmin-button--${variant}`, size && `svadmin-button-size--${size}`,
+    uiButton({ ...(variant ? { variant } : {}), ...(size ? { size } : {}) }),
+    className, extraClassName].filter(Boolean).join(" ");