svelte-multiselect 11.5.2 → 11.6.1

package/dist/heading-anchors.js

@@ -6,8 +6,8 @@
 // Avoid matching inside src={...} attributes by requiring these specific contexts
 // Note: [^>]* for attributes won't match if an attribute value contains > (e.g., data-foo="a>b")
 // This edge case is rare in practice and would require significantly more complex parsing
-const heading_regex_line_start = /^(\s*)<(h[2-6])([^>]*)>([\s\S]*?)<\/\2>/gim;
-const heading_regex_after_tag = /(>)(\s*)<(h[2-6])([^>]*)>([\s\S]*?)<\/\3>/gi;
+const heading_regex_line_start = /^(\s*)<(h[1-6])([^>]*)>([\s\S]*?)<\/\2>/gim;
+const heading_regex_after_tag = /(>)(\s*)<(h[1-6])([^>]*)>([\s\S]*?)<\/\3>/gi;
 // Remove Svelte expressions handling nested braces (e.g., {fn({a: 1})})
 // Treats unmatched } as literal text to avoid dropping content
 function strip_svelte_expressions(str) {
@@ -94,25 +94,19 @@ function add_anchor_to_heading(heading, icon_svg = link_svg) {
 export const heading_anchors = (options = {}) => (node) => {
     if (typeof document === `undefined`)
         return;
-    const selector = options.selector ?? `h2, h3, h4, h5, h6`;
+    // :scope refers to the element on which querySelectorAll is called
+    // This works whether the attachment is on <main> or a parent element
+    const selector = options.selector ??
+        `:scope > :is(h1, h2, h3, h4, h5, h6), :scope > * > :is(h1, h2, h3, h4, h5, h6)`;
     const icon_svg = options.icon_svg ?? link_svg;
     // Process existing headings
     for (const heading of Array.from(node.querySelectorAll(selector))) {
         add_anchor_to_heading(heading, icon_svg);
     }
-    // Watch for new headings
-    const observer = new MutationObserver((mutations) => {
-        for (const { addedNodes } of mutations) {
-            for (const added of Array.from(addedNodes)) {
-                if (added.nodeType !== Node.ELEMENT_NODE)
-                    continue;
-                const el = added;
-                if (el.matches?.(selector))
-                    add_anchor_to_heading(el, icon_svg);
-                for (const hdn of Array.from(el.querySelectorAll(selector))) {
-                    add_anchor_to_heading(hdn, icon_svg);
-                }
-            }
+    // Watch for new headings - requery the container to respect nesting depth constraints
+    const observer = new MutationObserver(() => {
+        for (const heading of Array.from(node.querySelectorAll(selector))) {
+            add_anchor_to_heading(heading, icon_svg);
         }
     });
     observer.observe(node, { childList: true, subtree: true });

package/dist/live-examples/highlighter.js

@@ -0,0 +1,35 @@
+// Starry-night highlighter for mdsvex
+import { common, createStarryNight } from '@wooorm/starry-night';
+import source_svelte from '@wooorm/starry-night/source.svelte';
+// Escape HTML special characters in text content (not for attribute values)
+const escape_html_text = (str) => str.replace(/&/g, `&amp;`).replace(/</g, `&lt;`).replace(/>/g, `&gt;`);
+// Convert HAST to HTML string (simplified - only handles what starry-night outputs)
+export const hast_to_html = (node) => {
+    if (node.type === `text`)
+        return escape_html_text(node.value);
+    if (node.type === `root`)
+        return node.children.map(hast_to_html).join(``);
+    const { tagName, properties, children } = node;
+    const cls = properties?.className?.join(` `);
+    const attrs = cls ? ` class="${cls}"` : ``;
+    const inner = children?.map(hast_to_html).join(``) ?? ``;
+    return `<${tagName}${attrs}>${inner}</${tagName}>`;
+};
+// Escape characters that would be interpreted as Svelte template syntax
+const escape_svelte = (html) => html.replace(/\{/g, `&#123;`).replace(/\}/g, `&#125;`);
+// Shared starry-night instance (grammars loaded once at build time)
+// Uses common bundle (34 grammars) + Svelte
+export const starry_night = await createStarryNight([...common, source_svelte]);
+// mdsvex highlighter function
+export function starry_night_highlighter(code, lang) {
+    const lang_key = lang?.toLowerCase();
+    const scope = lang_key ? starry_night.flagToScope(lang_key) : undefined;
+    if (!scope) {
+        // Return escaped code if language not supported
+        const escaped = escape_svelte(escape_html_text(code));
+        return `<pre class="highlight"><code>${escaped}</code></pre>`;
+    }
+    const tree = starry_night.highlight(code, scope);
+    const html = escape_svelte(hast_to_html(tree));
+    return `<pre class="highlight highlight-${lang_key}"><code>${html}</code></pre>`;
+}

package/dist/live-examples/index.d.ts

@@ -0,0 +1,7 @@
+export { hast_to_html, starry_night, starry_night_highlighter } from './highlighter.js';
+export { default as mdsvex_transform, EXAMPLE_COMPONENT_PREFIX, EXAMPLE_MODULE_PREFIX, } from './mdsvex-transform.js';
+export { default as vite_plugin } from './vite-plugin.js';
+import { sveltePreprocess as _sveltePreprocess } from 'svelte-preprocess';
+type SveltePreprocessOptions = Parameters<typeof _sveltePreprocess>[0];
+type PreprocessorGroup = ReturnType<typeof _sveltePreprocess>;
+export declare function sveltePreprocess(opts?: SveltePreprocessOptions): PreprocessorGroup;

package/dist/live-examples/index.js

@@ -0,0 +1,23 @@
+// Live examples - transforms ```svelte example code blocks into rendered components
+// with syntax highlighting and live preview
+export { hast_to_html, starry_night, starry_night_highlighter } from './highlighter.js';
+export { default as mdsvex_transform, EXAMPLE_COMPONENT_PREFIX, EXAMPLE_MODULE_PREFIX, } from './mdsvex-transform.js';
+export { default as vite_plugin } from './vite-plugin.js';
+import { sveltePreprocess as _sveltePreprocess } from 'svelte-preprocess';
+// Wrap sveltePreprocess to skip markdown files - otherwise it transpiles code inside
+// markdown code fences, losing whitespace formatting
+const is_markdown = (filename) => /\.(md|mdx|svx)$/.test(filename ?? ``);
+export function sveltePreprocess(opts) {
+    const base = _sveltePreprocess(opts);
+    return {
+        markup: async (args) => is_markdown(args.filename)
+            ? { code: args.content }
+            : (await base.markup?.(args)) ?? { code: args.content },
+        script: async (args) => is_markdown(args.filename)
+            ? { code: args.content }
+            : (await base.script?.(args)) ?? { code: args.content },
+        style: async (args) => is_markdown(args.filename)
+            ? { code: args.content }
+            : (await base.style?.(args)) ?? { code: args.content },
+    };
+}

package/dist/live-examples/mdsvex-transform.d.ts

@@ -0,0 +1,32 @@
+export declare const EXAMPLE_MODULE_PREFIX = "___live_example___";
+export declare const EXAMPLE_COMPONENT_PREFIX = "LiveExample___";
+interface RemarkMeta {
+    Wrapper?: string | [string, string];
+    filename?: string;
+    csr?: boolean;
+    example?: boolean;
+    hideScript?: boolean;
+    hideStyle?: boolean;
+    [key: string]: unknown;
+}
+interface RemarkOptions {
+    defaults?: Partial<RemarkMeta>;
+}
+interface RemarkTree {
+    type: string;
+    children: RemarkNode[];
+}
+interface RemarkNode {
+    type: string;
+    lang?: string;
+    meta?: string;
+    value?: string;
+    children?: RemarkNode[];
+}
+interface RemarkFile {
+    filename: string;
+    cwd: string;
+}
+type RemarkTransformer = (tree: RemarkTree, file: RemarkFile) => void;
+declare function remark(options?: RemarkOptions): RemarkTransformer;
+export default remark;

package/dist/live-examples/mdsvex-transform.js

@@ -0,0 +1,185 @@
+// Remark plugin - transforms ```svelte example code blocks into rendered components
+import { Buffer } from 'node:buffer';
+import path from 'node:path';
+import { hast_to_html, starry_night } from './highlighter.js';
+// Base64 encode to prevent preprocessors from modifying the content
+const to_base64 = (src) => Buffer.from(src, `utf-8`).toString(`base64`);
+// Escape backticks and template literal syntax for embedding in template literals
+const encode_escapes = (src) => src.replace(/`/g, `\\\``).replace(/\$\{/g, `\\$\{`);
+// Regex to find <script> block in svelte
+// Note: These patterns handle common cases but may have edge cases with nested
+// comments containing </script> strings or complex attribute syntax
+const RE_SCRIPT_START = /<script(?:\s+?[a-zA-Z]+(=(?:["']){0,1}[a-zA-Z0-9]+(?:["']){0,1}){0,1})*\s*?>/;
+const RE_SCRIPT_BLOCK = /(<script[\s\S]*?>)([\s\S]*?)(<\/script>)/g;
+const RE_STYLE_BLOCK = /(<style[\s\S]*?>)([\s\S]*?)(<\/style>)/g;
+// Parses key=value pairs from a string. Supports strings (with escaped quotes),
+// numbers, booleans, and arrays. Note: nested structures in arrays are not supported.
+const RE_PARSE_META = /(\w+=\d+|\w+="(?:[^"\\]|\\.)*"|\w+=\[[^\]]*\]|\w+)/g;
+export const EXAMPLE_MODULE_PREFIX = `___live_example___`;
+export const EXAMPLE_COMPONENT_PREFIX = `LiveExample___`;
+// Languages that render as live Svelte components (O(1) lookup)
+const LIVE_LANGUAGES = new Set([`svelte`, `html`]);
+// Simple tree traversal - finds all nodes of a given type
+const visit = (tree, type, callback) => {
+    const walk = (nodes) => {
+        for (const node of nodes) {
+            if (node.type === type)
+                callback(node);
+            if (node.children)
+                walk(node.children);
+        }
+    };
+    walk(tree.children);
+};
+// Default wrapper component
+const DEFAULT_WRAPPER = `$lib/CodeExample.svelte`;
+function remark(options = {}) {
+    const { defaults = {} } = options;
+    return function transformer(tree, file) {
+        const examples = [];
+        // Track wrapper imports to avoid duplicates and generate unique aliases
+        const wrapper_aliases = new Map(); // wrapper key -> alias name
+        const filename = path.relative(file.cwd, file.filename);
+        // Helper to get or create a wrapper alias
+        function get_wrapper_alias(wrapper) {
+            // Use '::' as delimiter to avoid misparsing paths with colons (Windows, URLs)
+            const wrapper_key = typeof wrapper === `string`
+                ? wrapper
+                : `${wrapper[0]}::${wrapper[1]}`;
+            let alias = wrapper_aliases.get(wrapper_key);
+            if (!alias) {
+                alias = `Example_${wrapper_aliases.size}`;
+                wrapper_aliases.set(wrapper_key, alias);
+            }
+            return alias;
+        }
+        visit(tree, `code`, (node) => {
+            const meta = {
+                Wrapper: DEFAULT_WRAPPER,
+                filename,
+                ...defaults,
+                ...parse_meta(node.meta || ``),
+            };
+            const { csr, example, Wrapper } = meta;
+            // find code blocks with `example` meta in supported languages
+            if (example && node.lang && starry_night.flagToScope(node.lang)) {
+                const is_live = LIVE_LANGUAGES.has(node.lang);
+                const wrapper_alias = is_live ? get_wrapper_alias(Wrapper ?? DEFAULT_WRAPPER) : ``;
+                const value = create_example_component(node.value || ``, meta, is_live ? examples.length : -1, // -1 for code-only (no component import needed)
+                node.lang, is_live, wrapper_alias);
+                // Only track live examples for component imports
+                if (is_live) {
+                    examples.push({ csr, wrapper_alias });
+                }
+                node.type = `paragraph`;
+                node.children = [{ type: `text`, value }];
+                delete node.lang;
+                delete node.meta;
+                delete node.value;
+            }
+        });
+        // add imports for each generated example
+        let scripts = ``;
+        // Add wrapper imports
+        // Use '::' as the tuple delimiter to avoid misparsing Windows paths (C:\path)
+        // or URLs (https://example.com) that contain single colons
+        for (const [wrapper_key, alias] of wrapper_aliases) {
+            const double_colon_idx = wrapper_key.indexOf(`::`);
+            if (double_colon_idx === -1) {
+                // Simple string path (default import)
+                scripts += `import ${alias} from "${wrapper_key}";\n`;
+            }
+            else {
+                // Tuple [module, export] using '::' delimiter
+                const module_path = wrapper_key.slice(0, double_colon_idx);
+                const export_name = wrapper_key.slice(double_colon_idx + 2);
+                scripts += `import { ${export_name} as ${alias} } from "${module_path}";\n`;
+            }
+        }
+        // Add example component imports
+        for (const [idx, ex] of examples.entries()) {
+            if (!ex.csr) {
+                scripts +=
+                    `import ${EXAMPLE_COMPONENT_PREFIX}${idx} from "${EXAMPLE_MODULE_PREFIX}${idx}.svelte";\n`;
+            }
+        }
+        // Try to inject imports into existing script block
+        let injected = false;
+        visit(tree, `html`, (node) => {
+            if (!injected && node.value && RE_SCRIPT_START.test(node.value)) {
+                node.value = node.value.replace(RE_SCRIPT_START, (opening_tag) => `${opening_tag}\n${scripts}`);
+                injected = true;
+            }
+        });
+        // Create script block if none existed
+        if (!injected) {
+            tree.children.push({ type: `html`, value: `<script>\n${scripts}</script>` });
+        }
+    };
+}
+function parse_meta(meta) {
+    const result = {};
+    for (const part of meta.match(RE_PARSE_META) ?? []) {
+        const eq = part.indexOf(`=`);
+        const key = eq === -1 ? part : part.slice(0, eq);
+        const value = eq === -1 ? `true` : part.slice(eq + 1);
+        try {
+            result[key] = JSON.parse(value);
+        }
+        catch {
+            throw new Error(`Unable to parse meta \`${key}=${value}\``);
+        }
+    }
+    return result;
+}
+function format_code(code, meta) {
+    let result = code;
+    if (meta.hideScript)
+        result = result.replace(RE_SCRIPT_BLOCK, ``);
+    if (meta.hideStyle)
+        result = result.replace(RE_STYLE_BLOCK, ``);
+    return result.trim();
+}
+function create_example_component(value, meta, index, lang, is_live, wrapper_alias) {
+    const code = format_code(value, meta);
+    const scope = starry_night.flagToScope(lang);
+    if (!scope)
+        throw new Error(`Unsupported language: ${lang}`);
+    const tree = starry_night.highlight(code, scope);
+    // Convert newlines to &#10; to prevent bundlers from stripping whitespace
+    const highlighted = hast_to_html(tree).replace(/\n/g, `&#10;`);
+    // Code-only examples (ts, js, css, etc.) - just render highlighted code block
+    if (!is_live) {
+        // Close and reopen <p> to avoid block-in-inline HTML nesting issues
+        return `</p><pre class="highlight highlight-${lang}"><code>{@html ${JSON.stringify(highlighted)}}</code></pre><p>`;
+    }
+    // Live examples (svelte, html) - render with CodeExample wrapper
+    const component = `${EXAMPLE_COMPONENT_PREFIX}${index}`;
+    const base64_src = to_base64(value);
+    const escaped_src = JSON.stringify(encode_escapes(code));
+    const escaped_meta = encode_escapes(JSON.stringify(meta));
+    // Close and reopen <p> to avoid block-in-inline HTML nesting issues
+    return `</p>
+  <${wrapper_alias}
+    __live_example_src={"${base64_src}"}
+    src={${escaped_src}}
+    meta={${escaped_meta}}
+  >
+    {#snippet example()}
+      ${meta.csr
+        ? `{#if typeof window !== 'undefined'}
+        {#await import("${EXAMPLE_MODULE_PREFIX}${index}.svelte") then module}
+          {@const ${component} = module.default}
+          <${component} />
+        {/await}
+        {/if}`
+        : `<${component} />`}
+    {/snippet}
+
+    {#snippet code()}
+      {@html ${JSON.stringify(highlighted)}}
+    {/snippet}
+  </${wrapper_alias}>
+  <p>`;
+}
+export default remark;

package/dist/live-examples/vite-plugin.d.ts

@@ -0,0 +1,6 @@
+import type { Plugin } from 'vite';
+import { EXAMPLE_MODULE_PREFIX } from './mdsvex-transform.js';
+export { EXAMPLE_MODULE_PREFIX };
+export default function live_examples_plugin(options?: {
+    extensions?: string[];
+}): Plugin;

package/dist/live-examples/vite-plugin.js

@@ -0,0 +1,170 @@
+// Vite plugin - handles virtual module resolution for example components
+// @ts-expect-error no types available
+import ast from 'abstract-syntax-tree';
+import { Buffer } from 'node:buffer';
+import path from 'node:path';
+import process from 'node:process';
+import { EXAMPLE_MODULE_PREFIX } from './mdsvex-transform.js';
+export { EXAMPLE_MODULE_PREFIX };
+// Max chars to scan after property end for trailing comma/whitespace cleanup
+const TRAILING_CLEANUP_BOUND = 50; // Generous bound - typical trailing content is ", " (2 chars)
+// Apply edits in reverse order so positions stay valid
+const apply_edits = (source, edits) => edits
+    .sort((a, b) => b.start - a.start)
+    .reduce((str, { start, end, content }) => str.slice(0, start) + content + str.slice(end), source);
+export default function live_examples_plugin(options = {}) {
+    const { extensions = [`.svelte.md`, `.md`, `.svx`] } = options;
+    // Extracted examples as individual virtual files (id -> svelte source)
+    const virtual_files = new Map();
+    // Reverse lookup: parent markdown path -> set of virtual file IDs (for O(1) HMR lookups)
+    const parent_to_virtual = new Map();
+    let vite_server;
+    return {
+        name: `live-examples-plugin`,
+        configureServer(server) {
+            vite_server = server;
+        },
+        resolveId(id) {
+            if (id.includes(EXAMPLE_MODULE_PREFIX)) {
+                // Force absolute path (dev uses relative, prod uses absolute)
+                // Use posix.join to ensure forward slashes on all platforms (Vite normalizes to /)
+                const cwd = process.cwd().replace(/\\/g, `/`);
+                return id.includes(cwd) ? id : path.posix.join(cwd, id);
+            }
+        },
+        load(id) {
+            if (id.includes(EXAMPLE_MODULE_PREFIX)) {
+                // Strip query parameters - Vite requests derived modules (styles, etc.) with queries
+                // like ?inline&svelte&type=style&lang.css but we store the base path
+                const [base_id, query = ``] = id.split(`?`);
+                const src = virtual_files.get(base_id);
+                if (src)
+                    return src;
+                // Virtual file not found - can happen during SSR/parallel builds when derived
+                // modules (styles, scripts) are requested before parent markdown is transformed.
+                // For derived module requests, return empty content to avoid crashes.
+                if (query.includes(`type=style`) || query.includes(`type=script`) ||
+                    query.includes(`type=module`)) {
+                    return ``;
+                }
+                // For main component requests in production, fail the build
+                const msg = `Example src not found for ${id}`;
+                if (process.env.NODE_ENV === `production`) {
+                    throw new Error(msg);
+                }
+                // In dev, warn and return error component to surface issue visibly
+                this.warn(msg);
+                return `<script>console.error(${JSON.stringify(msg)})</script><p style="color:red">${msg}</p>`;
+            }
+        },
+        transform(code, id) {
+            // Strip query params for extension check (Vite adds ?query for HMR, styles, etc.)
+            const base_id = id.split(`?`)[0];
+            // Skip non-matching files
+            const is_example_module = id.includes(EXAMPLE_MODULE_PREFIX);
+            const is_markdown = extensions.some((ext) => base_id.endsWith(ext));
+            if (!is_example_module && !is_markdown)
+                return;
+            // Skip derived modules (styles, etc.) - only process the main markdown file
+            // Vite creates derived modules like ?svelte&type=style&lang.css for style blocks
+            if (id.includes(`?svelte&type=`))
+                return { code, map: { mappings: `` } };
+            if (is_markdown) {
+                // Use AST for precise node location, collect edits to apply at end
+                let tree;
+                try {
+                    tree = ast.parse(code, { ranges: true });
+                }
+                catch {
+                    // Code may contain Svelte syntax that the JS parser can't handle
+                    // (e.g., template blocks, special directives). Skip transformation.
+                    return { code, map: { mappings: `` } };
+                }
+                const edits = [];
+                // Find all __live_example_src properties
+                const src_props = ast.find(tree, {
+                    type: `Property`,
+                    key: { name: `__live_example_src` },
+                });
+                for (const [idx, prop] of src_props.entries()) {
+                    // Extract the string literal content (base64 encoded)
+                    const string_literals = ast.find(prop, {
+                        type: `Literal`,
+                    });
+                    if (string_literals.length === 0)
+                        continue;
+                    const value_node = string_literals[0];
+                    // AST Literal nodes store value in .value property (string for literals)
+                    const src = Buffer.from(String(value_node.value ?? ``), `base64`).toString(`utf-8`);
+                    // Use base_id (without query params) to ensure consistent virtual file IDs
+                    const virtual_id = `${base_id}${EXAMPLE_MODULE_PREFIX}${idx}.svelte`;
+                    if (src !== virtual_files.get(virtual_id)) {
+                        virtual_files.set(virtual_id, src);
+                        // Update reverse lookup for HMR (get-or-create pattern)
+                        const virtual_set = parent_to_virtual.get(base_id) ?? new Set();
+                        if (!parent_to_virtual.has(base_id)) {
+                            parent_to_virtual.set(base_id, virtual_set);
+                        }
+                        virtual_set.add(virtual_id);
+                        // Invalidate modules for HMR
+                        if (vite_server) {
+                            const mod = vite_server.moduleGraph.getModuleById(virtual_id);
+                            const parent_mod = vite_server.moduleGraph.getModuleById(base_id);
+                            if (mod)
+                                vite_server.moduleGraph.invalidateModule(mod);
+                            if (parent_mod)
+                                vite_server.moduleGraph.invalidateModule(parent_mod);
+                        }
+                    }
+                    // Remove the property (including trailing comma/whitespace)
+                    if (prop.start !== undefined && prop.end !== undefined) {
+                        let end = prop.end;
+                        const max_end = Math.min(prop.end + TRAILING_CLEANUP_BOUND, code.length);
+                        while (end < max_end && /[\s,]/.test(code[end]))
+                            end++;
+                        edits.push({ start: prop.start, end, content: `` });
+                    }
+                }
+                // Update import paths (static and dynamic) to use virtual file IDs
+                const imports = [
+                    ...ast.find(tree, { type: `ImportDeclaration` }),
+                    ...ast.find(tree, { type: `ImportExpression` }),
+                ];
+                for (const { source } of imports) {
+                    const match = source?.value?.match(/___live_example___(\d+)\.svelte/);
+                    if (match && source?.start !== undefined && source?.end !== undefined) {
+                        const virtual_id = `${base_id}${EXAMPLE_MODULE_PREFIX}${match[1]}.svelte`;
+                        edits.push({
+                            start: source.start + 1,
+                            end: source.end - 1,
+                            content: virtual_id,
+                        });
+                    }
+                }
+                return {
+                    code: apply_edits(code, edits),
+                    map: { mappings: `` },
+                };
+            }
+            return { code, map: { mappings: `` } };
+        },
+        handleHotUpdate(ctx) {
+            // Collect virtual file modules that need HMR updates
+            const additional_modules = [];
+            // Normalize to forward slashes (ctx.file uses OS separators, Map keys use Vite's forward slashes)
+            const file = ctx.file.replace(/\\/g, `/`);
+            // O(1) lookup using reverse map instead of iterating all virtual files
+            if (extensions.some((ext) => file.endsWith(ext))) {
+                const virtual_ids = parent_to_virtual.get(file);
+                if (virtual_ids) {
+                    for (const id of virtual_ids) {
+                        const mod = ctx.server.moduleGraph.getModuleById(id);
+                        if (mod)
+                            additional_modules.push(mod);
+                    }
+                }
+            }
+            return [...additional_modules, ...ctx.modules];
+        },
+    };
+}

package/dist/types.d.ts

@@ -78,6 +78,14 @@ export interface MultiSelectEvents<T extends Option = Option> {
         option: T | null;
         index: number | null;
     }) => unknown;
+    onundo?: (data: {
+        previous: T[];
+        current: T[];
+    }) => unknown;
+    onredo?: (data: {
+        previous: T[];
+        current: T[];
+    }) => unknown;
 }
 export interface LoadOptionsParams {
     search: string;
@@ -152,7 +160,7 @@ export interface MultiSelectProps<T extends Option = Option> extends MultiSelect
     disabled?: boolean;
     disabledInputTitle?: string;
     duplicateOptionMsg?: string;
-    duplicates?: boolean;
+    duplicates?: boolean | `case-insensitive`;
     keepSelectedInDropdown?: false | `plain` | `checkboxes`;
     key?: (opt: T) => unknown;
     filterFunc?: (opt: T, searchText: string) => boolean;
@@ -222,12 +230,19 @@ export interface MultiSelectProps<T extends Option = Option> extends MultiSelect
     collapseAllGroups?: () => void;
     expandAllGroups?: () => void;
     shortcuts?: Partial<KeyboardShortcuts>;
+    history?: boolean | number;
+    undo?: () => boolean;
+    redo?: () => boolean;
+    canUndo?: boolean;
+    canRedo?: boolean;
 }
 export interface KeyboardShortcuts {
     select_all?: string | null;
     clear_all?: string | null;
     open?: string | null;
     close?: string | null;
+    undo?: string | null;
+    redo?: string | null;
 }
 export interface NavRouteObject {
     href: string;

package/dist/utils.d.ts

@@ -1,8 +1,10 @@
 import type { Option } from './types';
+export declare function get_uuid(): string;
 export declare const is_object: (val: unknown) => val is Record<string, unknown>;
 export declare const has_group: <T extends Option>(opt: T) => opt is T & {
     group: string;
 };
 export declare const get_label: (opt: Option) => string | number;
+export declare const get_option_key: (opt: Option) => unknown;
 export declare function get_style(option: Option, key?: `selected` | `option` | null | undefined): string;
 export declare function fuzzy_match(search_text: string, target_text: string): boolean;

package/dist/utils.js

@@ -1,3 +1,14 @@
+let uuid_counter = 0;
+// Generates a UUID for component IDs. Uses native crypto.randomUUID when available.
+// Fallback uses timestamp+counter - sufficient for DOM IDs (uniqueness, not security).
+// Cryptographic randomness is unnecessary here since these IDs are only used for
+// associating labels with inputs and ensuring unique DOM element identifiers.
+export function get_uuid() {
+    if (globalThis.crypto?.randomUUID)
+        return globalThis.crypto.randomUUID();
+    const hex = (Date.now().toString(16) + (uuid_counter++).toString(16)).padStart(32, `0`);
+    return hex.replace(/(.{8})(.{4})(.{4})(.{4})(.{12})/, `$1-$2-$3-$4-$5`);
+}
 // Type guard for checking if a value is a non-null object
 export const is_object = (val) => typeof val === `object` && val !== null;
 // Type guard for checking if an option has a group key
@@ -14,6 +25,10 @@ export const get_label = (opt) => {
     }
     return `${opt}`;
 };
+// Generate a unique key for an option, preserving value identity
+// For object options: uses value if defined, otherwise label (no case normalization)
+// For primitives: the primitive itself
+export const get_option_key = (opt) => is_object(opt) ? opt.value ?? get_label(opt) : opt;
 // This function is used extract CSS strings from a {selected, option} style
 // object to be used in the style attribute of the option.
 // If the style is a string, it will be returned as is