@svadmin/lite 0.3.27 → 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,6 +1,9 @@
-export { createListLoader, createDetailLoader, createCrudActions, createAuthGuard, createAuthActions, createLegacyRedirectHook, isLegacyBrowser, } from './server-adapter';
-export type { ListLoaderResult } from './server-adapter';
-export { fieldsToZodSchema, resourceToZodSchema, fieldToInputType, fieldToPlaceholder, } from './schema-generator';
+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';
 export { default as LiteTable } from './components/LiteTable.svelte';
 export { default as LitePagination } from './components/LitePagination.svelte';
@@ -20,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,10 +1,13 @@
 // @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';
-// Schema generator (used by Lite actions; also reusable by other Zod consumers)
-export { fieldsToZodSchema, resourceToZodSchema, fieldToInputType, fieldToPlaceholder, } from './schema-generator';
+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)
+export { getStatusBadgeClass, parseExplicitBoolean, isExplicitBooleanTrue } from './value-normalization';
 export { default as LiteLayout } from './components/LiteLayout.svelte';
 export { default as LiteTable } from './components/LiteTable.svelte';
 export { default as LitePagination } from './components/LitePagination.svelte';
@@ -24,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;
@@ -791,6 +1008,36 @@ textarea.lite-input {
   border-color: #fecaca;
 }
 
+.lite-badge-info {
+  background: #eff6ff;
+  color: #1d4ed8;
+  border-color: #bfdbfe;
+}
+
+.lite-badge-indigo {
+  background: #eef2ff;
+  color: #4338ca;
+  border-color: #c7d2fe;
+}
+
+.lite-filter-bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.lite-filter-bar > * + * {
+  margin-left: 8px;
+}
+
+.lite-batch-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: #f8fafc;
+  border-top: 1px solid #e2e8f0;
+}
+
 .lite-badge-warning {
   background: #fffbeb;
   color: #92400e;
@@ -830,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;
   }
@@ -843,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/schema-generator.d.ts

@@ -1,26 +1,62 @@
 /**
  * @svadmin/lite — Schema Generator
  *
- * Auto-generates Zod schemas from @svadmin/core FieldDefinitions.
- * Used by the Lite server actions and compatible with other Zod consumers.
+ * Auto-generates TypeBox schemas from @svadmin/core FieldDefinitions.
+ * Used by Lite server actions and high-speed JIT form validation.
  */
-import { z } from 'zod';
-import type { FieldDefinition, ResourceDefinition } from '@svadmin/core';
+import { type TObject } from "@sinclair/typebox";
+import type { FieldDefinition, ResourceDefinition } from "@svadmin/core";
+export interface SchemaValidationIssue {
+    path: (string | number)[];
+    message: string;
+}
+export type SchemaValidationResult<T = Record<string, unknown>> = {
+    success: true;
+    data: T;
+    error?: never;
+} | {
+    success: false;
+    error: {
+        issues: SchemaValidationIssue[];
+    };
+    data?: never;
+};
+export type TypeBoxEnhancedSchema<T = Record<string, unknown>> = TObject & {
+    parse: (values: unknown) => T;
+    safeParse: (values: unknown) => SchemaValidationResult<T>;
+    Check: (values: unknown) => boolean;
+    "~standard": {
+        version: 1;
+        vendor: "svadmin";
+        validate: (values: unknown) => {
+            value: T;
+        } | {
+            issues: Array<{
+                message: string;
+                path?: (string | number)[];
+            }>;
+        };
+    };
+};
 /**
- * Generate a Zod object schema from a ResourceDefinition's fields.
- * Only includes fields that are relevant for form rendering.
- *
- * @param mode - 'create' | 'edit' to filter fields by showInCreate / showInEdit
+ * Generate a TypeBox object schema from a list of FieldDefinitions.
+ */
+export declare function fieldsToTypeBoxSchema(fields: FieldDefinition[], mode?: "create" | "edit"): TypeBoxEnhancedSchema;
+/**
+ * Generate a TypeBox schema from a ResourceDefinition.
+ * Convenience wrapper around fieldsToTypeBoxSchema.
+ */
+export declare function resourceToTypeBoxSchema(resource: ResourceDefinition, mode?: "create" | "edit"): TypeBoxEnhancedSchema;
+/**
+ * Backward compatibility alias for fieldsToTypeBoxSchema
  */
-export declare function fieldsToZodSchema(fields: FieldDefinition[], mode?: 'create' | 'edit'): z.ZodObject<Record<string, z.ZodTypeAny>>;
+export declare const fieldsToZodSchema: typeof fieldsToTypeBoxSchema;
 /**
- * Generate a Zod schema from a ResourceDefinition.
- * Convenience wrapper around fieldsToZodSchema.
+ * Backward compatibility alias for resourceToTypeBoxSchema
  */
-export declare function resourceToZodSchema(resource: ResourceDefinition, mode?: 'create' | 'edit'): z.ZodObject<Record<string, z.ZodTypeAny>>;
+export declare const resourceToZodSchema: typeof resourceToTypeBoxSchema;
 /**
  * Determine a conservative HTML input type for server-rendered forms.
- * Text fallbacks avoid inconsistent native validation and date widgets.
  */
 export declare function fieldToInputType(field: FieldDefinition): string;
 /**