@sveltia/ui 0.62.0 → 0.63.0

package/dist/components/button/button.svelte

@@ -49,6 +49,11 @@
   } = $props();
 </script>
 
+<!--
+  The key shortcut handler is attached only when there are shortcuts to bind. A falsy value counts
+  as no attachment at all, which saves an effect per button — and both `<Option>` and `<MenuItem>`
+  wrap one, so a long list would otherwise pay for an effect per item that has nothing to do.
+-->
 <button
   bind:this={element}
   {...restProps}
@@ -70,7 +75,7 @@
   data-name={name}
   data-label={label}
   data-value={value}
-  {@attach activateKeyShortcuts(keyShortcuts)}
+  {@attach keyShortcuts && activateKeyShortcuts(keyShortcuts)}
 >
   {@render startIcon?.()}
   {#if variant === 'link'}

package/dist/components/resizable-pane/resizable-handle.svelte

@@ -91,10 +91,19 @@
   let keyResizing = $state(false);
 
   /**
-   * Get the pane group container element's size in pixels for px→% conversion.
+   * The pane group container's size in pixels, used for px→% conversion. Measured once when a drag
+   * begins rather than on every pointer move: reading `clientWidth` forces the browser to lay the
+   * page out, which is the last thing wanted in the middle of a drag, and the container cannot
+   * change size while the pointer holding it is down.
+   * @type {number}
+   */
+  let containerSize = 0;
+
+  /**
+   * Measure the pane group container element's size in pixels.
    * @returns {number} Container size in pixels.
    */
-  const getContainerSize = () => {
+  const measureContainerSize = () => {
     const container = element?.closest('.resizable-pane-group');
 
     if (!container) return 0;
@@ -116,7 +125,6 @@
 
     const screenPos = isHorizontal ? screenX : screenY;
     const pixelDelta = screenPos - startScreenPos;
-    const containerSize = getContainerSize();
 
     if (!containerSize) return;
 
@@ -167,6 +175,7 @@
     dragging = true;
     startScreenPos = isHorizontal ? screenX : screenY;
     targetPointerId = pointerId;
+    containerSize = measureContainerSize();
     element?.setPointerCapture(pointerId);
 
     onResizeStart?.();

package/dist/components/select/select-tags.svelte

@@ -59,6 +59,13 @@
 
   /** @type {Map<any, { label: string, value: any, searchValue?: string }>} */
   const optionMap = $derived(new Map(options.map((o) => [o.value, o])));
+  /**
+   * The selected values as a set, so the option list below can test membership in constant time.
+   * Calling `values.includes()` once per option instead makes rendering the list quadratic in the
+   * number of options and selected tags.
+   * @type {Set<any>}
+   */
+  const selectedValues = $derived(new Set(values));
   const prevKey = $derived(isRTL() ? 'ArrowRight' : 'ArrowLeft');
   const nextKey = $derived(isRTL() ? 'ArrowLeft' : 'ArrowRight');
 
@@ -248,7 +255,7 @@
       }}
     >
       {#each options as { label, value, searchValue } (value)}
-        {#if !values.includes(value)}
+        {#if !selectedValues.has(value)}
           <Option {label} {value} {searchValue} />
         {/if}
       {/each}

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';