style: emphasize authoring phase visuals

This commit is contained in:
lda
2026-07-12 21:00:22 +07:00 Verified
parent 40abce8f9e
commit e0d2ab763e
5 changed files with 100 additions and 10 deletions
@@ -43,6 +43,14 @@ describe("AuthoringPhaseVisual", () => {
expect(screen.getByText(/valid draft/i)).toBeInTheDocument();
});
it.each(["diagnose", "repair"] as const)("marks the %s authoring focus", (focus) => {
render(<AuthoringPhaseVisual projection={projectPreparedAuthoringPhase("validate")} focus={focus} />);
expect(screen.getByRole("region", { name: /validation repair evidence/i })).toHaveAttribute(
"data-authoring-focus",
focus,
);
});
it("shows immutable artifact identity and version", () => {
render(<AuthoringPhaseVisual projection={projectPreparedAuthoringPhase("artifact")} />);
expect(screen.getByText("lda_report_case_study")).toBeInTheDocument();
@@ -12,6 +12,7 @@ import type { AuthoringPhaseProjection } from "./authoring-projection.js";
type AuthoringPhaseVisualProps = {
readonly projection: AuthoringPhaseProjection;
readonly focus?: "full" | "diagnose" | "repair";
};
const InventoryVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["visual"], { kind: "inventory" }> }) => (
@@ -40,10 +41,22 @@ const GraphVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["vis
</section>
);
const RepairVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["visual"], { kind: "repair" }> }) => (
<section className="authoring-visual authoring-visual--repair" aria-label="validation repair evidence" data-presentation-surface="editorial" data-visual-role="authoring-phase">
const RepairVisual = ({
visual,
focus,
}: {
readonly visual: Extract<AuthoringPhaseProjection["visual"], { kind: "repair" }>;
readonly focus: "full" | "diagnose" | "repair";
}) => (
<section
className="authoring-visual authoring-visual--repair"
aria-label="validation repair evidence"
data-presentation-surface="editorial"
data-visual-role="authoring-phase"
data-authoring-focus={focus}
>
<div className="authoring-repair__diagnostic"><AlertTriangle aria-hidden="true" /><span>Diagnostic</span><strong>{visual.diagnostic}</strong></div>
<ArrowRight aria-hidden="true" />
<ArrowRight className="authoring-repair__connector" aria-hidden="true" />
<div className="authoring-repair__correction"><Link2 aria-hidden="true" /><span>Repair</span><code>{visual.correction}</code></div>
<div className="authoring-repair__status"><CheckCircle2 aria-hidden="true" /><strong>{visual.status}</strong></div>
</section>
@@ -69,11 +82,11 @@ const BindingsVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["
);
/** Renders the factual product artifact appropriate to one authoring phase. */
export const AuthoringPhaseVisual = ({ projection }: AuthoringPhaseVisualProps) => {
export const AuthoringPhaseVisual = ({ projection, focus = "full" }: AuthoringPhaseVisualProps) => {
switch (projection.visual.kind) {
case "inventory": return <InventoryVisual visual={projection.visual} />;
case "graph": return <GraphVisual visual={projection.visual} />;
case "repair": return <RepairVisual visual={projection.visual} />;
case "repair": return <RepairVisual visual={projection.visual} focus={focus} />;
case "artifact": return <ArtifactVisual visual={projection.visual} />;
case "bindings": return <BindingsVisual visual={projection.visual} />;
}