@aiaiai-pt/design-system 0.9.0 → 0.10.1

package/components/ActionFormRenderer.svelte

@@ -0,0 +1,470 @@
+<script lang="ts">
+  // DS-internal sibling imports (this component lives in the DS now, #73 73f —
+  // converged so admin preview AND portal runtime mount the SAME renderer).
+  import Badge from "./Badge.svelte";
+  import CodeBlock from "./CodeBlock.svelte";
+  import Input from "./Input.svelte";
+  import Select from "./Select.svelte";
+  import Tag from "./Tag.svelte";
+  import {
+    buildActionPayload,
+    placementConsequenceRows as buildPlacementConsequenceRows,
+    type RendererMode,
+  } from "./action-form-renderer-payload";
+  // S7 (#27): the renderer dispatches arrangement to one of three
+  // registered layout components. The key is read from
+  // `target_config.layout_key` and validated through `resolveLayout`,
+  // so an operator-supplied string never reaches the DOM verbatim
+  // (RH#11 / R-SEC-07 / TH-08).
+  import { resolveLayout } from "./action-form-renderer-layouts";
+
+  /**
+   * The renderer treats every parameter/action/placement as a loose record
+   * (it reads optional fields defensively). It used to import the admin app's
+   * `Entity`; in the DS it carries its own structural alias so it has no app
+   * dependency. The consuming app may pass its richer `Entity` — structurally
+   * compatible.
+   */
+  type Entity = Record<string, unknown>;
+  type SelectOption = { value: string; label: string };
+  type ActionSchema = {
+    found?: boolean;
+    schema_version?: string;
+    action?: Entity | null;
+    placement?: Entity | null;
+    target?: Record<string, unknown> | null;
+    source?: Record<string, unknown> | null;
+    sections?: Array<{ key?: string; label?: string; parameters?: Entity[] }>;
+    parameters?: Entity[];
+    criteria?: Entity[];
+  };
+
+  interface Props {
+    action: Entity | null;
+    placement?: Entity | null;
+    parameters?: Entity[];
+    criteria?: Entity[];
+    mode?: RendererMode;
+    schema?: ActionSchema | null;
+  }
+
+  let {
+    action,
+    placement = null,
+    parameters = [],
+    criteria = [],
+    mode = "admin-preview",
+    schema = null,
+  }: Props = $props();
+
+  let values = $state<Record<string, unknown>>({});
+
+  const renderedAction = $derived((schema?.action as Entity | null | undefined) ?? action);
+  const renderedPlacement = $derived((schema?.placement as Entity | null | undefined) ?? placement);
+  const renderedParameters = $derived((schema?.parameters as Entity[] | undefined) ?? parameters);
+  const renderedCriteria = $derived((schema?.criteria as Entity[] | undefined) ?? criteria);
+  const orderedParameters = $derived(
+    [...renderedParameters]
+      .filter((parameter) => parameter.is_active !== false)
+      .sort((a, b) => Number(a.order ?? 0) - Number(b.order ?? 0)),
+  );
+  const visibleParameters = $derived(orderedParameters.filter((parameter) => isVisible(parameter)));
+  const hiddenOrDefaultedParameters = $derived(
+    orderedParameters.filter(
+      (parameter) =>
+        !isVisible(parameter) ||
+        (parameter.default_value !== null && parameter.default_value !== undefined),
+    ),
+  );
+  const schemaSections = $derived(schemaSectionsFromContract());
+  const sections = $derived(schemaSections ?? groupIntoSections(visibleParameters));
+  const payload = $derived(buildPayload());
+  const payloadJson = $derived(JSON.stringify(payload, null, 2));
+  const criteriaSummary = $derived(
+    renderedCriteria
+      .filter((criterion) => criterion.is_active !== false)
+      .sort((a, b) => Number(a.order ?? 0) - Number(b.order ?? 0)),
+  );
+
+  $effect(() => {
+    const next = { ...values };
+    let touched = false;
+    for (const parameter of orderedParameters) {
+      const key = parameterKey(parameter);
+      if (!key || key in next) continue;
+      next[key] = initialValue(parameter);
+      touched = true;
+    }
+    if (touched) values = next;
+  });
+
+  function parameterKey(parameter: Entity): string {
+    return String(parameter.source_field_path ?? parameter.key ?? "");
+  }
+
+  function parameterType(parameter: Entity): string {
+    return String(parameter.type ?? "string");
+  }
+
+  function isVisible(parameter: Entity): boolean {
+    const visibility = parameter.visibility;
+    if (visibility && typeof visibility === "object" && !Array.isArray(visibility)) {
+      return (visibility as Record<string, unknown>).visible !== false;
+    }
+    return true;
+  }
+
+  function sectionName(parameter: Entity): string {
+    const visibility = parameter.visibility;
+    if (visibility && typeof visibility === "object" && !Array.isArray(visibility)) {
+      const section = (visibility as Record<string, unknown>).section;
+      if (section) return String(section);
+    }
+    const uiSchema = parameter.ui_schema;
+    if (uiSchema && typeof uiSchema === "object" && !Array.isArray(uiSchema)) {
+      const section = (uiSchema as Record<string, unknown>).section;
+      if (section) return String(section);
+    }
+    return "Details";
+  }
+
+  function groupIntoSections(items: Entity[]): Array<{ name: string; items: Entity[] }> {
+    const byName = new Map<string, Entity[]>();
+    for (const parameter of items) {
+      const name = sectionName(parameter);
+      byName.set(name, [...(byName.get(name) ?? []), parameter]);
+    }
+    return [...byName.entries()].map(([name, sectionItems]) => ({ name, items: sectionItems }));
+  }
+
+  function schemaSectionsFromContract(): Array<{ name: string; items: Entity[] }> | null {
+    if (!Array.isArray(schema?.sections)) return null;
+    const next = schema.sections
+      .map((section) => {
+        const items = Array.isArray(section.parameters)
+          ? section.parameters
+              .filter((parameter) => parameter.is_active !== false && isVisible(parameter))
+              .sort((a, b) => Number(a.order ?? 0) - Number(b.order ?? 0))
+          : [];
+        return { name: String(section.label ?? section.key ?? "Details"), items };
+      })
+      .filter((section) => section.items.length);
+    return next.length ? next : null;
+  }
+
+  function enumOptions(parameter: Entity): SelectOption[] {
+    let options: unknown[] = Array.isArray(parameter.options) ? parameter.options : [];
+    if (!options.length) {
+      const constraints = Array.isArray(parameter.constraints) ? parameter.constraints : [];
+      const oneOf = constraints.find((constraint) => {
+        if (!constraint || typeof constraint !== "object") return false;
+        const type = (constraint as Record<string, unknown>).type;
+        return type === "oneOf" || type === "one_of";
+      }) as Record<string, unknown> | undefined;
+      options = Array.isArray(oneOf?.values) ? oneOf.values : [];
+    }
+    return options
+      .map((option: unknown) => {
+        if (option && typeof option === "object") {
+          const row = option as Record<string, unknown>;
+          const value = String(row.value ?? row.key ?? "");
+          return value ? { value, label: String(row.label ?? row.name ?? value) } : null;
+        }
+        const value = String(option ?? "");
+        return value ? { value, label: value } : null;
+      })
+      .filter((option): option is SelectOption => !!option);
+  }
+
+  function initialValue(parameter: Entity): unknown {
+    if (parameter.default_value !== null && parameter.default_value !== undefined) {
+      return parameter.default_value;
+    }
+    const type = parameterType(parameter);
+    if (type === "bool" || type === "boolean") return false;
+    if (type === "number" || type === "integer") return "";
+    if (type === "enum" || type === "select") return enumOptions(parameter)[0]?.value ?? "";
+    return "";
+  }
+
+  function setValue(key: string, value: unknown) {
+    values = { ...values, [key]: value };
+  }
+
+  function visibleValueBag(): Record<string, unknown> {
+    const bag: Record<string, unknown> = {};
+    for (const parameter of orderedParameters) {
+      const key = parameterKey(parameter);
+      if (!key) continue;
+      bag[key] = values[key] ?? initialValue(parameter);
+    }
+    return bag;
+  }
+
+  function targetConfig(): Record<string, unknown> {
+    const schemaTarget = schema?.target;
+    if (schemaTarget && typeof schemaTarget === "object" && !Array.isArray(schemaTarget)) {
+      return schemaTarget as Record<string, unknown>;
+    }
+    const value = renderedPlacement?.target_config;
+    return value && typeof value === "object" && !Array.isArray(value)
+      ? (value as Record<string, unknown>)
+      : {};
+  }
+
+  function sourceSchema(): Record<string, unknown> {
+    const schemaSource = schema?.source;
+    if (schemaSource && typeof schemaSource === "object" && !Array.isArray(schemaSource)) {
+      return schemaSource as Record<string, unknown>;
+    }
+    const value = renderedPlacement?.source_schema;
+    return value && typeof value === "object" && !Array.isArray(value)
+      ? (value as Record<string, unknown>)
+      : {};
+  }
+
+  function buildPayload(): Record<string, unknown> {
+    return buildActionPayload({
+      action: renderedAction ?? null,
+      placement: renderedPlacement ?? null,
+      targetConfig: targetConfig(),
+      sourceSchema: sourceSchema(),
+      rawValues: visibleValueBag(),
+      schemaVersion: schema?.schema_version ?? null,
+      mode,
+    }) as unknown as Record<string, unknown>;
+  }
+
+  function placementConsequenceRows(): Array<{ label: string; value: string }> {
+    return buildPlacementConsequenceRows({
+      placement: renderedPlacement ?? null,
+      targetConfig: targetConfig(),
+      sourceSchema: sourceSchema(),
+      mode,
+    });
+  }
+
+  // S7 (#27): resolve the layout component from target_config.layout_key.
+  // Unknown / null / typo'd keys collapse to stacked-default; the
+  // returned `key` is one of three known literals safe to render as
+  // `data-layout={resolvedLayout.key}` (TH-08 mitigation).
+  const resolvedLayout = $derived(resolveLayout(targetConfig().layout_key));
+</script>
+
+{#snippet fieldRow(rawParameter: Record<string, unknown>)}
+  {@const parameter = rawParameter as Entity}
+  {@const key = parameterKey(parameter)}
+  {@const type = parameterType(parameter)}
+  {#if type === "enum" || type === "select" || enumOptions(parameter).length}
+    <Select
+      label={String(parameter.label ?? key)}
+      name={key}
+      value={String(values[key] ?? initialValue(parameter) ?? "")}
+      options={enumOptions(parameter)}
+      placeholder="Select value"
+      onchange={(value: string) => setValue(key, value)}
+    />
+  {:else if type === "number" || type === "integer"}
+    <Input
+      label={String(parameter.label ?? key)}
+      name={key}
+      type="number"
+      value={String(values[key] ?? "")}
+      oninput={(event: Event) => {
+        const value = (event.target as HTMLInputElement).value;
+        setValue(key, value === "" ? "" : Number(value));
+      }}
+    />
+  {:else if type === "bool" || type === "boolean"}
+    <Select
+      label={String(parameter.label ?? key)}
+      name={key}
+      value={values[key] ? "true" : "false"}
+      options={[
+        { value: "true", label: "Yes" },
+        { value: "false", label: "No" },
+      ]}
+      onchange={(value: string) => setValue(key, value === "true")}
+    />
+  {:else}
+    <Input
+      label={String(parameter.label ?? key)}
+      name={key}
+      value={String(values[key] ?? "")}
+      oninput={(event: Event) => setValue(key, (event.target as HTMLInputElement).value)}
+    />
+  {/if}
+  {#if mode === "public-submit"}
+    <!-- Citizen-facing: just a quiet required hint, no operator type debug. -->
+    {#if parameter.required}<p class="field-meta">Required</p>{/if}
+  {:else}
+    <p class="field-meta">
+      {String(parameter.required ? "Required" : "Optional")} / {type}
+    </p>
+  {/if}
+{/snippet}
+
+<div class="renderer" data-testid={`action-form-renderer-${mode}`} data-layout={resolvedLayout.key}>
+  <div class="renderer-header">
+    <div>
+      <!-- The placement-preview eyebrow + surface badge are operator chrome —
+           hidden in public-submit so a citizen sees a clean form title. -->
+      {#if mode !== "public-submit"}
+        <p class="eyebrow">Placement preview</p>
+      {/if}
+      <h3>{String(renderedAction?.label ?? renderedAction?.key ?? "Select an action")}</h3>
+    </div>
+    {#if mode !== "public-submit"}
+      <Badge variant={renderedPlacement ? "info" : "neutral"}>
+        {String(renderedPlacement?.surface ?? "No placement")}
+      </Badge>
+    {/if}
+  </div>
+
+  {#if !renderedAction}
+    <p class="muted">Select an action to preview its placement-aware form contract.</p>
+  {:else if orderedParameters.length === 0}
+    <p class="muted">This action has no fields yet.</p>
+  {:else}
+    {@const Layout = resolvedLayout.component}
+    <form class="rendered-form">
+      <Layout {sections} field={fieldRow} />
+    </form>
+  {/if}
+
+  {#if mode === "admin-preview"}
+    <div class="admin-preview">
+      <section class="preview-block">
+        <h4>Hidden and defaulted fields</h4>
+        {#if hiddenOrDefaultedParameters.length}
+          <div class="tag-grid">
+            {#each hiddenOrDefaultedParameters as parameter (parameterKey(parameter))}
+              <Tag>
+                {String(parameter.key)}
+                {#if !isVisible(parameter)}
+                  / hidden{/if}
+                {#if parameter.default_value !== null && parameter.default_value !== undefined}
+                  / defaulted
+                {/if}
+              </Tag>
+            {/each}
+          </div>
+        {:else}
+          <p class="muted">No hidden or defaulted fields declared.</p>
+        {/if}
+      </section>
+
+      <section class="preview-block">
+        <h4>Placement consequences</h4>
+        <dl class="consequence-list">
+          {#each placementConsequenceRows() as row}
+            <div>
+              <dt>{row.label}</dt>
+              <dd>{row.value}</dd>
+            </div>
+          {/each}
+        </dl>
+      </section>
+
+      <section class="preview-block">
+        <h4>Validation used by server</h4>
+        {#if criteriaSummary.length}
+          <div class="tag-grid">
+            {#each criteriaSummary as criterion (String(criterion.id))}
+              <Tag>{String(criterion.criteria_type)} / {String(criterion.key)}</Tag>
+            {/each}
+          </div>
+        {:else}
+          <p class="muted">No submission criteria configured yet.</p>
+        {/if}
+      </section>
+
+      <section class="preview-block">
+        <h4>Normalized payload</h4>
+        <CodeBlock code={payloadJson} language="json" lineNumbers={false} copyable={false} />
+      </section>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .renderer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+  }
+
+  .renderer-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: var(--space-md);
+  }
+
+  .renderer-header h3 {
+    margin: 0;
+  }
+
+  .eyebrow {
+    margin: 0 0 var(--space-xs);
+    color: var(--color-text-muted);
+    font-size: var(--type-caption-size);
+    /* #63 typography — uppercase reserved for code tokens. */
+  }
+
+  .muted,
+  .field-meta {
+    color: var(--color-text-muted);
+  }
+
+  .rendered-form,
+  .admin-preview,
+  .preview-block {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+
+  .preview-block h4 {
+    margin: 0;
+    font-size: var(--type-body-size);
+  }
+
+  .field-meta {
+    margin: 0;
+    font-size: var(--type-caption-size);
+  }
+
+  .preview-block {
+    padding-top: var(--space-md);
+    border-top: var(--elevation-border);
+  }
+
+  .tag-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+  }
+
+  .consequence-list {
+    display: grid;
+    gap: var(--space-sm);
+    margin: 0;
+  }
+
+  .consequence-list div {
+    display: grid;
+    grid-template-columns: minmax(calc(var(--space-4xl) * 2), 0.4fr) minmax(0, 1fr);
+    gap: var(--space-md);
+  }
+
+  .consequence-list dt {
+    color: var(--color-text-muted);
+  }
+
+  .consequence-list dd {
+    margin: 0;
+    word-break: break-word;
+  }
+</style>

package/components/ActionFormRenderer.svelte.d.ts

@@ -0,0 +1,35 @@
+import { type RendererMode } from "./action-form-renderer-payload";
+/**
+ * The renderer treats every parameter/action/placement as a loose record
+ * (it reads optional fields defensively). It used to import the admin app's
+ * `Entity`; in the DS it carries its own structural alias so it has no app
+ * dependency. The consuming app may pass its richer `Entity` — structurally
+ * compatible.
+ */
+type Entity = Record<string, unknown>;
+type ActionSchema = {
+    found?: boolean;
+    schema_version?: string;
+    action?: Entity | null;
+    placement?: Entity | null;
+    target?: Record<string, unknown> | null;
+    source?: Record<string, unknown> | null;
+    sections?: Array<{
+        key?: string;
+        label?: string;
+        parameters?: Entity[];
+    }>;
+    parameters?: Entity[];
+    criteria?: Entity[];
+};
+interface Props {
+    action: Entity | null;
+    placement?: Entity | null;
+    parameters?: Entity[];
+    criteria?: Entity[];
+    mode?: RendererMode;
+    schema?: ActionSchema | null;
+}
+declare const ActionFormRenderer: import("svelte").Component<Props, {}, "">;
+type ActionFormRenderer = ReturnType<typeof ActionFormRenderer>;
+export default ActionFormRenderer;

package/components/LayoutCompactMobile.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  /**
+   * Compact-mobile layout (#27 / S7).
+   *
+   * Sections collapse into a single tight column with reduced padding
+   * and smaller meta. Used by `public_submit` placements that target
+   * narrow viewports (citizen mobile portal). Structurally a single
+   * column like stacked-default, but distinguishable by reduced gap +
+   * absent section card chrome — section labels become inline headings
+   * so the form reads denser on mobile.
+   */
+  import type { LayoutSection } from "./action-form-renderer-layouts";
+  import type { Snippet } from "svelte";
+
+  let {
+    sections,
+    field,
+  }: {
+    sections: LayoutSection[];
+    field: Snippet<[Record<string, unknown>]>;
+  } = $props();
+</script>
+
+<div class="layout-compact" data-layout-shape="compact">
+  {#each sections as section (section.name)}
+    <section class="compact-section" aria-label={section.name}>
+      <h5>{section.name}</h5>
+      {#each section.items as parameter}
+        <div class="field-row">
+          {@render field(parameter)}
+        </div>
+      {/each}
+    </section>
+  {/each}
+</div>
+
+<style>
+  /* Single tight column — distinguishable from stacked-default by:
+     1. No Card chrome around sections (HTML <section>, not DS Card),
+     2. Compact gap and padding,
+     3. <h5> heading not <h4>. */
+  .layout-compact {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+
+  .compact-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    padding: var(--space-xs) 0;
+    border-bottom: var(--elevation-border);
+  }
+
+  .compact-section:last-child {
+    border-bottom: 0;
+  }
+
+  .compact-section h5 {
+    margin: 0;
+    font-size: var(--type-caption-size);
+    /* #63 typography — uppercase reserved for code tokens. */
+    color: var(--color-text-muted);
+  }
+
+  .field-row {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+</style>

package/components/LayoutCompactMobile.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+   * Compact-mobile layout (#27 / S7).
+   *
+   * Sections collapse into a single tight column with reduced padding
+   * and smaller meta. Used by `public_submit` placements that target
+   * narrow viewports (citizen mobile portal). Structurally a single
+   * column like stacked-default, but distinguishable by reduced gap +
+   * absent section card chrome — section labels become inline headings
+   * so the form reads denser on mobile.
+   */
+import type { LayoutSection } from "./action-form-renderer-layouts";
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    sections: LayoutSection[];
+    field: Snippet<[Record<string, unknown>]>;
+};
+declare const LayoutCompactMobile: import("svelte").Component<$$ComponentProps, {}, "">;
+type LayoutCompactMobile = ReturnType<typeof LayoutCompactMobile>;
+export default LayoutCompactMobile;

package/components/LayoutInlineRow.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  /**
+   * Inline-row layout (#27 / S7).
+   *
+   * Parameters in each section are arranged in a single horizontal row
+   * using auto-fit grid, suitable for compact admin runtime forms
+   * (one-line filters, narrow inline panels). This is structurally
+   * distinct from stacked-default — same parameter set produces a grid
+   * with multiple columns instead of a vertical column. The S7
+   * acceptance asserts the structural difference.
+   */
+  import Card from "./Card.svelte";
+  import type { LayoutSection } from "./action-form-renderer-layouts";
+  import type { Snippet } from "svelte";
+
+  let {
+    sections,
+    field,
+  }: {
+    sections: LayoutSection[];
+    field: Snippet<[Record<string, unknown>]>;
+  } = $props();
+</script>
+
+<div class="layout-inline" data-layout-shape="inline">
+  {#each sections as section (section.name)}
+    <Card variant="flat" class="section" role="group" aria-label={section.name}>
+      <h4>{section.name}</h4>
+      <div class="row">
+        {#each section.items as parameter}
+          <div class="field-cell">
+            {@render field(parameter)}
+          </div>
+        {/each}
+      </div>
+    </Card>
+  {/each}
+</div>
+
+<style>
+  .layout-inline {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+
+  .layout-inline :global(.section) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+
+  /* The defining shape — auto-fit columns, NOT a vertical stack. The
+     same parameter set renders as a multi-column grid here vs. one
+     column in stacked-default. */
+  .row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    gap: var(--space-md);
+    align-items: end;
+  }
+
+  .field-cell {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    min-width: 0;
+  }
+
+  h4 {
+    margin: 0;
+    font-size: var(--type-body-size);
+  }
+</style>

package/components/LayoutInlineRow.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { LayoutSection } from "./action-form-renderer-layouts";
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    sections: LayoutSection[];
+    field: Snippet<[Record<string, unknown>]>;
+};
+declare const LayoutInlineRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type LayoutInlineRow = ReturnType<typeof LayoutInlineRow>;
+export default LayoutInlineRow;

package/components/LayoutStackedDefault.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  /**
+   * Default vertical-stack layout for the action renderer (#27 / S7).
+   *
+   * 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`.
+   */
+  import Card from "./Card.svelte";
+  import type { LayoutSection } from "./action-form-renderer-layouts";
+  import type { Snippet } from "svelte";
+
+  let {
+    sections,
+    field,
+  }: {
+    sections: LayoutSection[];
+    field: Snippet<[Record<string, unknown>]>;
+  } = $props();
+</script>
+
+<div class="layout-stacked" data-layout-shape="stacked">
+  {#each sections as section (section.name)}
+    <Card variant="flat" class="section" role="group" aria-label={section.name}>
+      <h4>{section.name}</h4>
+      <div class="rows">
+        {#each section.items as parameter}
+          <div class="field-row">
+            {@render field(parameter)}
+          </div>
+        {/each}
+      </div>
+    </Card>
+  {/each}
+</div>
+
+<style>
+  .layout-stacked {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+
+  .layout-stacked :global(.section) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+
+  .rows {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+
+  .field-row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+  }
+
+  h4 {
+    margin: 0;
+    font-size: var(--type-body-size);
+  }
+</style>

package/components/LayoutStackedDefault.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { LayoutSection } from "./action-form-renderer-layouts";
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    sections: LayoutSection[];
+    field: Snippet<[Record<string, unknown>]>;
+};
+declare const LayoutStackedDefault: import("svelte").Component<$$ComponentProps, {}, "">;
+type LayoutStackedDefault = ReturnType<typeof LayoutStackedDefault>;
+export default LayoutStackedDefault;

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

@@ -0,0 +1,53 @@
+/**
+ * Layout dispatcher for the action renderer (#27 / S7).
+ *
+ * `target_config.layout_key` selects which arrangement an
+ * `ActionFormRenderer` uses to lay out its parameter rows. This module
+ * is the single source of truth for the registry. Anything outside the
+ * registry — null, undefined, empty string, "wizard", a typo, an
+ * operator's free-text — falls back to `stacked-default`.
+ *
+ * Locked by spec rabbit hole #11:
+ *   - Exactly three entries: stacked-default, inline-row, compact-mobile.
+ *     Adding wizard / two-column is a separate epic.
+ *   - Frontend-only, no ontology entity. Storage is `target_config.layout_key`.
+ *
+ * Locked by threat model TH-08 (R-SEC-07):
+ *   - The operator can write any string into `target_config.layout_key`.
+ *     The renderer MUST NOT interpolate that string into a `class=`,
+ *     `data-*`, or `style` attribute. Instead, it consults this
+ *     dispatcher and uses the registry's known-good `key` (one of three
+ *     literals) when emitting the `data-layout` attribute. Unknown
+ *     keys collapse to `stacked-default`, so a malicious or misspelled
+ *     value never reaches the DOM.
+ */
+import type { Component } from "svelte";
+/** Public string set. The output of `resolveLayout(...).key` is always
+ *  one of these three values, regardless of input. Tests assert this. */
+export type LayoutKey = "stacked-default" | "inline-row" | "compact-mobile";
+export interface LayoutEntry {
+    /** The known-good key. Safe to render as `data-layout={key}`. */
+    key: LayoutKey;
+    /** Svelte component the renderer mounts for this layout. */
+    component: Component<LayoutComponentProps>;
+}
+export interface LayoutSection {
+    name: string;
+    items: Array<Record<string, unknown>>;
+}
+import type { Snippet } from "svelte";
+export interface LayoutComponentProps {
+    sections: LayoutSection[];
+    /** Snippet that renders one parameter's input control. The renderer
+     *  passes this in so per-field rendering stays in one place — layouts
+     *  decide arrangement, not control type. */
+    field: Snippet<[Record<string, unknown>]>;
+}
+/** Type guard for known keys. Exported so consumers can branch on
+ *  membership without re-implementing the literal set. */
+export declare function isKnownLayoutKey(value: unknown): value is LayoutKey;
+/** Resolve any input to a registry entry. Unknown / null / undefined /
+ *  non-string / typo'd values fall through to `stacked-default`. */
+export declare function resolveLayout(key: unknown): LayoutEntry;
+/** All known keys, in registry order. Useful for picker UIs. */
+export declare const LAYOUT_KEYS: readonly LayoutKey[];

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

@@ -0,0 +1,82 @@
+/**
+ * Layout dispatcher for the action renderer (#27 / S7).
+ *
+ * `target_config.layout_key` selects which arrangement an
+ * `ActionFormRenderer` uses to lay out its parameter rows. This module
+ * is the single source of truth for the registry. Anything outside the
+ * registry — null, undefined, empty string, "wizard", a typo, an
+ * operator's free-text — falls back to `stacked-default`.
+ *
+ * Locked by spec rabbit hole #11:
+ *   - Exactly three entries: stacked-default, inline-row, compact-mobile.
+ *     Adding wizard / two-column is a separate epic.
+ *   - Frontend-only, no ontology entity. Storage is `target_config.layout_key`.
+ *
+ * Locked by threat model TH-08 (R-SEC-07):
+ *   - The operator can write any string into `target_config.layout_key`.
+ *     The renderer MUST NOT interpolate that string into a `class=`,
+ *     `data-*`, or `style` attribute. Instead, it consults this
+ *     dispatcher and uses the registry's known-good `key` (one of three
+ *     literals) when emitting the `data-layout` attribute. Unknown
+ *     keys collapse to `stacked-default`, so a malicious or misspelled
+ *     value never reaches the DOM.
+ */
+import type { Component } from "svelte";
+
+import LayoutCompactMobile from "./LayoutCompactMobile.svelte";
+import LayoutInlineRow from "./LayoutInlineRow.svelte";
+import LayoutStackedDefault from "./LayoutStackedDefault.svelte";
+
+/** Public string set. The output of `resolveLayout(...).key` is always
+ *  one of these three values, regardless of input. Tests assert this. */
+export type LayoutKey = "stacked-default" | "inline-row" | "compact-mobile";
+
+export interface LayoutEntry {
+  /** The known-good key. Safe to render as `data-layout={key}`. */
+  key: LayoutKey;
+  /** Svelte component the renderer mounts for this layout. */
+  component: Component<LayoutComponentProps>;
+}
+
+export interface LayoutSection {
+  name: string;
+  items: Array<Record<string, unknown>>;
+}
+
+import type { Snippet } from "svelte";
+
+export interface LayoutComponentProps {
+  sections: LayoutSection[];
+  /** Snippet that renders one parameter's input control. The renderer
+   *  passes this in so per-field rendering stays in one place — layouts
+   *  decide arrangement, not control type. */
+  field: Snippet<[Record<string, unknown>]>;
+}
+
+/** The registry. Order is the order shown to operators in the
+ *  AddPlacementPanel select; the first entry is the default. */
+const REGISTRY: Record<LayoutKey, Component<LayoutComponentProps>> = {
+  "stacked-default": LayoutStackedDefault as unknown as Component<LayoutComponentProps>,
+  "inline-row": LayoutInlineRow as unknown as Component<LayoutComponentProps>,
+  "compact-mobile": LayoutCompactMobile as unknown as Component<LayoutComponentProps>,
+};
+
+const DEFAULT_KEY: LayoutKey = "stacked-default";
+
+/** Type guard for known keys. Exported so consumers can branch on
+ *  membership without re-implementing the literal set. */
+export function isKnownLayoutKey(value: unknown): value is LayoutKey {
+  return typeof value === "string" && value in REGISTRY;
+}
+
+/** Resolve any input to a registry entry. Unknown / null / undefined /
+ *  non-string / typo'd values fall through to `stacked-default`. */
+export function resolveLayout(key: unknown): LayoutEntry {
+  if (isKnownLayoutKey(key)) {
+    return { key, component: REGISTRY[key] };
+  }
+  return { key: DEFAULT_KEY, component: REGISTRY[DEFAULT_KEY] };
+}
+
+/** All known keys, in registry order. Useful for picker UIs. */
+export const LAYOUT_KEYS: readonly LayoutKey[] = Object.keys(REGISTRY) as LayoutKey[];

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

@@ -0,0 +1,90 @@
+/**
+ * Builds the normalized action payload that ActionFormRenderer renders in
+ * its `admin-preview` mode and that any consumer (admin runtime, public
+ * portal, Open311 adapter, future apps) sees as the canonical shape.
+ *
+ * S1 (#27) — generic target shape; no domain-specific keys. The previous
+ * `occurrence: { occurrence_type, organization_id }` block has been
+ * replaced with `target: { model, scope, id }`. `target.scope` carries
+ * everything from the placement's `target_config` minus the `model` and
+ * `id` keys (which become first-class). The BFF
+ * `_normalized_submission_preview` mirrors this contract.
+ *
+ * Pure function: takes resolved inputs (action, placement, target_config,
+ * source_schema, raw_values, mode), returns the canonical payload. The
+ * Svelte component owns the reactive plumbing; this module owns the shape.
+ */
+export type RendererMode = "admin-preview" | "admin-execute" | "public-submit" | "adapter-preview";
+/**
+ * Minimal action/placement references the payload builder reads. Callers may
+ * pass a full ontology Entity; this narrower shape is what we actually rely
+ * on, so test stubs don't need to populate Entity's `created_at`/`updated_at`.
+ */
+export interface ActionRef {
+    id?: string | null;
+    key?: string | null;
+    status?: string | null;
+    target_model?: string | null;
+    [extra: string]: unknown;
+}
+export interface PlacementRef extends ActionRef {
+    surface?: string | null;
+}
+export interface BuildArgs {
+    action: ActionRef | null;
+    placement: PlacementRef | null;
+    /** Resolved from schema?.target ?? placement?.target_config. */
+    targetConfig: Record<string, unknown>;
+    /** Resolved from schema?.source ?? placement?.source_schema. */
+    sourceSchema: Record<string, unknown>;
+    /** Submitted values keyed by parameter source_field_path or key. */
+    rawValues: Record<string, unknown>;
+    schemaVersion: string | null;
+    mode: RendererMode;
+}
+export interface ActionPayload {
+    source: string;
+    action: {
+        id: string | null;
+        key: string | null;
+        status: string | null;
+    };
+    placement: {
+        id: string | null;
+        key: string | null;
+        surface: string;
+        status: string | null;
+    } | null;
+    target: {
+        model: string | null;
+        scope: Record<string, unknown>;
+        id: string | null;
+    };
+    form: {
+        action_type_key: string | null;
+        action_placement_key: string | null;
+        raw_values: Record<string, unknown>;
+    };
+    metadata: {
+        renderer_mode: RendererMode;
+        schema_version: string | null;
+        target_model: string | null;
+        form_definition_id: string | null;
+    };
+}
+export declare function buildActionPayload(args: BuildArgs): ActionPayload;
+/**
+ * Generic placement-consequence rows for the admin preview "Placement
+ * consequences" section. Replaces the old "Occurrence type" hardcoded
+ * row with a per-scope-key row, derived from target_config.
+ */
+export interface ConsequenceRow {
+    label: string;
+    value: string;
+}
+export declare function placementConsequenceRows(args: {
+    placement: PlacementRef | null;
+    targetConfig: Record<string, unknown>;
+    sourceSchema: Record<string, unknown>;
+    mode: RendererMode;
+}): ConsequenceRow[];

package/components/action-form-renderer-payload.ts

@@ -0,0 +1,203 @@
+/**
+ * Builds the normalized action payload that ActionFormRenderer renders in
+ * its `admin-preview` mode and that any consumer (admin runtime, public
+ * portal, Open311 adapter, future apps) sees as the canonical shape.
+ *
+ * S1 (#27) — generic target shape; no domain-specific keys. The previous
+ * `occurrence: { occurrence_type, organization_id }` block has been
+ * replaced with `target: { model, scope, id }`. `target.scope` carries
+ * everything from the placement's `target_config` minus the `model` and
+ * `id` keys (which become first-class). The BFF
+ * `_normalized_submission_preview` mirrors this contract.
+ *
+ * Pure function: takes resolved inputs (action, placement, target_config,
+ * source_schema, raw_values, mode), returns the canonical payload. The
+ * Svelte component owns the reactive plumbing; this module owns the shape.
+ */
+export type RendererMode = "admin-preview" | "admin-execute" | "public-submit" | "adapter-preview";
+
+/**
+ * Minimal action/placement references the payload builder reads. Callers may
+ * pass a full ontology Entity; this narrower shape is what we actually rely
+ * on, so test stubs don't need to populate Entity's `created_at`/`updated_at`.
+ */
+export interface ActionRef {
+  id?: string | null;
+  key?: string | null;
+  status?: string | null;
+  target_model?: string | null;
+  [extra: string]: unknown;
+}
+
+export interface PlacementRef extends ActionRef {
+  surface?: string | null;
+}
+
+export interface BuildArgs {
+  action: ActionRef | null;
+  placement: PlacementRef | null;
+  /** Resolved from schema?.target ?? placement?.target_config. */
+  targetConfig: Record<string, unknown>;
+  /** Resolved from schema?.source ?? placement?.source_schema. */
+  sourceSchema: Record<string, unknown>;
+  /** Submitted values keyed by parameter source_field_path or key. */
+  rawValues: Record<string, unknown>;
+  schemaVersion: string | null;
+  mode: RendererMode;
+}
+
+export interface ActionPayload {
+  source: string;
+  action: {
+    id: string | null;
+    key: string | null;
+    status: string | null;
+  };
+  placement: {
+    id: string | null;
+    key: string | null;
+    surface: string;
+    status: string | null;
+  } | null;
+  target: {
+    model: string | null;
+    scope: Record<string, unknown>;
+    id: string | null;
+  };
+  form: {
+    action_type_key: string | null;
+    action_placement_key: string | null;
+    raw_values: Record<string, unknown>;
+  };
+  metadata: {
+    renderer_mode: RendererMode;
+    schema_version: string | null;
+    target_model: string | null;
+    form_definition_id: string | null;
+  };
+}
+
+const RESERVED_TARGET_KEYS = new Set(["model", "id"]);
+
+function nullableString(value: unknown): string | null {
+  if (value === null || value === undefined || value === "") return null;
+  return String(value);
+}
+
+function defaultSourceFor(mode: RendererMode): string {
+  return mode === "public-submit" ? "citizen" : "admin";
+}
+
+function defaultSurfaceFor(mode: RendererMode): string {
+  return mode === "public-submit" ? "public_submit" : "admin_preview";
+}
+
+function pickScope(targetConfig: Record<string, unknown>): Record<string, unknown> {
+  const scope: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(targetConfig)) {
+    if (RESERVED_TARGET_KEYS.has(key)) continue;
+    scope[key] = value;
+  }
+  return scope;
+}
+
+export function buildActionPayload(args: BuildArgs): ActionPayload {
+  const { action, placement, targetConfig, sourceSchema, rawValues, schemaVersion, mode } = args;
+
+  const sourceFromSchema = nullableString(sourceSchema.source);
+  const targetModel =
+    nullableString(targetConfig.model) ??
+    nullableString(placement?.target_model) ??
+    nullableString(action?.target_model);
+
+  const placementBlock = placement
+    ? {
+        id: nullableString(placement.id),
+        key: nullableString(placement.key),
+        surface: String(placement.surface ?? defaultSurfaceFor(mode)),
+        status: nullableString(placement.status),
+      }
+    : null;
+
+  return {
+    source: sourceFromSchema ?? defaultSourceFor(mode),
+    action: {
+      id: nullableString(action?.id),
+      key: nullableString(action?.key),
+      status: nullableString(action?.status),
+    },
+    placement: placementBlock,
+    target: {
+      model: targetModel,
+      scope: pickScope(targetConfig),
+      id: nullableString(targetConfig.id),
+    },
+    form: {
+      action_type_key: nullableString(action?.key),
+      action_placement_key: nullableString(placement?.key),
+      raw_values: rawValues,
+    },
+    metadata: {
+      renderer_mode: mode,
+      schema_version: schemaVersion,
+      target_model: targetModel,
+      form_definition_id: nullableString(targetConfig.form_definition_id),
+    },
+  };
+}
+
+/**
+ * Generic placement-consequence rows for the admin preview "Placement
+ * consequences" section. Replaces the old "Occurrence type" hardcoded
+ * row with a per-scope-key row, derived from target_config.
+ */
+export interface ConsequenceRow {
+  label: string;
+  value: string;
+}
+
+export function placementConsequenceRows(args: {
+  placement: PlacementRef | null;
+  targetConfig: Record<string, unknown>;
+  sourceSchema: Record<string, unknown>;
+  mode: RendererMode;
+}): ConsequenceRow[] {
+  const { placement, targetConfig, sourceSchema, mode } = args;
+  const rows: ConsequenceRow[] = [
+    {
+      label: "Surface",
+      value: String(placement?.surface ?? "No placement selected"),
+    },
+    {
+      label: "Accepted source",
+      value: String(sourceSchema.source ?? defaultSourceFor(mode)),
+    },
+    {
+      label: "Target model",
+      value: String(targetConfig.model ?? placement?.target_model ?? "-"),
+    },
+  ];
+
+  const scope = pickScope(targetConfig);
+  const scopeEntries = Object.entries(scope).filter(
+    ([key]) => key !== "form_definition_id" && key !== "form_definition_key",
+  );
+  if (scopeEntries.length === 0) {
+    rows.push({ label: "Scope", value: "Any row of model" });
+  } else {
+    for (const [key, value] of scopeEntries) {
+      rows.push({ label: `Scope · ${key}`, value: String(value ?? "-") });
+    }
+  }
+
+  rows.push({
+    label: "Form definition",
+    value: String(
+      targetConfig.form_definition_key ??
+        targetConfig.form_definition_id ??
+        "Inherit (auto-derived)",
+    ),
+  });
+
+  return rows;
+}

package/components/index.js

@@ -122,3 +122,6 @@ export { default as GeoSearch } from "./GeoSearch.svelte";
 
 // Scheduling
 export { default as Calendar } from "./Calendar.svelte";
+
+// Action form renderer (placement-aware; admin preview + portal runtime, #73)
+export { default as ActionFormRenderer } from "./ActionFormRenderer.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",
@@ -36,6 +36,7 @@
       "default": "./components/*.svelte"
     },
     "./components/*": {
+      "types": "./components/*.d.ts",
       "svelte": "./components/*",
       "default": "./components/*"
     },