Vito
caa9649f32
* feat(db): add pair schema and stage restore migrations for #193 * feat(database): persist reusable ordered prompt pairs (#193) * feat(api): expose reusable pairs and atomic metadata enrichment (#193) * feat(metadata): resolve canonical prompt pairs with bounded provenance (#193) * feat(scan): enrich image pairs without guessing or duplicate links (#193) * fix(database): preserve pair tags during global maintenance (#193) * feat(tracking): enrich live image pairs and cancel scans safely (#193) * feat(nodes): encode paired prompts and count cached recipe runs (#193) * fix(database): validate restored pair ownership and provenance (#193) * feat(admin): report pair scan outcomes and cancellation (#193) * feat(ui): add paired prompt editor and explicit recipe library for #193 * fix(autocomplete): include reusable pair metadata vocabulary (#193) * fix(pairs): honor recent sorting and conservative scan outcomes (#193) * fix(ui): protect paired draft saves and clarify negative variants (#193) * fix(metadata): preserve bounded paired execution evidence (#193) * fix(tracking): follow actual pair output roles and prefer execution evidence (#193) * docs(pairs): document live validation and retain renderer screenshots (#193) * test(api): inject disposable databases before API startup (#194) * test(api): canonicalize portable temporary gallery roots (#194) * docs(ui): prototype branching negative variant history (#193) * docs(ui): show selected negative beneath positive in timeline concept (#193) * docs: retain approved timeline for later gallery redesign (#193) * test(db): close restore fixture connections before cleanup (#194) * test(db): reuse existing handle guards in all pair fixtures (#194) * chore: clarify rollback test and intentional exception handling (#193)
49 lines
4.5 KiB
CSS
49 lines
4.5 KiB
CSS
.pm-focused { box-sizing: border-box; inline-size: 100%; block-size: 100%; min-block-size: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: auto; container: pm-editor / inline-size; border-radius: 5px; }
|
|
.pm-focused [hidden] { display: none !important; }
|
|
.pm-editor-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.pm-editor-toolbar > strong { margin-inline-end: auto; font-weight: 500; }
|
|
.pm-focused .ca-field-label { align-self: flex-start; margin-inline: 0; text-align: start; }
|
|
.pm-editor-workspace, .pm-editor-compose { display: contents; }
|
|
.pm-focused .pm-editor-main { display: flex; flex: 1; min-block-size: 180px; flex-direction: column; align-items: stretch; gap: 5px; text-align: start; }
|
|
.pm-focused textarea { flex: 1; inline-size: 100%; min-block-size: 160px; resize: vertical; line-height: 1.65; }
|
|
.pm-editor-details { border-block-end: 1px solid var(--ca-line); padding-block: 5px; }
|
|
.pm-editor-details > summary { color: var(--ca-muted); cursor: pointer; }
|
|
.pm-editor-fields { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding-block: 10px; }
|
|
.pm-editor-fields .ca-field { display: flex; flex-direction: column; align-items: stretch; gap: 5px; text-align: start; }
|
|
.pm-editor-fields input { inline-size: 100%; }
|
|
.pm-editor-preview { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 10px; border-radius: 5px; background: var(--ca-field); }
|
|
.pm-editor-status, .pm-editor-connection { color: var(--ca-muted); font-size: 12px; margin: 0; overflow-wrap: anywhere; }
|
|
.pm-editor-error { color: var(--ca-error-text); background: var(--ca-error-bg); padding: 8px; border-radius: 5px; }
|
|
.pm-editor-library { display: grid; gap: 10px; border-block-start: 1px solid var(--ca-line); padding-block-start: 12px; }
|
|
.pm-editor-library h3 { font: inherit; font-weight: 500; margin: 0; }
|
|
.pm-editor-query { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.pm-editor-query input { flex: 1; inline-size: 100%; min-inline-size: 100px; }
|
|
.pm-editor-results { display: grid; grid-auto-rows: max-content; align-content: start; gap: 6px; max-block-size: 300px; overflow: auto; }
|
|
.pm-focused button.pm-editor-result { flex-direction: column; align-items: stretch; text-align: start; white-space: normal; overflow-wrap: anywhere; }
|
|
.pm-editor-result[aria-pressed="true"] { border-color: var(--ca-accent); box-shadow: inset 3px 0 var(--ca-accent); }
|
|
.pm-editor-result-meta { color: var(--ca-muted); font-size: 11px; }
|
|
.pm-editor-result > span:first-child { flex-shrink: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; }
|
|
.pm-editor-selection { display: grid; gap: 10px; }
|
|
.pm-editor-selection .pm-editor-row { justify-content: space-between; }
|
|
@container pm-editor (inline-size > 420px) { .pm-editor-fields { grid-template-columns: repeat(2,minmax(0,1fr)); } }
|
|
/* Contain intrinsic sizing so Nodes 2.0 keeps the widget within the node. */
|
|
.pm-split { contain: size; }
|
|
.pm-split .pm-editor-workspace { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; flex: 1; min-inline-size: 0; }
|
|
.pm-split .pm-editor-compose { display: flex; flex-direction: column; gap: 10px; min-inline-size: 0; min-block-size: 300px; }
|
|
.pm-split .pm-editor-library { min-inline-size: 0; align-content: start; }
|
|
.pm-split .pm-editor-preview { box-sizing: border-box; max-block-size: 180px; overflow: auto; }
|
|
@container pm-editor (inline-size > 720px) {
|
|
.pm-split .pm-editor-workspace { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr); min-block-size: 0; }
|
|
.pm-split .pm-editor-compose, .pm-split .pm-editor-library { min-block-size: 0; overflow: auto; }
|
|
.pm-split .pm-editor-library { border-block-start: 0; border-inline-start: 1px solid var(--ca-line); padding-block-start: 0; padding-inline-start: 12px; }
|
|
.pm-split .pm-editor-fields { grid-template-columns: minmax(0,1fr); }
|
|
}
|
|
|
|
.pm-pair-texts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; flex: 1; min-block-size: 180px; min-inline-size: 0; }
|
|
.pm-pair-text-slot { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; }
|
|
.pm-pair-text-slot > .pm-editor-main { display: flex; flex-direction: column; align-items: stretch; gap: 5px; flex: 1; min-block-size: 180px; }
|
|
.pm-pair .pm-editor-toolbar { flex-shrink: 0; }
|
|
@container pm-editor (inline-size <= 720px) {
|
|
.pm-pair-texts { grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(2,minmax(180px,1fr)); flex: none; }
|
|
}
|