@birdycom/omniaui 0.12.1 → 0.12.3

package/dist/components.css

@@ -1,4 +1,4 @@
-/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.1. Do not edit. */
+/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.3. Do not edit. */
 /* Semantic theme tokens: every color is light-dark() of an Omnia palette token (oc-colors.css). */
 /* Same source as the desktop export: npx omniacss tokens --format json|dtcg|python */
 :root {
@@ -252,6 +252,10 @@
   color: var(--oc-foreground);
 }
 
+/* The hidden attribute hides, also on components with their own display (.oc-field is flex, .oc-card is grid …).
+   hidden="until-found" keeps the browser's own behaviour, so find-in-page can still open it. */
+[hidden]:not([hidden="until-found"]) { display: none !important; }
+
 /* ===================================================================
    BLOCK GRID HELPER
    =================================================================== */
@@ -433,6 +437,20 @@ flex-direction: column;
   opacity: 1;
 }
 
+/* Inline — a link button inside running text: no button padding or height, the size of the text around it.
+   Two classes, so it also wins over the size modifiers (--sm, --lg) further down. */
+.oc-btn.oc-btn--inline {
+  display: inline;
+  padding: 0;
+  border: 0;
+  border-radius: 2px;
+  font-size: inherit;
+  line-height: inherit;
+  vertical-align: baseline;
+  white-space: normal;
+}
+.oc-btn.oc-btn--inline:active { transform: none; }
+
 /* Destructive */
 .oc-btn--destructive {
   background: var(--oc-destructive);
@@ -1114,6 +1132,18 @@ textarea.oc-input {
   background: color-mix(in srgb, var(--oc-destructive) 5%, var(--oc-background));
 }
 
+/* Inline: a short message right under a field or a form (an error, a hint), tinted, without the box spacing. */
+.oc-alert--inline {
+  padding: 8px 12px;
+  border-radius: var(--oc-radius);
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+.oc-alert--inline.oc-alert--danger { color: light-dark(var(--oc-destructive), oklch(from var(--oc-destructive) max(l, 0.75) c h)); }
+.oc-alert--inline .oc-alert-title { margin: 0; font-size: inherit; }
+.oc-alert--inline .oc-alert-title + .oc-alert-description { margin-block-start: 2px; }
+.oc-alert--inline .oc-alert-description { color: inherit; }
+
 /* ===================================================================
    HERO (page intro block — used in docs index)
    =================================================================== */
@@ -1718,7 +1748,7 @@ textarea.oc-input {
   display: none;
 }
 
-/* Optional Iconify/MDI chevron: put <span class="iconify oc-accordion-chevron" data-icon="mdi:chevron-down" data-width="16" data-height="16" aria-hidden="true"></span> in the trigger */
+/* Optional Iconify/MDI chevron: put <iconify-icon icon="mdi:chevron-down" class="oc-accordion-chevron size-4" height="unset" aria-hidden="true"></iconify-icon> in the trigger (the older <span class="iconify" data-icon="…"> works the same) */
 .oc-accordion-trigger .oc-accordion-chevron {
   flex-shrink: 0;
   transition: transform var(--oc-transition-fast);
@@ -1967,15 +1997,44 @@ a.oc-breadcrumb-item:hover {
 }
 
 .oc-progress-bar {
+  --oc-progress-color: var(--oc-primary);
+  display: block;
+  max-width: 100%;
   height: 100%;
-  background: var(--oc-primary);
+  background: var(--oc-progress-color);
   border-radius: 999px;
   transition: width 300ms ease;
 }
 
-.oc-progress-bar--success { background: var(--oc-success); }
-.oc-progress-bar--danger { background: var(--oc-destructive); }
-.oc-progress-bar--warning { background: var(--oc-warning); }
+.oc-progress-bar--success { --oc-progress-color: var(--oc-success); }
+.oc-progress-bar--danger { --oc-progress-color: var(--oc-destructive); }
+.oc-progress-bar--warning { --oc-progress-color: var(--oc-warning); }
+
+/* Sizes */
+.oc-progress--sm { height: 6px; }
+.oc-progress--xs { height: 4px; }
+
+/* Glow: a light top edge and a soft glow in the bar color (meters, usage, quota). */
+.oc-progress--glow { overflow: visible; box-shadow: inset 0 1px 1px light-dark(oklch(0% 0 0deg / 0.06), oklch(0% 0 0deg / 0.35)); }
+.oc-progress--glow .oc-progress-bar {
+  background: linear-gradient(180deg, color-mix(in oklch, var(--oc-progress-color) 78%, white), var(--oc-progress-color));
+  box-shadow: 0 0 10px -2px color-mix(in oklch, var(--oc-progress-color) 60%, transparent);
+}
+
+/* Marker: a short upright line at a target or schedule point, placed with style="left: 20%". Give it an aria-label
+   on the progressbar or a text next to it; the line itself is decoration. */
+.oc-progress:has(> .oc-progress-marker) { position: relative; overflow: visible; }
+.oc-progress-marker {
+  position: absolute;
+  inset-block: -4px;
+  inline-size: 2px;
+  margin-inline-start: -1px;
+  border-radius: 2px;
+  background: var(--oc-foreground);
+  box-shadow: 0 0 0 1.5px var(--oc-background);
+  pointer-events: none;
+}
+.oc-progress-marker--muted { background: var(--oc-muted-foreground); }
 
 /* ===================================================================
    SKELETON LOADER
@@ -6202,6 +6261,58 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   button.oc-stat-card:hover { translate: none; }
 }
 
+/* parts/app-status-dot.css */
+/* File: packages/ui/src/parts/app-status-dot.css
+   Map: dot (tone color + soft ring) -> tones (working pulses, waiting, done, error, idle) -> sizes -> status row (dot + text
+   that cuts off with …) -> reduced motion
+   Status dot: a small live state light for a job, agent, sync, server or person ("Working", "Waiting for input", "Done").
+   Always put a text next to it or an aria-label on it: the color alone does not tell the state. */
+
+.oc-status-dot {
+  --oc-status-dot-color: var(--oc-muted-foreground);
+  display: inline-block;
+  flex: none;
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: 50%;
+  background: var(--oc-status-dot-color);
+  box-shadow: 0 0 0 2px oklch(from var(--oc-status-dot-color) l c h / 0.2);
+  vertical-align: middle;
+}
+
+/* Tones. --working pulses a ring outwards. */
+.oc-status-dot--working {
+  --oc-status-dot-color: var(--oc-primary);
+  animation: oc-status-dot-pulse 1.8s ease-in-out infinite;
+}
+.oc-status-dot--waiting { --oc-status-dot-color: var(--oc-warning); }
+.oc-status-dot--done { --oc-status-dot-color: var(--oc-success); }
+.oc-status-dot--error { --oc-status-dot-color: var(--oc-destructive); }
+.oc-status-dot--idle { --oc-status-dot-color: var(--oc-muted-foreground); box-shadow: none; opacity: 0.7; }
+@keyframes oc-status-dot-pulse {
+  50% { box-shadow: 0 0 0 5px oklch(from var(--oc-status-dot-color) l c h / 0.08); }
+}
+
+/* Sizes */
+.oc-status-dot--sm { inline-size: 0.375rem; block-size: 0.375rem; }
+.oc-status-dot--lg { inline-size: 0.625rem; block-size: 0.625rem; }
+
+/* Status row: dot + one line of text that cuts off with … in a narrow card. */
+.oc-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-inline-size: 0;
+  margin: 0;
+  font-size: 0.8125rem;
+}
+.oc-status__text { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oc-status__meta { flex: none; margin-inline-start: auto; color: var(--oc-muted-foreground); font-variant-numeric: tabular-nums; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-status-dot--working { animation: none; }
+}
+
 /* parts/app-table-actions.css */
 /* File: packages/ui/src/parts/app-table-actions.css | Map: icon actions -> tone modifiers -> overflow trigger -> menu tweaks -> reduced motion */
 /* Table actions: row actions as small icon buttons or as one overflow ("more") menu.
@@ -6331,6 +6442,104 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 .oc-table-compact--plain > .oc-table tbody tr:nth-child(even),
 .oc-table-compact--plain > .oc-table thead th { background: none; }
 
+/* parts/app-titlebar.css */
+/* File: packages/ui/src/parts/app-titlebar.css
+   Map: window (column, shares the scroll timeline) -> title bar (drag area) -> title + subtitle -> actions (no drag) ->
+   icon buttons (close turns red) -> body (scrolls) -> hairline when the body scrolls (scroll-driven, no JavaScript) -> sizes
+   Title bar: the top bar of a frameless desktop window (Electron, Tauri) or a widget: you drag the window by it, the
+   buttons stay clickable. Inside .oc-titlebar-window the bar gets a hairline once .oc-titlebar-body scrolls. */
+
+.oc-titlebar-window {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  timeline-scope: --oc-titlebar-scroll;
+}
+
+.oc-titlebar {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 2px;
+  min-block-size: 46px;
+  padding: 0 8px 0 14px;
+  border-block-end: 1px solid transparent;
+  -webkit-user-select: none;
+  user-select: none;
+  /* The OS moves the window when you drag here (Electron and Tauri read this). */
+  -webkit-app-region: drag;
+  app-region: drag;
+}
+.oc-titlebar :is(button, a, input, select, textarea, label, [role="button"], [tabindex], .oc-titlebar__actions) {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+.oc-titlebar--bordered { border-block-end-color: var(--oc-glass-hairline, var(--oc-border)); }
+
+/* Title area: grows, cuts the subtitle off with …. */
+.oc-titlebar__main { display: flex; flex: 1; align-items: center; gap: 8px; min-inline-size: 0; }
+.oc-titlebar__icon { flex: none; inline-size: 18px; block-size: 18px; }
+.oc-titlebar__title { flex: none; font-size: 0.8667rem; font-weight: 650; letter-spacing: -0.01em; }
+.oc-titlebar__subtitle {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--oc-muted-foreground);
+  font-size: 0.8rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.oc-titlebar__subtitle::before { content: "·"; margin-inline-end: 8px; }
+.oc-titlebar__actions { display: flex; flex: none; align-items: center; gap: 2px; }
+
+/* Compact icon buttons: muted, a light surface on hover, the close button red. */
+.oc-titlebar__btn {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 30px;
+  block-size: 30px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  font: inherit;
+  cursor: pointer;
+  transition: background-color var(--oc-transition-fast), color var(--oc-transition-fast);
+}
+.oc-titlebar__btn :where(svg, iconify-icon) { inline-size: 16px; block-size: 16px; }
+.oc-titlebar__btn:hover { background: var(--oc-glass-panel-strong, var(--oc-accent)); color: var(--oc-foreground); }
+.oc-titlebar__btn:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-titlebar__btn--close:hover { background: var(--oc-destructive); color: var(--oc-destructive-foreground); }
+
+/* Body: the part that scrolls under the bar. */
+.oc-titlebar-body {
+  flex: 1;
+  min-block-size: 0;
+  overflow: auto;
+  scroll-timeline: --oc-titlebar-scroll block;
+  scrollbar-width: thin;
+}
+
+/* Hairline + light surface on the bar once the body scrolls (browsers without scroll timelines keep the plain bar). */
+@supports (animation-timeline: scroll()) {
+  .oc-titlebar-window > .oc-titlebar:not(.oc-titlebar--bordered) {
+    animation: oc-titlebar-scrolled linear both;
+    animation-timeline: --oc-titlebar-scroll;
+    animation-range: 0 48px;
+  }
+}
+@keyframes oc-titlebar-scrolled {
+  to { border-block-end-color: var(--oc-glass-hairline, var(--oc-border)); background: var(--oc-glass-panel, var(--oc-muted)); }
+}
+
+/* Sizes */
+.oc-titlebar--sm { min-block-size: 36px; padding-inline-start: 10px; }
+.oc-titlebar--sm .oc-titlebar__btn { inline-size: 26px; block-size: 26px; border-radius: 6px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-titlebar-window > .oc-titlebar { animation: none; }
+}
+
 /* parts/app-top-progress.css */
 /* File: packages/ui/src/parts/app-top-progress.css | Map: bar (fixed, native progress) -> determinate value -> indeterminate animation -> color + static modifiers -> done state -> reduced motion */
 /* Top progress: thin loading bar at the very top of the page, on a native <progress> element.
@@ -8641,6 +8850,79 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
   .oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__face--back { opacity: 1; visibility: visible; }
 }
 
+/* parts/media-glass.css */
+/* File: packages/ui/src/parts/media-glass.css
+   Map: tokens (light-dark) -> sheet (.oc-glass: see-through, blurred, light top edge, soft shadow) -> panel (.oc-glass-panel:
+   a lighter layer inside) -> cards inside a sheet -> --flat (desktop window, the OS draws the blur) -> --strong -> reduced
+   transparency
+   Glass: see-through surfaces in the "liquid glass" style, over a photo, a gradient or the desktop (an Electron or Tauri
+   window with Windows acrylic or macOS vibrancy behind a transparent page). Re-tint with the --oc-glass-* tokens. */
+
+:root {
+  --oc-glass-sheet: light-dark(oklch(from var(--oc-background) l c h / 0.72), oklch(from var(--oc-background) l c h / 0.62));
+  --oc-glass-panel: light-dark(oklch(100% 0 0deg / 0.5), oklch(100% 0 0deg / 0.055));
+  --oc-glass-panel-strong: light-dark(oklch(100% 0 0deg / 0.72), oklch(100% 0 0deg / 0.09));
+  --oc-glass-edge: light-dark(oklch(100% 0 0deg / 0.85), oklch(100% 0 0deg / 0.11));
+  --oc-glass-edge-hi: light-dark(oklch(100% 0 0deg / 1), oklch(100% 0 0deg / 0.16));
+  --oc-glass-hairline: light-dark(oklch(from var(--oc-foreground) l c h / 0.1), oklch(100% 0 0deg / 0.08));
+  --oc-glass-shadow: 0 24px 60px -20px light-dark(oklch(25% 0.06 255deg / 0.35), oklch(0% 0 0deg / 0.7));
+  --oc-glass-panel-shadow: 0 8px 24px -16px light-dark(oklch(25% 0.06 255deg / 0.25), oklch(0% 0 0deg / 0.6));
+  --oc-glass-blur: 28px;
+  --oc-glass-radius: 18px;
+  --oc-glass-panel-radius: 14px;
+}
+
+/* Sheet: the outer glass surface (a widget, a floating panel, a dialog over a photo). */
+.oc-glass {
+  position: relative;
+  color: var(--oc-foreground);
+  background: var(--oc-glass-sheet);
+  border: 1px solid var(--oc-glass-edge);
+  border-radius: var(--oc-glass-radius);
+  box-shadow: var(--oc-glass-shadow), inset 0 1px 0 var(--oc-glass-edge-hi);
+  backdrop-filter: blur(var(--oc-glass-blur)) saturate(1.5);
+  /* OmniaUI cards inside become glass panels too. */
+  --oc-card-background: var(--oc-glass-panel);
+  --oc-card-border: var(--oc-glass-edge);
+}
+
+/* Panel: a lighter layer inside a sheet (a group of settings, a meter, a list). */
+.oc-glass-panel {
+  position: relative;
+  background: var(--oc-glass-panel);
+  border: 1px solid var(--oc-glass-edge);
+  border-radius: var(--oc-glass-panel-radius);
+  box-shadow: var(--oc-glass-panel-shadow), inset 0 1px 0 var(--oc-glass-edge-hi);
+}
+.oc-glass .oc-card {
+  border-radius: var(--oc-glass-panel-radius);
+  box-shadow: var(--oc-glass-panel-shadow), inset 0 1px 0 var(--oc-glass-edge-hi);
+}
+
+/* Strong: more opaque, for text-heavy panels or a hovered row. */
+.oc-glass--strong,
+.oc-glass-panel--strong { background: var(--oc-glass-panel-strong); }
+
+/* Flat: a frameless desktop window where the OS draws the blur (acrylic, vibrancy): no own blur, no drop shadow. */
+.oc-glass--flat {
+  border-radius: 8px;
+  box-shadow: inset 0 1px 0 var(--oc-glass-edge-hi);
+  backdrop-filter: none;
+}
+
+/* Hairline divider in glass (sections, header). */
+.oc-glass-divider { block-size: 1px; margin: 0; border: 0; background: var(--oc-glass-hairline); }
+
+/* People who ask for less transparency get solid surfaces. */
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --oc-glass-sheet: var(--oc-background);
+    --oc-glass-panel: var(--oc-card);
+    --oc-glass-panel-strong: var(--oc-muted);
+  }
+  .oc-glass { backdrop-filter: none; }
+}
+
 /* parts/media-image-zoom.css */
 /* File: packages/ui/src/parts/media-image-zoom.css | Map: root + zoom variable -> toolbar + level chips
    -> viewport (scroll = pan) -> canvas (grows with the zoom) -> zoom levels (classes + radios via :has()) -> motion
@@ -8844,6 +9126,46 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
 }
 @keyframes oc-lightbox-in { from { opacity: 0; scale: 0.98; } }
 
+/* parts/media-live-frame.css */
+/* File: packages/ui/src/parts/media-live-frame.css
+   Map: frame (virtual size -> ratio, container) -> content at the virtual size, scaled to the frame width -> static
+   Live frame: shows a page (an <iframe>, or a <video>/<img>) at a virtual size such as 1280x720 and scales it down to
+   the width of its box, so a live site looks like a screenshot that is still alive. Pure CSS: the scale is
+   tan(atan2(100cqi, <virtual width>)), which is the frame width divided by the virtual width. On .oc-browser-frame__view
+   or on its own. Set the size with --oc-live-w / --oc-live-h (unitless px, default 1280 x 720). */
+
+.oc-live-frame {
+  --oc-live-w: 1280;
+  --oc-live-h: 720;
+  position: relative;
+  display: block;
+  /* Always the full width of its column (also inside flex or grid centring), the height follows the ratio. */
+  inline-size: 100%;
+  overflow: hidden;
+  aspect-ratio: var(--oc-live-w) / var(--oc-live-h);
+  container-type: inline-size;
+  background: var(--oc-background);
+}
+/* .oc-live-frame__content: any element (a whole demo page) at the virtual size. The class inside :is() also makes this
+   rule as strong as the .oc-browser-frame__view rule, which comes earlier, so on the view slot this one wins. */
+.oc-live-frame > :is(iframe, video, img, object, .oc-live-frame__content) {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  display: block;
+  inline-size: calc(var(--oc-live-w) * 1px);
+  max-inline-size: none;
+  block-size: calc(var(--oc-live-h) * 1px);
+  border: 0;
+  transform-origin: 0 0;
+  scale: tan(atan2(100cqi, calc(var(--oc-live-w) * 1px)));
+}
+/* Right-to-left pages: scale from the other corner. */
+.oc-live-frame:dir(rtl) > :is(iframe, video, img, object, .oc-live-frame__content) { transform-origin: 100% 0; }
+
+/* A picture of a page, not a page to use: clicks and scrolling pass the frame by. */
+.oc-live-frame--static > :is(iframe, video, img, object, .oc-live-frame__content) { pointer-events: none; }
+
 /* parts/media-message-thread.css */
 /* File: packages/ui/src/parts/media-message-thread.css | Map: frame (grid: header / messages / composer) -> header (title, meta,
    people, status, actions) -> wallpaper (masked doodles in a token color) -> scroll area (starts at the bottom)
@@ -9459,6 +9781,104 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   .oc-media-thumb:hover > :is(img, video, .oc-media-art) { transform: scale(1.04); }
 }
 
+/* parts/media-watermark.css */
+/* File: packages/ui/src/parts/media-watermark.css
+   Map: overlay (click-through, sized to its box) -> text -> straight -> tiled -> corner stamp -> tones -> print
+   Watermark: a light layer with large slanted text ("CONCEPT", "DRAFT", "SAMPLE") over an image, a card or a live
+   frame. Put .oc-watermark as the last child of a positioned box (the utility .relative, or any position) with the
+   text in a <span>. Clicks go through to what is underneath (pointer-events: none). The text scales with the box
+   (container query units). Tokens: --oc-watermark-color, -opacity, -angle, -size. Omnia tokens only. */
+
+.oc-watermark {
+  --oc-watermark-color: var(--oc-foreground);
+  --oc-watermark-opacity: 0.12;
+  --oc-watermark-angle: -18deg;
+  --oc-watermark-size: clamp(1.75rem, 14cqi, 12rem);
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  container-type: size;
+  border-radius: inherit;
+  pointer-events: none;
+  user-select: none;
+}
+.oc-watermark > span {
+  rotate: var(--oc-watermark-angle);
+  color: oklch(from var(--oc-watermark-color) l c h / var(--oc-watermark-opacity));
+  font-size: var(--oc-watermark-size);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+/* A logo (<img>, or an inline <svg> logo) or an icon (inline <svg> with currentColor) instead of, or next to, text.
+   An <img> keeps its own colors at the watermark opacity; --mono turns it into a flat gray stamp. An inline <svg>
+   takes the watermark color, like the text. Size: --oc-watermark-mark (default 40% of the box width). */
+.oc-watermark > :is(img, svg) {
+  inline-size: var(--oc-watermark-mark, 40cqi);
+  max-block-size: 70cqb;
+  block-size: auto;
+  rotate: var(--oc-watermark-angle);
+}
+.oc-watermark > img { opacity: calc(var(--oc-watermark-opacity) * 1.5); }
+.oc-watermark > svg { color: oklch(from var(--oc-watermark-color) l c h / var(--oc-watermark-opacity)); }
+.oc-watermark--mono > img { filter: grayscale(1) contrast(0.6); }
+/* Logo or icon above a word: wrap both in one <span class="oc-watermark__stack">. */
+.oc-watermark__stack { display: grid; justify-items: center; gap: 0.3em; }
+.oc-watermark__stack > :is(img, svg) { inline-size: 0.9em; block-size: auto; }
+.oc-watermark__stack > img { opacity: calc(var(--oc-watermark-opacity) * 1.5); }
+
+/* Horizontal text instead of slanted. */
+.oc-watermark--straight { --oc-watermark-angle: 0deg; }
+
+/* Tiled: repeat the text in several spans; they fill the box in a slanted grid (for proofs and previews). */
+.oc-watermark--tile {
+  --oc-watermark-size: clamp(0.9rem, 4.5cqi, 2.25rem);
+  /* Columns in rem: container units here would measure the parent of the box, not the box. */
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  align-content: space-evenly;
+  inset: -25%;
+  rotate: var(--oc-watermark-angle);
+}
+.oc-watermark--tile > :is(span, img, svg) { rotate: none; justify-self: center; }
+.oc-watermark--tile > span { letter-spacing: 0.15em; }
+.oc-watermark--tile > :is(img, svg) { inline-size: 2.5rem; }
+/* Logos and icons are narrower than words: narrower columns, so the whole box fills up. */
+.oc-watermark--tile:has(> :is(img, svg)) { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); }
+
+/* A small stamp in a corner instead of across the middle: --corner (bottom right) or --corner-top (top right).
+   Two classes, so a tone (--primary …) changes its color but not its readable opacity. */
+.oc-watermark:is(.oc-watermark--corner, .oc-watermark--corner-top) {
+  --oc-watermark-angle: 0deg;
+  --oc-watermark-size: 0.75rem;
+  --oc-watermark-opacity: 0.75;
+  place-items: end;
+  padding: 0.75rem;
+}
+.oc-watermark--corner-top { place-items: start end; }
+.oc-watermark:is(.oc-watermark--corner, .oc-watermark--corner-top) > span {
+  padding: 0.25rem 0.6rem;
+  border: 1px solid oklch(from var(--oc-watermark-color) l c h / 0.35);
+  border-radius: var(--oc-radius, 0.375rem);
+  background: oklch(from var(--oc-background) l c h / 0.7);
+  letter-spacing: 0.12em;
+}
+
+/* Tones: light text for dark images, the brand color, or red for "not for use". */
+.oc-watermark--light { --oc-watermark-color: var(--color-white-100); --oc-watermark-opacity: 0.22; }
+.oc-watermark--primary { --oc-watermark-color: var(--oc-primary); --oc-watermark-opacity: 0.16; }
+.oc-watermark--destructive { --oc-watermark-color: var(--oc-destructive); --oc-watermark-opacity: 0.2; }
+
+/* Printed proofs keep the watermark, a little stronger so it survives the printer. */
+@media print {
+  .oc-watermark { --oc-watermark-opacity: 0.2; print-color-adjust: exact; }
+}
+
 /* parts/site-fact-list.css */
 /* File: packages/ui/src/parts/site-fact-list.css
    Map: plain -> compact -> stacked -> accent values -> narrow screens
@@ -9522,6 +9942,62 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   .oc-link-arrow::before { transition: none; }
 }
 
+/* parts/site-link-row.css */
+/* File: packages/ui/src/parts/site-link-row.css
+   Map: row (wraps) -> link -> external icon (http links) -> GitHub mark (github.com links) -> tones -> sizes
+   Link row: a row of links under a feature or product card ("Marketplace", "Source", "Docs"). Links to another site get
+   an "opens elsewhere" arrow by themselves, links to github.com the GitHub mark instead; links on your own site get
+   no icon. The icons are CSS masks in the text color, so they follow the tone and light/dark mode. */
+
+.oc-link-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 1rem;
+  margin: 0.9rem 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.9rem;
+}
+.oc-link-row a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border-radius: 4px;
+  color: var(--oc-primary);
+  font-weight: 600;
+  text-decoration: none;
+}
+.oc-link-row a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
+.oc-link-row a:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 3px; }
+
+/* Icons: one mask per kind, filled with the text color. */
+.oc-link-row a:is([href^="http://"], [href^="https://"])::after,
+.oc-link-row a[href*="github.com"]::before {
+  content: "";
+  flex: none;
+  inline-size: 0.9em;
+  aspect-ratio: 1;
+  background: currentColor;
+  mask: var(--oc-link-row-icon) center / contain no-repeat;
+}
+.oc-link-row a:is([href^="http://"], [href^="https://"])::after {
+  --oc-link-row-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
+}
+.oc-link-row a[href*="github.com"]::before {
+  --oc-link-row-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.05-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.77 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.83 1.19 3.09 0 4.42-2.7 5.39-5.26 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5Z'/%3E%3C/svg%3E");
+}
+/* A GitHub link shows the GitHub mark instead of the arrow. */
+.oc-link-row a[href*="github.com"]::after { content: none; }
+
+/* Tones: the element's accent (with an .oc-accent--* class), or muted text that brightens on hover. */
+.oc-link-row--accent a { color: light-dark(var(--oc-accent-from, var(--oc-primary)), oklch(from var(--oc-accent-from, var(--oc-primary)) max(l, 0.72) c h)); }
+.oc-link-row--muted a { color: var(--oc-muted-foreground); font-weight: 500; }
+.oc-link-row--muted a:hover { color: var(--oc-foreground); }
+
+/* Sizes */
+.oc-link-row--sm { font-size: 0.8rem; gap: 0.3rem 0.8rem; }
+.oc-link-row--lg { font-size: 1rem; }
+
 /* parts/site-marquee.css */
 /* File: packages/ui/src/parts/site-marquee.css
    Map: pause on focus -> direction / speed modifiers -> plain items -> no fade -> reduced motion
@@ -10033,6 +10509,18 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 .oc-prose--lg { font-size: 1.125rem; line-height: 1.75; }
 .oc-prose--full { max-inline-size: none; }
 
+/* Compact: help text and about pages in a widget, side panel or popover. Smaller text, tighter rhythm and headings,
+   full width of the panel. */
+.oc-prose--compact { max-inline-size: none; font-size: 0.8125rem; line-height: 1.5; }
+.oc-prose--compact :where(* + *) { margin-block-start: 0.7em; }
+.oc-prose--compact :where(h1) { font-size: 1.45em; }
+.oc-prose--compact :where(h2) { margin-block-start: 1.4em; font-size: 1.15em; }
+.oc-prose--compact :where(h3) { margin-block-start: 1.2em; font-size: 1.05em; }
+.oc-prose--compact :where(h4) { margin-block-start: 1em; }
+.oc-prose--compact :where(h1, h2, h3, h4) + :where(*) { margin-block-start: 0.35em; }
+.oc-prose--compact :where(.oc-prose-lead) { font-size: 1.08em; }
+.oc-prose--compact > :where(:first-child) { margin-block-start: 0; }
+
 @media (prefers-reduced-motion: reduce) {
   .oc-prose :where(a) { transition: none; }
 }