@mohasinac/appkit 4.14.0 → 4.15.0

package/dist/ui/components/RecordDetailModal.d.ts

@@ -60,9 +60,18 @@ export interface RecordDetailModalProps {
         heading: string;
         entries: RecordDetailItem[];
     };
+    /**
+     * Rich content rendered between `items` and `metadata` — a timeline rail, a
+     * chart, anything that is neither a scalar field nor a raw payload.
+     *
+     * `footer` cannot host this: that slot is an action-button row wrapped in
+     * `<Row justify="end">`, so a full-width block placed there is squeezed to
+     * the right and reads as a control.
+     */
+    extra?: ReactNode;
     /** Raw payload dump for records that carry an open-ended object. */
     metadata?: Record<string, JsonValue>;
     /** Action buttons rendered at the bottom (approve/reject/etc). */
     footer?: ReactNode;
 }
-export declare function RecordDetailModal({ isOpen, onClose, title, badges, description, fields, items, metadata, footer, }: RecordDetailModalProps): import("react").JSX.Element;
+export declare function RecordDetailModal({ isOpen, onClose, title, badges, description, fields, items, extra, metadata, footer, }: RecordDetailModalProps): import("react").JSX.Element;

package/dist/ui/components/RecordDetailModal.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Anchor, Badge, Code, Div, Modal, Row, Stack, Text } from "../index";
 import { MediaImage } from "../../features/media/MediaImage";
-export function RecordDetailModal({ isOpen, onClose, title, badges, description, fields, items, metadata, footer, }) {
+export function RecordDetailModal({ isOpen, onClose, title, badges, description, fields, items, extra, metadata, footer, }) {
     const hasMetadata = Boolean(metadata && Object.keys(metadata).length > 0);
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: title, children: _jsxs(Stack, { gap: "md", children: [badges && badges.length > 0 && (_jsx(Row, { gap: "sm", align: "center", wrap: true, children: badges.map((b) => (_jsx(Badge, { variant: b.variant ?? "default", children: b.label }, b.label))) })), description && (_jsx(Div, { rounded: "lg", padding: "sm", surface: "muted", border: "default", children: _jsx(Text, { size: "sm", children: description }) })), fields && fields.length > 0 && (_jsx(Stack, { gap: "xs", children: fields.map((f) => (_jsxs(Row, { justify: "between", gap: "md", children: [_jsx(Text, { size: "sm", color: "muted", children: f.label }), _jsx(Text, { size: "sm", weight: "medium", className: "text-right", children: f.value })] }, f.label))) })), items && items.entries.length > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "xs", weight: "semibold", color: "muted", children: [items.heading, " (", items.entries.length, ")"] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: items.entries.map((entry, i) => (_jsxs(Row, { gap: "sm", align: "center", justify: "between", paddingY: "y-xs-tall", padding: "x-sm", children: [_jsxs(Row, { gap: "sm", align: "center", className: "min-w-0", children: [_jsx(Div, { className: "h-10 w-10 shrink-0", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: entry.image, alt: entry.title, size: "thumbnail" }) }), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [entry.href ? (_jsx(Anchor, { href: entry.href, tone: "brand", size: "sm", weight: "medium", children: entry.title })) : (_jsx(Text, { size: "sm", weight: "medium", className: "truncate", children: entry.title })), entry.subtitle && (_jsx(Text, { size: "xs", color: "muted", children: entry.subtitle }))] })] }), entry.trailing && (_jsx(Text, { size: "sm", weight: "medium", className: "shrink-0", children: entry.trailing }))] }, `${entry.title}-${i}`))) })] })), hasMetadata && (_jsxs(Div, { rounded: "lg", padding: "sm", surface: "muted", border: "default", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", className: "mb-1", children: "Details" }), _jsx(Code, { size: "xs", className: "block whitespace-pre-wrap font-mono", children: JSON.stringify(metadata, null, 2) })] })), footer && _jsx(Row, { justify: "end", gap: "sm", children: footer })] }) }));
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: title, children: _jsxs(Stack, { gap: "md", children: [badges && badges.length > 0 && (_jsx(Row, { gap: "sm", align: "center", wrap: true, children: badges.map((b) => (_jsx(Badge, { variant: b.variant ?? "default", children: b.label }, b.label))) })), description && (_jsx(Div, { rounded: "lg", padding: "sm", surface: "muted", border: "default", children: _jsx(Text, { size: "sm", children: description }) })), fields && fields.length > 0 && (_jsx(Stack, { gap: "xs", children: fields.map((f) => (_jsxs(Row, { justify: "between", gap: "md", children: [_jsx(Text, { size: "sm", color: "muted", children: f.label }), _jsx(Text, { size: "sm", weight: "medium", className: "text-right", children: f.value })] }, f.label))) })), items && items.entries.length > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "xs", weight: "semibold", color: "muted", children: [items.heading, " (", items.entries.length, ")"] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: items.entries.map((entry, i) => (_jsxs(Row, { gap: "sm", align: "center", justify: "between", paddingY: "y-xs-tall", padding: "x-sm", children: [_jsxs(Row, { gap: "sm", align: "center", className: "min-w-0", children: [_jsx(Div, { className: "h-10 w-10 shrink-0", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: entry.image, alt: entry.title, size: "thumbnail" }) }), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [entry.href ? (_jsx(Anchor, { href: entry.href, tone: "brand", size: "sm", weight: "medium", children: entry.title })) : (_jsx(Text, { size: "sm", weight: "medium", className: "truncate", children: entry.title })), entry.subtitle && (_jsx(Text, { size: "xs", color: "muted", children: entry.subtitle }))] })] }), entry.trailing && (_jsx(Text, { size: "sm", weight: "medium", className: "shrink-0", children: entry.trailing }))] }, `${entry.title}-${i}`))) })] })), extra, hasMetadata && (_jsxs(Div, { rounded: "lg", padding: "sm", surface: "muted", border: "default", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", className: "mb-1", children: "Details" }), _jsx(Code, { size: "xs", className: "block whitespace-pre-wrap font-mono", children: JSON.stringify(metadata, null, 2) })] })), footer && _jsx(Row, { justify: "end", gap: "sm", children: footer })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.14.0",
+  "version": "4.15.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -128,6 +128,7 @@
     "scripts/init-config.mjs",
     "scripts/labels-extract.mjs",
     "scripts/seed-cli.mjs",
+    "scripts/node-esm-loader.mjs",
     "scripts/seed-cli-loader.mjs",
     "scripts/dedupe-peer-deps.mjs",
     "scripts/copy-assets.mjs",

package/scripts/node-esm-loader.mjs

@@ -0,0 +1,65 @@
+/**
+ * ESM resolver hook — makes `import("@mohasinac/appkit")` work from ANY
+ * standalone Node script.
+ *
+ * appkit is `"type": "module"` built by plain `tsc`, and tsc does not rewrite
+ * import specifiers — so all ~2,190 emitted `.js` files carry bare relative
+ * imports with no `.js` extension. Bundlers (Next/Turbopack, tsup, vite)
+ * resolve those happily; Node's ESM resolver refuses them outright. This hook
+ * retries with `.js` and then `/index.js` on ERR_MODULE_NOT_FOUND, and stubs
+ * the two other things that make a raw Node import of appkit explode.
+ *
+ * Registered by:
+ *   - `appkit/scripts/seed-cli.mjs`      (the appkit-seed CLI)
+ *   - `scripts/qa/roundtrip-diff.mjs`    (the schema field-loss gate)
+ *
+ * **Renamed from `seed-cli-loader.mjs`** — it was never seed-specific, and
+ * that name was why a later session diagnosed the same ESM failure from
+ * scratch and concluded the fix was to rewrite every specifier at build time.
+ * It is not: it is this file, registered in three lines. `seed-cli-loader.mjs`
+ * remains as a re-export so any pinned path keeps working.
+ */
+
+// Stub out non-JS asset imports (CSS, etc.) — appkit's dist contains
+// `import "./foo.css"` side-effect statements that Node ESM can't load.
+const STUB_EXTENSIONS = [".css", ".scss", ".sass", ".png", ".jpg", ".jpeg", ".svg", ".webp", ".gif"];
+
+// server-only / client-only are Next.js-specific sentinel packages — their
+// entire module body unconditionally throws, because their whole purpose is
+// a Next.js-compiler-time + Next.js-runtime guard against importing a
+// server-only (or client-only) module from the wrong side of the boundary.
+// A raw Node script (this CLI) is neither a Next.js Server Component nor a
+// Client Component, so the guard is meaningless here — the main
+// @mohasinac/appkit barrel transitively reaches a module (e.g.
+// features/contact/email.tsx) that imports "server-only" at the top level,
+// which crashes the whole CLI on load. Stub both to a no-op module. Found
+// 2026-08-17 debugging the CLI seed tool being unable to import appkit at all.
+const SENTINEL_SPECIFIERS = new Set(["server-only", "client-only"]);
+
+export async function load(url, context, nextLoad) {
+  if (STUB_EXTENSIONS.some((ext) => url.endsWith(ext))) {
+    return { format: "module", shortCircuit: true, source: "export default undefined;" };
+  }
+  return nextLoad(url, context);
+}
+
+export async function resolve(specifier, context, nextResolve) {
+  if (SENTINEL_SPECIFIERS.has(specifier)) {
+    return { url: `data:text/javascript,export default undefined;`, shortCircuit: true };
+  }
+  try {
+    return await nextResolve(specifier, context);
+  } catch (err) {
+    if (err?.code !== "ERR_MODULE_NOT_FOUND" && err?.code !== "ERR_UNSUPPORTED_DIR_IMPORT") throw err;
+    if (specifier.endsWith(".js") || specifier.endsWith(".mjs") || specifier.endsWith(".cjs")) throw err;
+    // Try with .js suffix (most common case)
+    try {
+      return await nextResolve(`${specifier}.js`, context);
+    } catch {}
+    // Try as a directory index
+    try {
+      return await nextResolve(`${specifier}/index.js`, context);
+    } catch {}
+    throw err;
+  }
+}

package/scripts/seed-cli-loader.mjs

@@ -1,52 +1,9 @@
 /**
- * ESM resolver hook for seed-cli.mjs.
+ * Back-compat shim. The real implementation is `node-esm-loader.mjs`.
  *
- * appkit's dist emits bare relative imports without `.js` extensions
- * (TS build is bundler-target, not Node). Node ESM is strict and refuses
- * them. This hook tries appending `.js` and `/index.js` when a resolution
- * fails with ERR_MODULE_NOT_FOUND.
+ * The hook was never seed-specific — it makes a bare `import("@mohasinac/appkit")`
+ * resolve from any standalone Node script — so it was renamed. This file stays
+ * so a pinned path (a published tarball, a script outside this repo) keeps
+ * working. Register `node-esm-loader.mjs` directly in anything new.
  */
-
-// Stub out non-JS asset imports (CSS, etc.) — appkit's dist contains
-// `import "./foo.css"` side-effect statements that Node ESM can't load.
-const STUB_EXTENSIONS = [".css", ".scss", ".sass", ".png", ".jpg", ".jpeg", ".svg", ".webp", ".gif"];
-
-// server-only / client-only are Next.js-specific sentinel packages — their
-// entire module body unconditionally throws, because their whole purpose is
-// a Next.js-compiler-time + Next.js-runtime guard against importing a
-// server-only (or client-only) module from the wrong side of the boundary.
-// A raw Node script (this CLI) is neither a Next.js Server Component nor a
-// Client Component, so the guard is meaningless here — the main
-// @mohasinac/appkit barrel transitively reaches a module (e.g.
-// features/contact/email.tsx) that imports "server-only" at the top level,
-// which crashes the whole CLI on load. Stub both to a no-op module. Found
-// 2026-08-17 debugging the CLI seed tool being unable to import appkit at all.
-const SENTINEL_SPECIFIERS = new Set(["server-only", "client-only"]);
-
-export async function load(url, context, nextLoad) {
-  if (STUB_EXTENSIONS.some((ext) => url.endsWith(ext))) {
-    return { format: "module", shortCircuit: true, source: "export default undefined;" };
-  }
-  return nextLoad(url, context);
-}
-
-export async function resolve(specifier, context, nextResolve) {
-  if (SENTINEL_SPECIFIERS.has(specifier)) {
-    return { url: `data:text/javascript,export default undefined;`, shortCircuit: true };
-  }
-  try {
-    return await nextResolve(specifier, context);
-  } catch (err) {
-    if (err?.code !== "ERR_MODULE_NOT_FOUND" && err?.code !== "ERR_UNSUPPORTED_DIR_IMPORT") throw err;
-    if (specifier.endsWith(".js") || specifier.endsWith(".mjs") || specifier.endsWith(".cjs")) throw err;
-    // Try with .js suffix (most common case)
-    try {
-      return await nextResolve(`${specifier}.js`, context);
-    } catch {}
-    // Try as a directory index
-    try {
-      return await nextResolve(`${specifier}/index.js`, context);
-    } catch {}
-    throw err;
-  }
-}
+export { load, resolve } from "./node-esm-loader.mjs";

package/scripts/seed-cli.mjs

@@ -34,7 +34,7 @@ import readline from "node:readline";
 // Register an ESM resolver hook that retries with `.js` / `/index.js` when
 // appkit's bundler-target dist emits extension-less relative imports.
 const __dirname = dirname(fileURLToPath(import.meta.url));
-register("./seed-cli-loader.mjs", pathToFileURL(__dirname + "/"));
+register("./node-esm-loader.mjs", pathToFileURL(__dirname + "/"));
 
 // ---------------------------------------------------------------------------
 // CLI parsing — entry point detects bin name so the same script powers