@nimblebrain/synapse 0.10.2 → 0.11.0

package/README.md

@@ -45,6 +45,7 @@ npm install @nimblebrain/synapse
 | `@nimblebrain/synapse/react` | React hooks and providers (`AppProvider`, `SynapseProvider`) |
 | `@nimblebrain/synapse/ui` | Component library — tokens, primitives, components, layouts |
 | `@nimblebrain/synapse/ui/fonts` | Side-effect import that loads the brand fonts into the iframe |
+| `@nimblebrain/synapse/ui/base` | Side-effect import that establishes the root-height chain (`html, body, #root`) the app shell fills. `AppFrame` does this automatically on render; import it in your entry to apply it before first paint |
 | `@nimblebrain/synapse/vite` | Vite plugin for dev mode |
 | `@nimblebrain/synapse/codegen` | CLI + programmatic code generation |
 | `@nimblebrain/synapse/iife` | Pre-built IIFE bundle for `<script>` tags (`window.Synapse`) |

package/dist/chunk-3HQGHPNC.js

@@ -0,0 +1,20 @@
+// src/ui/internal/inject-style.ts
+function ensureStyle(id, css) {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(id)) return;
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+
+// src/ui/internal/base-reset.ts
+var STYLE_ID = "nb-synapse-base";
+var RULES = "html, body, #root { height: 100%; } body { margin: 0; }";
+function injectBaseReset() {
+  ensureStyle(STYLE_ID, RULES);
+}
+
+export { ensureStyle, injectBaseReset };
+//# sourceMappingURL=chunk-3HQGHPNC.js.map
+//# sourceMappingURL=chunk-3HQGHPNC.js.map

package/dist/chunk-3HQGHPNC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/internal/inject-style.ts","../src/ui/internal/base-reset.ts"],"names":[],"mappings":";AAKO,SAAS,WAAA,CAAY,IAAY,GAAA,EAAmB;AACzD,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,EAAA,IAAI,QAAA,CAAS,cAAA,CAAe,EAAE,CAAA,EAAG;AACjC,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AAC5C,EAAA,KAAA,CAAM,EAAA,GAAK,EAAA;AACX,EAAA,KAAA,CAAM,WAAA,GAAc,GAAA;AACpB,EAAA,QAAA,CAAS,IAAA,CAAK,YAAY,KAAK,CAAA;AACjC;;;ACUA,IAAM,QAAA,GAAW,iBAAA;AACjB,IAAM,KAAA,GAAQ,yDAAA;AAOP,SAAS,eAAA,GAAwB;AACtC,EAAA,WAAA,CAAY,UAAU,KAAK,CAAA;AAC7B","file":"chunk-3HQGHPNC.js","sourcesContent":["/**\n * Inject a stylesheet into the document exactly once, keyed by `id`. Used for\n * the few things inline styles can't express — `@keyframes` and `:hover`/\n * `:focus` pseudo-states. SSR-safe (no-ops without `document`) and idempotent.\n */\nexport function ensureStyle(id: string, css: string): void {\n  if (typeof document === \"undefined\") return;\n  if (document.getElementById(id)) return;\n  const style = document.createElement(\"style\");\n  style.id = id;\n  style.textContent = css;\n  document.head.appendChild(style);\n}\n","/**\n * The root-height chain every full-pane Synapse app needs, as a plain function\n * (no side effect on import — so a component can call it on render without the\n * mere act of importing injecting anything). The side-effect entry point is\n * `../base.ts` (`@nimblebrain/synapse/ui/base`).\n *\n * `AppFrame` sizes the app shell with `height: 100%`, which only resolves if its\n * ancestor chain (`#root` → `body` → `html`) has a definite height. Each app\n * iframe is its own bare document, so without this chain the shell collapses to\n * content height — full width, short height — inside the host pane.\n *\n * Percentages resolve against the actual pane box, which is correct whether the\n * app is sandboxed in an iframe or mounted into a host panel. A viewport unit\n * (`vh`/`dvh`) would instead assume the pane equals the viewport — wrong on\n * hosts that allocate a pane shorter than the viewport (it overflows with a\n * second scrollbar). The `#root` rule targets the conventional mount id and\n * harmlessly matches nothing if an app mounts elsewhere; `html, body` still\n * apply. `body { margin: 0 }` removes the UA default so the pane has no gap.\n */\n\nimport { ensureStyle } from \"./inject-style.js\";\n\nconst STYLE_ID = \"nb-synapse-base\";\nconst RULES = \"html, body, #root { height: 100%; } body { margin: 0; }\";\n\n/**\n * Inject the root-height + body-margin reset once. Idempotent (keyed by a\n * single style id) and SSR-safe (no-ops when `document` is unavailable, via\n * `ensureStyle`).\n */\nexport function injectBaseReset(): void {\n  ensureStyle(STYLE_ID, RULES);\n}\n"]}

package/dist/chunk-RX6XCLFF.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+// src/ui/internal/inject-style.ts
+function ensureStyle(id, css) {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(id)) return;
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+
+// src/ui/internal/base-reset.ts
+var STYLE_ID = "nb-synapse-base";
+var RULES = "html, body, #root { height: 100%; } body { margin: 0; }";
+function injectBaseReset() {
+  ensureStyle(STYLE_ID, RULES);
+}
+
+exports.ensureStyle = ensureStyle;
+exports.injectBaseReset = injectBaseReset;
+//# sourceMappingURL=chunk-RX6XCLFF.cjs.map
+//# sourceMappingURL=chunk-RX6XCLFF.cjs.map

package/dist/chunk-RX6XCLFF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/internal/inject-style.ts","../src/ui/internal/base-reset.ts"],"names":[],"mappings":";;;AAKO,SAAS,WAAA,CAAY,IAAY,GAAA,EAAmB;AACzD,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,EAAA,IAAI,QAAA,CAAS,cAAA,CAAe,EAAE,CAAA,EAAG;AACjC,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AAC5C,EAAA,KAAA,CAAM,EAAA,GAAK,EAAA;AACX,EAAA,KAAA,CAAM,WAAA,GAAc,GAAA;AACpB,EAAA,QAAA,CAAS,IAAA,CAAK,YAAY,KAAK,CAAA;AACjC;;;ACUA,IAAM,QAAA,GAAW,iBAAA;AACjB,IAAM,KAAA,GAAQ,yDAAA;AAOP,SAAS,eAAA,GAAwB;AACtC,EAAA,WAAA,CAAY,UAAU,KAAK,CAAA;AAC7B","file":"chunk-RX6XCLFF.cjs","sourcesContent":["/**\n * Inject a stylesheet into the document exactly once, keyed by `id`. Used for\n * the few things inline styles can't express — `@keyframes` and `:hover`/\n * `:focus` pseudo-states. SSR-safe (no-ops without `document`) and idempotent.\n */\nexport function ensureStyle(id: string, css: string): void {\n  if (typeof document === \"undefined\") return;\n  if (document.getElementById(id)) return;\n  const style = document.createElement(\"style\");\n  style.id = id;\n  style.textContent = css;\n  document.head.appendChild(style);\n}\n","/**\n * The root-height chain every full-pane Synapse app needs, as a plain function\n * (no side effect on import — so a component can call it on render without the\n * mere act of importing injecting anything). The side-effect entry point is\n * `../base.ts` (`@nimblebrain/synapse/ui/base`).\n *\n * `AppFrame` sizes the app shell with `height: 100%`, which only resolves if its\n * ancestor chain (`#root` → `body` → `html`) has a definite height. Each app\n * iframe is its own bare document, so without this chain the shell collapses to\n * content height — full width, short height — inside the host pane.\n *\n * Percentages resolve against the actual pane box, which is correct whether the\n * app is sandboxed in an iframe or mounted into a host panel. A viewport unit\n * (`vh`/`dvh`) would instead assume the pane equals the viewport — wrong on\n * hosts that allocate a pane shorter than the viewport (it overflows with a\n * second scrollbar). The `#root` rule targets the conventional mount id and\n * harmlessly matches nothing if an app mounts elsewhere; `html, body` still\n * apply. `body { margin: 0 }` removes the UA default so the pane has no gap.\n */\n\nimport { ensureStyle } from \"./inject-style.js\";\n\nconst STYLE_ID = \"nb-synapse-base\";\nconst RULES = \"html, body, #root { height: 100%; } body { margin: 0; }\";\n\n/**\n * Inject the root-height + body-margin reset once. Idempotent (keyed by a\n * single style id) and SSR-safe (no-ops when `document` is unavailable, via\n * `ensureStyle`).\n */\nexport function injectBaseReset(): void {\n  ensureStyle(STYLE_ID, RULES);\n}\n"]}

package/dist/codegen/index.cjs

@@ -1,14 +1,10 @@
 'use strict';
 
-var chunkHLT5UBJF_cjs = require('../chunk-HLT5UBJF.cjs');
 var chunk42N5BB5O_cjs = require('../chunk-42N5BB5O.cjs');
+var chunkHLT5UBJF_cjs = require('../chunk-HLT5UBJF.cjs');
 
 
 
-Object.defineProperty(exports, "generateTypes", {
-  enumerable: true,
-  get: function () { return chunkHLT5UBJF_cjs.generateTypes; }
-});
 Object.defineProperty(exports, "readFromManifest", {
   enumerable: true,
   get: function () { return chunk42N5BB5O_cjs.readFromManifest; }
@@ -21,5 +17,9 @@ Object.defineProperty(exports, "readFromServer", {
   enumerable: true,
   get: function () { return chunk42N5BB5O_cjs.readFromServer; }
 });
+Object.defineProperty(exports, "generateTypes", {
+  enumerable: true,
+  get: function () { return chunkHLT5UBJF_cjs.generateTypes; }
+});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/codegen/index.js

@@ -1,4 +1,4 @@
-export { generateTypes } from '../chunk-JKHGWDZI.js';
 export { readFromManifest, readFromSchemaDir, readFromServer } from '../chunk-YWX3D24J.js';
+export { generateTypes } from '../chunk-JKHGWDZI.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/ui/base.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var chunkRX6XCLFF_cjs = require('../chunk-RX6XCLFF.cjs');
+
+// src/ui/base.ts
+chunkRX6XCLFF_cjs.injectBaseReset();
+
+Object.defineProperty(exports, "injectBaseReset", {
+  enumerable: true,
+  get: function () { return chunkRX6XCLFF_cjs.injectBaseReset; }
+});
+//# sourceMappingURL=base.cjs.map
+//# sourceMappingURL=base.cjs.map

package/dist/ui/base.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/base.ts"],"names":["injectBaseReset"],"mappings":";;;;;AAqBAA,iCAAA,EAAgB","file":"base.cjs","sourcesContent":["/**\n * Establishes the root-height chain a full-pane Synapse app needs. Import for\n * the side effect:\n *\n * ```ts\n * import \"@nimblebrain/synapse/ui/base\";\n * ```\n *\n * This injects `html, body, #root { height: 100% }` (so a `height: 100%` app\n * shell resolves against the iframe's allocated pane) and `body { margin: 0 }`\n * (so the pane has no UA-margin gap). See `./internal/base-reset.ts` for why a\n * percentage chain — not a viewport unit — is the correct mechanism.\n *\n * `AppFrame` already calls `injectBaseReset()` on render, so apps built on it\n * get the chain automatically. Import this module explicitly to establish the\n * chain *before* React mounts — avoiding a first-paint layout jump — or for an\n * app that renders a full-pane root without `AppFrame`.\n */\n\nimport { injectBaseReset } from \"./internal/base-reset.js\";\n\ninjectBaseReset();\n\nexport { injectBaseReset };\n"]}

package/dist/ui/base.d.cts

@@ -0,0 +1,27 @@
+/**
+ * The root-height chain every full-pane Synapse app needs, as a plain function
+ * (no side effect on import — so a component can call it on render without the
+ * mere act of importing injecting anything). The side-effect entry point is
+ * `../base.ts` (`@nimblebrain/synapse/ui/base`).
+ *
+ * `AppFrame` sizes the app shell with `height: 100%`, which only resolves if its
+ * ancestor chain (`#root` → `body` → `html`) has a definite height. Each app
+ * iframe is its own bare document, so without this chain the shell collapses to
+ * content height — full width, short height — inside the host pane.
+ *
+ * Percentages resolve against the actual pane box, which is correct whether the
+ * app is sandboxed in an iframe or mounted into a host panel. A viewport unit
+ * (`vh`/`dvh`) would instead assume the pane equals the viewport — wrong on
+ * hosts that allocate a pane shorter than the viewport (it overflows with a
+ * second scrollbar). The `#root` rule targets the conventional mount id and
+ * harmlessly matches nothing if an app mounts elsewhere; `html, body` still
+ * apply. `body { margin: 0 }` removes the UA default so the pane has no gap.
+ */
+/**
+ * Inject the root-height + body-margin reset once. Idempotent (keyed by a
+ * single style id) and SSR-safe (no-ops when `document` is unavailable, via
+ * `ensureStyle`).
+ */
+declare function injectBaseReset(): void;
+
+export { injectBaseReset };

package/dist/ui/base.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The root-height chain every full-pane Synapse app needs, as a plain function
+ * (no side effect on import — so a component can call it on render without the
+ * mere act of importing injecting anything). The side-effect entry point is
+ * `../base.ts` (`@nimblebrain/synapse/ui/base`).
+ *
+ * `AppFrame` sizes the app shell with `height: 100%`, which only resolves if its
+ * ancestor chain (`#root` → `body` → `html`) has a definite height. Each app
+ * iframe is its own bare document, so without this chain the shell collapses to
+ * content height — full width, short height — inside the host pane.
+ *
+ * Percentages resolve against the actual pane box, which is correct whether the
+ * app is sandboxed in an iframe or mounted into a host panel. A viewport unit
+ * (`vh`/`dvh`) would instead assume the pane equals the viewport — wrong on
+ * hosts that allocate a pane shorter than the viewport (it overflows with a
+ * second scrollbar). The `#root` rule targets the conventional mount id and
+ * harmlessly matches nothing if an app mounts elsewhere; `html, body` still
+ * apply. `body { margin: 0 }` removes the UA default so the pane has no gap.
+ */
+/**
+ * Inject the root-height + body-margin reset once. Idempotent (keyed by a
+ * single style id) and SSR-safe (no-ops when `document` is unavailable, via
+ * `ensureStyle`).
+ */
+declare function injectBaseReset(): void;
+
+export { injectBaseReset };

package/dist/ui/base.js

@@ -0,0 +1,7 @@
+import { injectBaseReset } from '../chunk-3HQGHPNC.js';
+export { injectBaseReset } from '../chunk-3HQGHPNC.js';
+
+// src/ui/base.ts
+injectBaseReset();
+//# sourceMappingURL=base.js.map
+//# sourceMappingURL=base.js.map

package/dist/ui/base.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/base.ts"],"names":[],"mappings":";;;;AAqBA,eAAA,EAAgB","file":"base.js","sourcesContent":["/**\n * Establishes the root-height chain a full-pane Synapse app needs. Import for\n * the side effect:\n *\n * ```ts\n * import \"@nimblebrain/synapse/ui/base\";\n * ```\n *\n * This injects `html, body, #root { height: 100% }` (so a `height: 100%` app\n * shell resolves against the iframe's allocated pane) and `body { margin: 0 }`\n * (so the pane has no UA-margin gap). See `./internal/base-reset.ts` for why a\n * percentage chain — not a viewport unit — is the correct mechanism.\n *\n * `AppFrame` already calls `injectBaseReset()` on render, so apps built on it\n * get the chain automatically. Import this module explicitly to establish the\n * chain *before* React mounts — avoiding a first-paint layout jump — or for an\n * app that renders a full-pane root without `AppFrame`.\n */\n\nimport { injectBaseReset } from \"./internal/base-reset.js\";\n\ninjectBaseReset();\n\nexport { injectBaseReset };\n"]}

package/dist/ui/index.cjs

@@ -1,10 +1,9 @@
 'use strict';
 
+var chunkRX6XCLFF_cjs = require('../chunk-RX6XCLFF.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/ui/components/Avatar.tsx
-
 // src/ui/tokens.ts
 var tokens = {
   // ── Surfaces ──
@@ -166,16 +165,6 @@ function Badge({ tone = "neutral", style, children, ...rest }) {
     }
   );
 }
-
-// src/ui/internal/inject-style.ts
-function ensureStyle(id, css) {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(id)) return;
-  const style = document.createElement("style");
-  style.id = id;
-  style.textContent = css;
-  document.head.appendChild(style);
-}
 var STYLE_ID = "nb-synapse-button";
 var RULES = `
 .nb-btn {
@@ -223,7 +212,7 @@ function Button({
   children,
   ...rest
 }) {
-  ensureStyle(STYLE_ID, RULES);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID, RULES);
   const vars = {
     "--nb-btn-radius": tokens.radiusSm,
     "--nb-btn-font": tokens.fontSans,
@@ -253,7 +242,7 @@ function Button({
   return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: `nb-btn ${className ?? ""}`.trim(), style: btnStyle, ...rest, children });
 }
 function TextLink({ tone = "muted", style, className, children, ...rest }) {
-  ensureStyle(STYLE_ID, RULES);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID, RULES);
   const resting = tone === "danger" ? tokens.danger : tone === "default" ? tokens.fg : tokens.fgMuted;
   const hover = tone === "danger" ? tokens.danger : tokens.accent;
   const linkStyle = {
@@ -295,7 +284,7 @@ function Card({
   children,
   ...rest
 }) {
-  if (interactive) ensureStyle(STYLE_ID2, RULES2);
+  if (interactive) chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID2, RULES2);
   const cardStyle = {
     background: tokens.bgRaised,
     border: `${tokens.borderWidth} solid ${tokens.border}`,
@@ -353,7 +342,7 @@ function DrawerRoot({
   children,
   ...rest
 }) {
-  ensureStyle(STYLE_ID3, RULES3);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID3, RULES3);
   const dialogRef = react.useRef(null);
   const labelId = react.useId();
   const [hasTitle, setHasTitle] = react.useState(false);
@@ -672,7 +661,7 @@ function ListRow({
   className,
   ...rest
 }) {
-  ensureStyle(STYLE_ID4, RULES4);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID4, RULES4);
   const rowStyle = {
     "--nb-listrow-hover": tokens.bgSubtle,
     display: "grid",
@@ -812,7 +801,7 @@ var RULES5 = `
 .nb-prose strong { font-weight: ${tokens.weightSemibold}; }
 `;
 function Prose({ html, children, className, ...rest }) {
-  ensureStyle(STYLE_ID5, RULES5);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID5, RULES5);
   const cls = `nb-prose ${className ?? ""}`.trim();
   if (html !== void 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls, dangerouslySetInnerHTML: { __html: html }, ...rest });
@@ -850,7 +839,7 @@ function SearchField({
   type = "search",
   ...rest
 }) {
-  ensureStyle(STYLE_ID6, RULES6);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID6, RULES6);
   const fieldStyle = {
     "--nb-search-font": tokens.fontSans,
     "--nb-search-fg": tokens.fg,
@@ -909,7 +898,7 @@ function SegmentedControl({
   className,
   ...rest
 }) {
-  ensureStyle(STYLE_ID7, RULES7);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID7, RULES7);
   const trackStyle = {
     "--nb-seg-radius": tokens.radiusSm,
     "--nb-seg-track": tokens.bgSubtle,
@@ -945,7 +934,7 @@ var RULES8 = `
 @media (prefers-reduced-motion: reduce) { .nb-spinner { animation-duration: 1.6s; } }
 `;
 function Spinner({ size = 16, color, style, className, ...rest }) {
-  ensureStyle(STYLE_ID8, RULES8);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID8, RULES8);
   const spinnerStyle = {
     display: "inline-block",
     flexShrink: 0,
@@ -996,7 +985,7 @@ function StatusDot({
   className,
   ...rest
 }) {
-  ensureStyle(STYLE_ID9, KEYFRAMES);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID9, KEYFRAMES);
   const dotColor = color ?? COLOR[status];
   const working = status === "working";
   const dotStyle = {
@@ -1049,7 +1038,7 @@ function Table({
   className,
   ...rest
 }) {
-  ensureStyle(STYLE_ID10, RULES9);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID10, RULES9);
   const vars = {
     "--nb-table-font": tokens.fontSans,
     "--nb-table-fg": tokens.fg,
@@ -1103,6 +1092,7 @@ function columnStyle(width) {
   return width === "reading" ? { maxWidth: READING_MAX, marginInline: "auto", width: "100%" } : {};
 }
 function AppFrameRoot({ contentWidth = "full", style, children, ...rest }) {
+  chunkRX6XCLFF_cjs.injectBaseReset();
   return /* @__PURE__ */ jsxRuntime.jsx(ContentWidthCtx.Provider, { value: contentWidth, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1297,7 +1287,7 @@ function SidebarLayoutRoot({
 }
 function Sidebar({ style, children, ...rest }) {
   const { collapsed, mode, side, width, open, setOpen } = useSidebar();
-  ensureStyle(STYLE_ID11, RULES10);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID11, RULES10);
   if (!collapsed) {
     const border = `${tokens.borderWidth} solid ${tokens.border}`;
     return /* @__PURE__ */ jsxRuntime.jsx(