@chenzy-design/svelte 0.1.0 → 0.2.1

package/src/typography/TypographyBase.svelte

@@ -1,807 +0,0 @@
-<!--
-  TypographyBase — shared render core for Title / Text / Paragraph / Link.
-  See specs/components/basic/Typography.spec.md §3 (分层), §4, §6, §12.
-
-  纯文本路径（无 ellipsis/copyable/editable）：零 hook、零 observer、零 timer，仅 class 拼接，
-  与旧行为完全一致（向后兼容，红线：不传三 prop 行为不变）。
-
-  交互路径组合 @chenzy-design/core 三原语（createEllipsis/createCopyable/createEditable）。
-  - 受控编辑 value + onChange，组件内不回写（红线 #1）。
-  - 剪贴板 / 编辑 textarea / ellipsis 测量(ResizeObserver+rAF) 命令式 + cleanup（红线 #3）。
-  - 省略/复制态/编辑态派生纯函数，core 持纯逻辑（红线 #2）。
-  - 测量写 state 在 rAF/observer 回调里（异步首测），避免与渲染读形成同步 effect 自循环。
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { untrack, onMount } from 'svelte';
-  import {
-    useId,
-    createCopyable,
-    createEditable,
-    createEllipsis,
-    computeAutosizeHeight,
-    type EllipsisPos,
-  } from '@chenzy-design/core';
-  import { useLocale } from '../locale-provider/index.js';
-  import Tooltip from '../tooltip/Tooltip.svelte';
-  import Popover from '../popover/Popover.svelte';
-
-  type TypoType = 'default' | 'secondary' | 'tertiary' | 'warning' | 'danger' | 'success';
-  type TypoWeight = number | 'regular' | 'medium' | 'semibold' | 'bold';
-  type TypoSize = 'small' | 'default' | 'large';
-
-  /**
-   * showTooltip 浮层透传选项（对齐 Semi opts）。content 指定浮层显示的自定义内容
-   * （非原文）；theme/placement/maxWidth 透传 Tooltip；popover 额外接受 title。
-   */
-  export interface EllipsisTooltipOpts {
-    /** 浮层显示的内容；缺省用完整原文（fullText） */
-    content?: string;
-    /** Popover 模式标题 */
-    title?: string;
-    theme?: 'dark' | 'light';
-    placement?: string;
-    position?: 'top' | 'bottom' | 'left' | 'right';
-    maxWidth?: number | string;
-  }
-  /**
-   * showTooltip 配置（对齐 Semi）：
-   *  - `true`：默认 Tooltip，浮层 = 完整原文。
-   *  - `{ opts: { content } }`：浮层显示自定义内容。
-   *  - `{ type: 'popover', opts }`：用 Popover 而非 Tooltip。
-   *  - `{ renderTooltip }`：完全自定义浮层。Semi 的 `(content, children) => VNode`
-   *    在 Svelte 中表达为 snippet `(fullText, trigger) => 浮层`，其中 trigger 是
-   *    渲染好的截断文本（须作为浮层触发器渲染出来），fullText 为完整原文。
-   */
-  export interface EllipsisShowTooltip {
-    type?: 'tooltip' | 'popover';
-    opts?: EllipsisTooltipOpts;
-    renderTooltip?: Snippet<[string, Snippet]>;
-  }
-
-  export interface EllipsisConfig {
-    rows?: number;
-    expandable?: boolean;
-    /** 展开后是否可折叠回去（Semi collapsible）；默认 false */
-    collapsible?: boolean;
-    expandText?: string;
-    collapseText?: string;
-    suffix?: string;
-    pos?: EllipsisPos;
-    showTooltip?: boolean | EllipsisShowTooltip;
-    onExpand?: (expanded: boolean) => void;
-  }
-  export interface CopyableConfig {
-    content?: string;
-    successText?: string;
-    icon?: Snippet;
-    successIcon?: Snippet;
-  }
-  export interface EditableConfig {
-    editing?: boolean;
-    trigger?: 'click' | 'dblclick' | 'icon';
-    maxLength?: number;
-    autosize?: boolean;
-  }
-
-  interface Props {
-    /** rendered tag */
-    element: string;
-    baseClass: string;
-    extraClass?: string;
-    type?: TypoType;
-    /** 字号档（Text/Paragraph）。Title 由 heading 决定，不传 size。spec §4.1 L60 */
-    size?: TypoSize;
-    strong?: boolean;
-    weight?: TypoWeight | undefined;
-    disabled?: boolean;
-    mark?: boolean;
-    underline?: boolean;
-    delete?: boolean;
-    code?: boolean;
-    class?: string;
-    /** ellipsis / copyable / editable */
-    ellipsis?: boolean | EllipsisConfig;
-    copyable?: boolean | CopyableConfig;
-    editable?: boolean | EditableConfig;
-    /** controlled text value (editable). undefined → uncontrolled-ish: read from DOM/children */
-    value?: string | undefined;
-    onChange?: ((value: string) => void) | undefined;
-    onCopy?: ((content: string) => void) | undefined;
-    onEditStart?: (() => void) | undefined;
-    onEditCancel?: (() => void) | undefined;
-    onExpand?: ((expanded: boolean) => void) | undefined;
-    /** extra attributes spread onto the host element (href/target/rel for Link) */
-    hostAttrs?: Record<string, unknown> | undefined;
-    children?: Snippet | undefined;
-  }
-
-  let {
-    element,
-    baseClass,
-    extraClass,
-    type = 'default',
-    size = 'default',
-    strong = false,
-    weight,
-    disabled = false,
-    mark = false,
-    underline = false,
-    delete: del = false,
-    code = false,
-    class: className = '',
-    ellipsis = false,
-    copyable = false,
-    editable = false,
-    value,
-    onChange,
-    onCopy,
-    onEditStart,
-    onEditCancel,
-    onExpand,
-    hostAttrs,
-    children,
-  }: Props = $props();
-
-  const loc = useLocale();
-  const baseId = useId('cd-typography');
-
-  const weightMap: Record<string, string> = {
-    regular: 'var(--cd-font-weight-regular)',
-    medium: 'var(--cd-font-weight-medium)',
-    semibold: 'var(--cd-font-weight-semibold)',
-    bold: '700',
-  };
-  const resolvedWeight = $derived.by(() => {
-    if (weight === undefined) return undefined;
-    return typeof weight === 'number' ? String(weight) : weightMap[weight];
-  });
-  const inlineWeight = $derived(resolvedWeight ? `font-weight:${resolvedWeight};` : '');
-
-  // --- feature flags + normalized configs (纯派生, 红线 #2) ---
-  const ellipsisCfg = $derived.by<EllipsisConfig | null>(() => {
-    if (!ellipsis) return null;
-    return typeof ellipsis === 'object' ? ellipsis : {};
-  });
-  const copyableCfg = $derived.by<CopyableConfig | null>(() => {
-    if (!copyable) return null;
-    return typeof copyable === 'object' ? copyable : {};
-  });
-  const editableCfg = $derived.by<EditableConfig | null>(() => {
-    if (!editable) return null;
-    return typeof editable === 'object' ? editable : {};
-  });
-
-  const rows = $derived(ellipsisCfg?.rows ?? 1);
-  const expandable = $derived(ellipsisCfg?.expandable ?? false);
-  const collapsible = $derived(ellipsisCfg?.collapsible ?? false);
-  const pos = $derived(ellipsisCfg?.pos ?? 'end');
-  const showTooltip = $derived(Boolean(ellipsisCfg?.showTooltip));
-  // 归一化 showTooltip 配置（对齐 Semi：true → 默认 tooltip）。
-  const tooltipCfg = $derived.by<EllipsisShowTooltip | null>(() => {
-    const st = ellipsisCfg?.showTooltip;
-    if (!st) return null;
-    return st === true ? {} : st;
-  });
-  const tooltipType = $derived(tooltipCfg?.type ?? 'tooltip');
-  const tooltipOpts = $derived(tooltipCfg?.opts ?? {});
-  const renderTooltip = $derived(tooltipCfg?.renderTooltip);
-
-  // 纯文本快路径：三特性全关 → 不实例化任何 core hook / observer / timer。
-  const isInteractive = $derived(
-    ellipsisCfg !== null || copyableCfg !== null || editableCfg !== null,
-  );
-
-  // 构造期一次性快照（untrack：原语在 init 实例化一次，不随 config 重建；
-  // 渲染仍读 $derived 版本保持响应）。避免 state_referenced_locally 警告。
-  const initEllipsis = untrack(() => ellipsisCfg);
-  const initCopyable = untrack(() => copyableCfg);
-  const initEditable = untrack(() => editableCfg);
-
-  // --- core primitives (lazily constructed only when interactive) ---
-  // copyable
-  let copied = $state(false);
-  const copyApi = initCopyable
-    ? createCopyable({
-        onChange: (c) => (copied = c),
-        onCopy: (content) => {
-          announce(loc().t('Typography.copied'));
-          onCopy?.(content);
-        },
-        onError: () => announce(loc().t('Typography.copyFailed')),
-      })
-    : null;
-  $effect(() => () => copyApi?.destroy());
-
-  async function doCopy(): Promise<void> {
-    if (!copyApi) return;
-    const content = copyableCfg?.content ?? value ?? textContent();
-    await copyApi.copy(content);
-  }
-
-  // ellipsis
-  let expanded = $state(false);
-  let truncated = $state<boolean | null>(null);
-  const ellipsisApi = initEllipsis
-    ? createEllipsis({
-        rows: initEllipsis.rows ?? 1,
-        expandable: initEllipsis.expandable ?? false,
-        collapsible: initEllipsis.collapsible ?? false,
-        pos: initEllipsis.pos ?? 'end',
-        onExpand: (e) => {
-          expanded = e;
-          ellipsisCfg?.onExpand?.(e);
-          onExpand?.(e);
-        },
-        onChange: (s) => {
-          truncated = s.truncated;
-        },
-      })
-    : null;
-
-  // editable — controlled value + onChange (红线 #1: 不回写)
-  let editing = $state(false);
-  let draft = $state('');
-  const editApi = initEditable
-    ? createEditable({
-        get value() {
-          return value ?? textContent();
-        },
-        ...(initEditable.maxLength !== undefined ? { maxLength: initEditable.maxLength } : {}),
-        ...(initEditable.trigger !== undefined ? { trigger: initEditable.trigger } : {}),
-        onChange: (s) => {
-          editing = s.editing;
-          draft = s.draft;
-        },
-        onCommit: (v) => onChange?.(v),
-        onStart: () => onEditStart?.(),
-        onCancel: () => onEditCancel?.(),
-      })
-    : null;
-
-  // 受控 editing: 父传 editableCfg.editing 时与内部状态同步（命令式驱动 start/cancel）。
-  $effect(() => {
-    if (!editApi || editableCfg?.editing === undefined) return;
-    const want = editableCfg.editing;
-    untrack(() => {
-      if (want && !editApi.editing) editApi.start();
-      else if (!want && editApi.editing) editApi.cancel();
-    });
-  });
-
-  // --- DOM refs ---
-  let hostEl: HTMLElement | undefined = $state();
-  let textareaEl: HTMLTextAreaElement | undefined = $state();
-  let lastTrigger: HTMLElement | null = null;
-
-  function textContent(): string {
-    return hostEl?.textContent?.trim() ?? '';
-  }
-
-  // --- single live region for copy/announce (命令式, cleanup) ---
-  let liveEl: HTMLDivElement | undefined;
-  function ensureLive(): HTMLDivElement | null {
-    if (typeof document === 'undefined') return null;
-    if (!liveEl) {
-      liveEl = document.createElement('div');
-      liveEl.setAttribute('aria-live', 'polite');
-      liveEl.setAttribute('role', 'status');
-      const s = liveEl.style;
-      s.position = 'absolute';
-      s.width = '1px';
-      s.height = '1px';
-      s.margin = '-1px';
-      s.padding = '0';
-      s.overflow = 'hidden';
-      s.clipPath = 'inset(50%)';
-      s.whiteSpace = 'nowrap';
-      document.body.appendChild(liveEl);
-    }
-    return liveEl;
-  }
-  function announce(msg: string): void {
-    const el = ensureLive();
-    if (!el || !msg) return;
-    el.textContent = '';
-    el.textContent = msg;
-  }
-  $effect(() => () => {
-    liveEl?.remove();
-    liveEl = undefined;
-  });
-
-  // --- ellipsis measurement (精确路径: expandable / suffix / showTooltip) ---
-  // CSS clamp 为默认；仅当需要 truncated 判定时才挂 ResizeObserver。
-  // needsMeasure 为构造期常量（基于 untrack 快照），保证测量 effect 只随 hostEl 建立/销毁一次，
-  // 不被 ellipsisCfg 等派生的重算反复 re-run（否则会反复 cancel rAF，测量永不落地）。
-  const measureRows = initEllipsis?.rows ?? 1;
-  const needsMeasure =
-    initEllipsis !== null &&
-    ((initEllipsis.expandable ?? false) ||
-      Boolean(initEllipsis.showTooltip) ||
-      initEllipsis.suffix !== undefined);
-
-  // onMount 一次性建立 ResizeObserver + rAF 测量，卸载时清理。
-  // 用 onMount 而非 $effect(hostEl) —— 避免 host 因模板派生重渲染导致 effect 反复 teardown，
-  // 把 pending rAF cancel 掉（测量永不落地）的坑（svelte:element 不支持 use: 动作）。
-  // 命令式 + cleanup（红线 #3）；rAF 首测异步避免与渲染读写同栈（红线 #4）。
-  onMount(() => {
-    if (!needsMeasure || typeof window === 'undefined' || !ellipsisApi) return;
-    const el = hostEl;
-    if (!el) return;
-    let frame = 0;
-    const measure = (): void => {
-      frame = 0;
-      // 展开态 clamp 已撤除, scrollHeight==clientHeight, 不会误判
-      ellipsisApi.measure({
-        scrollHeight: el.scrollHeight,
-        clientHeight: el.clientHeight,
-        scrollWidth: el.scrollWidth,
-        clientWidth: el.clientWidth,
-        rows: measureRows,
-      });
-    };
-    // 首测：DOM 已布局，直接同步测一次落定 truncated（写 state 在 onMount 内，渲染读分离，无自循环）。
-    measure();
-    const schedule = (): void => {
-      if (frame) return;
-      frame = window.requestAnimationFrame(measure);
-    };
-    const ro = new ResizeObserver(schedule);
-    ro.observe(el);
-    return () => {
-      if (frame) window.cancelAnimationFrame(frame);
-      ro.disconnect();
-    };
-  });
-
-  // --- editable: 进入编辑聚焦 textarea；退出后焦点归还触发器（命令式, 红线 #3） ---
-  $effect(() => {
-    if (!editApi) return;
-    if (editing) {
-      const ta = textareaEl;
-      if (ta) {
-        ta.focus();
-        ta.setSelectionRange(ta.value.length, ta.value.length);
-        applyAutosize();
-      }
-    } else if (lastTrigger) {
-      const t = lastTrigger;
-      lastTrigger = null;
-      t.focus?.();
-    }
-  });
-
-  function applyAutosize(): void {
-    const ta = textareaEl;
-    if (!ta || editableCfg?.autosize === false) return;
-    ta.style.height = 'auto';
-    const cs = window.getComputedStyle(ta);
-    const lineHeight = parseFloat(cs.lineHeight) || 20;
-    const vPad = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
-    const vBorder = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
-    const { height } = computeAutosizeHeight({
-      scrollHeight: ta.scrollHeight,
-      lineHeight,
-      verticalPadding: vPad,
-      verticalBorder: vBorder,
-      minRows: 1,
-      maxRows: 6,
-    });
-    ta.style.height = `${height}px`;
-  }
-
-  function startEdit(e: Event): void {
-    if (disabled || !editApi) return;
-    lastTrigger = (e.currentTarget as HTMLElement) ?? null;
-    editApi.start();
-  }
-  function onTriggerHost(e: Event): void {
-    if (!editApi) return;
-    const trig = editableCfg?.trigger ?? 'icon';
-    if (trig === 'click' && e.type === 'click') startEdit(e);
-    else if (trig === 'dblclick' && e.type === 'dblclick') startEdit(e);
-  }
-  // 合并 hostAttrs.onclick (如 Link 的 handleClick) 与编辑 click 触发
-  function hostClick(e: MouseEvent): void {
-    (hostAttrs?.onclick as ((ev: MouseEvent) => void) | undefined)?.(e);
-    onTriggerHost(e);
-  }
-  function onTextareaInput(e: Event): void {
-    editApi?.setDraft((e.target as HTMLTextAreaElement).value);
-    applyAutosize();
-  }
-  function onTextareaKeydown(e: KeyboardEvent): void {
-    if (!editApi) return;
-    const action = editApi.handleKey({ key: e.key, shiftKey: e.shiftKey });
-    if (action === 'confirm' || action === 'cancel') e.preventDefault();
-  }
-
-  // --- class (与旧实现一致 + 交互修饰) ---
-  const cls = $derived(
-    [
-      baseClass,
-      extraClass,
-      type !== 'default' && `${baseClass}--${type}`,
-      // 字号档：Title (extraClass 含 --title) 由 heading 决定, 忽略 size (spec §4.1 L60)
-      size !== 'default' && !extraClass?.includes(`${baseClass}--title`) && `${baseClass}--size-${size}`,
-      strong && `${baseClass}--strong`,
-      disabled && `${baseClass}--disabled`,
-      mark && `${baseClass}--mark`,
-      underline && `${baseClass}--underline`,
-      del && `${baseClass}--delete`,
-      code && `${baseClass}--code`,
-      ellipsisCfg && !expanded && `${baseClass}--ellipsis`,
-      ellipsisCfg && rows > 1 && !expanded && `${baseClass}--ellipsis-multi`,
-      className,
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-
-  // ellipsis 行内样式: 多行用 line-clamp; 单行用 text-overflow.
-  const ellipsisStyle = $derived.by(() => {
-    if (!ellipsisCfg || expanded) return '';
-    if (rows > 1) return `--cd-typo-clamp:${rows};`;
-    return '';
-  });
-  const hostStyle = $derived(`${inlineWeight}${ellipsisStyle}`);
-
-  // tooltip: 仅在确实溢出且 showTooltip 时启用
-  const tooltipEnabled = $derived(showTooltip && truncated === true && !expanded);
-  // textContent() 非响应式：用 truncated/expanded 变化作为重算触发器（measure 写 state 后重新取 DOM 全文）。
-  const fullText = $derived.by(() => {
-    void truncated;
-    void expanded;
-    return textContent();
-  });
-  // 浮层显示内容：opts.content 自定义优先，否则用完整原文。
-  const tooltipContent = $derived(tooltipOpts.content ?? fullText);
-
-  const copyLabel = $derived(loc().t('Typography.copy'));
-  const editLabel = $derived(loc().t('Typography.edit'));
-  const expandLabel = $derived(ellipsisCfg?.expandText ?? loc().t('Typography.expand'));
-  const collapseLabel = $derived(ellipsisCfg?.collapseText ?? loc().t('Typography.collapse'));
-</script>
-
-{#snippet copyIconDefault()}
-  <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-    <rect x="9" y="9" width="11" height="11" rx="2" />
-    <path d="M5 15V5a2 2 0 0 1 2-2h10" stroke-linecap="round" />
-  </svg>
-{/snippet}
-{#snippet copiedIconDefault()}
-  <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-    <path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round" />
-  </svg>
-{/snippet}
-{#snippet editIconDefault()}
-  <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-    <path d="M4 20h4l10-10-4-4L4 16v4z" stroke-linejoin="round" />
-    <path d="M13.5 6.5l4 4" stroke-linecap="round" />
-  </svg>
-{/snippet}
-
-{#snippet actions()}
-  {#if copyableCfg}
-    <button
-      type="button"
-      class="{baseClass}__action {baseClass}__action--copy"
-      class:is-copied={copied}
-      aria-label={copyLabel}
-      title={copyLabel}
-      onclick={doCopy}
-    >
-      {#if copied}
-        {#if copyableCfg.successIcon}{@render copyableCfg.successIcon()}{:else}{@render copiedIconDefault()}{/if}
-      {:else if copyableCfg.icon}{@render copyableCfg.icon()}{:else}{@render copyIconDefault()}{/if}
-    </button>
-  {/if}
-  {#if editableCfg && (editableCfg.trigger ?? 'icon') === 'icon'}
-    <button
-      type="button"
-      class="{baseClass}__action {baseClass}__action--edit"
-      aria-label={editLabel}
-      title={editLabel}
-      onclick={startEdit}
-    >
-      {@render editIconDefault()}
-    </button>
-  {/if}
-{/snippet}
-
-{#if editApi && editing}
-  <!-- inline edit mode: textarea 替换文本 -->
-  <span class="{baseClass}__edit-wrap">
-    <textarea
-      bind:this={textareaEl}
-      class="{baseClass}__edit-input"
-      value={draft}
-      maxlength={editableCfg?.maxLength}
-      aria-label={editLabel}
-      rows="1"
-      oninput={onTextareaInput}
-      onkeydown={onTextareaKeydown}
-      onblur={() => editApi?.confirm()}
-    ></textarea>
-  </span>
-{:else if !isInteractive}
-  <!-- 纯文本快路径: 与旧实现完全一致 (向后兼容) -->
-  <svelte:element this={element} class={cls} style={hostStyle || undefined} aria-disabled={disabled || undefined} {...hostAttrs}>
-    {@render children?.()}
-  </svelte:element>
-{:else}
-  <!-- showTooltip: 把截断后的文本宿主（hostNode，触发器）用 Tooltip/Popover 包裹，
-       浮层 content = 完整原文 / 自定义内容（Semi renderTipWrapper 模式）。
-       注意：以 showTooltip（静态配置）而非 tooltipEnabled（随 truncated 变化）决定是否包裹，
-       使 hostNode 在浮层内位置稳定，避免 truncated 翻转时 host 被 {#if} 销毁重建、
-       导致 onMount 建立的 ResizeObserver 观察到失效节点（测量永不再落地）。
-       未溢出/展开时用浮层 disabled / 空内容关闭浮层，不渲染浮层。 -->
-  {#if showTooltip}
-    {#if renderTooltip}
-      {@render renderTooltip(fullText, hostNode)}
-    {:else if tooltipType === 'popover'}
-      <Popover
-        content={tooltipEnabled ? tooltipContent : ''}
-        title={tooltipOpts.title ?? ''}
-        position={tooltipOpts.position ?? 'top'}
-        trigger="hover"
-        disabled={!tooltipEnabled}
-      >
-        {@render hostNode()}
-      </Popover>
-    {:else}
-      <Tooltip
-        content={tooltipEnabled ? tooltipContent : ''}
-        placement={(tooltipOpts.placement ?? 'top') as never}
-        theme={tooltipOpts.theme ?? 'dark'}
-        maxWidth={tooltipOpts.maxWidth ?? 300}
-        disabled={!tooltipEnabled}
-      >
-        {@render hostNode()}
-      </Tooltip>
-    {/if}
-  {:else}
-    {@render hostNode()}
-  {/if}
-
-  {#if (expandable && !expanded && truncated === true) || (collapsible && expanded)}
-    <button
-      type="button"
-      class="{baseClass}__expand"
-      aria-expanded={expanded}
-      onclick={() => ellipsisApi?.toggle()}
-    >
-      {expanded ? collapseLabel : expandLabel}
-    </button>
-  {/if}
-
-  {@render actions()}
-{/if}
-
-{#snippet hostNode()}
-  <svelte:element
-    this={element}
-    bind:this={hostEl}
-    class={cls}
-    style={hostStyle || undefined}
-    aria-disabled={disabled || undefined}
-    {...hostAttrs}
-    onclick={hostClick}
-    ondblclick={onTriggerHost}
-  >
-    {@render children?.()}{#if ellipsisCfg?.suffix && truncated === true && !expanded}<!--
- -->{ellipsisCfg.suffix}{/if}
-  </svelte:element>
-{/snippet}
-
-<style>
-  /* ── 基础排版样式 (统一源, 因实际元素由本组件渲染, 子组件 scoped 不生效) ── */
-  :global(.cd-typography) {
-    color: var(--cd-typography-color);
-  }
-  :global(.cd-typography--paragraph),
-  :global(.cd-typography--title) {
-    margin: 0;
-  }
-  :global(.cd-typography--paragraph) {
-    margin-block-end: var(--cd-spacing-4);
-  }
-  :global(.cd-typography--title) {
-    font-weight: var(--cd-font-weight-semibold);
-  }
-  :global(.cd-typography--h1) {
-    font-size: var(--cd-font-size-6);
-  }
-  :global(.cd-typography--h2) {
-    font-size: var(--cd-font-size-5);
-  }
-  :global(.cd-typography--h3) {
-    font-size: var(--cd-font-size-4);
-  }
-  :global(.cd-typography--h4) {
-    font-size: var(--cd-font-size-3);
-  }
-  :global(.cd-typography--h5) {
-    font-size: var(--cd-font-size-2);
-  }
-  :global(.cd-typography--h6) {
-    font-size: var(--cd-font-size-1);
-  }
-  :global(.cd-typography--link) {
-    color: var(--cd-typography-color-link);
-    text-decoration: none;
-    cursor: pointer;
-    transition: color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  :global(.cd-typography--link:hover) {
-    color: var(--cd-typography-color-link-hover);
-  }
-  :global(.cd-typography--link:focus-visible) {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-    border-radius: 2px;
-  }
-  :global(.cd-typography--link.cd-typography--disabled) {
-    pointer-events: none;
-  }
-  :global(.cd-typography--secondary) {
-    color: var(--cd-typography-color-secondary);
-  }
-  :global(.cd-typography--tertiary) {
-    color: var(--cd-typography-color-tertiary);
-  }
-  :global(.cd-typography--warning) {
-    color: var(--cd-color-warning);
-  }
-  :global(.cd-typography--danger) {
-    color: var(--cd-color-danger);
-  }
-  :global(.cd-typography--success) {
-    color: var(--cd-color-success);
-  }
-  :global(.cd-typography--strong) {
-    font-weight: var(--cd-font-weight-semibold);
-  }
-  /* 字号档 (Text/Paragraph) — spec §4.1 size + §5 token 表; default 沿用继承字号保持向后兼容 */
-  :global(.cd-typography--size-small) {
-    font-size: var(--cd-typography-font-size-small, var(--cd-font-size-1));
-  }
-  :global(.cd-typography--size-large) {
-    font-size: var(--cd-typography-font-size-large, var(--cd-font-size-3));
-  }
-  :global(.cd-typography--disabled) {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  :global(.cd-typography--mark) {
-    background-color: var(--cd-typography-mark-bg);
-  }
-  :global(.cd-typography--underline) {
-    text-decoration-line: underline;
-  }
-  :global(.cd-typography--delete) {
-    text-decoration-line: line-through;
-  }
-  :global(.cd-typography--underline.cd-typography--delete) {
-    text-decoration-line: underline line-through;
-  }
-  :global(.cd-typography--code) {
-    font-family: var(--cd-font-family-mono, monospace);
-    font-size: var(--cd-typography-code-font-size);
-    background-color: var(--cd-typography-code-bg);
-    padding-inline: 0.4em;
-    padding-block: 0.1em;
-    border-radius: 3px;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    :global(.cd-typography--link) {
-      transition: none;
-    }
-  }
-
-  /* ── 交互态样式 ── */
-  :global(.cd-typography--ellipsis) {
-    /* Text 渲染为 <span>（display:inline）；text-overflow/overflow 在 inline 上不生效，
-       需 inline-block 才能截断。max-inline-size 令其受父容器宽度约束，
-       vertical-align 避免 inline-block 基线下沉。 */
-    display: inline-block;
-    max-inline-size: 100%;
-    vertical-align: bottom;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  :global(.cd-typography--ellipsis-multi) {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: var(--cd-typo-clamp, 1);
-    line-clamp: var(--cd-typo-clamp, 1);
-    white-space: normal;
-    overflow: hidden;
-  }
-  /* showTooltip：Tooltip/Popover 触发包裹默认 inline-block 收缩到内容宽，
-     会让被包裹宿主的 max-inline-size:100% 退化为内容宽（永不溢出、tooltip 永不触发）。
-     当包裹的是省略宿主时，让包裹层撑满父容器宽度，使宽度约束正确传递到宿主。 */
-  :global(.cd-tooltip:has(> .cd-tooltip__trigger > .cd-typography--ellipsis)),
-  :global(.cd-tooltip:has(> .cd-tooltip__trigger > .cd-typography--ellipsis-multi)),
-  :global(.cd-popover:has(> .cd-popover__trigger > .cd-typography--ellipsis)),
-  :global(.cd-popover:has(> .cd-popover__trigger > .cd-typography--ellipsis-multi)) {
-    display: block;
-    max-inline-size: 100%;
-  }
-  :global(.cd-tooltip:has(> .cd-tooltip__trigger > .cd-typography--ellipsis) > .cd-tooltip__trigger),
-  :global(.cd-tooltip:has(> .cd-tooltip__trigger > .cd-typography--ellipsis-multi) > .cd-tooltip__trigger),
-  :global(.cd-popover:has(> .cd-popover__trigger > .cd-typography--ellipsis) > .cd-popover__trigger),
-  :global(.cd-popover:has(> .cd-popover__trigger > .cd-typography--ellipsis-multi) > .cd-popover__trigger) {
-    display: block;
-    max-inline-size: 100%;
-  }
-  :global(.cd-typography__action) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-inline-start: 4px;
-    padding: 2px;
-    border: 0;
-    background: transparent;
-    color: var(--cd-typography-action-color, var(--cd-color-text-2));
-    cursor: pointer;
-    border-radius: 3px;
-    vertical-align: middle;
-    transition: color var(--cd-motion-duration-fast, 120ms) ease;
-  }
-  :global(.cd-typography__action:hover) {
-    color: var(--cd-typography-action-color-hover, var(--cd-color-primary));
-  }
-  :global(.cd-typography__action:focus-visible) {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  :global(.cd-typography__action--copy.is-copied) {
-    color: var(--cd-color-success);
-  }
-  :global(.cd-typography__expand) {
-    margin-inline-start: 4px;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: var(--cd-color-link, var(--cd-color-primary));
-    cursor: pointer;
-    font: inherit;
-  }
-  :global(.cd-typography__expand:hover) {
-    color: var(--cd-color-link-hover, var(--cd-color-primary));
-  }
-  :global(.cd-typography__expand:focus-visible) {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-    border-radius: 2px;
-  }
-  :global(.cd-typography__edit-wrap) {
-    display: inline-block;
-    width: 100%;
-  }
-  :global(.cd-typography__edit-input) {
-    width: 100%;
-    box-sizing: border-box;
-    font: inherit;
-    color: inherit;
-    padding: 2px 6px;
-    border: 1px solid var(--cd-color-border, #d9d9d9);
-    border-radius: var(--cd-border-radius, 4px);
-    background: var(--cd-color-bg-1, #fff);
-    resize: none;
-    overflow: hidden;
-  }
-  :global(.cd-typography__edit-input:focus-visible) {
-    outline: none;
-    border-color: var(--cd-color-primary);
-    box-shadow: var(--cd-focus-ring);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    :global(.cd-typography__action) {
-      transition: none;
-    }
-  }
-</style>