api_binding_ui 0.0.0-stage → 1.1.0

package/SKILL.md

@@ -0,0 +1,350 @@
+---
+name: api-binding-ui
+description: "Use when integrating api_binding_ui into React screens, dialogs, drawers or forms, importing OpenAPI contracts, proposing component mappings, or validating requests offline."
+---
+
+# API Binding Studio Integration Skill
+
+This skill defines the operational standards and technical requirements for AI agents integrating `api_binding_ui` into frontend codebases. Follow these instructions whenever adding, updating, or maintaining action dialogs, flyout drawers, forms, or data grid action bars.
+
+---
+
+## 1. When to Apply This Skill
+
+Apply this skill whenever any of the following conditions are met:
+1. The user asks to bind, map, or connect a screen, dialog, modal, drawer, or action form to backend APIs.
+2. The user requests an API binding trigger button on an action modal (such as "Add Notes", "Create P2P", "Dispute Invoice", "Edit Customer", "Assign Task").
+3. The application requires visual mapping, request payload previewing, or zero-network simulated validation across selected table/grid records.
+4. Setting up the `/api-binding/$key` studio route in an application router.
+
+---
+
+## 2. Dependency Verification
+
+Install the published release using the host's package manager and update its existing lockfile:
+
+```bash
+npm install api_binding_ui
+```
+
+Use the published package from the host project's package manager. Do not use a local filesystem dependency in a deployed project.
+
+### Catalog And Proposed Mappings Are Host Responsibilities
+
+The package performs visual mapping and offline request validation, not live API execution or runtime AI inference. Lovable's AI should inspect the host components and attached OpenAPI descriptions/tags, then generate editable per-window `MappingFile` seeds. `proposeConfig` imports those seeds; it does not guess endpoints.
+
+For an OpenAPI file attached to an AI coding task, have the AI generate a static typed `ApiDefinition[]` module from that file; do not copy the YAML into the app or add a runtime YAML parser just for binding. `buildCatalogFromOpenApi` is available when a host already has a parsed OpenAPI 3.0/3.1 object, but is not required for a generated static catalog. The catalog should preserve operationId, summary, description, tags, parameter descriptions and request schemas. `definitions` must be passed to every `BindApiButton` through a shared host wrapper; the default is an empty array, not automatic API discovery. `hook` is a catalog identifier, not a callable client.
+
+Use the exported `windowIds` and `componentId` helpers instead of deriving keys or action names twice:
+
+```tsx
+import { componentId, windowIds, type MappingFile } from "api_binding_ui";
+
+const ids = windowIds({ appId: "collections", gridId: "worklistUIGrid", windowId: "worklist-add-notes" });
+export const mappingFile: MappingFile = {
+  key: ids.key,
+  app: ids.appId,
+  grid: ids.gridId,
+  window: ids.windowId,
+  name: "Add Notes",
+  savedAt: new Date().toISOString(),
+  read: [],
+  write: [{
+    component: componentId({ kind: "button", name: "Submit" }),
+    api: "/cls/v1/notes",
+    method: "POST",
+    params: [
+      { param: "noteSubject", in: "body", source: "subject", property: "subject" },
+      { param: "noteDescription", in: "body", source: "notes", property: "notes" },
+      { param: "noteTypeId", in: "body", source: "notesType", property: "notesType" },
+      { param: "customerId", in: "body", source: "worklistUIGrid", property: "worklistUIGrid.customerId" },
+    ],
+  }],
+};
+```
+
+This example assumes the real button is Submit, option values are numeric note-type IDs and exactly one customer is selected. Use actual host IDs and labels. `noteType` is a separate string property from `noteTypeId`. Never rename API fields to fit a simulator, substitute a customer ID for a note ID, or fabricate lookup APIs. Multiple selected rows feed comma-joined array values; scalar parameters require one row. The package does not dispatch one live request per row.
+
+Match APIs using component labels/names, window and parent entity, operationId, summary, description, tags and schema compatibility. POST search operations are reads. Automatically populate only high-confidence mappings; leave missing or ambiguous sources unresolved with a report. Do not invent IDs, credentials or defaults. Fields use their actual names as sources, parents use `<windowId>.<fieldName>`, and literals use the exported `FREE_TEXT_SOURCE` with the literal in `property`. Preserve `in` to distinguish same-name path/body/query/header parameters.
+
+---
+
+## 3. Router Setup Requirements
+
+Every application using `api_binding_ui` must declare a route matching `/api-binding/$key`.
+
+### TanStack Router (`src/routes/api-binding.$key.tsx`)
+```tsx
+import { createFileRoute } from "@tanstack/react-router";
+import { ApiBindingWorkspace } from "api_binding_ui";
+import "api_binding_ui/style.css";
+
+export const Route = createFileRoute("/api-binding/$key")({
+  head: () => ({
+    meta: [{ title: "API Binding Studio" }],
+  }),
+  component: ApiBindingRouteView,
+});
+
+function ApiBindingRouteView() {
+  const { key } = Route.useParams();
+  return <ApiBindingWorkspace key={key} pageKey={key} />;
+}
+```
+
+### React Router (`src/routes/ApiBindingRoute.tsx`)
+```tsx
+import { useParams } from "react-router-dom";
+import { ApiBindingWorkspace } from "api_binding_ui";
+import "api_binding_ui/style.css";
+
+export function ApiBindingRoute() {
+  const { key = "default" } = useParams<{ key: string }>();
+  return <ApiBindingWorkspace key={key} pageKey={key} />;
+}
+```
+
+Register this component explicitly in the existing React Router tree with `<Route path="/api-binding/:key" element={<ApiBindingRoute />} />`; the component alone does not register a route. Do not add a second BrowserRouter. For TanStack, follow the host's existing file/code route conventions. Import package CSS once. The studio opens a named same-origin tab inside the host app; verify popup permissions, direct-route refresh and deployment fallback routing.
+
+---
+
+## 4. Host Form Integration Rules
+
+When rendering forms, modals, or drawers that will be bound to APIs, AI agents MUST follow these structural rules:
+
+### Rule 1: Form Inputs Must Have Identifiers
+Every form control (`<input>`, `<select>`, `<textarea>`, or custom combobox) MUST have a `name` attribute matching the semantic field name (or an `id`, `data-testid`, or `aria-label`).
+- Correct: `<input name="subject" required />`
+- Incorrect: `<input placeholder="Subject" />` (lacks identifier, will be ignored by DOM discovery).
+
+### Rule 2: Explicit Labels
+Controls should be paired with standard `<label htmlFor="...">` tags or include `aria-label`. The studio extracts human-readable field labels from these associations.
+
+### Rule 3: Pass Dropdown Options via `options` Prop
+Dropdown choices captured in state or constants must be passed to `<BindApiButton />` using the `options` prop:
+```tsx
+const noteTypeOptions = [
+  { value: "1", label: "General Follow-up" },
+  { value: "2", label: "Promise to Pay" },
+];
+
+const templateOptions = [
+  {
+    value: "tmpl-1",
+    label: "Payment Reminder",
+    subject: "Payment Reminder",
+    description: "Followed up with customer regarding pending invoices.",
+  },
+];
+
+<BindApiButton
+  // ...
+  options={{
+    notesType: noteTypeOptions,
+    template: templateOptions,
+  }}
+/>
+```
+
+### Rule 4: Pass Grid Selection when Targeting Grid Rows
+If the action is triggered from or operates on selected table/grid rows:
+```tsx
+<BindApiButton
+  // ...
+  grid={{
+    gridId: "worklistUIGrid",
+    rows: selectedRecords,
+  }}
+/>
+```
+If the screen does not operate on a grid (such as a standalone dispute creation screen or customer profile editor), omit the `grid` prop. The studio automatically adapts its target context view and simulation engine to direct screen input.
+
+---
+
+## 5. Complete Implementation Patterns
+
+### Pattern A: Modal Dialog Triggered from a Data Grid
+```tsx
+import * as React from "react";
+import { BindApiButton, type ApiDefinition, type MappingFile } from "api_binding_ui";
+
+interface CustomerRecord {
+  customerId: number;
+  customerName: string;
+}
+
+export function AddNotesModal({
+  open,
+  onClose,
+  selectedCustomers,
+  definitions,
+  mappingFile,
+}: {
+  open: boolean;
+  onClose: () => void;
+  selectedCustomers: CustomerRecord[];
+  definitions: ApiDefinition[];
+  mappingFile: MappingFile;
+}) {
+  if (!open) return null;
+
+  const noteTypeOptions = [
+    { value: "1", label: "General Follow-up" },
+    { value: "2", label: "Promise to Pay" },
+  ];
+
+  const templateOptions = [
+    {
+      value: "tmpl-payment",
+      label: "Payment Reminder",
+      subject: "Reminder: Invoice due",
+      description: "Contacted customer regarding pending balance.",
+    },
+  ];
+
+  return (
+    <div role="dialog" aria-labelledby="dialog-title" className="ds-dialog">
+      <h2 id="dialog-title">Add Notes</h2>
+
+      <div className="form-group">
+        <label htmlFor="notesType">Notes Type</label>
+        <select id="notesType" name="notesType" required>
+          {noteTypeOptions.map((opt) => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="subject">Subject</label>
+        <input id="subject" name="subject" required />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="notes">Description</label>
+        <textarea id="notes" name="notes" required />
+      </div>
+
+      <div className="button-bar">
+        <button type="button" onClick={onClose}>Cancel</button>
+        <button type="submit">Submit</button>
+
+        <BindApiButton
+          definitions={definitions}
+          mappingFile={mappingFile}
+          appId="collections"
+          windowId="worklist-add-notes"
+          source="Add Notes"
+          parent="Worklist Grid"
+          grid={{
+            gridId: "worklistUIGrid",
+            rows: selectedCustomers,
+          }}
+          options={{
+            notesType: noteTypeOptions,
+            template: templateOptions,
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+### Pattern B: Standalone Drawer or Form without Grid
+```tsx
+import * as React from "react";
+import { BindApiButton, type ApiDefinition, type MappingFile } from "api_binding_ui";
+
+export function DisputeDrawer({ open, onClose, definitions, mappingFile }: { open: boolean; onClose: () => void; definitions: ApiDefinition[]; mappingFile: MappingFile }) {
+  if (!open) return null;
+
+  const disputeReasons = [
+    { value: "DAMAGED", label: "Damaged Goods" },
+    { value: "PRICING", label: "Incorrect Pricing" },
+  ];
+
+  return (
+    <aside className="drawer-container" aria-label="Create Dispute">
+      <h2>Create Dispute</h2>
+
+      <form id="dispute-form">
+        <label htmlFor="reasonCode">Dispute Reason</label>
+        <select id="reasonCode" name="reasonCode" required>
+          {disputeReasons.map((r) => (
+            <option key={r.value} value={r.value}>{r.label}</option>
+          ))}
+        </select>
+
+        <label htmlFor="amount">Disputed Amount</label>
+        <input id="amount" name="amount" type="number" required />
+
+        <label htmlFor="comments">Comments</label>
+        <textarea id="comments" name="comments" />
+
+        <div className="drawer-actions">
+          <button type="button" onClick={onClose}>Cancel</button>
+          <button type="submit">Submit Dispute</button>
+
+          <BindApiButton
+            definitions={definitions}
+            mappingFile={mappingFile}
+            appId="receivables"
+            windowId="disputes-create"
+            source="Create Dispute"
+            parent="Disputes Management"
+            options={{
+              reasonCode: disputeReasons,
+            }}
+          />
+        </div>
+      </form>
+    </aside>
+  );
+}
+```
+
+---
+
+## 6. Listening to Applied Configurations
+
+When the user validates requests and applies a binding, the configuration is stored in browser storage. `useAppliedBinding` only observes it: it does not submit requests, populate fields from responses, or write repository files. Preserve existing host API clients/runtime behavior. Live execution is a separate integration task.
+
+```tsx
+import * as React from "react";
+import { useAppliedBinding } from "api_binding_ui";
+
+export function ScreenComponent() {
+  const { isApplied, appliedConfig } = useAppliedBinding(
+    "collections.worklistUIGrid.worklist-add-notes"
+  );
+
+  React.useEffect(() => {
+    if (isApplied && appliedConfig) {
+      // Configuration applied: access appliedConfig.calls or appliedConfig.fields
+    }
+  }, [isApplied, appliedConfig]);
+}
+```
+
+---
+
+## 7. Agent Verification Checklist
+
+Before completing an integration task, the AI agent must verify:
+1. `name` attributes are assigned to all form controls on the host screen.
+2. The `<BindApiButton />` has accurate `appId`, `windowId`, `source`, and `parent` strings.
+3. Dropdown choices are forwarded in the `options` record.
+4. The application router has an active route at `/api-binding/$key` mounting `<ApiBindingWorkspace />`.
+5. No emojis or informal characters are introduced into the code or documentation.
+6. Every trigger supplies the contract `definitions` and its own proposed/saved `mappingFile`. Existing browser drafts take precedence over seeds; never erase all browser storage to refresh defaults.
+7. Portal/custom controls are scoped to their actual owner using `containerRef`, `containerSelector`, `rootElement` or `formId`. Custom widgets expose their real values through `name`/`data-value` or a complete `components` override; `components` and `buttons` replace, not append to, discovery.
+8. Pass actual dropdown options and live selected rows. Use `notifySelectionUpdate(pageKey, { id: gridId, rows })` when selection changes while the studio is open. Forward `parents`, `kind` and `trigger` through host wrappers.
+9. Validate all configured read/write requests through the generic Validate dialog, including read-only mappings and non-Submit buttons. Offline validation covers request constraints, not network access, authorization, responses or business success. Legacy `simulateSave`/`SimulationDialog` remain note-specific exports and are not the workspace's validation flow.
+10. Config, contract and captured source changes require revalidation; existing draft mappings survive the upgrade but old verification tokens do not authorize Apply. Never manually forge applied storage or signatures.
+11. Do not capture passwords, tokens or secrets in snapshots/options/mappings. Pass an explicit safe component list for sensitive forms and keep authentication in the existing secure client. Browser snapshots, selections and drafts contain captured data and are not shared server-side persistence.
+12. Run host tests/typecheck/build and browser-check every binding trigger, selected-row updates, standalone forms, similar window names, popup restrictions, existing drafts, metadata and desktop/mobile layout. Confirm that opening, previewing and validating send no API request.
+
+## Migration From api-binding-studio
+
+The older wrapper's `apiInfoList`, `onSave` and `grid.id` are not new-button props. Replace them with `definitions`, `mappingFile` and `grid.gridId`. The package renders its own button: do not nest another Button inside it. A browser Apply does not replace a server-side source-file save handler. Preserve or explicitly report legacy file persistence/runtime behavior rather than claiming it was migrated automatically. Prepare the host changes inside the Lovable app only; do not copy this package's studio code.

package/dist/api-binding-ui.css

@@ -0,0 +1,248 @@
+/* src/styles/highradius-bridge.css */
+
+
+/* src/styles/index.css */
+
+
+/* src/styles/workspace.css */
+.binding-workspace, .binding-workspace * {
+  box-sizing: border-box;
+}
+
+.binding-workspace, .api-binding, .binding-v2 {
+  display: flex;
+  background: var(--ds-color-background, #fff);
+  color: var(--ds-color-foreground, #0f172a);
+  font-family: var(--ds-font-family-sans, sans-serif);
+  flex-direction: column;
+  height: 100vh;
+}
+
+.binding-workspace h1, .api-binding h1, .binding-v2 h1 {
+  font-size: var(--ds-font-size-2xl, 1.5rem);
+  font-weight: var(--ds-font-weight-bold, 700);
+  margin: 0;
+}
+
+.binding-workspace h2, .api-binding h2, .binding-v2 h2 {
+  font-size: var(--ds-font-size-lg, 1.125rem);
+  font-weight: var(--ds-font-weight-semibold, 600);
+  margin: 0;
+}
+
+.binding-workspace h3, .api-binding h3, .binding-v2 h3 {
+  font-size: var(--ds-font-size-base, .875rem);
+  font-weight: var(--ds-font-weight-semibold, 600);
+  margin: 0;
+}
+
+.binding-workspace p, .api-binding p, .binding-v2 p {
+  line-height: var(--ds-line-height-normal, 1.5);
+  margin: 0;
+}
+
+.binding-header, .binding-footer, .binding-v2-header, .binding-v2-footer {
+  padding: var(--ds-page-padding, 1rem 1.5rem);
+  display: flex;
+  gap: var(--ds-space-4, 1rem);
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items:  center;
+}
+
+.binding-header, .binding-v2-header {
+  border-bottom-width: var(--ds-screen-surface-border-width, 1px);
+  border-bottom-style: solid;
+  border-bottom-color: var(--ds-color-border, #e2e8f0);
+}
+
+.binding-body, .binding-v2-body {
+  overflow: auto;
+  position: relative;
+  padding: var(--ds-page-padding, 1rem 1.5rem);
+  flex: 1;
+  min-height: 0;
+}
+
+.binding-columns, .binding-v2-columns {
+  isolation: isolate;
+  display: flex;
+  gap: var(--ds-space-8, 2rem);
+  flex-wrap: wrap;
+  align-items:  start;
+}
+
+.binding-main, .binding-v2-main {
+  flex-grow: 1;
+  flex-basis: var(--ds-dialog-form-min-width, 32rem);
+  padding-bottom: var(--ds-space-12, 3rem);
+}
+
+.binding-main, .binding-stack, .binding-v2-main, .binding-v2-stack {
+  display: flex;
+  gap: var(--ds-space-4, 1rem);
+  flex-direction: column;
+  min-width: 0;
+}
+
+.binding-section, .binding-v2-section {
+  padding-bottom: var(--ds-space-6, 1.5rem);
+  display: flex;
+  gap: var(--ds-space-4, 1rem);
+  border-bottom-width: var(--ds-screen-surface-border-width, 1px);
+  border-bottom-style: solid;
+  border-bottom-color: var(--ds-color-border, #e2e8f0);
+  flex-direction: column;
+}
+
+.binding-section-title, .binding-v2-section-title {
+  display: flex;
+  justify-content: space-between;
+  align-items:  center;
+  gap: var(--ds-space-4, 1rem);
+}
+
+.binding-muted, .binding-v2-muted {
+  color: var(--ds-color-muted-foreground, #64748b);
+  font-size: var(--ds-font-size-sm, .8125rem);
+}
+
+.binding-preview, .binding-v2-preview {
+  flex-basis: var(--ds-dialog-min-width, 24rem);
+  position: sticky;
+  background: var(--ds-color-surface, #fff);
+  border-width: var(--ds-screen-surface-border-width, 1px);
+  border-style: solid;
+  border-color: var(--ds-color-border, #e2e8f0);
+  border-radius: var(--ds-radius-md, 6px);
+  padding: var(--ds-space-6, 1.5rem);
+  display: flex;
+  gap: var(--ds-space-4, 1rem);
+  flex-direction: column;
+  flex-grow: 0;
+  max-width: 100%;
+  top: 0;
+}
+
+.binding-panel, .binding-v2-panel {
+  position: absolute;
+  width: var(--ds-dialog-form-min-width, 32rem);
+  background: var(--ds-color-background, #fff);
+  border-left-width: var(--ds-screen-surface-border-width, 1px);
+  border-left-style: solid;
+  border-left-color: var(--ds-color-border, #e2e8f0);
+  box-shadow: var(--ds-shadow-md, 0 4px 6px -1px #0000001a);
+  padding: var(--ds-space-6, 1.5rem);
+  display: flex;
+  gap: var(--ds-space-6, 1.5rem);
+  z-index: var(--ds-focus-z-index, 50);
+  flex-direction: column;
+  max-width: 100%;
+  min-height: 100%;
+  top: 0;
+  right: 0;
+}
+
+.binding-details, .binding-v2-details {
+  display: flex;
+  gap: var(--ds-space-2, .5rem);
+  font-size: var(--ds-font-size-sm, .8125rem);
+  overflow-wrap: anywhere;
+  flex-direction: column;
+}
+
+.binding-details summary, .binding-v2-details summary {
+  cursor: pointer;
+  color: var(--ds-color-muted-foreground, #64748b);
+}
+
+.binding-footer, .binding-v2-footer {
+  border-top-width: var(--ds-screen-surface-border-width, 1px);
+  border-top-style: solid;
+  border-top-color: var(--ds-color-border, #e2e8f0);
+  background: var(--ds-color-background, #fff);
+}
+
+.binding-simulation, .binding-v2-simulation {
+  display: flex;
+  gap: var(--ds-space-4, 1rem);
+  flex-direction: column;
+}
+
+.binding-empty, .binding-v2-empty {
+  padding: var(--ds-space-12, 3rem);
+  margin: auto;
+}
+
+.binding-error, .binding-v2-error {
+  color: var(--ds-color-destructive, #ef4444);
+}
+
+.binding-stack-tight, .binding-v2-stack-tight {
+  display: flex;
+  align-items:  flex-start;
+  gap: var(--ds-space-1, .25rem);
+  flex-direction: column;
+}
+
+.binding-list, .binding-v2-list {
+  padding-left: var(--ds-space-4, 1rem);
+  margin: 0;
+}
+
+.binding-panel-wide, .binding-v2-panel-wide {
+  width: var(--ds-dialog-width-large, 48rem);
+  overflow: auto;
+}
+
+.binding-call, .binding-v2-call {
+  display: flex;
+  gap: var(--ds-space-3, .75rem);
+  padding: var(--ds-space-4, 1rem);
+  border-width: var(--ds-screen-surface-border-width, 1px);
+  border-style: solid;
+  border-color: var(--ds-color-border, #e2e8f0);
+  border-radius: var(--ds-radius-md, 6px);
+  flex-direction: column;
+  min-width: 0;
+}
+
+.binding-call-grid, .binding-v2-call-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--ds-menu-min-width, 12rem), 1fr));
+  gap: var(--ds-space-3, .75rem);
+}
+
+.binding-params, .binding-v2-params {
+  display: flex;
+  gap: var(--ds-space-2, .5rem);
+  flex-direction: column;
+}
+
+.binding-param, .binding-v2-param {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--ds-space-3, .75rem);
+  overflow-wrap: anywhere;
+  align-items:  start;
+}
+
+.binding-endpoint, .binding-v2-endpoint {
+  font-family: var(--ds-font-family-mono, monospace);
+  font-size: var(--ds-font-size-sm, .8125rem);
+  overflow-wrap: anywhere;
+}
+
+.binding-preview-parts, .binding-v2-preview-parts {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--ds-menu-min-width, 12rem), 1fr));
+  gap: var(--ds-space-3, .75rem);
+}
+
+.binding-pre, .binding-v2-pre {
+  font-family: var(--ds-font-family-mono, monospace);
+  font-size: var(--ds-font-size-sm, .8125rem);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  margin: 0;
+}

package/dist/components/ApiBindingWorkspace.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { ApiBindingContext, WorkspaceComponents } from "../types";
+import "../styles/workspace.css";
+export interface ApiBindingWorkspaceProps {
+    pageKey: string;
+    initialContext?: ApiBindingContext;
+    components?: Partial<WorkspaceComponents>;
+}
+export declare function ApiBindingWorkspace({ pageKey, initialContext, components, }: ApiBindingWorkspaceProps): React.JSX.Element;
+export declare const ApiBindingStudio: typeof ApiBindingWorkspace;

package/dist/components/ApiMappings.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { ApiBindingConfig, ApiBindingContext } from "../types";
+export declare const TIMING_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+export declare const FRESHNESS_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+/**
+ * The single canonical API-mapping editor. The global entry shows every call;
+ * a field or action entry passes `focus` and sees only calls targeting it or sending its value.
+ */
+export declare function ApiMappings({ config, context, focus, defaultTarget, onChange, }: {
+    config: ApiBindingConfig;
+    context: ApiBindingContext;
+    focus?: string;
+    defaultTarget?: string;
+    onChange: (updater: (old: ApiBindingConfig) => ApiBindingConfig) => void;
+}): React.JSX.Element;

package/dist/components/BindApiButton.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { ApiDefinition, BindingGrid, BindingOption, MappingFile, SnapshotComponent, SnapshotContext, WindowKind, WindowTrigger } from "../types";
+export interface BindApiButtonProps {
+    appId?: string;
+    windowId: string;
+    /** Source window, screen, or action name, e.g. "Add Notes", "Create P2P", "Invoice Details" */
+    source: string;
+    /** Parent grid, panel, or screen name, e.g. "Worklist Grid", "Dashboard", "Main Screen" */
+    parent: string;
+    /** Optional Grid context (selected rows and columns) if triggered from or acting upon a grid */
+    grid?: BindingGrid;
+    /** Parent windows / screens context hierarchy */
+    parents?: SnapshotContext[];
+    /** UI presentation kind (modal, drawer, screen, form, etc.) */
+    kind?: WindowKind;
+    /** Action trigger info */
+    trigger?: WindowTrigger;
+    /** Captured dropdown/combobox options from the host form */
+    options?: Record<string, BindingOption[]>;
+    /** Registered API definitions catalog */
+    definitions?: ApiDefinition[];
+    /** Existing saved mapping file */
+    mappingFile?: MappingFile | null;
+    /** Base route for the Studio in the router (defaults to `/api-binding`) */
+    routeBase?: string;
+    /** Optional container ref to override automatic DOM discovery */
+    containerRef?: React.RefObject<HTMLElement | null>;
+    /** Optional container CSS selector to locate screen root */
+    containerSelector?: string;
+    /** Explicit root DOM element */
+    rootElement?: HTMLElement | null;
+    /** Optional HTML form id */
+    formId?: string;
+    /** Explicit components / fields override if not discovered via DOM */
+    components?: SnapshotComponent[];
+    /** Explicit action buttons override */
+    buttons?: string[];
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare function BindApiButton({ appId, windowId, source, parent, grid, parents, kind, trigger, options, definitions, mappingFile, routeBase, containerRef, containerSelector, rootElement, formId, components: explicitComponents, buttons: explicitButtons, className, children, }: BindApiButtonProps): React.JSX.Element;

package/dist/components/RequestPreview.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import type { RequestPreviewItem } from "../types";
+/** Simulated requests in call order. Nothing here is sent over network. */
+export declare function RequestPreview({ title, requests }: {
+    title: string;
+    requests: RequestPreviewItem[];
+}): React.JSX.Element;

package/dist/components/SimulationDialog.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { ApiBindingConfig, ApiBindingContext } from "../types";
+export declare function SimulationDialog({ config, context, onClose, onVerified, }: {
+    config: ApiBindingConfig;
+    context: ApiBindingContext;
+    onClose: () => void;
+    onVerified: (signature: string) => void;
+}): React.JSX.Element;