@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/sidebar/types.d.ts

@@ -0,0 +1,70 @@
+import type { Snippet } from 'svelte';
+/** 单个 Options 图标 tab 项。对齐 Semi `{ icon, name, key }`。 */
+export interface SideBarOption {
+    /** 图标内容。 */
+    icon?: Snippet;
+    /** 可访问名 / tooltip 文案（图标 tab 的无障碍名来源）。 */
+    name: string;
+    /** 唯一 key。 */
+    key: string;
+}
+/** SideBar 展示模式：main 主视图，其余为详情视图（code/file/自定义 string）。 */
+export type SideBarMode = 'main' | 'code' | 'file' | (string & {});
+/**
+ * Annotation 单条引用条目（P2）。对齐 Semi `AnnotationItem`。
+ * `type='video'` 渲染带封面/时长/播放态的视频卡片；`type='text'`（默认）渲染
+ * 带站点 logo/名称/序号的文本卡片。`url` 存在时点击在新窗口打开来源。
+ */
+export interface SideBarAnnotationItem {
+    /** 条目类型。默认 'text'。 */
+    type?: 'video' | 'text';
+    /** 标题。 */
+    title?: string;
+    /** 来源 URL（存在则点击在新窗口打开）。 */
+    url?: string;
+    /** 摘要/详情（text 卡片正文）。 */
+    detail?: string;
+    /** 站点图标 URL。 */
+    logo?: string;
+    /** 站点名称。 */
+    siteName?: string;
+    /** 引用序号。 */
+    order?: number;
+    /** 视频封面图 URL（video 卡片）。 */
+    img?: string;
+    /** 视频时长（秒，video 卡片，本地化格式化为 mm:ss）。 */
+    duration?: number;
+    /** 单条点击回调（优先于分组级 onClick）。 */
+    onClick?: (event: Event, item: SideBarAnnotationItem) => void;
+}
+/**
+ * 单个 MCP 工具项（P3 MCPConfigure）。对齐 Semi `MCPReactOption`
+ * （= foundation `MCPOption` + `icon`/`desc` 渲染槽）。core `McpOptionCore`
+ * 只承载 headless 逻辑读取的字段（value/label/active/disabled），此处扩展渲染槽。
+ */
+export interface SideBarMcpOption {
+    /** 唯一标识（列表 key + 过滤/label 兜底）。 */
+    value: string;
+    /** 展示名（过滤主目标）。 */
+    label: string;
+    /** 前置图标：字符串按图片 URL 渲染，Snippet 自定义渲染。 */
+    icon?: string | Snippet;
+    /** 描述文案（副标题）。 */
+    desc?: string;
+    /** 是否启用。默认 false。 */
+    active?: boolean;
+    /** 启用开关是否锁定（预设工具，不可关闭）。默认 false。 */
+    disabled?: boolean;
+    /** 是否显示「配置」动作按钮（内置工具）。默认 false。 */
+    configure?: boolean;
+}
+/** Annotation 分组（一个折叠面板）。对齐 Semi `info[]` 元素。 */
+export interface SideBarAnnotationGroup {
+    /** 分组标题（折叠头部内容）。 */
+    header?: string;
+    /** 分组唯一 key（折叠 itemKey）。 */
+    key: string;
+    /** 该分组下的引用条目列表。 */
+    annotations: SideBarAnnotationItem[];
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/sidebar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,yDAAyD;AACzD,MAAM,WAAW,aAAa;IAC5B,YAAY;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,cAAc;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,2DAA2D;AAC3D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEnE;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC/D;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,iDAAiD;AACjD,MAAM,WAAW,sBAAsB;IACrC,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,mBAAmB;IACnB,WAAW,EAAE,qBAAqB,EAAE,CAAC;CACtC"}

package/dist/sidebar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/skeleton/Skeleton.svelte

@@ -1,131 +1,163 @@
 <!--
-  Skeleton — 骨架屏容器。
-  loading 切换占位/真实内容；active 控制 shimmer 动画（经 context 传给原子子组件）。
-  loading 受控不回写（红线 #1）：仅由父级 prop 驱动，组件内部不修改。
-  占位容器 aria-busy + aria-live=polite + aria-label；骨架块本身 aria-hidden。
-  unmountPlaceholder=true（默认）：{#if} 条件渲染，未激活的一侧从 DOM 卸载。
-  unmountPlaceholder=false（keepDOM）：占位与真实内容同时挂载，靠 display:none 切换，避免重挂开销。
+  Skeleton — 骨架屏容器，镜像 Semi semi-ui/skeleton/index.tsx。
+  loading=true 渲染 <div class="cd-skeleton">{placeholder}</div>；否则渲染 children。
+  active 仅挂根容器类 cd-skeleton--active，经后代选择器作用到骨架块（对齐 Semi，不用 context）。
+  本组件的 <style> 以 :global 承载全部骨架块样式（镜像 Semi skeleton.scss 单一全局样式表），
+  故原子子组件（Avatar/Image/Title/Button/Paragraph）只输出裸 DOM + 类名，样式统一在此定义。
+  loading 受控不回写：仅由父级 prop 驱动，组件内部不修改。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { setContext } from 'svelte';
-  import { SKELETON_KEY, type SkeletonContext } from './context.js';
-  import SkeletonAvatar from './SkeletonAvatar.svelte';
-  import SkeletonTitle from './SkeletonTitle.svelte';
-  import SkeletonParagraph from './SkeletonParagraph.svelte';
-  import { useLocale } from '../locale-provider/index.js';
 
   interface Props {
+    /** 为 true 时显示占位元素，反之显示子组件。对齐 Semi，默认 true。 */
     loading?: boolean;
+    /** 是否展示 shimmer 动画效果。对齐 Semi，默认 false。 */
     active?: boolean;
-    unmountPlaceholder?: boolean;
+    /** 加载等待时的占位元素。 */
     placeholder?: Snippet;
+    /** 真实内容。 */
     children?: Snippet;
-    ariaLabel?: string;
+    /** 容器类名，对齐 Semi className。 */
     class?: string;
+    /** 容器内联样式，对齐 Semi style。 */
+    style?: string;
   }
 
   let {
     loading = true,
     active = false,
-    // unmountPlaceholder=true（默认）走 {#if} 卸载；false 走 keepDOM（display:none 切换）。
-    unmountPlaceholder = true,
     placeholder,
     children,
-    ariaLabel,
     class: className,
+    style,
   }: Props = $props();
 
-  const loc = useLocale();
-
-  // setContext 一个带 getter 的对象：原子子组件读取 ctx.active 即建立响应式依赖。
-  const ctx: SkeletonContext = {
-    get active() {
-      return active;
-    },
-  };
-  setContext(SKELETON_KEY, ctx);
-
   const cls = $derived(
     ['cd-skeleton', active && 'cd-skeleton--active', className]
       .filter(Boolean)
       .join(' '),
   );
-
-  // 状态渲染派生纯函数（红线 #2）：仅由入参算出隐藏标记，不产生副作用。
-  function hidden(isLoading: boolean, showWhenLoading: boolean): boolean {
-    return showWhenLoading ? !isLoading : isLoading;
-  }
 </script>
 
-{#snippet placeholderBody()}
-  {#if placeholder}
-    {@render placeholder()}
-  {:else}
-    <div class="cd-skeleton__default">
-      <SkeletonAvatar />
-      <div class="cd-skeleton__default-body">
-        <SkeletonTitle />
-        <SkeletonParagraph />
-      </div>
-    </div>
-  {/if}
-{/snippet}
-
-{#if unmountPlaceholder}
-  {#if loading}
-    <div class={cls} role="status" aria-busy="true" aria-live="polite" aria-label={ariaLabel ?? loc().t('Skeleton.loading')}>
-      {@render placeholderBody()}
-    </div>
-  {:else}
-    {@render children?.()}
-  {/if}
-{:else}
-  <!-- keepDOM：两侧均挂载，靠 display:none 切换；隐藏侧加 inert/aria-hidden 防焦点与朗读。 -->
-  <div
-    class={cls}
-    role="status"
-    aria-busy="true"
-    aria-live="polite"
-    aria-label={ariaLabel ?? loc().t('Skeleton.loading')}
-    aria-hidden={hidden(loading, true) ? 'true' : undefined}
-    inert={hidden(loading, true)}
-    hidden={hidden(loading, true)}
-  >
-    {@render placeholderBody()}
-  </div>
-  <div
-    class="cd-skeleton__content"
-    aria-hidden={hidden(loading, false) ? 'true' : undefined}
-    inert={hidden(loading, false)}
-    hidden={hidden(loading, false)}
-  >
-    {@render children?.()}
+{#if loading}
+  <div class={cls} {style}>
+    {@render placeholder?.()}
   </div>
+{:else}
+  {@render children?.()}
 {/if}
 
 <style>
-  .cd-skeleton {
-    display: block;
-  }
-  .cd-skeleton__content {
-    display: contents;
-  }
-  /* keepDOM 隐藏侧：[hidden] 须压过 .cd-skeleton 的 display:block 与 __content 的 display:contents。 */
-  .cd-skeleton[hidden],
-  .cd-skeleton__content[hidden] {
-    display: none;
-  }
-  .cd-skeleton__default {
-    display: flex;
-    gap: var(--cd-skeleton-gap);
-    align-items: flex-start;
-  }
-  .cd-skeleton__default-body {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    gap: var(--cd-skeleton-gap);
-    min-inline-size: 0;
+  /* —— 镜像 Semi semi-foundation/skeleton/skeleton.scss（全局，跨原子子组件后代选择器生效） —— */
+
+  /* 基础块底色 + 圆角（avatar / image / title / button） */
+  :global(.cd-skeleton-avatar),
+  :global(.cd-skeleton-image),
+  :global(.cd-skeleton-title),
+  :global(.cd-skeleton-button) {
+    background: var(--cd-color-skeleton-default-bg-default);
+    border-radius: var(--cd-radius-skeleton-item);
+  }
+
+  /* Avatar 形状 */
+  :global(.cd-skeleton-avatar-circle) {
+    border-radius: 50%;
+  }
+  :global(.cd-skeleton-avatar-extra-extra-small) {
+    width: var(--cd-width-skeleton-avatar-extra-extra-small);
+    height: var(--cd-width-skeleton-avatar-extra-extra-small);
+  }
+  :global(.cd-skeleton-avatar-extra-small) {
+    width: var(--cd-width-skeleton-avatar-extra-small);
+    height: var(--cd-width-skeleton-avatar-extra-small);
+  }
+  :global(.cd-skeleton-avatar-small) {
+    width: var(--cd-width-skeleton-avatar-small);
+    height: var(--cd-width-skeleton-avatar-small);
+  }
+  :global(.cd-skeleton-avatar-medium) {
+    width: var(--cd-width-skeleton-avatar-medium);
+    height: var(--cd-width-skeleton-avatar-medium);
+  }
+  :global(.cd-skeleton-avatar-large) {
+    width: var(--cd-width-skeleton-avatar-large);
+    height: var(--cd-width-skeleton-avatar-large);
+  }
+  :global(.cd-skeleton-avatar-extra-large) {
+    width: var(--cd-width-skeleton-avatar-extra-large);
+    height: var(--cd-width-skeleton-avatar-extra-large);
+  }
+
+  /* Paragraph：ul + li，首行 100%、末行 60%，其余 100%，行下 margin */
+  :global(.cd-skeleton-paragraph) {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  :global(.cd-skeleton-paragraph li) {
+    background: var(--cd-color-skeleton-default-bg-default);
+    border-radius: var(--cd-radius-skeleton-li);
+    width: 100%;
+    height: var(--cd-height-skeleton-li);
+    margin-bottom: var(--cd-spacing-skeleton-li-marginbottom);
+  }
+  :global(.cd-skeleton-paragraph li:last-child) {
+    width: 60%;
+    margin-bottom: 0;
+  }
+  :global(.cd-skeleton-paragraph li:first-child) {
+    width: 100%;
+  }
+
+  /* Title */
+  :global(.cd-skeleton-title) {
+    width: 100%;
+    height: var(--cd-height-skeleton-title);
+  }
+
+  /* Button */
+  :global(.cd-skeleton-button) {
+    width: var(--cd-width-skeleton-button);
+    height: var(--cd-height-skeleton-button);
+  }
+
+  /* Image */
+  :global(.cd-skeleton-image) {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* active shimmer：根容器类经后代选择器作用到各块（对齐 Semi 渐变 25% / 44% / 88%） */
+  :global(.cd-skeleton--active .cd-skeleton-avatar),
+  :global(.cd-skeleton--active .cd-skeleton-image),
+  :global(.cd-skeleton--active .cd-skeleton-title),
+  :global(.cd-skeleton--active .cd-skeleton-button),
+  :global(.cd-skeleton--active .cd-skeleton-paragraph li) {
+    background: linear-gradient(
+      90deg,
+      var(--cd-color-skeleton-default-bg-default) 25%,
+      var(--cd-color-skeleton-loading-gradient-bg-active) 44%,
+      var(--cd-color-skeleton-default-bg-default) 88%
+    );
+    background-size: 400% 100%;
+    animation: cd-skeleton-loading
+      var(--cd-animation-duration-skeleton-highlight)
+      var(--cd-animation-function-skeleton-highlight) infinite;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes cd-skeleton-loading {
+    0% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0 50%;
+    }
+  }
+
+  /* RTL：镜像 Semi rtl.scss */
+  :global([dir='rtl'] .cd-skeleton) {
+    direction: rtl;
   }
 </style>

package/dist/skeleton/Skeleton.svelte.d.ts

@@ -1,12 +1,17 @@
 import type { Snippet } from 'svelte';
 interface Props {
+    /** 为 true 时显示占位元素，反之显示子组件。对齐 Semi，默认 true。 */
     loading?: boolean;
+    /** 是否展示 shimmer 动画效果。对齐 Semi，默认 false。 */
     active?: boolean;
-    unmountPlaceholder?: boolean;
+    /** 加载等待时的占位元素。 */
     placeholder?: Snippet;
+    /** 真实内容。 */
     children?: Snippet;
-    ariaLabel?: string;
+    /** 容器类名，对齐 Semi className。 */
     class?: string;
+    /** 容器内联样式，对齐 Semi style。 */
+    style?: string;
 }
 declare const Skeleton: import("svelte").Component<Props, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;

package/dist/skeleton/Skeleton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.svelte.d.ts","sourceRoot":"","sources":["../../src/skeleton/Skeleton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AASpC,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiFH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Skeleton.svelte.d.ts","sourceRoot":"","sources":["../../src/skeleton/Skeleton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkCH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/skeleton/SkeletonAvatar.svelte

@@ -1,82 +1,39 @@
 <!--
-  SkeletonAvatar — 头像骨架块（圆形 / 方形）。
-  size 映射 small 24 / default 32 / large 40 / 数字直接 px。
-  active 优先从 context 读（无 context 默认 false）。
+  SkeletonAvatar — 头像占位块，镜像 Semi Skeleton.Avatar（item.tsx generator('avatar')）。
+  尺寸由 size 类（6 档）决定，形状由 shape 类决定；circle → border-radius:50%。
+  样式在 Skeleton.svelte 以 :global 全局定义（含 active 后代选择器），本组件只出裸 DOM。
 -->
 <script lang="ts">
-  import { getContext } from 'svelte';
-  import { SKELETON_KEY, type SkeletonContext } from './context.js';
+  export type SkeletonAvatarSize =
+    | 'extra-extra-small'
+    | 'extra-small'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'extra-large';
+  export type SkeletonAvatarShape = 'circle' | 'square';
 
   interface Props {
-    shape?: 'circle' | 'square';
-    size?: 'small' | 'default' | 'large' | number;
+    /** 头像大小，对齐 Semi 6 档，默认 medium。 */
+    size?: SkeletonAvatarSize;
+    /** 头像形状，对齐 Semi，默认 circle。 */
+    shape?: SkeletonAvatarShape;
     class?: string;
     style?: string;
   }
 
-  let { shape = 'circle', size = 'default', class: className, style }: Props = $props();
+  let { size = 'medium', shape = 'circle', class: className, style }: Props = $props();
 
-  const ctx = getContext<SkeletonContext | undefined>(SKELETON_KEY);
-  const active = $derived(ctx?.active ?? false);
-
-  const px = $derived.by(() => {
-    if (typeof size === 'number') return size;
-    if (size === 'small') return 24;
-    if (size === 'large') return 40;
-    return 32;
-  });
-  const radius = $derived(
-    shape === 'circle'
-      ? 'var(--cd-skeleton-radius-pill)'
-      : 'var(--cd-skeleton-radius)',
-  );
   const cls = $derived(
-    ['cd-skeleton__block', 'cd-skeleton__avatar', className].filter(Boolean).join(' '),
+    [
+      'cd-skeleton-avatar',
+      `cd-skeleton-avatar-${size}`,
+      `cd-skeleton-avatar-${shape}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
   );
 </script>
 
-<div
-  class={cls}
-  class:cd-skeleton__block--active={active}
-  aria-hidden="true"
-  style="inline-size:{px}px; block-size:{px}px; border-radius:{radius}; {style ?? ''}"
-></div>
-
-<style>
-  .cd-skeleton__avatar {
-    flex: 0 0 auto;
-  }
-
-  .cd-skeleton__block {
-    background: var(--cd-skeleton-color-bg);
-    border-radius: var(--cd-skeleton-radius);
-  }
-  .cd-skeleton__block--active {
-    background-image: linear-gradient(
-      90deg,
-      var(--cd-skeleton-color-bg) 25%,
-      var(--cd-skeleton-color-highlight) 37%,
-      var(--cd-skeleton-color-bg) 63%
-    );
-    background-size: 400% 100%;
-    animation: -global-cd-skeleton-shimmer var(--cd-skeleton-anim-duration)
-      var(--cd-skeleton-anim-timing) infinite;
-  }
-
-  @keyframes -global-cd-skeleton-shimmer {
-    0% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0 50%;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cd-skeleton__block--active {
-      animation: none;
-      background-image: none;
-      background: var(--cd-skeleton-color-bg);
-    }
-  }
-</style>
+<div class={cls} {style}></div>

package/dist/skeleton/SkeletonAvatar.svelte.d.ts

@@ -1,6 +1,10 @@
+export type SkeletonAvatarSize = 'extra-extra-small' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+export type SkeletonAvatarShape = 'circle' | 'square';
 interface Props {
-    shape?: 'circle' | 'square';
-    size?: 'small' | 'default' | 'large' | number;
+    /** 头像大小，对齐 Semi 6 档，默认 medium。 */
+    size?: SkeletonAvatarSize;
+    /** 头像形状，对齐 Semi，默认 circle。 */
+    shape?: SkeletonAvatarShape;
     class?: string;
     style?: string;
 }

package/dist/skeleton/SkeletonAvatar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonAvatar.svelte.d.ts","sourceRoot":"","sources":["../../src/skeleton/SkeletonAvatar.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkCH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SkeletonAvatar.svelte.d.ts","sourceRoot":"","sources":["../../src/skeleton/SkeletonAvatar.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,kBAAkB,GAC1B,mBAAmB,GACnB,aAAa,GACb,OAAO,GACP,QAAQ,GACR,OAAO,GACP,aAAa,CAAC;AAClB,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEtD,UAAU,KAAK;IACb,kCAAkC;IAClC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,8BAA8B;IAC9B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/skeleton/SkeletonButton.svelte

@@ -1,90 +1,19 @@
 <!--
-  SkeletonButton — 按钮骨架块（矩形 / 胶囊）。
-  size 映射高度 small 24 / default 32 / large 40；block 时宽 100%，否则默认约 64px。
-  active 优先从 context 读（无 context 默认 false）。
+  SkeletonButton — 按钮占位块，镜像 Semi Skeleton.Button（item.tsx generator('button')）。
+  默认 width:115px / height:32px（由 :global .cd-skeleton-button 定义）。
+  尺寸自定义经 style/class 透传。
 -->
 <script lang="ts">
-  import { getContext } from 'svelte';
-  import { SKELETON_KEY, type SkeletonContext } from './context.js';
-
   interface Props {
-    size?: 'small' | 'default' | 'large';
-    block?: boolean;
-    pill?: boolean;
-    width?: string | number;
     class?: string;
     style?: string;
   }
 
-  let {
-    size = 'default',
-    block = false,
-    pill = false,
-    width,
-    class: className,
-    style,
-  }: Props = $props();
-
-  const ctx = getContext<SkeletonContext | undefined>(SKELETON_KEY);
-  const active = $derived(ctx?.active ?? false);
+  let { class: className, style }: Props = $props();
 
-  const heightPx = $derived(size === 'small' ? 24 : size === 'large' ? 40 : 32);
-  const inlineSize = $derived.by(() => {
-    if (block) return '100%';
-    if (width !== undefined) return typeof width === 'number' ? `${width}px` : width;
-    return '64px';
-  });
-  const radius = $derived(
-    pill ? 'var(--cd-skeleton-radius-pill)' : 'var(--cd-skeleton-radius)',
-  );
   const cls = $derived(
-    ['cd-skeleton__block', 'cd-skeleton__button', className].filter(Boolean).join(' '),
+    ['cd-skeleton-button', className].filter(Boolean).join(' '),
   );
 </script>
 
-<div
-  class={cls}
-  class:cd-skeleton__block--active={active}
-  aria-hidden="true"
-  style="inline-size:{inlineSize}; block-size:{heightPx}px; border-radius:{radius}; {style ??
-    ''}"
-></div>
-
-<style>
-  .cd-skeleton__button {
-    display: inline-block;
-  }
-
-  .cd-skeleton__block {
-    background: var(--cd-skeleton-color-bg);
-    border-radius: var(--cd-skeleton-radius);
-  }
-  .cd-skeleton__block--active {
-    background-image: linear-gradient(
-      90deg,
-      var(--cd-skeleton-color-bg) 25%,
-      var(--cd-skeleton-color-highlight) 37%,
-      var(--cd-skeleton-color-bg) 63%
-    );
-    background-size: 400% 100%;
-    animation: -global-cd-skeleton-shimmer var(--cd-skeleton-anim-duration)
-      var(--cd-skeleton-anim-timing) infinite;
-  }
-
-  @keyframes -global-cd-skeleton-shimmer {
-    0% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0 50%;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cd-skeleton__block--active {
-      animation: none;
-      background-image: none;
-      background: var(--cd-skeleton-color-bg);
-    }
-  }
-</style>
+<div class={cls} {style}></div>

package/dist/skeleton/SkeletonButton.svelte.d.ts

@@ -1,8 +1,4 @@
 interface Props {
-    size?: 'small' | 'default' | 'large';
-    block?: boolean;
-    pill?: boolean;
-    width?: string | number;
     class?: string;
     style?: string;
 }

package/dist/skeleton/SkeletonButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonButton.svelte.d.ts","sourceRoot":"","sources":["../../src/skeleton/SkeletonButton.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwCH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SkeletonButton.svelte.d.ts","sourceRoot":"","sources":["../../src/skeleton/SkeletonButton.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}