lda.chat/lda-wf
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: compose Scene 8 product results

Browse Source
This commit is contained in:
lda
2026-07-13 22:05:08 +07:00 Verified
parent 92bafebf74
commit 95db1ce586
2 changed files with 281 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/apps/console/src/presentation/presentation-css.test.ts
+39 -23
View File
@@ -138,27 +138,49 @@ describe("presentation.css", () => {
expect(editorialScene).not.toContain("0.76fr");
});
it("scopes Diagnose and Repair focus styling to the prepared lifecycle frame", () => {
const preparedFrame = '.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame';
const diagnose = cssBlocks(css, `${preparedFrame} .authoring-visual--repair[data-authoring-focus="diagnose"]`)
it("gives factual result roots a scrollable editorial hierarchy", () => {
const result = cssBlocks(css, ".authoring-result")
.find((body) => body.includes("grid-template-rows: auto minmax(0, 1fr);"));
const diagnostic = cssBlocks(css, ".authoring-result--diagnostic .authoring-result__body")
.find((body) => body.includes("grid-template-columns: minmax(0, 1fr);"));
const repair = cssBlocks(css, `${preparedFrame} .authoring-visual--repair[data-authoring-focus="repair"]`)
.find((body) => body.includes("grid-template-columns: minmax(0, 1fr);"));
const diagnoseEvidence = cssBlocks(
const primaryDiagnostic = cssBlocks(
css,
`${preparedFrame} .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__diagnostic`,
).find((body) => body.includes("border-inline-start: 3px solid"));
const repairEvidence = cssBlocks(
'.authoring-result--diagnostic [data-result-primary="true"]',
).find((body) => body.includes("min-width: 0;"));
const repair = cssBlocks(css, ".authoring-result--repair .authoring-result__body")
.find((body) => body.includes("gap: 1rem;"));
const repairCommand = cssBlocks(
css,
`${preparedFrame} .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__correction`,
).find((body) => body.includes("border-inline-start: 3px solid"));
'.authoring-result--repair [data-result-primary="true"] .authoring-result__rows > div:first-child',
).find((body) => body.includes("border-block"));
const status = cssBlocks(css, ".authoring-result__header > strong")
.find((body) => body.includes("border: 1px solid"));
expect(diagnose).toContain("grid-template-columns: minmax(0, 1fr);");
expect(diagnoseEvidence).toContain("border-inline-start: 3px solid");
expect(repair).toContain("grid-template-columns: minmax(0, 1fr);");
expect(repairEvidence).toContain("border-inline-start: 3px solid");
expect(css).toContain(`${preparedFrame} .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__correction`);
expect(css).toContain(`${preparedFrame} .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__status`);
expect(result).toContain("min-height: 0;");
expect(result).toContain("overflow: auto;");
expect(diagnostic).toContain("grid-template-columns: minmax(0, 1fr);");
expect(primaryDiagnostic).toContain("min-width: 0;");
expect(repair).toContain("gap: 1rem;");
expect(repairCommand).toContain("border-block");
expect(status).toContain("border: 1px solid");
expect(css).not.toContain(".authoring-repair__");
expect(css).not.toContain(".authoring-visual--repair");
});
it("keeps result evidence internally scrollable and stacks metadata on narrow canvases", () => {
const compactContainer = cssBlock(css, "@container presentation-canvas (max-width: 1050px)") ?? "";
const narrowContainer = cssBlock(css, "@container presentation-canvas (max-width: 600px)") ?? "";
const compactResult = cssBlocks(compactContainer, ".authoring-result")
.find((body) => body.includes("overflow: auto;"));
const narrowBody = cssBlocks(narrowContainer, ".authoring-result__body")
.find((body) => body.includes("grid-template-columns: minmax(0, 1fr);"));
const narrowRows = cssBlocks(narrowContainer, ".authoring-result__rows")
.find((body) => body.includes("grid-template-columns: minmax(0, 1fr);"));
expect(compactResult).toContain("min-height: 0;");
expect(compactResult).toContain("overflow: auto;");
expect(narrowBody).toContain("grid-template-columns: minmax(0, 1fr);");
expect(narrowRows).toContain("grid-template-columns: minmax(0, 1fr);");
});
it("gives the prepared lifecycle rail and operation frame the primary hierarchy", () => {
@@ -201,10 +223,6 @@ describe("presentation.css", () => {
compactContainer,
'.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame',
).find((body) => body.includes("grid-template-rows: auto auto;"));
const compactRepair = cssBlocks(
compactContainer,
'.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair',
).find((body) => body.includes("grid-template-columns: minmax(0, 1fr);"));
const narrowContainer = cssBlock(css, "@container presentation-canvas (max-width: 600px)") ?? "";
const narrowScene = cssBlocks(narrowContainer, ".prepared-lifecycle-scene")
.find((body) => body.includes("grid-template-columns: minmax(0, 1fr);") && body.includes("grid-template-areas:"));
@@ -225,8 +243,6 @@ describe("presentation.css", () => {
expect(compactFrame).toContain("grid-template-rows: auto auto;");
expect(compactFrame).toContain("min-height: 18rem;");
expect(compactFrame).toContain("overflow: visible;");
expect(compactRepair).toContain("grid-template-columns: minmax(0, 1fr);");
expect(compactRepair).toContain("min-width: 0;");
expect(narrowScene).toContain("grid-template-columns: minmax(0, 1fr);");
expect(narrowScene).toContain('grid-template-areas: "presentation" "discussion" "assistant";');
expect(narrowScene).toContain("grid-template-rows: max-content max-content max-content;");
web/apps/console/src/presentation/presentation.css
+242 -255
View File
@@ -3815,52 +3815,6 @@
color: var(--authoring-muted);
}
/* Diagnose and Repair are distinct editorial cuts of the recorded validate phase. */
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
align-content: start;
gap: 0.75rem;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__diagnostic {
grid-column: 1;
min-height: 0;
border-inline-start: 3px solid var(--accent-amber);
background: color-mix(in oklch, var(--authoring-paper) 90%, var(--accent-amber));
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__connector,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__correction,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__status {
display: none;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
align-content: start;
gap: 0.75rem;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__diagnostic,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__connector {
display: none;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__correction {
grid-column: 1;
min-height: 0;
border-inline-start: 3px solid var(--success);
background: color-mix(in oklch, var(--authoring-paper) 90%, var(--success));
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__status {
grid-column: 1;
justify-content: flex-start;
color: var(--success);
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .presentation-assistant-pane {
background: color-mix(in oklch, var(--authoring-paper) 92%, var(--authoring-muted));
border-color: var(--authoring-rule);
@@ -3977,35 +3931,27 @@
gap: 0.7rem;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
width: 100%;
min-width: 0;
height: auto;
gap: 0.7rem;
align-content: start;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__diagnostic,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__correction {
min-width: 0;
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result {
min-height: 0;
padding: 0.85rem;
height: 100%;
overflow: auto;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__connector {
display: none;
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result__rows {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__status {
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result--inventory .authoring-result__body,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result--artifact .authoring-result__body,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result--deployment .authoring-result__body {
grid-template-columns: minmax(0, 1fr);
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result--inventory .authoring-result__contract,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result--inventory .authoring-result__list-section,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result--artifact .authoring-result__list-section,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result--deployment .authoring-result__list-section {
grid-column: 1;
justify-content: flex-start;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__diagnostic strong,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__correction code {
overflow-wrap: anywhere;
}
.problem-loop-scene[data-presentation-surface="editorial"] {
@@ -4060,6 +4006,27 @@
overflow: visible;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result {
height: auto;
max-height: 100%;
overflow: auto;
padding-inline: 0;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result__header {
flex-direction: column;
gap: 0.7rem;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result__body {
grid-template-columns: minmax(0, 1fr);
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result__rows,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .authoring-result--repair [data-result-primary="true"] .authoring-result__rows {
grid-template-columns: minmax(0, 1fr);
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] > .presentation-assistant-pane {
grid-area: assistant;
align-self: start;
@@ -4092,223 +4059,243 @@
font: 650 0.8rem/1.35 var(--font-evidence);
}
.authoring-visual--inventory {
/* Result roots own the evidence scroll so the scene chrome can stay fixed. */
.authoring-result {
display: grid;
grid-template-columns: minmax(15rem, 0.85fr) auto minmax(21rem, 1.15fr);
align-items: center;
gap: 1.5rem;
grid-template-rows: auto minmax(0, 1fr);
gap: 1rem;
min-width: 0;
min-height: 0;
height: 100%;
overflow: auto;
padding: 0.2rem 0.1rem 0.4rem;
color: var(--authoring-ink, var(--text-primary));
}
.authoring-inventory__sources {
display: grid;
gap: 0.65rem;
}
.authoring-inventory__sources > div,
.authoring-inventory__contract {
.authoring-result__header {
display: flex;
align-items: center;
gap: 0.7rem;
}
.authoring-inventory__sources > div {
min-height: 3.4rem;
padding: 0.8rem 1rem;
border-bottom: 1px solid var(--stage-line);
}
.authoring-inventory__contract {
align-items: flex-start;
flex-direction: column;
justify-content: center;
min-height: 11rem;
padding: 1.4rem;
background: color-mix(in oklch, var(--authoring-paper, white) 88%, var(--authoring-muted, black));
border-radius: 0.65rem;
justify-content: space-between;
gap: 1rem;
min-width: 0;
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--authoring-rule, var(--stage-line));
}
.authoring-inventory__contract strong,
.authoring-inventory__contract span {
.authoring-result__heading {
display: flex;
align-items: flex-start;
gap: 0.7rem;
min-width: 0;
}
.authoring-result__heading > svg {
width: 1.5rem;
height: 1.5rem;
color: var(--authoring-ink, var(--text-primary));
}
.authoring-result__heading > div {
display: grid;
gap: 0.25rem;
min-width: 0;
}
.authoring-result__heading span {
font: 700 0.88rem/1.1 var(--font-display);
letter-spacing: 0.06em;
}
.authoring-result__heading code,
.authoring-result__header > strong,
.authoring-result__status,
.authoring-result__rows dt,
.authoring-result__list-section h3,
.authoring-result__contract h3 {
font-family: var(--font-evidence);
}
.authoring-result__heading code {
overflow-wrap: anywhere;
color: var(--authoring-muted, var(--text-secondary));
font-size: 0.72rem;
}
.authoring-result__header > strong,
.authoring-result__status {
flex: 0 0 auto;
margin: 0;
padding: 0.35rem 0.55rem;
border: 1px solid var(--authoring-rule, var(--stage-line));
color: var(--authoring-ink, var(--text-primary));
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.1;
text-transform: uppercase;
}
.authoring-result__status {
display: flex;
align-items: center;
gap: 0.5rem;
}
.authoring-visual__arrow {
color: var(--accent-cyan);
}
.authoring-visual--graph {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
}
.authoring-graph__node {
.authoring-result__body {
display: grid;
place-items: center;
gap: 0.55rem;
min-width: 10.5rem;
min-height: 7rem;
border: 1px solid var(--authoring-rule, var(--stage-line));
border-radius: 0.7rem;
background: color-mix(in oklch, var(--authoring-paper, white) 88%, var(--authoring-muted, black));
color: var(--authoring-ink, var(--text-primary));
align-content: start;
gap: 1rem;
min-width: 0;
min-height: 0;
overflow: visible;
}
.authoring-graph__edge,
.authoring-graph__route {
.authoring-result__rows {
display: grid;
place-items: center;
gap: 0.3rem;
color: var(--accent-cyan);
font: 700 0.68rem/1.2 var(--font-evidence);
}
.authoring-graph__end {
display: grid;
place-items: center;
width: 4.4rem;
height: 4.4rem;
border: 2px solid var(--accent-cyan);
border-radius: 50%;
font: 800 0.78rem/1 var(--font-evidence);
}
.authoring-visual--repair {
display: grid;
grid-template-columns: minmax(15rem, 1fr) auto minmax(15rem, 1fr);
grid-template-rows: 1fr auto;
align-items: center;
gap: 1rem 1.4rem;
}
.authoring-repair__diagnostic,
.authoring-repair__correction {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.55rem 0.7rem;
align-content: center;
min-height: 9rem;
padding: 1.2rem;
border: 1px solid var(--authoring-rule, var(--stage-line));
border-radius: 0.65rem;
}
.authoring-repair__diagnostic strong,
.authoring-repair__correction code {
grid-column: 1 / -1;
}
.authoring-repair__diagnostic svg {
color: var(--accent-amber);
}
.authoring-repair__correction svg,
.authoring-repair__status svg {
color: var(--success);
}
.authoring-repair__status {
grid-column: 1 / -1;
display: flex;
justify-content: center;
align-items: center;
gap: 0.55rem;
}
.authoring-visual--artifact {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1.3rem;
width: min(100%, 52rem);
margin-inline: auto;
padding: 1.6rem 1.8rem;
border-block: 1px solid var(--authoring-rule, var(--stage-line));
color: var(--authoring-ink, var(--text-primary));
}
.authoring-visual--artifact > svg {
width: 2.8rem;
height: 2.8rem;
color: var(--accent-cyan);
}
.authoring-visual--artifact > div {
display: grid;
gap: 0.3rem;
}
.authoring-visual--artifact > div strong {
font: 700 1.5rem/1.1 var(--font-evidence);
}
.authoring-visual--artifact dl {
display: flex;
gap: 1.5rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 0.9rem;
min-width: 0;
margin: 0;
}
.authoring-visual--artifact dl div {
.authoring-result__rows > div {
display: grid;
gap: 0.2rem;
}
.authoring-visual--artifact dt {
color: var(--text-secondary);
font-size: 0.72rem;
}
.authoring-visual--artifact dd {
margin: 0;
font-weight: 700;
}
.authoring-visual--bindings {
display: grid;
grid-template-rows: auto 1fr;
gap: 0.8rem;
}
.authoring-visual--bindings header {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.8rem;
padding-bottom: 0.75rem;
gap: 0.28rem;
min-width: 0;
padding: 0.55rem 0;
border-bottom: 1px solid var(--authoring-rule, var(--stage-line));
}
.authoring-visual--bindings header div {
.authoring-result__rows dt {
color: var(--authoring-muted, var(--text-secondary));
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1.1;
text-transform: uppercase;
}
.authoring-result__rows dd {
min-width: 0;
margin: 0;
overflow-wrap: anywhere;
line-height: 1.35;
}
.authoring-result__list-section,
.authoring-result__contract {
min-width: 0;
padding-top: 0.75rem;
border-top: 1px solid var(--authoring-rule, var(--stage-line));
}
.authoring-result__list-section h3,
.authoring-result__contract h3 {
margin: 0 0 0.5rem;
color: var(--authoring-muted, var(--text-secondary));
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1.1;
text-transform: uppercase;
}
.authoring-result__list-section ul {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.authoring-visual--bindings header b {
display: flex;
align-items: center;
gap: 0.4rem;
color: var(--success);
.authoring-result__list-section li {
min-width: 0;
padding: 0.38rem 0;
border-bottom: 1px solid var(--authoring-rule, var(--stage-line));
overflow-wrap: anywhere;
line-height: 1.35;
}
.authoring-bindings__rows {
.authoring-result__explanation,
.authoring-result__prior {
min-width: 0;
color: var(--authoring-muted, var(--text-secondary));
line-height: 1.45;
}
.authoring-result__explanation {
max-width: 52rem;
padding-inline-start: 0.8rem;
border-inline-start: 3px solid var(--accent-amber);
}
.authoring-result__prior {
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--authoring-rule, var(--stage-line));
}
.authoring-result--inventory .authoring-result__body,
.authoring-result--artifact .authoring-result__body,
.authoring-result--deployment .authoring-result__body {
grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.9fr);
}
.authoring-result--inventory .authoring-result__rows,
.authoring-result--artifact .authoring-result__rows,
.authoring-result--deployment .authoring-result__rows {
grid-column: 1 / -1;
}
.authoring-result--inventory .authoring-result__list-section,
.authoring-result--artifact .authoring-result__list-section,
.authoring-result--deployment .authoring-result__list-section {
grid-column: 1;
}
.authoring-result--inventory .authoring-result__contract {
grid-column: 2;
}
.authoring-result--draft .authoring-result__body {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.authoring-result--draft .authoring-result__rows {
grid-column: 1 / -1;
}
.authoring-result--diagnostic .authoring-result__body {
grid-template-columns: minmax(0, 1fr);
max-width: 54rem;
}
.authoring-result--diagnostic [data-result-primary="true"] {
min-width: 0;
padding-inline-start: 0.9rem;
border-inline-start: 3px solid var(--accent-amber);
}
.authoring-result--repair .authoring-result__body {
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
max-width: 58rem;
}
.authoring-result--repair [data-result-primary="true"] {
display: grid;
align-content: center;
gap: 0.25rem;
gap: 1rem;
min-width: 0;
padding-inline-start: 0.9rem;
border-inline-start: 3px solid var(--success);
}
.authoring-bindings__rows > div {
display: grid;
grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr);
align-items: center;
gap: 0.8rem;
min-height: 2.25rem;
padding: 0.35rem 0.8rem;
background: color-mix(in oklch, var(--authoring-paper, white) 88%, var(--authoring-muted, black));
color: var(--authoring-ink, var(--text-primary));
.authoring-result--repair [data-result-primary="true"] .authoring-result__rows {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.authoring-bindings__rows code:last-child {
color: var(--accent-cyan);
.authoring-result--repair [data-result-primary="true"] .authoring-result__rows > div:first-child {
grid-column: 1 / -1;
padding: 0.8rem 0.9rem;
border-block: 1px solid var(--authoring-rule, var(--stage-line));
background: color-mix(in oklch, var(--authoring-paper, white) 92%, var(--success));
}