@svadmin/lite 0.6.0 → 0.7.0

package/README.md

@@ -10,6 +10,12 @@ The bundled CSS follows an IE11-oriented baseline, but Svelte 5, SvelteKit, Tail
 
 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.
 
+**What Lite is:**
+- A **Zero-JS SSR-first admin component suite** designed with an IE11-safe CSS baseline.
+- 100% interoperable with `@svadmin/core` — sharing the same `DataProvider`, `AuthProvider`, `Resource`, and `FieldDefinition` contracts.
+- An architectural companion to `@svadmin/ui` achieving **100% component parity (72/72 components)** through 1:1 server-rendered matches or deliberate semantic fallbacks.
+- **Not** a generic Tailwind-to-IE11 compiler or a full client-side port of shadcn-svelte (which depends on modern browser JS runtimes and CSS custom properties).
+
 `@svadmin/lite` provides a server-rendered fallback that **shares the same DataProvider, AuthProvider, and Resource definitions** — only the rendering layer is different.
 
 ## Features
@@ -29,6 +35,7 @@ The main `@svadmin/ui` package delivers a premium SPA experience using Svelte 5,
 | **Capability fallbacks** | Canvas, WASM, realtime, directory upload, observers, storage, media, and other browser-only features have server-safe alternatives |
 | **i18n** | Uses `@svadmin/core` `t()` translations |
 | **Multi-level Menu** | Always-expanded, config-driven nested links via `MenuItem[]` |
+| **Parity Tracking** | Built-in CLI matrix, CI parity verification gate, and live interactive visual showroom |
 | **Print** | `@media print` optimized styles |
 
 ## Quick Start
@@ -44,6 +51,20 @@ are required peers rather than optional dependencies.
 
 ### 2. Create a list page
 
+For an existing SvelteKit project, the route tree can be generated once instead
+of being handwritten for every resource:
+
+```bash
+bunx @svadmin/create lite init .
+bunx @svadmin/create lite init . --write
+```
+
+The generator adds a shared `$lib/svadmin-lite.ts` adapter and dynamic
+`[resource]` list/create/show/edit routes. `$lib/admin` only needs to export
+`resources` and `dataProvider`; the existing SPA files are not changed. The
+generated Lite subtree is `ssr = true` and `csr = false`, and existing files are
+preserved on repeat runs.
+
 ```typescript
 // src/routes/lite/posts/+page.server.ts
 import { createListLoader, createCrudActions } from '@svadmin/lite';
@@ -223,18 +244,56 @@ If the application is behind a reverse proxy, the same rule can be implemented
 there instead. The important property is that the SPA JavaScript is not sent to
 IE11 before the decision is made.
 
-## Components
+## Components & Parity (100% Coverage)
+
+`@svadmin/lite` provides **100% component parity** (72/72 components) corresponding to `@svadmin/ui`. See [PARITY.md](./PARITY.md) for the complete matrix.
+
+### Core Pages & Layout
+
+| Component | Description |
+|-----------|-------------|
+| `LiteLayout` | Responsive sidebar + header + main shell (supports nested `menu` links) |
+| `LiteSidebar` / `LiteHeader` | Discrete layout primitives |
+| `LiteListPage` | Full-featured list view with search, table, bulk actions, and pagination |
+| `LiteCreatePage` / `LiteEditPage` | Auto-generated CRUD form pages |
+| `LiteShowPage` | Key-value record view with typed field renderers |
+| `LiteProfilePage` | User profile management page with avatar and info |
+| `LiteRegisterPage` | User registration page with server-side validation |
+| `LiteForgotPasswordPage` / `LiteUpdatePasswordPage` | Password recovery and credential rotation flows |
+| `LiteTable` | HTML table with sort links, selectable rows, and delete confirmation |
+| `LiteForm` | Schema-driven form renderer supporting all field definitions |
+| `LiteShow` | Detailed field-by-field record viewer |
+| `LitePagination` / `LiteSearch` | URL-driven pagination and GET search controls |
+| `LiteAlert` | Inline notification banner for success/error/warning states |
+| `LiteBreadcrumbs` / `LiteTabs` / `LiteEmptyState` | Semantic navigation and placeholder primitives |
+
+### Field Components (23 Fields)
+
+| Category | Components |
+|----------|------------|
+| **Text & Numeric** | `LiteTextField`, `LiteNumberField`, `LiteCurrencyField`, `LitePercentField`, `LitePhoneField`, `LiteEmailField`, `LiteUrlField`, `LiteRatingField`, `LiteCopyField` |
+| **Date & Choice** | `LiteDateField`, `LiteDateRangeField`, `LiteBooleanField`, `LiteSelectField`, `LiteMultiSelectField`, `LiteTreeSelect`, `LiteCascader`, `LiteTagField`, `LiteRelationField` |
+| **Media & Rich & Array** | `LiteAvatarField`, `LiteImageField`, `LiteFileField`, `LiteCodeField`, `LiteMarkdownField`, `LiteRichTextField`, `LiteJsonField`, `LiteArrayField`, `LiteDynamicFormList`, `LiteTransfer` |
+
+### Action Buttons (10 Buttons)
+
+| Component | Description |
+|-----------|-------------|
+| `LiteListButton`, `LiteCreateButton`, `LiteEditButton`, `LiteShowButton`, `LiteCloneButton` | Server-rendered `<a>` navigation buttons |
+| `LiteDeleteButton` | Fragment-target modal confirmation with native POST form action |
+| `LiteSaveButton`, `LiteRefreshButton`, `LiteExportButton`, `LiteImportButton` | Form submission, page refresh, and file action buttons |
+
+### Widgets & Charts (SSR-Safe)
+
+| Component | Description |
+|-----------|-------------|
+| `LiteStatsCard`, `LiteInsightCard`, `LiteAnomalyBadge` | Metric KPI cards and status badges |
+| `LiteBarChart`, `LiteLineChart`, `LitePieChart` | Server-rendered SVG/HTML charts with fallback data tables |
+
+### Compatibility & Degradation Primitives
 
 | Component | Description |
 |-----------|-------------|
-| `LiteLayout` | Sidebar + main area layout (supports `menu` prop for multi-level menus) |
-| `LiteTable` | HTML table with sort links and delete confirmation |
-| `LiteSearch` | GET-based search form |
-| `LitePagination` | Page number links |
-| `LiteForm` | Auto-generated form from `FieldDefinition[]` |
-| `LiteShow` | Record detail/view page |
-| `LiteLogin` | Login form |
-| `LiteAlert` | Success/error notification banner |
 | `LiteCapabilityBoundary` | Documents and selects a server-safe fallback for an optional browser capability |
 | `LiteVisualFallback` | Snapshot plus accessible table for Canvas, WebGL, map, chart, and flow UIs |
 | `LiteDirectoryUpload` | Directory enhancement with multiple-file and ZIP upload fallbacks |
@@ -242,6 +301,23 @@ IE11 before the decision is made.
 | `LiteComputeFallback` | Native POST action for WASM, Worker, and long-running compute fallback |
 | `LiteOrderedList` | Up/down POST actions for drag-and-drop ordering fallback |
 | `LiteClipboardFallback` | Selectable textarea when Clipboard API is unavailable |
+| `LiteAutoSaveIndicator` | Server persistence timestamp indicator |
+| `LiteInlineEdit` | Non-JS inline edit modal fallback |
+| `LiteModalForm` / `LiteDrawerForm` | Fragment-target `#modal` forms for zero-JS popups |
+| `LiteVirtualTable` | Graceful fallback to server-paginated table |
+| `LiteDraggableHeader` | Static column header with URL sorter links |
+| `LiteToast` / `LiteUndoableNotification` | Server-driven flash messages and undo actions |
+| `LiteFilterBuilder` | Native multi-rule CRUD filter builder with AND/OR logical operators |
+
+## Parity Tracking & Visualization
+
+To monitor and maintain 100% component parity between `@svadmin/ui` and `@svadmin/lite`:
+
+- **CLI Dashboard**: Run `bun run check:parity` to inspect the live coverage matrix in terminal.
+- **Parity Matrix Document**: [PARITY.md](./PARITY.md) is auto-generated with exhaustive module-by-module tables.
+- **Machine-Readable JSON**: `packages/lite/parity.json` provides structured data for automation.
+- **Interactive Showroom**: Visit `/lite/parity` in the example app to interactively preview all 72 components and live metrics.
+- **CI Contract Test**: `scripts/parity-contract.test.ts` runs in CI to prevent regression and ensure every new UI component has a documented Lite counterpart.
 
 ## Server Utilities
 

package/dist/components/LiteDynamicFormList.svelte

@@ -0,0 +1,169 @@
+<script lang="ts" generics="T = Record<string, unknown>">
+  import type { Snippet } from 'svelte';
+  import { t } from '@svadmin/core/i18n';
+
+  interface Props {
+    items?: T[];
+    name?: string;
+    label?: string;
+    description?: string;
+    addButtonLabel?: string;
+    minItems?: number;
+    maxItems?: number;
+    defaultItem?: T | (() => T);
+    disabled?: boolean;
+    emptyText?: string;
+    children?: Snippet<[{
+      item: T;
+      index: number;
+      isFirst: boolean;
+      isLast: boolean;
+    }]>;
+    headerExtra?: Snippet<[{ count: number }]>;
+  }
+
+  let {
+    items = [],
+    name = 'items',
+    label,
+    description,
+    addButtonLabel = '+ Add Item',
+    minItems = 0,
+    maxItems = Infinity,
+    disabled = false,
+    emptyText = 'No items yet',
+    children,
+    headerExtra,
+  }: Props = $props();
+
+  const renderedItems = $derived(items.length > 0 ? items : (minItems > 0 ? Array(minItems).fill({}) as T[] : []));
+</script>
+
+<div class="lite-dynamic-form-list lite-form-group">
+  <div class="lite-dynamic-header">
+    <div>
+      {#if label}
+        <span class="lite-label">{label}</span>
+      {/if}
+      {#if description}
+        <p class="lite-help-text">{description}</p>
+      {/if}
+    </div>
+    <div class="lite-dynamic-actions">
+      {#if headerExtra}
+        {@render headerExtra({ count: renderedItems.length })}
+      {/if}
+      <span class="lite-badge">{renderedItems.length} {t('common.items') || 'items'}</span>
+    </div>
+  </div>
+
+  {#if renderedItems.length === 0}
+    <div class="lite-empty-box">
+      <p>{emptyText}</p>
+    </div>
+  {:else}
+    <div class="lite-dynamic-items">
+      {#each renderedItems as item, idx (idx)}
+        <div class="lite-dynamic-item-card">
+          <div class="lite-dynamic-item-header">
+            <span class="lite-badge lite-badge-indigo">#{idx + 1}</span>
+            <div class="lite-dynamic-item-tools">
+              {#if idx > 0}
+                <button type="submit" name="_action" value="move_up_{name}_{idx}" class="lite-btn lite-btn-sm" {disabled} title="Move Up">↑</button>
+              {/if}
+              {#if idx < renderedItems.length - 1}
+                <button type="submit" name="_action" value="move_down_{name}_{idx}" class="lite-btn lite-btn-sm" {disabled} title="Move Down">↓</button>
+              {/if}
+              {#if renderedItems.length > minItems}
+                <button type="submit" name="_action" value="remove_{name}_{idx}" class="lite-btn lite-btn-sm lite-btn-danger" {disabled} title="Remove">✕</button>
+              {/if}
+            </div>
+          </div>
+          <div class="lite-dynamic-item-body">
+            {#if children}
+              {@render children({
+                item,
+                index: idx,
+                isFirst: idx === 0,
+                isLast: idx === renderedItems.length - 1,
+              })}
+            {:else}
+              <div class="lite-form-row">
+                {#each Object.entries((item as Record<string, unknown>) ?? {}) as [k, v] (k)}
+                  <div class="lite-form-group" style="flex: 1; min-width: 140px;">
+                    <label class="lite-label" for="{name}_{idx}_{k}">{k}</label>
+                    <input
+                      type="text"
+                      id="{name}_{idx}_{k}"
+                      name="{name}[{idx}][{k}]"
+                      value={String(v ?? '')}
+                      class="lite-input"
+                      {disabled}
+                    />
+                  </div>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  {#if renderedItems.length < maxItems && !disabled}
+    <div style="margin-top: 10px;">
+      <button type="submit" name="_action" value="add_{name}" class="lite-btn">
+        {addButtonLabel}
+      </button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .lite-dynamic-form-list {
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 14px;
+    background-color: #fafafa;
+    margin-bottom: 16px;
+  }
+  .lite-dynamic-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+  .lite-dynamic-items {
+    display: flex;
+    flex-direction: column;
+  }
+  .lite-dynamic-item-card {
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+    padding: 12px;
+    margin-bottom: 10px;
+  }
+  .lite-dynamic-item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    border-bottom: 1px dashed #e2e8f0;
+    padding-bottom: 6px;
+  }
+  .lite-dynamic-item-tools {
+    display: flex;
+  }
+  .lite-dynamic-item-tools button {
+    margin-left: 4px;
+  }
+  .lite-empty-box {
+    text-align: center;
+    padding: 24px 12px;
+    color: #64748b;
+    background: #ffffff;
+    border: 1px dashed #cbd5e1;
+    border-radius: 4px;
+  }
+</style>

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

@@ -0,0 +1,45 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T = Record<string, unknown>>(): {
+    props: {
+        items?: T[];
+        name?: string;
+        label?: string;
+        description?: string;
+        addButtonLabel?: string;
+        minItems?: number;
+        maxItems?: number;
+        defaultItem?: T | (() => T);
+        disabled?: boolean;
+        emptyText?: string;
+        children?: Snippet<[{
+            item: T;
+            index: number;
+            isFirst: boolean;
+            isLast: boolean;
+        }]>;
+        headerExtra?: Snippet<[{
+            count: number;
+        }]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const LiteDynamicFormList: $$IsomorphicComponent;
+type LiteDynamicFormList<T = Record<string, unknown>> = InstanceType<typeof LiteDynamicFormList<T>>;
+export default LiteDynamicFormList;

package/dist/components/LiteFilterBuilder.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import type { CrudOperator, FieldDefinition, Filter } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+
+  export interface FilterRuleItem {
+    id: string;
+    field: string;
+    operator: CrudOperator;
+    value: unknown;
+  }
+
+  interface Props {
+    fields?: FieldDefinition[];
+    filters?: Filter[];
+    logicalOperator?: 'and' | 'or';
+    action?: string;
+    method?: 'GET' | 'POST';
+    disabled?: boolean;
+    onApply?: (filters: Filter[]) => void;
+  }
+
+  let {
+    fields = [],
+    filters = [],
+    logicalOperator = 'and',
+    action = '',
+    disabled = false,
+  }: Props = $props();
+
+  const operatorOptions: { value: CrudOperator; label: string }[] = [
+    { value: 'eq', label: '= 等于' },
+    { value: 'ne', label: '!= 不等于' },
+    { value: 'contains', label: '包含' },
+    { value: 'ncontains', label: '不包含' },
+    { value: 'gt', label: '> 大于' },
+    { value: 'gte', label: '>= 大于等于' },
+    { value: 'lt', label: '< 小于' },
+    { value: 'lte', label: '<= 小于等于' },
+    { value: 'null', label: '为空 (null)' },
+    { value: 'nnull', label: '不为空' },
+  ];
+
+  // Flatten initial filters or fallback to 1 empty rule
+  const initialRules = $derived.by(() => {
+    if (filters.length > 0) {
+      return filters.map((f, i) => ({
+        id: `rule_${i}`,
+        field: 'field' in f ? String(f.field) : (fields[0]?.key ?? ''),
+        operator: ('operator' in f ? f.operator : 'eq') as CrudOperator,
+        value: 'value' in f ? f.value : '',
+      }));
+    }
+    return [
+      {
+        id: 'rule_0',
+        field: fields[0]?.key ?? '',
+        operator: 'eq' as CrudOperator,
+        value: '',
+      },
+    ];
+  });
+</script>
+
+<div class="lite-filter-builder lite-form-group">
+  <div class="lite-filter-header">
+    <div class="lite-filter-title">
+      <strong>{t('common.filters') || '高级多条件筛选'}</strong>
+      <select
+        name="logical_op"
+        class="lite-select lite-select-sm"
+        style="width: 120px; display: inline-block; margin-left: 8px;"
+        value={logicalOperator}
+        {disabled}
+      >
+        <option value="and">符合全部 (AND)</option>
+        <option value="or">符合任一 (OR)</option>
+      </select>
+    </div>
+    <div>
+      <button type="submit" name="_action" value="add_filter_rule" class="lite-btn lite-btn-sm" {disabled}>
+        + 添加条件
+      </button>
+    </div>
+  </div>
+
+  <div class="lite-filter-rules">
+    {#each initialRules as rule, idx (rule.id)}
+      <div class="lite-filter-row">
+        <!-- Field select -->
+        <select
+          name="filter_field_{idx}"
+          class="lite-select lite-filter-field"
+          value={rule.field}
+          {disabled}
+        >
+          {#each fields as fld (fld.key)}
+            <option value={fld.key}>{fld.label || fld.key}</option>
+          {/each}
+        </select>
+
+        <!-- Operator select -->
+        <select
+          name="filter_op_{idx}"
+          class="lite-select lite-filter-op"
+          value={rule.operator}
+          {disabled}
+        >
+          {#each operatorOptions as op (op.value)}
+            <option value={op.value}>{op.label}</option>
+          {/each}
+        </select>
+
+        <!-- Value input -->
+        {#if rule.operator !== 'null' && rule.operator !== 'nnull'}
+          <input
+            type="text"
+            name="filter_val_{idx}"
+            class="lite-input lite-filter-val"
+            value={String(rule.value ?? '')}
+            placeholder="输入筛选值..."
+            {disabled}
+          />
+        {/if}
+
+        <!-- Remove row button -->
+        <button
+          type="submit"
+          name="_action"
+          value="remove_filter_rule_{idx}"
+          class="lite-btn lite-btn-sm lite-btn-danger"
+          {disabled}
+          title="删除此行条件"
+        >
+          ✕
+        </button>
+      </div>
+    {/each}
+  </div>
+
+  <div class="lite-filter-footer">
+    <button type="submit" class="lite-btn lite-btn-primary">
+      应用筛选
+    </button>
+    <a href={action || '?'} class="lite-btn" style="margin-left: 8px;">
+      重置
+    </a>
+  </div>
+</div>
+
+<style>
+  .lite-filter-builder {
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    padding: 14px;
+    background: #f8fafc;
+    margin-bottom: 16px;
+  }
+  .lite-filter-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+  .lite-filter-rules {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 12px;
+  }
+  .lite-filter-row {
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    padding: 8px;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+    margin-bottom: 8px;
+  }
+  .lite-filter-row:last-child {
+    margin-bottom: 0;
+  }
+  .lite-filter-row > * {
+    margin-right: 8px;
+  }
+  .lite-filter-row > *:last-child {
+    margin-right: 0;
+  }
+  .lite-filter-field {
+    flex: 2;
+    min-width: 130px;
+  }
+  .lite-filter-op {
+    flex: 2;
+    min-width: 120px;
+  }
+  .lite-filter-val {
+    flex: 3;
+    min-width: 140px;
+  }
+  .lite-filter-footer {
+    display: flex;
+    align-items: center;
+    border-top: 1px solid #e2e8f0;
+    padding-top: 10px;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+import type { CrudOperator, FieldDefinition, Filter } from '@svadmin/core';
+export interface FilterRuleItem {
+    id: string;
+    field: string;
+    operator: CrudOperator;
+    value: unknown;
+}
+interface Props {
+    fields?: FieldDefinition[];
+    filters?: Filter[];
+    logicalOperator?: 'and' | 'or';
+    action?: string;
+    method?: 'GET' | 'POST';
+    disabled?: boolean;
+    onApply?: (filters: Filter[]) => void;
+}
+declare const LiteFilterBuilder: import("svelte").Component<Props, {}, "">;
+type LiteFilterBuilder = ReturnType<typeof LiteFilterBuilder>;
+export default LiteFilterBuilder;

package/dist/components/LiteShowField.svelte

@@ -7,6 +7,11 @@
   import { toSafeHref, toSafeText } from "../security";
   import { isExplicitBooleanTrue, getStatusBadgeClass } from "../value-normalization";
   import LiteMediaThumbnail from "./LiteMediaThumbnail.svelte";
+  import LiteAvatarField from "./fields/LiteAvatarField.svelte";
+  import LiteCurrencyField from "./fields/LiteCurrencyField.svelte";
+  import LitePhoneField from "./fields/LitePhoneField.svelte";
+  import LiteRatingField from "./fields/LiteRatingField.svelte";
+  import LiteCodeField from "./fields/LiteCodeField.svelte";
 
   interface Props {
     field: FieldDefinition;
@@ -42,6 +47,23 @@
   {@const checked = isExplicitBooleanTrue(value)}
   <span class="lite-bool {checked ? "lite-bool-true" : ""}"></span>
   {checked ? "✓ Yes" : "✗ No"}
+{:else if field.type === "avatar"}
+  <LiteAvatarField {field} value={value as unknown} mode="show" />
+{:else if field.type === "rating"}
+  <LiteRatingField {field} value={value as string | number | null | undefined} mode="show" />
+{:else if field.type === "code"}
+  <LiteCodeField {field} value={value as string | number | Record<string, unknown> | unknown[] | null | undefined} mode="show" />
+{:else if field.type === "currency"}
+  <LiteCurrencyField {field} value={value as string | number | null | undefined} mode="show" />
+{:else if field.type === "phone"}
+  <LitePhoneField {field} value={value as string | number | null | undefined} mode="show" />
+{:else if field.type === "password"}
+  <span>••••••••</span>
+{:else if field.type === "color" && value}
+  <span style="display:inline-flex;align-items:center;">
+    <span style="display:inline-block;width:14px;height:14px;border-radius:3px;background:{toSafeText(value)};border:1px solid #cbd5e1;margin-right:6px;"></span>
+    <span class="lite-font-mono">{toSafeText(value)}</span>
+  </span>
 {:else if field.type === "url" && value}
   {@const href = toSafeHref(value)}
   {#if href}