@birdycom/omniaui 0.0.0-stage → 0.11.1

package/dist/parts/media-message-thread.css

@@ -0,0 +1,136 @@
+/* File: packages/ui/src/parts/media-message-thread.css | Map: frame (grid: header / messages / composer) -> header (title, meta,
+   people, status, actions) -> wallpaper (masked doodles in a token color) -> scroll area (starts at the bottom)
+   -> composer footer -> sending overlay (aria-busy) -> reduced motion
+   Message thread: one conversation. The scroll area uses flex-direction: column-reverse, so it opens at the newest message
+   and stays there when messages are added, without a script. Based on the question chat of the Korrekt app. */
+
+.oc-message-thread {
+  --oc-message-thread-height: 32rem;
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr);
+  block-size: var(--oc-message-thread-height);
+  min-inline-size: 0;
+  overflow: hidden;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+  background: color-mix(in oklch, var(--oc-muted) 40%, var(--oc-background));
+  color: var(--oc-foreground);
+}
+
+/* ---- Header ---- */
+.oc-message-thread__header {
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-inline-size: 0;
+  padding: 0.6rem 0.6rem 0.6rem 1rem;
+  border-block-end: 1px solid var(--oc-border);
+  background: var(--oc-card);
+}
+.oc-message-thread__heading { display: grid; flex: 1 1 auto; gap: 0.1rem; min-inline-size: 0; }
+/* Two classes, so global heading styles (text-wrap on h3) cannot make the title wrap */
+.oc-message-thread__heading > .oc-message-thread__title {
+  margin: 0;
+  overflow: hidden;
+  font-size: 0.95rem;
+  font-weight: 650;
+  line-height: 1.3;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.oc-message-thread__heading > .oc-message-thread__meta {
+  margin: 0;
+  overflow: hidden;
+  color: var(--oc-muted-foreground);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.oc-message-thread__meta strong { color: var(--oc-primary); font-weight: 600; }
+.oc-message-thread__people { flex: none; }
+.oc-message-thread__people .oc-avatar { inline-size: 1.75rem; block-size: 1.75rem; font-size: 0.62rem; border-color: var(--oc-card); }
+.oc-message-thread__actions { display: flex; flex: none; align-items: center; gap: 0.35rem; }
+.oc-message-thread__icon-btn {
+  display: grid;
+  place-items: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  cursor: pointer;
+}
+.oc-message-thread__icon-btn svg { inline-size: 1.1rem; block-size: 1.1rem; }
+.oc-message-thread__icon-btn:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
+.oc-message-thread__icon-btn:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* ---- Wallpaper: line doodles (chat bubble, note, sun, house, lamp…) as a mask, painted in a token color ---- */
+.oc-message-thread::before {
+  content: "";
+  grid-row: 2;
+  grid-column: 1;
+  pointer-events: none;
+  background: oklch(from var(--oc-muted-foreground) l c h / 0.11);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 36h28a6 6 0 0 1 6 6v14a6 6 0 0 1-6 6H40l-10 8v-8h-2a6 6 0 0 1-6-6V42a6 6 0 0 1 6-6z'/%3E%3Cpath d='M118 42h22v28H118z'/%3E%3Cpath d='M122 50h14M122 56h10'/%3E%3Ccircle cx='188' cy='52' r='10'/%3E%3Cpath d='M188 42v4M188 58v4M178 52h4M194 52h4'/%3E%3Cpath d='M42 118l8-4 8 4v10l-8 4-8-4z'/%3E%3Ccircle cx='50' cy='123' r='2.5'/%3E%3Cpath d='M128 112h24v18H128zM132 118h16M132 124h10'/%3E%3Cpath d='M178 118c6 0 10 4 10 10s-4 10-10 10-10-4-10-10 4-10 10-10z'/%3E%3Cpath d='M178 124v8M174 128h8'/%3E%3Cpath d='M36 178h20l4 12H32z'/%3E%3Cpath d='M120 176c8 0 14 6 14 14H106c0-8 6-14 14-14z'/%3E%3Ccircle cx='120' cy='168' r='7'/%3E%3Cpath d='M176 172h24v20h-24z'/%3E%3Cpath d='M182 178h12M182 184h8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 220px repeat;
+}
+.oc-message-thread--plain::before { display: none; }
+
+/* ---- Scroll area: column-reverse keeps the newest message in view ---- */
+.oc-message-thread__scroll {
+  grid-row: 2;
+  grid-column: 1;
+  display: flex;
+  flex-direction: column-reverse;
+  min-block-size: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--oc-border-strong, var(--oc-border)) transparent;
+}
+.oc-message-thread__scroll:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-message-thread__scroll > .oc-message-list { padding: 1rem 0.85rem; }
+
+/* ---- Composer footer: optional attachment chips + the chat-composer ---- */
+.oc-message-thread__footer {
+  grid-row: 3;
+  display: grid;
+  gap: 0.5rem;
+  padding: 0.6rem 0.75rem 0.75rem;
+  border-block-start: 1px solid var(--oc-border);
+  background: var(--oc-card);
+  box-shadow: 0 -4px 16px oklch(from var(--color-black-60) l c h / 0.05);
+}
+.oc-message-thread__footer .oc-chat-composer { background: var(--oc-background); }
+.oc-message-thread__note { margin: 0; color: var(--oc-muted-foreground); font-size: 0.75rem; text-align: center; }
+
+/* ---- Sending overlay: set aria-busy="true" on the thread while a message or upload is on its way ---- */
+.oc-message-thread__busy {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: none;
+  place-content: center;
+  justify-items: center;
+  gap: 0.4rem;
+  padding: 1.5rem;
+  background: color-mix(in oklch, var(--oc-background) 82%, transparent);
+  backdrop-filter: blur(2px);
+  text-align: center;
+}
+.oc-message-thread[aria-busy="true"] > .oc-message-thread__busy { display: grid; }
+.oc-message-thread__busy > .oc-spinner { margin-block-end: 0.35rem; color: var(--oc-primary); }
+.oc-message-thread__busy strong { font-size: 0.9rem; }
+.oc-message-thread__busy span { color: var(--oc-muted-foreground); font-size: 0.78rem; }
+
+@container (width < 26rem) {
+  .oc-message-thread__people { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-message-thread__busy { backdrop-filter: none; }
+}

package/dist/parts/media-message.css

@@ -0,0 +1,160 @@
+/* File: packages/ui/src/parts/media-message.css | Map: list -> row (in / out) -> avatar -> bubble (sender, quote, text, attachments, meta)
+   -> grouping (:has) -> hover actions -> date divider + system line -> reduced motion
+   Message: one chat bubble. Incoming on the left with the avatar, outgoing on the right in the primary tint.
+   Consecutive messages of one sender group by themselves: the avatar shows once (on the last one), the name once (on the
+   first one). Based on the question chat of the Korrekt app. */
+
+.oc-message-list {
+  --oc-message-in: var(--oc-card);
+  --oc-message-out: color-mix(in oklch, var(--oc-primary) 14%, var(--oc-card));
+  --oc-message-shadow: 0 1px 2px oklch(from var(--color-black-60) l c h / 0.08), 0 4px 12px oklch(from var(--color-black-60) l c h / 0.06);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0.75rem;
+}
+
+/* ---- Row: avatar | bubble | actions (mirrored for outgoing) ---- */
+.oc-message {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  min-inline-size: 0;
+  margin: 0;
+}
+.oc-message--out { flex-direction: row-reverse; }
+.oc-message__avatar { inline-size: 2rem; block-size: 2rem; font-size: 0.7rem; border: 1px solid var(--oc-border); }
+.oc-message--out .oc-message__avatar { background: color-mix(in oklch, var(--oc-primary) 18%, var(--oc-card)); color: var(--oc-primary); }
+
+/* ---- Bubble ---- */
+.oc-message__bubble {
+  display: grid;
+  gap: 0.25rem;
+  min-inline-size: 0;
+  max-inline-size: min(78%, 34rem);
+  padding: 0.5rem 0.8rem 0.4rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 1rem 1rem 1rem 0.25rem;
+  background: var(--oc-message-in, var(--oc-card));
+  box-shadow: var(--oc-message-shadow, none);
+  color: var(--oc-foreground);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.oc-message--out .oc-message__bubble {
+  border-color: color-mix(in oklch, var(--oc-primary) 22%, var(--oc-border));
+  border-radius: 1rem 1rem 0.25rem 1rem;
+  background: var(--oc-message-out, var(--oc-muted));
+}
+.oc-message__sender { margin: 0; color: var(--oc-primary); font-size: 0.72rem; font-weight: 650; }
+
+/* Message text: paragraphs, lists, bold/italic, links and inline code (the output of a small markdown renderer) */
+.oc-message__text { min-inline-size: 0; overflow-wrap: anywhere; }
+.oc-message__text > :is(p, ul, ol) { margin: 0; }
+.oc-message__text > * + * { margin-block-start: 0.35rem; }
+.oc-message__text :is(ul, ol) { padding-inline-start: 1.15rem; }
+.oc-message__text a { color: var(--oc-primary); text-decoration: underline; text-underline-offset: 2px; }
+.oc-message__text a:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; border-radius: 2px; }
+.oc-message__text code { padding: 0.05rem 0.3rem; border-radius: 4px; background: var(--oc-surface-strong); font-size: 0.85em; }
+
+/* Reply quote: the message this one answers (a link back to it) */
+.oc-message__quote {
+  display: grid;
+  gap: 0.1rem;
+  padding: 0.35rem 0.6rem;
+  border-inline-start: 3px solid var(--oc-primary);
+  border-radius: 0.4rem;
+  background: var(--oc-surface-strong);
+  color: var(--oc-muted-foreground);
+  font-size: 0.8rem;
+  line-height: 1.4;
+  text-decoration: none;
+}
+.oc-message__quote > strong { color: var(--oc-foreground); font-size: 0.72rem; font-weight: 650; }
+.oc-message__quote > span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+a.oc-message__quote:hover { background: color-mix(in oklch, var(--oc-primary) 10%, transparent); }
+a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+
+.oc-message__attachments { display: grid; gap: 0.35rem; margin-block-start: 0.15rem; }
+
+/* Time + read receipt, small and right aligned */
+.oc-message__meta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.35rem;
+  margin: 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+}
+.oc-message__status { display: inline-flex; align-items: center; gap: 0.2rem; }
+.oc-message__status--read { color: var(--oc-success); font-weight: 600; }
+.oc-message__status--failed { color: var(--oc-destructive); font-weight: 600; }
+.oc-message__status svg { inline-size: 0.85rem; block-size: 0.85rem; }
+
+/* ---- Grouping: a --continued message follows one of the same sender ---- */
+.oc-message--continued { margin-block-start: -0.5rem; }
+.oc-message--continued .oc-message__sender { display: none; }
+.oc-message:has(+ .oc-message--continued) .oc-message__avatar { visibility: hidden; }
+.oc-message:has(+ .oc-message--continued) .oc-message__bubble { border-end-start-radius: 1rem; }
+.oc-message--out:has(+ .oc-message--continued) .oc-message__bubble { border-end-start-radius: 1rem; border-end-end-radius: 1rem; }
+.oc-message--continued .oc-message__bubble { border-start-start-radius: 0.25rem; }
+.oc-message--out.oc-message--continued .oc-message__bubble { border-start-start-radius: 1rem; border-start-end-radius: 0.25rem; }
+
+/* ---- Actions: appear on hover and keyboard focus (always visible on touch screens) ---- */
+.oc-message__actions {
+  display: flex;
+  align-self: center;
+  gap: 0.15rem;
+  opacity: 0;
+  transition: opacity var(--oc-transition-normal);
+}
+.oc-message:hover .oc-message__actions,
+.oc-message:focus-within .oc-message__actions { opacity: 1; }
+@media (hover: none) { .oc-message__actions { opacity: 1; } }
+.oc-message__action {
+  display: grid;
+  place-items: center;
+  inline-size: 1.85rem;
+  block-size: 1.85rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  cursor: pointer;
+}
+.oc-message__action svg { inline-size: 1rem; block-size: 1rem; }
+.oc-message__action:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
+.oc-message__action--destructive:hover { background: oklch(from var(--oc-destructive) l c h / 0.12); color: var(--oc-destructive); }
+.oc-message__action:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* ---- Date divider and system line ---- */
+.oc-message-divider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 0.25rem 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.72rem;
+  font-weight: 600;
+}
+.oc-message-divider::before,
+.oc-message-divider::after { content: ""; flex: 1; border-block-start: 1px solid var(--oc-border); }
+.oc-message-divider > * {
+  padding: 0.15rem 0.6rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 999px;
+  background: var(--oc-card);
+}
+.oc-message-divider--system { justify-content: center; font-weight: 500; }
+.oc-message-divider--system::before,
+.oc-message-divider--system::after { display: none; }
+.oc-message-divider--system > * { max-inline-size: 85%; border-style: dashed; background: var(--oc-background); text-align: center; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-message__actions { transition: none; }
+}

package/dist/parts/media-row.css

@@ -0,0 +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; }
+}

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

@@ -0,0 +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; }
+}

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

@@ -0,0 +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; } }

package/dist/parts/media-thumb.css

@@ -0,0 +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); }
+}

package/dist/parts/site-fact-list.css

@@ -0,0 +1,25 @@
+/* File: packages/ui/src/parts/site-fact-list.css
+   Map: plain -> compact -> stacked -> accent values -> narrow screens
+   Fact list component: key / value product facts (the marketing sibling of the definition list).
+   The base .oc-fact-list (card with <div><dt><dd> rows) lives in showcase.css. This part ADDS modifiers, plus one safe fix: rows may wrap in very narrow containers. */
+
+/* Plain: no card, only lines between the rows. */
+.oc-fact-list--plain {
+  border: 0;
+  border-radius: 0;
+  background: none;
+}
+.oc-fact-list--plain > div { padding-inline: 0; }
+
+/* Compact rows (sidebars, small cards). */
+.oc-fact-list--compact > div { padding-block: 0.6rem; font-size: 0.9rem; }
+
+/* Stacked: the value goes below the label (long values). */
+.oc-fact-list--stacked > div { flex-direction: column; gap: 0.2rem; }
+.oc-fact-list--stacked dd { text-align: start; }
+
+/* Values in the accent color. */
+.oc-fact-list--accent dd { color: var(--oc-accent-from); }
+
+/* Very narrow containers: wrap instead of squeezing label and value together. */
+.oc-fact-list > div { flex-wrap: wrap; }

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

@@ -0,0 +1,34 @@
+/* File: packages/ui/src/parts/site-link-arrow.css
+   Map: focus ring -> back arrow -> external arrow -> color modifiers -> sizes -> reduced motion
+   Link arrow component. The base .oc-link-arrow (text + "→" that moves on hover) lives in showcase.css.
+   This part only ADDS modifiers. */
+
+.oc-link-arrow:focus-visible {
+  border-radius: 4px;
+  outline: 2px solid var(--oc-ring);
+  outline-offset: 3px;
+}
+.oc-link-arrow:focus-visible::after { translate: 4px 0; }
+
+/* Back link: the arrow points left, sits before the text and moves left on hover. */
+.oc-link-arrow--back::after { content: none; }
+.oc-link-arrow--back::before { content: "←"; transition: translate 0.2s var(--oc-ease-out); }
+.oc-link-arrow--back:is(:hover, :focus-visible)::before { translate: -4px 0; }
+
+/* External link: diagonal arrow that moves up-right. */
+.oc-link-arrow--external::after { content: "↗"; }
+.oc-link-arrow--external:is(:hover, :focus-visible)::after { translate: 3px -3px; }
+
+/* Colors: accent of the element, or muted text that turns to the foreground color on hover. */
+.oc-link-arrow--accent { color: var(--oc-accent-from); }
+.oc-link-arrow--muted { color: var(--oc-muted-foreground); font-weight: 500; transition: color 0.2s; }
+.oc-link-arrow--muted:hover { color: var(--oc-foreground); }
+
+/* Sizes */
+.oc-link-arrow--sm { font-size: 0.85rem; }
+.oc-link-arrow--lg { font-size: 1.15rem; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-link-arrow::after,
+  .oc-link-arrow::before { transition: none; }
+}