@svadmin/lite 0.5.0 → 0.6.0

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,10 +76,57 @@
   </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>
 
@@ -72,8 +140,9 @@
       canShow={showView}
       canEdit={showEdit}
       canDelete={showDelete}
+      {enableBatch}
     />
-    
+
     {#if total > pagination.perPage}
       <LitePagination
         page={pagination.page}
@@ -81,7 +150,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';
@@ -21,6 +23,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)
@@ -25,6 +27,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

package/dist/lite.css

@@ -174,6 +174,21 @@ a:hover {
   background: #f8fafc;
 }
 
+.lite-page-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.lite-page-title {
+  margin: 0;
+  font-size: 24px;
+  line-height: 1.25;
+  font-weight: 600;
+  color: #0f172a;
+}
+
 .lite-header {
   display: flex;
   align-items: center;
@@ -189,6 +204,40 @@ a:hover {
   letter-spacing: -0.025em;
 }
 
+
+/* ─── Breadcrumbs ──────────────────────────────────────────── */
+.lite-breadcrumbs {
+  margin-bottom: 16px;
+}
+.lite-breadcrumbs ol {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.lite-breadcrumbs li {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: #64748b;
+}
+.lite-breadcrumbs a {
+  color: #64748b;
+}
+.lite-breadcrumbs a:hover {
+  color: #0f172a;
+}
+.lite-breadcrumbs .current {
+  color: #0f172a;
+  font-weight: 500;
+}
+.lite-breadcrumb-sep {
+  margin: 0 8px;
+  color: #cbd5e1;
+}
+
 /* ─── Cards ────────────────────────────────────────────────── */
 .lite-card {
   background: #fff;
@@ -747,6 +796,174 @@ textarea.lite-input {
   justify-content: flex-end;
 }
 
+/* ─── Compatibility Fallbacks ─────────────────────────────── */
+.lite-compatibility {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #fff;
+  margin-bottom: 16px;
+}
+
+.lite-compatibility-header,
+.lite-section-header,
+.lite-realtime-status {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.lite-compatibility-header {
+  padding: 14px 16px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.lite-compatibility-header h2,
+.lite-section-header h2,
+.lite-ordered-list h2 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.lite-compatibility-header p,
+.lite-section-header p {
+  margin: 4px 0 0;
+  color: #64748b;
+  font-size: 12px;
+}
+
+.lite-compatibility-body {
+  padding: 16px;
+}
+
+.lite-visual-fallback {
+  padding: 0;
+}
+
+.lite-visual-fallback .lite-section-header {
+  padding: 14px 16px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.lite-visual-snapshot {
+  padding: 16px;
+  border-bottom: 1px solid #e2e8f0;
+  text-align: center;
+}
+
+.lite-visual-snapshot img {
+  display: inline-block;
+  max-width: 100%;
+  height: auto;
+}
+
+.lite-table-scroll {
+  overflow-x: auto;
+}
+
+.lite-muted {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.lite-realtime-status {
+  align-items: center;
+  padding: 10px 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  background: #fff;
+}
+
+.lite-realtime-status > div > * + * {
+  margin-left: 8px;
+}
+
+.lite-directory-upload {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  background: #fff;
+}
+
+.lite-directory-upload legend {
+  padding: 0 6px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.lite-ordered-list {
+  padding: 16px;
+}
+
+.lite-ordered-list ol {
+  margin: 12px 0 0;
+  padding-left: 24px;
+}
+
+.lite-ordered-list li {
+  padding: 10px 0 10px 4px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.lite-ordered-list li > div:first-child {
+  margin-bottom: 8px;
+}
+
+.lite-ordered-list li span {
+  display: block;
+  margin-top: 2px;
+  color: #64748b;
+  font-size: 12px;
+}
+
+.lite-compute-fallback {
+  padding: 16px;
+}
+
+.lite-clipboard-fallback {
+  margin-bottom: 0;
+}
+
+.lite-dashboard-stats,
+.lite-dashboard-split,
+.lite-resource-links {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -8px;
+  margin-right: -8px;
+  margin-bottom: 24px;
+}
+
+.lite-dashboard-stats > *,
+.lite-dashboard-split > *,
+.lite-resource-links > * {
+  margin-left: 8px;
+  margin-right: 8px;
+  margin-bottom: 16px;
+}
+
+.lite-dashboard-stats > * {
+  flex: 1 1 220px;
+}
+
+.lite-dashboard-split > *:first-child {
+  flex: 2 1 480px;
+}
+
+.lite-dashboard-split > *:last-child {
+  flex: 1 1 240px;
+}
+
+.lite-resource-links {
+  padding: 16px 8px 0;
+  margin-bottom: 0;
+}
+
+.lite-resource-links > * {
+  flex: 1 1 200px;
+}
+
 /* ─── Login Page ───────────────────────────────────────────── */
 .lite-login-wrapper {
   display: flex;
@@ -860,6 +1077,11 @@ textarea.lite-input {
   .lite-mobile-nav {
     display: block;
   }
+  .lite-mobile-nav-links {
+    max-height: 240px;
+    overflow-y: auto;
+    border-top: 1px solid #f1f5f9;
+  }
   .lite-main {
     padding: 16px;
   }
@@ -873,6 +1095,23 @@ textarea.lite-input {
   .lite-header h1 {
     margin-bottom: 12px;
   }
+  .lite-page-header {
+    display: block;
+  }
+  .lite-page-header > .lite-btn {
+    margin-top: 12px;
+  }
+  .lite-compatibility-header,
+  .lite-section-header,
+  .lite-realtime-status {
+    display: block;
+  }
+  .lite-compatibility-header .lite-badge,
+  .lite-section-header > .lite-badge,
+  .lite-section-header > .lite-btn,
+  .lite-realtime-status > .lite-btn {
+    margin-top: 10px;
+  }
 }
 
 /* ─── Print ────────────────────────────────────────────────── */

package/dist/server-adapter.d.ts

@@ -24,6 +24,7 @@ export interface ListLoaderResult {
     currentSort?: string;
     currentOrder?: 'asc' | 'desc';
     currentSearch?: string;
+    currentFilters?: Record<string, string>;
     resource: ResourceDefinition;
 }
 /**
@@ -157,11 +158,27 @@ export declare function createAuthActions(authProvider: AuthProvider): {
  * This helper does not imply that Svelte 5 or the consuming app supports IE11.
  */
 export declare function isLegacyBrowser(userAgent: string): boolean;
+export interface LegacyRedirectOptions {
+    /** Route prefix that contains the standalone SSR Lite application. */
+    litePrefix?: string;
+    /** Optional route prefix occupied by the modern SPA, for example `/admin`. */
+    spaPrefix?: string;
+    /** Paths that must remain outside automatic legacy routing. */
+    exclude?: string[];
+    /** Override the SPA-to-Lite path mapping without changing SPA code. */
+    mapPath?: (pathname: string) => string;
+    status?: 302 | 307;
+}
+/**
+ * Computes a legacy redirect without importing or modifying the modern SPA.
+ * This pure helper can be used from non-SvelteKit server middleware.
+ */
+export declare function getLegacyRedirectLocation(request: Pick<Request, 'method' | 'headers'>, url: URL, options?: string | LegacyRedirectOptions): string | undefined;
 /**
  * Creates an opt-in SvelteKit hook that redirects detected IE11 user agents.
  * Consumers remain responsible for their own transpilation and browser support.
  */
-export declare function createLegacyRedirectHook(litePrefix?: string): ({ event, resolve }: {
+export declare function createLegacyRedirectHook(options?: string | LegacyRedirectOptions): ({ event, resolve }: {
     event: RequestEvent;
     resolve: (event: RequestEvent) => Promise<Response>;
 }) => Promise<Response>;