@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/json-viewer/meta.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * JsonViewer — see specs/components/show/JsonViewer.spec.md
+ */
+export declare const meta: {
+    readonly name: "JsonViewer";
+    readonly category: "plus";
+    readonly description: "JSON 预览 / 编辑器：底层直接引 Semi 自研框架无关内核 @douyinfe/semi-json-viewer-core（仿 VS Code text-buffer，虚拟化大数据、jsonc-parser 解析），内核经动态 import 异步加载（不进主 bundle，加载中 loading 态）。非受控（value 仅初始，不回写）。语法高亮全走 token（key/string/number/boolean·null/标点/注释/行号/搜索命中）深浅双主题。搜索/替换工具条由 Svelte 壳自渲染（内核仅提供检索 API），文案/aria 走 i18n。ref 暴露 getValue/format/search/getSearchResults/prevSearch/nextSearch/replace/replaceAll。options 支持 lineHeight/autoWrap/readOnly/customRenderRule（仅只读经 customRender 事件透出）/formatOptions。renderSearchButton 自定义搜索按钮（对齐 Semi ≥2.95）。";
+    readonly exports: readonly ["JsonViewer"];
+    readonly props: readonly [{
+        readonly name: "value";
+        readonly type: "string";
+        readonly default: "''";
+        readonly desc: "展示内容（JSON 字符串）。非受控：仅初始建实例，后续变化不重建（对齐 Semi）";
+    }, {
+        readonly name: "height";
+        readonly type: "number | string";
+        readonly default: "undefined";
+        readonly desc: "高度（number 记为 px）";
+    }, {
+        readonly name: "width";
+        readonly type: "number | string";
+        readonly default: "undefined";
+        readonly desc: "宽度（number 记为 px）";
+    }, {
+        readonly name: "showSearch";
+        readonly type: "boolean";
+        readonly default: "true";
+        readonly desc: "是否显示搜索入口";
+    }, {
+        readonly name: "renderSearchButton";
+        readonly type: "Snippet<[Snippet, SearchControls]>";
+        readonly default: "undefined";
+        readonly desc: "自定义渲染搜索按钮（传入默认按钮 snippet 与控制句柄，对齐 Semi ≥2.95）";
+    }, {
+        readonly name: "options";
+        readonly type: "JsonViewerOptions";
+        readonly default: "undefined";
+        readonly desc: "编辑器配置：lineHeight(20)/autoWrap(true)/readOnly(false)/customRenderRule/formatOptions";
+    }, {
+        readonly name: "onChange";
+        readonly type: "(value: string) => void";
+        readonly default: "undefined";
+        readonly desc: "内容变化回调（非受控，不回写 value）";
+    }, {
+        readonly name: "onCustomRender";
+        readonly type: "(map: Map<HTMLElement, unknown>) => void";
+        readonly default: "undefined";
+        readonly desc: "只读模式命中 customRenderRule 时透出 customRenderMap";
+    }, {
+        readonly name: "class";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "自定义类名";
+    }, {
+        readonly name: "style";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "自定义内联样式";
+    }];
+    readonly events: readonly [{
+        readonly name: "onChange";
+        readonly desc: "内容变化（非受控，不回写 value）";
+    }, {
+        readonly name: "onCustomRender";
+        readonly desc: "只读 + customRenderRule 命中，透出 customRenderMap";
+    }];
+    readonly methods: readonly [{
+        readonly name: "getValue";
+        readonly signature: "() => string";
+        readonly desc: "取当前 JSON 字符串";
+    }, {
+        readonly name: "format";
+        readonly signature: "() => void";
+        readonly desc: "格式化当前内容";
+    }, {
+        readonly name: "search";
+        readonly signature: "(text, caseSensitive?, wholeWord?, regex?) => void";
+        readonly desc: "检索文本";
+    }, {
+        readonly name: "getSearchResults";
+        readonly signature: "() => FindMatch[]";
+        readonly desc: "取当前搜索命中列表";
+    }, {
+        readonly name: "prevSearch";
+        readonly signature: "(step?: number) => void";
+        readonly desc: "跳到上一个匹配";
+    }, {
+        readonly name: "nextSearch";
+        readonly signature: "(step?: number) => void";
+        readonly desc: "跳到下一个匹配";
+    }, {
+        readonly name: "replace";
+        readonly signature: "(text: string) => void";
+        readonly desc: "替换当前命中（只读时忽略）";
+    }, {
+        readonly name: "replaceAll";
+        readonly signature: "(text: string) => void";
+        readonly desc: "替换全部命中（只读时忽略）";
+    }];
+    readonly slots: readonly [];
+    readonly a11y: {
+        readonly hasRole: true;
+        readonly focusable: true;
+        readonly note: "编辑器容器 role=textbox + aria-multiline + aria-label（i18n）；只读时 aria-readonly；容器 tabindex=0 可聚焦。搜索/替换工具条按钮均带 aria-label（i18n），选项切换按钮带 aria-pressed。编辑键位由内核处理，不覆盖。";
+    };
+    readonly tokens: readonly ["--cd-color-json-viewer-bg", "--cd-color-json-viewer-border", "--cd-color-json-viewer-bracket-0", "--cd-color-json-viewer-bracket-1", "--cd-color-json-viewer-bracket-2", "--cd-color-json-viewer-comment", "--cd-color-json-viewer-error", "--cd-color-json-viewer-folding-icon", "--cd-color-json-viewer-key", "--cd-color-json-viewer-keyword", "--cd-color-json-viewer-line-number", "--cd-color-json-viewer-line-number-bg", "--cd-color-json-viewer-number", "--cd-color-json-viewer-punctuation", "--cd-color-json-viewer-search-current", "--cd-color-json-viewer-search-highlight", "--cd-color-json-viewer-string", "--cd-color-json-viewer-text", "--cd-color-json-viewer-toolbar-bg", "--cd-color-json-viewer-toolbar-border", "--cd-color-json-viewer-toolbar-btn-active", "--cd-color-json-viewer-toolbar-btn-hover", "--cd-color-json-viewer-toolbar-shadow", "--cd-font-json-viewer-fontfamily", "--cd-font-json-viewer-fontsize", "--cd-radius-json-viewer", "--cd-radius-json-viewer-toolbar", "--cd-spacing-json-viewer-paddingY", "--cd-spacing-json-viewer-toolbar-gap", "--cd-spacing-json-viewer-toolbar-padding"];
+    readonly responsive: false;
+    readonly examples: readonly [{
+        readonly title: "基础预览";
+        readonly code: "<JsonViewer value={JSON.stringify(data, null, 2)} />";
+    }, {
+        readonly title: "只读";
+        readonly code: "<JsonViewer value={json} options={{ readOnly: true }} />";
+    }, {
+        readonly title: "ref 取值 / 格式化";
+        readonly code: "let vw; ... vw.format(); const v = vw.getValue();";
+    }, {
+        readonly title: "搜索";
+        readonly code: "vw.search(\"keyword\"); vw.nextSearch();";
+    }, {
+        readonly title: "customRenderRule（仅只读）";
+        readonly code: "<JsonViewer value={json} options={{ readOnly: true, customRenderRule: rules }} onCustomRender={handle} />";
+    }, {
+        readonly title: "自定义搜索按钮";
+        readonly code: "<JsonViewer value={json}>{#snippet renderSearchButton(def, ctrl)}...{/snippet}</JsonViewer>";
+    }];
+};
+//# sourceMappingURL=meta.d.ts.map

package/dist/{lottie-icon → json-viewer}/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/lottie-icon/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JP,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/json-viewer/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8HP,CAAC"}

package/dist/json-viewer/meta.js

@@ -0,0 +1,130 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * JsonViewer — see specs/components/show/JsonViewer.spec.md
+ */
+export const meta = {
+    name: 'JsonViewer',
+    category: 'plus',
+    description: 'JSON 预览 / 编辑器：底层直接引 Semi 自研框架无关内核 @douyinfe/semi-json-viewer-core（仿 VS Code text-buffer，虚拟化大数据、jsonc-parser 解析），内核经动态 import 异步加载（不进主 bundle，加载中 loading 态）。非受控（value 仅初始，不回写）。语法高亮全走 token（key/string/number/boolean·null/标点/注释/行号/搜索命中）深浅双主题。搜索/替换工具条由 Svelte 壳自渲染（内核仅提供检索 API），文案/aria 走 i18n。ref 暴露 getValue/format/search/getSearchResults/prevSearch/nextSearch/replace/replaceAll。options 支持 lineHeight/autoWrap/readOnly/customRenderRule（仅只读经 customRender 事件透出）/formatOptions。renderSearchButton 自定义搜索按钮（对齐 Semi ≥2.95）。',
+    exports: ['JsonViewer'],
+    props: [
+        {
+            name: 'value',
+            type: 'string',
+            default: "''",
+            desc: '展示内容（JSON 字符串）。非受控：仅初始建实例，后续变化不重建（对齐 Semi）',
+        },
+        { name: 'height', type: 'number | string', default: 'undefined', desc: '高度（number 记为 px）' },
+        { name: 'width', type: 'number | string', default: 'undefined', desc: '宽度（number 记为 px）' },
+        { name: 'showSearch', type: 'boolean', default: 'true', desc: '是否显示搜索入口' },
+        {
+            name: 'renderSearchButton',
+            type: 'Snippet<[Snippet, SearchControls]>',
+            default: 'undefined',
+            desc: '自定义渲染搜索按钮（传入默认按钮 snippet 与控制句柄，对齐 Semi ≥2.95）',
+        },
+        {
+            name: 'options',
+            type: 'JsonViewerOptions',
+            default: 'undefined',
+            desc: '编辑器配置：lineHeight(20)/autoWrap(true)/readOnly(false)/customRenderRule/formatOptions',
+        },
+        {
+            name: 'onChange',
+            type: '(value: string) => void',
+            default: 'undefined',
+            desc: '内容变化回调（非受控，不回写 value）',
+        },
+        {
+            name: 'onCustomRender',
+            type: '(map: Map<HTMLElement, unknown>) => void',
+            default: 'undefined',
+            desc: '只读模式命中 customRenderRule 时透出 customRenderMap',
+        },
+        { name: 'class', type: 'string', default: 'undefined', desc: '自定义类名' },
+        { name: 'style', type: 'string', default: 'undefined', desc: '自定义内联样式' },
+    ],
+    events: [
+        { name: 'onChange', desc: '内容变化（非受控，不回写 value）' },
+        { name: 'onCustomRender', desc: '只读 + customRenderRule 命中，透出 customRenderMap' },
+    ],
+    methods: [
+        { name: 'getValue', signature: '() => string', desc: '取当前 JSON 字符串' },
+        { name: 'format', signature: '() => void', desc: '格式化当前内容' },
+        {
+            name: 'search',
+            signature: '(text, caseSensitive?, wholeWord?, regex?) => void',
+            desc: '检索文本',
+        },
+        { name: 'getSearchResults', signature: '() => FindMatch[]', desc: '取当前搜索命中列表' },
+        { name: 'prevSearch', signature: '(step?: number) => void', desc: '跳到上一个匹配' },
+        { name: 'nextSearch', signature: '(step?: number) => void', desc: '跳到下一个匹配' },
+        { name: 'replace', signature: '(text: string) => void', desc: '替换当前命中（只读时忽略）' },
+        { name: 'replaceAll', signature: '(text: string) => void', desc: '替换全部命中（只读时忽略）' },
+    ],
+    slots: [],
+    a11y: {
+        hasRole: true,
+        focusable: true,
+        note: '编辑器容器 role=textbox + aria-multiline + aria-label（i18n）；只读时 aria-readonly；容器 tabindex=0 可聚焦。搜索/替换工具条按钮均带 aria-label（i18n），选项切换按钮带 aria-pressed。编辑键位由内核处理，不覆盖。',
+    },
+    tokens: [
+        '--cd-color-json-viewer-bg',
+        '--cd-color-json-viewer-border',
+        '--cd-color-json-viewer-bracket-0',
+        '--cd-color-json-viewer-bracket-1',
+        '--cd-color-json-viewer-bracket-2',
+        '--cd-color-json-viewer-comment',
+        '--cd-color-json-viewer-error',
+        '--cd-color-json-viewer-folding-icon',
+        '--cd-color-json-viewer-key',
+        '--cd-color-json-viewer-keyword',
+        '--cd-color-json-viewer-line-number',
+        '--cd-color-json-viewer-line-number-bg',
+        '--cd-color-json-viewer-number',
+        '--cd-color-json-viewer-punctuation',
+        '--cd-color-json-viewer-search-current',
+        '--cd-color-json-viewer-search-highlight',
+        '--cd-color-json-viewer-string',
+        '--cd-color-json-viewer-text',
+        '--cd-color-json-viewer-toolbar-bg',
+        '--cd-color-json-viewer-toolbar-border',
+        '--cd-color-json-viewer-toolbar-btn-active',
+        '--cd-color-json-viewer-toolbar-btn-hover',
+        '--cd-color-json-viewer-toolbar-shadow',
+        '--cd-font-json-viewer-fontfamily',
+        '--cd-font-json-viewer-fontsize',
+        '--cd-radius-json-viewer',
+        '--cd-radius-json-viewer-toolbar',
+        '--cd-spacing-json-viewer-paddingY',
+        '--cd-spacing-json-viewer-toolbar-gap',
+        '--cd-spacing-json-viewer-toolbar-padding',
+    ],
+    responsive: false,
+    examples: [
+        {
+            title: '基础预览',
+            code: '<JsonViewer value={JSON.stringify(data, null, 2)} />',
+        },
+        {
+            title: '只读',
+            code: '<JsonViewer value={json} options={{ readOnly: true }} />',
+        },
+        {
+            title: 'ref 取值 / 格式化',
+            code: 'let vw; ... vw.format(); const v = vw.getValue();',
+        },
+        {
+            title: '搜索',
+            code: 'vw.search("keyword"); vw.nextSearch();',
+        },
+        {
+            title: 'customRenderRule（仅只读）',
+            code: '<JsonViewer value={json} options={{ readOnly: true, customRenderRule: rules }} onCustomRender={handle} />',
+        },
+        {
+            title: '自定义搜索按钮',
+            code: '<JsonViewer value={json}>{#snippet renderSearchButton(def, ctrl)}...{/snippet}</JsonViewer>',
+        },
+    ],
+};

package/dist/json-viewer/semi-json-viewer-core.d.ts

@@ -0,0 +1,94 @@
+/**
+ * 内核包 `@douyinfe/semi-json-viewer-core` 只发布了编译后的 `lib/*`，其 `typings`
+ * 字段指向未随包发布的 `src/index.ts`，故类型不可解析。此处补一份贴合 lib 运行时
+ * API 的最小环境声明（依据 lib/index.js 与 Semi jsonViewer.foundation.d.ts 坐实）。
+ * 仅声明本组件实际消费的成员，未列的成员不代表内核没有。
+ */
+declare module '@douyinfe/semi-json-viewer-core' {
+  /** 内核事件总线（自研 emitter）。 */
+  export interface JsonViewerEmitter {
+    on(event: 'customRender', handler: (e: { customRenderMap: Map<HTMLElement, unknown> }) => void): void;
+    on(event: 'contentChanged', handler: (e?: unknown) => void): void;
+    on(event: string, handler: (e?: unknown) => void): void;
+    off?(event: string, handler: (e?: unknown) => void): void;
+  }
+
+  /** JSON 模型（取值等）。 */
+  export interface JsonModel {
+    getValue(): string;
+  }
+
+  /** 搜索命中项。 */
+  export interface FindMatch {
+    range: {
+      startLineNumber: number;
+      startColumn: number;
+      endLineNumber: number;
+      endColumn: number;
+    };
+  }
+
+  /** 搜索控件（内核仅提供检索/替换/导航 API，不渲染任何 UI）。 */
+  export interface SearchWidget {
+    searchResults: FindMatch[] | null;
+    search(
+      searchText: string,
+      caseSensitive?: boolean,
+      wholeWord?: boolean,
+      regex?: boolean,
+    ): void;
+    navigateResults(direction: number): void;
+    replace(replaceText: string): void;
+    replaceAll(replaceText: string): void;
+  }
+
+  /** 格式化配置。 */
+  export interface JsonFormatOptions {
+    tabSize?: number;
+    insertSpaces?: boolean;
+    eol?: string;
+  }
+
+  /** 自定义渲染规则（仅只读模式生效）。 */
+  export interface CustomRenderRule {
+    match: (value: string, path?: string) => boolean;
+    render: (value: string) => HTMLElement;
+  }
+
+  export type TokenRenderType = 'key' | 'value';
+
+  /** 编辑器配置。 */
+  export interface JsonViewerOptions {
+    /** class 前缀，本库传 'cd-json-viewer'。 */
+    prefixCls?: string;
+    /** 行高 px（默认 20）。 */
+    lineHeight?: number;
+    /** 自动换行（默认 true）。 */
+    autoWrap?: boolean;
+    /** 只读（默认 false）。 */
+    readOnly?: boolean;
+    /** 自定义渲染规则（仅 readOnly 生效）。 */
+    customRenderRule?: CustomRenderRule[];
+    /** 格式化配置。 */
+    formatOptions?: JsonFormatOptions;
+    [key: string]: unknown;
+  }
+
+  /**
+   * JSON 编辑器内核。`new JsonViewer(container, value, options)` 后调用 `layout()` 挂载。
+   */
+  export class JsonViewer {
+    constructor(container: HTMLElement, value: string, options?: JsonViewerOptions);
+    readonly emitter: JsonViewerEmitter;
+    /** 挂载 / 重新布局。 */
+    layout(): void;
+    /** 取模型（getValue 等）。 */
+    getModel(): JsonModel;
+    /** 取搜索控件。 */
+    getSearchWidget(): SearchWidget;
+    /** 格式化当前内容。 */
+    format(): void;
+    /** 销毁实例、释放资源。 */
+    dispose(): void;
+  }
+}

package/dist/layout/Content.svelte

@@ -1,14 +1,13 @@
 <!--
-  Content — main region within Layout. Grows to fill, token-driven background.
+  Content — Layout 内容区（对齐 Semi）。撑满剩余空间；纯布局容器，不附带背景/尺寸样式。
+  语义元素为 <main>；与 Layout 共享 API（class / style / aria-label / role）。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
   interface Props {
-    /** true→token padding; number→px; string→raw; false→0 */
-    padding?: string | number | boolean;
     class?: string;
-    /** 根元素自定义内联样式（透传，叠加在 padding 之后）。 */
+    /** 根元素自定义内联样式（透传）。 */
     style?: string;
     /** 可访问性标签（透传到根元素 aria-label）。 */
     ariaLabel?: string;
@@ -17,35 +16,19 @@
     children?: Snippet;
   }
 
-  let {
-    padding = false,
-    class: className = '',
-    style,
-    ariaLabel,
-    role,
-    children,
-  }: Props = $props();
-
-  const paddingCss = $derived.by(() => {
-    if (padding === true) return 'var(--cd-layout-content-padding)';
-    if (padding === false) return '0';
-    return typeof padding === 'number' ? `${padding}px` : padding;
-  });
+  let { class: className = '', style, ariaLabel, role, children }: Props = $props();
 
   const cls = $derived(['cd-layout-content', className].filter(Boolean).join(' '));
-
-  // padding 派生样式在前，用户 style 在后（可覆盖）。
-  const inlineStyle = $derived([`padding:${paddingCss}`, style ?? ''].filter(Boolean).join(';'));
 </script>
 
-<main class={cls} style={inlineStyle} aria-label={ariaLabel} {role}>
+<main class={cls} {style} aria-label={ariaLabel} {role}>
   {@render children?.()}
 </main>
 
 <style>
   .cd-layout-content {
-    flex: 1;
-    min-height: 0;
-    background: var(--cd-layout-content-bg);
+    flex: auto;
+    min-height: auto;
+    box-sizing: border-box;
   }
 </style>

package/dist/layout/Content.svelte.d.ts

@@ -1,9 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    /** true→token padding; number→px; string→raw; false→0 */
-    padding?: string | number | boolean;
     class?: string;
-    /** 根元素自定义内联样式（透传，叠加在 padding 之后）。 */
+    /** 根元素自定义内联样式（透传）。 */
     style?: string;
     /** 可访问性标签（透传到根元素 aria-label）。 */
     ariaLabel?: string;

package/dist/layout/Content.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Content.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmCH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Content.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmBH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/layout/Footer.svelte

@@ -1,15 +1,13 @@
 <!--
-  Footer — bottom bar within Layout. Token-driven background/color.
+  Footer — Layout 底部区（对齐 Semi）。纯布局容器，不附带背景/尺寸样式，按需自定义。
+  与 Layout 共享 API（class / style / aria-label / role）。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
   interface Props {
-    sticky?: boolean;
-    /** override height; number→px, string→raw */
-    height?: string | number;
     class?: string;
-    /** 根元素自定义内联样式（透传，叠加在 height 之后）。 */
+    /** 根元素自定义内联样式（透传）。 */
     style?: string;
     /** 可访问性标签（透传到根元素 aria-label）。 */
     ariaLabel?: string;
@@ -18,49 +16,18 @@
     children?: Snippet;
   }
 
-  let {
-    sticky = false,
-    height,
-    class: className = '',
-    style,
-    ariaLabel,
-    role,
-    children,
-  }: Props = $props();
+  let { class: className = '', style, ariaLabel, role, children }: Props = $props();
 
-  const heightCss = $derived.by(() => {
-    if (height === undefined) return undefined;
-    return typeof height === 'number' ? `${height}px` : height;
-  });
-
-  const cls = $derived(
-    ['cd-layout-footer', sticky && 'cd-layout-footer--sticky', className].filter(Boolean).join(' '),
-  );
-
-  // height 派生样式在前，用户 style 在后（可覆盖）。
-  const inlineStyle = $derived(
-    [heightCss ? `height:${heightCss}` : '', style ?? ''].filter(Boolean).join(';') || undefined,
-  );
+  const cls = $derived(['cd-layout-footer', className].filter(Boolean).join(' '));
 </script>
 
-<footer class={cls} style={inlineStyle} aria-label={ariaLabel} {role}>
+<footer class={cls} {style} aria-label={ariaLabel} {role}>
   {@render children?.()}
 </footer>
 
 <style>
   .cd-layout-footer {
-    display: flex;
     flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    padding-block: var(--cd-spacing-base);
-    padding-inline: var(--cd-spacing-loose);
-    background: var(--cd-layout-footer-bg);
-    color: var(--cd-layout-footer-color);
-    text-align: center;
-  }
-  .cd-layout-footer--sticky {
-    position: sticky;
-    inset-block-end: 0;
+    box-sizing: border-box;
   }
 </style>

package/dist/layout/Footer.svelte.d.ts

@@ -1,10 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    sticky?: boolean;
-    /** override height; number→px, string→raw */
-    height?: string | number;
     class?: string;
-    /** 根元素自定义内联样式（透传，叠加在 height 之后）。 */
+    /** 根元素自定义内联样式（透传）。 */
     style?: string;
     /** 可访问性标签（透传到根元素 aria-label）。 */
     ariaLabel?: string;

package/dist/layout/Footer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Footer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuCH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Footer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmBH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/layout/Header.svelte

@@ -1,15 +1,13 @@
 <!--
-  Header — top bar within Layout. Token-driven background/height.
+  Header — Layout 顶部区（对齐 Semi）。纯布局容器，不附带背景/尺寸样式，按需自定义。
+  与 Layout 共享 API（class / style / aria-label / role）。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
   interface Props {
-    sticky?: boolean;
-    /** override token height; number→px, string→raw */
-    height?: string | number;
     class?: string;
-    /** 根元素自定义内联样式（透传，叠加在 height 之后）。 */
+    /** 根元素自定义内联样式（透传）。 */
     style?: string;
     /** 可访问性标签（透传到根元素 aria-label）。 */
     ariaLabel?: string;
@@ -18,46 +16,18 @@
     children?: Snippet;
   }
 
-  let {
-    sticky = false,
-    height,
-    class: className = '',
-    style,
-    ariaLabel,
-    role,
-    children,
-  }: Props = $props();
+  let { class: className = '', style, ariaLabel, role, children }: Props = $props();
 
-  const heightCss = $derived.by(() => {
-    if (height === undefined) return undefined;
-    return typeof height === 'number' ? `${height}px` : height;
-  });
-
-  const cls = $derived(
-    ['cd-layout-header', sticky && 'cd-layout-header--sticky', className].filter(Boolean).join(' '),
-  );
-
-  // height 派生样式在前，用户 style 在后（可覆盖）。
-  const inlineStyle = $derived(
-    [heightCss ? `height:${heightCss}` : '', style ?? ''].filter(Boolean).join(';') || undefined,
-  );
+  const cls = $derived(['cd-layout-header', className].filter(Boolean).join(' '));
 </script>
 
-<header class={cls} style={inlineStyle} aria-label={ariaLabel} {role}>
+<header class={cls} {style} aria-label={ariaLabel} {role}>
   {@render children?.()}
 </header>
 
 <style>
   .cd-layout-header {
-    display: flex;
     flex: 0 0 auto;
-    align-items: center;
-    height: var(--cd-layout-header-height);
-    background: var(--cd-layout-header-bg);
-  }
-  .cd-layout-header--sticky {
-    position: sticky;
-    inset-block-start: 0;
-    z-index: var(--cd-layout-header-z);
+    box-sizing: border-box;
   }
 </style>

package/dist/layout/Header.svelte.d.ts

@@ -1,10 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    sticky?: boolean;
-    /** override token height; number→px, string→raw */
-    height?: string | number;
     class?: string;
-    /** 根元素自定义内联样式（透传，叠加在 height 之后）。 */
+    /** 根元素自定义内联样式（透传）。 */
     style?: string;
     /** 可访问性标签（透传到根元素 aria-label）。 */
     ariaLabel?: string;

package/dist/layout/Header.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Header.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuCH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Header.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmBH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}