@svadmin/ui 0.47.1 → 0.49.0

package/dist/components/content/WorkspaceActionBar.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    title: string;
+    description?: string;
+    status?: string;
+    primaryAction: Snippet;
+    secondaryActions?: Snippet;
+    class?: string;
+  }
+
+  let { title, description, status, primaryAction, secondaryActions, class: className = '' }: Props = $props();
+</script>
+
+<section
+  class={cn('flex flex-col gap-3 border-y border-border bg-card px-4 py-3 sm:flex-row sm:items-center sm:justify-between', className)}
+  aria-label={title}
+  data-svadmin-workspace-action-bar
+>
+  <div class="min-w-0">
+    <div class="flex flex-wrap items-center gap-2">
+      {#if status}<span class="rounded-sm bg-warning/15 px-2 py-0.5 text-xs font-medium text-warning-foreground">{status}</span>{/if}
+      <h2 class="text-sm font-semibold text-foreground">{title}</h2>
+    </div>
+    {#if description}<p class="mt-1 text-xs leading-5 text-muted-foreground">{description}</p>{/if}
+  </div>
+  <div class="flex shrink-0 flex-wrap items-center gap-2">
+    {#if secondaryActions}{@render secondaryActions()}{/if}
+    {@render primaryAction()}
+  </div>
+</section>

package/dist/components/content/WorkspaceActionBar.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    status?: string;
+    primaryAction: Snippet;
+    secondaryActions?: Snippet;
+    class?: string;
+}
+declare const WorkspaceActionBar: import("svelte").Component<Props, {}, "">;
+type WorkspaceActionBar = ReturnType<typeof WorkspaceActionBar>;
+export default WorkspaceActionBar;

package/dist/components/content/WorkspaceInspector.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { PanelRightClose, PanelRightOpen } from '@lucide/svelte';
+  import { Button } from '../ui/button/index.js';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    title: string;
+    description?: string;
+    open?: boolean;
+    ontoggle?: (open: boolean) => void;
+    children: Snippet;
+    footer?: Snippet;
+    openLabel?: string;
+    closeLabel?: string;
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    open = true,
+    ontoggle,
+    children,
+    footer,
+    openLabel = 'Open inspector',
+    closeLabel = 'Close inspector',
+    class: className = '',
+  }: Props = $props();
+
+  function toggle(): void {
+    ontoggle?.(!open);
+  }
+</script>
+
+<aside class={cn('overflow-hidden rounded-lg border border-border bg-card', className)} data-svadmin-workspace-inspector data-open={open}>
+  {#if open}
+    <header class="flex items-start justify-between gap-3 border-b border-border px-4 py-3">
+      <div class="min-w-0">
+        <h2 class="text-sm font-semibold text-foreground">{title}</h2>
+        {#if description}<p class="mt-1 text-xs leading-5 text-muted-foreground">{description}</p>{/if}
+      </div>
+      <Button variant="ghost" size="icon-sm" aria-label={closeLabel} title={closeLabel} onclick={toggle}>
+        <PanelRightClose class="size-4" />
+      </Button>
+    </header>
+    <div class="max-h-[calc(100vh-15rem)] overflow-y-auto p-4">{@render children()}</div>
+    {#if footer}<footer class="border-t border-border p-3">{@render footer()}</footer>{/if}
+  {:else}
+    <div class="flex min-h-64 flex-col items-center gap-3 py-3">
+      <Button variant="ghost" size="icon-sm" aria-label={openLabel} title={openLabel} onclick={toggle}>
+        <PanelRightOpen class="size-4" />
+      </Button>
+      <span class="[writing-mode:vertical-rl] text-xs font-medium text-muted-foreground">{title}</span>
+    </div>
+  {/if}
+</aside>

package/dist/components/content/WorkspaceInspector.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    open?: boolean;
+    ontoggle?: (open: boolean) => void;
+    children: Snippet;
+    footer?: Snippet;
+    openLabel?: string;
+    closeLabel?: string;
+    class?: string;
+}
+declare const WorkspaceInspector: import("svelte").Component<Props, {}, "">;
+type WorkspaceInspector = ReturnType<typeof WorkspaceInspector>;
+export default WorkspaceInspector;

package/dist/components/content/WorkspaceLayout.svelte

@@ -7,6 +7,8 @@
     secondary?: Snippet;
     summary?: Snippet;
     secondaryWidth?: string;
+    secondaryCollapsed?: boolean;
+    secondaryCollapsedWidth?: string;
     mobileOrder?: 'primary-first' | 'secondary-first';
     class?: string;
   }
@@ -16,12 +18,21 @@
     secondary,
     summary,
     secondaryWidth = '22rem',
+    secondaryCollapsed = false,
+    secondaryCollapsedWidth = '3rem',
     mobileOrder = 'primary-first',
     class: className = '',
   }: Props = $props();
+
+  const resolvedSecondaryWidth = $derived(secondaryCollapsed ? secondaryCollapsedWidth : secondaryWidth);
 </script>
 
-<div class={cn('flex flex-col gap-6', className)} data-svadmin-workspace-layout style:--workspace-secondary-width={secondaryWidth}>
+<div
+  class={cn('flex flex-col gap-6', className)}
+  data-svadmin-workspace-layout
+  data-secondary-collapsed={secondaryCollapsed}
+  style:--workspace-secondary-width={resolvedSecondaryWidth}
+>
   {#if summary}<div data-svadmin-workspace-summary>{@render summary()}</div>{/if}
   <div class={cn('grid min-w-0 items-start gap-6 xl:grid-cols-[minmax(0,1fr)_var(--workspace-secondary-width)]', mobileOrder === 'secondary-first' && 'grid-rows-[auto_auto]')}>
     {#if mobileOrder === 'secondary-first' && secondary}<aside class="order-1 min-w-0 xl:order-2">{@render secondary()}</aside>{/if}

package/dist/components/content/WorkspaceLayout.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     secondary?: Snippet;
     summary?: Snippet;
     secondaryWidth?: string;
+    secondaryCollapsed?: boolean;
+    secondaryCollapsedWidth?: string;
     mobileOrder?: 'primary-first' | 'secondary-first';
     class?: string;
 }

package/dist/components/content/WorkspaceSplitPane.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    primary: Snippet;
+    secondary: Snippet;
+    secondaryWidth?: string;
+    reverse?: boolean;
+    class?: string;
+  }
+
+  let {
+    primary,
+    secondary,
+    secondaryWidth = '42%',
+    reverse = false,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class={cn(
+    'grid min-w-0 overflow-hidden rounded-lg border border-border bg-card',
+    reverse ? 'lg:grid-cols-[var(--workspace-split-width)_minmax(0,1fr)]' : 'lg:grid-cols-[minmax(0,1fr)_var(--workspace-split-width)]',
+    className,
+  )}
+  style:--workspace-split-width={secondaryWidth}
+  data-svadmin-workspace-split-pane
+  data-reverse={reverse}
+>
+  <section class={cn('min-w-0 p-4', reverse && 'lg:order-2')} data-svadmin-split-primary>{@render primary()}</section>
+  <section class={cn('min-w-0 border-t border-border bg-muted/15 p-4 lg:border-l lg:border-t-0', reverse && 'lg:order-1 lg:border-l-0 lg:border-r')} data-svadmin-split-secondary>{@render secondary()}</section>
+</div>

package/dist/components/content/WorkspaceSplitPane.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    primary: Snippet;
+    secondary: Snippet;
+    secondaryWidth?: string;
+    reverse?: boolean;
+    class?: string;
+}
+declare const WorkspaceSplitPane: import("svelte").Component<Props, {}, "">;
+type WorkspaceSplitPane = ReturnType<typeof WorkspaceSplitPane>;
+export default WorkspaceSplitPane;

package/dist/components/content/WorkspaceStageStepper.svelte

@@ -0,0 +1,71 @@
+<script module lang="ts">
+  export type WorkspaceStageStatus = 'complete' | 'current' | 'blocked' | 'pending';
+
+  export interface WorkspaceStage {
+    id: string;
+    label: string;
+    description?: string;
+    status: WorkspaceStageStatus;
+  }
+</script>
+
+<script lang="ts">
+  import { AlertTriangle, Check, Circle } from '@lucide/svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    stages: WorkspaceStage[];
+    activeId: string;
+    onselect?: (stage: WorkspaceStage) => void;
+    ariaLabel?: string;
+    class?: string;
+  }
+
+  let {
+    stages,
+    activeId,
+    onselect,
+    ariaLabel = 'Workflow stages',
+    class: className = '',
+  }: Props = $props();
+
+  const markerClass: Record<WorkspaceStageStatus, string> = {
+    complete: 'border-success/30 bg-success/10 text-success',
+    current: 'border-primary bg-primary text-primary-foreground',
+    blocked: 'border-warning/40 bg-warning/15 text-warning-foreground',
+    pending: 'border-border bg-background text-muted-foreground',
+  };
+</script>
+
+<nav aria-label={ariaLabel} class={cn('overflow-x-auto', className)} data-svadmin-workspace-stages>
+  <ol class="flex min-w-max items-start gap-0 px-0.5 py-1">
+    {#each stages as stage, index (stage.id)}
+      <li class="flex items-start">
+        <button
+          type="button"
+          class="group grid min-w-28 grid-cols-[auto_minmax(0,1fr)] gap-x-2 rounded-md px-2 py-1.5 text-left outline-none transition-colors hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring sm:min-w-36"
+          aria-current={stage.id === activeId ? 'step' : undefined}
+          aria-label={`${stage.label}: ${stage.status}`}
+          onclick={() => onselect?.(stage)}
+        >
+          <span class={cn('flex size-7 items-center justify-center rounded-full border', markerClass[stage.status])}>
+            {#if stage.status === 'complete'}
+              <Check class="size-3.5" />
+            {:else if stage.status === 'blocked'}
+              <AlertTriangle class="size-3.5" />
+            {:else}
+              <Circle class={cn('size-2.5', stage.status === 'current' && 'fill-current')} />
+            {/if}
+          </span>
+          <span class="min-w-0 pt-0.5">
+            <span class={cn('block text-xs font-medium', stage.id === activeId ? 'text-foreground' : 'text-muted-foreground')}>{stage.label}</span>
+            {#if stage.description}<span class="mt-0.5 block max-w-32 truncate text-[0.6875rem] text-muted-foreground">{stage.description}</span>{/if}
+          </span>
+        </button>
+        {#if index < stages.length - 1}
+          <span class={cn('mt-5 h-px w-4 bg-border sm:w-7', stage.status === 'complete' && 'bg-success/50')} aria-hidden="true"></span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

package/dist/components/content/WorkspaceStageStepper.svelte.d.ts

@@ -0,0 +1,17 @@
+export type WorkspaceStageStatus = 'complete' | 'current' | 'blocked' | 'pending';
+export interface WorkspaceStage {
+    id: string;
+    label: string;
+    description?: string;
+    status: WorkspaceStageStatus;
+}
+interface Props {
+    stages: WorkspaceStage[];
+    activeId: string;
+    onselect?: (stage: WorkspaceStage) => void;
+    ariaLabel?: string;
+    class?: string;
+}
+declare const WorkspaceStageStepper: import("svelte").Component<Props, {}, "">;
+type WorkspaceStageStepper = ReturnType<typeof WorkspaceStageStepper>;
+export default WorkspaceStageStepper;

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

@@ -3,6 +3,10 @@ export { default as ContentPageHeader } from './ContentPageHeader.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as PageToolbar } from './PageToolbar.svelte';
 export { default as WorkspaceLayout } from './WorkspaceLayout.svelte';
+export { default as WorkspaceStageStepper } from './WorkspaceStageStepper.svelte';
+export { default as WorkspaceActionBar } from './WorkspaceActionBar.svelte';
+export { default as WorkspaceInspector } from './WorkspaceInspector.svelte';
+export { default as WorkspaceSplitPane } from './WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './SettingsGroup.svelte';
 export { default as SettingsFieldRow } from './SettingsFieldRow.svelte';
 export { default as MetricBlock } from './MetricBlock.svelte';

package/dist/components/content/index.js

@@ -3,6 +3,10 @@ export { default as ContentPageHeader } from './ContentPageHeader.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as PageToolbar } from './PageToolbar.svelte';
 export { default as WorkspaceLayout } from './WorkspaceLayout.svelte';
+export { default as WorkspaceStageStepper } from './WorkspaceStageStepper.svelte';
+export { default as WorkspaceActionBar } from './WorkspaceActionBar.svelte';
+export { default as WorkspaceInspector } from './WorkspaceInspector.svelte';
+export { default as WorkspaceSplitPane } from './WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './SettingsGroup.svelte';
 export { default as SettingsFieldRow } from './SettingsFieldRow.svelte';
 export { default as MetricBlock } from './MetricBlock.svelte';

package/dist/components/ui/sheet/sheet.svelte

@@ -1,8 +1,51 @@
+<script lang="ts" module>
+	let bodyScrollLockDepth = 0;
+	let bodyOverflowBeforeLock = "";
+	const openSheets: HTMLElement[] = [];
+
+	function lockBodyScroll() {
+		if (bodyScrollLockDepth === 0) bodyOverflowBeforeLock = document.body.style.overflow;
+		bodyScrollLockDepth += 1;
+		document.body.style.overflow = "hidden";
+	}
+
+	function unlockBodyScroll() {
+		bodyScrollLockDepth = Math.max(0, bodyScrollLockDepth - 1);
+		if (bodyScrollLockDepth > 0) return;
+		document.body.style.overflow = bodyOverflowBeforeLock;
+		bodyOverflowBeforeLock = "";
+	}
+
+	function registerSheet(panel: HTMLElement) {
+		openSheets.push(panel);
+	}
+
+	function unregisterSheet(panel: HTMLElement) {
+		const index = openSheets.lastIndexOf(panel);
+		if (index >= 0) openSheets.splice(index, 1);
+	}
+
+	function isTopmostSheet(panel: HTMLElement) {
+		return openSheets.at(-1) === panel;
+	}
+</script>
+
 <script lang="ts">
 /* eslint-disable svelte/no-unused-svelte-ignore */
+	import { tick } from "svelte";
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
+	const focusableSelector = [
+		'a[href]',
+		'button',
+		'input',
+		'select',
+		'textarea',
+		'[tabindex]:not([tabindex="-1"])',
+		'[contenteditable]:not([contenteditable="false"])',
+	].join(",");
+
 	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		open?: boolean;
 		side?: "left" | "right";
@@ -15,6 +58,7 @@
 		side = "right",
 		onClose,
 		class: className,
+		tabindex = -1,
 		children,
 		...restProps
 	}: Props = $props();
@@ -24,22 +68,88 @@
 		onClose?.();
 	}
 
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === "Escape") close();
+	function isContentEditableHost(element: HTMLElement) {
+		const contentEditable = element.getAttribute("contenteditable");
+		const isEditable = element.isContentEditable || (contentEditable !== null && contentEditable.toLowerCase() !== "false");
+		return isEditable && !element.parentElement?.isContentEditable;
 	}
 
-	$effect(() => {
-		if (open) {
-			document.addEventListener("keydown", handleKeydown);
-			document.body.style.overflow = "hidden";
-			return () => {
-				document.removeEventListener("keydown", handleKeydown);
-				document.body.style.overflow = "";
-			};
+	function isVisible(element: HTMLElement) {
+		for (let current: HTMLElement | null = element; current; current = current.parentElement) {
+			const style = getComputedStyle(current);
+			if (style.display === "none" || style.visibility === "hidden") return false;
+			if (current === ref) break;
 		}
+		return true;
+	}
+
+	function isTabbable(element: HTMLElement) {
+		if (element.matches(":disabled, [aria-disabled='true']")) return false;
+		if (element.closest("[hidden], [inert], [aria-hidden='true']")) return false;
+		if (element.hasAttribute("tabindex") && element.tabIndex < 0) return false;
+		if (!element.hasAttribute("tabindex") && !isContentEditableHost(element) && element.tabIndex < 0) return false;
+		return isVisible(element);
+	}
+
+	function tabbableElements() {
+		return ref ? [...ref.querySelectorAll<HTMLElement>(focusableSelector)].filter(isTabbable) : [];
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.defaultPrevented || !open || !ref || !isTopmostSheet(ref)) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if (event.key !== "Tab") return;
+
+		const tabbable = tabbableElements();
+		if (tabbable.length === 0) {
+			event.preventDefault();
+			ref.focus();
+			return;
+		}
+
+		const first = tabbable[0];
+		const last = tabbable.at(-1);
+		const activeIndex = tabbable.indexOf(document.activeElement as HTMLElement);
+		if (!ref.contains(document.activeElement) || activeIndex === -1) {
+			event.preventDefault();
+			(event.shiftKey ? last : first)?.focus();
+		} else if (event.shiftKey && activeIndex === 0) {
+			event.preventDefault();
+			last?.focus();
+		} else if (!event.shiftKey && activeIndex === tabbable.length - 1) {
+			event.preventDefault();
+			first.focus();
+		}
+	}
+
+	$effect(() => {
+		if (!open || !ref) return;
+		const panel = ref;
+		const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		registerSheet(panel);
+		lockBodyScroll();
+		void tick().then(() => {
+			if (open && ref === panel && isTopmostSheet(panel)) {
+				(tabbableElements()[0] ?? panel).focus();
+			}
+		});
+		return () => {
+			unregisterSheet(panel);
+			unlockBodyScroll();
+			const remainingSheet = openSheets.at(-1);
+			if (!remainingSheet || (previousFocus && remainingSheet.contains(previousFocus))) {
+				previousFocus?.focus();
+			}
+		};
 	});
 </script>
 
+<svelte:document onkeydown={handleKeydown} />
+
 {#if open}
 	<!-- Overlay -->
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
@@ -50,9 +160,11 @@
 	></div>
 
 	<!-- Sheet panel -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 	<div
 		bind:this={ref}
 		data-slot="sheet"
+		{tabindex}
 		class={cn(
 			"fixed z-50 flex translate-x-0 flex-col gap-4 bg-background p-6 shadow-lg",
 			side === "right"

package/dist/index.d.ts

@@ -159,6 +159,11 @@ export { default as ContentPageHeader } from './components/content/ContentPageHe
 export { default as SectionHeader } from './components/content/SectionHeader.svelte';
 export { default as PageToolbar } from './components/content/PageToolbar.svelte';
 export { default as WorkspaceLayout } from './components/content/WorkspaceLayout.svelte';
+export { default as WorkspaceStageStepper } from './components/content/WorkspaceStageStepper.svelte';
+export type { WorkspaceStage, WorkspaceStageStatus } from './components/content/WorkspaceStageStepper.svelte';
+export { default as WorkspaceActionBar } from './components/content/WorkspaceActionBar.svelte';
+export { default as WorkspaceInspector } from './components/content/WorkspaceInspector.svelte';
+export { default as WorkspaceSplitPane } from './components/content/WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './components/content/SettingsGroup.svelte';
 export { default as SettingsFieldRow } from './components/content/SettingsFieldRow.svelte';
 export { default as MetricBlock } from './components/content/MetricBlock.svelte';

package/dist/index.js

@@ -174,6 +174,10 @@ export { default as ContentPageHeader } from './components/content/ContentPageHe
 export { default as SectionHeader } from './components/content/SectionHeader.svelte';
 export { default as PageToolbar } from './components/content/PageToolbar.svelte';
 export { default as WorkspaceLayout } from './components/content/WorkspaceLayout.svelte';
+export { default as WorkspaceStageStepper } from './components/content/WorkspaceStageStepper.svelte';
+export { default as WorkspaceActionBar } from './components/content/WorkspaceActionBar.svelte';
+export { default as WorkspaceInspector } from './components/content/WorkspaceInspector.svelte';
+export { default as WorkspaceSplitPane } from './components/content/WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './components/content/SettingsGroup.svelte';
 export { default as SettingsFieldRow } from './components/content/SettingsFieldRow.svelte';
 export { default as MetricBlock } from './components/content/MetricBlock.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.47.1",
+  "version": "0.49.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.38.0",
+    "@svadmin/core": "^0.39.0",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.22.0",