svedit 0.12.0 → 0.14.0

package/package.json

@@ -1,71 +1,71 @@
 {
-	"name": "svedit",
-	"version": "0.12.0",
-	"license": "MIT",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
-		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*",
-		"src/lib",
-		"!src/lib/**/*.test.*",
-		"!src/lib/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@eslint/compat": "^2.0.3",
-		"@eslint/js": "^10.0.1",
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.55.0",
-		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^7.0.0",
-		"@types/node": "^25.6.0",
-		"@typescript-eslint/eslint-plugin": "^8.57.0",
-		"@typescript-eslint/parser": "^8.57.0",
-		"@vitest/browser": "^4.1.0",
-		"@vitest/browser-preview": "^4.1.0",
-		"eslint": "^10.0.3",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.15.1",
-		"globals": "^17.4.0",
-		"nanoid": "^5.1.6",
-		"prettier": "^3.8.1",
-		"prettier-plugin-svelte": "^3.5.1",
-		"publint": "^0.3.18",
-		"svelte": "^5.53.12",
-		"svelte-check": "^4.4.5",
-		"typescript": "^5.9.3",
-		"vite": "^8.0.0",
-		"vitest": "^4.1.0",
-		"vitest-browser-svelte": "^2.1.0"
-	},
-	"allowScripts": {
-		"fsevents@2.3.3": true
-	}
-}
+  "name": "svedit",
+  "version": "0.14.0",
+  "homepage": "https://svedit.dev",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "src/lib",
+    "!src/lib/**/*.test.*",
+    "!src/lib/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.0.3",
+    "@eslint/js": "^10.0.1",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@types/node": "^25.6.0",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
+    "@vitest/browser": "^4.1.0",
+    "@vitest/browser-preview": "^4.1.0",
+    "eslint": "^10.0.3",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.15.1",
+    "globals": "^17.4.0",
+    "nanoid": "^5.1.6",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
+    "publint": "^0.3.18",
+    "svelte": "^5.53.12",
+    "svelte-check": "^4.4.5",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.0",
+    "vitest-browser-svelte": "^2.1.0"
+  },
+  "allowScripts": {
+    "fsevents@2.3.3": true
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "check:strict": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.strict.json",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "pnpm test:unit --run"
+  }
+}

package/src/lib/{Command.svelte.js → Command.svelte.ts}

@@ -1,6 +1,16 @@
 import { insert_default_node, break_text_node } from './transforms.svelte.js';
 import { can_switch_mark_type, get_selected_range_types } from './doc_utils.js';
 import { is_selection_collapsed, get_char_length, char_slice } from './utils.js';
+import type Session from './Session.svelte.js';
+
+// Commands operate on sessions with arbitrary application schemas.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type CommandSession = Session<any>;
+
+export type CommandContext = {
+	session: CommandSession;
+	editable: boolean;
+};
 
 /**
  * Base class for commands that can be executed in response to user actions
@@ -25,6 +35,8 @@ import { is_selection_collapsed, get_char_length, char_slice } from './utils.js'
  * ```
  */
 export default class Command {
+	context: CommandContext;
+
 	/**
 	 * Derived state that indicates if the command is disabled.
 	 * Automatically computed from is_enabled().
@@ -34,19 +46,17 @@ export default class Command {
 	/**
 	 * Creates a new Command instance.
 	 *
-	 * @param {any} context - The context object providing access to application state
+	 * @param context - The context object providing access to application state
 	 */
-	constructor(context) {
+	constructor(context: CommandContext) {
 		this.context = context;
 	}
 
 	/**
 	 * Determines if the command can currently be executed.
 	 * Override this method to implement command-specific logic.
-	 *
-	 * @returns {boolean} true if the command can be executed, false otherwise
 	 */
-	is_enabled() {
+	is_enabled(): boolean {
 		return true;
 	}
 
@@ -54,10 +64,8 @@ export default class Command {
 	 * Executes the command.
 	 * Override this method to implement the command's behavior.
 	 * Can be async for commands that need to perform asynchronous operations.
-	 *
-	 * @returns {void | Promise<void>}
 	 */
-	execute() {
+	execute(): void | Promise<void> {
 		throw new Error('Not implemented');
 	}
 }
@@ -94,7 +102,7 @@ export class RedoCommand extends Command {
  */
 export class SelectParentCommand extends Command {
 	is_enabled() {
-		return (
+		return Boolean(
 			this.context.editable &&
 			this.context.session.selection &&
 			this.context.session.selection.path.length > 3
@@ -114,7 +122,9 @@ export class SelectParentCommand extends Command {
  * touched types disable the command. Annotations never affect mark toggling.
  */
 export class ToggleMarkCommand extends Command {
-	constructor(node_type, context) {
+	node_type: string;
+
+	constructor(node_type: string, context: CommandContext) {
 		super(context);
 		this.node_type = node_type;
 	}
@@ -124,8 +134,7 @@ export class ToggleMarkCommand extends Command {
 	is_active() {
 		const selected_marks = this.context.session.selected_marks;
 		return (
-			selected_marks.length > 0 &&
-			selected_marks.every(({ node }) => node?.type === this.node_type)
+			selected_marks.length > 0 && selected_marks.every(({ node }) => node?.type === this.node_type)
 		);
 	}
 
@@ -167,7 +176,9 @@ export class ToggleMarkCommand extends Command {
  * Marks and other annotation types never block the toggle.
  */
 export class ToggleAnnotationCommand extends Command {
-	constructor(node_type, context) {
+	node_type: string;
+
+	constructor(node_type: string, context: CommandContext) {
 		super(context);
 		this.node_type = node_type;
 	}
@@ -234,6 +245,7 @@ export class AddNewLineCommand extends Command {
 		if (selection.anchor_offset !== selection.focus_offset) {
 			tr.delete_selection();
 		}
+		if (tr.selection.type !== 'text') return;
 
 		const collapsed_offset = tr.selection.anchor_offset;
 		const content = tr.get(tr.selection.path);
@@ -280,7 +292,7 @@ export class BreakTextNodeCommand extends Command {
  */
 export class SelectAllCommand extends Command {
 	is_enabled() {
-		return this.context.editable && this.context.session.selection;
+		return Boolean(this.context.editable && this.context.session.selection);
 	}
 
 	execute() {
@@ -318,7 +330,7 @@ export class SelectAllCommand extends Command {
 						session.inspect(node_path.slice(0, -1))?.type === 'node_array';
 
 					if (is_inside_node_array) {
-						const node_index = parseInt(node_path.at(-1));
+						const node_index = node_path.at(-1) as number;
 						session.selection = {
 							type: 'node',
 							path: node_path.slice(0, -1),
@@ -356,7 +368,7 @@ export class SelectAllCommand extends Command {
 						session.inspect(parent_path.slice(0, -1))?.type === 'node_array';
 
 					if (is_parent_node_array) {
-						const parent_node_index = parseInt(parent_path.at(-1));
+						const parent_node_index = parent_path.at(-1) as number;
 						session.selection = {
 							type: 'node',
 							path: parent_path.slice(0, -1),
@@ -376,7 +388,7 @@ export class SelectAllCommand extends Command {
 				const is_inside_node_array = session.inspect(node_path.slice(0, -1))?.type === 'node_array';
 
 				if (is_inside_node_array) {
-					const node_index = parseInt(node_path.at(-1));
+					const node_index = node_path.at(-1) as number;
 					session.selection = {
 						type: 'node',
 						path: node_path.slice(0, -1),

package/src/lib/CustomProperty.svelte

@@ -1,10 +1,8 @@
-<script>
+<script lang="ts">
 	import { serialize_path } from './utils.js';
+	import type { CustomPropertyProps } from './types.js';
 
-	/** @import { CustomPropertyProps } from './types.d.ts'; */
-
-	/** @type {CustomPropertyProps} */
-	let { path, tag = 'div', class: css_class, children, style, ...rest } = $props();
+	let { path, tag = 'div', class: css_class, children, style, ...rest }: CustomPropertyProps = $props();
 	let path_str = $derived(serialize_path(path));
 
 </script>

package/src/lib/{KeyMapper.svelte.js → KeyMapper.svelte.ts}

@@ -1,20 +1,30 @@
 import { is_virtual_keyboard_active } from './utils.js';
 
-const MODIFIER_KEYS = ['meta', 'ctrl', 'alt', 'shift'];
-const MODIFIER_EVENT_KEYS = {
+const MODIFIER_KEYS: readonly string[] = ['meta', 'ctrl', 'alt', 'shift'];
+const MODIFIER_EVENT_KEYS: Record<string, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'> = {
 	meta: 'metaKey',
 	ctrl: 'ctrlKey',
 	alt: 'altKey',
 	shift: 'shiftKey'
 };
 
+/**
+ * A command as required by the key mapper: anything with is_enabled/execute.
+ */
+type KeymapCommand = { is_enabled: () => boolean; execute: () => unknown };
+
+/**
+ * A keymap maps key combo strings to arrays of commands.
+ */
+export type Keymap = Record<string, KeymapCommand[]>;
+
 /**
  * Validates and defines a keymap.
  * Throws an error if any key combo is invalid.
  * Valid formats: 'meta+e,ctrl+e' or 'meta+shift+a'
  * Invalid: 'meta+e+a' (only one non-modifier key allowed)
  */
-export function define_keymap(keymap) {
+export function define_keymap<K extends Keymap>(keymap: K): K {
 	for (const [key_combo] of Object.entries(keymap)) {
 		const alternatives = key_combo.split(',');
 
@@ -36,7 +46,11 @@ export function define_keymap(keymap) {
  * Matches a keyboard event against a key combo string.
  * Example: 'meta+e,ctrl+e' matches either (metaKey && key==='e') OR (ctrlKey && key==='e')
  */
-function matches_key_combo(key_combo, event, virtual_keyboard_active = false) {
+function matches_key_combo(
+	key_combo: string,
+	event: KeyboardEvent,
+	virtual_keyboard_active = false
+): boolean {
 	const alternatives = key_combo.split(',');
 
 	return alternatives.some((alternative) => {
@@ -57,9 +71,9 @@ function matches_key_combo(key_combo, event, virtual_keyboard_active = false) {
 		const no_extra_modifiers = virtual_keyboard_active
 			? true
 			: MODIFIER_KEYS.every((mod) => {
-				if (modifiers.includes(mod)) return true; // This modifier is expected
-				return !event[MODIFIER_EVENT_KEYS[mod]]; // This modifier should NOT be pressed
-			});
+					if (modifiers.includes(mod)) return true; // This modifier is expected
+					return !event[MODIFIER_EVENT_KEYS[mod]]; // This modifier should NOT be pressed
+				});
 
 		// Check if the key matches
 		const key_matches = event.key.toLowerCase() === non_modifier;
@@ -74,7 +88,7 @@ function matches_key_combo(key_combo, event, virtual_keyboard_active = false) {
  * Supports both sync and async commands. For async commands, errors are logged
  * but don't crash the application.
  */
-function handle_key_map(key_map, event) {
+function handle_key_map(key_map: Keymap, event: KeyboardEvent): boolean {
 	const virtual_keyboard_active = is_virtual_keyboard_active();
 
 	for (const [key_combo, commands] of Object.entries(key_map)) {
@@ -114,6 +128,9 @@ function handle_key_map(key_map, event) {
  *   mapper.pop_scope();                   // When editor loses focus
  */
 export class KeyMapper {
+	scope_stack: Keymap[];
+	skip_onkeydown: boolean;
+
 	constructor() {
 		this.scope_stack = [];
 		this.skip_onkeydown = false;
@@ -122,7 +139,7 @@ export class KeyMapper {
 	/**
 	 * Push a new scope onto the stack (becomes highest priority)
 	 */
-	push_scope(keymap) {
+	push_scope(keymap: Keymap): void {
 		// console.log('pushed keymap', keymap);
 		this.scope_stack.push(keymap);
 	}
@@ -130,7 +147,7 @@ export class KeyMapper {
 	/**
 	 * Pop the most recent scope from the stack
 	 */
-	pop_scope() {
+	pop_scope(): Keymap | undefined {
 		const keymap = this.scope_stack.pop();
 		// console.log('popped keymap', keymap);
 		return keymap;
@@ -139,7 +156,7 @@ export class KeyMapper {
 	/**
 	 * Handle keyboard event by trying scopes from top to bottom
 	 */
-	handle_keydown(event) {
+	handle_keydown(event: KeyboardEvent): void {
 		// Key handling temporarily disabled (e.g. while character composition takes place)
 		if (this.skip_onkeydown) return;
 		// console.log('KeyMapper.handle_keydown', event);

package/src/lib/Node.svelte

@@ -1,19 +1,22 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import { serialize_path } from './utils.js';
+	import type {
+		NodeArrayAttachmentContext,
+		NodeArrayRenderContext,
+		NodeProps,
+		SveditRenderContext
+	} from './types.js';
 
-	/** @import { NodeProps } from './types.d.ts'; */
+	const svedit = getContext<SveditRenderContext>('svedit');
 
-	const svedit = getContext('svedit');
-
-	/** @type {NodeProps} */
-	let { path, children, tag = 'div', class: css_class, style = '', ...rest } = $props();
+	let { path, children, tag = 'div', class: css_class, style = '', ...rest }: NodeProps = $props();
 
 	let node = $derived(svedit.session.get(path));
 	let path_str = $derived(serialize_path(path));
 
-	const node_array_meta = getContext('node_array_meta');
-	let child_index = $derived(node_array_meta ? parseInt(String(path.at(-1)), 10) : -1);
+	const node_array_meta = getContext<NodeArrayRenderContext | undefined>('node_array_meta');
+	let child_index = $derived(node_array_meta ? (path.at(-1) as number) : -1);
 	let is_first = $derived(node_array_meta && child_index === 0);
 	let is_last = $derived(node_array_meta && child_index === node_array_meta.length - 1);
 
@@ -25,9 +28,9 @@
 	// `annotations` props.
 	let range_classes = $derived.by(() => {
 		if (child_index < 0 || !node_array_meta?.annotations_for) return '';
-		const classes = [];
+		const classes: string[] = [];
 
-		const add_classes = (range, prefix) => {
+		const add_classes = (range: NodeArrayAttachmentContext | null | undefined, prefix: string) => {
 			const range_type = range?.node?.type;
 			if (!range_type) return;
 			classes.push(`${prefix}-${range_type}`);
@@ -46,9 +49,9 @@
 <svelte:element
 	this={tag}
 	id={node.id}
-	class="node-{node.type} {css_class}{range_classes
-		? ` ${range_classes}`
-		: ''}{is_first ? ' first' : ''}{is_last ? ' last' : ''}"
+	class="node-{node.type} {css_class}{range_classes ? ` ${range_classes}` : ''}{is_first
+		? ' first'
+		: ''}{is_last ? ' last' : ''}"
 	data-node-id={node.id}
 	data-path={path_str}
 	data-type="node"

package/src/lib/NodeArrayProperty.svelte

@@ -1,20 +1,33 @@
-<script>
+<script lang="ts">
 	import { getContext, setContext } from 'svelte';
 	import UnknownNode from './UnknownNode.svelte';
 	import { serialize_path, calculate_fragment_ranges } from './utils.js';
 	import DefaultNodeGap from './NodeGap.svelte';
 	import DefaultNodeGapMarkers from './NodeGapMarkers.svelte';
-
-	/** @import { NodeArrayPropertyProps, NodeArrayAttachmentContext } from './types.d.ts'; */
-
-	const svedit = getContext('svedit');
+	import type {
+		NodeArrayPropertyProps,
+		NodeArrayAttachmentContext,
+		NodeArrayFragment,
+		NodeId,
+		Attachment,
+		Mark,
+		NodeArrayRenderContext,
+		SveditRenderContext
+	} from './types.js';
+
+	const svedit = getContext<SveditRenderContext>('svedit');
 	let NodeGap = $derived(svedit.session.config.system_components?.node_gap ?? DefaultNodeGap);
 	let NodeGapMarkers = $derived(
 		svedit.session.config.system_components?.node_gap_markers ?? DefaultNodeGapMarkers
 	);
 
-	/** @type {NodeArrayPropertyProps} */
-	let { path, tag = 'div', class: css_class, style = '', ...rest } = $props();
+	let {
+		path,
+		tag = 'div',
+		class: css_class,
+		style = '',
+		...rest
+	}: NodeArrayPropertyProps = $props();
 
 	// Pre-joined once per path change; reused by data-path and by every
 	// NodeGap's should_position_gap call to avoid N+1 joins per render.
@@ -27,9 +40,9 @@
 
 	let fragments = $derived(get_fragments(node_ids, marks));
 
-	function get_fragments(node_ids, marks) {
+	function get_fragments(node_ids: NodeId[], marks: Mark[]): NodeArrayFragment[] {
 		const ranges = calculate_fragment_ranges(node_ids.length, marks);
-		let fragments = [];
+		const fragments: NodeArrayFragment[] = [];
 
 		for (const range of ranges) {
 			const nodes_slice = node_ids.slice(range.start_offset, range.end_offset);
@@ -41,7 +54,7 @@
 					node,
 					nodes: nodes_slice,
 					start_index: range.start_offset,
-					mark_index: range.mark_index
+					mark_index: range.mark_index!
 				});
 			} else if (range.type === 'content') {
 				fragments.push({
@@ -54,7 +67,7 @@
 		return fragments;
 	}
 
-	function get_node_key(node_id, index) {
+	function get_node_key(node_id: NodeId, index: number): string {
 		let occurrence = 0;
 		for (let current_index = 0; current_index < index; current_index++) {
 			if (node_ids[current_index] === node_id) occurrence += 1;
@@ -62,10 +75,11 @@
 		return `${node_id}:${occurrence}`;
 	}
 
-	/**
-	 * @returns {NodeArrayAttachmentContext}
-	 */
-	function get_range_context(range, index, node_index) {
+	function get_range_context(
+		range: Attachment,
+		index: number,
+		node_index: number
+	): NodeArrayAttachmentContext {
 		const node = svedit.session.get(range.node_id);
 		const is_start = node_index === range.start_offset;
 		const is_end = node_index === range.end_offset - 1;
@@ -80,18 +94,21 @@
 		};
 	}
 
-	function get_covering_ranges(ranges, node_index) {
+	function get_covering_ranges(
+		ranges: Attachment[],
+		node_index: number
+	): NodeArrayAttachmentContext[] {
 		return ranges
 			.map((range, index) => ({ range, index }))
 			.filter(({ range }) => range.start_offset <= node_index && node_index < range.end_offset)
 			.map(({ range, index }) => get_range_context(range, index, node_index));
 	}
 
-	function get_annotation_contexts(node_index) {
+	function get_annotation_contexts(node_index: number): NodeArrayAttachmentContext[] {
 		return get_covering_ranges(annotations, node_index);
 	}
 
-	function get_mark(node_index) {
+	function get_mark(node_index: number): NodeArrayAttachmentContext | null {
 		// The single mark wrapping this node, or null. Mark exclusivity
 		// guarantees at most one. Annotations never wrap and are exposed via
 		// `annotations` instead.
@@ -107,17 +124,17 @@
 			serialize_path(svedit.session.selection.path) === path_str
 	);
 
-	setContext('node_array_meta', {
+	setContext<NodeArrayRenderContext>('node_array_meta', {
 		get length() {
 			return node_ids.length;
 		},
 		// Lets Node self-serve the marks and annotations covering a child, so
 		// node wrappers can carry range classes without every node component
 		// having to thread the `mark`/`annotations` props through.
-		mark_for(node_index) {
+		mark_for(node_index: number) {
 			return get_mark(node_index);
 		},
-		annotations_for(node_index) {
+		annotations_for(node_index: number) {
 			return get_annotation_contexts(node_index);
 		}
 	});
@@ -145,7 +162,7 @@
 			<NodeGap array_path={path} offset={0} count={0} empty />
 		</div>
 	{/if}
-	{#snippet render_nodes(nodes_slice, start_index)}
+	{#snippet render_nodes(nodes_slice: NodeId[], start_index: number)}
 		{#each nodes_slice as id, slice_index (get_node_key(id, start_index + slice_index))}
 			{@const index = start_index + slice_index}
 			{@const node = svedit.session.get(id)}

package/src/lib/NodeCaret.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	/**
 	 * Visual insertion caret rendered inside the active insertion marker.
 	 *
@@ -30,7 +30,7 @@
 		--_cp: var(--node-caret-row-inline-position, 50%);
 		content: '';
 		position: absolute;
-		background: var(--node-caret-bg, var(--svedit-editing-stroke));
+		background: var(--node-caret-bg, var(--editing));
 		/* Increase the visibility of the caret by contrasting it with a box shadow that's the inverted brightness of the current text color. */
 		/* Component developers must set their background color and text color on the node itself, not a child element, for this to work. */
 		box-shadow: var(--node-caret-shadow, 0 0 0 0.5px oklch(from currentColor calc(1 - l) c h));

package/src/lib/NodeGap.svelte

@@ -1,6 +1,6 @@
-<script module>
-	function cycle_z_index(/** @type {MouseEvent} */ e) {
-		const el = /** @type {HTMLElement} */ (e.currentTarget);
+<script module lang="ts">
+	function cycle_z_index(e: MouseEvent) {
+		const el = e.currentTarget as HTMLElement;
 		if (el.hasAttribute('data-sent-to-back')) {
 			document.querySelectorAll('.svedit-selectable[data-sent-to-back]').forEach((prev) => {
 				prev.removeAttribute('data-sent-to-back');
@@ -10,10 +10,11 @@
 	}
 </script>
 
-<script>
+<script lang="ts">
 	import { serialize_path } from './utils.js';
 	import { getContext } from 'svelte';
 	import { should_position_gap } from './node_visibility.svelte.js';
+	import type { DocumentPath, SveditRenderContext } from './types.js';
 
 	/**
 	 * ┌─────────────────────────────────────────────────────────────────┐
@@ -58,8 +59,13 @@
 	 * sure your custom component also handles read-only mode by rendering a
 	 * plain `.node-gap` placeholder without editable internals.
 	 */
-	const svedit = getContext('svedit');
-	let { array_path, offset, count, empty = false } = $props();
+	const svedit = getContext<SveditRenderContext>('svedit');
+	let {
+		array_path,
+		offset,
+		count,
+		empty = false
+	}: { array_path: DocumentPath; offset: number; count: number; empty?: boolean } = $props();
 	let is_editable = $derived(svedit.editable);
 
 	let is_first = $derived(offset === 0);