@svadmin/ui 0.70.0 → 0.73.0

package/dist/components/Layout.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
 /* eslint-disable svelte/no-useless-children-snippet */
   import type { Snippet } from 'svelte';
   import { fade, fly } from 'svelte/transition';
@@ -18,7 +20,7 @@
   import { useTranslation } from '@svadmin/core/i18n';
 
   import { captureAdminContext } from '@svadmin/core';
-  import type { Identity, MenuItem, TaskProvider, TaskRecord } from '@svadmin/core';
+  import type { Identity, MenuItem } from '@svadmin/core';
   import { getPath } from '../router-state.svelte.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import * as Sheet from './ui/sheet/index.js';
@@ -42,7 +44,7 @@
   const auth = $derived(adminContext.authProvider);
   let loading = $state(true);
   let identity = $state<Identity | null>(null);
-  const taskProvider = $derived(adminContext.taskProvider as TaskProvider<TaskRecord> | undefined);
+  const taskProvider = $derived(adminContext.taskProvider ?? undefined);
   const TaskQueueComponent = getComponentRegistry()?.TaskQueueDrawer;
 
   $effect(() => {
@@ -94,10 +96,10 @@
   let touchEndX = $state(0);
 
   function ownsLayoutEvent(event: Event): boolean {
-    const target = event.target instanceof HTMLElement ? event.target : document.activeElement as HTMLElement | null;
+    const target = event.target instanceof Element ? event.target : document.activeElement;
     const owner = target
       ?.closest<HTMLElement>('[data-svadmin-layout-scope]')
-      ?.dataset.svadminLayoutScope;
+      ?.dataset['svadminLayoutScope'];
     if (owner) return owner === layoutScope;
     return document.querySelectorAll('[data-svadmin-layout-scope]').length === 1;
   }
@@ -108,7 +110,7 @@
       e.preventDefault();
       commandOpen = true;
     }
-    if (e.key === '?' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement)?.tagName)) {
+    if (e.key === '?' && !(e.target instanceof Element && ['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName))) {
       e.preventDefault();
       shortcutsOpen = true;
     }
@@ -116,16 +118,18 @@
 
   function handleTouchStart(e: TouchEvent) {
     if (!ownsLayoutEvent(e)) return;
-    if (e.touches.length === 1) {
-      touchStartX = e.touches[0].clientX;
-      touchEndX = e.touches[0].clientX;
+    const touch = e.touches.item(0);
+    if (e.touches.length === 1 && touch) {
+      touchStartX = touch.clientX;
+      touchEndX = touch.clientX;
     }
   }
 
   function handleTouchMove(e: TouchEvent) {
     if (!ownsLayoutEvent(e)) return;
-    if (e.touches.length === 1) {
-      touchEndX = e.touches[0].clientX;
+    const touch = e.touches.item(0);
+    if (e.touches.length === 1 && touch) {
+      touchEndX = touch.clientX;
     }
   }
 
@@ -180,7 +184,7 @@
 
     <!-- Desktop sidebar -->
     <div class="svadmin-u-99d72c7fc3e2 svadmin-u-9d60be3a6d80">
-      <Sidebar {collapsed} {identity} {title} {menu} {routeMode} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
+      <Sidebar {collapsed} {identity} {title} {...definedOptions({ "menu": menu })} {routeMode} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
     </div>
 
     <!-- Mobile sidebar via Sheet -->
@@ -193,21 +197,20 @@
     >
       <Sheet.Title id={`${layoutScope}-mobile-navigation-title`} class="svadmin-u-2daa8e5e2f2e">{title}</Sheet.Title>
       <div class="svadmin-u-e477a6af4cb6">
-        <Sidebar collapsed={false} {identity} {title} {menu} {routeMode} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
+        <Sidebar collapsed={false} {identity} {title} {...definedOptions({ "menu": menu })} {routeMode} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
       </div>
     </Sheet.Root>
 
     <div
       class="svadmin-u-36e579c0b41c svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-2cd02d11d1af svadmin-u-0fe7d7d814d0 svadmin-u-7890552ecd63"
-      class:md:ml-[252px]={!collapsed}
+      data-svadmin-content-frame
       class:sidebar-content-expanded={!collapsed}
-      class:md:ml-[70px]={collapsed}
       class:sidebar-content-collapsed={collapsed}
     >
       <!-- Header with mobile hamburger -->
       <Header
-        {siteUrl}
-        {menu}
+        {...definedOptions({ "siteUrl": siteUrl })}
+        {...definedOptions({ "menu": menu })}
         showSearch={true}
         showThemeToggle={true}
         onSearchClick={() => { commandOpen = true; }}
@@ -255,7 +258,7 @@
   </div>
   <CommandPalette
     bind:open={commandOpen}
-    onAskAI={aiAssistant ? handleAskAI : undefined}
+    {...definedOptions({ "onAskAI": aiAssistant ? handleAskAI : undefined })}
   />
   <KeyboardShortcuts bind:open={shortcutsOpen} />
 {/if}

package/dist/components/LazyTaskQueueDrawer.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import type TaskQueueDrawer from './TaskQueueDrawer.svelte';
+  import { definedOptions } from '@svadmin/core/options';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { ListTodo, RotateCcw } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+
+  let { open = $bindable(false), taskProvider, title, initialTab }: ComponentProps<typeof TaskQueueDrawer> = $props();
+  const i18n = useTranslation();
+  const load = () => import('./TaskQueueDrawer.svelte');
+  let module = $state(load());
+  const resolvedTitle = $derived(title ?? i18n.t('task.drawerTitle'));
+</script>
+
+{#await module}
+  <Button variant="ghost" size="icon" disabled aria-busy="true" aria-label={resolvedTitle}>
+    <ListTodo class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+  </Button>
+{:then { default: Drawer }}
+  <Drawer bind:open {...definedOptions({ taskProvider, title, initialTab })} />
+{:catch}
+  <Button variant="ghost" size="icon" aria-label={`${resolvedTitle}: ${i18n.t('common.retry')}`} onclick={() => module = load()}>
+    <RotateCcw class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+  </Button>
+{/await}

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

@@ -0,0 +1,8 @@
+declare const LazyTaskQueueDrawer: import("svelte").Component<{
+    open?: boolean;
+    taskProvider?: import("@svadmin/core").TaskProvider<import("@svadmin/core").TaskRecord>;
+    title?: string;
+    initialTab?: "tasks" | "dlq";
+}, {}, "open">;
+type LazyTaskQueueDrawer = ReturnType<typeof LazyTaskQueueDrawer>;
+export default LazyTaskQueueDrawer;

package/dist/components/ListPage.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import type { ResourceRendering } from '../rendering/index.js';
+  import { definedOptions } from '@svadmin/core/options';
+
   import { getResource } from '@svadmin/core';
 
   import type { Snippet } from 'svelte';
@@ -9,6 +12,7 @@
 
   interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     title?: string;
     canCreate?: boolean;
     density?: 'compact' | 'comfortable';
@@ -35,6 +39,7 @@
 
   let {
     resourceName,
+    rendering,
     title,
     canCreate,
     density = 'comfortable',
@@ -79,14 +84,14 @@
   {/if}
 
   <AutoTable
+    {rendering}
     {resourceName}
     showHeader={false}
     {density}
-    {selectable}
-    {batchActions}
-    defaultCellRenderer={cellRenderer}
-    {rowActions}
-    {emptyState}
-    {expandedRowRender}
+    {...definedOptions({ "selectable": selectable })}
+    {...definedOptions({ batchActions })}
+    {...definedOptions({ "defaultCellRenderer": cellRenderer })}
+    {...definedOptions({ "rowActions": rowActions })}
+    {...definedOptions({ emptyState, expandedRowRender })}
   />
 </div>

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

@@ -1,7 +1,9 @@
+import type { ResourceRendering } from '../rendering/index.js';
 import type { Snippet } from 'svelte';
 import type { FieldDefinition } from '@svadmin/core';
 interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     title?: string;
     canCreate?: boolean;
     density?: 'compact' | 'comfortable';

package/dist/components/LoginPage.svelte

@@ -155,7 +155,7 @@
           </span>
         </div>
 
-        <div class="svadmin-u-f3c543ad5fe9 svadmin-u-1004c0c3954c" class:grid-cols-2={socialProviders.length >= 2}>
+        <div class="svadmin-u-f3c543ad5fe9 svadmin-u-1004c0c3954c" class:svadmin-u-8e75e3db482b={socialProviders.length >= 2}>
           {#each socialProviders as provider (provider.name)}
             <Button
               variant="outline"

package/dist/components/MasterDetailView.svelte

@@ -18,7 +18,7 @@
 
   let {
     items = [],
-    selectedId = $bindable(items[0]?.id as (string | number | undefined)),
+    selectedId = $bindable(items[0]?.['id'] as (string | number | undefined)),
     idKey = 'id',
     titleKey = 'title',
     subtitleKey = 'subtitle',
@@ -80,7 +80,7 @@
             {@render itemSnippet(item, isSelected)}
           {:else}
             <div class={cn('svadmin-u-e83a7042bc91 svadmin-u-f283ea9bea0e', isSelected ? 'svadmin-u-20aaf08a7ed1' : 'svadmin-u-d4108abe6359')}>
-              {item[titleKey] ?? item.name ?? `Item #${item[idKey]}`}
+              {item[titleKey] ?? item['name'] ?? `Item #${item[idKey]}`}
             </div>
             {#if item[subtitleKey]}
               <div class="svadmin-u-d058ca6de60f svadmin-u-bfa603190748 svadmin-u-f283ea9bea0e svadmin-u-15e1b1f444fe">
@@ -108,7 +108,7 @@
         <div class="svadmin-u-3e7ce58d64fa">
           <div class="svadmin-u-7fcf9124b5df svadmin-u-65fdbade2025 svadmin-u-05faf5c801ff">
             <h3 class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">
-              {activeItem[titleKey] ?? activeItem.name ?? `Item #${activeItem[idKey]}`}
+              {activeItem[titleKey] ?? activeItem['name'] ?? `Item #${activeItem[idKey]}`}
             </h3>
             {#if activeItem[subtitleKey]}
               <p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748 svadmin-u-15e1b1f444fe">{activeItem[subtitleKey]}</p>

package/dist/components/MediaLibraryModal.svelte

@@ -3,6 +3,7 @@
   import { Button } from './ui/button/index.js';
   import { Badge } from './ui/badge/index.js';
   import { Upload, Image as ImageIcon, Check, Search, Folder } from '@lucide/svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { cn } from '../utils.js';
 
   export interface MediaItem {
@@ -38,6 +39,8 @@
     class: className = '',
   }: Props = $props();
 
+  const i18n = useTranslation();
+
   let activeCategory = $state('All');
   let searchQuery = $state('');
   let localSelected = $state<string[]>([...selectedUrls]);
@@ -111,7 +114,7 @@
           <input
             type="text"
             bind:value={searchQuery}
-            placeholder="Search media..."
+            placeholder={i18n.t('common.search')}
             class="svadmin-u-d1c57777d8b6 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-d2d2d97dd0c8 svadmin-u-aa2c13a5e1b4 svadmin-u-359090c2d529 svadmin-u-f10f771f87e9 svadmin-u-3e94a98e1466 svadmin-u-9c1295a6914a"
           />
         </div>
@@ -120,7 +123,7 @@
           <input type="file" multiple class="svadmin-u-99d72c7fc3e2" onchange={handleFileInput} />
           <span class="svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-d1c57777d8b6 svadmin-u-0b91436debbd svadmin-u-421ac2be5045 svadmin-u-ba939ea82d8b svadmin-u-5064267f78e3 svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-35b680bc2a46 svadmin-u-34516836730d">
             <Upload class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
-            Upload
+            {i18n.t('common.upload')}
           </span>
         </label>
       </div>

package/dist/components/MentionsInput.svelte

@@ -65,7 +65,7 @@
 
     for (const trig of triggers) {
       const idx = textBeforeCursor.lastIndexOf(trig);
-      if (idx !== -1 && (idx === 0 || /\s/.test(textBeforeCursor[idx - 1]))) {
+      if (idx !== -1 && (idx === 0 || /\s/.test(textBeforeCursor.charAt(idx - 1)))) {
         const query = textBeforeCursor.slice(idx + 1);
         if (!/\s/.test(query)) {
           matchTrigger = trig;
@@ -117,8 +117,9 @@
       selectedIndex = (selectedIndex - 1 + activeOptions.length) % activeOptions.length;
     } else if (e.key === 'Enter' || e.key === 'Tab') {
       e.preventDefault();
-      if (activeOptions[selectedIndex]) {
-        insertMention(activeOptions[selectedIndex]);
+      const selectedOption = activeOptions[selectedIndex];
+      if (selectedOption) {
+        insertMention(selectedOption);
       }
     } else if (e.key === 'Escape') {
       showDropdown = false;

package/dist/components/MoneyInput.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import NumericInput from './NumericInput.svelte';
+
+  interface Props {
+    value?: number | null;
+    currency?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: number | null) => void;
+  }
+
+  let props: Props = $props();
+</script>
+
+<NumericInput {...props} mode="currency" />

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

@@ -0,0 +1,20 @@
+interface Props {
+    value?: number | null;
+    currency?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: number | null) => void;
+}
+declare const MoneyInput: import("svelte").Component<Props, {}, "">;
+type MoneyInput = ReturnType<typeof MoneyInput>;
+export default MoneyInput;

package/dist/components/NavigateToResource.svelte

@@ -7,9 +7,10 @@
   let navigated = false;
   $effect(() => {
     // Navigate to first resource ONCE — avoid infinite re-triggers
-    if (!navigated && menuItems.length > 0) {
+    const firstMenuItem = menuItems[0];
+    if (!navigated && firstMenuItem) {
       navigated = true;
-      adminContext.navigate(menuItems[0].route);
+      adminContext.navigate(firstMenuItem.route);
     }
   });
 </script>

package/dist/components/NumberInput.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import NumericInput from './NumericInput.svelte';
+  import type { NumericInputMode } from './NumericInput.svelte';
+
+  interface Props {
+    value?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: number | null) => void;
+  }
+
+  let props: Props = $props();
+</script>
+
+<NumericInput {...props} mode={'number' satisfies NumericInputMode} />

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

@@ -0,0 +1,19 @@
+interface Props {
+    value?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: number | null) => void;
+}
+declare const NumberInput: import("svelte").Component<Props, {}, "">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/components/NumericInput.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { Input } from './ui/input/index.js';
+  import { cn } from '../utils.js';
+
+  export type NumericInputMode = 'number' | 'currency' | 'percent';
+
+  interface Props {
+    value?: number | null;
+    mode?: NumericInputMode;
+    currency?: string;
+    scale?: '100' | '1';
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: number | null) => void;
+  }
+
+  let {
+    value = $bindable(null),
+    mode = 'number',
+    currency,
+    scale = '100',
+    min,
+    max,
+    step,
+    precision,
+    id,
+    name,
+    placeholder,
+    disabled = false,
+    required = false,
+    invalid = false,
+    describedby,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  const normalizedPrecision = $derived(
+    precision == null || !Number.isFinite(precision)
+      ? undefined
+      : Math.min(20, Math.max(0, Math.trunc(precision))),
+  );
+
+  const displayValue = $derived.by(() => {
+    if (value == null) return '';
+    const displayed = mode === 'percent' && scale === '1' ? value * 100 : value;
+    return normalizedPrecision === undefined ? String(displayed) : displayed.toFixed(normalizedPrecision);
+  });
+
+  const displayMin = $derived(mode === 'percent' && scale === '1' && min != null ? min * 100 : min);
+  const displayMax = $derived(mode === 'percent' && scale === '1' && max != null ? max * 100 : max);
+  const resolvedStep = $derived(
+    mode === 'percent' && scale === '1'
+      ? step == null ? 1 : step * 100
+      : step ?? (normalizedPrecision === undefined ? 'any' : 10 ** -normalizedPrecision),
+  );
+
+  function clamp(next: number): number {
+    return Math.min(max ?? next, Math.max(min ?? next, next));
+  }
+
+  function handleInput(event: Event): void {
+    const input = event.currentTarget;
+    if (!(input instanceof HTMLInputElement)) return;
+    if (input.value === '') {
+      value = null;
+      onchange?.(null);
+      return;
+    }
+    const parsed = Number(input.value);
+    if (!Number.isFinite(parsed)) return;
+    const stored = mode === 'percent' && scale === '1' ? parsed / 100 : parsed;
+    const next = clamp(stored);
+    value = next;
+    onchange?.(next);
+  }
+</script>
+
+<div class={cn('svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc', className)} data-numeric-input={mode}>
+  {#if mode === 'currency' && currency}
+    <span class="svadmin-u-bfa603190748 svadmin-u-012fbd121f37" aria-hidden="true">{currency}</span>
+  {/if}
+  <Input
+    {id}
+    {name}
+    type="number"
+    value={displayValue}
+    min={displayMin}
+    max={displayMax}
+    step={resolvedStep}
+    {placeholder}
+    {disabled}
+    {required}
+    aria-invalid={invalid || undefined}
+    aria-describedby={describedby}
+    oninput={handleInput}
+  />
+  {#if mode === 'percent'}
+    <span class="svadmin-u-bfa603190748 svadmin-u-012fbd121f37" aria-hidden="true">%</span>
+  {/if}
+</div>

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

@@ -0,0 +1,23 @@
+export type NumericInputMode = 'number' | 'currency' | 'percent';
+interface Props {
+    value?: number | null;
+    mode?: NumericInputMode;
+    currency?: string;
+    scale?: '100' | '1';
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: number | null) => void;
+}
+declare const NumericInput: import("svelte").Component<Props, {}, "value">;
+type NumericInput = ReturnType<typeof NumericInput>;
+export default NumericInput;

package/dist/components/PercentInput.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import NumericInput from './NumericInput.svelte';
+
+  interface Props {
+    value?: number | null;
+    scale?: '100' | '1';
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: number | null) => void;
+  }
+
+  let props: Props = $props();
+</script>
+
+<NumericInput {...props} mode="percent" />

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

@@ -0,0 +1,20 @@
+interface Props {
+    value?: number | null;
+    scale?: '100' | '1';
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: number | null) => void;
+}
+declare const PercentInput: import("svelte").Component<Props, {}, "">;
+type PercentInput = ReturnType<typeof PercentInput>;
+export default PercentInput;

package/dist/components/PermissionMatrix.svelte

@@ -48,8 +48,9 @@
   } = $props();
 
   $effect(() => {
-    if (!selectedRole && roles.length > 0) {
-      selectedRole = roles[0].code;
+    const firstRole = roles[0];
+    if (!selectedRole && firstRole) {
+      selectedRole = firstRole.code;
     }
   });
 </script>
@@ -163,7 +164,7 @@
             {/if}
             {#each resources as resource, i (i)}
               <!-- Section Grouping Header -->
-              {#if resource.section && (i === 0 || resource.section !== resources[i-1].section)}
+              {#if resource.section && (i === 0 || resource.section !== resources[i-1]?.section)}
                 <tr class="svadmin-u-989c466fdbe7">
                   <td colspan="{actions.length + 1}" class="svadmin-u-f0faeb26d656 svadmin-u-03b4dd7f172b svadmin-u-359090c2d529 svadmin-u-69450ef1487e svadmin-u-20aaf08a7ed1">{resource.section}</td>
                 </tr>

package/dist/components/ProfilePage.svelte

@@ -232,14 +232,14 @@
                 <p class="svadmin-u-42536e69e639 svadmin-u-e83a7042bc91 svadmin-u-f283ea9bea0e">{identity.data.name ?? '—'}</p>
               </div>
 
-              {#if identity.data.email || identity.data.username}
+              {#if identity.data.email || identity.data['username']}
                 <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">
                   {#if identity.data.email}
                     <Mail class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-012fbd121f37" />
                   {:else}
                     <User class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-012fbd121f37" />
                   {/if}
-                  <span class="svadmin-u-f283ea9bea0e">{identity.data.email || identity.data.username}</span>
+                  <span class="svadmin-u-f283ea9bea0e">{identity.data.email || identity.data['username']}</span>
                 </div>
               {/if}