@openwarelabs/ui 0.14.1 → 0.16.0

package/dist/styles.css

@@ -1789,6 +1789,208 @@
     outline: 0;
 }
 
+/* components/InlineEdit/InlineEdit.css */
+/* InlineEdit: text that turns into a text box where it is. The button and the box share their font, padding and border,
+   and pull back by them, so the text lines up with what's around it and doesn't move when the box opens. */
+.ow-inline-edit {
+    --ow-inline-edit-x: 0.375em;
+    --ow-inline-edit-y: 0.125em;
+    --ow-inline-edit-icon: clamp(12px, 0.75em, 20px);
+    display: inline-grid;
+    max-width: 100%;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ow-space-2xs);
+}
+
+.ow-inline-edit--multiline {
+    display: grid;
+}
+
+.ow-inline-edit__display,
+.ow-inline-edit__input,
+.ow-inline-edit__field::after {
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid transparent;
+    border-radius: var(--ow-radius-sm);
+    padding: var(--ow-inline-edit-y) var(--ow-inline-edit-x);
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+}
+
+.ow-inline-edit__display,
+.ow-inline-edit__editor {
+    margin-inline: calc(-1px - var(--ow-inline-edit-x));
+}
+
+.ow-inline-edit__display {
+    position: relative;
+    display: inline-flex;
+    min-width: 0;
+    align-items: baseline;
+    gap: 0.3em;
+    background: transparent;
+    cursor: pointer;
+    text-align: start;
+}
+
+.ow-inline-edit--multiline .ow-inline-edit__display {
+    display: flex;
+}
+
+.ow-inline-edit__display:hover:not(:disabled) {
+    background: var(--ow-hover);
+}
+
+.ow-inline-edit__display:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-inline-edit__display:disabled {
+    cursor: not-allowed;
+    opacity: 0.62;
+}
+
+.ow-inline-edit__text {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+}
+
+.ow-inline-edit__text--empty {
+    color: var(--ow-text-muted);
+}
+
+/* The pencil shows on hover and focus; on touch screens, which can't hover, always. */
+.ow-inline-edit__icon {
+    width: var(--ow-inline-edit-icon);
+    height: var(--ow-inline-edit-icon);
+    flex: none;
+    align-self: center;
+    color: var(--ow-icon);
+    opacity: 0;
+}
+
+.ow-inline-edit__display:hover .ow-inline-edit__icon,
+.ow-inline-edit__display:focus-visible .ow-inline-edit__icon {
+    opacity: 1;
+}
+
+@media (hover: none) {
+    .ow-inline-edit__display:not(:disabled) .ow-inline-edit__icon {
+        opacity: 1;
+    }
+}
+
+.ow-inline-edit__editor {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--ow-space-xs);
+}
+
+/* The box is as wide as a hidden copy of its text, plus the pencil's room, in the same grid cell. */
+.ow-inline-edit__field {
+    display: inline-grid;
+    min-width: 0;
+    grid-template-columns: minmax(0, 1fr);
+}
+
+.ow-inline-edit__field::after {
+    overflow: hidden;
+    padding-inline-end: calc(var(--ow-inline-edit-x) + var(--ow-inline-edit-icon) + 0.3em);
+    content: attr(data-value) " ";
+    grid-area: 1 / 1;
+    visibility: hidden;
+    white-space: pre;
+}
+
+.ow-inline-edit__input {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+    grid-area: 1 / 1;
+    border-color: var(--ow-border-strong);
+    background: var(--ow-surface);
+    outline: 0;
+}
+
+.ow-inline-edit__input::placeholder {
+    color: var(--ow-text-muted);
+    opacity: 1;
+}
+
+.ow-inline-edit__input:focus {
+    border-color: var(--ow-focus-border);
+    box-shadow: var(--ow-shadow-focus);
+}
+
+.ow-inline-edit__input:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-inline-edit__input[aria-invalid="true"] {
+    border-color: var(--ow-danger-solid);
+}
+
+.ow-inline-edit__input[aria-invalid="true"]:focus {
+    box-shadow: var(--ow-shadow-focus-danger);
+}
+
+/* An auto-growing textarea is as tall as its scrollHeight, which leaves out the border, so it draws its border inside. */
+textarea.ow-inline-edit__input {
+    border: 0;
+    padding: calc(var(--ow-inline-edit-y) + 1px) calc(var(--ow-inline-edit-x) + 1px);
+    box-shadow: inset 0 0 0 1px var(--ow-border-strong);
+}
+
+textarea.ow-inline-edit__input:focus {
+    box-shadow:
+        inset 0 0 0 1px var(--ow-focus-border),
+        var(--ow-shadow-focus);
+}
+
+textarea.ow-inline-edit__input[aria-invalid="true"] {
+    box-shadow: inset 0 0 0 1px var(--ow-danger-solid);
+}
+
+textarea.ow-inline-edit__input[aria-invalid="true"]:focus {
+    box-shadow:
+        inset 0 0 0 1px var(--ow-danger-solid),
+        var(--ow-shadow-focus-danger);
+}
+
+.ow-inline-edit__actions {
+    display: inline-flex;
+    flex: none;
+    gap: var(--ow-space-2xs);
+}
+
+.ow-inline-edit__spinner {
+    flex: none;
+}
+
+.ow-inline-edit__error {
+    color: var(--ow-danger-text);
+    font: var(--ow-weight-regular) 14px / 1.4 var(--ow-font-sans);
+    letter-spacing: normal;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .ow-inline-edit__display,
+    .ow-inline-edit__icon,
+    .ow-inline-edit__input {
+        transition-property: background-color, border-color, box-shadow, opacity;
+        transition-duration: var(--ow-duration-fast);
+        transition-timing-function: var(--ow-ease-standard);
+    }
+}
+
 /* components/Select/Select.css */
 /* Select: the trigger looks like a field; the listbox floats in the top layer. */
 .ow-select {
@@ -2052,6 +2254,99 @@
     }
 }
 
+/* components/TransferList/TransferList.css */
+/* TransferList: two standalone ListBoxes (ListBox.css) with a column of Buttons between them. Its own width decides
+   the layout (a container query): side by side, or stacked with the buttons turned to point down and up. */
+.ow-transfer-list {
+    container: ow-transfer-list / inline-size;
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+}
+
+.ow-transfer-list__body {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    gap: var(--ow-space-lg);
+}
+
+.ow-transfer-list__pane {
+    display: grid;
+    min-width: 0;
+    align-content: start;
+    gap: var(--ow-space-sm);
+}
+
+.ow-transfer-list__header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--ow-space-sm);
+}
+
+.ow-transfer-list__label {
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.4;
+}
+
+.ow-transfer-list__count {
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.ow-transfer-list .ow-transfer-list__list {
+    height: var(--ow-transfer-list-height);
+}
+
+.ow-transfer-list__actions {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    gap: var(--ow-space-xs);
+}
+
+.ow-transfer-list__icon {
+    display: flex;
+}
+
+/* The arrows point the way the items go, so they turn round right to left. */
+.ow-transfer-list__icon--back,
+.ow-transfer-list:dir(rtl) .ow-transfer-list__icon {
+    transform: scaleX(-1);
+}
+
+.ow-transfer-list:dir(rtl) .ow-transfer-list__icon--back {
+    transform: none;
+}
+
+.ow-transfer-list__order {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--ow-space-2xs);
+}
+
+@container ow-transfer-list (max-width: 519px) {
+    .ow-transfer-list__body {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .ow-transfer-list__actions {
+        flex-direction: row;
+        justify-content: center;
+    }
+
+    /* Across becomes down: → turns to ↓ and ← to ↑, whichever way the text runs. */
+    .ow-transfer-list .ow-transfer-list__actions .ow-transfer-list__icon {
+        transform: rotate(90deg);
+    }
+
+    .ow-transfer-list .ow-transfer-list__actions .ow-transfer-list__icon--back {
+        transform: rotate(-90deg);
+    }
+}
+
 /* components/Combobox/Combobox.css */
 /* Combobox: a grouped field (Input.css) with a chevron, over Select's listbox. */
 .ow-combobox {
@@ -2140,6 +2435,20 @@
     padding-left: var(--ow-space-2xs);
 }
 
+/* components/MentionInput/MentionInput.css */
+/* MentionInput: an Input or a Textarea, with Select's listbox (Select.css) under the trigger character. */
+.ow-mention-list {
+    width: max-content;
+    min-width: 224px;
+    max-width: min(360px, calc(100vw - 16px));
+}
+
+.ow-mention-list__empty {
+    display: flex;
+    align-items: center;
+    gap: var(--ow-space-xs);
+}
+
 /* components/Checkbox/Checkbox.css */
 /* Checkbox: a native input with its look replaced. */
 .ow-checkbox {
@@ -2765,6 +3074,99 @@
     }
 }
 
+/* components/SignaturePad/SignaturePad.css */
+/* SignaturePad: a field-like box to sign in, on a signing line, with its buttons underneath. */
+.ow-signature-pad {
+    position: relative;
+    display: grid;
+    width: 100%;
+    min-width: 0;
+    gap: var(--ow-space-sm);
+}
+
+.ow-signature-pad__surface {
+    position: relative;
+    height: var(--ow-signature-pad-height, 160px);
+    overflow: hidden;
+    border: 1px solid var(--ow-border-strong);
+    border-radius: var(--ow-radius-form);
+    background: var(--ow-surface);
+    transition-property: border-color, box-shadow;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+/* The ink is this colour (a penColor replaces it); the script reads it from CSS, so it follows the theme. */
+.ow-signature-pad__canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: var(--ow-text);
+    cursor: crosshair;
+    touch-action: none;
+}
+
+.ow-signature-pad--typing .ow-signature-pad__canvas,
+.ow-signature-pad--readonly .ow-signature-pad__canvas,
+.ow-signature-pad--disabled .ow-signature-pad__canvas {
+    cursor: default;
+}
+
+.ow-signature-pad:not(.ow-signature-pad--typing, .ow-signature-pad--readonly, .ow-signature-pad--disabled) .ow-signature-pad__surface:hover {
+    border-color: var(--ow-border-hover);
+}
+
+.ow-signature-pad--drawing .ow-signature-pad__surface {
+    border-color: var(--ow-focus-border);
+    box-shadow: var(--ow-shadow-focus);
+}
+
+.ow-signature-pad--invalid .ow-signature-pad__surface {
+    border-color: var(--ow-danger-line);
+}
+
+/* At 72% of the height, where the script sets a typed name. */
+.ow-signature-pad__line {
+    position: absolute;
+    top: 72%;
+    inset-inline: var(--ow-space-2xl);
+    border-top: 1px dashed var(--ow-border-strong);
+    pointer-events: none;
+}
+
+.ow-signature-pad__prompt {
+    position: absolute;
+    bottom: calc(28% + var(--ow-space-xs));
+    inset-inline-start: var(--ow-space-2xl);
+    color: var(--ow-text-muted);
+    font-size: 14px;
+    line-height: 1.4;
+    pointer-events: none;
+}
+
+.ow-signature-pad__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ow-space-xs);
+}
+
+.ow-signature-pad__edit {
+    display: inline-flex;
+    gap: var(--ow-space-xs);
+    margin-inline-start: auto;
+}
+
+.ow-signature-pad--disabled .ow-signature-pad__surface {
+    opacity: 0.62;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-signature-pad__surface {
+        transition: none;
+    }
+}
+
 /* components/NumberField/NumberField.css */
 /* NumberField: − value + in one field. */
 .ow-number-field {
@@ -2962,68 +3364,260 @@
     transition-timing-function: var(--ow-ease-standard);
 }
 
-.ow-dropzone:hover {
-    border-color: var(--ow-border-hover);
+.ow-dropzone:hover {
+    border-color: var(--ow-border-hover);
+}
+
+.ow-dropzone:focus-within:has(:focus-visible) {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-dropzone--dragging,
+.ow-dropzone--dragging:hover {
+    border-color: var(--ow-primary-text);
+    background: var(--ow-primary-subtle);
+}
+
+.ow-dropzone--invalid {
+    border-color: var(--ow-danger-line);
+}
+
+.ow-dropzone--disabled {
+    cursor: not-allowed;
+    opacity: 0.62;
+}
+
+.ow-dropzone__icon {
+    display: inline-flex;
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-md);
+    background: var(--ow-surface);
+    color: var(--ow-text-muted);
+    transition-property: color, border-color;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-dropzone--dragging .ow-dropzone__icon {
+    border-color: var(--ow-primary-border);
+    color: var(--ow-primary-text);
+}
+
+.ow-dropzone__label {
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.3;
+}
+
+.ow-dropzone--dragging .ow-dropzone__label {
+    color: var(--ow-primary-text);
+}
+
+.ow-dropzone__hint {
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    line-height: 1.35;
+}
+
+.ow-dropzone--invalid .ow-dropzone__hint {
+    color: var(--ow-danger-text);
+}
+
+/* components/UploadList/UploadList.css */
+/* UploadList: a row (or a tile) per file being uploaded, with its progress, status and buttons. */
+.ow-upload-list {
+    width: 100%;
+    min-width: 0;
+}
+
+.ow-upload-list__items {
+    display: grid;
+    gap: var(--ow-space-sm);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-radius: var(--ow-radius-container);
+}
+
+.ow-upload-list__items:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-upload-list__item {
+    position: relative;
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--ow-space-md);
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-surface);
+    padding: var(--ow-space-sm);
+    padding-inline-start: var(--ow-space-md);
+}
+
+.ow-upload-list__item--error {
+    border-color: var(--ow-danger-line);
+}
+
+.ow-upload-list__thumb {
+    position: relative;
+    display: inline-flex;
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: var(--ow-radius-md);
+    background: var(--ow-surface-muted);
+    color: var(--ow-text-muted);
+}
+
+.ow-upload-list__thumb img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.ow-upload-list__body {
+    display: grid;
+    min-width: 0;
+    flex: 1;
+    gap: 2px;
+}
+
+.ow-upload-list__name {
+    overflow: hidden;
+    color: var(--ow-text);
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.35;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ow-upload-list__detail {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--ow-space-xs);
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    line-height: 1.35;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-upload-list__detail > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ow-upload-list__icon {
+    flex-shrink: 0;
+}
+
+.ow-upload-list__item--done .ow-upload-list__icon {
+    color: var(--ow-success-text);
+}
+
+.ow-upload-list__item--error .ow-upload-list__detail {
+    color: var(--ow-danger-text);
+}
+
+.ow-upload-list__progress {
+    margin-top: var(--ow-space-xs);
 }
 
-.ow-dropzone:focus-within:has(:focus-visible) {
-    outline: 2px solid var(--ow-focus-ring);
-    outline-offset: 2px;
+.ow-upload-list__actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--ow-space-2xs);
 }
 
-.ow-dropzone--dragging,
-.ow-dropzone--dragging:hover {
-    border-color: var(--ow-primary-text);
-    background: var(--ow-primary-subtle);
+.ow-upload-list__actions:empty {
+    display: none;
 }
 
-.ow-dropzone--invalid {
-    border-color: var(--ow-danger-line);
+/* Compact: one short line per file, its progress a hairline along the bottom. */
+.ow-upload-list--compact .ow-upload-list__items {
+    gap: var(--ow-space-xs);
 }
 
-.ow-dropzone--disabled {
-    cursor: not-allowed;
-    opacity: 0.62;
+.ow-upload-list--compact .ow-upload-list__item {
+    gap: var(--ow-space-sm);
+    padding-block: var(--ow-space-2xs);
 }
 
-.ow-dropzone__icon {
-    display: inline-flex;
-    width: 40px;
-    height: 40px;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--ow-border);
-    border-radius: var(--ow-radius-md);
-    background: var(--ow-surface);
-    color: var(--ow-text-muted);
-    transition-property: color, border-color;
-    transition-duration: var(--ow-duration-base);
-    transition-timing-function: var(--ow-ease-standard);
+.ow-upload-list--compact .ow-upload-list__thumb {
+    width: auto;
+    height: auto;
+    background: none;
 }
 
-.ow-dropzone--dragging .ow-dropzone__icon {
-    border-color: var(--ow-primary-border);
-    color: var(--ow-primary-text);
+.ow-upload-list--compact .ow-upload-list__body {
+    display: flex;
+    align-items: baseline;
+    gap: var(--ow-space-sm);
 }
 
-.ow-dropzone__label {
-    font-size: 14px;
-    font-weight: var(--ow-weight-emphasis);
-    line-height: 1.3;
+.ow-upload-list--compact .ow-upload-list__name {
+    min-width: 4em;
+    flex: 1 1 auto;
+    font-size: 13px;
 }
 
-.ow-dropzone--dragging .ow-dropzone__label {
-    color: var(--ow-primary-text);
+.ow-upload-list--compact .ow-upload-list__progress {
+    position: absolute;
+    inset: auto var(--ow-space-md) 2px;
+    margin: 0;
 }
 
-.ow-dropzone__hint {
-    color: var(--ow-text-muted);
-    font-size: 12px;
-    line-height: 1.35;
+/* Grid: a tile per file, the thumbnail on top and the buttons over its corner. */
+.ow-upload-list--grid .ow-upload-list__items {
+    grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
+    gap: var(--ow-space-md);
 }
 
-.ow-dropzone--invalid .ow-dropzone__hint {
-    color: var(--ow-danger-text);
+.ow-upload-list--grid .ow-upload-list__item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--ow-space-sm);
+    padding: var(--ow-space-xs) var(--ow-space-xs) var(--ow-space-sm);
+}
+
+.ow-upload-list--grid .ow-upload-list__thumb {
+    width: auto;
+    height: auto;
+    aspect-ratio: 1;
+    border-radius: calc(var(--ow-radius-container) - 4px);
+}
+
+.ow-upload-list--grid .ow-upload-list__thumb svg {
+    width: 28px;
+    height: 28px;
+}
+
+.ow-upload-list--grid .ow-upload-list__body {
+    padding-inline: var(--ow-space-xs);
+}
+
+.ow-upload-list--grid .ow-upload-list__actions {
+    position: absolute;
+    inset-block-start: var(--ow-space-sm);
+    inset-inline-end: var(--ow-space-sm);
+    border-radius: var(--ow-radius-md);
+    background: var(--ow-surface);
+    box-shadow: 0 0 0 1px var(--ow-border);
 }
 
 /* components/Field/Field.css */
@@ -4295,38 +4889,255 @@
     }
 }
 
-/* components/Popover/Popover.css */
-/* Popover: a surface card with the menu shadow, attached to its trigger. */
-.ow-popover-anchor {
-    display: inline-flex;
+/* components/Popover/Popover.css */
+/* Popover: a surface card with the menu shadow, attached to its trigger. */
+.ow-popover-anchor {
+    display: inline-flex;
+}
+
+.ow-popover {
+    z-index: 60;
+    display: grid;
+    gap: var(--ow-space-md);
+    overflow: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-surface);
+    padding: var(--ow-space-xl);
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+    font-size: 14px;
+    line-height: 1.45;
+    box-shadow: var(--ow-shadow-menu);
+    outline: none;
+}
+
+/* Children may shrink to the popover's width instead of pushing past it. */
+.ow-popover > * {
+    min-width: 0;
+}
+
+.ow-popover__title {
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.3;
+}
+
+/* components/NotificationCenter/NotificationCenter.css */
+/* NotificationCenter: a bell with a count, opening a popover inbox. NotificationList: the rows inside it. */
+.ow-notification-center {
+    display: inline-flex;
+}
+
+.ow-notification-center__bell {
+    position: relative;
+}
+
+/* The count sits on the bell's corner, cut out of whatever is behind it. */
+.ow-notification-center__count.ow-badge {
+    position: absolute;
+    top: 0;
+    inset-inline-end: -2px;
+    min-width: 18px;
+    min-height: 18px;
+    border: 2px solid var(--ow-surface);
+    background: var(--ow-primary);
+    padding: 0 4px;
+    color: var(--ow-on-primary);
+    font-size: 10.5px;
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+}
+
+/* Edge-to-edge rows, so the popover's own padding goes; only the list scrolls when the window is short. */
+.ow-notification-center__popover.ow-popover {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    overflow: hidden;
+}
+
+.ow-notification-center__head,
+.ow-notification-center__foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ow-space-md);
+    padding: var(--ow-space-md) var(--ow-space-md) var(--ow-space-xs);
+    padding-inline-start: var(--ow-space-2xl);
+}
+
+.ow-notification-center__title {
+    font-weight: var(--ow-weight-emphasis);
+}
+
+.ow-notification-center__tabs.ow-tabs {
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
+    gap: 0;
+}
+
+.ow-notification-center__tabs .ow-tabs__list {
+    padding: 0 var(--ow-space-2xl);
+}
+
+.ow-notification-center__tab-count {
+    border-radius: var(--ow-radius-pill);
+    background: var(--ow-surface-muted);
+    padding: 1px 6px;
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-notification-center__body {
+    min-height: 0;
+    max-height: min(420px, 60dvh);
+    overflow-y: auto;
+    padding: var(--ow-space-xs);
+    outline: none;
+}
+
+.ow-notification-center__body:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--ow-focus-ring);
+}
+
+.ow-notification-center__foot {
+    border-top: 1px solid var(--ow-border);
+    padding-block: var(--ow-space-md);
+}
+
+/* The list. */
+.ow-notification-list__heading {
+    margin: 0;
+    padding: var(--ow-space-lg) var(--ow-space-lg) var(--ow-space-xs);
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-weight: var(--ow-weight-strong);
+}
+
+.ow-notification-list__items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* One row: the whole of it opens the item, through the link stretched over it. */
+.ow-notification {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ow-space-lg);
+    border-radius: var(--ow-radius-form);
+    padding-block: var(--ow-space-lg);
+    padding-inline: 22px var(--ow-space-md);
+    color: var(--ow-text-soft);
+    transition: background-color var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+.ow-notification:hover {
+    background: var(--ow-hover);
+}
+
+.ow-notification__dot {
+    position: absolute;
+    top: 20px;
+    inset-inline-start: 8px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--ow-primary);
+}
+
+.ow-notification__media {
+    display: inline-flex;
+    flex-shrink: 0;
+}
+
+.ow-notification__icon {
+    display: inline-flex;
+    width: 28px;
+    height: 28px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--ow-border);
+    border-radius: 50%;
+    background: var(--ow-surface-muted);
+    color: var(--ow-text-soft);
+}
+
+.ow-notification__body {
+    display: grid;
+    min-width: 0;
+    flex: 1;
+    gap: var(--ow-space-md);
+}
+
+.ow-notification__main {
+    display: grid;
+    gap: 2px;
+    border: 0;
+    background: none;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+}
+
+.ow-notification__main::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+}
+
+.ow-notification__main:focus-visible::after {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: -2px;
+}
+
+.ow-notification--unread .ow-notification__title {
+    color: var(--ow-text);
+    font-weight: var(--ow-weight-strong);
+}
+
+.ow-notification__description {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.ow-notification__time {
+    color: var(--ow-text-muted);
+    font-size: 12px;
 }
 
-.ow-popover {
-    z-index: 60;
-    display: grid;
-    gap: var(--ow-space-md);
-    overflow: auto;
-    border: 1px solid var(--ow-border);
-    border-radius: var(--ow-radius-container);
-    background: var(--ow-surface);
-    padding: var(--ow-space-xl);
-    color: var(--ow-text);
-    font-family: var(--ow-font-sans);
-    font-size: 14px;
-    line-height: 1.45;
-    box-shadow: var(--ow-shadow-menu);
-    outline: none;
+/* Actions and the ✕ sit above the stretched link, so they take their own clicks. */
+.ow-notification__actions,
+.ow-notification__dismiss {
+    position: relative;
+    z-index: 1;
 }
 
-/* Children may shrink to the popover's width instead of pushing past it. */
-.ow-popover > * {
-    min-width: 0;
+.ow-notification__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ow-space-sm);
 }
 
-.ow-popover__title {
-    font-size: 14px;
-    font-weight: var(--ow-weight-emphasis);
-    line-height: 1.3;
+.ow-notification__dismiss {
+    flex-shrink: 0;
+    margin: -4px 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-notification {
+        transition: none;
+    }
 }
 
 /* components/Tour/Tour.css */
@@ -6581,6 +7392,25 @@
     white-space: nowrap;
 }
 
+/* components/QRCode/QRCode.css */
+/* QRCode: near black on near white in both themes, since scanners need a light ground and strong contrast. */
+.ow-qr-code {
+    display: block;
+    flex: none;
+    max-width: 100%;
+    height: auto;
+    forced-color-adjust: none;
+    print-color-adjust: exact;
+}
+
+.ow-qr-code__ground {
+    fill: var(--ow-gray-50);
+}
+
+.ow-qr-code__modules {
+    fill: var(--ow-gray-950);
+}
+
 /* components/Image/Image.css */
 /* Image: an <img> in a box that pulses while it loads and shows a fallback if it fails. With a ratio, the box is an
    AspectRatio and the image fills it. */
@@ -6661,6 +7491,170 @@
     line-height: 1.4;
 }
 
+/* components/MediaPlayer/MediaPlayer.css */
+/* MediaPlayer: audio is a bar of controls; video is the picture, with the same bar floating over its foot. */
+.ow-media {
+    position: relative;
+    container-type: inline-size;
+    border-radius: var(--ow-radius-container);
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+}
+
+.ow-media:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-media--audio {
+    display: grid;
+    gap: var(--ow-space-2xs);
+    border: 1px solid var(--ow-border);
+    background: var(--ow-surface);
+    padding: var(--ow-space-xs);
+}
+
+.ow-media--audio .ow-media__element {
+    display: none;
+}
+
+.ow-media__title {
+    overflow: hidden;
+    padding: var(--ow-space-2xs) var(--ow-space-xs) 0;
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ow-media--video {
+    overflow: hidden;
+    background: var(--ow-gray-950);
+}
+
+/* Letterboxed, never cropped. */
+.ow-media__screen > .ow-media__element {
+    object-fit: contain;
+    cursor: pointer;
+}
+
+.ow-media__controls {
+    display: flex;
+    align-items: center;
+    gap: var(--ow-space-2xs);
+    min-width: 0;
+}
+
+.ow-media--video .ow-media__controls {
+    position: absolute;
+    inset-inline: var(--ow-space-sm);
+    bottom: var(--ow-space-sm);
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-lg);
+    background: var(--ow-surface);
+    padding: var(--ow-space-2xs);
+    box-shadow: var(--ow-shadow-menu);
+    transition: opacity var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+/* Playing and left alone: the controls fade out (still reachable with Tab, which brings them back) and so does the pointer. */
+.ow-media--idle {
+    cursor: none;
+}
+
+.ow-media--idle .ow-media__controls {
+    opacity: 0;
+    pointer-events: none;
+}
+
+/* Captions rise above the controls while they show (Chromium and Safari let the page move them). */
+.ow-media__element::-webkit-media-text-track-container {
+    transition: transform var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-media--video:not(.ow-media--idle) .ow-media__element::-webkit-media-text-track-container {
+    transform: translateY(-56px);
+}
+
+/* The timeline reads left to right in every language, as players do; the loaded part is a shade darker than the rest. */
+.ow-media__seek {
+    flex: 1;
+    min-width: 48px;
+    direction: ltr;
+}
+
+.ow-media__seek .ow-slider__track {
+    background: linear-gradient(to right, var(--ow-border-strong) var(--ow-media-buffered), var(--ow-meter-track) 0);
+}
+
+.ow-media__volume {
+    width: 72px;
+}
+
+.ow-media__time {
+    padding-inline: var(--ow-space-2xs);
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.ow-media__rate {
+    min-width: 44px;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-media__controls [aria-pressed="true"],
+.ow-media__on {
+    background: var(--ow-surface-muted);
+    color: var(--ow-primary-text);
+}
+
+.ow-media__blank {
+    display: block;
+    width: 15px;
+    height: 15px;
+}
+
+.ow-media--fullscreen {
+    display: flex;
+    align-items: center;
+    border-radius: 0;
+}
+
+/* AspectRatio sets its ratio inline; full screen, the picture takes the whole screen instead. */
+.ow-media--fullscreen .ow-media__screen {
+    height: 100%;
+    aspect-ratio: auto !important;
+}
+
+@container (max-width: 440px) {
+    .ow-media__volume,
+    .ow-media__pip {
+        display: none;
+    }
+}
+
+/* On a phone the device's buttons set the volume; M still mutes. */
+@container (max-width: 360px) {
+    .ow-media--video .ow-media__mute {
+        display: none;
+    }
+}
+
+@container (max-width: 240px) {
+    .ow-media__time {
+        display: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-media__controls,
+    .ow-media__element::-webkit-media-text-track-container {
+        transition: none !important;
+    }
+}
+
 /* components/Kbd/Kbd.css */
 /* Kbd and inline Code, both in the mono face. */
 .ow-kbd {
@@ -6890,6 +7884,159 @@
     transform: none;
 }
 
+/* components/DiffViewer/DiffViewer.css */
+/* DiffViewer: a code block's ground and header (it uses CodeBlock's classes), with a table of lines tinted from the
+   success and danger colours. The code block is dark in both themes, so the tints are too. */
+.ow-diff {
+    --ow-diff-add: var(--ow-success-solid);
+    --ow-diff-del: var(--ow-danger-solid);
+    display: grid;
+    min-width: 0;
+    gap: var(--ow-space-md);
+}
+
+.ow-diff__counts {
+    font-family: var(--ow-font-mono);
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+/* Signs and counts are lifted toward the text colour so they read on the tints. */
+.ow-diff__added,
+.ow-diff__add > .ow-diff__sign {
+    color: color-mix(in srgb, var(--ow-diff-add) 60%, var(--ow-on-code-block));
+}
+
+.ow-diff__removed,
+.ow-diff__del > .ow-diff__sign {
+    color: color-mix(in srgb, var(--ow-diff-del) 60%, var(--ow-on-code-block));
+}
+
+.ow-diff__scroll {
+    overflow: auto;
+}
+
+.ow-diff__scroll:focus-visible {
+    outline: 2px solid var(--ow-brand-300);
+    outline-offset: -2px;
+}
+
+.ow-diff__table {
+    min-width: 100%;
+    border-collapse: collapse;
+    font-family: var(--ow-font-mono);
+    font-size: 13px;
+    line-height: 1.6;
+    tab-size: 4;
+}
+
+.ow-diff__table--wrap {
+    width: 100%;
+    table-layout: fixed;
+}
+
+/* Cells have no padding of their own; the classes below add it. */
+:where(.ow-diff__table td) {
+    padding: 0;
+    vertical-align: top;
+}
+
+.ow-diff__num-col {
+    width: calc(var(--ow-diff-digits) * 1ch + 20px);
+}
+
+.ow-diff__num {
+    padding-inline: 10px;
+    color: var(--ow-on-code-block-muted);
+    text-align: right;
+    user-select: none;
+}
+
+/* The sign hangs in the margin, so wrapped lines line up under the code. */
+.ow-diff__code {
+    padding: 0 var(--ow-space-lg) 0 calc(var(--ow-space-sm) + 2ch);
+    text-indent: -2ch;
+    white-space: pre;
+}
+
+.ow-diff__table--wrap .ow-diff__code {
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+}
+
+.ow-diff__code:focus {
+    outline: none;
+}
+
+.ow-diff__sign {
+    display: inline-block;
+    width: 2ch;
+    text-indent: 0;
+    user-select: none;
+}
+
+.ow-diff__add {
+    background: color-mix(in srgb, var(--ow-diff-add) 14%, transparent);
+}
+
+.ow-diff__del {
+    background: color-mix(in srgb, var(--ow-diff-del) 14%, transparent);
+}
+
+.ow-diff__word {
+    border-radius: 2px;
+    background: color-mix(in srgb, var(--ow-diff-add) 34%, transparent);
+}
+
+.ow-diff__del .ow-diff__word {
+    background: color-mix(in srgb, var(--ow-diff-del) 34%, transparent);
+}
+
+.ow-diff__empty {
+    background: color-mix(in srgb, var(--ow-on-code-block) 3%, transparent);
+}
+
+.ow-diff__table--split .ow-diff__num:nth-child(3) {
+    border-left: 1px solid color-mix(in srgb, var(--ow-on-code-block) 8%, transparent);
+}
+
+.ow-diff__hunk > td,
+.ow-diff__gap > td {
+    background: color-mix(in srgb, var(--ow-on-code-block) 5%, transparent);
+    color: var(--ow-on-code-block-muted);
+}
+
+.ow-diff__hunk > td {
+    padding: 2px var(--ow-space-lg);
+    white-space: pre;
+}
+
+.ow-diff__expand {
+    display: flex;
+    width: 100%;
+    min-height: 28px;
+    align-items: center;
+    gap: var(--ow-space-sm);
+    border: 0;
+    background: transparent;
+    padding: 0 var(--ow-space-lg);
+    color: inherit;
+    font: inherit;
+    font-family: var(--ow-font-sans);
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.ow-diff__expand:hover {
+    background: color-mix(in srgb, var(--ow-on-code-block) 6%, transparent);
+    color: var(--ow-on-code-block);
+}
+
+.ow-diff__expand:focus-visible {
+    outline: 2px solid var(--ow-brand-300);
+    outline-offset: -2px;
+}
+
 /* components/Tag/Tag.css */
 /* Tag, TagGroup and ColorSwatch. */
 .ow-tag-group {
@@ -7036,6 +8183,125 @@
     font-size: 12px;
 }
 
+/* components/SortableList/SortableList.css */
+/* SortableList: rows (or chips, in a row) people put in order. The picked-up one lifts; the others slide aside. */
+.ow-sortable {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ow-space-xs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-sortable--horizontal {
+    flex-direction: row;
+    overflow-x: auto;
+    padding-block: var(--ow-space-2xs);
+}
+
+.ow-sortable__item {
+    position: relative;
+    display: flex;
+    flex: none;
+    min-height: 40px;
+    align-items: center;
+    gap: var(--ow-space-xs);
+    padding: var(--ow-space-xs) var(--ow-space-lg);
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-md);
+    background: var(--ow-surface);
+    color: var(--ow-text);
+    font-size: 14px;
+    outline: none;
+}
+
+.ow-sortable--horizontal .ow-sortable__item {
+    min-height: 32px;
+    padding-block: var(--ow-space-2xs);
+}
+
+.ow-sortable__content {
+    flex: 1;
+    min-width: 0;
+}
+
+/* Whatever picks it up: the row, or its grip. Touch drags it rather than scrolling the page. */
+.ow-sortable__item--row,
+.ow-sortable__handle {
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.ow-sortable__handle {
+    display: inline-flex;
+    width: 24px;
+    height: 28px;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    margin-inline-start: calc(var(--ow-space-xs) * -1);
+    padding: 0;
+    border: 0;
+    border-radius: var(--ow-radius-md);
+    background: none;
+    color: var(--ow-icon);
+}
+
+.ow-sortable__handle:hover {
+    background: var(--ow-hover);
+    color: var(--ow-text-muted);
+}
+
+.ow-sortable--horizontal .ow-sortable__grip {
+    rotate: 90deg;
+}
+
+.ow-sortable__item--row:focus-visible,
+.ow-sortable__handle:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 1px;
+}
+
+/* While one is picked up, the others slide to make room. */
+.ow-sortable--dragging .ow-sortable__item {
+    transition: transform var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-sortable .ow-sortable__item--dragging {
+    z-index: 1;
+    border-color: var(--ow-border-strong);
+    box-shadow: var(--ow-shadow-menu);
+    transition: none;
+}
+
+:root[data-ow-sortable-drag],
+:root[data-ow-sortable-drag] * {
+    cursor: grabbing !important;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.ow-sortable--disabled .ow-sortable__item {
+    background: var(--ow-surface-muted);
+    color: var(--ow-text-muted);
+    cursor: default;
+}
+
+.ow-sortable--disabled .ow-sortable__handle {
+    background: none;
+    color: var(--ow-text-disabled);
+    cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-sortable--dragging .ow-sortable__item {
+        transition: none;
+    }
+}
+
 /* components/Table/Table.css */
 /* Table: a bordered card with a quiet header row and hairlines between rows. */
 .ow-table-wrap {
@@ -7897,111 +9163,346 @@
     }
 }
 
-@media (forced-colors: active) {
-    .ow-chart__line,
-    .ow-sparkline__line {
-        stroke: CanvasText;
-    }
+@media (forced-colors: active) {
+    .ow-chart__line,
+    .ow-sparkline__line {
+        stroke: CanvasText;
+    }
+}
+
+/* components/ActivityHeatmap/ActivityHeatmap.css */
+/* ActivityHeatmap: a square per day, shaded from the empty track to one chart colour, so the shades follow the theme. */
+.ow-heatmap {
+    --ow-heatmap-cell: 12px;
+    display: grid;
+    min-width: 0;
+    gap: var(--ow-space-xs);
+    color: var(--ow-text-muted);
+    font-size: 11.5px;
+    line-height: 1;
+}
+
+/* It scrolls sideways inside itself on a narrow screen, never the page. */
+.ow-heatmap__scroll {
+    min-width: 0;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+}
+
+/* The spacing round the edge leaves room for the focus ring. */
+.ow-heatmap__grid {
+    border-collapse: separate;
+    border-spacing: max(3px, calc(var(--ow-heatmap-cell) / 4));
+}
+
+.ow-heatmap__grid th,
+.ow-heatmap__grid td {
+    padding: 0;
+}
+
+.ow-heatmap__grid th {
+    font-weight: var(--ow-weight-regular);
+    text-align: start;
+    white-space: nowrap;
+}
+
+/* A month's name starts over its first week and runs on over the next, without widening the columns. */
+.ow-heatmap__month {
+    position: relative;
+    height: 1.3em;
+}
+
+.ow-heatmap__month span {
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+}
+
+.ow-heatmap__grid .ow-heatmap__weekday {
+    padding-inline-end: 4px;
+    font-size: 11px;
+}
+
+.ow-heatmap__cell {
+    width: var(--ow-heatmap-cell);
+    height: var(--ow-heatmap-cell);
+    border-radius: 3px;
+}
+
+.ow-heatmap__day {
+    display: block;
+    width: var(--ow-heatmap-cell);
+    height: var(--ow-heatmap-cell);
+    border: 0;
+    border-radius: 3px;
+    background: color-mix(in oklab, var(--ow-heatmap-color) var(--ow-heatmap-mix, 0%), var(--ow-meter-track));
+    padding: 0;
+}
+
+button.ow-heatmap__day {
+    cursor: pointer;
+}
+
+.ow-heatmap__cell:hover > .ow-heatmap__day {
+    box-shadow: inset 0 0 0 1px var(--ow-text-muted);
+}
+
+.ow-heatmap [data-date]:focus {
+    outline: none;
+}
+
+.ow-heatmap [data-date]:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 1px;
+}
+
+.ow-heatmap__legend {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(var(--ow-heatmap-cell) / 4);
+}
+
+.ow-heatmap__legend > :first-child {
+    margin-inline-start: 4px;
+}
+
+.ow-heatmap__legend > :last-child {
+    margin-inline-end: 4px;
+}
+
+@media (forced-colors: active) {
+    .ow-heatmap__day {
+        forced-color-adjust: none;
+    }
+}
+
+/* components/FileTree/FileTree.css */
+/* FileTree: a project structure explorer. Monospace names, hairline guides, a tinted selected file. */
+.ow-tree,
+.ow-tree__group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-tree {
+    display: grid;
+    gap: 1px;
+    color: var(--ow-text);
+}
+
+.ow-tree__group {
+    display: grid;
+    gap: 1px;
+    margin-left: 15px;
+    border-left: 1px solid var(--ow-border);
+    padding-left: var(--ow-space-sm);
+}
+
+.ow-tree__item {
+    outline: none;
+}
+
+.ow-tree__row {
+    display: flex;
+    min-height: 32px;
+    align-items: center;
+    gap: var(--ow-space-xs);
+    border-radius: var(--ow-radius-form);
+    padding: var(--ow-space-2xs) var(--ow-space-sm);
+    cursor: pointer;
+    transition: background-color var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+.ow-tree__row:hover {
+    background: var(--ow-surface-muted);
+}
+
+.ow-tree__item:focus-visible > .ow-tree__row {
+    box-shadow: 0 0 0 2px var(--ow-focus-ring);
+}
+
+.ow-tree__row--selected,
+.ow-tree__row--selected:hover {
+    background: var(--ow-primary-subtle);
+    color: var(--ow-primary-text);
+}
+
+.ow-tree__chevron {
+    flex-shrink: 0;
+    color: var(--ow-text-muted);
+    transition: transform var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-tree__chevron--open {
+    transform: rotate(90deg);
+}
+
+.ow-tree__spacer {
+    width: 14px;
+    flex-shrink: 0;
+}
+
+.ow-tree__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--ow-text-muted);
+}
+
+.ow-tree__icon--folder {
+    color: var(--ow-primary-text);
+}
+
+.ow-tree__row--selected .ow-tree__icon {
+    color: inherit;
+}
+
+.ow-tree__name {
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+    font-family: var(--ow-font-mono);
+    font-size: 13px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ow-tree__meta {
+    flex-shrink: 0;
+    color: var(--ow-text-muted);
+    font-family: var(--ow-font-mono);
+    font-size: 12px;
 }
 
-/* components/FileTree/FileTree.css */
-/* FileTree: a project structure explorer. Monospace names, hairline guides, a tinted selected file. */
-.ow-tree,
-.ow-tree__group {
+/* components/TreeView/TreeView.css */
+/* TreeView: rows that open, select and check. FileTree's hairline guides, NavList's 14px text. */
+.ow-treeview,
+.ow-treeview__group {
+    display: grid;
+    gap: 1px;
     margin: 0;
     padding: 0;
     list-style: none;
 }
 
-.ow-tree {
-    display: grid;
-    gap: 1px;
+.ow-treeview {
     color: var(--ow-text);
+    font-size: 14px;
 }
 
-.ow-tree__group {
-    display: grid;
-    gap: 1px;
-    margin-left: 15px;
-    border-left: 1px solid var(--ow-border);
-    padding-left: var(--ow-space-sm);
+/* The guide runs under the parent's chevron. */
+.ow-treeview__group {
+    margin-inline-start: 14px;
+    border-inline-start: 1px solid var(--ow-border);
+    padding-inline-start: var(--ow-space-2xs);
 }
 
-.ow-tree__item {
+.ow-treeview__item {
     outline: none;
 }
 
-.ow-tree__row {
+.ow-treeview__row {
     display: flex;
     min-height: 32px;
     align-items: center;
     gap: var(--ow-space-xs);
     border-radius: var(--ow-radius-form);
-    padding: var(--ow-space-2xs) var(--ow-space-sm);
+    padding-block: var(--ow-space-2xs);
+    padding-inline: var(--ow-space-2xs) var(--ow-space-sm);
     cursor: pointer;
+    user-select: none;
     transition: background-color var(--ow-duration-fast) var(--ow-ease-standard);
 }
 
-.ow-tree__row:hover {
+.ow-treeview__row:hover {
     background: var(--ow-surface-muted);
 }
 
-.ow-tree__item:focus-visible > .ow-tree__row {
+.ow-treeview__item:focus-visible > .ow-treeview__row {
     box-shadow: 0 0 0 2px var(--ow-focus-ring);
 }
 
-.ow-tree__row--selected,
-.ow-tree__row--selected:hover {
+.ow-treeview__row--selected,
+.ow-treeview__row--selected:hover {
     background: var(--ow-primary-subtle);
     color: var(--ow-primary-text);
 }
 
-.ow-tree__chevron {
+.ow-treeview__row--disabled,
+.ow-treeview__row--loading {
+    color: var(--ow-text-muted);
+    cursor: default;
+}
+
+.ow-treeview__toggle {
+    display: inline-flex;
+    width: 20px;
+    height: 24px;
     flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
     color: var(--ow-text-muted);
+}
+
+.ow-treeview__toggle svg {
     transition: transform var(--ow-duration-base) var(--ow-ease-standard);
 }
 
-.ow-tree__chevron--open {
+.ow-treeview__toggle:dir(rtl) svg {
+    transform: scaleX(-1);
+}
+
+[aria-expanded="true"] > .ow-treeview__row .ow-treeview__toggle svg {
     transform: rotate(90deg);
 }
 
-.ow-tree__spacer {
-    width: 14px;
-    flex-shrink: 0;
+.ow-treeview .ow-checkbox__input {
+    pointer-events: none;
 }
 
-.ow-tree__icon {
+.ow-treeview__icon {
     display: inline-flex;
     flex-shrink: 0;
     color: var(--ow-text-muted);
 }
 
-.ow-tree__icon--folder {
-    color: var(--ow-primary-text);
-}
-
-.ow-tree__row--selected .ow-tree__icon {
-    color: inherit;
-}
-
-.ow-tree__name {
+.ow-treeview__text {
+    display: grid;
     min-width: 0;
     flex: 1;
+}
+
+.ow-treeview__label,
+.ow-treeview__description {
     overflow: hidden;
-    font-family: var(--ow-font-mono);
-    font-size: 13px;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-.ow-tree__meta {
-    flex-shrink: 0;
+.ow-treeview__description,
+.ow-treeview__end {
     color: var(--ow-text-muted);
-    font-family: var(--ow-font-mono);
     font-size: 12px;
 }
 
+.ow-treeview__end {
+    flex-shrink: 0;
+}
+
+.ow-treeview__row--selected :is(.ow-treeview__icon, .ow-treeview__description, .ow-treeview__end) {
+    color: inherit;
+}
+
+.ow-treeview__row--error {
+    color: var(--ow-danger-text);
+}
+
+.ow-treeview__retry {
+    font-weight: var(--ow-weight-emphasis);
+    text-decoration: underline;
+}
+
 /* components/EmptyState/EmptyState.css */
 /* EmptyState: centred, at most 360px of text, an icon tile above. */
 .ow-empty {
@@ -8212,6 +9713,148 @@
     font-weight: var(--ow-weight-regular);
 }
 
+/* components/NavigationMenu/NavigationMenu.css */
+/* NavigationMenu: a site's top links, with panels of links on Popover's surface. Rules are scoped under
+   .ow-navigation-menu so SiteHeader's `nav a` colours don't reach into the panels. */
+.ow-navigation-menu {
+    min-width: 0;
+    font-family: var(--ow-font-sans);
+}
+
+.ow-navigation-menu__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ow-space-2xs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-navigation-menu .ow-navigation-menu__trigger {
+    display: inline-flex;
+    min-height: 32px;
+    align-items: center;
+    gap: var(--ow-space-3xs);
+    border: 0;
+    border-radius: var(--ow-radius-pill);
+    background: transparent;
+    padding: 0 var(--ow-space-sm);
+    color: var(--ow-text-soft);
+    font: inherit;
+    font-size: 14px;
+    font-weight: var(--ow-weight-control);
+    text-decoration: none;
+    cursor: pointer;
+    transition-property: color, background-color;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-navigation-menu .ow-navigation-menu__trigger:hover,
+.ow-navigation-menu__trigger[aria-expanded="true"] {
+    background: var(--ow-hover);
+    color: var(--ow-text);
+}
+
+.ow-navigation-menu__trigger[aria-current="page"],
+.ow-navigation-menu__trigger[data-active] {
+    color: var(--ow-text);
+}
+
+.ow-navigation-menu .ow-navigation-menu__trigger:focus-visible,
+.ow-navigation-menu .ow-navigation-menu__link:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: -2px;
+}
+
+.ow-navigation-menu__chevron {
+    color: var(--ow-text-muted);
+    transition: transform var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+[aria-expanded="true"] > .ow-navigation-menu__chevron {
+    transform: rotate(180deg);
+}
+
+.ow-navigation-menu__panel {
+    grid-template-columns: repeat(var(--ow-navigation-menu-columns), minmax(0, 15rem));
+    max-width: calc(100vw - 16px);
+    padding: var(--ow-space-sm);
+    gap: var(--ow-space-sm);
+}
+
+.ow-navigation-menu__panel--full {
+    grid-template-columns: repeat(var(--ow-navigation-menu-columns), minmax(0, 1fr));
+}
+
+.ow-navigation-menu__group {
+    display: grid;
+    align-content: start;
+    gap: var(--ow-space-3xs);
+}
+
+.ow-navigation-menu__group-title {
+    padding: var(--ow-space-xs) var(--ow-space-sm) var(--ow-space-2xs);
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-weight: var(--ow-weight-label);
+}
+
+.ow-navigation-menu .ow-navigation-menu__link {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ow-space-sm);
+    border-radius: var(--ow-radius-lg);
+    padding: var(--ow-space-sm);
+    color: var(--ow-text);
+    text-decoration: none;
+    transition: background-color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-navigation-menu .ow-navigation-menu__link:hover,
+.ow-navigation-menu__link[aria-current="page"] {
+    background: var(--ow-surface-muted);
+}
+
+.ow-navigation-menu__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--ow-text-muted);
+}
+
+.ow-navigation-menu__text {
+    display: grid;
+    min-width: 0;
+    gap: 2px;
+}
+
+.ow-navigation-menu__title {
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.3;
+}
+
+.ow-navigation-menu__description {
+    color: var(--ow-text-muted);
+    font-size: 13px;
+    line-height: 1.4;
+}
+
+.ow-navigation-menu .ow-navigation-menu__link--featured,
+.ow-navigation-menu .ow-navigation-menu__link--featured:hover {
+    flex-direction: column;
+    justify-content: flex-end;
+    min-height: 9rem;
+    background: var(--ow-primary-subtle);
+    padding: var(--ow-space-lg);
+}
+
+@media (max-width: 640px) {
+    .ow-navigation-menu__panel {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
 /* components/AppShell/AppShell.css */
 /* AppShell: a sidebar down the left and the page beside it. It measures its own width (a container query), so it
    folds into a drawer under its breakpoint (900px by default) whether it fills the window or sits in a smaller frame. */
@@ -8727,6 +10370,52 @@
     }
 }
 
+/* components/VirtualList/VirtualList.css */
+/* VirtualList: a scrolling list that renders only the rows in view, each placed by its offset from the top. */
+.ow-virtual-list {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.ow-virtual-list__scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    /* The list keeps its own place as rows are measured or added above; the browser's anchoring would double it. */
+    overflow-anchor: none;
+    border-radius: inherit;
+}
+
+.ow-virtual-list__scroll:focus-visible,
+.ow-virtual-list__item:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: -2px;
+}
+
+.ow-virtual-list__inner {
+    position: relative;
+    flex-shrink: 0;
+    width: 100%;
+}
+
+.ow-virtual-list__item {
+    position: absolute;
+    top: 0;
+    inset-inline: 0;
+    border-radius: var(--ow-radius-md);
+}
+
+.ow-virtual-list__footer {
+    display: flex;
+    justify-content: center;
+    padding: var(--ow-space-md);
+}
+
 /* components/AspectRatio/AspectRatio.css */
 /* AspectRatio: a box that keeps its shape, with whatever is inside filling it. The hidden overflow keeps the ratio
    when the content is taller than the box would be. */
@@ -9568,6 +11257,44 @@
     }
 }
 
+/* components/Markdown/Markdown.css */
+/* Markdown: Prose does the typography; this is only the caret that follows a streaming answer's last character. */
+.ow-markdown__caret {
+    display: inline-block;
+    width: 2px;
+    height: 1.15em;
+    margin-inline-start: 2px;
+    border-radius: 1px;
+    background: currentColor;
+    vertical-align: -0.2em;
+    animation: ow-markdown-caret 1s var(--ow-ease-standard) infinite;
+}
+
+@keyframes ow-markdown-caret {
+    0%,
+    100% {
+        opacity: 0.9;
+    }
+    50% {
+        opacity: 0.15;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-markdown__caret {
+        opacity: 0.6;
+        animation: none;
+    }
+}
+
+/* Forced colours drop backgrounds: draw the caret in the text colour. */
+@media (forced-colors: active) {
+    .ow-markdown__caret {
+        forced-color-adjust: none;
+        background: CanvasText;
+    }
+}
+
 /* components/TextShimmer/TextShimmer.css */
 /* TextShimmer: muted text with a band of full-strength text sweeping across it. */
 .ow-shimmer {