@regmisatyam/retex 0.1.0 → 0.2.0

package/dist/react.cjs

@@ -1,18 +1,25 @@
 'use strict';
 
 // src/theme/default.ts
-var defaultTheme = {
-  name: "default",
-  colors: {
-    primary: "#2563eb",
-    secondary: "#64748b",
-    text: "#1e293b",
-    muted: "#64748b",
-    background: "#ffffff",
-    border: "#e2e8f0",
-    accent: "#2563eb",
-    success: "#16a34a"
-  },
+var blankTheme = {
+  name: "blank"
+};
+var defaultTheme = blankTheme;
+
+// src/theme/themes.ts
+function resolveTheme(partial, base = defaultTheme) {
+  return {
+    name: partial?.name ?? base.name,
+    colors: { ...base.colors, ...partial?.colors },
+    fonts: { ...base.fonts, ...partial?.fonts },
+    fontSizes: { ...base.fontSizes, ...partial?.fontSizes },
+    spacing: { ...base.spacing, ...partial?.spacing },
+    page: { ...base.page, ...partial?.page },
+    sectionStyle: partial?.sectionStyle ?? base.sectionStyle,
+    headings: { ...base.headings, ...partial?.headings }
+  };
+}
+var styledBase = {
   fonts: {
     heading: '"Inter", "Helvetica Neue", Helvetica, Arial, sans-serif',
     body: '"Inter", "Helvetica Neue", Helvetica, Arial, sans-serif',
@@ -27,41 +34,36 @@ var defaultTheme = {
     name: "26pt",
     section: "13pt"
   },
-  spacing: {
-    unit: "4px",
-    section: "1.1rem",
-    item: "0.28rem",
-    page: "0.55in"
-  },
-  page: {
-    size: "Letter",
-    margin: "0.55in",
-    maxWidth: "8.5in"
-  },
-  sectionStyle: "rule"
+  spacing: { unit: "4px", section: "1.1rem", item: "0.28rem", page: "0.55in" },
+  page: { size: "Letter", margin: "0.55in", maxWidth: "8.5in" },
+  headings: { transform: "uppercase", tracking: "0.06em", nameTracking: "-0.01em" }
 };
-
-// src/theme/themes.ts
-function resolveTheme(partial, base = defaultTheme) {
-  if (!partial) return base;
-  return {
-    name: partial.name ?? base.name,
-    colors: { ...base.colors, ...partial.colors },
-    fonts: { ...base.fonts, ...partial.fonts },
-    fontSizes: { ...base.fontSizes, ...partial.fontSizes },
-    spacing: { ...base.spacing, ...partial.spacing },
-    page: { ...base.page, ...partial.page },
-    sectionStyle: partial.sectionStyle ?? base.sectionStyle
-  };
-}
 resolveTheme({
+  ...styledBase,
   name: "modern",
-  colors: { primary: "#7c3aed", accent: "#7c3aed", text: "#111827" },
+  colors: {
+    primary: "#7c3aed",
+    secondary: "#64748b",
+    text: "#111827",
+    muted: "#64748b",
+    background: "#ffffff",
+    border: "#e2e8f0",
+    accent: "#7c3aed"
+  },
   sectionStyle: "underline"
 });
 resolveTheme({
+  ...styledBase,
   name: "classic",
-  colors: { primary: "#111827", secondary: "#4b5563", accent: "#111827" },
+  colors: {
+    primary: "#111827",
+    secondary: "#4b5563",
+    text: "#1e293b",
+    muted: "#4b5563",
+    background: "#ffffff",
+    border: "#cbd5e1",
+    accent: "#111827"
+  },
   fonts: {
     heading: 'Georgia, "Times New Roman", serif',
     body: 'Georgia, "Times New Roman", serif',
@@ -70,7 +72,17 @@ resolveTheme({
   sectionStyle: "rule"
 });
 resolveTheme({
+  ...styledBase,
   name: "compact",
+  colors: {
+    primary: "#2563eb",
+    secondary: "#64748b",
+    text: "#1e293b",
+    muted: "#64748b",
+    background: "#ffffff",
+    border: "#e2e8f0",
+    accent: "#2563eb"
+  },
   fontSizes: {
     base: "9.5pt",
     small: "8pt",
@@ -244,41 +256,59 @@ function iconToSvg(name, opts = {}) {
   const def = getIcon(name);
   if (!def) return null;
   const size = opts.size ?? "1em";
-  const dim = typeof size === "number" ? `${size}` : size;
+  const dim2 = typeof size === "number" ? `${size}` : size;
   const cls = opts.className ? ` class="${opts.className}"` : "";
   const fillOrStroke = def.stroked ? 'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"' : 'fill="currentColor"';
-  return `<svg${cls} width="${dim}" height="${dim}" viewBox="0 0 24 24" ${fillOrStroke} role="img" aria-hidden="true" focusable="false">${def.body}</svg>`;
+  return `<svg${cls} width="${dim2}" height="${dim2}" viewBox="0 0 24 24" ${fillOrStroke} role="img" aria-hidden="true" focusable="false">${def.body}</svg>`;
 }
 
 // src/renderers/css.ts
 var tokenSafe = (s) => s.replace(/[^a-zA-Z0-9_-]/g, "");
+var has = (v) => v != null && v !== "";
+var color = (v, fallback) => has(v) && isSafeColor(v) ? v : fallback;
+var dim = (v, fallback) => has(v) && isSafeDimension(v) ? v : fallback;
+var val = (v, fallback) => has(v) ? sanitizeStyleValue(v) ?? fallback : fallback;
 function themeToCss(theme, prefix = "retex") {
   const p = prefix;
-  const colorVars = Object.entries(theme.colors).map(([k, v]) => `    --${p}-color-${tokenSafe(k)}: ${v};`).join("\n");
+  const c = theme.colors ?? {};
+  const f = theme.fonts ?? {};
+  const fs = theme.fontSizes ?? {};
+  const sp = theme.spacing ?? {};
+  const h = theme.headings ?? {};
+  const colorVars = Object.entries(c).filter(([, v]) => has(v) && isSafeColor(v)).map(([k, v]) => `    --${p}-color-${tokenSafe(k)}: ${v};`).join("\n");
+  const primary = color(c.primary, "");
+  const skillBg = primary ? `color-mix(in srgb, ${primary} 12%, transparent)` : "transparent";
+  const skillColor = primary || "inherit";
+  const linkDecoration = primary ? "none" : "underline";
   return `.${p}-resume {
-${colorVars}
-    --${p}-primary: ${theme.colors.primary};
-    --${p}-text: ${theme.colors.text};
-    --${p}-muted: ${theme.colors.muted};
-    --${p}-border: ${theme.colors.border};
-    --${p}-bg: ${theme.colors.background};
-    --${p}-font-heading: ${theme.fonts.heading};
-    --${p}-font-body: ${theme.fonts.body};
-    --${p}-font-mono: ${theme.fonts.mono};
-    --${p}-fs-base: ${theme.fontSizes.base};
-    --${p}-fs-small: ${theme.fontSizes.small};
-    --${p}-fs-large: ${theme.fontSizes.large};
-    --${p}-fs-Large: ${theme.fontSizes.Large};
-    --${p}-fs-Huge: ${theme.fontSizes.Huge};
-    --${p}-fs-name: ${theme.fontSizes.name};
-    --${p}-fs-section: ${theme.fontSizes.section};
-    --${p}-sp-section: ${theme.spacing.section};
-    --${p}-sp-item: ${theme.spacing.item};
+${colorVars ? colorVars + "\n" : ""}    --${p}-primary: ${primary || "inherit"};
+    --${p}-text: ${color(c.text, "inherit")};
+    --${p}-muted: ${color(c.muted, "inherit")};
+    --${p}-border: ${color(c.border, "currentColor")};
+    --${p}-bg: ${color(c.background, "transparent")};
+    --${p}-font-heading: ${val(f.heading, "inherit")};
+    --${p}-font-body: ${val(f.body, "inherit")};
+    --${p}-font-mono: ${val(f.mono, "ui-monospace, SFMono-Regular, Menlo, monospace")};
+    --${p}-fs-base: ${dim(fs.base, "inherit")};
+    --${p}-fs-small: ${dim(fs.small, "0.85em")};
+    --${p}-fs-large: ${dim(fs.large, "1.2em")};
+    --${p}-fs-Large: ${dim(fs.Large, "1.45em")};
+    --${p}-fs-Huge: ${dim(fs.Huge, "2em")};
+    --${p}-fs-name: ${dim(fs.name, "2em")};
+    --${p}-fs-section: ${dim(fs.section, "1.25em")};
+    --${p}-sp-section: ${dim(sp.section, "1.1rem")};
+    --${p}-sp-item: ${dim(sp.item, "0.28rem")};
+    --${p}-section-transform: ${val(h.transform, "none")};
+    --${p}-section-tracking: ${val(h.tracking, "normal")};
+    --${p}-name-tracking: ${val(h.nameTracking, "normal")};
+    --${p}-link-decoration: ${linkDecoration};
+    --${p}-skill-bg: ${skillBg};
+    --${p}-skill-color: ${skillColor};
 
     box-sizing: border-box;
-    max-width: ${theme.page.maxWidth};
+    max-width: ${dim(theme.page?.maxWidth, "none")};
     margin: 0 auto;
-    padding: ${theme.spacing.page};
+    padding: ${dim(sp.page, "0")};
     background: var(--${p}-bg);
     color: var(--${p}-text);
     font-family: var(--${p}-font-body);
@@ -294,7 +324,7 @@ ${colorVars}
     font-weight: 700;
     margin: 0 0 0.1em;
     color: var(--${p}-text);
-    letter-spacing: -0.01em;
+    letter-spacing: var(--${p}-name-tracking);
 }
 .${p}-title {
     font-size: var(--${p}-fs-large);
@@ -323,8 +353,8 @@ ${colorVars}
     font-family: var(--${p}-font-heading);
     font-size: var(--${p}-fs-section);
     font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
+    text-transform: var(--${p}-section-transform);
+    letter-spacing: var(--${p}-section-tracking);
     color: var(--${p}-primary);
     margin: 0 0 0.5em;
 }
@@ -367,8 +397,8 @@ ${colorVars}
 
 .${p}-skills { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0.2rem 0; padding: 0; }
 .${p}-skill {
-    background: color-mix(in srgb, var(--${p}-primary) 12%, transparent);
-    color: var(--${p}-primary);
+    background: var(--${p}-skill-bg);
+    color: var(--${p}-skill-color);
     border-radius: 4px;
     padding: 0.12rem 0.5rem;
     font-size: var(--${p}-fs-small);
@@ -376,10 +406,14 @@ ${colorVars}
     white-space: nowrap;
 }
 
-.${p}-link { color: var(--${p}-primary); text-decoration: none; }
+.${p}-link { color: var(--${p}-primary); text-decoration: var(--${p}-link-decoration); }
 .${p}-link:hover { text-decoration: underline; }
 .${p}-icon { display: inline-flex; vertical-align: -0.125em; }
 .${p}-rule { border: none; border-top: 1px solid var(--${p}-border); margin: 0.6rem 0; }
+.${p}-rule--dashed { border-top-style: dashed; }
+.${p}-rule--dotted { border-top-style: dotted; }
+.${p}-rule--thick { border-top-width: 3px; }
+.${p}-rule--double { border-top-style: double; border-top-width: 3px; }
 .${p}-center { text-align: center; }
 .${p}-scale-small { font-size: var(--${p}-fs-small); }
 .${p}-scale-large { font-size: var(--${p}-fs-large); }
@@ -437,7 +471,7 @@ function splitPreamble(nodes) {
     (n) => CONTACTISH.has(n.type) && n !== name && n !== title
   );
   const other = nodes.filter(
-    (n) => !CONTACTISH.has(n.type) && n.type !== "parbreak" && !(n.type === "text" && n.value.trim() === "")
+    (n) => !CONTACTISH.has(n.type) && n.type !== "parbreak" && n.type !== "usepackage" && !(n.type === "text" && n.value.trim() === "")
   );
   return { name, title, contacts, other };
 }
@@ -478,7 +512,7 @@ var ReactRenderer = class {
         "ReactRenderer requires a `createElement` factory (e.g. React.createElement)."
       );
     }
-    this.theme = options.theme ?? resolveTheme();
+    this.theme = resolveTheme(options.theme);
     this.prefix = options.classPrefix ?? "retex";
     this.h = options.createElement;
     this.Fragment = options.Fragment ?? "div";
@@ -514,10 +548,11 @@ var ReactRenderer = class {
   }
   /* --------------------------- structuring ---------------------------- */
   renderSection(section, body) {
+    const className = this.theme.sectionStyle ? `${this.cls("section")} ${this.cls("section")}--${this.theme.sectionStyle}` : this.cls("section");
     return this.el(
       "section",
       {
-        className: `${this.cls("section")} ${this.cls("section")}--${this.theme.sectionStyle}`
+        className
       },
       [
         this.el("h2", { className: this.cls("section-title") }, [section.title]),
@@ -583,10 +618,14 @@ var ReactRenderer = class {
         return node.value;
       case "parbreak":
         return null;
+      case "usepackage":
+        return null;
       case "linebreak":
         return this.el("br", null, []);
-      case "rule":
-        return this.el("hr", { className: this.cls("rule") }, []);
+      case "rule": {
+        const variant = node.style && node.style !== "solid" ? ` ${this.cls(`rule--${node.style}`)}` : "";
+        return this.el("hr", { className: `${this.cls("rule")}${variant}` }, []);
+      }
       case "space":
         return node.axis === "vertical" ? this.el("div", { style: { height: this.dim(node.size) } }, []) : this.el(
           "span",