@ultimat3/ui 29.4.0 → 30.1.0

package/src/components/Tabs.module.scss

@@ -38,6 +38,7 @@
 }
 
 .tab {
+  display: inline-block;
   @include t.focus-ring('accent', t.stroke(thick), calc(-1 * #{t.stroke(thick)}));
   @include t.transition(color, box-shadow, background);
   padding-block: t.space(2);
@@ -57,7 +58,11 @@
 
   @include t.disabled(0.5);
 
-  &[aria-selected='true'] {
+  // Link mode: a link is never disabled, and the current page reads as the selected tab.
+  text-decoration: none;
+
+  &[aria-selected='true'],
+  &[aria-current='page'] {
     color: t.role('accent');
     // Inset shadow instead of a border, so the tab does not shift on select.
     box-shadow: inset 0 calc(-1 * #{t.stroke(thick)}) 0 0 t.role('accent');
@@ -72,3 +77,10 @@
     outline-offset: t.stroke(thick);
   }
 }
+
+// Link mode's `<ul>`: the list look without the bullets, scrolling sideways in its own box.
+.links {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

package/src/components/Tabs.tsx

@@ -1,11 +1,16 @@
 // Tablist with roving tabindex: one Tab in the page tab order, arrows move
 // between them, Home/End jump to the ends, and arrow direction follows `dir`.
+// Link mode (`hrefFor`, no `onChange`) is a `<nav>` of links with `aria-current`, never
+// `role="tab"`: ARIA tabs promise panels on this page, and a link tab's panel is the next page.
 
 import type { JSX } from 'solid-js';
 import { ariaBool, rovingTabindex, useId } from '../a11y';
 import { cx } from '../cx';
+import { invalidValueError } from '../errors';
 import { TAB_SELECTOR, tabStopIndex } from '../roving';
 import { useUi } from '../theme/context';
+import { solid } from '../theme/solid-adapter';
+import { linkTarget } from './link-target';
 import styles from './Tabs.module.scss';
 
 export interface TabItem {
@@ -16,7 +21,7 @@ export interface TabItem {
   disabled?: boolean | undefined;
 }
 
-export interface TabsProps {
+export interface TabsButtonProps {
   items: readonly TabItem[];
   /** Selected tab id. Controlled — the caller owns the state. */
   value: string;
@@ -24,10 +29,81 @@ export interface TabsProps {
   /** Already-translated accessible name for the tablist. */
   label: string;
   orientation?: 'horizontal' | 'vertical' | undefined;
+  hrefFor?: undefined;
+  children?: undefined;
   class?: string | undefined;
 }
 
+/** A tab that is a URL: the page the link opens renders its own content. */
+export interface TabLinkItem {
+  id: string;
+  /** Already-translated tab label. */
+  label: string;
+}
+
+export interface TabsLinkProps {
+  items: readonly TabLinkItem[];
+  /** The current tab's id — the page being rendered. */
+  value: string;
+  /** Each tab's URL. Server-rendered links: no script, and the back button works. */
+  hrefFor: (id: string) => string;
+  /** The `<nav>`'s accessible name. */
+  label: string;
+  /** The current tab's content, rendered under the links. */
+  children?: JSX.Element | undefined;
+  onChange?: undefined;
+  orientation?: undefined;
+  class?: string | undefined;
+}
+
+export type TabsProps = TabsButtonProps | TabsLinkProps;
+
 export function Tabs(props: TabsProps): JSX.Element {
+  // A mode is fixed for a use, so the branch is decided once.
+  if (props.hrefFor !== undefined) return LinkTabs(props);
+  return ButtonTabs(props);
+}
+
+function LinkTabs(props: TabsLinkProps): JSX.Element {
+  const rt = solid();
+  let current: HTMLAnchorElement | undefined;
+  // A strip wider than a phone scrolls in its own box; the current tab is brought into it.
+  rt.createEffect(() => {
+    if (current !== undefined && typeof current.scrollIntoView === 'function') {
+      current.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
+  });
+  const href = (id: string): string | undefined => {
+    const value: unknown = props.hrefFor(id);
+    if (typeof value !== 'string') throw invalidValueError('Tabs hrefFor', value, 'a string URL');
+    return linkTarget(value).href;
+  };
+  return (
+    <div class={cx(styles['tabs'], styles['orientation-horizontal'], props.class)}>
+      <nav aria-label={props.label}>
+        <ul class={cx(styles['list'], styles['links'])}>
+          {props.items.map((item) => (
+            <li>
+              <a
+                ref={(el: HTMLAnchorElement) => {
+                  if (item.id === props.value) current = el;
+                }}
+                class={styles['tab']}
+                href={href(item.id)}
+                aria-current={item.id === props.value ? 'page' : undefined}
+              >
+                {item.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+      {props.children === undefined ? null : <div class={styles['panel']}>{props.children}</div>}
+    </div>
+  );
+}
+
+function ButtonTabs(props: TabsButtonProps): JSX.Element {
   const ui = useUi();
   const base = useId('tabs');
   let list: HTMLDivElement | undefined;

package/src/components/TerminalView.module.scss

@@ -0,0 +1,68 @@
+@use '../tokens' as t;
+
+// Colours are roles (`ansi.ts`): a theme recolours output, and 256/truecolor never reach here.
+.terminal {
+  @include t.focus-ring;
+  border-radius: t.radius(md);
+  background: t.role('bg-soft');
+  color: t.role('fg');
+  font-family: var(--font-mono);
+  font-size: t.text(sm);
+  text-align: start;
+}
+
+// `rows` lines tall, in the box's own line height, never past most of the viewport.
+// VirtualList's frame fills the box, and is a grid whose one row may SHRINK: an auto row grows to
+// every row's height, and the list then measured itself as tall as the log and drew every line.
+.frame {
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.box {
+  block-size: min(70vh, calc(var(--terminal-rows, 24) * 1lh));
+}
+
+.line {
+  display: block;
+  padding-inline: t.space(3);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.fg-muted {
+  color: t.role('fg-muted');
+}
+.fg-strong {
+  color: t.role('fg-strong');
+}
+.fg-danger {
+  color: t.role('danger');
+}
+.fg-success {
+  color: t.role('success');
+}
+.fg-warning {
+  color: t.role('warning');
+}
+.fg-info {
+  color: t.role('info');
+}
+.fg-chart-5 {
+  color: t.role('chart-5');
+}
+.fg-chart-1 {
+  color: t.role('chart-1');
+}
+
+.bold {
+  font-weight: t.weight(bold);
+}
+.dim {
+  color: t.role('fg-muted');
+}
+.italic {
+  font-style: italic;
+}
+.underline {
+  text-decoration: underline;
+}

package/src/components/TerminalView.tsx

@@ -0,0 +1,97 @@
+// One styled stream of terminal output on `VirtualList`: SGR colours as roles, every other escape
+// dropped, wrapped by default, left-to-right under `dir="rtl"`. A focusable region where Home and
+// End jump. Output only: keystrokes are an app's island over its own transport.
+
+import { finiteCount } from '@ultimat3/core';
+import type { JSX } from 'solid-js';
+import { type AnsiLine, parseAnsi } from '../content/ansi';
+import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
+import { useUi } from '../theme/context';
+import { solid } from '../theme/solid-adapter';
+import styles from './TerminalView.module.scss';
+import { VirtualList } from './VirtualList';
+
+export interface TerminalViewProps {
+  /** Raw output, escapes and all. */
+  text: string;
+  /** Already-translated name of the region; defaults to `ui.code.terminal`. */
+  label?: string | undefined;
+  /** Lines tall, before it scrolls. Defaults to 24, a terminal's own. */
+  rows?: number | undefined;
+  /** Follow the end as output arrives. Defaults to true. */
+  follow?: boolean | undefined;
+  class?: string | undefined;
+}
+
+interface Row {
+  readonly id: string;
+  readonly runs: AnsiLine;
+}
+
+export function TerminalView(props: TerminalViewProps): JSX.Element {
+  const ui = useUi();
+  const rt = solid();
+  const rows = rt.createMemo((): readonly Row[] =>
+    parseAnsi(props.text).map((runs, index) => ({ id: String(index), runs })),
+  );
+  let region: HTMLDivElement | undefined;
+  const label = (): string => props.label ?? ui.t(UI_KEYS.codeTerminal);
+
+  const line = (row: Row): JSX.Element => (
+    <span class={styles['line']}>
+      {row.runs.length === 0
+        ? ' '
+        : row.runs.map((run) => (
+            <span
+              class={cx(
+                run.fg !== undefined && styles[`fg-${run.fg}`],
+                run.bold === true && styles['bold'],
+                run.dim === true && styles['dim'],
+                run.italic === true && styles['italic'],
+                run.underline === true && styles['underline'],
+              )}
+            >
+              {run.text}
+            </span>
+          ))}
+    </span>
+  );
+
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: the focusable region whose Home and End move the list inside it
+    <div
+      class={cx(styles['terminal'], props.class)}
+      tabindex="0"
+      role="region"
+      aria-label={label()}
+      dir="ltr"
+      style={{
+        '--terminal-rows': String(finiteCount('TerminalView', 'rows', props.rows ?? 24, 1)),
+      }}
+      ref={(el: HTMLDivElement) => {
+        region = el;
+      }}
+      onKeyDown={(event: KeyboardEvent) => {
+        if (event.key !== 'Home' && event.key !== 'End') return;
+        // VirtualList's scroll box is the parent of its list.
+        const box = region?.querySelector('ul')?.parentElement;
+        if (box === null || box === undefined) return;
+        event.preventDefault();
+        box.scrollTop = event.key === 'Home' ? 0 : box.scrollHeight;
+      }}
+    >
+      {/* The box is this component's: its height is fixed here, whatever order the sheets load in. */}
+      <div class={styles['box']}>
+        <VirtualList
+          items={rows()}
+          itemKey={(row: Row) => row.id}
+          renderItem={line}
+          follow={props.follow !== false}
+          label={label()}
+          class={styles['frame']}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/TimeRangePicker.module.scss

@@ -0,0 +1,85 @@
+@use '../tokens' as t;
+
+.picker {
+  display: grid;
+  gap: t.space(2);
+  min-inline-size: 0;
+}
+
+.invalid {
+  margin: 0;
+  color: t.role('warning');
+  font-size: t.text(sm);
+}
+
+// The presets scroll in their own box on a narrow screen rather than wrapping into a wall.
+.presets {
+  @include t.custom-scrollbar;
+  display: flex;
+  gap: t.space(1);
+  margin: 0;
+  padding: 0;
+  overflow-x: auto;
+  list-style: none;
+  overscroll-behavior-inline: contain;
+}
+
+.preset {
+  @include t.padding-inline(t.space(3));
+  display: inline-flex;
+  align-items: center;
+  min-block-size: t.touch(target);
+  border: 1px solid t.role('line');
+  border-radius: t.radius(pill);
+  color: t.role('fg');
+  font-size: t.text(sm);
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:hover {
+    background: t.role('bg-soft');
+  }
+
+  &[aria-current='true'] {
+    border-color: t.role('accent');
+    color: t.role('accent-fg');
+    background: t.role('accent');
+  }
+
+  &:focus-visible {
+    outline: t.stroke(thick) solid t.role('accent');
+    outline-offset: t.stroke(thick);
+  }
+}
+
+.custom {
+  min-inline-size: 0;
+}
+
+.summary {
+  min-block-size: t.touch(target);
+  display: flex;
+  align-items: center;
+  color: t.role('fg');
+  font-size: t.text(sm);
+  cursor: pointer;
+}
+
+.form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: t.space(3);
+  padding-block: t.space(2);
+}
+
+.end {
+  display: grid;
+  gap: t.space(1);
+  min-inline-size: 0;
+}
+
+.label {
+  color: t.role('fg-muted');
+  font-size: t.text(xs);
+}

package/src/components/TimeRangePicker.tsx

@@ -0,0 +1,91 @@
+// "This metric over that window": the app's presets as links, and a custom window as a GET form of
+// two `datetime-local` inputs in a `<details>`. Links and a form, so 0 B of script on a static
+// route; the URL is the state (`timeRangeUrl`), so a window survives reload, share and paging.
+
+import type { TimeZone } from '@ultimat3/time';
+import type { JSX } from 'solid-js';
+import { useId } from '../a11y';
+import { cx } from '../cx';
+import { invalidValueError } from '../errors';
+import { UI_KEYS } from '../i18n-keys';
+import { useUi } from '../theme/context';
+import type { TimeRangeUrl } from '../time-range-url';
+import { Button } from './Button';
+import inputStyles from './Input.module.scss';
+import styles from './TimeRangePicker.module.scss';
+
+export interface TimeRangePickerProps {
+  /** The window the URL holds, read by `timeRangeUrl` in the loader. */
+  range: TimeRangeUrl;
+  /**
+   * The zone the custom window's wall-clock times are in. Required, and it must be the one the
+   * window was read in: there is no ambient zone, and a mismatch would post a different window.
+   */
+  timeZone: TimeZone;
+  /** Already-translated name for the control. */
+  label: string;
+  class?: string | undefined;
+}
+
+export function TimeRangePicker(props: TimeRangePickerProps): JSX.Element {
+  const ui = useUi();
+  const id = useId('timerange');
+  if (props.timeZone !== props.range.timeZone) {
+    throw invalidValueError(
+      'TimeRangePicker timeZone',
+      props.timeZone,
+      `the zone the window was read in (${props.range.timeZone})`,
+    );
+  }
+
+  return (
+    <nav class={cx(styles['picker'], props.class)} aria-label={props.label}>
+      {props.range.invalid ? (
+        <p class={styles['invalid']} role="status">
+          {ui.t(UI_KEYS.rangeInvalid)}
+        </p>
+      ) : null}
+      <ul class={styles['presets']}>
+        {props.range.presets.map((preset) => (
+          <li>
+            <a
+              class={styles['preset']}
+              href={props.range.href({ preset: preset.id })}
+              aria-current={props.range.preset === preset.id ? 'true' : undefined}
+            >
+              {preset.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+      <details class={styles['custom']} open={props.range.preset === undefined}>
+        <summary class={styles['summary']}>{ui.t(UI_KEYS.rangeCustom)}</summary>
+        <form class={styles['form']} method="get" action={props.range.action}>
+          {props.range.hidden.map(([name, value]) => (
+            <input type="hidden" name={name} value={value} />
+          ))}
+          {(['from', 'to'] as const).map((end) => (
+            <span class={styles['end']}>
+              <label class={styles['label']} for={`${id}-${end}`}>
+                {ui.t(end === 'from' ? UI_KEYS.rangeFrom : UI_KEYS.rangeTo)}
+              </label>
+              <span class={cx(inputStyles['wrap'], inputStyles['size-md'])}>
+                <input
+                  class={inputStyles['input']}
+                  id={`${id}-${end}`}
+                  type="datetime-local"
+                  name={props.range.names[end]}
+                  value={props.range.local[end]}
+                  required
+                />
+              </span>
+            </span>
+          ))}
+          <Button type="submit" variant="secondary">
+            {ui.t(UI_KEYS.rangeApply)}
+          </Button>
+        </form>
+      </details>
+    </nav>
+  );
+}

package/src/components/Timeline.module.scss

@@ -0,0 +1,74 @@
+@use '../tokens' as t;
+
+@include t.tone-classes;
+
+.timeline {
+  display: grid;
+  gap: t.space(3);
+}
+
+.day {
+  margin: 0;
+  color: t.role('fg-strong');
+  font-size: t.text(sm);
+  font-weight: t.weight(semibold);
+}
+
+.list {
+  display: grid;
+  gap: t.space(3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+// The marker column stays at every width; only the content wraps.
+.item {
+  position: relative;
+  display: grid;
+  grid-template-columns: t.space(6) minmax(0, 1fr);
+  gap: t.space(3);
+  align-items: start;
+
+  // The rail between markers, on the inline-start column so it mirrors under `dir="rtl"`.
+  &:not(:last-child)::before {
+    position: absolute;
+    inset-block: t.space(6) calc(-1 * #{t.space(3)});
+    inset-inline-start: calc(#{t.space(3)} - #{t.stroke(hairline)} / 2);
+    border-inline-start: t.stroke(hairline) solid t.role('line');
+    content: '';
+  }
+}
+
+.marker {
+  display: inline-grid;
+  place-items: center;
+  inline-size: t.space(6);
+  block-size: t.space(6);
+  border: t.stroke(thick) solid var(--tone);
+  border-radius: t.radius(full);
+  color: var(--tone);
+  background: t.role('surface');
+}
+
+.body {
+  display: grid;
+  gap: t.space(1);
+  min-inline-size: 0;
+}
+
+.title {
+  color: t.role('fg');
+  overflow-wrap: anywhere;
+}
+
+.when {
+  color: t.role('fg-muted');
+  font-size: t.text(xs);
+}
+
+.detail {
+  color: t.role('fg-muted');
+  font-size: t.text(sm);
+  overflow-wrap: anywhere;
+}

package/src/components/Timeline.tsx

@@ -0,0 +1,60 @@
+// What happened, in order: when, what, a marker and a tone. An `<ol>` because the order IS the
+// content; day headers come from `groupBy`, already formatted. Server-only, no signal: an activity
+// feed is this plus `InfiniteScroll` and `RelativeTime`, never a component of its own.
+
+import type { JSX } from 'solid-js';
+import { cx } from '../cx';
+import { Icon } from './Icon';
+import type { IconGlyph } from './icon-glyph';
+import styles from './Timeline.module.scss';
+import { timelineGroups } from './timeline-view';
+import type { Tone } from './variants';
+
+export interface TimelineItem {
+  /** Stable identity, rendered as `data-key` so a test or a live update can find the row. */
+  key: string;
+  /** The `<time>` slot: a `DateTime` or a `RelativeTime`, formatted in the caller's zone. */
+  when: JSX.Element;
+  /** What happened, already translated. */
+  title: JSX.Element;
+  detail?: JSX.Element | undefined;
+  /** The marker's colour. The word a tone stands for is the caller's: no status map ships. */
+  tone?: Tone | undefined;
+  /** Drawn in the marker; decorative, since `title` says what happened. */
+  icon?: IconGlyph | undefined;
+}
+
+export interface TimelineProps {
+  items: readonly TimelineItem[];
+  /** Already-translated accessible name for the list. */
+  label: string;
+  /** A day header per run of items: answer a label already formatted in the caller's zone. */
+  groupBy?: ((item: TimelineItem) => string) | undefined;
+  class?: string | undefined;
+}
+
+export function Timeline(props: TimelineProps): JSX.Element {
+  const row = (item: TimelineItem): JSX.Element => (
+    <li class={cx(styles['item'], styles[`tone-${item.tone ?? 'neutral'}`])} data-key={item.key}>
+      <span class={styles['marker']} aria-hidden="true">
+        {item.icon === undefined ? null : <Icon glyph={item.icon} size="sm" />}
+      </span>
+      <div class={styles['body']}>
+        <div class={styles['title']}>{item.title}</div>
+        <div class={styles['when']}>{item.when}</div>
+        {item.detail === undefined ? null : <div class={styles['detail']}>{item.detail}</div>}
+      </div>
+    </li>
+  );
+
+  return (
+    <div class={cx(styles['timeline'], props.class)}>
+      {timelineGroups(props.items, props.groupBy).map((group) => [
+        group.label === undefined ? null : <p class={styles['day']}>{group.label}</p>,
+        <ol class={styles['list']} aria-label={group.label ?? props.label}>
+          {group.items.map(row)}
+        </ol>,
+      ])}
+    </div>
+  );
+}