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

package/dist/index.d.ts

@@ -2,6 +2,28 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as zustand from 'zustand';
 
+interface ArchTab {
+    id: string;
+    /** tab label. */
+    en: string;
+    es: string;
+    /** the explanation body (paragraphs separated by a blank line). */
+    body_en: string;
+    body_es: string;
+    /** an inline '<svg…>…</svg>' string OR a path under the app's public/ (fetched + inlined). */
+    svg: string;
+}
+interface ArchitectureConfig {
+    /** modal title override (defaults to "Architecture / How it works"). */
+    title_en?: string;
+    title_es?: string;
+    tabs: ArchTab[];
+}
+declare function ArchitectureModal({ config, onClose }: {
+    config: ArchitectureConfig;
+    onClose: () => void;
+}): react.JSX.Element | null;
+
 interface ShellRoute {
     path: string;
     en: string;
@@ -23,6 +45,8 @@ interface ShellConfig {
     };
     /** Human version string (X.XX.XXX) shown in the footer. */
     version: string;
+    /** In-app Architecture / "How it works" modal (ADR-0058). When present, an ⓘ button appears in the header. */
+    architecture?: ArchitectureConfig;
 }
 /** The shared CAOS/Faena app shell: sticky header (brand + nav + icon-links + lang/theme) + footer.
  * Wrap your <Routes> (or single landing) in it, inside a Router. */
@@ -136,4 +160,4 @@ declare function ReferenceList({ ids, heading }: {
     heading?: string;
 }): react.JSX.Element;
 
-export { AppShell, Callout, type Citation, CitationsProvider, Cite, Equation, Figure, InlineMath, type Lang, LanguageToggle, ReferenceList, Refs, type ShellConfig, type ShellRoute, type SubTabDef, SubTabs, type TabDef, Tabs, type Theme, ThemeToggle, applyTheme, readTheme, useLangStore, useShellLang, useThemeStore };
+export { AppShell, type ArchTab, type ArchitectureConfig, ArchitectureModal, Callout, type Citation, CitationsProvider, Cite, Equation, Figure, InlineMath, type Lang, LanguageToggle, ReferenceList, Refs, type ShellConfig, type ShellRoute, type SubTabDef, SubTabs, type TabDef, Tabs, type Theme, ThemeToggle, applyTheme, readTheme, useLangStore, useShellLang, useThemeStore };

package/dist/index.js

@@ -1,8 +1,8 @@
+import { createContext, useState, useRef, useEffect, useId, useContext } from 'react';
 import { NavLink } from 'react-router-dom';
-import { Sun, Moon, Languages, Boxes, Github, Globe, Briefcase } from 'lucide-react';
+import { Sun, Moon, Languages, Boxes, Github, Globe, Briefcase, Info } from 'lucide-react';
 import { create } from 'zustand';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { createContext, useId, useState, useContext } from 'react';
 import katex from 'katex';
 
 // src/shell/AppShell.tsx
@@ -119,6 +119,131 @@ function LanguageToggle() {
     /* @__PURE__ */ jsx("span", { className: "lang-code", children: lang })
   ] });
 }
+var cache = {};
+function ArchitectureModal({ config, onClose }) {
+  const lang = useShellLang();
+  const es = lang === "es";
+  const tabs = config.tabs;
+  const [active, setActive] = useState(tabs[0]?.id ?? "");
+  const [svg, setSvg] = useState(null);
+  const [err, setErr] = useState(null);
+  const closeRef = useRef(null);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    closeRef.current?.focus();
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  const tab = tabs.find((t) => t.id === active) ?? tabs[0];
+  useEffect(() => {
+    if (!tab) return;
+    setErr(null);
+    const raw = tab.svg.trim();
+    if (raw.startsWith("<svg")) {
+      setSvg(raw);
+      return;
+    }
+    if (cache[raw]) {
+      setSvg(cache[raw]);
+      return;
+    }
+    setSvg(null);
+    let cancelled = false;
+    const baseUrl = import.meta.env?.BASE_URL || "/";
+    const url = baseUrl + raw.replace(/^\//, "");
+    fetch(url).then(async (r) => {
+      if (!r.ok) throw new Error(`${r.status}`);
+      return r.text();
+    }).then((text) => {
+      cache[raw] = text;
+      if (!cancelled) setSvg(text);
+    }).catch((e) => {
+      if (!cancelled) setErr(String(e?.message ?? e));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [tab]);
+  if (!tab) return null;
+  const title = (es ? config.title_es : config.title_en) ?? (es ? "Arquitectura / C\xF3mo funciona" : "Architecture / How it works");
+  const body = (es ? tab.body_es : tab.body_en).split(/\n\s*\n/);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": title,
+      onClick: onClose,
+      style: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)", zIndex: 1e3, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: (e) => e.stopPropagation(),
+          style: { background: "var(--color-surface)", color: "var(--color-fg)", border: "1px solid var(--color-border)", borderRadius: 10, width: "100%", maxWidth: 1e3, maxHeight: "92vh", display: "flex", flexDirection: "column", overflow: "hidden" },
+          children: [
+            /* @__PURE__ */ jsxs("header", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 14px", background: "var(--color-surface-2, var(--color-surface))", borderBottom: "1px solid var(--color-border)" }, children: [
+              /* @__PURE__ */ jsx("strong", { style: { fontSize: 14 }, children: title }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  ref: closeRef,
+                  onClick: onClose,
+                  "aria-label": es ? "cerrar" : "close",
+                  style: { fontSize: 12, padding: "3px 10px", borderRadius: 6, border: "1px solid var(--color-border)", background: "transparent", color: "var(--color-fg-subtle)", cursor: "pointer" },
+                  children: [
+                    es ? "cerrar" : "close",
+                    " \u2715"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": title, style: { display: "flex", flexWrap: "wrap", gap: 4, padding: "8px 14px 0", borderBottom: "1px solid var(--color-border)" }, children: tabs.map((t) => {
+              const sel = t.id === active;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  role: "tab",
+                  "aria-selected": sel,
+                  onClick: () => setActive(t.id),
+                  style: {
+                    fontSize: 12.5,
+                    padding: "5px 10px",
+                    borderRadius: "6px 6px 0 0",
+                    border: "1px solid var(--color-border)",
+                    borderBottom: "none",
+                    cursor: "pointer",
+                    background: sel ? "var(--color-accent)" : "transparent",
+                    color: sel ? "var(--color-accent-fg, #fff)" : "var(--color-fg-subtle)",
+                    fontWeight: sel ? 600 : 400
+                  },
+                  children: es ? t.es : t.en
+                },
+                t.id
+              );
+            }) }),
+            /* @__PURE__ */ jsxs("div", { role: "tabpanel", style: { overflowY: "auto", padding: "14px 16px 18px" }, children: [
+              body.map((p, i) => /* @__PURE__ */ jsx("p", { style: { color: "var(--color-fg)", fontSize: 13, lineHeight: 1.65, margin: i === 0 ? "0 0 10px" : "10px 0" }, children: p }, i)),
+              err && /* @__PURE__ */ jsxs("div", { style: { color: "var(--color-warn, #f87171)", fontSize: 12 }, children: [
+                "SVG: ",
+                err
+              ] }),
+              !err && svg === null && /* @__PURE__ */ jsx("div", { style: { color: "var(--color-fg-faint)", fontSize: 12 }, children: "\u2026" }),
+              svg !== null && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: { border: "1px solid var(--color-border)", borderRadius: 8, padding: 8, background: "var(--color-bg, var(--color-surface))", overflowX: "auto" },
+                  dangerouslySetInnerHTML: { __html: svg }
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
 var PERSONAL = "https://fsantibanezleal.github.io";
 var PORTFOLIO = "https://fasl-work.com";
 function AppShell({ config, children }) {
@@ -127,6 +252,8 @@ function AppShell({ config, children }) {
   const routes = config.routes ?? [];
   const personal = config.links.personal ?? PERSONAL;
   const portfolio = config.links.portfolio ?? PORTFOLIO;
+  const [archOpen, setArchOpen] = useState(false);
+  const archLabel = lang === "es" ? "Arquitectura / C\xF3mo funciona" : "Architecture / How it works";
   return /* @__PURE__ */ jsxs("div", { className: "app-shell", children: [
     /* @__PURE__ */ jsx("header", { className: "site-header", children: /* @__PURE__ */ jsxs("div", { className: "header-inner", children: [
       /* @__PURE__ */ jsxs(NavLink, { to: "/", className: "brand", "aria-label": config.product.name, children: [
@@ -147,11 +274,13 @@ function AppShell({ config, children }) {
         /* @__PURE__ */ jsx("a", { className: "icon-btn", href: config.links.github, target: "_blank", rel: "noreferrer noopener", "aria-label": c.github, title: c.github, children: /* @__PURE__ */ jsx(Github, { size: 18, "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsx("a", { className: "icon-btn", href: personal, target: "_blank", rel: "noreferrer noopener", "aria-label": c.personal, title: c.personal, children: /* @__PURE__ */ jsx(Globe, { size: 18, "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsx("a", { className: "icon-btn", href: portfolio, target: "_blank", rel: "noreferrer noopener", "aria-label": c.portfolio, title: c.portfolio, children: /* @__PURE__ */ jsx(Briefcase, { size: 18, "aria-hidden": "true" }) }),
+        config.architecture && /* @__PURE__ */ jsx("button", { className: "icon-btn", type: "button", onClick: () => setArchOpen(true), "aria-label": archLabel, title: archLabel, children: /* @__PURE__ */ jsx(Info, { size: 18, "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsx("span", { className: "header-sep", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx(LanguageToggle, {}),
         /* @__PURE__ */ jsx(ThemeToggle, {})
       ] })
     ] }) }),
+    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: [
@@ -368,4 +497,4 @@ function ReferenceList({ ids, heading }) {
   ] });
 }
 
-export { AppShell, Callout, CitationsProvider, Cite, Equation, Figure, InlineMath, LanguageToggle, ReferenceList, Refs, SubTabs, Tabs, ThemeToggle, applyTheme, readTheme, useLangStore, useShellLang, useThemeStore };
+export { AppShell, ArchitectureModal, Callout, CitationsProvider, Cite, Equation, Figure, InlineMath, LanguageToggle, ReferenceList, Refs, SubTabs, Tabs, ThemeToggle, applyTheme, readTheme, useLangStore, useShellLang, useThemeStore };

package/package.json

@@ -1,13 +1,20 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.1.1",
+  "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" },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fsantibanezleal/CAOS_APP_SHELL.git"
+  },
   "type": "module",
-  "publishConfig": { "access": "public" },
-  "sideEffects": ["*.css"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -15,7 +22,10 @@
     },
     "./styles.css": "./styles.css"
   },
-  "files": ["dist", "styles.css"],
+  "files": [
+    "dist",
+    "styles.css"
+  ],
   "scripts": {
     "build": "tsup",
     "prepublishOnly": "npm run build"