@treasuryspatial/prompt-ui-kit 0.1.14 → 0.1.21

package/dist/FeedbackPanel.d.ts

@@ -3,7 +3,26 @@ type FeedbackPanelProps = {
     page?: string;
     title?: string;
     description?: string;
+    roadmap?: FeedbackRoadmapConfig | null;
 };
-export default function FeedbackPanel({ toolId, page, title, description, }: FeedbackPanelProps): import("react/jsx-runtime").JSX.Element;
+type FeedbackRoadmapItem = {
+    id: string;
+    name: string;
+    description?: string;
+    category?: string;
+    status?: string;
+    enabled?: boolean;
+    sortOrder?: number;
+    rank?: number;
+    score?: number;
+};
+type FeedbackRoadmapConfig = {
+    enabled?: boolean;
+    title?: string;
+    description?: string;
+    rankingMode?: string;
+    items?: FeedbackRoadmapItem[];
+};
+export default function FeedbackPanel({ toolId, page, title, description, roadmap, }: FeedbackPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FeedbackPanel.d.ts.map

package/dist/FeedbackPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackPanel.d.ts","sourceRoot":"","sources":["../src/FeedbackPanel.tsx"],"names":[],"mappings":"AAIA,KAAK,kBAAkB,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAKF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAW,EACX,IAAS,EACT,KAAkB,EAClB,WAA+C,GAChD,EAAE,kBAAkB,2CAiJpB"}
+{"version":3,"file":"FeedbackPanel.d.ts","sourceRoot":"","sources":["../src/FeedbackPanel.tsx"],"names":[],"mappings":"AAKA,KAAK,kBAAkB,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;CACxC,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;CAC/B,CAAC;AAyIF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAW,EACX,IAAS,EACT,KAAoC,EACpC,WAAwH,EACxH,OAAc,GACf,EAAE,kBAAkB,2CAuSpB"}

package/dist/FeedbackPanel.js

@@ -1,20 +1,180 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
 const FEEDBACK_IMAGE_LIMIT = 3;
 const FEEDBACK_IMAGE_MAX_BYTES = 5 * 1024 * 1024;
-export default function FeedbackPanel({ toolId = '', page = '', title = 'feedback', description = 'Share bugs, requests, or notes.', }) {
+const TELEMETRY_SESSION_STORAGE_KEY = 'telemetry:session-id';
+const Root = styled.div.attrs({ className: 'viewer-ui-panel-sections' }) `
+  font-family: var(--viewer-ui-font-body, var(--ui-font-family, 'Aenik', 'Aeonik', system-ui, sans-serif));
+`;
+const Section = styled.section.attrs({ className: 'panel-section' }) ``;
+const SectionHeader = styled.div.attrs({ className: 'panel-section-header' }) ``;
+const SectionHeaderCopy = styled.div `
+  min-width: 0;
+`;
+const SectionFields = styled.div.attrs({ className: 'panel-section-fields' }) ``;
+const Textarea = styled.textarea.attrs({ className: 'cfg-textarea' }) `
+  width: 100%;
+  min-height: 136px;
+  resize: vertical;
+  font-family: var(--viewer-ui-font-body, var(--ui-font-family, 'Aenik', 'Aeonik', system-ui, sans-serif));
+
+  &::placeholder {
+    font-family: var(--viewer-ui-font-body, var(--ui-font-family, 'Aenik', 'Aeonik', system-ui, sans-serif));
+    letter-spacing: 0;
+    color: color-mix(in srgb, var(--brand-text-secondary) 72%, white 28%);
+  }
+`;
+const Note = styled.div.attrs({ className: 'panel-section-note' }) ``;
+const DropZone = styled.div `
+  margin-top: 8px;
+  border-radius: 18px;
+  border: 1px dashed ${(props) => (props.$dragActive ? 'var(--brand-primary)' : 'var(--brand-panel-border)')};
+  background: ${(props) => props.$dragActive
+    ? 'color-mix(in srgb, var(--brand-primary) 10%, var(--brand-background) 90%)'
+    : 'var(--brand-background)'};
+  padding: 18px 14px;
+  text-align: center;
+  transition: border-color 0.16s ease, background-color 0.16s ease;
+`;
+const DropButton = styled.button `
+  border: 0;
+  background: transparent;
+  color: var(--brand-text-primary);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: var(--viewer-ui-action-text-case, lowercase);
+`;
+const HiddenFileInput = styled.input `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+`;
+const FileList = styled.div.attrs({ className: 'panel-section-list' }) `
+  margin-top: 10px;
+`;
+const FileRow = styled.div.attrs({ className: 'panel-section-row' }) `
+  font-size: 11px;
+  color: var(--brand-text-secondary);
+`;
+const RemoveButton = styled.button `
+  border: 0;
+  background: transparent;
+  color: var(--brand-primary);
+  cursor: pointer;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+`;
+const Status = styled.div `
+  font-size: 12px;
+  color: ${(props) => props.$tone === 'success' ? 'var(--brand-text-primary)' : 'var(--viewer-ui-color-text-error, #b91c1c)'};
+`;
+const SubmitButton = styled.button.attrs({ className: 'cfg-button cfg-button--primary' }) `
+  width: 100%;
+  font-family: inherit;
+`;
+const RoadmapSection = styled.section.attrs({ className: 'panel-section' }) ``;
+const RoadmapList = styled.div.attrs({ className: 'panel-section-stack' }) ``;
+const RoadmapItem = styled.div.attrs({ className: 'panel-section-group' }) ``;
+const RoadmapItemHeader = styled.div `
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+`;
+const RoadmapItemTitle = styled.h4 ``;
+const RoadmapItemDescription = styled.p ``;
+const RoadmapMeta = styled.div.attrs({ className: 'panel-chip-row' }) ``;
+const RoadmapTag = styled.span `
+  border-radius: 999px;
+  border: 1px solid var(--brand-panel-border);
+  padding: 3px 8px;
+  font-size: 9px;
+  line-height: 1;
+  color: var(--brand-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+`;
+const VoteButton = styled.button.attrs({ className: 'cfg-button cfg-button--secondary cfg-button--compact' }) `
+  flex: 0 0 auto;
+  font-family: inherit;
+`;
+export default function FeedbackPanel({ toolId = '', page = '', title = 'design requests + feedback', description = 'Request new design types, plugins, tools, workflows, features, bug fixes, or visual/render improvements.', roadmap = null, }) {
     const [message, setMessage] = useState('');
     const [status, setStatus] = useState('idle');
     const [error, setError] = useState('');
     const [images, setImages] = useState([]);
     const [imageError, setImageError] = useState('');
     const [dragActive, setDragActive] = useState(false);
+    const [roadmapItems, setRoadmapItems] = useState([]);
+    const [roadmapStatus, setRoadmapStatus] = useState('idle');
+    const [roadmapError, setRoadmapError] = useState('');
+    const [votedFeatureIds, setVotedFeatureIds] = useState(() => new Set());
     const inputRef = useRef(null);
+    const configuredRoadmapItems = (roadmap?.items ?? [])
+        .filter((item) => item && item.enabled !== false && item.id && item.name)
+        .sort((a, b) => {
+        const aOrder = Number.isFinite(Number(a.sortOrder)) ? Number(a.sortOrder) : 9999;
+        const bOrder = Number.isFinite(Number(b.sortOrder)) ? Number(b.sortOrder) : 9999;
+        return aOrder - bOrder || a.name.localeCompare(b.name);
+    });
+    const visibleRoadmapItems = roadmapItems.length > 0 ? roadmapItems : configuredRoadmapItems;
+    useEffect(() => {
+        if (roadmap?.enabled === false || configuredRoadmapItems.length === 0) {
+            setRoadmapItems([]);
+            return;
+        }
+        let cancelled = false;
+        const loadRoadmap = async () => {
+            setRoadmapStatus('loading');
+            setRoadmapError('');
+            try {
+                const response = await fetch('/api/feedback/roadmap', { cache: 'no-store' });
+                const payload = await response.json().catch(() => null);
+                if (!response.ok || !payload?.success) {
+                    throw new Error(payload?.error || 'Failed to load roadmap ranking');
+                }
+                if (cancelled)
+                    return;
+                const rankedItems = Array.isArray(payload?.data?.items) ? payload.data.items : payload?.items;
+                if (Array.isArray(rankedItems) && rankedItems.length > 0) {
+                    setRoadmapItems(rankedItems.filter((item) => item?.enabled !== false && item?.id && item?.name));
+                }
+                else {
+                    setRoadmapItems([]);
+                }
+                setRoadmapStatus('idle');
+            }
+            catch (nextError) {
+                if (cancelled)
+                    return;
+                setRoadmapItems([]);
+                setRoadmapError(nextError?.message || 'Failed to load roadmap ranking');
+                setRoadmapStatus('error');
+            }
+        };
+        void loadRoadmap();
+        return () => {
+            cancelled = true;
+        };
+    }, [roadmap?.enabled, configuredRoadmapItems.map((item) => item.id).join('|')]);
     const addFiles = (fileList) => {
         const incoming = Array.from(fileList);
         const remaining = Math.max(0, FEEDBACK_IMAGE_LIMIT - images.length);
-        const accepted = incoming.filter((file) => file.type.startsWith('image/') && file.size <= FEEDBACK_IMAGE_MAX_BYTES).slice(0, remaining);
+        const accepted = incoming
+            .filter((file) => file.type.startsWith('image/') && file.size <= FEEDBACK_IMAGE_MAX_BYTES)
+            .slice(0, remaining);
         if (accepted.length === 0) {
             setImageError(`Add up to ${FEEDBACK_IMAGE_LIMIT} images under ${Math.round(FEEDBACK_IMAGE_MAX_BYTES / 1024 / 1024)}MB each.`);
             return;
@@ -30,6 +190,55 @@ export default function FeedbackPanel({ toolId = '', page = '', title = 'feedbac
         ]);
     };
     const removeFile = (id) => setImages((prev) => prev.filter((item) => item.id !== id));
+    const voteForRoadmapItem = async (featureId) => {
+        setRoadmapStatus('voting');
+        setRoadmapError('');
+        try {
+            const submissionId = (typeof crypto !== 'undefined' && 'randomUUID' in crypto && crypto.randomUUID()) ||
+                `${Date.now()}-${Math.random().toString(16).slice(2, 10)}`;
+            let telemetrySessionId = '';
+            try {
+                telemetrySessionId = window.sessionStorage.getItem(TELEMETRY_SESSION_STORAGE_KEY) || '';
+            }
+            catch {
+                telemetrySessionId = '';
+            }
+            const response = await fetch('/api/feedback/roadmap', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-submission-id': submissionId,
+                },
+                body: JSON.stringify({
+                    featureId,
+                    submissionId,
+                    telemetrySessionId,
+                    toolId,
+                    page,
+                }),
+            });
+            const payload = await response.json().catch(() => null);
+            if (!response.ok || !payload?.success) {
+                throw new Error(payload?.error || 'Failed to record roadmap vote');
+            }
+            setVotedFeatureIds((current) => {
+                const next = new Set(current);
+                next.add(featureId);
+                return next;
+            });
+            setRoadmapStatus('idle');
+            const reload = await fetch('/api/feedback/roadmap', { cache: 'no-store' });
+            const nextPayload = await reload.json().catch(() => null);
+            const rankedItems = Array.isArray(nextPayload?.data?.items) ? nextPayload.data.items : nextPayload?.items;
+            if (reload.ok && Array.isArray(rankedItems)) {
+                setRoadmapItems(rankedItems.filter((item) => item?.enabled !== false && item?.id && item?.name));
+            }
+        }
+        catch (nextError) {
+            setRoadmapStatus('error');
+            setRoadmapError(nextError?.message || 'Failed to record roadmap vote');
+        }
+    };
     const submit = async () => {
         const trimmed = message.trim();
         if (!trimmed) {
@@ -41,13 +250,29 @@ export default function FeedbackPanel({ toolId = '', page = '', title = 'feedbac
         setError('');
         try {
             const form = new FormData();
+            const submissionId = (typeof crypto !== 'undefined' && 'randomUUID' in crypto && crypto.randomUUID()) ||
+                `${Date.now()}-${Math.random().toString(16).slice(2, 10)}`;
             form.set('message', trimmed);
+            form.set('submissionId', submissionId);
+            form.set('category', 'design-type-feature-feedback');
             if (toolId)
                 form.set('toolId', toolId);
             if (page)
                 form.set('page', page);
+            try {
+                const telemetrySessionId = window.sessionStorage.getItem(TELEMETRY_SESSION_STORAGE_KEY);
+                if (telemetrySessionId)
+                    form.set('telemetrySessionId', telemetrySessionId);
+            }
+            catch {
+                // Ignore storage failures; the server still writes feedback.
+            }
             images.forEach((item) => form.append('images', item.file));
-            const response = await fetch('/api/feedback', { method: 'POST', body: form });
+            const response = await fetch('/api/feedback', {
+                method: 'POST',
+                body: form,
+                headers: { 'x-submission-id': submissionId },
+            });
             const payload = await response.json().catch(() => null);
             if (!response.ok || !payload?.success)
                 throw new Error(payload?.error || 'Failed to send feedback');
@@ -60,26 +285,27 @@ export default function FeedbackPanel({ toolId = '', page = '', title = 'feedbac
             setError(nextError?.message || 'Failed to send feedback');
         }
     };
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[16px] font-semibold tracking-[0.01em] text-[var(--viewer-ui-color-text-strong)]", children: title }), _jsx("p", { className: "mt-1 text-[12px] text-[var(--viewer-ui-color-text-muted)] leading-relaxed", children: description })] }), _jsx("textarea", { value: message, onChange: (event) => {
-                    setMessage(event.target.value);
-                    if (status !== 'idle') {
-                        setStatus('idle');
-                        setError('');
-                    }
-                }, rows: 6, placeholder: "Share feedback, feature requests, or issues.", className: "w-full rounded-xl border border-[var(--viewer-ui-color-button-secondary)] bg-[var(--viewer-ui-color-panel-bg)] text-[var(--viewer-ui-color-text-strong)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--viewer-ui-color-focus)]" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "text-xs text-[var(--viewer-ui-color-text-muted)] normal-case", children: ["Add up to ", FEEDBACK_IMAGE_LIMIT, " screenshots (max ", Math.round(FEEDBACK_IMAGE_MAX_BYTES / 1024 / 1024), "MB each)."] }), _jsxs("div", { onDragOver: (event) => {
-                            event.preventDefault();
-                            setDragActive(true);
-                        }, onDragLeave: () => setDragActive(false), onDrop: (event) => {
-                            event.preventDefault();
-                            setDragActive(false);
-                            if (event.dataTransfer?.files?.length)
-                                addFiles(event.dataTransfer.files);
-                        }, className: `rounded-xl border border-dashed px-4 py-4 text-center text-sm transition ${dragActive
-                            ? 'border-[var(--viewer-ui-color-button-primary)] bg-[var(--viewer-ui-color-button-primary)]/10 text-[var(--viewer-ui-color-text-strong)]'
-                            : 'border-[var(--viewer-ui-color-button-secondary)] text-[var(--viewer-ui-color-text-muted)]'}`, children: [_jsx("input", { ref: inputRef, type: "file", accept: "image/*", multiple: true, className: "hidden", onChange: (event) => {
-                                    if (event.target.files?.length) {
-                                        addFiles(event.target.files);
-                                        event.target.value = '';
+    return (_jsxs(Root, { children: [_jsxs(Section, { "data-panel-id": "feedback-request", children: [_jsx(SectionHeader, { children: _jsxs(SectionHeaderCopy, { children: [_jsx("h3", { children: title }), _jsx("p", { children: description })] }) }), _jsxs(SectionFields, { children: [_jsx(Textarea, { value: message, onChange: (event) => {
+                                    setMessage(event.target.value);
+                                    if (status !== 'idle') {
+                                        setStatus('idle');
+                                        setError('');
                                     }
-                                } }), _jsx("button", { type: "button", onClick: () => inputRef.current?.click(), className: "text-[12px] font-semibold uppercase tracking-[0.08em] text-[var(--viewer-ui-color-text-strong)]", children: "drop screenshots here or click to upload" })] }), imageError ? _jsx("div", { className: "text-xs text-[var(--viewer-ui-color-button-primary)]", children: imageError }) : null, images.length > 0 ? (_jsx("div", { className: "space-y-1", children: images.map((item) => (_jsxs("div", { className: "flex items-center justify-between rounded-lg border viewer-ui-kit-border-subtle viewer-ui-kit-surface px-3 py-2 text-xs viewer-ui-kit-text-muted", children: [_jsx("span", { className: "truncate", children: item.file.name }), _jsx("button", { type: "button", onClick: () => removeFile(item.id), className: "text-[11px] uppercase tracking-[0.2em] text-[var(--viewer-ui-color-button-primary)] hover:text-[var(--viewer-ui-color-button-secondary)]", children: "remove" })] }, item.id))) })) : null] }), status === 'error' ? _jsx("div", { className: "text-xs text-[var(--viewer-ui-color-button-primary)]", children: error || 'Failed to send feedback.' }) : null, status === 'success' ? _jsx("div", { className: "text-xs text-[var(--viewer-ui-color-button-secondary)]", children: "Thanks \u2014 we received your feedback." }) : null, _jsx("button", { type: "button", onClick: () => void submit(), disabled: status === 'sending', className: "w-full rounded-full px-4 py-2.5 text-[12px] font-semibold uppercase tracking-[0.08em] bg-[var(--viewer-ui-color-button-secondary)] text-[var(--viewer-ui-color-text-strong)] hover:bg-[var(--viewer-ui-color-button-primary)] disabled:opacity-60 disabled:cursor-not-allowed transition-colors", children: status === 'sending' ? 'sending…' : 'send feedback' })] }));
+                                }, rows: 6, placeholder: "Ask for a new design type, plugin, workflow, feature, or fix. Include what you want to make and what output should change." }), _jsxs("div", { children: [_jsxs(Note, { children: ["Add up to ", FEEDBACK_IMAGE_LIMIT, " screenshots (max ", Math.round(FEEDBACK_IMAGE_MAX_BYTES / 1024 / 1024), "MB each)."] }), _jsxs(DropZone, { "$dragActive": dragActive, onDragOver: (event) => {
+                                            event.preventDefault();
+                                            setDragActive(true);
+                                        }, onDragLeave: () => setDragActive(false), onDrop: (event) => {
+                                            event.preventDefault();
+                                            setDragActive(false);
+                                            if (event.dataTransfer?.files?.length)
+                                                addFiles(event.dataTransfer.files);
+                                        }, children: [_jsx(HiddenFileInput, { ref: inputRef, type: "file", accept: "image/*", multiple: true, onChange: (event) => {
+                                                    if (event.target.files?.length) {
+                                                        addFiles(event.target.files);
+                                                        event.target.value = '';
+                                                    }
+                                                } }), _jsx(DropButton, { type: "button", onClick: () => inputRef.current?.click(), children: "drop screenshots here or click to upload" })] }), imageError ? _jsx(Status, { "$tone": "error", style: { marginTop: '8px' }, children: imageError }) : null, images.length > 0 ? (_jsx(FileList, { children: images.map((item) => (_jsxs(FileRow, { children: [_jsx("span", { className: "truncate", children: item.file.name }), _jsx(RemoveButton, { type: "button", onClick: () => removeFile(item.id), children: "remove" })] }, item.id))) })) : null] }), status === 'error' ? _jsx(Status, { "$tone": "error", children: error || 'Failed to send feedback.' }) : null, status === 'success' ? _jsx(Status, { "$tone": "success", children: "Thanks \u2014 we received your feedback." }) : null, _jsx(SubmitButton, { type: "button", onClick: () => void submit(), disabled: status === 'sending', children: status === 'sending' ? 'sending...' : 'send request' })] })] }), roadmap?.enabled !== false && visibleRoadmapItems.length > 0 ? (_jsxs(RoadmapSection, { "data-panel-id": "feedback-roadmap", children: [_jsx(SectionHeader, { children: _jsxs(SectionHeaderCopy, { children: [_jsx("h3", { children: roadmap?.title || 'roadmap priorities' }), roadmap?.description ? _jsx("p", { children: roadmap.description }) : null] }) }), roadmapStatus === 'error' && roadmapError ? _jsx(Status, { "$tone": "error", children: roadmapError }) : null, _jsx(RoadmapList, { children: visibleRoadmapItems.map((item) => {
+                            const voted = votedFeatureIds.has(item.id);
+                            return (_jsxs(RoadmapItem, { children: [_jsxs(RoadmapItemHeader, { children: [_jsxs("div", { children: [_jsx(RoadmapItemTitle, { children: item.name }), item.description ? _jsx(RoadmapItemDescription, { children: item.description }) : null] }), _jsx(VoteButton, { type: "button", onClick: () => void voteForRoadmapItem(item.id), disabled: roadmapStatus === 'voting' || voted, children: voted ? 'noted' : 'vote' })] }), item.category || item.status ? (_jsxs(RoadmapMeta, { children: [item.category ? _jsx(RoadmapTag, { children: item.category }) : null, item.status ? _jsx(RoadmapTag, { children: item.status }) : null] })) : null] }, item.id));
+                        }) })] })) : null] }));
 }

package/dist/FullscreenImage.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 type ActionConfig = {
     label: string;
     onClick?: () => void;
@@ -11,6 +12,13 @@ type EditableTitleConfig = {
     onSave: () => void;
     status?: 'idle' | 'saving' | 'saved' | 'error';
 };
+export type FullscreenDetailPanelConfig = {
+    id: string;
+    label: string;
+    description?: string;
+    content: ReactNode;
+    defaultOpen?: boolean;
+};
 type FullscreenImageProps = {
     open: boolean;
     src: string;
@@ -26,8 +34,11 @@ type FullscreenImageProps = {
     onClose: () => void;
     primaryAction?: ActionConfig | null;
     secondaryAction?: ActionConfig | null;
+    extraActions?: ActionConfig[];
     editableTitle?: EditableTitleConfig | null;
+    detailPanels?: FullscreenDetailPanelConfig[];
+    statusText?: string | null;
 };
-export default function FullscreenImage({ open, src, alt, title, subtitle, modeLabel, prompt, promptManifest, createdAt, publicUrl, copyUrl, onClose, primaryAction, secondaryAction, editableTitle, }: FullscreenImageProps): import("react/jsx-runtime").JSX.Element | null;
+export default function FullscreenImage({ open, src, alt, title, subtitle, modeLabel, createdAt, publicUrl, copyUrl, onClose, primaryAction, secondaryAction, extraActions, editableTitle, detailPanels, statusText, }: FullscreenImageProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=FullscreenImage.d.ts.map

package/dist/FullscreenImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FullscreenImage.d.ts","sourceRoot":"","sources":["../src/FullscreenImage.tsx"],"names":[],"mappings":"AAIA,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;CAChD,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;CAC5C,CAAC;AASF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAI,EACJ,GAAG,EACH,GAAa,EACb,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAM,EACN,cAAc,EACd,SAAS,EACT,SAAS,EACT,OAAO,EACP,OAAO,EACP,aAAa,EACb,eAAe,EACf,aAAa,GACd,EAAE,oBAAoB,kDAoItB"}
+{"version":3,"file":"FullscreenImage.d.ts","sourceRoot":"","sources":["../src/FullscreenImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrE,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,YAAY,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAE,2BAA2B,EAAE,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B,CAAC;AAoRF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAI,EACJ,GAAG,EACH,GAAa,EACb,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,OAAO,EACP,OAAO,EACP,aAAa,EACb,eAAe,EACf,YAAiB,EACjB,aAAa,EACb,YAAiB,EACjB,UAAU,GACX,EAAE,oBAAoB,kDAiNtB"}