@d0nj/dsh-ui-custom 0.2.1 → 0.3.0

package/README.md

@@ -10,7 +10,7 @@ The Harness ships one palette per mode. Restyling it otherwise means editing CSS
 
 - **15 presets**, each defined for both light and dark: Midnight, Paper, High contrast, Dracula, Nord, Catppuccin Mocha, Gruvbox, One Dark, Solarized, Rosé Pine, Tokyo Night, Ayu Dark, GitHub Dark, Monokai, Mono.
 - **14 colour tokens** — surfaces, borders, text, brand, and state colours — each overridable per mode.
-- **Typography** per role: interface/body, code, and the sidebar terminal, including font stacks and separate sizes.
+- **Typography** per role: interface/body, code, and the sidebar terminal, including 40 font families and separate sizes. Families load from our own mirror, not Google Fonts.
 - **Geometry**: corner radius (0–24 px) and spacing density (compact, comfortable, spacious).
 - **Theme Studio** panel with live preview, so changes apply without a restart.
 

package/dist/client/client.js

@@ -881,6 +881,11 @@ window.__ModuleLoader__.load({
             'fangsong', '-apple-system', 'blinkmacsystemfont',
             'inherit', 'initial', 'unset',
         ]);
+        /** Tokens the Client paints with that no preset names; each follows a documented token. */
+        const RUNTIME_ALIASES = [
+            ['--dsw-specific-input-major', '--dsw-alias-bg-layer-1'],
+            ['--dsw-alias-button-info-fill', '--dsw-alias-brand-primary'],
+        ];
         /**
          * Whether a value is a plausible CSS colour.
          *
@@ -1002,6 +1007,18 @@ window.__ModuleLoader__.load({
                 }
                 tokens[name] = { light, dark };
             }
+            for (const [alias, source] of RUNTIME_ALIASES) {
+                const modes = tokens[source];
+                if (modes !== undefined)
+                    tokens[alias] = modes;
+            }
+            const accent = tokens['--dsw-alias-button-info-fill'];
+            if (accent !== undefined) {
+                tokens['--dsw-alias-button-info-hover'] = {
+                    light: `color-mix(in srgb, ${accent.light} 85%, black)`,
+                    dark: `color-mix(in srgb, ${accent.dark} 85%, white)`,
+                };
+            }
             for (const [name, modes] of Object.entries(geometryTokens(document.geometry))) {
                 tokens[name] = modes;
             }
@@ -1277,10 +1294,10 @@ window.__ModuleLoader__.load({
                 const matches = () => {
                     const query = combo.query.trim().toLowerCase();
                     if (query === '')
-                        return [DEFAULT_CHOICE, ...choices.slice(0, 39)];
+                        return [DEFAULT_CHOICE, ...choices];
                     const filtered = choices.filter((choice) => choice.toLowerCase().includes(query));
                     const keepDefault = 'default (built-in)'.includes(query) || 'built-in'.includes(query);
-                    return (keepDefault ? [DEFAULT_CHOICE, ...filtered] : filtered).slice(0, 40);
+                    return keepDefault ? [DEFAULT_CHOICE, ...filtered] : filtered;
                 };
                 const commit = (value) => {
                     combo.open = false;
@@ -1518,10 +1535,20 @@ window.__ModuleLoader__.load({
       },
       "./client/hosted-fonts.js": (module, exports, __require) => {
         /**
-         * Families fetched from a font CDN on demand.
+         * Families loaded on demand from our own font mirror.
+         *
+         * The mirror keeps every family out of Google's hands: the plugin loads one
+         * stylesheet per pick, and the stylesheet's `unicode-range` rules make the
+         * browser download only the subsets the page needs.
          *
          * @module @d0nj/dsh-ui-custom/hosted-fonts
          */
+        /**
+         * The catalog.
+         *
+         * A family added here is not loadable until the mirror carries it, so a new
+         * family means a new mirror tag and a new version of this package.
+         */
         const HOSTED_FONTS = [
             { family: 'Inter', category: 'sans' },
             { family: 'IBM Plex Sans', category: 'sans' },
@@ -1542,6 +1569,10 @@ window.__ModuleLoader__.load({
             { family: 'Sora', category: 'sans' },
             { family: 'Space Grotesk', category: 'sans' },
             { family: 'JetBrains Mono', category: 'mono' },
+            { family: 'Geist Mono', category: 'mono' },
+            { family: 'Victor Mono', category: 'mono' },
+            { family: 'MonoLisa', category: 'mono' },
+            { family: 'SF Mono', category: 'mono' },
             { family: 'Fira Code', category: 'mono' },
             { family: 'Source Code Pro', category: 'mono' },
             { family: 'IBM Plex Mono', category: 'mono' },
@@ -1560,17 +1591,22 @@ window.__ModuleLoader__.load({
             { family: 'Bricolage Grotesque', category: 'display' },
             { family: 'Instrument Serif', category: 'display' },
         ];
-        const CDN_BASE = 'https://fonts.googleapis.com/css2';
+        const CDN_BASE = 'https://cdn.jsdelivr.net/gh/d0nj/dsh-fonts@v1.0.0/fonts';
         /** Stylesheets outlive any one render, and a repeat request is a wasted round-trip. */
         const requested = new Set();
+        /**
+         * @param family - the family to address.
+         * @returns its directory name in the mirror.
+         */
+        function fontSlug(family) {
+            return family.toLowerCase().replaceAll(' ', '-').replaceAll(/[^a-z0-9-]/gu, '');
+        }
         /**
          * @param font - the family to request.
          * @returns an absolute stylesheet URL.
          */
         function hostedFontUrl(font) {
-            const name = font.family.trim().replace(/\s+/gu, '+');
-            const weights = (font.weights ?? [400]).join(';');
-            return `${CDN_BASE}?family=${name}:wght@${weights}&display=swap`;
+            return `${CDN_BASE}/${fontSlug(font.family)}/font.css`;
         }
         /**
          * Load one family into the page; resolves on failure too, because a font that
@@ -1615,7 +1651,7 @@ window.__ModuleLoader__.load({
             return fonts.find((font) => font.family.toLowerCase() === key);
         }
         //# sourceMappingURL=hosted-fonts.js.map
-        Object.assign(exports, { hostedFontUrl: hostedFontUrl, loadHostedFont: loadHostedFont, hostedFamilies: hostedFamilies, findHostedFont: findHostedFont, HOSTED_FONTS: HOSTED_FONTS });
+        Object.assign(exports, { fontSlug: fontSlug, hostedFontUrl: hostedFontUrl, loadHostedFont: loadHostedFont, hostedFamilies: hostedFamilies, findHostedFont: findHostedFont, HOSTED_FONTS: HOSTED_FONTS });
         
       },
     }

package/dist/client/hosted-fonts.d.ts

@@ -1,5 +1,9 @@
 /**
- * Families fetched from a font CDN on demand.
+ * Families loaded on demand from our own font mirror.
+ *
+ * The mirror keeps every family out of Google's hands: the plugin loads one
+ * stylesheet per pick, and the stylesheet's `unicode-range` rules make the
+ * browser download only the subsets the page needs.
  *
  * @module @d0nj/dsh-ui-custom/hosted-fonts
  */
@@ -7,14 +11,23 @@
 export type FontCategory = 'sans' | 'serif' | 'mono' | 'display';
 /** One hosted family this package can load. */
 export interface HostedFont {
-    /** CSS family name, exactly as the stylesheet declares it. */
+    /** CSS family name, exactly as the mirrored stylesheet declares it. */
     readonly family: string;
     /** Grouping in the picker. */
     readonly category: FontCategory;
-    /** Weights requested from the CDN; 400 is enough for body text. */
-    readonly weights?: readonly number[];
 }
+/**
+ * The catalog.
+ *
+ * A family added here is not loadable until the mirror carries it, so a new
+ * family means a new mirror tag and a new version of this package.
+ */
 export declare const HOSTED_FONTS: readonly HostedFont[];
+/**
+ * @param family - the family to address.
+ * @returns its directory name in the mirror.
+ */
+export declare function fontSlug(family: string): string;
 /**
  * @param font - the family to request.
  * @returns an absolute stylesheet URL.

package/dist/client/hosted-fonts.js

@@ -1,8 +1,18 @@
 /**
- * Families fetched from a font CDN on demand.
+ * Families loaded on demand from our own font mirror.
+ *
+ * The mirror keeps every family out of Google's hands: the plugin loads one
+ * stylesheet per pick, and the stylesheet's `unicode-range` rules make the
+ * browser download only the subsets the page needs.
  *
  * @module @d0nj/dsh-ui-custom/hosted-fonts
  */
+/**
+ * The catalog.
+ *
+ * A family added here is not loadable until the mirror carries it, so a new
+ * family means a new mirror tag and a new version of this package.
+ */
 export const HOSTED_FONTS = [
     { family: 'Inter', category: 'sans' },
     { family: 'IBM Plex Sans', category: 'sans' },
@@ -23,6 +33,10 @@ export const HOSTED_FONTS = [
     { family: 'Sora', category: 'sans' },
     { family: 'Space Grotesk', category: 'sans' },
     { family: 'JetBrains Mono', category: 'mono' },
+    { family: 'Geist Mono', category: 'mono' },
+    { family: 'Victor Mono', category: 'mono' },
+    { family: 'MonoLisa', category: 'mono' },
+    { family: 'SF Mono', category: 'mono' },
     { family: 'Fira Code', category: 'mono' },
     { family: 'Source Code Pro', category: 'mono' },
     { family: 'IBM Plex Mono', category: 'mono' },
@@ -41,17 +55,22 @@ export const HOSTED_FONTS = [
     { family: 'Bricolage Grotesque', category: 'display' },
     { family: 'Instrument Serif', category: 'display' },
 ];
-const CDN_BASE = 'https://fonts.googleapis.com/css2';
+const CDN_BASE = 'https://cdn.jsdelivr.net/gh/d0nj/dsh-fonts@v1.0.0/fonts';
 /** Stylesheets outlive any one render, and a repeat request is a wasted round-trip. */
 const requested = new Set();
+/**
+ * @param family - the family to address.
+ * @returns its directory name in the mirror.
+ */
+export function fontSlug(family) {
+    return family.toLowerCase().replaceAll(' ', '-').replaceAll(/[^a-z0-9-]/gu, '');
+}
 /**
  * @param font - the family to request.
  * @returns an absolute stylesheet URL.
  */
 export function hostedFontUrl(font) {
-    const name = font.family.trim().replace(/\s+/gu, '+');
-    const weights = (font.weights ?? [400]).join(';');
-    return `${CDN_BASE}?family=${name}:wght@${weights}&display=swap`;
+    return `${CDN_BASE}/${fontSlug(font.family)}/font.css`;
 }
 /**
  * Load one family into the page; resolves on failure too, because a font that

package/dist/client/panel.js

@@ -250,10 +250,10 @@ export function ThemeStudio(React, props) {
         const matches = () => {
             const query = combo.query.trim().toLowerCase();
             if (query === '')
-                return [DEFAULT_CHOICE, ...choices.slice(0, 39)];
+                return [DEFAULT_CHOICE, ...choices];
             const filtered = choices.filter((choice) => choice.toLowerCase().includes(query));
             const keepDefault = 'default (built-in)'.includes(query) || 'built-in'.includes(query);
-            return (keepDefault ? [DEFAULT_CHOICE, ...filtered] : filtered).slice(0, 40);
+            return keepDefault ? [DEFAULT_CHOICE, ...filtered] : filtered;
         };
         const commit = (value) => {
             combo.open = false;

package/dist/resolve.js

@@ -24,6 +24,11 @@ const GENERIC_FAMILIES = new Set([
     'fangsong', '-apple-system', 'blinkmacsystemfont',
     'inherit', 'initial', 'unset',
 ]);
+/** Tokens the Client paints with that no preset names; each follows a documented token. */
+const RUNTIME_ALIASES = [
+    ['--dsw-specific-input-major', '--dsw-alias-bg-layer-1'],
+    ['--dsw-alias-button-info-fill', '--dsw-alias-brand-primary'],
+];
 /**
  * Whether a value is a plausible CSS colour.
  *
@@ -145,6 +150,18 @@ export function resolveCustomization(document) {
         }
         tokens[name] = { light, dark };
     }
+    for (const [alias, source] of RUNTIME_ALIASES) {
+        const modes = tokens[source];
+        if (modes !== undefined)
+            tokens[alias] = modes;
+    }
+    const accent = tokens['--dsw-alias-button-info-fill'];
+    if (accent !== undefined) {
+        tokens['--dsw-alias-button-info-hover'] = {
+            light: `color-mix(in srgb, ${accent.light} 85%, black)`,
+            dark: `color-mix(in srgb, ${accent.dark} 85%, white)`,
+        };
+    }
     for (const [name, modes] of Object.entries(geometryTokens(document.geometry))) {
         tokens[name] = modes;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d0nj/dsh-ui-custom",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Theme, colour-token, typography and geometry customisation for the DeepSeek Harness Web UI, with presets and a live editor.",
   "license": "MIT",
   "repository": {