@birdycom/omniaui 0.0.0-stage → 0.11.0

package/dist/parts/app-table-actions.css

@@ -0,0 +1,71 @@
+/* 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.
+   Builds on the existing cell <td class="oc-table-actions"> from the table component.
+   The overflow menu is a native popover (.oc-dropdown-menu[popover]); no JavaScript needed. */
+
+/* Icon mode: tighter gap between the square icon buttons. */
+.oc-table-actions--icons > * + * { margin-inline-start: 0.125rem; }
+
+/* One square icon action (link or button). Needs aria-label (and title for a tooltip). */
+.oc-table-actions-icon {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  padding: 0;
+  font: inherit;
+  color: var(--oc-muted-foreground);
+  background: none;
+  border: 1px solid transparent;
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+  text-decoration: none;
+  vertical-align: middle;
+  transition: color var(--oc-transition-fast), background var(--oc-transition-fast), border-color var(--oc-transition-fast);
+}
+.oc-table-actions-icon svg { inline-size: 1rem; block-size: 1rem; }
+.oc-table-actions-icon:hover { color: var(--oc-foreground); background: var(--oc-accent); border-color: var(--oc-border); }
+.oc-table-actions-icon:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-table-actions-icon:disabled,
+.oc-table-actions-icon[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
+
+/* Tone modifiers: the hover tint shows what the action does. */
+.oc-table-actions-icon--primary:hover { color: var(--oc-primary); background: oklch(from var(--oc-primary) l c h / 0.1); }
+.oc-table-actions-icon--success:hover { color: var(--oc-success); background: oklch(from var(--oc-success) l c h / 0.1); }
+.oc-table-actions-icon--destructive { color: var(--oc-destructive); }
+.oc-table-actions-icon--destructive:hover { color: var(--oc-destructive); background: oklch(from var(--oc-destructive) l c h / 0.1); }
+
+/* Overflow trigger ("more" button, three dots drawn with CSS). Use popovertarget="<menu id>". */
+.oc-table-actions-more {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  padding: 0;
+  color: var(--oc-muted-foreground);
+  background: none;
+  border: 1px solid transparent;
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+}
+/* Three dots: one dot plus two box-shadow copies, all in currentColor. */
+.oc-table-actions-more::before {
+  content: "";
+  inline-size: 0.2rem;
+  block-size: 0.2rem;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: -0.35rem 0 0 currentColor, 0.35rem 0 0 currentColor;
+}
+.oc-table-actions-more:hover { color: var(--oc-foreground); background: var(--oc-accent); }
+.oc-table-actions-more:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+/* While its menu is open the trigger stays highlighted (:has on the cell, popover is a sibling). */
+.oc-table-actions:has(.oc-dropdown-menu:popover-open) .oc-table-actions-more { color: var(--oc-foreground); background: var(--oc-accent); border-color: var(--oc-border); }
+
+/* The menu opens to the left side of the trigger, because the actions column sits at the row end. */
+.oc-table-actions .oc-dropdown-menu[popover] { position-area: block-end span-inline-start; min-inline-size: 11rem; text-align: start; }
+.oc-table-actions .oc-dropdown-item svg { inline-size: 1rem; block-size: 1rem; flex-shrink: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-table-actions-icon { transition: none; }
+}

package/dist/parts/app-table-compact.css

@@ -0,0 +1,54 @@
+/* File: packages/ui/src/parts/app-table-compact.css | Map: wrapper (scroll, inside a card) -> header cells -> body cells (compact + striped) -> footer total -> modifiers (bordered, plain) */
+/* Table compact: a small striped table for inside cards and side panels.
+   Wrap a normal <table class="oc-table"> in <div class="oc-table-compact">. The wrapper removes the
+   outer cell borders (the card gives the frame), shrinks padding and font, and stripes the rows.
+   Numbers: data-numeric on th / td (right aligned, tabular figures; from the table component). */
+
+.oc-table-compact { inline-size: 100%; overflow-x: auto; }
+.oc-table-compact > .oc-table { font-size: 0.8125rem; border-collapse: collapse; }
+
+/* Cells: compact padding, only horizontal lines between rows. */
+.oc-table-compact > .oc-table :is(th, td) {
+  padding: 0.3rem 0.625rem;
+  border: 0;
+  border-block-end: 1px solid var(--oc-border);
+  white-space: nowrap;
+}
+.oc-table-compact > .oc-table :is(th, td):first-child { padding-inline-start: 0.75rem; }
+.oc-table-compact > .oc-table :is(th, td):last-child { padding-inline-end: 0.75rem; }
+/* Long text columns may wrap: add data-wrap to the cell. */
+.oc-table-compact > .oc-table :is(th, td)[data-wrap] { white-space: normal; }
+
+/* Header: small muted labels on a quiet background. */
+.oc-table-compact > .oc-table thead th {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-surface);
+  border-block-end-width: 1px;
+}
+
+/* Stripes on every second body row; hover stays the table default. */
+.oc-table-compact > .oc-table tbody tr:nth-child(even) { background: var(--oc-surface); }
+.oc-table-compact > .oc-table tbody tr:last-child > td { border-block-end: 0; }
+
+/* Footer row (total): bold, with a stronger line above it. */
+.oc-table-compact > .oc-table tfoot :is(th, td) {
+  font-weight: 600;
+  color: var(--oc-foreground);
+  background: none;
+  border-block-start: 2px solid var(--oc-border);
+  border-block-end: 0;
+}
+
+/* Muted secondary text inside a cell ("per unit", sub line). */
+.oc-table-compact-muted { color: var(--oc-muted-foreground); }
+
+/* Bordered: own rounded frame (when the table is not inside a card). */
+.oc-table-compact--bordered { border: 1px solid var(--oc-border); border-radius: var(--oc-radius); background: var(--oc-card); }
+
+/* Plain: no stripes, no header background (very dense lists). */
+.oc-table-compact--plain > .oc-table tbody tr:nth-child(even),
+.oc-table-compact--plain > .oc-table thead th { background: none; }

package/dist/parts/app-top-progress.css

@@ -0,0 +1,68 @@
+/* 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.
+   <progress class="oc-top-progress"> without value = indeterminate (sliding glow);
+   with value="40" max="100" = determinate. Hide it with the hidden attribute or .is-done (fades out). */
+
+.oc-top-progress {
+  --oc-top-progress-color: var(--oc-primary);
+  --oc-top-progress-height: 3px;
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: 1000;
+  display: block;
+  inline-size: 100%;
+  block-size: var(--oc-top-progress-height);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  color: var(--oc-top-progress-color);
+  background: transparent;
+  pointer-events: none;
+  transition: opacity var(--oc-transition-normal);
+}
+
+/* Determinate value: the filled part, with a soft glow at its end. */
+.oc-top-progress::-webkit-progress-bar { background: transparent; }
+.oc-top-progress::-webkit-progress-value {
+  background: var(--oc-top-progress-color);
+  box-shadow: 0 0 8px var(--oc-top-progress-color);
+  transition: inline-size var(--oc-transition-normal);
+}
+.oc-top-progress::-moz-progress-bar { background: var(--oc-top-progress-color); box-shadow: 0 0 8px var(--oc-top-progress-color); }
+
+/* Indeterminate (no value): a segment slides from start to end, again and again. */
+.oc-top-progress:indeterminate {
+  background: linear-gradient(90deg, transparent, var(--oc-top-progress-color) 30% 70%, transparent) no-repeat;
+  background-size: 35% 100%;
+  animation: oc-top-progress-slide 1.2s ease-in-out infinite;
+}
+.oc-top-progress:indeterminate::-webkit-progress-bar { background: transparent; }
+.oc-top-progress:indeterminate::-moz-progress-bar { background: transparent; box-shadow: none; }
+@keyframes oc-top-progress-slide {
+  from { background-position: -40% 0; }
+  to { background-position: 140% 0; }
+}
+
+/* Color modifiers (theme tokens). */
+.oc-top-progress--success { --oc-top-progress-color: var(--oc-success); }
+.oc-top-progress--warning { --oc-top-progress-color: var(--oc-warning); }
+.oc-top-progress--danger { --oc-top-progress-color: var(--oc-destructive); }
+.oc-top-progress--brand { --oc-top-progress-color: var(--oc-brand-1); }
+
+/* Thicker bar. */
+.oc-top-progress--lg { --oc-top-progress-height: 4px; }
+
+/* Static: stays in the normal flow (inside a card, header or demo) instead of fixed to the window. */
+.oc-top-progress--static { position: relative; inset: auto; z-index: auto; background-color: var(--oc-surface-strong); }
+
+/* Done: fades out, then the app can remove it or set hidden. */
+.oc-top-progress.is-done { opacity: 0; }
+.oc-top-progress[hidden] { display: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-top-progress:indeterminate { animation-duration: 3s; }
+  .oc-top-progress,
+  .oc-top-progress::-webkit-progress-value { transition: none; }
+}

package/dist/parts/app-tree.css

@@ -0,0 +1,104 @@
+/* File: packages/ui/src/parts/app-tree.css | Map: wrapper (scroll box) -> head row -> lists + indent -> row -> chevron (details) -> label + icon -> sticky actions -> states -> sticky modifier */
+/* Tree: nested list of folders (<details>) and leaves. Names may scroll horizontally;
+   the action column (.oc-tree-actions) stays pinned to the end edge with position: sticky.
+   Open / close is native <details>; no JavaScript. Selected row: aria-current="true" or .is-selected. */
+
+/* Scroll box around the whole tree. Card look by default. */
+.oc-tree {
+  --oc-tree-row: 2rem;
+  --oc-tree-indent: 1rem;
+  --oc-tree-bg: var(--oc-card);
+  overflow: auto;
+  max-block-size: var(--oc-tree-height, none);
+  font-size: 0.875rem;
+  color: var(--oc-foreground);
+  background: var(--oc-tree-bg);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+}
+
+/* Optional head row (root of the tree, e.g. "All projects"). Sticks to the top while scrolling. */
+.oc-tree-head {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 2;
+  font-weight: 600;
+  background: var(--oc-tree-bg);
+  border-block-end: 1px solid var(--oc-border);
+}
+
+/* Lists: no bullets; each nested list moves one indent step inward. */
+.oc-tree-list { margin: 0; padding: 0.25rem 0; list-style: none; min-inline-size: max-content; }
+.oc-tree-list .oc-tree-list { padding-block: 0; padding-inline-start: var(--oc-tree-indent); }
+
+/* One row: chevron + icon + label, then the actions. Works on <summary>, <div>, <a> or <button>. */
+.oc-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-block-size: var(--oc-tree-row);
+  padding-inline: 0.5rem 0;
+  color: inherit;
+  text-decoration: none;
+  list-style: none;
+}
+summary.oc-tree-row { cursor: pointer; }
+.oc-tree-row::-webkit-details-marker { display: none; }
+.oc-tree-row:hover { background: var(--oc-accent); }
+.oc-tree-row:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+
+/* Chevron: drawn with borders. Folders rotate it when open; leaves keep an empty spacer. */
+.oc-tree-row::before {
+  content: "";
+  flex-shrink: 0;
+  inline-size: 0.4rem;
+  block-size: 0.4rem;
+  margin-inline: 0.2rem 0.35rem;
+  border-inline-end: 1.5px solid currentColor;
+  border-block-end: 1.5px solid currentColor;
+  color: var(--oc-muted-foreground);
+  rotate: -45deg;
+  transition: rotate var(--oc-transition-fast);
+}
+.oc-tree-node[open] > .oc-tree-row::before { rotate: 45deg; }
+.oc-tree-row:not(summary)::before { visibility: hidden; }
+
+/* Icon and label. The label never wraps; long names make the box scroll sideways. */
+.oc-tree-icon { display: inline-flex; flex-shrink: 0; color: var(--oc-muted-foreground); }
+.oc-tree-icon svg { inline-size: 1rem; block-size: 1rem; }
+.oc-tree-label { flex: 1 0 auto; white-space: nowrap; padding-inline-end: 0.75rem; color: inherit; text-decoration: none; }
+/* A leaf row is a div; its label may be a link (no buttons inside links). */
+a.oc-tree-label:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; border-radius: 2px; }
+.oc-tree-count { margin-inline-end: 0.5rem; font-size: 0.75rem; color: var(--oc-muted-foreground); font-variant-numeric: tabular-nums; }
+
+/* Actions: pinned to the end edge, with the row background behind it so names slide underneath. */
+.oc-tree-actions {
+  position: sticky;
+  inset-inline-end: 0;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  margin-inline-start: auto;
+  padding-inline: 0.5rem 0.375rem;
+  background: var(--oc-tree-bg);
+  box-shadow: -0.75rem 0 0.75rem -0.75rem oklch(from var(--color-black-60) l c h / 0.25);
+}
+.oc-tree-row:hover > .oc-tree-actions { background: linear-gradient(var(--oc-accent), var(--oc-accent)), var(--oc-tree-bg); }
+/* Hide actions until hover or focus (optional): .oc-tree--quiet */
+.oc-tree--quiet .oc-tree-actions { opacity: 0; }
+.oc-tree--quiet .oc-tree-row:is(:hover, :focus-within) > .oc-tree-actions { opacity: 1; }
+
+/* Selected row: tinted with the primary token. */
+.oc-tree-row:is([aria-current="true"], .is-selected, :has(> .oc-tree-label[aria-current="true"])) { color: var(--oc-primary); font-weight: 500; background: oklch(from var(--oc-primary) l c h / 0.1); }
+.oc-tree-row:is([aria-current="true"], .is-selected, :has(> .oc-tree-label[aria-current="true"])) > .oc-tree-actions { background: linear-gradient(oklch(from var(--oc-primary) l c h / 0.1), oklch(from var(--oc-primary) l c h / 0.1)), var(--oc-tree-bg); }
+/* Muted row (archived, empty folder). */
+.oc-tree-row.is-muted { color: var(--oc-muted-foreground); }
+
+/* Flush: no frame, for use inside a card or sidebar. */
+.oc-tree--flush { border: 0; border-radius: 0; --oc-tree-bg: transparent; }
+.oc-tree--flush .oc-tree-actions { background: var(--oc-card); }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-tree-row::before { transition: none; }
+}

package/dist/parts/app-upgrade-banner.css

@@ -0,0 +1,90 @@
+/* File: packages/ui/src/parts/app-upgrade-banner.css | Map: callout -> icon -> body (title + plan badge, text) -> usage meter -> actions + dismiss -> modifiers (premium, compact) */
+/* Upgrade banner: soft callout for a free plan with limits ("3 of 5 projects used - upgrade").
+   Usage is a native <meter> element. Tone follows --oc-upgrade-color (warning by default). */
+
+.oc-upgrade-banner {
+  --oc-upgrade-color: var(--oc-warning);
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 0.75rem 1rem;
+  padding: 1rem 1.25rem;
+  font-size: 0.875rem;
+  color: var(--oc-foreground);
+  background: color-mix(in oklch, var(--oc-upgrade-color) 8%, var(--oc-card));
+  border: 1px solid oklch(from var(--oc-upgrade-color) l c h / 0.35);
+  border-radius: calc(var(--oc-radius) + 4px);
+}
+
+/* Icon (sparkle, crown, lock) in the tone color. */
+.oc-upgrade-banner-icon { display: inline-flex; flex-shrink: 0; color: var(--oc-upgrade-color); }
+.oc-upgrade-banner-icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
+
+/* Text column. */
+.oc-upgrade-banner-body { flex: 1 1 18rem; min-inline-size: 0; }
+.oc-upgrade-banner-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.9375rem; font-weight: 600; }
+.oc-upgrade-banner-plan {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--oc-upgrade-color);
+  background: oklch(from var(--oc-upgrade-color) l c h / 0.14);
+  border-radius: 999px;
+}
+.oc-upgrade-banner-text { margin: 0.25rem 0 0; line-height: 1.55; color: var(--oc-muted-foreground); }
+.oc-upgrade-banner-text a { color: var(--oc-primary); }
+
+/* Usage row: label + <meter> + "3 / 5". */
+.oc-upgrade-banner-usage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; margin-block-start: 0.625rem; font-size: 0.75rem; color: var(--oc-muted-foreground); }
+.oc-upgrade-banner-meter {
+  inline-size: 100%;
+  block-size: 0.375rem;
+  appearance: none;
+  background: var(--oc-surface-strong);
+  border: 0;
+  border-radius: 999px;
+}
+.oc-upgrade-banner-meter::-webkit-meter-bar { background: var(--oc-surface-strong); border: 0; border-radius: 999px; block-size: 0.375rem; }
+.oc-upgrade-banner-meter::-webkit-meter-optimum-value,
+.oc-upgrade-banner-meter::-webkit-meter-suboptimum-value,
+.oc-upgrade-banner-meter::-webkit-meter-even-less-good-value { background: var(--oc-upgrade-color); border-radius: 999px; }
+.oc-upgrade-banner-meter::-moz-meter-bar { background: var(--oc-upgrade-color); border-radius: 999px; }
+
+/* Actions: upgrade button (+ secondary link). */
+.oc-upgrade-banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; align-self: center; }
+
+/* Dismiss (X) in the top corner; the app hides the banner (hidden attribute). */
+.oc-upgrade-banner-dismiss {
+  position: absolute;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+  display: grid;
+  place-items: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  padding: 0;
+  font-size: 1.1rem;
+  line-height: 1;
+  color: var(--oc-muted-foreground);
+  background: none;
+  border: 0;
+  border-radius: var(--oc-radius);
+  cursor: pointer;
+}
+.oc-upgrade-banner-dismiss:hover { color: var(--oc-foreground); background: var(--oc-accent); }
+.oc-upgrade-banner-dismiss:focus-visible { outline: 2px solid var(--oc-ring); }
+.oc-upgrade-banner:has(.oc-upgrade-banner-dismiss) { padding-inline-end: 2.75rem; }
+.oc-upgrade-banner[hidden] { display: none; }
+
+/* Premium: brand gradient frame and primary tone. */
+.oc-upgrade-banner--premium {
+  --oc-upgrade-color: var(--oc-primary);
+  border-color: transparent;
+  background: linear-gradient(color-mix(in oklch, var(--oc-primary) 6%, var(--oc-card)), color-mix(in oklch, var(--oc-primary) 6%, var(--oc-card))) padding-box, var(--oc-gradient-brand) border-box;
+}
+
+/* Compact: one line (title + text inline), smaller padding. */
+.oc-upgrade-banner--compact { align-items: center; padding: 0.5rem 0.75rem; }
+.oc-upgrade-banner--compact .oc-upgrade-banner-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
+.oc-upgrade-banner--compact .oc-upgrade-banner-text { margin: 0; }

package/dist/parts/app-version-banner.css

@@ -0,0 +1,80 @@
+/* File: packages/ui/src/parts/app-version-banner.css | Map: chip -> icon + text (long / short) -> action -> tone modifiers -> floating modifier -> entry animation -> reduced motion */
+/* Version banner: small "New version available - reload" chip, e.g. at the end of the app header.
+   Reload without JavaScript: the action is a link with href="" (the current page).
+   Show it only when your app detects a newer build (remove the hidden attribute). */
+
+.oc-version-banner {
+  --oc-version-banner-color: var(--oc-warning);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  padding: 0.25rem 0.25rem 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  line-height: 1.3;
+  color: var(--oc-foreground);
+  background: oklch(from var(--oc-version-banner-color) l c h / 0.12);
+  border: 1px solid oklch(from var(--oc-version-banner-color) l c h / 0.4);
+  border-radius: 999px;
+  transition: opacity var(--oc-transition-normal), translate var(--oc-transition-normal);
+  @starting-style { opacity: 0; translate: 0 -0.25rem; }
+}
+.oc-version-banner[hidden] { display: none; }
+
+/* Small dot in the tone color (pulses gently). */
+.oc-version-banner-dot {
+  flex-shrink: 0;
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: 50%;
+  background: var(--oc-version-banner-color);
+  animation: oc-version-banner-pulse 2s ease-in-out infinite;
+}
+@keyframes oc-version-banner-pulse { 50% { box-shadow: 0 0 0 4px oklch(from var(--oc-version-banner-color) l c h / 0.2); } }
+
+/* Text: the long text hides on small screens, the short one shows instead. */
+.oc-version-banner-text { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oc-version-banner-short { display: none; white-space: nowrap; }
+@media (max-width: 40rem) {
+  .oc-version-banner-text:has(+ .oc-version-banner-short) { display: none; }
+  .oc-version-banner-short { display: inline; }
+}
+
+/* Action (link or button): compact pill button. */
+.oc-version-banner-action {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.625rem;
+  font: inherit;
+  font-weight: 600;
+  color: var(--oc-foreground);
+  text-decoration: none;
+  background: var(--oc-background);
+  border: 1px solid oklch(from var(--oc-version-banner-color) l c h / 0.4);
+  border-radius: 999px;
+  cursor: pointer;
+}
+.oc-version-banner-action:hover { background: oklch(from var(--oc-version-banner-color) l c h / 0.15); }
+.oc-version-banner-action:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* Tone modifiers. */
+.oc-version-banner--info { --oc-version-banner-color: var(--oc-primary); }
+.oc-version-banner--success { --oc-version-banner-color: var(--oc-success); }
+
+/* Floating: fixed at the bottom end of the window (for apps without a header slot). */
+.oc-version-banner--floating {
+  position: fixed;
+  inset-block-end: 1rem;
+  inset-inline-end: 1rem;
+  z-index: 900;
+  background: var(--oc-popover);
+  box-shadow: 0 8px 24px oklch(from var(--color-black-60) l c h / 0.15);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-version-banner { transition: none; }
+  .oc-version-banner-dot { animation: none; }
+}

package/dist/parts/data-chart-line.css

@@ -0,0 +1,167 @@
+/* File: packages/ui/src/parts/data-chart-line.css | Map: figure (head, legend) -> plot (y axis, gridlines, svg) -> series colors
+   -> line + area paths -> hover columns (cursor line, dots, tooltip) -> x axis -> modifiers (--area, --dots, --spark) -> reduced motion
+   Line and area chart: an inline SVG in a 0..100 viewBox, stretched to the plot (preserveAspectRatio="none", strokes keep their
+   width with vector-effect). Data points are HTML columns laid over the plot at --x / --n, each with one dot per series at --y
+   (percent of the plot height) and a tooltip that opens on :hover and :focus-visible. Colors are the --oc-chart-1..5 tokens. */
+
+.oc-chart-line {
+  --oc-chart-line-height: 12rem;
+  display: grid;
+  gap: 0.75rem;
+  inline-size: 100%;
+  min-inline-size: 0;
+  margin: 0;
+  color: var(--oc-foreground);
+  font-size: 0.75rem;
+}
+.oc-chart-line__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
+.oc-chart-line__title { margin: 0; font-size: 0.95rem; font-weight: 650; }
+.oc-chart-line__sub { margin: 0; color: var(--oc-muted-foreground); font-size: 0.8rem; }
+.oc-chart-line__value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
+
+/* ---- Body: y axis | plot, x axis below the plot ---- */
+.oc-chart-line__body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.5rem; row-gap: 0.4rem; }
+.oc-chart-line__y {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  block-size: var(--oc-chart-line-height);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--oc-chart-axis, var(--oc-muted-foreground));
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  text-align: end;
+}
+/* Zero-height labels: space-between puts their centres exactly on the gridlines */
+.oc-chart-line__y > li { display: flex; align-items: center; justify-content: flex-end; block-size: 0; }
+
+.oc-chart-line__plot {
+  --oc-chart-line-rows: 4;
+  position: relative;
+  block-size: var(--oc-chart-line-height);
+  border-block-end: 1px solid var(--oc-chart-axis, var(--oc-border));
+  background: repeating-linear-gradient(to top, transparent 0 calc(100% / var(--oc-chart-line-rows) - 1px), var(--oc-chart-grid, var(--oc-border)) calc(100% / var(--oc-chart-line-rows) - 1px) calc(100% / var(--oc-chart-line-rows)));
+}
+.oc-chart-line__svg { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
+
+/* ---- Series: one g per series, colored by position ---- */
+.oc-chart-line__series { --oc-chart-color: var(--oc-chart-1); }
+.oc-chart-line__series:nth-of-type(2) { --oc-chart-color: var(--oc-chart-2); }
+.oc-chart-line__series:nth-of-type(3) { --oc-chart-color: var(--oc-chart-3); }
+.oc-chart-line__series:nth-of-type(4) { --oc-chart-color: var(--oc-chart-4); }
+.oc-chart-line__series:nth-of-type(5) { --oc-chart-color: var(--oc-chart-5); }
+.oc-chart-line__path {
+  fill: none;
+  stroke: var(--oc-chart-color);
+  stroke-width: 2.25;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+.oc-chart-line__area { display: none; fill: var(--oc-chart-color); fill-opacity: 0.16; stroke: none; }
+.oc-chart-line--area .oc-chart-line__area { display: inline; }
+.oc-chart-line__path--dashed { stroke-dasharray: 5 4; }
+
+/* ---- Hover columns: one per x value; the column is the hit area, the dots and tip live inside ---- */
+.oc-chart-line__cols { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
+.oc-chart-line__col {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: calc(var(--x) / (var(--n) - 1) * 100%);
+  inline-size: calc(100% / (var(--n) - 1));
+  translate: -50% 0;
+  outline: 0;
+  cursor: crosshair;
+}
+.oc-chart-line__col::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 50%;
+  border-inline-start: 1px dashed var(--oc-chart-axis, var(--oc-muted-foreground));
+  opacity: 0;
+}
+.oc-chart-line__dot {
+  --oc-chart-color: var(--oc-chart-1);
+  position: absolute;
+  inset-block-end: var(--y);
+  inset-inline-start: 50%;
+  inline-size: 0.6rem;
+  block-size: 0.6rem;
+  border: 2px solid var(--oc-card);
+  border-radius: 50%;
+  background: var(--oc-chart-color);
+  translate: -50% 50%;
+  scale: 0;
+  transition: scale var(--oc-transition-fast);
+}
+.oc-chart-line__dot:nth-of-type(2) { --oc-chart-color: var(--oc-chart-2); }
+.oc-chart-line__dot:nth-of-type(3) { --oc-chart-color: var(--oc-chart-3); }
+.oc-chart-line__dot:nth-of-type(4) { --oc-chart-color: var(--oc-chart-4); }
+.oc-chart-line__dot:nth-of-type(5) { --oc-chart-color: var(--oc-chart-5); }
+
+/* Tooltip: slides from left-aligned (first point) to right-aligned (last point), so it never leaves the plot */
+.oc-chart-line__tip {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 0.25rem;
+  inset-inline-start: 50%;
+  display: grid;
+  gap: 0.3rem;
+  min-inline-size: 8.5rem;
+  padding: 0.45rem 0.6rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  background: var(--oc-popover, var(--oc-card));
+  box-shadow: 0 8px 24px oklch(from var(--color-black-60) l c h / 0.14);
+  color: var(--oc-popover-foreground, var(--oc-foreground));
+  white-space: nowrap;
+  pointer-events: none;
+  translate: calc(var(--x) / (var(--n) - 1) * -100%) 0;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--oc-transition-fast), visibility var(--oc-transition-fast);
+}
+.oc-chart-line__tip > strong { font-weight: 650; }
+.oc-chart-line__row { display: flex; align-items: center; gap: 0.45rem; color: var(--oc-muted-foreground); }
+.oc-chart-line__row::before { content: ""; inline-size: 0.6rem; block-size: 0.6rem; flex: none; border-radius: 2px; background: var(--oc-chart-color, var(--oc-chart-1)); }
+.oc-chart-line__row > b { margin-inline-start: auto; padding-inline-start: 1rem; color: var(--oc-foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
+.oc-chart-line__row:nth-of-type(1) { --oc-chart-color: var(--oc-chart-1); }
+.oc-chart-line__row:nth-of-type(2) { --oc-chart-color: var(--oc-chart-2); }
+.oc-chart-line__row:nth-of-type(3) { --oc-chart-color: var(--oc-chart-3); }
+.oc-chart-line__row:nth-of-type(4) { --oc-chart-color: var(--oc-chart-4); }
+.oc-chart-line__row:nth-of-type(5) { --oc-chart-color: var(--oc-chart-5); }
+
+.oc-chart-line__col:is(:hover, :focus-visible)::before { opacity: 1; }
+.oc-chart-line__col:is(:hover, :focus-visible) > .oc-chart-line__dot { scale: 1; }
+.oc-chart-line__col:is(:hover, :focus-visible) > .oc-chart-line__tip { opacity: 1; visibility: visible; }
+.oc-chart-line__col:focus-visible::before { border-inline-start: 2px solid var(--oc-ring); }
+
+/* ---- X axis ---- */
+.oc-chart-line__x {
+  grid-column: 2;
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--oc-chart-axis, var(--oc-muted-foreground));
+}
+.oc-chart-line__x > li { flex: 0 0 0; display: flex; justify-content: center; white-space: nowrap; }
+.oc-chart-line__x > li:first-child { justify-content: flex-start; }
+.oc-chart-line__x > li:last-child { justify-content: flex-end; }
+
+/* ---- Modifiers ---- */
+.oc-chart-line--dots .oc-chart-line__dot { scale: 0.8; }
+.oc-chart-line--dots .oc-chart-line__col:is(:hover, :focus-visible) > .oc-chart-line__dot { scale: 1.15; }
+/* Sparkline: no axes, no grid; for stat cards and table cells */
+.oc-chart-line--spark { --oc-chart-line-height: 3rem; gap: 0.25rem; }
+.oc-chart-line--spark .oc-chart-line__body { grid-template-columns: minmax(0, 1fr); }
+.oc-chart-line--spark .oc-chart-line__plot { border: 0; background: none; }
+.oc-chart-line--spark .oc-chart-line__tip { inset-block-start: auto; inset-block-end: calc(100% + 0.4rem); min-inline-size: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-chart-line__dot, .oc-chart-line__tip { transition: none; }
+}