@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.14

package/DS1/2-core/ds-chart.ts

@@ -0,0 +1,327 @@
+import { html, LitElement, nothing, unsafeCSS, type PropertyValues } from "lit";
+import { property, state } from "lit/decorators.js";
+import { type DataPoint, drawSparkline, GridChart, type Marker, type Series, type SeriesKind } from "./chart/grid-chart";
+
+import { define } from "../0-face/define";
+import styles from "./chart/chart.css?inline";
+export * from "./chart/grid-chart";
+
+/** Independent chart configuration; no module-wide size or theme state. */
+export class ChartElement extends LitElement {
+  static styles = unsafeCSS(styles);
+  @property({ type: Number }) unit = 20;
+  @property() grid: "full" | "rows" | "none" = "rows";
+  private media?: MediaQueryList;
+  private themeChanged = () => this.refreshTheme();
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
+    this.media?.addEventListener("change", this.themeChanged);
+    void this.updateComplete.then(() => {
+      if (!this.isConnected) return;
+      this.initialize();
+      this.refreshTheme();
+    });
+  }
+  disconnectedCallback(): void {
+    this.media?.removeEventListener("change", this.themeChanged);
+    super.disconnectedCallback();
+  }
+  protected initialize(): void {}
+  refreshTheme(): void { this.requestUpdate(); }
+  protected updated(_changed: PropertyValues): void {
+    if (!Number.isFinite(this.unit) || this.unit <= 0) this.unit = 20;
+    this.style.setProperty("--ds-chart-unit", `${this.unit}px`);
+  }
+}
+
+/** Whole-pixel width of an element, kept current. */
+function observeWidth(element: HTMLElement, callback: (width: number) => void): ResizeObserver {
+  const observer = new ResizeObserver(() => callback(Math.floor(element.getBoundingClientRect().width)));
+  observer.observe(element);
+  return observer;
+}
+
+export class GridLineChart extends ChartElement {
+  connectedCallback(): void { this.dataset.chartKind = "line"; super.connectedCallback(); }
+  @property({ attribute: false }) data: DataPoint[] = [];
+  @property() kind: SeriesKind = "area";
+  @property({ type: Number }) base?: number;
+  @property() color = "--ds-chart-ink";
+  @property({ type: Number }) rows = 8;
+  @property({ attribute: false }) markers: Marker[] = [];
+  @property({ attribute: false }) timeRange: [number, number] | null = null;
+  @property({ type: Boolean }) extremes = false;
+  @property({ type: Boolean }) labels = false;
+  @property({ type: Boolean }) live = false;
+  @property({ attribute: false }) format: (value: number) => string = (v) => v.toFixed(2);
+  /** Changing this replays the draw-in. */
+  @property() drawKey = "";
+
+  @state() private dot: { x: number; y: number } | null = null;
+
+  private chart?: GridChart;
+  private series?: Series;
+  private observer?: ResizeObserver;
+  private scrubbing = false;
+  private dotTimer?: ReturnType<typeof setTimeout>;
+  refreshTheme(): void { this.chart?.refreshTheme(); }
+
+  render() {
+    return html`<canvas
+        @pointerdown=${this.down}
+        @pointermove=${this.move}
+        @pointerup=${this.up}
+        @pointercancel=${this.up}
+        @pointerleave=${this.leave}
+      ></canvas
+      >${this.live && this.dot
+        ? html`<span class="live-dot" style="transform: translate(${this.dot.x - 2}px, ${this.dot.y - 2}px)"></span>`
+        : nothing}`;
+  }
+
+  protected initialize(): void {
+    if (this.chart) return;
+    const canvas = this.renderRoot.querySelector("canvas") as HTMLCanvasElement;
+    this.chart = new GridChart(canvas, {
+      extremes: this.extremes,
+      scaleLabels: this.labels,
+      format: this.format,
+      grid: this.grid,
+      unit: this.unit,
+    });
+    this.series = this.chart.addSeries(this.seriesOptions());
+    this.chart.subscribeCrosshairMove((event) => {
+      this.dispatchEvent(new CustomEvent("scrub", { detail: event.point, bubbles: true, composed: true }));
+    });
+    this.observer = observeWidth(this, (width) => {
+      this.chart?.resize(width, this.rows * this.unit);
+      this.placeDot();
+    });
+    void document.fonts?.ready.then(() => this.chart?.draw());
+    this.resizeToUnit();
+    this.sync(true);
+  }
+
+  resizeToUnit(): void {
+    this.chart?.resize(Math.floor(this.getBoundingClientRect().width), this.rows * this.unit);
+    this.placeDot();
+  }
+
+  updated(changed: PropertyValues<this>): void {
+    super.updated(changed);
+    if (!this.chart) return;
+    if (changed.has("unit") || changed.has("grid")) this.chart.applyOptions({ unit: this.unit, grid: this.grid });
+    if (changed.has("rows") || changed.has("unit")) this.resizeToUnit();
+    if (changed.has("extremes") || changed.has("labels") || changed.has("format")) {
+      this.chart.applyOptions({ extremes: this.extremes, scaleLabels: this.labels, format: this.format });
+    }
+    if (changed.has("data") || changed.has("kind") || changed.has("base") || changed.has("color") || changed.has("markers") || changed.has("timeRange")) {
+      this.sync(changed.has("drawKey"));
+    } else if (changed.has("drawKey")) {
+      this.sync(true);
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+    clearTimeout(this.dotTimer);
+    this.chart?.destroy();
+    this.chart = undefined;
+  }
+
+  private seriesOptions() {
+    return { kind: this.kind, baseValue: this.base, color: this.color };
+  }
+
+  private sync(animate: boolean): void {
+    if (!this.chart || !this.series) return;
+    this.chart.setTimeRange(this.timeRange);
+    this.series.applyOptions(this.seriesOptions());
+    this.series.setMarkers(this.markers);
+    this.series.setData(this.data);
+    if (animate) {
+      this.dot = null;
+      this.chart.animateIn();
+      clearTimeout(this.dotTimer);
+      this.dotTimer = setTimeout(() => this.placeDot(), 560);
+    } else {
+      this.placeDot();
+    }
+  }
+
+  private placeDot(): void {
+    const point = this.chart?.lastPoint() ?? null;
+    if (point?.x !== this.dot?.x || point?.y !== this.dot?.y) this.dot = point;
+  }
+
+  private x(event: PointerEvent): number {
+    return event.clientX - this.getBoundingClientRect().left;
+  }
+
+  private down = (event: PointerEvent) => {
+    if (event.button !== 0) return;
+    this.scrubbing = true;
+    (event.target as HTMLElement).setPointerCapture(event.pointerId);
+    this.chart?.setCrosshair(this.x(event));
+  };
+
+  private move = (event: PointerEvent) => {
+    if (this.scrubbing || event.pointerType === "mouse") this.chart?.setCrosshair(this.x(event));
+  };
+
+  private up = (event: PointerEvent) => {
+    this.scrubbing = false;
+    if (event.pointerType !== "mouse" || event.type === "pointercancel") this.chart?.setCrosshair(null);
+  };
+
+  private leave = (event: PointerEvent) => {
+    if (!this.scrubbing && event.pointerType === "mouse") this.chart?.setCrosshair(null);
+  };
+}
+
+export class GridSpark extends ChartElement {
+  connectedCallback(): void { this.dataset.chartKind = "spark"; super.connectedCallback(); }
+  @property({ attribute: false }) values: number[] = [];
+  @property({ type: Number }) base?: number;
+  @property({ type: Number }) cols = 4;
+  refreshTheme(): void { this.draw(); }
+
+  render() {
+    const last = this.values[this.values.length - 1] ?? 0;
+    const reference = this.base ?? this.values[0] ?? 0;
+    return html`<canvas class=${last >= reference ? "up" : "down"}></canvas>`;
+  }
+
+  updated(changed: PropertyValues): void {
+    super.updated(changed);
+    this.draw();
+  }
+
+  private draw(): void {
+    const canvas = this.renderRoot.querySelector("canvas");
+    if (!canvas) return;
+    const style = getComputedStyle(canvas);
+    drawSparkline(canvas, this.values, {
+      width: this.cols * this.unit,
+      height: this.unit,
+      color: style.color,
+      base: this.base,
+      faint: style.borderTopColor,
+    });
+  }
+}
+
+export interface BarItem {
+  label: string;
+  value: number;
+  /** Drawn as an outline at its height, e.g. the expected figure. */
+  compare?: number;
+  tone?: "up" | "down" | "ink";
+  caption?: string;
+}
+
+export class GridBars extends ChartElement {
+  connectedCallback(): void { this.dataset.chartKind = "bars"; super.connectedCallback(); }
+  @property({ attribute: false }) items: BarItem[] = [];
+  @property({ type: Number }) rows = 4;
+  @property({ type: Number }) span = 2;
+
+  render() {
+    const height = (this.rows - 1) * this.unit;
+    const max = Math.max(...this.items.flatMap((item) => [item.value, item.compare ?? 0]), 1e-9);
+    const px = (v: number) => Math.max(1, Math.round((v / max) * (height - 4)));
+    return html`<div class="bars" style="--span: ${this.span}">
+      ${this.items.map(
+        (item) => html`<div class="bar-cell">
+          <div class="bar-area" style="height: ${height}px">
+            ${item.compare !== undefined
+              ? html`<span class="bar-compare" style="height: ${px(item.compare)}px"></span>`
+              : nothing}
+            ${item.value > 0
+              ? html`<span class="bar-fill ${item.tone ?? "ink"}" style="height: ${px(item.value)}px"></span>`
+              : nothing}
+          </div>
+          <span class="bar-caption">${item.caption ?? ""}</span>
+          <span class="bar-label">${item.label}</span>
+        </div>`,
+      )}
+    </div>`;
+  }
+}
+
+export class GridRatio extends ChartElement {
+  connectedCallback(): void { this.dataset.chartKind = "ratio"; super.connectedCallback(); }
+  @property({ type: Number }) value = 0.5;
+  @state() private width = 0;
+  private observer?: ResizeObserver;
+
+  protected initialize(): void {
+    this.observer?.disconnect();
+    this.observer = observeWidth(this, (width) => {
+      this.width = width;
+    });
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+  }
+
+  render() {
+    const left = Math.round(Math.max(0, this.width - 1) * Math.max(0, Math.min(1, this.value)));
+    return html`<span class="ratio-buy" style="width: ${left}px"></span
+      ><span class="ratio-sell" style="width: ${Math.max(0, this.width - left - 1)}px"></span>`;
+  }
+}
+
+export interface RangeMark {
+  value: number;
+  label?: string;
+  kind: "dot" | "tick";
+}
+
+export class GridRange extends ChartElement {
+  connectedCallback(): void { this.dataset.chartKind = "range"; super.connectedCallback(); }
+  @property({ type: Number }) min = 0;
+  @property({ type: Number }) max = 1;
+  @property({ type: Number }) from = 0;
+  @property({ type: Number }) to = 1;
+  @property({ attribute: false }) marks: RangeMark[] = [];
+  @state() private width = 0;
+  private observer?: ResizeObserver;
+
+  protected initialize(): void {
+    this.observer?.disconnect();
+    this.observer = observeWidth(this, (width) => {
+      this.width = width;
+    });
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+  }
+
+  render() {
+    const span = Math.max(1e-9, this.max - this.min);
+    const x = (v: number) => Math.round(((v - this.min) / span) * (this.width - 1));
+    const left = x(this.from);
+    const right = x(this.to);
+    return html`<span class="range-track"></span>
+      <span class="range-fill" style="transform: translateX(${left}px); width: ${Math.max(1, right - left + 1)}px"></span>
+      ${this.marks.map(
+        (mark) =>
+          html`<span class="range-${mark.kind}" style="transform: translateX(${x(mark.value) - (mark.kind === "dot" ? 2 : 0)}px)"
+            >${mark.label ? html`<span class="range-label">${mark.label}</span>` : nothing}</span
+          >`,
+      )}`;
+  }
+}
+
+define("ds-chart", GridLineChart);
+define("ds-spark", GridSpark);
+define("ds-bars", GridBars);
+define("ds-ratio", GridRatio);
+define("ds-range", GridRange);

package/DS1/2-core/ds-composer.ts

@@ -14,7 +14,13 @@ function styleRoot(root: Node) {
   styledRoots.add(root);
 }
 
-export type TextHighlight = { start: number; end: number; color?: string };
+/**
+ * A range of the text, in UTF-16 offsets. `color` is any CSS colour, the
+ * accent when left out. By default the words are tinted with it; with `fill`
+ * the colour itself lies behind the words, which stay in the text colour, so
+ * a pale colour shows and every palette colour keeps the words readable.
+ */
+export type TextHighlight = { start: number; end: number; color?: string; fill?: boolean };
 
 /** A native writing field with metric-preserving highlights. Products own the
  * text and mention data; DS1 owns its face, growth and synchronized overlay.
@@ -173,7 +179,7 @@ export class Composer extends LitElement {
     const parts = this.validHighlights().map(range => {
       const before = this.text.slice(cursor, range.start);
       cursor = range.end;
-      return html`${before}<mark style=${styleMap({ "--composer-highlight-color": range.color || undefined })}>${this.text.slice(range.start, range.end)}</mark>`;
+      return html`${before}<mark class=${range.fill ? "fill" : ""} style=${styleMap({ "--composer-highlight-color": range.color || undefined })}>${this.text.slice(range.start, range.end)}</mark>`;
     });
     return html`<span class="row-metric" aria-hidden="true"></span><slot @slotchange=${this.bindControl}></slot><div class="mirror" aria-hidden="true">${parts}${this.text.slice(cursor)}${"\n"}</div>`;
   }

package/DS1/2-core/ds-cycle.ts

@@ -8,8 +8,9 @@ import {
   setLanguage,
 } from "../0-face/i18n";
 import type { LanguageCode } from "../0-face/i18n";
-import { currentTheme, setTheme } from "../0-face/theme";
-import type { ThemeType } from "../0-face/theme";
+import { LANGUAGE_METADATA, isLanguage, normalizeLanguage } from "../0-face/languages";
+import { currentThemeMode, setThemeMode, THEME_MODES } from "../0-face/theme";
+import type { ThemeMode } from "../0-face/theme";
 import { savePreferences } from "../0-face/preferences";
 import "./ds-button";
 import "./ds-icon";
@@ -50,14 +51,34 @@ const getPageStyle = (): string => {
 
 // App width utilities removed
 
+// The settings a cycle knows by name. Any other cycle steps through its own
+// `values` and reports each step as a `change` event.
+/**
+ * A language's name in the language itself (`Dansk`, `日本語`): from the
+ * language list, else from the browser, else the code.
+ */
+export function nativeLanguageName(code: string): string {
+  if (!code) return "";
+  if (isLanguage(code)) return LANGUAGE_METADATA[code].nativeLabel;
+  const member = normalizeLanguage(code, null);
+  if (member) return LANGUAGE_METADATA[member].nativeLabel;
+  return getLanguageDisplayName(code, { locale: code });
+}
+
+const SETTINGS = new Set(["language", "theme", "accent-color", "notes-style-medium", "page-style", "icon-only"]);
+
 // Use a regular class with proper TypeScript type declarations and JSDoc comments
 export class Cycle extends LitElement {
   static formAssociated = true;
   // Define reactive properties using Lit's property system
   static get properties() {
     return {
-      type: { type: String },
+      type: { type: String, reflect: true },
+      // The language picker as a chip, the cycle's button, instead of an item.
+      chip: { type: Boolean, reflect: true },
       values: { type: Array },
+      value: { type: String },
+      label: { type: String, reflect: true },
       currentValue: { type: String, state: true }, // Make this a private state property
       translationsReady: { type: Boolean, state: true }, // Track if translations are loaded
       disabled: { type: Boolean, reflect: true },
@@ -76,7 +97,14 @@ export class Cycle extends LitElement {
   // Add runtime properties using the any type
   // These are just for TypeScript and don't create shadowing fields
   declare type: string;
+  declare chip: boolean;
   declare values: string[];
+  declare value: string;
+  /**
+   * The setting's name, a translation key: the button is announced as
+   * "Size: 40" while its face shows the value alone.
+   */
+  declare label: string;
   declare currentValue: string;
   declare translationsReady: boolean;
   declare disabled: boolean;
@@ -103,7 +131,10 @@ export class Cycle extends LitElement {
 
     // Initialize properties with default values
     this.type = "";
+    this.chip = false;
     this.values = [];
+    this.value = "";
+    this.label = "";
     this.currentValue = "";
     this.translationsReady = false;
     this.disabled = false;
@@ -154,19 +185,17 @@ export class Cycle extends LitElement {
     this.initializeValues();
   }
 
-  async initializeValues() {
+  // Synchronous: nothing here waits, and a thrown error should surface where it happens.
+  initializeValues(): void {
     if (this.type === "language") {
       // Dynamically get available languages from translation data
       const availableLanguages = getAvailableLanguagesSync();
       this.values = availableLanguages;
       this.currentValue = currentLanguage.value;
     } else if (this.type === "theme") {
-      // Set up theme cycling
-      this.values = ["light", "dark"];
-
-      // Set initial value based on current theme
-      const currentThemeValue = currentTheme.get();
-      this.currentValue = currentThemeValue;
+      // Light, dark and the system's, the stored choice
+      this.values = [...THEME_MODES];
+      this.currentValue = currentThemeMode.get();
     } else if (this.type === "accent-color") {
       // Set up accent color cycling
       this.values = [
@@ -225,15 +254,14 @@ export class Cycle extends LitElement {
     }
   }
 
-  async setupInitialValue() {
+  setupInitialValue(): void {
     if (this.type === "language") {
       // Get current language
       const currentLang = currentLanguage.value;
       this.currentValue = currentLang;
     } else if (this.type === "theme") {
-      // Get current theme
-      const currentThemeValue = currentTheme.get();
-      this.currentValue = currentThemeValue;
+      // The stored choice, which may be the system's
+      this.currentValue = currentThemeMode.get();
     } else if (this.type === "accent-color") {
       // Get current accent color
       const currentAccentColor = getAccentColor();
@@ -332,11 +360,11 @@ export class Cycle extends LitElement {
       // Update current value
       this.currentValue = newTheme;
 
-      // Set the new theme using the shared helper
-      setTheme(newTheme as ThemeType);
+      // Set the new choice using the shared helper
+      setThemeMode(newTheme as ThemeMode);
 
       // Save preferences
-      savePreferences({ theme: newTheme as ThemeType });
+      savePreferences({ theme: newTheme as ThemeMode });
 
       // Theme helper already emits the change event, so no manual dispatch here
     } else if (this.type === "accent-color") {
@@ -426,6 +454,10 @@ export class Cycle extends LitElement {
           detail: { behavior: newIconOnlyValue },
         })
       );
+    } else if (!SETTINGS.has(this.type)) {
+      const next = this.values[(this.values.indexOf(this.currentValue) + 1) % this.values.length];
+      this.currentValue = this.value = next;
+      this.dispatchEvent(new CustomEvent("change", { detail: { value: next }, bubbles: true, composed: true }));
     }
 
     // Request update to re-render
@@ -434,9 +466,7 @@ export class Cycle extends LitElement {
 
   getValueDisplay(value: string): string | any {
     if (this.type === "language") {
-      return getLanguageDisplayName(value, {
-        locale: currentLanguage.value,
-      });
+      return nativeLanguageName(value);
     } else if (this.type === "theme") {
       // Try to get translated theme name
       if (this.translationsReady) {
@@ -542,6 +572,12 @@ export class Cycle extends LitElement {
    * first paint, so the inner button and any page sheet see the same word.
    */
   willUpdate(changed: Map<PropertyKey, unknown>) {
+    // A cycle through its own values shows `value` when it is one of them,
+    // and otherwise the first.
+    if (!SETTINGS.has(this.type) && this.values.length) {
+      if (changed.has("value") && this.values.includes(this.value)) this.currentValue = this.value;
+      else if (!this.values.includes(this.currentValue)) this.currentValue = this.values.includes(this.value) ? this.value : this.values[0];
+    }
     if (changed.has("variant") && this.variant) {
       this.primary = this.variant === "primary";
       this.secondary = this.variant === "secondary";
@@ -552,10 +588,50 @@ export class Cycle extends LitElement {
     }
   }
 
+  /** The words the face shows for the current value, for the accessible name. */
+  valueText(): string {
+    const value = this.currentValue;
+    if (this.type === "language") return nativeLanguageName(value);
+    if (this.type === "theme") return translate(value === "light" ? "Light" : value === "dark" ? "Dark" : "System");
+    if (this.type === "accent-color") return translate(this.getColorKey(value));
+    if (this.type === "page-style" || this.type === "icon-only") return translate(value === "note" ? "Note" : "Page");
+    return value;
+  }
+
+  /** "Size: 40" when the cycle has a label, so the control is named while its face shows the value alone. */
+  accessibleLabel(): string {
+    if (this.label) return `${translate(this.label)}: ${this.valueText()}`;
+    // The language picker is always named: "Language: Dansk".
+    return this.type === "language" ? `${translate("Language")}: ${this.valueText()}` : "";
+  }
+
+  /**
+   * The language picker: a native button carrying the language's code as
+   * `lang`, so each name is set in its own typeface. An item on its own, eight
+   * squares wide (four with `compact`); with `chip`, the cycle's button around it.
+   */
+  private renderLanguagePicker() {
+    const code = this.currentValue || currentLanguage.value;
+    const button = html`<button
+      type="button"
+      lang=${code}
+      aria-label=${this.accessibleLabel()}
+      ?disabled=${this.disabled || this._fieldsetDisabled}
+      @click=${this.handleButtonClick}
+    >
+      ${nativeLanguageName(code)}
+    </button>`;
+    return this.chip ? html`<ds-button fit control="slotted"
+      ?primary=${this.primary && !this.secondary} ?secondary=${this.secondary}
+      ?disabled=${this.disabled || this._fieldsetDisabled}>${button}</ds-button>` : button;
+  }
+
   render() {
+    if (this.type === "language") return this.renderLanguagePicker();
     return html`
       <div class="cycle">
         <ds-button fit
+          .label=${this.accessibleLabel()}
           ?primary=${this.primary && !this.secondary}
           ?secondary=${this.secondary}
           ?disabled=${this.disabled || this._fieldsetDisabled}
@@ -572,7 +648,7 @@ export class Cycle extends LitElement {
                 ></ds-text>`
               : this.type === "theme"
                 ? html`<ds-text
-                    text=${this.currentValue === "light" ? "Light" : "Dark"}
+                    text=${this.currentValue === "light" ? "Light" : this.currentValue === "dark" ? "Dark" : "System"}
                   ></ds-text>`
                 : this.type === "accent-color"
                   ? html`<ds-text