api_binding_ui 1.1.0 → 2.0.0

package/dist/components/ui/Banner.d.ts

@@ -1,8 +0,0 @@
-import * as React from "react";
-export type BannerTone = "caution" | "resolved" | "danger";
-export interface BannerProps {
-    tone?: BannerTone;
-    children: React.ReactNode;
-    className?: string;
-}
-export declare function Banner({ tone, children, className }: BannerProps): React.JSX.Element;

package/dist/components/ui/Button.d.ts

@@ -1,31 +0,0 @@
-import * as React from "react";
-import { type ActionIcon } from "./Icons";
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive" | "outline";
-export type ButtonSize = "sm" | "md";
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    icon?: ActionIcon;
-    tooltip?: string | false;
-    children?: React.ReactNode;
-    className?: string;
-}
-export declare function Button({ variant, size, icon, tooltip, children, className, type, ...rest }: ButtonProps): React.JSX.Element;
-export interface ButtonBarProps {
-    justify?: "between" | "start" | "end";
-    children: React.ReactNode;
-    className?: string;
-}
-export declare function ButtonBar({ justify, children, className }: ButtonBarProps): React.JSX.Element;
-export interface ButtonGroupOption<T extends string> {
-    value: T;
-    label: string;
-}
-export interface ButtonGroupProps<T extends string> {
-    value: T;
-    onChange: (value: T) => void;
-    options: ButtonGroupOption<T>[];
-    "aria-label"?: string;
-    className?: string;
-}
-export declare function ButtonGroup<T extends string>({ value, onChange, options, "aria-label": ariaLabel, className, }: ButtonGroupProps<T>): React.JSX.Element;

package/dist/components/ui/Card.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-export interface DetailCardField {
-    label: string;
-    value?: React.ReactNode;
-}
-export interface DetailCardProps {
-    title?: string;
-    subtitle?: string;
-    actions?: React.ReactNode;
-    fields?: DetailCardField[];
-    dense?: boolean;
-    className?: string;
-}
-export declare function DetailCard({ title, subtitle, actions, fields, dense, className, }: DetailCardProps): React.JSX.Element;

package/dist/components/ui/Dialog.d.ts

@@ -1,61 +0,0 @@
-import * as React from "react";
-export interface DialogProps {
-    open?: boolean;
-    title: string;
-    description?: string;
-    submitLabel?: string;
-    cancelLabel?: string;
-    onCancel?: () => void;
-    onSubmit?: () => void;
-    children: React.ReactNode;
-    size?: "large" | "medium";
-    formId?: string;
-    className?: string;
-}
-export declare function Dialog({ open, title, description, submitLabel, cancelLabel, onCancel, onSubmit, children, size, formId, className, }: DialogProps): React.JSX.Element | null;
-export declare function actionFormDialogTemplateV1(spec: {
-    open: boolean;
-    title: string;
-    description: string;
-    size?: "large" | "medium";
-    formId: string;
-    submitLabel: string;
-    cancelLabel: string;
-    onCancel: () => void;
-    onSubmit: () => void;
-    children: React.ReactNode;
-}): {
-    open: boolean;
-    title: string;
-    description: string;
-    size?: "large" | "medium";
-    formId: string;
-    submitLabel: string;
-    cancelLabel: string;
-    onCancel: () => void;
-    onSubmit: () => void;
-    children: React.ReactNode;
-};
-export declare function alertDialogTemplateV1(spec: {
-    open: boolean;
-    kind?: "destructive" | "neutral" | string;
-    title: string;
-    message: string;
-    confirmLabel?: string;
-    cancelLabel?: string;
-    primaryAction?: {
-        label: string;
-        onClick: () => void;
-    };
-    onConfirm?: () => void;
-    onCancel: () => void;
-}): {
-    open: boolean;
-    title: string;
-    description: string;
-    submitLabel: string;
-    cancelLabel: string;
-    onSubmit: (() => void) | undefined;
-    onCancel: () => void;
-    children: null;
-};

package/dist/components/ui/Icons.d.ts

@@ -1,21 +0,0 @@
-import * as React from "react";
-export interface IconProps extends React.SVGProps<SVGSVGElement> {
-    size?: number | string;
-    className?: string;
-}
-export declare const LinkIcon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export declare const PencilIcon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export declare const SettingsIcon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export declare const PlusIcon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export declare const Trash2Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export declare const ArrowUpIcon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export declare const ArrowDownIcon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export declare const PlayIcon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export declare const CheckIcon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export declare const XIcon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export declare const SearchIcon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export declare const AlertTriangleIcon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export declare const AlertCircleIcon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export declare const iconMap: Record<string, React.ComponentType<IconProps>>;
-export type ActionIcon = string | React.ReactNode;
-export declare function renderIcon(icon?: ActionIcon, props?: IconProps): React.ReactNode;

package/dist/components/ui/Input.d.ts

@@ -1,31 +0,0 @@
-import * as React from "react";
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    label?: string;
-    required?: boolean;
-}
-export declare function Input({ label, required, className, id, ...rest }: InputProps): React.JSX.Element;
-export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-    label?: string;
-    required?: boolean;
-}
-export declare function TextArea({ label, required, className, id, ...rest }: TextAreaProps): React.JSX.Element;
-export interface SelectOption {
-    value: string;
-    label: string;
-    description?: string;
-}
-export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value"> {
-    label?: string;
-    required?: boolean;
-    value?: string | null;
-    options?: SelectOption[];
-    onChange?: (value: string | null) => void;
-    placeholder?: string;
-}
-export declare function Select({ label, required, value, options, onChange, placeholder, disabled, className, id, ...rest }: SelectProps): React.JSX.Element;
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    label: string;
-    checked?: boolean;
-    onChange?: (checked: boolean) => void;
-}
-export declare function Checkbox({ label, checked, onChange, disabled, className, id, ...rest }: CheckboxProps): React.JSX.Element;

package/dist/core/bindingContext.d.ts

@@ -1,67 +0,0 @@
-/**
- * Snapshot extraction, DOM inspection, and context building utilities.
- * Completely generic: works on modals, drawers, panels, cards, and full screens.
- */
-import type { BindingGrid, BindingSnapshot, SnapshotComponent, SnapshotContext, WindowKind, WindowTrigger } from "../types";
-export declare const FREE_TEXT_SOURCE = "freeText";
-export declare const FREE_TEXT_OPTION: {
-    value: string;
-    label: string;
-};
-export declare function storageKey(key: string): string;
-export declare function storeSnapshot(snapshot: BindingSnapshot): void;
-export declare function readSnapshot(key: string): BindingSnapshot | null;
-export declare function windowIds({ appId, windowId, gridId, parentWindowIds, }: {
-    appId: string;
-    windowId: string;
-    gridId?: string;
-    parentWindowIds?: string[];
-}): {
-    appId: string;
-    windowId: string;
-    gridId: string | undefined;
-    parentWindowIds: string[] | undefined;
-    key: string;
-};
-export declare function gridPropertyPaths({ gridId, rows }: {
-    gridId: string;
-    rows: Record<string, unknown>[];
-}): string[];
-export declare function contextComponents(snapshot: BindingSnapshot): Array<{
-    value: string;
-    label: string;
-}>;
-export declare function sourceComponents(snapshot: BindingSnapshot): Array<{
-    value: string;
-    label: string;
-}>;
-/**
- * Intelligently locates the nearest enclosing screen, modal, drawer, form, or panel container
- * where the trigger button resides.
- */
-export declare function findEnclosingContextElement(triggerElement: HTMLElement | null, options?: {
-    containerRef?: React.RefObject<HTMLElement | null>;
-    containerSelector?: string;
-    rootElement?: HTMLElement | null;
-    formId?: string;
-}): HTMLElement | null;
-export declare function discoverFormComponents(root: HTMLElement | null): SnapshotComponent[];
-export declare function discoverButtons(root: HTMLElement | null): string[];
-export declare function buildSnapshot({ ids, source, parent, root, grid, kind, trigger, contexts, components: explicitComponents, buttons: explicitButtons, }: {
-    ids: {
-        appId: string;
-        windowId: string;
-        gridId?: string;
-        parentWindowIds?: string[];
-        key: string;
-    };
-    source: string;
-    parent: string;
-    root: HTMLElement | null;
-    grid?: BindingGrid;
-    kind?: WindowKind;
-    trigger?: WindowTrigger;
-    contexts?: SnapshotContext[];
-    components?: SnapshotComponent[];
-    buttons?: string[];
-}): BindingSnapshot;

package/dist/core/catalog.d.ts

@@ -1,18 +0,0 @@
-/**
- * API Catalog builder and validator for API Binding Studio.
- */
-import type { ApiDefinition, ApiParameter } from "../types";
-export declare function friendlyLabel(operationId?: string): string | undefined;
-export type RawBindings = Record<string, Record<string, {
-    operationId?: string;
-    [key: string]: unknown;
-}>>;
-export declare function buildCatalogFromRegistry({ bindings, hookResolver, paramsResolver, availabilityChecker, }: {
-    bindings: RawBindings;
-    hookResolver?: (api: string, method: string) => string | undefined;
-    paramsResolver?: (api: string, method: string) => ApiParameter[];
-    availabilityChecker?: (api: string, method: string) => {
-        available: boolean;
-        problem?: string;
-    };
-}): ApiDefinition[];

package/dist/core/componentId.d.ts

@@ -1,12 +0,0 @@
-/**
- * Component ID utilities for normalized component identification.
- */
-export interface ComponentDescriptor {
-    kind: "field" | "button" | string;
-    name: string;
-    parentId?: string;
-}
-export declare function componentId(c: ComponentDescriptor): string;
-export declare function isButtonId(id: string): boolean;
-export declare function parseComponentId(id: string): ComponentDescriptor;
-export declare function normalizeComponent(id: string): string;

package/dist/core/model.d.ts

@@ -1,63 +0,0 @@
-/**
- * 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 = 2;
-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 validateBindings(config: ApiBindingConfig, context: ApiBindingContext, form?: {
-    [k: string]: string;
-}): string[];
-export declare function verificationSignature(config: ApiBindingConfig, context: ApiBindingContext, form?: {
-    [k: string]: string;
-}): string;
-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/openapi.d.ts

@@ -1,2 +0,0 @@
-import type { ApiDefinition } from "../types";
-export declare function buildCatalogFromOpenApi(document: unknown): ApiDefinition[];

package/dist/core/transport.d.ts

@@ -1,33 +0,0 @@
-/**
- * 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/validation.d.ts

@@ -1,2 +0,0 @@
-import type { ApiDefinition, RequestParts } from "../types";
-export declare function validateRequest(parts: RequestParts, definition: ApiDefinition): string[];

package/dist/core/valueCoercion.d.ts

@@ -1,17 +0,0 @@
-/**
- * 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 const parameterKey: (name: string, location?: string) => string;
-export declare function parameterFor(mapping: ParamMapping, spec: ApiParameter[]): ApiParameter | undefined;
-export declare function coerceValue(text: string, spec: ApiParameter): unknown;
-export declare function buildRequest(mappings: ParamMapping[], ctx: ActionContext, spec: ApiParameter[]): RequestParts;

package/dist/hooks/useAppliedBinding.d.ts

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

package/dist/index.css

@@ -1,248 +0,0 @@
-/* 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;
-}