aac-board-viewer 0.1.1

package/dist/index.mjs

@@ -0,0 +1,628 @@
+// src/components/BoardViewer.tsx
+import React, { useState, useMemo, useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function BoardViewer({
+  tree,
+  buttonMetrics,
+  showMessageBar = true,
+  showEffortBadges = true,
+  showLinkIndicators = true,
+  initialPageId,
+  onButtonClick,
+  onPageChange,
+  className = ""
+}) {
+  const resolveInitialPageId = useCallback(() => {
+    if (initialPageId && tree.pages[initialPageId]) {
+      return initialPageId;
+    }
+    if (tree.toolbarId && tree.rootId && tree.rootId !== tree.toolbarId) {
+      return tree.rootId;
+    }
+    if (tree.rootId && tree.pages[tree.rootId]) {
+      const rootPage = tree.pages[tree.rootId];
+      const isToolbar = rootPage.name.toLowerCase().includes("toolbar") || rootPage.name.toLowerCase().includes("tool bar");
+      if (!isToolbar) {
+        return tree.rootId;
+      }
+    }
+    const nonToolbarPage = Object.values(tree.pages).find(
+      (p) => !p.name.toLowerCase().includes("toolbar") && !p.name.toLowerCase().includes("tool bar")
+    );
+    if (nonToolbarPage) {
+      return nonToolbarPage.id;
+    }
+    const pageIds = Object.keys(tree.pages);
+    return pageIds.length > 0 ? pageIds[0] : null;
+  }, [initialPageId, tree]);
+  const [currentPageId, setCurrentPageId] = useState(() => resolveInitialPageId());
+  const [pageHistory, setPageHistory] = useState([]);
+  const [message, setMessage] = useState("");
+  const [currentWordCount, setCurrentWordCount] = useState(0);
+  const [currentEffort, setCurrentEffort] = useState(0);
+  const buttonMetricsLookup = useMemo(() => {
+    if (!buttonMetrics) return {};
+    const lookup = {};
+    buttonMetrics.forEach((metric) => {
+      lookup[metric.id] = metric;
+    });
+    return lookup;
+  }, [buttonMetrics]);
+  const currentPage = currentPageId ? tree.pages[currentPageId] : null;
+  React.useEffect(() => {
+    setCurrentPageId(resolveInitialPageId());
+    setPageHistory([]);
+  }, [resolveInitialPageId]);
+  const updateStats = (word, effort) => {
+    setCurrentWordCount((prev) => prev + 1);
+    setCurrentEffort((prev) => prev + effort);
+  };
+  const handleButtonClick = (button) => {
+    if (onButtonClick) {
+      onButtonClick(button);
+    }
+    const targetPageId = button.targetPageId || button.semanticAction?.targetId;
+    if (targetPageId && tree.pages[targetPageId]) {
+      if (currentPage) {
+        setPageHistory((prev) => [...prev, currentPage]);
+      }
+      setCurrentPageId(targetPageId);
+      if (onPageChange) {
+        onPageChange(targetPageId);
+      }
+      return;
+    }
+    const word = button.message || button.label;
+    const effort = buttonMetricsLookup[button.id]?.effort || 1;
+    setMessage((prev) => {
+      const newMessage = prev + (prev ? " " : "") + word;
+      updateStats(word, effort);
+      return newMessage;
+    });
+  };
+  const handleBack = () => {
+    if (pageHistory.length > 0) {
+      const previousPage = pageHistory[pageHistory.length - 1];
+      setPageHistory((prev) => prev.slice(0, -1));
+      setCurrentPageId(previousPage.id);
+      if (onPageChange) {
+        onPageChange(previousPage.id);
+      }
+    }
+  };
+  const clearMessage = () => {
+    setMessage("");
+    setCurrentWordCount(0);
+    setCurrentEffort(0);
+  };
+  const getTextColor = (backgroundColor) => {
+    if (!backgroundColor) return "text-gray-900 dark:text-gray-100";
+    const hex = backgroundColor.replace("#", "");
+    if (hex.length === 6) {
+      const r = parseInt(hex.substring(0, 2), 16);
+      const g = parseInt(hex.substring(2, 4), 16);
+      const b = parseInt(hex.substring(4, 6), 16);
+      const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
+      return brightness >= 128 ? "text-gray-900" : "text-white";
+    }
+    return "text-gray-900 dark:text-gray-100";
+  };
+  if (!currentPage) {
+    return /* @__PURE__ */ jsx("div", { className: `flex items-center justify-center h-96 bg-gray-100 dark:bg-gray-800 rounded-lg ${className}`, children: /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "No pages available" }) }) });
+  }
+  const toolbarPage = tree.toolbarId ? tree.pages[tree.toolbarId] : null;
+  const gridRows = currentPage.grid.length;
+  const gridCols = gridRows > 0 ? currentPage.grid[0].length : 0;
+  return /* @__PURE__ */ jsxs("div", { className: `bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden ${className}`, children: [
+    showMessageBar && /* @__PURE__ */ jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: message ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-lg text-gray-900 dark:text-white break-words", children: message }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-4 text-sm", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-gray-600 dark:text-gray-400", children: [
+            currentWordCount,
+            " ",
+            currentWordCount === 1 ? "word" : "words"
+          ] }),
+          buttonMetrics && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-gray-600 dark:text-gray-400", children: [
+              "Effort: ",
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: currentEffort.toFixed(2) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-gray-600 dark:text-gray-400", children: [
+              "Avg:",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: currentWordCount > 0 ? (currentEffort / currentWordCount).toFixed(2) : "0.00" })
+            ] })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400 italic", children: "Tap buttons to build a sentence..." }) }),
+      message && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: clearMessage,
+          className: "p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition",
+          "aria-label": "Clear message",
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-5 w-5 text-gray-600 dark:text-gray-400",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M6 18L18 6M6 6l12 12"
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+      toolbarPage && /* @__PURE__ */ jsx("div", { className: "w-16 sm:w-20 border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50", children: /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-500 dark:text-gray-400 text-center mb-2 font-semibold", children: "TOOLBAR" }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1", children: toolbarPage.grid.map(
+          (row, _rowIndex) => row.map((button, _colIndex) => {
+            if (!button) return null;
+            const buttonMetric = buttonMetricsLookup[button.id];
+            const effort = buttonMetric?.effort || 0;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => handleButtonClick(button),
+                className: "aspect-square p-1 rounded border border-gray-200 dark:border-gray-700 transition flex flex-col items-center justify-center gap-0.5 hover:bg-gray-200 dark:hover:bg-gray-700 relative",
+                style: {
+                  backgroundColor: button.style?.backgroundColor || "#f3f4f6",
+                  borderColor: button.style?.borderColor || "#e5e7eb"
+                },
+                title: `${button.label}
+${button.message || ""}`,
+                children: [
+                  buttonMetric && showEffortBadges && effort > 0 && /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 px-0.5 py-0 text-[8px] font-semibold rounded bg-blue-600 text-white", children: effort.toFixed(1) }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `text-[8px] sm:text-[9px] text-center font-medium leading-tight line-clamp-2 ${getTextColor(
+                        button.style?.backgroundColor
+                      )}`,
+                      children: button.label
+                    }
+                  )
+                ]
+              },
+              button.id
+            );
+          })
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            pageHistory.length > 0 && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleBack,
+                className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition",
+                "aria-label": "Go back",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "h-5 w-5 text-gray-600 dark:text-gray-400",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M15 19l-7-7 7-7"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: currentPage.name })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+            gridRows,
+            "\xD7",
+            gridCols,
+            " grid"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "p-4 gap-2 overflow-auto max-h-[600px]",
+            style: {
+              display: "grid",
+              gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))`
+            },
+            children: currentPage.grid.map(
+              (row, rowIndex) => row.map((button, colIndex) => {
+                if (!button) {
+                  return /* @__PURE__ */ jsx("div", { className: "aspect-square" }, `empty-${rowIndex}-${colIndex}`);
+                }
+                const buttonMetric = buttonMetricsLookup[button.id];
+                const effort = buttonMetric?.effort || 0;
+                const targetPageId = button.targetPageId || button.semanticAction?.targetId;
+                const hasLink = targetPageId && tree.pages[targetPageId];
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => handleButtonClick(button),
+                    className: "relative aspect-square p-2 rounded-lg border-2 transition flex flex-col items-center justify-center gap-1 hover:opacity-80 hover:scale-105 active:scale-95",
+                    style: {
+                      backgroundColor: button.style?.backgroundColor || "#f3f4f6",
+                      borderColor: button.style?.borderColor || "#e5e7eb",
+                      color: button.style?.fontColor || void 0
+                    },
+                    children: [
+                      buttonMetric && showEffortBadges && /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1 px-1.5 py-0.5 text-xs font-semibold rounded bg-blue-600 text-white shadow-sm", children: effort.toFixed(1) }),
+                      hasLink && showLinkIndicators && /* @__PURE__ */ jsx("div", { className: "absolute top-1 left-1 w-2 h-2 bg-green-500 rounded-full shadow-sm" }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `text-xs sm:text-sm text-center font-medium leading-tight line-clamp-3 ${getTextColor(
+                            button.style?.backgroundColor
+                          )}`,
+                          children: button.label
+                        }
+                      ),
+                      button.message && button.message !== button.label && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `text-[10px] sm:text-xs text-center opacity-75 line-clamp-2 ${getTextColor(
+                            button.style?.backgroundColor
+                          )}`,
+                          children: button.message
+                        }
+                      )
+                    ]
+                  },
+                  button.id
+                );
+              })
+            )
+          }
+        ),
+        Object.keys(tree.pages).length > 1 && /* @__PURE__ */ jsx("div", { className: "p-4 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-2", children: [
+          Object.keys(tree.pages).length,
+          " pages in this vocabulary"
+        ] }) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/hooks/useAACFile.ts
+import { useState as useState2, useEffect, useCallback as useCallback2 } from "react";
+
+// src/utils/loaders.ts
+async function importProcessors() {
+  return import("@willwade/aac-processors");
+}
+async function getProcessorForFile(filepath, options) {
+  const {
+    getProcessor,
+    GridsetProcessor,
+    SnapProcessor,
+    TouchChatProcessor,
+    ObfProcessor,
+    ApplePanelsProcessor,
+    AstericsGridProcessor,
+    OpmlProcessor,
+    ExcelProcessor,
+    DotProcessor
+  } = await importProcessors();
+  const ext = filepath.toLowerCase();
+  if (ext.endsWith(".gridset")) {
+    return new GridsetProcessor();
+  }
+  if (ext.endsWith(".sps") || ext.endsWith(".spb")) {
+    return options ? new SnapProcessor(null, options) : new SnapProcessor();
+  }
+  if (ext.endsWith(".ce")) {
+    return new TouchChatProcessor();
+  }
+  if (ext.endsWith(".obf")) {
+    return new ObfProcessor();
+  }
+  if (ext.endsWith(".obz")) {
+    return new ObfProcessor();
+  }
+  if (ext.endsWith(".grd")) {
+    return new AstericsGridProcessor();
+  }
+  if (ext.endsWith(".plist")) {
+    return new ApplePanelsProcessor();
+  }
+  if (ext.endsWith(".opml")) {
+    return new OpmlProcessor();
+  }
+  if (ext.endsWith(".xlsx") || ext.endsWith(".xls")) {
+    return new ExcelProcessor();
+  }
+  if (ext.endsWith(".dot")) {
+    return new DotProcessor();
+  }
+  return getProcessor(filepath);
+}
+async function loadAACFile(filepath, options) {
+  const processor = await getProcessorForFile(filepath, options);
+  return processor.loadIntoTree(filepath);
+}
+async function loadAACFileWithMetadata(filepath, options) {
+  const tree = await loadAACFile(filepath, options);
+  const ext = filepath.toLowerCase();
+  let format = "unknown";
+  if (ext.endsWith(".gridset")) format = "gridset";
+  else if (ext.endsWith(".sps") || ext.endsWith(".spb")) format = "snap";
+  else if (ext.endsWith(".ce")) format = "touchchat";
+  else if (ext.endsWith(".obf")) format = "openboard";
+  else if (ext.endsWith(".obz")) format = "openboard";
+  else if (ext.endsWith(".grd")) format = "asterics-grid";
+  else if (ext.endsWith(".plist")) format = "apple-panels";
+  else if (ext.endsWith(".opml")) format = "opml";
+  else if (ext.endsWith(".xlsx") || ext.endsWith(".xls")) format = "excel";
+  else if (ext.endsWith(".dot")) format = "dot";
+  return {
+    tree,
+    format,
+    metadata: tree.metadata
+  };
+}
+async function loadAACFileFromURL(url, options) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to load file: ${response.statusText}`);
+  }
+  const blob = await response.blob();
+  const filename = getFilenameFromURL(url);
+  return loadAACFileFromFile(blob, filename, options);
+}
+async function loadAACFileFromFile(_file, _filename, _options) {
+  throw new Error("Client-side file loading not yet fully implemented. Please use server-side loading or loadAACFileFromURL with proper CORS headers.");
+}
+function getFilenameFromURL(url) {
+  try {
+    const urlObj = new URL(url);
+    const pathname = urlObj.pathname;
+    const parts = pathname.split("/");
+    return parts[parts.length - 1] || "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+async function calculateMetrics(tree, options = {}) {
+  const { MetricsCalculator } = await import("@willwade/aac-processors");
+  const calculator = new MetricsCalculator();
+  let metricsOptions = {};
+  if (options.accessMethod === "scanning" && options.scanningConfig) {
+    const { CellScanningOrder, ScanningSelectionMethod } = await import("@willwade/aac-processors");
+    let cellScanningOrder = CellScanningOrder.SimpleScan;
+    let blockScanEnabled = false;
+    switch (options.scanningConfig.pattern) {
+      case "linear":
+        cellScanningOrder = CellScanningOrder.SimpleScan;
+        break;
+      case "row-column":
+        cellScanningOrder = CellScanningOrder.RowColumnScan;
+        break;
+      case "block":
+        cellScanningOrder = CellScanningOrder.RowColumnScan;
+        blockScanEnabled = true;
+        break;
+    }
+    metricsOptions = {
+      scanningConfig: {
+        cellScanningOrder,
+        blockScanEnabled,
+        selectionMethod: ScanningSelectionMethod.AutoScan,
+        errorCorrectionEnabled: options.scanningConfig.errorCorrection || false,
+        errorRate: 0.1
+      }
+    };
+  }
+  const metricsResult = calculator.analyze(tree, metricsOptions);
+  return metricsResult.buttons.map((btn) => ({
+    id: btn.id,
+    label: btn.label,
+    effort: btn.effort,
+    count: btn.count ?? 0,
+    is_word: true,
+    level: btn.level,
+    semantic_id: btn.semantic_id,
+    clone_id: btn.clone_id
+  }));
+}
+function getSupportedFormats() {
+  return [
+    {
+      name: "Grid 3",
+      extensions: [".gridset"],
+      description: "Smartbox Grid 3 communication boards"
+    },
+    {
+      name: "TD Snap",
+      extensions: [".sps", ".spb"],
+      description: "Tobii Dynavox Snap files"
+    },
+    {
+      name: "TouchChat",
+      extensions: [".ce"],
+      description: "Saltillo TouchChat files"
+    },
+    {
+      name: "OpenBoard",
+      extensions: [".obf", ".obz"],
+      description: "OpenBoard Format (OBZ/OBF)"
+    },
+    {
+      name: "Asterics Grid",
+      extensions: [".grd"],
+      description: "Asterics Grid files (.grd)"
+    },
+    {
+      name: "Apple Panels",
+      extensions: [".plist"],
+      description: "Apple iOS Panels files"
+    },
+    {
+      name: "OPML",
+      extensions: [".opml"],
+      description: "OPML outline files"
+    },
+    {
+      name: "Excel",
+      extensions: [".xlsx", ".xls"],
+      description: "Excel spreadsheet boards"
+    },
+    {
+      name: "DOT",
+      extensions: [".dot"],
+      description: "DOT graph visualization files"
+    }
+  ];
+}
+
+// src/hooks/useAACFile.ts
+function useAACFile(url, options) {
+  const [tree, setTree] = useState2(null);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  const load = useCallback2(async () => {
+    if (options?.enabled === false) {
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const loadedTree = await loadAACFileFromURL(url, options?.processorOptions);
+      setTree(loadedTree);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to load file"));
+    } finally {
+      setLoading(false);
+    }
+  }, [url, options]);
+  useEffect(() => {
+    load();
+  }, [load]);
+  return {
+    tree,
+    loading,
+    error,
+    reload: load
+  };
+}
+function useAACFileWithMetrics(url, metricsOptions, fileOptions) {
+  const [tree, setTree] = useState2(null);
+  const [metrics, setMetrics] = useState2(null);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  const load = useCallback2(async () => {
+    if (fileOptions?.enabled === false) {
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const loadedTree = await loadAACFileFromURL(url, fileOptions?.processorOptions);
+      setTree(loadedTree);
+      const calculatedMetrics = await calculateMetrics(loadedTree, metricsOptions || {});
+      setMetrics(calculatedMetrics);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to load file"));
+    } finally {
+      setLoading(false);
+    }
+  }, [url, metricsOptions, fileOptions]);
+  useEffect(() => {
+    load();
+  }, [load]);
+  return {
+    tree,
+    metrics,
+    loading,
+    error,
+    reload: load
+  };
+}
+function useMetrics(tree, options) {
+  const [metrics, setMetrics] = useState2(null);
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const calculate = useCallback2(async () => {
+    if (!tree) {
+      setMetrics(null);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const calculatedMetrics = await calculateMetrics(tree, options || {});
+      setMetrics(calculatedMetrics);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to calculate metrics"));
+    } finally {
+      setLoading(false);
+    }
+  }, [tree, options]);
+  useEffect(() => {
+    calculate();
+  }, [calculate]);
+  return {
+    metrics,
+    loading,
+    error,
+    recalculate: calculate
+  };
+}
+function useSentenceBuilder() {
+  const [message, setMessage] = useState2("");
+  const [wordCount, setWordCount] = useState2(0);
+  const [effort, setEffort] = useState2(0);
+  const addWord = useCallback2((word, wordEffort = 1) => {
+    setMessage((prev) => {
+      const newMessage = prev + (prev ? " " : "") + word;
+      setWordCount((prev2) => prev2 + 1);
+      setEffort((prev2) => prev2 + wordEffort);
+      return newMessage;
+    });
+  }, []);
+  const clear = useCallback2(() => {
+    setMessage("");
+    setWordCount(0);
+    setEffort(0);
+  }, []);
+  return {
+    message,
+    wordCount,
+    effort,
+    addWord,
+    clear
+  };
+}
+export {
+  BoardViewer,
+  calculateMetrics,
+  getSupportedFormats,
+  loadAACFile,
+  loadAACFileFromFile,
+  loadAACFileFromURL,
+  loadAACFileWithMetadata,
+  useAACFile,
+  useAACFileWithMetrics,
+  useMetrics,
+  useSentenceBuilder
+};
+//# sourceMappingURL=index.mjs.map