@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/layout/Layout.svelte

@@ -1,23 +1,26 @@
 <!--
-  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.
+  Layout — 布局容器（对齐 Semi）。默认 column 方向；存在 Sider 时切换为 row。
+  纯布局容器：不附带背景色、文本色、宽高等样式，按需通过 style / class 自定义。
+  Sider 自动检测：Sider 挂载时经 context 注册，翻转方向为 row；显式 hasSider 始终优先。
+  注意：子组件 onMount 在父之后执行，SSR/首帧可能先 column 再切 row；
+  SSR 正确性请显式传 hasSider。
 -->
 <script lang="ts" module>
   export const LAYOUT_CONTEXT_KEY = Symbol('cd-layout');
 
   export interface LayoutContext {
-    registerSider: () => void;
+    addSider: (id: string) => void;
+    removeSider: (id: string) => void;
   }
 </script>
 
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { setContext } from 'svelte';
+  import { SvelteSet } from 'svelte/reactivity';
 
   interface Props {
+    /** 显式声明含侧边栏 → row 方向；一般不用指定，可用于 SSR 避免样式闪动。 */
     hasSider?: boolean;
     class?: string;
     /** 根元素自定义内联样式（透传）。Layout 不附带背景/尺寸样式，按需自定义。 */
@@ -38,20 +41,20 @@
     children,
   }: Props = $props();
 
-  let hasSiderDetected = $state(false);
+  // 已注册的 Sider id 集合，对齐 Semi 的 siders 数组。
+  // SvelteSet：普通 Set 的 .add()/.delete() 不触发 Svelte 5 响应式，siders.size 派生不更新
+  // 会导致 has-sider class 加不上、Sider 方向不翻转（真机才暴露）。
+  const siders = new SvelteSet<string>();
 
   setContext<LayoutContext>(LAYOUT_CONTEXT_KEY, {
-    registerSider: () => {
-      hasSiderDetected = true;
-    },
+    addSider: (id) => siders.add(id),
+    removeSider: (id) => siders.delete(id),
   });
 
-  const isRow = $derived(hasSider ?? hasSiderDetected);
+  const isRow = $derived(typeof hasSider === 'boolean' ? hasSider : siders.size > 0);
 
   const cls = $derived(
-    ['cd-layout', isRow ? 'cd-layout--has-sider' : 'cd-layout--column', className]
-      .filter(Boolean)
-      .join(' '),
+    ['cd-layout', isRow && 'cd-layout-has-sider', className].filter(Boolean).join(' '),
   );
 </script>
 
@@ -64,10 +67,20 @@
     display: flex;
     flex: auto;
     flex-direction: column;
-    min-height: 0;
-    background: var(--cd-layout-bg);
+    min-height: auto;
+    box-sizing: border-box;
   }
-  .cd-layout--has-sider {
+  .cd-layout-has-sider {
     flex-direction: row;
   }
+  /* 内层 Layout / Content 在 has-sider 行内裁掉横向溢出（对齐 Semi）。 */
+  .cd-layout-has-sider > :global(.cd-layout),
+  .cd-layout-has-sider > :global(.cd-layout-content) {
+    overflow-x: hidden;
+  }
+  /* RTL */
+  :global(.cd-rtl) .cd-layout,
+  :global(.cd-portal-rtl) .cd-layout {
+    direction: rtl;
+  }
 </style>

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

@@ -1,9 +1,11 @@
 export declare const LAYOUT_CONTEXT_KEY: unique symbol;
 export interface LayoutContext {
-    registerSider: () => void;
+    addSider: (id: string) => void;
+    removeSider: (id: string) => void;
 }
 import type { Snippet } from 'svelte';
 interface Props {
+    /** 显式声明含侧边栏 → row 方向；一般不用指定，可用于 SSR 避免样式闪动。 */
     hasSider?: boolean;
     class?: string;
     /** 根元素自定义内联样式（透传）。Layout 不附带背景/尺寸样式，按需自定义。 */

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

@@ -1 +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,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2CH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"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,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4CH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/layout/Sider.svelte

@@ -1,232 +1,117 @@
 <!--
-  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）。
+  Sider — Layout 侧边栏（对齐 Semi）。纯布局容器，不附带背景/尺寸样式，按需自定义。
+  挂载时经 context 向 Layout 注册（使 Layout 切换为 row 方向），卸载时注销。
+  breakpoint：可传 responsiveMap 的键数组（xs/sm/md/lg/xl/xxl），命中/解除断点时回调 onBreakpoint。
+  DOM 结构：<aside class="cd-layout-sider"><div class="cd-layout-sider-children">…</div></aside>
 -->
+<script lang="ts" module>
+  /** 六档响应断点（对齐 Semi）。注意 xs 为 max-width，其余为 min-width。 */
+  export const responsiveMap = {
+    xs: '(max-width: 575px)',
+    sm: '(min-width: 576px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 992px)',
+    xl: '(min-width: 1200px)',
+    xxl: '(min-width: 1600px)',
+  } as const;
+
+  export type Breakpoint = keyof typeof responsiveMap;
+
+  let uid = 0;
+
+  /** 注册一个 media query，命中/解除时回调（对齐 Semi registerMediaQuery，callInInit=true）。 */
+  function registerMediaQuery(
+    media: string,
+    match: () => void,
+    unmatch: () => void,
+  ): () => void {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return () => undefined;
+    }
+    const mql = window.matchMedia(media);
+    const handler = (e: MediaQueryList | MediaQueryListEvent): void => {
+      if (e.matches) match();
+      else unmatch();
+    };
+    handler(mql);
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }
+</script>
+
 <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 { getContext, onMount } from 'svelte';
   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';
+    /** 触发响应式布局的断点，可选值 xs/sm/md/lg/xl/xxl。 */
+    breakpoint?: Breakpoint[];
+    /** 触发响应式布局断点时的回调 (screen, matched)。 */
+    onBreakpoint?: (screen: Breakpoint, matched: boolean) => void;
     class?: string;
-    /** 根元素自定义内联样式（透传，叠加在宽度样式之后）。 */
+    /** 根元素自定义内联样式（透传）。 */
     style?: string;
     /** 可访问性标签（透传到 aside 的 aria-label，描述该 Sider 作用）。 */
     ariaLabel?: string;
     /** 可访问性 role（透传到根元素）。 */
     role?: string;
-    onCollapse?: (collapsed: boolean, trigger: SiderTrigger) => void;
-    /** 触发响应式断点时的回调（matched=是否命中 max-width 断点）。 */
-    onBreakpoint?: (matched: boolean, breakpoint: Breakpoint) => 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',
+    onBreakpoint,
     class: className = '',
     style,
     ariaLabel,
     role,
-    onCollapse,
-    onBreakpoint,
     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),
-      onBreakpoint: (matched, bp) => onBreakpoint?.(matched, bp),
-    };
-    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());
+  // eslint-disable-next-line no-plusplus
+  const uniqueId = `cd-layout-sider-${++uid}`;
 
-  // 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();
-  });
+    layout?.addSider(uniqueId);
+
+    const bpts = (breakpoint ?? []).filter((s): s is Breakpoint => s in responsiveMap);
+    const unregisters = bpts.map((screen) =>
+      registerMediaQuery(
+        responsiveMap[screen],
+        () => onBreakpoint?.(screen, true),
+        () => onBreakpoint?.(screen, false),
+      ),
+    );
 
-  // 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();
+      unregisters.forEach((un) => un());
+      layout?.removeSider(uniqueId);
     };
   });
 
-  function toggle(): void {
-    // 受控模式：headless 在构造时捕获了初始 collapsed，其 current() 是陈旧值，
-    // 直接 sider.toggle() 会一直按初值翻转。故用 Svelte 侧 live 的 collapsedState
-    // 计算目标并 setCollapsed（仅触发 onChange，受控不自改）。非受控走 headless toggle。
-    if (collapsed !== undefined) {
-      sider.setCollapsed(!collapsedState, 'click');
-    } else {
-      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(' '),
-  );
-
-  // 宽度派生样式在前，用户 style 在后（可覆盖）。
-  const inlineStyle = $derived(
-    [`flex: 0 0 ${widthCss}; width: ${widthCss}; max-width: ${widthCss}`, style ?? '']
-      .filter(Boolean)
-      .join('; '),
-  );
-
-  // 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;
-  });
+  const cls = $derived(['cd-layout-sider', className].filter(Boolean).join(' '));
 </script>
 
-<aside class={cls} style={inlineStyle} aria-label={ariaLabel} {role}>
-  <div
-    id={sider.id}
-    class="cd-layout-sider__children"
-    aria-hidden={isCollapsedToZero || undefined}
-  >
+<aside class={cls} {style} aria-label={ariaLabel} {role}>
+  <div class="cd-layout-sider-children">
     {@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);
+    min-width: auto;
+    box-sizing: border-box;
   }
-  .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-header-6);
-    line-height: 1;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-layout-sider,
-    .cd-layout-sider__trigger {
-      transition: none;
-    }
+  .cd-layout-sider-children {
+    height: 100%;
+    /* 对齐 Semi：抵消子内容 margin 折叠导致的高度偏差。 */
+    margin-top: -0.1px;
+    padding-top: 0.1px;
+    box-sizing: border-box;
   }
 </style>

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

@@ -1,31 +1,27 @@
+/** 六档响应断点（对齐 Semi）。注意 xs 为 max-width，其余为 min-width。 */
+export declare const responsiveMap: {
+    readonly xs: "(max-width: 575px)";
+    readonly sm: "(min-width: 576px)";
+    readonly md: "(min-width: 768px)";
+    readonly lg: "(min-width: 992px)";
+    readonly xl: "(min-width: 1200px)";
+    readonly xxl: "(min-width: 1600px)";
+};
+export type Breakpoint = keyof typeof responsiveMap;
 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';
+    /** 触发响应式布局的断点，可选值 xs/sm/md/lg/xl/xxl。 */
+    breakpoint?: Breakpoint[];
+    /** 触发响应式布局断点时的回调 (screen, matched)。 */
+    onBreakpoint?: (screen: Breakpoint, matched: boolean) => void;
     class?: string;
-    /** 根元素自定义内联样式（透传，叠加在宽度样式之后）。 */
+    /** 根元素自定义内联样式（透传）。 */
     style?: string;
     /** 可访问性标签（透传到 aside 的 aria-label，描述该 Sider 作用）。 */
     ariaLabel?: string;
     /** 可访问性 role（透传到根元素）。 */
     role?: string;
-    onCollapse?: (collapsed: boolean, trigger: SiderTrigger) => void;
-    /** 触发响应式断点时的回调（matched=是否命中 max-width 断点）。 */
-    onBreakpoint?: (matched: boolean, breakpoint: Breakpoint) => 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>;

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

@@ -1 +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,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjE,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAClE,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;AA0IH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Sider.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Sider.svelte.ts"],"names":[],"mappings":"AAGE,uDAAuD;AACvD,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,aAAa,CAAC;AAwBtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,yCAAyC;IACzC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC;IAC1B,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwDH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/layout/meta.d.ts

@@ -1,20 +1,17 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
  * Aggregated metadata for the Layout family (root + Header/Sider/Content/Footer).
+ * 对齐 Semi：纯布局容器，不附带背景/尺寸样式，无组件 token。
  */
 export declare const meta: {
     readonly name: "Layout";
     readonly category: "basic";
-    readonly description: "页面级布局骨架：Layout 根容器 + Header / Sider / Content / Footer 子组件。";
+    readonly description: "页面级布局骨架：Layout 根容器 + Header / Sider / Content / Footer 子组件。纯布局容器，不附带背景/尺寸样式，按需自定义。";
     readonly subComponents: readonly [{
         readonly name: "Layout";
         readonly element: "section";
+        readonly note: "Layout.Header / Layout.Footer / Layout.Content 与 Layout API 相同。";
         readonly props: readonly [{
-            readonly name: "hasSider";
-            readonly type: "boolean";
-            readonly default: "undefined";
-            readonly desc: "显式声明含侧边栏→row 方向；不传则由 Sider 挂载时自动检测";
-        }, {
             readonly name: "class";
             readonly type: "string";
             readonly default: "''";
@@ -24,6 +21,11 @@ export declare const meta: {
             readonly type: "string";
             readonly default: "undefined";
             readonly desc: "根元素自定义内联样式";
+        }, {
+            readonly name: "hasSider";
+            readonly type: "boolean";
+            readonly default: "undefined";
+            readonly desc: "表示子元素里有 Sider，一般不用指定；可用于 SSR 避免样式闪动";
         }, {
             readonly name: "ariaLabel";
             readonly type: "string";
@@ -39,16 +41,6 @@ export declare const meta: {
         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: "''";
@@ -73,15 +65,6 @@ export declare const meta: {
         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: "''";
@@ -106,11 +89,6 @@ export declare const meta: {
         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: "''";
@@ -129,49 +107,21 @@ export declare const meta: {
             readonly name: "role";
             readonly type: "string";
             readonly default: "undefined";
-            readonly desc: "可访问性 role";
+            readonly desc: "可访问性 role（覆盖默认 main 语义）";
         }];
     }, {
         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 type: "('xs'|'sm'|'md'|'lg'|'xl'|'xxl')[]";
             readonly default: "undefined";
-            readonly desc: "低于断点自动收起";
-        }, {
-            readonly name: "reverseArrow";
-            readonly type: "boolean";
-            readonly default: "false";
-            readonly desc: "反转触发器箭头方向";
+            readonly desc: "触发响应式布局的断点数组";
         }, {
-            readonly name: "placement";
-            readonly type: "'left'|'right'";
-            readonly default: "'left'";
+            readonly name: "onBreakpoint";
+            readonly type: "(screen, matched: boolean) => void";
+            readonly default: "undefined";
+            readonly desc: "触发响应式布局断点时的回调";
         }, {
             readonly name: "class";
             readonly type: "string";
@@ -192,47 +142,34 @@ export declare const meta: {
             readonly type: "string";
             readonly default: "undefined";
             readonly desc: "可访问性 role";
-        }, {
-            readonly name: "onCollapse";
-            readonly type: "(collapsed, trigger:'click'|'breakpoint')=>void";
-            readonly default: "undefined";
-        }, {
-            readonly name: "onBreakpoint";
-            readonly type: "(matched: boolean, breakpoint) => void";
-            readonly default: "undefined";
-            readonly desc: "命中响应式断点时回调";
-        }, {
-            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 name: "onBreakpoint";
-        readonly desc: "Sider 命中响应式断点时触发，(matched, breakpoint)";
+        readonly desc: "Sider 命中 / 解除响应式断点时触发，(screen, matched)";
     }];
     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 note: "landmark 语义：Header→header，Content→main，Footer→footer，Sider→aside；Sider 可传 aria-label 描述作用。";
+    };
+    readonly tokens: readonly [];
+    readonly responsiveMap: {
+        readonly xs: "(max-width: 575px)";
+        readonly sm: "(min-width: 576px)";
+        readonly md: "(min-width: 768px)";
+        readonly lg: "(min-width: 992px)";
+        readonly xl: "(min-width: 1200px)";
+        readonly xxl: "(min-width: 1600px)";
     };
-    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 aiHints: readonly ["Layout 只负责布局，不附带背景/文本/宽高样式，配色与尺寸靠 style / class 自定义。", "SSR/首屏含侧边栏时显式传 hasSider，避免 column→row 闪动。", "需要响应式回调时给 Sider 传 breakpoint + onBreakpoint。", "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>";
+        readonly code: "<Layout><Layout.Sider>侧栏</Layout.Sider><Layout><Layout.Header>页头</Layout.Header><Layout.Content>内容</Layout.Content><Layout.Footer>页脚</Layout.Footer></Layout></Layout>";
     }];
 };
 //# sourceMappingURL=meta.d.ts.map