@svadmin/lite 0.5.0 → 0.7.0

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

@@ -0,0 +1,23 @@
+import type { FieldDefinition } from '@svadmin/core';
+export interface TreeSelectOption {
+    value: string | number;
+    label: string;
+    children?: TreeSelectOption[];
+    disabled?: boolean;
+}
+interface Props {
+    field?: FieldDefinition;
+    name?: string;
+    label?: string;
+    value?: string | number | (string | number)[];
+    options?: TreeSelectOption[];
+    multiple?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteTreeSelect: import("svelte").Component<Props, {}, "">;
+type LiteTreeSelect = ReturnType<typeof LiteTreeSelect>;
+export default LiteTreeSelect;

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

@@ -13,3 +13,15 @@ export { default as LiteFileField } from './LiteFileField.svelte';
 export { default as LiteRichTextField } from './LiteRichTextField.svelte';
 export { default as LiteMarkdownField } from './LiteMarkdownField.svelte';
 export { default as LiteJsonField } from './LiteJsonField.svelte';
+export { default as LiteAvatarField } from './LiteAvatarField.svelte';
+export { default as LiteCodeField } from './LiteCodeField.svelte';
+export { default as LiteCopyField } from './LiteCopyField.svelte';
+export { default as LiteCurrencyField } from './LiteCurrencyField.svelte';
+export { default as LiteDateRangeField } from './LiteDateRangeField.svelte';
+export { default as LitePercentField } from './LitePercentField.svelte';
+export { default as LitePhoneField } from './LitePhoneField.svelte';
+export { default as LiteRatingField } from './LiteRatingField.svelte';
+export { default as LiteTreeSelect } from './LiteTreeSelect.svelte';
+export type { TreeSelectOption } from './LiteTreeSelect.svelte';
+export { default as LiteCascader } from './LiteCascader.svelte';
+export type { CascaderOption } from './LiteCascader.svelte';

package/dist/components/fields/index.js

@@ -13,3 +13,13 @@ export { default as LiteFileField } from './LiteFileField.svelte';
 export { default as LiteRichTextField } from './LiteRichTextField.svelte';
 export { default as LiteMarkdownField } from './LiteMarkdownField.svelte';
 export { default as LiteJsonField } from './LiteJsonField.svelte';
+export { default as LiteAvatarField } from './LiteAvatarField.svelte';
+export { default as LiteCodeField } from './LiteCodeField.svelte';
+export { default as LiteCopyField } from './LiteCopyField.svelte';
+export { default as LiteCurrencyField } from './LiteCurrencyField.svelte';
+export { default as LiteDateRangeField } from './LiteDateRangeField.svelte';
+export { default as LitePercentField } from './LitePercentField.svelte';
+export { default as LitePhoneField } from './LitePhoneField.svelte';
+export { default as LiteRatingField } from './LiteRatingField.svelte';
+export { default as LiteTreeSelect } from './LiteTreeSelect.svelte';
+export { default as LiteCascader } from './LiteCascader.svelte';

package/dist/components/pages/LiteCreatePage.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import type { ResourceDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import LiteForm from '../LiteForm.svelte';
-  import LiteListButton from '../buttons/LiteListButton.svelte';
+  import type { ResourceDefinition } from "@svadmin/core";
+  import { t } from "@svadmin/core/i18n";
+  import LiteForm from "../LiteForm.svelte";
+  import LiteBreadcrumbs from "../LiteBreadcrumbs.svelte";
+  import LiteListButton from "../buttons/LiteListButton.svelte";
 
   interface Props {
     resource: ResourceDefinition;
@@ -15,13 +16,21 @@
     resource,
     errors = {},
     values = {},
-    basePath = '/lite',
+    basePath = "/lite",
   }: Props = $props();
 </script>
 
 <div class="lite-page">
+  <LiteBreadcrumbs
+    items={[
+      { label: t("common.dashboard") || "Dashboard", href: basePath },
+      { label: resource.label || resource.name, href: `${basePath}/${resource.name}` },
+      { label: t("common.create") || "Create" },
+    ]}
+  />
+
   <div class="lite-page-header">
-    <h1 class="lite-page-title">{t('common.create') || 'Create'} {resource.label || resource.name}</h1>
+    <h1 class="lite-page-title">{t("common.create") || "Create"} {resource.label || resource.name}</h1>
     <div class="lite-page-actions">
       <LiteListButton resource={resource.name} {basePath} />
     </div>

package/dist/components/pages/LiteCreatePage.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ResourceDefinition } from '@svadmin/core';
+import type { ResourceDefinition } from "@svadmin/core";
 interface Props {
     resource: ResourceDefinition;
     errors?: Record<string, string[]>;

package/dist/components/pages/LiteEditPage.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import type { ResourceDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import LiteForm from '../LiteForm.svelte';
-  import LiteListButton from '../buttons/LiteListButton.svelte';
-  import LiteShowButton from '../buttons/LiteShowButton.svelte';
-  import LiteDeleteButton from '../buttons/LiteDeleteButton.svelte';
+  import type { ResourceDefinition } from "@svadmin/core";
+  import { t } from "@svadmin/core/i18n";
+  import LiteForm from "../LiteForm.svelte";
+  import LiteBreadcrumbs from "../LiteBreadcrumbs.svelte";
+  import LiteListButton from "../buttons/LiteListButton.svelte";
+  import LiteShowButton from "../buttons/LiteShowButton.svelte";
+  import LiteDeleteButton from "../buttons/LiteDeleteButton.svelte";
 
   interface Props {
     resource: ResourceDefinition;
@@ -19,20 +20,28 @@
     resource,
     record,
     errors = {},
-    basePath = '/lite',
+    basePath = "/lite",
     canDelete,
     canShow,
   }: Props = $props();
 
-  let pk = $derived(resource.primaryKey ?? 'id');
+  let pk = $derived(resource.primaryKey ?? "id");
   let idStr = $derived(String(record[pk]));
   const showDelete = $derived(canDelete ?? resource.canDelete !== false);
   const showView = $derived(canShow ?? resource.canShow !== false);
 </script>
 
 <div class="lite-page">
+  <LiteBreadcrumbs
+    items={[
+      { label: t("common.dashboard") || "Dashboard", href: basePath },
+      { label: resource.label || resource.name, href: `${basePath}/${resource.name}` },
+      { label: `${t("common.edit") || "Edit"} #${idStr}` },
+    ]}
+  />
+
   <div class="lite-page-header">
-    <h1 class="lite-page-title">{t('common.edit') || 'Edit'} {resource.label || resource.name} #{idStr}</h1>
+    <h1 class="lite-page-title">{t("common.edit") || "Edit"} {resource.label || resource.name} #{idStr}</h1>
     <div class="lite-page-actions">
       {#if showView}
         <LiteShowButton resource={resource.name} recordItemId={idStr} {basePath} />

package/dist/components/pages/LiteEditPage.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ResourceDefinition } from '@svadmin/core';
+import type { ResourceDefinition } from "@svadmin/core";
 interface Props {
     resource: ResourceDefinition;
     record: Record<string, unknown>;

package/dist/components/pages/LiteListPage.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import type { ResourceDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import LiteTable from '../LiteTable.svelte';
-  import LitePagination from '../LitePagination.svelte';
-  import LiteSearch from '../LiteSearch.svelte';
-  import LiteCreateButton from '../buttons/LiteCreateButton.svelte';
-  import LiteRefreshButton from '../buttons/LiteRefreshButton.svelte';
+  import type { ResourceDefinition } from "@svadmin/core";
+  import { t } from "@svadmin/core/i18n";
+  import LiteTable from "../LiteTable.svelte";
+  import LitePagination from "../LitePagination.svelte";
+  import LiteBreadcrumbs from "../LiteBreadcrumbs.svelte";
+  import LiteCreateButton from "../buttons/LiteCreateButton.svelte";
+  import LiteRefreshButton from "../buttons/LiteRefreshButton.svelte";
 
   interface Props {
     resource: ResourceDefinition;
@@ -13,13 +13,15 @@
     total: number;
     pagination: { page: number; perPage: number };
     currentSort?: string;
-    currentOrder?: 'asc' | 'desc';
+    currentOrder?: "asc" | "desc";
     currentSearch?: string;
+    currentFilters?: Record<string, string>;
     basePath?: string;
     canCreate?: boolean;
     canShow?: boolean;
     canEdit?: boolean;
     canDelete?: boolean;
+    enableBatch?: boolean;
   }
 
   let {
@@ -28,24 +30,43 @@
     total,
     pagination,
     currentSort,
-    currentOrder = 'asc',
+    currentOrder = "asc",
     currentSearch,
-    basePath = '/lite',
+    currentFilters = {},
+    basePath = "/lite",
     canCreate,
     canShow,
     canEdit,
     canDelete,
+    enableBatch = true,
   }: Props = $props();
 
   const showCreate = $derived(canCreate ?? resource.canCreate !== false);
   const showView = $derived(canShow ?? resource.canShow !== false);
   const showEdit = $derived(canEdit ?? resource.canEdit !== false);
   const showDelete = $derived(canDelete ?? resource.canDelete !== false);
+
+  const filterableFields = $derived(
+    resource.fields
+      .filter((f) => f.type === "select" && f.options && f.options.length > 0 && f.filterable !== false)
+      .slice(0, 3)
+  );
+
+  const hasActiveFilters = $derived(
+    Boolean(currentSearch) || Object.values(currentFilters).some((v) => Boolean(v))
+  );
 </script>
 
 <div class="lite-page">
+  <LiteBreadcrumbs
+    items={[
+      { label: t("common.dashboard") || "Dashboard", href: basePath },
+      { label: resource.label || resource.name },
+    ]}
+  />
+
   <div class="lite-page-header">
-    <h1 class="lite-page-title">{resource.label || resource.name} {t('common.list') || 'List'}</h1>
+    <h1 class="lite-page-title">{resource.label || resource.name} {t("common.list") || "List"}</h1>
     <div class="lite-page-actions">
       {#if showCreate}
         <LiteCreateButton resource={resource.name} {basePath} />
@@ -55,25 +76,75 @@
   </div>
 
   <div class="lite-card" style="margin-bottom: 20px;">
-    <div style="padding: 16px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
-      <LiteSearch value={currentSearch} placeholder={t('common.search') || 'Search...'} />
+    <div style="padding: 16px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
+      <form method="GET" class="lite-filter-bar" style="margin: 0;">
+        <input
+          type="text"
+          name="q"
+          value={currentSearch ?? ""}
+          placeholder={t("common.search") || "Search..."}
+          class="lite-input"
+          style="width: 200px; display: inline-block;"
+        />
+
+        {#each filterableFields as field (field.key)}
+          <select
+            name={field.key}
+            class="lite-select"
+            style="width: 150px; display: inline-block;"
+          >
+            <option value="">All {field.label}</option>
+            {#if field.options}
+              {#each field.options as opt (opt.value)}
+                <option
+                  value={String(opt.value)}
+                  selected={String(currentFilters[field.key] ?? "") === String(opt.value)}
+                >
+                  {opt.label}
+                </option>
+              {/each}
+            {/if}
+          </select>
+        {/each}
+
+        {#if currentSort}
+          <input type="hidden" name="sort" value={currentSort} />
+        {/if}
+        {#if currentOrder}
+          <input type="hidden" name="order" value={currentOrder} />
+        {/if}
+
+        <button type="submit" class="lite-btn lite-btn-sm lite-btn-primary">
+          {t("common.filter") || "Filter"}
+        </button>
+
+        {#if hasActiveFilters}
+          <a href={basePath + "/" + resource.name} class="lite-btn lite-btn-sm">
+            {t("common.reset") || "Reset"}
+          </a>
+        {/if}
+      </form>
+
       <span style="font-size: 13px; color: #64748b;">
-        {t('common.total') || 'Total'}: {total}
+        {t("common.total") || "Total"}: <strong>{total}</strong>
       </span>
     </div>
 
-    <LiteTable
-      {records}
-      {resource}
-      {currentSort}
-      {currentOrder}
-      {currentSearch}
-      {basePath}
-      canShow={showView}
-      canEdit={showEdit}
-      canDelete={showDelete}
-    />
-    
+    <div class="lite-table-scroll">
+      <LiteTable
+        {records}
+        {resource}
+        {currentSort}
+        {currentOrder}
+        {currentSearch}
+        {basePath}
+        canShow={showView}
+        canEdit={showEdit}
+        canDelete={showDelete}
+        {enableBatch}
+      />
+    </div>
+
     {#if total > pagination.perPage}
       <LitePagination
         page={pagination.page}
@@ -81,7 +152,8 @@
         preserveParams={{
           ...(currentSort ? { sort: currentSort } : {}),
           ...(currentOrder ? { order: currentOrder } : {}),
-          ...(currentSearch ? { q: currentSearch } : {})
+          ...(currentSearch ? { q: currentSearch } : {}),
+          ...currentFilters,
         }}
       />
     {/if}

package/dist/components/pages/LiteListPage.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ResourceDefinition } from '@svadmin/core';
+import type { ResourceDefinition } from "@svadmin/core";
 interface Props {
     resource: ResourceDefinition;
     records: Record<string, unknown>[];
@@ -8,13 +8,15 @@ interface Props {
         perPage: number;
     };
     currentSort?: string;
-    currentOrder?: 'asc' | 'desc';
+    currentOrder?: "asc" | "desc";
     currentSearch?: string;
+    currentFilters?: Record<string, string>;
     basePath?: string;
     canCreate?: boolean;
     canShow?: boolean;
     canEdit?: boolean;
     canDelete?: boolean;
+    enableBatch?: boolean;
 }
 declare const LiteListPage: import("svelte").Component<Props, {}, "">;
 type LiteListPage = ReturnType<typeof LiteListPage>;

package/dist/components/pages/LiteShowPage.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import type { ResourceDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import LiteShowField from '../LiteShowField.svelte';
-  import LiteListButton from '../buttons/LiteListButton.svelte';
-  import LiteEditButton from '../buttons/LiteEditButton.svelte';
-  import LiteDeleteButton from '../buttons/LiteDeleteButton.svelte';
+  import type { ResourceDefinition } from "@svadmin/core";
+  import { t } from "@svadmin/core/i18n";
+  import LiteShowField from "../LiteShowField.svelte";
+  import LiteBreadcrumbs from "../LiteBreadcrumbs.svelte";
+  import LiteListButton from "../buttons/LiteListButton.svelte";
+  import LiteEditButton from "../buttons/LiteEditButton.svelte";
+  import LiteDeleteButton from "../buttons/LiteDeleteButton.svelte";
 
   interface Props {
     resource: ResourceDefinition;
@@ -17,12 +18,12 @@
   let {
     resource,
     record,
-    basePath = '/lite',
+    basePath = "/lite",
     canEdit,
     canDelete,
   }: Props = $props();
 
-  let pk = $derived(resource.primaryKey ?? 'id');
+  let pk = $derived(resource.primaryKey ?? "id");
   let idStr = $derived(String(record[pk]));
   const showEdit = $derived(canEdit ?? resource.canEdit !== false);
   const showDelete = $derived(canDelete ?? resource.canDelete !== false);
@@ -33,8 +34,16 @@
 </script>
 
 <div class="lite-page">
+  <LiteBreadcrumbs
+    items={[
+      { label: t("common.dashboard") || "Dashboard", href: basePath },
+      { label: resource.label || resource.name, href: `${basePath}/${resource.name}` },
+      { label: `#${idStr}` },
+    ]}
+  />
+
   <div class="lite-page-header">
-    <h1 class="lite-page-title">{t('common.show') || 'Show'} {resource.label || resource.name} #{idStr}</h1>
+    <h1 class="lite-page-title">{t("common.show") || "Show"} {resource.label || resource.name} #{idStr}</h1>
     <div class="lite-page-actions">
       {#if showEdit}
         <LiteEditButton resource={resource.name} recordItemId={idStr} {basePath} />
@@ -54,7 +63,7 @@
             {field.label}
           </div>
           <div style="color: #0f172a; font-size: 14px;">
-            <LiteShowField {field} value={record[field.key]} />
+            <LiteShowField {field} value={record[field.key]} {basePath} />
           </div>
         </div>
       {/each}

package/dist/components/pages/LiteShowPage.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ResourceDefinition } from '@svadmin/core';
+import type { ResourceDefinition } from "@svadmin/core";
 interface Props {
     resource: ResourceDefinition;
     record: Record<string, unknown>;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
-export { createListLoader, createDetailLoader, createCrudActions, createAuthGuard, createAuthActions, createLegacyRedirectHook, isLegacyBrowser, } from './server-adapter';
-export type { ListLoaderResult } from './server-adapter';
+export { createListLoader, createDetailLoader, createCrudActions, createAuthGuard, createAuthActions, createLegacyRedirectHook, getLegacyRedirectLocation, isLegacyBrowser, } from './server-adapter';
+export type { LegacyRedirectOptions, ListLoaderResult } from './server-adapter';
+export { LITE_COMPATIBILITY_CATALOG, detectLiteCapabilities, resolveLiteCompatibility, } from './compatibility';
+export type { LiteCapability, LiteCapabilitySupport, LiteCompatibilityDescriptor, LiteCompatibilityResolution, LiteFallbackKind, } from './compatibility';
 export { fieldsToTypeBoxSchema, resourceToTypeBoxSchema, fieldsToZodSchema, resourceToZodSchema, fieldToInputType, fieldToPlaceholder, } from './schema-generator';
 export { getStatusBadgeClass, parseExplicitBoolean, isExplicitBooleanTrue } from './value-normalization';
 export { default as LiteLayout } from './components/LiteLayout.svelte';
@@ -13,6 +15,11 @@ export { default as LiteAlert } from './components/LiteAlert.svelte';
 export { default as LitePermissionMatrix } from './components/LitePermissionMatrix.svelte';
 export { default as LiteAuditLog } from './components/LiteAuditLog.svelte';
 export { default as LiteArrayField } from './components/LiteArrayField.svelte';
+export { default as LiteDynamicFormList } from './components/LiteDynamicFormList.svelte';
+export { default as LiteTransfer } from './components/LiteTransfer.svelte';
+export type { TransferItem } from './components/LiteTransfer.svelte';
+export { default as LiteFilterBuilder } from './components/LiteFilterBuilder.svelte';
+export type { FilterRuleItem } from './components/LiteFilterBuilder.svelte';
 export { default as LiteBreadcrumbs } from './components/LiteBreadcrumbs.svelte';
 export { default as LiteStatsCard } from './components/LiteStatsCard.svelte';
 export { default as LiteConfirmDialog } from './components/LiteConfirmDialog.svelte';
@@ -21,6 +28,7 @@ export { default as LiteTabs } from './components/LiteTabs.svelte';
 export { default as LiteShowField } from './components/LiteShowField.svelte';
 export { default as LiteMediaThumbnail } from './components/LiteMediaThumbnail.svelte';
 export { default as LiteChatDialog } from './components/LiteChatDialog.svelte';
+export * from './components/compatibility/index';
 export * from './components/buttons/index';
 export * from './components/fields/index';
 export * from './components/pages/index';

package/dist/index.js

@@ -1,7 +1,9 @@
 // @svadmin/lite — Lightweight SSR Admin UI
 // Server-rendered by default, with optional progressive enhancement.
 // Server utilities (use in +page.server.ts / hooks.server.ts)
-export { createListLoader, createDetailLoader, createCrudActions, createAuthGuard, createAuthActions, createLegacyRedirectHook, isLegacyBrowser, } from './server-adapter';
+export { createListLoader, createDetailLoader, createCrudActions, createAuthGuard, createAuthActions, createLegacyRedirectHook, getLegacyRedirectLocation, isLegacyBrowser, } from './server-adapter';
+// Optional browser capabilities. The SSR baseline does not import browser globals.
+export { LITE_COMPATIBILITY_CATALOG, detectLiteCapabilities, resolveLiteCompatibility, } from './compatibility';
 // Schema generator (TypeBox schemas used by Lite actions and client forms)
 export { fieldsToTypeBoxSchema, resourceToTypeBoxSchema, fieldsToZodSchema, resourceToZodSchema, fieldToInputType, fieldToPlaceholder, } from './schema-generator';
 // UI Components (use in +page.svelte with csr = false)
@@ -17,6 +19,9 @@ export { default as LiteAlert } from './components/LiteAlert.svelte';
 export { default as LitePermissionMatrix } from './components/LitePermissionMatrix.svelte';
 export { default as LiteAuditLog } from './components/LiteAuditLog.svelte';
 export { default as LiteArrayField } from './components/LiteArrayField.svelte';
+export { default as LiteDynamicFormList } from './components/LiteDynamicFormList.svelte';
+export { default as LiteTransfer } from './components/LiteTransfer.svelte';
+export { default as LiteFilterBuilder } from './components/LiteFilterBuilder.svelte';
 export { default as LiteBreadcrumbs } from './components/LiteBreadcrumbs.svelte';
 export { default as LiteStatsCard } from './components/LiteStatsCard.svelte';
 export { default as LiteConfirmDialog } from './components/LiteConfirmDialog.svelte';
@@ -25,6 +30,8 @@ export { default as LiteTabs } from './components/LiteTabs.svelte';
 export { default as LiteShowField } from './components/LiteShowField.svelte';
 export { default as LiteMediaThumbnail } from './components/LiteMediaThumbnail.svelte';
 export { default as LiteChatDialog } from './components/LiteChatDialog.svelte';
+// Compatibility fallbacks for browser-only and third-party UI capabilities.
+export * from './components/compatibility/index';
 // Action Buttons
 export * from './components/buttons/index';
 // Fields