@birdycom/omniaui 0.12.1 → 0.12.3

package/dist/data-table.js

@@ -497,8 +497,17 @@ export function initDataTables(scope = document) {
   scope.querySelectorAll(".oc-data-table").forEach((root) => bindDataTable(root));
 }
 
-// The docs site loads this file as /js/oc-data-table.js. A wrapper import must not scan the page.
-if (typeof document !== "undefined" && String(import.meta.url).includes("oc-data-table")) {
+// Starts on its own when loaded straight from a <script type="module"> tag: as /js/oc-data-table.js (the docs site,
+// `npx omniaui copy-js`), with ?auto in the URL, or with data-oc-auto on the tag. An import from a bundler or a
+// wrapper does not scan the page: call the init function yourself there.
+function autoStart() {
+  if (typeof document === "undefined") return false;
+  const url = String(import.meta.url);
+  if (url.includes("oc-data-table") || /[?&]auto(=|&|$)/.test(url)) return true;
+  const file = url.split(/[?#]/)[0];
+  return [...document.querySelectorAll("script[data-oc-auto][src]")].some((s) => s.src.split(/[?#]/)[0] === file);
+}
+if (autoStart()) {
   const boot = () => initDataTables(document);
   if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
   else boot();

package/dist/oc-theme.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 {

package/dist/parts/app-status-dot.css

@@ -0,0 +1,50 @@
+/* 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; }
+}

package/dist/parts/app-titlebar.css

@@ -0,0 +1,96 @@
+/* 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; }
+}

package/dist/parts/media-glass.css

@@ -0,0 +1,71 @@
+/* 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; }
+}

package/dist/parts/media-live-frame.css

@@ -0,0 +1,38 @@
+/* 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; }

package/dist/parts/media-watermark.css

@@ -0,0 +1,96 @@
+/* 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; }
+}

package/dist/parts/site-link-row.css

@@ -0,0 +1,54 @@
+/* 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; }

package/dist/parts/site-prose.css

@@ -119,6 +119,18 @@
 .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; }
 }

package/manifest.json

@@ -1111,6 +1111,54 @@
       "requires": [
         "@birdycom/omniaui"
       ]
+    },
+    {
+      "name": "watermark",
+      "file": "snippets/watermark.html",
+      "description": "Light slanted text such as CONCEPT or DRAFT over an image, a card or a live frame",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "live-frame",
+      "file": "snippets/live-frame.html",
+      "description": "A live page at a virtual size such as 1280x720, scaled down to the frame width without JavaScript",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "link-row",
+      "file": "snippets/link-row.html",
+      "description": "A row of links under a feature card, with an external icon and the GitHub mark by themselves",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "glass",
+      "file": "snippets/glass.html",
+      "description": "See-through glass sheet and panels with a light top edge, for widgets and panels over a photo, a gradient or the desktop",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "status-dot",
+      "file": "snippets/status-dot.html",
+      "description": "A small live state light for a job, agent, sync or server, with the state in text next to it",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "titlebar",
+      "file": "snippets/titlebar.html",
+      "description": "Draggable title bar for a frameless desktop window or widget, with a hairline once the body scrolls",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui",
-  "version": "0.12.1",
+  "version": "0.12.3",
   "description": "OmniaUI components: CSS-first UI built on native HTML (dialog, popover, details) with light-dark() theming — no JavaScript required. Includes the omniaui CLI (add/list).",
   "type": "module",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "omniaui": "./bin/omniaui.mjs"
   },
   "peerDependencies": {
-    "@birdycom/omniacss": "^0.12.1"
+    "@birdycom/omniacss": "^0.12.3"
   },
   "peerDependenciesMeta": {
     "@birdycom/omniacss": {

package/snippets/glass.html

@@ -0,0 +1,24 @@
+<!-- OmniaUI component: glass - See-through glass sheet and panels with a light top edge, for widgets and panels over a photo, a gradient or the desktop. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/glass.html | Map: div.oc-glass (sheet) -> content -> div.oc-glass-panel (layer) / .oc-card (becomes a glass panel)
+     Class API (modifiers are extra classes on the same element):
+       .oc-glass: the outer sheet (see-through, blurred background, light top edge, soft shadow); .oc-card inside turns into a glass panel
+       .oc-glass-panel: a lighter layer inside a sheet; .oc-glass-divider: hairline
+       Modifiers: --strong (more opaque), --flat (desktop window where the OS draws the blur: no own blur, no shadow)
+       Tokens: --oc-glass-sheet, -panel, -panel-strong, -edge, -edge-hi, -hairline, -shadow, -panel-shadow, -blur, -radius, -panel-radius
+       Solid surfaces with prefers-reduced-transparency: reduce.
+     Needs something behind it to show through: a photo, a gradient, or a transparent window (Electron, Tauri).
+-->
+<div class="oc-glass p-1 grid gap-0.7" style="max-inline-size: 24rem">
+  <div class="flex align-items-center justify-between gap-0.5">
+    <strong>Usage today</strong>
+    <span class="oc-badge oc-badge--outline">Pro plan</span>
+  </div>
+  <div class="oc-glass-panel p-0.7 grid gap-0.5">
+    <div class="flex justify-between font-0.8"><span>Session</span><span class="font-num-tabular">34%</span></div>
+    <div class="oc-progress oc-progress--sm oc-progress--glow" role="progressbar" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100" aria-label="Session usage">
+      <span class="oc-progress-bar" style="width: 34%"></span>
+    </div>
+  </div>
+  <hr class="oc-glass-divider">
+  <p class="m-0 font-0.8" style="color: var(--oc-muted-foreground)">Resets at 18:00.</p>
+</div>

package/snippets/link-row.html

@@ -0,0 +1,14 @@
+<!-- OmniaUI component: link-row - A row of links under a feature card, with an external icon and the GitHub mark by themselves. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/link-row.html | Map: ul.oc-link-row -> li > a (own site: no icon; other site: arrow; github.com: mark)
+     Class API (modifiers are extra classes on the same element):
+       .oc-link-row: wrapping row of links, primary color
+       Icons: by the href (http(s) links: arrow; github.com: GitHub mark; relative links: none)
+       Modifiers: --accent (element accent, with .oc-accent--*), --muted, --sm, --lg
+     Slots: the list items
+-->
+<ul class="oc-link-row">
+  <li><a href="/docs/editor">How it works</a></li>
+  <li><a href="https://marketplace.visualstudio.com/items?itemName=Birdycom.omniacss-intellisense" rel="noopener">VS Code Marketplace</a></li>
+  <li><a href="https://open-vsx.org/extension/Birdycom/omniacss-intellisense" rel="noopener">Open VSX</a></li>
+  <li><a href="https://github.com/Birdycom/OmniaCSS" rel="noopener">Source</a></li>
+</ul>

package/snippets/live-frame.html

@@ -0,0 +1,20 @@
+<!-- OmniaUI component: live-frame - A live page at a virtual size such as 1280x720, scaled down to the frame width without JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/live-frame.html | Map: browser frame with a live view -> a live frame on its own (static, other size)
+     Class API (modifiers are extra classes on the same element):
+       .oc-live-frame: box with the ratio of the virtual size; its iframe / video / img / .oc-live-frame__content is laid out
+         at that size and scaled to the box width (pure CSS: tan(atan2(100cqi, width)))
+       Modifiers: --static (clicks and scrolling pass through: a picture of a page)
+       Tokens: --oc-live-w, --oc-live-h (unitless px, default 1280 x 720)
+       Also on .oc-browser-frame__view, the view slot of the browser frame.
+     Slots: the iframe (or other content). Give the iframe a title; scrolling="no" hides its scrollbar.
+-->
+<div class="oc-browser-frame">
+  <div class="oc-browser-frame__bar"><i></i><i></i><i></i><span class="oc-browser-frame__address">omniaui.eu</span></div>
+  <div class="oc-browser-frame__view oc-live-frame">
+    <iframe src="https://omniaui.eu/" title="OmniaUI home page" loading="lazy" scrolling="no"></iframe>
+  </div>
+</div>
+
+<div class="oc-live-frame oc-live-frame--static" style="--oc-live-w: 1680; --oc-live-h: 1400">
+  <iframe src="https://omniacss.eu/" title="OmniaCSS home page" loading="lazy" scrolling="no" tabindex="-1"></iframe>
+</div>

package/snippets/status-dot.html

@@ -0,0 +1,15 @@
+<!-- OmniaUI component: status-dot - A small live state light for a job, agent, sync or server, with the state in text next to it. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/status-dot.html | Map: p.oc-status -> span.oc-status-dot--{tone} + span.oc-status__text (+ span.oc-status__meta)
+     Class API (modifiers are extra classes on the same element):
+       .oc-status-dot: 8 px dot with a soft ring in the tone color
+       Tones: --working (primary, pulses), --waiting (warning), --done (success), --error (destructive), --idle (muted); none = muted
+       Sizes: --sm, --lg
+       .oc-status: dot + one line of text that cuts off with …; .oc-status__text, .oc-status__meta (right, tabular numbers)
+       Token: --oc-status-dot-color (any color)
+     The dot is decoration (aria-hidden): the text says the state. A dot without text needs role="img" and an aria-label.
+-->
+<p class="oc-status"><span class="oc-status-dot oc-status-dot--working" aria-hidden="true"></span><span class="oc-status__text">Working · Reading src/styles/theme.css</span><span class="oc-status__meta">2:14</span></p>
+<p class="oc-status"><span class="oc-status-dot oc-status-dot--waiting" aria-hidden="true"></span><span class="oc-status__text">Waiting for your answer</span></p>
+<p class="oc-status"><span class="oc-status-dot oc-status-dot--done" aria-hidden="true"></span><span class="oc-status__text">Done · 3 files changed</span><span class="oc-status__meta">12 min</span></p>
+<p class="oc-status"><span class="oc-status-dot oc-status-dot--error" aria-hidden="true"></span><span class="oc-status__text">Stopped: the build failed</span></p>
+<p class="oc-status"><span class="oc-status-dot oc-status-dot--idle" aria-hidden="true"></span><span class="oc-status__text">Idle</span></p>

package/snippets/titlebar.html

@@ -0,0 +1,29 @@
+<!-- OmniaUI component: titlebar - Draggable title bar for a frameless desktop window or widget, with a hairline once the body scrolls. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/titlebar.html | Map: div.oc-titlebar-window -> header.oc-titlebar (main: icon, title, subtitle | actions: buttons) -> div.oc-titlebar-body
+     Class API (modifiers are extra classes on the same element):
+       .oc-titlebar-window: column that shares the scroll timeline between bar and body
+       .oc-titlebar: the bar; app-region: drag (Electron, Tauri move the window by it), buttons and fields stay clickable
+       .oc-titlebar__main / __icon / __title / __subtitle (· before it, cuts off with …) / __actions
+       .oc-titlebar__btn: compact icon button; --close turns red on hover
+       .oc-titlebar-body: the part that scrolls; the bar gets a hairline once it scrolls (scroll-driven, no JavaScript)
+       Modifiers: --bordered (hairline always), --sm
+     Icon buttons need an aria-label. Inside a .oc-glass sheet the bar uses the glass hairline and surfaces.
+-->
+<div class="oc-titlebar-window" style="block-size: 16rem">
+  <header class="oc-titlebar">
+    <div class="oc-titlebar__main">
+      <span class="oc-titlebar__title">TokenTally</span>
+      <span class="oc-titlebar__subtitle">Usage</span>
+    </div>
+    <div class="oc-titlebar__actions">
+      <button type="button" class="oc-titlebar__btn" aria-label="Refresh"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.64-6.36L21 8"/><path d="M21 3v5h-5"/></svg></button>
+      <button type="button" class="oc-titlebar__btn" aria-label="Settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg></button>
+      <button type="button" class="oc-titlebar__btn oc-titlebar__btn--close" aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
+    </div>
+  </header>
+  <div class="oc-titlebar-body p-1">
+    <p>Scroll this area: the bar gets a hairline.</p>
+    <p>Drag the bar to move a frameless Electron or Tauri window; the buttons stay clickable.</p>
+    <p>Line 3</p><p>Line 4</p><p>Line 5</p><p>Line 6</p><p>Line 7</p><p>Line 8</p>
+  </div>
+</div>