@reticular/speakable 1.5.0 → 1.7.0

package/dist/storybook/dist/manager.js

@@ -0,0 +1,701 @@
+import {
+  ADDON_ID,
+  EVENT_RESULT,
+  EVENT_TIMELINE,
+  PANEL_ID
+} 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: "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);
+    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}" }),
+      /* @__PURE__ */ jsx("p", { style: styles.emptyText, children: "Render a story to see predicted screen reader output" }),
+      /* @__PURE__ */ jsx("p", { style: styles.emptySubtext, children: "Powered by Speakable" })
+    ] });
+  }
+  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(
+      "button",
+      {
+        onClick: () => setActiveTab(tab.key),
+        style: {
+          ...styles.tab,
+          ...activeTab === tab.key ? { ...styles.tabActive, borderBottomColor: tab.color } : { borderBottomColor: "transparent" }
+        },
+        children: [
+          tab.label,
+          tab.key === "audit" && auditFindings.length > 0 && /* @__PURE__ */ jsx("span", { style: styles.badge, children: auditFindings.length })
+        ]
+      },
+      tab.key
+    )) }),
+    /* @__PURE__ */ jsxs("div", { style: styles.statsBar, children: [
+      /* @__PURE__ */ jsxs("span", { style: styles.stat, children: [
+        result.stats.totalElements,
+        " elements"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { style: styles.stat, children: [
+        result.stats.interactiveElements,
+        " interactive"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { style: styles.stat, children: [
+        result.stats.landmarks,
+        " landmarks"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { style: styles.stat, children: [
+        result.stats.headings,
+        " headings"
+      ] })
+    ] }),
+    /* @__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" })
+    ] })
+  ] });
+}
+function AnnouncementView({ lines, readerKey }) {
+  if (lines.length === 0) {
+    return /* @__PURE__ */ jsx("p", { style: styles.emptyContent, children: "No announcements for this story." });
+  }
+  return /* @__PURE__ */ jsx("div", { style: styles.lineList, children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", { style: styles.line, children: [
+    /* @__PURE__ */ jsx("span", { style: styles.lineNumber, children: i + 1 }),
+    /* @__PURE__ */ jsx("span", { style: styles.lineText, children: line })
+  ] }, `${readerKey}-${i}`)) });
+}
+function AuditView({ findings }) {
+  if (findings.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 issues found" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 12, color: "#6b7280" }, children: "All interactive elements have accessible names and heading hierarchy is correct." })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { style: styles.lineList, children: findings.map((finding, i) => /* @__PURE__ */ jsxs("div", { style: { ...styles.finding, borderLeftColor: finding.severity === "error" ? "#ef4444" : finding.severity === "warning" ? "#f59e0b" : "#6b7280" }, children: [
+    /* @__PURE__ */ jsx("div", { style: styles.findingSeverity, children: finding.severity === "error" ? "\u2717" : finding.severity === "warning" ? "\u26A0" : "\u2139" }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { style: styles.findingMessage, children: finding.message }),
+      /* @__PURE__ */ jsx("p", { style: styles.findingSelector, children: finding.selector })
+    ] })
+  ] }, 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",
+    flexDirection: "column",
+    height: "100%",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontSize: 13,
+    color: "#1e293b",
+    background: "#ffffff"
+  },
+  tabBar: {
+    display: "flex",
+    borderBottom: "1px solid #e2e8f0",
+    padding: "0 12px",
+    gap: 0,
+    background: "#f8fafc"
+  },
+  tab: {
+    padding: "10px 14px",
+    fontSize: 12,
+    fontWeight: 600,
+    color: "#64748b",
+    background: "none",
+    borderTop: "none",
+    borderLeft: "none",
+    borderRight: "none",
+    borderBottomWidth: 2,
+    borderBottomStyle: "solid",
+    borderBottomColor: "transparent",
+    cursor: "pointer",
+    transition: "color 0.15s, border-color 0.15s",
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    outline: "none"
+  },
+  tabActive: {
+    color: "#1e293b"
+  },
+  badge: {
+    background: "#ef4444",
+    color: "#fff",
+    fontSize: 10,
+    fontWeight: 700,
+    borderRadius: 10,
+    padding: "1px 6px",
+    minWidth: 18,
+    textAlign: "center"
+  },
+  statsBar: {
+    display: "flex",
+    gap: 16,
+    padding: "8px 16px",
+    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",
+    fontWeight: 500
+  },
+  content: {
+    flex: 1,
+    overflow: "auto",
+    padding: 0
+  },
+  lineList: {
+    padding: "8px 0"
+  },
+  line: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 12,
+    padding: "6px 16px",
+    borderBottom: "1px solid #f8fafc",
+    transition: "background 0.1s"
+  },
+  lineNumber: {
+    fontSize: 10,
+    color: "#94a3b8",
+    fontFamily: "monospace",
+    minWidth: 20,
+    textAlign: "right",
+    paddingTop: 2
+  },
+  lineText: {
+    fontSize: 13,
+    color: "#1e293b",
+    fontFamily: "monospace",
+    lineHeight: 1.5
+  },
+  emptyContent: {
+    padding: 24,
+    textAlign: "center",
+    color: "#94a3b8"
+  },
+  footer: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "8px 16px",
+    borderTop: "1px solid #e2e8f0",
+    background: "#f8fafc"
+  },
+  footerText: {
+    fontSize: 11,
+    color: "#94a3b8",
+    fontStyle: "italic"
+  },
+  footerLink: {
+    fontSize: 11,
+    color: "#3b82f6",
+    textDecoration: "none",
+    fontWeight: 600
+  },
+  emptyState: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    gap: 8,
+    padding: 32
+  },
+  emptyIcon: {
+    fontSize: 32
+  },
+  emptyText: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: "#475569"
+  },
+  emptySubtext: {
+    fontSize: 12,
+    color: "#94a3b8"
+  },
+  auditPass: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 8,
+    padding: 32,
+    color: "#059669"
+  },
+  finding: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 10,
+    padding: "10px 16px",
+    margin: "4px 12px",
+    borderRadius: 4,
+    background: "#fefce8"
+  },
+  findingSeverity: {
+    fontSize: 14,
+    fontWeight: 700,
+    paddingTop: 1
+  },
+  findingMessage: {
+    margin: 0,
+    fontSize: 13,
+    fontWeight: 500,
+    color: "#1e293b"
+  },
+  findingSelector: {
+    margin: "2px 0 0",
+    fontSize: 11,
+    color: "#64748b",
+    fontFamily: "monospace"
+  }
+};
+function SpeakableIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 32 32",
+      fill: "none",
+      style: { width: 14, height: 14, marginRight: 4, verticalAlign: "middle" },
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "28", height: "20", rx: "4", fill: "#0D9488" }),
+        /* @__PURE__ */ jsx("polygon", { points: "8,24 14,24 10,30", fill: "#0D9488" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 11 L12 17", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 9 L16 19", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("path", { d: "M20 11 L20 17", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+addons.register(ADDON_ID, () => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(SpeakableIcon, {}),
+      "Screen Readers"
+    ] }),
+    render: ({ active }) => active ? /* @__PURE__ */ jsx(SpeakablePanel, {}) : null
+  });
+});