@lacspace/og 1.0.0 → 1.1.0

package/README.md

@@ -77,6 +77,53 @@ Also exports `fitFontSize(title)` if you want the sizing math for your own layou
 
 Pairs with [`@lacspace/seo`](https://www.npmjs.com/package/@lacspace/seo) — feed the generated URL to `defineSite().meta({ image })`.
 
+## More card layouts (new)
+
+Beyond `ogCard`, the package ships four more ready-made layouts — all return the
+same element tree, work in the edge runtime, and degrade gracefully when
+optional fields are missing.
+
+```ts
+import {
+  ogCardSplit,   // title/subtitle on the left, gradient accent panel + logo on the right
+  ogCardMinimal, // big centered title on a full-bleed gradient, minimal chrome
+  ogArticle,     // category · title · footer row with author · date · reading time
+  ogProduct,     // title · subtitle/badge · large price with currency
+  ogThemes,      // named gradient presets: lacspace, ocean, sunset, forest, grape, slate
+} from "@lacspace/og";
+
+// Two-column split (logo falls back to the title's first letter)
+ogCardSplit({ title: "Ship faster", subtitle: "docs.example.com", logo: "L", theme: "dark" });
+
+// Minimal centered — pick a named gradient instead of from/to
+ogCardMinimal({ title: "Launch day", gradient: "sunset", pattern: "glow" });
+
+// Article card
+ogArticle({
+  title: "How we cut cold starts in half",
+  eyebrow: "Engineering",
+  author: "Ada Lovelace",
+  date: "Sep 5, 2026",
+  readingTime: "6 min read",
+  pattern: "dots",
+});
+
+// Product / pricing card
+ogProduct({ title: "Pro plan", subtitle: "Everything you need", badge: "POPULAR", price: 49, currency: "$" });
+```
+
+Extra options accepted by all four (on top of the existing `OgOptions`):
+
+| Option | Meaning |
+| --- | --- |
+| `gradient` | A named preset from `ogThemes` (`lacspace` · `ocean` · `sunset` · `forest` · `grape` · `slate`) — shorthand for `from`/`to`; explicit `from`/`to` still win |
+| `pattern` | Faint background texture: `"dots"` · `"glow"` · `"none"` (default) |
+| `author` / `date` / `readingTime` | Footer meta for `ogArticle` |
+| `price` / `currency` | Large price for `ogProduct` (e.g. `price: 49, currency: "$"` → `$49`) |
+
+`ogCard`, `ogSvg`, `ogSvgDataUri` and `fitFontSize` are unchanged and fully
+backward compatible.
+
 ## Licensing
 
 Free under the **[Lacspace Free Licence](https://lacspace.com/licenses/lacspace-free-1.0)** — MIT-equivalent freedoms. Use it in personal and commercial projects at no cost; just keep the notice. See the **[Lacspace Licence Centre](https://lacspace.com/licenses)**.

package/dist/index.cjs

@@ -187,7 +187,7 @@ function ogCard(options) {
   );
 }
 function esc(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  return s.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 function wrap(text, fontSize, maxWidth, maxLines) {
   const charW = fontSize * 0.56;
@@ -300,10 +300,523 @@ function ogSvg(options) {
 function ogSvgDataUri(options) {
   return `data:image/svg+xml;utf8,${encodeURIComponent(ogSvg(options))}`;
 }
+var ogThemes = {
+  lacspace: { from: "#22d3ee", to: "#6366f1" },
+  ocean: { from: "#0ea5e9", to: "#2563eb" },
+  sunset: { from: "#f43f5e", to: "#f59e0b" },
+  forest: { from: "#10b981", to: "#065f46" },
+  grape: { from: "#a855f7", to: "#6366f1" },
+  slate: { from: "#94a3b8", to: "#1e293b" }
+};
+function withGradient(o) {
+  if (o.gradient && ogThemes[o.gradient]) {
+    const g = ogThemes[o.gradient];
+    return { ...o, from: o.from ?? g.from, to: o.to ?? g.to };
+  }
+  return o;
+}
+function glowLayer(r, p) {
+  return el("div", {
+    position: "absolute",
+    top: `-${Math.round(r.height * 0.35)}px`,
+    right: `-${Math.round(r.width * 0.18)}px`,
+    width: `${Math.round(r.width * 0.55)}px`,
+    height: `${Math.round(r.width * 0.55)}px`,
+    borderRadius: "9999px",
+    background: `linear-gradient(135deg, ${p.from}, ${p.to})`,
+    opacity: r.theme === "dark" ? "0.22" : "0.16",
+    filter: "blur(20px)"
+  });
+}
+function patternLayer(kind, r, p, over = "ground") {
+  const k = kind ?? "none";
+  if (k === "none") return null;
+  if (k === "glow") {
+    if (over === "gradient") {
+      return el("div", {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        background: "radial-gradient(circle at 82% 12%, rgba(255,255,255,0.28), transparent 55%)"
+      });
+    }
+    return glowLayer(r, p);
+  }
+  const dot = over === "gradient" ? "rgba(255,255,255,0.16)" : r.theme === "dark" ? "rgba(255,255,255,0.10)" : "rgba(10,10,15,0.08)";
+  return el("div", {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    backgroundImage: `radial-gradient(${dot} 2px, transparent 2px)`,
+    backgroundSize: "44px 44px"
+  });
+}
+function eyebrowNode(text, color) {
+  return el(
+    "div",
+    {
+      display: "flex",
+      fontSize: "26px",
+      fontWeight: 600,
+      letterSpacing: "0.12em",
+      textTransform: "uppercase",
+      color
+    },
+    text.toUpperCase()
+  );
+}
+function badgeNode(text, p) {
+  return el(
+    "div",
+    {
+      display: "flex",
+      alignItems: "center",
+      padding: "8px 20px",
+      borderRadius: "9999px",
+      fontSize: "24px",
+      fontWeight: 700,
+      color: p.fg,
+      background: `linear-gradient(90deg, ${p.from}33, ${p.to}33)`,
+      border: `1px solid ${p.border}`
+    },
+    text
+  );
+}
+function ogCardSplit(options) {
+  const r = resolve(withGradient(options));
+  const p = palette(r);
+  const pad = Math.round(r.width * 0.065);
+  const titleSize = fitFontSize(r.title, { max: 68, min: 40 });
+  const leftChildren = [];
+  if (r.eyebrow) leftChildren.push(eyebrowNode(r.eyebrow, p.from));
+  leftChildren.push(
+    el(
+      "div",
+      {
+        display: "flex",
+        fontSize: `${titleSize}px`,
+        fontWeight: 800,
+        lineHeight: 1.05,
+        letterSpacing: "-0.02em",
+        color: p.fg
+      },
+      r.title
+    )
+  );
+  if (r.subtitle) {
+    leftChildren.push(
+      el(
+        "div",
+        { display: "flex", fontSize: "32px", fontWeight: 500, color: p.muted },
+        r.subtitle
+      )
+    );
+  }
+  if (r.badge) leftChildren.push(badgeNode(r.badge, p));
+  const left = el(
+    "div",
+    {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      gap: "24px",
+      width: "62%",
+      height: "100%",
+      padding: `${pad}px`
+    },
+    leftChildren
+  );
+  const mark = r.logo ?? (r.title.trim().charAt(0).toUpperCase() || "\u2022");
+  const right = el(
+    "div",
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "38%",
+      height: "100%",
+      background: `linear-gradient(135deg, ${p.from}, ${p.to})`
+    },
+    [
+      el(
+        "div",
+        { display: "flex", fontSize: "220px", fontWeight: 800, color: "#0a0a0f" },
+        mark
+      )
+    ]
+  );
+  const children = [];
+  const pat = patternLayer(options.pattern, r, p);
+  if (pat) children.push(pat);
+  children.push(left, right);
+  if (r.footer) {
+    children.push(
+      el(
+        "div",
+        {
+          position: "absolute",
+          bottom: `${Math.round(pad * 0.7)}px`,
+          left: `${pad}px`,
+          display: "flex",
+          fontSize: "26px",
+          fontWeight: 500,
+          color: p.muted
+        },
+        r.footer
+      )
+    );
+  }
+  return el(
+    "div",
+    {
+      position: "relative",
+      display: "flex",
+      flexDirection: "row",
+      width: "100%",
+      height: "100%",
+      background: p.bg,
+      color: p.fg,
+      fontFamily: "sans-serif"
+    },
+    children
+  );
+}
+function ogCardMinimal(options) {
+  const r = resolve(withGradient(options));
+  const p = palette(r);
+  const pad = Math.round(r.width * 0.09);
+  const titleSize = fitFontSize(r.title, { max: 96, min: 52 });
+  const center = [];
+  if (r.eyebrow) {
+    center.push(
+      el(
+        "div",
+        {
+          display: "flex",
+          fontSize: "28px",
+          fontWeight: 600,
+          letterSpacing: "0.16em",
+          textTransform: "uppercase",
+          color: "rgba(255,255,255,0.85)"
+        },
+        r.eyebrow.toUpperCase()
+      )
+    );
+  }
+  center.push(
+    el(
+      "div",
+      {
+        display: "flex",
+        fontSize: `${titleSize}px`,
+        fontWeight: 800,
+        lineHeight: 1.04,
+        letterSpacing: "-0.02em",
+        color: "#ffffff",
+        textAlign: "center"
+      },
+      r.title
+    )
+  );
+  if (r.subtitle) {
+    center.push(
+      el(
+        "div",
+        {
+          display: "flex",
+          fontSize: "34px",
+          fontWeight: 500,
+          color: "rgba(255,255,255,0.82)",
+          textAlign: "center"
+        },
+        r.subtitle
+      )
+    );
+  }
+  const children = [];
+  const pat = patternLayer(options.pattern, r, p, "gradient");
+  if (pat) children.push(pat);
+  children.push(
+    el(
+      "div",
+      {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "28px",
+        width: "100%",
+        height: "100%",
+        padding: `${pad}px`
+      },
+      center
+    )
+  );
+  if (r.footer) {
+    children.push(
+      el(
+        "div",
+        {
+          position: "absolute",
+          bottom: `${Math.round(r.height * 0.06)}px`,
+          left: "0",
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+          fontSize: "26px",
+          fontWeight: 500,
+          color: "rgba(255,255,255,0.78)"
+        },
+        r.footer
+      )
+    );
+  }
+  return el(
+    "div",
+    {
+      position: "relative",
+      display: "flex",
+      width: "100%",
+      height: "100%",
+      background: `linear-gradient(135deg, ${p.from}, ${p.to})`,
+      color: "#ffffff",
+      fontFamily: "sans-serif"
+    },
+    children
+  );
+}
+function metaDot(color) {
+  return el(
+    "div",
+    { display: "flex", fontSize: "26px", color, opacity: "0.6" },
+    "\xB7"
+  );
+}
+function ogArticle(options) {
+  const r = resolve(withGradient(options));
+  const p = palette(r);
+  const pad = Math.round(r.width * 0.075);
+  const titleSize = fitFontSize(r.title, { max: 74, min: 40 });
+  const accentBar = el("div", {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: `${Math.round(r.height * 0.02)}px`,
+    background: `linear-gradient(90deg, ${p.from}, ${p.to})`
+  });
+  const header = el(
+    "div",
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%"
+    },
+    [
+      r.eyebrow ? eyebrowNode(r.eyebrow, p.from) : el("div", { display: "flex" }, ""),
+      r.logo ? el(
+        "div",
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "72px",
+          height: "72px",
+          borderRadius: "18px",
+          fontSize: "38px",
+          fontWeight: 800,
+          color: "#0a0a0f",
+          background: `linear-gradient(135deg, ${p.from}, ${p.to})`
+        },
+        r.logo
+      ) : el("div", { display: "flex" }, "")
+    ]
+  );
+  const title = el(
+    "div",
+    {
+      display: "flex",
+      fontSize: `${titleSize}px`,
+      fontWeight: 800,
+      lineHeight: 1.06,
+      letterSpacing: "-0.02em",
+      color: p.fg
+    },
+    r.title
+  );
+  const metaItems = [];
+  if (options.author) {
+    metaItems.push(
+      el(
+        "div",
+        { display: "flex", fontSize: "28px", fontWeight: 700, color: p.fg },
+        options.author
+      )
+    );
+  }
+  const muted = (t) => el(
+    "div",
+    { display: "flex", fontSize: "26px", fontWeight: 500, color: p.muted },
+    t
+  );
+  if (options.date) {
+    if (metaItems.length) metaItems.push(metaDot(p.muted));
+    metaItems.push(muted(options.date));
+  }
+  if (options.readingTime) {
+    if (metaItems.length) metaItems.push(metaDot(p.muted));
+    metaItems.push(muted(options.readingTime));
+  }
+  const footerRow = metaItems.length ? el(
+    "div",
+    { display: "flex", alignItems: "center", gap: "16px" },
+    metaItems
+  ) : r.footer ? muted(r.footer) : el("div", { display: "flex" }, "");
+  const children = [accentBar];
+  const pat = patternLayer(options.pattern, r, p);
+  if (pat) children.push(pat);
+  children.push(
+    header,
+    el("div", { display: "flex", flexDirection: "column" }, [title]),
+    footerRow
+  );
+  return el(
+    "div",
+    {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      width: "100%",
+      height: "100%",
+      padding: `${pad}px`,
+      background: p.bg,
+      color: p.fg,
+      fontFamily: "sans-serif"
+    },
+    children
+  );
+}
+function ogProduct(options) {
+  const r = resolve(withGradient(options));
+  const p = palette(r);
+  const pad = Math.round(r.width * 0.075);
+  const titleSize = fitFontSize(r.title, { max: 76, min: 42 });
+  const header = el(
+    "div",
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%"
+    },
+    [
+      r.badge ? badgeNode(r.badge, p) : el("div", { display: "flex" }, ""),
+      r.logo ? el(
+        "div",
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "76px",
+          height: "76px",
+          borderRadius: "20px",
+          fontSize: "40px",
+          fontWeight: 800,
+          color: "#0a0a0f",
+          background: `linear-gradient(135deg, ${p.from}, ${p.to})`
+        },
+        r.logo
+      ) : el("div", { display: "flex" }, "")
+    ]
+  );
+  const body = [
+    el(
+      "div",
+      {
+        display: "flex",
+        fontSize: `${titleSize}px`,
+        fontWeight: 800,
+        lineHeight: 1.05,
+        letterSpacing: "-0.02em",
+        color: p.fg
+      },
+      r.title
+    )
+  ];
+  if (r.subtitle) {
+    body.push(
+      el(
+        "div",
+        {
+          display: "flex",
+          marginTop: "22px",
+          fontSize: "32px",
+          fontWeight: 500,
+          color: p.muted
+        },
+        r.subtitle
+      )
+    );
+  }
+  const priceStr = options.price === void 0 || options.price === null ? void 0 : `${options.currency ?? ""}${options.price}`;
+  const priceNode = priceStr ? el(
+    "div",
+    {
+      display: "flex",
+      alignItems: "center",
+      fontSize: "88px",
+      fontWeight: 800,
+      letterSpacing: "-0.02em",
+      background: `linear-gradient(90deg, ${p.from}, ${p.to})`,
+      backgroundClip: "text",
+      color: "transparent"
+    },
+    priceStr
+  ) : r.footer ? el(
+    "div",
+    { display: "flex", fontSize: "26px", fontWeight: 500, color: p.muted },
+    r.footer
+  ) : el("div", { display: "flex" }, "");
+  const children = [];
+  const pat = patternLayer(options.pattern, r, p);
+  if (pat) children.push(pat);
+  children.push(
+    header,
+    el("div", { display: "flex", flexDirection: "column" }, body),
+    priceNode
+  );
+  return el(
+    "div",
+    {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      width: "100%",
+      height: "100%",
+      padding: `${pad}px`,
+      background: p.bg,
+      color: p.fg,
+      fontFamily: "sans-serif"
+    },
+    children
+  );
+}
 
 exports.fitFontSize = fitFontSize;
+exports.ogArticle = ogArticle;
 exports.ogCard = ogCard;
+exports.ogCardMinimal = ogCardMinimal;
+exports.ogCardSplit = ogCardSplit;
+exports.ogProduct = ogProduct;
 exports.ogSvg = ogSvg;
 exports.ogSvgDataUri = ogSvgDataUri;
+exports.ogThemes = ogThemes;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map