@lapismd/design-core 0.2.0 → 0.3.0

package/dist/shared/shadcn/code-block/highlightRanges.js

@@ -0,0 +1,351 @@
+/**
+ * @file highlightRanges.ts
+ * @input Line divs, per-line token arrays, CSS Custom Highlight API
+ * @output Creates/removes highlight Range objects for syntax coloring
+ * @position Shared utility consumed by CodeBlock (ranges mode)
+ *
+ * Tokens are per-line with line-relative offsets, so we map directly
+ * from line div → text node → Range. No global text-node map, no
+ * binary search, no TreeWalker.
+ */
+import { ensureHighlightStyles, TOKEN_TYPES } from "./highlightStyles.js";
+// ---------------------------------------------------------------------------
+// Dynamic ::highlight() style injection
+// ---------------------------------------------------------------------------
+/**
+ * Pre-seeded with all built-in token types — the static stylesheet in
+ * highlightStyles.ts already has ::highlight() rules for these. Only
+ * truly unknown types trigger dynamic insertRule, avoiding unnecessary
+ * stylesheet mutations and style recalcs.
+ */
+const registeredHighlightTypes = new Set(TOKEN_TYPES);
+let dynamicStyleSheet = null;
+/**
+ * Inject a dynamic ::highlight() rule for an unknown token type.
+ * Built-in types are pre-seeded and never reach this path.
+ */
+function ensureDynamicHighlightType(tokenType) {
+    if (registeredHighlightTypes.has(tokenType)) {
+        return;
+    }
+    registeredHighlightTypes.add(tokenType);
+    ensureHighlightStyles();
+    if (typeof document === "undefined") {
+        return;
+    }
+    if (!dynamicStyleSheet) {
+        const style = document.createElement("style");
+        style.setAttribute("data-ui-code-highlight-dynamic", "");
+        document.head.appendChild(style);
+        dynamicStyleSheet = style.sheet ?? null;
+        if (!dynamicStyleSheet) {
+            return;
+        }
+    }
+    const name = `ui-code-${tokenType}`;
+    const colorVar = `var(--ui-code-syntax-${tokenType}, currentColor)`;
+    dynamicStyleSheet.insertRule(`[data-ui-component="code-block"] code::highlight(${name}), [data-ui-component="code-block"] code::highlight(${name}) { color: ${colorVar}; }`);
+}
+// ---------------------------------------------------------------------------
+// Per-type Highlight lookup
+// ---------------------------------------------------------------------------
+/**
+ * Build a local Highlight cache for the duration of a single
+ * apply pass. Avoids calling CSS.highlights.get() per-token
+ * (one Map lookup per type instead of per token).
+ */
+function createHighlightResolver() {
+    const cache = new Map();
+    return (tokenType) => {
+        let highlight = cache.get(tokenType);
+        if (highlight) {
+            return highlight;
+        }
+        ensureDynamicHighlightType(tokenType);
+        const name = `ui-code-${tokenType}`;
+        highlight = CSS.highlights.get(name);
+        if (!highlight) {
+            highlight = new Highlight();
+            CSS.highlights.set(name, highlight);
+        }
+        cache.set(tokenType, highlight);
+        return highlight;
+    };
+}
+/**
+ * Apply highlight ranges for a single line's tokens.
+ * The line div is expected to contain a single text node as its
+ * first child (or a zero-width space placeholder for empty lines).
+ */
+function applyLineRanges(lineDiv, tokens, results, resolve) {
+    if (tokens.length === 0) {
+        return;
+    }
+    // The text node is the first child of the line div.
+    // In range mode, lines render plain text so this is always a Text node.
+    const textNode = lineDiv.firstChild;
+    if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
+        return;
+    }
+    const textLength = textNode.length;
+    for (const token of tokens) {
+        if (token.start >= textLength || token.end <= 0) {
+            continue;
+        }
+        const start = Math.min(token.start, textLength);
+        const end = Math.min(token.end, textLength);
+        const highlight = resolve(token.type);
+        try {
+            const range = new Range();
+            range.setStart(textNode, start);
+            range.setEnd(textNode, end);
+            highlight.add(range);
+            results.push({ range, highlight });
+        }
+        catch {
+            // Skip invalid ranges
+        }
+    }
+}
+function cleanupRanges(ranges) {
+    for (const { range, highlight } of ranges) {
+        highlight.delete(range);
+    }
+}
+// ---------------------------------------------------------------------------
+// Chunked application with lazy content-visibility support
+// ---------------------------------------------------------------------------
+/**
+ * Apply ranges for all [data-line] divs inside a container element.
+ * Returns the RangeEntry[] so the caller can clean them up later.
+ */
+function applyRangesToContainer(container, tokenLines, globalLineOffset, resolve) {
+    const results = [];
+    const lineDivs = container.querySelectorAll("[data-line]");
+    for (let i = 0; i < lineDivs.length; i++) {
+        const tokenIndex = globalLineOffset + i;
+        const tokens = tokenLines[tokenIndex];
+        const lineDiv = lineDivs[i];
+        if (lineDiv && tokens && tokens.length > 0) {
+            applyLineRanges(lineDiv, tokens, results, resolve);
+        }
+    }
+    return results;
+}
+/**
+ * Apply CSS Custom Highlight API ranges lazily as content-visibility
+ * chunks scroll into view. Visible chunks get ranges immediately;
+ * offscreen chunks get ranges when `contentvisibilityautostatechange`
+ * fires. Ranges are removed when chunks scroll back offscreen to
+ * keep memory usage proportional to the viewport.
+ *
+ * For small files (no chunk wrappers / below LINE_CHUNK_THRESHOLD),
+ * all lines are direct children and get ranges immediately.
+ *
+ * @param codeEl - The <code> element containing line divs (possibly inside chunk wrappers)
+ * @param tokenLines - Per-line token arrays from the tokenizer
+ * @returns Cleanup function that removes all ranges and event listeners
+ */
+export function applyHighlightRangesChunked(codeEl, tokenLines) {
+    ensureHighlightStyles();
+    const resolve = createHighlightResolver();
+    // Detect chunk wrappers — direct children of <code> that contain [data-line] divs.
+    // If there are no wrappers (small file), lines are direct children.
+    const chunkWrappers = [];
+    const chunkLineOffsets = [];
+    let lineCount = 0;
+    for (let i = 0; i < codeEl.children.length; i++) {
+        const child = codeEl.children[i];
+        if (!child)
+            continue;
+        const lineDivs = child.querySelectorAll("[data-line]");
+        if (lineDivs.length > 0 &&
+            child.tagName === "DIV" &&
+            !child.hasAttribute("data-line")) {
+            // This is a chunk wrapper
+            chunkWrappers.push(child);
+            chunkLineOffsets.push(lineCount);
+            lineCount += lineDivs.length;
+        }
+    }
+    // No chunk wrappers — small file, apply all ranges directly
+    if (chunkWrappers.length === 0) {
+        const allRanges = [];
+        const lineDivs = codeEl.querySelectorAll("[data-line]");
+        for (let i = 0; i < lineDivs.length; i++) {
+            const tokens = tokenLines[i];
+            const lineDiv = lineDivs[i];
+            if (lineDiv && tokens && tokens.length > 0) {
+                applyLineRanges(lineDiv, tokens, allRanges, resolve);
+            }
+        }
+        return () => cleanupRanges(allRanges);
+    }
+    // Chunked path — lazy application per chunk
+    const chunkRanges = new Map();
+    const listeners = new Map();
+    function applyChunk(wrapper, index) {
+        if (chunkRanges.has(wrapper)) {
+            return;
+        } // already applied
+        const ranges = applyRangesToContainer(wrapper, tokenLines, chunkLineOffsets[index] ?? 0, resolve);
+        chunkRanges.set(wrapper, ranges);
+    }
+    function removeChunk(wrapper) {
+        const ranges = chunkRanges.get(wrapper);
+        if (ranges) {
+            cleanupRanges(ranges);
+            chunkRanges.delete(wrapper);
+        }
+    }
+    for (let i = 0; i < chunkWrappers.length; i++) {
+        const wrapper = chunkWrappers[i];
+        if (!wrapper)
+            continue;
+        const handler = (e) => {
+            // contentvisibilityautostatechange fires with .skipped = true when
+            // the element goes offscreen, false when it becomes visible.
+            const skipped = e.skipped;
+            if (skipped) {
+                removeChunk(wrapper);
+            }
+            else {
+                applyChunk(wrapper, i);
+            }
+        };
+        wrapper.addEventListener("contentvisibilityautostatechange", handler);
+        listeners.set(wrapper, handler);
+        // Apply immediately to chunks that are currently visible.
+        // A chunk with content-visibility: auto that is onscreen will have
+        // its content rendered — check via checkVisibility if available,
+        // otherwise apply eagerly for the first screen's worth.
+        const el = wrapper;
+        if (typeof el.checkVisibility === "function") {
+            if (el.checkVisibility({
+                checkVisibilityCSS: true,
+                contentVisibilityAuto: true,
+            })) {
+                applyChunk(wrapper, i);
+            }
+        }
+        else {
+            // Fallback: apply first few chunks synchronously (likely visible)
+            if (i < 5) {
+                applyChunk(wrapper, i);
+            }
+        }
+    }
+    return function cleanup() {
+        // Remove all event listeners
+        for (const [wrapper, handler] of listeners) {
+            wrapper.removeEventListener("contentvisibilityautostatechange", handler);
+        }
+        listeners.clear();
+        // Clean up all active ranges
+        for (const ranges of chunkRanges.values()) {
+            cleanupRanges(ranges);
+        }
+        chunkRanges.clear();
+    };
+}
+/**
+ * Apply highlight ranges for a batch of lines starting at a given
+ * line index. Used by the streaming tokenizer to apply highlights
+ * progressively as tokens arrive.
+ */
+export function applyHighlightRangesBatch(codeEl, tokenLines, startLine) {
+    ensureHighlightStyles();
+    const resolve = createHighlightResolver();
+    const lineDivs = codeEl.querySelectorAll("[data-line]");
+    const results = [];
+    for (let i = 0; i < tokenLines.length; i++) {
+        const divIndex = startLine + i;
+        if (divIndex >= lineDivs.length) {
+            break;
+        }
+        const lineDiv = lineDivs[divIndex];
+        const tokens = tokenLines[i];
+        if (lineDiv && tokens && tokens.length > 0) {
+            applyLineRanges(lineDiv, tokens, results, resolve);
+        }
+    }
+    return results;
+}
+// ---------------------------------------------------------------------------
+// Flat text-node application (for contentEditable elements)
+// ---------------------------------------------------------------------------
+/**
+ * Apply CSS Custom Highlight API ranges to a flat element (no [data-line]
+ * structure). Works with contentEditable="plaintext-only" where all text
+ * may be a single Text node with embedded newlines.
+ *
+ * @param el - The element containing text (e.g. contentEditable code element)
+ * @param tokenLines - Per-line token arrays from the tokenizer
+ * @returns Cleanup function that removes all ranges
+ */
+export function applyHighlightRangesFlat(el, tokenLines) {
+    ensureHighlightStyles();
+    const resolve = createHighlightResolver();
+    const myRanges = [];
+    // Collect text nodes with absolute offsets
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    const textNodes = [];
+    let totalOffset = 0;
+    let current = walker.nextNode();
+    while (current) {
+        const text = current;
+        textNodes.push({ node: text, start: totalOffset, length: text.length });
+        totalOffset += text.length;
+        current = walker.nextNode();
+    }
+    if (textNodes.length === 0) {
+        return () => cleanupRanges(myRanges);
+    }
+    // Convert per-line tokens to absolute offsets.
+    // The source code string has lines joined by \n, so each line starts
+    // at the cumulative offset of all previous lines + their \n separators.
+    const fullText = el.textContent ?? "";
+    let lineOffset = 0;
+    for (let lineIdx = 0; lineIdx < tokenLines.length; lineIdx++) {
+        const lineTokens = tokenLines[lineIdx];
+        if (lineTokens) {
+            for (const token of lineTokens) {
+                const absStart = lineOffset + token.start;
+                const absEnd = lineOffset + token.end;
+                const startPos = resolveOffset(textNodes, absStart);
+                const endPos = resolveOffset(textNodes, absEnd);
+                if (!startPos || !endPos) {
+                    continue;
+                }
+                const highlight = resolve(token.type);
+                try {
+                    const range = new Range();
+                    range.setStart(startPos.node, startPos.offset);
+                    range.setEnd(endPos.node, endPos.offset);
+                    highlight.add(range);
+                    myRanges.push({ range, highlight });
+                }
+                catch {
+                    // Skip invalid ranges
+                }
+            }
+        }
+        // Advance past this line + \n separator
+        const nlPos = fullText.indexOf("\n", lineOffset);
+        lineOffset = nlPos === -1 ? fullText.length : nlPos + 1;
+    }
+    return () => cleanupRanges(myRanges);
+}
+function resolveOffset(textNodes, absOffset) {
+    for (const entry of textNodes) {
+        const end = entry.start + entry.length;
+        if (absOffset >= entry.start && absOffset <= end) {
+            return { node: entry.node, offset: absOffset - entry.start };
+        }
+    }
+    return null;
+}
+/**
+ * Cleanup a batch of ranges (returned from applyHighlightRangesBatch).
+ */
+export { cleanupRanges };

package/dist/shared/shadcn/code-block/highlightStyles.d.ts

@@ -0,0 +1,8 @@
+/** Bundled syntax colors for span and CSS Highlight API rendering. */
+import "./highlight-styles.css";
+/**
+ * Compatibility entry point for existing consumers. Importing this module now
+ * loads the static stylesheet, so no runtime style element is required.
+ */
+export declare function ensureHighlightStyles(): void;
+export declare const TOKEN_TYPES: readonly ["keyword", "string", "comment", "number", "function", "type", "tag", "attribute", "property", "operator", "constant", "punctuation", "variable"];

package/dist/shared/shadcn/code-block/highlightStyles.js

@@ -0,0 +1,22 @@
+/** Bundled syntax colors for span and CSS Highlight API rendering. */
+import "./highlight-styles.css";
+/**
+ * Compatibility entry point for existing consumers. Importing this module now
+ * loads the static stylesheet, so no runtime style element is required.
+ */
+export function ensureHighlightStyles() { }
+export const TOKEN_TYPES = [
+    "keyword",
+    "string",
+    "comment",
+    "number",
+    "function",
+    "type",
+    "tag",
+    "attribute",
+    "property",
+    "operator",
+    "constant",
+    "punctuation",
+    "variable",
+];

package/dist/shared/shadcn/code-block/index.d.ts

@@ -0,0 +1,6 @@
+export { default as CodeBlock } from "./CodeBlock.svelte";
+export { tokenize, tokenizeAsync, tokenizeStreaming, flatTokensToLines, SYNC_TOKENIZE_THRESHOLD, type SyntaxToken, type TokenLine, } from "./tokenizer.js";
+export { applyHighlightRangesChunked, applyHighlightRangesBatch, applyHighlightRangesFlat, cleanupRanges, } from "./highlightRanges.js";
+export { ensureHighlightStyles, TOKEN_TYPES } from "./highlightStyles.js";
+export { SyntaxTheme, defineSyntaxTheme, syntaxThemeStyle, syntaxThemeToCSS, resolveSyntaxTokenForMode, ALL_SYNTAX_KEYS, syntaxTokenDefaults, getSyntaxThemeContext, setSyntaxThemeContext, oneDarkPro, dracula, monokai, nord, tokyoNight, catppuccinMocha, githubDark, githubLight, solarizedLight, oneLight, catppuccinLatte, tokyoNightLight, darkSyntaxPresets, lightSyntaxPresets, allSyntaxPresets, type SyntaxThemeDefinition, type SyntaxThemeInput, type SyntaxThemeTokenKey, type SyntaxThemeTokenMap, type SyntaxThemeTokenInput, type SyntaxTokenValue, type SyntaxTokenName, } from "./syntax/index.js";
+export { codeBlockTokenNames, type CodeBlockToken, } from "./code-block.tokens.js";

package/dist/shared/shadcn/code-block/index.js

@@ -0,0 +1,6 @@
+export { default as CodeBlock } from "./CodeBlock.svelte";
+export { tokenize, tokenizeAsync, tokenizeStreaming, flatTokensToLines, SYNC_TOKENIZE_THRESHOLD, } from "./tokenizer.js";
+export { applyHighlightRangesChunked, applyHighlightRangesBatch, applyHighlightRangesFlat, cleanupRanges, } from "./highlightRanges.js";
+export { ensureHighlightStyles, TOKEN_TYPES } from "./highlightStyles.js";
+export { SyntaxTheme, defineSyntaxTheme, syntaxThemeStyle, syntaxThemeToCSS, resolveSyntaxTokenForMode, ALL_SYNTAX_KEYS, syntaxTokenDefaults, getSyntaxThemeContext, setSyntaxThemeContext, oneDarkPro, dracula, monokai, nord, tokyoNight, catppuccinMocha, githubDark, githubLight, solarizedLight, oneLight, catppuccinLatte, tokyoNightLight, darkSyntaxPresets, lightSyntaxPresets, allSyntaxPresets, } from "./syntax/index.js";
+export { codeBlockTokenNames, } from "./code-block.tokens.js";

package/dist/shared/shadcn/code-block/syntax/SyntaxTheme.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import {
+    syntaxThemeStyle,
+    type SyntaxThemeDefinition,
+  } from "./defineSyntaxTheme.js";
+  import { setSyntaxThemeContext } from "./syntax-theme-context.svelte.js";
+
+  let {
+    theme,
+    children,
+  }: {
+    theme: SyntaxThemeDefinition;
+    children?: Snippet;
+  } = $props();
+
+  setSyntaxThemeContext({
+    get theme() {
+      return theme;
+    },
+  });
+
+  const styleText = $derived(
+    Object.entries(syntaxThemeStyle(theme))
+      .map(([key, value]) => `${key}: ${value}`)
+      .join("; "),
+  );
+</script>
+
+<div data-ui-syntax-theme={theme.name} style={styleText}>
+  {@render children?.()}
+</div>

package/dist/shared/shadcn/code-block/syntax/SyntaxTheme.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import { type SyntaxThemeDefinition } from "./defineSyntaxTheme.js";
+type $$ComponentProps = {
+    theme: SyntaxThemeDefinition;
+    children?: Snippet;
+};
+declare const SyntaxTheme: import("svelte").Component<$$ComponentProps, {}, "">;
+type SyntaxTheme = ReturnType<typeof SyntaxTheme>;
+export default SyntaxTheme;

package/dist/shared/shadcn/code-block/syntax/THIRD_PARTY_LICENSES.md

@@ -0,0 +1,72 @@
+# Third-Party Licenses
+
+This package contains syntax color palettes derived from the following
+open-source themes. All original themes are licensed under the MIT License.
+Only color values have been extracted — no source code from these projects
+is included.
+
+## One Dark Pro
+
+- Source: https://github.com/Binaryify/OneDark-Pro
+- Author: Binaryify
+- License: MIT
+- Original: Atom One Dark by GitHub (atom/one-dark-syntax)
+
+## Dracula
+
+- Source: https://github.com/dracula/visual-studio-code
+- Author: Zeno Rocha and contributors
+- License: MIT
+- Website: https://draculatheme.com
+
+## Monokai
+
+- Source: Built-in VS Code theme (https://github.com/microsoft/vscode)
+- Author: Microsoft Corporation
+- License: MIT
+- Original: Monokai by Wimer Hazenberg (monokai.nl)
+
+## Nord
+
+- Source: https://github.com/nordtheme/visual-studio-code
+- Author: Sven Greb (Arctic Ice Studio) and contributors
+- License: MIT
+- Website: https://www.nordtheme.com
+
+## Tokyo Night
+
+- Source: https://github.com/tokyo-night/tokyo-night-vscode-theme
+- Author: enkia and contributors
+- License: MIT
+
+## Catppuccin (Mocha + Latte)
+
+- Source: https://github.com/catppuccin/vscode
+- Author: Catppuccin contributors
+- License: MIT
+- Website: https://catppuccin.com
+
+## GitHub Light
+
+- Source: https://github.com/primer/github-vscode-theme
+- Author: GitHub (Primer team)
+- License: MIT
+
+## GitHub Dark
+
+- Source: https://github.com/primer/github-vscode-theme
+- Author: GitHub (Primer team)
+- License: MIT
+
+## Solarized Light
+
+- Source: https://github.com/altercation/solarized
+- Author: Ethan Schoonover
+- License: MIT
+- Website: https://ethanschoonover.com/solarized
+
+## One Light
+
+- Source: https://github.com/atom/one-light-syntax
+- Author: GitHub (Atom team)
+- License: MIT

package/dist/shared/shadcn/code-block/syntax/defineSyntaxTheme.d.ts

@@ -0,0 +1,23 @@
+/** Human-readable syntax token name (without CSS custom property prefix). */
+export type SyntaxThemeTokenKey = "keyword" | "string" | "comment" | "number" | "function" | "type" | "variable" | "operator" | "constant" | "tag" | "attribute" | "property" | "punctuation" | "background";
+/** Token value — string or [light, dark] tuple. */
+export type SyntaxTokenValue = string | [light: string, dark: string];
+export type SyntaxThemeTokenInput = Record<SyntaxThemeTokenKey, SyntaxTokenValue>;
+export type SyntaxThemeTokenMap = Record<SyntaxThemeTokenKey, string>;
+export interface SyntaxThemeInput {
+    name: string;
+    tokens: SyntaxThemeTokenInput;
+}
+export interface SyntaxThemeDefinition {
+    name: string;
+    tokens: SyntaxThemeTokenMap;
+    __inputTokens: SyntaxThemeTokenInput;
+}
+export declare const ALL_SYNTAX_KEYS: SyntaxThemeTokenKey[];
+export declare function resolveSyntaxTokenForMode(value: SyntaxTokenValue, mode: "light" | "dark"): string;
+/** Create a syntax theme from a complete 14-token map. */
+export declare function defineSyntaxTheme(input: SyntaxThemeInput): SyntaxThemeDefinition;
+/** CSS custom property map for inline style / SyntaxTheme host. */
+export declare function syntaxThemeStyle(theme: SyntaxThemeDefinition): Record<string, string>;
+/** Convert a syntax theme to CSS declarations (no selector wrapper). */
+export declare function syntaxThemeToCSS(theme: SyntaxThemeDefinition): string;

package/dist/shared/shadcn/code-block/syntax/defineSyntaxTheme.js

@@ -0,0 +1,52 @@
+import { syntaxTokenDefaults } from "./tokens.js";
+const CSS_PREFIX = "--ui-code-syntax-";
+function toCSSProperty(key) {
+    return (CSS_PREFIX + key);
+}
+export const ALL_SYNTAX_KEYS = Object.keys(syntaxTokenDefaults).map((k) => k.replace(CSS_PREFIX, ""));
+function resolveTokenValue(value) {
+    if (Array.isArray(value)) {
+        return `light-dark(${value[0]}, ${value[1]})`;
+    }
+    return value;
+}
+export function resolveSyntaxTokenForMode(value, mode) {
+    if (Array.isArray(value)) {
+        return (mode === "dark" ? value[1] : value[0]) ?? "";
+    }
+    const match = value.match(/^light-dark\(([^,]+),([^)]+)\)$/);
+    if (match) {
+        return mode === "dark"
+            ? (match[2]?.trim() ?? "")
+            : (match[1]?.trim() ?? "");
+    }
+    return value;
+}
+/** Create a syntax theme from a complete 14-token map. */
+export function defineSyntaxTheme(input) {
+    const missing = ALL_SYNTAX_KEYS.filter((key) => !(key in input.tokens));
+    if (missing.length > 0) {
+        console.warn(`[defineSyntaxTheme] "${input.name}": missing tokens: ${missing.join(", ")}. All 14 syntax tokens are required.`);
+    }
+    const resolved = {};
+    for (const key of ALL_SYNTAX_KEYS) {
+        resolved[key] = resolveTokenValue(input.tokens[key]);
+    }
+    return {
+        name: input.name,
+        tokens: resolved,
+        __inputTokens: { ...input.tokens },
+    };
+}
+/** CSS custom property map for inline style / SyntaxTheme host. */
+export function syntaxThemeStyle(theme) {
+    const vars = {};
+    for (const key of ALL_SYNTAX_KEYS) {
+        vars[toCSSProperty(key)] = theme.tokens[key];
+    }
+    return vars;
+}
+/** Convert a syntax theme to CSS declarations (no selector wrapper). */
+export function syntaxThemeToCSS(theme) {
+    return ALL_SYNTAX_KEYS.map((key) => toCSSProperty(key) + ": " + theme.tokens[key] + ";").join("\n  ");
+}

package/dist/shared/shadcn/code-block/syntax/index.d.ts

@@ -0,0 +1,5 @@
+export { syntaxTokenDefaults, type SyntaxTokenName } from "./tokens.js";
+export { defineSyntaxTheme, syntaxThemeStyle, syntaxThemeToCSS, resolveSyntaxTokenForMode, ALL_SYNTAX_KEYS, type SyntaxThemeDefinition, type SyntaxThemeInput, type SyntaxThemeTokenKey, type SyntaxThemeTokenMap, type SyntaxThemeTokenInput, type SyntaxTokenValue, } from "./defineSyntaxTheme.js";
+export { default as SyntaxTheme } from "./SyntaxTheme.svelte";
+export { getSyntaxThemeContext, setSyntaxThemeContext, } from "./syntax-theme-context.svelte.js";
+export { oneDarkPro, dracula, monokai, nord, tokyoNight, catppuccinMocha, githubDark, githubLight, solarizedLight, oneLight, catppuccinLatte, tokyoNightLight, darkSyntaxPresets, lightSyntaxPresets, allSyntaxPresets, } from "./presets.js";

package/dist/shared/shadcn/code-block/syntax/index.js

@@ -0,0 +1,5 @@
+export { syntaxTokenDefaults } from "./tokens.js";
+export { defineSyntaxTheme, syntaxThemeStyle, syntaxThemeToCSS, resolveSyntaxTokenForMode, ALL_SYNTAX_KEYS, } from "./defineSyntaxTheme.js";
+export { default as SyntaxTheme } from "./SyntaxTheme.svelte";
+export { getSyntaxThemeContext, setSyntaxThemeContext, } from "./syntax-theme-context.svelte.js";
+export { oneDarkPro, dracula, monokai, nord, tokyoNight, catppuccinMocha, githubDark, githubLight, solarizedLight, oneLight, catppuccinLatte, tokyoNightLight, darkSyntaxPresets, lightSyntaxPresets, allSyntaxPresets, } from "./presets.js";

package/dist/shared/shadcn/code-block/syntax/presets.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @file theme/syntax/presets.ts
+ * @output 12 community syntax theme presets
+ *
+ * Color values sourced from each theme's official VS Code extension.
+ * All original themes are MIT licensed. Only color values are extracted.
+ * See THIRD_PARTY_LICENSES.md for full attribution.
+ *
+ * @see https://github.com/facebook/astryx/issues/1148
+ */
+import { type SyntaxThemeDefinition } from "./defineSyntaxTheme.js";
+/** One Dark Pro (Binaryify) — MIT */
+export declare const oneDarkPro: SyntaxThemeDefinition;
+/** Dracula (Zeno Rocha) — MIT */
+export declare const dracula: SyntaxThemeDefinition;
+/** Monokai (Wimer Hazenberg, VS Code built-in) — MIT */
+export declare const monokai: SyntaxThemeDefinition;
+/** Nord (Arctic Ice Studio / Sven Greb) — MIT */
+export declare const nord: SyntaxThemeDefinition;
+/** Tokyo Night (enkia) — MIT */
+export declare const tokyoNight: SyntaxThemeDefinition;
+/** Catppuccin Mocha (Catppuccin contributors) — MIT */
+export declare const catppuccinMocha: SyntaxThemeDefinition;
+/** GitHub Light (GitHub Primer team) — MIT */
+export declare const githubLight: SyntaxThemeDefinition;
+/** GitHub Dark (GitHub Primer team) — MIT */
+export declare const githubDark: SyntaxThemeDefinition;
+/** Solarized Light (Ethan Schoonover) — MIT */
+export declare const solarizedLight: SyntaxThemeDefinition;
+/** One Light (GitHub / Atom team) — MIT */
+export declare const oneLight: SyntaxThemeDefinition;
+/** Catppuccin Latte (Catppuccin contributors) — MIT */
+export declare const catppuccinLatte: SyntaxThemeDefinition;
+/** Tokyo Night Light (enkia) — MIT */
+export declare const tokyoNightLight: SyntaxThemeDefinition;
+/** All dark syntax theme presets */
+export declare const darkSyntaxPresets: readonly [SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition];
+/** All light syntax theme presets */
+export declare const lightSyntaxPresets: readonly [SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition];
+/** All syntax theme presets */
+export declare const allSyntaxPresets: readonly [SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition, SyntaxThemeDefinition];