nebula-cms 0.1.0

package/src/client/components/fields/ArrayField.svelte

@@ -0,0 +1,339 @@
+<script lang="ts">
+  import type { SchemaNode } from '../../js/utils/schema-utils';
+  import {
+    createDefaultValue,
+    resolveFieldType,
+    getLabel,
+  } from '../../js/utils/schema-utils';
+  import ArrayItem from './ArrayItem.svelte';
+
+  /**
+   * Props for the ArrayField component, which renders a JSON Schema array field with add, remove, reorder, and drag-and-drop controls.
+   */
+  interface Props {
+    // Property name for the label
+    name: string;
+    // JSON Schema node describing this array field
+    schema: SchemaNode;
+    // Current array value
+    value: unknown;
+    // Whether this field is required
+    required?: boolean;
+    // Callback fired when the array value changes
+    onchange: (value: unknown) => void;
+  }
+
+  let { name, schema, value, required = false, onchange }: Props = $props();
+
+  /*
+  //////////////////////////////
+  // Derived schema metadata
+  //////////////////////////////
+  */
+
+  // Schema for each item in the array
+  const itemSchema = $derived(
+    (schema['items'] as SchemaNode | undefined) ?? {},
+  );
+
+  // Whether items are objects — enables collapse UI in ArrayItem
+  const isObjectItems = $derived(
+    resolveFieldType(itemSchema).kind === 'object',
+  );
+
+  // Minimum number of items allowed (from schema)
+  const minItems = $derived(schema['minItems'] as number | undefined);
+
+  // Maximum number of items allowed (from schema)
+  const maxItems = $derived(schema['maxItems'] as number | undefined);
+
+  // Display label — schema.title if present, otherwise title-cased name
+  const label = $derived(getLabel(schema, name));
+
+  // Current items array, falling back to empty array if value is not an array
+  const items = $derived(Array.isArray(value) ? (value as unknown[]) : []);
+
+  /*
+  //////////////////////////////
+  // Collapse state
+  //////////////////////////////
+  */
+
+  // Collapsed state per item slot; grows/shrinks reactively with the items array.
+  let collapsed = $state<boolean[]>([]);
+
+  // Keep collapsed array length in sync with items without wiping existing state
+  $effect(() => {
+    const len = items.length;
+    if (collapsed.length < len) {
+      // Append false entries for any new items
+      collapsed = [...collapsed, ...Array(len - collapsed.length).fill(false)];
+    } else if (collapsed.length > len) {
+      collapsed = collapsed.slice(0, len);
+    }
+  });
+
+  /*
+  //////////////////////////////
+  // Drag-and-drop state
+  //////////////////////////////
+  */
+
+  // Index of the item currently being dragged, or -1 when idle
+  let dragIndex = $state(-1);
+
+  // Index of the item currently hovered over as a drop target, or -1 when none
+  let dropTarget = $state(-1);
+
+  /*
+  //////////////////////////////
+  // Array mutation helpers
+  //////////////////////////////
+  */
+
+  /**
+   * Appends a new default item to the array, using the item schema to create a default value.
+   * Guards against maxItems even when the button is disabled.
+   * @return {void}
+   */
+  function addItem(): void {
+    if (maxItems != null && items.length >= maxItems) return;
+    const newItem = createDefaultValue(itemSchema);
+    onchange([...items, newItem]);
+  }
+
+  /**
+   * Removes the item at the given index. Guards against minItems even when the button is disabled.
+   * @param {number} index - Zero-based index of the item to remove
+   * @return {void}
+   */
+  function removeItem(index: number): void {
+    if (minItems != null && items.length <= minItems) return;
+    const next = items.filter((_, i) => i !== index);
+    onchange(next);
+  }
+
+  /**
+   * Moves an item from one index to another, keeping collapsed state in sync with the reorder.
+   * @param {number} from - Zero-based source index of the item to move
+   * @param {number} to - Zero-based destination index to move the item to
+   * @return {void}
+   */
+  function moveItem(from: number, to: number): void {
+    if (to < 0 || to >= items.length) return;
+    const next = [...items];
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
+    // Keep collapsed state in sync with the reorder
+    const nextCollapsed = [...collapsed];
+    const [movedCollapsed] = nextCollapsed.splice(from, 1);
+    nextCollapsed.splice(to, 0, movedCollapsed);
+    collapsed = nextCollapsed;
+    onchange(next);
+  }
+
+  /**
+   * Replaces the item at the given index with a new value and dispatches the updated array.
+   * @param {number} index - Zero-based index of the item to update
+   * @param {unknown} newValue - The replacement value for the item
+   * @return {void}
+   */
+  function updateItem(index: number, newValue: unknown): void {
+    const next = items.map((item, i) => (i === index ? newValue : item));
+    onchange(next);
+  }
+
+  /**
+   * Toggles the collapsed state for the item at the given index.
+   * @param {number} index - Zero-based index of the item whose collapse state to toggle
+   * @return {void}
+   */
+  function toggleCollapse(index: number): void {
+    collapsed = collapsed.map((c, i) => (i === index ? !c : c));
+  }
+
+  /*
+  //////////////////////////////
+  // Drag-and-drop handlers
+  //////////////////////////////
+  */
+
+  /**
+   * Marks an item as the drag source and sets the drag effect.
+   * @param {DragEvent} e - The native dragstart event
+   * @param {number} index - Zero-based index of the item being dragged
+   * @return {void}
+   */
+  function handleDragStart(e: DragEvent, index: number): void {
+    dragIndex = index;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+    }
+  }
+
+  /**
+   * Updates the drop target index while dragging over an item.
+   * @param {DragEvent} e - The native dragover event (preventDefault allows drop)
+   * @param {number} index - Zero-based index of the item currently being dragged over
+   * @return {void}
+   */
+  function handleDragOver(e: DragEvent, index: number): void {
+    e.preventDefault();
+    dropTarget = index;
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = 'move';
+    }
+  }
+
+  /**
+   * Clears the drop target highlight when the drag leaves an item.
+   * @param {number} index - Zero-based index of the item being left
+   * @return {void}
+   */
+  function handleDragLeave(index: number): void {
+    if (dropTarget === index) dropTarget = -1;
+  }
+
+  /**
+   * Completes the drag-and-drop reorder when an item is dropped onto a target slot.
+   * @param {number} index - Zero-based index of the slot where the dragged item was dropped
+   * @return {void}
+   */
+  function handleDrop(index: number): void {
+    if (dragIndex !== -1 && dragIndex !== index) {
+      moveItem(dragIndex, index);
+    }
+    dragIndex = -1;
+    dropTarget = -1;
+  }
+
+  /**
+   * Resets drag state after a drag operation ends, including cancelled drags.
+   * @return {void}
+   */
+  function handleDragEnd(): void {
+    dragIndex = -1;
+    dropTarget = -1;
+  }
+
+  /*
+  //////////////////////////////
+  // Derived constraint checks
+  //////////////////////////////
+  */
+
+  // Whether the add button should be disabled
+  const atMax = $derived(maxItems != null && items.length >= maxItems);
+
+  // Whether removal is permitted (need more than minItems)
+  const canRemove = $derived(minItems == null || items.length > minItems);
+</script>
+
+{#snippet arrayContent()}
+  {#if items.length === 0}
+    <p class="array-field__empty">No items</p>
+  {:else}
+    <div class="array-field__list" role="list">
+      {#each items as item, i (i)}
+        <ArrayItem
+          {name}
+          index={i}
+          {item}
+          {itemSchema}
+          isObject={isObjectItems}
+          collapsed={collapsed[i] ?? false}
+          dragging={dragIndex === i}
+          dropTarget={dropTarget === i}
+          isFirst={i === 0}
+          isLast={i === items.length - 1}
+          {canRemove}
+          onupdate={updateItem}
+          onremove={removeItem}
+          onmoveup={(idx) => moveItem(idx, idx - 1)}
+          onmovedown={(idx) => moveItem(idx, idx + 1)}
+          ontogglecollapse={toggleCollapse}
+          ondragstart={(e) => handleDragStart(e, i)}
+          ondragover={(e) => handleDragOver(e, i)}
+          ondragleave={() => handleDragLeave(i)}
+          ondrop={() => handleDrop(i)}
+          ondragend={handleDragEnd}
+        />
+      {/each}
+    </div>
+  {/if}
+
+  <button
+    class="array-field__add"
+    type="button"
+    disabled={atMax}
+    onclick={addItem}
+  >
+    + Add item
+  </button>
+{/snippet}
+
+<fieldset class="array-field">
+  <legend class="array-field__label">
+    {label}{#if required}<span class="array-field__required" aria-hidden="true"
+        >*</span
+      >{/if}
+  </legend>
+  {@render arrayContent()}
+</fieldset>
+
+<style>
+  .array-field {
+    display: grid;
+    gap: 0.5rem;
+    /* Reset fieldset defaults when used for primitive arrays */
+    border: none;
+    margin: 0;
+    padding: 0;
+    min-width: 0;
+  }
+
+  .array-field__label {
+    font-size: 0.875rem;
+    color: var(--cms-fg);
+    padding: 0;
+    margin-bottom: 0.25rem;
+  }
+
+  .array-field__required {
+    color: var(--light-red);
+    margin-left: 0.25rem;
+  }
+
+  .array-field__empty {
+    font-size: 0.75rem;
+    color: var(--cms-muted);
+    margin: 0;
+  }
+
+  .array-field__list {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  .array-field__add {
+    border: 1px dashed var(--cms-border);
+    border-radius: 4px;
+    background: none;
+    color: var(--cms-muted);
+    cursor: pointer;
+    font-size: 0.875rem;
+    padding: 0.5rem;
+    text-align: center;
+    width: 100%;
+
+    &:hover:not(:disabled) {
+      border-color: var(--cms-fg);
+      color: var(--cms-fg);
+    }
+
+    &:disabled {
+      opacity: 0.3;
+      cursor: default;
+    }
+  }
+</style>

package/src/client/components/fields/ArrayItem.svelte

@@ -0,0 +1,325 @@
+<script lang="ts">
+  import type { SchemaNode } from '../../js/utils/schema-utils';
+  import SchemaField from './SchemaField.svelte';
+
+  // Props for the ArrayItem component, which renders a single item row within an ArrayField, including drag-and-drop handles, reorder arrows, and a remove button.
+  interface Props {
+    // Parent array field name, used to namespace child field ids
+    name: string;
+    // Zero-based position of this item in the array
+    index: number;
+    // The item's current value
+    item: unknown;
+    // JSON Schema node describing a single array item
+    itemSchema: SchemaNode;
+    // Whether the item schema is an object type
+    isObject: boolean;
+    // Whether this item's content is collapsed (only applicable for objects)
+    collapsed: boolean;
+    // Whether this item is currently being dragged
+    dragging: boolean;
+    // Whether this item is the current drag-over drop target
+    dropTarget: boolean;
+    // Whether this is the first item in the list (disables move-up)
+    isFirst: boolean;
+    // Whether this is the last item in the list (disables move-down)
+    isLast: boolean;
+    // Whether the remove button is enabled
+    canRemove: boolean;
+    // Fired when this item's value changes
+    onupdate: (index: number, value: unknown) => void;
+    // Fired when the remove button is clicked
+    onremove: (index: number) => void;
+    // Fired when the move-up arrow is clicked
+    onmoveup: (index: number) => void;
+    // Fired when the move-down arrow is clicked
+    onmovedown: (index: number) => void;
+    // Fired when the collapse/expand toggle is clicked
+    ontogglecollapse: (index: number) => void;
+    // Native dragstart handler
+    ondragstart: (e: DragEvent) => void;
+    // Native dragover handler
+    ondragover: (e: DragEvent) => void;
+    // Native dragleave handler
+    ondragleave: (e: DragEvent) => void;
+    // Native drop handler
+    ondrop: (e: DragEvent) => void;
+    // Native dragend handler
+    ondragend: (e: DragEvent) => void;
+  }
+
+  let {
+    name,
+    index,
+    item,
+    itemSchema,
+    isObject,
+    collapsed,
+    dragging,
+    dropTarget,
+    isFirst,
+    isLast,
+    canRemove,
+    onupdate,
+    onremove,
+    onmoveup,
+    onmovedown,
+    ontogglecollapse,
+    ondragstart,
+    ondragover,
+    ondragleave,
+    ondrop,
+    ondragend,
+  }: Props = $props();
+
+  // Schema title for the item type, if present (e.g., "Step")
+  const itemTitle = $derived(itemSchema['title'] as string | undefined);
+
+  // Header label: "{title} N" if schema has a title, first string value, or "Item N".
+  const headerLabel = $derived.by(() => {
+    if (!isObject) return '';
+    if (itemTitle) return `${itemTitle} ${index + 1}`;
+    if (typeof item !== 'object' || item === null) return `Item ${index + 1}`;
+    const obj = item as Record<string, unknown>;
+    const firstString = Object.values(obj).find(
+      (v) => typeof v === 'string' && v !== '',
+    );
+    return typeof firstString === 'string' ? firstString : `Item ${index + 1}`;
+  });
+</script>
+
+{#snippet actionButtons()}
+  <button
+    class="array-item__btn"
+    type="button"
+    aria-label="Move item up"
+    disabled={isFirst}
+    onclick={() => onmoveup(index)}
+    ><span class="icon">arrow_upward</span></button
+  >
+  <button
+    class="array-item__btn"
+    type="button"
+    aria-label="Move item down"
+    disabled={isLast}
+    onclick={() => onmovedown(index)}
+    ><span class="icon">arrow_downward</span></button
+  >
+  <button
+    class="array-item__btn array-item__btn--remove"
+    type="button"
+    aria-label="Remove item"
+    disabled={!canRemove}
+    onclick={() => onremove(index)}><span class="icon">close</span></button
+  >
+{/snippet}
+
+{#if isObject}
+  <fieldset
+    class="array-item"
+    class:array-item--dragging={dragging}
+    class:array-item--drop-target={dropTarget}
+    draggable="true"
+    {ondragstart}
+    {ondragover}
+    {ondragleave}
+    {ondrop}
+    {ondragend}
+  >
+    <!-- Controls bar with legend for the fieldset label -->
+    <div class="array-item__controls">
+      <span
+        class="array-item__drag-handle"
+        aria-hidden="true"
+        title="Drag to reorder"><span class="icon">drag_indicator</span></span
+      >
+      <button
+        class="array-item__btn"
+        type="button"
+        aria-label={collapsed ? 'Expand item' : 'Collapse item'}
+        onclick={() => ontogglecollapse(index)}
+      >
+        <span
+          class="icon array-item__collapse-icon"
+          class:array-item__collapse-icon--collapsed={collapsed}
+          >chevron_right</span
+        >
+      </button>
+      <legend class="array-item__legend">{headerLabel}</legend>
+      <span class="array-item__spacer"></span>
+      {@render actionButtons()}
+    </div>
+
+    {#if !collapsed}
+      <div class="array-item__content">
+        <!-- inline=true skips the ObjectField fieldset wrapper -->
+        <SchemaField
+          name={`${name}[${index}]`}
+          schema={itemSchema}
+          value={item}
+          onchange={(v) => onupdate(index, v)}
+          inline={true}
+        />
+      </div>
+    {/if}
+  </fieldset>
+{:else}
+  <!-- Primitive item: input sits inline between drag handle and buttons -->
+  <div
+    class="array-item array-item--primitive"
+    class:array-item--dragging={dragging}
+    class:array-item--drop-target={dropTarget}
+    draggable="true"
+    role="listitem"
+    {ondragstart}
+    {ondragover}
+    {ondragleave}
+    {ondrop}
+    {ondragend}
+  >
+    <div class="array-item__controls">
+      <span
+        class="array-item__drag-handle"
+        aria-hidden="true"
+        title="Drag to reorder"><span class="icon">drag_indicator</span></span
+      >
+      <!-- Inline input with aria-label only, no visible label -->
+      <div class="array-item__inline-field">
+        <SchemaField
+          name={`${name}[${index}]`}
+          schema={itemSchema}
+          value={item}
+          onchange={(v) => onupdate(index, v)}
+          inline={true}
+        />
+      </div>
+      {@render actionButtons()}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .array-item {
+    border: 1px solid var(--cms-border);
+    border-radius: 4px;
+    background: var(--cms-surface, #1e1e22);
+    transition:
+      opacity 0.15s,
+      border-color 0.15s;
+    /* Reset fieldset defaults */
+    margin: 0;
+    padding: 0;
+    min-width: 0;
+  }
+
+  .array-item--dragging {
+    opacity: 0.5;
+  }
+
+  .array-item--drop-target {
+    border-color: var(--plum);
+  }
+
+  .array-item__controls {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+  }
+
+  .array-item__drag-handle {
+    color: var(--cms-muted);
+    cursor: grab;
+    user-select: none;
+    display: grid;
+    place-items: center;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  /* Chevron rotates 90deg when expanded (default), points right when collapsed */
+  .array-item__collapse-icon {
+    transition: transform 0.15s;
+    transform: rotate(90deg);
+    display: block;
+  }
+
+  .array-item__collapse-icon--collapsed {
+    transform: rotate(0deg);
+  }
+
+  /* Consistent icon size for all Material Symbols in array items */
+  .icon {
+    font-size: 1.25rem;
+    /* Ensure vertical centering in flex row */
+    display: grid;
+    place-items: center;
+  }
+
+  /* Smaller icons for action buttons (arrows + close) */
+  .array-item__btn .icon {
+    font-size: 1rem;
+  }
+
+  /* Legend rendered inline in the controls flex row, after the drag handle and chevron */
+  .array-item__legend {
+    font-size: 0.875rem;
+    color: var(--cms-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    margin-left: 0.25rem;
+    /* Reset legend defaults so it participates in flex layout */
+    padding: 0;
+    float: unset;
+    width: auto;
+  }
+
+  .array-item__spacer {
+    flex: 1;
+  }
+
+  /*
+   * Primitive items: input fills space between drag handle and buttons.
+   * Label/help hiding is handled by FieldWrapper's inline prop via SchemaField inline={true}.
+   */
+  .array-item__inline-field {
+    flex: 1;
+    min-width: 0;
+    margin: 0 0.5rem;
+  }
+
+  .array-item__btn {
+    background: none;
+    border: none;
+    color: var(--cms-muted);
+    cursor: pointer;
+    /* Minimal padding so action buttons sit tight together */
+    padding: 0;
+    line-height: 1;
+
+    &:hover:not(:disabled) {
+      color: var(--cms-fg);
+    }
+
+    &:disabled {
+      opacity: 0.3;
+      cursor: default;
+    }
+  }
+
+  /* Small gap before the remove button to visually separate it from arrows */
+  .array-item__btn--remove {
+    margin-left: 0.25rem;
+
+    &:hover:not(:disabled) {
+      color: var(--light-red);
+    }
+  }
+
+  .array-item__content {
+    padding: 0.75rem;
+  }
+</style>