lutra 0.1.11 → 0.1.13

package/dist/components/MenuDropdown.svelte

@@ -171,7 +171,8 @@
         border-radius: var(--menu-border-radius);
         box-shadow: 0 0.5rem 1rem var(--shadow-color);
         background-color: var(--menu-background-color);
-        width: var(--width, 25ch);
+        width: var(--width, fit-content);
+        max-width: var(--max-width, 50ch);
         overflow-x: clip;
         overflow-y: auto;
         scrollbar-width: thin;

package/dist/components/MenuItemContent.svelte

@@ -1,19 +1,25 @@
 <script lang="ts">
     import type { Component, Snippet } from "svelte";
+    import Icon from "./Icon.svelte";
 
     let {
         text,
         snippet,
         component: Comp,
-        props
+        props,
+        icon
     }: {
         text?: string;
-        snippet?: Snippet<any[]>;
+        snippet?: Snippet;
         component?: Component;
         props?: any;
+        icon?: string | Component;
     } = $props();
 </script>
 
+{#if icon}
+    <Icon {icon} alt={text} />
+{/if}
 {#if text}
     {text}
 {/if}
@@ -22,4 +28,10 @@
 {/if}
 {#if Comp}
     <Comp {...props} />
-{/if}
+{/if}
+
+<style>
+    :global(.Icon) {
+        margin-inline-end: var(--menu-item-icon-gap, var(--space-sm));
+    }
+</style>

package/dist/components/MenuItemContent.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { Component, Snippet } from "svelte";
 type $$ComponentProps = {
     text?: string;
-    snippet?: Snippet<any[]>;
+    snippet?: Snippet;
     component?: Component;
     props?: any;
+    icon?: string | Component;
 };
 declare const MenuItemContent: Component<$$ComponentProps, {}, "">;
 type MenuItemContent = ReturnType<typeof MenuItemContent>;

package/dist/components/MenuTypes.d.ts

@@ -9,9 +9,11 @@ export type MenuItem = {
     /** Text label of the item to display to the user. */
     text?: string;
     /** Snippet to display. */
-    snippet?: Snippet<any[]>;
+    snippet?: Snippet;
     /** Component to display. */
     component?: Component;
+    /** Icon to display. Pass either a Svelte Component or an URL. Use the Icon component to recolor your icons according to the user theme. */
+    icon?: string | Component;
     /** Color to use for the item. */
     color?: StatusColorOrString;
 } | {
@@ -27,7 +29,7 @@ export type MenuItem = {
     /** Text label of the item to display to the user. */
     text?: string;
     /** Snippet to display. */
-    snippet?: Snippet<any[]>;
+    snippet?: Snippet;
     /** Component to display. */
     component?: Component;
     /** Keyboard shortcut to display next to the item. */
@@ -65,7 +67,7 @@ export type TabbedContentItem = {
     /** Content to display when the item is selected. */
     text?: string;
     /** Snippet to display. */
-    snippet?: Snippet<any[]>;
+    snippet?: Snippet;
     /** Component to display. */
     component?: Component;
 };

package/dist/util/keyboard.svelte.js

@@ -104,7 +104,10 @@ export function matchOnType(el, e) {
         items.forEach((el) => {
             const contentEl = el.querySelector("span.Content") ?? el.querySelector("label");
             if (contentEl) {
-                contentEl.innerHTML = contentEl.textContent;
+                // Remove underlines while preserving other elements (like icons)
+                contentEl.querySelectorAll("u").forEach((u) => {
+                    u.replaceWith(u.textContent);
+                });
             }
         });
     }
@@ -132,13 +135,48 @@ export function matchOnType(el, e) {
         // add underline to the matched text
         matches.forEach((el) => {
             const contentEl = el.querySelector("span.Content, label");
-            const text = contentEl?.textContent?.trim();
-            if (text) {
-                const index = text.toLowerCase().indexOf(keyMemory);
-                const first = text.slice(0, index);
-                const last = text.slice(index + keyMemory.length);
-                const middle = text.slice(index, index + keyMemory.length);
-                contentEl.innerHTML = `${first}<u>${middle}</u>${last}`;
+            if (!contentEl)
+                return;
+            // Find all text nodes within contentEl
+            const walker = document.createTreeWalker(contentEl, NodeFilter.SHOW_TEXT, null);
+            let textNode;
+            let fullText = "";
+            const textNodes = [];
+            while (textNode = walker.nextNode()) {
+                textNodes.push(textNode);
+                fullText += textNode.textContent;
+            }
+            const lowerText = fullText.toLowerCase();
+            const matchIndex = lowerText.indexOf(keyMemory);
+            if (matchIndex === -1)
+                return;
+            // Calculate position across text nodes
+            let currentPos = 0;
+            for (const node of textNodes) {
+                const nodeText = node.textContent || "";
+                const nodeLength = nodeText.length;
+                const nodeStart = currentPos;
+                const nodeEnd = currentPos + nodeLength;
+                // Check if this node contains any part of the match
+                if (matchIndex < nodeEnd && matchIndex + keyMemory.length > nodeStart) {
+                    const relativeStart = Math.max(0, matchIndex - nodeStart);
+                    const relativeEnd = Math.min(nodeLength, matchIndex + keyMemory.length - nodeStart);
+                    const before = nodeText.slice(0, relativeStart);
+                    const match = nodeText.slice(relativeStart, relativeEnd);
+                    const after = nodeText.slice(relativeEnd);
+                    const fragment = document.createDocumentFragment();
+                    if (before)
+                        fragment.appendChild(document.createTextNode(before));
+                    if (match) {
+                        const u = document.createElement("u");
+                        u.textContent = match;
+                        fragment.appendChild(u);
+                    }
+                    if (after)
+                        fragment.appendChild(document.createTextNode(after));
+                    node.replaceWith(fragment);
+                }
+                currentPos = nodeEnd;
             }
         });
         if (keyMemory.length === 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.1.11",
+	"version": "0.1.13",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",