@svadmin/lite 0.3.6 → 0.3.10

package/README.md

@@ -2,12 +2,13 @@
 
 **Lightweight, SSR-compatible admin UI for [@svadmin](https://github.com/zuohuadong/svadmin).**
 
-Zero client-side JavaScript required. Works in IE11 and all modern browsers.
+Core server-driven CRUD flows can run without hydration. An optional `enhance.js` asset adds progressive client-side conveniences.
+
+The bundled CSS follows an IE11-oriented baseline, but Svelte 5, SvelteKit, Tailwind-based companion packages, and each consumer's transpilation target determine the final browser support. This package therefore does not make a blanket IE11 compatibility guarantee.
 
 ## Why?
 
-The main `@svadmin/ui` package delivers a premium SPA experience using Svelte 5, Tailwind CSS v4, and TanStack.  
-However, some enterprise/government environments require IE11 compatibility.
+The main `@svadmin/ui` package delivers a premium SPA experience using Svelte 5, Tailwind CSS v4, and TanStack. Those tools target modern browsers. Some enterprise/government environments instead prefer server-driven navigation, native forms, and a smaller client-side runtime.
 
 `@svadmin/lite` provides a server-rendered fallback that **shares the same DataProvider, AuthProvider, and Resource definitions** — only the rendering layer is different.
 
@@ -23,7 +24,7 @@ However, some enterprise/government environments require IE11 compatibility.
 | **Pagination** | Pure `<a>` page links |
 | **Login/Logout** | Cookie-based auth via SvelteKit Form Actions |
 | **Auth Guard** | Server hook redirects unauthenticated users |
-| **UA Detection** | Auto-redirect IE11 users to `/lite/` routes |
+| **UA Detection** | Optional legacy-browser detection hook redirects users to `/lite/` routes |
 | **i18n** | Uses `@svadmin/core` `t()` translations |
 | **Multi-level Menu** | Config-driven 2/3 level menus via `MenuItem[]` |
 | **Print** | `@media print` optimized styles |
@@ -49,13 +50,16 @@ export const load = createListLoader(dataProvider, postsResource);
 export const actions = createCrudActions(dataProvider, postsResource);
 ```
 
+```typescript
+// src/routes/lite/posts/+page.ts
+export const csr = false;
+```
+
 ```svelte
 <!-- src/routes/lite/posts/+page.svelte -->
 <script lang="ts">
-  export const csr = false; // ← Critical: disable client-side rendering
-
   import { LiteLayout, LiteTable, LitePagination, LiteSearch, LiteAlert } from '@svadmin/lite';
-  import '@svadmin/lite/src/lite.css';
+  import '@svadmin/lite/lite.css';
   import { resources } from '$lib/admin';
 
   let { data, form } = $props();
@@ -121,7 +125,7 @@ Pass a `menu` prop to `LiteLayout` to replace the auto-generated flat resource l
 </LiteLayout>
 ```
 
-### 3. Auto-redirect legacy browsers
+### 3. Optionally route legacy browsers to Lite pages
 
 ```typescript
 // src/hooks.server.ts
@@ -130,7 +134,7 @@ import { createLegacyRedirectHook } from '@svadmin/lite';
 export const handle = createLegacyRedirectHook('/lite');
 ```
 
-### 4. Add the `<meta>` tags for dual-core browsers
+### 4. Optional legacy-browser metadata
 
 ```html
 <!-- src/app.html -->
@@ -168,8 +172,8 @@ export const handle = createLegacyRedirectHook('/lite');
 
 ## CSS
 
-Import `@svadmin/lite/src/lite.css` in your layout. It's fully self-contained:
-- IE11+ baseline (standard flexbox, no CSS variables)
+Import `@svadmin/lite/lite.css` in your layout. It's fully self-contained:
+- IE11-oriented CSS baseline (standard flexbox, no CSS variables)
 - Custom-styled checkboxes, radios, and selects (no `appearance: none` needed)
 - Indigo/Slate color system aligned with `@svadmin/ui`
 - Modern focus rings (`box-shadow` based)
@@ -178,14 +182,16 @@ Import `@svadmin/lite/src/lite.css` in your layout. It's fully self-contained:
 - Print-optimized styles
 - ~500 lines, ~14KB unminified
 
+This CSS baseline helps older browsers, but the generated Svelte/SvelteKit application and any Tailwind v4 UI used alongside Lite still require the browser targets configured by those tools (Tailwind v4 itself targets modern browsers).
+
 ## Optional: Progressive Enhancement
 
-Copy `packages/lite/static/enhance.js` to your static folder. This ES5 script adds:
+Copy the exported `@svadmin/lite/enhance.js` asset to your application's static folder. This ES5 script adds:
 - Auto-close delete confirmation when clicking outside
 - Auto-focus first form input
 - Unsaved changes warning
 
-**100% optional** — everything works without it.
+The asset is optional for core server-rendered navigation and form submission; the conveniences listed above require it.
 
 ## License
 

package/dist/components/LiteAlert.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  /**
+   * LiteAlert — Success/error feedback banner for form actions.
+   * Renders from SvelteKit form action results.
+   */
+  interface Props {
+    type: 'success' | 'error' | 'info';
+    message: string;
+  }
+
+  let { type, message }: Props = $props();
+</script>
+
+{#if message}
+  <div class="lite-alert {type === 'success' ? 'lite-alert-success' : type === 'error' ? 'lite-alert-error' : ''}">
+    {#if type === 'success'}✓{:else if type === 'error'}✗{:else}ℹ{/if}
+    {message}
+  </div>
+{/if}

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

@@ -0,0 +1,11 @@
+/**
+ * LiteAlert — Success/error feedback banner for form actions.
+ * Renders from SvelteKit form action results.
+ */
+interface Props {
+    type: 'success' | 'error' | 'info';
+    message: string;
+}
+declare const LiteAlert: import("svelte").Component<Props, {}, "">;
+type LiteAlert = ReturnType<typeof LiteAlert>;
+export default LiteAlert;

package/dist/components/LiteArrayField.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  /**
+   * LiteArrayField — SSR-compatible array sub-form.
+   * One row and remove-on-save controls work without JavaScript; enhance.js
+   * progressively adds in-place add/remove controls.
+   */
+  import type { FieldDefinition } from '@svadmin/core';
+  import LiteArrayItem from './LiteArrayItem.svelte';
+
+  interface Props {
+    field: FieldDefinition;
+    /** Current array values */
+    values?: Record<string, unknown>[];
+    /** Form field name prefix (for nested form encoding) */
+    namePrefix?: string;
+    mode?: 'create' | 'edit';
+  }
+
+  let {
+    field,
+    values = [],
+    namePrefix = field.key,
+    mode = 'create',
+  }: Props = $props();
+
+  const subFields = $derived(field.subFields || []);
+  const renderedValues = $derived(values.length > 0 ? values : [{}]);
+  const hasServerValues = $derived(values.length > 0);
+</script>
+
+<fieldset
+  class="lite-array-field"
+  data-lite-array
+  data-lite-array-name={namePrefix}
+  data-next-index={renderedValues.length}
+>
+  <legend>
+    {field.label}
+    {#if field.required}<span class="required">*</span>{/if}
+  </legend>
+
+  {#each renderedValues as item, i (i)}
+    <LiteArrayItem
+      {subFields}
+      {item}
+      {namePrefix}
+      index={i}
+      isDraft={!field.required && !hasServerValues}
+      {mode}
+    />
+  {/each}
+
+  <button type="button" class="lite-btn" data-lite-array-add hidden>
+    + Add Item
+  </button>
+
+  <template data-lite-array-template>
+    <LiteArrayItem {subFields} item={{}} {namePrefix} index="__INDEX__" isDraft={false} {mode} />
+  </template>
+</fieldset>

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

@@ -0,0 +1,17 @@
+/**
+   * LiteArrayField — SSR-compatible array sub-form.
+   * One row and remove-on-save controls work without JavaScript; enhance.js
+   * progressively adds in-place add/remove controls.
+   */
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    /** Current array values */
+    values?: Record<string, unknown>[];
+    /** Form field name prefix (for nested form encoding) */
+    namePrefix?: string;
+    mode?: 'create' | 'edit';
+}
+declare const LiteArrayField: import("svelte").Component<Props, {}, "">;
+type LiteArrayField = ReturnType<typeof LiteArrayField>;
+export default LiteArrayField;

package/dist/components/LiteArrayItem.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+  import { fieldToInputType, fieldToPlaceholder } from '../schema-generator';
+
+  interface Props {
+    subFields: FieldDefinition[];
+    item: Record<string, unknown>;
+    namePrefix: string;
+    index: number | string;
+    /** Empty optional-array placeholder that remains server-submittable without JS. */
+    isDraft?: boolean;
+    mode?: 'create' | 'edit';
+  }
+
+  let { subFields, item, namePrefix, index, isDraft = false, mode = 'create' }: Props = $props();
+
+  function fieldName(key: string): string {
+    return `${namePrefix}[${index}][${key}]`;
+  }
+
+  function fieldId(key: string): string {
+    return `${namePrefix}_${index}_${key}`;
+  }
+
+  function displayValue(value: unknown): string {
+    if (value == null) return '';
+    if (typeof value === 'object') {
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return '';
+      }
+    }
+    return String(value);
+  }
+
+  function retainedUploadReferences(value: unknown): string[] {
+    if (typeof value === 'string') return value.trim() ? [value] : [];
+    if (Array.isArray(value)) return value.flatMap(retainedUploadReferences);
+    return [];
+  }
+</script>
+
+<div
+  class="lite-array-item"
+  data-lite-array-item
+  data-lite-array-draft={isDraft ? '' : undefined}
+>
+  <input type="hidden" name={fieldName('_present')} value="1" />
+  <div class="lite-array-item-header">
+    <span class="lite-array-item-number">#{typeof index === 'number' ? index + 1 : ''}</span>
+    {#if !isDraft}
+      <button
+        type="submit"
+        name={fieldName('_delete')}
+        value="1"
+        formnovalidate
+        class="lite-btn lite-btn-sm lite-array-remove-nojs"
+      >
+        Remove item
+      </button>
+    {/if}
+    <button type="button" class="lite-btn lite-btn-sm lite-array-remove" data-lite-array-remove hidden>
+      Remove
+    </button>
+  </div>
+
+  {#each subFields as sub (sub.key)}
+    <div class="lite-array-subfield">
+      <label for={fieldId(sub.key)}>
+        {sub.label}
+        {#if sub.required}<span class="required">*</span>{/if}
+      </label>
+      {#if sub.type === 'textarea' || sub.type === 'richtext'}
+        <textarea
+          id={fieldId(sub.key)}
+          name={fieldName(sub.key)}
+          class="lite-input"
+          rows="3"
+          required={sub.required && !isDraft}
+          placeholder={fieldToPlaceholder(sub)}
+        >{displayValue(item[sub.key])}</textarea>
+      {:else if sub.type === 'boolean'}
+        <div class="lite-checkbox-group">
+          <input
+            id={fieldId(sub.key)}
+            name={fieldName(sub.key)}
+            type="checkbox"
+            value="1"
+            checked={Boolean(item[sub.key])}
+          />
+          <label for={fieldId(sub.key)}>{sub.label}</label>
+        </div>
+      {:else if (sub.type === 'select' || sub.type === 'multiselect') && sub.options}
+        <select
+          id={fieldId(sub.key)}
+          name={fieldName(sub.key)}
+          class="lite-select"
+          required={sub.required && !isDraft}
+          multiple={sub.type === 'multiselect'}
+        >
+          {#if sub.type !== 'multiselect'}
+            <option value="">-- Select --</option>
+          {/if}
+          {#each sub.options as opt (opt.value)}
+            {@const selectedValue = item[sub.key]}
+            <option
+              value={String(opt.value)}
+              selected={sub.type === 'multiselect'
+                ? Array.isArray(selectedValue) && selectedValue.map(String).includes(String(opt.value))
+                : String(selectedValue ?? '') === String(opt.value)}
+            >
+              {opt.label}
+            </option>
+          {/each}
+        </select>
+      {:else if sub.type === 'file' || sub.type === 'image' || sub.type === 'images'}
+        {#if mode === 'edit'}
+          {#each retainedUploadReferences(item[sub.key]) as reference, referenceIndex (`${reference}:${referenceIndex}`)}
+            <input type="hidden" name={fieldName(sub.key)} value={reference} />
+          {/each}
+        {/if}
+        <input
+          id={fieldId(sub.key)}
+          name={fieldName(sub.key)}
+          type="file"
+          class="lite-input"
+          required={sub.required
+            && !isDraft
+            && (mode === 'create' || retainedUploadReferences(item[sub.key]).length === 0)}
+          multiple={sub.type === 'images'}
+        />
+      {:else}
+        <input
+          id={fieldId(sub.key)}
+          name={fieldName(sub.key)}
+          type={fieldToInputType(sub)}
+          value={displayValue(item[sub.key])}
+          class="lite-input"
+          required={sub.required && !isDraft}
+          placeholder={fieldToPlaceholder(sub)}
+        />
+      {/if}
+    </div>
+  {/each}
+</div>

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

@@ -0,0 +1,13 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    subFields: FieldDefinition[];
+    item: Record<string, unknown>;
+    namePrefix: string;
+    index: number | string;
+    /** Empty optional-array placeholder that remains server-submittable without JS. */
+    isDraft?: boolean;
+    mode?: 'create' | 'edit';
+}
+declare const LiteArrayItem: import("svelte").Component<Props, {}, "">;
+type LiteArrayItem = ReturnType<typeof LiteArrayItem>;
+export default LiteArrayItem;

package/dist/components/LiteAuditLog.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  /**
+   * LiteAuditLog — SSR-compatible audit log viewer.
+   * Pure HTML table with pagination links. No client-side JS required.
+   */
+
+  interface AuditEntry {
+    id: string | number;
+    userName?: string;
+    action: string;
+    resource?: string;
+    createdAt: string;
+    ipAddress?: string;
+    details?: string;
+  }
+
+  interface Props {
+    logs: AuditEntry[];
+    total?: number;
+    page?: number;
+    pageSize?: number;
+    basePath?: string;
+  }
+
+  let {
+    logs,
+    total = 0,
+    page = 1,
+    pageSize = 20,
+    basePath = '?',
+  }: Props = $props();
+
+  const totalPages = $derived(Math.ceil(total / pageSize) || 1);
+
+  function formatDate(d: string) {
+    return new Date(d).toLocaleString();
+  }
+
+  function actionClass(action: string): string {
+    const a = action.toLowerCase();
+    if (a.includes('delete') || a.includes('remove')) return 'lite-badge-danger';
+    if (a.includes('create') || a.includes('add')) return 'lite-badge-success';
+    if (a.includes('update') || a.includes('edit')) return 'lite-badge-warning';
+    return 'lite-badge-default';
+  }
+</script>
+
+<div class="lite-audit-log">
+  <h2 style="margin-bottom:16px;">Audit Logs</h2>
+  
+  <table class="lite-table">
+    <thead>
+      <tr>
+        <th style="width:160px;">Time</th>
+        <th>User</th>
+        <th>Action</th>
+        <th>Resource</th>
+        <th style="width:120px;">IP Address</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each logs as log, _i (_i)}
+        <tr>
+          <td style="font-family:monospace;font-size:12px;color:#64748b;">{formatDate(log.createdAt)}</td>
+          <td>{log.userName ?? '—'}</td>
+          <td><span class="lite-badge {actionClass(log.action)}">{log.action}</span></td>
+          <td style="color:#64748b;">{log.resource ?? '—'}</td>
+          <td style="font-family:monospace;font-size:12px;color:#64748b;">{log.ipAddress ?? '—'}</td>
+        </tr>
+      {:else}
+        <tr>
+          <td colspan="5" style="text-align:center;padding:24px;color:#94a3b8;">No audit logs found.</td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+
+  <!-- Pagination -->
+  {#if totalPages > 1}
+    <div class="lite-pagination" style="margin-top:12px;">
+      {#if page > 1}
+        <a href={`${basePath}page={page - 1}`} class="lite-btn lite-btn-sm">&laquo; Prev</a>
+      {/if}
+      <span style="padding:0 12px;font-size:14px;color:#64748b;">Page {page} / {totalPages} ({total} total)</span>
+      {#if page < totalPages}
+        <a href={`${basePath}page={page + 1}`} class="lite-btn lite-btn-sm">Next &raquo;</a>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .lite-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .lite-badge-danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
+  .lite-badge-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
+  .lite-badge-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
+  .lite-badge-default { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
+</style>

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

@@ -0,0 +1,23 @@
+/**
+ * LiteAuditLog — SSR-compatible audit log viewer.
+ * Pure HTML table with pagination links. No client-side JS required.
+ */
+interface AuditEntry {
+    id: string | number;
+    userName?: string;
+    action: string;
+    resource?: string;
+    createdAt: string;
+    ipAddress?: string;
+    details?: string;
+}
+interface Props {
+    logs: AuditEntry[];
+    total?: number;
+    page?: number;
+    pageSize?: number;
+    basePath?: string;
+}
+declare const LiteAuditLog: import("svelte").Component<Props, {}, "">;
+type LiteAuditLog = ReturnType<typeof LiteAuditLog>;
+export default LiteAuditLog;

package/dist/components/LiteBreadcrumbs.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  /**
+   * LiteBreadcrumbs — SSR-compatible breadcrumb navigation.
+   * Pure HTML <nav> with <a> links. No client-side JS required.
+   */
+
+  interface BreadcrumbItem {
+    label: string;
+    href?: string;
+  }
+
+  interface Props {
+    items: BreadcrumbItem[];
+    /** Separator character between items */
+    separator?: string;
+  }
+
+  let {
+    items,
+    separator = '/',
+  }: Props = $props();
+</script>
+
+<nav class="lite-breadcrumbs" aria-label="Breadcrumb">
+  <ol>
+    {#each items as item, i (i)}
+      <li>
+        {#if item.href && i < items.length - 1}
+          <a href={item.href}>{item.label}</a>
+        {:else}
+          <span class="current">{item.label}</span>
+        {/if}
+        {#if i < items.length - 1}
+          <span class="lite-breadcrumb-sep" aria-hidden="true">{separator}</span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

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

@@ -0,0 +1,16 @@
+/**
+ * LiteBreadcrumbs — SSR-compatible breadcrumb navigation.
+ * Pure HTML <nav> with <a> links. No client-side JS required.
+ */
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface Props {
+    items: BreadcrumbItem[];
+    /** Separator character between items */
+    separator?: string;
+}
+declare const LiteBreadcrumbs: import("svelte").Component<Props, {}, "">;
+type LiteBreadcrumbs = ReturnType<typeof LiteBreadcrumbs>;
+export default LiteBreadcrumbs;

package/dist/components/LiteChatDialog.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  /**
+   * LiteChatDialog — SSR-compatible AI Chat Dialog fallback.
+   * Relies on standard <form> POST without polling or WebSockets.
+   * No client-side JS required.
+   */
+  import type { ChatMessage } from '@svadmin/core';
+
+  interface Props {
+    /** History of messages */
+    messages: ChatMessage[];
+    /** URL to handle the POST request for new messages */
+    actionRoute: string;
+    /** If true, shows a "Thinking..." indicator */
+    isLoading?: boolean;
+    title?: string;
+    placeholder?: string;
+    submitLabel?: string;
+  }
+
+  let {
+    messages = [],
+    actionRoute,
+    isLoading = false,
+    title = 'AI Assistant',
+    placeholder = 'Type your message...',
+    submitLabel = 'Send'
+  }: Props = $props();
+
+  function formatDate(ts: number) {
+    if (!ts) return '';
+    return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+
+  // Auto-scroll anchor logic: pure HTML way to scroll to bottom after page load
+  // User should include "#latest-msg" in the form action if possible
+</script>
+
+<div class="lite-chat-dialog lite-card" style="display:flex;flex-direction:column;height:560px;padding:0;overflow:hidden;max-width:400px;margin:0 auto;">
+  <!-- Header -->
+  <div style="background:#0f172a;color:#fff;padding:14px 16px;font-weight:600;flex-shrink:0;display:flex;align-items:center;border-top-left-radius:8px;border-top-right-radius:8px;">
+    {title}
+  </div>
+
+  <!-- Message History -->
+  <div class="lite-chat-history" style="flex:1;overflow-y:auto;padding:16px;background:#f8fafc;">
+    {#if messages.length === 0}
+      <div style="text-align:center;color:#64748b;margin-top:60px;font-size:14px;">
+        How can I help you today?
+      </div>
+    {/if}
+
+    {#each messages as msg, i (i)}
+      {#if msg.role === 'user' || msg.role === 'assistant'}
+        <div 
+          id={i === messages.length - 1 ? 'latest-msg' : ''}
+          style="margin-bottom:16px;display:flex;flex-direction:column;align-items:{msg.role === 'user' ? 'flex-end' : 'flex-start'};"
+        >
+          <div style="
+            max-width:85%;
+            padding:10px 14px;
+            border-radius:12px;
+            font-size:14px;
+            line-height:1.5;
+            {msg.role === 'user'
+              ? 'background:#4f46e5;color:#fff;border-bottom-right-radius:2px;'
+              : 'background:#e2e8f0;color:#0f172a;border-bottom-left-radius:2px;'}"
+          >
+            <div style="white-space:pre-wrap;word-break:break-word;">{msg.content}</div>
+          </div>
+          <div style="font-size:11px;color:#94a3b8;margin-top:4px;">
+            {msg.role === 'user' ? 'You' : 'Assistant'} • {formatDate(msg.timestamp)}
+          </div>
+        </div>
+      {/if}
+    {/each}
+
+    {#if isLoading}
+      <div id="latest-msg" style="display:flex;flex-direction:column;align-items:flex-start;margin-bottom:16px;">
+        <div style="background:#e2e8f0;color:#64748b;padding:10px 14px;border-radius:12px;border-bottom-left-radius:2px;font-size:13px;font-style:italic;">
+          Thinking...
+        </div>
+      </div>
+    {/if}
+  </div>
+
+  <!-- Input Form -->
+  <form method="POST" action={actionRoute} style="display:flex;padding:12px;background:#fff;border-top:1px solid #e2e8f0;align-items:stretch;margin:0;flex-shrink:0;">
+    <textarea
+      name="message"
+      class="lite-input"
+      placeholder={placeholder}
+      required
+      rows="1"
+      style="min-height:40px;resize:none;margin-right:8px;"
+    ></textarea>
+    <button type="submit" class="lite-btn lite-btn-primary" disabled={isLoading} style="display:flex;align-items:center;padding:0 16px;">
+      {submitLabel}
+    </button>
+  </form>
+</div>

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

@@ -0,0 +1,20 @@
+/**
+   * LiteChatDialog — SSR-compatible AI Chat Dialog fallback.
+   * Relies on standard <form> POST without polling or WebSockets.
+   * No client-side JS required.
+   */
+import type { ChatMessage } from '@svadmin/core';
+interface Props {
+    /** History of messages */
+    messages: ChatMessage[];
+    /** URL to handle the POST request for new messages */
+    actionRoute: string;
+    /** If true, shows a "Thinking..." indicator */
+    isLoading?: boolean;
+    title?: string;
+    placeholder?: string;
+    submitLabel?: string;
+}
+declare const LiteChatDialog: import("svelte").Component<Props, {}, "">;
+type LiteChatDialog = ReturnType<typeof LiteChatDialog>;
+export default LiteChatDialog;