@kopexa/extension-controlref 1.0.0 → 13.0.0

package/dist/components/control-view.js

@@ -1,20 +1,10 @@
 "use client";
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __glob = (map) => (path) => {
-  var fn = map[path];
-  if (fn) return fn();
-  throw new Error("Module not found in bundle: " + path);
-};
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,72 +17,8 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/lang/de.json
-var require_de = __commonJS({
-  "src/lang/de.json"(exports2, module2) {
-    module2.exports = {
-      "editor.controlref.appearance": "Darstellung",
-      "editor.controlref.border": "Rahmen",
-      "editor.controlref.cancel": "Abbrechen",
-      "editor.controlref.change_control": "Kontrolle \xE4ndern",
-      "editor.controlref.control": "Kontrolle",
-      "editor.controlref.controls": "Kontrollen",
-      "editor.controlref.map_control": "Kontrolle zuordnen",
-      "editor.controlref.radius": "Eckenradius",
-      "editor.controlref.save_settings": "Einstellungen speichern",
-      "editor.controlref.search_controls": "Kontrollen suchen...",
-      "editor.controlref.settings": "Einstellungen",
-      "editor.controlref.settings_dialog_description": "Passe Darstellung und Details der Kontrollreferenz an.",
-      "editor.controlref.shadow": "Schatten",
-      "editor.controlref.show_description": "Beschreibung anzeigen",
-      "editor.controlref.show_implementations": "Umsetzungen anzeigen",
-      "editor.controlref.show_status": "Status anzeigen",
-      "editor.controlref.spacing": "Abst\xE4nde",
-      "editor.controlref.variant": "Variante",
-      "editor.controlref.variant_card": "Karte",
-      "editor.controlref.variant_chip": "Chip"
-    };
-  }
-});
-
-// src/lang/en.json
-var require_en = __commonJS({
-  "src/lang/en.json"(exports2, module2) {
-    module2.exports = {
-      "editor.controlref.appearance": "Appearance",
-      "editor.controlref.border": "Border",
-      "editor.controlref.cancel": "Cancel",
-      "editor.controlref.change_control": "Change Control",
-      "editor.controlref.control": "Control",
-      "editor.controlref.controls": "Controls",
-      "editor.controlref.map_control": "Map Control",
-      "editor.controlref.radius": "Radius",
-      "editor.controlref.save_settings": "Save Settings",
-      "editor.controlref.search_controls": "Search controls...",
-      "editor.controlref.settings": "Settings",
-      "editor.controlref.settings_dialog_description": "Customize the appearance and details of the control reference.",
-      "editor.controlref.shadow": "Shadow",
-      "editor.controlref.show_description": "Show Description",
-      "editor.controlref.show_implementations": "Show Implementations",
-      "editor.controlref.show_status": "Show Status",
-      "editor.controlref.spacing": "Spacing",
-      "editor.controlref.variant": "Variant",
-      "editor.controlref.variant_card": "Card",
-      "editor.controlref.variant_chip": "Chip"
-    };
-  }
-});
-
 // src/components/control-view.tsx
 var control_view_exports = {};
 __export(control_view_exports, {
@@ -100,79 +26,708 @@ __export(control_view_exports, {
 });
 module.exports = __toCommonJS(control_view_exports);
 var import_i18n = require("@kopexa/i18n");
-var import_sight = require("@kopexa/sight");
-var import_react = require("@tiptap/react");
-var import_react2 = require("react");
-
-// src/i18n.ts
-var import_de = __toESM(require_de());
-var import_en = __toESM(require_en());
+var import_sight2 = require("@kopexa/sight");
+var import_react3 = require("@tiptap/react");
+var import_react4 = require("react");
+var import_react_intl3 = require("react-intl");
 
-// import("./lang/**/*.json") in src/i18n.ts
-var globImport_lang_json = __glob({
-  "./lang/de.json": () => Promise.resolve().then(() => __toESM(require_de())),
-  "./lang/en.json": () => Promise.resolve().then(() => __toESM(require_en()))
+// 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/i18n.ts
-var loadLocale = async (locale) => {
-  try {
-    return (await globImport_lang_json(`./lang/${locale}.json`)).default;
-  } catch {
-    return null;
+// 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";
   }
-};
-async function getMessages(locale) {
-  if (locale === "en") return import_en.default;
-  if (locale.toLowerCase() === "en") return import_en.default;
-  if (locale.toLowerCase().startsWith("de")) return import_de.default;
-  const other = await loadLocale(locale);
-  return other ? { ...import_en.default, ...other } : import_en.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-view.tsx
+// 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-view.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var ControlView = (props) => {
   var _a, _b, _c, _d, _e, _f;
   const { node, editor } = props;
+  const intl = (0, import_react_intl3.useIntl)();
   const attrs = node.attrs;
-  const interactive = !!editor.isEditable;
-  const [open, setOpen] = (0, import_react2.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.NodeViewWrapper, { as: "span", "data-kpx-control": true, "data-id": (_a = attrs.id) != null ? _a : "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_sight.Chip,
+  const resolver = props.extension.options.resolver;
+  const { isEdit, interactive, ind, mapped, isMissing, isOutdated } = useControl({
+    attrs,
+    resolver,
+    editor
+  });
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react3.NodeViewWrapper, { as: "span", "data-kpx-control": true, "data-id": (_a = attrs.id) != null ? _a : "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_sight2.Chip,
       {
+        size: "sm",
         "data-active": open,
         contentEditable: false,
-        indicator: (_c = (_b = attrs == null ? void 0 : attrs.options) == null ? void 0 : _b.showStatus) != null ? _c : void 0,
-        ...((_d = attrs == null ? void 0 : attrs.options) == null ? void 0 : _d.showStatus) && {
-          status: (_e = attrs.status) != null ? _e : void 0
-        },
+        indicator: ind.indicator,
+        indicatorColor: ind.indicatorColor,
+        indicatorVariant: ind.indicatorVariant,
+        ...((_b = attrs.options) == null ? void 0 : _b.showStatus) && (attrs == null ? void 0 : attrs.status) && { status: attrs.status },
         variant: "bordered",
-        color: !attrs.id ? "warning" : "default",
-        size: "sm",
+        color: !attrs.id ? "warning" : isEdit && (isOutdated || isMissing) ? "destructive" : "default",
         onClick: () => {
           setOpen((o) => !o);
         },
         "aria-label": interactive ? "Map control" : "Control",
-        children: (_f = attrs.title) != null ? _f : "Unmapped Control"
+        tabIndex: interactive ? 0 : -1,
+        onKeyDown: (e) => {
+          if (!interactive) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen((o) => !o);
+          }
+        },
+        children: [
+          (_c = attrs.title) != null ? _c : "Unmapped Control",
+          isEdit && mapped && isOutdated && !isMissing && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Tooltip, { content: intl.formatMessage(messages.outdated_badge), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-1 inline-block h-2 w-2 rounded-full bg-warning" }) }),
+          mapped && isMissing && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Tooltip, { content: intl.formatMessage(messages.missing_badge), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-1 inline-block h-2 w-2 rounded-full bg-destructive" }) })
+        ]
       }
     ),
-    interactive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditControlDialog, { open, onOpenChange: setOpen })
+    interactive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      EditControlDialog,
+      {
+        open,
+        onOpenChange: setOpen,
+        resolver,
+        isMissing,
+        isOutdated,
+        initialSelection: attrs.id ? {
+          id: attrs.id,
+          title: (_d = attrs.title) != null ? _d : "",
+          status: (_e = attrs.status) != null ? _e : null
+        } : null,
+        initialOptions: (_f = attrs.options) != null ? _f : { showStatus: true },
+        onSave: (selection, options) => {
+          var _a2, _b2, _c2;
+          props.editor.commands.updateControl({
+            id: (_a2 = selection == null ? void 0 : selection.id) != null ? _a2 : null,
+            title: (_b2 = selection == null ? void 0 : selection.title) != null ? _b2 : null,
+            status: (_c2 = selection == null ? void 0 : selection.status) != null ? _c2 : null,
+            options: options != null ? options : null,
+            updatedAt: selection == null ? void 0 : selection.updatedAt
+          });
+        }
+      }
+    )
   ] });
 };
-var EditControlDialog = ({ open, onOpenChange }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sight.Dialog, { open, onOpenChange, size: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_i18n.I18nProvider, { loaderFn: getMessages, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sight.Dialog.Content, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sight.Dialog.Header, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sight.Dialog.Title, { children: "Control" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sight.Dialog.Description, { children: "Control Einstellungen bearbeiten" })
+var EditControlDialog = ({
+  open,
+  onOpenChange,
+  resolver,
+  initialSelection,
+  initialOptions,
+  onSave,
+  isMissing,
+  isOutdated
+}) => {
+  const intl = (0, import_i18n.useSafeIntl)();
+  const [selection, setSelection] = (0, import_react4.useState)(
+    initialSelection
+  );
+  const [options, setOptions] = (0, import_react4.useState)(initialOptions);
+  const isDirty = JSON.stringify(selection) !== JSON.stringify(initialSelection) || JSON.stringify(options) !== JSON.stringify(initialOptions);
+  if (!resolver) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Dialog, { open, onOpenChange, size: "2xl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sight2.Dialog.Content, { "aria-label": "Map Control", 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_runtime.jsx)(import_sight.Dialog.Body, { children: "Hier soll die m\xF6glichkeit bestehen ein neues Control auszuw\xE4hlen und eigentschaften vom Chip zi konfigurieren" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sight.Dialog.Footer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sight.Button, { variant: "ghost", color: "default", children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sight.Button, { color: "primary", children: "Save" })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "grid grid-cols-1 gap-6 pt-2", children: [
+      (selection == null ? void 0 : selection.id) && isMissing && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Callout, { variant: "destructive", children: intl.formatMessage(messages.missing_callout) }),
+      !isMissing && isOutdated && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sight2.Callout, { variant: "warning", children: intl.formatMessage(messages.outdated_callout) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        ControlPicker,
+        {
+          resolver,
+          value: selection,
+          onChange: (next) => setSelection(next),
+          debounceMs: 300,
+          timeoutMs: 5e3
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "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.show_status_indicator) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_sight2.Switch,
+                {
+                  "aria-label": "Show status indicator",
+                  checked: !!options.showStatus,
+                  onCheckedChange: (checked) => setOptions((o) => ({
+                    ...o,
+                    showStatus: checked
+                  }))
+                }
+              )
+            ]
+          }
+        )
+      ] }) })
+    ] }) }),
+    /* @__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.Button,
+        {
+          variant: "ghost",
+          color: "default",
+          onClick: () => onOpenChange(false),
+          children: intl.formatMessage(messages.cancel)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_sight2.Button,
+        {
+          color: "primary",
+          onClick: () => {
+            onSave(selection, options);
+            onOpenChange(false);
+          },
+          disabled: !isDirty,
+          children: intl.formatMessage(messages.save_settings)
+        }
+      )
     ] })
-  ] }) }) });
+  ] }) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {