@svadmin/lite 0.17.0 → 0.22.1

package/dist/components/LiteVideoPlayer.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  interface VideoTrack {
+    src: string;
+    kind: 'subtitles' | 'captions' | 'chapters' | 'metadata' | 'descriptions';
+    label?: string;
+    language?: string;
+    default?: boolean;
+  }
+
+  interface Props {
+    src: string;
+    poster?: string;
+    title?: string;
+    media?: 'video' | 'audio';
+    autoplay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsinline?: boolean;
+    tracks?: VideoTrack[];
+    downloadLabel?: string;
+  }
+
+  let {
+    src,
+    poster,
+    title,
+    media = 'video',
+    autoplay = false,
+    muted = false,
+    loop = false,
+    playsinline = true,
+    tracks = [],
+    downloadLabel = 'Download media',
+  }: Props = $props();
+</script>
+
+<figure class="lite-video-player">
+  {#if title}<figcaption class="lite-video-player__title">{title}</figcaption>{/if}
+  {#if media === 'audio'}
+    <audio controls preload="metadata" {autoplay} {muted} {loop} aria-label={title ?? 'Audio player'}>
+      <source {src} />
+      {#each tracks as track (track.src)}
+        <track src={track.src} kind={track.kind} label={track.label} srclang={track.language} default={track.default} />
+      {/each}
+      <a href={src}>{downloadLabel}</a>
+    </audio>
+  {:else}
+    <video controls preload="metadata" {poster} {autoplay} {muted} {loop} {playsinline} aria-label={title ?? 'Video player'}>
+      <source {src} />
+      {#each tracks as track (track.src)}
+        <track src={track.src} kind={track.kind} label={track.label} srclang={track.language} default={track.default} />
+      {/each}
+      <a href={src}>{downloadLabel}</a>
+    </video>
+  {/if}
+  <a class="lite-video-player__download" href={src} download>{downloadLabel}</a>
+</figure>
+
+<style>
+  .lite-video-player { display: block; margin: 0; padding: 12px; border: 1px solid #E5E6EB; border-radius: 8px; background: #fff; }
+  .lite-video-player__title { color: #1D2129; font-size: 14px; font-weight: 600; }
+  .lite-video-player video { display: block; width: 100%; max-height: 70vh; background: #000; }
+  .lite-video-player audio { display: block; width: 100%; }
+  .lite-video-player__download { justify-self: start; color: #165DFF; font-size: 12px; }
+
+  .lite-video-player > * + * { margin-top: 8px; }
+</style>

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

@@ -0,0 +1,22 @@
+interface VideoTrack {
+    src: string;
+    kind: 'subtitles' | 'captions' | 'chapters' | 'metadata' | 'descriptions';
+    label?: string;
+    language?: string;
+    default?: boolean;
+}
+interface Props {
+    src: string;
+    poster?: string;
+    title?: string;
+    media?: 'video' | 'audio';
+    autoplay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsinline?: boolean;
+    tracks?: VideoTrack[];
+    downloadLabel?: string;
+}
+declare const LiteVideoPlayer: import("svelte").Component<Props, {}, "">;
+type LiteVideoPlayer = ReturnType<typeof LiteVideoPlayer>;
+export default LiteVideoPlayer;

package/dist/components/advanced/LiteAutoSaveIndicator.svelte

@@ -1,26 +1,55 @@
 <script lang="ts">
   /**
-   * SSR AutoSaveIndicator — Degraded to a static status label.
-   * Without JS, there is no auto-save. This component simply renders
-   * the last known save status passed from the server.
+   * SSR AutoSaveIndicator — renders the last known save state passed from the
+   * server. There is no auto-save loop without JS, but the state machine itself
+   * (idle / loading / success / error) is fully expressible in server HTML.
    */
+  type SaveStatus = 'idle' | 'loading' | 'success' | 'error';
+
   interface Props {
-    status?: 'idle' | 'saved' | 'error';
+    status?: SaveStatus | 'saved';
+    /** Error detail, exposed as the accessible title on the error label. */
+    error?: string;
+    /** Overrides the built-in label for the current status. */
     message?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { status = 'idle', message }: Props = $props();
+  let { status = 'idle', error, message, class: className = '' }: Props = $props();
+
+  // `saved` was the old spelling of `success`; keep it working.
+  const normalized = $derived<SaveStatus>(status === 'saved' ? 'success' : status);
 
-  const statusConfig: Record<NonNullable<Props['status']>, { icon: string; color: string; text: string }> = {
-    idle: { icon: '☁', color: '#4E5969', text: 'All changes saved' },
-    saved: { icon: '✓', color: '#00B42A', text: 'Saved' },
-    error: { icon: '✕', color: '#F53F3F', text: 'Save failed' },
+  const statusConfig: Record<SaveStatus, { icon: string; tone: string; text: string; label: string }> = {
+    idle: { icon: '☁', tone: 'idle', text: 'All changes saved', label: 'All changes saved' },
+    loading: { icon: '◌', tone: 'loading', text: 'Saving…', label: 'Saving' },
+    success: { icon: '✓', tone: 'success', text: 'Saved', label: 'Saved' },
+    error: { icon: '✕', tone: 'error', text: 'Save failed', label: 'Save failed' },
   };
 
-  const cfg = $derived(statusConfig[status] ?? statusConfig['idle']);
+  const cfg = $derived(statusConfig[normalized] ?? statusConfig.idle);
 </script>
 
-<span class="lite-inline-sm" style="display: inline-flex; align-items: center; font-size: 13px; color: {cfg.color};">
-  <span>{cfg.icon}</span>
-  <span>{message ?? cfg.text}</span>
+<span
+  class={`lite-auto-save lite-auto-save--${cfg.tone} ${className}`.trim()}
+  role="status"
+  aria-live="polite"
+  aria-label={cfg.label}
+  title={normalized === 'error' ? error : undefined}
+>
+  <span aria-hidden="true">{cfg.icon}</span>
+  <span class="lite-auto-save__text">{message ?? cfg.text}</span>
+  {#if normalized === 'error' && error}
+    <span class="lite-auto-save__error">{error}</span>
+  {/if}
 </span>
+
+<style>
+  .lite-auto-save { display: inline-flex; align-items: center; font-size: 13px; color: #4E5969; }
+  .lite-auto-save > * + * { margin-left: 6px; }
+  .lite-auto-save--loading { color: #165DFF; }
+  .lite-auto-save--success { color: #00B42A; }
+  .lite-auto-save--error { color: #F53F3F; }
+  .lite-auto-save__error { color: #86909C; font-size: 12px; }
+</style>

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

@@ -1,11 +1,17 @@
 /**
- * SSR AutoSaveIndicator — Degraded to a static status label.
- * Without JS, there is no auto-save. This component simply renders
- * the last known save status passed from the server.
+ * SSR AutoSaveIndicator — renders the last known save state passed from the
+ * server. There is no auto-save loop without JS, but the state machine itself
+ * (idle / loading / success / error) is fully expressible in server HTML.
  */
+type SaveStatus = 'idle' | 'loading' | 'success' | 'error';
 interface Props {
-    status?: 'idle' | 'saved' | 'error';
+    status?: SaveStatus | 'saved';
+    /** Error detail, exposed as the accessible title on the error label. */
+    error?: string;
+    /** Overrides the built-in label for the current status. */
     message?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteAutoSaveIndicator: import("svelte").Component<Props, {}, "">;
 type LiteAutoSaveIndicator = ReturnType<typeof LiteAutoSaveIndicator>;

package/dist/components/advanced/LiteDrawerForm.svelte

@@ -13,6 +13,8 @@
     recordId?: string | number;
     basePath?: string;
     label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -21,6 +23,7 @@
     recordId,
     basePath = '/lite',
     label,
+    class: className = '',
   }: Props = $props();
 
   const href = $derived(
@@ -37,6 +40,6 @@
   );
 </script>
 
-<a href={href} class="lite-btn lite-btn-outline">
+<a href={href} class="lite-btn lite-btn-outline {className}">
   {buttonLabel}
 </a>

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

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

package/dist/components/advanced/LiteModalForm.svelte

@@ -14,6 +14,8 @@
     recordId?: string | number;
     basePath?: string;
     label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -22,6 +24,7 @@
     recordId,
     basePath = '/lite',
     label,
+    class: className = '',
   }: Props = $props();
 
   const href = $derived(
@@ -39,6 +42,6 @@
 </script>
 
 <!-- In lite mode, modals degrade to a full-page navigation -->
-<a href={href} class="lite-btn lite-btn-primary">
+<a href={href} class="lite-btn lite-btn-primary {className}">
   {buttonLabel}
 </a>

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/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/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/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: #F7F8FA; 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>;