svelte-tv 1.0.0 → 1.0.1

package/LICENSE

@@ -0,0 +1 @@
+Apache-2.0

package/NOTICE

@@ -0,0 +1 @@
+svelte-tv

package/README.md

@@ -0,0 +1,98 @@
+<a href="https://sveltetv.dev">
+	<picture>
+		<source media="(prefers-color-scheme: dark)" srcset="banner_dark.png">
+		<img src="banner_white.png" alt="Svelte TV" />
+	</picture>
+</a>
+
+<h1 align="center">
+  <a href="https://sveltetv.dev/">
+    Svelte TV
+  </a>
+</h1>
+
+<p align="center">
+  <strong>Svelte speed for every screen:</strong><br>
+  Build high-performance TV interfaces with Lightning.
+</p>
+
+<p align="center">
+  <a href="./LICENSE">
+    <img src="https://img.shields.io/badge/license-Apache--2.0-blue.svg" alt="Svelte TV is released under the Apache 2.0 license." />
+  </a>
+  <a href="https://www.npmjs.org/package/svelte-tv">
+    <img src="https://img.shields.io/npm/v/svelte-tv?color=brightgreen&label=npm%20package" alt="Current npm package version." />
+  </a>
+  <a href="https://sveltetv.dev/docs/contributing">
+    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs are welcome!" />
+  </a>
+</p>
+
+<h3 align="center">
+  <a href="https://sveltetv.dev/docs/getting-started">Getting Started</a>
+  <span> &middot; </span>
+  <a href="https://sveltetv.dev/docs/learn">Learn the Basics</a>
+  <span> &middot; </span>
+  <a href="https://sveltetv.dev/showcase">Showcase</a>
+  <span> &middot; </span>
+  <a href="https://sveltetv.dev/docs/contributing">Contribute</a>
+  <span> &middot; </span>
+  <a href="https://sveltetv.dev/community">Community</a>
+  <span> &middot; </span>
+  <a href="https://sveltetv.dev/support">Support</a>
+</h3>
+
+Svelte TV brings [**Svelte**'s][s] component model to [**Lightning**][l]-powered living room apps. With Svelte TV, you build renderer-native, focus-driven interfaces for Canvas and WebGL.
+
+- **Declarative.** Build TV screens with Svelte components while rendering through Lightning.
+- **Remote-first.** Directional focus, key handling, hold states, and focus styling are part of the core.
+- **Renderer-native.** Use Canvas or WebGL without relying on DOM layout.
+- **Practical.** Routing, transitions, effects, virtual lists, and SDF font tooling are included.
+
+[s]: https://svelte.dev/
+[l]: https://github.com/lightning-js/renderer
+
+## Contents
+
+- [Requirements](#requirements)
+- [Building your first Svelte TV app](#building-your-first-svelte-tv-app)
+- [Documentation](#documentation)
+- [Roadmap](#roadmap)
+- [How to Contribute](#how-to-contribute)
+- [License](#license)
+
+## 📋 Requirements
+
+Svelte TV targets Svelte 5 and `@lightningjs/renderer` 3.x. For supported renderer modes, font setup, and project requirements, see the [Requirements guide][requirements].
+
+Because Svelte 5 relies on [JavaScript Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) for its reactivity model, Svelte TV requires Chrome 49 or newer.
+
+## 🎉 Building your first Svelte TV app
+
+Follow the [Getting Started guide][getting-started] to create your first Svelte TV app. If you are new to focus-driven TV interfaces, start with [Learn the Basics][learn].
+
+## 📖 Documentation
+
+The full documentation for Svelte TV can be found on our [website][docs].
+
+The documentation covers renderer setup, focus handling, layout, routing, effects, primitives, fonts, and deployment notes.
+
+## 🚀 Roadmap
+
+Svelte TV is evolving around real TV app needs. You can follow planned work, open design notes, and release direction in the [Roadmap][roadmap].
+
+## 👏 How to Contribute
+
+We want contributing to Svelte TV to be focused and practical. Read the [Contributing Guide][contribute] to learn how to report issues, propose changes, and work on the project.
+
+## 📄 License
+
+Svelte TV is Apache-2.0 licensed, as found in the [LICENSE][license] file.
+
+[requirements]: https://sveltetv.dev/docs/requirements
+[getting-started]: https://sveltetv.dev/docs/getting-started
+[learn]: https://sveltetv.dev/docs/learn
+[docs]: https://sveltetv.dev/docs
+[roadmap]: https://sveltetv.dev/roadmap
+[contribute]: https://sveltetv.dev/docs/contributing
+[license]: ./LICENSE

package/dist/LightningRoot.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import { onDestroy, onMount } from "svelte";
+import { createFocusManager } from "./core/focusManager.js";
+import { createRenderer, rootNode } from "./core/root.js";
+import { setParentNode } from "./core/svelteNode.js";
+let { options, target = "app", keyMap, keyHoldOptions, useFocusManager = true, onReady, children } = $props();
+setParentNode(rootNode);
+let cleanupFocus;
+let ready = $state(false);
+let destroyed = false;
+onMount(() => {
+	const { renderer } = createRenderer(options, target);
+	cleanupFocus = useFocusManager ? createFocusManager(keyMap, keyHoldOptions) : undefined;
+	Promise.resolve(onReady?.(renderer)).then(() => {
+		if (!destroyed) ready = true;
+	});
+});
+onDestroy(() => {
+	destroyed = true;
+	cleanupFocus?.();
+});
+</script>
+
+{#if ready}
+  {@render children?.()}
+{/if}

package/dist/LightningRoot.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { RendererMain, RendererMainSettings } from '@lightningjs/renderer';
+import type { Snippet } from 'svelte';
+import { type KeyHoldOptions, type KeyMap } from './core/focusManager.js';
+interface Props {
+    options?: Partial<RendererMainSettings>;
+    target?: HTMLElement | string;
+    keyMap?: Partial<KeyMap>;
+    keyHoldOptions?: KeyHoldOptions;
+    useFocusManager?: boolean;
+    onReady?: (renderer: RendererMain) => void | Promise<void>;
+    children?: Snippet;
+}
+declare const LightningRoot: import("svelte").Component<Props, {}, "">;
+type LightningRoot = ReturnType<typeof LightningRoot>;
+export default LightningRoot;

package/dist/Text.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">import { onDestroy, onMount } from "svelte";
+import { applyNodeProps, createNode, getParentNode, mountNode, setParentNode, setTextContent, unmountNode } from "./core/svelteNode.js";
+let props = $props();
+const node = createNode("text", {});
+const parent = getParentNode();
+setParentNode(node);
+export { node as element };
+export function setFocus() {
+	node.setFocus();
+}
+$effect(() => {
+	applyNodeProps(node, props);
+	setTextContent(node, props.text);
+});
+onMount(() => mountNode(node, parent));
+onDestroy(() => unmountNode(node));
+</script>
+
+{@render props.children?.()}

package/dist/Text.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type SvelteTextProps } from './core/svelteNode.js';
+declare const Text: import("svelte").Component<SvelteTextProps, {
+    element: import("./index.js").ElementNode;
+    setFocus: () => void;
+}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/View.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">import { onDestroy, onMount } from "svelte";
+import { applyNodeProps, createNode, getParentNode, mountNode, setParentNode, unmountNode } from "./core/svelteNode.js";
+let props = $props();
+const node = createNode("view", {});
+const parent = getParentNode();
+setParentNode(node);
+export { node as element };
+export function setFocus() {
+	node.setFocus();
+}
+$effect(() => {
+	applyNodeProps(node, props);
+});
+onMount(() => mountNode(node, parent));
+onDestroy(() => unmountNode(node));
+</script>
+
+{@render props.children?.()}

package/dist/View.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type SvelteNodeProps } from './core/svelteNode.js';
+declare const View: import("svelte").Component<SvelteNodeProps, {
+    element: import("./index.js").ElementNode;
+    setFocus: () => void;
+}, "">;
+type View = ReturnType<typeof View>;
+export default View;

package/dist/__package_types_tmp__/LightningRoot.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { RendererMain, RendererMainSettings } from '@lightningjs/renderer';
+import type { Snippet } from 'svelte';
+import { type KeyHoldOptions, type KeyMap } from './core/focusManager.js';
+interface Props {
+    options?: Partial<RendererMainSettings>;
+    target?: HTMLElement | string;
+    keyMap?: Partial<KeyMap>;
+    keyHoldOptions?: KeyHoldOptions;
+    useFocusManager?: boolean;
+    onReady?: (renderer: RendererMain) => void | Promise<void>;
+    children?: Snippet;
+}
+declare const LightningRoot: import("svelte").Component<Props, {}, "">;
+type LightningRoot = ReturnType<typeof LightningRoot>;
+export default LightningRoot;

package/dist/__package_types_tmp__/Text.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type SvelteTextProps } from './core/svelteNode.js';
+declare const Text: import("svelte").Component<SvelteTextProps, {
+    element: import("./index.js").ElementNode;
+    setFocus: () => void;
+}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/__package_types_tmp__/View.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type SvelteNodeProps } from './core/svelteNode.js';
+declare const View: import("svelte").Component<SvelteNodeProps, {
+    element: import("./index.js").ElementNode;
+    setFocus: () => void;
+}, "">;
+type View = ReturnType<typeof View>;
+export default View;

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

@@ -0,0 +1,4 @@
+import type { ElementNode } from './elementNode.js';
+export declare const activeElementStore: import("svelte/store").Writable<ElementNode | undefined>;
+export declare const activeElement: (() => ElementNode | undefined) & import("svelte/store").Writable<ElementNode | undefined>;
+export declare function setActiveElement(elm: ElementNode | undefined): void;

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

@@ -0,0 +1 @@
+export declare function initClickInspector(): void;

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

@@ -0,0 +1,26 @@
+import type { RendererMainSettings } from '@lightningjs/renderer';
+import type { TextProps, AnimationSettings, DollarString, StyleEffects } from './intrinsicTypes.js';
+import { type ElementNode } from './elementNode.js';
+import type { IRendererShader } from './dom-renderer/domRendererTypes.js';
+export { isDev, SHADERS_ENABLED } from './env.js';
+export declare const isDomRendererActive: () => boolean;
+export interface Config {
+    debug: boolean;
+    focusDebug: boolean;
+    domRendererEnabled: boolean;
+    keyDebug: boolean;
+    focusHistoryDebug: number;
+    animationSettings?: AnimationSettings;
+    animationsEnabled: boolean;
+    fontSettings: Partial<TextProps>;
+    rendererOptions?: Partial<RendererMainSettings>;
+    setActiveElement: (elm: ElementNode) => void;
+    focusStateKey: DollarString;
+    lockStyles?: boolean;
+    fontWeightAlias?: Record<string, number | string>;
+    throttleInput?: number;
+    taskDelay?: number;
+    convertToShader: (_node: ElementNode, v: StyleEffects) => IRendererShader;
+    stateOrder?: DollarString[];
+}
+export declare const Config: Config;

package/dist/__package_types_tmp__/core/dom-renderer/domRendererTypes.d.ts

@@ -0,0 +1,15 @@
+import type { INode, INodeProps, ITextNode, ITextNodeProps, RendererMainSettings } from '@lightningjs/renderer';
+export type DomRendererMainSettings = RendererMainSettings;
+export type IRendererShader = any;
+export type IRendererShaderProps = Record<string, unknown>;
+export type IRendererShaderManager = {
+    registerShaderType: (...args: any[]) => void;
+};
+export interface IRendererNode extends INode {
+    div?: HTMLElement;
+}
+export type IRendererNodeProps = INodeProps;
+export interface IRendererTextNode extends ITextNode {
+    div?: HTMLElement;
+}
+export type IRendererTextNodeProps = ITextNodeProps;