@flanksource/clicky-ui 0.2.14 → 0.2.16

package/dist/components/loading.js

@@ -0,0 +1,109 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/utils.js";
+const FIXED_DOT_SIZE = {
+  sm: "size-4",
+  md: "size-6",
+  lg: "size-10"
+};
+const RESPONSIVE_DOT_SIZE = "size-[clamp(1.25rem,18cqmin,2.5rem)]";
+const RESPONSIVE_LABEL_SIZE = "text-[clamp(0.72rem,4.5cqmin,0.9rem)]";
+const LoadingDots = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      className: cn("shrink-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "4", cy: "12", r: "3", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            id: "clickyLoadDotA",
+            fill: "freeze",
+            attributeName: "opacity",
+            begin: "0;clickyLoadDotC.end-0.25s",
+            dur: "0.75s",
+            values: "1;0.2"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3", opacity: "0.4", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            fill: "freeze",
+            attributeName: "opacity",
+            begin: "clickyLoadDotA.begin+0.15s",
+            dur: "0.75s",
+            values: "1;0.2"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("circle", { cx: "20", cy: "12", r: "3", opacity: "0.3", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            id: "clickyLoadDotC",
+            fill: "freeze",
+            attributeName: "opacity",
+            begin: "clickyLoadDotA.begin+0.3s",
+            dur: "0.75s",
+            values: "1;0.2"
+          }
+        ) })
+      ]
+    }
+  )
+);
+LoadingDots.displayName = "LoadingDots";
+const Loading = forwardRef(
+  ({ size = "responsive", variant = "inline", label, className, ...props }, ref) => {
+    const effectiveSize = variant === "inline" && size === "responsive" ? "sm" : size;
+    const isResponsive = effectiveSize === "responsive";
+    const dotClass = isResponsive ? RESPONSIVE_DOT_SIZE : FIXED_DOT_SIZE[effectiveSize];
+    if (variant === "centered") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          role: "status",
+          "aria-label": "Loading",
+          className: cn(
+            "flex h-full min-h-32 w-full flex-col items-center justify-center gap-3 text-muted-foreground",
+            "[container-type:size]",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(LoadingDots, { className: dotClass }),
+            label != null && /* @__PURE__ */ jsx("span", { className: cn(isResponsive ? RESPONSIVE_LABEL_SIZE : "text-sm"), children: label })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-label": "Loading",
+        className: cn(
+          "inline-flex items-center gap-2 text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(LoadingDots, { className: dotClass }),
+          label != null && /* @__PURE__ */ jsx("span", { className: "text-sm", children: label })
+        ]
+      }
+    );
+  }
+);
+Loading.displayName = "Loading";
+export {
+  Loading,
+  LoadingDots
+};
+//# sourceMappingURL=loading.js.map

package/dist/components/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","sources":["../../src/components/loading.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type SVGProps,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type LoadingSize = \"sm\" | \"md\" | \"lg\" | \"responsive\";\nexport type LoadingVariant = \"inline\" | \"centered\";\n\nexport interface LoadingProps extends HTMLAttributes<HTMLDivElement> {\n  /** Fixed size, or `responsive` (default) to scale with the container. */\n  size?: LoadingSize;\n  /** `inline` for a small in-flow loader, `centered` for a section/page loader. */\n  variant?: LoadingVariant;\n  /** Optional caption rendered beside (inline) or beneath (centered) the dots. */\n  label?: ReactNode;\n}\n\nconst FIXED_DOT_SIZE: Record<Exclude<LoadingSize, \"responsive\">, string> = {\n  sm: \"size-4\",\n  md: \"size-6\",\n  lg: \"size-10\",\n};\n\n// Scales with the SMALLER of the container's two dimensions (`cqmin`, enabled by\n// `container-type: size` on the centered wrapper). Using `cqmin` rather than the\n// width alone means a wide-but-short panel reads as small — only a genuinely\n// large area (a full-page load) grows the dots. Floors at 1.25rem (20px) in\n// tight panels, climbs to 2.5rem (40px) on big loads. Pure CSS — no\n// ResizeObserver, SSR-safe.\nconst RESPONSIVE_DOT_SIZE = \"size-[clamp(1.25rem,18cqmin,2.5rem)]\";\nconst RESPONSIVE_LABEL_SIZE = \"text-[clamp(0.72rem,4.5cqmin,0.9rem)]\";\n\n/**\n * Three bouncing dots. `fill=\"currentColor\"` so the dots inherit the surrounding\n * theme text color (works in light and dark). Size is driven entirely by the\n * className (width + height); the viewBox keeps the 1:1 aspect.\n */\nexport const LoadingDots = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      className={cn(\"shrink-0\", className)}\n      {...props}\n    >\n      <circle cx=\"4\" cy=\"12\" r=\"3\">\n        <animate\n          id=\"clickyLoadDotA\"\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"0;clickyLoadDotC.end-0.25s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n      <circle cx=\"12\" cy=\"12\" r=\"3\" opacity=\"0.4\">\n        <animate\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"clickyLoadDotA.begin+0.15s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n      <circle cx=\"20\" cy=\"12\" r=\"3\" opacity=\"0.3\">\n        <animate\n          id=\"clickyLoadDotC\"\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"clickyLoadDotA.begin+0.3s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n    </svg>\n  ),\n);\nLoadingDots.displayName = \"LoadingDots\";\n\n/**\n * Loading indicator built on the shared 3-dot animation.\n *\n * `centered` fills the space it is given (`h-full` within a `min-h-32` floor) and\n * establishes a size container (`container-type: size`) so the default\n * `responsive` size scales the dots to that space via `cqmin` — small inside a\n * narrow/short panel, large on a full-page route shell that stretches it tall.\n * The `inline` variant is not a container, so a `responsive` request there\n * renders at `sm`.\n */\nexport const Loading = forwardRef<HTMLDivElement, LoadingProps>(\n  ({ size = \"responsive\", variant = \"inline\", label, className, ...props }, ref) => {\n    const effectiveSize =\n      variant === \"inline\" && size === \"responsive\" ? \"sm\" : size;\n    const isResponsive = effectiveSize === \"responsive\";\n    const dotClass = isResponsive\n      ? RESPONSIVE_DOT_SIZE\n      : FIXED_DOT_SIZE[effectiveSize];\n\n    if (variant === \"centered\") {\n      return (\n        <div\n          ref={ref}\n          role=\"status\"\n          aria-label=\"Loading\"\n          className={cn(\n            \"flex h-full min-h-32 w-full flex-col items-center justify-center gap-3 text-muted-foreground\",\n            \"[container-type:size]\",\n            className,\n          )}\n          {...props}\n        >\n          <LoadingDots className={dotClass} />\n          {label != null && (\n            <span className={cn(isResponsive ? RESPONSIVE_LABEL_SIZE : \"text-sm\")}>\n              {label}\n            </span>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-label=\"Loading\"\n        className={cn(\n          \"inline-flex items-center gap-2 text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        <LoadingDots className={dotClass} />\n        {label != null && <span className=\"text-sm\">{label}</span>}\n      </div>\n    );\n  },\n);\nLoading.displayName = \"Loading\";\n"],"names":[],"mappings":";;;AAoBA,MAAM,iBAAqE;AAAA,EACzE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAQA,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAOvB,MAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,YAAY,SAAS;AAAA,MAClC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,YAAO,IAAG,KAAI,IAAG,MAAK,GAAE,KACvB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,GAEX;AAAA,QACA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,SAAQ,OACpC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,GAEX;AAAA,QACA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,SAAQ,OACpC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,EACT,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AACA,YAAY,cAAc;AAYnB,MAAM,UAAU;AAAA,EACrB,CAAC,EAAE,OAAO,cAAc,UAAU,UAAU,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChF,UAAM,gBACJ,YAAY,YAAY,SAAS,eAAe,OAAO;AACzD,UAAM,eAAe,kBAAkB;AACvC,UAAM,WAAW,eACb,sBACA,eAAe,aAAa;AAEhC,QAAI,YAAY,YAAY;AAC1B,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAA,oBAAC,aAAA,EAAY,WAAW,SAAA,CAAU;AAAA,YACjC,SAAS,QACR,oBAAC,QAAA,EAAK,WAAW,GAAG,eAAe,wBAAwB,SAAS,GACjE,UAAA,MAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAIR;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,aAAA,EAAY,WAAW,SAAA,CAAU;AAAA,UACjC,SAAS,QAAQ,oBAAC,QAAA,EAAK,WAAU,WAAW,UAAA,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzD;AACF;AACA,QAAQ,cAAc;"}

package/dist/components/use-form.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function useForm({ values, validate, onSubmit }) {
+  const [touched, setTouched] = react.useState({});
+  const [submitted, setSubmitted] = react.useState(false);
+  const errors = react.useMemo(() => validate(values), [validate, values]);
+  const isValid = react.useMemo(() => !Object.values(errors).some(Boolean), [errors]);
+  const fieldError = react.useCallback(
+    (key) => submitted || touched[key] ? errors[key] : void 0,
+    [submitted, touched, errors]
+  );
+  const markTouched = react.useCallback((key) => {
+    setTouched((prev) => prev[key] ? prev : { ...prev, [key]: true });
+  }, []);
+  const submit = react.useCallback(() => {
+    setSubmitted(true);
+    if (isValid) onSubmit == null ? void 0 : onSubmit(values);
+  }, [isValid, onSubmit, values]);
+  const reset = react.useCallback(() => {
+    setTouched({});
+    setSubmitted(false);
+  }, []);
+  return { errors, isValid, submitted, fieldError, markTouched, submit, reset };
+}
+exports.useForm = useForm;
+//# sourceMappingURL=use-form.cjs.map

package/dist/components/use-form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form.cjs","sources":["../../src/components/use-form.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\n\n// FieldErrors maps a field key to its current validation message (or undefined\n// when the field is valid). validate() returns the full map every call so a form\n// can show every problem at once, not just the first.\nexport type FieldErrors = Record<string, string | undefined>;\n\nexport interface UseFormOptions<V> {\n  /** The current form values (owned by the caller). */\n  values: V;\n  /** Pure validator returning all field errors for the given values. */\n  validate: (values: V) => FieldErrors;\n  /** Called by submit() only when the form is valid. */\n  onSubmit?: (values: V) => void;\n}\n\nexport interface UseFormResult {\n  /** Every field's error (independent of touched/submitted). */\n  errors: FieldErrors;\n  /** True when no field has an error. */\n  isValid: boolean;\n  /** True once submit() has been called (reveals all errors). */\n  submitted: boolean;\n  /**\n   * The error to display for a field: present only once the field has been\n   * touched (blurred) or submit() has run, so a pristine form isn't all red.\n   */\n  fieldError: (key: string) => string | undefined;\n  /** Mark a field touched — wire to a field's onBlur. */\n  markTouched: (key: string) => void;\n  /** Reveal all errors; run onSubmit only when valid. */\n  submit: () => void;\n  /** Clear touched + submitted state (e.g. when a dialog reopens). */\n  reset: () => void;\n}\n\n// useForm centralizes the touched/submitted/error bookkeeping a hand-built form\n// needs: it computes per-field errors from the caller's validate(), and gates\n// their display so each error surfaces on blur or on submit. The form values\n// stay owned by the caller (this hook does not store them), so it composes with\n// conditional fields and bespoke layouts.\nexport function useForm<V>({ values, validate, onSubmit }: UseFormOptions<V>): UseFormResult {\n  const [touched, setTouched] = useState<Record<string, boolean>>({});\n  const [submitted, setSubmitted] = useState(false);\n\n  const errors = useMemo(() => validate(values), [validate, values]);\n  const isValid = useMemo(() => !Object.values(errors).some(Boolean), [errors]);\n\n  const fieldError = useCallback(\n    (key: string) => (submitted || touched[key] ? errors[key] : undefined),\n    [submitted, touched, errors],\n  );\n\n  const markTouched = useCallback((key: string) => {\n    setTouched((prev) => (prev[key] ? prev : { ...prev, [key]: true }));\n  }, []);\n\n  const submit = useCallback(() => {\n    setSubmitted(true);\n    if (isValid) onSubmit?.(values);\n  }, [isValid, onSubmit, values]);\n\n  const reset = useCallback(() => {\n    setTouched({});\n    setSubmitted(false);\n  }, []);\n\n  return { errors, isValid, submitted, fieldError, markTouched, submit, reset };\n}\n"],"names":["useState","useMemo","useCallback"],"mappings":";;;AAyCO,SAAS,QAAW,EAAE,QAAQ,UAAU,YAA8C;AAC3F,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAkC,CAAA,CAAE;AAClE,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAS,KAAK;AAEhD,QAAM,SAASC,MAAAA,QAAQ,MAAM,SAAS,MAAM,GAAG,CAAC,UAAU,MAAM,CAAC;AACjE,QAAM,UAAUA,MAAAA,QAAQ,MAAM,CAAC,OAAO,OAAO,MAAM,EAAE,KAAK,OAAO,GAAG,CAAC,MAAM,CAAC;AAE5E,QAAM,aAAaC,MAAAA;AAAAA,IACjB,CAAC,QAAiB,aAAa,QAAQ,GAAG,IAAI,OAAO,GAAG,IAAI;AAAA,IAC5D,CAAC,WAAW,SAAS,MAAM;AAAA,EAAA;AAG7B,QAAM,cAAcA,kBAAY,CAAC,QAAgB;AAC/C,eAAW,CAAC,SAAU,KAAK,GAAG,IAAI,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAO;AAAA,EACpE,GAAG,CAAA,CAAE;AAEL,QAAM,SAASA,MAAAA,YAAY,MAAM;AAC/B,iBAAa,IAAI;AACjB,QAAI,8CAAoB;AAAA,EAC1B,GAAG,CAAC,SAAS,UAAU,MAAM,CAAC;AAE9B,QAAM,QAAQA,MAAAA,YAAY,MAAM;AAC9B,eAAW,CAAA,CAAE;AACb,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,QAAQ,SAAS,WAAW,YAAY,aAAa,QAAQ,MAAA;AACxE;;"}

package/dist/components/use-form.d.ts

@@ -0,0 +1,30 @@
+export type FieldErrors = Record<string, string | undefined>;
+export interface UseFormOptions<V> {
+    /** The current form values (owned by the caller). */
+    values: V;
+    /** Pure validator returning all field errors for the given values. */
+    validate: (values: V) => FieldErrors;
+    /** Called by submit() only when the form is valid. */
+    onSubmit?: (values: V) => void;
+}
+export interface UseFormResult {
+    /** Every field's error (independent of touched/submitted). */
+    errors: FieldErrors;
+    /** True when no field has an error. */
+    isValid: boolean;
+    /** True once submit() has been called (reveals all errors). */
+    submitted: boolean;
+    /**
+     * The error to display for a field: present only once the field has been
+     * touched (blurred) or submit() has run, so a pristine form isn't all red.
+     */
+    fieldError: (key: string) => string | undefined;
+    /** Mark a field touched — wire to a field's onBlur. */
+    markTouched: (key: string) => void;
+    /** Reveal all errors; run onSubmit only when valid. */
+    submit: () => void;
+    /** Clear touched + submitted state (e.g. when a dialog reopens). */
+    reset: () => void;
+}
+export declare function useForm<V>({ values, validate, onSubmit }: UseFormOptions<V>): UseFormResult;
+//# sourceMappingURL=use-form.d.ts.map

package/dist/components/use-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form.d.ts","sourceRoot":"","sources":["../../src/components/use-form.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAE7D,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,qDAAqD;IACrD,MAAM,EAAE,CAAC,CAAC;IACV,sEAAsE;IACtE,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,WAAW,CAAC;IACrC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,aAAa;IAC5B,8DAA8D;IAC9D,MAAM,EAAE,WAAW,CAAC;IACpB,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAChD,uDAAuD;IACvD,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uDAAuD;IACvD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,oEAAoE;IACpE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAOD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,aAAa,CA2B3F"}

package/dist/components/use-form.js

@@ -0,0 +1,27 @@
+import { useState, useMemo, useCallback } from "react";
+function useForm({ values, validate, onSubmit }) {
+  const [touched, setTouched] = useState({});
+  const [submitted, setSubmitted] = useState(false);
+  const errors = useMemo(() => validate(values), [validate, values]);
+  const isValid = useMemo(() => !Object.values(errors).some(Boolean), [errors]);
+  const fieldError = useCallback(
+    (key) => submitted || touched[key] ? errors[key] : void 0,
+    [submitted, touched, errors]
+  );
+  const markTouched = useCallback((key) => {
+    setTouched((prev) => prev[key] ? prev : { ...prev, [key]: true });
+  }, []);
+  const submit = useCallback(() => {
+    setSubmitted(true);
+    if (isValid) onSubmit == null ? void 0 : onSubmit(values);
+  }, [isValid, onSubmit, values]);
+  const reset = useCallback(() => {
+    setTouched({});
+    setSubmitted(false);
+  }, []);
+  return { errors, isValid, submitted, fieldError, markTouched, submit, reset };
+}
+export {
+  useForm
+};
+//# sourceMappingURL=use-form.js.map

package/dist/components/use-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form.js","sources":["../../src/components/use-form.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\n\n// FieldErrors maps a field key to its current validation message (or undefined\n// when the field is valid). validate() returns the full map every call so a form\n// can show every problem at once, not just the first.\nexport type FieldErrors = Record<string, string | undefined>;\n\nexport interface UseFormOptions<V> {\n  /** The current form values (owned by the caller). */\n  values: V;\n  /** Pure validator returning all field errors for the given values. */\n  validate: (values: V) => FieldErrors;\n  /** Called by submit() only when the form is valid. */\n  onSubmit?: (values: V) => void;\n}\n\nexport interface UseFormResult {\n  /** Every field's error (independent of touched/submitted). */\n  errors: FieldErrors;\n  /** True when no field has an error. */\n  isValid: boolean;\n  /** True once submit() has been called (reveals all errors). */\n  submitted: boolean;\n  /**\n   * The error to display for a field: present only once the field has been\n   * touched (blurred) or submit() has run, so a pristine form isn't all red.\n   */\n  fieldError: (key: string) => string | undefined;\n  /** Mark a field touched — wire to a field's onBlur. */\n  markTouched: (key: string) => void;\n  /** Reveal all errors; run onSubmit only when valid. */\n  submit: () => void;\n  /** Clear touched + submitted state (e.g. when a dialog reopens). */\n  reset: () => void;\n}\n\n// useForm centralizes the touched/submitted/error bookkeeping a hand-built form\n// needs: it computes per-field errors from the caller's validate(), and gates\n// their display so each error surfaces on blur or on submit. The form values\n// stay owned by the caller (this hook does not store them), so it composes with\n// conditional fields and bespoke layouts.\nexport function useForm<V>({ values, validate, onSubmit }: UseFormOptions<V>): UseFormResult {\n  const [touched, setTouched] = useState<Record<string, boolean>>({});\n  const [submitted, setSubmitted] = useState(false);\n\n  const errors = useMemo(() => validate(values), [validate, values]);\n  const isValid = useMemo(() => !Object.values(errors).some(Boolean), [errors]);\n\n  const fieldError = useCallback(\n    (key: string) => (submitted || touched[key] ? errors[key] : undefined),\n    [submitted, touched, errors],\n  );\n\n  const markTouched = useCallback((key: string) => {\n    setTouched((prev) => (prev[key] ? prev : { ...prev, [key]: true }));\n  }, []);\n\n  const submit = useCallback(() => {\n    setSubmitted(true);\n    if (isValid) onSubmit?.(values);\n  }, [isValid, onSubmit, values]);\n\n  const reset = useCallback(() => {\n    setTouched({});\n    setSubmitted(false);\n  }, []);\n\n  return { errors, isValid, submitted, fieldError, markTouched, submit, reset };\n}\n"],"names":[],"mappings":";AAyCO,SAAS,QAAW,EAAE,QAAQ,UAAU,YAA8C;AAC3F,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkC,CAAA,CAAE;AAClE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,SAAS,QAAQ,MAAM,SAAS,MAAM,GAAG,CAAC,UAAU,MAAM,CAAC;AACjE,QAAM,UAAU,QAAQ,MAAM,CAAC,OAAO,OAAO,MAAM,EAAE,KAAK,OAAO,GAAG,CAAC,MAAM,CAAC;AAE5E,QAAM,aAAa;AAAA,IACjB,CAAC,QAAiB,aAAa,QAAQ,GAAG,IAAI,OAAO,GAAG,IAAI;AAAA,IAC5D,CAAC,WAAW,SAAS,MAAM;AAAA,EAAA;AAG7B,QAAM,cAAc,YAAY,CAAC,QAAgB;AAC/C,eAAW,CAAC,SAAU,KAAK,GAAG,IAAI,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAO;AAAA,EACpE,GAAG,CAAA,CAAE;AAEL,QAAM,SAAS,YAAY,MAAM;AAC/B,iBAAa,IAAI;AACjB,QAAI,8CAAoB;AAAA,EAC1B,GAAG,CAAC,SAAS,UAAU,MAAM,CAAC;AAE9B,QAAM,QAAQ,YAAY,MAAM;AAC9B,eAAW,CAAA,CAAE;AACb,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,QAAQ,SAAS,WAAW,YAAY,aAAa,QAAQ,MAAA;AACxE;"}

package/dist/components/workload-picker-utils.cjs

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+require("react");
+const mi = require("@flanksource/icons/mi");
+const WORKLOAD_META = {
+  service: { label: "Service", Icon: mi.K8SService },
+  ingress: { label: "Ingress", Icon: mi.K8SIngress },
+  deployment: { label: "Deployment", Icon: mi.K8SDeployment },
+  statefulset: { label: "StatefulSet", Icon: mi.K8SStatefulset }
+};
+const ALL_WORKLOAD_KINDS = [
+  "service",
+  "ingress",
+  "deployment",
+  "statefulset"
+];
+function ingressHost(kind, r) {
+  var _a;
+  return kind === "ingress" ? (_a = r.hosts) == null ? void 0 : _a[0] : void 0;
+}
+function workloadName(kind, r) {
+  return ingressHost(kind, r) ?? r.name;
+}
+const KNOWN_KINDS = /* @__PURE__ */ new Set(["service", "ingress", "deployment", "statefulset"]);
+function workloadKey(namespace, kind, r) {
+  const name = workloadName(kind, r);
+  return namespace ? `${namespace}/${kind}/${name}` : `${kind}/${name}`;
+}
+function parseWorkloadKey(value) {
+  const parts = value.split("/");
+  const name = parts.at(-1);
+  const maybeKind = parts.at(-2);
+  if (name != null && maybeKind != null && KNOWN_KINDS.has(maybeKind)) {
+    const namespace = parts.slice(0, -2).join("/");
+    const parsed = { kind: maybeKind, name };
+    if (namespace) parsed.namespace = namespace;
+    return parsed;
+  }
+  return { name: value };
+}
+function loadedWorkloads(namespace, byKind, kinds) {
+  const keys = /* @__PURE__ */ new Set();
+  const names = /* @__PURE__ */ new Set();
+  for (const kind of kinds) {
+    for (const r of byKind[kind] ?? []) {
+      keys.add(workloadKey(namespace, kind, r));
+      names.add(workloadName(kind, r));
+    }
+  }
+  return { keys, names };
+}
+function kindForValue(kinds, value) {
+  const kind = value ? parseWorkloadKey(value).kind : void 0;
+  return kind ?? kinds[0] ?? "service";
+}
+function buildWorkloadOptions(namespace, byKind, kinds, value) {
+  const opts = [];
+  for (const kind of kinds) {
+    const meta = WORKLOAD_META[kind];
+    const Icon = meta.Icon;
+    for (const r of byKind[kind] ?? []) {
+      const host = ingressHost(kind, r);
+      opts.push({
+        value: workloadKey(namespace, kind, r),
+        // The label is the human name; an ingress pairs its host with the
+        // ingress name for context.
+        label: host ? `${host} (${r.name})` : r.name,
+        group: meta.label,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" })
+      });
+    }
+  }
+  if (value && !opts.some((o) => o.value === value)) {
+    const parsed = parseWorkloadKey(value);
+    const Icon = WORKLOAD_META[parsed.kind ?? kinds[0] ?? "service"].Icon;
+    return [{ value, label: parsed.name, icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }) }, ...opts];
+  }
+  return opts;
+}
+exports.ALL_WORKLOAD_KINDS = ALL_WORKLOAD_KINDS;
+exports.WORKLOAD_META = WORKLOAD_META;
+exports.buildWorkloadOptions = buildWorkloadOptions;
+exports.kindForValue = kindForValue;
+exports.loadedWorkloads = loadedWorkloads;
+exports.parseWorkloadKey = parseWorkloadKey;
+exports.workloadKey = workloadKey;
+//# sourceMappingURL=workload-picker-utils.cjs.map

package/dist/components/workload-picker-utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"workload-picker-utils.cjs","sources":["../../src/components/workload-picker-utils.tsx"],"sourcesContent":["import { type ComponentType } from \"react\";\nimport {\n  K8SService,\n  K8SIngress,\n  K8SDeployment,\n  K8SStatefulset,\n} from \"@flanksource/icons/mi\";\nimport type { ComboboxOption } from \"./Combobox\";\n\n// Key encoding and option-building for WorkloadPicker: the emitted value is a\n// `[namespace/]kind/name` composite (see workloadKey / parseWorkloadKey) so two\n// workloads of different kinds that share a name don't collide.\n\nexport type WorkloadKind = \"service\" | \"ingress\" | \"deployment\" | \"statefulset\";\n\n/** One workload returned by the loader. Ingresses may carry rule hostnames. */\nexport type WorkloadResource = { name: string; hosts?: string[] };\n\ntype KindIconProps = { className?: string; title?: string; \"aria-label\"?: string };\ntype KindMeta = { label: string; Icon: ComponentType<KindIconProps> };\n\n// WORKLOAD_META maps each kind to its group header label and icon, in display\n// order. The order of the keys drives the order options/groups appear in.\nexport const WORKLOAD_META: Record<WorkloadKind, KindMeta> = {\n  service: { label: \"Service\", Icon: K8SService },\n  ingress: { label: \"Ingress\", Icon: K8SIngress },\n  deployment: { label: \"Deployment\", Icon: K8SDeployment },\n  statefulset: { label: \"StatefulSet\", Icon: K8SStatefulset },\n};\n\nexport const ALL_WORKLOAD_KINDS: WorkloadKind[] = [\n  \"service\",\n  \"ingress\",\n  \"deployment\",\n  \"statefulset\",\n];\n\n// ingressHost is the first host an ingress routes, or undefined for non-ingress\n// kinds and host-less ingresses. An ingress's name-part is its host.\nfunction ingressHost(kind: WorkloadKind, r: WorkloadResource): string | undefined {\n  return kind === \"ingress\" ? r.hosts?.[0] : undefined;\n}\n\n// workloadName is the name-part of a resource's key: an ingress's first host\n// (the routable address callers want), else the resource's own name.\nfunction workloadName(kind: WorkloadKind, r: WorkloadResource): string {\n  return ingressHost(kind, r) ?? r.name;\n}\n\n// ParsedWorkloadKey is the structured form of a `[namespace/]kind/name` value.\nexport type ParsedWorkloadKey = { namespace?: string; kind?: WorkloadKind; name: string };\n\nconst KNOWN_KINDS = new Set<string>([\"service\", \"ingress\", \"deployment\", \"statefulset\"]);\n\n// workloadKey is the value a resource contributes (what onChange emits): a\n// `[namespace/]kind/name` composite so two workloads of different kinds sharing\n// a name don't collide. namespace is omitted when not supplied.\nexport function workloadKey(\n  namespace: string | undefined,\n  kind: WorkloadKind,\n  r: WorkloadResource,\n): string {\n  const name = workloadName(kind, r);\n  return namespace ? `${namespace}/${kind}/${name}` : `${kind}/${name}`;\n}\n\n// parseWorkloadKey splits a `[namespace/]kind/name` value back into its parts.\n// The trailing segment is always the name (a host may itself contain no slash);\n// the segment before it is the kind when it is a known workload kind, and any\n// remaining leading segment is the namespace. A bare value (no recognised\n// kind/name shape) is returned as just its name so freeform input survives.\nexport function parseWorkloadKey(value: string): ParsedWorkloadKey {\n  const parts = value.split(\"/\");\n  const name = parts.at(-1);\n  const maybeKind = parts.at(-2);\n  if (name != null && maybeKind != null && KNOWN_KINDS.has(maybeKind)) {\n    const namespace = parts.slice(0, -2).join(\"/\");\n    const parsed: ParsedWorkloadKey = { kind: maybeKind as WorkloadKind, name };\n    if (namespace) parsed.namespace = namespace;\n    return parsed;\n  }\n  return { name: value };\n}\n\n// loadedWorkloads collapses the loaded resources into the two membership sets a\n// strict picker validates a value against: `keys` are the full\n// `[namespace/]kind/name` keys the picker emits, `names` are the bare name-parts\n// (service name / ingress host) a consumer may persist instead. A value in\n// neither set names a workload that doesn't exist in the namespace.\nexport function loadedWorkloads(\n  namespace: string | undefined,\n  byKind: Partial<Record<WorkloadKind, WorkloadResource[]>>,\n  kinds: WorkloadKind[],\n): { keys: Set<string>; names: Set<string> } {\n  const keys = new Set<string>();\n  const names = new Set<string>();\n  for (const kind of kinds) {\n    for (const r of byKind[kind] ?? []) {\n      keys.add(workloadKey(namespace, kind, r));\n      names.add(workloadName(kind, r));\n    }\n  }\n  return { keys, names };\n}\n\n// kindForValue returns the kind encoded in the selected value, so the lead icon\n// can mirror it without consulting the loaded resources. Falls back to the first\n// offered kind when nothing is selected or the value carries no recognised kind.\nexport function kindForValue(kinds: WorkloadKind[], value: string): WorkloadKind {\n  const kind = value ? parseWorkloadKey(value).kind : undefined;\n  return kind ?? kinds[0] ?? \"service\";\n}\n\n// buildWorkloadOptions flattens the per-kind resources into grouped Combobox\n// options in kind order. Each option's value is its `[namespace/]kind/name` key\n// and its label the human name; a current value not present in any kind is\n// pinned first (labelled with just its name-part) so the selection stays visible.\nexport function buildWorkloadOptions(\n  namespace: string | undefined,\n  byKind: Partial<Record<WorkloadKind, WorkloadResource[]>>,\n  kinds: WorkloadKind[],\n  value: string,\n): ComboboxOption[] {\n  const opts: ComboboxOption[] = [];\n  for (const kind of kinds) {\n    const meta = WORKLOAD_META[kind];\n    const Icon = meta.Icon;\n    for (const r of byKind[kind] ?? []) {\n      const host = ingressHost(kind, r);\n      opts.push({\n        value: workloadKey(namespace, kind, r),\n        // The label is the human name; an ingress pairs its host with the\n        // ingress name for context.\n        label: host ? `${host} (${r.name})` : r.name,\n        group: meta.label,\n        icon: <Icon className=\"h-4 w-4\" />,\n      });\n    }\n  }\n  if (value && !opts.some((o) => o.value === value)) {\n    const parsed = parseWorkloadKey(value);\n    const Icon = WORKLOAD_META[parsed.kind ?? kinds[0] ?? \"service\"].Icon;\n    return [{ value, label: parsed.name, icon: <Icon className=\"h-4 w-4\" /> }, ...opts];\n  }\n  return opts;\n}\n"],"names":["K8SService","K8SIngress","K8SDeployment","K8SStatefulset","jsx"],"mappings":";;;;;AAuBO,MAAM,gBAAgD;AAAA,EAC3D,SAAS,EAAE,OAAO,WAAW,MAAMA,GAAAA,WAAA;AAAA,EACnC,SAAS,EAAE,OAAO,WAAW,MAAMC,GAAAA,WAAA;AAAA,EACnC,YAAY,EAAE,OAAO,cAAc,MAAMC,GAAAA,cAAA;AAAA,EACzC,aAAa,EAAE,OAAO,eAAe,MAAMC,GAAAA,eAAA;AAC7C;AAEO,MAAM,qBAAqC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIA,SAAS,YAAY,MAAoB,GAAyC;;AAChF,SAAO,SAAS,aAAY,OAAE,UAAF,mBAAU,KAAK;AAC7C;AAIA,SAAS,aAAa,MAAoB,GAA6B;AACrE,SAAO,YAAY,MAAM,CAAC,KAAK,EAAE;AACnC;AAKA,MAAM,kCAAkB,IAAY,CAAC,WAAW,WAAW,cAAc,aAAa,CAAC;AAKhF,SAAS,YACd,WACA,MACA,GACQ;AACR,QAAM,OAAO,aAAa,MAAM,CAAC;AACjC,SAAO,YAAY,GAAG,SAAS,IAAI,IAAI,IAAI,IAAI,KAAK,GAAG,IAAI,IAAI,IAAI;AACrE;AAOO,SAAS,iBAAiB,OAAkC;AACjE,QAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,QAAM,OAAO,MAAM,GAAG,EAAE;AACxB,QAAM,YAAY,MAAM,GAAG,EAAE;AAC7B,MAAI,QAAQ,QAAQ,aAAa,QAAQ,YAAY,IAAI,SAAS,GAAG;AACnE,UAAM,YAAY,MAAM,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG;AAC7C,UAAM,SAA4B,EAAE,MAAM,WAA2B,KAAA;AACrE,QAAI,kBAAkB,YAAY;AAClC,WAAO;AAAA,EACT;AACA,SAAO,EAAE,MAAM,MAAA;AACjB;AAOO,SAAS,gBACd,WACA,QACA,OAC2C;AAC3C,QAAM,2BAAW,IAAA;AACjB,QAAM,4BAAY,IAAA;AAClB,aAAW,QAAQ,OAAO;AACxB,eAAW,KAAK,OAAO,IAAI,KAAK,CAAA,GAAI;AAClC,WAAK,IAAI,YAAY,WAAW,MAAM,CAAC,CAAC;AACxC,YAAM,IAAI,aAAa,MAAM,CAAC,CAAC;AAAA,IACjC;AAAA,EACF;AACA,SAAO,EAAE,MAAM,MAAA;AACjB;AAKO,SAAS,aAAa,OAAuB,OAA6B;AAC/E,QAAM,OAAO,QAAQ,iBAAiB,KAAK,EAAE,OAAO;AACpD,SAAO,QAAQ,MAAM,CAAC,KAAK;AAC7B;AAMO,SAAS,qBACd,WACA,QACA,OACA,OACkB;AAClB,QAAM,OAAyB,CAAA;AAC/B,aAAW,QAAQ,OAAO;AACxB,UAAM,OAAO,cAAc,IAAI;AAC/B,UAAM,OAAO,KAAK;AAClB,eAAW,KAAK,OAAO,IAAI,KAAK,CAAA,GAAI;AAClC,YAAM,OAAO,YAAY,MAAM,CAAC;AAChC,WAAK,KAAK;AAAA,QACR,OAAO,YAAY,WAAW,MAAM,CAAC;AAAA;AAAA;AAAA,QAGrC,OAAO,OAAO,GAAG,IAAI,KAAK,EAAE,IAAI,MAAM,EAAE;AAAA,QACxC,OAAO,KAAK;AAAA,QACZ,MAAMC,2BAAAA,IAAC,MAAA,EAAK,WAAU,UAAA,CAAU;AAAA,MAAA,CACjC;AAAA,IACH;AAAA,EACF;AACA,MAAI,SAAS,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK,GAAG;AACjD,UAAM,SAAS,iBAAiB,KAAK;AACrC,UAAM,OAAO,cAAc,OAAO,QAAQ,MAAM,CAAC,KAAK,SAAS,EAAE;AACjE,WAAO,CAAC,EAAE,OAAO,OAAO,OAAO,MAAM,MAAMA,2BAAAA,IAAC,MAAA,EAAK,WAAU,UAAA,CAAU,EAAA,GAAM,GAAG,IAAI;AAAA,EACpF;AACA,SAAO;AACT;;;;;;;;"}

package/dist/components/workload-picker-utils.d.ts

@@ -0,0 +1,34 @@
+import { ComponentType } from 'react';
+import { ComboboxOption } from './Combobox';
+export type WorkloadKind = "service" | "ingress" | "deployment" | "statefulset";
+/** One workload returned by the loader. Ingresses may carry rule hostnames. */
+export type WorkloadResource = {
+    name: string;
+    hosts?: string[];
+};
+type KindIconProps = {
+    className?: string;
+    title?: string;
+    "aria-label"?: string;
+};
+type KindMeta = {
+    label: string;
+    Icon: ComponentType<KindIconProps>;
+};
+export declare const WORKLOAD_META: Record<WorkloadKind, KindMeta>;
+export declare const ALL_WORKLOAD_KINDS: WorkloadKind[];
+export type ParsedWorkloadKey = {
+    namespace?: string;
+    kind?: WorkloadKind;
+    name: string;
+};
+export declare function workloadKey(namespace: string | undefined, kind: WorkloadKind, r: WorkloadResource): string;
+export declare function parseWorkloadKey(value: string): ParsedWorkloadKey;
+export declare function loadedWorkloads(namespace: string | undefined, byKind: Partial<Record<WorkloadKind, WorkloadResource[]>>, kinds: WorkloadKind[]): {
+    keys: Set<string>;
+    names: Set<string>;
+};
+export declare function kindForValue(kinds: WorkloadKind[], value: string): WorkloadKind;
+export declare function buildWorkloadOptions(namespace: string | undefined, byKind: Partial<Record<WorkloadKind, WorkloadResource[]>>, kinds: WorkloadKind[], value: string): ComboboxOption[];
+export {};
+//# sourceMappingURL=workload-picker-utils.d.ts.map

package/dist/components/workload-picker-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workload-picker-utils.d.ts","sourceRoot":"","sources":["../../src/components/workload-picker-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAO3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAMjD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;AAEhF,+EAA+E;AAC/E,MAAM,MAAM,gBAAgB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAElE,KAAK,aAAa,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACnF,KAAK,QAAQ,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,CAAA;CAAE,CAAC;AAItE,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAKxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,YAAY,EAK5C,CAAC;AAeF,MAAM,MAAM,iBAAiB,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,YAAY,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAO1F,wBAAgB,WAAW,CACzB,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,IAAI,EAAE,YAAY,EAClB,CAAC,EAAE,gBAAgB,GAClB,MAAM,CAGR;AAOD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,iBAAiB,CAWjE;AAOD,wBAAgB,eAAe,CAC7B,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,gBAAgB,EAAE,CAAC,CAAC,EACzD,KAAK,EAAE,YAAY,EAAE,GACpB;IAAE,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAAC,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAAE,CAU3C;AAKD,wBAAgB,YAAY,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,YAAY,CAG/E;AAMD,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,gBAAgB,EAAE,CAAC,CAAC,EACzD,KAAK,EAAE,YAAY,EAAE,EACrB,KAAK,EAAE,MAAM,GACZ,cAAc,EAAE,CAuBlB"}

package/dist/components/workload-picker-utils.js

@@ -0,0 +1,88 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { K8SStatefulset, K8SDeployment, K8SIngress, K8SService } from "@flanksource/icons/mi";
+const WORKLOAD_META = {
+  service: { label: "Service", Icon: K8SService },
+  ingress: { label: "Ingress", Icon: K8SIngress },
+  deployment: { label: "Deployment", Icon: K8SDeployment },
+  statefulset: { label: "StatefulSet", Icon: K8SStatefulset }
+};
+const ALL_WORKLOAD_KINDS = [
+  "service",
+  "ingress",
+  "deployment",
+  "statefulset"
+];
+function ingressHost(kind, r) {
+  var _a;
+  return kind === "ingress" ? (_a = r.hosts) == null ? void 0 : _a[0] : void 0;
+}
+function workloadName(kind, r) {
+  return ingressHost(kind, r) ?? r.name;
+}
+const KNOWN_KINDS = /* @__PURE__ */ new Set(["service", "ingress", "deployment", "statefulset"]);
+function workloadKey(namespace, kind, r) {
+  const name = workloadName(kind, r);
+  return namespace ? `${namespace}/${kind}/${name}` : `${kind}/${name}`;
+}
+function parseWorkloadKey(value) {
+  const parts = value.split("/");
+  const name = parts.at(-1);
+  const maybeKind = parts.at(-2);
+  if (name != null && maybeKind != null && KNOWN_KINDS.has(maybeKind)) {
+    const namespace = parts.slice(0, -2).join("/");
+    const parsed = { kind: maybeKind, name };
+    if (namespace) parsed.namespace = namespace;
+    return parsed;
+  }
+  return { name: value };
+}
+function loadedWorkloads(namespace, byKind, kinds) {
+  const keys = /* @__PURE__ */ new Set();
+  const names = /* @__PURE__ */ new Set();
+  for (const kind of kinds) {
+    for (const r of byKind[kind] ?? []) {
+      keys.add(workloadKey(namespace, kind, r));
+      names.add(workloadName(kind, r));
+    }
+  }
+  return { keys, names };
+}
+function kindForValue(kinds, value) {
+  const kind = value ? parseWorkloadKey(value).kind : void 0;
+  return kind ?? kinds[0] ?? "service";
+}
+function buildWorkloadOptions(namespace, byKind, kinds, value) {
+  const opts = [];
+  for (const kind of kinds) {
+    const meta = WORKLOAD_META[kind];
+    const Icon = meta.Icon;
+    for (const r of byKind[kind] ?? []) {
+      const host = ingressHost(kind, r);
+      opts.push({
+        value: workloadKey(namespace, kind, r),
+        // The label is the human name; an ingress pairs its host with the
+        // ingress name for context.
+        label: host ? `${host} (${r.name})` : r.name,
+        group: meta.label,
+        icon: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+      });
+    }
+  }
+  if (value && !opts.some((o) => o.value === value)) {
+    const parsed = parseWorkloadKey(value);
+    const Icon = WORKLOAD_META[parsed.kind ?? kinds[0] ?? "service"].Icon;
+    return [{ value, label: parsed.name, icon: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }) }, ...opts];
+  }
+  return opts;
+}
+export {
+  ALL_WORKLOAD_KINDS,
+  WORKLOAD_META,
+  buildWorkloadOptions,
+  kindForValue,
+  loadedWorkloads,
+  parseWorkloadKey,
+  workloadKey
+};
+//# sourceMappingURL=workload-picker-utils.js.map

package/dist/components/workload-picker-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workload-picker-utils.js","sources":["../../src/components/workload-picker-utils.tsx"],"sourcesContent":["import { type ComponentType } from \"react\";\nimport {\n  K8SService,\n  K8SIngress,\n  K8SDeployment,\n  K8SStatefulset,\n} from \"@flanksource/icons/mi\";\nimport type { ComboboxOption } from \"./Combobox\";\n\n// Key encoding and option-building for WorkloadPicker: the emitted value is a\n// `[namespace/]kind/name` composite (see workloadKey / parseWorkloadKey) so two\n// workloads of different kinds that share a name don't collide.\n\nexport type WorkloadKind = \"service\" | \"ingress\" | \"deployment\" | \"statefulset\";\n\n/** One workload returned by the loader. Ingresses may carry rule hostnames. */\nexport type WorkloadResource = { name: string; hosts?: string[] };\n\ntype KindIconProps = { className?: string; title?: string; \"aria-label\"?: string };\ntype KindMeta = { label: string; Icon: ComponentType<KindIconProps> };\n\n// WORKLOAD_META maps each kind to its group header label and icon, in display\n// order. The order of the keys drives the order options/groups appear in.\nexport const WORKLOAD_META: Record<WorkloadKind, KindMeta> = {\n  service: { label: \"Service\", Icon: K8SService },\n  ingress: { label: \"Ingress\", Icon: K8SIngress },\n  deployment: { label: \"Deployment\", Icon: K8SDeployment },\n  statefulset: { label: \"StatefulSet\", Icon: K8SStatefulset },\n};\n\nexport const ALL_WORKLOAD_KINDS: WorkloadKind[] = [\n  \"service\",\n  \"ingress\",\n  \"deployment\",\n  \"statefulset\",\n];\n\n// ingressHost is the first host an ingress routes, or undefined for non-ingress\n// kinds and host-less ingresses. An ingress's name-part is its host.\nfunction ingressHost(kind: WorkloadKind, r: WorkloadResource): string | undefined {\n  return kind === \"ingress\" ? r.hosts?.[0] : undefined;\n}\n\n// workloadName is the name-part of a resource's key: an ingress's first host\n// (the routable address callers want), else the resource's own name.\nfunction workloadName(kind: WorkloadKind, r: WorkloadResource): string {\n  return ingressHost(kind, r) ?? r.name;\n}\n\n// ParsedWorkloadKey is the structured form of a `[namespace/]kind/name` value.\nexport type ParsedWorkloadKey = { namespace?: string; kind?: WorkloadKind; name: string };\n\nconst KNOWN_KINDS = new Set<string>([\"service\", \"ingress\", \"deployment\", \"statefulset\"]);\n\n// workloadKey is the value a resource contributes (what onChange emits): a\n// `[namespace/]kind/name` composite so two workloads of different kinds sharing\n// a name don't collide. namespace is omitted when not supplied.\nexport function workloadKey(\n  namespace: string | undefined,\n  kind: WorkloadKind,\n  r: WorkloadResource,\n): string {\n  const name = workloadName(kind, r);\n  return namespace ? `${namespace}/${kind}/${name}` : `${kind}/${name}`;\n}\n\n// parseWorkloadKey splits a `[namespace/]kind/name` value back into its parts.\n// The trailing segment is always the name (a host may itself contain no slash);\n// the segment before it is the kind when it is a known workload kind, and any\n// remaining leading segment is the namespace. A bare value (no recognised\n// kind/name shape) is returned as just its name so freeform input survives.\nexport function parseWorkloadKey(value: string): ParsedWorkloadKey {\n  const parts = value.split(\"/\");\n  const name = parts.at(-1);\n  const maybeKind = parts.at(-2);\n  if (name != null && maybeKind != null && KNOWN_KINDS.has(maybeKind)) {\n    const namespace = parts.slice(0, -2).join(\"/\");\n    const parsed: ParsedWorkloadKey = { kind: maybeKind as WorkloadKind, name };\n    if (namespace) parsed.namespace = namespace;\n    return parsed;\n  }\n  return { name: value };\n}\n\n// loadedWorkloads collapses the loaded resources into the two membership sets a\n// strict picker validates a value against: `keys` are the full\n// `[namespace/]kind/name` keys the picker emits, `names` are the bare name-parts\n// (service name / ingress host) a consumer may persist instead. A value in\n// neither set names a workload that doesn't exist in the namespace.\nexport function loadedWorkloads(\n  namespace: string | undefined,\n  byKind: Partial<Record<WorkloadKind, WorkloadResource[]>>,\n  kinds: WorkloadKind[],\n): { keys: Set<string>; names: Set<string> } {\n  const keys = new Set<string>();\n  const names = new Set<string>();\n  for (const kind of kinds) {\n    for (const r of byKind[kind] ?? []) {\n      keys.add(workloadKey(namespace, kind, r));\n      names.add(workloadName(kind, r));\n    }\n  }\n  return { keys, names };\n}\n\n// kindForValue returns the kind encoded in the selected value, so the lead icon\n// can mirror it without consulting the loaded resources. Falls back to the first\n// offered kind when nothing is selected or the value carries no recognised kind.\nexport function kindForValue(kinds: WorkloadKind[], value: string): WorkloadKind {\n  const kind = value ? parseWorkloadKey(value).kind : undefined;\n  return kind ?? kinds[0] ?? \"service\";\n}\n\n// buildWorkloadOptions flattens the per-kind resources into grouped Combobox\n// options in kind order. Each option's value is its `[namespace/]kind/name` key\n// and its label the human name; a current value not present in any kind is\n// pinned first (labelled with just its name-part) so the selection stays visible.\nexport function buildWorkloadOptions(\n  namespace: string | undefined,\n  byKind: Partial<Record<WorkloadKind, WorkloadResource[]>>,\n  kinds: WorkloadKind[],\n  value: string,\n): ComboboxOption[] {\n  const opts: ComboboxOption[] = [];\n  for (const kind of kinds) {\n    const meta = WORKLOAD_META[kind];\n    const Icon = meta.Icon;\n    for (const r of byKind[kind] ?? []) {\n      const host = ingressHost(kind, r);\n      opts.push({\n        value: workloadKey(namespace, kind, r),\n        // The label is the human name; an ingress pairs its host with the\n        // ingress name for context.\n        label: host ? `${host} (${r.name})` : r.name,\n        group: meta.label,\n        icon: <Icon className=\"h-4 w-4\" />,\n      });\n    }\n  }\n  if (value && !opts.some((o) => o.value === value)) {\n    const parsed = parseWorkloadKey(value);\n    const Icon = WORKLOAD_META[parsed.kind ?? kinds[0] ?? \"service\"].Icon;\n    return [{ value, label: parsed.name, icon: <Icon className=\"h-4 w-4\" /> }, ...opts];\n  }\n  return opts;\n}\n"],"names":[],"mappings":";;;AAuBO,MAAM,gBAAgD;AAAA,EAC3D,SAAS,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,EACnC,SAAS,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,EACnC,YAAY,EAAE,OAAO,cAAc,MAAM,cAAA;AAAA,EACzC,aAAa,EAAE,OAAO,eAAe,MAAM,eAAA;AAC7C;AAEO,MAAM,qBAAqC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIA,SAAS,YAAY,MAAoB,GAAyC;;AAChF,SAAO,SAAS,aAAY,OAAE,UAAF,mBAAU,KAAK;AAC7C;AAIA,SAAS,aAAa,MAAoB,GAA6B;AACrE,SAAO,YAAY,MAAM,CAAC,KAAK,EAAE;AACnC;AAKA,MAAM,kCAAkB,IAAY,CAAC,WAAW,WAAW,cAAc,aAAa,CAAC;AAKhF,SAAS,YACd,WACA,MACA,GACQ;AACR,QAAM,OAAO,aAAa,MAAM,CAAC;AACjC,SAAO,YAAY,GAAG,SAAS,IAAI,IAAI,IAAI,IAAI,KAAK,GAAG,IAAI,IAAI,IAAI;AACrE;AAOO,SAAS,iBAAiB,OAAkC;AACjE,QAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,QAAM,OAAO,MAAM,GAAG,EAAE;AACxB,QAAM,YAAY,MAAM,GAAG,EAAE;AAC7B,MAAI,QAAQ,QAAQ,aAAa,QAAQ,YAAY,IAAI,SAAS,GAAG;AACnE,UAAM,YAAY,MAAM,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG;AAC7C,UAAM,SAA4B,EAAE,MAAM,WAA2B,KAAA;AACrE,QAAI,kBAAkB,YAAY;AAClC,WAAO;AAAA,EACT;AACA,SAAO,EAAE,MAAM,MAAA;AACjB;AAOO,SAAS,gBACd,WACA,QACA,OAC2C;AAC3C,QAAM,2BAAW,IAAA;AACjB,QAAM,4BAAY,IAAA;AAClB,aAAW,QAAQ,OAAO;AACxB,eAAW,KAAK,OAAO,IAAI,KAAK,CAAA,GAAI;AAClC,WAAK,IAAI,YAAY,WAAW,MAAM,CAAC,CAAC;AACxC,YAAM,IAAI,aAAa,MAAM,CAAC,CAAC;AAAA,IACjC;AAAA,EACF;AACA,SAAO,EAAE,MAAM,MAAA;AACjB;AAKO,SAAS,aAAa,OAAuB,OAA6B;AAC/E,QAAM,OAAO,QAAQ,iBAAiB,KAAK,EAAE,OAAO;AACpD,SAAO,QAAQ,MAAM,CAAC,KAAK;AAC7B;AAMO,SAAS,qBACd,WACA,QACA,OACA,OACkB;AAClB,QAAM,OAAyB,CAAA;AAC/B,aAAW,QAAQ,OAAO;AACxB,UAAM,OAAO,cAAc,IAAI;AAC/B,UAAM,OAAO,KAAK;AAClB,eAAW,KAAK,OAAO,IAAI,KAAK,CAAA,GAAI;AAClC,YAAM,OAAO,YAAY,MAAM,CAAC;AAChC,WAAK,KAAK;AAAA,QACR,OAAO,YAAY,WAAW,MAAM,CAAC;AAAA;AAAA;AAAA,QAGrC,OAAO,OAAO,GAAG,IAAI,KAAK,EAAE,IAAI,MAAM,EAAE;AAAA,QACxC,OAAO,KAAK;AAAA,QACZ,MAAM,oBAAC,MAAA,EAAK,WAAU,UAAA,CAAU;AAAA,MAAA,CACjC;AAAA,IACH;AAAA,EACF;AACA,MAAI,SAAS,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK,GAAG;AACjD,UAAM,SAAS,iBAAiB,KAAK;AACrC,UAAM,OAAO,cAAc,OAAO,QAAQ,MAAM,CAAC,KAAK,SAAS,EAAE;AACjE,WAAO,CAAC,EAAE,OAAO,OAAO,OAAO,MAAM,MAAM,oBAAC,MAAA,EAAK,WAAU,UAAA,CAAU,EAAA,GAAM,GAAG,IAAI;AAAA,EACpF;AACA,SAAO;AACT;"}

package/dist/components.cjs

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const button = require("./components/button.cjs");
+const loading = require("./components/loading.cjs");
+const buttonVariants = require("./components/button-variants.cjs");
 const IconButton = require("./components/IconButton.cjs");
 const SplitButton = require("./components/SplitButton.cjs");
 const FormatOptionsDropdown = require("./components/FormatOptionsDropdown.cjs");
+const formatOptions = require("./components/format-options.cjs");
 const DateField = require("./components/DateField.cjs");
 const DatePicker = require("./components/DatePicker.cjs");
 const DateTimePicker = require("./components/DateTimePicker.cjs");
@@ -13,45 +16,60 @@ const FilterBar = require("./components/FilterBar.cjs");
 const MultiSelect = require("./components/MultiSelect.cjs");
 const select = require("./components/select.cjs");
 const Combobox = require("./components/Combobox.cjs");
+const Field = require("./components/Field.cjs");
+const useForm = require("./components/use-form.cjs");
+const TreePickerField = require("./components/TreePickerField.cjs");
 const WorkloadPicker = require("./components/WorkloadPicker.cjs");
+const workloadPickerUtils = require("./components/workload-picker-utils.cjs");
 const SecretKeySelector = require("./components/SecretKeySelector.cjs");
 const themeSwitcher = require("./components/theme-switcher.cjs");
 const densitySwitcher = require("./components/density-switcher.cjs");
 const iconMenuPicker = require("./components/icon-menu-picker.cjs");
 const JsonSchemaForm = require("./components/JsonSchemaForm.cjs");
 const jsonSchemaFormSize = require("./components/json-schema-form-size.cjs");
+const jsonSchemaFormPreferences = require("./components/json-schema-form-preferences.cjs");
 const jsonSchemaFormResolve = require("./components/json-schema-form-resolve.cjs");
 const SplitPane = require("./layout/SplitPane.cjs");
 const Section = require("./layout/Section.cjs");
 const DropdownMenu = require("./overlay/DropdownMenu.cjs");
 const HoverCard = require("./overlay/HoverCard.cjs");
 const Modal = require("./overlay/Modal.cjs");
+const modalStack = require("./overlay/modalStack.cjs");
 exports.Button = button.Button;
-exports.buttonVariants = button.buttonVariants;
+exports.Loading = loading.Loading;
+exports.LoadingDots = loading.LoadingDots;
+exports.buttonVariants = buttonVariants.buttonVariants;
 exports.IconButton = IconButton.IconButton;
 exports.SplitButton = SplitButton.SplitButton;
-exports.CLICKY_FORMAT_OPTIONS = FormatOptionsDropdown.CLICKY_FORMAT_OPTIONS;
 exports.FormatOptionsDropdown = FormatOptionsDropdown.FormatOptionsDropdown;
+exports.CLICKY_FORMAT_OPTIONS = formatOptions.CLICKY_FORMAT_OPTIONS;
 exports.DateField = DateField.DateField;
 exports.DatePicker = DatePicker.DatePicker;
 exports.DateTimePicker = DateTimePicker.DateTimePicker;
 exports.TimeRange = TimeRange.TimeRange;
 exports.RangeSlider = RangeSlider.RangeSlider;
 exports.FilterBar = FilterBar.FilterBar;
+exports.applyFilterExtensions = FilterBar.applyFilterExtensions;
 exports.MultiSelect = MultiSelect.MultiSelect;
 exports.Select = select.Select;
 exports.Combobox = Combobox.Combobox;
+exports.Field = Field.Field;
+exports.useForm = useForm.useForm;
+exports.TreePickerField = TreePickerField.TreePickerField;
 exports.WorkloadPicker = WorkloadPicker.WorkloadPicker;
-exports.kindForValue = WorkloadPicker.kindForValue;
-exports.loadedWorkloads = WorkloadPicker.loadedWorkloads;
-exports.parseWorkloadKey = WorkloadPicker.parseWorkloadKey;
-exports.workloadKey = WorkloadPicker.workloadKey;
+exports.kindForValue = workloadPickerUtils.kindForValue;
+exports.loadedWorkloads = workloadPickerUtils.loadedWorkloads;
+exports.parseWorkloadKey = workloadPickerUtils.parseWorkloadKey;
+exports.workloadKey = workloadPickerUtils.workloadKey;
 exports.SecretKeySelector = SecretKeySelector.SecretKeySelector;
 exports.ThemeSwitcher = themeSwitcher.ThemeSwitcher;
 exports.DensitySwitcher = densitySwitcher.DensitySwitcher;
 exports.IconMenuPicker = iconMenuPicker.IconMenuPicker;
 exports.JsonSchemaForm = JsonSchemaForm.JsonSchemaForm;
 exports.DEFAULT_FORM_SIZE = jsonSchemaFormSize.DEFAULT_FORM_SIZE;
+exports.DEFAULT_PREFERENCES_STORAGE_KEY = jsonSchemaFormPreferences.DEFAULT_PREFERENCES_STORAGE_KEY;
+exports.readPreferences = jsonSchemaFormPreferences.readPreferences;
+exports.writePreferences = jsonSchemaFormPreferences.writePreferences;
 exports.effectiveProperties = jsonSchemaFormResolve.effectiveProperties;
 exports.isOpenStringMap = jsonSchemaFormResolve.isOpenStringMap;
 exports.matchesIf = jsonSchemaFormResolve.matchesIf;
@@ -62,4 +80,5 @@ exports.Section = Section.Section;
 exports.DropdownMenu = DropdownMenu.DropdownMenu;
 exports.HoverCard = HoverCard.HoverCard;
 exports.Modal = Modal.Modal;
+exports.useModalStack = modalStack.useModalStack;
 //# sourceMappingURL=components.cjs.map

package/dist/components.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"components.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}