@svadmin/lite 0.25.7 → 0.27.0

package/dist/components/LiteMetricGrid.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import LiteStatsCard from './LiteStatsCard.svelte';
+
+  type MetricColumns = 1 | 2 | 3 | 4 | 5 | 6 | 'auto';
+  type MetricGap = 'sm' | 'md' | 'lg';
+
+  interface LiteMetricGridItem {
+    id?: string;
+    label: string;
+    value: string | number;
+    description?: string;
+    trend?: 'up' | 'down' | 'neutral';
+    trendValue?: string;
+    icon?: string;
+    href?: string;
+  }
+
+  interface Props {
+    items?: LiteMetricGridItem[];
+    cols?: MetricColumns;
+    gap?: MetricGap;
+    title?: string;
+    description?: string;
+    loading?: boolean;
+    skeletonCount?: number;
+    empty?: boolean;
+    emptyMessage?: string;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    emptyContent?: Snippet;
+  }
+
+  let {
+    items = [],
+    cols = 'auto',
+    gap = 'md',
+    title,
+    description,
+    loading = false,
+    skeletonCount = 4,
+    empty = false,
+    emptyMessage = 'No metrics available',
+    class: className = '',
+    actions,
+    children,
+    emptyContent,
+  }: Props = $props();
+
+  const skeletonItems = $derived(Array.from({ length: Math.max(1, skeletonCount) }, (_, index) => index));
+</script>
+
+<section
+  class="lite-metric-grid lite-metric-grid-{cols} lite-metric-grid-gap-{gap} {className}"
+  aria-label={title ?? 'Dashboard metrics'}
+  data-columns={cols}
+>
+  {#if title || description || actions}
+    <header class="lite-metric-grid-header">
+      <div>
+        {#if title}<h2>{title}</h2>{/if}
+        {#if description}<p>{description}</p>{/if}
+      </div>
+      {#if actions}<div class="lite-metric-grid-actions">{@render actions()}</div>{/if}
+    </header>
+  {/if}
+
+  {#if loading}
+    <div class="lite-metric-grid-items">
+      {#each skeletonItems as item (item)}
+        <div class="lite-metric-grid-cell">
+          <div class="lite-metric-grid-skeleton" aria-hidden="true">
+            <span></span><span></span><span></span>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else if empty}
+    <div class="lite-metric-grid-empty" role="status">
+      {#if emptyContent}{@render emptyContent()}{:else}<p>{emptyMessage}</p>{/if}
+    </div>
+  {:else if children}
+    {@render children()}
+  {:else if items.length === 0}
+    <div class="lite-metric-grid-empty" role="status"><p>{emptyMessage}</p></div>
+  {:else}
+    <div class="lite-metric-grid-items">
+      {#each items as item (item.id ?? item.label)}
+        <div class="lite-metric-grid-cell">
+          <LiteStatsCard
+            label={item.label}
+            value={item.value}
+            description={item.description}
+            trend={item.trend}
+            trendValue={item.trendValue}
+            icon={item.icon}
+            href={item.href}
+          />
+        </div>
+      {/each}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .lite-metric-grid { display: block; }
+  .lite-metric-grid-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
+  .lite-metric-grid-header > div + div { margin-left: 12px; }
+  .lite-metric-grid-header h2 { margin: 0; color: #1d2129; font-size: 16px; }
+  .lite-metric-grid-header p { margin: 4px 0 0; color: #4e5969; font-size: 12px; }
+  .lite-metric-grid-actions { display: flex; }
+  .lite-metric-grid-actions > * + * { margin-left: 8px; }
+  .lite-metric-grid-items { display: flex; flex-wrap: wrap; margin: 0 -8px; }
+  .lite-metric-grid-cell { box-sizing: border-box; width: 100%; padding: 0 8px; margin-bottom: 16px; }
+  .lite-metric-grid-gap-sm .lite-metric-grid-items { margin: 0 -6px; }
+  .lite-metric-grid-gap-sm .lite-metric-grid-cell { padding: 0 6px; margin-bottom: 12px; }
+  .lite-metric-grid-gap-lg .lite-metric-grid-items { margin: 0 -12px; }
+  .lite-metric-grid-gap-lg .lite-metric-grid-cell { padding: 0 12px; margin-bottom: 24px; }
+  .lite-metric-grid-auto .lite-metric-grid-cell { width: 25%; }
+  .lite-metric-grid-1 .lite-metric-grid-cell { width: 100%; }
+  .lite-metric-grid-2 .lite-metric-grid-cell { width: 50%; }
+  .lite-metric-grid-3 .lite-metric-grid-cell { width: 33.3333%; }
+  .lite-metric-grid-4 .lite-metric-grid-cell { width: 25%; }
+  .lite-metric-grid-5 .lite-metric-grid-cell { width: 20%; }
+  .lite-metric-grid-6 .lite-metric-grid-cell { width: 16.6666%; }
+  .lite-metric-grid-skeleton { min-height: 96px; border: 1px solid #e5e6eb; border-radius: 6px; padding: 16px; background: #f7f8fa; }
+  .lite-metric-grid-skeleton span { display: block; height: 10px; margin-bottom: 10px; border-radius: 3px; background: #e5e6eb; }
+  .lite-metric-grid-skeleton span:first-child { width: 45%; }
+  .lite-metric-grid-skeleton span:nth-child(2) { width: 70%; height: 20px; }
+  .lite-metric-grid-skeleton span:last-child { width: 35%; margin-bottom: 0; }
+  .lite-metric-grid-empty { border: 1px dashed #e5e6eb; border-radius: 6px; padding: 24px; color: #86909c; text-align: center; background: #f7f8fa; }
+  @media (max-width: 900px) {
+    .lite-metric-grid-auto .lite-metric-grid-cell,
+    .lite-metric-grid-3 .lite-metric-grid-cell,
+    .lite-metric-grid-4 .lite-metric-grid-cell,
+    .lite-metric-grid-5 .lite-metric-grid-cell,
+    .lite-metric-grid-6 .lite-metric-grid-cell { width: 50%; }
+  }
+  @media (max-width: 560px) {
+    .lite-metric-grid-cell { width: 100% !important; }
+  }
+</style>

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

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+type MetricColumns = 1 | 2 | 3 | 4 | 5 | 6 | 'auto';
+type MetricGap = 'sm' | 'md' | 'lg';
+interface LiteMetricGridItem {
+    id?: string;
+    label: string;
+    value: string | number;
+    description?: string;
+    trend?: 'up' | 'down' | 'neutral';
+    trendValue?: string;
+    icon?: string;
+    href?: string;
+}
+interface Props {
+    items?: LiteMetricGridItem[];
+    cols?: MetricColumns;
+    gap?: MetricGap;
+    title?: string;
+    description?: string;
+    loading?: boolean;
+    skeletonCount?: number;
+    empty?: boolean;
+    emptyMessage?: string;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    emptyContent?: Snippet;
+}
+declare const LiteMetricGrid: import("svelte").Component<Props, {}, "">;
+type LiteMetricGrid = ReturnType<typeof LiteMetricGrid>;
+export default LiteMetricGrid;

package/dist/components/LiteMicroAppFrame.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { HTMLIframeAttributes } from 'svelte/elements';
+
+  interface Props {
+    src: string;
+    title?: string;
+    height?: string | number;
+    sandbox?: string;
+    allow?: string;
+    referrerpolicy?: HTMLIframeAttributes['referrerpolicy'];
+    fallbackHref?: string;
+    fallbackLabel?: string;
+    class?: string;
+  }
+
+  let {
+    src,
+    title = 'Embedded application',
+    height = '650px',
+    sandbox = 'allow-scripts allow-forms allow-same-origin',
+    allow,
+    referrerpolicy = 'strict-origin-when-cross-origin',
+    fallbackHref,
+    fallbackLabel = 'Open in a new tab',
+    class: className = '',
+  }: Props = $props();
+
+  const frameHeight = $derived(typeof height === 'number' ? `${height}px` : height);
+</script>
+
+<section class="lite-micro-app-frame lite-card {className}" aria-label={title}>
+  <header>
+    <h2>{title}</h2>
+    {#if fallbackHref}<a href={fallbackHref} target="_blank" rel="noopener noreferrer">{fallbackLabel}</a>{/if}
+  </header>
+
+  <iframe
+    {src}
+    {title}
+    {sandbox}
+    {allow}
+    {referrerpolicy}
+    style={`height:${frameHeight};`}
+    loading="lazy"
+  ></iframe>
+  <p class="lite-micro-app-help">Embedded messaging, theme sync and automatic height are client-side enhancements.</p>
+</section>
+
+<style>
+  .lite-micro-app-frame { padding: 12px; }
+  .lite-micro-app-frame header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
+  .lite-micro-app-frame header a { margin-left: 12px; }
+  .lite-micro-app-frame h2 { margin: 0; color: #1d2129; font-size: 15px; }
+  .lite-micro-app-frame header a { color: #165dff; font-size: 12px; }
+  .lite-micro-app-frame iframe { display: block; width: 100%; border: 1px solid #e5e6eb; border-radius: 4px; background: #fff; }
+  .lite-micro-app-help { margin: 6px 0 0; color: #86909c; font-size: 11px; }
+</style>

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

@@ -0,0 +1,15 @@
+import type { HTMLIframeAttributes } from 'svelte/elements';
+interface Props {
+    src: string;
+    title?: string;
+    height?: string | number;
+    sandbox?: string;
+    allow?: string;
+    referrerpolicy?: HTMLIframeAttributes['referrerpolicy'];
+    fallbackHref?: string;
+    fallbackLabel?: string;
+    class?: string;
+}
+declare const LiteMicroAppFrame: import("svelte").Component<Props, {}, "">;
+type LiteMicroAppFrame = ReturnType<typeof LiteMicroAppFrame>;
+export default LiteMicroAppFrame;

package/dist/components/LiteOrgChart.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  export interface LiteOrgNode {
+    id: string;
+    name: string;
+    title?: string;
+    department?: string;
+    href?: string;
+    children?: LiteOrgNode[];
+  }
+
+  interface Props {
+    data?: LiteOrgNode | LiteOrgNode[];
+    title?: string;
+    emptyText?: string;
+    class?: string;
+  }
+
+  let {
+    data = [],
+    title = 'Organization chart',
+    emptyText = 'No organization data',
+    class: className = '',
+  }: Props = $props();
+
+  interface FlatNode {
+    node: LiteOrgNode;
+    depth: number;
+  }
+
+  function flatten(nodes: LiteOrgNode[], depth = 0, out: FlatNode[] = []): FlatNode[] {
+    for (const node of nodes) {
+      out.push({ node, depth });
+      if (node.children?.length) flatten(node.children, depth + 1, out);
+    }
+    return out;
+  }
+
+  const rows = $derived(flatten(Array.isArray(data) ? data : [data]));
+</script>
+
+<section class="lite-org-chart lite-card {className}" aria-label={title}>
+  <h2>{title}</h2>
+  {#if rows.length === 0}
+    <p class="lite-org-empty">{emptyText}</p>
+  {:else}
+    <table class="lite-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Title</th>
+          <th>Department</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each rows as row (row.node.id)}
+          <tr data-depth={row.depth}>
+            <td>
+              <span class="lite-org-indent" style={`padding-left:${row.depth * 16}px`}>
+                {#if row.depth > 0}<span class="lite-org-branch" aria-hidden="true">└</span>{/if}
+                {#if row.node.href}<a href={row.node.href}>{row.node.name}</a>{:else}{row.node.name}{/if}
+              </span>
+            </td>
+            <td>{row.node.title ?? '—'}</td>
+            <td>{row.node.department ?? '—'}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</section>
+
+<style>
+  .lite-org-chart { padding: 16px; }
+  .lite-org-chart h2 { margin: 0 0 12px; color: #1d2129; font-size: 16px; }
+  .lite-org-empty { margin: 0; padding: 20px; color: #86909c; text-align: center; }
+  .lite-org-indent { display: inline-block; }
+  .lite-org-branch { display: inline-block; margin-right: 4px; color: #86909c; }
+</style>

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

@@ -0,0 +1,17 @@
+export interface LiteOrgNode {
+    id: string;
+    name: string;
+    title?: string;
+    department?: string;
+    href?: string;
+    children?: LiteOrgNode[];
+}
+interface Props {
+    data?: LiteOrgNode | LiteOrgNode[];
+    title?: string;
+    emptyText?: string;
+    class?: string;
+}
+declare const LiteOrgChart: import("svelte").Component<Props, {}, "">;
+type LiteOrgChart = ReturnType<typeof LiteOrgChart>;
+export default LiteOrgChart;

package/dist/components/LitePresenceAvatarGroup.svelte

@@ -1,55 +1,158 @@
 <script lang="ts">
-  interface LitePresenceUser {
+  export interface LitePresenceUser {
     id: string;
     name: string;
-    status?: 'online' | 'idle' | 'editing';
+    avatar?: string;
+    role?: string;
+    status?: 'online' | 'viewing' | 'idle' | 'editing';
   }
 
   interface Props {
     users?: LitePresenceUser[];
     label?: string;
-    /** Caller class merged with the built-in class list. */
+    maxVisible?: number;
+    maxCount?: number;
+    size?: 'sm' | 'md' | 'lg';
+    showStatusDot?: boolean;
     class?: string;
   }
 
   let {
     users = [],
     label = 'Viewing now',
-    class: className = ''
+    maxVisible,
+    maxCount,
+    size = 'md',
+    showStatusDot = true,
+    class: className = '',
   }: Props = $props();
+
+  const limit = $derived(Math.max(0, maxVisible ?? maxCount ?? 4));
+  const visible = $derived(users.slice(0, limit));
+  const hidden = $derived(users.slice(limit));
+
+  function initials(name: string): string {
+    return name
+      .trim()
+      .split(/\s+/)
+      .map((part) => part[0] ?? '')
+      .join('')
+      .slice(0, 2)
+      .toUpperCase() || 'U';
+  }
+
+  function statusLabel(status: LitePresenceUser['status']): string {
+    return status ?? 'online';
+  }
 </script>
 
-<div class="lite-presence-container {className}">
+<div class="lite-presence-container lite-presence-{size} {className}">
   <span class="lite-presence-label">{label}:</span>
-  {#each users as user (user.id)}
-    <span class="lite-presence-badge" title="{user.name} ({user.status ?? 'online'})">
-      👤 {user.name}
+
+  {#each visible as user (user.id)}
+    <span
+      class="lite-presence-badge"
+      title={`${user.name}${user.role ? ` (${user.role})` : ''} · ${statusLabel(user.status)}`}
+      data-presence-user={user.id}
+      data-status={statusLabel(user.status)}
+    >
+      {#if user.avatar}
+        <img src={user.avatar} alt="" class="lite-presence-avatar" />
+      {:else}
+        <span class="lite-presence-initials" aria-hidden="true">{initials(user.name)}</span>
+      {/if}
+      <span class="lite-presence-name">{user.name}</span>
+      {#if showStatusDot && user.status}
+        <span class="lite-presence-dot" aria-hidden="true"></span>
+      {/if}
     </span>
   {/each}
+
+  {#if hidden.length > 0}
+    <span
+      class="lite-presence-overflow"
+      title={hidden.map((user) => user.name).join(', ')}
+      aria-label={`+${hidden.length} more users`}
+    >
+      +{hidden.length}
+    </span>
+  {/if}
+
   {#if users.length === 0}
-    <span style="color: #86909C; font-size: 11px;">No active viewers</span>
+    <span class="lite-presence-empty">No active viewers</span>
   {/if}
 </div>
 
 <style>
   .lite-presence-container {
     display: inline-flex;
+    flex-wrap: wrap;
     align-items: center;
     font-size: 12px;
     margin-bottom: 8px;
   }
   .lite-presence-label {
-    color: #4E5969;
-    margin-right: 6px;
+    color: #4e5969;
+    margin-right: 2px;
     font-weight: 500;
   }
   .lite-presence-badge {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 6px 2px 3px;
+    background: #f2f3f5;
+    border: 1px solid #e5e6eb;
+    border-radius: 999px;
+    margin-right: 2px;
+    font-size: 11px;
+    line-height: 1.4;
+  }
+  .lite-presence-avatar,
+  .lite-presence-initials {
     display: inline-block;
-    padding: 2px 6px;
-    background: #F2F3F5;
-    border: 1px solid #E5E6EB;
-    border-radius: 4px;
+    width: 20px;
+    height: 20px;
+    flex: 0 0 20px;
     margin-right: 4px;
+    border-radius: 999px;
+    text-align: center;
+    line-height: 20px;
+    object-fit: cover;
+    background: #e8f3ff;
+    color: #165dff;
+    font-size: 9px;
+    font-weight: 700;
+  }
+  .lite-presence-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .lite-presence-dot {
+    margin-left: 4px;
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: #00b42a;
+    box-shadow: 0 0 0 1px #fff;
+  }
+  .lite-presence-badge[data-status='idle'] .lite-presence-dot { background: #86909c; }
+  .lite-presence-badge[data-status='editing'] .lite-presence-dot { background: #ff7d00; }
+  .lite-presence-badge[data-status='viewing'] .lite-presence-dot { background: #00b42a; }
+  .lite-presence-overflow {
+    display: inline-block;
+    min-width: 24px;
+    line-height: 24px;
+    text-align: center;
+    height: 24px;
+    padding: 0 5px;
+    border: 1px solid #e5e6eb;
+    border-radius: 999px;
+    background: #fff;
+    color: #4e5969;
     font-size: 11px;
+    font-weight: 600;
   }
+  .lite-presence-empty { color: #86909c; font-size: 11px; }
+  .lite-presence-sm .lite-presence-avatar,
+  .lite-presence-sm .lite-presence-initials { width: 16px; height: 16px; flex-basis: 16px; font-size: 8px; }
+  .lite-presence-lg .lite-presence-avatar,
+  .lite-presence-lg .lite-presence-initials { width: 26px; height: 26px; flex-basis: 26px; font-size: 10px; }
 </style>

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

@@ -1,12 +1,17 @@
-interface LitePresenceUser {
+export interface LitePresenceUser {
     id: string;
     name: string;
-    status?: 'online' | 'idle' | 'editing';
+    avatar?: string;
+    role?: string;
+    status?: 'online' | 'viewing' | 'idle' | 'editing';
 }
 interface Props {
     users?: LitePresenceUser[];
     label?: string;
-    /** Caller class merged with the built-in class list. */
+    maxVisible?: number;
+    maxCount?: number;
+    size?: 'sm' | 'md' | 'lg';
+    showStatusDot?: boolean;
     class?: string;
 }
 declare const LitePresenceAvatarGroup: import("svelte").Component<Props, {}, "">;

package/dist/components/LiteResultPage.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type ResultStatus = 'success' | 'processing' | 'warning' | 'error' | '403' | '404' | '500';
+
+  interface Props {
+    status?: ResultStatus;
+    title: string;
+    description?: string;
+    primaryActionHref?: string;
+    primaryActionLabel?: string;
+    secondaryActionHref?: string;
+    secondaryActionLabel?: string;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    status = 'success',
+    title,
+    description,
+    primaryActionHref,
+    primaryActionLabel = 'Back to Home',
+    secondaryActionHref,
+    secondaryActionLabel,
+    class: className = '',
+    actions,
+    children,
+  }: Props = $props();
+
+  const iconSymbol = $derived.by(() => {
+    switch (status) {
+      case 'success':
+        return '✓';
+      case 'processing':
+        return '⏳';
+      case 'warning':
+      case '403':
+        return '!';
+      case 'error':
+      case '500':
+        return '✕';
+      case '404':
+      default:
+        return '?';
+    }
+  });
+</script>
+
+<div
+  class="lite-result-page lite-result-{status} {className}"
+  data-svadmin-component="LiteResultPage"
+  role="status"
+>
+  <div class="lite-result-icon-wrapper" aria-hidden="true">
+    <span class="lite-result-icon">{iconSymbol}</span>
+  </div>
+
+  <h2 class="lite-result-title">{title}</h2>
+
+  {#if description}
+    <p class="lite-result-description">{description}</p>
+  {/if}
+
+  {#if actions}
+    <div class="lite-result-actions">{@render actions()}</div>
+  {:else if primaryActionHref || secondaryActionHref}
+    <div class="lite-result-actions">
+      {#if primaryActionHref}
+        <a href={primaryActionHref} class="lite-result-btn-primary">{primaryActionLabel}</a>
+      {/if}
+      {#if secondaryActionHref && secondaryActionLabel}
+        <a href={secondaryActionHref} class="lite-result-btn-secondary">{secondaryActionLabel}</a>
+      {/if}
+    </div>
+  {/if}
+
+  {#if children}
+    <div class="lite-result-extra">{@render children()}</div>
+  {/if}
+</div>
+
+<style>
+  .lite-result-page {
+    text-align: center;
+    padding: 48px 24px;
+    background: #ffffff;
+    border-radius: 8px;
+    border: 1px solid #e5e6eb;
+    box-sizing: border-box;
+  }
+  .lite-result-icon-wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    margin-bottom: 16px;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .lite-result-success .lite-result-icon-wrapper { background: #e8ffea; color: #00b42a; }
+  .lite-result-processing .lite-result-icon-wrapper { background: #e8f3ff; color: #165dff; }
+  .lite-result-warning .lite-result-icon-wrapper { background: #fff7e8; color: #ff7d00; }
+  .lite-result-error .lite-result-icon-wrapper { background: #ffece8; color: #f53f3f; }
+  .lite-result-403 .lite-result-icon-wrapper { background: #fff7e8; color: #ff7d00; }
+  .lite-result-404 .lite-result-icon-wrapper { background: #f2f3f5; color: #86909c; }
+  .lite-result-500 .lite-result-icon-wrapper { background: #ffece8; color: #f53f3f; }
+  .lite-result-title { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: #1d2129; }
+  .lite-result-description { margin: 0 0 24px; font-size: 14px; color: #4e5969; max-width: 480px; margin-left: auto; margin-right: auto; }
+  .lite-result-actions { display: flex; justify-content: center; }
+  .lite-result-actions > * + * { margin-left: 12px; }
+  .lite-result-btn-primary {
+    display: inline-block;
+    padding: 8px 18px;
+    background: #165dff;
+    color: #ffffff;
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 13px;
+    font-weight: 500;
+  }
+  .lite-result-btn-secondary {
+    display: inline-block;
+    padding: 8px 18px;
+    background: #f2f3f5;
+    color: #4e5969;
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 13px;
+  }
+  .lite-result-extra { margin-top: 24px; padding-top: 16px; border-top: 1px solid #f2f3f5; }
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+type ResultStatus = 'success' | 'processing' | 'warning' | 'error' | '403' | '404' | '500';
+interface Props {
+    status?: ResultStatus;
+    title: string;
+    description?: string;
+    primaryActionHref?: string;
+    primaryActionLabel?: string;
+    secondaryActionHref?: string;
+    secondaryActionLabel?: string;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+}
+declare const LiteResultPage: import("svelte").Component<Props, {}, "">;
+type LiteResultPage = ReturnType<typeof LiteResultPage>;
+export default LiteResultPage;