@birdycom/omniaui 0.11.0 → 0.11.2

package/dist/parts/media-row.css

@@ -1,78 +1,78 @@
-/* File: packages/ui/src/parts/media-row.css | Map: list -> row grid (thumb | text | menu) -> title (stretched link) + meta
-   -> menu button -> numbered playlist (CSS counter) -> current item -> hover -> small screens
-   Media row: a compact horizontal item for "up next" lists and playlists. The thumb is a .oc-media-thumb. */
-
-.oc-media-row-list { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; inline-size: 100%; counter-reset: oc-media-row; }
-
-.oc-media-row {
-  position: relative;
-  display: grid;
-  grid-template-columns: 10rem minmax(0, 1fr) auto;
-  gap: 0.75rem;
-  align-items: start;
-  padding: 0.375rem;
-  border-radius: var(--oc-radius);
-  color: var(--oc-foreground);
-}
-.oc-media-row:hover { background: var(--oc-surface); }
-.oc-media-row > .oc-media-thumb { border-radius: calc(var(--oc-radius) - 2px); }
-
-.oc-media-row__text { display: grid; gap: 0.2rem; min-inline-size: 0; }
-.oc-media-row__title {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.35;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  overflow: hidden;
-}
-.oc-media-row__title > a { color: inherit; text-decoration: none; }
-.oc-media-row__title > a::after { content: ""; position: absolute; inset: 0; border-radius: var(--oc-radius); }
-.oc-media-row__title > a:focus-visible { outline: none; }
-.oc-media-row__title > a:focus-visible::after { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
-.oc-media-row__meta { margin: 0; font-size: 0.75rem; color: var(--oc-muted-foreground); }
-
-/* ⋮ button above the stretched link. */
-.oc-media-row__menu {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  place-items: center;
-  inline-size: 1.75rem;
-  aspect-ratio: 1;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: transparent;
-  color: var(--oc-muted-foreground);
-  cursor: pointer;
-}
-.oc-media-row__menu:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
-.oc-media-row__menu:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
-
-/* Numbered playlist: an extra first column with a CSS counter (no number in the markup). */
-.oc-media-row-list--numbered > .oc-media-row { counter-increment: oc-media-row; grid-template-columns: 1.5rem 8rem minmax(0, 1fr) auto; align-items: center; }
-.oc-media-row-list--numbered > .oc-media-row::before {
-  content: counter(oc-media-row);
-  font-size: 0.8125rem;
-  font-variant-numeric: tabular-nums;
-  text-align: center;
-  color: var(--oc-muted-foreground);
-}
-
-/* Current item (aria-current="true"): tinted row and a play mark instead of the number. */
-.oc-media-row[aria-current="true"] { background: color-mix(in oklch, var(--oc-primary) 12%, transparent); }
-.oc-media-row-list--numbered > .oc-media-row[aria-current="true"]::before { content: "\25B6" / "Now playing"; color: var(--oc-primary); }
-
-@media (prefers-reduced-motion: no-preference) {
-  .oc-media-row:hover .oc-media-thumb > :is(img, video, .oc-media-art) { transform: scale(1.04); }
-}
-
-/* Narrow containers: smaller thumb. */
-@media (max-width: 30rem) {
-  .oc-media-row { grid-template-columns: 7.5rem minmax(0, 1fr) auto; }
-  .oc-media-row-list--numbered > .oc-media-row { grid-template-columns: 1.25rem 6.5rem minmax(0, 1fr) auto; }
-}
+/* File: packages/ui/src/parts/media-row.css | Map: list -> row grid (thumb | text | menu) -> title (stretched link) + meta
+   -> menu button -> numbered playlist (CSS counter) -> current item -> hover -> small screens
+   Media row: a compact horizontal item for "up next" lists and playlists. The thumb is a .oc-media-thumb. */
+
+.oc-media-row-list { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; inline-size: 100%; counter-reset: oc-media-row; }
+
+.oc-media-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: 10rem minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: start;
+  padding: 0.375rem;
+  border-radius: var(--oc-radius);
+  color: var(--oc-foreground);
+}
+.oc-media-row:hover { background: var(--oc-surface); }
+.oc-media-row > .oc-media-thumb { border-radius: calc(var(--oc-radius) - 2px); }
+
+.oc-media-row__text { display: grid; gap: 0.2rem; min-inline-size: 0; }
+.oc-media-row__title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+.oc-media-row__title > a { color: inherit; text-decoration: none; }
+.oc-media-row__title > a::after { content: ""; position: absolute; inset: 0; border-radius: var(--oc-radius); }
+.oc-media-row__title > a:focus-visible { outline: none; }
+.oc-media-row__title > a:focus-visible::after { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-media-row__meta { margin: 0; font-size: 0.75rem; color: var(--oc-muted-foreground); }
+
+/* ⋮ button above the stretched link. */
+.oc-media-row__menu {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  inline-size: 1.75rem;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  cursor: pointer;
+}
+.oc-media-row__menu:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
+.oc-media-row__menu:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* Numbered playlist: an extra first column with a CSS counter (no number in the markup). */
+.oc-media-row-list--numbered > .oc-media-row { counter-increment: oc-media-row; grid-template-columns: 1.5rem 8rem minmax(0, 1fr) auto; align-items: center; }
+.oc-media-row-list--numbered > .oc-media-row::before {
+  content: counter(oc-media-row);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  color: var(--oc-muted-foreground);
+}
+
+/* Current item (aria-current="true"): tinted row and a play mark instead of the number. */
+.oc-media-row[aria-current="true"] { background: color-mix(in oklch, var(--oc-primary) 12%, transparent); }
+.oc-media-row-list--numbered > .oc-media-row[aria-current="true"]::before { content: "\25B6" / "Now playing"; color: var(--oc-primary); }
+
+@media (prefers-reduced-motion: no-preference) {
+  .oc-media-row:hover .oc-media-thumb > :is(img, video, .oc-media-art) { transform: scale(1.04); }
+}
+
+/* Narrow containers: smaller thumb. */
+@media (max-width: 30rem) {
+  .oc-media-row { grid-template-columns: 7.5rem minmax(0, 1fr) auto; }
+  .oc-media-row-list--numbered > .oc-media-row { grid-template-columns: 1.25rem 6.5rem minmax(0, 1fr) auto; }
+}

package/dist/parts/media-stack-card.css

@@ -1,82 +1,82 @@
-/* File: packages/ui/src/parts/media-stack-card.css | Map: card -> deck (two layers behind via ::before / ::after)
-   -> count badge -> panel modifier -> body (title link + meta) -> hover spread -> motion
-   Stack card: a playlist / course cover that looks like a small pile of cards, with a "12 videos" badge. */
-
-.oc-stack-card {
-  position: relative;
-  display: grid;
-  gap: 0.75rem;
-  align-content: start;
-  inline-size: 100%;
-  padding-block-start: 0.6rem; /* room for the layers peeking out above */
-  color: var(--oc-foreground);
-}
-
-/* The deck: the cover plus two layers drawn behind it. */
-.oc-stack-card__deck { position: relative; isolation: isolate; }
-.oc-stack-card__deck::before,
-.oc-stack-card__deck::after {
-  content: "";
-  position: absolute;
-  inset-inline: 0.75rem;
-  inset-block: -0.3rem auto;
-  block-size: 100%;
-  z-index: -1;
-  border-radius: var(--oc-radius);
-  background: color-mix(in oklch, var(--oc-muted-foreground) 35%, var(--oc-card));
-  transition: translate var(--oc-transition-normal), rotate var(--oc-transition-normal);
-}
-.oc-stack-card__deck::after {
-  inset-inline: 1.5rem;
-  inset-block-start: -0.6rem;
-  z-index: -2;
-  background: color-mix(in oklch, var(--oc-muted-foreground) 18%, var(--oc-card));
-}
-
-/* Count badge: bottom right on the cover ("12 videos"). */
-.oc-stack-card__count {
-  position: absolute;
-  inset-block-end: 0.45rem;
-  inset-inline-end: 0.45rem;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  padding: 0.15rem 0.45rem;
-  border-radius: 0.3rem;
-  background: oklch(from var(--color-black-60) l c h / 0.78);
-  color: var(--color-white-50);
-  font-size: 0.75rem;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-/* Panel: the count becomes a dark side panel over the right third of the cover. */
-.oc-stack-card--panel .oc-stack-card__count {
-  inset-block: 0;
-  inset-inline-end: 0;
-  inline-size: 38%;
-  flex-direction: column;
-  justify-content: center;
-  border-radius: 0 var(--oc-radius) var(--oc-radius) 0;
-  background: oklch(from var(--color-black-60) l c h / 0.72);
-  backdrop-filter: blur(6px);
-  font-size: 0.875rem;
-}
-
-/* Body: title (link covers the card) + meta. */
-.oc-stack-card__title { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
-.oc-stack-card__title > a { color: inherit; text-decoration: none; }
-.oc-stack-card__title > a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--oc-radius); }
-.oc-stack-card__title > a:focus-visible { outline: none; }
-.oc-stack-card__title > a:focus-visible::after { outline: 2px solid var(--oc-ring); outline-offset: 4px; }
-.oc-stack-card__meta { margin: 0.2rem 0 0; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
-
-/* Hover: the layers fan out a little. */
-@media (prefers-reduced-motion: no-preference) {
-  .oc-stack-card:hover .oc-stack-card__deck::before { translate: 0 -0.2rem; rotate: -1.5deg; }
-  .oc-stack-card:hover .oc-stack-card__deck::after { translate: 0 -0.35rem; rotate: 2deg; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .oc-stack-card__deck::before,
-  .oc-stack-card__deck::after { transition: none; }
-}
+/* File: packages/ui/src/parts/media-stack-card.css | Map: card -> deck (two layers behind via ::before / ::after)
+   -> count badge -> panel modifier -> body (title link + meta) -> hover spread -> motion
+   Stack card: a playlist / course cover that looks like a small pile of cards, with a "12 videos" badge. */
+
+.oc-stack-card {
+  position: relative;
+  display: grid;
+  gap: 0.75rem;
+  align-content: start;
+  inline-size: 100%;
+  padding-block-start: 0.6rem; /* room for the layers peeking out above */
+  color: var(--oc-foreground);
+}
+
+/* The deck: the cover plus two layers drawn behind it. */
+.oc-stack-card__deck { position: relative; isolation: isolate; }
+.oc-stack-card__deck::before,
+.oc-stack-card__deck::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0.75rem;
+  inset-block: -0.3rem auto;
+  block-size: 100%;
+  z-index: -1;
+  border-radius: var(--oc-radius);
+  background: color-mix(in oklch, var(--oc-muted-foreground) 35%, var(--oc-card));
+  transition: translate var(--oc-transition-normal), rotate var(--oc-transition-normal);
+}
+.oc-stack-card__deck::after {
+  inset-inline: 1.5rem;
+  inset-block-start: -0.6rem;
+  z-index: -2;
+  background: color-mix(in oklch, var(--oc-muted-foreground) 18%, var(--oc-card));
+}
+
+/* Count badge: bottom right on the cover ("12 videos"). */
+.oc-stack-card__count {
+  position: absolute;
+  inset-block-end: 0.45rem;
+  inset-inline-end: 0.45rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.15rem 0.45rem;
+  border-radius: 0.3rem;
+  background: oklch(from var(--color-black-60) l c h / 0.78);
+  color: var(--color-white-50);
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Panel: the count becomes a dark side panel over the right third of the cover. */
+.oc-stack-card--panel .oc-stack-card__count {
+  inset-block: 0;
+  inset-inline-end: 0;
+  inline-size: 38%;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 0 var(--oc-radius) var(--oc-radius) 0;
+  background: oklch(from var(--color-black-60) l c h / 0.72);
+  backdrop-filter: blur(6px);
+  font-size: 0.875rem;
+}
+
+/* Body: title (link covers the card) + meta. */
+.oc-stack-card__title { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
+.oc-stack-card__title > a { color: inherit; text-decoration: none; }
+.oc-stack-card__title > a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--oc-radius); }
+.oc-stack-card__title > a:focus-visible { outline: none; }
+.oc-stack-card__title > a:focus-visible::after { outline: 2px solid var(--oc-ring); outline-offset: 4px; }
+.oc-stack-card__meta { margin: 0.2rem 0 0; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+
+/* Hover: the layers fan out a little. */
+@media (prefers-reduced-motion: no-preference) {
+  .oc-stack-card:hover .oc-stack-card__deck::before { translate: 0 -0.2rem; rotate: -1.5deg; }
+  .oc-stack-card:hover .oc-stack-card__deck::after { translate: 0 -0.35rem; rotate: 2deg; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .oc-stack-card__deck::before,
+  .oc-stack-card__deck::after { transition: none; }
+}

package/dist/parts/media-terminal-log.css

@@ -1,76 +1,76 @@
-/* File: packages/ui/src/parts/media-terminal-log.css | Map: frame (always dark) -> title bar (traffic lights, title, live dot)
-   -> body (scrolling log) -> line grid (time | level | message) -> level colors -> prompt + blinking cursor -> motion
-   Terminal log: a console window for build / scan output. color-scheme: dark makes every light-dark() token
-   inside resolve to its dark value, so the terminal stays dark in the light theme too. */
-
-.oc-terminal-log {
-  color-scheme: dark;
-  inline-size: 100%;
-  overflow: hidden;
-  border: 1px solid var(--oc-border);
-  border-radius: calc(var(--oc-radius) + 4px);
-  background: var(--color-shallowblue-95);
-  color: var(--oc-foreground);
-  box-shadow: 0 24px 48px -24px oklch(from var(--color-black-60) l c h / 0.6);
-}
-
-/* ---- Title bar ---- */
-.oc-terminal-log__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.65rem 0.9rem; border-block-end: 1px solid var(--oc-border); background: var(--color-shallowblue-90); }
-.oc-terminal-log__bar > i { inline-size: 0.7rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-red-50); }
-.oc-terminal-log__bar > i:nth-of-type(2) { background: var(--color-orange-60); }
-.oc-terminal-log__bar > i:nth-of-type(3) { background: var(--color-green-20); }
-.oc-terminal-log__title { margin-inline: 0.5rem auto; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
-.oc-terminal-log__status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--oc-muted-foreground); }
-.oc-terminal-log__status::before { content: ""; inline-size: 0.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-green-20); }
-
-/* ---- Body: monospace, scrolls when it gets long ---- */
-.oc-terminal-log__body {
-  display: grid;
-  gap: 0.15rem;
-  max-block-size: var(--oc-terminal-log-height, 18rem);
-  margin: 0;
-  padding: 0.9rem 1rem;
-  overflow: auto;
-  font-family: ui-monospace, "Cascadia Code", "Fira Code", Menlo, Consolas, monospace;
-  font-size: 0.8125rem;
-  line-height: 1.6;
-  scrollbar-width: thin;
-}
-.oc-terminal-log__body:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
-
-/* One line: time | level | message. Long messages wrap under the message column. */
-.oc-terminal-log__line { display: grid; grid-template-columns: auto 3.5rem minmax(0, 1fr); gap: 0.75rem; margin: 0; }
-.oc-terminal-log__line:not(:has(.oc-terminal-log__time)) { grid-template-columns: 3.5rem minmax(0, 1fr); }
-.oc-terminal-log__time { color: var(--color-stormblue-40); font-variant-numeric: tabular-nums; }
-.oc-terminal-log__level { font-weight: 700; text-transform: uppercase; }
-.oc-terminal-log__msg { overflow-wrap: anywhere; white-space: pre-wrap; }
-
-/* Level colors (palette tokens, readable on the dark background). */
-.oc-terminal-log__line--info .oc-terminal-log__level { color: var(--color-skycyan-50); }
-.oc-terminal-log__line--success .oc-terminal-log__level { color: var(--color-green-20); }
-.oc-terminal-log__line--warn .oc-terminal-log__level { color: var(--color-orange-50); }
-.oc-terminal-log__line--error .oc-terminal-log__level,
-.oc-terminal-log__line--error .oc-terminal-log__msg { color: var(--color-red-40); }
-.oc-terminal-log__line--debug { opacity: 0.6; }
-.oc-terminal-log__line--debug .oc-terminal-log__level { color: var(--color-purple-30); }
-
-/* Prompt line: "$ " + text + a block cursor. */
-.oc-terminal-log__prompt { margin: 0.25rem 0 0; color: var(--oc-foreground); }
-.oc-terminal-log__prompt::before { content: "$ "; color: var(--color-green-20); }
-.oc-terminal-log__prompt::after {
-  content: "";
-  display: inline-block;
-  inline-size: 0.55em;
-  block-size: 1.1em;
-  margin-inline-start: 0.15em;
-  vertical-align: text-bottom;
-  background: currentColor;
-}
-
-/* Blinking cursor and pulsing live dot only when motion is welcome; otherwise they stay still. */
-@media (prefers-reduced-motion: no-preference) {
-  .oc-terminal-log__prompt::after { animation: oc-terminal-log-blink 1.1s steps(1) infinite; }
-  .oc-terminal-log__status::before { animation: oc-terminal-log-pulse 1.6s ease-in-out infinite; }
-}
-@keyframes oc-terminal-log-blink { 50% { opacity: 0; } }
-@keyframes oc-terminal-log-pulse { 50% { opacity: 0.35; } }
+/* File: packages/ui/src/parts/media-terminal-log.css | Map: frame (always dark) -> title bar (traffic lights, title, live dot)
+   -> body (scrolling log) -> line grid (time | level | message) -> level colors -> prompt + blinking cursor -> motion
+   Terminal log: a console window for build / scan output. color-scheme: dark makes every light-dark() token
+   inside resolve to its dark value, so the terminal stays dark in the light theme too. */
+
+.oc-terminal-log {
+  color-scheme: dark;
+  inline-size: 100%;
+  overflow: hidden;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+  background: var(--color-shallowblue-95);
+  color: var(--oc-foreground);
+  box-shadow: 0 24px 48px -24px oklch(from var(--color-black-60) l c h / 0.6);
+}
+
+/* ---- Title bar ---- */
+.oc-terminal-log__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.65rem 0.9rem; border-block-end: 1px solid var(--oc-border); background: var(--color-shallowblue-90); }
+.oc-terminal-log__bar > i { inline-size: 0.7rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-red-50); }
+.oc-terminal-log__bar > i:nth-of-type(2) { background: var(--color-orange-60); }
+.oc-terminal-log__bar > i:nth-of-type(3) { background: var(--color-green-20); }
+.oc-terminal-log__title { margin-inline: 0.5rem auto; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-terminal-log__status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--oc-muted-foreground); }
+.oc-terminal-log__status::before { content: ""; inline-size: 0.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-green-20); }
+
+/* ---- Body: monospace, scrolls when it gets long ---- */
+.oc-terminal-log__body {
+  display: grid;
+  gap: 0.15rem;
+  max-block-size: var(--oc-terminal-log-height, 18rem);
+  margin: 0;
+  padding: 0.9rem 1rem;
+  overflow: auto;
+  font-family: ui-monospace, "Cascadia Code", "Fira Code", Menlo, Consolas, monospace;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  scrollbar-width: thin;
+}
+.oc-terminal-log__body:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+
+/* One line: time | level | message. Long messages wrap under the message column. */
+.oc-terminal-log__line { display: grid; grid-template-columns: auto 3.5rem minmax(0, 1fr); gap: 0.75rem; margin: 0; }
+.oc-terminal-log__line:not(:has(.oc-terminal-log__time)) { grid-template-columns: 3.5rem minmax(0, 1fr); }
+.oc-terminal-log__time { color: var(--color-stormblue-40); font-variant-numeric: tabular-nums; }
+.oc-terminal-log__level { font-weight: 700; text-transform: uppercase; }
+.oc-terminal-log__msg { overflow-wrap: anywhere; white-space: pre-wrap; }
+
+/* Level colors (palette tokens, readable on the dark background). */
+.oc-terminal-log__line--info .oc-terminal-log__level { color: var(--color-skycyan-50); }
+.oc-terminal-log__line--success .oc-terminal-log__level { color: var(--color-green-20); }
+.oc-terminal-log__line--warn .oc-terminal-log__level { color: var(--color-orange-50); }
+.oc-terminal-log__line--error .oc-terminal-log__level,
+.oc-terminal-log__line--error .oc-terminal-log__msg { color: var(--color-red-40); }
+.oc-terminal-log__line--debug { opacity: 0.6; }
+.oc-terminal-log__line--debug .oc-terminal-log__level { color: var(--color-purple-30); }
+
+/* Prompt line: "$ " + text + a block cursor. */
+.oc-terminal-log__prompt { margin: 0.25rem 0 0; color: var(--oc-foreground); }
+.oc-terminal-log__prompt::before { content: "$ "; color: var(--color-green-20); }
+.oc-terminal-log__prompt::after {
+  content: "";
+  display: inline-block;
+  inline-size: 0.55em;
+  block-size: 1.1em;
+  margin-inline-start: 0.15em;
+  vertical-align: text-bottom;
+  background: currentColor;
+}
+
+/* Blinking cursor and pulsing live dot only when motion is welcome; otherwise they stay still. */
+@media (prefers-reduced-motion: no-preference) {
+  .oc-terminal-log__prompt::after { animation: oc-terminal-log-blink 1.1s steps(1) infinite; }
+  .oc-terminal-log__status::before { animation: oc-terminal-log-pulse 1.6s ease-in-out infinite; }
+}
+@keyframes oc-terminal-log-blink { 50% { opacity: 0; } }
+@keyframes oc-terminal-log-pulse { 50% { opacity: 0.35; } }

package/dist/parts/media-thumb.css

@@ -1,71 +1,71 @@
-/* File: packages/ui/src/parts/media-thumb.css | Map: thumb box (16:9) -> media fill + hover -> badge (top)
-   -> duration (bottom right) -> watch progress (native <progress>) -> ratio modifiers -> watched state -> motion
-   Media thumb: a video preview tile. Works as <a> or <div>; put an <img> (or .oc-media-art) inside. */
-
-.oc-media-thumb {
-  position: relative;
-  display: block;
-  aspect-ratio: 16 / 9;
-  overflow: hidden;
-  border-radius: var(--oc-radius);
-  background: var(--oc-muted);
-  color: var(--color-white-50);
-  isolation: isolate;
-}
-.oc-media-thumb:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
-
-/* The picture fills the box. */
-.oc-media-thumb > :is(img, video, .oc-media-art) {
-  position: absolute;
-  inset: 0;
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-  z-index: -1;
-}
-
-/* Small dark labels on top of the picture. */
-.oc-media-thumb__badge,
-.oc-media-thumb__duration {
-  position: absolute;
-  padding: 0.1rem 0.4rem;
-  border-radius: 0.3rem;
-  background: oklch(from var(--color-black-60) l c h / 0.78);
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1.4;
-  font-variant-numeric: tabular-nums;
-}
-.oc-media-thumb__badge { inset-block-start: 0.4rem; inset-inline-start: 0.4rem; }
-.oc-media-thumb__badge--live { background: var(--color-red-60); }
-.oc-media-thumb__duration { inset-block-end: 0.45rem; inset-inline-end: 0.45rem; }
-/* With a progress bar the duration moves up a little. */
-.oc-media-thumb:has(.oc-media-thumb__progress) .oc-media-thumb__duration { inset-block-end: 0.7rem; }
-
-/* Watch progress: a native <progress value max>, drawn as a thin bar on the bottom edge. */
-.oc-media-thumb__progress {
-  position: absolute;
-  inset: auto 0 0;
-  inline-size: 100%;
-  block-size: 0.25rem;
-  border: 0;
-  appearance: none;
-  background: oklch(from var(--color-white-50) l c h / 0.35);
-  color: var(--color-red-60);
-}
-.oc-media-thumb__progress::-webkit-progress-bar { background: transparent; }
-.oc-media-thumb__progress::-webkit-progress-value { background: var(--color-red-60); }
-.oc-media-thumb__progress::-moz-progress-bar { background: var(--color-red-60); }
-
-/* Ratios. */
-.oc-media-thumb--square { aspect-ratio: 1 / 1; }
-.oc-media-thumb--portrait { aspect-ratio: 9 / 16; }
-
-/* Already watched: the picture fades a bit. */
-.oc-media-thumb.is-watched > :is(img, video, .oc-media-art) { opacity: 0.6; }
-
-/* Gentle zoom on hover, only when motion is welcome. */
-@media (prefers-reduced-motion: no-preference) {
-  .oc-media-thumb > :is(img, video, .oc-media-art) { transition: transform var(--oc-transition-normal); }
-  .oc-media-thumb:hover > :is(img, video, .oc-media-art) { transform: scale(1.04); }
-}
+/* File: packages/ui/src/parts/media-thumb.css | Map: thumb box (16:9) -> media fill + hover -> badge (top)
+   -> duration (bottom right) -> watch progress (native <progress>) -> ratio modifiers -> watched state -> motion
+   Media thumb: a video preview tile. Works as <a> or <div>; put an <img> (or .oc-media-art) inside. */
+
+.oc-media-thumb {
+  position: relative;
+  display: block;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: var(--oc-radius);
+  background: var(--oc-muted);
+  color: var(--color-white-50);
+  isolation: isolate;
+}
+.oc-media-thumb:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+
+/* The picture fills the box. */
+.oc-media-thumb > :is(img, video, .oc-media-art) {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  z-index: -1;
+}
+
+/* Small dark labels on top of the picture. */
+.oc-media-thumb__badge,
+.oc-media-thumb__duration {
+  position: absolute;
+  padding: 0.1rem 0.4rem;
+  border-radius: 0.3rem;
+  background: oklch(from var(--color-black-60) l c h / 0.78);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+  font-variant-numeric: tabular-nums;
+}
+.oc-media-thumb__badge { inset-block-start: 0.4rem; inset-inline-start: 0.4rem; }
+.oc-media-thumb__badge--live { background: var(--color-red-60); }
+.oc-media-thumb__duration { inset-block-end: 0.45rem; inset-inline-end: 0.45rem; }
+/* With a progress bar the duration moves up a little. */
+.oc-media-thumb:has(.oc-media-thumb__progress) .oc-media-thumb__duration { inset-block-end: 0.7rem; }
+
+/* Watch progress: a native <progress value max>, drawn as a thin bar on the bottom edge. */
+.oc-media-thumb__progress {
+  position: absolute;
+  inset: auto 0 0;
+  inline-size: 100%;
+  block-size: 0.25rem;
+  border: 0;
+  appearance: none;
+  background: oklch(from var(--color-white-50) l c h / 0.35);
+  color: var(--color-red-60);
+}
+.oc-media-thumb__progress::-webkit-progress-bar { background: transparent; }
+.oc-media-thumb__progress::-webkit-progress-value { background: var(--color-red-60); }
+.oc-media-thumb__progress::-moz-progress-bar { background: var(--color-red-60); }
+
+/* Ratios. */
+.oc-media-thumb--square { aspect-ratio: 1 / 1; }
+.oc-media-thumb--portrait { aspect-ratio: 9 / 16; }
+
+/* Already watched: the picture fades a bit. */
+.oc-media-thumb.is-watched > :is(img, video, .oc-media-art) { opacity: 0.6; }
+
+/* Gentle zoom on hover, only when motion is welcome. */
+@media (prefers-reduced-motion: no-preference) {
+  .oc-media-thumb > :is(img, video, .oc-media-art) { transition: transform var(--oc-transition-normal); }
+  .oc-media-thumb:hover > :is(img, video, .oc-media-art) { transform: scale(1.04); }
+}