horizon-layout 1.0.0

package/dist/horizon-layout.css

@@ -0,0 +1,459 @@
+: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-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);
+}
+
+.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);
+}
+
+.horizon-layout {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	background: var(--hl-background);
+	font-family: system-ui, sans-serif;
+	font-size: 0.8125rem;
+	color: var(--hl-foreground);
+}
+
+.horizon-layout__content {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.horizon-layout__content--maximized {
+	animation: hl-fade-in 80ms ease;
+}
+
+.horizon-layout-split {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+}
+
+.horizon-layout-split--vertical {
+	flex-direction: column;
+}
+
+.horizon-layout-split__pane {
+	min-width: 0;
+	min-height: 0;
+	overflow: hidden;
+}
+
+.horizon-layout-split__pane--horizontal {
+	height: 100%;
+}
+
+.horizon-layout-split__pane--vertical {
+	width: 100%;
+}
+
+.horizon-layout-split__resizer {
+	flex: 0 0 0px;
+	position: relative;
+	z-index: 1;
+}
+
+.horizon-layout-split__resizer--horizontal {
+	height: 100%;
+}
+
+.horizon-layout-split__resizer--vertical {
+	width: 100%;
+}
+
+.horizon-layout-split__resizer-handle {
+	position: absolute;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 2;
+	touch-action: none;
+	outline: none;
+}
+
+.horizon-layout-split__resizer--horizontal .horizon-layout-split__resizer-handle {
+	cursor: col-resize;
+	top: 0;
+	bottom: 0;
+	left: -6px;
+	width: 12px;
+}
+
+.horizon-layout-split__resizer--vertical .horizon-layout-split__resizer-handle {
+	cursor: row-resize;
+	left: 0;
+	right: 0;
+	top: -6px;
+	height: 12px;
+}
+
+.horizon-layout-split__resizer-handle::before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	border-radius: 100vmax;
+	background: var(--hl-primary);
+	opacity: 0;
+	transition: opacity 100ms ease;
+}
+
+.horizon-layout-split__resizer--horizontal .horizon-layout-split__resizer-handle::before {
+	width: 2px;
+	height: calc(100% - 16px);
+}
+
+.horizon-layout-split__resizer--vertical .horizon-layout-split__resizer-handle::before {
+	height: 2px;
+	width: calc(100% - 16px);
+}
+
+.horizon-layout-split__resizer-handle--hover::before,
+.horizon-layout-split__resizer-handle--active::before {
+	opacity: 1;
+}
+
+.horizon-layout-split__resizer-handle:focus-visible::before {
+	opacity: 1;
+	background: var(--hl-ring);
+}
+
+.horizon-layout-split__ratio {
+	position: absolute;
+	padding: 2px 7px;
+	border-radius: 0.25rem;
+	background: var(--hl-popover);
+	border: 1px solid var(--hl-border);
+	color: var(--hl-primary);
+	font-size: 0.7rem;
+	font-variant-numeric: tabular-nums;
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 60ms linear;
+	white-space: nowrap;
+	z-index: 3;
+	backdrop-filter: blur(var(--hl-glass-blur));
+}
+
+.horizon-layout-split__ratio--horizontal {
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.horizon-layout-split__ratio--vertical {
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.horizon-layout-split__ratio--active {
+	opacity: 1;
+}
+
+.horizon-layout-tabgroup {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	min-width: 0;
+	min-height: 0;
+	overflow: hidden;
+	box-sizing: border-box;
+	border: 1px solid var(--hl-border);
+	background: var(--hl-card);
+}
+
+.horizon-layout-tabgroup__tab-bar {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	align-items: stretch;
+	justify-content: space-between;
+	padding-right: 4px;
+	background: var(--hl-background);
+	border-bottom: 1px solid var(--hl-border);
+	min-height: 32px;
+	flex-shrink: 0;
+}
+
+.horizon-layout-tabgroup__tabs {
+	display: flex;
+	align-items: stretch;
+	flex: 1 1 auto;
+	min-width: 0;
+	overflow-x: auto;
+	overflow-y: hidden;
+	scrollbar-width: none;
+	outline: none;
+}
+
+.horizon-layout-tabgroup__tab {
+	position: relative;
+	display: inline-flex;
+	flex: 0 0 auto;
+	align-items: center;
+	gap: 0.35rem;
+	min-height: 32px;
+	max-width: 13rem;
+	padding: 0 0.65rem;
+	margin-top: 4px;
+	margin-bottom: 4px;
+	background: transparent;
+	border-radius: var(--hl-radius);
+	color: var(--hl-tab-inactive-color);
+	user-select: none;
+	touch-action: none;
+	outline: none;
+	transition:
+		color 60ms ease,
+		background 60ms ease;
+}
+
+.horizon-layout-tabgroup__tab:hover {
+	color: var(--hl-muted-foreground);
+	background: color-mix(in oklch, var(--hl-muted-foreground) 8%, transparent);
+}
+
+.horizon-layout-tabgroup__tab--active {
+	background: var(--hl-secondary);
+	color: var(--hl-foreground);
+	font-weight: 500;
+}
+
+.light .horizon-layout-tabgroup__tab--active {
+	background: color-mix(in oklch, var(--hl-border) 40%, transparent);
+}
+
+.light .horizon-layout-tabgroup__tab:hover {
+	background: color-mix(in oklch, var(--hl-border) 18%, transparent);
+}
+
+.horizon-layout-tabgroup__tab-active-fill {
+	position: absolute;
+	bottom: -1px;
+	left: 0;
+	right: 0;
+	height: 1px;
+	background: var(--hl-secondary);
+	pointer-events: none;
+}
+
+.horizon-layout-tabgroup__tabs:focus-visible .horizon-layout-tabgroup__tab--active {
+	outline: 2px solid var(--hl-ring);
+	outline-offset: -2px;
+	border-radius: 4px;
+	background: var(--hl-accent);
+	color: var(--hl-foreground);
+}
+
+.horizon-layout-tabgroup__tabs:focus-visible
+	.horizon-layout-tabgroup__tab--active
+	.horizon-layout-tabgroup__tab-active-fill {
+	background: var(--hl-accent);
+}
+
+.horizon-layout-tabgroup__tab-title {
+	flex: 1 1 auto;
+	min-width: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 0.74rem;
+	letter-spacing: 0.01em;
+}
+
+.horizon-layout-tabgroup__tab-controls {
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+	flex-shrink: 0;
+}
+
+.horizon-layout-tabgroup__tab-control {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.horizon-layout-tabgroup__tab-drop-hint {
+	flex: 0 0 2px;
+	align-self: stretch;
+	border-radius: 2px;
+	background: transparent;
+	transition: background 40ms ease;
+	pointer-events: none;
+	position: relative;
+}
+
+.horizon-layout-tabgroup__tab-drop-hint--hover {
+	background: var(--hl-primary);
+}
+
+.horizon-layout-tabgroup__tab-drop-zone {
+	flex: 0 0 0px;
+	align-self: stretch;
+	position: relative;
+	pointer-events: none;
+	z-index: 3;
+}
+
+.horizon-layout-tabgroup__tab-drop-zone::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: -28px;
+	right: -28px;
+	pointer-events: all;
+}
+
+.horizon-layout-tabgroup__tab-drop-hint--end {
+	flex: 0 0 2px;
+}
+
+.horizon-layout-tabgroup__tab-drop-zone--end {
+	flex: 1 1 auto;
+	min-width: 48px;
+}
+
+.horizon-layout-tabgroup__tab-drop-zone--end::before {
+	inset: 0;
+}
+
+.horizon-layout-tabgroup__controls {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	flex-shrink: 0;
+	padding-left: 4px;
+}
+
+.horizon-layout-tabgroup__control {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.horizon-layout-tabgroup__body {
+	position: relative;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+
+.horizon-layout-tabgroup__content {
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	background: var(--hl-card);
+}
+
+.horizon-layout-tabgroup__drop-zones {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+}
+
+.horizon-layout-tabgroup__drop-zone {
+	position: absolute;
+	inset: 0;
+	pointer-events: all;
+}
+
+.horizon-layout-tabgroup__drop-zone--top {
+	clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
+}
+
+.horizon-layout-tabgroup__drop-zone--right {
+	clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
+}
+
+.horizon-layout-tabgroup__drop-zone--bottom {
+	clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
+}
+
+.horizon-layout-tabgroup__drop-zone--left {
+	clip-path: polygon(0% 100%, 0% 0%, 50% 50%);
+}
+
+.horizon-layout-tabgroup__drop-hint {
+	position: absolute;
+	z-index: 2;
+	pointer-events: none;
+	border: 2px solid var(--hl-drop-hint-border);
+	border-radius: var(--hl-radius);
+	background: var(--hl-drop-hint-bg);
+	animation: hl-fade-in 40ms ease;
+}
+
+.horizon-layout-tabgroup__drop-hint--top {
+	inset: 2px 2px calc(50% + 2px) 2px;
+}
+
+.horizon-layout-tabgroup__drop-hint--right {
+	inset: 2px 2px 2px 50%;
+}
+
+.horizon-layout-tabgroup__drop-hint--bottom {
+	inset: 50% 2px 2px 2px;
+}
+
+.horizon-layout-tabgroup__drop-hint--left {
+	inset: 2px 50% 2px 2px;
+}
+
+.horizon-layout__popout {
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	background: var(--hl-background);
+	color: var(--hl-foreground);
+	font-size: 0.8125rem;
+}
+
+.horizon-layout__popout .horizon-layout__content {
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+
+@keyframes hl-fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as HorizonLayout } from './HorizonLayout.svelte';
+export type * from './types.ts';
+export * from './utils.ts';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default as HorizonLayout } from './HorizonLayout.svelte';
+export * from "./utils.js";

package/dist/internal-types.d.ts

@@ -0,0 +1,8 @@
+export type DropSide = 'top' | 'right' | 'bottom' | 'left';
+export type DropTarget = {
+    side: DropSide;
+    tabIndex?: never;
+} | {
+    tabIndex: number;
+    side?: never;
+};

package/dist/internal-types.js

@@ -0,0 +1 @@
+export {};

package/dist/internal-utils.d.ts

@@ -0,0 +1,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 getModifier(event: KeyboardEvent): Modifier | null;
+export declare function dropTargetType(target: DropTarget): 'side' | 'tab';

package/dist/internal-utils.js

@@ -0,0 +1,25 @@
+export const DEFAULT_MIN_WIDTH_RATIO = 0.1;
+export const DEFAULT_MIN_HEIGHT_RATIO = 0.2;
+/// 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) {
+    if (event.ctrlKey && event.altKey && event.shiftKey)
+        return 'ctrl+alt+shift';
+    if (event.altKey && event.shiftKey)
+        return 'alt+shift';
+    if (event.ctrlKey && event.shiftKey)
+        return 'ctrl+shift';
+    if (event.ctrlKey && event.altKey)
+        return 'ctrl+alt';
+    if (event.shiftKey)
+        return 'shift';
+    if (event.ctrlKey)
+        return 'ctrl';
+    if (event.altKey)
+        return 'alt';
+    return null;
+}
+/// returns 'side' if the target is a side drop target, or 'tab' if it's a tab drop target
+export function dropTargetType(target) {
+    return target.side ? 'side' : 'tab';
+}

package/dist/types.d.ts

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+export type Id<T extends string = string> = T extends '' ? never : T;
+export type SplitDirection = 'horizontal' | 'vertical';
+export interface View {
+    title: string;
+    snippet: Snippet;
+    tabControls?: Snippet<[Id]>[];
+}
+export interface SplitConfig {
+    direction: SplitDirection;
+    views: [NodeConfig, NodeConfig, ...NodeConfig[]];
+    splitPoints: [number, ...number[]];
+}
+export interface TabGroupConfig {
+    tabs: [Id, ...Id[]];
+    activeTabIndex: number;
+}
+export type NodeConfig = SplitConfig | TabGroupConfig;
+export interface LayoutConfig {
+    root?: NodeConfig;
+    maximizedView?: Id;
+    popouts?: Id[];
+}
+export type Modifier = 'ctrl' | 'alt' | 'shift' | 'ctrl+alt' | 'ctrl+shift' | 'alt+shift' | 'ctrl+alt+shift';
+export interface KeyboardShortcut {
+    modifier?: Modifier;
+    key: string;
+}
+export interface KeyboardControl<T> {
+    shortcuts: KeyboardShortcut[];
+    action: (data: T, event: KeyboardEvent) => void;
+}
+export interface KeyboardControls {
+    splitControls?: KeyboardControl<{
+        config: SplitConfig;
+        index: number;
+    }>[];
+    tabGroupControls?: KeyboardControl<TabGroupConfig>[];
+}
+export type ParentEntry = {
+    parent: SplitConfig;
+    index: number;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,15 @@
+import { SvelteMap } from 'svelte/reactivity';
+import type { Id, LayoutConfig, NodeConfig, ParentEntry, TabGroupConfig } from './types.ts';
+export declare function simplifyTabGroup(tabGroup: TabGroupConfig, nodeParentMap: SvelteMap<NodeConfig, ParentEntry>, config: LayoutConfig): void;
+export declare function nodeConfigType(config: NodeConfig): 'split' | 'tabGroup';
+export declare function buildNodeParentMap(root: NodeConfig): SvelteMap<NodeConfig, ParentEntry>;
+export declare function areConfigsEquivalent(config1: LayoutConfig, config2: LayoutConfig): boolean;
+export interface ValidateConfigOptions {
+    /** Minimum allowed pane width as a fraction of its split container. Default: DEFAULT_MIN_WIDTH_RATIO */
+    minWidthRatio?: number;
+    /** Minimum allowed pane height as a fraction of its split container. Default: DEFAULT_MIN_HEIGHT_RATIO */
+    minHeightRatio?: number;
+}
+export declare function validateConfig<V>(config: LayoutConfig, views: ReadonlyMap<Id, V>, options?: ValidateConfigOptions): void;
+export declare function parseLayoutConfig(object: unknown): LayoutConfig;
+export declare function cloneConfig(config: LayoutConfig): LayoutConfig;