@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7194.1.ab4fc81f82

package/dist/modules/workflows/components/InspectorPanel.js

@@ -0,0 +1,161 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription
+} from "@open-mercato/ui/primitives/drawer";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+const DOCKED_WIDTH_CLASS = "w-96";
+function InspectorHeading({
+  title,
+  typeLabel,
+  typeLabelVariant,
+  description,
+  recordId,
+  recordIdLabel,
+  headerExtra,
+  titleId,
+  descriptionId,
+  as
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      as === "drawer" ? /* @__PURE__ */ jsx(DrawerTitle, { id: titleId, children: title }) : /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-base font-semibold leading-tight text-foreground", children: title }),
+      typeLabel ? /* @__PURE__ */ jsx(Badge, { variant: typeLabelVariant ?? "secondary", className: "text-xs", children: typeLabel }) : null
+    ] }),
+    description ? as === "drawer" ? /* @__PURE__ */ jsx(DrawerDescription, { id: descriptionId, children: description }) : /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-sm text-muted-foreground", children: description }) : null,
+    recordId ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+        recordIdLabel,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx("code", { className: "truncate rounded bg-muted px-1.5 py-0.5 font-mono", children: recordId })
+    ] }) : null,
+    headerExtra
+  ] });
+}
+function InspectorPanel({
+  open,
+  onClose,
+  variant,
+  title,
+  typeLabel,
+  typeLabelVariant,
+  description,
+  recordId,
+  recordIdLabel,
+  headerExtra,
+  wide,
+  children
+}) {
+  const t = useT();
+  const reactId = React.useId();
+  const titleId = `${reactId}-title`;
+  const descriptionId = `${reactId}-description`;
+  const idLabel = recordIdLabel ?? t("workflows.fields.id", "ID");
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      onClose();
+    },
+    [onClose]
+  );
+  if (variant === "overlay") {
+    return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange: (next) => {
+      if (!next) onClose();
+    }, children: /* @__PURE__ */ jsx(
+      DrawerContent,
+      {
+        side: "right",
+        "aria-labelledby": titleId,
+        "aria-describedby": description ? descriptionId : void 0,
+        closeAriaLabel: t("workflows.inspector.close", "Close inspector"),
+        className: wide ? "p-0 w-full max-w-none sm:w-4/5" : "p-0",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "workflow-inspector",
+            "data-variant": "overlay",
+            className: "flex min-h-0 flex-1 flex-col",
+            children: [
+              /* @__PURE__ */ jsx(DrawerHeader, { className: "border-b border-border/70", children: /* @__PURE__ */ jsx(
+                InspectorHeading,
+                {
+                  title,
+                  typeLabel,
+                  typeLabelVariant,
+                  description,
+                  recordId,
+                  recordIdLabel: idLabel,
+                  headerExtra,
+                  titleId,
+                  descriptionId,
+                  as: "drawer"
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-6 py-4", children })
+            ]
+          }
+        )
+      }
+    ) });
+  }
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      role: "complementary",
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descriptionId : void 0,
+      "data-slot": "workflow-inspector",
+      "data-variant": "docked",
+      onKeyDown: handleKeyDown,
+      className: `flex ${DOCKED_WIDTH_CLASS} min-h-0 shrink-0 flex-col overflow-hidden border-l border-border bg-card`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-start gap-2 border-b border-border/70 px-4 py-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: /* @__PURE__ */ jsx(
+            InspectorHeading,
+            {
+              title,
+              typeLabel,
+              typeLabelVariant,
+              description,
+              recordId,
+              recordIdLabel: idLabel,
+              headerExtra,
+              titleId,
+              descriptionId,
+              as: "plain"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              "aria-label": t("workflows.inspector.close", "Close inspector"),
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-4 py-3", children })
+      ]
+    }
+  );
+}
+var InspectorPanel_default = InspectorPanel;
+export {
+  InspectorPanel,
+  InspectorPanel_default as default
+};
+//# sourceMappingURL=InspectorPanel.js.map

package/dist/modules/workflows/components/InspectorPanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/workflows/components/InspectorPanel.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { X } from 'lucide-react'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerDescription,\n} from '@open-mercato/ui/primitives/drawer'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\n/**\n * How the inspector is presented.\n *\n * `docked` is the spec \u00A74.1 right rail: it lives IN the editor's layout row, so\n * opening it shrinks the canvas rather than covering it, and the canvas stays\n * interactive underneath \u2014 clicking another step re-targets the same rail. That\n * is the whole point of an inspector, and it is what the 1280\u00D7675 modal this\n * replaces could not do.\n *\n * `overlay` is the same content in a modal Drawer, for viewports with no room\n * for a rail beside the canvas. Below the docking threshold a 384px rail leaves\n * the graph unusable, so covering it is the honest answer.\n */\nexport type InspectorPanelVariant = 'docked' | 'overlay'\n\nexport interface InspectorPanelProps {\n  open: boolean\n  onClose: () => void\n  variant: InspectorPanelVariant\n  /** Panel heading \u2014 what KIND of thing is being inspected (\"Edit step\"). */\n  title: string\n  /** Optional type chip beside the heading (\"User task\", \"Route\"). */\n  typeLabel?: string\n  /** Badge variant for the type chip \u2014 the route inspector colours it by trigger. */\n  typeLabelVariant?: React.ComponentProps<typeof Badge>['variant']\n  /** Optional one-line explanation under the heading. */\n  description?: string\n  /** Optional durable id rendered as a monospace chip. */\n  recordId?: string\n  /** Label for the id chip; defaults to the shared \"ID\" string. */\n  recordIdLabel?: string\n  /**\n   * Extra header rows below the id chip. The route inspector uses it for the\n   * `source \u2192 target` line, which is identity rather than configuration and so\n   * belongs beside the id rather than inside the scrolling form.\n   */\n  headerExtra?: React.ReactNode\n  /**\n   * Widen the `overlay` Drawer to match the definition metadata drawer\n   * (`sm:w-4/5`) instead of the DS default 400px. Content-dense inspectors \u2014 the\n   * step editor with its Invoke-Agent, timeout and sub-editor sections \u2014 are\n   * unusable at 400px, so they opt in. No effect on the `docked` rail.\n   */\n  wide?: boolean\n  children: React.ReactNode\n}\n\n/**\n * The panel is `w-96` (384px) rather than the design's 380px: arbitrary\n * Tailwind values are banned repo-wide and 384px is the nearest DS step. Four\n * pixels do not read at this size.\n */\nconst DOCKED_WIDTH_CLASS = 'w-96'\n\nfunction InspectorHeading({\n  title,\n  typeLabel,\n  typeLabelVariant,\n  description,\n  recordId,\n  recordIdLabel,\n  headerExtra,\n  titleId,\n  descriptionId,\n  as,\n}: {\n  title: string\n  typeLabel?: string\n  typeLabelVariant?: React.ComponentProps<typeof Badge>['variant']\n  description?: string\n  recordId?: string\n  recordIdLabel: string\n  headerExtra?: React.ReactNode\n  titleId: string\n  descriptionId: string\n  as: 'plain' | 'drawer'\n}) {\n  return (\n    <>\n      <div className=\"flex items-center gap-2\">\n        {as === 'drawer' ? (\n          <DrawerTitle id={titleId}>{title}</DrawerTitle>\n        ) : (\n          <h2 id={titleId} className=\"text-base font-semibold leading-tight text-foreground\">\n            {title}\n          </h2>\n        )}\n        {typeLabel ? (\n          <Badge variant={typeLabelVariant ?? 'secondary'} className=\"text-xs\">\n            {typeLabel}\n          </Badge>\n        ) : null}\n      </div>\n      {description ? (\n        as === 'drawer' ? (\n          <DrawerDescription id={descriptionId}>{description}</DrawerDescription>\n        ) : (\n          <p id={descriptionId} className=\"text-sm text-muted-foreground\">\n            {description}\n          </p>\n        )\n      ) : null}\n      {recordId ? (\n        <div className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n          <span className=\"font-medium\">{recordIdLabel}:</span>\n          <code className=\"truncate rounded bg-muted px-1.5 py-0.5 font-mono\">{recordId}</code>\n        </div>\n      ) : null}\n      {headerExtra}\n    </>\n  )\n}\n\n/**\n * Shared shell for the step and route inspectors.\n *\n * Both surfaces render the SAME content through this component, so a step and a\n * route are always inspected in the same place with the same chrome \u2014 the two\n * used to be independent modals that had drifted apart in padding, heading\n * shape and close affordance.\n */\nexport function InspectorPanel({\n  open,\n  onClose,\n  variant,\n  title,\n  typeLabel,\n  typeLabelVariant,\n  description,\n  recordId,\n  recordIdLabel,\n  headerExtra,\n  wide,\n  children,\n}: InspectorPanelProps) {\n  const t = useT()\n  const reactId = React.useId()\n  const titleId = `${reactId}-title`\n  const descriptionId = `${reactId}-description`\n  const idLabel = recordIdLabel ?? t('workflows.fields.id', 'ID')\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (event.key !== 'Escape') return\n      // Only claim Escape that originated inside the rail. The docked panel is\n      // not modal, so a global handler would steal Escape from the canvas.\n      event.stopPropagation()\n      onClose()\n    },\n    [onClose],\n  )\n\n  if (variant === 'overlay') {\n    return (\n      <Drawer open={open} onOpenChange={(next) => { if (!next) onClose() }}>\n        <DrawerContent\n          side=\"right\"\n          aria-labelledby={titleId}\n          aria-describedby={description ? descriptionId : undefined}\n          closeAriaLabel={t('workflows.inspector.close', 'Close inspector')}\n          className={wide ? 'p-0 w-full max-w-none sm:w-4/5' : 'p-0'}\n        >\n          {/* Both variants carry the same `data-slot` marker: it is how any\n              consumer addresses \"the inspector\" without knowing which layout it\n              got. It cannot be spread onto `DrawerContent`, whose own\n              `data-slot=\"drawer-content\"` the spread would clobber. */}\n          <div\n            data-slot=\"workflow-inspector\"\n            data-variant=\"overlay\"\n            className=\"flex min-h-0 flex-1 flex-col\"\n          >\n            <DrawerHeader className=\"border-b border-border/70\">\n              <InspectorHeading\n                title={title}\n                typeLabel={typeLabel}\n                typeLabelVariant={typeLabelVariant}\n                description={description}\n                recordId={recordId}\n                recordIdLabel={idLabel}\n                headerExtra={headerExtra}\n                titleId={titleId}\n                descriptionId={descriptionId}\n                as=\"drawer\"\n              />\n            </DrawerHeader>\n            <div className=\"min-h-0 flex-1 overflow-y-auto px-6 py-4\">{children}</div>\n          </div>\n        </DrawerContent>\n      </Drawer>\n    )\n  }\n\n  if (!open) return null\n\n  return (\n    <aside\n      role=\"complementary\"\n      aria-labelledby={titleId}\n      aria-describedby={description ? descriptionId : undefined}\n      data-slot=\"workflow-inspector\"\n      data-variant=\"docked\"\n      onKeyDown={handleKeyDown}\n      className={`flex ${DOCKED_WIDTH_CLASS} min-h-0 shrink-0 flex-col overflow-hidden border-l border-border bg-card`}\n    >\n      <div className=\"flex shrink-0 items-start gap-2 border-b border-border/70 px-4 py-3\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          <InspectorHeading\n            title={title}\n            typeLabel={typeLabel}\n            typeLabelVariant={typeLabelVariant}\n            description={description}\n            recordId={recordId}\n            recordIdLabel={idLabel}\n            headerExtra={headerExtra}\n            titleId={titleId}\n            descriptionId={descriptionId}\n            as=\"plain\"\n          />\n        </div>\n        <IconButton\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          aria-label={t('workflows.inspector.close', 'Close inspector')}\n          onClick={onClose}\n        >\n          <X className=\"size-4\" />\n        </IconButton>\n      </div>\n      <div className=\"min-h-0 flex-1 overflow-y-auto px-4 py-3\">{children}</div>\n    </aside>\n  )\n}\n\nexport default InspectorPanel\n"],
+  "mappings": "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",
+  "names": []
+}