@fangxinyan/lumina 0.6.2 → 0.6.4

package/docs/llms/theme.md

@@ -1,6 +1,6 @@
 # Theme 主题
 
-> ThemeProvider + useTheme,覆盖深浅色、强调色、密度、圆角、字体、阴影强度。
+> ThemeProvider + useTheme,覆盖深浅色、自定义模式、强调色、密度、圆角、字体、阴影强度。
 
 ## 导入
 
@@ -22,6 +22,7 @@ function Root() {
     <ThemeProvider
       mode="system"        // "light" | "dark" | "system"
       accent="violet"      // 预设 或 自定义颜色
+      themes={{ graphite: { base: "dark", tokens: {} } }}
       density="comfortable"
       intensity={5}        // 1..10 阴影强度
       radius={20}          // 圆角基准 px
@@ -47,6 +48,21 @@ t.update({ radius: 14 });    // 一次改多个
 t.reset();                   // 重置到 props 初值
 ```
 
+### 阴影系统
+
+阴影强度、扩散和浮层深度都由 ThemeProvider tokens 驱动,组件只消费语义阴影 token。
+
+```tsx
+const t = useTheme();
+
+t.setIntensity(6);
+t.setTokens({
+  ...t.tokens,
+  "shadow-scale": "1.15",
+  "shadow-float-scale": "1.25",
+});
+```
+
 ### 预设强调色
 
 内置 6 种拟态强调色,点击切换。
@@ -78,6 +94,42 @@ t.reset();                   // 重置到 props 初值
 }} />
 ```
 
+### 自定义主题模式
+
+mode 可以指向 themes 中的命名 preset。base 决定 light/dark 基底,tokens 决定完整视觉。
+
+```tsx
+const themes = {
+  graphite: {
+    label: "Graphite",
+    description: "深色",
+    base: "dark",
+    accent: {
+      accent: "oklch(72% 0.13 190)",
+      ink: "oklch(85% 0.1 190)",
+      soft: "oklch(31% 0.05 190)",
+      glow: "oklch(72% 0.13 190 / 0.18)",
+    },
+    intensity: 4,
+    radius: 18,
+    tokens: {
+      bg: "#181b22",
+      "bg-raised": "#20242d",
+      "bg-sunken": "#11141a",
+      fg: "#edf1f7",
+      "shadow-dark": "rgba(0,0,0,.58)",
+      "shadow-light": "rgba(128,146,166,.07)",
+      "shadow-scale": "1",
+      "shadow-float-scale": "1",
+    },
+  },
+};
+
+<ThemeProvider mode="graphite" themes={themes}>
+  <App />
+</ThemeProvider>
+```
+
 ### 作用域嵌套
 
 target="scope" 只作用于子树,可以层层嵌套。
@@ -106,6 +158,8 @@ tokens prop 可以改 tokens.css 里任何变量 —— 键名可省略 --。
     bg: "#f5f5f7",           // 等价 --bg
     "--bg-sunken": "#e8e8ed",
     "shadow-dark": "rgba(0,0,0,0.18)",
+    "shadow-scale": "0.9",
+    "shadow-float-scale": "1.15",
     "--font-display": '"Inter", sans-serif',
   }}
 />
@@ -131,16 +185,19 @@ applyTheme(document.documentElement, {
 
 | Prop | 类型 | 默认 | 说明 |
 | --- | --- | --- | --- |
-| mode | `"light" | "dark" | "system"` | `"light"` | 深浅色模式 |
+| mode | `ThemeMode` | `"light"` | 深浅色模式或自定义模式名 |
+| colorScheme | `"light" | "dark"` | `"light"` | 自定义模式使用的 light/dark 基底 |
 | accent | `AccentKey | CustomAccentInput` | `"sky"` | 强调色,预设或自定义 |
 | density | `"compact" | "comfortable" | "spacious"` | `"comfortable"` | 密度 |
 | intensity | `number` | `5` | 阴影强度 1-10 |
 | radius | `number` | `20` | 圆角基准 px |
 | font | `FontConfig` | `"sf"` | 字体预设或 CSS 栈 |
-| tokens | `Record<string, string>` | — | 任意 CSS 变量覆写 |
+| tokens | `Record<string, string>` | — | 任意 CSS 变量覆写;推荐用语义阴影 token 和 shadow-scale / shadow-float-scale 控制阴影系统 |
+| themes | `Record<string, ThemePreset>` | — | 命名自定义模式 preset |
+| ThemePreset.label / description | `string` | — | 可选展示元信息;ThemePanel 会读取它作为卡片标题和说明 |
 | target | `"root" | "scope"` | `"root"` | 应用到根还是局部 |
 | as | `keyof JSX.IntrinsicElements` | `"div"` | scope 模式的元素标签 |
-| storageKey | `string` | — | localStorage 持久化 key |
+| storageKey | `string` | — | localStorage 持久化 key,包含当前主题状态与自定义 themes |
 | onChange | `(value: ThemeValue) => void` | — | 主题值变更回调 |
 
 
@@ -149,14 +206,16 @@ applyTheme(document.documentElement, {
 | Prop | 类型 | 默认 | 说明 |
 | --- | --- | --- | --- |
 | mode | `ThemeMode` | — | 请求的模式(保留 system) |
-| resolvedMode | `"light" | "dark"` | — | 解析后的具体模式 |
+| resolvedMode | `ResolvedThemeMode` | — | 解析后的具体模式;自定义模式保留名称 |
+| colorScheme | `"light" | "dark"` | — | 当前 light/dark 基底 |
 | accent | `AccentKey | "custom"` | — | 预设 key 或 "custom" |
 | accentPalette | `AccentPalette` | — | 当前完整调色板 |
 | density / intensity / radius / font / tokens | `-` | — | 当前各维度状态 |
+| themes / activeTheme | `-` | — | 自定义模式注册表与当前命中的 preset |
 | setMode(m) | `(m: ThemeMode) => void` | — | 切换模式 |
 | toggleMode() | `() => void` | — | light ⇄ dark 切换 |
 | setAccent(a) | `(a: AccentKey | CustomAccentInput) => void` | — | 切换强调色 |
-| setDensity / setIntensity / setRadius / setFont / setTokens | `-` | — | 对应字段的 setter |
+| setDensity / setIntensity / setRadius / setFont / setTokens / setThemes | `-` | — | 对应字段的 setter |
 | update(cfg) | `(cfg: Partial<ThemeConfig>) => void` | — | 浅合并多字段 |
 | reset() | `() => void` | — | 重置到初始 props |
 

package/docs/llms/themepanel.md

@@ -0,0 +1,128 @@
+# ThemePanel 主题面板
+
+> 可复用的主题快速调节面板,直接驱动最近的 ThemeProvider。
+
+## 导入
+
+```tsx
+import { ThemeProvider, ThemePanel, THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS } from "@fangxinyan/lumina";
+```
+
+## 示例
+
+### 完整面板
+
+默认包含浅色、深色、瓷白、助手、助手暗五个主题卡片,并提供简洁/深度两档新建主题入口;其余控制项直接驱动 useTheme。
+
+```tsx
+<ThemeProvider>
+  <ThemePanel />
+</ThemeProvider>
+```
+
+### 外部保存与回灌
+
+onCreateTheme / onDeleteTheme 会把新建和删除事件交给业务侧;业务侧保存后通过 ThemeProvider themes 回灌。
+
+```tsx
+import { ThemeProvider, ThemePanel, type ThemePresets } from "lumina";
+
+const [themes, setThemes] = React.useState<ThemePresets>({});
+
+<ThemeProvider themes={themes} storageKey="app:theme">
+  <ThemePanel
+    onCreateTheme={(payload) => {
+      setThemes((current) => ({
+        ...current,
+        [String(payload.key)]: payload.preset,
+      }));
+      saveThemeToServerOrStorage(payload);
+    }}
+    onDeleteTheme={(payload) => {
+      setThemes((current) => {
+        const { [String(payload.key)]: removed, ...next } = current;
+        return next;
+      });
+      deleteThemeFromServerOrStorage(payload);
+    }}
+  />
+</ThemeProvider>
+```
+
+### 精简面板
+
+用 sections 控制展示哪些调节项,适合放进抽屉、设置页侧栏或开发调试区。
+
+```tsx
+<ThemePanel
+  compact
+  title="微调"
+  description={null}
+  sections={["accent", "shadow", "radius"]}
+  showReset={false}
+/>
+```
+
+## API
+
+**ThemePanel**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| title | `ReactNode` | `"主题"` | 面板标题;传 null 可隐藏标题文本 |
+| description | `ReactNode` | `"快速调整当前 Lumina 主题"` | 面板副标题 |
+| sections | `ThemePanelSection[]` | — | 展示的控制区及顺序;shadow 区同时控制 intensity / shadow-scale / shadow-float-scale |
+| modeOptions | `ThemePanelModeOption[]` | — | 模式切换项 |
+| presetOptions | `ThemePanelPresetOption[]` | — | 命名主题预设卡片;不传时使用浅色/深色/瓷白/助手/助手暗 + theme.themes,也可完全由业务侧控制 |
+| defaultCustomAccent | `string` | `"#845ef7"` | 自定义强调色初始值 |
+| allowCreateTheme | `boolean` | `true` | 在预设区显示新建主题流程 |
+| defaultCreateThemeName | `string` | `"我的主题"` | 新建主题的默认名称 |
+| createThemeKeyPrefix | `string` | `"user"` | 生成自建主题 mode key 时使用的前缀 |
+| onCreateTheme | `(payload: ThemePanelCreateThemePayload) => void` | — | 保存自建主题后的回调,业务侧可把 payload.preset 存起来并通过 ThemeProvider themes 回灌 |
+| allowDeleteTheme | `boolean` | `true` | 为非默认主题显示删除按钮;默认主题不会显示删除入口 |
+| onDeleteTheme | `(payload: ThemePanelDeleteThemePayload) => void` | — | 删除非默认主题后的回调,业务侧可同步删除外部存储 |
+| showReset | `boolean` | `true` | 显示重置按钮 |
+| compact | `boolean` | `false` | 紧凑布局 |
+
+
+**默认预设常量**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| THEME_PANEL_DEFAULT_PRESET_OPTIONS | `ThemePanelPresetOption[]` | — | ThemePanel 默认卡片列表: 浅色、深色、瓷白、助手、助手暗 |
+| THEME_PANEL_DEFAULT_THEME_PRESETS | `Record<string, ThemePreset>` | — | 默认卡片背后的 ThemePreset 配置 |
+
+
+**ThemePanelPresetOption**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| key \* | `ThemeMode` | — | 主题 mode key;若存在于 theme.themes 会应用对应 preset |
+| label \* | `ReactNode` | — | 卡片标题 |
+| description | `ReactNode` | — | 卡片说明 |
+| preset | `ThemePreset` | — | 可选 preset;点击时会注册并应用 |
+
+
+**ThemePanelCreateThemePayload**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| key | `ThemeMode` | — | 保存后注册到 ThemeProvider 的 mode key |
+| label | `string` | — | 用户输入的主题名称 |
+| description | `string` | — | ThemePanel 生成的说明文案,如自建亮/自建暗 |
+| preset | `ThemePreset` | — | 最终保存到 theme.themes 的主题配置 |
+| presetOption | `ThemePanelPresetOption` | — | 可直接追加到受控 presetOptions 的卡片配置 |
+
+
+**ThemePanelDeleteThemePayload**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| key | `ThemeMode` | — | 被删除的主题 mode key |
+| label | `string` | — | 被删除主题的展示名称 |
+| description | `string` | — | 被删除主题的说明文案 |
+| preset | `ThemePreset` | — | 删除前的主题配置;如果对应 key 不存在于 ThemeProvider themes 则为空 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms.md

@@ -3,7 +3,7 @@
 > 拟态风格的 React 18 组件库,目标是 Electron 桌面应用。**写给 AI 编程助手**的按需文档 —— 每个组件单独一个 `.md`,避免一次性读取全部。示例源自 playground 的 demo,可直接复制运行。
 
 - **包名**: `@fangxinyan/lumina`
-- **版本**: `0.6.2`
+- **版本**: `0.6.4`
 - **React 最低版本**: 18
 - **环境**: 带打包器的 React 工程(Vite / Next.js / Webpack / Remix / Electron + Vite 等)
 - **零运行时依赖**: 只依赖 `react` / `react-dom` (peer deps)
@@ -32,8 +32,8 @@
    ```
    如果你还需要 reset / scrollbar / focus-visible 基线样式,请改用 `@fangxinyan/lumina/styles`。
 3. **TypeScript**: 所有 `XxxProps` 接口都是 `export`,可直接 `import { Button, type ButtonProps } from "@fangxinyan/lumina";`
-4. **主题**: 用 `<ThemeProvider>` 包根;运行时可通过 `useTheme()` 改。六种强调色 (`rose / sky / coral / mint / violet / amber`) × 两种模式 (`light / dark` + `system`) × 三档密度 (`compact / comfortable / spacious`)。详见 [`llms/theme.md`](./llms/theme.md)。
-5. **图标**: 所有接受 `icon / leadingIcon / trailingIcon` 的 prop 用字符串 `IconName`。完整列表见 [`llms/icon.md`](./llms/icon.md)。
+4. **主题**: 用 `<ThemeProvider>` 包根;运行时可通过 `useTheme()` 改。六种强调色 (`rose / sky / coral / mint / violet / amber`) × 内置模式 (`light / dark / system`) × 命名自定义模式 × 三档密度 (`compact / comfortable / spacious`)。详见 [`llms/theme.md`](./llms/theme.md)。
+5. **图标**: 常用 `icon / leadingIcon / trailingIcon` prop 支持内置字符串 `IconName`,高频组件也可传 `ReactNode`(如远程图片图标)。完整内置列表见 [`llms/icon.md`](./llms/icon.md)。
 6. **浮层组件**(Tooltip / Popover / Select / Cascader / ColorPicker / Modal / Drawer): 内部已 `createPortal` 到 `document.body` + 视口边界翻转,放在 `overflow: hidden` 的容器里也不会被裁。
 7. **Electron 专属组件**: `TitleBar` / `WindowControls` / `Sidebar` / `AppShell` 提供 macOS / Windows 原生风格的标题栏与导航。
 
@@ -42,7 +42,9 @@
 ### 起步
 
 - [Lumina](./llms/intro.md) — 为 Electron 应用定制的拟态风格 React 组件库。
-- [Theme 主题](./llms/theme.md) — ThemeProvider + useTheme,覆盖深浅色、强调色、密度、圆角、字体、阴影强度。
+- [Theme 主题](./llms/theme.md) — ThemeProvider + useTheme,覆盖深浅色、自定义模式、强调色、密度、圆角、字体、阴影强度。
+- [Surface 背景面](./llms/surface.md) — 主题感知的背景承载容器,用于给特殊色调内容提供正确的拟态 token 语境。
+- [ThemePanel 主题面板](./llms/themepanel.md) — 可复用的主题快速调节面板,直接驱动最近的 ThemeProvider。
 
 ### 通用
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fangxinyan/lumina",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Lumina — Neumorphic component library for Electron & React apps",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -57,6 +57,21 @@
       "import": "./dist/Message.js",
       "require": "./dist/Message.cjs"
     },
+    "./ImageGrid": {
+      "types": "./dist/Image.d.ts",
+      "import": "./dist/Image.js",
+      "require": "./dist/Image.cjs"
+    },
+    "./SpriteImage": {
+      "types": "./dist/Image.d.ts",
+      "import": "./dist/Image.js",
+      "require": "./dist/Image.cjs"
+    },
+    "./LayeredImage": {
+      "types": "./dist/Image.d.ts",
+      "import": "./dist/Image.js",
+      "require": "./dist/Image.cjs"
+    },
     "./*": {
       "types": "./dist/*.d.ts",
       "import": "./dist/*.js",

package/dist/Button-SDQD25AG.css

@@ -1,98 +0,0 @@
-/* ============ Button ============ */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  height: var(--ctrl-h);
-  padding: 0 var(--ctrl-pad-x);
-  border: none;
-  border-radius: var(--r-md);
-  font-size: 13px;
-  font-weight: 500;
-  font-family: inherit;
-  color: var(--fg);
-  background: var(--bg);
-  box-shadow: var(--neu-out-sm);
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-  flex-shrink: 0;
-  transition: all var(--dur-fast) var(--ease);
-}
-.btn > svg { flex-shrink: 0; }
-.btn.icon {
-  flex-shrink: 0;
-  overflow: visible;
-}
-.btn:hover { color: var(--accent-ink); }
-.btn:active, .btn.pressed {
-  box-shadow: var(--neu-in-sm);
-  color: var(--accent-ink);
-}
-
-.btn.primary {
-  color: var(--accent-ink);
-  background:
-    linear-gradient(145deg,
-      color-mix(in oklch, var(--accent-soft) 80%, var(--shadow-light)),
-      color-mix(in oklch, var(--accent-soft) 92%, var(--bg)));
-  box-shadow:
-    var(--neu-out-sm),
-    inset 1px 1px 0 color-mix(in oklch, var(--shadow-light) 60%, transparent),
-    inset -1px -1px 0 color-mix(in oklch, var(--accent) 15%, transparent);
-  font-weight: 600;
-}
-.btn.primary:hover {
-  background:
-    linear-gradient(145deg,
-      color-mix(in oklch, var(--accent-soft) 70%, var(--shadow-light)),
-      color-mix(in oklch, var(--accent) 18%, var(--accent-soft)));
-  box-shadow:
-    var(--neu-out-sm),
-    inset 1px 1px 0 color-mix(in oklch, var(--shadow-light) 70%, transparent),
-    inset -1px -1px 0 color-mix(in oklch, var(--accent) 20%, transparent),
-    0 0 16px -6px var(--accent-glow);
-}
-.btn.primary:active, .btn.primary.pressed {
-  box-shadow:
-    inset 2px 2px 4px color-mix(in oklch, var(--accent) 25%, var(--shadow-dark)),
-    inset -1px -1px 2px var(--shadow-light);
-  transform: none;
-}
-
-.btn.ghost {
-  background: transparent;
-  box-shadow: none;
-  color: var(--fg-muted);
-}
-.btn.ghost:hover { background: var(--bg); box-shadow: var(--neu-flat); color: var(--fg); }
-
-.btn.danger { color: var(--danger); }
-.btn.danger:hover { color: var(--danger); }
-
-.btn.icon { width: var(--ctrl-h); padding: 0; }
-.btn.sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: var(--r-sm); }
-.btn.sm.icon { width: 30px; padding: 0; }
-.btn.lg { height: 52px; padding: 0 24px; font-size: 15px; border-radius: var(--r-lg); }
-.btn.lg.icon { width: 52px; padding: 0; }
-
-.btn.block { width: 100%; flex-shrink: 1; }
-
-.btn[disabled], .btn.disabled, .btn:disabled {
-  color: var(--fg-subtle);
-  cursor: not-allowed;
-  box-shadow: var(--neu-flat);
-  transform: none;
-}
-.btn[disabled]:hover, .btn:disabled:hover, .btn.disabled:hover { transform: none; color: var(--fg-subtle); background: var(--bg); }
-
-.btn.loading { cursor: wait; }
-.btn .spinner {
-  width: 14px; height: 14px;
-  border-radius: 999px;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  animation: spin 0.8s linear infinite;
-  display: inline-block;
-}

package/dist/chunk-B2KEZQ6S.cjs

@@ -1,116 +0,0 @@
-'use strict';
-
-var chunkTJII7BQ2_cjs = require('./chunk-TJII7BQ2.cjs');
-require('./tokens-BIIUTPKN.css');
-require('./shared-NJHRNLRH.css');
-require('./Image-4MN34O6P.css');
-var React = require('react');
-var ReactDOM = require('react-dom');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
-
-var Image = React__namespace.forwardRef(({
-  src,
-  alt,
-  width = 200,
-  height = 140,
-  preview = true,
-  hover = true,
-  placeholder,
-  className = "",
-  style,
-  ...rest
-}, ref) => {
-  const [loaded, setLoaded] = React__namespace.useState(false);
-  const [err, setErr] = React__namespace.useState(false);
-  const [open, setOpen] = React__namespace.useState(false);
-  const canPreview = preview && loaded && !err;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: `n-image ${hover ? "hover" : ""} ${canPreview ? "clickable" : ""} ${className}`,
-        style: { width, ...style },
-        onClick: () => canPreview && setOpen(true),
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "n-image-frame", style: { width: "100%", height }, children: [
-          !err && src && /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, onLoad: () => setLoaded(true), onError: () => setErr(true) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `n-image-placeholder ${loaded && !err ? "loaded" : ""}`, children: placeholder ?? /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "image", size: 28 }) }),
-          canPreview && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "image-hint", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "eye", size: 14 }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u70B9\u51FB\u67E5\u770B" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "image-actions", onClick: (e) => e.stopPropagation(), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "ia-btn",
-                  onClick: () => setOpen(true),
-                  "aria-label": "\u9884\u89C8",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "eye", size: 13 })
-                }
-              ),
-              src && /* @__PURE__ */ jsxRuntime.jsx("a", { className: "ia-btn", href: src, download: true, "aria-label": "\u4E0B\u8F7D", children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "download", size: 13 }) })
-            ] })
-          ] })
-        ] })
-      }
-    ),
-    open && typeof document !== "undefined" && ReactDOM__default.default.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "image-preview-overlay", onClick: () => setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, onClick: (e) => e.stopPropagation() }) }),
-      document.body
-    )
-  ] });
-});
-Image.displayName = "Image";
-var ImageGrid = React__namespace.forwardRef(({
-  images,
-  columns,
-  itemHeight = 130,
-  className = "",
-  style,
-  ...rest
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ref,
-    className,
-    style: {
-      display: "grid",
-      gap: 14,
-      gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : "repeat(auto-fill, minmax(160px, 1fr))",
-      ...style
-    },
-    ...rest,
-    children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx(Image, { src: img.src, alt: img.alt, width: "100%", height: itemHeight }, i))
-  }
-));
-ImageGrid.displayName = "ImageGrid";
-
-exports.Image = Image;
-exports.ImageGrid = ImageGrid;