@svadmin/ui 0.72.0 → 0.74.0

package/dist/recipes.js

@@ -0,0 +1,264 @@
+import { tv } from "tailwind-variants";
+function resolveSlots(slots) {
+    // tv 的 synthetic base 不是组件 anatomy；公开 API 仅返回实际 slot 字符串。
+    return Object.fromEntries(Object.entries(slots).filter(([key]) => key !== "base")
+        .map(([key, value]) => [key, value()]));
+}
+const semantic = {
+    page: "mx-auto w-full",
+    muted: "text-muted-foreground",
+    body: "text-foreground text-sm leading-6",
+    group: "flex min-w-0 flex-wrap items-center gap-2",
+};
+const buttonRecipeStyles = tv({
+    base: "svadmin-button",
+    variants: {
+        variant: {
+            default: "svadmin-button--default",
+            outline: "svadmin-button--outline",
+            secondary: "svadmin-button--secondary",
+            ghost: "svadmin-button--ghost",
+            destructive: "svadmin-button--destructive",
+            link: "svadmin-button--link",
+        },
+        size: {
+            default: "svadmin-button-size--default",
+            xs: "svadmin-button-size--xs",
+            sm: "svadmin-button-size--sm",
+            lg: "svadmin-button-size--lg",
+            icon: "svadmin-button-size--icon",
+            "icon-xs": "svadmin-button-size--icon-xs",
+            "icon-sm": "svadmin-button-size--icon-sm",
+            "icon-lg": "svadmin-button-size--icon-lg",
+        },
+    },
+});
+const badgeRecipeStyles = tv({
+    base: "svadmin-badge",
+    variants: {
+        variant: {
+            default: "svadmin-badge--default",
+            secondary: "svadmin-badge--secondary",
+            destructive: "svadmin-badge--destructive",
+            subtle: "svadmin-badge--subtle",
+            "subtle-success": "svadmin-badge--subtle-success",
+            "subtle-warning": "svadmin-badge--subtle-warning",
+            "subtle-destructive": "svadmin-badge--subtle-destructive",
+            "subtle-pill": "svadmin-badge--subtle-pill",
+            outline: "svadmin-badge--outline",
+            ghost: "svadmin-badge--ghost",
+            link: "svadmin-badge--link",
+        },
+    },
+});
+const buttonRecipeDefaults = { variant: "default", size: "default" };
+const badgeRecipeDefaults = { variant: "default" };
+const textareaRecipeStyles = tv({ base: "svadmin-textarea" });
+const contentPageRecipeStyles = tv({
+    slots: { root: `${semantic.page} svadmin-content-page space-y-6` },
+    variants: {
+        width: {
+            narrow: { root: "max-w-3xl" },
+            default: { root: "max-w-[74rem]" },
+            wide: { root: "max-w-[92rem]" },
+        },
+    },
+    defaultVariants: { width: "default" },
+});
+const contentHeaderRecipeStyles = tv({
+    slots: {
+        root: "svadmin-content-header space-y-3",
+        breadcrumbs: `${semantic.group} text-xs text-muted-foreground`,
+        currentCrumb: "text-foreground",
+        row: "flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between",
+        heading: "min-w-0 space-y-1",
+        eyebrow: "text-xs font-medium text-muted-foreground",
+        title: "text-xl font-semibold leading-tight text-foreground",
+        description: "max-w-2xl text-sm leading-6 text-muted-foreground",
+        actions: "flex shrink-0 flex-wrap items-center gap-2",
+    },
+});
+const metricBlockRecipeStyles = tv({
+    slots: {
+        root: "svadmin-metric-block min-w-0 rounded-lg border border-border bg-card p-4 shadow-sm",
+        header: "flex items-start justify-between gap-3",
+        label: "text-sm text-muted-foreground",
+        icon: "text-muted-foreground",
+        skeleton: "mt-3 h-8 w-24",
+        value: "mt-2 overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-semibold tabular-nums text-foreground",
+        meta: "mt-2 flex flex-wrap gap-2 text-xs",
+        trend: "font-medium tabular-nums",
+        detail: "text-muted-foreground",
+    },
+    variants: {
+        trendTone: {
+            positive: { trend: "text-success" },
+            negative: { trend: "text-destructive" },
+            warning: { trend: "text-warning-foreground" },
+            neutral: { trend: "text-muted-foreground" },
+        },
+    },
+    defaultVariants: { trendTone: "neutral" },
+});
+const productSectionRecipeStyles = tv({
+    slots: {
+        root: "flex flex-wrap items-start justify-between gap-3",
+        heading: "min-w-0 flex-[1_1_16rem]",
+        title: "m-0 text-base font-semibold text-foreground [overflow-wrap:anywhere]",
+        description: "mt-1 max-w-[65ch] text-[0.8125rem] leading-6 text-muted-foreground",
+        actions: "flex shrink-0 flex-wrap items-center gap-2",
+    },
+});
+const productToolbarRecipeStyles = tv({
+    slots: {
+        root: "flex flex-wrap items-center justify-between gap-3 border-b border-border py-3",
+        leading: "flex min-w-0 flex-[1_1_16rem] flex-wrap items-center gap-2",
+        trailing: "ms-auto flex min-w-0 flex-wrap items-center gap-2",
+    },
+});
+const productWorkspaceRecipeStyles = tv({
+    slots: {
+        root: "flex min-w-0 flex-col gap-6",
+        summary: "min-w-0",
+        columns: "grid min-w-0 grid-cols-1 items-start gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,var(--workspace-secondary-width,22rem))]",
+        primary: "min-w-0 lg:order-1",
+        secondary: "flex min-w-0 flex-col gap-6 lg:order-2",
+    },
+    variants: { hasSecondary: { true: {}, false: { columns: "lg:grid-cols-1" } } },
+    defaultVariants: { hasSecondary: false },
+});
+const productSettingsRecipeStyles = tv({
+    slots: {
+        root: `${semantic.body} min-w-0`,
+        header: "flex flex-wrap items-start justify-between gap-3 border-b border-border py-4",
+        heading: "min-w-0 flex-[1_1_16rem]",
+        title: "m-0 text-base font-semibold text-foreground [overflow-wrap:anywhere]",
+        description: "mt-1 max-w-[65ch] text-[0.8125rem] leading-6 text-muted-foreground",
+        actions: "flex shrink-0 flex-wrap items-center gap-2",
+        body: "min-w-0 py-1",
+    },
+});
+const productSettingsRowRecipeStyles = tv({
+    slots: {
+        root: "grid min-w-0 grid-cols-1 items-start gap-3 py-5 md:grid-cols-2 md:gap-x-6",
+        heading: "min-w-0",
+        label: "m-0 font-medium text-foreground [overflow-wrap:anywhere]",
+        description: "mt-1 max-w-[52ch] text-[0.8125rem] leading-6 text-muted-foreground [overflow-wrap:anywhere]",
+        control: "min-w-0 max-w-full",
+    },
+    variants: { separated: { true: { root: "border-t border-border" }, false: {} } },
+    defaultVariants: { separated: false },
+});
+const productStatusRecipeStyles = tv({
+    slots: { root: "svadmin-product-status" },
+    variants: {
+        status: {
+            success: { root: "[--svadmin-status-color:var(--success)]" },
+            warning: { root: "[--svadmin-status-color:var(--warning)]" },
+            danger: { root: "[--svadmin-status-color:var(--destructive)]" },
+            info: { root: "[--svadmin-status-color:var(--info)]" },
+            neutral: { root: "[--svadmin-status-color:var(--muted-foreground)]" },
+        },
+    },
+    defaultVariants: { status: "neutral" },
+});
+const surfaceMetricRecipeStyles = tv({
+    slots: {
+        root: "surface-metric__root min-w-0",
+        card: "surface-metric__card border-s-[3px] border-solid",
+        description: "surface-metric__description text-muted-foreground",
+        state: "surface-metric__state [--svadmin-metric-state-border-width:3px]",
+    },
+    variants: {
+        tone: {
+            neutral: { card: "border-s-border", state: "[--svadmin-metric-state-accent:var(--border)]" },
+            success: { card: "border-s-success", state: "[--svadmin-metric-state-accent:var(--success)]" },
+            warning: { card: "border-s-warning", state: "[--svadmin-metric-state-accent:var(--warning)]" },
+            danger: { card: "border-s-destructive", state: "[--svadmin-metric-state-accent:var(--destructive)]" },
+            info: { card: "border-s-info", state: "[--svadmin-metric-state-accent:var(--info)]" },
+        },
+        density: {
+            compact: { card: "p-3", state: "[--svadmin-metric-state-padding:0.75rem] [--svadmin-metric-state-height:4.5rem]" },
+            comfortable: { card: "p-5", state: "[--svadmin-metric-state-padding:1.25rem] [--svadmin-metric-state-height:6rem]" },
+        },
+    },
+    defaultVariants: { tone: "neutral", density: "comfortable" },
+});
+const surfaceTableRecipeStyles = tv({
+    slots: {
+        root: "surface-table__root min-w-0",
+        header: "surface-table__header",
+        content: "surface-table__content",
+        head: "surface-table__head",
+        cell: "surface-table__cell",
+        state: "surface-table__state text-muted-foreground",
+    },
+    variants: {
+        density: {
+            compact: { header: "px-3", content: "px-3", head: "[&[data-slot=table-head]]:py-1 [&[data-slot=table-head]]:text-xs", cell: "[&[data-slot=table-cell]]:py-1 [&[data-slot=table-cell]]:text-xs", state: "[--svadmin-table-state-height:6rem]" },
+            comfortable: { header: "px-4", content: "px-4", head: "[&[data-slot=table-head]]:py-2 [&[data-slot=table-head]]:text-sm", cell: "[&[data-slot=table-cell]]:py-2 [&[data-slot=table-cell]]:text-sm", state: "[--svadmin-table-state-height:8rem]" },
+        },
+    },
+    defaultVariants: { density: "comfortable" },
+});
+// undefined 使用公开默认值；null 显式禁用该变体，不能交给 tv 再补默认值。
+export const buttonRecipe = ({ variant = buttonRecipeDefaults.variant, size = buttonRecipeDefaults.size, ...props } = {}) => ({
+    root: buttonRecipeStyles({
+        ...props,
+        ...(variant === null ? {} : { variant }),
+        ...(size === null ? {} : { size }),
+    }),
+});
+export const badgeRecipe = ({ variant = badgeRecipeDefaults.variant, ...props } = {}) => ({
+    root: badgeRecipeStyles({ ...props, ...(variant === null ? {} : { variant }) }),
+});
+export const textareaRecipe = (props = {}) => ({ root: textareaRecipeStyles(props) });
+export const contentPageRecipe = (props = {}) => resolveSlots(contentPageRecipeStyles(props));
+export const contentHeaderRecipe = (props = {}) => resolveSlots(contentHeaderRecipeStyles(props));
+export const metricBlockRecipe = (props = {}) => resolveSlots(metricBlockRecipeStyles(props));
+export const productSectionRecipe = (props = {}) => resolveSlots(productSectionRecipeStyles(props));
+export const productToolbarRecipe = (props = {}) => resolveSlots(productToolbarRecipeStyles(props));
+export const productWorkspaceRecipe = (props = {}) => resolveSlots(productWorkspaceRecipeStyles(props));
+export const productSettingsRecipe = (props = {}) => resolveSlots(productSettingsRecipeStyles(props));
+export const productSettingsRowRecipe = (props = {}) => resolveSlots(productSettingsRowRecipeStyles(props));
+export const productStatusRecipe = (props = {}) => resolveSlots(productStatusRecipeStyles(props));
+export const surfaceMetricRecipe = (props = {}) => resolveSlots(surfaceMetricRecipeStyles(props));
+export const surfaceTableRecipe = (props = {}) => resolveSlots(surfaceTableRecipeStyles(props));
+export const allRecipes = {
+    buttonRecipe,
+    badgeRecipe,
+    textareaRecipe,
+    contentPageRecipe,
+    contentHeaderRecipe,
+    metricBlockRecipe,
+    productSectionRecipe,
+    productToolbarRecipe,
+    productWorkspaceRecipe,
+    productSettingsRecipe,
+    productSettingsRowRecipe,
+    productStatusRecipe,
+    surfaceMetricRecipe,
+    surfaceTableRecipe,
+};
+// 元数据从相同的 variant 定义派生，避免提示词中的枚举与实际实现分叉。
+const recipeStyles = {
+    buttonRecipe: buttonRecipeStyles, badgeRecipe: badgeRecipeStyles, textareaRecipe: textareaRecipeStyles,
+    contentPageRecipe: contentPageRecipeStyles, contentHeaderRecipe: contentHeaderRecipeStyles,
+    metricBlockRecipe: metricBlockRecipeStyles, productSectionRecipe: productSectionRecipeStyles,
+    productToolbarRecipe: productToolbarRecipeStyles, productWorkspaceRecipe: productWorkspaceRecipeStyles,
+    productSettingsRecipe: productSettingsRecipeStyles, productSettingsRowRecipe: productSettingsRowRecipeStyles,
+    productStatusRecipe: productStatusRecipeStyles, surfaceMetricRecipe: surfaceMetricRecipeStyles,
+    surfaceTableRecipe: surfaceTableRecipeStyles,
+};
+export function describeRecipe(name) {
+    const styles = recipeStyles[name];
+    const slots = Object.keys(styles.slots ?? {}).filter(slot => slot !== "base");
+    return {
+        slots: slots.length > 0 ? slots : ["root"],
+        variants: Object.fromEntries(Object.entries(styles.variants ?? {}).map(([key, values]) => [key, Object.keys(values)])),
+        defaults: {
+            ...(name === "buttonRecipe" ? buttonRecipeDefaults
+                : name === "badgeRecipe" ? badgeRecipeDefaults : styles.defaultVariants),
+        },
+    };
+}

package/dist/rendering/index.d.ts

@@ -0,0 +1,87 @@
+import type { Component, Snippet } from 'svelte';
+import type { BaseRecord, FieldDefinition } from '@svadmin/core';
+import { type ContractFormAction, type ContractFormDraft, type ContractFormValues, type ContractId, type ContractRecord, type ContractSchemas, type ResourceContract } from '@svadmin/core/resource-contract';
+export type RecordField<S extends ContractSchemas> = Extract<keyof ContractRecord<S>, string>;
+export type FormField<S extends ContractSchemas, A extends ContractFormAction> = Extract<keyof ContractFormValues<S, A>, string>;
+/** 与 AutoTable 的现有 snippet 参数兼容；未经校验的数据保持 unknown。 */
+export interface CellInput {
+    value: unknown;
+    record: Record<string, unknown>;
+}
+export interface FieldInput {
+    field: FieldDefinition;
+    value: unknown;
+    onchange: (value: unknown) => void;
+}
+export interface CellContext<S extends ContractSchemas, K extends RecordField<S>> {
+    key: K;
+    record: ContractRecord<S>;
+    value: ContractRecord<S>[K];
+}
+export type FieldState<T> = {
+    valid: true;
+    value: T;
+} | {
+    valid: false;
+};
+export interface FieldContext<S extends ContractSchemas, A extends ContractFormAction, K extends FormField<S, A>> {
+    field: FieldDefinition & {
+        key: K;
+    };
+    state: FieldState<ContractFormValues<S, A>[K]>;
+    readonly: boolean;
+    /** 只接收符合当前操作契约的值，运行时也会重新校验。 */
+    onchange: (value: ContractFormValues<S, A>[K]) => void;
+    /** 草稿可以暂时不满足业务约束，但必须是可快照的普通数据。 */
+    onDraftChange: (value: unknown) => void;
+}
+export type CellSnippets<S extends ContractSchemas> = Partial<Record<RecordField<S>, Snippet<[CellInput]>>>;
+export interface RowContext<S extends ContractSchemas> {
+    record: ContractRecord<S>;
+    id: ContractId<S>;
+}
+/** 动态路由只擦除资源类型，不把未知记录或草稿假定为业务类型。 */
+export interface ResourceRendering {
+    readonly resource: ResourceContract;
+    record(value: unknown): BaseRecord;
+    records(value: unknown): BaseRecord[];
+    draft(action: ContractFormAction, value: unknown): Record<string, unknown>;
+}
+/** 同名但不同实例的契约也不可混用；宿主配置必须绑定实际查询契约。 */
+export declare function bindResourceRendering(rendering: ResourceRendering | undefined, resource: ResourceContract): ResourceRendering | undefined;
+/** 业务记录/草稿边界；无需自定义 snippet 时，不把完整渲染工具链加入首屏。 */
+export declare function createResourceRendering<S extends ContractSchemas>(resource: ResourceContract<S>): Readonly<{
+    resource: ResourceContract<S>;
+    record: (value: unknown) => ContractRecord<S>;
+    records: (value: unknown) => ContractRecord<S>[];
+    draft: <A extends ContractFormAction>(action: A, value: unknown) => ContractFormDraft<S, A>;
+}>;
+/** 原生 Svelte 渲染适配器：不执行生成代码，不发请求，也不改变组件生命周期。 */
+export declare function createResourceRenderers<S extends ContractSchemas>(resource: ResourceContract<S>): Readonly<{
+    resource: ResourceContract<S>;
+    record: (value: unknown) => ContractRecord<S>;
+    records: (value: unknown) => ContractRecord<S>[];
+    draft: <A extends ContractFormAction>(action: A, value: unknown) => Partial<Record<Extract<keyof ContractFormValues<S, A>, string>, unknown>>;
+    cell: <K extends RecordField<S>>(key: K, input: CellInput) => CellContext<S, K>;
+    row: (input: {
+        record: Record<string, unknown>;
+        id: string | number;
+    }) => RowContext<S>;
+    summary: (input: {
+        data: readonly unknown[];
+        total: number;
+        visibleColumnsCount: number;
+    }) => {
+        data: ContractRecord<S>[];
+        total: number;
+        visibleColumnsCount: number;
+    };
+    columns: <const C extends CellSnippets<S>>(snippets: C & Record<Exclude<keyof C, RecordField<S>>, never>) => C;
+    field: <A extends ContractFormAction, K extends FormField<S, A>>(action: A, key: K, input: FieldInput) => FieldContext<S, A, K>;
+}>;
+/** 在普通 .ts 配置中保留组件与属性的类型关联；使用原生 <view.component {...view.props} />。 */
+export interface ComponentView<P extends Record<string, unknown>> {
+    component: Component<P>;
+    props: P;
+}
+export declare function componentView<P extends Record<string, unknown>>(component: Component<P>, props: NoInfer<P>): ComponentView<P>;

package/dist/rendering/index.js

@@ -0,0 +1,117 @@
+import { snapshotPlainData } from '@svadmin/core/schema';
+import { contractFormInvalidFields, contractKey, getContractFormFields, parseContractId, parseContractRecord, snapshotContractFormDraft, } from '@svadmin/core/resource-contract';
+/** 同名但不同实例的契约也不可混用；宿主配置必须绑定实际查询契约。 */
+export function bindResourceRendering(rendering, resource) {
+    if (rendering && rendering.resource !== resource) {
+        throw new TypeError('Renderer resource contract mismatch');
+    }
+    return rendering;
+}
+function assertAction(action) {
+    if (!['create', 'edit', 'clone', 'show'].includes(action)) {
+        throw new TypeError('Invalid renderer form action');
+    }
+}
+function fieldState(resource, action, key, value) {
+    try {
+        const draft = snapshotContractFormDraft(resource, action, { [key]: value });
+        const invalid = contractFormInvalidFields(resource, action, draft);
+        if (invalid.includes(key) || invalid.includes('_root'))
+            return { valid: false };
+        return { valid: true, value: Object.hasOwn(draft, key) ? draft[key] : undefined };
+    }
+    catch {
+        return { valid: false };
+    }
+}
+/** 业务记录/草稿边界；无需自定义 snippet 时，不把完整渲染工具链加入首屏。 */
+export function createResourceRendering(resource) {
+    contractKey(resource);
+    function record(value) {
+        return parseContractRecord(resource, value);
+    }
+    function records(value) {
+        const snapshot = snapshotPlainData(value);
+        if (!Array.isArray(snapshot))
+            throw new TypeError('Renderer records must be an array');
+        return snapshot.map(record);
+    }
+    function draft(action, value) {
+        assertAction(action);
+        return snapshotContractFormDraft(resource, action, value);
+    }
+    return Object.freeze({ resource, record, records, draft });
+}
+/** 原生 Svelte 渲染适配器：不执行生成代码，不发请求，也不改变组件生命周期。 */
+export function createResourceRenderers(resource) {
+    const boundary = createResourceRendering(resource);
+    const { record, records, draft } = boundary;
+    const recordFields = new Set(getContractFormFields(resource, 'show'));
+    function cell(key, input) {
+        if (!recordFields.has(key))
+            throw new TypeError('Unknown renderer record field');
+        const checked = record(input.record);
+        // value 从已校验记录读取，不相信调用方传入的脱离记录的 value。
+        return { key, record: checked, value: checked[key] };
+    }
+    function row(input) {
+        const checked = record(input.record);
+        const id = parseContractId(resource, input.id);
+        if (!Object.is(id, checked['id']))
+            throw new TypeError('Renderer row identity mismatch');
+        return { record: checked, id };
+    }
+    function summary(input) {
+        if (!Array.isArray(input.data) || !Number.isSafeInteger(input.total) || input.total < 0
+            || !Number.isSafeInteger(input.visibleColumnsCount) || input.visibleColumnsCount < 0) {
+            throw new TypeError('Invalid renderer summary');
+        }
+        return { data: input.data.map(record), total: input.total, visibleColumnsCount: input.visibleColumnsCount };
+    }
+    function columns(snippets) {
+        if (!snippets || ![Object.prototype, null].includes(Object.getPrototypeOf(snippets))
+            || Object.getOwnPropertySymbols(snippets).length) {
+            throw new TypeError('Invalid renderer column map');
+        }
+        for (const [key, property] of Object.entries(Object.getOwnPropertyDescriptors(snippets))) {
+            if (!recordFields.has(key) || !property.enumerable || !('value' in property)
+                || typeof property.value !== 'function')
+                throw new TypeError('Invalid renderer column');
+        }
+        // 不冻结调用方对象，也不保留可被后来添加属性的原始映射。
+        return { ...snippets };
+    }
+    function field(action, key, input) {
+        assertAction(action);
+        if (!getContractFormFields(resource, action).includes(key) || input.field.key !== key) {
+            throw new TypeError('Renderer form field mismatch');
+        }
+        const change = input.onchange;
+        const readonly = action === 'show';
+        function assertWritable() {
+            if (readonly)
+                throw new TypeError('Cannot update a read-only renderer');
+        }
+        return {
+            field: { ...input.field, key },
+            state: fieldState(resource, action, key, input.value),
+            readonly,
+            onchange(value) {
+                assertWritable();
+                const checked = fieldState(resource, action, key, value);
+                if (!checked.valid)
+                    throw new TypeError('Invalid renderer field value');
+                change(checked.value);
+            },
+            onDraftChange(value) {
+                assertWritable();
+                const draft = snapshotContractFormDraft(resource, action, { [key]: value });
+                change(Object.hasOwn(draft, key) ? draft[key] : undefined);
+            },
+        };
+    }
+    return Object.freeze({ resource, record, records, draft, cell, row, summary, columns, field });
+}
+export function componentView(component, props) {
+    return { component, props };
+}

package/dist/styles/aliases.css

@@ -0,0 +1,49 @@
+:root,
+.svadmin-theme{
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --shadow-control: var(--svadmin-shadow-control);
+  --shadow-surface: var(--svadmin-shadow-surface);
+  --shadow-surface-hover: var(--svadmin-shadow-surface-hover);
+  --shadow-overlay: var(--svadmin-shadow-overlay);
+}