bank20baht-ui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nattapong Promthong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,190 @@
+# bahtui
+
+**JSON in, interactive form out.** A framework-neutral form + workflow engine shipped as Web
+Components (Lit, light DOM) with a pure-TypeScript rules core.
+
+```
+npm i bank20baht-ui
+```
+
+## Quick start — one form (Level 1)
+
+```html
+<script type="module">
+  import 'bank20baht-ui';            // registers <baht-form> / <baht-workflow>
+</script>
+<link rel="stylesheet" href="bank20baht-ui/tokens.css" />
+
+<baht-form id="f"></baht-form>
+<script>
+  const el = document.getElementById('f');
+  el.form = {
+    formId: 'f1',
+    formName: 'Person',
+    field_data: [
+      { order: 1, type: 'text',   key: 'firstName', label: 'First name', width: '1/2', required: true, value: '' },
+      { order: 2, type: 'text',   key: 'lastName',  label: 'Last name',  width: '1/2', required: true, value: '' },
+      { order: 3, type: 'number', key: 'age',       label: 'Age',        width: '1/4', min: 0, value: null }
+    ]
+  };
+  el.addEventListener('baht-change', (e) => console.log(e.detail.data));
+  // el.validate() / el.getData() / el.setValue({...}) / el.reset()
+</script>
+```
+
+`<baht-form>` is a **dumb controlled component**: props in → UI → `baht-change` out. No buttons, no
+cross-field logic, no fetch. Your app owns the state (mutate the JSON, feed it back).
+
+## Quick start — wizard with rules (Level 2)
+
+```js
+document.querySelector('baht-workflow').workflow = {
+  workflowId: 'wf-1',
+  forms: [/* {formId, formName, order, field_data}, ... */],
+  rules: [
+    { id: 'skip-person',
+      when: { field: 'Intro.kind', op: 'eq', value: 'company' },
+      then: [{ action: 'skipForm', target: { form: 'Person' } }] },
+    { id: 'vat',
+      when: { field: 'Company.hasVat', op: 'eq', value: true },
+      then: [{ action: 'show', target: { form: 'Company', field: 'vatId' } },
+             { action: 'required', target: { form: 'Company', field: 'vatId' } }],
+      else: [{ action: 'hide', target: { form: 'Company', field: 'vatId' } }] }
+  ]
+};
+```
+
+`<baht-workflow>` walks the forms in `order`, evaluates the rules on every change
+(show/hide/enable/disable/readonly/required/setValue/skipForm…), renders the single
+Next→Submit button, and emits `baht-next` / `baht-submit` / `baht-complete` / `baht-data-change` /
+`baht-step-change`. **The runtime navigates; your app acts.**
+
+## Headless core (any framework, no DOM)
+
+```ts
+import { evaluate, validateField } from 'bank20baht-ui/engine';
+
+const derived = evaluate(workflow, { Intro: { kind: 'company' } });
+// derived.forms  -> { Person: { visible: false }, ... }
+// derived.fields -> { 'Company.vatId': { visible, enabled, readonly, required, computed } }
+// derived.data   -> nested output (hidden/skipped values cleared + excluded)
+```
+
+The engine is a pure function with fixpoint evaluation (cycle-guarded), per-rule `priority`
+conflict resolution, and clear-on-hide/skip semantics. Build a React/Vue renderer on top of it
+without touching the Web Components.
+
+## Functions never travel in JSON
+
+Formatters and custom validators are referenced **by name** and resolved from a registry you
+pass as a prop:
+
+```js
+el.registry = {
+  formatters: { uppercase: (v) => String(v).toUpperCase() },
+  validators: { idCardTH: (v) => isThaiId(v) ? null : 'บัตรประชาชนไม่ถูกต้อง' }
+};
+// JSON side: { formatter: 'uppercase', validators: [{ type: 'custom', fn: 'idCardTH' }] }
+```
+
+## Design system — 20baht
+
+Ships themed as the **20baht design system**: banknote green (`#1F7A4E`), cream
+paper background, Bricolage Grotesque / Geist / Geist Mono, borders-over-shadows,
+"paper" easing. 35+ components:
+
+```html
+<baht-button variant="secondary" size="sm">Cancel</baht-button>
+<baht-badge tone="success" label="Running"></baht-badge>
+<baht-table></baht-table>  <baht-modal></baht-modal>  <baht-toast></baht-toast>  …
+```
+
+- **Data (server-side paging)** — `baht-table` · `baht-list` · `baht-pagination` · `baht-filter`.
+  `items` is one page; `baht-page-change` asks your app to fetch the next one.
+- **Feedback** — `baht-modal` · `baht-toast` · `baht-alert` · `baht-tooltip` · `baht-progress` ·
+  `baht-spinner` · `baht-skeleton`
+- **Inputs** — `baht-rating` · `baht-range` · `baht-otp` (+ the 11 form field primitives)
+- **Structure & nav** — `baht-card` · `baht-fieldset` · `baht-timeline` · `baht-accordion` ·
+  `baht-link` · `baht-breadcrumbs`
+
+## Theming — design tokens + light DOM
+
+Everything renders in light DOM and reads `--baht-*` CSS custom properties — override
+at build time, at runtime, or inject your own sheet entirely:
+
+```css
+.my-app {
+  --baht-color-primary: #047857;
+  --baht-radius-md: 6px;
+}
+.my-app .baht-label { text-transform: uppercase; }  /* your CSS reaches every node */
+```
+
+Styling API: `.baht-form`, `.baht-field`, `.baht-field--w-1-2`, `.baht-field--hidden`, `.baht-label`,
+`.baht-control`, `.baht-error`, `.baht-button`, `.baht-badge` (+ the token list in `tokens.css`).
+Full reference: [docs/theming.md](./docs/theming.md).
+
+## One install, typed everywhere
+
+`npm i bank20baht-ui` ships the runtime **and** the metadata every editor/framework needs —
+no hand-written type declarations in your app:
+
+| You use | What you get | Setup |
+|---|---|---|
+| **JetBrains / WebStorm** (any framework) | autocomplete + docs for every `<baht-*>` tag | none — `web-types` is auto-detected |
+| **VS Code** (HTML / Angular templates) | tag + attribute completion | one line, see below |
+| **React (TSX)** | full JSX typings, typed props per element | `import 'bank20baht-ui/react'` once |
+| **Angular** | template binding on properties/events | `CUSTOM_ELEMENTS_SCHEMA`, see below |
+| **Vue 3** | keep Vue from treating `baht-*` as components | `isCustomElement`, see below |
+| **Phoenix / Rails / plain HTML** | it's just HTML — works as-is | none |
+| **Tooling** (Storybook, docgen, custom) | machine-readable API of all 36 elements | read `dist/custom-elements.json` ([CEM standard](https://github.com/webcomponents/custom-elements-manifest)) |
+
+**VS Code** — `.vscode/settings.json`:
+
+```json
+{ "html.customData": ["./node_modules/bahtui/dist/vscode.html-custom-data.json"] }
+```
+
+**React** — once, in your app entry (or load it globally without a runtime import via
+`"types": ["bank20baht-ui/react"]` in `tsconfig.json`):
+
+```ts
+import 'bank20baht-ui/react'; // JSX typings for every <baht-*> element
+```
+
+React 19+ sets non-string JSX props as DOM properties, so object props (`form`,
+`workflow`, `items`, …) work inline; on React 18 set those via a ref.
+
+**Angular** — the compiler must be told `baht-*` tags are custom elements:
+
+```ts
+@Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA], /* … */ })
+```
+
+**Vue 3** — `vite.config.ts`:
+
+```ts
+vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith('baht-') } } })
+```
+
+## Docs, Storybook, examples
+
+- **Per-component docs**: [`docs/`](./docs/README.md) — one .md per component + framework
+  guides (vanilla / React / Angular).
+- **Storybook**: `pnpm --filter storybook-bahtui dev` → http://localhost:6006.
+- **Copy-out starters**: `examples/vanilla`, `examples/react`, `examples/angular` at the
+  repo root — same workflow JSON in three hosts.
+
+## Field types (12)
+
+`text · textarea · number · email · dropdown · multiselect · checkbox · radio · toggle · date ·
+file (capture only, no upload) · label (static)`
+
+Each field descriptor: `{ order, type, key, label, placeholder, width: '1/4'|'1/2'|'3/4'|'full',
+value, disabled, required, options, maxLength, min, max, validators[], formatter }`.
+
+## Visual Builder
+
+The playground app ships a two-mode Visual Builder (Form mode: palette/WYSIWYG canvas/properties;
+Workflow mode: sequence + rules with a live preview running the real `<baht-workflow>`), with
+Import/Export JSON. Run it from the monorepo: `pnpm --filter playground dev` → `/builder`.

package/dist/chunks/baht-toast-BlZBbneT.js

@@ -0,0 +1,324 @@
+import { LitElement as E, nothing as h, html as d, svg as p } from "lit";
+import { property as a, query as C, customElement as $, state as _ } from "lit/decorators.js";
+var B = Object.defineProperty, f = (t, e, i, o) => {
+  for (var s = void 0, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (s = n(e, i, s) || s);
+  return s && B(e, i, s), s;
+};
+class v extends E {
+  createRenderRoot() {
+    return this;
+  }
+}
+function w(t, e) {
+  let i = e;
+  for (; i.parentNode && i.parentNode !== t; ) i = i.parentNode;
+  const o = Array.from(t.childNodes).filter(
+    (s) => s !== i && s.nodeType !== Node.COMMENT_NODE
+  );
+  o.length > 0 && e.append(...o);
+}
+class m extends v {
+  constructor() {
+    super(...arguments), this.value = null, this.disabled = !1, this.readonly = !1, this.required = !1, this.error = null;
+  }
+  /** Emit the user's edit upward (composed so it crosses any boundary). */
+  emitInput(e) {
+    this.dispatchEvent(
+      new CustomEvent("baht-input", {
+        detail: { key: this.field.key, value: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  renderLabel() {
+    return this.field.label ? d`<label class="baht-label" id=${this.labelId} for=${this.controlId}>
+      ${this.field.label}${this.required ? d`<span class="baht-required-mark" aria-hidden="true">*</span>` : h}
+    </label>` : h;
+  }
+  get controlId() {
+    return `baht-${this.field.key}`;
+  }
+  get labelId() {
+    return `${this.controlId}-label`;
+  }
+  get errorId() {
+    return `${this.controlId}-error`;
+  }
+  get helpId() {
+    return `${this.controlId}-help`;
+  }
+  /** id list for the control's aria-describedby: error first, then help. */
+  get describedBy() {
+    const e = [this.error ? this.errorId : "", this.field.help ? this.helpId : ""].filter(
+      Boolean
+    );
+    return e.length > 0 ? e.join(" ") : h;
+  }
+  /** 'true' while the field is in error, else absent (styles hook on [aria-invalid]). */
+  get invalid() {
+    return this.error ? "true" : h;
+  }
+  render() {
+    return d`
+      ${this.renderLabel()}
+      ${this.renderControl()}
+      ${this.field.help ? d`<div class="baht-help" id=${this.helpId}>${this.field.help}</div>` : h}
+      ${this.error ? d`<div class="baht-error" id=${this.errorId} role="alert">${this.error}</div>` : h}
+    `;
+  }
+}
+f([
+  a({ attribute: !1 })
+], m.prototype, "field");
+f([
+  a({ attribute: !1 })
+], m.prototype, "value");
+f([
+  a({ type: Boolean })
+], m.prototype, "disabled");
+f([
+  a({ type: Boolean })
+], m.prototype, "readonly");
+f([
+  a({ type: Boolean })
+], m.prototype, "required");
+f([
+  a({ attribute: !1 })
+], m.prototype, "error");
+const O = {
+  copy: p`<rect x="6" y="6" width="8" height="8" rx="1.5"/><path d="M10 6V4.5A1.5 1.5 0 0 0 8.5 3H4.5A1.5 1.5 0 0 0 3 4.5v4A1.5 1.5 0 0 0 4.5 10H6"/>`,
+  check: p`<path d="M3.5 8.5 6.5 11.5 12.5 4.5"/>`,
+  download: p`<path d="M8 3v7m0 0 3-3m-3 3L5 7"/><path d="M3 12h10"/>`,
+  upload: p`<path d="M8 12V5m0 0 3 3M8 5 5 8"/><path d="M3 4h10"/>`,
+  plus: p`<path d="M8 3.5v9M3.5 8h9"/>`,
+  external: p`<path d="M6 3H3.5v9.5h9.5V10"/><path d="M9 3h4v4"/><path d="M13 3 7.5 8.5"/>`,
+  close: p`<path d="M4 4l8 8M12 4l-8 8"/>`,
+  play: p`<path d="M5 3.5v9l7-4.5z"/>`
+};
+function M(t) {
+  return d`<svg
+    class="baht-icon"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >${O[t]}</svg>`;
+}
+function I(t) {
+  return t in O;
+}
+var P = Object.defineProperty, S = Object.getOwnPropertyDescriptor, u = (t, e, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? S(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (s = (o ? n(e, i, s) : n(s)) || s);
+  return o && s && P(e, i, s), s;
+};
+let c = class extends v {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.size = "md", this.disabled = !1, this.type = "button", this.label = "", this.icon = "", this.iconOnly = !1;
+  }
+  firstUpdated() {
+    this.iconOnly || w(this, this.buttonEl);
+  }
+  render() {
+    const t = this.variant === "primary" ? "" : ` baht-button--${this.variant}`, e = this.size === "md" ? "" : ` baht-button--${this.size}`, i = this.iconOnly ? " baht-button--icon" : "", o = this.icon && I(this.icon) ? M(this.icon) : h;
+    return d`<button
+      class="baht-button${t}${e}${i}"
+      type=${this.type}
+      aria-label=${this.iconOnly && this.label ? this.label : h}
+      ?disabled=${this.disabled}
+    >${o}${this.iconOnly ? h : this.label}</button>`;
+  }
+};
+u([
+  a()
+], c.prototype, "variant", 2);
+u([
+  a()
+], c.prototype, "size", 2);
+u([
+  a({ type: Boolean })
+], c.prototype, "disabled", 2);
+u([
+  a()
+], c.prototype, "type", 2);
+u([
+  a()
+], c.prototype, "label", 2);
+u([
+  a()
+], c.prototype, "icon", 2);
+u([
+  a({ type: Boolean, attribute: "icon-only" })
+], c.prototype, "iconOnly", 2);
+u([
+  C("button")
+], c.prototype, "buttonEl", 2);
+c = u([
+  $("baht-button")
+], c);
+var k = Object.defineProperty, x = Object.getOwnPropertyDescriptor, y = (t, e, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? x(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (s = (o ? n(e, i, s) : n(s)) || s);
+  return o && s && k(e, i, s), s;
+};
+let l = class extends v {
+  constructor() {
+    super(...arguments), this.open = !1, this.heading = "", this.showClose = !0, this.closeOnScrim = !0, this.previousFocus = null, this.onKeydown = (t) => {
+      !this.open || l.openStack.at(-1) !== this || (t.key === "Escape" ? this.requestClose("escape") : t.key === "Tab" && this.trapFocus(t));
+    };
+  }
+  focusables() {
+    const t = this.querySelector(".baht-modal");
+    return t ? Array.from(
+      t.querySelectorAll(
+        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    ) : [];
+  }
+  /** Keep Tab cycling inside the dialog (no keyboard escape to the page behind). */
+  trapFocus(t) {
+    const e = this.focusables(), i = this.querySelector(".baht-modal");
+    if (e.length === 0) {
+      i == null || i.focus(), t.preventDefault();
+      return;
+    }
+    const o = e[0], s = e[e.length - 1], r = document.activeElement;
+    if (!this.contains(r)) {
+      o.focus(), t.preventDefault();
+      return;
+    }
+    t.shiftKey && (r === o || r === i) ? (s.focus(), t.preventDefault()) : !t.shiftKey && r === s && (o.focus(), t.preventDefault());
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("keydown", this.onKeydown);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this.onKeydown), l.openStack = l.openStack.filter((t) => t !== this), super.disconnectedCallback();
+  }
+  firstUpdated() {
+    w(this, this.bodyEl);
+  }
+  updated(t) {
+    var e, i;
+    if (t.has("open") && (l.openStack = l.openStack.filter((o) => o !== this), this.open && l.openStack.push(this)), t.has("open") && this.open && (this.previousFocus = document.activeElement, (e = this.querySelector(".baht-modal")) == null || e.focus()), t.has("open") && !this.open && t.get("open") === !0) {
+      const o = this.previousFocus;
+      this.previousFocus = null, o != null && o.isConnected && (!document.activeElement || document.activeElement === document.body || this.contains(document.activeElement)) && ((i = o.focus) == null || i.call(o));
+    }
+  }
+  /** Ask the host to close (the host owns `open`). */
+  requestClose(t = "button") {
+    this.dispatchEvent(
+      new CustomEvent("baht-close", { detail: { reason: t }, bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    return d`<div
+      class="baht-modal-scrim"
+      style=${this.open ? h : "display:none"}
+      @click=${(t) => this.closeOnScrim && t.target === t.currentTarget && this.requestClose("scrim")}
+    >
+      <div class="baht-modal" role="dialog" aria-modal="true" aria-label=${this.heading || "Dialog"} tabindex="-1">
+        ${this.heading || this.showClose ? d`<header class="baht-modal-header">
+              <div class="baht-modal-title">${this.heading}</div>
+              ${this.showClose ? d`<button type="button" class="baht-modal-close" aria-label="Close" @click=${() => this.requestClose("button")}>×</button>` : h}
+            </header>` : h}
+        <div class="baht-modal-body"></div>
+      </div>
+    </div>`;
+  }
+};
+l.openStack = [];
+y([
+  a({ type: Boolean, reflect: !0 })
+], l.prototype, "open", 2);
+y([
+  a()
+], l.prototype, "heading", 2);
+y([
+  a({ type: Boolean, attribute: "show-close" })
+], l.prototype, "showClose", 2);
+y([
+  a({ type: Boolean, attribute: "close-on-scrim" })
+], l.prototype, "closeOnScrim", 2);
+y([
+  C(".baht-modal-body")
+], l.prototype, "bodyEl", 2);
+l = y([
+  $("baht-modal")
+], l);
+var q = Object.defineProperty, D = Object.getOwnPropertyDescriptor, g = (t, e, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? D(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (s = (o ? n(e, i, s) : n(s)) || s);
+  return o && s && q(e, i, s), s;
+};
+let b = class extends v {
+  constructor() {
+    super(...arguments), this.duration = 4e3, this.entries = [], this.timers = /* @__PURE__ */ new Map();
+  }
+  show(t) {
+    const e = {
+      id: ++b.counter,
+      message: t.message,
+      tone: t.tone ?? "neutral",
+      duration: t.duration ?? this.duration
+    };
+    return this.entries = [...this.entries, e], e.duration > 0 && this.timers.set(
+      e.id,
+      setTimeout(() => this.dismiss(e.id), e.duration)
+    ), e.id;
+  }
+  dismiss(t) {
+    const e = this.entries.find((i) => i.id === t);
+    e && (clearTimeout(this.timers.get(t)), this.timers.delete(t), this.entries = this.entries.filter((i) => i.id !== t), this.dispatchEvent(
+      new CustomEvent("baht-dismiss", {
+        detail: { id: t, message: e.message },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  disconnectedCallback() {
+    this.timers.forEach((t) => clearTimeout(t)), this.timers.clear(), super.disconnectedCallback();
+  }
+  render() {
+    return d`<div class="baht-toaster" role="status" aria-live="polite">
+      ${this.entries.map(
+      // Danger/warning interrupt (role=alert); the rest ride the polite container.
+      (t) => d`<div
+          class="baht-toast ${t.tone === "neutral" ? "" : `baht-toast--${t.tone}`}"
+          role=${t.tone === "danger" || t.tone === "warning" ? "alert" : h}
+        >
+          <span class="baht-toast-message">${t.message}</span>
+          <button type="button" class="baht-toast-dismiss" aria-label="Dismiss" @click=${() => this.dismiss(t.id)}>×</button>
+        </div>`
+    )}
+    </div>`;
+  }
+};
+b.counter = 0;
+g([
+  a({ type: Number })
+], b.prototype, "duration", 2);
+g([
+  _()
+], b.prototype, "entries", 2);
+b = g([
+  $("baht-toast")
+], b);
+export {
+  v as B,
+  w as a,
+  m as b,
+  c,
+  l as d,
+  b as e,
+  I as i,
+  M as r
+};

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

@@ -0,0 +1,41 @@
+import { TemplateResult } from 'lit';
+import { BahtElement } from './base.js';
+import { DerivedFieldState, FormDefinition, Registry, ValidationError } from '../core/types.js';
+export interface BahtFormOptions {
+    validateOn?: 'change' | 'blur' | 'submit';
+}
+/**
+ * <baht-form> — dumb controlled form renderer (spec 01).
+ * JSON in (form + value + registry) -> UI out; emits `baht-change` / `baht-validity`.
+ * No buttons, no cross-field logic — that's <baht-workflow> or the host.
+ */
+export declare class BahtForm extends BahtElement {
+    form: FormDefinition;
+    value: Record<string, unknown>;
+    registry: Registry;
+    options: BahtFormOptions;
+    /** L2 (workflow) derived per-field UI state, keyed by field key. Optional. */
+    fieldStates: Record<string, DerivedFieldState>;
+    /** Edits the user made since the host last set `value` (controlled overlay). */
+    private edits;
+    private errors;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    private get sortedFields();
+    private stateFor;
+    private valueFor;
+    getData(): Record<string, unknown>;
+    setValue(patch: Record<string, unknown>): void;
+    validate(): {
+        valid: boolean;
+        errors: ValidationError[];
+    };
+    reset(): void;
+    private onFieldInput;
+    private renderField;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'baht-form': BahtForm;
+    }
+}

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

@@ -0,0 +1,64 @@
+import { TemplateResult } from 'lit';
+import { BahtElement } from './base.js';
+import { NestedData, Registry, WorkflowDefinition } from '../core/types.js';
+/**
+ * <baht-workflow> — the optional brain (spec 03). Wraps the current form in an
+ * internal <baht-form>, evaluates rules on every change, walks the visible forms
+ * in linear `order`, and owns the single Next/Submit button.
+ * Forms with kind 'approval' render a decision step instead (spec 03 §4):
+ * a summary of earlier answers plus Approve/Reject (+ optional comment); the
+ * decision lands in data as `<formName>.decision` so rules can branch on it.
+ * The runtime navigates; the host acts (on baht-next / baht-submit / baht-approve /
+ * baht-reject / baht-complete).
+ */
+export declare class BahtWorkflow extends BahtElement {
+    workflow: WorkflowDefinition;
+    value: NestedData;
+    registry: Registry;
+    validateGate: boolean;
+    nextLabel: string;
+    submitLabel: string;
+    backLabel: string;
+    showBack: boolean;
+    private data;
+    private derived;
+    private current;
+    private approvalError;
+    private history;
+    get currentFormName(): string | null;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    private reevaluate;
+    /** Forms in ascending order whose derived visibility is true. */
+    private get visibleForms();
+    private get currentForm();
+    private get isLast();
+    private fieldStatesFor;
+    private get formEl();
+    getData(): NestedData;
+    next(): void;
+    /** Advance past the current form: submit+complete on the last one, else step forward. */
+    private advance;
+    /** Approve the current approval step (same as pressing its Approve button). */
+    approve(): void;
+    /** Reject the current approval step (same as pressing its Reject button). */
+    reject(): void;
+    private decide;
+    /** Jump back to a visible form, truncating the history to that point. */
+    private gotoForm;
+    back(): void;
+    gotoStart(): void;
+    private onFormChange;
+    private onCommentInput;
+    private emit;
+    /** Human-readable value for the summary: option labels, Yes/No, em-dash for empty. */
+    private displayValue;
+    /** Forms the approval step summarizes: configured list, else every earlier plain form. */
+    private summaryForms;
+    private renderApproval;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'baht-workflow': BahtWorkflow;
+    }
+}

package/dist/components/base.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, nothing, TemplateResult } from 'lit';
+import { FieldDescriptor } from '../core/types.js';
+/** Light-DOM Lit base: consumer CSS reaches every internal node (spec 01 §6). */
+export declare class BahtElement extends LitElement {
+    protected createRenderRoot(): HTMLElement;
+}
+/**
+ * Light DOM has no <slot>. Call from firstUpdated() to move author-supplied
+ * children into `slot` — everything that isn't the rendered `root` or a Lit
+ * comment marker. (During HTML parsing children can land after
+ * connectedCallback fires, so sweeping at first render is the reliable point.)
+ */
+export declare function adoptLightChildren(host: HTMLElement, slot: HTMLElement): void;
+/**
+ * Shared shape of every field primitive: descriptor + value in, `baht-input` out.
+ * Dumb and controlled — never mutates its own `value` prop; the host re-feeds it.
+ */
+export declare abstract class BahtFieldBase extends BahtElement {
+    field: FieldDescriptor;
+    value: unknown;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    error: string | null;
+    /** Emit the user's edit upward (composed so it crosses any boundary). */
+    protected emitInput(value: unknown): void;
+    protected abstract renderControl(): TemplateResult;
+    protected renderLabel(): TemplateResult | typeof nothing;
+    protected get controlId(): string;
+    protected get labelId(): string;
+    protected get errorId(): string;
+    protected get helpId(): string;
+    /** id list for the control's aria-describedby: error first, then help. */
+    protected get describedBy(): string | typeof nothing;
+    /** 'true' while the field is in error, else absent (styles hook on [aria-invalid]). */
+    protected get invalid(): string | typeof nothing;
+    protected render(): TemplateResult;
+}