@svadmin/ui 0.55.0 → 0.56.0

package/dist/components/DetailDrawer.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  import type { HTMLAttributes } from 'svelte/elements';
-  import { cn, type WithElementRef } from '../utils.js';
-  import * as Sheet from './ui/sheet/index.js';
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "../utils.js";
+  import * as Sheet from "./ui/sheet/index.js";
 
   type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     open?: boolean;
@@ -11,30 +11,32 @@
     description?: string;
     descriptionId?: string;
     closeLabel?: string;
-    side?: 'left' | 'right';
+    side?: "left" | "right";
     width?: string;
     onClose?: () => void;
     children?: Snippet;
     footer?: Snippet;
+    extra?: Snippet;
   };
 
   let {
     open = $bindable(false),
-    title = '',
-    description = '',
-    side = 'right',
-    width = 'max-w-md w-full sm:max-w-lg',
+    title = "",
+    description = "",
+    side = "right",
+    width = "max-w-md w-full sm:max-w-lg",
     ref = $bindable(null),
     class: className,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby,
-    'aria-describedby': ariaDescribedby,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
     titleId,
     descriptionId,
-    closeLabel = 'Close',
+    closeLabel = "Close",
     onClose,
     children,
     footer,
+    extra,
     ...restProps
   }: Props = $props();
 
@@ -50,34 +52,43 @@
   {side}
   onClose={handleClose}
   {closeLabel}
-  class={cn('overflow-y-auto', width, className)}
+  class={cn("gap-0 p-0 overflow-hidden", width, className)}
   role="dialog"
   aria-modal="true"
-  aria-label={(ariaLabelledby || titleId) ? ariaLabel : (ariaLabel || title || 'Details')}
+  aria-label={(ariaLabelledby || titleId) ? ariaLabel : (ariaLabel || title || "Details")}
   aria-labelledby={ariaLabelledby || (titleId ? titleId : undefined)}
   aria-describedby={ariaDescribedby || (descriptionId ? descriptionId : undefined)}
   {...restProps}
 >
-  <Sheet.Content class="flex h-full flex-col">
-    {#if title || description}
-      <Sheet.Header>
-        {#if title}
-          <Sheet.Title id={titleId}>{title}</Sheet.Title>
-        {/if}
-        {#if description}
-          <Sheet.Description id={descriptionId}>{description}</Sheet.Description>
-        {/if}
+  <Sheet.Content class="flex h-full flex-col gap-0 p-0">
+    {#if title || description || extra}
+      <Sheet.Header class="flex-shrink-0 border-b border-border px-6 py-4 pr-12">
+        <div class="flex items-start justify-between gap-4">
+          <div class="flex min-w-0 flex-1 flex-col gap-1.5">
+            {#if title}
+              <Sheet.Title id={titleId}>{title}</Sheet.Title>
+            {/if}
+            {#if description}
+              <Sheet.Description id={descriptionId}>{description}</Sheet.Description>
+            {/if}
+          </div>
+          {#if extra}
+            <div class="flex flex-shrink-0 items-center gap-2">
+              {@render extra()}
+            </div>
+          {/if}
+        </div>
       </Sheet.Header>
     {/if}
 
-    <div class="flex-1 overflow-y-auto py-2">
+    <div class="flex-1 overflow-y-auto p-6">
       {#if children}
         {@render children()}
       {/if}
     </div>
 
     {#if footer}
-      <Sheet.Footer>
+      <Sheet.Footer class="mt-auto flex-shrink-0 border-t border-border px-6 py-4">
         {@render footer()}
       </Sheet.Footer>
     {/if}

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

@@ -1,6 +1,6 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import { type WithElementRef } from '../utils.js';
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../utils.js";
 type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     open?: boolean;
     title?: string;
@@ -8,11 +8,12 @@ type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     description?: string;
     descriptionId?: string;
     closeLabel?: string;
-    side?: 'left' | 'right';
+    side?: "left" | "right";
     width?: string;
     onClose?: () => void;
     children?: Snippet;
     footer?: Snippet;
+    extra?: Snippet;
 };
 declare const DetailDrawer: import("svelte").Component<Props, {}, "open" | "ref">;
 type DetailDrawer = ReturnType<typeof DetailDrawer>;

package/dist/components/content/WorkspaceActionBar.svelte

@@ -1,3 +1,7 @@
+<script module lang="ts">
+  export type WorkspaceActionBarTone = 'default' | 'warning' | 'success' | 'destructive' | 'info';
+</script>
+
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../../utils.js';
@@ -6,12 +10,29 @@
     title: string;
     description?: string;
     status?: string;
+    statusTone?: WorkspaceActionBarTone;
     primaryAction: Snippet;
     secondaryActions?: Snippet;
     class?: string;
   }
 
-  let { title, description, status, primaryAction, secondaryActions, class: className = '' }: Props = $props();
+  let {
+    title,
+    description,
+    status,
+    statusTone = 'warning',
+    primaryAction,
+    secondaryActions,
+    class: className = '',
+  }: Props = $props();
+
+  const toneClassMap: Record<WorkspaceActionBarTone, string> = {
+    default: 'bg-muted text-muted-foreground',
+    warning: 'bg-warning/15 text-warning-foreground',
+    success: 'bg-success/15 text-success',
+    destructive: 'bg-destructive/15 text-destructive',
+    info: 'bg-info/15 text-info',
+  };
 </script>
 
 <section
@@ -21,7 +42,11 @@
 >
   <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}
+      {#if status}
+        <span class={cn('rounded-sm px-2 py-0.5 text-xs font-medium', toneClassMap[statusTone] || toneClassMap.warning)}>
+          {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}

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

@@ -1,8 +1,10 @@
+export type WorkspaceActionBarTone = 'default' | 'warning' | 'success' | 'destructive' | 'info';
 import type { Snippet } from 'svelte';
 interface Props {
     title: string;
     description?: string;
     status?: string;
+    statusTone?: WorkspaceActionBarTone;
     primaryAction: Snippet;
     secondaryActions?: Snippet;
     class?: string;

package/dist/components/content/WorkspaceTabBar.svelte

@@ -0,0 +1,94 @@
+<script module lang="ts">
+  import type { Component } from 'svelte';
+
+  export interface WorkspaceTabItem {
+    id: string;
+    label: string;
+    icon?: Component<{ class?: string; 'aria-hidden'?: string | boolean }>;
+    badge?: string | number;
+    disabled?: boolean;
+    description?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    items: WorkspaceTabItem[];
+    activeId: string;
+    onselect?: (item: WorkspaceTabItem) => void;
+    variant?: 'segmented' | 'pill' | 'underline';
+    ariaLabel?: string;
+    class?: string;
+  }
+
+  let {
+    items,
+    activeId,
+    onselect,
+    variant = 'segmented',
+    ariaLabel = 'Workspace tabs',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<nav
+  aria-label={ariaLabel}
+  class={cn(
+    'flex items-center gap-1 overflow-x-auto',
+    variant === 'segmented' && 'rounded-lg border border-border bg-muted/40 p-1',
+    variant === 'pill' && 'gap-1.5 p-0.5',
+    variant === 'underline' && 'gap-2 border-b border-border',
+    className,
+  )}
+  data-svadmin-workspace-tab-bar
+  data-variant={variant}
+>
+  {#each items as item (item.id)}
+    {@const Icon = item.icon}
+    {@const isActive = item.id === activeId}
+    <button
+      type="button"
+      disabled={item.disabled}
+      class={cn(
+        'inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+        variant === 'segmented' && [
+          isActive
+            ? 'bg-background text-foreground shadow-sm font-semibold'
+            : 'text-muted-foreground hover:bg-background/50 hover:text-foreground',
+        ],
+        variant === 'pill' && [
+          isActive
+            ? 'bg-primary text-primary-foreground font-semibold'
+            : 'bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground',
+        ],
+        variant === 'underline' && [
+          'rounded-none border-b-2 px-3 py-2',
+          isActive
+            ? 'border-primary text-primary font-semibold'
+            : 'border-transparent text-muted-foreground hover:border-border hover:text-foreground',
+        ],
+      )}
+      aria-current={isActive ? 'page' : undefined}
+      onclick={() => onselect?.(item)}
+    >
+      {#if Icon}
+        <Icon class="size-4 shrink-0" aria-hidden="true" />
+      {/if}
+      <span>{item.label}</span>
+      {#if item.badge !== undefined && item.badge !== ''}
+        <span
+          class={cn(
+            'inline-flex items-center justify-center rounded-full px-1.5 py-0.5 text-[0.6875rem] font-bold leading-none tabular-nums',
+            isActive
+              ? (variant === 'pill' ? 'bg-primary-foreground/20 text-primary-foreground' : 'bg-primary/10 text-primary')
+              : 'bg-muted text-muted-foreground',
+          )}
+        >
+          {item.badge}
+        </span>
+      {/if}
+    </button>
+  {/each}
+</nav>

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

@@ -0,0 +1,23 @@
+import type { Component } from 'svelte';
+export interface WorkspaceTabItem {
+    id: string;
+    label: string;
+    icon?: Component<{
+        class?: string;
+        'aria-hidden'?: string | boolean;
+    }>;
+    badge?: string | number;
+    disabled?: boolean;
+    description?: string;
+}
+interface Props {
+    items: WorkspaceTabItem[];
+    activeId: string;
+    onselect?: (item: WorkspaceTabItem) => void;
+    variant?: 'segmented' | 'pill' | 'underline';
+    ariaLabel?: string;
+    class?: string;
+}
+declare const WorkspaceTabBar: Component<Props, {}, "">;
+type WorkspaceTabBar = ReturnType<typeof WorkspaceTabBar>;
+export default WorkspaceTabBar;

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

@@ -5,6 +5,9 @@ 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 type { WorkspaceActionBarTone } from './WorkspaceActionBar.svelte';
+export { default as WorkspaceTabBar } from './WorkspaceTabBar.svelte';
+export type { WorkspaceTabItem } from './WorkspaceTabBar.svelte';
 export { default as WorkspaceInspector } from './WorkspaceInspector.svelte';
 export { default as WorkspaceSplitPane } from './WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './SettingsGroup.svelte';

package/dist/components/content/index.js

@@ -5,6 +5,7 @@ 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 WorkspaceTabBar } from './WorkspaceTabBar.svelte';
 export { default as WorkspaceInspector } from './WorkspaceInspector.svelte';
 export { default as WorkspaceSplitPane } from './WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './SettingsGroup.svelte';

package/dist/components/fieldComponentMap.js

@@ -25,6 +25,7 @@ import CodeField from './fields/CodeField.svelte';
 import AvatarField from './fields/AvatarField.svelte';
 import CopyField from './fields/CopyField.svelte';
 import FileField from './fields/FileField.svelte';
+import MarkdownField from './fields/MarkdownField.svelte';
 /**
  * Built-in display components for show/detail pages.
  * Keys match FieldDefinition.type values.
@@ -55,6 +56,7 @@ export const builtinDisplayComponents = {
     avatar: AvatarField,
     copy: CopyField,
     file: FileField,
+    markdown: MarkdownField,
 };
 // ─── Custom component registry ─────────────────────────────────
 // Users can register custom field display components at runtime

package/dist/components/fields/MarkdownField.svelte

@@ -1,17 +1,58 @@
 <script lang="ts">
 /* eslint-disable svelte/no-at-html-tags */
-  import * as DOMPurifyPkg from "isomorphic-dompurify";
-  interface Props { value: string | null | undefined }
-  let { value }: Props = $props();
+  import { onMount } from "svelte";
 
-  const DOMPurify = 'default' in DOMPurifyPkg ? DOMPurifyPkg.default : DOMPurifyPkg;
+  interface Props {
+    value?: string | null | undefined;
+    class?: string;
+  }
 
-  const sanitizedHtml = $derived(
-    value ? DOMPurify.sanitize(value, { USE_PROFILES: { html: true } }) : ''
-  );
+  let { value, class: className = "" }: Props = $props();
+
+  interface DomPurifyLike {
+    sanitize(source: string | Node, config?: Record<string, unknown>): string;
+  }
+  let DOMPurify: DomPurifyLike | null = $state(null);
+
+  onMount(() => {
+    let cancelled = false;
+    import("isomorphic-dompurify")
+      .then((pkg) => {
+        if (!cancelled) {
+          const mod = pkg as unknown as { default?: DomPurifyLike; sanitize?: DomPurifyLike["sanitize"] };
+          const loaded: DomPurifyLike | undefined =
+            mod.default && typeof mod.default.sanitize === "function"
+              ? mod.default
+              : typeof mod.sanitize === "function"
+                ? (mod as DomPurifyLike)
+                : undefined;
+          if (loaded) {
+            DOMPurify = loaded;
+          }
+        }
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  const sanitizedHtml = $derived.by(() => {
+    if (!value) return "";
+    if (DOMPurify && typeof DOMPurify.sanitize === "function") {
+      return DOMPurify.sanitize(value, { USE_PROFILES: { html: true } });
+    }
+    return String(value)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  });
 </script>
-{#if value}
-  <div class="prose prose-sm dark:prose-invert max-w-none leading-relaxed [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:rounded-lg [&_pre]:overflow-x-auto [&_a]:text-primary">{@html sanitizedHtml}</div>
-{:else}
+
+{#if !value}
   <span class="text-muted-foreground">—</span>
+{:else}
+  <div class="prose prose-sm dark:prose-invert max-w-none leading-relaxed [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:rounded-lg [&_pre]:overflow-x-auto [&_a]:text-primary {className}">{@html sanitizedHtml}</div>
 {/if}

package/dist/components/fields/MarkdownField.svelte.d.ts

@@ -1,5 +1,6 @@
 interface Props {
-    value: string | null | undefined;
+    value?: string | null | undefined;
+    class?: string;
 }
 declare const MarkdownField: import("svelte").Component<Props, {}, "">;
 type MarkdownField = ReturnType<typeof MarkdownField>;

package/dist/components/fields/NumberField.svelte

@@ -31,10 +31,16 @@
     class: className = '',
   }: Props = $props();
 
+  const normalizedPrecision = $derived(
+    precision != null && Number.isFinite(precision)
+      ? Math.min(20, Math.max(0, Math.trunc(precision)))
+      : undefined
+  );
+
   const formatted = $derived.by(() => {
     if (value == null || value === '') return nullLabel;
     const num = Number(value);
-    if (isNaN(num)) return nullLabel;
+    if (!Number.isFinite(num)) return nullLabel;
 
     const opts: Intl.NumberFormatOptions = { ...options };
 
@@ -46,9 +52,9 @@
       opts.notation = 'compact';
       opts.compactDisplay = 'short';
     }
-    if (precision != null) {
-      opts.minimumFractionDigits = precision;
-      opts.maximumFractionDigits = precision;
+    if (normalizedPrecision !== undefined) {
+      opts.minimumFractionDigits = normalizedPrecision;
+      opts.maximumFractionDigits = normalizedPrecision;
     }
     if (signed && num > 0 && !currency) {
       opts.signDisplay = 'always';

package/dist/index.d.ts

@@ -170,6 +170,9 @@ export { default as WorkspaceLayout } from './components/content/WorkspaceLayout
 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 type { WorkspaceActionBarTone } from './components/content/WorkspaceActionBar.svelte';
+export { default as WorkspaceTabBar } from './components/content/WorkspaceTabBar.svelte';
+export type { WorkspaceTabItem } from './components/content/WorkspaceTabBar.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';

package/dist/index.js

@@ -184,6 +184,7 @@ 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 WorkspaceTabBar } from './components/content/WorkspaceTabBar.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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [