e11y 0.2.0 → 1.1.0

data/gems/e11y-devtools/frontend/src/components/Fab.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  type Props = {
+    label: string
+    onclick: (e: MouseEvent) => void
+    stateClass: "" | "e11y-fab--state-warn" | "e11y-fab--state-err"
+    pulseClass: "" | "e11y-fab--pulse-warn" | "e11y-fab--pulse-error"
+  }
+
+  let { label, onclick, stateClass, pulseClass }: Props = $props()
+</script>
+
+<button
+  type="button"
+  class="e11y-fab {stateClass} {pulseClass}"
+  onclick={onclick}
+  aria-label="Open e11y devtools"
+>
+  {label}
+</button>

data/gems/e11y-devtools/frontend/src/components/FilterBar.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { ListSeverityFilter } from "../lib/listFilter"
+
+  let {
+    search = $bindable(""),
+    severity = $bindable<ListSeverityFilter>("all"),
+    placeholder = "Search...",
+    class: className = "",
+  } = $props()
+
+  const severities: { id: ListSeverityFilter; label: string; dotClass: string }[] = [
+    { id: "all", label: "All", dotClass: "e11y-chip-dot--all" },
+    { id: "error", label: "Error", dotClass: "e11y-chip-dot--err" },
+    { id: "warn", label: "Warn", dotClass: "e11y-chip-dot--warn" },
+    { id: "rest", label: "Other", dotClass: "e11y-chip-dot--rest" },
+  ]
+</script>
+
+<div class="e11y-list-filters {className}">
+  <input
+    type="search"
+    class="e11y-search"
+    {placeholder}
+    bind:value={search}
+    aria-label="Search"
+  />
+  {#each severities as s (s.id)}
+    <button
+      type="button"
+      class="e11y-chip e11y-chip--{s.id}"
+      class:e11y-chip--active={severity === s.id}
+      onclick={() => (severity = s.id)}
+    >
+      <i class="e11y-chip-dot {s.dotClass}"></i>
+      {s.label}
+    </button>
+  {/each}
+</div>

data/gems/e11y-devtools/frontend/src/components/FullscreenPanel.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import type { Snippet } from "svelte"
+  import { circleCollapse, circleExpand, type CircleOrigin } from "../lib/transitions"
+  import { originFallbackFabCorner } from "../lib/viewportOrigin"
+
+  type Props = {
+    open: boolean
+    onclose: () => void
+    /** Circle reveal origin (FAB center + radius); falls back if null. */
+    origin: CircleOrigin | null
+    headerTopLeft?: Snippet
+    headerTopRight?: Snippet
+    headerBottom?: Snippet
+    children: Snippet
+  }
+
+  let { open, onclose, headerTopLeft, headerTopRight, headerBottom, children, origin }: Props = $props()
+
+  function motionOk(): boolean {
+    return typeof matchMedia === "undefined" || !matchMedia("(prefers-reduced-motion: reduce)").matches
+  }
+
+  const o = $derived(origin ?? originFallbackFabCorner())
+  const openMs = $derived(motionOk() ? 440 : 0)
+  const closeMs = $derived(motionOk() ? 360 : 0)
+
+  function handleKeydown(e: KeyboardEvent): void {
+    if (e.key === "Escape") onclose()
+  }
+
+  $effect(() => {
+    if (!open) return
+    window.addEventListener("keydown", handleKeydown)
+    return () => window.removeEventListener("keydown", handleKeydown)
+  })
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div
+    class="e11y-backdrop"
+    role="presentation"
+    onclick={onclose}
+    in:circleExpand={{ ...o, duration: openMs }}
+    out:circleCollapse={{ ...o, duration: closeMs }}
+  >
+    <div
+      class="e11y-sheet"
+      role="dialog"
+      aria-modal="true"
+      aria-label="e11y overlay"
+      tabindex="-1"
+      onclick={(e) => e.stopPropagation()}
+    >
+      <div class="e11y-panel-header">
+        <div class="e11y-panel-header-top">
+          <div class="e11y-panel-header-left">
+            {#if headerTopLeft}
+              {@render headerTopLeft()}
+            {/if}
+          </div>
+          <div class="e11y-panel-header-right">
+            {#if headerTopRight}
+              {@render headerTopRight()}
+            {/if}
+            <button type="button" class="e11y-icon-btn" onclick={onclose} aria-label="Close"
+              >&times;</button
+            >
+          </div>
+        </div>
+        {#if headerBottom}
+          <div class="e11y-panel-header-bottom">
+            {@render headerBottom()}
+          </div>
+        {/if}
+      </div>
+      <div class="e11y-panel-body">
+        {@render children()}
+      </div>
+    </div>
+  </div>
+{/if}

data/gems/e11y-devtools/frontend/src/components/InteractionsTimeline.svelte

@@ -0,0 +1,264 @@
+<script lang="ts" module>
+  export type TimelineTimeRange = { startMs: number; endMs: number }
+</script>
+
+<script lang="ts">
+  import { scaleTime, scaleLinear } from "d3-scale"
+  import { Axis, Chart, Svg } from "layerchart"
+
+  let {
+    interactions = [] as Record<string, unknown>[],
+    timeRange = $bindable(null as TimelineTimeRange | null),
+  } = $props()
+
+  const CHART_PAD = { top: 8, right: 6, bottom: 20, left: 4 } as const
+  const HEIGHT = 64
+
+  const COL_ERR = "var(--e11y-err)"
+  const COL_WARN = "var(--e11y-warn)"
+  const COL_REST = "var(--e11y-ok)"
+  const COL_SEL_SHADE = "var(--e11y-sel-bg)"
+
+  let parsed = $derived.by(() => {
+    return interactions
+      .map((i) => {
+        const t = new Date(String(i.started_at || "")).getTime()
+        const d = Number(i.duration) || 0
+        const s = Number(i.status) || 200
+        return { t, d, s, id: String(i.id || Math.random()) }
+      })
+      .filter((i) => !isNaN(i.t))
+      // sort by time so drawing order is consistent
+      .sort((a, b) => a.t - b.t)
+  })
+
+  let tExtents = $derived.by(() => {
+    if (parsed.length === 0) return { min: 0, max: 1 }
+    let min = parsed[0].t
+    let max = parsed[parsed.length - 1].t
+    if (max === min) {
+      min -= 1000
+      max += 1000
+    }
+    return { min, max }
+  })
+
+  let dMax = $derived.by(() => {
+    if (parsed.length === 0) return 1
+    return Math.max(1, ...parsed.map((p) => p.d))
+  })
+
+  let chartWidth = $state(0)
+
+  let xTime = $derived(
+    scaleTime()
+      .domain([new Date(tExtents.min), new Date(tExtents.max)])
+      .range([0, Math.max(0, chartWidth - CHART_PAD.left - CHART_PAD.right)])
+  )
+
+  let yLinear = $derived(
+    scaleLinear()
+      .domain([0, dMax])
+      .range([Math.max(0, HEIGHT - CHART_PAD.top - CHART_PAD.bottom), 0])
+  )
+
+  let chartHost: HTMLDivElement | null = $state(null)
+  let brushOverlay: HTMLDivElement | null = $state(null)
+  let dragA = $state<number | null>(null)
+  let dragB = $state<number | null>(null)
+  let dragging = $state(false)
+
+  function formatTick(d: Date): string {
+    return d.toISOString().slice(11, 23) + "Z"
+  }
+
+  function clientToInnerPlotX(clientX: number, clientY: number): number | null {
+    const root = chartHost
+    if (!root) return null
+    const svg = root.querySelector<SVGSVGElement>("svg.layercake-layout-svg")
+    const g = svg?.querySelector<SVGGElement>(".layercake-layout-svg_g")
+    if (!svg || !g) return null
+    const m = g.getScreenCTM()
+    if (!m) return null
+    return new DOMPoint(clientX, clientY).matrixTransform(m.inverse()).x
+  }
+
+  function timeFromClientX(clientX: number, clientY: number): number {
+    if (parsed.length === 0) return 0
+    const root = chartHost
+    if (!root) return 0
+    let xInner = clientToInnerPlotX(clientX, clientY)
+    if (xInner == null || !Number.isFinite(xInner)) {
+      const svg = root.querySelector<SVGSVGElement>("svg.layercake-layout-svg")
+      const rect = svg?.getBoundingClientRect() ?? root.getBoundingClientRect()
+      xInner = clientX - rect.left - CHART_PAD.left
+    }
+    const range = xTime.range()
+    xInner = Math.max(range[0], Math.min(range[1], xInner))
+    return xTime.invert(xInner).getTime()
+  }
+
+  function commitRange(t0: number, t1: number): void {
+    const startMs = Math.min(t0, t1)
+    const endMs = Math.max(t0, t1)
+    timeRange = { startMs, endMs }
+  }
+
+  function onPointerDown(e: PointerEvent): void {
+    if (e.button !== 0) return
+    if (parsed.length === 0) return
+    const cap = brushOverlay ?? chartHost
+    if (!cap) return
+    try {
+      cap.setPointerCapture(e.pointerId)
+    } catch {
+      /* ignore */
+    }
+    dragging = true
+    const t = timeFromClientX(e.clientX, e.clientY)
+    dragA = t
+    dragB = t
+  }
+
+  function onPointerMove(e: PointerEvent): void {
+    if (!dragging || dragA === null) return
+    dragB = timeFromClientX(e.clientX, e.clientY)
+  }
+
+  function onPointerUp(e: PointerEvent): void {
+    const cap = brushOverlay ?? chartHost
+    if (!cap) return
+    try {
+      cap.releasePointerCapture(e.pointerId)
+    } catch {
+      /* ignore */
+    }
+    if (dragging && dragA !== null && dragB !== null) {
+      commitRange(dragA, dragB)
+    }
+    dragging = false
+    dragA = null
+    dragB = null
+  }
+
+  function onDoubleClick(): void {
+    timeRange = null
+  }
+
+  function clearRange(): void {
+    timeRange = null
+  }
+
+  let activeRange = $derived.by(() => {
+    if (dragging && dragA !== null && dragB !== null) {
+      return { startMs: Math.min(dragA, dragB), endMs: Math.max(dragA, dragB) }
+    }
+    return timeRange
+  })
+
+  let selectionLayout = $derived.by(() => {
+    const r = activeRange
+    if (!r) return null
+    const x0 = xTime(new Date(r.startMs))
+    const x1 = xTime(new Date(r.endMs))
+    const plotH = HEIGHT - CHART_PAD.top - CHART_PAD.bottom
+    return {
+      left: CHART_PAD.left + x0,
+      top: CHART_PAD.top,
+      width: Math.max(0, x1 - x0),
+      height: Math.max(0, plotH),
+    }
+  })
+
+  function colorForStatus(s: number): string {
+    if (s >= 500) return COL_ERR
+    if (s >= 400) return COL_WARN
+    return COL_REST
+  }
+</script>
+
+{#if parsed.length > 0}
+  <div class="e11y-histo-wrap">
+    <div
+      bind:this={chartHost}
+      bind:clientWidth={chartWidth}
+      class="e11y-histo-chart-host"
+      style:height="{HEIGHT}px"
+      style:min-height="{HEIGHT}px"
+      role="application"
+      aria-label="Interactions timeline. Drag to filter."
+    >
+      <Chart
+        data={parsed}
+        x="t"
+        xScale={xTime}
+        y="d"
+        yScale={yLinear}
+        padding={{ top: CHART_PAD.top, right: CHART_PAD.right, bottom: CHART_PAD.bottom, left: CHART_PAD.left }}
+      >
+        <Svg class="e11y-histo-svg">
+          {#each parsed as p (p.id)}
+            <line
+              x1={xTime(new Date(p.t))}
+              x2={xTime(new Date(p.t))}
+              y1={yLinear(0)}
+              y2={yLinear(p.d)}
+              stroke={colorForStatus(p.s)}
+              stroke-width="2"
+              stroke-linecap="round"
+            />
+          {/each}
+
+          <Axis
+            placement="bottom"
+            rule={false}
+            grid={false}
+            ticks={4}
+            format={(d) => formatTick(d as Date)}
+            tickLength={3}
+            tickLabelProps={{ class: "e11y-histo-axis-tick" }}
+          />
+        </Svg>
+      </Chart>
+      {#if selectionLayout}
+        <div
+          class="e11y-histo-sel-shade"
+          style:left="{selectionLayout.left}px"
+          style:top="{selectionLayout.top}px"
+          style:width="{selectionLayout.width}px"
+          style:height="{selectionLayout.height}px"
+          aria-hidden="true"
+        ></div>
+      {/if}
+      <div
+        bind:this={brushOverlay}
+        class="e11y-histo-brush-overlay"
+        aria-hidden="true"
+        onpointerdown={onPointerDown}
+        onpointermove={onPointerMove}
+        onpointerup={onPointerUp}
+        onpointercancel={onPointerUp}
+        ondblclick={onDoubleClick}
+      ></div>
+    </div>
+    <div class="e11y-histo-footer">
+      <div class="e11y-histo-legend">
+        <span><i class="e11y-histo-dot e11y-histo-dot--err"></i> 5xx</span>
+        <span><i class="e11y-histo-dot e11y-histo-dot--warn"></i> 4xx</span>
+        <span><i class="e11y-histo-dot e11y-histo-dot--rest"></i> ok</span>
+      </div>
+      <div class="e11y-histo-meta">
+        {#if activeRange}
+          <span class="e11y-histo-filter">
+            Filter: {formatTick(new Date(activeRange.startMs))}–{formatTick(new Date(activeRange.endMs))}
+          </span>
+          {#if timeRange}
+            <button type="button" class="e11y-histo-clear" onclick={clearRange}>Clear</button>
+          {/if}
+        {:else}
+          <span class="e11y-histo-hint">Drag to narrow · double-click to reset</span>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}