components-svelte 0.1.0

package/dist/utils/shiki/shiki-themes.js

@@ -0,0 +1,64 @@
+const SHIKI_THEMES = [
+    "andromeeda",
+    "aurora-x",
+    "ayu-dark",
+    "catppuccin-frappe",
+    "catppuccin-latte",
+    "catppuccin-macchiato",
+    "catppuccin-mocha",
+    "dark-plus",
+    "dracula",
+    "dracula-soft",
+    "everforest-dark",
+    "everforest-light",
+    "github-dark",
+    "github-dark-default",
+    "github-dark-dimmed",
+    "github-dark-high-contrast",
+    "github-light",
+    "github-light-default",
+    "github-light-high-contrast",
+    "gruvbox-dark-hard",
+    "gruvbox-dark-medium",
+    "gruvbox-dark-soft",
+    "gruvbox-light-hard",
+    "gruvbox-light-medium",
+    "gruvbox-light-soft",
+    "houston",
+    "kanagawa-dragon",
+    "kanagawa-lotus",
+    "kanagawa-wave",
+    "laserwave",
+    "light-plus",
+    "material-theme",
+    "material-theme-darker",
+    "material-theme-lighter",
+    "material-theme-ocean",
+    "material-theme-palenight",
+    "min-dark",
+    "min-light",
+    "monokai",
+    "night-owl",
+    "nord",
+    "one-dark-pro",
+    "one-light",
+    "plastic",
+    "poimandres",
+    "red",
+    "rose-pine",
+    "rose-pine-dawn",
+    "rose-pine-moon",
+    "slack-dark",
+    "slack-ochin",
+    "snazzy-light",
+    "solarized-dark",
+    "solarized-light",
+    "synthwave-84",
+    "tokyo-night",
+    "vesper",
+    "vitesse-black",
+    "vitesse-dark",
+    "vitesse-light",
+    "css-variables",
+];
+export { SHIKI_THEMES };

package/dist/utils/shiki/snippet-presets.d.ts

@@ -0,0 +1,27 @@
+type SnippetPreset = {
+    /** Canonical identifier (e.g., 'python', 'bash') */
+    key: string;
+    /** Alternative names that map to this preset (e.g., ['py'] for python) */
+    aliases?: string[];
+    /** Human-readable name (e.g., "Python", "cURL") */
+    displayName: string;
+    /** Devicon SVG name if different from key (e.g., 'dot-net' for '.NET') */
+    iconKey?: string;
+    /** Shiki language for syntax highlighting */
+    shikiLanguage: string;
+    /** httpsnippet config for code generation */
+    httpSnippet?: {
+        target: string;
+        client?: string;
+    };
+};
+/**
+ * Central config for API playground language options.
+ * Each preset defines: display info, icon, syntax highlighting, and code generation.
+ */
+declare const SNIPPET_PRESETS: SnippetPreset[];
+declare const getPreset: (lang: string) => SnippetPreset | undefined;
+declare const getDisplayName: (lang: string) => string;
+declare const getIconKey: (lang: string) => string | undefined;
+declare const getShikiLanguageFromPreset: (lang: string) => string;
+export { type SnippetPreset, SNIPPET_PRESETS, getPreset, getDisplayName, getIconKey, getShikiLanguageFromPreset };

package/dist/utils/shiki/snippet-presets.js

@@ -0,0 +1,44 @@
+/**
+ * Central config for API playground language options.
+ * Each preset defines: display info, icon, syntax highlighting, and code generation.
+ */
+const SNIPPET_PRESETS = [
+    { key: "bash", aliases: ["curl", "sh", "shell"], displayName: "cURL", shikiLanguage: "bash", httpSnippet: { target: "shell" } },
+    { key: "python", aliases: ["py"], displayName: "Python", shikiLanguage: "python", httpSnippet: { target: "python", client: "requests" } },
+    { key: "javascript", aliases: ["js"], displayName: "JavaScript", shikiLanguage: "javascript", httpSnippet: { target: "javascript", client: "fetch" } },
+    { key: "node", aliases: ["nodejs", "node.js"], displayName: "Node.js", iconKey: "node", shikiLanguage: "javascript", httpSnippet: { target: "node", client: "fetch" } },
+    { key: "php", displayName: "PHP", shikiLanguage: "php", httpSnippet: { target: "php", client: "curl" } },
+    { key: "go", aliases: ["golang"], displayName: "Go", shikiLanguage: "go", httpSnippet: { target: "go" } },
+    { key: "java", displayName: "Java", shikiLanguage: "java", httpSnippet: { target: "java" } },
+    { key: "ruby", aliases: ["rb"], displayName: "Ruby", shikiLanguage: "ruby", httpSnippet: { target: "ruby" } },
+    {
+        key: "powershell",
+        displayName: "PowerShell",
+        shikiLanguage: "bash", // shiki doesn't have powershell in our LANGS
+        httpSnippet: { target: "powershell" },
+    },
+    { key: "swift", displayName: "Swift", shikiLanguage: "swift", httpSnippet: { target: "swift" } },
+    { key: "csharp", aliases: ["c#"], displayName: "C#", shikiLanguage: "csharp", httpSnippet: { target: "csharp", client: "restsharp" } },
+    { key: "dotnet", aliases: [".net", ".NET", "dotnet", "dot-net"], displayName: ".NET", iconKey: "dot-net", shikiLanguage: "csharp", httpSnippet: { target: "csharp", client: "restsharp" } },
+    { key: "typescript", aliases: ["ts"], displayName: "TypeScript", shikiLanguage: "typescript", httpSnippet: { target: "javascript", client: "fetch" } },
+    { key: "c", displayName: "C", shikiLanguage: "c", httpSnippet: { target: "c" } },
+    { key: "c++", aliases: ["cpp"], displayName: "C++", shikiLanguage: "c++", iconKey: "cplusplus", httpSnippet: { target: "c" } },
+    { key: "kotlin", aliases: ["kt"], displayName: "Kotlin", shikiLanguage: "kotlin", httpSnippet: { target: "kotlin" } },
+    { key: "rust", aliases: ["rs"], displayName: "Rust", shikiLanguage: "rust", httpSnippet: { target: "rust" } },
+    { key: "dart", aliases: ["flutter"], displayName: "Dart", shikiLanguage: "dart", httpSnippet: { target: "dart" } },
+    { key: "toml", displayName: "TOML", shikiLanguage: "yaml" },
+];
+const presetLookup = new Map();
+for (const preset of SNIPPET_PRESETS) {
+    presetLookup.set(preset.key.toLowerCase(), preset);
+    for (const alias of preset.aliases ?? [])
+        presetLookup.set(alias.toLowerCase(), preset);
+}
+const getPreset = (lang) => presetLookup.get(lang.toLowerCase());
+const getDisplayName = (lang) => getPreset(lang)?.displayName ?? lang;
+const getIconKey = (lang) => {
+    const preset = getPreset(lang);
+    return preset ? (preset.iconKey ?? preset.key) : undefined;
+};
+const getShikiLanguageFromPreset = (lang) => getPreset(lang)?.shikiLanguage ?? lang;
+export { SNIPPET_PRESETS, getPreset, getDisplayName, getIconKey, getShikiLanguageFromPreset };

package/dist/utils/shiki/worker-client.d.ts

@@ -0,0 +1,9 @@
+import { type Remote } from "comlink";
+import type { ShikiHighlightedHtmlArgs } from "./index";
+type HighlightFn = (props: ShikiHighlightedHtmlArgs) => string | undefined | Promise<string | undefined>;
+type ShikiWorkerInstance = Remote<{
+    highlight: HighlightFn;
+    ready: () => Promise<void>;
+}> | undefined;
+declare function getShikiWorker(): ShikiWorkerInstance;
+export { getShikiWorker };

package/dist/utils/shiki/worker-client.js

@@ -0,0 +1,22 @@
+import { wrap } from "comlink";
+let instance;
+function getShikiWorker() {
+    if (typeof Worker === "undefined") {
+        return undefined;
+    }
+    if (instance) {
+        return instance;
+    }
+    try {
+        const worker = new Worker(new URL("./worker.ts", import.meta.url), {
+            type: "module",
+        });
+        instance = wrap(worker);
+        return instance;
+    }
+    catch (error) {
+        console.warn("@mintlify/components: Shiki worker unavailable, using synchronous highlighting", error);
+        return undefined;
+    }
+}
+export { getShikiWorker };

package/dist/utils/shiki/worker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/shiki/worker.js

@@ -0,0 +1,134 @@
+import { expose } from "comlink";
+import { transformerMetaHighlight, transformerNotationDiff, transformerNotationFocus, transformerNotationHighlight, } from "@shikijs/transformers";
+import { createHighlighter, hastToHtml } from "shiki";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { codeStylingToThemeOrThemes } from "./get-code-styling";
+import { getShikiLanguageFromPreset } from "./snippet-presets";
+import { LANGS, LINE_DIFF_ADD_CLASS_NAME, LINE_DIFF_REMOVE_CLASS_NAME, LINE_FOCUS_CLASS_NAME, LINE_HIGHLIGHT_CLASS_NAME, SHIKI_COLOR_REPLACEMENTS, SHIKI_LANG_MAP, THEMES, } from "./constants";
+const matchAlgorithm = {
+    matchAlgorithm: "v3",
+};
+const transformers = [
+    transformerMetaHighlight({
+        className: LINE_HIGHLIGHT_CLASS_NAME,
+    }),
+    transformerNotationHighlight({
+        ...matchAlgorithm,
+        classActiveLine: LINE_HIGHLIGHT_CLASS_NAME,
+    }),
+    transformerNotationFocus({
+        ...matchAlgorithm,
+        classActiveLine: LINE_FOCUS_CLASS_NAME,
+    }),
+    transformerNotationDiff({
+        ...matchAlgorithm,
+        classLineAdd: LINE_DIFF_ADD_CLASS_NAME,
+        classLineRemove: LINE_DIFF_REMOVE_CLASS_NAME,
+    }),
+];
+let highlighter;
+const engine = createJavaScriptRegexEngine({
+    forgiving: true,
+    cache: new Map(),
+});
+const ready = createHighlighter({
+    themes: [...THEMES],
+    langs: [...LANGS],
+    engine,
+}).then((resolvedHighlighter) => {
+    highlighter = resolvedHighlighter;
+});
+function getShikiLanguage(lang) {
+    if (!lang) {
+        return "text";
+    }
+    const possibleStatusCode = Number(lang);
+    if (!Number.isNaN(possibleStatusCode) &&
+        Number.isFinite(possibleStatusCode) &&
+        possibleStatusCode > 99 &&
+        possibleStatusCode < 600) {
+        return "json";
+    }
+    const lower = lang.toLowerCase();
+    const presetLang = getShikiLanguageFromPreset(lower);
+    return SHIKI_LANG_MAP[presetLang] ?? SHIKI_LANG_MAP[lower] ?? "text";
+}
+function getLanguageFromClassName(className, fallback) {
+    // biome-ignore lint/performance/useTopLevelRegex: TODO
+    const match = /language-(\w+)/.exec(className ?? "");
+    return match ? (match[1] ?? "text") : (fallback ?? "text");
+}
+function highlightSync(props) {
+    if (!highlighter || !props.codeString) {
+        return undefined;
+    }
+    let lang;
+    if ("language" in props) {
+        lang = props.language;
+    }
+    else {
+        lang = getLanguageFromClassName(props.className, props.fileName);
+    }
+    if (!lang || lang === "text") {
+        return undefined;
+    }
+    try {
+        const serializer = props.opts?.highlightedLines?.length || props.opts?.focusedLines?.length
+            ? "codeToHast"
+            : "codeToHtml";
+        const code = props.codeString.trim();
+        const themeOrThemes = codeStylingToThemeOrThemes(props.codeBlockTheme);
+        const html = highlighter[serializer](code, {
+            lang: getShikiLanguage(lang),
+            ...themeOrThemes,
+            colorReplacements: { ...SHIKI_COLOR_REPLACEMENTS },
+            transformers,
+            tabindex: false,
+            ...props.opts,
+        });
+        if (typeof html !== "object") {
+            return html;
+        }
+        const firstChild = html.children[0];
+        if (firstChild?.type === "element" &&
+            firstChild.tagName === "pre") {
+            const codeElement = firstChild.children[0];
+            if (!codeElement?.children) {
+                return hastToHtml(html);
+            }
+            const spanElements = codeElement.children.filter((child) => child.type === "element" && child.tagName === "span");
+            spanElements.forEach((child, index) => {
+                const actualIndex = index + 1;
+                if (typeof child.properties.class === "string") {
+                    if (props.opts?.highlightedLines?.includes(actualIndex)) {
+                        child.properties.class += " " + LINE_HIGHLIGHT_CLASS_NAME;
+                    }
+                    if (props.opts?.focusedLines?.includes(actualIndex)) {
+                        child.properties.class += " " + LINE_FOCUS_CLASS_NAME;
+                    }
+                }
+                else if (Array.isArray(child.properties.class)) {
+                    if (props.opts?.highlightedLines?.includes(actualIndex)) {
+                        child.properties.class.push(LINE_HIGHLIGHT_CLASS_NAME);
+                    }
+                    if (props.opts?.focusedLines?.includes(actualIndex)) {
+                        child.properties.class.push(LINE_FOCUS_CLASS_NAME);
+                    }
+                }
+            });
+        }
+        return hastToHtml(html);
+    }
+    catch (error) {
+        console.error("error getting shiki highlighted html", error);
+        return undefined;
+    }
+}
+async function highlight(props) {
+    await ready;
+    return highlightSync(props);
+}
+async function workerReady() {
+    await ready;
+}
+expose({ highlight, ready: workerReady });

package/dist/utils/slugify.d.ts

@@ -0,0 +1,2 @@
+declare const slugify: (str: string) => string;
+export { slugify };

package/dist/utils/slugify.js

@@ -0,0 +1,9 @@
+const slugify = (str) => {
+    return str
+        .toLowerCase()
+        .trim()
+        .replace(/[^\w\s-]/g, "")
+        .replace(/[\s_-]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+};
+export { slugify };

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "components-svelte",
+  "version": "0.1.0",
+  "description": "Svelte 5 components for documentation sites",
+  "type": "module",
+  "license": "MIT",
+  "author": "Kimenzo",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Kimenzo/components-svelte.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Kimenzo/components-svelte/issues"
+  },
+  "homepage": "https://github.com/Kimenzo/components-svelte#readme",
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "components",
+    "documentation",
+    "ui",
+    "tailwindcss"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "package": "svelte-package",
+    "clean:package": "node ./scripts/clean-package-artifacts.mjs",
+    "build:css": "tailwindcss -i ./src/app.css -o ./dist/styles.css --minify",
+    "build:package": "bun run package && bun run clean:package && bun run build:css",
+    "prepublishOnly": "bun run build:package && publint",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
+    "storybook": "storybook dev -p 6007 --no-open",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "10.2.10",
+    "@storybook/addon-svelte-csf": "5.0.8",
+    "@storybook/svelte-vite": "10.2.10",
+    "@sveltejs/package": "2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
+    "@tailwindcss/cli": "4.1.18",
+    "@tailwindcss/typography": "^0.5.20",
+    "@tailwindcss/vite": "^4.1.18",
+    "@tsconfig/svelte": "^5.0.8",
+    "@types/hast": "3.0.4",
+    "@types/lodash": "^4.17.25",
+    "@types/node": "^24.13.3",
+    "playwright": "^1.62.1",
+    "publint": "0.3.24",
+    "storybook": "10.2.10",
+    "svelte": "5.57.0",
+    "svelte-check": "^4.7.6",
+    "typescript": "~6.0.2",
+    "tailwindcss": "^4.1.18",
+    "vite": "^8.2.2"
+  },
+  "dependencies": {
+    "@lucide/svelte": "^0.563.0",
+    "@shikijs/types": "3.21.0",
+    "@shikijs/transformers": "3.21.0",
+    "@sindresorhus/slugify": "^3.0.0",
+    "bits-ui": "^2.19.0",
+    "clsx": "^2.1.1",
+    "color": "^5.0.3",
+    "comlink": "4.4.2",
+    "hast": "1.0.0",
+    "lodash": "^4.18.1",
+    "mermaid": "11.16.1",
+    "mini-svg-data-uri": "^1.4.4",
+    "shiki": "3.21.0",
+    "tailwind-merge": "^2.6.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.57.0"
+  }
+}