@supersoniks/concorde 5.0.5 → 5.1.1

package/src/docs/home/mach-stage.ts

@@ -0,0 +1,389 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+/** The Concorde silhouette from the brand icon, nose up, in a 66 × 66 box centred on (33, 33). */
+const PLANE =
+  "M33.2499 62.03C33.8799 59.24 34.26 56.17 34.39 53.08C34.57 52.78 34.9099 52.6 35.2599 52.64H35.39C35.48 52.64 35.5799 52.64 35.6899 52.64H35.7599C35.7599 52.64 35.7999 52.64 35.8299 52.64C36.2499 52.62 36.6799 52.58 36.9099 52.56C36.9399 52.56 36.9599 52.56 36.9799 52.56C37.0099 52.56 37.0299 52.56 37.0499 52.56H37.0899L37.2099 51.93H37.4799L37.5799 52.4L37.6899 52.49H39.2699L39.39 52.38L39.5099 51.93H39.7899L39.8399 52.21L39.9999 52.29L45.2099 51.86L46.2799 51.29C46.2799 51.29 46.2799 50.85 46.2399 50.25V50.18C46.2399 50.18 46.2399 50.13 46.2399 50.11C46.2099 49.62 46.1399 49.13 46.0399 48.65C45.7899 47.45 45.29 46 42.2 41.58C39.11 37.16 38.04 35.52 35.89 27.63C35.85 27.48 35.8199 27.35 35.7899 27.2C35.1399 24.53 34.6899 22.95 34.5199 22.38V10.89C34.4999 9.60996 34.3999 8.33996 34.2099 7.07996C34.0499 5.97996 33.6099 4.89996 33.3499 3.95996H32.6299C32.3599 4.89996 31.9299 5.97996 31.7699 7.06996C31.5799 8.33996 31.4799 9.60996 31.4599 10.89V22.38C31.2899 22.95 30.8299 24.52 30.1899 27.2C30.1599 27.35 30.1199 27.49 30.0899 27.63C27.9499 35.52 26.8699 37.16 23.7799 41.58C20.6899 46 20.1899 47.45 19.9399 48.65C19.8399 49.13 19.7799 49.62 19.7399 50.11C19.7399 50.13 19.7399 50.16 19.7399 50.18V50.25C19.6999 50.85 19.7 51.29 19.7 51.29L20.7699 51.86L25.9799 52.29L26.14 52.21L26.1899 51.93H26.4799L26.5999 52.38L26.7299 52.49H28.2999L28.4099 52.4L28.5099 51.93H28.7699L28.89 52.56H28.9399C28.9399 52.56 28.9799 52.56 29.0099 52.56C29.0299 52.56 29.0499 52.56 29.0799 52.56C29.3099 52.58 29.7499 52.63 30.1599 52.64C30.1799 52.64 30.2099 52.64 30.2299 52.64H30.2999C30.4099 52.64 30.5099 52.64 30.5999 52.64H30.7299C31.0799 52.6 31.4299 52.77 31.6099 53.08C31.7299 56.17 32.1099 59.24 32.7399 62.03H33.2499Z";
+
+/** Speed of sound on the stage, in stage widths per second. */
+const SOUND = 0.19;
+/** Cruise: Concorde flew at Mach 2.02, 18 000 m up. */
+const CRUISE = 2.02;
+/** Grid cells across the field; every fourth line is heavier. */
+const GRID = 24;
+const WAVE_EVERY = 0.05;
+const WAVE_LIFE = 2.6;
+
+const clamp = (v: number, lo: number, hi: number) =>
+  Math.min(hi, Math.max(lo, v));
+const smooth = (a: number, b: number, v: number) => {
+  const t = clamp((v - a) / (b - a), 0, 1);
+  return t * t * (3 - 2 * t);
+};
+
+type Wave = { x: number; y: number; t: number };
+
+/**
+ * The hero's orange field as a Mach diagram: the aircraft drops a sound wave as it flies and,
+ * once it outruns them, the waves pile into the shock cone. On autopilot it accelerates through
+ * the barrier on every pass; a moving pointer steers it and moving fast
+ * enough breaks the barrier by hand. Reduced motion gets one still frame at cruise.
+ */
+@customElement("docs-mach-stage")
+export class DocsMachStage extends LitElement {
+  private canvas?: HTMLCanvasElement;
+  private ints: HTMLElement[] = [];
+  private decs: HTMLElement[] = [];
+  private plane = new Path2D(PLANE);
+  private waves: Wave[] = [];
+  private x = -0.3;
+  private y = 0.55;
+  private vx = 0.75 * SOUND;
+  private vy = 0;
+  private mach = 0;
+  private time = 0;
+  private lastWave = 0;
+  private pointer: { x: number; y: number; t: number } | null = null;
+  private boom = -10;
+  private frame = 0;
+  private last = 0;
+  private resize?: ResizeObserver;
+  private visible = true;
+  private io?: IntersectionObserver;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html`<canvas class="mach-canvas" aria-hidden="true"></canvas>
+      <p class="mach-readout" aria-label="Concorde cruise speed: Mach 2.02">
+        <span class="mach-label">mach</span>
+        <span class="mach-value">
+          ${[
+            "mach-layer",
+            "mach-layer mach-ghost-a",
+            "mach-layer mach-ghost-b",
+          ].map(
+            (layer, i) =>
+              html`<span class=${layer} aria-hidden=${i ? "true" : "false"}
+                ><span class="mach-int">0</span><span class="mach-dot">.</span
+                ><span class="mach-dec">00</span></span
+              >`,
+          )}
+        </span>
+      </p>
+      <p class="mach-note">
+        cruise mach 2.02 · 18 000 m · paris – new york in 3 h 30
+      </p>`;
+  }
+
+  firstUpdated() {
+    this.canvas = this.querySelector("canvas")!;
+    this.ints = [...this.querySelectorAll<HTMLElement>(".mach-int")];
+    this.decs = [...this.querySelectorAll<HTMLElement>(".mach-dec")];
+    this.resize = new ResizeObserver(() => this.fit());
+    this.resize.observe(this);
+    this.io = new IntersectionObserver(
+      ([e]) => (this.visible = e.isIntersecting),
+    );
+    this.io.observe(this);
+    this.addEventListener("pointermove", this.onPointer);
+    this.addEventListener("pointerdown", this.onPointer);
+    this.addEventListener("pointerleave", this.onLeave);
+    this.fit();
+    if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      this.still();
+      return;
+    }
+    this.frame = requestAnimationFrame(this.tick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    cancelAnimationFrame(this.frame);
+    this.resize?.disconnect();
+    this.io?.disconnect();
+  }
+
+  private onPointer = (e: PointerEvent) => {
+    const r = this.getBoundingClientRect();
+    this.pointer = {
+      x: (e.clientX - r.left) / r.width,
+      y: (e.clientY - r.top) / r.width,
+      t: this.time,
+    };
+  };
+
+  private onLeave = () => {
+    this.pointer = null;
+  };
+
+  private fit() {
+    const c = this.canvas!;
+    const dpr = Math.min(devicePixelRatio || 1, 2);
+    c.width = Math.round(this.clientWidth * dpr);
+    c.height = Math.round(this.clientHeight * dpr);
+    // publish the grid cell so the field's bevel can be cut along the grid
+    this.parentElement?.style.setProperty(
+      "--mach-cell",
+      `${this.clientWidth / GRID}px`,
+    );
+    if (matchMedia("(prefers-reduced-motion: reduce)").matches) this.still();
+  }
+
+  /** Height of the field in stage widths (positions are kept in widths so speed is uniform). */
+  private get aspect() {
+    return this.clientHeight / Math.max(1, this.clientWidth);
+  }
+
+  private tick = (now: number) => {
+    this.frame = requestAnimationFrame(this.tick);
+    const dt = Math.min(0.05, (now - (this.last || now)) / 1000);
+    this.last = now;
+    if (!this.visible || !dt) return;
+    this.time += dt;
+    this.fly(dt);
+    if (this.time - this.lastWave > WAVE_EVERY) {
+      this.lastWave = this.time;
+      this.waves.push({ x: this.x, y: this.y, t: this.time });
+    }
+    this.waves = this.waves.filter((w) => this.time - w.t < WAVE_LIFE);
+    this.draw();
+  };
+
+  private fly(dt: number) {
+    const h = this.aspect;
+    const before = this.mach;
+    // flown by heading and speed, never by position, so it always carries on along an arc
+    let speed = Math.hypot(this.vx, this.vy);
+    let heading = Math.atan2(this.vy, this.vx);
+    let wantSpeed: number;
+    let wantHeading: number;
+    let turn: number;
+    let throttle: number;
+    const steering = this.pointer && this.time - this.pointer.t < 0.4;
+    if (steering) {
+      // head for a moving pointer; the further ahead it runs, the faster the aircraft goes
+      const dx = this.pointer!.x - this.x;
+      const dy = this.pointer!.y - this.y;
+      wantHeading = Math.atan2(dy, dx);
+      wantSpeed = clamp(Math.hypot(dx, dy) * 2.5, 0.6 * SOUND, 2.4 * SOUND);
+      turn = 5;
+      throttle = 4;
+    } else {
+      // autopilot: endless passes, speeding up to cruise across the field and easing off
+      // while out of sight, so each pass hands over to the next without a cut
+      const up = smooth(-0.1, 0.65, this.x);
+      const down = smooth(1.0, 1.2, this.x);
+      wantSpeed = (0.6 + (CRUISE - 0.6) * up * (1 - down)) * SOUND;
+      const cy = h * 0.55 + Math.sin(this.time * 0.6) * h * 0.06;
+      wantHeading = Math.atan2(cy - this.y, 0.6);
+      turn = 2;
+      throttle = 2;
+    }
+    let delta = wantHeading - heading;
+    delta = Math.atan2(Math.sin(delta), Math.cos(delta));
+    heading += delta * Math.min(1, dt * turn);
+    speed += (wantSpeed - speed) * Math.min(1, dt * throttle);
+    this.vx = Math.cos(heading) * speed;
+    this.vy = Math.sin(heading) * speed;
+    this.x += this.vx * dt;
+    this.y += this.vy * dt;
+    // out of sight on the right, back in on the left; the old waves fade where they were left
+    if (!steering && this.x > 1.3) this.x -= 1.6;
+    this.mach = speed / SOUND;
+    if (before < 1 && this.mach >= 1) this.boom = this.time;
+  }
+
+  private colours() {
+    const s = getComputedStyle(this);
+    return { ink: s.color, field: s.backgroundColor };
+  }
+
+  private draw() {
+    const c = this.canvas!;
+    const g = c.getContext("2d")!;
+    const W = c.width;
+    const u = W; // one stage width in device pixels
+    const { ink } = this.colours();
+    g.clearRect(0, 0, c.width, c.height);
+    g.strokeStyle = ink;
+    g.fillStyle = ink;
+    const px = this.x * u;
+    const py = this.y * u;
+
+    // graph paper under the diagram: a fine square grid, every fourth line heavier
+    const cell = u / GRID;
+    g.lineWidth = Math.max(1, u * 0.0008);
+    for (let i = 0, x = 0; x <= c.width; i++, x += cell) {
+      g.globalAlpha = i % 4 ? 0.1 : 0.22;
+      g.beginPath();
+      g.moveTo(Math.round(x) + 0.5, 0);
+      g.lineTo(Math.round(x) + 0.5, c.height);
+      g.stroke();
+    }
+    for (let i = 0, y = 0; y <= c.height; i++, y += cell) {
+      g.globalAlpha = i % 4 ? 0.1 : 0.22;
+      g.beginPath();
+      g.moveTo(0, Math.round(y) + 0.5);
+      g.lineTo(c.width, Math.round(y) + 0.5);
+      g.stroke();
+    }
+
+    // the shock cone, filled, once supersonic
+    if (this.mach > 1.02) {
+      const mu = Math.asin(1 / this.mach);
+      const dir = Math.atan2(this.vy, this.vx);
+      const len = u * 2;
+      g.globalAlpha = Math.min(0.22, (this.mach - 1) * 0.35);
+      g.beginPath();
+      g.moveTo(px, py);
+      g.lineTo(px - Math.cos(dir - mu) * len, py - Math.sin(dir - mu) * len);
+      g.lineTo(px - Math.cos(dir + mu) * len, py - Math.sin(dir + mu) * len);
+      g.closePath();
+      g.fill();
+    }
+
+    // the waves: each one a circle growing at the speed of sound from where it was dropped
+    g.lineWidth = Math.max(2, u * 0.003);
+    for (const w of this.waves) {
+      const age = this.time - w.t;
+      const r = age * SOUND * u;
+      g.globalAlpha = Math.max(0, 1 - age / WAVE_LIFE) * 0.9;
+      g.beginPath();
+      g.arc(w.x * u, w.y * u, r, 0, Math.PI * 2);
+      g.stroke();
+    }
+
+    this.construct(g, u, px, py);
+
+    // the boom: one heavy ring when the barrier goes
+    const since = this.time - this.boom;
+    if (since >= 0 && since < 1.4) {
+      g.globalAlpha = 1 - since / 1.4;
+      g.lineWidth = u * 0.018 * (1 - since / 1.4) + 2;
+      g.beginPath();
+      g.arc(px, py, since * SOUND * u * 3.2, 0, Math.PI * 2);
+      g.stroke();
+    }
+
+    // the aircraft, pointing where it flies
+    g.globalAlpha = 1;
+    const size = u * 0.15;
+    g.save();
+    g.translate(px, py);
+    g.rotate(Math.atan2(this.vy, this.vx) + Math.PI / 2);
+    g.scale(size / 66, size / 66);
+    g.translate(-33, -33);
+    g.fill(this.plane);
+    g.restore();
+
+    const [int, dec] = this.mach.toFixed(2).split(".");
+    for (const el of this.ints) el.textContent = int;
+    for (const el of this.decs) el.textContent = dec;
+    // the readout splits and shakes for a moment as the barrier goes
+    this.toggleAttribute("data-boom", since >= 0 && since < 0.9);
+    this.toggleAttribute("data-supersonic", this.mach >= 1);
+  }
+
+  /**
+   * Construction lines, as on a textbook figure: the flight path, the Mach lines run out to the
+   * edges, a few radii dropped square onto them from the centres that made them, and the angle.
+   */
+  private construct(
+    g: CanvasRenderingContext2D,
+    u: number,
+    px: number,
+    py: number,
+  ) {
+    const c = this.canvas!;
+    const dir = Math.atan2(this.vy, this.vx);
+    const reach = Math.hypot(c.width, c.height) * 2;
+    const line = (x1: number, y1: number, x2: number, y2: number) => {
+      g.beginPath();
+      g.moveTo(x1, y1);
+      g.lineTo(x2, y2);
+      g.stroke();
+    };
+    g.lineWidth = Math.max(1, u * 0.0012);
+
+    // flight path, dashed, through the whole field
+    g.globalAlpha = 0.45;
+    g.setLineDash([u * 0.012, u * 0.008]);
+    line(
+      px - Math.cos(dir) * reach,
+      py - Math.sin(dir) * reach,
+      px + Math.cos(dir) * reach,
+      py + Math.sin(dir) * reach,
+    );
+    g.setLineDash([]);
+
+    // centre marks where the waves were dropped
+    const mark = u * 0.006;
+    g.globalAlpha = 0.5;
+    this.waves.forEach((w, i) => {
+      if (i % 6) return;
+      line(w.x * u - mark, w.y * u, w.x * u + mark, w.y * u);
+      line(w.x * u, w.y * u - mark, w.x * u, w.y * u + mark);
+    });
+
+    if (this.mach <= 1.02) return;
+    const mu = Math.asin(1 / this.mach);
+    for (const side of [-1, 1]) {
+      const ex = Math.cos(dir + Math.PI + side * mu);
+      const ey = Math.sin(dir + Math.PI + side * mu);
+      // the Mach line, run out past the cone to the edge
+      g.globalAlpha = 0.6;
+      line(px, py, px + ex * reach, py + ey * reach);
+      // radii, square to the Mach line, from a few of the centres
+      g.globalAlpha = 0.45;
+      this.waves.forEach((w, i) => {
+        if (i % 12 || this.time - w.t < 0.5) return;
+        const cx = w.x * u;
+        const cy = w.y * u;
+        const along = (cx - px) * ex + (cy - py) * ey;
+        if (along <= 0) return;
+        line(cx, cy, px + ex * along, py + ey * along);
+      });
+    }
+
+    // the angle, marked at the apex, its value set just outside the cone where no wave reaches
+    const r = u * 0.12;
+    g.globalAlpha = 1;
+    g.lineWidth = Math.max(2, u * 0.003);
+    g.beginPath();
+    g.arc(px, py, r, dir + Math.PI - mu, dir + Math.PI + mu);
+    g.stroke();
+    const edge = dir + Math.PI + mu;
+    const out = edge + Math.PI / 2;
+    const gap = u * 0.03;
+    g.font = `600 ${Math.round(u * 0.024)}px ${getComputedStyle(this).fontFamily}`;
+    g.textAlign = "center";
+    g.textBaseline = "middle";
+    const deg = ((mu * 180) / Math.PI).toFixed(1);
+    g.fillText(
+      `μ ${deg}°`,
+      px + Math.cos(edge) * r * 1.1 + Math.cos(out) * gap,
+      py + Math.sin(edge) * r * 1.1 + Math.sin(out) * gap,
+    );
+  }
+
+  /** Reduced motion: the field at cruise, waves laid out as they would be, nothing moving. */
+  private still() {
+    if (!this.canvas) return;
+    const h = this.aspect;
+    this.x = 0.68;
+    this.y = h * 0.55;
+    this.vx = CRUISE * SOUND;
+    this.vy = 0;
+    this.mach = CRUISE;
+    this.time = WAVE_LIFE;
+    this.boom = -10;
+    this.waves = [];
+    for (let t = 0; t < WAVE_LIFE; t += WAVE_EVERY * 2) {
+      this.waves.push({ x: this.x - this.vx * (WAVE_LIFE - t), y: this.y, t });
+    }
+    this.draw();
+  }
+}

package/src/docs/layout.ts

@@ -1,5 +1,7 @@
 const onLocationChange = (location: Location) => {
-  if (location.pathname === "/" && location.hash === "") {
+  // Docs pages all live in the hash: no hash means the home, whatever the path
+  // (served at /, /index.html or from a sub-folder).
+  if (location.hash === "") {
     document.documentElement.setAttribute("data-home", "");
   } else {
     document.documentElement.removeAttribute("data-home");

package/src/docs/navigation/components-index.ts

@@ -0,0 +1,56 @@
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { docsNavigation } from "./navigation";
+
+export type Page = { label: string; href: string };
+
+/** Sidebar sections listed on the Components page, in display order. */
+const SECTIONS = [
+  { title: "UI components", id: "ui-components" },
+  { title: "Functional components", id: "functional-components" },
+];
+
+/** Pages of a sidebar section: the items between its title and the next one. */
+export function sectionPages(title: string): Page[] {
+  const start = docsNavigation.indexOf(title);
+  if (start < 0) return [];
+  const pages: Page[] = [];
+  for (const item of docsNavigation.slice(start + 1)) {
+    if (typeof item === "string") break;
+    pages.push(item);
+  }
+  return pages;
+}
+
+const tagName = "docs-components-index";
+/**
+ * Plain index of every component, grouped like the sidebar.
+ * Light DOM so the page headings feed the "On this page" navigation.
+ */
+@customElement(tagName)
+export class DocsComponentsIndex extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return SECTIONS.map(
+      (section) => html`
+        <h2 id=${section.id}>${section.title}</h2>
+        <div
+          class="not-prose grid grid-cols-2 sm:grid-cols-3 gap-x-8 gap-y-3 mt-6 mb-12"
+        >
+          ${sectionPages(section.title).map(
+            (page) =>
+              html`<sonic-link
+                href=${page.href}
+                pushState
+                class="hover:underline underline-offset-4"
+                >${page.label}</sonic-link
+              >`,
+          )}
+        </div>
+      `,
+    );
+  }
+}