@meetreeve/ui 0.14.0 → 0.16.0

package/README.md

@@ -187,6 +187,47 @@ the host must define `--color-popover`, `--color-popover-foreground`,
 `--color-border` and `--color-ring`, and Tailwind consumers must include this
 package's `dist` as a `@source` (see ResponsiveHeader above).
 
+## StageRail (DEV-13855)
+
+Domain-free "flow of cards": cards joined by connectors, left to right.
+
+```tsx
+import { StageRail, StageCardShell, StageConnector, StageRailMini } from "@meetreeve/ui/stage-rail";
+
+<StageRail
+  stages={steps}
+  getId={(s) => s.id}
+  leading={<TriggerCard />}              // fixed: never reorders, nothing inserts before it
+  trailing={<ExitCard />}                // fixed: nothing inserts after it
+  selectedId={selected}
+  onSelect={setSelected}
+  onInsertAt={(i) => insertStep(i)}
+  reorderable
+  onReorder={(from, to) => moveStep(from, to)}
+  editable={isDraft}                     // false: no +, no reorder
+  ruler={[{ label: "Start" }, ...steps.map((s) => ({ label: s.day })), { label: "End" }]}
+  renderCard={(s, i, ctx) => (
+    <StageCardShell selected={ctx.selected} dragging={ctx.dragging} dragHandle={ctx.reorderable}
+      onSelect={ctx.select} index={i + 1} className="w-64">
+      …
+    </StageCardShell>
+  )}
+  renderConnector={(prev, next, i, ctx) => (  // prev/next null = a fixed slot
+    <StageConnector label="2 days" onInsert={ctx.canInsert ? ctx.insert : undefined} dropActive={ctx.dropActive} />
+  )}
+/>
+```
+
+- Reorder is opt-in and starts only from a `[data-stage-drag-handle]` (the
+  shell's `dragHandle`), so inputs and buttons in cards and connectors never
+  start a drag. Clicks and keys from interactive descendants never select.
+- Styling uses the consumer's shadcn theme tokens (`bg-card`, `ring-primary`,
+  `ring-destructive`, `text-muted-foreground`, …), so light and dark follow the
+  host. Spacing reads `--mf-stage-*` with built-in fallbacks.
+- Fit: measure `scrollRef` and feed `computeFitZoomFromExtent({ zoom, scrollWidth, clientWidth })`
+  back into `zoom`. It can only zoom out; to fit a rail that already fits, jump
+  to 1, re-measure, and correct down.
+
 ## Tokens
 
 ```ts

package/dist/index.d.mts

@@ -649,7 +649,17 @@ declare function ContextSwitcher({ items, activeRefId, onSelect, footer, placeho
  * optional grant methods, so a pre-CD-5 client keeps working unchanged.
  */
 type ConnectableTransport = "composio" | "native";
+/**
+ * The widest access an entry offers. "write" is retired (DEV-13661: no
+ * provider ever only acted, so its old label was never true); it stays in the
+ * union so an older server payload still type-checks, and it renders as
+ * "Read + write".
+ */
 type ConnectableCapability = "read" | "write" | "readwrite";
+/** What a connection lets Reeve do: ingest/query, or also act (DEV-13661). */
+type ConnectableAccess = "read" | "readwrite";
+/** The ONE access -> words mapping; nothing is labeled as acting alone (DEV-13661). */
+declare function accessLabel(access: ConnectableCapability): string;
 type ConnectionKind = "personal" | "org";
 type ConnectorGranteeType = "user" | "role";
 /** An RBAC role a grant can target, injected via the entry data (CD-2). */
@@ -806,7 +816,24 @@ interface ConnectableEntry {
          * picker never assumes an email shape or synthesizes this itself.
          */
         account_label?: string | null;
+        /**
+         * What this live connection lets Reeve do (DEV-13661). Absent on a
+         * pre-DEV-13661 payload, where the entry's `capability` stands in.
+         */
+        access?: ConnectableAccess | null;
     };
+    /**
+     * The accesses this entry may be connected as (DEV-13661), in
+     * ("read", "readwrite") order. More than one renders a Read / Read + write
+     * choice whose pick reaches `client.connect` as `opts.access`.
+     */
+    access_options?: ConnectableAccess[] | null;
+    /**
+     * Every connection provider key that belongs to this entry's provider
+     * (its own slug first), so a host can group stored connections onto one
+     * row per provider (DEV-13661).
+     */
+    provider_keys?: string[] | null;
     /** true = tenant has a live connection but the entry left the allowlist. */
     deprecated: boolean;
     /** Org-connect permission + role options for this entry (CD-4). */
@@ -841,9 +868,12 @@ interface ConnectorPickerClient {
      * composio -> open the returned connect_url; native may resolve with none.
      * `opts.kind` is additive (DEV-5654): a pre-CD-5 client declaring only
      * `connect(entry)` still satisfies this signature and simply ignores it.
+     * `opts.access` (DEV-13661) is the row's Read / Read + write pick, sent
+     * only when the entry offers a choice.
      */
     connect(entry: ConnectableEntry, opts?: {
         kind: ConnectionKind;
+        access?: ConnectableAccess;
     }): Promise<{
         connect_url?: string;
     }>;
@@ -895,4 +925,4 @@ interface ConnectorPickerProps {
 }
 declare function ConnectorPicker({ client, purpose, lens, layout, onConnected, }: ConnectorPickerProps): react.JSX.Element | null;
 
-export { type AppRungItem, AppSidebar, type AppSidebarBrand, type AppSidebarModuleDef, type AppSidebarProps, type AppSidebarTopItem, type Brand, BrandGlyph, type BrandGlyphProps, type ConnectableCapability, type ConnectableEntry, type ConnectableTransport, type ConnectionKind, type ConnectorConnectionHealth, type ConnectorCredentialField, type ConnectorCredentialTestResult, type ConnectorGrant, type ConnectorGrantInput, type ConnectorGranteeType, type ConnectorGuideStep, ConnectorPicker, type ConnectorPickerClient, type ConnectorPickerLens, type ConnectorPickerProps, type ConnectorRoleOption, type ConnectorSetupGuide, type ContextOrgGroup, ContextSwitcher, type ContextSwitcherItem, type ContextSwitcherProps, type FallbackModuleDef, Flyout, type FlyoutChild, type FlyoutProps, GLYPH_CANVAS_FILL, type GroupRungItem, type HeaderNavItem, InfoTip, type InfoTipProps, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, type OrgConnectPolicy, REEVE_ACCENT, ResponsiveHeader, type ResponsiveHeaderProps, type RungItem, type SidebarLadder, type SidebarLadderParsed, type SidebarRung, type UseLadderRungOptions, WORDMARK_WEIGHT, deriveFallbackLadder, faviconUrl, groupByOrg, reconcileLadder, resolveLadder, useLadderRung, useResponsivePlaceholder, zSidebarLadder };
+export { type AppRungItem, AppSidebar, type AppSidebarBrand, type AppSidebarModuleDef, type AppSidebarProps, type AppSidebarTopItem, type Brand, BrandGlyph, type BrandGlyphProps, type ConnectableAccess, type ConnectableCapability, type ConnectableEntry, type ConnectableTransport, type ConnectionKind, type ConnectorConnectionHealth, type ConnectorCredentialField, type ConnectorCredentialTestResult, type ConnectorGrant, type ConnectorGrantInput, type ConnectorGranteeType, type ConnectorGuideStep, ConnectorPicker, type ConnectorPickerClient, type ConnectorPickerLens, type ConnectorPickerProps, type ConnectorRoleOption, type ConnectorSetupGuide, type ContextOrgGroup, ContextSwitcher, type ContextSwitcherItem, type ContextSwitcherProps, type FallbackModuleDef, Flyout, type FlyoutChild, type FlyoutProps, GLYPH_CANVAS_FILL, type GroupRungItem, type HeaderNavItem, InfoTip, type InfoTipProps, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, type OrgConnectPolicy, REEVE_ACCENT, ResponsiveHeader, type ResponsiveHeaderProps, type RungItem, type SidebarLadder, type SidebarLadderParsed, type SidebarRung, type UseLadderRungOptions, WORDMARK_WEIGHT, accessLabel, deriveFallbackLadder, faviconUrl, groupByOrg, reconcileLadder, resolveLadder, useLadderRung, useResponsivePlaceholder, zSidebarLadder };

package/dist/index.d.ts

@@ -649,7 +649,17 @@ declare function ContextSwitcher({ items, activeRefId, onSelect, footer, placeho
  * optional grant methods, so a pre-CD-5 client keeps working unchanged.
  */
 type ConnectableTransport = "composio" | "native";
+/**
+ * The widest access an entry offers. "write" is retired (DEV-13661: no
+ * provider ever only acted, so its old label was never true); it stays in the
+ * union so an older server payload still type-checks, and it renders as
+ * "Read + write".
+ */
 type ConnectableCapability = "read" | "write" | "readwrite";
+/** What a connection lets Reeve do: ingest/query, or also act (DEV-13661). */
+type ConnectableAccess = "read" | "readwrite";
+/** The ONE access -> words mapping; nothing is labeled as acting alone (DEV-13661). */
+declare function accessLabel(access: ConnectableCapability): string;
 type ConnectionKind = "personal" | "org";
 type ConnectorGranteeType = "user" | "role";
 /** An RBAC role a grant can target, injected via the entry data (CD-2). */
@@ -806,7 +816,24 @@ interface ConnectableEntry {
          * picker never assumes an email shape or synthesizes this itself.
          */
         account_label?: string | null;
+        /**
+         * What this live connection lets Reeve do (DEV-13661). Absent on a
+         * pre-DEV-13661 payload, where the entry's `capability` stands in.
+         */
+        access?: ConnectableAccess | null;
     };
+    /**
+     * The accesses this entry may be connected as (DEV-13661), in
+     * ("read", "readwrite") order. More than one renders a Read / Read + write
+     * choice whose pick reaches `client.connect` as `opts.access`.
+     */
+    access_options?: ConnectableAccess[] | null;
+    /**
+     * Every connection provider key that belongs to this entry's provider
+     * (its own slug first), so a host can group stored connections onto one
+     * row per provider (DEV-13661).
+     */
+    provider_keys?: string[] | null;
     /** true = tenant has a live connection but the entry left the allowlist. */
     deprecated: boolean;
     /** Org-connect permission + role options for this entry (CD-4). */
@@ -841,9 +868,12 @@ interface ConnectorPickerClient {
      * composio -> open the returned connect_url; native may resolve with none.
      * `opts.kind` is additive (DEV-5654): a pre-CD-5 client declaring only
      * `connect(entry)` still satisfies this signature and simply ignores it.
+     * `opts.access` (DEV-13661) is the row's Read / Read + write pick, sent
+     * only when the entry offers a choice.
      */
     connect(entry: ConnectableEntry, opts?: {
         kind: ConnectionKind;
+        access?: ConnectableAccess;
     }): Promise<{
         connect_url?: string;
     }>;
@@ -895,4 +925,4 @@ interface ConnectorPickerProps {
 }
 declare function ConnectorPicker({ client, purpose, lens, layout, onConnected, }: ConnectorPickerProps): react.JSX.Element | null;
 
-export { type AppRungItem, AppSidebar, type AppSidebarBrand, type AppSidebarModuleDef, type AppSidebarProps, type AppSidebarTopItem, type Brand, BrandGlyph, type BrandGlyphProps, type ConnectableCapability, type ConnectableEntry, type ConnectableTransport, type ConnectionKind, type ConnectorConnectionHealth, type ConnectorCredentialField, type ConnectorCredentialTestResult, type ConnectorGrant, type ConnectorGrantInput, type ConnectorGranteeType, type ConnectorGuideStep, ConnectorPicker, type ConnectorPickerClient, type ConnectorPickerLens, type ConnectorPickerProps, type ConnectorRoleOption, type ConnectorSetupGuide, type ContextOrgGroup, ContextSwitcher, type ContextSwitcherItem, type ContextSwitcherProps, type FallbackModuleDef, Flyout, type FlyoutChild, type FlyoutProps, GLYPH_CANVAS_FILL, type GroupRungItem, type HeaderNavItem, InfoTip, type InfoTipProps, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, type OrgConnectPolicy, REEVE_ACCENT, ResponsiveHeader, type ResponsiveHeaderProps, type RungItem, type SidebarLadder, type SidebarLadderParsed, type SidebarRung, type UseLadderRungOptions, WORDMARK_WEIGHT, deriveFallbackLadder, faviconUrl, groupByOrg, reconcileLadder, resolveLadder, useLadderRung, useResponsivePlaceholder, zSidebarLadder };
+export { type AppRungItem, AppSidebar, type AppSidebarBrand, type AppSidebarModuleDef, type AppSidebarProps, type AppSidebarTopItem, type Brand, BrandGlyph, type BrandGlyphProps, type ConnectableAccess, type ConnectableCapability, type ConnectableEntry, type ConnectableTransport, type ConnectionKind, type ConnectorConnectionHealth, type ConnectorCredentialField, type ConnectorCredentialTestResult, type ConnectorGrant, type ConnectorGrantInput, type ConnectorGranteeType, type ConnectorGuideStep, ConnectorPicker, type ConnectorPickerClient, type ConnectorPickerLens, type ConnectorPickerProps, type ConnectorRoleOption, type ConnectorSetupGuide, type ContextOrgGroup, ContextSwitcher, type ContextSwitcherItem, type ContextSwitcherProps, type FallbackModuleDef, Flyout, type FlyoutChild, type FlyoutProps, GLYPH_CANVAS_FILL, type GroupRungItem, type HeaderNavItem, InfoTip, type InfoTipProps, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, type OrgConnectPolicy, REEVE_ACCENT, ResponsiveHeader, type ResponsiveHeaderProps, type RungItem, type SidebarLadder, type SidebarLadderParsed, type SidebarRung, type UseLadderRungOptions, WORDMARK_WEIGHT, accessLabel, deriveFallbackLadder, faviconUrl, groupByOrg, reconcileLadder, resolveLadder, useLadderRung, useResponsivePlaceholder, zSidebarLadder };

package/dist/index.js

@@ -45,6 +45,7 @@ __export(src_exports, {
   REEVE_ACCENT: () => REEVE_ACCENT,
   ResponsiveHeader: () => ResponsiveHeader,
   WORDMARK_WEIGHT: () => WORDMARK_WEIGHT,
+  accessLabel: () => accessLabel,
   deriveFallbackLadder: () => deriveFallbackLadder,
   faviconUrl: () => faviconUrl,
   groupByOrg: () => groupByOrg,
@@ -1463,6 +1464,9 @@ function ContextSwitcher({
 // src/connector-picker.tsx
 var import_react9 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+function accessLabel(access) {
+  return access === "read" ? "Read" : "Read + write";
+}
 var DEFAULT_CONNECT_ERROR = "Couldn't start the connection. Please try again.";
 var MAX_RECONNECT_REFOCUS_CHECKS = 3;
 var RECONNECT_UNCONFIRMED_ERROR = "Couldn't confirm the reconnect \u2014 the connection still reports unhealthy. Try again, or disconnect and reconnect.";
@@ -1484,10 +1488,17 @@ function hasUngroundedPlaceholder(text) {
 function isDevEnvironment() {
   return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
 }
-function capabilityLabel(capability) {
-  if (capability === "read") return "Read only";
-  if (capability === "write") return "Write only";
-  return "Read & write";
+function tileAccess(entry) {
+  if (entry.connection.status === "connected" && entry.connection.access) {
+    return entry.connection.access;
+  }
+  return entry.capability;
+}
+function accessChoices(entry) {
+  const options = (entry.access_options ?? []).filter(
+    (a) => a === "read" || a === "readwrite"
+  );
+  return options.length > 1 ? options : [];
 }
 function errorMessageFrom(err, fallback) {
   return err instanceof Error && err.message ? err.message : fallback;
@@ -1606,7 +1617,7 @@ function ConnectorPicker({
     };
   }, [gated, refreshAfterReturn]);
   const handleConnect = (0, import_react9.useCallback)(
-    async (entry, kind) => {
+    async (entry, kind, access) => {
       if (isUnhealthy(entry)) {
         reconnectingRef.current.add(entry.slug);
       } else {
@@ -1615,7 +1626,10 @@ function ConnectorPicker({
       reconnectChecksRef.current.delete(entry.slug);
       setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "connecting" } }));
       try {
-        const result = await clientRef.current.connect(entry, { kind });
+        const result = await clientRef.current.connect(
+          entry,
+          access ? { kind, access } : { kind }
+        );
         if (result?.connect_url) {
           window.open(result.connect_url, "_blank", "noopener,noreferrer");
           return;
@@ -1805,6 +1819,9 @@ function ConnectorTile({
   const errorMessage = ui?.kind === "error" ? ui.message : null;
   const unhealthy = isUnhealthy(entry);
   const [kind, setKind] = (0, import_react9.useState)("personal");
+  const choices = accessChoices(entry);
+  const [access, setAccess] = (0, import_react9.useState)(null);
+  const connectAccess = choices.length ? access && choices.includes(access) ? access : choices[choices.length - 1] : void 0;
   const [sharingOpen, setSharingOpen] = (0, import_react9.useState)(false);
   const [setupOpen, setSetupOpen] = (0, import_react9.useState)(false);
   const credentialFields = entry.credential_fields ?? [];
@@ -1839,7 +1856,7 @@ function ConnectorTile({
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-testid": `connector-capability-${entry.slug}`, children: capabilityLabel(entry.capability) }),
+              (isConnected || choices.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-testid": `connector-capability-${entry.slug}`, children: accessLabel(tileAccess(entry)) }),
               isConnected && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
                 /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
@@ -1891,6 +1908,32 @@ function ConnectorTile({
                 children: attribution
               }
             ),
+            !isConnected && choices.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "div",
+              {
+                "data-testid": `connector-access-choice-${entry.slug}`,
+                role: "group",
+                "aria-label": "Access",
+                className: "mt-1 flex items-center gap-1",
+                children: choices.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": `connector-access-${option}-${entry.slug}`,
+                    "aria-pressed": connectAccess === option,
+                    disabled: isConnecting,
+                    onClick: () => setAccess(option),
+                    className: cn(
+                      "rounded-full border px-2 py-0.5 text-[11px]",
+                      connectAccess === option ? "border-primary bg-primary/10 font-medium" : "border-border text-muted-foreground",
+                      "disabled:opacity-50"
+                    ),
+                    children: accessLabel(option)
+                  },
+                  option
+                ))
+              }
+            ),
             !isConnected && orgPermitted && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "div",
               {
@@ -1944,7 +1987,7 @@ function ConnectorTile({
               {
                 type: "button",
                 "data-testid": `connector-reconnect-${entry.slug}`,
-                onClick: () => onConnect(entry, entry.connection.kind ?? "personal"),
+                onClick: () => onConnect(entry, entry.connection.kind ?? "personal", entry.connection.access ?? void 0),
                 disabled: isConnecting || isDisconnecting,
                 className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
                 children: isConnecting ? "Reconnecting\u2026" : "Reconnect"
@@ -1983,7 +2026,7 @@ function ConnectorTile({
               {
                 type: "button",
                 "data-testid": `connector-connect-${entry.slug}`,
-                onClick: () => onConnect(entry, connectKind),
+                onClick: () => onConnect(entry, connectKind, connectAccess),
                 disabled: isConnecting,
                 className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
                 children: isConnecting ? "Connecting\u2026" : "Connect"
@@ -2556,6 +2599,7 @@ function ManageSharing({
   REEVE_ACCENT,
   ResponsiveHeader,
   WORDMARK_WEIGHT,
+  accessLabel,
   deriveFallbackLadder,
   faviconUrl,
   groupByOrg,

package/dist/index.mjs

@@ -1407,6 +1407,9 @@ function ContextSwitcher({
 // src/connector-picker.tsx
 import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef5, useState as useState7 } from "react";
 import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function accessLabel(access) {
+  return access === "read" ? "Read" : "Read + write";
+}
 var DEFAULT_CONNECT_ERROR = "Couldn't start the connection. Please try again.";
 var MAX_RECONNECT_REFOCUS_CHECKS = 3;
 var RECONNECT_UNCONFIRMED_ERROR = "Couldn't confirm the reconnect \u2014 the connection still reports unhealthy. Try again, or disconnect and reconnect.";
@@ -1428,10 +1431,17 @@ function hasUngroundedPlaceholder(text) {
 function isDevEnvironment() {
   return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
 }
-function capabilityLabel(capability) {
-  if (capability === "read") return "Read only";
-  if (capability === "write") return "Write only";
-  return "Read & write";
+function tileAccess(entry) {
+  if (entry.connection.status === "connected" && entry.connection.access) {
+    return entry.connection.access;
+  }
+  return entry.capability;
+}
+function accessChoices(entry) {
+  const options = (entry.access_options ?? []).filter(
+    (a) => a === "read" || a === "readwrite"
+  );
+  return options.length > 1 ? options : [];
 }
 function errorMessageFrom(err, fallback) {
   return err instanceof Error && err.message ? err.message : fallback;
@@ -1550,7 +1560,7 @@ function ConnectorPicker({
     };
   }, [gated, refreshAfterReturn]);
   const handleConnect = useCallback4(
-    async (entry, kind) => {
+    async (entry, kind, access) => {
       if (isUnhealthy(entry)) {
         reconnectingRef.current.add(entry.slug);
       } else {
@@ -1559,7 +1569,10 @@ function ConnectorPicker({
       reconnectChecksRef.current.delete(entry.slug);
       setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "connecting" } }));
       try {
-        const result = await clientRef.current.connect(entry, { kind });
+        const result = await clientRef.current.connect(
+          entry,
+          access ? { kind, access } : { kind }
+        );
         if (result?.connect_url) {
           window.open(result.connect_url, "_blank", "noopener,noreferrer");
           return;
@@ -1749,6 +1762,9 @@ function ConnectorTile({
   const errorMessage = ui?.kind === "error" ? ui.message : null;
   const unhealthy = isUnhealthy(entry);
   const [kind, setKind] = useState7("personal");
+  const choices = accessChoices(entry);
+  const [access, setAccess] = useState7(null);
+  const connectAccess = choices.length ? access && choices.includes(access) ? access : choices[choices.length - 1] : void 0;
   const [sharingOpen, setSharingOpen] = useState7(false);
   const [setupOpen, setSetupOpen] = useState7(false);
   const credentialFields = entry.credential_fields ?? [];
@@ -1783,7 +1799,7 @@ function ConnectorTile({
               )
             ] }),
             /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsx8("span", { "data-testid": `connector-capability-${entry.slug}`, children: capabilityLabel(entry.capability) }),
+              (isConnected || choices.length === 0) && /* @__PURE__ */ jsx8("span", { "data-testid": `connector-capability-${entry.slug}`, children: accessLabel(tileAccess(entry)) }),
               isConnected && /* @__PURE__ */ jsxs7(Fragment4, { children: [
                 /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: "\xB7" }),
                 /* @__PURE__ */ jsxs7(
@@ -1835,6 +1851,32 @@ function ConnectorTile({
                 children: attribution
               }
             ),
+            !isConnected && choices.length > 0 && /* @__PURE__ */ jsx8(
+              "div",
+              {
+                "data-testid": `connector-access-choice-${entry.slug}`,
+                role: "group",
+                "aria-label": "Access",
+                className: "mt-1 flex items-center gap-1",
+                children: choices.map((option) => /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": `connector-access-${option}-${entry.slug}`,
+                    "aria-pressed": connectAccess === option,
+                    disabled: isConnecting,
+                    onClick: () => setAccess(option),
+                    className: cn(
+                      "rounded-full border px-2 py-0.5 text-[11px]",
+                      connectAccess === option ? "border-primary bg-primary/10 font-medium" : "border-border text-muted-foreground",
+                      "disabled:opacity-50"
+                    ),
+                    children: accessLabel(option)
+                  },
+                  option
+                ))
+              }
+            ),
             !isConnected && orgPermitted && /* @__PURE__ */ jsxs7(
               "div",
               {
@@ -1888,7 +1930,7 @@ function ConnectorTile({
               {
                 type: "button",
                 "data-testid": `connector-reconnect-${entry.slug}`,
-                onClick: () => onConnect(entry, entry.connection.kind ?? "personal"),
+                onClick: () => onConnect(entry, entry.connection.kind ?? "personal", entry.connection.access ?? void 0),
                 disabled: isConnecting || isDisconnecting,
                 className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
                 children: isConnecting ? "Reconnecting\u2026" : "Reconnect"
@@ -1927,7 +1969,7 @@ function ConnectorTile({
               {
                 type: "button",
                 "data-testid": `connector-connect-${entry.slug}`,
-                onClick: () => onConnect(entry, connectKind),
+                onClick: () => onConnect(entry, connectKind, connectAccess),
                 disabled: isConnecting,
                 className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
                 children: isConnecting ? "Connecting\u2026" : "Connect"
@@ -2499,6 +2541,7 @@ export {
   REEVE_ACCENT,
   ResponsiveHeader,
   WORDMARK_WEIGHT,
+  accessLabel,
   deriveFallbackLadder,
   faviconUrl,
   groupByOrg,

package/dist/stage-rail/index.d.mts

@@ -0,0 +1,173 @@
+import * as react from 'react';
+import { ReactNode, Ref, HTMLAttributes } from 'react';
+
+interface StageCardContext {
+    /** 0-based position in `stages`. */
+    index: number;
+    selected: boolean;
+    /** This card is the one being pointer-dragged. */
+    dragging: boolean;
+    /** Pointer / Alt+arrow reorder is live — render a drag handle (`StageCardShell dragHandle`). */
+    reorderable: boolean;
+    /** Calls `onSelect(getId(stage))`. Wire it to `StageCardShell onSelect`. */
+    select: () => void;
+}
+interface StageConnectorContext {
+    /** `editable` and `onInsertAt` is set. */
+    canInsert: boolean;
+    /** Calls `onInsertAt(i)`. */
+    insert: () => void;
+    /** A pointer drag would land a stage in this gap. */
+    dropActive: boolean;
+}
+interface StageRailProps<T> {
+    stages: T[];
+    getId: (stage: T) => string;
+    renderCard: (stage: T, index: number, ctx: StageCardContext) => ReactNode;
+    /**
+     * The link between two rendered slots. `prev`/`next` are null for a fixed
+     * `leading`/`trailing` slot; `index` is where an inserted stage would land.
+     * Return null for no gap. Defaults to an inline `StageConnector`.
+     */
+    renderConnector?: (prev: T | null, next: T | null, index: number, ctx: StageConnectorContext) => ReactNode;
+    /** Fixed first slot (e.g. a trigger): never reorderable, nothing inserts before it. */
+    leading?: ReactNode;
+    /** Fixed last slot (e.g. an exit or an append target): nothing inserts after it. */
+    trailing?: ReactNode;
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+    onInsertAt?: (index: number) => void;
+    /** Array-move semantics: `to` is the moved stage's final index. */
+    onReorder?: (from: number, to: number) => void;
+    /** Opt in to pointer (drag handle) and Alt+←/→ reorder. */
+    reorderable?: boolean;
+    /** false = read-only: no insert, no reorder. */
+    editable?: boolean;
+    /** One label per RENDERED slot, fixed slots included, drawn above it. */
+    ruler?: {
+        label: ReactNode;
+    }[];
+    /** CSS zoom on the track; pair with `computeFitZoomFromExtent` over `scrollRef`. */
+    zoom?: number;
+    /** The horizontal scroll element (measure scrollWidth/clientWidth for fit). */
+    scrollRef?: Ref<HTMLDivElement>;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * A horizontal "flow of cards": leading slot → stage cards → trailing slot,
+ * with connectors between every pair. Domain-free — cards and connectors are
+ * the consumer's render props. Snap-scrolls below md.
+ */
+declare function StageRail<T>({ stages, getId, renderCard, renderConnector, leading, trailing, selectedId, onSelect, onInsertAt, onReorder, reorderable, editable, ruler, zoom, scrollRef, className, "aria-label": ariaLabel, }: StageRailProps<T>): react.JSX.Element;
+
+/** True when `target` is (inside) an interactive element nested in `root` — not `root` itself. */
+declare function isInteractiveTarget(target: EventTarget | null, root: Element): boolean;
+interface StageCardShellProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Click / Enter / Space on the card itself. Never fires from interactive descendants. */
+    onSelect?: () => void;
+    selected?: boolean;
+    disabled?: boolean;
+    /** Visual only — the body is never replaced. */
+    pending?: boolean;
+    /** Destructive ring; wins over `selected`. */
+    error?: boolean;
+    /** Dims the card while a drag (yours or StageRail's) is in flight. */
+    dragging?: boolean;
+    /** Show the visual drag handle (StageRail's pointer reorder grabs it; HTML5 consumers use `draggable`). */
+    dragHandle?: boolean;
+    /** Shown verbatim in the bottom-left dot (pass the 1-based number). Omitted when undefined. */
+    index?: number;
+    topLeft?: ReactNode;
+    topRight?: ReactNode;
+    /** Centred overlay revealed on card hover (and focus-within unless `overlayRevealOnFocus` is false). */
+    overlay?: ReactNode;
+    /** Also reveal `overlay` while focus is inside the card. false for bodies that hold focus (e.g. an iframe). */
+    overlayRevealOnFocus?: boolean;
+    /** Classes for the drag handle, merged last. */
+    handleClassName?: string;
+    /** Classes for the index dot, merged last. */
+    indexClassName?: string;
+    /** Bottom strip (e.g. an inline error). */
+    alert?: ReactNode;
+}
+/**
+ * The frame every stage card shares: ONE root div (ref + rest props land on
+ * it, so Radix `asChild` triggers and IntersectionObserver refs work), the
+ * consumer's body full-bleed inside, and absolutely-positioned slots over it.
+ * Stateless; hover is CSS-only via the `group/card` name.
+ */
+declare const StageCardShell: react.ForwardRefExoticComponent<StageCardShellProps & react.RefAttributes<HTMLDivElement>>;
+
+interface StageConnectorProps extends HTMLAttributes<HTMLElement> {
+    /** `inline` sits between cards; `append` is the tall end-of-rail target. */
+    variant?: "inline" | "append";
+    /** Without it (or when `disabled`) the inline `+` is not rendered and the append button is disabled. */
+    onInsert?: () => void;
+    disabled?: boolean;
+    /** Highlight as the live drop target (shows the inline `+` without hover). */
+    dropActive?: boolean;
+    /** Accessible name of the insert control. */
+    insertLabel?: string;
+    /** Inline: text / controls under the link (e.g. "2 days", an inline input). */
+    label?: ReactNode;
+    /** Inline: chip above the link (e.g. "38 waiting"). */
+    badge?: ReactNode;
+    /** Inline: 0–1 volume, scales the link's thickness (1px → 6px). */
+    weight?: number;
+    /** Append: the card height to match. Width is max(80, height * 0.45). */
+    height?: number;
+    /** Append: visible caption. */
+    appendText?: ReactNode;
+    /** Inline: show the `+` without hover on touch (hover:none) devices. */
+    touchAlwaysVisible?: boolean;
+    /** Inline: classes for the `+` button, merged last (its drop-active state included). */
+    insertClassName?: string;
+}
+/**
+ * The link between two stage cards. Rest props (HTML5 onDragOver / onDrop …)
+ * land on the hit-area root. Inline with no label/badge/weight it is exactly
+ * the 36×36 hit area — zero extra size. Horizontal only.
+ */
+declare function StageConnector({ variant, onInsert, disabled, dropActive, insertLabel, label, badge, weight, height, appendText, touchAlwaysVisible, insertClassName, className, style, onClick, ...rest }: StageConnectorProps): react.JSX.Element;
+
+interface StageRailMiniDot {
+    /** Names the stage in the accessible summary and the dot's tooltip. */
+    label: string;
+    key?: string;
+    /** Colour per kind, e.g. "bg-primary". */
+    className?: string;
+    /** Optional tiny icon; the dot grows to fit it. */
+    icon?: ReactNode;
+}
+/** Dot-sequence thumbnail of a rail for list rows: one dot per stage. */
+declare function StageRailMini({ dots, className, "aria-label": ariaLabel, }: {
+    dots: StageRailMiniDot[];
+    className?: string;
+    "aria-label"?: string;
+}): react.JSX.Element;
+
+/**
+ * Zoom that fits a rail's content into its scroll viewport, derived from the
+ * scroller's REAL rendered extent (ported from the Studio chain, DEV-3681:
+ * a closed-form gap model no-opped on overflowing chains).
+ *
+ * `zoom` is the zoom the extent was rendered AT. Content scales linearly with
+ * zoom; the scroller's own horizontal padding (`pad`, StageRail's md+ px-8 =
+ * 64) doesn't, so both extents shed it before the ratio. Clamped to
+ * [min, max] and rounded to 2dp.
+ *
+ * Caveat: DOM scrollWidth floor-clamps at clientWidth, so content that already
+ * fits measures ratio 1 and this echoes `zoom` — it can only zoom OUT. To fit
+ * a fitting rail, jump to `max`, re-measure, and correct down if it overshot.
+ */
+declare function computeFitZoomFromExtent({ zoom, scrollWidth, clientWidth, pad, min, max, }: {
+    zoom: number;
+    scrollWidth: number;
+    clientWidth: number;
+    pad?: number;
+    min?: number;
+    max?: number;
+}): number;
+
+export { type StageCardContext, StageCardShell, type StageCardShellProps, StageConnector, type StageConnectorContext, type StageConnectorProps, StageRail, StageRailMini, type StageRailMiniDot, type StageRailProps, computeFitZoomFromExtent, isInteractiveTarget };