api_binding_ui 0.0.0-stage → 1.0.0

package/dist/core/model.d.ts

@@ -0,0 +1,57 @@
+/**
+ * API Binding Studio - Canonical Data Model and Simulation Engine
+ * Single source of truth for parameter mappings, live request resolution, and simulations.
+ */
+import type { ActionContext, ApiBindingConfig, ApiBindingContext, ApiDefinition, BindingCall, BindingPurpose, ParamMapping, RequestPreviewItem, SampleNote, SimulationInput } from "../types";
+import { isButtonId } from "./componentId";
+export declare const CONFIG_VERSION = 1;
+export declare const draftKey: (key: string) => string;
+export declare const appliedKey: (key: string) => string;
+export declare const fingerprint: (config: ApiBindingConfig) => string;
+export declare const SUBMIT: string;
+export declare const CANCEL: string;
+export declare const CUSTOMER_PARAM = "customerIds";
+export declare const newCallId: () => string;
+export declare const definitionFor: (context: ApiBindingContext, api: string, method?: string) => ApiDefinition | undefined;
+export declare const methodsFor: (context: ApiBindingContext, api: string) => string[];
+export declare const apisOf: (context: ApiBindingContext) => string[];
+export declare const fieldId: (name: string) => string;
+export declare function reconcileCallParams(call: BindingCall, context: ApiBindingContext): BindingCall;
+export declare function proposeConfig(context: ApiBindingContext): ApiBindingConfig;
+export declare function reconcileConfig(config: ApiBindingConfig, context: ApiBindingContext): ApiBindingConfig;
+export declare function migrateConfig(raw: unknown, context: ApiBindingContext): ApiBindingConfig | null;
+export declare function callsFor(config: ApiBindingConfig, component?: string): BindingCall[];
+export declare function changeCallTarget(call: BindingCall, api: string, method: string | undefined, context: ApiBindingContext): BindingCall;
+export declare function droppedBy(call: BindingCall, api: string, method: string | undefined, context: ApiBindingContext): number;
+export declare const populated: (call: BindingCall) => boolean;
+export declare function changePurpose(call: BindingCall, purpose: BindingPurpose): BindingCall;
+export declare function newCall(purpose: BindingPurpose, component: string): BindingCall;
+export declare function moveCall(calls: BindingCall[], id: string, delta: -1 | 1): BindingCall[];
+export declare function setParamSource(p: ParamMapping, source: string, gridId?: string): ParamMapping;
+export declare const gridPaths: (context: ApiBindingContext) => string[];
+export declare const componentLabel: (context: ApiBindingContext, id: string) => string;
+export declare const endpointLabel: (call: Pick<BindingCall, "api" | "method">) => string;
+export declare function callIssues(call: BindingCall, index: number, context: ApiBindingContext): string[];
+export declare function issuesFor(config: ApiBindingConfig, context: ApiBindingContext): string[];
+export declare function actionContext(context: ApiBindingContext, form: Record<string, string>, rows?: Record<string, unknown>[]): ActionContext;
+export declare const snapshotForm: (context: ApiBindingContext) => {
+    [k: string]: string;
+};
+export declare function resolutionIssues(call: BindingCall, index: number, def: ApiDefinition | undefined, ctx: ActionContext): string[];
+export declare function previewRequests(config: ApiBindingConfig, context: ApiBindingContext, ctx: ActionContext, filter?: (c: BindingCall) => boolean): RequestPreviewItem[];
+export declare const isNoteContract: (def?: ApiDefinition) => boolean;
+export declare function isSimulated(call: BindingCall, context: ApiBindingContext): boolean;
+export declare function simulatorGaps(config: ApiBindingConfig, context: ApiBindingContext): string[];
+export declare function simulationErrors(config: ApiBindingConfig, input: SimulationInput, customers: number): string[];
+export declare const simulationForm: (input: SimulationInput) => Record<string, string>;
+export declare function simulateSave(config: ApiBindingConfig, context: ApiBindingContext, input: SimulationInput, rows: Record<string, unknown>[], fail: boolean): {
+    notes: SampleNote[];
+    errors: string[];
+    requests: RequestPreviewItem[];
+};
+export declare function canApply(config: ApiBindingConfig, context: ApiBindingContext, verified: string | null): boolean;
+export declare function fieldSummary(config: ApiBindingConfig, context: ApiBindingContext, name: string): {
+    from: string;
+    to: string;
+};
+export declare const isButton: typeof isButtonId;

package/dist/core/transport.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Cross-window communication transport and state management for API Binding Studio.
+ */
+import type { ApiBindingConfig, ApiBindingContext, BindingAppliedMessage, BindingContextMessage, BindingReadyMessage, BindingSelectionUpdateMessage } from "../types";
+import { BINDING_APPLIED, BINDING_CHANNEL, BINDING_CONTEXT, BINDING_READY, BINDING_SELECTION_UPDATE } from "../types";
+export declare const contextKey: (key: string) => string;
+export declare function storeBindingContext(context: ApiBindingContext): void;
+export declare function readBindingContext(key: string): ApiBindingContext | null;
+export declare function validBindingContext(value: unknown, key: string): value is ApiBindingContext;
+export interface OpenStudioOptions {
+    /** Base URL path for the route, defaults to `/api-binding` */
+    routeBase?: string;
+    /** Custom window features (e.g. `width=1200,height=800`) */
+    features?: string;
+}
+/**
+ * Opens or focuses an existing named tab for this binding key.
+ * Never resets active simulation or unapplied in-memory edits.
+ */
+export declare function openBindingStudio(context: ApiBindingContext, options?: OpenStudioOptions): Window | null;
+/**
+ * Notifies the opener and any open host tabs that the binding has been applied.
+ */
+export declare function notifyApplied(key: string, config: ApiBindingConfig): void;
+/**
+ * Allows the host window to update customer selection live without closing the child window.
+ */
+export declare function notifySelectionUpdate(key: string, grid: {
+    id: string;
+    rows: Record<string, unknown>[];
+}): void;
+export declare const validContext: typeof validBindingContext;
+export { BINDING_APPLIED, BINDING_CHANNEL, BINDING_CONTEXT, BINDING_READY, BINDING_SELECTION_UPDATE, type BindingAppliedMessage, type BindingContextMessage, type BindingReadyMessage, type BindingSelectionUpdateMessage, };

package/dist/core/valueCoercion.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Type coercion and request construction for API Binding Studio.
+ */
+import type { ActionContext, ApiParameter, ParamMapping, RequestParts } from "../types";
+export type Scalar = string | number | boolean;
+export declare function baseType(type: string): {
+    base: string;
+    array: boolean;
+};
+export declare function coerceScalar(text: string, base: string): Scalar | undefined;
+export declare function coerce(text: string, type: string): Scalar | Scalar[] | undefined;
+export declare const FREE_TEXT_SOURCE = "freeText";
+export declare function resolveParam(p: ParamMapping, ctx: ActionContext): string | undefined;
+export declare function buildRequest(mappings: ParamMapping[], ctx: ActionContext, spec: ApiParameter[]): RequestParts;

package/dist/hooks/useAppliedBinding.d.ts

@@ -0,0 +1,6 @@
+import type { ApiBindingConfig } from "../types";
+export declare function useAppliedBinding(pageKey: string): {
+    appliedConfig: ApiBindingConfig | null;
+    isApplied: boolean;
+    appliedAt: string | null;
+};

package/dist/index.css

@@ -0,0 +1,244 @@
+/* src/styles/highradius-bridge.css */
+
+
+/* src/styles/index.css */
+
+
+/* src/styles/workspace.css */
+.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/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * API Binding Studio - Public Package Entry Point
+ */
+import "./styles/index.css";
+export * from "./types";
+export { CONFIG_VERSION, SUBMIT, CANCEL, CUSTOMER_PARAM, draftKey, appliedKey, fingerprint, newCallId, definitionFor, methodsFor, apisOf, fieldId, reconcileCallParams, proposeConfig, reconcileConfig, migrateConfig, callsFor, changeCallTarget, droppedBy, populated, changePurpose, newCall, moveCall, setParamSource, gridPaths, componentLabel, endpointLabel, callIssues, issuesFor, actionContext, snapshotForm, resolutionIssues, previewRequests, isNoteContract, isSimulated, simulatorGaps, simulationErrors, simulationForm, simulateSave, canApply, fieldSummary, isButton, } from "./core/model";
+export { contextKey, storeBindingContext, readBindingContext, validBindingContext, validContext, openBindingStudio, notifyApplied, notifySelectionUpdate, type OpenStudioOptions, } from "./core/transport";
+export { friendlyLabel, buildCatalogFromRegistry, type RawBindings, } from "./core/catalog";
+export { FREE_TEXT_SOURCE, FREE_TEXT_OPTION, storageKey, storeSnapshot, readSnapshot, windowIds, gridPropertyPaths, contextComponents, sourceComponents, discoverFormComponents, discoverButtons, buildSnapshot, } from "./core/bindingContext";
+export { componentId, isButtonId, parseComponentId, normalizeComponent, type ComponentDescriptor, } from "./core/componentId";
+export { baseType, coerceScalar, coerce, resolveParam, buildRequest, type Scalar, } from "./core/valueCoercion";
+export { useAppliedBinding } from "./hooks/useAppliedBinding";
+export { BindApiButton, type BindApiButtonProps } from "./components/BindApiButton";
+export { ApiBindingWorkspace, ApiBindingStudio, type ApiBindingWorkspaceProps } from "./components/ApiBindingWorkspace";
+export { WorkspaceComponentsProvider, useWorkspaceComponents } from "./components/WorkspaceContext";
+export { ApiMappings } from "./components/ApiMappings";
+export { RequestPreview } from "./components/RequestPreview";
+export { SimulationDialog } from "./components/SimulationDialog";
+export { AppGrid, createActionColumn, type AppGridColDef, type AppGridProps } from "./components/ui/AppGrid";
+export { Button, ButtonBar, ButtonGroup, type ButtonProps } from "./components/ui/Button";
+export { Badge, type BadgeProps } from "./components/ui/Badge";
+export { Banner, type BannerProps } from "./components/ui/Banner";
+export { DetailCard, type DetailCardProps, type DetailCardField } from "./components/ui/Card";
+export { Dialog, actionFormDialogTemplateV1, alertDialogTemplateV1, type DialogProps } from "./components/ui/Dialog";
+export { Input, TextArea, Select, Checkbox, type InputProps, type TextAreaProps, type SelectProps, type CheckboxProps, type SelectOption } from "./components/ui/Input";
+export * as Icons from "./components/ui/Icons";