@dryui/ui 1.3.0 → 1.4.0

package/dist/tree/tree-item-children.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getTreeCtx, getTreeItemCtx } from './context.svelte.js';
@@ -7,18 +8,16 @@
 		children: Snippet;
 	}
 
-	let { class: className, children, style, ...rest }: Props = $props();
+	let { class: className, children, ...rest }: Props = $props();
 
 	const ctx = getTreeCtx();
 	const itemCtx = getTreeItemCtx();
 	const open = $derived(ctx.isExpanded(itemCtx.itemId));
-
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--_rows', open ? '1fr' : '0fr');
-		});
-	}
+	const branchItemId = itemCtx.itemId;
+	ctx.registerBranch(branchItemId);
+	onDestroy(() => {
+		ctx.unregisterBranch(branchItemId);
+	});
 </script>
 
 <div
@@ -28,7 +27,6 @@
 	data-state={open ? 'open' : 'closed'}
 	class={className}
 	{...rest}
-	{@attach applyStyles}
 >
 	<div class="tree-item-inner">
 		{@render children()}
@@ -42,8 +40,12 @@
 
 	[data-part='children'] {
 		display: grid;
-		grid-template-rows: var(--_rows, 0fr);
+		grid-template-rows: 0fr;
 		padding-left: var(--dry-tree-indent, var(--dry-space-4));
 		transition: grid-template-rows var(--dry-duration-normal) var(--dry-ease-default);
 	}
+
+	[data-part='children'][data-state='open'] {
+		grid-template-rows: 1fr;
+	}
 </style>

package/dist/tree/tree-item-label.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { getTreeCtx, getTreeItemCtx } from './context.svelte.js';
 
-	interface Props extends HTMLButtonAttributes {
+	interface Props extends HTMLAttributes<HTMLDivElement> {
 		children: Snippet;
 	}
 
@@ -13,24 +13,17 @@
 	const itemCtx = getTreeItemCtx();
 </script>
 
-<button
-	type="button"
+<div
 	data-part="label"
-	data-tree-label
 	data-selected={ctx.isSelected(itemCtx.itemId) || undefined}
 	class={className}
-	onclick={() => {
-		ctx.selectItem(itemCtx.itemId);
-		ctx.toggleItem(itemCtx.itemId);
-	}}
 	{...rest}
 >
 	{@render children()}
-</button>
+</div>
 
 <style>
 	[data-part='label'] {
-		appearance: none;
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
@@ -44,9 +37,10 @@
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		font-family: var(--dry-font-sans);
 		color: var(--dry-color-text-strong);
+		outline: var(--dry-tree-item-focus-ring, none);
+		outline-offset: var(--dry-tree-item-focus-offset, 0px);
 		cursor: pointer;
 		user-select: none;
-		outline: none;
 		transition: background var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
@@ -54,11 +48,6 @@
 		background: var(--dry-tree-item-hover-bg, var(--dry-color-fill));
 	}
 
-	[data-part='label']:focus-visible {
-		outline: var(--dry-focus-ring);
-		outline-offset: 2px;
-	}
-
 	[data-part='label'][data-selected] {
 		background: var(--dry-tree-item-selected-bg, var(--dry-color-fill-brand-weak));
 		color: var(--dry-tree-item-selected-color, var(--dry-color-text-brand));

package/dist/tree/tree-item-label.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
     children: Snippet;
 }
 declare const TreeItemLabel: import("svelte").Component<Props, {}, "">;

package/dist/tree/tree-item.svelte

@@ -12,6 +12,8 @@
 
 	const ctx = getTreeCtx();
 	const expanded = $derived(ctx.isExpanded(itemId));
+	const focused = $derived(ctx.isFocused(itemId));
+	const hasChildren = $derived(ctx.hasChildren(itemId));
 	const selected = $derived(ctx.isSelected(itemId));
 
 	setTreeItemCtx({
@@ -23,14 +25,39 @@
 
 <div
 	role="treeitem"
-	aria-expanded={expanded}
+	tabindex={focused ? 0 : -1}
+	aria-expanded={hasChildren ? expanded : undefined}
 	aria-selected={selected}
+	data-branch={hasChildren || undefined}
 	data-part="item"
 	data-expanded={expanded || undefined}
+	data-focused={focused || undefined}
 	data-selected={selected || undefined}
 	data-item-id={itemId}
 	class={className}
+	onclick={(e) => {
+		(e.currentTarget as HTMLElement).focus();
+		ctx.selectItem(itemId);
+	}}
+	ondblclick={() => {
+		if (hasChildren) {
+			ctx.toggleItem(itemId);
+		}
+	}}
 	{...rest}
 >
 	{@render children()}
 </div>
+
+<style>
+	[data-part='item'] {
+		outline: none;
+		--dry-tree-item-focus-ring: none;
+		--dry-tree-item-focus-offset: 0px;
+	}
+
+	[data-part='item']:focus-visible {
+		--dry-tree-item-focus-ring: var(--dry-focus-ring);
+		--dry-tree-item-focus-offset: 2px;
+	}
+</style>

package/dist/tree/tree-root.svelte

@@ -23,6 +23,38 @@
 	}
 
 	let expandedItems = createExpandedItems();
+	let branchItems = new SvelteSet<string>();
+	let focusedItem = $state<string | null>(selectedItem);
+
+	function toggleItem(id: string) {
+		if (expandedItems.has(id)) expandedItems.delete(id);
+		else expandedItems.add(id);
+	}
+
+	function expandItem(id: string) {
+		expandedItems.add(id);
+	}
+
+	function collapseItem(id: string) {
+		expandedItems.delete(id);
+	}
+
+	function selectItem(id: string) {
+		selectedItem = id;
+		focusedItem = id;
+	}
+
+	function setFocusedItem(id: string) {
+		focusedItem = id;
+	}
+
+	function registerBranch(id: string) {
+		branchItems.add(id);
+	}
+
+	function unregisterBranch(id: string) {
+		branchItems.delete(id);
+	}
 
 	setTreeCtx({
 		get expandedItems() {
@@ -31,115 +63,151 @@
 		get selectedItem() {
 			return selectedItem;
 		},
-		toggleItem(id) {
-			if (expandedItems.has(id)) expandedItems.delete(id);
-			else expandedItems.add(id);
-		},
-		expandItem(id) {
-			expandedItems.add(id);
-		},
-		collapseItem(id) {
-			expandedItems.delete(id);
-		},
-		selectItem(id) {
-			selectedItem = id;
+		get focusedItem() {
+			return focusedItem;
 		},
+		toggleItem,
+		expandItem,
+		collapseItem,
+		selectItem,
+		setFocusedItem,
+		registerBranch,
+		unregisterBranch,
 		isExpanded(id) {
 			return expandedItems.has(id);
 		},
 		isSelected(id) {
 			return selectedItem === id;
+		},
+		isFocused(id) {
+			return focusedItem === id;
+		},
+		hasChildren(id) {
+			return branchItems.has(id);
 		}
 	});
 
-	function handleKeydown(e: KeyboardEvent) {
-		const tree = e.currentTarget as HTMLElement;
+	function initializeTree(node: HTMLElement) {
+		if (focusedItem !== null) return;
+		const itemId = node.querySelector<HTMLElement>('[role="treeitem"]')?.dataset.itemId;
+
+		if (itemId) {
+			focusedItem = itemId;
+		}
+	}
+
+	function getVisibleItems(tree: HTMLElement) {
 		const items = Array.from(tree.querySelectorAll('[role="treeitem"]')) as HTMLElement[];
-		const visibleItems = items.filter((item) => {
+
+		return items.filter((item) => {
 			let parent = item.parentElement;
+
 			while (parent && parent !== tree) {
 				if (parent.getAttribute('role') === 'group') {
-					const groupParent = parent.closest('[role="treeitem"]');
-					if (groupParent && groupParent.getAttribute('aria-expanded') === 'false') {
+					const groupParent = parent.closest<HTMLElement>('[role="treeitem"]');
+					if (groupParent?.getAttribute('aria-expanded') === 'false') {
 						return false;
 					}
 				}
+
 				parent = parent.parentElement;
 			}
+
 			return true;
 		});
+	}
 
-		const currentIndex = visibleItems.indexOf(
-			document.activeElement?.closest('[role="treeitem"]') as HTMLElement
-		);
-		if (currentIndex === -1) return;
+	function getCurrentItem(tree: HTMLElement, visibleItems: HTMLElement[]) {
+		const activeItem =
+			document.activeElement instanceof HTMLElement
+				? document.activeElement.closest<HTMLElement>('[role="treeitem"]')
+				: null;
+
+		if (activeItem && tree.contains(activeItem)) {
+			return activeItem;
+		}
+
+		if (focusedItem !== null) {
+			return visibleItems.find((item) => item.dataset.itemId === focusedItem) ?? null;
+		}
 
-		const currentItem = visibleItems[currentIndex]!;
+		return visibleItems[0] ?? null;
+	}
+
+	function focusItem(item: HTMLElement | null | undefined) {
+		if (!item) return;
+		const itemId = item.dataset.itemId;
+		if (itemId && itemId !== focusedItem) {
+			focusedItem = itemId;
+		}
+		item.focus();
+	}
+
+	function handleFocusIn(e: FocusEvent) {
+		const item =
+			e.target instanceof HTMLElement ? e.target.closest<HTMLElement>('[role="treeitem"]') : null;
+		const itemId = item?.dataset.itemId;
+
+		if (itemId && itemId !== focusedItem) {
+			focusedItem = itemId;
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		const tree = e.currentTarget as HTMLElement;
+		const visibleItems = getVisibleItems(tree);
+		const currentItem = getCurrentItem(tree, visibleItems);
+		if (!currentItem) return;
+
+		const currentIndex = visibleItems.indexOf(currentItem);
 		const itemId = currentItem.dataset.itemId;
 
 		switch (e.key) {
 			case 'ArrowDown': {
 				e.preventDefault();
-				const next = visibleItems[currentIndex + 1];
-				if (next) {
-					const label = next.querySelector('[data-tree-label]') as HTMLElement;
-					(label ?? next).focus();
-				}
+				focusItem(visibleItems[currentIndex + 1]);
 				break;
 			}
 			case 'ArrowUp': {
 				e.preventDefault();
-				const prev = visibleItems[currentIndex - 1];
-				if (prev) {
-					const label = prev.querySelector('[data-tree-label]') as HTMLElement;
-					(label ?? prev).focus();
-				}
+				focusItem(visibleItems[currentIndex - 1]);
 				break;
 			}
 			case 'ArrowRight': {
 				e.preventDefault();
-				if (itemId) {
-					const hasChildren = currentItem.querySelector('[role="group"]');
-					if (hasChildren && !expandedItems.has(itemId)) {
-						expandedItems.add(itemId);
-					} else if (hasChildren && expandedItems.has(itemId)) {
-						const firstChild = currentItem.querySelector('[role="group"] > [role="treeitem"]');
-						if (firstChild) {
-							const label = firstChild.querySelector('[data-tree-label]') as HTMLElement;
-							(label ?? (firstChild as HTMLElement)).focus();
-						}
+				if (itemId && branchItems.has(itemId)) {
+					if (!expandedItems.has(itemId)) {
+						expandItem(itemId);
+					} else {
+						focusItem(currentItem.querySelector<HTMLElement>('[role="group"] [role="treeitem"]'));
 					}
 				}
 				break;
 			}
 			case 'ArrowLeft': {
 				e.preventDefault();
-				if (itemId && expandedItems.has(itemId)) {
-					expandedItems.delete(itemId);
+				if (itemId && branchItems.has(itemId) && expandedItems.has(itemId)) {
+					collapseItem(itemId);
 				} else {
-					const parentGroup = currentItem.parentElement?.closest('[role="treeitem"]');
-					if (parentGroup) {
-						const label = parentGroup.querySelector('[data-tree-label]') as HTMLElement;
-						(label ?? (parentGroup as HTMLElement)).focus();
-					}
+					focusItem(currentItem.parentElement?.closest<HTMLElement>('[role="treeitem"]'));
 				}
 				break;
 			}
 			case 'Home': {
 				e.preventDefault();
-				const first = visibleItems[0];
-				if (first) {
-					const label = first.querySelector('[data-tree-label]') as HTMLElement;
-					(label ?? first).focus();
-				}
+				focusItem(visibleItems[0]);
 				break;
 			}
 			case 'End': {
 				e.preventDefault();
-				const last = visibleItems[visibleItems.length - 1];
-				if (last) {
-					const label = last.querySelector('[data-tree-label]') as HTMLElement;
-					(label ?? last).focus();
+				focusItem(visibleItems[visibleItems.length - 1]);
+				break;
+			}
+			case 'Enter':
+			case ' ': {
+				if (itemId) {
+					e.preventDefault();
+					selectItem(itemId);
 				}
 				break;
 			}
@@ -147,7 +215,15 @@
 	}
 </script>
 
-<div role="tree" data-part="root" class={className} onkeydown={handleKeydown} {...rest}>
+<div
+	role="tree"
+	data-part="root"
+	class={className}
+	onfocusin={handleFocusIn}
+	onkeydown={handleKeydown}
+	{@attach initializeTree}
+	{...rest}
+>
 	{@render children()}
 </div>
 

package/dist/typography/heading.svelte

@@ -51,6 +51,7 @@
 		font-weight: 700;
 		line-height: var(--dry-type-heading-2-leading, 2.5rem);
 		letter-spacing: -0.03em;
+		text-wrap: balance;
 	}
 
 	[data-level='1'] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Zero-dependency styled Svelte 5 components with scoped styles and --dry-* CSS variable theming.",
   "author": "Rob Balfre",
   "license": "MIT",
@@ -50,6 +50,11 @@
       "svelte": "./dist/alpha-slider/index.js",
       "default": "./dist/alpha-slider/index.js"
     },
+    "./app-frame": {
+      "types": "./dist/app-frame/index.d.ts",
+      "svelte": "./dist/app-frame/index.js",
+      "default": "./dist/app-frame/index.js"
+    },
     "./aspect-ratio": {
       "types": "./dist/aspect-ratio/index.d.ts",
       "svelte": "./dist/aspect-ratio/index.js",
@@ -779,12 +784,13 @@
     "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^1.3.0"
+    "@dryui/primitives": "^1.4.0"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"
   },
   "devDependencies": {
+    "@dryui/lint": "^0.4.2",
     "svelte": "^5.55.3",
     "@sveltejs/package": "^2.5.7",
     "svelte-check": "^4.4.6",

package/skills/dryui/SKILL.md

@@ -146,6 +146,7 @@ This works for greenfield (empty directory), brownfield (existing non-SvelteKit
 
 - Claude Code: `claude plugin marketplace add rob-balfre/dryui && claude plugin install dryui@dryui` (plugin is the canonical Claude skill install path)
 - Codex (0.121.0+): `codex marketplace add rob-balfre/dryui`, then start `codex`, run `/plugins`, and install `DryUI` (plugin is the canonical Codex skill install path)
+- OpenCode: `npx degit rob-balfre/dryui/packages/ui/skills/dryui .opencode/skills/dryui` + add the `dryui` and `dryui-feedback` local MCP servers in `opencode.json` (OpenCode also loads `.agents/skills/dryui` and reads `AGENTS.md`)
 - Copilot/Cursor/Windsurf: `npx degit rob-balfre/dryui/packages/ui/skills/dryui .agents/skills/dryui` + add MCP config (see https://dryui.dev/tools)
 
 ### Manual setup

package/dist/hover-card/hover-card-root.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    openDelay?: number;
-    closeDelay?: number;
-    children: Snippet;
-}
-declare const HoverCardRoot: import("svelte").Component<Props, {}, "">;
-type HoverCardRoot = ReturnType<typeof HoverCardRoot>;
-export default HoverCardRoot;