@dynamix-layout/solid 1.0.1 → 1.0.3

package/dist/types/index.d.cts

@@ -0,0 +1,190 @@
+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 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>;
+}
+
+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 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;
+};
+
+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;
+}
+
+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,190 @@
-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 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>;
+}
+
+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 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;
+};
+
+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;
+}
+
+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.1",
+  "version": "1.0.3",
   "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,24 +68,26 @@
   },
   "type": "module",
   "engines": {
-    "node": ">=22.16.0",
-    "pnpm": ">=10.13.1"
+    "node": ">=18"
   },
   "license": "MIT",
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^26.1.0",
-    "typescript": "^5.8.3",
-    "vite": "^7.1.11",
-    "vite-plugin-solid": "2.11.7",
-    "vitest": "^3.2.4",
-    "@repo/eslint-config": "0.0.0",
-    "@repo/typescript-config": "0.0.0"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.6",
+    "vite-plugin-solid": "2.11.14",
+    "vitest": "^4.1.11",
+    "solid-js": "^1.9.15",
+    "@repo/typescript-config": "0.0.0",
+    "@repo/eslint-config": "0.0.0"
   },
   "dependencies": {
-    "solid-js": "^1.9.7",
-    "@dynamix-layout/core": "1.0.1"
+    "@dynamix-layout/core": "1.1.1"
+  },
+  "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 a=require("solid-js/web"),m=require("@dynamix-layout/core"),T=require("solid-js");var M=a.template("<div>"),ze=a.template("<div><div>"),We=a.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>'),Ie=a.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><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 fe=r=>(()=>{var i=M();return a.spread(i,a.mergeProps(r,{get class(){return`DefaultWrapTabLabel ${r.class||""}`},get"data-state"(){return r.active?"active":"inactive"},get style(){return{"align-self":"center",padding:"4px 6px","box-sizing":"border-box","font-size":"14px","border-radius":"4px",...r.style}}}),!1,!0),a.insert(i,()=>r.children),i})(),he=r=>(()=>{var i=M();return a.spread(i,a.mergeProps(r,{get class(){return`DefaultWrapTabBody hide-scrollbar ${r.class||""}`},get style(){return{"box-sizing":"border-box",height:"100%",width:"100%",display:"grid",overflow:"auto","scrollbar-width":"none","-ms-overflow-style":"none",...r.style}}}),!1,!0),a.insert(i,()=>r.children),i})(),me=r=>(()=>{var i=M();return a.spread(i,a.mergeProps(r,{get class(){return`DefaultWrapTabHead hide-scrollbar ${r.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",...r.style}}}),!1,!0),a.insert(i,()=>r.children),i})(),ye=r=>(()=>{var i=M();return a.spread(i,a.mergeProps(r,{get class(){return`DefaultWrapTabPanel ${r.class||""}`},get style(){return{display:"grid","align-items":"center","place-items":"self-start","box-sizing":"border-box",position:"absolute","border-radius":"8px",...r.style}}}),!1,!0),a.insert(i,()=>r.children),i})(),pe=r=>(()=>{var i=M();return a.spread(i,a.mergeProps(r,{get class(){return`DefaultHoverElement ${r.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)",...r.style}}}),!1,!0),a.insert(i,()=>r.children),i})(),be=r=>(()=>{var i=ze(),p=i.firstChild;return a.spread(i,a.mergeProps(r,{get class(){return`DefaultSliderElement ${r.class||""}`},get style(){return{width:"100%",height:"100%",position:"absolute","box-sizing":"border-box","background-color":"white","z-index":9,cursor:"grab",...r.style}}}),!1,!0),p.style.setProperty("display","flex"),p.style.setProperty("align-items","center"),p.style.setProperty("gap","4px"),p.style.setProperty("height","100%"),a.insert(p,(()=>{var b=a.memo(()=>!r.direction);return()=>b()?We():(()=>{var c=Ie();return c.style.setProperty("transform","rotate(90deg)"),c})()})()),a.insert(i,()=>r.children,null),a.effect(b=>(b=r.direction?"column":"row")!=null?p.style.setProperty("flex-direction",b):p.style.removeProperty("flex-direction")),i})(),xe=r=>{const[i,p]=T.splitProps(r,["area","size","gap","class","style","children"]),b=T.createMemo(()=>{const c=i.size||{h:"20%",w:"6px"},C=i.gap||"0px",y={};return i.area==="left"?(Object.assign(y,{"border-top-right-radius":"16px","border-bottom-right-radius":"16px",height:c.h,left:C,width:c.w}),y.top=`calc(50% - ${c.h} / 2)`):i.area==="top"?(Object.assign(y,{"border-bottom-left-radius":"16px","border-bottom-right-radius":"16px",width:c.h,top:C,height:c.w}),y.left=`calc(50% - ${c.h} / 2)`):i.area==="right"?(Object.assign(y,{"border-top-left-radius":"16px","border-bottom-left-radius":"16px",height:c.h,right:C,width:c.w}),y.top=`calc(50% - ${c.h} / 2)`):i.area==="bottom"&&(Object.assign(y,{"border-top-left-radius":"16px","border-top-right-radius":"16px",width:c.h,bottom:C,height:c.w}),y.left=`calc(50% - ${c.h} / 2)`),y});return(()=>{var c=M();return a.spread(c,a.mergeProps(p,{get class(){return`RootSplitterHoverEl ${i.class||""}`},get style(){return{position:"absolute","z-index":-1,display:"none","box-sizing":"border-box","background-color":"#0081f9",cursor:"grab",...i.style,...b()}}}),!1,!0),a.insert(c,()=>i.children),c})()},ve=({tabOutput:r,rootId:i,layoutTree:p,updateJSON:b,dimensions:c,tabHeadHeight:C,enableTabbar:y,bondWidth:te,minTabHeight:re,minTabWidth:k,sliderUpdateTimeout:ne,windowResizeTimeout:K,disableSliderTimeout:j,disableResizeTimeout:F})=>{const B=new Map,U=new Map,A=new Map,G=new Map,R={current:void 0},q=[],[V,ae]=T.createSignal(p),[Q,I]=T.createSignal(new Map),[oe,Z]=T.createSignal(new Map),[ie,H]=T.createSignal(!1);let L=null;const[se,E]=T.createSignal(!1),s={src:void 0,des:void 0,area:void 0,drag:!1},o={sliderId:void 0,isSliding:!1},u=new m.DynamixLayoutCore({tabs:r.keys,tree:V(),minW:k,minH:re,bond:te,uqid:i,tabsIds:r.name}),x=n=>{const e=new Map(n);I(e)},de=n=>{const e=new Map(n);Z(e)},X=()=>{m.Node.cache.tabOpts.get().forEach((e,l)=>{const t=G.get(l);t&&(t.style.width=`${e.nodDims.w}px`,t.style.height=y?`${e.nodDims.h-C}px`:`${e.nodDims.h}px`,t.style.left=`${e.nodDims.x}px`,t.style.top=y?`${e.nodDims.y+C}px`:`${e.nodDims.y}px`,t.style.display=e.nodOpen?"block":"none")})},De=()=>{m.Node.cache.bndOpts.get().forEach((e,l)=>{const t=U.get(l);t&&(t.style.width=`${e.nodDims.w}px`,t.style.height=`${e.nodDims.h}px`,t.style.left=`${e.nodDims.x}px`,t.style.top=`${e.nodDims.y}px`)})};m.Node.cache.nodOpts.onChange(n=>{n.forEach((e,l)=>{const t=A.get(l);t&&(t.style.width=`${e.nodDims.w}px`,t.style.height=`${e.nodDims.h}px`,t.style.left=`${e.nodDims.x}px`,t.style.top=`${e.nodDims.y}px`);const d=B.get(l);d&&y&&(d.style.width=`${e.nodDims.w}px`,d.style.height=y?`${C}px`:"0px",d.style.left=`${e.nodDims.x}px`,d.style.top=`${e.nodDims.y}px`)})}),m.Node.cache.bndOpts.onChange(n=>{n.forEach((e,l)=>{const t=U.get(l);t&&(t.style.width=`${e.nodDims.w}px`,t.style.height=`${e.nodDims.h}px`,t.style.left=`${e.nodDims.x}px`,t.style.top=`${e.nodDims.y}px`)})});const ce=n=>{o.isSliding&&(u.updateSlider(o.sliderId,{x:n.clientX,y:n.clientY},j,ne),De(),X())},ee=n=>{if(!o.isSliding)return;const e=n.currentTarget;o.isSliding=!1,o.sliderId=void 0,b&&b(m.DynamixLayoutCore._root.toJSON()),e.releasePointerCapture(n.pointerId),e.removeEventListener("pointermove",ce),e.removeEventListener("pointerup",ee),e.removeEventListener("pointercancel",ee)},Te=n=>{n.preventDefault();const e=n.currentTarget;o.isSliding=!0,o.sliderId=e.id,e.setPointerCapture(n.pointerId),e.addEventListener("pointermove",ce),e.addEventListener("pointerup",ee),e.addEventListener("pointercancel",ee)},h={},Ee=(n,e,l)=>{if(!R.current||!s||!l)return null;s.des=l;const t=l.getBoundingClientRect();if(!t)return null;const d=t.width,g=t.height,f=n-t.left,w=e-t.top;let v,$,N,D,P;f<d/3?(v="left",$=t.left,N=t.top,D=d/2,P=g):f>2*d/3?(v="right",$=t.left+d/2,N=t.top,D=d/2,P=g):w<g/3?(v="top",$=t.left,N=t.top,D=d,P=g/2):w>2*g/3?(v="bottom",$=t.left,N=t.top+g/2,D=d,P=g/2):(v="contain",$=t.left+d*.1,N=t.top+g*.1,D=d*.8,P=g*.8),(h.area!==v||h.left!==$||h.top!==N||h.width!==D||h.height!==P)&&(Y($,N,D,P,v),h.area=v,h.left=$,h.top=N,h.width=D,h.height=P),s.area=v},$e=n=>{n.preventDefault(),n.stopPropagation(),n.dataTransfer&&(n.dataTransfer.dropEffect="move");const e=n.currentTarget,l=Array.from(e.childNodes),t=n.clientX,d=n.clientY;if(!R.current||!s||l.length===0)return;const g=l[0].parentElement;if(!g)return;const f=g.getBoundingClientRect(),w=l[0],v=l[l.length-1],$=w.getBoundingClientRect(),N=v.getBoundingClientRect();let D=6;if(d<f.top||d>f.bottom)return;if(t>N.right){const S=N.right+1,O=N.top,z=D-2,W=N.height,_="right";Y(S,O,z,W,_),s.des=v,s.area=_;return}if(t<$.left){const S=$.left-D+1,O=$.top,z=D-2,W=$.height,_="left";Y(S,O,z,W,_),s.des=w,s.area=_;return}let P=null,ue=1/0,J=!1,le=0;for(let S=0;S<l.length;S++){const O=l[S].getBoundingClientRect(),z=O.left+O.width/2,W=Math.abs(t-z);W<ue&&(ue=W,P=l[S],J=t<z,le=S)}if(l.length>1&&(J&&le>0||!J&&le<l.length-1)&&(D=l[1].getBoundingClientRect().left-$.right),P){const S=P.getBoundingClientRect(),O=J?S.left-D+1:S.right+1,z=S.top,W=D-2,_=S.height,ge=J?"left":"right";Y(O,z,W,_,ge),s.des=P,s.area=ge}},Se=n=>{n.preventDefault(),n.stopPropagation(),n.dataTransfer&&(n.dataTransfer.dropEffect="move");const e=n.currentTarget.dataset.area,l=n.currentTarget.dataset.uid;if(!e||!l||!R.current||!s)return;s.des=n.currentTarget,s.area=e;const t=c();let d=t.x,g=t.y,f=t.w,w=t.h;e==="left"?(d=t.x,g=t.y,f=t.w/2,w=t.h):e==="right"?(d=t.x+t.w/2,g=t.y,f=t.w/2,w=t.h):e==="top"?(d=t.x,g=t.y,f=t.w,w=t.h/2):e==="bottom"&&(d=t.x,g=t.y+t.h/2,f=t.w,w=t.h/2),Y(d,g,f,w,e)},Y=(n,e,l,t,d)=>{if(h.area!==d||h.left!==n||h.top!==e||h.width!==l||h.height!==t){const g=R.current;if(g){const f={};for(let w=0;w<g.style.length;w++){const v=g.style[w];v&&(f[v]=g.style.getPropertyValue(v))}Object.assign(g.style,f,{left:`${n}px`,top:`${e}px`,width:`${l}px`,height:`${t}px`,display:"block","z-index":"100"}),h.area=d,h.left=n,h.top=e,h.width=l,h.height=t}}},Ce=n=>{if(n.stopPropagation(),H(!0),document.body.style.cursor="move",n.currentTarget){if(n.dataTransfer){n.dataTransfer.effectAllowed="move";const e=document.createElement("div");e.style.width="1px",e.style.height="1px",e.style.backgroundColor="transparent",e.style.position="absolute",e.style.top="-1000px",document.body.appendChild(e),n.dataTransfer.setDragImage(e,0,0),setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e)},0)}q.forEach(e=>{e&&(e.style.display="block",e.style.zIndex="99")}),A.forEach(e=>{e&&(e.style.display="block",e.style.zIndex="95")}),s.src=n.currentTarget,s.drag=!0}},Ne=n=>{if(n.preventDefault(),n.stopPropagation(),document.body.style.cursor="move",n.dataTransfer&&(n.dataTransfer.dropEffect="move"),!s?.src)return;const e=n.currentTarget,l=n.clientX,t=n.clientY;L&&cancelAnimationFrame(L),L=requestAnimationFrame(()=>{Ee(l,t,e)})},Pe=n=>{if(document.body.style.cursor="default",q.forEach(e=>{e&&(e.style.display="none",e.style.zIndex="-1")}),L&&(cancelAnimationFrame(L),L=null),R.current&&(R.current.style.display="none",R.current.style.zIndex="-1"),Object.assign(h,{}),s.drag=!1,!s?.src||!s?.des){s.area=void 0,s.src=void 0,s.des=void 0,H(!1);return}if(s.src===s.des){s.area=void 0,s.src=void 0,s.des=void 0,H(!1);return}if(s.src&&s.des){if(!s.area){console.warn("No area specified for drag and drop"),H(!1);return}if(!u.updateTree(s.src.dataset.uid,s.des.dataset.uid,s.area||"contain")){console.warn("Failed to update layout tree"),H(!1);return}requestAnimationFrame(()=>{x(m.Node.cache.nodOpts.get()),de(m.Node.cache.bndOpts.get()),X(),b&&b(m.DynamixLayoutCore._root.toJSON())})}s.area=void 0,s.src=void 0,s.des=void 0,H(!1)},Re=n=>{n.preventDefault(),n.stopPropagation(),n.dataTransfer&&(n.dataTransfer.dropEffect="move")},Le=n=>{n.preventDefault(),n.stopPropagation()},He=n=>{n.preventDefault(),n.stopPropagation(),n.dataTransfer&&n.dataTransfer.getData("text/plain")},Oe=n=>{const e=n.currentTarget,l=e.dataset.uid;if(!l)return;const t=m.Node.cache.mapElem.get(l);if(!(t instanceof m.Node)){console.warn(`Element with uid ${l} is not a Node instance`);return}if(!t||!t.host||!t.host.unId){console.warn(`Node with uid ${l} not found in mapNode`);return}if(t.host.open==t.name){console.warn(`Node ${t.name} is already open`);return}const d=m.Node.cache.nodOpts.get().get(t.host.unId);if(!d||d.nodOpen&&t?.open)return;t.host.open=t.name,d.nodOpen=t.name,d.nodKids?.forEach(f=>{f.nodOpen=f.nodName===t.name}),e?.parentElement?.childNodes?.forEach(f=>{f instanceof HTMLDivElement&&f.dataset.uid!==l?f.dataset.state="inactive":f.dataset.state="active"}),X()};return T.onMount(()=>{const n=l=>{u.updateDimension(c(),l,K),X()};n(!0);const e=()=>n(F??!1);window.addEventListener("resize",e),x(m.Node.cache.nodOpts.get()),de(m.Node.cache.bndOpts.get()),X(),b&&b(m.DynamixLayoutCore._root.toJSON()),T.onCleanup(()=>{window.removeEventListener("resize",e),L&&cancelAnimationFrame(L)})}),{tabsets:Q,sliders:oe,tabsetsRef:B,panelsRef:A,tabsRef:G,slidersRef:U,layoutJSON:V,layoutInstance:u,hoverElementRef:R,rootSplitHoverEl:q,dragging:ie,isUpdating:se,setIsUpdating:E,setDragging:H,setTabsets:I,setSliders:Z,setLayoutJSON:ae,onDragStart:Ce,onDragOver:Ne,onDragEnd:Pe,onDragEnter:Re,onDragLeave:Le,onDrop:He,onPointerDown:Te,updateActiveTab:Oe,handleRootSplit:Se,handleNavbarDragOver:$e}};var _e=a.template("<div>"),ke=a.template('<div class="flex items-center justify-center h-full"><span class=text-gray-500>No content');const we=r=>{const i=[],p=new Map,b=new Map;for(const[c,C]of r){const y=crypto.randomUUID();i.push(c),p.set(c,{uqid:y,name:c,node:C}),b.set(c,y)}return{keys:i,maps:p,name:b}},Be=r=>{const i=T.createMemo(()=>we(r.tabs));let p;const b=()=>{const E=p;if(!E)return{w:0,h:0,x:0,y:0};const s=E.getBoundingClientRect(),o=r.pad||{t:0,b:0,l:0,r:0};return{w:s.width-(o.l+o.r),h:s.height-(o.t+o.b),x:s.left+o.l,y:s.top+o.t}},{tabsetsRef:c,slidersRef:C,sliders:y,tabsets:te,hoverElementRef:re,onDragEnd:k,onDragOver:ne,onDragStart:K,onDragEnter:j,onDragLeave:F,onDrop:B,dragging:U,panelsRef:A,onPointerDown:G,handleNavbarDragOver:R,updateActiveTab:q,rootSplitHoverEl:V,handleRootSplit:ae,tabsRef:Q,isUpdating:I}=ve({tabOutput:i(),rootId:r.rootId||"dynamix-layout-root",updateJSON:r.updateJSON,enableTabbar:r.enableTabbar===void 0?!0:r.enableTabbar,layoutTree:r.layoutTree,tabHeadHeight:r.tabHeadHeight||m.DynamixLayoutCore._minH,dimensions:b,sliderUpdateTimeout:r.sliderUpdateTimeout||2,windowResizeTimeout:r.windowResizeTimeout||2,bondWidth:r.bondWidth||m.DynamixLayoutCore._bond,minTabHeight:r.minTabHeight||m.DynamixLayoutCore._minH,minTabWidth:r.minTabWidth||m.DynamixLayoutCore._minW,disableSliderTimeout:r.disableSliderTimeout===void 0?!0:r.disableSliderTimeout,disableResizeTimeout:r.disableResizeTimeout===void 0?!0:r.disableResizeTimeout,hoverElementStyles:r.hoverElementStyles}),oe=r.WrapTabPanel||ye,Z=r.WrapTabHead||me,ie=r.WrapTabLabel||fe,H=r.WrapTabBody||he,L=r.SliderElement||be,se=r.HoverElement||pe;return(()=>{var E=_e(),s=p;return typeof s=="function"?a.use(s,E):p=E,a.spread(E,a.mergeProps({get id(){return r.rootId||"dynamix-layout-root"}},r,{get"data-testid"(){return r.rootId||"dynamix-layout-root"},get class(){return U()?"is-dragging":""},get style(){return{position:"relative",width:"100%",height:"100%",overflow:"hidden",...r.style}}}),!1,!0),a.insert(E,a.createComponent(T.For,{get each(){return Array.from(te().values())},children:o=>[a.createComponent(oe,{ref:u=>{const x=o.uidNode;u?A.set(x,u):A.delete(x)},onDragEnd:k,onDragOver:ne,onDragEnter:j,onDragLeave:F,onDrop:B,get"data-uid"(){return o.uidNode},get"data-type"(){return o.typNode},get class(){return"hide-scrollbar DefaultWrapTabPanel "+(r.tabPanelElementClass||"")},get style(){return{position:"absolute",...r.tabPanelElementStyles,width:`${o.nodDims.w}px`,height:`${o.nodDims.h}px`,left:`${o.nodDims.x}px`,top:`${o.nodDims.y}px`,"background-color":"transparent"}}}),a.createComponent(Z,{get draggable(){return!I()},get"data-uid"(){return o.uidNode},"data-type":"tabset",onDragOver:R,onDragStart:K,onDragEnd:k,onDragEnter:j,onDragLeave:F,onDrop:B,ref:u=>{const x=o.uidNode;u?c.set(x,u):c.delete(x)},get class(){return"hide-scrollbar "+(r.tabHeadElementClass||"")},get style(){return{...r.tabHeadElementStyles,position:"absolute","z-index":99,width:`${o.nodDims.w}px`,height:`${r.tabHeadHeight||m.DynamixLayoutCore._minH}px`,left:`${o.nodDims.x}px`,top:`${o.nodDims.y}px`,cursor:I()?"wait":"pointer"}},get children(){return a.createComponent(T.For,{get each(){return o.nodKids},children:u=>a.createComponent(ie,{get"data-uid"(){return u.uidNode},"data-type":"tab",onDragStart:K,onDragEnd:k,get draggable(){return!I()},get active(){return!!u.nodOpen},get class(){return"hide-scrollbar "+(r.tabLabelElementClass||"")},get style(){return{cursor:I()?"wait":"pointer",...r.tabLabelElementStyles}},onClick:q,get children(){return a.memo(()=>!!r.tabNames)()&&r.tabNames.get(u.nodName)||u.nodName}})})}})]}),null),a.insert(E,a.createComponent(T.For,{get each(){return i().keys},children:o=>{const u=i().maps.get(o)?.uqid;return a.createComponent(H,{id:u,draggable:!1,"data-uid":u,get class(){return"hide-scrollbar "+(r.tabBodyElementClass||"")},get style(){return{position:"absolute","z-index":90,"overscroll-behavior":"contain",...r.tabBodyElementStyles}},ref:x=>{u&&(x?Q.set(u,x):Q.delete(u))},get children(){return i().maps.get(o)?.node||ke()}})}}),null),a.insert(E,a.createComponent(T.For,{get each(){return Array.from(y().values())},children:o=>a.createComponent(L,{get id(){return o.uidNode},get"data-uid"(){return o.uidNode},get direction(){return o.nodeDir},onPointerDown:G,get class(){return"hide-scrollbar "+(r.sliderElementClass||"")},ref:u=>{const x=o.uidNode;u?C.set(x,u):C.delete(x)},get style(){return{width:`${o.nodDims.w}px`,height:`${o.nodDims.h}px`,left:`${o.nodDims.x}px`,top:`${o.nodDims.y}px`,cursor:o.nodeDir?"ns-resize":"ew-resize",...r.sliderElementStyles}}})}),null),a.insert(E,a.createComponent(se,{get class(){return"hide-scrollbar "+(r.hoverElementClass||"")},get style(){return{...r.hoverElementStyles}},ref:o=>re.current=o}),null),a.insert(E,a.createComponent(T.For,{each:["left","right","top","bottom"],children:(o,u)=>a.createComponent(xe,{onDragOver:ae,onDragEnd:k,onDragEnter:j,onDragLeave:F,onDrop:B,get"data-uid"(){return r.rootId||"dynamix-layout-root"},"data-area":o,get class(){return"hide-scrollbar "+(r.RootSplitterHoverElClass||"")},ref:x=>{x&&(V[u()]=x)},get style(){return{...r.RootSplitterHoverElStyles}},area:o,size:{h:"25%",w:"8px"}})}),null),E})()};exports.DefaultHoverElement=pe;exports.DefaultSliderElement=be;exports.DefaultWrapTabBody=he;exports.DefaultWrapTabHead=me;exports.DefaultWrapTabLabel=fe;exports.DefaultWrapTabPanel=ye;exports.DynamixLayout=Be;exports.RootSplitterHoverEl=xe;exports.getTabOutput=we;exports.useDynamixLayout=ve;

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,34 +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>;
-    setIsUpdating: Setter<boolean>;
-    setDragging: Setter<boolean>;
-    setTabsets: Setter<Map<string, NodeOptions>>;
-    setSliders: Setter<Map<string, NodeOptions>>;
-    setLayoutJSON: Setter<LayoutTree | undefined>;
-    onDragStart: (e: DragEvent) => void;
-    onDragOver: (e: DragEvent) => void;
-    onDragEnd: (e: DragEvent) => 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;
-};