@chenzy-design/svelte 0.1.0

package/dist/layout/Layout.svelte

@@ -0,0 +1,60 @@
+<!--
+  Layout — root flex container. Column by default; row when a Sider is present.
+  Sider auto-detection: Sider registers itself via context on mount, flipping the
+  direction to row. Explicit `hasSider` always wins.
+  NOTE: child onMount runs after the parent, so SSR/first frame may render column
+  then switch to row. For SSR correctness pass `hasSider` explicitly.
+-->
+<script lang="ts" module>
+  export const LAYOUT_CONTEXT_KEY = Symbol('cd-layout');
+
+  export interface LayoutContext {
+    registerSider: () => void;
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { setContext } from 'svelte';
+
+  interface Props {
+    hasSider?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { hasSider, class: className = '', children }: Props = $props();
+
+  let hasSiderDetected = $state(false);
+
+  setContext<LayoutContext>(LAYOUT_CONTEXT_KEY, {
+    registerSider: () => {
+      hasSiderDetected = true;
+    },
+  });
+
+  const isRow = $derived(hasSider ?? hasSiderDetected);
+
+  const cls = $derived(
+    ['cd-layout', isRow ? 'cd-layout--has-sider' : 'cd-layout--column', className]
+      .filter(Boolean)
+      .join(' '),
+  );
+</script>
+
+<section class={cls}>
+  {@render children?.()}
+</section>
+
+<style>
+  .cd-layout {
+    display: flex;
+    flex: auto;
+    flex-direction: column;
+    min-height: 0;
+    background: var(--cd-layout-bg);
+  }
+  .cd-layout--has-sider {
+    flex-direction: row;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+export declare const LAYOUT_CONTEXT_KEY: unique symbol;
+export interface LayoutContext {
+    registerSider: () => void;
+}
+import type { Snippet } from 'svelte';
+interface Props {
+    hasSider?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const Layout: import("svelte").Component<Props, {}, "">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;
+//# sourceMappingURL=Layout.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Layout.svelte.ts"],"names":[],"mappings":"AAGE,eAAO,MAAM,kBAAkB,eAAsB,CAAC;AAEtD,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/layout/LayoutA11yFixture.svelte

@@ -0,0 +1,21 @@
+<!--
+  仅供 Layout.a11y.test.ts 使用的测试夹具：Layout 根 + Header/Sider/Content/Footer。
+  Sider collapsible 渲染原生 button 触发器（aria-expanded/aria-controls/aria-label）。
+-->
+<script lang="ts">
+  import { Layout } from './index.js';
+
+  interface Props {
+    collapsible?: boolean;
+  }
+  let { collapsible = false }: Props = $props();
+</script>
+
+<Layout hasSider>
+  <Layout.Sider {collapsible}>Navigation</Layout.Sider>
+  <Layout>
+    <Layout.Header>Page header</Layout.Header>
+    <Layout.Content padding>Main content</Layout.Content>
+    <Layout.Footer>Page footer</Layout.Footer>
+  </Layout>
+</Layout>

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

@@ -0,0 +1,7 @@
+interface Props {
+    collapsible?: boolean;
+}
+declare const LayoutA11yFixture: import("svelte").Component<Props, {}, "">;
+type LayoutA11yFixture = ReturnType<typeof LayoutA11yFixture>;
+export default LayoutA11yFixture;
+//# sourceMappingURL=LayoutA11yFixture.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutA11yFixture.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/LayoutA11yFixture.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAmBH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/layout/Sider.svelte

@@ -0,0 +1,207 @@
+<!--
+  Sider — collapsible side panel. Backed by headless createSider from core.
+  Registers with Layout (context) so Layout switches to row direction.
+  aria-label 文案经 useLocale 取自 locale 包（Sider.expand/collapse）。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getContext, onMount, untrack } from 'svelte';
+  import {
+    createSider,
+    type Breakpoint,
+    type SiderOptions,
+    type SiderTrigger,
+  } from '@chenzy-design/core';
+  import { LAYOUT_CONTEXT_KEY, type LayoutContext } from './Layout.svelte';
+  import { useLocale } from '../locale-provider/index.js';
+
+  interface Props {
+    /** controlled collapsed value */
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    collapsible?: boolean;
+    width?: string | number;
+    collapsedWidth?: string | number;
+    breakpoint?: Breakpoint;
+    reverseArrow?: boolean;
+    placement?: 'left' | 'right';
+    class?: string;
+    onCollapse?: (collapsed: boolean, trigger: SiderTrigger) => void;
+    children?: Snippet;
+    /** custom trigger; receives current collapsed + toggle */
+    trigger?: Snippet<[{ collapsed: boolean; toggle: () => void }]>;
+  }
+
+  let {
+    collapsed,
+    defaultCollapsed = false,
+    collapsible = false,
+    width = 200,
+    collapsedWidth = 60,
+    breakpoint,
+    reverseArrow = false,
+    placement = 'left',
+    class: className = '',
+    onCollapse,
+    children,
+    trigger,
+  }: Props = $props();
+
+  const loc = useLocale();
+
+  const layout = getContext<LayoutContext | undefined>(LAYOUT_CONTEXT_KEY);
+
+  // Headless machine is created once with the initial prop values; later changes
+  // to the controlled `collapsed` prop are applied via the $derived below.
+  // untrack documents that we intentionally capture only the initial values here.
+  const sider = untrack(() => {
+    // Build options conditionally — exactOptionalPropertyTypes forbids passing
+    // `undefined` for optional props typed without `| undefined`.
+    const options: SiderOptions = {
+      defaultCollapsed,
+      onChange: (value, t) => onCollapse?.(value, t),
+    };
+    if (collapsed !== undefined) options.collapsed = collapsed;
+    if (breakpoint !== undefined) options.breakpoint = breakpoint;
+    return createSider(options);
+  });
+
+  // Tracks the headless machine's uncontrolled collapsed state.
+  let internalCollapsed = $state(sider.getCollapsed());
+
+  // Controlled `collapsed` prop always wins over the internal value.
+  const collapsedState = $derived(collapsed ?? internalCollapsed);
+
+  // Notify Layout once so it switches to row direction.
+  onMount(() => {
+    layout?.registerSider();
+  });
+
+  // Bridge the headless subscription/breakpoint watcher into Svelte reactivity.
+  // This is the intended escape-hatch use of $effect: syncing an external store.
+  $effect(() => {
+    const unsubscribe = sider.subscribe((value) => {
+      internalCollapsed = value;
+    });
+    const stopWatch = sider.watchBreakpoint();
+    return () => {
+      unsubscribe();
+      stopWatch();
+    };
+  });
+
+  function toggle(): void {
+    sider.toggle();
+  }
+
+  function toCss(value: string | number): string {
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  const widthCss = $derived(collapsedState ? toCss(collapsedWidth) : toCss(width));
+
+  const isCollapsedToZero = $derived(
+    collapsedState && (collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px'),
+  );
+
+  const cls = $derived(
+    [
+      'cd-layout-sider',
+      `cd-layout-sider--${placement}`,
+      collapsedState && 'cd-layout-sider--collapsed',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  const inlineStyle = $derived(`flex: 0 0 ${widthCss}; width: ${widthCss}; max-width: ${widthCss}`);
+
+  // Arrow direction: point "outward" to expand, "inward" to collapse.
+  // placement + reverseArrow flip which glyph means which.
+  const pointsStart = $derived.by(() => {
+    const base = placement === 'left' ? collapsedState : !collapsedState;
+    return reverseArrow ? !base : base;
+  });
+</script>
+
+<aside class={cls} style={inlineStyle}>
+  <div
+    id={sider.id}
+    class="cd-layout-sider__children"
+    aria-hidden={isCollapsedToZero || undefined}
+  >
+    {@render children?.()}
+  </div>
+
+  {#if trigger}
+    {@render trigger({ collapsed: collapsedState, toggle })}
+  {:else if collapsible}
+    <button
+      type="button"
+      class="cd-layout-sider__trigger"
+      aria-expanded={!collapsedState}
+      aria-controls={sider.id}
+      aria-label={collapsedState ? loc().t('Sider.expand') : loc().t('Sider.collapse')}
+      onclick={toggle}
+    >
+      <span class="cd-layout-sider__arrow" aria-hidden="true">{pointsStart ? '‹' : '›'}</span>
+    </button>
+  {/if}
+</aside>
+
+<style>
+  .cd-layout-sider {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    background: var(--cd-layout-sider-bg);
+    transition:
+      flex-basis var(--cd-layout-motion-duration) var(--cd-layout-motion-ease),
+      width var(--cd-layout-motion-duration) var(--cd-layout-motion-ease),
+      max-width var(--cd-layout-motion-duration) var(--cd-layout-motion-ease);
+  }
+  .cd-layout-sider--left {
+    border-inline-end: var(--cd-layout-sider-border);
+  }
+  .cd-layout-sider--right {
+    border-inline-start: var(--cd-layout-sider-border);
+  }
+  .cd-layout-sider__children {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .cd-layout-sider__trigger {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    height: var(--cd-layout-header-height);
+    padding: 0;
+    border: none;
+    background: var(--cd-layout-sider-trigger-bg);
+    color: var(--cd-layout-sider-trigger-color);
+    cursor: pointer;
+    transition: background-color var(--cd-layout-motion-duration) var(--cd-layout-motion-ease);
+  }
+  .cd-layout-sider__trigger:hover {
+    background: var(--cd-layout-sider-trigger-hover-bg);
+  }
+  .cd-layout-sider__trigger:focus-visible {
+    outline: none;
+    box-shadow: var(--cd-focus-ring);
+  }
+  .cd-layout-sider__arrow {
+    display: inline-flex;
+    font-size: var(--cd-font-size-3);
+    line-height: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cd-layout-sider,
+    .cd-layout-sider__trigger {
+      transition: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import { type Breakpoint, type SiderTrigger } from '@chenzy-design/core';
+interface Props {
+    /** controlled collapsed value */
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    collapsible?: boolean;
+    width?: string | number;
+    collapsedWidth?: string | number;
+    breakpoint?: Breakpoint;
+    reverseArrow?: boolean;
+    placement?: 'left' | 'right';
+    class?: string;
+    onCollapse?: (collapsed: boolean, trigger: SiderTrigger) => void;
+    children?: Snippet;
+    /** custom trigger; receives current collapsed + toggle */
+    trigger?: Snippet<[{
+        collapsed: boolean;
+        toggle: () => void;
+    }]>;
+}
+declare const Sider: import("svelte").Component<Props, {}, "">;
+type Sider = ReturnType<typeof Sider>;
+export default Sider;
+//# sourceMappingURL=Sider.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sider.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Sider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAEH,KAAK,UAAU,EAEf,KAAK,YAAY,EAClB,MAAM,qBAAqB,CAAC;AAK7B,UAAU,KAAK;IACb,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;CACjE;AAyHH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/layout/index.d.ts

@@ -0,0 +1,19 @@
+import LayoutRoot from './Layout.svelte';
+import Header from './Header.svelte';
+import Footer from './Footer.svelte';
+import Content from './Content.svelte';
+import Sider from './Sider.svelte';
+/** Named exports (also usable directly). */
+export { Header as LayoutHeader, Footer as LayoutFooter, Content as LayoutContent, Sider as LayoutSider, };
+/**
+ * Aggregated namespace export: enables <Layout.Header /> etc.
+ * Explicit type annotation avoids leaking component Props type errors.
+ */
+export declare const Layout: typeof LayoutRoot & {
+    Header: typeof Header;
+    Footer: typeof Footer;
+    Content: typeof Content;
+    Sider: typeof Sider;
+};
+export { meta as layoutMeta } from './meta.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,OAAO,MAAM,kBAAkB,CAAC;AACvC,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAEnC,4CAA4C;AAC5C,OAAO,EACL,MAAM,IAAI,YAAY,EACtB,MAAM,IAAI,YAAY,EACtB,OAAO,IAAI,aAAa,EACxB,KAAK,IAAI,WAAW,GACrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,OAAO,UAAU,GAAG;IACvC,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;CAC2C,CAAC;AAElE,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,WAAW,CAAC"}

package/dist/layout/index.js

@@ -0,0 +1,13 @@
+import LayoutRoot from './Layout.svelte';
+import Header from './Header.svelte';
+import Footer from './Footer.svelte';
+import Content from './Content.svelte';
+import Sider from './Sider.svelte';
+/** Named exports (also usable directly). */
+export { Header as LayoutHeader, Footer as LayoutFooter, Content as LayoutContent, Sider as LayoutSider, };
+/**
+ * Aggregated namespace export: enables <Layout.Header /> etc.
+ * Explicit type annotation avoids leaking component Props type errors.
+ */
+export const Layout = Object.assign(LayoutRoot, { Header, Footer, Content, Sider });
+export { meta as layoutMeta } from './meta.js';

package/dist/layout/meta.d.ts

@@ -0,0 +1,150 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * Aggregated metadata for the Layout family (root + Header/Sider/Content/Footer).
+ */
+export declare const meta: {
+    readonly name: "Layout";
+    readonly category: "basic";
+    readonly description: "页面级布局骨架：Layout 根容器 + Header / Sider / Content / Footer 子组件。";
+    readonly subComponents: readonly [{
+        readonly name: "Layout";
+        readonly element: "section";
+        readonly props: readonly [{
+            readonly name: "hasSider";
+            readonly type: "boolean";
+            readonly default: "undefined";
+            readonly desc: "显式声明含侧边栏→row 方向；不传则由 Sider 挂载时自动检测";
+        }, {
+            readonly name: "class";
+            readonly type: "string";
+            readonly default: "''";
+        }];
+    }, {
+        readonly name: "Layout.Header";
+        readonly element: "header";
+        readonly props: readonly [{
+            readonly name: "sticky";
+            readonly type: "boolean";
+            readonly default: "false";
+            readonly desc: "position:sticky top:0";
+        }, {
+            readonly name: "height";
+            readonly type: "string|number";
+            readonly default: "undefined";
+            readonly desc: "number→px，覆盖 token 高度";
+        }, {
+            readonly name: "class";
+            readonly type: "string";
+            readonly default: "''";
+        }];
+    }, {
+        readonly name: "Layout.Footer";
+        readonly element: "footer";
+        readonly props: readonly [{
+            readonly name: "sticky";
+            readonly type: "boolean";
+            readonly default: "false";
+            readonly desc: "position:sticky bottom:0";
+        }, {
+            readonly name: "height";
+            readonly type: "string|number";
+            readonly default: "undefined";
+        }, {
+            readonly name: "class";
+            readonly type: "string";
+            readonly default: "''";
+        }];
+    }, {
+        readonly name: "Layout.Content";
+        readonly element: "main";
+        readonly props: readonly [{
+            readonly name: "padding";
+            readonly type: "string|number|boolean";
+            readonly default: "false";
+            readonly desc: "true→token padding；number→px；string→原样；false→0";
+        }, {
+            readonly name: "class";
+            readonly type: "string";
+            readonly default: "''";
+        }];
+    }, {
+        readonly name: "Layout.Sider";
+        readonly element: "aside";
+        readonly props: readonly [{
+            readonly name: "collapsed";
+            readonly type: "boolean";
+            readonly default: "undefined";
+            readonly desc: "受控收起状态";
+        }, {
+            readonly name: "defaultCollapsed";
+            readonly type: "boolean";
+            readonly default: "false";
+        }, {
+            readonly name: "collapsible";
+            readonly type: "boolean";
+            readonly default: "false";
+            readonly desc: "true→渲染默认触发器";
+        }, {
+            readonly name: "width";
+            readonly type: "string|number";
+            readonly default: "200";
+            readonly desc: "number→px";
+        }, {
+            readonly name: "collapsedWidth";
+            readonly type: "string|number";
+            readonly default: "60";
+            readonly desc: "0 时收起隐藏内容";
+        }, {
+            readonly name: "breakpoint";
+            readonly type: "'xs'|'sm'|'md'|'lg'|'xl'|'xxl'";
+            readonly default: "undefined";
+            readonly desc: "低于断点自动收起";
+        }, {
+            readonly name: "reverseArrow";
+            readonly type: "boolean";
+            readonly default: "false";
+            readonly desc: "反转触发器箭头方向";
+        }, {
+            readonly name: "placement";
+            readonly type: "'left'|'right'";
+            readonly default: "'left'";
+        }, {
+            readonly name: "class";
+            readonly type: "string";
+            readonly default: "''";
+        }, {
+            readonly name: "onCollapse";
+            readonly type: "(collapsed, trigger:'click'|'breakpoint')=>void";
+            readonly default: "undefined";
+        }, {
+            readonly name: "trigger";
+            readonly type: "Snippet<[{collapsed,toggle}]>";
+            readonly default: "undefined";
+            readonly desc: "自定义触发器";
+        }];
+    }];
+    readonly events: readonly [{
+        readonly name: "onCollapse";
+        readonly desc: "Sider 收起状态变化，第二参数区分 click / breakpoint 触发来源";
+    }];
+    readonly slots: readonly [{
+        readonly name: "children";
+        readonly desc: "各子组件内容";
+    }, {
+        readonly name: "trigger";
+        readonly desc: "Sider 自定义触发器，接收 {collapsed, toggle}";
+    }];
+    readonly a11y: {
+        readonly hasRole: false;
+        readonly focusable: false;
+        readonly sider: "Sider 触发器为原生 button，含 aria-expanded / aria-controls / aria-label；collapsedWidth=0 时内容 aria-hidden";
+        readonly note: "reduced-motion 下移除 Sider 过渡";
+    };
+    readonly tokens: readonly ["--cd-layout-bg", "--cd-layout-header-bg", "--cd-layout-header-height", "--cd-layout-header-z", "--cd-layout-footer-bg", "--cd-layout-footer-color", "--cd-layout-content-bg", "--cd-layout-content-padding", "--cd-layout-sider-bg", "--cd-layout-sider-width", "--cd-layout-sider-collapsed-width", "--cd-layout-sider-border", "--cd-layout-sider-trigger-bg", "--cd-layout-sider-trigger-color", "--cd-layout-sider-trigger-hover-bg", "--cd-layout-motion-duration", "--cd-layout-motion-ease"];
+    readonly aiHints: readonly ["SSR/首屏含侧边栏时显式传 hasSider，避免 column→row 闪动。", "Sider 受控用 collapsed + onCollapse；非受控用 defaultCollapsed。", "需要响应式自动收起时传 breakpoint。", "Layout.Header / Layout.Sider 等命名空间用法与具名 LayoutHeader 等价。"];
+    readonly examples: readonly [{
+        readonly title: "经典后台布局";
+        readonly code: "<Layout hasSider><Layout.Sider collapsible /><Layout><Layout.Header /><Layout.Content padding>内容</Layout.Content><Layout.Footer>底部</Layout.Footer></Layout></Layout>";
+    }];
+};
+//# sourceMappingURL=meta.d.ts.map

package/dist/layout/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/layout/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GP,CAAC"}

package/dist/layout/meta.js

@@ -0,0 +1,116 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * Aggregated metadata for the Layout family (root + Header/Sider/Content/Footer).
+ */
+export const meta = {
+    name: 'Layout',
+    category: 'basic',
+    description: '页面级布局骨架：Layout 根容器 + Header / Sider / Content / Footer 子组件。',
+    subComponents: [
+        {
+            name: 'Layout',
+            element: 'section',
+            props: [
+                {
+                    name: 'hasSider',
+                    type: 'boolean',
+                    default: 'undefined',
+                    desc: '显式声明含侧边栏→row 方向；不传则由 Sider 挂载时自动检测',
+                },
+                { name: 'class', type: 'string', default: "''" },
+            ],
+        },
+        {
+            name: 'Layout.Header',
+            element: 'header',
+            props: [
+                { name: 'sticky', type: 'boolean', default: 'false', desc: 'position:sticky top:0' },
+                { name: 'height', type: 'string|number', default: 'undefined', desc: 'number→px，覆盖 token 高度' },
+                { name: 'class', type: 'string', default: "''" },
+            ],
+        },
+        {
+            name: 'Layout.Footer',
+            element: 'footer',
+            props: [
+                { name: 'sticky', type: 'boolean', default: 'false', desc: 'position:sticky bottom:0' },
+                { name: 'height', type: 'string|number', default: 'undefined' },
+                { name: 'class', type: 'string', default: "''" },
+            ],
+        },
+        {
+            name: 'Layout.Content',
+            element: 'main',
+            props: [
+                {
+                    name: 'padding',
+                    type: 'string|number|boolean',
+                    default: 'false',
+                    desc: 'true→token padding；number→px；string→原样；false→0',
+                },
+                { name: 'class', type: 'string', default: "''" },
+            ],
+        },
+        {
+            name: 'Layout.Sider',
+            element: 'aside',
+            props: [
+                { name: 'collapsed', type: 'boolean', default: 'undefined', desc: '受控收起状态' },
+                { name: 'defaultCollapsed', type: 'boolean', default: 'false' },
+                { name: 'collapsible', type: 'boolean', default: 'false', desc: 'true→渲染默认触发器' },
+                { name: 'width', type: 'string|number', default: '200', desc: 'number→px' },
+                { name: 'collapsedWidth', type: 'string|number', default: '60', desc: '0 时收起隐藏内容' },
+                { name: 'breakpoint', type: "'xs'|'sm'|'md'|'lg'|'xl'|'xxl'", default: 'undefined', desc: '低于断点自动收起' },
+                { name: 'reverseArrow', type: 'boolean', default: 'false', desc: '反转触发器箭头方向' },
+                { name: 'placement', type: "'left'|'right'", default: "'left'" },
+                { name: 'class', type: 'string', default: "''" },
+                { name: 'onCollapse', type: "(collapsed, trigger:'click'|'breakpoint')=>void", default: 'undefined' },
+                { name: 'trigger', type: 'Snippet<[{collapsed,toggle}]>', default: 'undefined', desc: '自定义触发器' },
+            ],
+        },
+    ],
+    events: [
+        { name: 'onCollapse', desc: 'Sider 收起状态变化，第二参数区分 click / breakpoint 触发来源' },
+    ],
+    slots: [
+        { name: 'children', desc: '各子组件内容' },
+        { name: 'trigger', desc: 'Sider 自定义触发器，接收 {collapsed, toggle}' },
+    ],
+    a11y: {
+        hasRole: false,
+        focusable: false,
+        sider: 'Sider 触发器为原生 button，含 aria-expanded / aria-controls / aria-label；collapsedWidth=0 时内容 aria-hidden',
+        note: 'reduced-motion 下移除 Sider 过渡',
+    },
+    tokens: [
+        '--cd-layout-bg',
+        '--cd-layout-header-bg',
+        '--cd-layout-header-height',
+        '--cd-layout-header-z',
+        '--cd-layout-footer-bg',
+        '--cd-layout-footer-color',
+        '--cd-layout-content-bg',
+        '--cd-layout-content-padding',
+        '--cd-layout-sider-bg',
+        '--cd-layout-sider-width',
+        '--cd-layout-sider-collapsed-width',
+        '--cd-layout-sider-border',
+        '--cd-layout-sider-trigger-bg',
+        '--cd-layout-sider-trigger-color',
+        '--cd-layout-sider-trigger-hover-bg',
+        '--cd-layout-motion-duration',
+        '--cd-layout-motion-ease',
+    ],
+    aiHints: [
+        'SSR/首屏含侧边栏时显式传 hasSider，避免 column→row 闪动。',
+        'Sider 受控用 collapsed + onCollapse；非受控用 defaultCollapsed。',
+        '需要响应式自动收起时传 breakpoint。',
+        'Layout.Header / Layout.Sider 等命名空间用法与具名 LayoutHeader 等价。',
+    ],
+    examples: [
+        {
+            title: '经典后台布局',
+            code: '<Layout hasSider><Layout.Sider collapsible /><Layout><Layout.Header /><Layout.Content padding>内容</Layout.Content><Layout.Footer>底部</Layout.Footer></Layout></Layout>',
+        },
+    ],
+};

package/dist/list/List.a11y.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=List.a11y.test.d.ts.map

package/dist/list/List.a11y.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.a11y.test.d.ts","sourceRoot":"","sources":["../../src/list/List.a11y.test.ts"],"names":[],"mappings":""}