@reticular/speakable 1.5.0 → 1.6.0

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

@@ -0,0 +1,40 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  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
+};

package/dist/storybook/dist/index.js

@@ -0,0 +1,12 @@
+import {
+  ADDON_ID,
+  EVENT_RENDER,
+  EVENT_RESULT,
+  PANEL_ID
+} from "./chunk-CL3DJBD7.js";
+export {
+  ADDON_ID,
+  EVENT_RENDER,
+  EVENT_RESULT,
+  PANEL_ID
+};

package/dist/storybook/dist/manager.js

@@ -0,0 +1,302 @@
+import {
+  ADDON_ID,
+  EVENT_RESULT,
+  PANEL_ID
+} from "./chunk-CL3DJBD7.js";
+
+// src/manager.tsx
+import { useState, useEffect } from "react";
+import { addons, types } from "@storybook/manager-api";
+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" }
+];
+function SpeakablePanel() {
+  const [result, setResult] = useState(null);
+  const [activeTab, setActiveTab] = useState("nvda");
+  useEffect(() => {
+    const channel = addons.getChannel();
+    const handleResult = (data) => {
+      setResult(data);
+    };
+    channel.on(EVENT_RESULT, handleResult);
+    return () => channel.off(EVENT_RESULT, handleResult);
+  }, []);
+  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 activeLines = activeTab === "audit" ? [] : 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 }) : /* @__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)) });
+}
+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"
+  },
+  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
+  });
+});

package/dist/storybook/dist/preset.js

@@ -0,0 +1,38 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/preset.ts
+var preset_exports = {};
+__export(preset_exports, {
+  managerEntries: () => managerEntries,
+  previewAnnotations: () => previewAnnotations
+});
+module.exports = __toCommonJS(preset_exports);
+var import_path = require("path");
+function managerEntries(entry = []) {
+  return [...entry, (0, import_path.join)(__dirname, "manager.js")];
+}
+function previewAnnotations(entry = []) {
+  return [...entry, (0, import_path.join)(__dirname, "preview.js")];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  managerEntries,
+  previewAnnotations
+});