@treasuryspatial/prompt-ui-kit 0.1.13 → 0.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/FeedbackPanel.d.ts.map +1 -1
- package/dist/FeedbackPanel.js +124 -7
- package/dist/FullscreenImage.js +3 -3
- package/dist/GalleryThumbCard.js +1 -1
- package/dist/PromptDebugPanel.js +1 -1
- package/dist/RenderHistoryPanel.d.ts.map +1 -1
- package/dist/RenderHistoryPanel.js +106 -15
- package/dist/RenderPanel.d.ts.map +1 -1
- package/dist/RenderPanel.js +42 -42
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -4
package/dist/RenderPanel.js
CHANGED
|
@@ -230,10 +230,10 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
|
|
|
230
230
|
}
|
|
231
231
|
if (field.id === 'context.styleReference') {
|
|
232
232
|
const value = typeof binding.value === 'string' ? binding.value : '';
|
|
233
|
-
return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "block text-[11px] lowercase
|
|
233
|
+
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) => {
|
|
234
234
|
playPromptSelect();
|
|
235
235
|
binding.set(event.target.value);
|
|
236
|
-
}, className: "w-full px-2 py-1 border rounded text-xs
|
|
236
|
+
}, 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));
|
|
237
237
|
}
|
|
238
238
|
if (field.type === 'toggle') {
|
|
239
239
|
const active = Boolean(binding.value);
|
|
@@ -244,13 +244,13 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
|
|
|
244
244
|
return;
|
|
245
245
|
playPromptSelect();
|
|
246
246
|
binding.set(!active);
|
|
247
|
-
}, className: `flex w-full items-center justify-between rounded border px-3 py-2 text-[11px] lowercase
|
|
248
|
-
? '
|
|
249
|
-
: '
|
|
247
|
+
}, className: `flex w-full items-center justify-between rounded border px-3 py-2 text-[11px] lowercase transition ${active
|
|
248
|
+
? 'viewer-ui-kit-button viewer-ui-kit-button-primary viewer-ui-kit-border'
|
|
249
|
+
: '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));
|
|
250
250
|
}
|
|
251
251
|
if (field.type === 'multi') {
|
|
252
252
|
const list = Array.isArray(binding.value) ? binding.value : [];
|
|
253
|
-
return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "block text-[11px] lowercase
|
|
253
|
+
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: () => {
|
|
254
254
|
playPromptSelect();
|
|
255
255
|
toggleList(list, option.value, (next) => binding.set(next));
|
|
256
256
|
}, className: chipClass(list.includes(option.value)), title: option.detail ?? option.meta?.detail?.toString() ?? option.label, children: option.label }, `${fieldId}-${option.value}`))) })] }, fieldId));
|
|
@@ -271,25 +271,25 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
|
|
|
271
271
|
return acc;
|
|
272
272
|
}, {});
|
|
273
273
|
const hasGroups = field.id === 'view.viewpoint' && Object.keys(groupedOptions).length > 0;
|
|
274
|
-
const selectClassName = `w-full px-2 py-1 border rounded text-xs
|
|
275
|
-
return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "block text-[11px] lowercase
|
|
274
|
+
const selectClassName = `w-full px-2 py-1 border rounded text-xs viewer-ui-kit-control ${field.id === 'view.viewpoint' ? 'normal-case' : 'lowercase'}`;
|
|
275
|
+
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) => {
|
|
276
276
|
playPromptSelect();
|
|
277
277
|
binding.set(event.target.value);
|
|
278
278
|
}, className: selectClassName, children: [showEmpty && _jsx("option", { value: "", children: "none" }), hasGroups
|
|
279
279
|
? groupOrder
|
|
280
280
|
.filter((group) => groupedOptions[group]?.length)
|
|
281
281
|
.map((group) => (_jsx("optgroup", { label: group, children: groupedOptions[group].map((option) => (_jsx("option", { value: option.value, children: option.label }, `${fieldId}-${option.value}`))) }, `${fieldId}-${group}`)))
|
|
282
|
-
: options.map((option) => (_jsx("option", { value: option.value, children: option.label }, `${fieldId}-${option.value}`)))] }), detail ? _jsx("div", { className: "text-[10px] lowercase
|
|
282
|
+
: 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));
|
|
283
283
|
}
|
|
284
284
|
if (field.type === 'text') {
|
|
285
285
|
const value = typeof binding.value === 'string' ? binding.value : '';
|
|
286
|
-
return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "block text-[11px] lowercase
|
|
286
|
+
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));
|
|
287
287
|
}
|
|
288
288
|
return null;
|
|
289
289
|
};
|
|
290
|
-
const chipClass = (active) => `rounded-full px-3 py-1 text-[11px] lowercase
|
|
291
|
-
? '
|
|
292
|
-
: 'bg-[var(--viewer-ui-color-tab-bg)] text-[var(--viewer-ui-color-text-muted)] border-
|
|
290
|
+
const chipClass = (active) => `rounded-full px-3 py-1 text-[11px] lowercase border transition ${active
|
|
291
|
+
? 'viewer-ui-kit-button viewer-ui-kit-button-primary viewer-ui-kit-border'
|
|
292
|
+
: '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)]'}`;
|
|
293
293
|
const renderToggleChip = (fieldId) => {
|
|
294
294
|
const field = PROMPT_PACK.fields[fieldId];
|
|
295
295
|
const binding = packFieldBindings[fieldId];
|
|
@@ -453,13 +453,13 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
|
|
|
453
453
|
const showContext = resolvedTab === 'context' || resolvedTab === 'all' || (isImagineMode && resolvedTab === 'render');
|
|
454
454
|
const promptPlaceholder = isImagineMode
|
|
455
455
|
? hasPromptScaffold
|
|
456
|
-
? 'Optional: add a prompt to refine the render, or rely on the
|
|
457
|
-
: 'Add a prompt (see user guide), and/or use the
|
|
456
|
+
? 'Optional: add a prompt to refine the render, or rely on the prompt blocks and context below.'
|
|
457
|
+
: 'Add a prompt (see user guide), and/or use the prompt blocks and viewpoint/context below.'
|
|
458
458
|
: renderHasGenerated
|
|
459
459
|
? 'New render only — captures a fresh screenshot. Use Adapt below to edit the last render.'
|
|
460
460
|
: hasPromptScaffold
|
|
461
|
-
? 'Optional: add a prompt to refine the render, or rely on the
|
|
462
|
-
: 'Add a prompt (see user guide), and/or use the
|
|
461
|
+
? 'Optional: add a prompt to refine the render, or rely on the prompt blocks and context below.'
|
|
462
|
+
: 'Add a prompt (see user guide), and/or use the prompt blocks and viewpoint/context below.';
|
|
463
463
|
const adaptPlaceholder = 'Describe changes to the last render';
|
|
464
464
|
const getPanelFieldIds = (panel) => {
|
|
465
465
|
const groupFields = panel.groups?.flatMap((group) => group.fields) ?? [];
|
|
@@ -515,39 +515,39 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
|
|
|
515
515
|
// ignore copy failures
|
|
516
516
|
}
|
|
517
517
|
};
|
|
518
|
-
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: "
|
|
519
|
-
? 'border
|
|
520
|
-
: 'border-
|
|
521
|
-
? 'border
|
|
522
|
-
: 'border-
|
|
518
|
+
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'
|
|
519
|
+
? 'viewer-ui-kit-border bg-[var(--viewer-ui-color-control-hover)] viewer-ui-kit-text'
|
|
520
|
+
: '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'
|
|
521
|
+
? 'viewer-ui-kit-border bg-[var(--viewer-ui-color-control-hover)] viewer-ui-kit-text'
|
|
522
|
+
: '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'
|
|
523
523
|
? `Use a reference image as the structural scaffold (replaces the volumetric scaffold) for this ${contextLabel}.`
|
|
524
|
-
: `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]
|
|
525
|
-
? 'border
|
|
524
|
+
: `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
|
|
525
|
+
? 'viewer-ui-kit-border bg-[var(--viewer-ui-color-control-hover)] viewer-ui-kit-text'
|
|
526
526
|
: '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) => {
|
|
527
527
|
onAdd(e.target.files);
|
|
528
528
|
e.currentTarget.value = '';
|
|
529
529
|
}, 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
|
|
530
530
|
.filter((image) => Boolean(image.url))
|
|
531
|
-
.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
|
|
532
|
-
return (_jsxs("div", { className: "space-y-6", children: [showRender && (_jsxs("div", { className: "space-y-4
|
|
531
|
+
.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"] }))] }))] }));
|
|
532
|
+
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) => {
|
|
533
533
|
const key = `render-${index}`;
|
|
534
|
-
return (_jsx("div", { className: "rounded border viewer-ui-kit-border viewer-ui-kit-surface px-
|
|
535
|
-
}) })), _jsx("button", { type: "button", onClick: handleCaptureRender, disabled: renderBusy, className: "w-full px-4 py-2.5
|
|
534
|
+
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}`));
|
|
535
|
+
}) })), _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, () => {
|
|
536
536
|
const next = !renderFeatureOpen;
|
|
537
537
|
setRenderFeatureOpen(next);
|
|
538
538
|
onRenderFeatureEnabledChange(next);
|
|
539
|
-
}, 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-
|
|
539
|
+
}, 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) => {
|
|
540
540
|
const key = `adapt-${index}`;
|
|
541
|
-
return (_jsx("div", { className: "rounded border viewer-ui-kit-border viewer-ui-kit-surface px-
|
|
542
|
-
}) })), _jsx("button", { type: "button", onClick: handleAdaptRender, disabled: renderBusy || !renderOutputImage, className: "w-full px-4 py-2.5
|
|
541
|
+
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}`));
|
|
542
|
+
}) })), _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, () => {
|
|
543
543
|
const next = !adaptFeatureOpen;
|
|
544
544
|
setAdaptFeatureOpen(next);
|
|
545
545
|
onAdaptFeatureEnabledChange(next);
|
|
546
|
-
}, adaptReferenceImages, canAddAdaptRefs, adaptDropActive, onAdaptReferenceImagesAdd, onAdaptReferenceImageRemove, handleAdaptDragEnter, handleAdaptDragOver, handleAdaptDragLeave, handleAdaptDrop, adaptReferenceMode, onAdaptReferenceModeChange, 'adapt', isImagineMode) })] })] })] })), showContext && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-2
|
|
547
|
-
? '
|
|
548
|
-
: '
|
|
546
|
+
}, 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
|
|
547
|
+
? 'viewer-ui-kit-button viewer-ui-kit-button-primary viewer-ui-kit-border'
|
|
548
|
+
: '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) => {
|
|
549
549
|
const open = panelOpen[panel.id] ?? true;
|
|
550
|
-
return (_jsxs("div", { className: "space-y-4
|
|
550
|
+
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) => {
|
|
551
551
|
const groupToggleFields = group.fields.filter((fieldId) => {
|
|
552
552
|
const field = PROMPT_PACK.fields[fieldId];
|
|
553
553
|
return field?.type === 'toggle' && field.ui === 'chip';
|
|
@@ -556,19 +556,19 @@ export default function RenderPanel({ isImagineMode, activeTab, promptPack, prom
|
|
|
556
556
|
const field = PROMPT_PACK.fields[fieldId];
|
|
557
557
|
return !(field?.type === 'toggle' && field.ui === 'chip');
|
|
558
558
|
});
|
|
559
|
-
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
|
|
559
|
+
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));
|
|
560
560
|
}) })) : (_jsx("div", { className: "space-y-4", children: panel.fields?.map((fieldId) => renderPackField(fieldId)) }))] }))] }, panel.id));
|
|
561
|
-
}) })] })), 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
|
|
561
|
+
}) })] })), 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) => {
|
|
562
562
|
const key = `render-history-${index}`;
|
|
563
|
-
return (_jsx("div", { className: "rounded border viewer-ui-kit-border viewer-ui-kit-surface px-2 py-2 text-[11px] viewer-ui-kit-text
|
|
564
|
-
}) }))] }), _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
|
|
563
|
+
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}`));
|
|
564
|
+
}) }))] }), _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) => {
|
|
565
565
|
const key = `adapt-history-${index}`;
|
|
566
|
-
return (_jsx("div", { className: "rounded border viewer-ui-kit-border viewer-ui-kit-surface px-2 py-2 text-[11px] viewer-ui-kit-text
|
|
567
|
-
}) }))] })] })), 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
|
|
566
|
+
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}`));
|
|
567
|
+
}) }))] })] })), 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) => {
|
|
568
568
|
if (index !== activeFullPromptIndex)
|
|
569
569
|
return null;
|
|
570
570
|
const stamp = new Date().toISOString().replace(/[:.]/g, '-');
|
|
571
571
|
const sections = formatPromptSections(item);
|
|
572
|
-
return (_jsxs("div", { className: "rounded border viewer-ui-kit-border viewer-ui-kit-surface px-3 py-3 text-[10px] viewer-ui-kit-text
|
|
572
|
+
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}`));
|
|
573
573
|
})] }))] }))] }));
|
|
574
574
|
}
|