@sveltia/ui 0.75.6 → 0.76.1

package/dist/components/text-editor/shiki/version.d.ts

@@ -1,4 +1,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.75.6";
+export const UI_VERSION: "0.76.1";

package/dist/components/text-editor/shiki/version.js

@@ -3,4 +3,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = '0.75.6';
+export const UI_VERSION = '0.76.1';

package/dist/components/util/font-links.svelte

@@ -1,5 +1,11 @@
-<link rel="preconnect" href="https://cdn.jsdelivr.net/" />
-
+<!--
+  @component
+  Load the web fonts used by the components from the Fontsource CDN. The `@font-face` rules are
+  static, so they end up in the app’s stylesheet; fonts set with `setFontURLs()`, e.g. by
+  `@sveltia/ui/self-hosted`, take precedence over them. See `fonts.js` for the definitions, which a
+  test keeps in sync with the rules. There’s no `preconnect` hint: the rules and the text using the
+  fonts are rendered at the same time, so it wouldn’t start the connection any earlier.
+-->
 <style>
   /* https://fontsource.org/fonts/source-sans-3/cdn */
   @font-face {
@@ -31,7 +37,7 @@
     font-style: normal;
     font-display: block;
     font-weight: 400;
-    src: url(https://cdn.jsdelivr.net/fontsource/fonts/material-symbols-outlined:vf@5.3.1/latin-wght-normal.woff2)
+    src: url(https://cdn.jsdelivr.net/fontsource/fonts/material-symbols-outlined:vf@5.3.7/latin-wght-normal.woff2)
       format('woff2-variations');
     unicode-range:
       U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,

package/dist/components/util/font-links.svelte.d.ts

@@ -6,6 +6,13 @@ type FontLinks = SvelteComponent<{
 }, {}> & {
     $$bindings?: string | undefined;
 };
+/**
+ * Load the web fonts used by the components from the Fontsource CDN. The `@font-face` rules are
+ * static, so they end up in the app’s stylesheet; fonts set with `setFontURLs()`, e.g. by
+ * `@sveltia/ui/self-hosted`, take precedence over them. See `fonts.js` for the definitions, which a
+ * test keeps in sync with the rules. There’s no `preconnect` hint: the rules and the text using the
+ * fonts are rendered at the same time, so it wouldn’t start the connection any earlier.
+ */
 declare const FontLinks: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {

package/dist/components/util/fonts.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @import { FontDefinition } from '../../typedefs';
+ */
+/**
+ * Base URL of the Fontsource files on jsDelivr, from which the fonts are loaded by default.
+ * @see https://fontsource.org/docs/getting-started/cdn
+ */
+export const FONT_CDN_BASE_URL: "https://cdn.jsdelivr.net/fontsource/fonts";
+/**
+ * Web fonts used by the components. Each version is kept in sync with the Fontsource package in
+ * `devDependencies` by `scripts/copy-fonts.js`, which also copies the file for self-hosting.
+ * @type {FontDefinition[]}
+ */
+export const FONTS: FontDefinition[];
+export function getFontFileName({ packageName, subset }: FontDefinition): string;
+export function getCDNFontURL({ cdnId, version, subset }: FontDefinition): string;
+export function getFontFaceDescriptors({ weight, display, unicodeRange, sizeAdjust }: FontDefinition): FontFaceDescriptors;
+export function setFontURLs(urls: Record<string, string>): void;
+import type { FontDefinition } from '../../typedefs';

package/dist/components/util/fonts.js

@@ -0,0 +1,168 @@
+/**
+ * @import { FontDefinition } from '../../typedefs';
+ */
+
+/**
+ * Base URL of the Fontsource files on jsDelivr, from which the fonts are loaded by default.
+ * @see https://fontsource.org/docs/getting-started/cdn
+ */
+export const FONT_CDN_BASE_URL = 'https://cdn.jsdelivr.net/fontsource/fonts';
+
+/**
+ * Get the Unicode range of the Latin subset, which is the only one we use. It varies slightly by
+ * font, as Fontsource only lists the code points a font covers.
+ * @param {string[]} [extra] Extra code points covered by the font.
+ * @returns {string} Unicode range.
+ */
+const getLatinUnicodeRange = (extra = []) =>
+  [
+    'U+0000-00FF',
+    'U+0131',
+    'U+0152-0153',
+    'U+02BB-02BC',
+    'U+02C6',
+    'U+02DA',
+    'U+02DC',
+    'U+0304',
+    'U+0308',
+    'U+0329',
+    'U+2000-206F',
+    ...extra,
+    'U+20AC',
+    'U+2122',
+    'U+2191',
+    'U+2193',
+    'U+2212',
+    'U+2215',
+    'U+FEFF',
+    'U+FFFD',
+  ].join(', ');
+
+/**
+ * Web fonts used by the components. Each version is kept in sync with the Fontsource package in
+ * `devDependencies` by `scripts/copy-fonts.js`, which also copies the file for self-hosting.
+ * @type {FontDefinition[]}
+ */
+export const FONTS = [
+  {
+    family: 'Source Sans 3',
+    packageName: '@fontsource-variable/source-sans-3',
+    version: '5.3.0',
+    cdnId: 'source-sans-3:vf',
+    subset: 'latin-wght-normal',
+    format: 'woff2-variations',
+    weight: '200 900',
+    display: 'swap',
+    unicodeRange: getLatinUnicodeRange(),
+    sizeAdjust: '110%',
+  },
+  {
+    family: 'Noto Mono',
+    packageName: '@fontsource/noto-mono',
+    version: '5.3.0',
+    cdnId: 'noto-mono',
+    subset: 'latin-400-normal',
+    format: 'woff2',
+    weight: '400',
+    display: 'swap',
+  },
+  {
+    family: 'Material Symbols Outlined',
+    packageName: '@fontsource-variable/material-symbols-outlined',
+    version: '5.3.7',
+    cdnId: 'material-symbols-outlined:vf',
+    subset: 'latin-wght-normal',
+    format: 'woff2-variations',
+    weight: '400',
+    display: 'block',
+    unicodeRange: getLatinUnicodeRange(['U+2074']),
+  },
+];
+
+/**
+ * Get the name of a font file, as published in the Fontsource package, e.g.
+ * `source-sans-3-latin-wght-normal.woff2`.
+ * @param {FontDefinition} font Font.
+ * @returns {string} File name.
+ */
+export const getFontFileName = ({ packageName, subset }) =>
+  `${packageName.split('/')[1]}-${subset}.woff2`;
+
+/**
+ * Get the URL of a font file on the CDN.
+ * @param {FontDefinition} font Font.
+ * @returns {string} URL.
+ */
+export const getCDNFontURL = ({ cdnId, version, subset }) =>
+  `${FONT_CDN_BASE_URL}/${cdnId}@${version}/${subset}.woff2`;
+
+/**
+ * Font faces registered with {@link setFontURLs}, removed again when the URLs are replaced.
+ * @type {FontFace[]}
+ */
+let registeredFontFaces = [];
+
+/**
+ * Get the descriptors of a font, as `@font-face` in `font-links.svelte` declares them for the CDN.
+ * A registered font face only takes over from the CDN one if they match.
+ * @param {FontDefinition} font Font.
+ * @returns {FontFaceDescriptors} Descriptors.
+ */
+export const getFontFaceDescriptors = ({ weight, display, unicodeRange, sizeAdjust }) => ({
+  style: 'normal',
+  weight,
+  display: /** @type {FontDisplay} */ (display),
+  ...(unicodeRange ? { unicodeRange } : {}),
+  ...(sizeAdjust ? { sizeAdjust } : {}),
+});
+
+/**
+ * Load the fonts from the given URLs instead of the CDN, so they can be self-hosted. The
+ * `setupSelfHostedAssets()` function of `@sveltia/ui/self-hosted` calls this with the fonts
+ * bundled with the package.
+ *
+ * The fonts are registered with the CSS Font Loading API, which is subject to the `font-src`
+ * directive of a Content Security Policy but not `style-src`. A font face added to the document’s
+ * font set takes precedence over the `@font-face` rule for the CDN with the same descriptors, so
+ * the CDN file is never fetched. This only works in the browser: in a
+ * server-rendered app, the first paint happens with the CDN fonts before the app is hydrated.
+ * Call it before the `AppShell` component is mounted, so no font is fetched from the CDN first.
+ * @param {Record<string, string>} urls URLs keyed with the Fontsource file name, e.g.
+ * `source-sans-3-latin-wght-normal.woff2`. Any font omitted, or whose file fails to load, is still
+ * loaded from the CDN; a failure is reported in the console.
+ */
+export const setFontURLs = (urls) => {
+  if (typeof document === 'undefined' || !document.fonts) {
+    return;
+  }
+
+  registeredFontFaces.forEach((fontFace) => document.fonts.delete(fontFace));
+
+  registeredFontFaces = FONTS.flatMap((font) => {
+    const url = urls[getFontFileName(font)];
+
+    if (!url) {
+      return [];
+    }
+
+    const fontFace = new FontFace(
+      font.family,
+      `url(${JSON.stringify(url)}) format('${font.format}')`,
+      getFontFaceDescriptors(font),
+    );
+
+    document.fonts.add(fontFace);
+
+    // The browser falls back to the `@font-face` rule for the CDN if the file can’t be loaded,
+    // which goes unnoticed otherwise. `loaded` settles once the font is used, without forcing a
+    // download
+    fontFace.loaded.catch(() => {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Failed to load the ${font.family} font from ${url}. It’s loaded from the CDN instead.`,
+      );
+    });
+
+    return [fontFace];
+  });
+};

package/dist/index.d.ts

@@ -86,5 +86,6 @@ export { loadCodeHighlighter } from "./components/text-editor/core.js";
 export { setCodeHighlighterCacheEnabled } from "./components/text-editor/shiki/cache.js";
 export { highlightCodeToHTML } from "./components/text-editor/shiki/facade.js";
 export { setCodeHighlighterLoaders } from "./components/text-editor/shiki/loader.js";
+export { setFontURLs } from "./components/util/fonts.js";
 export * from "./typedefs.js";
 export { initLocales, strings } from "./services/i18n.js";

package/dist/index.js

@@ -86,6 +86,7 @@ export { loadCodeHighlighter } from './components/text-editor/core.js';
 export { setCodeHighlighterCacheEnabled } from './components/text-editor/shiki/cache.js';
 export { highlightCodeToHTML } from './components/text-editor/shiki/facade.js';
 export { setCodeHighlighterLoaders } from './components/text-editor/shiki/loader.js';
+export { setFontURLs } from './components/util/fonts.js';
 export { initLocales, strings } from './services/i18n.js';
 
 // eslint-disable-next-line import/export

package/dist/self-hosted/fonts/material-symbols-outlined.LICENSE.txt

@@ -0,0 +1,93 @@
+Google Inc.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/self-hosted/fonts/noto-mono.LICENSE.txt

@@ -0,0 +1,94 @@
+Copyright 2018 The Noto Project Authors (github.com/googlei18n/noto-fonts)
+
+This Font Software is licensed under the SIL Open Font License,
+Version 1.1.
+
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font
+creation efforts of academic and linguistic communities, and to
+provide a free and open framework in which fonts may be shared and
+improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply to
+any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software
+components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to,
+deleting, or substituting -- in part or in whole -- any of the
+components of the Original Version, by changing formats or by porting
+the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed,
+modify, redistribute, and sell modified and unmodified copies of the
+Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in
+Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the
+corresponding Copyright Holder. This restriction only applies to the
+primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created using
+the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/self-hosted/fonts/source-sans-3.LICENSE.txt

@@ -0,0 +1,93 @@
+Google Inc.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/self-hosted/generated.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Loaders of the syntax highlighting grammars, keyed with the canonical language ID.
+ * @type {Record<string, () => Promise<any>>}
+ */
+export const LANGUAGE_LOADERS: Record<string, () => Promise<any>>;
+/**
+ * Loaders of the syntax highlighting themes, keyed with the theme ID. Only the themes the code
+ * editor uses are included, so the other themes aren’t published with the consumer’s app; a theme
+ * without a loader leaves code as plain text.
+ * @type {Record<string, () => Promise<any>>}
+ */
+export const THEME_LOADERS: Record<string, () => Promise<any>>;

package/dist/self-hosted/generated.js

@@ -0,0 +1,261 @@
+// Generated by `scripts/generate-shiki-metadata.js`. DO NOT EDIT.
+
+/**
+ * Loaders of the syntax highlighting grammars, keyed with the canonical language ID.
+ * @type {Record<string, () => Promise<any>>}
+ */
+export const LANGUAGE_LOADERS = {
+  "bsl": () => import('@shikijs/langs/bsl'),
+  "sdbl": () => import('@shikijs/langs/sdbl'),
+  "abap": () => import('@shikijs/langs/abap'),
+  "actionscript-3": () => import('@shikijs/langs/actionscript-3'),
+  "ada": () => import('@shikijs/langs/ada'),
+  "angular-html": () => import('@shikijs/langs/angular-html'),
+  "angular-ts": () => import('@shikijs/langs/angular-ts'),
+  "apache": () => import('@shikijs/langs/apache'),
+  "apex": () => import('@shikijs/langs/apex'),
+  "apl": () => import('@shikijs/langs/apl'),
+  "applescript": () => import('@shikijs/langs/applescript'),
+  "ara": () => import('@shikijs/langs/ara'),
+  "asciidoc": () => import('@shikijs/langs/asciidoc'),
+  "razor": () => import('@shikijs/langs/razor'),
+  "asm": () => import('@shikijs/langs/asm'),
+  "astro": () => import('@shikijs/langs/astro'),
+  "ahk": () => import('@shikijs/langs/ahk'),
+  "ahk2": () => import('@shikijs/langs/ahk2'),
+  "awk": () => import('@shikijs/langs/awk'),
+  "ballerina": () => import('@shikijs/langs/ballerina'),
+  "bat": () => import('@shikijs/langs/bat'),
+  "beancount": () => import('@shikijs/langs/beancount'),
+  "berry": () => import('@shikijs/langs/berry'),
+  "bibtex": () => import('@shikijs/langs/bibtex'),
+  "bicep": () => import('@shikijs/langs/bicep'),
+  "bird2": () => import('@shikijs/langs/bird2'),
+  "blade": () => import('@shikijs/langs/blade'),
+  "c": () => import('@shikijs/langs/c'),
+  "csharp": () => import('@shikijs/langs/csharp'),
+  "cpp": () => import('@shikijs/langs/cpp'),
+  "c3": () => import('@shikijs/langs/c3'),
+  "cadence": () => import('@shikijs/langs/cadence'),
+  "cairo": () => import('@shikijs/langs/cairo'),
+  "chapel": () => import('@shikijs/langs/chapel'),
+  "clarity": () => import('@shikijs/langs/clarity'),
+  "clojure": () => import('@shikijs/langs/clojure'),
+  "soy": () => import('@shikijs/langs/soy'),
+  "cmake": () => import('@shikijs/langs/cmake'),
+  "cobol": () => import('@shikijs/langs/cobol'),
+  "codeowners": () => import('@shikijs/langs/codeowners'),
+  "codeql": () => import('@shikijs/langs/codeql'),
+  "coffee": () => import('@shikijs/langs/coffee'),
+  "common-lisp": () => import('@shikijs/langs/common-lisp'),
+  "crystal": () => import('@shikijs/langs/crystal'),
+  "css": () => import('@shikijs/langs/css'),
+  "csv": () => import('@shikijs/langs/csv'),
+  "cue": () => import('@shikijs/langs/cue'),
+  "cypher": () => import('@shikijs/langs/cypher'),
+  "d": () => import('@shikijs/langs/d'),
+  "dart": () => import('@shikijs/langs/dart'),
+  "dax": () => import('@shikijs/langs/dax'),
+  "desktop": () => import('@shikijs/langs/desktop'),
+  "diff": () => import('@shikijs/langs/diff'),
+  "docker": () => import('@shikijs/langs/docker'),
+  "dotenv": () => import('@shikijs/langs/dotenv'),
+  "dream-maker": () => import('@shikijs/langs/dream-maker'),
+  "edge": () => import('@shikijs/langs/edge'),
+  "elixir": () => import('@shikijs/langs/elixir'),
+  "elm": () => import('@shikijs/langs/elm'),
+  "emacs-lisp": () => import('@shikijs/langs/emacs-lisp'),
+  "erb": () => import('@shikijs/langs/erb'),
+  "erlang": () => import('@shikijs/langs/erlang'),
+  "fsharp": () => import('@shikijs/langs/fsharp'),
+  "fennel": () => import('@shikijs/langs/fennel'),
+  "fish": () => import('@shikijs/langs/fish'),
+  "fluent": () => import('@shikijs/langs/fluent'),
+  "fortran-fixed-form": () => import('@shikijs/langs/fortran-fixed-form'),
+  "fortran-free-form": () => import('@shikijs/langs/fortran-free-form'),
+  "gdresource": () => import('@shikijs/langs/gdresource'),
+  "gdscript": () => import('@shikijs/langs/gdscript'),
+  "gdshader": () => import('@shikijs/langs/gdshader'),
+  "genie": () => import('@shikijs/langs/genie'),
+  "po": () => import('@shikijs/langs/po'),
+  "gherkin": () => import('@shikijs/langs/gherkin'),
+  "git-commit": () => import('@shikijs/langs/git-commit'),
+  "git-rebase": () => import('@shikijs/langs/git-rebase'),
+  "gleam": () => import('@shikijs/langs/gleam'),
+  "glimmer-js": () => import('@shikijs/langs/glimmer-js'),
+  "glimmer-ts": () => import('@shikijs/langs/glimmer-ts'),
+  "glsl": () => import('@shikijs/langs/glsl'),
+  "gn": () => import('@shikijs/langs/gn'),
+  "smalltalk": () => import('@shikijs/langs/smalltalk'),
+  "gnuplot": () => import('@shikijs/langs/gnuplot'),
+  "go": () => import('@shikijs/langs/go'),
+  "graphql": () => import('@shikijs/langs/graphql'),
+  "groovy": () => import('@shikijs/langs/groovy'),
+  "hack": () => import('@shikijs/langs/hack'),
+  "handlebars": () => import('@shikijs/langs/handlebars'),
+  "hcl": () => import('@shikijs/langs/hcl'),
+  "haskell": () => import('@shikijs/langs/haskell'),
+  "haxe": () => import('@shikijs/langs/haxe'),
+  "hjson": () => import('@shikijs/langs/hjson'),
+  "hlsl": () => import('@shikijs/langs/hlsl'),
+  "html": () => import('@shikijs/langs/html'),
+  "html-derivative": () => import('@shikijs/langs/html-derivative'),
+  "http": () => import('@shikijs/langs/http'),
+  "hurl": () => import('@shikijs/langs/hurl'),
+  "hxml": () => import('@shikijs/langs/hxml'),
+  "hy": () => import('@shikijs/langs/hy'),
+  "imba": () => import('@shikijs/langs/imba'),
+  "ini": () => import('@shikijs/langs/ini'),
+  "java": () => import('@shikijs/langs/java'),
+  "javascript": () => import('@shikijs/langs/javascript'),
+  "jinja": () => import('@shikijs/langs/jinja'),
+  "jison": () => import('@shikijs/langs/jison'),
+  "json": () => import('@shikijs/langs/json'),
+  "jsonl": () => import('@shikijs/langs/jsonl'),
+  "jsonc": () => import('@shikijs/langs/jsonc'),
+  "json5": () => import('@shikijs/langs/json5'),
+  "jsonnet": () => import('@shikijs/langs/jsonnet'),
+  "jssm": () => import('@shikijs/langs/jssm'),
+  "jsx": () => import('@shikijs/langs/jsx'),
+  "julia": () => import('@shikijs/langs/julia'),
+  "just": () => import('@shikijs/langs/just'),
+  "kdl": () => import('@shikijs/langs/kdl'),
+  "kotlin": () => import('@shikijs/langs/kotlin'),
+  "kusto": () => import('@shikijs/langs/kusto'),
+  "latex": () => import('@shikijs/langs/latex'),
+  "lean": () => import('@shikijs/langs/lean'),
+  "less": () => import('@shikijs/langs/less'),
+  "liquid": () => import('@shikijs/langs/liquid'),
+  "llvm": () => import('@shikijs/langs/llvm'),
+  "log": () => import('@shikijs/langs/log'),
+  "logo": () => import('@shikijs/langs/logo'),
+  "lua": () => import('@shikijs/langs/lua'),
+  "luau": () => import('@shikijs/langs/luau'),
+  "make": () => import('@shikijs/langs/make'),
+  "markdown": () => import('@shikijs/langs/markdown'),
+  "marko": () => import('@shikijs/langs/marko'),
+  "matlab": () => import('@shikijs/langs/matlab'),
+  "mdc": () => import('@shikijs/langs/mdc'),
+  "mdx": () => import('@shikijs/langs/mdx'),
+  "mermaid": () => import('@shikijs/langs/mermaid'),
+  "mipsasm": () => import('@shikijs/langs/mipsasm'),
+  "mojo": () => import('@shikijs/langs/mojo'),
+  "moonbit": () => import('@shikijs/langs/moonbit'),
+  "move": () => import('@shikijs/langs/move'),
+  "narrat": () => import('@shikijs/langs/narrat'),
+  "nextflow": () => import('@shikijs/langs/nextflow'),
+  "nextflow-groovy": () => import('@shikijs/langs/nextflow-groovy'),
+  "nginx": () => import('@shikijs/langs/nginx'),
+  "nim": () => import('@shikijs/langs/nim'),
+  "nix": () => import('@shikijs/langs/nix'),
+  "nsis": () => import('@shikijs/langs/nsis'),
+  "nushell": () => import('@shikijs/langs/nushell'),
+  "objective-c": () => import('@shikijs/langs/objective-c'),
+  "objective-cpp": () => import('@shikijs/langs/objective-cpp'),
+  "ocaml": () => import('@shikijs/langs/ocaml'),
+  "odin": () => import('@shikijs/langs/odin'),
+  "openscad": () => import('@shikijs/langs/openscad'),
+  "org": () => import('@shikijs/langs/org'),
+  "pascal": () => import('@shikijs/langs/pascal'),
+  "perl": () => import('@shikijs/langs/perl'),
+  "php": () => import('@shikijs/langs/php'),
+  "pkl": () => import('@shikijs/langs/pkl'),
+  "plsql": () => import('@shikijs/langs/plsql'),
+  "polar": () => import('@shikijs/langs/polar'),
+  "postcss": () => import('@shikijs/langs/postcss'),
+  "powerquery": () => import('@shikijs/langs/powerquery'),
+  "powershell": () => import('@shikijs/langs/powershell'),
+  "prisma": () => import('@shikijs/langs/prisma'),
+  "prolog": () => import('@shikijs/langs/prolog'),
+  "proto": () => import('@shikijs/langs/proto'),
+  "pug": () => import('@shikijs/langs/pug'),
+  "puppet": () => import('@shikijs/langs/puppet'),
+  "purescript": () => import('@shikijs/langs/purescript'),
+  "python": () => import('@shikijs/langs/python'),
+  "qml": () => import('@shikijs/langs/qml'),
+  "qmldir": () => import('@shikijs/langs/qmldir'),
+  "qss": () => import('@shikijs/langs/qss'),
+  "r": () => import('@shikijs/langs/r'),
+  "racket": () => import('@shikijs/langs/racket'),
+  "raku": () => import('@shikijs/langs/raku'),
+  "rbs": () => import('@shikijs/langs/rbs'),
+  "regexp": () => import('@shikijs/langs/regexp'),
+  "rel": () => import('@shikijs/langs/rel'),
+  "rst": () => import('@shikijs/langs/rst'),
+  "riscv": () => import('@shikijs/langs/riscv'),
+  "coq": () => import('@shikijs/langs/coq'),
+  "ron": () => import('@shikijs/langs/ron'),
+  "rosmsg": () => import('@shikijs/langs/rosmsg'),
+  "ruby": () => import('@shikijs/langs/ruby'),
+  "haml": () => import('@shikijs/langs/haml'),
+  "rust": () => import('@shikijs/langs/rust'),
+  "sas": () => import('@shikijs/langs/sas'),
+  "sass": () => import('@shikijs/langs/sass'),
+  "scala": () => import('@shikijs/langs/scala'),
+  "scheme": () => import('@shikijs/langs/scheme'),
+  "scss": () => import('@shikijs/langs/scss'),
+  "shaderlab": () => import('@shikijs/langs/shaderlab'),
+  "shellscript": () => import('@shikijs/langs/shellscript'),
+  "shellsession": () => import('@shikijs/langs/shellsession'),
+  "smithy": () => import('@shikijs/langs/smithy'),
+  "solidity": () => import('@shikijs/langs/solidity'),
+  "sparql": () => import('@shikijs/langs/sparql'),
+  "splunk": () => import('@shikijs/langs/splunk'),
+  "sql": () => import('@shikijs/langs/sql'),
+  "ssh-config": () => import('@shikijs/langs/ssh-config'),
+  "stata": () => import('@shikijs/langs/stata'),
+  "stylus": () => import('@shikijs/langs/stylus'),
+  "surrealql": () => import('@shikijs/langs/surrealql'),
+  "svelte": () => import('@shikijs/langs/svelte'),
+  "swift": () => import('@shikijs/langs/swift'),
+  "systemd": () => import('@shikijs/langs/systemd'),
+  "system-verilog": () => import('@shikijs/langs/system-verilog'),
+  "talonscript": () => import('@shikijs/langs/talonscript'),
+  "tasl": () => import('@shikijs/langs/tasl'),
+  "tcl": () => import('@shikijs/langs/tcl'),
+  "templ": () => import('@shikijs/langs/templ'),
+  "terraform": () => import('@shikijs/langs/terraform'),
+  "tex": () => import('@shikijs/langs/tex'),
+  "toml": () => import('@shikijs/langs/toml'),
+  "tsv": () => import('@shikijs/langs/tsv'),
+  "tsx": () => import('@shikijs/langs/tsx'),
+  "turtle": () => import('@shikijs/langs/turtle'),
+  "twig": () => import('@shikijs/langs/twig'),
+  "typescript": () => import('@shikijs/langs/typescript'),
+  "ts-tags": () => import('@shikijs/langs/ts-tags'),
+  "typespec": () => import('@shikijs/langs/typespec'),
+  "typst": () => import('@shikijs/langs/typst'),
+  "v": () => import('@shikijs/langs/v'),
+  "vala": () => import('@shikijs/langs/vala'),
+  "verilog": () => import('@shikijs/langs/verilog'),
+  "vhdl": () => import('@shikijs/langs/vhdl'),
+  "viml": () => import('@shikijs/langs/viml'),
+  "vb": () => import('@shikijs/langs/vb'),
+  "vue": () => import('@shikijs/langs/vue'),
+  "vue-html": () => import('@shikijs/langs/vue-html'),
+  "vue-vine": () => import('@shikijs/langs/vue-vine'),
+  "vyper": () => import('@shikijs/langs/vyper'),
+  "wasm": () => import('@shikijs/langs/wasm'),
+  "wit": () => import('@shikijs/langs/wit'),
+  "wenyan": () => import('@shikijs/langs/wenyan'),
+  "wgsl": () => import('@shikijs/langs/wgsl'),
+  "wikitext": () => import('@shikijs/langs/wikitext'),
+  "reg": () => import('@shikijs/langs/reg'),
+  "wolfram": () => import('@shikijs/langs/wolfram'),
+  "xml": () => import('@shikijs/langs/xml'),
+  "xsl": () => import('@shikijs/langs/xsl'),
+  "yaml": () => import('@shikijs/langs/yaml'),
+  "zenscript": () => import('@shikijs/langs/zenscript'),
+  "zig": () => import('@shikijs/langs/zig'),
+};
+
+/**
+ * Loaders of the syntax highlighting themes, keyed with the theme ID. Only the themes the code
+ * editor uses are included, so the other themes aren’t published with the consumer’s app; a theme
+ * without a loader leaves code as plain text.
+ * @type {Record<string, () => Promise<any>>}
+ */
+export const THEME_LOADERS = {
+  "github-light": () => import('@shikijs/themes/github-light'),
+  "github-dark": () => import('@shikijs/themes/github-dark'),
+};

package/dist/self-hosted/index.d.ts

@@ -0,0 +1 @@
+export function setupSelfHostedAssets(): void;

package/dist/self-hosted/index.js

@@ -0,0 +1,47 @@
+import { setCodeHighlighterLoaders } from '../components/text-editor/shiki/loader.js';
+import { setFontURLs } from '../components/util/fonts.js';
+import { LANGUAGE_LOADERS, THEME_LOADERS } from './generated.js';
+
+/**
+ * Serve the fonts and the syntax highlighting engine, grammars and themes from the app itself
+ * rather than the CDNs, so the components don’t contact any third party. Only the light and dark
+ * themes the code editor uses are included; add loaders with `setCodeHighlighterLoaders()` to pass
+ * another theme to `highlightCodeToHTML()`. Every file becomes a
+ * separate asset or chunk of the consumer’s bundle, only loaded when needed. Call this before the
+ * `AppShell` component is mounted.
+ *
+ * ```js
+ * import { setupSelfHostedAssets } from '@sveltia/ui/self-hosted';
+ *
+ * setupSelfHostedAssets();
+ * ```
+ */
+export const setupSelfHostedAssets = () => {
+  // Spelled out one by one, as a bundler only picks up a literal `new URL()` as an asset
+  setFontURLs({
+    'source-sans-3-latin-wght-normal.woff2': new URL(
+      './fonts/source-sans-3-latin-wght-normal.woff2',
+      import.meta.url,
+    ).href,
+    'noto-mono-latin-400-normal.woff2': new URL(
+      './fonts/noto-mono-latin-400-normal.woff2',
+      import.meta.url,
+    ).href,
+    'material-symbols-outlined-latin-wght-normal.woff2': new URL(
+      './fonts/material-symbols-outlined-latin-wght-normal.woff2',
+      import.meta.url,
+    ).href,
+  });
+
+  setCodeHighlighterLoaders({
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    loadEngine: () =>
+      // @ts-ignore The engine is built into `dist` by `scripts/build-shiki-engine.js`, so it can’t
+      // be resolved before a build, e.g. when the types are checked in CI
+      import('@sveltia/ui/shiki-engine'),
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    loadLanguage: (id) => LANGUAGE_LOADERS[id]?.(),
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    loadTheme: (id) => THEME_LOADERS[id]?.(),
+  });
+};

package/dist/shiki-engine.d.ts

@@ -0,0 +1,6 @@
+export declare const createHighlighterCoreSync: (...args: any[]) => any;
+export declare const createJavaScriptRegexEngine: (...args: any[]) => any;
+export declare const getTokenStyleObject: (...args: any[]) => any;
+export declare const isSpecialLang: (...args: any[]) => any;
+export declare const isSpecialTheme: (...args: any[]) => any;
+export declare const stringifyTokenStyle: (...args: any[]) => any;

package/dist/typedefs.d.ts

@@ -862,6 +862,52 @@ export type CodeHighlighterLoaders = {
      */
     loadTheme: (id: string) => Promise<any>;
 };
+/**
+ * Web font used by the components, published on Fontsource.
+ */
+export type FontDefinition = {
+    /**
+     * Font family name.
+     */
+    family: string;
+    /**
+     * Fontsource package name, e.g. `@fontsource/noto-mono`.
+     */
+    packageName: string;
+    /**
+     * Fontsource package version.
+     */
+    version: string;
+    /**
+     * Font ID on the Fontsource CDN, e.g. `noto-mono`, with a `:vf` suffix
+     * for a variable font.
+     */
+    cdnId: string;
+    /**
+     * Subset, weight and style of the file, e.g. `latin-400-normal`.
+     */
+    subset: string;
+    /**
+     * `@font-face` format hint.
+     */
+    format: string;
+    /**
+     * `@font-face` weight, or weight range for a variable font.
+     */
+    weight: string;
+    /**
+     * `@font-face` display strategy.
+     */
+    display: string;
+    /**
+     * `@font-face` Unicode range.
+     */
+    unicodeRange?: string | undefined;
+    /**
+     * `@font-face` size adjustment.
+     */
+    sizeAdjust?: string | undefined;
+};
 export type CodeTokenizer = {
     /**
      * Language to fall back to when a code node doesn’t carry

package/dist/typedefs.js

@@ -369,6 +369,22 @@
  * @property {(id: string) => Promise<any>} loadTheme Load a theme by ID.
  */
 
+/**
+ * Web font used by the components, published on Fontsource.
+ * @typedef {object} FontDefinition
+ * @property {string} family Font family name.
+ * @property {string} packageName Fontsource package name, e.g. `@fontsource/noto-mono`.
+ * @property {string} version Fontsource package version.
+ * @property {string} cdnId Font ID on the Fontsource CDN, e.g. `noto-mono`, with a `:vf` suffix
+ * for a variable font.
+ * @property {string} subset Subset, weight and style of the file, e.g. `latin-400-normal`.
+ * @property {string} format `@font-face` format hint.
+ * @property {string} weight `@font-face` weight, or weight range for a variable font.
+ * @property {string} display `@font-face` display strategy.
+ * @property {string} [unicodeRange] `@font-face` Unicode range.
+ * @property {string} [sizeAdjust] `@font-face` size adjustment.
+ */
+
 /**
  * @typedef {object} CodeTokenizer
  * @property {string | null} defaultLanguage Language to fall back to when a code node doesn’t carry

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.75.6",
+  "version": "0.76.1",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -20,7 +20,14 @@
       "default": "./dist/index.js"
     },
     "./locales/*": "./dist/locales/*",
-    "./shiki-engine": "./dist/shiki-engine.js"
+    "./self-hosted": {
+      "types": "./dist/self-hosted/index.d.ts",
+      "default": "./dist/self-hosted/index.js"
+    },
+    "./shiki-engine": {
+      "types": "./dist/shiki-engine.d.ts",
+      "default": "./dist/shiki-engine.js"
+    }
   },
   "svelte": "./dist/index.js",
   "typesVersions": {
@@ -47,11 +54,16 @@
     "@lexical/selection": "^0.51.0",
     "@lexical/table": "^0.51.0",
     "@lexical/utils": "^0.51.0",
+    "@shikijs/langs": "4.4.3",
+    "@shikijs/themes": "4.4.3",
     "@sveltia/i18n": "^1.4.0",
     "@sveltia/utils": "^0.12.1",
     "lexical": "^0.51.0"
   },
   "devDependencies": {
+    "@fontsource-variable/material-symbols-outlined": "5.3.7",
+    "@fontsource-variable/source-sans-3": "5.3.0",
+    "@fontsource/noto-mono": "5.3.0",
     "@rollup/plugin-yaml": "^5.0.0",
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/kit": "^2.70.3",
@@ -97,7 +109,7 @@
     "provenance": true
   },
   "scripts": {
-    "build": "npm run generate:shiki && svelte-kit sync && svelte-package && node scripts/build-shiki-engine.js",
+    "build": "npm run generate:shiki && npm run generate:fonts && svelte-kit sync && svelte-package && node scripts/build-shiki-engine.js",
     "build:watch": "svelte-kit sync && svelte-package --watch",
     "check": "pnpm run --no-bail '/^check:.*/'",
     "check:audit": "pnpm audit --ignore-registry-errors",
@@ -110,6 +122,7 @@
     "dev": "vite dev",
     "format": "prettier --write .",
     "generate:emoji": "node scripts/generate-emoji-data.js",
+    "generate:fonts": "node scripts/copy-fonts.js",
     "generate:shiki": "node scripts/generate-shiki-metadata.js",
     "preview": "vite preview",
     "test": "vitest run",