@x12i/fieldkit 1.0.0

package/dist/index.cjs

@@ -0,0 +1,662 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CheckIcon: () => CheckIcon,
+  ChevronDownIcon: () => ChevronDownIcon,
+  FieldKitProvider: () => FieldKitProvider,
+  FieldRenderer: () => FieldRenderer,
+  InfoIcon: () => InfoIcon,
+  QuestionIcon: () => QuestionIcon,
+  RecordView: () => RecordView,
+  TONE_PALETTE: () => TONE_PALETTE,
+  WarningIcon: () => WarningIcon,
+  defaultClassifySignal: () => defaultClassifySignal,
+  defaultTheme: () => defaultTheme,
+  hashTone: () => hashTone,
+  inferRule: () => inferRule,
+  labelFromKey: () => labelFromKey,
+  resolveField: () => resolveField,
+  toneHex: () => toneHex,
+  useFieldKitTheme: () => useFieldKitTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/theme.tsx
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var TONE_PALETTE = {
+  neutral: "#8B96A3",
+  amber: "#E8A33D",
+  rose: "#E2564F",
+  green: "#59B87B",
+  blue: "#6FA8DC",
+  violet: "#9B8CDB",
+  teal: "#4FB6A8"
+};
+var HASHABLE_TONES = ["amber", "rose", "green", "blue", "violet", "teal"];
+function hashTone(value) {
+  let h = 0;
+  for (let i = 0; i < value.length; i++) h = h * 31 + value.charCodeAt(i) >>> 0;
+  return HASHABLE_TONES[h % HASHABLE_TONES.length];
+}
+var defaultTheme = {
+  colors: {
+    background: "#0A0E13",
+    surface: "#10161D",
+    surfaceMuted: "#0D1218",
+    border: "rgba(255,255,255,0.07)",
+    textPrimary: "#F4F6F8",
+    textSecondary: "#C7CDD3",
+    textMuted: "#5B6672",
+    accent: "#4FB6A8"
+  },
+  fonts: {
+    heading: "'Space Grotesk', ui-sans-serif, sans-serif",
+    body: "'IBM Plex Sans', ui-sans-serif, sans-serif",
+    mono: "'IBM Plex Mono', ui-monospace, monospace"
+  },
+  radii: { sm: "5px", md: "8px", lg: "14px", pill: "999px" },
+  tonePalette: TONE_PALETTE
+};
+function mergeTheme(base2, override) {
+  if (!override) return base2;
+  return {
+    colors: { ...base2.colors, ...override.colors },
+    fonts: { ...base2.fonts, ...override.fonts },
+    radii: { ...base2.radii, ...override.radii },
+    tonePalette: { ...base2.tonePalette, ...override.tonePalette }
+  };
+}
+var ThemeContext = React.createContext(defaultTheme);
+function FieldKitProvider({ theme, children }) {
+  const parent = React.useContext(ThemeContext);
+  const merged = React.useMemo(() => mergeTheme(parent, theme), [parent, theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: merged, children });
+}
+function useFieldKitTheme() {
+  return React.useContext(ThemeContext);
+}
+function toneHex(theme, toneKey) {
+  var _a, _b;
+  if (!toneKey) return (_a = theme.tonePalette.neutral) != null ? _a : TONE_PALETTE.neutral;
+  return (_b = theme.tonePalette[toneKey]) != null ? _b : TONE_PALETTE.neutral;
+}
+
+// src/infer.ts
+function labelFromKey(key) {
+  const spaced = key.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/_/g, " ").toLowerCase();
+  return spaced.split(" ").filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+var defaultClassifySignal = (text) => {
+  const t = text.toLowerCase();
+  const flagged = t.includes("unresolved") || t.includes("unknown") || t.includes("missing");
+  return flagged ? "warn" : "info";
+};
+var ENUM_LIKE = /^[A-Z0-9]+(_[A-Z0-9]+)*$/;
+function inferRule(key, value) {
+  const label = labelFromKey(key);
+  const as = (() => {
+    if (value === null || value === void 0 || value === "") return "empty";
+    if (typeof value === "boolean") return "flag";
+    if (typeof value === "number") return "stat";
+    if (typeof value === "string") {
+      if (ENUM_LIKE.test(value)) return "pill";
+      if (value.length > 70 || /[.!?]\s/.test(value)) return "lead";
+      if (!value.includes(" ") && value.length > 12) return "mono";
+      return "text";
+    }
+    if (Array.isArray(value)) {
+      if (value.length === 0) return "empty";
+      if (value.every((v) => typeof v === "string")) {
+        if (value.every((v) => /\?\s*$/.test(v))) return "qa";
+        if (value.some((v) => v.split(" ").length > 6)) return "bullets";
+        return "tags";
+      }
+      return "json";
+    }
+    return "json";
+  })();
+  return { label, as };
+}
+
+// src/resolve.ts
+function resolveTone(value, toneMap) {
+  var _a;
+  return (_a = toneMap == null ? void 0 : toneMap[value]) != null ? _a : hashTone(value);
+}
+function resolveField(key, value, rule, options = {}) {
+  var _a, _b, _c;
+  const label = (_a = rule.label) != null ? _a : labelFromKey(key);
+  const classifySignal = (_b = options.classifySignal) != null ? _b : defaultClassifySignal;
+  const base2 = {
+    key,
+    label,
+    kind: rule.as,
+    isLeftover: (_c = options.isLeftover) != null ? _c : false
+  };
+  switch (rule.as) {
+    case "lead":
+      return { ...base2, text: String(value != null ? value : "") };
+    case "bullets":
+      return { ...base2, items: (value != null ? value : []).map((t) => ({ text: t })) };
+    case "signals":
+      return {
+        ...base2,
+        items: (value != null ? value : []).map((t) => {
+          const s = classifySignal(t);
+          return { text: t, warn: s === "warn", info: s === "info" };
+        })
+      };
+    case "qa":
+      return { ...base2, items: (value != null ? value : []).map((t) => ({ text: t })) };
+    case "pill": {
+      const raw = String(value != null ? value : "");
+      return { ...base2, pillText: labelFromKey(raw.toLowerCase()), toneKey: resolveTone(raw, options.toneMap) };
+    }
+    case "mono":
+      return { ...base2, value: String(value != null ? value : "") };
+    case "text":
+      return { ...base2, value: String(value != null ? value : "") };
+    case "flag":
+      return { ...base2, flagOn: !!value, flagText: value ? "Yes" : "No" };
+    case "stat":
+      return { ...base2, value: String(value != null ? value : "") };
+    case "tags":
+      return { ...base2, items: (value != null ? value : []).map((t) => ({ text: t })) };
+    case "empty":
+      return base2;
+    case "json":
+    default:
+      return { ...base2, kind: "json", value: JSON.stringify(value, null, 2) };
+  }
+}
+
+// src/icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var base = (size, color, style) => ({
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: color,
+  strokeWidth: 1.8,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  style
+});
+function CheckIcon({ size = 15, color = "currentColor", style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...base(size, color, style), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 12.3l2.6 2.6L16 9.3" })
+  ] });
+}
+function WarningIcon({ size = 15, color = "#E8A33D", style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...base(size, color, style), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 3 2 21h20L12 3z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 9.5v5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "17.2", r: "0.9", fill: color, stroke: "none" })
+  ] });
+}
+function InfoIcon({ size = 15, color = "#7C8894", style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...base(size, color, style), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "10.5", x2: "12", y2: "16.2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "7.6", r: "0.9", fill: color, stroke: "none" })
+  ] });
+}
+function QuestionIcon({ size = 15, color = "currentColor", style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...base(size, color, style), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9.5 9.3a2.5 2.5 0 1 1 3.5 2.3c-.9.5-1 1-1 1.9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "17", r: "0.9", fill: color, stroke: "none" })
+  ] });
+}
+function ChevronDownIcon({ size = 14, color = "currentColor", style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...base(size, color, style), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M6 9l6 6 6-6" }) });
+}
+
+// src/components/FieldRenderer.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function assertNever(x) {
+  throw new Error("Unhandled FieldKind: " + JSON.stringify(x));
+}
+function FieldRenderer({ field, variant = "compact", showLabel = true }) {
+  var _a, _b, _c, _d, _e;
+  const theme = useFieldKitTheme();
+  const isContent = variant === "content";
+  const labelNode = showLabel ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    {
+      style: {
+        fontFamily: theme.fonts.heading,
+        fontSize: isContent ? 11.5 : 10.5,
+        fontWeight: 600,
+        letterSpacing: "0.08em",
+        textTransform: "uppercase",
+        color: theme.colors.textMuted
+      },
+      children: field.label
+    }
+  ) : null;
+  let body;
+  switch (field.kind) {
+    case "lead":
+      body = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "p",
+        {
+          style: {
+            margin: 0,
+            fontSize: isContent ? 15 : 13,
+            lineHeight: 1.6,
+            color: isContent ? theme.colors.textSecondary : theme.colors.textMuted
+          },
+          children: field.text
+        }
+      );
+      break;
+    case "bullets":
+      body = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: isContent ? 10 : 6 }, children: (_a = field.items) == null ? void 0 : _a.map(
+        (item, i) => isContent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "flex-start" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { size: 15, color: theme.colors.accent, style: { flexShrink: 0, marginTop: 3 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 14, lineHeight: 1.55, color: theme.colors.textSecondary }, children: item.text })
+        ] }, i) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "flex-start" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: theme.colors.textMuted, fontSize: 13 }, children: "\u2013" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 13, lineHeight: 1.5, color: theme.colors.textMuted }, children: item.text })
+        ] }, i)
+      ) });
+      break;
+    case "signals":
+      body = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: isContent ? 8 : 6 }, children: (_b = field.items) == null ? void 0 : _b.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: 10,
+            alignItems: "flex-start",
+            background: theme.colors.surfaceMuted,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: isContent ? 8 : 6,
+            padding: isContent ? "12px 14px" : "8px 10px"
+          },
+          children: [
+            item.warn && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WarningIcon, { size: isContent ? 15 : 13, style: { flexShrink: 0, marginTop: 2 } }),
+            item.info && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InfoIcon, { size: isContent ? 15 : 13, style: { flexShrink: 0, marginTop: 2 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "span",
+              {
+                style: {
+                  fontSize: isContent ? 13.5 : 13,
+                  lineHeight: 1.55,
+                  color: isContent ? theme.colors.textSecondary : theme.colors.textMuted
+                },
+                children: item.text
+              }
+            )
+          ]
+        },
+        i
+      )) });
+      break;
+    case "qa":
+      body = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          style: isContent ? {
+            display: "flex",
+            flexDirection: "column",
+            gap: 12,
+            background: `${theme.colors.accent}12`,
+            border: `1px solid ${theme.colors.accent}33`,
+            borderRadius: 10,
+            padding: "14px 16px"
+          } : { display: "flex", flexDirection: "column", gap: 6 },
+          children: (_c = field.items) == null ? void 0 : _c.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: isContent ? 10 : 8, alignItems: "flex-start" }, children: [
+            isContent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(QuestionIcon, { size: 15, color: theme.colors.accent, style: { flexShrink: 0, marginTop: 2 } }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: theme.colors.accent, fontSize: 13, fontWeight: 600 }, children: "?" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "span",
+              {
+                style: {
+                  fontSize: isContent ? 14 : 13,
+                  lineHeight: 1.55,
+                  color: isContent ? theme.colors.textSecondary : theme.colors.textMuted
+                },
+                children: item.text
+              }
+            )
+          ] }, i))
+        }
+      );
+      break;
+    case "pill": {
+      const hex = toneHex(theme, field.toneKey);
+      body = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          style: {
+            alignSelf: "flex-start",
+            padding: "3px 9px",
+            borderRadius: theme.radii.sm,
+            fontSize: 11,
+            fontWeight: 600,
+            fontFamily: theme.fonts.heading,
+            textTransform: "uppercase",
+            background: `${hex}24`,
+            color: hex,
+            border: `1px solid ${hex}55`
+          },
+          children: field.pillText
+        }
+      );
+      break;
+    }
+    case "mono":
+      body = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontFamily: theme.fonts.mono, fontSize: isContent ? 13 : 12.5, color: theme.colors.textMuted }, children: field.value });
+      break;
+    case "text":
+      body = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          style: {
+            fontSize: isContent ? 14 : 13,
+            lineHeight: 1.55,
+            color: isContent ? theme.colors.textSecondary : theme.colors.textMuted
+          },
+          children: field.value
+        }
+      );
+      break;
+    case "flag": {
+      const hex = field.flagOn ? (_d = theme.tonePalette.green) != null ? _d : "#59B87B" : theme.colors.textMuted;
+      body = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          style: {
+            alignSelf: "flex-start",
+            padding: "3px 9px",
+            borderRadius: theme.radii.sm,
+            fontSize: 11,
+            fontWeight: 600,
+            fontFamily: theme.fonts.heading,
+            textTransform: "uppercase",
+            background: `${hex}24`,
+            color: hex,
+            border: `1px solid ${hex}55`
+          },
+          children: field.flagText
+        }
+      );
+      break;
+    }
+    case "stat":
+      body = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontFamily: theme.fonts.mono, fontSize: isContent ? 16 : 15, color: theme.colors.textSecondary }, children: field.value });
+      break;
+    case "tags":
+      body = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: (_e = field.items) == null ? void 0 : _e.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          style: {
+            background: theme.colors.surfaceMuted,
+            color: theme.colors.textMuted,
+            border: `1px solid ${theme.colors.border}`,
+            padding: "3px 9px",
+            borderRadius: theme.radii.sm,
+            fontSize: 11.5
+          },
+          children: item.text
+        },
+        i
+      )) });
+      break;
+    case "empty":
+      body = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 13, color: theme.colors.textMuted, opacity: 0.6 }, children: "\u2014 not provided \u2014" });
+      break;
+    case "json":
+      body = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "pre",
+        {
+          style: {
+            margin: 0,
+            fontFamily: theme.fonts.mono,
+            fontSize: 11.5,
+            color: theme.colors.textMuted,
+            whiteSpace: "pre-wrap",
+            background: theme.colors.background,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.radii.sm,
+            padding: "10px 12px"
+          },
+          children: field.value
+        }
+      );
+      break;
+    default:
+      return assertNever(field.kind);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: isContent ? 12 : 6 }, children: [
+    labelNode,
+    body
+  ] });
+}
+
+// src/components/RecordView.tsx
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function RecordView({
+  record,
+  fieldRules,
+  contentKeys,
+  diagnosticKeys,
+  identityKeys = [],
+  header,
+  banner,
+  classifySignal,
+  toneMap,
+  defaultDiagnosticsOpen = false,
+  diagnosticsLabel = "Diagnostics",
+  diagnosticsHint = "Every other field this record reports, curated and unmapped alike",
+  style
+}) {
+  var _a, _b, _c;
+  const theme = useFieldKitTheme();
+  const [open, setOpen] = React2.useState(defaultDiagnosticsOpen);
+  const contentFields = React2.useMemo(
+    () => contentKeys.map((key) => resolveField(key, record[key], fieldRules[key], { classifySignal, toneMap })),
+    [record, fieldRules, contentKeys, classifySignal, toneMap]
+  );
+  const diagnosticFields = React2.useMemo(
+    () => diagnosticKeys.map((key) => resolveField(key, record[key], fieldRules[key], { classifySignal, toneMap })),
+    [record, fieldRules, diagnosticKeys, classifySignal, toneMap]
+  );
+  const leftoverFields = React2.useMemo(() => {
+    const known = /* @__PURE__ */ new Set([...Object.keys(fieldRules), ...identityKeys]);
+    return Object.keys(record).filter((k) => !known.has(k)).map((k) => resolveField(k, record[k], inferRule(k, record[k]), { isLeftover: true, classifySignal, toneMap }));
+  }, [record, fieldRules, identityKeys, classifySignal, toneMap]);
+  const bannerContent = banner ? banner(record) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      style: {
+        background: theme.colors.surface,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.radii.lg,
+        padding: "36px 40px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 26,
+        fontFamily: theme.fonts.body,
+        color: theme.colors.textPrimary,
+        ...style
+      },
+      children: [
+        header == null ? void 0 : header(record),
+        bannerContent && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            style: {
+              background: `${(_a = theme.tonePalette.rose) != null ? _a : "#E2564F"}14`,
+              border: `1px solid ${(_b = theme.tonePalette.rose) != null ? _b : "#E2564F"}48`,
+              borderRadius: 10,
+              padding: "16px 18px",
+              display: "flex",
+              gap: 12,
+              alignItems: "flex-start"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WarningIcon, { size: 19, color: (_c = theme.tonePalette.rose) != null ? _c : "#E2564F", style: { flexShrink: 0, marginTop: 2 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 7 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontFamily: theme.fonts.heading, fontSize: 14, fontWeight: 600, color: theme.colors.textPrimary }, children: bannerContent.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: 13.5, lineHeight: 1.55, color: theme.colors.textSecondary }, children: bannerContent.body }),
+                bannerContent.tags && bannerContent.tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", gap: 6, marginTop: 2, flexWrap: "wrap" }, children: bannerContent.tags.map((t, i) => {
+                  var _a2, _b2, _c2;
+                  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "span",
+                    {
+                      style: {
+                        background: `${(_a2 = theme.tonePalette.rose) != null ? _a2 : "#E2564F"}24`,
+                        color: (_b2 = theme.tonePalette.rose) != null ? _b2 : "#E2564F",
+                        border: `1px solid ${(_c2 = theme.tonePalette.rose) != null ? _c2 : "#E2564F"}55`,
+                        padding: "3px 8px",
+                        borderRadius: 5,
+                        fontFamily: theme.fonts.heading,
+                        fontSize: 10.5,
+                        fontWeight: 600,
+                        letterSpacing: "0.04em",
+                        textTransform: "uppercase"
+                      },
+                      children: t
+                    },
+                    i
+                  );
+                }) })
+              ] })
+            ]
+          }
+        ),
+        contentFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldRenderer, { field, variant: "content" }, field.key)),
+        (diagnosticFields.length > 0 || leftoverFields.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: 1, background: theme.colors.border } }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "button",
+            {
+              onClick: () => setOpen((v) => !v),
+              style: {
+                all: "unset",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                boxSizing: "border-box"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontFamily: theme.fonts.heading, fontSize: 12.5, fontWeight: 600, letterSpacing: "0.04em", color: theme.colors.textSecondary }, children: diagnosticsLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: 11.5, color: theme.colors.textMuted }, children: diagnosticsHint })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: 12, color: theme.colors.textMuted }, children: open ? "Hide" : "Show" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    ChevronDownIcon,
+                    {
+                      size: 14,
+                      color: theme.colors.textMuted,
+                      style: { transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 120ms ease" }
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "div",
+            {
+              style: {
+                background: theme.colors.surfaceMuted,
+                border: `1px solid ${theme.colors.border}`,
+                borderRadius: theme.radii.md,
+                padding: "20px 22px",
+                display: "flex",
+                flexDirection: "column",
+                gap: 18
+              },
+              children: [
+                diagnosticFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: diagnosticFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldRenderer, { field, variant: "compact" }, field.key)) }),
+                leftoverFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: 1, borderTop: `1px dashed ${theme.colors.border}` } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: theme.fonts.heading,
+                          fontSize: 10.5,
+                          fontWeight: 600,
+                          letterSpacing: "0.08em",
+                          textTransform: "uppercase",
+                          color: theme.colors.textMuted
+                        },
+                        children: "Additional Fields"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: 11, color: theme.colors.textMuted, opacity: 0.7 }, children: "Not in fieldRules yet \u2014 rendered generically from each value's shape" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: leftoverFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldRenderer, { field, variant: "compact" }, field.key)) })
+                ] })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckIcon,
+  ChevronDownIcon,
+  FieldKitProvider,
+  FieldRenderer,
+  InfoIcon,
+  QuestionIcon,
+  RecordView,
+  TONE_PALETTE,
+  WarningIcon,
+  defaultClassifySignal,
+  defaultTheme,
+  hashTone,
+  inferRule,
+  labelFromKey,
+  resolveField,
+  toneHex,
+  useFieldKitTheme
+});
+//# sourceMappingURL=index.cjs.map