@qw-ui/core 0.3.0-next.9 → 0.3.0

package/dist/icon-Cgdbnk1u.js

@@ -0,0 +1,77 @@
+import { ICON_FALLBACK_NAME, ICON_NAME_SET } from "@qw-ui/icons/names";
+import { ICON_VECTORS } from "@qw-ui/icons/vectors";
+//#region src/icon/identity.ts
+function encodeIconIdentity(value) {
+	let encoded = "";
+	for (let index = 0; index < value.length; index++) encoded += value.charCodeAt(index).toString(16).padStart(4, "0");
+	return encoded;
+}
+function formatIconDefinitionId(identity, original) {
+	return `qw-icon-${encodeIconIdentity(identity)}--${encodeIconIdentity(original)}`;
+}
+function rewriteIconAttribute(key, value, ids) {
+	if (key === "id") return ids.get(value) ?? value;
+	if ((key === "href" || key === "xlink:href") && value.startsWith("#")) return `#${ids.get(value.slice(1)) ?? value.slice(1)}`;
+	return value.replace(/url\(\s*(['"]?)#([^)'"\s]+)\1\s*\)/g, (original, _quote, id) => ids.has(id) ? `url(#${ids.get(id)})` : original);
+}
+//#endregion
+//#region src/icon/icon.ts
+/** Icon 根部件的共享 data-part 词表。 */
+const ICON_PARTS = ["root"];
+function isProductionBuild() {
+	return globalThis.process?.env?.NODE_ENV === "production";
+}
+/**
+* 把动态输入收敛为系统内的稳定名称。未知值始终回退到 component，
+* 只在开发环境记录诊断，避免远端配置错误中断渲染。
+*/
+function resolveIconName(name) {
+	if (ICON_NAME_SET.has(name)) return name;
+	if (!isProductionBuild()) console.warn(`[qw-ui] Unknown icon name "${name}". Falling back to "${ICON_FALLBACK_NAME}".`);
+	return ICON_FALLBACK_NAME;
+}
+/** Normalize name once and require the identity used by inline definitions. */
+function resolveIconState(config) {
+	if (!config.id.length) throw new Error("Icon requires a nonempty stable instance id");
+	return {
+		id: config.id,
+		name: resolveIconName(config.name),
+		ariaLabel: config.ariaLabel
+	};
+}
+/** Standard SVG root attributes shared by every adapter. */
+function getIconRootProps(state) {
+	return {
+		"data-scope": "icon",
+		"data-part": "root",
+		viewBox: "0 0 24 24",
+		width: "1em",
+		height: "1em",
+		fill: "currentColor",
+		focusable: "false",
+		"aria-label": state.ariaLabel ?? void 0,
+		"aria-hidden": state.ariaLabel ? void 0 : true
+	};
+}
+/** Instance-owned safe vector tree, with every local id/reference isolated. */
+function getIconVector(state) {
+	const source = ICON_VECTORS[state.name];
+	const ids = /* @__PURE__ */ new Map();
+	const collect = (nodes) => {
+		for (const node of nodes) {
+			if (node.attrs.id) ids.set(node.attrs.id, formatIconDefinitionId(state.id, node.attrs.id));
+			collect(node.children);
+		}
+	};
+	collect(source);
+	const copy = (nodes) => nodes.map((node) => ({
+		tag: node.tag,
+		attrs: Object.fromEntries(Object.entries(node.attrs).map(([key, value]) => [key, rewriteIconAttribute(key, value, ids)])),
+		children: copy(node.children)
+	}));
+	return copy(source);
+}
+//#endregion
+export { resolveIconName as a, getIconVector as i, ICON_PARTS as n, resolveIconState as o, getIconRootProps as r, ICON_FALLBACK_NAME as t };
+
+//# sourceMappingURL=icon-Cgdbnk1u.js.map

package/dist/icon-Cgdbnk1u.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-Cgdbnk1u.js","names":["runtime"],"sources":["../src/icon/identity.ts","../src/icon/icon.ts"],"sourcesContent":["// Canonical private rules. The fixed-icon generators mechanically emit this file.\n// Fixed-width UTF-16 encoding includes both surrogate code units and is injective.\nexport function encodeIconIdentity(value: string): string {\n  let encoded = \"\";\n  for (let index = 0; index < value.length; index++) {\n    encoded += value.charCodeAt(index).toString(16).padStart(4, \"0\");\n  }\n  return encoded;\n}\n\nexport function formatIconDefinitionId(identity: string, original: string): string {\n  return `qw-icon-${encodeIconIdentity(identity)}--${encodeIconIdentity(original)}`;\n}\n\nexport function rewriteIconAttribute(key: string, value: string, ids: ReadonlyMap<string, string>): string {\n  if (key === \"id\") return ids.get(value) ?? value;\n  if ((key === \"href\" || key === \"xlink:href\") && value.startsWith(\"#\")) {\n    return `#${ids.get(value.slice(1)) ?? value.slice(1)}`;\n  }\n  return value.replace(/url\\(\\s*(['\"]?)#([^)'\"\\s]+)\\1\\s*\\)/g, (original: string, _quote: string, id: string) => ids.has(id) ? `url(#${ids.get(id)})` : original);\n}\n","import {\n  ICON_FALLBACK_NAME,\n  ICON_NAME_SET,\n  type IconName,\n  type IconNameInput,\n} from \"@qw-ui/icons/names\";\nimport { ICON_VECTORS, type IconVectorNode } from \"@qw-ui/icons/vectors\";\nimport { formatIconDefinitionId, rewriteIconAttribute } from \"./identity.js\";\nexport type { IconVectorNode } from \"@qw-ui/icons/vectors\";\n\n/** Icon 根部件的共享 data-part 词表。 */\nexport const ICON_PARTS = [\"root\"] as const;\nexport type IconPart = (typeof ICON_PARTS)[number];\n\nexport type { IconName, IconNameInput };\nexport { ICON_FALLBACK_NAME };\n\nfunction isProductionBuild(): boolean {\n  const runtime = globalThis as typeof globalThis & {\n    process?: { env?: Record<string, string | undefined> };\n  };\n  return runtime.process?.env?.NODE_ENV === \"production\";\n}\n\n/**\n * 把动态输入收敛为系统内的稳定名称。未知值始终回退到 component，\n * 只在开发环境记录诊断，避免远端配置错误中断渲染。\n */\nexport function resolveIconName(name: IconNameInput): IconName {\n  if (ICON_NAME_SET.has(name as IconName)) return name as IconName;\n  if (!isProductionBuild()) {\n    console.warn(`[qw-ui] Unknown icon name \"${name}\". Falling back to \"${ICON_FALLBACK_NAME}\".`);\n  }\n  return ICON_FALLBACK_NAME;\n}\n\n/** Shared Icon input. Identity must be stable across SSR and hydration. */\nexport interface IconConfig {\n  /** Nonempty instance identity, separate from a caller's SVG element id. */\n  id: string;\n  /** Dynamic system name; unknown names use the existing fallback. */\n  name: IconNameInput;\n  /** Existing label truthiness determines whether the SVG is decorative. */\n  ariaLabel?: string | null;\n}\n\n/** Normalized, framework-independent Icon state. */\nexport interface IconState {\n  /** Stable instance identity used only for internal vector references. */\n  readonly id: string;\n  /** Resolved system name. */\n  readonly name: IconName;\n  /** Unmodified accessible label. */\n  readonly ariaLabel?: string | null;\n}\n\n/** Normalize name once and require the identity used by inline definitions. */\nexport function resolveIconState(config: IconConfig): IconState {\n  if (!config.id.length) throw new Error(\"Icon requires a nonempty stable instance id\");\n  return { id: config.id, name: resolveIconName(config.name), ariaLabel: config.ariaLabel };\n}\n\n/** Standard SVG root attributes shared by every adapter. */\nexport function getIconRootProps(state: IconState) {\n  return {\n    \"data-scope\": \"icon\" as const,\n    \"data-part\": \"root\" as const,\n    viewBox: \"0 0 24 24\",\n    width: \"1em\",\n    height: \"1em\",\n    fill: \"currentColor\",\n    focusable: \"false\" as const,\n    \"aria-label\": state.ariaLabel ?? undefined,\n    \"aria-hidden\": state.ariaLabel ? undefined : true,\n  };\n}\n\n/** Instance-owned safe vector tree, with every local id/reference isolated. */\nexport function getIconVector(state: IconState): readonly IconVectorNode[] {\n  const source = ICON_VECTORS[state.name];\n  const ids = new Map<string, string>();\n  const collect = (nodes: readonly IconVectorNode[]) => {\n    for (const node of nodes) {\n      if (node.attrs.id) ids.set(node.attrs.id, formatIconDefinitionId(state.id, node.attrs.id));\n      collect(node.children);\n    }\n  };\n  collect(source);\n  const copy = (nodes: readonly IconVectorNode[]): IconVectorNode[] => nodes.map(node => ({\n    tag: node.tag,\n    attrs: Object.fromEntries(Object.entries(node.attrs).map(([key, value]) => [key, rewriteIconAttribute(key, value, ids)])),\n    children: copy(node.children),\n  }));\n  return copy(source);\n}\n"],"mappings":";;;AAEA,SAAgB,mBAAmB,OAAuB;CACxD,IAAI,UAAU;CACd,KAAK,IAAI,QAAQ,GAAG,QAAQ,MAAM,QAAQ,SACxC,WAAW,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG;CAEjE,OAAO;AACT;AAEA,SAAgB,uBAAuB,UAAkB,UAA0B;CACjF,OAAO,WAAW,mBAAmB,QAAQ,EAAE,IAAI,mBAAmB,QAAQ;AAChF;AAEA,SAAgB,qBAAqB,KAAa,OAAe,KAA0C;CACzG,IAAI,QAAQ,MAAM,OAAO,IAAI,IAAI,KAAK,KAAK;CAC3C,KAAK,QAAQ,UAAU,QAAQ,iBAAiB,MAAM,WAAW,GAAG,GAClE,OAAO,IAAI,IAAI,IAAI,MAAM,MAAM,CAAC,CAAC,KAAK,MAAM,MAAM,CAAC;CAErD,OAAO,MAAM,QAAQ,wCAAwC,UAAkB,QAAgB,OAAe,IAAI,IAAI,EAAE,IAAI,QAAQ,IAAI,IAAI,EAAE,EAAE,KAAK,QAAQ;AAC/J;;;;ACTA,MAAa,aAAa,CAAC,MAAM;AAMjC,SAAS,oBAA6B;CAIpC,OAAOA,WAAQ,SAAS,KAAK,aAAa;AAC5C;;;;;AAMA,SAAgB,gBAAgB,MAA+B;CAC7D,IAAI,cAAc,IAAI,IAAgB,GAAG,OAAO;CAChD,IAAI,CAAC,kBAAkB,GACrB,QAAQ,KAAK,8BAA8B,KAAK,sBAAsB,mBAAmB,GAAG;CAE9F,OAAO;AACT;;AAuBA,SAAgB,iBAAiB,QAA+B;CAC9D,IAAI,CAAC,OAAO,GAAG,QAAQ,MAAM,IAAI,MAAM,6CAA6C;CACpF,OAAO;EAAE,IAAI,OAAO;EAAI,MAAM,gBAAgB,OAAO,IAAI;EAAG,WAAW,OAAO;CAAU;AAC1F;;AAGA,SAAgB,iBAAiB,OAAkB;CACjD,OAAO;EACL,cAAc;EACd,aAAa;EACb,SAAS;EACT,OAAO;EACP,QAAQ;EACR,MAAM;EACN,WAAW;EACX,cAAc,MAAM,aAAa,KAAA;EACjC,eAAe,MAAM,YAAY,KAAA,IAAY;CAC/C;AACF;;AAGA,SAAgB,cAAc,OAA6C;CACzE,MAAM,SAAS,aAAa,MAAM;CAClC,MAAM,sBAAM,IAAI,IAAoB;CACpC,MAAM,WAAW,UAAqC;EACpD,KAAK,MAAM,QAAQ,OAAO;GACxB,IAAI,KAAK,MAAM,IAAI,IAAI,IAAI,KAAK,MAAM,IAAI,uBAAuB,MAAM,IAAI,KAAK,MAAM,EAAE,CAAC;GACzF,QAAQ,KAAK,QAAQ;EACvB;CACF;CACA,QAAQ,MAAM;CACd,MAAM,QAAQ,UAAuD,MAAM,KAAI,UAAS;EACtF,KAAK,KAAK;EACV,OAAO,OAAO,YAAY,OAAO,QAAQ,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,qBAAqB,KAAK,OAAO,GAAG,CAAC,CAAC,CAAC;EACxH,UAAU,KAAK,KAAK,QAAQ;CAC9B,EAAE;CACF,OAAO,KAAK,MAAM;AACpB"}

package/dist/image/image-load.d.ts

@@ -0,0 +1,24 @@
+import type { Machine, Service } from "@zag-js/core";
+import { type ImageRequestFrame, type ImageResourceBinding, type QwAvatarLoadApi, type QwAvatarLoadProps, type QwAvatarLoadSchema } from "../avatar/avatar-load.js";
+/** Shared resource model plus Image's existing zero-argument owner notifications. */
+export interface QwImageLoadProps extends QwAvatarLoadProps {
+    onLoad?: () => void;
+    onError?: () => void;
+    /** Adapter lifecycle snapshot, never a guessed cached resource result. */
+    initialNotification?: ImageRequestFrame;
+}
+export interface QwImageLoadSchema extends QwAvatarLoadSchema {
+    props: QwImageLoadProps;
+    context: QwAvatarLoadSchema["context"] & {
+        notification: ImageRequestFrame | undefined;
+    };
+}
+export type QwImageLoadService = Service<QwImageLoadSchema>;
+export interface QwImageLoadApi extends QwAvatarLoadApi {
+    readonly notification: ImageRequestFrame | undefined;
+}
+/** Resource interpretation stays in the shared machine; this wrapper owns Image callback delivery. */
+export declare const imageLoadMachine: Machine<QwImageLoadSchema>;
+/** Reuse the same session/detach resource sink, with no duplicate snapshot interpretation. */
+export declare function createImageResourceBinding(service: QwImageLoadService, frame: ImageRequestFrame): ImageResourceBinding;
+export declare function connectImageLoad(service: QwImageLoadService, frame?: ImageRequestFrame): QwImageLoadApi;

package/dist/image/image.d.ts

@@ -1,13 +1,11 @@
 /**
  * Image 的跨框架行为契约。
  *
- * Image 是无状态的 Prototype A：Core 归一化 props、推导降级模式，
- * 生成 root/placeholder/image/fallback 的 data 属性。React/Vue 适配器只投影
- * 内容通道并渲染固定 DOM。图片加载状态通过 `data-load-status` 属性由 CSS
- * 声明式管理，不参与 Core 状态归一化。与 Avatar 的 `data-load-status` 模式一致。
+ * Core 归一化展示、尺寸和可访问语义；同目录 image-load.ts 复用共享Zag资源模型。
+ * 三栈适配器只运输资源快照/内容并投影Core结果，不自行解释load/error。
  */
 export declare const IMAGE_FITS: readonly ["cover", "contain", "fill", "none", "scale-down"];
-export declare const IMAGE_PARTS: readonly ["root", "image", "placeholder", "fallback"];
+export declare const IMAGE_PARTS: readonly ["root", "image", "placeholder", "fallback", "alt-label"];
 export declare const IMAGE_LOAD_STATUS: readonly ["loading", "loaded", "error"];
 export type ImageFit = (typeof IMAGE_FITS)[number];
 export type ImagePart = (typeof IMAGE_PARTS)[number];
@@ -42,6 +40,8 @@ export interface ImageContentPresence {
     /** 是否提供子元素（覆盖层）。 */
     hasChildren: boolean;
 }
+/** Scalar presence is computed once in Core; adapters only report supplied channels. */
+export declare function getImageContentPresence(props: QwImageProps, channels: Readonly<Record<string, boolean>>): ImageContentPresence;
 /** 适配器唯一可消费的归一化结果。 */
 export interface ResolvedImageState {
     fit: ImageFit;
@@ -79,10 +79,47 @@ export interface ImageFallbackProps {
 /** 将公开输入和内容通道归一化为唯一的跨框架状态。 */
 export declare function resolveImageState(props?: QwImageProps, presence?: ImageContentPresence): ResolvedImageState;
 /** 将归一化结果转成 root 属性。 */
-export declare function getImageRootProps(state: ResolvedImageState): ImageRootProps;
+export interface ImageRootOptions {
+    loadStatus?: ImageLoadStatus;
+    lang?: string;
+    dir?: string;
+    hidden?: boolean;
+}
+export declare function getImageRootProps(state: ResolvedImageState, options?: ImageRootOptions): ImageRootProps & Pick<ImageRootOptions, "lang" | "dir" | "hidden">;
 /** 将归一化结果转成 placeholder 元素的属性。 */
-export declare function getImagePlaceholderProps(): ImagePlaceholderProps;
+export declare function getImagePlaceholderProps(loadStatus?: ImageLoadStatus): ImagePlaceholderProps & {
+    hidden?: boolean;
+};
 /** 将归一化结果转成图片包装元素的属性。 */
 export declare function getImageImageProps(_state: ResolvedImageState): ImageImageProps;
 /** 将归一化结果转成降级内容元素的属性。 */
-export declare function getImageFallbackProps(state: ResolvedImageState): ImageFallbackProps;
+export declare function getImageFallbackProps(state: ResolvedImageState, options?: {
+    alt?: string;
+    loadStatus: ImageLoadStatus;
+}): ImageFallbackProps & {
+    hidden?: boolean;
+    role?: "img";
+    "aria-label"?: string;
+};
+/** Caller dimensions override defaults but never leak invalid numeric CSS values. */
+export declare function getImageRootStyle(props: Pick<QwImageProps, "width" | "height">): Record<string, string>;
+export declare function getImageDescriptor(state: ResolvedImageState, src?: string): {
+    src: string;
+    active: boolean;
+};
+export declare function getImageElementProps(state: ResolvedImageState, options: {
+    src?: string;
+    alt?: string;
+    loadStatus?: ImageLoadStatus;
+}): {
+    src: string | undefined;
+    alt: string;
+    loading: "lazy" | undefined;
+    "aria-hidden": boolean | undefined;
+};
+export declare function getImageFallbackLabel(state: ResolvedImageState, alt?: string): string | undefined;
+export declare function getImageFallbackLabelProps(state: ResolvedImageState, alt?: string): {
+    "data-scope": string;
+    "data-part": string;
+    hidden: boolean;
+};

package/dist/image/index.d.ts

@@ -1 +1,2 @@
 export * from "./image.js";
+export * from "./image-load.js";

package/dist/image/index.js

@@ -1,11 +1,10 @@
+import { n as connectAvatarLoad, r as createAvatarResourceBinding, t as avatarLoadMachine } from "../avatar-load-w9dq05oV.js";
 //#region src/image/image.ts
 /**
 * Image 的跨框架行为契约。
 *
-* Image 是无状态的 Prototype A：Core 归一化 props、推导降级模式，
-* 生成 root/placeholder/image/fallback 的 data 属性。React/Vue 适配器只投影
-* 内容通道并渲染固定 DOM。图片加载状态通过 `data-load-status` 属性由 CSS
-* 声明式管理，不参与 Core 状态归一化。与 Avatar 的 `data-load-status` 模式一致。
+* Core 归一化展示、尺寸和可访问语义；同目录 image-load.ts 复用共享Zag资源模型。
+* 三栈适配器只运输资源快照/内容并投影Core结果，不自行解释load/error。
 */
 const IMAGE_FITS = [
 	"cover",
@@ -18,13 +17,23 @@ const IMAGE_PARTS = [
 	"root",
 	"image",
 	"placeholder",
-	"fallback"
+	"fallback",
+	"alt-label"
 ];
 const IMAGE_LOAD_STATUS = [
 	"loading",
 	"loaded",
 	"error"
 ];
+/** Scalar presence is computed once in Core; adapters only report supplied channels. */
+function getImageContentPresence(props, channels) {
+	return {
+		hasSrc: typeof props.src === "string" && !!props.src.trim(),
+		hasPlaceholder: !!channels.placeholder,
+		hasFallback: !!channels.fallback,
+		hasChildren: !!channels.default
+	};
+}
 const EMPTY_PRESENCE = {
 	hasSrc: false,
 	hasPlaceholder: false,
@@ -38,7 +47,7 @@ function resolveImageState(props = {}, presence = EMPTY_PRESENCE) {
 	const hasFallback = presence.hasFallback;
 	const hasChildren = presence.hasChildren;
 	return {
-		fit: props.fit ?? "cover",
+		fit: IMAGE_FITS.includes(props.fit) ? props.fit : "cover",
 		hasSrc,
 		hasPlaceholder,
 		hasFallback,
@@ -47,20 +56,23 @@ function resolveImageState(props = {}, presence = EMPTY_PRESENCE) {
 		initialLoadStatus: hasSrc ? "loading" : "error"
 	};
 }
-/** 将归一化结果转成 root 属性。 */
-function getImageRootProps(state) {
+function getImageRootProps(state, options = {}) {
 	return {
 		"data-scope": "image",
 		"data-part": "root",
 		"data-fit": state.fit,
-		"data-load-status": state.initialLoadStatus
+		"data-load-status": options.loadStatus ?? state.initialLoadStatus,
+		...options.lang === void 0 ? {} : { lang: options.lang },
+		...options.dir === void 0 ? {} : { dir: options.dir },
+		...options.hidden === void 0 ? {} : { hidden: options.hidden }
 	};
 }
 /** 将归一化结果转成 placeholder 元素的属性。 */
-function getImagePlaceholderProps() {
+function getImagePlaceholderProps(loadStatus) {
 	return {
 		"data-scope": "image",
-		"data-part": "placeholder"
+		"data-part": "placeholder",
+		...loadStatus === void 0 ? {} : { hidden: loadStatus !== "loading" }
 	};
 }
 /** 将归一化结果转成图片包装元素的属性。 */
@@ -71,14 +83,104 @@ function getImageImageProps(_state) {
 	};
 }
 /** 将归一化结果转成降级内容元素的属性。 */
-function getImageFallbackProps(state) {
+function getImageFallbackProps(state, options) {
+	const label = typeof options?.alt === "string" && options.alt.trim() ? options.alt : void 0;
 	return {
 		"data-scope": "image",
 		"data-part": "fallback",
-		"data-fallback": state.hasFallback ? "custom" : "default"
+		"data-fallback": state.hasFallback ? "custom" : "default",
+		...options ? { hidden: options.loadStatus !== "error" } : {},
+		...!state.hasFallback && label ? {
+			role: "img",
+			"aria-label": label
+		} : {}
+	};
+}
+/** Caller dimensions override defaults but never leak invalid numeric CSS values. */
+function getImageRootStyle(props) {
+	const result = {};
+	for (const key of ["width", "height"]) {
+		const value = props[key];
+		if (typeof value === "number" && Number.isFinite(value) && value >= 0) result[`--qw-image-${key}`] = `${value}px`;
+		else if (typeof value === "string" && value.trim() && !/^(?:NaN|[+-]?Infinity)$/i.test(value.trim())) result[`--qw-image-${key}`] = value;
+	}
+	return result;
+}
+function getImageDescriptor(state, src) {
+	return {
+		src: typeof src === "string" ? src : "",
+		active: state.hasSrc
+	};
+}
+function getImageElementProps(state, options) {
+	return {
+		src: options.src,
+		alt: options.alt ?? "",
+		loading: state.lazy ? "lazy" : void 0,
+		"aria-hidden": options.loadStatus === "error" ? true : void 0
+	};
+}
+function getImageFallbackLabel(state, alt) {
+	return state.hasFallback && typeof alt === "string" && alt.trim() ? alt : void 0;
+}
+function getImageFallbackLabelProps(state, alt) {
+	return {
+		"data-scope": "image",
+		"data-part": "alt-label",
+		hidden: !getImageFallbackLabel(state, alt)
+	};
+}
+//#endregion
+//#region src/image/image-load.ts
+const sameFrame = (a, b) => a?.epoch === b.epoch && a.src === b.src;
+const base = avatarLoadMachine;
+/** Resource interpretation stays in the shared machine; this wrapper owns Image callback delivery. */
+const imageLoadMachine = {
+	...base,
+	props(params) {
+		return {
+			...base.props(params),
+			onLoad: params.props.onLoad,
+			onError: params.props.onError,
+			initialNotification: params.props.initialNotification
+		};
+	},
+	context(params) {
+		return {
+			...base.context(params),
+			notification: params.bindable(() => ({
+				defaultValue: params.prop("initialNotification"),
+				isEqual: (a, b) => a?.epoch === b?.epoch && a?.src === b?.src,
+				hash: (value) => value ? `${value.epoch}:${value.src}` : ""
+			}))
+		};
+	},
+	watch(params) {
+		base.watch?.(params);
+		params.track([() => {
+			const value = params.context.get("result");
+			return value ? `${value.epoch}:${value.src}:${value.status}` : "";
+		}], () => {
+			const frame = params.prop("frame"), result = params.context.get("result");
+			if (!params.refs.get("active") || !frame.active || !result || result.status === "loading" || !sameFrame(result, frame) || sameFrame(params.context.get("notification"), frame)) return;
+			params.context.set("notification", Object.freeze({ ...frame }));
+			if (result.status === "loaded") params.prop("onLoad")?.();
+			else params.prop("onError")?.();
+		});
+	}
+};
+/** Reuse the same session/detach resource sink, with no duplicate snapshot interpretation. */
+function createImageResourceBinding(service, frame) {
+	return createAvatarResourceBinding(service, frame);
+}
+function connectImageLoad(service, frame = service.prop("frame")) {
+	return {
+		...connectAvatarLoad(service, frame),
+		notification: service.context.get("notification"),
+		bindResource: () => createImageResourceBinding(service, frame)
 	};
 }
 //#endregion
-export { IMAGE_FITS, IMAGE_LOAD_STATUS, IMAGE_PARTS, getImageFallbackProps, getImageImageProps, getImagePlaceholderProps, getImageRootProps, resolveImageState };
+export { IMAGE_FITS, IMAGE_LOAD_STATUS, IMAGE_PARTS, connectImageLoad, createImageResourceBinding, getImageContentPresence, getImageDescriptor, getImageElementProps, getImageFallbackLabel, getImageFallbackLabelProps, getImageFallbackProps, getImageImageProps, getImagePlaceholderProps, getImageRootProps, getImageRootStyle, imageLoadMachine, resolveImageState };
 
 //# sourceMappingURL=index.js.map

package/dist/image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/image/image.ts"],"sourcesContent":["/**\n * Image 的跨框架行为契约。\n *\n * Image 是无状态的 Prototype A：Core 归一化 props、推导降级模式，\n * 生成 root/placeholder/image/fallback 的 data 属性。React/Vue 适配器只投影\n * 内容通道并渲染固定 DOM。图片加载状态通过 `data-load-status` 属性由 CSS\n * 声明式管理，不参与 Core 状态归一化。与 Avatar 的 `data-load-status` 模式一致。\n */\n\nexport const IMAGE_FITS = [\"cover\", \"contain\", \"fill\", \"none\", \"scale-down\"] as const;\nexport const IMAGE_PARTS = [\"root\", \"image\", \"placeholder\", \"fallback\"] as const;\nexport const IMAGE_LOAD_STATUS = [\"loading\", \"loaded\", \"error\"] as const;\n\nexport type ImageFit = (typeof IMAGE_FITS)[number];\nexport type ImagePart = (typeof IMAGE_PARTS)[number];\nexport type ImageLoadStatus = (typeof IMAGE_LOAD_STATUS)[number];\n\n/** 双栈共享的标量 props；框架特有的内容通道不进入 Core。 */\nexport interface QwImageProps {\n  /** 图片源地址。空字符串或 undefined 时不渲染 img，直接进入降级。 */\n  src?: string;\n  /** 替代文本。传入时作为 img alt 属性；未传入时默认空字符串（装饰性图片）。 */\n  alt?: string;\n  /** object-fit 模式，默认 `cover`。 */\n  fit?: ImageFit;\n  /** 是否启用原生懒加载，默认 `false`。 */\n  lazy?: boolean;\n  /** 容器宽度（string | number）。 */\n  width?: string | number;\n  /** 容器高度（string | number）。 */\n  height?: string | number;\n  /** 图片加载成功回调。 */\n  onLoad?: () => void;\n  /** 图片加载失败回调。 */\n  onError?: () => void;\n}\n\n/** 由各框架的内容通道存在性计算；不检查 DOM 或 VNode 内容。 */\nexport interface ImageContentPresence {\n  /** 是否提供有效 `src`（非空字符串）。 */\n  hasSrc: boolean;\n  /** 是否提供自定义 placeholder。 */\n  hasPlaceholder: boolean;\n  /** 是否提供自定义 fallback。 */\n  hasFallback: boolean;\n  /** 是否提供子元素（覆盖层）。 */\n  hasChildren: boolean;\n}\n\n/** 适配器唯一可消费的归一化结果。 */\nexport interface ResolvedImageState {\n  fit: ImageFit;\n  hasSrc: boolean;\n  hasPlaceholder: boolean;\n  hasFallback: boolean;\n  hasChildren: boolean;\n  lazy: boolean;\n  /** 初始加载状态（有 src 时 `loading`，无 src 时 `error`）。 */\n  initialLoadStatus: ImageLoadStatus;\n}\n\n/** Core 生成、由适配器覆盖到根元素的属性。 */\nexport interface ImageRootProps {\n  \"data-scope\": \"image\";\n  \"data-part\": \"root\";\n  \"data-fit\": ImageFit;\n  \"data-load-status\": ImageLoadStatus;\n}\n\n/** Core 生成、由适配器覆盖到 placeholder 元素的属性。 */\nexport interface ImagePlaceholderProps {\n  \"data-scope\": \"image\";\n  \"data-part\": \"placeholder\";\n}\n\n/** Core 生成、由适配器覆盖到图片包装元素的属性。 */\nexport interface ImageImageProps {\n  \"data-scope\": \"image\";\n  \"data-part\": \"image\";\n}\n\n/** Core 生成、由适配器覆盖到降级内容元素的属性。 */\nexport interface ImageFallbackProps {\n  \"data-scope\": \"image\";\n  \"data-part\": \"fallback\";\n  \"data-fallback\": \"default\" | \"custom\";\n}\n\nconst EMPTY_PRESENCE: ImageContentPresence = {\n  hasSrc: false,\n  hasPlaceholder: false,\n  hasFallback: false,\n  hasChildren: false,\n};\n\n/** 将公开输入和内容通道归一化为唯一的跨框架状态。 */\nexport function resolveImageState(\n  props: QwImageProps = {},\n  presence: ImageContentPresence = EMPTY_PRESENCE,\n): ResolvedImageState {\n  const hasSrc = presence.hasSrc;\n  const hasPlaceholder = presence.hasPlaceholder;\n  const hasFallback = presence.hasFallback;\n  const hasChildren = presence.hasChildren;\n\n  return {\n    fit: props.fit ?? \"cover\",\n    hasSrc,\n    hasPlaceholder,\n    hasFallback,\n    hasChildren,\n    lazy: props.lazy ?? false,\n    initialLoadStatus: hasSrc ? \"loading\" : \"error\",\n  };\n}\n\n/** 将归一化结果转成 root 属性。 */\nexport function getImageRootProps(state: ResolvedImageState): ImageRootProps {\n  return {\n    \"data-scope\": \"image\",\n    \"data-part\": \"root\",\n    \"data-fit\": state.fit,\n    \"data-load-status\": state.initialLoadStatus,\n  };\n}\n\n/** 将归一化结果转成 placeholder 元素的属性。 */\nexport function getImagePlaceholderProps(): ImagePlaceholderProps {\n  return {\n    \"data-scope\": \"image\",\n    \"data-part\": \"placeholder\",\n  };\n}\n\n/** 将归一化结果转成图片包装元素的属性。 */\nexport function getImageImageProps(_state: ResolvedImageState): ImageImageProps {\n  return {\n    \"data-scope\": \"image\",\n    \"data-part\": \"image\",\n  };\n}\n\n/** 将归一化结果转成降级内容元素的属性。 */\nexport function getImageFallbackProps(state: ResolvedImageState): ImageFallbackProps {\n  return {\n    \"data-scope\": \"image\",\n    \"data-part\": \"fallback\",\n    \"data-fallback\": state.hasFallback ? \"custom\" : \"default\",\n  };\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,aAAa;CAAC;CAAS;CAAW;CAAQ;CAAQ;AAAY;AAC3E,MAAa,cAAc;CAAC;CAAQ;CAAS;CAAe;AAAU;AACtE,MAAa,oBAAoB;CAAC;CAAW;CAAU;AAAO;AA6E9D,MAAM,iBAAuC;CAC3C,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,aAAa;AACf;;AAGA,SAAgB,kBACd,QAAsB,CAAC,GACvB,WAAiC,gBACb;CACpB,MAAM,SAAS,SAAS;CACxB,MAAM,iBAAiB,SAAS;CAChC,MAAM,cAAc,SAAS;CAC7B,MAAM,cAAc,SAAS;CAE7B,OAAO;EACL,KAAK,MAAM,OAAO;EAClB;EACA;EACA;EACA;EACA,MAAM,MAAM,QAAQ;EACpB,mBAAmB,SAAS,YAAY;CAC1C;AACF;;AAGA,SAAgB,kBAAkB,OAA2C;CAC3E,OAAO;EACL,cAAc;EACd,aAAa;EACb,YAAY,MAAM;EAClB,oBAAoB,MAAM;CAC5B;AACF;;AAGA,SAAgB,2BAAkD;CAChE,OAAO;EACL,cAAc;EACd,aAAa;CACf;AACF;;AAGA,SAAgB,mBAAmB,QAA6C;CAC9E,OAAO;EACL,cAAc;EACd,aAAa;CACf;AACF;;AAGA,SAAgB,sBAAsB,OAA+C;CACnF,OAAO;EACL,cAAc;EACd,aAAa;EACb,iBAAiB,MAAM,cAAc,WAAW;CAClD;AACF"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/image/image.ts","../../src/image/image-load.ts"],"sourcesContent":["/**\n * Image 的跨框架行为契约。\n *\n * Core 归一化展示、尺寸和可访问语义；同目录 image-load.ts 复用共享Zag资源模型。\n * 三栈适配器只运输资源快照/内容并投影Core结果，不自行解释load/error。\n */\n\nexport const IMAGE_FITS = [\"cover\", \"contain\", \"fill\", \"none\", \"scale-down\"] as const;\nexport const IMAGE_PARTS = [\"root\", \"image\", \"placeholder\", \"fallback\", \"alt-label\"] as const;\nexport const IMAGE_LOAD_STATUS = [\"loading\", \"loaded\", \"error\"] as const;\n\nexport type ImageFit = (typeof IMAGE_FITS)[number];\nexport type ImagePart = (typeof IMAGE_PARTS)[number];\nexport type ImageLoadStatus = (typeof IMAGE_LOAD_STATUS)[number];\n\n/** 双栈共享的标量 props；框架特有的内容通道不进入 Core。 */\nexport interface QwImageProps {\n  /** 图片源地址。空字符串或 undefined 时不渲染 img，直接进入降级。 */\n  src?: string;\n  /** 替代文本。传入时作为 img alt 属性；未传入时默认空字符串（装饰性图片）。 */\n  alt?: string;\n  /** object-fit 模式，默认 `cover`。 */\n  fit?: ImageFit;\n  /** 是否启用原生懒加载，默认 `false`。 */\n  lazy?: boolean;\n  /** 容器宽度（string | number）。 */\n  width?: string | number;\n  /** 容器高度（string | number）。 */\n  height?: string | number;\n  /** 图片加载成功回调。 */\n  onLoad?: () => void;\n  /** 图片加载失败回调。 */\n  onError?: () => void;\n}\n\n/** 由各框架的内容通道存在性计算；不检查 DOM 或 VNode 内容。 */\nexport interface ImageContentPresence {\n  /** 是否提供有效 `src`（非空字符串）。 */\n  hasSrc: boolean;\n  /** 是否提供自定义 placeholder。 */\n  hasPlaceholder: boolean;\n  /** 是否提供自定义 fallback。 */\n  hasFallback: boolean;\n  /** 是否提供子元素（覆盖层）。 */\n  hasChildren: boolean;\n}\n/** Scalar presence is computed once in Core; adapters only report supplied channels. */\nexport function getImageContentPresence(props:QwImageProps,channels:Readonly<Record<string,boolean>>):ImageContentPresence {\n  return {hasSrc:typeof props.src===\"string\" && !!props.src.trim(),hasPlaceholder:!!channels.placeholder,hasFallback:!!channels.fallback,hasChildren:!!channels.default};\n}\n\n/** 适配器唯一可消费的归一化结果。 */\nexport interface ResolvedImageState {\n  fit: ImageFit;\n  hasSrc: boolean;\n  hasPlaceholder: boolean;\n  hasFallback: boolean;\n  hasChildren: boolean;\n  lazy: boolean;\n  /** 初始加载状态（有 src 时 `loading`，无 src 时 `error`）。 */\n  initialLoadStatus: ImageLoadStatus;\n}\n\n/** Core 生成、由适配器覆盖到根元素的属性。 */\nexport interface ImageRootProps {\n  \"data-scope\": \"image\";\n  \"data-part\": \"root\";\n  \"data-fit\": ImageFit;\n  \"data-load-status\": ImageLoadStatus;\n}\n\n/** Core 生成、由适配器覆盖到 placeholder 元素的属性。 */\nexport interface ImagePlaceholderProps {\n  \"data-scope\": \"image\";\n  \"data-part\": \"placeholder\";\n}\n\n/** Core 生成、由适配器覆盖到图片包装元素的属性。 */\nexport interface ImageImageProps {\n  \"data-scope\": \"image\";\n  \"data-part\": \"image\";\n}\n\n/** Core 生成、由适配器覆盖到降级内容元素的属性。 */\nexport interface ImageFallbackProps {\n  \"data-scope\": \"image\";\n  \"data-part\": \"fallback\";\n  \"data-fallback\": \"default\" | \"custom\";\n}\n\nconst EMPTY_PRESENCE: ImageContentPresence = {\n  hasSrc: false,\n  hasPlaceholder: false,\n  hasFallback: false,\n  hasChildren: false,\n};\n\n/** 将公开输入和内容通道归一化为唯一的跨框架状态。 */\nexport function resolveImageState(\n  props: QwImageProps = {},\n  presence: ImageContentPresence = EMPTY_PRESENCE,\n): ResolvedImageState {\n  const hasSrc = presence.hasSrc;\n  const hasPlaceholder = presence.hasPlaceholder;\n  const hasFallback = presence.hasFallback;\n  const hasChildren = presence.hasChildren;\n\n  return {\n    fit: IMAGE_FITS.includes(props.fit!) ? props.fit! : \"cover\",\n    hasSrc,\n    hasPlaceholder,\n    hasFallback,\n    hasChildren,\n    lazy: props.lazy ?? false,\n    initialLoadStatus: hasSrc ? \"loading\" : \"error\",\n  };\n}\n\n/** 将归一化结果转成 root 属性。 */\nexport interface ImageRootOptions {loadStatus?:ImageLoadStatus;lang?:string;dir?:string;hidden?:boolean}\nexport function getImageRootProps(state: ResolvedImageState,options:ImageRootOptions={}): ImageRootProps & Pick<ImageRootOptions,\"lang\"|\"dir\"|\"hidden\"> {\n  return {\n    \"data-scope\": \"image\",\n    \"data-part\": \"root\",\n    \"data-fit\": state.fit,\n    \"data-load-status\": options.loadStatus ?? state.initialLoadStatus,\n    ...(options.lang===undefined?{}:{lang:options.lang}),...(options.dir===undefined?{}:{dir:options.dir}),...(options.hidden===undefined?{}:{hidden:options.hidden}),\n  };\n}\n\n/** 将归一化结果转成 placeholder 元素的属性。 */\nexport function getImagePlaceholderProps(loadStatus?:ImageLoadStatus): ImagePlaceholderProps & {hidden?:boolean} {\n  return {\n    \"data-scope\": \"image\",\n    \"data-part\": \"placeholder\",\n    ...(loadStatus===undefined?{}:{hidden:loadStatus!==\"loading\"}),\n  };\n}\n\n/** 将归一化结果转成图片包装元素的属性。 */\nexport function getImageImageProps(_state: ResolvedImageState): ImageImageProps {\n  return {\n    \"data-scope\": \"image\",\n    \"data-part\": \"image\",\n  };\n}\n\n/** 将归一化结果转成降级内容元素的属性。 */\nexport function getImageFallbackProps(state: ResolvedImageState,options?:{alt?:string;loadStatus:ImageLoadStatus}): ImageFallbackProps & {hidden?:boolean;role?:\"img\";\"aria-label\"?:string} {\n  const label=typeof options?.alt===\"string\" && options.alt.trim()?options.alt:undefined;\n  return {\n    \"data-scope\": \"image\",\n    \"data-part\": \"fallback\",\n    \"data-fallback\": state.hasFallback ? \"custom\" : \"default\",\n    ...(options?{hidden:options.loadStatus!==\"error\"}:{}),\n    ...(!state.hasFallback && label?{role:\"img\" as const,\"aria-label\":label}:{}),\n  };\n}\n/** Caller dimensions override defaults but never leak invalid numeric CSS values. */\nexport function getImageRootStyle(props:Pick<QwImageProps,\"width\"|\"height\">):Record<string,string>{\n  const result:Record<string,string>={};\n  for(const key of [\"width\",\"height\"] as const){const value=props[key];\n    if(typeof value===\"number\" && Number.isFinite(value) && value>=0)result[`--qw-image-${key}`]=`${value}px`;\n    else if(typeof value===\"string\" && value.trim() && !/^(?:NaN|[+-]?Infinity)$/i.test(value.trim()))result[`--qw-image-${key}`]=value;\n  }return result;\n}\nexport function getImageDescriptor(state:ResolvedImageState,src?:string):{src:string;active:boolean}{return {src:typeof src===\"string\"?src:\"\",active:state.hasSrc};}\nexport function getImageElementProps(state:ResolvedImageState,options:{src?:string;alt?:string;loadStatus?:ImageLoadStatus}){\n  return {src:options.src,alt:options.alt??\"\",loading:state.lazy?\"lazy\" as const:undefined,\"aria-hidden\":options.loadStatus===\"error\"?true:undefined};\n}\nexport function getImageFallbackLabel(state:ResolvedImageState,alt?:string):string|undefined{return state.hasFallback && typeof alt===\"string\" && alt.trim()?alt:undefined;}\nexport function getImageFallbackLabelProps(state:ResolvedImageState,alt?:string){return {\"data-scope\":\"image\",\"data-part\":\"alt-label\",hidden:!getImageFallbackLabel(state,alt)};}\n","import type { Machine, Service } from \"@zag-js/core\";\nimport { avatarLoadMachine, connectAvatarLoad, createAvatarResourceBinding, type ImageRequestFrame, type ImageResourceBinding, type QwAvatarLoadApi, type QwAvatarLoadProps, type QwAvatarLoadSchema, type QwAvatarLoadService } from \"../avatar/avatar-load.js\";\n\n/** Shared resource model plus Image's existing zero-argument owner notifications. */\nexport interface QwImageLoadProps extends QwAvatarLoadProps {\n  onLoad?:()=>void; onError?:()=>void;\n  /** Adapter lifecycle snapshot, never a guessed cached resource result. */\n  initialNotification?:ImageRequestFrame;\n}\nexport interface QwImageLoadSchema extends QwAvatarLoadSchema {\n  props:QwImageLoadProps;\n  context:QwAvatarLoadSchema[\"context\"] & {notification:ImageRequestFrame|undefined};\n}\nexport type QwImageLoadService=Service<QwImageLoadSchema>;\nexport interface QwImageLoadApi extends QwAvatarLoadApi {readonly notification:ImageRequestFrame|undefined}\nconst sameFrame=(a:Pick<ImageRequestFrame,\"epoch\"|\"src\">|undefined,b:ImageRequestFrame)=>a?.epoch===b.epoch && a.src===b.src;\nconst base=avatarLoadMachine as unknown as Machine<QwImageLoadSchema>;\n/** Resource interpretation stays in the shared machine; this wrapper owns Image callback delivery. */\nexport const imageLoadMachine:Machine<QwImageLoadSchema>={\n  ...base,\n  props(params){return {...base.props!(params),onLoad:params.props.onLoad,onError:params.props.onError,initialNotification:params.props.initialNotification};},\n  context(params){return {...base.context!(params),notification:params.bindable<ImageRequestFrame|undefined>(()=>({defaultValue:params.prop(\"initialNotification\"),isEqual:(a,b)=>a?.epoch===b?.epoch && a?.src===b?.src,hash:value=>value ? `${value.epoch}:${value.src}` : \"\"}))};},\n  watch(params){\n    base.watch?.(params);\n    params.track([()=>{const value=params.context.get(\"result\");return value ? `${value.epoch}:${value.src}:${value.status}` : \"\";}],()=>{\n      const frame=params.prop(\"frame\"),result=params.context.get(\"result\");\n      if(!params.refs.get(\"active\") || !frame.active || !result || result.status===\"loading\" || !sameFrame(result,frame) || sameFrame(params.context.get(\"notification\"),frame))return;\n      params.context.set(\"notification\",Object.freeze({...frame}));\n      if(result.status===\"loaded\")params.prop(\"onLoad\")?.();else params.prop(\"onError\")?.();\n    });\n  },\n};\n/** Reuse the same session/detach resource sink, with no duplicate snapshot interpretation. */\nexport function createImageResourceBinding(service:QwImageLoadService,frame:ImageRequestFrame):ImageResourceBinding {\n  return createAvatarResourceBinding(service as unknown as QwAvatarLoadService,frame);\n}\nexport function connectImageLoad(service:QwImageLoadService,frame=service.prop(\"frame\")):QwImageLoadApi {\n  const api=connectAvatarLoad(service as unknown as QwAvatarLoadService,frame);\n  return {...api,notification:service.context.get(\"notification\"),bindResource:()=>createImageResourceBinding(service,frame)};\n}\n"],"mappings":"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"}

package/dist/image-preview/image-preview.d.ts

@@ -0,0 +1,124 @@
+import { type Machine, type Service } from "@zag-js/core";
+import type { NormalizeProps, PropTypes } from "@zag-js/types";
+import type { QwPopupProps } from "../popup/popup.js";
+import { type QwSwiperProps } from "../swiper/swiper.js";
+export interface ImagePreviewImage {
+    src: string;
+    alt: string;
+}
+export interface ImagePreviewIndexDetails {
+    index: number;
+}
+export interface QwImagePreviewProps extends Omit<QwPopupProps, "placement"> {
+    /** Locale on the immediate Popup host; arbitrary outer ancestors are not copied into its portal. */
+    lang?: string;
+    dir?: string;
+    /** Up to 12 images (the shared native Swiper channel domain); alt is always visible to assistive technology. */
+    images?: readonly ImagePreviewImage[];
+    index?: number;
+    defaultIndex?: number;
+    loop?: boolean;
+    /** Finite upper zoom, clamped to 1–6; default 3. */
+    maxZoom?: number;
+    prevLabel?: string;
+    nextLabel?: string;
+    zoomInLabel?: string;
+    zoomOutLabel?: string;
+    resetLabel?: string;
+    loadingText?: string;
+    errorText?: string;
+    retryText?: string;
+    onIndexChange?: (details: ImagePreviewIndexDetails) => void;
+}
+export interface PreviewTransform {
+    scale: number;
+    x: number;
+    y: number;
+}
+interface PointerPoint {
+    x: number;
+    y: number;
+}
+interface Gesture {
+    points: Map<number, PointerPoint>;
+    distance: number;
+    scale: number;
+    x: number;
+    y: number;
+    originX: number;
+    originY: number;
+}
+export interface QwImagePreviewSchema {
+    props: QwImagePreviewProps;
+    context: {
+        open: boolean;
+        index: number;
+        transform: PreviewTransform;
+        status: "loading" | "loaded" | "error";
+        revision: number;
+    };
+    refs: {
+        gesture: Gesture;
+        syncResource: (() => void) | undefined;
+    };
+    state: "ready";
+    effect: "trackResources";
+    action: "open" | "index" | "transform" | "resource" | "reset" | "retry" | "sync";
+    event: {
+        type: "OPEN";
+        open: boolean;
+    } | {
+        type: "INDEX";
+        index: number;
+    } | {
+        type: "TRANSFORM";
+        value: PreviewTransform;
+        width?: number;
+        height?: number;
+    } | {
+        type: "RESOURCE";
+        src: string;
+        revision: number;
+        status: "loaded" | "error";
+    } | {
+        type: "RESET";
+    } | {
+        type: "RETRY";
+    } | {
+        type: "SYNC";
+    };
+}
+export type QwImagePreviewService = Service<QwImagePreviewSchema>;
+export declare function resolveImagePreviewMaxZoom(value?: number): number;
+export declare function resolveImagePreviewImages(images?: readonly ImagePreviewImage[]): readonly ImagePreviewImage[];
+export declare function clampImagePreviewTransform(value: PreviewTransform, maxZoom: number, width?: number, height?: number): PreviewTransform;
+export declare function createImagePreviewProps(props?: QwImagePreviewProps): QwImagePreviewProps;
+export declare const imagePreviewMachine: Machine<QwImagePreviewSchema>;
+export declare function connectImagePreview<T extends PropTypes>(service: QwImagePreviewService, normalize: NormalizeProps<T>): {
+    images: readonly ImagePreviewImage[];
+    index: number;
+    open: boolean;
+    status: "error" | "loaded" | "loading";
+    revision: number;
+    transform: PreviewTransform;
+    popupProps: QwPopupProps;
+    swiperProps: QwSwiperProps;
+    statusText: string;
+    retryText: string;
+    counter: string;
+    reset: () => void;
+    setOpen: (next: boolean) => void;
+    setIndex: (next: number) => void;
+    getRootProps: () => T["element"];
+    getCounterProps: () => T["element"];
+    getControlsProps: () => T["element"];
+    getZoomInProps: () => T["button"];
+    getZoomOutProps: () => T["button"];
+    getResetProps: () => T["button"];
+    getStatusProps: () => T["element"];
+    getRetryProps: () => T["button"];
+    getImageProps(imageIndex: number): T["element"];
+    getStageProps(imageIndex: number): T["element"];
+};
+export type QwImagePreviewApi<T extends PropTypes = PropTypes> = ReturnType<typeof connectImagePreview<T>>;
+export {};

package/dist/image-preview/index.d.ts

@@ -0,0 +1 @@
+export * from "./image-preview.js";