@kopexa/extension-controlref 1.0.0 → 2.0.0

package/dist/components/control-block-view.js

@@ -0,0 +1,789 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/control-block-view.tsx
+var control_block_view_exports = {};
+__export(control_block_view_exports, {
+  ControlBlockView: () => ControlBlockView
+});
+module.exports = __toCommonJS(control_block_view_exports);
+var import_i18n = require("@kopexa/i18n");
+var import_icons = require("@kopexa/icons");
+var import_sight2 = require("@kopexa/sight");
+var import_react3 = require("@tiptap/react");
+var import_react4 = require("react");
+
+// src/messages/index.ts
+var import_react_intl = require("react-intl");
+var messages = (0, import_react_intl.defineMessages)({
+  control: {
+    id: "editor.controlref.control",
+    defaultMessage: "Control",
+    description: "Label for control"
+  },
+  settings_dialog_description: {
+    id: "editor.controlref.settings_dialog_description",
+    defaultMessage: "Customize the appearance and details of the control reference.",
+    description: "Description for the settings dialog"
+  },
+  controls: {
+    id: "editor.controlref.controls",
+    defaultMessage: "Controls",
+    description: "Label for controls"
+  },
+  change_control: {
+    id: "editor.controlref.change_control",
+    defaultMessage: "Change Control",
+    description: "Label for change control button"
+  },
+  map_control: {
+    id: "editor.controlref.map_control",
+    defaultMessage: "Map Control",
+    description: "Label for map control button"
+  },
+  settings: {
+    id: "editor.controlref.settings",
+    defaultMessage: "Settings",
+    description: "Label for settings button"
+  },
+  appearance: {
+    id: "editor.controlref.appearance",
+    defaultMessage: "Appearance",
+    description: "Label for appearance section"
+  },
+  search_controls: {
+    id: "editor.controlref.search_controls",
+    defaultMessage: "Search controls\u2026",
+    description: "Placeholder for search controls input"
+  },
+  variant: {
+    id: "editor.controlref.variant",
+    defaultMessage: "Variante",
+    description: "Label for variant section"
+  },
+  variant_hint: {
+    id: "editor.controlref.variant_hint",
+    defaultMessage: "Choose a visual emphasis for this section.",
+    description: "Hint for variant section"
+  },
+  variant_chip: {
+    id: "editor.controlref.variant_chip",
+    defaultMessage: "Chip",
+    description: "Label for variant chip"
+  },
+  variant_card: {
+    id: "editor.controlref.variant_card",
+    defaultMessage: "Card",
+    description: "Label for variant card"
+  },
+  show_status: {
+    id: "editor.controlref.show_status",
+    defaultMessage: "Show Status",
+    description: "Label for show status toggle"
+  },
+  show_description: {
+    id: "editor.controlref.show_description",
+    defaultMessage: "Show Description",
+    description: "Label for show description toggle"
+  },
+  show_implementations: {
+    id: "editor.controlref.show_implementations",
+    defaultMessage: "Show Implementations",
+    description: "Label for show implementations toggle"
+  },
+  border: {
+    id: "editor.controlref.border",
+    defaultMessage: "Border",
+    description: "Label for border toggle"
+  },
+  shadow: {
+    id: "editor.controlref.shadow",
+    defaultMessage: "Shadow",
+    description: "Label for shadow toggle"
+  },
+  radius: {
+    id: "editor.controlref.radius",
+    defaultMessage: "Radius",
+    description: "Label for radius toggle"
+  },
+  spacing: {
+    id: "editor.controlref.spacing",
+    defaultMessage: "Spacing",
+    description: "Label for spacing section"
+  },
+  cancel: {
+    id: "editor.controlref.cancel",
+    defaultMessage: "Cancel",
+    description: "Label for cancel button"
+  },
+  save_settings: {
+    id: "editor.controlref.save_settings",
+    defaultMessage: "Save Settings",
+    description: "Label for save settings button"
+  },
+  unmapped_control: {
+    id: "editor.controlref.unmapped_control",
+    defaultMessage: "Unmapped Control",
+    description: "Fallback label when no control is selected"
+  },
+  control_with_title: {
+    id: "editor.controlref.control_with_title",
+    defaultMessage: "Control: {title}",
+    description: "Dialog title with selected control"
+  },
+  search_hint: {
+    id: "editor.controlref.search_hint",
+    defaultMessage: "Start typing to search by ID, title or status.",
+    description: "Empty search hint"
+  },
+  no_results: {
+    id: "editor.controlref.no_results",
+    defaultMessage: "No controls found for \u201C{query}\u201D. You can keep this chip unmapped.",
+    description: "Shown when no controls match search query"
+  },
+  results_count: {
+    id: "editor.controlref.results_count",
+    defaultMessage: "{count, plural, one {# result} other {# results}}",
+    description: "Number of search results"
+  },
+  updated_at: {
+    id: "editor.controlref.updated_at",
+    defaultMessage: "Updated {date}",
+    description: "Updated date label"
+  },
+  selected: {
+    id: "editor.controlref.selected",
+    defaultMessage: "Selected",
+    description: "Label for selected item area"
+  },
+  no_control_selected: {
+    id: "editor.controlref.no_control_selected",
+    defaultMessage: "No control selected",
+    description: "Empty state in selected area"
+  },
+  clear: {
+    id: "editor.controlref.clear",
+    defaultMessage: "Clear",
+    description: "Clear selection button"
+  },
+  unmap: {
+    id: "editor.controlref.unmap",
+    defaultMessage: "Unmap",
+    description: "Unmap selection button"
+  },
+  live_preview: {
+    id: "editor.controlref.live_preview",
+    defaultMessage: "Live preview",
+    description: "Live preview section title"
+  },
+  display_options: {
+    id: "editor.controlref.display_options",
+    defaultMessage: "Display options",
+    description: "Display options section title"
+  },
+  show_status_indicator: {
+    id: "editor.controlref.show_status_indicator",
+    defaultMessage: "Show status indicator",
+    description: "Toggle for showing indicator"
+  },
+  searching: {
+    id: "editor.controlref.searching",
+    defaultMessage: "Searching\u2026",
+    description: "Loading indicator text"
+  },
+  map_control_aria: {
+    id: "editor.controlref.map_control_aria",
+    defaultMessage: "Map control",
+    description: "ARIA label for mapping control"
+  },
+  outdated_badge: {
+    id: "editor.controlref.outdated_badge",
+    defaultMessage: "A newer revision exists",
+    description: "Badge for outdated controls"
+  },
+  missing_badge: {
+    id: "editor.controlref.missing_badge",
+    defaultMessage: "Control no longer exists",
+    description: "Badge for missing controls"
+  },
+  error_loading: {
+    id: "editor.controlref.error_loading",
+    defaultMessage: "Failed to load controls",
+    description: "Error message when failing to load controls"
+  },
+  error_timeout: {
+    id: "editor.controlref.error_timeout",
+    defaultMessage: "The request timed out. Please try again.",
+    description: "Error message when the request times out"
+  },
+  missing_callout: {
+    id: "editor.controlref.missing_callout",
+    defaultMessage: "The currently mapped control could not be found. It may have been deleted or you may not have access to it anymore. Please select a different control.",
+    description: "Callout message when the selected control is missing"
+  },
+  outdated_callout: {
+    id: "editor.controlref.outdated_callout",
+    defaultMessage: "A newer revision of the currently mapped control exists. Consider updating to the latest version by re-selecting it below.",
+    description: "Callout message when the selected control is outdated"
+  },
+  search_placeholder: {
+    id: "editor.controlref.search_placeholder",
+    defaultMessage: "e.g. CTRL-001, Asset Inventory\u2026",
+    description: "Placeholder for search controls input"
+  },
+  control_implementations: {
+    id: "editor.controlref.control_implementations",
+    defaultMessage: "Implementations",
+    description: "Label for control implementations section"
+  },
+  header_status: {
+    id: "editor.controlblock.header_status",
+    defaultMessage: "Show status in header",
+    description: "Label for show status in header toggle"
+  },
+  header_status_aria: {
+    id: "editor.controlblock.header_status_aria",
+    defaultMessage: "Toggle status chip in card header",
+    description: "ARIA label for show status in header toggle"
+  },
+  header_status_avv_tip: {
+    id: "editor.controlblock.header_status_avv_tip",
+    defaultMessage: "If this document is intended for use or export as a data processing agreement (AVV), disable this option unless you explicitly want to publish the current control status.",
+    description: "Tooltip for show status in header toggle when used in AVV documents"
+  }
+});
+
+// src/components/control-picker.tsx
+var import_sight = require("@kopexa/sight");
+var import_react = require("react");
+var import_react_intl2 = require("react-intl");
+
+// src/utils/status-indicator.ts
+function norm(status) {
+  return (status != null ? status : "").trim().replace(/[\s-]+/g, "_").toUpperCase();
+}
+function colorForStatusKey(key) {
+  switch (key == null ? void 0 : key.toUpperCase()) {
+    case "FULFILLED_MANUAL":
+    case "FULFILLED_AUTO":
+    case "IMPLEMENTED":
+    case "APPROVED":
+    case "PASSED":
+      return "success";
+    case "IN_PROGRESS":
+    case "NEEDS_APPROVAL":
+    case "CHANGES_REQUESTED":
+    case "PENDING":
+    case "PARTIAL":
+      return "warning";
+    case "FAILED":
+    case "REJECTED":
+      return "destructive";
+    case "OUT_OF_SCOPE":
+    case "PREPARING":
+      return "secondary";
+    default:
+      return "default";
+  }
+}
+function getIndicatorProps(status, opts) {
+  var _a, _b;
+  const mapped = (_a = opts == null ? void 0 : opts.mapped) != null ? _a : true;
+  const enable = (_b = opts == null ? void 0 : opts.enable) != null ? _b : true;
+  if (!enable) {
+    return { indicator: false, indicatorColor: "default" };
+  }
+  if (!mapped) {
+    return {
+      indicator: true,
+      indicatorColor: "destructive",
+      indicatorVariant: "pulse"
+    };
+  }
+  const key = norm(status);
+  const indicatorColor = colorForStatusKey(key);
+  const shouldPulse = key === "IN_PROGRESS" || key === "NEEDS_APPROVAL" || key === "CHANGES_REQUESTED" || key === "PENDING";
+  return {
+    indicator: true,
+    indicatorColor,
+    ...shouldPulse ? { indicatorVariant: "pulse" } : {}
+  };
+}
+
+// src/components/control-picker.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ControlPicker({
+  resolver,
+  value,
+  onChange,
+  debounceMs = 300,
+  timeoutMs = 5e3,
+  initialQuery = "",
+  showItemStatus = true
+}) {
+  const intl = (0, import_react_intl2.useIntl)();
+  const searchId = (0, import_react.useId)();
+  const [search, setSearch] = (0, import_react.useState)(initialQuery);
+  const [debouncedSearch, setDebouncedSearch] = (0, import_react.useState)(search);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [results, setResults] = (0, import_react.useState)([]);
+  (0, import_react.useEffect)(() => {
+    const t = setTimeout(() => setDebouncedSearch(search), debounceMs);
+    return () => clearTimeout(t);
+  }, [search, debounceMs]);
+  (0, import_react.useEffect)(() => {
+    if (!(resolver == null ? void 0 : resolver.getControls)) return;
+    let ignore = false;
+    (async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const p = resolver.getControls(debouncedSearch);
+        const data = await Promise.race([
+          p,
+          new Promise(
+            (_, rej) => setTimeout(
+              () => rej(new Error(intl.formatMessage(messages.error_timeout))),
+              timeoutMs
+            )
+          )
+        ]);
+        if (!ignore) setResults(data);
+      } catch (e) {
+        if (!ignore) {
+          setError(
+            e instanceof Error ? e.message : intl.formatMessage(messages.error_loading)
+          );
+          setResults([]);
+        }
+      } finally {
+        if (!ignore) setLoading(false);
+      }
+    })();
+    return () => {
+      ignore = true;
+    };
+  }, [debouncedSearch, resolver, timeoutMs, intl]);
+  const statusNode = (0, import_react.useMemo)(() => {
+    if (loading)
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sight.Spinner, { size: "sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: intl.formatMessage(messages.searching) })
+      ] });
+    if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-destructive text-sm", children: error });
+    if (results.length === 0 && debouncedSearch)
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages.no_results, { query: debouncedSearch }) });
+    if (results.length > 0)
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages.results_count, {
+        count: results.length
+      }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages.search_hint) });
+  }, [loading, error, results.length, debouncedSearch, intl]);
+  const itemToStringValue = (item) => {
+    var _a, _b;
+    return (_b = (_a = item == null ? void 0 : item.title) != null ? _a : item == null ? void 0 : item.id) != null ? _b : "";
+  };
+  const highlight = (text) => {
+    const t = (text != null ? text : "").toString();
+    const q = debouncedSearch.trim();
+    if (!q) return t;
+    const i = t.toLowerCase().indexOf(q.toLowerCase());
+    if (i === -1) return t;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      t.slice(0, i),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("mark", { className: "bg-primary/15 rounded px-0.5", children: t.slice(i, i + q.length) }),
+      t.slice(i + q.length)
+    ] });
+  };
+  const indicator = getIndicatorProps(value == null ? void 0 : value.status, {
+    mapped: !!(value == null ? void 0 : value.id),
+    enable: showItemStatus
+  });
+  const selInd = value ? indicator : {
+    indicator: false,
+    indicatorColor: "default"
+  };
+  const handleClear = () => {
+    onChange(null);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sight.Label, { htmlFor: searchId, children: intl.formatMessage(messages.controls) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_sight.Autocomplete,
+        {
+          items: results,
+          value: search,
+          onValueChange: setSearch,
+          filter: null,
+          itemToStringValue,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sight.Autocomplete.Control, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_sight.Autocomplete.Input,
+                {
+                  id: searchId,
+                  placeholder: intl.formatMessage(messages.search_placeholder)
+                }
+              ),
+              search && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sight.Autocomplete.Clear, {})
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sight.Autocomplete.Content, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sticky top-0 z-10 bg-background border-b px-2 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sight.Autocomplete.Status, { children: statusNode }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sight.Autocomplete.List, { children: (c) => {
+                var _a, _b, _c;
+                const id = (_a = c.id) != null ? _a : crypto.randomUUID();
+                const active = (value == null ? void 0 : value.id) && c.id === value.id;
+                const ind = getIndicatorProps(c.status, {
+                  mapped: !!c.id,
+                  enable: showItemStatus
+                });
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_sight.Autocomplete.Item,
+                  {
+                    value: c,
+                    className: "rounded-lg data-[active=true]:bg-muted",
+                    "data-active": active ? "true" : void 0,
+                    "aria-selected": active ? "true" : "false",
+                    onClick: () => onChange(c),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2.5 truncate", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium truncate", children: highlight((_b = c.title) != null ? _b : c.id) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-sm text-muted-foreground truncate", children: [
+                          highlight((_c = c.id) != null ? _c : ""),
+                          c.updatedAt ? ` \u2022 ${intl.formatMessage(messages.updated_at, {
+                            date: intl.formatDate(new Date(c.updatedAt), {
+                              year: "numeric",
+                              month: "short",
+                              day: "2-digit",
+                              hour: "2-digit",
+                              minute: "2-digit"
+                            })
+                          })}` : ""
+                        ] })
+                      ] }),
+                      showItemStatus && c.status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_sight.Chip,
+                        {
+                          size: "sm",
+                          variant: "ghost",
+                          indicator: ind.indicator,
+                          indicatorColor: ind.indicatorColor,
+                          indicatorVariant: ind.indicatorVariant,
+                          status: c.status,
+                          children: c.status
+                        }
+                      )
+                    ] })
+                  },
+                  id
+                );
+              } })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 border rounded-md px-3 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sight.Label, { children: intl.formatMessage(messages.selected) }),
+        value ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_sight.Chip,
+          {
+            size: "sm",
+            variant: "bordered",
+            indicator: selInd.indicator,
+            indicatorColor: selInd.indicatorColor,
+            indicatorVariant: selInd.indicatorVariant,
+            status: showItemStatus ? value == null ? void 0 : value.status : void 0,
+            children: value.title
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages.no_control_selected) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sight.Button, { variant: "ghost", onClick: handleClear, disabled: !value, children: intl.formatMessage(messages.clear) }) })
+    ] })
+  ] });
+}
+
+// src/components/use-control.ts
+var import_react2 = require("react");
+function useControl({ attrs, resolver, editor }) {
+  var _a;
+  const isEdit = !!editor.isEditable;
+  const interactive = !!editor.isEditable && !!resolver;
+  const [isMissing, setIsMissing] = (0, import_react2.useState)(false);
+  const [isOutdated, setIsOutdated] = (0, import_react2.useState)(false);
+  const lastCheckedRef = (0, import_react2.useRef)(0);
+  const mapped = !!attrs.id;
+  const ind = getIndicatorProps(attrs.status, {
+    mapped,
+    enable: !!((_a = attrs == null ? void 0 : attrs.options) == null ? void 0 : _a.showStatus)
+  });
+  (0, import_react2.useEffect)(() => {
+    if (!isEdit || !(resolver == null ? void 0 : resolver.getControl) || !mapped || !attrs.id) return;
+    let cancelled = false;
+    const now = Date.now();
+    if (now - lastCheckedRef.current < 1e4) return;
+    (async () => {
+      try {
+        if (!attrs.id) return;
+        lastCheckedRef.current = now;
+        const latest = await resolver.getControl(attrs.id);
+        if (cancelled) return;
+        if (!latest) {
+          setIsMissing(true);
+          setIsOutdated(false);
+          return;
+        }
+        setIsMissing(false);
+        const localUpdated = attrs.updatedAt ? new Date(attrs.updatedAt).getTime() : 0;
+        const remoteUpdated = latest.updatedAt ? new Date(latest.updatedAt).getTime() : 0;
+        setIsOutdated(remoteUpdated > localUpdated);
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [isEdit, resolver, mapped, attrs.id, attrs.updatedAt]);
+  return { isEdit, interactive, ind, mapped, isMissing, isOutdated };
+}
+
+// src/components/control-block-view.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ControlBlockView = (props) => {
+  var _a, _b, _c, _d, _e, _f;
+  const { node, editor, updateAttributes, getPos } = props;
+  const attrs = node.attrs;
+  const { showStatus, variant } = attrs.options || {};
+  const resolver = props.extension.options.resolver;
+  const intl = (0, import_i18n.useSafeIntl)();
+  const { interactive, ind, mapped, isMissing, isOutdated } = useControl({
+    attrs,
+    resolver,
+    editor
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.NodeViewWrapper, { "data-id": (_a = attrs.id) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sight2.Card.Root, { variant, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sight2.Card.Header, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Card.Heading, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Heading, { level: "h3", contentEditable: false, children: (_b = attrs.title) != null ? _b : "Unmapped Control" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sight2.Card.Toolbar, { children: [
+        showStatus && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_sight2.Chip,
+          {
+            size: "sm",
+            "data-active": open,
+            contentEditable: false,
+            indicator: ind.indicator,
+            indicatorColor: ind.indicatorColor,
+            indicatorVariant: ind.indicatorVariant,
+            ...((_c = attrs.options) == null ? void 0 : _c.showStatus) && (attrs == null ? void 0 : attrs.status) && { status: attrs.status },
+            variant: "bordered",
+            children: (_d = attrs.title) != null ? _d : "Unmapped Control"
+          }
+        ),
+        interactive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          SettingsDialog,
+          {
+            resolver,
+            initialSelection: attrs.id ? {
+              id: attrs.id,
+              title: (_e = attrs.title) != null ? _e : "",
+              status: (_f = attrs.status) != null ? _f : null
+            } : null,
+            initialOptions: attrs.options,
+            onSave: async ({ control, options }) => {
+              var _a2, _b2, _c2, _d2;
+              updateAttributes({
+                id: (_a2 = control == null ? void 0 : control.id) != null ? _a2 : null,
+                title: (_b2 = control == null ? void 0 : control.title) != null ? _b2 : null,
+                status: (_c2 = control == null ? void 0 : control.status) != null ? _c2 : null,
+                updatedAt: control == null ? void 0 : control.updatedAt,
+                options
+              });
+              const pos = typeof getPos === "function" ? getPos() : null;
+              if (pos == null) return;
+              const rows = (_d2 = control == null ? void 0 : control.implementations) != null ? _d2 : [];
+              try {
+                editor.commands.setControlImplementationsAt(pos, rows);
+              } catch {
+                editor.commands.setControlImplementationsAt(pos, []);
+              }
+            },
+            onUnlink: () => {
+              updateAttributes({ id: null, title: null, status: null });
+              const pos = typeof getPos === "function" ? getPos() : null;
+              if (pos != null)
+                editor.commands.setControlImplementationsAt(pos, []);
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sight2.Card.Body, { children: [
+      interactive && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        mapped && isMissing && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_sight2.Callout,
+          {
+            print: false,
+            variant: "destructive",
+            contentEditable: false,
+            className: "mb-4",
+            children: intl.formatMessage(messages.missing_callout)
+          }
+        ),
+        !isMissing && isOutdated && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_sight2.Callout,
+          {
+            print: false,
+            variant: "warning",
+            contentEditable: false,
+            className: "mb-4",
+            children: intl.formatMessage(messages.outdated_callout)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.NodeViewContent, { className: "content is-editable", as: "div" }) })
+    ] })
+  ] }) });
+};
+var SettingsDialog = ({
+  initialSelection,
+  initialOptions,
+  resolver,
+  onSave
+}) => {
+  const intl = (0, import_i18n.useSafeIntl)();
+  const [isOpen, onOpenChange] = (0, import_react4.useState)(false);
+  const [selection, setSelection] = (0, import_react4.useState)(
+    initialSelection
+  );
+  const [options, setOptions] = (0, import_react4.useState)({
+    showStatus: false,
+    ...initialOptions
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sight2.Dialog, { size: "2xl", open: isOpen, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_sight2.Dialog.Trigger,
+      {
+        render: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.IconButton, { variant: "outline", color: "default", "aria-label": "Settings", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.SettingsIcon, {}) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sight2.Dialog.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sight2.Dialog.Header, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Dialog.Title, { children: (selection == null ? void 0 : selection.title) ? intl.formatMessage(messages.control_with_title, {
+          title: selection.title
+        }) : intl.formatMessage(messages.map_control) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Dialog.Description, { children: intl.formatMessage(messages.settings_dialog_description) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sight2.Dialog.Body, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          ControlPicker,
+          {
+            resolver,
+            value: selection,
+            onChange: (next) => {
+              setSelection(next);
+            },
+            debounceMs: 300,
+            timeoutMs: 5e3
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-6 flex flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Label, { children: intl.formatMessage(messages.display_options) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            import_sight2.Label,
+            {
+              variant: "secondary",
+              className: "flex items-center justify-between gap-3",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: intl.formatMessage(messages.header_status) }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_sight2.Switch,
+                  {
+                    "aria-label": intl.formatMessage(messages.header_status_aria),
+                    checked: !!options.showStatus,
+                    onCheckedChange: (checked) => setOptions((o) => ({ ...o, showStatus: checked }))
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Callout, { variant: "info", children: intl.formatMessage(messages.header_status_avv_tip) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            import_sight2.Label,
+            {
+              variant: "secondary",
+              className: "flex items-center justify-between gap-3",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: intl.formatMessage(messages.variant) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages.variant_hint) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  import_sight2.Select,
+                  {
+                    value: options.variant || "default",
+                    onValueChange: (value) => setOptions((o) => ({
+                      ...o,
+                      variant: value
+                    })),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Select.Trigger, { className: "w-[180px]", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Select.Value, { placeholder: "Select a variant" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sight2.Select.Content, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Select.Item, { value: "default", children: "Default" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Select.Item, { value: "muted", children: "Muted" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Select.Item, { value: "accent", children: "Accent" })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sight2.Dialog.Footer, { className: "sticky bottom-0 bg-background", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_sight2.Dialog.CloseTrigger,
+          {
+            render: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Button, { variant: "ghost", color: "default", children: intl.formatMessage(messages.cancel) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_sight2.Button,
+          {
+            color: "primary",
+            onClick: () => {
+              onSave({ control: selection, options });
+              onOpenChange(false);
+            },
+            disabled: JSON.stringify(selection) === JSON.stringify(initialSelection) && JSON.stringify(options) === JSON.stringify(initialOptions),
+            children: intl.formatMessage(messages.save_settings)
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ControlBlockView
+});