@svadmin/lite 0.3.15 → 0.3.18

package/README.md

@@ -1,6 +1,6 @@
 # @svadmin/lite
 
-**Lightweight, SSR-compatible admin UI for [@svadmin](https://github.com/zuohuadong/svadmin).**
+**Lightweight, SSR-compatible admin UI for [@svadmin](https://github.com/vibeunion/svadmin).**
 
 Core server-driven CRUD flows can run without hydration. An optional `enhance.js` asset adds progressive client-side conveniences.
 
@@ -19,14 +19,14 @@ The main `@svadmin/ui` package delivers a premium SPA experience using Svelte 5,
 | **List page** | Server-rendered `<table>` with `<a>` sort links |
 | **Detail page** | Key-value layout with type-aware formatting |
 | **Create/Edit** | Native `<form method="POST">` with server-side validation |
-| **Delete** | `<details>` confirmation, no JS needed |
+| **Delete** | Fragment-target confirmation + native POST form, no JS needed |
 | **Search** | `<form method="GET">` with `?q=` parameter |
 | **Pagination** | Pure `<a>` page links |
 | **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 |
-| **Multi-level Menu** | Config-driven 2/3 level menus via `MenuItem[]` |
+| **Multi-level Menu** | Always-expanded, config-driven nested links via `MenuItem[]` |
 | **Print** | `@media print` optimized styles |
 
 ## Quick Start
@@ -54,10 +54,16 @@ export const actions = createCrudActions(dataProvider, postsResource);
 ```
 
 ```typescript
-// src/routes/lite/posts/+page.ts
+// src/routes/lite/+layout.ts
+export const ssr = true;
 export const csr = false;
 ```
 
+Put these options on the `/lite` layout so every child route returns server-rendered
+HTML without shipping or executing the Svelte runtime in IE11. See the runnable
+[SSR example](https://github.com/vibeunion/svadmin/tree/main/packages/lite/example)
+for the complete contract and its real-response check.
+
 ```svelte
 <!-- src/routes/lite/posts/+page.svelte -->
 <script lang="ts">
@@ -130,7 +136,44 @@ Pass a `menu` prop to `LiteLayout` to replace the auto-generated flat resource l
 
 `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.
+that fail or throw are hidden. Nested groups stay expanded so their links remain usable
+without JavaScript or native disclosure-element support. API and server actions must
+still enforce authorization.
+
+### 2c. Request-scoped providers and tenants
+
+Lite's server utilities consume the same `DataProvider` contract as Core, but they do
+not use client hooks. Build tenant-aware providers inside each SvelteKit request so SSR
+requests never share tenant state through a module-level mutable variable:
+
+```typescript
+// src/routes/lite/posts/+page.server.ts
+import { withTenantDataProvider } from '@svadmin/core';
+import { createListLoader, createCrudActions } from '@svadmin/lite';
+import { dataProvider, postsResource } from '$lib/admin';
+import type { Actions, PageServerLoad } from './$types';
+
+function scopedProvider(tenantId: string) {
+  return withTenantDataProvider(dataProvider, { tenantId });
+}
+
+export const load = ((event) =>
+  createListLoader(scopedProvider(event.locals.tenantId), postsResource)(event)
+) satisfies PageServerLoad;
+
+function scopedActions(tenantId: string) {
+  return createCrudActions(scopedProvider(tenantId), postsResource);
+}
+
+export const actions = {
+  create: (event) => scopedActions(event.locals.tenantId).create(event),
+  update: (event) => scopedActions(event.locals.tenantId).update(event),
+  delete: (event) => scopedActions(event.locals.tenantId).delete(event),
+} satisfies Actions;
+```
+
+Authorization and tenant isolation must still be enforced by the provider/backend; UI
+visibility is not an authorization boundary.
 
 ### 3. Optionally route legacy browsers to Lite pages
 
@@ -180,7 +223,7 @@ export const handle = createLegacyRedirectHook('/lite');
 ## CSS
 
 Import `@svadmin/lite/lite.css` in your layout. It's fully self-contained:
-- IE11-oriented CSS baseline (standard flexbox, no CSS variables)
+- IE11-oriented CSS baseline (standard flexbox, no CSS variables, Grid, or `gap`)
 - Custom-styled checkboxes, radios, and selects (no `appearance: none` needed)
 - Indigo/Slate color system aligned with `@svadmin/ui`
 - Modern focus rings (`box-shadow` based)
@@ -194,7 +237,7 @@ This CSS baseline helps older browsers, but the generated Svelte/SvelteKit appli
 ## Optional: Progressive Enhancement
 
 Copy the exported `@svadmin/lite/enhance.js` asset to your application's static folder. This ES5 script adds:
-- Auto-close delete confirmation when clicking outside
+- Auto-close fragment-target confirmations when clicking outside
 - Auto-focus first form input
 - Unsaved changes warning
 
@@ -215,8 +258,9 @@ The asset is optional for core server-rendered navigation and form submission; t
 - 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.
+  native links/forms and the IE11-safe Lite CSS contract. Keep the entire Lite route
+  subtree on `ssr = true` and `csr = false`; Svelte 5 hydration/runtime execution in
+  IE11 is not supported or promised by this package.
 
 ## License
 

package/dist/components/LiteConfirmDialog.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
-  /**
-   * LiteConfirmDialog — SSR-compatible confirmation dialog.
-   * Utilizes pure HTML <details> and <summary> to show a popup.
-   * No client-side JS required.
-   */
+  import { liteFragmentId } from '../fragment-id';
 
   interface Props {
+    confirmationId?: string;
     title?: string;
     description?: string;
     confirmLabel?: string;
@@ -21,6 +18,7 @@
   }
 
   let {
+    confirmationId,
     title = 'Are you sure?',
     description = 'This action cannot be undone.',
     confirmLabel = 'Confirm',
@@ -31,30 +29,42 @@
     hiddenInputs = {},
     align = 'right'
   }: Props = $props();
+
+  const componentId = $props.id();
+  const fragmentId = $derived(liteFragmentId(
+    'confirm',
+    confirmationId ?? componentId,
+  ));
+  const titleId = $derived(`${fragmentId}-title`);
+  const descriptionId = $derived(`${fragmentId}-description`);
 </script>
 
-<details class="lite-confirm-details">
-  <summary class={triggerClass}>{triggerLabel}</summary>
-  <div class="lite-confirm-panel" style="text-align:left; {align === 'right' ? 'right:0;' : 'left:0;'}">
-    <div style="font-weight:600;margin-bottom:8px;color:#0f172a;">{title}</div>
+<div class="lite-confirm">
+  <span id={`${fragmentId}-closed`} class="lite-confirm-cancel-target" aria-hidden="true"></span>
+  <a href={`#${fragmentId}`} class={triggerClass} aria-controls={fragmentId} aria-haspopup="dialog">{triggerLabel}</a>
+  <div
+    id={fragmentId}
+    class="lite-confirm-panel lite-confirm-target"
+    style="text-align:left; {align === 'right' ? 'right:0;' : 'left:0;'}"
+    role="dialog"
+    aria-labelledby={titleId}
+    aria-describedby={description ? descriptionId : undefined}
+    tabindex="-1"
+  >
+    <div id={titleId} style="font-weight:600;margin-bottom:8px;color:#0f172a;">{title}</div>
     {#if description}
-      <div style="font-size:12px;color:#64748b;margin-bottom:16px;">{description}</div>
+      <div id={descriptionId} style="font-size:12px;color:#64748b;margin-bottom:16px;">{description}</div>
     {/if}
-    <form method="POST" {action} style="display:flex;margin:0;justify-content:flex-end;">
+    <form method="POST" {action} class="lite-inline-actions lite-justify-end">
       {#each Object.entries(hiddenInputs) as [key, val] (key)}
         <input type="hidden" name={key} value={val} />
       {/each}
-      <button
-        type="button"
-        class="lite-btn lite-btn-sm"
-        style="margin-right:8px;"
-        onclick={(e) => (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open')}
-      >
+      <a href={`#${fragmentId}-closed`} class="lite-btn lite-btn-sm">
         {cancelLabel}
-      </button>
+      </a>
       <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm lite-btn-danger">
         {confirmLabel}
       </button>
     </form>
   </div>
-</details>
+</div>

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

@@ -1,9 +1,5 @@
-/**
- * LiteConfirmDialog — SSR-compatible confirmation dialog.
- * Utilizes pure HTML <details> and <summary> to show a popup.
- * No client-side JS required.
- */
 interface Props {
+    confirmationId?: string;
     title?: string;
     description?: string;
     confirmLabel?: string;

package/dist/components/LiteLayout.svelte

@@ -6,6 +6,7 @@
   import type { ResourceDefinition, MenuItem } from '@svadmin/core';
   import type { Snippet } from 'svelte';
   import { filterVisibleMenu, filterVisibleResources } from '../menu-visibility';
+  import LiteMenuList from './layout/LiteMenuList.svelte';
 
   interface Props {
     resources: ResourceDefinition[];
@@ -67,41 +68,7 @@
   <nav class="lite-sidebar">
     <div class="lite-sidebar-brand">{brandName}</div>
     {#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>
-            {#each item.children as child, _i (_i)}
-              {#if child.children && child.children.length > 0}
-                <details class="lite-menu-group" style="margin-left:12px">
-                  <summary class="lite-menu-parent">{child.label ?? child.name}</summary>
-                  {#each child.children as grandchild, _i (_i)}
-                    <a
-                      href={grandchild.href ?? `${basePath}/${grandchild.name}`}
-                      class={isActive(grandchild.href ?? `${basePath}/${grandchild.name}`) ? 'active' : ''}
-                      target={grandchild.target === '_blank' ? '_blank' : undefined}
-                      style="padding-left:40px"
-                    >{grandchild.label ?? grandchild.name}</a>
-                  {/each}
-                </details>
-              {:else}
-                <a
-                  href={child.href ?? `${basePath}/${child.name}`}
-                  class={isActive(child.href ?? `${basePath}/${child.name}`) ? 'active' : ''}
-                  target={child.target === '_blank' ? '_blank' : undefined}
-                  style="padding-left:28px"
-                >{child.label ?? child.name}</a>
-              {/if}
-            {/each}
-          </details>
-        {:else}
-          <a
-            href={item.href ?? `${basePath}/${item.name}`}
-            class={isActive(item.href ?? `${basePath}/${item.name}`) ? 'active' : ''}
-            target={item.target === '_blank' ? '_blank' : undefined}
-          >{item.label ?? item.name}</a>
-        {/if}
-      {/each}
+      <LiteMenuList items={visibleMenu} {basePath} {currentResource} />
     {:else}
       {#each menuResources as res, _i (_i)}
         <a
@@ -123,26 +90,25 @@
   </nav>
 
   <nav class="lite-mobile-nav" aria-label="Mobile navigation">
-    <details>
-      <summary>{brandName}</summary>
-      <div class="lite-mobile-nav-links">
-        {#each mobileItems as item (item.name)}
-          <a
-            href={item.href ?? `${basePath}/${item.name}`}
-            class={isActive(item.href ?? `${basePath}/${item.name}`) ? 'active' : ''}
-            target={item.target === '_blank' ? '_blank' : undefined}
-          >{item.label ?? item.name}</a>
-        {/each}
-        {#if userName}
-          <div class="lite-mobile-user">
-            <span>{userName}</span>
-            <form method="POST" action={`${basePath}/login?/logout`}>
-              <button type="submit" class="lite-btn lite-btn-sm">Logout</button>
-            </form>
-          </div>
-        {/if}
-      </div>
-    </details>
+    <div class="lite-mobile-nav-brand">{brandName}</div>
+    <div class="lite-mobile-nav-links">
+      {#each mobileItems as item (item.name)}
+        <a
+          href={item.href ?? `${basePath}/${item.name}`}
+          class={isActive(item.href ?? `${basePath}/${item.name}`) ? 'active' : ''}
+          target={item.target === '_blank' ? '_blank' : undefined}
+          rel={item.target === '_blank' ? 'noreferrer' : undefined}
+        >{item.label ?? item.name}</a>
+      {/each}
+      {#if userName}
+        <div class="lite-mobile-user">
+          <span>{userName}</span>
+          <form method="POST" action={`${basePath}/login?/logout`}>
+            <button type="submit" class="lite-btn lite-btn-sm">Logout</button>
+          </form>
+        </div>
+      {/if}
+    </div>
   </nav>
 
   <!-- Main Content -->

package/dist/components/LiteTable.svelte

@@ -6,6 +6,7 @@
   import type { ResourceDefinition, FieldDefinition } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { isExplicitBooleanTrue } from '../value-normalization';
+  import { liteFragmentId } from '../fragment-id';
 
   interface Props {
     records: Record<string, unknown>[];
@@ -32,6 +33,8 @@
     canDelete,
   }: Props = $props();
 
+  const tableId = $props.id();
+
   let pk = $derived(resource.primaryKey ?? 'id');
   const showView = $derived(canShow ?? resource.canShow !== false);
   const showEdit = $derived(canEdit ?? resource.canEdit !== false);
@@ -116,17 +119,25 @@
               <a href={`${basePath}/${resource.name}/edit/${id}`} class="lite-btn lite-btn-sm">{t('common.edit') || 'Edit'}</a>
             {/if}
             {#if showDelete}
-              <!-- Delete uses <details> for no-JS confirmation -->
-              <details class="lite-confirm-details">
-                <summary class="lite-btn lite-btn-sm lite-btn-danger">{t('common.delete') || 'Delete'}</summary>
-                <div class="lite-confirm-panel">
-                  <p style="margin:0 0 8px;font-size:13px;">{t('common.areYouSure') || 'Are you sure?'}</p>
-                  <form method="POST" action="?/delete" style="display:inline;">
+              {@const confirmationId = liteFragmentId('delete', tableId, resource.name, String(id))}
+              {@const confirmationTitleId = `${confirmationId}-title`}
+              <div class="lite-confirm">
+                <span id={`${confirmationId}-closed`} class="lite-confirm-cancel-target" aria-hidden="true"></span>
+                <a
+                  href={`#${confirmationId}`}
+                  class="lite-btn lite-btn-sm lite-btn-danger"
+                  aria-controls={confirmationId}
+                  aria-haspopup="dialog"
+                >{t('common.delete') || 'Delete'}</a>
+                <div id={confirmationId} class="lite-confirm-panel lite-confirm-target" role="dialog" aria-labelledby={confirmationTitleId} tabindex="-1">
+                  <p id={confirmationTitleId} style="margin:0 0 8px;font-size:13px;">{t('common.areYouSure') || 'Are you sure?'}</p>
+                  <form method="POST" action="?/delete" class="lite-inline-actions">
                     <input type="hidden" name="id" value={String(id)} />
+                    <a href={`#${confirmationId}-closed`} class="lite-btn lite-btn-sm">{t('common.cancel') || 'Cancel'}</a>
                     <button type="submit" class="lite-btn lite-btn-sm lite-btn-danger">{t('common.confirm') || 'Confirm'}</button>
                   </form>
                 </div>
-              </details>
+              </div>
             {/if}
           </td>
         {/if}

package/dist/components/advanced/LiteAutoSaveIndicator.svelte

@@ -20,7 +20,7 @@
   const cfg = $derived(statusConfig[status] ?? statusConfig.idle);
 </script>
 
-<span style="display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: {cfg.color};">
+<span class="lite-inline-sm" style="display: inline-flex; align-items: center; font-size: 13px; color: {cfg.color};">
   <span>{cfg.icon}</span>
   <span>{message ?? cfg.text}</span>
 </span>

package/dist/components/advanced/LiteInlineEdit.svelte

@@ -20,7 +20,7 @@
   );
 </script>
 
-<span style="display: inline-flex; align-items: center; gap: 6px;">
+<span class="lite-inline-sm" style="display: inline-flex; align-items: center;">
   <span>{displayValue}</span>
   {#if editUrl}
     <a

package/dist/components/buttons/LiteDeleteButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { t } from '@svadmin/core/i18n';
   import { Trash2 } from '@lucide/svelte';
+  import { liteFragmentId } from '../../fragment-id';
 
   interface Props {
     resource: string;
@@ -21,37 +22,41 @@
     size = 'default',
     redirectUrl = ''
   }: Props = $props();
+
+  const componentId = $props.id();
+  const confirmationId = $derived(liteFragmentId('delete', componentId, resource, recordItemId));
+  const confirmationTitleId = $derived(`${confirmationId}-title`);
 </script>
 
-<details class="lite-confirm-details {className}">
-  <summary 
+<div class="lite-confirm {className}">
+  <span id={`${confirmationId}-closed`} class="lite-confirm-cancel-target" aria-hidden="true"></span>
+  <a
+    href={`#${confirmationId}`}
     class="lite-btn lite-btn-danger {size === 'sm' ? 'lite-btn-sm' : ''}"
     title={t('common.delete') || 'Delete'}
+    aria-controls={confirmationId}
+    aria-haspopup="dialog"
   >
     <Trash2 size={16} />
     {#if !hideText}
       <span style="margin-left: 4px">{t('common.delete') || 'Delete'}</span>
     {/if}
-  </summary>
-  <div class="lite-confirm-panel" style="right: 0; left: auto;">
-    <p style="margin: 0 0 8px; font-size: 13px; color: #111827;">
+  </a>
+  <div id={confirmationId} class="lite-confirm-panel lite-confirm-target" style="right: 0; left: auto;" role="dialog" aria-labelledby={confirmationTitleId} tabindex="-1">
+    <p id={confirmationTitleId} style="margin: 0 0 8px; font-size: 13px; color: #111827;">
       {t('common.areYouSure') || 'Are you sure?'}
     </p>
-    <form method="POST" action={`${basePath}/${resource}?/delete`} style="display:inline-flex; gap: 8px;">
+    <form method="POST" action={`${basePath}/${resource}?/delete`} class="lite-inline-actions">
       <input type="hidden" name="id" value={String(recordItemId)} />
       {#if redirectUrl}
         <input type="hidden" name="redirect" value={redirectUrl} />
       {/if}
-      <button 
-        type="button" 
-        class="lite-btn lite-btn-sm" 
-        onclick={(e) => (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open')}
-      >
+      <a href={`#${confirmationId}-closed`} class="lite-btn lite-btn-sm">
         {t('common.cancel') || 'Cancel'}
-      </button>
+      </a>
       <button type="submit" class="lite-btn lite-btn-sm lite-btn-danger">
         {t('common.confirm') || 'Confirm'}
       </button>
     </form>
   </div>
-</details>
+</div>

package/dist/components/buttons/LiteImportButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { t } from '@svadmin/core/i18n';
   import { Upload } from '@lucide/svelte';
+  import { liteFragmentId } from '../../fragment-id';
 
   interface Props {
     resource: string;
@@ -17,34 +18,38 @@
     class: className = '',
     size = 'default'
   }: Props = $props();
+
+  const componentId = $props.id();
+  const importPanelId = $derived(liteFragmentId('import', componentId, resource));
+  const importPanelTitleId = $derived(`${importPanelId}-title`);
 </script>
 
-<details class="lite-confirm-details {className}">
-  <summary 
+<div class="lite-confirm {className}">
+  <span id={`${importPanelId}-closed`} class="lite-confirm-cancel-target" aria-hidden="true"></span>
+  <a
+    href={`#${importPanelId}`}
     class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''}"
     title={t('common.import') || 'Import'}
+    aria-controls={importPanelId}
+    aria-haspopup="dialog"
   >
     <Upload size={16} />
     {#if !hideText}
       <span style="margin-left: 4px">{t('common.import') || 'Import'}</span>
     {/if}
-  </summary>
-  <div class="lite-confirm-panel">
-    <p style="margin: 0 0 8px; font-size: 13px;">{t('common.importData') || 'Import data (CSV/JSON)'}</p>
-    <form method="POST" action={`${basePath}/${resource}?/${resource}_import`} enctype="multipart/form-data" style="display:flex; flex-direction: column; gap: 8px;">
+  </a>
+  <div id={importPanelId} class="lite-confirm-panel lite-confirm-target" role="dialog" aria-labelledby={importPanelTitleId} tabindex="-1">
+    <p id={importPanelTitleId} style="margin: 0 0 8px; font-size: 13px;">{t('common.importData') || 'Import data (CSV/JSON)'}</p>
+    <form method="POST" action={`${basePath}/${resource}?/${resource}_import`} enctype="multipart/form-data" class="lite-stack-sm">
       <input type="file" name="file" accept=".csv,.json" required style="font-size: 13px;" />
-      <div style="display:flex; gap: 8px; justify-content: flex-end;">
-        <button 
-          type="button" 
-          class="lite-btn lite-btn-sm" 
-          onclick={(e) => (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open')}
-        >
+      <div class="lite-inline-actions lite-justify-end">
+        <a href={`#${importPanelId}-closed`} class="lite-btn lite-btn-sm">
           {t('common.cancel') || 'Cancel'}
-        </button>
+        </a>
         <button type="submit" class="lite-btn lite-btn-sm lite-btn-primary">
           {t('common.upload') || 'Upload'}
         </button>
       </div>
     </form>
   </div>
-</details>
+</div>

package/dist/components/fields/LiteFileField.svelte

@@ -22,7 +22,7 @@
 
 {#if mode === 'show'}
   {@const files = getFiles(value)}
-  <div style="display:flex; flex-direction: column; gap: 4px;">
+  <div class="lite-stack-xs">
     {#each files as f, _i (_i)}
       {@const href = toSafeHref(f)}
       {#if href}

package/dist/components/fields/LiteImageField.svelte

@@ -21,7 +21,7 @@
 
 {#if mode === 'show'}
   {@const urls = getUrls(value)}
-  <div style="display:flex; gap: 8px; flex-wrap: wrap;">
+  <div class="lite-inline-md lite-flex-wrap">
     {#each urls as url, _i (_i)}
       <img src={url} alt={field.label} style="max-height: 100px; border-radius: 4px; border: 1px solid #e5e7eb;" />
     {:else}
@@ -32,7 +32,7 @@
   {@const urls = getUrls(value)}
   <div>
     {#if urls.length > 0}
-      <div style="margin-bottom: 8px; display:flex; gap: 8px;">
+      <div class="lite-inline-md lite-flex-wrap" style="margin-bottom: 8px;">
         {#each urls as url, _i (_i)}
           <img src={url} alt="Current" style="height: 60px; border-radius: 4px; border: 1px solid #e5e7eb; opacity: 0.6;" />
         {/each}

package/dist/components/fields/LiteMultiSelectField.svelte

@@ -23,7 +23,7 @@
 </script>
 
 {#if mode === 'show'}
-  <div style="display:flex; gap: 4px; flex-wrap: wrap;">
+  <div class="lite-inline-xs lite-flex-wrap">
     {#each displayOptions(value) as opt, _i (_i)}
       <span class="lite-badge">{opt}</span>
     {:else}

package/dist/components/fields/LiteRichTextField.svelte

@@ -21,7 +21,7 @@
   </div>
 {:else}
   <div class="lite-markdown-editor">
-    <div style="padding: 8px 12px; border: 1px solid #cbd5e1; border-bottom: none; border-radius: 6px 6px 0 0; background: #f8fafc; color: #64748b; font-size: 12px; display: flex; gap: 12px; font-weight: 500;">
+    <div class="lite-inline-lg lite-flex-wrap" style="padding: 8px 12px; border: 1px solid #cbd5e1; border-bottom: none; border-radius: 6px 6px 0 0; background: #f8fafc; color: #64748b; font-size: 12px; font-weight: 500;">
       <span>Markdown is supported</span>
       <span style="color: #94a3b8;">**bold**</span>
       <span style="color: #94a3b8; font-style: italic;">*italic*</span>

package/dist/components/fields/LiteTagField.svelte

@@ -14,7 +14,7 @@
 </script>
 
 {#if mode === 'show'}
-  <div style="display:flex; gap: 4px; flex-wrap: wrap;">
+  <div class="lite-inline-xs lite-flex-wrap">
     {#each tags as tag, _i (_i)}
       <span class="lite-badge">{tag}</span>
     {:else}

package/dist/components/layout/LiteHeader.svelte

@@ -11,7 +11,7 @@
 
 <header class="lite-header" style="padding: 16px 24px; background: white; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
   <h2 style="margin: 0; font-size: 18px; font-weight: 600; color: #0f172a;">{title}</h2>
-  <div style="display: flex; gap: 12px; align-items: center;">
+  <div class="lite-inline-lg" style="align-items: center;">
     {#if children}
       {@render children()}
     {/if}

package/dist/components/layout/LiteMenuList.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { MenuItem } from '@svadmin/core';
+  import LiteMenuList from './LiteMenuList.svelte';
+
+  interface Props {
+    items: MenuItem[];
+    basePath: string;
+    currentResource: string;
+    depth?: number;
+  }
+
+  let { items, basePath, currentResource, depth = 0 }: Props = $props();
+
+  function itemHref(menuItem: MenuItem): string {
+    return menuItem.href ?? `${basePath}/${menuItem.name}`;
+  }
+
+  function isActive(menuItem: MenuItem): boolean {
+    return currentResource === itemHref(menuItem).replace(basePath + '/', '');
+  }
+</script>
+
+<ul class="lite-menu-list lite-menu-depth-{depth}">
+  {#each items as menuItem (menuItem.name)}
+    <li>
+      {#if menuItem.children && menuItem.children.length > 0}
+        <span class="lite-menu-parent">{menuItem.label ?? menuItem.name}</span>
+        <LiteMenuList
+          items={menuItem.children}
+          {basePath}
+          {currentResource}
+          depth={depth + 1}
+        />
+      {:else}
+        <a
+          href={itemHref(menuItem)}
+          class={isActive(menuItem) ? 'active' : ''}
+          target={menuItem.target === '_blank' ? '_blank' : undefined}
+          rel={menuItem.target === '_blank' ? 'noreferrer' : undefined}
+        >{menuItem.label ?? menuItem.name}</a>
+      {/if}
+    </li>
+  {/each}
+</ul>

package/dist/components/layout/LiteMenuList.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { MenuItem } from '@svadmin/core';
+import LiteMenuList from './LiteMenuList.svelte';
+interface Props {
+    items: MenuItem[];
+    basePath: string;
+    currentResource: string;
+    depth?: number;
+}
+declare const LiteMenuList: import("svelte").Component<Props, {}, "">;
+type LiteMenuList = ReturnType<typeof LiteMenuList>;
+export default LiteMenuList;

package/dist/components/layout/LiteSidebar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { ResourceDefinition, MenuItem } from '@svadmin/core';
   import { filterVisibleMenu, filterVisibleResources } from '../../menu-visibility';
+  import LiteMenuList from './LiteMenuList.svelte';
 
   interface Props {
     resources: ResourceDefinition[];
@@ -26,56 +27,12 @@
 
   const hasCustomMenu = $derived(menu !== undefined);
   const visibleMenu = $derived(menu ? filterVisibleMenu(menu, canAccess) : []);
-
-  function isActive(href: string | undefined): boolean {
-    if (!href) return false;
-    return currentResource === href.replace(basePath + '/', '');
-  }
-
-  function hasActiveChild(children?: MenuItem[]): boolean {
-    if (!children) return false;
-    return children.some(c => isActive(c.href ?? `${basePath}/${c.name}`));
-  }
 </script>
 
 <nav class="lite-sidebar">
   <div class="lite-sidebar-brand">{brandName}</div>
   {#if hasCustomMenu}
-    {#each visibleMenu as item, _i (_i)}
-      {#if item.children && item.children.length > 0}
-        <details class="lite-menu-group" open={hasActiveChild(item.children)}>
-          <summary class="lite-menu-parent">{item.label ?? item.name}</summary>
-          {#each item.children as child, _i (_i)}
-            {#if child.children && child.children.length > 0}
-              <details class="lite-menu-group" style="margin-left:12px" open={hasActiveChild(child.children)}>
-                <summary class="lite-menu-parent">{child.label ?? child.name}</summary>
-                {#each child.children as grandchild, _i (_i)}
-                  <a
-                    href={grandchild.href ?? `${basePath}/${grandchild.name}`}
-                    class={isActive(grandchild.href ?? `${basePath}/${grandchild.name}`) ? 'active' : ''}
-                    target={grandchild.target === '_blank' ? '_blank' : undefined}
-                    style="padding-left:40px"
-                  >{grandchild.label ?? grandchild.name}</a>
-                {/each}
-              </details>
-            {:else}
-              <a
-                href={child.href ?? `${basePath}/${child.name}`}
-                class={isActive(child.href ?? `${basePath}/${child.name}`) ? 'active' : ''}
-                target={child.target === '_blank' ? '_blank' : undefined}
-                style="padding-left:28px"
-              >{child.label ?? child.name}</a>
-            {/if}
-          {/each}
-        </details>
-      {:else}
-        <a
-          href={item.href ?? `${basePath}/${item.name}`}
-          class={isActive(item.href ?? `${basePath}/${item.name}`) ? 'active' : ''}
-          target={item.target === '_blank' ? '_blank' : undefined}
-        >{item.label ?? item.name}</a>
-      {/if}
-    {/each}
+    <LiteMenuList items={visibleMenu} {basePath} {currentResource} />
   {:else}
     {#each menuResources as res, _i (_i)}
       <a

package/dist/components/pages/LiteForgotPasswordPage.svelte

@@ -25,8 +25,7 @@
       <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
     </div>
 
-    <!-- Native form action -->
-    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
+    <form method="POST" {action} class="lite-stack-lg">
       <div class="lite-form-group">
         <label for="email">Email</label>
         <input type="email" id="email" name="email" class="lite-input" required />

package/dist/components/pages/LiteProfilePage.svelte

@@ -22,7 +22,7 @@
   </div>
 
   <div class="lite-card" style="max-width: 600px; margin: 0 auto; padding: 24px;">
-    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
+    <form method="POST" {action} class="lite-stack-lg">
       <div class="lite-form-group">
         <label for="name">Name</label>
         <input type="text" id="name" name="name" class="lite-input" value={user?.name ?? ''} />

package/dist/components/pages/LiteRegisterPage.svelte

@@ -24,8 +24,7 @@
       <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
     </div>
 
-    <!-- We use native form action -->
-    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
+    <form method="POST" {action} class="lite-stack-lg">
       <div class="lite-form-group">
         <label for="email">Email</label>
         <input type="email" id="email" name="email" class="lite-input" required />

package/dist/components/pages/LiteShowPage.svelte

@@ -47,7 +47,7 @@
   </div>
 
   <div class="lite-card" style="padding: 24px;">
-    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;">
+    <div class="lite-stack-lg">
       {#each showFields as field, _i (_i)}
         <div>
           <div style="display: block; font-size: 13px; font-weight: 500; color: #64748b; margin-bottom: 8px;">

package/dist/components/pages/LiteUpdatePasswordPage.svelte

@@ -21,8 +21,7 @@
       <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
     </div>
 
-    <!-- Native form action -->
-    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
+    <form method="POST" {action} class="lite-stack-lg">
       <div class="lite-form-group">
         <label for="password">New Password</label>
         <input type="password" id="password" name="password" class="lite-input" required minlength="6" />

package/dist/components/widgets/LiteBarChart.svelte

@@ -26,7 +26,7 @@
       {title}
     </div>
   {/if}
-  <div style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
+  <div class="lite-stack-md" style="padding: 16px;">
     {#each data as point, _i (_i)}
       <div>
         <div style="display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px;">

package/dist/components/widgets/LiteInsightCard.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <div class="lite-card" style="margin-bottom: 16px;">
-  <div style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a; display: flex; align-items: center; gap: 8px;">
+  <div class="lite-inline-md" style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a; align-items: center;">
     <span style="color: #f59e0b;">✦</span>
     {title}
   </div>

package/dist/components/widgets/LitePieChart.svelte

@@ -27,10 +27,10 @@
       {title}
     </div>
   {/if}
-  <div style="padding: 16px; display: flex; flex-direction: column; gap: 10px;">
+  <div class="lite-stack-md" style="padding: 16px;">
     {#each data as point, i (i)}
       {@const pct = total > 0 ? ((point.value / total) * 100).toFixed(1) : '0.0'}
-      <div style="display: flex; align-items: center; gap: 10px; font-size: 13px;">
+      <div class="lite-inline-lg" style="align-items: center; font-size: 13px;">
         <span style="width: 12px; height: 12px; border-radius: 50%; background: {point.color ?? defaultColors[i % defaultColors.length]}; flex-shrink: 0;"></span>
         <span style="flex: 1; color: #334155;">{point.label}</span>
         <span style="color: #64748b; font-weight: 500;">{point.value}</span>

package/dist/enhance.js

@@ -54,20 +54,29 @@
     });
   }
 
+  function hasClass(element, className) {
+    return (' ' + element.className + ' ').indexOf(' ' + className + ' ') !== -1;
+  }
+
+  function closeActiveConfirmation(clickedNode) {
+    var targetId = window.location.hash.slice(1);
+    if (!targetId) return;
+
+    var confirmation = document.getElementById(targetId);
+    if (!confirmation || !hasClass(confirmation, 'lite-confirm-target')) return;
+    if (clickedNode && confirmation.contains(clickedNode)) return;
+
+    var closedTarget = document.getElementById(targetId + '-closed');
+    if (closedTarget) window.location.hash = closedTarget.id;
+  }
+
   function init() {
     document.documentElement.className += ' lite-js';
 
-  // 1. Delete confirmation — close <details> when clicking outside
   document.addEventListener('click', function(e) {
-    var details = document.querySelectorAll('details.lite-confirm-details');
-    for (var i = 0; i < details.length; i++) {
-      if (!details[i].contains(e.target)) {
-        details[i].removeAttribute('open');
-      }
-    }
+    closeActiveConfirmation(e.target);
   });
 
-  // 2. Highlight current table row on hover (for older browsers without :hover)
   var rows = document.querySelectorAll('.lite-table tbody tr');
   for (var j = 0; j < rows.length; j++) {
     rows[j].addEventListener('mouseenter', function() {

package/dist/fragment-id.d.ts

@@ -0,0 +1 @@
+export declare function liteFragmentId(scope: string, ...tokens: Array<string | number>): string;

package/dist/fragment-id.js

@@ -0,0 +1,11 @@
+function fragmentToken(rawToken) {
+    const encodedToken = Array.from(String(rawToken), (character) => {
+        if (/^[a-z0-9]$/iu.test(character))
+            return character;
+        return `_${character.codePointAt(0)?.toString(16)}_`;
+    }).join('');
+    return `${encodedToken.length}_${encodedToken}`;
+}
+export function liteFragmentId(scope, ...tokens) {
+    return `lite-${[scope, ...tokens].map(fragmentToken).join('-')}`;
+}

package/dist/lite.css

@@ -62,7 +62,7 @@ a:hover {
   border-bottom: 1px solid #e2e8f0;
 }
 
-.lite-mobile-nav summary {
+.lite-mobile-nav-brand {
   cursor: pointer;
   padding: 14px 16px;
   font-weight: 700;
@@ -137,37 +137,34 @@ a:hover {
   background: #4f46e5;
 }
 
-/* ─── Multi-Level Menu (details/summary) ──────────────────── */
-.lite-menu-group {
+/* ─── Multi-Level Menu ───────────────────────────────────── */
+.lite-menu-list {
+  list-style: none;
   margin: 0;
-  border: none;
+  padding: 0;
 }
-.lite-menu-group summary {
-  list-style: none;
-  cursor: pointer;
+.lite-menu-list .lite-menu-list {
+  margin-left: 12px;
+}
+.lite-menu-parent {
+  display: block;
   padding: 8px 16px;
   color: #64748b;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  transition: color 0.15s ease, background 0.15s ease;
-}
-.lite-menu-group summary::-webkit-details-marker {
-  display: none;
-}
-.lite-menu-group summary:hover {
-  color: #0f172a;
-  background: #f8fafc;
-}
-.lite-menu-group[open] > summary {
-  color: #0f172a;
 }
-.lite-menu-group[open] > summary::after {
+.lite-menu-parent::after {
   content: " \25BE";
 }
-.lite-menu-group:not([open]) > summary::after {
-  content: " \25B8";
+.lite-menu-depth-1 > li > a,
+.lite-menu-depth-1 > li > .lite-menu-parent {
+  padding-left: 28px;
+}
+.lite-menu-depth-2 > li > a,
+.lite-menu-depth-2 > li > .lite-menu-parent {
+  padding-left: 40px;
 }
 
 .lite-main {
@@ -669,19 +666,9 @@ textarea.lite-input {
 
 /* ─── Delete Confirmation ──────────────────────────────────── */
 .lite-confirm {
-  display: inline;
-}
-.lite-confirm-details {
   position: relative;
   display: inline-block;
 }
-.lite-confirm-details summary {
-  cursor: pointer;
-  list-style: none;
-}
-.lite-confirm-details summary::-webkit-details-marker {
-  display: none;
-}
 .lite-confirm-panel {
   position: absolute;
   right: 0;
@@ -697,6 +684,68 @@ textarea.lite-input {
   white-space: nowrap;
   margin-top: 4px;
 }
+.lite-confirm-target {
+  display: none;
+}
+.lite-confirm-target:target {
+  display: block;
+}
+.lite-confirm-cancel-target {
+  display: none;
+}
+.lite-inline-actions {
+  display: inline-flex;
+  margin: 0;
+}
+.lite-inline-actions > * + * {
+  margin-left: 8px;
+}
+.lite-stack-sm {
+  display: flex;
+  flex-direction: column;
+}
+.lite-stack-sm > * + * {
+  margin-top: 8px;
+}
+.lite-stack-xs,
+.lite-stack-md,
+.lite-stack-lg {
+  display: flex;
+  flex-direction: column;
+}
+.lite-stack-xs > * + * {
+  margin-top: 4px;
+}
+.lite-stack-md > * + * {
+  margin-top: 12px;
+}
+.lite-stack-lg > * + * {
+  margin-top: 16px;
+}
+.lite-inline-xs,
+.lite-inline-sm,
+.lite-inline-md,
+.lite-inline-lg {
+  display: flex;
+}
+.lite-inline-xs > * + * {
+  margin-left: 4px;
+}
+.lite-inline-sm > * + * {
+  margin-left: 6px;
+}
+.lite-inline-md > * + * {
+  margin-left: 8px;
+}
+.lite-inline-lg > * + * {
+  margin-left: 12px;
+}
+.lite-flex-wrap {
+  flex-wrap: wrap;
+}
+.lite-justify-end {
+  justify-content: flex-end;
+}
 
 /* ─── Login Page ───────────────────────────────────────────── */
 .lite-login-wrapper {
@@ -802,8 +851,7 @@ textarea.lite-input {
   .lite-search,
   .lite-pagination,
   .lite-btn,
-  .lite-confirm,
-  .lite-confirm-details {
+  .lite-confirm {
     display: none !important;
   }
   .lite-main {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/lite",
-  "version": "0.3.15",
+  "version": "0.3.18",
   "description": "SSR-first lightweight admin UI for @svadmin with optional progressive enhancement",
   "type": "module",
   "sideEffects": [
@@ -53,7 +53,7 @@
     "@sveltejs/kit": "^2.70.2"
   },
   "dependencies": {
-    "@lucide/svelte": "^1.30.0",
+    "@lucide/svelte": "^1.31.0",
     "zod": "^4.4.3"
   },
   "devDependencies": {
@@ -69,7 +69,7 @@
     "build": "node ../../node_modules/@sveltejs/package/svelte-package.js -i src -o dist && bun ../../scripts/copy-package-assets.ts static/enhance.js dist/enhance.js",
     "test": "bun run test:components && bun run test:server && bun run test:security",
     "test:components": "vitest run --config ./vitest.config.ts",
-    "test:server": "bun test ./src/schema-generator.test.ts ./src/server-adapter.test.ts",
+    "test:server": "bun test ./src/schema-generator.test.ts ./src/server-adapter.test.ts ./src/fragment-id.test.ts ./src/ie11-ssr-contract.test.ts",
     "test:security": "vitest run --config ./src/security.test.config.ts"
   },
   "license": "MIT",
@@ -80,7 +80,7 @@
   "author": "zuohuadong",
   "repository": {
     "type": "git",
-    "url": "https://github.com/zuohuadong/svadmin.git",
+    "url": "https://github.com/vibeunion/svadmin.git",
     "directory": "packages/lite"
   }
 }