@curvenote/theme-ui 2.0.1 → 2.1.0

package/dist/lib/fonts.d.ts

@@ -0,0 +1,29 @@
+import type { FontSlot, ThemeFontsConfig } from '@curvenote/common';
+/** `family, fallback` — what the `--font-*` token is set to. */
+export declare function fontStack(slot: FontSlot): string;
+/**
+ * Google Fonts stylesheet URL for the slots that ask for it, or `undefined` when none do.
+ * One request covers every Google-sourced family.
+ */
+export declare function googleFontsHref(fonts?: ThemeFontsConfig): string | undefined;
+/** Self-hosted files worth preloading — the body and heading faces the reader sees first. */
+export declare function fontPreloads(fonts?: ThemeFontsConfig): string[];
+/**
+ * Fills the slots a site left unset from an app's defaults, so the defaults are only ever
+ * downloaded when they will be seen. Slot-level: a site that sets `body` replaces the
+ * default body entirely rather than merging into it.
+ */
+export declare function withDefaultFonts(fonts?: ThemeFontsConfig, defaults?: ThemeFontsConfig): ThemeFontsConfig | undefined;
+/** The slots of `defaults` that `fonts` does not set — what an app still has to load itself. */
+export declare function unsetDefaultFonts(fonts?: ThemeFontsConfig, defaults?: ThemeFontsConfig): ThemeFontsConfig | undefined;
+/**
+ * `@font-face` rules plus `:root` token assignments for a site's font config.
+ *
+ * Returns an empty string when nothing is configured, so callers can render it
+ * unconditionally. Pass `{ tokens: false }` for an app's defaults: their tokens already
+ * live in `@curvenote/styles/fonts.css`, so only any self-hosted faces are wanted.
+ */
+export declare function buildFontCss(fonts?: ThemeFontsConfig, opts?: {
+    tokens?: boolean;
+}): string;
+//# sourceMappingURL=fonts.d.ts.map

package/dist/lib/fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/lib/fonts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,QAAQ,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AA4B9E,gEAAgE;AAChE,wBAAgB,SAAS,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAGhD;AA6BD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,gBAAgB,GAAG,MAAM,GAAG,SAAS,CAiB5E;AAED,6FAA6F;AAC7F,wBAAgB,YAAY,CAAC,KAAK,CAAC,EAAE,gBAAgB,GAAG,MAAM,EAAE,CAM/D;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,CAAC,EAAE,gBAAgB,EACxB,QAAQ,CAAC,EAAE,gBAAgB,GAC1B,gBAAgB,GAAG,SAAS,CAO9B;AAED,gGAAgG;AAChG,wBAAgB,iBAAiB,CAC/B,KAAK,CAAC,EAAE,gBAAgB,EACxB,QAAQ,CAAC,EAAE,gBAAgB,GAC1B,gBAAgB,GAAG,SAAS,CAO9B;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,CAAC,EAAE,gBAAgB,EAAE,IAAI,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,MAAM,CAsB1F"}

package/dist/lib/fonts.js

@@ -0,0 +1,148 @@
+/**
+ * Turns a site's `theme_config.fonts` into the CSS that has to reach the page: the
+ * `@font-face` rules for self-hosted files, and the `--font-*` token assignments that
+ * `@curvenote/styles` and the `.prose` config read.
+ *
+ * Pure and string-in/string-out so it can be rendered server-side into a `<style>` — no
+ * flash of fallback — and unit-tested without a DOM.
+ */
+/** Slots in the order they cascade: `heading` and `small` fall back to `body`. */
+const SLOTS = ['body', 'heading', 'small', 'mono'];
+/** Font files are same-origin or CDN URLs; refuse anything that could break out of `url()`. */
+function isSafeUrl(src) {
+    if (/["'()\\]|[\s]/.test(src))
+        return false;
+    return /^https:\/\//.test(src) || /^\//.test(src);
+}
+/** A family name may contain spaces, so quote it unless it already is. */
+function quoteFamily(family) {
+    const trimmed = family.trim();
+    if (/^["']/.test(trimmed))
+        return trimmed;
+    return /[^a-zA-Z0-9-]/.test(trimmed) ? `'${trimmed.replace(/'/g, '')}'` : trimmed;
+}
+/** `family, fallback` — what the `--font-*` token is set to. */
+export function fontStack(slot) {
+    const fallback = slot.fallback?.trim();
+    return fallback ? `${quoteFamily(slot.family)}, ${fallback}` : quoteFamily(slot.family);
+}
+function faceRule(family, face, display) {
+    if (!isSafeUrl(face.src))
+        return undefined;
+    const format = face.src.endsWith('.woff2')
+        ? 'woff2'
+        : face.src.endsWith('.woff')
+            ? 'woff'
+            : face.src.endsWith('.otf')
+                ? 'opentype'
+                : face.src.endsWith('.ttf')
+                    ? 'truetype'
+                    : undefined;
+    const lines = [
+        `  font-family: ${quoteFamily(family)};`,
+        `  src: url(${face.src})${format ? ` format('${format}')` : ''};`,
+        `  font-weight: ${face.weight ?? 400};`,
+        `  font-style: ${face.style ?? 'normal'};`,
+        `  font-display: ${display};`,
+    ];
+    // Metric overrides keep the fallback the same size as the real face, so swapping it in
+    // does not reflow the article.
+    if (face.sizeAdjust)
+        lines.push(`  size-adjust: ${face.sizeAdjust};`);
+    if (face.ascentOverride)
+        lines.push(`  ascent-override: ${face.ascentOverride};`);
+    if (face.descentOverride)
+        lines.push(`  descent-override: ${face.descentOverride};`);
+    if (face.lineGapOverride)
+        lines.push(`  line-gap-override: ${face.lineGapOverride};`);
+    return `@font-face {\n${lines.join('\n')}\n}`;
+}
+/**
+ * Google Fonts stylesheet URL for the slots that ask for it, or `undefined` when none do.
+ * One request covers every Google-sourced family.
+ */
+export function googleFontsHref(fonts) {
+    if (!fonts)
+        return undefined;
+    const families = SLOTS.map((name) => fonts[name])
+        .filter((slot) => slot?.source === 'google')
+        .map((slot) => {
+        const weights = [...new Set(slot.weights ?? [400, 700])].sort((a, b) => parseInt(String(a), 10) - parseInt(String(b), 10));
+        const axis = slot.italic
+            ? `:ital,wght@${weights.map((w) => `0,${w}`).join(';')};${weights.map((w) => `1,${w}`).join(';')}`
+            : `:wght@${weights.join(';')}`;
+        return `family=${slot.family.trim().replace(/\s+/g, '+')}${axis}`;
+    });
+    const unique = [...new Set(families)];
+    return unique.length
+        ? `https://fonts.googleapis.com/css2?${unique.join('&')}&display=swap`
+        : undefined;
+}
+/** Self-hosted files worth preloading — the body and heading faces the reader sees first. */
+export function fontPreloads(fonts) {
+    if (!fonts)
+        return [];
+    return ['body', 'heading']
+        .flatMap((name) => fonts[name]?.faces ?? [])
+        .filter((face) => isSafeUrl(face.src) && face.src.endsWith('.woff2'))
+        .map((face) => face.src);
+}
+/**
+ * Fills the slots a site left unset from an app's defaults, so the defaults are only ever
+ * downloaded when they will be seen. Slot-level: a site that sets `body` replaces the
+ * default body entirely rather than merging into it.
+ */
+export function withDefaultFonts(fonts, defaults) {
+    if (!defaults)
+        return fonts;
+    const merged = { ...defaults };
+    for (const name of SLOTS) {
+        if (fonts?.[name])
+            merged[name] = fonts[name];
+    }
+    return merged;
+}
+/** The slots of `defaults` that `fonts` does not set — what an app still has to load itself. */
+export function unsetDefaultFonts(fonts, defaults) {
+    if (!defaults)
+        return undefined;
+    const rest = {};
+    for (const name of SLOTS) {
+        if (defaults[name] && !fonts?.[name])
+            rest[name] = defaults[name];
+    }
+    return Object.keys(rest).length ? rest : undefined;
+}
+/**
+ * `@font-face` rules plus `:root` token assignments for a site's font config.
+ *
+ * Returns an empty string when nothing is configured, so callers can render it
+ * unconditionally. Pass `{ tokens: false }` for an app's defaults: their tokens already
+ * live in `@curvenote/styles/fonts.css`, so only any self-hosted faces are wanted.
+ */
+export function buildFontCss(fonts, opts) {
+    if (!fonts)
+        return '';
+    const wantTokens = opts?.tokens ?? true;
+    const faces = [];
+    const tokens = [];
+    for (const name of SLOTS) {
+        const slot = fonts[name];
+        if (!slot?.family)
+            continue;
+        const display = slot.display ?? 'swap';
+        if (slot.source !== 'stack') {
+            for (const face of slot.faces ?? []) {
+                const rule = faceRule(slot.family, face, display);
+                if (rule)
+                    faces.push(rule);
+            }
+        }
+        if (wantTokens)
+            tokens.push(`  --font-${name}: ${fontStack(slot)};`);
+    }
+    if (!faces.length && !tokens.length)
+        return '';
+    const root = tokens.length ? `:root {\n${tokens.join('\n')}\n}` : '';
+    return [...faces, root].filter(Boolean).join('\n');
+}

package/dist/lib/index.d.ts

@@ -1,6 +1,7 @@
-export * from './knownParts';
-export * from './links';
-export * from './parse-date';
-export * from './utils';
-export * from './checkMecaExport';
+export * from './knownParts.js';
+export * from './links.js';
+export * from './parse-date.js';
+export * from './utils.js';
+export * from './checkMecaExport.js';
+export * from './fonts.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC"}

package/dist/lib/index.js

@@ -1,6 +1,7 @@
 // Lib utilities
-export * from './knownParts';
-export * from './links';
-export * from './parse-date';
-export * from './utils';
-export * from './checkMecaExport';
+export * from './knownParts.js';
+export * from './links.js';
+export * from './parse-date.js';
+export * from './utils.js';
+export * from './checkMecaExport.js';
+export * from './fonts.js';

package/dist/lib/site-colors.d.ts

@@ -0,0 +1,10 @@
+import type { SiteThemeConfig } from '@curvenote/common';
+type SiteColors = SiteThemeConfig['colors'];
+/**
+ * The `--site-primary` / `--site-secondary` tokens for a site's configured brand colours, as a
+ * `:root` rule, or `''` when it sets none. The values come from site config and end up in a
+ * `<style>` element, so anything that is not a plain colour value is dropped.
+ */
+export declare function buildSiteColorCss(colors: SiteColors): string;
+export {};
+//# sourceMappingURL=site-colors.d.ts.map

package/dist/lib/site-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"site-colors.d.ts","sourceRoot":"","sources":["../../src/lib/site-colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,KAAK,UAAU,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAU5C;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,UAAU,UAQnD"}

package/dist/lib/site-colors.js

@@ -0,0 +1,20 @@
+/** Hex (`#rgb` to `#rrggbbaa`) or a functional notation with only numbers, units and separators. */
+const COLOR = /^(#[0-9a-f]{3,8}|(rgba?|hsla?|hwb|lab|lch|oklab|oklch)\([0-9a-z.%\s,/+-]+\))$/i;
+function safeColor(value) {
+    const trimmed = value?.trim();
+    return trimmed && COLOR.test(trimmed) ? trimmed : undefined;
+}
+/**
+ * The `--site-primary` / `--site-secondary` tokens for a site's configured brand colours, as a
+ * `:root` rule, or `''` when it sets none. The values come from site config and end up in a
+ * `<style>` element, so anything that is not a plain colour value is dropped.
+ */
+export function buildSiteColorCss(colors) {
+    const primary = safeColor(colors?.primary);
+    const secondary = safeColor(colors?.secondary);
+    const decls = [
+        primary && `--site-primary:${primary}`,
+        secondary && `--site-secondary:${secondary}`,
+    ].filter(Boolean);
+    return decls.length ? `:root{${decls.join(';')}}` : '';
+}

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@curvenote/theme-ui",
-  "version": "2.0.1",
+  "version": "2.1.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/curvenote/curvenote.git"
+  },
   "type": "module",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,10 +30,13 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@curvenote/bridge-jupyter": "^2.0.1",
-    "@curvenote/footers": "^2.0.1",
+    "@curvenote/bridge-jupyter": "^2.1.0",
+    "@curvenote/common": "^0.11.0",
+    "@curvenote/footers": "^2.1.0",
     "@curvenote/icons": "^0.0.4",
-    "@curvenote/react-utils": "^2.0.1",
+    "@curvenote/react-utils": "^2.1.0",
+    "@myst-theme/common": "^1.3.0",
+    "@myst-theme/providers": "^1.3.0",
     "@myst-theme/search": "^1.3.0",
     "@myst-theme/search-minisearch": "^1.3.0",
     "@radix-ui/react-collapsible": "^1.1.11",
@@ -44,8 +51,14 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "3.6.0",
+    "doi-utils": "^2.0.6",
     "lodash.merge": "^4.6.2",
     "lucide-react": "^0.525.0",
+    "myst-common": "^1.9.5",
+    "myst-config": "^1.9.5",
+    "myst-frontmatter": "^1.9.5",
+    "myst-spec-ext": "^1.9.5",
+    "myst-to-react": "^1.3.0",
     "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-day-picker": "8",
@@ -54,6 +67,7 @@
     "sonner": "^2.0.6",
     "swr": "^2.2.5",
     "tailwind-merge": "^3.3.1",
+    "thebe-core": "0.5.0",
     "unist-util-select": "^5.1.0",
     "unist-util-visit": "^4.1.2"
   },
@@ -62,6 +76,10 @@
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
+    "@curvenote/tsconfig": "workspace:*",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.4",
+    "unist-builder": "^3.0.0",
     "vitest": "^4.0.16"
   },
   "publishConfig": {