svelte-p5-components 0.4.0 → 0.5.0

package/dist/EntityToggleList.svelte

@@ -41,6 +41,13 @@
 		onToggle?: (id: string, visible: boolean) => void;
 		/** When provided, a native color input is shown and clicking the swatch opens it. */
 		onColorChange?: (id: string, color: string) => void;
+		/**
+		 * When provided, each item gets a pencil button (shown on hover) that
+		 * enters inline-edit mode. Enter/blur commits via this callback;
+		 * Escape cancels. Called with the entity's current id and the new
+		 * label — the consumer is responsible for updating its own state.
+		 */
+		onRename?: (id: string, nextLabel: string) => void;
 		/** Max entities to show before collapsing the remainder behind a "+N more" expander. */
 		maxVisible?: number;
 		/** Optional heading above the list. */
@@ -52,12 +59,15 @@
 		entities,
 		onToggle,
 		onColorChange,
+		onRename,
 		maxVisible,
 		heading,
 		class: className = ''
 	}: Props = $props();
 
 	let expanded = $state(false);
+	let editingId = $state<string | null>(null);
+	let editValue = $state('');
 
 	const visibleEntities = $derived(
 		expanded || maxVisible === undefined ? entities : entities.slice(0, maxVisible)
@@ -94,6 +104,43 @@
 		const target = event.currentTarget as HTMLInputElement;
 		onColorChange?.(e.id, target.value);
 	}
+
+	function startRename(e: Entity) {
+		editingId = e.id;
+		editValue = e.label;
+	}
+
+	function commitRename() {
+		if (editingId === null) return;
+		const id = editingId;
+		const next = editValue.trim();
+		editingId = null;
+		editValue = '';
+		const entity = entities.find((e) => e.id === id);
+		if (!entity) return;
+		if (next.length === 0 || next === entity.label) return;
+		onRename?.(id, next);
+	}
+
+	function cancelRename() {
+		editingId = null;
+		editValue = '';
+	}
+
+	function handleEditKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			commitRename();
+		} else if (event.key === 'Escape') {
+			event.preventDefault();
+			cancelRename();
+		}
+	}
+
+	function focusOnMount(node: HTMLInputElement) {
+		node.focus();
+		node.select();
+	}
 </script>
 
 <div class="entity-toggle-list {className}" data-has-groups={hasGroupBoundaries}>
@@ -128,15 +175,43 @@
 							aria-hidden="true"
 						></span>
 					{/if}
-					<button
-						type="button"
-						class="entity-toggle-list__label"
-						aria-pressed={isVisible(entity)}
-						title={isVisible(entity) ? `Hide ${entity.label}` : `Show ${entity.label}`}
-						onclick={() => handleToggle(entity)}
-					>
-						{entity.label}
-					</button>
+					{#if editingId === entity.id}
+						<input
+							class="entity-toggle-list__edit-input"
+							type="text"
+							bind:value={editValue}
+							onkeydown={handleEditKeydown}
+							onblur={commitRename}
+							aria-label="Rename {entity.label}"
+							use:focusOnMount
+						/>
+					{:else}
+						<button
+							type="button"
+							class="entity-toggle-list__label"
+							aria-pressed={isVisible(entity)}
+							title={isVisible(entity) ? `Hide ${entity.label}` : `Show ${entity.label}`}
+							onclick={() => handleToggle(entity)}
+						>
+							{entity.label}
+						</button>
+					{/if}
+					{#if onRename && editingId !== entity.id}
+						<button
+							type="button"
+							class="entity-toggle-list__rename"
+							aria-label="Rename {entity.label}"
+							title="Rename"
+							onclick={() => startRename(entity)}
+						>
+							<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
+								<path
+									d="M14.06 9 15 9.94 5.92 19H5v-.92L14.06 9m3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"
+									fill="currentColor"
+								/>
+							</svg>
+						</button>
+					{/if}
 				</div>
 			{/each}
 		</div>
@@ -169,17 +244,27 @@
 		flex-direction: column;
 		gap: 6px;
 		font:
-			12px/1.3 system-ui,
+			13px/1.3 system-ui,
 			-apple-system,
 			Segoe UI,
 			sans-serif;
 
-		--entity-swatch-size: 12px;
+		/* Defaults derive from currentColor so the list inherits the
+		 * embedding chrome's theme. Consumers can still override any
+		 * of these individually. */
+		--entity-swatch-size: 14px;
 		--entity-btn-bg: transparent;
-		--entity-btn-bg-hover: rgba(0, 0, 0, 0.05);
-		--entity-btn-fg: #111;
-		--entity-btn-fg-hidden: #9ca3af;
-		--entity-heading-fg: #6b7280;
+		--entity-btn-bg-hover: color-mix(in srgb, currentColor 8%, transparent);
+		--entity-btn-border-hover: color-mix(in srgb, currentColor 12%, transparent);
+		--entity-btn-fg: currentColor;
+		--entity-btn-fg-hidden: color-mix(in srgb, currentColor 45%, transparent);
+		--entity-heading-fg: color-mix(in srgb, currentColor 65%, transparent);
+		--entity-swatch-border: color-mix(in srgb, currentColor 25%, transparent);
+		--entity-swatch-inset: color-mix(in srgb, currentColor 15%, transparent);
+		--entity-edit-bg: color-mix(in srgb, currentColor 4%, transparent);
+		--entity-edit-border: color-mix(in srgb, currentColor 22%, transparent);
+		--entity-rename-hover-bg: color-mix(in srgb, currentColor 8%, transparent);
+		--entity-focus-ring: color-mix(in srgb, currentColor 55%, transparent);
 	}
 
 	.entity-toggle-list__heading,
@@ -194,21 +279,27 @@
 	.entity-toggle-list__row {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 4px 8px;
+		gap: 6px 8px;
 		align-items: center;
 	}
 
 	.entity-toggle-list__item {
 		display: inline-flex;
 		align-items: center;
-		gap: 6px;
-		padding: 2px 6px 2px 4px;
-		border-radius: 4px;
+		gap: 8px;
+		padding: 6px 8px 6px 10px;
+		min-height: 32px;
+		border-radius: 6px;
 		background: var(--entity-btn-bg);
+		border: 1px solid transparent;
+		transition:
+			background-color 100ms ease,
+			border-color 100ms ease;
 	}
 
 	.entity-toggle-list__item:hover {
 		background: var(--entity-btn-bg-hover);
+		border-color: var(--entity-btn-border-hover);
 	}
 
 	.entity-toggle-list__item.is-hidden .entity-toggle-list__label {
@@ -225,8 +316,9 @@
 		width: var(--entity-swatch-size);
 		height: var(--entity-swatch-size);
 		border-radius: 50%;
-		border: 1px solid rgba(0, 0, 0, 0.15);
+		border: 1px solid var(--entity-swatch-border);
 		flex: 0 0 auto;
+		box-shadow: 0 0 0 1px var(--entity-swatch-inset) inset;
 	}
 
 	.entity-toggle-list__swatch-wrap {
@@ -247,12 +339,74 @@
 	.entity-toggle-list__label {
 		background: none;
 		border: none;
-		padding: 0;
+		padding: 2px 0;
 		margin: 0;
 		font: inherit;
+		font-weight: 500;
 		color: var(--entity-btn-fg);
 		cursor: pointer;
 		text-align: left;
+		line-height: 1.25;
+	}
+
+	.entity-toggle-list__label:focus-visible {
+		outline: 2px solid var(--entity-focus-ring);
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+
+	.entity-toggle-list__edit-input {
+		background: var(--entity-edit-bg);
+		border: 1px solid var(--entity-edit-border);
+		border-radius: 4px;
+		padding: 3px 6px;
+		margin: 0;
+		font: inherit;
+		font-weight: 500;
+		color: var(--entity-btn-fg);
+		min-width: 90px;
+		max-width: 200px;
+		width: auto;
+	}
+
+	.entity-toggle-list__edit-input:focus {
+		outline: 2px solid var(--entity-focus-ring);
+		outline-offset: 1px;
+	}
+
+	.entity-toggle-list__rename {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		border-radius: 4px;
+		color: var(--entity-btn-fg-hidden);
+		cursor: pointer;
+		opacity: 0;
+		transition:
+			opacity 100ms ease,
+			color 100ms ease,
+			background-color 100ms ease;
+	}
+
+	.entity-toggle-list__item:hover .entity-toggle-list__rename,
+	.entity-toggle-list__rename:focus-visible {
+		opacity: 1;
+	}
+
+	.entity-toggle-list__rename:hover {
+		color: var(--entity-btn-fg);
+		background: var(--entity-rename-hover-bg);
+	}
+
+	.entity-toggle-list__rename:focus-visible {
+		outline: 2px solid var(--entity-focus-ring);
+		outline-offset: 1px;
 	}
 
 	.entity-toggle-list__expand {

package/dist/EntityToggleList.svelte.d.ts

@@ -22,6 +22,13 @@ interface Props {
     onToggle?: (id: string, visible: boolean) => void;
     /** When provided, a native color input is shown and clicking the swatch opens it. */
     onColorChange?: (id: string, color: string) => void;
+    /**
+     * When provided, each item gets a pencil button (shown on hover) that
+     * enters inline-edit mode. Enter/blur commits via this callback;
+     * Escape cancels. Called with the entity's current id and the new
+     * label — the consumer is responsible for updating its own state.
+     */
+    onRename?: (id: string, nextLabel: string) => void;
     /** Max entities to show before collapsing the remainder behind a "+N more" expander. */
     maxVisible?: number;
     /** Optional heading above the list. */

package/dist/SidePanel.svelte

@@ -0,0 +1,272 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cubicOut } from 'svelte/easing';
+	import type { TransitionConfig } from 'svelte/transition';
+
+	/**
+	 * Slide-in drawer panel. Renders adjacent to an `ActivityBar` in a
+	 * `CanvasFrame`'s `leftRail` slot (or anywhere the caller places it).
+	 * The panel itself is purely presentational — the caller owns its
+	 * open/closed state via the bindable `open` prop.
+	 *
+	 * Layout: the panel's width is bindable and mirrors pointer-drag
+	 * resizes on its right edge. Width is clamped to `[minWidth, maxWidth]`.
+	 * A symmetric slide+fade handles the open/close animation via Svelte's
+	 * built-in transition system (no external transition dep), so the panel
+	 * eases both in and out whenever `open` toggles. `prefers-reduced-motion`
+	 * collapses the animation to an instant show/hide.
+	 *
+	 * Close affordances:
+	 * - Clicking the × in the default header
+	 * - Pressing Escape while the panel is open
+	 * - The caller setting `open = false` programmatically
+	 *
+	 * Public class-name contract (stable across versions):
+	 *   .side-panel
+	 *   .side-panel--open
+	 *   .side-panel__header
+	 *   .side-panel__title
+	 *   .side-panel__close
+	 *   .side-panel__body
+	 *   .side-panel__resize-handle
+	 *
+	 * @example
+	 * ```svelte
+	 * <SidePanel bind:open title="Filters" bind:width>
+	 *   <MyFilterForm />
+	 * </SidePanel>
+	 * ```
+	 */
+	interface Props {
+		/** Whether the panel is visible. Bindable. */
+		open: boolean;
+		/** Title rendered in the default header. */
+		title?: string;
+		/** Panel width in px. Bindable; updated live during resize drags. */
+		width?: number;
+		/** Minimum width in px. Default: 220. */
+		minWidth?: number;
+		/** Maximum width in px. Default: 480. */
+		maxWidth?: number;
+		/** When false, the right-edge resize handle is not rendered. Default: true. */
+		resizable?: boolean;
+		/** Fired when the panel wants to close (close button, Escape). */
+		onClose?: () => void;
+		/** Optional replacement for the default header (title + close). */
+		header?: Snippet;
+		/** Panel body content. */
+		children?: Snippet;
+		class?: string;
+	}
+
+	let {
+		open = $bindable(false),
+		title,
+		width = $bindable(280),
+		minWidth = 220,
+		maxWidth = 480,
+		resizable = true,
+		onClose,
+		header,
+		children,
+		class: className = ''
+	}: Props = $props();
+
+	let isDragging = $state(false);
+	let dragStartX = 0;
+	let dragStartWidth = 0;
+
+	// Respect prefers-reduced-motion. Detected once per mount; the slide
+	// transition is the only motion gated on this, so a single read is enough.
+	const prefersReducedMotion =
+		typeof window !== 'undefined' &&
+		typeof window.matchMedia === 'function' &&
+		window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+	/**
+	 * Symmetric horizontal slide + fade used for both enter and exit. Built on
+	 * Svelte's built-in transition contract (no external dep): Svelte calls it
+	 * for `in:` and `out:` and plays the same curve forwards/backwards, so the
+	 * panel eases open and eased shut. Under reduced motion the duration drops
+	 * to 0 for an instant show/hide.
+	 */
+	function slideFade(
+		_node: Element,
+		{ duration = 170, offset = -16 }: { duration?: number; offset?: number } = {}
+	): TransitionConfig {
+		return {
+			duration: prefersReducedMotion ? 0 : duration,
+			easing: cubicOut,
+			css: (t: number) => `transform: translateX(${(1 - t) * offset}px); opacity: ${t};`
+		};
+	}
+
+	function handleClose() {
+		onClose?.();
+	}
+
+	function handleWindowKeydown(event: KeyboardEvent) {
+		if (!open) return;
+		if (event.key === 'Escape') {
+			event.stopPropagation();
+			handleClose();
+		}
+	}
+
+	function beginResize(event: PointerEvent) {
+		if (!resizable) return;
+		event.preventDefault();
+		isDragging = true;
+		dragStartX = event.clientX;
+		dragStartWidth = width;
+		document.addEventListener('pointermove', handleResizeMove);
+		document.addEventListener('pointerup', endResize);
+		document.body.style.cursor = 'col-resize';
+		document.body.style.userSelect = 'none';
+	}
+
+	function handleResizeMove(event: PointerEvent) {
+		if (!isDragging) return;
+		const delta = event.clientX - dragStartX;
+		const next = Math.min(maxWidth, Math.max(minWidth, dragStartWidth + delta));
+		width = next;
+	}
+
+	function endResize() {
+		isDragging = false;
+		document.removeEventListener('pointermove', handleResizeMove);
+		document.removeEventListener('pointerup', endResize);
+		document.body.style.cursor = '';
+		document.body.style.userSelect = '';
+	}
+</script>
+
+<svelte:window onkeydown={handleWindowKeydown} />
+
+{#if open}
+	<aside
+		class="side-panel {open ? 'side-panel--open' : ''} {className}"
+		style:width="{width}px"
+		aria-hidden={!open}
+		transition:slideFade
+	>
+		{#if header}
+			{@render header()}
+		{:else}
+			<div class="side-panel__header">
+				<h2 class="side-panel__title">{title ?? ''}</h2>
+				<button
+					type="button"
+					class="side-panel__close"
+					onclick={handleClose}
+					aria-label="Close panel"
+					title="Close"
+				>
+					<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+						<path
+							d="M18.3 5.71 12 12.01l-6.29-6.3-1.42 1.41 6.3 6.3-6.3 6.29 1.42 1.41 6.29-6.29 6.29 6.29 1.41-1.41-6.29-6.29 6.29-6.3z"
+							fill="currentColor"
+						/>
+					</svg>
+				</button>
+			</div>
+		{/if}
+
+		<div class="side-panel__body">
+			{#if children}{@render children()}{/if}
+		</div>
+
+		{#if resizable}
+			<div
+				class="side-panel__resize-handle"
+				role="separator"
+				aria-orientation="vertical"
+				aria-label="Resize panel"
+				onpointerdown={beginResize}
+			></div>
+		{/if}
+	</aside>
+{/if}
+
+<style>
+	.side-panel {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		flex: 0 0 auto;
+		height: 100%;
+		background: var(--side-panel-bg, #fafafa);
+		border-right: 1px solid var(--side-panel-border, rgba(0, 0, 0, 0.1));
+		box-shadow: var(--side-panel-shadow, 2px 0 6px rgba(0, 0, 0, 0.04));
+		overflow: hidden;
+		min-height: 0;
+	}
+
+	.side-panel__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10px 12px;
+		border-bottom: 1px solid var(--side-panel-border, rgba(0, 0, 0, 0.08));
+		flex: 0 0 auto;
+	}
+
+	.side-panel__title {
+		margin: 0;
+		font:
+			13px/1.3 system-ui,
+			-apple-system,
+			Segoe UI,
+			sans-serif;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--side-panel-title-fg, #555);
+	}
+
+	.side-panel__close {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		padding: 0;
+		border: none;
+		background: transparent;
+		color: var(--side-panel-close-fg, #666);
+		border-radius: 4px;
+		cursor: pointer;
+	}
+
+	.side-panel__close:hover {
+		background: rgba(0, 0, 0, 0.06);
+		color: #111;
+	}
+
+	.side-panel__close:focus-visible {
+		outline: 2px solid rgba(59, 130, 246, 0.55);
+		outline-offset: 1px;
+	}
+
+	.side-panel__body {
+		flex: 1 1 auto;
+		min-height: 0;
+		overflow: auto;
+	}
+
+	.side-panel__resize-handle {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		width: 6px;
+		cursor: col-resize;
+		background: transparent;
+		transition: background-color 120ms ease;
+	}
+
+	.side-panel__resize-handle:hover,
+	.side-panel__resize-handle:active {
+		background: rgba(59, 130, 246, 0.2);
+	}
+</style>

package/dist/SidePanel.svelte.d.ts

@@ -0,0 +1,59 @@
+import type { Snippet } from 'svelte';
+/**
+ * Slide-in drawer panel. Renders adjacent to an `ActivityBar` in a
+ * `CanvasFrame`'s `leftRail` slot (or anywhere the caller places it).
+ * The panel itself is purely presentational — the caller owns its
+ * open/closed state via the bindable `open` prop.
+ *
+ * Layout: the panel's width is bindable and mirrors pointer-drag
+ * resizes on its right edge. Width is clamped to `[minWidth, maxWidth]`.
+ * A symmetric slide+fade handles the open/close animation via Svelte's
+ * built-in transition system (no external transition dep), so the panel
+ * eases both in and out whenever `open` toggles. `prefers-reduced-motion`
+ * collapses the animation to an instant show/hide.
+ *
+ * Close affordances:
+ * - Clicking the × in the default header
+ * - Pressing Escape while the panel is open
+ * - The caller setting `open = false` programmatically
+ *
+ * Public class-name contract (stable across versions):
+ *   .side-panel
+ *   .side-panel--open
+ *   .side-panel__header
+ *   .side-panel__title
+ *   .side-panel__close
+ *   .side-panel__body
+ *   .side-panel__resize-handle
+ *
+ * @example
+ * ```svelte
+ * <SidePanel bind:open title="Filters" bind:width>
+ *   <MyFilterForm />
+ * </SidePanel>
+ * ```
+ */
+interface Props {
+    /** Whether the panel is visible. Bindable. */
+    open: boolean;
+    /** Title rendered in the default header. */
+    title?: string;
+    /** Panel width in px. Bindable; updated live during resize drags. */
+    width?: number;
+    /** Minimum width in px. Default: 220. */
+    minWidth?: number;
+    /** Maximum width in px. Default: 480. */
+    maxWidth?: number;
+    /** When false, the right-edge resize handle is not rendered. Default: true. */
+    resizable?: boolean;
+    /** Fired when the panel wants to close (close button, Escape). */
+    onClose?: () => void;
+    /** Optional replacement for the default header (title + close). */
+    header?: Snippet;
+    /** Panel body content. */
+    children?: Snippet;
+    class?: string;
+}
+declare const SidePanel: import("svelte").Component<Props, {}, "width" | "open">;
+type SidePanel = ReturnType<typeof SidePanel>;
+export default SidePanel;