@treasuryspatial/prompt-ui-kit 0.1.15 → 0.1.21

package/dist/FullscreenImage.js

@@ -1,68 +1,346 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+const Overlay = styled.div `
+  position: fixed;
+  inset: 0;
+  z-index: 140;
+  background: rgba(0, 0, 0, 0.92);
+  color: white;
+`;
+const BackdropButton = styled.button `
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: transparent;
+  cursor: default;
+`;
+const Shell = styled.div `
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px;
+  pointer-events: none;
+
+  @media (max-width: 760px) {
+    padding: 10px;
+  }
+`;
+const TopBar = styled.div `
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(0, 0, 0, 0.58);
+  backdrop-filter: blur(18px);
+  border-radius: 16px;
+  padding: 12px 14px;
+
+  @media (max-width: 760px) {
+    flex-direction: column;
+  }
+`;
+const HeaderText = styled.div `
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+const Title = styled.div `
+  font-family: var(--viewer-ui-font-display, inherit);
+  font-size: clamp(18px, 2vw, 28px);
+  line-height: 1.05;
+  color: white;
+`;
+const Subtitle = styled.div `
+  font-size: 12px;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.66);
+`;
+const MetaRow = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+const MetaPill = styled.span `
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 9px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.08);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.64);
+`;
+const TopActions = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+`;
+const ActionButton = styled.button `
+  min-height: 34px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid ${(props) => (props.$variant === 'primary' ? 'rgba(255, 255, 255, 0.62)' : 'rgba(255, 255, 255, 0.24)')};
+  background: ${(props) => (props.$variant === 'primary' ? 'rgba(255, 255, 255, 0.92)' : 'rgba(255, 255, 255, 0.08)')};
+  color: ${(props) => (props.$variant === 'primary' ? '#0d1117' : 'rgba(255, 255, 255, 0.86)')};
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: lowercase;
+
+  &:disabled {
+    opacity: 0.42;
+    cursor: not-allowed;
+  }
+`;
+const CloseButton = styled.button `
+  min-width: 34px;
+  min-height: 34px;
+  border: 0;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.72);
+  cursor: pointer;
+  font-size: 26px;
+  line-height: 1;
+
+  &:hover {
+    color: white;
+  }
+`;
+const ShareRow = styled.div `
+  pointer-events: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+const Stage = styled.div `
+  position: relative;
+  pointer-events: auto;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Image = styled.img `
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  display: block;
+`;
+const EmptyImage = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.48);
+`;
+const StatusText = styled.div `
+  pointer-events: auto;
+  align-self: flex-start;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(0, 0, 0, 0.46);
+  padding: 7px 10px;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.68);
+`;
+const DetailsToggle = styled.button `
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  background: rgba(0, 0, 0, 0.56);
+  color: rgba(255, 255, 255, 0.82);
+  min-height: 36px;
+  padding: 0 12px;
+  cursor: pointer;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+`;
+const DetailsDrawer = styled.aside `
+  pointer-events: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(460px, 92vw);
+  overflow: auto;
+  border-left: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(0, 0, 0, 0.88);
+  backdrop-filter: blur(18px);
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+const DrawerHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+`;
+const DrawerTitle = styled.div `
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.54);
+`;
+const DetailTabs = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+const DetailTab = styled.button `
+  min-height: 30px;
+  padding: 0 10px;
+  border-radius: 999px;
+  border: 1px solid ${(props) => (props.$active ? 'rgba(255, 255, 255, 0.6)' : 'rgba(255, 255, 255, 0.18)')};
+  background: ${(props) => (props.$active ? 'rgba(255, 255, 255, 0.2)' : 'rgba(255, 255, 255, 0.06)')};
+  color: rgba(255, 255, 255, 0.78);
+  cursor: pointer;
+  font-size: 11px;
+  text-transform: lowercase;
+`;
+const DetailDescription = styled.div `
+  font-size: 12px;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.58);
+`;
+const DrawerSection = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+const TitleInput = styled.input `
+  width: 100%;
+  min-height: 36px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.06);
+  color: white;
+  padding: 0 12px;
+  font-size: 12px;
+  outline: none;
+`;
 const statusLabel = (status) => {
     if (!status || status === 'idle')
         return null;
     if (status === 'sending' || status === 'saving')
-        return 'working…';
+        return 'working';
     if (status === 'sent' || status === 'saved')
         return 'done';
     return 'failed';
 };
-export default function FullscreenImage({ open, src, alt = 'image', title, subtitle, modeLabel, prompt, promptManifest, createdAt, publicUrl, copyUrl, onClose, primaryAction, secondaryAction, editableTitle, }) {
+export default function FullscreenImage({ open, src, alt = 'image', title, subtitle, modeLabel, createdAt, publicUrl, copyUrl, onClose, primaryAction, secondaryAction, extraActions = [], editableTitle, detailPanels = [], statusText, }) {
     const [shareStatus, setShareStatus] = useState('idle');
-    const manifestText = useMemo(() => {
-        if (!promptManifest)
-            return '';
-        try {
-            return JSON.stringify(promptManifest, null, 2);
-        }
-        catch {
-            return '';
+    const [detailsOpen, setDetailsOpen] = useState(false);
+    const [activeDetailPanelId, setActiveDetailPanelId] = useState(null);
+    const resolvedDetailPanels = useMemo(() => detailPanels, [detailPanels]);
+    useEffect(() => {
+        if (!open) {
+            setDetailsOpen(false);
+            setActiveDetailPanelId(null);
+            return;
         }
-    }, [promptManifest]);
-    if (!open || !src)
+        const defaultPanel = resolvedDetailPanels.find((panel) => panel.defaultOpen) ?? resolvedDetailPanels[0];
+        setDetailsOpen(false);
+        setActiveDetailPanelId(defaultPanel?.id ?? null);
+    }, [open, resolvedDetailPanels]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            if (detailsOpen) {
+                setDetailsOpen(false);
+                return;
+            }
+            onClose();
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, [detailsOpen, onClose, open]);
+    if (!open)
         return null;
     const copy = async (value) => {
         if (!value)
-            return;
+            return false;
         try {
             await navigator.clipboard.writeText(value);
-        }
-        catch {
-            // ignore clipboard failures
-        }
-    };
-    const shareImage = async () => {
-        if (!publicUrl)
-            return;
-        try {
-            if (typeof navigator !== 'undefined' && typeof navigator.share === 'function') {
-                await navigator.share({
-                    title: title || 'render image',
-                    text: subtitle || modeLabel || 'Composer render',
-                    url: publicUrl,
-                });
-                setShareStatus('idle');
-                return;
-            }
-            await copy(publicUrl);
             setShareStatus('copied');
+            window.setTimeout(() => setShareStatus('idle'), 1500);
+            return true;
         }
         catch {
             setShareStatus('error');
+            window.setTimeout(() => setShareStatus('idle'), 1500);
+            return false;
         }
     };
-    const renderAction = (action) => {
+    const openShareTarget = (url) => {
+        if (typeof window === 'undefined')
+            return;
+        window.open(url, '_blank', 'noopener,noreferrer');
+    };
+    const encodedShareTitle = encodeURIComponent(title || 'Treasury image');
+    const encodedShareSummary = encodeURIComponent(subtitle || modeLabel || 'Treasury Composer');
+    const encodedPublicUrl = encodeURIComponent(publicUrl || '');
+    const shareTargets = publicUrl
+        ? [
+            {
+                id: 'copy',
+                label: shareStatus === 'copied' ? 'link copied' : shareStatus === 'error' ? 'copy failed' : 'copy link',
+                onClick: () => void copy(publicUrl),
+            },
+            {
+                id: 'x',
+                label: 'post to x',
+                onClick: () => openShareTarget(`https://twitter.com/intent/tweet?url=${encodedPublicUrl}&text=${encodedShareTitle}`),
+            },
+            {
+                id: 'linkedin',
+                label: 'linkedin',
+                onClick: () => openShareTarget(`https://www.linkedin.com/sharing/share-offsite/?url=${encodedPublicUrl}`),
+            },
+            {
+                id: 'email',
+                label: 'email',
+                onClick: () => openShareTarget(`mailto:?subject=${encodedShareTitle}&body=${encodedShareSummary}%0A%0A${encodedPublicUrl}`),
+            },
+        ]
+        : [];
+    const renderAction = (action, key) => {
         if (!action)
             return null;
-        const classes = action.variant === 'secondary'
-            ? 'viewer-ui-kit-button viewer-ui-kit-button-secondary'
-            : 'viewer-ui-kit-button viewer-ui-kit-button-primary';
-        return (_jsx("button", { type: "button", onClick: action.onClick, disabled: action.disabled, className: `px-4 py-2 text-xs font-black lowercase tracking-[0.08em] ${classes} ${action.disabled ? 'opacity-60 cursor-not-allowed' : ''}`, children: action.label }));
+        return (_jsx(ActionButton, { type: "button", onClick: action.onClick, disabled: action.disabled || action.status === 'sending' || action.status === 'saving', "$variant": action.variant ?? 'primary', children: statusLabel(action.status) || action.label }, key));
     };
-    return (_jsxs("div", { className: "fixed inset-0 z-[140] bg-black/80 backdrop-blur-sm", children: [_jsx("button", { type: "button", "aria-label": "Close image", className: "absolute inset-0 h-full w-full cursor-default", onClick: onClose }), _jsxs("div", { className: "absolute inset-6 z-[1] grid gap-6 lg:grid-cols-[minmax(0,1.5fr)_minmax(320px,420px)]", children: [_jsx("div", { className: "min-h-0 rounded-3xl border viewer-ui-kit-border viewer-ui-kit-surface shadow-2xl overflow-hidden flex items-center justify-center", children: _jsx("img", { src: src, alt: alt, className: "max-h-full max-w-full object-contain" }) }), _jsxs("div", { className: "min-h-0 rounded-3xl border viewer-ui-kit-border viewer-ui-kit-surface shadow-2xl p-5 overflow-y-auto", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-2xl font-black lowercase viewer-ui-kit-text-strong", children: title || 'untitled image' }), subtitle ? _jsx("div", { className: "mt-1 text-sm viewer-ui-kit-text-muted", children: subtitle }) : null, _jsxs("div", { className: "mt-2 flex flex-wrap gap-2 text-[10px] uppercase tracking-[0.18em] viewer-ui-kit-text-subtle", children: [modeLabel ? _jsx("span", { children: modeLabel }) : null, createdAt ? _jsx("span", { children: createdAt }) : null] })] }), _jsx("button", { type: "button", onClick: onClose, className: "viewer-ui-kit-text-muted viewer-ui-kit-text-hover text-sm uppercase tracking-[0.2em]", children: "close" })] }), editableTitle ? (_jsxs("div", { className: "mt-5 space-y-2", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.2em] viewer-ui-kit-text-subtle", children: "title" }), _jsx("input", { value: editableTitle.value, onChange: (event) => editableTitle.onChange(event.target.value), className: "w-full rounded-xl border viewer-ui-kit-border-subtle viewer-ui-kit-surface px-3 py-2 text-sm viewer-ui-kit-text" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("button", { type: "button", onClick: editableTitle.onSave, className: "px-3 py-2 text-xs font-black lowercase tracking-[0.08em] viewer-ui-kit-button viewer-ui-kit-button-secondary", children: "save title" }), statusLabel(editableTitle.status) ? _jsx("span", { className: "text-xs viewer-ui-kit-text-muted", children: statusLabel(editableTitle.status) }) : null] })] })) : null, _jsxs("div", { className: "mt-5 flex flex-wrap gap-2", children: [renderAction(primaryAction), renderAction(secondaryAction), publicUrl ? (_jsx("button", { type: "button", onClick: () => void shareImage(), className: "px-4 py-2 text-xs font-black lowercase tracking-[0.08em] viewer-ui-kit-button viewer-ui-kit-button-secondary", children: "share image" })) : null, publicUrl ? (_jsx("button", { type: "button", onClick: () => void copy(publicUrl), className: "px-4 py-2 text-xs font-black lowercase tracking-[0.08em] viewer-ui-kit-button viewer-ui-kit-button-secondary", children: "copy public link" })) : null, copyUrl && copyUrl !== publicUrl ? (_jsx("button", { type: "button", onClick: () => void copy(copyUrl), className: "px-4 py-2 text-xs font-black lowercase tracking-[0.08em] viewer-ui-kit-button viewer-ui-kit-button-secondary", children: "copy image link" })) : null] }), (primaryAction?.status || secondaryAction?.status || shareStatus !== 'idle') ? (_jsx("div", { className: "mt-2 text-xs viewer-ui-kit-text-muted", children: statusLabel(primaryAction?.status) ||
-                                    statusLabel(secondaryAction?.status) ||
-                                    (shareStatus === 'copied' ? 'link copied' : shareStatus === 'error' ? 'share failed' : null) })) : null, prompt ? (_jsxs("div", { className: "mt-6 space-y-2", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.2em] viewer-ui-kit-text-subtle", children: "prompt" }), _jsx("pre", { className: "whitespace-pre-wrap rounded-2xl border viewer-ui-kit-border viewer-ui-kit-surface p-3 text-[11px] viewer-ui-kit-text", children: prompt })] })) : null, manifestText ? (_jsxs("div", { className: "mt-6 space-y-2", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.2em] viewer-ui-kit-text-subtle", children: "manifest" }), _jsx("pre", { className: "whitespace-pre-wrap rounded-2xl border viewer-ui-kit-border viewer-ui-kit-surface p-3 text-[10px] font-mono viewer-ui-kit-text-muted", children: manifestText })] })) : null] })] })] }));
+    const activePanel = resolvedDetailPanels.find((panel) => panel.id === activeDetailPanelId) ?? resolvedDetailPanels[0] ?? null;
+    return (_jsxs(Overlay, { role: "dialog", "aria-modal": "true", children: [_jsx(BackdropButton, { type: "button", "aria-label": "Close image", onClick: onClose }), _jsxs(Shell, { children: [_jsxs(TopBar, { children: [_jsxs(HeaderText, { children: [_jsx(Title, { children: title || 'untitled image' }), subtitle ? _jsx(Subtitle, { children: subtitle }) : null, _jsxs(MetaRow, { children: [modeLabel ? _jsx(MetaPill, { children: modeLabel }) : null, createdAt ? _jsx(MetaPill, { children: createdAt }) : null] })] }), _jsxs(TopActions, { children: [renderAction(primaryAction, 'primary'), renderAction(secondaryAction, 'secondary'), extraActions.map((action, index) => renderAction(action, `extra-${index}-${action.label}-${action.variant ?? 'secondary'}`)), copyUrl && copyUrl !== publicUrl ? (_jsx(ActionButton, { type: "button", onClick: () => void copy(copyUrl), "$variant": "secondary", children: "copy image link" })) : null, resolvedDetailPanels.length > 0 ? (_jsx(ActionButton, { type: "button", onClick: () => setDetailsOpen((prev) => !prev), "$variant": "secondary", children: detailsOpen ? 'close details' : 'details' })) : null, _jsx(CloseButton, { type: "button", onClick: onClose, "aria-label": "close", children: "\u00D7" })] })] }), shareTargets.length > 0 ? (_jsx(ShareRow, { children: shareTargets.map((target) => (_jsx(ActionButton, { type: "button", onClick: target.onClick, "$variant": "secondary", children: target.label }, target.id))) })) : null, _jsxs(Stage, { children: [src ? (
+                            // eslint-disable-next-line @next/next/no-img-element
+                            _jsx(Image, { src: src, alt: alt })) : (_jsx(EmptyImage, { children: "image unavailable" })), resolvedDetailPanels.length > 0 ? (_jsx(DetailsToggle, { type: "button", onClick: () => setDetailsOpen((prev) => !prev), children: detailsOpen ? 'close details' : 'details' })) : null, detailsOpen ? (_jsxs(DetailsDrawer, { onClick: (event) => event.stopPropagation(), children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "image details" }), _jsx(CloseButton, { type: "button", onClick: () => setDetailsOpen(false), "aria-label": "close details", children: "\u00D7" })] }), editableTitle ? (_jsxs(DrawerSection, { children: [_jsx(DrawerTitle, { children: "title" }), _jsx(TitleInput, { value: editableTitle.value, onChange: (event) => editableTitle.onChange(event.target.value) }), _jsx(TopActions, { children: _jsx(ActionButton, { type: "button", onClick: editableTitle.onSave, "$variant": "secondary", children: statusLabel(editableTitle.status) || 'save title' }) })] })) : null, _jsx(DetailTabs, { children: resolvedDetailPanels.map((panel) => (_jsx(DetailTab, { type: "button", onClick: () => setActiveDetailPanelId(panel.id), "$active": panel.id === activePanel?.id, children: panel.label }, panel.id))) }), activePanel ? (_jsxs(DrawerSection, { children: [activePanel.description ? _jsx(DetailDescription, { children: activePanel.description }) : null, activePanel.content] })) : null] })) : null] }), (statusText || primaryAction?.status || secondaryAction?.status || shareStatus !== 'idle') ? (_jsx(StatusText, { children: statusText ||
+                            statusLabel(primaryAction?.status) ||
+                            statusLabel(secondaryAction?.status) ||
+                            (shareStatus === 'copied' ? 'link copied' : shareStatus === 'error' ? 'share failed' : null) })) : null] })] }));
 }

package/dist/GalleryThumbCard.d.ts

@@ -7,8 +7,9 @@ type GalleryThumbCardProps = {
     imageSrc: string;
     onClick?: () => void;
     actions?: React.ReactNode;
+    mediaOverlay?: React.ReactNode;
     className?: string;
 };
-export default function GalleryThumbCard({ title, author, modeLabel, metaLine, imageSrc, onClick, actions, className, }: GalleryThumbCardProps): import("react/jsx-runtime").JSX.Element;
+export default function GalleryThumbCard({ title, author, modeLabel, metaLine, imageSrc, onClick, actions, mediaOverlay, className, }: GalleryThumbCardProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=GalleryThumbCard.d.ts.map

package/dist/GalleryThumbCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryThumbCard.d.ts","sourceRoot":"","sources":["../src/GalleryThumbCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,GACV,EAAE,qBAAqB,2CA+BvB"}
+{"version":3,"file":"GalleryThumbCard.d.ts","sourceRoot":"","sources":["../src/GalleryThumbCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAyIF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,YAAY,EACZ,SAAS,GACV,EAAE,qBAAqB,2CA6DvB"}

package/dist/GalleryThumbCard.js

@@ -1,12 +1,130 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function GalleryThumbCard({ title, author, modeLabel, metaLine, imageSrc, onClick, actions, className, }) {
-    return (_jsxs("div", { onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
+import styled from 'styled-components';
+const Card = styled.div `
+  position: relative;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 22px;
+  border: 1px solid var(--viewer-ui-color-panel-border-subtle);
+  background: var(--viewer-ui-color-surface);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
+  transition: box-shadow 200ms ease, border-color 200ms ease;
+  cursor: ${(props) => (props.$interactive ? 'pointer' : 'default')};
+
+  &:hover {
+    border-color: ${(props) => props.$interactive ? 'var(--viewer-ui-color-panel-border)' : 'var(--viewer-ui-color-panel-border-subtle)'};
+    box-shadow: ${(props) => props.$interactive ? '0 14px 30px rgba(15, 23, 42, 0.12)' : '0 8px 18px rgba(0, 0, 0, 0.14)'};
+  }
+`;
+const MediaFrame = styled.div `
+  position: relative;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  border-bottom: 1px solid var(--viewer-ui-color-panel-border-subtle);
+  background: var(--viewer-ui-color-surface);
+`;
+const MediaGlow = styled.div `
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 35%, rgba(15, 23, 42, 0.04));
+  pointer-events: none;
+`;
+const MediaInset = styled.div `
+  position: absolute;
+  inset: 0;
+  padding: 12px;
+`;
+const MediaInner = styled.div `
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 16px;
+  border: 1px solid var(--viewer-ui-color-panel-border-subtle);
+  background: var(--viewer-ui-color-surface);
+`;
+const MediaImage = styled.img `
+  display: block;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+`;
+const MediaFallback = styled.div `
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+  text-align: center;
+  font-size: 11px;
+  color: var(--viewer-ui-color-text-muted);
+`;
+const MediaOverlay = styled.div `
+  position: absolute;
+  left: 18px;
+  right: 18px;
+  bottom: 18px;
+  display: flex;
+  justify-content: flex-start;
+  pointer-events: auto;
+`;
+const CardBody = styled.div `
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+`;
+const HeaderBlock = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const Title = styled.div `
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--viewer-ui-color-text);
+`;
+const MetaRow = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+`;
+const Author = styled.div `
+  font-size: 11px;
+  color: var(--viewer-ui-color-text-muted);
+`;
+const ModePill = styled.div `
+  border-radius: 999px;
+  border: 1px solid var(--viewer-ui-color-panel-border-subtle);
+  padding: 2px 8px;
+  font-size: 9px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--viewer-ui-color-text-subtle);
+`;
+const MetaLine = styled.div `
+  font-size: 10px;
+  line-height: 1.4;
+  color: var(--viewer-ui-color-text-muted);
+`;
+const ActionSlot = styled.div `
+  margin-top: auto;
+  border-top: 1px solid var(--viewer-ui-color-panel-border-subtle);
+  padding-top: 12px;
+`;
+export default function GalleryThumbCard({ title, author, modeLabel, metaLine, imageSrc, onClick, actions, mediaOverlay, className, }) {
+    return (_jsxs(Card, { onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
             ? (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     onClick();
                 }
             }
-            : undefined, className: `relative break-inside-avoid overflow-hidden rounded-[22px] border viewer-ui-kit-border-subtle viewer-ui-kit-surface shadow-[0_8px_18px_rgba(0,0,0,0.14)] transition ${onClick ? 'cursor-pointer hover:border-[var(--viewer-ui-color-panel-border)]' : ''} ${className || ''}`, children: [_jsx("div", { className: "relative overflow-hidden rounded-[20px] border viewer-ui-kit-border-subtle viewer-ui-kit-surface", children: _jsx("img", { src: imageSrc, alt: title, className: "h-auto w-full object-cover", draggable: false }) }), _jsxs("div", { className: "p-4", children: [_jsx("div", { className: "text-[14px] viewer-ui-kit-text normal-case", children: title }), author ? _jsx("div", { className: "mt-1 text-[11px] viewer-ui-kit-text-muted normal-case", children: author }) : null, metaLine ? _jsx("div", { className: "mt-1 text-[10px] viewer-ui-kit-text-muted normal-case", children: metaLine }) : null, modeLabel ? _jsx("div", { className: "mt-2 text-[10px] uppercase tracking-[0.2em] viewer-ui-kit-text-subtle", children: modeLabel }) : null] }), actions ? _jsx("div", { className: "px-4 pb-4", children: actions }) : null] }));
+            : undefined, className: className, "$interactive": Boolean(onClick), children: [_jsxs(MediaFrame, { children: [_jsx(MediaGlow, {}), _jsx(MediaInset, { children: _jsx(MediaInner, { children: imageSrc ? (_jsx(MediaImage, { src: imageSrc, alt: title, draggable: false, loading: "lazy", decoding: "async" })) : (_jsx(MediaFallback, { children: "image unavailable" })) }) }), mediaOverlay ? (_jsx(MediaOverlay, { onClick: (event) => event.stopPropagation(), children: mediaOverlay })) : null] }), _jsxs(CardBody, { children: [_jsxs(HeaderBlock, { children: [_jsx(Title, { children: title }), author || modeLabel ? (_jsxs(MetaRow, { children: [author ? _jsx(Author, { children: author }) : null, modeLabel ? (_jsx(ModePill, { children: modeLabel })) : null] })) : null, metaLine ? _jsx(MetaLine, { children: metaLine }) : null] }), actions ? (_jsx(ActionSlot, { children: actions })) : null] })] }));
 }

package/dist/ImageReferenceStrip.d.ts

@@ -0,0 +1,9 @@
+import { type ComposerGalleryReferenceImage, type ComposerReferenceImageItem } from '@treasuryspatial/render-kit';
+type ImageReferenceStripProps = {
+    references?: ComposerGalleryReferenceImage[] | null;
+    labelPrefix?: string;
+    onOpen?: (reference: ComposerReferenceImageItem) => void;
+};
+export default function ImageReferenceStrip({ references, labelPrefix, onOpen, }: ImageReferenceStripProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ImageReferenceStrip.d.ts.map

package/dist/ImageReferenceStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageReferenceStrip.d.ts","sourceRoot":"","sources":["../src/ImageReferenceStrip.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,6BAA6B,EAClC,KAAK,0BAA0B,EAChC,MAAM,6BAA6B,CAAC;AA2CrC,KAAK,wBAAwB,GAAG;IAC9B,UAAU,CAAC,EAAE,6BAA6B,EAAE,GAAG,IAAI,CAAC;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,0BAA0B,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,UAAU,EACV,WAAyB,EACzB,MAAM,GACP,EAAE,wBAAwB,kDAmB1B"}

package/dist/ImageReferenceStrip.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { resolveComposerReferenceImageItems, } from '@treasuryspatial/render-kit';
+const Strip = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+const ThumbButton = styled.button `
+  width: 46px;
+  height: 46px;
+  border: 1px solid var(--brand-panel-border, rgba(15, 23, 42, 0.14));
+  border-radius: 10px;
+  padding: 0;
+  overflow: hidden;
+  background: var(--brand-background, #fff);
+  cursor: zoom-in;
+  position: relative;
+`;
+const Thumb = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+`;
+const Badge = styled.span `
+  position: absolute;
+  left: 3px;
+  bottom: 3px;
+  max-width: calc(100% - 6px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.62);
+  color: white;
+  padding: 1px 5px;
+  font-size: 8px;
+  line-height: 1.4;
+`;
+export default function ImageReferenceStrip({ references, labelPrefix = 'reference', onOpen, }) {
+    const items = resolveComposerReferenceImageItems(references);
+    if (items.length === 0)
+        return null;
+    return (_jsx(Strip, { "aria-label": `${labelPrefix} images`, children: items.map((reference, index) => (_jsxs(ThumbButton, { type: "button", onClick: () => onOpen?.(reference), title: `${labelPrefix} ${index + 1}: ${reference.name}`, children: [_jsx(Thumb, { src: reference.thumbUrl || reference.url, alt: reference.name }), _jsx(Badge, { children: index + 1 })] }, reference.id || `${reference.url}-${index}`))) }));
+}

package/dist/PromptDebugPanel.d.ts

@@ -9,8 +9,7 @@ type Props = {
     open: boolean;
     entries: PromptDebugEntry[];
     onToggle: (open: boolean) => void;
-    onOpenEditor?: (entry: PromptDebugEntry) => void;
 };
-export default function PromptDebugPanel({ open, entries, onToggle, onOpenEditor }: Props): import("react/jsx-runtime").JSX.Element;
+export default function PromptDebugPanel({ open, entries, onToggle }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=PromptDebugPanel.d.ts.map

package/dist/PromptDebugPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptDebugPanel.d.ts","sourceRoot":"","sources":["../src/PromptDebugPanel.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;CACvC,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,KAAK,2CAiDxF"}
+{"version":3,"file":"PromptDebugPanel.d.ts","sourceRoot":"","sources":["../src/PromptDebugPanel.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;CACvC,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,CAAC;AAmFF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,KAAK,2CA+B1E"}