@flanksource/clicky-ui 0.3.14 → 0.3.16

package/dist/components/ComboboxMenu.js

@@ -0,0 +1,160 @@
+import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { createPortal } from "react-dom";
+import { FilterPill } from "../data/FilterPill.js";
+import { Icon, LabelIcon } from "../data/Icon.js";
+import { cn } from "../lib/utils.js";
+import { UiCheck } from "../icons/components/UiCheck.js";
+function ComboboxMenu({
+  customEntry,
+  filtered,
+  floatingZ,
+  footer,
+  highlighted,
+  isSelected,
+  listId,
+  listRef,
+  loading,
+  menuPos,
+  modes,
+  multiple,
+  onHighlight,
+  onSelect,
+  onSetMode,
+  tristate
+}) {
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: listId,
+        ref: listRef,
+        role: "listbox",
+        "aria-multiselectable": multiple || void 0,
+        style: {
+          position: "fixed",
+          ...menuPos.top != null ? { top: menuPos.top } : { bottom: menuPos.bottom },
+          left: menuPos.left,
+          minWidth: menuPos.width,
+          maxWidth: menuPos.maxWidth,
+          maxHeight: menuPos.maxHeight,
+          zIndex: floatingZ
+        },
+        className: "w-max overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
+        children: [
+          loading && filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "Loading…" }),
+          !loading && filtered.length === 0 && !customEntry && /* @__PURE__ */ jsx("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "No results" }),
+          filtered.map((option, index) => {
+            var _a;
+            const selected = isSelected(option.value);
+            const mode = tristate ? modes[option.value] : void 0;
+            const showHeader = option.group != null && option.group !== ((_a = filtered[index - 1]) == null ? void 0 : _a.group);
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              showHeader && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "presentation",
+                  className: "select-none px-2 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+                  children: option.group
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: listId ? `${listId}-${index}` : void 0,
+                  role: "option",
+                  "aria-selected": tristate ? mode != null : selected,
+                  "aria-disabled": option.disabled,
+                  ...mode != null ? {
+                    "aria-label": `${option.label}, ${mode === "include" ? "included" : "excluded"}`
+                  } : {},
+                  ...option.title !== void 0 ? { title: option.title } : {},
+                  ...tristate ? { "data-filter-option": option.value } : {},
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    if (!tristate && !option.disabled) onSelect(option);
+                  },
+                  ...tristate ? {
+                    onClick: () => {
+                      if (!option.disabled) onSelect(option);
+                    }
+                  } : {},
+                  onMouseEnter: () => onHighlight(index),
+                  className: cn(
+                    "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
+                    index === highlighted && "bg-accent",
+                    selected && !tristate && "font-medium",
+                    option.disabled && "cursor-not-allowed opacity-50"
+                  ),
+                  children: tristate ? /* @__PURE__ */ jsx(
+                    FilterPill,
+                    {
+                      mode: mode ?? "neutral",
+                      togglePosition: "right",
+                      interactive: false,
+                      label: option.label,
+                      onModeChange: (next) => onSetMode(option.value, next),
+                      className: "w-full justify-between"
+                    }
+                  ) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: UiCheck,
+                        className: cn(
+                          "shrink-0 text-xs",
+                          selected ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      LabelIcon,
+                      {
+                        icon: option.icon,
+                        className: "text-sm text-muted-foreground"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label })
+                  ] })
+                }
+              )
+            ] }, option.value);
+          }),
+          customEntry && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              id: listId ? `${listId}-${filtered.length}` : void 0,
+              role: "option",
+              "aria-selected": false,
+              "data-filter-add-custom": customEntry.value,
+              title: customEntry.title,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => onSelect(customEntry),
+              onMouseEnter: () => onHighlight(filtered.length),
+              className: cn(
+                "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-primary",
+                highlighted === filtered.length && "bg-accent"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  LabelIcon,
+                  {
+                    icon: customEntry.icon,
+                    className: "text-sm text-muted-foreground"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: customEntry.label })
+              ]
+            }
+          ),
+          footer != null && /* @__PURE__ */ jsx("div", { className: "select-none px-2 py-1.5 text-[11px] text-muted-foreground", children: footer })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+export {
+  ComboboxMenu
+};
+//# sourceMappingURL=ComboboxMenu.js.map

package/dist/components/ComboboxMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxMenu.js","sources":["../../src/components/ComboboxMenu.tsx"],"sourcesContent":["import { Fragment, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { UiCheck } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport type {\n  ComboboxOption,\n  ComboboxTriStateMode,\n} from \"./combobox-types\";\nimport type { ComboboxMenuPosition } from \"./combobox-utils\";\n\nexport function ComboboxMenu({\n  customEntry,\n  filtered,\n  floatingZ,\n  footer,\n  highlighted,\n  isSelected,\n  listId,\n  listRef,\n  loading,\n  menuPos,\n  modes,\n  multiple,\n  onHighlight,\n  onSelect,\n  onSetMode,\n  tristate,\n}: {\n  customEntry: ComboboxOption | null;\n  filtered: ComboboxOption[];\n  floatingZ: number;\n  footer: ReactNode;\n  highlighted: number;\n  isSelected: (value: string) => boolean;\n  listId: string | undefined;\n  listRef: RefObject<HTMLDivElement>;\n  loading: boolean | undefined;\n  menuPos: ComboboxMenuPosition;\n  modes: Record<string, ComboboxTriStateMode>;\n  multiple: boolean;\n  onHighlight: (index: number) => void;\n  onSelect: (option: ComboboxOption) => void;\n  onSetMode: (value: string, mode: string) => void;\n  tristate: boolean;\n}) {\n  return createPortal(\n    <div\n      id={listId}\n      ref={listRef}\n      role=\"listbox\"\n      aria-multiselectable={multiple || undefined}\n      style={{\n        position: \"fixed\",\n        ...(menuPos.top != null\n          ? { top: menuPos.top }\n          : { bottom: menuPos.bottom }),\n        left: menuPos.left,\n        minWidth: menuPos.width,\n        maxWidth: menuPos.maxWidth,\n        maxHeight: menuPos.maxHeight,\n        zIndex: floatingZ,\n      }}\n      className=\"w-max overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\"\n    >\n      {loading && filtered.length === 0 && (\n        <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n          Loading…\n        </div>\n      )}\n      {!loading && filtered.length === 0 && !customEntry && (\n        <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n          No results\n        </div>\n      )}\n      {filtered.map((option, index) => {\n        const selected = isSelected(option.value);\n        const mode = tristate ? modes[option.value] : undefined;\n        const showHeader =\n          option.group != null &&\n          option.group !== filtered[index - 1]?.group;\n        return (\n          <Fragment key={option.value}>\n            {showHeader && (\n              <div\n                role=\"presentation\"\n                className=\"select-none px-2 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\"\n              >\n                {option.group}\n              </div>\n            )}\n            <div\n              id={listId ? `${listId}-${index}` : undefined}\n              role=\"option\"\n              aria-selected={tristate ? mode != null : selected}\n              aria-disabled={option.disabled}\n              {...(mode != null\n                ? {\n                    \"aria-label\": `${option.label}, ${\n                      mode === \"include\" ? \"included\" : \"excluded\"\n                    }`,\n                  }\n                : {})}\n              {...(option.title !== undefined ? { title: option.title } : {})}\n              {...(tristate\n                ? { \"data-filter-option\": option.value }\n                : {})}\n              onMouseDown={(event) => {\n                event.preventDefault();\n                if (!tristate && !option.disabled) onSelect(option);\n              }}\n              {...(tristate\n                ? {\n                    onClick: () => {\n                      if (!option.disabled) onSelect(option);\n                    },\n                  }\n                : {})}\n              onMouseEnter={() => onHighlight(index)}\n              className={cn(\n                \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm\",\n                index === highlighted && \"bg-accent\",\n                selected && !tristate && \"font-medium\",\n                option.disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              {tristate ? (\n                <FilterPill\n                  mode={mode ?? \"neutral\"}\n                  togglePosition=\"right\"\n                  interactive={false}\n                  label={option.label}\n                  onModeChange={(next) => onSetMode(option.value, next)}\n                  className=\"w-full justify-between\"\n                />\n              ) : (\n                <>\n                  <Icon\n                    icon={UiCheck}\n                    className={cn(\n                      \"shrink-0 text-xs\",\n                      selected ? \"opacity-100\" : \"opacity-0\",\n                    )}\n                  />\n                  <LabelIcon\n                    icon={option.icon}\n                    className=\"text-sm text-muted-foreground\"\n                  />\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                </>\n              )}\n            </div>\n          </Fragment>\n        );\n      })}\n      {customEntry && (\n        <div\n          id={listId ? `${listId}-${filtered.length}` : undefined}\n          role=\"option\"\n          aria-selected={false}\n          data-filter-add-custom={customEntry.value}\n          title={customEntry.title}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => onSelect(customEntry)}\n          onMouseEnter={() => onHighlight(filtered.length)}\n          className={cn(\n            \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-primary\",\n            highlighted === filtered.length && \"bg-accent\",\n          )}\n        >\n          <LabelIcon\n            icon={customEntry.icon}\n            className=\"text-sm text-muted-foreground\"\n          />\n          <span className=\"min-w-0 truncate\">{customEntry.label}</span>\n        </div>\n      )}\n      {footer != null && (\n        <div className=\"select-none px-2 py-1.5 text-[11px] text-muted-foreground\">\n          {footer}\n        </div>\n      )}\n    </div>,\n    document.body,\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}

package/dist/components/EndpointSelector.cjs

@@ -0,0 +1,407 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const Combobox = require("./Combobox.cjs");
+const endpointPort = require("./endpoint-port.cjs");
+const Field = require("./Field.cjs");
+const InputField = require("./InputField.cjs");
+const SecretKeySelector = require("./SecretKeySelector.cjs");
+const SegmentedControl = require("./SegmentedControl.cjs");
+const WorkloadPicker = require("./WorkloadPicker.cjs");
+const workloadPickerUtils = require("./workload-picker-utils.cjs");
+const UiWarningTriangle = require("../icons/components/UiWarningTriangle.cjs");
+const MODE_LABELS = {
+  url: "URL",
+  service: "Service",
+  "cluster-ip": "Cluster IP",
+  "api-proxy": "API proxy",
+  ingress: "Ingress",
+  "port-forward": "Port-forward"
+};
+const DEFAULT_MODE_KINDS = {
+  service: ["service"],
+  "cluster-ip": ["service"],
+  "api-proxy": ["service"],
+  ingress: ["ingress"],
+  "port-forward": ["service", "deployment"]
+};
+const WORKLOAD_FIELD = "max-w-full min-w-0 basis-56 shrink grow";
+const SCHEME_FIELD = "max-w-full min-w-0 basis-32 shrink grow-0";
+const PORT_FIELD = "max-w-full min-w-0 basis-36 shrink grow-0";
+const PATH_FIELD = "max-w-full min-w-0 basis-56 shrink grow";
+function isWorkloadValue(value) {
+  return value !== void 0 && value.mode !== "url";
+}
+function sameTarget(left, right) {
+  if (left.kind !== right.kind || left.namespace !== right.namespace)
+    return false;
+  if (left.kind === "ingress" && right.kind === "ingress") {
+    return left.name === right.name && left.host === right.host;
+  }
+  return left.name === right.name;
+}
+function targetKey(target, namespace, resource) {
+  var _a;
+  if (target.kind === "ingress") {
+    return workloadPickerUtils.workloadKey(target.namespace ?? namespace, target.kind, {
+      name: target.name,
+      hosts: [target.host ?? ((_a = resource == null ? void 0 : resource.hosts) == null ? void 0 : _a[0]) ?? target.name]
+    });
+  }
+  return workloadPickerUtils.workloadKey(target.namespace ?? namespace, target.kind, {
+    name: target.name
+  });
+}
+function findResource(resources, kind, selectedName) {
+  var _a;
+  return (_a = resources[kind]) == null ? void 0 : _a.find(
+    (resource) => {
+      var _a2;
+      return kind === "ingress" ? ((_a2 = resource.hosts) == null ? void 0 : _a2[0]) === selectedName : resource.name === selectedName;
+    }
+  );
+}
+function portOptions(resource) {
+  return ((resource == null ? void 0 : resource.ports) ?? []).map((port) => ({
+    value: String(port.number),
+    label: port.name ? `${port.name} (${port.number})` : String(port.number)
+  }));
+}
+function validPort(port) {
+  if (!/^\d+$/.test(port)) return false;
+  const number = Number(port);
+  return number >= 1 && number <= 65535;
+}
+function EndpointSelector({
+  value,
+  onChange,
+  namespace,
+  modes,
+  defaultMode,
+  loadWorkloads,
+  urlSelector,
+  modeKinds,
+  defaults,
+  preferredPorts = endpointPort.DEFAULT_PREFERRED_ENDPOINT_PORTS,
+  schemes,
+  allowCustomScheme = true,
+  allowCustomPort = false,
+  showScheme = false,
+  showPath = false,
+  showIngressPort = false,
+  className
+}) {
+  const fallbackMode = defaultMode ?? modes[0];
+  if (!fallbackMode || !modes.includes(fallbackMode)) {
+    throw new Error(
+      "EndpointSelector requires a default mode included in modes"
+    );
+  }
+  if (value && !modes.includes(value.mode)) {
+    throw new Error(`EndpointSelector value mode "${value.mode}" is disabled`);
+  }
+  const [activeMode, setActiveMode] = react.useState(
+    (value == null ? void 0 : value.mode) ?? fallbackMode
+  );
+  const [resources, setResources] = react.useState({});
+  const resourcesRef = react.useRef({});
+  const modesKey = modes.join(",");
+  react.useEffect(() => {
+    setActiveMode(
+      (current) => (value == null ? void 0 : value.mode) ?? (modes.includes(current) ? current : fallbackMode)
+    );
+  }, [value, fallbackMode, modesKey]);
+  const enabledKinds = react.useMemo(
+    () => activeMode === "url" ? [] : (modeKinds == null ? void 0 : modeKinds[activeMode]) ?? DEFAULT_MODE_KINDS[activeMode],
+    [activeMode, modeKinds]
+  );
+  const rememberingLoader = react.useCallback(
+    async (kinds) => {
+      const loaded = await loadWorkloads(kinds);
+      const filtered = { ...loaded };
+      if (kinds.includes("ingress")) {
+        filtered.ingress = (loaded.ingress ?? []).filter(
+          (resource) => {
+            var _a;
+            return (_a = resource.hosts) == null ? void 0 : _a[0];
+          }
+        );
+      }
+      resourcesRef.current = { ...resourcesRef.current, ...filtered };
+      setResources(resourcesRef.current);
+      return filtered;
+    },
+    [loadWorkloads]
+  );
+  const selectedResource = react.useMemo(() => {
+    var _a;
+    if (!isWorkloadValue(value)) return void 0;
+    const target = value.target;
+    return (_a = resources[target.kind]) == null ? void 0 : _a.find((resource) => {
+      var _a2;
+      if (target.kind === "ingress") {
+        return resource.name === target.name || ((_a2 = resource.hosts) == null ? void 0 : _a2[0]) === target.host;
+      }
+      return resource.name === target.name;
+    });
+  }, [resources, value]);
+  const options = react.useMemo(
+    () => portOptions(selectedResource),
+    [selectedResource]
+  );
+  const selectedPort = isWorkloadValue(value) ? value.port : void 0;
+  const selectedPortWarning = selectedPort && selectedResource && options.length > 0 && !options.some((option) => option.value === selectedPort) ? `Port ${selectedPort} is not exposed by workload "${selectedResource.name}"` : void 0;
+  react.useEffect(() => {
+    if (!isWorkloadValue(value) || value.port || !selectedResource) {
+      return;
+    }
+    const port = endpointPort.preferredEndpointPort(
+      selectedResource.ports,
+      preferredPorts
+    );
+    if (port) onChange({ ...value, port });
+  }, [
+    onChange,
+    preferredPorts,
+    selectedResource,
+    value
+  ]);
+  const modeOptions = react.useMemo(
+    () => modes.map((mode) => ({ id: mode, label: MODE_LABELS[mode] })),
+    [modes]
+  );
+  const selectMode = (nextMode) => {
+    setActiveMode(nextMode);
+    if (nextMode === "url") {
+      if ((value == null ? void 0 : value.mode) !== "url") onChange(void 0);
+      return;
+    }
+    if (isWorkloadValue(value) && ((modeKinds == null ? void 0 : modeKinds[nextMode]) ?? DEFAULT_MODE_KINDS[nextMode]).includes(
+      value.target.kind
+    )) {
+      onChange({ ...value, mode: nextMode });
+      return;
+    }
+    onChange(void 0);
+  };
+  const selectWorkload = (key) => {
+    var _a;
+    if (!key) {
+      onChange(void 0);
+      return;
+    }
+    const parsed = workloadPickerUtils.parseWorkloadKey(key);
+    const kind = parsed.kind;
+    if (!kind || !enabledKinds.includes(kind)) {
+      throw new Error(
+        `EndpointSelector received unsupported workload key "${key}"`
+      );
+    }
+    const resource = findResource(resourcesRef.current, kind, parsed.name);
+    if (!resource) {
+      throw new Error(`EndpointSelector workload "${key}" was not loaded`);
+    }
+    const selectedNamespace = parsed.namespace ?? namespace;
+    let target;
+    if (kind === "ingress") {
+      const host = (_a = resource.hosts) == null ? void 0 : _a[0];
+      if (!host) {
+        throw new Error(`Ingress "${resource.name}" has no routable host`);
+      }
+      target = {
+        kind,
+        name: resource.name,
+        host,
+        ...selectedNamespace ? { namespace: selectedNamespace } : {}
+      };
+    } else {
+      target = {
+        kind,
+        name: resource.name,
+        ...selectedNamespace ? { namespace: selectedNamespace } : {}
+      };
+    }
+    const previous = isWorkloadValue(value) ? value : void 0;
+    const exposed = portOptions(resource).map((option) => option.value);
+    const currentPort = (previous == null ? void 0 : previous.port) ?? "";
+    const port = currentPort && (previous && sameTarget(previous.target, target) || exposed.includes(currentPort)) ? currentPort : endpointPort.preferredEndpointPort(resource.ports, preferredPorts);
+    const next = {
+      mode: activeMode,
+      target
+    };
+    const scheme = (previous == null ? void 0 : previous.scheme) ?? (defaults == null ? void 0 : defaults.scheme);
+    const path = (previous == null ? void 0 : previous.path) ?? (defaults == null ? void 0 : defaults.path);
+    if (scheme) next.scheme = scheme;
+    if (port) next.port = port;
+    if (path) next.path = path;
+    onChange(next);
+  };
+  const patchValue = (field, fieldValue) => {
+    if (!isWorkloadValue(value)) return;
+    const next = { ...value };
+    if (fieldValue) {
+      next[field] = fieldValue;
+    } else {
+      delete next[field];
+    }
+    onChange(next);
+  };
+  const workloadValue = isWorkloadValue(value) && value.mode === activeMode ? targetKey(value.target, namespace, selectedResource) : "";
+  const showPort = activeMode !== "url" && (activeMode !== "ingress" || showIngressPort);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("space-y-density-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SegmentedControl.SegmentedControl,
+      {
+        value: activeMode,
+        options: modeOptions,
+        onChange: selectMode,
+        wrap: true,
+        "aria-label": "Endpoint access mode"
+      }
+    ),
+    activeMode === "url" ? (() => {
+      if (!urlSelector) {
+        throw new Error("EndpointSelector url mode requires urlSelector");
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        SecretKeySelector.SecretKeySelector,
+        {
+          ...urlSelector,
+          value: (value == null ? void 0 : value.mode) === "url" ? value.source : void 0,
+          onChange: (source) => onChange(source ? { mode: "url", source } : void 0)
+        }
+      );
+    })() : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-density-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex w-full max-w-full min-w-0 flex-nowrap items-end gap-density-2",
+        "data-slot": "endpoint-fields",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: WORKLOAD_FIELD,
+              "data-slot": "endpoint-workload-field",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Field.Field, { label: "Workload", children: /* @__PURE__ */ jsxRuntime.jsx(
+                WorkloadPicker.WorkloadPicker,
+                {
+                  value: workloadValue,
+                  onChange: selectWorkload,
+                  loadWorkloads: rememberingLoader,
+                  ...namespace ? { namespace } : {},
+                  kinds: enabledKinds,
+                  strict: true,
+                  allowCustomValue: false,
+                  placeholder: "Select workload…"
+                }
+              ) })
+            }
+          ),
+          showScheme && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: SCHEME_FIELD,
+              "data-slot": "endpoint-scheme-field",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Field.Field, { label: "Scheme", children: (schemes == null ? void 0 : schemes.length) && !allowCustomScheme ? /* @__PURE__ */ jsxRuntime.jsx(
+                SegmentedControl.SegmentedControl,
+                {
+                  value: isWorkloadValue(value) ? value.scheme ?? "" : "",
+                  options: schemes.map((scheme) => ({
+                    id: scheme,
+                    label: scheme
+                  })),
+                  onChange: (scheme) => patchValue("scheme", scheme),
+                  "aria-label": "Scheme"
+                }
+              ) : (schemes == null ? void 0 : schemes.length) ? /* @__PURE__ */ jsxRuntime.jsx(
+                Combobox.Combobox,
+                {
+                  options: schemes.map((scheme) => ({
+                    value: scheme,
+                    label: scheme
+                  })),
+                  value: isWorkloadValue(value) ? value.scheme ?? "" : "",
+                  onChange: (scheme) => patchValue("scheme", scheme),
+                  allowCustomValue: allowCustomScheme,
+                  ariaLabel: "Scheme"
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                InputField.InputField,
+                {
+                  value: isWorkloadValue(value) ? value.scheme ?? "" : "",
+                  onChange: (scheme) => patchValue("scheme", scheme),
+                  "aria-label": "Scheme"
+                }
+              ) })
+            }
+          ),
+          showPort && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: PORT_FIELD,
+              "data-slot": "endpoint-port-field",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Field.Field, { label: "Port", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Combobox.Combobox,
+                {
+                  options,
+                  value: isWorkloadValue(value) ? value.port ?? "" : "",
+                  onChange: (port) => patchValue("port", port),
+                  onNew: (port) => {
+                    if (!validPort(port)) return null;
+                    if (!options.length || !selectedResource) {
+                      return { value: port, label: port };
+                    }
+                    const warning = `Port ${port} is not exposed by workload "${selectedResource.name}"`;
+                    return {
+                      value: port,
+                      label: `Use ${port} — not exposed by ${selectedResource.name}`,
+                      selectedLabel: port,
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(
+                        UiWarningTriangle.UiWarningTriangle,
+                        {
+                          className: "size-4 shrink-0 text-amber-600",
+                          title: warning
+                        }
+                      ),
+                      title: warning
+                    };
+                  },
+                  onCreate: (option) => validPort(option.value) ? option.value : null,
+                  prefix: selectedPortWarning ? /* @__PURE__ */ jsxRuntime.jsx(
+                    UiWarningTriangle.UiWarningTriangle,
+                    {
+                      className: "size-4 shrink-0 text-amber-600",
+                      title: selectedPortWarning
+                    }
+                  ) : void 0,
+                  allowCustomValue: allowCustomPort,
+                  ariaLabel: "Port"
+                }
+              ) })
+            }
+          ),
+          showPath && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: PATH_FIELD,
+              "data-slot": "endpoint-path-field",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Field.Field, { label: "Path", children: /* @__PURE__ */ jsxRuntime.jsx(
+                InputField.InputField,
+                {
+                  value: isWorkloadValue(value) ? value.path ?? "" : "",
+                  onChange: (path) => patchValue("path", path),
+                  "aria-label": "Path",
+                  ...isWorkloadValue(value) && value.path ? { title: value.path } : {}
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+exports.EndpointSelector = EndpointSelector;
+//# sourceMappingURL=EndpointSelector.cjs.map

package/dist/components/EndpointSelector.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EndpointSelector.cjs","sources":["../../src/components/EndpointSelector.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { UiWarningTriangle } from \"../icons\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\nimport {\n  DEFAULT_PREFERRED_ENDPOINT_PORTS,\n  preferredEndpointPort,\n} from \"./endpoint-port\";\nimport { Field } from \"./Field\";\nimport { InputField } from \"./InputField\";\nimport { SecretKeySelector } from \"./SecretKeySelector\";\nimport { SegmentedControl, type SegmentedOption } from \"./SegmentedControl\";\nimport { WorkloadPicker } from \"./WorkloadPicker\";\nimport {\n  parseWorkloadKey,\n  workloadKey,\n  type WorkloadKind,\n  type WorkloadResource,\n} from \"./workload-picker-utils\";\nimport type {\n  EndpointMode,\n  EndpointResources,\n  EndpointSelectorProps,\n  EndpointSelectorValue,\n  EndpointTarget,\n  EndpointWorkloadValue,\n  EndpointWorkloadMode,\n} from \"./EndpointSelector.model\";\n\nconst MODE_LABELS: Record<EndpointMode, string> = {\n  url: \"URL\",\n  service: \"Service\",\n  \"cluster-ip\": \"Cluster IP\",\n  \"api-proxy\": \"API proxy\",\n  ingress: \"Ingress\",\n  \"port-forward\": \"Port-forward\",\n};\n\nconst DEFAULT_MODE_KINDS: Record<EndpointWorkloadMode, WorkloadKind[]> = {\n  service: [\"service\"],\n  \"cluster-ip\": [\"service\"],\n  \"api-proxy\": [\"service\"],\n  ingress: [\"ingress\"],\n  \"port-forward\": [\"service\", \"deployment\"],\n};\n\nconst WORKLOAD_FIELD =\n  \"max-w-full min-w-0 basis-56 shrink grow\";\nconst SCHEME_FIELD =\n  \"max-w-full min-w-0 basis-32 shrink grow-0\";\nconst PORT_FIELD =\n  \"max-w-full min-w-0 basis-36 shrink grow-0\";\nconst PATH_FIELD =\n  \"max-w-full min-w-0 basis-56 shrink grow\";\n\nfunction isWorkloadValue(\n  value: EndpointSelectorValue | undefined,\n): value is EndpointWorkloadValue {\n  return value !== undefined && value.mode !== \"url\";\n}\n\nfunction sameTarget(left: EndpointTarget, right: EndpointTarget) {\n  if (left.kind !== right.kind || left.namespace !== right.namespace)\n    return false;\n  if (left.kind === \"ingress\" && right.kind === \"ingress\") {\n    return left.name === right.name && left.host === right.host;\n  }\n  return left.name === right.name;\n}\n\nfunction targetKey(\n  target: EndpointTarget,\n  namespace: string | undefined,\n  resource: WorkloadResource | undefined,\n) {\n  if (target.kind === \"ingress\") {\n    return workloadKey(target.namespace ?? namespace, target.kind, {\n      name: target.name,\n      hosts: [target.host ?? resource?.hosts?.[0] ?? target.name],\n    });\n  }\n  return workloadKey(target.namespace ?? namespace, target.kind, {\n    name: target.name,\n  });\n}\n\nfunction findResource(\n  resources: EndpointResources,\n  kind: WorkloadKind,\n  selectedName: string,\n) {\n  return resources[kind]?.find((resource) =>\n    kind === \"ingress\"\n      ? resource.hosts?.[0] === selectedName\n      : resource.name === selectedName,\n  );\n}\n\nfunction portOptions(resource: WorkloadResource | undefined): ComboboxOption[] {\n  return (resource?.ports ?? []).map((port) => ({\n    value: String(port.number),\n    label: port.name ? `${port.name} (${port.number})` : String(port.number),\n  }));\n}\n\nfunction validPort(port: string) {\n  if (!/^\\d+$/.test(port)) return false;\n  const number = Number(port);\n  return number >= 1 && number <= 65535;\n}\n\nexport function EndpointSelector({\n  value,\n  onChange,\n  namespace,\n  modes,\n  defaultMode,\n  loadWorkloads,\n  urlSelector,\n  modeKinds,\n  defaults,\n  preferredPorts = DEFAULT_PREFERRED_ENDPOINT_PORTS,\n  schemes,\n  allowCustomScheme = true,\n  allowCustomPort = false,\n  showScheme = false,\n  showPath = false,\n  showIngressPort = false,\n  className,\n}: EndpointSelectorProps) {\n  const fallbackMode = defaultMode ?? modes[0];\n  if (!fallbackMode || !modes.includes(fallbackMode)) {\n    throw new Error(\n      \"EndpointSelector requires a default mode included in modes\",\n    );\n  }\n  if (value && !modes.includes(value.mode)) {\n    throw new Error(`EndpointSelector value mode \"${value.mode}\" is disabled`);\n  }\n\n  const [activeMode, setActiveMode] = useState<EndpointMode>(\n    value?.mode ?? fallbackMode,\n  );\n  const [resources, setResources] = useState<EndpointResources>({});\n  const resourcesRef = useRef<EndpointResources>({});\n  const modesKey = modes.join(\",\");\n\n  useEffect(() => {\n    setActiveMode(\n      (current) =>\n        value?.mode ?? (modes.includes(current) ? current : fallbackMode),\n    );\n  }, [value, fallbackMode, modesKey]);\n\n  const enabledKinds = useMemo(\n    () =>\n      activeMode === \"url\"\n        ? []\n        : (modeKinds?.[activeMode] ?? DEFAULT_MODE_KINDS[activeMode]),\n    [activeMode, modeKinds],\n  );\n\n  const rememberingLoader = useCallback(\n    async (kinds: WorkloadKind[]) => {\n      const loaded = await loadWorkloads(kinds);\n      const filtered = { ...loaded };\n      if (kinds.includes(\"ingress\")) {\n        filtered.ingress = (loaded.ingress ?? []).filter(\n          (resource) => resource.hosts?.[0],\n        );\n      }\n      resourcesRef.current = { ...resourcesRef.current, ...filtered };\n      setResources(resourcesRef.current);\n      return filtered;\n    },\n    [loadWorkloads],\n  );\n\n  const selectedResource = useMemo(() => {\n    if (!isWorkloadValue(value)) return undefined;\n    const target = value.target;\n    return resources[target.kind]?.find((resource) => {\n      if (target.kind === \"ingress\") {\n        return (\n          resource.name === target.name || resource.hosts?.[0] === target.host\n        );\n      }\n      return resource.name === target.name;\n    });\n  }, [resources, value]);\n\n  const options = useMemo(\n    () => portOptions(selectedResource),\n    [selectedResource],\n  );\n  const selectedPort = isWorkloadValue(value) ? value.port : undefined;\n  const selectedPortWarning =\n    selectedPort &&\n    selectedResource &&\n    options.length > 0 &&\n    !options.some((option) => option.value === selectedPort)\n      ? `Port ${selectedPort} is not exposed by workload \"${selectedResource.name}\"`\n      : undefined;\n  useEffect(() => {\n    if (\n      !isWorkloadValue(value) ||\n      value.port ||\n      !selectedResource\n    ) {\n      return;\n    }\n    const port = preferredEndpointPort(\n      selectedResource.ports,\n      preferredPorts,\n    );\n    if (port) onChange({ ...value, port });\n  }, [\n    onChange,\n    preferredPorts,\n    selectedResource,\n    value,\n  ]);\n\n  const modeOptions = useMemo<SegmentedOption<EndpointMode>[]>(\n    () => modes.map((mode) => ({ id: mode, label: MODE_LABELS[mode] })),\n    [modes],\n  );\n\n  const selectMode = (nextMode: EndpointMode) => {\n    setActiveMode(nextMode);\n    if (nextMode === \"url\") {\n      if (value?.mode !== \"url\") onChange(undefined);\n      return;\n    }\n    if (\n      isWorkloadValue(value) &&\n      (modeKinds?.[nextMode] ?? DEFAULT_MODE_KINDS[nextMode]).includes(\n        value.target.kind,\n      )\n    ) {\n      onChange({ ...value, mode: nextMode });\n      return;\n    }\n    onChange(undefined);\n  };\n\n  const selectWorkload = (key: string) => {\n    if (!key) {\n      onChange(undefined);\n      return;\n    }\n    const parsed = parseWorkloadKey(key);\n    const kind = parsed.kind;\n    if (!kind || !enabledKinds.includes(kind)) {\n      throw new Error(\n        `EndpointSelector received unsupported workload key \"${key}\"`,\n      );\n    }\n    const resource = findResource(resourcesRef.current, kind, parsed.name);\n    if (!resource) {\n      throw new Error(`EndpointSelector workload \"${key}\" was not loaded`);\n    }\n\n    const selectedNamespace = parsed.namespace ?? namespace;\n    let target: EndpointTarget;\n    if (kind === \"ingress\") {\n      const host = resource.hosts?.[0];\n      if (!host) {\n        throw new Error(`Ingress \"${resource.name}\" has no routable host`);\n      }\n      target = {\n        kind,\n        name: resource.name,\n        host,\n        ...(selectedNamespace ? { namespace: selectedNamespace } : {}),\n      };\n    } else {\n      target = {\n        kind,\n        name: resource.name,\n        ...(selectedNamespace ? { namespace: selectedNamespace } : {}),\n      };\n    }\n\n    const previous = isWorkloadValue(value) ? value : undefined;\n    const exposed = portOptions(resource).map((option) => option.value);\n    const currentPort = previous?.port ?? \"\";\n    const port = currentPort &&\n      (previous && sameTarget(previous.target, target) ||\n        exposed.includes(currentPort))\n      ? currentPort\n      : preferredEndpointPort(resource.ports, preferredPorts);\n    const next: EndpointWorkloadValue = {\n      mode: activeMode as EndpointWorkloadMode,\n      target,\n    };\n    const scheme = previous?.scheme ?? defaults?.scheme;\n    const path = previous?.path ?? defaults?.path;\n    if (scheme) next.scheme = scheme;\n    if (port) next.port = port;\n    if (path) next.path = path;\n    onChange(next);\n  };\n\n  const patchValue = (\n    field: \"scheme\" | \"port\" | \"path\",\n    fieldValue: string,\n  ) => {\n    if (!isWorkloadValue(value)) return;\n    const next = { ...value };\n    if (fieldValue) {\n      next[field] = fieldValue;\n    } else {\n      delete next[field];\n    }\n    onChange(next);\n  };\n\n  const workloadValue =\n    isWorkloadValue(value) && value.mode === activeMode\n      ? targetKey(value.target, namespace, selectedResource)\n      : \"\";\n  const showPort =\n    activeMode !== \"url\" && (activeMode !== \"ingress\" || showIngressPort);\n\n  return (\n    <div className={cn(\"space-y-density-2\", className)}>\n      <SegmentedControl\n        value={activeMode}\n        options={modeOptions}\n        onChange={selectMode}\n        wrap\n        aria-label=\"Endpoint access mode\"\n      />\n\n      {activeMode === \"url\" ? (\n        (() => {\n          if (!urlSelector) {\n            throw new Error(\"EndpointSelector url mode requires urlSelector\");\n          }\n          return (\n            <SecretKeySelector\n              {...urlSelector}\n              value={value?.mode === \"url\" ? value.source : undefined}\n              onChange={(source) =>\n                onChange(source ? { mode: \"url\", source } : undefined)\n              }\n            />\n          );\n        })()\n      ) : (\n        <div className=\"space-y-density-2\">\n          <div\n            className=\"flex w-full max-w-full min-w-0 flex-nowrap items-end gap-density-2\"\n            data-slot=\"endpoint-fields\"\n          >\n            <div\n              className={WORKLOAD_FIELD}\n              data-slot=\"endpoint-workload-field\"\n            >\n              <Field label=\"Workload\">\n                <WorkloadPicker\n                  value={workloadValue}\n                  onChange={selectWorkload}\n                  loadWorkloads={rememberingLoader}\n                  {...(namespace ? { namespace } : {})}\n                  kinds={enabledKinds}\n                  strict\n                  allowCustomValue={false}\n                  placeholder=\"Select workload…\"\n                />\n              </Field>\n            </div>\n            {showScheme && (\n              <div\n                className={SCHEME_FIELD}\n                data-slot=\"endpoint-scheme-field\"\n              >\n                <Field label=\"Scheme\">\n                  {schemes?.length && !allowCustomScheme ? (\n                    <SegmentedControl\n                      value={isWorkloadValue(value) ? (value.scheme ?? \"\") : \"\"}\n                      options={schemes.map((scheme) => ({\n                        id: scheme,\n                        label: scheme,\n                      }))}\n                      onChange={(scheme) => patchValue(\"scheme\", scheme)}\n                      aria-label=\"Scheme\"\n                    />\n                  ) : schemes?.length ? (\n                    <Combobox\n                      options={schemes.map((scheme) => ({\n                        value: scheme,\n                        label: scheme,\n                      }))}\n                      value={isWorkloadValue(value) ? (value.scheme ?? \"\") : \"\"}\n                      onChange={(scheme) => patchValue(\"scheme\", scheme)}\n                      allowCustomValue={allowCustomScheme}\n                      ariaLabel=\"Scheme\"\n                    />\n                  ) : (\n                    <InputField\n                      value={isWorkloadValue(value) ? (value.scheme ?? \"\") : \"\"}\n                      onChange={(scheme) => patchValue(\"scheme\", scheme)}\n                      aria-label=\"Scheme\"\n                    />\n                  )}\n                </Field>\n              </div>\n            )}\n            {showPort && (\n              <div\n                className={PORT_FIELD}\n                data-slot=\"endpoint-port-field\"\n              >\n                <Field label=\"Port\">\n                  <Combobox\n                    options={options}\n                    value={isWorkloadValue(value) ? (value.port ?? \"\") : \"\"}\n                    onChange={(port) => patchValue(\"port\", port)}\n                    onNew={(port) => {\n                      if (!validPort(port)) return null;\n                      if (!options.length || !selectedResource) {\n                        return { value: port, label: port };\n                      }\n                      const warning = `Port ${port} is not exposed by workload \"${selectedResource.name}\"`;\n                      return {\n                        value: port,\n                        label: `Use ${port} — not exposed by ${selectedResource.name}`,\n                        selectedLabel: port,\n                        icon: (\n                          <UiWarningTriangle\n                            className=\"size-4 shrink-0 text-amber-600\"\n                            title={warning}\n                          />\n                        ),\n                        title: warning,\n                      };\n                    }}\n                    onCreate={(option) =>\n                      validPort(option.value) ? option.value : null\n                    }\n                    prefix={\n                      selectedPortWarning ? (\n                        <UiWarningTriangle\n                          className=\"size-4 shrink-0 text-amber-600\"\n                          title={selectedPortWarning}\n                        />\n                      ) : undefined\n                    }\n                    allowCustomValue={allowCustomPort}\n                    ariaLabel=\"Port\"\n                  />\n                </Field>\n              </div>\n            )}\n            {showPath && (\n              <div\n                className={PATH_FIELD}\n                data-slot=\"endpoint-path-field\"\n              >\n                <Field label=\"Path\">\n                  <InputField\n                    value={isWorkloadValue(value) ? (value.path ?? \"\") : \"\"}\n                    onChange={(path) => patchValue(\"path\", path)}\n                    aria-label=\"Path\"\n                    {...(isWorkloadValue(value) && value.path\n                      ? { title: value.path }\n                      : {})}\n                  />\n                </Field>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["workloadKey","_a","DEFAULT_PREFERRED_ENDPOINT_PORTS","useState","useRef","useEffect","useMemo","useCallback","preferredEndpointPort","parseWorkloadKey","cn","jsx","SegmentedControl","SecretKeySelector","jsxs","Field","WorkloadPicker","Combobox","InputField","UiWarningTriangle"],"mappings":"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"}

package/dist/components/EndpointSelector.d.ts

@@ -0,0 +1,3 @@
+import { EndpointSelectorProps } from './EndpointSelector.model';
+export declare function EndpointSelector({ value, onChange, namespace, modes, defaultMode, loadWorkloads, urlSelector, modeKinds, defaults, preferredPorts, schemes, allowCustomScheme, allowCustomPort, showScheme, showPath, showIngressPort, className, }: EndpointSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EndpointSelector.d.ts.map

package/dist/components/EndpointSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EndpointSelector.d.ts","sourceRoot":"","sources":["../../src/components/EndpointSelector.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAGV,qBAAqB,EAKtB,MAAM,0BAA0B,CAAC;AAoFlC,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,WAAW,EACX,aAAa,EACb,WAAW,EACX,SAAS,EACT,QAAQ,EACR,cAAiD,EACjD,OAAO,EACP,iBAAwB,EACxB,eAAuB,EACvB,UAAkB,EAClB,QAAgB,EAChB,eAAuB,EACvB,SAAS,GACV,EAAE,qBAAqB,2CA6VvB"}