@svadmin/lite 0.16.11 → 0.22.0

package/dist/components/LiteImage.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  interface Props {
+    src?: string;
+    alt?: string;
+    width?: string | number;
+    height?: string | number;
+    fit?: 'cover' | 'contain' | 'fill' | 'none';
+    rounded?: boolean;
+    fallback?: string;
+    href?: string;
+    caption?: string;
+  }
+
+  let {
+    src,
+    alt = '',
+    width,
+    height,
+    fit = 'cover',
+    rounded = false,
+    fallback = 'Image unavailable',
+    href,
+    caption,
+  }: Props = $props();
+
+  const sizeStyle = $derived([
+    width === undefined ? undefined : `width:${typeof width === 'number' ? `${width}px` : width}`,
+    height === undefined ? undefined : `height:${typeof height === 'number' ? `${height}px` : height}`,
+  ].filter(Boolean).join(';'));
+</script>
+
+<figure class="lite-image" class:lite-image-rounded={rounded} style={sizeStyle || undefined}>
+  {#if src}
+    {#if href}
+      <a href={href} aria-label={alt ? `Open ${alt}` : 'Open image'}>
+        <img {src} {alt} loading="lazy" decoding="async" style={`object-fit:${fit}`} />
+      </a>
+    {:else}
+      <img {src} {alt} loading="lazy" decoding="async" style={`object-fit:${fit}`} />
+    {/if}
+  {:else}
+    <span class="lite-image-fallback" role="img" aria-label={fallback}>{fallback}</span>
+  {/if}
+  {#if caption}<figcaption>{caption}</figcaption>{/if}
+</figure>
+
+<style>
+  .lite-image { display: block; place-items: center; min-width: 0; max-width: 100%; margin: 0; overflow: hidden; border: 1px solid #E5E6EB; background: #F2F3F5; color: #4E5969; }
+  .lite-image-rounded { border-radius: 8px; }
+  .lite-image a { display: block; max-width: 100%; }
+  .lite-image img { display: block; max-width: 100%; height: auto; }
+  .lite-image-fallback { display: inline-block; padding: 24px 16px; font-size: 13px; text-align: center; }
+  .lite-image figcaption { width: 100%; padding: 8px 12px; border-top: 1px solid #E5E6EB; background: #fff; color: #4E5969; font-size: 12px; }
+</style>

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

@@ -0,0 +1,14 @@
+interface Props {
+    src?: string;
+    alt?: string;
+    width?: string | number;
+    height?: string | number;
+    fit?: 'cover' | 'contain' | 'fill' | 'none';
+    rounded?: boolean;
+    fallback?: string;
+    href?: string;
+    caption?: string;
+}
+declare const LiteImage: import("svelte").Component<Props, {}, "">;
+type LiteImage = ReturnType<typeof LiteImage>;
+export default LiteImage;

package/dist/components/LiteImageCropper.svelte

@@ -4,6 +4,8 @@
     aspectRatio?: number;
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -11,10 +13,11 @@
     aspectRatio = 1,
     action = '',
     method = 'POST',
+    class: className = ''
   }: Props = $props();
 </script>
 
-<div class="lite-cropper-card">
+<div class="lite-cropper-card {className}">
   <div class="lite-cropper-header">
     <strong>Image Crop (Aspect Ratio: {aspectRatio}:1)</strong>
   </div>
@@ -48,7 +51,7 @@
 <style>
   .lite-cropper-card {
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     padding: 16px;
     margin-bottom: 16px;
@@ -56,13 +59,13 @@
   }
   .lite-cropper-header {
     padding-bottom: 8px;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid #E5E6EB;
     margin-bottom: 12px;
     font-size: 13px;
   }
   .lite-cropper-preview {
     text-align: center;
-    background: #f1f5f9;
+    background: #F2F3F5;
     padding: 12px;
     border-radius: 4px;
     margin-bottom: 12px;

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

@@ -3,6 +3,8 @@ interface Props {
     aspectRatio?: number;
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteImageCropper: import("svelte").Component<Props, {}, "">;
 type LiteImageCropper = ReturnType<typeof LiteImageCropper>;

package/dist/components/LiteImagePreview.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  interface PreviewImage {
+    src: string;
+    alt: string;
+  }
+
+  interface Props {
+    src: string;
+    alt?: string;
+    images?: PreviewImage[];
+    downloadLabel?: string;
+  }
+
+  let { src, alt = '', images = [], downloadLabel = 'Download image' }: Props = $props();
+  const gallery = $derived(images.length > 0 ? images : [{ src, alt }]);
+</script>
+
+<div class="lite-image-preview" role="group" aria-label="Image gallery">
+  {#each gallery as image, index (image.src)}
+    <a class="lite-image-preview__item" href={image.src} target="_blank" rel="noreferrer" aria-label={`Open ${image.alt || alt || `image ${index + 1}`}`}>
+      <img src={image.src} alt={image.alt || alt} loading="lazy" decoding="async" />
+      <span>{image.alt || alt || `Image ${index + 1}`}</span>
+    </a>
+  {/each}
+  <a class="lite-btn lite-btn-sm" href={src} download={alt || 'image'}>{downloadLabel}</a>
+</div>
+
+<style>
+  .lite-image-preview { display: flex; flex-wrap: wrap; align-items: flex-start; }
+  .lite-image-preview__item { display: block; width: 160px; max-width: 100%; overflow: hidden; border: 1px solid #E5E6EB; border-radius: 8px; background: #fff; color: #1D2129; text-decoration: none; }
+  .lite-image-preview__item:hover { border-color: #165DFF; text-decoration: none; }
+  .lite-image-preview__item img { display: block; width: 100%; height: 110px; object-fit: cover; }
+  .lite-image-preview__item span { display: block; padding: 6px 8px; overflow: hidden; color: #4E5969; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+
+  .lite-image-preview > * { margin: 0 12px 12px 0; }
+</style>

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

@@ -0,0 +1,13 @@
+interface PreviewImage {
+    src: string;
+    alt: string;
+}
+interface Props {
+    src: string;
+    alt?: string;
+    images?: PreviewImage[];
+    downloadLabel?: string;
+}
+declare const LiteImagePreview: import("svelte").Component<Props, {}, "">;
+type LiteImagePreview = ReturnType<typeof LiteImagePreview>;
+export default LiteImagePreview;

package/dist/components/LiteImportWizard.svelte

@@ -51,14 +51,14 @@
 <style>
   .lite-import-wizard {
     padding: 12px;
-    background: #f8fafc;
-    border: 1px solid #cbd5e1;
+    background: #F7F8FA;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     margin-bottom: 16px;
   }
   .lite-import-title {
     font-size: 13px;
-    color: #334155;
+    color: #1D2129;
     margin-bottom: 8px;
   }
   .lite-file-row {
@@ -67,13 +67,13 @@
   .lite-label {
     display: block;
     font-size: 12px;
-    color: #475569;
+    color: #4E5969;
     margin-bottom: 4px;
   }
   .lite-field-mapping-hints {
     margin-bottom: 12px;
     font-size: 11px;
-    color: #64748b;
+    color: #4E5969;
   }
   .lite-hint-title {
     display: block;
@@ -86,8 +86,8 @@
   }
   .lite-badge {
     display: inline-block;
-    background: #e2e8f0;
-    color: #334155;
+    background: #E5E6EB;
+    color: #1D2129;
     padding: 2px 6px;
     border-radius: 3px;
     margin-right: 6px;

package/dist/components/LiteItemList.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  interface ListItem {
+    id: string;
+    title: string;
+    description?: string;
+    href?: string;
+    meta?: string;
+  }
+
+  interface Props {
+    items: ListItem[];
+    title?: string;
+    emptyText?: string;
+  }
+
+  let { items, title, emptyText = 'No items' }: Props = $props();
+</script>
+
+<section class="lite-item-list lite-card">
+  {#if title}<h2>{title}</h2>{/if}
+  {#if items.length === 0}
+    <p class="lite-muted">{emptyText}</p>
+  {:else}
+    <ul>
+      {#each items as item (item.id)}
+        <li>
+          <div>
+            {#if item.href}<a href={item.href}>{item.title}</a>{:else}<strong>{item.title}</strong>{/if}
+            {#if item.description}<p>{item.description}</p>{/if}
+          </div>
+          {#if item.meta}<span>{item.meta}</span>{/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</section>
+
+<style>
+  .lite-item-list { padding: 0; overflow: hidden; }
+  .lite-item-list h2 { margin: 0; padding: 12px 16px; border-bottom: 1px solid #E5E6EB; color: #1D2129; font-size: 14px; }
+  .lite-item-list > p { margin: 0; padding: 16px; }
+  .lite-item-list ul { margin: 0; padding: 0; list-style: none; }
+  .lite-item-list li { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #F2F3F5; }
+  .lite-item-list li:last-child { border-bottom: 0; }
+  .lite-item-list a, .lite-item-list strong { color: #1D2129; font-size: 13px; }
+  .lite-item-list p { margin: 4px 0 0; color: #4E5969; font-size: 12px; line-height: 1.5; }
+  .lite-item-list li > span { color: #86909C; font-size: 12px; white-space: nowrap; }
+
+  .lite-item-list li > * + * { margin-left: 12px; }
+</style>

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

@@ -0,0 +1,15 @@
+interface ListItem {
+    id: string;
+    title: string;
+    description?: string;
+    href?: string;
+    meta?: string;
+}
+interface Props {
+    items: ListItem[];
+    title?: string;
+    emptyText?: string;
+}
+declare const LiteItemList: import("svelte").Component<Props, {}, "">;
+type LiteItemList = ReturnType<typeof LiteItemList>;
+export default LiteItemList;

package/dist/components/LiteJsonSchemaForm.svelte

@@ -9,6 +9,8 @@
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
     submitText?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -17,6 +19,7 @@
     action = '',
     method = 'POST',
     submitText = 'Submit Form',
+    class: className = ''
   }: Props = $props();
   const instanceId = $props.id();
   const i18n = useTranslation();
@@ -119,7 +122,7 @@
   }
 </script>
 
-<div class="lite-schema-form-card">
+<div class="lite-schema-form-card {className}">
   {#if schema.title}<div class="lite-schema-form-header"><strong>{schema.title}</strong></div>{/if}
   {#if schema.description}<p class="lite-schema-description">{schema.description}</p>{/if}
 
@@ -201,14 +204,14 @@
 </div>
 
 <style>
-  .lite-schema-form-card { background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 16px; margin-bottom: 16px; }
-  .lite-schema-form-header { padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; margin-bottom: 12px; font-size: 14px; }
-  .lite-schema-fieldset { border: 1px solid #e2e8f0; border-radius: 4px; padding: 12px; margin: 0 0 12px; }
+  .lite-schema-form-card { background: #fff; border: 1px solid #E5E6EB; border-radius: 6px; padding: 16px; margin-bottom: 16px; }
+  .lite-schema-form-header { padding-bottom: 8px; border-bottom: 1px solid #E5E6EB; margin-bottom: 12px; font-size: 14px; }
+  .lite-schema-fieldset { border: 1px solid #E5E6EB; border-radius: 4px; padding: 12px; margin: 0 0 12px; }
   .lite-schema-field { margin-bottom: 12px; }
   .lite-schema-fieldset > .lite-schema-field:last-child { margin-bottom: 0; }
-  .lite-schema-footer { display: flex; justify-content: flex-end; padding-top: 12px; border-top: 1px solid #e2e8f0; }
-  .lite-label { display: block; font-size: 12px; color: #475569; margin-bottom: 4px; }
-  .lite-schema-description, .lite-hint { font-size: 12px; color: #64748b; }
+  .lite-schema-footer { display: flex; justify-content: flex-end; padding-top: 12px; border-top: 1px solid #E5E6EB; }
+  .lite-label { display: block; font-size: 12px; color: #4E5969; margin-bottom: 4px; }
+  .lite-schema-description, .lite-hint { font-size: 12px; color: #4E5969; }
   .lite-input, .lite-select { width: 100%; }
   .lite-btn { margin-right: 6px; }
 </style>

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

@@ -5,6 +5,8 @@ interface Props {
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
     submitText?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteJsonSchemaForm: import("svelte").Component<Props, {}, "value">;
 type LiteJsonSchemaForm = ReturnType<typeof LiteJsonSchemaForm>;

package/dist/components/LiteKanbanBoard.svelte

@@ -128,8 +128,8 @@
     vertical-align: top;
     width: 260px;
     margin-right: 12px;
-    background-color: #f8fafc;
-    border: 1px solid #e2e8f0;
+    background-color: #F7F8FA;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     padding: 10px;
     white-space: normal;
@@ -138,60 +138,60 @@
   .sv-lite-column-header {
     font-weight: bold;
     padding-bottom: 8px;
-    border-bottom: 1px solid #cbd5e1;
-    color: #1e293b;
+    border-bottom: 1px solid #E5E6EB;
+    color: #1D2129;
     margin-bottom: 8px;
   }
   .sv-lite-column-count {
-    color: #64748b;
+    color: #4E5969;
     font-weight: normal;
     font-size: 11px;
     margin-left: 4px;
   }
   .sv-lite-kanban-card {
     background-color: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 4px;
     padding: 8px;
     margin-bottom: 8px;
   }
   .sv-lite-card-title {
     font-weight: 600;
-    color: #0f172a;
+    color: #1D2129;
     margin-bottom: 4px;
   }
   .sv-lite-card-desc {
-    color: #64748b;
+    color: #4E5969;
     font-size: 11px;
     margin-bottom: 6px;
   }
   .sv-lite-card-meta {
     padding-top: 4px;
-    border-top: 1px solid #f1f5f9;
+    border-top: 1px solid #F2F3F5;
   }
   .sv-lite-priority-badge {
     display: inline-block;
     padding: 1px 4px;
     font-size: 10px;
     border-radius: 2px;
-    text-transform: uppercase;
+    text-transform: none;
     margin-right: 4px;
   }
   .sv-lite-urgent, .sv-lite-high {
-    background-color: #fee2e2;
-    color: #991b1b;
+    background-color: #FFECE8;
+    color: #CB272D;
   }
   .sv-lite-medium {
-    background-color: #e0e7ff;
-    color: #3730a3;
+    background-color: #E8F3FF;
+    color: #0E42D2;
   }
   .sv-lite-low {
-    background-color: #f1f5f9;
-    color: #475569;
+    background-color: #F2F3F5;
+    color: #4E5969;
   }
   .sv-lite-tag-badge {
     display: inline-block;
-    color: #64748b;
+    color: #4E5969;
     font-size: 10px;
     margin-right: 4px;
   }
@@ -202,13 +202,13 @@
     width: 170px;
     padding: 4px 6px;
     font-size: 11px;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 3px;
   }
   .sv-lite-card-btn {
     padding: 4px 8px;
     font-size: 11px;
-    background-color: #4f46e5;
+    background-color: #165DFF;
     color: #ffffff;
     border: none;
     border-radius: 3px;

package/dist/components/LiteLayout.svelte

@@ -19,6 +19,14 @@
     /** Optional server-computed permission check for menu metadata. */
     canAccess?: (resource: string, action: string) => boolean;
     children: Snippet;
+    /** Caller class for the layout wrapper. */
+    class?: string;
+    /** Caller class for the desktop sidebar. */
+    classSidebar?: string;
+    /** Caller class for the mobile navigation. */
+    classMobileNav?: string;
+    /** Caller class for the main region. */
+    classMain?: string;
   }
 
   let {
@@ -30,6 +38,10 @@
     menu,
     canAccess,
     children,
+    class: className = '',
+    classSidebar = '',
+    classMobileNav = '',
+    classMain = '',
   }: Props = $props();
 
   const menuResources = $derived(filterVisibleResources(resources, canAccess));
@@ -63,9 +75,9 @@
   }
 </script>
 
-<div class="lite-wrapper">
+<div class={`lite-wrapper ${className}`.trim()}>
   <!-- Sidebar -->
-  <nav class="lite-sidebar">
+  <nav class={`lite-sidebar ${classSidebar}`.trim()}>
     <div class="lite-sidebar-brand">{brandName}</div>
     {#if hasCustomMenu}
       <LiteMenuList items={visibleMenu} {basePath} {currentResource} />
@@ -80,16 +92,16 @@
       {/each}
     {/if}
     {#if userName}
-      <div style="position:absolute;bottom:0;left:0;right:0;padding:12px 16px;border-top:1px solid #334155;font-size:12px;color:#94a3b8;">
+      <div style="position:absolute;bottom:0;left:0;right:0;padding:12px 16px;border-top:1px solid #1D2129;font-size:12px;color:#86909C;">
         {userName}
         <form method="POST" action={`${basePath}/login?/logout`} style="display:inline;margin-left:8px;">
-          <button type="submit" class="lite-btn lite-btn-sm" style="color:#94a3b8;border-color:#475569;background:transparent;">Logout</button>
+          <button type="submit" class="lite-btn lite-btn-sm" style="color:#86909C;border-color:#4E5969;background:transparent;">Logout</button>
         </form>
       </div>
     {/if}
   </nav>
 
-  <nav class="lite-mobile-nav" aria-label="Mobile navigation">
+  <nav class={`lite-mobile-nav ${classMobileNav}`.trim()} aria-label="Mobile navigation">
     <div class="lite-mobile-nav-brand">{brandName}</div>
     <div class="lite-mobile-nav-links">
       {#each mobileItems as item (item.name)}
@@ -112,7 +124,7 @@
   </nav>
 
   <!-- Main Content -->
-  <main class="lite-main">
+  <main class={`lite-main ${classMain}`.trim()}>
     {@render children()}
   </main>
 </div>

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

@@ -15,6 +15,14 @@ interface Props {
     /** Optional server-computed permission check for menu metadata. */
     canAccess?: (resource: string, action: string) => boolean;
     children: Snippet;
+    /** Caller class for the layout wrapper. */
+    class?: string;
+    /** Caller class for the desktop sidebar. */
+    classSidebar?: string;
+    /** Caller class for the mobile navigation. */
+    classMobileNav?: string;
+    /** Caller class for the main region. */
+    classMain?: string;
 }
 declare const LiteLayout: import("svelte").Component<Props, {}, "">;
 type LiteLayout = ReturnType<typeof LiteLayout>;

package/dist/components/LiteLink.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    href: string;
+    external?: boolean;
+    underline?: boolean;
+    disabled?: boolean;
+    children: Snippet;
+  }
+
+  let { href, external = false, underline = false, disabled = false, children }: Props = $props();
+</script>
+
+{#if disabled}
+  <span class="lite-link" aria-disabled="true">{@render children()}</span>
+{:else}
+  <a
+    class="lite-link"
+    class:lite-link-underline={underline}
+    {href}
+    target={external ? '_blank' : undefined}
+    rel={external ? 'noreferrer' : undefined}
+  >{@render children()}</a>
+{/if}
+
+<style>
+  .lite-link { color: #165DFF; text-decoration: none; }
+  .lite-link:hover { text-decoration: underline; }
+  .lite-link-underline { text-decoration: underline; }
+  .lite-link[aria-disabled='true'] { color: #C9CDD4; cursor: not-allowed; }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    href: string;
+    external?: boolean;
+    underline?: boolean;
+    disabled?: boolean;
+    children: Snippet;
+}
+declare const LiteLink: import("svelte").Component<Props, {}, "">;
+type LiteLink = ReturnType<typeof LiteLink>;
+export default LiteLink;

package/dist/components/LiteLogin.svelte

@@ -9,12 +9,19 @@
     error?: string;
     brandName?: string;
     action?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { error, brandName = 'Admin', action = '?/login' }: Props = $props();
+  let {
+    error,
+    brandName = 'Admin',
+    action = '?/login',
+    class: className = '',
+  }: Props = $props();
 </script>
 
-<div class="lite-login-wrapper">
+<div class="lite-login-wrapper {className}">
   <div class="lite-login-card">
     <div class="lite-card">
       <h2 style="text-align:center;margin:0 0 20px;font-size:20px;font-weight:600;">{brandName}</h2>

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

@@ -2,6 +2,8 @@ interface Props {
     error?: string;
     brandName?: string;
     action?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteLogin: import("svelte").Component<Props, {}, "">;
 type LiteLogin = ReturnType<typeof LiteLogin>;