@eifi1/ui-kit 0.17.0 → 0.18.0

package/dist/components/server-wake.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { ServerWakeWatcher, ServerWakeStage } from '../lib/server-wake.js';
+
+/**
+ * The visible half of the cold-start watchdog (`lib/server-wake.ts`), keksdose's
+ * `app/server-wake-notice.tsx` lifted into the kit: after a couple of seconds of an
+ * unanswered read it says the app is still loading, and after seven it says WHY — the
+ * server sleeps when nobody is using it, and the first request has to start it again.
+ *
+ * Corner-anchored and non-blocking on purpose. The pages underneath already show their
+ * own skeletons; what was missing is the explanation, not another overlay. Start
+ * corner, above the phone's bottom nav, so it collides with neither the centred toasts
+ * nor the nav bar.
+ *
+ * Mount it next to the router, not inside the app layout, so it also covers the login
+ * screen and the landing page — a cold start is at its most confusing exactly there,
+ * before anything of the app is on screen.
+ */
+interface ServerWakeLabels {
+    /** Past `slowMs` (2 s): a warm server would have answered by now. */
+    slow: string;
+    /** Past `wakingMs` (7 s): the explanation. `appName` is the notice's prop; without
+     *  one the sentence says "the app". */
+    waking: (appName?: string) => string;
+}
+declare const DEFAULT_SERVER_WAKE_LABELS: ServerWakeLabels;
+/** The watcher's current stage, re-rendering on every change. Default: the shared
+ *  {@link serverWake} instance. */
+declare function useServerWakeStage(watcher?: ServerWakeWatcher): ServerWakeStage;
+interface ServerWakeNoticeProps {
+    /** Default: the shared {@link serverWake} instance. Pass the app's own when it was
+     *  made with {@link createServerWake} (e.g. to watch the login POST too). */
+    watcher?: ServerWakeWatcher;
+    /** Named in the `waking` sentence ("…when nobody is using Keksdose…"). Default: the
+     *  label says "the app". */
+    appName?: string;
+    labels?: Partial<ServerWakeLabels>;
+    /**
+     * The height to keep clear at the bottom — AppShell's bottom nav. Default: its
+     * measured `--app-nav-h` (0px from `md` up and on pages without a shell, such as the
+     * login screen), so nothing has to be passed under an AppShell. The safe area is
+     * respected either way, and a 1rem gap is added. Numbers are px.
+     */
+    navOffset?: string | number;
+    /** Extra classes on the fixed anchor — a different width or `start-*`. The bottom
+     *  offset is an inline style, so move it vertically with {@link navOffset}. */
+    className?: string;
+}
+/**
+ * Renders nothing visible while idle. The LIVE REGION, though, is always mounted: a
+ * `role="status"` element inserted together with its text is announced unreliably
+ * (several screen readers only speak changes to a region they already knew about),
+ * so the region waits empty and the banner appears inside it. keksdose's notice
+ * mounted the region and the words at once.
+ */
+declare function ServerWakeNotice({ watcher, appName, labels: labelsProp, navOffset, className }: ServerWakeNoticeProps): react.JSX.Element;
+
+export { DEFAULT_SERVER_WAKE_LABELS, type ServerWakeLabels, ServerWakeNotice, type ServerWakeNoticeProps, useServerWakeStage };

package/dist/components/server-wake.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { cn } from "../lib/cn.js";
+import { serverWake } from "../lib/server-wake.js";
+import { AlertBanner } from "./alert-banner.js";
+import { Spinner } from "./ui.js";
+const DEFAULT_SERVER_WAKE_LABELS = {
+  slow: "Still loading \u2014 this is taking longer than usual.",
+  waking: (appName) => `The server goes to sleep when nobody is using ${appName ?? "the app"}, so the first request after a break has to start it again. That can take a moment \u2014 nothing is lost, the page fills in by itself.`
+};
+function useServerWakeStage(watcher = serverWake) {
+  return useSyncExternalStore(watcher.subscribe, watcher.getStage, () => "idle");
+}
+const px = (v) => typeof v === "number" ? `${v}px` : v;
+function ServerWakeNotice({ watcher, appName, labels: labelsProp, navOffset, className }) {
+  const labels = useKitLabels("serverWake", DEFAULT_SERVER_WAKE_LABELS, labelsProp);
+  const stage = useServerWakeStage(watcher);
+  const waking = stage === "waking";
+  const style = {
+    bottom: `calc(max(${navOffset === void 0 ? "var(--app-nav-h, 0px)" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 1rem)`
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "data-stage": stage,
+      style,
+      className: cn(
+        "fixed start-4 z-50 max-w-[min(24rem,calc(100vw-2rem))]",
+        stage === "idle" && "pointer-events-none",
+        className
+      ),
+      children: stage !== "idle" && // `elevated`: OPAQUE in both themes (keksdose live #209) — the notice that
+      // explains a stall is read over whatever stalled, and a translucent dark tint
+      // let the page's own text show through it. A box banner is role-less, so the
+      // wrapper above stays the one live region.
+      /* @__PURE__ */ jsx(
+        AlertBanner,
+        {
+          tone: waking ? "warning" : "neutral",
+          size: "sm",
+          elevated: true,
+          icon: /* @__PURE__ */ jsx(Spinner, { label: null, className: "h-3.5 w-3.5" }),
+          children: waking ? labels.waking(appName) : labels.slow
+        }
+      )
+    }
+  );
+}
+export {
+  DEFAULT_SERVER_WAKE_LABELS,
+  ServerWakeNotice,
+  useServerWakeStage
+};
+//# sourceMappingURL=server-wake.js.map

package/dist/components/server-wake.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/server-wake.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\nimport type { CSSProperties } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { serverWake } from \"../lib/server-wake\";\nimport type { ServerWakeStage, ServerWakeWatcher } from \"../lib/server-wake\";\nimport { AlertBanner } from \"./alert-banner\";\nimport { Spinner } from \"./ui\";\n\n/**\n * The visible half of the cold-start watchdog (`lib/server-wake.ts`), keksdose's\n * `app/server-wake-notice.tsx` lifted into the kit: after a couple of seconds of an\n * unanswered read it says the app is still loading, and after seven it says WHY — the\n * server sleeps when nobody is using it, and the first request has to start it again.\n *\n * Corner-anchored and non-blocking on purpose. The pages underneath already show their\n * own skeletons; what was missing is the explanation, not another overlay. Start\n * corner, above the phone's bottom nav, so it collides with neither the centred toasts\n * nor the nav bar.\n *\n * Mount it next to the router, not inside the app layout, so it also covers the login\n * screen and the landing page — a cold start is at its most confusing exactly there,\n * before anything of the app is on screen.\n */\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\nexport interface ServerWakeLabels {\n  /** Past `slowMs` (2 s): a warm server would have answered by now. */\n  slow: string;\n  /** Past `wakingMs` (7 s): the explanation. `appName` is the notice's prop; without\n   *  one the sentence says \"the app\". */\n  waking: (appName?: string) => string;\n}\n\nexport const DEFAULT_SERVER_WAKE_LABELS: ServerWakeLabels = {\n  slow: \"Still loading — this is taking longer than usual.\",\n  waking: (appName) =>\n    `The server goes to sleep when nobody is using ${appName ?? \"the app\"}, so the first request after a break has to start it again. That can take a moment — nothing is lost, the page fills in by itself.`,\n};\n\n// ── Hook ──────────────────────────────────────────────────────────────────────\n\n/** The watcher's current stage, re-rendering on every change. Default: the shared\n *  {@link serverWake} instance. */\nexport function useServerWakeStage(watcher: ServerWakeWatcher = serverWake): ServerWakeStage {\n  // The server snapshot is `idle`: nothing is in flight while the HTML is rendered.\n  return useSyncExternalStore(watcher.subscribe, watcher.getStage, () => \"idle\");\n}\n\n// ── Notice ────────────────────────────────────────────────────────────────────\n\nexport interface ServerWakeNoticeProps {\n  /** Default: the shared {@link serverWake} instance. Pass the app's own when it was\n   *  made with {@link createServerWake} (e.g. to watch the login POST too). */\n  watcher?: ServerWakeWatcher;\n  /** Named in the `waking` sentence (\"…when nobody is using Keksdose…\"). Default: the\n   *  label says \"the app\". */\n  appName?: string;\n  labels?: Partial<ServerWakeLabels>;\n  /**\n   * The height to keep clear at the bottom — AppShell's bottom nav. Default: its\n   * measured `--app-nav-h` (0px from `md` up and on pages without a shell, such as the\n   * login screen), so nothing has to be passed under an AppShell. The safe area is\n   * respected either way, and a 1rem gap is added. Numbers are px.\n   */\n  navOffset?: string | number;\n  /** Extra classes on the fixed anchor — a different width or `start-*`. The bottom\n   *  offset is an inline style, so move it vertically with {@link navOffset}. */\n  className?: string;\n}\n\nconst px = (v: string | number) => (typeof v === \"number\" ? `${v}px` : v);\n\n/**\n * Renders nothing visible while idle. The LIVE REGION, though, is always mounted: a\n * `role=\"status\"` element inserted together with its text is announced unreliably\n * (several screen readers only speak changes to a region they already knew about),\n * so the region waits empty and the banner appears inside it. keksdose's notice\n * mounted the region and the words at once.\n */\nexport function ServerWakeNotice({ watcher, appName, labels: labelsProp, navOffset, className }: ServerWakeNoticeProps) {\n  const labels = useKitLabels(\"serverWake\", DEFAULT_SERVER_WAKE_LABELS, labelsProp);\n  const stage = useServerWakeStage(watcher);\n  const waking = stage === \"waking\";\n  const style: CSSProperties = {\n    bottom: `calc(max(${navOffset === undefined ? \"var(--app-nav-h, 0px)\" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 1rem)`,\n  };\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      data-stage={stage}\n      style={style}\n      // `pointer-events-none` on the empty anchor: a fixed box, even an empty one, is not\n      // allowed to swallow a tap on what it sits over.\n      className={cn(\n        \"fixed start-4 z-50 max-w-[min(24rem,calc(100vw-2rem))]\",\n        stage === \"idle\" && \"pointer-events-none\",\n        className,\n      )}\n    >\n      {stage !== \"idle\" && (\n        // `elevated`: OPAQUE in both themes (keksdose live #209) — the notice that\n        // explains a stall is read over whatever stalled, and a translucent dark tint\n        // let the page's own text show through it. A box banner is role-less, so the\n        // wrapper above stays the one live region.\n        <AlertBanner\n          tone={waking ? \"warning\" : \"neutral\"}\n          size=\"sm\"\n          elevated\n          // `label={null}`: a Spinner is its own `role=\"status\"` saying \"Loading…\" —\n          // nested here, a second live region and a second announcement ahead of the\n          // words that actually explain the wait. Here it is decoration.\n          icon={<Spinner label={null} className=\"h-3.5 w-3.5\" />}\n        >\n          {waking ? labels.waking(appName) : labels.slow}\n        </AlertBanner>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAoHgB;AApHhB,SAAS,4BAA4B;AAGrC,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AA4BjB,MAAM,6BAA+C;AAAA,EAC1D,MAAM;AAAA,EACN,QAAQ,CAAC,YACP,iDAAiD,WAAW,SAAS;AACzE;AAMO,SAAS,mBAAmB,UAA6B,YAA6B;AAE3F,SAAO,qBAAqB,QAAQ,WAAW,QAAQ,UAAU,MAAM,MAAM;AAC/E;AAwBA,MAAM,KAAK,CAAC,MAAwB,OAAO,MAAM,WAAW,GAAG,CAAC,OAAO;AAShE,SAAS,iBAAiB,EAAE,SAAS,SAAS,QAAQ,YAAY,WAAW,UAAU,GAA0B;AACtH,QAAM,SAAS,aAAa,cAAc,4BAA4B,UAAU;AAChF,QAAM,QAAQ,mBAAmB,OAAO;AACxC,QAAM,SAAS,UAAU;AACzB,QAAM,QAAuB;AAAA,IAC3B,QAAQ,YAAY,cAAc,SAAY,0BAA0B,GAAG,SAAS,CAAC;AAAA,EACvF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ;AAAA,MAGA,WAAW;AAAA,QACT;AAAA,QACA,UAAU,UAAU;AAAA,QACpB;AAAA,MACF;AAAA,MAEC,oBAAU;AAAA;AAAA;AAAA;AAAA,MAKT;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,SAAS,YAAY;AAAA,UAC3B,MAAK;AAAA,UACL,UAAQ;AAAA,UAIR,MAAM,oBAAC,WAAQ,OAAO,MAAM,WAAU,eAAc;AAAA,UAEnD,mBAAS,OAAO,OAAO,OAAO,IAAI,OAAO;AAAA;AAAA,MAC5C;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/settings-fields.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { aP as SelectProps } from '../kit-labels-C4uB_zmg.js';
+import { aQ as SelectProps } from '../kit-labels-CPbsjlXr.js';
 import { ThemePreference } from '../theme/theme-store.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
@@ -52,6 +52,15 @@ import './authed-image.js';
 import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
+import './write-lock.js';
+import './account-chips.js';
+import '../lib/format.js';
+import '../data-table-3mi2R3so.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
 import 'zustand/middleware';
 import 'zustand';
 

package/dist/components/share-card.d.ts

@@ -0,0 +1,61 @@
+import 'react';
+import './account-chips.js';
+import './dialog-frame.js';
+export { U as DEFAULT_SHARE_CARD_LABELS, aR as ShareAddRequest, aS as ShareCandidate, aT as ShareCard, aU as ShareCardLabels, aV as ShareCardProps, aW as ShareDialog, aX as ShareDialogProps, aY as ShareGrantee, aZ as SharePanel, a_ as SharePanelProps, a$ as SharePendingGrant, b0 as ShareRole } from '../kit-labels-CPbsjlXr.js';
+import 'lucide-react';
+import '../lib/format.js';
+import './chip.js';
+import '../data-table-3mi2R3so.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './data-table-labels.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './field-sync.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './danger-confirm.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './measured-grid.js';
+import '../feedback-attachment-WFiXJ8We.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import './account-settings-labels.js';
+import './confirm-dialog.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './signed-amount.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
+import './write-lock.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';

package/dist/components/share-card.js

@@ -0,0 +1,350 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Trash2, UserPlus, UsersRound } from "lucide-react";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { cn } from "../lib/cn.js";
+import { AlertBanner } from "./alert-banner.js";
+import { Autocomplete } from "./autocomplete.js";
+import { Chip } from "./chip.js";
+import { RoleChip } from "./account-chips.js";
+import { useConfirm } from "./confirm-dialog.js";
+import { CopyButton } from "./copy-button.js";
+import { DialogFrame } from "./dialog-frame.js";
+import { Caption, SectionLabel } from "./text.js";
+import { ToggleGroup } from "./toggle-group.js";
+import { Tooltip } from "./tooltip.js";
+import { Button, Card, IconButton, Spinner } from "./ui.js";
+import { useWriteLock } from "./write-lock.js";
+const DEFAULT_SHARE_CARD_LABELS = {
+  dialogTitle: "Share",
+  close: "Close",
+  email: "Email address",
+  emailOptional: "Email address (optional)",
+  emailPlaceholder: "name@example.com",
+  invalidEmail: "Enter a complete email address.",
+  role: "Role",
+  roleOf: (name) => `Role of ${name}`,
+  add: "Share",
+  whoHasAccess: "Who has access",
+  nobodyYet: "Nobody else has access yet.",
+  pending: "Pending",
+  openInvite: "Open invite link",
+  copyLink: "Copy link",
+  team: "Team",
+  teamHint: (name) => `Everyone in ${name} gets access.`,
+  remove: "Remove access",
+  removeConfirm: (name) => `Remove access for ${name}?`,
+  revokePending: "Withdraw invitation",
+  revokePendingConfirm: (name) => `Withdraw the invitation for ${name}?`,
+  failed: "That did not work. Please try again.",
+  loading: "Loading\u2026"
+};
+const EMAIL_SHAPE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function ShareRoleChip({ role }) {
+  if (!role) return null;
+  const chip = /* @__PURE__ */ jsx(RoleChip, { value: role.key, roles: { [role.key]: role } });
+  return role.description ? /* @__PURE__ */ jsx(Tooltip, { label: role.description, children: chip }) : chip;
+}
+function LockedRoleChoice({ reason, children }) {
+  return reason === void 0 ? children : /* @__PURE__ */ jsx(Tooltip, { label: reason, children });
+}
+function SharePanel({
+  grantees,
+  roles,
+  pending = [],
+  candidates,
+  defaultRole,
+  onAdd,
+  onRoleChange,
+  onRemove,
+  onRevokePending,
+  addWithoutEmail = false,
+  caption,
+  intro,
+  loading = false,
+  error,
+  formatError,
+  readOnly = false,
+  autoFocus,
+  labels: labelsProp
+}) {
+  const labels = useKitLabels("shareCard", DEFAULT_SHARE_CARD_LABELS, labelsProp);
+  const confirm = useConfirm();
+  const lock = useWriteLock();
+  const [email, setEmail] = useState("");
+  const [target, setTarget] = useState(null);
+  const [newRole, setNewRole] = useState(defaultRole ?? roles[0]?.key ?? "");
+  const [invalid, setInvalid] = useState(false);
+  const [busy, setBusy] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const roleOf = (key) => roles.find((r) => r.key === key);
+  const choosable = roles.length > 1;
+  const canAdd = !readOnly && onAdd !== void 0;
+  const run = async (key, action) => {
+    setBusy(key);
+    setFailure(null);
+    try {
+      await action();
+      return true;
+    } catch (caught) {
+      setFailure(formatError ? formatError(caught) : labels.failed);
+      return false;
+    } finally {
+      setBusy(null);
+    }
+  };
+  const address = email.trim();
+  const empty = !target && address === "";
+  const submit = async () => {
+    if (!onAdd || busy || lock.locked) return;
+    if (empty && !addWithoutEmail) return;
+    if (!target && address !== "" && !EMAIL_SHAPE.test(address)) {
+      setInvalid(true);
+      return;
+    }
+    const request = {
+      email: target ? null : address || null,
+      candidate: target,
+      role: newRole
+    };
+    if (await run("add", () => onAdd(request))) {
+      setEmail("");
+      setTarget(null);
+    }
+  };
+  const options = (candidates ?? []).map((c) => ({
+    value: String(c.id),
+    label: c.name,
+    sublabel: c.kind === "team" ? labels.team : c.email ?? void 0,
+    icon: c.icon ?? (c.kind === "team" ? /* @__PURE__ */ jsx(UsersRound, { className: "size-4" }) : void 0)
+  }));
+  const needle = (target ? "" : email).trim().toLowerCase();
+  const offers = needle !== "" && options.some((o) => o.label.toLowerCase().includes(needle) || (o.sublabel ?? "").toLowerCase().includes(needle));
+  const captionNode = typeof caption === "function" ? caption(target) : caption;
+  const shownError = error ?? failure;
+  const nobody = grantees.length === 0 && pending.length === 0;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    intro && /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-muted)]", children: intro }),
+    canAdd && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-1 gap-2",
+            choosable && "sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              Autocomplete,
+              {
+                label: addWithoutEmail ? labels.emailOptional : labels.email,
+                placeholder: labels.emailPlaceholder,
+                value: target ? target.name : email,
+                options,
+                open: offers ? void 0 : false,
+                fillOnSelect: false,
+                autoFocus,
+                inputMode: "email",
+                autoComplete: "off",
+                autoCapitalize: "none",
+                spellCheck: false,
+                disabled: busy !== null,
+                error: invalid ? labels.invalidEmail : void 0,
+                onChange: (text) => {
+                  setTarget(null);
+                  setInvalid(false);
+                  setFailure(null);
+                  setEmail(text);
+                },
+                onSelect: (option) => {
+                  const chosen = (candidates ?? []).find((c) => String(c.id) === option.value);
+                  if (!chosen) return;
+                  setInvalid(false);
+                  if (chosen.kind !== "team" && chosen.email) {
+                    setTarget(null);
+                    setEmail(chosen.email);
+                  } else {
+                    setTarget(chosen);
+                    setEmail("");
+                  }
+                },
+                onKeyDown: (event) => {
+                  if (event.key === "Enter") void submit();
+                }
+              }
+            ),
+            choosable && /* @__PURE__ */ jsx(
+              ToggleGroup,
+              {
+                "aria-label": labels.role,
+                options: roles.map((r) => ({ value: r.key, label: r.label })),
+                value: newRole,
+                onChange: setNewRole,
+                disabled: busy !== null,
+                caption: roles.some((r) => r.description) ? (key) => roleOf(key)?.description : void 0,
+                optionClassName: "sm:min-h-10"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 basis-48 space-y-1", children: [
+          target?.kind === "team" && /* @__PURE__ */ jsx(Caption, { children: labels.teamHint(target.name) }),
+          captionNode && /* @__PURE__ */ jsx(Caption, { as: "div", children: captionNode })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "brand",
+            commit: true,
+            pending: busy === "add",
+            disabled: busy !== null || empty && !addWithoutEmail,
+            onClick: () => void submit(),
+            className: "ms-auto",
+            children: [
+              /* @__PURE__ */ jsx(UserPlus, { className: "size-4", "aria-hidden": true }),
+              labels.add
+            ]
+          }
+        )
+      ] })
+    ] }),
+    shownError && /* @__PURE__ */ jsx(AlertBanner, { tone: "danger", size: "sm", children: shownError }),
+    loading ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ jsx(Spinner, { label: labels.loading }) }) : /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(SectionLabel, { as: "h4", children: labels.whoHasAccess }),
+      nobody && /* @__PURE__ */ jsx(Caption, { children: labels.nobodyYet }),
+      /* @__PURE__ */ jsxs("ul", { className: "divide-y divide-[var(--border)]", children: [
+        grantees.map((g) => {
+          const editable = !readOnly && !g.locked;
+          const changeable = editable && onRoleChange !== void 0 && choosable;
+          const key = `grantee:${g.id}`;
+          return /* @__PURE__ */ jsxs("li", { className: "space-y-1.5 py-2 first:pt-0 last:pb-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 basis-40", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-sm font-medium text-[var(--text-primary)]", children: [
+                  g.kind === "team" && /* @__PURE__ */ jsx(UsersRound, { className: "size-4 shrink-0", "aria-hidden": true }),
+                  /* @__PURE__ */ jsx("span", { "data-private": true, className: "truncate", children: g.name }),
+                  !changeable && /* @__PURE__ */ jsx(ShareRoleChip, { role: roleOf(g.role) })
+                ] }),
+                (g.kind === "team" || g.email) && /* @__PURE__ */ jsx("div", { "data-private": true, className: "truncate text-xs text-[var(--text-muted)]", children: g.kind === "team" ? labels.team : g.email })
+              ] }),
+              (changeable || editable && onRemove) && /* @__PURE__ */ jsxs("div", { className: "ms-auto flex shrink-0 items-center gap-1", children: [
+                changeable && /* @__PURE__ */ jsx(LockedRoleChoice, { reason: lock.locked ? lock.reason : void 0, children: /* @__PURE__ */ jsx(
+                  ToggleGroup,
+                  {
+                    size: "sm",
+                    "aria-label": labels.roleOf(g.name),
+                    options: roles.map((r) => ({ value: r.key, label: r.label })),
+                    value: g.role,
+                    disabled: busy !== null || lock.locked,
+                    onChange: (next) => {
+                      if (next !== g.role) void run(`role:${g.id}`, () => onRoleChange(g, next));
+                    }
+                  }
+                ) }),
+                editable && onRemove && /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    tone: "danger",
+                    size: "xs",
+                    commit: true,
+                    label: labels.remove,
+                    pending: busy === key,
+                    disabled: busy !== null,
+                    onClick: async () => {
+                      const yes = await confirm({
+                        title: labels.removeConfirm(g.name),
+                        confirmLabel: labels.remove,
+                        tone: "danger"
+                      });
+                      if (yes) await run(key, () => onRemove(g));
+                    },
+                    children: /* @__PURE__ */ jsx(Trash2, {})
+                  }
+                )
+              ] })
+            ] }),
+            g.extra
+          ] }, key);
+        }),
+        pending.map((p) => {
+          const key = `pending:${p.id}`;
+          const name = p.email || labels.openInvite;
+          return /* @__PURE__ */ jsx("li", { className: "py-2 first:pt-0 last:pb-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 basis-40", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-private": p.email ? true : void 0,
+                  className: cn(
+                    "truncate text-sm",
+                    p.email ? "text-[var(--text-primary)]" : "text-[var(--text-muted)]"
+                  ),
+                  children: name
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-1", children: [
+                /* @__PURE__ */ jsx(Chip, { size: "sm", shape: "square", tone: "warning", caps: true, children: labels.pending }),
+                /* @__PURE__ */ jsx(ShareRoleChip, { role: roleOf(p.role) })
+              ] })
+            ] }),
+            (p.link || !readOnly && onRevokePending) && /* @__PURE__ */ jsxs("div", { className: "ms-auto flex shrink-0 items-center gap-1", children: [
+              p.link && /* @__PURE__ */ jsx(CopyButton, { size: "xs", tone: "muted", text: p.link, label: labels.copyLink }),
+              !readOnly && onRevokePending && /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  tone: "danger",
+                  size: "xs",
+                  commit: true,
+                  label: labels.revokePending,
+                  pending: busy === key,
+                  disabled: busy !== null,
+                  onClick: async () => {
+                    const yes = await confirm({
+                      title: labels.revokePendingConfirm(name),
+                      confirmLabel: labels.revokePending,
+                      tone: "danger"
+                    });
+                    if (yes) await run(key, () => onRevokePending(p));
+                  },
+                  children: /* @__PURE__ */ jsx(Trash2, {})
+                }
+              )
+            ] })
+          ] }) }, key);
+        })
+      ] })
+    ] })
+  ] });
+}
+function ShareCard({ title, variant = "outline", className, ...panel }) {
+  return /* @__PURE__ */ jsxs(Card, { variant, padding: "sm", className: cn("space-y-3", className), children: [
+    title && /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[var(--text-primary)]", children: title }),
+    /* @__PURE__ */ jsx(SharePanel, { ...panel })
+  ] });
+}
+function ShareDialog({ open, onClose, size, className, title, description, ...panel }) {
+  const labels = useKitLabels("shareCard", DEFAULT_SHARE_CARD_LABELS, panel.labels);
+  return /* @__PURE__ */ jsx(
+    DialogFrame,
+    {
+      open,
+      onClose,
+      size,
+      className,
+      title: title ?? labels.dialogTitle,
+      description,
+      actions: (close) => /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: close, children: labels.close }),
+      children: /* @__PURE__ */ jsx(SharePanel, { ...panel })
+    }
+  );
+}
+export {
+  DEFAULT_SHARE_CARD_LABELS,
+  ShareCard,
+  ShareDialog,
+  SharePanel
+};
+//# sourceMappingURL=share-card.js.map