@fasl-work/caos-app-shell 0.1.2 → 0.3.0

package/dist/index.js

@@ -1,8 +1,8 @@
-import { createContext, useState, useRef, useEffect, useId, useContext } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, useId, useContext } from 'react';
 import { NavLink } from 'react-router-dom';
 import { Sun, Moon, Languages, Boxes, Github, Globe, Briefcase, Info } from 'lucide-react';
 import { create } from 'zustand';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import katex from 'katex';
 
 // src/shell/AppShell.tsx
@@ -45,7 +45,7 @@ var CHROME = {
     toggleLanguage: "Switch language",
     light: "Light",
     dark: "Dark",
-    attribution: "Built by Felipe Santib\xE1\xF1ez-Leal",
+    attribution: "Developed by Felipe Santib\xE1\xF1ez-Leal",
     complement: "A CAOS research project",
     license: "MIT licensed \xB7 open source",
     version: "v"
@@ -58,7 +58,7 @@ var CHROME = {
     toggleLanguage: "Cambiar idioma",
     light: "Claro",
     dark: "Oscuro",
-    attribution: "Hecho por Felipe Santib\xE1\xF1ez-Leal",
+    attribution: "Desarrollado por Felipe Santib\xE1\xF1ez-Leal",
     complement: "Un proyecto de investigaci\xF3n CAOS",
     license: "Licencia MIT \xB7 c\xF3digo abierto",
     version: "v"
@@ -282,28 +282,319 @@ function AppShell({ config, children }) {
     ] }) }),
     config.architecture && archOpen && /* @__PURE__ */ jsx(ArchitectureModal, { config: config.architecture, onClose: () => setArchOpen(false) }),
     /* @__PURE__ */ jsx("main", { className: "page", children }),
-    /* @__PURE__ */ jsx("footer", { className: "site-footer", children: /* @__PURE__ */ jsxs("div", { className: "footer-inner", children: [
-      /* @__PURE__ */ jsxs("div", { className: "footer-meta", children: [
-        /* @__PURE__ */ jsx("span", { children: c.attribution }),
+    /* @__PURE__ */ jsx("footer", { className: "site-footer", children: /* @__PURE__ */ jsx("div", { className: "footer-inner", children: /* @__PURE__ */ jsxs("div", { className: "footer-meta", children: [
+      /* @__PURE__ */ jsx("span", { children: config.product.name }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { children: c.complement }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { className: "footer-build", children: /* @__PURE__ */ jsxs("span", { children: [
+        c.version,
+        config.version
+      ] }) }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { children: c.attribution }),
+      config.footer?.provenance && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
-        /* @__PURE__ */ jsx("span", { children: c.complement })
+        /* @__PURE__ */ jsx("span", { children: config.footer.provenance[lang] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "footer-meta", children: [
-        /* @__PURE__ */ jsx("a", { href: config.links.github, target: "_blank", rel: "noreferrer noopener", children: c.github }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+      /* @__PURE__ */ jsx("a", { href: config.links.github, target: "_blank", rel: "noreferrer noopener", children: c.github }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { className: "faint", children: c.license }),
+      config.footer?.disclaimer && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
-        /* @__PURE__ */ jsx("a", { href: personal, target: "_blank", rel: "noreferrer noopener", children: c.personal }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
-        /* @__PURE__ */ jsx("a", { href: portfolio, target: "_blank", rel: "noreferrer noopener", children: c.portfolio }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
-        /* @__PURE__ */ jsx("span", { className: "faint", children: c.license }),
-        /* @__PURE__ */ jsx("span", { className: "footer-build", children: /* @__PURE__ */ jsxs("span", { children: [
-          c.version,
-          config.version
-        ] }) })
+        /* @__PURE__ */ jsx("span", { className: "faint", children: config.footer.disclaimer[lang] })
       ] })
-    ] }) })
+    ] }) }) })
+  ] });
+}
+
+// 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 ?? "";
@@ -497,4 +788,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, applyTheme, caseKind, caseTooltip, casesInSource, createVizLoop, groupByCategory, readCaseParam, readTheme, sourcesPresent, useLangStore, usePausedViz, useShellLang, useThemeStore, withCaseParam };

package/package.json

@@ -1,54 +1,56 @@
-{
-  "name": "@fasl-work/caos-app-shell",
-  "version": "0.1.2",
-  "description": "Shared web-app shell + content primitives + design system for the CAOS / Faena public apps (ADR-0016).",
-  "license": "MIT",
-  "author": "Felipe Santibáñez-Leal",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/fsantibanezleal/CAOS_APP_SHELL.git"
-  },
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "sideEffects": [
-    "*.css"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./styles.css": "./styles.css"
-  },
-  "files": [
-    "dist",
-    "styles.css"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "katex": "^0.16.0",
-    "lucide-react": ">=0.400.0",
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19",
-    "react-router-dom": "^6 || ^7",
-    "zustand": "^4 || ^5"
-  },
-  "devDependencies": {
-    "@types/katex": "^0.16.7",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "katex": "^0.16.11",
-    "lucide-react": "^0.469.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.1",
-    "tsup": "^8.3.5",
-    "typescript": "^5.7.3",
-    "zustand": "^5.0.2"
-  }
-}
+{
+  "name": "@fasl-work/caos-app-shell",
+  "version": "0.3.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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fsantibanezleal/CAOS_APP_SHELL.git"
+  },
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "node --import tsx --test test/vizLoop.test.ts test/caseModel.test.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "katex": "^0.16.0",
+    "lucide-react": ">=0.400.0",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "react-router-dom": "^6 || ^7",
+    "zustand": "^4 || ^5"
+  },
+  "devDependencies": {
+    "@types/katex": "^0.16.7",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "katex": "^0.16.11",
+    "lucide-react": "^0.469.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.1",
+    "tsup": "^8.3.5",
+    "tsx": "^4.23.0",
+    "typescript": "^5.7.3",
+    "zustand": "^5.0.2"
+  }
+}