@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-IHTAKKTK.js

@@ -0,0 +1,264 @@
+"use client";
+import {
+  RepositoryRefInput
+} from "./chunk-D4BDD427.js";
+import {
+  Input
+} from "./chunk-VPM3TXFC.js";
+import {
+  MetaChip
+} from "./chunk-SS3N75VI.js";
+import {
+  userErrorText
+} from "./chunk-O4OOG3D6.js";
+import {
+  Button
+} from "./chunk-7QQN3KNP.js";
+
+// src/app/components/manual-repository-editor.tsx
+import { CheckIcon, Loader2Icon, PencilIcon, Trash2Icon, XIcon } from "lucide-react";
+import { useEffect, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ManualRepositoryEditor(props) {
+  const [editing, setEditing] = useState(props.repository.attached === false);
+  const [url, setUrl] = useState(props.repository.url);
+  const [ref, setRef] = useState(props.repository.ref);
+  const [checking, setChecking] = useState(false);
+  const [error, setError] = useState(null);
+  const [warning, setWarning] = useState(null);
+  const [confirmRemove, setConfirmRemove] = useState(false);
+  useEffect(() => {
+    if (editing) return;
+    setUrl(props.repository.url);
+    setRef(props.repository.ref);
+  }, [editing, props.repository.ref, props.repository.url]);
+  useEffect(() => {
+    if (props.repository.attached === true) setEditing(false);
+  }, [props.repository.attached]);
+  const onUpdateRef = useRef(props.onUpdate);
+  useInsertionEffect(() => {
+    onUpdateRef.current = props.onUpdate;
+  }, [props.onUpdate]);
+  const editingAttached = editing && props.repository.attached === true && !props.mounted;
+  useLayoutEffect(() => {
+    if (!editingAttached) return;
+    onUpdateRef.current({ editing: true });
+    return () => onUpdateRef.current({ editing: void 0 });
+  }, [editingAttached]);
+  function updateDraft(patch) {
+    if (props.repository.attached === false) props.onUpdate({ ...patch, attached: false });
+  }
+  async function attach() {
+    if (checking || props.pending || props.mounted) return;
+    const reattaching = props.repository.attached === true;
+    setChecking(true);
+    setError(null);
+    setWarning(null);
+    try {
+      const result = await props.onAttach({
+        ...props.repository,
+        url,
+        ref,
+        attached: false
+      });
+      setWarning(result?.warning ?? null);
+      if (reattaching) setEditing(false);
+    } catch (caught) {
+      setError(userErrorText(caught));
+    } finally {
+      setChecking(false);
+    }
+  }
+  if (props.mounted || props.repository.attached === true && !editing) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 rounded-lg border border-border bg-bg/25 p-2.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-medium text-fg", children: props.repository.url }),
+          /* @__PURE__ */ jsxs("div", { className: "truncate text-2xs text-fg-subtle", children: [
+            "Ref ",
+            props.repository.ref
+          ] })
+        ] }),
+        props.mounted ? /* @__PURE__ */ jsx(MetaChip, { dot: "idle", rounded: "full", children: "Mounted" }) : /* @__PURE__ */ jsx(MetaChip, { dot: "running", rounded: "full", children: "Attached" })
+      ] }),
+      !props.mounted ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "xs",
+            onClick: () => {
+              setEditing(true);
+              setError(null);
+              setWarning(null);
+            },
+            disabled: props.pending,
+            children: [
+              /* @__PURE__ */ jsx(PencilIcon, { className: "size-3" }),
+              " Edit"
+            ]
+          }
+        ),
+        confirmRemove ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "destructive",
+              size: "xs",
+              onClick: props.onRemove,
+              disabled: props.pending,
+              children: "Remove"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "xs",
+              onClick: () => setConfirmRemove(false),
+              disabled: props.pending,
+              children: "Cancel"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "xs",
+            onClick: () => setConfirmRemove(true),
+            disabled: props.pending,
+            children: [
+              /* @__PURE__ */ jsx(Trash2Icon, { className: "size-3" }),
+              " Remove"
+            ]
+          }
+        )
+      ] }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "space-y-2 rounded-lg border border-border bg-bg/25 p-2.5",
+      onKeyDown: (event) => {
+        if (event.key === "Enter" && event.target instanceof HTMLInputElement) {
+          event.preventDefault();
+          void attach();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2 sm:grid-cols-[minmax(0,1fr)_minmax(7rem,0.42fr)]", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: url,
+              onChange: (event) => {
+                setUrl(event.target.value);
+                setError(null);
+                updateDraft({ url: event.target.value });
+              },
+              disabled: props.pending || checking,
+              placeholder: "https://github.com/org/repo",
+              "aria-label": "Repository URL",
+              className: "h-8 text-xs"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RepositoryRefInput,
+            {
+              value: ref,
+              defaultRef: "branch, tag, or SHA",
+              label: "Repository ref",
+              disabled: props.pending || checking,
+              onChange: (value) => {
+                setRef(value);
+                setError(null);
+                updateDraft({ ref: value });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              size: "xs",
+              onClick: () => void attach(),
+              disabled: props.pending || checking,
+              children: [
+                checking ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3" }),
+                checking ? "Checking" : "Attach"
+              ]
+            }
+          ),
+          props.repository.attached === true ? /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "xs",
+              onClick: () => {
+                setEditing(false);
+                setUrl(props.repository.url);
+                setRef(props.repository.ref);
+                setError(null);
+              },
+              children: [
+                /* @__PURE__ */ jsx(XIcon, { className: "size-3" }),
+                " Cancel edit"
+              ]
+            }
+          ) : null,
+          confirmRemove ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "destructive",
+                size: "xs",
+                onClick: props.onRemove,
+                disabled: props.pending || checking,
+                children: "Remove"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "xs",
+                onClick: () => setConfirmRemove(false),
+                disabled: props.pending || checking,
+                children: "Cancel"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "xs",
+              onClick: () => setConfirmRemove(true),
+              disabled: props.pending || checking,
+              children: [
+                /* @__PURE__ */ jsx(Trash2Icon, { className: "size-3" }),
+                " Remove"
+              ]
+            }
+          )
+        ] }),
+        error ? /* @__PURE__ */ jsx("p", { className: "text-xs leading-5 text-status-failed", role: "alert", children: error }) : warning ? /* @__PURE__ */ jsx("p", { className: "text-xs leading-5 text-status-waiting", children: warning }) : null
+      ]
+    }
+  );
+}
+
+export {
+  ManualRepositoryEditor
+};
+//# sourceMappingURL=chunk-IHTAKKTK.js.map

package/dist/chunk-IKXNLWAL.js

@@ -0,0 +1,205 @@
+"use client";
+import {
+  SectionCardContext
+} from "./chunk-ZMBJPN4T.js";
+import {
+  splitErrorText
+} from "./chunk-FYWT2O76.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+
+// src/ui/error-message.tsx
+import { CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon } from "lucide-react";
+import { useContext, useEffect, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ErrorMessage({
+  title,
+  children,
+  action,
+  reference,
+  details,
+  defaultDetailsOpen = false,
+  variant = "block",
+  align = "start",
+  announce = false,
+  className
+}) {
+  if (typeof children === "string") {
+    const parts = splitErrorText(children);
+    children = parts.text;
+    reference ??= parts.reference;
+  }
+  const facts = [
+    ...details ?? [],
+    ...reference ? [{ label: "Reference", value: reference, copyable: true }] : []
+  ];
+  const role = announce ? "alert" : void 0;
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role,
+        "data-slot": "error-message",
+        "data-variant": "inline",
+        className: cn("flex min-w-0 flex-col gap-1", className),
+        children: [
+          /* @__PURE__ */ jsxs("p", { className: "flex min-w-0 items-start gap-2 text-sm leading-5 text-fg", children: [
+            /* @__PURE__ */ jsx(CircleAlertIcon, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0 text-danger" }),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+              title,
+              children ? /* @__PURE__ */ jsxs("span", { className: "text-fg-muted", children: [
+                " ",
+                children
+              ] }) : null,
+              action ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "inline-flex align-baseline whitespace-nowrap", children: action })
+              ] }) : null
+            ] })
+          ] }),
+          facts.length > 0 ? /* @__PURE__ */ jsx("div", { className: "pl-6", children: /* @__PURE__ */ jsx(TechnicalDetails, { facts, defaultOpen: defaultDetailsOpen }) }) : null
+        ]
+      }
+    );
+  }
+  const centered = align === "center";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role,
+      "data-slot": "error-message",
+      "data-variant": "block",
+      className: cn(
+        "flex min-w-0 flex-col",
+        centered ? "items-center py-10 text-center" : "items-start",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "grid size-8 shrink-0 place-items-center rounded-md border border-danger/25 bg-danger/10 text-danger",
+              "mb-3"
+            ),
+            children: /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 font-medium text-fg", children: title }),
+        children ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-1 text-xs leading-4.5 text-fg-muted",
+              centered && "max-w-[48ch] text-balance"
+            ),
+            children
+          }
+        ) : null,
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: action }) : null,
+        facts.length > 0 ? /* @__PURE__ */ jsx("div", { className: cn("mt-3 w-full", centered && "flex max-w-sm flex-col items-center"), children: /* @__PURE__ */ jsx(TechnicalDetails, { facts, align, defaultOpen: defaultDetailsOpen }) }) : null
+      ]
+    }
+  );
+}
+function TechnicalDetails({
+  facts,
+  align = "start",
+  defaultOpen = false
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const panelId = useId();
+  const inCard = useContext(SectionCardContext);
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", align === "center" && "flex flex-col items-center"), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": panelId,
+        onClick: () => setOpen((value) => !value),
+        className: "-mx-1.5 inline-flex h-7 items-center gap-1 rounded-md px-1.5 text-xs font-medium text-fg-subtle transition-colors duration-[120ms] hover:text-fg pointer-coarse:h-11",
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronRightIcon,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "size-3.5 transition-transform duration-[120ms] motion-reduce:transition-none",
+                open && "rotate-90"
+              )
+            }
+          ),
+          "Technical details"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "dl",
+      {
+        id: panelId,
+        hidden: !open,
+        className: cn(
+          "mt-1 grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-left text-xs leading-4.5",
+          inCard ? "py-1 pl-5" : "rounded-md border border-border bg-surface-2 px-3 py-2.5"
+        ),
+        children: facts.map((fact) => /* @__PURE__ */ jsxs("div", { className: "col-span-2 grid grid-cols-subgrid items-center", children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-fg-subtle", children: fact.label }),
+          /* @__PURE__ */ jsxs("dd", { className: "flex min-w-0 items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "min-w-0",
+                  fact.copyable ? "font-mono wrap-anywhere text-fg" : "wrap-break-word text-fg-muted"
+                ),
+                children: fact.value
+              }
+            ),
+            fact.copyable ? /* @__PURE__ */ jsx(CopyButton, { value: fact.value, label: fact.label }) : null
+          ] })
+        ] }, fact.label))
+      }
+    )
+  ] });
+}
+function CopyButton({ value, label }) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef(null);
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": copied ? `${label} copied` : `Copy ${label.toLowerCase()}`,
+      onClick: () => {
+        void navigator.clipboard?.writeText(value).then(
+          () => {
+            setCopied(true);
+            if (timer.current) clearTimeout(timer.current);
+            timer.current = setTimeout(() => setCopied(false), 1600);
+          },
+          () => setCopied(false)
+        );
+      },
+      className: "inline-grid size-6 shrink-0 place-items-center rounded-md text-fg-subtle transition-colors duration-[120ms] hover:bg-surface-3 hover:text-fg pointer-coarse:size-11",
+      children: [
+        copied ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true", className: "size-3.5 text-status-idle" }) : /* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": "true", className: "size-3.5" }),
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? "Copied" : "" })
+      ]
+    }
+  );
+}
+
+export {
+  ErrorMessage,
+  TechnicalDetails
+};
+//# sourceMappingURL=chunk-IKXNLWAL.js.map

package/dist/chunk-IKXNLWAL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/error-message.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon } from \"lucide-react\";\nimport { useContext, useEffect, useId, useRef, useState, type ReactNode } from \"react\";\n\nimport { SectionCardContext } from \"./section-variant\";\nimport { splitErrorText } from \"./error-reference\";\nimport { cn } from \"../lib/cn\";\n\n/* ----------------------------------------------------------------------------\n   ErrorMessage (design brief 6 and 7, \"Also build\").\n\n   What happened, then what to do. Never the raw \"Opengeni API 404 ...\n   Reference: <uuid>\" string: the request reference and other system facts\n   live behind one collapsed \"Technical details\", with Copy.\n\n   - \"inline\": one line inside a row, section or field group.\n   - \"block\":  replaces the content of a section or list that failed to load.\n   -------------------------------------------------------------------------- */\n\nexport interface ErrorDetail {\n  label: string;\n  value: string;\n  /** Render mono with a Copy button (references, IDs). */\n  copyable?: boolean | undefined;\n}\n\nexport interface ErrorMessageProps {\n  /** What happened, in product words: \"Couldn't load this connection's tools.\" */\n  title: ReactNode;\n  /** What to do next, when it isn't just \"Try again\". */\n  children?: ReactNode | undefined;\n  /** Usually a small \"Try again\" button; for inline, a link-style button. */\n  action?: ReactNode | undefined;\n  /** The request reference. Goes into Technical details with Copy. */\n  reference?: string | undefined;\n  /** Other system facts for Technical details: status code, endpoint. */\n  details?: ErrorDetail[] | undefined;\n  /** Start with Technical details open. */\n  defaultDetailsOpen?: boolean | undefined;\n  variant?: \"inline\" | \"block\" | undefined;\n  /** \"center\" for a failed list or page area, \"start\" inside a section. */\n  align?: \"start\" | \"center\" | undefined;\n  /**\n   * Announce it to screen readers as it appears. Use for errors caused by\n   * something the person just did; leave off for errors present on load.\n   */\n  announce?: boolean | undefined;\n  className?: string | undefined;\n}\n\nexport function ErrorMessage({\n  title,\n  children,\n  action,\n  reference,\n  details,\n  defaultDetailsOpen = false,\n  variant = \"block\",\n  align = \"start\",\n  announce = false,\n  className,\n}: ErrorMessageProps) {\n  // Text from `userErrorText` may end with an unexpected failure's\n  // \"Reference: <id>.\": it belongs in Technical details, not the sentence.\n  if (typeof children === \"string\") {\n    const parts = splitErrorText(children);\n    children = parts.text;\n    reference ??= parts.reference;\n  }\n  const facts: ErrorDetail[] = [\n    ...(details ?? []),\n    ...(reference ? [{ label: \"Reference\", value: reference, copyable: true }] : []),\n  ];\n  const role = announce ? \"alert\" : undefined;\n\n  if (variant === \"inline\") {\n    return (\n      <div\n        role={role}\n        data-slot=\"error-message\"\n        data-variant=\"inline\"\n        className={cn(\"flex min-w-0 flex-col gap-1\", className)}\n      >\n        <p className=\"flex min-w-0 items-start gap-2 text-sm leading-5 text-fg\">\n          <CircleAlertIcon aria-hidden=\"true\" className=\"mt-0.5 size-4 shrink-0 text-danger\" />\n          <span className=\"min-w-0\">\n            {title}\n            {children ? <span className=\"text-fg-muted\"> {children}</span> : null}\n            {/* A plain space, not a margin, so a wrapped action lines up with the text. */}\n            {action ? (\n              <>\n                {\" \"}\n                <span className=\"inline-flex align-baseline whitespace-nowrap\">{action}</span>\n              </>\n            ) : null}\n          </span>\n        </p>\n        {facts.length > 0 ? (\n          <div className=\"pl-6\">\n            <TechnicalDetails facts={facts} defaultOpen={defaultDetailsOpen} />\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n\n  const centered = align === \"center\";\n  return (\n    <div\n      role={role}\n      data-slot=\"error-message\"\n      data-variant=\"block\"\n      className={cn(\n        \"flex min-w-0 flex-col\",\n        centered ? \"items-center py-10 text-center\" : \"items-start\",\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"grid size-8 shrink-0 place-items-center rounded-md border border-danger/25 bg-danger/10 text-danger\",\n          \"mb-3\",\n        )}\n      >\n        <CircleAlertIcon className=\"size-4\" />\n      </span>\n      <p className=\"text-sm leading-5 font-medium text-fg\">{title}</p>\n      {children ? (\n        <p\n          className={cn(\n            \"mt-1 text-xs leading-4.5 text-fg-muted\",\n            centered && \"max-w-[48ch] text-balance\",\n          )}\n        >\n          {children}\n        </p>\n      ) : null}\n      {action ? <div className=\"mt-3 flex flex-wrap items-center gap-2\">{action}</div> : null}\n      {facts.length > 0 ? (\n        <div className={cn(\"mt-3 w-full\", centered && \"flex max-w-sm flex-col items-center\")}>\n          <TechnicalDetails facts={facts} align={align} defaultOpen={defaultDetailsOpen} />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** The one collapsed \"Technical details\" line, with Copy on references. */\nexport function TechnicalDetails({\n  facts,\n  align = \"start\",\n  defaultOpen = false,\n}: {\n  facts: ErrorDetail[];\n  align?: \"start\" | \"center\" | undefined;\n  defaultOpen?: boolean | undefined;\n}) {\n  const [open, setOpen] = useState(defaultOpen);\n  const panelId = useId();\n  // Inside a settings card the facts sit on the card: never a box in a box.\n  const inCard = useContext(SectionCardContext);\n  return (\n    <div className={cn(\"min-w-0\", align === \"center\" && \"flex flex-col items-center\")}>\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        aria-controls={panelId}\n        onClick={() => setOpen((value) => !value)}\n        className=\"-mx-1.5 inline-flex h-7 items-center gap-1 rounded-md px-1.5 text-xs font-medium text-fg-subtle transition-colors duration-[120ms] hover:text-fg pointer-coarse:h-11\"\n      >\n        <ChevronRightIcon\n          aria-hidden=\"true\"\n          className={cn(\n            \"size-3.5 transition-transform duration-[120ms] motion-reduce:transition-none\",\n            open && \"rotate-90\",\n          )}\n        />\n        Technical details\n      </button>\n      <dl\n        id={panelId}\n        hidden={!open}\n        className={cn(\n          \"mt-1 grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-left text-xs leading-4.5\",\n          inCard ? \"py-1 pl-5\" : \"rounded-md border border-border bg-surface-2 px-3 py-2.5\",\n        )}\n      >\n        {facts.map((fact) => (\n          <div key={fact.label} className=\"col-span-2 grid grid-cols-subgrid items-center\">\n            <dt className=\"text-fg-subtle\">{fact.label}</dt>\n            <dd className=\"flex min-w-0 items-center gap-1.5\">\n              <span\n                className={cn(\n                  \"min-w-0\",\n                  fact.copyable\n                    ? \"font-mono wrap-anywhere text-fg\"\n                    : \"wrap-break-word text-fg-muted\",\n                )}\n              >\n                {fact.value}\n              </span>\n              {fact.copyable ? <CopyButton value={fact.value} label={fact.label} /> : null}\n            </dd>\n          </div>\n        ))}\n      </dl>\n    </div>\n  );\n}\n\nfunction CopyButton({ value, label }: { value: string; label: string }) {\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(\n    () => () => {\n      if (timer.current) clearTimeout(timer.current);\n    },\n    [],\n  );\n  return (\n    <button\n      type=\"button\"\n      aria-label={copied ? `${label} copied` : `Copy ${label.toLowerCase()}`}\n      onClick={() => {\n        void navigator.clipboard?.writeText(value).then(\n          () => {\n            setCopied(true);\n            if (timer.current) clearTimeout(timer.current);\n            timer.current = setTimeout(() => setCopied(false), 1600);\n          },\n          () => setCopied(false),\n        );\n      }}\n      className=\"inline-grid size-6 shrink-0 place-items-center rounded-md text-fg-subtle transition-colors duration-[120ms] hover:bg-surface-3 hover:text-fg pointer-coarse:size-11\"\n    >\n      {copied ? (\n        <CheckIcon aria-hidden=\"true\" className=\"size-3.5 text-status-idle\" />\n      ) : (\n        <CopyIcon aria-hidden=\"true\" className=\"size-3.5\" />\n      )}\n      <span aria-live=\"polite\" className=\"sr-only\">\n        {copied ? \"Copied\" : \"\"}\n      </span>\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-ILDXWY37.js

@@ -0,0 +1,173 @@
+"use client";
+import {
+  modelListSummary
+} from "./chunk-6VLQB2Q3.js";
+import {
+  useCreditBalance
+} from "./chunk-CUKN2QCM.js";
+import {
+  analyticsAction
+} from "./chunk-PZL3WLAV.js";
+import {
+  Link
+} from "./chunk-BXBDYNRP.js";
+import {
+  useAppContext
+} from "./chunk-JDFDPMKX.js";
+import {
+  apiErrorFacts
+} from "./chunk-O4OOG3D6.js";
+import {
+  Notice
+} from "./chunk-FSOQDUCG.js";
+import {
+  Button
+} from "./chunk-7QQN3KNP.js";
+import {
+  isUpgradeRefusal
+} from "./chunk-5MOJZORA.js";
+
+// src/app/components/credits/credit-refusal-notice.tsx
+import { CreditCardIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CreditRefusalNotice({
+  gap,
+  message,
+  refusalCode,
+  workspaceId,
+  accountId,
+  canBuyCredits,
+  canReadBilling = false,
+  canConnectModel,
+  continuing = false,
+  onChooseModel,
+  onAddCredits,
+  onDismiss
+}) {
+  const switchTo = !gap.selectionUsable && onChooseModel ? gap.covered[0] : void 0;
+  const coverage = gap.selectionUsable ? "Send again to use the selected model." : gap.covered.length > 0 ? `Your credits cover ${modelListSummary(gap.covered.map((model) => model.label))}.` : null;
+  const connect = canConnectModel && gap.covered.length === 0 && !gap.selectionUsable;
+  const uncovered = !refusalCode && gap.covered.length === 0 && !gap.selectionUsable;
+  const client = useAppContext().client;
+  const { balance, settled } = useCreditBalance(
+    client,
+    uncovered ? accountId : null,
+    canReadBilling
+  );
+  if (uncovered && !settled) return null;
+  if (refusalCode) {
+    const upgrade = isUpgradeRefusal(refusalCode);
+    const askOwner = canBuyCredits ? null : upgrade ? "Ask an organization owner to upgrade to Pro." : "Ask an organization owner to add credits.";
+    return /* @__PURE__ */ jsx(
+      Notice,
+      {
+        tone: "waiting",
+        live: "assertive",
+        title: refusalCode === "subscription_upgrade_required" ? "Upgrade to Pro to use your own subscription" : upgrade ? "Upgrade to Pro to use your own key" : refusalCode === "byok_paid_credit_required" ? "Add credits to use your own key" : "API usage uses credits, not your plan credit",
+        ...onDismiss ? { onDismiss } : {},
+        children: /* @__PURE__ */ jsxs("div", { "data-testid": "credit-refusal-notice", children: [
+          askOwner ? /* @__PURE__ */ jsx("span", { children: askOwner }) : null,
+          canBuyCredits ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: upgrade ? /* @__PURE__ */ jsx(UpgradeButton, { workspaceId }) : /* @__PURE__ */ jsx(
+            AddCreditsButton,
+            {
+              workspaceId,
+              outline: false,
+              ...onAddCredits ? { onAddCredits } : {}
+            }
+          ) }) : null
+        ] })
+      }
+    );
+  }
+  const credit = !uncovered ? null : !balance ? "unknown" : balance.someCredit ? "some" : "none";
+  const reason = credit === "none" ? canBuyCredits ? "Chats here are paid with Opengeni credits, and you don't have any right now." : "Chats here are paid with Opengeni credits, and there are none left. Ask an organization owner to add some." : credit === "some" ? canBuyCredits ? "This model can't use the Opengeni credits you have right now. Add credits, or choose another model." : "This model can't use your organization's Opengeni credits right now. Choose another model, or ask an organization owner to add credits." : credit === "unknown" ? canBuyCredits ? "This model needs Opengeni credits. Add credits, or choose another model." : "This model needs Opengeni credits. Choose another model, or ask an organization owner to add credits." : message ? apiErrorFacts(message).serverMessage : void 0;
+  const title = credit === "none" ? canBuyCredits ? continuing ? "Add credits to keep chatting" : "Add credits to start chatting" : "No credits left" : credit ? canBuyCredits ? "Add credits to use this model" : "Credits needed for this model" : `Your credits don't cover ${gap.modelLabel}`;
+  return /* @__PURE__ */ jsxs(
+    Notice,
+    {
+      tone: credit ? "waiting" : "failed",
+      live: "assertive",
+      title,
+      ...onDismiss ? { onDismiss } : {},
+      children: [
+        /* @__PURE__ */ jsxs("span", { "data-testid": "credit-refusal-notice", children: [
+          reason ? /* @__PURE__ */ jsx("span", { className: "block", children: reason }) : null,
+          coverage ? /* @__PURE__ */ jsx("span", { className: "block", children: coverage }) : null
+        ] }),
+        switchTo || canBuyCredits || connect ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap gap-2", children: [
+          switchTo ? /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: () => onChooseModel(switchTo.id), children: [
+            "Use ",
+            switchTo.label
+          ] }) : null,
+          canBuyCredits ? /* @__PURE__ */ jsx(
+            AddCreditsButton,
+            {
+              workspaceId,
+              outline: Boolean(switchTo),
+              ...onAddCredits ? { onAddCredits } : {}
+            }
+          ) : null,
+          connect ? /* @__PURE__ */ jsx(Button, { asChild: true, type: "button", size: "sm", variant: "outline", children: /* @__PURE__ */ jsx(
+            Link,
+            {
+              to: "/workspaces/$workspaceId/organization",
+              params: { workspaceId },
+              search: { section: "models", workspace: workspaceId },
+              ...analyticsAction("connect_model"),
+              children: "Use your own provider account"
+            }
+          ) }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+function UpgradeButton({ workspaceId }) {
+  return /* @__PURE__ */ jsx(Button, { asChild: true, type: "button", size: "sm", children: /* @__PURE__ */ jsx(
+    Link,
+    {
+      to: "/workspaces/$workspaceId/organization",
+      params: { workspaceId },
+      search: { section: "billing" },
+      ...analyticsAction("upgrade_plan"),
+      children: "Upgrade to Pro"
+    }
+  ) });
+}
+function AddCreditsButton({
+  workspaceId,
+  outline,
+  onAddCredits
+}) {
+  return onAddCredits ? /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      size: "sm",
+      variant: outline ? "outline" : "default",
+      onClick: onAddCredits,
+      ...analyticsAction("buy_credits"),
+      children: [
+        /* @__PURE__ */ jsx(CreditCardIcon, { className: "size-3.5" }),
+        "Add credits"
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(Button, { asChild: true, type: "button", size: "sm", variant: outline ? "outline" : "default", children: /* @__PURE__ */ jsxs(
+    Link,
+    {
+      to: "/workspaces/$workspaceId/organization",
+      params: { workspaceId },
+      search: { section: "billing" },
+      ...analyticsAction("buy_credits"),
+      children: [
+        /* @__PURE__ */ jsx(CreditCardIcon, { className: "size-3.5" }),
+        "Add credits"
+      ]
+    }
+  ) });
+}
+
+export {
+  CreditRefusalNotice
+};
+//# sourceMappingURL=chunk-ILDXWY37.js.map