aac-board-viewer 0.1.1 → 0.1.3

package/README.md

@@ -40,24 +40,10 @@ yarn add aac-board-viewer
 
 ## Quick Start
 
-### Client-Side Usage
-
-```tsx
-import { BoardViewer, useAACFile } from 'aac-board-viewer';
-import 'aac-board-viewer/styles';
-
-function MyViewer() {
-  const { tree, loading, error } = useAACFile('/path/to/file.sps');
-
-  if (loading) return <div>Loading...</div>;
-  if (error) return <div>Error: {error.message}</div>;
-
-  return <BoardViewer tree={tree} />;
-}
-```
-
 ### Server-Side / API Usage
 
+> Important: `@willwade/aac-processors` is a Node-only dependency (uses native modules like `better-sqlite3`). File parsing must happen server-side. For client apps, call an API that returns the parsed tree and pass that to `BoardViewer`.
+
 ```tsx
 import { BoardViewer } from 'aac-board-viewer';
 import 'aac-board-viewer/styles';
@@ -179,18 +165,6 @@ interface AACTree {
 
 The library provides utilities for loading AAC files:
 
-### Client-Side Loading
-
-```tsx
-import { useAACFile } from 'aac-board-viewer';
-
-function Viewer({ fileUrl }) {
-  const { tree, loading, error } = useAACFile(fileUrl);
-
-  // ...
-}
-```
-
 ### Programmatic Loading
 
 ```tsx

package/dist/index.js

@@ -47,6 +47,53 @@ module.exports = __toCommonJS(index_exports);
 // src/components/BoardViewer.tsx
 var import_react = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+function PredictionsTooltip({ predictions, label, position, onClose }) {
+  import_react.default.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (e.target instanceof HTMLElement && !e.target.closest(".predictions-tooltip")) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "predictions-tooltip fixed z-50 bg-white dark:bg-gray-800 rounded-lg shadow-xl border-2 border-purple-500 p-3 max-w-xs",
+      style: {
+        left: `${Math.min(position.x, window.innerWidth - 200)}px`,
+        top: `${Math.min(position.y, window.innerHeight - 150)}px`
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h4", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: [
+            'Word forms for "',
+            label,
+            '"'
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              onClick: onClose,
+              className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "h-4 w-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-1", children: predictions.map((word, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: "px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded text-xs font-medium",
+            children: word
+          },
+          idx
+        )) })
+      ]
+    }
+  );
+}
 function BoardViewer({
   tree,
   buttonMetrics,
@@ -72,6 +119,12 @@ function BoardViewer({
         return tree.rootId;
       }
     }
+    const startPage = Object.values(tree.pages).find(
+      (p) => p.name.toLowerCase() === "start"
+    );
+    if (startPage) {
+      return startPage.id;
+    }
     const nonToolbarPage = Object.values(tree.pages).find(
       (p) => !p.name.toLowerCase().includes("toolbar") && !p.name.toLowerCase().includes("tool bar")
     );
@@ -86,6 +139,7 @@ function BoardViewer({
   const [message, setMessage] = (0, import_react.useState)("");
   const [currentWordCount, setCurrentWordCount] = (0, import_react.useState)(0);
   const [currentEffort, setCurrentEffort] = (0, import_react.useState)(0);
+  const [predictionsTooltip, setPredictionsTooltip] = (0, import_react.useState)(null);
   const buttonMetricsLookup = (0, import_react.useMemo)(() => {
     if (!buttonMetrics) return {};
     const lookup = {};
@@ -95,6 +149,17 @@ function BoardViewer({
     return lookup;
   }, [buttonMetrics]);
   const currentPage = currentPageId ? tree.pages[currentPageId] : null;
+  const goToPage = (targetPageId) => {
+    if (!targetPageId || !tree.pages[targetPageId]) return false;
+    if (currentPage) {
+      setPageHistory((prev) => [...prev, currentPage]);
+    }
+    setCurrentPageId(targetPageId);
+    if (onPageChange) {
+      onPageChange(targetPageId);
+    }
+    return true;
+  };
   import_react.default.useEffect(() => {
     setCurrentPageId(resolveInitialPageId());
     setPageHistory([]);
@@ -107,24 +172,62 @@ function BoardViewer({
     if (onButtonClick) {
       onButtonClick(button);
     }
+    const intent = button.semanticAction?.intent ? String(button.semanticAction.intent) : void 0;
     const targetPageId = button.targetPageId || button.semanticAction?.targetId;
-    if (targetPageId && tree.pages[targetPageId]) {
-      if (currentPage) {
-        setPageHistory((prev) => [...prev, currentPage]);
-      }
-      setCurrentPageId(targetPageId);
-      if (onPageChange) {
-        onPageChange(targetPageId);
-      }
+    const effort = buttonMetricsLookup[button.id]?.effort || 1;
+    const textValue = button.semanticAction?.text || button.message || button.label || "";
+    const deleteLastWord = () => {
+      setMessage((prev) => {
+        const parts = prev.trim().split(/\s+/);
+        parts.pop();
+        const newMsg = parts.join(" ");
+        return newMsg;
+      });
+    };
+    const deleteLastCharacter = () => {
+      setMessage((prev) => prev.slice(0, -1));
+    };
+    const appendText = (word) => {
+      const trimmed = word || button.label || "";
+      setMessage((prev) => {
+        const newMessage = trimmed ? prev + (prev ? " " : "") + trimmed : prev;
+        if (trimmed) {
+          updateStats(trimmed, effort);
+        }
+        return newMessage;
+      });
+    };
+    if (intent === "NAVIGATE_TO" && goToPage(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;
-    });
+    switch (intent) {
+      case "GO_BACK":
+        handleBack();
+        return;
+      case "GO_HOME":
+        if (tree.rootId && goToPage(tree.rootId)) return;
+        break;
+      case "DELETE_WORD":
+        deleteLastWord();
+        return;
+      case "DELETE_CHARACTER":
+        deleteLastCharacter();
+        return;
+      case "CLEAR_TEXT":
+        clearMessage();
+        return;
+      case "SPEAK_IMMEDIATE":
+      case "SPEAK_TEXT":
+      case "INSERT_TEXT":
+        appendText(textValue);
+        return;
+      default:
+        break;
+    }
+    if (targetPageId && goToPage(targetPageId)) {
+      return;
+    }
+    appendText(textValue);
   };
   const handleBack = () => {
     if (pageHistory.length > 0) {
@@ -141,6 +244,17 @@ function BoardViewer({
     setCurrentWordCount(0);
     setCurrentEffort(0);
   };
+  const handleShowPredictions = (button, event) => {
+    event.stopPropagation();
+    const predictions = button.predictions || button.parameters?.predictions;
+    if (predictions && predictions.length > 0) {
+      setPredictionsTooltip({
+        predictions,
+        label: button.label,
+        position: { x: event.clientX, y: event.clientY }
+      });
+    }
+  };
   const getTextColor = (backgroundColor) => {
     if (!backgroundColor) return "text-gray-900 dark:text-gray-100";
     const hex = backgroundColor.replace("#", "");
@@ -292,52 +406,109 @@ ${button.message || ""}`,
               display: "grid",
               gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))`
             },
-            children: currentPage.grid.map(
-              (row, rowIndex) => row.map((button, colIndex) => {
-                if (!button) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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: (() => {
+              const rendered = /* @__PURE__ */ new Set();
+              return currentPage.grid.flatMap(
+                (row, rowIndex) => row.map((button, colIndex) => {
+                  if (!button) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square" }, `empty-${rowIndex}-${colIndex}`);
+                  }
+                  if (rendered.has(button.id)) {
+                    return null;
+                  }
+                  rendered.add(button.id);
+                  const buttonMetric = buttonMetricsLookup[button.id];
+                  const effort = buttonMetric?.effort || 0;
+                  const targetPageId = button.targetPageId || button.semanticAction?.targetId;
+                  const hasLink = targetPageId && tree.pages[targetPageId];
+                  const colSpan = button.columnSpan || 1;
+                  const rowSpan = button.rowSpan || 1;
+                  const predictions = button.predictions || button.parameters?.predictions;
+                  const hasPredictions = predictions && predictions.length > 0;
+                  const isPredictionCell = button.contentType === "AutoContent" && (button.contentSubType || "").toLowerCase() === "prediction";
+                  const isWorkspace = button.contentType === "Workspace";
+                  const imageSrc = (button.resolvedImageEntry && !String(button.resolvedImageEntry).startsWith("[") ? button.resolvedImageEntry : null) || (button.image && !String(button.image).startsWith("[") ? button.image : null);
+                  if (isWorkspace) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        className: "relative p-3 rounded-lg border-2 bg-gray-50 text-gray-800 flex items-center gap-2",
+                        style: {
+                          borderColor: button.style?.borderColor || "#e5e7eb",
+                          gridColumn: `${colIndex + 1} / span ${colSpan}`,
+                          gridRow: `${rowIndex + 1} / span ${rowSpan}`
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-semibold text-sm", children: button.label || "Workspace" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-gray-500 truncate", children: message || "Chat writing area" })
+                        ]
+                      },
+                      button.id
+                    );
+                  }
+                  return /* @__PURE__ */ (0, import_jsx_runtime.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,
+                        gridColumn: `${colIndex + 1} / span ${colSpan}`,
+                        gridRow: `${rowIndex + 1} / span ${rowSpan}`
+                      },
+                      children: [
+                        buttonMetric && showEffortBadges && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-1 left-1 w-2 h-2 bg-green-500 rounded-full shadow-sm" }),
+                        hasPredictions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "div",
+                          {
+                            onClick: (e) => handleShowPredictions(button, e),
+                            className: "absolute bottom-1 right-1 px-1.5 py-0.5 text-xs font-semibold rounded bg-purple-600 text-white shadow-sm cursor-pointer hover:bg-purple-700 transition",
+                            title: `Has ${predictions?.length} word form${predictions && predictions.length > 1 ? "s" : ""}`,
+                            children: predictions?.length
+                          }
+                        ),
+                        imageSrc && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "img",
+                          {
+                            src: imageSrc,
+                            alt: button.label,
+                            className: "max-h-12 object-contain"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "span",
+                            {
+                              className: `text-xs sm:text-sm text-center font-medium leading-tight line-clamp-3 ${getTextColor(
+                                button.style?.backgroundColor
+                              )}`,
+                              children: button.label
+                            }
+                          ),
+                          isPredictionCell && predictions && predictions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-1 text-[10px] sm:text-xs text-center opacity-80 space-y-0.5", children: [
+                            predictions.slice(0, 3).map((p, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: p }, `${button.id}-pred-${idx}`)),
+                            predictions.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "\u2026" })
+                          ] })
+                        ] }),
+                        button.message && button.message !== button.label && !isPredictionCell && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "span",
+                          {
+                            className: `text-[10px] sm:text-xs text-center opacity-75 line-clamp-2 ${getTextColor(
+                              button.style?.backgroundColor
+                            )}`,
+                            children: button.message
+                          }
+                        )
+                      ]
                     },
-                    children: [
-                      buttonMetric && showEffortBadges && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-1 left-1 w-2 h-2 bg-green-500 rounded-full shadow-sm" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
-                        "span",
-                        {
-                          className: `text-[10px] sm:text-xs text-center opacity-75 line-clamp-2 ${getTextColor(
-                            button.style?.backgroundColor
-                          )}`,
-                          children: button.message
-                        }
-                      )
-                    ]
-                  },
-                  button.id
-                );
-              })
-            )
+                    button.id
+                  );
+                })
+              );
+            })()
           }
         ),
         Object.keys(tree.pages).length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-4 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-2", children: [
@@ -345,7 +516,16 @@ ${button.message || ""}`,
           " pages in this vocabulary"
         ] }) })
       ] })
-    ] })
+    ] }),
+    predictionsTooltip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      PredictionsTooltip,
+      {
+        predictions: predictionsTooltip.predictions,
+        label: predictionsTooltip.label,
+        position: predictionsTooltip.position,
+        onClose: () => setPredictionsTooltip(null)
+      }
+    )
   ] });
 }