@svadmin/lite 0.3.12 → 0.3.13

package/README.md

@@ -22,7 +22,7 @@ The main `@svadmin/ui` package delivers a premium SPA experience using Svelte 5,
 | **Delete** | `<details>` confirmation, no JS needed |
 | **Search** | `<form method="GET">` with `?q=` parameter |
 | **Pagination** | Pure `<a>` page links |
-| **Login/Logout** | Cookie-based auth via SvelteKit Form Actions |
+| **Authentication pages** | Login/logout plus optional provider-delegating account actions |
 | **Auth Guard** | Server hook redirects unauthenticated users |
 | **UA Detection** | Optional legacy-browser detection hook redirects users to `/lite/` routes |
 | **i18n** | Uses `@svadmin/core` `t()` translations |
@@ -34,9 +34,12 @@ The main `@svadmin/ui` package delivers a premium SPA experience using Svelte 5,
 ### 1. Install
 
 ```bash
-bun add @svadmin/lite
+bun add @svadmin/lite @svadmin/core
 ```
 
+Use this inside a Svelte 5/SvelteKit application; those runtimes and `@svadmin/core`
+are required peers rather than optional dependencies.
+
 ### 2. Create a list page
 
 ```typescript
@@ -125,6 +128,10 @@ Pass a `menu` prop to `LiteLayout` to replace the auto-generated flat resource l
 </LiteLayout>
 ```
 
+`meta.hidden` is honored recursively. For `meta.resource` / `meta.action`, pass a
+server-computed synchronous `canAccess(resource, action)` callback; permission checks
+that fail or throw are hidden. API and server actions must still enforce authorization.
+
 ### 3. Optionally route legacy browsers to Lite pages
 
 ```typescript
@@ -166,9 +173,9 @@ export const handle = createLegacyRedirectHook('/lite');
 | `createDetailLoader(dp, resource)` | SvelteKit `load` function for detail pages |
 | `createCrudActions(dp, resource)` | SvelteKit form actions for create/update/delete |
 | `createAuthGuard(authProvider)` | Server hook for authentication |
-| `createAuthActions(authProvider)` | Login/logout form actions |
+| `createAuthActions(authProvider)` | Login/logout actions plus optional provider-delegating account actions |
 | `createLegacyRedirectHook()` | Auto-redirect IE11 to `/lite/` |
-| `fieldsToZodSchema(fields)` | Auto-generate Zod schema for superforms |
+| `fieldsToZodSchema(fields)` | Generate the Zod schema used by Lite actions or other Zod consumers |
 
 ## CSS
 
@@ -180,7 +187,7 @@ Import `@svadmin/lite/lite.css` in your layout. It's fully self-contained:
 - Smooth transitions on all interactive elements
 - Multi-layer translucent shadows
 - Print-optimized styles
-- ~500 lines, ~14KB unminified
+- ~800 lines, ~19KB unminified
 
 This CSS baseline helps older browsers, but the generated Svelte/SvelteKit application and any Tailwind v4 UI used alongside Lite still require the browser targets configured by those tools (Tailwind v4 itself targets modern browsers).
 
@@ -193,6 +200,24 @@ Copy the exported `@svadmin/lite/enhance.js` asset to your application's static
 
 The asset is optional for core server-rendered navigation and form submission; the conveniences listed above require it.
 
+## Compatibility notes
+
+- Registration, recovery, password, and profile actions delegate the submitted form
+  fields to the corresponding optional `AuthProvider` method. Provider-specific recovery
+  flows that require tokens, user IDs, secrets, old passwords, or callback URLs need a
+  custom route/form; Lite does not infer those values from callback query parameters.
+- `createListLoader` returns both flat URL-state fields (`page`, `pageSize`, `sort`,
+  `order`, `search`) and the aliases accepted by `LiteListPage` (`pagination`,
+  `currentSort`, `currentOrder`, `currentSearch`). The default page size matches Core: 10.
+- `image` and `images` use the same URL-string values as `@svadmin/ui`; `file` is the
+  native upload field. Server validation continues to accept existing Lite image-file
+  submissions for migration compatibility.
+- Buttons such as import/export/chat provide SSR UI and route contracts only. Consumers
+  must implement the corresponding loader or form action for their backend.
+- IE11 can consume server-rendered HTML and the optional ES5 enhancement layer, with
+  graceful CSS/native-element fallbacks. Svelte 5 hydration/runtime execution in IE11
+  is not supported or promised by this package.
+
 ## License
 
 MIT

package/dist/components/LiteArrayItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { FieldDefinition } from '@svadmin/core';
   import { fieldToInputType, fieldToPlaceholder } from '../schema-generator';
+  import { isExplicitBooleanTrue } from '../value-normalization';
 
   interface Props {
     subFields: FieldDefinition[];
@@ -39,6 +40,26 @@
     if (Array.isArray(value)) return value.flatMap(retainedUploadReferences);
     return [];
   }
+
+  function controlValue(field: FieldDefinition, value: unknown): unknown {
+    const resolvedValue = value === undefined ? field.defaultValue : value;
+    if (field.type === 'relation' && typeof resolvedValue === 'object' && resolvedValue !== null) {
+      return (resolvedValue as Record<string, unknown>)[field.optionValue ?? 'id'];
+    }
+    return resolvedValue;
+  }
+
+  function textareaValue(field: FieldDefinition, value: unknown): string {
+    if (field.type === 'images' && Array.isArray(value)) return value.map(String).join('\n');
+    if (field.type === 'json' && typeof value !== 'string' && value != null) {
+      try {
+        return JSON.stringify(value, null, 2);
+      } catch {
+        return String(value);
+      }
+    }
+    return displayValue(value);
+  }
 </script>
 
 <div
@@ -66,12 +87,13 @@
   </div>
 
   {#each subFields as sub (sub.key)}
+    {@const value = controlValue(sub, item[sub.key])}
     <div class="lite-array-subfield">
       <label for={fieldId(sub.key)}>
         {sub.label}
         {#if sub.required}<span class="required">*</span>{/if}
       </label>
-      {#if sub.type === 'textarea' || sub.type === 'richtext'}
+      {#if sub.type === 'textarea' || sub.type === 'richtext' || sub.type === 'markdown' || sub.type === 'images' || sub.type === 'json'}
         <textarea
           id={fieldId(sub.key)}
           name={fieldName(sub.key)}
@@ -79,7 +101,7 @@
           rows="3"
           required={sub.required && !isDraft}
           placeholder={fieldToPlaceholder(sub)}
-        >{displayValue(item[sub.key])}</textarea>
+        >{textareaValue(sub, value)}</textarea>
       {:else if sub.type === 'boolean'}
         <div class="lite-checkbox-group">
           <input
@@ -87,34 +109,34 @@
             name={fieldName(sub.key)}
             type="checkbox"
             value="1"
-            checked={Boolean(item[sub.key])}
+            checked={isExplicitBooleanTrue(value)}
           />
           <label for={fieldId(sub.key)}>{sub.label}</label>
         </div>
-      {:else if (sub.type === 'select' || sub.type === 'multiselect') && sub.options}
+      {:else if (sub.type === 'select' || sub.type === 'multiselect' || sub.type === 'relation') && sub.options}
         <select
           id={fieldId(sub.key)}
           name={fieldName(sub.key)}
           class="lite-select"
           required={sub.required && !isDraft}
           multiple={sub.type === 'multiselect'}
+          value={sub.type === 'multiselect' ? undefined : String(value ?? '')}
         >
           {#if sub.type !== 'multiselect'}
             <option value="">-- Select --</option>
           {/if}
           {#each sub.options as opt (opt.value)}
-            {@const selectedValue = item[sub.key]}
             <option
               value={String(opt.value)}
               selected={sub.type === 'multiselect'
-                ? Array.isArray(selectedValue) && selectedValue.map(String).includes(String(opt.value))
-                : String(selectedValue ?? '') === String(opt.value)}
+                ? Array.isArray(value) && value.map(String).includes(String(opt.value))
+                : undefined}
             >
               {opt.label}
             </option>
           {/each}
         </select>
-      {:else if sub.type === 'file' || sub.type === 'image' || sub.type === 'images'}
+      {:else if sub.type === 'file'}
         {#if mode === 'edit'}
           {#each retainedUploadReferences(item[sub.key]) as reference, referenceIndex (`${reference}:${referenceIndex}`)}
             <input type="hidden" name={fieldName(sub.key)} value={reference} />
@@ -128,14 +150,13 @@
           required={sub.required
             && !isDraft
             && (mode === 'create' || retainedUploadReferences(item[sub.key]).length === 0)}
-          multiple={sub.type === 'images'}
         />
       {:else}
         <input
           id={fieldId(sub.key)}
           name={fieldName(sub.key)}
           type={fieldToInputType(sub)}
-          value={displayValue(item[sub.key])}
+          value={displayValue(value)}
           class="lite-input"
           required={sub.required && !isDraft}
           placeholder={fieldToPlaceholder(sub)}

package/dist/components/LiteAuditLog.svelte

@@ -3,19 +3,10 @@
    * LiteAuditLog — SSR-compatible audit log viewer.
    * Pure HTML table with pagination links. No client-side JS required.
    */
-
-  interface AuditEntry {
-    id: string | number;
-    userName?: string;
-    action: string;
-    resource?: string;
-    createdAt: string;
-    ipAddress?: string;
-    details?: string;
-  }
+  import type { AuditLog } from '@svadmin/core';
 
   interface Props {
-    logs: AuditEntry[];
+    logs: AuditLog[];
     total?: number;
     page?: number;
     pageSize?: number;
@@ -32,15 +23,15 @@
 
   const totalPages = $derived(Math.ceil(total / pageSize) || 1);
 
-  function formatDate(d: string) {
-    return new Date(d).toLocaleString();
+  function formatDate(auditTimestamp: string | Date) {
+    return new Date(auditTimestamp).toLocaleString();
   }
 
   function actionClass(action: string): string {
-    const a = action.toLowerCase();
-    if (a.includes('delete') || a.includes('remove')) return 'lite-badge-danger';
-    if (a.includes('create') || a.includes('add')) return 'lite-badge-success';
-    if (a.includes('update') || a.includes('edit')) return 'lite-badge-warning';
+    const normalizedAction = action.toLowerCase();
+    if (normalizedAction.includes('delete') || normalizedAction.includes('remove')) return 'lite-badge-danger';
+    if (normalizedAction.includes('create') || normalizedAction.includes('add')) return 'lite-badge-success';
+    if (normalizedAction.includes('update') || normalizedAction.includes('edit')) return 'lite-badge-warning';
     return 'lite-badge-default';
   }
 </script>

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

@@ -1,18 +1,10 @@
 /**
- * LiteAuditLog — SSR-compatible audit log viewer.
- * Pure HTML table with pagination links. No client-side JS required.
- */
-interface AuditEntry {
-    id: string | number;
-    userName?: string;
-    action: string;
-    resource?: string;
-    createdAt: string;
-    ipAddress?: string;
-    details?: string;
-}
+   * LiteAuditLog — SSR-compatible audit log viewer.
+   * Pure HTML table with pagination links. No client-side JS required.
+   */
+import type { AuditLog } from '@svadmin/core';
 interface Props {
-    logs: AuditEntry[];
+    logs: AuditLog[];
     total?: number;
     page?: number;
     pageSize?: number;

package/dist/components/LiteForm.svelte

@@ -2,11 +2,12 @@
   /**
    * LiteForm — Server-rendered form driven by FieldDefinitions.
    * Uses a native <form> with method="POST" for no-JavaScript submission.
-   * Integrates with sveltekit-superforms for server-side validation.
+   * Uses the generated Zod schema for server-side validation.
    */
   import type { FieldDefinition, ResourceDefinition } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { fieldToInputType, fieldToPlaceholder } from '../schema-generator';
+  import { isExplicitBooleanTrue } from '../value-normalization';
   import LiteArrayField from './LiteArrayField.svelte';
 
   interface Props {
@@ -40,6 +41,7 @@
 
   const formFields = $derived(
     fields.filter(f => {
+      if (f.key === (resource?.primaryKey ?? 'id')) return false;
       if (f.showInForm === false) return false;
       if (mode === 'create' && f.showInCreate === false) return false;
       if (mode === 'edit' && f.showInEdit === false) return false;
@@ -55,6 +57,29 @@
       && value.size > 0
       && value.name !== '';
   }
+
+  function fieldValue(field: FieldDefinition): unknown {
+    const value = Object.prototype.hasOwnProperty.call(values, field.key)
+      ? values[field.key]
+      : field.defaultValue;
+    if (field.type === 'relation' && typeof value === 'object' && value !== null) {
+      return (value as Record<string, unknown>)[field.optionValue ?? 'id'];
+    }
+    return value;
+  }
+
+  function textareaValue(field: FieldDefinition, value: unknown): string {
+    if (field.type === 'images' && Array.isArray(value)) return value.map(String).join('\n');
+    if (field.type === 'json' && typeof value !== 'string' && value != null) {
+      try {
+        return JSON.stringify(value, null, 2);
+      } catch {
+        return String(value);
+      }
+    }
+    return String(value ?? '');
+  }
+
 </script>
 
 <form method="POST" action={action || undefined} class="lite-card" enctype="multipart/form-data">
@@ -68,7 +93,7 @@
   {#each formFields as field, _i (_i)}
     {@const inputType = fieldToInputType(field)}
     {@const placeholder = fieldToPlaceholder(field)}
-    {@const value = values[field.key]}
+    {@const value = fieldValue(field)}
     {@const fieldErrors = errors[field.key]}
     {@const hasError = fieldErrors && fieldErrors.length > 0}
 
@@ -87,7 +112,7 @@
             type="checkbox"
             name={field.key}
             id={field.key}
-            checked={!!value}
+            checked={isExplicitBooleanTrue(value)}
           />
           <label for={field.key}>{field.label}</label>
         </div>
@@ -103,12 +128,15 @@
             id={field.key}
             class="lite-input {hasError ? 'lite-input-error' : ''}"
             placeholder={placeholder}
-          >{value ?? ''}</textarea>
+            required={field.required}
+          >{textareaValue(field, value)}</textarea>
         {:else if inputType === 'select'}
           <select
             name={field.key}
             id={field.key}
             class="lite-select {hasError ? 'lite-input-error' : ''}"
+            required={field.required}
+            value={field.type === 'multiselect' ? undefined : String(value ?? '')}
             {...field.type === 'multiselect' ? { multiple: true } : {}}
           >
             {#if field.type !== 'multiselect'}
@@ -116,9 +144,11 @@
             {/if}
             {#if field.options}
               {#each field.options as opt, _i (_i)}
-                <option 
-                  value={String(opt.value)} 
-                  selected={field.type === 'multiselect' ? (Array.isArray(value) && value.includes(opt.value)) : value === opt.value}
+                <option
+                  value={String(opt.value)}
+                  selected={field.type === 'multiselect'
+                    ? Array.isArray(value) && value.map(String).includes(String(opt.value))
+                    : undefined}
                 >
                   {opt.label}
                 </option>

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

@@ -1,7 +1,7 @@
 /**
    * LiteForm — Server-rendered form driven by FieldDefinitions.
    * Uses a native <form> with method="POST" for no-JavaScript submission.
-   * Integrates with sveltekit-superforms for server-side validation.
+   * Uses the generated Zod schema for server-side validation.
    */
 import type { FieldDefinition, ResourceDefinition } from '@svadmin/core';
 interface Props {

package/dist/components/LiteLayout.svelte

@@ -5,6 +5,7 @@
    */
   import type { ResourceDefinition, MenuItem } from '@svadmin/core';
   import type { Snippet } from 'svelte';
+  import { filterVisibleMenu, filterVisibleResources } from '../menu-visibility';
 
   interface Props {
     resources: ResourceDefinition[];
@@ -14,6 +15,8 @@
     basePath?: string;
     /** Optional multi-level menu configuration */
     menu?: MenuItem[];
+    /** Optional server-computed permission check for menu metadata. */
+    canAccess?: (resource: string, action: string) => boolean;
     children: Snippet;
   }
 
@@ -24,15 +27,17 @@
     userName = '',
     basePath = '/lite',
     menu,
+    canAccess,
     children,
   }: Props = $props();
 
-  const menuResources = $derived(
-    resources.filter((r: ResourceDefinition) => r.showInMenu !== false)
-  );
+  const menuResources = $derived(filterVisibleResources(resources, canAccess));
+
+  const hasCustomMenu = $derived(menu !== undefined);
+  const visibleMenu = $derived(menu ? filterVisibleMenu(menu, canAccess) : []);
 
   const mobileItems = $derived.by(() => {
-    if (!menu?.length) {
+    if (!hasCustomMenu) {
       return menuResources.map((resource): MenuItem => ({
         name: resource.name,
         label: resource.label,
@@ -47,7 +52,7 @@
         if (item.children?.length) visit(item.children);
       }
     };
-    visit(menu);
+    visit(visibleMenu);
     return result;
   });
 
@@ -61,8 +66,8 @@
   <!-- Sidebar -->
   <nav class="lite-sidebar">
     <div class="lite-sidebar-brand">{brandName}</div>
-    {#if menu && menu.length > 0}
-      {#each menu as item, _i (_i)}
+    {#if hasCustomMenu}
+      {#each visibleMenu as item, _i (_i)}
         {#if item.children && item.children.length > 0}
           <details class="lite-menu-group">
             <summary class="lite-menu-parent">{item.label ?? item.name}</summary>

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

@@ -12,6 +12,8 @@ interface Props {
     basePath?: string;
     /** Optional multi-level menu configuration */
     menu?: MenuItem[];
+    /** Optional server-computed permission check for menu metadata. */
+    canAccess?: (resource: string, action: string) => boolean;
     children: Snippet;
 }
 declare const LiteLayout: import("svelte").Component<Props, {}, "">;

package/dist/components/LitePermissionMatrix.svelte

@@ -4,8 +4,9 @@
    * Pure HTML table with checkbox inputs. No client-side JS required.
    * Works with form POST actions for state changes.
    */
+  import type { ResourceDefinition, Role } from '@svadmin/core';
 
-  interface LiteRole {
+  interface LegacyLiteRole {
     code: string;
     name: string;
   }
@@ -22,11 +23,11 @@
   }
 
   interface Props {
-    roles: LiteRole[];
-    resources: LiteResource[];
+    roles: Array<Role | LegacyLiteRole>;
+    resources: Array<ResourceDefinition | LiteResource>;
     actions: LiteAction[];
-    /** Current permissions map: { "resource:action": true } */
-    permissions: Record<string, boolean>;
+    /** Core matrix ({ resource: [actions] }) or legacy flat boolean map. */
+    permissions: Record<string, string[]> | Record<string, boolean>;
     selectedRole?: string;
     /** Form POST action URL */
     actionUrl?: string;
@@ -38,13 +39,44 @@
     resources,
     actions,
     permissions,
-    selectedRole = roles[0]?.code || '',
+    selectedRole = '',
     actionUrl = '?/updatePermissions',
     disabled = false,
   }: Props = $props();
 
+  function isCoreRole(role: Role | LegacyLiteRole): role is Role {
+    return 'id' in role && typeof role.id === 'string';
+  }
+
+  function isCoreResource(resource: ResourceDefinition | LiteResource): resource is ResourceDefinition {
+    return 'fields' in resource && Array.isArray(resource.fields);
+  }
+
+  function roleId(role: Role | LegacyLiteRole | undefined): string {
+    if (!role) return '';
+    return isCoreRole(role) ? role.id : role.code;
+  }
+
+  function resourceCode(resource: ResourceDefinition | LiteResource): string {
+    return isCoreResource(resource) ? resource.name : resource.code;
+  }
+
+  function resourceLabel(resource: ResourceDefinition | LiteResource): string {
+    return isCoreResource(resource) ? resource.label : resource.name;
+  }
+
+  function resourceSection(resource: ResourceDefinition | LiteResource | undefined): string | undefined {
+    if (!resource) return undefined;
+    return isCoreResource(resource) ? resource.group : resource.section;
+  }
+
+  const activeRole = $derived(selectedRole || roleId(roles[0]));
+
   function isGranted(resource: string, action: string): boolean {
-    return permissions[`${resource}:${action}`] === true;
+    const flatPermission = permissions[`${resource}:${action}`];
+    if (typeof flatPermission === 'boolean') return flatPermission;
+    const resourcePermissions = permissions[resource];
+    return Array.isArray(resourcePermissions) && resourcePermissions.includes(action);
   }
 </script>
 
@@ -53,8 +85,8 @@
   <div class="lite-role-tabs">
     {#each roles as role, _i (_i)}
       <a
-        href="?role={role.code}"
-        class="lite-role-tab {selectedRole === role.code ? 'active' : ''}"
+        href="?role={roleId(role)}"
+        class="lite-role-tab {activeRole === roleId(role) ? 'active' : ''}"
       >
         {role.name}
       </a>
@@ -63,7 +95,7 @@
 
   <!-- Matrix Table -->
   <form method="POST" action={actionUrl}>
-    <input type="hidden" name="role" value={selectedRole} />
+    <input type="hidden" name="role" value={activeRole} />
 
     <table class="lite-table" style="margin-top:0;">
       <thead>
@@ -76,21 +108,22 @@
       </thead>
       <tbody>
         {#each resources as resource, i (i)}
-          {#if resource.section && (i === 0 || resource.section !== resources[i-1].section)}
+          {@const section = resourceSection(resource)}
+          {#if section && (i === 0 || section !== resourceSection(resources[i-1]))}
             <tr>
               <td colspan={actions.length + 1} style="background:#f1f5f9;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:#475569;">
-                {resource.section}
+                {section}
               </td>
             </tr>
           {/if}
           <tr>
-            <td><strong>{resource.name}</strong><br/><small style="color:#94a3b8;">{resource.code}</small></td>
+            <td><strong>{resourceLabel(resource)}</strong><br/><small style="color:#94a3b8;">{resourceCode(resource)}</small></td>
             {#each actions as action, _i (_i)}
               <td style="text-align:center;">
                 <input
                   type="checkbox"
-                  name="perm_{resource.code}_{action.code}"
-                  checked={isGranted(resource.code, action.code)}
+                  name="perm_{resourceCode(resource)}_{action.code}"
+                  checked={isGranted(resourceCode(resource), action.code)}
                   {disabled}
                   style="width:18px;height:18px;cursor:{disabled ? 'not-allowed' : 'pointer'};"
                 />

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

@@ -1,9 +1,10 @@
 /**
- * LitePermissionMatrix — SSR-compatible permission matrix.
- * Pure HTML table with checkbox inputs. No client-side JS required.
- * Works with form POST actions for state changes.
- */
-interface LiteRole {
+   * LitePermissionMatrix — SSR-compatible permission matrix.
+   * Pure HTML table with checkbox inputs. No client-side JS required.
+   * Works with form POST actions for state changes.
+   */
+import type { ResourceDefinition, Role } from '@svadmin/core';
+interface LegacyLiteRole {
     code: string;
     name: string;
 }
@@ -17,11 +18,11 @@ interface LiteAction {
     name: string;
 }
 interface Props {
-    roles: LiteRole[];
-    resources: LiteResource[];
+    roles: Array<Role | LegacyLiteRole>;
+    resources: Array<ResourceDefinition | LiteResource>;
     actions: LiteAction[];
-    /** Current permissions map: { "resource:action": true } */
-    permissions: Record<string, boolean>;
+    /** Core matrix ({ resource: [actions] }) or legacy flat boolean map. */
+    permissions: Record<string, string[]> | Record<string, boolean>;
     selectedRole?: string;
     /** Form POST action URL */
     actionUrl?: string;

package/dist/components/LiteShow.svelte

@@ -18,11 +18,12 @@
     record,
     resource,
     basePath = '/lite',
-    canEdit = true,
+    canEdit,
   }: Props = $props();
 
   let pk = $derived(resource.primaryKey ?? 'id');
   let id = $derived(record[pk]);
+  const showEdit = $derived(canEdit ?? resource.canEdit !== false);
   const showFields = $derived(
     resource.fields.filter(f => f.showInShow !== false)
   );
@@ -32,7 +33,7 @@
   <div class="lite-header">
     <h1>{resource.label} #{id}</h1>
     <div>
-      {#if canEdit}
+      {#if showEdit}
         <a href={`${basePath}/${resource.name}/edit/${id}`} class="lite-btn lite-btn-primary">
           {t('common.edit') || 'Edit'}
         </a>

package/dist/components/LiteShowField.svelte

@@ -5,6 +5,7 @@
   */
   import type { FieldDefinition } from '@svadmin/core';
   import { toSafeHref, toSafeText } from '../security';
+  import { isExplicitBooleanTrue } from '../value-normalization';
 
   interface Props {
     field: FieldDefinition;
@@ -19,7 +20,7 @@
       try { return new Date(v as string).toLocaleString(); } catch { return String(v); }
     }
     if (f.type === 'select' && f.options) {
-      const opt = f.options.find(o => o.value === v);
+      const opt = f.options.find(o => String(o.value) === String(v));
       return opt?.label ?? String(v);
     }
     if (f.type === 'url') return String(v);
@@ -33,8 +34,9 @@
 </script>
 
 {#if field.type === 'boolean'}
-  <span class="lite-bool {value ? 'lite-bool-true' : ''}"></span>
-  {value ? '✓ Yes' : '✗ No'}
+  {@const checked = isExplicitBooleanTrue(value)}
+  <span class="lite-bool {checked ? 'lite-bool-true' : ''}"></span>
+  {checked ? '✓ Yes' : '✗ No'}
 {:else if field.type === 'url' && value}
   {@const href = toSafeHref(value)}
   {#if href}