@flanksource/clicky-ui 0.2.14 → 0.2.15

package/dist/components/SecretKeySelector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SecretKeySelector.cjs","sources":["../../src/components/SecretKeySelector.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { K8SSecret, K8SConfigmap } from \"@flanksource/icons/mi\";\nimport { cn } from \"../lib/utils\";\nimport { UiEdit } from \"../icons\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\n\n// SecretKeySelector picks a Secret or ConfigMap and one of its keys, with a\n// mid-masked preview of every key's value so the operator can tell which key\n// holds the host vs the db vs a password. It also offers a \"Value\" mode (on by\n// default; opt out with `allowLiteral={false}`) for typing a static inline\n// string. It is presentational: it fetches nothing — the consumer supplies\n// async `loadResources` / `loadKeyPreview` getters. It emits a discriminated\n// value the consumer lowers into whatever reference shape it needs.\n\nexport type SecretKind = \"secret\" | \"configmap\";\n\n/** Toggle options: the two resource kinds plus the inline-literal mode. */\nexport type SecretValueSource = SecretKind | \"value\";\n\n/** One key's mid-masked preview. `value` is already masked by the consumer. */\nexport type KeyPreview = { key: string; value: string };\n\n/**\n * The selector's value: either a {kind,name,key} reference into a Secret /\n * ConfigMap, or a static inline literal ({kind:\"value\", value}).\n */\nexport type SecretKeyValue =\n  | { kind: SecretKind; name: string; key: string }\n  | { kind: \"value\"; value: string };\n\n/** A named secret/configmap and its data key names (values never returned). */\nexport type SecretResource = { name: string; keys?: string[] };\n\nexport type SecretKeySelectorProps = {\n  value: SecretKeyValue | undefined;\n  onChange: (next: SecretKeyValue | undefined) => void;\n  /** Loads the named kind's resources (name + data key names). */\n  loadResources: (kind: SecretKind) => Promise<SecretResource[]>;\n  /** Loads mid-masked previews for the named resource's keys. */\n  loadKeyPreview: (kind: SecretKind, name: string) => Promise<KeyPreview[]>;\n  /**\n   * Offer a third \"Value\" toggle for typing a static inline literal. Enabled by\n   * default; pass `false` to restrict the selector to Secret/ConfigMap\n   * references only.\n   */\n  allowLiteral?: boolean;\n  /**\n   * When true, a chosen secret/configmap name absent from the loaded resources,\n   * or a key absent from the chosen resource's keys, is flagged invalid (once\n   * the respective load settles). The reference doesn't exist in the namespace.\n   * The literal \"Value\" mode is never strict-flagged.\n   */\n  strict?: boolean;\n  className?: string;\n};\n\nexport function SecretKeySelector({\n  value,\n  onChange,\n  loadResources,\n  loadKeyPreview,\n  allowLiteral = true,\n  strict = false,\n  className,\n}: SecretKeySelectorProps) {\n  const source: SecretValueSource = value?.kind ?? \"secret\";\n  const isLiteral = source === \"value\";\n  // A literal value carries no resource kind; the loaders default to \"secret\".\n  const refKind: SecretKind = isLiteral ? \"secret\" : source;\n  const selectedName = value && value.kind !== \"value\" ? value.name : \"\";\n  const selectedKey = value && value.kind !== \"value\" ? value.key : \"\";\n  const literalValue = value && value.kind === \"value\" ? value.value : \"\";\n\n  const [resources, setResources] = useState<SecretResource[]>([]);\n  const [resourcesLoading, setResourcesLoading] = useState(false);\n  const [previews, setPreviews] = useState<KeyPreview[]>([]);\n  const [previewLoading, setPreviewLoading] = useState(false);\n\n  useEffect(() => {\n    // Literal mode references no resource, so skip the list fetch entirely.\n    if (isLiteral) return;\n    let cancelled = false;\n    setResourcesLoading(true);\n    loadResources(refKind)\n      .then((res) => !cancelled && setResources(res))\n      .finally(() => !cancelled && setResourcesLoading(false));\n    return () => {\n      cancelled = true;\n    };\n  }, [loadResources, refKind, isLiteral]);\n\n  useEffect(() => {\n    if (!selectedName) {\n      setPreviews([]);\n      return;\n    }\n    let cancelled = false;\n    setPreviewLoading(true);\n    loadKeyPreview(refKind, selectedName)\n      .then((res) => !cancelled && setPreviews(res))\n      .catch(() => !cancelled && setPreviews([]))\n      .finally(() => !cancelled && setPreviewLoading(false));\n    return () => {\n      cancelled = true;\n    };\n  }, [loadKeyPreview, refKind, selectedName]);\n\n  const nameOptions = useMemo<ComboboxOption[]>(\n    () => resources.map((r) => ({ value: r.name, label: r.name })),\n    [resources],\n  );\n  const selectedResource = useMemo(\n    () => resources.find((r) => r.name === selectedName),\n    [resources, selectedName],\n  );\n  const keyOptions = useMemo(\n    () => buildKeyOptions(selectedResource?.keys ?? [], previews, selectedKey),\n    [selectedResource, selectedKey, previews],\n  );\n\n  // Strict validity: the name is invalid when it names no loaded resource; the\n  // key is invalid when, with a resolved resource, it isn't one of that\n  // resource's keys. The key list comes from the resource list (not previews),\n  // so both are gated on resourcesLoading only.\n  const nameInvalid = strict && !!selectedName && !resourcesLoading && !selectedResource;\n  const keyInvalid =\n    strict &&\n    !!selectedKey &&\n    !!selectedResource &&\n    !resourcesLoading &&\n    !(selectedResource.keys ?? []).includes(selectedKey);\n\n  // Switching source resets the selection: a resource kind clears name+key; the\n  // literal mode seeds an empty string (so onChange emits a value-kind value).\n  const setSource = (next: SecretValueSource) =>\n    onChange(next === \"value\" ? { kind: \"value\", value: \"\" } : { kind: next, name: \"\", key: \"\" });\n  const setName = (name: string) =>\n    onChange(name ? { kind: refKind, name, key: selectedKey } : undefined);\n  const setKey = (key: string) =>\n    selectedName ? onChange({ kind: refKind, name: selectedName, key }) : undefined;\n  const setLiteral = (v: string) => onChange({ kind: \"value\", value: v });\n\n  const sources: SecretValueSource[] = allowLiteral\n    ? [\"secret\", \"configmap\", \"value\"]\n    : [\"secret\", \"configmap\"];\n\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <div className=\"flex shrink-0 overflow-hidden rounded border border-border text-xs\">\n        {sources.map((k) => {\n          const Glyph = SOURCE_ICON[k];\n          return (\n            <button\n              key={k}\n              type=\"button\"\n              onClick={() => setSource(k)}\n              className={cn(\n                \"flex items-center gap-1 whitespace-nowrap px-2 py-1\",\n                source === k\n                  ? \"bg-primary text-primary-foreground\"\n                  : \"bg-muted text-muted-foreground hover:bg-accent\",\n              )}\n            >\n              <Glyph className=\"h-3.5 w-3.5\" />\n              {SOURCE_LABEL[k]}\n            </button>\n          );\n        })}\n      </div>\n      {isLiteral ? (\n        <input\n          type=\"text\"\n          value={literalValue}\n          onChange={(e) => setLiteral(e.target.value)}\n          placeholder=\"Static value…\"\n          className={cn(\n            \"h-control-h min-w-0 flex-1 rounded border border-input bg-background px-control-px text-sm\",\n            \"outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n          )}\n        />\n      ) : (\n        <>\n          <div className=\"w-44 shrink-0\">\n            <Combobox\n              options={nameOptions}\n              value={selectedName}\n              onChange={setName}\n              allowCustomValue\n              loading={resourcesLoading}\n              invalid={nameInvalid}\n              placeholder={`Select ${refKind}…`}\n            />\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <Combobox\n              options={keyOptions}\n              value={selectedKey}\n              onChange={setKey}\n              allowCustomValue\n              loading={previewLoading}\n              invalid={keyInvalid}\n              placeholder={selectedName ? \"Key…\" : \"—\"}\n            />\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\n// Icons share a className-only call shape; the flanksource FCs carry extra\n// static metadata that doesn't unify with ComponentType, so type the slot as a\n// plain render function instead.\nconst SOURCE_ICON: Record<SecretValueSource, (p: { className?: string }) => ReactNode> = {\n  secret: K8SSecret,\n  configmap: K8SConfigmap,\n  value: UiEdit,\n};\n\nconst SOURCE_LABEL: Record<SecretValueSource, string> = {\n  secret: \"Secret\",\n  configmap: \"ConfigMap\",\n  value: \"Value\",\n};\n\n// buildKeyOptions labels each key with its mid-masked preview value when one is\n// available. A selected key absent from the list is pinned so the selection\n// stays visible.\nexport function buildKeyOptions(\n  keys: string[],\n  previews: KeyPreview[],\n  selectedKey: string,\n): ComboboxOption[] {\n  const masked = new Map(previews.map((p) => [p.key, p.value]));\n  const base = keys.map((k) => ({\n    value: k,\n    label: masked.has(k) ? `${k} — ${masked.get(k)}` : k,\n  }));\n  if (selectedKey && !base.some((o) => o.value === selectedKey)) {\n    return [{ value: selectedKey, label: selectedKey }, ...base];\n  }\n  return base;\n}\n"],"names":["useState","useEffect","useMemo","cn","jsx","jsxs","Fragment","Combobox","K8SSecret","K8SConfigmap","UiEdit"],"mappings":"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"}
+{"version":3,"file":"SecretKeySelector.cjs","sources":["../../src/components/SecretKeySelector.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { K8SSecret, K8SConfigmap } from \"@flanksource/icons/mi\";\nimport { cn } from \"../lib/utils\";\nimport { UiEdit } from \"../icons\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\n\n// SecretKeySelector picks a Secret or ConfigMap and one of its keys, with a\n// mid-masked preview of every key's value so the operator can tell which key\n// holds the host vs the db vs a password. It also offers a \"Value\" mode (on by\n// default; opt out with `allowLiteral={false}`) for typing a static inline\n// string. It is presentational: it fetches nothing — the consumer supplies\n// async `loadResources` / `loadKeyPreview` getters. It emits a discriminated\n// value the consumer lowers into whatever reference shape it needs.\n\nexport type SecretKind = \"secret\" | \"configmap\";\n\n/** Toggle options: the two resource kinds plus the inline-literal mode. */\nexport type SecretValueSource = SecretKind | \"value\";\n\n/** One key's mid-masked preview. `value` is already masked by the consumer. */\nexport type KeyPreview = { key: string; value: string };\n\n/**\n * The selector's value: either a {kind,name,key} reference into a Secret /\n * ConfigMap, or a static inline literal ({kind:\"value\", value}).\n */\nexport type SecretKeyValue =\n  | { kind: SecretKind; name: string; key: string }\n  | { kind: \"value\"; value: string };\n\n/** A named secret/configmap and its data key names (values never returned). */\nexport type SecretResource = { name: string; keys?: string[] };\n\nexport type SecretKeySelectorProps = {\n  value: SecretKeyValue | undefined;\n  onChange: (next: SecretKeyValue | undefined) => void;\n  /** Loads the named kind's resources (name + data key names). */\n  loadResources: (kind: SecretKind) => Promise<SecretResource[]>;\n  /** Loads mid-masked previews for the named resource's keys. */\n  loadKeyPreview: (kind: SecretKind, name: string) => Promise<KeyPreview[]>;\n  /**\n   * Offer a third \"Value\" toggle for typing a static inline literal. Enabled by\n   * default; pass `false` to restrict the selector to Secret/ConfigMap\n   * references only.\n   */\n  allowLiteral?: boolean;\n  /**\n   * When true, a chosen secret/configmap name absent from the loaded resources,\n   * or a key absent from the chosen resource's keys, is flagged invalid (once\n   * the respective load settles). The reference doesn't exist in the namespace.\n   * The literal \"Value\" mode is never strict-flagged.\n   */\n  strict?: boolean;\n  className?: string;\n};\n\nexport function SecretKeySelector({\n  value,\n  onChange,\n  loadResources,\n  loadKeyPreview,\n  allowLiteral = true,\n  strict = false,\n  className,\n}: SecretKeySelectorProps) {\n  const source: SecretValueSource = value?.kind ?? \"secret\";\n  const isLiteral = source === \"value\";\n  // A literal value carries no resource kind; the loaders default to \"secret\".\n  const refKind: SecretKind = isLiteral ? \"secret\" : source;\n  const selectedName = value && value.kind !== \"value\" ? value.name : \"\";\n  const selectedKey = value && value.kind !== \"value\" ? value.key : \"\";\n  const literalValue = value && value.kind === \"value\" ? value.value : \"\";\n\n  const [resources, setResources] = useState<SecretResource[]>([]);\n  const [resourcesLoading, setResourcesLoading] = useState(false);\n  const [previews, setPreviews] = useState<KeyPreview[]>([]);\n  const [previewLoading, setPreviewLoading] = useState(false);\n\n  useEffect(() => {\n    // Literal mode references no resource, so skip the list fetch entirely.\n    if (isLiteral) return;\n    let cancelled = false;\n    setResourcesLoading(true);\n    loadResources(refKind)\n      .then((res) => !cancelled && setResources(res))\n      .finally(() => !cancelled && setResourcesLoading(false));\n    return () => {\n      cancelled = true;\n    };\n  }, [loadResources, refKind, isLiteral]);\n\n  useEffect(() => {\n    if (!selectedName) {\n      setPreviews([]);\n      return;\n    }\n    let cancelled = false;\n    setPreviewLoading(true);\n    loadKeyPreview(refKind, selectedName)\n      .then((res) => !cancelled && setPreviews(res))\n      .catch(() => !cancelled && setPreviews([]))\n      .finally(() => !cancelled && setPreviewLoading(false));\n    return () => {\n      cancelled = true;\n    };\n  }, [loadKeyPreview, refKind, selectedName]);\n\n  const nameOptions = useMemo<ComboboxOption[]>(\n    () => resources.map((r) => ({ value: r.name, label: r.name })),\n    [resources],\n  );\n  const selectedResource = useMemo(\n    () => resources.find((r) => r.name === selectedName),\n    [resources, selectedName],\n  );\n  const keyOptions = useMemo(\n    () => buildKeyOptions(selectedResource?.keys ?? [], previews, selectedKey),\n    [selectedResource, selectedKey, previews],\n  );\n\n  // Strict validity: the name is invalid when it names no loaded resource; the\n  // key is invalid when, with a resolved resource, it isn't one of that\n  // resource's keys. The key list comes from the resource list (not previews),\n  // so both are gated on resourcesLoading only.\n  const nameInvalid = strict && !!selectedName && !resourcesLoading && !selectedResource;\n  const keyInvalid =\n    strict &&\n    !!selectedKey &&\n    !!selectedResource &&\n    !resourcesLoading &&\n    !(selectedResource.keys ?? []).includes(selectedKey);\n\n  // Switching source resets the selection: a resource kind clears name+key; the\n  // literal mode seeds an empty string (so onChange emits a value-kind value).\n  const setSource = (next: SecretValueSource) =>\n    onChange(next === \"value\" ? { kind: \"value\", value: \"\" } : { kind: next, name: \"\", key: \"\" });\n  const setName = (name: string) =>\n    onChange(name ? { kind: refKind, name, key: selectedKey } : undefined);\n  const setKey = (key: string) =>\n    selectedName ? onChange({ kind: refKind, name: selectedName, key }) : undefined;\n  const setLiteral = (v: string) => onChange({ kind: \"value\", value: v });\n\n  const sources: SecretValueSource[] = allowLiteral\n    ? [\"secret\", \"configmap\", \"value\"]\n    : [\"secret\", \"configmap\"];\n\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <div className=\"flex shrink-0 overflow-hidden rounded border border-border text-xs\">\n        {sources.map((k) => {\n          const Glyph = SOURCE_ICON[k];\n          return (\n            <button\n              key={k}\n              type=\"button\"\n              onClick={() => setSource(k)}\n              className={cn(\n                \"flex items-center gap-1 whitespace-nowrap px-2 py-1\",\n                source === k\n                  ? \"bg-primary text-primary-foreground\"\n                  : \"bg-muted text-muted-foreground hover:bg-accent\",\n              )}\n            >\n              <Glyph className=\"h-3.5 w-3.5\" />\n              {SOURCE_LABEL[k]}\n            </button>\n          );\n        })}\n      </div>\n      {isLiteral ? (\n        <input\n          type=\"text\"\n          value={literalValue}\n          onChange={(e) => setLiteral(e.target.value)}\n          placeholder=\"Static value…\"\n          className={cn(\n            \"h-control-h min-w-0 flex-1 rounded border border-input bg-background px-control-px text-sm\",\n            \"outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n          )}\n        />\n      ) : (\n        <>\n          <div className=\"w-44 shrink-0\">\n            <Combobox\n              options={nameOptions}\n              value={selectedName}\n              onChange={setName}\n              allowCustomValue\n              loading={resourcesLoading}\n              invalid={nameInvalid}\n              placeholder={`Select ${refKind}…`}\n            />\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <Combobox\n              options={keyOptions}\n              value={selectedKey}\n              onChange={setKey}\n              allowCustomValue\n              loading={previewLoading}\n              invalid={keyInvalid}\n              placeholder={selectedName ? \"Key…\" : \"—\"}\n            />\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\n// Icons share a className-only call shape; the flanksource FCs carry extra\n// static metadata that doesn't unify with ComponentType, so type the slot as a\n// plain render function instead.\nconst SOURCE_ICON: Record<SecretValueSource, (p: { className?: string }) => ReactNode> = {\n  secret: K8SSecret,\n  configmap: K8SConfigmap,\n  value: UiEdit,\n};\n\nconst SOURCE_LABEL: Record<SecretValueSource, string> = {\n  secret: \"Secret\",\n  configmap: \"ConfigMap\",\n  value: \"Value\",\n};\n\n// buildKeyOptions labels each key with its mid-masked preview value when one is\n// available. A selected key absent from the list is pinned so the selection\n// stays visible.\nfunction buildKeyOptions(\n  keys: string[],\n  previews: KeyPreview[],\n  selectedKey: string,\n): ComboboxOption[] {\n  const masked = new Map(previews.map((p) => [p.key, p.value]));\n  const base = keys.map((k) => ({\n    value: k,\n    label: masked.has(k) ? `${k} — ${masked.get(k)}` : k,\n  }));\n  if (selectedKey && !base.some((o) => o.value === selectedKey)) {\n    return [{ value: selectedKey, label: selectedKey }, ...base];\n  }\n  return base;\n}\n"],"names":["useState","useEffect","useMemo","cn","jsx","jsxs","Fragment","Combobox","K8SSecret","K8SConfigmap","UiEdit"],"mappings":"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"}

package/dist/components/SecretKeySelector.d.ts

@@ -1,4 +1,3 @@
-import { ComboboxOption } from './Combobox';
 export type SecretKind = "secret" | "configmap";
 /** Toggle options: the two resource kinds plus the inline-literal mode. */
 export type SecretValueSource = SecretKind | "value";
@@ -47,5 +46,4 @@ export type SecretKeySelectorProps = {
     className?: string;
 };
 export declare function SecretKeySelector({ value, onChange, loadResources, loadKeyPreview, allowLiteral, strict, className, }: SecretKeySelectorProps): import("react/jsx-runtime").JSX.Element;
-export declare function buildKeyOptions(keys: string[], previews: KeyPreview[], selectedKey: string): ComboboxOption[];
 //# sourceMappingURL=SecretKeySelector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SecretKeySelector.d.ts","sourceRoot":"","sources":["../../src/components/SecretKeySelector.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,YAAY,CAAC;AAU3D,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEhD,2EAA2E;AAC3E,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,OAAO,CAAC;AAErD,+EAA+E;AAC/E,MAAM,MAAM,UAAU,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC/C;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAErC,+EAA+E;AAC/E,MAAM,MAAM,cAAc,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAE/D,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,cAAc,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,gEAAgE;IAChE,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC/D,+DAA+D;IAC/D,cAAc,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;IAC1E;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,aAAa,EACb,cAAc,EACd,YAAmB,EACnB,MAAc,EACd,SAAS,GACV,EAAE,sBAAsB,2CAgJxB;AAoBD,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EAAE,EACd,QAAQ,EAAE,UAAU,EAAE,EACtB,WAAW,EAAE,MAAM,GAClB,cAAc,EAAE,CAUlB"}
+{"version":3,"file":"SecretKeySelector.d.ts","sourceRoot":"","sources":["../../src/components/SecretKeySelector.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEhD,2EAA2E;AAC3E,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,OAAO,CAAC;AAErD,+EAA+E;AAC/E,MAAM,MAAM,UAAU,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC/C;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAErC,+EAA+E;AAC/E,MAAM,MAAM,cAAc,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAE/D,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,cAAc,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,gEAAgE;IAChE,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC/D,+DAA+D;IAC/D,cAAc,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;IAC1E;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,aAAa,EACb,cAAc,EACd,YAAmB,EACnB,MAAc,EACd,SAAS,GACV,EAAE,sBAAsB,2CAgJxB"}

package/dist/components/SecretKeySelector.js

@@ -145,7 +145,6 @@ function buildKeyOptions(keys, previews, selectedKey) {
   return base;
 }
 export {
-  SecretKeySelector,
-  buildKeyOptions
+  SecretKeySelector
 };
 //# sourceMappingURL=SecretKeySelector.js.map

package/dist/components/SecretKeySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecretKeySelector.js","sources":["../../src/components/SecretKeySelector.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { K8SSecret, K8SConfigmap } from \"@flanksource/icons/mi\";\nimport { cn } from \"../lib/utils\";\nimport { UiEdit } from \"../icons\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\n\n// SecretKeySelector picks a Secret or ConfigMap and one of its keys, with a\n// mid-masked preview of every key's value so the operator can tell which key\n// holds the host vs the db vs a password. It also offers a \"Value\" mode (on by\n// default; opt out with `allowLiteral={false}`) for typing a static inline\n// string. It is presentational: it fetches nothing — the consumer supplies\n// async `loadResources` / `loadKeyPreview` getters. It emits a discriminated\n// value the consumer lowers into whatever reference shape it needs.\n\nexport type SecretKind = \"secret\" | \"configmap\";\n\n/** Toggle options: the two resource kinds plus the inline-literal mode. */\nexport type SecretValueSource = SecretKind | \"value\";\n\n/** One key's mid-masked preview. `value` is already masked by the consumer. */\nexport type KeyPreview = { key: string; value: string };\n\n/**\n * The selector's value: either a {kind,name,key} reference into a Secret /\n * ConfigMap, or a static inline literal ({kind:\"value\", value}).\n */\nexport type SecretKeyValue =\n  | { kind: SecretKind; name: string; key: string }\n  | { kind: \"value\"; value: string };\n\n/** A named secret/configmap and its data key names (values never returned). */\nexport type SecretResource = { name: string; keys?: string[] };\n\nexport type SecretKeySelectorProps = {\n  value: SecretKeyValue | undefined;\n  onChange: (next: SecretKeyValue | undefined) => void;\n  /** Loads the named kind's resources (name + data key names). */\n  loadResources: (kind: SecretKind) => Promise<SecretResource[]>;\n  /** Loads mid-masked previews for the named resource's keys. */\n  loadKeyPreview: (kind: SecretKind, name: string) => Promise<KeyPreview[]>;\n  /**\n   * Offer a third \"Value\" toggle for typing a static inline literal. Enabled by\n   * default; pass `false` to restrict the selector to Secret/ConfigMap\n   * references only.\n   */\n  allowLiteral?: boolean;\n  /**\n   * When true, a chosen secret/configmap name absent from the loaded resources,\n   * or a key absent from the chosen resource's keys, is flagged invalid (once\n   * the respective load settles). The reference doesn't exist in the namespace.\n   * The literal \"Value\" mode is never strict-flagged.\n   */\n  strict?: boolean;\n  className?: string;\n};\n\nexport function SecretKeySelector({\n  value,\n  onChange,\n  loadResources,\n  loadKeyPreview,\n  allowLiteral = true,\n  strict = false,\n  className,\n}: SecretKeySelectorProps) {\n  const source: SecretValueSource = value?.kind ?? \"secret\";\n  const isLiteral = source === \"value\";\n  // A literal value carries no resource kind; the loaders default to \"secret\".\n  const refKind: SecretKind = isLiteral ? \"secret\" : source;\n  const selectedName = value && value.kind !== \"value\" ? value.name : \"\";\n  const selectedKey = value && value.kind !== \"value\" ? value.key : \"\";\n  const literalValue = value && value.kind === \"value\" ? value.value : \"\";\n\n  const [resources, setResources] = useState<SecretResource[]>([]);\n  const [resourcesLoading, setResourcesLoading] = useState(false);\n  const [previews, setPreviews] = useState<KeyPreview[]>([]);\n  const [previewLoading, setPreviewLoading] = useState(false);\n\n  useEffect(() => {\n    // Literal mode references no resource, so skip the list fetch entirely.\n    if (isLiteral) return;\n    let cancelled = false;\n    setResourcesLoading(true);\n    loadResources(refKind)\n      .then((res) => !cancelled && setResources(res))\n      .finally(() => !cancelled && setResourcesLoading(false));\n    return () => {\n      cancelled = true;\n    };\n  }, [loadResources, refKind, isLiteral]);\n\n  useEffect(() => {\n    if (!selectedName) {\n      setPreviews([]);\n      return;\n    }\n    let cancelled = false;\n    setPreviewLoading(true);\n    loadKeyPreview(refKind, selectedName)\n      .then((res) => !cancelled && setPreviews(res))\n      .catch(() => !cancelled && setPreviews([]))\n      .finally(() => !cancelled && setPreviewLoading(false));\n    return () => {\n      cancelled = true;\n    };\n  }, [loadKeyPreview, refKind, selectedName]);\n\n  const nameOptions = useMemo<ComboboxOption[]>(\n    () => resources.map((r) => ({ value: r.name, label: r.name })),\n    [resources],\n  );\n  const selectedResource = useMemo(\n    () => resources.find((r) => r.name === selectedName),\n    [resources, selectedName],\n  );\n  const keyOptions = useMemo(\n    () => buildKeyOptions(selectedResource?.keys ?? [], previews, selectedKey),\n    [selectedResource, selectedKey, previews],\n  );\n\n  // Strict validity: the name is invalid when it names no loaded resource; the\n  // key is invalid when, with a resolved resource, it isn't one of that\n  // resource's keys. The key list comes from the resource list (not previews),\n  // so both are gated on resourcesLoading only.\n  const nameInvalid = strict && !!selectedName && !resourcesLoading && !selectedResource;\n  const keyInvalid =\n    strict &&\n    !!selectedKey &&\n    !!selectedResource &&\n    !resourcesLoading &&\n    !(selectedResource.keys ?? []).includes(selectedKey);\n\n  // Switching source resets the selection: a resource kind clears name+key; the\n  // literal mode seeds an empty string (so onChange emits a value-kind value).\n  const setSource = (next: SecretValueSource) =>\n    onChange(next === \"value\" ? { kind: \"value\", value: \"\" } : { kind: next, name: \"\", key: \"\" });\n  const setName = (name: string) =>\n    onChange(name ? { kind: refKind, name, key: selectedKey } : undefined);\n  const setKey = (key: string) =>\n    selectedName ? onChange({ kind: refKind, name: selectedName, key }) : undefined;\n  const setLiteral = (v: string) => onChange({ kind: \"value\", value: v });\n\n  const sources: SecretValueSource[] = allowLiteral\n    ? [\"secret\", \"configmap\", \"value\"]\n    : [\"secret\", \"configmap\"];\n\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <div className=\"flex shrink-0 overflow-hidden rounded border border-border text-xs\">\n        {sources.map((k) => {\n          const Glyph = SOURCE_ICON[k];\n          return (\n            <button\n              key={k}\n              type=\"button\"\n              onClick={() => setSource(k)}\n              className={cn(\n                \"flex items-center gap-1 whitespace-nowrap px-2 py-1\",\n                source === k\n                  ? \"bg-primary text-primary-foreground\"\n                  : \"bg-muted text-muted-foreground hover:bg-accent\",\n              )}\n            >\n              <Glyph className=\"h-3.5 w-3.5\" />\n              {SOURCE_LABEL[k]}\n            </button>\n          );\n        })}\n      </div>\n      {isLiteral ? (\n        <input\n          type=\"text\"\n          value={literalValue}\n          onChange={(e) => setLiteral(e.target.value)}\n          placeholder=\"Static value…\"\n          className={cn(\n            \"h-control-h min-w-0 flex-1 rounded border border-input bg-background px-control-px text-sm\",\n            \"outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n          )}\n        />\n      ) : (\n        <>\n          <div className=\"w-44 shrink-0\">\n            <Combobox\n              options={nameOptions}\n              value={selectedName}\n              onChange={setName}\n              allowCustomValue\n              loading={resourcesLoading}\n              invalid={nameInvalid}\n              placeholder={`Select ${refKind}…`}\n            />\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <Combobox\n              options={keyOptions}\n              value={selectedKey}\n              onChange={setKey}\n              allowCustomValue\n              loading={previewLoading}\n              invalid={keyInvalid}\n              placeholder={selectedName ? \"Key…\" : \"—\"}\n            />\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\n// Icons share a className-only call shape; the flanksource FCs carry extra\n// static metadata that doesn't unify with ComponentType, so type the slot as a\n// plain render function instead.\nconst SOURCE_ICON: Record<SecretValueSource, (p: { className?: string }) => ReactNode> = {\n  secret: K8SSecret,\n  configmap: K8SConfigmap,\n  value: UiEdit,\n};\n\nconst SOURCE_LABEL: Record<SecretValueSource, string> = {\n  secret: \"Secret\",\n  configmap: \"ConfigMap\",\n  value: \"Value\",\n};\n\n// buildKeyOptions labels each key with its mid-masked preview value when one is\n// available. A selected key absent from the list is pinned so the selection\n// stays visible.\nexport function buildKeyOptions(\n  keys: string[],\n  previews: KeyPreview[],\n  selectedKey: string,\n): ComboboxOption[] {\n  const masked = new Map(previews.map((p) => [p.key, p.value]));\n  const base = keys.map((k) => ({\n    value: k,\n    label: masked.has(k) ? `${k} — ${masked.get(k)}` : k,\n  }));\n  if (selectedKey && !base.some((o) => o.value === selectedKey)) {\n    return [{ value: selectedKey, label: selectedKey }, ...base];\n  }\n  return base;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SecretKeySelector.js","sources":["../../src/components/SecretKeySelector.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { K8SSecret, K8SConfigmap } from \"@flanksource/icons/mi\";\nimport { cn } from \"../lib/utils\";\nimport { UiEdit } from \"../icons\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\n\n// SecretKeySelector picks a Secret or ConfigMap and one of its keys, with a\n// mid-masked preview of every key's value so the operator can tell which key\n// holds the host vs the db vs a password. It also offers a \"Value\" mode (on by\n// default; opt out with `allowLiteral={false}`) for typing a static inline\n// string. It is presentational: it fetches nothing — the consumer supplies\n// async `loadResources` / `loadKeyPreview` getters. It emits a discriminated\n// value the consumer lowers into whatever reference shape it needs.\n\nexport type SecretKind = \"secret\" | \"configmap\";\n\n/** Toggle options: the two resource kinds plus the inline-literal mode. */\nexport type SecretValueSource = SecretKind | \"value\";\n\n/** One key's mid-masked preview. `value` is already masked by the consumer. */\nexport type KeyPreview = { key: string; value: string };\n\n/**\n * The selector's value: either a {kind,name,key} reference into a Secret /\n * ConfigMap, or a static inline literal ({kind:\"value\", value}).\n */\nexport type SecretKeyValue =\n  | { kind: SecretKind; name: string; key: string }\n  | { kind: \"value\"; value: string };\n\n/** A named secret/configmap and its data key names (values never returned). */\nexport type SecretResource = { name: string; keys?: string[] };\n\nexport type SecretKeySelectorProps = {\n  value: SecretKeyValue | undefined;\n  onChange: (next: SecretKeyValue | undefined) => void;\n  /** Loads the named kind's resources (name + data key names). */\n  loadResources: (kind: SecretKind) => Promise<SecretResource[]>;\n  /** Loads mid-masked previews for the named resource's keys. */\n  loadKeyPreview: (kind: SecretKind, name: string) => Promise<KeyPreview[]>;\n  /**\n   * Offer a third \"Value\" toggle for typing a static inline literal. Enabled by\n   * default; pass `false` to restrict the selector to Secret/ConfigMap\n   * references only.\n   */\n  allowLiteral?: boolean;\n  /**\n   * When true, a chosen secret/configmap name absent from the loaded resources,\n   * or a key absent from the chosen resource's keys, is flagged invalid (once\n   * the respective load settles). The reference doesn't exist in the namespace.\n   * The literal \"Value\" mode is never strict-flagged.\n   */\n  strict?: boolean;\n  className?: string;\n};\n\nexport function SecretKeySelector({\n  value,\n  onChange,\n  loadResources,\n  loadKeyPreview,\n  allowLiteral = true,\n  strict = false,\n  className,\n}: SecretKeySelectorProps) {\n  const source: SecretValueSource = value?.kind ?? \"secret\";\n  const isLiteral = source === \"value\";\n  // A literal value carries no resource kind; the loaders default to \"secret\".\n  const refKind: SecretKind = isLiteral ? \"secret\" : source;\n  const selectedName = value && value.kind !== \"value\" ? value.name : \"\";\n  const selectedKey = value && value.kind !== \"value\" ? value.key : \"\";\n  const literalValue = value && value.kind === \"value\" ? value.value : \"\";\n\n  const [resources, setResources] = useState<SecretResource[]>([]);\n  const [resourcesLoading, setResourcesLoading] = useState(false);\n  const [previews, setPreviews] = useState<KeyPreview[]>([]);\n  const [previewLoading, setPreviewLoading] = useState(false);\n\n  useEffect(() => {\n    // Literal mode references no resource, so skip the list fetch entirely.\n    if (isLiteral) return;\n    let cancelled = false;\n    setResourcesLoading(true);\n    loadResources(refKind)\n      .then((res) => !cancelled && setResources(res))\n      .finally(() => !cancelled && setResourcesLoading(false));\n    return () => {\n      cancelled = true;\n    };\n  }, [loadResources, refKind, isLiteral]);\n\n  useEffect(() => {\n    if (!selectedName) {\n      setPreviews([]);\n      return;\n    }\n    let cancelled = false;\n    setPreviewLoading(true);\n    loadKeyPreview(refKind, selectedName)\n      .then((res) => !cancelled && setPreviews(res))\n      .catch(() => !cancelled && setPreviews([]))\n      .finally(() => !cancelled && setPreviewLoading(false));\n    return () => {\n      cancelled = true;\n    };\n  }, [loadKeyPreview, refKind, selectedName]);\n\n  const nameOptions = useMemo<ComboboxOption[]>(\n    () => resources.map((r) => ({ value: r.name, label: r.name })),\n    [resources],\n  );\n  const selectedResource = useMemo(\n    () => resources.find((r) => r.name === selectedName),\n    [resources, selectedName],\n  );\n  const keyOptions = useMemo(\n    () => buildKeyOptions(selectedResource?.keys ?? [], previews, selectedKey),\n    [selectedResource, selectedKey, previews],\n  );\n\n  // Strict validity: the name is invalid when it names no loaded resource; the\n  // key is invalid when, with a resolved resource, it isn't one of that\n  // resource's keys. The key list comes from the resource list (not previews),\n  // so both are gated on resourcesLoading only.\n  const nameInvalid = strict && !!selectedName && !resourcesLoading && !selectedResource;\n  const keyInvalid =\n    strict &&\n    !!selectedKey &&\n    !!selectedResource &&\n    !resourcesLoading &&\n    !(selectedResource.keys ?? []).includes(selectedKey);\n\n  // Switching source resets the selection: a resource kind clears name+key; the\n  // literal mode seeds an empty string (so onChange emits a value-kind value).\n  const setSource = (next: SecretValueSource) =>\n    onChange(next === \"value\" ? { kind: \"value\", value: \"\" } : { kind: next, name: \"\", key: \"\" });\n  const setName = (name: string) =>\n    onChange(name ? { kind: refKind, name, key: selectedKey } : undefined);\n  const setKey = (key: string) =>\n    selectedName ? onChange({ kind: refKind, name: selectedName, key }) : undefined;\n  const setLiteral = (v: string) => onChange({ kind: \"value\", value: v });\n\n  const sources: SecretValueSource[] = allowLiteral\n    ? [\"secret\", \"configmap\", \"value\"]\n    : [\"secret\", \"configmap\"];\n\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <div className=\"flex shrink-0 overflow-hidden rounded border border-border text-xs\">\n        {sources.map((k) => {\n          const Glyph = SOURCE_ICON[k];\n          return (\n            <button\n              key={k}\n              type=\"button\"\n              onClick={() => setSource(k)}\n              className={cn(\n                \"flex items-center gap-1 whitespace-nowrap px-2 py-1\",\n                source === k\n                  ? \"bg-primary text-primary-foreground\"\n                  : \"bg-muted text-muted-foreground hover:bg-accent\",\n              )}\n            >\n              <Glyph className=\"h-3.5 w-3.5\" />\n              {SOURCE_LABEL[k]}\n            </button>\n          );\n        })}\n      </div>\n      {isLiteral ? (\n        <input\n          type=\"text\"\n          value={literalValue}\n          onChange={(e) => setLiteral(e.target.value)}\n          placeholder=\"Static value…\"\n          className={cn(\n            \"h-control-h min-w-0 flex-1 rounded border border-input bg-background px-control-px text-sm\",\n            \"outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n          )}\n        />\n      ) : (\n        <>\n          <div className=\"w-44 shrink-0\">\n            <Combobox\n              options={nameOptions}\n              value={selectedName}\n              onChange={setName}\n              allowCustomValue\n              loading={resourcesLoading}\n              invalid={nameInvalid}\n              placeholder={`Select ${refKind}…`}\n            />\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <Combobox\n              options={keyOptions}\n              value={selectedKey}\n              onChange={setKey}\n              allowCustomValue\n              loading={previewLoading}\n              invalid={keyInvalid}\n              placeholder={selectedName ? \"Key…\" : \"—\"}\n            />\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\n// Icons share a className-only call shape; the flanksource FCs carry extra\n// static metadata that doesn't unify with ComponentType, so type the slot as a\n// plain render function instead.\nconst SOURCE_ICON: Record<SecretValueSource, (p: { className?: string }) => ReactNode> = {\n  secret: K8SSecret,\n  configmap: K8SConfigmap,\n  value: UiEdit,\n};\n\nconst SOURCE_LABEL: Record<SecretValueSource, string> = {\n  secret: \"Secret\",\n  configmap: \"ConfigMap\",\n  value: \"Value\",\n};\n\n// buildKeyOptions labels each key with its mid-masked preview value when one is\n// available. A selected key absent from the list is pinned so the selection\n// stays visible.\nfunction buildKeyOptions(\n  keys: string[],\n  previews: KeyPreview[],\n  selectedKey: string,\n): ComboboxOption[] {\n  const masked = new Map(previews.map((p) => [p.key, p.value]));\n  const base = keys.map((k) => ({\n    value: k,\n    label: masked.has(k) ? `${k} — ${masked.get(k)}` : k,\n  }));\n  if (selectedKey && !base.some((o) => o.value === selectedKey)) {\n    return [{ value: selectedKey, label: selectedKey }, ...base];\n  }\n  return base;\n}\n"],"names":[],"mappings":"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"}

package/dist/components/TreePickerField.cjs

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactDom = require("react-dom");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const Tree = require("../data/Tree.cjs");
+const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
+const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
+const PANEL_MAX_WIDTH_PX = 480;
+function TreePickerField({
+  roots,
+  getKey,
+  getChildren,
+  renderRow,
+  getSearchText,
+  defaultOpen,
+  isSelectable,
+  onSelect,
+  label,
+  placeholder = "Select…",
+  disabled,
+  size,
+  className,
+  triggerClassName,
+  panelClassName
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [pos, setPos] = react.useState(
+    null
+  );
+  const rootRef = react.useRef(null);
+  const anchorRef = react.useRef(null);
+  const panelRef = react.useRef(null);
+  react.useLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    const update = () => {
+      const anchor = anchorRef.current;
+      if (!anchor) return;
+      const rect = anchor.getBoundingClientRect();
+      const viewportCap = window.innerWidth - rect.left - 8;
+      const maxWidth = Math.max(rect.width, Math.min(PANEL_MAX_WIDTH_PX, viewportCap));
+      setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width, maxWidth });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open]);
+  react.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      var _a, _b;
+      const target = e.target;
+      if (!((_a = rootRef.current) == null ? void 0 : _a.contains(target)) && !((_b = panelRef.current) == null ? void 0 : _b.contains(target))) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: utils.cn("relative", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: anchorRef,
+        type: "button",
+        disabled,
+        "aria-haspopup": "tree",
+        "aria-expanded": open,
+        onClick: () => setOpen((o) => !o),
+        className: utils.cn(
+          "relative flex w-full items-center rounded-md border border-input bg-background text-left text-foreground",
+          size ? jsonSchemaFormSize.inputSizeClass[size] : "h-control-h px-control-px text-sm",
+          "pr-8",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          triggerClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("min-w-0 flex-1 truncate", label == null && "text-muted-foreground"), children: label ?? placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-0 flex h-full items-center px-2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronDown.UiChevronDown, className: "text-xs" }) })
+        ]
+      }
+    ),
+    open && pos && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: panelRef,
+          "data-slot": "tree-picker-popup",
+          style: {
+            position: "fixed",
+            top: pos.top,
+            left: pos.left,
+            width: pos.width,
+            maxWidth: pos.maxWidth
+          },
+          className: utils.cn(
+            "z-50 flex max-h-[60vh] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md",
+            panelClassName
+          ),
+          onKeyDown: (e) => {
+            if (e.key === "Escape") setOpen(false);
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Tree.Tree,
+            {
+              roots,
+              getKey,
+              getChildren,
+              renderRow,
+              ...getSearchText ? { getSearchText } : {},
+              ...defaultOpen ? { defaultOpen } : {},
+              onSelect: (node) => {
+                if (!isSelectable || isSelectable(node)) {
+                  onSelect(node);
+                  setOpen(false);
+                }
+              }
+            }
+          ) })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+exports.TreePickerField = TreePickerField;
+//# sourceMappingURL=TreePickerField.cjs.map

package/dist/components/TreePickerField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreePickerField.cjs","sources":["../../src/components/TreePickerField.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { Tree, type TreeProps } from \"../data/Tree\";\nimport { inputSizeClass, type FormSize } from \"./json-schema-form-size\";\n\n// Upper bound the open panel grows to so wide trees show full labels before\n// truncating; the panel is never narrower than the trigger.\nconst PANEL_MAX_WIDTH_PX = 480;\n\nexport interface TreePickerFieldProps<T> {\n  /** Root nodes of the tree to browse. */\n  roots: T[];\n  getKey: (node: T) => string | number;\n  getChildren: (node: T) => T[] | undefined;\n  renderRow: TreeProps<T>[\"renderRow\"];\n  getSearchText?: (node: T) => string;\n  defaultOpen?: (node: T, depth: number) => boolean;\n  /**\n   * Decides which nodes commit a selection when clicked. A click on a\n   * non-selectable node still toggles its expansion (it never closes the\n   * picker). Defaults to every node selectable.\n   */\n  isSelectable?: (node: T) => boolean;\n  /** Fires for a selectable node, then closes the dropdown. */\n  onSelect: (node: T) => void;\n  /** Current-selection display in the trigger; falls back to `placeholder`. */\n  label?: ReactNode;\n  placeholder?: string;\n  disabled?: boolean;\n  size?: FormSize;\n  className?: string;\n  triggerClassName?: string;\n  panelClassName?: string;\n}\n\n// TreePickerField is a form-field-styled trigger (matching Combobox's closed\n// input) that opens a portal-anchored dropdown holding a Tree. The dropdown is\n// positioned with fixed coordinates measured from the trigger so it escapes any\n// overflow-hidden / scroll ancestor (e.g. a modal body). A click on a selectable\n// node commits and closes; a non-selectable node only toggles expansion.\nexport function TreePickerField<T>({\n  roots,\n  getKey,\n  getChildren,\n  renderRow,\n  getSearchText,\n  defaultOpen,\n  isSelectable,\n  onSelect,\n  label,\n  placeholder = \"Select…\",\n  disabled,\n  size,\n  className,\n  triggerClassName,\n  panelClassName,\n}: TreePickerFieldProps<T>) {\n  const [open, setOpen] = useState(false);\n  const [pos, setPos] = useState<{ top: number; left: number; width: number; maxWidth: number } | null>(\n    null,\n  );\n  const rootRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  // Position the portaled panel from the trigger rect, repositioning while open.\n  useLayoutEffect(() => {\n    if (!open) {\n      setPos(null);\n      return;\n    }\n    const update = () => {\n      const anchor = anchorRef.current;\n      if (!anchor) return;\n      const rect = anchor.getBoundingClientRect();\n      const viewportCap = window.innerWidth - rect.left - 8;\n      const maxWidth = Math.max(rect.width, Math.min(PANEL_MAX_WIDTH_PX, viewportCap));\n      setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width, maxWidth });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open]);\n\n  // Dismiss on an outside pointer-down (the trigger and panel are exempt).\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (!rootRef.current?.contains(target) && !panelRef.current?.contains(target)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", onPointerDown);\n    return () => document.removeEventListener(\"mousedown\", onPointerDown);\n  }, [open]);\n\n  return (\n    <div ref={rootRef} className={cn(\"relative\", className)}>\n      <button\n        ref={anchorRef}\n        type=\"button\"\n        disabled={disabled}\n        aria-haspopup=\"tree\"\n        aria-expanded={open}\n        onClick={() => setOpen((o) => !o)}\n        className={cn(\n          \"relative flex w-full items-center rounded-md border border-input bg-background text-left text-foreground\",\n          size ? inputSizeClass[size] : \"h-control-h px-control-px text-sm\",\n          \"pr-8\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          triggerClassName,\n        )}\n      >\n        <span className={cn(\"min-w-0 flex-1 truncate\", label == null && \"text-muted-foreground\")}>\n          {label ?? placeholder}\n        </span>\n        <span className=\"pointer-events-none absolute right-0 flex h-full items-center px-2 text-muted-foreground\">\n          <Icon icon={UiChevronDown} className=\"text-xs\" />\n        </span>\n      </button>\n\n      {open &&\n        pos &&\n        createPortal(\n          <div\n            ref={panelRef}\n            data-slot=\"tree-picker-popup\"\n            style={{\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              width: pos.width,\n              maxWidth: pos.maxWidth,\n            }}\n            className={cn(\n              \"z-50 flex max-h-[60vh] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md\",\n              panelClassName,\n            )}\n            onKeyDown={(e) => {\n              if (e.key === \"Escape\") setOpen(false);\n            }}\n          >\n            <div className=\"min-h-0 flex-1 overflow-auto\">\n              <Tree<T>\n                roots={roots}\n                getKey={getKey}\n                getChildren={getChildren}\n                renderRow={renderRow}\n                {...(getSearchText ? { getSearchText } : {})}\n                {...(defaultOpen ? { defaultOpen } : {})}\n                onSelect={(node) => {\n                  if (!isSelectable || isSelectable(node)) {\n                    onSelect(node);\n                    setOpen(false);\n                  }\n                }}\n              />\n            </div>\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useLayoutEffect","useEffect","jsxs","cn","inputSizeClass","jsx","Icon","UiChevronDown","createPortal","Tree"],"mappings":"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"}

package/dist/components/TreePickerField.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { TreeProps } from '../data/Tree';
+import { FormSize } from './json-schema-form-size';
+export interface TreePickerFieldProps<T> {
+    /** Root nodes of the tree to browse. */
+    roots: T[];
+    getKey: (node: T) => string | number;
+    getChildren: (node: T) => T[] | undefined;
+    renderRow: TreeProps<T>["renderRow"];
+    getSearchText?: (node: T) => string;
+    defaultOpen?: (node: T, depth: number) => boolean;
+    /**
+     * Decides which nodes commit a selection when clicked. A click on a
+     * non-selectable node still toggles its expansion (it never closes the
+     * picker). Defaults to every node selectable.
+     */
+    isSelectable?: (node: T) => boolean;
+    /** Fires for a selectable node, then closes the dropdown. */
+    onSelect: (node: T) => void;
+    /** Current-selection display in the trigger; falls back to `placeholder`. */
+    label?: ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: FormSize;
+    className?: string;
+    triggerClassName?: string;
+    panelClassName?: string;
+}
+export declare function TreePickerField<T>({ roots, getKey, getChildren, renderRow, getSearchText, defaultOpen, isSelectable, onSelect, label, placeholder, disabled, size, className, triggerClassName, panelClassName, }: TreePickerFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TreePickerField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreePickerField.d.ts","sourceRoot":"","sources":["../../src/components/TreePickerField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrF,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAMxE,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,wCAAwC;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACrC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,CAAC;IAC1C,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAClD;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC,6DAA6D;IAC7D,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAOD,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,KAAK,EACL,MAAM,EACN,WAAW,EACX,SAAS,EACT,aAAa,EACb,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,WAAuB,EACvB,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,cAAc,GACf,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAiHzB"}

package/dist/components/TreePickerField.js

@@ -0,0 +1,137 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useLayoutEffect, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+import { Tree } from "../data/Tree.js";
+import { inputSizeClass } from "./json-schema-form-size.js";
+import { UiChevronDown } from "../icons/components/UiChevronDown.js";
+const PANEL_MAX_WIDTH_PX = 480;
+function TreePickerField({
+  roots,
+  getKey,
+  getChildren,
+  renderRow,
+  getSearchText,
+  defaultOpen,
+  isSelectable,
+  onSelect,
+  label,
+  placeholder = "Select…",
+  disabled,
+  size,
+  className,
+  triggerClassName,
+  panelClassName
+}) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState(
+    null
+  );
+  const rootRef = useRef(null);
+  const anchorRef = useRef(null);
+  const panelRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    const update = () => {
+      const anchor = anchorRef.current;
+      if (!anchor) return;
+      const rect = anchor.getBoundingClientRect();
+      const viewportCap = window.innerWidth - rect.left - 8;
+      const maxWidth = Math.max(rect.width, Math.min(PANEL_MAX_WIDTH_PX, viewportCap));
+      setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width, maxWidth });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      var _a, _b;
+      const target = e.target;
+      if (!((_a = rootRef.current) == null ? void 0 : _a.contains(target)) && !((_b = panelRef.current) == null ? void 0 : _b.contains(target))) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: anchorRef,
+        type: "button",
+        disabled,
+        "aria-haspopup": "tree",
+        "aria-expanded": open,
+        onClick: () => setOpen((o) => !o),
+        className: cn(
+          "relative flex w-full items-center rounded-md border border-input bg-background text-left text-foreground",
+          size ? inputSizeClass[size] : "h-control-h px-control-px text-sm",
+          "pr-8",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          triggerClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate", label == null && "text-muted-foreground"), children: label ?? placeholder }),
+          /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-0 flex h-full items-center px-2 text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { icon: UiChevronDown, className: "text-xs" }) })
+        ]
+      }
+    ),
+    open && pos && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: panelRef,
+          "data-slot": "tree-picker-popup",
+          style: {
+            position: "fixed",
+            top: pos.top,
+            left: pos.left,
+            width: pos.width,
+            maxWidth: pos.maxWidth
+          },
+          className: cn(
+            "z-50 flex max-h-[60vh] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md",
+            panelClassName
+          ),
+          onKeyDown: (e) => {
+            if (e.key === "Escape") setOpen(false);
+          },
+          children: /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx(
+            Tree,
+            {
+              roots,
+              getKey,
+              getChildren,
+              renderRow,
+              ...getSearchText ? { getSearchText } : {},
+              ...defaultOpen ? { defaultOpen } : {},
+              onSelect: (node) => {
+                if (!isSelectable || isSelectable(node)) {
+                  onSelect(node);
+                  setOpen(false);
+                }
+              }
+            }
+          ) })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+export {
+  TreePickerField
+};
+//# sourceMappingURL=TreePickerField.js.map

package/dist/components/TreePickerField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreePickerField.js","sources":["../../src/components/TreePickerField.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { Tree, type TreeProps } from \"../data/Tree\";\nimport { inputSizeClass, type FormSize } from \"./json-schema-form-size\";\n\n// Upper bound the open panel grows to so wide trees show full labels before\n// truncating; the panel is never narrower than the trigger.\nconst PANEL_MAX_WIDTH_PX = 480;\n\nexport interface TreePickerFieldProps<T> {\n  /** Root nodes of the tree to browse. */\n  roots: T[];\n  getKey: (node: T) => string | number;\n  getChildren: (node: T) => T[] | undefined;\n  renderRow: TreeProps<T>[\"renderRow\"];\n  getSearchText?: (node: T) => string;\n  defaultOpen?: (node: T, depth: number) => boolean;\n  /**\n   * Decides which nodes commit a selection when clicked. A click on a\n   * non-selectable node still toggles its expansion (it never closes the\n   * picker). Defaults to every node selectable.\n   */\n  isSelectable?: (node: T) => boolean;\n  /** Fires for a selectable node, then closes the dropdown. */\n  onSelect: (node: T) => void;\n  /** Current-selection display in the trigger; falls back to `placeholder`. */\n  label?: ReactNode;\n  placeholder?: string;\n  disabled?: boolean;\n  size?: FormSize;\n  className?: string;\n  triggerClassName?: string;\n  panelClassName?: string;\n}\n\n// TreePickerField is a form-field-styled trigger (matching Combobox's closed\n// input) that opens a portal-anchored dropdown holding a Tree. The dropdown is\n// positioned with fixed coordinates measured from the trigger so it escapes any\n// overflow-hidden / scroll ancestor (e.g. a modal body). A click on a selectable\n// node commits and closes; a non-selectable node only toggles expansion.\nexport function TreePickerField<T>({\n  roots,\n  getKey,\n  getChildren,\n  renderRow,\n  getSearchText,\n  defaultOpen,\n  isSelectable,\n  onSelect,\n  label,\n  placeholder = \"Select…\",\n  disabled,\n  size,\n  className,\n  triggerClassName,\n  panelClassName,\n}: TreePickerFieldProps<T>) {\n  const [open, setOpen] = useState(false);\n  const [pos, setPos] = useState<{ top: number; left: number; width: number; maxWidth: number } | null>(\n    null,\n  );\n  const rootRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  // Position the portaled panel from the trigger rect, repositioning while open.\n  useLayoutEffect(() => {\n    if (!open) {\n      setPos(null);\n      return;\n    }\n    const update = () => {\n      const anchor = anchorRef.current;\n      if (!anchor) return;\n      const rect = anchor.getBoundingClientRect();\n      const viewportCap = window.innerWidth - rect.left - 8;\n      const maxWidth = Math.max(rect.width, Math.min(PANEL_MAX_WIDTH_PX, viewportCap));\n      setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width, maxWidth });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open]);\n\n  // Dismiss on an outside pointer-down (the trigger and panel are exempt).\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (!rootRef.current?.contains(target) && !panelRef.current?.contains(target)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", onPointerDown);\n    return () => document.removeEventListener(\"mousedown\", onPointerDown);\n  }, [open]);\n\n  return (\n    <div ref={rootRef} className={cn(\"relative\", className)}>\n      <button\n        ref={anchorRef}\n        type=\"button\"\n        disabled={disabled}\n        aria-haspopup=\"tree\"\n        aria-expanded={open}\n        onClick={() => setOpen((o) => !o)}\n        className={cn(\n          \"relative flex w-full items-center rounded-md border border-input bg-background text-left text-foreground\",\n          size ? inputSizeClass[size] : \"h-control-h px-control-px text-sm\",\n          \"pr-8\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          triggerClassName,\n        )}\n      >\n        <span className={cn(\"min-w-0 flex-1 truncate\", label == null && \"text-muted-foreground\")}>\n          {label ?? placeholder}\n        </span>\n        <span className=\"pointer-events-none absolute right-0 flex h-full items-center px-2 text-muted-foreground\">\n          <Icon icon={UiChevronDown} className=\"text-xs\" />\n        </span>\n      </button>\n\n      {open &&\n        pos &&\n        createPortal(\n          <div\n            ref={panelRef}\n            data-slot=\"tree-picker-popup\"\n            style={{\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              width: pos.width,\n              maxWidth: pos.maxWidth,\n            }}\n            className={cn(\n              \"z-50 flex max-h-[60vh] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md\",\n              panelClassName,\n            )}\n            onKeyDown={(e) => {\n              if (e.key === \"Escape\") setOpen(false);\n            }}\n          >\n            <div className=\"min-h-0 flex-1 overflow-auto\">\n              <Tree<T>\n                roots={roots}\n                getKey={getKey}\n                getChildren={getChildren}\n                renderRow={renderRow}\n                {...(getSearchText ? { getSearchText } : {})}\n                {...(defaultOpen ? { defaultOpen } : {})}\n                onSelect={(node) => {\n                  if (!isSelectable || isSelectable(node)) {\n                    onSelect(node);\n                    setOpen(false);\n                  }\n                }}\n              />\n            </div>\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}