@fasl-work/caos-app-shell 0.2.0 → 0.5.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { createContext, useState, useRef, useEffect, useId, useContext } from 'react';
-import { NavLink } from 'react-router-dom';
+import { createContext, useState, useRef, useEffect, useCallback, useId, useContext } from 'react';
+import { NavLink } from 'react-router';
 import { Sun, Moon, Languages, Boxes, Github, Globe, Briefcase, Info } from 'lucide-react';
 import { create } from 'zustand';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -308,6 +308,342 @@ function AppShell({ config, children }) {
     ] }) }) })
   ] });
 }
+function WorkbenchShell({
+  brand,
+  routes,
+  navigationLabel,
+  children,
+  sidebarFooter,
+  headerLead,
+  headerActions,
+  overlays,
+  mainId = "main-content",
+  className
+}) {
+  const rootClassName = ["caos-workbench-shell", "app-shell", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        className: "caos-workbench-sidebar sidebar",
+        style: { "--caos-workbench-route-count": routes.length },
+        children: [
+          brand,
+          /* @__PURE__ */ jsx("nav", { "aria-label": navigationLabel, children: routes.map((route) => /* @__PURE__ */ jsxs(
+            NavLink,
+            {
+              to: route.path,
+              end: route.end ?? route.path === "/",
+              "aria-label": route.ariaLabel,
+              className: ({ isActive }) => isActive ? "active" : void 0,
+              children: [
+                route.icon,
+                /* @__PURE__ */ jsx("span", { children: route.label })
+              ]
+            },
+            route.path
+          )) }),
+          sidebarFooter
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "caos-workbench-main shell-main", children: [
+      /* @__PURE__ */ jsxs("header", { className: "caos-workbench-header topbar", children: [
+        headerLead,
+        headerActions
+      ] }),
+      /* @__PURE__ */ jsx("main", { id: mainId, className: "caos-workbench-content content", children })
+    ] }),
+    overlays
+  ] });
+}
+
+// src/lib/vizLoop.ts
+function createVizLoop(frame, options, deps) {
+  const { loop = false, durationMs, onComplete, onPlayingChange } = options;
+  const { raf, caf } = deps;
+  let handle = null;
+  let want = false;
+  let hidden = false;
+  let last = 0;
+  let baseline = true;
+  let elapsed = 0;
+  const playing = () => handle !== null;
+  const emitPlaying = (was) => {
+    if (was !== playing()) onPlayingChange?.(playing());
+  };
+  const request = () => {
+    if (handle === null) handle = raf(tick);
+  };
+  const cancel = () => {
+    if (handle !== null) {
+      caf(handle);
+      handle = null;
+    }
+  };
+  function tick(t) {
+    handle = null;
+    if (baseline) {
+      last = t;
+      baseline = false;
+    }
+    const dt = t - last;
+    last = t;
+    elapsed += dt;
+    let e = elapsed;
+    const capped = durationMs != null && e >= durationMs;
+    if (capped) e = durationMs;
+    const cont = frame(dt, e);
+    if (capped || cont === false) {
+      if (loop) {
+        elapsed = 0;
+        baseline = true;
+        request();
+      } else {
+        const was = true;
+        want = false;
+        emitPlaying(was);
+        onComplete?.();
+      }
+      return;
+    }
+    request();
+  }
+  const play = () => {
+    if (want && playing()) return;
+    const was = playing();
+    want = true;
+    baseline = true;
+    if (!hidden) request();
+    emitPlaying(was);
+  };
+  const pause = () => {
+    const was = playing();
+    want = false;
+    cancel();
+    emitPlaying(was);
+  };
+  const restart = () => {
+    const was = playing();
+    want = true;
+    elapsed = 0;
+    baseline = true;
+    cancel();
+    if (!hidden) request();
+    emitPlaying(was);
+  };
+  const setHidden = (h) => {
+    if (h === hidden) return;
+    hidden = h;
+    const was = playing();
+    if (hidden) {
+      cancel();
+    } else if (want) {
+      baseline = true;
+      request();
+    }
+    emitPlaying(was);
+  };
+  return {
+    isPlaying: playing,
+    isRunning: () => want,
+    play,
+    pause,
+    toggle: () => want ? pause() : play(),
+    restart,
+    setHidden,
+    dispose: () => {
+      want = false;
+      cancel();
+    }
+  };
+}
+
+// src/lib/usePausedViz.ts
+function usePausedViz(frame, options = {}) {
+  const { autoStart = false, loop, durationMs, onComplete } = options;
+  const [playing, setPlaying] = useState(false);
+  const frameRef = useRef(frame);
+  frameRef.current = frame;
+  const completeRef = useRef(onComplete);
+  completeRef.current = onComplete;
+  const loopRef = useRef(null);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof requestAnimationFrame === "undefined") return;
+    const vloop = createVizLoop(
+      (dt, elapsed) => frameRef.current(dt, elapsed),
+      {
+        loop,
+        durationMs,
+        onComplete: () => completeRef.current?.(),
+        onPlayingChange: setPlaying
+      },
+      { raf: requestAnimationFrame, caf: cancelAnimationFrame }
+    );
+    loopRef.current = vloop;
+    const onVisibility = () => vloop.setHidden(document.hidden);
+    document.addEventListener("visibilitychange", onVisibility);
+    if (autoStart && !document.hidden) vloop.play();
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibility);
+      vloop.dispose();
+      loopRef.current = null;
+    };
+  }, []);
+  const play = useCallback(() => loopRef.current?.play(), []);
+  const pause = useCallback(() => loopRef.current?.pause(), []);
+  const toggle = useCallback(() => loopRef.current?.toggle(), []);
+  const restart = useCallback(() => loopRef.current?.restart(), []);
+  return { playing, play, pause, toggle, restart };
+}
+
+// src/case/caseModel.ts
+var caseKind = (c) => c.kind ?? "synthetic";
+var KIND_ORDER = ["synthetic", "real", "uploaded"];
+function sourcesPresent(cases) {
+  const set = new Set(cases.map(caseKind));
+  return KIND_ORDER.filter((k) => set.has(k));
+}
+function groupByCategory(cases) {
+  const order = [];
+  const map = /* @__PURE__ */ new Map();
+  for (const c of cases) {
+    const cat = c.category ?? "";
+    if (!map.has(cat)) {
+      map.set(cat, []);
+      order.push(cat);
+    }
+    map.get(cat).push(c);
+  }
+  return order.map((category) => ({ category, cases: map.get(category) }));
+}
+function casesInSource(cases, source) {
+  if (!source) return cases;
+  return cases.filter((c) => caseKind(c) === source);
+}
+function caseTooltip(c) {
+  return [c.anchor, c.expectedBand].filter(Boolean).join(" \xB7 ");
+}
+function readCaseParam(search, param = "case") {
+  return new URLSearchParams(search).get(param);
+}
+function withCaseParam(search, id, param = "case") {
+  const p = new URLSearchParams(search);
+  p.set(param, id);
+  const s = p.toString();
+  return s ? `?${s}` : "";
+}
+var TEXT = {
+  en: {
+    source: "Source",
+    synthetic: "Synthetic",
+    real: "Real",
+    uploaded: "Uploaded",
+    lockedNote: "Scenario knobs are locked on a real sample \u2014 you pick which datum; every tool runs on it as-is.",
+    modifiedPrefix: "modified from",
+    reset: "reset"
+  },
+  es: {
+    source: "Fuente",
+    synthetic: "Sint\xE9tico",
+    real: "Real",
+    uploaded: "Subido",
+    lockedNote: "Los controles del escenario quedan bloqueados en una muestra real: eliges el dato; todas las herramientas corren sobre \xE9l tal cual.",
+    modifiedPrefix: "modificado desde",
+    reset: "restablecer"
+  }
+};
+var KIND_TAG = { synthetic: "S", real: "R", uploaded: "U" };
+function CaseSelector(props) {
+  const {
+    cases,
+    selectedId,
+    onSelect,
+    source,
+    onSourceChange,
+    lockedNote,
+    modifiedFromId,
+    onResetToCanonical,
+    lang = "en",
+    text,
+    deepLink,
+    ariaLabel,
+    className
+  } = props;
+  const t = { ...TEXT[lang], ...text };
+  const baseId = useId();
+  const param = typeof deepLink === "string" ? deepLink : "case";
+  useEffect(() => {
+    if (!deepLink || typeof window === "undefined") return;
+    const fromUrl = readCaseParam(window.location.search, param);
+    if (fromUrl && fromUrl !== selectedId && cases.some((c) => c.id === fromUrl)) onSelect(fromUrl);
+  }, []);
+  useEffect(() => {
+    if (!deepLink || typeof window === "undefined") return;
+    const next = withCaseParam(window.location.search, selectedId, param);
+    if (next !== window.location.search) {
+      window.history.replaceState(null, "", `${window.location.pathname}${next}${window.location.hash}`);
+    }
+  }, [deepLink, param, selectedId]);
+  const lanes = source ? sourcesPresent(cases) : [];
+  const visible = casesInSource(cases, source);
+  const groups = groupByCategory(visible);
+  const modified = cases.find((c) => c.id === modifiedFromId) ?? null;
+  return /* @__PURE__ */ jsxs("div", { className: `cs${className ? ` ${className}` : ""}`, role: "group", "aria-label": ariaLabel ?? "Case selector", children: [
+    source && lanes.length > 1 && /* @__PURE__ */ jsxs("div", { className: "cs-source", children: [
+      /* @__PURE__ */ jsx("span", { className: "cs-source-label", children: t.source }),
+      /* @__PURE__ */ jsx("div", { className: "cs-source-tabs", role: "tablist", "aria-label": t.source, children: lanes.map((k) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": source === k,
+          className: source === k ? "subtab active" : "subtab",
+          onClick: () => onSourceChange?.(k),
+          children: k === "synthetic" ? t.synthetic : k === "real" ? t.real : t.uploaded
+        },
+        k
+      )) })
+    ] }),
+    source && source !== "synthetic" && /* @__PURE__ */ jsx("p", { className: "cs-locked banner", children: lockedNote ?? t.lockedNote }),
+    groups.map((g) => /* @__PURE__ */ jsxs("div", { className: "cs-group", role: "group", "aria-label": g.category || void 0, children: [
+      g.category && /* @__PURE__ */ jsx("span", { className: "cs-group-label", children: g.category }),
+      /* @__PURE__ */ jsx("div", { className: "cs-chips", children: g.cases.map((c) => {
+        const on = c.id === selectedId;
+        const tip = caseTooltip(c);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id: `${baseId}-case-${c.id}`,
+            className: `cs-chip${on ? " on" : ""}`,
+            "aria-pressed": on,
+            disabled: c.disabled,
+            title: tip || void 0,
+            onClick: () => onSelect(c.id),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "cs-chip-id", children: c.id }),
+              /* @__PURE__ */ jsx("span", { className: "cs-chip-name", children: c.name }),
+              /* @__PURE__ */ jsx("span", { className: `cs-kind cs-kind-${caseKindOf(c)}`, "aria-hidden": "true", children: KIND_TAG[caseKindOf(c)] })
+            ]
+          },
+          c.id
+        );
+      }) })
+    ] }, g.category || "_")),
+    modified && /* @__PURE__ */ jsxs("div", { className: "cs-modified", children: [
+      /* @__PURE__ */ jsxs("span", { className: "badge accent", children: [
+        t.modifiedPrefix,
+        " ",
+        /* @__PURE__ */ jsx("strong", { children: modified.id })
+      ] }),
+      onResetToCanonical && /* @__PURE__ */ jsx("button", { type: "button", className: "cs-reset", onClick: onResetToCanonical, children: t.reset })
+    ] })
+  ] });
+}
+function caseKindOf(c) {
+  return c.kind ?? "synthetic";
+}
 function Tabs({ tabs, initial, ariaLabel }) {
   const baseId = useId();
   const first = tabs[0]?.id ?? "";
@@ -501,4 +837,4 @@ function ReferenceList({ ids, heading }) {
   ] });
 }
 
-export { AppShell, ArchitectureModal, Callout, CitationsProvider, Cite, Equation, Figure, InlineMath, LanguageToggle, ReferenceList, Refs, SubTabs, Tabs, ThemeToggle, applyTheme, readTheme, useLangStore, useShellLang, useThemeStore };
+export { AppShell, ArchitectureModal, Callout, CaseSelector, CitationsProvider, Cite, Equation, Figure, InlineMath, LanguageToggle, ReferenceList, Refs, SubTabs, Tabs, ThemeToggle, WorkbenchShell, applyTheme, caseKind, caseTooltip, casesInSource, createVizLoop, groupByCategory, readCaseParam, readTheme, sourcesPresent, useLangStore, usePausedViz, useShellLang, useThemeStore, withCaseParam };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "Shared web-app shell + content primitives + design system for the CAOS / Faena public apps (ADR-0016).",
   "license": "MIT",
   "author": "Felipe Santibáñez-Leal",
@@ -28,6 +28,7 @@
   ],
   "scripts": {
     "build": "tsup",
+    "test": "node --import tsx --test test/vizLoop.test.ts test/caseModel.test.ts test/workbenchShell.test.tsx",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
@@ -35,10 +36,10 @@
     "lucide-react": ">=0.400.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "react-router-dom": "^6 || ^7",
+    "react-router": "^6 || ^7 || ^8",
     "zustand": "^4 || ^5"
   },
-  "devDependencies": {
+  "devDependencies": {
     "@types/katex": "^0.16.7",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
@@ -46,9 +47,13 @@
     "lucide-react": "^0.469.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.1",
+    "react-router": "^8.3.0",
     "tsup": "^8.3.5",
+    "tsx": "^4.23.0",
     "typescript": "^5.7.3",
-    "zustand": "^5.0.2"
-  }
-}
+    "zustand": "^5.0.2"
+  },
+  "overrides": {
+    "esbuild": "0.28.1"
+  }
+}