nebula-cms 0.1.0

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

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import type { SchemaNode } from '../../js/utils/schema-utils';
+  import {
+    isReadOnly,
+    isNullable,
+    getLabel,
+  } from '../../js/utils/schema-utils';
+  import FieldWrapper from './FieldWrapper.svelte';
+
+  /**
+   * Props for the BooleanField component, which renders a labeled checkbox for a JSON Schema boolean property.
+   */
+  interface Props {
+    // Field name used as the input id and label fallback
+    name: string;
+    // JSON Schema node describing this field
+    schema: SchemaNode;
+    // Current field value
+    value: unknown;
+    // Whether this field is required
+    required?: boolean;
+    // Callback fired when the value changes
+    onchange: (value: boolean | null) => void;
+    // When true, visually hides FieldWrapper chrome (label/help) for inline array contexts
+    inline?: boolean;
+  }
+
+  let {
+    name,
+    schema,
+    value,
+    required = false,
+    onchange,
+    inline = false,
+  }: Props = $props();
+
+  // Display label — schema.title if present, otherwise title-cased name
+  const label = $derived(getLabel(schema, name));
+
+  // Checked state for the checkbox
+  const checked = $derived(typeof value === 'boolean' ? value : false);
+
+  // Whether field is read-only
+  const readOnly = $derived(isReadOnly(schema));
+
+  // Whether empty input should emit null (nullable anyOf-unwrapped types)
+  const nullable = $derived(isNullable(schema));
+
+  /**
+   * Handles checkbox change. Preserves null for nullable fields only while the value is already null and unchecked.
+   * @param {Event} e - The change event from the checkbox input element
+   * @return {void}
+   */
+  function handleChange(e: Event): void {
+    const isChecked = (e.target as HTMLInputElement).checked;
+    onchange(nullable && value === null && !isChecked ? null : isChecked);
+  }
+</script>
+
+<FieldWrapper {name} {schema} {required} hideLabel={true} {inline}>
+  <label class="field-label-wrap" for={name}>
+    <input
+      type="checkbox"
+      id={name}
+      class="field-checkbox"
+      {checked}
+      disabled={readOnly}
+      onchange={handleChange}
+    />
+    <span class="field-label-text">
+      {label}{#if required}<span class="field-required" aria-hidden="true"
+          >*</span
+        >{/if}
+    </span>
+  </label>
+</FieldWrapper>
+
+<style>
+  /* Label wraps checkbox + text in a flex row — no separate label above */
+  .field-label-wrap {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    width: fit-content;
+  }
+
+  .field-checkbox {
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--plum);
+    cursor: pointer;
+
+    &:focus {
+      outline: 2px solid var(--plum);
+      outline-offset: -1px;
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: default;
+    }
+  }
+
+  .field-label-text {
+    font-size: 0.875rem;
+    color: var(--cms-fg);
+  }
+
+  .field-required {
+    color: var(--light-red);
+    margin-left: 0.25rem;
+  }
+</style>

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

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import type { SchemaNode } from '../../js/utils/schema-utils';
+  import { isReadOnly, isNullable } from '../../js/utils/schema-utils';
+  import FieldWrapper from './FieldWrapper.svelte';
+
+  /**
+   * Props for the DateField component, which renders a date input for a JSON Schema string property with format "date-time".
+   */
+  interface Props {
+    // Field name used as the input id and label fallback
+    name: string;
+    // JSON Schema node describing this field
+    schema: SchemaNode;
+    // Current field value — Date object or ISO string
+    value: unknown;
+    // Whether this field is required
+    required?: boolean;
+    // Callback fired when the value changes
+    onchange: (value: string | null) => void;
+    // When true, visually hides FieldWrapper chrome (label/help) for inline array contexts
+    inline?: boolean;
+  }
+
+  let {
+    name,
+    schema,
+    value,
+    required = false,
+    onchange,
+    inline = false,
+  }: Props = $props();
+
+  /**
+   * Converts a Date or ISO string to YYYY-MM-DD for the date input, or empty string if unset.
+   * @param {unknown} val - The field value, which may be a Date object, ISO string, or unset
+   * @return {string} A YYYY-MM-DD formatted string for the date input, or empty string
+   */
+  function toDateInputValue(val: unknown): string {
+    if (val instanceof Date) {
+      // Use UTC components to avoid timezone shifts converting to local date
+      const y = val.getUTCFullYear();
+      const m = String(val.getUTCMonth() + 1).padStart(2, '0');
+      const d = String(val.getUTCDate()).padStart(2, '0');
+      return `${y}-${m}-${d}`;
+    }
+    if (typeof val === 'string' && val.length >= 10) {
+      // Slice the YYYY-MM-DD portion from an ISO string (e.g. "2024-01-15T00:00:00Z")
+      return val.slice(0, 10);
+    }
+    return '';
+  }
+
+  // YYYY-MM-DD string for the date input element
+  const inputValue = $derived(toDateInputValue(value));
+
+  // Whether field is read-only
+  const readOnly = $derived(isReadOnly(schema));
+
+  // Whether empty input should emit null (nullable anyOf-unwrapped types)
+  const nullable = $derived(isNullable(schema));
+
+  /**
+   * Handles date input change, emitting null for empty nullable fields.
+   * @param {Event} e - The input event from the date input element
+   * @return {void}
+   */
+  function handleChange(e: Event): void {
+    const raw = (e.target as HTMLInputElement).value;
+    onchange(nullable && raw === '' ? null : raw);
+  }
+</script>
+
+<FieldWrapper {name} {schema} {required} {inline}>
+  <input
+    type="date"
+    id={name}
+    class="field-input field-input--auto"
+    value={inputValue}
+    readonly={readOnly}
+    oninput={handleChange}
+  />
+</FieldWrapper>

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

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { SchemaNode } from '../../js/utils/schema-utils';
+  import { isReadOnly, isNullable } from '../../js/utils/schema-utils';
+  import FieldWrapper from './FieldWrapper.svelte';
+
+  /**
+   * Props for the EnumField component, which renders a select dropdown for a JSON Schema enum property.
+   */
+  interface Props {
+    // Field name used as the select id and label fallback
+    name: string;
+    // JSON Schema node describing this field
+    schema: SchemaNode;
+    // Current field value
+    value: unknown;
+    // The enum values to render as options
+    options: unknown[];
+    // Whether this field is required
+    required?: boolean;
+    // Callback fired when the value changes
+    onchange: (value: string | null) => void;
+    // When true, visually hides FieldWrapper chrome (label/help) for inline array contexts
+    inline?: boolean;
+  }
+
+  let {
+    name,
+    schema,
+    value,
+    options,
+    required = false,
+    onchange,
+    inline = false,
+  }: Props = $props();
+
+  // String representation of the current value for select binding
+  const selectedValue = $derived(value != null ? String(value) : '');
+
+  // Whether field is read-only
+  const readOnly = $derived(isReadOnly(schema));
+
+  // Whether empty selection should emit null (nullable anyOf-unwrapped types)
+  const nullable = $derived(isNullable(schema));
+
+  // Whether to show the empty placeholder option — when not required or no value is set
+  const showEmptyOption = $derived(!required || value == null);
+
+  /**
+   * Handles select change, emitting null when empty option is selected on nullable fields.
+   * @param {Event} e - The change event from the select element
+   * @return {void}
+   */
+  function handleChange(e: Event): void {
+    const raw = (e.target as HTMLSelectElement).value;
+    onchange(raw === '' ? (nullable ? null : '') : raw);
+  }
+</script>
+
+<FieldWrapper {name} {schema} {required} {inline}>
+  <select
+    id={name}
+    class="field-input field-input--select"
+    value={selectedValue}
+    disabled={readOnly}
+    onchange={handleChange}
+  >
+    {#if showEmptyOption}
+      <option value="">—</option>
+    {/if}
+    {#each options as option}
+      <option value={String(option)}>{String(option)}</option>
+    {/each}
+  </select>
+</FieldWrapper>

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

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { SchemaNode } from '../../js/utils/schema-utils';
+  import { getLabel } from '../../js/utils/schema-utils';
+  import type { Snippet } from 'svelte';
+
+  /**
+   * Shared wrapper for all form field components. Provides the label, required marker, deprecated dimming, description, and constraint text so individual field components only supply the input element via a Svelte snippet.
+   */
+  interface Props {
+    // Field name used as the input id and label fallback
+    name: string;
+    // JSON Schema node describing this field
+    schema: SchemaNode;
+    // Whether this field is required
+    required?: boolean;
+    // The input element rendered inside the wrapper
+    children: Snippet;
+    // Optional constraint text displayed after the description (e.g., "max 200", "min 0, max 100")
+    constraintText?: string;
+    // When true, hides the default label — used by BooleanField which renders its own inline checkbox+label
+    hideLabel?: boolean;
+    // When true, visually hides label and help text using sr-only for inline array contexts where the parent provides visible labels
+    inline?: boolean;
+  }
+
+  let {
+    name,
+    schema,
+    required = false,
+    children,
+    constraintText,
+    hideLabel = false,
+    inline = false,
+  }: Props = $props();
+
+  // Display label — schema.title if present, otherwise title-cased name
+  const label = $derived(getLabel(schema, name));
+
+  // Description from schema
+  const description = $derived(schema['description'] as string | undefined);
+
+  // Whether field is deprecated — dims the entire field
+  const deprecated = $derived(!!(schema['deprecated'] as boolean | undefined));
+</script>
+
+<div class="field" class:field--deprecated={deprecated}>
+  {#if !hideLabel}
+    <label class="field-label" class:sr-only={inline} for={name}>
+      {label}{#if required}<span class="field-required" aria-hidden="true"
+          >*</span
+        >{/if}
+    </label>
+  {/if}
+
+  {@render children()}
+
+  {#if description || constraintText}
+    <p class="field-help" class:sr-only={inline}>
+      {#if description}{description}{/if}
+      {#if description && constraintText}&ensp;{/if}
+      {#if constraintText}<span class="field-constraint">{constraintText}</span
+        >{/if}
+    </p>
+  {/if}
+</div>
+
+<style>
+  .field {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  /* Dimmed appearance for deprecated fields */
+  .field--deprecated {
+    opacity: 0.5;
+  }
+
+  .field-label {
+    font-size: 0.875rem;
+    color: var(--cms-fg);
+  }
+
+  .field-required {
+    color: var(--light-red);
+    margin-left: 0.25rem;
+  }
+
+  .field-help {
+    font-size: 0.75rem;
+    color: var(--cms-muted);
+  }
+
+  .field-constraint {
+    font-style: italic;
+  }
+</style>

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

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import type { SchemaNode } from '../../js/utils/schema-utils';
+  import { isReadOnly, isNullable } from '../../js/utils/schema-utils';
+  import FieldWrapper from './FieldWrapper.svelte';
+
+  /**
+   * Props for the NumberField component, which renders a numeric input for a JSON Schema number or integer property.
+   */
+  interface Props {
+    // Field name used as the input id and label fallback
+    name: string;
+    // JSON Schema node describing this field
+    schema: SchemaNode;
+    // Current field value
+    value: unknown;
+    // Whether this field is required
+    required?: boolean;
+    // Callback fired when the value changes
+    onchange: (value: number | null) => void;
+    // When true, visually hides FieldWrapper chrome (label/help) for inline array contexts
+    inline?: boolean;
+  }
+
+  let {
+    name,
+    schema,
+    value,
+    required = false,
+    onchange,
+    inline = false,
+  }: Props = $props();
+
+  // Numeric value for the input, coerced from the value prop
+  const inputValue = $derived(typeof value === 'number' ? value : '');
+
+  // Min attribute: minimum takes precedence, exclusiveMinimum adds 1
+  const min = $derived.by(() => {
+    const minimum = schema['minimum'] as number | undefined;
+    const exclusiveMin = schema['exclusiveMinimum'] as number | undefined;
+    if (minimum != null) return minimum;
+    if (exclusiveMin != null) return exclusiveMin + 1;
+    return undefined;
+  });
+
+  // Max attribute: maximum takes precedence, exclusiveMaximum subtracts 1
+  const max = $derived.by(() => {
+    const maximum = schema['maximum'] as number | undefined;
+    const exclusiveMax = schema['exclusiveMaximum'] as number | undefined;
+    if (maximum != null) return maximum;
+    if (exclusiveMax != null) return exclusiveMax - 1;
+    return undefined;
+  });
+
+  // Step attribute from multipleOf
+  const step = $derived(schema['multipleOf'] as number | undefined);
+
+  // Whether field is read-only
+  const readOnly = $derived(isReadOnly(schema));
+
+  // Whether empty input should emit null (nullable anyOf-unwrapped types)
+  const nullable = $derived(isNullable(schema));
+
+  // Human-readable constraint summary (e.g. "min 0, max 100, step 5")
+  const constraintText = $derived.by(() => {
+    const parts: string[] = [];
+    if (min != null) parts.push(`min ${min}`);
+    if (max != null) parts.push(`max ${max}`);
+    if (step != null) parts.push(`step ${step}`);
+    return parts.length > 0 ? parts.join(', ') : undefined;
+  });
+
+  /**
+   * Handles input change, emitting null for empty nullable fields or 0 for non-nullable.
+   * @param {Event} e - The input event from the number input element
+   * @return {void}
+   */
+  function handleChange(e: Event): void {
+    const raw = (e.target as HTMLInputElement).value;
+    if (raw === '') {
+      onchange(nullable ? null : 0);
+    } else {
+      onchange(parseFloat(raw));
+    }
+  }
+</script>
+
+<FieldWrapper {name} {schema} {required} {constraintText} {inline}>
+  <input
+    type="number"
+    id={name}
+    class="field-input field-input--auto"
+    value={inputValue}
+    {min}
+    {max}
+    {step}
+    readonly={readOnly}
+    oninput={handleChange}
+  />
+</FieldWrapper>

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

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type { SchemaNode } from '../../js/utils/schema-utils';
+  import {
+    getProperties,
+    getRequiredFields,
+    getLabel,
+  } from '../../js/utils/schema-utils';
+  import SchemaField from './SchemaField.svelte';
+
+  /**
+   * Props for the ObjectField component, which renders a grouped fieldset of child SchemaField components for a JSON Schema object property.
+   */
+  interface Props {
+    // Property name for labeling
+    name: string;
+    // JSON Schema node describing this object
+    schema: SchemaNode;
+    // Current object value
+    value: unknown;
+    // Whether this field is required
+    required?: boolean;
+    // Callback fired when the value changes
+    onchange: (value: unknown) => void;
+    // When true, renders fields without a fieldset wrapper (used inside ArrayItem).
+    inline?: boolean;
+  }
+
+  let {
+    name,
+    schema,
+    value,
+    required = false,
+    onchange,
+    inline = false,
+  }: Props = $props();
+
+  // Display label from schema title or property name
+  const label = $derived(getLabel(schema, name));
+
+  // Properties map from the schema
+  const properties = $derived(getProperties(schema) ?? {});
+
+  // Required field names within this object
+  const requiredFields = $derived(getRequiredFields(schema));
+
+  // Current object value, defaulting to empty object
+  const objValue = $derived(
+    (typeof value === 'object' && value !== null ? value : {}) as Record<
+      string,
+      unknown
+    >,
+  );
+
+  /**
+   * Updates a single property and dispatches the full updated object via onchange.
+   * @param {string} key - The property key to update within the object
+   * @param {unknown} newValue - The new value for the given property key
+   * @return {void}
+   */
+  function handleFieldChange(key: string, newValue: unknown): void {
+    onchange({ ...objValue, [key]: newValue });
+  }
+</script>
+
+{#if inline}
+  <!-- Inline mode: no fieldset wrapper, used inside ArrayItem -->
+  <div class="object-field--inline">
+    {#each Object.entries(properties) as [key, propSchema]}
+      <SchemaField
+        name={key}
+        schema={propSchema}
+        value={objValue[key]}
+        required={requiredFields.includes(key)}
+        onchange={(v) => handleFieldChange(key, v)}
+      />
+    {/each}
+  </div>
+{:else}
+  <fieldset class="object-field">
+    <legend class="object-field__legend">
+      {label}
+      {#if required}<span class="object-field__required">*</span>{/if}
+    </legend>
+    {#each Object.entries(properties) as [key, propSchema]}
+      <SchemaField
+        name={key}
+        schema={propSchema}
+        value={objValue[key]}
+        required={requiredFields.includes(key)}
+        onchange={(v) => handleFieldChange(key, v)}
+      />
+    {/each}
+  </fieldset>
+{/if}
+
+<style>
+  .object-field {
+    border: 1px solid var(--cms-border);
+    border-radius: 4px;
+    padding: 1rem;
+    display: grid;
+    gap: 1.25rem;
+  }
+
+  .object-field__legend {
+    font-size: 0.875rem;
+    color: var(--cms-fg);
+    padding: 0 0.5rem;
+  }
+
+  .object-field__required {
+    color: var(--light-red);
+    margin-left: 0.25rem;
+  }
+
+  /* Inline mode: no border/padding, just stack the fields */
+  .object-field--inline {
+    display: grid;
+    gap: 1.25rem;
+  }
+</style>

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

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { resolveFieldType } from '../../js/utils/schema-utils';
+  import type { SchemaNode } from '../../js/utils/schema-utils';
+  import StringField from './StringField.svelte';
+  import NumberField from './NumberField.svelte';
+  import BooleanField from './BooleanField.svelte';
+  import EnumField from './EnumField.svelte';
+  import DateField from './DateField.svelte';
+  import ArrayField from './ArrayField.svelte';
+  import ObjectField from './ObjectField.svelte';
+
+  /**
+   * Props for the SchemaField component, which resolves a JSON Schema node to the appropriate leaf field component (string, number, boolean, enum, date, array, or object).
+   */
+  interface Props {
+    // Property name for labeling and identification
+    name: string;
+    // JSON Schema node describing this field
+    schema: SchemaNode;
+    // Current field value
+    value: unknown;
+    // Whether this field is required
+    required?: boolean;
+    // Callback fired when the value changes
+    onchange: (value: unknown) => void;
+    // When true, object fields render without a fieldset wrapper and leaf fields hide FieldWrapper chrome (used inside ArrayItem).
+    inline?: boolean;
+  }
+
+  let {
+    name,
+    schema,
+    value,
+    required = false,
+    onchange,
+    inline = false,
+  }: Props = $props();
+
+  // Resolve the schema node to a field type descriptor
+  const fieldType = $derived(resolveFieldType(schema));
+
+  // For nullable anyOf schemas, merges outer annotations onto the inner type and sets _nullable so leaf fields emit null for empty values.
+  const effectiveSchema = $derived.by(() => {
+    if (Array.isArray(schema['anyOf'])) {
+      const nonNull = (schema['anyOf'] as SchemaNode[]).find(
+        (s) => s['type'] !== 'null',
+      );
+      if (nonNull) {
+        // Spread outer props (title, description, readOnly, etc.) onto the inner type; exclude anyOf to avoid recursion
+        const { anyOf: _, ...outerProps } = schema;
+        return { ...nonNull, ...outerProps, _nullable: true };
+      }
+    }
+    return schema;
+  });
+</script>
+
+{#if fieldType.kind === 'string'}
+  <StringField
+    {name}
+    schema={effectiveSchema}
+    {value}
+    {required}
+    {inline}
+    onchange={(v) => onchange(v)}
+  />
+{:else if fieldType.kind === 'number'}
+  <NumberField
+    {name}
+    schema={effectiveSchema}
+    {value}
+    {required}
+    {inline}
+    onchange={(v) => onchange(v)}
+  />
+{:else if fieldType.kind === 'boolean'}
+  <BooleanField
+    {name}
+    schema={effectiveSchema}
+    {value}
+    {inline}
+    onchange={(v) => onchange(v)}
+  />
+{:else if fieldType.kind === 'enum'}
+  <EnumField
+    {name}
+    schema={effectiveSchema}
+    {value}
+    {required}
+    {inline}
+    options={fieldType.options}
+    onchange={(v) => onchange(v)}
+  />
+{:else if fieldType.kind === 'date'}
+  <DateField
+    {name}
+    schema={effectiveSchema}
+    {value}
+    {required}
+    {inline}
+    onchange={(v) => onchange(v)}
+  />
+{:else if fieldType.kind === 'array'}
+  <ArrayField {name} {schema} {value} {required} {onchange} />
+{:else if fieldType.kind === 'object'}
+  <ObjectField {name} {schema} {value} {required} {onchange} {inline} />
+{/if}