@adia-ai/web-components 0.0.1

package/components/timeline/timeline.css

@@ -0,0 +1,389 @@
+/* ═══════════════════════════════════════════════════════════════
+   TIMELINE-N + TIMELINE-ITEM-N
+
+   Grid-based layout with three columns:
+     [marker] var(--timeline-marker-w) [content] 1fr [aside] auto
+
+   Items are subgrid of the container, so their dots/labels/aside
+   align perfectly to a single vertical axis regardless of size.
+
+   When timeline-ui is nested inside agent-reasoning-ui (or another
+   grid ancestor that exposes the same columns), it inherits them
+   via subgrid so the nested rows align to the outer grid.
+
+   For numbered-wizard patterns, use <stepper-ui>.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Container ── */
+@scope (timeline-ui) {
+  :where(:scope) {
+    /* Grid */
+    --timeline-marker-w:           1.25rem;
+    --timeline-gap-col:            var(--a-space-2);
+    --timeline-gap-row:            var(--a-space-3);
+
+    /* Dot */
+    --timeline-dot-size:           0.625rem;
+    --timeline-dot-bg:             var(--a-border);
+    --timeline-dot-bg-active:      var(--a-accent-bg);
+    --timeline-dot-bg-done:        var(--a-success-bg);
+    --timeline-dot-bg-error:       var(--a-danger-bg);
+    --timeline-dot-bg-warning:     var(--a-warning-bg);
+
+    /* Sub-dot (outcomes) */
+    --timeline-subdot-size:        4px;
+    --timeline-subdot-bg:          var(--a-fg-subtle);
+
+    /* Connector line */
+    --timeline-line-size:          2px;
+    --timeline-line-fg:            var(--a-border-subtle);
+    --timeline-line-fg-done:       var(--a-border);
+
+    /* Icon (replaces dot) */
+    --timeline-icon-size:          1rem;
+    --timeline-icon-bg:            var(--a-bg-muted);
+    --timeline-icon-fg:            var(--a-fg-subtle);
+    --timeline-icon-bg-success:    var(--a-success-muted);
+    --timeline-icon-fg-success:    var(--a-success);
+    --timeline-icon-bg-accent:     var(--a-accent-muted);
+    --timeline-icon-fg-accent:     var(--a-accent);
+    --timeline-icon-bg-warning:    var(--a-warning-muted);
+    --timeline-icon-fg-warning:    var(--a-warning);
+    --timeline-icon-bg-danger:     var(--a-danger-muted);
+    --timeline-icon-fg-danger:     var(--a-danger);
+
+    /* Typography */
+    --timeline-label-weight:       var(--a-weight-medium);
+    --timeline-label-size:         var(--a-ui-size);
+    --timeline-label-fg:           var(--a-fg);
+    --timeline-label-fg-muted:     var(--a-fg-muted);
+    --timeline-desc-fg:            var(--a-fg-subtle);
+    --timeline-desc-size:          var(--a-ui-sm);
+    --timeline-time-fg:            var(--a-fg-muted);
+    --timeline-time-size:          var(--a-ui-sm);
+    --timeline-outcome-fg:         var(--a-fg-muted);
+
+    /* Motion */
+    --timeline-duration:           var(--a-duration-fast);
+    --timeline-easing:             var(--a-easing-out);
+    --timeline-spin-duration:      0.8s;
+    --timeline-pulse-duration:     2s;
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns:
+      [marker] var(--timeline-marker-w)
+      [content] 1fr
+      [aside] auto;
+    column-gap: var(--timeline-gap-col);
+    row-gap: var(--timeline-gap-row);
+    min-width: 0;
+  }
+
+  /* Compact variant (agent-reasoning + chat-adjacent) */
+  :scope[size="sm"] {
+    --timeline-marker-w: 1rem;
+    --timeline-dot-size: 6px;
+    --timeline-gap-row: var(--a-space-2);
+    --timeline-label-size: var(--a-ui-sm);
+    --timeline-label-weight: var(--a-weight-normal);
+  }
+
+  /* Horizontal layout — fall back to flow layout; drops subgrid.
+     Horizontal timelines don't need column alignment since items sit
+     side-by-side, not stacked. */
+  :scope[orientation="horizontal"] {
+    display: flex;
+    flex-direction: row;
+    gap: 0;
+  }
+}
+
+/* When nested inside agent-reasoning-ui or other grid ancestors that
+   expose the same three named columns, inherit them via subgrid so
+   the inner rows align to the outer axis. */
+agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
+[data-reasoning-iteration] timeline-ui:not([orientation="horizontal"]) {
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+}
+
+/* ── Item base: each item is its own subgrid row ── */
+
+timeline-item-ui {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  grid-auto-rows: auto;
+  align-items: baseline;
+  position: relative;
+  min-width: 0;
+}
+
+/* Stamp default slot children when the author didn't — see timeline.js */
+timeline-item-ui [slot] {
+  min-width: 0;
+}
+
+/* ═══════ Marker (dot) — positioned absolutely in the marker column ═══════ */
+
+timeline-item-ui::before {
+  content: '';
+  position: absolute;
+  left: calc((var(--timeline-marker-w) - var(--timeline-dot-size)) / 2);
+  top: calc((1.4em - var(--timeline-dot-size)) / 2 + 1px);
+  width: var(--timeline-dot-size);
+  height: var(--timeline-dot-size);
+  border-radius: 50%;
+  background: var(--timeline-dot-bg);
+  box-sizing: border-box;
+  z-index: 1;
+  transition: background var(--timeline-duration) var(--timeline-easing);
+}
+
+/* State: completed → success dot */
+timeline-item-ui[completed]::before {
+  background: var(--timeline-dot-bg-done);
+}
+
+/* State: active → accent dot */
+timeline-item-ui[active]::before {
+  background: var(--timeline-dot-bg-active);
+}
+
+/* State: error → danger dot */
+timeline-item-ui[error]::before {
+  background: var(--timeline-dot-bg-error);
+}
+
+/* Variant: success / accent / warning / danger (for non-active items) */
+timeline-item-ui[variant="success"]:not([active]):not([error])::before { background: var(--timeline-dot-bg-done); }
+timeline-item-ui[variant="accent"]:not([active]):not([error])::before  { background: var(--timeline-dot-bg-active); }
+timeline-item-ui[variant="warning"]:not([active]):not([error])::before { background: var(--timeline-dot-bg-warning); }
+timeline-item-ui[variant="danger"]:not([active]):not([error])::before  { background: var(--timeline-dot-bg-error); }
+
+/* Spinner on active items — render as a ring that spins */
+timeline-item-ui[active][spinner]::before {
+  background: transparent;
+  border: 2px solid var(--timeline-dot-bg);
+  border-top-color: var(--timeline-dot-bg-active);
+  animation: tl-spin var(--timeline-spin-duration) linear infinite;
+}
+
+/* When size=sm, ring is 1.5px so the small dot still looks crisp */
+timeline-ui[size="sm"] > timeline-item-ui[active][spinner]::before {
+  border-width: 1.5px;
+}
+
+/* ═══════ Connector line ═══════ */
+
+timeline-item-ui::after {
+  content: '';
+  position: absolute;
+  left: calc((var(--timeline-marker-w) - var(--timeline-line-size)) / 2);
+  top: calc((1.4em + var(--timeline-dot-size)) / 2 + 2px);
+  bottom: calc(-1 * var(--timeline-gap-row));
+  width: var(--timeline-line-size);
+  background: var(--timeline-line-fg);
+}
+
+timeline-item-ui[completed]::after { background: var(--timeline-line-fg-done); }
+timeline-item-ui[data-last]::after { display: none; }
+
+/* ═══════ Icon mode — icon-ui in [slot="icon"] replaces the dot ═══════ */
+
+timeline-item-ui:has(> [slot="icon"])::before { display: none; }
+
+timeline-item-ui > [slot="icon"] {
+  grid-column: marker;
+  grid-row: 1;
+  justify-self: center;
+  align-self: baseline;
+  margin-top: calc((1.4em - var(--timeline-icon-size)) / 2);
+  width: var(--timeline-icon-size);
+  height: var(--timeline-icon-size);
+  border-radius: 50%;
+  background: var(--timeline-icon-bg);
+  color: var(--timeline-icon-fg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  --a-icon-size: calc(var(--timeline-icon-size) * 0.625);
+  z-index: 1;
+  box-sizing: border-box;
+}
+
+/* Variant icons */
+timeline-item-ui[variant="success"] > [slot="icon"] { background: var(--timeline-icon-bg-success); color: var(--timeline-icon-fg-success); }
+timeline-item-ui[variant="accent"]  > [slot="icon"] { background: var(--timeline-icon-bg-accent);  color: var(--timeline-icon-fg-accent); }
+timeline-item-ui[variant="warning"] > [slot="icon"] { background: var(--timeline-icon-bg-warning); color: var(--timeline-icon-fg-warning); }
+timeline-item-ui[variant="danger"]  > [slot="icon"] { background: var(--timeline-icon-bg-danger);  color: var(--timeline-icon-fg-danger); }
+
+/* Push connector line past the icon circle */
+timeline-item-ui:has(> [slot="icon"])::after {
+  top: calc((1.4em + var(--timeline-icon-size)) / 2 + 2px);
+}
+
+/* ═══════ Content slots ═══════ */
+
+timeline-item-ui > [slot="label"] {
+  grid-column: content;
+  grid-row: 1;
+  font-weight: var(--timeline-label-weight);
+  font-size: var(--timeline-label-size);
+  color: var(--timeline-label-fg);
+  line-height: 1.4;
+  overflow-wrap: break-word;
+  min-width: 0;
+}
+
+timeline-item-ui[completed] > [slot="label"] {
+  color: var(--timeline-label-fg-muted);
+}
+
+timeline-item-ui > [slot="description"] {
+  grid-column: content / -1;
+  grid-row: 2;
+  color: var(--timeline-desc-fg);
+  font-size: var(--timeline-desc-size);
+  line-height: 1.5;
+  margin-top: var(--a-space-0-5);
+}
+
+timeline-item-ui > [slot="time"] {
+  grid-column: aside;
+  grid-row: 1;
+  color: var(--timeline-time-fg);
+  font-size: var(--timeline-time-size);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.4;
+  white-space: nowrap;
+  justify-self: end;
+}
+
+/* Hide empty slots so they don't steal grid track space */
+timeline-item-ui > [slot]:empty {
+  display: none;
+}
+
+/* ═══════ Outcomes — nested sub-rows ═══════ */
+
+timeline-item-ui > [slot="outcomes"] {
+  grid-column: content / -1;
+  grid-row: 3;
+  margin: var(--a-space-1) 0 0 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-space-0-5);
+  color: var(--timeline-outcome-fg);
+  font-size: var(--timeline-desc-size);
+  line-height: 1.4;
+  animation: tl-fade var(--timeline-duration) var(--timeline-easing);
+}
+
+timeline-item-ui > [slot="outcomes"][hidden] { display: none; }
+
+timeline-item-ui > [slot="outcomes"] > li {
+  position: relative;
+  padding-left: 0.75rem;
+  overflow-wrap: break-word;
+  min-width: 0;
+}
+
+timeline-item-ui > [slot="outcomes"] > li::before {
+  content: '';
+  position: absolute;
+  left: calc((0.75rem - var(--timeline-subdot-size)) / 2);
+  top: calc((1.4em - var(--timeline-subdot-size)) / 2 + 1px);
+  width: var(--timeline-subdot-size);
+  height: var(--timeline-subdot-size);
+  border-radius: 50%;
+  background: var(--timeline-subdot-bg);
+}
+
+/* ═══════ Toggle chevron (outcomes) ═══════ */
+
+/* Positioned absolutely at the item's trailing edge so it coexists with
+   [slot="time"] (which also lives in the aside column). The item itself
+   is position: relative. */
+timeline-item-ui > [data-timeline-toggle] {
+  position: absolute;
+  inset-inline-end: 0;
+  top: calc((1.4em - 1em) / 2);
+  background: none;
+  border: none;
+  padding: 0 var(--a-space-0-5);
+  margin: 0;
+  cursor: pointer;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+/* Reserve room so the time isn't overlapped by the chevron */
+timeline-item-ui:has(> [data-timeline-toggle]) > [slot="time"] {
+  margin-inline-end: 1.5rem;
+}
+
+timeline-item-ui > [data-timeline-toggle]:focus-visible {
+  outline: 2px solid var(--a-focus-ring, var(--a-accent));
+  outline-offset: 2px;
+  border-radius: var(--a-radius-sm);
+}
+
+/* ═══════ Horizontal layout — flow, not grid ═══════ */
+
+timeline-ui[orientation="horizontal"] > timeline-item-ui {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-width: 0;
+  padding-top: calc(var(--timeline-dot-size) + var(--timeline-gap-col));
+  text-align: center;
+  position: relative;
+}
+
+timeline-ui[orientation="horizontal"] > timeline-item-ui::before {
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+timeline-ui[orientation="horizontal"] > timeline-item-ui::after {
+  left: 50%;
+  top: calc(var(--timeline-dot-size) / 2 - var(--timeline-line-size) / 2);
+  right: -50%;
+  bottom: auto;
+  width: 100%;
+  height: var(--timeline-line-size);
+}
+
+timeline-ui[orientation="horizontal"] > timeline-item-ui > [slot="label"],
+timeline-ui[orientation="horizontal"] > timeline-item-ui > [slot="description"],
+timeline-ui[orientation="horizontal"] > timeline-item-ui > [slot="time"] {
+  grid-column: auto;
+  grid-row: auto;
+  margin-top: var(--a-space-1);
+}
+
+/* ═══════ Animations ═══════ */
+
+@keyframes tl-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes tl-fade {
+  from { opacity: 0; transform: translateY(-2px); }
+  to   { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  timeline-item-ui[active][spinner]::before { animation: none; }
+}

package/components/timeline/timeline.js

@@ -0,0 +1,171 @@
+/**
+ * <timeline-ui> — Vertical (or horizontal) event / progress log.
+ *
+ * Each <timeline-item-ui> is one entry, with its own state (completed / active
+ * / error), optional icon, duration, and an expandable outcomes list.
+ *
+ *   <timeline-ui>
+ *     <timeline-item-ui text="Shipped"   time="2h ago" completed></timeline-item-ui>
+ *     <timeline-item-ui text="Delivery"  time="now"    active spinner></timeline-item-ui>
+ *     <timeline-item-ui text="Received"                         ></timeline-item-ui>
+ *   </timeline-ui>
+ *
+ * For agent reasoning / pipeline views, set size="sm" and use
+ *   duration, outcomes, spinner, error
+ *
+ *   <timeline-ui size="sm">
+ *     <timeline-item-ui text="search" duration="850ms" completed></timeline-item-ui>
+ *     <timeline-item-ui text="generate" active spinner></timeline-item-ui>
+ *   </timeline-ui>
+ *
+ * For wizard / numbered-circle patterns, use the dedicated <stepper-ui>.
+ *
+ * Attributes (container):
+ *   orientation — vertical (default) | horizontal
+ *   size        — md (default) | sm
+ *
+ * Attributes (item):
+ *   text        — primary label
+ *   description — secondary text (optional)
+ *   time        — right-aligned timestamp (optional; mutually exclusive with duration)
+ *   duration    — right-aligned duration label (e.g. "850ms", "2s"); also set when live=true
+ *   icon        — icon-ui name (replaces the dot when set)
+ *   variant     — default | success | accent | warning | danger  (colors the dot/icon)
+ *   completed   — boolean; renders "done" state
+ *   active      — boolean; renders "active" state
+ *   error       — boolean; renders "error" state (red dot)
+ *   spinner     — boolean; spinning dot while active
+ *
+ * JS (item):
+ *   .outcomes = string[]    // renders an expandable sub-list under the row
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+// ── Container ──────────────────────────────────────────────────
+
+class AdiaTimeline extends AdiaElement {
+  static properties = {
+    orientation: { type: String, default: 'vertical', reflect: true },
+    size:        { type: String, default: 'md',       reflect: true },
+  };
+
+  static template = () => null;
+
+  render() {
+    const items = [...this.querySelectorAll(':scope > timeline-item-ui')];
+    for (const item of items) item.removeAttribute('data-last');
+    const last = items[items.length - 1];
+    if (last) last.setAttribute('data-last', '');
+  }
+}
+
+customElements.define('timeline-ui', AdiaTimeline);
+
+// ── Item ───────────────────────────────────────────────────────
+
+class AdiaTimelineItem extends AdiaElement {
+  static properties = {
+    text:        { type: String,  default: '',        reflect: true },
+    description: { type: String,  default: '',        reflect: true },
+    time:        { type: String,  default: '',        reflect: true },
+    duration:    { type: String,  default: '',        reflect: true },
+    icon:        { type: String,  default: '',        reflect: true },
+    variant:     { type: String,  default: 'default', reflect: true },
+    completed:   { type: Boolean, default: false,     reflect: true },
+    active:      { type: Boolean, default: false,     reflect: true },
+    error:       { type: Boolean, default: false,     reflect: true },
+    spinner:     { type: Boolean, default: false,     reflect: true },
+  };
+
+  static template = () => null;
+
+  #outcomes = [];
+  #expanded = false;
+
+  get outcomes() { return this.#outcomes; }
+  set outcomes(v) {
+    this.#outcomes = Array.isArray(v) ? v.slice() : [];
+    this.render();
+  }
+
+  connected() {
+    if (!this.querySelector(':scope > [slot="label"]')) {
+      // Author provided just text/time — stamp the default slot structure
+      this.innerHTML = `
+        <span slot="label"></span>
+        <span slot="description"></span>
+        <span slot="time"></span>
+      `;
+    }
+  }
+
+  render() {
+    const label = this.querySelector(':scope > [slot="label"]');
+    const desc  = this.querySelector(':scope > [slot="description"]');
+    const time  = this.querySelector(':scope > [slot="time"]');
+    if (label) label.textContent = this.text;
+    if (desc)  desc.textContent  = this.description;
+    if (time)  time.textContent  = this.duration || this.time;
+
+    if (this.icon) {
+      let iconEl = this.querySelector(':scope > [slot="icon"]');
+      if (!iconEl) {
+        iconEl = document.createElement('icon-ui');
+        iconEl.setAttribute('slot', 'icon');
+        this.prepend(iconEl);
+      }
+      iconEl.setAttribute('name', this.icon);
+    } else {
+      this.querySelector(':scope > [slot="icon"]')?.remove();
+    }
+
+    // Outcomes sub-list + toggle chevron
+    let body = this.querySelector(':scope > [slot="outcomes"]');
+    if (this.#outcomes.length > 0) {
+      if (!body) {
+        body = document.createElement('ul');
+        body.setAttribute('slot', 'outcomes');
+        this.appendChild(body);
+      }
+      body.innerHTML = '';
+      for (const o of this.#outcomes) {
+        const li = document.createElement('li');
+        li.textContent = o;
+        body.appendChild(li);
+      }
+      body.hidden = !this.#expanded;
+
+      // Toggle chevron lives on the row — we stamp a button once
+      let toggle = this.querySelector(':scope > [data-timeline-toggle]');
+      if (!toggle) {
+        toggle = document.createElement('button');
+        toggle.type = 'button';
+        toggle.setAttribute('data-timeline-toggle', '');
+        toggle.setAttribute('aria-label', 'Toggle details');
+        toggle.addEventListener('click', (e) => {
+          e.stopPropagation();
+          this.#expanded = !this.#expanded;
+          this.render();
+          this.dispatchEvent(new CustomEvent('timeline-toggle', {
+            bubbles: true, detail: { expanded: this.#expanded },
+          }));
+        });
+        this.appendChild(toggle);
+      }
+      toggle.innerHTML = '';
+      const caret = document.createElement('icon-ui');
+      caret.setAttribute('name', this.#expanded ? 'caret-down' : 'caret-right');
+      caret.setAttribute('color', 'muted');
+      caret.setAttribute('size', 'sm');
+      toggle.appendChild(caret);
+    } else {
+      this.querySelector(':scope > [data-timeline-toggle]')?.remove();
+      body?.remove();
+    }
+  }
+}
+
+customElements.define('timeline-item-ui', AdiaTimelineItem);
+
+export { AdiaTimeline, AdiaTimelineItem };