@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/dist/usage.js

@@ -0,0 +1,1074 @@
+import {
+  DEFAULT_ALLOWANCE_LABELS,
+  allowanceLabels,
+  allowanceResetSentence,
+  formatAllowanceDate,
+  formatAllowanceInstant
+} from "./chunk-B3V6TG77.js";
+import {
+  usePolledValue
+} from "./chunk-YQEAA6LT.js";
+import "./chunk-UGLEYEMP.js";
+import {
+  OpenGeniContext
+} from "./chunk-TKOTKRWY.js";
+import {
+  cn
+} from "./chunk-22KP6LR5.js";
+
+// src/hooks/use-usage.ts
+import {
+  getMyUsage
+} from "@opengeni/sdk/usage-allowances";
+import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
+
+// src/usage/summary.ts
+function reading(scope, usage) {
+  if (usage.limit === null) return null;
+  return {
+    scope,
+    fraction: usage.fraction ?? (usage.limit === 0 ? 1 : usage.used / usage.limit),
+    status: usage.status,
+    resetsAt: usage.resetsAt,
+    used: usage.used,
+    limit: usage.limit,
+    remaining: Math.max(0, usage.remaining ?? usage.limit - usage.used)
+  };
+}
+function summarizeUsage(usage, subjectId) {
+  const row = subjectId === void 0 ? usage.members[0] : usage.members.find((member2) => member2.subjectId === subjectId);
+  const member = row ? reading("member", row) : null;
+  const workspace = reading("workspace", usage.workspace);
+  const readings = [member, workspace].filter((value) => value !== null);
+  if (readings.length === 0) return { state: "unlimited", binding: null, member, workspace };
+  const exhausted = (workspace?.status === "exhausted" ? workspace : null) ?? (member?.status === "exhausted" ? member : null);
+  if (exhausted) return { state: "exhausted", binding: exhausted, member, workspace };
+  const warnings = readings.filter((value) => value.status === "warning");
+  const candidates = warnings.length > 0 ? warnings : readings;
+  const binding = candidates.reduce(
+    (tightest, value) => value.remaining < tightest.remaining ? value : tightest
+  );
+  return { state: warnings.length > 0 ? "warning" : "ok", binding, member, workspace };
+}
+function usagePercentLabel(fraction) {
+  if (!Number.isFinite(fraction) || fraction <= 0) return "0";
+  if (fraction < 0.01) return "<1";
+  if (fraction < 1 && Math.round(fraction * 100) === 100) return "99";
+  return String(Math.round(fraction * 100));
+}
+
+// src/hooks/use-usage.ts
+function readOwnUsage(client, workspaceId, period, signal) {
+  const query = period === void 0 ? {} : { period };
+  const options = signal ? { signal } : {};
+  if ("getMyUsage" in client && typeof client.getMyUsage === "function") {
+    return client.getMyUsage(workspaceId, query, options);
+  }
+  if ("requestJson" in client && typeof client.requestJson === "function") {
+    return getMyUsage(client, workspaceId, query, options);
+  }
+  throw new Error("@opengeni/react: the usage client needs getMyUsage or requestJson.");
+}
+function useUsage(options = {}) {
+  const context = useContext(OpenGeniContext);
+  const client = options.client ?? context?.client;
+  const workspaceId = options.workspaceId ?? context?.workspaceId;
+  if (!client || !workspaceId) {
+    throw new Error(
+      "@opengeni/react: useUsage needs a client and workspace. Wrap the tree in <OpenGeniProvider> or pass { client, workspaceId }."
+    );
+  }
+  const period = options.period;
+  const load = useCallback(
+    (signal) => readOwnUsage(client, workspaceId, period, signal),
+    [client, workspaceId, period]
+  );
+  const state = usePolledValue(load, {
+    pollIntervalMs: options.pollIntervalMs,
+    enabled: options.enabled
+  });
+  const refreshKey = options.refreshKey;
+  const seenKey = useRef(refreshKey);
+  const refresh = state.refresh;
+  useEffect(() => {
+    if (Object.is(seenKey.current, refreshKey)) return;
+    seenKey.current = refreshKey;
+    void refresh();
+  }, [refreshKey, refresh]);
+  const usage = state.data;
+  const summary = useMemo(() => usage ? summarizeUsage(usage) : null, [usage]);
+  return { usage, summary, loading: state.loading, error: state.error, refresh };
+}
+
+// src/components/usage-meter.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_USAGE_METER_LABELS = {
+  ...allowanceLabels(),
+  title: "Your usage",
+  workspaceTitle: "Workspace usage",
+  left: (percent) => `${percent}% left`,
+  used: (percent) => `${percent}% used`,
+  limitReached: "Limit reached",
+  nearLimit: "Near limit",
+  amountLeft: (amount) => `${amount} left`,
+  unlimited: "No usage limit",
+  loading: "Checking usage\u2026",
+  error: "Couldn't load usage",
+  retry: "Try again",
+  amounts: (used, limit) => `${used} of ${limit} used`,
+  workspaceLine: (value) => `Workspace: ${value}`
+};
+function UsageMeter({
+  usage,
+  client,
+  workspaceId,
+  period,
+  refreshKey,
+  ...view
+}) {
+  if (usage !== void 0) {
+    return /* @__PURE__ */ jsx(
+      UsageMeterView,
+      {
+        ...view,
+        summary: usage ? summarizeUsage(usage) : null,
+        loading: usage === null
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    LoadingUsageMeter,
+    {
+      ...view,
+      client,
+      workspaceId,
+      period,
+      refreshKey
+    }
+  );
+}
+function LoadingUsageMeter({
+  client,
+  workspaceId,
+  period,
+  refreshKey,
+  ...view
+}) {
+  const state = useUsage({ client, workspaceId, period, refreshKey });
+  return /* @__PURE__ */ jsx(
+    UsageMeterView,
+    {
+      ...view,
+      summary: state.summary,
+      loading: state.loading && !state.summary,
+      error: state.summary ? null : state.error,
+      onRetry: () => void state.refresh()
+    }
+  );
+}
+var FILL = {
+  ok: "bg-og-accent",
+  warning: "bg-og-status-waiting",
+  exhausted: "bg-og-danger"
+};
+function valueText(reading2, measure, labels) {
+  if (reading2.status === "exhausted") return labels.limitReached;
+  return measure === "left" ? labels.left(usagePercentLabel(Math.max(0, 1 - reading2.fraction))) : labels.used(usagePercentLabel(reading2.fraction));
+}
+function UsageMeterView({
+  summary,
+  loading = false,
+  error = null,
+  onRetry,
+  measure = "left",
+  formatAmount,
+  labels: overrides,
+  density = "default",
+  showWorkspace = true,
+  className
+}) {
+  const labels = { ...DEFAULT_USAGE_METER_LABELS, ...overrides };
+  const compact = density === "compact";
+  if (loading || error || !summary) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("og-root min-w-0 text-og-sm", className),
+        "data-og-usage-meter": error ? "error" : "loading",
+        "aria-busy": loading || void 0,
+        children: error ? /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-center gap-x-2 text-og-fg-muted", role: "alert", children: [
+          labels.error,
+          onRetry ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRetry,
+              className: "rounded-og-sm text-og-fg underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-og-accent",
+              children: labels.retry
+            }
+          ) : null
+        ] }) : /* @__PURE__ */ jsx("span", { className: "text-og-fg-subtle", children: labels.loading })
+      }
+    );
+  }
+  const primary = summary.member ?? summary.workspace;
+  if (!primary) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("og-root min-w-0 text-og-sm text-og-fg-muted", className),
+        "data-og-usage-meter": "unlimited",
+        children: [
+          compact ? null : /* @__PURE__ */ jsxs("span", { className: "font-medium text-og-fg", children: [
+            labels.title,
+            " \xB7 "
+          ] }),
+          labels.unlimited
+        ]
+      }
+    );
+  }
+  const title = summary.member ? labels.title : labels.workspaceTitle;
+  const value = valueText(primary, measure, labels);
+  const fill = Math.min(1, Math.max(0, primary.fraction));
+  const reset = allowanceResetSentence(labels, primary.resetsAt);
+  const pool = showWorkspace && summary.member && summary.workspace && (summary.binding?.scope === "workspace" || summary.workspace.status !== "ok") ? summary.workspace : null;
+  const meterProps = {
+    role: "meter",
+    "aria-label": title || labels.title,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": Math.round(fill * 100),
+    "aria-valuetext": `${value}. ${reset}${pool ? ` ${labels.workspaceLine(valueText(pool, measure, labels))}.` : ""}`
+  };
+  const bar = /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "relative block overflow-hidden rounded-full",
+        density === "hero" ? "h-1.5" : "h-1",
+        primary.status === "exhausted" ? "bg-og-danger/15" : "bg-og-surface-3",
+        compact ? "w-16 shrink-0" : "w-full"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("absolute inset-y-0 left-0 rounded-full", FILL[primary.status]),
+          style: { width: `${Math.round(fill * 1e3) / 10}%` }
+        }
+      )
+    }
+  );
+  const valueClass = cn(
+    "shrink-0 whitespace-nowrap tabular-nums",
+    primary.status === "ok" ? "text-og-fg-muted" : "font-medium",
+    primary.status === "warning" && "text-og-status-waiting",
+    primary.status === "exhausted" && "text-og-danger"
+  );
+  if (compact) {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ...meterProps,
+        "data-og-usage-meter": primary.status,
+        title: primary.resetsAt ? `${reset} ${formatAllowanceInstant(primary.resetsAt)}` : reset,
+        className: cn("og-root inline-flex min-w-0 items-center gap-2 text-og-xs", className),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: valueClass, children: value }),
+          bar
+        ]
+      }
+    );
+  }
+  const amounts = formatAmount ? labels.amounts(formatAmount(primary.used), formatAmount(primary.limit)) : null;
+  if (density === "hero") {
+    const headline = formatAmount ? labels.amountLeft(formatAmount(primary.remaining)) : labels.left(usagePercentLabel(Math.max(0, 1 - primary.fraction)));
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...meterProps,
+        "data-og-usage-meter": primary.status,
+        className: cn("og-root flex min-w-0 flex-col gap-3", className),
+        children: [
+          title ? /* @__PURE__ */ jsx("span", { className: "text-og-sm font-medium text-og-fg-muted", children: title }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-2xl leading-8 font-semibold tracking-[-0.5px] text-og-fg tabular-nums", children: headline }),
+            primary.status !== "ok" ? /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex h-[22px] items-center gap-1.5 rounded-full border px-2 text-og-xs font-medium",
+                  primary.status === "warning" ? "border-og-status-waiting/30 text-og-status-waiting" : "border-og-danger/30 text-og-danger"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "size-1.5 rounded-full",
+                        primary.status === "warning" ? "bg-og-status-waiting" : "bg-og-danger"
+                      )
+                    }
+                  ),
+                  primary.status === "warning" ? labels.nearLimit : labels.limitReached
+                ]
+              }
+            ) : null
+          ] }),
+          bar,
+          /* @__PURE__ */ jsxs("p", { className: "text-og-xs text-og-fg-muted tabular-nums", children: [
+            [
+              amounts ?? labels.used(usagePercentLabel(primary.fraction)),
+              amounts ? `${usagePercentLabel(primary.fraction)}%` : null
+            ].filter(Boolean).join(" \xB7 "),
+            " ",
+            "\xB7",
+            " ",
+            /* @__PURE__ */ jsx("span", { title: primary.resetsAt ? formatAllowanceInstant(primary.resetsAt) : void 0, children: reset })
+          ] }),
+          pool ? /* @__PURE__ */ jsx(PoolLine, { reading: pool, measure, labels }) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...meterProps,
+      "data-og-usage-meter": primary.status,
+      className: cn("og-root flex min-w-0 flex-col gap-2 text-og-sm", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-medium text-og-fg", children: title }),
+          /* @__PURE__ */ jsx("span", { className: valueClass, children: value })
+        ] }),
+        bar,
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-1 text-og-xs text-og-fg-subtle", children: [
+          /* @__PURE__ */ jsx("span", { title: primary.resetsAt ? formatAllowanceInstant(primary.resetsAt) : void 0, children: reset }),
+          amounts ? /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: amounts }) : null
+        ] }),
+        pool ? /* @__PURE__ */ jsx(PoolLine, { reading: pool, measure, labels }) : null
+      ]
+    }
+  );
+}
+function PoolLine({
+  reading: reading2,
+  measure,
+  labels
+}) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(
+        "text-og-xs",
+        reading2.status === "exhausted" ? "font-medium text-og-danger" : reading2.status === "warning" ? "text-og-status-waiting" : "text-og-fg-muted"
+      ),
+      children: labels.workspaceLine(valueText(reading2, measure, labels))
+    }
+  );
+}
+
+// src/components/usage-limit-notice.tsx
+import { GaugeIcon, XIcon } from "lucide-react";
+import { useEffect as useEffect2, useState } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_USAGE_LIMIT_NOTICE_LABELS = {
+  ...allowanceLabels(),
+  memberWarning: (percent) => `You've used ${percent}% of your usage limit.`,
+  workspaceWarning: (percent) => `This workspace has used ${percent}% of its usage budget.`,
+  memberExhausted: "You've reached your usage limit.",
+  workspaceExhausted: "This workspace has reached its usage limit.",
+  dismiss: "Dismiss"
+};
+function UsageLimitNotice({
+  usage,
+  client,
+  workspaceId,
+  period,
+  refreshKey,
+  ...view
+}) {
+  if (usage !== void 0) {
+    return /* @__PURE__ */ jsx2(UsageLimitNoticeView, { ...view, summary: usage ? summarizeUsage(usage) : null });
+  }
+  return /* @__PURE__ */ jsx2(
+    LoadingNotice,
+    {
+      ...view,
+      client,
+      workspaceId,
+      period,
+      refreshKey
+    }
+  );
+}
+function LoadingNotice({
+  client,
+  workspaceId,
+  period,
+  refreshKey,
+  ...view
+}) {
+  const { summary } = useUsage({ client, workspaceId, period, refreshKey });
+  return /* @__PURE__ */ jsx2(UsageLimitNoticeView, { ...view, summary });
+}
+function readDismissed(key) {
+  if (!key || typeof sessionStorage === "undefined") return false;
+  try {
+    return sessionStorage.getItem(key) === "1";
+  } catch {
+    return false;
+  }
+}
+function UsageLimitNoticeView({
+  summary,
+  labels: overrides,
+  action,
+  dismissStorageKey,
+  className
+}) {
+  const labels = { ...DEFAULT_USAGE_LIMIT_NOTICE_LABELS, ...overrides };
+  const binding = summary?.binding ?? null;
+  const state = summary?.state;
+  const key = dismissStorageKey && binding && state === "warning" ? `${dismissStorageKey}:warning:${binding.scope}:${binding.resetsAt ?? "none"}` : null;
+  const [dismissed, setDismissed] = useState(() => readDismissed(key));
+  useEffect2(() => setDismissed(readDismissed(key)), [key]);
+  if (!summary || !binding || state !== "warning" && state !== "exhausted") return null;
+  if (state === "warning" && dismissed) return null;
+  const workspace = binding.scope === "workspace";
+  const exhausted = state === "exhausted";
+  const headline = exhausted ? workspace ? labels.workspaceExhausted : labels.memberExhausted : workspace ? labels.workspaceWarning(usagePercentLabel(binding.fraction)) : labels.memberWarning(usagePercentLabel(binding.fraction));
+  const reset = allowanceResetSentence(labels, binding.resetsAt);
+  const dismiss = () => {
+    setDismissed(true);
+    if (!key) return;
+    try {
+      sessionStorage.setItem(key, "1");
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "status",
+      "data-og-usage-notice": exhausted ? "exhausted" : "warning",
+      "data-og-usage-scope": binding.scope,
+      className: cn(
+        "og-root flex min-w-0 items-start gap-2 px-3.5 pt-2.5 text-og-sm md:px-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx2(GaugeIcon, { "aria-hidden": true, className: "mt-0.5 size-3.5 shrink-0 text-og-status-waiting" }),
+        /* @__PURE__ */ jsxs2("p", { className: "min-w-0 flex-1 text-og-fg-muted", children: [
+          /* @__PURE__ */ jsx2("span", { className: cn(exhausted && "font-medium text-og-fg"), children: headline }),
+          " ",
+          exhausted ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+            workspace ? labels.workspaceRemedy : labels.memberRemedy,
+            " "
+          ] }) : null,
+          /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: "whitespace-nowrap",
+              title: binding.resetsAt ? formatAllowanceInstant(binding.resetsAt) : void 0,
+              children: reset
+            }
+          )
+        ] }),
+        action ? /* @__PURE__ */ jsx2("div", { className: "shrink-0", children: action(summary) }) : null,
+        !exhausted ? /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            "aria-label": labels.dismiss,
+            onClick: dismiss,
+            className: "-mt-0.5 -mr-1 grid size-6 shrink-0 place-items-center rounded-og-sm text-og-fg-subtle transition hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-2 focus-visible:outline-og-accent pointer-coarse:size-9",
+            children: /* @__PURE__ */ jsx2(XIcon, { "aria-hidden": true, className: "size-3.5" })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/usage-member-list.tsx
+import { Slider } from "radix-ui";
+import { useId, useMemo as useMemo2, useState as useState2 } from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_USAGE_MEMBER_LIST_LABELS = {
+  listLabel: "Member usage",
+  used: (percent) => `${percent}% used`,
+  noLimitUsed: "No individual limit",
+  amounts: (used, limit) => `${used} of ${limit}`,
+  nearLimit: "Near limit",
+  limitReached: "Limit reached",
+  limit: "Limit",
+  defaultEqualShare: (percent) => `Equal share \xB7 ${percent}%`,
+  defaultNone: "No individual limit",
+  defaultShare: (percent) => `Default \xB7 ${percent}%`,
+  defaultAmount: (amount) => `Default \xB7 ${amount}`,
+  share: (percent) => `${percent}% of budget`,
+  amount: (amount) => `${amount} fixed`,
+  fixedAmountHidden: "Fixed amount",
+  edit: (name) => `Change limit for ${name}`,
+  editorTitle: (name) => `Limit for ${name}`,
+  optionDefault: "Default",
+  optionShare: "Share of budget",
+  optionAmount: "Fixed amount",
+  fixedAmountHint: "Each period. Doesn't grow when the budget does.",
+  shareSlider: "Share of the workspace budget",
+  shareInput: "Share, percent",
+  amountInput: "Fixed amount",
+  equalShareMultiple: (multiple) => `${multiple}\xD7 an equal share`,
+  sameAsEqualShare: "About an equal share",
+  atBudget: (amount) => `About ${amount} at the current budget`,
+  save: "Save",
+  saving: "Saving\u2026",
+  cancel: "Cancel",
+  saveFailed: "Couldn't save the limit. Refresh and try again.",
+  invalidAmount: "Enter an amount of zero or more.",
+  totalWithin: (percent) => `Member limits add up to ${percent}% of the budget.`,
+  totalOver: (percent) => `Member limits add up to ${percent}% of the budget.`,
+  oversubscribedHelp: "That's allowed: limits are ceilings, not reservations. The workspace budget still caps what everyone spends together.",
+  unlimitedMembers: (count) => count === 1 ? "1 member has no individual limit." : `${count} members have no individual limit.`,
+  empty: "No members yet."
+};
+var STATUS_RANK = { exhausted: 0, warning: 1, ok: 2 };
+function shareBase(usage) {
+  return usage.workspace.includedCredits + usage.workspace.grantsRemaining;
+}
+function formatPercent(value) {
+  const scaled = value * 100;
+  return Number.isInteger(Math.round(scaled * 10) / 10) || scaled >= 10 ? String(Math.round(scaled)) : (Math.round(scaled * 10) / 10).toFixed(1);
+}
+function formatMultiple(value) {
+  return value >= 10 ? String(Math.round(value)) : (Math.round(value * 10) / 10).toString();
+}
+function describeMemberLimit(member, context) {
+  const labels = { ...DEFAULT_USAGE_MEMBER_LIST_LABELS, ...context.labels };
+  const ofBudget = (limit) => limit !== null && context.shareBase > 0 ? formatPercent(limit / context.shareBase) : "0";
+  const rule = member.rule;
+  if (rule && "share" in rule) return labels.share(formatPercent(rule.share));
+  if (rule && "credits" in rule) {
+    return context.amounts ? labels.amount(context.amounts.format(rule.credits)) : labels.fixedAmountHidden;
+  }
+  const fallback = context.memberDefault ?? "none";
+  if (fallback === "none" || member.limit === null) return labels.defaultNone;
+  if (fallback === "equal_share") return labels.defaultEqualShare(ofBudget(member.limit));
+  if ("share" in fallback) return labels.defaultShare(formatPercent(fallback.share));
+  return context.amounts ? labels.defaultAmount(context.amounts.format(fallback.credits)) : labels.defaultShare(ofBudget(member.limit));
+}
+function UsageMemberList({
+  usage,
+  memberDefault,
+  describe,
+  onChangeRule,
+  amounts,
+  labels: overrides,
+  framed = true,
+  className
+}) {
+  const labels = { ...DEFAULT_USAGE_MEMBER_LIST_LABELS, ...overrides };
+  const base = shareBase(usage);
+  const [editing, setEditing] = useState2(null);
+  const name = (member) => describe?.(member) ?? {
+    name: member.externalIdentity?.externalId ?? member.subjectId,
+    detail: null
+  };
+  const members = useMemo2(
+    () => [...usage.members].sort(
+      (left, right) => STATUS_RANK[left.status] - STATUS_RANK[right.status] || right.used - left.used
+    ),
+    [usage.members]
+  );
+  if (members.length === 0) {
+    return /* @__PURE__ */ jsx3("p", { className: cn("og-root text-og-sm text-og-fg-muted", className), children: labels.empty });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: cn("og-root flex min-w-0 flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsx3(AllocationSummary, { usage, base, labels, framed }),
+    /* @__PURE__ */ jsx3(
+      "ul",
+      {
+        "aria-label": labels.listLabel,
+        className: cn(
+          "divide-y divide-og-border",
+          framed && "overflow-hidden rounded-og-md border border-og-border"
+        ),
+        children: members.map((member) => /* @__PURE__ */ jsx3(
+          MemberRow,
+          {
+            member,
+            identity: name(member),
+            usage,
+            base,
+            memberDefault,
+            amounts,
+            labels,
+            framed,
+            editing: editing === member.subjectId,
+            onEdit: onChangeRule ? () => setEditing(
+              (current) => current === member.subjectId ? null : member.subjectId
+            ) : void 0,
+            onClose: () => setEditing(null),
+            onSave: onChangeRule ? async (rule) => {
+              await onChangeRule(member, rule);
+              setEditing(null);
+            } : void 0
+          },
+          member.subjectId
+        ))
+      }
+    )
+  ] });
+}
+function memberShares(usage, base) {
+  let total = 0;
+  let unlimited = 0;
+  for (const member of usage.members) {
+    if (member.limit === null) unlimited += 1;
+    else total += base > 0 ? member.limit / base : 0;
+  }
+  return { total, unlimited };
+}
+function AllocationSummary({
+  usage,
+  base,
+  labels,
+  framed
+}) {
+  if (base <= 0) return null;
+  const { total, unlimited } = memberShares(usage, base);
+  const limited = usage.members.length - unlimited;
+  const over = total > 1.005;
+  const shaped = usage.members.some((member) => member.rule !== null);
+  if (limited === 0 || !over && !shaped && unlimited === 0) return null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-og-usage-allocation": over ? "oversubscribed" : "within",
+      className: cn(
+        "flex min-w-0 flex-col gap-1 text-og-sm",
+        framed || over ? "rounded-og-md px-3 py-2" : "pt-1",
+        over ? "bg-og-status-waiting/8 text-og-fg" : framed ? "bg-og-surface-1 text-og-fg-muted" : "text-og-fg-muted"
+      ),
+      children: [
+        limited > 0 ? /* @__PURE__ */ jsx3(AllocationBar, { total, over, children: over ? labels.totalOver(formatPercent(total)) : labels.totalWithin(formatPercent(total)) }) : null,
+        over ? /* @__PURE__ */ jsx3("p", { className: "text-og-xs text-og-fg-muted", children: labels.oversubscribedHelp }) : null,
+        unlimited > 0 ? /* @__PURE__ */ jsx3("p", { className: "text-og-xs text-og-fg-muted", children: labels.unlimitedMembers(unlimited) }) : null
+      ]
+    }
+  );
+}
+function AllocationBar({
+  total,
+  over,
+  children
+}) {
+  const scale = Math.max(1, total);
+  return /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx3("p", { className: cn(over && "font-medium"), children }),
+    /* @__PURE__ */ jsxs3("span", { "aria-hidden": true, className: "relative block h-1 overflow-hidden rounded-full bg-og-surface-3", children: [
+      /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: "absolute inset-y-0 left-0 bg-og-accent/70",
+          style: { width: `${Math.min(total, 1) / scale * 100}%` }
+        }
+      ),
+      over ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            className: "absolute inset-y-0 bg-og-status-waiting",
+            style: { left: `${1 / scale * 100}%`, right: 0 }
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            className: "absolute inset-y-[-2px] w-px bg-og-fg",
+            style: { left: `${1 / scale * 100}%` }
+          }
+        )
+      ] }) : null
+    ] })
+  ] });
+}
+function MemberRow({
+  member,
+  identity,
+  usage,
+  base,
+  memberDefault,
+  amounts,
+  labels,
+  framed,
+  editing,
+  onEdit,
+  onClose,
+  onSave
+}) {
+  const editorId = useId();
+  const limited = member.limit !== null;
+  const fraction = member.fraction ?? 0;
+  const limitText = describeMemberLimit(member, {
+    memberDefault,
+    shareBase: base,
+    amounts,
+    labels
+  });
+  return /* @__PURE__ */ jsxs3("li", { className: cn("min-w-0", framed && "bg-og-bg"), "data-og-usage-member": member.subjectId, children: [
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: cn(
+          "grid min-w-0 grid-cols-1 gap-x-4 gap-y-2 py-3 sm:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_11rem] sm:items-center",
+          framed && "px-3.5"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx3("p", { className: "truncate text-og-sm font-medium text-og-fg", children: identity.name }),
+            identity.detail ? /* @__PURE__ */ jsx3("p", { className: "truncate text-og-xs text-og-fg-subtle", children: identity.detail }) : null
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 items-baseline justify-between gap-2 text-og-xs", children: [
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  className: cn(
+                    "tabular-nums",
+                    member.status === "ok" && "text-og-fg-muted",
+                    member.status === "warning" && "font-medium text-og-status-waiting",
+                    member.status === "exhausted" && "font-medium text-og-danger"
+                  ),
+                  children: limited ? member.status === "exhausted" ? labels.limitReached : `${labels.used(usagePercentLabel(fraction))}${member.status === "warning" ? ` \xB7 ${labels.nearLimit}` : ""}` : labels.noLimitUsed
+                }
+              ),
+              amounts ? /* @__PURE__ */ jsx3("span", { className: "truncate text-og-fg-subtle tabular-nums", children: limited ? labels.amounts(amounts.format(member.used), amounts.format(member.limit)) : amounts.format(member.used) }) : null
+            ] }),
+            /* @__PURE__ */ jsx3(
+              "span",
+              {
+                "aria-hidden": true,
+                className: cn(
+                  "relative block h-1 overflow-hidden rounded-full",
+                  limited ? "bg-og-surface-3" : "bg-transparent"
+                ),
+                children: limited ? /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: cn(
+                      "absolute inset-y-0 left-0 rounded-full",
+                      member.status === "ok" ? "bg-og-accent" : member.status === "warning" ? "bg-og-status-waiting" : "bg-og-danger"
+                    ),
+                    style: { width: `${Math.min(1, Math.max(0, fraction)) * 100}%` }
+                  }
+                ) : null
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 items-center justify-between gap-2 sm:justify-end", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-og-xs text-og-fg-subtle sm:hidden", children: labels.limit }),
+            onEdit ? /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: onEdit,
+                "aria-expanded": editing,
+                "aria-controls": editing ? editorId : void 0,
+                "aria-label": `${labels.edit(identity.name)}: ${limitText}`,
+                className: "inline-flex h-8 max-w-full items-center gap-1.5 truncate rounded-og-sm border border-og-border px-2.5 text-og-control text-og-fg transition hover:bg-og-surface-2 focus-visible:outline-2 focus-visible:outline-og-accent pointer-coarse:h-10",
+                children: limitText
+              }
+            ) : /* @__PURE__ */ jsx3("span", { className: "truncate text-og-xs text-og-fg-muted", children: limitText })
+          ] })
+        ]
+      }
+    ),
+    editing && onSave ? /* @__PURE__ */ jsx3(
+      MemberLimitEditor,
+      {
+        id: editorId,
+        member,
+        name: identity.name,
+        usage,
+        base,
+        memberDefault,
+        amounts,
+        labels,
+        framed,
+        onCancel: onClose,
+        onSave
+      }
+    ) : null
+  ] });
+}
+function initialMode(rule, amounts) {
+  if (rule === null) return "share";
+  if ("share" in rule) return "share";
+  return amounts ? "amount" : "share";
+}
+function MemberLimitEditor({
+  id,
+  member,
+  name,
+  usage,
+  base,
+  memberDefault,
+  amounts,
+  labels,
+  framed,
+  onCancel,
+  onSave
+}) {
+  const count = Math.max(1, usage.members.length);
+  const equal = 1 / count;
+  const currentShare = member.rule && "share" in member.rule ? member.rule.share : member.limit !== null && base > 0 ? member.limit / base : equal;
+  const startPercent = Math.min(100, Math.max(0, Math.round(currentShare * 100)));
+  const startAmount = amounts && member.rule && "credits" in member.rule ? stripPrefix(amounts.format(member.rule.credits), amounts.prefix) : amounts && member.limit !== null ? stripPrefix(amounts.format(member.limit), amounts.prefix) : "";
+  const [mode, setMode] = useState2(() => initialMode(member.rule, amounts));
+  const [sharePercent, setSharePercent] = useState2(startPercent);
+  const [amountText, setAmountText] = useState2(startAmount);
+  const [saving, setSaving] = useState2(false);
+  const [error, setError] = useState2(null);
+  const share = sharePercent / 100;
+  const parsedAmount = amounts && mode === "amount" ? amounts.parse(amountText) : null;
+  const defaultLimitText = describeMemberLimit(
+    {
+      rule: null,
+      limit: member.rule === null ? member.limit : defaultLimitFor(memberDefault, base, count)
+    },
+    { memberDefault, shareBase: base, amounts, labels }
+  );
+  const unchanged = mode === "default" ? member.rule === null : mode === "share" ? (member.rule === null || "share" in member.rule) && sharePercent === startPercent : member.rule !== null && "credits" in member.rule && amountText === startAmount;
+  const draftLimit = mode === "share" ? share * base : mode === "amount" ? parsedAmount : defaultLimitFor(memberDefault, base, count);
+  const others = usage.members.reduce(
+    (sum, other) => other.subjectId === member.subjectId || other.limit === null ? sum : sum + other.limit,
+    0
+  );
+  const draftTotal = base > 0 && draftLimit !== null ? (others + draftLimit) / base : null;
+  async function save() {
+    let rule;
+    if (mode === "default") rule = null;
+    else if (mode === "share") rule = { share };
+    else {
+      if (parsedAmount === null || !Number.isSafeInteger(parsedAmount) || parsedAmount < 0) {
+        setError(labels.invalidAmount);
+        return;
+      }
+      rule = { credits: parsedAmount };
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await onSave(rule);
+    } catch (cause) {
+      setError(cause instanceof Error && cause.message ? cause.message : labels.saveFailed);
+      setSaving(false);
+    }
+  }
+  const modes = [
+    { value: "share", label: labels.optionShare },
+    ...amounts ? [{ value: "amount", label: labels.optionAmount }] : [],
+    { value: "default", label: labels.optionDefault }
+  ];
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      id,
+      role: "group",
+      "aria-label": labels.editorTitle(name),
+      className: cn(
+        "bg-og-surface-1 px-3.5 py-3",
+        framed ? "border-t border-og-border" : "mb-3 rounded-og-md"
+      ),
+      onKeyDown: (event) => {
+        if (event.key === "Escape" && !saving) {
+          event.stopPropagation();
+          onCancel();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs3("fieldset", { className: "flex min-w-0 flex-col gap-3", disabled: saving, children: [
+          /* @__PURE__ */ jsx3("legend", { className: "sr-only", children: labels.editorTitle(name) }),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              role: "radiogroup",
+              "aria-label": labels.limit,
+              className: "inline-flex w-fit max-w-full flex-wrap gap-0.5 rounded-og-sm bg-og-surface-3/60 p-0.5",
+              children: modes.map((option) => /* @__PURE__ */ jsxs3(
+                "label",
+                {
+                  className: cn(
+                    "relative inline-flex h-7 cursor-pointer items-center rounded-[5px] px-2.5 text-og-control transition has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-og-accent pointer-coarse:h-9",
+                    mode === option.value ? "bg-og-bg font-medium text-og-fg shadow-sm" : "text-og-fg-muted hover:text-og-fg"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      "input",
+                      {
+                        type: "radio",
+                        name: `${id}-mode`,
+                        value: option.value,
+                        checked: mode === option.value,
+                        onChange: () => setMode(option.value),
+                        className: "sr-only"
+                      }
+                    ),
+                    option.label
+                  ]
+                },
+                option.value
+              ))
+            }
+          ),
+          mode === "share" ? /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-col gap-2", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 items-center gap-3", children: [
+              /* @__PURE__ */ jsxs3(
+                Slider.Root,
+                {
+                  value: [sharePercent],
+                  min: 0,
+                  max: 100,
+                  step: 1,
+                  onValueChange: (next) => setSharePercent(next[0] ?? 0),
+                  "data-og-share-slider": "",
+                  className: "relative flex h-6 min-w-0 flex-1 touch-none items-center select-none pointer-coarse:h-10",
+                  children: [
+                    /* @__PURE__ */ jsx3(Slider.Track, { className: "relative h-1.5 grow overflow-hidden rounded-full bg-og-surface-3", children: /* @__PURE__ */ jsx3(Slider.Range, { className: "absolute h-full rounded-full bg-og-accent" }) }),
+                    count > 1 ? /* @__PURE__ */ jsx3(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: "pointer-events-none absolute top-1/2 h-3.5 w-0.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-og-fg-subtle",
+                        style: { left: `${equal * 100}%` }
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx3(
+                      Slider.Thumb,
+                      {
+                        "aria-label": labels.shareSlider,
+                        "aria-valuetext": `${sharePercent}%`,
+                        className: "block size-4 rounded-full border-2 border-og-accent bg-og-bg shadow-sm transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-og-accent pointer-coarse:size-6"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs3("label", { className: "flex shrink-0 items-center gap-1 text-og-sm text-og-fg", children: [
+                /* @__PURE__ */ jsx3(
+                  "input",
+                  {
+                    type: "number",
+                    inputMode: "numeric",
+                    min: 0,
+                    max: 100,
+                    step: 1,
+                    value: sharePercent,
+                    "aria-label": labels.shareInput,
+                    onChange: (event) => {
+                      const next = Number(event.target.value);
+                      if (Number.isFinite(next))
+                        setSharePercent(Math.min(100, Math.max(0, Math.round(next))));
+                    },
+                    className: "h-8 w-16 rounded-og-sm border border-og-border bg-og-bg px-2 text-right tabular-nums focus-visible:outline-2 focus-visible:outline-og-accent pointer-coarse:h-10"
+                  }
+                ),
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx3("p", { className: "text-og-xs text-og-fg-subtle", "aria-live": "polite", children: [
+              count > 1 ? Math.abs(share * count - 1) < 0.05 ? labels.sameAsEqualShare : labels.equalShareMultiple(formatMultiple(share * count)) : null,
+              amounts && base > 0 ? labels.atBudget(amounts.format(Math.round(share * base))) : null
+            ].filter(Boolean).join(" \xB7 ") })
+          ] }) : mode === "amount" && amounts ? /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 text-og-sm text-og-fg", children: [
+            amounts.prefix ? /* @__PURE__ */ jsx3("span", { className: "text-og-fg-subtle", children: amounts.prefix }) : null,
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "number",
+                inputMode: "decimal",
+                min: 0,
+                step: amounts.step ?? 0.01,
+                value: amountText,
+                "aria-label": labels.amountInput,
+                "aria-invalid": error === labels.invalidAmount || void 0,
+                onChange: (event) => setAmountText(event.target.value),
+                className: "h-8 w-28 rounded-og-sm border border-og-border bg-og-bg px-2 tabular-nums focus-visible:outline-2 focus-visible:outline-og-accent pointer-coarse:h-10"
+              }
+            ),
+            /* @__PURE__ */ jsx3("span", { className: "ml-2 text-og-xs text-og-fg-subtle", children: labels.fixedAmountHint })
+          ] }) : /* @__PURE__ */ jsx3("p", { className: "text-og-sm text-og-fg-muted", children: defaultLimitText })
+        ] }),
+        draftTotal !== null ? /* @__PURE__ */ jsx3(
+          "p",
+          {
+            className: cn("mt-3 text-og-xs", draftTotal > 1.005 ? "text-og-fg" : "text-og-fg-subtle"),
+            children: draftTotal > 1.005 ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+              /* @__PURE__ */ jsx3("span", { className: "font-medium", children: labels.totalOver(formatPercent(draftTotal)) }),
+              " ",
+              /* @__PURE__ */ jsx3("span", { className: "text-og-fg-muted", children: labels.oversubscribedHelp })
+            ] }) : labels.totalWithin(formatPercent(draftTotal))
+          }
+        ) : null,
+        error ? /* @__PURE__ */ jsx3("p", { role: "alert", className: "mt-2 text-og-xs text-og-danger", children: error }) : null,
+        /* @__PURE__ */ jsxs3("div", { className: "mt-3 flex items-center justify-end gap-2", children: [
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              onClick: onCancel,
+              disabled: saving,
+              className: "inline-flex h-8 items-center rounded-og-sm px-3 text-og-control text-og-fg transition hover:bg-og-surface-2 focus-visible:outline-2 focus-visible:outline-og-accent disabled:opacity-50 pointer-coarse:h-10",
+              children: labels.cancel
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              onClick: () => void save(),
+              disabled: saving || unchanged,
+              className: "inline-flex h-8 items-center rounded-og-sm border border-og-primary-border bg-og-primary px-3 text-og-control font-medium text-og-primary-fg transition hover:bg-og-primary-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-og-accent disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:h-10",
+              children: saving ? labels.saving : labels.save
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function stripPrefix(text, prefix) {
+  const plain = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
+  return plain.replace(/,/g, "");
+}
+function defaultLimitFor(memberDefault, base, count) {
+  const fallback = memberDefault ?? "none";
+  if (fallback === "none") return null;
+  if (fallback === "equal_share") return base / count;
+  if ("share" in fallback) return fallback.share * base;
+  return fallback.credits;
+}
+export {
+  DEFAULT_ALLOWANCE_LABELS,
+  DEFAULT_USAGE_LIMIT_NOTICE_LABELS,
+  DEFAULT_USAGE_MEMBER_LIST_LABELS,
+  DEFAULT_USAGE_METER_LABELS,
+  UsageLimitNotice,
+  UsageLimitNoticeView,
+  UsageMemberList,
+  UsageMeter,
+  UsageMeterView,
+  allowanceLabels,
+  allowanceResetSentence,
+  describeMemberLimit,
+  formatAllowanceDate,
+  summarizeUsage,
+  usagePercentLabel,
+  useUsage
+};
+//# sourceMappingURL=usage.js.map