horizon-layout 1.0.2 → 1.0.4

package/README.md

@@ -1,9 +1,30 @@
 # HorizonLayout
 
+<div align="center">
+	<a href="https://www.npmjs.com/package/horizon-layout">
+		<img src="https://img.shields.io/npm/v/horizon-layout.svg" alt="npm version" />
+	</a>
+	<a href="https://www.npmjs.com/package/horizon-layout">
+		<img src="https://img.shields.io/npm/l/horizon-layout.svg" alt="npm license" />
+	</a>
+</div>
+
 ### A headless, fully keyboard-accessible docking layout for Svelte 5. Users can drag tabs between panes, resize splits, and pop views out into separate browser windows, all described by a plain serialisable config object that you bind to and persist however you like.
 
 ---
 
+## Installation
+
+Install the package from npm:
+
+```sh
+npm install horizon-layout
+```
+
+Requires Svelte 5 as a peer dependency.
+
+---
+
 ## Quick start
 
 ```svelte

package/dist/HorizonLayout.svelte

@@ -22,7 +22,7 @@
 		validateConfig
 	} from './utils.js';
 	import { DEFAULT_MIN_WIDTH_RATIO, DEFAULT_MIN_HEIGHT_RATIO } from './internal-utils.js';
-	import { dropTargetType } from './internal-utils.js';
+	import { dropTargetType, roundSplitPoint } from './internal-utils.js';
 	import type { DropTarget } from './internal-types.js';
 
 	interface Popout {
@@ -364,7 +364,7 @@
 		const minRatio = split.direction === 'horizontal' ? minWidthRatio : minHeightRatio;
 		const min = (split.splitPoints[index - 1] ?? 0) + minRatio;
 		const max = (split.splitPoints[index + 1] ?? 1) - minRatio;
-		const clamped = Number(Math.min(Math.max(ratio, min), max).toFixed(4));
+		const clamped = roundSplitPoint(Math.min(Math.max(ratio, min), max));
 		if (clamped !== split.splitPoints[index]) split.splitPoints[index] = clamped;
 	}
 

package/dist/horizon-layout.css

@@ -1,35 +1,35 @@
 :root {
-	--hl-background: oklch(0.09 0.02 264);
-	--hl-foreground: oklch(0.97 0.01 255);
-	--hl-primary: oklch(0.65 0.18 277);
-	--hl-popover: oklch(0.12 0.02 264 / 0.78);
-	--hl-border: oklch(0.28 0.05 266 / 0.55);
-	--hl-card: oklch(0.13 0.02 264 / 0.62);
-	--hl-secondary: oklch(0.22 0.03 265 / 0.55);
-	--hl-muted-foreground: oklch(0.68 0.03 255);
-	--hl-ring: oklch(0.65 0.18 277 / 0.55);
-	--hl-accent: oklch(0.22 0.05 266 / 0.65);
-	--hl-radius: 0.5rem;
+	--hl-background: #111624;
+	--hl-foreground: #f1f5f9;
+	--hl-primary: #598dff;
+	--hl-popover: #171e32;
+	--hl-border: #212c47;
+	--hl-card: #141a2b;
+	--hl-secondary: #192138;
+	--hl-muted-foreground: #8192b0;
+	--hl-ring: #598dff;
+	--hl-accent: #1e2944;
+	--hl-radius: 0.375rem;
 	--hl-glass-blur: 14px;
-	--hl-tab-inactive-color: oklch(0.68 0.03 255 / 0.65);
-	--hl-drop-hint-border: color-mix(in oklch, oklch(0.65 0.18 277) 80%, transparent);
-	--hl-drop-hint-bg: color-mix(in oklch, oklch(0.65 0.18 277) 12%, transparent);
+	--hl-tab-inactive-color: color-mix(in oklch, #8192b0 88%, transparent);
+	--hl-drop-hint-border: color-mix(in oklch, #598dff 80%, transparent);
+	--hl-drop-hint-bg: color-mix(in oklch, #598dff 12%, transparent);
 }
 
 .light {
-	--hl-background: oklch(0.96 0.01 264);
-	--hl-foreground: oklch(0.13 0.02 264);
-	--hl-primary: oklch(0.55 0.18 277);
-	--hl-popover: oklch(0.98 0.01 264 / 0.84);
-	--hl-border: oklch(0.82 0.02 264 / 0.65);
-	--hl-card: oklch(1 0 0 / 0.72);
-	--hl-secondary: oklch(0.97 0.01 264 / 0.65);
-	--hl-muted-foreground: oklch(0.42 0.04 255);
-	--hl-ring: oklch(0.55 0.18 277 / 0.55);
-	--hl-accent: oklch(0.88 0.025 264 / 0.72);
-	--hl-tab-inactive-color: oklch(0.42 0.04 255 / 0.65);
-	--hl-drop-hint-border: color-mix(in oklch, oklch(0.55 0.18 277) 80%, transparent);
-	--hl-drop-hint-bg: color-mix(in oklch, oklch(0.55 0.18 277) 12%, transparent);
+	--hl-background: #f8fafc;
+	--hl-foreground: #0f172a;
+	--hl-primary: #265de9;
+	--hl-popover: #ffffff;
+	--hl-border: oklch(0.9288 0.0126 255.5);
+	--hl-card: #ffffff;
+	--hl-secondary: #f1f5f9;
+	--hl-muted-foreground: #59687f;
+	--hl-ring: #265de9;
+	--hl-accent: #e2e8f0;
+	--hl-tab-inactive-color: color-mix(in oklch, #59687f 93%, transparent);
+	--hl-drop-hint-border: color-mix(in oklch, #265de9 80%, transparent);
+	--hl-drop-hint-bg: color-mix(in oklch, #265de9 12%, transparent);
 }
 
 .horizon-layout {
@@ -152,7 +152,7 @@
 .horizon-layout-split__ratio {
 	position: absolute;
 	padding: 2px 7px;
-	border-radius: 0.25rem;
+	border-radius: 0.125rem;
 	background: var(--hl-popover);
 	border: 1px solid var(--hl-border);
 	color: var(--hl-primary);

package/dist/internal-utils.d.ts

@@ -2,5 +2,6 @@ import type { DropTarget } from './internal-types.ts';
 import type { Modifier } from './types.ts';
 export declare const DEFAULT_MIN_WIDTH_RATIO = 0.1;
 export declare const DEFAULT_MIN_HEIGHT_RATIO = 0.2;
+export declare function roundSplitPoint(ratio: number): number;
 export declare function getModifier(event: KeyboardEvent): Modifier | null;
 export declare function dropTargetType(target: DropTarget): 'side' | 'tab';

package/dist/internal-utils.js

@@ -1,5 +1,10 @@
 export const DEFAULT_MIN_WIDTH_RATIO = 0.1;
 export const DEFAULT_MIN_HEIGHT_RATIO = 0.2;
+/// rounds a split point to the precision it is stored with, so that values
+/// computed with floating-point arithmetic can be compared reliably
+export function roundSplitPoint(ratio) {
+    return Number(ratio.toFixed(4));
+}
 /// returns the modifier (ctrl, alt, shift, or a combination of them)
 /// associated with the keyboard event, or null if no modifier keys were pressed
 export function getModifier(event) {

package/dist/utils.js

@@ -1,5 +1,5 @@
 import { SvelteMap } from 'svelte/reactivity';
-import { DEFAULT_MIN_WIDTH_RATIO, DEFAULT_MIN_HEIGHT_RATIO } from "./internal-utils.js";
+import { DEFAULT_MIN_WIDTH_RATIO, DEFAULT_MIN_HEIGHT_RATIO, roundSplitPoint } from "./internal-utils.js";
 /// Remove a tab group that has become empty, then collapse any resulting
 /// single-child splits up the tree.
 export function simplifyTabGroup(tabGroup, nodeParentMap, config) {
@@ -115,11 +115,11 @@ export function areConfigsEquivalent(config1, config2) {
 /// split-point constraints are checked with the same thresholds.
 export function validateConfig(config, views, options = {}) {
     const { minWidthRatio = DEFAULT_MIN_WIDTH_RATIO, minHeightRatio = DEFAULT_MIN_HEIGHT_RATIO } = options;
-    if (config.maximizedView && !views.get(config.maximizedView)) {
+    if (config.maximizedView && !views.has(config.maximizedView)) {
         throw new Error(`unknown maximizedView id "${config.maximizedView}"`);
     }
     for (const id of config.popouts ?? []) {
-        if (!views.get(id))
+        if (!views.has(id))
             throw new Error(`unknown popout id "${id}"`);
     }
     if (!config.root)
@@ -130,7 +130,7 @@ export function validateConfig(config, views, options = {}) {
             throw new Error('activeTabIndex out of range');
         }
         for (const id of tabGroup.tabs) {
-            if (!views.get(id))
+            if (!views.has(id))
                 throw new Error(`unknown tab id "${id}"`);
             if (seenIds.has(id))
                 throw new Error(`duplicate tab id "${id}"`);
@@ -143,9 +143,9 @@ export function validateConfig(config, views, options = {}) {
         }
         const minRatio = split.direction === 'horizontal' ? minWidthRatio : minHeightRatio;
         for (let i = 0; i < split.splitPoints.length; i++) {
-            const point = split.splitPoints[i];
+            const point = roundSplitPoint(split.splitPoints[i]);
             const prev = split.splitPoints[i - 1] ?? 0;
-            if (point < prev + minRatio || point > 1 - minRatio) {
+            if (point < roundSplitPoint(prev + minRatio) || point > roundSplitPoint(1 - minRatio)) {
                 throw new Error('splitPoints violate minRatio constraints');
             }
         }
@@ -159,12 +159,10 @@ export function validateConfig(config, views, options = {}) {
     validateNode(config.root);
 }
 function parseNodeConfig(object, path) {
-    try {
-        return parseSplitConfig(object, path);
-    }
-    catch {
-        return parseTabGroupConfig(object, path);
-    }
+    if (typeof object !== 'object' || object === null)
+        throw new Error(`${path}: expected an object`);
+    const isSplit = 'direction' in object || 'views' in object || 'splitPoints' in object;
+    return isSplit ? parseSplitConfig(object, path) : parseTabGroupConfig(object, path);
 }
 function parseSplitConfig(object, path) {
     if (typeof object !== 'object' || object === null)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "horizon-layout",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"keywords": [
 		"svelte"
 	],
@@ -21,6 +21,9 @@
 	],
 	"types": "./dist/index.d.ts",
 	"svelte": "./dist/index.js",
+	"imports": {
+		"#lib/*": "./src/lib/*"
+	},
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
@@ -37,21 +40,23 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "oxlint . && oxfmt --check .",
+		"test": "vitest run",
 		"format": "oxfmt ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.70.3",
-		"@sveltejs/package": "^2.5.8",
-		"@sveltejs/vite-plugin-svelte": "^7.3.0",
-		"@types/node": "^26.6.2",
-		"oxfmt": "^0.68.0",
-		"oxlint": "^1.83.0",
-		"publint": "^0.3.24",
+		"@sveltejs/adapter-static": "^4.0.0",
+		"@sveltejs/kit": "^3.0.0",
+		"@sveltejs/package": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^7.3.1",
+		"@types/node": "^26.6.4",
+		"oxfmt": "^0.71.0",
+		"oxlint": "^1.86.0",
+		"publint": "^0.3.25",
 		"svelte": "^5.57.1",
 		"svelte-check": "^4.7.6",
 		"typescript": "^6.0.3",
-		"vite": "^8.3.0"
+		"vite": "^8.3.2",
+		"vitest": "^5.0.3"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"