@fangxinyan/lumina 0.6.17 → 0.6.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/{Image-TDCXJISG.css → Image-NISJRUWX.css} +80 -1
  2. package/dist/Image.cjs +6 -5
  3. package/dist/Image.d.cts +18 -1
  4. package/dist/Image.d.ts +18 -1
  5. package/dist/Image.js +2 -1
  6. package/dist/chunk-5VOUUQF5.js +736 -0
  7. package/dist/chunk-HSAJUEO7.cjs +764 -0
  8. package/dist/index.cjs +6 -6
  9. package/dist/index.d.cts +2 -2
  10. package/dist/index.d.ts +2 -2
  11. package/dist/index.js +2 -2
  12. package/dist/styles.css +79 -1
  13. package/docs/llms/image.md +21 -0
  14. package/docs/llms.md +1 -1
  15. package/package.json +1 -1
  16. package/dist/chunk-EQ4FPOQQ.js +0 -253
  17. package/dist/chunk-RMFSX7DO.cjs +0 -281
package/dist/{Image-TDCXJISG.css → Image-NISJRUWX.css} RENAMED
@@ -117,14 +117,93 @@
117
117
  background: var(--image-preview-mask-bg, var(--mask-bg));
118
118
  backdrop-filter: blur(16px);
119
119
  display: grid; place-items: center;
120
+ overflow: hidden;
121
+ padding: min(8vh, 72px) var(--gap-8) var(--gap-8);
120
122
  z-index: 500;
121
123
  animation: fadeIn var(--dur) var(--ease);
122
124
  }
123
- .image-preview-overlay img {
125
+ .image-preview-overlay:focus {
126
+ outline: none;
127
+ }
128
+ .image-preview-toolbar {
129
+ --image-preview-toolbar-ink: color-mix(in oklch, var(--accent) 42%, var(--fg-muted));
130
+ --image-preview-toolbar-ink-hover: color-mix(in oklch, var(--accent) 48%, var(--fg));
131
+ position: absolute;
132
+ top: var(--gap-5);
133
+ left: 50%;
134
+ z-index: 1;
135
+ display: flex;
136
+ align-items: center;
137
+ gap: var(--gap-2);
138
+ max-width: min(calc(100vw - 32px), 720px);
139
+ padding: 6px;
140
+ overflow-x: auto;
141
+ color: var(--image-preview-toolbar-ink);
142
+ border: 1px solid color-mix(in oklch, var(--accent) 14%, var(--border));
143
+ border-radius: var(--r-pill);
144
+ background: color-mix(in oklch, var(--bg-raised) 92%, var(--accent-soft));
145
+ box-shadow:
146
+ var(--neu-float),
147
+ 0 0 0 1px color-mix(in oklch, var(--accent-glow) 22%, transparent);
148
+ backdrop-filter: blur(18px) saturate(1.2);
149
+ transform: translateX(-50%);
150
+ }
151
+ .image-preview-toolbar .btn {
152
+ flex: 0 0 auto;
153
+ }
154
+ .image-preview-toolbar .btn.ghost {
155
+ color: var(--image-preview-toolbar-ink);
156
+ }
157
+ .image-preview-toolbar .btn.ghost:hover {
158
+ color: var(--image-preview-toolbar-ink-hover);
159
+ background: color-mix(in oklch, var(--accent-soft) 36%, var(--bg));
160
+ box-shadow: var(--neu-shadow-subtle);
161
+ }
162
+ .image-preview-toolbar .btn.ghost:active,
163
+ .image-preview-toolbar .btn.ghost.pressed {
164
+ color: var(--image-preview-toolbar-ink-hover);
165
+ background: color-mix(in oklch, var(--accent-soft) 48%, var(--bg));
166
+ box-shadow: var(--neu-shadow-inset-strong);
167
+ }
168
+ .image-preview-scale {
169
+ min-width: 48px;
170
+ color: var(--image-preview-toolbar-ink);
171
+ font-family: var(--font-mono);
172
+ font-size: var(--fs-sm);
173
+ font-weight: 500;
174
+ line-height: 1;
175
+ text-align: center;
176
+ }
177
+ .image-preview-ratio {
178
+ min-width: 46px;
179
+ padding-inline: 10px;
180
+ font-family: var(--font-mono);
181
+ }
182
+ .image-preview-toolbar-slot {
183
+ display: inline-flex;
184
+ flex: 0 0 auto;
185
+ align-items: center;
186
+ gap: var(--gap-2);
187
+ }
188
+ .image-preview-img {
124
189
  max-width: 80vw;
125
190
  max-height: 80vh;
126
191
  border-radius: var(--r-lg);
127
192
  box-shadow: var(--neu-shadow-float);
193
+ transform-origin: center;
194
+ transition: transform var(--dur-fast) var(--ease);
195
+ user-select: none;
196
+ will-change: transform;
197
+ }
198
+
199
+ @media (max-width: 640px) {
200
+ .image-preview-overlay {
201
+ padding: 76px var(--gap-4) var(--gap-4);
202
+ }
203
+ .image-preview-toolbar {
204
+ top: var(--gap-4);
205
+ border-radius: var(--r-lg);
206
+ }
128
207
  }
129
208
 
130
209
  /* ============ SpriteImage / LayeredImage ============ */
package/dist/Image.cjs CHANGED
@@ -1,23 +1,24 @@
1
1
  'use strict';
2
2
 
3
- var chunkRMFSX7DO_cjs = require('./chunk-RMFSX7DO.cjs');
3
+ var chunkHSAJUEO7_cjs = require('./chunk-HSAJUEO7.cjs');
4
+ require('./chunk-SW2HMNCA.cjs');
4
5
  require('./chunk-QMX67CVT.cjs');
5
6
 
6
7
 
7
8
 
8
9
  Object.defineProperty(exports, "Image", {
9
10
  enumerable: true,
10
- get: function () { return chunkRMFSX7DO_cjs.Image; }
11
+ get: function () { return chunkHSAJUEO7_cjs.Image; }
11
12
  });
12
13
  Object.defineProperty(exports, "ImageGrid", {
13
14
  enumerable: true,
14
- get: function () { return chunkRMFSX7DO_cjs.ImageGrid; }
15
+ get: function () { return chunkHSAJUEO7_cjs.ImageGrid; }
15
16
  });
16
17
  Object.defineProperty(exports, "LayeredImage", {
17
18
  enumerable: true,
18
- get: function () { return chunkRMFSX7DO_cjs.LayeredImage; }
19
+ get: function () { return chunkHSAJUEO7_cjs.LayeredImage; }
19
20
  });
20
21
  Object.defineProperty(exports, "SpriteImage", {
21
22
  enumerable: true,
22
- get: function () { return chunkRMFSX7DO_cjs.SpriteImage; }
23
+ get: function () { return chunkHSAJUEO7_cjs.SpriteImage; }
23
24
  });
package/dist/Image.d.cts CHANGED
@@ -1,6 +1,17 @@
1
1
  import * as React from 'react';
2
2
 
3
3
  type ImageVariant = "framed" | "raw" | "icon";
4
+ type ImagePreviewMode = "fit" | "actual";
5
+ interface ImagePreviewToolbarRenderProps {
6
+ scale: number;
7
+ mode: ImagePreviewMode;
8
+ zoomIn: () => void;
9
+ zoomOut: () => void;
10
+ fitToWindow: () => void;
11
+ actualSize: () => void;
12
+ reset: () => void;
13
+ close: () => void;
14
+ }
4
15
  interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {
5
16
  src?: string;
6
17
  alt?: string;
@@ -22,6 +33,12 @@ interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {
22
33
  previewClassName?: string;
23
34
  /** Inline style forwarded to the full-screen preview overlay. */
24
35
  previewStyle?: React.CSSProperties;
36
+ /** Max width of the image inside the preview overlay. Defaults to 80vw. */
37
+ previewMaxWidth?: number | string;
38
+ /** Max height of the image inside the preview overlay. Defaults to 80vh. */
39
+ previewMaxHeight?: number | string;
40
+ /** Render extra controls in the preview toolbar. */
41
+ renderPreviewToolbar?: (props: ImagePreviewToolbarRenderProps) => React.ReactNode;
25
42
  /** Hover scale-up. */
26
43
  hover?: boolean;
27
44
  /** Custom placeholder while loading or on error. */
@@ -104,4 +121,4 @@ interface LayeredImageProps extends React.HTMLAttributes<HTMLDivElement> {
104
121
  */
105
122
  declare const LayeredImage: React.ForwardRefExoticComponent<LayeredImageProps & React.RefAttributes<HTMLDivElement>>;
106
123
 
107
- export { Image, ImageGrid, type ImageGridItem, type ImageGridProps, type ImageProps, type ImageVariant, LayeredImage, type LayeredImageInset, type LayeredImageLayer, type LayeredImageProps, SpriteImage, type SpriteImageProps, type SpriteRect };
124
+ 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 };
package/dist/Image.d.ts CHANGED
@@ -1,6 +1,17 @@
1
1
  import * as React from 'react';
2
2
 
3
3
  type ImageVariant = "framed" | "raw" | "icon";
4
+ type ImagePreviewMode = "fit" | "actual";
5
+ interface ImagePreviewToolbarRenderProps {
6
+ scale: number;
7
+ mode: ImagePreviewMode;
8
+ zoomIn: () => void;
9
+ zoomOut: () => void;
10
+ fitToWindow: () => void;
11
+ actualSize: () => void;
12
+ reset: () => void;
13
+ close: () => void;
14
+ }
4
15
  interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {
5
16
  src?: string;
6
17
  alt?: string;
@@ -22,6 +33,12 @@ interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {
22
33
  previewClassName?: string;
23
34
  /** Inline style forwarded to the full-screen preview overlay. */
24
35
  previewStyle?: React.CSSProperties;
36
+ /** Max width of the image inside the preview overlay. Defaults to 80vw. */
37
+ previewMaxWidth?: number | string;
38
+ /** Max height of the image inside the preview overlay. Defaults to 80vh. */
39
+ previewMaxHeight?: number | string;
40
+ /** Render extra controls in the preview toolbar. */
41
+ renderPreviewToolbar?: (props: ImagePreviewToolbarRenderProps) => React.ReactNode;
25
42
  /** Hover scale-up. */
26
43
  hover?: boolean;
27
44
  /** Custom placeholder while loading or on error. */
@@ -104,4 +121,4 @@ interface LayeredImageProps extends React.HTMLAttributes<HTMLDivElement> {
104
121
  */
105
122
  declare const LayeredImage: React.ForwardRefExoticComponent<LayeredImageProps & React.RefAttributes<HTMLDivElement>>;
106
123
 
107
- export { Image, ImageGrid, type ImageGridItem, type ImageGridProps, type ImageProps, type ImageVariant, LayeredImage, type LayeredImageInset, type LayeredImageLayer, type LayeredImageProps, SpriteImage, type SpriteImageProps, type SpriteRect };
124
+ 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 };
package/dist/Image.js CHANGED
@@ -1,2 +1,3 @@
1
- export { Image, ImageGrid, LayeredImage, SpriteImage } from './chunk-EQ4FPOQQ.js';
1
+ export { Image, ImageGrid, LayeredImage, SpriteImage } from './chunk-5VOUUQF5.js';
2
+ import './chunk-IPSNC5VZ.js';
2
3
  import './chunk-FDZG27IG.js';