@svadmin/lite 0.5.0 → 0.7.0

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;
@@ -849,6 +1066,211 @@ textarea.lite-input {
 .lite-mt-0 { margin-top: 0; }
 .lite-mb-lg { margin-bottom: 24px; }
 
+/* ─── Avatar ───────────────────────────────────────────────── */
+.lite-avatar-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+.lite-avatar-container {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+.lite-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #f1f5f9;
+  color: #64748b;
+  font-weight: 500;
+  overflow: hidden;
+  vertical-align: middle;
+}
+.lite-avatar-circle { border-radius: 50%; }
+.lite-avatar-square { border-radius: 6px; }
+
+.lite-avatar-xs { width: 20px; height: 20px; font-size: 10px; }
+.lite-avatar-sm { width: 28px; height: 28px; font-size: 12px; }
+.lite-avatar-default { width: 36px; height: 36px; font-size: 14px; }
+.lite-avatar-lg { width: 44px; height: 44px; font-size: 16px; }
+
+.lite-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.lite-avatar-dot {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+}
+.lite-avatar-dot-xs { width: 6px; height: 6px; }
+.lite-avatar-dot-sm { width: 8px; height: 8px; }
+.lite-avatar-dot-default { width: 10px; height: 10px; }
+.lite-avatar-dot-lg { width: 12px; height: 12px; }
+
+.lite-avatar-status-online, .lite-avatar-status-success { background: #22c55e; }
+.lite-avatar-status-busy, .lite-avatar-status-error { background: #ef4444; }
+.lite-avatar-status-warning, .lite-avatar-status-away { background: #f59e0b; }
+.lite-avatar-status-offline, .lite-avatar-status-neutral { background: #94a3b8; }
+
+.lite-avatar-text-block {
+  display: inline-flex;
+  flex-direction: column;
+  margin-left: 10px;
+  text-align: left;
+  vertical-align: middle;
+}
+.lite-avatar-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #0f172a;
+  line-height: 1.2;
+}
+.lite-avatar-subtitle {
+  font-size: 11px;
+  color: #64748b;
+  line-height: 1.2;
+  margin-top: 2px;
+}
+
+/* ─── Code Block ───────────────────────────────────────────── */
+.lite-code-block {
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  background: #f8fafc;
+  overflow: hidden;
+  margin: 4px 0;
+}
+.lite-code-header {
+  padding: 4px 10px;
+  background: #f1f5f9;
+  border-bottom: 1px solid #e2e8f0;
+  font-size: 11px;
+}
+.lite-code-pre {
+  margin: 0;
+  padding: 10px 12px;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+  overflow-y: auto;
+  color: #0f172a;
+}
+
+/* ─── Copy Field ───────────────────────────────────────────── */
+.lite-copy-field {
+  display: inline-flex;
+  align-items: center;
+}
+.lite-copy-text {
+  font-size: 13px;
+  color: #0f172a;
+}
+
+/* ─── Currency & Numbers ───────────────────────────────────── */
+.lite-currency-field {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+}
+
+/* ─── Date Range ───────────────────────────────────────────── */
+.lite-date-range {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+}
+
+/* ─── Percentage & Progress ────────────────────────────────── */
+.lite-percent-container {
+  display: inline-flex;
+  align-items: center;
+}
+.lite-progress-track {
+  display: inline-block;
+  width: 64px;
+  height: 6px;
+  background: #e2e8f0;
+  border-radius: 3px;
+  overflow: hidden;
+  margin-left: 8px;
+  vertical-align: middle;
+}
+.lite-progress-fill {
+  display: block;
+  height: 100%;
+  background: #4f46e5;
+  border-radius: 3px;
+}
+.lite-progress-success { background: #22c55e; }
+.lite-progress-warning { background: #f59e0b; }
+.lite-progress-danger { background: #ef4444; }
+.lite-progress-info { background: #3b82f6; }
+
+/* ─── Phone Field ──────────────────────────────────────────── */
+.lite-phone-container {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+}
+.lite-phone-icon {
+  margin-right: 6px;
+  font-size: 12px;
+}
+.lite-phone-link {
+  color: #4f46e5;
+  font-weight: 500;
+  text-decoration: none;
+}
+.lite-phone-link:hover {
+  text-decoration: underline;
+}
+
+/* ─── Rating Field ─────────────────────────────────────────── */
+.lite-rating-container {
+  display: inline-flex;
+  align-items: center;
+}
+.lite-rating {
+  display: inline-flex;
+  align-items: center;
+}
+.lite-rating-star {
+  display: inline-block;
+  margin-right: 2px;
+  line-height: 1;
+}
+.lite-rating-star-full, .lite-rating-star-half {
+  color: #f59e0b;
+}
+.lite-rating-star-empty {
+  color: #cbd5e1;
+}
+.lite-rating-sm { font-size: 12px; }
+.lite-rating-default { font-size: 14px; }
+.lite-rating-lg { font-size: 18px; }
+.lite-rating-value {
+  margin-left: 6px;
+  font-size: 13px;
+  color: #0f172a;
+  font-weight: 500;
+}
+
+/* ─── Semantic Tone Utilities ──────────────────────────────── */
+.lite-font-mono {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+.lite-text-success { color: #16a34a; font-weight: 500; }
+.lite-text-warning { color: #d97706; font-weight: 500; }
+.lite-text-danger { color: #dc2626; font-weight: 500; }
+.lite-text-info { color: #2563eb; font-weight: 500; }
+.lite-text-primary { color: #4f46e5; font-weight: 500; }
+
 /* ─── Responsive ───────────────────────────────────────────── */
 @media (max-width: 768px) {
   .lite-wrapper {
@@ -860,6 +1282,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 +1300,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.js

@@ -49,6 +49,7 @@ function coerceAndValidateField(field, value, mode, withinArray = false, path =
     const issues = [];
     let coerced = value;
     switch (field.type) {
+        case "currency":
         case "number": {
             if (coerced === undefined || coerced === null || coerced === "") {
                 coerced = undefined;
@@ -57,7 +58,7 @@ function coerceAndValidateField(field, value, mode, withinArray = false, path =
                 }
             }
             else if (typeof coerced === "string") {
-                const trimmed = coerced.trim();
+                const trimmed = coerced.trim().replace(/^[$€£¥₹]/u, "");
                 if (trimmed === "") {
                     coerced = undefined;
                     if (field.required) {
@@ -251,7 +252,7 @@ function coerceAndValidateField(field, value, mode, withinArray = false, path =
         }
         case "phone": {
             if (typeof coerced === "string" && coerced.length > 0) {
-                if (!/^[+\d\s()-]*$/.test(coerced)) {
+                if (!/^[+\d\s()-]*$/u.test(coerced)) {
                     issues.push({ path, message: `${field.label} must be a valid phone number` });
                 }
             }
@@ -309,7 +310,13 @@ function coerceAndValidateField(field, value, mode, withinArray = false, path =
             break;
     }
     // Check required
-    if (field.type !== "number" && field.type !== "boolean" && field.type !== "array" && field.type !== "file" && field.type !== "image" && field.type !== "images") {
+    if (field.type !== "number"
+        && field.type !== "currency"
+        && field.type !== "boolean"
+        && field.type !== "array"
+        && field.type !== "file"
+        && field.type !== "image"
+        && field.type !== "images") {
         if (field.required && !hasRequiredValue(coerced)) {
             issues.push({ path, message: `${field.label} is required` });
         }
@@ -339,6 +346,7 @@ export function fieldsToTypeBoxSchema(fields, mode = "create") {
         activeFields.push(field);
         switch (field.type) {
             case "number":
+            case "currency":
                 shape[field.key] = field.required ? Type.Number() : Type.Optional(Type.Number());
                 break;
             case "boolean":
@@ -434,7 +442,9 @@ export const resourceToZodSchema = resourceToTypeBoxSchema;
  */
 export function fieldToInputType(field) {
     switch (field.type) {
-        case "number": return "text";
+        case "number":
+        case "currency": return "text";
+        case "color": return "color";
         case "email": return "text";
         case "url": return "text";
         case "phone": return "tel";
@@ -464,6 +474,7 @@ export function fieldToPlaceholder(field) {
         case "url": return "https://example.com";
         case "phone": return "+1 (555) 000-0000";
         case "number": return "0";
+        case "currency": return "0.00";
         default: return "";
     }
 }

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>;

package/dist/server-adapter.js

@@ -19,6 +19,16 @@ function listRequestState(url, resource) {
         : resource.defaultSort?.order ?? 'asc';
     return { page, pageSize, sort, order, search: url.searchParams.get('q') ?? undefined };
 }
+function listRequestFilterValues(resource, url) {
+    const values = {};
+    for (const field of resource.fields) {
+        const raw = url.searchParams.get(`filter_${field.key}`) ?? (field.key !== "q" && field.key !== "sort" && field.key !== "order" && field.key !== "page" ? url.searchParams.get(field.key) : null);
+        if (raw != null && raw.trim() !== "") {
+            values[field.key] = raw.trim();
+        }
+    }
+    return values;
+}
 function listRequestFilters(resource, url) {
     const filters = [];
     const search = url.searchParams.get('q') ?? undefined;
@@ -76,6 +86,7 @@ export function createListLoader(dp, resource) {
             currentSort: sort,
             currentOrder: order,
             currentSearch: search,
+            currentFilters: listRequestFilterValues(resource, url),
             resource,
         };
     };
@@ -343,28 +354,74 @@ export function createAuthActions(authProvider) {
 export function isLegacyBrowser(userAgent) {
     return /MSIE|Trident|rv:11/.test(userAgent);
 }
+function normalizeRoutePrefix(prefix) {
+    const segments = prefix.split('/').filter(Boolean);
+    return segments.length > 0 ? `/${segments.join('/')}` : '/';
+}
+function pathWithinPrefix(pathname, prefix) {
+    return prefix === '/' || pathname === prefix || pathname.startsWith(`${prefix}/`);
+}
+function redirectOptions(options) {
+    const configured = typeof options === 'string' ? { litePrefix: options } : options;
+    return {
+        litePrefix: normalizeRoutePrefix(configured.litePrefix ?? '/lite'),
+        spaPrefix: normalizeRoutePrefix(configured.spaPrefix ?? '/'),
+        exclude: (configured.exclude ?? []).map(normalizeRoutePrefix),
+        mapPath: configured.mapPath,
+        status: configured.status ?? 302,
+    };
+}
+/**
+ * Computes a legacy redirect without importing or modifying the modern SPA.
+ * This pure helper can be used from non-SvelteKit server middleware.
+ */
+export function getLegacyRedirectLocation(request, url, options = '/lite') {
+    const configured = redirectOptions(options);
+    const userAgent = request.headers.get('user-agent') ?? '';
+    const acceptsHtml = request.headers.get('accept')?.includes('text/html') === true;
+    const isDocumentRequest = (request.method === 'GET' || request.method === 'HEAD') && acceptsHtml;
+    if (!isLegacyBrowser(userAgent) || !isDocumentRequest)
+        return undefined;
+    if (pathWithinPrefix(url.pathname, configured.litePrefix))
+        return undefined;
+    if (configured.exclude.some((prefix) => pathWithinPrefix(url.pathname, prefix)))
+        return undefined;
+    if (!configured.mapPath
+        && configured.spaPrefix !== '/'
+        && !pathWithinPrefix(url.pathname, configured.spaPrefix))
+        return undefined;
+    let mappedPath;
+    if (configured.mapPath) {
+        mappedPath = configured.mapPath(url.pathname);
+    }
+    else if (configured.spaPrefix !== '/' && pathWithinPrefix(url.pathname, configured.spaPrefix)) {
+        mappedPath = url.pathname.slice(configured.spaPrefix.length) || '/';
+    }
+    else {
+        mappedPath = url.pathname;
+    }
+    const normalizedMappedPath = mappedPath.startsWith('/') ? mappedPath : `/${mappedPath}`;
+    const location = configured.litePrefix === '/'
+        ? normalizedMappedPath
+        : `${configured.litePrefix}${normalizedMappedPath === '/' ? '' : normalizedMappedPath}`;
+    return `${location}${url.search}`;
+}
 /**
  * Creates an opt-in SvelteKit hook that redirects detected IE11 user agents.
  * Consumers remain responsible for their own transpilation and browser support.
  */
-export function createLegacyRedirectHook(litePrefix = '/lite') {
-    const prefixSegments = litePrefix.split('/').filter(Boolean);
-    const normalizedPrefix = prefixSegments.length > 0 ? `/${prefixSegments.join('/')}` : '/';
+export function createLegacyRedirectHook(options = '/lite') {
+    const configured = redirectOptions(options);
     return async ({ event, resolve }) => {
-        const ua = event.request.headers.get('user-agent') ?? '';
-        const acceptsHtml = event.request.headers.get('accept')?.includes('text/html') === true;
-        const isDocumentRequest = (event.request.method === 'GET' || event.request.method === 'HEAD')
-            && acceptsHtml;
-        const isWithinLite = normalizedPrefix === '/'
-            || event.url.pathname === normalizedPrefix
-            || event.url.pathname.startsWith(`${normalizedPrefix}/`);
-        if (isLegacyBrowser(ua) && isDocumentRequest && !isWithinLite) {
-            const targetPath = normalizedPrefix === '/'
-                ? event.url.pathname
-                : `${normalizedPrefix}${event.url.pathname}`;
+        const location = getLegacyRedirectLocation(event.request, event.url, configured);
+        if (location) {
             return new Response(null, {
-                status: 302,
-                headers: { Location: `${targetPath}${event.url.search}` },
+                status: configured.status,
+                headers: {
+                    Location: location,
+                    'Cache-Control': 'private, no-store',
+                    Vary: 'User-Agent',
+                },
             });
         }
         return resolve(event);