feat(products-ui): import preview — tiles, drill-in diffs, confirm/cancel (§5.4)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-06-11 16:34:33 -07:00
parent 188494272a
commit 4141285b89
2 changed files with 367 additions and 4 deletions
+33
View File
@@ -161,15 +161,48 @@
/* ── diff list (preview records, Task 13) ───────────────────────────────────── */
.difflist { list-style: none; margin: 0; padding: 0; }
.difflist > li { padding: 12px 4px; border-bottom: 1px solid var(--border-soft); }
.difflist__item { padding: 12px 4px; border-bottom: 1px solid var(--border-soft); }
.difflist__item > summary {
cursor: pointer;
font-size: 14px;
color: var(--text-on-dark-soft);
transition: color var(--dur-fast) var(--ease);
}
.difflist__item > summary:hover { color: var(--wv-starlight); }
.difflist__item[open] > summary { margin-bottom: 8px; }
.difflist__handle { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.diffchange {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12.5px;
line-height: 1.6;
color: var(--text-on-dark-soft);
}
.diffchange--head { color: var(--text-on-dark-mute); margin-top: 6px; }
.diffchange__glyph--add { color: var(--st-add); }
.diffchange__glyph--del { color: var(--st-error); }
/* ── kind chip (preview record summaries, Task 13) ──────────────────────────── */
.kindchip {
display: inline-block;
font-family: var(--wv-font-display);
font-weight: var(--weight-medium);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1;
padding: 3px 9px 2px;
border-radius: var(--radius-pill);
border: 1px solid var(--border-strong);
color: var(--text-on-dark-mute);
}
.kindchip--add { color: var(--st-add); border-color: var(--st-add); }
.kindchip--update { color: var(--st-update); border-color: var(--st-update); }
.kindchip--error { color: var(--st-error); border-color: var(--st-error); }
/* preview layout rhythm: tiles + errortable sit between header and difflist */
.products .tiles { margin: 24px 0 18px; }
.products .errortable { margin: 0 0 18px; }
/* ── sticky confirm/cancel footer (preview, Task 13) ────────────────────────── */
.sticky-footer {
position: sticky;