horizon-layout 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -0
- package/dist/horizon-layout.css +28 -28
- package/package.json +13 -10
package/README.md
CHANGED
|
@@ -1,9 +1,30 @@
|
|
|
1
1
|
# HorizonLayout
|
|
2
2
|
|
|
3
|
+
<div align="center">
|
|
4
|
+
<a href="https://www.npmjs.com/package/horizon-layout">
|
|
5
|
+
<img src="https://img.shields.io/npm/v/horizon-layout.svg" alt="npm version" />
|
|
6
|
+
</a>
|
|
7
|
+
<a href="https://www.npmjs.com/package/horizon-layout">
|
|
8
|
+
<img src="https://img.shields.io/npm/l/horizon-layout.svg" alt="npm license" />
|
|
9
|
+
</a>
|
|
10
|
+
</div>
|
|
11
|
+
|
|
3
12
|
### 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.
|
|
4
13
|
|
|
5
14
|
---
|
|
6
15
|
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
Install the package from npm:
|
|
19
|
+
|
|
20
|
+
```sh
|
|
21
|
+
npm install horizon-layout
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Requires Svelte 5 as a peer dependency.
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
7
28
|
## Quick start
|
|
8
29
|
|
|
9
30
|
```svelte
|
package/dist/horizon-layout.css
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--hl-background:
|
|
3
|
-
--hl-foreground:
|
|
4
|
-
--hl-primary:
|
|
5
|
-
--hl-popover:
|
|
6
|
-
--hl-border:
|
|
7
|
-
--hl-card:
|
|
8
|
-
--hl-secondary:
|
|
9
|
-
--hl-muted-foreground:
|
|
10
|
-
--hl-ring:
|
|
11
|
-
--hl-accent:
|
|
12
|
-
--hl-radius: 0.
|
|
2
|
+
--hl-background: #111624;
|
|
3
|
+
--hl-foreground: #f1f5f9;
|
|
4
|
+
--hl-primary: #598dff;
|
|
5
|
+
--hl-popover: #171e32;
|
|
6
|
+
--hl-border: #212c47;
|
|
7
|
+
--hl-card: #141a2b;
|
|
8
|
+
--hl-secondary: #192138;
|
|
9
|
+
--hl-muted-foreground: #8192b0;
|
|
10
|
+
--hl-ring: #598dff;
|
|
11
|
+
--hl-accent: #1e2944;
|
|
12
|
+
--hl-radius: 0.375rem;
|
|
13
13
|
--hl-glass-blur: 14px;
|
|
14
|
-
--hl-tab-inactive-color:
|
|
15
|
-
--hl-drop-hint-border: color-mix(in oklch,
|
|
16
|
-
--hl-drop-hint-bg: color-mix(in oklch,
|
|
14
|
+
--hl-tab-inactive-color: color-mix(in oklch, #8192b0 88%, transparent);
|
|
15
|
+
--hl-drop-hint-border: color-mix(in oklch, #598dff 80%, transparent);
|
|
16
|
+
--hl-drop-hint-bg: color-mix(in oklch, #598dff 12%, transparent);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
.light {
|
|
20
|
-
--hl-background:
|
|
21
|
-
--hl-foreground:
|
|
22
|
-
--hl-primary:
|
|
23
|
-
--hl-popover:
|
|
24
|
-
--hl-border: oklch(0.
|
|
25
|
-
--hl-card:
|
|
26
|
-
--hl-secondary:
|
|
27
|
-
--hl-muted-foreground:
|
|
28
|
-
--hl-ring:
|
|
29
|
-
--hl-accent:
|
|
30
|
-
--hl-tab-inactive-color:
|
|
31
|
-
--hl-drop-hint-border: color-mix(in oklch,
|
|
32
|
-
--hl-drop-hint-bg: color-mix(in oklch,
|
|
20
|
+
--hl-background: #f8fafc;
|
|
21
|
+
--hl-foreground: #0f172a;
|
|
22
|
+
--hl-primary: #265de9;
|
|
23
|
+
--hl-popover: #ffffff;
|
|
24
|
+
--hl-border: oklch(0.9288 0.0126 255.5);
|
|
25
|
+
--hl-card: #ffffff;
|
|
26
|
+
--hl-secondary: #f1f5f9;
|
|
27
|
+
--hl-muted-foreground: #59687f;
|
|
28
|
+
--hl-ring: #265de9;
|
|
29
|
+
--hl-accent: #e2e8f0;
|
|
30
|
+
--hl-tab-inactive-color: color-mix(in oklch, #59687f 93%, transparent);
|
|
31
|
+
--hl-drop-hint-border: color-mix(in oklch, #265de9 80%, transparent);
|
|
32
|
+
--hl-drop-hint-bg: color-mix(in oklch, #265de9 12%, transparent);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.horizon-layout {
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
.horizon-layout-split__ratio {
|
|
153
153
|
position: absolute;
|
|
154
154
|
padding: 2px 7px;
|
|
155
|
-
border-radius: 0.
|
|
155
|
+
border-radius: 0.125rem;
|
|
156
156
|
background: var(--hl-popover);
|
|
157
157
|
border: 1px solid var(--hl-border);
|
|
158
158
|
color: var(--hl-primary);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "horizon-layout",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"svelte"
|
|
6
6
|
],
|
|
@@ -21,6 +21,9 @@
|
|
|
21
21
|
],
|
|
22
22
|
"types": "./dist/index.d.ts",
|
|
23
23
|
"svelte": "./dist/index.js",
|
|
24
|
+
"imports": {
|
|
25
|
+
"#lib/*": "./src/lib/*"
|
|
26
|
+
},
|
|
24
27
|
"exports": {
|
|
25
28
|
".": {
|
|
26
29
|
"types": "./dist/index.d.ts",
|
|
@@ -40,18 +43,18 @@
|
|
|
40
43
|
"format": "oxfmt ."
|
|
41
44
|
},
|
|
42
45
|
"devDependencies": {
|
|
43
|
-
"@sveltejs/adapter-static": "^
|
|
44
|
-
"@sveltejs/kit": "^
|
|
45
|
-
"@sveltejs/package": "^
|
|
46
|
-
"@sveltejs/vite-plugin-svelte": "^7.3.
|
|
47
|
-
"@types/node": "^26.6.
|
|
48
|
-
"oxfmt": "^0.
|
|
49
|
-
"oxlint": "^1.
|
|
50
|
-
"publint": "^0.3.
|
|
46
|
+
"@sveltejs/adapter-static": "^4.0.0",
|
|
47
|
+
"@sveltejs/kit": "^3.0.0",
|
|
48
|
+
"@sveltejs/package": "^3.0.0",
|
|
49
|
+
"@sveltejs/vite-plugin-svelte": "^7.3.1",
|
|
50
|
+
"@types/node": "^26.6.4",
|
|
51
|
+
"oxfmt": "^0.71.0",
|
|
52
|
+
"oxlint": "^1.86.0",
|
|
53
|
+
"publint": "^0.3.25",
|
|
51
54
|
"svelte": "^5.57.1",
|
|
52
55
|
"svelte-check": "^4.7.6",
|
|
53
56
|
"typescript": "^6.0.3",
|
|
54
|
-
"vite": "^8.3.
|
|
57
|
+
"vite": "^8.3.2"
|
|
55
58
|
},
|
|
56
59
|
"peerDependencies": {
|
|
57
60
|
"svelte": "^5.0.0"
|