@svadmin/ui 0.46.0 → 0.47.1

package/dist/components/RowActions.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+  import { Ellipsis } from '@lucide/svelte';
+  import type { Component, Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '../utils.js';
+  import * as DropdownMenu from './ui/dropdown-menu/index.js';
+  import { Button } from './ui/button/index.js';
+
+  export type RowActionItem = {
+    label: string;
+    icon?: Component<{ class?: string }>;
+    href?: string;
+    onclick?: (e: MouseEvent) => void;
+    variant?: 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary';
+    disabled?: boolean;
+    title?: string;
+    danger?: boolean;
+    hidden?: boolean;
+  };
+
+  type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    actions?: RowActionItem[];
+    maxVisible?: number;
+    moreLabel?: string;
+    children?: Snippet;
+    moreContent?: Snippet;
+  };
+
+  let {
+    actions = [],
+    maxVisible = 2,
+    moreLabel = 'More actions',
+    ref = $bindable(null),
+    class: className,
+    children,
+    moreContent,
+    ...restProps
+  }: Props = $props();
+
+  let overflowOpen = $state(false);
+  const availableActions = $derived(actions.filter((action) => !action.hidden));
+  const visibleLimit = $derived(
+    Number.isFinite(maxVisible)
+      ? Math.max(0, Math.floor(maxVisible))
+      : availableActions.length
+  );
+  const visibleActions = $derived(availableActions.slice(0, visibleLimit));
+  const overflowActions = $derived(availableActions.slice(visibleLimit));
+
+  function resolvedVariant(action: RowActionItem): RowActionItem['variant'] {
+    return action.variant ?? (action.danger ? 'destructive' : 'ghost');
+  }
+
+  function handleOverflowAction(action: RowActionItem, event: MouseEvent): void {
+    if (action.disabled) {
+      event.preventDefault();
+      return;
+    }
+    overflowOpen = false;
+    action.onclick?.(event);
+  }
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="row-actions"
+  class={cn("inline-flex items-center gap-1.5", className)}
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+
+  {#each visibleActions as action (action)}
+    {#if action.href}
+      <Button
+        variant={resolvedVariant(action)}
+        size="sm"
+        href={action.href}
+        disabled={action.disabled}
+        title={action.title || action.label}
+        class="h-8 px-2 text-xs"
+      >
+        {#if action.icon}
+          {@const Icon = action.icon}
+          <Icon class="mr-1 size-3.5" />
+        {/if}
+        {action.label}
+      </Button>
+    {:else}
+      <Button
+        variant={resolvedVariant(action)}
+        size="sm"
+        onclick={action.onclick}
+        disabled={action.disabled}
+        title={action.title || action.label}
+        class="h-8 px-2 text-xs"
+      >
+        {#if action.icon}
+          {@const Icon = action.icon}
+          <Icon class="mr-1 size-3.5" />
+        {/if}
+        {action.label}
+      </Button>
+    {/if}
+  {/each}
+
+  {#if overflowActions.length > 0 || moreContent}
+    <DropdownMenu.Root bind:open={overflowOpen}>
+      <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+          <Button {...props} variant="ghost" size="icon-sm" title={moreLabel} aria-label={moreLabel}>
+            <Ellipsis class="size-4" />
+          </Button>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content align="end" class="min-w-[8rem]">
+        {#each overflowActions as action (action)}
+          {#if action.href}
+            <Button
+              href={action.href}
+              variant={resolvedVariant(action)}
+              size="sm"
+              disabled={action.disabled}
+              onclick={(event) => handleOverflowAction(action, event)}
+              class="h-auto w-full justify-start rounded-md px-2 py-1.5 text-sm font-normal"
+            >
+              {#if action.icon}
+                {@const Icon = action.icon}
+                <Icon class="size-3.5" />
+              {/if}
+              {action.label}
+            </Button>
+          {:else}
+            <DropdownMenu.Item
+              onclick={(event) => handleOverflowAction(action, event)}
+              disabled={action.disabled}
+              destructive={action.danger || action.variant === 'destructive'}
+            >
+              {#if action.icon}
+                {@const Icon = action.icon}
+                <Icon class="size-3.5" />
+              {/if}
+              {action.label}
+            </DropdownMenu.Item>
+          {/if}
+        {/each}
+        {#if moreContent}
+          {@render moreContent()}
+        {/if}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  {/if}
+</div>

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

@@ -0,0 +1,26 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+export type RowActionItem = {
+    label: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+    href?: string;
+    onclick?: (e: MouseEvent) => void;
+    variant?: 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary';
+    disabled?: boolean;
+    title?: string;
+    danger?: boolean;
+    hidden?: boolean;
+};
+type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    actions?: RowActionItem[];
+    maxVisible?: number;
+    moreLabel?: string;
+    children?: Snippet;
+    moreContent?: Snippet;
+};
+declare const RowActions: Component<Props, {}, "ref">;
+type RowActions = ReturnType<typeof RowActions>;
+export default RowActions;

package/dist/components/SecuritySettings.svelte

@@ -2,14 +2,15 @@
   import { useNotification } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
 
-  import { AlertTriangle, KeyRound, Monitor, Shield, ShieldAlert, ShieldCheck, Smartphone, Trash2 } from '@lucide/svelte';
+  import { AlertTriangle, Monitor, Smartphone, Trash2 } from '@lucide/svelte';
   import type { Component } from 'svelte';
   import * as Alert from './ui/alert/index.js';
-  import * as Card from './ui/card/index.js';
   import { Button } from './ui/button/index.js';
-  import { Label } from './ui/label/index.js';
   import { Switch } from './ui/switch/index.js';
   import PasswordInput from './PasswordInput.svelte';
+  import SettingsGroup from './content/SettingsGroup.svelte';
+  import SettingsFieldRow from './content/SettingsFieldRow.svelte';
+  import DataState from './content/DataState.svelte';
 
   const i18n = useTranslation();
   const notification = useNotification();
@@ -76,41 +77,14 @@
     <p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.securityDescription')}</p>
   </div>
 
-  <Card.Card>
-    <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2 text-base">
-        {#if is2faEnabled}
-          <ShieldCheck class="h-5 w-5 text-green-500" />
-        {:else}
-          <ShieldAlert class="h-5 w-5 text-amber-500" />
-        {/if}
-        {i18n.t('security.twoFactorAuth')}
-      </Card.CardTitle>
-      <Card.CardDescription>{i18n.t('security.twoFactorDescription')}</Card.CardDescription>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <div class="flex items-center justify-between gap-4 border-t pt-4">
-        <div class="space-y-1">
-          <Label for="two-factor" class="text-sm font-medium">{i18n.t('security.enable2fa')}</Label>
-          <p class="text-xs text-muted-foreground">
-            {is2faEnabled ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive')}
-          </p>
-        </div>
-        <Switch id="two-factor" bind:checked={is2faEnabled} />
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <Card.Card>
-    <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2 text-base">
-        <KeyRound class="h-4 w-4 text-muted-foreground" />
-        {i18n.t('profile.changePassword')}
-      </Card.CardTitle>
-      <Card.CardDescription>{i18n.t('security.passwordLastChanged', { time: lastChanged })}</Card.CardDescription>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <form onsubmit={handlePasswordChange} class="max-w-sm space-y-4">
+  <SettingsGroup title={i18n.t('security.twoFactorAuth')} description={i18n.t('security.twoFactorDescription')}>
+      <SettingsFieldRow label={i18n.t('security.enable2fa')} description={is2faEnabled ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive')}>
+        {#snippet control()}<Switch id="two-factor" bind:checked={is2faEnabled} />{/snippet}
+      </SettingsFieldRow>
+  </SettingsGroup>
+
+  <SettingsGroup title={i18n.t('profile.changePassword')} description={i18n.t('security.passwordLastChanged', { time: lastChanged })}>
+      <form onsubmit={handlePasswordChange} class="max-w-lg space-y-4">
         {#if passwordErrorMessage}
           <Alert.Root variant="destructive">
             <AlertTriangle class="h-4 w-4" />
@@ -124,23 +98,10 @@
 
         <Button type="submit">{i18n.t('profile.updatePassword')}</Button>
       </form>
-    </Card.CardContent>
-  </Card.Card>
-
-  <Card.Card>
-    <Card.CardHeader class="flex flex-row items-start justify-between gap-4">
-      <div class="space-y-1">
-        <Card.CardTitle class="flex items-center gap-2 text-base">
-          <Shield class="h-4 w-4 text-muted-foreground" />
-          {i18n.t('security.activeSessions')}
-        </Card.CardTitle>
-        <Card.CardDescription>{i18n.t('security.sessionsDescription')}</Card.CardDescription>
-      </div>
-      {#if sessions.length > 1}
-        <Button variant="outline" size="sm" onclick={revokeAllOthers}>{i18n.t('security.revokeOthers')}</Button>
-      {/if}
-    </Card.CardHeader>
-    <Card.CardContent>
+  </SettingsGroup>
+
+  <SettingsGroup title={i18n.t('security.activeSessions')} description={i18n.t('security.sessionsDescription')}>
+    {#snippet actions()}{#if sessions.length > 1}<Button variant="outline" size="sm" onclick={revokeAllOthers}>{i18n.t('security.revokeOthers')}</Button>{/if}{/snippet}
       <div class="divide-y">
         {#each sessions as session (session.id)}
           <div class="flex items-center justify-between gap-4 py-3">
@@ -168,9 +129,8 @@
             {/if}
           </div>
         {:else}
-          <div class="py-6 text-center text-sm text-muted-foreground">{i18n.t('security.noSessions')}</div>
+          <DataState state="empty" title={i18n.t('security.noSessions')} />
         {/each}
       </div>
-    </Card.CardContent>
-  </Card.Card>
+  </SettingsGroup>
 </div>

package/dist/components/SettingsPage.svelte

@@ -115,6 +115,16 @@
     return content ? alias : "profile";
   });
 
+  const contentWidth = $derived(
+    activeKey === 'roles' || activeKey === 'audit'
+      ? 'max-w-[92rem]'
+      : activeKey === 'api'
+        ? 'max-w-[78rem]'
+        : activeKey === 'integrations'
+          ? 'max-w-[64rem]'
+          : 'max-w-3xl',
+  );
+
   // Default redirect to profile
   $effect(() => {
     if (getRoute() === "/settings") {
@@ -151,7 +161,7 @@
       </div>
       {#each resolvedSections as section, _i (_i)}
         <div>
-          <h3 class="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+          <h3 class="px-3 mb-1 text-xs font-medium text-muted-foreground">
             {i18n.t(section.group)}
           </h3>
           <div class="space-y-0.5">
@@ -175,7 +185,7 @@
   </nav>
 
   <!-- Right content area -->
-  <div class="flex-1 p-6 lg:p-8 {activeKey === 'roles' || activeKey === 'audit' || activeKey === 'integrations' || activeKey === 'api' ? 'max-w-6xl' : 'max-w-3xl'}">
+  <div class="min-w-0 w-full flex-1 p-6 lg:p-8 {contentWidth}">
     {#if activeKey === "profile"}
       {#if profile}{@render profile()}{:else}<ProfilePage />{/if}
     {:else if activeKey === "appearance"}

package/dist/components/account/CompanyProfilePage.svelte

@@ -11,6 +11,7 @@
   import MemberList from '../content/MemberList.svelte';
   import SectionHeader from '../content/SectionHeader.svelte';
   import SettingsGroup from '../content/SettingsGroup.svelte';
+  import WorkspaceLayout from '../content/WorkspaceLayout.svelte';
   import type { MemberSummary } from '../content/MemberList.svelte';
   const i18n = useTranslation();
   let companyName = $state('Acme Corporation');
@@ -31,11 +32,16 @@
   <Button onclick={save} disabled={saving} size="sm">{#if saving}<Loader2 class="size-3.5 animate-spin" />{/if}{i18n.t('common.save')}</Button>
 {/snippet}
 
+{#snippet primary()}
+  <SettingsGroup title={i18n.t('account.basicSettings')} description={i18n.t('account.companyProfileDescription')} bodyClass="space-y-4"><div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="company-name">{i18n.t('profile.companyName')}</Label><Input id="company-name" bind:value={companyName} /></div><div class="space-y-2"><Label for="company-industry">{i18n.t('profile.industry')}</Label><Input id="company-industry" bind:value={industry} /></div><div class="space-y-2 sm:col-span-2"><Label for="company-website">{i18n.t('profile.website')}</Label><Input id="company-website" bind:value={website} type="url" /></div></div><div class="space-y-2"><Label for="company-description">{i18n.t('profile.companyDescription')}</Label><Textarea id="company-description" bind:value={description} rows={4} /></div></SettingsGroup>
+{/snippet}
+
+{#snippet secondary()}
+  <SettingsGroup title={i18n.t('profile.companyName')} description={industry} bodyClass="space-y-4"><p class="text-lg font-semibold text-foreground">{companyName}</p><DescriptionList columns={1} items={[{ label: i18n.t('profile.website'), value: website, href: website }, { label: i18n.t('profile.employees'), value: '1,250' }, { label: i18n.t('profile.founded'), value: '2015' }]} /></SettingsGroup>
+{/snippet}
+
 <ContentPageShell pageId="account-company-profile" width="wide">
   <ContentPageHeader title={i18n.t('account.companyProfile')} description={i18n.t('account.companyProfileDescription')} actions={headerActions} />
-  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
-    <SettingsGroup title={i18n.t('account.basicSettings')} description={i18n.t('account.companyProfileDescription')} bodyClass="space-y-4"><div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="company-name">{i18n.t('profile.companyName')}</Label><Input id="company-name" bind:value={companyName} /></div><div class="space-y-2"><Label for="company-industry">{i18n.t('profile.industry')}</Label><Input id="company-industry" bind:value={industry} /></div><div class="space-y-2 sm:col-span-2"><Label for="company-website">{i18n.t('profile.website')}</Label><Input id="company-website" bind:value={website} type="url" /></div></div><div class="space-y-2"><Label for="company-description">{i18n.t('profile.companyDescription')}</Label><Textarea id="company-description" bind:value={description} rows={4} /></div></SettingsGroup>
-    <SettingsGroup title={i18n.t('profile.companyName')} description={industry} bodyClass="space-y-4"><p class="text-lg font-semibold text-foreground">{companyName}</p><DescriptionList columns={1} items={[{ label: i18n.t('profile.website'), value: website, href: website }, { label: i18n.t('profile.employees'), value: '1,250' }, { label: i18n.t('profile.founded'), value: '2015' }]} /></SettingsGroup>
-  </div>
+  <WorkspaceLayout {primary} {secondary} secondaryWidth="20rem" />
   <section class="space-y-3"><SectionHeader title={i18n.t('profileSections.members')} /><MemberList {members} emptyTitle={i18n.t('common.noData')} emptyDescription={i18n.t('empty.description')} /></section>
 </ContentPageShell>

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -30,7 +30,7 @@
 
 <ContentPageShell pageId="account-settings-enterprise" width="wide">
   <ContentPageHeader title={i18n.t('account.settingsEnterprise')} description={i18n.t('account.settingsEnterpriseDescription')} />
-  <div class="grid gap-4 lg:grid-cols-2">
+  <div class="grid items-start gap-4 lg:grid-cols-2">
     <SettingsGroup title={i18n.t('account.securityPolicy')} description="Set organization-wide controls for authentication and sessions." bodyClass="space-y-4">
       <div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="session-timeout">{i18n.t('account.sessionTimeout')}</Label><Input id="session-timeout" value="30" /></div><div class="space-y-2"><Label for="retention">{i18n.t('account.dataRetention')}</Label><Input id="retention" value="365" /></div></div>
       <SettingsFieldRow label={i18n.t('account.auditLogging')} description="Preserve an auditable record of organization-level changes." control={auditControl} separated />

package/dist/components/account/UserProfilePage.svelte

@@ -9,6 +9,7 @@
   import DescriptionList from '../content/DescriptionList.svelte';
   import FileList from '../content/FileList.svelte';
   import IntegrationCard from '../content/IntegrationCard.svelte';
+  import WorkspaceLayout from '../content/WorkspaceLayout.svelte';
   import type { IntegrationSummary } from '../content/IntegrationCard.svelte';
   import { referenceDemoData } from '../../reference-data.js';
   const i18n = useTranslation();
@@ -22,8 +23,8 @@
 
 <ContentPageShell pageId="account-user-profile" width="wide">
   <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><ContentPageHeader title={i18n.t('account.userProfile')} description={i18n.t('account.userProfileDescription')} /><Button onclick={save} disabled={saving} size="sm">{#if saving}<Loader2 class="size-3.5 animate-spin" />{/if}{i18n.t('common.save')}</Button></div>
-  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
-    <div class="space-y-4"><Card.Card><Card.CardContent class="space-y-5 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.personalInfo')}</h2><p class="mt-1 text-sm text-muted-foreground">Keep your contact and working details current.</p></div><DescriptionList columns={2} items={[{ label: i18n.t('profile.name'), value: 'Alex Chen' }, { label: i18n.t('account.phone'), value: '+86 138 **** 9527' }, { label: i18n.t('account.dateOfBirth'), value: '1995-04-18' }, { label: i18n.t('account.address'), value: 'Shanghai, CN' }]} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-4 p-5"><div class="flex items-center justify-between gap-3"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.work')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.availableNow')}</p></div><Switch bind:checked={availableToHire} /></div><div class="flex flex-wrap gap-1.5">{#each ['TypeScript', 'Svelte', 'Node.js', 'Design Systems'] as skill (skill)}<span class="rounded-md border border-border px-2 py-1 text-xs text-muted-foreground">{skill}</span>{/each}</div></Card.CardContent></Card.Card><section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('account.connections')}</h2>{#each integrations as integration (integration.id)}<IntegrationCard {integration} onconnect={() => toggle(integration.id)} />{/each}</section></div>
-    <div class="space-y-4"><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.myFiles')}</h2><FileList files={files} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.calendarAccounts')}</h2><DescriptionList items={[{ label: 'Work Calendar', value: 'alex@nebulalabs.io' }, { label: 'Personal Calendar', value: 'alex@example.com' }]} /></Card.CardContent></Card.Card></div>
-  </div>
+  <WorkspaceLayout secondaryWidth="20rem">
+    {#snippet primary()}<div class="space-y-4"><Card.Card><Card.CardContent class="space-y-5 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.personalInfo')}</h2><p class="mt-1 text-sm text-muted-foreground">Keep your contact and working details current.</p></div><DescriptionList columns={2} items={[{ label: i18n.t('profile.name'), value: 'Alex Chen' }, { label: i18n.t('account.phone'), value: '+86 138 **** 9527' }, { label: i18n.t('account.dateOfBirth'), value: '1995-04-18' }, { label: i18n.t('account.address'), value: 'Shanghai, CN' }]} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-4 p-5"><div class="flex items-center justify-between gap-3"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.work')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.availableNow')}</p></div><Switch bind:checked={availableToHire} /></div><div class="flex flex-wrap gap-1.5">{#each ['TypeScript', 'Svelte', 'Node.js', 'Design Systems'] as skill (skill)}<span class="rounded-md border border-border px-2 py-1 text-xs text-muted-foreground">{skill}</span>{/each}</div></Card.CardContent></Card.Card><section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('account.connections')}</h2>{#each integrations as integration (integration.id)}<IntegrationCard {integration} onconnect={() => toggle(integration.id)} />{/each}</section></div>{/snippet}
+    {#snippet secondary()}<div class="space-y-4"><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.myFiles')}</h2><FileList files={files} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.calendarAccounts')}</h2><DescriptionList items={[{ label: 'Work Calendar', value: 'alex@nebulalabs.io' }, { label: 'Personal Calendar', value: 'alex@example.com' }]} /></Card.CardContent></Card.Card></div>{/snippet}
+  </WorkspaceLayout>
 </ContentPageShell>

package/dist/components/content/ApiKeyList.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
-  import { Copy, KeyRound, Trash2 } from '@lucide/svelte';
+  import { Check, Copy, KeyRound, Trash2 } from '@lucide/svelte';
   import { useTranslation } from '@svadmin/core/i18n';
+  import { Badge } from '../ui/badge/index.js';
   import { Button } from '../ui/button/index.js';
   import DataState from './DataState.svelte';
   import type { DataStateKind } from './DataState.svelte';
-  export interface ApiKeySummary { id: string; name: string; prefix: string; createdAt?: string; lastUsedAt?: string; }
-  interface Props { keys?: ApiKeySummary[]; state?: DataStateKind; stateTitle?: string; stateDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; oncopy?: (key: ApiKeySummary) => void; onrevoke?: (key: ApiKeySummary) => void; class?: string; }
+  export interface ApiKeySummary {
+    id: string;
+    name: string;
+    prefix: string;
+    maskedToken?: string;
+    createdAt?: string;
+    lastUsedAt?: string;
+    permissions?: string[];
+  }
+  interface Props { keys?: ApiKeySummary[]; state?: DataStateKind; stateTitle?: string; stateDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; copiedKeyId?: string | null; oncopy?: (key: ApiKeySummary) => void; onrevoke?: (key: ApiKeySummary) => void; class?: string; }
   const i18n = useTranslation();
-  let { keys = [], state, stateTitle, stateDescription, retry, retryLabel, loadingLabel, oncopy, onrevoke, class: className = '' }: Props = $props();
+  let { keys = [], state, stateTitle, stateDescription, retry, retryLabel, loadingLabel, copiedKeyId = null, oncopy, onrevoke, class: className = '' }: Props = $props();
   const resolvedState = $derived(state ?? (keys.length === 0 ? 'empty' : undefined));
   const isZh = $derived(i18n.locale === 'zh-CN');
 </script>
@@ -16,7 +25,23 @@
 {:else}
 <div class={'divide-y divide-border overflow-hidden rounded-lg border border-border bg-card ' + className}>
   {#each keys as apiKey (apiKey.id)}
-    <div class="flex flex-wrap items-center gap-3 px-4 py-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"><KeyRound class="size-4" /></span><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium text-foreground">{apiKey.name}</p><p class="font-mono text-xs text-muted-foreground">{apiKey.prefix}********</p></div><div class="text-right text-xs text-muted-foreground"><p>{apiKey.createdAt ?? (isZh ? '最近创建' : 'Created recently')}</p><p>{apiKey.lastUsedAt ?? (isZh ? '从未使用' : 'Never used')}</p></div><div class="flex items-center gap-1">{#if oncopy}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.copy') + ' ' + apiKey.name} onclick={() => oncopy?.(apiKey)}><Copy class="size-4" /></Button>{/if}{#if onrevoke}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.delete') + ' ' + apiKey.name} onclick={() => onrevoke?.(apiKey)}><Trash2 class="size-4" /></Button>{/if}</div></div>
+    <div class="flex flex-wrap items-center gap-3 px-4 py-3">
+      <span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"><KeyRound class="size-4" /></span>
+      <div class="min-w-48 flex-1">
+        <p class="truncate text-sm font-medium text-foreground">{apiKey.name}</p>
+        <p class="truncate font-mono text-xs text-muted-foreground">{apiKey.maskedToken ?? `${apiKey.prefix}********`}</p>
+        {#if apiKey.permissions?.length}
+          <div class="mt-2 flex flex-wrap gap-1">
+            {#each apiKey.permissions as permission (permission)}<Badge variant="secondary" class="px-2 py-0 text-[10px]">{permission}</Badge>{/each}
+          </div>
+        {/if}
+      </div>
+      <div class="text-left text-xs text-muted-foreground sm:text-right"><p>{apiKey.createdAt ?? (isZh ? '最近创建' : 'Created recently')}</p><p>{apiKey.lastUsedAt ?? (isZh ? '从未使用' : 'Never used')}</p></div>
+      <div class="ml-auto flex items-center gap-1">
+        {#if oncopy}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.copy') + ' ' + apiKey.name} onclick={() => oncopy?.(apiKey)}>{#if copiedKeyId === apiKey.id}<Check class="size-4 text-success" />{:else}<Copy class="size-4" />{/if}</Button>{/if}
+        {#if onrevoke}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.delete') + ' ' + apiKey.name} onclick={() => onrevoke?.(apiKey)}><Trash2 class="size-4" /></Button>{/if}
+      </div>
+    </div>
   {/each}
 </div>
 {/if}

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

@@ -3,8 +3,10 @@ export interface ApiKeySummary {
     id: string;
     name: string;
     prefix: string;
+    maskedToken?: string;
     createdAt?: string;
     lastUsedAt?: string;
+    permissions?: string[];
 }
 interface Props {
     keys?: ApiKeySummary[];
@@ -14,6 +16,7 @@ interface Props {
     retry?: () => void;
     retryLabel?: string;
     loadingLabel?: string;
+    copiedKeyId?: string | null;
     oncopy?: (key: ApiKeySummary) => void;
     onrevoke?: (key: ApiKeySummary) => void;
     class?: string;

package/dist/components/content/WorkspaceLayout.svelte

@@ -7,6 +7,7 @@
     secondary?: Snippet;
     summary?: Snippet;
     secondaryWidth?: string;
+    mobileOrder?: 'primary-first' | 'secondary-first';
     class?: string;
   }
 
@@ -15,14 +16,16 @@
     secondary,
     summary,
     secondaryWidth = '22rem',
+    mobileOrder = 'primary-first',
     class: className = '',
   }: Props = $props();
 </script>
 
 <div class={cn('flex flex-col gap-6', className)} data-svadmin-workspace-layout style:--workspace-secondary-width={secondaryWidth}>
-  {#if summary}<div class="order-2 sm:order-1">{@render summary()}</div>{/if}
-  <div class="order-1 grid min-w-0 gap-6 sm:order-2 lg:grid-cols-[minmax(0,1fr)_var(--workspace-secondary-width)]">
-    <div class="min-w-0" data-svadmin-workspace-primary>{@render primary()}</div>
-    {#if secondary}<aside class="min-w-0">{@render secondary()}</aside>{/if}
+  {#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}
+    <div class={cn('min-w-0', mobileOrder === 'secondary-first' ? 'order-2 xl:order-1' : 'order-1')} data-svadmin-workspace-primary>{@render primary()}</div>
+    {#if mobileOrder !== 'secondary-first' && secondary}<aside class="order-2 min-w-0 xl:order-2">{@render secondary()}</aside>{/if}
   </div>
 </div>

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

@@ -4,6 +4,7 @@ interface Props {
     secondary?: Snippet;
     summary?: Snippet;
     secondaryWidth?: string;
+    mobileOrder?: 'primary-first' | 'secondary-first';
     class?: string;
 }
 declare const WorkspaceLayout: import("svelte").Component<Props, {}, "">;

package/dist/index.d.ts

@@ -194,3 +194,6 @@ export { default as TwoFactorStepper } from './components/content/TwoFactorStepp
 export { default as SystemErrorState } from './components/content/SystemErrorState.svelte';
 export { referenceDemoData } from './reference-data.js';
 export type { DemoMember, DemoProject, DemoTeam, DemoIntegration, DemoApiKey, DemoSecurityEvent, DemoNotification } from './reference-data.js';
+export { default as RowActions } from './components/RowActions.svelte';
+export type { RowActionItem } from './components/RowActions.svelte';
+export { default as DetailDrawer } from './components/DetailDrawer.svelte';

package/dist/index.js

@@ -195,3 +195,5 @@ export { default as OtpInput } from './components/content/OtpInput.svelte';
 export { default as TwoFactorStepper } from './components/content/TwoFactorStepper.svelte';
 export { default as SystemErrorState } from './components/content/SystemErrorState.svelte';
 export { referenceDemoData } from './reference-data.js';
+export { default as RowActions } from './components/RowActions.svelte';
+export { default as DetailDrawer } from './components/DetailDrawer.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.46.0",
+  "version": "0.47.1",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -96,6 +96,9 @@
   "bugs": {
     "url": "https://github.com/vibeunion/svadmin/issues"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.11.2",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",