@aiaiai-pt/design-system 0.44.1 → 0.46.0

package/components/ActionFormRenderer.svelte.d.ts

@@ -22,6 +22,10 @@ type ActionSchema = {
     sections?: Array<{
         key?: string;
         label?: string;
+        order?: number | null;
+        columns?: number | null;
+        /** Read defensively (hosts carry concrete precondition types). */
+        visible_when?: unknown;
         parameters?: Entity[];
     }>;
     parameters?: Entity[];
@@ -65,6 +69,17 @@ interface Props {
      *  transport/auth/tenancy (the uploadFile seam pattern — the DS stays
      *  presentation-only). Omitted → object_reference params render disabled. */
     searchEntities?: (typeCode: string, query: string, filter?: Record<string, string>) => Promise<SelectOption[]>;
+    /** Edit-time label hydration for relationship params (#34): receives the
+     *  target entity type code and the currently-linked ids, returns
+     *  `{value, label}` items so the picker renders labels, never raw ids.
+     *  Same philosophy as searchEntities — the CONSUMER owns transport/auth;
+     *  omitted → the picker falls back to showing the ids. Best-effort: a
+     *  failed hydration never blocks the form. */
+    hydrateEntities?: (typeCode: string, ids: string[]) => Promise<SelectOption[]>;
+    /** #41 — per-field server-error binding: `{param_key: message}` rendered
+     *  as each field's inline error (the V2a adapter re-binds proxy 4xx field
+     *  errors here). Display-only — the HOST owns when errors set and clear. */
+    fieldErrors?: Record<string, string>;
     /** Environment-specific captcha (e.g. Turnstile), rendered above the button
      *  in submit modes. */
     captcha?: Snippet;

package/components/DateRangePicker.svelte.d.ts

@@ -35,7 +35,7 @@ declare const DateRangePicker: import("svelte").Component<{
     onchange?: any;
     id?: any;
     class?: string;
-} & Record<string, any>, {}, "start" | "end">;
+} & Record<string, any>, {}, "end" | "start">;
 type $$ComponentProps = {
     start?: any;
     end?: any;

package/components/JsonEditor.svelte

@@ -0,0 +1,152 @@
+<!--
+  @component JsonEditor
+
+  JSON field over the DS CodeEditor (#38, atelier#669 V1) with an explicit
+  invalid-state contract: invalid text NEVER silently drops or half-parses —
+  the field surfaces the parse error, emits NOTHING, and reports invalidity
+  through `oninvalid` so the host form can block submit. Empty and `{}` are
+  distinct (empty → null).
+
+  @example
+  <JsonEditor
+    label="METADATA"
+    value={{ kind: 'sensor' }}
+    onchange={(v) => save(v)}
+    oninvalid={(message) => (blocked = message !== null)}
+  />
+-->
+<script module>
+  let _jsonEditorUid = 0;
+</script>
+
+<script>
+  import CodeEditor from './CodeEditor.svelte';
+  import { evaluateJsonDraft, formatJsonValue } from './json-editor-contract';
+
+  let {
+    /** @type {unknown} — the current JSON value (object/array/scalar/null) */
+    value = null,
+    /** @type {string | undefined} */
+    label = undefined,
+    /** @type {string | undefined} */
+    help = undefined,
+    /** @type {string | undefined} — EXTERNAL (server) error; parse errors
+     *  render through the same chrome automatically */
+    error = undefined,
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {boolean} */
+    readonly = false,
+    /** @type {((value: unknown) => void) | undefined} — fires ONLY on a
+     *  valid parse (or empty → null); never fires for invalid text */
+    onchange = undefined,
+    /** @type {((message: string | null) => void) | undefined} — parse-state
+     *  transitions: a message while the draft is invalid, null when it
+     *  becomes valid again. The host blocks submit while non-null. */
+    oninvalid = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const editorId = `json-editor-${_jsonEditorUid++}`;
+  const hintId = `${editorId}-hint`;
+
+  let text = $state(formatJsonValue(value));
+  let parseError = $state(/** @type {string | null} */ (null));
+
+  // Watch the CodeEditor-bound text: evaluate on every draft change. The
+  // pipeline itself is the pure json-editor-contract module (CodeMirror is
+  // not edit-drivable under jsdom, so the contract carries the test weight).
+  let lastEvaluated = text;
+  $effect(() => {
+    if (text === lastEvaluated) return;
+    lastEvaluated = text;
+    const result = evaluateJsonDraft(text);
+    if (result.ok) {
+      parseError = null;
+      oninvalid?.(null);
+      onchange?.(result.value);
+    } else {
+      parseError = result.error;
+      oninvalid?.(result.error);
+    }
+  });
+
+  const shownError = $derived(error ?? parseError ?? undefined);
+</script>
+
+<div class="json-editor {className}" {...rest}>
+  {#if label}
+    <span class="json-editor-label" id={`${editorId}-label`}>{label}</span>
+  {/if}
+  <div
+    class="json-editor-surface"
+    class:json-editor-error={!!shownError}
+    class:json-editor-disabled={disabled}
+    aria-labelledby={label ? `${editorId}-label` : undefined}
+    aria-describedby={shownError || help ? hintId : undefined}
+  >
+    <CodeEditor
+      bind:value={text}
+      language="json"
+      readonly={readonly || disabled}
+      lineNumbers={false}
+      minLines={4}
+      maxLines={16}
+    />
+  </div>
+  {#if shownError}
+    <span id={hintId} class="json-editor-error-text" role="alert">{shownError}</span>
+  {:else if help}
+    <span id={hintId} class="json-editor-help">{help}</span>
+  {/if}
+</div>
+
+<style>
+  .json-editor {
+    display: flex;
+    flex-direction: column;
+    gap: var(--input-label-gap);
+    width: 100%;
+  }
+
+  .json-editor-label {
+    font-family: var(--input-label-font);
+    font-size: var(--input-label-size);
+    letter-spacing: var(--input-label-tracking);
+    color: var(--input-label-color);
+  }
+
+  .json-editor-surface {
+    border: var(--input-border);
+    border-radius: var(--input-radius);
+    background: var(--input-bg);
+    padding: var(--space-xs);
+  }
+
+  .json-editor-surface:focus-within {
+    border: var(--input-border-focus);
+  }
+
+  .json-editor-error {
+    border-color: var(--input-error-border-color);
+  }
+
+  .json-editor-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .json-editor-help {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-help-color);
+  }
+
+  .json-editor-error-text {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-error-text);
+  }
+</style>

package/components/JsonEditor.svelte.d.ts

@@ -0,0 +1,44 @@
+export default JsonEditor;
+type JsonEditor = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * JsonEditor
+ *
+ * JSON field over the DS CodeEditor (#38, atelier#669 V1) with an explicit
+ * invalid-state contract: invalid text NEVER silently drops or half-parses —
+ * the field surfaces the parse error, emits NOTHING, and reports invalidity
+ * through `oninvalid` so the host form can block submit. Empty and `{}` are
+ * distinct (empty → null).
+ *
+ * @example
+ * <JsonEditor
+ *   label="METADATA"
+ *   value={{ kind: 'sensor' }}
+ *   onchange={(v) => save(v)}
+ *   oninvalid={(message) => (blocked = message !== null)}
+ * />
+ */
+declare const JsonEditor: import("svelte").Component<{
+    value?: any;
+    label?: any;
+    help?: any;
+    error?: any;
+    disabled?: boolean;
+    readonly?: boolean;
+    onchange?: any;
+    oninvalid?: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    value?: any;
+    label?: any;
+    help?: any;
+    error?: any;
+    disabled?: boolean;
+    readonly?: boolean;
+    onchange?: any;
+    oninvalid?: any;
+    class?: string;
+} & Record<string, any>;

package/components/LayoutStackedDefault.svelte

@@ -5,9 +5,15 @@
    * Each section is a labelled <fieldset>, parameters laid out as a
    * single-column flex column. This is the safe fallback for unknown
    * layout keys — see `resolve.ts`.
+   *
+   * #634 S3 — a section declaring `columns: 2` lays its cells on a
+   * two-column grid; `span: full` params (and wide types — geo/file)
+   * break out to the full row (the EntityFormSurface two-col precedent).
+   * Default (columns 1 / absent) keeps the single-column stack
+   * byte-identical.
    */
   import Card from "./Card.svelte";
-  import type { LayoutSection } from "./action-form-renderer-layouts";
+  import { fieldSpansFull, type LayoutSection } from "./action-form-renderer-layouts";
   import type { Snippet } from "svelte";
 
   let {
@@ -23,9 +29,16 @@
   {#each sections as section (section.name)}
     <Card variant="flat" class="section" role="group" aria-label={section.name}>
       <h4>{section.name}</h4>
-      <div class="rows">
+      <div
+        class="rows"
+        class:two-col={(section.columns ?? 1) === 2}
+        data-columns={section.columns ?? 1}
+      >
         {#each section.items as parameter}
-          <div class="field-row">
+          <div
+            class="field-row"
+            class:span-full={fieldSpansFull(parameter, section.columns)}
+          >
             {@render field(parameter)}
           </div>
         {/each}
@@ -53,6 +66,26 @@
     gap: var(--space-md);
   }
 
+  /* #634 S3 — two-column density: half-width cells flow the grid,
+     span-full cells break out to the whole row. Collapses back to one
+     column on narrow viewports (the EntityFormSurface breakpoint). */
+  .rows.two-col {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: var(--space-md);
+    row-gap: var(--space-md);
+  }
+
+  .rows.two-col .field-row.span-full {
+    grid-column: 1 / -1;
+  }
+
+  @media (max-width: 48rem) {
+    .rows.two-col {
+      grid-template-columns: 1fr;
+    }
+  }
+
   .field-row {
     display: flex;
     flex-direction: column;

package/components/LayoutStackedDefault.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { LayoutSection } from "./action-form-renderer-layouts";
+import { type LayoutSection } from "./action-form-renderer-layouts";
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
     sections: LayoutSection[];

package/components/MoneyInput.svelte

@@ -0,0 +1,219 @@
+<!--
+  @component MoneyInput
+
+  Number-semantics input with a currency affordance (#35, atelier#669 V1).
+  The WIRE value is always a raw number (or null when empty — empty and 0
+  are distinct); locale-aware currency formatting appears while the field is
+  NOT being edited; focus switches to the raw editable number.
+  Consumes --input-* tokens (mirrors Input's field chrome).
+
+  @example
+  <MoneyInput label="BUDGET" value={1234.5} onchange={(n) => save(n)} />
+
+  @example Non-default currency
+  <MoneyInput label="FEE" currency="USD" locale="en-US" />
+-->
+<script module>
+  let _moneyUid = 0;
+</script>
+
+<script>
+  let {
+    /** @type {number | null} — the raw amount; null = empty */
+    value = null,
+    /** @type {string} — ISO 4217 code for the display affordance */
+    currency = 'EUR',
+    /** @type {string | undefined} — BCP 47; defaults to the runtime locale */
+    locale = undefined,
+    /** @type {string | undefined} */
+    label = undefined,
+    /** @type {string | undefined} */
+    placeholder = undefined,
+    /** @type {string | undefined} */
+    help = undefined,
+    /** @type {string | undefined} */
+    error = undefined,
+    /** @type {'sm' | 'md' | 'lg'} */
+    size = 'md',
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {boolean} */
+    readonly = false,
+    /** @type {string | undefined} */
+    id = undefined,
+    /** @type {string | undefined} */
+    name = undefined,
+    /** @type {((value: number | null) => void) | undefined} — fires with the
+     *  RAW number (never a formatted string); null when cleared/unparseable */
+    onchange = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const fallbackId = `money-input-${_moneyUid++}`;
+  const inputId = $derived(id ?? fallbackId);
+  const hintId = $derived(`${inputId}-hint`);
+  const hasHint = $derived(!!error || !!help);
+
+  let focused = $state(false);
+  let draft = $state('');
+
+  const formatter = $derived(
+    new Intl.NumberFormat(locale, { style: 'currency', currency }),
+  );
+
+  const display = $derived(
+    focused
+      ? draft
+      : value === null || value === undefined
+        ? ''
+        : formatter.format(Number(value)),
+  );
+
+  /**
+   * Parse the operator's raw text onto a number: strips grouping spaces,
+   * accepts a comma decimal. Empty/unparseable → null (never NaN, never a
+   * silent 0 — empty and 0 stay distinct).
+   * @param {string} text
+   * @returns {number | null}
+   */
+  function parseAmount(text) {
+    const trimmed = text.trim().replace(/\s+/g, '');
+    if (!trimmed) return null;
+    const normalized =
+      trimmed.includes(',') && !trimmed.includes('.')
+        ? trimmed.replace(',', '.')
+        : trimmed;
+    const parsed = Number(normalized);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+
+  function handleFocus() {
+    if (readonly || disabled) return;
+    draft = value === null || value === undefined ? '' : String(value);
+    focused = true;
+  }
+
+  /** @param {Event} event */
+  function handleInput(event) {
+    draft = /** @type {HTMLInputElement} */ (event.currentTarget).value;
+    const parsed = parseAmount(draft);
+    value = parsed;
+    onchange?.(parsed);
+  }
+
+  function handleBlur() {
+    focused = false;
+  }
+</script>
+
+<div class="money-input input-group {className}">
+  {#if label}
+    <label class="input-label" for={inputId}>{label}</label>
+  {/if}
+
+  <input
+    id={inputId}
+    {name}
+    type="text"
+    inputmode="decimal"
+    class="input input-{size}"
+    class:input-error={!!error}
+    class:input-readonly={readonly}
+    aria-invalid={error ? true : undefined}
+    aria-describedby={hasHint ? hintId : undefined}
+    {placeholder}
+    {disabled}
+    {readonly}
+    value={display}
+    onfocus={handleFocus}
+    oninput={handleInput}
+    onblur={handleBlur}
+    autocomplete="off"
+    {...rest}
+  />
+
+  {#if error}
+    <span id={hintId} class="input-error-text" role="alert">{error}</span>
+  {:else if help}
+    <span id={hintId} class="input-help">{help}</span>
+  {/if}
+</div>
+
+<style>
+  .money-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--input-label-gap);
+    width: 100%;
+  }
+
+  .input-label {
+    font-family: var(--input-label-font);
+    font-size: var(--input-label-size);
+    letter-spacing: var(--input-label-tracking);
+    color: var(--input-label-color);
+  }
+
+  .input {
+    font-family: var(--input-font);
+    font-size: var(--input-font-size);
+    border: var(--input-border);
+    border-radius: var(--input-radius);
+    background: var(--input-bg);
+    color: var(--input-text);
+    transition: border var(--input-transition);
+    width: 100%;
+  }
+
+  .input-sm {
+    height: var(--input-sm-height);
+    padding: 0 var(--input-sm-padding-x);
+  }
+
+  .input-md {
+    height: var(--input-md-height);
+    padding: 0 var(--input-md-padding-x);
+  }
+
+  .input-lg {
+    height: var(--input-lg-height);
+    padding: 0 var(--input-lg-padding-x);
+  }
+
+  .input::placeholder {
+    color: var(--input-placeholder);
+  }
+
+  .input:focus {
+    outline: none;
+    border: var(--input-border-focus);
+  }
+
+  .input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input-readonly {
+    background: var(--color-surface-secondary);
+    cursor: default;
+  }
+
+  .input-error {
+    border-color: var(--input-error-border-color);
+  }
+
+  .input-help {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-help-color);
+  }
+
+  .input-error-text {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-error-text);
+  }
+</style>

package/components/MoneyInput.svelte.d.ts

@@ -0,0 +1,52 @@
+export default MoneyInput;
+type MoneyInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * MoneyInput
+ *
+ * Number-semantics input with a currency affordance (#35, atelier#669 V1).
+ * The WIRE value is always a raw number (or null when empty — empty and 0
+ * are distinct); locale-aware currency formatting appears while the field is
+ * NOT being edited; focus switches to the raw editable number.
+ * Consumes --input-* tokens (mirrors Input's field chrome).
+ *
+ * @example
+ * <MoneyInput label="BUDGET" value={1234.5} onchange={(n) => save(n)} />
+ *
+ * @example Non-default currency
+ * <MoneyInput label="FEE" currency="USD" locale="en-US" />
+ */
+declare const MoneyInput: import("svelte").Component<{
+    value?: any;
+    currency?: string;
+    locale?: any;
+    label?: any;
+    placeholder?: any;
+    help?: any;
+    error?: any;
+    size?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    id?: any;
+    name?: any;
+    onchange?: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    value?: any;
+    currency?: string;
+    locale?: any;
+    label?: any;
+    placeholder?: any;
+    help?: any;
+    error?: any;
+    size?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    id?: any;
+    name?: any;
+    onchange?: any;
+    class?: string;
+} & Record<string, any>;