@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/timeline/meta.js

@@ -1,117 +1,70 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
  * See specs/00-foundation/ai-friendly.spec.md.
+ * 严格对齐 Semi timeline API（index.tsx / item.tsx）。
  */
 export const meta = {
     name: 'Timeline',
     category: 'show',
-    description: '时间轴，按时间顺序垂直/水平展示一组事件。两种用法择一：传 dataSource 数据驱动，或不传 dataSource 而在 children 内写 <Timeline.Item> 声明式（可放任意富内容）。支持 left/right/alternate/center 模式、vertical/horizontal 方向、pending 幽灵节点、reverse 倒序与实/虚线样式；交替布局由纯 CSS :nth-child 决定，两种用法共用同一套结构与样式。',
+    description: '时间轴，用于对一系列信息进行时间排序时垂直展示。两种用法择一：传 dataSource 数据驱动（支持 content 属性及 Timeline.Item 全部属性），或在 children 内写 <Timeline.Item> 声明式。通过 mode 设置时间轴与内容的相对位置：left（默认）/right/center/alternate。',
     props: [
-        {
-            name: 'dataSource',
-            type: 'TimelineItemData[]',
-            default: '[]',
-            desc: '节点数据（数据驱动用法；优先于声明式 children）',
-        },
-        {
-            name: 'children',
-            type: 'Snippet',
-            default: 'undefined',
-            desc: '声明式用法：内嵌 <Timeline.Item> 列表，仅在未传 dataSource 时生效',
-        },
         {
             name: 'mode',
-            type: "'left'|'right'|'alternate'|'center'",
+            type: "'left'|'right'|'center'|'alternate'",
             default: 'left',
-            desc: 'right 轴线在右、内容靠右对齐（left 镜像）；center 轴线居中、两侧内容朝轴对称对齐',
+            desc: '通过设置 mode 可以改变时间轴和内容的相对位置',
         },
+        { name: 'class', type: 'string', default: '-', desc: '类名' },
+        { name: 'style', type: 'string', default: '-', desc: '样式' },
         {
-            name: 'direction',
-            type: "'vertical'|'horizontal'",
-            default: 'vertical',
-            desc: '时间轴方向',
-        },
-        { name: 'reverse', type: 'boolean', default: 'false', desc: '倒序展示' },
-        {
-            name: 'pending',
-            type: 'boolean|string',
-            default: 'false',
-            desc: '末尾追加幽灵节点，string 作为其内容',
-        },
-        { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-        { name: 'lineStyle', type: "'solid'|'dashed'", default: 'solid' },
-        {
-            name: 'virtualized',
-            type: 'boolean',
-            default: 'false',
-            desc: '虚拟化：长时间轴只渲染视口内项（复用 core fixedRange；仅 dataSource 模式生效，强制 vertical 列布局，轴线靠固定项高连续）',
-        },
-        {
-            name: 'itemHeight',
-            type: 'number',
-            default: '56',
-            desc: '虚拟化固定项高（px）',
-        },
-        {
-            name: 'maxHeight',
-            type: 'number|string',
-            default: '400',
-            desc: '虚拟化视口最大高（px 数字或 CSS 字符串）',
+            name: 'dataSource',
+            type: 'TimelineItemData[]',
+            default: '-',
+            desc: '时间轴数据源，支持 content 属性及 Timeline.Item 的所有属性',
         },
         {
-            name: 'overscan',
-            type: 'number',
-            default: '3',
-            desc: '虚拟化上下缓冲项数',
+            name: 'aria-label',
+            type: 'string',
+            default: '-',
+            desc: '无障碍标签',
         },
         {
-            name: 'interactive',
-            type: 'boolean',
-            default: 'false',
-            desc: 'roving tabindex 键盘漫游：项可聚焦，↑↓/←→ 移动焦点、Home/End 跳首尾、Enter/Space 触发项 onClick',
+            name: 'children',
+            type: 'Snippet',
+            default: '-',
+            desc: '声明式用法：内嵌 <Timeline.Item> 列表（未传 dataSource 时生效）',
         },
-        { name: 'class', type: 'string', default: "''" },
     ],
     subComponents: [
         {
             name: 'Timeline.Item',
-            desc: '声明式单项，渲染 dot/line/内容（children），与 dataSource 项视觉一致',
+            desc: '时间轴单项，渲染节点圆点 / 连线 / 内容',
             props: [
-                { name: 'dotColor', type: 'string', default: 'undefined', desc: '圆点颜色' },
-                { name: 'color', type: 'string', default: 'undefined', desc: '圆点颜色别名（与 dotColor 等价，dotColor 优先）' },
-                {
-                    name: 'type',
-                    type: "'default'|'ongoing'|'success'|'warning'|'error'",
-                    default: 'undefined',
-                    desc: '语义类型，给圆点附加 cd-timeline__dot--{type} class',
-                },
-                { name: 'dot', type: 'Snippet', default: 'undefined', desc: '自定义圆点 snippet，提供时替代默认圆点' },
-                {
-                    name: 'lineStyle',
-                    type: "'solid'|'dashed'",
-                    default: '继承父 Timeline',
-                    desc: '单项连接线样式',
-                },
-                { name: 'time', type: 'string', default: 'undefined', desc: '时间文本' },
+                { name: 'class', type: 'string', default: '-', desc: '类名' },
+                { name: 'color', type: 'string', default: '-', desc: '自定义的圆圈色值' },
+                { name: 'dot', type: 'string | Snippet', default: '-', desc: '自定义时间轴点' },
+                { name: 'extra', type: 'string | Snippet', default: '-', desc: '自定义辅助内容' },
                 {
                     name: 'position',
                     type: "'left'|'right'",
-                    default: 'undefined',
-                    desc: '覆盖父 Timeline mode 的单项定位',
+                    default: '-',
+                    desc: '自定义节点位置，可以覆盖 Timeline 的模式选项',
                 },
+                { name: 'style', type: 'string', default: '-', desc: '样式' },
+                { name: 'time', type: 'string | Snippet', default: '-', desc: '时间文本' },
                 {
-                    name: 'extra',
-                    type: 'string | Snippet',
-                    default: 'undefined',
-                    desc: '时间旁辅助内容',
+                    name: 'type',
+                    type: "'default'|'ongoing'|'success'|'warning'|'error'",
+                    default: 'default',
+                    desc: '当前圆圈的模式',
                 },
                 {
                     name: 'onClick',
-                    type: '() => void',
-                    default: 'undefined',
-                    desc: 'interactive 模式下点击或 Enter/Space 触发',
+                    type: '(e: MouseEvent) => void',
+                    default: '-',
+                    desc: '鼠标点击事件的回调',
                 },
-                { name: 'children', type: 'Snippet', default: 'undefined', desc: '项内容' },
+                { name: 'children', type: 'Snippet', default: '-', desc: '节点内容' },
             ],
         },
     ],
@@ -119,10 +72,52 @@ export const meta = {
         role: 'list',
         notes: [
             'ul/li 结构',
-            '圆点与连接线 aria-hidden=true',
-            '内容与时间为可读文本',
-            'interactive：项 role=button + roving tabindex（焦点项 tabindex=0 其余 -1），↑↓/←→ 移动焦点、Home/End 跳首尾、Enter/Space 激活，aria-label 取节点内容',
+            '时间点的连线以及时间点本身被设置了 aria-hidden，不会响应 Accessibility API',
+            '可通过传入 aria-label 设置 Timeline 组件的标签',
         ],
     },
-    tokens: ['--cd-timeline-*', '--cd-border-radius-full', '--cd-spacing-extra-tight', '--cd-font-size-small'],
+    tokens: [
+        // 严格对齐 semi-foundation/timeline/variables.scss（组件实际消费）
+        '--cd-color-timeline-dot-default-bg-default',
+        '--cd-color-timeline-dot-success-bg-default',
+        '--cd-color-timeline-dot-warning-bg-default',
+        '--cd-color-timeline-dot-error-bg-default',
+        '--cd-color-timeline-dot-info-bg-default',
+        '--cd-color-timeline-tail-border',
+        '--cd-color-timeline-time-default-text-default',
+        '--cd-color-timeline-item-head-bg',
+        '--cd-color-timeline-item-content-text-default',
+        '--cd-spacing-timeline-margin',
+        '--cd-spacing-timeline-padding',
+        '--cd-spacing-timeline-tail-top',
+        '--cd-spacing-timeline-tail-left',
+        '--cd-spacing-timeline-head-top',
+        '--cd-spacing-timeline-head-custom-top',
+        '--cd-spacing-timeline-head-custom-left',
+        '--cd-spacing-timeline-content-marginleft',
+        '--cd-spacing-timeline-time-margintop',
+        '--cd-spacing-timeline-time-top',
+        '--cd-spacing-timeline-item-margin',
+        '--cd-spacing-timeline-item-paddingbottom',
+        '--cd-spacing-timeline-item-content-time-marginleft',
+        '--cd-spacing-timeline-item-right-item-left',
+        '--cd-spacing-timeline-item-right-item-content',
+        '--cd-spacing-timeline-item-left-item-content-left',
+        '--cd-spacing-timeline-item-head-custom-left',
+        '--cd-spacing-timeline-item-head-marginleft',
+        '--cd-width-timeline',
+        '--cd-width-timeline-dot',
+        '--cd-width-timeline-head-custom',
+        '--cd-width-timeline-tail-border',
+        '--cd-width-timeline-head-custom-border',
+        '--cd-width-timeline-item-content-time',
+        '--cd-width-timeline-item-right-content',
+        '--cd-width-timeline-item-left-item-content',
+        '--cd-width-timeline-item-right-item-content',
+        '--cd-height-timeline-tail',
+        '--cd-height-timeline-head-custom',
+        '--cd-radius-timeline-head',
+        '--cd-radius-timeline-head-custom',
+        '--cd-motion-timeline-head-custom-transform',
+    ],
 };

package/dist/timeline/types.d.ts

@@ -1,10 +1,21 @@
+import type { Snippet } from 'svelte';
+export type TimelineItemType = 'default' | 'ongoing' | 'success' | 'warning' | 'error';
+export type TimelineItemPosition = 'left' | 'right';
+/**
+ * dataSource 单项数据。对齐 Semi `Data extends TimelineItemProps { content }`：
+ * 支持 content 属性及 Timeline.Item 的所有属性。content/time/dot/extra 可为字符串或 Snippet。
+ */
 export interface TimelineItemData {
     key?: string;
-    content: string;
-    time?: string;
+    content?: string | Snippet;
+    time?: string | Snippet;
     color?: string;
-    dotColor?: string;
-    /** interactive 模式下按 Enter/Space 或点击该节点触发（非 interactive 时忽略）。 */
-    onClick?: () => void;
+    type?: TimelineItemType;
+    dot?: string | Snippet;
+    extra?: string | Snippet;
+    position?: TimelineItemPosition;
+    class?: string;
+    style?: string;
+    onClick?: (e: MouseEvent) => void;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/timeline/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/timeline/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/timeline/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AACvF,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpD;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACnC"}

package/dist/toast/ToastContainer.svelte

@@ -1,11 +1,16 @@
 <!--
-  ToastContainer — 单例容器，订阅 store 渲染全部 toast。
-  由 store.ts 惰性 mount 到 body 下的宿主节点；仅此一个实例。
-  按 6 方位（topLeft/top/topRight/bottomLeft/bottom/bottomRight）分组渲染独立堆叠列，
-  对齐 Notification 的方位实现。向后兼容：旧的纯 top/bottom 用法仍居中堆叠不变。
-  进出场用 svelte/transition fly（运行时驱动，退场后 DOM 正常卸载，不卡 from 帧）；
-  重排用 animate:flip。reduced-motion 时 fly duration 降为 0。
-  红线 #2：方位分组（grouped）/进出场偏移（flyParams）为派生纯函数。
+  ToastContainer — 单例容器，订阅 store 渲染全部 toast，严格对齐 Semi Design
+  （semi-ui/toast/index.tsx 的 ToastList + toast.scss 的 wrapper/innerWrapper 定位/动画）。
+  DOM 结构镜像 Semi：
+    div.cd-toast-wrapper                         ← fixed, top:0, width:100%, flex justify-center
+      div.cd-toast-innerWrapper[-hover]          ← fit-content 居中，stack hover 时加 -hover
+        ToastItem × N
+  定位对齐 Semi scss：wrapper top:0 居中；config 的 top/left/bottom/right/zIndex 经 getToastConfig
+  注入 wrapper inline style（对齐 Semi index.tsx 对 wrapper div 直接设 style[pos]）。
+  进/退场动画对齐 Semi animation.scss：opacity 0↔1 + translateY(-100%)↔0，
+  300ms cubic-bezier(.22,.57,.02,1.2)（Semi 组件级动画常量，非全局 token，字面直连）。
+  堆叠顺序对齐 Semi：store 新 toast 追加到队尾（[...list, item]），innerWrapper 普通 flex column，新的在下。
+  stack 展开：innerWrapper mouseenter → hover=true → 每条 zero-height-wrapper 撑开为实测高度（对齐 Semi mouseInSide）。
   红线：render 不读 effect 写的状态——toasts 初始同步读一次（拿到惰性挂载前已入队的首条），
   $effect 仅做订阅 + cleanup 退订。
 -->
@@ -13,18 +18,19 @@
   import { fly } from 'svelte/transition';
   import { flip } from 'svelte/animate';
   import { prefersReducedMotion } from 'svelte/motion';
-  import type { ToastStore, ToastItem, ToastPosition } from '@chenzy-design/core';
+  import type { ToastStore, ToastItem } from '@chenzy-design/core';
   import ToastItemView from './ToastItem.svelte';
-  import { getToastConfig } from './store.js';
+  import type { ToastPositionConfig } from './store.js';
 
   interface Props {
     store: ToastStore;
+    /** 位置配置 getter（top/left/bottom/right/zIndex），闭包隔离多实例。局部 holder 可省略。 */
+    getPositionConfig?: () => ToastPositionConfig;
   }
 
-  let { store }: Props = $props();
+  let { store, getPositionConfig }: Props = $props();
 
   // 初始同步读一次：捕获惰性挂载前已入队的首条 toast。
-  // 用函数包裹读取，避免 state 初始化器直接引用 prop 触发 state_referenced_locally。
   // core 的 subscribe 不会立即回放当前值，因此必须在此先读一次。
   function readInitial(): ToastItem[] {
     return store.getToasts();
@@ -32,7 +38,6 @@
   let toasts = $state<ToastItem[]>(readInitial());
 
   // 桥接外部（非 Svelte runes）store：订阅写入本地 state，cleanup 退订。
-  // 这是 store->state 的单向桥，无法用 $derived 表达（外部 store 非响应式源）。
   $effect(() => {
     const unsub = store.subscribe((v) => {
       toasts = v;
@@ -40,145 +45,126 @@
     return unsub;
   });
 
-  const positions: ToastPosition[] = [
-    'topLeft',
-    'top',
-    'topRight',
-    'bottomLeft',
-    'bottom',
-    'bottomRight',
-  ];
+  // 动画时长：reduced-motion 时降为 0（对齐 Semi 动画 300ms）。
+  const SEMI_DURATION = 300;
+  const flyDuration = $derived(prefersReducedMotion.current ? 0 : SEMI_DURATION);
+  const flipDuration = $derived(prefersReducedMotion.current ? 0 : SEMI_DURATION);
+  // Semi 缓动 cubic-bezier(.22,.57,.02,1.2) 的求值函数（供 transition easing）。
+  const semiEase = bezier(0.22, 0.57, 0.02, 1.2);
 
-  const flyDuration = $derived(prefersReducedMotion.current ? 0 : 220);
-  const flipDuration = $derived(prefersReducedMotion.current ? 0 : 200);
+  // 任一 toast 带 stack → 整组走堆叠模式（对齐 Semi ref.stack）。
+  const stacked = $derived(toasts.some((t) => t.stack));
 
-  // 红线 #2：方位分组纯派生——按 6 方位过滤当前 toasts。
-  const grouped = $derived(
-    positions.map((p) => ({
-      position: p,
-      items: toasts.filter((t) => t.position === p),
-    })),
-  );
+  // stack 展开态：innerWrapper hover 时 true（对齐 Semi mouseInSide）。
+  // 展开时每个 ToastItem 自测高度撑开 zero-height-wrapper（对齐 Semi Toast.render 里对 toastEle 测高）。
+  let hover = $state(false);
 
-  // 每方位进出场偏移：左侧从左滑入、右侧从右滑入、居中走垂直（对齐 Notification）。
-  function flyParams(position: ToastPosition): { x: number; y: number } {
-    if (position === 'topLeft' || position === 'bottomLeft') return { x: -24, y: 0 };
-    if (position === 'topRight' || position === 'bottomRight') return { x: 24, y: 0 };
-    return { x: 0, y: position === 'top' ? -16 : 16 };
+  function handleEnter() {
+    if (!stacked) return;
+    hover = true;
   }
-
-  function handleClose(id: string) {
-    store.remove(id, 'manual');
-  }
-  function handlePause(id: string) {
-    store.pause(id);
-  }
-  function handleResume(id: string) {
-    store.resume(id);
+  function handleLeave() {
+    if (!stacked) return;
+    hover = false;
   }
 
-  // 全局配置衍生样式变量（应用到容器的 CSS 自定义属性）。
+  // 全局配置（top/left/bottom/right/zIndex）注入 wrapper inline style（对齐 Semi index.tsx）。
   function toPx(v: number | string | undefined): string | undefined {
     if (v === undefined) return undefined;
     return typeof v === 'number' ? `${v}px` : v;
   }
-
-  const cfg = $derived(getToastConfig());
-  const configStyle = $derived(() => {
+  const cfg = $derived(getPositionConfig?.() ?? {});
+  const wrapperStyle = $derived(() => {
     const parts: string[] = [];
-    if (cfg.zIndex !== undefined) parts.push(`--cd-toast-z: ${cfg.zIndex}`);
-    if (cfg.top !== undefined) parts.push(`--cd-toast-config-top: ${toPx(cfg.top)}`);
-    if (cfg.bottom !== undefined) parts.push(`--cd-toast-config-bottom: ${toPx(cfg.bottom)}`);
-    if (cfg.left !== undefined) parts.push(`--cd-toast-config-left: ${toPx(cfg.left)}`);
-    if (cfg.right !== undefined) parts.push(`--cd-toast-config-right: ${toPx(cfg.right)}`);
-    return parts.length > 0 ? parts.join('; ') : undefined;
+    if (cfg.zIndex !== undefined) parts.push(`z-index:${cfg.zIndex}`);
+    const top = toPx(cfg.top);
+    const bottom = toPx(cfg.bottom);
+    const left = toPx(cfg.left);
+    const right = toPx(cfg.right);
+    if (top !== undefined) parts.push(`top:${top}`);
+    if (bottom !== undefined) parts.push(`bottom:${bottom}`);
+    if (left !== undefined) parts.push(`left:${left}`);
+    if (right !== undefined) parts.push(`right:${right}`);
+    return parts.length ? parts.join(';') : undefined;
   });
 
-  // 任一 toast 带 stack 标志时，整组容器附加 stacked class。
-  const hasStack = $derived(toasts.some((t) => t.stack));
+  // 三次贝塞尔求值（对齐 Notification 做法，用于 transition easing）。
+  function bezier(x1: number, y1: number, x2: number, y2: number): (x: number) => number {
+    const cx = 3 * x1;
+    const bx = 3 * (x2 - x1) - cx;
+    const ax = 1 - cx - bx;
+    const cy = 3 * y1;
+    const by = 3 * (y2 - y1) - cy;
+    const ay = 1 - cy - by;
+    const sampleX = (t: number) => ((ax * t + bx) * t + cx) * t;
+    const sampleY = (t: number) => ((ay * t + by) * t + cy) * t;
+    const sampleDX = (t: number) => (3 * ax * t + 2 * bx) * t + cx;
+    return (x: number) => {
+      if (x <= 0) return 0;
+      if (x >= 1) return 1;
+      let t = x;
+      for (let i = 0; i < 8; i++) {
+        const dx = sampleX(t) - x;
+        if (Math.abs(dx) < 1e-5) break;
+        const d = sampleDX(t);
+        if (Math.abs(d) < 1e-6) break;
+        t -= dx / d;
+      }
+      return sampleY(t);
+    };
+  }
 </script>
 
-{#each grouped as group (group.position)}
-  {#if group.items.length > 0}
-    <div
-      class={['cd-toast-stack', `cd-toast-stack--${group.position}`, hasStack && 'cd-toast-wrapper--stacked']}
-      style={configStyle()}
-    >
-      {#each group.items as t (t.id)}
-        <div
-          class="cd-toast-stack__item"
-          in:fly={{ ...flyParams(group.position), duration: flyDuration }}
-          out:fly={{ ...flyParams(group.position), duration: flyDuration }}
-          animate:flip={{ duration: flipDuration }}
-        >
-          <ToastItemView
-            toast={t}
-            onClose={handleClose}
-            onPause={handlePause}
-            onResume={handleResume}
-          />
-        </div>
-      {/each}
-    </div>
-  {/if}
-{/each}
+<div class="cd-toast-wrapper" style={wrapperStyle()}>
+  <div class="cd-toast-innerWrapper" class:cd-toast-innerWrapper-hover={hover} onmouseenter={handleEnter} onmouseleave={handleLeave} role="presentation">
+    {#each toasts as t, i (t.id)}
+      <div
+        class="cd-toast-listItem"
+        in:fly={{ y: -16, duration: flyDuration, easing: semiEase }}
+        out:fly={{ y: -16, duration: flyDuration, easing: semiEase }}
+        animate:flip={{ duration: flipDuration }}
+      >
+        <ToastItemView
+          toast={t}
+          onClose={(id) => store.remove(id)}
+          onPause={(id) => store.pause(id)}
+          onResume={(id) => store.resume(id)}
+          expanded={stacked && hover}
+          reservedIndex={toasts.length - i - 1}
+        />
+      </div>
+    {/each}
+  </div>
+</div>
 
 <style>
-  .cd-toast-stack {
+  /* —— 容器（对齐 Semi .semi-toast-wrapper）—— */
+  .cd-toast-wrapper {
     position: fixed;
-    z-index: var(--cd-toast-z);
+    height: 0;
+    top: var(--cd-spacing-toast-wrapper-top);
+    width: var(--cd-width-toast-wrapper);
     display: flex;
-    flex-direction: column;
-    gap: var(--cd-toast-stack-gap);
-    inline-size: max-content;
-    max-inline-size: calc(100vw - 32px);
+    justify-content: center;
+    z-index: var(--cd-z-toast);
     pointer-events: none;
   }
 
-  .cd-toast-stack--topLeft {
-    top: 24px;
-    left: 24px;
-    align-items: flex-start;
-  }
-
-  .cd-toast-stack--top {
-    top: 24px;
-    left: 50%;
-    transform: translateX(-50%);
-    align-items: center;
-  }
-
-  .cd-toast-stack--topRight {
-    top: 24px;
-    right: 24px;
-    align-items: flex-end;
-  }
-
-  .cd-toast-stack--bottomLeft {
-    bottom: 24px;
-    left: 24px;
-    align-items: flex-start;
-    flex-direction: column-reverse;
-  }
-
-  .cd-toast-stack--bottom {
-    bottom: 24px;
-    left: 50%;
-    transform: translateX(-50%);
-    align-items: center;
-    flex-direction: column-reverse;
+  /* —— 内层（对齐 Semi .semi-toast-innerWrapper）—— */
+  .cd-toast-innerWrapper {
+    width: fit-content;
+    height: fit-content;
+    text-align: center;
+    pointer-events: none;
   }
 
-  .cd-toast-stack--bottomRight {
-    bottom: 24px;
-    right: 24px;
-    align-items: flex-end;
-    flex-direction: column-reverse;
+  /* hover 展开态：取消 3D 透视（对齐 Semi -innerWrapper-hover）。 */
+  .cd-toast-innerWrapper-hover :global(.cd-toast-zero-height-wrapper) {
+    perspective: unset;
+    perspective-origin: center center;
   }
 
-  .cd-toast-stack__item {
-    inline-size: auto;
-    max-inline-size: 100%;
+  .cd-toast-listItem {
     pointer-events: none;
   }
 </style>

package/dist/toast/ToastContainer.svelte.d.ts

@@ -1,6 +1,9 @@
 import type { ToastStore } from '@chenzy-design/core';
+import type { ToastPositionConfig } from './store.js';
 interface Props {
     store: ToastStore;
+    /** 位置配置 getter（top/left/bottom/right/zIndex），闭包隔离多实例。局部 holder 可省略。 */
+    getPositionConfig?: () => ToastPositionConfig;
 }
 declare const ToastContainer: import("svelte").Component<Props, {}, "">;
 type ToastContainer = ReturnType<typeof ToastContainer>;

package/dist/toast/ToastContainer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContainer.svelte.d.ts","sourceRoot":"","sources":["../../src/toast/ToastContainer.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAA4B,MAAM,qBAAqB,CAAC;AAK9E,UAAU,KAAK;IACb,KAAK,EAAE,UAAU,CAAC;CACnB;AAwGH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ToastContainer.svelte.d.ts","sourceRoot":"","sources":["../../src/toast/ToastContainer.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAa,MAAM,qBAAqB,CAAC;AAEjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAGpD,UAAU,KAAK;IACb,KAAK,EAAE,UAAU,CAAC;IAClB,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,mBAAmB,CAAC;CAC/C;AAgHH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/toast/ToastHolder.svelte

@@ -0,0 +1,18 @@
+<!--
+  ToastHolder — useToast Hook 的 contextHolder（对齐 Semi Toast.useToast 返回的
+  contextHolder 元素）。渲染在组件树内（<ToastHolder store={contextHolder} />），
+  内部复用 ToastContainer 渲染局部 store 的 toast，使这些 toast 继承 holder 所在位置的上下文
+  （如 LocaleProvider）。wrapper 仍为 position:fixed（对齐 Semi：Hook toast 照样顶部居中定位）。
+-->
+<script lang="ts">
+  import type { ToastStore } from '@chenzy-design/core';
+  import ToastContainer from './ToastContainer.svelte';
+
+  interface Props {
+    store: ToastStore;
+  }
+
+  let { store }: Props = $props();
+</script>
+
+<ToastContainer {store} />

package/dist/toast/ToastHolder.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ToastStore } from '@chenzy-design/core';
+interface Props {
+    store: ToastStore;
+}
+declare const ToastHolder: import("svelte").Component<Props, {}, "">;
+type ToastHolder = ReturnType<typeof ToastHolder>;
+export default ToastHolder;
+//# sourceMappingURL=ToastHolder.svelte.d.ts.map

package/dist/toast/ToastHolder.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastHolder.svelte.d.ts","sourceRoot":"","sources":["../../src/toast/ToastHolder.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAIpD,UAAU,KAAK;IACb,KAAK,EAAE,UAAU,CAAC;CACnB;AAcH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}