svelte-tiler 0.0.1 → 0.2.0

package/dist/{context.svelte.d.ts → 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 = {
@@ -13,29 +14,29 @@ export type TileEffects = {
     [T in TileType]?: (tile: Tiles[T]) => void | (() => void);
 };
 export interface TilerContextOptions {
-    tiles: TileDefinitions;
-    parents?: WeakMap<Tile, Tile>;
+    definitions: TileDefinitions;
     dnd?: DndContext<Tile>;
     effects?: TileEffects;
 }
 export declare class TilerContext {
     protected definitions: TileDefinitions;
-    protected parents: WeakMap<Tile, Tile>;
     protected effects: TileEffects;
     protected updateRootFn: ((tile: Tile) => void) | undefined;
+    protected registry: FinalizationRegistry<string>;
+    protected tiles: Map<string, WeakRef<Tile>>;
+    protected parents: WeakMap<Tile, Tile>;
     readonly dnd: DndContext<Tile>;
     constructor(options: TilerContextOptions);
-    registerParent(tile: Tile, parent: Tile): void;
-    setUpdateRoot(tile: Tile, update: (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;
@@ -44,7 +45,13 @@ export declare class TilerContext {
         empty?: string;
     }) => void | (() => void)) | undefined;
     getTileComponent(tile: Tile): TileComponent<"leaf"> | TileComponent<"split"> | TileComponent<"tabs">;
-    replaceWith(tile: Tile, replace: Tile): void;
-    removeChild(tile: Tile, index: number): void;
-    destroy(tile: 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;
+    removeTile(tileId: string): void;
+    protected getTileById(tileId: string): Tile;
 }

package/dist/context.js

@@ -0,0 +1,92 @@
+import { createContext } from 'svelte';
+import { DndContext } from "./shared/dnd.svelte.js";
+export const [getTilerContext, setTilerContext] = createContext();
+export class TilerContext {
+    definitions;
+    effects;
+    updateRootFn;
+    registry = new FinalizationRegistry((id) => {
+        this.tiles.delete(id);
+    });
+    tiles = new Map();
+    parents = new WeakMap();
+    dnd;
+    constructor(options) {
+        this.definitions = options.definitions;
+        this.dnd = options.dnd ?? new DndContext();
+        this.effects = options.effects ?? {};
+    }
+    registerTile(tile, parent) {
+        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(tile, parent);
+        }
+    }
+    getTileEffect(tile) {
+        return this.effects[tile.type];
+    }
+    getTileComponent(tile) {
+        return this.definitions[tile.type].default;
+    }
+    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;
+            }
+        }
+        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);
+    }
+    removeChildFromTile(tileId, index) {
+        this.removeChildFrom(this.getTileById(tileId), index);
+    }
+    remove(tile) {
+        const parent = this.parents.get(tile);
+        if (parent === undefined) {
+            this.definitions[tile.type].onClear(this, tile);
+            return;
+        }
+        const index = parent.children.findIndex((c) => c.id === tile.id);
+        if (index < 0) {
+            throw new Error(`Invalid parent for "${tile.id}" tile`);
+        }
+        this.removeChildFrom(parent, index);
+    }
+    removeTile(tileId) {
+        this.remove(this.getTileById(tileId));
+    }
+    getTileById(tileId) {
+        const tile = this.tiles.get(tileId)?.deref();
+        if (tile === undefined) {
+            throw new Error(`Unable to find tile with "${tileId}" id`);
+        }
+        return tile;
+    }
+}

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

@@ -1,6 +1,21 @@
-import { DndContext, Droppable } from './shared/dnd.svelte.js';
+import { Draggable, Droppable, type DraggableOptions, type StopEvent } from './shared/dnd.svelte.js';
 import type { Tile } from './model.js';
-export declare class TileDroppable<T extends Tile> extends Droppable<Tile, T> {
-    readonly targetTileId: string;
-    constructor(ctx: DndContext<Tile>, targetTileId: string);
+import type { TilerContext } from './context.ts';
+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> {
+    parentTileId: string;
+    childIndex: number;
+}
+export declare class TileDragSource extends Draggable<Tile> {
+    protected tilerCtx: TilerContext;
+    readonly parentTileId: string;
+    readonly childIndex: number;
+    constructor(ctx: TilerContext, options: TileDragSourceOptions);
+    protected onStop({ reason }: StopEvent): void;
 }

package/dist/dnd.js

@@ -1,8 +1,33 @@
-import { DndContext, Droppable } from './shared/dnd.svelte.js';
-export class TileDroppable extends Droppable {
-    targetTileId;
-    constructor(ctx, targetTileId) {
-        super(ctx);
-        this.targetTileId = targetTileId;
+import { Draggable, Droppable, } from './shared/dnd.svelte.js';
+export class TileDropTarget extends Droppable {
+    tileId;
+    tilerCtx;
+    constructor(ctx, tileId) {
+        super(ctx.dnd);
+        this.tileId = tileId;
+        this.tilerCtx = ctx;
+    }
+    getTargetTileId() {
+        return this.tileId;
+    }
+    isOwnChild(d) {
+        return d instanceof TileDragSource && this.tileId === d.parentTileId;
+    }
+}
+export class TileDragSource extends Draggable {
+    tilerCtx;
+    parentTileId;
+    childIndex;
+    constructor(ctx, options) {
+        super(ctx.dnd, options);
+        this.tilerCtx = ctx;
+        this.parentTileId = options.parentTileId;
+        this.childIndex = options.childIndex;
+    }
+    onStop({ reason }) {
+        if (reason !== 'drop') {
+            return;
+        }
+        this.tilerCtx.removeChildFromTile(this.parentTileId, this.childIndex);
     }
 }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-export * from './context.svelte.ts';
-export * from './model.ts';
+export * from './context.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.svelte.js";
-export * from "./model.js";
+export * from "./context.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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getTilerContext } from './context.svelte.js';
+  import { getTilerContext } from './context.js';
   import type { Tile } from './model.js';
   import Self from './render.svelte';
 
@@ -15,13 +15,7 @@
 
   const ctx = getTilerContext();
 
-  $effect(() => {
-    if (parent) {
-      ctx.registerParent(tile, parent);
-    } else {
-      ctx.setUpdateRoot(tile, (t) => (parent = t));
-    }
-  });
+  $effect(() => ctx.registerTile(tile, parent ?? ((t) => (parent = t))));
 
   $effect(() => ctx.getTileEffect(tile)?.(tile as never));
 
@@ -29,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/tiler.svelte

@@ -3,7 +3,7 @@
     setTilerContext,
     TilerContext,
     type TilerContextOptions,
-  } from './context.svelte.js';
+  } from './context.js';
   import type { Tile } from './model.js';
   import Panel from './panel.svelte';
 

package/dist/tiler.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type TilerContextOptions } from './context.svelte.ts';
+import { type TilerContextOptions } from './context.js';
 import type { Tile } from './model.js';
 type $$ComponentProps = {
     layout: 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,9 +10,15 @@
   } 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 type { TilerContext } from '../context.svelte.js';
-  import { TileDroppable } from '../dnd.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';
 
   declare module '../model.js' {
     interface TileRegistry {
@@ -88,11 +94,11 @@
         ctx.dnd.targetId && ctx.dnd.droppables.get(ctx.dnd.targetId);
       if (
         !droppable ||
-        (droppable instanceof TileDroppable &&
-          tile.children.every((c) => c.id !== droppable.targetTileId))
+        (droppable instanceof TileDropTarget &&
+          tile.id !== droppable.getTargetTileId())
       ) {
         tick().then(() => {
-          ctx.replaceWith(tile, tile.children[1 - i]);
+          ctx.replace(tile, tile.children[1 - i]);
         });
         return;
       }
@@ -103,23 +109,26 @@
       tile.constraints.splice(i, 1);
       return;
     }
-    ctx.destroy(tile);
+    ctx.remove(tile);
   }
 
-  export function onClear(ctx: TilerContext, tile: Tiles['split']) {
-    if (tile.children.length > 0) {
-      ctx.replaceWith(tile, tile.children[0]);
-    }
-  }
+  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>
 
@@ -201,7 +210,7 @@
             : currentPos > resizerRect.top
       ) {
         if (currentDir !== lastDir) {
-          startPos = previousPos;
+          startPos = currentPos;
           this.syncWeights();
           lastDir = currentDir;
         }

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

@@ -3,8 +3,8 @@ 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 { TilerContext } from '../context.svelte.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 {
         split: {
@@ -35,8 +35,8 @@ 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 onClear(_ctx: TilerContext, _tile: Tiles['split']): 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

@@ -1,9 +1,14 @@
 <script lang="ts" module>
   import { getContext, setContext, 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 { TilerContext } from '../context.svelte.js';
+  import {
+    insertWithDeduplication,
+    type Tile,
+    type Tiles,
+  } from '../model.js';
+  import type { TilerContext } from '../context.js';
 
   export type HeadersDirection = Direction | 'none';
 
@@ -18,6 +23,9 @@
         empty?: string;
       };
     }
+    interface TileInsertRequirements {
+      tabs: 'titles';
+    }
   }
 
   export interface TabsOptions<
@@ -57,7 +65,7 @@
   }
 
   interface SplitOptions {
-    type: 'row' | 'column';
+    type: Direction;
     parent: Tile | undefined;
     pivot: Tiles['tabs'];
     offset: number;
@@ -69,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,
@@ -93,7 +101,7 @@
     i: number
   ) {
     if (tile.children.length < 2) {
-      ctx.destroy(tile);
+      ctx.remove(tile);
       return;
     }
     if (tile.selectedTab >= i) {
@@ -111,62 +119,30 @@
     }
   }
 
-  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>
 
 <script lang="ts">
-  import {
-    DndContext,
-    Draggable,
-    type DraggableOptions,
-    type StopEvent,
-  } from '../shared/dnd.svelte.js';
   import {
     getRectParts,
     type Direction,
     type EdgePart,
   } from '../shared/spatial.js';
-  import { getTilerContext } from '../context.svelte.js';
-  import type { TileProps } from '../model.js';
-  import { TileDroppable } from '../dnd.js';
+  import { getTilerContext } from '../context.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);
@@ -182,35 +158,35 @@
   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 TabsDroppable extends TileDroppable<Tiles['tabs']> {
+  class TabsTileDropTarget extends TileDropTarget<Tiles['tabs']> {
     accepts(d: Draggable<Tile>): d is Draggable<Tiles['tabs']> {
       const t = d.data;
       return (
         t?.type === 'tabs' &&
         !(
+          this.isOwnChild(d) &&
           t.children.length === 1 &&
           tile.children.length === 1 &&
-          t.children[0].id === tile.children[0].id &&
-          d instanceof DraggableTab
+          t.children[0].id === tile.children[0].id
         )
       );
     }
   }
 
-  class DroppableSurface extends TabsDroppable {
+  class SimpleTabsDropTarget extends TabsTileDropTarget {
     protected onDrop(tabs: Tiles['tabs']): void {
-      insertTabs(tile, tile.children.length, tabs);
+      ctx.insertInto<'tabs'>(tile, tile.children.length, tabs);
     }
   }
 
-  class DroppableRect extends TabsDroppable {
+  class SegmentedTabsTileDropTarget extends TabsTileDropTarget {
     #edgeRatio: number;
     hpart: EdgePart | undefined = $state.raw();
     vpart: EdgePart | undefined = $state.raw();
 
-    constructor(ctx: DndContext<Tile>, edgeRatio: number) {
+    constructor(ctx: TilerContext, edgeRatio: number) {
       super(ctx, tile.id);
       this.#edgeRatio = edgeRatio;
     }
@@ -224,11 +200,11 @@
     }
   }
 
-  class DroppableTab extends DroppableRect {
+  class SegmentedTabDropTarget extends SegmentedTabsTileDropTarget {
     #id: string;
     #index: number;
 
-    constructor(ctx: DndContext<Tile>, id: string, index: number) {
+    constructor(ctx: TilerContext, id: string, index: number) {
       super(ctx, tile.headersDirection === 'none' ? 0 : 0.5);
       this.#id = id;
       this.#index = index;
@@ -242,25 +218,33 @@
         tile.headersDirection !== 'none'
           ? (tile.headersDirection === 'row' ? this.hpart : this.vpart) ===
             'end'
-          : d instanceof DraggableTab && d.index <= i
+          : this.isOwnChild(d) && d.childIndex <= i
       ) {
         i++;
       }
-      insertTabs(tile, i, tabs);
+      ctx.insertInto<'tabs'>(tile, i, tabs);
     }
   }
 
-  class DroppableContent extends DroppableRect {
+  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 && d instanceof DraggableTab) {
-          i = d.index;
+        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',
@@ -279,26 +263,6 @@
     }
   }
 
-  interface DraggableTabOptions extends DraggableOptions<Tile> {
-    index: number;
-  }
-
-  class DraggableTab extends Draggable<Tile> {
-    readonly index: number;
-
-    constructor(ctx: DndContext<Tile>, options: DraggableTabOptions) {
-      super(ctx, options);
-      this.index = options.index;
-    }
-
-    protected onStop({ reason }: StopEvent): void {
-      if (reason !== 'drop') {
-        return;
-      }
-      ctx.removeChild(tile, this.index);
-    }
-  }
-
   function handleKeydown(e: KeyboardEvent & { currentTarget: HTMLElement }) {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
@@ -306,9 +270,13 @@
     }
   }
 
-  const droppableSpacer = $derived(new DroppableSurface(ctx.dnd, tile.id));
-  const droppableContent = $derived(new DroppableContent(ctx.dnd, edgeRatio));
-  const droppableEmpty = $derived(new DroppableContent(ctx.dnd, edgeRatio));
+  const droppableSpacer = $derived(new SimpleTabsDropTarget(ctx, tile.id));
+  const droppableContent = $derived(
+    new SegmentedContentDropTarget(ctx, edgeRatio)
+  );
+  const droppableEmpty = $derived(
+    new SegmentedContentDropTarget(ctx, edgeRatio)
+  );
 </script>
 
 {#snippet defaultTabHeader(t: Tiles['tabs'], index: number)}
@@ -320,9 +288,10 @@
     <div data-tabs-bar>
       <div data-tabs-list>
         {#each tile.children as t, i (t.id)}
-          {@const droppable = new DroppableTab(ctx.dnd, t.id, i)}
-          {@const draggable = new DraggableTab(ctx.dnd, {
-            index: i,
+          {@const droppable = new SegmentedTabDropTarget(ctx, t.id, i)}
+          {@const draggable = new TileDragSource(ctx, {
+            parentTileId: tile.id,
+            childIndex: i,
             data: create({
               ...tile,
               tabs: [[tile.titles[i], t]],

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

@@ -1,7 +1,8 @@
 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 { TilerContext } from '../context.svelte.js';
+import { type Tile, type Tiles } from '../model.js';
+import type { TilerContext } from '../context.js';
 export type HeadersDirection = Direction | 'none';
 declare module '../model.js' {
     interface TileRegistry {
@@ -14,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][];
@@ -26,14 +30,14 @@ export interface TabsOptions<H extends string, E extends string, A extends strin
 }
 export declare function create<H extends string, E extends string, A extends string>(options: TabsOptions<H, E, A>): Tiles['tabs'];
 interface SplitOptions {
-    type: 'row' | 'column';
+    type: Direction;
     parent: Tile | undefined;
     pivot: Tiles['tabs'];
     offset: number;
     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>;
@@ -41,13 +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;
-import { Draggable } from '../shared/dnd.svelte.js';
+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.0.1",
+  "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",

package/dist/context.svelte.js

@@ -1,57 +0,0 @@
-import { createContext } from 'svelte';
-import { DndContext } from "./shared/dnd.svelte.js";
-export const [getTilerContext, setTilerContext] = createContext();
-export class TilerContext {
-    definitions;
-    parents;
-    effects;
-    updateRootFn;
-    dnd;
-    constructor(options) {
-        this.definitions = $derived(options.tiles);
-        this.dnd = $derived(options.dnd ?? new DndContext());
-        this.parents = $derived(options.parents ?? new WeakMap());
-        this.effects = $derived(options.effects ?? {});
-    }
-    registerParent(tile, parent) {
-        this.parents.set(tile, parent);
-    }
-    setUpdateRoot(tile, update) {
-        this.parents.delete(tile);
-        this.updateRootFn = update;
-    }
-    getTileEffect(tile) {
-        return this.effects[tile.type];
-    }
-    getTileComponent(tile) {
-        return this.definitions[tile.type].default;
-    }
-    replaceWith(tile, replace) {
-        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 ${JSON.stringify($state.snapshot(tile))} tile`);
-            }
-            parent.children[index] = replace;
-        }
-        else {
-            this.updateRootFn?.(replace);
-        }
-    }
-    removeChild(tile, index) {
-        return this.definitions[tile.type].onRemoveChild(this, tile, index);
-    }
-    destroy(tile) {
-        const parent = this.parents.get(tile);
-        if (parent === undefined) {
-            this.definitions[tile.type].onClear(this, tile);
-            return;
-        }
-        const index = parent.children.findIndex((c) => c.id === tile.id);
-        if (index < 0) {
-            throw new Error(`Invalid parent for ${JSON.stringify($state.snapshot(tile))} tile`);
-        }
-        this.removeChild(parent, index);
-    }
-}