@marianmeres/stuic 3.45.3 → 3.47.0

package/dist/components/Tree/Tree.svelte.d.ts

@@ -0,0 +1,95 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { TreeNodeDTO } from "@marianmeres/tree";
+import type { Snippet } from "svelte";
+export type TreeDropPosition = "before" | "after" | "inside";
+export interface TreeMoveEvent<T = unknown> {
+    /** The node being dragged */
+    source: TreeNodeDTO<T>;
+    /** The node being dropped onto/near */
+    target: TreeNodeDTO<T>;
+    /** Where relative to target: 'before' (sibling above), 'after' (sibling below), 'inside' (child) */
+    position: TreeDropPosition;
+}
+export interface Props<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The tree data (use tree.toJSON().children or raw TreeNodeDTO[]) */
+    items: TreeNodeDTO<T>[];
+    /** Render snippet for each item's content - receives (item, depth, isExpanded) */
+    renderItem?: Snippet<[TreeNodeDTO<T>, number, boolean]>;
+    /** Render snippet for item icon - receives (item, depth, isExpanded) */
+    renderIcon?: Snippet<[TreeNodeDTO<T>, number, boolean]>;
+    /** Active/selected item ID */
+    activeId?: string;
+    /** Callback to check if item is active (alternative to activeId) */
+    isActive?: (item: TreeNodeDTO<T>) => boolean;
+    /** Callback when an item is selected */
+    onSelect?: (item: TreeNodeDTO<T>) => void;
+    /** Callback when a branch is toggled */
+    onToggle?: (item: TreeNodeDTO<T>, expanded: boolean) => void;
+    /** Sort comparator (applied at each level) */
+    sort?: (a: TreeNodeDTO<T>, b: TreeNodeDTO<T>) => number;
+    /** Default expanded state for branches (default: false) */
+    defaultExpanded?: boolean;
+    /** Set of initially expanded branch IDs */
+    expandedIds?: Set<string>;
+    /** Enable localStorage persistence for expand/collapse state */
+    persistState?: boolean;
+    /** Storage key prefix for localStorage (default: 'stuic-tree') */
+    storageKeyPrefix?: string;
+    /** Enable drag-and-drop node reordering (default: false) */
+    draggable?: boolean;
+    /** Per-item drag control: return false to prevent dragging a specific item */
+    isDraggable?: (item: TreeNodeDTO<T>) => boolean;
+    /** Per-item drop target control: return false to prevent dropping onto a specific item */
+    isDropTarget?: (item: TreeNodeDTO<T>) => boolean;
+    /** Called on drop. Return false or throw to reject the move. */
+    onMove?: (event: TreeMoveEvent<T>) => void | false | Promise<void | false>;
+    /** Called when onMove throws an error */
+    onError?: (error: unknown) => void;
+    /** Delay in ms before auto-expanding a collapsed branch on drag-over (default: 800) */
+    dragExpandDelay?: number;
+    /** Skip all default styling */
+    unstyled?: boolean;
+    /** Classes for the wrapper element */
+    class?: string;
+    /** Element reference */
+    el?: HTMLElement;
+    /** Classes for individual items */
+    classItem?: string;
+    /** Classes for active items */
+    classItemActive?: string;
+    /** Classes for icons */
+    classIcon?: string;
+    /** Classes for labels */
+    classLabel?: string;
+    /** Classes for children container */
+    classChildren?: string;
+    /** Classes for chevron icon */
+    classChevron?: string;
+}
+export declare const TREE_BASE_CLASSES = "stuic-tree";
+export declare const TREE_ITEM_CLASSES = "stuic-tree-item";
+export declare const TREE_CHILDREN_CLASSES = "stuic-tree-children";
+declare function $$render<T = unknown>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "el";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = unknown> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "el";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Tree: $$IsomorphicComponent;
+type Tree<T = unknown> = InstanceType<typeof Tree<T>>;
+export default Tree;

package/dist/components/Tree/index.css

@@ -0,0 +1,186 @@
+/* =============================================================================
+   TREE COMPONENT TOKENS
+   Override globally: :root { --stuic-tree-indent: 1.5rem; }
+   Override locally:  <Tree style="--stuic-tree-indent: 2rem;">
+   ============================================================================= */
+
+:root {
+	/* Structure tokens */
+	--stuic-tree-transition: 150ms;
+
+	/* Indentation per depth level */
+	--stuic-tree-indent: 1.25rem;
+
+	/* Item sizing */
+	--stuic-tree-item-padding-x: 0.375rem;
+	--stuic-tree-item-padding-y: 0.125rem;
+	--stuic-tree-item-height: 1.75rem;
+	--stuic-tree-item-font-size: var(--text-sm);
+	--stuic-tree-item-radius: var(--radius-sm);
+	--stuic-tree-item-gap: 0.25rem;
+
+	/* Chevron */
+	--stuic-tree-chevron-size: 14px;
+	--stuic-tree-chevron-opacity: 0.5;
+
+	/* Icon */
+	--stuic-tree-icon-opacity: 0.7;
+
+	/* Drag and drop */
+	--stuic-tree-item-opacity-dragging: 0.4;
+	--stuic-tree-drop-indicator-color: var(--stuic-color-primary);
+	--stuic-tree-drop-indicator-height: 2px;
+	--stuic-tree-item-bg-dragover: rgb(0 0 0 / 0.04);
+
+	/* Color tokens: Base */
+	--stuic-tree-item-bg: transparent;
+	--stuic-tree-item-text: inherit;
+
+	/* Color tokens: Hover */
+	--stuic-tree-item-bg-hover: rgb(0 0 0 / 0.06);
+	--stuic-tree-item-text-hover: inherit;
+
+	/* Color tokens: Active/Selected */
+	--stuic-tree-item-bg-active: var(--stuic-color-primary);
+	--stuic-tree-item-text-active: var(--stuic-color-primary-foreground);
+
+	/* Color tokens: Focused (keyboard) */
+	--stuic-tree-item-bg-focus: rgb(0 0 0 / 0.06);
+	--stuic-tree-item-text-focus: inherit;
+}
+
+:root.dark {
+	--stuic-tree-item-bg-hover: rgb(255 255 255 / 0.08);
+	--stuic-tree-item-bg-focus: rgb(255 255 255 / 0.08);
+	--stuic-tree-item-bg-dragover: rgb(255 255 255 / 0.04);
+}
+
+@layer components {
+	/* =============================================================================
+	   BASE CONTAINER
+	   ============================================================================= */
+
+	.stuic-tree {
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* =============================================================================
+	   CHILDREN CONTAINER
+	   ============================================================================= */
+
+	.stuic-tree-children {
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* =============================================================================
+	   ITEM STYLES
+	   ============================================================================= */
+
+	.stuic-tree-item {
+		/* Layout */
+		display: flex;
+		align-items: center;
+		gap: var(--stuic-tree-item-gap);
+		width: 100%;
+		min-height: var(--stuic-tree-item-height);
+
+		/* Padding */
+		padding: var(--stuic-tree-item-padding-y) var(--stuic-tree-item-padding-x);
+
+		/* Typography */
+		font-size: var(--stuic-tree-item-font-size);
+		text-align: left;
+		line-height: 1.2;
+
+		/* Visual */
+		border-radius: var(--stuic-tree-item-radius);
+		background: var(--stuic-tree-item-bg);
+		color: var(--stuic-tree-item-text);
+		border: none;
+
+		/* Interaction */
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		transition:
+			background var(--stuic-tree-transition),
+			color var(--stuic-tree-transition);
+	}
+
+	/* Chevron opacity */
+	.stuic-tree-item > span:first-child {
+		opacity: var(--stuic-tree-chevron-opacity);
+	}
+
+	/* Icon opacity (second span when present) */
+	.stuic-tree-item > span:nth-child(2) {
+		opacity: var(--stuic-tree-icon-opacity);
+	}
+
+	/* =============================================================================
+	   ITEM STATE STYLES
+	   ============================================================================= */
+
+	/* Hover state */
+	.stuic-tree-item:hover:not([data-active]) {
+		background: var(--stuic-tree-item-bg-hover);
+		color: var(--stuic-tree-item-text-hover);
+	}
+
+	/* Focus styles */
+	.stuic-tree-item:focus {
+		outline: none;
+	}
+
+	.stuic-tree-item:focus-visible:not([data-active]) {
+		background: var(--stuic-tree-item-bg-focus);
+		color: var(--stuic-tree-item-text-focus);
+	}
+
+	/* Active/Selected state */
+	.stuic-tree-item[data-active] {
+		background: var(--stuic-tree-item-bg-active);
+		color: var(--stuic-tree-item-text-active);
+	}
+
+	/* Active state: full opacity on chevron and icon */
+	.stuic-tree-item[data-active] > span:first-child,
+	.stuic-tree-item[data-active] > span:nth-child(2) {
+		opacity: 1;
+	}
+
+	/* Focused state (keyboard navigation) */
+	.stuic-tree-item[data-focused]:not([data-active]) {
+		background: var(--stuic-tree-item-bg-focus);
+		color: var(--stuic-tree-item-text-focus);
+	}
+
+	/* =============================================================================
+	   DRAG AND DROP
+	   ============================================================================= */
+
+	.stuic-tree-item[data-dragging] {
+		opacity: var(--stuic-tree-item-opacity-dragging);
+	}
+
+	[role="treeitem"][data-drop-position="before"] > .stuic-tree-item,
+	[role="treeitem"][data-drop-position="after"] > .stuic-tree-item {
+		border-radius: 0;
+	}
+
+	[role="treeitem"][data-drop-position="before"] > .stuic-tree-item {
+		box-shadow: 0 var(--stuic-tree-drop-indicator-height) 0 0
+			var(--stuic-tree-drop-indicator-color) inset;
+	}
+
+	[role="treeitem"][data-drop-position="after"] > .stuic-tree-item {
+		box-shadow: 0 calc(-1 * var(--stuic-tree-drop-indicator-height)) 0 0
+			var(--stuic-tree-drop-indicator-color) inset;
+	}
+
+	[role="treeitem"][data-drop-position="inside"] > .stuic-tree-item {
+		background: var(--stuic-tree-item-bg-dragover);
+	}
+}

package/dist/components/Tree/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tree, type Props as TreeProps, type TreeMoveEvent, type TreeDropPosition, TREE_BASE_CLASSES, TREE_ITEM_CLASSES, TREE_CHILDREN_CLASSES, } from "./Tree.svelte";
+export type { TreeNodeDTO } from "@marianmeres/tree";

package/dist/components/Tree/index.js

@@ -0,0 +1 @@
+export { default as Tree, TREE_BASE_CLASSES, TREE_ITEM_CLASSES, TREE_CHILDREN_CLASSES, } from "./Tree.svelte";

package/dist/icons/index.d.ts

@@ -39,8 +39,10 @@ export { iconLucideGrip as iconGrip } from "@marianmeres/icons-fns/lucide/iconLu
 export { iconLucideGripHorizontal as iconGripHorizontal } from "@marianmeres/icons-fns/lucide/iconLucideGripHorizontal.js";
 export { iconLucideGripVertical as iconGripVertical } from "@marianmeres/icons-fns/lucide/iconLucideGripVertical.js";
 export { iconLucideLanguages as iconLanguages } from "@marianmeres/icons-fns/lucide/iconLucideLanguages.js";
+export { iconLucideList as iconList } from "@marianmeres/icons-fns/lucide/iconLucideList.js";
 export { iconLucideMenu as iconMenu } from "@marianmeres/icons-fns/lucide/iconLucideMenu.js";
 export { iconLucideSearch as iconSearch } from "@marianmeres/icons-fns/lucide/iconLucideSearch.js";
+export { iconLucideSlidersHorizontal as iconSlidersHorizontal } from "@marianmeres/icons-fns/lucide/iconLucideSlidersHorizontal.js";
 export { iconLucideSettings as iconSettings } from "@marianmeres/icons-fns/lucide/iconLucideSettings.js";
 export { iconLucideSquare as iconSquare } from "@marianmeres/icons-fns/lucide/iconLucideSquare.js";
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";

package/dist/icons/index.js

@@ -44,8 +44,10 @@ export { iconLucideGrip as iconGrip } from "@marianmeres/icons-fns/lucide/iconLu
 export { iconLucideGripHorizontal as iconGripHorizontal } from "@marianmeres/icons-fns/lucide/iconLucideGripHorizontal.js";
 export { iconLucideGripVertical as iconGripVertical } from "@marianmeres/icons-fns/lucide/iconLucideGripVertical.js";
 export { iconLucideLanguages as iconLanguages } from "@marianmeres/icons-fns/lucide/iconLucideLanguages.js";
+export { iconLucideList as iconList } from "@marianmeres/icons-fns/lucide/iconLucideList.js";
 export { iconLucideMenu as iconMenu } from "@marianmeres/icons-fns/lucide/iconLucideMenu.js";
 export { iconLucideSearch as iconSearch } from "@marianmeres/icons-fns/lucide/iconLucideSearch.js";
+export { iconLucideSlidersHorizontal as iconSlidersHorizontal } from "@marianmeres/icons-fns/lucide/iconLucideSlidersHorizontal.js";
 export { iconLucideSettings as iconSettings } from "@marianmeres/icons-fns/lucide/iconLucideSettings.js";
 export { iconLucideSquare as iconSquare } from "@marianmeres/icons-fns/lucide/iconLucideSquare.js";
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";

package/dist/index.css

@@ -37,6 +37,7 @@ In practice:
 @import "./components/LoginForm/index.css";
 @import "./components/Checkout/index.css";
 @import "./components/CommandMenu/index.css";
+@import "./components/CronInput/index.css";
 @import "./components/DataTable/index.css";
 @import "./components/DismissibleMessage/index.css";
 @import "./components/DropdownMenu/index.css";
@@ -57,6 +58,7 @@ In practice:
 @import "./components/Switch/index.css";
 @import "./components/TabbedMenu/index.css";
 @import "./components/ThemePreview/index.css";
+@import "./components/Tree/index.css";
 @import "./components/TwCheck/index.css";
 @import "./components/WithSidePanel/index.css";
 @import "./components/X/index.css";

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export * from "./components/Checkout/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
+export * from "./components/CronInput/index.js";
 export * from "./components/DataTable/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
@@ -62,6 +63,7 @@ export * from "./components/Switch/index.js";
 export * from "./components/TabbedMenu/index.js";
 export * from "./components/Thc/index.js";
 export * from "./components/ThemePreview/index.js";
+export * from "./components/Tree/index.js";
 export * from "./components/TwCheck/index.js";
 export * from "./components/TypeaheadInput/index.js";
 export * from "./components/WithSidePanel/index.js";

package/dist/index.js

@@ -38,6 +38,7 @@ export * from "./components/Checkout/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
+export * from "./components/CronInput/index.js";
 export * from "./components/DataTable/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
@@ -63,6 +64,7 @@ export * from "./components/Switch/index.js";
 export * from "./components/TabbedMenu/index.js";
 export * from "./components/Thc/index.js";
 export * from "./components/ThemePreview/index.js";
+export * from "./components/Tree/index.js";
 export * from "./components/TwCheck/index.js";
 export * from "./components/TypeaheadInput/index.js";
 export * from "./components/WithSidePanel/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.45.3",
+  "version": "3.47.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -56,7 +56,7 @@
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.5.1",
     "publint": "^0.3.18",
-    "svelte": "^5.53.8",
+    "svelte": "^5.53.9",
     "svelte-check": "^4.4.5",
     "tailwindcss": "^4.2.1",
     "tsx": "^4.21.0",
@@ -67,11 +67,13 @@
   },
   "dependencies": {
     "@marianmeres/clog": "^3.15.2",
+    "@marianmeres/cron": "^1.0.1",
     "@marianmeres/icons-fns": "^5.0.0",
     "@marianmeres/item-collection": "^1.3.5",
     "@marianmeres/paging-store": "^2.0.2",
     "@marianmeres/parse-boolean": "^2.0.5",
     "@marianmeres/ticker": "^1.16.5",
+    "@marianmeres/tree": "^2.2.5",
     "esm-env": "^1.2.2",
     "libphonenumber-js": "^1.12.39",
     "runed": "^0.23.4",