@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/terminal-loaders.css

@@ -0,0 +1,122 @@
+
+/* ==========================================================================
+   Terminal loaders (@digithings-ai/ui) — the `.tl-*` family behind
+   <TerminalStepCaret>, <ContainerBootLoader> and <ChatResponseLoader>.
+
+   Promoted here from the reference's `terminal.css` so product apps can ship
+   the house type-out without forking it; the class names carried over
+   unchanged, exactly as that sheet said they would. `.tl-stage` stayed behind
+   — it frames the reference specimen, not a product surface.
+
+   The caret itself is NOT drawn here — it is <ChatStreamCursor>, whose block,
+   blink and reduced-motion still live in chat-core.css. Import that sheet
+   FIRST: everything below assumes the cursor's metrics already exist.
+
+   Nothing here animates or transitions; the one motion moment is the caret.
+   Import once in the app shell:
+     @import "@digithings-ai/ui/styles/terminal-loaders.css";
+   ========================================================================== */
+
+/* ── the typed line ───────────────────────────────────────────────────── */
+
+/* The line stays INLINE flow, not flex: the caret's `vertical-align: -2px`
+   (chat-core.css) is what seats it against the baseline, and a flex container
+   would drop it and float the block high. */
+.tl-line {
+  font-family: var(--font-mono);
+}
+
+.tl-mark {
+  color: var(--accent);
+  margin-inline-end: var(--space-2);
+}
+
+/* `pre` keeps a mid-word trailing space, so the caret never jumps back a cell
+   while typing. The line does not wrap — a wrapped caret lands in the margin —
+   so keep labels under ~30 characters, which is what the boot surface holds at
+   375px. */
+.tl-label {
+  white-space: pre;
+}
+
+/* The caret's screen-reader line. Deliberately NOT Tailwind's `.sr-only`: that
+   utility is only emitted into an app whose own source uses the class, so a
+   shared component leaning on it renders a plain visible span in any app that
+   does not — which is exactly what happened on digithings.ai, where the hidden
+   label appeared as a second copy of the word beside the typed one. A
+   component's a11y cannot depend on the consumer's build config, so the rule
+   ships here with the component that needs it. */
+.tl-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ── container boot ───────────────────────────────────────────────────── */
+
+/* A terminal line caught mid-prompt, centred in the surface with its block
+   left-aligned on the mono grid. */
+
+.tl-boot {
+  /* component tokens — boot surface geometry */
+  --tl-boot-pad: clamp(1.5rem, 6vw, 4rem);
+  --tl-boot-inner-w: 34rem;
+  --tl-boot-gap: 0.85rem;
+  --tl-boot-title-font: 1.25rem;
+  --tl-line-font: 0.92rem;
+  --tl-note-font: 0.68rem;
+
+  display: grid;
+  place-items: center;
+  width: 100%;
+  min-height: 100%;
+  padding: var(--tl-boot-pad);
+  background: var(--bg);
+}
+
+/* The usual mode in a product app: pinned over an app that has not rendered. */
+.tl-boot.is-fixed {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  min-height: 100dvh;
+}
+
+.tl-boot-inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tl-boot-gap, 0.85rem);
+  width: min(var(--tl-boot-inner-w, 34rem), 100%);
+}
+
+.tl-boot-title {
+  font-family: var(--font-mono);
+  font-size: var(--tl-boot-title-font, 1.25rem);
+  line-height: 1.1;
+  color: var(--ink);
+}
+
+.tl-boot-rule {
+  margin: 0;
+  border: 0;
+  height: 1px;
+  background: var(--hair);
+}
+
+.tl-boot .tl-line {
+  font-size: var(--tl-line-font, 0.92rem);
+  color: var(--ink-soft);
+}
+
+.tl-note {
+  font-family: var(--font-mono);
+  font-size: var(--tl-note-font, 0.68rem);
+  letter-spacing: 0.06em;
+  color: var(--ink-mute);
+}

package/src/styles/terminal-manifest.css

@@ -0,0 +1,228 @@
+/* ==========================================================================
+   TerminalManifest (@digithings-ai/ui) — `cli ps` manifest pane.
+   Owned by components/TerminalManifest.tsx. Only what CANNOT be a token
+   utility lives here (canon migrate-vs-leave): the two-colour color-mix pane
+   surface and row washes, the row-appear + cursor-blink keyframes, the dot's
+   color-mix glow, state combinators (.is-sel / .is-off / .no-anim), and the
+   container-query column collapse — narrow containers drop the port + blurb
+   columns; wide containers go two-column with internal scroll on both sides.
+   Import once in the app shell:
+     @import "@digithings-ai/ui/styles/terminal-manifest.css";
+   ========================================================================== */
+
+/* The wrapper is the size container: column behavior tracks the pane's own
+   width, not the viewport, so the pane adapts wherever it is embedded. */
+.tm {
+  /* component tokens — manifest pane geometry */
+  --tm-dot: 7px;
+  --tm-cursor-w: 7px;
+  --tm-cursor-h: 14px;
+  --tm-dot-col: 12px;
+  --tm-name-min: 108px;
+  --tm-name-max: 132px;
+  --tm-row-gap: 0.55rem;
+  --tm-row-gap-col: 0.85rem;
+  --tm-row-pad-block: 0.4rem;
+  --tm-row-pad-inline: 0.55rem;
+  --tm-out-pad-block: 0.75rem;
+  --tm-out-pad-bottom: 0.3rem;
+  --tm-body-gap: 1.6rem;
+
+  container-type: inline-size;
+}
+
+/* Each row's screen-reader-only running/roadmap text. Deliberately NOT
+   Tailwind's `.sr-only`: that utility is only emitted into an app whose own
+   source uses the class, so a shared component leaning on it renders a
+   plain visible span in any app that does not — exactly the bug already
+   hit once on digithings.ai (see terminal-loaders.css's .tl-sr, the same
+   fix for the same reason). A component's a11y cannot depend on the
+   consumer's build config, so the rule ships here with the component that
+   needs it. */
+.tm-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.tm-pane {
+  /* two-colour mix — no token utility */
+  background: color-mix(in srgb, var(--surface) 70%, transparent);
+}
+
+/* ── rows ─────────────────────────────────────────────────────────────── */
+.tm-rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-height: 0;
+}
+
+.tm-row {
+  animation: tm-row-in 0.5s var(--ease) both;
+}
+
+.tm.no-anim .tm-row {
+  animation: none;
+}
+
+@keyframes tm-row-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.tm-row-link {
+  width: 100%;
+  text-align: start;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  display: grid;
+  grid-template-columns: var(--tm-dot-col) minmax(var(--tm-name-min), var(--tm-name-max)) 1fr;
+  align-items: center;
+  gap: var(--tm-row-gap) var(--tm-row-gap-col);
+  padding: var(--tm-row-pad-block) var(--tm-row-pad-inline);
+  border-radius: 0;
+  color: var(--ink-soft);
+  transition: background 0.18s var(--ease);
+}
+
+.tm.has-ports .tm-row-link {
+  grid-template-columns: var(--tm-dot-col) minmax(var(--tm-name-min), var(--tm-name-max)) minmax(4ch, auto) 1fr;
+}
+
+.tm-row-link:hover {
+  background: color-mix(in srgb, var(--accent) 9%, transparent);
+}
+
+.tm-row.is-sel .tm-row-link {
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+}
+
+.tm-dot {
+  width: var(--tm-dot);
+  height: var(--tm-dot);
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 65%, transparent);
+}
+
+.tm-dot.off {
+  background: transparent;
+  border: 1px solid var(--hair-2);
+  box-shadow: none;
+}
+
+.tm-row.is-off .tm-name,
+.tm-row.is-off .tm-port,
+.tm-row.is-off .tm-blurb {
+  opacity: 0.55;
+}
+
+/* ── output panel ─────────────────────────────────────────────────────── */
+.tm-body {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.tm-out {
+  margin-top: 0.6rem;
+  padding: var(--tm-out-pad-block, 0.75rem) var(--tm-row-pad-inline, 0.55rem) var(--tm-out-pad-bottom, 0.3rem);
+  border-top: 1px dashed var(--hair);
+  display: flex;
+  flex-direction: column;
+}
+
+.tm-cursor {
+  display: inline-block;
+  width: var(--tm-cursor-w, 7px);
+  height: var(--tm-cursor-h, 14px);
+  background: var(--accent);
+  vertical-align: -2px;
+  animation: tm-blink 1.1s steps(1) infinite;
+}
+
+@keyframes tm-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+/* ── container-query column collapse ──────────────────────────────────── */
+/* Narrow pane: dot + name only. */
+@container (max-width: 560px) {
+  .tm-row-link,
+  .tm.has-ports .tm-row-link {
+    grid-template-columns: var(--tm-dot-col, 12px) 1fr;
+  }
+
+  .tm-port,
+  .tm-blurb {
+    display: none;
+  }
+}
+
+/* Wide pane: two columns, both stretched to the SAME height. The scrollable
+   sides collapse min-content to 0, so the row list drives the pane height —
+   selecting a long detail never grows the card; the output scrolls
+   internally instead. */
+@container (min-width: 860px) {
+  .tm-body {
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+    grid-template-rows: minmax(0, 1fr);
+    gap: var(--tm-body-gap, 1.6rem);
+    align-items: stretch;
+  }
+
+  .tm-rows {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+  }
+
+  .tm-out {
+    margin-top: 0;
+    border-top: 0;
+    border-inline-start: 1px dashed var(--hair);
+    padding: 0.1rem 0 var(--tm-row-pad-block, 0.4rem) var(--tm-body-gap, 1.6rem);
+    min-height: 0;
+  }
+
+  .tm-out-show {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .tm-out-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tm-row {
+    animation: none;
+  }
+
+  .tm-cursor {
+    animation: none;
+  }
+}