@birdycom/omniaui 0.11.0 → 0.11.2

package/dist/parts/app-tree.css

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

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

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