@svadmin/ui 0.0.1

package/src/components/AutoTable.svelte

@@ -0,0 +1,343 @@
+<script lang="ts">
+  import { useList, useDelete, getResource } from '@svadmin/core';
+  import type { Pagination, Sort, Filter } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { canAccess } from '@svadmin/core/permissions';
+  import { readURLState, writeURLState } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from './ui/button/index.js';
+  import { Input } from './ui/input/index.js';
+  import { Checkbox } from './ui/checkbox/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import * as Table from './ui/table/index.js';
+  import { Plus, Pencil, Trash2, ChevronLeft, ChevronRight, Search, Loader2, Download, Upload } from 'lucide-svelte';
+  import ConfirmDialog from './ConfirmDialog.svelte';
+
+  let { resourceName } = $props<{ resourceName: string }>();
+
+  const resource = getResource(resourceName);
+  const primaryKey = $derived(resource.primaryKey ?? 'id');
+
+  // URL state init
+  const urlState = readURLState();
+
+  let pagination = $state<Pagination>({
+    current: urlState.page ?? 1,
+    pageSize: urlState.pageSize ?? resource.pageSize ?? 10,
+  });
+  let sorters = $state<Sort[]>(
+    urlState.sortField
+      ? [{ field: urlState.sortField, order: urlState.sortOrder ?? 'asc' }]
+      : resource.defaultSort ? [resource.defaultSort] : []
+  );
+  let filters = $state<Filter[]>([]);
+  let searchText = $state(urlState.search ?? '');
+
+  // Batch selection
+  let selectedIds = $state<Set<string | number>>(new Set());
+  let selectAll = $state(false);
+
+  // Confirm dialog
+  let confirmOpen = $state(false);
+  let confirmMessage = $state('');
+  let confirmAction = $state<() => void>(() => {});
+
+  // URL sync
+  $effect(() => {
+    writeURLState({
+      page: pagination.current,
+      pageSize: pagination.pageSize,
+      sortField: sorters[0]?.field,
+      sortOrder: sorters[0]?.order,
+      search: searchText || undefined,
+    });
+  });
+
+  const searchableFields = resource.fields.filter(f => f.searchable);
+  const listFields = resource.fields.filter(f => f.showInList !== false);
+
+  const activeFilters = $derived.by(() => {
+    const result: Filter[] = [...filters];
+    if (searchText.trim() && searchableFields.length > 0) {
+      result.push({ field: searchableFields[0].key, operator: 'contains', value: searchText });
+    }
+    return result;
+  });
+
+  const query = useList({
+    resource: resourceName,
+    pagination,
+    sorters,
+    filters: activeFilters,
+  });
+
+  const deleteMutation = useDelete(resourceName);
+
+  function toggleSort(field: string) {
+    const existing = sorters.find(s => s.field === field);
+    if (!existing) {
+      sorters = [{ field, order: 'asc' }];
+    } else if (existing.order === 'asc') {
+      sorters = [{ field, order: 'desc' }];
+    } else {
+      sorters = [];
+    }
+  }
+
+  function getSortIcon(field: string): string {
+    const s = sorters.find(ss => ss.field === field);
+    if (!s) return '⇅';
+    return s.order === 'asc' ? '↑' : '↓';
+  }
+
+  // Batch operations
+  function toggleSelect(id: string | number) {
+    const next = new Set(selectedIds);
+    if (next.has(id)) next.delete(id); else next.add(id);
+    selectedIds = next;
+  }
+
+  function toggleSelectAll() {
+    if (selectAll) {
+      selectedIds = new Set();
+      selectAll = false;
+    } else {
+      const allIds = ($query.data?.data ?? []).map(r => r[primaryKey] as string | number);
+      selectedIds = new Set(allIds);
+      selectAll = true;
+    }
+  }
+
+  function confirmDelete(id: string | number) {
+    confirmMessage = t('common.deleteConfirm');
+    confirmAction = async () => {
+      await $deleteMutation.mutateAsync(id);
+      confirmOpen = false;
+    };
+    confirmOpen = true;
+  }
+
+  function confirmBatchDelete() {
+    confirmMessage = t('common.batchDeleteConfirm', { count: selectedIds.size });
+    confirmAction = async () => {
+      for (const id of selectedIds) {
+        await $deleteMutation.mutateAsync(id);
+      }
+      selectedIds = new Set();
+      selectAll = false;
+      confirmOpen = false;
+    };
+    confirmOpen = true;
+  }
+
+  // CSV Export
+  function exportCSV() {
+    const data = $query.data?.data ?? [];
+    if (data.length === 0) return;
+
+    const headers = listFields.map(f => f.label);
+    const rows = data.map(record =>
+      listFields.map(f => {
+        const val = record[f.key];
+        if (val == null) return '';
+        if (typeof val === 'object') return JSON.stringify(val);
+        return String(val);
+      })
+    );
+
+    const csv = [headers.join(','), ...rows.map(r => r.map(v => `"${v.replace(/"/g, '""')}"`).join(','))].join('\n');
+    const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = `${resourceName}_${new Date().toISOString().slice(0, 10)}.csv`;
+    link.click();
+    URL.revokeObjectURL(link.href);
+  }
+
+  // CSV Import
+  function handleImportCSV() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.csv';
+    input.onchange = async (e: Event) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+      alert(`Import: selected ${file.name}, batch create API needed`);
+    };
+    input.click();
+  }
+
+  // Permissions
+  const canCreate = canAccess(resourceName, 'create').can && resource.canCreate !== false;
+  const canEdit = canAccess(resourceName, 'edit').can && resource.canEdit !== false;
+  const canDelete = canAccess(resourceName, 'delete').can && resource.canDelete !== false;
+  const canExport = canAccess(resourceName, 'export').can;
+
+  const totalPages = $derived(Math.ceil(($query.data?.total ?? 0) / (pagination.pageSize ?? 10)));
+</script>
+
+<div class="space-y-4">
+  <!-- Header -->
+  <div class="flex items-center justify-between">
+    <h1 class="text-2xl font-bold text-foreground">{resource.label}</h1>
+    <div class="flex items-center gap-2">
+      {#if canExport}
+        <Button variant="outline" size="sm" onclick={exportCSV}>
+          <Download class="h-4 w-4" data-icon="inline-start" /> {t('common.export')}
+        </Button>
+        <Button variant="outline" size="sm" onclick={handleImportCSV}>
+          <Upload class="h-4 w-4" data-icon="inline-start" /> {t('common.import')}
+        </Button>
+      {/if}
+      {#if selectedIds.size > 0 && canDelete}
+        <Button variant="destructive" size="sm" onclick={confirmBatchDelete}>
+          <Trash2 class="h-4 w-4" data-icon="inline-start" /> {t('common.batchDelete', { count: selectedIds.size })}
+        </Button>
+      {/if}
+      {#if canCreate}
+        <Button onclick={() => navigate(`/${resourceName}/create`)}>
+          <Plus class="h-4 w-4" data-icon="inline-start" /> {t('common.create')}
+        </Button>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Search -->
+  {#if searchableFields.length > 0}
+    <div class="relative max-w-sm">
+      <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+      <Input
+        type="text"
+        bind:value={searchText}
+        oninput={() => { pagination = { ...pagination, current: 1 }; }}
+        placeholder={t('common.search')}
+        class="pl-10"
+      />
+    </div>
+  {/if}
+
+  <!-- Table -->
+  <div class="rounded-xl border border-border bg-card shadow-sm">
+    {#if $query.isLoading}
+      <div class="flex h-64 items-center justify-center">
+        <Loader2 class="h-6 w-6 animate-spin text-primary" />
+      </div>
+    {:else if $query.error}
+      <div class="flex h-64 items-center justify-center text-destructive text-sm">
+        {t('common.loadFailed', { message: ($query.error as Error).message })}
+      </div>
+    {:else}
+      <Table.Root>
+        <Table.Header>
+          <Table.Row class="bg-muted/50 hover:bg-muted/50">
+            {#if canDelete}
+              <Table.Head class="w-10">
+                <Checkbox checked={selectAll} onCheckedChange={() => toggleSelectAll()} />
+              </Table.Head>
+            {/if}
+            {#each listFields as field}
+              <Table.Head style={field.width ? `width:${field.width}` : undefined}>
+                <button class="flex items-center gap-1 hover:text-foreground" onclick={() => toggleSort(field.key)}>
+                  {field.label}
+                  <span class="text-xs opacity-50">{getSortIcon(field.key)}</span>
+                </button>
+              </Table.Head>
+            {/each}
+            <Table.Head class="text-right">{t('common.actions')}</Table.Head>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {#each $query.data?.data ?? [] as record}
+            {@const id = record[primaryKey] as string | number}
+            <Table.Row class={selectedIds.has(id) ? 'bg-accent' : ''}>
+              {#if canDelete}
+                <Table.Cell>
+                  <Checkbox checked={selectedIds.has(id)} onCheckedChange={() => toggleSelect(id)} />
+                </Table.Cell>
+              {/if}
+              {#each listFields as field}
+                <Table.Cell>
+                  {#if field.type === 'boolean'}
+                    <span class="inline-block h-2 w-2 rounded-full {record[field.key] ? 'bg-green-500' : 'bg-muted-foreground/30'}"></span>
+                  {:else if field.type === 'date' && record[field.key]}
+                    {new Date(record[field.key] as string).toLocaleDateString('zh-CN')}
+                  {:else if field.type === 'tags' && Array.isArray(record[field.key])}
+                    <div class="flex flex-wrap gap-1">
+                      {#each (record[field.key] as string[]).slice(0, 3) as tag}
+                        <Badge variant="secondary">{tag}</Badge>
+                      {/each}
+                    </div>
+                  {:else if field.type === 'select' && field.options}
+                    {@const opt = field.options.find(o => o.value === record[field.key])}
+                    <Badge variant="outline">{opt?.label ?? record[field.key] ?? '—'}</Badge>
+                  {:else}
+                    {record[field.key] ?? '—'}
+                  {/if}
+                </Table.Cell>
+              {/each}
+              <Table.Cell class="text-right">
+                <div class="flex items-center justify-end gap-1">
+                  {#if canEdit}
+                    <Button
+                      variant="ghost" size="icon-sm"
+                      onclick={() => navigate(`/${resourceName}/edit/${id}`)}
+                      title={t('common.edit')}
+                    >
+                      <Pencil class="h-4 w-4" />
+                    </Button>
+                  {/if}
+                  {#if canDelete}
+                    <Button
+                      variant="ghost" size="icon-sm"
+                      onclick={() => confirmDelete(id)}
+                      title={t('common.delete')}
+                      class="hover:text-destructive"
+                    >
+                      <Trash2 class="h-4 w-4" />
+                    </Button>
+                  {/if}
+                </div>
+              </Table.Cell>
+            </Table.Row>
+          {:else}
+            <Table.Row>
+              <Table.Cell colspan={listFields.length + (canDelete ? 2 : 1)} class="h-24 text-center text-muted-foreground">
+                {t('common.noData')}
+              </Table.Cell>
+            </Table.Row>
+          {/each}
+        </Table.Body>
+      </Table.Root>
+    {/if}
+  </div>
+
+  <!-- Pagination -->
+  <div class="flex items-center justify-between text-sm text-muted-foreground">
+    <span>{t('common.total', { total: $query.data?.total ?? 0 })}</span>
+    <div class="flex items-center gap-2">
+      <Button
+        variant="outline" size="icon-sm"
+        onclick={() => { pagination = { ...pagination, current: Math.max(1, (pagination.current ?? 1) - 1) }; }}
+        disabled={(pagination.current ?? 1) <= 1}
+      >
+        <ChevronLeft class="h-4 w-4" />
+      </Button>
+      <span>{t('common.page', { current: pagination.current ?? 1, total: totalPages || 1 })}</span>
+      <Button
+        variant="outline" size="icon-sm"
+        onclick={() => { pagination = { ...pagination, current: Math.min(totalPages, (pagination.current ?? 1) + 1) }; }}
+        disabled={(pagination.current ?? 1) >= totalPages}
+      >
+        <ChevronRight class="h-4 w-4" />
+      </Button>
+    </div>
+  </div>
+</div>
+
+<ConfirmDialog
+  open={confirmOpen}
+  message={confirmMessage}
+  confirmText={t('common.delete')}
+  onconfirm={confirmAction}
+  oncancel={() => { confirmOpen = false; }}
+/>

package/src/components/Breadcrumbs.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { getResources } from '@svadmin/core';
+  import { currentPath } from '@svadmin/core/router';
+  import { t } from '@svadmin/core/i18n';
+
+  const resources = getResources();
+  let path = $state(currentPath());
+
+  $effect(() => {
+    function onHash() { path = currentPath(); }
+    window.addEventListener('hashchange', onHash);
+    return () => window.removeEventListener('hashchange', onHash);
+  });
+
+  interface Crumb { label: string; href: string; }
+
+  const crumbs = $derived.by(() => {
+    const result: Crumb[] = [{ label: t('common.home'), href: '#/' }];
+    if (path === '/') return result;
+
+    const segments = path.split('/').filter(Boolean);
+    const resourceName = segments[0];
+    const res = resources.find(r => r.name === resourceName);
+
+    if (res) {
+      result.push({ label: res.label, href: `#/${res.name}` });
+
+      if (segments[1] === 'create') {
+        result.push({ label: t('common.create'), href: `#/${res.name}/create` });
+      } else if (segments[1] === 'edit' && segments[2]) {
+        result.push({ label: `${t('common.edit')} #${segments[2]}`, href: `#/${res.name}/edit/${segments[2]}` });
+      }
+    }
+    return result;
+  });
+</script>
+
+{#if crumbs.length > 1}
+  <nav class="mb-4 flex items-center gap-1.5 text-sm text-gray-500">
+    {#each crumbs as crumb, i}
+      {#if i > 0}
+        <span class="text-gray-300">/</span>
+      {/if}
+      {#if i === crumbs.length - 1}
+        <span class="font-medium text-gray-700">{crumb.label}</span>
+      {:else}
+        <a href={crumb.href} class="hover:text-primary transition">{crumb.label}</a>
+      {/if}
+    {/each}
+  </nav>
+{/if}

package/src/components/ConfirmDialog.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import * as Dialog from './ui/dialog/index.js';
+  import { Button } from './ui/button/index.js';
+  import { t } from '@svadmin/core/i18n';
+
+  let { open = false, title, message = '',
+    confirmText, cancelText, variant = 'danger',
+    onconfirm, oncancel } = $props<{
+    open: boolean;
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: 'danger' | 'warning' | 'info';
+    onconfirm: () => void;
+    oncancel: () => void;
+  }>();
+
+  const variantMap = {
+    danger: 'destructive' as const,
+    warning: 'destructive' as const,
+    info: 'default' as const,
+  };
+
+  const resolvedTitle = $derived(title ?? t('common.confirmAction'));
+  const resolvedConfirmText = $derived(confirmText ?? t('common.confirm'));
+  const resolvedCancelText = $derived(cancelText ?? t('common.cancel'));
+</script>
+
+<Dialog.Root bind:open onOpenChange={(v: boolean) => { if (!v) oncancel(); }}>
+  <Dialog.Content showCloseButton={false} class="sm:max-w-md">
+    <Dialog.Header>
+      <Dialog.Title>{resolvedTitle}</Dialog.Title>
+      <Dialog.Description>{message}</Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={oncancel}>
+        {resolvedCancelText}
+      </Button>
+      <Button variant={variantMap[variant]} onclick={onconfirm}>
+        {resolvedConfirmText}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>

package/src/components/EmptyState.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from './ui/button/index.js';
+  import { InboxIcon } from 'lucide-svelte';
+
+  interface Props {
+    icon?: typeof InboxIcon;
+    title?: string;
+    description?: string;
+    action?: Snippet;
+    class?: string;
+  }
+
+  let {
+    icon: Icon = InboxIcon,
+    title,
+    description,
+    action,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class="flex flex-col items-center justify-center py-16 text-center {className}">
+  <div class="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
+    <Icon class="h-8 w-8 text-muted-foreground" />
+  </div>
+  <h3 class="text-lg font-semibold text-foreground">
+    {title ?? t('common.noData')}
+  </h3>
+  {#if description}
+    <p class="mt-1 text-sm text-muted-foreground max-w-sm">
+      {description}
+    </p>
+  {/if}
+  {#if action}
+    <div class="mt-4">
+      {@render action()}
+    </div>
+  {/if}
+</div>

package/src/components/ErrorBoundary.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { AlertTriangle } from 'lucide-svelte';
+  import { Button } from './ui/button/index.js';
+  import { t } from '@svadmin/core/i18n';
+
+  let { children }: { children: Snippet } = $props();
+
+  let error = $state<Error | null>(null);
+
+  function handleError(e: ErrorEvent) {
+    error = e.error instanceof Error ? e.error : new Error(String(e.error));
+    e.preventDefault();
+  }
+
+  function handleRejection(e: PromiseRejectionEvent) {
+    error = e.reason instanceof Error ? e.reason : new Error(String(e.reason));
+    e.preventDefault();
+  }
+
+  $effect(() => {
+    window.addEventListener('error', handleError);
+    window.addEventListener('unhandledrejection', handleRejection);
+    return () => {
+      window.removeEventListener('error', handleError);
+      window.removeEventListener('unhandledrejection', handleRejection);
+    };
+  });
+
+  function handleRetry() {
+    error = null;
+    window.location.reload();
+  }
+</script>
+
+{#if error}
+  <div class="flex h-screen items-center justify-center bg-background">
+    <div class="max-w-md text-center space-y-4">
+      <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
+        <AlertTriangle class="h-8 w-8 text-destructive" />
+      </div>
+      <h2 class="text-xl font-bold text-foreground">{t('common.error')}</h2>
+      <p class="text-sm text-muted-foreground">{error.message}</p>
+      <Button onclick={handleRetry}>
+        {t('common.retry')}
+      </Button>
+    </div>
+  </div>
+{:else}
+  {@render children()}
+{/if}

package/src/components/FieldRenderer.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+
+  let { field, value, onchange } = $props<{
+    field: FieldDefinition;
+    value: unknown;
+    onchange: (val: unknown) => void;
+  }>();
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+    if (field.type === 'number') {
+      onchange(parseFloat(target.value) || 0);
+    } else if (field.type === 'boolean') {
+      onchange((target as HTMLInputElement).checked);
+    } else {
+      onchange(target.value);
+    }
+  }
+</script>
+
+<div class="space-y-1.5">
+  <label class="block text-sm font-medium text-gray-700" for={field.key}>
+    {field.label}
+    {#if field.required}
+      <span class="text-red-500">*</span>
+    {/if}
+  </label>
+
+  {#if field.type === 'text' || field.type === 'image'}
+    <input
+      id={field.key}
+      type="text"
+      value={value as string ?? ''}
+      oninput={handleInput}
+      required={field.required}
+      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+      placeholder={t('field.enterValue', { label: field.label })}
+    />
+
+  {:else if field.type === 'number'}
+    <input
+      id={field.key}
+      type="number"
+      value={value as number ?? 0}
+      oninput={handleInput}
+      required={field.required}
+      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+    />
+
+  {:else if field.type === 'textarea' || field.type === 'richtext'}
+    <textarea
+      id={field.key}
+      value={value as string ?? ''}
+      oninput={handleInput}
+      required={field.required}
+      rows={field.type === 'richtext' ? 10 : 4}
+      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary resize-y"
+      placeholder={t('field.enterValue', { label: field.label })}
+    ></textarea>
+
+  {:else if field.type === 'select'}
+    <select
+      id={field.key}
+      value={value as string ?? ''}
+      onchange={handleInput}
+      required={field.required}
+      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary bg-white"
+    >
+      <option value="">{t('field.selectPlaceholder')}</option>
+      {#each field.options ?? [] as opt}
+        <option value={opt.value}>{opt.label}</option>
+      {/each}
+    </select>
+
+  {:else if field.type === 'boolean'}
+    <label class="relative inline-flex cursor-pointer items-center">
+      <input
+        type="checkbox"
+        checked={value as boolean ?? false}
+        onchange={handleInput}
+        class="peer sr-only"
+      />
+      <div class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-2 peer-focus:ring-primary/20"></div>
+    </label>
+
+  {:else if field.type === 'tags'}
+    {@const tags = (value as string[] ?? [])}
+    <div class="space-y-2">
+      <div class="flex flex-wrap gap-1.5">
+        {#each tags as tag, i}
+          <span class="inline-flex items-center gap-1 rounded-full bg-primary-50 px-2.5 py-0.5 text-xs font-medium text-primary-700">
+            {tag}
+            <button
+              type="button"
+              onclick={() => onchange(tags.filter((_, idx) => idx !== i))}
+              class="text-primary-400 hover:text-primary-700"
+            >×</button>
+          </span>
+        {/each}
+      </div>
+      <input
+        type="text"
+        placeholder={t('field.tagsPlaceholder')}
+        class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+        onkeydown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            const input = e.target as HTMLInputElement;
+            if (input.value.trim()) {
+              onchange([...tags, input.value.trim()]);
+              input.value = '';
+            }
+          }
+        }}
+      />
+    </div>
+
+  {:else if field.type === 'date'}
+    <input
+      id={field.key}
+      type="date"
+      value={value as string ?? ''}
+      oninput={handleInput}
+      required={field.required}
+      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+    />
+
+  {:else if field.type === 'json'}
+    <textarea
+      id={field.key}
+      value={typeof value === 'string' ? value : JSON.stringify(value, null, 2)}
+      oninput={(e) => {
+        try {
+          onchange(JSON.parse((e.target as HTMLTextAreaElement).value));
+        } catch (err) {
+          console.debug('[FieldRenderer] Invalid JSON input:', err);
+        }
+      }}
+      rows={6}
+      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm font-mono focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary resize-y"
+    ></textarea>
+
+  {:else}
+    <input
+      id={field.key}
+      type="text"
+      value={value as string ?? ''}
+      oninput={handleInput}
+      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+    />
+  {/if}
+</div>