@timeax/digital-service-engine 0.2.2 → 0.2.4

package/dist/react/index.cjs

@@ -12466,6 +12466,7 @@ function TabButton({
 
 // src/react/fallback-editor/VirtualServiceList.tsx
 var import_react17 = __toESM(require("react"), 1);
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function VirtualServiceList({
   items,
@@ -12508,7 +12509,7 @@ function VirtualServiceList({
           {
             type: "button",
             onClick: () => onToggle(item.id),
-            className: "absolute left-0 right-0 flex items-center justify-between border-b border-zinc-100 bg-white px-3 text-left hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:bg-zinc-800",
+            className: "absolute left-0 right-0 flex items-center justify-between border-b border-zinc-100 bg-white px-3 text-left transition hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:bg-zinc-800",
             style: {
               top: index * rowHeight,
               height: rowHeight
@@ -12528,12 +12529,13 @@ function VirtualServiceList({
                 ] })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "input",
+                "span",
                 {
-                  type: "checkbox",
-                  checked,
-                  readOnly: true,
-                  className: "h-4 w-4 rounded border-zinc-300"
+                  className: [
+                    "inline-flex h-4 w-4 items-center justify-center rounded border transition",
+                    checked ? "border-blue-600 bg-blue-600 text-white dark:border-blue-500 dark:bg-blue-500" : "border-zinc-300 bg-white text-transparent dark:border-zinc-700 dark:bg-zinc-800"
+                  ].join(" "),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.Check, { className: "h-3 w-3" })
                 }
               )
             ]
@@ -12683,6 +12685,7 @@ function FallbackEditorHeader({
 
 // src/react/fallback-editor/FallbackSettingsPanel.tsx
 var import_react19 = __toESM(require("react"), 1);
+var import_form_palette23 = require("@timeax/form-palette");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function FallbackSettingsPanel() {
   var _a, _b, _c;
@@ -12718,7 +12721,7 @@ function FallbackSettingsPanel() {
     kind: "lte_primary",
     pct: 5
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { className: "rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 overflow-y-auto", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { className: "overflow-y-auto rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-4 flex items-start justify-between gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Fallback settings" }),
@@ -12744,30 +12747,17 @@ function FallbackSettingsPanel() {
         {
           title: "Require constraint fit",
           hint: "Reject or warn when a candidate does not match effective tag constraints.",
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-            "button",
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_form_palette23.InputField,
             {
-              type: "button",
-              onClick: () => setDraft((prev) => ({
+              variant: "toggle",
+              value: Boolean(draft.requireConstraintFit),
+              onChange: ({ value }) => setDraft((prev) => ({
                 ...prev,
-                requireConstraintFit: !(prev == null ? void 0 : prev.requireConstraintFit)
+                requireConstraintFit: Boolean(value)
               })),
-              className: [
-                "inline-flex items-center gap-2 rounded-full border px-3 py-2 text-sm",
-                draft.requireConstraintFit ? "border-green-300 bg-green-50 text-green-700 dark:border-green-900/50 dark:bg-green-950/30 dark:text-green-300" : "border-zinc-300 bg-white text-zinc-600 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300"
-              ].join(" "),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: draft.requireConstraintFit ? "Enabled" : "Disabled" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  "span",
-                  {
-                    className: [
-                      "h-2.5 w-2.5 rounded-full",
-                      draft.requireConstraintFit ? "bg-green-500" : "bg-zinc-400"
-                    ].join(" ")
-                  }
-                )
-              ]
+              onText: "Enabled",
+              offText: "Disabled"
             }
           )
         }
@@ -12778,12 +12768,13 @@ function FallbackSettingsPanel() {
           title: "Rate policy",
           hint: "Controls how fallback service rates are compared against the primary service.",
           children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2 md:items-end", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-              "select",
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              import_form_palette23.InputField,
               {
+                variant: "select",
                 value: ratePolicy.kind,
-                onChange: (e) => {
-                  const kind = e.target.value;
+                onChange: ({ value }) => {
+                  const kind = value;
                   if (kind === "eq_primary") {
                     setRatePolicy({ kind: "eq_primary" });
                     return;
@@ -12808,30 +12799,39 @@ function FallbackSettingsPanel() {
                     pct: currentPct
                   });
                 },
-                className: "w-56 rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "eq_primary", children: "eq_primary" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "lte_primary", children: "lte_primary" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "within_pct", children: "within_pct" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "at_least_pct_lower", children: "at_least_pct_lower" })
-                ]
+                options: [
+                  { value: "eq_primary", label: "eq_primary" },
+                  {
+                    value: "lte_primary",
+                    label: "lte_primary"
+                  },
+                  { value: "within_pct", label: "within_pct" },
+                  {
+                    value: "at_least_pct_lower",
+                    label: "at_least_pct_lower"
+                  }
+                ],
+                clearable: false
               }
             ),
             ratePolicy.kind !== "eq_primary" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                "input",
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-32", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                import_form_palette23.InputField,
                 {
-                  type: "number",
-                  min: 0,
-                  step: "0.01",
+                  variant: "number",
                   value: ratePolicy.pct,
-                  onChange: (e) => {
-                    const pct = Number(e.target.value || 0);
-                    setRatePolicy({ ...ratePolicy, pct });
+                  onChange: ({ value }) => {
+                    const pct = typeof value === "number" ? value : Number(value != null ? value : 0);
+                    setRatePolicy({
+                      ...ratePolicy,
+                      pct
+                    });
                   },
-                  className: "w-32 rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
+                  min: 0,
+                  step: 0.01,
+                  fullWidth: true
                 }
-              ),
+              ) }),
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "%" })
             ] })
           ] })
@@ -12842,19 +12842,20 @@ function FallbackSettingsPanel() {
         {
           title: "Selection strategy",
           hint: "How valid fallback candidates are ordered in previews.",
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-            "select",
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_form_palette23.InputField,
             {
+              variant: "select",
               value: (_b = draft.selectionStrategy) != null ? _b : "priority",
-              onChange: (e) => setDraft((prev) => ({
+              onChange: ({ value }) => setDraft((prev) => ({
                 ...prev,
-                selectionStrategy: e.target.value
+                selectionStrategy: value
               })),
-              className: "w-48 rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "priority", children: "priority" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "cheapest", children: "cheapest" })
-              ]
+              options: [
+                { value: "priority", label: "priority" },
+                { value: "cheapest", label: "cheapest" }
+              ],
+              clearable: false
             }
           )
         }
@@ -12864,19 +12865,20 @@ function FallbackSettingsPanel() {
         {
           title: "Mode",
           hint: "Use strict for enforced filtering, dev for advisory feedback.",
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-            "select",
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_form_palette23.InputField,
             {
+              variant: "select",
               value: (_c = draft.mode) != null ? _c : "strict",
-              onChange: (e) => setDraft((prev) => ({
+              onChange: ({ value }) => setDraft((prev) => ({
                 ...prev,
-                mode: e.target.value
+                mode: value
               })),
-              className: "w-48 rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "strict", children: "strict" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "dev", children: "dev" })
-              ]
+              options: [
+                { value: "strict", label: "strict" },
+                { value: "dev", label: "dev" }
+              ],
+              clearable: false
             }
           )
         }
@@ -12902,6 +12904,8 @@ function SettingRow({
 
 // src/react/fallback-editor/FallbackServiceSidebar.tsx
 var import_react20 = require("react");
+var import_form_palette24 = require("@timeax/form-palette");
+var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function FallbackServiceSidebar() {
   const { activeServiceId, setActiveServiceId, get } = useFallbackEditor();
@@ -12923,15 +12927,19 @@ function FallbackServiceSidebar() {
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1 text-xs text-zinc-500 dark:text-zinc-400", children: "Services currently active in the builder/runtime context." })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex min-h-0 flex-1 flex-col p-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "input",
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rounded-xl border border-zinc-200 bg-zinc-50/80 p-2 dark:border-zinc-800 dark:bg-zinc-950/80", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_form_palette24.InputField,
         {
+          variant: "text",
           value: query,
-          onChange: (e) => setQuery(e.target.value),
+          onChange: ({ value }) => setQuery(String(value != null ? value : "")),
           placeholder: "Search primary service...",
-          className: "rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
+          leadingControl: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react2.Search, { className: "h-4 w-4 text-zinc-400" }),
+          joinControls: true,
+          extendBoxToControls: true,
+          fullWidth: true
         }
-      ),
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-3 flex-1 space-y-2 overflow-y-auto", children: filtered.map((service) => {
         var _a, _b;
         const active = String(service.id) === String(activeServiceId);
@@ -12943,7 +12951,7 @@ function FallbackServiceSidebar() {
             onClick: () => setActiveServiceId(service.id),
             className: [
               "w-full rounded-2xl border p-3 text-left transition",
-              active ? "border-blue-500 bg-blue-50 dark:bg-blue-950/30" : "border-zinc-200 bg-zinc-50 hover:border-zinc-300 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-zinc-700"
+              active ? "border-blue-500 bg-blue-50 dark:border-blue-500/70 dark:bg-blue-950/30" : "border-zinc-200 bg-zinc-50 hover:border-zinc-300 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-zinc-700 dark:hover:bg-zinc-900"
             ].join(" "),
             children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
               /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "min-w-0", children: [
@@ -13138,6 +13146,8 @@ function FallbackRegistrationsPanel() {
 
 // src/react/fallback-editor/FallbackAddCandidatesDialog.tsx
 var import_react25 = __toESM(require("react"), 1);
+var import_form_palette25 = require("@timeax/form-palette");
+var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function FallbackAddCandidatesDialog({
   open,
@@ -13198,33 +13208,36 @@ function FallbackAddCandidatesDialog({
     }
   }
   if (!open || !context) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex max-h-[85vh] w-full max-w-3xl flex-col rounded-2xl border border-zinc-200 bg-white shadow-2xl dark:border-zinc-800 dark:bg-zinc-900", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex max-h-[85vh] w-full max-w-3xl flex-col rounded-2xl border border-zinc-200 bg-white shadow-2xl dark:border-zinc-800 dark:bg-zinc-900", children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "border-b border-zinc-200 p-4 dark:border-zinc-800", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Add fallback services" }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: "Search and select one or more eligible fallback candidates." })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-3 p-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        "input",
+        import_form_palette25.InputField,
         {
+          variant: "text",
           value: query,
-          onChange: (e) => setQuery(e.target.value),
+          onChange: ({ value }) => setQuery(String(value != null ? value : "")),
           placeholder: "Search eligible services...",
-          className: "rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
+          leadingControl: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Search, { className: "h-4 w-4 text-zinc-400" }),
+          joinControls: true,
+          extendBoxToControls: true,
+          fullWidth: true
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_form_palette25.InputField,
+        {
+          variant: "toggle",
+          value: filterEligibleOnly,
+          onChange: ({ value }) => setFilterEligibleOnly(Boolean(value)),
+          label: "Filter eligible only",
+          onText: "On",
+          offText: "Off"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "inline-flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          "input",
-          {
-            type: "checkbox",
-            checked: filterEligibleOnly,
-            onChange: (e) => setFilterEligibleOnly(e.target.checked),
-            className: "h-4 w-4 rounded border-zinc-300"
-          }
-        ),
-        "Filter eligible only"
-      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         VirtualServiceList,
         {
@@ -13246,7 +13259,7 @@ function FallbackAddCandidatesDialog({
           {
             type: "button",
             onClick: onClose,
-            className: "rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200 dark:hover:bg-zinc-800",
+            className: "rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200 dark:hover:bg-zinc-800",
             children: "Cancel"
           }
         ),
@@ -13256,7 +13269,7 @@ function FallbackAddCandidatesDialog({
             type: "button",
             onClick: handleAdd,
             disabled: selected.size === 0 || submitting,
-            className: "rounded-xl bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
+            className: "rounded-xl bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
             children: submitting ? "Adding..." : "Add selected"
           }
         )
@@ -13267,6 +13280,7 @@ function FallbackAddCandidatesDialog({
 
 // src/react/fallback-editor/FallbackAddRegistrationDialog.tsx
 var import_react26 = __toESM(require("react"), 1);
+var import_form_palette26 = require("@timeax/form-palette");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function FallbackAddRegistrationDialog({
   open,
@@ -13417,7 +13431,7 @@ function FallbackAddRegistrationDialog({
   }
   if (!open) return null;
   const nodeScopeDisabled = nodeTargets.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "w-full max-w-lg rounded-2xl border border-zinc-200 bg-white shadow-2xl dark:border-zinc-800 dark:bg-zinc-900", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "w-full max-w-lg rounded-2xl border border-zinc-200 bg-white shadow-2xl dark:border-zinc-800 dark:bg-zinc-900", children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "border-b border-zinc-200 p-4 dark:border-zinc-800", children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Add registration" }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: "Choose the registration scope before selecting fallback candidates." })
@@ -13425,70 +13439,44 @@ function FallbackAddRegistrationDialog({
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-4 p-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Scope" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "grid gap-2", children: [
-          !hasGlobal && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex cursor-pointer items-start gap-3 rounded-xl border border-zinc-200 p-3 dark:border-zinc-800", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              "input",
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_form_palette26.InputField,
+          {
+            variant: "radio",
+            value: scope,
+            onChange: ({ value }) => setScope(value),
+            options: [
+              ...!hasGlobal ? [
+                {
+                  value: "global",
+                  label: "Global"
+                }
+              ] : [],
               {
-                type: "radio",
-                name: "scope",
-                checked: scope === "global",
-                onChange: () => setScope("global"),
-                className: "mt-1 h-4 w-4"
+                value: "node",
+                label: nodeScopeDisabled ? "Node (Unavailable)" : "Node"
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Global" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "mt-1 text-xs text-zinc-500 dark:text-zinc-400", children: "Use one global registration for this primary service." })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-            "label",
-            {
-              className: [
-                "flex items-start gap-3 rounded-xl border p-3",
-                nodeScopeDisabled ? "cursor-not-allowed border-zinc-200 opacity-60 dark:border-zinc-800" : "cursor-pointer border-zinc-200 dark:border-zinc-800"
-              ].join(" "),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  "input",
-                  {
-                    type: "radio",
-                    name: "scope",
-                    checked: scope === "node",
-                    onChange: () => setScope("node"),
-                    disabled: nodeScopeDisabled,
-                    className: "mt-1 h-4 w-4"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Node" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "mt-1 text-xs text-zinc-500 dark:text-zinc-400", children: mode === "snapshot" ? "Pick a node currently active in the order snapshot for this primary service." : mode === "props" ? "Pick a tag, field, or option from ServiceProps that maps to this primary service." : "Node-scoped registration is unavailable without OrderSnapshot or ServiceProps." })
-                ] })
-              ]
-            }
-          )
-        ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: scope === "global" ? "Use one global registration for this primary service." : mode === "snapshot" ? "Pick a node currently active in the order snapshot for this primary service." : mode === "props" ? "Pick a tag, field, or option from ServiceProps that maps to this primary service." : "Node-scoped registration is unavailable without OrderSnapshot or ServiceProps." })
       ] }),
       scope === "node" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Node id" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-          "select",
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_form_palette26.InputField,
           {
-            value: nodeId,
-            onChange: (e) => setNodeId(e.target.value),
-            className: "w-full rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: "", children: "Select node\u2026" }),
-              nodeTargets.map((node) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("option", { value: node.id, children: [
-                "[",
-                node.kind,
-                "] ",
-                node.label,
-                " \xB7 #",
-                String(node.serviceId)
-              ] }, node.id))
-            ]
+            variant: "select",
+            value: nodeId || void 0,
+            onChange: ({ value }) => setNodeId(String(value != null ? value : "")),
+            options: nodeTargets.map((node) => ({
+              value: node.id,
+              label: `[${node.kind}] ${node.label} \xB7 #${String(node.serviceId)}`
+            })),
+            placeholder: "Select node...",
+            searchable: true,
+            clearable: false,
+            fullWidth: true
           }
         ),
         nodeScopeDisabled ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: mode === "snapshot" ? "No active snapshot nodes were found for this primary service." : mode === "props" ? "No ServiceProps nodes were found for this primary service." : "Node-scoped registration requires either OrderSnapshot or ServiceProps." }) : null
@@ -13500,7 +13488,7 @@ function FallbackAddRegistrationDialog({
         {
           type: "button",
           onClick: onClose,
-          className: "rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200 dark:hover:bg-zinc-800",
+          className: "rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200 dark:hover:bg-zinc-800",
           children: "Cancel"
         }
       ),
@@ -13510,7 +13498,7 @@ function FallbackAddRegistrationDialog({
           type: "button",
           onClick: handleContinue,
           disabled: activeServiceId === void 0 || scope === "node" && !nodeId,
-          className: "rounded-xl bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
+          className: "rounded-xl bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
           children: "Continue"
         }
       )