@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system113.js

@@ -1,10 +1,510 @@
-//#region src/components/BInput/types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.Outlined = "outlined", e.Filled = "filled", e.Borderless = "borderless", e.Underlined = "underlined", e;
-}({}), t = /* @__PURE__ */ function(e) {
-	return e.Error = "error", e.Warning = "warning", e;
-}({});
+import { Teleport as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as ee, createVNode as s, defineComponent as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as te, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, vShow as g, watch as _, withCtx as ne, withDirectives as re, withModifiers as ie } from "vue";
+//#region src/components/BImage/BImage.vue?vue&type=script&setup=true&lang.ts
+var ae = ["src", "alt"], oe = {
+	key: 1,
+	class: "b-image__placeholder",
+	"aria-hidden": "true"
+}, v = [
+	"src",
+	"alt",
+	"width",
+	"height",
+	"loading",
+	"crossorigin",
+	"decoding",
+	"referrerpolicy"
+], se = ["aria-label"], ce = ["aria-label"], le = ["aria-label"], ue = { class: "b-image-preview__body" }, y = ["src", "alt"], b = ["aria-pressed"], x = ["aria-pressed"], S = ["disabled"], C = {
+	class: "b-image-preview__scale",
+	"aria-live": "polite",
+	"aria-atomic": "true"
+}, de = ["disabled"], w = /* @__PURE__ */ c({
+	__name: "BImage",
+	props: {
+		src: { default: void 0 },
+		alt: { default: "" },
+		width: { default: void 0 },
+		height: { default: void 0 },
+		fallback: { default: void 0 },
+		placeholder: {
+			type: Boolean,
+			default: !1
+		},
+		placeholderSrc: { default: void 0 },
+		preview: {
+			type: Boolean,
+			default: !0
+		},
+		mask: {
+			type: Boolean,
+			default: !0
+		},
+		previewSrc: { default: void 0 },
+		previewVisible: {
+			type: Boolean,
+			default: void 0
+		},
+		scaleStep: { default: .5 },
+		minScale: { default: 1 },
+		maxScale: { default: 50 },
+		movable: {
+			type: Boolean,
+			default: !0
+		},
+		loading: { default: void 0 },
+		crossOrigin: { default: void 0 },
+		decoding: { default: void 0 },
+		referrerPolicy: { default: void 0 }
+	},
+	emits: [
+		"error",
+		"update:previewVisible",
+		"transform"
+	],
+	setup(c, { emit: w }) {
+		let T = c, E = w, D = p("loading"), O = p(!1);
+		function fe() {
+			D.value = "loaded";
+		}
+		function pe(e) {
+			T.fallback && !O.value ? (O.value = !0, D.value = "loading") : D.value = "error", E("error", e);
+		}
+		let me = n(() => O.value && T.fallback ? T.fallback : T.src);
+		_(() => T.src, () => {
+			D.value = "loading", O.value = !1;
+		});
+		let k = n(() => T.placeholderSrc && D.value === "loading"), A = n(() => {
+			let e = {};
+			return T.width != null && (e.width = typeof T.width == "number" ? `${T.width}px` : T.width), T.height != null && (e.height = typeof T.height == "number" ? `${T.height}px` : T.height), e;
+		}), j = n(() => T.preview && T.mask && D.value === "loaded"), M = p(!1), N = n(() => T.previewVisible !== void 0), P = n(() => N.value ? T.previewVisible : M.value);
+		function F() {
+			T.preview && (N.value ? E("update:previewVisible", !0) : M.value = !0, l(() => {
+				De();
+			}));
+		}
+		function I() {
+			N.value ? E("update:previewVisible", !1) : M.value = !1, l(() => {
+				Z.value?.focus();
+			});
+		}
+		let L = p(1), R = p(0), z = p(!1), B = p(!1), V = p(0), H = p(0);
+		function he() {
+			return {
+				scale: L.value,
+				rotate: R.value,
+				flipX: z.value,
+				flipY: B.value,
+				x: V.value,
+				y: H.value
+			};
+		}
+		function U(e) {
+			E("transform", {
+				transform: he(),
+				action: e
+			});
+		}
+		function W() {
+			L.value = 1, R.value = 0, z.value = !1, B.value = !1, V.value = 0, H.value = 0;
+		}
+		function ge() {
+			W(), U("reset");
+		}
+		function _e() {
+			let e = L.value + T.scaleStep;
+			L.value = Math.min(e, T.maxScale), U("zoomIn");
+		}
+		function ve() {
+			let e = L.value - T.scaleStep;
+			L.value = Math.max(e, T.minScale), U("zoomOut");
+		}
+		function ye() {
+			R.value -= 90, U("rotateLeft");
+		}
+		function be() {
+			R.value += 90, U("rotateRight");
+		}
+		function xe() {
+			z.value = !z.value, U("flipX");
+		}
+		function Se() {
+			B.value = !B.value, U("flipY");
+		}
+		let Ce = n(() => {
+			let e = [];
+			return e.push(`translate(${V.value}px, ${H.value}px)`), e.push(`scale(${z.value ? -1 : 1}, ${B.value ? -1 : 1})`), e.push(`scale(${L.value})`), e.push(`rotate(${R.value}deg)`), e.join(" ");
+		});
+		_(P, (e) => {
+			e && W();
+		});
+		let we = n(() => T.previewSrc || T.src), G = p(!1), K = p(0), q = p(0), J = p(0), Y = p(0);
+		function Te(e) {
+			if (!T.movable) return;
+			let t = e.target;
+			t.closest(".b-image-preview__toolbar") || t.closest(".b-image-preview__close") || (G.value = !0, K.value = e.clientX, q.value = e.clientY, J.value = V.value, Y.value = H.value, e.currentTarget?.setPointerCapture(e.pointerId), U("dragStart"));
+		}
+		function Ee(e) {
+			if (!G.value) return;
+			let t = e.clientX - K.value, n = e.clientY - q.value;
+			V.value = J.value + t, H.value = Y.value + n;
+		}
+		function X() {
+			G.value && (G.value = !1, U("dragEnd"));
+		}
+		let Z = p(null), Q = p(null);
+		function De() {
+			l(() => {
+				if (!Q.value) return;
+				let e = Q.value.querySelectorAll("button, [tabindex]:not([tabindex=\"-1\"])");
+				e.length > 0 && e[0].focus();
+			});
+		}
+		function Oe(e) {
+			if (e.key === "Escape") {
+				e.stopPropagation(), I();
+				return;
+			}
+			if (e.key === "Tab" && Q.value) {
+				let t = Array.from(Q.value.querySelectorAll("button, [tabindex]:not([tabindex=\"-1\"])"));
+				if (t.length === 0) return;
+				let n = t[0], r = t[t.length - 1];
+				e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
+			}
+		}
+		function $(e) {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), F());
+		}
+		_(P, (e) => {
+			typeof document > "u" || (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "");
+		}), te(() => {
+			typeof document < "u" && (document.body.style.overflow = "");
+		});
+		function ke(e) {
+			if (e.preventDefault(), e.deltaY < 0) {
+				let e = L.value + T.scaleStep;
+				L.value = Math.min(e, T.maxScale);
+			} else {
+				let e = L.value - T.scaleStep;
+				L.value = Math.max(e, T.minScale);
+			}
+			U("wheel");
+		}
+		function Ae(e) {
+			let t = e.target;
+			if (t.tagName !== "BUTTON") return;
+			let n = t.closest(".b-image-preview__toolbar");
+			if (!n) return;
+			let r = Array.from(n.querySelectorAll("button:not(:disabled)")), i = r.indexOf(t), a = -1;
+			e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), a = (i + 1) % r.length) : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (e.preventDefault(), a = (i - 1 + r.length) % r.length) : e.key === "Home" ? (e.preventDefault(), a = 0) : e.key === "End" && (e.preventDefault(), a = r.length - 1), a >= 0 && r[a].focus();
+		}
+		return (n, l) => (f(), a("div", {
+			class: u(["b-image", {
+				"b-image--error": D.value === "error" && !c.fallback,
+				"b-image--preview": c.preview
+			}]),
+			style: d(A.value)
+		}, [
+			k.value ? (f(), a("img", {
+				key: 0,
+				class: "b-image__progressive-placeholder",
+				src: c.placeholderSrc,
+				alt: c.alt,
+				"aria-hidden": "true"
+			}, null, 8, ae)) : i("", !0),
+			(c.placeholder || n.$slots.placeholder) && D.value === "loading" && !c.placeholderSrc ? (f(), a("div", oe, [m(n.$slots, "placeholder", {}, () => [l[0] ||= o("div", { class: "b-image__placeholder-shimmer" }, null, -1)])])) : i("", !0),
+			re(o("img", {
+				class: "b-image__img",
+				src: me.value,
+				alt: c.alt,
+				width: typeof c.width == "number" ? c.width : void 0,
+				height: typeof c.height == "number" ? c.height : void 0,
+				loading: c.loading,
+				crossorigin: c.crossOrigin,
+				decoding: c.decoding,
+				referrerpolicy: c.referrerPolicy,
+				onLoad: fe,
+				onError: pe
+			}, null, 40, v), [[g, D.value !== "loading" || !c.placeholder && !n.$slots.placeholder && !c.placeholderSrc]]),
+			j.value ? (f(), a("div", {
+				key: 2,
+				ref_key: "triggerRef",
+				ref: Z,
+				class: "b-image__mask",
+				role: "button",
+				tabindex: "0",
+				"aria-label": `Preview image${c.alt ? ": " + c.alt : ""}`,
+				onClick: F,
+				onKeydown: $
+			}, [m(n.$slots, "preview-mask", {}, () => [l[1] ||= o("span", {
+				class: "b-image__mask-text",
+				"aria-hidden": "true"
+			}, [o("svg", {
+				class: "b-image__mask-icon",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "2",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				"aria-hidden": "true",
+				focusable: "false"
+			}, [o("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), o("circle", {
+				cx: "12",
+				cy: "12",
+				r: "3"
+			})]), ee(" Preview ")], -1)])], 40, se)) : c.preview && !c.mask && D.value === "loaded" ? (f(), a("div", {
+				key: 3,
+				ref_key: "triggerRef",
+				ref: Z,
+				class: "b-image__click-target",
+				role: "button",
+				tabindex: "0",
+				"aria-label": `Preview image${c.alt ? ": " + c.alt : ""}`,
+				onClick: F,
+				onKeydown: $
+			}, null, 40, ce)) : i("", !0),
+			(f(), r(e, { to: "body" }, [s(t, { name: "b-image-preview" }, {
+				default: ne(() => [P.value ? (f(), a("div", {
+					key: 0,
+					ref_key: "overlayRef",
+					ref: Q,
+					class: u(["b-image-preview", { "b-image-preview--dragging": G.value }]),
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-label": `Image preview${c.alt ? ": " + c.alt : ""}`,
+					onKeydown: Oe,
+					onWheel: ie(ke, ["prevent"]),
+					onPointerdown: Te,
+					onPointermove: Ee,
+					onPointerup: X,
+					onPointercancel: X
+				}, [
+					o("div", {
+						class: "b-image-preview__backdrop",
+						onClick: I
+					}),
+					o("button", {
+						class: "b-image-preview__close",
+						type: "button",
+						"aria-label": "Close preview",
+						onClick: I
+					}, [...l[2] ||= [o("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"aria-hidden": "true",
+						focusable: "false"
+					}, [o("line", {
+						x1: "18",
+						y1: "6",
+						x2: "6",
+						y2: "18"
+					}), o("line", {
+						x1: "6",
+						y1: "6",
+						x2: "18",
+						y2: "18"
+					})], -1)]]),
+					o("div", ue, [o("img", {
+						class: "b-image-preview__img",
+						src: we.value,
+						alt: c.alt,
+						style: d({ transform: Ce.value }),
+						draggable: "false"
+					}, null, 12, y)]),
+					o("div", {
+						class: "b-image-preview__toolbar",
+						role: "toolbar",
+						"aria-label": "Image preview controls",
+						onKeydown: Ae
+					}, [
+						o("button", {
+							type: "button",
+							"aria-label": "Flip horizontal",
+							"aria-pressed": z.value,
+							onClick: xe
+						}, [...l[3] ||= [o("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2",
+							"aria-hidden": "true",
+							focusable: "false"
+						}, [
+							o("path", { d: "M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3" }),
+							o("path", { d: "M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3" }),
+							o("line", {
+								x1: "12",
+								y1: "1",
+								x2: "12",
+								y2: "23",
+								"stroke-dasharray": "2 2"
+							})
+						], -1)]], 8, b),
+						o("button", {
+							type: "button",
+							"aria-label": "Flip vertical",
+							"aria-pressed": B.value,
+							onClick: Se
+						}, [...l[4] ||= [o("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2",
+							"aria-hidden": "true",
+							focusable: "false"
+						}, [
+							o("path", { d: "M3 8V5a2 2 0 0 1 2-2h14c1.1 0 2 .9 2 2v3" }),
+							o("path", { d: "M3 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3" }),
+							o("line", {
+								x1: "1",
+								y1: "12",
+								x2: "23",
+								y2: "12",
+								"stroke-dasharray": "2 2"
+							})
+						], -1)]], 8, x),
+						o("button", {
+							type: "button",
+							"aria-label": "Rotate left",
+							onClick: ye
+						}, [...l[5] ||= [o("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"aria-hidden": "true",
+							focusable: "false"
+						}, [o("polyline", { points: "1 4 1 10 7 10" }), o("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })], -1)]]),
+						o("button", {
+							type: "button",
+							"aria-label": "Rotate right",
+							onClick: be
+						}, [...l[6] ||= [o("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"aria-hidden": "true",
+							focusable: "false"
+						}, [o("polyline", { points: "23 4 23 10 17 10" }), o("path", { d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10" })], -1)]]),
+						o("button", {
+							type: "button",
+							"aria-label": "Zoom out",
+							disabled: L.value <= c.minScale,
+							onClick: ve
+						}, [...l[7] ||= [o("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"aria-hidden": "true",
+							focusable: "false"
+						}, [
+							o("circle", {
+								cx: "11",
+								cy: "11",
+								r: "8"
+							}),
+							o("line", {
+								x1: "21",
+								y1: "21",
+								x2: "16.65",
+								y2: "16.65"
+							}),
+							o("line", {
+								x1: "8",
+								y1: "11",
+								x2: "14",
+								y2: "11"
+							})
+						], -1)]], 8, S),
+						o("span", C, h(Math.round(L.value * 100)) + "% ", 1),
+						o("button", {
+							type: "button",
+							"aria-label": "Zoom in",
+							disabled: L.value >= c.maxScale,
+							onClick: _e
+						}, [...l[8] ||= [o("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"aria-hidden": "true",
+							focusable: "false"
+						}, [
+							o("circle", {
+								cx: "11",
+								cy: "11",
+								r: "8"
+							}),
+							o("line", {
+								x1: "21",
+								y1: "21",
+								x2: "16.65",
+								y2: "16.65"
+							}),
+							o("line", {
+								x1: "11",
+								y1: "8",
+								x2: "11",
+								y2: "14"
+							}),
+							o("line", {
+								x1: "8",
+								y1: "11",
+								x2: "14",
+								y2: "11"
+							})
+						], -1)]], 8, de),
+						o("button", {
+							type: "button",
+							"aria-label": "Reset to original size",
+							onClick: ge
+						}, [...l[9] ||= [o("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"aria-hidden": "true",
+							focusable: "false"
+						}, [o("rect", {
+							x: "3",
+							y: "3",
+							width: "18",
+							height: "18",
+							rx: "2",
+							ry: "2"
+						}), o("text", {
+							x: "12",
+							y: "16",
+							"text-anchor": "middle",
+							fill: "currentColor",
+							stroke: "none",
+							"font-size": "10",
+							"font-weight": "600",
+							"font-family": "system-ui"
+						}, " 1:1 ")], -1)]])
+					], 32)
+				], 42, le)) : i("", !0)]),
+				_: 1
+			})]))
+		], 6));
+	}
+});
 //#endregion
-export { t as BInputStatus, e as BInputVariant };
+export { w as default };
 
 //# sourceMappingURL=design-system113.js.map

package/dist/design-system113.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system113.js","names":[],"sources":["../src/components/BInput/types.ts"],"sourcesContent":["export enum BInputVariant {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n  Underlined = 'underlined',\n}\n\nexport enum BInputStatus {\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport interface BInputCountConfig {\n  /** Custom character count strategy (e.g., for emoji or CJK). */\n  strategy?: (value: string) => number;\n  /** Maximum count to display. Triggers exceedFormatter when exceeded. */\n  max?: number;\n  /** Formatter when count exceeds max. */\n  exceedFormatter?: (value: string, config: { max: number }) => string;\n  /** Whether to show the count indicator. */\n  show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => string);\n}\n\nexport interface BInputFocusOptions {\n  preventScroll?: boolean;\n  cursor?: 'start' | 'end' | 'all';\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA,cACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,UAAA;KACD"}
+{"version":3,"file":"design-system113.js","names":["$slots"],"sources":["../src/components/BImage/BImage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────\nexport type BImageTransformAction =\n  | 'flipX'\n  | 'flipY'\n  | 'rotateLeft'\n  | 'rotateRight'\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'reset'\n  | 'wheel'\n  | 'dragStart'\n  | 'dragEnd';\n\nexport interface BImageTransform {\n  scale: number;\n  rotate: number;\n  flipX: boolean;\n  flipY: boolean;\n  x: number;\n  y: number;\n}\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Image source URL. */\n    src?: string;\n    /** Alt text for the image. */\n    alt?: string;\n    /** Image width (px or CSS value). */\n    width?: string | number;\n    /** Image height (px or CSS value). */\n    height?: string | number;\n    /** Fallback source when loading fails. */\n    fallback?: string;\n    /**\n     * Show loading placeholder. Set to `true` for built-in shimmer,\n     * or use the `placeholder` slot for custom content.\n     */\n    placeholder?: boolean;\n    /**\n     * Low-resolution source for progressive loading.\n     * Shown blurred while the full image loads.\n     */\n    placeholderSrc?: string;\n    /** Enable image preview on click. */\n    preview?: boolean;\n    /** Show the hover mask overlay over the image. Set `false` to hide the mask entirely while keeping preview on click. */\n    mask?: boolean;\n    /** Custom source for preview (defaults to `src`). */\n    previewSrc?: string;\n    /** Controlled preview visibility (v-model:previewVisible). */\n    previewVisible?: boolean;\n    /** Zoom scale step for preview controls. */\n    scaleStep?: number;\n    /** Min zoom scale. */\n    minScale?: number;\n    /** Max zoom scale. */\n    maxScale?: number;\n    /** Allow dragging/panning the image inside the preview. */\n    movable?: boolean;\n    /** Native `loading` attribute - `'lazy'` for below-the-fold images. */\n    loading?: 'lazy' | 'eager';\n    /** CORS setting for the image. */\n    crossOrigin?: '' | 'anonymous' | 'use-credentials';\n    /** Decoding hint for the browser. */\n    decoding?: 'async' | 'auto' | 'sync';\n    /** Referrer policy for the image request. */\n    referrerPolicy?:\n      | ''\n      | 'no-referrer'\n      | 'no-referrer-when-downgrade'\n      | 'origin'\n      | 'origin-when-cross-origin'\n      | 'same-origin'\n      | 'strict-origin'\n      | 'strict-origin-when-cross-origin'\n      | 'unsafe-url';\n  }>(),\n  {\n    src: undefined,\n    alt: '',\n    width: undefined,\n    height: undefined,\n    fallback: undefined,\n    placeholder: false,\n    placeholderSrc: undefined,\n    preview: true,\n    mask: true,\n    previewSrc: undefined,\n    previewVisible: undefined,\n    scaleStep: 0.5,\n    minScale: 1,\n    maxScale: 50,\n    movable: true,\n    loading: undefined,\n    crossOrigin: undefined,\n    decoding: undefined,\n    referrerPolicy: undefined,\n  },\n);\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when the <img> fails to load. */\n  (e: 'error', event: Event): void;\n  /** Fires when controlled preview visibility changes. */\n  (e: 'update:previewVisible', visible: boolean): void;\n  /** Fires on every preview transform change (zoom, rotate, flip, drag). */\n  (e: 'transform', payload: { transform: BImageTransform; action: BImageTransformAction }): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Custom loading placeholder content. */\n  placeholder?(): unknown;\n  /** Custom preview mask overlay. */\n  'preview-mask'?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Image loading state\n// ─────────────────────────────────────────────\nconst loadStatus = ref<'loading' | 'loaded' | 'error'>('loading');\nconst useFallback = ref(false);\n\nfunction handleLoad() {\n  loadStatus.value = 'loaded';\n}\n\nfunction handleError(event: Event) {\n  if (props.fallback && !useFallback.value) {\n    useFallback.value = true;\n    loadStatus.value = 'loading';\n  } else {\n    loadStatus.value = 'error';\n  }\n  emit('error', event);\n}\n\nconst displaySrc = computed(() => {\n  if (useFallback.value && props.fallback) return props.fallback;\n  return props.src;\n});\n\n// Reset state when src changes\nwatch(\n  () => props.src,\n  () => {\n    loadStatus.value = 'loading';\n    useFallback.value = false;\n  },\n);\n\n// ─────────────────────────────────────────────\n// Progressive loading (low-res blurry placeholder)\n// ─────────────────────────────────────────────\nconst showProgressivePlaceholder = computed(\n  () => props.placeholderSrc && loadStatus.value === 'loading',\n);\n\n// ─────────────────────────────────────────────\n// Dimension helpers\n// ─────────────────────────────────────────────\nconst dimensionStyle = computed(() => {\n  const s: Record<string, string> = {};\n  if (props.width != null) {\n    s.width = typeof props.width === 'number' ? `${props.width}px` : props.width;\n  }\n  if (props.height != null) {\n    s.height = typeof props.height === 'number' ? `${props.height}px` : props.height;\n  }\n  return s;\n});\n\n// ─────────────────────────────────────────────\n// Show mask logic\n// ─────────────────────────────────────────────\nconst showMask = computed(() => props.preview && props.mask && loadStatus.value === 'loaded');\n\n// ─────────────────────────────────────────────\n// Preview overlay\n// ─────────────────────────────────────────────\nconst internalPreviewOpen = ref(false);\nconst isControlled = computed(() => props.previewVisible !== undefined);\n\nconst previewOpen = computed(() =>\n  isControlled.value ? props.previewVisible : internalPreviewOpen.value,\n);\n\nfunction openPreview() {\n  if (!props.preview) return;\n  if (isControlled.value) {\n    emit('update:previewVisible', true);\n  } else {\n    internalPreviewOpen.value = true;\n  }\n  nextTick(() => {\n    trapFocusInPreview();\n  });\n}\n\nfunction closePreview() {\n  if (isControlled.value) {\n    emit('update:previewVisible', false);\n  } else {\n    internalPreviewOpen.value = false;\n  }\n  // Return focus to trigger\n  nextTick(() => {\n    triggerRef.value?.focus();\n  });\n}\n\n// ─────────────────────────────────────────────\n// Preview transform state\n// ─────────────────────────────────────────────\nconst scale = ref(1);\nconst rotate = ref(0);\nconst flipX = ref(false);\nconst flipY = ref(false);\nconst dragX = ref(0);\nconst dragY = ref(0);\n\nfunction currentTransform(): BImageTransform {\n  return {\n    scale: scale.value,\n    rotate: rotate.value,\n    flipX: flipX.value,\n    flipY: flipY.value,\n    x: dragX.value,\n    y: dragY.value,\n  };\n}\n\nfunction emitTransform(action: BImageTransformAction) {\n  emit('transform', { transform: currentTransform(), action });\n}\n\nfunction resetTransform() {\n  scale.value = 1;\n  rotate.value = 0;\n  flipX.value = false;\n  flipY.value = false;\n  dragX.value = 0;\n  dragY.value = 0;\n}\n\nfunction doResetTransform() {\n  resetTransform();\n  emitTransform('reset');\n}\n\nfunction zoomIn() {\n  const next = scale.value + props.scaleStep;\n  scale.value = Math.min(next, props.maxScale);\n  emitTransform('zoomIn');\n}\n\nfunction zoomOut() {\n  const next = scale.value - props.scaleStep;\n  scale.value = Math.max(next, props.minScale);\n  emitTransform('zoomOut');\n}\n\nfunction rotateLeft() {\n  rotate.value -= 90;\n  emitTransform('rotateLeft');\n}\n\nfunction rotateRight() {\n  rotate.value += 90;\n  emitTransform('rotateRight');\n}\n\nfunction toggleFlipX() {\n  flipX.value = !flipX.value;\n  emitTransform('flipX');\n}\n\nfunction toggleFlipY() {\n  flipY.value = !flipY.value;\n  emitTransform('flipY');\n}\n\nconst previewTransform = computed(() => {\n  const parts: string[] = [];\n  parts.push(`translate(${dragX.value}px, ${dragY.value}px)`);\n  parts.push(`scale(${flipX.value ? -1 : 1}, ${flipY.value ? -1 : 1})`);\n  parts.push(`scale(${scale.value})`);\n  parts.push(`rotate(${rotate.value}deg)`);\n  return parts.join(' ');\n});\n\n// Reset transform when preview is opened\nwatch(previewOpen, (open) => {\n  if (open) {\n    resetTransform();\n  }\n});\n\nconst previewImageSrc = computed(() => props.previewSrc || props.src);\n\n// ─────────────────────────────────────────────\n// Drag-to-pan (movable)\n// ─────────────────────────────────────────────\nconst isDragging = ref(false);\nconst dragStartX = ref(0);\nconst dragStartY = ref(0);\nconst dragStartTranslateX = ref(0);\nconst dragStartTranslateY = ref(0);\n\nfunction handlePreviewPointerDown(event: PointerEvent) {\n  if (!props.movable) return;\n  // Only initiate drag on the image body (not toolbar/close)\n  const target = event.target as HTMLElement;\n  if (target.closest('.b-image-preview__toolbar') || target.closest('.b-image-preview__close')) {\n    return;\n  }\n\n  isDragging.value = true;\n  dragStartX.value = event.clientX;\n  dragStartY.value = event.clientY;\n  dragStartTranslateX.value = dragX.value;\n  dragStartTranslateY.value = dragY.value;\n\n  (event.currentTarget as HTMLElement)?.setPointerCapture(event.pointerId);\n  emitTransform('dragStart');\n}\n\nfunction handlePreviewPointerMove(event: PointerEvent) {\n  if (!isDragging.value) return;\n  const dx = event.clientX - dragStartX.value;\n  const dy = event.clientY - dragStartY.value;\n  dragX.value = dragStartTranslateX.value + dx;\n  dragY.value = dragStartTranslateY.value + dy;\n}\n\nfunction handlePreviewPointerUp() {\n  if (!isDragging.value) return;\n  isDragging.value = false;\n  emitTransform('dragEnd');\n}\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nconst triggerRef = ref<HTMLElement | null>(null);\nconst overlayRef = ref<HTMLElement | null>(null);\n\nfunction trapFocusInPreview() {\n  nextTick(() => {\n    if (!overlayRef.value) return;\n    const focusable = overlayRef.value.querySelectorAll<HTMLElement>(\n      'button, [tabindex]:not([tabindex=\"-1\"])',\n    );\n    if (focusable.length > 0) {\n      focusable[0].focus();\n    }\n  });\n}\n\nfunction handleOverlayKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    event.stopPropagation();\n    closePreview();\n    return;\n  }\n\n  if (event.key === 'Tab' && overlayRef.value) {\n    const focusable = Array.from(\n      overlayRef.value.querySelectorAll<HTMLElement>('button, [tabindex]:not([tabindex=\"-1\"])'),\n    );\n    if (focusable.length === 0) return;\n\n    const first = focusable[0];\n    const last = focusable[focusable.length - 1];\n\n    if (event.shiftKey && document.activeElement === first) {\n      event.preventDefault();\n      last.focus();\n    } else if (!event.shiftKey && document.activeElement === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n}\n\nfunction handleTriggerKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    openPreview();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Body scroll lock\n// ─────────────────────────────────────────────\nwatch(previewOpen, (open) => {\n  if (typeof document === 'undefined') return;\n  if (open) {\n    document.body.style.overflow = 'hidden';\n  } else {\n    document.body.style.overflow = '';\n  }\n});\n\nonBeforeUnmount(() => {\n  if (typeof document !== 'undefined') {\n    document.body.style.overflow = '';\n  }\n});\n\n// ─────────────────────────────────────────────\n// Zoom with mouse wheel in preview\n// ─────────────────────────────────────────────\nfunction handlePreviewWheel(event: WheelEvent) {\n  event.preventDefault();\n  if (event.deltaY < 0) {\n    const next = scale.value + props.scaleStep;\n    scale.value = Math.min(next, props.maxScale);\n  } else {\n    const next = scale.value - props.scaleStep;\n    scale.value = Math.max(next, props.minScale);\n  }\n  emitTransform('wheel');\n}\n\n// ─────────────────────────────────────────────\n// Toolbar keyboard support\n// ─────────────────────────────────────────────\nfunction handleToolbarKeydown(event: KeyboardEvent) {\n  const target = event.target as HTMLElement;\n  if (target.tagName !== 'BUTTON') return;\n\n  const toolbar = target.closest('.b-image-preview__toolbar');\n  if (!toolbar) return;\n  const buttons = Array.from(toolbar.querySelectorAll<HTMLElement>('button:not(:disabled)'));\n  const index = buttons.indexOf(target);\n\n  let nextIndex = -1;\n  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n    event.preventDefault();\n    nextIndex = (index + 1) % buttons.length;\n  } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    nextIndex = (index - 1 + buttons.length) % buttons.length;\n  } else if (event.key === 'Home') {\n    event.preventDefault();\n    nextIndex = 0;\n  } else if (event.key === 'End') {\n    event.preventDefault();\n    nextIndex = buttons.length - 1;\n  }\n\n  if (nextIndex >= 0) {\n    buttons[nextIndex].focus();\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"b-image\"\n    :class=\"{\n      'b-image--error': loadStatus === 'error' && !fallback,\n      'b-image--preview': preview,\n    }\"\n    :style=\"dimensionStyle\"\n  >\n    <!-- Progressive placeholder (blurred low-res image) -->\n    <img\n      v-if=\"showProgressivePlaceholder\"\n      class=\"b-image__progressive-placeholder\"\n      :src=\"placeholderSrc\"\n      :alt=\"alt\"\n      aria-hidden=\"true\"\n    />\n\n    <!-- Placeholder (shimmer or slot) -->\n    <div\n      v-if=\"(placeholder || $slots.placeholder) && loadStatus === 'loading' && !placeholderSrc\"\n      class=\"b-image__placeholder\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"placeholder\">\n        <div class=\"b-image__placeholder-shimmer\" />\n      </slot>\n    </div>\n\n    <!-- Image -->\n    <img\n      v-show=\"loadStatus !== 'loading' || (!placeholder && !$slots.placeholder && !placeholderSrc)\"\n      class=\"b-image__img\"\n      :src=\"displaySrc\"\n      :alt=\"alt\"\n      :width=\"typeof width === 'number' ? width : undefined\"\n      :height=\"typeof height === 'number' ? height : undefined\"\n      :loading=\"loading\"\n      :crossorigin=\"crossOrigin\"\n      :decoding=\"decoding\"\n      :referrerpolicy=\"referrerPolicy\"\n      @load=\"handleLoad\"\n      @error=\"handleError\"\n    />\n\n    <!-- Preview mask overlay (clickable) -->\n    <div\n      v-if=\"showMask\"\n      ref=\"triggerRef\"\n      class=\"b-image__mask\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-label=\"`Preview image${alt ? ': ' + alt : ''}`\"\n      @click=\"openPreview\"\n      @keydown=\"handleTriggerKeydown\"\n    >\n      <slot name=\"preview-mask\">\n        <span class=\"b-image__mask-text\" aria-hidden=\"true\">\n          <!-- Eye icon -->\n          <svg\n            class=\"b-image__mask-icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n            <circle cx=\"12\" cy=\"12\" r=\"3\" />\n          </svg>\n          Preview\n        </span>\n      </slot>\n    </div>\n\n    <!-- Invisible click target when mask is hidden but preview is enabled -->\n    <div\n      v-else-if=\"preview && !mask && loadStatus === 'loaded'\"\n      ref=\"triggerRef\"\n      class=\"b-image__click-target\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-label=\"`Preview image${alt ? ': ' + alt : ''}`\"\n      @click=\"openPreview\"\n      @keydown=\"handleTriggerKeydown\"\n    />\n\n    <!-- Preview overlay (teleported to body) -->\n    <Teleport to=\"body\">\n      <Transition name=\"b-image-preview\">\n        <div\n          v-if=\"previewOpen\"\n          ref=\"overlayRef\"\n          class=\"b-image-preview\"\n          :class=\"{ 'b-image-preview--dragging': isDragging }\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"`Image preview${alt ? ': ' + alt : ''}`\"\n          @keydown=\"handleOverlayKeydown\"\n          @wheel.prevent=\"handlePreviewWheel\"\n          @pointerdown=\"handlePreviewPointerDown\"\n          @pointermove=\"handlePreviewPointerMove\"\n          @pointerup=\"handlePreviewPointerUp\"\n          @pointercancel=\"handlePreviewPointerUp\"\n        >\n          <!-- Backdrop -->\n          <div class=\"b-image-preview__backdrop\" @click=\"closePreview\" />\n\n          <!-- Close button -->\n          <button\n            class=\"b-image-preview__close\"\n            type=\"button\"\n            aria-label=\"Close preview\"\n            @click=\"closePreview\"\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n            </svg>\n          </button>\n\n          <!-- Preview image -->\n          <div class=\"b-image-preview__body\">\n            <img\n              class=\"b-image-preview__img\"\n              :src=\"previewImageSrc\"\n              :alt=\"alt\"\n              :style=\"{ transform: previewTransform }\"\n              draggable=\"false\"\n            />\n          </div>\n\n          <!-- Toolbar -->\n          <div\n            class=\"b-image-preview__toolbar\"\n            role=\"toolbar\"\n            aria-label=\"Image preview controls\"\n            @keydown=\"handleToolbarKeydown\"\n          >\n            <!-- Flip Horizontal -->\n            <button\n              type=\"button\"\n              aria-label=\"Flip horizontal\"\n              :aria-pressed=\"flipX\"\n              @click=\"toggleFlipX\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <path d=\"M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3\" />\n                <path d=\"M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3\" />\n                <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\" stroke-dasharray=\"2 2\" />\n              </svg>\n            </button>\n\n            <!-- Flip Vertical -->\n            <button\n              type=\"button\"\n              aria-label=\"Flip vertical\"\n              :aria-pressed=\"flipY\"\n              @click=\"toggleFlipY\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <path d=\"M3 8V5a2 2 0 0 1 2-2h14c1.1 0 2 .9 2 2v3\" />\n                <path d=\"M3 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3\" />\n                <line x1=\"1\" y1=\"12\" x2=\"23\" y2=\"12\" stroke-dasharray=\"2 2\" />\n              </svg>\n            </button>\n\n            <!-- Rotate Left -->\n            <button type=\"button\" aria-label=\"Rotate left\" @click=\"rotateLeft\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <polyline points=\"1 4 1 10 7 10\" />\n                <path d=\"M3.51 15a9 9 0 1 0 2.13-9.36L1 10\" />\n              </svg>\n            </button>\n\n            <!-- Rotate Right -->\n            <button type=\"button\" aria-label=\"Rotate right\" @click=\"rotateRight\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <polyline points=\"23 4 23 10 17 10\" />\n                <path d=\"M20.49 15a9 9 0 1 1-2.13-9.36L23 10\" />\n              </svg>\n            </button>\n\n            <!-- Zoom Out -->\n            <button\n              type=\"button\"\n              aria-label=\"Zoom out\"\n              :disabled=\"scale <= minScale\"\n              @click=\"zoomOut\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <circle cx=\"11\" cy=\"11\" r=\"8\" />\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n                <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" />\n              </svg>\n            </button>\n\n            <!-- Scale indicator -->\n            <span class=\"b-image-preview__scale\" aria-live=\"polite\" aria-atomic=\"true\">\n              {{ Math.round(scale * 100) }}%\n            </span>\n\n            <!-- Zoom In -->\n            <button\n              type=\"button\"\n              aria-label=\"Zoom in\"\n              :disabled=\"scale >= maxScale\"\n              @click=\"zoomIn\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <circle cx=\"11\" cy=\"11\" r=\"8\" />\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n                <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\" />\n                <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" />\n              </svg>\n            </button>\n\n            <!-- Reset (1:1) -->\n            <button type=\"button\" aria-label=\"Reset to original size\" @click=\"doResetTransform\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n                <text\n                  x=\"12\"\n                  y=\"16\"\n                  text-anchor=\"middle\"\n                  fill=\"currentColor\"\n                  stroke=\"none\"\n                  font-size=\"10\"\n                  font-weight=\"600\"\n                  font-family=\"system-ui\"\n                >\n                  1:1\n                </text>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </Transition>\n    </Teleport>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-image {\n  /* Layout */\n  --b-image-border-radius: 8px;\n  --b-image-bg: oklch(95% 0.003 260);\n  --b-image-object-fit: cover;\n\n  /* Placeholder */\n  --b-image-placeholder-bg: oklch(93% 0.005 260);\n  --b-image-placeholder-shimmer: linear-gradient(\n    90deg,\n    oklch(93% 0.005 260) 25%,\n    oklch(96% 0.003 260) 50%,\n    oklch(93% 0.005 260) 75%\n  );\n  --b-image-progressive-blur: 20px;\n\n  /* Mask */\n  --b-image-mask-bg: oklch(0% 0 0 / 50%);\n  --b-image-mask-color: oklch(100% 0 0);\n  --b-image-mask-font-size: 14px;\n  --b-image-mask-icon-size: 20px;\n\n  /* Error */\n  --b-image-error-bg: oklch(95% 0.003 260);\n  --b-image-error-color: oklch(55% 0.01 260);\n  --b-image-error-icon-size: 32px;\n\n  /* Animation */\n  --b-image-transition-duration: 200ms;\n\n  /* Focus */\n  --b-image-focus-ring: 2px solid oklch(54.6% 0.245 262.881);\n  --b-image-focus-ring-offset: 2px;\n}\n\n/* Preview overlay tokens */\n.b-image-preview {\n  --b-image-preview-backdrop-bg: oklch(0% 0 0 / 65%);\n  --b-image-preview-toolbar-bg: oklch(15% 0.005 260 / 85%);\n  --b-image-preview-toolbar-color: oklch(95% 0.005 260);\n  --b-image-preview-toolbar-btn-size: 40px;\n  --b-image-preview-toolbar-icon-size: 20px;\n  --b-image-preview-toolbar-gap: 8px;\n  --b-image-preview-toolbar-radius: 24px;\n  --b-image-preview-toolbar-padding: 4px 16px;\n  --b-image-preview-close-size: 40px;\n  --b-image-preview-close-color: oklch(90% 0.005 260);\n  --b-image-preview-close-hover-bg: oklch(100% 0 0 / 12%);\n  --b-image-preview-transition-duration: 250ms;\n  --b-image-preview-scale-font-size: 13px;\n  --b-image-preview-scale-min-width: 52px;\n}\n\n/* ── Dark mode ─────────────────────────────── */\n[data-prefers-color='dark'] .b-image {\n  --b-image-bg: oklch(22% 0.005 260);\n  --b-image-placeholder-bg: oklch(25% 0.005 260);\n  --b-image-placeholder-shimmer: linear-gradient(\n    90deg,\n    oklch(25% 0.005 260) 25%,\n    oklch(30% 0.003 260) 50%,\n    oklch(25% 0.005 260) 75%\n  );\n  --b-image-error-bg: oklch(22% 0.005 260);\n  --b-image-error-color: oklch(70% 0.01 260);\n}\n\n[data-prefers-color='dark'] .b-image-preview {\n  --b-image-preview-backdrop-bg: oklch(0% 0 0 / 80%);\n  --b-image-preview-toolbar-bg: oklch(10% 0.005 260 / 90%);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-image {\n    --b-image-bg: oklch(22% 0.005 260);\n    --b-image-placeholder-bg: oklch(25% 0.005 260);\n    --b-image-placeholder-shimmer: linear-gradient(\n      90deg,\n      oklch(25% 0.005 260) 25%,\n      oklch(30% 0.003 260) 50%,\n      oklch(25% 0.005 260) 75%\n    );\n    --b-image-error-bg: oklch(22% 0.005 260);\n    --b-image-error-color: oklch(70% 0.01 260);\n  }\n  [data-prefers-color='system'] .b-image-preview {\n    --b-image-preview-backdrop-bg: oklch(0% 0 0 / 80%);\n    --b-image-preview-toolbar-bg: oklch(10% 0.005 260 / 90%);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-image {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n  border-radius: var(--b-image-border-radius);\n  background-color: var(--b-image-bg);\n  line-height: 0;\n  box-sizing: border-box;\n}\n\n.b-image__img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--b-image-object-fit);\n  border-radius: var(--b-image-border-radius);\n}\n\n/* ─────────────────────────────────────────────\n   Progressive placeholder (blurred low-res)\n   ───────────────────────────────────────────── */\n.b-image__progressive-placeholder {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--b-image-object-fit);\n  border-radius: var(--b-image-border-radius);\n  filter: blur(var(--b-image-progressive-blur));\n  transform: scale(1.1);\n  z-index: 1;\n}\n\n/* ─────────────────────────────────────────────\n   Placeholder\n   ───────────────────────────────────────────── */\n.b-image__placeholder {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--b-image-placeholder-bg);\n  border-radius: var(--b-image-border-radius);\n  z-index: 1;\n}\n\n.b-image__placeholder-shimmer {\n  width: 100%;\n  height: 100%;\n  background: var(--b-image-placeholder-shimmer);\n  background-size: 200% 100%;\n  animation: b-image-shimmer 1.5s infinite;\n  border-radius: var(--b-image-border-radius);\n}\n\n@keyframes b-image-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Preview mask\n   ───────────────────────────────────────────── */\n.b-image__mask {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--b-image-mask-bg);\n  color: var(--b-image-mask-color);\n  font-size: var(--b-image-mask-font-size);\n  border-radius: var(--b-image-border-radius);\n  opacity: 0;\n  cursor: pointer;\n  transition: opacity var(--b-image-transition-duration) ease;\n  z-index: 2;\n  outline: none;\n}\n\n.b-image--preview:hover .b-image__mask,\n.b-image__mask:focus-visible {\n  opacity: 1;\n}\n\n.b-image__mask:focus-visible {\n  outline: var(--b-image-focus-ring);\n  outline-offset: var(--b-image-focus-ring-offset);\n}\n\n.b-image__mask-text {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n  user-select: none;\n}\n\n.b-image__mask-icon {\n  width: var(--b-image-mask-icon-size);\n  height: var(--b-image-mask-icon-size);\n}\n\n/* Invisible click target (mask=false, preview=true) */\n.b-image__click-target {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  cursor: pointer;\n  outline: none;\n}\n\n.b-image__click-target:focus-visible {\n  outline: var(--b-image-focus-ring);\n  outline-offset: var(--b-image-focus-ring-offset);\n}\n\n/* ─────────────────────────────────────────────\n   Error state\n   ───────────────────────────────────────────── */\n.b-image--error {\n  background-color: var(--b-image-error-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Preview overlay\n   ───────────────────────────────────────────── */\n.b-image-preview {\n  position: fixed;\n  inset: 0;\n  z-index: 1080;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  touch-action: none;\n}\n\n.b-image-preview--dragging {\n  cursor: grabbing;\n}\n\n.b-image-preview__backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: var(--b-image-preview-backdrop-bg);\n}\n\n.b-image-preview__close {\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-image-preview-close-size);\n  height: var(--b-image-preview-close-size);\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--b-image-preview-close-color);\n  cursor: pointer;\n  padding: 0;\n  transition: background-color var(--b-image-preview-transition-duration) ease;\n}\n\n.b-image-preview__close:hover,\n.b-image-preview__close:focus-visible {\n  background-color: var(--b-image-preview-close-hover-bg);\n}\n\n.b-image-preview__close:focus-visible {\n  outline: var(--b-image-focus-ring);\n  outline-offset: var(--b-image-focus-ring-offset);\n}\n\n.b-image-preview__close svg {\n  width: 20px;\n  height: 20px;\n}\n\n.b-image-preview__body {\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  max-height: 100%;\n  padding: 40px;\n  box-sizing: border-box;\n  cursor: grab;\n}\n\n.b-image-preview--dragging .b-image-preview__body {\n  cursor: grabbing;\n}\n\n.b-image-preview__img {\n  max-width: 100%;\n  max-height: calc(100vh - 120px);\n  object-fit: contain;\n  transition: transform var(--b-image-preview-transition-duration) ease;\n  user-select: none;\n  -webkit-user-drag: none;\n  pointer-events: none;\n}\n\n.b-image-preview--dragging .b-image-preview__img {\n  transition: none;\n}\n\n/* ─────────────────────────────────────────────\n   Toolbar\n   ───────────────────────────────────────────── */\n.b-image-preview__toolbar {\n  position: absolute;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: var(--b-image-preview-toolbar-gap);\n  padding: var(--b-image-preview-toolbar-padding);\n  background-color: var(--b-image-preview-toolbar-bg);\n  color: var(--b-image-preview-toolbar-color);\n  border-radius: var(--b-image-preview-toolbar-radius);\n  backdrop-filter: blur(8px);\n}\n\n.b-image-preview__toolbar button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-image-preview-toolbar-btn-size);\n  height: var(--b-image-preview-toolbar-btn-size);\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  padding: 0;\n  transition: background-color var(--b-image-preview-transition-duration) ease;\n}\n\n.b-image-preview__toolbar button:hover:not(:disabled),\n.b-image-preview__toolbar button:focus-visible {\n  background-color: var(--b-image-preview-close-hover-bg);\n}\n\n.b-image-preview__toolbar button:focus-visible {\n  outline: var(--b-image-focus-ring);\n  outline-offset: var(--b-image-focus-ring-offset);\n}\n\n.b-image-preview__toolbar button:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.b-image-preview__toolbar button svg {\n  width: var(--b-image-preview-toolbar-icon-size);\n  height: var(--b-image-preview-toolbar-icon-size);\n}\n\n.b-image-preview__scale {\n  font-size: var(--b-image-preview-scale-font-size);\n  min-width: var(--b-image-preview-scale-min-width);\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n}\n\n/* ─────────────────────────────────────────────\n   Preview transitions\n   ───────────────────────────────────────────── */\n.b-image-preview-enter-active,\n.b-image-preview-leave-active {\n  transition: opacity var(--b-image-preview-transition-duration) ease;\n}\n\n.b-image-preview-enter-from,\n.b-image-preview-leave-to {\n  opacity: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-image {\n    --b-image-transition-duration: 0ms;\n  }\n\n  .b-image-preview {\n    --b-image-preview-transition-duration: 0ms;\n  }\n\n  .b-image__placeholder-shimmer {\n    animation: none;\n  }\n\n  .b-image-preview-enter-active,\n  .b-image-preview-leave-active {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system115.js

@@ -0,0 +1,8 @@
+import e from "./design-system113.js";
+/* empty css                 */
+//#region src/components/BImage/BImage.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=design-system115.js.map