@flanksource/clicky-ui 0.2.21 → 0.3.2

package/dist/rpc/OperationActionBar.cjs

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const button = require("../components/button.cjs");
+const utils = require("../lib/utils.cjs");
+const MethodBadge = require("../data/MethodBadge.cjs");
+const Modal = require("../overlay/Modal.cjs");
+const ExecutionResult = require("./ExecutionResult.cjs");
+const FilterForm = require("./FilterForm.cjs");
+const SchemaActionForm = require("./SchemaActionForm.cjs");
+const clickyMetadata = require("./clickyMetadata.cjs");
+const formMetadata = require("./formMetadata.cjs");
+function OperationActionBar({
+  actions,
+  client,
+  getLockedValues,
+  onExecuted,
+  initialValue,
+  hideLockedInForm = false,
+  commandRuntime,
+  formPre,
+  formPost,
+  formActions,
+  className
+}) {
+  const [activeAction, setActiveAction] = react.useState(null);
+  const [actionResult, setActionResult] = react.useState(null);
+  const [actionError, setActionError] = react.useState("");
+  const [isExecutingAction, setIsExecutingAction] = react.useState(false);
+  const activeMeta = activeAction ? clickyMetadata.getOperationClickyMeta(activeAction) : void 0;
+  const lockedValues = activeAction ? (getLockedValues == null ? void 0 : getLockedValues(activeAction)) ?? {} : {};
+  function openAction(op) {
+    setActiveAction(op);
+    setActionResult(null);
+    setActionError("");
+  }
+  async function executeAction(values) {
+    if (!activeAction) return;
+    setIsExecutingAction(true);
+    setActionError("");
+    try {
+      const response = await client.executeCommand(
+        activeAction.path,
+        activeAction.method,
+        formMetadata.packParameterValues(values, activeAction.operation.parameters ?? []),
+        { Accept: "application/json+clicky" }
+      );
+      setActionResult(response);
+      await (onExecuted == null ? void 0 : onExecuted());
+    } catch (err) {
+      setActionResult(null);
+      setActionError(err instanceof Error ? err.message : String(err ?? "Unknown error"));
+    } finally {
+      setIsExecutingAction(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex flex-wrap gap-2", className), children: actions.map((op) => {
+      const label = clickyMetadata.surfaceActionLabel(op);
+      const summary = op.operation.summary || op.operation.description;
+      const tooltip = summary && summary !== label ? `${label} — ${summary}` : label;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          title: tooltip,
+          onClick: () => openAction(op),
+          children: label
+        },
+        `${op.method}:${op.path}`
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Modal.Modal,
+      {
+        open: activeAction != null,
+        onClose: () => setActiveAction(null),
+        title: activeAction ? clickyMetadata.surfaceActionLabel(activeAction) : "Action",
+        size: "lg",
+        children: activeAction && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(MethodBadge.MethodBadge, { method: activeAction.method }),
+            /* @__PURE__ */ jsxRuntime.jsx("code", { className: "rounded-md bg-muted px-2 py-1 text-sm", children: activeAction.path })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SchemaActionForm.SchemaActionForm,
+            {
+              client,
+              action: activeAction,
+              lockedValues,
+              submitLabel: clickyMetadata.surfaceActionLabel(activeAction),
+              ...initialValue ? { initialValue } : {},
+              ...formPre ? { formPre } : {},
+              ...formPost ? { formPost } : {},
+              ...formActions ? { footerActions: formActions } : {},
+              onSuccess: () => {
+                setActiveAction(null);
+                void (onExecuted == null ? void 0 : onExecuted());
+              },
+              fallback: /* @__PURE__ */ jsxRuntime.jsx(
+                FilterForm.FilterForm,
+                {
+                  client,
+                  path: activeAction.path,
+                  method: activeAction.method,
+                  parameters: activeAction.operation.parameters ?? [],
+                  lockedValues,
+                  enableLookup: Boolean(activeMeta == null ? void 0 : activeMeta.supportsLookup),
+                  submitLabel: "Execute request",
+                  submittingLabel: "Executing…",
+                  isSubmitting: isExecutingAction,
+                  onSubmit: executeAction,
+                  ...hideLockedInForm ? { hideLocked: true } : {}
+                }
+              )
+            }
+          ),
+          actionError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive", children: actionError }) : actionResult ? /* @__PURE__ */ jsxRuntime.jsx(
+            ExecutionResult.ExecutionResult,
+            {
+              response: actionResult,
+              className: "mt-0",
+              ...commandRuntime ? { commandRuntime } : {}
+            }
+          ) : null
+        ] })
+      }
+    )
+  ] });
+}
+exports.OperationActionBar = OperationActionBar;
+//# sourceMappingURL=OperationActionBar.cjs.map

package/dist/rpc/OperationActionBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationActionBar.cjs","sources":["../../src/rpc/OperationActionBar.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Button } from \"../components/button\";\nimport { cn } from \"../lib/utils\";\nimport type { ClickyCommandRuntime } from \"../data/Clicky\";\nimport { MethodBadge } from \"../data/MethodBadge\";\nimport { Modal } from \"../overlay/Modal\";\nimport { ExecutionResult } from \"./ExecutionResult\";\nimport { FilterForm } from \"./FilterForm\";\nimport { SchemaActionForm, type FormActionsRenderer } from \"./SchemaActionForm\";\nimport { getOperationClickyMeta, surfaceActionLabel } from \"./clickyMetadata\";\nimport { packParameterValues } from \"./formMetadata\";\nimport type { ExecutionResponse, ResolvedOperation } from \"./types\";\nimport { type OperationsApiClient } from \"./useOperations\";\nimport type {\n  PreExtension,\n  PostExtension,\n} from \"../components/json-schema-form-types\";\n\nexport type OperationActionBarProps = {\n  // Operations rendered as buttons. The list page passes collection-scoped\n  // actions, the detail page passes entity-scoped actions — this component\n  // renders both identically (same labels, same location, same modal).\n  actions: ResolvedOperation[];\n  client: OperationsApiClient;\n  // Path/filter values locked into the action form. The detail page locks the\n  // row id; the list page locks the active list filters for a bulk action.\n  getLockedValues?: (action: ResolvedOperation) => Record<string, string>;\n  // Refetch the surrounding view (list/detail) once an action succeeds.\n  onExecuted?: () => void | Promise<void>;\n  // Pre-filled form value (the existing entity when editing).\n  initialValue?: Record<string, unknown>;\n  // Hide the locked values in the fallback parameter form (detail hides the id;\n  // the list shows the locked filters for transparency).\n  hideLockedInForm?: boolean;\n  commandRuntime?: ClickyCommandRuntime;\n  formPre?: PreExtension[];\n  formPost?: PostExtension[];\n  formActions?: FormActionsRenderer;\n  // Layout placement only — the bar's own styling stays consistent across pages.\n  className?: string;\n};\n\n// OperationActionBar is the single render path for entity action buttons shared\n// by the list (OperationCatalog) and detail (OperationEntityPage) pages: a row\n// of buttons that each open the execution Modal (schema form, or parameter-form\n// fallback) inline. Keeping it shared guarantees both surfaces present the same\n// labels in the same location.\nexport function OperationActionBar({\n  actions,\n  client,\n  getLockedValues,\n  onExecuted,\n  initialValue,\n  hideLockedInForm = false,\n  commandRuntime,\n  formPre,\n  formPost,\n  formActions,\n  className,\n}: OperationActionBarProps) {\n  const [activeAction, setActiveAction] = useState<ResolvedOperation | null>(null);\n  const [actionResult, setActionResult] = useState<ExecutionResponse | null>(null);\n  const [actionError, setActionError] = useState(\"\");\n  const [isExecutingAction, setIsExecutingAction] = useState(false);\n\n  const activeMeta = activeAction ? getOperationClickyMeta(activeAction) : undefined;\n  const lockedValues = activeAction ? (getLockedValues?.(activeAction) ?? {}) : {};\n\n  function openAction(op: ResolvedOperation) {\n    setActiveAction(op);\n    setActionResult(null);\n    setActionError(\"\");\n  }\n\n  async function executeAction(values: Record<string, string>) {\n    if (!activeAction) return;\n    setIsExecutingAction(true);\n    setActionError(\"\");\n\n    try {\n      const response = await client.executeCommand(\n        activeAction.path,\n        activeAction.method,\n        packParameterValues(values, activeAction.operation.parameters ?? []),\n        { Accept: \"application/json+clicky\" },\n      );\n      setActionResult(response);\n      await onExecuted?.();\n    } catch (err) {\n      setActionResult(null);\n      setActionError(err instanceof Error ? err.message : String(err ?? \"Unknown error\"));\n    } finally {\n      setIsExecutingAction(false);\n    }\n  }\n\n  return (\n    <>\n      {actions.length > 0 && (\n        <div className={cn(\"flex flex-wrap gap-2\", className)}>\n          {actions.map((op) => {\n            const label = surfaceActionLabel(op);\n            const summary = op.operation.summary || op.operation.description;\n            const tooltip = summary && summary !== label ? `${label} — ${summary}` : label;\n            return (\n              <Button\n                key={`${op.method}:${op.path}`}\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                title={tooltip}\n                onClick={() => openAction(op)}\n              >\n                {label}\n              </Button>\n            );\n          })}\n        </div>\n      )}\n\n      <Modal\n        open={activeAction != null}\n        onClose={() => setActiveAction(null)}\n        title={\n          activeAction\n            ? surfaceActionLabel(activeAction)\n            : \"Action\"\n        }\n        size=\"lg\"\n      >\n        {activeAction && (\n          <div className=\"space-y-4\">\n            <div className=\"flex items-center gap-3\">\n              <MethodBadge method={activeAction.method} />\n              <code className=\"rounded-md bg-muted px-2 py-1 text-sm\">\n                {activeAction.path}\n              </code>\n            </div>\n            <SchemaActionForm\n              client={client}\n              action={activeAction}\n              lockedValues={lockedValues}\n              submitLabel={surfaceActionLabel(activeAction)}\n              {...(initialValue ? { initialValue } : {})}\n              {...(formPre ? { formPre } : {})}\n              {...(formPost ? { formPost } : {})}\n              {...(formActions ? { footerActions: formActions } : {})}\n              onSuccess={() => {\n                setActiveAction(null);\n                void onExecuted?.();\n              }}\n              fallback={\n                <FilterForm\n                  client={client}\n                  path={activeAction.path}\n                  method={activeAction.method}\n                  parameters={activeAction.operation.parameters ?? []}\n                  lockedValues={lockedValues}\n                  enableLookup={Boolean(activeMeta?.supportsLookup)}\n                  submitLabel=\"Execute request\"\n                  submittingLabel=\"Executing…\"\n                  isSubmitting={isExecutingAction}\n                  onSubmit={executeAction}\n                  {...(hideLockedInForm ? { hideLocked: true } : {})}\n                />\n              }\n            />\n            {actionError ? (\n              <div className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive\">\n                {actionError}\n              </div>\n            ) : actionResult ? (\n              <ExecutionResult\n                response={actionResult}\n                className=\"mt-0\"\n                {...(commandRuntime ? { commandRuntime } : {})}\n              />\n            ) : null}\n          </div>\n        )}\n      </Modal>\n    </>\n  );\n}\n"],"names":["useState","getOperationClickyMeta","packParameterValues","jsxs","Fragment","jsx","cn","surfaceActionLabel","Button","Modal","MethodBadge","SchemaActionForm","FilterForm","ExecutionResult"],"mappings":"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"}

package/dist/rpc/OperationActionBar.d.ts

@@ -0,0 +1,20 @@
+import { ClickyCommandRuntime } from '../data/Clicky';
+import { FormActionsRenderer } from './SchemaActionForm';
+import { ResolvedOperation } from './types';
+import { OperationsApiClient } from './useOperations';
+import { PreExtension, PostExtension } from '../components/json-schema-form-types';
+export type OperationActionBarProps = {
+    actions: ResolvedOperation[];
+    client: OperationsApiClient;
+    getLockedValues?: (action: ResolvedOperation) => Record<string, string>;
+    onExecuted?: () => void | Promise<void>;
+    initialValue?: Record<string, unknown>;
+    hideLockedInForm?: boolean;
+    commandRuntime?: ClickyCommandRuntime;
+    formPre?: PreExtension[];
+    formPost?: PostExtension[];
+    formActions?: FormActionsRenderer;
+    className?: string;
+};
+export declare function OperationActionBar({ actions, client, getLockedValues, onExecuted, initialValue, hideLockedInForm, commandRuntime, formPre, formPost, formActions, className, }: OperationActionBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OperationActionBar.d.ts.map

package/dist/rpc/OperationActionBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationActionBar.d.ts","sourceRoot":"","sources":["../../src/rpc/OperationActionBar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAK3D,OAAO,EAAoB,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGhF,OAAO,KAAK,EAAqB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACpE,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACd,MAAM,sCAAsC,CAAC;AAE9C,MAAM,MAAM,uBAAuB,GAAG;IAIpC,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,MAAM,EAAE,mBAAmB,CAAC;IAG5B,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAExE,UAAU,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAExC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAGvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAElC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAOF,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,MAAM,EACN,eAAe,EACf,UAAU,EACV,YAAY,EACZ,gBAAwB,EACxB,cAAc,EACd,OAAO,EACP,QAAQ,EACR,WAAW,EACX,SAAS,GACV,EAAE,uBAAuB,2CA4HzB"}

package/dist/rpc/OperationActionBar.js

@@ -0,0 +1,135 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../components/button.js";
+import { cn } from "../lib/utils.js";
+import { MethodBadge } from "../data/MethodBadge.js";
+import { Modal } from "../overlay/Modal.js";
+import { ExecutionResult } from "./ExecutionResult.js";
+import { FilterForm } from "./FilterForm.js";
+import { SchemaActionForm } from "./SchemaActionForm.js";
+import { getOperationClickyMeta, surfaceActionLabel } from "./clickyMetadata.js";
+import { packParameterValues } from "./formMetadata.js";
+function OperationActionBar({
+  actions,
+  client,
+  getLockedValues,
+  onExecuted,
+  initialValue,
+  hideLockedInForm = false,
+  commandRuntime,
+  formPre,
+  formPost,
+  formActions,
+  className
+}) {
+  const [activeAction, setActiveAction] = useState(null);
+  const [actionResult, setActionResult] = useState(null);
+  const [actionError, setActionError] = useState("");
+  const [isExecutingAction, setIsExecutingAction] = useState(false);
+  const activeMeta = activeAction ? getOperationClickyMeta(activeAction) : void 0;
+  const lockedValues = activeAction ? (getLockedValues == null ? void 0 : getLockedValues(activeAction)) ?? {} : {};
+  function openAction(op) {
+    setActiveAction(op);
+    setActionResult(null);
+    setActionError("");
+  }
+  async function executeAction(values) {
+    if (!activeAction) return;
+    setIsExecutingAction(true);
+    setActionError("");
+    try {
+      const response = await client.executeCommand(
+        activeAction.path,
+        activeAction.method,
+        packParameterValues(values, activeAction.operation.parameters ?? []),
+        { Accept: "application/json+clicky" }
+      );
+      setActionResult(response);
+      await (onExecuted == null ? void 0 : onExecuted());
+    } catch (err) {
+      setActionResult(null);
+      setActionError(err instanceof Error ? err.message : String(err ?? "Unknown error"));
+    } finally {
+      setIsExecutingAction(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    actions.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2", className), children: actions.map((op) => {
+      const label = surfaceActionLabel(op);
+      const summary = op.operation.summary || op.operation.description;
+      const tooltip = summary && summary !== label ? `${label} — ${summary}` : label;
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          title: tooltip,
+          onClick: () => openAction(op),
+          children: label
+        },
+        `${op.method}:${op.path}`
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        open: activeAction != null,
+        onClose: () => setActiveAction(null),
+        title: activeAction ? surfaceActionLabel(activeAction) : "Action",
+        size: "lg",
+        children: activeAction && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(MethodBadge, { method: activeAction.method }),
+            /* @__PURE__ */ jsx("code", { className: "rounded-md bg-muted px-2 py-1 text-sm", children: activeAction.path })
+          ] }),
+          /* @__PURE__ */ jsx(
+            SchemaActionForm,
+            {
+              client,
+              action: activeAction,
+              lockedValues,
+              submitLabel: surfaceActionLabel(activeAction),
+              ...initialValue ? { initialValue } : {},
+              ...formPre ? { formPre } : {},
+              ...formPost ? { formPost } : {},
+              ...formActions ? { footerActions: formActions } : {},
+              onSuccess: () => {
+                setActiveAction(null);
+                void (onExecuted == null ? void 0 : onExecuted());
+              },
+              fallback: /* @__PURE__ */ jsx(
+                FilterForm,
+                {
+                  client,
+                  path: activeAction.path,
+                  method: activeAction.method,
+                  parameters: activeAction.operation.parameters ?? [],
+                  lockedValues,
+                  enableLookup: Boolean(activeMeta == null ? void 0 : activeMeta.supportsLookup),
+                  submitLabel: "Execute request",
+                  submittingLabel: "Executing…",
+                  isSubmitting: isExecutingAction,
+                  onSubmit: executeAction,
+                  ...hideLockedInForm ? { hideLocked: true } : {}
+                }
+              )
+            }
+          ),
+          actionError ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive", children: actionError }) : actionResult ? /* @__PURE__ */ jsx(
+            ExecutionResult,
+            {
+              response: actionResult,
+              className: "mt-0",
+              ...commandRuntime ? { commandRuntime } : {}
+            }
+          ) : null
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  OperationActionBar
+};
+//# sourceMappingURL=OperationActionBar.js.map

package/dist/rpc/OperationActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationActionBar.js","sources":["../../src/rpc/OperationActionBar.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Button } from \"../components/button\";\nimport { cn } from \"../lib/utils\";\nimport type { ClickyCommandRuntime } from \"../data/Clicky\";\nimport { MethodBadge } from \"../data/MethodBadge\";\nimport { Modal } from \"../overlay/Modal\";\nimport { ExecutionResult } from \"./ExecutionResult\";\nimport { FilterForm } from \"./FilterForm\";\nimport { SchemaActionForm, type FormActionsRenderer } from \"./SchemaActionForm\";\nimport { getOperationClickyMeta, surfaceActionLabel } from \"./clickyMetadata\";\nimport { packParameterValues } from \"./formMetadata\";\nimport type { ExecutionResponse, ResolvedOperation } from \"./types\";\nimport { type OperationsApiClient } from \"./useOperations\";\nimport type {\n  PreExtension,\n  PostExtension,\n} from \"../components/json-schema-form-types\";\n\nexport type OperationActionBarProps = {\n  // Operations rendered as buttons. The list page passes collection-scoped\n  // actions, the detail page passes entity-scoped actions — this component\n  // renders both identically (same labels, same location, same modal).\n  actions: ResolvedOperation[];\n  client: OperationsApiClient;\n  // Path/filter values locked into the action form. The detail page locks the\n  // row id; the list page locks the active list filters for a bulk action.\n  getLockedValues?: (action: ResolvedOperation) => Record<string, string>;\n  // Refetch the surrounding view (list/detail) once an action succeeds.\n  onExecuted?: () => void | Promise<void>;\n  // Pre-filled form value (the existing entity when editing).\n  initialValue?: Record<string, unknown>;\n  // Hide the locked values in the fallback parameter form (detail hides the id;\n  // the list shows the locked filters for transparency).\n  hideLockedInForm?: boolean;\n  commandRuntime?: ClickyCommandRuntime;\n  formPre?: PreExtension[];\n  formPost?: PostExtension[];\n  formActions?: FormActionsRenderer;\n  // Layout placement only — the bar's own styling stays consistent across pages.\n  className?: string;\n};\n\n// OperationActionBar is the single render path for entity action buttons shared\n// by the list (OperationCatalog) and detail (OperationEntityPage) pages: a row\n// of buttons that each open the execution Modal (schema form, or parameter-form\n// fallback) inline. Keeping it shared guarantees both surfaces present the same\n// labels in the same location.\nexport function OperationActionBar({\n  actions,\n  client,\n  getLockedValues,\n  onExecuted,\n  initialValue,\n  hideLockedInForm = false,\n  commandRuntime,\n  formPre,\n  formPost,\n  formActions,\n  className,\n}: OperationActionBarProps) {\n  const [activeAction, setActiveAction] = useState<ResolvedOperation | null>(null);\n  const [actionResult, setActionResult] = useState<ExecutionResponse | null>(null);\n  const [actionError, setActionError] = useState(\"\");\n  const [isExecutingAction, setIsExecutingAction] = useState(false);\n\n  const activeMeta = activeAction ? getOperationClickyMeta(activeAction) : undefined;\n  const lockedValues = activeAction ? (getLockedValues?.(activeAction) ?? {}) : {};\n\n  function openAction(op: ResolvedOperation) {\n    setActiveAction(op);\n    setActionResult(null);\n    setActionError(\"\");\n  }\n\n  async function executeAction(values: Record<string, string>) {\n    if (!activeAction) return;\n    setIsExecutingAction(true);\n    setActionError(\"\");\n\n    try {\n      const response = await client.executeCommand(\n        activeAction.path,\n        activeAction.method,\n        packParameterValues(values, activeAction.operation.parameters ?? []),\n        { Accept: \"application/json+clicky\" },\n      );\n      setActionResult(response);\n      await onExecuted?.();\n    } catch (err) {\n      setActionResult(null);\n      setActionError(err instanceof Error ? err.message : String(err ?? \"Unknown error\"));\n    } finally {\n      setIsExecutingAction(false);\n    }\n  }\n\n  return (\n    <>\n      {actions.length > 0 && (\n        <div className={cn(\"flex flex-wrap gap-2\", className)}>\n          {actions.map((op) => {\n            const label = surfaceActionLabel(op);\n            const summary = op.operation.summary || op.operation.description;\n            const tooltip = summary && summary !== label ? `${label} — ${summary}` : label;\n            return (\n              <Button\n                key={`${op.method}:${op.path}`}\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                title={tooltip}\n                onClick={() => openAction(op)}\n              >\n                {label}\n              </Button>\n            );\n          })}\n        </div>\n      )}\n\n      <Modal\n        open={activeAction != null}\n        onClose={() => setActiveAction(null)}\n        title={\n          activeAction\n            ? surfaceActionLabel(activeAction)\n            : \"Action\"\n        }\n        size=\"lg\"\n      >\n        {activeAction && (\n          <div className=\"space-y-4\">\n            <div className=\"flex items-center gap-3\">\n              <MethodBadge method={activeAction.method} />\n              <code className=\"rounded-md bg-muted px-2 py-1 text-sm\">\n                {activeAction.path}\n              </code>\n            </div>\n            <SchemaActionForm\n              client={client}\n              action={activeAction}\n              lockedValues={lockedValues}\n              submitLabel={surfaceActionLabel(activeAction)}\n              {...(initialValue ? { initialValue } : {})}\n              {...(formPre ? { formPre } : {})}\n              {...(formPost ? { formPost } : {})}\n              {...(formActions ? { footerActions: formActions } : {})}\n              onSuccess={() => {\n                setActiveAction(null);\n                void onExecuted?.();\n              }}\n              fallback={\n                <FilterForm\n                  client={client}\n                  path={activeAction.path}\n                  method={activeAction.method}\n                  parameters={activeAction.operation.parameters ?? []}\n                  lockedValues={lockedValues}\n                  enableLookup={Boolean(activeMeta?.supportsLookup)}\n                  submitLabel=\"Execute request\"\n                  submittingLabel=\"Executing…\"\n                  isSubmitting={isExecutingAction}\n                  onSubmit={executeAction}\n                  {...(hideLockedInForm ? { hideLocked: true } : {})}\n                />\n              }\n            />\n            {actionError ? (\n              <div className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive\">\n                {actionError}\n              </div>\n            ) : actionResult ? (\n              <ExecutionResult\n                response={actionResult}\n                className=\"mt-0\"\n                {...(commandRuntime ? { commandRuntime } : {})}\n              />\n            ) : null}\n          </div>\n        )}\n      </Modal>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/rpc/OperationCatalog.cjs

@@ -5,19 +5,16 @@ const react = require("react");
 const reactQuery = require("@tanstack/react-query");
 const button = require("../components/button.cjs");
 const Icon = require("../data/Icon.cjs");
-const MethodBadge = require("../data/MethodBadge.cjs");
-const Modal = require("../overlay/Modal.cjs");
 const classify = require("./classify.cjs");
 const clickyMetadata = require("./clickyMetadata.cjs");
 const EndpointList = require("./EndpointList.cjs");
-const ExecutionResult = require("./ExecutionResult.cjs");
-const FilterForm = require("./FilterForm.cjs");
+const OperationActionBar = require("./OperationActionBar.cjs");
+const OperationResultView = require("./OperationResultView.cjs");
 const filterBarUtils = require("../components/filter-bar-utils.cjs");
 const useOperations = require("./useOperations.cjs");
 const formMetadata = require("./formMetadata.cjs");
 const UiTable = require("../icons/components/UiTable.cjs");
 const UiListFlat = require("../icons/components/UiListFlat.cjs");
-const UiAdd = require("../icons/components/UiAdd.cjs");
 const defaultCommandHref = (operationId) => `/commands/${operationId}`;
 function defaultRenderError(err, title) {
   const message = err instanceof Error ? err.message : String(err ?? "");
@@ -37,14 +34,14 @@ function OperationCatalog({
   getCommandHref = defaultCommandHref,
   renderError = defaultRenderError,
   kind,
-  commandRuntime
+  commandRuntime,
+  formPre,
+  formPost,
+  formActions,
+  resultRenderer
 }) {
   const { operations, isLoading } = useOperations.useOperations(client);
   const [view, setView] = react.useState("table");
-  const [activeAction, setActiveAction] = react.useState(null);
-  const [actionResult, setActionResult] = react.useState(null);
-  const [actionError, setActionError] = react.useState("");
-  const [isExecutingAction, setIsExecutingAction] = react.useState(false);
   const surfaceOps = react.useMemo(
     () => clickyMetadata.filterOperationsBySurface(operations, surfaceKey),
     [operations, surfaceKey]
@@ -58,13 +55,24 @@ function OperationCatalog({
     if (!useSurfaceMetadata) return void 0;
     return clickyMetadata.findSurfaceListOperation(domainOps, surfaceKey);
   }, [domainOps, surfaceKey, useSurfaceMetadata]);
-  const [filters, setFilters] = react.useState(() => readFiltersFromUrl());
+  const detailOperation = react.useMemo(
+    () => useSurfaceMetadata ? clickyMetadata.findSurfaceDetailOperation(domainOps, surfaceKey) : void 0,
+    [domainOps, surfaceKey, useSurfaceMetadata]
+  );
+  const [filters, setFilters] = react.useState(
+    () => readFiltersFromUrl()
+  );
   const listParameters = (listEndpoint == null ? void 0 : listEndpoint.operation.parameters) ?? [];
   react.useEffect(() => {
     writeFiltersToUrl(filters);
   }, [filters]);
   const listQuery = reactQuery.useQuery({
-    queryKey: ["operation-list", listEndpoint == null ? void 0 : listEndpoint.method, listEndpoint == null ? void 0 : listEndpoint.path, filters],
+    queryKey: [
+      "operation-list",
+      listEndpoint == null ? void 0 : listEndpoint.method,
+      listEndpoint == null ? void 0 : listEndpoint.path,
+      filters
+    ],
     queryFn: () => client.executeCommand(
       listEndpoint.path,
       listEndpoint.method,
@@ -79,7 +87,12 @@ function OperationCatalog({
     retry: 0
   });
   const lookupQuery = reactQuery.useQuery({
-    queryKey: ["operation-lookup", listEndpoint == null ? void 0 : listEndpoint.method, listEndpoint == null ? void 0 : listEndpoint.path, filters],
+    queryKey: [
+      "operation-lookup",
+      listEndpoint == null ? void 0 : listEndpoint.method,
+      listEndpoint == null ? void 0 : listEndpoint.path,
+      filters
+    ],
     queryFn: async () => {
       var _a;
       return await ((_a = client.lookupFilters) == null ? void 0 : _a.call(
@@ -95,7 +108,7 @@ function OperationCatalog({
     retry: 0
   });
   const actionOps = react.useMemo(
-    () => useSurfaceMetadata ? clickyMetadata.findSurfaceActions(domainOps, surfaceKey) : [],
+    () => useSurfaceMetadata ? clickyMetadata.findSurfaceCollectionActions(domainOps, surfaceKey) : [],
     [domainOps, surfaceKey, useSurfaceMetadata]
   );
   const filterBarConfig = react.useMemo(() => {
@@ -112,20 +125,21 @@ function OperationCatalog({
     [filterBarConfig.pagination, listQuery.data]
   );
   const decoratedFilters = react.useMemo(
-    () => filterBarConfig.filters.map((filter) => filterBarUtils.applyFilterExtensions(filter, filterPre)),
+    () => filterBarConfig.filters.map(
+      (filter) => filterBarUtils.applyFilterExtensions(filter, filterPre)
+    ),
     [filterBarConfig.filters, filterPre]
   );
   const hasTable = !!listEndpoint;
   const showTable = hasTable && view === "table";
   const sectionLabel = kind === "configuration" || definition.key.startsWith("config-") ? "Configuration" : "Operations";
-  const activeActionMeta = activeAction ? clickyMetadata.getOperationClickyMeta(activeAction) : void 0;
-  const actionLockedValues = react.useMemo(() => {
-    const meta = activeActionMeta;
-    if (!activeAction || meta == null || !meta.supportsFilterMode) {
+  function getActionLockedValues(op) {
+    const meta = clickyMetadata.getOperationClickyMeta(op);
+    if (meta == null || !meta.supportsFilterMode) {
       return {};
     }
     const locked = {};
-    for (const param of activeAction.operation.parameters ?? []) {
+    for (const param of op.operation.parameters ?? []) {
       const value = filters[param.name];
       if (param.in === "query" && value) {
         locked[param.name] = value;
@@ -134,30 +148,10 @@ function OperationCatalog({
     if (meta.idParam) {
       locked[meta.idParam] = "all";
     }
-    if ((activeAction.operation.parameters ?? []).some((param) => param.name === "filter")) {
+    if ((op.operation.parameters ?? []).some((param) => param.name === "filter")) {
       locked.filter = Object.entries(filters).filter(([, value]) => value).map(([key, value]) => `${key}=${value}`).join(", ") || "current list filters";
     }
     return locked;
-  }, [activeAction, activeActionMeta, filters]);
-  async function executeAction(values) {
-    if (!activeAction) return;
-    setIsExecutingAction(true);
-    setActionError("");
-    try {
-      const response = await client.executeCommand(
-        activeAction.path,
-        activeAction.method,
-        formMetadata.packParameterValues(values, activeAction.operation.parameters ?? []),
-        { Accept: "application/json+clicky" }
-      );
-      setActionResult(response);
-      await listQuery.refetch();
-    } catch (err) {
-      setActionResult(null);
-      setActionError(err instanceof Error ? err.message : String(err ?? "Unknown error"));
-    } finally {
-      setIsExecutingAction(false);
-    }
   }
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
@@ -202,46 +196,48 @@ function OperationCatalog({
         )
       ] })
     ] }),
-    actionOps.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: actionOps.map((op) => {
-      const label = clickyMetadata.surfaceActionLabel(op);
-      const summary = op.operation.summary || op.operation.description;
-      const tooltip = summary ? `${label} — ${summary}` : label;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        button.Button,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      OperationActionBar.OperationActionBar,
+      {
+        actions: actionOps,
+        client,
+        getLockedValues: getActionLockedValues,
+        onExecuted: () => void listQuery.refetch(),
+        ...commandRuntime ? { commandRuntime } : {},
+        ...formPre ? { formPre } : {},
+        ...formPost ? { formPost } : {},
+        ...formActions ? { formActions } : {}
+      }
+    ),
+    showTable ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: listQuery.isError && !listQuery.data ? renderError(
+      listQuery.error,
+      `Failed to load ${(listEndpoint == null ? void 0 : listEndpoint.path) ?? ""}`
+    ) : (() => {
+      const defaultView = /* @__PURE__ */ jsxRuntime.jsx(
+        OperationResultView.OperationResultView,
         {
-          type: "button",
-          variant: "outline",
-          size: "sm",
-          title: tooltip,
-          onClick: () => {
-            setActiveAction(op);
-            setActionResult(null);
-            setActionError("");
+          response: listQuery.data ?? null,
+          loading: listQuery.isFetching,
+          loadingMessage: `Loading ${definition.title} results…`,
+          emptyMessage: "No records returned",
+          ariaLabel: `${definition.title} results`,
+          className: "mt-0",
+          detailOperation,
+          filterConfig: {
+            filters: decoratedFilters,
+            ...filterBarConfig.search ? { search: filterBarConfig.search } : {},
+            ...filterBarConfig.timeRange ? { timeRange: filterBarConfig.timeRange } : {}
           },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiAdd.UiAdd, className: "text-xs" }),
-            label
-          ]
-        },
-        `${op.method}:${op.path}`
+          ...commandRuntime ? { commandRuntime } : {},
+          ...dataTablePagination ? { pagination: dataTablePagination } : {}
+        }
       );
-    }) }),
-    showTable ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: listQuery.isError && !listQuery.data ? renderError(listQuery.error, `Failed to load ${(listEndpoint == null ? void 0 : listEndpoint.path) ?? ""}`) : /* @__PURE__ */ jsxRuntime.jsx(
-      ExecutionResult.ExecutionResult,
-      {
+      return resultRenderer ? resultRenderer({
         response: listQuery.data ?? null,
-        loading: listQuery.isFetching,
-        loadingMessage: `Loading ${definition.title} results…`,
-        emptyMessage: "No records returned",
-        ariaLabel: `${definition.title} results`,
-        className: "mt-0",
-        ...commandRuntime ? { commandRuntime } : {},
-        ...filterBarConfig.search ? { search: filterBarConfig.search } : {},
-        ...filterBarConfig.timeRange ? { timeRange: filterBarConfig.timeRange } : {},
-        ...decoratedFilters.length > 0 ? { externalFilters: decoratedFilters } : {},
-        ...dataTablePagination ? { pagination: dataTablePagination } : {}
-      }
-    ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        defaultView,
+        ...surfaceKey ? { surfaceKey } : {}
+      }) : defaultView;
+    })() }) : /* @__PURE__ */ jsxRuntime.jsx(
       EndpointList.EndpointList,
       {
         operations: domainOps,
@@ -249,44 +245,6 @@ function OperationCatalog({
         renderLink,
         getCommandHref
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Modal.Modal,
-      {
-        open: activeAction != null,
-        onClose: () => setActiveAction(null),
-        title: (activeAction == null ? void 0 : activeAction.operation.summary) || (activeActionMeta == null ? void 0 : activeActionMeta.actionName) || (activeAction == null ? void 0 : activeAction.operation.operationId) || "Action",
-        size: "lg",
-        children: activeAction && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(MethodBadge.MethodBadge, { method: activeAction.method }),
-            /* @__PURE__ */ jsxRuntime.jsx("code", { className: "rounded-md bg-muted px-2 py-1 text-sm", children: activeAction.path })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FilterForm.FilterForm,
-            {
-              client,
-              path: activeAction.path,
-              method: activeAction.method,
-              parameters: activeAction.operation.parameters ?? [],
-              lockedValues: actionLockedValues,
-              enableLookup: Boolean(activeActionMeta == null ? void 0 : activeActionMeta.supportsLookup),
-              submitLabel: "Execute request",
-              submittingLabel: "Executing…",
-              isSubmitting: isExecutingAction,
-              onSubmit: executeAction
-            }
-          ),
-          actionError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive", children: actionError }) : actionResult ? /* @__PURE__ */ jsxRuntime.jsx(
-            ExecutionResult.ExecutionResult,
-            {
-              response: actionResult,
-              className: "mt-0",
-              ...commandRuntime ? { commandRuntime } : {}
-            }
-          ) : null
-        ] })
-      }
     )
   ] });
 }
@@ -301,7 +259,12 @@ function readFiltersFromUrl() {
   return values;
 }
 function SkeletonBlock({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `animate-pulse rounded-md bg-muted ${className ?? ""}`.trim() });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `animate-pulse rounded-md bg-muted ${className ?? ""}`.trim()
+    }
+  );
 }
 function writeFiltersToUrl(filters) {
   if (typeof window === "undefined") return;