@sevenfold/setto-client 0.6.2 → 0.7.0

package/README.md

@@ -11,7 +11,7 @@ Editors authenticate via Supabase, edit text inline on the live page, pick secti
 Sevenfold sites pin an npm version via alias:
 
 ```json
-"@setto/client": "npm:@sevenfold/setto-client@0.5.0"
+"@setto/client": "npm:@sevenfold/setto-client@0.7.0"
 ```
 
 `bun install` pulls the prebuilt package from npm — no GitHub token required on Vercel.
@@ -23,10 +23,10 @@ For local monorepo development the consumer's `vite.config.ts` aliases `@setto/c
 ### Releasing a new version
 
 1. Bump `version` in `package.json` following semver (patch / minor / major).
-2. Commit and push to `main`. GitHub Actions publishes `@sevenfold/setto-client` to npm automatically (requires `NPM_TOKEN` secret in this repo).
+2. Commit and push to `main`. GitHub Actions publishes `@sevenfold/setto-client` to npm automatically via npm trusted publishing (OIDC — no registry token in this repo).
 3. Confirm the version is on npm: `npm view @sevenfold/setto-client@X.Y.Z version`.
-4. In each consumer (`carryon.no`, `setto-site`):
-   - Update the pin in `package.json` (e.g. `@0.5.0` → `@0.5.1`).
+4. In each consumer (`setto-site`, the setto-agent templates, every generated site):
+   - Update the pin in `package.json` (e.g. `@0.7.0` → `@0.7.1`).
    - Run `bun install` to refresh the lockfile.
    - Commit and push — Vercel installs the new npm version on the next deploy.
 
@@ -136,13 +136,14 @@ Sign-in at `/setto` persists via Supabase, so subsequent visits drop straight in
 
 ### What editors see
 
-A small round Setto button floats in the bottom-right corner. While there are no unpublished changes it stays as a circle showing only the Setto mark. As soon as you edit something it grows into a pill containing **Publiser** and a **⋯** menu with:
+A small round Setto button floats in the bottom-left corner. While there are no unpublished changes it stays as a circle showing only the Setto mark. As soon as you edit something it grows into a pill containing **Publiser** and a **⋯** menu with:
 
 | Item | Effect |
 |------|--------|
 | **Avbryt** | Discards every unsaved draft (text, section colours, image uploads) |
-| **Logg ut** | Signs out via Supabase and exits edit mode |
 | **Historikk** | Opens the `/setto` dashboard with deployment history |
+| **Innstillinger** | Opens the `/setto` dashboard on the module settings — the forms inbox and who receives form email |
+| **Logg ut** | Signs out via Supabase and exits edit mode |
 
 | Action | How |
 |--------|-----|
@@ -280,6 +281,45 @@ Click a block's background to edit **that block's** colours. Click the section p
 
 ---
 
+## Forms (`SettoForm`)
+
+`<SettoForm formId="kontakt" />` renders a form whose fields live in the locale bundle, so editors can add, remove, reorder and relabel them in edit mode like any other copy. Submissions go to setto-server, which stores them and emails the site's recipients.
+
+```tsx
+import { SettoForm } from '@setto/client';
+
+<SettoForm formId="kontakt" className="grid gap-4" />
+```
+
+The locale supplies the texts and the numbered field list:
+
+```json
+"form": {
+  "kontakt": {
+    "submit": "Send melding",
+    "success": "Takk! Vi tar kontakt så snart vi kan.",
+    "error": "Noe gikk galt. Prøv igjen.",
+    "fields": {
+      "1": { "name": "navn", "type": "text", "label": "Navn", "required": "true" },
+      "2": { "name": "epost", "type": "email", "label": "E-post", "required": "true" },
+      "3": { "name": "melding", "type": "textarea", "label": "Melding" }
+    }
+  }
+}
+```
+
+Field types: `text`, `email`, `tel`, `number`, `url`, `date`, `textarea`, `select`, `radio`, `checkbox`, `checkboxes` (`FORM_FIELD_TYPES`). `select`, `radio` and `checkboxes` take newline-separated `options`. All values are strings — `"required": "true"`, not `true`.
+
+- **Styling.** Every part carries a `setto-form__*` class (`__field`, `__label`, `__input`, `__textarea`, `__select`, `__button`, `__error`, `__success`, …) plus `data-setto-field="<name>"` on each field wrapper. A minimal zero-specificity baseline is injected once, so any site rule wins; `classNames` puts classes on the parts directly. A site styling its own button should set `border: 0` (the baseline draws a 1px `currentColor` border).
+- **Success.** The form is replaced by a `role="status"` panel with the locale's `success` text and a "send another" link; focus moves to it.
+- **Spam.** A honeypot, a time-to-submit measurement and controlled inputs on the client; Origin check, per-site and per-address rate limits and a link-count heuristic on the server. Nothing asks the visitor to prove anything, and a caught bot sees a normal success.
+- **Own backend.** Pass `endpoint="https://…"` to POST the bare values there instead of to Setto.
+- **Inbox and recipients.** FAB → **Innstillinger** (or `/setto?view=forms`): submission history and the recipient list. With no recipients configured, the site's owners receive the email.
+
+`SettoForm` is the first Setto *module* — a feature with a client component, an admin view and a server route. `SETTO_MODULES` lists them; the admin app renders one tab per module.
+
+---
+
 ## Server setup (setto-server)
 
 Site configuration is split in two:
@@ -373,7 +413,15 @@ Produces `dist/setto-client.js` and `.d.ts` via Vite library mode. Only needed b
 | `SettoSection` | Section wrapper + edit selection |
 | `SettoBlock` | Nested card/panel with its own colour toolbar |
 | `useSectionTheme` | Read section colour tokens |
-| `SettoAdminApp` | `/setto` login + dashboard |
+| `SettoImage`, `SettoIcon`, `SettoVideo` | Editable image (upload), icon and video leaves |
+| `SettoRepeater` | Editable list stored in i18n (add/remove items) |
+| `SettoAnimation` | Entrance animation wrapper (fadeIn, slideUp, stagger, scrollReveal) |
+| `SettoBlockTree` | Renders a `home.layout.json` block tree with the components above |
+| `GuestEditProvider` / `useGuestEdit` | Session-only "try editing" mode for a marketing site — no auth, never published |
+| `SettoForm`, `FORM_FIELD_TYPES` | Editable form that submits to Setto (forms module) |
+| `SETTO_MODULES` | Registry of modules the admin app shows settings for |
+| `SettoAdminApp` | `/setto` login + dashboard (history, module settings) |
+| `SETTO_BASE`, `adminViewUrl` | The `/setto` path and links into a dashboard view |
 | `AuthGate` | Standalone login wrapper |
 | `BrandColor`, `SectionSchema`, `SettoConfig` | Types for host config |
 
@@ -381,11 +429,11 @@ Produces `dist/setto-client.js` and `.d.ts` via Vite library mode. Only needed b
 
 ## Limitations (v0)
 
-- `<T>` supports text content only — not HTML attributes (`placeholder`, `alt`, `aria-label`).
-- No list/repeater UI (cannot add a new FAQ row from the editor).
+- `<T>` supports text content only — not HTML attributes (`placeholder`, `alt`, `aria-label`); form field placeholders are the exception, edited through the field editor.
+- Lists are `SettoRepeater` (add/remove items); repeater items cannot be reordered yet — form fields can.
 - Drafts are in-memory — refresh discards unpublished changes.
 - Section colour toolbar only offers `brandColors` — no custom hex/rgba input.
-- CTA card colours and nested component colours are not section-themeable yet.
+- Only `SettoSection` and `SettoBlock` backgrounds and the tokens their schemas list are themeable — no per-element colour picking.
 - Single editor per site (no concurrent-edit conflict handling).
 
 ## Knowledge base

package/dist/admin/App.d.ts

@@ -4,7 +4,8 @@
  * Behaviour after login:
  *  - Redirects to the site home `/`. Edit mode activates automatically there
  *    via `SettoProvider` when the user has access to `config.siteId`.
- *  - Shows the dashboard only when the user lacks access to this site, or on
- *    `/setto?deployment=…` for publish progress / history.
+ *  - Shows the dashboard only when the user lacks access to this site, or
+ *    when a panel was asked for: `/setto?deployment=…` for publish progress
+ *    and history, `/setto?view=<module>` for a module's panel (forms today).
  */
 export declare function SettoAdminApp(): import("react/jsx-runtime").JSX.Element;

package/dist/admin/DeploymentsView.d.ts

@@ -0,0 +1,5 @@
+/** Publish progress for `/setto?deployment=…`, and the last ten deployments. */
+export declare function DeploymentsView({ siteId, onError, }: {
+    siteId: string;
+    onError?: (msg: string | null) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/admin/styles.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties } from 'react';
+/**
+ * The dashboard's look, shared by the shell and every module view so a new
+ * module's panel reads as part of the same place.
+ */
+export declare const shellStyle: CSSProperties;
+export declare const headerStyle: CSSProperties;
+export declare const mainStyle: CSSProperties;
+export declare const cardStyle: CSSProperties;
+export declare const panelStyle: CSSProperties;
+export declare const rowStyle: CSSProperties;
+export declare const mutedStyle: CSSProperties;
+export declare const errStyle: CSSProperties;
+export declare const subheadingStyle: CSSProperties;
+export declare const primaryBtnStyle: CSSProperties;
+export declare const secondaryBtnStyle: CSSProperties;
+export declare const dangerBtnStyle: CSSProperties;
+export declare const inputStyle: CSSProperties;
+export declare const tabBarStyle: CSSProperties;
+export declare function tabStyle(active: boolean): CSSProperties;

package/dist/block-tree/schema.d.ts

@@ -74,29 +74,28 @@ export interface RepeaterNode extends BaseNode {
      */
     itemTemplate: BlockNode[];
 }
-export type FormFieldType = 'text' | 'email' | 'tel' | 'textarea';
-export interface FormField {
-    /** Submitted form field name. */
-    name: string;
-    type: FormFieldType;
-    required?: boolean;
-    /** i18n key for the field label. */
-    labelKey: string;
-    /** i18n key for the placeholder text. */
-    placeholderKey?: string;
-}
+export type { FormFieldType } from '../modules/forms/fields';
+export type { FormFieldProp as FormField } from '../modules/forms/fields';
 export interface FormNode extends BaseNode {
     type: 'form';
     /**
      * Scopes all i18n keys for this form: `form.{formId}.submit`,
-     * `form.{formId}.success`, `form.{formId}.error`.
+     * `form.{formId}.success`, `form.{formId}.error`, and the editable field
+     * list under `form.{formId}.fields`.
      */
     formId: string;
-    /** Static POST endpoint. Use `endpointKey` to read from i18n instead. */
+    /**
+     * Static POST endpoint for a site with its own backend. Without it the form
+     * posts to Setto, which stores the submission and emails the site's owners.
+     */
     endpoint?: string;
-    /** i18n key whose value is the form POST endpoint. */
+    /** @deprecated Ignored. Forms post to Setto unless `endpoint` is set. */
     endpointKey?: string;
-    fields: FormField[];
+    /**
+     * Seed fields, used only while the locale has no `form.{formId}.fields`
+     * list. Once the editor touches the field set, the locale wins.
+     */
+    fields?: import('../modules/forms/fields').FormFieldProp[];
 }
 export interface VideoNode extends BaseNode {
     type: 'video';
@@ -117,4 +116,3 @@ export interface AnimationNode extends BaseNode {
     duration?: number;
     children: BlockNode[];
 }
-export {};

package/dist/edit-mode/mount.d.ts

@@ -7,7 +7,7 @@ interface EditModeShellProps {
     active: boolean;
 }
 /**
- * Edit mode: full-width page with a floating Setto FAB anchored bottom-right.
+ * Edit mode: full-width page with a floating Setto FAB anchored bottom-left.
  * Text is edited inline via contentEditable on `<T>` — no sidebar.
  *
  * Always mounted around the host app so toggling edit mode does not remount

package/dist/index.d.ts

@@ -9,15 +9,17 @@ export { SettoImage } from './SettoImage';
 export type { SettoImageProps } from './SettoImage';
 export { SettoRepeater } from './SettoRepeater';
 export type { SettoRepeaterProps } from './SettoRepeater';
-export { SettoForm } from './SettoForm';
-export type { SettoFormProps } from './SettoForm';
+export { SettoForm, FORM_FIELD_TYPES, FORM_FIELD_TYPE_LABELS, formFieldsPrefix, isFormFieldType, readLocaleFields, settoSubmissionUrl, } from './modules/forms';
+export type { SettoFormProps, SettoFormClassNames, FormFieldProp, FormSettings, FormSubmissionRow, FormValue, FormValues, ResolvedFormField, SubmissionEnvelope, } from './modules/forms';
+export { SETTO_MODULES } from './modules';
+export type { SettoModule } from './modules';
 export { SettoVideo } from './SettoVideo';
 export type { SettoVideoProps } from './SettoVideo';
 export { SettoAnimation } from './SettoAnimation';
 export type { SettoAnimationProps } from './SettoAnimation';
 export { useSectionTheme } from './use-section-theme';
 export { SettoAdminApp } from './admin/App';
-export { SETTO_BASE } from './lib/urls';
+export { SETTO_BASE, adminViewUrl } from './lib/urls';
 export { AuthGate } from './edit-mode/auth-gate';
 export type { SettoConfig, BrandColor, DeploymentRow, SiteRow, ContentFile, PublishFile, PublishResult, } from './types';
 export type { SectionSchema, SectionColorField } from './section-schema';

package/dist/lib/api.d.ts

@@ -1,10 +1,25 @@
 import type { SupabaseClient } from '@supabase/supabase-js';
 import type { ContentFile, PublishFile, PublishResult } from '../types';
 import type { AssetDraft } from './asset-store';
+/**
+ * One authenticated JSON call against setto-server. Modules build their api
+ * segment on this (see `modules/forms/api.ts`) rather than on `fetch`, so
+ * bearer handling and error shaping stay in one place.
+ */
+export type ApiRequest = <T>(path: string, init?: {
+    method?: string;
+    body?: unknown;
+}, label?: string) => Promise<T>;
 export declare function createApi(args: {
     apiUrl: string;
     supabase: SupabaseClient;
 }): {
+    request: ApiRequest;
+    forms: {
+        getSettings(siteId: string): Promise<import("..").FormSettings>;
+        saveSettings(siteId: string, recipients: string[]): Promise<import("..").FormSettings>;
+        deleteSubmission(siteId: string, id: string): Promise<void>;
+    };
     getContent(siteId: string): Promise<{
         files: ContentFile[];
     }>;

package/dist/lib/i18n-store.d.ts

@@ -19,6 +19,18 @@ export interface DraftEntry {
     original: string;
     /** Current draft value. */
     current: string;
+    /**
+     * The key did not exist before this session (a list item the editor added).
+     * Reverting deletes it instead of writing an empty string back, which would
+     * leave a blank item on the page.
+     */
+    created?: boolean;
+    /**
+     * The key existed and the editor deleted it (a list item they removed).
+     * Without this a removal was invisible to the draft count: an editor who
+     * only deleted a FAQ entry had nothing to publish.
+     */
+    removed?: boolean;
 }
 export interface I18nStoreSnapshot {
     /** All edits made in this session, keyed by `${lng}::${key}`. */
@@ -36,6 +48,8 @@ export declare class I18nStore {
     /** Stable namespace used by react-i18next defaults. */
     private ns;
     private i18n;
+    /** >0 while a batch is running; consumers are notified once at the end. */
+    private batchDepth;
     /** Cached reference — useSyncExternalStore requires referential stability. */
     private cachedSnapshot;
     constructor(i18n: I18nType, options?: {
@@ -55,6 +69,12 @@ export declare class I18nStore {
      * If the value is set back to the original, the draft entry is cleared.
      */
     set(key: string, lng: string, value: string): void;
+    /**
+     * Deletes a key from the bundle. A key that was created this session simply
+     * disappears; one that was on disk is kept as a removal draft so the
+     * deletion counts as a change and reverts cleanly.
+     */
+    delete(key: string, lng: string): void;
     /** Resets a single draft back to its original value. */
     revert(key: string, lng: string): void;
     /** Resets every draft. */
@@ -72,6 +92,14 @@ export declare class I18nStore {
     addListItem(prefix: string, _lng: string, template: Record<string, string>): string;
     /** Removes a list item and all nested keys under `prefix.itemKey` in every language. */
     removeListItem(prefix: string, itemKey: string, _lng: string): void;
+    /**
+     * Moves a list item one step up or down by swapping its values with its
+     * neighbour's, in every language. Items keep their numeric keys and the keys
+     * keep their order; only the contents trade places. That is what makes the
+     * move a set of ordinary drafts — publish, revert and the change count all
+     * work without knowing a move happened.
+     */
+    moveListItem(prefix: string, itemKey: string, direction: -1 | 1, _lng: string): boolean;
     /** Re-sorts list keys after removal (optional compaction — not used by default). */
     sortListKeys(prefix: string, lng: string): string[];
     /**
@@ -81,6 +109,16 @@ export declare class I18nStore {
      * The caller maps language → file path via `sites.content_paths`.
      */
     serialiseBundles(): Record<string, unknown>;
+    /** Runs `fn` and notifies consumers once, however many edits it makes. */
+    batch(fn: () => void): void;
+    private languages;
+    private valueOrUndefined;
+    private setOrDelete;
+    /** Every string key under `prefix`, nested to any depth. */
+    private leavesUnder;
+    private deleteFromBundle;
+    private restore;
+    private notify;
     private bump;
 }
 export {};

package/dist/lib/nested-resource.d.ts

@@ -2,7 +2,13 @@
 export declare function getNested(obj: unknown, key: string): unknown;
 /** Sets a dotted key path on a nested object (mutates in place). */
 export declare function setNested(obj: Record<string, unknown>, key: string, value: unknown): void;
-/** Deletes a dotted key path from a nested object (mutates in place). */
+/**
+ * Deletes a dotted key path from a nested object (mutates in place).
+ *
+ * Parents left empty by the deletion go too. Deleting the last leaf of
+ * `form.kontakt.fields.3` used to leave `"3": {}` behind, which published as
+ * a phantom list item and rendered as an empty field.
+ */
 export declare function deleteNested(obj: Record<string, unknown>, key: string): void;
 /** Collects all dotted keys under a prefix from a nested object. */
 export declare function collectKeysUnder(obj: unknown, prefix: string): string[];

package/dist/lib/urls.d.ts

@@ -13,4 +13,17 @@ export declare function siteHomeUrl(pathname?: string): string;
 export declare function isAdminRoute(): boolean;
 /** Setto deployment progress panel (`/setto?deployment=…`). */
 export declare function isAdminDeploymentView(): boolean;
+/**
+ * A named dashboard view (`/setto?view=forms`). Views come from the module
+ * registry in `src/modules`; the dashboard shows them as tabs. Opening one
+ * directly is how the editor's toolbar deep-links into the "backend".
+ */
+export declare function adminViewUrl(view: string): string;
+export declare function currentAdminView(): string | null;
+/**
+ * True when the visitor came to `/setto` for a specific panel — a view or a
+ * deployment — rather than to sign in. Sign-in normally bounces straight to
+ * the site with edit mode on; a panel request stays on the dashboard.
+ */
+export declare function isAdminPanelView(): boolean;
 export declare function adminRedirectUrl(): string;

package/dist/modules/forms/FormsView.d.ts

@@ -0,0 +1,17 @@
+import type { FormSubmissionRow } from './api';
+/**
+ * The forms panel of the dashboard: who gets the mail, and everything that
+ * has come in. Submissions arrive live through the same Supabase channel
+ * pattern the deployment list uses; the owner can open one, and delete it.
+ */
+export declare function FormsView({ siteId }: {
+    siteId: string;
+}): import("react/jsx-runtime").JSX.Element;
+interface SubmissionField {
+    name: string;
+    label: string;
+    value: string;
+}
+/** `data` as ordered, labelled rows — the dashboard's version of the email's table. */
+export declare function submissionFields(row: FormSubmissionRow): SubmissionField[];
+export {};

package/dist/modules/forms/SettoForm.d.ts

@@ -0,0 +1,58 @@
+import { type FormFieldProp } from './fields';
+/**
+ * A form the site owner can change and a visitor can trust.
+ *
+ * Fields come from the locale (`form.<id>.fields`, see `fields.ts`) and fall
+ * back to the `fields` prop until the editor first touches them, at which
+ * point the prop fields are copied into the locale and the locale wins. From
+ * then on adding, removing, reordering and relabelling are ordinary drafts.
+ *
+ * Submissions go to setto-server, which stores them and emails the site's
+ * recipients. A site with its own backend passes `endpoint` and gets the bare
+ * values instead. Either way the visitor sees the form replaced by the
+ * success message — with focus moved to it, so it is announced as well as
+ * seen.
+ *
+ * Bots: a honeypot input a person never sees, the time from first touch to
+ * submit, and controlled inputs (a script that pokes `.value` never changes
+ * React state, so it submits an empty form). The server adds an Origin check,
+ * a per-site and per-address rate limit, and a link-count heuristic. None of
+ * it asks the visitor to prove anything.
+ */
+export interface SettoFormClassNames {
+    form?: string;
+    field?: string;
+    label?: string;
+    input?: string;
+    textarea?: string;
+    select?: string;
+    /** Wrapper around a radio / checkbox group's options. */
+    options?: string;
+    /** One radio / checkbox option (the label element). */
+    option?: string;
+    /** A single checkbox field (the label element). */
+    checkbox?: string;
+    actions?: string;
+    button?: string;
+    success?: string;
+    error?: string;
+    fieldError?: string;
+}
+export interface SettoFormProps {
+    /** Scopes the form's i18n keys and identifies it in the inbox. */
+    formId: string;
+    /** Seed fields, used until the locale has a `form.<id>.fields` list. */
+    fields?: FormFieldProp[];
+    /**
+     * POST target for a site with its own backend; receives the bare values as
+     * JSON. Leave unset to submit to Setto.
+     */
+    endpoint?: string;
+    /** @deprecated Ignored — forms post to Setto unless `endpoint` is set. */
+    endpointKey?: string;
+    /** Class on the `<form>` (and the success panel that replaces it). */
+    className?: string;
+    /** Classes per part; the `setto-form__*` classes stay for CSS hooks. */
+    classNames?: SettoFormClassNames;
+}
+export declare function SettoForm({ formId, fields: propFields, endpoint, endpointKey, className, classNames, }: SettoFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/modules/forms/api.d.ts

@@ -0,0 +1,40 @@
+import type { ApiRequest } from '../../lib/api';
+/** The forms row of `site_module_settings` as the server reports it, with the defaults resolved. */
+export interface FormSettings {
+    /** Addresses the owner chose; empty means "use the defaults". */
+    recipients: string[];
+    /** The site owners' addresses — where mail goes when `recipients` is empty. */
+    defaultRecipients: string[];
+    /** What a submission would be sent to right now. */
+    effectiveRecipients: string[];
+    updatedAt: string | null;
+}
+/** A row of `form_submissions`, read through Supabase RLS in the dashboard. */
+export interface FormSubmissionRow {
+    id: string;
+    site_id: string;
+    form_id: string;
+    data: Record<string, unknown>;
+    labels: Record<string, string>;
+    field_order: string[];
+    meta: {
+        page?: string;
+        title?: string;
+        referer?: string;
+        userAgent?: string;
+        ip?: string;
+        /** Milliseconds from the visitor's first interaction to submit; absent for API clients. */
+        elapsed?: number;
+        recipientSource?: 'settings' | 'owners' | 'none';
+    };
+    email_status: 'pending' | 'sent' | 'failed' | 'skipped';
+    email_error: string | null;
+    recipients: string[];
+    created_at: string;
+}
+export declare function createFormsApi(request: ApiRequest): {
+    getSettings(siteId: string): Promise<FormSettings>;
+    saveSettings(siteId: string, recipients: string[]): Promise<FormSettings>;
+    deleteSubmission(siteId: string, id: string): Promise<void>;
+};
+export type FormsApi = ReturnType<typeof createFormsApi>;

package/dist/modules/forms/field-editor.d.ts

@@ -0,0 +1,29 @@
+import { type FormFieldType, type ResolvedFormField } from './fields';
+/**
+ * The chrome an editor sees around each form field: move up/down, settings,
+ * remove. It exists only in edit mode; the published form has none of it.
+ *
+ * Everything here writes through `onChange`, which the form routes into the
+ * draft store. The toolbar does not know where fields live and does not need
+ * to — that is the form's business.
+ */
+export interface FieldPatch {
+    name?: string;
+    type?: FormFieldType;
+    required?: boolean;
+    label?: string;
+    placeholder?: string;
+    options?: string;
+}
+interface FormFieldToolsProps {
+    field: ResolvedFormField;
+    index: number;
+    count: number;
+    /** Open the settings popover as soon as the tools mount (a field just added). */
+    autoOpen?: boolean;
+    onMove: (direction: -1 | 1) => void;
+    onRemove: () => void;
+    onChange: (patch: FieldPatch) => void;
+}
+export declare function FormFieldTools({ field, index, count, autoOpen, onMove, onRemove, onChange, }: FormFieldToolsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modules/forms/fields.d.ts

@@ -0,0 +1,112 @@
+import type { i18n as I18nType, TFunction } from 'i18next';
+/**
+ * What a form is made of, and where that lives.
+ *
+ * A form's fields are content, not code. They sit in the locale bundle under
+ * `form.<formId>.fields.<n>` as an ordinary Setto list — the same shape a
+ * repeater uses — so the editor can add, remove, reorder and relabel them
+ * with the draft store it already has, and publishing writes them to
+ * `no.json` through the path that already exists. Nothing new has to be
+ * stored, fetched or deployed for a form to change.
+ *
+ *   "form": {
+ *     "kontakt": {
+ *       "submit": "Send", "success": "Takk! …", "error": "Noe gikk galt.",
+ *       "fields": {
+ *         "1": { "name": "navn", "type": "text", "label": "Navn", "required": "true" },
+ *         "2": { "name": "epost", "type": "email", "label": "E-post", "required": "true" },
+ *         "3": { "name": "tjeneste", "type": "select", "label": "Hva gjelder det?",
+ *                "options": "Tak\nVindu\nAnnet" },
+ *         "4": { "name": "melding", "type": "textarea", "label": "Melding" }
+ *       }
+ *     }
+ *   }
+ *
+ * Every value is a string because every locale value is: `required` is
+ * `"true"`, `options` is one per line. `label`, `placeholder` and `options`
+ * are per language; `name`, `type` and `required` are the same in all of them.
+ */
+export declare const FORM_FIELD_TYPES: readonly ["text", "email", "tel", "number", "url", "date", "textarea", "select", "radio", "checkbox", "checkboxes"];
+export type FormFieldType = (typeof FORM_FIELD_TYPES)[number];
+/** What the editor calls each type. */
+export declare const FORM_FIELD_TYPE_LABELS: Record<FormFieldType, string>;
+/** Field props that are the same in every language. */
+export declare const STRUCTURAL_FIELD_PROPS: readonly ["name", "type", "required"];
+export declare function isFormFieldType(value: unknown): value is FormFieldType;
+export declare function fieldTypeHasOptions(type: FormFieldType): boolean;
+export declare function fieldTypeHasPlaceholder(type: FormFieldType): boolean;
+/** A field as the form renders it, whichever source it came from. */
+export interface ResolvedFormField {
+    /** Item key under `form.<id>.fields` — absent when the field came from props. */
+    itemKey?: string;
+    name: string;
+    type: FormFieldType;
+    /** i18n key the label is rendered (and inline-edited) through. */
+    labelKey: string;
+    label: string;
+    placeholder: string;
+    required: boolean;
+    options: string[];
+}
+export declare function formFieldsPrefix(formId: string): string;
+export declare function parseOptions(value: string | undefined): string[];
+/**
+ * Fields as the locale bundle defines them, or null when no loaded language
+ * has a `fields` list for this form and it should fall back to whatever the
+ * host passed. The current language is read first, then i18next's fallback
+ * chain, so a second language that has not translated the form still gets
+ * its structure. Items without a name are skipped: they are the empty husks a
+ * half-finished edit can leave behind, not fields.
+ */
+export declare function readLocaleFields(i18n: I18nType, lng: string, formId: string, ns?: string): ResolvedFormField[] | null;
+/** The host-supplied shape a form can still be given as a prop. */
+export interface FormFieldProp {
+    /** Submitted form field name. */
+    name: string;
+    type: FormFieldType;
+    required?: boolean;
+    /** i18n key for the field label. */
+    labelKey: string;
+    /** i18n key for the placeholder text. */
+    placeholderKey?: string;
+    /** i18n key for the options of a select/radio/checkboxes field, one per line. */
+    optionsKey?: string;
+}
+export declare function resolvePropFields(fields: FormFieldProp[], t: TFunction): ResolvedFormField[];
+/** `Hva gjelder det?` → `hva-gjelder-det`; falls back to `felt`. */
+export declare function slugifyFieldName(label: string): string;
+/** A name no existing field uses. */
+export declare function uniqueFieldName(base: string, taken: Iterable<string>): string;
+export type FormValue = string | boolean | string[];
+export type FormValues = Record<string, FormValue>;
+export declare function emptyValue(type: FormFieldType): FormValue;
+export declare function emptyValues(fields: ResolvedFormField[]): FormValues;
+export type FieldErrorCode = 'required' | 'email' | 'url' | 'number';
+/** Norwegian fallbacks; a site overrides them via `form.validation.<code>`. */
+export declare const FIELD_ERROR_DEFAULTS: Record<FieldErrorCode, string>;
+export declare function validateValues(fields: ResolvedFormField[], values: FormValues): Record<string, FieldErrorCode>;
+/**
+ * The body `SettoForm` posts to setto-server. See `form-submission.ts` there.
+ *
+ * `hp` and `elapsed` are the bot signals: the honeypot's value (a person
+ * cannot see the field, so anything in it came from a script) and the
+ * milliseconds between the visitor's first touch of the form and submit
+ * (a script fills a form in tens of milliseconds; a person cannot).
+ */
+export interface SubmissionEnvelope {
+    data: FormValues;
+    labels: Record<string, string>;
+    order: string[];
+    title?: string;
+    page?: string;
+    hp: string;
+    elapsed: number;
+}
+export declare function buildEnvelope(fields: ResolvedFormField[], values: FormValues, extra: {
+    title?: string;
+    page?: string;
+    hp: string;
+    elapsed: number;
+}): SubmissionEnvelope;
+/** Where a site's forms go unless the host says otherwise. */
+export declare function settoSubmissionUrl(apiUrl: string, siteId: string, formId: string): string;

package/dist/modules/forms/index.d.ts

@@ -0,0 +1,12 @@
+import type { SettoModule } from '../module';
+/**
+ * The forms module: a form primitive the site renders, an inbox in the
+ * dashboard, and the api segment between them. Server side lives in
+ * setto-server `src/modules/forms`.
+ */
+export declare const formsModule: SettoModule;
+export { SettoForm } from './SettoForm';
+export type { SettoFormProps, SettoFormClassNames } from './SettoForm';
+export type { FormSettings, FormSubmissionRow, FormsApi } from './api';
+export { FORM_FIELD_TYPES, FORM_FIELD_TYPE_LABELS, formFieldsPrefix, isFormFieldType, readLocaleFields, settoSubmissionUrl, } from './fields';
+export type { FormFieldProp, FormFieldType, FormValue, FormValues, ResolvedFormField, SubmissionEnvelope, } from './fields';