@quoin-cms/admin 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quoin-cms/admin",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": false,
   "type": "module",
   "files": [

package/src/lib/components/fields/ArrayFieldEditor.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
+  import type { FieldSchema } from '$lib/types/schema.js';
   import BlockCard from './BlockCard.svelte';
 
   interface Props {
-    field: { name: string; label?: string; labels?: { singular?: string; plural?: string } };
+    field: {
+      name: string;
+      label?: string;
+      labels?: { singular?: string; plural?: string };
+      /** Subfield schemas injected by the server from Go field.Array.Fields. */
+      fields?: FieldSchema[];
+    };
     // Two-way bound by FieldWidget (`bind:value`); writes go straight back.
     value?: any[];
   }
@@ -10,6 +17,7 @@
 
   const rows = $derived(Array.isArray(value) ? value : []);
   const singular = $derived(field.labels?.singular ?? 'Item');
+  const subfields = $derived<FieldSchema[]>(field.fields ?? []);
 
   function genId(): string {
     // randomUUID is only defined in secure contexts; fall back so array
@@ -24,11 +32,6 @@
   function add() {
     value = [...rows, { id: genId() }];
   }
-  function update(i: number, next: any) {
-    const out = [...rows];
-    out[i] = next;
-    value = out;
-  }
   function remove(i: number) {
     value = rows.filter((_, j) => j !== i);
   }
@@ -51,10 +54,10 @@
   {#each rows as row, i (row.id)}
     <BlockCard
       title="{singular} #{i + 1}"
-      value={row}
+      fields={subfields}
+      bind:row={value![i]}
       canMoveUp={i > 0}
       canMoveDown={i < rows.length - 1}
-      onChange={(next) => update(i, next)}
       onMoveUp={() => moveUp(i)}
       onMoveDown={() => moveDown(i)}
       onDelete={() => remove(i)}

package/src/lib/components/fields/BlockCard.svelte

@@ -1,39 +1,33 @@
 <script lang="ts">
+  import type { FieldSchema } from '$lib/types/schema.js';
+  import FieldWidget from './FieldWidget.svelte';
+
   interface Props {
     title: string;     // e.g. "Block #1 · hero"
-    value: Record<string, any>;
+    /** Subfield schemas for the row (Array.Fields, or Blocks block fields). */
+    fields: FieldSchema[];
+    /** The row data; mutated in place via FieldWidget's bind:value. */
+    row: Record<string, any>;
     canMoveUp: boolean;
     canMoveDown: boolean;
-    onChange: (next: Record<string, any>) => void;
     onMoveUp: () => void;
     onMoveDown: () => void;
     onDelete: () => void;
   }
-  let { title, value, canMoveUp, canMoveDown, onChange, onMoveUp, onMoveDown, onDelete }: Props = $props();
-
-  // Strip `id` from the textarea (read-only system field).
-  const visible = $derived.by(() => {
-    const { id, ...rest } = value;
-    return rest;
-  });
-
-  let text = $state(JSON.stringify(visible, null, 2));
-  let parseError = $state('');
-
-  function save() {
-    try {
-      const parsed = JSON.parse(text);
-      parseError = '';
-      onChange({ ...parsed, id: value.id });
-    } catch (e: any) {
-      parseError = e.message;
-    }
-  }
+  let {
+    title,
+    fields,
+    row = $bindable(),
+    canMoveUp,
+    canMoveDown,
+    onMoveUp,
+    onMoveDown,
+    onDelete,
+  }: Props = $props();
 
-  // Re-sync textarea if value changes externally (e.g. reorder)
-  $effect(() => {
-    text = JSON.stringify(visible, null, 2);
-  });
+  const visibleFields = $derived(
+    (fields ?? []).filter((f) => !f.hidden && !f.adminHidden),
+  );
 </script>
 
 <div class="card">
@@ -45,11 +39,11 @@
       <button type="button" onclick={onDelete} aria-label="Delete">×</button>
     </div>
   </header>
-  <textarea bind:value={text} rows="6" class:error={!!parseError}></textarea>
-  {#if parseError}
-    <p class="parse-error">{parseError}</p>
-  {/if}
-  <button type="button" onclick={save}>Save</button>
+  <div class="body">
+    {#each visibleFields as sf (sf.name)}
+      <FieldWidget field={sf} bind:value={row[sf.name]} formData={row} />
+    {/each}
+  </div>
 </div>
 
 <style>
@@ -57,7 +51,5 @@
   header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
   .title { font-weight: 600; font-family: monospace; font-size: 13px; }
   .actions button { margin-left: 4px; }
-  textarea { width: 100%; font-family: monospace; font-size: 13px; }
-  textarea.error { border-color: #c00; }
-  .parse-error { color: #c00; font-size: 12px; margin: 4px 0; }
+  .body { display: flex; flex-direction: column; gap: 12px; }
 </style>

package/src/lib/components/fields/BlocksFieldEditor.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import type { FieldSchema } from '$lib/types/schema.js';
   import BlockCard from './BlockCard.svelte';
 
   interface BlockDef {
     slug: string;
     label: string;
-    fields?: any[];
+    fields?: FieldSchema[];
   }
   interface Props {
     field: {
@@ -33,15 +34,14 @@
   function defaultsFor(slug: string): Record<string, any> {
     return { id: genId(), blockType: slug };
   }
+  function fieldsForRow(row: Record<string, any>): FieldSchema[] {
+    const def = field.blocks.find((b) => b.slug === row?.blockType);
+    return def?.fields ?? [];
+  }
   function add() {
     if (!pickerSlug) return;
     value = [...rows, defaultsFor(pickerSlug)];
   }
-  function update(i: number, next: any) {
-    const out = [...rows];
-    out[i] = next;
-    value = out;
-  }
   function remove(i: number) {
     value = rows.filter((_, j) => j !== i);
   }
@@ -64,10 +64,10 @@
   {#each rows as row, i (row.id)}
     <BlockCard
       title="Block #{i + 1} · {row.blockType ?? '?'}"
-      value={row}
+      fields={fieldsForRow(row)}
+      bind:row={value![i]}
       canMoveUp={i > 0}
       canMoveDown={i < rows.length - 1}
-      onChange={(next) => update(i, next)}
       onMoveUp={() => moveUp(i)}
       onMoveDown={() => moveDown(i)}
       onDelete={() => remove(i)}