@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/digichat-launcher.css

@@ -0,0 +1,377 @@
+/* ==========================================================================
+   digichat launcher (@digithings-ai/ui)
+
+   A fixed-height terminal-mark button that types its label on hover/focus and
+   grows into an embedded chat panel from the same bottom-right footprint.
+   Tokens own every color and type decision; the backdrop is transparent and
+   never blurs the host page.
+   ========================================================================== */
+
+.digichat-launcher {
+  --digichat-launcher-size: 30px;
+  --digichat-launcher-panel-width: min(380px, calc(100vw - 2.5rem));
+  --digichat-launcher-panel-height: min(560px, calc(100dvh - 2.5rem));
+  --digichat-launcher-right: 1.25rem;
+  --digichat-launcher-bottom: 1.25rem;
+  /* chrome sizing (component tokens) */
+  --digichat-launcher-trigger-fs: 0.75rem;
+  --digichat-launcher-chrome-fs: 0.68rem;
+  --digichat-launcher-word-gap: 0.22rem;
+  --digichat-launcher-typing-pad: 0.5rem;
+  --digichat-launcher-header-gap: 0.5rem;
+  --digichat-launcher-header-pad: 0.75rem;
+  --digichat-launcher-tooltip-offset: 6px;
+  --digichat-launcher-tooltip-pad: 0.2rem 0.45rem;
+  position: fixed;
+  inset-inline-end: var(--digichat-launcher-right);
+  bottom: var(--digichat-launcher-bottom);
+  z-index: 70;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  font-family: var(--font-mono);
+  /* Remove inline baseline space: otherwise swapping SVG → typed text changes
+     the wrapper's line box and nudges the fixed button by a couple of pixels. */
+  line-height: 0;
+}
+
+.digichat-launcher__panel,
+.digichat-launcher__body {
+  /* The trigger keeps line-height: 0. The panel must not inherit it —
+     welcome copy stacks on one row and autosize textareas explode. Compact
+     composer input sets its own line-height so field-sizing stays one row. */
+  line-height: 1.45;
+  /* Match the /chatbot thread: --bg / --ink, not a light shadcn popover. */
+  --background: var(--bg);
+  --foreground: var(--ink);
+  --popover: var(--bg);
+  --popover-foreground: var(--ink);
+  --card: var(--bg);
+  --composer-bg: var(--bg);
+  --color-background: var(--bg);
+  --color-foreground: var(--ink);
+  --color-popover: var(--bg);
+  --color-card: var(--bg);
+  background: var(--bg);
+  color: var(--ink);
+}
+
+.digichat-launcher--contained {
+  position: absolute;
+}
+
+.digichat-launcher__trigger {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--digichat-launcher-size);
+  height: var(--digichat-launcher-size);
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--hair);
+  border-radius: 0;
+  background: color-mix(in srgb, var(--surface) 78%, transparent);
+  color: var(--ink);
+  font: 400 var(--digichat-launcher-trigger-fs) / 1 var(--font-mono);
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  cursor: pointer;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  transition: background-color 0.18s var(--ease);
+}
+
+.digichat-launcher__trigger:hover,
+.digichat-launcher__trigger:focus-visible {
+  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
+}
+
+.digichat-launcher__mark {
+  flex: none;
+}
+
+.digichat-launcher__mark rect,
+.digichat-launcher__cursor {
+  animation: digichat-launcher-blink 1.1s steps(1) infinite;
+}
+
+.digichat-launcher__word {
+  display: none;
+  align-items: center;
+  gap: var(--digichat-launcher-word-gap);
+  /* TerminalMark's outlined ink sits above the centre of its square viewBox.
+     Match that optical centre so swapping mark → type does not appear to drop. */
+  transform: translateY(-1px);
+}
+
+.digichat-launcher__cursor {
+  display: inline-block;
+  width: 0.6em;
+  /* 0.85em at the 12px chrome size matches the compact mark's rendered bar. */
+  height: 0.85em;
+  flex: none;
+  background: currentColor;
+}
+
+.digichat-launcher__trigger[data-typing] {
+  width: auto;
+  min-width: var(--digichat-launcher-size);
+  padding-inline: var(--digichat-launcher-typing-pad);
+}
+
+.digichat-launcher__trigger[data-typing] .digichat-launcher__mark {
+  display: none;
+}
+
+.digichat-launcher__trigger[data-typing] .digichat-launcher__word {
+  display: inline-flex;
+}
+
+.digichat-launcher__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: default;
+}
+
+.digichat-launcher--contained .digichat-launcher__backdrop {
+  position: fixed;
+}
+
+.digichat-launcher__panel {
+  box-sizing: border-box;
+  display: flex;
+  width: var(--digichat-launcher-panel-width);
+  height: var(--digichat-launcher-panel-height);
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--hair);
+  border-radius: 0;
+  background: var(--surface);
+  color: var(--ink);
+  transform-origin: bottom right;
+  /* Two-step reveal: the square widens into a composer-height bar, then that
+     bar lifts to full height. One animation rather than chained transitions,
+     so the halves cannot desync. */
+  animation: digichat-launcher-open 0.34s var(--ease) both;
+}
+
+.digichat-launcher__panel.is-closing {
+  animation: digichat-launcher-close 0.34s var(--ease) both;
+  pointer-events: none;
+}
+
+.digichat-launcher__panel.is-hidden {
+  display: none;
+}
+
+.digichat-launcher__header {
+  display: flex;
+  min-height: var(--digichat-launcher-size);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--digichat-launcher-header-gap);
+  flex: none;
+  padding-inline-start: var(--digichat-launcher-header-pad);
+  border-bottom: 1px solid var(--hair);
+  color: var(--ink-mute);
+  font: 400 var(--digichat-launcher-chrome-fs) / 1 var(--font-mono);
+  letter-spacing: 0.04em;
+}
+
+.digichat-launcher__header-actions {
+  display: inline-flex;
+  align-items: stretch;
+  flex: none;
+}
+
+.digichat-launcher__new,
+.digichat-launcher__close {
+  display: inline-flex;
+  width: var(--digichat-launcher-size);
+  height: var(--digichat-launcher-size);
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-inline-start: 1px solid var(--hair);
+  border-radius: 0;
+  background: transparent;
+  color: var(--ink-mute);
+  cursor: pointer;
+  transition: color 0.18s var(--ease);
+}
+
+.digichat-launcher__new {
+  position: relative;
+}
+
+.digichat-launcher__new:hover,
+.digichat-launcher__new:focus-visible,
+.digichat-launcher__close:hover,
+.digichat-launcher__close:focus-visible {
+  background: transparent;
+  color: var(--ink);
+}
+
+.digichat-launcher__new::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: calc(100% + var(--digichat-launcher-tooltip-offset));
+  /* physical on purpose: centering pairs left:50% with translateX(-50%) */
+  left: 50%;
+  z-index: 120;
+  padding: var(--digichat-launcher-tooltip-pad);
+  border: 1px solid var(--hair);
+  border-radius: 0;
+  background: var(--bg);
+  color: var(--ink);
+  font: 400 var(--digichat-launcher-chrome-fs) / 1.2 var(--font-mono);
+  letter-spacing: 0;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.digichat-launcher__new:hover::after,
+.digichat-launcher__new:focus-visible::after {
+  opacity: 1;
+}
+
+.digichat-launcher__body {
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+  /* Held back until the bar starts lifting, so step 1 reads as a bar and not
+     as a clipped chat surface. */
+  animation: digichat-launcher-body-in 0.17s var(--ease) 0.17s both;
+}
+
+.digichat-launcher__panel.is-closing .digichat-launcher__body {
+  animation: digichat-launcher-body-in 0.1s var(--ease) reverse both;
+}
+
+@keyframes digichat-launcher-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+@keyframes digichat-launcher-body-in {
+  from {
+    opacity: 0;
+  }
+}
+
+/* Step 1 (0 → 50%): widen at the trigger's height. Step 2 (50 → 100%): grow up. */
+@keyframes digichat-launcher-open {
+  0% {
+    width: var(--digichat-launcher-size);
+    height: var(--digichat-launcher-size);
+    opacity: 0;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  50% {
+    width: var(--digichat-launcher-panel-width);
+    height: var(--digichat-launcher-size);
+  }
+
+  100% {
+    width: var(--digichat-launcher-panel-width);
+    height: var(--digichat-launcher-panel-height);
+    opacity: 1;
+  }
+}
+
+@keyframes digichat-launcher-close {
+  0% {
+    width: var(--digichat-launcher-panel-width);
+    height: var(--digichat-launcher-panel-height);
+    opacity: 1;
+  }
+
+  50% {
+    width: var(--digichat-launcher-panel-width);
+    height: var(--digichat-launcher-size);
+  }
+
+  80% {
+    opacity: 1;
+  }
+
+  100% {
+    width: var(--digichat-launcher-size);
+    height: var(--digichat-launcher-size);
+    opacity: 0;
+  }
+}
+
+.digichat-launcher [data-slot="aui_composer-shell"] {
+  --composer-bg: transparent;
+  background: transparent;
+}
+
+/* Compact Thread inside the panel: one input row until a newline.
+   Overrides registry min-h-7 / leading-7 / gap-2 / 8px composer padding.
+   Empty and one-line typed share 1lh — do not shorten :placeholder-shown. */
+.digichat-launcher [data-slot="aui_composer-shell"][data-layout="compact"] {
+  --composer-padding: 0.25rem;
+  --launcher-compact-pad-x: 0.375rem;
+  --launcher-compact-gap: 0.25rem;
+  --launcher-compact-line: 1.375rem;
+  gap: 0;
+  padding: var(--composer-padding) var(--launcher-compact-pad-x);
+}
+
+.digichat-launcher [data-slot="aui_composer-shell"][data-layout="compact"] .aui-composer-main {
+  align-items: center;
+  gap: var(--launcher-compact-gap);
+}
+
+.digichat-launcher [data-slot="aui_composer-shell"][data-layout="compact"] textarea.aui-composer-input {
+  box-sizing: border-box;
+  field-sizing: content;
+  min-height: 1lh;
+  padding-block: 0;
+  line-height: var(--launcher-compact-line);
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.digichat-launcher [data-slot="aui_composer-shell"][data-layout="compact"] textarea.aui-composer-input:placeholder-shown {
+  field-sizing: fixed;
+  height: 1lh;
+  min-height: 1lh;
+  max-height: 1lh;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .digichat-launcher__mark rect,
+  .digichat-launcher__cursor,
+  .digichat-launcher__panel,
+  .digichat-launcher__panel.is-closing,
+  .digichat-launcher__body,
+  .digichat-launcher__panel.is-closing .digichat-launcher__body {
+    animation: none;
+  }
+
+  .digichat-launcher__trigger,
+  .digichat-launcher__new,
+  .digichat-launcher__close {
+    transition: none;
+  }
+}

package/src/styles/docs.css

@@ -0,0 +1,165 @@
+/* ==========================================================================
+   @digithings-ai/ui — docs family structural CSS (components/docs/*).
+   Import AFTER the token bridge, in the app's globals.css:
+     @import "tailwindcss";
+     @import "@digithings-ai/design/tokens.css";
+     @import "@digithings-ai/ui/styles/web-theme.css";
+     @import "@digithings-ai/ui/styles/docs.css";
+     @source "<path-to>/packages/ui/src/components/docs";
+   The @source line is load-bearing (path relative to the app's globals.css):
+   the docs components carry token-backed utilities, and Tailwind does not
+   scan package sources on its own.
+
+   Utilities in the components carry the clean layout/spacing/color/type.
+   This file holds only what must stay CSS: the responsive shell + sticky
+   sidebar, the native <details> disclosure marker, hover-reveal combinators,
+   table row hairlines, print hygiene, and the HTTP-method color ramp.
+   Consumers with fixed chrome set --docs-nav-h (defaults to 62px).
+   ========================================================================== */
+
+/* ── HTTP-method color ramp ────────────────────────────────────────────────
+   The four base hues are digithings-web's historical badge colors, promoted
+   from raw hex at the use site to family-scoped custom props. Each final
+   prop mixes 20% of the theme's --ink into the hue, so ONE rule is
+   theme-aware: dark ink (#ECEEF0) lifts the chip toward its near-black
+   --on-accent text (contrast ≥ 4.9:1 across the ramp); light ink (#14181B)
+   deepens the chip under its white --on-accent text (≥ 4.6:1). Badges
+   consume var(--method-*) only — never the raw hex. */
+:where(.docs-shell, .doc-endpoint) {
+  --method-hue-get: #3b82a6;
+  --method-hue-post: #3f9e74;
+  --method-hue-put: #b5832a;
+  --method-hue-delete: #c9533b;
+  --method-get: color-mix(in srgb, var(--method-hue-get) 80%, var(--ink));
+  --method-post: color-mix(in srgb, var(--method-hue-post) 80%, var(--ink));
+  --method-put: color-mix(in srgb, var(--method-hue-put) 80%, var(--ink));
+  --method-delete: color-mix(in srgb, var(--method-hue-delete) 80%, var(--ink));
+}
+
+/* ── shell: one column; the sidebar reveals sticky ≥ 860px ──────────────── */
+.docs-shell {
+  /* component tokens — docs shell geometry */
+  --docs-gap: clamp(1.4rem, 3vw, 2.4rem);
+  --docs-gap-wide: clamp(2rem, 4vw, 3rem);
+  --docs-max: 1040px;
+  --docs-pad-inline: clamp(1rem, 4vw, 2rem);
+  --docs-side-w: 200px;
+  --docs-rail-w: 200px;
+  --docs-sticky-gap: 1.2rem;
+  --docs-sticky-clear: 2rem;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--docs-gap);
+  max-width: var(--docs-max);
+  margin: 0 auto;
+  padding: 0 var(--docs-pad-inline);
+}
+.docs-side { display: none; }
+@media (min-width: 860px) {
+  /* The two-column grid requires a sidebar: sidebar-less shells (e.g.
+     /docs/api, which renders only .docs-content) must stay a full-width
+     single column instead of dropping their content into the 200px sidebar
+     track (#4206). */
+  .docs-shell:has(> .docs-side) {
+    grid-template-columns: var(--docs-side-w) minmax(0, 1fr);
+    align-items: start;
+    gap: var(--docs-gap-wide);
+  }
+  .docs-side {
+    display: block;
+    position: sticky;
+    top: calc(var(--docs-nav-h, 62px) + var(--docs-sticky-gap));
+    max-height: calc(100vh - var(--docs-nav-h, 62px) - var(--docs-sticky-clear));
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+  .docs-side-mobile { display: none; }
+}
+
+/* Anchored doc sections land clear of the fixed chrome. */
+.docs-content :where([id]) {
+  scroll-margin-top: calc(var(--docs-nav-h, 62px) + var(--space-3));
+}
+
+/* ── mobile disclosure: the sidebar never just vanishes (canon §17) ─────── */
+.docs-side-mobile summary { list-style: none; }
+.docs-side-mobile summary::-webkit-details-marker { display: none; }
+.docs-side-mobile summary::before { content: "▸ "; color: var(--accent); }
+.docs-side-mobile[open] summary::before { content: "▾ "; }
+.docs-side-mobile[open] summary { margin-bottom: var(--space-2); }
+
+/* ── code blocks: the copy affordance reveals on hover / focus ──────────── */
+.doc-code {
+  /* component tokens — copy affordance inset */
+  --doc-copy-inset: 0.4rem;
+}
+
+.doc-code .docs-code-copy {
+  position: absolute;
+  top: var(--doc-copy-inset);
+  inset-inline-end: var(--doc-copy-inset);
+  opacity: 0;
+  transition: opacity 0.15s var(--ease, ease);
+}
+.doc-code:hover .docs-code-copy,
+.doc-code .docs-code-copy:focus-visible { opacity: 1; }
+
+/* ── field tables: row hairlines need combinators + a two-token mix ───────
+   Wave-3 T2 re-audit: kept, not migrated to the canonical kit <Table/>.
+   The kit Table is a header/density component (p-2 cells, full-strength
+   `border-b`, text-xs) — Task 1b gap 6 records that it has no `density` or
+   `numeric` API, and this field table needs 0.3rem/0 top-biased density,
+   a 60%-mix hairline with no border on the last row, a nowrap name/type
+   pair beside a wrapping full-width description, and no header row. It is
+   the only consumer (docs/Endpoint.tsx:70). Migrating would mean overriding
+   every kit cell with counter-utilities — a re-style, not a promotion — so
+   it stays family CSS until kit Table grows the density/numeric API. */
+.doc-fields {
+  --doc-field-pad-block: 0.3rem;
+  --doc-field-pad-inline: 0.6rem;
+}
+
+.doc-fields td {
+  padding: var(--doc-field-pad-block) var(--doc-field-pad-inline) var(--doc-field-pad-block) 0;
+  vertical-align: top;
+  border-bottom: 1px solid color-mix(in srgb, var(--hair) 60%, transparent);
+}
+.doc-fields tr:last-child td { border-bottom: 0; }
+
+/* ── on-this-page rail: a third column on wide viewports ───────────────────
+   Opt-in: a page supplies `rail` entries and the shell grows a column. Below
+   1200px the entries stay out of the layout — the sidebar already carries the
+   page's sections and the mobile disclosure keeps them reachable. */
+.docs-rail { display: none; }
+
+/* The search affordance sits above the hero, right-aligned with the field. */
+.docs-search { display: flex; justify-content: flex-end; }
+
+@media (min-width: 1200px) {
+  .docs-shell:has(> .docs-side):has(> .docs-rail) {
+    grid-template-columns: var(--docs-side-w) minmax(0, 1fr) var(--docs-rail-w);
+  }
+  .docs-shell:has(> .docs-rail):not(:has(> .docs-side)) {
+    grid-template-columns: minmax(0, 1fr) var(--docs-rail-w);
+  }
+  .docs-rail {
+    display: block;
+    align-self: start;
+    position: sticky;
+    /* Same offset as .docs-side, so "on this page" lines up with Guides. */
+    top: calc(var(--docs-nav-h, 62px) + var(--docs-sticky-gap, 1.2rem));
+    max-height: calc(100vh - var(--docs-nav-h, 62px) - var(--docs-sticky-clear, 2rem));
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+}
+
+/* ── print: navigation chrome drops out; content flows full-width ───────── */
+@media print {
+  .docs-side,
+  .docs-side-mobile,
+  .docs-rail,
+  .docs-code-copy { display: none; }
+  .docs-shell { grid-template-columns: 1fr; }
+}