@columenlabs/lumen-ui 0.1.214 → 0.1.215
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
// ChatImage: an image in a chat message. A thumbnail until clicked; then it opens full width in place,
|
|
3
|
-
// where
|
|
3
|
+
// where a pinch (or Ctrl + wheel) zooms at the pointer, a drag or two fingers pan and a double-click
|
|
4
4
|
// toggles fit and 2× (react-zoom-pan-pinch). Its toolbar zooms, resets, opens the image in a 90%
|
|
5
5
|
// lightbox with the same controls (the kit's Dialog: Esc, × or a click outside closes it) and
|
|
6
6
|
// shrinks it back to the thumbnail.
|
|
@@ -20,8 +20,11 @@ function ZoomBar({ children }) {
|
|
|
20
20
|
return (_jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-0.5 rounded-lg border bg-popover/90 p-0.5 text-popover-foreground shadow-sm backdrop-blur-sm", "data-slot": "image-zoom-bar", children: [_jsx(IconButton, { icon: ZoomOutIcon, label: "Zoom out", disabled: scale <= 1.001, onClick: () => zoomOut() }), _jsxs("span", { className: "num min-w-10 text-center text-muted-foreground text-xs", "aria-live": "polite", children: [Math.round(scale * 100), "%"] }), _jsx(IconButton, { icon: ZoomInIcon, label: "Zoom in", disabled: scale >= MAX_SCALE - 0.001, onClick: () => zoomIn() }), _jsx(IconButton, { icon: RotateCcwIcon, label: "Reset zoom", onClick: () => resetTransform() }), _jsx("span", { className: "mx-0.5 h-4 w-px bg-border", "aria-hidden": true }), children] }));
|
|
21
21
|
}
|
|
22
22
|
/** The image at fit (scale 1), with zoom and pan; the wrapper takes the box its parent gives it. */
|
|
23
|
-
function Zoomable({ src, alt, children, }) {
|
|
24
|
-
|
|
23
|
+
function Zoomable({ src, alt, panAtFit = false, children, }) {
|
|
24
|
+
const [zoomed, setZoomed] = useState(false);
|
|
25
|
+
return (_jsxs(TransformWrapper, { minScale: 1, maxScale: MAX_SCALE, centerZoomedOut: true,
|
|
26
|
+
// A pinch (a wheel with ctrlKey) zooms; two fingers or a plain wheel pan.
|
|
27
|
+
wheel: { step: 0.01, wheelDisabled: true }, trackPadPanning: { disabled: !panAtFit && !zoomed, velocityDisabled: true }, onTransform: (_, { scale }) => setZoomed(scale > 1.001), doubleClick: { mode: 'toggle', step: 1 }, children: [_jsx(ZoomBar, { children: children }), _jsx(TransformComponent, { wrapperClass: "!size-full cursor-grab active:cursor-grabbing", contentClass: "!size-full", children: _jsx("img", { src: src, alt: alt, draggable: false, className: "size-full object-contain" }) })] }));
|
|
25
28
|
}
|
|
26
29
|
export function ChatImage({ src, alt }) {
|
|
27
30
|
const [open, setOpen] = useState(false);
|
|
@@ -43,5 +46,5 @@ export function ChatImage({ src, alt }) {
|
|
|
43
46
|
onOpenAutoFocus: (e) => {
|
|
44
47
|
e.preventDefault();
|
|
45
48
|
e.currentTarget.focus();
|
|
46
|
-
}, className: cn('h-[90vh] w-[90vw] max-w-none overflow-hidden p-0 sm:max-w-none', 'max-md:h-full max-md:w-full'), children: [_jsx(DialogTitle, { className: "sr-only", children: alt }), _jsx("div", { className: "relative size-full", children: _jsx(Zoomable, { src: src, alt: alt, children: _jsx(DialogClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close" }) }) }) })] }) })] }));
|
|
49
|
+
}, className: cn('h-[90vh] w-[90vw] max-w-none overflow-hidden p-0 sm:max-w-none', 'max-md:h-full max-md:w-full'), children: [_jsx(DialogTitle, { className: "sr-only", children: alt }), _jsx("div", { className: "relative size-full", children: _jsx(Zoomable, { src: src, alt: alt, panAtFit: true, children: _jsx(DialogClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close" }) }) }) })] }) })] }));
|
|
47
50
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@columenlabs/lumen-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.215",
|
|
4
4
|
"description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@codemirror/lang-javascript": "6.2.5",
|
|
50
50
|
"@codemirror/lang-json": "6.0.2",
|
|
51
51
|
"@codemirror/lang-sql": "6.10.0",
|
|
52
|
-
"@columenlabs/lumen-ui-types": "0.1.
|
|
52
|
+
"@columenlabs/lumen-ui-types": "0.1.215",
|
|
53
53
|
"@dnd-kit/core": "6.3.1",
|
|
54
54
|
"@dnd-kit/sortable": "10.0.0",
|
|
55
55
|
"@dnd-kit/utilities": "3.2.2",
|