svelte-tiler 0.1.0 → 0.2.0

package/dist/context.d.ts

@@ -1,9 +1,10 @@
 import { DndContext } from './shared/dnd.svelte.ts';
-import type { Tile, TileComponent, Tiles, TileType } from './model.ts';
+import type { Tile, TileComponent, TileInsertData, Tiles, TileType } from './model.js';
 export declare const getTilerContext: () => TilerContext, setTilerContext: (context: TilerContext) => TilerContext;
 export interface TileDefinition<T extends TileType> {
     default: TileComponent<T>;
     onRemoveChild: (ctx: TilerContext, tile: Tiles[T], index: number) => void;
+    onInsert: (ctx: TilerContext, tile: Tiles[T], index: number, data: TileInsertData<T>) => void;
     onClear: (ctx: TilerContext, tile: Tiles[T]) => void;
 }
 export type TileDefinitions = {
@@ -21,20 +22,21 @@ export declare class TilerContext {
     protected definitions: TileDefinitions;
     protected effects: TileEffects;
     protected updateRootFn: ((tile: Tile) => void) | undefined;
-    protected tiles: Map<string, Tile>;
-    protected parents: Map<string, Tile>;
+    protected registry: FinalizationRegistry<string>;
+    protected tiles: Map<string, WeakRef<Tile>>;
+    protected parents: WeakMap<Tile, Tile>;
     readonly dnd: DndContext<Tile>;
     constructor(options: TilerContextOptions);
-    registerTile(tile: Tile, parent: Tile | ((tile: Tile) => void)): () => void;
-    getTileEffect(tile: Tile): ((tile: import("./model.ts").TileBase<"leaf"> & {
+    registerTile(tile: Tile, parent: Tile | ((tile: Tile) => void)): void;
+    getTileEffect(tile: Tile): ((tile: import("./model.js").TileBase<"leaf"> & {
         name: string;
-    }) => void | (() => void)) | ((tile: import("./model.ts").TileBase<"split"> & {
+    }) => void | (() => void)) | ((tile: import("./model.js").TileBase<"split"> & {
         constraints: Array<import("./shared/constraints.ts").Constraint[]>;
         weights: number[];
         direction: import("./shared/spatial.ts").Direction;
         resizer?: string;
         gapPx: number;
-    }) => void | (() => void)) | ((tile: import("./model.ts").TileBase<"tabs"> & {
+    }) => void | (() => void)) | ((tile: import("./model.js").TileBase<"tabs"> & {
         titles: string[];
         selectedTab: number;
         headersDirection: import("./tiles/tabs.svelte.ts").HeadersDirection;
@@ -43,7 +45,10 @@ export declare class TilerContext {
         empty?: string;
     }) => void | (() => void)) | undefined;
     getTileComponent(tile: Tile): TileComponent<"leaf"> | TileComponent<"split"> | TileComponent<"tabs">;
-    replaceTile(tileId: string, replace: Tile): void;
+    replace(tile: Tile | undefined, replace: Tile): void;
+    replaceTile(tileId: string | undefined, replace: Tile): void;
+    insertInto<T extends TileType>(tile: Tiles[T], index: number, data: TileInsertData<T>): void;
+    insertIntoTile<T extends TileType>(tileId: string, type: T, index: number, data: TileInsertData<T>): void;
     removeChildFrom(tile: Tile, index: number): void;
     removeChildFromTile(tileId: string, index: number): void;
     remove(tile: Tile): void;

package/dist/context.js

@@ -5,8 +5,11 @@ export class TilerContext {
     definitions;
     effects;
     updateRootFn;
+    registry = new FinalizationRegistry((id) => {
+        this.tiles.delete(id);
+    });
     tiles = new Map();
-    parents = new Map();
+    parents = new WeakMap();
     dnd;
     constructor(options) {
         this.definitions = options.definitions;
@@ -14,18 +17,15 @@ export class TilerContext {
         this.effects = options.effects ?? {};
     }
     registerTile(tile, parent) {
-        const id = tile.id;
-        this.tiles.set(id, tile);
+        this.tiles.set(tile.id, new WeakRef(tile));
+        this.registry.register(tile, tile.id);
         if (typeof parent === 'function') {
+            this.parents.delete(tile);
             this.updateRootFn = parent;
         }
         else {
-            this.parents.set(id, parent);
+            this.parents.set(tile, parent);
         }
-        return () => {
-            this.tiles.delete(id);
-            this.parents.delete(id);
-        };
     }
     getTileEffect(tile) {
         return this.effects[tile.type];
@@ -33,18 +33,33 @@ export class TilerContext {
     getTileComponent(tile) {
         return this.definitions[tile.type].default;
     }
-    replaceTile(tileId, replace) {
-        const parent = this.parents.get(tileId);
-        if (parent) {
-            const index = parent.children.findIndex((c) => c.id === tileId);
-            if (index < 0) {
-                throw new Error(`Invalid parent for "${tileId}" tile`);
+    replace(tile, replace) {
+        if (tile) {
+            const parent = this.parents.get(tile);
+            if (parent) {
+                const index = parent.children.findIndex((c) => c.id === tile.id);
+                if (index < 0) {
+                    throw new Error(`Invalid parent for "${tile.id}" tile`);
+                }
+                parent.children[index] = replace;
+                return;
             }
-            parent.children[index] = replace;
         }
-        else {
-            this.updateRootFn?.(replace);
+        this.updateRootFn?.(replace);
+    }
+    replaceTile(tileId, replace) {
+        const tile = tileId && this.getTileById(tileId);
+        this.replace(tile || undefined, replace);
+    }
+    insertInto(tile, index, data) {
+        this.definitions[tile.type].onInsert(this, tile, index, data);
+    }
+    insertIntoTile(tileId, type, index, data) {
+        const tile = this.getTileById(tileId);
+        if (tile.type !== type) {
+            throw new Error(`Tile type mismatch: expected "${type}", but got "${tile.type}"`);
         }
+        this.insertInto(tile, index, data);
     }
     removeChildFrom(tile, index) {
         this.definitions[tile.type].onRemoveChild(this, tile, index);
@@ -53,7 +68,7 @@ export class TilerContext {
         this.removeChildFrom(this.getTileById(tileId), index);
     }
     remove(tile) {
-        const parent = this.parents.get(tile.id);
+        const parent = this.parents.get(tile);
         if (parent === undefined) {
             this.definitions[tile.type].onClear(this, tile);
             return;
@@ -68,7 +83,7 @@ export class TilerContext {
         this.remove(this.getTileById(tileId));
     }
     getTileById(tileId) {
-        const tile = this.tiles.get(tileId);
+        const tile = this.tiles.get(tileId)?.deref();
         if (tile === undefined) {
             throw new Error(`Unable to find tile with "${tileId}" id`);
         }

package/dist/debug.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { Tile } from './model.js';
+  import Self from './debug.svelte';
+
+  const { tile, level = 0 }: { tile: Tile; level?: number } = $props();
+</script>
+
+<div style="padding-left: {level * 12}px;">{tile.type} ({tile.id})</div>
+{#each tile.children as c (c.id)}
+  <Self tile={c} level={level + 1} />
+{/each}

package/dist/debug.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Tile } from './model.js';
+type $$ComponentProps = {
+    tile: Tile;
+    level?: number;
+};
+declare const Debug: import("svelte").Component<$$ComponentProps, {}, "">;
+type Debug = ReturnType<typeof Debug>;
+export default Debug;

package/dist/dnd.d.ts

@@ -5,6 +5,7 @@ export declare class TileDropTarget<T extends Tile> extends Droppable<Tile, T> {
     readonly tileId: string;
     protected tilerCtx: TilerContext;
     constructor(ctx: TilerContext, tileId: string);
+    getTargetTileId(): string | undefined;
     protected isOwnChild(d: Draggable): d is TileDragSource;
 }
 export interface TileDragSourceOptions extends DraggableOptions<Tile> {

package/dist/dnd.js

@@ -7,6 +7,9 @@ export class TileDropTarget extends Droppable {
         this.tileId = tileId;
         this.tilerCtx = ctx;
     }
+    getTargetTileId() {
+        return this.tileId;
+    }
     isOwnChild(d) {
         return d instanceof TileDragSource && this.tileId === d.parentTileId;
     }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './context.ts';
-export * from './model.ts';
+export * from './model.js';
 export * from './dnd.ts';
 export { default as Panel } from './panel.svelte';
 export { default as Tiler } from './tiler.svelte';
+export { default as Debug } from './debug.svelte';

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from "./context.js";
-export * from "./model.js";
+export * from './model.js';
 export * from "./dnd.js";
 export { default as Panel } from './panel.svelte';
 export { default as Tiler } from './tiler.svelte';
+export { default as Debug } from './debug.svelte';

package/dist/model.d.ts

@@ -11,10 +11,27 @@ export type Tiles = {
     [T in TileType]: TileBase<T> & TileRegistry[T];
 };
 export type Tile = Tiles[TileType];
+export interface TileInsertRequirements {
+}
+type WithOnlyRequired<T, K extends keyof T> = Required<Pick<T, K>> & Partial<Omit<T, K>>;
+export type TileInsertData<T extends TileType> = WithOnlyRequired<Tiles[T], (T extends keyof TileInsertRequirements ? TileInsertRequirements[T] & keyof Tiles[T] : never) | 'children'>;
 export type TileProps<T extends TileType> = {
     tile: Tiles[T];
     parent: Tile | undefined;
     index: number;
     child: Snippet<[number]>;
 };
-export type TileComponent<T extends TileType> = Component<TileProps<T>, {}, 'tile' | 'parent'>;
+export type TileComponent<T extends TileType> = Component<TileProps<T>, {}, 'tile'>;
+export type TileArrayProperties<T extends TileType> = {
+    [K in keyof Tiles[T] as Tiles[T][K] extends Array<any> ? K : never]: Tiles[T][K];
+};
+export type TileArrayProperty<T extends TileType> = keyof TileArrayProperties<T>;
+/**
+ * @returns Returns the insertion position taking into account removed duplicates
+ */
+export declare function insertWithDeduplication<T extends TileType>(tile: Tiles[T], i: number, arrays: {
+    [K in Exclude<TileArrayProperty<T>, 'children'>]?: Tiles[T][K & keyof Tiles[T]];
+} & {
+    children: Tile[];
+}): number;
+export {};

package/dist/model.js

@@ -1 +1,32 @@
-export {};
+/**
+ * @returns Returns the insertion position taking into account removed duplicates
+ */
+export function insertWithDeduplication(tile, i, arrays) {
+    const newIds = new Set(arrays.children.map((c) => c.id));
+    let write = 0;
+    let shift = 0;
+    const c = tile.children;
+    const l = c.length;
+    const keys = Object.keys(arrays);
+    const tileArrays = keys.map((arr) => tile[arr]);
+    for (let read = 0; read < l; read++) {
+        if (!newIds.has(c[read].id)) {
+            for (const arr of tileArrays) {
+                // @ts-expect-error ignore
+                arr[write] = arr[read];
+            }
+            write++;
+        }
+        else if (read < i) {
+            shift++;
+        }
+    }
+    i -= shift;
+    for (const key of keys) {
+        // @ts-expect-error ignore
+        tile[key].length = write;
+        // @ts-expect-error ignore
+        tile[key].splice(i, 0, ...arrays[key]);
+    }
+    return i;
+}

package/dist/panel.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Tile } from './model.ts';
+import type { Tile } from './model.js';
 type $$ComponentProps = {
     layout: Tile | undefined;
 };

package/dist/render.svelte

@@ -23,7 +23,7 @@
 </script>
 
 {#snippet child(index: number)}
-  <Self bind:parent={tile} bind:tile={tile.children[index]} {index} />
+  <Self parent={tile} bind:tile={tile.children[index]} {index} />
 {/snippet}
 
-<TileComponent bind:parent bind:tile={tile as never} {index} {child} />
+<TileComponent {parent} bind:tile={tile as never} {index} {child} />

package/dist/render.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Tile } from './model.ts';
+import type { Tile } from './model.js';
 type $$ComponentProps = {
     tile: Tile;
     parent: Tile | undefined;

package/dist/tiles/leaf.svelte

@@ -32,6 +32,8 @@
   export function onRemoveChild() {}
 
   export function onClear() {}
+
+  export function onInsert() {}
 </script>
 
 <script lang="ts">

package/dist/tiles/leaf.svelte.d.ts

@@ -12,6 +12,7 @@ type LeafContext<N extends string = string> = Registry<N, Snippet<[Tiles['leaf']
 export declare function setup<N extends string>(leafs: LeafContext<N>): (name: N) => Tiles["leaf"];
 export declare function onRemoveChild(): void;
 export declare function onClear(): void;
+export declare function onInsert(): void;
 declare const Leaf: import("svelte").Component<TileProps<"leaf">, {}, "tile">;
 type Leaf = ReturnType<typeof Leaf>;
 export default Leaf;

package/dist/tiles/split.svelte

@@ -10,7 +10,13 @@
   } from '../shared/constraints.js';
   import type { Direction } from '../shared/spatial.js';
   import { almostEqual } from '../shared/math.js';
-  import type { Tile, TileProps, Tiles } from '../model.js';
+  import {
+    insertWithDeduplication,
+    type Tile,
+    type TileInsertData,
+    type TileProps,
+    type Tiles,
+  } from '../model.js';
   import type { TilerContext } from '../context.js';
   import { TileDropTarget } from '../dnd.js';
 
@@ -89,10 +95,10 @@
       if (
         !droppable ||
         (droppable instanceof TileDropTarget &&
-          tile.children.every((c) => c.id !== droppable.tileId))
+          tile.id !== droppable.getTargetTileId())
       ) {
         tick().then(() => {
-          ctx.replaceTile(tile.id, tile.children[1 - i]);
+          ctx.replace(tile, tile.children[1 - i]);
         });
         return;
       }
@@ -108,14 +114,21 @@
 
   export function onClear(_ctx: TilerContext, _tile: Tiles['split']) {}
 
-  export function insertTile(
-    node: Tiles['split'],
+  export function onInsert(
+    _ctx: TilerContext,
+    tile: Tiles['split'],
     index: number,
-    { tile, constraints = [], weight = 1 }: SplitTileOptions
+    {
+      children,
+      constraints = children.map(() => []),
+      weights = children.map(() => 1),
+    }: TileInsertData<'split'>
   ) {
-    node.children.splice(index, 0, tile);
-    node.constraints.splice(index, 0, constraints);
-    node.weights.splice(index, 0, weight);
+    insertWithDeduplication<'split'>(tile, index, {
+      children,
+      constraints,
+      weights,
+    });
   }
 </script>
 

package/dist/tiles/split.svelte.d.ts

@@ -3,7 +3,7 @@ import type { Registry } from '../shared/registry.js';
 import { Draggable } from '../shared/dnd.svelte.js';
 import { type Constraint } from '../shared/constraints.js';
 import type { Direction } from '../shared/spatial.js';
-import type { Tile, TileProps, Tiles } from '../model.js';
+import { type Tile, type TileInsertData, type TileProps, type Tiles } from '../model.js';
 import type { TilerContext } from '../context.js';
 declare module '../model.js' {
     interface TileRegistry {
@@ -36,7 +36,7 @@ type SplitContext<R extends string = string> = {
 export declare function setup<R extends string>(ctx: SplitContext<R>): (options: SplitOptions<R>) => Tiles["split"];
 export declare function onRemoveChild(ctx: TilerContext, tile: Tiles['split'], i: number): void;
 export declare function onClear(_ctx: TilerContext, _tile: Tiles['split']): void;
-export declare function insertTile(node: Tiles['split'], index: number, { tile, constraints, weight }: SplitTileOptions): void;
+export declare function onInsert(_ctx: TilerContext, tile: Tiles['split'], index: number, { children, constraints, weights, }: TileInsertData<'split'>): void;
 declare const Split: import("svelte").Component<TileProps<"split">, {}, "tile">;
 type Split = ReturnType<typeof Split>;
 export default Split;

package/dist/tiles/tabs.svelte

@@ -3,7 +3,11 @@
 
   import type { Draggable } from '../shared/dnd.svelte.js';
   import type { Registry } from '../shared/registry.js';
-  import type { Tile, Tiles } from '../model.js';
+  import {
+    insertWithDeduplication,
+    type Tile,
+    type Tiles,
+  } from '../model.js';
   import type { TilerContext } from '../context.js';
 
   export type HeadersDirection = Direction | 'none';
@@ -19,6 +23,9 @@
         empty?: string;
       };
     }
+    interface TileInsertRequirements {
+      tabs: 'titles';
+    }
   }
 
   export interface TabsOptions<
@@ -70,7 +77,7 @@
     E extends string = string,
     A extends string = string,
   > {
-    createSplit?: (options: SplitOptions) => Tile;
+    applySplit?: (options: SplitOptions) => void;
     actions?: Registry<A, Snippet<[Tiles['tabs']]> | undefined>;
     headers?: Registry<
       H,
@@ -112,38 +119,16 @@
     }
   }
 
-  export function insertTabs(
+  export function onInsert(
+    _ctx: TilerContext,
     tile: Tiles['tabs'],
     i: number,
-    {
-      titles,
-      children,
-    }: {
-      titles: string[];
-      children: Tile[];
-    }
+    data: TileInsertData<'tabs'>
   ) {
-    const newIds = new Set(children.map((c) => c.id));
-    let write = 0;
-    let shift = 0;
-    const c = tile.children;
-    const t = tile.titles;
-    const l = t.length;
-    for (let read = 0; read < l; read++) {
-      if (!newIds.has(c[read].id)) {
-        t[write] = t[read];
-        c[write] = c[read];
-        write++;
-      } else if (read < i) {
-        shift++;
-      }
-    }
-    c.length = write;
-    t.length = write;
-    i -= shift;
-    tile.children.splice(i, 0, ...children);
-    tile.titles.splice(i, 0, ...titles);
-    tile.selectedTab = i;
+    tile.selectedTab = insertWithDeduplication<'tabs'>(tile, i, {
+      titles: data.titles,
+      children: data.children,
+    });
   }
 </script>
 
@@ -154,14 +139,10 @@
     type EdgePart,
   } from '../shared/spatial.js';
   import { getTilerContext } from '../context.js';
-  import type { TileProps } from '../model.js';
+  import type { TileInsertData, TileProps } from '../model.js';
   import { TileDragSource, TileDropTarget } from '../dnd.js';
 
-  let {
-    tile = $bindable(),
-    parent = $bindable(),
-    child,
-  }: TileProps<'tabs'> = $props();
+  let { tile = $bindable(), parent, child }: TileProps<'tabs'> = $props();
 
   const ctx = getTilerContext();
   const tabsCtx = getContext<TabsContext | undefined>(TABS_CONTEXT_KEY);
@@ -177,7 +158,7 @@
   const empty = $derived(
     (tile.empty !== undefined && tabsCtx?.empty?.get(tile.empty)) || undefined
   );
-  const edgeRatio = $derived(tabsCtx?.createSplit ? 0.1 : 0);
+  const edgeRatio = $derived(tabsCtx?.applySplit ? 0.1 : 0);
 
   class TabsTileDropTarget extends TileDropTarget<Tiles['tabs']> {
     accepts(d: Draggable<Tile>): d is Draggable<Tiles['tabs']> {
@@ -196,7 +177,7 @@
 
   class SimpleTabsDropTarget extends TabsTileDropTarget {
     protected onDrop(tabs: Tiles['tabs']): void {
-      insertTabs(tile, tile.children.length, tabs);
+      ctx.insertInto<'tabs'>(tile, tile.children.length, tabs);
     }
   }
 
@@ -241,21 +222,29 @@
       ) {
         i++;
       }
-      insertTabs(tile, i, tabs);
+      ctx.insertInto<'tabs'>(tile, i, tabs);
     }
   }
 
   class SegmentedContentDropTarget extends SegmentedTabsTileDropTarget {
+    get isCenter() {
+      return this.hpart === 'center' && this.vpart === 'center';
+    }
+
+    getTargetTileId(): string | undefined {
+      return this.isCenter ? tile.id : parent?.id;
+    }
+
     protected onDrop(tabs: Tiles['tabs'], d: Draggable): void {
       const id = tabs.children[0].id;
-      if (this.hpart === 'center' && this.vpart === 'center') {
+      if (this.isCenter) {
         let i = tile.children.findIndex((t) => t.id === id);
         if (i < 0 && this.isOwnChild(d)) {
           i = d.childIndex;
         }
-        insertTabs(tile, i < 0 ? tile.children.length : i, tabs);
-      } else if (tabsCtx?.createSplit) {
-        parent = tabsCtx.createSplit({
+        ctx.insertInto<'tabs'>(tile, i < 0 ? tile.children.length : i, tabs);
+      } else if (tabsCtx?.applySplit) {
+        tabsCtx.applySplit({
           parent,
           type:
             this.hpart === 'start' || this.hpart === 'end' ? 'row' : 'column',

package/dist/tiles/tabs.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type Snippet } from 'svelte';
 import type { Draggable } from '../shared/dnd.svelte.js';
 import type { Registry } from '../shared/registry.js';
-import type { Tile, Tiles } from '../model.js';
+import { type Tile, type Tiles } from '../model.js';
 import type { TilerContext } from '../context.js';
 export type HeadersDirection = Direction | 'none';
 declare module '../model.js' {
@@ -15,6 +15,9 @@ declare module '../model.js' {
             empty?: string;
         };
     }
+    interface TileInsertRequirements {
+        tabs: 'titles';
+    }
 }
 export interface TabsOptions<H extends string, E extends string, A extends string> {
     tabs: [string, Tile][];
@@ -34,7 +37,7 @@ interface SplitOptions {
     adjacent: Tiles['tabs'];
 }
 interface TabsContext<H extends string = string, E extends string = string, A extends string = string> {
-    createSplit?: (options: SplitOptions) => Tile;
+    applySplit?: (options: SplitOptions) => void;
     actions?: Registry<A, Snippet<[Tiles['tabs']]> | undefined>;
     headers?: Registry<H, Snippet<[Tiles['tabs'], number, Draggable<Tile>]> | undefined>;
     empty?: Registry<E, Snippet<[Tiles['tabs']]> | undefined>;
@@ -42,12 +45,9 @@ interface TabsContext<H extends string = string, E extends string = string, A ex
 export declare function setup<H extends string, E extends string, A extends string>(ctx: TabsContext<H, E, A>): (options: TabsOptions<H, E, A>) => Tiles["tabs"];
 export declare function onRemoveChild(ctx: TilerContext, tile: Tiles['tabs'], i: number): void;
 export declare function onClear(_ctx: TilerContext, tile: Tiles['tabs']): void;
-export declare function insertTabs(tile: Tiles['tabs'], i: number, { titles, children, }: {
-    titles: string[];
-    children: Tile[];
-}): void;
+export declare function onInsert(_ctx: TilerContext, tile: Tiles['tabs'], i: number, data: TileInsertData<'tabs'>): void;
 import { type Direction } from '../shared/spatial.js';
-import type { TileProps } from '../model.js';
-declare const Tabs: import("svelte").Component<TileProps<"tabs">, {}, "tile" | "parent">;
+import type { TileInsertData, TileProps } from '../model.js';
+declare const Tabs: import("svelte").Component<TileProps<"tabs">, {}, "tile">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tiler",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A small, unstyled library for building tiling user interfaces.",
   "license": "MIT",
   "homepage": "https://github.com/x0k/svelte-tiler#readme",
@@ -61,14 +61,14 @@
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.14.0",
-    "globals": "^17.1.0",
+    "globals": "^17.2.0",
     "marked": "^17.0.1",
     "playwright": "^1.58.0",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
     "publint": "^0.3.17",
     "shiki": "^3.21.0",
-    "svelte": "^5.48.3",
+    "svelte": "^5.49.1",
     "svelte-check": "^4.3.5",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",