@aiaiai-pt/design-system 0.45.0 → 0.46.0

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/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>;

package/components/MultiSelectCombobox.svelte

@@ -0,0 +1,140 @@
+<!--
+  @component MultiSelectCombobox
+
+  Multi-value picking: removable Tag chips over a search-to-add Combobox
+  (the Carbon MultiSelect / Polaris tag-combobox pattern). Presentation-only:
+  the parent owns the selection list AND the async item source — the widget
+  never holds the selection in its input (a single-pick replace of a
+  multi-value field is impossible by construction).
+
+  @example
+  <MultiSelectCombobox
+    label="INSPECTORS"
+    items={searchResults}
+    selected={[{ value: 'u-1', label: 'Ana Silva' }]}
+    onsearch={(q) => search(q)}
+    onadd={(value) => add(value)}
+    onremove={(value) => remove(value)}
+  />
+-->
+<script module>
+  let _mscUid = 0;
+</script>
+
+<script>
+  /**
+   * @typedef {{ value: string, label: string, group?: string, description?: string }} ComboboxItem
+   */
+
+  import Combobox from './Combobox.svelte';
+  import Tag from './Tag.svelte';
+
+  let {
+    /** @type {ComboboxItem[]} — the search-result pool (parent-owned; async via onsearch) */
+    items = [],
+    /** @type {ComboboxItem[]} — the current selection, WITH display labels */
+    selected = [],
+    /** @type {string | undefined} */
+    label = undefined,
+    /** @type {string | undefined} */
+    placeholder = 'Search...',
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {boolean} */
+    loading = false,
+    /** @type {string | undefined} */
+    error = undefined,
+    /** @type {string | undefined} */
+    help = undefined,
+    /** @type {boolean} */
+    required = false,
+    /** @type {string} */
+    size = 'md',
+    /** @type {((value: string) => void) | undefined} — a NEW value was picked */
+    onadd = undefined,
+    /** @type {((value: string) => void) | undefined} — a chip was removed */
+    onremove = undefined,
+    /** @type {((query: string) => void) | undefined} — async search; parent owns items */
+    onsearch = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const mscId = `msc-${_mscUid++}`;
+
+  // The draft is WIDGET-internal: it exists only to drive the Combobox and is
+  // cleared after every pick, so the input never displays a "selection".
+  let draft = $state('');
+
+  // An already-picked value never re-offers (no double-add by construction).
+  const available = $derived(
+    items.filter((item) => !selected.some((entry) => entry.value === item.value)),
+  );
+
+  /** @param {string} value */
+  function handlePick(value) {
+    if (value && !selected.some((entry) => entry.value === value)) {
+      onadd?.(value);
+    }
+    draft = '';
+  }
+</script>
+
+<div
+  class="msc {className}"
+  role="group"
+  aria-labelledby={label ? `${mscId}-label` : undefined}
+  {...rest}
+>
+  {#if label}
+    <span id={`${mscId}-label`} class="msc-label"
+      >{label}{required ? ' (required)' : ''}</span
+    >
+  {/if}
+
+  {#if selected.length}
+    <div class="msc-chips">
+      {#each selected as entry (entry.value)}
+        <Tag removable={!disabled} onremove={() => onremove?.(entry.value)}>
+          {entry.label}
+        </Tag>
+      {/each}
+    </div>
+  {/if}
+
+  <Combobox
+    items={available}
+    bind:value={draft}
+    {placeholder}
+    {disabled}
+    {loading}
+    {error}
+    {help}
+    {size}
+    onsearch={onsearch}
+    onchange={handlePick}
+  />
+</div>
+
+<style>
+  .msc {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    width: 100%;
+  }
+
+  .msc-label {
+    font-family: var(--input-label-font);
+    font-size: var(--input-label-size);
+    letter-spacing: var(--input-label-tracking);
+    color: var(--input-label-color);
+  }
+
+  .msc-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+  }
+</style>

package/components/MultiSelectCombobox.svelte.d.ts

@@ -0,0 +1,62 @@
+export default MultiSelectCombobox;
+export type ComboboxItem = {
+    value: string;
+    label: string;
+    group?: string;
+    description?: string;
+};
+type MultiSelectCombobox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * MultiSelectCombobox
+ *
+ * Multi-value picking: removable Tag chips over a search-to-add Combobox
+ * (the Carbon MultiSelect / Polaris tag-combobox pattern). Presentation-only:
+ * the parent owns the selection list AND the async item source — the widget
+ * never holds the selection in its input (a single-pick replace of a
+ * multi-value field is impossible by construction).
+ *
+ * @example
+ * <MultiSelectCombobox
+ *   label="INSPECTORS"
+ *   items={searchResults}
+ *   selected={[{ value: 'u-1', label: 'Ana Silva' }]}
+ *   onsearch={(q) => search(q)}
+ *   onadd={(value) => add(value)}
+ *   onremove={(value) => remove(value)}
+ * />
+ */
+declare const MultiSelectCombobox: import("svelte").Component<{
+    items?: any[];
+    selected?: any[];
+    label?: any;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    error?: any;
+    help?: any;
+    required?: boolean;
+    size?: string;
+    onadd?: any;
+    onremove?: any;
+    onsearch?: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    items?: any[];
+    selected?: any[];
+    label?: any;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    error?: any;
+    help?: any;
+    required?: boolean;
+    size?: string;
+    onadd?: any;
+    onremove?: any;
+    onsearch?: any;
+    class?: string;
+} & Record<string, any>;

package/components/Tag.svelte

@@ -33,7 +33,11 @@
     {@render children()}
   {/if}
   {#if removable}
+    <!-- type="button": inside a <form> (e.g. ActionFormRenderer m2m chips) a
+         typeless button is a SUBMIT button — removing a chip must never
+         submit the form. -->
     <button
+      type="button"
       class="tag-remove"
       aria-label="Remove tag"
       onclick={(e) => {

package/components/action-form-renderer-layouts.d.ts

@@ -47,9 +47,12 @@ export interface LayoutSection {
 /**
  * #634 S3 — whether a parameter's cell spans the full row inside a
  * `columns: 2` section. An explicit `span: "full"` on the parameter wins;
- * wide types clamp to full regardless; everything else flows half-width
- * (so a bare `columns: 2` declaration visibly two-columns its fields).
- * In a single-column section every cell is trivially full.
+ * wide WIDGET KINDS (map canvas, upload list, textarea, json editor —
+ * resolved widget-first per #36, so both the field summary's `widget` and
+ * a bare legacy `type` clamp) go full regardless; everything else flows
+ * half-width (so a bare `columns: 2` declaration visibly two-columns its
+ * fields). In a single-column section every cell is trivially full.
+ * Mirrors the CRUD form-surface compilers' FULL_WIDTH_WIDGETS clamp.
  */
 export declare function fieldSpansFull(parameter: Record<string, unknown>, columns: number | undefined): boolean;
 import type { Snippet } from "svelte";