@dynamix-layout/solid 1.0.2 → 1.1.0

package/dist/types/index.d.cts

@@ -0,0 +1,220 @@
+import { Accessor } from 'solid-js';
+import { Dimension } from '@dynamix-layout/core';
+import { DynamixLayoutCore } from '@dynamix-layout/core';
+import { JSX } from 'solid-js';
+import { LayoutTree } from '@dynamix-layout/core';
+import { NodeOptions } from '@dynamix-layout/core';
+import { ParentComponent } from 'solid-js';
+import { Setter } from 'solid-js';
+
+export declare const DefaultHoverElement: (props: DivProps) => JSX.Element;
+
+export declare const DefaultSliderElement: (props: {
+    direction?: boolean;
+    children?: JSX.Element;
+} & DivProps) => JSX.Element;
+
+export declare const DefaultTabsetToolbar: (props: TabsetToolbarProps) => JSX.Element;
+
+export declare const DefaultWrapTabBody: (props: DivProps) => JSX.Element;
+
+export declare const DefaultWrapTabHead: (props: DivProps) => JSX.Element;
+
+export declare const DefaultWrapTabLabel: (props: DivProps) => JSX.Element;
+
+export declare const DefaultWrapTabPanel: (props: DivProps) => JSX.Element;
+
+export declare type DivFC = (props: {
+    children?: JSX.Element;
+} & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+
+declare type DivProps = {
+    children?: JSX.Element;
+    active?: boolean;
+} & JSX.HTMLAttributes<HTMLDivElement>;
+
+export declare const DynamixLayout: ParentComponent<LayoutProps>;
+
+export declare interface DynamixLayoutProps {
+    children?: JSX.Element;
+    layoutTree?: LayoutTree;
+    tabs?: string[];
+    class?: string;
+    style?: JSX.CSSProperties;
+}
+
+export declare const getTabOutput: (input: TabInput) => TabOutput;
+
+export declare interface LayoutProps {
+    tabs: [string, JSX.Element][];
+    enableTabbar?: boolean;
+    WrapTabPanel?: DivFC;
+    WrapTabLabel?: (props: {
+        children?: JSX.Element;
+        active?: boolean;
+    } & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+    WrapTabHead?: DivFC;
+    WrapTabBody?: DivFC;
+    HoverElement?: DivFC;
+    SliderElement?: (props: {
+        children?: JSX.Element;
+        direction?: boolean;
+    } & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+    tabHeadHeight?: number;
+    layoutTree?: LayoutTree;
+    pad?: {
+        t: number;
+        b: number;
+        l: number;
+        r: number;
+    };
+    class?: string;
+    style?: JSX.CSSProperties;
+    bondWidth?: number;
+    /** In 2.0 this receives the v2 `LayoutJSON` format instead of `LayoutTree` (v1 layouts passed to `layoutTree` keep loading). See https://github.com/xcode-studio/dynamix-layout/blob/main/docs/migration-v1-to-v2.md */
+    updateJSON?: (layoutTree: LayoutTree) => void;
+    minTabHeight?: number;
+    minTabWidth?: number;
+    /** @deprecated No effect in 2.0: splitters update once per animation frame. See https://github.com/xcode-studio/dynamix-layout/blob/main/docs/migration-v1-to-v2.md */
+    sliderUpdateTimeout?: number;
+    windowResizeTimeout?: number;
+    /** @deprecated No effect in 2.0: splitters update once per animation frame. See https://github.com/xcode-studio/dynamix-layout/blob/main/docs/migration-v1-to-v2.md */
+    disableSliderTimeout?: boolean;
+    disableResizeTimeout?: boolean;
+    hoverElementStyles?: JSX.CSSProperties;
+    sliderElementStyles?: JSX.CSSProperties;
+    tabPanelElementStyles?: JSX.CSSProperties;
+    tabBodyElementStyles?: JSX.CSSProperties;
+    tabHeadElementStyles?: JSX.CSSProperties;
+    tabLabelElementStyles?: JSX.CSSProperties;
+    RootSplitterHoverElStyles?: JSX.CSSProperties;
+    hoverElementClass?: string;
+    sliderElementClass?: string;
+    tabPanelElementClass?: string;
+    tabBodyElementClass?: string;
+    tabHeadElementClass?: string;
+    tabLabelElementClass?: string;
+    RootSplitterHoverElClass?: string;
+    rootId?: string;
+    tabNames?: Map<string, string | JSX.Element>;
+    /** Show the maximize button on tab bars (default true). */
+    enableMaximize?: boolean;
+    /** Show the fold button on tab bars (default true; needs the tab bar). */
+    enableCollapse?: boolean;
+    /** Double-click a tab bar to maximize or restore it (default true). */
+    enableDoubleClickMaximize?: boolean;
+    /** Alt/Option + "+" maximizes, Alt/Option + "-" folds the active tabset (default true). */
+    keyboardShortcuts?: boolean;
+    TabsetToolbar?: (props: TabsetToolbarProps) => JSX.Element;
+}
+
+export declare const RootSplitterHoverEl: (props: {
+    area: "left" | "right" | "top" | "bottom";
+    size?: {
+        w: string;
+        h: string;
+    };
+    gap?: string;
+} & DivProps) => JSX.Element;
+
+export declare type TabEntry = {
+    uqid: string;
+    name: string;
+    node: JSX.Element;
+};
+
+export declare type TabInput = [string, JSX.Element][];
+
+export declare type TabOutput = {
+    keys: string[];
+    maps: Map<string, TabEntry>;
+    name: Map<string, string>;
+};
+
+export declare interface TabsetToolbarProps {
+    maximized: boolean;
+    folded: boolean;
+    /** The tab bar is drawn as a rotated vertical strip (folded, side-by-side row). */
+    rotated: boolean;
+    /** The tabset's row lays its children out side by side. */
+    rowIsHorizontal: boolean;
+    showMaximize: boolean;
+    showFold: boolean;
+    onToggleMaximize: () => void;
+    onToggleFold: () => void;
+}
+
+export declare const useDynamixLayout: ({ tabOutput, rootId, layoutTree, updateJSON, dimensions, tabHeadHeight, enableTabbar, bondWidth, minTabHeight, minTabWidth, sliderUpdateTimeout, windowResizeTimeout, disableSliderTimeout, disableResizeTimeout, keyboardShortcuts, enableDoubleClickMaximize, }: useDynamixLayoutOptions) => {
+    tabsets: Accessor<Map<string, NodeOptions>>;
+    sliders: Accessor<Map<string, NodeOptions>>;
+    tabsetsRef: Map<string, HTMLDivElement>;
+    panelsRef: Map<string, HTMLDivElement>;
+    tabsRef: Map<string, HTMLDivElement>;
+    slidersRef: Map<string, HTMLDivElement>;
+    layoutJSON: Accessor<LayoutTree | undefined>;
+    layoutInstance: DynamixLayoutCore;
+    hoverElementRef: {
+        current: HTMLDivElement | undefined;
+    };
+    rootSplitHoverEl: HTMLDivElement[];
+    dragging: Accessor<boolean>;
+    isUpdating: Accessor<boolean>;
+    /** @deprecated Internal state setter; will be removed in v2. */
+    setIsUpdating: Setter<boolean>;
+    /** @deprecated Internal state setter; will be removed in v2. */
+    setDragging: Setter<boolean>;
+    /** @deprecated Internal state setter; will be removed in v2. */
+    setTabsets: Setter<Map<string, NodeOptions>>;
+    /** @deprecated Internal state setter; will be removed in v2. */
+    setSliders: Setter<Map<string, NodeOptions>>;
+    /** @deprecated Internal state setter; will be removed in v2. */
+    setLayoutJSON: Setter<LayoutTree | undefined>;
+    onDragStart: (e: DragEvent) => void;
+    onDragOver: (e: DragEvent) => void;
+    onDragEnd: () => void;
+    onDragEnter: (e: DragEvent) => void;
+    onDragLeave: (e: DragEvent) => void;
+    onDrop: (e: DragEvent) => void;
+    onPointerDown: (e: PointerEvent) => void;
+    updateActiveTab: (e: MouseEvent) => void;
+    handleRootSplit: (e: DragEvent) => void;
+    handleNavbarDragOver: (e: DragEvent) => void;
+    toggleMaximize: (tabsetId: string) => void;
+    toggleCollapse: (tabsetId: string) => void;
+    onRootPointerDown: (e: PointerEvent) => void;
+    onTabbarDoubleClick: (e: MouseEvent) => void;
+};
+
+export declare interface UseDynamixLayoutOptions {
+    initialLayoutTree?: LayoutTree;
+    tabs?: string[];
+}
+
+export declare interface useDynamixLayoutOptions {
+    tabOutput: TabOutput;
+    rootId: string;
+    layoutTree?: LayoutTree;
+    updateJSON?: (layoutTree: LayoutTree) => void;
+    enableTabbar: boolean;
+    dimensions: () => Dimension;
+    sliderUpdateTimeout: number;
+    windowResizeTimeout: number;
+    disableSliderTimeout: boolean;
+    disableResizeTimeout: boolean;
+    hoverElementStyles?: JSX.CSSProperties;
+    bondWidth: number;
+    minTabHeight: number;
+    minTabWidth: number;
+    tabHeadHeight: number;
+    keyboardShortcuts?: boolean;
+    enableDoubleClickMaximize?: boolean;
+}
+
+export declare interface UseDynamixLayoutResult {
+    layoutTree: LayoutTree | undefined;
+    tabs: string[];
+    setTabs: (tabs: string[]) => void;
+    setLayoutTree: (layoutTree: LayoutTree) => void;
+}
+
+export { }

package/dist/types/index.d.ts

@@ -1,4 +1,220 @@
-export * from './components/Layout';
-export * from './hooks/useLayout';
-export * from './components/Default';
-export * from './types';
+import { Accessor } from 'solid-js';
+import { Dimension } from '@dynamix-layout/core';
+import { DynamixLayoutCore } from '@dynamix-layout/core';
+import { JSX } from 'solid-js';
+import { LayoutTree } from '@dynamix-layout/core';
+import { NodeOptions } from '@dynamix-layout/core';
+import { ParentComponent } from 'solid-js';
+import { Setter } from 'solid-js';
+
+export declare const DefaultHoverElement: (props: DivProps) => JSX.Element;
+
+export declare const DefaultSliderElement: (props: {
+    direction?: boolean;
+    children?: JSX.Element;
+} & DivProps) => JSX.Element;
+
+export declare const DefaultTabsetToolbar: (props: TabsetToolbarProps) => JSX.Element;
+
+export declare const DefaultWrapTabBody: (props: DivProps) => JSX.Element;
+
+export declare const DefaultWrapTabHead: (props: DivProps) => JSX.Element;
+
+export declare const DefaultWrapTabLabel: (props: DivProps) => JSX.Element;
+
+export declare const DefaultWrapTabPanel: (props: DivProps) => JSX.Element;
+
+export declare type DivFC = (props: {
+    children?: JSX.Element;
+} & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+
+declare type DivProps = {
+    children?: JSX.Element;
+    active?: boolean;
+} & JSX.HTMLAttributes<HTMLDivElement>;
+
+export declare const DynamixLayout: ParentComponent<LayoutProps>;
+
+export declare interface DynamixLayoutProps {
+    children?: JSX.Element;
+    layoutTree?: LayoutTree;
+    tabs?: string[];
+    class?: string;
+    style?: JSX.CSSProperties;
+}
+
+export declare const getTabOutput: (input: TabInput) => TabOutput;
+
+export declare interface LayoutProps {
+    tabs: [string, JSX.Element][];
+    enableTabbar?: boolean;
+    WrapTabPanel?: DivFC;
+    WrapTabLabel?: (props: {
+        children?: JSX.Element;
+        active?: boolean;
+    } & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+    WrapTabHead?: DivFC;
+    WrapTabBody?: DivFC;
+    HoverElement?: DivFC;
+    SliderElement?: (props: {
+        children?: JSX.Element;
+        direction?: boolean;
+    } & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+    tabHeadHeight?: number;
+    layoutTree?: LayoutTree;
+    pad?: {
+        t: number;
+        b: number;
+        l: number;
+        r: number;
+    };
+    class?: string;
+    style?: JSX.CSSProperties;
+    bondWidth?: number;
+    /** In 2.0 this receives the v2 `LayoutJSON` format instead of `LayoutTree` (v1 layouts passed to `layoutTree` keep loading). See https://github.com/xcode-studio/dynamix-layout/blob/main/docs/migration-v1-to-v2.md */
+    updateJSON?: (layoutTree: LayoutTree) => void;
+    minTabHeight?: number;
+    minTabWidth?: number;
+    /** @deprecated No effect in 2.0: splitters update once per animation frame. See https://github.com/xcode-studio/dynamix-layout/blob/main/docs/migration-v1-to-v2.md */
+    sliderUpdateTimeout?: number;
+    windowResizeTimeout?: number;
+    /** @deprecated No effect in 2.0: splitters update once per animation frame. See https://github.com/xcode-studio/dynamix-layout/blob/main/docs/migration-v1-to-v2.md */
+    disableSliderTimeout?: boolean;
+    disableResizeTimeout?: boolean;
+    hoverElementStyles?: JSX.CSSProperties;
+    sliderElementStyles?: JSX.CSSProperties;
+    tabPanelElementStyles?: JSX.CSSProperties;
+    tabBodyElementStyles?: JSX.CSSProperties;
+    tabHeadElementStyles?: JSX.CSSProperties;
+    tabLabelElementStyles?: JSX.CSSProperties;
+    RootSplitterHoverElStyles?: JSX.CSSProperties;
+    hoverElementClass?: string;
+    sliderElementClass?: string;
+    tabPanelElementClass?: string;
+    tabBodyElementClass?: string;
+    tabHeadElementClass?: string;
+    tabLabelElementClass?: string;
+    RootSplitterHoverElClass?: string;
+    rootId?: string;
+    tabNames?: Map<string, string | JSX.Element>;
+    /** Show the maximize button on tab bars (default true). */
+    enableMaximize?: boolean;
+    /** Show the fold button on tab bars (default true; needs the tab bar). */
+    enableCollapse?: boolean;
+    /** Double-click a tab bar to maximize or restore it (default true). */
+    enableDoubleClickMaximize?: boolean;
+    /** Alt/Option + "+" maximizes, Alt/Option + "-" folds the active tabset (default true). */
+    keyboardShortcuts?: boolean;
+    TabsetToolbar?: (props: TabsetToolbarProps) => JSX.Element;
+}
+
+export declare const RootSplitterHoverEl: (props: {
+    area: "left" | "right" | "top" | "bottom";
+    size?: {
+        w: string;
+        h: string;
+    };
+    gap?: string;
+} & DivProps) => JSX.Element;
+
+export declare type TabEntry = {
+    uqid: string;
+    name: string;
+    node: JSX.Element;
+};
+
+export declare type TabInput = [string, JSX.Element][];
+
+export declare type TabOutput = {
+    keys: string[];
+    maps: Map<string, TabEntry>;
+    name: Map<string, string>;
+};
+
+export declare interface TabsetToolbarProps {
+    maximized: boolean;
+    folded: boolean;
+    /** The tab bar is drawn as a rotated vertical strip (folded, side-by-side row). */
+    rotated: boolean;
+    /** The tabset's row lays its children out side by side. */
+    rowIsHorizontal: boolean;
+    showMaximize: boolean;
+    showFold: boolean;
+    onToggleMaximize: () => void;
+    onToggleFold: () => void;
+}
+
+export declare const useDynamixLayout: ({ tabOutput, rootId, layoutTree, updateJSON, dimensions, tabHeadHeight, enableTabbar, bondWidth, minTabHeight, minTabWidth, sliderUpdateTimeout, windowResizeTimeout, disableSliderTimeout, disableResizeTimeout, keyboardShortcuts, enableDoubleClickMaximize, }: useDynamixLayoutOptions) => {
+    tabsets: Accessor<Map<string, NodeOptions>>;
+    sliders: Accessor<Map<string, NodeOptions>>;
+    tabsetsRef: Map<string, HTMLDivElement>;
+    panelsRef: Map<string, HTMLDivElement>;
+    tabsRef: Map<string, HTMLDivElement>;
+    slidersRef: Map<string, HTMLDivElement>;
+    layoutJSON: Accessor<LayoutTree | undefined>;
+    layoutInstance: DynamixLayoutCore;
+    hoverElementRef: {
+        current: HTMLDivElement | undefined;
+    };
+    rootSplitHoverEl: HTMLDivElement[];
+    dragging: Accessor<boolean>;
+    isUpdating: Accessor<boolean>;
+    /** @deprecated Internal state setter; will be removed in v2. */
+    setIsUpdating: Setter<boolean>;
+    /** @deprecated Internal state setter; will be removed in v2. */
+    setDragging: Setter<boolean>;
+    /** @deprecated Internal state setter; will be removed in v2. */
+    setTabsets: Setter<Map<string, NodeOptions>>;
+    /** @deprecated Internal state setter; will be removed in v2. */
+    setSliders: Setter<Map<string, NodeOptions>>;
+    /** @deprecated Internal state setter; will be removed in v2. */
+    setLayoutJSON: Setter<LayoutTree | undefined>;
+    onDragStart: (e: DragEvent) => void;
+    onDragOver: (e: DragEvent) => void;
+    onDragEnd: () => void;
+    onDragEnter: (e: DragEvent) => void;
+    onDragLeave: (e: DragEvent) => void;
+    onDrop: (e: DragEvent) => void;
+    onPointerDown: (e: PointerEvent) => void;
+    updateActiveTab: (e: MouseEvent) => void;
+    handleRootSplit: (e: DragEvent) => void;
+    handleNavbarDragOver: (e: DragEvent) => void;
+    toggleMaximize: (tabsetId: string) => void;
+    toggleCollapse: (tabsetId: string) => void;
+    onRootPointerDown: (e: PointerEvent) => void;
+    onTabbarDoubleClick: (e: MouseEvent) => void;
+};
+
+export declare interface UseDynamixLayoutOptions {
+    initialLayoutTree?: LayoutTree;
+    tabs?: string[];
+}
+
+export declare interface useDynamixLayoutOptions {
+    tabOutput: TabOutput;
+    rootId: string;
+    layoutTree?: LayoutTree;
+    updateJSON?: (layoutTree: LayoutTree) => void;
+    enableTabbar: boolean;
+    dimensions: () => Dimension;
+    sliderUpdateTimeout: number;
+    windowResizeTimeout: number;
+    disableSliderTimeout: boolean;
+    disableResizeTimeout: boolean;
+    hoverElementStyles?: JSX.CSSProperties;
+    bondWidth: number;
+    minTabHeight: number;
+    minTabWidth: number;
+    tabHeadHeight: number;
+    keyboardShortcuts?: boolean;
+    enableDoubleClickMaximize?: boolean;
+}
+
+export declare interface UseDynamixLayoutResult {
+    layoutTree: LayoutTree | undefined;
+    tabs: string[];
+    setTabs: (tabs: string[]) => void;
+    setLayoutTree: (layoutTree: LayoutTree) => void;
+}
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamix-layout/solid",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A powerful SolidJS component for creating dynamic, resizable, and draggable layouts.",
   "keywords": [
     "solid",
@@ -26,25 +26,32 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/xcode-studio/dynamix-layout",
+    "url": "git+https://github.com/xcode-studio/dynamix-layout.git",
     "directory": "packages/solid"
   },
   "bugs": {
     "url": "https://github.com/xcode-studio/dynamix-layout/issues"
   },
   "homepage": "https://github.com/xcode-studio/dynamix-layout#readme",
-  "main": "./dist/index.cjs.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
   "typings": "./dist/types/index.d.ts",
   "style": "./dist/index.css",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js"
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.es.js"
+      },
+      "require": {
+        "types": "./dist/types/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
-    "./style.css": "./dist/index.css"
+    "./style.css": "./dist/index.css",
+    "./styles.css": "./dist/index.css",
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
@@ -61,8 +68,7 @@
   },
   "type": "module",
   "engines": {
-    "node": ">=22.16.0",
-    "pnpm": ">=10.13.1"
+    "node": ">=18"
   },
   "license": "MIT",
   "devDependencies": {
@@ -73,12 +79,15 @@
     "vite": "^7.3.6",
     "vite-plugin-solid": "2.11.14",
     "vitest": "^4.1.11",
-    "@repo/typescript-config": "0.0.0",
-    "@repo/eslint-config": "0.0.0"
+    "solid-js": "^1.9.15",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
   },
   "dependencies": {
-    "solid-js": "^1.9.15",
-    "@dynamix-layout/core": "1.1.0"
+    "@dynamix-layout/core": "1.2.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.8.0"
   },
   "scripts": {
     "dev": "vite build --watch",

package/dist/index.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("solid-js/web"),l=require("@dynamix-layout/core"),b=require("solid-js");var N=n.template("<div>"),De=n.template("<div><div style=display:flex;align-items:center;gap:4px;height:100%>"),Ee=n.template('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="lucide lucide-grip-vertical size-2.5"><circle cx=9 cy=12 r=1></circle><circle cx=9 cy=5 r=1></circle><circle cx=9 cy=19 r=1></circle><circle cx=15 cy=12 r=1></circle><circle cx=15 cy=5 r=1></circle><circle cx=15 cy=19 r=1>'),Te=n.template('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round style=transform:rotate(90deg)><circle cx=9 cy=12 r=1></circle><circle cx=9 cy=5 r=1></circle><circle cx=9 cy=19 r=1></circle><circle cx=15 cy=12 r=1></circle><circle cx=15 cy=5 r=1></circle><circle cx=15 cy=19 r=1>');const Z=e=>(()=>{var o=N();return n.spread(o,n.mergeProps(e,{get class(){return`DefaultWrapTabLabel ${e.class||""}`},get"data-state"(){return e.active?"active":"inactive"},get style(){return{"align-self":"center",padding:"4px 6px","box-sizing":"border-box","font-size":"14px","border-radius":"4px",...e.style}}}),!1,!0),n.insert(o,()=>e.children),o})(),ee=e=>(()=>{var o=N();return n.spread(o,n.mergeProps(e,{get class(){return`DefaultWrapTabBody hide-scrollbar ${e.class||""}`},get style(){return{"box-sizing":"border-box",height:"100%",width:"100%",display:"grid",overflow:"auto","scrollbar-width":"none","-ms-overflow-style":"none",...e.style}}}),!1,!0),n.insert(o,()=>e.children),o})(),te=e=>(()=>{var o=N();return n.spread(o,n.mergeProps(e,{get class(){return`DefaultWrapTabHead hide-scrollbar ${e.class||""}`},get style(){return{display:"grid","grid-auto-flow":"column","justify-content":"start","align-items":"center",gap:"6px","padding-left":"8px",width:"100%","box-sizing":"border-box",height:"100%","place-items":"self-start",overflow:"auto","background-color":"#dfdfdf","scrollbar-width":"none","-ms-overflow-style":"none",...e.style}}}),!1,!0),n.insert(o,()=>e.children),o})(),re=e=>(()=>{var o=N();return n.spread(o,n.mergeProps(e,{get class(){return`DefaultWrapTabPanel ${e.class||""}`},get style(){return{display:"grid","align-items":"center","place-items":"self-start","box-sizing":"border-box",position:"absolute","border-radius":"8px",...e.style}}}),!1,!0),n.insert(o,()=>e.children),o})(),ne=e=>(()=>{var o=N();return n.spread(o,n.mergeProps(e,{get class(){return`DefaultHoverElement ${e.class||""}`},get style(){return{display:"flex","justify-content":"center","align-items":"center",opacity:.7,position:"absolute","box-sizing":"border-box","font-weight":"bold","pointer-events":"none","background-color":"rgba(0, 175, 249, 0.5)","border-radius":"10px",transition:"all 0.2s ease",border:"2px dashed rgb(0, 196, 42)",...e.style}}}),!1,!0),n.insert(o,()=>e.children),o})(),ae=e=>(()=>{var o=De(),p=o.firstChild;return n.spread(o,n.mergeProps(e,{get class(){return`DefaultSliderElement ${e.class||""}`},get style(){return{width:"100%",height:"100%",position:"absolute","box-sizing":"border-box","background-color":"white","z-index":9,cursor:"grab",...e.style}}}),!1,!0),n.insert(p,(()=>{var m=n.memo(()=>!e.direction);return()=>m()?Ee():Te()})()),n.insert(o,()=>e.children,null),n.effect(m=>n.setStyleProperty(p,"flex-direction",e.direction?"column":"row")),o})(),oe=e=>{const[o,p]=b.splitProps(e,["area","size","gap","class","style","children"]),m=b.createMemo(()=>{const d=o.size||{h:"20%",w:"6px"},v=o.gap||"0px",f={};return o.area==="left"?(Object.assign(f,{"border-top-right-radius":"16px","border-bottom-right-radius":"16px",height:d.h,left:v,width:d.w}),f.top=`calc(50% - ${d.h} / 2)`):o.area==="top"?(Object.assign(f,{"border-bottom-left-radius":"16px","border-bottom-right-radius":"16px",width:d.h,top:v,height:d.w}),f.left=`calc(50% - ${d.h} / 2)`):o.area==="right"?(Object.assign(f,{"border-top-left-radius":"16px","border-bottom-left-radius":"16px",height:d.h,right:v,width:d.w}),f.top=`calc(50% - ${d.h} / 2)`):o.area==="bottom"&&(Object.assign(f,{"border-top-left-radius":"16px","border-top-right-radius":"16px",width:d.h,bottom:v,height:d.w}),f.left=`calc(50% - ${d.h} / 2)`),f});return(()=>{var d=N();return n.spread(d,n.mergeProps(p,{get class(){return`RootSplitterHoverEl ${o.class||""}`},get style(){return{position:"absolute","z-index":-1,display:"none","box-sizing":"border-box","background-color":"#0081f9",cursor:"grab",...o.style,...m()}}}),!1,!0),n.insert(d,()=>o.children),d})()},ie=({tabOutput:e,rootId:o,layoutTree:p,updateJSON:m,dimensions:d,tabHeadHeight:v,enableTabbar:f,bondWidth:F,minTabHeight:O,minTabWidth:S,sliderUpdateTimeout:A,windowResizeTimeout:z,disableSliderTimeout:P,disableResizeTimeout:R})=>{const $=new Map,H=new Map,C=new Map,W=new Map,w={current:void 0},L=[],[_,j]=b.createSignal(p),[I,E]=b.createSignal(new Map),[q,k]=b.createSignal(new Map),[U,x]=b.createSignal(!1);let D=null;const[X,y]=b.createSignal(!1),i={src:void 0,des:void 0,area:void 0,drag:!1},a={sliderId:void 0,isSliding:!1},u=f?Math.max(O,v):O,g=new l.DynamixLayoutCore({tabs:e.keys,tree:_(),minW:S,minH:u,bond:F,uqid:o,tabsIds:e.name}),G=t=>{const r=new Map(t);E(r)},Q=t=>{const r=new Map(t);k(r)},M=()=>{const t=f?v:0;l.Node.cache.tabOpts.get().forEach((r,c)=>{const s=W.get(c);if(!s)return;const h=l.getTabBodyRect(r.nodDims,t);l.setElementRect(s,h),s.style.display=r.nodOpen&&h.h>0?"block":"none"})},le=l.Node.cache.nodOpts.onChange(t=>{t.forEach((r,c)=>{const s=C.get(c);s&&l.setElementRect(s,r.nodDims);const h=$.get(c);h&&f&&l.setElementRect(h,{...r.nodDims,h:v})})}),de=l.Node.cache.tabOpts.onChange(()=>M()),ce=l.Node.cache.bndOpts.onChange(t=>{t.forEach((r,c)=>{const s=H.get(c);s&&l.setElementRect(s,r.nodDims)})}),Y=l.createFrameScheduler(({id:t,point:r})=>g.updateSlider(t,r,P,A)),V=t=>{const r=a.sliderId;!a.isSliding||!r||Y.schedule({id:r,point:{x:t.clientX,y:t.clientY}})},B=t=>{if(!a.isSliding)return;Y.flush();const r=t.currentTarget;a.isSliding=!1,a.sliderId=void 0,x(!1),m&&m(l.DynamixLayoutCore._root.toJSON()),r.releasePointerCapture(t.pointerId),r.removeEventListener("pointermove",V),r.removeEventListener("pointerup",B),r.removeEventListener("pointercancel",B)},ue=t=>{t.preventDefault();const r=t.currentTarget;a.isSliding=!0,a.sliderId=r.id,x(!0),r.setPointerCapture(t.pointerId),r.addEventListener("pointermove",V),r.addEventListener("pointerup",B),r.addEventListener("pointercancel",B)};let J={};const ge=(t,r,c)=>{if(!w.current||!i||!c)return null;const s=l.getTabsetDropPreview(c.getBoundingClientRect(),t,r);K(s),i.des=c,i.area=s.area},fe=t=>{t.preventDefault(),t.stopPropagation(),t.dataTransfer&&(t.dataTransfer.dropEffect="move");const r=t.currentTarget,c=Array.from(r.childNodes);if(!w.current||!i)return;const s=l.getNavbarDropPreview(r.getBoundingClientRect(),c.map(h=>h.getBoundingClientRect()),t.clientX,t.clientY);s&&(K(s),i.des=c[s.index],i.area=s.area)},me=t=>{t.preventDefault(),t.stopPropagation(),t.dataTransfer&&(t.dataTransfer.dropEffect="move");const r=t.currentTarget,{area:c,uid:s}=r.dataset;if(!c||!s||!w.current||!i)return;const h=c;i.des=r,i.area=h,K(l.getRootSplitPreview(d(),h))},K=t=>{const r=w.current;!r||l.isSameDropPreview(J,t)||(Object.assign(r.style,{left:`${t.left}px`,top:`${t.top}px`,width:`${t.width}px`,height:`${t.height}px`,display:"block",zIndex:"100"}),J=t)},he=t=>{if(t.stopPropagation(),x(!0),document.body.style.cursor="move",t.currentTarget){if(t.dataTransfer){t.dataTransfer.effectAllowed="move";const r=document.createElement("div");r.style.width="1px",r.style.height="1px",r.style.backgroundColor="transparent",r.style.position="absolute",r.style.top="-1000px",document.body.appendChild(r),t.dataTransfer.setDragImage(r,0,0),setTimeout(()=>{r.parentNode&&r.parentNode.removeChild(r)},0)}L.forEach(r=>{r&&(r.style.display="block",r.style.zIndex="99")}),C.forEach(r=>{r&&(r.style.display="block",r.style.zIndex="95")}),i.src=t.currentTarget,i.drag=!0}},be=t=>{if(t.preventDefault(),t.stopPropagation(),document.body.style.cursor="move",t.dataTransfer&&(t.dataTransfer.dropEffect="move"),!i?.src)return;const r=t.currentTarget,c=t.clientX,s=t.clientY;D&&cancelAnimationFrame(D),D=requestAnimationFrame(()=>{ge(c,s,r)})},ye=()=>{if(document.body.style.cursor="default",L.forEach(t=>{t&&(t.style.display="none",t.style.zIndex="-1")}),D&&(cancelAnimationFrame(D),D=null),w.current&&(w.current.style.display="none",w.current.style.zIndex="-1"),J={},i.drag=!1,!i?.src||!i?.des){i.area=void 0,i.src=void 0,i.des=void 0,x(!1);return}if(i.src===i.des){i.area=void 0,i.src=void 0,i.des=void 0,x(!1);return}if(i.src&&i.des){if(!i.area){console.warn("No area specified for drag and drop"),x(!1);return}if(!g.updateTree(i.src.dataset.uid,i.des.dataset.uid,i.area||"contain")){console.warn("Failed to update layout tree"),x(!1);return}requestAnimationFrame(()=>{G(l.Node.cache.nodOpts.get()),Q(l.Node.cache.bndOpts.get()),M(),m&&m(l.DynamixLayoutCore._root.toJSON())})}i.area=void 0,i.src=void 0,i.des=void 0,x(!1)},pe=t=>{t.preventDefault(),t.stopPropagation(),t.dataTransfer&&(t.dataTransfer.dropEffect="move")},ve=t=>{t.preventDefault(),t.stopPropagation()},xe=t=>{t.preventDefault(),t.stopPropagation(),t.dataTransfer&&t.dataTransfer.getData("text/plain")},we=t=>{const r=t.currentTarget,c=r.dataset.uid;if(!c)return;const s=l.Node.cache.mapElem.get(c);if(!(s instanceof l.Node)){console.warn(`Element with uid ${c} is not a Node instance`);return}if(!s||!s.host||!s.host.unId){console.warn(`Node with uid ${c} not found in mapNode`);return}if(s.host.open==s.name){console.warn(`Node ${s.name} is already open`);return}const h=l.Node.cache.nodOpts.get().get(s.host.unId);if(!h||h.nodOpen&&s?.open)return;s.host.open=s.name,h.nodOpen=s.name,h.nodKids?.forEach(T=>{T.nodOpen=T.nodName===s.name}),r?.parentElement?.childNodes?.forEach(T=>{T instanceof HTMLDivElement&&T.dataset.uid!==c?T.dataset.state="inactive":T.dataset.state="active"}),M()};return b.onMount(()=>{const t=c=>{g.updateDimension(d(),c,z)};t(!0);const r=()=>t(R??!1);window.addEventListener("resize",r),G(l.Node.cache.nodOpts.get()),Q(l.Node.cache.bndOpts.get()),M(),m&&m(l.DynamixLayoutCore._root.toJSON()),b.onCleanup(()=>{window.removeEventListener("resize",r),le(),ce(),de(),Y.cancel(),D&&cancelAnimationFrame(D)})}),{tabsets:I,sliders:q,tabsetsRef:$,panelsRef:C,tabsRef:W,slidersRef:H,layoutJSON:_,layoutInstance:g,hoverElementRef:w,rootSplitHoverEl:L,dragging:U,isUpdating:X,setIsUpdating:y,setDragging:x,setTabsets:E,setSliders:k,setLayoutJSON:j,onDragStart:he,onDragOver:be,onDragEnd:ye,onDragEnter:pe,onDragLeave:ve,onDrop:xe,onPointerDown:ue,updateActiveTab:we,handleRootSplit:me,handleNavbarDragOver:fe}};var Se=n.template("<div>"),$e=n.template('<div class="flex items-center justify-center h-full"><span class=text-gray-500>No content');const se=e=>{const o=[],p=new Map,m=new Map;for(const[d,v]of e){const f=crypto.randomUUID();o.push(d),p.set(d,{uqid:f,name:d,node:v}),m.set(d,f)}return{keys:o,maps:p,name:m}},Ce=e=>{const o=b.createMemo(()=>se(e.tabs));let p;const m=()=>{const y=p;if(!y)return{w:0,h:0,x:0,y:0};const i=y.getBoundingClientRect(),a=e.pad||{t:0,b:0,l:0,r:0};return{w:i.width-(a.l+a.r),h:i.height-(a.t+a.b),x:i.left+a.l,y:i.top+a.t}},{tabsetsRef:d,slidersRef:v,sliders:f,tabsets:F,hoverElementRef:O,onDragEnd:S,onDragOver:A,onDragStart:z,onDragEnter:P,onDragLeave:R,onDrop:$,dragging:H,panelsRef:C,onPointerDown:W,handleNavbarDragOver:w,updateActiveTab:L,rootSplitHoverEl:_,handleRootSplit:j,tabsRef:I,isUpdating:E}=ie({tabOutput:o(),rootId:e.rootId||"dynamix-layout-root",updateJSON:e.updateJSON,enableTabbar:e.enableTabbar===void 0?!0:e.enableTabbar,layoutTree:e.layoutTree,tabHeadHeight:e.tabHeadHeight||l.DynamixLayoutCore._minH,dimensions:m,sliderUpdateTimeout:e.sliderUpdateTimeout||2,windowResizeTimeout:e.windowResizeTimeout||2,bondWidth:e.bondWidth||l.DynamixLayoutCore._bond,minTabHeight:e.minTabHeight||l.DynamixLayoutCore._minH,minTabWidth:e.minTabWidth||l.DynamixLayoutCore._minW,disableSliderTimeout:e.disableSliderTimeout===void 0?!0:e.disableSliderTimeout,disableResizeTimeout:e.disableResizeTimeout===void 0?!0:e.disableResizeTimeout,hoverElementStyles:e.hoverElementStyles}),q=e.WrapTabPanel||re,k=e.WrapTabHead||te,U=e.WrapTabLabel||Z,x=e.WrapTabBody||ee,D=e.SliderElement||ae,X=e.HoverElement||ne;return(()=>{var y=Se(),i=p;return typeof i=="function"?n.use(i,y):p=y,n.spread(y,n.mergeProps({get id(){return e.rootId||"dynamix-layout-root"}},e,{get"data-testid"(){return e.rootId||"dynamix-layout-root"},get class(){return H()?"is-dragging":""},get style(){return{position:"relative",width:"100%",height:"100%",overflow:"hidden",...e.style}}}),!1,!0),n.insert(y,n.createComponent(b.For,{get each(){return Array.from(F().values())},children:a=>[n.createComponent(q,{ref:u=>{const g=a.uidNode;u?C.set(g,u):C.delete(g)},onDragEnd:S,onDragOver:A,onDragEnter:P,onDragLeave:R,onDrop:$,get"data-uid"(){return a.uidNode},get"data-type"(){return a.typNode},get class(){return"hide-scrollbar DefaultWrapTabPanel "+(e.tabPanelElementClass||"")},get style(){return{position:"absolute",...e.tabPanelElementStyles,width:`${a.nodDims.w}px`,height:`${a.nodDims.h}px`,left:`${a.nodDims.x}px`,top:`${a.nodDims.y}px`,"background-color":"transparent"}}}),n.createComponent(k,{get draggable(){return!E()},get"data-uid"(){return a.uidNode},"data-type":"tabset",onDragOver:w,onDragStart:z,onDragEnd:S,onDragEnter:P,onDragLeave:R,onDrop:$,ref:u=>{const g=a.uidNode;u?d.set(g,u):d.delete(g)},get class(){return"hide-scrollbar "+(e.tabHeadElementClass||"")},get style(){return{...e.tabHeadElementStyles,position:"absolute","z-index":99,width:`${a.nodDims.w}px`,height:`${e.tabHeadHeight||l.DynamixLayoutCore._minH}px`,left:`${a.nodDims.x}px`,top:`${a.nodDims.y}px`,cursor:E()?"wait":"pointer"}},get children(){return n.createComponent(b.For,{get each(){return a.nodKids},children:u=>n.createComponent(U,{get"data-uid"(){return u.uidNode},"data-type":"tab",onDragStart:z,onDragEnd:S,get draggable(){return!E()},get active(){return!!u.nodOpen},get class(){return"hide-scrollbar "+(e.tabLabelElementClass||"")},get style(){return{cursor:E()?"wait":"pointer",...e.tabLabelElementStyles}},onClick:L,get children(){return n.memo(()=>!!e.tabNames)()&&e.tabNames.get(u.nodName)||u.nodName}})})}})]}),null),n.insert(y,n.createComponent(b.For,{get each(){return o().keys},children:a=>{const u=o().maps.get(a)?.uqid;return n.createComponent(x,{id:u,draggable:!1,"data-uid":u,get class(){return"hide-scrollbar "+(e.tabBodyElementClass||"")},get style(){return{position:"absolute","z-index":90,"overscroll-behavior":"contain",...e.tabBodyElementStyles}},ref:g=>{u&&(g?I.set(u,g):I.delete(u))},get children(){return o().maps.get(a)?.node||$e()}})}}),null),n.insert(y,n.createComponent(b.For,{get each(){return Array.from(f().values())},children:a=>n.createComponent(D,{get id(){return a.uidNode},get"data-uid"(){return a.uidNode},get direction(){return a.nodeDir},onPointerDown:W,get class(){return"hide-scrollbar "+(e.sliderElementClass||"")},ref:u=>{const g=a.uidNode;u?v.set(g,u):v.delete(g)},get style(){return{width:`${a.nodDims.w}px`,height:`${a.nodDims.h}px`,left:`${a.nodDims.x}px`,top:`${a.nodDims.y}px`,cursor:a.nodeDir?"ns-resize":"ew-resize",...e.sliderElementStyles}}})}),null),n.insert(y,n.createComponent(X,{get class(){return"hide-scrollbar "+(e.hoverElementClass||"")},get style(){return{...e.hoverElementStyles}},ref:a=>O.current=a}),null),n.insert(y,n.createComponent(b.For,{each:["left","right","top","bottom"],children:(a,u)=>n.createComponent(oe,{onDragOver:j,onDragEnd:S,onDragEnter:P,onDragLeave:R,onDrop:$,get"data-uid"(){return e.rootId||"dynamix-layout-root"},"data-area":a,get class(){return"hide-scrollbar "+(e.RootSplitterHoverElClass||"")},ref:g=>{g&&(_[u()]=g)},get style(){return{...e.RootSplitterHoverElStyles}},area:a,size:{h:"25%",w:"8px"}})}),null),y})()};exports.DefaultHoverElement=ne;exports.DefaultSliderElement=ae;exports.DefaultWrapTabBody=ee;exports.DefaultWrapTabHead=te;exports.DefaultWrapTabLabel=Z;exports.DefaultWrapTabPanel=re;exports.DynamixLayout=Ce;exports.RootSplitterHoverEl=oe;exports.getTabOutput=se;exports.useDynamixLayout=ie;

package/dist/types/components/Default.d.ts

@@ -1,23 +0,0 @@
-import { JSX } from 'solid-js';
-type DivProps = {
-    children?: JSX.Element;
-    active?: boolean;
-} & JSX.HTMLAttributes<HTMLDivElement>;
-export declare const DefaultWrapTabLabel: (props: DivProps) => JSX.Element;
-export declare const DefaultWrapTabBody: (props: DivProps) => JSX.Element;
-export declare const DefaultWrapTabHead: (props: DivProps) => JSX.Element;
-export declare const DefaultWrapTabPanel: (props: DivProps) => JSX.Element;
-export declare const DefaultHoverElement: (props: DivProps) => JSX.Element;
-export declare const DefaultSliderElement: (props: {
-    direction?: boolean;
-    children?: JSX.Element;
-} & DivProps) => JSX.Element;
-export declare const RootSplitterHoverEl: (props: {
-    area: "left" | "right" | "top" | "bottom";
-    size?: {
-        w: string;
-        h: string;
-    };
-    gap?: string;
-} & DivProps) => JSX.Element;
-export {};

package/dist/types/components/Layout.d.ts

@@ -1,4 +0,0 @@
-import { ParentComponent } from 'solid-js';
-import { LayoutProps, TabInput, TabOutput } from '../types';
-export declare const getTabOutput: (input: TabInput) => TabOutput;
-export declare const DynamixLayout: ParentComponent<LayoutProps>;

package/dist/types/hooks/useLayout.d.ts

@@ -1,39 +0,0 @@
-import { LayoutTree, DynamixLayoutCore, NodeOptions } from '../../../core/src';
-import { useDynamixLayoutOptions } from '../types';
-import { Accessor, Setter } from 'solid-js';
-export declare const useDynamixLayout: ({ tabOutput, rootId, layoutTree, updateJSON, dimensions, tabHeadHeight, enableTabbar, bondWidth, minTabHeight, minTabWidth, sliderUpdateTimeout, windowResizeTimeout, disableSliderTimeout, disableResizeTimeout, }: useDynamixLayoutOptions) => {
-    tabsets: Accessor<Map<string, NodeOptions>>;
-    sliders: Accessor<Map<string, NodeOptions>>;
-    tabsetsRef: Map<string, HTMLDivElement>;
-    panelsRef: Map<string, HTMLDivElement>;
-    tabsRef: Map<string, HTMLDivElement>;
-    slidersRef: Map<string, HTMLDivElement>;
-    layoutJSON: Accessor<LayoutTree | undefined>;
-    layoutInstance: DynamixLayoutCore;
-    hoverElementRef: {
-        current: HTMLDivElement | undefined;
-    };
-    rootSplitHoverEl: HTMLDivElement[];
-    dragging: Accessor<boolean>;
-    isUpdating: Accessor<boolean>;
-    /** @deprecated Internal state setter; will be removed in v2. */
-    setIsUpdating: Setter<boolean>;
-    /** @deprecated Internal state setter; will be removed in v2. */
-    setDragging: Setter<boolean>;
-    /** @deprecated Internal state setter; will be removed in v2. */
-    setTabsets: Setter<Map<string, NodeOptions>>;
-    /** @deprecated Internal state setter; will be removed in v2. */
-    setSliders: Setter<Map<string, NodeOptions>>;
-    /** @deprecated Internal state setter; will be removed in v2. */
-    setLayoutJSON: Setter<LayoutTree | undefined>;
-    onDragStart: (e: DragEvent) => void;
-    onDragOver: (e: DragEvent) => void;
-    onDragEnd: () => void;
-    onDragEnter: (e: DragEvent) => void;
-    onDragLeave: (e: DragEvent) => void;
-    onDrop: (e: DragEvent) => void;
-    onPointerDown: (e: PointerEvent) => void;
-    updateActiveTab: (e: MouseEvent) => void;
-    handleRootSplit: (e: DragEvent) => void;
-    handleNavbarDragOver: (e: DragEvent) => void;
-};