@reticular/speakable 1.6.0 → 1.8.0

package/dist/storybook/dist/chunk-3SVI6IQE.js

@@ -0,0 +1,86 @@
+// ../src/browser/upgrade.ts
+var DEFAULT_UPGRADE_TIMEOUT_MS = 2e3;
+function withTimeout(promise, timeoutMs) {
+  return new Promise((resolve) => {
+    let settled = false;
+    const timer = setTimeout(() => {
+      if (!settled) {
+        settled = true;
+        resolve(false);
+      }
+    }, timeoutMs);
+    promise.then(
+      () => {
+        if (!settled) {
+          settled = true;
+          clearTimeout(timer);
+          resolve(true);
+        }
+      },
+      () => {
+        if (!settled) {
+          settled = true;
+          clearTimeout(timer);
+          resolve(true);
+        }
+      }
+    );
+  });
+}
+function collectCustomElementTags(root) {
+  const tags = /* @__PURE__ */ new Set();
+  const rootEl = "documentElement" in root ? root.documentElement : root;
+  if (!rootEl) return [];
+  const consider = (el) => {
+    if (el.localName && el.localName.includes("-")) {
+      tags.add(el.localName);
+    }
+  };
+  consider(rootEl);
+  const all = rootEl.querySelectorAll("*");
+  all.forEach(consider);
+  return Array.from(tags);
+}
+function collectUpdateCompletables(root) {
+  const rootEl = "documentElement" in root ? root.documentElement : root;
+  if (!rootEl) return [];
+  const promises = [];
+  const consider = (el) => {
+    const uc = el.updateComplete;
+    if (uc && typeof uc.then === "function") {
+      promises.push(uc);
+    }
+  };
+  consider(rootEl);
+  rootEl.querySelectorAll("*").forEach(consider);
+  return promises;
+}
+async function awaitCustomElementsReady(root, timeoutMs = DEFAULT_UPGRADE_TIMEOUT_MS) {
+  const warnings = [];
+  const hasCustomElements = typeof customElements !== "undefined" && customElements !== null;
+  if (!hasCustomElements) {
+    return warnings;
+  }
+  const tags = collectCustomElementTags(root);
+  await Promise.all(
+    tags.map(async (tag) => {
+      if (customElements.get(tag)) return;
+      const defined = await withTimeout(customElements.whenDefined(tag), timeoutMs);
+      if (!defined) {
+        warnings.push({
+          tag,
+          message: `Custom element "${tag}" did not upgrade within ${timeoutMs}ms; analysis may reflect a pre-hydration state.`
+        });
+      }
+    })
+  );
+  const updateCompletables = collectUpdateCompletables(root);
+  if (updateCompletables.length > 0) {
+    await withTimeout(Promise.all(updateCompletables), timeoutMs);
+  }
+  return warnings;
+}
+
+export {
+  awaitCustomElementsReady
+};

package/dist/storybook/dist/{chunk-CL3DJBD7.js → chunk-JSBRDJBE.js}

@@ -24,17 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// src/index.ts
-var ADDON_ID = "speakable";
-var PANEL_ID = `${ADDON_ID}/panel`;
-var EVENT_RENDER = `${ADDON_ID}/render`;
-var EVENT_RESULT = `${ADDON_ID}/result`;
-
 export {
   __commonJS,
-  __toESM,
-  ADDON_ID,
-  PANEL_ID,
-  EVENT_RENDER,
-  EVENT_RESULT
+  __toESM
 };

package/dist/storybook/dist/chunk-QVJRQZT5.js

@@ -0,0 +1,16 @@
+// src/index.ts
+var ADDON_ID = "speakable";
+var PANEL_ID = `${ADDON_ID}/panel`;
+var EVENT_RENDER = `${ADDON_ID}/render`;
+var EVENT_RESULT = `${ADDON_ID}/result`;
+var EVENT_TIMELINE = `${ADDON_ID}/timeline`;
+var EVENT_DIFF = `${ADDON_ID}/diff`;
+
+export {
+  ADDON_ID,
+  PANEL_ID,
+  EVENT_RENDER,
+  EVENT_RESULT,
+  EVENT_TIMELINE,
+  EVENT_DIFF
+};

package/dist/storybook/dist/index.js

@@ -1,12 +1,17 @@
 import {
   ADDON_ID,
+  EVENT_DIFF,
   EVENT_RENDER,
   EVENT_RESULT,
+  EVENT_TIMELINE,
   PANEL_ID
-} from "./chunk-CL3DJBD7.js";
+} from "./chunk-QVJRQZT5.js";
+import "./chunk-JSBRDJBE.js";
 export {
   ADDON_ID,
+  EVENT_DIFF,
   EVENT_RENDER,
   EVENT_RESULT,
+  EVENT_TIMELINE,
   PANEL_ID
 };

package/dist/storybook/dist/manager.js

@@ -1,31 +1,325 @@
 import {
   ADDON_ID,
   EVENT_RESULT,
+  EVENT_TIMELINE,
   PANEL_ID
-} from "./chunk-CL3DJBD7.js";
+} from "./chunk-QVJRQZT5.js";
+import "./chunk-JSBRDJBE.js";
 
 // src/manager.tsx
 import { useState, useEffect } from "react";
 import { addons, types } from "@storybook/manager-api";
+
+// ../src/runtime/diff-engine.ts
+function matchingKey(event) {
+  return `${event.type}::${event.target.selector}`;
+}
+function payloadsEqual(a, b) {
+  if (a.type !== b.type) return false;
+  if (!targetsEqual(a.target, b.target)) return false;
+  return deepEqual(a.payload, b.payload);
+}
+function targetsEqual(a, b) {
+  return a.role === b.role && a.accessibleName === b.accessibleName && a.selector === b.selector;
+}
+function deepEqual(a, b) {
+  if (a === b) return true;
+  if (a === null || b === null) return a === b;
+  if (typeof a !== typeof b) return false;
+  if (typeof a !== "object") return a === b;
+  const aObj = a;
+  const bObj = b;
+  const aKeys = Object.keys(aObj).sort();
+  const bKeys = Object.keys(bObj).sort();
+  if (aKeys.length !== bKeys.length) return false;
+  for (let i = 0; i < aKeys.length; i++) {
+    if (aKeys[i] !== bKeys[i]) return false;
+    if (!deepEqual(aObj[aKeys[i]], bObj[bKeys[i]])) return false;
+  }
+  return true;
+}
+function buildModifiedMessage(baseline, current) {
+  const type = current.type;
+  const selector = current.target.selector;
+  if (baseline.target.accessibleName !== current.target.accessibleName) {
+    return `${type} on "${selector}": accessible name changed from "${baseline.target.accessibleName}" to "${current.target.accessibleName}"`;
+  }
+  if (baseline.target.role !== current.target.role) {
+    return `${type} on "${selector}": role changed from "${baseline.target.role}" to "${current.target.role}"`;
+  }
+  return `${type} on "${selector}": payload values differ`;
+}
+function diffTimelines(baseline, current) {
+  const added = [];
+  const removed = [];
+  const modified = [];
+  const currentByKey = /* @__PURE__ */ new Map();
+  for (const event of current.events) {
+    const key = matchingKey(event);
+    const existing = currentByKey.get(key);
+    if (existing) {
+      existing.push(event);
+    } else {
+      currentByKey.set(key, [event]);
+    }
+  }
+  const matchedCurrentIndices = /* @__PURE__ */ new Set();
+  for (const baselineEvent of baseline.events) {
+    const key = matchingKey(baselineEvent);
+    const candidates = currentByKey.get(key);
+    if (!candidates || candidates.length === 0) {
+      removed.push({
+        event: baselineEvent,
+        message: `${baselineEvent.type} on "${baselineEvent.target.selector}" was removed`
+      });
+      continue;
+    }
+    let matched = false;
+    for (let i = 0; i < candidates.length; i++) {
+      const candidateId = `${key}::${i}`;
+      if (matchedCurrentIndices.has(candidateId)) continue;
+      const currentEvent = candidates[i];
+      matchedCurrentIndices.add(candidateId);
+      if (!payloadsEqual(baselineEvent, currentEvent)) {
+        modified.push({
+          event: currentEvent,
+          previousEvent: baselineEvent,
+          message: buildModifiedMessage(baselineEvent, currentEvent)
+        });
+      }
+      matched = true;
+      break;
+    }
+    if (!matched) {
+      removed.push({
+        event: baselineEvent,
+        message: `${baselineEvent.type} on "${baselineEvent.target.selector}" was removed`
+      });
+    }
+  }
+  for (const [key, candidates] of currentByKey.entries()) {
+    for (let i = 0; i < candidates.length; i++) {
+      const candidateId = `${key}::${i}`;
+      if (!matchedCurrentIndices.has(candidateId)) {
+        const event = candidates[i];
+        added.push({
+          event,
+          message: `${event.type} on "${event.target.selector}" was added`
+        });
+      }
+    }
+  }
+  return {
+    baseline: { totalEvents: baseline.events.length },
+    current: { totalEvents: current.events.length },
+    added,
+    removed,
+    modified,
+    summary: {
+      totalBaseline: baseline.events.length,
+      totalCurrent: current.events.length,
+      added: added.length,
+      removed: removed.length,
+      modified: modified.length
+    }
+  };
+}
+
+// ../src/runtime/severity.ts
+function classifyDiff(report) {
+  const entries = [];
+  for (const entry of report.removed) {
+    const severity = classifyRemoved(entry);
+    entries.push({ ...entry, severity });
+  }
+  for (const entry of report.added) {
+    const severity = classifyAdded(entry);
+    entries.push({ ...entry, severity });
+  }
+  for (const entry of report.modified) {
+    const severity = classifyModified(entry);
+    entries.push({ ...entry, severity });
+  }
+  const criticalCount = entries.filter((e) => e.severity === "critical").length;
+  const highCount = entries.filter((e) => e.severity === "high").length;
+  const mediumCount = entries.filter((e) => e.severity === "medium").length;
+  const lowCount = entries.filter((e) => e.severity === "low").length;
+  let highestSeverity = null;
+  if (criticalCount > 0) highestSeverity = "critical";
+  else if (highCount > 0) highestSeverity = "high";
+  else if (mediumCount > 0) highestSeverity = "medium";
+  else if (lowCount > 0) highestSeverity = "low";
+  return { entries, highestSeverity, criticalCount, highCount, mediumCount, lowCount };
+}
+function classifyRemoved(entry) {
+  switch (entry.event.type) {
+    case "FOCUS_CHANGED":
+      return "critical";
+    case "ANNOUNCEMENT":
+      return "critical";
+    case "DIALOG_OPENED":
+      return "high";
+    case "DIALOG_CLOSED":
+      return "high";
+    case "STATE_CHANGED":
+      return "high";
+    case "KEYBOARD_ACTION":
+      return "medium";
+    default:
+      return "medium";
+  }
+}
+function classifyAdded(entry) {
+  switch (entry.event.type) {
+    case "WARNING":
+      return "high";
+    case "REGRESSION":
+      return "critical";
+    case "ANNOUNCEMENT":
+      return "medium";
+    case "FOCUS_CHANGED":
+      return "medium";
+    default:
+      return "low";
+  }
+}
+function classifyModified(entry) {
+  switch (entry.event.type) {
+    case "FOCUS_CHANGED":
+      return "high";
+    case "STATE_CHANGED":
+      return "high";
+    case "ACCESSIBLE_NAME_CHANGED":
+      return "medium";
+    case "ANNOUNCEMENT":
+      return "medium";
+    default:
+      return "medium";
+  }
+}
+
+// src/baseline-store.ts
+var STORAGE_PREFIX = "speakable:baseline:";
+function getStorage() {
+  try {
+    if (typeof localStorage !== "undefined") return localStorage;
+  } catch {
+  }
+  return null;
+}
+function createPanelBaselineStore() {
+  const memory = /* @__PURE__ */ new Map();
+  function storageKey(component, story) {
+    return `${STORAGE_PREFIX}${component}::${story}`;
+  }
+  return {
+    key(component, story) {
+      return storageKey(component, story);
+    },
+    async save(component, story, timeline) {
+      const k = storageKey(component, story);
+      const json = JSON.stringify(timeline);
+      const storage = getStorage();
+      if (storage) {
+        storage.setItem(k, json);
+      } else {
+        memory.set(k, json);
+      }
+    },
+    async load(component, story) {
+      const k = storageKey(component, story);
+      const storage = getStorage();
+      const json = storage ? storage.getItem(k) : memory.get(k) ?? null;
+      if (!json) return null;
+      try {
+        return JSON.parse(json);
+      } catch {
+        return null;
+      }
+    }
+  };
+}
+
+// src/manager.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var READER_TABS = [
   { key: "nvda", label: "NVDA", color: "#3b82f6" },
   { key: "jaws", label: "JAWS", color: "#8b5cf6" },
   { key: "voiceover", label: "VoiceOver", color: "#06b6d4" },
   { key: "narrator", label: "Narrator", color: "#f59e0b" },
-  { key: "audit", label: "Audit", color: "#ef4444" }
+  { key: "audit", label: "Audit", color: "#ef4444" },
+  { key: "timeline", label: "Timeline", color: "#10b981" },
+  { key: "diff", label: "Diff", color: "#ec4899" }
 ];
+var baselineStore = createPanelBaselineStore();
+var SEVERITY_COLORS = {
+  critical: "#ef4444",
+  high: "#f97316",
+  medium: "#f59e0b",
+  low: "#6b7280"
+};
+function summarizePayload(event) {
+  const p = event.payload;
+  switch (p.kind) {
+    case "focus_changed":
+      return "focus moved here";
+    case "announcement":
+      return `announce (${p.politeness}): "${p.text}"`;
+    case "role_changed":
+      return `role ${p.previousRole} \u2192 ${p.newRole}`;
+    case "accessible_name_changed":
+      return `name "${p.previousName}" \u2192 "${p.newName}"`;
+    case "state_changed":
+      return `${p.attribute}: ${String(p.previousValue)} \u2192 ${String(p.newValue)}`;
+    case "dialog_opened":
+      return `dialog opened: ${p.dialogName}${p.isModal ? " (modal)" : ""}`;
+    case "dialog_closed":
+      return `dialog closed: ${p.dialogName}`;
+    case "keyboard_action":
+      return `key ${[...p.modifiers || [], p.key].join("+")}`;
+    case "warning":
+      return `\u26A0 ${p.message}`;
+    default:
+      return "";
+  }
+}
 function SpeakablePanel() {
   const [result, setResult] = useState(null);
+  const [timeline, setTimeline] = useState(null);
+  const [diff, setDiff] = useState(null);
+  const [hasBaseline, setHasBaseline] = useState(false);
   const [activeTab, setActiveTab] = useState("nvda");
   useEffect(() => {
     const channel = addons.getChannel();
     const handleResult = (data) => {
       setResult(data);
     };
+    const handleTimeline = async (data) => {
+      setTimeline(data);
+      const baseline = await baselineStore.load(data.component, data.story || "Story");
+      if (baseline) {
+        setHasBaseline(true);
+        const report = diffTimelines(baseline, data);
+        setDiff(classifyDiff(report));
+      } else {
+        setHasBaseline(false);
+        setDiff(null);
+      }
+    };
     channel.on(EVENT_RESULT, handleResult);
-    return () => channel.off(EVENT_RESULT, handleResult);
+    channel.on(EVENT_TIMELINE, handleTimeline);
+    return () => {
+      channel.off(EVENT_RESULT, handleResult);
+      channel.off(EVENT_TIMELINE, handleTimeline);
+    };
   }, []);
+  const handleSetBaseline = async () => {
+    if (!timeline) return;
+    await baselineStore.save(timeline.component, timeline.story || "Story", timeline);
+    setHasBaseline(true);
+    const report = diffTimelines(timeline, timeline);
+    setDiff(classifyDiff(report));
+  };
   if (!result) {
     return /* @__PURE__ */ jsxs("div", { style: styles.emptyState, children: [
       /* @__PURE__ */ jsx("div", { style: styles.emptyIcon, children: "\u{1F50A}" }),
@@ -33,7 +327,9 @@ function SpeakablePanel() {
       /* @__PURE__ */ jsx("p", { style: styles.emptySubtext, children: "Powered by Speakable" })
     ] });
   }
-  const activeLines = activeTab === "audit" ? [] : result[activeTab];
+  const READER_KEYS = ["nvda", "jaws", "voiceover", "narrator"];
+  const isReaderTab = READER_KEYS.includes(activeTab);
+  const activeLines = isReaderTab ? result[activeTab] : [];
   const auditFindings = result.audit;
   return /* @__PURE__ */ jsxs("div", { style: styles.container, children: [
     /* @__PURE__ */ jsx("div", { style: styles.tabBar, children: READER_TABS.map((tab) => /* @__PURE__ */ jsxs(
@@ -69,7 +365,7 @@ function SpeakablePanel() {
         " headings"
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: styles.content, children: activeTab === "audit" ? /* @__PURE__ */ jsx(AuditView, { findings: auditFindings }) : /* @__PURE__ */ jsx(AnnouncementView, { lines: activeLines, readerKey: activeTab }) }),
+    /* @__PURE__ */ jsx("div", { style: styles.content, children: activeTab === "audit" ? /* @__PURE__ */ jsx(AuditView, { findings: auditFindings }) : activeTab === "timeline" ? /* @__PURE__ */ jsx(TimelineView, { timeline, hasBaseline, onSetBaseline: handleSetBaseline }) : activeTab === "diff" ? /* @__PURE__ */ jsx(DiffView, { diff, hasBaseline, hasTimeline: !!timeline, onSetBaseline: handleSetBaseline }) : /* @__PURE__ */ jsx(AnnouncementView, { lines: activeLines, readerKey: activeTab }) }),
     /* @__PURE__ */ jsxs("div", { style: styles.footer, children: [
       /* @__PURE__ */ jsx("span", { style: styles.footerText, children: "Predictions are heuristic-based. Verify with real screen readers before release." }),
       /* @__PURE__ */ jsx("a", { href: "https://getspeakable.dev", target: "_blank", rel: "noopener noreferrer", style: styles.footerLink, children: "getspeakable.dev" })
@@ -101,6 +397,86 @@ function AuditView({ findings }) {
     ] })
   ] }, i)) });
 }
+function TimelineView({
+  timeline,
+  hasBaseline,
+  onSetBaseline
+}) {
+  if (!timeline) {
+    return /* @__PURE__ */ jsxs("p", { style: styles.emptyContent, children: [
+      "No interaction timeline for this story. Add",
+      " ",
+      /* @__PURE__ */ jsx("code", { children: "parameters.speakable.sequence" }),
+      " or",
+      " ",
+      /* @__PURE__ */ jsx("code", { children: "parameters.speakable.pattern" }),
+      " to capture one."
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { style: styles.baselineBar, children: [
+      /* @__PURE__ */ jsxs("span", { style: styles.stat, children: [
+        timeline.events.length,
+        " events \xB7 ",
+        timeline.duration,
+        "ms"
+      ] }),
+      /* @__PURE__ */ jsx("span", { style: styles.baselineHint, children: hasBaseline ? "\u2713 baseline set" : "No baseline yet" }),
+      /* @__PURE__ */ jsx("button", { style: styles.baselineButton, onClick: onSetBaseline, children: "Set baseline" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: styles.lineList, children: timeline.events.map((event, i) => /* @__PURE__ */ jsxs("div", { style: styles.line, children: [
+      /* @__PURE__ */ jsxs("span", { style: styles.lineNumber, children: [
+        event.timestamp,
+        "ms"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { style: styles.lineText, children: [
+        /* @__PURE__ */ jsx("strong", { children: event.type }),
+        event.target.role ? ` \xB7 ${event.target.role}` : "",
+        event.target.accessibleName ? ` "${event.target.accessibleName}"` : "",
+        summarizePayload(event) ? ` \u2014 ${summarizePayload(event)}` : ""
+      ] })
+    ] }, i)) })
+  ] });
+}
+function DiffView({
+  diff,
+  hasBaseline,
+  hasTimeline,
+  onSetBaseline
+}) {
+  if (!hasBaseline) {
+    return /* @__PURE__ */ jsxs("div", { style: styles.emptyState, children: [
+      /* @__PURE__ */ jsx("p", { style: styles.emptyText, children: "No baseline to compare against" }),
+      /* @__PURE__ */ jsx("p", { style: styles.emptySubtext, children: "Capture a timeline, then set it as the baseline to detect regressions." }),
+      hasTimeline && /* @__PURE__ */ jsx("button", { style: styles.baselineButton, onClick: onSetBaseline, children: "Set baseline" })
+    ] });
+  }
+  if (!diff || diff.entries.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { style: styles.auditPass, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2713" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: 0, fontWeight: 600, color: "#059669" }, children: "No behavioral changes" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 12, color: "#6b7280" }, children: "The current timeline matches the baseline." })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { style: styles.lineList, children: diff.entries.map((entry, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { ...styles.finding, background: "#fff7fb", borderLeftWidth: 3, borderLeftStyle: "solid", borderLeftColor: SEVERITY_COLORS[entry.severity] },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { ...styles.findingSeverity, color: SEVERITY_COLORS[entry.severity] }, children: entry.severity.toUpperCase() }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { style: styles.findingMessage, children: entry.message }),
+          /* @__PURE__ */ jsxs("p", { style: styles.findingSelector, children: [
+            entry.event.type,
+            " \xB7 ",
+            entry.event.target.selector
+          ] })
+        ] })
+      ]
+    },
+    i
+  )) });
+}
 var styles = {
   container: {
     display: "flex",
@@ -157,6 +533,29 @@ var styles = {
     borderBottom: "1px solid #f1f5f9",
     background: "#f8fafc"
   },
+  baselineBar: {
+    display: "flex",
+    alignItems: "center",
+    gap: 12,
+    padding: "8px 16px",
+    borderBottom: "1px solid #f1f5f9",
+    background: "#f8fafc"
+  },
+  baselineHint: {
+    fontSize: 11,
+    color: "#64748b",
+    marginLeft: "auto"
+  },
+  baselineButton: {
+    fontSize: 11,
+    fontWeight: 600,
+    color: "#fff",
+    background: "#10b981",
+    border: "none",
+    borderRadius: 4,
+    padding: "4px 10px",
+    cursor: "pointer"
+  },
   stat: {
     fontSize: 11,
     color: "#64748b",