@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/notification/NotificationItem.svelte

@@ -1,368 +0,0 @@
-<!--
-  NotificationItem — 单条通知卡片。
-  类型图标（可选）+ 主体（title + content）+ 可选关闭按钮（右上角绝对定位）+ 可选 footer 操作区。
-  pauseOnHover 经 mouseenter/leave + focusin/out 暂停/恢复定时器。
-  showProgress：底部倒计时进度条，随 duration 递减；hover/聚焦时暂停（与定时器同步）。
-    命令式 rAF 驱动（红线 #3）——effect 启动循环、cleanup 取消帧并清空 ref；duration<=0 时不渲染。
-  theme：light（默认，与卡片背景一致）/ dark（深色卡片）。
-  a11y：error/warning -> role=alert + aria-live=assertive；其余 -> role=status + aria-live=polite。
-  title/content 经 useId 关联 aria-labelledby / aria-describedby；关闭按钮 aria-label「关闭」，不抢焦点。
-  类型前缀（如「错误：」）以视觉隐藏文本注入卡片首部（spec §6），令屏幕阅读器先播报极性语义。
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { useId } from '@chenzy-design/core';
-  import type { NotificationItem, NotificationType } from '@chenzy-design/core';
-  import { useLocale } from '../locale-provider/index.js';
-
-  interface Props {
-    item: NotificationItem;
-    onClose: (id: string) => void;
-    /**
-     * 仅在用户点击关闭按钮时触发（与 onClose 区分：onClose 在任何关闭方式时触发）。
-     * 由 NotificationContainer 传入，从 onCloseClickMap 中查找并调用对应回调。
-     */
-    onCloseClick?: (id: string) => void;
-    onPause: (id: string) => void;
-    onResume: (id: string) => void;
-  }
-
-  let { item, onClose, onCloseClick, onPause, onResume }: Props = $props();
-  const loc = useLocale();
-
-  const titleId = useId('cd-notification-title');
-  const contentId = useId('cd-notification-content');
-
-  const isAlert = $derived(item.type === 'error' || item.type === 'warning');
-  const role = $derived(isAlert ? 'alert' : 'status');
-  const ariaLive = $derived(isAlert ? 'assertive' : 'polite');
-  const hasIcon = $derived(item.type !== 'default');
-
-  // 视觉隐藏类型前缀（如「错误：」）：default 无前缀；其余走 i18n（colon 跟随 locale）。
-  // 注入卡片首部，令屏幕阅读器先读极性语义再读 title/content。
-  const typePrefix = $derived(
-    item.type === 'default'
-      ? ''
-      : `${loc().t(`Notification.${item.type}`)}${loc().t('Form.colon')}`,
-  );
-
-  // footer 是渲染层 Snippet（core 用 unknown 透传，无框架依赖）。
-  const footer = $derived(item.footer as Snippet | undefined);
-
-  // showProgress 仅在有限 duration 下有意义；duration<=0（常驻）无倒计时可显示。
-  const hasProgress = $derived(item.showProgress && item.duration > 0);
-
-  // 本地暂停态：与 store 定时器的暂停/恢复严格同源（同一组 hover/focus 处理器）。
-  // 用普通变量（非 $state）让 rAF 循环直接读取，避免 effect 重订阅/重启而丢失进度。
-  let paused = false;
-  // 进度条 DOM 引用；命令式驱动 scaleX，避免每帧触发 Svelte 响应式。
-  let progressEl = $state<HTMLDivElement | null>(null);
-
-  function handlePause() {
-    if (item.pauseOnHover) {
-      paused = true;
-      onPause(item.id);
-    }
-  }
-  function handleResume() {
-    if (item.pauseOnHover) {
-      paused = false;
-      onResume(item.id);
-    }
-  }
-
-  // 命令式 rAF 倒计时进度（红线 #3）：effect 仅依赖 duration/progressEl 启动单条循环，
-  // 循环内直接读 paused（普通变量）冻结/推进剩余时间，直接写 DOM scaleX；cleanup 取消帧。
-  $effect(() => {
-    if (!hasProgress || !progressEl) return;
-    const totalMs = item.duration * 1000;
-    const el = progressEl;
-    let raf = 0;
-    let remaining = totalMs;
-    let last = performance.now();
-
-    function tick(t: number): void {
-      if (!paused) remaining = Math.max(0, remaining - (t - last));
-      last = t;
-      el.style.transform = `scaleX(${remaining / totalMs})`;
-      if (remaining > 0) raf = requestAnimationFrame(tick);
-    }
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  });
-</script>
-
-{#snippet typeIcon(type: NotificationType)}
-  {#if type === 'success'}
-    <svg class="cd-notification-item__icon-svg" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-      <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.4" />
-      <path
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.6"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M5 8.2l2 2 4-4.4"
-      />
-    </svg>
-  {:else if type === 'info'}
-    <svg class="cd-notification-item__icon-svg" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-      <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.4" />
-      <path stroke="currentColor" stroke-width="1.4" stroke-linecap="round" d="M8 7.2v4" />
-      <circle cx="8" cy="4.7" r="0.85" fill="currentColor" />
-    </svg>
-  {:else if type === 'warning'}
-    <svg class="cd-notification-item__icon-svg" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-      <path
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.4"
-        stroke-linejoin="round"
-        d="M8 1.5l6.5 12h-13z"
-      />
-      <path stroke="currentColor" stroke-width="1.4" stroke-linecap="round" d="M8 6.5v3.2" />
-      <circle cx="8" cy="11.6" r="0.85" fill="currentColor" />
-    </svg>
-  {:else if type === 'error'}
-    <svg class="cd-notification-item__icon-svg" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-      <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.4" />
-      <path
-        stroke="currentColor"
-        stroke-width="1.6"
-        stroke-linecap="round"
-        d="M5.5 5.5l5 5M10.5 5.5l-5 5"
-      />
-    </svg>
-  {/if}
-{/snippet}
-
-<div
-  class="cd-notification-item cd-notification-item--{item.type} cd-notification-item--{item.theme}"
-  {role}
-  aria-live={ariaLive}
-  aria-labelledby={item.title ? titleId : undefined}
-  aria-describedby={item.content ? contentId : undefined}
-  onmouseenter={handlePause}
-  onmouseleave={handleResume}
-  onfocusin={handlePause}
-  onfocusout={handleResume}
->
-  {#if typePrefix}
-    <span class="cd-sr-only">{typePrefix}</span>
-  {/if}
-  {#if hasIcon}
-    <span class="cd-notification-item__icon">
-      {@render typeIcon(item.type)}
-    </span>
-  {/if}
-  <div class="cd-notification-item__body">
-    {#if item.title}
-      <div class="cd-notification-item__title" id={titleId}>{item.title}</div>
-    {/if}
-    {#if item.content}
-      <div class="cd-notification-item__content" id={contentId}>{item.content}</div>
-    {/if}
-    {#if footer}
-      <div class="cd-notification-item__footer">
-        {@render footer()}
-      </div>
-    {/if}
-  </div>
-  {#if item.closable}
-    <button
-      type="button"
-      class="cd-notification-item__close"
-      aria-label={loc().t('Notification.closeText')}
-      onclick={() => { onCloseClick?.(item.id); onClose(item.id); }}
-    >
-      <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-        <path
-          stroke="currentColor"
-          stroke-width="1.4"
-          stroke-linecap="round"
-          d="M4 4l8 8M12 4l-8 8"
-        />
-      </svg>
-    </button>
-  {/if}
-  {#if hasProgress}
-    <div class="cd-notification-item__progress" aria-hidden="true">
-      <div class="cd-notification-item__progress-bar" bind:this={progressEl}></div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .cd-notification-item {
-    position: relative;
-    display: flex;
-    gap: var(--cd-notification-gap);
-    align-items: flex-start;
-    box-sizing: border-box;
-    inline-size: var(--cd-notification-width);
-    max-inline-size: 100%;
-    padding: var(--cd-notification-padding);
-    background: var(--cd-notification-bg);
-    border: 1px solid var(--cd-notification-border);
-    border-radius: var(--cd-notification-radius);
-    box-shadow: var(--cd-notification-shadow);
-    pointer-events: auto;
-  }
-
-  /* 视觉隐藏类型前缀复用 tokens.css 全局 .cd-sr-only：仅供屏幕阅读器读取极性语义。 */
-
-  .cd-notification-item__icon {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    inline-size: 1.25em;
-    block-size: 1.25em;
-    margin-block-start: 0.0625em;
-  }
-
-  .cd-notification-item__icon-svg {
-    inline-size: 100%;
-    block-size: 100%;
-  }
-
-  .cd-notification-item--success .cd-notification-item__icon {
-    color: var(--cd-notification-icon-success);
-  }
-  .cd-notification-item--info .cd-notification-item__icon {
-    color: var(--cd-notification-icon-info);
-  }
-  .cd-notification-item--warning .cd-notification-item__icon {
-    color: var(--cd-notification-icon-warning);
-  }
-  .cd-notification-item--error .cd-notification-item__icon {
-    color: var(--cd-notification-icon-error);
-  }
-
-  .cd-notification-item__body {
-    flex: 1 1 auto;
-    min-inline-size: 0;
-    /* 为右上角关闭按钮预留空间 */
-    padding-inline-end: 1.5em;
-  }
-
-  .cd-notification-item__title {
-    font-size: var(--cd-notification-title-size);
-    font-weight: 600;
-    line-height: 1.4;
-    color: var(--cd-notification-color-title);
-    overflow-wrap: anywhere;
-  }
-
-  .cd-notification-item__content {
-    margin-block-start: var(--cd-spacing-1);
-    font-size: var(--cd-notification-content-size);
-    line-height: 1.5;
-    color: var(--cd-notification-color-content);
-    overflow-wrap: anywhere;
-  }
-
-  .cd-notification-item__footer {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--cd-spacing-2);
-    align-items: center;
-    margin-block-start: var(--cd-spacing-3);
-  }
-
-  .cd-notification-item__progress {
-    position: absolute;
-    inset-inline: 0;
-    inset-block-end: 0;
-    block-size: var(--cd-notification-progress-height);
-    overflow: hidden;
-    border-end-start-radius: var(--cd-notification-radius);
-    border-end-end-radius: var(--cd-notification-radius);
-    pointer-events: none;
-  }
-
-  .cd-notification-item__progress-bar {
-    block-size: 100%;
-    inline-size: 100%;
-    background: var(--cd-notification-progress-color);
-    /* 倒计时从起始边收缩：LTR 自左、RTL 自右（随 dir 翻转 transform-origin）。 */
-    transform-origin: left center;
-    /* 初始满格；命令式 rAF 写 scaleX 递减 */
-    transform: scaleX(1);
-  }
-
-  :global([dir='rtl']) .cd-notification-item__progress-bar {
-    transform-origin: right center;
-  }
-
-  .cd-notification-item--success .cd-notification-item__progress-bar {
-    background: var(--cd-notification-icon-success);
-  }
-  .cd-notification-item--info .cd-notification-item__progress-bar {
-    background: var(--cd-notification-icon-info);
-  }
-  .cd-notification-item--warning .cd-notification-item__progress-bar {
-    background: var(--cd-notification-icon-warning);
-  }
-  .cd-notification-item--error .cd-notification-item__progress-bar {
-    background: var(--cd-notification-icon-error);
-  }
-
-  /* dark 主题：深色卡片，文案/边框/关闭色覆盖为 token */
-  .cd-notification-item--dark {
-    background: var(--cd-notification-bg-dark);
-    border-color: var(--cd-notification-border-dark);
-  }
-  .cd-notification-item--dark .cd-notification-item__title {
-    color: var(--cd-notification-color-title-dark);
-  }
-  .cd-notification-item--dark .cd-notification-item__content {
-    color: var(--cd-notification-color-content-dark);
-  }
-  .cd-notification-item--dark .cd-notification-item__close {
-    color: var(--cd-notification-close-color-dark);
-  }
-  .cd-notification-item--dark .cd-notification-item__close:hover {
-    color: var(--cd-notification-close-color-hover-dark);
-  }
-
-  .cd-notification-item__close {
-    position: absolute;
-    inset-block-start: var(--cd-notification-padding);
-    inset-inline-end: var(--cd-notification-padding);
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    inline-size: 1.25em;
-    block-size: 1.25em;
-    padding: 0;
-    margin: 0;
-    border: none;
-    background: transparent;
-    color: var(--cd-notification-close-color);
-    cursor: pointer;
-    border-radius: var(--cd-radius-1);
-    transition: color var(--cd-notification-motion-duration) ease;
-  }
-
-  .cd-notification-item__close:hover {
-    color: var(--cd-notification-close-color-hover);
-  }
-
-  .cd-notification-item__close:focus-visible {
-    outline: 2px solid var(--cd-color-primary);
-    outline-offset: 1px;
-  }
-
-  .cd-notification-item__close svg {
-    inline-size: 100%;
-    block-size: 100%;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cd-notification-item__close {
-      transition: none;
-    }
-  }
-</style>

package/src/notification/index.ts

@@ -1,9 +0,0 @@
-export { notification, type NotificationConfig, type SvelteNotificationOptions } from './store.js';
-export { meta as notificationMeta } from './meta.js';
-export type {
-  NotificationType,
-  NotificationOptions,
-  NotificationItem,
-  NotificationPlacement,
-  NotificationDirection,
-} from '@chenzy-design/core';

package/src/notification/meta.ts

@@ -1,120 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * Notification — see specs/components/feedback/Notification.spec.md
- */
-export const meta = {
-  name: 'Notification',
-  category: 'feedback',
-  description:
-    '通知提醒框：命令式全局反馈 API（notification.open/success/info/warning/error/close/update/destroyAll）。比 Toast 更丰富——标题 + 内容 + 图标；6 方位独立堆叠；单例容器惰性挂载到 body；自动关闭 + 悬停暂停 + maxCount 按方位 FIFO 淘汰 + 同 id 去重更新；error/warning role=alert(assertive)、其余 role=status(polite)；可选 showProgress 倒计时进度条（命令式 rAF + 悬停同步暂停）、footer 操作区 Snippet、theme(light/dark)；RTL（direction=rtl 镜像卡片布局并左右互换方位）、Esc 关闭最近一条（window keydown + cleanup）、notification.config({ direction, getPopupContainer }) 配置全局方向与容器挂载点（默认 ltr + body，对齐 Modal/Dropdown getContainer）。',
-  exports: ['notification'],
-  imperative: true,
-  config: {
-    direction: "全局默认书写方向 'ltr'|'rtl'（per-item direction 优先）",
-    getPopupContainer:
-      '() => HTMLElement，容器宿主挂载目标（默认 body）；须在首条通知前调用方生效',
-  },
-  props: [
-    { name: 'id', type: 'string', default: 'undefined', desc: '指定 id；已存在则原地更新' },
-    { name: 'title', type: 'string', default: '—', desc: '通知标题' },
-    { name: 'content', type: 'string', default: '—', desc: '通知正文' },
-    {
-      name: 'type',
-      type: "'default'|'success'|'info'|'warning'|'error'",
-      default: "'default'",
-      desc: '语义类型，决定图标与强调色',
-    },
-    {
-      name: 'duration',
-      type: 'number',
-      default: '4.5',
-      desc: '自动关闭秒数；0 持久',
-    },
-    {
-      name: 'placement',
-      type: "'topLeft'|'top'|'topRight'|'bottomLeft'|'bottom'|'bottomRight'",
-      default: "'topRight'",
-      desc: '弹出位置，每方位独立堆叠',
-    },
-    { name: 'closable', type: 'boolean', default: 'true', desc: '是否显示关闭按钮' },
-    { name: 'pauseOnHover', type: 'boolean', default: 'true', desc: '悬停/聚焦时暂停定时器' },
-    {
-      name: 'showProgress',
-      type: 'boolean',
-      default: 'false',
-      desc: '底部倒计时进度条，随 duration 递减；悬停/聚焦时与定时器同步暂停（duration=0 时不显示）',
-    },
-    {
-      name: 'theme',
-      type: "'light'|'dark'",
-      default: "'light'",
-      desc: '卡片主题；dark 为深色卡片',
-    },
-    {
-      name: 'direction',
-      type: "'ltr'|'rtl'",
-      default: "'ltr'（可经 notification.config 改默认）",
-      desc: 'RTL 时镜像卡片布局（关闭按钮/图标/文案/进度方向翻转）并左右互换方位',
-    },
-    {
-      name: 'footer',
-      type: 'Snippet',
-      default: 'undefined',
-      desc: '底部操作区插槽（按钮等），渲染在内容下方',
-    },
-    {
-      name: 'onClose',
-      type: "(id: string, reason: 'timeout'|'manual'|'replace'|'destroyAll') => void",
-      default: 'undefined',
-      desc: '关闭回调，附关闭原因',
-    },
-  ],
-  events: [{ name: 'onClose', desc: '单条关闭（超时/手动/被替换/清空）时触发，带 id 与 reason' }],
-  slots: [],
-  a11y: {
-    hasRole: true,
-    focusable: false,
-    note: 'error/warning 用 role=alert + aria-live=assertive，其余 role=status + aria-live=polite；标题 aria-labelledby、内容 aria-describedby；关闭按钮 button + aria-label「关闭」。不抢焦点、不锁滚动。',
-  },
-  tokens: [
-    '--cd-notification-width',
-    '--cd-notification-bg',
-    '--cd-notification-color-title',
-    '--cd-notification-color-content',
-    '--cd-notification-border',
-    '--cd-notification-radius',
-    '--cd-notification-shadow',
-    '--cd-notification-padding',
-    '--cd-notification-gap',
-    '--cd-notification-icon-success',
-    '--cd-notification-icon-info',
-    '--cd-notification-icon-warning',
-    '--cd-notification-icon-error',
-    '--cd-notification-close-color',
-    '--cd-notification-close-color-hover',
-    '--cd-notification-title-size',
-    '--cd-notification-content-size',
-    '--cd-notification-z',
-    '--cd-notification-offset',
-    '--cd-notification-motion-duration',
-    '--cd-notification-progress-height',
-    '--cd-notification-progress-color',
-    '--cd-notification-bg-dark',
-    '--cd-notification-border-dark',
-    '--cd-notification-color-title-dark',
-    '--cd-notification-color-content-dark',
-    '--cd-notification-close-color-dark',
-    '--cd-notification-close-color-hover-dark',
-  ],
-  responsive: false,
-  examples: [
-    { title: '成功', code: "notification.success({ title: '已上传', content: '文件保存成功' })" },
-    { title: '错误', code: "notification.error({ title: '保存失败', content: '网络中断' })" },
-    { title: '常驻', code: "notification.open({ title: '提醒', duration: 0 })" },
-    { title: 'RTL', code: "notification.info({ title: 'مرحبا', content: 'نص', direction: 'rtl' })" },
-    {
-      title: '全局配置',
-      code: "notification.config({ direction: 'rtl', getPopupContainer: () => document.getElementById('app')! })",
-    },
-  ],
-} as const;

package/src/notification/store.ts

@@ -1,191 +0,0 @@
-/**
- * Notification — 命令式全局通知提醒框入口。
- * 模块级单例 store + 惰性挂载的单例 NotificationContainer（首次调用时 mount 到 body）。
- * 复用 @chenzy-design/core 的 createNotificationStore（无框架依赖的队列 + 定时器）。
- * 与 Toast 同构，差异：数据含 title + content、6 方位独立堆叠、无 loading 类型；
- * 命令式入参是 NotificationOptions 配置对象（不像 Toast 首参是 string）。
- * See specs/components/feedback/Notification.spec.md
- */
-import {
-  createNotificationStore,
-  type NotificationStore,
-  type NotificationOptions,
-  type NotificationType,
-  type NotificationPlacement,
-  type NotificationDirection,
-} from '@chenzy-design/core';
-
-/**
- * 全局通知配置（命令式单例特有）。容器经 mount() 挂在 Svelte 组件树之外，
- * 拿不到 ConfigProvider context，故 RTL / 挂载容器只能经此命令式入口配置：
- *  - direction：未显式指定 direction 的通知的默认书写方向（rtl 镜像布局并左右互换方位）。
- *  - getPopupContainer：容器宿主挂载目标（默认 body），对齐 Modal/Dropdown getContainer。
- *  - top/bottom/left/right：六方位容器与视口边缘的偏移（CSS 像素字符串或数字）。
- *  - zIndex：通知容器层叠优先级。
- *  - duration：全局默认自动关闭秒数（0 = 常驻），可被单条 options.duration 覆盖。
- * 须在首条通知前调用方对挂载点生效（容器惰性挂载且单例，仅挂一次）。
- */
-export interface NotificationConfig {
-  direction?: NotificationDirection;
-  getPopupContainer?: () => HTMLElement | null | undefined;
-  /** 通知容器距视口顶部偏移（CSS 值，如 '24px' 或数字像素），适用于 topLeft/top/topRight 方位 */
-  top?: number | string;
-  /** 通知容器距视口底部偏移 */
-  bottom?: number | string;
-  /** 通知容器距视口左侧偏移 */
-  left?: number | string;
-  /** 通知容器距视口右侧偏移 */
-  right?: number | string;
-  /** 通知容器 z-index */
-  zIndex?: number;
-  /** 全局默认自动关闭秒数（0 = 常驻）；可被单条 notification.xxx({ duration }) 覆盖 */
-  duration?: number;
-}
-
-let store: NotificationStore | null = null;
-let containerMounted = false;
-let globalDirection: NotificationDirection = 'ltr';
-let getPopupContainer: (() => HTMLElement | null | undefined) | undefined;
-let globalDuration: number | undefined;
-// 位置偏移：由 NotificationContainer 读取并注入 CSS custom property。
-type PositionOffsets = Pick<NotificationConfig, 'top' | 'bottom' | 'left' | 'right' | 'zIndex'>;
-let positionOffsets: PositionOffsets = {};
-
-/**
- * Svelte 层扩展选项（core NotificationOptions 的超集）：
- *  - showClose: closable 的别名（Semi 文档用 showClose），两者等价，showClose 优先。
- *  - onCloseClick: 仅在用户点击关闭按钮时触发（与 onClose 区分：onClose 在任何关闭方式时触发）。
- */
-export interface SvelteNotificationOptions extends NotificationOptions {
-  /** closable 的别名（Semi 文档用 showClose）；showClose 优先于 closable */
-  showClose?: boolean;
-  /** 仅在用户点击关闭按钮时触发；onClose 在所有关闭方式（timeout/manual/replace/destroyAll）时触发 */
-  onCloseClick?: (id: string) => void;
-}
-
-// onCloseClick 回调按 id 存储在模块级 Map，NotificationContainer 关闭按钮点击时查找并调用。
-export const onCloseClickMap = new Map<string, (id: string) => void>();
-
-/** 位置偏移 getter：供 NotificationContainer 读取并注入 inline style（config() 后生效）。 */
-export function getPositionOffsets(): Pick<NotificationConfig, 'top' | 'bottom' | 'left' | 'right' | 'zIndex'> {
-  return positionOffsets;
-}
-
-function ensureStore(): NotificationStore {
-  if (!store) {
-    store = createNotificationStore({
-      maxCount: 5,
-      defaultDuration: globalDuration ?? 4.5,
-    });
-  }
-  return store;
-}
-
-/**
- * 把全局 direction 作为默认注入未显式指定方向的选项（per-item direction 仍优先）。
- * 同时解析 showClose 别名（→ closable）；onCloseClick 单独处理。
- */
-interface ResolvedOpts {
-  coreOpts: NotificationOptions;
-  onCloseClick: ((id: string) => void) | undefined;
-}
-
-function resolveOpts(opts: SvelteNotificationOptions): ResolvedOpts {
-  // Cast via unknown to tolerate svelte-check false positives when @chenzy-design/core is not built.
-  type CoreOpts = NotificationOptions & Record<string, unknown>;
-  const { showClose, onCloseClick, ...rest } = opts as SvelteNotificationOptions & Record<string, unknown>;
-  // showClose 优先于 closable；都未传则 core 默认 true。
-  const closable = showClose !== undefined ? showClose : (rest as CoreOpts).closable;
-  const coreOpts: NotificationOptions = {
-    ...(rest as NotificationOptions),
-    ...(closable !== undefined ? { closable } : {}),
-    direction: (opts as CoreOpts).direction !== undefined
-      ? (opts as CoreOpts).direction as string
-      : globalDirection,
-  } as NotificationOptions;
-  // 若有 onCloseClick，在 onClose 钩子中清理 map（防内存泄漏）。
-  if (onCloseClick) {
-    const origOnClose = (coreOpts as CoreOpts).onClose as ((id: string, r: unknown) => void) | undefined;
-    (coreOpts as CoreOpts).onClose = (closedId: string, reason: unknown) => {
-      onCloseClickMap.delete(closedId);
-      origOnClose?.(closedId, reason);
-    };
-  }
-  return { coreOpts, onCloseClick };
-}
-
-/**
- * 惰性挂载容器：首次调用时动态 import + mount NotificationContainer 到 body。
- * mount 是 async（动态 import），但调用方的 s.open 已同步把数据写进 store；
- * 容器在 mount 时立即同步读一次 store.getItems()，不会丢首条通知。
- */
-async function ensureContainer(): Promise<void> {
-  if (containerMounted || typeof document === 'undefined') return;
-  containerMounted = true;
-  const { mount } = await import('svelte');
-  const { default: NotificationContainer } = await import('./NotificationContainer.svelte');
-  const host = document.createElement('div');
-  host.className = 'cd-notification-host';
-  // 挂载到 getPopupContainer() 指定容器（默认 body），对齐 Modal/Dropdown getContainer。
-  const target = getPopupContainer?.() ?? document.body;
-  target.appendChild(host);
-  mount(NotificationContainer, { target: host, props: { store: ensureStore() } });
-}
-
-function show(type: NotificationType, opts: SvelteNotificationOptions): string {
-  const s = ensureStore();
-  void ensureContainer();
-  const merged: SvelteNotificationOptions = { ...opts };
-  (merged as NotificationOptions).type = type;
-  const { coreOpts, onCloseClick } = resolveOpts(merged);
-  const id = s.open(coreOpts);
-  if (onCloseClick) onCloseClickMap.set(id, onCloseClick);
-  return id;
-}
-
-export const notification = {
-  /**
-   * 配置全局通知行为：direction（默认书写方向）、getPopupContainer（容器挂载目标）、
-   * top/bottom/left/right/zIndex（容器位置偏移）、duration（全局默认自动关闭秒数）。
-   * 命令式单例特性——须在首条通知前调用方对挂载点生效。向后兼容：不调用即 ltr + body。
-   */
-  config: (cfg: NotificationConfig): void => {
-    if (cfg.direction !== undefined) globalDirection = cfg.direction;
-    if ('getPopupContainer' in cfg) getPopupContainer = cfg.getPopupContainer;
-    if (cfg.duration !== undefined) globalDuration = cfg.duration;
-    const next: PositionOffsets = {};
-    if (cfg.top !== undefined) next.top = cfg.top;
-    if (cfg.bottom !== undefined) next.bottom = cfg.bottom;
-    if (cfg.left !== undefined) next.left = cfg.left;
-    if (cfg.right !== undefined) next.right = cfg.right;
-    if (cfg.zIndex !== undefined) next.zIndex = cfg.zIndex;
-    positionOffsets = next;
-  },
-  /** 完整选项打开一条通知，返回其 id。 */
-  open: (opts: SvelteNotificationOptions): string => {
-    void ensureContainer();
-    const { coreOpts, onCloseClick } = resolveOpts(opts);
-    const id = ensureStore().open(coreOpts);
-    if (onCloseClick) onCloseClickMap.set(id, onCloseClick);
-    return id;
-  },
-  success: (opts: SvelteNotificationOptions): string => show('success', opts),
-  info: (opts: SvelteNotificationOptions): string => show('info', opts),
-  warning: (opts: SvelteNotificationOptions): string => show('warning', opts),
-  error: (opts: SvelteNotificationOptions): string => show('error', opts),
-  /** 手动关闭指定通知。 */
-  close: (id: string): void => ensureStore().close(id, 'manual'),
-  /** 按同 id 更新一条通知（store.open 对已存在 id 走原地更新 + 重启定时器）。 */
-  update: (id: string, opts: SvelteNotificationOptions): string => {
-    void ensureContainer();
-    const merged: SvelteNotificationOptions = { ...opts };
-    (merged as NotificationOptions).id = id;
-    const { coreOpts, onCloseClick } = resolveOpts(merged);
-    const newId = ensureStore().open(coreOpts);
-    if (onCloseClick) onCloseClickMap.set(newId, onCloseClick);
-    return newId;
-  },
-  /** 清空全部通知，或仅清空指定方位。 */
-  destroyAll: (placement?: NotificationPlacement): void =>
-    ensureStore().destroyAll(placement),
-};