diff --git a/.impeccable.md b/.impeccable.md index 40c6b93..c11e220 100644 --- a/.impeccable.md +++ b/.impeccable.md @@ -71,4 +71,4 @@ All buttons use `active:scale-95` for press feedback. Hover transitions are slow - Tailwind CSS v4 with CSS custom properties (no tailwind.config) - `next-themes` for class-based light/dark switching - Fraunces + IBM Plex Sans + IBM Plex Mono (Google Fonts via next/font) -- CodeMirror 6 for code rendering, git-diff-view for diffs +- `@pierre/diffs` for diffs, code rendering, and the artifact editor; `@pierre/trees` for multi-file navigation diff --git a/.impeccable/design.json b/.impeccable/design.json new file mode 100644 index 0000000..bf72b5f --- /dev/null +++ b/.impeccable/design.json @@ -0,0 +1,383 @@ +{ + "schemaVersion": 2, + "generatedAt": "2026-08-07T17:53:19Z", + "title": "Design System: agent-render", + "extensions": { + "colorMeta": { + "page-canvas": { + "role": "neutral", + "displayName": "Instrument Canvas", + "canonical": "#ebe7dd", + "tonalRamp": ["oklch(15% 0.025 78)", "oklch(27% 0.025 78)", "oklch(39% 0.025 78)", "oklch(51% 0.025 78)", "oklch(63% 0.025 78)", "oklch(75% 0.025 78)", "oklch(87% 0.025 78)", "oklch(95% 0.025 78)"] + }, + "page-canvas-dark": { + "role": "neutral", + "displayName": "Dark Instrument Canvas", + "canonical": "#14110d", + "tonalRamp": ["oklch(15% 0.015 70)", "oklch(27% 0.015 70)", "oklch(39% 0.015 70)", "oklch(51% 0.015 70)", "oklch(63% 0.015 70)", "oklch(75% 0.015 70)", "oklch(87% 0.015 70)", "oklch(95% 0.015 70)"] + }, + "primary-ink": { + "role": "neutral", + "displayName": "Primary Ink", + "canonical": "#211d18", + "tonalRamp": ["oklch(15% 0.015 70)", "oklch(27% 0.015 70)", "oklch(39% 0.015 70)", "oklch(51% 0.015 70)", "oklch(63% 0.015 70)", "oklch(75% 0.015 70)", "oklch(87% 0.015 70)", "oklch(95% 0.015 70)"] + }, + "muted-ink": { + "role": "neutral", + "displayName": "Muted Ink", + "canonical": "#5f584d", + "tonalRamp": ["oklch(15% 0.02 75)", "oklch(27% 0.02 75)", "oklch(39% 0.02 75)", "oklch(51% 0.02 75)", "oklch(63% 0.02 75)", "oklch(75% 0.02 75)", "oklch(87% 0.02 75)", "oklch(95% 0.02 75)"] + }, + "bone-key": { + "role": "neutral", + "displayName": "Aged Bone Key", + "canonical": "#e3ddd0", + "tonalRamp": ["oklch(15% 0.025 78)", "oklch(27% 0.025 78)", "oklch(39% 0.025 78)", "oklch(51% 0.025 78)", "oklch(63% 0.025 78)", "oklch(75% 0.025 78)", "oklch(87% 0.025 78)", "oklch(95% 0.025 78)"] + }, + "bone-key-dark": { + "role": "neutral", + "displayName": "Dark-Shell Aged Bone Key", + "canonical": "#cfc6b4", + "tonalRamp": ["oklch(15% 0.03 78)", "oklch(27% 0.03 78)", "oklch(39% 0.03 78)", "oklch(51% 0.03 78)", "oklch(63% 0.03 78)", "oklch(75% 0.03 78)", "oklch(87% 0.03 78)", "oklch(95% 0.03 78)"] + }, + "bone-key-lift": { + "role": "neutral", + "displayName": "Lifted Bone Key", + "canonical": "#f2ede3", + "tonalRamp": ["oklch(15% 0.02 78)", "oklch(27% 0.02 78)", "oklch(39% 0.02 78)", "oklch(51% 0.02 78)", "oklch(63% 0.02 78)", "oklch(75% 0.02 78)", "oklch(87% 0.02 78)", "oklch(95% 0.02 78)"] + }, + "bone-key-lift-dark": { + "role": "neutral", + "displayName": "Dark-Shell Lifted Bone Key", + "canonical": "#dcd5c5", + "tonalRamp": ["oklch(15% 0.025 78)", "oklch(27% 0.025 78)", "oklch(39% 0.025 78)", "oklch(51% 0.025 78)", "oklch(63% 0.025 78)", "oklch(75% 0.025 78)", "oklch(87% 0.025 78)", "oklch(95% 0.025 78)"] + }, + "bone-key-mid": { + "role": "neutral", + "displayName": "Pressed Bone Key", + "canonical": "#d2cab9", + "tonalRamp": ["oklch(15% 0.03 78)", "oklch(27% 0.03 78)", "oklch(39% 0.03 78)", "oklch(51% 0.03 78)", "oklch(63% 0.03 78)", "oklch(75% 0.03 78)", "oklch(87% 0.03 78)", "oklch(95% 0.03 78)"] + }, + "bone-key-mid-dark": { + "role": "neutral", + "displayName": "Dark-Shell Pressed Bone Key", + "canonical": "#b8ae9c", + "tonalRamp": ["oklch(15% 0.03 78)", "oklch(27% 0.03 78)", "oklch(39% 0.03 78)", "oklch(51% 0.03 78)", "oklch(63% 0.03 78)", "oklch(75% 0.03 78)", "oklch(87% 0.03 78)", "oklch(95% 0.03 78)"] + }, + "bone-key-edge": { + "role": "neutral", + "displayName": "Bone Key Edge", + "canonical": "#958a79", + "tonalRamp": ["oklch(15% 0.03 72)", "oklch(27% 0.03 72)", "oklch(39% 0.03 72)", "oklch(51% 0.03 72)", "oklch(63% 0.03 72)", "oklch(75% 0.03 72)", "oklch(87% 0.03 72)", "oklch(95% 0.03 72)"] + }, + "bone-key-edge-dark": { + "role": "neutral", + "displayName": "Dark-Shell Bone Key Edge", + "canonical": "#756b5b", + "tonalRamp": ["oklch(15% 0.03 72)", "oklch(27% 0.03 72)", "oklch(39% 0.03 72)", "oklch(51% 0.03 72)", "oklch(63% 0.03 72)", "oklch(75% 0.03 72)", "oklch(87% 0.03 72)", "oklch(95% 0.03 72)"] + }, + "chassis": { + "role": "neutral", + "displayName": "Charcoal Chassis", + "canonical": "#211d18", + "tonalRamp": ["oklch(15% 0.015 70)", "oklch(27% 0.015 70)", "oklch(39% 0.015 70)", "oklch(51% 0.015 70)", "oklch(63% 0.015 70)", "oklch(75% 0.015 70)", "oklch(87% 0.015 70)", "oklch(95% 0.015 70)"] + }, + "chassis-dark": { + "role": "neutral", + "displayName": "Dark Charcoal Chassis", + "canonical": "#1c1915", + "tonalRamp": ["oklch(15% 0.015 70)", "oklch(27% 0.015 70)", "oklch(39% 0.015 70)", "oklch(51% 0.015 70)", "oklch(63% 0.015 70)", "oklch(75% 0.015 70)", "oklch(87% 0.015 70)", "oklch(95% 0.015 70)"] + }, + "chassis-deep": { + "role": "neutral", + "displayName": "Recessed Chassis", + "canonical": "#14110d", + "tonalRamp": ["oklch(15% 0.015 70)", "oklch(27% 0.015 70)", "oklch(39% 0.015 70)", "oklch(51% 0.015 70)", "oklch(63% 0.015 70)", "oklch(75% 0.015 70)", "oklch(87% 0.015 70)", "oklch(95% 0.015 70)"] + }, + "chassis-deep-dark": { + "role": "neutral", + "displayName": "Dark Recessed Chassis", + "canonical": "#0f0d0a", + "tonalRamp": ["oklch(15% 0.015 70)", "oklch(27% 0.015 70)", "oklch(39% 0.015 70)", "oklch(51% 0.015 70)", "oklch(63% 0.015 70)", "oklch(75% 0.015 70)", "oklch(87% 0.015 70)", "oklch(95% 0.015 70)"] + }, + "chassis-raised": { + "role": "neutral", + "displayName": "Raised Chassis", + "canonical": "#2b2620", + "tonalRamp": ["oklch(15% 0.018 70)", "oklch(27% 0.018 70)", "oklch(39% 0.018 70)", "oklch(51% 0.018 70)", "oklch(63% 0.018 70)", "oklch(75% 0.018 70)", "oklch(87% 0.018 70)", "oklch(95% 0.018 70)"] + }, + "chassis-ink": { + "role": "neutral", + "displayName": "Chassis Ink", + "canonical": "#e3dccd", + "tonalRamp": ["oklch(15% 0.025 78)", "oklch(27% 0.025 78)", "oklch(39% 0.025 78)", "oklch(51% 0.025 78)", "oklch(63% 0.025 78)", "oklch(75% 0.025 78)", "oklch(87% 0.025 78)", "oklch(95% 0.025 78)"] + }, + "chassis-muted": { + "role": "neutral", + "displayName": "Muted Chassis Ink", + "canonical": "#b8ae9c", + "tonalRamp": ["oklch(15% 0.03 78)", "oklch(27% 0.03 78)", "oklch(39% 0.03 78)", "oklch(51% 0.03 78)", "oklch(63% 0.03 78)", "oklch(75% 0.03 78)", "oklch(87% 0.03 78)", "oklch(95% 0.03 78)"] + }, + "structural-line": { + "role": "neutral", + "displayName": "Engraved Hairline", + "canonical": "#51493e", + "tonalRamp": ["oklch(15% 0.025 70)", "oklch(27% 0.025 70)", "oklch(39% 0.025 70)", "oklch(51% 0.025 70)", "oklch(63% 0.025 70)", "oklch(75% 0.025 70)", "oklch(87% 0.025 70)", "oklch(95% 0.025 70)"] + }, + "action-orange": { + "role": "primary", + "displayName": "Commit Orange", + "canonical": "#cf6828", + "tonalRamp": ["oklch(15% 0.15 48)", "oklch(27% 0.15 48)", "oklch(39% 0.15 48)", "oklch(51% 0.15 48)", "oklch(63% 0.15 48)", "oklch(75% 0.15 48)", "oklch(87% 0.15 48)", "oklch(95% 0.15 48)"] + }, + "action-orange-edge": { + "role": "primary", + "displayName": "Commit Orange Edge", + "canonical": "#8f3c12", + "tonalRamp": ["oklch(15% 0.14 45)", "oklch(27% 0.14 45)", "oklch(39% 0.14 45)", "oklch(51% 0.14 45)", "oklch(63% 0.14 45)", "oklch(75% 0.14 45)", "oklch(87% 0.14 45)", "oklch(95% 0.14 45)"] + }, + "confirmation-mint": { + "role": "secondary", + "displayName": "Confirmation Mint", + "canonical": "#559174", + "tonalRamp": ["oklch(15% 0.08 155)", "oklch(27% 0.08 155)", "oklch(39% 0.08 155)", "oklch(51% 0.08 155)", "oklch(63% 0.08 155)", "oklch(75% 0.08 155)", "oklch(87% 0.08 155)", "oklch(95% 0.08 155)"] + }, + "confirmation-mint-dark": { + "role": "secondary", + "displayName": "Dark-Theme Confirmation Mint", + "canonical": "#69a889", + "tonalRamp": ["oklch(15% 0.08 155)", "oklch(27% 0.08 155)", "oklch(39% 0.08 155)", "oklch(51% 0.08 155)", "oklch(63% 0.08 155)", "oklch(75% 0.08 155)", "oklch(87% 0.08 155)", "oklch(95% 0.08 155)"] + }, + "confirmation-edge": { + "role": "secondary", + "displayName": "Confirmation Edge", + "canonical": "#2d5d43", + "tonalRamp": ["oklch(15% 0.075 155)", "oklch(27% 0.075 155)", "oklch(39% 0.075 155)", "oklch(51% 0.075 155)", "oklch(63% 0.075 155)", "oklch(75% 0.075 155)", "oklch(87% 0.075 155)", "oklch(95% 0.075 155)"] + }, + "alert-brick": { + "role": "tertiary", + "displayName": "Alert Brick", + "canonical": "#c96b57", + "tonalRamp": ["oklch(15% 0.11 28)", "oklch(27% 0.11 28)", "oklch(39% 0.11 28)", "oklch(51% 0.11 28)", "oklch(63% 0.11 28)", "oklch(75% 0.11 28)", "oklch(87% 0.11 28)", "oklch(95% 0.11 28)"] + }, + "alert-edge": { + "role": "tertiary", + "displayName": "Alert Brick Edge", + "canonical": "#713126", + "tonalRamp": ["oklch(15% 0.1 28)", "oklch(27% 0.1 28)", "oklch(39% 0.1 28)", "oklch(51% 0.1 28)", "oklch(63% 0.1 28)", "oklch(75% 0.1 28)", "oklch(87% 0.1 28)", "oklch(95% 0.1 28)"] + }, + "amber-readout": { + "role": "tertiary", + "displayName": "Readout Amber", + "canonical": "#d59a43", + "tonalRamp": ["oklch(15% 0.11 75)", "oklch(27% 0.11 75)", "oklch(39% 0.11 75)", "oklch(51% 0.11 75)", "oklch(63% 0.11 75)", "oklch(75% 0.11 75)", "oklch(87% 0.11 75)", "oklch(95% 0.11 75)"] + }, + "paper": { + "role": "neutral", + "displayName": "Instrument Paper", + "canonical": "#f0eadf", + "tonalRamp": ["oklch(15% 0.025 78)", "oklch(27% 0.025 78)", "oklch(39% 0.025 78)", "oklch(51% 0.025 78)", "oklch(63% 0.025 78)", "oklch(75% 0.025 78)", "oklch(87% 0.025 78)", "oklch(95% 0.025 78)"] + }, + "paper-dark": { + "role": "neutral", + "displayName": "Dark-Theme Instrument Paper", + "canonical": "#dcd5c5", + "tonalRamp": ["oklch(15% 0.025 78)", "oklch(27% 0.025 78)", "oklch(39% 0.025 78)", "oklch(51% 0.025 78)", "oklch(63% 0.025 78)", "oklch(75% 0.025 78)", "oklch(87% 0.025 78)", "oklch(95% 0.025 78)"] + }, + "paper-ink": { + "role": "neutral", + "displayName": "Paper Ink", + "canonical": "#28221b", + "tonalRamp": ["oklch(15% 0.018 70)", "oklch(27% 0.018 70)", "oklch(39% 0.018 70)", "oklch(51% 0.018 70)", "oklch(63% 0.018 70)", "oklch(75% 0.018 70)", "oklch(87% 0.018 70)", "oklch(95% 0.018 70)"] + }, + "carbon-paper": { + "role": "neutral", + "displayName": "Carbon Transfer Stock", + "canonical": "#d9d0bd", + "tonalRamp": ["oklch(15% 0.035 78)", "oklch(27% 0.035 78)", "oklch(39% 0.035 78)", "oklch(51% 0.035 78)", "oklch(63% 0.035 78)", "oklch(75% 0.035 78)", "oklch(87% 0.035 78)", "oklch(95% 0.035 78)"] + }, + "carbon-paper-dark": { + "role": "neutral", + "displayName": "Dark-Theme Carbon Transfer Stock", + "canonical": "#d2c8b3", + "tonalRamp": ["oklch(15% 0.035 78)", "oklch(27% 0.035 78)", "oklch(39% 0.035 78)", "oklch(51% 0.035 78)", "oklch(63% 0.035 78)", "oklch(75% 0.035 78)", "oklch(87% 0.035 78)", "oklch(95% 0.035 78)"] + }, + "carbon-ink": { + "role": "neutral", + "displayName": "Carbon Transfer Ink", + "canonical": "#41392f", + "tonalRamp": ["oklch(15% 0.025 70)", "oklch(27% 0.025 70)", "oklch(39% 0.025 70)", "oklch(51% 0.025 70)", "oklch(63% 0.025 70)", "oklch(75% 0.025 70)", "oklch(87% 0.025 70)", "oklch(95% 0.025 70)"] + }, + "carbon-line": { + "role": "neutral", + "displayName": "Carbon Perforation Line", + "canonical": "#776d5e", + "tonalRamp": ["oklch(15% 0.03 72)", "oklch(27% 0.03 72)", "oklch(39% 0.03 72)", "oklch(51% 0.03 72)", "oklch(63% 0.03 72)", "oklch(75% 0.03 72)", "oklch(87% 0.03 72)", "oklch(95% 0.03 72)"] + }, + "renderer": { + "role": "neutral", + "displayName": "Renderer Carbon", + "canonical": "#1c1915", + "tonalRamp": ["oklch(15% 0.015 70)", "oklch(27% 0.015 70)", "oklch(39% 0.015 70)", "oklch(51% 0.015 70)", "oklch(63% 0.015 70)", "oklch(75% 0.015 70)", "oklch(87% 0.015 70)", "oklch(95% 0.015 70)"] + }, + "renderer-raised": { + "role": "neutral", + "displayName": "Raised Renderer Carbon", + "canonical": "#27221c", + "tonalRamp": ["oklch(15% 0.018 70)", "oklch(27% 0.018 70)", "oklch(39% 0.018 70)", "oklch(51% 0.018 70)", "oklch(63% 0.018 70)", "oklch(75% 0.018 70)", "oklch(87% 0.018 70)", "oklch(95% 0.018 70)"] + }, + "renderer-text": { + "role": "neutral", + "displayName": "Renderer Text", + "canonical": "#e1d9ca", + "tonalRamp": ["oklch(15% 0.025 78)", "oklch(27% 0.025 78)", "oklch(39% 0.025 78)", "oklch(51% 0.025 78)", "oklch(63% 0.025 78)", "oklch(75% 0.025 78)", "oklch(87% 0.025 78)", "oklch(95% 0.025 78)"] + }, + "key-ink": { + "role": "neutral", + "displayName": "Keycap Ink", + "canonical": "#241f19", + "tonalRamp": ["oklch(15% 0.018 70)", "oklch(27% 0.018 70)", "oklch(39% 0.018 70)", "oklch(51% 0.018 70)", "oklch(63% 0.018 70)", "oklch(75% 0.018 70)", "oklch(87% 0.018 70)", "oklch(95% 0.018 70)"] + }, + "confirmation-ink": { + "role": "neutral", + "displayName": "Confirmation Ink", + "canonical": "#111a15", + "tonalRamp": ["oklch(15% 0.025 155)", "oklch(27% 0.025 155)", "oklch(39% 0.025 155)", "oklch(51% 0.025 155)", "oklch(63% 0.025 155)", "oklch(75% 0.025 155)", "oklch(87% 0.025 155)", "oklch(95% 0.025 155)"] + } + }, + "typographyMeta": { + "display": { "displayName": "Display", "purpose": "Artifact titles and page-level hierarchy." }, + "headline": { "displayName": "Headline", "purpose": "Procedure and workbench headings." }, + "title": { "displayName": "Title", "purpose": "Panel, limits, and inspector headings." }, + "body": { "displayName": "Body", "purpose": "Operational explanations and rendered prose." }, + "label": { "displayName": "Instrument Label", "purpose": "Metrics, indices, revision placards, and state." } + }, + "shadows": [ + { "name": "key-rest", "value": "inset 0 1px 0 rgba(255, 255, 255, 0.44), 0 2px 0 var(--bone-edge)", "purpose": "Raises bone keycaps above the chassis." }, + { "name": "key-pressed", "value": "inset 0 2px 3px rgba(20, 17, 13, 0.2)", "purpose": "Pairs with translateY(2px) for selected and active keys." }, + { "name": "recessed-field", "value": "inset 0 2px 5px rgba(0, 0, 0, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.035)", "purpose": "Recesses editable fields into the chassis." }, + { "name": "chassis-hairline", "value": "inset 0 1px 0 rgba(255, 255, 255, 0.035)", "purpose": "Mounts large chassis panels without ambient lift." }, + { "name": "technical-well", "value": "inset 0 2px 5px rgba(0, 0, 0, 0.42)", "purpose": "Recesses hash previews and technical readouts." } + ], + "motion": [ + { "name": "state-change", "value": "140ms ease", "purpose": "Fast background and border feedback on controls." }, + { "name": "carbon-feed", "value": "260ms cubic-bezier(0.16, 1, 0.3, 1)", "purpose": "Reveals successful generated output from top to bottom." }, + { "name": "reduced-motion", "value": "0.01ms", "purpose": "Effectively removes animation and transition movement when reduced motion is preferred." } + ], + "breakpoints": [ + { "name": "xxs", "value": "360px" }, + { "name": "xs", "value": "520px" }, + { "name": "metadata-wide", "value": "700px" }, + { "name": "mobile", "value": "760px" }, + { "name": "workbench", "value": "880px" }, + { "name": "wide-procedure", "value": "1120px" } + ] + }, + "components": [ + { + "name": "Commit Button", + "kind": "button", + "refersTo": "button-primary", + "description": "Outcome-producing action key; orange is reserved for commit semantics.", + "html": "", + "css": ".ds-btn-commit { min-width: 150px; min-height: 38px; padding: 7px 10px; border: 1px solid var(--action-edge, #8f3c12); border-radius: 2px; background: var(--action, #cf6828); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 0 var(--action-edge, #8f3c12); color: var(--chassis-deep, #14110d); font-family: var(--font-mono, 'Spline Sans Mono'), monospace; font-size: 10px; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; transition: background-color 140ms ease, border-color 140ms ease; } .ds-btn-commit:hover { background: #d26426; } .ds-btn-commit:focus-visible { outline: 2px solid var(--focus-ring, #756c5e); outline-offset: 2px; } .ds-btn-commit:active { transform: translateY(2px); box-shadow: inset 0 2px 3px rgba(20,17,13,.2); }" + }, + { + "name": "Bone Key", + "kind": "button", + "refersTo": "button-secondary", + "description": "Default compact action, mode, and theme control mounted on the chassis.", + "html": "", + "css": ".ds-btn-key { min-width: 50px; min-height: 38px; padding: 7px 10px; border: 1px solid var(--bone-edge, #958a79); border-radius: 2px; background: var(--bone, #e3ddd0); box-shadow: inset 0 1px 0 rgba(255,255,255,.44), 0 2px 0 var(--bone-edge, #958a79); color: #241f19; font-family: var(--font-mono, 'Spline Sans Mono'), monospace; font-size: 10px; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; transition: background-color 140ms ease, border-color 140ms ease; } .ds-btn-key:hover { background: var(--bone-lift, #f2ede3); } .ds-btn-key:focus-visible { outline: 2px solid var(--focus-ring, #756c5e); outline-offset: 2px; } .ds-btn-key:active, .ds-btn-key[aria-pressed='true'] { transform: translateY(2px); background: var(--bone-mid, #d2cab9); box-shadow: inset 0 2px 3px rgba(20,17,13,.2); }" + }, + { + "name": "Confirmed Key", + "kind": "button", + "refersTo": "button-confirmed", + "description": "Transient success state for copied or completed actions.", + "html": "", + "css": ".ds-btn-confirmed { min-height: 38px; padding: 7px 10px; border: 1px solid var(--confirmation-edge, #2d5d43); border-radius: 2px; background: var(--confirmation, #559174); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 var(--confirmation-edge, #2d5d43); color: #111a15; font-family: var(--font-mono, 'Spline Sans Mono'), monospace; font-size: 10px; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; } .ds-btn-confirmed:hover { background: var(--confirmation, #559174); } .ds-btn-confirmed:focus-visible { outline: 2px solid var(--focus-ring, #756c5e); outline-offset: 2px; } .ds-btn-confirmed:active { transform: translateY(2px); box-shadow: inset 0 2px 3px rgba(20,17,13,.2); }" + }, + { + "name": "Recessed Input", + "kind": "input", + "refersTo": "input-recessed", + "description": "Editable instrument field sunk into the dark chassis.", + "html": "", + "css": ".ds-field { display: grid; gap: 5px; color: var(--on-chassis, #e3dccd); } .ds-field-label { color: var(--on-chassis-muted, #b8ae9c); font-family: var(--font-mono, 'Spline Sans Mono'), monospace; font-size: 9px; font-weight: 650; letter-spacing: .085em; line-height: 1.25; text-transform: uppercase; } .ds-field-input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line-dark, #51493e); border-radius: 2px; outline: none; background: var(--chassis-deep, #14110d); box-shadow: inset 0 2px 5px rgba(0,0,0,.38), inset 0 -1px 0 rgba(255,255,255,.035); color: var(--on-chassis, #e3dccd); font-family: var(--font-sans, SUSE), sans-serif; font-size: 15px; } .ds-field-input:hover { border-color: var(--line-strong, #756c5e); } .ds-field-input:focus-visible { border-color: var(--bone-edge, #958a79); box-shadow: inset 0 2px 5px rgba(0,0,0,.44), 0 0 0 1px var(--bone-edge, #958a79); }" + }, + { + "name": "Shell Navigation", + "kind": "nav", + "description": "Compact chassis rail with an identity mark and raised key navigation.", + "html": "", + "css": ".ds-shell-nav { display: flex; min-height: 54px; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-dark, #51493e); background: var(--chassis, #211d18); color: var(--on-chassis, #e3dccd); } .ds-shell-wordmark { margin-right: auto; font-family: var(--font-display, Manrope), sans-serif; font-size: 17px; font-weight: 760; letter-spacing: -.025em; } .ds-shell-key { display: inline-flex; min-height: 34px; align-items: center; padding: 6px 10px; border: 1px solid var(--bone-edge, #958a79); border-radius: 2px; background: var(--bone, #e3ddd0); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 2px 0 var(--bone-edge, #958a79); color: #241f19; font-family: var(--font-mono, 'Spline Sans Mono'), monospace; font-size: 11px; font-weight: 650; letter-spacing: .055em; text-decoration: none; } .ds-shell-key:hover { background: var(--bone-lift, #f2ede3); } .ds-shell-key:focus-visible { outline: 2px solid var(--focus-ring, #756c5e); outline-offset: 2px; } .ds-shell-key:active { transform: translateY(2px); box-shadow: inset 0 1px 2px rgba(20,17,13,.24); }" + }, + { + "name": "Procedure Panel", + "kind": "card", + "refersTo": "panel-chassis", + "description": "Shared chassis assembly for procedures, limits, diagnostics, and toolbars.", + "html": "

Operating limits

Static fragment transport / browser-side decode

PROC LNK-01 / REV C
TRANSPORT
URL fragment only
FORMATS
MD · CODE · DIFF · CSV · JSON
", + "css": ".ds-procedure { overflow: hidden; border: 1px solid var(--line-dark, #51493e); border-radius: 2px; background: var(--chassis, #211d18); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); color: var(--on-chassis, #e3dccd); } .ds-procedure-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line-dark, #51493e); } .ds-procedure-title { margin: 0; font-family: var(--font-display, Manrope), sans-serif; font-size: 18px; font-weight: 760; letter-spacing: -.025em; line-height: 1.05; } .ds-procedure-copy { margin: 5px 0 0; color: var(--on-chassis-muted, #b8ae9c); font-family: var(--font-sans, SUSE), sans-serif; font-size: 13px; line-height: 1.45; } .ds-procedure-rev { padding: 4px 7px; border: 1px solid currentColor; border-radius: 2px; color: var(--on-chassis-muted, #b8ae9c); font-family: var(--font-mono, 'Spline Sans Mono'), monospace; font-size: 9px; font-weight: 650; letter-spacing: .085em; white-space: nowrap; } .ds-procedure-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; } .ds-procedure-grid div { padding: 8px 10px; border-right: 1px solid var(--line-dark, #51493e); } .ds-procedure-grid div:last-child { border-right: 0; } .ds-procedure-grid dt { color: var(--on-chassis-muted, #b8ae9c); font-family: var(--font-mono, 'Spline Sans Mono'), monospace; font-size: 9px; font-weight: 650; letter-spacing: .085em; } .ds-procedure-grid dd { margin: 4px 0 0; font-family: var(--font-mono, 'Spline Sans Mono'), monospace; font-size: 11px; }" + }, + { + "name": "Artifact Switcher", + "kind": "custom", + "refersTo": "artifact-switcher", + "description": "Horizontal bundle selector with a physically depressed active state.", + "html": "", + "css": ".ds-artifact-switcher { display: flex; width: 248px; min-height: 50px; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--bone-edge, #958a79); border-radius: 2px; background: var(--bone, #e3ddd0); box-shadow: inset 0 1px 0 rgba(255,255,255,.44), 0 2px 0 var(--bone-edge, #958a79); color: #241f19; text-align: left; transition: background-color 140ms ease, border-color 140ms ease; } .ds-artifact-icon { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--bone-edge, #958a79); background: var(--bone-mid, #d2cab9); } .ds-artifact-icon-svg { width: 15px; height: 15px; } .ds-artifact-copy { display: grid; min-width: 0; } .ds-artifact-copy strong { font-family: var(--font-sans, SUSE), sans-serif; font-size: 12px; font-weight: 700; } .ds-artifact-copy small { margin-top: 2px; color: #5d5549; font-family: var(--font-mono, 'Spline Sans Mono'), monospace; font-size: 9px; } .ds-artifact-switcher:hover { background: var(--bone-lift, #f2ede3); } .ds-artifact-switcher:focus-visible { outline: 2px solid var(--focus-ring, #756c5e); outline-offset: 2px; } .ds-artifact-switcher:active, .ds-artifact-switcher[aria-pressed='true'] { transform: translateY(2px); background: var(--bone-mid, #d2cab9); box-shadow: inset 0 2px 3px rgba(20,17,13,.2); }" + }, + { + "name": "QRH Warning", + "kind": "custom", + "description": "Explicit fault or warning callout whose text label remains present alongside color.", + "html": "

WARNFragment links can appear in browser history and copied messages.

", + "css": ".ds-qrh-warning { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; align-items: start; margin: 0; padding: 7px 8px; border: 1px solid var(--alert, #c96b57); border-radius: 2px; background: var(--chassis-deep, #14110d); color: var(--on-chassis-muted, #b8ae9c); font-family: var(--font-sans, SUSE), sans-serif; font-size: 11px; line-height: 1.4; } .ds-qrh-label { color: var(--alert, #c96b57); font-family: var(--font-mono, 'Spline Sans Mono'), monospace; font-size: 9px; font-weight: 750; letter-spacing: .08em; }" + }, + { + "name": "Carbon Transfer Output", + "kind": "custom", + "refersTo": "carbon-output", + "description": "Successful generated-link result on perforated carbon stock.", + "html": "

Generated link

brief.md

TRANSFER OK
URLhttps://agent-render.example/#e...
", + "css": "@keyframes ds-carbon-feed { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } .ds-carbon-output { position: relative; display: grid; gap: 10px; overflow: hidden; padding: 20px 12px 22px; border: 1px solid var(--carbon-line, #776d5e); border-radius: 0; background: var(--carbon-paper, #d9d0bd); color: var(--carbon-ink, #41392f); animation: ds-carbon-feed 260ms cubic-bezier(.16,1,.3,1) both; } .ds-carbon-output::before { position: absolute; inset: 0 0 auto; height: 8px; background: repeating-linear-gradient(90deg,var(--carbon-ink, #41392f) 0 12px,transparent 12px 20px); content: ''; opacity: .66; } .ds-carbon-output::after { position: absolute; right: 9px; bottom: 8px; left: 9px; border-bottom: 1px dashed var(--carbon-line, #776d5e); content: ''; } .ds-carbon-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--carbon-line, #776d5e); } .ds-carbon-head h3 { margin: 0; font-family: var(--font-display, Manrope), sans-serif; font-size: 20px; font-weight: 760; letter-spacing: -.025em; } .ds-carbon-head p { margin: 5px 0 0; font-family: var(--font-mono, 'Spline Sans Mono'), monospace; font-size: 10px; opacity: .72; } .ds-carbon-stamp { padding: 6px 9px; transform: rotate(-4deg); border: 2px solid var(--confirmation-edge, #2d5d43); color: var(--confirmation-edge, #2d5d43); font-family: var(--font-mono, 'Spline Sans Mono'), monospace; font-size: 11px; font-weight: 760; letter-spacing: .1em; } .ds-carbon-readout { display: grid; gap: 5px; padding: 8px; border: 1px solid var(--carbon-line, #776d5e); background: rgba(255,255,255,.13); font-family: var(--font-mono, 'Spline Sans Mono'), monospace; font-size: 9px; letter-spacing: .085em; } .ds-carbon-readout code { overflow-wrap: anywhere; padding: 7px; border: 1px solid rgba(65,57,47,.42); background: rgba(40,34,27,.07); box-shadow: inset 0 2px 4px rgba(65,57,47,.15); font-size: 10px; letter-spacing: normal; } @media (prefers-reduced-motion: reduce) { .ds-carbon-output { animation-duration: .01ms; } }" + } + ], + "narrative": { + "northStar": "Bench Instrument x Carbon Transfer", + "overview": "agent-render is an operating surface, not a promotional page. Airplane QRH supplies the procedural grammar first: numbered operations, revision placards, status lamps, limits, cautions, and explicit commit actions. Japanese high-density interface practice comes second, keeping metadata compact, aligned, and continuously visible. Functional skeuomorphic material comes third through bone keycaps, a charcoal chassis, recessed wells, engraved hairlines, and a carbon-transfer result that appears only after generation.\n\nThe hierarchy is intentionally “QRH first, Japanese density second, marketing page never.” Every surface should help an operator format, identify, load, compress, generate, inspect, or export an artifact. Decoration is permitted only when it makes state, structure, or physical interaction easier to understand.", + "keyCharacteristics": [ + "Compact procedural sequencing with visible numbering and revision language", + "Bone controls mounted on a charcoal instrument chassis", + "Dense monospace metadata paired with direct, readable headings", + "Carbon paper reserved for successfully generated output", + "Artifact-first viewing with transport limits and diagnostics kept visible" + ], + "rules": [ + { "name": "The Procedure-First Rule", "body": "Put the current operation, its state, and its constraints before explanation or promotion.", "section": "overview" }, + { "name": "The Three-Signal Rule", "body": "Orange commits, mint confirms, and brick alerts; never interchange these roles or add a competing accent.", "section": "colors" }, + { "name": "The Dark-Renderer Rule", "body": "Code-oriented artifacts stay on the renderer carbon palette in light and dark themes; theme switching changes the shell, not the content-body contract.", "section": "colors" }, + { "name": "The Instrument Type Rule", "body": "Use Manrope for identity and hierarchy, SUSE for explanations and content, and Spline Sans Mono for anything measured, indexed, encoded, or stateful.", "section": "typography" }, + { "name": "The Continuous-Chassis Rule", "body": "Prefer divided grids and shared rails over detached card collections; adjacent information should read as one machine assembly.", "section": "layout" }, + { "name": "The Mechanical-Depth Rule", "body": "Every shadow must explain whether a control is raised, pressed, recessed, or mounted; if it explains none of those, remove it.", "section": "elevation" }, + { "name": "The Two-Pixel Rule", "body": "Use 2px corners for the instrument system, 0 for carbon paper, and circles only for indicator lights; do not introduce soft card radii.", "section": "shapes" }, + { "name": "The State-Must-Move Rule", "body": "Selected and pressed keys must visibly depress; successful output may feed into view, but routine panels never float or pulse.", "section": "components" } + ], + "dos": [ + "Do lead task surfaces with a numbered procedure, visible state, and operating constraints.", + "Do keep metadata compact, aligned, and readable in Spline Sans Mono.", + "Do use 1px dividers, 2px corners, and structural depth to assemble dense information.", + "Do preserve dark renderer bodies across light and dark shell themes.", + "Do keep touch targets usable while allowing labels and metadata to stay visually dense." + ], + "donts": [ + "Don't build a marketing hero, feature-card parade, or promotional narrative ahead of the operation.", + "Don't add decorative pills, soft rounded cards, blurred glows, glass effects, or ambient floating shadows.", + "Don't use orange, mint, brick, or amber as interchangeable decoration.", + "Don't use carbon-transfer paper before a successful generated output exists.", + "Don't hide limits, faults, or transport diagnostics to make a surface feel cleaner." + ] + } +} diff --git a/.impeccable/surfaces/src-components-viewer-shell-tsx.md b/.impeccable/surfaces/src-components-viewer-shell-tsx.md new file mode 100644 index 0000000..aa71758 --- /dev/null +++ b/.impeccable/surfaces/src-components-viewer-shell-tsx.md @@ -0,0 +1,32 @@ +--- +version: 1 +slug: "src-components-viewer-shell-tsx" +primary_target: "src/components/viewer-shell.tsx" +related_targets: ["src/components/home/link-creator.tsx","src/components/home/sample-links.tsx","src/components/viewer/artifact-stage.tsx"] +--- + +# Viewer Shell + +## Scope and Mode + +Homepage link creation and fragment-driven artifact viewing. Operate mode. + +## Audience and Job + +Developers and AI-agent users need to create a portable artifact link, verify its size and codec, and read or export the decoded artifact quickly across desktop and mobile chat workflows. + +## Task and Content + +The homepage begins with one five-step link procedure, followed by indexed samples, operating limits, and a chassis footer. The viewer prioritizes filename, actions, limits, artifact content, and fragment details in that order. + +## Direction + +“Bench Instrument x Carbon Transfer”: airplane QRH supplies procedure grammar; Japanese dense interfaces supply topology; functional skeuomorphism supplies material. Charcoal keycaps use ivory labels and burnt-orange selected edges on a darker chassis, inputs are recessed, and carbon-transfer paper appears only after successful generation. + +## Memorable Moment + +Generating a link feeds a perforated carbon-transfer output with a physical approval stamp into the final operation, without moving the user into a separate result page. + +## Constraints + +Preserve payload behavior, codec and renderer split points, all existing data and ARIA contracts, mobile density, dark content bodies in both themes, exact diff vendor CSS, and the 115 KiB homepage budget. No marketing hero, self-narrating chrome, decorative pills, glows, or generic cards. diff --git a/AGENTS.md b/AGENTS.md index 4dc9f44..79834a0 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -54,12 +54,12 @@ Describe and preserve what is already true in the repo today. ### Renderer behavior - `markdown` renders as sanitized GFM and supports download plus browser print-to-PDF. -- Markdown code fences reuse the CodeMirror viewer approach instead of a second highlighting stack. +- Markdown code fences reuse the same Pierre `File` surface as standalone code, so one Shiki-backed highlighting stack serves every code view. Compact fences preserve whitespace without line wrapping or a file header. - Markdown ` ```mermaid ` fenced code blocks render as interactive diagrams via the dynamically imported `mermaid` library with theme-aware rendering and strict security. -- `code` uses a read-only CodeMirror surface with language-aware loading. -- `diff` uses a review-style git patch viewer with unified and split modes. +- `code` uses a read-only Pierre `File` surface with Shiki highlighting, line numbers, and a wrap toggle. +- `diff` uses `@pierre/diffs` for Shiki-backed unified and split review views. Multi-file patches add path-aware navigation through `@pierre/trees`; single-file diffs skip the tree. The artifact editor edits every kind on a Pierre `CodeView`/`EditProvider` surface (the `a/` + `b/` documents for old/new pair diffs); when the envelope has more than one navigable entry the editor shows a `@pierre/trees` rail for switching artifacts in place (per-artifact drafts survive switching), and while a multi-file patch is being edited the rail also lists its files and scrolls the editor to the selected `diff --git` section. - `csv` renders as a readable table/grid. -- `json` renders as a lightweight structured tree plus raw fallback behavior. +- `json` renders as a lightweight structured tree plus a syntax-highlighted compact Pierre raw view. ### Performance and bundling diff --git a/CHANGELOG.md b/CHANGELOG.md index fb39f6e..62f892b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and ### Changed - Auto-emit no longer selects `arx3` or `arx4`. Existing `#c` and `#e` links still decode. +- Highlighting consolidated on `@pierre/diffs` (Shiki) for diffs, standalone code, markdown fences, JSON raw views, and the artifact editor; CodeMirror and `@git-diff-view` are removed. ## [0.1.0] - 2026-05-05 diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 0000000..440fd62 --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,303 @@ +--- +name: agent-render +description: A procedural artifact viewer shaped as Bench Instrument x Carbon Transfer. +colors: + page-canvas: "#ebe7dd" + page-canvas-dark: "#14110d" + primary-ink: "#211d18" + muted-ink: "#5f584d" + bone-key: "#e3ddd0" + bone-key-dark: "#cfc6b4" + bone-key-lift: "#f2ede3" + bone-key-lift-dark: "#dcd5c5" + bone-key-mid: "#d2cab9" + bone-key-mid-dark: "#b8ae9c" + bone-key-edge: "#958a79" + bone-key-edge-dark: "#756b5b" + chassis: "#211d18" + chassis-dark: "#1c1915" + chassis-deep: "#14110d" + chassis-deep-dark: "#0f0d0a" + chassis-raised: "#2b2620" + chassis-ink: "#e3dccd" + chassis-muted: "#b8ae9c" + structural-line: "#51493e" + action-orange: "#cf6828" + action-orange-edge: "#8f3c12" + confirmation-mint: "#559174" + confirmation-mint-dark: "#69a889" + confirmation-edge: "#2d5d43" + alert-brick: "#c96b57" + alert-edge: "#713126" + amber-readout: "#d59a43" + paper: "#f0eadf" + paper-dark: "#1a1713" + paper-ink: "#28221b" + paper-ink-dark: "#ece4d6" + paper-body: "#4d453a" + paper-body-dark: "#c9c0b0" + carbon-paper: "#d9d0bd" + carbon-paper-dark: "#d2c8b3" + carbon-ink: "#41392f" + carbon-line: "#776d5e" + renderer: "#1c1915" + renderer-raised: "#27221c" + renderer-text: "#e1d9ca" + control-face: "#26221d" + control-face-lift: "#2e2923" + control-face-pressed: "#1a1713" + control-text: "#ece4d6" + control-accent: "#b74d18" + control-accent-dark: "#cf7a1c" + control-accent-ink: "#fff7ee" + control-accent-ink-dark: "#1a0e08" + control-success: "#3a7d5c" + control-success-dark: "#50a877" + control-success-ink: "#edf8f2" + control-success-ink-dark: "#102218" + key-ink: "#241f19" + confirmation-ink: "#111a15" +typography: + display: + fontFamily: "Manrope, sans-serif" + fontSize: "clamp(24px, 3.2vw, 40px)" + fontWeight: 760 + lineHeight: 1.02 + letterSpacing: "-0.025em" + headline: + fontFamily: "Manrope, sans-serif" + fontSize: "clamp(21px, 2.2vw, 29px)" + fontWeight: 760 + lineHeight: 1.05 + letterSpacing: "-0.025em" + title: + fontFamily: "Manrope, sans-serif" + fontSize: "18px" + fontWeight: 760 + lineHeight: 1.05 + letterSpacing: "-0.025em" + body: + fontFamily: "SUSE, sans-serif" + fontSize: "15px" + fontWeight: 400 + lineHeight: 1.7 + letterSpacing: "normal" + label: + fontFamily: "Spline Sans Mono, monospace" + fontSize: "9px" + fontWeight: 650 + lineHeight: 1.25 + letterSpacing: "0.085em" +rounded: + square: "0" + instrument: "2px" +spacing: + micro: "4px" + key-gap: "7px" + compact: "8px" + field: "10px" + shell: "12px" +components: + button-primary: + backgroundColor: "{colors.control-accent}" + textColor: "{colors.control-accent-ink}" + typography: "{typography.label}" + rounded: "{rounded.instrument}" + padding: "7px 10px" + height: "38px" + button-secondary: + backgroundColor: "{colors.control-face}" + textColor: "{colors.control-text}" + typography: "{typography.label}" + rounded: "{rounded.instrument}" + padding: "7px 10px" + height: "38px" + button-confirmed: + backgroundColor: "{colors.control-success}" + textColor: "{colors.control-success-ink}" + typography: "{typography.label}" + rounded: "{rounded.instrument}" + padding: "7px 10px" + height: "38px" + input-recessed: + backgroundColor: "{colors.chassis-deep}" + textColor: "{colors.chassis-ink}" + rounded: "{rounded.instrument}" + padding: "8px 10px" + height: "40px" + panel-chassis: + backgroundColor: "{colors.chassis}" + textColor: "{colors.chassis-ink}" + rounded: "{rounded.instrument}" + padding: "12px" + artifact-switcher: + backgroundColor: "{colors.control-face}" + textColor: "{colors.control-text}" + rounded: "{rounded.instrument}" + padding: "7px 9px" + height: "50px" + carbon-output: + backgroundColor: "{colors.carbon-paper}" + textColor: "{colors.carbon-ink}" + rounded: "{rounded.square}" + padding: "20px 12px 22px" +--- + +# Design System: agent-render + +## Overview + +**Creative North Star: "Bench Instrument x Carbon Transfer"** + +agent-render is an operating surface, not a promotional page. Airplane QRH supplies the procedural grammar first: numbered operations, limits, cautions, and explicit commit actions. Japanese high-density interface practice comes second, keeping metadata compact, aligned, and continuously visible. Functional skeuomorphic material comes third through charcoal keycaps, a darker chassis, recessed wells, engraved hairlines, and a carbon-transfer result that appears only after generation. + +The hierarchy is intentionally “QRH first, Japanese density second, marketing page never.” Every surface should help an operator format, identify, load, compress, generate, inspect, or export an artifact. Decoration is permitted only when it makes state, structure, or physical interaction easier to understand. + +**The Procedure-First Rule.** Put the current operation, its state, and its constraints before explanation or promotion. + +**Key Characteristics:** + +- Compact procedural sequencing with visible numbering +- Raised instrument controls (charcoal keys in dark mode, bone keys in light) with burnt-orange selected edges +- Dense monospace metadata paired with direct, readable headings +- Carbon paper reserved for successfully generated output +- Artifact-first viewing with limits and fragment details kept visible + +## Colors + +The palette is warm, low-gloss, and material-led: dark mode runs charcoal keys on a carbon-brown chassis, light mode runs bone keys on a paper chassis, and three scarce semantic signals stay constant across both. + +### Primary + +- **Commit Orange:** The only action accent; use it for irreversible or outcome-producing controls and caution boundaries. + +### Secondary + +- **Confirmation Mint:** Use only for ready, verified, copied, and successful transfer states. The dark theme uses its brighter implemented counterpart. + +### Tertiary + +- **Alert Brick:** Use only for faults, warnings, invalid payloads, and renderer errors. +- **Readout Amber:** Reserve for encoded hashes and technical readouts inside recessed dark wells. + +### Neutral + +- **Aged Bone:** Paper-adjacent surfaces, the identity mark, and the light-mode control faces; the charcoal key face stays the dark-mode control material. +- **Instrument Controls:** Raised keys keep the same physical grammar in both themes: a lifted face, a hard lower foot, and a darker pressed well. Dark mode uses a #26221d charcoal face with ivory labels; light mode uses a bone face with ink labels. A one-pixel burnt-orange edge marks persistent selection without turning the whole key into an accent. +- **Instrument Chassis:** The structural shell for procedures, toolbars, panels, and diagnostics. Charcoal in dark mode, warm bone in light mode. +- **Instrument Paper:** Rendered markdown uses warm paper in light mode and a charcoal document field with ivory text in dark mode. +- **Carbon Transfer Stock:** A distinct generated-output material with its own ink and perforation lines. +- **Renderer Surface:** Code, diff, CSV, JSON, raw source, and technical preview surfaces follow the shell theme: paper stock with ink text in light mode, charcoal with ivory text in dark mode. + +**The Three-Signal Rule.** Orange commits, mint confirms, and brick alerts; never interchange these roles or add a competing accent. + +**The Theme-Follow Rule.** Every surface follows the shell theme, including renderer bodies; light mode is a full light instrument, not a dark chassis on a light page. + +## Typography + +**Display Font:** Manrope (sans-serif fallback) + +**Body Font:** SUSE (sans-serif fallback) + +**Label/Mono Font:** Spline Sans Mono (monospace fallback) + +**Character:** Manrope makes headings compact and unmistakable without becoming editorial. SUSE carries readable operational prose, while Spline Sans Mono turns labels, metrics, filenames, and readouts into instrument notation. + +### Hierarchy + +- **Display** (760, responsive 24–40px, 1.02): Artifact titles and the strongest page-level headings. +- **Headline** (760, responsive 21–29px, 1.05): Procedure and workbench headings. +- **Title** (760, 18px, 1.05): Panel, limits, and inspector headings. +- **Body** (400, 15px, 1.7): Rendered prose; markdown reading width is capped at 76ch. +- **Label** (650, 9px, 0.085em tracking): Uppercase procedure labels, field names, and metrics. + +**The Instrument Type Rule.** Use Manrope for identity and hierarchy, SUSE for explanations and content, and Spline Sans Mono for anything measured, indexed, encoded, or stateful. + +## Layout + +The shell is a centered single-column instrument bay capped at 1500px, with a compact 54px sticky header and 12px outer rhythm. Structural groups use dense 1px dividers and small internal gaps rather than isolated floating cards. The homepage procedure remains the dominant full-width block; samples and operating limits form a 12-column secondary region from 880px upward, with the samples index occupying three columns and staying visible below the header. + +Responsive behavior preserves order and density. At 760px, toolbars wrap, two-column metric and result grids collapse, and patch navigation stacks above the file surface. At 520px, nonessential header navigation disappears, identification fields become single-column, commit controls span the available width, and result actions stack. At 360px, the narrowest toggles and fragment metrics become single-column. Artifact selectors and patch files scroll horizontally rather than truncating their operating choices. + +**The Continuous-Chassis Rule.** Prefer divided grids and shared rails over detached card collections; adjacent information should read as one machine assembly. + +## Elevation & Depth + +Depth is structural rather than atmospheric. Chassis panels use hairline borders and a faint inner top shine. Key controls sit two pixels above a darker foot and physically depress by two pixels when active. Inputs, hash wells, and renderer diagnostics use inset shadows to read as recessed. There are no floating ambient card shadows, blurred glows, or decorative elevation layers. + +### Shadow Vocabulary + +- **Raised key:** A fine top shine plus a hard 2px lower edge; use on clickable key controls (charcoal in dark mode, bone in light mode). +- **Pressed key:** A compact inset shadow paired with a 2px downward translation. +- **Recessed well:** A 2–5px dark inset shadow for editable fields, hashes, and raw technical readouts. +- **Chassis hairline:** A nearly transparent 1px inset highlight for large dark instrument panels. + +**The Mechanical-Depth Rule.** Every shadow must explain whether a control is raised, pressed, recessed, or mounted; if it explains none of those, remove it. + +## Shapes + +The form language is nearly square. Controls, panels, fields, and frames share a 2px corner radius. Carbon-transfer output and its readout fields use square corners. One-pixel borders and internal rules provide most silhouettes. Circular geometry is limited to file-status dots. + +**The Two-Pixel Rule.** Use 2px corners for the instrument system, 0 for carbon paper, and circles only for indicator lights; do not introduce soft card radii. + +## Components + +Components should feel manufactured, compact, and legible under pressure. Their states are expressed through material movement and semantic color, not ornamental animation. + +### Buttons + +- **Shape:** Shallow instrument key with 2px corners and a hard lower edge; charcoal face in dark mode, bone face in light mode. +- **Primary:** Solid burnt orange belongs to the Generate action, with compact padding and a 38px minimum height. +- **Hover / Focus:** Hover lifts the key face value slightly; keyboard focus uses a 2px orange ring with a 2px offset; active and selected controls move down 2px into an inset state. +- **Secondary:** Charcoal face with ivory ink in dark mode, bone face with ink labels in light mode. Persistent selection keeps the pressed face and adds one burnt-orange inset edge. +- **Confirmed:** Deep mint replaces the key face only after a successful action. + +### Cards / Containers + +- **Corner Style:** Instrument corners (2px), never soft rounded cards. +- **Background:** Chassis for procedural groups; theme-aware document fields only for readable markdown; carbon stock only for generated links. +- **Shadow Strategy:** Hairline mounting shine for chassis and physical raised/recessed shadows for controls and wells. +- **Border:** One-pixel structural rules divide headings, rails, steps, cells, and bodies. +- **Internal Padding:** Dense 8–12px spacing, increasing only for readable artifact content. + +### Inputs / Fields + +- **Style:** Recessed field, 2px corners, 1px structural border, 40px minimum height (dark inset in dark mode, light inset in light mode); multiline source input uses the monospace face. +- **Focus:** Strengthen the edge and add a single-pixel outer ring while keeping the recessed inset. +- **Error / Disabled:** Brick identifies faults; disabled controls reduce opacity but retain their physical shape. + +### Navigation + +The sticky shell header uses themed key controls on the chassis (charcoal keys in dark mode, bone keys in light mode). Artifact navigation uses horizontally scrollable raised switchers with a clearly depressed active item and one burnt-orange inset edge. On narrow screens, hide only secondary global navigation and preserve task controls. + +### Procedure Steps + +Each operation pairs a fixed indexed rail with a flexible work area. The numbered rail is darker than the chassis, uses monospace labels, and stays visually connected through shared borders. + +### Status and Callouts + +Errors use direct headings and recovery copy instead of simulated telemetry. Safety callouts use explicit NOTE, CAUTION, or WARN labels and a matching border; semantic color never replaces the text label. + +### Carbon Transfer Output + +Generated links emerge as square carbon stock with a perforated top strip, dashed tear line, and slightly rotated approval stamp. The 260ms feed animation is unique to successful generation and collapses to effectively static under reduced-motion preferences. + +**The State-Must-Move Rule.** Selected and pressed keys must visibly depress; successful output may feed into view, but routine panels never float or pulse. + +## Do's and Don'ts + +### Do: + +- **Do** lead task surfaces with a numbered procedure, visible state, and operating constraints. +- **Do** keep metadata compact, aligned, and readable in Spline Sans Mono. +- **Do** use 1px dividers, 2px corners, and structural depth to assemble dense information. +- **Do** let renderer bodies follow the shell theme: paper stock in light mode, charcoal in dark mode. +- **Do** keep touch targets usable while allowing labels and metadata to stay visually dense. + +### Don't: + +- **Don't** build a marketing hero, feature-card parade, or promotional narrative ahead of the operation. +- **Don't** add decorative pills, soft rounded cards, blurred glows, glass effects, or ambient floating shadows. +- **Don't** use orange, mint, brick, or amber as interchangeable decoration. +- **Don't** use carbon-transfer paper before a successful generated output exists. +- **Don't** hide limits, faults, or transport diagnostics to make a surface feel cleaner. diff --git a/PRODUCT.md b/PRODUCT.md new file mode 100644 index 0000000..c960b0e --- /dev/null +++ b/PRODUCT.md @@ -0,0 +1,48 @@ +# Product + + + +## Platform + +web + +## Users + +Developers and AI-agent users who need to share generated markdown, code, diffs, CSV, or JSON in chat surfaces that do not render those artifacts well. + +## Product Purpose + +agent-render turns an artifact into a readable, shareable browser view without requiring the core static deployment to store it. Success means a user can create a link locally, open it across chat surfaces, inspect the artifact, and copy or download it without changing the underlying content. + +## Positioning + +Artifact payloads travel in the URL fragment and decode in the browser, so the static host does not receive artifact content in the initial page request. The product is open source, statically hostable, and self-hostable. + +## Operating Context + +Users create fragment links in the browser, paste them into chat or documentation, and open them in a viewer-first shell. Links can still surface in browser history, copied messages, screenshots, extensions, and other client-side contexts. + +## Capabilities and Constraints + +- The core app is a static-export-friendly client shell with no required backend, database, or authentication. +- Supported artifacts are markdown, code, diff, CSV, and JSON. +- Payload codecs and fragment formats are a public compatibility contract and must remain backward-decodable. +- Renderer modules, codec modules, sample data, and heavy dependencies stay dynamically loaded to protect the initial bundle. +- Payloads are untrusted input; markdown sanitization, size validation, and clear failure states are required. +- The optional self-hosted UUID mode stores payloads server-side and is a separate deployment contract. + +## Brand Commitments + +The product name is `agent-render`. Product claims must describe zero retention at the static-host boundary precisely, never absolute secrecy. The replacement interface follows the owner-specified “Bench Instrument x Carbon Transfer” world. + +## Evidence on Hand + +The shipped product contract and current behavior are documented in `AGENTS.md`, `README.md`, `docs/architecture.md`, `docs/payload-format.md`, and the implementation under `src/`. + +## Product Principles + +- Keep artifact sharing static, linkable, and locally generated. +- Put the artifact and the user’s operation ahead of marketing copy. +- Preserve protocol compatibility and renderer behavior across visual changes. +- State the host-retention boundary honestly and keep unsafe assumptions visible. +- Prefer compact, readable controls that work across desktop and mobile chat workflows. diff --git a/README.md b/README.md index f009853..9280e80 100644 --- a/README.md +++ b/README.md @@ -36,11 +36,11 @@ Built for the OpenClaw ecosystem, `agent-render` focuses on fragment-based shari ## Included Renderers -- `markdown` - GFM rendering with safe sanitization, copy/download/print flows from the shell, and premium code fences that reuse the CodeMirror viewer stack -- `code` - read-only CodeMirror view with line numbers, wrap toggle, syntax-tree-aware rainbow brackets, and maintained indentation markers -- `diff` - review-style multi-file git patch viewer with unified and split modes +- `markdown` - GFM rendering with safe sanitization, copy/download/print flows from the shell, and syntax-highlighted code fences that preserve source whitespace +- `code` - read-only code view with line numbers, a wrap toggle, and Shiki syntax highlighting via `@pierre/diffs` +- `diff` - Shiki-backed `@pierre/diffs` review views with unified/split modes and `@pierre/trees` navigation for multi-file patches - `csv` - parsed table view with sticky headers and horizontal overflow handling -- `json` - lightweight read-only tree view plus native raw source view, with graceful malformed JSON fallback +- `json` - lightweight read-only tree view plus syntax-highlighted raw source, with graceful malformed JSON fallback ## Principles diff --git a/docs/architecture.md b/docs/architecture.md index f50017f..0130670 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -22,10 +22,10 @@ The static export also emits `sitemap.xml` at the site root (and under `NEXT_PUB ## Renderer implementation - `markdown` - formatted document view with shell copy, download, and print-to-PDF flows plus embedded premium code fences and inline mermaid diagram rendering -- `code` - read-only CodeMirror view with syntax-aware rendering and code affordances +- `code` - read-only Pierre `File` view with Shiki syntax highlighting, line numbers, and a wrap toggle - `diff` - review-style diff view with unified and split modes - `csv` - table-focused data grid built from parsed rows and dynamic columns -- `json` - lightweight read-only tree view plus a native raw source view +- `json` - lightweight read-only tree view plus a syntax-highlighted raw source view The viewer shell now routes all five artifact kinds through dynamically imported client-only renderers so the landing shell stays light and static-host friendly. @@ -35,14 +35,7 @@ Diff file navigation is intentionally internal UI state now. The URL fragment re ## Markdown fence choice -This round explicitly evaluated Shiki and rejected it for now. - -- Shiki is MIT and technically viable in a fully static app. -- The current app already ships a premium read-only CodeMirror stack for source viewing. -- Reusing that stack for markdown fences keeps them visually strong while avoiding a second async highlighting system and an additional code/theme/language runtime. -- That choice also removes the weaker `rehype-highlight` plus `highlight.js` path instead of carrying both. - -If markdown fence fidelity becomes a repeated product problem after these bundle reductions, Shiki remains the next serious candidate, but it should replace rather than supplement the current fence path. +Markdown fences mount the same compact Pierre `File` surface as standalone code artifacts, so diffs, code views, JSON raw views, the artifact editor, and fences all share one Shiki-backed highlighting stack. The earlier `rehype-highlight`/`highlight.js` path and the CodeMirror stack are both gone. ## Mermaid diagram support @@ -50,36 +43,37 @@ Markdown artifacts render ` ```mermaid ` fenced code blocks as interactive diagr ## Raw code renderer choice -The raw code viewer now keeps CodeMirror, but the architecture is cleaner: +The code viewer uses Pierre's read-only `File` component from `@pierre/diffs`: -- language modules load on demand instead of being statically imported together -- indentation guides come from the maintained `@replit/codemirror-indentation-markers` extension -- rainbow brackets stay custom, but now operate as a syntax-tree-aware decoration pass instead of naive quote tracking +- the same `agent-render` Shiki theme and `--diffs-*` surface variables serve the viewer, the diff renderer, and the artifact editor +- the wrap toggle maps to Pierre's `overflow` option, so it re-renders in place instead of remounting +- `detectCodeLanguage` keys pass through `toPierreLanguage`, which maps any detection tokens that are not Shiki grammar ids -That keeps the viewer static-hosting friendly while removing the brittle parts of the earlier implementation. +The previous CodeMirror renderer (custom theme, rainbow brackets, indentation markers, per-language lazy loading) was removed in favor of the single Pierre surface. ## Bundle tradeoffs -The largest remaining deferred cost is still the diff renderer stack, primarily `@git-diff-view/*` and its highlighting internals. Its vendor stylesheet is served from `public/vendor/diff-view-pure.css` with a precompressed `.css.br` variant and injected only when a rich diff mounts, so the empty shell and non-diff artifacts do not pay that CSS cost. The stack remains because it still provides the best review-style UX for multi-file git patches, split/unified modes, and syntax-aware rendering with less product code than a bespoke replacement. +The largest deferred cost is the Pierre stack. `@pierre/diffs` renders patches, code artifacts, JSON raw views, markdown fences, and the artifact editor through Shiki-backed shadow DOM, and `@pierre/trees` mounts only for multi-file navigation. Every Pierre surface stays behind dynamically imported renderers, so the empty shell does not pay that JavaScript cost. The JSON and markdown paths are now substantially lighter because: - `vanilla-jsoneditor` was removed in favor of a lighter read-only tree view - `rehype-highlight` and its Highlight.js stack were removed -- raw markdown and CSV views use native source blocks instead of mounting CodeMirror -- CodeMirror language support now loads on demand per active language +- `@codemirror/*` and `@replit/codemirror-indentation-markers` were removed once every highlighted surface moved to Pierre +- raw markdown and CSV views render on the same Pierre `File` surface as code artifacts, synthesized as `code` payloads with the source format as the language hint +- raw JSON uses the compact code path for syntax highlighting without wrapping or a file header ## Diff choice -`agent-render` uses `@git-diff-view/react` plus git-diff `DiffFile` instances instead of `@codemirror/merge`. +`agent-render` uses `@pierre/diffs` and `@pierre/trees` instead of `@codemirror/merge`. -- `@git-diff-view/*` matches the product goal better because it is already shaped like a GitHub-style review surface -- split and unified views are built in -- syntax highlighting and diff affordances are stronger out of the box for artifact viewing -- individual file patches can be rendered as a sequence while preserving filenames and boundaries -- CodeMirror remains the better fit for full source artifacts and markdown code fences +- `@pierre/diffs` renders unified and split review views from both patches and before/after content +- Shiki syntax highlighting and component styles stay encapsulated in shadow DOM +- `@pierre/trees` provides path-aware, keyboard-accessible navigation when a patch contains multiple files +- single-file diffs skip the tree and render directly +- Pierre's `File`/`CodeView` surfaces also back full source artifacts, JSON raw views, markdown code fences, and the artifact editor, so one highlighting stack covers the app -`@codemirror/merge` stays a reasonable future option if the project ever needs a more editor-centric comparison workflow, but it is not the best default for shareable review artifacts. +An editor-centric comparison workflow (for example `@codemirror/merge`) stays a reasonable future option, but it is not the best default for shareable review artifacts. ## Security posture diff --git a/docs/dependency-notes.md b/docs/dependency-notes.md index 848a80c..8390c91 100644 --- a/docs/dependency-notes.md +++ b/docs/dependency-notes.md @@ -8,9 +8,7 @@ - `react-markdown` - MIT - `remark-gfm` - MIT - `rehype-sanitize` - MIT -- `@codemirror/*` - MIT -- `@replit/codemirror-indentation-markers` - MIT -- `@git-diff-view/*` - MIT +- `@pierre/diffs` and `@pierre/trees` - Apache-2.0 - `papaparse` - MIT - `lz-string` - MIT - `fflate` - MIT @@ -28,9 +26,7 @@ - `react-markdown` plus `remark-gfm` plus `rehype-sanitize` covers the markdown path without introducing unsafe raw HTML by default. - `next` pins its nested `postcss` dependency to `8.5.14` via `package.json` overrides so Tailwind CSS v4's `postcss ^8.5.6` peer range is satisfied in the Next.js toolchain. -- CodeMirror handles source artifacts and markdown code fences because it is excellent at read-only code presentation; JSON, markdown raw, and CSV raw views use lighter native source blocks. -- `@replit/codemirror-indentation-markers` replaces custom indent-guide logic with a maintained CM6 extension. -- `@git-diff-view/*` fits review-style diffs better than a generic merge editor for the current viewer. Its pure CSS file is mirrored into `public/vendor/diff-view-pure.css` with a Brotli-compressed `public/vendor/diff-view-pure.css.br` copy by `npm run assets:compress`, and loaded only by the diff renderer; `tests/diff-style-asset.test.ts` keeps those assets in sync with the package copy. +- `@pierre/diffs` provides every syntax-highlighted surface: review-style patches and before/after content, standalone code artifacts, JSON raw views, markdown code fences, and the `CodeView`/`EditProvider` artifact editor, all through Shiki-backed shadow DOM. `@pierre/trees` adds path-aware navigation only when a flow has multiple files. Both stay inside deferred renderer paths. Compact markdown and JSON source blocks omit wrapping and the file header so they preserve source whitespace; markdown, CSV, and JSON raw views all reuse the same `File` surface as standalone code. - `papaparse` handles CSV parsing; CSV rendering uses a native read-only table to avoid a data-grid dependency for the shipped static viewer. - `fflate` provides portable deflate/inflate support across iOS Safari and Android Chromium without relying on browser-specific compression streams. - `brotli-wasm` provides the arx/arx2/arx3 Brotli compression layer, including streaming decompression used to cap expanded output before allocating oversized decoded payloads. arx4/arx5 use the integer context mixer instead. @@ -39,7 +35,8 @@ ## Notable removals -- `rehype-highlight` was removed after review because markdown fences now reuse the CodeMirror viewer stack directly. +- `rehype-highlight` was removed after review because markdown fences reuse the code renderer directly. +- `@codemirror/*` and `@replit/codemirror-indentation-markers` were removed once standalone code, JSON raw views, markdown fences, and the artifact editor all moved to `@pierre/diffs`, leaving one highlighting stack for the app. - `vanilla-jsoneditor` was removed because its bundle cost was too high for the default JSON tree-view use case in a viewer-first product. - `clsx` and `tailwind-merge` were removed because the app only needed simple conditional string joining, and the merge runtime was being pulled into shared client chunks. - `next-themes` was removed because the static shell only needs to preserve the `theme` localStorage key and synchronize the `html.dark` class. diff --git a/docs/testing.md b/docs/testing.md index b0285c8..6ca9f3c 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -47,7 +47,7 @@ The suite is intentionally split by responsibility: - visual tests protect empty state, artifact views, theme presentation, and compact-content spacing - component tests protect selector/disclosure UI contracts - unit tests protect transport codecs, envelope validation, diff parsing, and language inference -- `npm run assets:compress` regenerates minified/precompressed public assets, including the ARX dictionaries and mirrored diff-view stylesheet +- `npm run assets:compress` regenerates the minified and precompressed ARX dictionary assets - `npm run bench:codecs` protects arx/arx2 compressed-byte ratios and the historical arx3 visible-character row against the committed `scripts/bench-baseline.json`; its corpus is fixed in `scripts/bench-codecs.mjs` so unrelated source, docs, or package metadata edits do not create false codec regressions. Auto-emit no longer uses the arx3 visible-length policy. - `npm run check:build-budgets` reads the generated `.next` manifests after `npm run build` and fails if the homepage shell or key deferred renderer chunks exceed their gzip budgets diff --git a/package-lock.json b/package-lock.json index d2d522b..0028a4a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,18 +9,8 @@ "version": "0.1.0", "license": "MIT", "dependencies": { - "@codemirror/lang-css": "^6.3.1", - "@codemirror/lang-html": "^6.4.9", - "@codemirror/lang-javascript": "^6.2.4", - "@codemirror/lang-json": "^6.0.2", - "@codemirror/lang-markdown": "^6.5.0", - "@codemirror/lang-python": "^6.2.1", - "@codemirror/lang-yaml": "^6.1.2", - "@codemirror/language": "^6.12.4", - "@codemirror/state": "^6.6.0", - "@codemirror/view": "^6.38.2", - "@git-diff-view/react": "^0.1.6", - "@replit/codemirror-indentation-markers": "^6.5.3", + "@pierre/diffs": "^1.3.6", + "@pierre/trees": "^1.0.0-beta.6", "brotli-wasm": "^3.0.1", "fflate": "^0.8.2", "lucide-react": "^1.26.0", @@ -32,7 +22,8 @@ "react-dom": "19.2.7", "react-markdown": "^10.1.0", "rehype-sanitize": "^6.0.0", - "remark-gfm": "^4.0.1" + "remark-gfm": "^4.0.1", + "shiki": "^4.4.3" }, "devDependencies": { "@playwright/test": "^1.61.0", @@ -201,162 +192,6 @@ "integrity": "sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==", "license": "Apache-2.0" }, - "node_modules/@codemirror/autocomplete": { - "version": "6.20.1", - "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.1.tgz", - "integrity": "sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A==", - "license": "MIT", - "dependencies": { - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.17.0", - "@lezer/common": "^1.0.0" - } - }, - "node_modules/@codemirror/lang-css": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz", - "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==", - "license": "MIT", - "dependencies": { - "@codemirror/autocomplete": "^6.0.0", - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@lezer/common": "^1.0.2", - "@lezer/css": "^1.1.7" - } - }, - "node_modules/@codemirror/lang-html": { - "version": "6.4.11", - "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.11.tgz", - "integrity": "sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==", - "license": "MIT", - "dependencies": { - "@codemirror/autocomplete": "^6.0.0", - "@codemirror/lang-css": "^6.0.0", - "@codemirror/lang-javascript": "^6.0.0", - "@codemirror/language": "^6.4.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.17.0", - "@lezer/common": "^1.0.0", - "@lezer/css": "^1.1.0", - "@lezer/html": "^1.3.12" - } - }, - "node_modules/@codemirror/lang-javascript": { - "version": "6.2.5", - "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz", - "integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==", - "license": "MIT", - "dependencies": { - "@codemirror/autocomplete": "^6.0.0", - "@codemirror/language": "^6.6.0", - "@codemirror/lint": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.17.0", - "@lezer/common": "^1.0.0", - "@lezer/javascript": "^1.0.0" - } - }, - "node_modules/@codemirror/lang-json": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz", - "integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==", - "license": "MIT", - "dependencies": { - "@codemirror/language": "^6.0.0", - "@lezer/json": "^1.0.0" - } - }, - "node_modules/@codemirror/lang-markdown": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.5.0.tgz", - "integrity": "sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==", - "license": "MIT", - "dependencies": { - "@codemirror/autocomplete": "^6.7.1", - "@codemirror/lang-html": "^6.0.0", - "@codemirror/language": "^6.3.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.0.0", - "@lezer/common": "^1.2.1", - "@lezer/markdown": "^1.0.0" - } - }, - "node_modules/@codemirror/lang-python": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.2.1.tgz", - "integrity": "sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==", - "license": "MIT", - "dependencies": { - "@codemirror/autocomplete": "^6.3.2", - "@codemirror/language": "^6.8.0", - "@codemirror/state": "^6.0.0", - "@lezer/common": "^1.2.1", - "@lezer/python": "^1.1.4" - } - }, - "node_modules/@codemirror/lang-yaml": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/@codemirror/lang-yaml/-/lang-yaml-6.1.2.tgz", - "integrity": "sha512-dxrfG8w5Ce/QbT7YID7mWZFKhdhsaTNOYjOkSIMt1qmC4VQnXSDSYVHHHn8k6kJUfIhtLo8t1JJgltlxWdsITw==", - "license": "MIT", - "dependencies": { - "@codemirror/autocomplete": "^6.0.0", - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@lezer/common": "^1.2.0", - "@lezer/highlight": "^1.2.0", - "@lezer/lr": "^1.0.0", - "@lezer/yaml": "^1.0.0" - } - }, - "node_modules/@codemirror/language": { - "version": "6.12.4", - "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.4.tgz", - "integrity": "sha512-1q4PaT+o6PbgpkJt4Q8Fv5XJxTy4FUZ4MWETtyiDw3J0Pyr9E2vqcKL+k9wcvjNTIsauxvE7OfmWj3FRPHQ76A==", - "license": "MIT", - "dependencies": { - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.23.0", - "@lezer/common": "^1.5.0", - "@lezer/highlight": "^1.0.0", - "@lezer/lr": "^1.0.0", - "style-mod": "^4.0.0" - } - }, - "node_modules/@codemirror/lint": { - "version": "6.9.5", - "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.5.tgz", - "integrity": "sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==", - "license": "MIT", - "dependencies": { - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.35.0", - "crelt": "^1.0.5" - } - }, - "node_modules/@codemirror/state": { - "version": "6.6.0", - "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.6.0.tgz", - "integrity": "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==", - "license": "MIT", - "dependencies": { - "@marijn/find-cluster-break": "^1.0.0" - } - }, - "node_modules/@codemirror/view": { - "version": "6.39.16", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.16.tgz", - "integrity": "sha512-m6S22fFpKtOWhq8HuhzsI1WzUP/hB9THbDj0Tl5KX4gbO6Y91hwBl7Yky33NdvB6IffuRFiBxf1R8kJMyXmA4Q==", - "license": "MIT", - "dependencies": { - "@codemirror/state": "^6.5.0", - "crelt": "^1.0.6", - "style-mod": "^4.1.0", - "w3c-keyname": "^2.2.4" - } - }, "node_modules/@csstools/color-helpers": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz", @@ -1126,48 +961,6 @@ } } }, - "node_modules/@git-diff-view/core": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@git-diff-view/core/-/core-0.1.6.tgz", - "integrity": "sha512-q2Ch8jURF6pL7VeNpOgHBRVY9gsGLXCOYpKXHG3BqpXe0kv6GNSUux8SmAYsDrakBzfgDClODxDtsM2rfiWpnA==", - "license": "MIT", - "dependencies": { - "@git-diff-view/lowlight": "^0.1.6", - "fast-diff": "^1.3.0", - "highlight.js": "^11.11.0", - "lowlight": "^3.3.0" - } - }, - "node_modules/@git-diff-view/lowlight": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@git-diff-view/lowlight/-/lowlight-0.1.6.tgz", - "integrity": "sha512-YIsiAc2aWAePWaDNi3k8xI0Vs/ZItt5J6nrftTIFbMFN3GwDOsyJFm2L7o8XWKTJkV2yItaz28KUI9CWj0MVZA==", - "license": "MIT", - "dependencies": { - "@types/hast": "^3.0.0", - "highlight.js": "^11.11.0", - "lowlight": "^3.3.0" - } - }, - "node_modules/@git-diff-view/react": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@git-diff-view/react/-/react-0.1.6.tgz", - "integrity": "sha512-koABBon5bNKh6/WnWSxggK9ojw+cvWAPnY2/ciOkwlR+8dm0h6A7Qa5kP2HFDxqYHwZ2imkGMcSLgXMOnWHRFA==", - "license": "MIT", - "dependencies": { - "@git-diff-view/core": "^0.1.6", - "@types/hast": "^3.0.0", - "fast-diff": "^1.3.0", - "highlight.js": "^11.11.0", - "lowlight": "^3.3.0", - "reactivity-store": "^0.4.0", - "use-sync-external-store": "^1.6.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" - } - }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -1753,112 +1546,6 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, - "node_modules/@lezer/common": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.1.tgz", - "integrity": "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==", - "license": "MIT" - }, - "node_modules/@lezer/css": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.1.tgz", - "integrity": "sha512-PYAKeUVBo3HFThruRyp/iK91SwiZJnzXh8QzkQlwijB5y+N5iB28+iLk78o2zmKqqV0uolNhCwFqB8LA7b0Svg==", - "license": "MIT", - "dependencies": { - "@lezer/common": "^1.2.0", - "@lezer/highlight": "^1.0.0", - "@lezer/lr": "^1.3.0" - } - }, - "node_modules/@lezer/highlight": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz", - "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==", - "license": "MIT", - "dependencies": { - "@lezer/common": "^1.3.0" - } - }, - "node_modules/@lezer/html": { - "version": "1.3.13", - "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.13.tgz", - "integrity": "sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==", - "license": "MIT", - "dependencies": { - "@lezer/common": "^1.2.0", - "@lezer/highlight": "^1.0.0", - "@lezer/lr": "^1.0.0" - } - }, - "node_modules/@lezer/javascript": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz", - "integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==", - "license": "MIT", - "dependencies": { - "@lezer/common": "^1.2.0", - "@lezer/highlight": "^1.1.3", - "@lezer/lr": "^1.3.0" - } - }, - "node_modules/@lezer/json": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz", - "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==", - "license": "MIT", - "dependencies": { - "@lezer/common": "^1.2.0", - "@lezer/highlight": "^1.0.0", - "@lezer/lr": "^1.0.0" - } - }, - "node_modules/@lezer/lr": { - "version": "1.4.8", - "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz", - "integrity": "sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==", - "license": "MIT", - "dependencies": { - "@lezer/common": "^1.0.0" - } - }, - "node_modules/@lezer/markdown": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.6.3.tgz", - "integrity": "sha512-jpGm5Ps+XErS+xA4urw7ogEGkeZOahVQF21Z6oECF0sj+2liwZopd2+I8uH5I/vZsRuuze3OxBREIANLf6KKUw==", - "license": "MIT", - "dependencies": { - "@lezer/common": "^1.5.0", - "@lezer/highlight": "^1.0.0" - } - }, - "node_modules/@lezer/python": { - "version": "1.1.18", - "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.18.tgz", - "integrity": "sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==", - "license": "MIT", - "dependencies": { - "@lezer/common": "^1.2.0", - "@lezer/highlight": "^1.0.0", - "@lezer/lr": "^1.0.0" - } - }, - "node_modules/@lezer/yaml": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/@lezer/yaml/-/yaml-1.0.4.tgz", - "integrity": "sha512-2lrrHqxalACEbxIbsjhqGpSW8kWpUKuY6RHgnSAFZa6qK62wvnPxA8hGOwOoDbwHcOFs5M4o27mjGu+P7TvBmw==", - "license": "MIT", - "dependencies": { - "@lezer/common": "^1.2.0", - "@lezer/highlight": "^1.0.0", - "@lezer/lr": "^1.4.0" - } - }, - "node_modules/@marijn/find-cluster-break": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz", - "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==", - "license": "MIT" - }, "node_modules/@mermaid-js/parser": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-1.2.0.tgz", @@ -2073,6 +1760,120 @@ "node": ">=12.4.0" } }, + "node_modules/@pierre/diffs": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/@pierre/diffs/-/diffs-1.3.6.tgz", + "integrity": "sha512-a3woaW2QHy78JDxPJK0OJzwZUN4xoQLLIS/pceO8X6+L8gA5D682mP7/w3YxxEVRPXOaoe/p/RJ5Oj/3nrEzew==", + "license": "apache-2.0", + "dependencies": { + "@pierre/theme": "2.0.0", + "@pierre/theming": "1.0.1", + "@shikijs/transformers": "^3.0.0 || ^4.0.0", + "diff": "9.0.0", + "hast-util-to-html": "9.0.5", + "lru_map": "0.4.1", + "shiki": "^3.0.0 || ^4.0.0" + }, + "peerDependencies": { + "react": "^18.3.1 || ^19.0.0", + "react-dom": "^18.3.1 || ^19.0.0" + } + }, + "node_modules/@pierre/theme": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@pierre/theme/-/theme-2.0.0.tgz", + "integrity": "sha512-yNDd9GYLQl1mEUJR8AneJ5e4ohLIHQd/wZLWr4fagt78vS2RwwZNW530vVgHqXFAyFVcFlRmGUD5ramXH46OXw==", + "license": "apache-2.0", + "engines": { + "vscode": "^1.0.0" + } + }, + "node_modules/@pierre/theming": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@pierre/theming/-/theming-1.0.1.tgz", + "integrity": "sha512-WCI5Qd7iprDpISL9fBYOLe8RV53+b7mFNA3bPzl60/2CKCSrsKN8zEcep6Y3BAzvARlmca50zGjDodqPGiTUKA==", + "license": "apache-2.0", + "peerDependencies": { + "@pierre/theme": "^1.1.0 || ^2.0.0", + "@shikijs/themes": "^3.0.0 || ^4.0.0", + "react": "^18.3.1 || ^19.0.0", + "react-dom": "^18.3.1 || ^19.0.0", + "shiki": "^3.0.0 || ^4.0.0" + }, + "peerDependenciesMeta": { + "@pierre/theme": { + "optional": true + }, + "@shikijs/themes": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "shiki": { + "optional": true + } + } + }, + "node_modules/@pierre/trees": { + "version": "1.0.0-beta.6", + "resolved": "https://registry.npmjs.org/@pierre/trees/-/trees-1.0.0-beta.6.tgz", + "integrity": "sha512-zxeuSFM9TveM7b5XofweJALCtm/tGYV9HZzdbf7Uf+kBxIlUyz24/EHaGRjB0dsmmfDQl2ETz7AWwJ15lhSnpw==", + "license": "apache-2.0", + "dependencies": { + "@pierre/theming": "1.0.0", + "preact": "11.0.0-beta.0", + "preact-render-to-string": "6.6.5" + }, + "peerDependencies": { + "react": "^18.3.1 || ^19.0.0", + "react-dom": "^18.3.1 || ^19.0.0" + } + }, + "node_modules/@pierre/trees/node_modules/@pierre/theme": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@pierre/theme/-/theme-1.1.0.tgz", + "integrity": "sha512-GC2OWTAfTIIWWYhPCygwG8t2EtePQkRfON4MI2rwIkJylmiyqIttJID2dCL8sUD8cNdEvYkEyfEHHKMeCiDLoQ==", + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "vscode": "^1.0.0" + } + }, + "node_modules/@pierre/trees/node_modules/@pierre/theming": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@pierre/theming/-/theming-1.0.0.tgz", + "integrity": "sha512-WsdrnhKfjeyXGDikZmN9pkpeZ5S/cl6EE72feiSc0tlynT1tMYqXqouhuv/foK+PY9OEnebOAVRQn3+rAstR8g==", + "license": "apache-2.0", + "peerDependencies": { + "@pierre/theme": "^1.1.0", + "@shikijs/themes": "^3.0.0 || ^4.0.0", + "react": "^18.3.1 || ^19.0.0", + "react-dom": "^18.3.1 || ^19.0.0", + "shiki": "^3.0.0 || ^4.0.0" + }, + "peerDependenciesMeta": { + "@pierre/theme": { + "optional": true + }, + "@shikijs/themes": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "shiki": { + "optional": true + } + } + }, "node_modules/@playwright/test": { "version": "1.61.0", "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.0.tgz", @@ -2089,17 +1890,6 @@ "node": ">=18" } }, - "node_modules/@replit/codemirror-indentation-markers": { - "version": "6.5.3", - "resolved": "https://registry.npmjs.org/@replit/codemirror-indentation-markers/-/codemirror-indentation-markers-6.5.3.tgz", - "integrity": "sha512-hL5Sfvw3C1vgg7GolLe/uxX5T3tmgOA3ZzqlMv47zjU1ON51pzNWiVbS22oh6crYhtVhv8b3gdXwoYp++2ilHw==", - "license": "MIT", - "peerDependencies": { - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.0.0" - } - }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.59.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz", @@ -2464,6 +2254,119 @@ "dev": true, "license": "MIT" }, + "node_modules/@shikijs/core": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-4.4.3.tgz", + "integrity": "sha512-QCR4q2ZO/ILJEuwiBMel4wdcTDb1JGwfjKTxPDF6x8ixOaluPrVqIn06C99AcRPhmYlBR56d/Fb+GN58GzExpg==", + "license": "MIT", + "dependencies": { + "@shikijs/primitive": "4.4.3", + "@shikijs/types": "4.4.3", + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.5", + "hast-util-to-html": "^9.0.5" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/engine-javascript": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-4.4.3.tgz", + "integrity": "sha512-FbOjFJp9VLdo1Wevs10BBtVxiTWwNLqZh5Gkhjgda/ioL15YOgeSl9n+6XMa3qRlPQzfhFNe641SrynFHYG0nQ==", + "license": "MIT", + "dependencies": { + "@shikijs/types": "4.4.3", + "@shikijs/vscode-textmate": "^10.0.2", + "oniguruma-to-es": "^4.3.6" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/engine-oniguruma": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-4.4.3.tgz", + "integrity": "sha512-EcOQkxdxGQrc1Row/cC2c96/v1dbZqGnEVu1qTuT/MJmp6+cXCvQussowVmCv5Tqr3KuY3c7IbM6HTW3LJ1k9w==", + "license": "MIT", + "dependencies": { + "@shikijs/types": "4.4.3", + "@shikijs/vscode-textmate": "^10.0.2" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/langs": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-4.4.3.tgz", + "integrity": "sha512-ePic0yfAJGOF83D5wBHK/00EjK65oahBYxFk5epgq33WRv7X9UuxLEV8PtR0szC0z8dl7INIpIodB99JRFlR+A==", + "license": "MIT", + "dependencies": { + "@shikijs/types": "4.4.3" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/primitive": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/primitive/-/primitive-4.4.3.tgz", + "integrity": "sha512-m0wBeLDQDeIxRdUmrCPdQqfuUamDwRL5isCfYbguKD6NiaKpVbsv+3J81DyIKgNW5h4WAIIr8T4EkgQrBBxvaQ==", + "license": "MIT", + "dependencies": { + "@shikijs/types": "4.4.3", + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.5" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/themes": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-4.4.3.tgz", + "integrity": "sha512-w8UHjeUnIR965KMWJHUPXOc2mNJUnK3vpVLYLvw5IYU2mnTTJ89E24OrJDBNiJDQ0qzb0tc4l7mrIXx5cFeIyw==", + "license": "MIT", + "dependencies": { + "@shikijs/types": "4.4.3" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/transformers": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/transformers/-/transformers-4.4.3.tgz", + "integrity": "sha512-oJSARV6NaWd+rnNJbtnpAdj3Zg0ZVyzsnMgb3vi3HA+35y8lBWUCpOnWsmyiXZIikY+x1BDqrQUgmxfzWh7Jvw==", + "license": "MIT", + "dependencies": { + "@shikijs/core": "4.4.3", + "@shikijs/types": "4.4.3" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/types": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-4.4.3.tgz", + "integrity": "sha512-UEJxmRR++MAGR6hugn0vgVS2W/6lWAts84FFSrnlH9sP0LNol7E5+NQ792pH8liWUhyMyjhTgSUH3k7iD7tc5g==", + "license": "MIT", + "dependencies": { + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.5" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/vscode-textmate": { + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", + "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==", + "license": "MIT" + }, "node_modules/@standard-schema/spec": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz", @@ -3247,9 +3150,9 @@ "license": "MIT" }, "node_modules/@types/hast": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", - "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.5.tgz", + "integrity": "sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==", "license": "MIT", "dependencies": { "@types/unist": "*" @@ -4016,21 +3919,6 @@ "url": "https://opencollective.com/vitest" } }, - "node_modules/@vue/reactivity": { - "version": "3.5.38", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.38.tgz", - "integrity": "sha512-pG6LV/NDNRbKizcUjFFLAfjaL8mcv4DmR9avNcUw2gDHBzZneuS2TWCmp633ynzxz9YYKNeEPK2I8Wraqy2HUQ==", - "license": "MIT", - "dependencies": { - "@vue/shared": "3.5.38" - } - }, - "node_modules/@vue/shared": { - "version": "3.5.38", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.38.tgz", - "integrity": "sha512-FTW0AFZNaK5/mOqvGBwVfUlNLU38TiQn4+DQgIFUnrBBJQ1crMJ82yeGQLV5jyKFsO8yRukpbuP7x+nRbH6aug==", - "license": "MIT" - }, "node_modules/acorn": { "version": "8.16.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz", @@ -4728,12 +4616,6 @@ "layout-base": "^1.0.0" } }, - "node_modules/crelt": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz", - "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==", - "license": "MIT" - }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -5519,6 +5401,15 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/diff": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/diff/-/diff-9.0.0.tgz", + "integrity": "sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.3.1" + } + }, "node_modules/doctrine": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", @@ -6341,12 +6232,6 @@ "dev": true, "license": "MIT" }, - "node_modules/fast-diff": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", - "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", - "license": "Apache-2.0" - }, "node_modules/fast-glob": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", @@ -6822,6 +6707,29 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-to-html": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz", + "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "@types/unist": "^3.0.0", + "ccount": "^2.0.0", + "comma-separated-tokens": "^2.0.0", + "hast-util-whitespace": "^3.0.0", + "html-void-elements": "^3.0.0", + "mdast-util-to-hast": "^13.0.0", + "property-information": "^7.0.0", + "space-separated-tokens": "^2.0.0", + "stringify-entities": "^4.0.0", + "zwitch": "^2.0.4" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-to-jsx-runtime": { "version": "2.3.6", "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz", @@ -6862,15 +6770,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/highlight.js": { - "version": "11.11.1", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz", - "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==", - "license": "BSD-3-Clause", - "engines": { - "node": ">=12.0.0" - } - }, "node_modules/html-encoding-sniffer": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz", @@ -6894,6 +6793,16 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/html-void-elements": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz", + "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/http-proxy-agent": { "version": "7.0.2", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz", @@ -8057,20 +7966,11 @@ "loose-envify": "cli.js" } }, - "node_modules/lowlight": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.3.0.tgz", - "integrity": "sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==", - "license": "MIT", - "dependencies": { - "@types/hast": "^3.0.0", - "devlop": "^1.0.0", - "highlight.js": "~11.11.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } + "node_modules/lru_map": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.4.1.tgz", + "integrity": "sha512-I+lBvqMMFfqaV8CJCISjI3wbjmwVu/VyOoU7+qtu9d7ioW5klMgsTTiUOUp+DJvfTTzKXoPbyC6YfgkNcyPSOg==", + "license": "MIT" }, "node_modules/lru-cache": { "version": "11.2.6", @@ -9404,6 +9304,23 @@ "wrappy": "1" } }, + "node_modules/oniguruma-parser": { + "version": "0.12.2", + "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.2.tgz", + "integrity": "sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==", + "license": "MIT" + }, + "node_modules/oniguruma-to-es": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.6.tgz", + "integrity": "sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==", + "license": "MIT", + "dependencies": { + "oniguruma-parser": "^0.12.2", + "regex": "^6.1.0", + "regex-recursion": "^6.0.2" + } + }, "node_modules/optionator": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", @@ -9640,6 +9557,7 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -9704,6 +9622,25 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/preact": { + "version": "11.0.0-beta.0", + "resolved": "https://registry.npmjs.org/preact/-/preact-11.0.0-beta.0.tgz", + "integrity": "sha512-IcODoASASYwJ9kxz7+MJeiJhvLriwSb4y4mHIyxdgaRZp6kPUud7xytrk/6GZw8U3y6EFJaRb5wi9SrEK+8+lg==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, + "node_modules/preact-render-to-string": { + "version": "6.6.5", + "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-6.6.5.tgz", + "integrity": "sha512-O6MHzYNIKYaiSX3bOw0gGZfEbOmlIDtDfWwN1JJdc/T3ihzRT6tGGSEWE088dWrEDGa1u7101q+6fzQnO9XCPA==", + "license": "MIT", + "peerDependencies": { + "preact": ">=10 || >= 11.0.0-0" + } + }, "node_modules/prebuild-install": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz", @@ -9925,20 +9862,6 @@ "react": ">=18" } }, - "node_modules/reactivity-store": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/reactivity-store/-/reactivity-store-0.4.0.tgz", - "integrity": "sha512-uL9uoREOBg2o4zUa8vMU0AbvAOk0osPloizscmyZqMvJzcuuKX3ELFYYr1DX8gAcfvlhPduz4QuLZn1eChCu4Q==", - "license": "MIT", - "dependencies": { - "@vue/reactivity": "~3.5.30", - "@vue/shared": "~3.5.30", - "use-sync-external-store": "^1.6.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" - } - }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", @@ -9991,6 +9914,30 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz", + "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==", + "license": "MIT", + "dependencies": { + "regex-utilities": "^2.3.0" + } + }, + "node_modules/regex-recursion": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz", + "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==", + "license": "MIT", + "dependencies": { + "regex-utilities": "^2.3.0" + } + }, + "node_modules/regex-utilities": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz", + "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==", + "license": "MIT" + }, "node_modules/regexp.prototype.flags": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz", @@ -10478,6 +10425,25 @@ "node": ">=8" } }, + "node_modules/shiki": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/shiki/-/shiki-4.4.3.tgz", + "integrity": "sha512-Mb/GvXPHBAXdgGIcnfU5L3ldpn1XcxrGkPHwqgRx17/I2XRfqlFKk2vGkHWINn1kdXvzJZeuO3is6I9KLPFm0g==", + "license": "MIT", + "dependencies": { + "@shikijs/core": "4.4.3", + "@shikijs/engine-javascript": "4.4.3", + "@shikijs/engine-oniguruma": "4.4.3", + "@shikijs/langs": "4.4.3", + "@shikijs/themes": "4.4.3", + "@shikijs/types": "4.4.3", + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.5" + }, + "engines": { + "node": ">=20" + } + }, "node_modules/side-channel": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", @@ -10835,12 +10801,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/style-mod": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz", - "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==", - "license": "MIT" - }, "node_modules/style-to-js": { "version": "1.1.21", "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz", @@ -11961,15 +11921,6 @@ "punycode": "^2.1.0" } }, - "node_modules/use-sync-external-store": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz", - "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==", - "license": "MIT", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" - } - }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -12227,12 +12178,6 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, - "node_modules/w3c-keyname": { - "version": "2.2.8", - "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", - "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==", - "license": "MIT" - }, "node_modules/w3c-xmlserializer": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz", diff --git a/package.json b/package.json index 24d1161..9b0cb8f 100644 --- a/package.json +++ b/package.json @@ -29,8 +29,8 @@ "lint": "eslint . && npm run check:public-export-docs", "test": "vitest run", "test:watch": "vitest", - "test:e2e": "env -u NO_COLOR playwright test", - "test:e2e:update": "env -u NO_COLOR playwright test --update-snapshots", + "test:e2e": "playwright test", + "test:e2e:update": "playwright test --update-snapshots", "test:ci": "npm run lint && npm run test && npm run typecheck && npm run test:e2e && npm run check:build-budgets", "test:browsers": "playwright install chromium webkit", "bench:codecs": "node scripts/bench-codecs.mjs", @@ -46,18 +46,8 @@ "selfhosted:csp-smoke": "node scripts/csp-smoke.mjs" }, "dependencies": { - "@codemirror/lang-css": "^6.3.1", - "@codemirror/lang-html": "^6.4.9", - "@codemirror/lang-javascript": "^6.2.4", - "@codemirror/lang-json": "^6.0.2", - "@codemirror/lang-markdown": "^6.5.0", - "@codemirror/lang-python": "^6.2.1", - "@codemirror/lang-yaml": "^6.1.2", - "@codemirror/language": "^6.12.4", - "@codemirror/state": "^6.6.0", - "@codemirror/view": "^6.38.2", - "@git-diff-view/react": "^0.1.6", - "@replit/codemirror-indentation-markers": "^6.5.3", + "@pierre/diffs": "^1.3.6", + "@pierre/trees": "^1.0.0-beta.6", "brotli-wasm": "^3.0.1", "fflate": "^0.8.2", "lucide-react": "^1.26.0", @@ -69,7 +59,8 @@ "react-dom": "19.2.7", "react-markdown": "^10.1.0", "rehype-sanitize": "^6.0.0", - "remark-gfm": "^4.0.1" + "remark-gfm": "^4.0.1", + "shiki": "^4.4.3" }, "devDependencies": { "@playwright/test": "^1.61.0", diff --git a/playwright.config.ts b/playwright.config.ts index d301e93..9bd24e9 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -1,7 +1,12 @@ import { defineConfig, devices } from "@playwright/test"; const port = Number(process.env.PLAYWRIGHT_PORT || 4401); -const cleanColorEnv = "env -u NO_COLOR"; +const webServerEnv: Record = Object.fromEntries( + Object.entries(process.env).filter((entry): entry is [string, string] => entry[1] !== undefined), +); +webServerEnv.NEXT_PUBLIC_BASE_PATH = "/agent-render"; +webServerEnv.PORT = String(port); +delete webServerEnv.NO_COLOR; export default defineConfig({ testDir: "tests/e2e", @@ -25,7 +30,8 @@ export default defineConfig({ video: "retain-on-failure", }, webServer: { - command: `${cleanColorEnv} NEXT_PUBLIC_BASE_PATH=/agent-render npm run build && ${cleanColorEnv} PORT=${port} NEXT_PUBLIC_BASE_PATH=/agent-render npm run preview`, + command: "npm run build && npm run preview", + env: webServerEnv, port, reuseExistingServer: !process.env.CI, timeout: 120000, diff --git a/public/_headers b/public/_headers index f2ce36d..b48bce1 100644 --- a/public/_headers +++ b/public/_headers @@ -20,7 +20,3 @@ Content-Encoding: br Vary: Accept-Encoding -/vendor/diff-view-pure.css.br - Content-Type: text/css; charset=utf-8 - Content-Encoding: br - Vary: Accept-Encoding diff --git a/public/vendor/diff-view-pure.css b/public/vendor/diff-view-pure.css deleted file mode 100644 index 9c6e072..0000000 --- a/public/vendor/diff-view-pure.css +++ /dev/null @@ -1,771 +0,0 @@ -.diff-tailwindcss-wrapper .\!container { - width: 100% !important; -} -.diff-tailwindcss-wrapper .container { - width: 100%; -} -@media (min-width: 640px) { - .diff-tailwindcss-wrapper .\!container { - max-width: 640px !important; - } - .diff-tailwindcss-wrapper .container { - max-width: 640px; - } -} -@media (min-width: 768px) { - .diff-tailwindcss-wrapper .\!container { - max-width: 768px !important; - } - .diff-tailwindcss-wrapper .container { - max-width: 768px; - } -} -@media (min-width: 1024px) { - .diff-tailwindcss-wrapper .\!container { - max-width: 1024px !important; - } - .diff-tailwindcss-wrapper .container { - max-width: 1024px; - } -} -@media (min-width: 1280px) { - .diff-tailwindcss-wrapper .\!container { - max-width: 1280px !important; - } - .diff-tailwindcss-wrapper .container { - max-width: 1280px; - } -} -@media (min-width: 1536px) { - .diff-tailwindcss-wrapper .\!container { - max-width: 1536px !important; - } - .diff-tailwindcss-wrapper .container { - max-width: 1536px; - } -} -.diff-tailwindcss-wrapper .invisible { - visibility: hidden; -} -.diff-tailwindcss-wrapper .absolute { - position: absolute; -} -.diff-tailwindcss-wrapper .relative { - position: relative; -} -.diff-tailwindcss-wrapper .sticky { - position: sticky; -} -.diff-tailwindcss-wrapper .left-0 { - left: 0px; -} -.diff-tailwindcss-wrapper .left-\[100\%\] { - left: 100%; -} -.diff-tailwindcss-wrapper .right-\[100\%\] { - right: 100%; -} -.diff-tailwindcss-wrapper .top-0 { - top: 0px; -} -.diff-tailwindcss-wrapper .top-\[50\%\] { - top: 50%; -} -.diff-tailwindcss-wrapper .z-\[1\] { - z-index: 1; -} -.diff-tailwindcss-wrapper .ml-\[-1\.5em\] { - margin-left: -1.5em; -} -.diff-tailwindcss-wrapper .block { - display: block; -} -.diff-tailwindcss-wrapper .inline-block { - display: inline-block; -} -.diff-tailwindcss-wrapper .flex { - display: flex; -} -.diff-tailwindcss-wrapper .table { - display: table; -} -.diff-tailwindcss-wrapper .hidden { - display: none; -} -.diff-tailwindcss-wrapper .h-\[50\%\] { - height: 50%; -} -.diff-tailwindcss-wrapper .h-full { - height: 100%; -} -.diff-tailwindcss-wrapper .min-h-\[28px\] { - min-height: 28px; -} -.diff-tailwindcss-wrapper .w-\[1\%\] { - width: 1%; -} -.diff-tailwindcss-wrapper .w-\[1\.5em\] { - width: 1.5em; -} -.diff-tailwindcss-wrapper .w-\[1\.5px\] { - width: 1.5px; -} -.diff-tailwindcss-wrapper .w-\[10px\] { - width: 10px; -} -.diff-tailwindcss-wrapper .w-\[1px\] { - width: 1px; -} -.diff-tailwindcss-wrapper .w-\[50\%\] { - width: 50%; -} -.diff-tailwindcss-wrapper .w-full { - width: 100%; -} -.diff-tailwindcss-wrapper .w-max { - width: -moz-max-content; - width: max-content; -} -.diff-tailwindcss-wrapper .min-w-\[100px\] { - min-width: 100px; -} -.diff-tailwindcss-wrapper .min-w-\[40px\] { - min-width: 40px; -} -.diff-tailwindcss-wrapper .min-w-full { - min-width: 100%; -} -.diff-tailwindcss-wrapper .flex-shrink-0 { - flex-shrink: 0; -} -.diff-tailwindcss-wrapper .shrink-0 { - flex-shrink: 0; -} -.diff-tailwindcss-wrapper .basis-\[50\%\] { - flex-basis: 50%; -} -.diff-tailwindcss-wrapper .table-fixed { - table-layout: fixed; -} -.diff-tailwindcss-wrapper .border-collapse { - border-collapse: collapse; -} -.diff-tailwindcss-wrapper .border-spacing-0 { - --tw-border-spacing-x: 0px; - --tw-border-spacing-y: 0px; - border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); -} -.diff-tailwindcss-wrapper .origin-center { - transform-origin: center; -} -.diff-tailwindcss-wrapper .translate-x-\[-50\%\] { - --tw-translate-x: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.diff-tailwindcss-wrapper .translate-x-\[50\%\] { - --tw-translate-x: 50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.diff-tailwindcss-wrapper .translate-y-\[-50\%\] { - --tw-translate-y: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.diff-tailwindcss-wrapper .transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.diff-tailwindcss-wrapper .cursor-pointer { - cursor: pointer; -} -.diff-tailwindcss-wrapper .select-none { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -.diff-tailwindcss-wrapper .flex-col { - flex-direction: column; -} -.diff-tailwindcss-wrapper .items-start { - align-items: flex-start; -} -.diff-tailwindcss-wrapper .items-center { - align-items: center; -} -.diff-tailwindcss-wrapper .justify-center { - justify-content: center; -} -.diff-tailwindcss-wrapper .overflow-x-auto { - overflow-x: auto; -} -.diff-tailwindcss-wrapper .overflow-y-hidden { - overflow-y: hidden; -} -.diff-tailwindcss-wrapper .whitespace-nowrap { - white-space: nowrap; -} -.diff-tailwindcss-wrapper .break-all { - word-break: break-all; -} -.diff-tailwindcss-wrapper .rounded-\[2px\] { - border-radius: 2px; -} -.diff-tailwindcss-wrapper .rounded-md { - border-radius: 0.375rem; -} -.diff-tailwindcss-wrapper .border-l-\[1px\] { - border-left-width: 1px; -} -.diff-tailwindcss-wrapper .fill-current { - fill: currentColor; -} -.diff-tailwindcss-wrapper .p-0 { - padding: 0px; -} -.diff-tailwindcss-wrapper .p-\[1px\] { - padding: 1px; -} -.diff-tailwindcss-wrapper .px-\[10px\] { - padding-left: 10px; - padding-right: 10px; -} -.diff-tailwindcss-wrapper .py-\[2px\] { - padding-top: 2px; - padding-bottom: 2px; -} -.diff-tailwindcss-wrapper .py-\[6px\] { - padding-top: 6px; - padding-bottom: 6px; -} -.diff-tailwindcss-wrapper .pl-\[1\.5em\] { - padding-left: 1.5em; -} -.diff-tailwindcss-wrapper .pl-\[10px\] { - padding-left: 10px; -} -.diff-tailwindcss-wrapper .pl-\[2\.0em\] { - padding-left: 2.0em; -} -.diff-tailwindcss-wrapper .pr-\[10px\] { - padding-right: 10px; -} -.diff-tailwindcss-wrapper .text-right { - text-align: right; -} -.diff-tailwindcss-wrapper .indent-\[0\.2em\] { - text-indent: 0.2em; -} -.diff-tailwindcss-wrapper .align-top { - vertical-align: top; -} -.diff-tailwindcss-wrapper .align-middle { - vertical-align: middle; -} -.diff-tailwindcss-wrapper .text-\[1\.2em\] { - font-size: 1.2em; -} -.diff-tailwindcss-wrapper .leading-\[1\.6\] { - line-height: 1.6; -} -.diff-tailwindcss-wrapper .\!text-red-500 { - --tw-text-opacity: 1 !important; - color: rgb(239 68 68 / var(--tw-text-opacity, 1)) !important; -} -.diff-tailwindcss-wrapper .opacity-\[0\.5\] { - opacity: 0.5; -} -.diff-tailwindcss-wrapper .transition-transform { - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.diff-tailwindcss-wrapper * { - box-sizing: border-box; -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-style-root { - --diff-border--: #dedede; - --diff-add-content--: #dafbe1; - --diff-del-content--: #ffebe9; - --diff-add-lineNumber--: #aceebb; - --diff-del-lineNumber--: #ffcecb; - --diff-plain-content--: #ffffff; - --diff-expand-content--: #fafafa; - --diff-plain-lineNumber--: #fafafa; - --diff-expand-lineNumber--: #fafafa; - --diff-plain-lineNumber-color--: #555555; - --diff-expand-lineNumber-color--: #555555; - --diff-hunk-content--: #ddf4ff; - --diff-hunk-lineNumber--: #b6e3ff; - --diff-hunk-lineNumber-hover--: #0969da; - --diff-add-content-highlight--: #aceebb; - --diff-del-content-highlight--: #ffcecb; - --diff-add-widget--: #0969d2; - --diff-add-widget-color--: #ffffff; - --diff-empty-content--: #fafafa; - --diff-hunk-content-color--: #777777; - - color: black; -} -.diff-tailwindcss-wrapper .diff-style-root .diff-line-syntax-raw *, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw * { - color: var(--diff-view-light, inherit); - font-weight: var(--diff-view-light-font-weight, inherit); -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-style-root { - --diff-border--: #3d444d; - --diff-add-content--: #18271f; - --diff-del-content--: #23191c; - --diff-add-lineNumber--: #284228; - --diff-del-lineNumber--: #4f2828; - --diff-plain-content--: #0d1117; - --diff-expand-content--: #161b22; - --diff-plain-lineNumber--: #161b22; - --diff-expand-lineNumber--: #161b22; - --diff-plain-lineNumber-color--: #a0aaab; - --diff-expand-lineNumber-color--: #a0aaab; - --diff-hunk-content--: #131d2e; - --diff-hunk-lineNumber--: #0c2d6b; - --diff-hunk-lineNumber-hover--: #1f6feb; - --diff-add-content-highlight--: #2f5732; - --diff-del-content-highlight--: #713431; - --diff-add-widget--: #0969d2; - --diff-add-widget-color--: #ffffff; - --diff-empty-content--: #161b22; - --diff-hunk-content-color--: #9298a0; - - color: white; -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw * { - color: var(--diff-view-dark, inherit); - font-weight: var(--diff-view-dark-font-weight, inherit); -} -.diff-tailwindcss-wrapper table, -.diff-tailwindcss-wrapper tr, -.diff-tailwindcss-wrapper td { - border-color: transparent; - border-width: 0px; - text-align: left; -} -.diff-tailwindcss-wrapper td { - padding: 0; -} -.diff-tailwindcss-wrapper .diff-line-old-num, -.diff-tailwindcss-wrapper .diff-line-new-num, -.diff-tailwindcss-wrapper .diff-line-num { - text-align: right; -} -.diff-tailwindcss-wrapper .diff-style-root tr { - content-visibility: auto; -} -.diff-tailwindcss-wrapper .diff-add-widget-wrapper { - transform-origin: center; - transform: translateX(-50%) !important; -} -.diff-tailwindcss-wrapper .diff-line-old-content .diff-add-widget-wrapper, -.diff-tailwindcss-wrapper .diff-line-new-content .diff-add-widget-wrapper { - transform: translateX(50%) !important; -} -.diff-tailwindcss-wrapper .diff-add-widget-wrapper:hover { - transform: translateX(-50%) scale(1.1) !important; -} -.diff-tailwindcss-wrapper .diff-line-old-content .diff-add-widget-wrapper:hover, -.diff-tailwindcss-wrapper .diff-line-new-content .diff-add-widget-wrapper:hover { - transform: translateX(50%) scale(1.1) !important; -} -.diff-tailwindcss-wrapper .diff-widget-tooltip { - position: relative; -} -.diff-tailwindcss-wrapper .diff-add-widget, -.diff-tailwindcss-wrapper .diff-widget-tooltip { - font-family: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - font-size: 100%; - font-weight: inherit; - line-height: inherit; - letter-spacing: inherit; - color: inherit; - margin: 0; - text-transform: none; - border-width: 0px; - background-color: transparent; - background-image: none; -} -.diff-tailwindcss-wrapper .diff-widget-tooltip::after { - display: none; - box-sizing: border-box; - background-color: #555555; - position: absolute; - content: attr(data-title); - font-size: 11px; - padding: 1px 2px; - border-radius: 4px; - overflow: hidden; - top: 50%; - white-space: nowrap; - transform: translateY(-50%); - left: calc(100% + 8px); - color: #ffffff; -} -.diff-tailwindcss-wrapper .diff-widget-tooltip::before { - display: none; - box-sizing: border-box; - content: ""; - position: absolute; - top: 50%; - left: calc(100% - 2px); - transform: translateY(-50%); - border: 6px solid transparent; - border-right-color: #555555; -} -.diff-tailwindcss-wrapper .diff-widget-tooltip:hover { - background-color: var(--diff-hunk-lineNumber-hover--); - color: white; -} -.diff-tailwindcss-wrapper .diff-widget-tooltip:hover::before { - display: block; -} -.diff-tailwindcss-wrapper .diff-widget-tooltip:hover::after { - display: block; -} -.diff-line-extend-wrapper, -.diff-line-widget-wrapper { - display: flow-root; -} -.diff-line-extend-wrapper * { - color: initial; -} -.diff-line-widget-wrapper * { - color: initial; -} -/* Multi-select styles for line range selection */ -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num, -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num, -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num { - z-index: 2; -} -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-content, -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-content, -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-content { - position: relative; -} -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num::after, -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num::after, -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num::after { - content: ""; - position: absolute; - z-index: 1; - inset: 0; - opacity: 0.15; - background-color: var(--diff-multi-select-bg, #f0c000); - pointer-events: none; -} -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num::before, -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num::before, -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num::before { - content: ""; - z-index: 2; - position: absolute; - top: 0; - bottom: 0; - right: -2px; - width: 4px; - background-color: var(--diff-multi-select-border, #2588fa); -} -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-content::after, -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-content::after, -.diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-content::after { - content: ""; - position: absolute; - z-index: 1; - inset: 0; - opacity: 0.15; - background-color: var(--diff-multi-select-bg, #f0c000); - pointer-events: none; -} -/* Multi-select: ensure proper positioning for line number cells */ -.diff-multi-selecting .diff-line-old-num, -.diff-multi-selecting .diff-line-new-num, -.diff-multi-selecting .diff-line-num { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -.diff-multi-selecting .diff-line-old-content, -.diff-multi-selecting .diff-line-new-content, -.diff-multi-selecting .diff-line-content { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -/* Prevent text selection during multi-line selection */ -.diff-multi-selecting { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -.diff-multi-selecting * { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -/* Hide addWidget button during active dragging selection */ -.diff-multi-selecting .diff-add-widget-wrapper { - display: none; -} -/* Ensure addWidget button is above selection overlay */ -.diff-multiselect-wrapper .diff-add-widget-wrapper { - z-index: 10 !important; -} -/* Line number span should not interfere with click events */ -.diff-tailwindcss-wrapper .diff-line-new-num span[data-line-num], -.diff-tailwindcss-wrapper .diff-line-old-num span[data-line-num] { - pointer-events: none; -} -.diff-multiselect-wrapper .diff-line-old-num, -.diff-multiselect-wrapper .diff-line-new-num, -.diff-multiselect-wrapper .diff-line-num { - cursor: pointer; -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw pre code.hljs { - display: block; - overflow-x: auto; - padding: 1em -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw code.hljs { - padding: 3px 5px -} -/*! - Theme: GitHub - Description: Light theme as seen on github.com - Author: github.com - Maintainer: @Hirse - Updated: 2021-05-15 - - Outdated base version: https://github.com/primer/github-syntax-light - Current colors taken from GitHub's CSS -*/ -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs { - color: #24292e; - background: #ffffff -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-doctag, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-keyword, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-meta .hljs-keyword, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-template-tag, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-template-variable, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-type, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-variable.language_ { - /* prettylights-syntax-keyword */ - color: #d73a49 -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-title, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-title.class_, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-title.class_.inherited__, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-title.function_ { - /* prettylights-syntax-entity */ - color: #6f42c1 -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-attr, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-attribute, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-literal, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-meta, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-number, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-operator, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-variable, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-selector-attr, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-selector-class, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-selector-id { - /* prettylights-syntax-constant */ - color: #005cc5 -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-regexp, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-string, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-meta .hljs-string { - /* prettylights-syntax-string */ - color: #032f62 -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-built_in, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-symbol { - /* prettylights-syntax-variable */ - color: #e36209 -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-comment, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-code, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-formula { - /* prettylights-syntax-comment */ - color: #6a737d -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-name, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-quote, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-selector-tag, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-selector-pseudo { - /* prettylights-syntax-entity-tag */ - color: #22863a -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-subst { - /* prettylights-syntax-storage-modifier-import */ - color: #24292e -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-section { - /* prettylights-syntax-markup-heading */ - color: #005cc5; - font-weight: bold -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-bullet { - /* prettylights-syntax-markup-list */ - color: #735c0f -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-emphasis { - /* prettylights-syntax-markup-italic */ - color: #24292e; - font-style: italic -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-strong { - /* prettylights-syntax-markup-bold */ - color: #24292e; - font-weight: bold -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-addition { - /* prettylights-syntax-markup-inserted */ - color: #22863a; - background-color: #f0fff4 -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-deletion { - /* prettylights-syntax-markup-deleted */ - color: #b31d28; - background-color: #ffeef0 -} -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-char.escape_, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-link, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-params, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-property, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-punctuation, -.diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw .hljs-tag { - /* purposely ignored */ - -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw pre code.hljs { - display: block; - overflow-x: auto; - padding: 1em -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw code.hljs { - padding: 3px 5px -} -/*! - Theme: GitHub Dark - Description: Dark theme as seen on github.com - Author: github.com - Maintainer: @Hirse - Updated: 2021-05-15 - - Outdated base version: https://github.com/primer/github-syntax-dark - Current colors taken from GitHub's CSS -*/ -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs { - color: #c9d1d9; - background: #0d1117 -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-doctag, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-keyword, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-meta .hljs-keyword, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-template-tag, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-template-variable, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-type, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-variable.language_ { - /* prettylights-syntax-keyword */ - color: #ff7b72 -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-title, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-title.class_, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-title.class_.inherited__, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-title.function_ { - /* prettylights-syntax-entity */ - color: #d2a8ff -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-attr, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-attribute, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-literal, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-meta, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-number, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-operator, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-variable, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-selector-attr, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-selector-class, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-selector-id { - /* prettylights-syntax-constant */ - color: #79c0ff -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-regexp, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-string, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-meta .hljs-string { - /* prettylights-syntax-string */ - color: #a5d6ff -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-built_in, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-symbol { - /* prettylights-syntax-variable */ - color: #ffa657 -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-comment, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-code, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-formula { - /* prettylights-syntax-comment */ - color: #8b949e -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-name, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-quote, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-selector-tag, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-selector-pseudo { - /* prettylights-syntax-entity-tag */ - color: #7ee787 -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-subst { - /* prettylights-syntax-storage-modifier-import */ - color: #c9d1d9 -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-section { - /* prettylights-syntax-markup-heading */ - color: #1f6feb; - font-weight: bold -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-bullet { - /* prettylights-syntax-markup-list */ - color: #f2cc60 -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-emphasis { - /* prettylights-syntax-markup-italic */ - color: #c9d1d9; - font-style: italic -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-strong { - /* prettylights-syntax-markup-bold */ - color: #c9d1d9; - font-weight: bold -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-addition { - /* prettylights-syntax-markup-inserted */ - color: #aff5b4; - background-color: #033a16 -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-deletion { - /* prettylights-syntax-markup-deleted */ - color: #ffdcd7; - background-color: #67060c -} -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-char.escape_, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-link, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-params, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-property, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-punctuation, -.diff-tailwindcss-wrapper[data-theme="dark"] .diff-line-syntax-raw .hljs-tag { - /* purposely ignored */ - -} -.diff-tailwindcss-wrapper .hover\:scale-110:hover { - --tw-scale-x: 1.1; - --tw-scale-y: 1.1; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.diff-tailwindcss-wrapper .group:hover .group-hover\:visible { - visibility: visible; -} diff --git a/public/vendor/diff-view-pure.css.br b/public/vendor/diff-view-pure.css.br deleted file mode 100644 index 04cbb92..0000000 Binary files a/public/vendor/diff-view-pure.css.br and /dev/null differ diff --git a/scripts/check-build-budgets.mjs b/scripts/check-build-budgets.mjs index 01d5434..0cb83fb 100644 --- a/scripts/check-build-budgets.mjs +++ b/scripts/check-build-budgets.mjs @@ -29,11 +29,12 @@ export const budgets = [ }, { // Guards the code renderer, which must load lazily from the artifact stage. - // 100 KiB gzipped covers the syntax-highlighting bundle; a regression here - // usually means a new language grammar or theme crept in. Trim or further - // split before raising. + // The renderer now mounts Pierre's `File`, so this entrypoint carries the + // shared @pierre/diffs + Shiki core chunks it overlaps with the diff viewer; + // the previous CodeMirror stack is gone. 170 KiB reflects that consolidated + // highlighting stack. Growth usually means a new grammar or theme crept in. importKeyParts: ["components/viewer/artifact-stage", "code-renderer"], - maxBytes: 100 * 1024, + maxBytes: 170 * 1024, name: "code renderer deferred JS", type: "loadable", }, @@ -47,15 +48,34 @@ export const budgets = [ type: "loadable", }, { - // Guards the rich diff library (@git-diff-view/react), the heaviest deferred - // chunk. 340 KiB gzipped is intentionally generous because the library is - // large but always lazy-loaded. A jump here means a version bump pulled in - // more — confirm the upgrade is wanted before raising. - importKeyParts: ["components/renderers/diff-renderer", "@git-diff-view/react"], - maxBytes: 340 * 1024, + // Guards the deferred @pierre/diffs stack. The review renderer stays outside + // the initial shell and loads only for diff artifacts; its count includes the + // shared Pierre core also counted under the code renderer's entrypoint. + // A jump here means a version bump grew that isolated review surface. + importKeyParts: ["components/viewer/artifact-stage", "diff-renderer"], + maxBytes: 165 * 1024, name: "rich diff library deferred JS", type: "loadable", }, + { + // Guards the @pierre/trees file navigator. It sits behind its own dynamic + // boundary inside the diff renderer and the artifact editor, so flows whose + // rail would hold a single row (one file, one artifact) never pay for it. + // Both importers share one chunk. + importKeyParts: ["file-tree-nav"], + maxBytes: 80 * 1024, + name: "patch file tree deferred JS", + type: "loadable", + }, + { + // Guards the editable document surface: Pierre's CodeView plus the Editor + // runtime from @pierre/diffs/edit. It loads only while the artifact editor + // is open and shares its core with the diff viewer's chunk. + importKeyParts: ["artifact-editor", "artifact-body-editor"], + maxBytes: 240 * 1024, + name: "artifact body editor deferred JS", + type: "loadable", + }, ]; /** @@ -126,9 +146,10 @@ function getLoadableFiles(reactLoadableManifest, keyParts) { let hasMatch = false; for (const key in reactLoadableManifest) { + const normalizedKey = key.replaceAll("\\", "/"); let isMatch = true; for (const part of keyParts) { - if (!key.includes(part)) { + if (!normalizedKey.includes(part)) { isMatch = false; break; } diff --git a/scripts/compress-dictionary.mjs b/scripts/compress-dictionary.mjs index 011aa04..4a301fb 100644 --- a/scripts/compress-dictionary.mjs +++ b/scripts/compress-dictionary.mjs @@ -8,15 +8,12 @@ * public/arx-dictionary.json.br — brotli-compressed (CDN or agent can use this) * public/arx2-dictionary.json — minified overlay JSON * public/arx2-dictionary.json.br — brotli-compressed overlay JSON - * public/vendor/diff-view-pure.css — mirrored @git-diff-view stylesheet - * public/vendor/diff-view-pure.css.br — brotli-compressed stylesheet loaded by diffs * * Run: node scripts/compress-dictionary.mjs */ -import { mkdirSync, readFileSync, writeFileSync } from "fs"; +import { readFileSync, writeFileSync } from "fs"; import { createRequire } from "module"; -import { dirname } from "path"; const require = createRequire(import.meta.url); const brotli = require("brotli-wasm"); @@ -39,17 +36,5 @@ function compressDictionary(path) { writeCompressedTextAsset(path, minified); } -function mirrorAndCompressTextAsset(sourcePath, targetPath) { - const source = readFileSync(sourcePath, "utf8"); - - mkdirSync(dirname(targetPath), { recursive: true }); - writeFileSync(targetPath, source, "utf8"); - writeCompressedTextAsset(targetPath, source); -} - compressDictionary("public/arx-dictionary.json"); compressDictionary("public/arx2-dictionary.json"); -mirrorAndCompressTextAsset( - "node_modules/@git-diff-view/react/styles/diff-view-pure.css", - "public/vendor/diff-view-pure.css", -); diff --git a/src/app/globals.css b/src/app/globals.css index 55bcc2c..b37e489 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,116 +1,182 @@ @import "tailwindcss"; :root { - /* ── Surface hierarchy — warm ivory with sunset undertone ── */ - --page-bg: #faf8f4; - --surface: rgba(250, 248, 244, 0.88); - --surface-strong: rgba(255, 255, 255, 0.96); - --surface-muted: rgba(40, 30, 50, 0.03); - --surface-elevated: rgba(245, 241, 235, 0.86); - /* ── Ghost borders — warm taupe ── */ - --border: rgba(160, 140, 130, 0.14); - --border-strong: rgba(160, 140, 130, 0.24); - /* ── Text — warm charcoal ── */ - --text-primary: #2a2028; - --text-muted: #6b5e68; - --text-soft: #8a7e86; - /* ── Accent — sunset orange ── */ - --accent: #cc6633; - --accent-strong: #a8502a; - --accent-secondary: #8b5ca8; - /* ── Semantic ── */ - --success: #4a8c6f; - --warning: #b8863a; - --danger: #c44b3f; - /* ── Ambient shadows — warm-tinted ── */ - --shadow-lg: 0 26px 72px rgba(42, 32, 40, 0.07); - --shadow-md: 0 20px 40px rgba(42, 32, 40, 0.035); - /* ── Radius — sharp, architectural ── */ + --page-bg: #ebe7dd; + --text-primary: #211d18; + --text-muted: #5f584d; + --text-soft: #756d60; + --bone: #e3ddd0; + --bone-lift: #f2ede3; + --bone-mid: #d2cab9; + --bone-edge: #958a79; + --chassis: #f2ecdf; + --chassis-deep: #e2dac8; + --chassis-raised: #faf6ea; + --on-chassis: #2b2620; + --on-chassis-muted: #6f6554; + --control-face: #f8f4ea; + --control-face-lift: #fdfaf1; + --control-face-pressed: #e3d9c4; + --control-edge: rgba(43, 38, 32, 0.24); + --control-edge-strong: rgba(43, 38, 32, 0.34); + --control-foot: #b8ab91; + --control-text: #2b2620; + --control-text-muted: #6f6554; + --control-accent: #b74d18; + --control-accent-strong: #93400f; + --control-accent-ink: #fff7ee; + --control-success: #3a7d5c; + --control-success-edge: #24533d; + --control-success-ink: #edf8f2; + --line: #9f9687; + --line-strong: #756c5e; + --line-dark: #51493e; + --action: #cf6828; + --action-edge: #8f3c12; + --confirmation: #559174; + --confirmation-edge: #2d5d43; + --alert: #c96b57; + --alert-edge: #713126; + --amber: #d59a43; + --focus-ring: var(--control-accent); + --paper: #f0eadf; + --paper-ink: #28221b; + --paper-body: #4d453a; + --paper-muted: #6b6255; + --paper-line: #9b9181; + --paper-line-strong: #aaa090; + --paper-panel: #e5ded1; + --paper-table-head: #ded6c8; + --paper-cell-ink: #443d34; + --paper-link-line: #756b5b; + --carbon-paper: #d9d0bd; + --carbon-ink: #41392f; + --carbon-line: #776d5e; + --surface-code: #f6f1e4; + --surface-code-raised: #e9e2cf; + --surface-code-text: #2f2a20; + --surface-code-chrome-border: #c7bba3; + --surface-code-toolbar-shine: rgba(43, 38, 32, 0.05); + --surface-code-gutter-fg: #a89b82; + --surface-code-gutter-border: #ddd3bd; + --surface-code-is-code-border: var(--control-edge); + --surface-code-is-code-bg: var(--control-face); + --surface-code-is-code-fg: var(--control-text); + --json-key: var(--text-muted); + --json-structure: var(--text-muted); + --json-string: var(--confirmation-edge); + --json-number: var(--action-edge); + --json-boolean: var(--surface-code-text); + --json-null: var(--alert-edge); + --surface: var(--bone); + --surface-strong: var(--bone-lift); + --surface-muted: var(--bone-mid); + --surface-elevated: var(--bone); + --border: var(--line); + --border-strong: var(--line-strong); + --accent: var(--action); + --accent-strong: var(--action-edge); + --accent-secondary: var(--confirmation); + --success: var(--confirmation); + --warning: var(--action); + --danger: var(--alert); --radius-xl: 2px; --radius-lg: 2px; --radius-md: 2px; --radius-sm: 2px; - --duration-base: 280ms; - /* ── Code surfaces (light default) ── */ - --surface-code: #f8f6fa; - --surface-code-raised: rgba(240, 236, 244, 0.95); - --surface-code-text: #1e1a22; - --surface-code-chrome-border: color-mix(in srgb, var(--surface-code-text) 12%, transparent); - --surface-code-toolbar-shine: color-mix(in srgb, var(--surface-code-text) 5%, transparent); - --surface-code-gutter-fg: color-mix(in srgb, var(--surface-code-text) 42%, transparent); - --surface-code-gutter-border: color-mix(in srgb, var(--surface-code-text) 10%, transparent); - --surface-code-active-line: color-mix(in srgb, var(--surface-code-text) 7%, transparent); - --surface-code-active-gutter: color-mix(in srgb, var(--surface-code-text) 9%, transparent); - /* ── Code toolbar “is-code” button (mirrors light code chrome) ── */ - --surface-code-is-code-border: var(--surface-code-chrome-border); - --surface-code-is-code-bg: color-mix(in srgb, var(--surface-code-text) 6%, transparent); - --surface-code-is-code-fg: var(--surface-code-text); - --surface-code-selection-bg: rgba(105, 209, 221, 0.18); - /* ── CodeMirror rainbow brackets (saturated for light code bg) ── */ - --rb-0: #c06820; - --rb-1: #b08828; - --rb-2: #2a8e9a; - --rb-3: #3a8a55; - --rb-4: #4466cc; - --rb-5: #8844bb; - /* ── Print ── */ + --duration-base: 140ms; + --rb-0: #a8491c; + --rb-1: #8a6a14; + --rb-2: #357f8f; + --rb-3: #4e7d3a; + --rb-4: #4a6aa5; + --rb-5: #9c5545; --print-paper: #ffffff; - --print-ink: #2a2028; - --print-muted: #6b5e68; - --print-border: rgba(160, 140, 130, 0.14); + --print-ink: #211d18; + --print-muted: #5f584d; + --print-border: #a79e90; } .dark { - /* ── Surface hierarchy — deep dusk ── */ - --page-bg: #0e0b14; - --surface: rgba(18, 14, 24, 0.92); - --surface-strong: rgba(14, 11, 20, 0.98); - --surface-muted: rgba(180, 160, 200, 0.05); - --surface-elevated: rgba(24, 20, 32, 0.96); - /* ── Ghost borders — twilight violet ── */ - --border: rgba(100, 80, 120, 0.16); - --border-strong: rgba(100, 80, 120, 0.28); - /* ── Text — warm pearl ── */ - --text-primary: #ece6f0; - --text-muted: #b8afc2; - --text-soft: #8a7e96; - /* ── Accent — sunset ember ── */ - --accent: #e08c50; - --accent-strong: #c87a42; - --accent-secondary: #b08ed0; - /* ── Semantic ── */ - --success: #78c5a8; - --warning: #deb06a; - --danger: #e8a098; - /* ── Shadows — purple-black ── */ - --shadow-lg: 0 28px 72px rgba(14, 11, 20, 0.5); - --shadow-md: 0 20px 40px rgba(14, 11, 20, 0.25); - /* ── Radius — zero, architectural ── */ - --radius-xl: 0px; - --radius-lg: 0px; - --radius-md: 0px; - --radius-sm: 0px; - /* ── Code ── */ - --surface-code: rgba(10, 8, 16, 0.98); - --surface-code-raised: rgba(18, 14, 26, 0.95); - --surface-code-text: #ece6f0; - --surface-code-chrome-border: rgba(239, 243, 247, 0.08); - --surface-code-toolbar-shine: rgba(255, 255, 255, 0.03); - --surface-code-gutter-fg: rgba(239, 243, 247, 0.5); - --surface-code-gutter-border: rgba(239, 243, 247, 0.08); - --surface-code-active-line: rgba(255, 255, 255, 0.045); - --surface-code-active-gutter: rgba(255, 255, 255, 0.05); - --surface-code-is-code-border: rgba(239, 243, 247, 0.12); - --surface-code-is-code-bg: rgba(255, 255, 255, 0.04); - --surface-code-is-code-fg: rgba(239, 243, 247, 0.86); - --surface-code-selection-bg: rgba(105, 209, 221, 0.18); - /* ── CodeMirror rainbow brackets (bright for dark code bg) ── */ - --rb-0: #f08d5e; - --rb-1: #efb360; - --rb-2: #69d1dd; - --rb-3: #80c193; - --rb-4: #9eb3ff; - --rb-5: #d799ff; + --page-bg: #14110d; + --text-primary: #dcd5c5; + --text-muted: #b8ae9c; + --text-soft: #9d9382; + --bone: #cfc6b4; + --bone-lift: #dcd5c5; + --bone-mid: #b8ae9c; + --bone-edge: #756b5b; + --control-face: #26221d; + --control-face-lift: #2e2923; + --control-face-pressed: #1a1713; + --control-edge: rgba(237, 231, 218, 0.22); + --control-edge-strong: rgba(237, 231, 218, 0.3); + --control-foot: #0f0d0a; + --control-text: #ece4d6; + --control-text-muted: #b0a694; + --chassis: #1c1915; + --chassis-deep: #0f0d0a; + --chassis-raised: #27221c; + --on-chassis: #dcd5c5; + --on-chassis-muted: #b8ae9c; + --control-accent: #cf7a1c; + --control-accent-strong: #b06010; + --control-accent-ink: #1a0e08; + --control-success: #50a877; + --control-success-edge: #2e6f50; + --control-success-ink: #102218; + --line: #5a5145; + --line-strong: #756b5b; + --line-dark: #4d453a; + --action: #cf6828; + --action-edge: #87380f; + --confirmation: #69a889; + --confirmation-edge: #2d5d43; + --alert: #c96b57; + --alert-edge: #79382d; + --amber: #dda34c; + --focus-ring: var(--control-accent); + --paper: #1a1713; + --paper-ink: #ece4d6; + --paper-body: #c9c0b0; + --paper-muted: #a99f8f; + --paper-line: #51493e; + --paper-line-strong: #675e50; + --paper-panel: #24201a; + --paper-table-head: #2b2620; + --paper-cell-ink: #d7cebe; + --paper-link-line: #cf7a1c; + --carbon-paper: #d2c8b3; + --carbon-ink: #3f372d; + --carbon-line: #756b5b; + --surface: var(--chassis); + --surface-strong: var(--chassis-raised); + --surface-muted: var(--chassis-deep); + --surface-elevated: var(--chassis-raised); + --border: var(--line); + --border-strong: var(--line-strong); + --surface-code: #1c1915; + --surface-code-raised: #27221c; + --surface-code-text: #e1d9ca; + --surface-code-chrome-border: #51493e; + --surface-code-toolbar-shine: rgba(255, 255, 255, 0.035); + --surface-code-gutter-fg: #9d9382; + --surface-code-gutter-border: #484137; + --surface-code-is-code-border: var(--control-edge); + --surface-code-is-code-bg: var(--control-face); + --surface-code-is-code-fg: var(--control-text); + --json-key: #b8ae9c; + --json-structure: #9d9382; + --json-string: #78b495; + --json-number: #d48150; + --json-boolean: #d0c5af; + --json-null: #c77b6d; + --rb-0: #d38b58; + --rb-1: #c7a85c; + --rb-2: #74a886; + --rb-3: #9aa67b; + --rb-4: #b8ae9c; + --rb-5: #c18472; } * { @@ -124,24 +190,12 @@ html { body { min-height: 100vh; margin: 0; + background: var(--page-bg); color: var(--text-primary); font-family: var(--font-sans), sans-serif; - background: - radial-gradient(ellipse 60% 45% at 0% 0%, #f1e0d2, transparent 70%), - radial-gradient(ellipse 45% 45% at 100% 5%, #e6dee8, transparent 70%), - radial-gradient(ellipse 40% 35% at 65% 100%, #ede2d6, transparent 70%), - var(--page-bg); -} - -.dark body { - background: - radial-gradient(ellipse 70% 50% at 0% 0%, #2a1a10, transparent 70%), - radial-gradient(ellipse 60% 60% at 100% 20%, #1a142a, transparent 70%), - radial-gradient(ellipse 50% 40% at 50% 100%, #201018, transparent 70%), - var(--page-bg); + font-size: 15px; } - a { color: inherit; text-decoration: none; @@ -151,856 +205,1314 @@ button, input, textarea, select { + color: inherit; font: inherit; } -::selection { - background: color-mix(in srgb, var(--accent) 36%, transparent); - color: var(--text-primary); +button, +summary, +a { + -webkit-tap-highlight-color: transparent; +} + +button:disabled { + cursor: not-allowed; + opacity: 0.55; } -.dark ::selection { - background: rgba(224, 140, 80, 0.30); - color: #ece6f0; +::selection { + background: rgba(198, 90, 30, 0.28); + color: inherit; } .font-display { - font-family: var(--font-display), serif; + font-family: var(--font-display), sans-serif; } .font-mono { font-family: var(--font-mono), monospace; } -/* ── Custom scrollbars ── */ ::-webkit-scrollbar { - width: 4px; - height: 4px; + width: 7px; + height: 7px; } ::-webkit-scrollbar-track { - background: transparent; + background: var(--chassis-deep); } ::-webkit-scrollbar-thumb { - background: var(--surface-elevated); + border: 2px solid var(--chassis-deep); + background: var(--bone-edge); +} + +.app-shell { + background: var(--page-bg); +} + +.shell-header { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 54px; + padding: 8px 12px; + border-bottom: 1px solid var(--line-dark); + background: var(--chassis); + color: var(--on-chassis); +} + +.shell-home-link, +.shell-nav, +.footer-links { + display: flex; + align-items: center; +} + +.shell-home-link { + gap: 9px; + min-width: 0; +} + +.shell-home-link:focus-visible, +.nav-text-link:focus-visible, +.shell-key:focus-visible, +.artifact-action:focus-visible, +.creator-kind-card:focus-visible, +.sample-link:focus-visible, +.artifact-switcher:focus-visible, +.creator-input:focus-visible, +.creator-textarea:focus-visible, +.artifact-disclosure-summary:focus-visible { + outline: 2px solid var(--focus-ring); + outline-offset: 2px; +} + +.shell-mark { + display: grid; + width: 32px; + height: 30px; + place-items: center; + border: 1px solid var(--bone-edge); border-radius: 2px; + background: var(--bone-lift); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 2px 0 var(--bone-edge); } -::-webkit-scrollbar-thumb:hover { - background: var(--accent); +.shell-home-link:active .shell-mark { + transform: translateY(2px); + box-shadow: inset 0 1px 2px rgba(20, 17, 13, 0.22); } -/* ── Nav bar — flat, full-width, not a card ── */ -.nav-bar { - background: var(--page-bg); - border-bottom: 1px solid var(--border); +.shell-mark-image { + display: block; + width: 17px; + height: 17px; } -.nav-text-link { - color: var(--text-muted); - font-size: 0.9rem; - font-weight: 600; - line-height: 1.4; - transition: color 150ms ease; +.shell-wordmark { + overflow: hidden; + margin: 0; + font-family: var(--font-display), sans-serif; + font-size: 17px; + font-weight: 760; + letter-spacing: -0.025em; + line-height: 1; + text-overflow: ellipsis; + white-space: nowrap; } -.nav-text-link:hover { - color: var(--text-primary); +.shell-nav { + gap: 8px; } -.nav-text-link:focus-visible { - outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent); - outline-offset: 4px; +.nav-text-link, +.shell-key { + display: inline-flex; + min-height: 34px; + align-items: center; + justify-content: center; + gap: 6px; + padding: 6px 10px; + border: 1px solid var(--control-edge); + border-radius: 2px; + background: linear-gradient(180deg, var(--control-face-lift), var(--control-face)); + box-shadow: inset 0 1px 0 rgba(237, 231, 218, 0.09), 0 2px 0 var(--control-foot); + color: var(--control-text); + font-family: var(--font-mono), monospace; + font-size: 11px; + font-weight: 650; + letter-spacing: 0.055em; + line-height: 1; + text-transform: uppercase; } -/* ── Full-bleed editorial sections ── */ -.home-hero-section { - padding-top: 2rem; - padding-bottom: 2rem; - border-bottom: 1px solid var(--border); +.nav-text-link:hover, +.shell-key:hover { + border-color: var(--control-edge-strong); + background: var(--control-face-lift); } -@media (min-width: 768px) { - .home-hero-section { - padding-top: 3rem; - padding-bottom: 3rem; - } +.nav-text-link:active, +.shell-key:active { + transform: translateY(2px); + background: var(--control-face-pressed); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45); } -@media (min-width: 1280px) { - .home-hero-section { - padding-top: 4rem; - padding-bottom: 4rem; - } +.theme-key { + min-width: 78px; } -.section-header { +.shell-body { + display: flex; + width: 100%; + max-width: 1500px; + flex-direction: column; + gap: 12px; + margin: 0 auto; + padding: 12px; +} + +.empty-state-layout { + display: grid; + gap: 12px; +} + +.home-workbench { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 12px; + align-items: start; +} + +.operations-card, +.home-samples-section, +.home-operating-limits, +.fault-placard, +.artifact-toolbar-bar, +.artifact-limits-panel, +.artifact-disclosure, +.footer-chassis { + border: 1px solid var(--line-dark); + border-radius: 2px; + background: var(--chassis); + color: var(--on-chassis); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); +} + +.operations-heading, +.instrument-heading, +.creator-result-head, +.artifact-title-row, +.artifact-limits-heading, +.sample-index-heading, +.artifact-disclosure-summary { display: flex; - flex-wrap: wrap; align-items: flex-start; justify-content: space-between; - gap: 1rem; + gap: 12px; } -.home-samples-section, -.home-inspector-section, -.home-stage-section { - padding-top: 2.5rem; - padding-bottom: 2.5rem; - border-bottom: 1px solid var(--border); +.operations-heading, +.instrument-heading { + padding: 12px; } -@media (min-width: 768px) { - .home-samples-section, - .home-inspector-section, - .home-stage-section { - padding-top: 4rem; - padding-bottom: 4rem; - } +.operations-heading { + border-bottom: 1px solid var(--line-dark); } -.site-footer { +.operations-heading h2, +.instrument-heading h2, +.creator-result-head h3, +.artifact-document-title, +.artifact-limits-heading h3, +.sample-index-heading h2, +.artifact-disclosure-title { + margin: 0; + font-family: var(--font-display), sans-serif; + font-weight: 760; + letter-spacing: -0.025em; +} + +.operations-heading h2 { + max-width: 26ch; + font-size: clamp(21px, 2.2vw, 29px); + line-height: 1.05; +} + +.instrument-heading p, +.creator-result-head p { + margin: 5px 0 0; + color: var(--on-chassis-muted); + font-size: 13px; + line-height: 1.45; +} + +.creator-form-grid { + display: grid; +} + +.operation-step { + display: grid; + grid-template-columns: 104px minmax(0, 1fr); + min-width: 0; + border-bottom: 1px solid var(--line-dark); +} + +.operation-step:last-child { + border-bottom: 0; +} + +.operation-step-head { display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - gap: 1rem; - border-top: 1px solid var(--border); - padding-top: 1.25rem; - color: var(--text-soft); + min-width: 0; + align-items: baseline; + gap: 8px; + padding: 10px; + border-right: 1px solid var(--line-dark); + background: var(--chassis-deep); +} + +.operation-number { + color: var(--on-chassis); font-family: var(--font-mono), monospace; - font-size: 0.78rem; + font-size: 15px; + font-weight: 720; + line-height: 1; } -.site-footer a { - color: var(--text-muted); +.operation-step-head h3 { + margin: 0; + color: var(--on-chassis-muted); + font-family: var(--font-mono), monospace; + font-size: 9px; + font-weight: 650; + letter-spacing: 0.08em; + line-height: 1.25; + text-transform: uppercase; } -.site-footer a:hover { - color: var(--text-primary); +.operation-step > :not(.operation-step-head) { + min-width: 0; + margin: 0; + padding: 10px; } -/* ── Bento grid — tonal separation via 1px gaps ── */ -.bento-grid { +.creator-kind-grid { display: grid; - grid-template-columns: 1fr; - gap: 1px; - background: var(--border); - border: 1px solid var(--border); - border-radius: var(--radius-xl); - overflow: hidden; + grid-template-columns: repeat(5, minmax(64px, 1fr)); + gap: 7px; } -@media (min-width: 768px) { - .bento-grid { - grid-template-columns: repeat(2, 1fr); - } +.creator-kind-card, +.artifact-action, +.artifact-switcher { + border: 1px solid var(--control-edge); + border-radius: 2px; + background: linear-gradient(180deg, var(--control-face-lift), var(--control-face)); + box-shadow: inset 0 1px 0 rgba(237, 231, 218, 0.09), 0 2px 0 var(--control-foot); + color: var(--control-text); + transition: background-color var(--duration-base) ease, border-color var(--duration-base) ease; } -@media (min-width: 1280px) { - .bento-grid { - grid-template-columns: repeat(3, 1fr); - } +.creator-kind-card { + display: flex; + min-height: 38px; + align-items: center; + justify-content: center; + padding: 6px 8px; +} - .bento-wide { - grid-column: span 2; - } +.creator-kind-card:hover, +.artifact-action:hover, +.artifact-switcher:hover { + border-color: var(--control-edge-strong); + background: var(--control-face-lift); } -.bento-grid-compact { - grid-template-columns: repeat(2, 1fr); +.creator-kind-card:active, +.artifact-action:active, +.artifact-switcher:active { + transform: translateY(2px); + background: var(--control-face-pressed); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45); } -.bento-card { - background: var(--page-bg); +.creator-kind-card.is-active, +.artifact-action.is-depressed, +.artifact-switcher.is-active { + transform: translateY(2px); + border-color: var(--control-accent); + background: var(--control-face-pressed); + box-shadow: inset 3px 0 0 var(--control-accent), inset 0 2px 4px rgba(0, 0, 0, 0.45); } -.dark .bento-card { - background: rgba(14, 11, 20, 0.98); +.creator-kind-label { + font-family: var(--font-sans), sans-serif; + font-size: 12px; + font-weight: 680; + line-height: 1; + text-transform: lowercase; } -.bento-link { +.creator-identify-grid { display: grid; - gap: 0.5rem; - align-content: start; - transition: background-color 500ms ease; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 9px; } -.bento-link:hover { - background: color-mix(in srgb, var(--accent) 3%, var(--page-bg)); +.creator-field { + display: grid; + min-width: 0; + gap: 5px; } -.dark .bento-link:hover { - background: rgba(224, 140, 80, 0.04); +.creator-field-full { + grid-column: 1 / -1; } -.panel { - position: relative; - border: 1px solid var(--border); - border-radius: var(--radius-xl); - background: var(--surface-strong); - overflow: hidden; +.creator-field-head { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 8px; } -.section-kicker { - color: var(--text-soft); +.metric-label, +.creator-result-metrics dt, +.artifact-disclosure-grid dt, +.limits-table dt { + color: var(--on-chassis-muted); font-family: var(--font-mono), monospace; - font-size: 0.75rem; - font-weight: 500; - letter-spacing: 0.02em; + font-size: 9px; + font-weight: 650; + letter-spacing: 0.085em; + line-height: 1.25; + text-transform: uppercase; } -.mono-pill { - display: inline-flex; - align-items: center; - gap: 0.45rem; - padding: 0.46rem 0.78rem; - border: 1px solid var(--border); - border-radius: var(--radius-sm); - background: color-mix(in srgb, var(--surface-elevated) 86%, transparent); - color: var(--text-muted); +.creator-field-hint { + overflow: hidden; + color: var(--on-chassis-muted); + font-size: 11px; + line-height: 1.35; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; +} + +.creator-input, +.creator-textarea { + width: 100%; + border: 1px solid var(--line-dark); + border-radius: 2px; + outline: none; + background: var(--chassis-deep); + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.035); + color: var(--on-chassis); +} + +.creator-input { + min-height: 40px; + padding: 8px 10px; +} + +.creator-textarea { + min-height: 220px; + padding: 10px; + resize: vertical; font-family: var(--font-mono), monospace; - font-size: 0.75rem; - font-weight: 600; - letter-spacing: 0.01em; + font-size: 12px; + line-height: 1.55; } -.shell-pill { - min-height: 2.25rem; - border-color: var(--border-strong); - color: var(--text-primary); - background: color-mix(in srgb, var(--surface-strong) 88%, transparent); +.creator-input::placeholder, +.creator-textarea::placeholder { + color: #958b7a; } -/* Dark data chips */ -.dark .mono-pill { - background: rgba(24, 20, 32, 0.8); - border-color: rgba(100, 80, 120, 0.22); +.creator-input:focus, +.creator-textarea:focus { + border-color: var(--bone-edge); + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.44), 0 0 0 1px var(--bone-edge); } -.metric-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: 0.75rem; +.creator-codec-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 7px; } -.metric-card { - border: 1px solid var(--border); - border-radius: var(--radius-lg); - background: color-mix(in srgb, var(--surface-elevated) 90%, transparent); - padding: 0.9rem 0.95rem; +.artifact-action { + display: inline-flex; + min-width: 50px; + min-height: 38px; + align-items: center; + justify-content: center; + gap: 6px; + padding: 7px 10px; + font-family: var(--font-mono), monospace; + font-size: 10px; + font-weight: 650; + letter-spacing: 0.035em; + line-height: 1.1; + text-align: center; + text-transform: uppercase; } -.empty-state-layout { - display: grid; - gap: 0; +.artifact-action.is-commit { + border-color: var(--control-accent-strong); + background: var(--control-accent); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 var(--control-accent-strong); + color: var(--control-accent-ink); } -.sample-link-grid { - display: grid; - gap: 0.75rem; +.artifact-action.is-commit:hover { + border-color: var(--control-accent-strong); + background: var(--control-accent-strong); } -.hero-link-card { - display: grid; - gap: 0.6rem; - min-height: 100%; - padding: 1rem 1.05rem; - border: 1px solid var(--border); - border-radius: var(--radius-lg); - background: color-mix(in srgb, var(--surface-elevated) 80%, transparent); - transition: - border-color 150ms ease, - background-color 150ms ease; +.artifact-action.is-commit:active { + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.36); } -.hero-link-card:hover { - border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); - background: color-mix(in srgb, var(--accent) 3%, var(--surface-elevated)); +.artifact-action.is-confirmed { + border-color: var(--control-success-edge); + background: var(--control-success); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 var(--control-success-edge); + color: var(--control-success-ink); } -.hero-link-card.is-static:hover { - transform: none; - border-color: var(--border); - box-shadow: none; +.artifact-action.is-deprecated { + color: var(--control-text-muted); } -.hero-link-card:focus-visible { - outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent); - outline-offset: 2px; +.artifact-action.is-code { + border-color: var(--surface-code-is-code-border); + background: var(--surface-code-is-code-bg); + color: var(--surface-code-is-code-fg); } -.hero-link-eyebrow { - color: var(--accent); - font-family: var(--font-mono), monospace; - font-size: 0.75rem; - font-weight: 500; - letter-spacing: 0.02em; +.codec-key { + min-width: 54px; + text-transform: lowercase; } -.hero-link-title { +.operation-commit-row { display: flex; - align-items: flex-start; + align-items: stretch; justify-content: space-between; - gap: 0.75rem; - color: var(--text-primary); - font-size: 1rem; - font-weight: 600; - line-height: 1.45; + gap: 9px; } -.hero-link-body { - margin: 0; - color: var(--text-muted); - font-size: 0.92rem; - line-height: 1.7; +.operation-commit-row .artifact-action { + min-width: 150px; } -.metric-label { - color: var(--text-soft); +.qrh-callout { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 8px; + align-items: start; + padding: 7px 8px; + border: 1px solid var(--line-dark); + border-radius: 2px; + background: var(--chassis-deep); + color: var(--on-chassis-muted); + font-size: 11px; + line-height: 1.4; +} + +.qrh-callout > span { font-family: var(--font-mono), monospace; - font-size: 0.72rem; - font-weight: 600; + font-size: 9px; + font-weight: 750; letter-spacing: 0.08em; - text-transform: uppercase; } -.metric-value { - margin-top: 0.45rem; - font-size: 1.1rem; - font-weight: 600; - line-height: 1.3; +.qrh-callout.is-caution { + border-color: var(--action); } -.budget-track { - height: 3px; - border-radius: 0; - background: color-mix(in srgb, var(--surface-muted) 78%, transparent); - overflow: hidden; +.qrh-callout.is-caution > span { + color: var(--action); } -.budget-fill { - height: 100%; - border-radius: 0; - background: linear-gradient(90deg, var(--accent), var(--accent-strong)); - transition: width var(--duration-base) ease; +.qrh-callout.is-warning { + border-color: var(--alert); } -.sample-link { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 1rem; - min-height: 100%; - border: 1px solid var(--border); - border-radius: var(--radius-lg); - padding: 1.25rem 1.5rem; - background: color-mix(in srgb, var(--surface-elevated) 88%, transparent); - transition: - transform var(--duration-base) ease, - border-color var(--duration-base) ease, - background-color var(--duration-base) ease, - box-shadow var(--duration-base) ease; +.qrh-callout.is-warning > span { + color: var(--alert); } -.sample-link:hover { - border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); - background: color-mix(in srgb, var(--accent) 3%, var(--surface-elevated)); +.creator-result-shell { + min-width: 0; } -.sample-link.is-active { - border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); - background: color-mix(in srgb, var(--accent) 5%, var(--surface-strong)); +.carbon-output { + position: relative; + display: grid; + gap: 10px; + margin: 10px; + padding: 20px 12px 22px; + overflow: hidden; + border: 1px solid var(--carbon-line); + border-radius: 0; + background: var(--carbon-paper); + color: var(--carbon-ink); + animation: carbon-feed 260ms cubic-bezier(0.16, 1, 0.3, 1) both; } -.home-generator-section { - padding-top: 2.5rem; - padding-bottom: 2.5rem; - border-bottom: 1px solid var(--border); +.carbon-output::before { + position: absolute; + top: 0; + right: 0; + left: 0; + height: 8px; + background: repeating-linear-gradient(90deg, var(--carbon-ink) 0 12px, transparent 12px 20px); + content: ""; + opacity: 0.66; } -@media (min-width: 768px) { - .home-generator-section { - padding-top: 4rem; - padding-bottom: 4rem; +.carbon-output::after { + position: absolute; + right: 9px; + bottom: 8px; + left: 9px; + border-bottom: 1px dashed var(--carbon-line); + content: ""; +} + +@keyframes carbon-feed { + from { + clip-path: inset(0 0 100% 0); + } + to { + clip-path: inset(0 0 0 0); } } -.home-generator-grid, -.creator-form-grid, -.creator-result-metrics, -.creator-result-actions { - display: grid; - gap: 0.8rem; +.creator-result-head { + align-items: center; + padding-bottom: 8px; + border-bottom: 1px solid var(--carbon-line); } -.home-generator-grid { - gap: 1.5rem; +.creator-result-head h3 { + font-size: 20px; + line-height: 1.05; } -.home-generator-heading { +.creator-result-head p { + color: var(--carbon-ink); + font-family: var(--font-mono), monospace; + font-size: 10px; + opacity: 0.72; +} + +.carbon-stamp { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 6px 9px; + transform: rotate(-4deg); + border: 2px solid var(--confirmation-edge); + color: var(--confirmation-edge); + font-family: var(--font-mono), monospace; + font-size: 11px; + font-weight: 760; + letter-spacing: 0.1em; + line-height: 1; +} + +.carbon-fields { display: grid; - gap: 0.75rem; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 9px; } -.creator-kind-grid { +.creator-link-frame { display: grid; - grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr)); - gap: 0.65rem; - margin-top: 1rem; + gap: 5px; + min-width: 0; + padding: 8px; + border: 1px solid var(--carbon-line); + background: rgba(255, 255, 255, 0.13); } -.creator-kind-card { - display: flex; - align-items: center; - gap: 0.7rem; - padding: 0.82rem 0.88rem; - border: 1px solid var(--border); - border-radius: var(--radius-lg); - background: color-mix(in srgb, var(--surface-elevated) 90%, transparent); - color: var(--text-primary); - transition: - border-color 150ms ease, - background-color 150ms ease; +.carbon-output .metric-label, +.carbon-output .creator-result-metrics dt { + color: var(--carbon-ink); } -.creator-kind-card:hover { - border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); - background: color-mix(in srgb, var(--accent) 3%, var(--surface-elevated)); +.creator-link-output { + width: 100%; + min-height: 94px; + margin: 0; + padding: 7px; + resize: none; + border: 1px solid rgba(65, 57, 47, 0.42); + border-radius: 0; + outline: none; + background: rgba(40, 34, 27, 0.07); + box-shadow: inset 0 2px 4px rgba(65, 57, 47, 0.15); + color: var(--carbon-ink); + font-family: var(--font-mono), monospace; + font-size: 10px; + line-height: 1.45; + word-break: break-all; } -.creator-kind-card.is-active { - border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); - background: color-mix(in srgb, var(--accent) 6%, var(--surface-strong)); +.creator-result-metrics { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + margin: 0; + border-top: 1px solid var(--carbon-line); + border-left: 1px solid var(--carbon-line); } -.creator-kind-card:focus-visible, -.creator-input:focus-visible, -.creator-textarea:focus-visible { - outline: 2px solid color-mix(in srgb, var(--accent) 44%, transparent); - outline-offset: 2px; +.creator-result-metrics > div { + min-width: 0; + padding: 7px 8px; + border-right: 1px solid var(--carbon-line); + border-bottom: 1px solid var(--carbon-line); +} + +.creator-result-metrics dd { + overflow: hidden; + margin: 4px 0 0; + font-family: var(--font-mono), monospace; + font-size: 11px; + font-weight: 650; + line-height: 1.25; + text-overflow: ellipsis; } -.creator-kind-icon { +.creator-result-actions { display: grid; - place-items: center; - width: 2.2rem; - height: 2.2rem; - border: 1px solid var(--border); - border-radius: var(--radius-md); - background: color-mix(in srgb, var(--surface-muted) 90%, transparent); - color: var(--accent); + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 7px; } -.creator-kind-label { - font-size: 0.92rem; - font-weight: 600; - line-height: 1.35; - text-transform: capitalize; +.creator-warning-state, +.creator-inline-status, +.creator-error-state, +.artifact-share-warning { + padding: 8px 9px; + border: 1px solid var(--action); + background: var(--chassis-deep); + color: var(--on-chassis); + font-size: 11px; + line-height: 1.45; } -.creator-form-grid { - margin-top: 1rem; +.creator-inline-status { + border-color: var(--action); + color: var(--action); } -.creator-field { +.creator-error-state { display: grid; - gap: 0.45rem; + grid-template-columns: auto 1fr; + gap: 9px; + margin: 10px; + border-color: var(--alert); } -.creator-field-full { - grid-column: 1 / -1; +.creator-error-state > span { + color: var(--alert); + font-family: var(--font-mono), monospace; + font-size: 10px; + font-weight: 750; + letter-spacing: 0.08em; } -.creator-field-head { - display: flex; - flex-wrap: wrap; - align-items: baseline; - justify-content: space-between; - gap: 0.5rem 1rem; +.sample-index-heading { + align-items: center; + padding: 9px 10px; + border-bottom: 1px solid var(--line-dark); } -.creator-field-hint { - color: var(--text-muted); - font-size: 0.86rem; - line-height: 1.5; +.sample-index-heading h2 { + font-size: 17px; + line-height: 1; } -.creator-input, -.creator-textarea, -.creator-link-output { - width: 100%; - border: none; - border-bottom: 2px solid transparent; - border-radius: var(--radius-lg); - background: color-mix(in srgb, var(--surface-strong) 94%, transparent); - color: var(--text-primary); - transition: border-color var(--duration-base) ease; +.sample-index-heading > span { + color: var(--on-chassis-muted); + font-family: var(--font-mono), monospace; + font-size: 9px; + letter-spacing: 0.08em; } -.creator-input:focus-visible, -.creator-textarea:focus-visible { - border-bottom-color: var(--accent); +.sample-link-grid { + display: grid; + gap: 0; + margin: 0; + padding: 0; + list-style: none; } -.creator-input, -.creator-textarea { - padding: 0.88rem 0.95rem; +.sample-link-grid li + li { + border-top: 1px solid var(--line-dark); } -.creator-input::placeholder, -.creator-textarea::placeholder { - color: var(--text-soft); +.sample-link { + display: grid; + grid-template-columns: 28px minmax(0, 1fr) auto; + gap: 8px; + min-height: 55px; + align-items: center; + padding: 7px 9px; + background: var(--chassis); + color: var(--on-chassis); } -.creator-input { - min-height: 3rem; +.sample-link:hover { + background: var(--chassis-raised); } -.creator-textarea { - min-height: 17rem; - resize: vertical; +.sample-link:active, +.sample-link.is-active { + background: var(--bone-mid); + color: #241f19; + box-shadow: inset 0 2px 4px rgba(20, 17, 13, 0.22); +} + +.sample-link-index, +.sample-link-length, +.sample-link-meta { font-family: var(--font-mono), monospace; - font-size: 0.86rem; - line-height: 1.65; + font-size: 9px; + letter-spacing: 0.045em; } -.creator-form-footer { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - gap: 0.85rem; - padding-top: 0.2rem; +.sample-link-index { + color: var(--on-chassis-muted); + font-size: 12px; + font-weight: 700; } -.creator-codec-row { - display: flex; - flex-wrap: wrap; +.sample-link.is-active .sample-link-index, +.sample-link.is-active .sample-link-meta { + color: #5d5549; +} + +.sample-link-copy { + display: grid; + min-width: 0; + gap: 3px; +} + +.sample-link-title { + overflow: hidden; + font-size: 12px; + font-weight: 680; + line-height: 1.2; + text-overflow: ellipsis; + white-space: nowrap; +} + +.sample-link-meta, +.sample-link-length { + color: var(--on-chassis-muted); + line-height: 1.2; + white-space: nowrap; +} + +.sample-link.is-active .sample-link-length { + color: #40392f; +} + +.home-operating-limits, +.fault-placard { + overflow: hidden; +} + +.instrument-heading { align-items: center; - gap: 0.4rem; + border-bottom: 1px solid var(--line-dark); } -.creator-result-shell { +.instrument-heading h2 { + font-size: 18px; + line-height: 1.05; +} + +.limits-table { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + margin: 0; + border-bottom: 1px solid var(--line-dark); +} + +.limits-table > div { min-width: 0; + padding: 8px 10px; + border-right: 1px solid var(--line-dark); +} + +.limits-table > div:last-child { + border-right: 0; } -.creator-result-card { +.limits-table dd { + margin: 4px 0 0; + color: var(--on-chassis); + font-family: var(--font-mono), monospace; + font-size: 11px; + font-weight: 600; + line-height: 1.3; +} + +.limits-callouts { display: grid; - gap: 1rem; - height: 100%; - border: 1px solid var(--border); - border-radius: var(--radius-xl); - background: color-mix(in srgb, var(--surface-elevated) 80%, transparent); - padding: 1.5rem; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px; + padding: 9px; } -.creator-result-head { +.fault-placard { + border-color: var(--alert); +} + +.fault-placard .instrument-heading { + border-bottom-color: var(--alert-edge); +} + +.fault-hash-readout { + display: grid; + grid-template-columns: 60px minmax(0, 1fr); + gap: 8px; + align-items: start; + margin: 9px; + padding: 8px; + border: 1px solid var(--line-dark); + background: var(--chassis-deep); + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4); + color: var(--amber); + font-family: var(--font-mono), monospace; + font-size: 10px; + line-height: 1.45; +} + +.fault-hash-readout code { + overflow-wrap: anywhere; +} + +.site-footer { + display: grid; + gap: 0; + margin-top: 0; +} + +.footer-chassis { display: flex; - flex-wrap: wrap; - align-items: flex-start; + align-items: center; justify-content: space-between; - gap: 0.75rem; + gap: 12px; + padding: 10px 12px; } -.creator-link-frame, -.creator-result-note, -.creator-empty-state, -.creator-error-state, -.creator-warning-state { - border: 1px solid var(--border); - border-radius: var(--radius-lg); - background: color-mix(in srgb, var(--surface-strong) 92%, transparent); - padding: 0.95rem 1rem; +.footer-identity { + display: grid; + gap: 4px; } -.creator-link-output { - min-height: 7.75rem; - margin-top: 0.6rem; - padding: 0; - border: none; - border-radius: 0; - resize: none; - background: transparent; +.footer-wordmark, +.footer-tagline, +.footer-links, +.footer-spec-strip { font-family: var(--font-mono), monospace; - font-size: 0.76rem; - line-height: 1.65; - word-break: break-all; } -.creator-result-actions { - grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); +.footer-wordmark { + color: var(--on-chassis); + font-size: 13px; + font-weight: 700; + letter-spacing: -0.015em; } -.creator-inline-status { - margin-top: 0.7rem; - color: var(--warning); - font-size: 0.86rem; - line-height: 1.55; +.footer-tagline { + color: var(--on-chassis-muted); + font-size: 9px; + letter-spacing: 0.065em; + text-transform: uppercase; } -.artifact-share-warning { - margin: 0; - padding: 0.85rem 1rem; - border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border)); - border-radius: var(--radius-lg); - background: color-mix(in srgb, var(--warning) 8%, var(--surface-strong)); - color: var(--warning); - font-size: 0.86rem; - line-height: 1.55; +.footer-links { + flex-wrap: wrap; + justify-content: flex-end; + gap: 5px 12px; + color: var(--on-chassis-muted); + font-size: 10px; } -.creator-error-state { - color: var(--danger); - font-size: 0.9rem; - line-height: 1.55; +.footer-links a { + text-decoration: underline; + text-decoration-color: var(--line-strong); + text-underline-offset: 3px; } -.creator-warning-state { - color: var(--warning); - font-size: 0.9rem; - line-height: 1.55; - border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); - background: color-mix(in srgb, var(--warning) 8%, var(--surface-strong)); +.footer-links a:hover { + color: var(--on-chassis); +} + +.footer-spec-strip { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + min-height: 27px; + padding: 5px 10px; + border: 1px solid var(--line-dark); + border-top: 0; + background: var(--chassis-deep); + color: var(--on-chassis-muted); + font-size: 9px; + letter-spacing: 0.055em; + text-transform: lowercase; } .artifact-first-layout { display: grid; - grid-template-columns: minmax(0, 1fr); - gap: 0; - scroll-margin-top: 4.5rem; + min-width: 0; + gap: 10px; + scroll-margin-top: 66px; } -/* ── Compact toolbar ribbon ── */ .artifact-toolbar-bar { display: flex; - flex-wrap: wrap; align-items: center; justify-content: space-between; - gap: 0.75rem; - padding: 0.75rem 0; - border-bottom: 1px solid var(--border); + gap: 10px; + min-height: 56px; + padding: 8px; } .artifact-toolbar-left { display: flex; - flex-wrap: wrap; + min-width: 0; align-items: center; - gap: 0.75rem 1.5rem; + gap: 10px; } -/* ── Editorial content area ── */ -.artifact-content-section { - padding-top: 2rem; - padding-bottom: 2rem; +.artifact-toolbar-filename { + overflow: hidden; + margin: 0; + color: var(--on-chassis); + font-family: var(--font-display), sans-serif; + font-size: 18px; + font-weight: 740; + letter-spacing: -0.02em; + line-height: 1.1; + text-overflow: ellipsis; + white-space: nowrap; } -@media (min-width: 768px) { - .artifact-content-section { - padding-top: 3rem; - padding-bottom: 3rem; - } +.viewer-toolbar, +.diff-view-toggle, +.code-renderer-toolbar, +.diff-renderer-toolbar, +.csv-renderer-toolbar, +.json-renderer-toolbar { + display: flex; + align-items: center; + gap: 7px; } -.artifact-selector-row { - display: flex; - gap: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - scroll-padding-inline: 1rem; - overflow-x: auto; - border-bottom: 1px solid var(--border); - scroll-snap-type: x proximity; +.viewer-toolbar { + flex-wrap: wrap; + justify-content: flex-end; } -.artifact-selector-row::-webkit-scrollbar { - height: 4px; +.artifact-share-warning { + margin: 0; + border-color: var(--action); } -.artifact-selector-row::-webkit-scrollbar-thumb { - border-radius: 2px; - background: color-mix(in srgb, var(--accent) 22%, var(--border)); +.artifact-selector-row { + display: flex; + gap: 7px; + padding: 8px; + overflow-x: auto; + border: 1px solid var(--line-dark); + background: var(--chassis-deep); + scroll-snap-type: x proximity; } .artifact-switcher { display: flex; - align-items: flex-start; - gap: 0.85rem; - flex: 0 0 min(18rem, calc(100vw - 5rem)); - min-height: 4.5rem; - border: 1px solid var(--border); - border-radius: var(--radius-lg); - padding: 0.85rem 0.95rem; - background: color-mix(in srgb, var(--surface-elevated) 88%, transparent); + flex: 0 0 min(248px, calc(100vw - 54px)); + min-height: 50px; + align-items: center; + gap: 8px; + padding: 7px 9px; scroll-snap-align: start; - transition: - transform var(--duration-base) ease, - border-color var(--duration-base) ease, - background-color var(--duration-base) ease, - box-shadow var(--duration-base) ease; } -.artifact-switcher:hover { - border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); - background: color-mix(in srgb, var(--accent) 3%, var(--surface-elevated)); +.artifact-switcher-icon { + display: grid; + width: 27px; + height: 27px; + flex: 0 0 27px; + place-items: center; + border: 1px solid var(--control-edge); + background: var(--control-face-pressed); } .artifact-switcher-content { min-width: 0; } -.artifact-switcher.is-active { - border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); - background: color-mix(in srgb, var(--accent) 6%, var(--surface-strong)); - box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); +.artifact-switcher-title { + color: var(--control-text); + font-size: 12px; + font-weight: 700; +} + +.artifact-switcher-meta { + margin-top: 2px; + color: var(--control-text-muted); + font-family: var(--font-mono), monospace; + font-size: 9px; + line-height: 1.25; +} + +.artifact-content-section { + display: grid; + gap: 8px; + min-width: 0; +} + +.artifact-title-row { + align-items: center; + padding: 8px 2px; + border-bottom: 1px solid var(--border); +} + +.artifact-document-title { + font-size: clamp(24px, 3.2vw, 40px); + line-height: 1.02; +} + +.viewer-frame { + min-width: 0; + overflow: hidden; + border: 1px solid var(--line-dark); + border-radius: 2px; + background: var(--surface-code); +} + +.viewer-frame-primary { + min-height: 0; +} + +.artifact-preview { + min-width: 0; + min-height: 0; + padding: 10px; + background: var(--surface-code); + color: var(--surface-code-text); +} + +.artifact-preview.is-markdown { + padding: clamp(16px, 3vw, 34px); + background: var(--paper); + color: var(--paper-ink); +} + +.artifact-preview > pre { + margin: 0; + color: var(--surface-code-text); + font-family: var(--font-mono), monospace; + font-size: 12px; + line-height: 1.55; + white-space: pre-wrap; + word-break: break-word; +} + +.artifact-editor { + display: grid; + gap: 10px; + padding: 10px; + background: var(--chassis); + color: var(--on-chassis); } -.dark .artifact-switcher.is-active { - box-shadow: inset 3px 0 0 var(--accent); +.artifact-editor .creator-form-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 9px; } -.artifact-switcher:focus-visible { - outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent); - outline-offset: 2px; +.artifact-editor .creator-form-footer { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 9px; } -.artifact-switcher-icon { +.artifact-instrument-stack { display: grid; - place-items: center; - width: 2.35rem; - height: 2.35rem; - flex-shrink: 0; - border: 1px solid var(--border); - border-radius: var(--radius-md); - background: color-mix(in srgb, var(--surface-muted) 90%, transparent); - color: var(--accent); -} - -.artifact-switcher.is-active .artifact-switcher-icon { - border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); - background: color-mix(in srgb, var(--accent) 8%, var(--surface-strong)); + gap: 8px; } -.viewer-frame { - border: 1px solid var(--border); - border-radius: var(--radius-xl); - background: color-mix(in srgb, var(--surface-strong) 97%, transparent); +.artifact-limits-panel { overflow: hidden; } -.dark .viewer-frame { - background: color-mix(in srgb, var(--surface-strong) 96%, #0b1016 4%); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); +.artifact-limits-heading { + align-items: center; + padding: 7px 9px; + border-bottom: 1px solid var(--line-dark); } -.viewer-frame-primary { - min-height: 0; +.artifact-limits-heading h3 { + color: var(--on-chassis); + font-size: 15px; + line-height: 1; + text-transform: uppercase; } -.artifact-preview { - min-height: 0; - padding: 1.5rem; - background: color-mix(in srgb, var(--surface-strong) 96%, transparent); +.artifact-metadata-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); } -@media (min-width: 768px) { - .artifact-preview { - padding: 2rem 2.5rem; - } +.artifact-limit-cell { + min-width: 0; + padding: 8px 9px; + border-right: 1px solid var(--line-dark); + border-bottom: 1px solid var(--line-dark); } -.dark .artifact-preview { - background: color-mix(in srgb, var(--surface-elevated) 96%, transparent); +.artifact-limit-cell:nth-child(2n) { + border-right: 0; } -.artifact-preview pre { - margin: 0; - white-space: pre-wrap; - word-break: break-word; - color: var(--text-muted); +.artifact-meta-value, +.metric-value { + overflow: hidden; + margin: 4px 0 0; + color: var(--on-chassis); font-family: var(--font-mono), monospace; - font-size: 0.86rem; - line-height: 1.7; + font-size: 11px; + font-weight: 620; + line-height: 1.3; + overflow-wrap: anywhere; } -.artifact-preview.is-markdown { - padding: 0.95rem; +.artifact-disclosure { + overflow: hidden; + margin: 0; } -.artifact-editor { - display: grid; - gap: 1.15rem; - padding: 1.5rem; +.artifact-disclosure-summary { + align-items: center; + padding: 8px 9px; + cursor: pointer; + list-style: none; } -@media (min-width: 768px) { - .artifact-editor { - padding: 2rem 2.5rem; - } +.artifact-disclosure-summary::-webkit-details-marker { + display: none; } -.viewer-toolbar { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: flex-end; - gap: 0.55rem; +.artifact-disclosure-title { + color: var(--on-chassis); + font-size: 15px; + line-height: 1; + text-transform: uppercase; } -.artifact-action { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.45rem; - min-height: 2.7rem; - padding: 0.58rem 0.82rem; - border: 1px solid var(--border); - border-radius: var(--radius-sm); - background: color-mix(in srgb, var(--surface-elevated) 88%, transparent); - color: var(--text-primary); +.artifact-disclosure-summary::after { + color: var(--on-chassis-muted); + content: "+"; font-family: var(--font-mono), monospace; - font-size: 0.74rem; - font-weight: 500; - letter-spacing: 0.01em; - transition: - border-color 150ms ease, - background-color 150ms ease; + font-size: 16px; + line-height: 1; } -.artifact-action:hover { - border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); - background: color-mix(in srgb, var(--accent) 5%, var(--surface-elevated)); +.artifact-disclosure[open] .artifact-disclosure-summary::after { + content: "−"; } -.artifact-action:focus-visible { - outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent); - outline-offset: 2px; +.artifact-disclosure-body { + display: grid; + gap: 8px; + padding: 8px; + border-top: 1px solid var(--line-dark); + background: var(--chassis-deep); } -.artifact-action.is-deprecated { - color: var(--text-muted); +.artifact-disclosure-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin: 0; + border-top: 1px solid var(--line-dark); + border-left: 1px solid var(--line-dark); +} + +.artifact-disclosure-grid > div { + min-width: 0; + padding: 7px 8px; + border-right: 1px solid var(--line-dark); + border-bottom: 1px solid var(--line-dark); } -.artifact-action.is-primary { - border-color: transparent; - background: linear-gradient(135deg, var(--accent), var(--accent-strong)); - color: #ffffff; +.artifact-disclosure-grid dd { + margin: 4px 0 0; + color: var(--on-chassis); + font-family: var(--font-mono), monospace; + font-size: 10px; + line-height: 1.3; + overflow-wrap: anywhere; } -.dark .artifact-action.is-primary { - background: var(--accent); - color: #1a0e08; +.artifact-hash-preview { + min-width: 0; + padding: 8px; + border: 1px solid var(--line-dark); + background: var(--surface-code); + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.42); } -.artifact-action.is-primary:hover { - box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 20%, transparent); +.artifact-hash-preview .metric-label { + color: var(--amber); } -.artifact-action.is-code { - border-color: var(--surface-code-is-code-border); - background: var(--surface-code-is-code-bg); - color: var(--surface-code-is-code-fg); +.artifact-hash-preview-code { + max-height: 140px; + overflow: auto; + margin: 6px 0 0; + color: var(--amber); + font-family: var(--font-mono), monospace; + font-size: 10px; + line-height: 1.45; + white-space: pre-wrap; + word-break: break-all; +} + +.mono-pill { + display: inline-flex; + min-height: 24px; + align-items: center; + gap: 5px; + padding: 4px 6px; + border: 1px solid var(--line-dark); + border-radius: 2px; + background: transparent; + color: var(--on-chassis-muted); + font-family: var(--font-mono), monospace; + font-size: 9px; + font-weight: 650; + letter-spacing: 0.055em; + line-height: 1; + text-transform: uppercase; } .markdown-document { @@ -1012,13 +1524,15 @@ select { } .markdown-article { - color: var(--text-primary); - font-size: 1rem; - line-height: 1.78; + max-width: 76ch; + margin: 0 auto; + color: var(--paper-ink); + font-size: 15px; + line-height: 1.7; } .markdown-article > * + * { - margin-top: 1.1em; + margin-top: 1em; } .markdown-article h1, @@ -1027,53 +1541,57 @@ select { .markdown-article h4, .markdown-article h5, .markdown-article h6 { - margin-top: 1.5em; - color: var(--text-primary); - font-family: var(--font-display), serif; - font-weight: 600; - line-height: 1.08; - letter-spacing: -0.04em; + margin-bottom: 0; + color: var(--paper-ink); + font-family: var(--font-display), sans-serif; + font-weight: 760; + letter-spacing: -0.025em; + line-height: 1.12; } .markdown-article h1 { - font-size: clamp(2rem, 4vw, 3.3rem); + margin-top: 0; + font-size: clamp(27px, 4vw, 42px); } .markdown-article h2 { - font-size: clamp(1.55rem, 3vw, 2.4rem); + margin-top: 1.55em; + font-size: clamp(22px, 3vw, 31px); } .markdown-article h3 { - font-size: clamp(1.25rem, 2.1vw, 1.75rem); + margin-top: 1.4em; + font-size: clamp(18px, 2vw, 24px); } .markdown-article h4, .markdown-article h5, .markdown-article h6 { - font-size: 1.05rem; + margin-top: 1.35em; + font-size: 16px; } .markdown-article p, .markdown-article ul, .markdown-article ol { - color: var(--text-muted); + color: var(--paper-body); } .markdown-article strong { - color: var(--text-primary); + color: var(--paper-ink); } .markdown-link { - color: var(--accent); + color: var(--paper-ink); + font-weight: 650; text-decoration: underline; - text-decoration-color: color-mix(in srgb, var(--accent) 36%, transparent); - text-decoration-thickness: 1.5px; - text-underline-offset: 0.18em; - transition: text-decoration-color var(--duration-base) ease; + text-decoration-color: var(--paper-link-line); + text-decoration-thickness: 1px; + text-underline-offset: 3px; } .markdown-link:hover { - text-decoration-color: var(--accent); + text-decoration-thickness: 2px; } .markdown-article ul, @@ -1082,75 +1600,78 @@ select { } .markdown-article li + li { - margin-top: 0.35rem; + margin-top: 0.3rem; } .markdown-article li::marker { - color: var(--accent); + color: var(--paper-muted); } .markdown-article input[type="checkbox"] { - accent-color: var(--accent-secondary); + accent-color: var(--confirmation); } .markdown-article li input[type="checkbox"] { - margin-right: 0.55rem; + margin-right: 0.5rem; } .markdown-article blockquote { margin-inline: 0; - padding: 1.2rem 1.4rem; - border-left: 3px solid var(--accent-secondary); - border-radius: 0; - background: color-mix(in srgb, var(--surface-elevated) 60%, transparent); - color: var(--text-primary); - font-family: var(--font-display), serif; - font-style: italic; + padding: 10px 12px; + border: 1px solid var(--paper-line); + background: var(--paper-panel); + color: var(--paper-ink); } .markdown-article blockquote > * { - color: var(--text-primary); + color: var(--paper-ink); } .markdown-inline-code { - padding: 0.18rem 0.45rem; - border: 1px solid var(--border); - border-radius: var(--radius-md); - background: color-mix(in srgb, var(--surface-muted) 82%, transparent); - color: var(--text-primary); + padding: 1px 4px; + border: 1px solid var(--surface-code-chrome-border); + border-radius: 2px; + background: var(--surface-code); + color: var(--surface-code-text); font-family: var(--font-mono), monospace; - font-size: 0.88em; + font-size: 0.86em; } -.markdown-code-frame { +.markdown-code-frame, +.markdown-mermaid-frame { + position: relative; overflow: hidden; - border: 1px solid color-mix(in srgb, var(--border-strong) 88%, transparent); - border-radius: var(--radius-lg); - background: linear-gradient(180deg, color-mix(in srgb, var(--surface-code-raised) 84%, transparent), color-mix(in srgb, var(--surface-code) 100%, transparent)); - box-shadow: var(--shadow-md); + border: 1px solid var(--line-dark); + border-radius: 2px; + background: var(--surface-code); } -.dark .markdown-code-frame { - border-color: rgba(100, 80, 120, 0.18); +.markdown-code-head { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + clip-path: inset(50%); + white-space: nowrap; } -.markdown-mermaid-frame { - overflow: hidden; - border: 1px solid color-mix(in srgb, var(--border-strong) 88%, transparent); - border-radius: var(--radius-lg); - background: var(--surface-primary); - box-shadow: var(--shadow-md); +.markdown-code-pre { + margin: 0; + padding: 0; } -.dark .markdown-mermaid-frame { - border-color: rgba(100, 80, 120, 0.18); +.markdown-mermaid-frame { + padding: 10px; + background: var(--paper); } .mermaid-container { display: flex; + min-height: 120px; + align-items: center; justify-content: center; - padding: 1.5rem 1rem; - overflow-x: auto; + overflow: auto; } .mermaid-container svg { @@ -1159,243 +1680,336 @@ select { } .mermaid-error { - padding: 1rem; + display: grid; + gap: 8px; + padding: 9px; + border: 1px solid var(--alert); + background: var(--surface-code); } .mermaid-error-message { - margin: 0 0 0.75rem; - color: var(--text-danger, #e53e3e); - font-size: 0.85rem; - font-weight: 500; + margin: 0; + color: #d28a7d; + font-size: 12px; } .mermaid-error-source { margin: 0; - padding: 0.75rem; - overflow-x: auto; - border-radius: var(--radius-md); - background: var(--surface-code); color: var(--surface-code-text); - font-size: 0.82rem; + font-family: var(--font-mono), monospace; + font-size: 11px; white-space: pre-wrap; } -.markdown-code-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.75rem; - padding: 0.8rem 1rem; - border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent); - background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 58%); +.markdown-table-wrap { + margin: 1.25rem 0; + overflow-x: auto; + border: 1px solid var(--paper-line); +} + +.markdown-table { + width: 100%; + min-width: 32rem; + border-collapse: collapse; } -.dark .markdown-code-head { - background: linear-gradient(90deg, rgba(224, 140, 80, 0.05), transparent 58%); +.markdown-table th, +.markdown-table td { + padding: 8px 10px; + border-right: 1px solid var(--paper-line-strong); + border-bottom: 1px solid var(--paper-line-strong); + color: var(--paper-cell-ink); + text-align: left; } -.markdown-code-chip, -.markdown-code-caption { +.markdown-table th { + background: var(--paper-table-head); + color: var(--paper-ink); font-family: var(--font-mono), monospace; - font-size: 0.72rem; - font-weight: 600; - letter-spacing: 0.08em; + font-size: 10px; + letter-spacing: 0.05em; text-transform: uppercase; } -.markdown-code-chip { - color: color-mix(in srgb, var(--surface-code-text) 92%, white 8%); +.markdown-table tr:last-child td { + border-bottom: 0; } -.markdown-code-caption { - color: color-mix(in srgb, var(--surface-code-text) 58%, transparent); +.markdown-table th:last-child, +.markdown-table td:last-child { + border-right: 0; } -.markdown-code-pre { - margin: 0; - overflow-x: auto; - padding: 1rem 1.05rem 1.15rem; - background: var(--surface-code); +.markdown-article hr { + height: 1px; + margin: 1.6rem 0; + border: 0; + background: var(--paper-line); } -.artifact-preview .markdown-code-pre { - white-space: pre; - word-break: normal; - color: inherit; - font-size: inherit; - line-height: inherit; +.markdown-article img { + max-width: 100%; + height: auto; + border: 1px solid var(--paper-line); } .code-renderer-shell { - border-radius: var(--radius-lg); overflow: hidden; + border: 1px solid var(--surface-code-chrome-border); + border-radius: 2px; background: var(--surface-code); - box-shadow: inset 0 0 0 1px var(--surface-code-chrome-border); - transition: - background-color var(--duration-base) ease, - box-shadow var(--duration-base) ease; } .code-renderer-toolbar { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - gap: 0.75rem; - padding: 0.9rem 1rem; + justify-content: flex-end; + min-height: 44px; + padding: 5px 7px; border-bottom: 1px solid var(--surface-code-chrome-border); - background: - linear-gradient(180deg, var(--surface-code-toolbar-shine), transparent), - var(--surface-code-raised); - transition: - background var(--duration-base) ease, - border-color var(--duration-base) ease; -} - -.code-renderer-meta { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.6rem; -} - -.code-renderer-language-pill { - border-color: var(--surface-code-chrome-border) !important; - background: color-mix(in srgb, var(--surface-code-text) 6%, transparent) !important; - color: var(--surface-code-text) !important; -} - -.code-renderer-readonly-label { - color: color-mix(in srgb, var(--surface-code-text) 56%, transparent) !important; + background: var(--surface-code-raised); } .code-renderer-host { min-height: 0; } -.code-renderer-shell:not(.is-compact) .cm-scroller { - max-height: min(72vh, 56rem); +/* Pierre renders into a `diffs-container` custom element that is the scroll root for its + own virtualization, so it needs the overflow contract rather than an inner scroller. */ +.code-renderer-pierre { + display: block; + overflow: auto; +} + +.code-renderer-shell:not(.is-compact) .code-renderer-pierre { + max-height: min(72vh, 54rem); } -.code-renderer-shell.is-compact .cm-scroller { - max-height: min(24rem, 52vh); +.code-renderer-shell.is-compact .code-renderer-pierre { + max-height: 34rem; } .diff-renderer-shell, .csv-renderer-shell, .json-renderer-shell { - display: flex; - flex-direction: column; - gap: 1rem; + display: grid; + gap: 8px; + min-width: 0; + color: var(--surface-code-text); } .diff-renderer-toolbar, .csv-renderer-toolbar, .json-renderer-toolbar { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - gap: 0.75rem; + min-height: 38px; + justify-content: flex-end; + padding: 5px 0; } -.diff-view-toggle { - display: flex; - flex-wrap: wrap; - gap: 0.6rem; +.diff-renderer-frame, +.csv-table-wrap, +.json-tree-shell { + border: 1px solid var(--surface-code-chrome-border); + border-radius: 2px; + background: var(--surface-code); } -.diff-mobile-note { - min-height: 2.1rem; +.diff-renderer-frame { + min-width: 0; + overflow: auto; } -.diff-renderer-frame { - overflow: hidden; - border: 1px solid var(--border); - border-radius: var(--radius-lg); - background: color-mix(in srgb, var(--surface-strong) 94%, transparent); +/* Shared Pierre surface contract: every `diffs-container` host (diff viewer, artifact + body editor, standalone code renderer) inherits these through the shadow boundary. */ +.diff-renderer-frame, +.artifact-body-editor-frame, +.code-renderer-shell { + color: var(--surface-code-text); + --diffs-font-family: var(--font-mono), monospace; + --diffs-header-font-family: var(--font-mono), monospace; + --diffs-font-size: 0.74rem; + --diffs-bg: var(--surface-code); + --diffs-fg: var(--surface-code-text); + --diffs-foreground: var(--surface-code-text); + --diffs-background: var(--surface-code); + --diffs-token-keyword: var(--rb-0); + --diffs-token-function: var(--rb-4); + --diffs-token-string: var(--rb-3); + --diffs-token-string-expression: var(--rb-3); + --diffs-token-constant: var(--rb-1); + --diffs-token-parameter: var(--rb-2); + --diffs-token-link: var(--rb-2); + --diffs-token-comment: #8d826d; + --diffs-token-punctuation: #7d7461; + --diffs-token-inserted: #2e7d52; + --diffs-token-deleted: #b0412f; + --diffs-token-changed: var(--rb-1); + --diffs-bg-context-override: var(--surface-code-raised); + --diffs-bg-separator-override: var(--chassis-deep); + --diffs-bg-hover-override: var(--surface-code-raised); + --diffs-fg-number-override: #a89b82; + --diffs-addition-color-override: #2e7d52; + --diffs-deletion-color-override: #b0412f; + --diffs-bg-addition-override: #dce9d4; + --diffs-bg-addition-number-override: #cfe0c5; + --diffs-bg-addition-emphasis-override: #bdd3ae; + --diffs-bg-deletion-override: #eed7ce; + --diffs-bg-deletion-number-override: #e8ccbf; + --diffs-bg-deletion-emphasis-override: #e3bda9; +} + +.dark .diff-renderer-frame, +.dark .artifact-body-editor-frame, +.dark .code-renderer-shell { + --diffs-token-comment: #8b8271; + --diffs-token-punctuation: #b0a794; + --diffs-token-inserted: #9ccfae; + --diffs-token-deleted: #d96a5c; + --diffs-fg-number-override: #8b8271; + --diffs-addition-color-override: #9ccfae; + --diffs-deletion-color-override: #d96a5c; + --diffs-bg-addition-override: #1e2f24; + --diffs-bg-addition-number-override: #22352b; + --diffs-bg-addition-emphasis-override: #2c4a38; + --diffs-bg-deletion-override: #3a201b; + --diffs-bg-deletion-number-override: #41231e; + --diffs-bg-deletion-emphasis-override: #57271f; } .patch-bundle-shell { display: grid; - grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); + grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); + min-width: 0; } -.patch-bundle-nav { - display: flex; - flex-direction: column; - gap: 0.65rem; - padding: 1rem; - border-right: 1px solid var(--border); - background: color-mix(in srgb, var(--surface) 96%, transparent); +.patch-bundle-shell.is-single-file { + grid-template-columns: minmax(0, 1fr); } -.patch-bundle-link { +.artifact-editor-frame { display: grid; - gap: 0.45rem; - border: 1px solid var(--border); - border-radius: var(--radius-md); - padding: 0.85rem 0.9rem; - background: color-mix(in srgb, var(--surface-strong) 90%, transparent); - text-align: left; - } + grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); + min-width: 0; + border: 1px solid var(--line-dark); + border-radius: 2px; + background: var(--chassis-deep); + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.035); +} + +.artifact-editor-frame .patch-file-tree-nav { + align-self: start; +} + +.artifact-editor-frame.is-single { + grid-template-columns: minmax(0, 1fr); +} + +.artifact-editor-frame .creator-form-grid { + padding: 10px; +} + +.artifact-body-editor-frame { + min-width: 0; + height: 340px; + border: 1px solid var(--line-dark); + border-radius: 2px; + overflow: hidden; + background: var(--chassis-deep); + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.035); +} + +.artifact-body-editor-frame:focus-within { + border-color: var(--bone-edge); +} + +.artifact-body-editor { + display: block; + height: 100%; + overflow-y: auto; +} + +.patch-file-tree-nav { + min-width: 0; + padding: 6px; + border-right: 1px solid var(--line-dark); + background: var(--chassis-deep); +} -.patch-bundle-link.is-active { - border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); - background: color-mix(in srgb, var(--accent) 6%, var(--surface-strong)); +.patch-file-tree { + display: block; + width: 100%; + background: var(--chassis-deep); + --trees-accent: var(--control-accent); + --trees-bg-override: var(--chassis-deep); + --trees-bg-muted-override: var(--chassis-raised); + --trees-border-color-override: var(--line-dark); + --trees-border-radius-override: 2px; + --trees-fg-override: var(--surface-code-text); + --trees-fg-muted-override: var(--surface-code-gutter-fg); + --trees-focus-ring-color-override: var(--control-accent); + --trees-font-family-override: var(--font-mono), monospace; + --trees-font-size-override: 11px; + --trees-indent-guide-bg-override: var(--line-dark); + --trees-input-bg-override: var(--surface-code); + --trees-scrollbar-thumb-override: var(--line-strong); + --trees-search-bg-override: var(--surface-code); + --trees-search-fg-override: var(--surface-code-text); + --trees-selected-bg-override: var(--chassis-raised); + --trees-selected-fg-override: var(--surface-code-text); + --trees-selected-focused-border-color-override: var(--control-accent); } .patch-bundle-files { display: flex; + min-width: 0; flex-direction: column; } +.patch-file-section { + min-width: 0; + background: var(--surface-code); +} + .patch-file-section + .patch-file-section { - border-top: 1px solid var(--border); + border-top: 1px solid var(--line-dark); } .patch-file-header { display: flex; - flex-wrap: wrap; align-items: center; justify-content: space-between; - gap: 0.75rem; - padding: 1rem 1rem 0.8rem; + gap: 8px; + padding: 8px 9px; + border-bottom: 1px solid var(--line-dark); + background: var(--surface-code-raised); } .patch-file-header h4 { - margin: 0.25rem 0 0; - font-size: 1rem; - font-weight: 600; -} - -.diff-renderer-frame [data-theme="light"] { - --diff-bgColor-default: color-mix(in srgb, var(--surface-strong) 96%, white 4%); -} - -.diff-renderer-frame [data-theme="dark"] { - --diff-bgColor-default: #0f1721; + overflow: hidden; + margin: 0; + color: var(--surface-code-text); + font-family: var(--font-display), sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 1.25; + text-overflow: ellipsis; + white-space: nowrap; } .csv-table-wrap { - overflow: auto; - border: 1px solid var(--border); - border-radius: var(--radius-lg); - background: color-mix(in srgb, var(--surface-strong) 92%, transparent); max-height: min(68vh, 42rem); + overflow: auto; } .csv-table { width: 100%; min-width: 36rem; - border-collapse: separate; - border-spacing: 0; + border-collapse: collapse; } .csv-table th, .csv-table td { - padding: 0.85rem 1rem; - border-bottom: 1px solid var(--border); + padding: 8px 10px; + border-right: 1px solid var(--line-dark); + border-bottom: 1px solid var(--line-dark); text-align: left; vertical-align: top; } @@ -1404,69 +2018,58 @@ select { position: sticky; top: 0; z-index: 1; - background: color-mix(in srgb, var(--surface) 96%, white 4%); - color: var(--text-soft); + background: var(--surface-code-raised); + color: var(--surface-code-text); font-family: var(--font-mono), monospace; - font-size: 0.72rem; - font-weight: 600; - letter-spacing: 0.08em; + font-size: 10px; + font-weight: 650; + letter-spacing: 0.055em; text-transform: uppercase; } .csv-table td { - color: var(--text-muted); + color: var(--surface-code-text); + font-size: 12px; white-space: nowrap; } .csv-table tr:last-child td { - border-bottom: none; + border-bottom: 0; } .artifact-empty-state { - border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--border)); - border-radius: var(--radius-lg); - background: color-mix(in srgb, var(--danger) 8%, var(--surface-strong)); - padding: 1rem 1.1rem; - color: var(--text-primary); + padding: 9px 10px; + border: 1px solid var(--alert); + background: #291b18; + color: #dfc9c3; + font-size: 12px; + line-height: 1.45; } .json-tree-shell { - overflow: hidden; - border: 1px solid var(--border); - border-radius: var(--radius-lg); - background: color-mix(in srgb, var(--surface-strong) 94%, transparent); - padding: 0.75rem 0; + max-height: min(68vh, 42rem); + overflow: auto; + padding: 6px 0; } -.artifact-raw-source, .json-raw-source { max-height: min(68vh, 42rem); overflow: auto; - margin: 0; - border: 1px solid var(--surface-code-chrome-border); - border-radius: var(--radius-lg); - background: var(--surface-code); - color: var(--surface-code-text); - padding: 1rem 1.05rem 1.15rem; - font-family: var(--font-mono), monospace; - font-size: 0.82rem; - line-height: 1.65; - white-space: pre; } .json-node { - border-left: 1px solid color-mix(in srgb, var(--border) 82%, transparent); - margin-left: 0.8rem; + margin-left: 8px; + border-left: 1px solid var(--line-dark); } .json-summary, .json-leaf-row { display: flex; + min-height: 27px; align-items: center; - gap: 0.65rem; - min-height: 2rem; - padding-right: 1rem; - color: var(--text-primary); + gap: 6px; + padding-right: 9px; + color: var(--surface-code-text); } .json-summary { @@ -1486,432 +2089,359 @@ select { transform: rotate(90deg); } -.json-key { +.json-key, +.json-value { font-family: var(--font-mono), monospace; - color: var(--text-soft); + font-size: 11px; +} + +.json-key { + color: var(--json-key); } .json-key::after { + margin-left: 2px; content: ":"; - margin-left: 0.2rem; } .json-structure { - color: var(--text-muted); -} - -.json-value { - font-family: var(--font-mono), monospace; + color: var(--json-structure); + font-size: 11px; } .json-string { - color: #7fd7a4; + color: var(--json-string); } .json-number { - color: #f29c8f; + color: var(--json-number); } .json-boolean { - color: #69d1dd; + color: var(--json-boolean); } -.json-null { - color: #9eb3ff; +.json-null, +.json-truncated { + color: var(--json-null); } .json-children { - padding-bottom: 0.25rem; -} - -.markdown-table-wrap { - margin: 1.5rem 0; - overflow-x: auto; - border: 1px solid var(--border); - border-radius: var(--radius-lg); - background: color-mix(in srgb, var(--surface-strong) 92%, transparent); + padding-bottom: 2px; } -.markdown-table { +.support-page { + display: grid; width: 100%; - min-width: 32rem; - border-collapse: collapse; -} - -.markdown-table th, -.markdown-table td { - padding: 0.85rem 1rem; - border-bottom: 1px solid var(--border); - text-align: left; + max-width: 1120px; + gap: 12px; + margin: 0 auto; + padding: 12px; } -.markdown-table th { - color: var(--text-soft); - font-family: var(--font-mono), monospace; - font-size: 0.72rem; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - background: color-mix(in srgb, var(--surface-muted) 86%, transparent); +.support-back { + width: fit-content; } -.markdown-table td { - color: var(--text-muted); +.support-heading, +.support-contact, +.support-copy { + padding: clamp(14px, 2.5vw, 24px); + border: 1px solid var(--line-dark); + background: var(--chassis); + color: var(--on-chassis); } -.markdown-table tr:last-child td { - border-bottom: none; +.support-heading h1, +.support-contact h2, +.support-copy h2, +.support-grid h2 { + margin: 0; + font-family: var(--font-display), sans-serif; + font-weight: 760; + letter-spacing: -0.025em; } -.markdown-article hr { - height: 1px; - border: 0; - background: var(--border); - margin: 2rem 0; +.support-heading h1 { + max-width: 22ch; + font-size: clamp(30px, 5vw, 56px); + line-height: 1; } -.markdown-article img { - max-width: 100%; - height: auto; - border-radius: var(--radius-lg); +.support-heading p, +.support-contact p, +.support-copy p { + max-width: 74ch; + margin: 10px 0 0; + color: var(--on-chassis-muted); + font-size: 14px; + line-height: 1.65; } -.artifact-list-item { - border: 1px solid var(--border); - border-radius: var(--radius-lg); - background: color-mix(in srgb, var(--surface-strong) 85%, transparent); - padding: 1rem; +.support-contact .artifact-action { + margin-top: 10px; } -.artifact-list-item.is-active { - border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); - background: color-mix(in srgb, var(--accent) 6%, var(--surface-strong)); +.support-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1px; + padding: 1px; + background: var(--line-dark); } - - -.artifact-meta-value { - margin-top: 0.45rem; - font-size: 0.98rem; - font-weight: 600; - line-height: 1.45; - word-break: break-word; +.support-grid article { + min-width: 0; + padding: 14px; + background: var(--chassis); + color: var(--on-chassis); } -.artifact-disclosure { - margin-top: 0.75rem; - overflow: hidden; - border: 1px solid var(--border); - border-radius: var(--radius-xl); - background: color-mix(in srgb, var(--surface) 94%, transparent); +.support-grid h2, +.support-contact h2, +.support-copy h2 { + font-size: 18px; + line-height: 1.15; } -.artifact-disclosure-summary { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - padding: 0.9rem 1rem; - cursor: pointer; - list-style: none; +.support-grid ul { + display: grid; + gap: 8px; + margin: 10px 0 0; + padding-left: 18px; + color: var(--on-chassis-muted); + font-size: 13px; + line-height: 1.55; } -.artifact-disclosure-summary-copy { +.support-copy > div { display: grid; - gap: 0.24rem; - min-width: 0; + gap: 0; } -.artifact-disclosure-title { - line-height: 1.45; +.url-anatomy-panel { + display: grid; + border: 1px solid var(--line-dark); + border-radius: 2px; + background: var(--chassis); + color: var(--on-chassis); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); } -.artifact-disclosure-summary::-webkit-details-marker { - display: none; +.url-anatomy-panel .instrument-heading { + align-items: center; + border-bottom: 1px solid var(--line-dark); } -.artifact-disclosure-summary:focus-visible { - outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); - outline-offset: -2px; +.url-anatomy-panel .instrument-heading h2 { + font-size: 20px; } -.artifact-disclosure-summary::after { - content: "+"; - color: var(--text-soft); - font-size: 1.15rem; - line-height: 1; - transition: transform var(--duration-base) ease; +.url-fragment-readout { + display: grid; + grid-template-columns: 80px minmax(0, 1fr); + gap: 8px; + align-items: start; + margin: 8px; + padding: 8px; + overflow: auto; + border: 1px solid var(--line-dark); + background: var(--surface-code); + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.42); + color: var(--amber); + font-family: var(--font-mono), monospace; + font-size: 10px; + line-height: 1.45; } -.artifact-disclosure[open] .artifact-disclosure-summary::after { - transform: rotate(45deg); +.url-fragment-readout code { + overflow-wrap: anywhere; } -.artifact-disclosure-body { +.url-anatomy-table { display: grid; - gap: 0.9rem; - padding: 0 1rem 1rem; - border-top: 1px solid var(--border); + grid-template-columns: repeat(2, minmax(0, 1fr)); + margin: 0 8px; + border-top: 1px solid var(--line-dark); + border-left: 1px solid var(--line-dark); } -.artifact-disclosure-grid { +.url-anatomy-table > div { display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: 0.75rem; -} - -.artifact-hash-preview { - border: 1px solid var(--border); - border-radius: var(--radius-lg); - background: color-mix(in srgb, var(--surface-muted) 94%, transparent); - padding: 0.95rem 1rem; + grid-template-columns: 76px minmax(0, 1fr); + gap: 8px; + min-width: 0; + padding: 9px; + border-right: 1px solid var(--line-dark); + border-bottom: 1px solid var(--line-dark); } -.artifact-hash-preview-code { - margin-bottom: 0; +.url-anatomy-table dt { + color: var(--on-chassis-muted); + font-family: var(--font-mono), monospace; + font-size: 9px; + font-weight: 650; + letter-spacing: 0.08em; } -.fade-up { - opacity: 0; - transform: translateY(24px); - animation: fade-up 720ms cubic-bezier(0.2, 1, 0.22, 1) forwards; +.url-anatomy-table dd { + margin: 0; + color: var(--on-chassis); + font-size: 12px; + line-height: 1.45; } -@keyframes fade-up { - to { - opacity: 1; - transform: translateY(0); - } +.url-anatomy-panel > .qrh-callout { + margin: 8px; } -@media (max-width: 640px) { - .app-shell > div { - gap: 1.5rem; - } - - .panel, - .viewer-frame, - .artifact-disclosure { - border-radius: var(--radius-md); - box-shadow: 0 12px 28px rgba(28, 28, 24, 0.06); - } - - .mono-pill { - gap: 0.3rem; - padding: 0.34rem 0.62rem; - font-size: 0.69rem; - } - - .metric-card, - .artifact-hash-preview, - .artifact-empty-state { - padding: 0.72rem 0.8rem; - } - - .metric-grid, - .artifact-disclosure-grid, - .sample-link-grid, - .artifact-first-layout { - gap: 0.6rem; - } - - .section-kicker, - .metric-label { - font-size: 0.66rem; - letter-spacing: 0.1em; - } - - .hero-link-title { - font-size: 0.95rem; +@media (min-width: 700px) { + .artifact-metadata-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); } - .hero-link-card, - .sample-link { - gap: 0.65rem; - padding: 0.78rem 0.82rem; + .artifact-limit-cell, + .artifact-limit-cell:nth-child(2n) { + border-right: 1px solid var(--line-dark); } - .home-generator-grid, - .creator-form-grid, - .creator-result-metrics, - .creator-result-actions { - gap: 0.65rem; + .artifact-limit-cell:nth-child(4n) { + border-right: 0; } +} - .creator-kind-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - margin-top: 0.85rem; +@media (min-width: 880px) { + .empty-state-layout { + grid-template-columns: repeat(12, minmax(0, 1fr)); } - .creator-kind-card, - .creator-result-card { - padding: 0.8rem; + .fault-placard { + grid-column: 1 / -1; } - .creator-kind-label { - font-size: 0.88rem; + .home-workbench { + display: contents; } - .creator-field-hint, - .creator-inline-status, - .creator-error-state { - font-size: 0.82rem; - line-height: 1.45; + .home-generator-section { + grid-column: 1 / -1; } - .creator-input, - .creator-textarea { - padding: 0.78rem 0.82rem; + .home-samples-section { + position: sticky; + top: 66px; + grid-column: 1 / span 3; } - .creator-textarea { - min-height: 14rem; + .home-operating-limits { + align-self: start; + grid-column: 4 / -1; } +} - .creator-link-output { - min-height: 8.5rem; - font-size: 0.72rem; - line-height: 1.5; +@media (min-width: 1120px) { + .operation-step { + grid-template-columns: 124px minmax(0, 1fr); } - .creator-form-footer { - align-items: stretch; + .operation-step-head { + padding: 11px 12px; } +} - .creator-form-footer > .artifact-action { - width: 100%; +@media (max-width: 760px) { + .shell-body { + padding: 8px; } - .hero-link-body, - .artifact-disclosure-status, - .sample-link p { - line-height: 1.48; + .url-anatomy-table { + grid-template-columns: minmax(0, 1fr); } - .artifact-first-layout { - gap: 0.72rem; + .operations-heading, + .instrument-heading, + .footer-chassis, + .artifact-toolbar-bar { + align-items: flex-start; } - .artifact-preview { - min-height: 0; - padding: 0.72rem; + .operations-heading, + .instrument-heading, + .artifact-toolbar-bar, + .footer-chassis { + flex-wrap: wrap; } - .artifact-selector-row { - gap: 0.5rem; - margin-top: 0.65rem; - padding-top: 0.65rem; - padding-bottom: 0.1rem; - scroll-padding-inline: 0.7rem; + .operation-step { + grid-template-columns: 82px minmax(0, 1fr); } - .artifact-switcher { - gap: 0.58rem; - flex-basis: min(12.75rem, calc(100vw - 2.2rem)); - min-height: 3.75rem; - padding: 0.68rem 0.74rem; + .operation-step-head { + flex-direction: column; + gap: 5px; } - .artifact-switcher-icon { - width: 1.9rem; - height: 1.9rem; + .creator-kind-grid { + grid-template-columns: repeat(3, minmax(64px, 1fr)); } - .artifact-switcher-title { - display: -webkit-box; - overflow: hidden; - line-height: 1.3; - white-space: normal; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + .limits-table, + .creator-result-metrics { + grid-template-columns: repeat(2, minmax(0, 1fr)); } - .artifact-switcher-meta { - gap: 0.18rem 0.4rem; - line-height: 1.3; - font-size: 0.68rem; + .limits-table > div:nth-child(2n) { + border-right: 0; } - .artifact-switcher-meta .truncate { - overflow: visible; - text-overflow: clip; - white-space: normal; - word-break: break-word; + .limits-table > div:nth-child(-n + 2) { + border-bottom: 1px solid var(--line-dark); } - .code-renderer-toolbar { - align-items: flex-start; - padding: 0.68rem 0.74rem; + .limits-callouts, + .carbon-fields { + grid-template-columns: 1fr; } - .diff-renderer-shell, - .csv-renderer-shell, - .json-renderer-shell { - gap: 0.75rem; + .creator-result-actions { + grid-template-columns: repeat(2, minmax(0, 1fr)); } - .diff-renderer-toolbar, - .csv-renderer-toolbar, - .json-renderer-toolbar { - gap: 0.6rem; + .footer-links { + justify-content: flex-start; } - .diff-view-toggle { + .artifact-toolbar-left, + .viewer-toolbar { width: 100%; - align-items: flex-start; - gap: 0.45rem; } - .diff-mobile-note { + .viewer-toolbar { justify-content: flex-start; - min-height: 0; - } - - .diff-renderer-shell[data-mobile-layout="true"] .diff-view-toggle .artifact-action { - flex: 0 1 auto; - width: auto; - min-width: min(11rem, 100%); - } - - .patch-bundle-nav { - gap: 0.45rem; - padding: 0.65rem 0.7rem; - flex-direction: row; - overflow-x: auto; - scroll-padding-inline: 0.7rem; - scroll-snap-type: x proximity; - } - - .patch-bundle-link { - gap: 0.35rem; - flex: 0 0 min(14rem, calc(100vw - 3rem)); - padding: 0.68rem 0.72rem; - scroll-snap-align: start; } - .patch-bundle-link .mono-pill { - padding: 0.28rem 0.52rem; - font-size: 0.66rem; + .viewer-toolbar .diff-view-toggle { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + width: 100%; } - .patch-bundle-link .truncate { - white-space: normal; - word-break: break-word; + .viewer-toolbar .diff-view-toggle .artifact-action { + width: 100%; } - .patch-file-header { - gap: 0.55rem; - padding: 0.72rem 0.8rem 0.62rem; + .artifact-title-row { + align-items: flex-start; } - .patch-file-header h4 { - font-size: 0.92rem; - line-height: 1.3; + .patch-bundle-shell, + .artifact-editor-frame { + grid-template-columns: minmax(0, 1fr); } - .patch-file-header .mono-pill { - max-width: 100%; - overflow-wrap: anywhere; + .patch-file-tree-nav { + border-right: 0; + border-bottom: 1px solid var(--line-dark); } .diff-renderer-shell[data-mobile-layout="true"] .diff-renderer-frame { @@ -1922,223 +2452,178 @@ select { overflow-x: auto; } - .diff-renderer-shell[data-mobile-layout="true"] .diff-tailwindcss-wrapper { - font-size: 0.76rem; - line-height: 1.45; + .diff-renderer-shell[data-mobile-layout="true"] .diff-renderer-frame { + --diffs-font-size: 0.68rem; } - .diff-renderer-shell[data-mobile-layout="true"][data-diff-mode="unified"] .diff-tailwindcss-wrapper table { - width: 100%; - table-layout: fixed; + .code-renderer-toolbar, + .diff-renderer-toolbar, + .csv-renderer-toolbar, + .json-renderer-toolbar { + max-width: 100%; + overflow-x: auto; } - .diff-renderer-shell[data-mobile-layout="true"][data-diff-mode="split"] .diff-tailwindcss-wrapper table { - min-width: 42rem; + .support-grid { + grid-template-columns: minmax(0, 1fr); } +} - .diff-renderer-shell[data-mobile-layout="true"] .diff-tailwindcss-wrapper td { - vertical-align: top; +@media (max-width: 520px) { + .shell-header { + min-height: 50px; + padding: 7px 8px; } - .diff-renderer-shell[data-mobile-layout="true"] .diff-tailwindcss-wrapper .diff-line-old-num, - .diff-renderer-shell[data-mobile-layout="true"] .diff-tailwindcss-wrapper .diff-line-new-num, - .diff-renderer-shell[data-mobile-layout="true"] .diff-tailwindcss-wrapper .diff-line-num { - width: 2.35rem; - min-width: 2.35rem; - padding: 0.14rem 0.28rem; - color: var(--text-soft); - font-size: 0.7rem; + .shell-wordmark { + font-size: 15px; } - .diff-renderer-shell[data-mobile-layout="true"] .diff-tailwindcss-wrapper .diff-line-syntax-raw code.hljs { - padding: 0.14rem 0.28rem; + .nav-key { + display: none; } - .diff-renderer-shell[data-mobile-layout="true"][data-diff-mode="unified"] .diff-tailwindcss-wrapper .diff-line-syntax-raw pre code.hljs { - white-space: pre-wrap; - word-break: break-word; - overflow-x: visible; - overflow-wrap: anywhere; - padding: 0.18rem 0.24rem; - line-height: 1.45; + .theme-key { + min-width: 68px; } - .patch-bundle-shell { - grid-template-columns: 1fr; + .url-fragment-readout, + .url-anatomy-table > div { + grid-template-columns: minmax(0, 1fr); } - .patch-bundle-nav { - border-right: none; - border-bottom: 1px solid var(--border); + .operations-heading, + .instrument-heading { + padding: 10px; } - .viewer-toolbar { - width: 100%; - max-width: 100%; - min-width: 0; - justify-content: flex-start; - gap: 0.38rem; - flex-wrap: wrap; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: thin; + .operations-heading h2 { + font-size: 21px; } - /* Compact touch sizing for all action surfaces at ≤640px */ - .artifact-action { - min-height: 2.55rem; - padding: 0.46rem 0.65rem; - font-size: 0.71rem; + .operation-step { + grid-template-columns: 70px minmax(0, 1fr); } - /* Viewer shell: avoid flex-shrink clipping on standalone buttons; pair row only inside raw/rendered toggle */ - .viewer-toolbar .artifact-action { - flex: 0 0 auto; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - min-width: 0; - max-width: 100%; + .operation-step > :not(.operation-step-head), + .operation-step-head { + padding: 8px; } - .viewer-toolbar .diff-view-toggle { - display: flex; - flex: 1 1 100%; - flex-wrap: wrap; - gap: 0.38rem; - min-width: 0; + .creator-kind-grid { + grid-template-columns: repeat(2, minmax(64px, 1fr)); + gap: 6px; } - .viewer-toolbar .diff-view-toggle .artifact-action { - flex: 1 1 calc(50% - 0.25rem); - min-width: 0; - max-width: 100%; + .creator-identify-grid, + .artifact-editor .creator-form-grid { + grid-template-columns: minmax(0, 1fr); } - .viewer-toolbar > .artifact-action.is-primary { - flex: 1 1 100%; - max-width: 100%; + .artifact-editor .creator-form-footer { + align-items: stretch; + flex-direction: column; } - /* JSON tree/raw toggle: same pair-row behavior as markdown raw/rendered (not covered by viewer-toolbar rules) */ - .json-renderer-toolbar .diff-view-toggle { - display: flex; - flex-wrap: wrap; - gap: 0.38rem; - min-width: 0; + .creator-field-head { + align-items: flex-start; + flex-direction: column; + gap: 4px; } - .json-renderer-toolbar .diff-view-toggle .artifact-action { - flex: 1 1 calc(50% - 0.25rem); - min-width: 0; + .creator-field-hint { max-width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + white-space: normal; + text-align: left; } - .code-renderer-toolbar, - .diff-renderer-toolbar, - .csv-renderer-toolbar, - .json-renderer-toolbar { - max-width: 100%; - min-width: 0; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: thin; + .creator-textarea { + min-height: 180px; } - .viewer-frame-primary { - min-height: 0; + .operation-commit-row { + align-items: stretch; + flex-direction: column; } - .artifact-disclosure-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); + .operation-commit-row .artifact-action { + width: 100%; } - .artifact-meta-value, - .metric-value { - margin-top: 0.34rem; - font-size: 0.94rem; - line-height: 1.32; + .carbon-output { + margin: 8px; + padding-inline: 9px; } - .artifact-disclosure-summary { + .creator-result-head { align-items: flex-start; - gap: 0.75rem; - padding: 0.78rem 0.84rem; } - .artifact-disclosure-summary-copy { - gap: 0.18rem; + .carbon-stamp { + font-size: 9px; } - .artifact-disclosure-title { - line-height: 1.35; + .creator-result-actions { + grid-template-columns: minmax(0, 1fr); } - .artifact-disclosure-status { - font-size: 0.88rem; + .limits-callouts { + grid-template-columns: minmax(0, 1fr); } - .artifact-disclosure-body { - gap: 0.75rem; - padding: 0 0.84rem 0.84rem; + .footer-chassis { + flex-direction: column; } - .artifact-hash-preview-code { - font-size: 0.72rem; - line-height: 1.45; + .footer-spec-strip { + align-items: flex-start; + flex-direction: column; } - .markdown-article { - font-size: 0.96rem; + .artifact-toolbar-bar { + padding: 7px; } - .markdown-table { - min-width: 28rem; + .artifact-document-title { + font-size: 24px; } -} -@media (max-width: 360px) { - .creator-kind-grid, - .bento-grid-compact, .artifact-disclosure-grid { - grid-template-columns: 1fr; + grid-template-columns: repeat(3, minmax(0, 1fr)); } - .artifact-action { - flex-basis: 100%; + .markdown-article { + font-size: 14px; } +} - /* Same selector specificity as the 640px pair rule; this block wins at ≤360px because it appears later in the stylesheet */ - .viewer-toolbar .diff-view-toggle .artifact-action { - flex: 1 1 100%; - max-width: 100%; +@media (max-width: 360px) { + .viewer-toolbar .diff-view-toggle, + .json-renderer-toolbar .diff-view-toggle { + grid-template-columns: minmax(0, 1fr); } + .viewer-toolbar .diff-view-toggle .artifact-action, .json-renderer-toolbar .diff-view-toggle .artifact-action { - flex: 1 1 100%; - max-width: 100%; - } -} - -@media (min-width: 768px) { - .home-generator-grid { - grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr); - align-items: start; + width: 100%; } - .creator-form-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); + .artifact-disclosure-grid { + grid-template-columns: minmax(0, 1fr); } +} - .sample-link-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; } } - @media print { @page { margin: 18mm 16mm; @@ -2153,22 +2638,21 @@ select { display: none !important; } - body[data-print-mode="markdown"] .panel, body[data-print-mode="markdown"] .viewer-frame, body[data-print-mode="markdown"] .artifact-preview { - border: none !important; + overflow: visible !important; + border: 0 !important; background: transparent !important; box-shadow: none !important; - backdrop-filter: none !important; - overflow: visible !important; } body[data-print-mode="markdown"] .app-shell { padding: 0 !important; } - body[data-print-mode="markdown"] .app-shell > div { + body[data-print-mode="markdown"] .shell-body { max-width: none !important; + padding: 0 !important; } body[data-print-mode="markdown"] .print-markdown-target { @@ -2178,62 +2662,31 @@ select { body[data-print-mode="markdown"] .markdown-print-heading { display: block; - margin-bottom: 1.8rem; - padding-bottom: 1rem; + margin-bottom: 1.5rem; + padding-bottom: 0.8rem; border-bottom: 1px solid var(--print-border); } body[data-print-mode="markdown"] .markdown-print-heading h1 { - margin: 0.45rem 0 0; + margin: 0; color: var(--print-ink); - font-family: var(--font-display), serif; - font-size: 1.9rem; + font-family: var(--font-display), sans-serif; + font-size: 28px; line-height: 1.1; - letter-spacing: -0.04em; } - body[data-print-mode="markdown"] .markdown-print-heading p:last-child { - margin: 0.4rem 0 0; + body[data-print-mode="markdown"] .markdown-print-heading p { + margin: 5px 0 0; color: var(--print-muted); font-family: var(--font-mono), monospace; - font-size: 0.78rem; + font-size: 10px; } body[data-print-mode="markdown"] .markdown-article, body[data-print-mode="markdown"] .markdown-article p, body[data-print-mode="markdown"] .markdown-article ul, body[data-print-mode="markdown"] .markdown-article ol, - body[data-print-mode="markdown"] .markdown-article td { - color: var(--print-ink) !important; - } - - body[data-print-mode="markdown"] .markdown-link { - color: var(--print-ink) !important; - text-decoration-color: color-mix(in srgb, var(--print-ink) 30%, transparent); - } - - body[data-print-mode="markdown"] .markdown-inline-code, - body[data-print-mode="markdown"] .markdown-table-wrap, - body[data-print-mode="markdown"] .markdown-code-frame, - body[data-print-mode="markdown"] .markdown-article blockquote { - border-color: var(--print-border) !important; - box-shadow: none !important; - } - - body[data-print-mode="markdown"] .markdown-inline-code, - body[data-print-mode="markdown"] .markdown-table-wrap, - body[data-print-mode="markdown"] .markdown-article blockquote { - background: color-mix(in srgb, var(--print-paper) 88%, var(--print-ink) 12%) !important; - } - - body[data-print-mode="markdown"] .markdown-code-head, - body[data-print-mode="markdown"] .markdown-code-pre { - background: color-mix(in srgb, var(--print-paper) 86%, var(--print-ink) 14%) !important; - } - - body[data-print-mode="markdown"] .markdown-code-chip, - body[data-print-mode="markdown"] .markdown-code-caption, - body[data-print-mode="markdown"] .markdown-table th, + body[data-print-mode="markdown"] .markdown-article td, body[data-print-mode="markdown"] .markdown-article strong, body[data-print-mode="markdown"] .markdown-article h1, body[data-print-mode="markdown"] .markdown-article h2, @@ -2246,8 +2699,36 @@ select { body[data-print-mode="markdown"] .markdown-code-frame, body[data-print-mode="markdown"] .markdown-table-wrap, - body[data-print-mode="markdown"] .markdown-article blockquote, - body[data-print-mode="markdown"] .markdown-code-head { + body[data-print-mode="markdown"] .markdown-article blockquote { break-inside: avoid; + box-shadow: none !important; + } + + body[data-print-mode="markdown"] .markdown-code-frame { + border-color: var(--print-border) !important; + background: var(--print-paper) !important; + color: var(--print-ink) !important; + } + + /* The Pierre surface reads the --diffs-* vars through the shadow boundary, and + .code-renderer-shell re-declares them on itself in the shared block above — + so the print overrides must land on that element, not on the outer frame. */ + body[data-print-mode="markdown"] .markdown-code-frame .code-renderer-shell { + background: var(--print-paper) !important; + color: var(--print-ink) !important; + --diffs-bg: var(--print-paper); + --diffs-fg: var(--print-ink); + --diffs-foreground: var(--print-ink); + --diffs-background: var(--print-paper); + --diffs-fg-number-override: var(--print-muted); + --diffs-bg-context-override: var(--print-paper); + --diffs-bg-separator-override: var(--print-border); + --diffs-bg-hover-override: var(--print-paper); + } + + body[data-print-mode="markdown"] .markdown-inline-code { + border-color: var(--print-border) !important; + background: var(--print-paper) !important; + color: var(--print-ink) !important; } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 03556de..35563c1 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,27 +1,36 @@ import type { Metadata } from "next"; -import { Fraunces, IBM_Plex_Mono, IBM_Plex_Sans } from "next/font/google"; +import { Manrope, Spline_Sans_Mono, SUSE } from "next/font/google"; import type { ReactNode } from "react"; import { getCanonicalSiteUrl, getMetadataBase } from "@/lib/site/canonical-base"; import "./globals.css"; -const display = Fraunces({ +const display = Manrope({ subsets: ["latin"], variable: "--font-display", - weight: ["500", "600", "700"], + weight: "variable", }); -const sans = IBM_Plex_Sans({ +const sans = SUSE({ subsets: ["latin"], variable: "--font-sans", - weight: ["400", "500", "600", "700"], + weight: "variable", }); -const mono = IBM_Plex_Mono({ +const mono = Spline_Sans_Mono({ subsets: ["latin"], variable: "--font-mono", - weight: ["400", "500", "600"], + weight: "variable", }); +const designContract = ``; + export const metadata: Metadata = { metadataBase: getMetadataBase(), alternates: { @@ -59,6 +68,10 @@ export default function RootLayout({