@fangxinyan/lumina 0.6.17 → 0.6.18

package/dist/index.cjs

@@ -31,7 +31,7 @@ var chunkP2OQTJZP_cjs = require('./chunk-P2OQTJZP.cjs');
 var chunkULUD3FED_cjs = require('./chunk-ULUD3FED.cjs');
 var chunkES7AWMNH_cjs = require('./chunk-ES7AWMNH.cjs');
 var chunkFDUQPAQE_cjs = require('./chunk-FDUQPAQE.cjs');
-var chunkRMFSX7DO_cjs = require('./chunk-RMFSX7DO.cjs');
+var chunkHSAJUEO7_cjs = require('./chunk-HSAJUEO7.cjs');
 var chunk262ED6WQ_cjs = require('./chunk-262ED6WQ.cjs');
 var chunkBW76ENTW_cjs = require('./chunk-BW76ENTW.cjs');
 var chunkRSSOX4RQ_cjs = require('./chunk-RSSOX4RQ.cjs');
@@ -55,7 +55,7 @@ var chunk4KDABJSY_cjs = require('./chunk-4KDABJSY.cjs');
 var chunkQMX67CVT_cjs = require('./chunk-QMX67CVT.cjs');
 
 // src/index.ts
-var VERSION = "0.6.17";
+var VERSION = "0.6.18";
 
 Object.defineProperty(exports, "Timeline", {
   enumerable: true,
@@ -271,19 +271,19 @@ Object.defineProperty(exports, "useForm", {
 });
 Object.defineProperty(exports, "Image", {
   enumerable: true,
-  get: function () { return chunkRMFSX7DO_cjs.Image; }
+  get: function () { return chunkHSAJUEO7_cjs.Image; }
 });
 Object.defineProperty(exports, "ImageGrid", {
   enumerable: true,
-  get: function () { return chunkRMFSX7DO_cjs.ImageGrid; }
+  get: function () { return chunkHSAJUEO7_cjs.ImageGrid; }
 });
 Object.defineProperty(exports, "LayeredImage", {
   enumerable: true,
-  get: function () { return chunkRMFSX7DO_cjs.LayeredImage; }
+  get: function () { return chunkHSAJUEO7_cjs.LayeredImage; }
 });
 Object.defineProperty(exports, "SpriteImage", {
   enumerable: true,
-  get: function () { return chunkRMFSX7DO_cjs.SpriteImage; }
+  get: function () { return chunkHSAJUEO7_cjs.SpriteImage; }
 });
 Object.defineProperty(exports, "Card", {
   enumerable: true,

package/dist/index.d.cts

@@ -40,7 +40,7 @@ export { ErrorField, Form, FormInstance, FormItem, FormItemProps, FormLayout, Fo
 export { Empty, EmptyProps } from './Empty.cjs';
 export { Spin, SpinProps, SpinSize } from './Spin.cjs';
 export { Skeleton, SkeletonAvatarConfig, SkeletonParagraphConfig, SkeletonProps, SkeletonTitleConfig } from './Skeleton.cjs';
-export { Image, ImageGrid, ImageGridItem, ImageGridProps, ImageProps, ImageVariant, LayeredImage, LayeredImageInset, LayeredImageLayer, LayeredImageProps, SpriteImage, SpriteImageProps, SpriteRect } from './Image.cjs';
+export { Image, ImageGrid, ImageGridItem, ImageGridProps, ImagePreviewMode, ImagePreviewToolbarRenderProps, ImageProps, ImageVariant, LayeredImage, LayeredImageInset, LayeredImageLayer, LayeredImageProps, SpriteImage, SpriteImageProps, SpriteRect } from './Image.cjs';
 export { Cascader, CascaderOption, CascaderProps, CascaderShowSearchConfig } from './Cascader.cjs';
 export { BaseTypographyProps, CopyableConfig, EditableConfig, EllipsisConfig, Link, LinkProps, Paragraph, ParagraphProps, Text, TextProps, Title, TitleLevel, TitleProps, Typography, TypographyProps, TypographyType } from './Typography.cjs';
 export { ColorPicker, ColorPickerProps } from './ColorPicker.cjs';
@@ -52,6 +52,6 @@ import 'react/jsx-runtime';
 import 'react';
 
 /** Package version — bumped by release scripts. */
-declare const VERSION = "0.6.17";
+declare const VERSION = "0.6.18";
 
 export { VERSION };

package/dist/index.d.ts

@@ -40,7 +40,7 @@ export { ErrorField, Form, FormInstance, FormItem, FormItemProps, FormLayout, Fo
 export { Empty, EmptyProps } from './Empty.js';
 export { Spin, SpinProps, SpinSize } from './Spin.js';
 export { Skeleton, SkeletonAvatarConfig, SkeletonParagraphConfig, SkeletonProps, SkeletonTitleConfig } from './Skeleton.js';
-export { Image, ImageGrid, ImageGridItem, ImageGridProps, ImageProps, ImageVariant, LayeredImage, LayeredImageInset, LayeredImageLayer, LayeredImageProps, SpriteImage, SpriteImageProps, SpriteRect } from './Image.js';
+export { Image, ImageGrid, ImageGridItem, ImageGridProps, ImagePreviewMode, ImagePreviewToolbarRenderProps, ImageProps, ImageVariant, LayeredImage, LayeredImageInset, LayeredImageLayer, LayeredImageProps, SpriteImage, SpriteImageProps, SpriteRect } from './Image.js';
 export { Cascader, CascaderOption, CascaderProps, CascaderShowSearchConfig } from './Cascader.js';
 export { BaseTypographyProps, CopyableConfig, EditableConfig, EllipsisConfig, Link, LinkProps, Paragraph, ParagraphProps, Text, TextProps, Title, TitleLevel, TitleProps, Typography, TypographyProps, TypographyType } from './Typography.js';
 export { ColorPicker, ColorPickerProps } from './ColorPicker.js';
@@ -52,6 +52,6 @@ import 'react/jsx-runtime';
 import 'react';
 
 /** Package version — bumped by release scripts. */
-declare const VERSION = "0.6.17";
+declare const VERSION = "0.6.18";
 
 export { VERSION };

package/dist/index.js

@@ -29,7 +29,7 @@ export { Divider } from './chunk-HBO7ZDEQ.js';
 export { Drawer } from './chunk-WMGMIE2D.js';
 export { Empty } from './chunk-6MEOLYNQ.js';
 export { Form, FormItem, useForm } from './chunk-ZR4IMROK.js';
-export { Image, ImageGrid, LayeredImage, SpriteImage } from './chunk-EQ4FPOQQ.js';
+export { Image, ImageGrid, LayeredImage, SpriteImage } from './chunk-5VOUUQF5.js';
 export { Card } from './chunk-ARUPS7JH.js';
 export { Spin } from './chunk-FYSXJXNW.js';
 export { Cascader } from './chunk-4HJBF4GY.js';
@@ -53,6 +53,6 @@ export { Calendar } from './chunk-I7TOBKJO.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-FDZG27IG.js';
 
 // src/index.ts
-var VERSION = "0.6.17";
+var VERSION = "0.6.18";
 
 export { VERSION };

package/dist/styles.css

@@ -3191,14 +3191,92 @@ input, textarea, select { font-family: inherit; color: inherit; }
   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(--accent) 42%, var(--fg-muted));
+  --image-preview-toolbar-ink-hover: color-mix(in oklch, var(--accent) 48%, 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(--accent) 14%, var(--border));
+  border-radius: var(--r-pill);
+  background: color-mix(in oklch, var(--bg-raised) 92%, var(--accent-soft));
+  box-shadow:
+    var(--neu-float),
+    0 0 0 1px color-mix(in oklch, 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(--accent-soft) 36%, var(--bg));
+  box-shadow: 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(--accent-soft) 48%, var(--bg));
+  box-shadow: 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);
+  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 ============ */
 .n-sprite-image,

package/docs/llms/image.md

@@ -28,6 +28,25 @@ import { Image, ImageGrid, SpriteImage, LayeredImage } from "@fangxinyan/lumina"
 />
 ```
 
+### 精细预览
+
+预览层内置放大、缩小、适配窗口、1:1、滚轮缩放和拖拽平移；previewMaxWidth / previewMaxHeight 控制适配态尺寸,renderPreviewToolbar 可追加业务按钮。
+
+```tsx
+<Image
+  src={url}
+  width={260}
+  height={180}
+  previewMaxWidth="90vw"
+  previewMaxHeight="76vh"
+  renderPreviewToolbar={({ fitToWindow, scale }) => (
+    <Button size="sm" variant="ghost" icon="star" onClick={fitToWindow}>
+      标记 {Math.round(scale * 100)}%
+    </Button>
+  )}
+/>
+```
+
 ### 图标 / 原始资源
 
 variant="icon" 会默认去掉外层 padding,适合 1:1 装备、物品、头像缩略图；variant="raw" 保留原始图片比例。
@@ -82,6 +101,8 @@ LayeredImage 将多张图片叠在同一个盒子里,适合头像 + 头像框、
 | preview | `boolean` | `true` | 支持点击全屏预览 |
 | previewClassName | `string` | — | 预览蒙层 className |
 | previewStyle | `CSSProperties` | — | 预览蒙层内联样式 |
+| previewMaxWidth / previewMaxHeight | `number | string` | `"80vw" / "80vh"` | 预览适配态的最大尺寸 |
+| renderPreviewToolbar | `(controls) => ReactNode` | — | 在预览工具栏追加自定义按钮 |
 | hover | `boolean` | `true` | 悬浮放大 |
 | placeholder | `ReactNode` | — | 占位/错误时内容 |
 | imgProps | `ImgHTMLAttributes` | — | 透传到底层 img 的属性 |

package/docs/llms.md

@@ -3,7 +3,7 @@
 > 拟态风格的 React 18 组件库,目标是 Electron 桌面应用。**写给 AI 编程助手**的按需文档 —— 每个组件单独一个 `.md`,避免一次性读取全部。示例源自 playground 的 demo,可直接复制运行。
 
 - **包名**: `@fangxinyan/lumina`
-- **版本**: `0.6.17`
+- **版本**: `0.6.18`
 - **React 最低版本**: 18
 - **环境**: 带打包器的 React 工程(Vite / Next.js / Webpack / Remix / Electron + Vite 等)
 - **零运行时依赖**: 只依赖 `react` / `react-dom` (peer deps)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fangxinyan/lumina",
-  "version": "0.6.17",
+  "version": "0.6.18",
   "description": "Lumina — Neumorphic component library for Electron & React apps",
   "type": "module",
   "main": "./dist/index.cjs",

package/dist/chunk-EQ4FPOQQ.js

@@ -1,253 +0,0 @@
-import { Icon } from './chunk-FDZG27IG.js';
-import './tokens-RYJ3DFTU.css';
-import './shared-NJHRNLRH.css';
-import './Image-TDCXJISG.css';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-var Image = React.forwardRef(({
-  src,
-  alt,
-  width = 200,
-  height,
-  variant = "framed",
-  frame,
-  padding,
-  objectFit,
-  objectPosition,
-  preview,
-  previewClassName = "",
-  previewStyle,
-  hover = true,
-  placeholder,
-  imgProps,
-  className = "",
-  style,
-  ...rest
-}, ref) => {
-  const [loaded, setLoaded] = React.useState(false);
-  const [err, setErr] = React.useState(false);
-  const [open, setOpen] = React.useState(false);
-  const visualFrame = frame ?? variant === "framed";
-  const resolvedHeight = height ?? (variant === "icon" ? width : 140);
-  const resolvedPadding = padding ?? (visualFrame ? void 0 : 0);
-  const resolvedObjectFit = objectFit ?? (variant === "icon" ? "contain" : "cover");
-  const canPreview = (preview ?? variant === "framed") && loaded && !err;
-  const {
-    className: imgClassName = "",
-    style: imgStyle,
-    onLoad,
-    onError,
-    ...imageRest
-  } = imgProps ?? {};
-  React.useEffect(() => {
-    setLoaded(false);
-    setErr(false);
-    setOpen(false);
-  }, [src]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: `n-image ${variant} ${visualFrame ? "framed" : "unframed"} ${hover ? "hover" : ""} ${canPreview ? "clickable" : ""} ${className}`,
-        style: { width, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
-        onClick: () => canPreview && setOpen(true),
-        ...rest,
-        children: /* @__PURE__ */ jsxs("div", { className: "n-image-frame", style: { width: "100%", height: resolvedHeight }, children: [
-          !err && src && /* @__PURE__ */ jsx(
-            "img",
-            {
-              ...imageRest,
-              src,
-              alt,
-              className: imgClassName,
-              style: { objectFit: resolvedObjectFit, objectPosition, ...imgStyle },
-              onLoad: (event) => {
-                setLoaded(true);
-                onLoad?.(event);
-              },
-              onError: (event) => {
-                setErr(true);
-                onError?.(event);
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: `n-image-placeholder ${loaded && !err ? "loaded" : ""}`, children: placeholder ?? /* @__PURE__ */ jsx(Icon, { name: "image", size: 28 }) }),
-          canPreview && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("div", { className: "image-hint", children: [
-              /* @__PURE__ */ jsx(Icon, { name: "eye", size: 14 }),
-              /* @__PURE__ */ jsx("span", { children: "\u70B9\u51FB\u67E5\u770B" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "image-actions", onClick: (e) => e.stopPropagation(), children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "ia-btn",
-                  onClick: () => setOpen(true),
-                  "aria-label": "\u9884\u89C8",
-                  children: /* @__PURE__ */ jsx(Icon, { name: "eye", size: 13 })
-                }
-              ),
-              src && /* @__PURE__ */ jsx("a", { className: "ia-btn", href: src, download: true, "aria-label": "\u4E0B\u8F7D", children: /* @__PURE__ */ jsx(Icon, { name: "download", size: 13 }) })
-            ] })
-          ] })
-        ] })
-      }
-    ),
-    open && typeof document !== "undefined" && ReactDOM.createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: ["image-preview-overlay", previewClassName].filter(Boolean).join(" "),
-          style: previewStyle,
-          onClick: () => setOpen(false),
-          children: /* @__PURE__ */ jsx("img", { src, alt, onClick: (e) => e.stopPropagation() })
-        }
-      ),
-      document.body
-    )
-  ] });
-});
-Image.displayName = "Image";
-var ImageGrid = React.forwardRef(({
-  images,
-  columns,
-  itemHeight = 130,
-  minItemWidth = 160,
-  gap = 14,
-  imageProps,
-  className = "",
-  style,
-  ...rest
-}, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className,
-    style: {
-      display: "grid",
-      gap,
-      gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : `repeat(auto-fill, minmax(${typeof minItemWidth === "number" ? `${minItemWidth}px` : minItemWidth}, 1fr))`,
-      ...style
-    },
-    ...rest,
-    children: images.map((img, i) => /* @__PURE__ */ jsx(
-      Image,
-      {
-        ...imageProps,
-        ...img,
-        src: img.src,
-        alt: img.alt,
-        width: img.width ?? "100%",
-        height: img.height ?? itemHeight
-      },
-      i
-    ))
-  }
-));
-ImageGrid.displayName = "ImageGrid";
-var SpriteImage = React.forwardRef(({
-  src,
-  sprite,
-  alt,
-  width,
-  height,
-  scale = 1,
-  backgroundSize,
-  variant = "icon",
-  frame,
-  padding,
-  className = "",
-  style,
-  ...rest
-}, ref) => {
-  const visualFrame = frame ?? variant === "framed";
-  const resolvedWidth = width ?? sprite.width * scale;
-  const resolvedHeight = height ?? sprite.height * scale;
-  const resolvedPadding = padding ?? (visualFrame ? void 0 : 0);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: `n-sprite-image ${variant} ${visualFrame ? "framed" : "unframed"} ${className}`,
-      role: alt ? "img" : void 0,
-      "aria-label": alt || void 0,
-      "aria-hidden": alt === "" ? true : void 0,
-      style: { width: resolvedWidth, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
-      ...rest,
-      children: /* @__PURE__ */ jsx("div", { className: "n-sprite-image-frame", style: { height: resolvedHeight }, children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "n-sprite-image-sprite",
-          style: {
-            width: sprite.width,
-            height: sprite.height,
-            backgroundImage: `url(${JSON.stringify(src)})`,
-            backgroundPosition: `${-sprite.x}px ${-sprite.y}px`,
-            backgroundSize,
-            transform: scale !== 1 ? `scale(${scale})` : void 0
-          }
-        }
-      ) })
-    }
-  );
-});
-SpriteImage.displayName = "SpriteImage";
-var insetStyle = (inset) => {
-  if (inset == null) return { inset: 0 };
-  if (typeof inset === "number" || typeof inset === "string") return { inset };
-  return inset;
-};
-var LayeredImage = React.forwardRef(({
-  layers,
-  width = 64,
-  height = 64,
-  variant = "icon",
-  frame,
-  padding,
-  className = "",
-  style,
-  ...rest
-}, ref) => {
-  const visualFrame = frame ?? variant === "framed";
-  const resolvedPadding = padding ?? (visualFrame ? void 0 : 0);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: `n-layered-image ${variant} ${visualFrame ? "framed" : "unframed"} ${className}`,
-      style: { width, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
-      ...rest,
-      children: /* @__PURE__ */ jsx("div", { className: "n-layered-image-frame", style: { height }, children: layers.map(({ src: layerSrc, alt: layerAlt = "", fit = "contain", inset, zIndex, className: layerClassName = "", style: layerStyle, ...layerRest }, index) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "n-layered-image-layer",
-          style: {
-            zIndex,
-            ...insetStyle(inset)
-          },
-          children: /* @__PURE__ */ jsx(
-            "img",
-            {
-              ...layerRest,
-              src: layerSrc,
-              alt: layerAlt,
-              className: layerClassName,
-              style: {
-                objectFit: fit,
-                ...layerStyle
-              }
-            }
-          )
-        },
-        `${layerSrc}-${index}`
-      )) })
-    }
-  );
-});
-LayeredImage.displayName = "LayeredImage";
-
-export { Image, ImageGrid, LayeredImage, SpriteImage };