api_binding_ui 0.0.0-stage → 1.1.0

package/dist/style.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/types.d.ts

@@ -0,0 +1,245 @@
+/**
+ * API Binding Studio - Shared Type Definitions
+ */
+export type ParamLocation = "body" | "query" | "path" | "header";
+export interface SnapshotComponent {
+    name: string;
+    label: string;
+    type?: string;
+    kind?: string;
+    required?: boolean;
+    readable?: boolean;
+    optionsSource?: "static" | "dynamic" | string;
+    value?: string;
+}
+export interface SnapshotContext {
+    id: string;
+    label?: string;
+    components: SnapshotComponent[];
+    buttons?: string[];
+}
+export type WindowKind = "action-form" | "filter-dialog" | "modal" | string;
+export interface WindowTrigger {
+    button?: string;
+    needsSelection?: boolean;
+    gridId?: string;
+}
+export interface BindingGrid {
+    gridId: string;
+    label?: string;
+    columns?: string[];
+    rows: Record<string, unknown>[];
+}
+export interface BindingSnapshot {
+    key: string;
+    name: string;
+    ids: {
+        appId: string;
+        windowId: string;
+        gridId?: string;
+        parentWindowIds?: string[];
+    };
+    source: string;
+    parent: string;
+    kind?: WindowKind;
+    trigger?: WindowTrigger;
+    components: SnapshotComponent[];
+    buttons: string[];
+    contexts?: SnapshotContext[];
+    grid?: {
+        id: string;
+        label?: string;
+        columns: string[];
+        rows: Record<string, unknown>[];
+    };
+    capturedAt: string;
+}
+export interface ParamMapping {
+    param: string;
+    source: string;
+    property: string;
+    required?: boolean;
+    in?: ParamLocation;
+}
+export type MappingTiming = "lazy" | "prefetch" | string;
+export type MappingFreshness = "fresh" | "reuse" | "poll" | string;
+export interface ApiMapping {
+    id: string;
+    component: string;
+    api: string;
+    method?: string;
+    timing?: MappingTiming;
+    freshness?: MappingFreshness;
+    pollSeconds?: number;
+    params: ParamMapping[];
+}
+export interface MappingFile {
+    key: string;
+    app: string;
+    grid?: string;
+    window: string;
+    parents?: string[];
+    name: string;
+    savedAt: string;
+    read: Array<Omit<ApiMapping, "id">>;
+    write: Array<Omit<ApiMapping, "id">>;
+}
+export interface ApiParameter {
+    name: string;
+    type: string;
+    required: boolean;
+    in?: ParamLocation | string;
+    description?: string;
+    schema?: Record<string, unknown> | boolean;
+    style?: string;
+    explode?: boolean;
+}
+export interface ApiDefinition {
+    api: string;
+    method: string;
+    hook: string;
+    params: ApiParameter[];
+    label?: string;
+    available?: boolean;
+    problem?: string;
+    operationId?: string;
+    summary?: string;
+    description?: string;
+    tags?: string[];
+    tagDescriptions?: Record<string, string>;
+    requestSchema?: Record<string, unknown> | boolean;
+    requestBodyRequired?: boolean;
+    schemaDefinitions?: Record<string, unknown>;
+    contractIssues?: string[];
+}
+export interface BindingOption {
+    value: string;
+    label: string;
+    subject?: string;
+    description?: string;
+}
+export interface ApiBindingContext {
+    snapshot: BindingSnapshot;
+    mappings: MappingFile | null;
+    definitions: ApiDefinition[];
+    options: Record<string, BindingOption[]>;
+}
+export type BindingPurpose = "read" | "write";
+export interface BindingCall extends ApiMapping {
+    purpose: BindingPurpose;
+}
+export interface BindingField {
+    name: string;
+    label: string;
+    required: boolean;
+    input: "user" | "template";
+    excluded: boolean;
+}
+export interface BindingConflict {
+    callId: string;
+    param: string;
+    fields: string[];
+}
+export interface ApiBindingConfig {
+    version: 2;
+    customerRule: "each" | "single";
+    success: "close" | "keep";
+    templateFills: boolean;
+    fields: BindingField[];
+    calls: BindingCall[];
+    conflicts?: BindingConflict[];
+}
+export interface SimulationInput {
+    notesType?: string;
+    template?: string;
+    subject?: string;
+    notes?: string;
+    addCallLog?: boolean;
+    [key: string]: unknown;
+}
+export interface SampleNote {
+    id: string;
+    customerId?: number | string;
+    noteType?: number;
+    subject?: string;
+    description?: string;
+    [key: string]: unknown;
+}
+export type SampleRecord = SampleNote;
+export interface RequestParts {
+    data: Record<string, unknown>;
+    params: Record<string, unknown>;
+    path: Record<string, unknown>;
+    headers?: Record<string, string>;
+    errors?: string[];
+}
+export interface RequestPreviewItem {
+    order: number;
+    id: string;
+    purpose: BindingPurpose;
+    target: string;
+    method: string;
+    api: string;
+    hook: string;
+    available: boolean;
+    parts: RequestParts;
+    issues: string[];
+}
+export interface ActionContext {
+    form: Record<string, string>;
+    grid?: {
+        gridId: string;
+        rows: Record<string, unknown>[];
+    };
+    parents?: Array<{
+        id: string;
+        values: Record<string, string>;
+    }>;
+}
+export interface StoredAppliedConfig {
+    version: number;
+    config: ApiBindingConfig;
+    appliedAt: string;
+}
+export declare const BINDING_CHANNEL = "api-binding-studio";
+export declare const BINDING_READY = "api-binding-ready";
+export declare const BINDING_CONTEXT = "api-binding-context";
+export declare const BINDING_APPLIED = "api-binding-applied";
+export declare const BINDING_SELECTION_UPDATE = "api-binding-selection-update";
+export interface BindingReadyMessage {
+    type: typeof BINDING_READY;
+    key: string;
+}
+export interface BindingContextMessage {
+    type: typeof BINDING_CONTEXT;
+    context: ApiBindingContext;
+}
+export interface BindingAppliedMessage {
+    type: typeof BINDING_APPLIED;
+    key: string;
+    config: ApiBindingConfig;
+}
+export interface BindingSelectionUpdateMessage {
+    type: typeof BINDING_SELECTION_UPDATE;
+    key: string;
+    grid: {
+        id: string;
+        rows: Record<string, unknown>[];
+    };
+}
+export type RequestPreview = RequestPreviewItem;
+export interface WorkspaceComponents {
+    AppGrid?: React.ComponentType<any>;
+    Button?: React.ComponentType<any>;
+    ButtonBar?: React.ComponentType<any>;
+    ButtonGroup?: React.ComponentType<any>;
+    Badge?: React.ComponentType<any>;
+    Banner?: React.ComponentType<any>;
+    DetailCard?: React.ComponentType<any>;
+    Select?: React.ComponentType<any>;
+    Input?: React.ComponentType<any>;
+    TextArea?: React.ComponentType<any>;
+    Checkbox?: React.ComponentType<any>;
+    Dialog?: React.ComponentType<any>;
+    createActionColumn?: <T = any>(config: any) => any;
+}

package/package.json

@@ -1,6 +1,47 @@
-{
-  "name": "api_binding_ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "api_binding_ui",
+  "version": "1.1.0",
+  "description": "API Binding Studio - Isolated visual API mapping, simulation, and verification studio for enterprise web apps.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/api-binding-ui.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "SKILL.md"
+  ],
+  "sideEffects": ["**/*.css"],
+  "scripts": {
+    "dev": "vite --port 5174",
+    "build": "bun build src/index.ts --outdir dist --target browser --external react --external react-dom && powershell -Command \"Copy-Item -Path 'dist/index.css' -Destination 'dist/api-binding-ui.css' -Force\" && node ./node_modules/typescript/bin/tsc -p tsconfig.build.json",
+    "preview": "vite preview",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "ajv": "^8.17.1",
+    "ajv-formats": "^3.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.8.0",
+    "vite": "^6.2.0",
+    "vitest": "^3.0.0"
+  }
+}