@fangxinyan/lumina 0.6.17 → 0.7.0

package/dist/Icon.cjs

@@ -1,198 +1,200 @@
 'use strict';
 
-var chunkQMX67CVT_cjs = require('./chunk-QMX67CVT.cjs');
+var chunk2AUXUZ3Z_cjs = require('./chunk-2AUXUZ3Z.cjs');
+require('./chunk-NRJXZPZR.cjs');
+require('./chunk-EE5KXDRK.cjs');
 
 
 
 Object.defineProperty(exports, "AimOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.AimOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.AimOutlined; }
 });
 Object.defineProperty(exports, "AppstoreOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.AppstoreOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.AppstoreOutlined; }
 });
 Object.defineProperty(exports, "BarChartOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.BarChartOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.BarChartOutlined; }
 });
 Object.defineProperty(exports, "BlockOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.BlockOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.BlockOutlined; }
 });
 Object.defineProperty(exports, "BorderOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.BorderOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.BorderOutlined; }
 });
 Object.defineProperty(exports, "CameraOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.CameraOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.CameraOutlined; }
 });
 Object.defineProperty(exports, "CaretDownOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.CaretDownOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.CaretDownOutlined; }
 });
 Object.defineProperty(exports, "CaretUpOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.CaretUpOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.CaretUpOutlined; }
 });
 Object.defineProperty(exports, "CheckCircleFilled", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.CheckCircleFilled; }
+  get: function () { return chunk2AUXUZ3Z_cjs.CheckCircleFilled; }
 });
 Object.defineProperty(exports, "CheckCircleOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.CheckCircleOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.CheckCircleOutlined; }
 });
 Object.defineProperty(exports, "CheckOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.CheckOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.CheckOutlined; }
 });
 Object.defineProperty(exports, "ClockCircleFilled", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.ClockCircleFilled; }
+  get: function () { return chunk2AUXUZ3Z_cjs.ClockCircleFilled; }
 });
 Object.defineProperty(exports, "CloseCircleOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.CloseCircleOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.CloseCircleOutlined; }
 });
 Object.defineProperty(exports, "CloseOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.CloseOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.CloseOutlined; }
 });
 Object.defineProperty(exports, "CopyOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.CopyOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.CopyOutlined; }
 });
 Object.defineProperty(exports, "DashboardOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.DashboardOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.DashboardOutlined; }
 });
 Object.defineProperty(exports, "DeleteOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.DeleteOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.DeleteOutlined; }
 });
 Object.defineProperty(exports, "DownOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.DownOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.DownOutlined; }
 });
 Object.defineProperty(exports, "EnvironmentOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.EnvironmentOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.EnvironmentOutlined; }
 });
 Object.defineProperty(exports, "ExclamationCircleOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.ExclamationCircleOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.ExclamationCircleOutlined; }
 });
 Object.defineProperty(exports, "FolderOpenOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.FolderOpenOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.FolderOpenOutlined; }
 });
 Object.defineProperty(exports, "ICON_NAMES", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.ICON_NAMES; }
+  get: function () { return chunk2AUXUZ3Z_cjs.ICON_NAMES; }
 });
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.Icon; }
+  get: function () { return chunk2AUXUZ3Z_cjs.Icon; }
 });
 Object.defineProperty(exports, "LeftOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.LeftOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.LeftOutlined; }
 });
 Object.defineProperty(exports, "LoadingOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.LoadingOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.LoadingOutlined; }
 });
 Object.defineProperty(exports, "MinusCircleOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.MinusCircleOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.MinusCircleOutlined; }
 });
 Object.defineProperty(exports, "MinusOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.MinusOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.MinusOutlined; }
 });
 Object.defineProperty(exports, "NAMED_ICON_MAP", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.NAMED_ICON_MAP; }
+  get: function () { return chunk2AUXUZ3Z_cjs.NAMED_ICON_MAP; }
 });
 Object.defineProperty(exports, "PictureOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.PictureOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.PictureOutlined; }
 });
 Object.defineProperty(exports, "PlusOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.PlusOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.PlusOutlined; }
 });
 Object.defineProperty(exports, "QqOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.QqOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.QqOutlined; }
 });
 Object.defineProperty(exports, "ReloadOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.ReloadOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.ReloadOutlined; }
 });
 Object.defineProperty(exports, "RightOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.RightOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.RightOutlined; }
 });
 Object.defineProperty(exports, "RobotOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.RobotOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.RobotOutlined; }
 });
 Object.defineProperty(exports, "SearchOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.SearchOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.SearchOutlined; }
 });
 Object.defineProperty(exports, "SettingOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.SettingOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.SettingOutlined; }
 });
 Object.defineProperty(exports, "StarFilled", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.StarFilled; }
+  get: function () { return chunk2AUXUZ3Z_cjs.StarFilled; }
 });
 Object.defineProperty(exports, "StarOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.StarOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.StarOutlined; }
 });
 Object.defineProperty(exports, "SwapOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.SwapOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.SwapOutlined; }
 });
 Object.defineProperty(exports, "SwapRightOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.SwapRightOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.SwapRightOutlined; }
 });
 Object.defineProperty(exports, "SyncOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.SyncOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.SyncOutlined; }
 });
 Object.defineProperty(exports, "ThunderboltOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.ThunderboltOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.ThunderboltOutlined; }
 });
 Object.defineProperty(exports, "TranslationOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.TranslationOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.TranslationOutlined; }
 });
 Object.defineProperty(exports, "UnorderedListOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.UnorderedListOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.UnorderedListOutlined; }
 });
 Object.defineProperty(exports, "UserOutlined", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.UserOutlined; }
+  get: function () { return chunk2AUXUZ3Z_cjs.UserOutlined; }
 });
 Object.defineProperty(exports, "isIconName", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.isIconName; }
+  get: function () { return chunk2AUXUZ3Z_cjs.isIconName; }
 });
 Object.defineProperty(exports, "renderIconSlot", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.renderIconSlot; }
+  get: function () { return chunk2AUXUZ3Z_cjs.renderIconSlot; }
 });
 Object.defineProperty(exports, "resolveIconName", {
   enumerable: true,
-  get: function () { return chunkQMX67CVT_cjs.resolveIconName; }
+  get: function () { return chunk2AUXUZ3Z_cjs.resolveIconName; }
 });

package/dist/Icon.d.cts

@@ -1,22 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import { f as ComponentThemeProps } from './componentThemeTypes-Jt4B5aU8.cjs';
 
 /**
  * Name of a built-in icon. To add your own, pass `children` (raw SVG paths) instead.
  */
 type IconName = "search" | "plus" | "minus" | "check" | "x" | "chevDown" | "chevRight" | "chevLeft" | "chevUp" | "arrowRight" | "settings" | "user" | "bell" | "mail" | "heart" | "star" | "home" | "folder" | "file" | "image" | "play" | "pause" | "volume" | "trash" | "edit" | "copy" | "download" | "upload" | "info" | "alert" | "check2" | "eye" | "eyeOff" | "sparkle" | "moon" | "sun" | "palette" | "layers" | "grid" | "list" | "zap" | "filter" | "mic" | "send" | "calendar" | "clock" | "menu" | "more" | "sliders" | "aim" | "swap" | "camera" | "qq" | "code" | "appstore" | "barChart" | "block" | "border" | "caretDown" | "caretUp" | "checkCircle" | "checkCircleFilled" | "clockCircleFilled" | "closeCircle" | "dashboard" | "environment" | "exclamationCircle" | "folderOpen" | "loading" | "minusCircle" | "picture" | "reload" | "robot" | "swapRight" | "sync" | "translate" | "unorderedList" | "starFilled";
-interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "stroke"> {
+interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "stroke">, ComponentThemeProps {
     name: IconName;
     size?: number | string;
     stroke?: number;
+    /** 为语义图标提供可访问标题；未提供任何名称时图标默认视为装饰。 */
+    title?: string;
 }
 type IconSlot = IconName | React.ReactNode;
-/**
- * `Icon` — stroked line icon set, sized in pixels, inherits `currentColor`.
- *
- * @example
- * <Icon name="plus" size={18} />
- */
 declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
 declare const isIconName: (value: IconSlot) => value is IconName;
 interface RenderIconSlotOptions {
@@ -71,9 +68,12 @@ declare const NAMED_ICON_MAP: {
 };
 type NamedIconComponentName = keyof typeof NAMED_ICON_MAP;
 declare const resolveIconName: (name: string, fallback?: IconName) => IconName;
-interface NamedIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+interface NamedIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, ComponentThemeProps {
+    /** 是否播放旋转动画。LoadingOutlined 默认启用。 */
     spin?: boolean;
+    /** 静态顺时针旋转角度，单位为度。 */
     rotate?: number;
+    /** 图标尺寸，支持数字像素值或 CSS 长度。 */
     size?: number | string;
 }
 declare const AimOutlined: React.ForwardRefExoticComponent<NamedIconProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/Icon.d.ts

@@ -1,22 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import { f as ComponentThemeProps } from './componentThemeTypes-Jt4B5aU8.js';
 
 /**
  * Name of a built-in icon. To add your own, pass `children` (raw SVG paths) instead.
  */
 type IconName = "search" | "plus" | "minus" | "check" | "x" | "chevDown" | "chevRight" | "chevLeft" | "chevUp" | "arrowRight" | "settings" | "user" | "bell" | "mail" | "heart" | "star" | "home" | "folder" | "file" | "image" | "play" | "pause" | "volume" | "trash" | "edit" | "copy" | "download" | "upload" | "info" | "alert" | "check2" | "eye" | "eyeOff" | "sparkle" | "moon" | "sun" | "palette" | "layers" | "grid" | "list" | "zap" | "filter" | "mic" | "send" | "calendar" | "clock" | "menu" | "more" | "sliders" | "aim" | "swap" | "camera" | "qq" | "code" | "appstore" | "barChart" | "block" | "border" | "caretDown" | "caretUp" | "checkCircle" | "checkCircleFilled" | "clockCircleFilled" | "closeCircle" | "dashboard" | "environment" | "exclamationCircle" | "folderOpen" | "loading" | "minusCircle" | "picture" | "reload" | "robot" | "swapRight" | "sync" | "translate" | "unorderedList" | "starFilled";
-interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "stroke"> {
+interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "stroke">, ComponentThemeProps {
     name: IconName;
     size?: number | string;
     stroke?: number;
+    /** 为语义图标提供可访问标题；未提供任何名称时图标默认视为装饰。 */
+    title?: string;
 }
 type IconSlot = IconName | React.ReactNode;
-/**
- * `Icon` — stroked line icon set, sized in pixels, inherits `currentColor`.
- *
- * @example
- * <Icon name="plus" size={18} />
- */
 declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
 declare const isIconName: (value: IconSlot) => value is IconName;
 interface RenderIconSlotOptions {
@@ -71,9 +68,12 @@ declare const NAMED_ICON_MAP: {
 };
 type NamedIconComponentName = keyof typeof NAMED_ICON_MAP;
 declare const resolveIconName: (name: string, fallback?: IconName) => IconName;
-interface NamedIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+interface NamedIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, ComponentThemeProps {
+    /** 是否播放旋转动画。LoadingOutlined 默认启用。 */
     spin?: boolean;
+    /** 静态顺时针旋转角度，单位为度。 */
     rotate?: number;
+    /** 图标尺寸，支持数字像素值或 CSS 长度。 */
     size?: number | string;
 }
 declare const AimOutlined: React.ForwardRefExoticComponent<NamedIconProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/Icon.js

@@ -1 +1,3 @@
-export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, isIconName, renderIconSlot, resolveIconName } from './chunk-FDZG27IG.js';
+export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, isIconName, renderIconSlot, resolveIconName } from './chunk-LQMOYVQF.js';
+import './chunk-DRDDQCDD.js';
+import './chunk-ULTDRMGN.js';

package/dist/{Image-TDCXJISG.css → Image-CZJPPURT.css}

@@ -3,9 +3,9 @@
   display: inline-block;
   position: relative;
   border-radius: var(--r-md);
-  background: var(--bg);
+  background: var(--lmn-image-bg, var(--bg));
   padding: 6px;
-  box-shadow: var(--neu-shadow-control);
+  box-shadow: var(--lmn-image-neu-shadow-control, var(--neu-shadow-control));
   overflow: hidden;
   line-height: 0;
 }
@@ -25,8 +25,8 @@
   position: relative;
   overflow: hidden;
   border-radius: calc(var(--r-md) - 4px);
-  box-shadow: var(--neu-shadow-inset);
-  background: var(--bg-sunken);
+  box-shadow: var(--lmn-image-neu-shadow-inset, var(--neu-shadow-inset));
+  background: var(--lmn-image-bg-sunken, var(--bg-sunken));
 }
 .n-image.raw .n-image-frame {
   border-radius: 0;
@@ -49,11 +49,11 @@
 .n-image-placeholder {
   position: absolute; inset: 0;
   display: grid; place-items: center;
-  color: var(--fg-subtle);
+  color: var(--lmn-image-fg-subtle, var(--fg-subtle));
   background:
     repeating-linear-gradient(45deg,
       transparent 0 10px,
-      color-mix(in oklch, var(--fg-subtle) 8%, transparent) 10px 11px);
+      color-mix(in oklch, var(--lmn-image-fg-subtle, var(--fg-subtle)) 8%, transparent) 10px 11px);
   transition: opacity var(--dur) var(--ease);
 }
 .n-image-placeholder.loaded { opacity: 0; pointer-events: none; }
@@ -73,7 +73,8 @@
   transform: translateY(-4px);
   transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
 }
-.n-image:hover .image-actions { opacity: 1; transform: translateY(0); }
+.n-image:hover .image-actions,
+.n-image:focus-within .image-actions { opacity: 1; transform: translateY(0); }
 .image-actions .ia-btn {
   width: 26px;
   height: 26px;
@@ -111,20 +112,100 @@
   transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
   pointer-events: none;
 }
-.n-image:hover .image-hint { opacity: 1; transform: translateY(0); }
+.n-image:hover .image-hint,
+.n-image:focus-visible .image-hint { opacity: 1; transform: translateY(0); }
 .image-preview-overlay {
   position: fixed; inset: 0;
   background: var(--image-preview-mask-bg, var(--mask-bg));
   backdrop-filter: blur(16px);
   display: grid; place-items: center;
+  overflow: hidden;
+  padding: min(8vh, 72px) var(--gap-8) var(--gap-8);
   z-index: 500;
   animation: fadeIn var(--dur) var(--ease);
 }
-.image-preview-overlay img {
+.image-preview-overlay:focus {
+  outline: none;
+}
+.image-preview-toolbar {
+  --image-preview-toolbar-ink: color-mix(in oklch, var(--lmn-image-accent, var(--accent)) 42%, var(--lmn-image-fg-muted, var(--fg-muted)));
+  --image-preview-toolbar-ink-hover: color-mix(in oklch, var(--lmn-image-accent, var(--accent)) 48%, var(--lmn-image-fg, var(--fg)));
+  position: absolute;
+  top: var(--gap-5);
+  left: 50%;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-2);
+  max-width: min(calc(100vw - 32px), 720px);
+  padding: 6px;
+  overflow-x: auto;
+  color: var(--image-preview-toolbar-ink);
+  border: 1px solid color-mix(in oklch, var(--lmn-image-accent, var(--accent)) 14%, var(--lmn-image-border, var(--border)));
+  border-radius: var(--r-pill);
+  background: color-mix(in oklch, var(--lmn-image-bg-raised, var(--bg-raised)) 92%, var(--lmn-image-accent-soft, var(--accent-soft)));
+  box-shadow:
+    var(--lmn-image-neu-float, var(--neu-float)),
+    0 0 0 1px color-mix(in oklch, var(--lmn-image-accent-glow, var(--accent-glow)) 22%, transparent);
+  backdrop-filter: blur(18px) saturate(1.2);
+  transform: translateX(-50%);
+}
+.image-preview-toolbar .btn {
+  flex: 0 0 auto;
+}
+.image-preview-toolbar .btn.ghost {
+  color: var(--image-preview-toolbar-ink);
+}
+.image-preview-toolbar .btn.ghost:hover {
+  color: var(--image-preview-toolbar-ink-hover);
+  background: color-mix(in oklch, var(--lmn-image-accent-soft, var(--accent-soft)) 36%, var(--lmn-image-bg, var(--bg)));
+  box-shadow: var(--lmn-image-neu-shadow-subtle, var(--neu-shadow-subtle));
+}
+.image-preview-toolbar .btn.ghost:active,
+.image-preview-toolbar .btn.ghost.pressed {
+  color: var(--image-preview-toolbar-ink-hover);
+  background: color-mix(in oklch, var(--lmn-image-accent-soft, var(--accent-soft)) 48%, var(--lmn-image-bg, var(--bg)));
+  box-shadow: var(--lmn-image-neu-shadow-inset-strong, var(--neu-shadow-inset-strong));
+}
+.image-preview-scale {
+  min-width: 48px;
+  color: var(--image-preview-toolbar-ink);
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+  font-weight: 500;
+  line-height: 1;
+  text-align: center;
+}
+.image-preview-ratio {
+  min-width: 46px;
+  padding-inline: 10px;
+  font-family: var(--font-mono);
+}
+.image-preview-toolbar-slot {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--gap-2);
+}
+.image-preview-img {
   max-width: 80vw;
   max-height: 80vh;
   border-radius: var(--r-lg);
-  box-shadow: var(--neu-shadow-float);
+  box-shadow: var(--lmn-image-neu-shadow-float, var(--neu-shadow-float));
+  transform-origin: center;
+  transition: transform var(--dur-fast) var(--ease);
+  user-select: none;
+  will-change: transform;
+}
+
+@media (max-width: 640px) {
+  .image-preview-overlay {
+    padding: 76px var(--gap-4) var(--gap-4);
+  }
+  .image-preview-toolbar {
+    top: var(--gap-4);
+    border-radius: var(--r-lg);
+  }
 }
 
 /* ============ SpriteImage / LayeredImage ============ */
@@ -133,9 +214,9 @@
   display: inline-block;
   position: relative;
   border-radius: var(--r-sm);
-  background: var(--bg);
+  background: var(--lmn-image-bg, var(--bg));
   padding: 6px;
-  box-shadow: var(--neu-shadow-control);
+  box-shadow: var(--lmn-image-neu-shadow-control, var(--neu-shadow-control));
   overflow: hidden;
   line-height: 0;
 }
@@ -156,8 +237,8 @@
   width: 100%;
   overflow: hidden;
   border-radius: var(--r-sm);
-  background: var(--bg-sunken);
-  box-shadow: var(--neu-shadow-inset);
+  background: var(--lmn-image-bg-sunken, var(--bg-sunken));
+  box-shadow: var(--lmn-image-neu-shadow-inset, var(--neu-shadow-inset));
 }
 .n-sprite-image.raw .n-sprite-image-frame,
 .n-layered-image.raw .n-layered-image-frame {

package/dist/Image.cjs

@@ -1,23 +1,27 @@
 'use strict';
 
-var chunkRMFSX7DO_cjs = require('./chunk-RMFSX7DO.cjs');
-require('./chunk-QMX67CVT.cjs');
+var chunkF7WUCOBP_cjs = require('./chunk-F7WUCOBP.cjs');
+require('./chunk-HSDMJUB6.cjs');
+require('./chunk-T4RR6NVU.cjs');
+require('./chunk-2AUXUZ3Z.cjs');
+require('./chunk-NRJXZPZR.cjs');
+require('./chunk-EE5KXDRK.cjs');
 
 
 
 Object.defineProperty(exports, "Image", {
   enumerable: true,
-  get: function () { return chunkRMFSX7DO_cjs.Image; }
+  get: function () { return chunkF7WUCOBP_cjs.Image; }
 });
 Object.defineProperty(exports, "ImageGrid", {
   enumerable: true,
-  get: function () { return chunkRMFSX7DO_cjs.ImageGrid; }
+  get: function () { return chunkF7WUCOBP_cjs.ImageGrid; }
 });
 Object.defineProperty(exports, "LayeredImage", {
   enumerable: true,
-  get: function () { return chunkRMFSX7DO_cjs.LayeredImage; }
+  get: function () { return chunkF7WUCOBP_cjs.LayeredImage; }
 });
 Object.defineProperty(exports, "SpriteImage", {
   enumerable: true,
-  get: function () { return chunkRMFSX7DO_cjs.SpriteImage; }
+  get: function () { return chunkF7WUCOBP_cjs.SpriteImage; }
 });

package/dist/Image.d.cts

@@ -1,7 +1,19 @@
 import * as React from 'react';
+import { f as ComponentThemeProps } from './componentThemeTypes-Jt4B5aU8.cjs';
 
 type ImageVariant = "framed" | "raw" | "icon";
-interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {
+type ImagePreviewMode = "fit" | "actual";
+interface ImagePreviewToolbarRenderProps {
+    scale: number;
+    mode: ImagePreviewMode;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    fitToWindow: () => void;
+    actualSize: () => void;
+    reset: () => void;
+    close: () => void;
+}
+interface ImageProps extends React.HTMLAttributes<HTMLDivElement>, ComponentThemeProps {
     src?: string;
     alt?: string;
     width?: number | string;
@@ -22,6 +34,12 @@ interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {
     previewClassName?: string;
     /** Inline style forwarded to the full-screen preview overlay. */
     previewStyle?: React.CSSProperties;
+    /** Max width of the image inside the preview overlay. Defaults to 80vw. */
+    previewMaxWidth?: number | string;
+    /** Max height of the image inside the preview overlay. Defaults to 80vh. */
+    previewMaxHeight?: number | string;
+    /** Render extra controls in the preview toolbar. */
+    renderPreviewToolbar?: (props: ImagePreviewToolbarRenderProps) => React.ReactNode;
     /** Hover scale-up. */
     hover?: boolean;
     /** Custom placeholder while loading or on error. */
@@ -30,19 +48,12 @@ interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {
     imgProps?: Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "width" | "height">;
     className?: string;
 }
-/**
- * `Image` — image surface with framed, raw and icon-oriented variants.
- *
- * @example
- * <Image src={url} width={240} height={160} />
- * <Image variant="icon" src={iconUrl} width={48} height={48} preview={false} />
- */
 declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLDivElement>>;
 interface ImageGridItem extends Omit<ImageProps, "children"> {
     src: string;
     alt?: string;
 }
-interface ImageGridProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ImageGridProps extends React.HTMLAttributes<HTMLDivElement>, ComponentThemeProps {
     images: ImageGridItem[];
     columns?: number;
     itemHeight?: number;
@@ -51,7 +62,6 @@ interface ImageGridProps extends React.HTMLAttributes<HTMLDivElement> {
     imageProps?: Omit<ImageProps, "src" | "alt" | "width" | "height">;
     className?: string;
 }
-/** `ImageGrid` — auto-fit grid of `Image` items. */
 declare const ImageGrid: React.ForwardRefExoticComponent<ImageGridProps & React.RefAttributes<HTMLDivElement>>;
 interface SpriteRect {
     x: number;
@@ -59,7 +69,7 @@ interface SpriteRect {
     width: number;
     height: number;
 }
-interface SpriteImageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+interface SpriteImageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, ComponentThemeProps {
     src: string;
     sprite: SpriteRect;
     alt?: string;
@@ -72,12 +82,6 @@ interface SpriteImageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "c
     padding?: number | string;
     className?: string;
 }
-/**
- * `SpriteImage` — crops one rectangle from a sprite sheet.
- *
- * @example
- * <SpriteImage src={sheetUrl} sprite={{ x: 64, y: 32, width: 32, height: 32 }} />
- */
 declare const SpriteImage: React.ForwardRefExoticComponent<SpriteImageProps & React.RefAttributes<HTMLDivElement>>;
 type LayeredImageInset = number | string | Partial<Record<"top" | "right" | "bottom" | "left", number | string>>;
 interface LayeredImageLayer extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "width" | "height"> {
@@ -87,7 +91,7 @@ interface LayeredImageLayer extends Omit<React.ImgHTMLAttributes<HTMLImageElemen
     inset?: LayeredImageInset;
     zIndex?: number;
 }
-interface LayeredImageProps extends React.HTMLAttributes<HTMLDivElement> {
+interface LayeredImageProps extends React.HTMLAttributes<HTMLDivElement>, ComponentThemeProps {
     layers: LayeredImageLayer[];
     width?: number | string;
     height?: number | string;
@@ -96,12 +100,6 @@ interface LayeredImageProps extends React.HTMLAttributes<HTMLDivElement> {
     padding?: number | string;
     className?: string;
 }
-/**
- * `LayeredImage` — stacks several images in the same box, useful for avatar + frame assets.
- *
- * @example
- * <LayeredImage layers={[{ src: headUrl }, { src: frameUrl }]} width={48} height={48} />
- */
 declare const LayeredImage: React.ForwardRefExoticComponent<LayeredImageProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Image, ImageGrid, type ImageGridItem, type ImageGridProps, type ImageProps, type ImageVariant, LayeredImage, type LayeredImageInset, type LayeredImageLayer, type LayeredImageProps, SpriteImage, type SpriteImageProps, type SpriteRect };
+export { Image, ImageGrid, type ImageGridItem, type ImageGridProps, type ImagePreviewMode, type ImagePreviewToolbarRenderProps, type ImageProps, type ImageVariant, LayeredImage, type LayeredImageInset, type LayeredImageLayer, type LayeredImageProps, SpriteImage, type SpriteImageProps, type SpriteRect };