svelte-tv 1.0.4 → 1.0.6

package/dist/__package_types_tmp__/core/elementNode.d.ts

@@ -41,6 +41,7 @@ export interface ElementNode extends RendererNode, FocusNode {
     _transitionAnimations?: Record<string, IAnimationController | undefined>;
     _transitionAnimationVersions?: Record<string, number | undefined>;
     _lastAnyKeyPressTime?: number;
+    _svelteEffect?: unknown;
     _type: 'element' | 'textNode';
     _undoStyles?: string[];
     _display?: 'flex' | 'block';

package/dist/__package_types_tmp__/core/svelteNode.d.ts

@@ -15,7 +15,7 @@ export interface LightningComponent {
 export declare function getParentNode(): ElementNode | undefined;
 export declare function setParentNode(node: ElementNode): void;
 export declare function createNode(name: 'view' | 'text', props: Record<string, any>): ElementNode;
-export declare function mountNode(node: ElementNode, parent: ElementNode | undefined): void;
+export declare function mountNode(node: ElementNode, parent: ElementNode | undefined, effect?: unknown): void;
 export declare function unmountNode(node: ElementNode): void;
 export declare function applyNodeProps(node: ElementNode, props: Record<string, any>): void;
 export declare function setTextContent(node: ElementNode, text: string | undefined): void;

package/dist/__package_types_tmp__/core/svelteRenderer.d.ts

@@ -0,0 +1,43 @@
+import { ElementNode } from './elementNode.js';
+import { TextNode } from './nodeTypes.js';
+type FragmentNode = {
+    _type: 'fragment';
+    parent?: ElementNode | FragmentNode;
+    children: RendererNode[];
+};
+type CommentNode = {
+    _type: 'comment';
+    parent?: ElementNode | FragmentNode;
+    data: string;
+};
+type RendererNode = ElementNode | TextNode | FragmentNode | CommentNode;
+type RendererParent = ElementNode | FragmentNode;
+declare function createFragment(): FragmentNode;
+declare const renderer: {
+    createFragment: typeof createFragment;
+    createElement(name: string): ElementNode;
+    createTextNode(data: string): TextNode;
+    createComment(data: string): CommentNode;
+    nodeType(node: RendererNode): "element" | "text" | "fragment" | "comment";
+    getNodeValue(node: TextNode | CommentNode): string;
+    getAttribute(element: ElementNode, name: string): string | null;
+    setAttribute(element: ElementNode, key: string, value: unknown): void;
+    removeAttribute(element: ElementNode, name: string): void;
+    hasAttribute(element: ElementNode, name: string): boolean;
+    setText(node: ElementNode | TextNode | CommentNode, text: string): void;
+    getFirstChild(node: RendererParent): RendererNode | null;
+    getLastChild(node: RendererParent): RendererNode | null;
+    getNextSibling(node: ElementNode | TextNode | CommentNode): RendererNode | null;
+    insert(parent: RendererParent, node: RendererNode, anchor: RendererNode | null): void;
+    remove(node: ElementNode | TextNode | CommentNode): void;
+    getParent(node: ElementNode | TextNode | CommentNode): RendererParent | null;
+    addEventListener(target: ElementNode, type: string, handler: any): void;
+    removeEventListener(target: ElementNode, type: string, handler: any): void;
+    foreign: {
+        insertIntoForeign(_parent: Node, node: RendererNode, _anchor: ChildNode | null): void;
+        insertForeign(_parent: RendererParent, _node: Node, _anchor: RendererNode | null): void;
+        removeForeign(node: ChildNode): void;
+        removeFromForeign(node: RendererNode): void;
+    };
+};
+export default renderer;

package/dist/__package_types_tmp__/primitives/Icon.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { IconifyIconOnLoad, IconifyIconProps } from '@iconify/svelte/dist/functions';
+import { type NodeProps } from '../index.js';
+type Props = Omit<NodeProps, 'color' | 'height' | 'width'> & IconifyIconProps & {
+    onLoad?: IconifyIconOnLoad;
+    onload?: IconifyIconOnLoad;
+};
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/__package_types_tmp__/primitives/index.d.ts

@@ -5,6 +5,7 @@ export { default as Drawer } from './Drawer.svelte';
 export { default as FadeInOut } from './FadeInOut.svelte';
 export { default as FPSCounter } from './FPSCounter.svelte';
 export { default as Grid } from './Grid.svelte';
+export { default as Icon } from './Icon.svelte';
 export { default as IconButton } from './IconButton.svelte';
 export { default as Image } from './Image.svelte';
 export { default as Marquee } from './Marquee.svelte';

package/dist/__package_types_tmp__/primitives/router/index.d.ts

@@ -2,7 +2,7 @@ export { default as HashRouter } from './HashRouter.svelte';
 export { default as KeepAliveRoute } from './KeepAliveRoute.svelte';
 export { default as Navigate } from './Navigate.svelte';
 export { default as Route } from './Route.svelte';
-export { location, navigate, params, route, routeData, } from './context.js';
+export { location, navigate, params, route, routeData } from './context.js';
 export { lazy } from './lazy.js';
 export { createLocation, matchRoutes, normalizePath } from './match.js';
 export type { LazyRouteComponent, MatchedRoute, NavigateFn, NavigateOptions, RouteComponent, RouteComponentProps, RouteDefinition, RouteLocation, RouteParams, RoutePreload, RoutePreloadArgs, RouteRenderable, } from './types.js';

package/dist/core/elementNode.d.ts

@@ -41,6 +41,7 @@ export interface ElementNode extends RendererNode, FocusNode {
     _transitionAnimations?: Record<string, IAnimationController | undefined>;
     _transitionAnimationVersions?: Record<string, number | undefined>;
     _lastAnyKeyPressTime?: number;
+    _svelteEffect?: unknown;
     _type: 'element' | 'textNode';
     _undoStyles?: string[];
     _display?: 'flex' | 'block';

package/dist/core/elementNode.js

@@ -406,6 +406,7 @@ export class ElementNode {
         this._transitionAnimations = undefined;
         this._transitionAnimationVersions = undefined;
         this._lastAnyKeyPressTime = undefined;
+        this._svelteEffect = undefined;
         this._undoStyles = undefined;
         this._display = undefined;
         this._onLayout = undefined;

package/dist/core/focusManager.js

@@ -39,24 +39,24 @@ const addFocusDebug = (prevFocusPath, newFocusPath) => {
     if (needFocusDebugStyles) {
         const style = document.createElement('style');
         style.type = 'text/css';
-        style.innerHTML = `
-      [data-focus="3"] {
-        border: 2px solid rgba(255, 33, 33, 0.2);
-        border-radius: 5px;
-        transition: border-color 0.3s ease;
-      }
-
-      [data-focus="2"] {
-        border: 2px solid rgba(255, 33, 33, 0.4);
-        border-radius: 5px;
-        transition: border-color 0.3s ease;
-      }
-
-      [data-focus="1"] {
-        border: 4px solid rgba(255, 33, 33, 0.9);
-        border-radius: 5px;
-        transition: border-color 0.5s ease;
-      }
+        style.innerHTML = `
+      [data-focus="3"] {
+        border: 2px solid rgba(255, 33, 33, 0.2);
+        border-radius: 5px;
+        transition: border-color 0.3s ease;
+      }
+
+      [data-focus="2"] {
+        border: 2px solid rgba(255, 33, 33, 0.4);
+        border-radius: 5px;
+        transition: border-color 0.3s ease;
+      }
+
+      [data-focus="1"] {
+        border: 4px solid rgba(255, 33, 33, 0.9);
+        border-radius: 5px;
+        transition: border-color 0.5s ease;
+      }
     `;
         document.head.appendChild(style);
         needFocusDebugStyles = false;

package/dist/core/lightningInit.js

@@ -1,5 +1,5 @@
 import * as lng from '@lightningjs/renderer';
-import { CanvasRenderer, CanvasTextRenderer } from '@lightningjs/renderer/canvas';
+import { CanvasRenderer, CanvasTextRenderer, } from '@lightningjs/renderer/canvas';
 import { registerDefaultShaders } from './shaders.js';
 export let renderer;
 export const getRenderer = () => renderer;

package/dist/core/svelteNode.d.ts

@@ -15,7 +15,7 @@ export interface LightningComponent {
 export declare function getParentNode(): ElementNode | undefined;
 export declare function setParentNode(node: ElementNode): void;
 export declare function createNode(name: 'view' | 'text', props: Record<string, any>): ElementNode;
-export declare function mountNode(node: ElementNode, parent: ElementNode | undefined): void;
+export declare function mountNode(node: ElementNode, parent: ElementNode | undefined, effect?: unknown): void;
 export declare function unmountNode(node: ElementNode): void;
 export declare function applyNodeProps(node: ElementNode, props: Record<string, any>): void;
 export declare function setTextContent(node: ElementNode, text: string | undefined): void;

package/dist/core/svelteNode.js

@@ -1,5 +1,6 @@
 import { getContext, setContext } from 'svelte';
-import { ElementNode, enqueueDelete, } from './elementNode.js';
+import { active_effect } from 'svelte/internal/client';
+import { ElementNode, enqueueDelete } from './elementNode.js';
 import { TextNode } from './nodeTypes.js';
 import { isElementText } from './utils.js';
 const nodeContext = Symbol('svelte-tv-node');
@@ -14,10 +15,11 @@ export function createNode(name, props) {
     applyNodeProps(node, props);
     return node;
 }
-export function mountNode(node, parent) {
+export function mountNode(node, parent, effect = active_effect) {
     if (!parent)
         return;
-    parent.insertChild(node);
+    node._svelteEffect = effect;
+    parent.insertChild(node, findNextSibling(node, parent));
     if (parent.rendered) {
         node.render(true);
     }
@@ -54,6 +56,56 @@ export function applyNodeProps(node, props) {
     }
     node.rerender();
 }
+function findNextSibling(node, parent) {
+    const effect = node._svelteEffect;
+    if (!isSvelteEffect(effect))
+        return undefined;
+    for (const child of parent.children) {
+        if (isSvelteEffect(child._svelteEffect) &&
+            isEffectBefore(effect, child._svelteEffect)) {
+            return child;
+        }
+    }
+}
+function isEffectBefore(a, b) {
+    if (a === b)
+        return false;
+    const aPath = effectPath(a);
+    const bPath = effectPath(b);
+    let index = 0;
+    while (aPath[index] && aPath[index] === bPath[index]) {
+        index++;
+    }
+    const aChild = aPath[index];
+    const bChild = bPath[index];
+    if (!aChild || !bChild)
+        return false;
+    let sibling = bChild.prev;
+    while (sibling) {
+        if (sibling === aChild)
+            return true;
+        sibling = sibling.prev;
+    }
+    return false;
+}
+function effectPath(effect) {
+    const path = [];
+    let current = effect;
+    while (current) {
+        path.unshift(current);
+        current = current.parent;
+    }
+    return path;
+}
+function isSvelteEffect(value) {
+    if (!value || typeof value !== 'object')
+        return false;
+    const effect = value;
+    return ('parent' in effect &&
+        (effect.parent === null || typeof effect.parent === 'object') &&
+        'prev' in effect &&
+        (effect.prev === null || typeof effect.prev === 'object'));
+}
 export function setTextContent(node, text) {
     if (!isElementText(node))
         return;

package/dist/core/svelteRenderer.d.ts

@@ -0,0 +1,43 @@
+import { ElementNode } from './elementNode.js';
+import { TextNode } from './nodeTypes.js';
+type FragmentNode = {
+    _type: 'fragment';
+    parent?: ElementNode | FragmentNode;
+    children: RendererNode[];
+};
+type CommentNode = {
+    _type: 'comment';
+    parent?: ElementNode | FragmentNode;
+    data: string;
+};
+type RendererNode = ElementNode | TextNode | FragmentNode | CommentNode;
+type RendererParent = ElementNode | FragmentNode;
+declare function createFragment(): FragmentNode;
+declare const renderer: {
+    createFragment: typeof createFragment;
+    createElement(name: string): ElementNode;
+    createTextNode(data: string): TextNode;
+    createComment(data: string): CommentNode;
+    nodeType(node: RendererNode): "element" | "text" | "fragment" | "comment";
+    getNodeValue(node: TextNode | CommentNode): string;
+    getAttribute(element: ElementNode, name: string): string | null;
+    setAttribute(element: ElementNode, key: string, value: unknown): void;
+    removeAttribute(element: ElementNode, name: string): void;
+    hasAttribute(element: ElementNode, name: string): boolean;
+    setText(node: ElementNode | TextNode | CommentNode, text: string): void;
+    getFirstChild(node: RendererParent): RendererNode | null;
+    getLastChild(node: RendererParent): RendererNode | null;
+    getNextSibling(node: ElementNode | TextNode | CommentNode): RendererNode | null;
+    insert(parent: RendererParent, node: RendererNode, anchor: RendererNode | null): void;
+    remove(node: ElementNode | TextNode | CommentNode): void;
+    getParent(node: ElementNode | TextNode | CommentNode): RendererParent | null;
+    addEventListener(target: ElementNode, type: string, handler: any): void;
+    removeEventListener(target: ElementNode, type: string, handler: any): void;
+    foreign: {
+        insertIntoForeign(_parent: Node, node: RendererNode, _anchor: ChildNode | null): void;
+        insertForeign(_parent: RendererParent, _node: Node, _anchor: RendererNode | null): void;
+        removeForeign(node: ChildNode): void;
+        removeFromForeign(node: RendererNode): void;
+    };
+};
+export default renderer;

package/dist/core/svelteRenderer.js

@@ -0,0 +1,178 @@
+import { createRenderer } from 'svelte/renderer';
+import { ElementNode, enqueueDelete } from './elementNode.js';
+import { TextNode } from './nodeTypes.js';
+import { rootNode } from './root.js';
+import { applyNodeProps, setTextContent } from './svelteNode.js';
+import { isElementText } from './utils.js';
+function createFragment() {
+    return {
+        _type: 'fragment',
+        children: [],
+    };
+}
+function getChildren(node) {
+    return node.children;
+}
+function getRendererParent(node) {
+    const parent = node.parent;
+    return parent;
+}
+function detach(node) {
+    const parent = getRendererParent(node);
+    if (!parent)
+        return;
+    const children = getChildren(parent);
+    const index = children.indexOf(node);
+    if (index !== -1) {
+        children.splice(index, 1);
+    }
+    node.parent = undefined;
+}
+function removeRendererNode(node) {
+    if (node._type === 'fragment') {
+        for (const child of [...node.children]) {
+            removeRendererNode(child);
+        }
+        return;
+    }
+    renderer.remove(node);
+}
+function renderInserted(node, parent) {
+    if (!(node instanceof ElementNode) || !(parent instanceof ElementNode))
+        return;
+    if (parent.rendered) {
+        node.render(true);
+    }
+}
+function insertChild(parent, node, anchor) {
+    detach(node);
+    node.parent = parent;
+    const children = getChildren(parent);
+    const index = anchor ? children.indexOf(anchor) : -1;
+    children.splice(index === -1 ? children.length : index, 0, node);
+    renderInserted(node, parent);
+}
+function setRef(element, ref) {
+    const previous = element._svelteRef;
+    if (previous === ref)
+        return;
+    previous?.(undefined);
+    element._svelteRef = ref;
+    ref?.(element);
+}
+const renderer = createRenderer({
+    createFragment,
+    createElement(name) {
+        return new ElementNode(name === 'text' ? 'text' : 'view');
+    },
+    createTextNode(data) {
+        return new TextNode(data);
+    },
+    createComment(data) {
+        return {
+            _type: 'comment',
+            data,
+        };
+    },
+    nodeType(node) {
+        if (node instanceof ElementNode)
+            return 'element';
+        if (node instanceof TextNode)
+            return 'text';
+        return node._type;
+    },
+    getNodeValue(node) {
+        return node instanceof TextNode ? node.text : node.data;
+    },
+    getAttribute(element, name) {
+        const value = element[name];
+        return value == null ? null : String(value);
+    },
+    setAttribute(element, key, value) {
+        if (key === 'ref') {
+            setRef(element, value);
+            return;
+        }
+        applyNodeProps(element, { [key]: value });
+    },
+    removeAttribute(element, name) {
+        if (name === 'ref') {
+            setRef(element, undefined);
+            return;
+        }
+        applyNodeProps(element, { [name]: undefined });
+    },
+    hasAttribute(element, name) {
+        return element[name] !== undefined;
+    },
+    setText(node, text) {
+        if (node instanceof TextNode) {
+            node.text = text;
+        }
+        else if (node instanceof ElementNode && isElementText(node)) {
+            setTextContent(node, text);
+        }
+        else if (!(node instanceof ElementNode)) {
+            node.data = text;
+        }
+    },
+    getFirstChild(node) {
+        return getChildren(node)[0] ?? null;
+    },
+    getLastChild(node) {
+        return getChildren(node).at(-1) ?? null;
+    },
+    getNextSibling(node) {
+        const parent = getRendererParent(node);
+        if (!parent)
+            return null;
+        const children = getChildren(parent);
+        const index = children.indexOf(node);
+        return index === -1 ? null : (children[index + 1] ?? null);
+    },
+    insert(parent, node, anchor) {
+        if (node._type === 'fragment') {
+            for (const child of [...node.children]) {
+                insertChild(parent, child, anchor);
+            }
+            return;
+        }
+        insertChild(parent, node, anchor);
+    },
+    remove(node) {
+        detach(node);
+        if (node instanceof ElementNode) {
+            setRef(node, undefined);
+            enqueueDelete(node, -1);
+        }
+    },
+    getParent(node) {
+        return getRendererParent(node) ?? null;
+    },
+    addEventListener(target, type, handler) {
+        target.onEvent = {
+            ...target.onEvent,
+            [type]: handler,
+        };
+    },
+    removeEventListener(target, type, handler) {
+        const onEvent = target.onEvent;
+        if (onEvent && onEvent[type] === handler) {
+            delete onEvent[type];
+            target.onEvent = onEvent;
+        }
+    },
+    foreign: {
+        insertIntoForeign(_parent, node, _anchor) {
+            renderer.insert(rootNode, node, null);
+        },
+        insertForeign(_parent, _node, _anchor) { },
+        removeForeign(node) {
+            node.remove();
+        },
+        removeFromForeign(node) {
+            removeRendererNode(node);
+        },
+    },
+});
+export default renderer;

package/dist/core/utils.js

@@ -80,17 +80,17 @@ export function logRenderTree(node) {
         parent = parent.parent;
     }
     tree.reverse();
-    let output = `
-function convertEffectsToShader(styleEffects) {
-  const effects = [];
-  let index = 0;
-
-  for (const [type, props] of Object.entries(styleEffects)) {
-    effects.push({ type, props });
-    index++;
-  }
-  return createShader('DynamicShader', { effects });
-}
+    let output = `
+function convertEffectsToShader(styleEffects) {
+  const effects = [];
+  let index = 0;
+
+  for (const [type, props] of Object.entries(styleEffects)) {
+    effects.push({ type, props });
+    index++;
+  }
+  return createShader('DynamicShader', { effects });
+}
 `;
     tree.forEach((node, i) => {
         if (!node._rendererProps) {
@@ -103,11 +103,11 @@ function convertEffectsToShader(styleEffects) {
             ? `props${i}.shader = convertEffectsToShader(${JSON.stringify(node._effects, null, 2)});`
             : '';
         const parent = i === 0 ? 'rootNode' : `node${i - 1}`;
-        output += `
-const props${i} = ${props};
-props${i}.parent = ${parent};
-${effects}
-const node${i} = renderer.createNode(props${i});
+        output += `
+const props${i} = ${props};
+props${i}.parent = ${parent};
+${effects}
+const node${i} = renderer.createNode(props${i});
 `;
     });
     return output;

package/dist/primitives/Grid.svelte

@@ -98,7 +98,7 @@ const nodeProps = $derived.by(() => {
   onFocus={chainFunctions(props.onFocus, onFocus)}
   strictBounds={false}
   y={props.scroll === 'none'
-    ? props.y ?? 0
+    ? (props.y ?? 0)
     : -Math.floor(focusedIndex / columns()) * totalHeight() + (props.y || 0)}
 >
   {#each props.items as item, index}

package/dist/primitives/Icon.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">import { addIcon, generateIcon, getIcon, loadIcon } from "@iconify/svelte/dist/functions";
+import { renderer } from "../index.js";
+import View from "../View.svelte";
+let props = $props();
+let texture = $state();
+let viewWidth = $state();
+let viewHeight = $state();
+let loadId = 0;
+const storagePrefix = "svelte-tv:iconify:v1:";
+function numberSize(size) {
+	if (typeof size === "number") return size;
+	if (typeof size !== "string") return undefined;
+	const match = size.match(/^(\d+(?:\.\d+)?)(px)?$/);
+	return match ? Number(match[1]) : undefined;
+}
+function base64Encode(value) {
+	const encoded = encodeURIComponent(value);
+	let binary = "";
+	for (let i = 0; i < encoded.length; i++) {
+		if (encoded[i] === "%") {
+			binary += String.fromCharCode(parseInt(encoded.slice(i + 1, i + 3), 16));
+			i += 2;
+		} else {
+			binary += encoded[i];
+		}
+	}
+	return btoa(binary);
+}
+function createSvg(icon) {
+	const data = generateIcon(icon, {
+		...props,
+		mode: "svg"
+	});
+	if (!data?.svg) return undefined;
+	const width = numberSize(data.attributes.width) ?? icon.width ?? 16;
+	const height = numberSize(data.attributes.height) ?? icon.height ?? 16;
+	const attributes = Object.entries(data.attributes).map(([key, value]) => `${key}="${String(value).replace(/"/g, "&quot;")}"`).join(" ");
+	viewWidth = typeof props.w === "number" ? props.w : width;
+	viewHeight = typeof props.h === "number" ? props.h : height;
+	return `<svg ${attributes}>${data.body}</svg>`;
+}
+function createTexture(icon) {
+	const svg = createSvg(icon);
+	if (!svg) return undefined;
+	return renderer.createTexture("ImageTexture", {
+		src: `data:image/svg+xml;base64,${base64Encode(svg)}`,
+		type: "svg",
+		w: viewWidth,
+		h: viewHeight
+	});
+}
+function readStoredIcon(name) {
+	if (typeof localStorage === "undefined") return undefined;
+	try {
+		const raw = localStorage.getItem(storagePrefix + name);
+		if (!raw) return undefined;
+		const icon = JSON.parse(raw);
+		if (icon && typeof icon.body === "string") {
+			addIcon(name, icon);
+			return getIcon(name) ?? icon;
+		}
+	} catch {}
+}
+function storeIcon(name, icon) {
+	if (typeof localStorage === "undefined") return;
+	try {
+		localStorage.setItem(storagePrefix + name, JSON.stringify(icon));
+	} catch {}
+}
+$effect(() => {
+	const currentLoadId = ++loadId;
+	texture = undefined;
+	if (typeof props.icon !== "string") {
+		texture = createTexture(props.icon);
+		return;
+	}
+	const cachedIcon = getIcon(props.icon);
+	const storedIcon = cachedIcon === undefined ? readStoredIcon(props.icon) : cachedIcon;
+	if (storedIcon) {
+		texture = createTexture(storedIcon);
+		props.onLoad?.(props.icon);
+		props.onload?.(props.icon);
+		return;
+	}
+	if (storedIcon === null) return;
+	loadIcon(props.icon).then((icon) => {
+		if (currentLoadId !== loadId) return;
+		storeIcon(props.icon, icon);
+		texture = createTexture(icon);
+		props.onLoad?.(props.icon);
+		props.onload?.(props.icon);
+	}).catch(() => {});
+});
+const nodeProps = $derived.by(() => {
+	const { icon, mode, color, flip, hFlip, vFlip, rotate, inline, width, height, id, onLoad, onload, ...rest } = props;
+	return rest;
+});
+</script>
+
+{#if texture}
+  <View
+    {...nodeProps}
+    {texture}
+    w={viewWidth}
+    h={viewHeight}
+    color={0xffffffff}
+  />
+{/if}

package/dist/primitives/Icon.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { IconifyIconOnLoad, IconifyIconProps } from '@iconify/svelte/dist/functions';
+import { type NodeProps } from '../index.js';
+type Props = Omit<NodeProps, 'color' | 'height' | 'width'> & IconifyIconProps & {
+    onLoad?: IconifyIconOnLoad;
+    onload?: IconifyIconOnLoad;
+};
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/primitives/Image.svelte

@@ -34,6 +34,11 @@ const nodeProps = $derived.by(() => {
 });
 </script>
 
-<View {...nodeProps} src={currentSrc} color={props.color || 0xffffffff} {texture}>
+<View
+  {...nodeProps}
+  src={currentSrc}
+  color={props.color || 0xffffffff}
+  {texture}
+>
   {@render props.children?.()}
 </View>

package/dist/primitives/Marquee.svelte

@@ -57,6 +57,11 @@ const textNodeProps = $derived.by(() => {
 <View {...nodeProps} clipping={props.marquee}>
   <Text {...textNodeProps} bind:this={textNode} text={props.text} />
   {#if props.marquee}
-    <Text {...textNodeProps} bind:this={repeatNode} x={repeatX} text={props.text} />
+    <Text
+      {...textNodeProps}
+      bind:this={repeatNode}
+      x={repeatX}
+      text={props.text}
+    />
   {/if}
 </View>

package/dist/primitives/index.d.ts

@@ -5,6 +5,7 @@ export { default as Drawer } from './Drawer.svelte';
 export { default as FadeInOut } from './FadeInOut.svelte';
 export { default as FPSCounter } from './FPSCounter.svelte';
 export { default as Grid } from './Grid.svelte';
+export { default as Icon } from './Icon.svelte';
 export { default as IconButton } from './IconButton.svelte';
 export { default as Image } from './Image.svelte';
 export { default as Marquee } from './Marquee.svelte';

package/dist/primitives/index.js

@@ -5,6 +5,7 @@ export { default as Drawer } from './Drawer.svelte';
 export { default as FadeInOut } from './FadeInOut.svelte';
 export { default as FPSCounter } from './FPSCounter.svelte';
 export { default as Grid } from './Grid.svelte';
+export { default as Icon } from './Icon.svelte';
 export { default as IconButton } from './IconButton.svelte';
 export { default as Image } from './Image.svelte';
 export { default as Marquee } from './Marquee.svelte';

package/dist/primitives/router/index.d.ts

@@ -2,7 +2,7 @@ export { default as HashRouter } from './HashRouter.svelte';
 export { default as KeepAliveRoute } from './KeepAliveRoute.svelte';
 export { default as Navigate } from './Navigate.svelte';
 export { default as Route } from './Route.svelte';
-export { location, navigate, params, route, routeData, } from './context.js';
+export { location, navigate, params, route, routeData } from './context.js';
 export { lazy } from './lazy.js';
 export { createLocation, matchRoutes, normalizePath } from './match.js';
 export type { LazyRouteComponent, MatchedRoute, NavigateFn, NavigateOptions, RouteComponent, RouteComponentProps, RouteDefinition, RouteLocation, RouteParams, RoutePreload, RoutePreloadArgs, RouteRenderable, } from './types.js';

package/dist/primitives/router/index.js

@@ -2,6 +2,6 @@ export { default as HashRouter } from './HashRouter.svelte';
 export { default as KeepAliveRoute } from './KeepAliveRoute.svelte';
 export { default as Navigate } from './Navigate.svelte';
 export { default as Route } from './Route.svelte';
-export { location, navigate, params, route, routeData, } from './context.js';
+export { location, navigate, params, route, routeData } from './context.js';
 export { lazy } from './lazy.js';
 export { createLocation, matchRoutes, normalizePath } from './match.js';

package/dist/primitives/router/match.js

@@ -43,10 +43,7 @@ function matchChildren(routes, segments, index, params, basePath, chain) {
         if (!result)
             continue;
         const fullPath = joinPaths(basePath, route.path);
-        const nextChain = [
-            ...chain,
-            { route, params: result.params, fullPath },
-        ];
+        const nextChain = [...chain, { route, params: result.params, fullPath }];
         const nextIndex = result.index;
         const score = result.score;
         if (route.children.length > 0) {

package/dist/svelte-internal.d.ts

@@ -0,0 +1,3 @@
+declare module 'svelte/internal/client' {
+  export const active_effect: unknown;
+}

package/dist/utils.js

@@ -5,7 +5,7 @@ const WEBGL_CONTEXT_IDS = [
     'experimental-webgl2',
     'experimental-webgl',
 ];
-let supportedWebglVersions;
+const supportedWebglVersions = new Map();
 export function hexColor(color = '') {
     if (isInteger(color)) {
         return color;
@@ -44,13 +44,19 @@ export function mod(n, m) {
     return ((n % m) + m) % m;
 }
 export function getWebglSupportedVersions(webglContextIds = WEBGL_CONTEXT_IDS) {
-    if (supportedWebglVersions && webglContextIds === WEBGL_CONTEXT_IDS) {
-        return supportedWebglVersions;
+    const cacheKey = webglContextIds.join('|');
+    const cached = supportedWebglVersions.get(cacheKey);
+    if (cached !== undefined) {
+        return cached;
     }
     const cv = document.createElement('canvas');
+    let probeContext = null;
     const supports = webglContextIds.filter((id) => {
         try {
             const context = cv.getContext(id);
+            if (context !== null && probeContext === null) {
+                probeContext = context;
+            }
             return !!(context &&
                 (context instanceof WebGLRenderingContext ||
                     context instanceof WebGL2RenderingContext ||
@@ -61,9 +67,15 @@ export function getWebglSupportedVersions(webglContextIds = WEBGL_CONTEXT_IDS) {
             return false;
         }
     });
-    if (webglContextIds === WEBGL_CONTEXT_IDS) {
-        supportedWebglVersions = supports;
+    const probe = probeContext;
+    if (probe !== null &&
+        'getExtension' in probe &&
+        probe.isContextLost() === false) {
+        probe
+            .getExtension('WEBGL_lose_context')
+            ?.loseContext();
     }
+    supportedWebglVersions.set(cacheKey, supports);
     return supports;
 }
 export const supportsWebGL = (webGLSupportedVersion) => ['webgl', 'experimental-webgl', 'webgl2'].some((ver) => webGLSupportedVersion.includes(ver));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tv",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Svelte speed for every screen 🚀✨",
   "type": "module",
   "exports": {
@@ -66,6 +66,7 @@
     "svelte": "^5.56.4"
   },
   "dependencies": {
+    "@iconify/svelte": "^5.2.2",
     "@lightningjs/msdf-generator": "^1.3.0",
     "@lightningjs/renderer": "^3.0.6",
     "esm-env": "^1.2.2"