@treasuryspatial/prompt-ui-kit 0.1.15 → 0.1.21

package/dist/RenderPanel.js

@@ -1,7 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-export default function RenderPanel({ isImagineMode, activeTab, promptPack, promptFieldBindings, locationOptions, timeOptions, imageStyleOptions: _imageStyleOptions, styleOptions: _styleOptions, renderLocation, onLocationChange, renderTimeOfDay, onTimeOfDayChange, renderImageStyle, onImageStyleChange, renderStyle, onStyleChange, renderPrompt, onRenderPromptChange, hasPromptScaffold, renderToggles, eraToggleRules, toggleLabels: _toggleLabels, onToggleChange, renderBusy, renderHasGenerated, renderOutputImage, onCaptureRender, renderButtonLabel = 'capture + render', adaptPrompt, onAdaptPromptChange, onAdaptRender, renderFeatureEnabled, onRenderFeatureEnabledChange, renderReferenceMode, onRenderReferenceModeChange, renderReferenceImages, adaptFeatureEnabled, onAdaptFeatureEnabledChange, adaptReferenceMode, onAdaptReferenceModeChange, adaptReferenceImages, styleReferenceLimit, onRenderReferenceImagesAdd, onRenderReferenceImageRemove, onAdaptReferenceImagesAdd, onAdaptReferenceImageRemove, renderError, renderStatus, renderPromptHistory, adaptPromptHistory, fullPromptHistory, blockedDesigners = [], featureRoofType, onFeatureRoofTypeChange, featureRoofscape, onFeatureRoofscapeChange, featureRoofMaterials, onFeatureRoofMaterialsChange, featureMassingHeight, onFeatureMassingHeightChange, featureMassingPerimeter, onFeatureMassingPerimeterChange, featureMassingForm, onFeatureMassingFormChange, featureMassingDiversity, onFeatureMassingDiversityChange, featureMassingDimensions, onFeatureMassingDimensionsChange, featureBuildingProgram, onFeatureBuildingProgramChange, featureCourtyardProgram, onFeatureCourtyardProgramChange, featureMaterialsPrimary, onFeatureMaterialsPrimaryChange, featureMaterialsGround, onFeatureMaterialsGroundChange, featureMaterialsUpper, onFeatureMaterialsUpperChange, featureFacadeVariation, onFeatureFacadeVariationChange, featureFacadeBays, onFeatureFacadeBaysChange, featurePublicRealmStreet, onFeaturePublicRealmStreetChange, viewpointPreset, onViewpointPresetChange, viewVariationMode, onViewVariationModeChange, viewComposition, onViewCompositionChange, canCreateImageSet, onCreateImageSet, imageSetBusy, renderLimitRemaining, adaptOpen, onAdaptOpenChange, showTaskBlockToggle = false, taskBlockEnabled = true, onTaskBlockEnabledChange, }) {
+import { createUiAudio, playUiAudio, resolveOptionSource } from '@treasuryspatial/render-kit';
+import FullscreenImage from './FullscreenImage.js';
+export default function RenderPanel({ isImagineMode, activeTab, promptPack, promptFieldBindings, locationOptions, timeOptions, imageStyleOptions: _imageStyleOptions, styleOptions: _styleOptions, renderLocation, onLocationChange, renderTimeOfDay, onTimeOfDayChange, renderImageStyle, onImageStyleChange, renderStyle, onStyleChange, renderPrompt, onRenderPromptChange, hasPromptBlocks, renderToggles, eraToggleRules, toggleLabels: _toggleLabels, onToggleChange, renderBusy, renderHasGenerated, renderOutputImage, renderProvider = 'gemini', renderProviderToggleEnabled = false, onRenderProviderChange, hasRenderInteractionContext = false, onCaptureRender, renderButtonLabel = 'capture + render', adaptPrompt, onAdaptPromptChange, onAdaptRender, renderFeatureEnabled, onRenderFeatureEnabledChange, renderReferenceMode, onRenderReferenceModeChange, renderReferenceImages, adaptFeatureEnabled, onAdaptFeatureEnabledChange, adaptReferenceMode, onAdaptReferenceModeChange, adaptReferenceImages, styleReferenceLimit, onRenderReferenceImagesAdd, onRenderReferenceImageRemove, onAdaptReferenceImagesAdd, onAdaptReferenceImageRemove, renderError, renderStatus, renderPromptHistory, adaptPromptHistory, fullPromptHistory, blockedDesigners = [], featureRoofType, onFeatureRoofTypeChange, featureRoofscape, onFeatureRoofscapeChange, featureRoofMaterials, onFeatureRoofMaterialsChange, featureMassingHeight, onFeatureMassingHeightChange, featureMassingPerimeter, onFeatureMassingPerimeterChange, featureMassingForm, onFeatureMassingFormChange, featureMassingDiversity, onFeatureMassingDiversityChange, featureMassingDimensions, onFeatureMassingDimensionsChange, featureBuildingProgram, onFeatureBuildingProgramChange, featureCourtyardProgram, onFeatureCourtyardProgramChange, featureMaterialsPrimary, onFeatureMaterialsPrimaryChange, featureMaterialsGround, onFeatureMaterialsGroundChange, featureMaterialsUpper, onFeatureMaterialsUpperChange, featureFacadeVariation, onFeatureFacadeVariationChange, featureFacadeBays, onFeatureFacadeBaysChange, featurePublicRealmStreet, onFeaturePublicRealmStreetChange, cameraProfile, onCameraProfileChange, cameraVariation, onCameraVariationChange, imageFormat, onImageFormatChange, canCreateImageSet, onCreateImageSet, imageSetBusy, renderLimitRemaining, adaptOpen, onAdaptOpenChange, }) {
     const PROMPT_PACK = promptPack;
     const [renderDropActive, setRenderDropActive] = useState(false);
     const [adaptDropActive, setAdaptDropActive] = useState(false);
@@ -20,22 +22,61 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
     const [styleRequestOpen, setStyleRequestOpen] = useState(false);
     const [styleRequestValue, setStyleRequestValue] = useState('');
     const [styleRequestStatus, setStyleRequestStatus] = useState('idle');
+    const [activeReferenceImage, setActiveReferenceImage] = useState(null);
     const styleOptions = useMemo(() => _styleOptions ?? [], [_styleOptions]);
-    const createAudio = useMemo(() => (src, volume = 0.35) => {
-        if (typeof Audio === 'undefined')
-            return null;
-        const audio = new Audio(src);
-        audio.volume = volume;
-        return audio;
-    }, []);
-    const renderClickSound = useMemo(() => createAudio('/sfx/render-start.wav'), [createAudio]);
-    const adaptClickSound = useMemo(() => createAudio('/sfx/adapt-chime.wav'), [createAudio]);
-    const promptSelectSound = useMemo(() => createAudio('/sfx/prompt-select.wav', 0.25), [createAudio]);
+    const renderClickSound = useMemo(() => createUiAudio('/sfx/render-start.wav', { volume: 0.35 }), []);
+    const adaptClickSound = useMemo(() => createUiAudio('/sfx/adapt-chime.wav', { volume: 0.35 }), []);
+    const promptSelectSound = useMemo(() => createUiAudio('/sfx/prompt-select.wav', { volume: 0.25 }), []);
     const packPanels = useMemo(() => PROMPT_PACK.ui?.panels ?? [], [PROMPT_PACK]);
+    const defaultVariationValue = PROMPT_PACK.mode === 'design' ? 'deterministic' : 'variation';
     const [panelOpen, setPanelOpen] = useState(() => (PROMPT_PACK.ui?.panels ?? []).reduce((acc, panel) => {
         acc[panel.id] = true;
         return acc;
     }, {}));
+    const normalizePromptLabel = (value) => (value || '')
+        .trim()
+        .toLowerCase()
+        .replace(/\s+/g, ' ');
+    const shouldShowGroupLabel = (panel, group) => {
+        const groupFields = group.fields
+            .map((fieldId) => PROMPT_PACK.fields[fieldId])
+            .filter(Boolean);
+        if (groupFields.length !== 1)
+            return true;
+        const field = groupFields[0];
+        const normalizedGroupLabel = normalizePromptLabel(group.label);
+        const normalizedFieldLabel = normalizePromptLabel(field.label ?? field.id);
+        const normalizedPanelLabel = normalizePromptLabel(panel.label);
+        if (!normalizedGroupLabel)
+            return false;
+        if (normalizedGroupLabel === normalizedFieldLabel)
+            return false;
+        if (normalizedGroupLabel === normalizedPanelLabel)
+            return false;
+        return true;
+    };
+    const shouldSuppressFieldLabel = (panel, group, fieldId) => {
+        const groupFields = group.fields
+            .map((candidateId) => PROMPT_PACK.fields[candidateId])
+            .filter(Boolean);
+        if (groupFields.length !== 1)
+            return false;
+        const field = groupFields[0];
+        if (field.id !== fieldId)
+            return false;
+        const normalizedGroupLabel = normalizePromptLabel(group.label);
+        const normalizedFieldLabel = normalizePromptLabel(field.label ?? field.id);
+        if (!normalizedGroupLabel)
+            return false;
+        return normalizedGroupLabel === normalizedFieldLabel;
+    };
+    const getCollapsedPanelGroup = (panel) => {
+        if ((panel.fields?.length ?? 0) > 0)
+            return null;
+        if ((panel.groups?.length ?? 0) !== 1)
+            return null;
+        return panel.groups?.[0] ?? null;
+    };
     useEffect(() => {
         if (!packPanels.length)
             return;
@@ -49,7 +90,6 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
             return next;
         });
     }, [packPanels]);
-    const InfoBadge = (_) => null;
     const downloadTextFile = (filename, contents, mime = 'text/plain') => {
         const blob = new Blob([contents], { type: mime });
         const url = URL.createObjectURL(blob);
@@ -72,10 +112,12 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
         }
     };
     const promptSectionOrder = [
-        { tag: 'task', label: 'Task' },
+        { tag: 'mode_instruction', label: 'Mode instruction' },
+        { tag: 'camera_setup', label: 'Camera setup' },
+        { tag: 'image_format', label: 'Image format' },
         { tag: 'form', label: 'Form' },
-        { tag: 'view', label: 'View' },
-        { tag: 'style', label: 'Style' },
+        { tag: 'image_style', label: 'Image style' },
+        { tag: 'scene_style', label: 'Scene style' },
         { tag: 'program', label: 'Program' },
         { tag: 'context', label: 'Context' },
     ];
@@ -95,7 +137,7 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
                 sections.push({ label, content });
             }
         });
-        const userPrompt = parseTagContent(prompt.prompt, 'user_prompt');
+        const userPrompt = parseTagContent(prompt.prompt, 'user_request') || parseTagContent(prompt.prompt, 'user_prompt');
         if (userPrompt) {
             sections.push({ label: 'User prompt', content: userPrompt });
         }
@@ -134,90 +176,18 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
         if (field.optionSource === 'render-kit:time-of-day') {
             return timeOptions.map((value) => ({ value, label: value.replace(/_/g, ' ') }));
         }
+        if (field.optionSource) {
+            const local = PROMPT_PACK.optionSources?.[field.optionSource];
+            if (local?.length)
+                return local;
+            const resolved = resolveOptionSource(field.optionSource);
+            if (resolved?.length)
+                return resolved;
+        }
         return [];
     };
-    const packFieldBindings = useMemo(() => promptFieldBindings ??
-        ({
-            'form.perimeter': { value: featureMassingPerimeter, set: onFeatureMassingPerimeterChange },
-            'form.geometry': { value: featureMassingForm, set: onFeatureMassingFormChange },
-            'form.diversity': { value: featureMassingDiversity, set: onFeatureMassingDiversityChange },
-            'form.height': { value: featureMassingHeight, set: onFeatureMassingHeightChange },
-            'form.dimensions': { value: featureMassingDimensions, set: onFeatureMassingDimensionsChange },
-            'view.viewpoint': { value: viewpointPreset, set: onViewpointPresetChange },
-            'view.variation': { value: viewVariationMode, set: onViewVariationModeChange },
-            'view.composition': { value: viewComposition, set: onViewCompositionChange },
-            'style.roofType': { value: featureRoofType, set: onFeatureRoofTypeChange },
-            'style.roofscape': { value: featureRoofscape, set: onFeatureRoofscapeChange },
-            'style.roofMaterials': { value: featureRoofMaterials, set: onFeatureRoofMaterialsChange },
-            'style.facadePrimary': { value: featureMaterialsPrimary, set: onFeatureMaterialsPrimaryChange },
-            'style.facadeGround': { value: featureMaterialsGround, set: onFeatureMaterialsGroundChange },
-            'style.facadeUpper': { value: featureMaterialsUpper, set: onFeatureMaterialsUpperChange },
-            'style.facadeVariation': { value: featureFacadeVariation, set: onFeatureFacadeVariationChange },
-            'style.facadeBays': { value: featureFacadeBays, set: onFeatureFacadeBaysChange },
-            'program.building': { value: featureBuildingProgram, set: onFeatureBuildingProgramChange },
-            'program.courtyard': { value: featureCourtyardProgram, set: onFeatureCourtyardProgramChange },
-            'program.street': { value: featurePublicRealmStreet, set: onFeaturePublicRealmStreetChange },
-            'toggle.landscaping': { value: renderToggles.landscaping, set: (next) => setToggleValue('landscaping', next) },
-            'toggle.people': { value: renderToggles.people, set: (next) => setToggleValue('people', next) },
-            'toggle.bicycles': { value: renderToggles.bicycles, set: (next) => setToggleValue('bicycles', next) },
-            'toggle.cars': { value: renderToggles.cars, set: (next) => setToggleValue('cars', next) },
-            'toggle.trams': { value: renderToggles.trams, set: (next) => setToggleValue('trams', next) },
-            'toggle.tech': { value: renderToggles.tech, set: (next) => setToggleValue('tech', next) },
-            'context.location': { value: renderLocation, set: onLocationChange },
-            'context.timeOfDay': { value: renderTimeOfDay, set: onTimeOfDayChange },
-            'context.imageStyle': { value: renderImageStyle, set: onImageStyleChange },
-            'context.styleReference': { value: renderStyle, set: onStyleChange },
-        }), [
-        promptFieldBindings,
-        featureMassingPerimeter,
-        onFeatureMassingPerimeterChange,
-        featureMassingForm,
-        onFeatureMassingFormChange,
-        featureMassingDiversity,
-        onFeatureMassingDiversityChange,
-        featureMassingHeight,
-        onFeatureMassingHeightChange,
-        featureMassingDimensions,
-        onFeatureMassingDimensionsChange,
-        viewpointPreset,
-        onViewpointPresetChange,
-        viewVariationMode,
-        onViewVariationModeChange,
-        viewComposition,
-        onViewCompositionChange,
-        featureRoofType,
-        onFeatureRoofTypeChange,
-        featureRoofscape,
-        onFeatureRoofscapeChange,
-        featureRoofMaterials,
-        onFeatureRoofMaterialsChange,
-        featureMaterialsPrimary,
-        onFeatureMaterialsPrimaryChange,
-        featureMaterialsGround,
-        onFeatureMaterialsGroundChange,
-        featureMaterialsUpper,
-        onFeatureMaterialsUpperChange,
-        featureFacadeVariation,
-        onFeatureFacadeVariationChange,
-        featureFacadeBays,
-        onFeatureFacadeBaysChange,
-        featureBuildingProgram,
-        onFeatureBuildingProgramChange,
-        featureCourtyardProgram,
-        onFeatureCourtyardProgramChange,
-        featurePublicRealmStreet,
-        onFeaturePublicRealmStreetChange,
-        renderToggles,
-        renderLocation,
-        onLocationChange,
-        renderTimeOfDay,
-        onTimeOfDayChange,
-        renderImageStyle,
-        onImageStyleChange,
-        renderStyle,
-        onStyleChange,
-    ]);
-    const renderPackField = (fieldId) => {
+    const packFieldBindings = useMemo(() => promptFieldBindings ?? {}, [promptFieldBindings]);
+    const renderPackField = (fieldId, fieldOptions = {}) => {
         const field = PROMPT_PACK.fields[fieldId];
         const binding = packFieldBindings[fieldId];
         if (!field || !binding)
@@ -225,40 +195,53 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
         const options = resolvePackOptions(field);
         const label = field.label ?? field.id;
         const description = field.description ?? '';
+        const showLabel = !fieldOptions.suppressLabel;
         if (field.type === 'toggle' && field.ui === 'chip') {
             return null;
         }
-        if (field.id === 'context.styleReference') {
+        if (field.id.endsWith('styleReference')) {
             const value = typeof binding.value === 'string' ? binding.value : '';
-            return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "block text-[11px] lowercase viewer-ui-kit-text-muted", title: "Optional licensed designer style reference.", children: label }), description ? _jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: description }) : null, _jsxs("select", { value: value, onChange: (event) => {
+            const styleFieldOptions = options.length > 0
+                ? options
+                : styleOptions.map((style) => ({
+                    value: style,
+                    label: style,
+                    detail: 'Licensed Treasury style reference.',
+                }));
+            const selectedStyleOption = styleFieldOptions.find((option) => option.value === value);
+            const detail = selectedStyleOption
+                ? ('detail' in selectedStyleOption ? selectedStyleOption.detail : undefined) ??
+                    ('meta' in selectedStyleOption ? selectedStyleOption.meta?.detail : undefined)
+                : undefined;
+            return (_jsxs("div", { className: "panel-field", children: [showLabel ? (_jsx("label", { className: fieldLabelClass, title: "Optional licensed designer style reference.", children: label })) : null, description ? _jsx("div", { className: fieldDescriptionClass, children: description }) : null, _jsxs("select", { value: value, onChange: (event) => {
                             playPromptSelect();
                             binding.set(event.target.value);
-                        }, className: "w-full px-2 py-1 border rounded text-xs viewer-ui-kit-control", children: [_jsx("option", { value: "", children: "none" }), styleOptions.map((style) => (_jsx("option", { value: style, children: style }, style)))] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("button", { type: "button", onClick: () => setStyleRequestOpen((prev) => !prev), className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: styleRequestOpen ? 'hide style request' : 'request a style' }), styleRequestStatus === 'sending' && (_jsx("span", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: "sending\u2026" })), styleRequestStatus === 'sent' && (_jsx("span", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: "sent" })), styleRequestStatus === 'error' && (_jsx("span", { className: "text-[10px] lowercase viewer-ui-kit-text-error", children: "error" }))] }), styleRequestOpen && (_jsxs("div", { className: "space-y-2 rounded border viewer-ui-kit-border viewer-ui-kit-surface px-3 py-3 text-[11px] viewer-ui-kit-text ", children: [_jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: "request a licensed style reference for this prompt." }), _jsx("textarea", { rows: 2, value: styleRequestValue, onChange: (event) => setStyleRequestValue(event.target.value), className: "w-full rounded border px-2 py-1 text-xs viewer-ui-kit-surface", placeholder: "designer, studio, or reference name" }), _jsx("button", { type: "button", onClick: () => submitStyleRequest(), disabled: !styleRequestValue.trim() || styleRequestStatus === 'sending', className: "w-full rounded px-3 py-2 text-[10px] uppercase tracking-[0.2em] viewer-ui-kit-button viewer-ui-kit-button-secondary", children: "send request" })] }))] }, fieldId));
+                        }, className: "cfg-select", children: [_jsx("option", { value: "", children: "none" }), styleFieldOptions.map((option) => (_jsx("option", { value: option.value, children: option.label }, String(option.value))))] }), detail ? _jsx("div", { className: fieldDescriptionClass, children: String(detail) }) : null, _jsxs("div", { className: utilityRowClass, children: [_jsx("button", { type: "button", onClick: () => setStyleRequestOpen((prev) => !prev), className: utilityButtonClass, children: styleRequestOpen ? 'hide style request' : 'request a style' }), styleRequestStatus === 'sending' && (_jsx("span", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: "sending\u2026" })), styleRequestStatus === 'sent' && (_jsx("span", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: "sent" })), styleRequestStatus === 'error' && (_jsx("span", { className: "text-[10px] lowercase viewer-ui-kit-text-error", children: "error" }))] }), styleRequestOpen && (_jsxs("div", { className: `${subCardClass} text-[11px] viewer-ui-kit-text`, children: [_jsx("textarea", { rows: 2, value: styleRequestValue, onChange: (event) => setStyleRequestValue(event.target.value), className: "cfg-textarea", placeholder: "designer, studio, or reference name" }), _jsx("button", { type: "button", onClick: () => submitStyleRequest(), disabled: !styleRequestValue.trim() || styleRequestStatus === 'sending', className: "cfg-button cfg-button--secondary", children: "send request" })] }))] }, fieldId));
         }
         if (field.type === 'toggle') {
             const active = Boolean(binding.value);
             const toggleKey = field.id.startsWith('toggle.') ? field.id.replace('toggle.', '') : null;
             const disabled = toggleKey ? !eraToggleRules[toggleKey] : false;
-            return (_jsxs("div", { className: "space-y-2", children: [_jsxs("button", { type: "button", onClick: () => {
-                            if (disabled)
-                                return;
-                            playPromptSelect();
-                            binding.set(!active);
-                        }, className: `flex w-full items-center justify-between rounded border px-3 py-2 text-[11px] lowercase transition ${active
-                            ? 'viewer-ui-kit-button viewer-ui-kit-button-primary viewer-ui-kit-border'
-                            : 'viewer-ui-kit-surface viewer-ui-kit-text-muted viewer-ui-kit-border-subtle'} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`, children: [_jsx("span", { children: label }), _jsx("span", { className: "text-[10px] uppercase tracking-[0.2em]", children: active ? 'on' : 'off' })] }), description ? (_jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: description })) : null, disabled ? (_jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: "not available for the current era" })) : null] }, fieldId));
+            return (_jsxs("div", { className: "panel-field panel-field--toggle", children: [showLabel ? _jsx("label", { className: fieldLabelClass, children: label }) : null, _jsx("div", { className: "cfg-toggle-group cfg-toggle-group--single", children: _jsx("button", { type: "button", onClick: () => {
+                                if (disabled)
+                                    return;
+                                playPromptSelect();
+                                binding.set(!active);
+                            }, className: disabled ? 'cfg-toggle opacity-50 cursor-not-allowed' : 'cfg-toggle', "data-active": active, children: active ? 'on' : 'off' }) }), description ? _jsx("div", { className: fieldDescriptionClass, children: description }) : null, disabled ? (_jsx("div", { className: fieldDescriptionClass, children: "not available for the current era" })) : null] }, fieldId));
         }
         if (field.type === 'multi') {
             const list = Array.isArray(binding.value) ? binding.value : [];
-            return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "block text-[11px] lowercase viewer-ui-kit-text-muted", children: label }), description ? _jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: description }) : null, _jsx("div", { className: "flex flex-wrap gap-2", children: options.map((option) => (_jsx("button", { type: "button", onClick: () => {
+            return (_jsxs("div", { className: "panel-field", children: [showLabel ? _jsx("label", { className: fieldLabelClass, children: label }) : null, description ? _jsx("div", { className: fieldDescriptionClass, children: description }) : null, _jsx("div", { className: "panel-chip-row", children: options.map((option) => (_jsx("button", { type: "button", onClick: () => {
                                 playPromptSelect();
                                 toggleList(list, option.value, (next) => binding.set(next));
-                            }, className: chipClass(list.includes(option.value)), title: option.detail ?? option.meta?.detail?.toString() ?? option.label, children: option.label }, `${fieldId}-${option.value}`))) })] }, fieldId));
+                            }, className: "cfg-toggle", "data-active": list.includes(option.value), title: option.detail ?? option.meta?.detail?.toString() ?? option.label, children: option.label }, `${fieldId}-${option.value}`))) })] }, fieldId));
         }
         if (field.type === 'select') {
             const value = typeof binding.value === 'string' ? binding.value : '';
             const hasNone = options.some((option) => option.value === 'none');
-            const showEmpty = !hasNone && field.id !== 'view.variation';
+            const isCameraVariationField = field.id === 'camera.variation';
+            const isCameraProfileField = field.id === 'camera.profile';
+            const showEmpty = !hasNone && !isCameraVariationField;
             const detail = options.find((option) => option.value === value)?.detail ?? options.find((option) => option.value === value)?.meta?.detail;
             const groupOrder = ['Overview', 'Interior', 'Exterior'];
             const groupedOptions = options.reduce((acc, option) => {
@@ -270,26 +253,32 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
                 acc[group].push(option);
                 return acc;
             }, {});
-            const hasGroups = field.id === 'view.viewpoint' && Object.keys(groupedOptions).length > 0;
-            const selectClassName = `w-full px-2 py-1 border rounded text-xs viewer-ui-kit-control ${field.id === 'view.viewpoint' ? 'normal-case' : 'lowercase'}`;
-            return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "block text-[11px] lowercase viewer-ui-kit-text-muted", children: label }), description ? _jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: description }) : null, _jsxs("select", { value: value, onChange: (event) => {
+            const hasGroups = isCameraProfileField && Object.keys(groupedOptions).length > 0;
+            return (_jsxs("div", { className: "panel-field", children: [showLabel ? _jsx("label", { className: fieldLabelClass, children: label }) : null, description ? _jsx("div", { className: fieldDescriptionClass, children: description }) : null, _jsxs("select", { value: value, onChange: (event) => {
                             playPromptSelect();
                             binding.set(event.target.value);
-                        }, className: selectClassName, children: [showEmpty && _jsx("option", { value: "", children: "none" }), hasGroups
+                        }, className: isCameraProfileField ? 'cfg-select normal-case' : 'cfg-select lowercase', children: [showEmpty && _jsx("option", { value: "", children: "none" }), hasGroups
                                 ? groupOrder
                                     .filter((group) => groupedOptions[group]?.length)
                                     .map((group) => (_jsx("optgroup", { label: group, children: groupedOptions[group].map((option) => (_jsx("option", { value: option.value, children: option.label }, `${fieldId}-${option.value}`))) }, `${fieldId}-${group}`)))
-                                : options.map((option) => (_jsx("option", { value: option.value, children: option.label }, `${fieldId}-${option.value}`)))] }), detail ? _jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: detail }) : null] }, fieldId));
+                                : options.map((option) => (_jsx("option", { value: option.value, children: option.label }, `${fieldId}-${option.value}`)))] }), detail ? _jsx("div", { className: fieldDescriptionClass, children: detail }) : null] }, fieldId));
         }
         if (field.type === 'text') {
             const value = typeof binding.value === 'string' ? binding.value : '';
-            return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "block text-[11px] lowercase viewer-ui-kit-text-muted", children: label }), description ? _jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: description }) : null, _jsx("input", { type: "text", value: value, onChange: (event) => binding.set(event.target.value), className: "w-full px-2 py-1 border rounded text-xs viewer-ui-kit-control" })] }, fieldId));
+            return (_jsxs("div", { className: "panel-field", children: [showLabel ? _jsx("label", { className: fieldLabelClass, children: label }) : null, description ? _jsx("div", { className: fieldDescriptionClass, children: description }) : null, _jsx("input", { type: "text", value: value, onChange: (event) => binding.set(event.target.value), className: "cfg-input" })] }, fieldId));
         }
         return null;
     };
-    const chipClass = (active) => `rounded-full px-3 py-1 text-[11px] lowercase border transition ${active
-        ? 'viewer-ui-kit-button viewer-ui-kit-button-primary viewer-ui-kit-border'
-        : 'bg-[var(--viewer-ui-color-tab-bg)] text-[var(--viewer-ui-color-text-muted)] viewer-ui-kit-border-subtle hover:text-[var(--viewer-ui-color-text-strong)]'}`;
+    const utilityButtonClass = 'panel-utility-button';
+    const fieldLabelClass = 'panel-field-label-text';
+    const fieldDescriptionClass = 'panel-field-help';
+    const subCardClass = 'panel-inline-card';
+    const utilityRowClass = 'panel-utility-row';
+    const utilityMetaClass = 'panel-utility-meta';
+    const sectionStackClass = 'panel-section-stack';
+    const sectionGroupActionsClass = 'panel-section-group-actions';
+    const sectionGroupActionsStackClass = 'panel-section-group-actions panel-section-group-actions--stack';
+    const sectionNoteClass = 'panel-section-note';
     const renderToggleChip = (fieldId) => {
         const field = PROMPT_PACK.fields[fieldId];
         const binding = packFieldBindings[fieldId];
@@ -303,7 +292,7 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
                     return;
                 playPromptSelect();
                 binding.set(!active);
-            }, className: `${chipClass(active)} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`, title: field.description ?? field.label ?? field.id, children: field.label ?? field.id }, fieldId));
+            }, className: disabled ? 'cfg-toggle opacity-50 cursor-not-allowed' : 'cfg-toggle', "data-active": active, title: field.description ?? field.label ?? field.id, children: field.label ?? field.id }, fieldId));
     };
     const handleRenderKeyDown = (event) => {
         if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
@@ -319,24 +308,13 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
                 handleAdaptRender();
         }
     };
-    const playSound = (audio) => {
-        if (!audio)
-            return;
-        try {
-            audio.currentTime = 0;
-            void audio.play();
-        }
-        catch {
-            // Ignore audio playback errors.
-        }
-    };
-    const playPromptSelect = () => playSound(promptSelectSound);
+    const playPromptSelect = () => playUiAudio(promptSelectSound);
     const handleCaptureRender = () => {
-        playSound(renderClickSound);
+        playUiAudio(renderClickSound);
         onCaptureRender();
     };
     const handleAdaptRender = () => {
-        playSound(adaptClickSound);
+        playUiAudio(adaptClickSound);
         onAdaptRender();
     };
     const handleRenderDragEnter = (event) => {
@@ -450,17 +428,13 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
     const resolvedTab = activeTab ?? 'all';
     const showRender = resolvedTab === 'render' || resolvedTab === 'all';
     const showPresets = resolvedTab === 'presets' || resolvedTab === 'all';
-    const showContext = resolvedTab === 'context' || resolvedTab === 'all' || (isImagineMode && resolvedTab === 'render');
-    const promptPlaceholder = isImagineMode
-        ? hasPromptScaffold
-            ? 'Optional: add a prompt to refine the render, or rely on the prompt blocks and context below.'
-            : 'Add a prompt (see user guide), and/or use the prompt blocks and viewpoint/context below.'
-        : renderHasGenerated
-            ? 'New render only — captures a fresh screenshot. Use Adapt below to edit the last render.'
-            : hasPromptScaffold
-                ? 'Optional: add a prompt to refine the render, or rely on the prompt blocks and context below.'
-                : 'Add a prompt (see user guide), and/or use the prompt blocks and viewpoint/context below.';
-    const adaptPlaceholder = 'Describe changes to the last render';
+    const showContext = resolvedTab === 'context' || resolvedTab === 'all' || resolvedTab === 'render';
+    const promptPlaceholder = 'render prompt';
+    const adaptPlaceholder = 'adapt prompt';
+    const providerToggle = renderProviderToggleEnabled ? (_jsx("div", { className: sectionGroupActionsClass, role: "group", "aria-label": "Render provider", children: ['gemini', 'openai-responses'].map((provider) => {
+            const active = renderProvider === provider;
+            return (_jsx("button", { type: "button", onClick: () => onRenderProviderChange?.(provider), disabled: renderBusy || !onRenderProviderChange, className: `cfg-button ${active ? 'cfg-button--primary' : 'cfg-button--secondary'}`, "aria-pressed": active, children: provider === 'gemini' ? 'gemini' : 'openai' }, provider));
+        }) })) : null;
     const getPanelFieldIds = (panel) => {
         const groupFields = panel.groups?.flatMap((group) => group.fields) ?? [];
         return [...(panel.fields ?? []), ...groupFields];
@@ -480,8 +454,8 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
                     binding.set(false);
                     return;
                 }
-                if (field.id === 'view.variation') {
-                    binding.set('variation');
+                if (field.id === 'camera.variation') {
+                    binding.set(defaultVariationValue);
                     return;
                 }
                 const options = resolvePackOptions(field);
@@ -515,60 +489,60 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
             // ignore copy failures
         }
     };
-    const renderFeatureTransfer = (open, onToggle, images, canAddRefs, dropActive, onAdd, onRemove, onDragEnter, onDragOver, onDragLeave, onDrop, mode, onModeChange, contextLabel, allowScaffold) => (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: onToggle, className: "rounded border viewer-ui-kit-border-subtle px-2 py-1 text-[10px] uppercase tracking-[0.12em] viewer-ui-kit-text-muted hover:viewer-ui-kit-text", children: "feature transfer / reference images" }), open && (_jsxs("div", { className: "mt-2 space-y-2 rounded border viewer-ui-kit-border viewer-ui-kit-surface px-3 py-3 text-[11px] viewer-ui-kit-text ", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.12em] viewer-ui-kit-text-muted", children: "use as" }), allowScaffold ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => onModeChange('scaffold'), className: `rounded-full border px-2 py-1 text-[9px] uppercase tracking-[0.2em] ${mode === 'scaffold'
-                                            ? 'viewer-ui-kit-border bg-[var(--viewer-ui-color-control-hover)] viewer-ui-kit-text'
-                                            : 'viewer-ui-kit-border-subtle viewer-ui-kit-text-muted'}`, children: "scaffold" }), _jsx("button", { type: "button", onClick: () => onModeChange('style'), className: `rounded-full border px-2 py-1 text-[9px] uppercase tracking-[0.2em] ${mode === 'style'
-                                            ? 'viewer-ui-kit-border bg-[var(--viewer-ui-color-control-hover)] viewer-ui-kit-text'
-                                            : 'viewer-ui-kit-border-subtle viewer-ui-kit-text-muted'}`, children: "style transfer" })] })) : (_jsx("div", { className: "rounded-full border viewer-ui-kit-border-subtle px-2 py-1 text-[9px] uppercase tracking-[0.2em] viewer-ui-kit-text-muted", children: "style transfer" }))] }), _jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: allowScaffold && mode === 'scaffold'
-                            ? `Use a reference image as the structural scaffold (replaces the volumetric scaffold) for this ${contextLabel}.`
-                            : `Use references to transfer palette, materials, and lighting into this ${contextLabel}.` }), _jsxs("div", { className: `relative flex flex-col items-center justify-center gap-1 rounded border border-dashed px-3 py-4 text-center text-[11px] transition ${dropActive
-                            ? 'viewer-ui-kit-border bg-[var(--viewer-ui-color-control-hover)] viewer-ui-kit-text'
-                            : 'border-[var(--viewer-ui-color-panel-border)] viewer-ui-kit-surface viewer-ui-kit-text'} ${!canAddRefs ? 'opacity-50' : ''}`, role: "button", tabIndex: 0, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, title: "Drop reference images here or click to upload.", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.12em]", children: "drop reference images" }), _jsx("div", { className: "text-[10px] lowercase", children: "or click to upload (png/jpg)" }), _jsxs("div", { className: "mt-1 text-[10px] lowercase viewer-ui-kit-text-subtle", children: ["upload up to ", styleReferenceLimit, " images. images are resized for upload."] }), _jsx("div", { className: "mt-2 text-[9px] lowercase viewer-ui-kit-text-subtle", children: "use only licensed or owned styles. for copyrighted styles, request licensed use in the context section below." }), _jsx("input", { type: "file", accept: "image/*", multiple: true, onChange: (e) => {
-                                    onAdd(e.target.files);
-                                    e.currentTarget.value = '';
-                                }, disabled: !canAddRefs, className: "absolute inset-0 h-full w-full cursor-pointer opacity-0" })] }), images.length > 0 ? (_jsx("div", { className: "grid grid-cols-3 gap-2", children: images
-                            .filter((image) => Boolean(image.url))
-                            .map((image) => (_jsxs("div", { className: "relative", children: [_jsx("img", { src: image.url, alt: image.name, className: "h-20 w-full rounded object-cover" }), _jsx("button", { type: "button", onClick: () => onRemove(image.id), className: "absolute top-1 right-1 rounded bg-black/70 px-1 py-0.5 text-[10px] lowercase text-white", title: "Remove reference image", children: "remove" })] }, image.id))) })) : (_jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: "no references yet" })), !canAddRefs && (_jsxs("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: ["max ", styleReferenceLimit, " images"] }))] }))] }));
-    return (_jsxs("div", { className: "viewer-ui-panel-renderer viewer-ui-panel-renderer--flat viewer-ui-render-panel space-y-6", children: [showRender && (_jsxs("div", { className: "panel-section space-y-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "text-[16px] font-semibold tracking-[0.01em] viewer-ui-kit-text-strong", children: "your prompt" }), _jsx(InfoBadge, { text: "Write the primary render prompt for the current camera view." })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "text-[13px] font-medium uppercase tracking-[0.14em] viewer-ui-kit-text-strong", children: "render" }), _jsx("textarea", { value: renderPrompt, onChange: (e) => onRenderPromptChange(e.target.value), onKeyDown: handleRenderKeyDown, rows: 3, className: "w-full rounded border px-3 py-2 text-[12px] viewer-ui-kit-surface viewer-ui-kit-text", placeholder: promptPlaceholder, "aria-label": "Render prompt" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("button", { type: "button", onClick: () => setShowRenderPrompts((prev) => !prev), className: "text-[10px] uppercase tracking-[0.14em] viewer-ui-kit-text-muted", children: showRenderPrompts ? 'hide previous prompts' : 'show previous prompts' }), showRenderPrompts && renderPromptHistory.length > 0 && (_jsxs("span", { className: "text-[10px] uppercase tracking-[0.14em] viewer-ui-kit-text-muted", children: [renderPromptHistory.length, " saved"] }))] }), showRenderPrompts && renderPromptHistory.length === 0 && (_jsx("div", { className: "text-[10px] uppercase tracking-[0.14em] viewer-ui-kit-text-muted", children: "no prompts yet" })), showRenderPrompts && renderPromptHistory.length > 0 && (_jsx("div", { className: "max-h-40 overflow-auto space-y-2", children: renderPromptHistory.map((item, index) => {
-                                    const key = `render-${index}`;
-                                    return (_jsx("div", { className: "rounded border viewer-ui-kit-border viewer-ui-kit-surface px-3 py-2 text-[11px] viewer-ui-kit-text", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsx("div", { className: "whitespace-pre-wrap", children: item }), _jsx("button", { type: "button", onClick: () => copyToClipboard(key, item), className: "shrink-0 rounded border viewer-ui-kit-border-subtle px-2 py-0.5 text-[9px] uppercase tracking-[0.2em] viewer-ui-kit-text-muted viewer-ui-kit-text-hover", children: copiedKey === key ? 'copied' : 'copy' })] }) }, `${key}-${item}`));
-                                }) })), _jsx("button", { type: "button", onClick: handleCaptureRender, disabled: renderBusy, className: "w-full rounded-full px-4 py-2.5 text-[12px] font-semibold uppercase tracking-[0.08em] transition-colors viewer-ui-kit-button viewer-ui-kit-button-primary", children: renderBusy ? 'rendering…' : renderButtonLabel }), canCreateImageSet && (_jsx("button", { type: "button", onClick: onCreateImageSet, disabled: renderBusy || imageSetBusy, className: "w-full rounded-full px-4 py-2.5 text-[12px] font-semibold uppercase tracking-[0.08em] transition-colors viewer-ui-kit-button viewer-ui-kit-button-secondary", children: imageSetBusy ? 'creating image set…' : 'create image set' })), canCreateImageSet && (_jsxs("div", { className: "text-[10px] viewer-ui-kit-text-muted", children: ["generates 4 new views \u00B7 ", renderLimitRemaining, " renders remaining this session"] })), renderStatus && _jsx("div", { className: "text-xs viewer-ui-kit-text-muted", children: renderStatus }), renderError && (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs viewer-ui-kit-text-error", children: renderError }), blockedDesigners.length > 0 && (_jsxs("div", { className: "text-[10px] viewer-ui-kit-text-muted", children: ["licensable:", ' ', blockedDesigners.map((term, index) => (_jsxs("span", { children: [_jsx("button", { type: "button", onClick: () => submitBlockedRequest(term), title: "Request licensing from Treasury", className: "underline decoration-dotted underline-offset-2 hover:text-[var(--viewer-ui-color-text-strong)]", children: term }), index < blockedDesigners.length - 1 ? ', ' : ''] }, `${term}-${index}`)))] })), blockedRequestStatus === 'sending' && (_jsxs("div", { className: "text-[10px] viewer-ui-kit-text-muted", children: ["requesting license for ", blockedRequestTerm, "\u2026"] })), blockedRequestStatus === 'sent' && (_jsx("div", { className: "text-[10px] viewer-ui-kit-text-muted", children: "thanks \u2014 your licensing request was sent." })), blockedRequestStatus === 'error' && (_jsx("div", { className: "text-[10px] viewer-ui-kit-text-error", children: "licensing request failed \u2014 try again." }))] })), _jsx("div", { children: renderFeatureTransfer(renderFeatureOpen, () => {
-                                    const next = !renderFeatureOpen;
-                                    setRenderFeatureOpen(next);
-                                    onRenderFeatureEnabledChange(next);
-                                }, renderReferenceImages, canAddRenderRefs, renderDropActive, onRenderReferenceImagesAdd, onRenderReferenceImageRemove, handleRenderDragEnter, handleRenderDragOver, handleRenderDragLeave, handleRenderDrop, renderReferenceMode, onRenderReferenceModeChange, 'render', isImagineMode) })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "flex items-center justify-between gap-2", children: _jsx("div", { className: "text-[13px] font-medium uppercase tracking-[0.14em] viewer-ui-kit-text-strong", children: "adapt" }) }), _jsxs("div", { className: "space-y-3", children: [_jsx("textarea", { value: adaptPrompt, onChange: (e) => onAdaptPromptChange(e.target.value), onKeyDown: handleAdaptKeyDown, rows: 3, className: "w-full rounded border px-3 py-2 text-[12px] viewer-ui-kit-surface viewer-ui-kit-text", placeholder: adaptPlaceholder, "aria-label": "Adapt prompt", disabled: !renderOutputImage }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("button", { type: "button", onClick: () => setShowAdaptPrompts((prev) => !prev), className: "text-[10px] uppercase tracking-[0.14em] viewer-ui-kit-text-muted", children: showAdaptPrompts ? 'hide previous prompts' : 'show previous prompts' }), showAdaptPrompts && adaptPromptHistory.length > 0 && (_jsxs("span", { className: "text-[10px] uppercase tracking-[0.14em] viewer-ui-kit-text-muted", children: [adaptPromptHistory.length, " saved"] }))] }), showAdaptPrompts && adaptPromptHistory.length === 0 && (_jsx("div", { className: "text-[10px] uppercase tracking-[0.14em] viewer-ui-kit-text-muted", children: "no prompts yet" })), showAdaptPrompts && adaptPromptHistory.length > 0 && (_jsx("div", { className: "max-h-40 overflow-auto space-y-2", children: adaptPromptHistory.map((item, index) => {
-                                            const key = `adapt-${index}`;
-                                            return (_jsx("div", { className: "rounded border viewer-ui-kit-border viewer-ui-kit-surface px-3 py-2 text-[11px] viewer-ui-kit-text", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsx("div", { className: "whitespace-pre-wrap", children: item }), _jsx("button", { type: "button", onClick: () => copyToClipboard(key, item), className: "shrink-0 rounded border viewer-ui-kit-border-subtle px-2 py-0.5 text-[9px] uppercase tracking-[0.2em] viewer-ui-kit-text-muted viewer-ui-kit-text-hover", children: copiedKey === key ? 'copied' : 'copy' })] }) }, `${key}-${item}`));
-                                        }) })), _jsx("button", { type: "button", onClick: handleAdaptRender, disabled: renderBusy || !renderOutputImage, className: "w-full rounded-full px-4 py-2.5 text-[12px] font-semibold uppercase tracking-[0.08em] transition-colors viewer-ui-kit-button viewer-ui-kit-button-secondary", children: renderBusy ? 'adapting…' : 'adapt image' }), _jsx("div", { className: "text-[10px] viewer-ui-kit-text-muted", children: "note: each adapt step reduces image quality slightly. start a new render for full fidelity." }), _jsx("div", { children: renderFeatureTransfer(adaptFeatureOpen, () => {
-                                            const next = !adaptFeatureOpen;
-                                            setAdaptFeatureOpen(next);
-                                            onAdaptFeatureEnabledChange(next);
-                                        }, adaptReferenceImages, canAddAdaptRefs, adaptDropActive, onAdaptReferenceImagesAdd, onAdaptReferenceImageRemove, handleAdaptDragEnter, handleAdaptDragOver, handleAdaptDragLeave, handleAdaptDrop, adaptReferenceMode, onAdaptReferenceModeChange, 'adapt', isImagineMode) })] })] })] })), showContext && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "panel-section space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-[16px] font-semibold tracking-[0.01em] viewer-ui-kit-text-strong", children: "prompt blocks" }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("button", { type: "button", onClick: resetCourtyardFeatures, className: "rounded-full border viewer-ui-kit-border-subtle px-3 py-1 text-[9px] uppercase tracking-[0.24em] viewer-ui-kit-text-muted viewer-ui-kit-text-hover", children: "reset blocks" }) })] }), showTaskBlockToggle && (_jsx("div", { className: "pt-3", children: _jsxs("button", { type: "button", onClick: () => onTaskBlockEnabledChange?.(!taskBlockEnabled), className: `flex w-full items-center justify-between rounded border px-3 py-2 text-[11px] lowercase transition ${taskBlockEnabled
-                                        ? 'viewer-ui-kit-button viewer-ui-kit-button-primary viewer-ui-kit-border'
-                                        : 'viewer-ui-kit-surface viewer-ui-kit-text-muted viewer-ui-kit-border-subtle'}`, children: [_jsx("span", { children: "task prompt" }), _jsx("span", { className: "text-[10px] uppercase tracking-[0.2em]", children: taskBlockEnabled ? 'on' : 'off' })] }) }))] }), _jsx(_Fragment, { children: packPanels.map((panel) => {
+    const renderPromptHistoryList = (items, kind, emptyLabel) => {
+        if (items.length === 0) {
+            return _jsx("div", { className: "panel-field-help", children: emptyLabel });
+        }
+        return (_jsx("div", { className: sectionStackClass, children: items.map((item, index) => {
+                const key = `${kind}-${index}`;
+                return (_jsx("div", { className: `${subCardClass} text-[11px] viewer-ui-kit-text`, children: _jsxs("div", { className: utilityRowClass, style: { alignItems: 'flex-start', justifyContent: 'space-between' }, children: [_jsx("div", { className: "whitespace-pre-wrap", children: item }), _jsx("button", { type: "button", onClick: () => copyToClipboard(key, item), className: utilityButtonClass, children: copiedKey === key ? 'copied' : 'copy' })] }) }, `${key}-${item}`));
+            }) }));
+    };
+    const renderFeatureTransferToggle = (open, onToggle) => (_jsx("button", { type: "button", onClick: onToggle, className: utilityButtonClass, children: open ? 'hide references' : 'references' }));
+    const renderFeatureTransferPanel = (open, images, canAddRefs, dropActive, onAdd, onRemove, onDragEnter, onDragOver, onDragLeave, onDrop, mode, onModeChange, contextLabel, allowStructure) => open ? (_jsxs("div", { className: subCardClass, children: [_jsx("div", { className: "panel-reference-mode-row", children: allowStructure ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => onModeChange('structure'), className: "cfg-toggle", "data-active": mode === 'structure', children: "structure" }), _jsx("button", { type: "button", onClick: () => onModeChange('style'), className: "cfg-toggle", "data-active": mode === 'style', children: "style transfer" })] })) : (_jsx("div", { className: "panel-reference-mode-chip", children: "style transfer" })) }), _jsxs("div", { className: "panel-reference-upload", "data-drop-active": dropActive ? 'true' : 'false', "data-disabled": !canAddRefs ? 'true' : 'false', onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, title: "Drop reference images here or click to upload.", children: [_jsx("span", { className: "panel-reference-upload-label", children: "reference images" }), _jsx("span", { className: "panel-reference-upload-meta", children: "drop images here or click to upload" }), _jsxs("span", { className: "panel-reference-upload-meta", children: ["max ", styleReferenceLimit] }), _jsx("input", { type: "file", accept: "image/*", multiple: true, "aria-label": `${contextLabel} reference image upload`, onChange: (e) => {
+                            onAdd(e.target.files);
+                            e.currentTarget.value = '';
+                        }, disabled: !canAddRefs, className: "panel-reference-upload-input" })] }), images.length > 0 ? (_jsx("div", { className: "panel-reference-grid", children: images
+                    .filter((image) => Boolean(image.url))
+                    .map((image) => (_jsxs("div", { className: "panel-reference-thumb", children: [_jsx("button", { type: "button", onClick: () => setActiveReferenceImage({ name: image.name, url: image.url }), className: "panel-reference-thumb-open", title: "Open reference image", children: _jsx("img", { src: image.url, alt: image.name, className: "panel-reference-thumb-image" }) }), _jsx("button", { type: "button", onClick: () => onRemove(image.id), className: "panel-reference-thumb-remove", title: "Remove reference image", children: "remove" }), _jsx("div", { className: "panel-reference-thumb-name", title: image.name, children: image.name })] }, image.id))) })) : (_jsx("div", { className: "panel-reference-empty", children: "no references yet" }))] })) : null;
+    return (_jsxs("div", { className: "viewer-ui-panel-renderer viewer-ui-panel-renderer--sectioned viewer-ui-render-panel space-y-6", children: [showRender && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "panel-section", children: [_jsx("div", { className: "panel-section-header", children: _jsx("h3", { children: "render" }) }), _jsxs("div", { className: sectionStackClass, children: [_jsx("div", { className: "panel-section-group", children: _jsxs("div", { className: "panel-section-fields", children: [providerToggle, _jsx("textarea", { value: renderPrompt, onChange: (e) => onRenderPromptChange(e.target.value), onKeyDown: handleRenderKeyDown, rows: 3, className: "cfg-textarea", placeholder: promptPlaceholder, "aria-label": "Render prompt" }), _jsxs("div", { className: sectionGroupActionsStackClass, children: [_jsxs("div", { className: sectionGroupActionsClass, children: [_jsx("button", { type: "button", onClick: handleCaptureRender, disabled: renderBusy, className: "cfg-button cfg-button--primary", children: renderBusy ? 'rendering…' : renderButtonLabel }), canCreateImageSet ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: onCreateImageSet, disabled: renderBusy || imageSetBusy, className: "cfg-button cfg-button--secondary", children: imageSetBusy ? 'creating image set…' : 'create image set' }), _jsxs("span", { className: utilityMetaClass, children: [renderLimitRemaining, " renders remaining"] })] })) : null] }), renderStatus ? _jsx("div", { className: sectionNoteClass, children: renderStatus }) : null, renderError ? (_jsxs("div", { className: `${subCardClass} space-y-2`, children: [_jsx("div", { className: "text-xs viewer-ui-kit-text-error", children: renderError }), blockedDesigners.length > 0 ? (_jsxs("div", { className: fieldDescriptionClass, children: ["licensable:", ' ', blockedDesigners.map((term, index) => (_jsxs("span", { children: [_jsx("button", { type: "button", onClick: () => submitBlockedRequest(term), title: "Request licensing from Treasury", className: "underline decoration-dotted underline-offset-2 hover:text-[var(--viewer-ui-color-text-strong)]", children: term }), index < blockedDesigners.length - 1 ? ', ' : ''] }, `${term}-${index}`)))] })) : null, blockedRequestStatus === 'sending' ? (_jsxs("div", { className: fieldDescriptionClass, children: ["requesting license for ", blockedRequestTerm, "\u2026"] })) : null, blockedRequestStatus === 'sent' ? (_jsx("div", { className: fieldDescriptionClass, children: "thanks \u2014 your licensing request was sent." })) : null, blockedRequestStatus === 'error' ? (_jsx("div", { className: "text-[10px] viewer-ui-kit-text-error", children: "licensing request failed \u2014 try again." })) : null] })) : null] })] }) }), _jsxs("div", { className: "panel-section-group", children: [_jsxs("div", { className: sectionGroupActionsClass, children: [_jsx("button", { type: "button", onClick: () => setShowRenderPrompts((prev) => !prev), className: utilityButtonClass, children: showRenderPrompts ? 'hide prompt history' : 'prompt history' }), showRenderPrompts && renderPromptHistory.length > 0 ? (_jsxs("span", { className: utilityMetaClass, children: [renderPromptHistory.length, " saved"] })) : null, renderFeatureTransferToggle(renderFeatureOpen, () => {
+                                                        const next = !renderFeatureOpen;
+                                                        setRenderFeatureOpen(next);
+                                                        onRenderFeatureEnabledChange(next);
+                                                    })] }), showRenderPrompts ? renderPromptHistoryList(renderPromptHistory, 'render', 'no prompts yet') : null, renderFeatureTransferPanel(renderFeatureOpen, renderReferenceImages, canAddRenderRefs, renderDropActive, onRenderReferenceImagesAdd, onRenderReferenceImageRemove, handleRenderDragEnter, handleRenderDragOver, handleRenderDragLeave, handleRenderDrop, renderReferenceMode, onRenderReferenceModeChange, 'render', isImagineMode)] })] })] }), _jsxs("div", { className: "panel-section", children: [_jsx("div", { className: "panel-section-header", children: _jsx("h3", { children: "adapt" }) }), _jsxs("div", { className: sectionStackClass, children: [_jsx("div", { className: "panel-section-group", children: _jsxs("div", { className: "panel-section-fields", children: [_jsx("textarea", { value: adaptPrompt, onChange: (e) => onAdaptPromptChange(e.target.value), onKeyDown: handleAdaptKeyDown, rows: 3, className: "cfg-textarea", placeholder: adaptPlaceholder, "aria-label": "Adapt prompt", disabled: !renderOutputImage }), _jsx("div", { className: sectionGroupActionsClass, children: _jsx("button", { type: "button", onClick: handleAdaptRender, disabled: renderBusy || !renderOutputImage || !hasRenderInteractionContext, className: "cfg-button cfg-button--secondary", children: renderBusy ? 'adapting…' : 'adapt image' }) }), !renderOutputImage ? (_jsx("div", { className: fieldDescriptionClass, children: "render an image before adapting." })) : !hasRenderInteractionContext ? (_jsx("div", { className: fieldDescriptionClass, children: "this image has no provider interaction id; render again before adapting." })) : (_jsx("div", { className: fieldDescriptionClass, children: "adapts the current generated interaction." })), renderBusy && renderStatus ? _jsx("div", { className: sectionNoteClass, children: renderStatus }) : null, renderError ? _jsx("div", { className: "text-xs viewer-ui-kit-text-error", children: renderError }) : null] }) }), _jsxs("div", { className: "panel-section-group", children: [_jsxs("div", { className: sectionGroupActionsClass, children: [_jsx("button", { type: "button", onClick: () => setShowAdaptPrompts((prev) => !prev), className: utilityButtonClass, children: showAdaptPrompts ? 'hide prompt history' : 'prompt history' }), showAdaptPrompts && adaptPromptHistory.length > 0 ? (_jsxs("span", { className: utilityMetaClass, children: [adaptPromptHistory.length, " saved"] })) : null, renderFeatureTransferToggle(adaptFeatureOpen, () => {
+                                                        const next = !adaptFeatureOpen;
+                                                        setAdaptFeatureOpen(next);
+                                                        onAdaptFeatureEnabledChange(next);
+                                                    })] }), showAdaptPrompts ? renderPromptHistoryList(adaptPromptHistory, 'adapt', 'no prompts yet') : null, renderFeatureTransferPanel(adaptFeatureOpen, adaptReferenceImages, canAddAdaptRefs, adaptDropActive, onAdaptReferenceImagesAdd, onAdaptReferenceImageRemove, handleAdaptDragEnter, handleAdaptDragOver, handleAdaptDragLeave, handleAdaptDrop, adaptReferenceMode, onAdaptReferenceModeChange, 'adapt', isImagineMode)] })] })] })] })), showContext && (_jsxs(_Fragment, { children: [_jsx("div", { className: "panel-section", children: _jsxs("div", { className: "panel-section-header", children: [_jsx("h3", { children: "prompt blocks" }), _jsx("div", { className: `${utilityRowClass} justify-end`, children: _jsx("button", { type: "button", onClick: resetCourtyardFeatures, className: utilityButtonClass, children: "reset current blocks" }) })] }) }), _jsx(_Fragment, { children: packPanels.map((panel) => {
                             const open = panelOpen[panel.id] ?? true;
-                            return (_jsxs("div", { className: "panel-section space-y-4", children: [_jsxs("button", { type: "button", onClick: () => setPanelOpen((prev) => ({ ...prev, [panel.id]: !open })), className: "flex w-full items-center justify-between text-xl text-header-main lowercase viewer-ui-kit-text-strong", children: [_jsx("span", { children: panel.label }), _jsx("span", { className: `transition-transform ${open ? 'rotate-180' : ''}`, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "h-4 w-4", children: _jsx("path", { fillRule: "evenodd", d: "M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z", clipRule: "evenodd" }) }) })] }), !open ? (_jsxs("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: [panel.label, " closed"] })) : (_jsxs("div", { className: "space-y-4", children: [panel.description ? (_jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: panel.description })) : null, panel.groups?.length ? (_jsx("div", { className: "space-y-6", children: panel.groups.map((group) => {
-                                                    const groupToggleFields = group.fields.filter((fieldId) => {
-                                                        const field = PROMPT_PACK.fields[fieldId];
-                                                        return field?.type === 'toggle' && field.ui === 'chip';
-                                                    });
-                                                    const groupFields = group.fields.filter((fieldId) => {
-                                                        const field = PROMPT_PACK.fields[fieldId];
-                                                        return !(field?.type === 'toggle' && field.ui === 'chip');
-                                                    });
-                                                    return (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.2em] viewer-ui-kit-text-muted", children: group.label }), group.description ? (_jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: group.description })) : null, groupFields.map((fieldId) => renderPackField(fieldId)), groupToggleFields.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: groupToggleFields.map((fieldId) => renderToggleChip(fieldId)) })) : null] }, group.id ?? group.label));
-                                                }) })) : (_jsx("div", { className: "space-y-4", children: panel.fields?.map((fieldId) => renderPackField(fieldId)) }))] }))] }, panel.id));
-                        }) })] })), showPresets && (_jsxs("div", { className: "space-y-4 border-b viewer-ui-kit-border pb-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "text-3xl text-header-main lowercase viewer-ui-kit-text-strong", children: "presets" }), _jsx(InfoBadge, { text: "Saved prompt mixes and prompt history live here." })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.24em] font-semibold viewer-ui-kit-text-muted", children: "render prompt history" }), renderPromptHistory.length === 0 ? (_jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: "no render prompts yet" })) : (_jsx("div", { className: "max-h-40 overflow-auto space-y-2", children: renderPromptHistory.map((item, index) => {
-                                    const key = `render-history-${index}`;
-                                    return (_jsx("div", { className: "rounded border viewer-ui-kit-border viewer-ui-kit-surface px-2 py-2 text-[11px] viewer-ui-kit-text ", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsx("div", { className: "whitespace-pre-wrap", children: item }), _jsx("button", { type: "button", onClick: () => copyToClipboard(key, item), className: "shrink-0 rounded border viewer-ui-kit-border-subtle px-2 py-0.5 text-[9px] uppercase tracking-[0.2em] viewer-ui-kit-text-muted viewer-ui-kit-text-hover", children: "copy" })] }) }, `${key}-${item}`));
-                                }) }))] }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.24em] font-semibold viewer-ui-kit-text-muted", children: "adapt prompt history" }), adaptPromptHistory.length === 0 ? (_jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: "no adapt prompts yet" })) : (_jsx("div", { className: "max-h-40 overflow-auto space-y-2", children: adaptPromptHistory.map((item, index) => {
-                                    const key = `adapt-history-${index}`;
-                                    return (_jsx("div", { className: "rounded border viewer-ui-kit-border viewer-ui-kit-surface px-2 py-2 text-[11px] viewer-ui-kit-text ", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsx("div", { className: "whitespace-pre-wrap", children: item }), _jsx("button", { type: "button", onClick: () => copyToClipboard(key, item), className: "shrink-0 rounded border viewer-ui-kit-border-subtle px-2 py-0.5 text-[9px] uppercase tracking-[0.2em] viewer-ui-kit-text-muted viewer-ui-kit-text-hover", children: "copy" })] }) }, `${key}-${item}`));
-                                }) }))] })] })), showPresets && (_jsxs("div", { className: "space-y-2 pt-2 border-t viewer-ui-kit-border", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("button", { type: "button", onClick: () => setFullPromptOpen((prev) => !prev), className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: fullPromptOpen ? 'hide full prompt log' : 'show full prompt log' }), _jsxs("span", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: [fullPromptHistory.length, " total"] })] }), fullPromptOpen && fullPromptHistory.length === 0 && (_jsx("div", { className: "text-[10px] lowercase viewer-ui-kit-text-muted", children: "no full prompts yet" })), fullPromptOpen && fullPromptHistory.length > 0 && (_jsxs("div", { className: "max-h-64 overflow-auto space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-[10px] lowercase viewer-ui-kit-text-muted", children: [_jsxs("div", { children: ["prompt #", activeFullPrompt?.seq ?? fullPromptHistory.length, " of ", totalPromptCount] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: () => setActiveFullPromptIndex((prev) => Math.min(fullPromptHistory.length - 1, prev + 1)), className: "rounded border viewer-ui-kit-border-subtle px-2 py-0.5 text-[9px] uppercase tracking-[0.2em] viewer-ui-kit-text-muted viewer-ui-kit-text-hover", disabled: activeFullPromptIndex >= fullPromptHistory.length - 1, children: "prev" }), _jsx("button", { type: "button", onClick: () => setActiveFullPromptIndex((prev) => Math.max(0, prev - 1)), className: "rounded border viewer-ui-kit-border-subtle px-2 py-0.5 text-[9px] uppercase tracking-[0.2em] viewer-ui-kit-text-muted viewer-ui-kit-text-hover", disabled: activeFullPromptIndex === 0, children: "next" })] })] }), fullPromptHistory.map((item, index) => {
-                                if (index !== activeFullPromptIndex)
-                                    return null;
-                                const stamp = new Date().toISOString().replace(/[:.]/g, '-');
-                                const sections = formatPromptSections(item);
-                                return (_jsxs("div", { className: "rounded border viewer-ui-kit-border viewer-ui-kit-surface px-3 py-3 text-[10px] viewer-ui-kit-text space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between text-[10px] uppercase tracking-[0.2em] viewer-ui-kit-text-subtle", children: [_jsxs("span", { children: [item.kind, " \u00B7 #", item.seq] }), _jsx("span", { children: new Date(item.ts).toLocaleTimeString() })] }), _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsx("div", { className: "space-y-3", children: sections.length === 0 ? (_jsx("div", { className: "whitespace-pre-wrap", children: item.prompt })) : (sections.map((section) => (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-[11px] font-semibold viewer-ui-kit-text-strong", children: section.label }), _jsx("div", { className: "whitespace-pre-wrap leading-relaxed", children: section.content })] }, `${section.label}-${index}`)))) }), _jsxs("div", { className: "shrink-0 flex flex-col gap-1", children: [_jsx("button", { type: "button", onClick: () => handleCopyPrompt(item.prompt, index), className: "rounded border viewer-ui-kit-border-subtle px-2 py-0.5 text-[9px] uppercase tracking-[0.2em] viewer-ui-kit-text-muted viewer-ui-kit-text-hover", children: copiedPromptIndex === index ? 'copied' : 'copy' }), _jsx("button", { type: "button", onClick: () => downloadTextFile(`prompt-${stamp}-${item.seq}.txt`, item.prompt), className: "rounded border viewer-ui-kit-border-subtle px-2 py-0.5 text-[9px] uppercase tracking-[0.2em] viewer-ui-kit-text-muted viewer-ui-kit-text-hover", children: "download" })] })] })] }, `full-${index}`));
-                            })] }))] }))] }));
+                            const collapsedGroup = getCollapsedPanelGroup(panel);
+                            const collapsedGroupKey = collapsedGroup ? (collapsedGroup.id ?? collapsedGroup.label) : null;
+                            const collapsedGroupLabel = collapsedGroup ? normalizePromptLabel(collapsedGroup.label) : '';
+                            const collapsedIntoPanelHeader = Boolean(collapsedGroup) && collapsedGroupLabel !== normalizePromptLabel(panel.label);
+                            const panelDescription = panel.description?.trim() || '';
+                            const panelSubLabel = collapsedIntoPanelHeader && collapsedGroup ? collapsedGroup.label : '';
+                            return (_jsxs("section", { className: "panel-section", "data-panel-id": panel.id, children: [_jsxs("div", { className: "panel-section-header", children: [_jsxs("div", { children: [_jsx("h3", { children: panel.label }), panelSubLabel ? _jsx("div", { className: fieldDescriptionClass, children: panelSubLabel }) : null, panelDescription ? _jsx("div", { className: fieldDescriptionClass, children: panelDescription }) : null] }), _jsx("button", { type: "button", onClick: () => setPanelOpen((prev) => ({ ...prev, [panel.id]: !open })), className: utilityButtonClass, children: open ? 'hide' : 'show' })] }), !open ? (null) : (_jsx("div", { className: "panel-section-fields", children: panel.groups?.length ? (_jsx(_Fragment, { children: panel.groups.map((group) => {
+                                                const groupToggleFields = group.fields.filter((fieldId) => {
+                                                    const field = PROMPT_PACK.fields[fieldId];
+                                                    return field?.type === 'toggle' && field.ui === 'chip';
+                                                });
+                                                const groupFields = group.fields.filter((fieldId) => {
+                                                    const field = PROMPT_PACK.fields[fieldId];
+                                                    return !(field?.type === 'toggle' && field.ui === 'chip');
+                                                });
+                                                const showGroupLabel = shouldShowGroupLabel(panel, group);
+                                                const collapseGroupHeading = Boolean(collapsedGroupKey) &&
+                                                    collapsedIntoPanelHeader &&
+                                                    collapsedGroupKey === (group.id ?? group.label);
+                                                return (_jsxs("div", { className: "panel-section-group", "data-group-id": group.id ?? group.label, children: [showGroupLabel && !collapseGroupHeading ? _jsx("h4", { children: group.label }) : null, group.description && !collapseGroupHeading ? (_jsx("div", { className: fieldDescriptionClass, children: group.description })) : null, _jsx("div", { className: "panel-section-fields", children: groupFields.map((fieldId) => renderPackField(fieldId, {
+                                                                suppressLabel: showGroupLabel && shouldSuppressFieldLabel(panel, group, fieldId),
+                                                            })) }), groupToggleFields.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2 pt-1", children: groupToggleFields.map((fieldId) => renderToggleChip(fieldId)) })) : null] }, group.id ?? group.label));
+                                            }) })) : (_jsx("div", { className: "panel-section-fields", children: panel.fields?.map((fieldId) => renderPackField(fieldId)) })) }))] }, panel.id));
+                        }) })] })), showPresets && (_jsxs(_Fragment, { children: [_jsxs("section", { className: "panel-section", "data-panel-id": "render-history", children: [_jsx("div", { className: "panel-section-header", children: _jsx("h3", { children: "render prompt history" }) }), renderPromptHistoryList(renderPromptHistory, 'render-history', 'no render prompts yet')] }), _jsxs("section", { className: "panel-section", "data-panel-id": "adapt-history", children: [_jsx("div", { className: "panel-section-header", children: _jsx("h3", { children: "adapt prompt history" }) }), renderPromptHistoryList(adaptPromptHistory, 'adapt-history', 'no adapt prompts yet')] })] })), showPresets && (_jsxs("section", { className: "panel-section", "data-panel-id": "full-prompt-log", children: [_jsx("div", { className: "panel-section-header", children: _jsx("h3", { children: "full prompt log" }) }), _jsxs("div", { className: "panel-section-fields", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("button", { type: "button", onClick: () => setFullPromptOpen((prev) => !prev), className: utilityButtonClass, children: fullPromptOpen ? 'hide prompt log' : 'show prompt log' }), _jsxs("span", { className: "panel-field-help", children: [fullPromptHistory.length, " total"] })] }), fullPromptOpen && fullPromptHistory.length === 0 && (_jsx("div", { className: "panel-field-help", children: "no full prompts yet" })), fullPromptOpen && fullPromptHistory.length > 0 && (_jsxs("div", { className: "panel-section-fields", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-[10px] lowercase viewer-ui-kit-text-muted", children: [_jsxs("div", { children: ["prompt #", activeFullPrompt?.seq ?? fullPromptHistory.length, " of ", totalPromptCount] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: () => setActiveFullPromptIndex((prev) => Math.min(fullPromptHistory.length - 1, prev + 1)), className: utilityButtonClass, disabled: activeFullPromptIndex >= fullPromptHistory.length - 1, children: "prev" }), _jsx("button", { type: "button", onClick: () => setActiveFullPromptIndex((prev) => Math.max(0, prev - 1)), className: utilityButtonClass, disabled: activeFullPromptIndex === 0, children: "next" })] })] }), fullPromptHistory.map((item, index) => {
+                                        if (index !== activeFullPromptIndex)
+                                            return null;
+                                        const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+                                        const sections = formatPromptSections(item);
+                                        return (_jsxs("div", { className: "rounded-[18px] border viewer-ui-kit-border-subtle viewer-ui-kit-surface px-4 py-4 text-[10px] viewer-ui-kit-text space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between text-[10px] uppercase tracking-[0.2em] viewer-ui-kit-text-subtle", children: [_jsxs("span", { children: [item.kind, " \u00B7 #", item.seq] }), _jsx("span", { children: new Date(item.ts).toLocaleTimeString() })] }), _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsx("div", { className: "space-y-3", children: sections.length === 0 ? (_jsx("div", { className: "whitespace-pre-wrap", children: item.prompt })) : (sections.map((section) => (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-[11px] font-semibold viewer-ui-kit-text-strong", children: section.label }), _jsx("div", { className: "whitespace-pre-wrap leading-relaxed", children: section.content })] }, `${section.label}-${index}`)))) }), _jsxs("div", { className: "shrink-0 flex flex-col gap-1", children: [_jsx("button", { type: "button", onClick: () => handleCopyPrompt(item.prompt, index), className: utilityButtonClass, children: copiedPromptIndex === index ? 'copied' : 'copy' }), _jsx("button", { type: "button", onClick: () => downloadTextFile(`prompt-${stamp}-${item.seq}.txt`, item.prompt), className: utilityButtonClass, children: "download" })] })] })] }, `full-${index}`));
+                                    })] }))] })] })), _jsx(FullscreenImage, { open: Boolean(activeReferenceImage), src: activeReferenceImage?.url || '', alt: activeReferenceImage?.name || 'reference image', title: activeReferenceImage?.name || 'reference image', modeLabel: "reference", onClose: () => setActiveReferenceImage(null) })] }));
 }