@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/image/meta.js

@@ -1,130 +1,140 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
- * Image — see specs/components/show/Image.spec.md
+ * Image — 全面对齐 Semi Image / ImagePreview（semi-ui/image）。
+ * props 表逐条镜像 Semi API（spec §4 契约）。
  */
 export const meta = {
     name: 'Image',
     category: 'show',
-    description: '图片：支持懒加载（原生 loading=lazy 或 IntersectionObserver）、object-fit/position、占位（骨架或 LQIP 模糊占位图 + 主图淡入）、加载失败降级（降级图/默认破图/自定义 slot）与点击全屏预览（portal 遮罩 + 缩放/旋转 + Esc 关闭）。配合 Image.PreviewGroup 包裹多张图可在预览态左右切换（← → 按钮 + 键盘箭头）。',
-    exports: ['Image', 'Image.PreviewGroup'],
+    description: '图片：加载态机（loading 骨架/自定义占位 → success → error 降级图/自定义/默认破图），success 且 preview 时 hover 蒙层 + 点击进全屏预览。预览浮层（ImagePreview）对齐 Semi：底部工具栏含上一张/页码/下一张、缩放 Slider、放大/缩小、原始尺寸↔适应页面切换、旋转、下载，支持鼠标滚轮以指针为锚缩放、超出容器拖拽平移、无限循环、预加载、无操作自动隐藏工具栏、renderHeader/renderPreviewMenu(menuItems)/renderCloseIcon/renderLeftIcon/renderRightIcon 自定义槽。ImagePreview 既可包裹多个 <Image> 做组预览，也可独立传 src 编程式控制。',
+    exports: ['Image', 'ImagePreview'],
     props: [
-        { name: 'src', type: 'string', default: '—', desc: '图片地址（必填）' },
-        { name: 'alt', type: 'string', default: "''", desc: '替代文本' },
-        { name: 'width', type: 'number|string', default: 'undefined', desc: '容器宽，number 视为 px' },
-        { name: 'height', type: 'number|string', default: 'undefined', desc: '容器高，number 视为 px' },
+        { name: 'src', type: 'string', default: 'undefined', desc: '图片获取地址' },
+        { name: 'alt', type: 'string', default: "''", desc: '图像描述' },
+        { name: 'width', type: 'number|string', default: 'undefined', desc: '图片显示宽度，number 视为 px' },
+        { name: 'height', type: 'number|string', default: 'undefined', desc: '图片显示高度，number 视为 px' },
+        { name: 'placeholder', type: 'Snippet', default: 'undefined', desc: '加载中占位内容（不传用 SkeletonImage 骨架）' },
         {
-            name: 'fit',
-            type: "'fill'|'contain'|'cover'|'none'|'scale-down'",
-            default: "'fill'",
-            desc: 'object-fit',
-        },
-        { name: 'position', type: 'string', default: "'center'", desc: 'object-position' },
-        {
-            name: 'crossorigin',
-            type: "'anonymous'|'use-credentials'",
-            default: 'undefined',
-            desc: '原生 crossorigin 属性透传（跨域取图 CORS 模式）',
-        },
-        {
-            name: 'srcset',
-            type: 'string',
-            default: 'undefined',
-            desc: '原生 srcset 响应式图源集透传（observer 懒加载下与 src 同步延迟设置）',
-        },
-        {
-            name: 'sizes',
-            type: 'string',
+            name: 'fallback',
+            type: 'string|Snippet',
             default: 'undefined',
-            desc: '原生 sizes 属性透传，配合 srcset 声明视口对应的图片显示尺寸',
+            desc: '加载失败：string=降级图 src；Snippet=自定义内容；不传=默认破图 icon',
         },
-        { name: 'lazy', type: 'boolean', default: 'true', desc: '是否懒加载' },
         {
-            name: 'lazyMode',
-            type: "'native'|'observer'",
-            default: "'native'",
-            desc: '懒加载方式：原生属性或 IntersectionObserver',
-        },
-        { name: 'rootMargin', type: 'string', default: "'200px'", desc: 'observer 模式预加载边距' },
-        {
-            name: 'placeholder',
-            type: 'string|boolean',
-            default: 'true',
-            desc: 'true=骨架占位；string=LQIP 低质占位图 src（CSS blur 模糊，主图加载完成后淡入清晰）；false=无占位',
-        },
-        {
-            name: 'fallback',
-            type: 'string|boolean',
+            name: 'preview',
+            type: 'boolean|PreviewProps',
             default: 'true',
-            desc: 'true=默认破图占位；string=降级图 src；false=用 errorSlot',
+            desc: '预览：false 禁用；true 开启；对象=预览参数（含 src 覆盖预览图、visible 受控等）',
         },
-        { name: 'preview', type: 'boolean', default: 'false', desc: '点击图片打开全屏预览' },
+        { name: 'crossorigin', type: "'anonymous'|'use-credentials'", default: 'undefined', desc: '透传给原生 img 的 crossorigin' },
+        { name: 'imgCls', type: 'string', default: 'undefined', desc: '透传给 img 节点的自定义类名（对齐 Semi imgCls）' },
+        { name: 'imgStyle', type: 'string', default: 'undefined', desc: '透传给 img 节点的自定义内联样式（对齐 Semi imgStyle）' },
+        { name: 'setDownloadName', type: '(src: string) => string', default: 'undefined', desc: '设置预览下载文件名' },
+        { name: 'onClick', type: '(e: MouseEvent) => void', default: 'undefined', desc: '点击图片回调' },
+        { name: 'onError', type: '(e: Event) => void', default: 'undefined', desc: '加载错误回调' },
+        { name: 'onLoad', type: '(e: Event) => void', default: 'undefined', desc: '加载成功回调' },
         { name: 'class', type: 'string', default: "''", desc: '根类名透传' },
-        { name: 'errorSlot', type: 'Snippet', default: 'undefined', desc: 'fallback=false 时的错误内容' },
-        { name: 'placeholderSlot', type: 'Snippet', default: 'undefined', desc: '自定义占位内容' },
+        { name: 'style', type: 'string', default: "''", desc: '根内联样式透传' },
     ],
     events: [],
     subComponents: [
         {
-            name: 'Image.PreviewGroup',
-            desc: '预览组：包裹多个 <Image preview>，共享一个预览浮层，点任一图进入组预览可左右切换。',
+            name: 'ImagePreview',
+            desc: '预览组 / 独立可编程预览：包裹多个 <Image> 做组预览可左右切换；或独立传 src=string|string[] + visible/onVisibleChange 编程式控制。',
             props: [
-                { name: 'current', type: 'number', default: 'undefined', desc: '受控：当前预览图索引（不回写，仅 onChange 回调）' },
-                { name: 'visible', type: 'boolean', default: 'undefined', desc: '受控：预览是否可见（不回写，仅 onVisibleChange 回调）' },
-                { name: 'onChange', type: '(index: number) => void', default: 'undefined', desc: '当前预览图索引变化回调' },
-                { name: 'onVisibleChange', type: '(visible: boolean) => void', default: 'undefined', desc: '预览开关变化回调' },
-                { name: 'children', type: 'Snippet', default: 'undefined', desc: '组内的 <Image> 列表' },
+                { name: 'src', type: 'string|string[]', default: 'undefined', desc: '预览图源列表（独立用法）' },
+                { name: 'visible', type: 'boolean', default: 'undefined', desc: '受控：是否预览（不回写，仅 onVisibleChange）' },
+                { name: 'defaultVisible', type: 'boolean', default: 'false', desc: '首次是否开启预览' },
+                { name: 'currentIndex', type: 'number', default: 'undefined', desc: '受控：当前预览图下标（不回写，仅 onChange）' },
+                { name: 'defaultCurrentIndex', type: 'number', default: '0', desc: '首次展示图片下标' },
+                { name: 'maskClosable', type: 'boolean', default: 'true', desc: '点击遮罩是否可关闭' },
+                { name: 'closable', type: 'boolean', default: 'true', desc: '是否显示关闭按钮' },
+                { name: 'closeOnEsc', type: 'boolean', default: 'true', desc: '点击 esc 关闭预览' },
+                { name: 'infinite', type: 'boolean', default: 'false', desc: '是否无限循环切换' },
+                { name: 'zoomStep', type: 'number', default: '0.1', desc: '每次缩小/放大比例' },
+                { name: 'maxZoom', type: 'number', default: '5', desc: '最大缩放比例' },
+                { name: 'minZoom', type: 'number', default: '0.1', desc: '最小缩放比例' },
+                { name: 'initialZoom', type: 'number', default: 'undefined', desc: '初始缩放比例（每图首帧生效一次，受 min/maxZoom 限制）' },
+                { name: 'lazyLoad', type: 'boolean', default: 'true', desc: '组内子图是否懒加载（IntersectionObserver）' },
+                { name: 'lazyLoadMargin', type: 'string', default: "'0px 100px 100px 0px'", desc: 'observer rootMargin' },
+                { name: 'preLoad', type: 'boolean', default: 'true', desc: '是否预加载相邻图片' },
+                { name: 'preLoadGap', type: 'number', default: '2', desc: '预加载步长' },
+                { name: 'showTooltip', type: 'boolean', default: 'false', desc: '是否展示底部操作区 Tooltip 提示' },
+                { name: 'disableDownload', type: 'boolean', default: 'false', desc: '禁用下载（含右键）' },
+                { name: 'viewerVisibleDelay', type: 'number', default: '10000', desc: '隐藏操作按钮前的无操作时长(ms)' },
+                { name: 'zIndex', type: 'number', default: '1070', desc: '预览层层级' },
+                { name: 'getPopupContainer', type: '() => HTMLElement', default: 'undefined', desc: '指定预览浮层父级 DOM（需 position:relative）' },
+                { name: 'setDownloadName', type: '(src: string) => string', default: 'undefined', desc: '设置下载文件名' },
+                { name: 'prevTip / nextTip / zoomInTip / zoomOutTip / rotateTip / downloadTip / adaptiveTip / originTip', type: 'string', default: 'locale', desc: '各操作按钮 Tooltip 文案（缺省走 locale）' },
+                { name: 'renderHeader', type: 'Snippet<[title]>', default: 'undefined', desc: '自定义预览顶部区（收到当前 title）' },
+                { name: 'renderPreviewMenu', type: 'Snippet<[MenuProps]>', default: 'undefined', desc: '自定义底部菜单（MenuProps.menuItems 为默认按钮 Snippet 数组）' },
+                { name: 'renderCloseIcon / renderLeftIcon / renderRightIcon', type: 'Snippet', default: 'undefined', desc: '自定义关闭/左切换/右切换图标' },
+                { name: 'onVisibleChange', type: '(visible: boolean) => void', default: 'undefined', desc: '预览开关变化' },
+                { name: 'onChange', type: '(index: number) => void', default: 'undefined', desc: '切换图片' },
+                { name: 'onClose', type: '() => void', default: 'undefined', desc: '关闭回调' },
+                { name: 'onPrev / onNext', type: '(index: number) => void', default: 'undefined', desc: '向前/向后切换回调' },
+                { name: 'onZoomIn / onZoomOut', type: '(zoom: number) => void', default: 'undefined', desc: '放大/缩小回调' },
+                { name: 'onRotateLeft', type: '(angle: number) => void', default: 'undefined', desc: '旋转回调' },
+                { name: 'onRatioChange', type: '(type: "adaptation"|"realSize") => void', default: 'undefined', desc: '原始尺寸/适应切换回调' },
+                { name: 'onDownload', type: '(src, index) => void', default: 'undefined', desc: '下载回调' },
+                { name: 'onDownloadError', type: '(src) => void', default: 'undefined', desc: '下载失败回调' },
             ],
         },
     ],
     slots: [
-        { name: 'errorSlot', desc: '加载失败自定义内容（fallback=false 时）' },
-        { name: 'placeholderSlot', desc: '加载中自定义占位内容' },
+        { name: 'placeholder', desc: '加载中自定义占位内容' },
+        { name: 'fallback', desc: '加载失败自定义内容（fallback 为 Snippet 时）' },
     ],
     a11y: {
         role: 'img',
-        keyboard: ['Enter', 'Space', 'Escape', 'ArrowLeft', 'ArrowRight'],
+        keyboard: ['Escape', 'ArrowLeft', 'ArrowRight'],
         focusable: true,
         notes: [
             'img 必传 alt 语义；默认破图占位用 role=img + aria-label',
-            'preview 触发器为原生 button，可键盘聚焦与触发',
-            '预览遮罩 role=dialog、aria-modal=true，portal 到 body；useFocusTrap 锁定焦点（Tab 循环不外泄）、进入聚焦关闭按钮、关闭后焦点归还触发元素；Esc 关闭，关闭按钮有 aria-label',
-            '组预览左右切换：← → 按钮（aria-label 经 locale）+ 键盘左右箭头，到边界按钮 disabled',
-            '装饰性占位/遮罩文案、页码计数器 aria-hidden=true',
+            '预览遮罩 role=dialog、aria-modal=true，portal 到 getPopupContainer/body；useFocusTrap 锁定焦点、Esc 关闭、useScrollLock 锁背景滚动',
+            '组/独立预览左右切换：中部 ← → 按钮 + 键盘左右箭头（到边界按钮隐藏，infinite 时循环）',
+            '翻页经 LiveAnnouncer polite 播报「第 m 张，共 n 张」',
         ],
     },
     tokens: [
-        '--cd-image-bg',
         '--cd-image-radius',
-        '--cd-image-placeholder-color',
         '--cd-image-mask-bg',
-        '--cd-image-mask-color',
-        '--cd-image-preview-overlay',
+        '--cd-image-mask-info-text',
+        '--cd-image-status-bg',
+        '--cd-image-status-color',
+        '--cd-image-preview-bg',
+        '--cd-image-preview-icon-color',
+        '--cd-image-preview-icon-bg',
+        '--cd-image-preview-icon-size',
+        '--cd-image-preview-icon-offset-x',
+        '--cd-image-preview-header-color',
+        '--cd-image-preview-header-height',
+        '--cd-image-preview-footer-bg',
+        '--cd-image-preview-footer-icon-color',
+        '--cd-image-preview-footer-radius',
+        '--cd-image-preview-footer-slider-width',
+        '--cd-image-preview-divider-bg',
+        '--cd-image-preview-disabled-color',
+        '--cd-image-preview-image-spin-color',
         '--cd-image-preview-z',
-        '--cd-focus-ring',
-        '--cd-border-radius-full',
-        '--cd-motion-duration-fast',
     ],
     examples: [
-        { title: '基础', code: '<Image src="/a.jpg" alt="示例" width={200} />' },
-        {
-            title: '懒加载 observer + 预览',
-            code: '<Image src="/big.jpg" alt="大图" lazy lazyMode="observer" preview />',
-        },
+        { title: '基础', code: '<Image src="/a.jpg" alt="示例" width={360} height={200} />' },
         {
-            title: 'LQIP 模糊占位',
-            code: '<Image src="/hi-res.jpg" placeholder="/lqip-tiny.jpg" alt="高清图" />',
+            title: '加载失败降级图',
+            code: '<Image src="/broken.jpg" width={200} height={200} fallback="/placeholder.png" />',
         },
         {
-            title: '响应式图源 srcset/sizes',
-            code: '<Image\n  src="/img-800.jpg"\n  srcset="/img-400.jpg 400w, /img-800.jpg 800w, /img-1600.jpg 1600w"\n  sizes="(max-width: 600px) 400px, 800px"\n  alt="响应式图"\n/>',
+            title: '自定义预览图',
+            code: '<Image src="/small.jpg" width={300} preview={{ src: "/big.jpg" }} />',
         },
         {
-            title: '跨域 crossorigin',
-            code: '<Image src="https://cdn.example.com/a.jpg" crossorigin="anonymous" alt="跨域图" />',
+            title: '多图预览组',
+            code: '<ImagePreview>\n  <Image src="/a.jpg" alt="A" width={200} />\n  <Image src="/b.jpg" alt="B" width={200} />\n</ImagePreview>',
         },
         {
-            title: '预览组多图切换',
-            code: '<Image.PreviewGroup>\n  <Image src="/a.jpg" alt="A" preview />\n  <Image src="/b.jpg" alt="B" preview />\n  <Image src="/c.jpg" alt="C" preview />\n</Image.PreviewGroup>',
+            title: '独立编程式预览',
+            code: '<ImagePreview src={["/a.jpg", "/b.jpg"]} visible={open} onVisibleChange={(v) => (open = v)} />',
         },
     ],
 };

package/dist/image/previewContext.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+/**
+ * 预览组上下文（对齐 Semi image/previewContext.tsx）。
+ * ImagePreview（组）通过它向子 Image 广播组态、收集子图 src/title；
+ * 子 Image 点击时 setCurrentIndex + handleVisibleChange 请求组浮层打开到自身。
+ */
+export interface ImagePreviewGroupContext {
+    isGroup: true;
+    /** 组是否开启子图懒加载（IntersectionObserver）。 */
+    lazyLoad: boolean;
+    /** 懒加载 observer rootMargin（对齐 Semi lazyLoadMargin）。 */
+    lazyLoadMargin: string;
+    /** 子 Image 注册自身，返回稳定 imageID（注册顺序）；src/title 用 getter 保持响应性。 */
+    register: (item: {
+        getSrc: () => string;
+        getTitle: () => string | Snippet | undefined;
+    }) => number;
+    /** 子 Image 卸载时注销。 */
+    unregister: (imageID: number) => void;
+    /** 请求把组当前索引设为指定图。 */
+    setCurrentIndex: (index: number) => void;
+    /** 请求切换组预览可见性。 */
+    handleVisibleChange: (visible: boolean) => void;
+    /** 组级自定义下载文件名。 */
+    setDownloadName?: ((src: string) => string) | undefined;
+}
+export declare function setImagePreviewGroupContext(ctx: ImagePreviewGroupContext): void;
+export declare function getImagePreviewGroupContext(): ImagePreviewGroupContext | undefined;
+//# sourceMappingURL=previewContext.d.ts.map

package/dist/image/previewContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"previewContext.d.ts","sourceRoot":"","sources":["../../src/image/previewContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,IAAI,CAAC;IACd,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,cAAc,EAAE,MAAM,CAAC;IACvB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,MAAM,EAAE,MAAM,MAAM,CAAC;QACrB,QAAQ,EAAE,MAAM,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;KAC9C,KAAK,MAAM,CAAC;IACb,qBAAqB;IACrB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,qBAAqB;IACrB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,kBAAkB;IAClB,mBAAmB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,kBAAkB;IAClB,eAAe,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;CACzD;AAID,wBAAgB,2BAA2B,CAAC,GAAG,EAAE,wBAAwB,GAAG,IAAI,CAE/E;AAED,wBAAgB,2BAA2B,IAAI,wBAAwB,GAAG,SAAS,CAElF"}

package/dist/image/previewContext.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('cd-image-preview-group');
+export function setImagePreviewGroupContext(ctx) {
+    setContext(KEY, ctx);
+}
+export function getImagePreviewGroupContext() {
+    return getContext(KEY);
+}

package/dist/image/previewGeometry.d.ts

@@ -0,0 +1,70 @@
+/**
+ * previewGeometry — 预览图缩放/旋转/平移的纯几何计算（无框架依赖、无 DOM）。
+ * 逐一移植自 Semi semi-foundation/image/previewImageFoundation.ts，供 PreviewImage 消费。
+ * 纯函数 → 可单测（红线 #2：派生几何为纯函数）。
+ */
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Translate {
+    x: number;
+    y: number;
+}
+export interface DragDirection {
+    canDragVertical: boolean;
+    canDragHorizontal: boolean;
+}
+/** 把 zoom 夹在 [minZoom, maxZoom]，非法值回落到 min。对齐 Semi _clampZoom。 */
+export declare function clampZoom(zoom: number, minZoom: number, maxZoom: number): number;
+/** 旋转后外接矩形尺寸。对齐 Semi calcBoundingRectSize。 */
+export declare function calcBoundingRectSize(width?: number, height?: number, rotation?: number): Size;
+/** 适应页面缩放比：容器内边留 80px，取宽高比更小者。对齐 Semi _getAdaptationZoom。 */
+export declare function getAdaptationZoom(containerWidth: number, containerHeight: number, originImageWidth: number, originImageHeight: number, rotation: number): number;
+/** 某方向图片是否超出容器 → 是否可拖拽。对齐 Semi getCanDragDirection。 */
+export declare function getCanDragDirection(width: number, height: number, containerWidth: number, containerHeight: number): DragDirection;
+/** 平移极值（图片可移动到的边界）。对齐 Semi getExtremeTranslate。 */
+export declare function getExtremeTranslate(width: number, height: number, containerWidth: number, containerHeight: number): Translate;
+/** 把平移量夹进安全边界，不可拖方向归零。对齐 Semi getSafeTranslate。 */
+export declare function getSafeTranslate(width: number, height: number, translateX: number, translateY: number, containerWidth: number, containerHeight: number): Translate;
+export interface ChangeZoomInput {
+    newZoom: number;
+    currZoom: number;
+    originImageWidth: number;
+    originImageHeight: number;
+    width: number;
+    height: number;
+    translate: Translate;
+    rotation: number;
+    containerWidth: number;
+    containerHeight: number;
+    /** 滚轮缩放时以指针为锚点：{ offsetX, offsetY, onImage } */
+    wheel?: {
+        offsetX: number;
+        offsetY: number;
+        onImage: boolean;
+    } | null;
+}
+export interface ChangeZoomResult {
+    translate: Translate;
+    width: number;
+    height: number;
+    currZoom: number;
+    canDrag: boolean;
+}
+/**
+ * 缩放并重算图片尺寸/平移。对齐 Semi changeZoom：
+ * 有滚轮锚点时按指针偏移做「以指针为中心」缩放，否则按缩放比同比缩放已有平移。
+ */
+export declare function changeZoom(input: ChangeZoomInput): ChangeZoomResult;
+/** 拖拽移动后新的安全平移。对齐 Semi moveImage。 */
+export declare function moveImage(clientX: number, clientY: number, startX: number, startY: number, width: number, height: number, translate: Translate, rotation: number, containerWidth: number, containerHeight: number): {
+    translate: Translate;
+    moved: boolean;
+};
+/**
+ * 预加载图片索引数组。对齐 Semi getPreloadImagArr（含 crossMerge 交叉合并 + 去重）。
+ */
+export declare function crossMerge<T>(leftArr?: T[], rightArr?: T[]): T[];
+export declare function getPreloadImageArr(imgSrc: string[], currentIndex: number, preLoadGap: number, infinite: boolean): string[];
+//# sourceMappingURL=previewGeometry.d.ts.map

package/dist/image/previewGeometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"previewGeometry.d.ts","sourceRoot":"","sources":["../../src/image/previewGeometry.ts"],"names":[],"mappings":"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"}

package/dist/image/previewGeometry.js

@@ -0,0 +1,184 @@
+/**
+ * previewGeometry — 预览图缩放/旋转/平移的纯几何计算（无框架依赖、无 DOM）。
+ * 逐一移植自 Semi semi-foundation/image/previewImageFoundation.ts，供 PreviewImage 消费。
+ * 纯函数 → 可单测（红线 #2：派生几何为纯函数）。
+ */
+/** 把 zoom 夹在 [minZoom, maxZoom]，非法值回落到 min。对齐 Semi _clampZoom。 */
+export function clampZoom(zoom, minZoom, maxZoom) {
+    const max = typeof maxZoom === 'number' ? maxZoom : 5;
+    const min = typeof minZoom === 'number' ? minZoom : 0.1;
+    if (typeof zoom !== 'number' || !Number.isFinite(zoom))
+        return min;
+    return Math.min(max, Math.max(min, zoom));
+}
+/** 旋转后外接矩形尺寸。对齐 Semi calcBoundingRectSize。 */
+export function calcBoundingRectSize(width = 0, height = 0, rotation = 0) {
+    const angleInRadians = (rotation * Math.PI) / 180;
+    const sinTheta = Math.abs(Math.sin(angleInRadians));
+    const cosTheta = Math.abs(Math.cos(angleInRadians));
+    return {
+        width: width * cosTheta + height * sinTheta,
+        height: width * sinTheta + height * cosTheta,
+    };
+}
+/** 适应页面缩放比：容器内边留 80px，取宽高比更小者。对齐 Semi _getAdaptationZoom。 */
+export function getAdaptationZoom(containerWidth, containerHeight, originImageWidth, originImageHeight, rotation) {
+    if (!containerWidth || !containerHeight || !originImageWidth || !originImageHeight) {
+        return 1;
+    }
+    const { width: imageWidth, height: imageHeight } = calcBoundingRectSize(originImageWidth, originImageHeight, rotation);
+    const reservedWidth = containerWidth - 80;
+    const reservedHeight = containerHeight - 80;
+    return Number(Math.min(reservedWidth / imageWidth, reservedHeight / imageHeight).toFixed(2));
+}
+/** 某方向图片是否超出容器 → 是否可拖拽。对齐 Semi getCanDragDirection。 */
+export function getCanDragDirection(width, height, containerWidth, containerHeight) {
+    return {
+        canDragHorizontal: width > containerWidth,
+        canDragVertical: height > containerHeight,
+    };
+}
+/** 平移极值（图片可移动到的边界）。对齐 Semi getExtremeTranslate。 */
+export function getExtremeTranslate(width, height, containerWidth, containerHeight) {
+    return {
+        x: (width - containerWidth) / 2,
+        y: (height - containerHeight) / 2,
+    };
+}
+/** 把平移量夹进安全边界，不可拖方向归零。对齐 Semi getSafeTranslate。 */
+export function getSafeTranslate(width, height, translateX, translateY, containerWidth, containerHeight) {
+    const { x: extremeX, y: extremeY } = getExtremeTranslate(width, height, containerWidth, containerHeight);
+    const { canDragVertical, canDragHorizontal } = getCanDragDirection(width, height, containerWidth, containerHeight);
+    let x = 0;
+    let y = 0;
+    if (canDragHorizontal) {
+        x = translateX > 0 ? Math.min(translateX, extremeX) : Math.max(translateX, -extremeX);
+    }
+    if (canDragVertical) {
+        y = translateY > 0 ? Math.min(translateY, extremeY) : Math.max(translateY, -extremeY);
+    }
+    return { x, y };
+}
+/**
+ * 缩放并重算图片尺寸/平移。对齐 Semi changeZoom：
+ * 有滚轮锚点时按指针偏移做「以指针为中心」缩放，否则按缩放比同比缩放已有平移。
+ */
+export function changeZoom(input) {
+    const { newZoom, currZoom, originImageWidth, originImageHeight, width, height, translate, rotation, containerWidth, containerHeight, wheel, } = input;
+    const changeScale = newZoom / (currZoom || 1);
+    const newWidth = Math.floor(originImageWidth * newZoom);
+    const newHeight = Math.floor(originImageHeight * newZoom);
+    let newTranslateX = Math.floor(translate.x * changeScale);
+    let newTranslateY = Math.floor(translate.y * changeScale);
+    const imageBound = calcBoundingRectSize(width, height, rotation);
+    const newImageBound = {
+        width: imageBound.width * changeScale,
+        height: imageBound.height * changeScale,
+    };
+    if (wheel && wheel.onImage && currZoom) {
+        let angle = rotation % 360;
+        if (angle < 0)
+            angle = 360 + angle;
+        const { offsetX, offsetY } = wheel;
+        switch (angle) {
+            case 0:
+                newTranslateX = (offsetX - 0.5 * width) * (1 - newZoom / currZoom) + translate.x;
+                newTranslateY = (offsetY - 0.5 * height) * (1 - newZoom / currZoom) + translate.y;
+                break;
+            case 90:
+                newTranslateX = (0.5 * height - offsetY) * (1 - newZoom / currZoom) + translate.x;
+                newTranslateY = (offsetX - 0.5 * width) * (1 - newZoom / currZoom) + translate.y;
+                break;
+            case 180:
+                newTranslateX = (0.5 * width - offsetX) * (1 - newZoom / currZoom) + translate.x;
+                newTranslateY = (0.5 * height - offsetY) * (1 - newZoom / currZoom) + translate.y;
+                break;
+            case 270:
+                newTranslateX = (offsetY - 0.5 * height) * (1 - newZoom / currZoom) + translate.x;
+                newTranslateY = (0.5 * width - offsetX) * (1 - newZoom / currZoom) + translate.y;
+                break;
+            default:
+                break;
+        }
+    }
+    const safe = getSafeTranslate(newImageBound.width, newImageBound.height, newTranslateX, newTranslateY, containerWidth, containerHeight);
+    const { canDragVertical, canDragHorizontal } = getCanDragDirection(newImageBound.width, newImageBound.height, containerWidth, containerHeight);
+    return {
+        translate: safe,
+        width: newWidth,
+        height: newHeight,
+        currZoom: newZoom,
+        canDrag: canDragVertical || canDragHorizontal,
+    };
+}
+/** 拖拽移动后新的安全平移。对齐 Semi moveImage。 */
+export function moveImage(clientX, clientY, startX, startY, width, height, translate, rotation, containerWidth, containerHeight) {
+    const imageBound = calcBoundingRectSize(width, height, rotation);
+    const { canDragVertical, canDragHorizontal } = getCanDragDirection(imageBound.width, imageBound.height, containerWidth, containerHeight);
+    if (!canDragVertical && !canDragHorizontal) {
+        return { translate, moved: false };
+    }
+    const newTranslateX = canDragHorizontal ? translate.x + clientX - startX : translate.x;
+    const newTranslateY = canDragVertical ? translate.y + clientY - startY : translate.y;
+    const safe = getSafeTranslate(imageBound.width, imageBound.height, newTranslateX, newTranslateY, containerWidth, containerHeight);
+    return { translate: safe, moved: true };
+}
+/**
+ * 预加载图片索引数组。对齐 Semi getPreloadImagArr（含 crossMerge 交叉合并 + 去重）。
+ */
+export function crossMerge(leftArr = [], rightArr = []) {
+    let newArr = [];
+    const leftLen = leftArr.length;
+    const rightLen = rightArr.length;
+    const crossLength = leftLen <= rightLen ? leftLen : rightLen;
+    for (let index = 0; index < crossLength; index++) {
+        newArr.push(rightArr[index]);
+        newArr.push(leftArr[index]);
+    }
+    if (leftLen > rightLen) {
+        newArr = newArr.concat(leftArr.slice(rightLen, leftLen));
+    }
+    else if (leftLen < rightLen) {
+        newArr = newArr.concat(rightArr.slice(leftLen, rightLen));
+    }
+    return newArr;
+}
+export function getPreloadImageArr(imgSrc, currentIndex, preLoadGap, infinite) {
+    const beginIndex = currentIndex - preLoadGap;
+    const endIndex = currentIndex + preLoadGap;
+    const srcLength = imgSrc.length;
+    let leftArr;
+    let rightArr;
+    if (preLoadGap >= Math.floor(srcLength / 2)) {
+        if (infinite) {
+            leftArr = imgSrc
+                .concat(imgSrc)
+                .slice(beginIndex + srcLength < 0 ? 0 : beginIndex + srcLength, currentIndex + srcLength);
+            rightArr = imgSrc
+                .concat(imgSrc)
+                .slice(currentIndex + 1, endIndex + 1 < 2 * srcLength ? endIndex + 1 : 2 * srcLength);
+        }
+        else {
+            leftArr = imgSrc.slice(0, currentIndex);
+            rightArr = imgSrc.slice(currentIndex + 1, srcLength);
+        }
+    }
+    else if (infinite) {
+        leftArr = imgSrc.concat(imgSrc).slice(beginIndex + srcLength, currentIndex + srcLength);
+        rightArr = imgSrc.concat(imgSrc).slice(currentIndex + 1, endIndex + 1);
+    }
+    else if (beginIndex >= 0 && endIndex < srcLength) {
+        leftArr = imgSrc.slice(beginIndex, currentIndex);
+        rightArr = imgSrc.slice(currentIndex + 1, endIndex + 1);
+    }
+    else if (beginIndex < 0) {
+        leftArr = imgSrc.slice(0, currentIndex);
+        rightArr = imgSrc.slice(currentIndex + 1, 2 * preLoadGap + 1);
+    }
+    else {
+        rightArr = imgSrc.slice(currentIndex + 1, srcLength);
+        leftArr = imgSrc.slice(srcLength - 2 * preLoadGap - 1, currentIndex);
+    }
+    const result = crossMerge(leftArr.reverse(), rightArr);
+    return Array.from(new Set(result));
+}

package/dist/image/types.d.ts

@@ -0,0 +1,66 @@
+import type { Snippet } from 'svelte';
+import type { MenuProps } from './PreviewFooter.svelte';
+export type RatioType = 'adaptation' | 'realSize';
+export type { MenuProps };
+/**
+ * 预览参数（对齐 Semi PreviewProps）。既作 <Image preview={...}> 的对象形态，
+ * 也作 <ImagePreview {...}> 组件 props 的公共子集。
+ */
+export interface PreviewProps {
+    /** 受控可见（不回写，仅经 onVisibleChange）。 */
+    visible?: boolean;
+    defaultVisible?: boolean;
+    /** 预览图源：字符串或字符串数组（组/独立用）。 */
+    src?: string | string[];
+    /** 预览标题（string 或 Snippet）。 */
+    previewTitle?: string | Snippet;
+    /** 受控当前索引（不回写，仅经 onChange）。 */
+    currentIndex?: number;
+    defaultCurrentIndex?: number;
+    maskClosable?: boolean;
+    closable?: boolean;
+    closeOnEsc?: boolean;
+    zoomStep?: number;
+    infinite?: boolean;
+    showTooltip?: boolean;
+    prevTip?: string;
+    nextTip?: string;
+    zoomInTip?: string;
+    zoomOutTip?: string;
+    rotateTip?: string;
+    downloadTip?: string;
+    adaptiveTip?: string;
+    originTip?: string;
+    lazyLoad?: boolean;
+    lazyLoadMargin?: string;
+    preLoad?: boolean;
+    preLoadGap?: number;
+    viewerVisibleDelay?: number;
+    disableDownload?: boolean;
+    zIndex?: number;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    maxZoom?: number;
+    minZoom?: number;
+    initialZoom?: number;
+    previewCls?: string;
+    previewStyle?: string;
+    getPopupContainer?: () => HTMLElement | null;
+    setDownloadName?: (src: string) => string;
+    renderHeader?: Snippet<[string | Snippet | undefined]>;
+    renderPreviewMenu?: Snippet<[MenuProps]>;
+    renderCloseIcon?: Snippet;
+    renderLeftIcon?: Snippet;
+    renderRightIcon?: Snippet;
+    onVisibleChange?: (visible: boolean) => void;
+    onChange?: (index: number) => void;
+    onClose?: () => void;
+    onZoomIn?: (zoom: number) => void;
+    onZoomOut?: (zoom: number) => void;
+    onPrev?: (index: number) => void;
+    onNext?: (index: number) => void;
+    onRotateLeft?: (angle: number) => void;
+    onRatioChange?: (type: RatioType) => void;
+    onDownload?: (src: string, index: number) => void;
+    onDownloadError?: (src: string) => void;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/image/types.ts"],"names":[],"mappings":"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"}

package/dist/image/types.js

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