@birdycom/omniaui 0.12.2 → 0.12.4

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.2. Do not edit. */
+/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.4. 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/site-price-card.css

@@ -1,7 +1,7 @@
 /* File: packages/ui/src/parts/site-price-card.css
-   Map: card -> head + discount badge -> period toggle -> monthly / yearly price (:has) -> features -> featured
-   Price card: one plan with a monthly / yearly switch (radio inputs + :has(), no JavaScript).
-   The toggle is the segmented component; give every card its own radio name. */
+   Map: card -> head + discount badge -> period toggle -> monthly / yearly / lifetime price (:has) -> features -> featured
+   Price card: one plan with a monthly / yearly switch, optionally a third "lifetime" option (radio inputs + :has(),
+   no JavaScript). The toggle is the segmented component; give every card its own radio name. */
 
 .oc-price-card {
   display: flex;
@@ -31,9 +31,12 @@
 }
 .oc-price-card:has(.oc-price-card__toggle input[value="monthly"]:checked) .oc-price-card__discount { opacity: 0.55; }
 
-.oc-price-card__toggle { align-self: flex-start; }
+.oc-price-card__toggle { align-self: flex-start; max-inline-size: 100%; }
+/* Three options (monthly / yearly / lifetime) take the full card width, in equal parts, so they fit a narrow card. */
+.oc-price-card__toggle:has(> :nth-child(3)) { align-self: stretch; }
+.oc-price-card__toggle:has(> :nth-child(3)) .oc-segmented-item { flex: 1; min-inline-size: 0; padding-inline: 0.25rem; letter-spacing: 0; text-align: center; }
 
-/* Price rows: monthly shows by default, yearly when its radio is checked. */
+/* Price rows: monthly shows by default, yearly or lifetime when its radio is checked. */
 .oc-price-card__price {
   display: flex;
   flex-wrap: wrap;
@@ -41,9 +44,12 @@
   gap: 0.35rem;
   margin: 0;
 }
-.oc-price-card__price--yearly { display: none; }
-.oc-price-card:has(.oc-price-card__toggle input[value="yearly"]:checked) .oc-price-card__price--yearly { display: flex; }
-.oc-price-card:has(.oc-price-card__toggle input[value="yearly"]:checked) .oc-price-card__price--monthly { display: none; }
+.oc-price-card__price--yearly,
+.oc-price-card__price--lifetime { display: none; }
+.oc-price-card:has(.oc-price-card__toggle input[value="yearly"]:checked) .oc-price-card__price--yearly,
+.oc-price-card:has(.oc-price-card__toggle input[value="lifetime"]:checked) .oc-price-card__price--lifetime { display: flex; }
+.oc-price-card:has(.oc-price-card__toggle input:is([value="yearly"], [value="lifetime"]):checked) .oc-price-card__price--monthly,
+.oc-price-card:has(.oc-price-card__toggle input[value="lifetime"]:checked) .oc-price-card__price--yearly { display: none; }
 
 .oc-price-card__amount { font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
 .oc-price-card__period { color: var(--oc-muted-foreground); font-size: 0.9rem; }

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

@@ -1135,6 +1135,30 @@
       "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.2",
+  "version": "0.12.4",
   "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.2"
+    "@birdycom/omniacss": "^0.12.4"
   },
   "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/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>