@connve/ui 0.0.0-stage → 0.1.0

package/dist/paneSize.svelte.d.ts

@@ -0,0 +1,26 @@
+export interface PaneBounds {
+    initial: number;
+    min: number;
+    max: number;
+    /** The pane's edge that resizes it: `right` for a pane on the left, `left` for one on the right, `top` for one at the bottom. */
+    edge: 'left' | 'right' | 'top';
+}
+export declare class PaneSize {
+    #private;
+    readonly edge: PaneBounds['edge'];
+    constructor(key: string, bounds: PaneBounds);
+    /** In pixels, within the bounds. */
+    get size(): number;
+    /** Whether a pointer is resizing the pane. */
+    get dragging(): boolean;
+    get vertical(): boolean;
+    get min(): number;
+    get max(): number;
+    start: (event: PointerEvent) => void;
+    reset: () => void;
+    keydown: (event: KeyboardEvent) => void;
+}
+/** One width for every page's side pane, so switching pages keeps the divider in place. */
+export declare const sidePaneWidth: PaneSize;
+/** One width for every page's inspector. */
+export declare const inspectorWidth: PaneSize;

package/dist/paneSize.svelte.js

@@ -0,0 +1,112 @@
+// Size of a resizable pane, remembered in this browser.
+const KEY_STEP = 16;
+export class PaneSize {
+    #size = $state(0);
+    #dragging = $state(false);
+    edge;
+    #bounds;
+    #key;
+    constructor(key, bounds) {
+        this.#key = `connve-${key}-pane-${bounds.edge === 'top' ? 'height' : 'width'}`;
+        this.#bounds = bounds;
+        this.edge = bounds.edge;
+        this.#size = bounds.initial;
+        try {
+            const saved = Number(localStorage.getItem(this.#key));
+            if (saved > 0)
+                this.#size = this.#clamp(saved);
+        }
+        catch {
+            // No storage on the server, or blocked in the browser; the initial size still works.
+        }
+    }
+    /** In pixels, within the bounds. */
+    get size() {
+        return this.#size;
+    }
+    /** Whether a pointer is resizing the pane. */
+    get dragging() {
+        return this.#dragging;
+    }
+    get vertical() {
+        return this.edge === 'top';
+    }
+    get min() {
+        return this.#bounds.min;
+    }
+    get max() {
+        return this.#bounds.max;
+    }
+    #clamp(size) {
+        return Math.min(this.#bounds.max, Math.max(this.#bounds.min, Math.round(size)));
+    }
+    #save() {
+        try {
+            localStorage.setItem(this.#key, String(this.#size));
+        }
+        catch {
+            // Not remembered, but the pane keeps its size for this visit.
+        }
+    }
+    /** Size change for a pointer or key moving `delta` pixels right, or down for a bottom pane. */
+    #grow(delta) {
+        return this.edge === 'right' ? delta : -delta;
+    }
+    start = (event) => {
+        if (event.button !== 0)
+            return;
+        const handle = event.currentTarget;
+        const startAt = this.vertical ? event.clientY : event.clientX;
+        const startSize = this.#size;
+        handle.setPointerCapture(event.pointerId);
+        this.#dragging = true;
+        const move = (e) => {
+            const at = this.vertical ? e.clientY : e.clientX;
+            this.#size = this.#clamp(startSize + this.#grow(at - startAt));
+        };
+        const end = () => {
+            this.#dragging = false;
+            handle.removeEventListener('pointermove', move);
+            handle.removeEventListener('pointerup', end);
+            handle.removeEventListener('pointercancel', end);
+            this.#save();
+        };
+        handle.addEventListener('pointermove', move);
+        handle.addEventListener('pointerup', end);
+        handle.addEventListener('pointercancel', end);
+    };
+    reset = () => {
+        this.#size = this.#bounds.initial;
+        this.#save();
+    };
+    keydown = (event) => {
+        if (event.key === 'Home') {
+            event.preventDefault();
+            this.reset();
+            return;
+        }
+        const keys = this.vertical
+            ? { ArrowUp: -KEY_STEP, ArrowDown: KEY_STEP }
+            : { ArrowLeft: -KEY_STEP, ArrowRight: KEY_STEP };
+        const delta = keys[event.key];
+        if (delta === undefined)
+            return;
+        event.preventDefault();
+        this.#size = this.#clamp(this.#size + this.#grow(delta));
+        this.#save();
+    };
+}
+/** One width for every page's side pane, so switching pages keeps the divider in place. */
+export const sidePaneWidth = new PaneSize('side', {
+    initial: 256,
+    min: 200,
+    max: 520,
+    edge: 'right'
+});
+/** One width for every page's inspector. */
+export const inspectorWidth = new PaneSize('inspector', {
+    initial: 480,
+    min: 360,
+    max: 800,
+    edge: 'left'
+});

package/dist/shell.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type Snippet } from 'svelte';
+/** What a page's panes tell the `AppShell` they render in. */
+export declare class ShellState {
+    /** The page's side pane, rendered by the shell beside the menu so it reaches the top. */
+    pane: Snippet<[]> | null;
+    /** Opens a collapsed pane from the top bar on a phone, where its rail is hidden. */
+    expand: {
+        label: string;
+        onclick: () => void;
+    } | null;
+    /** The top bar's button for `expand`, which takes focus back when a pane over the page closes. */
+    expandButton: HTMLButtonElement | null;
+    /** How many inspectors are open. */
+    inspectors: number;
+}
+export declare const setShell: (context: ShellState) => ShellState;
+/** The enclosing `AppShell`'s state; `component` names the caller in the error when there's none. */
+export declare function getShell(component: string): ShellState;

package/dist/shell.svelte.js

@@ -0,0 +1,20 @@
+import { createContext } from 'svelte';
+/** What a page's panes tell the `AppShell` they render in. */
+export class ShellState {
+    /** The page's side pane, rendered by the shell beside the menu so it reaches the top. */
+    pane = $state(null);
+    /** Opens a collapsed pane from the top bar on a phone, where its rail is hidden. */
+    expand = $state(null);
+    /** The top bar's button for `expand`, which takes focus back when a pane over the page closes. */
+    expandButton = $state(null);
+    /** How many inspectors are open. */
+    inspectors = $state(0);
+}
+const [get, set, has] = createContext();
+export const setShell = set;
+/** The enclosing `AppShell`'s state; `component` names the caller in the error when there's none. */
+export function getShell(component) {
+    if (!has())
+        throw new Error(`${component} must be inside an AppShell`);
+    return get();
+}

package/dist/theme.css

@@ -0,0 +1,169 @@
+/* Import after `tailwindcss` and the `daisyui` plugin. */
+
+/* The components' own classes, for the app's Tailwind build. */
+@source './';
+
+/* Both themes set every daisyUI token: with `themes: false` nothing fills a gap.
+   Text colors keep at least 4.5:1 against what they sit on (WCAG AA). */
+
+@plugin 'daisyui/theme' {
+	name: 'connve-light';
+	default: true;
+	prefersdark: false;
+	color-scheme: light;
+
+	--color-base-100: #fffef9;
+	--color-base-200: #eef0ea;
+	--color-base-300: #d9dcd4;
+	--color-base-content: oklch(21% 0.006 285.885);
+	--color-primary: #006b55;
+	--color-primary-content: #ffffff;
+	--color-secondary: #007600;
+	--color-secondary-content: oklch(94% 0.028 342.258);
+	--color-accent: #00e168;
+	--color-accent-content: oklch(38% 0.063 188.416);
+	--color-neutral: #0e271b;
+	--color-neutral-content: oklch(92% 0.004 286.32);
+	--color-info: #007cf3;
+	--color-info-content: oklch(29% 0.066 243.157);
+	--color-success: #00ffd1;
+	--color-success-content: oklch(37% 0.077 168.94);
+	--color-warning: #ff9804;
+	--color-warning-content: oklch(41% 0.112 45.904);
+	--color-error: #cf3450;
+	--color-error-content: oklch(27% 0.105 12.094);
+
+	--radius-selector: 0.5rem;
+	--radius-field: 0.25rem;
+	--radius-box: 0.5rem;
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+	--border: 1px;
+	--depth: 1;
+	--noise: 0;
+
+	/* The library's own tokens: text on the theme's pale tints, which mixes the
+	   hue with the text color for contrast, and the glow behind state messages. */
+	--color-attention: color-mix(in oklab, var(--color-warning) 60%, var(--color-base-content));
+	--color-chip-success: color-mix(in oklab, var(--color-primary) 75%, var(--color-base-content));
+	--color-chip-warning: color-mix(in oklab, var(--color-warning) 60%, var(--color-base-content));
+	--color-chip-error: color-mix(in oklab, var(--color-error) 65%, var(--color-base-content));
+	--state-glow-opacity: 0.22;
+	--state-glow-blend: multiply;
+	--state-title: linear-gradient(120deg, #006b55 0%, #007a6e 50%, #007a3d 100%);
+}
+
+@plugin 'daisyui/theme' {
+	name: 'connve-dark';
+	prefersdark: true;
+	color-scheme: dark;
+
+	--color-base-100: #0e1a15;
+	--color-base-200: #142520;
+	--color-base-300: #1c2f28;
+	--color-base-content: #e8f0ec;
+	--color-primary: #00a372;
+	--color-primary-content: #0e1a15;
+	--color-secondary: #00b4a6;
+	--color-secondary-content: oklch(94% 0.028 342.258);
+	--color-accent: #00ffd1;
+	--color-accent-content: oklch(38% 0.063 188.416);
+	--color-neutral: #d4d4d4;
+	--color-neutral-content: #0e1a15;
+	--color-info: #3399ff;
+	--color-info-content: oklch(29% 0.066 243.157);
+	--color-success: #00cc99;
+	--color-success-content: oklch(37% 0.077 168.94);
+	--color-warning: #d97706;
+	--color-warning-content: oklch(41% 0.112 45.904);
+	--color-error: #ef5a72;
+	--color-error-content: #0e1a15;
+
+	--radius-selector: 0.5rem;
+	--radius-field: 0.25rem;
+	--radius-box: 0.5rem;
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+	--border: 1px;
+	--depth: 1;
+	--noise: 0;
+
+	/* On the dark base the hues read as they are. */
+	--color-attention: var(--color-warning);
+	--color-chip-success: var(--color-primary);
+	--color-chip-warning: var(--color-warning);
+	--color-chip-error: var(--color-error);
+	--state-glow-opacity: 0.28;
+	--state-glow-blend: screen;
+	--state-title: linear-gradient(120deg, #00b4a6 0%, #3fd1c4 50%, #00e168 100%);
+}
+
+/* Filter chips. Each theme sets the text color on the tints. */
+@utility chip {
+	@apply flex h-8 items-center gap-1.5 rounded-full border border-transparent px-3 text-xs transition-colors;
+}
+@utility chip-sm {
+	@apply flex h-6 items-center gap-1.5 rounded-full border border-transparent px-2 text-xs transition-colors;
+}
+@utility chip-inactive {
+	@apply opacity-70 hover:opacity-100;
+}
+@utility chip-neutral {
+	@apply bg-base-200;
+}
+@utility chip-success {
+	@apply bg-primary/10;
+	color: var(--color-chip-success);
+}
+@utility chip-warn {
+	@apply bg-warning/10;
+	color: var(--color-chip-warning);
+}
+@utility chip-error {
+	@apply bg-error/10;
+	color: var(--color-chip-error);
+}
+
+/* Warning hue readable as text. */
+@utility text-attention {
+	color: var(--color-attention);
+}
+
+/* Hides native number-input spinners so number fields match other inputs. */
+@utility no-spinner {
+	appearance: textfield;
+	-moz-appearance: textfield;
+	&::-webkit-outer-spin-button,
+	&::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+}
+
+/* List rows read at the size of the side pane beside them. Outside any layer to beat
+   daisyUI's own `table-sm` size, which sits in the utilities layer; a row's own text
+   size then needs `!`. */
+.table-sm tbody tr {
+	font-size: var(--text-sm);
+}
+
+/* Clickable rows, in a layer so an app's own utilities still win. */
+@layer components {
+	tr[role='button']:focus {
+		outline: none;
+	}
+	/* A visible ring, since the hover background alone also marks the selected row. */
+	tr[role='button']:focus-visible {
+		@apply bg-base-200;
+		outline: 2px solid var(--color-primary);
+		outline-offset: -2px;
+	}
+}
+
+/* daisyUI draws a tooltip's text as generated content, which screen readers read too, after
+   the name the element already has. An empty alternative keeps it visual only. */
+@supports (content: 'x' / '') {
+	.tooltip[data-tip]::before {
+		content: attr(data-tip) / '';
+	}
+}

package/dist/theme.svelte.d.ts

@@ -0,0 +1,13 @@
+export type ThemePref = 'system' | 'light' | 'dark';
+declare class Theme {
+    #private;
+    /** The viewer's choice; `system` follows the OS. */
+    get pref(): ThemePref;
+    /** Whether the dark theme shows. */
+    get dark(): boolean;
+    /** Keeps `<html data-theme>` on the shown theme; call once from the root layout, and stop it with the returned function. */
+    start(): () => void;
+    set(pref: ThemePref): void;
+}
+export declare const theme: Theme;
+export {};

package/dist/theme.svelte.js

@@ -0,0 +1,46 @@
+// The color theme the viewer picked, applied to `<html data-theme>`.
+import { MediaQuery } from 'svelte/reactivity';
+const KEY = 'connve-theme';
+function isPref(value) {
+    return value === 'system' || value === 'light' || value === 'dark';
+}
+function savedPref() {
+    try {
+        const saved = localStorage.getItem(KEY);
+        return isPref(saved) ? saved : 'system';
+    }
+    catch {
+        // No storage on the server, or blocked in the browser; the theme follows the OS.
+        return 'system';
+    }
+}
+class Theme {
+    #pref = $state(savedPref());
+    #osDark = new MediaQuery('prefers-color-scheme: dark');
+    /** The viewer's choice; `system` follows the OS. */
+    get pref() {
+        return this.#pref;
+    }
+    /** Whether the dark theme shows. */
+    get dark() {
+        return this.#pref === 'system' ? this.#osDark.current : this.#pref === 'dark';
+    }
+    /** Keeps `<html data-theme>` on the shown theme; call once from the root layout, and stop it with the returned function. */
+    start() {
+        return $effect.root(() => {
+            $effect(() => {
+                document.documentElement.setAttribute('data-theme', this.dark ? 'connve-dark' : 'connve-light');
+            });
+        });
+    }
+    set(pref) {
+        this.#pref = pref;
+        try {
+            localStorage.setItem(KEY, pref);
+        }
+        catch {
+            // Not remembered, but the theme still applies for this visit.
+        }
+    }
+}
+export const theme = new Theme();

package/dist/tooltip.d.ts

@@ -0,0 +1,3 @@
+export type TooltipSide = 'left' | 'right' | 'top' | 'bottom';
+/** daisyUI's placement classes, written out in full so Tailwind finds them. */
+export declare const TOOLTIP_SIDE: Record<TooltipSide, string>;

package/dist/tooltip.js

@@ -0,0 +1,7 @@
+/** daisyUI's placement classes, written out in full so Tailwind finds them. */
+export const TOOLTIP_SIDE = {
+    left: 'tooltip-left',
+    right: 'tooltip-right',
+    top: 'tooltip-top',
+    bottom: 'tooltip-bottom'
+};

package/dist/tree.d.ts

@@ -0,0 +1,17 @@
+export interface TreeNode<T> {
+    name: string;
+    fullPath: string;
+    depth: number;
+    isFolder: boolean;
+    children?: TreeNode<T>[];
+    leaf?: T;
+    fileCount?: number;
+}
+/**
+ * Builds a slash-delimited path tree from a flat list; `path` returns each item's key.
+ * Folders come first, then names in natural order ("item2" before "item10"), and each
+ * folder's `fileCount` is its number of items, nested ones included. A key can name an
+ * item and a folder at once ("a" and "a/b"); they become two nodes. Of items with the
+ * same key, the first is kept.
+ */
+export declare function buildTree<T>(items: T[], path: (item: T) => string): TreeNode<T>[];

package/dist/tree.js

@@ -0,0 +1,44 @@
+const collator = new Intl.Collator(undefined, { numeric: true });
+/**
+ * Builds a slash-delimited path tree from a flat list; `path` returns each item's key.
+ * Folders come first, then names in natural order ("item2" before "item10"), and each
+ * folder's `fileCount` is its number of items, nested ones included. A key can name an
+ * item and a folder at once ("a" and "a/b"); they become two nodes. Of items with the
+ * same key, the first is kept.
+ */
+export function buildTree(items, path) {
+    const root = [];
+    for (const item of items) {
+        const parts = path(item).split('/').filter(Boolean);
+        let level = root;
+        parts.forEach((name, depth) => {
+            const isFolder = depth < parts.length - 1;
+            let node = level.find((n) => n.name === name && n.isFolder === isFolder);
+            if (!node) {
+                const fullPath = parts.slice(0, depth + 1).join('/');
+                node = isFolder
+                    ? { name, fullPath, depth, isFolder, children: [] }
+                    : { name, fullPath, depth, isFolder, leaf: item };
+                level.push(node);
+            }
+            level = node.children ?? [];
+        });
+    }
+    sortAndCount(root);
+    return root;
+}
+/** Sorts a level and its folders, sets their `fileCount`, and returns the level's item count. */
+function sortAndCount(nodes) {
+    nodes.sort((a, b) => Number(b.isFolder) - Number(a.isFolder) || collator.compare(a.name, b.name));
+    let count = 0;
+    for (const node of nodes) {
+        if (node.children) {
+            node.fileCount = sortAndCount(node.children);
+            count += node.fileCount;
+        }
+        else {
+            count += 1;
+        }
+    }
+    return count;
+}

package/package.json

@@ -1,6 +1,83 @@
 {
-  "name": "@connve/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@connve/ui",
+	"version": "0.1.0",
+	"description": "Svelte components and theme shared by the CONNVE apps.",
+	"license": "MPL-2.0",
+	"type": "module",
+	"keywords": [
+		"svelte",
+		"svelte5",
+		"components",
+		"tailwindcss",
+		"daisyui"
+	],
+	"homepage": "https://github.com/connve/ui#readme",
+	"bugs": "https://github.com/connve/ui/issues",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/connve/ui.git"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"package": "svelte-kit sync && svelte-package && publint && node scripts/check-dist.js",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"test": "vitest run",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"icons": "node scripts/icons.js && prettier --write src/lib/icons.ts",
+		"prepublishOnly": "npm run package"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./theme.css": "./dist/theme.css"
+	},
+	"peerDependencies": {
+		"@iconify/svelte": "^5.0.0",
+		"daisyui": "^5.0.0",
+		"svelte": "^5.40.0",
+		"tailwindcss": "^4.0.0"
+	},
+	"devDependencies": {
+		"@eslint/js": "^10.0.1",
+		"@iconify-json/tabler": "^1.2.44",
+		"@iconify/svelte": "^5.2.4",
+		"@sveltejs/adapter-static": "^4.0.1",
+		"@sveltejs/kit": "^3.2.0",
+		"@sveltejs/package": "^3.0.2",
+		"@sveltejs/vite-plugin-svelte": "^7.3.1",
+		"@tailwindcss/vite": "^4.3.5",
+		"daisyui": "^5.7.50",
+		"eslint": "^10.14.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.24.1",
+		"globals": "^17.14.0",
+		"prettier": "^3.9.10",
+		"prettier-plugin-svelte": "^4.1.1",
+		"prettier-plugin-tailwindcss": "^0.8.1",
+		"publint": "^0.3.25",
+		"svelte": "^5.57.3",
+		"svelte-check": "^4.7.8",
+		"tailwindcss": "^4.3.5",
+		"typescript": "^6.0.3",
+		"typescript-eslint": "^8.72.2",
+		"vite": "^8.3.8",
+		"vitest": "^5.1.0"
+	}
+}