@atom63/resume 0.1.0

package/dist/editor/index.css

@@ -0,0 +1,225 @@
+/* src/styles/tokens.css */
+[data-resume-document] {
+  --paper-width: 8.5in;
+  --paper-height: 11in;
+  --paper-pad-x: 0.7in;
+  --paper-pad-y: 0.6in;
+  --paper-gap: 32px;
+  --doc-meta-col: 11rem;
+  --doc-resume-cols: 1fr 2fr;
+  --doc-col-gap: 0.75rem;
+  --doc-col-pad: 1.5rem;
+  --doc-block-gap: 0.375rem;
+  --doc-section-gap: 0.5rem;
+  --doc-group-gap: 0.125rem;
+  --doc-text: 10px;
+  --doc-text-xs: 8px;
+  --doc-leading: 1.4;
+  --doc-leading-heading: 1.5;
+  --doc-ink: #000;
+  --doc-ink-body: #404040;
+  --doc-ink-muted: #737373;
+  --doc-ink-faint: #a3a3a3;
+  --doc-rule: #d4d4d4;
+}
+
+/* src/styles/document.css */
+.doc-meta-grid {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: var(--doc-meta-col) minmax(0, 1fr);
+  gap: var(--doc-col-gap);
+}
+.doc-resume-grid {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: var(--doc-resume-cols);
+}
+.doc-col {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--doc-block-gap);
+}
+.doc-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--doc-group-gap);
+}
+.doc-section {
+  margin-top: var(--doc-section-gap);
+}
+.doc-body {
+  font-size: var(--doc-text);
+  line-height: var(--doc-leading);
+  color: var(--doc-ink-body);
+  overflow-wrap: break-word;
+}
+.doc-meta {
+  font-size: var(--doc-text);
+  line-height: var(--doc-leading);
+  color: var(--doc-ink-muted);
+}
+.doc-heading {
+  font-size: var(--doc-text);
+  line-height: var(--doc-leading-heading);
+  color: var(--doc-ink);
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.doc-title {
+  font-size: var(--doc-text);
+  line-height: 1;
+  color: var(--doc-ink);
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.doc-subheading {
+  font-size: var(--doc-text);
+  line-height: 1;
+  color: var(--doc-ink);
+  font-weight: 600;
+}
+.doc-strong {
+  color: var(--doc-ink);
+  font-weight: 600;
+}
+.doc-link {
+  color: var(--doc-ink-body);
+  text-decoration: underline;
+  touch-action: manipulation;
+}
+.doc-rule {
+  margin: 0.25rem 0;
+  border-bottom: 1px solid var(--doc-rule);
+}
+.doc-footer {
+  font-size: var(--doc-text-xs);
+  color: var(--doc-ink-faint);
+  margin-top: auto;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+.doc-footer a {
+  color: inherit;
+}
+.doc-header {
+  margin-bottom: 0.75rem;
+}
+.doc-header-col {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.doc-header-left {
+  padding-right: var(--doc-col-pad);
+}
+.doc-header-right {
+  padding-left: var(--doc-col-pad);
+}
+.doc-header-right > p + p {
+  margin-top: 0.125rem;
+}
+.doc-links {
+  margin-top: 0.75rem;
+}
+.doc-links > p {
+  margin-top: 0;
+  color: var(--doc-ink-muted);
+}
+.doc-links a {
+  color: inherit;
+}
+.doc-links em {
+  color: var(--doc-ink-faint);
+}
+.doc-entry-body {
+  min-width: 0;
+}
+.doc-col-sidebar {
+  grid-column-start: 1;
+  grid-row-start: 1;
+  padding-right: var(--doc-col-pad);
+}
+.doc-col-main {
+  grid-column-start: 2;
+  grid-row-start: 1;
+  padding-left: var(--doc-col-pad);
+}
+.doc-list {
+  list-style: disc;
+  padding-left: 0.75rem;
+}
+.doc-em {
+  font-style: normal;
+}
+.doc-hr {
+  margin: 0.75rem 0;
+}
+.doc-pages {
+  display: flex;
+  flex-direction: column;
+}
+.doc-page {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  color: #000;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+/* src/editor/editor.css */
+.resume-editor {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+.resume-editor-pane {
+  flex: 1 1 50%;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+.resume-editor-source {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  resize: none;
+  border: none;
+  outline: none;
+  padding: 1rem;
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    monospace;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  tab-size: 2;
+}
+.resume-editor-preview {
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+.resume-mdx-live-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 2rem;
+  font-size: 0.875rem;
+  opacity: 0.6;
+}
+.resume-mdx-live-error {
+  padding: 1rem;
+  font-size: 0.875rem;
+  color: #b00020;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/editor/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/styles/tokens.css","../../src/styles/document.css","../../src/editor/editor.css"],"sourcesContent":["/*\n * @atom63/resume — paper/document design tokens.\n *\n * The single source of truth for the resume/CV look. Override any token (e.g.\n * in your own stylesheet, scoped to [data-resume-document]) to restyle the\n * resume and CV together; the React primitives only compose these.\n *\n *   --paper-* : page geometry (defaults: US Letter @ 96dpi; override for A4).\n *   --doc-*   : document language (layout, type, ink).\n *\n * Print-fixed by design: doc sizes are absolute px for PDF fidelity, independent\n * of any host typography-scale setting. The font *family* is inherited (so the\n * document follows the host font), which is why pagination re-measures on font\n * change.\n *\n * NOTE: the numeric --paper-* defaults and --doc-block-gap MUST stay in sync with\n * geometry.ts (the JS packer reads the same numbers to compute page breaks).\n */\n[data-resume-document] {\n  /* Page geometry (US Letter @ 96dpi — see geometry.ts) */\n  --paper-width: 8.5in;\n  --paper-height: 11in;\n  --paper-pad-x: 0.7in;\n  --paper-pad-y: 0.6in;\n  --paper-gap: 32px; /* screen-only gap between page frames */\n\n  /* Document layout */\n  --doc-meta-col: 11rem; /* left meta/label column (header name, section label, year|role) */\n  --doc-resume-cols: 1fr 2fr; /* resume sidebar | main split */\n  --doc-col-gap: 0.75rem; /* gap between the meta column and content */\n  --doc-col-pad: 1.5rem; /* resume two-column inner gutter */\n  --doc-block-gap: 0.375rem; /* between blocks within a column (== BLOCK_GAP_PX) */\n  --doc-section-gap: 0.5rem; /* space above a section */\n  --doc-group-gap: 0.125rem; /* within a tight group (title + meta line) */\n\n  /* Type */\n  --doc-text: 10px;\n  --doc-text-xs: 8px;\n  --doc-leading: 1.4;\n  --doc-leading-heading: 1.5;\n\n  /* Ink (on the white page) */\n  --doc-ink: #000; /* headings, strong */\n  --doc-ink-body: #404040; /* body copy (neutral-700) */\n  --doc-ink-muted: #737373; /* meta / labels (neutral-500) */\n  --doc-ink-faint: #a3a3a3; /* footer, faint detail (neutral-400) */\n  --doc-rule: #d4d4d4; /* dividers (neutral-300) */\n}\n","/*\n * Resume & CV document layout + type primitives. These classes only COMPOSE the\n * design tokens — the token vocabulary itself (the paper and doc custom\n * properties) lives in tokens.css (imported separately, or together via\n * styles.css). Keep this file token-free so consumers can adopt just the tokens,\n * or restyle without forking these classes.\n */\n\n/* Layout primitives */\n.doc-meta-grid {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: var(--doc-meta-col) minmax(0, 1fr);\n  gap: var(--doc-col-gap);\n}\n.doc-resume-grid {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: var(--doc-resume-cols);\n}\n.doc-col {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--doc-block-gap);\n}\n.doc-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--doc-group-gap);\n}\n.doc-section {\n  margin-top: var(--doc-section-gap);\n}\n\n/* Type primitives */\n.doc-body {\n  font-size: var(--doc-text);\n  line-height: var(--doc-leading);\n  color: var(--doc-ink-body);\n  overflow-wrap: break-word;\n}\n.doc-meta {\n  font-size: var(--doc-text);\n  line-height: var(--doc-leading);\n  color: var(--doc-ink-muted);\n}\n.doc-heading {\n  font-size: var(--doc-text);\n  line-height: var(--doc-leading-heading);\n  color: var(--doc-ink);\n  font-weight: 700;\n  text-transform: uppercase;\n}\n.doc-title {\n  font-size: var(--doc-text);\n  line-height: 1;\n  color: var(--doc-ink);\n  font-weight: 700;\n  text-transform: uppercase;\n}\n.doc-subheading {\n  font-size: var(--doc-text);\n  line-height: 1;\n  color: var(--doc-ink);\n  font-weight: 600;\n}\n.doc-strong {\n  color: var(--doc-ink);\n  font-weight: 600;\n}\n.doc-link {\n  color: var(--doc-ink-body);\n  text-decoration: underline;\n  /* touch-manipulation equivalent for links */\n  touch-action: manipulation;\n}\n.doc-rule {\n  margin: 0.25rem 0;\n  border-bottom: 1px solid var(--doc-rule);\n}\n.doc-footer {\n  font-size: var(--doc-text-xs);\n  color: var(--doc-ink-faint);\n  /* Layout (replacing Tailwind utilities) */\n  margin-top: auto;\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n}\n.doc-footer a {\n  color: inherit;\n}\n\n/* Header / layout helpers (replacing Tailwind utilities) */\n.doc-header {\n  margin-bottom: 0.75rem;\n}\n.doc-header-col {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.doc-header-left {\n  padding-right: var(--doc-col-pad);\n}\n.doc-header-right {\n  padding-left: var(--doc-col-pad);\n}\n.doc-header-right > p + p {\n  margin-top: 0.125rem;\n}\n\n.doc-links {\n  margin-top: 0.75rem;\n}\n.doc-links > p {\n  margin-top: 0;\n  color: var(--doc-ink-muted);\n}\n.doc-links a {\n  color: inherit;\n}\n.doc-links em {\n  color: var(--doc-ink-faint);\n}\n\n.doc-entry-body {\n  min-width: 0;\n}\n\n/* Two-column grid placement (sidebar | main), used on every page incl. continuations */\n.doc-col-sidebar {\n  grid-column-start: 1;\n  grid-row-start: 1;\n  padding-right: var(--doc-col-pad);\n}\n.doc-col-main {\n  grid-column-start: 2;\n  grid-row-start: 1;\n  padding-left: var(--doc-col-pad);\n}\n\n.doc-list {\n  list-style: disc;\n  padding-left: 0.75rem;\n}\n.doc-em {\n  font-style: normal;\n}\n.doc-hr {\n  margin: 0.75rem 0;\n}\n\n/* Page frame (Tailwind shadow-lg + bg-white + text-black + flex column) */\n.doc-pages {\n  display: flex;\n  flex-direction: column;\n}\n.doc-page {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  background: #fff;\n  color: #000;\n  box-shadow:\n    0 10px 15px -3px rgb(0 0 0 / 0.1),\n    0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n","/* packages/resume/src/editor/editor.css\n   Minimal, Tailwind-free layout for the split-pane resume editor. */\n\n.resume-editor {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n\n.resume-editor-pane {\n  flex: 1 1 50%;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n}\n\n.resume-editor-source {\n  display: block;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  resize: none;\n  border: none;\n  outline: none;\n  padding: 1rem;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  tab-size: 2;\n}\n\n.resume-editor-preview {\n  border-left: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.resume-mdx-live-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 2rem;\n  font-size: 0.875rem;\n  opacity: 0.6;\n}\n\n.resume-mdx-live-error {\n  padding: 1rem;\n  font-size: 0.875rem;\n  color: #b00020;\n}\n"],"mappings":"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","names":[]}

package/dist/editor/index.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentType } from 'react';
+
+interface MdxLivePreviewProps {
+    source: string;
+    components: Record<string, unknown>;
+    onError?: (error: Error | null) => void;
+}
+/**
+ * Renders runtime-compiled MDX inside the given component scope, isolating
+ * runtime throws in an error boundary. Compile errors are surfaced via onError
+ * while the last good render stays on screen.
+ */
+declare function MdxLivePreview({ source, components, onError }: MdxLivePreviewProps): react_jsx_runtime.JSX.Element;
+
+interface ResumeEditorProps {
+    /** Current MDX source. */
+    source: string;
+    /** Called when the user edits the source. */
+    onChange: (next: string) => void;
+    /** Compile-error callback. */
+    onError?: (error: Error) => void;
+    /** Optional reset handler (host decides what reset means). */
+    onReset?: () => void;
+    /** Override the MDX component map; defaults to resumeMdxComponents. */
+    components?: Record<string, ComponentType<unknown>>;
+}
+/**
+ * Host-agnostic, controlled split-pane MDX editor for resumes: a source
+ * textarea on the left and a live, paginated preview on the right. Carries no
+ * OS63 chrome — the host owns the surrounding shell.
+ */
+declare function ResumeEditor({ source, onChange, onError, components }: ResumeEditorProps): react_jsx_runtime.JSX.Element;
+
+export { MdxLivePreview, ResumeEditor, type ResumeEditorProps };

package/dist/editor/index.js

@@ -0,0 +1,127 @@
+import { resumeMdxComponents } from '../chunk-FL25EF7U.js';
+import { MDXProvider } from '@mdx-js/react';
+import { useEffect, useState, useRef, Component } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var evaluatePromise = null;
+function loadEvaluate() {
+  if (!evaluatePromise) {
+    evaluatePromise = import('@mdx-js/mdx').then((m) => m.evaluate);
+  }
+  return evaluatePromise;
+}
+async function compileMdx(source) {
+  const [evaluate, runtime, mdxReact] = await Promise.all([
+    loadEvaluate(),
+    import('react/jsx-runtime'),
+    import('@mdx-js/react')
+  ]);
+  const mod = await evaluate(source, {
+    ...runtime,
+    useMDXComponents: mdxReact.useMDXComponents,
+    baseUrl: import.meta.url
+  });
+  return mod.default;
+}
+function useMdxRuntime(source, debounceMs = 300) {
+  const [state, setState] = useState({
+    Component: null,
+    error: null,
+    status: "idle"
+  });
+  const lastGood = useRef(null);
+  const reqId = useRef(0);
+  useEffect(() => {
+    const trimmed = source.trim();
+    if (!trimmed) {
+      setState({ Component: null, error: null, status: "idle" });
+      return;
+    }
+    const id = ++reqId.current;
+    setState((s) => ({ ...s, status: "compiling" }));
+    const timer = setTimeout(() => {
+      compileMdx(trimmed).then((Component) => {
+        if (id !== reqId.current) return;
+        lastGood.current = Component;
+        setState({ Component, error: null, status: "ready" });
+      }).catch((e) => {
+        if (id !== reqId.current) return;
+        setState({
+          Component: lastGood.current,
+          error: e instanceof Error ? e : new Error(String(e)),
+          status: "error"
+        });
+      });
+    }, debounceMs);
+    return () => clearTimeout(timer);
+  }, [source, debounceMs]);
+  return state;
+}
+var MdxErrorBoundary = class extends Component {
+  state = { err: null };
+  static getDerivedStateFromError(err) {
+    return { err };
+  }
+  componentDidUpdate(prev) {
+    if (prev.resetKey !== this.props.resetKey && this.state.err) {
+      this.setState({ err: null });
+    }
+  }
+  render() {
+    return this.state.err ? this.props.fallback(this.state.err) : this.props.children;
+  }
+};
+function MdxLivePreview({ source, components, onError }) {
+  const { Component, error } = useMdxRuntime(source);
+  useEffect(() => {
+    onError?.(error);
+  }, [error]);
+  if (!Component) {
+    return /* @__PURE__ */ jsx("div", { className: "resume-mdx-live-empty", children: "Start typing MDX\u2026" });
+  }
+  return /* @__PURE__ */ jsx(
+    MdxErrorBoundary,
+    {
+      fallback: (e) => /* @__PURE__ */ jsxs("div", { className: "resume-mdx-live-error", children: [
+        "Runtime error: ",
+        e.message
+      ] }),
+      resetKey: source,
+      children: /* @__PURE__ */ jsx(MDXProvider, { components, children: /* @__PURE__ */ jsx(Component, {}) })
+    }
+  );
+}
+function ensureResumeDocument(source) {
+  return source.includes("<ResumeDocument>") ? source : `<ResumeDocument>
+
+${source.trim()}
+
+</ResumeDocument>`;
+}
+function ResumeEditor({ source, onChange, onError, components }) {
+  const map = components ?? resumeMdxComponents;
+  return /* @__PURE__ */ jsxs("div", { className: "resume-editor", children: [
+    /* @__PURE__ */ jsx("div", { className: "resume-editor-pane", children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: "resume-editor-source",
+        value: source,
+        onChange: (e) => onChange(e.target.value),
+        spellCheck: false,
+        "aria-label": "Resume MDX source"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "resume-editor-pane resume-editor-preview", children: /* @__PURE__ */ jsx(
+      MdxLivePreview,
+      {
+        source: ensureResumeDocument(source),
+        components: map,
+        onError: onError ? (e) => onError(e ?? new Error("MDX compile error")) : void 0
+      }
+    ) })
+  ] });
+}
+
+export { MdxLivePreview, ResumeEditor };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/editor/mdx-live-preview.tsx","../../src/editor/resume-editor.tsx"],"names":["ReactComponent","jsxs","jsx"],"mappings":"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","file":"index.js","sourcesContent":["// packages/resume/src/editor/mdx-live-preview.tsx\n//\n// Vendored from @atom63/mdx's MdxLivePreview (+ its useMdxRuntime helper),\n// with all @atom63/* imports stripped. Depends only on react, @mdx-js/mdx,\n// and @mdx-js/react — all already declared as resume package dependencies.\nimport { MDXProvider } from '@mdx-js/react'\nimport type { ComponentType, ReactNode } from 'react'\nimport { Component as ReactComponent, useEffect, useRef, useState } from 'react'\n\ntype MdxComponent = ComponentType<{ components?: Record<string, unknown> }>\n\n// biome-ignore lint/suspicious/noExplicitAny: @mdx-js/mdx evaluate is loaded dynamically\nlet evaluatePromise: Promise<any> | null = null\nfunction loadEvaluate() {\n  if (!evaluatePromise) {\n    evaluatePromise = import('@mdx-js/mdx').then(m => m.evaluate)\n  }\n  return evaluatePromise\n}\n\n/**\n * Compile an MDX string to a React component at runtime. Lazy-loads the MDX\n * compiler so it never enters the base bundle. The returned component renders\n * inside an `<MDXProvider>` (or accepts a `components` prop) for scope.\n */\nasync function compileMdx(source: string): Promise<MdxComponent> {\n  const [evaluate, runtime, mdxReact] = await Promise.all([\n    loadEvaluate(),\n    import('react/jsx-runtime'),\n    import('@mdx-js/react'),\n  ])\n  const mod = await evaluate(source, {\n    ...(runtime as Record<string, unknown>),\n    useMDXComponents: mdxReact.useMDXComponents,\n    baseUrl: import.meta.url,\n  })\n  return mod.default as MdxComponent\n}\n\ninterface MdxRuntimeResult {\n  Component: MdxComponent | null\n  error: Error | null\n  status: 'idle' | 'compiling' | 'ready' | 'error'\n}\n\n/**\n * Debounced runtime compile of an MDX string. Keeps the last successfully\n * compiled component while compiling and on error, so a transient typo never\n * blanks the preview.\n */\nfunction useMdxRuntime(source: string, debounceMs = 300): MdxRuntimeResult {\n  const [state, setState] = useState<MdxRuntimeResult>({\n    Component: null,\n    error: null,\n    status: 'idle',\n  })\n  const lastGood = useRef<MdxComponent | null>(null)\n  const reqId = useRef(0)\n\n  useEffect(() => {\n    const trimmed = source.trim()\n    if (!trimmed) {\n      setState({ Component: null, error: null, status: 'idle' })\n      return\n    }\n    const id = ++reqId.current\n    setState(s => ({ ...s, status: 'compiling' }))\n    const timer = setTimeout(() => {\n      compileMdx(trimmed)\n        .then(Component => {\n          if (id !== reqId.current) return\n          lastGood.current = Component\n          setState({ Component, error: null, status: 'ready' })\n        })\n        .catch((e: unknown) => {\n          if (id !== reqId.current) return\n          setState({\n            Component: lastGood.current,\n            error: e instanceof Error ? e : new Error(String(e)),\n            status: 'error',\n          })\n        })\n    }, debounceMs)\n    return () => clearTimeout(timer)\n  }, [source, debounceMs])\n\n  return state\n}\n\nclass MdxErrorBoundary extends ReactComponent<\n  { children: ReactNode; resetKey: string; fallback: (e: Error) => ReactNode },\n  { err: Error | null }\n> {\n  state: { err: Error | null } = { err: null }\n  static getDerivedStateFromError(err: Error) {\n    return { err }\n  }\n  componentDidUpdate(prev: { resetKey: string }) {\n    if (prev.resetKey !== this.props.resetKey && this.state.err) {\n      this.setState({ err: null })\n    }\n  }\n  render() {\n    return this.state.err ? this.props.fallback(this.state.err) : this.props.children\n  }\n}\n\nexport interface MdxLivePreviewProps {\n  source: string\n  components: Record<string, unknown>\n  onError?: (error: Error | null) => void\n}\n\n/**\n * Renders runtime-compiled MDX inside the given component scope, isolating\n * runtime throws in an error boundary. Compile errors are surfaced via onError\n * while the last good render stays on screen.\n */\nexport function MdxLivePreview({ source, components, onError }: MdxLivePreviewProps) {\n  const { Component, error } = useMdxRuntime(source)\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: onError is a stable callback from the host\n  useEffect(() => {\n    onError?.(error)\n  }, [error])\n\n  if (!Component) {\n    return <div className=\"resume-mdx-live-empty\">Start typing MDX…</div>\n  }\n\n  return (\n    <MdxErrorBoundary\n      fallback={e => <div className=\"resume-mdx-live-error\">Runtime error: {e.message}</div>}\n      resetKey={source}\n    >\n      <MDXProvider components={components as Record<string, ComponentType>}>\n        <Component />\n      </MDXProvider>\n    </MdxErrorBoundary>\n  )\n}\n","// packages/resume/src/editor/resume-editor.tsx\nimport type { ComponentType } from 'react'\nimport { resumeMdxComponents } from '../document/components'\nimport './editor.css'\nimport { MdxLivePreview } from './mdx-live-preview'\n\n// The pagination engine activates via the <ResumeDocument> wrapper. If an edited\n// draft drops it, wrap the whole document so the live preview still paginates\n// (instead of rendering as an unpaginated flow with no page background).\nfunction ensureResumeDocument(source: string): string {\n  return source.includes('<ResumeDocument>')\n    ? source\n    : `<ResumeDocument>\\n\\n${source.trim()}\\n\\n</ResumeDocument>`\n}\n\nexport interface ResumeEditorProps {\n  /** Current MDX source. */\n  source: string\n  /** Called when the user edits the source. */\n  onChange: (next: string) => void\n  /** Compile-error callback. */\n  onError?: (error: Error) => void\n  /** Optional reset handler (host decides what reset means). */\n  onReset?: () => void\n  /** Override the MDX component map; defaults to resumeMdxComponents. */\n  components?: Record<string, ComponentType<unknown>>\n}\n\n/**\n * Host-agnostic, controlled split-pane MDX editor for resumes: a source\n * textarea on the left and a live, paginated preview on the right. Carries no\n * OS63 chrome — the host owns the surrounding shell.\n */\nexport function ResumeEditor({ source, onChange, onError, components }: ResumeEditorProps) {\n  const map = components ?? (resumeMdxComponents as Record<string, ComponentType<unknown>>)\n\n  return (\n    <div className=\"resume-editor\">\n      <div className=\"resume-editor-pane\">\n        <textarea\n          className=\"resume-editor-source\"\n          value={source}\n          onChange={e => onChange(e.target.value)}\n          spellCheck={false}\n          aria-label=\"Resume MDX source\"\n        />\n      </div>\n      <div className=\"resume-editor-pane resume-editor-preview\">\n        <MdxLivePreview\n          source={ensureResumeDocument(source)}\n          components={map}\n          onError={onError ? e => onError(e ?? new Error('MDX compile error')) : undefined}\n        />\n      </div>\n    </div>\n  )\n}\n"]}