@treasuryspatial/prompt-ui-kit 0.1.14 → 0.1.21

package/dist/createRenderHistoryActions.d.ts

@@ -0,0 +1,11 @@
+import type { RenderHistoryAction } from './RenderHistoryPanel.js';
+import type { RenderLightboxState } from './useRenderLightbox.js';
+type LightboxActionBridge = Pick<RenderLightboxState, 'open' | 'copyPrompt' | 'shareImage' | 'copyPublicLink' | 'copyImageLink' | 'downloadImage' | 'restartFromSnapshot' | 'submitToGallery'>;
+export type CreateRenderHistoryActionsOptions = {
+    lightbox: LightboxActionBridge;
+    galleryActionLabel?: string;
+    includeGalleryAction?: boolean;
+};
+export declare const createRenderHistoryActions: ({ lightbox, galleryActionLabel, includeGalleryAction, }: CreateRenderHistoryActionsOptions) => RenderHistoryAction[];
+export {};
+//# sourceMappingURL=createRenderHistoryActions.d.ts.map

package/dist/createRenderHistoryActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createRenderHistoryActions.d.ts","sourceRoot":"","sources":["../src/createRenderHistoryActions.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAsB,MAAM,yBAAyB,CAAC;AACvF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,KAAK,oBAAoB,GAAG,IAAI,CAC9B,mBAAmB,EACjB,MAAM,GACN,YAAY,GACZ,YAAY,GACZ,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,qBAAqB,GACrB,iBAAiB,CACpB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG;IAC9C,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,yDAIxC,iCAAiC,KAAG,mBAAmB,EAgEzD,CAAC"}

package/dist/createRenderHistoryActions.js

@@ -0,0 +1,63 @@
+'use client';
+export const createRenderHistoryActions = ({ lightbox, galleryActionLabel = 'propose to gallery', includeGalleryAction = true, }) => {
+    const actions = [
+        {
+            id: 'copy-public-link',
+            label: 'copy image page link',
+            onSelect: (entry) => {
+                void lightbox.copyPublicLink(entry, entry.outputImage);
+            },
+            disabled: (entry) => !(entry.storage?.key || entry.outputImage),
+            variant: 'secondary',
+        },
+        {
+            id: 'copy-image-link',
+            label: 'copy direct image url',
+            onSelect: (entry) => {
+                void lightbox.copyImageLink(entry, entry.outputImage);
+            },
+            disabled: (entry) => !(entry.storage?.key || entry.storage?.url || entry.outputImage),
+            variant: 'secondary',
+        },
+        {
+            id: 'download-image',
+            label: 'download image',
+            onSelect: (entry) => {
+                lightbox.downloadImage(entry, entry.outputImage);
+            },
+            disabled: (entry) => !(entry.storage?.key || entry.storage?.url || entry.outputImage),
+            variant: 'secondary',
+        },
+        {
+            id: 'copy-prompt',
+            label: 'copy prompt',
+            onSelect: (entry) => {
+                void lightbox.copyPrompt(entry);
+            },
+            disabled: (entry) => !(entry.fullPrompt || entry.prompt),
+            variant: 'secondary',
+        },
+    ];
+    actions.push({
+        id: 'restart-from-snapshot',
+        label: 'restart from snapshot',
+        onSelect: (entry) => {
+            void lightbox.restartFromSnapshot(entry);
+        },
+        disabled: (entry) => !(entry.snapshot || entry.snapshotId),
+        variant: 'secondary',
+    });
+    if (includeGalleryAction) {
+        actions.push({
+            id: 'submit-gallery',
+            label: galleryActionLabel,
+            onSelect: (entry) => {
+                lightbox.open(entry, entry.outputImage, entry.title || 'render output');
+                void lightbox.submitToGallery(entry, entry.outputImage);
+            },
+            disabled: (entry) => !(entry.storage?.bucket && entry.storage?.key),
+            variant: 'primary',
+        });
+    }
+    return actions;
+};

package/dist/imageDetailPanels.d.ts

@@ -0,0 +1,14 @@
+import { type ComposerGallerySnapshot } from '@treasuryspatial/render-kit';
+import type { FullscreenDetailPanelConfig } from './FullscreenImage.js';
+type ImageDetailSource = {
+    title?: string | null;
+    modeLabel?: string | null;
+    createdAt?: string | null;
+    prompt?: string | null;
+    promptManifest?: Record<string, unknown> | null;
+    snapshot?: ComposerGallerySnapshot | null;
+    detailWarnings?: string[] | null;
+};
+export declare const buildImageDetailPanels: ({ title, modeLabel, createdAt, prompt, promptManifest, snapshot, detailWarnings, }: ImageDetailSource) => FullscreenDetailPanelConfig[];
+export {};
+//# sourceMappingURL=imageDetailPanels.d.ts.map

package/dist/imageDetailPanels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageDetailPanels.d.ts","sourceRoot":"","sources":["../src/imageDetailPanels.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,uBAAuB,EAE7B,MAAM,6BAA6B,CAAC;AAErC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AAExE,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;CAClC,CAAC;AAqJF,eAAO,MAAM,sBAAsB,GAAI,oFAQpC,iBAAiB,KAAG,2BAA2B,EAkBjD,CAAC"}

package/dist/imageDetailPanels.js

@@ -0,0 +1,128 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { buildImageDetailModel, } from '@treasuryspatial/render-kit';
+const SectionStack = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+const FieldsGrid = styled.div `
+  display: grid;
+  gap: 8px;
+
+  @media (min-width: 640px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+`;
+const FieldCard = styled.div `
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.04);
+  padding: 10px 12px;
+`;
+const FieldLabel = styled.div `
+  font-size: 10px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.45);
+`;
+const FieldValue = styled.div `
+  margin-top: 4px;
+  white-space: pre-wrap;
+  font-size: 12px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.82);
+`;
+const WarningsStack = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const WarningCard = styled.div `
+  border-radius: 12px;
+  border: 1px solid rgba(252, 211, 77, 0.25);
+  background: rgba(252, 211, 77, 0.1);
+  padding: 10px 12px;
+  font-size: 11px;
+  line-height: 1.6;
+  color: #fef3c7;
+`;
+const RawDetails = styled.details `
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(0, 0, 0, 0.35);
+  padding: 12px;
+`;
+const RawSummary = styled.summary `
+  cursor: pointer;
+  font-size: 10px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.45);
+`;
+const RawPre = styled.pre `
+  margin-top: 12px;
+  max-height: 18rem;
+  overflow: auto;
+  white-space: pre-wrap;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.45);
+  padding: 12px;
+  font-size: 10px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.65);
+`;
+const TextBlock = styled.pre `
+  white-space: pre-wrap;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.04);
+  padding: 12px;
+  font-size: 11px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.8);
+`;
+const jsonBlock = (value) => {
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return '';
+    }
+};
+const renderFields = (fields) => {
+    if (!fields?.length)
+        return null;
+    return (_jsx(FieldsGrid, { children: fields.map((item) => (_jsxs(FieldCard, { children: [_jsx(FieldLabel, { children: item.label }), _jsx(FieldValue, { children: item.value })] }, `${item.label}-${item.value}`))) }));
+};
+const renderWarnings = (warnings) => {
+    if (!warnings?.length)
+        return null;
+    return (_jsx(WarningsStack, { children: warnings.map((warning) => (_jsx(WarningCard, { children: warning }, warning))) }));
+};
+const renderRaw = (section) => {
+    if (section.raw === undefined || section.raw === null)
+        return null;
+    return (_jsxs(RawDetails, { children: [_jsx(RawSummary, { children: section.rawLabel || 'raw payload' }), _jsx(RawPre, { children: jsonBlock(section.raw) })] }));
+};
+const renderSection = (section) => (_jsxs(SectionStack, { children: [renderWarnings(section.warnings), section.text ? (_jsx(TextBlock, { children: section.text })) : null, renderFields(section.fields), renderRaw(section)] }));
+export const buildImageDetailPanels = ({ title, modeLabel, createdAt, prompt, promptManifest, snapshot, detailWarnings, }) => {
+    const model = buildImageDetailModel({
+        title,
+        modeLabel,
+        createdAt,
+        prompt,
+        promptManifest,
+        snapshot,
+        detailWarnings,
+    });
+    return model.sections.map((section) => ({
+        id: section.id,
+        label: section.label,
+        description: section.description,
+        defaultOpen: section.defaultOpen,
+        content: renderSection(section),
+    }));
+};

package/dist/index.d.ts

@@ -1,14 +1,20 @@
 export { default as RenderPanel } from './RenderPanel.js';
 export { default as FeedbackPanel } from './FeedbackPanel.js';
 export { default as FullscreenImage } from './FullscreenImage.js';
+export type { FullscreenDetailPanelConfig } from './FullscreenImage.js';
 export { default as RenderLightboxModal } from './RenderLightboxModal.js';
 export { default as GalleryThumbCard } from './GalleryThumbCard.js';
 export { default as RenderHistoryPanel } from './RenderHistoryPanel.js';
-export type { RenderHistoryEntry } from './RenderHistoryPanel.js';
+export { default as RenderImageStage } from './RenderImageStage.js';
+export { default as ImageReferenceStrip } from './ImageReferenceStrip.js';
+export type { RenderHistoryAction, RenderHistoryEntry } from './RenderHistoryPanel.js';
+export { createRenderHistoryActions } from './createRenderHistoryActions.js';
+export type { CreateRenderHistoryActionsOptions } from './createRenderHistoryActions.js';
 export { useRenderLightbox } from './useRenderLightbox.js';
 export { useRenderImageFlow } from './useRenderImageFlow.js';
 export type { RenderLightboxStatus, RenderLightboxState, UseRenderLightboxOptions } from './useRenderLightbox.js';
 export type { RenderImageFlowEntry, RenderImageFlowState, UseRenderImageFlowOptions } from './useRenderImageFlow.js';
 export { default as PromptDebugPanel } from './PromptDebugPanel.js';
 export type { PromptDebugEntry } from './PromptDebugPanel.js';
+export { buildImageDetailPanels } from './imageDetailPanels.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACxE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAClH,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACrH,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,YAAY,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,YAAY,EAAE,iCAAiC,EAAE,MAAM,iCAAiC,CAAC;AACzF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAClH,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACrH,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -4,6 +4,10 @@ export { default as FullscreenImage } from './FullscreenImage.js';
 export { default as RenderLightboxModal } from './RenderLightboxModal.js';
 export { default as GalleryThumbCard } from './GalleryThumbCard.js';
 export { default as RenderHistoryPanel } from './RenderHistoryPanel.js';
+export { default as RenderImageStage } from './RenderImageStage.js';
+export { default as ImageReferenceStrip } from './ImageReferenceStrip.js';
+export { createRenderHistoryActions } from './createRenderHistoryActions.js';
 export { useRenderLightbox } from './useRenderLightbox.js';
 export { useRenderImageFlow } from './useRenderImageFlow.js';
 export { default as PromptDebugPanel } from './PromptDebugPanel.js';
+export { buildImageDetailPanels } from './imageDetailPanels.js';