bank20baht-ui 0.0.10 → 0.1.0

package/README.md

@@ -108,6 +108,25 @@ block), nothing in the payload. Missing keys count as off, so new features stay
 the file turns them on. Server side: `validateSubmission(applyFlags(schema, flags), data)`
 with the same JSON — `bank20baht-validator` re-exports `applyFlags`.
 
+### File upload
+
+```js
+// schema:
+{ order: 6, type: 'file', key: 'doc', uploader: 'default', accept: '.pdf,image/*', maxSize: 10_485_760 }
+
+// registry — File in, serializable ref out:
+el.registry = {
+  uploaders: { default: async (file) => {
+    const fd = new FormData(); fd.append('file', file);
+    return (await fetch('/api/uploads', { method: 'POST', body: fd })).json();
+  } },
+};
+```
+
+Picking a file uploads immediately; the value becomes `{ name, size, type, url }` — plain
+JSON, chips with remove buttons in the UI, `maxSize`/`accept` validated on both client and
+server. Omit `uploader` for the old capture-only mode.
+
 ### Drafts / autosave (host pattern)
 
 The library is controlled — autosave is three lines in your app:

package/dist/components/baht-form.d.ts

@@ -41,6 +41,8 @@ export declare class BahtForm extends BahtElement {
     private dynamicOptions;
     private optionsSnapshots;
     private optionsEpoch;
+    /** Unknown `view` values already warned about — avoid re-warning on every render. */
+    private warnedViews;
     /** applyFlags result, memoized on (form, flags) identity. */
     private flagCache;
     private get effectiveForm();
@@ -68,6 +70,12 @@ export declare class BahtForm extends BahtElement {
     };
     reset(): void;
     private onFieldInput;
+    /** Validate a single field against current form data (siblings included). */
+    private validateOneField;
+    /** `validateOn: 'blur'` — validate just the field the user left, same as
+     * how errors are shown elsewhere (merged into `this.errors`, painted by
+     * `renderField`/`.baht-error`). No-op for 'change'/'submit' modes. */
+    private onFieldBlur;
     private renderField;
     protected render(): TemplateResult;
 }

package/dist/components/baht-workflow.d.ts

@@ -23,6 +23,8 @@ export declare class BahtWorkflow extends BahtElement {
     showBack: boolean;
     /** Feature-flag values (spec 01 §12): flag-off steps/fields/rules vanish. */
     flags: FeatureFlags;
+    /** Render a <baht-steps> progress indicator above the current form. */
+    showSteps: boolean;
     private data;
     private derived;
     private current;
@@ -37,6 +39,8 @@ export declare class BahtWorkflow extends BahtElement {
     /** Forms in ascending order whose derived visibility is true. */
     private get visibleForms();
     private get currentForm();
+    /** Where next() would go from here: a formName or 'end' (spec 03 §6). */
+    private get navTarget();
     private get isLast();
     private fieldStatesFor;
     private get formEl();
@@ -48,7 +52,7 @@ export declare class BahtWorkflow extends BahtElement {
      */
     setValue(formName: string, patch: Record<string, unknown>): void;
     next(): void;
-    /** Advance past the current form: submit+complete on the last one, else step forward. */
+    /** Advance past the current form: submit+complete at 'end', else step to navTarget. */
     private advance;
     /** Approve the current approval step (same as pressing its Approve button). */
     approve(): void;

package/dist/components/base.d.ts

@@ -16,6 +16,12 @@ export declare function adoptLightChildren(host: HTMLElement, slot: HTMLElement)
  * Dumb and controlled — never mutates its own `value` prop; the host re-feeds it.
  */
 export declare abstract class BahtFieldBase extends BahtElement {
+    /**
+     * Per-instance suffix for controlId: the same field key renders once per
+     * repeater row (and can repeat across forms on one page), so key-only ids
+     * collide — worst for radios, whose shared native `name` merges groups.
+     */
+    private readonly uid;
     field: FieldDescriptor;
     value: unknown;
     disabled: boolean;

package/dist/components/primitives/baht-accordion.d.ts

@@ -20,6 +20,10 @@ export declare class BahtAccordion extends BahtElement {
     private openSet;
     private static instances;
     private uid;
+    /** Fingerprint of the panel content — identity-independent, so an equal
+     * re-fed array doesn't look like a "new" set of items. */
+    private itemsFingerprint;
+    private static fingerprint;
     protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     toggle(index: number): void;
     protected render(): TemplateResult;

package/dist/components/primitives/baht-alert.d.ts

@@ -11,7 +11,8 @@ export declare class BahtAlert extends BahtElement {
     heading: string;
     message: string;
     dismissible: boolean;
-    hidden: boolean;
+    private dismissed;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     private dismiss;
     protected render(): TemplateResult | typeof nothing;
 }

package/dist/components/primitives/baht-file.d.ts

@@ -1,9 +1,24 @@
 import { TemplateResult } from 'lit';
 import { BahtFieldBase } from '../base.js';
+import { UploadedFile } from '../../core/types.js';
 /**
- * Capture only (spec 01 §2): value = File handle(s); the lib never uploads.
+ * File field (spec 01 §2 + §13). Two modes:
+ * - capture (default): value = File handle(s); the lib never uploads.
+ * - upload (`field.uploader` + host `uploader` fn from the registry):
+ *   picking uploads immediately, value becomes serializable UploadedFile
+ *   ref(s), and the control shows chips with remove buttons.
  * maxSize (bytes) is enforced here as a soft filter — oversize files rejected.
  */
 export declare class BahtFile extends BahtFieldBase {
+    /** Resolved registry uploader — <baht-form> injects it when `field.uploader` is set. */
+    uploader?: (file: File) => Promise<UploadedFile>;
+    private uploadingCount;
+    private uploadError;
+    /** Names of files the last pick rejected for being over `field.maxSize`. */
+    private rejectedNames;
+    private get refs();
+    private emitRefs;
+    private uploadAll;
+    private onPick;
     protected renderControl(): TemplateResult;
 }

package/dist/components/primitives/baht-otp.d.ts

@@ -1,8 +1,8 @@
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { BahtElement } from '../base.js';
 /**
  * One-time-code input: N boxes, auto-advance, backspace steps back, paste
- * distributes. Emits `baht-change { value }` per edit and `baht-complete { value }`
+ * distributes. Emits `baht-change { value }` per edit and `baht-otp-complete { value }`
  * when every box is filled.
  *
  *   <baht-otp length="6"></baht-otp>
@@ -15,9 +15,30 @@ export declare class BahtOtp extends BahtElement {
     mode: 'numeric' | 'text';
     /** Accessible name for the group of boxes. */
     label: string;
-    private get chars();
+    /**
+     * Per-box state, index-aligned; '' marks an empty box. This is the source
+     * of truth for rendering so that clearing box N never shifts box N+1's
+     * character into its place. `value` stays a derived, compacted (gap-free)
+     * string — the existing external contract (docs: a plain "controlled"
+     * string of the digits typed so far, in order).
+     */
+    private _chars;
+    /**
+     * The compacted string `_chars` currently represents. Lets willUpdate tell
+     * an external `el.value = …` write (e.g. the docs' reset-on-failure
+     * example) apart from `commit()` echoing its own assignment, without a
+     * boolean flag that could get stuck across a no-op property set.
+     */
+    private _lastValue;
+    /** Previous "every box filled" state, so `baht-otp-complete` fires only on the
+     *  not-full → full transition, not on every edit while already full. */
+    private _wasFull;
     private inputs;
     private clean;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** Writes `text` into `_chars` starting at `start`. Returns the index just
+     *  past the last box written (may equal `this.length`). */
+    private fill;
     private commit;
     private onInput;
     private onKeydown;

package/dist/components/primitives/baht-steps.d.ts

@@ -0,0 +1,20 @@
+import { TemplateResult } from 'lit';
+import { BahtElement } from '../base.js';
+/**
+ * <baht-steps> — wizard progress indicator (spec 03). Standalone display
+ * primitive: numbered markers + labels, the current one highlighted, done
+ * ones checked. <baht-workflow show-steps> renders it automatically from its
+ * visible forms.
+ */
+export declare class BahtSteps extends BahtElement {
+    /** Step labels in order. */
+    steps: string[];
+    /** 0-based index of the current step. */
+    current: number;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'baht-steps': BahtSteps;
+    }
+}

package/dist/components/primitives/index.d.ts

@@ -42,4 +42,5 @@ export { BahtErrorState } from './baht-error-state.js';
 export { BahtKeyvalueEditor } from './baht-keyvalue-editor.js';
 export { BahtReferencePicker, type ReferenceOption } from './baht-reference-picker.js';
 export { BahtRepeater } from './baht-repeater.js';
+export { BahtSteps } from './baht-steps.js';
 export { TAG_FOR_TYPE } from './tag-map.js';

package/dist/core/engine/graph.d.ts

@@ -0,0 +1,15 @@
+import { NestedData, WorkflowDefinition } from '../types.js';
+/**
+ * The step after `current` given the data: a formName or 'end'. Rules run
+ * (via evaluate) to decide visibility; hidden targets pass through, cycles
+ * of invisible forms end the walk. `visibility` lets a caller that already
+ * ran the rules (walkPath — data never changes during a walk) skip the
+ * per-hop evaluate() fixpoint.
+ */
+export declare function resolveNext(workflow: WorkflowDefinition, current: string, data: NestedData, visibility?: ReadonlySet<string>): string | 'end';
+/**
+ * The full path a submission takes from the start form to 'end' under this
+ * data — what the server validates against (off-path forms are as good as
+ * skipped). Back-edges that revisit a form stop the walk instead of looping.
+ */
+export declare function walkPath(workflow: WorkflowDefinition, data: NestedData): string[];

package/dist/core/i18n.d.ts

@@ -12,6 +12,12 @@ export interface MessageCatalog {
     compareGte: string;
     compareLt: string;
     compareLte: string;
+    fileTooLarge: string;
+    fileTypeNotAllowed: string;
+    fileRejectedTooLarge: string;
+    uploading: string;
+    uploadFailed: string;
+    removeFile: string;
     addRow: string;
     removeRow: string;
     minRows: string;
@@ -31,6 +37,7 @@ export interface MessageCatalog {
     yes: string;
     no: string;
     emptyValue: string;
+    rowCount: string;
 }
 export type MessageKey = keyof MessageCatalog;
 export type Locale = 'en' | 'th';
@@ -44,5 +51,14 @@ export type Locale = 'en' | 'th';
  * the server). Components read the catalog at render time.
  */
 export declare function setLocale(locale: Locale, overrides?: Partial<MessageCatalog>): void;
+/**
+ * Snapshot of the active catalog. The catalog is module-global — on a server
+ * handling concurrent requests with different locales, wrap the locale switch:
+ * snapshot, setLocale, do the synchronous work, then setCatalog the snapshot
+ * back (bank20baht-validator's `locale` option does exactly this).
+ */
+export declare function getCatalog(): MessageCatalog;
+/** Restore a catalog snapshot taken with getCatalog(). */
+export declare function setCatalog(catalog: MessageCatalog): void;
 /** Resolve one catalog string, interpolating `{param}` placeholders. */
 export declare function t(key: MessageKey, params?: Record<string, unknown>): string;

package/dist/core/index.d.ts

@@ -4,8 +4,9 @@ export { approvalFields } from './approval.js';
 export { validateField } from './validators.js';
 export { resolveViewFields } from './views.js';
 export { applyFlags, flagEnabled } from './flags.js';
-export { setLocale, t } from './i18n.js';
+export { getCatalog, setCatalog, setLocale, t } from './i18n.js';
 export type { Locale, MessageCatalog, MessageKey } from './i18n.js';
 export { evaluate } from './engine/evaluate.js';
+export { resolveNext, walkPath } from './engine/graph.js';
 export { evalCondition, readRef } from './engine/conditions.js';
 export { evalValueExpr } from './engine/expressions.js';

package/dist/core/types.d.ts

@@ -52,6 +52,12 @@ export interface FieldDescriptor {
     accept?: string;
     multiple?: boolean;
     maxSize?: number;
+    /**
+     * Registry uploader name (spec 01 §13). With it, picking a file uploads
+     * immediately and the VALUE becomes a serializable UploadedFile ref
+     * (arrays when `multiple`) — without it, capture-only File handles (v1).
+     */
+    uploader?: string;
     text?: string;
     variant?: string;
     /**
@@ -173,11 +179,33 @@ export interface Rule {
 }
 /** Flag values — typically fetched from one static JSON file (spec 01 §12). */
 export type FeatureFlags = Record<string, boolean>;
+/**
+ * A conditional edge between steps (spec 03 §6). With `transitions` present
+ * the wizard routes as a graph: from a form, the first edge whose `when`
+ * matches wins; `to: 'end'` submits. Forms with no outgoing edges (and
+ * non-matching edge sets) fall back to the next visible form in `order`, so
+ * linear authoring keeps working and branches are added only where needed.
+ */
+export interface Transition {
+    from: string;
+    to: string | 'end';
+    when?: Condition;
+    flag?: string;
+}
 /** A Workflow definition — consumed by <baht-workflow> (spec 00 §4.2). */
 export interface WorkflowDefinition {
     workflowId: string;
     forms: WorkflowForm[];
     rules: Rule[];
+    /** Optional graph routing (spec 03 §6); absent = linear by `order`. */
+    transitions?: Transition[];
+}
+/** Serializable result of a registry uploader (spec 01 §13). */
+export interface UploadedFile {
+    name: string;
+    size: number;
+    type?: string;
+    url: string;
 }
 export interface Registry {
     formatters?: Record<string, (value: unknown) => unknown>;
@@ -185,6 +213,8 @@ export interface Registry {
     validators?: Record<string, (value: unknown) => string | null>;
     /** Option fetchers for `optionsFrom` — receive the form's current flat data. */
     options?: Record<string, (data: Record<string, unknown>) => FieldOption[] | Promise<FieldOption[]>>;
+    /** File uploaders for `uploader` — take the picked File, return its ref. */
+    uploaders?: Record<string, (file: File) => Promise<UploadedFile>>;
 }
 export interface DerivedFieldState {
     visible: boolean;
@@ -204,9 +234,15 @@ export interface Derived {
     forms: Record<string, {
         visible: boolean;
     }>;
+    /**
+     * 'schema' = authoring defect (unknown rule target) — belongs at store
+     * time, not on a submission; 'data' = depends on the submitted values
+     * (non-convergence). Absent kind = 'schema' (pre-0.0.12 engines).
+     */
     errors: Array<{
         ref: string;
         message: string;
+        kind?: 'schema' | 'data';
     }>;
 }
 export interface ValidationError {