@zccz14/ux 0.4.0 → 0.5.0

package/README.md

@@ -117,7 +117,126 @@ One prop, on purpose. There is no `math`, `mermaid`, `components`, `remarkPlugin
 ### What it renders
 
 - **GitHub Flavored Markdown** — tables, task lists, strikethrough, autolinks.
-- **Math through KaTeX** — `$E=mc^2$`, `$$…$$`, `\(…\)`, `\[…\]` and `math`-tagged code fences, because models emit all of them. KaTeX's stylesheet and fonts are imported by the component itself, so a formula is never unstyled. Broken math degrades to one `.katex-error` span carrying the parser message; math that is still streaming — no closing delimiter yet — stays source instead of flickering.
+- **Math through KaTeX** — `$E=mc^2# @zccz14/ux
+
+`@zccz14/ux` provides the shared app shell and the shared Markdown renderer for the NTNL app family (Cybion, NormAI, CTX, Linkit, Midas, HIT, 1Exchange, DeepSeek-LB, OpenAI-LB). One implementation of the sidebar, the AppHeader and the Linkit account control keeps the interaction identical across apps; one implementation of `<Markdown>` keeps rendered content — replies, checkpoints, manuals, documents, articles — identical too. Both replace the per-app copies they supersede.
+
+## What the shell owns
+
+- **Sidebar** — one animated icon-collapse sidebar: 16rem expanded, 3rem collapsed, 200 ms width transition. Midas, 1Exchange and 1earn-style shells without animation are replaced by this behavior.
+- **Navigation groups only** — the sidebar has no separate bottom section. Settings and status destinations live in the navigation groups like every other destination, so the bottom edge of every app's sidebar looks the same.
+- **AppHeader** — sidebar trigger, current page title, your `headerSlot`, and the Linkit account control (`LinkitMyInfo`), in that order. Role badges such as 超级管理员 stay out of the shell: administrator affordances live in the administrator navigation group and pages.
+- **Favicon** — the same mark becomes the page favicon: the shell serialises the rendered logo into `link[rel="icon"]`, pins the colour the mark currently shows (a favicon has no app stylesheet, so `currentColor` would otherwise fall back to black), and re-renders it whenever the theme changes. Pass `favicon={false}` to keep an app-owned icon.
+- **Logo** — you pass one mark; the shell renders it inside a fixed 1.75rem box and controls the display size itself, so the logo size is identical everywhere. Pass a mark that follows the current colour (an icon using `currentColor`, or an SVG with mode-aware fills) so it keeps working in both themes. The title beside the logo disappears while collapsed.
+- **Linkit integration** — the viewer's language selects the shell copy (中文/English), and theme, language and account controls all live in the `LinkitMyInfo` dialog. The shell never reads the theme itself: it renders whatever colour scheme its own CSS resolves (see [Styling](#styling)).
+
+## Installation
+
+```sh
+npm install @zccz14/ux
+```
+
+Peer dependencies: `react` (18 or 19), `react-dom`, `react-router-dom` 7, `@base-ui/react` ≥ 1.6, `linkit-react-components` ≥ 0.6.
+
+## Usage
+
+```tsx
+import { AuthMiniProvider } from "auth-mini-react-components";
+import { LinkitProvider } from "linkit-react-components";
+import { AppLayout } from "@zccz14/ux";
+import { MessagesSquareIcon, ServerIcon } from "lucide-react";
+import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
+
+import "@zccz14/ux/styles.css";
+import "linkit-react-components/styles.css";
+import { CybionMark } from "./cybion-mark";
+
+export function App() {
+  return (
+    <AuthMiniProvider
+      authMiniBaseUrl="https://auth.ntnl.io"
+      audiences={["cybion.ntnl.io", "linkit.ntnl.io"]}
+      autoRedirectToLogin
+    >
+      <LinkitProvider linkitBaseUrl="https://linkit.ntnl.io" lang="zh-CN">
+        <HashRouter>
+          <AppLayout
+            logo={<CybionMark />}
+            title="Cybion"
+            nav={[
+              {
+                label: "工作台",
+                items: [
+                  { to: "/threads", label: "对话", icon: <MessagesSquareIcon /> },
+                  { to: "/system", label: "系统资源", icon: <ServerIcon /> },
+                ],
+              },
+            ]}
+            headerSlot={<RefreshButton />}
+          >
+            <Routes>
+              <Route path="/threads" element={<ThreadsPage />} />
+              <Route path="*" element={<Navigate replace to="/threads" />} />
+            </Routes>
+          </AppLayout>
+        </HashRouter>
+      </LinkitProvider>
+    </AuthMiniProvider>
+  );
+}
+```
+
+`AppLayout` must render below `AuthMiniProvider → LinkitProvider` (it renders `LinkitMyInfo` and reads `useLinkit()`), and inside a router (navigation items render router links).
+
+## API
+
+### `AppLayout` props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `logo` | `ReactNode` | yes | The logo mark. The shell renders it at its own fixed 1.75rem size and mirrors it into the page favicon; pass a mark that follows the current colour. |
+| `favicon` | `boolean` | no | Defaults to `true`: the logo mark is written to `link[rel="icon"]` and re-rendered on theme changes. Set `false` to leave the app's own icon alone. |
+| `title` | `string` | yes | App name beside the logo. Hidden while the sidebar is collapsed. |
+| `nav` | `AppNavGroup[]` | yes | Navigation groups rendered in the sidebar. |
+| `headerSlot` | `ReactNode` | no | Rendered immediately left of `LinkitMyInfo` in the AppHeader. Use it for page-level actions such as refresh. |
+| `pageTitle` | `ReactNode` | no | Overrides the page title derived from the active navigation item. Use it for detail routes with their own title. |
+| `children` | `ReactNode` | yes | Page content, rendered in the scrollable main region. |
+
+### Navigation types
+
+```ts
+type AppNavItem = { to: string; label: string; icon: ReactNode };
+type AppNavGroup = { label: string; items: AppNavItem[] };
+```
+
+`to` is a router path. Each item renders a `NavLink`, so active items receive `aria-current="page"` and the standard active styling. Route matching uses longest-prefix wins, and `/` matches only exactly.
+
+## Behavior
+
+- **Page title** — the AppHeader shows the active navigation item's `label`, matched from `location.pathname`. `pageTitle` wins when supplied.
+- **Collapse** — the header trigger or `⌘B` / `Ctrl+B` toggles the sidebar; the choice persists in the `sidebar_state` cookie.
+- **Mobile** — below 768px the sidebar becomes a modal navigation drawer: the trigger opens it, tapping a link or the backdrop closes it.
+- **Collapsed tooltips** — icon-only items reveal their label in a tooltip on hover and focus.
+- **Reduced motion** — `prefers-reduced-motion: reduce` disables the animations.
+- **Favicon** — an `<svg>` logo is serialised to a `data:image/svg+xml` icon with its rendered colour pinned; an `<img>` logo reuses the image URL. The icon is rewritten when `.dark` flips, when `prefers-color-scheme` changes, and when the mark itself is swapped.
+- **Layout contract** — the shell is viewport-locked (`100svh`); the main region is the page's only scroll container and applies the standard `1rem` / `1.5rem` padding. Pages own their inner layout.
+
+## Markdown
+
+`<Markdown content={...} />` is the single renderer for every piece of Markdown in the family.
+
+```tsx
+import { Markdown } from "@zccz14/ux";
+
+<Markdown content={reply} />;
+```
+
+One prop, on purpose. There is no `math`, `mermaid`, `components`, `remarkPlugins` or `urlTransform` switch: a surface either renders Markdown the family way, or it renders through something else. Every capability below is always on, because the point of the component is that a reply in Cybion, a checkpoint, a manual preview and a CTX article look the same.
+
+### What it renders
+
+- **GitHub Flavored Markdown** — tables, task lists, strikethrough, autolinks.
+, `$…$`, `\(…\)`, `\[…\]` and `math`-tagged code fences, because models emit all of them. The stylesheet and fonts are imported by the component itself, so a formula is never unstyled; the runtime (~76 KB gzipped) is fetched only by a surface whose content can actually contain a formula, and stays cached for the rest of the session. Until that chunk arrives — and always when rendering on a server — a formula shows as the source it was written as, the same state a still-streaming formula is in. Broken math degrades to one `.katex-error` span carrying the parser message.
 - **Mermaid diagrams** — a `mermaid`-tagged fence becomes an SVG, loaded on demand: a surface without a diagram never downloads mermaid. The chart follows the current theme and the surrounding text size, and re-renders when `.dark` flips. An unparseable diagram falls back to its own source block.
 - **Links** — absolute URLs open in a new tab with `rel="noopener noreferrer"` and an external marker; in-page anchors and relative paths stay in the app. Only `http(s)` and `mailto` survive: `javascript:`, `data:` and friends degrade to plain text.
 - **Tables and code** — a wide table or a long code block scrolls inside its own box, so the transcript or article around it never grows a horizontal scrollbar.
@@ -129,7 +248,7 @@ The component wraps its content in `.ux-markdown`, and that block is the family'
 
 ### Why the pipeline is a runtime dependency
 
-`react-markdown`, `remark-gfm`, `remark-math-extended`, `rehype-katex`, `katex` and `mermaid` are `dependencies`, not peers, so an app wires nothing. An app that never renders Markdown tree-shakes the whole pipeline away, with one deliberate exception: `katex/dist/katex.min.css` is a module-level side effect of the renderer (about 3.6 KB gzipped, plus fonts the browser fetches only when a formula appears). `scripts/check-package.mjs` fails the build if the manifest ever claims `sideEffects: false`, which would let a bundler drop that stylesheet and render every formula as bare LaTeX with no error to notice.
+`react-markdown`, `remark-gfm`, `remark-math-extended`, `rehype-katex`, `katex` and `mermaid` are `dependencies`, not peers, so an app wires nothing. An app that never renders Markdown tree-shakes the whole chain away, and two pieces are deliberately kept out of the main bundle even for apps that do: Mermaid (loaded by the first diagram, so a surface without one never downloads it) and the math runtime (KaTeX's ~76 KB gzipped JavaScript, loaded by the first surface whose content may contain a formula). What stays static is KaTeX's stylesheet — about 3.6 KB gzipped, with fonts the browser only fetches once a formula is on screen — because a formula must never render unstyled. `scripts/check-package.mjs` fails the build if the manifest ever claims `sideEffects: false`, which would let a bundler drop that stylesheet and render every formula as bare LaTeX with no error to notice.
 
 ## Migrating an app from its local Markdown renderer
 

package/dist/index.js

@@ -1,70 +1,68 @@
-import { jsxs as u, jsx as n, Fragment as L } from "react/jsx-runtime";
-import { useEffect as v, useRef as f, useState as g, useCallback as y, useSyncExternalStore as C } from "react";
-import { Dialog as h } from "@base-ui/react/dialog";
-import { Tooltip as p } from "@base-ui/react/tooltip";
-import { useLinkit as E, LinkitMyInfo as O } from "linkit-react-components";
-import { useLocation as w, NavLink as z } from "react-router-dom";
-import T from "react-markdown";
-import P from "rehype-katex";
-import F from "remark-gfm";
-import I from "remark-math-extended";
+import { jsxs as d, jsx as n, Fragment as T } from "react/jsx-runtime";
+import { useEffect as g, useRef as v, useState as x, useCallback as _, useSyncExternalStore as L } from "react";
+import { Dialog as f } from "@base-ui/react/dialog";
+import { Tooltip as h } from "@base-ui/react/tooltip";
+import { useLinkit as z, LinkitMyInfo as F } from "linkit-react-components";
+import { useLocation as C, NavLink as $ } from "react-router-dom";
+import I from "react-markdown";
+import A from "remark-gfm";
 import "katex/dist/katex.min.css";
-const $ = {
+const R = {
   closeNavigation: "Close navigation",
   navigation: "Navigation",
   toggleSidebar: "Toggle sidebar"
-}, A = {
+}, W = {
   closeNavigation: "关闭导航",
   navigation: "导航",
   toggleSidebar: "切换侧边栏"
 };
-function W(e) {
-  return e.toLowerCase().startsWith("zh") ? A : $;
-}
-const R = 'link[rel~="icon"]';
 function j(e) {
+  return e.toLowerCase().startsWith("zh") ? W : R;
+}
+const B = 'link[rel~="icon"]';
+function q(e) {
   const t = e.cloneNode(!0);
   return t.setAttribute("xmlns", "http://www.w3.org/2000/svg"), t.style.color = getComputedStyle(e).color, new XMLSerializer().serializeToString(t);
 }
-function B(e) {
+function D(e) {
   if (e instanceof SVGSVGElement)
     return {
-      href: `data:image/svg+xml,${encodeURIComponent(j(e))}`,
+      href: `data:image/svg+xml,${encodeURIComponent(q(e))}`,
       type: "image/svg+xml"
     };
-  const { currentSrc: t, src: a } = e, r = t || a;
-  return /\.svg([?#]|$)/i.test(r) ? { href: r, type: "image/svg+xml" } : { href: r };
+  const { currentSrc: t, src: r } = e, a = t || r;
+  return /\.svg([?#]|$)/i.test(a) ? { href: a, type: "image/svg+xml" } : { href: a };
 }
-function q() {
-  const e = document.querySelector(R);
+function V() {
+  const e = document.querySelector(B);
   if (e)
     return e;
   const t = document.createElement("link");
   return t.rel = "icon", document.head.append(t), t;
 }
-function D(e, t) {
-  v(() => {
+function G(e, t) {
+  g(() => {
     if (!t)
       return;
-    const a = () => {
+    const r = () => {
       var m;
-      const i = (m = e.current) == null ? void 0 : m.querySelector("svg, img");
-      if (!i)
+      const o = (m = e.current) == null ? void 0 : m.querySelector("svg, img");
+      if (!o)
         return;
-      const { href: d, type: s } = B(i), l = q();
-      s ? l.type = s : l.removeAttribute("type"), l.getAttribute("href") !== d && l.setAttribute("href", d);
+      const { href: u, type: s } = D(o), c = V();
+      s ? c.type = s : c.removeAttribute("type"), c.getAttribute("href") !== u && c.setAttribute("href", u);
     };
-    a();
-    const r = new MutationObserver(a);
-    r.observe(document.documentElement, { attributes: !0, attributeFilter: ["class", "style"] }), e.current && r.observe(e.current, { childList: !0, subtree: !0 });
-    const o = window.matchMedia("(prefers-color-scheme: dark)");
-    return o.addEventListener("change", a), () => {
-      r.disconnect(), o.removeEventListener("change", a);
+    r();
+    const a = new MutationObserver(r);
+    a.observe(document.documentElement, { attributes: !0, attributeFilter: ["class", "style"] }), e.current && a.observe(e.current, { childList: !0, subtree: !0 });
+    const i = window.matchMedia("(prefers-color-scheme: dark)");
+    return i.addEventListener("change", r), () => {
+      a.disconnect(), i.removeEventListener("change", r);
     };
   }, [t, e]);
 }
 function K() {
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ d(
     "svg",
     {
       "aria-hidden": "true",
@@ -81,8 +79,8 @@ function K() {
     }
   );
 }
-function V() {
-  return /* @__PURE__ */ u(
+function H() {
+  return /* @__PURE__ */ d(
     "svg",
     {
       "aria-hidden": "true",
@@ -99,8 +97,8 @@ function V() {
     }
   );
 }
-function G() {
-  return /* @__PURE__ */ u(
+function U() {
+  return /* @__PURE__ */ d(
     "svg",
     {
       "aria-hidden": "true",
@@ -119,199 +117,199 @@ function G() {
     }
   );
 }
-const b = "sidebar_state", H = 3600 * 24 * 7, _ = "(max-width: 767px)";
-function U() {
-  const e = document.cookie.split("; ").find((t) => t.startsWith(`${b}=`));
-  return e ? e.slice(b.length + 1) !== "false" : !0;
+const k = "sidebar_state", Q = 3600 * 24 * 7, P = "(max-width: 767px)";
+function X() {
+  const e = document.cookie.split("; ").find((t) => t.startsWith(`${k}=`));
+  return e ? e.slice(k.length + 1) !== "false" : !0;
 }
-function Q(e) {
-  document.cookie = `${b}=${e}; path=/; max-age=${H}`;
+function J(e) {
+  document.cookie = `${k}=${e}; path=/; max-age=${Q}`;
 }
-function X(e) {
-  const t = window.matchMedia(_);
+function Y(e) {
+  const t = window.matchMedia(P);
   return t.addEventListener("change", e), () => t.removeEventListener("change", e);
 }
-function J() {
-  return C(
-    X,
-    () => window.matchMedia(_).matches,
+function Z() {
+  return L(
+    Y,
+    () => window.matchMedia(P).matches,
     () => !1
   );
 }
-function Y() {
-  const e = J(), [t, a] = g(U), [r, o] = g(!1), i = y((s) => {
-    a(s), Q(s);
-  }, []), d = y(() => {
+function ee() {
+  const e = Z(), [t, r] = x(X), [a, i] = x(!1), o = _((s) => {
+    r(s), J(s);
+  }, []), u = _(() => {
     if (e) {
-      o((s) => !s);
+      i((s) => !s);
       return;
     }
-    i(!t);
-  }, [e, t, i]);
-  return v(() => {
-    function s(l) {
-      (l.metaKey || l.ctrlKey) && l.key === "b" && (l.preventDefault(), d());
+    o(!t);
+  }, [e, t, o]);
+  return g(() => {
+    function s(c) {
+      (c.metaKey || c.ctrlKey) && c.key === "b" && (c.preventDefault(), u());
     }
     return window.addEventListener("keydown", s), () => window.removeEventListener("keydown", s);
-  }, [d]), { isMobile: e, open: t, openMobile: r, setOpenMobile: o, toggleSidebar: d };
+  }, [u]), { isMobile: e, open: t, openMobile: a, setOpenMobile: i, toggleSidebar: u };
 }
-function M(e, t) {
-  let a;
-  for (const r of e)
-    for (const o of r.items)
-      (o.to === "/" ? t === "/" : t === o.to || t.startsWith(`${o.to}/`)) && (!a || o.to.length > a.to.length) && (a = o);
-  return a;
+function E(e, t) {
+  let r;
+  for (const a of e)
+    for (const i of a.items)
+      (i.to === "/" ? t === "/" : t === i.to || t.startsWith(`${i.to}/`)) && (!r || i.to.length > r.to.length) && (r = i);
+  return r;
 }
-function Z({
+function te({
   collapsed: e,
   end: t,
-  item: a,
-  onNavigate: r
+  item: r,
+  onNavigate: a
 }) {
-  return /* @__PURE__ */ u(p.Root, { children: [
-    /* @__PURE__ */ u(
-      p.Trigger,
+  return /* @__PURE__ */ d(h.Root, { children: [
+    /* @__PURE__ */ d(
+      h.Trigger,
       {
         render: /* @__PURE__ */ n(
-          z,
+          $,
           {
             className: "ux-nav-item",
             end: t,
-            onClick: r,
-            to: a.to
+            onClick: a,
+            to: r.to
           }
         ),
         children: [
-          /* @__PURE__ */ n("span", { className: "ux-nav-item__icon", children: a.icon }),
-          /* @__PURE__ */ n("span", { className: "ux-nav-item__text", children: a.label })
+          /* @__PURE__ */ n("span", { className: "ux-nav-item__icon", children: r.icon }),
+          /* @__PURE__ */ n("span", { className: "ux-nav-item__text", children: r.label })
         ]
       }
     ),
-    /* @__PURE__ */ n(p.Portal, { children: /* @__PURE__ */ n(
-      p.Positioner,
+    /* @__PURE__ */ n(h.Portal, { children: /* @__PURE__ */ n(
+      h.Positioner,
       {
         className: "ux-tooltip-positioner",
         side: "right",
         sideOffset: 6,
-        children: /* @__PURE__ */ n(p.Popup, { className: "ux-tooltip", hidden: !e, children: a.label })
+        children: /* @__PURE__ */ n(h.Popup, { className: "ux-tooltip", hidden: !e, children: r.label })
       }
     ) })
   ] });
 }
-function N({
+function M({
   copy: e,
   logo: t,
-  logoRef: a,
-  nav: r,
-  onNavigate: o,
-  state: i,
-  title: d
+  logoRef: r,
+  nav: a,
+  onNavigate: i,
+  state: o,
+  title: u
 }) {
-  const { pathname: s } = w(), l = M(r, s);
-  return /* @__PURE__ */ u(L, { children: [
-    /* @__PURE__ */ u("div", { className: "ux-sidebar__header", children: [
-      /* @__PURE__ */ n("span", { className: "ux-sidebar__logo", ref: a, children: t }),
-      /* @__PURE__ */ n("span", { className: "ux-sidebar__title", children: d })
+  const { pathname: s } = C(), c = E(a, s);
+  return /* @__PURE__ */ d(T, { children: [
+    /* @__PURE__ */ d("div", { className: "ux-sidebar__header", children: [
+      /* @__PURE__ */ n("span", { className: "ux-sidebar__logo", ref: r, children: t }),
+      /* @__PURE__ */ n("span", { className: "ux-sidebar__title", children: u })
     ] }),
-    /* @__PURE__ */ n("nav", { "aria-label": e.navigation, className: "ux-sidebar__nav", children: r.map((m) => /* @__PURE__ */ u("div", { className: "ux-nav-group", children: [
+    /* @__PURE__ */ n("nav", { "aria-label": e.navigation, className: "ux-sidebar__nav", children: a.map((m) => /* @__PURE__ */ d("div", { className: "ux-nav-group", children: [
       /* @__PURE__ */ n("div", { className: "ux-nav-group__label", children: m.label }),
-      m.items.map((c) => (
+      m.items.map((l) => (
         // NavLink would mark a parent section current on its children's
         // routes; follow matchActiveItem instead so only the deepest
         // match (or the exact path) stays marked.
         /* @__PURE__ */ n(
-          Z,
+          te,
           {
-            collapsed: i === "collapsed",
-            end: c !== l || c.to === s,
-            item: c,
-            onNavigate: o
+            collapsed: o === "collapsed",
+            end: l !== c || l.to === s,
+            item: l,
+            onNavigate: i
           },
-          c.to
+          l.to
         )
       ))
     ] }, m.label)) })
   ] });
 }
-function _e({
+function Ce({
   children: e,
   favicon: t = !0,
-  headerSlot: a,
-  logo: r,
-  nav: o,
-  pageTitle: i,
-  title: d
+  headerSlot: r,
+  logo: a,
+  nav: i,
+  pageTitle: o,
+  title: u
 }) {
-  var k;
-  const { pathname: s } = w(), { lang: l } = E(), m = W(l), c = Y(), x = f(null), S = i ?? ((k = M(o, s)) == null ? void 0 : k.label);
-  return D(x, t), /* @__PURE__ */ n(p.Provider, { delay: 0, children: /* @__PURE__ */ u(
+  var w;
+  const { pathname: s } = C(), { lang: c } = z(), m = j(c), l = ee(), N = v(null), O = o ?? ((w = E(i, s)) == null ? void 0 : w.label);
+  return G(N, t), /* @__PURE__ */ n(h.Provider, { delay: 0, children: /* @__PURE__ */ d(
     "div",
     {
       className: "ux-app-layout",
-      "data-state": c.open ? "expanded" : "collapsed",
+      "data-state": l.open ? "expanded" : "collapsed",
       children: [
         /* @__PURE__ */ n("aside", { className: "ux-sidebar", children: /* @__PURE__ */ n(
-          N,
+          M,
           {
             copy: m,
-            logo: r,
-            logoRef: x,
-            nav: o,
-            state: c.open ? "expanded" : "collapsed",
-            title: d
+            logo: a,
+            logoRef: N,
+            nav: i,
+            state: l.open ? "expanded" : "collapsed",
+            title: u
           }
         ) }),
-        c.isMobile ? /* @__PURE__ */ n(
-          h.Root,
+        l.isMobile ? /* @__PURE__ */ n(
+          f.Root,
           {
-            open: c.openMobile,
-            onOpenChange: c.setOpenMobile,
-            children: /* @__PURE__ */ u(h.Portal, { children: [
-              /* @__PURE__ */ n(h.Backdrop, { className: "ux-drawer-backdrop" }),
-              /* @__PURE__ */ u(h.Popup, { className: "ux-drawer", children: [
-                /* @__PURE__ */ n(h.Title, { className: "ux-visually-hidden", children: m.navigation }),
+            open: l.openMobile,
+            onOpenChange: l.setOpenMobile,
+            children: /* @__PURE__ */ d(f.Portal, { children: [
+              /* @__PURE__ */ n(f.Backdrop, { className: "ux-drawer-backdrop" }),
+              /* @__PURE__ */ d(f.Popup, { className: "ux-drawer", children: [
+                /* @__PURE__ */ n(f.Title, { className: "ux-visually-hidden", children: m.navigation }),
                 /* @__PURE__ */ n(
                   "button",
                   {
                     "aria-label": m.closeNavigation,
                     className: "ux-drawer__close",
                     type: "button",
-                    onClick: () => c.setOpenMobile(!1),
+                    onClick: () => l.setOpenMobile(!1),
                     children: /* @__PURE__ */ n(K, {})
                   }
                 ),
                 /* @__PURE__ */ n(
-                  N,
+                  M,
                   {
                     copy: m,
-                    logo: r,
-                    nav: o,
-                    onNavigate: () => c.setOpenMobile(!1),
+                    logo: a,
+                    nav: i,
+                    onNavigate: () => l.setOpenMobile(!1),
                     state: "expanded",
-                    title: d
+                    title: u
                   }
                 )
               ] })
             ] })
           }
         ) : null,
-        /* @__PURE__ */ u("div", { className: "ux-shell", children: [
-          /* @__PURE__ */ u("header", { className: "ux-app-header", children: [
+        /* @__PURE__ */ d("div", { className: "ux-shell", children: [
+          /* @__PURE__ */ d("header", { className: "ux-app-header", children: [
             /* @__PURE__ */ n(
               "button",
               {
-                "aria-expanded": c.isMobile ? c.openMobile : c.open,
+                "aria-expanded": l.isMobile ? l.openMobile : l.open,
                 "aria-label": m.toggleSidebar,
                 className: "ux-app-header__trigger",
                 type: "button",
-                onClick: c.toggleSidebar,
-                children: /* @__PURE__ */ n(V, {})
+                onClick: l.toggleSidebar,
+                children: /* @__PURE__ */ n(H, {})
               }
             ),
             /* @__PURE__ */ n("span", { "aria-hidden": "true", className: "ux-app-header__separator" }),
-            /* @__PURE__ */ n("p", { className: "ux-app-header__title", children: S }),
-            /* @__PURE__ */ n("div", { className: "ux-app-header__slot", children: a }),
-            /* @__PURE__ */ n(O, {})
+            /* @__PURE__ */ n("p", { className: "ux-app-header__title", children: O }),
+            /* @__PURE__ */ n("div", { className: "ux-app-header__slot", children: r }),
+            /* @__PURE__ */ n(F, {})
           ] }),
           /* @__PURE__ */ n("main", { className: "ux-main", children: e })
         ] })
@@ -319,52 +317,52 @@ function _e({
     }
   ) });
 }
-let ee = 0;
-function te() {
+let ne = 0;
+function re() {
   return document.documentElement.classList.contains("dark") ? "dark" : "neutral";
 }
-function ne() {
+function ae() {
   const e = getComputedStyle(document.documentElement).fontFamily.trim();
   return e === "" ? "sans-serif" : e;
 }
-function re(e) {
+function ie(e) {
   const t = e ? Number.parseFloat(getComputedStyle(e).fontSize) : Number.NaN;
   return !Number.isFinite(t) || t <= 0 ? 16 : Math.min(Math.max(t, 10), 20);
 }
-async function ae(e, t) {
+async function oe(e, t) {
   try {
-    const { default: a } = await import("mermaid");
-    a.initialize({
+    const { default: r } = await import("mermaid");
+    r.initialize({
       startOnLoad: !1,
       securityLevel: "strict",
-      theme: te(),
-      themeVariables: { fontFamily: ne(), fontSize: `${re(t)}px` }
+      theme: re(),
+      themeVariables: { fontFamily: ae(), fontSize: `${ie(t)}px` }
     });
-    const { svg: r } = await a.render(`ux-mermaid-${++ee}`, e);
-    return r;
+    const { svg: a } = await r.render(`ux-mermaid-${++ne}`, e);
+    return a;
   } catch {
     return null;
   }
 }
-function oe({ source: e }) {
-  const [t, a] = g(null), r = f(null), o = f(0);
-  return v(() => {
-    const i = async () => {
-      const s = ++o.current, l = await ae(e, r.current);
-      o.current === s && a(l);
+function se({ source: e }) {
+  const [t, r] = x(null), a = v(null), i = v(0);
+  return g(() => {
+    const o = async () => {
+      const s = ++i.current, c = await oe(e, a.current);
+      i.current === s && r(c);
     };
-    i();
-    const d = new MutationObserver(() => void i());
-    return d.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => {
-      o.current += 1, d.disconnect();
+    o();
+    const u = new MutationObserver(() => void o());
+    return u.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => {
+      i.current += 1, u.disconnect();
     };
   }, [e]), t === null ? /* @__PURE__ */ n(
     "pre",
     {
       className: "ux-markdown__mermaid-source",
       "data-mermaid": "source",
-      ref: (i) => {
-        r.current = i;
+      ref: (o) => {
+        a.current = o;
       },
       children: /* @__PURE__ */ n("code", { className: "language-mermaid", children: e })
     }
@@ -375,60 +373,91 @@ function oe({ source: e }) {
       className: "ux-markdown__mermaid",
       "data-mermaid": "diagram",
       dangerouslySetInnerHTML: { __html: t },
-      ref: (i) => {
-        r.current = i;
+      ref: (o) => {
+        a.current = o;
       },
       role: "img"
     }
   );
 }
-function ie(e) {
+let p = null, b = null;
+const y = /* @__PURE__ */ new Set();
+function le(e) {
+  return y.add(e), () => {
+    y.delete(e);
+  };
+}
+function ce() {
+  return p !== null;
+}
+const ue = /^ {0,3}(?:```|~~~)\s*math\b/m;
+function de(e) {
+  return e.includes("$") || e.includes("\\(") || e.includes("\\[") || ue.test(e);
+}
+function me() {
+  return b ?? (b = Promise.all([import("remark-math-extended"), import("rehype-katex")]).then(([e, t]) => {
+    p = {
+      remarkPlugins: [e.default],
+      rehypePlugins: [
+        [t.default, { strict: "ignore", errorColor: "var(--ux-destructive)" }]
+      ]
+    };
+    for (const r of y)
+      r();
+  }).catch(() => {
+    b = null;
+  })), b;
+}
+function he(e) {
   const t = e == null ? void 0 : e.children[0];
   if ((t == null ? void 0 : t.type) !== "element" || t.tagName !== "code")
     return null;
-  const a = t.properties.className;
-  if (!Array.isArray(a) || !a.includes("language-mermaid"))
+  const r = t.properties.className;
+  if (!Array.isArray(r) || !r.includes("language-mermaid"))
     return null;
-  const r = t.children[0];
-  return (r == null ? void 0 : r.type) === "text" ? r.value : null;
+  const a = t.children[0];
+  return (a == null ? void 0 : a.type) === "text" ? a.value : null;
 }
-const se = {
-  a: ({ children: e, href: t, node: a, ...r }) => t ? le(t) ? /* @__PURE__ */ u("a", { ...r, href: t, rel: "noopener noreferrer", target: "_blank", children: [
+const pe = {
+  a: ({ children: e, href: t, node: r, ...a }) => t ? ge(t) ? /* @__PURE__ */ d("a", { ...a, href: t, rel: "noopener noreferrer", target: "_blank", children: [
     e,
-    /* @__PURE__ */ n(G, {})
-  ] }) : /* @__PURE__ */ n("a", { ...r, href: t, children: e }) : /* @__PURE__ */ n("span", { ...r, children: e }),
-  pre: ({ children: e, node: t, ...a }) => {
-    const r = ie(t);
-    return r === null ? /* @__PURE__ */ n("pre", { ...a, children: e }) : /* @__PURE__ */ n(oe, { source: r });
+    /* @__PURE__ */ n(U, {})
+  ] }) : /* @__PURE__ */ n("a", { ...a, href: t, children: e }) : /* @__PURE__ */ n("span", { ...a, children: e }),
+  pre: ({ children: e, node: t, ...r }) => {
+    const a = he(t);
+    return a === null ? /* @__PURE__ */ n("pre", { ...r, children: e }) : /* @__PURE__ */ n(se, { source: a });
   },
   // A wide table scrolls on its own; the transcript or article around it never grows a horizontal
   // scrollbar, so the columns past the fold stay reachable.
-  table: ({ children: e, node: t, ...a }) => /* @__PURE__ */ n("div", { className: "ux-markdown__table", children: /* @__PURE__ */ n("table", { ...a, children: e }) })
-}, ce = /* @__PURE__ */ new Set(["http", "https", "mailto"]);
-function le(e) {
+  table: ({ children: e, node: t, ...r }) => /* @__PURE__ */ n("div", { className: "ux-markdown__table", children: /* @__PURE__ */ n("table", { ...r, children: e }) })
+}, fe = /* @__PURE__ */ new Set(["http", "https", "mailto"]);
+function ge(e) {
   return /^[a-z][a-z0-9+.-]*:/i.test(e) || e.startsWith("//");
 }
-function de(e) {
-  const t = e.trim(), a = t.indexOf(":");
-  if (a === -1)
+function be(e) {
+  const t = e.trim(), r = t.indexOf(":");
+  if (r === -1)
     return t;
-  const r = t.slice(0, a).toLowerCase();
-  return /^[a-z][a-z0-9+.-]*$/.test(r) ? ce.has(r) ? t : "" : t;
+  const a = t.slice(0, r).toLowerCase();
+  return /^[a-z][a-z0-9+.-]*$/.test(a) ? fe.has(a) ? t : "" : t;
 }
-const ue = [F, I], me = [[P, { strict: "ignore", errorColor: "var(--ux-destructive)" }]];
-function Me({ content: e }) {
-  return /* @__PURE__ */ n("div", { className: "ux-markdown", children: /* @__PURE__ */ n(
-    T,
+const S = [A], ve = [];
+function Pe({ content: e }) {
+  const t = L(le, ce, () => !1);
+  return g(() => {
+    !t && de(e) && me();
+  }, [e, t]), /* @__PURE__ */ n("div", { className: "ux-markdown", children: /* @__PURE__ */ n(
+    I,
     {
-      components: se,
-      rehypePlugins: me,
-      remarkPlugins: ue,
-      urlTransform: de,
+      components: pe,
+      rehypePlugins: t && p ? p.rehypePlugins : ve,
+      remarkPlugins: t && p ? [...S, ...p.remarkPlugins] : S,
+      urlTransform: be,
       children: e
     }
   ) });
 }
 export {
-  _e as AppLayout,
-  Me as Markdown
+  Ce as AppLayout,
+  Pe as Markdown
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zccz14/ux",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Unified app shell and Markdown renderer for the NTNL app family: one animated icon sidebar, a fixed-size logo that doubles as the page favicon, the Linkit-integrated AppHeader, and the single Markdown surface every app renders through.",
   "license": "MIT",
   "repository": {