@svadmin/lite 0.16.11 → 0.22.0

package/dist/components/advanced/LiteModalForm.svelte.d.ts

@@ -11,6 +11,8 @@ interface Props {
     recordId?: string | number;
     basePath?: string;
     label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteModalForm: import("svelte").Component<Props, {}, "">;
 type LiteModalForm = ReturnType<typeof LiteModalForm>;

package/dist/components/advanced/LiteToast.svelte

@@ -14,9 +14,9 @@
   let { message, type = 'info', dismissUrl }: Props = $props();
 
   const colors: Record<NonNullable<Props['type']>, { bg: string; border: string; text: string }> = {
-    success: { bg: '#ecfdf5', border: '#a7f3d0', text: '#065f46' },
-    error: { bg: '#fef2f2', border: '#fecaca', text: '#991b1b' },
-    warning: { bg: '#fffbeb', border: '#fed7aa', text: '#92400e' },
+    success: { bg: '#E8FFEA', border: '#E8FFEA', text: '#009A29' },
+    error: { bg: '#FFECE8', border: '#FDCDC5', text: '#CB272D' },
+    warning: { bg: '#FFF7E8', border: '#fed7aa', text: '#D25F00' },
     info: { bg: '#eff6ff', border: '#bfdbfe', text: '#1e40af' },
   };
 

package/dist/components/advanced/LiteUndoableNotification.svelte

@@ -15,7 +15,7 @@
 
 <div
   role="alert"
-  style="padding: 12px 16px; background: #fefce8; border: 1px solid #fde68a; color: #713f12; border-radius: 6px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 14px;"
+  style="padding: 12px 16px; background: #FFF7E8; border: 1px solid #FFE4BA; color: #713f12; border-radius: 6px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 14px;"
 >
   <span>{message}</span>
   <a

package/dist/components/compatibility/LiteRealtimeStatus.svelte

@@ -1,24 +1,55 @@
 <script lang="ts">
   import { toSafeHref } from '../../security';
 
+  type Connection = 'connecting' | 'connected' | 'disconnected';
+
   interface Props {
     title?: string;
+    /** Free-text snapshot label rendered as a badge. */
     status?: string;
+    /** Connection state, mirroring the reference `status` prop. */
+    connection?: Connection;
+    /** Resource the stream is bound to, shown when details are enabled. */
+    resource?: string;
+    /** Last received event; only its type and timestamp are rendered. */
+    lastEvent?: { type: string; timestamp?: number } | null;
+    /** Render resource and last-event details next to the badge. */
+    showDetails?: boolean;
     lastUpdated?: string;
     refreshHref?: string;
     refreshLabel?: string;
     refreshSeconds?: number;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
     title = 'Live status',
     status = 'Snapshot',
+    connection,
+    resource,
+    lastEvent = null,
+    showDetails = false,
     lastUpdated,
     refreshHref = '',
     refreshLabel = 'Refresh status',
     refreshSeconds = 0,
+    class: className = '',
   }: Props = $props();
 
+  const connectionLabel: Record<Connection, string> = {
+    connected: 'Live',
+    connecting: 'Connecting…',
+    disconnected: 'Offline',
+  };
+  const connectionTone: Record<Connection, string> = {
+    connected: 'lite-badge-success',
+    connecting: 'lite-badge-warning',
+    disconnected: 'lite-badge-danger',
+  };
+  const connectionClass = $derived(connection ? connectionTone[connection] : 'lite-badge-info');
+  const badgeText = $derived(connection ? connectionLabel[connection] : status);
+
   const safeRefreshSeconds = $derived(
     Number.isFinite(refreshSeconds) && refreshSeconds >= 5
       ? Math.floor(refreshSeconds)
@@ -33,10 +64,18 @@
   {/if}
 </svelte:head>
 
-<section class="lite-realtime-status" aria-live="polite">
+<section
+  class={`lite-realtime-status ${className}`.trim()}
+  aria-live="polite"
+  data-connection={connection}
+>
   <div>
     <strong>{title}</strong>
-    <span class="lite-badge lite-badge-info">{status}</span>
+    <span class={`lite-badge ${connectionClass}`} role={connection ? 'status' : undefined}>{badgeText}</span>
+    {#if resource}<span class="lite-muted">{resource}</span>{/if}
+    {#if showDetails && lastEvent}
+      <span class="lite-muted">{lastEvent.type}{#if lastEvent.timestamp} · {new Date(lastEvent.timestamp).toISOString()}{/if}</span>
+    {/if}
     {#if lastUpdated}<span class="lite-muted">Updated {lastUpdated}</span>{/if}
   </div>
   {#if safeRefreshHref}<a href={safeRefreshHref} class="lite-btn lite-btn-sm">{refreshLabel}</a>{/if}

package/dist/components/compatibility/LiteRealtimeStatus.svelte.d.ts

@@ -1,10 +1,25 @@
+type Connection = 'connecting' | 'connected' | 'disconnected';
 interface Props {
     title?: string;
+    /** Free-text snapshot label rendered as a badge. */
     status?: string;
+    /** Connection state, mirroring the reference `status` prop. */
+    connection?: Connection;
+    /** Resource the stream is bound to, shown when details are enabled. */
+    resource?: string;
+    /** Last received event; only its type and timestamp are rendered. */
+    lastEvent?: {
+        type: string;
+        timestamp?: number;
+    } | null;
+    /** Render resource and last-event details next to the badge. */
+    showDetails?: boolean;
     lastUpdated?: string;
     refreshHref?: string;
     refreshLabel?: string;
     refreshSeconds?: number;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteRealtimeStatus: import("svelte").Component<Props, {}, "">;
 type LiteRealtimeStatus = ReturnType<typeof LiteRealtimeStatus>;

package/dist/components/fields/LiteBooleanField.svelte

@@ -7,16 +7,18 @@
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', class: className = '' }: Props = $props();
   let hasError = $derived(error.length > 0);
 
   const checked = $derived(isExplicitBooleanTrue(value));
 </script>
 
 {#if mode === 'show'}
-  <div>
+  <div class="lite-field-value {className}">
     <span class="lite-bool {checked ? 'lite-bool-true' : ''}"></span>
     {checked ? '✓ Yes' : '✗ No'}
   </div>

package/dist/components/fields/LiteBooleanField.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteBooleanField: import("svelte").Component<Props, {}, "">;
 type LiteBooleanField = ReturnType<typeof LiteBooleanField>;

package/dist/components/fields/LiteCascader.svelte

@@ -24,6 +24,8 @@
     required?: boolean;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -38,6 +40,7 @@
     required = field?.required ?? false,
     error = [],
     mode = 'show',
+    class: className = ''
   }: Props = $props();
 
   const hasError = $derived(error.length > 0);
@@ -84,9 +87,9 @@
 </script>
 
 {#if mode === 'show'}
-  <span class="lite-badge">{formatDisplay(value)}</span>
+  <span class="lite-badge {className}">{formatDisplay(value)}</span>
 {:else}
-  <div class="lite-form-group">
+  <div class="lite-form-group {className}">
     {#if label}
       <label class="lite-label" for={name}>
         {label}

package/dist/components/fields/LiteCascader.svelte.d.ts

@@ -18,6 +18,8 @@ interface Props {
     required?: boolean;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteCascader: import("svelte").Component<Props, {}, "">;
 type LiteCascader = ReturnType<typeof LiteCascader>;

package/dist/components/fields/LiteDateField.svelte

@@ -7,21 +7,50 @@
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', class: className = '' }: Props = $props();
   const i18n = useTranslation();
   let hasError = $derived(error.length > 0);
 
+  /** Native input type follows the field domain: date-only stays date-only. */
+  const inputType = $derived(field.type === 'datetime' ? 'datetime-local' : 'date');
+
+  function pad(value: number): string {
+    return String(value).padStart(2, '0');
+  }
+
+  /**
+   * Normalize into the value shape the native control expects. ISO-ish strings
+   * are sliced instead of round-tripped through UTC, so a stored
+   * `2024-03-15` never shifts to the previous day.
+   */
   function formatDate(v: unknown): string {
-    if (!v) return '';
-    try {
-      return new Date(v as string).toISOString().substring(0, 16);
-    } catch {
-      return '';
+    if (v == null || v === '') return '';
+    if (typeof v === 'string') {
+      if (inputType === 'datetime-local') {
+        const match = /^(\d{4}-\d{2}-\d{2})[T ](\d{2}:\d{2})/u.exec(v);
+        if (match?.[1] && match[2]) return `${match[1]}T${match[2]}`;
+      } else {
+        const match = /^(\d{4}-\d{2}-\d{2})/u.exec(v);
+        if (match?.[1]) return match[1];
+      }
     }
+    const date = v instanceof Date ? v : new Date(String(v));
+    if (Number.isNaN(date.getTime())) return '';
+    const day = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+    return inputType === 'datetime-local' ? `${day}T${pad(date.getHours())}:${pad(date.getMinutes())}` : day;
   }
 
+  const dateOptions = $derived(field.dateInput);
+  const boundAttributes = $derived({
+    ...(dateOptions?.min ? { min: dateOptions.min } : {}),
+    ...(dateOptions?.max ? { max: dateOptions.max } : {}),
+    ...(inputType === 'date' && dateOptions?.step ? { step: String(dateOptions.step) } : {}),
+  });
+
   function displayDate(v: unknown): string {
     if (!v) return '—';
     try {
@@ -33,16 +62,17 @@
 </script>
 
 {#if mode === 'show'}
-  <span>{displayDate(value)}</span>
+  <span class="lite-field-value {className}">{displayDate(value)}</span>
 {:else}
-  <div>
+  <div class="lite-field-edit {className}">
     <input
-      type="datetime-local"
+      type={inputType}
       lang={i18n.locale}
       name={field.key}
       id={field.key}
       value={formatDate(value)}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
+      {...boundAttributes}
       {...field.required ? { required: true } : {}}
     />
     {#if hasError}

package/dist/components/fields/LiteDateField.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteDateField: import("svelte").Component<Props, {}, "">;
 type LiteDateField = ReturnType<typeof LiteDateField>;

package/dist/components/fields/LiteDateRangeField.svelte

@@ -130,7 +130,7 @@
         placeholder={i18n.t('common.startDate')}
         {...field?.required ? { required: true } : {}}
       />
-      <span style="margin: 0 8px; color: #64748b;">{separator}</span>
+      <span style="margin: 0 8px; color: #4E5969;">{separator}</span>
       <input
         type="date"
         lang={i18n.locale}

package/dist/components/fields/LiteImageField.svelte

@@ -7,9 +7,13 @@
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show',
+    class: className = ''
+  }: Props = $props();
   let hasError = $derived(error.length > 0);
   
   function getUrls(v: unknown): string[] {
@@ -22,7 +26,7 @@
 
 {#if mode === 'show'}
   {@const urls = getUrls(value)}
-  <div class="lite-inline-md lite-flex-wrap">
+  <div class="lite-inline-md lite-flex-wrap {className}">
     {#each urls as url, _i (_i)}
       <LiteMediaThumbnail src={url} alt={field.label} height={100} />
     {:else}

package/dist/components/fields/LiteImageField.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteImageField: import("svelte").Component<Props, {}, "">;
 type LiteImageField = ReturnType<typeof LiteImageField>;

package/dist/components/fields/LiteJsonField.svelte

@@ -23,7 +23,7 @@
 </script>
 
 {#if mode === 'show'}
-  <pre style="padding: 12px; background: #1e293b; color: #f8fafc; border-radius: 4px; overflow-x: auto; font-size: 13px;">{getJsonString(value)}</pre>
+  <pre style="padding: 12px; background: #1D2129; color: #F7F8FA; border-radius: 4px; overflow-x: auto; font-size: 13px;">{getJsonString(value)}</pre>
 {:else}
   <div>
     <textarea

package/dist/components/fields/LiteMarkdownField.svelte

@@ -1,21 +1,34 @@
 <script lang="ts">
   import type { FieldDefinition } from '@svadmin/core';
+  import { renderMarkdown, type MarkdownRenderOptions } from '../../rich-content.js';
 
   interface Props {
     field: FieldDefinition;
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Per-field renderer options; app-wide defaults come from configureMarkdownRenderer. */
+    renderOptions?: MarkdownRenderOptions;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', renderOptions,
+    class: className = ''
+  }: Props = $props();
   let hasError = $derived(error.length > 0);
+  const preview = $derived(renderMarkdown(value, renderOptions));
 </script>
 
 {#if mode === 'show'}
-  <pre style="white-space: pre-wrap; padding: 12px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 4px;">{String(value ?? '—')}</pre>
+  {#if preview}
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- 内容由 renderMarkdown 转义，高亮回调仅允许可信服务端实现。 -->
+    <div class="lite-markdown-preview {className}">{@html preview}</div>
+  {:else}
+    <span>—</span>
+  {/if}
 {:else}
-  <div>
+  <div class="lite-field-edit {className}">
     <textarea
       name={field.key}
       id={field.key}
@@ -29,5 +42,38 @@
         <div class="lite-error-text">{err}</div>
       {/each}
     {/if}
+    <div class="lite-markdown-preview-block">
+      <span class="lite-markdown-preview-block__label">Preview</span>
+      {#if preview}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -- 内容由 renderMarkdown 转义，高亮回调仅允许可信服务端实现。 -->
+        <div class="lite-markdown-preview">{@html preview}</div>
+      {:else}
+        <p class="lite-markdown-preview-block__empty">Nothing to preview yet.</p>
+      {/if}
+    </div>
   </div>
 {/if}
+
+<style>
+  .lite-markdown-preview { padding: 12px; border: 1px solid #E5E6EB; border-radius: 4px; background: #F7F8FA; color: #1D2129; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
+  .lite-markdown-preview :global(h1),
+  .lite-markdown-preview :global(h2),
+  .lite-markdown-preview :global(h3),
+  .lite-markdown-preview :global(h4) { margin: 12px 0 6px; font-size: 15px; }
+  .lite-markdown-preview :global(p) { margin: 0 0 8px; }
+  .lite-markdown-preview :global(ul),
+  .lite-markdown-preview :global(ol) { margin: 0 0 8px; padding-left: 20px; }
+  .lite-markdown-preview :global(pre) { margin: 0 0 8px; padding: 8px; overflow-x: auto; border-radius: 4px; background: #F2F3F5; }
+  .lite-markdown-preview :global(code) { font-family: monospace; font-size: 12px; }
+  .lite-markdown-preview :global(blockquote) { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid #E5E6EB; color: #4E5969; }
+  .lite-markdown-preview :global(a) { color: #165DFF; }
+  .lite-markdown-preview :global(table) { width: 100%; margin: 0 0 8px; border-collapse: collapse; }
+  .lite-markdown-preview :global(th),
+  .lite-markdown-preview :global(td) { padding: 6px 8px; border: 1px solid #E5E6EB; text-align: left; }
+  .lite-markdown-preview :global(th) { background: #F2F3F5; font-weight: 600; }
+  .lite-markdown-preview :global(ul.lite-task-list) { padding-left: 2px; list-style: none; }
+  .lite-markdown-preview :global(.lite-task-item input) { margin-right: 6px; }
+  .lite-markdown-preview-block { margin-top: 8px; }
+  .lite-markdown-preview-block__label { display: block; margin-bottom: 4px; color: #86909C; font-size: 11px; font-weight: 600; }
+  .lite-markdown-preview-block__empty { margin: 0; padding: 8px 12px; border: 1px dashed #E5E6EB; border-radius: 4px; color: #86909C; font-size: 12px; }
+</style>

package/dist/components/fields/LiteMarkdownField.svelte.d.ts

@@ -1,9 +1,14 @@
 import type { FieldDefinition } from '@svadmin/core';
+import { type MarkdownRenderOptions } from '../../rich-content.js';
 interface Props {
     field: FieldDefinition;
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Per-field renderer options; app-wide defaults come from configureMarkdownRenderer. */
+    renderOptions?: MarkdownRenderOptions;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteMarkdownField: import("svelte").Component<Props, {}, "">;
 type LiteMarkdownField = ReturnType<typeof LiteMarkdownField>;

package/dist/components/fields/LiteNumberField.svelte

@@ -6,16 +6,18 @@
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', class: className = '' }: Props = $props();
   let hasError = $derived(error.length > 0);
 </script>
 
 {#if mode === 'show'}
-  <span>{value == null ? '—' : Number(value).toLocaleString()}</span>
+  <span class="lite-field-value {className}">{value == null ? '—' : Number(value).toLocaleString()}</span>
 {:else}
-  <div>
+  <div class="lite-field-edit {className}">
     <input
       type="number"
       name={field.key}

package/dist/components/fields/LiteNumberField.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteNumberField: import("svelte").Component<Props, {}, "">;
 type LiteNumberField = ReturnType<typeof LiteNumberField>;

package/dist/components/fields/LiteRichTextField.svelte

@@ -1,38 +1,43 @@
 <script lang="ts">
   import type { FieldDefinition } from '@svadmin/core';
   import { toSafeText } from '../../security.js';
+  import { renderRichContent, type MarkdownRenderOptions } from '../../rich-content.js';
 
   interface Props {
     field: FieldDefinition;
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Per-field renderer options; app-wide defaults come from configureMarkdownRenderer. */
+    renderOptions?: MarkdownRenderOptions;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', renderOptions }: Props = $props();
   let hasError = $derived(error.length > 0);
-  const displayValue = $derived(toSafeText(value, '—'));
+  const preview = $derived(renderRichContent(value, renderOptions));
 </script>
 
 {#if mode === 'show'}
-  <!-- Lite mode intentionally renders rich content as text to keep SSR output safe without a sanitizer dependency. -->
-  <div style="padding: 16px; border: 1px solid #e2e8f0; border-radius: 6px; max-height: 500px; overflow-y: auto; background: #fff; white-space: pre-wrap;" class="prose">
-    {displayValue}
-  </div>
+  {#if preview}
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- 内容由 renderRichContent 转义或白名单过滤，高亮回调仅允许可信服务端实现。 -->
+    <div class="lite-rich-preview">{@html preview}</div>
+  {:else}
+    <span>—</span>
+  {/if}
 {:else}
   <div class="lite-markdown-editor">
-    <div class="lite-inline-lg lite-flex-wrap" style="padding: 8px 12px; border: 1px solid #cbd5e1; border-bottom: none; border-radius: 6px 6px 0 0; background: #f8fafc; color: #64748b; font-size: 12px; font-weight: 500;">
-      <span>Markdown is supported</span>
-      <span style="color: #94a3b8;">**bold**</span>
-      <span style="color: #94a3b8; font-style: italic;">*italic*</span>
-      <span style="color: #94a3b8;"># heading</span>
+    <div class="lite-inline-lg lite-flex-wrap" style="padding: 8px 12px; border: 1px solid #E5E6EB; border-bottom: none; border-radius: 6px 6px 0 0; background: #F7F8FA; color: #4E5969; font-size: 12px; font-weight: 500;">
+      <span>HTML or Markdown source</span>
+      <span style="color: #86909C;">**bold**</span>
+      <span style="color: #86909C; font-style: italic;">*italic*</span>
+      <span style="color: #86909C;"># heading</span>
     </div>
     <textarea
       name={field.key}
       id={field.key}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
       style="min-height: 280px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13px; line-height: 1.6; padding: 16px; border-radius: 0 0 6px 6px; resize: vertical;"
-      placeholder="Wait... Rich Text Editor is disabled in lite mode.&#10;&#10;You can write standard HTML or use Markdown syntax here. Content will be safely rendered on the server."
+      placeholder="Rich text editing is disabled in lite mode. Write standard HTML or Markdown; the server renders it through a safe allowlist."
       {...field.required ? { required: true } : {}}
     >{toSafeText(value)}</textarea>
     {#if hasError}
@@ -40,5 +45,37 @@
         <div class="lite-error-text">{err}</div>
       {/each}
     {/if}
+    <div class="lite-rich-preview-block">
+      <span class="lite-rich-preview-block__label">Preview</span>
+      {#if preview}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -- 内容由 renderRichContent 转义或白名单过滤，高亮回调仅允许可信服务端实现。 -->
+        <div class="lite-rich-preview">{@html preview}</div>
+      {:else}
+        <p class="lite-rich-preview-block__empty">Nothing to preview yet.</p>
+      {/if}
+    </div>
   </div>
 {/if}
+
+<style>
+  .lite-rich-preview { padding: 16px; border: 1px solid #E5E6EB; border-radius: 6px; max-height: 500px; overflow-y: auto; background: #fff; color: #1D2129; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
+  .lite-rich-preview :global(p) { margin: 0 0 8px; }
+  .lite-rich-preview :global(h1),
+  .lite-rich-preview :global(h2),
+  .lite-rich-preview :global(h3) { margin: 12px 0 6px; font-size: 16px; }
+  .lite-rich-preview :global(ul),
+  .lite-rich-preview :global(ol) { margin: 0 0 8px; padding-left: 20px; }
+  .lite-rich-preview :global(code) { font-family: monospace; font-size: 12px; }
+  .lite-rich-preview :global(blockquote) { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid #E5E6EB; color: #4E5969; }
+  .lite-rich-preview :global(a) { color: #165DFF; }
+  .lite-rich-preview :global(img) { max-width: 100%; height: auto; }
+  .lite-rich-preview :global(table) { width: 100%; margin: 0 0 8px; border-collapse: collapse; }
+  .lite-rich-preview :global(th),
+  .lite-rich-preview :global(td) { padding: 6px 8px; border: 1px solid #E5E6EB; text-align: left; }
+  .lite-rich-preview :global(th) { background: #F2F3F5; font-weight: 600; }
+  .lite-rich-preview :global(ul.lite-task-list) { padding-left: 2px; list-style: none; }
+  .lite-rich-preview :global(.lite-task-item input) { margin-right: 6px; }
+  .lite-rich-preview-block { margin-top: 8px; }
+  .lite-rich-preview-block__label { display: block; margin-bottom: 4px; color: #86909C; font-size: 11px; font-weight: 600; }
+  .lite-rich-preview-block__empty { margin: 0; padding: 8px 12px; border: 1px dashed #E5E6EB; border-radius: 4px; color: #86909C; font-size: 12px; }
+</style>

package/dist/components/fields/LiteRichTextField.svelte.d.ts

@@ -1,9 +1,12 @@
 import type { FieldDefinition } from '@svadmin/core';
+import { type MarkdownRenderOptions } from '../../rich-content.js';
 interface Props {
     field: FieldDefinition;
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Per-field renderer options; app-wide defaults come from configureMarkdownRenderer. */
+    renderOptions?: MarkdownRenderOptions;
 }
 declare const LiteRichTextField: import("svelte").Component<Props, {}, "">;
 type LiteRichTextField = ReturnType<typeof LiteRichTextField>;

package/dist/components/fields/LiteSelectField.svelte

@@ -7,9 +7,11 @@
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', class: className = '' }: Props = $props();
   let hasError = $derived(error.length > 0);
 
   function displaySelect(v: unknown): string {
@@ -20,9 +22,9 @@
 </script>
 
 {#if mode === 'show'}
-  <span class="lite-badge">{displaySelect(value)}</span>
+  <span class="lite-badge {className}">{displaySelect(value)}</span>
 {:else}
-  <div>
+  <div class="lite-field-edit {className}">
     <select
       name={field.key}
       id={field.key}

package/dist/components/fields/LiteSelectField.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteSelectField: import("svelte").Component<Props, {}, "">;
 type LiteSelectField = ReturnType<typeof LiteSelectField>;