@sveltia/ui 0.62.1 → 0.63.1

package/dist/components/button/button.svelte

@@ -220,9 +220,7 @@ button.ghost[aria-pressed=true] {
   background-color: var(--sui-button-ghost-background-color-pressed, var(--sui-selected-background-color));
 }
 button.link {
-  outline: 0;
   margin: 0;
-  border-radius: 0 !important;
   padding: 0 !important;
   height: auto !important;
   color: var(--sui-button-link-foreground-color, var(--sui-primary-accent-color-text));
@@ -237,9 +235,6 @@ button.link .label {
 :global(:is(:root, :host)[data-underline-links='true']) button.link .label {
   text-decoration: underline;
 }
-button.link:is(:hover, :focus, :active) .label {
-  text-decoration: var(--sui-button-link-text-decoration-focus, underline);
-}
 button.small {
   border-radius: var(--sui-button-small-border-radius);
   padding: var(--sui-button-small-padding);

package/dist/components/listbox/option.svelte

@@ -50,6 +50,13 @@
     /* eslint-enable prefer-const */
   } = $props();
 
+  /**
+   * Fallback `id`, so the option can always be referenced by `aria-activedescendant`. `<Group>`
+   * assigns one to each member as it activates, but within a `<Combobox>` that happens while the
+   * dropdown is still collapsed and no option has rendered yet.
+   */
+  const fallbackId = $props.id();
+
   /**
    * The registry provided by an ancestor `<Combobox>`. This is `undefined` when the option is used
    * standalone within a `<Listbox>`, in which case it always renders itself.
@@ -126,6 +133,7 @@
     <Button
       {...restProps}
       role="option"
+      id={restProps.id ?? fallbackId}
       tabindex="-1"
       aria-selected={selected}
       {label}

package/dist/components/select/combobox.svelte

@@ -124,11 +124,63 @@
     onChange?.(new CustomEvent('Change', { detail }));
   };
 
+  /**
+   * The `<Listbox>` rendered for this combobox. It’s reached through {@link optionHost}, which owns
+   * it wherever the options currently live, rather than through the popup, which only holds it
+   * while the dropdown is expanded.
+   * @returns {HTMLElement | null | undefined} Listbox element.
+   */
+  const getListbox = () => optionHost?.querySelector('[role="listbox"]');
+
+  /**
+   * Make the selected option the starting point of the expanded dropdown: scroll it into view, and
+   * mark it as the focused member so the arrow keys carry on from there. A long option list is
+   * scrollable, and the dropdown would otherwise open at the top with the current selection nowhere
+   * to be seen — and the first arrow key would jump back up to the first option.
+   */
+  const revealSelectedOption = () => {
+    const listbox = getListbox();
+
+    const option = /** @type {HTMLElement | null | undefined} */ (
+      listbox?.querySelector('[role="option"][aria-selected="true"]')
+    );
+
+    if (!listbox || !option) {
+      return;
+    }
+
+    // `<Group>` tracks the focused member with this class, and moves it on from there
+    option.classList.add('focused');
+    listbox.setAttribute('aria-activedescendant', option.id);
+
+    option.scrollIntoView(true);
+  };
+
   // Let the options know whether they should render themselves
   $effect(() => {
     registry.expanded = isPopupOpen;
   });
 
+  // Reveal the selected option once the dropdown is expanded. The options are rendered and moved
+  // into the popup by the effects around this one, and the popup is then measured against the space
+  // below the anchor to get its height, so there is nothing to scroll until all of that has
+  // settled. The popup moves focus onto its first tab stop 100ms in, which scrolls that element
+  // into view in turn, so this has to come after it rather than be undone by it.
+  $effect(() => {
+    if (!isPopupOpen) {
+      return undefined;
+    }
+
+    const timer = globalThis.setTimeout(revealSelectedOption, 150);
+
+    return () => {
+      globalThis.clearTimeout(timer);
+      // The options are unmounted along with the popup, so the listbox is about to be pointing at
+      // an element that no longer exists
+      getListbox()?.removeAttribute('aria-activedescendant');
+    };
+  });
+
   // Move the options into the popup while it’s expanded, and back out before it’s unmounted. Only
   // the wrapper is moved, never its children, so Svelte keeps full ownership of the subtree.
   $effect(() => {
@@ -414,6 +466,7 @@
 }
 
 .combobox-inner {
+  flex: auto;
   display: flex;
   flex-direction: column;
   overflow: hidden;

package/dist/components/text-editor/constants.d.ts

@@ -8,7 +8,6 @@
  * TextEditorNodeType,
  * } from '../../typedefs';
  */
-export const PRISM_BASE_URL: "https://unpkg.com/prismjs@1.30.0";
 /**
  * @type {EditorThemeClasses}
  */

package/dist/components/text-editor/constants.js

@@ -1,4 +1,4 @@
-import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { CodeHighlightNode, CodeNode } from '@lexical/code-core';
 import { LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
 import {
@@ -30,8 +30,6 @@ import { HeadingNode, QuoteNode } from '@lexical/rich-text';
  * } from '../../typedefs';
  */
 
-export const PRISM_BASE_URL = `https://unpkg.com/prismjs@1.30.0`;
-
 /**
  * @type {EditorThemeClasses}
  */
@@ -50,39 +48,6 @@ export const EDITOR_THEME = {
     },
   },
   code: 'code-block',
-  // https://github.com/facebook/lexical/blob/main/packages/lexical-website/docs/getting-started/theming.md
-  codeHighlight: {
-    atrule: 'token atrule',
-    attr: 'token attr',
-    boolean: 'token boolean',
-    builtin: 'token builtin',
-    cdata: 'token cdata',
-    char: 'token char',
-    class: 'token class',
-    'class-name': 'token class-name',
-    comment: 'token comment',
-    constant: 'token constant',
-    deleted: 'token deleted',
-    doctype: 'token doctype',
-    entity: 'token entity',
-    function: 'token function',
-    important: 'token important',
-    inserted: 'token inserted',
-    keyword: 'token keyword',
-    namespace: 'token namespace',
-    number: 'token number',
-    operator: 'token operator',
-    prolog: 'token prolog',
-    property: 'token property',
-    punctuation: 'token punctuation',
-    regex: 'token regex',
-    selector: 'token selector',
-    string: 'token string',
-    symbol: 'token symbol',
-    tag: 'token tag',
-    url: 'token url',
-    variable: 'token variable',
-  },
 };
 
 /**

package/dist/components/text-editor/core.js

@@ -1,15 +1,10 @@
-// Work around the “Prism is not defined” error in consumers
-// @see https://github.com/remix-run/remix/discussions/8182
-import 'prismjs';
-
 import {
   CodeHighlightNode,
   CodeNode,
   $createCodeNode as createCodeNode,
   $isCodeHighlightNode as isCodeHighlightNode,
   $isCodeNode as isCodeNode,
-} from '@lexical/code';
-import { PrismTokenizer, registerCodeHighlighting } from '@lexical/code-prism';
+} from '@lexical/code-core';
 import { registerDragonSupport } from '@lexical/dragon';
 import { HorizontalRuleNode } from '@lexical/extension';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
@@ -59,17 +54,24 @@ import {
   OUTDENT_CONTENT_COMMAND,
   PASTE_COMMAND,
 } from 'lexical';
-import prismComponents from 'prismjs/components';
 import {
   BLOCK_BUTTON_TYPES,
   DISABLED_MARKDOWN_TAGS,
   EDITOR_THEME,
   NODE_MAP,
-  PRISM_BASE_URL,
   TEXT_FORMAT_BUTTON_TYPES,
   TRANSFORMER_MAP,
 } from './constants.js';
 import { increaseListIndentation, splitMultilineFormatting } from './markdown.js';
+import {
+  isPlainLanguage,
+  loadCodeLanguage,
+  loadCodeTheme,
+  loadEngine,
+  normalizeCodeLanguage,
+} from './shiki/facade.js';
+import { registerCodeHighlighting, shikiTokenizer } from './shiki/highlighter.js';
+import { getCodeTheme, observeCodeTheme } from './shiki/theme.js';
 import { HR } from './transformers/hr.js';
 import { TABLE } from './transformers/table.js';
 
@@ -267,13 +269,13 @@ export const initEditor = ({
   if (enabledButtons.includes('code-block') || isCodeEditor) {
     addUnregister(
       registerCodeHighlighting(editor, {
+        ...shikiTokenizer,
         defaultLanguage,
-        // eslint-disable-next-line jsdoc/require-jsdoc
-        tokenize: (code, lang = 'plain') =>
-          window.Prism.tokenize(code, window.Prism.languages[lang] ?? window.Prism.languages.plain),
-        $tokenize: PrismTokenizer.$tokenize,
+        defaultTheme: getCodeTheme(),
       }),
     );
+
+    addUnregister(observeCodeTheme(editor));
   }
 
   // https://github.com/facebook/lexical/blob/main/packages/lexical-link/src/LexicalLinkExtension.ts
@@ -466,31 +468,21 @@ export const initEditor = ({
 };
 
 /**
- * Load additional Prism syntax highlighter settings for the given programming language.
+ * Preload the syntax highlighter for the given programming language.
+ *
+ * Highlighting also works without this — the transform loads whatever it needs and re-highlights
+ * once it arrives — but preloading avoids a visible flash of unhighlighted code.
  * @param {string} lang Language name, like scss.
  */
 export const loadCodeHighlighter = async (lang) => {
-  if (lang in window.Prism.languages) {
+  if (isPlainLanguage(lang)) {
     return;
   }
 
-  const canonicalLang = Object.entries(prismComponents.languages).find(
-    // @ts-ignore
-    ([key, { alias }]) =>
-      key === lang ||
-      (Array.isArray(alias) ? alias.includes(lang) : /* v8 ignore next */ alias === lang),
-  )?.[0];
+  // The grammar and theme loaders are no-ops until the engine is in place
+  await loadEngine();
 
-  if (!canonicalLang) {
-    return;
-  }
-
-  try {
-    // eslint-disable-next-line jsdoc/no-bad-blocks
-    await import(/* @vite-ignore */ `${PRISM_BASE_URL}/components/prism-${canonicalLang}.min.js`);
-  } catch {
-    //
-  }
+  await Promise.all([loadCodeLanguage(normalizeCodeLanguage(lang)), loadCodeTheme(getCodeTheme())]);
 };
 
 /**
@@ -502,7 +494,8 @@ export const loadCodeHighlighter = async (lang) => {
  * @throws {Error} Failed to convert the value to Lexical nodes.
  */
 export const convertMarkdownToLexical = async (editor, value, enabledTransformers) => {
-  // Load Prism language support on demand; the `loadLanguages` Prism utility method cannot be used
+  // Preload the highlighter for every language used in the document, so code blocks are highlighted
+  // as soon as they appear rather than a moment later
   await Promise.all(
     [...value.matchAll(/^```(?<lang>.+?)\n/gm)].map(async ({ groups: { lang = 'plain' } = {} }) =>
       loadCodeHighlighter(lang),

package/dist/components/text-editor/lexical-root.svelte

@@ -222,72 +222,4 @@
   background-color: var(--sui-control-border-color);
   line-height: 2px;
   content: "";
-}
-
-:root[data-theme=light] .lexical-root :global(.token:is(.comment, .prolog, .doctype, .cdata)) {
-  color: slategray;
-}
-:root[data-theme=light] .lexical-root :global(.token.punctuation) {
-  color: #999;
-}
-:root[data-theme=light] .lexical-root :global(.token.namespace) {
-  opacity: 0.7;
-}
-:root[data-theme=light] .lexical-root :global(.token:is(.property, .tag, .boolean, .number, .constant, .symbol, .deleted)) {
-  color: #905;
-}
-:root[data-theme=light] .lexical-root :global(.token:is(.selector, .attr-name, .string, .char, .builtin, .inserted)) {
-  color: #690;
-}
-:root[data-theme=light] .lexical-root :global(.token:is(.operator, .entity, .url)), :root[data-theme=light] .lexical-root :global(.language-css) :global(.token.string), :root[data-theme=light] .lexical-root :global(.style) :global(.token.string) {
-  color: #9a6e3a;
-}
-:root[data-theme=light] .lexical-root :global(.token:is(.atrule, .attr-value, .keyword)) {
-  color: #07a;
-}
-:root[data-theme=light] .lexical-root :global(.token:is(.function, .class-name)) {
-  color: #dd4a68;
-}
-:root[data-theme=light] .lexical-root :global(.token:is(.regex, .important, .variable)) {
-  color: #e90;
-}
-
-:root[data-theme=dark] .lexical-root :global(.token:is(.comment, .block-comment, .prolog, .doctype, .cdata)) {
-  color: #999;
-}
-:root[data-theme=dark] .lexical-root :global(.token.punctuation) {
-  color: #ccc;
-}
-:root[data-theme=dark] .lexical-root :global(.token:is(.tag, .attr-name, .namespace, .deleted)) {
-  color: #e2777a;
-}
-:root[data-theme=dark] .lexical-root :global(.token.function-name) {
-  color: #6196cc;
-}
-:root[data-theme=dark] .lexical-root :global(.token:is(.boolean, .number, .function)) {
-  color: #f08d49;
-}
-:root[data-theme=dark] .lexical-root :global(.token:is(.property, .class-name, .constant, .symbol)) {
-  color: #f8c555;
-}
-:root[data-theme=dark] .lexical-root :global(.token:is(.selector, .important, .atrule, .keyword, .builtin)) {
-  color: #cc99cd;
-}
-:root[data-theme=dark] .lexical-root :global(.token:is(.string, .char, .attr-value, .regex, .variable)) {
-  color: #7ec699;
-}
-:root[data-theme=dark] .lexical-root :global(.token:is(.operator, .entity, .url)) {
-  color: #67cdcc;
-}
-:root[data-theme=dark] .lexical-root :global(.token:is(.important, .bold)) {
-  font-weight: bold;
-}
-:root[data-theme=dark] .lexical-root :global(.token.italic) {
-  font-style: italic;
-}
-:root[data-theme=dark] .lexical-root :global(.token.entity) {
-  cursor: help;
-}
-:root[data-theme=dark] .lexical-root :global(.token.inserted) {
-  color: green;
 }</style>

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

@@ -0,0 +1,3 @@
+export function setCodeHighlighterCacheEnabled(value: boolean): void;
+export function getCachedPayload(kind: string, id: string): Promise<any>;
+export function cachePayload(kind: string, id: string, payload: any): Promise<void>;

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

@@ -0,0 +1,121 @@
+import { IndexedDB } from '@sveltia/utils/storage';
+import { SHIKI_VERSION } from './generated.js';
+
+/**
+ * Client-side cache for Shiki grammars and themes.
+ *
+ * Grammars and themes resolve to plain data, so they can be stored and replayed without going back
+ * to the network. That saves more than bytes: a grammar references its embedded languages by
+ * relative path, so loading Vue or Svelte fans out to several requests, and a cache hit collapses
+ * all of them into one read.
+ *
+ * The engine is deliberately not cached here. It is executable code, so replaying it from storage
+ * would mean importing a `blob:` URL, which needs `script-src blob:` in the page’s CSP. It also
+ * gains nothing, because it is fetched from a version-immutable URL that the browser’s HTTP cache
+ * already keeps.
+ */
+
+const DATABASE_NAME = 'sveltia-ui';
+const STORE_NAME = 'shiki';
+/** @type {IndexedDB | undefined | null} `null` once the store is known to be unusable. */
+let database;
+/** @type {Promise<void> | undefined} */
+let purgePromise;
+let enabled = true;
+
+/**
+ * Enable or disable the cache.
+ *
+ * Worth turning off when the grammars are bundled with the app rather than fetched, since reading
+ * them back from storage is then slower than the bundled import it replaces.
+ * @param {boolean} value Whether to use the cache.
+ */
+export const setCodeHighlighterCacheEnabled = (value) => {
+  enabled = value;
+};
+
+/**
+ * Build the cache key for a payload.
+ * @param {string} kind Payload kind, either `lang` or `theme`.
+ * @param {string} id Language or theme ID.
+ * @returns {string} Key, scoped to the Shiki version the payload came from.
+ */
+const getKey = (kind, id) => `${SHIKI_VERSION}/${kind}/${id}`;
+
+/**
+ * Get the store, or `null` when IndexedDB is unavailable, as in a server-side render or with
+ * storage blocked.
+ * @returns {IndexedDB | null} Store.
+ */
+const getDatabase = () => {
+  if (database === undefined) {
+    database = typeof indexedDB === 'undefined' ? null : new IndexedDB(DATABASE_NAME, STORE_NAME);
+  }
+
+  return database;
+};
+
+/**
+ * Drop anything cached for a different Shiki version, once per session. A version bump changes
+ * every key, so the old payloads would otherwise linger forever.
+ * @param {IndexedDB} db Store.
+ * @returns {Promise<void>} Nothing.
+ */
+const purgeStaleVersions = async (db) => {
+  purgePromise ??= (async () => {
+    const stale = (await db.keys()).filter(
+      (key) => typeof key === 'string' && !key.startsWith(`${SHIKI_VERSION}/`),
+    );
+
+    if (stale.length) {
+      await db.deleteEntries(stale);
+    }
+  })();
+
+  return purgePromise;
+};
+
+/**
+ * Read a cached grammar or theme.
+ * @param {string} kind Payload kind, either `lang` or `theme`.
+ * @param {string} id Language or theme ID.
+ * @returns {Promise<any>} Cached payload, or `undefined` when not cached or unreadable.
+ */
+export const getCachedPayload = async (kind, id) => {
+  const db = enabled ? getDatabase() : null;
+
+  if (!db) {
+    return undefined;
+  }
+
+  try {
+    await purgeStaleVersions(db);
+
+    return await db.get(getKey(kind, id));
+  } catch {
+    // A failed cache read must never stop a code block from highlighting
+    return undefined;
+  }
+};
+
+/**
+ * Store a grammar or theme.
+ * @param {string} kind Payload kind, either `lang` or `theme`.
+ * @param {string} id Language or theme ID.
+ * @param {any} payload Payload to store. Must be structured-cloneable, which grammars and themes
+ * are, being plain data.
+ * @returns {Promise<void>} Nothing.
+ */
+export const cachePayload = async (kind, id, payload) => {
+  const db = enabled ? getDatabase() : null;
+
+  if (!db) {
+    return;
+  }
+
+  try {
+    await db.set(getKey(kind, id), payload);
+  } catch {
+    // Out of quota, storage blocked, or a payload that won’t clone: not worth failing over
+  }
+};

package/dist/components/text-editor/shiki/engine-entry.d.ts

@@ -0,0 +1,2 @@
+export { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+export { createHighlighterCoreSync, getTokenStyleObject, isSpecialLang, isSpecialTheme, stringifyTokenStyle } from "shiki/core";

package/dist/components/text-editor/shiki/engine-entry.js

@@ -0,0 +1,20 @@
+/**
+ * Entry point for the standalone Shiki engine chunk built by `scripts/build-shiki-engine.js`.
+ *
+ * This is the complete set of Shiki APIs the vendored highlighter needs. It is never imported
+ * directly by the library — only bundled into `dist/shiki-engine.js` and loaded at runtime — so
+ * Shiki stays a development dependency and never reaches a consumer’s bundle.
+ *
+ * Everything is imported through the `shiki` package rather than from `@shikijs/*` directly,
+ * because `shiki` pins those to exact versions. That keeps the engine bundled here and the
+ * grammars fetched at runtime on the same version, which `generated.js` records.
+ */
+
+export {
+  createHighlighterCoreSync,
+  getTokenStyleObject,
+  isSpecialLang,
+  isSpecialTheme,
+  stringifyTokenStyle,
+} from 'shiki/core';
+export { createJavaScriptRegexEngine } from 'shiki/engine/javascript';

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

@@ -0,0 +1,16 @@
+export function isPlainLanguage(language: string | null | undefined): boolean;
+export function isEngineLoaded(): boolean;
+export function isEngineUnavailable(): boolean;
+export function isCodeLanguageLoaded(language: string): boolean;
+export function loadEngine(editor?: LexicalEditor | undefined, codeNodeKey?: string | undefined): Promise<void> | undefined;
+export function normalizeCodeLanguage(language: string): string;
+export function loadCodeLanguage(language: string, editor?: LexicalEditor | undefined, codeNodeKey?: string | undefined): Promise<void> | undefined;
+export function isCodeThemeLoaded(theme: string): boolean;
+export function loadCodeTheme(theme: string, editor?: LexicalEditor | undefined, codeNodeKey?: string | undefined): Promise<void> | undefined;
+export function getHighlightNodes(codeNode: CodeNode, language: string): LexicalNode[];
+export function highlightCodeToHTML(code: string, language: string, { theme }?: {
+    theme?: string | undefined;
+} | undefined): string | undefined;
+import type { LexicalEditor } from 'lexical';
+import type { CodeNode } from '@lexical/code-core';
+import type { LexicalNode } from 'lexical';