@svadmin/ui 0.48.0 → 0.49.0

package/dist/components/AutoTable.svelte

@@ -75,6 +75,7 @@
   interface Props {
     resourceName: string;
     selectable?: boolean;
+    density?: 'compact' | 'comfortable';
     /** Custom header actions (right side) */
     headerActions?: Snippet;
     /** Custom cell renderers by field key */
@@ -98,6 +99,7 @@
   let {
     resourceName,
     selectable = true,
+    density = 'comfortable',
     headerActions,
     columns: customColumns,
     defaultCellRenderer,
@@ -109,6 +111,8 @@
     sorters: externalSorters,
   }: Props = $props();
   const adminContext = captureAdminContext();
+  const headerDensityClass = $derived(density === 'compact' ? 'h-8 py-1.5 text-[0.6875rem]' : 'h-9 py-2.5 text-xs');
+  const cellDensityClass = $derived(density === 'compact' ? 'h-8 px-2 py-1 text-xs' : 'h-10 p-2 text-sm');
 
   const resource = $derived(getResource(resourceName));
   const primaryKey = $derived(resource.primaryKey ?? 'id');
@@ -682,7 +686,7 @@
   </div>
 
   <!-- Table (TanStack-powered) -->
-  <div class="rounded-[24px] bg-card/80 backdrop-blur-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden ring-1 ring-border/30" role="region" aria-label="{resource.label} {i18n.t('common.list')}">
+  <div class="overflow-hidden rounded-lg border border-border bg-card shadow-sm" role="region" aria-label="{resource.label} {i18n.t('common.list')}" data-table-density={density}>
     {#if query.isLoading}
       <div class="p-4 space-y-3">
         <div class="flex gap-4 mb-2">
@@ -719,7 +723,7 @@
                   {@const header = col.header as typeof headerGroup.headers[0]}
                   <Table.Head
                     {...dragProps}
-                    class={cn("bg-transparent hover:bg-muted/10 border-b border-border/20 uppercase tracking-[0.12em] text-[10px] text-muted-foreground/70 font-semibold py-4", dragProps.class)}
+                    class={cn('border-b border-border bg-muted/25 font-medium tracking-normal text-muted-foreground hover:bg-muted/40', headerDensityClass, dragProps.class)}
                     style={header_getSize(header) != null && header_getSize(header) !== 150 ? `width:${header_getSize(header)}px` : undefined}
                   >
                     {#if header.id === '_select'}
@@ -764,7 +768,7 @@
                   {#snippet child({ props })}
                     <Table.Row {...props} class="transition-all duration-300 border-b border-border/10 {row_getIsSelected(row) ? 'bg-primary/5' : 'hover:bg-muted/20'}">
                       {#each visibleCells as cell, _i (_i)}
-                        <Table.Cell>
+                        <Table.Cell class={cellDensityClass}>
                           {#if cell.column.id === '_select'}
                             <Checkbox
                               checked={row_getIsSelected(row)}

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

@@ -3,6 +3,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
     selectable?: boolean;
+    density?: 'compact' | 'comfortable';
     /** Custom header actions (right side) */
     headerActions?: Snippet;
     /** Custom cell renderers by field key */

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/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.48.0",
+  "version": "0.49.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [