@estiva-app/ui 0.60.2 → 0.62.0

package/dist/MembersDialog.d.ts

@@ -21,13 +21,16 @@ export interface MembersDialogProps {
     /** The number in the title's chip. Defaults to how many rows there are. */
     count?: number;
     /**
-     * The viewer's own row on top: "Join" when they are not in, "Leave" when
-     * they are. Absent while it is not known, or where they cannot change it —
-     * no row is better than a wrong one.
+     * What the viewer can do: "Leave" on their own row when they are in, which
+     * is drawn first; a "Join" row on top when they are not. Absent while it is
+     * not known, or where they cannot change it — no button is better than a
+     * wrong one.
      */
     self?: {
         action: MembersDialogSelfAction;
         onToggle: () => void | Promise<unknown>;
+        /** The viewer's id: the row in `members` that carries Leave and comes first. */
+        id: string;
     };
     /** Who "Add members" may offer. Members are left out by id. */
     candidates?: MembersDialogCandidate[];
@@ -49,8 +52,10 @@ export interface MembersDialogProps {
  *
  * Moved from Peek's `MembersDialog` (2026-10-06; Katerina's design of 22 July,
  * with the row and inset rulings of 15 September). Two layers in one dialog:
- * the roster, with the viewer's Join or Leave and "Add members" on top, and the
- * add layer, whose back arrow returns to the roster. Adding returns to the
+ * the roster, with "Add members" (and Join, for a non-member) on top, and the
+ * add layer, whose back arrow returns to the roster. Leave is a small red
+ * button on the viewer's own row, which always comes first (Katerina, 8
+ * October: a Leave row on top looked like an invite, the same as Add members). Adding returns to the
  * roster so the new people are visible at once.
  */
 export declare function MembersDialog({ members, count, self, candidates, onAdd, note, initialView, onClose }: MembersDialogProps): import("react").JSX.Element;

package/dist/MembersDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MembersDialog.d.ts","sourceRoot":"","sources":["../src/MembersDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKvD,OAAO,EAAa,KAAK,eAAe,EAAE,MAAM,aAAa,CAAA;AAO7D,0EAA0E;AAC1E,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,mEAAmE;AACnE,MAAM,WAAW,sBAAuB,SAAQ,eAAe;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,oFAAoF;AACpF,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAA;AAEtD,MAAM,WAAW,kBAAkB;IACjC,iGAAiG;IACjG,OAAO,EAAE,mBAAmB,EAAE,CAAA;IAC9B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE;QACL,MAAM,EAAE,uBAAuB,CAAA;QAC/B,QAAQ,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;KACxC,CAAA;IACD,+DAA+D;IAC/D,UAAU,CAAC,EAAE,sBAAsB,EAAE,CAAA;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,EAAE,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAA;IACtF,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAID;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,UAAe,EAAE,KAAK,EAAE,IAAI,EAAE,WAAoB,EAAE,OAAO,EAAE,EAAE,kBAAkB,+BAgHtI"}
+{"version":3,"file":"MembersDialog.d.ts","sourceRoot":"","sources":["../src/MembersDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKvD,OAAO,EAAa,KAAK,eAAe,EAAE,MAAM,aAAa,CAAA;AAO7D,0EAA0E;AAC1E,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,mEAAmE;AACnE,MAAM,WAAW,sBAAuB,SAAQ,eAAe;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,oFAAoF;AACpF,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAA;AAEtD,MAAM,WAAW,kBAAkB;IACjC,iGAAiG;IACjG,OAAO,EAAE,mBAAmB,EAAE,CAAA;IAC9B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;OAKG;IACH,IAAI,CAAC,EAAE;QACL,MAAM,EAAE,uBAAuB,CAAA;QAC/B,QAAQ,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;QACvC,gFAAgF;QAChF,EAAE,EAAE,MAAM,CAAA;KACX,CAAA;IACD,+DAA+D;IAC/D,UAAU,CAAC,EAAE,sBAAsB,EAAE,CAAA;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,EAAE,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAA;IACtF,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAID;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,UAAe,EAAE,KAAK,EAAE,IAAI,EAAE,WAAoB,EAAE,OAAO,EAAE,EAAE,kBAAkB,+BA0HtI"}

package/dist/ShowMore.d.ts

@@ -14,6 +14,10 @@ import { type ReactNode } from 'react';
  *
  * Focus arriving inside the cut content opens it: a field or a link there,
  * reached by Tab or a click, is never worked on out of sight.
+ *
+ * `action` is one more small button on the toggle's row, at its right
+ * (Katerina, 8 October: Peek's block card puts "Open in Estiva Ship" level with
+ * Show more). The row is drawn for it whether or not the content is cut.
  */
 export interface ShowMoreProps {
     children: ReactNode;
@@ -21,7 +25,9 @@ export interface ShowMoreProps {
     maxHeight?: number;
     /** What the content sits on, for the fade to end in: a panel's `surface` (default), or an inset card's `inset`. */
     surface?: 'surface' | 'inset';
+    /** A small muted `Button` with a leading icon, at the right of the toggle's row: the way out to where the content lives. Its words end where the content does. */
+    action?: ReactNode;
     className?: string;
 }
-export declare function ShowMore({ children, maxHeight, surface, className }: ShowMoreProps): import("react").JSX.Element;
+export declare function ShowMore({ children, maxHeight, surface, action, className }: ShowMoreProps): import("react").JSX.Element;
 //# sourceMappingURL=ShowMore.d.ts.map

package/dist/ShowMore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShowMore.d.ts","sourceRoot":"","sources":["../src/ShowMore.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIzE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,SAAS,CAAA;IACnB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mHAAmH;IACnH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,OAAmB,EAAE,SAAS,EAAE,EAAE,aAAa,+BA+BnG"}
+{"version":3,"file":"ShowMore.d.ts","sourceRoot":"","sources":["../src/ShowMore.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKzE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,SAAS,CAAA;IACnB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mHAAmH;IACnH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,kKAAkK;IAClK,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,OAAmB,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,aAAa,+BAkC3G"}

package/dist/index.js

@@ -1731,6 +1731,9 @@ function MembersDialog({ members, count, self, candidates = [], onAdd, note, ini
     setChosen([]);
     setView("list");
   };
+  const ownRow = self?.action === "leave" ? members.find((m) => m.id === self.id) : void 0;
+  const roster = ownRow ? [ownRow, ...members.filter((m) => m !== ownRow)] : members;
+  const selfOnTop = self && !ownRow;
   if (view === "add" && onAdd) {
     return /* @__PURE__ */ jsx26(
       DialogShell,
@@ -1774,8 +1777,8 @@ function MembersDialog({ members, count, self, candidates = [], onAdd, note, ini
       bodyMaxHeight: "max-h-[400px]",
       bodyClassName: "p-0 py-2",
       children: [
-        (self || onAdd) && /* @__PURE__ */ jsxs17("div", { className: "flex flex-col px-2", children: [
-          self && /* @__PURE__ */ jsx26(
+        (selfOnTop || onAdd) && /* @__PURE__ */ jsxs17("div", { className: "flex flex-col px-2", children: [
+          selfOnTop && /* @__PURE__ */ jsx26(
             MenuItem,
             {
               size: "tall",
@@ -1797,12 +1800,13 @@ function MembersDialog({ members, count, self, candidates = [], onAdd, note, ini
             }
           )
         ] }),
-        members.map((member) => /* @__PURE__ */ jsxs17("div", { className: "flex h-12 items-center gap-3 px-5", children: [
+        roster.map((member) => /* @__PURE__ */ jsxs17("div", { className: "flex h-12 items-center gap-3 px-5", children: [
           /* @__PURE__ */ jsx26(Avatar, { size: 32, name: member.name, src: member.picture }),
           /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-[2px]", children: [
             /* @__PURE__ */ jsx26("div", { className: "truncate text-body-2 text-text-primary", children: member.name }),
             member.caption && /* @__PURE__ */ jsx26("div", { className: "truncate text-caption text-text-secondary", children: member.caption })
-          ] })
+          ] }),
+          member === ownRow && /* @__PURE__ */ jsx26(Button, { variant: "destructive", size: "small", disabled: toggling, onClick: () => void toggle(), children: "Leave" })
         ] }, member.id)),
         note && /* @__PURE__ */ jsx26("div", { className: "px-5 pb-2 pt-3 text-caption text-text-secondary", children: note })
       ]
@@ -3705,9 +3709,10 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
 
 // src/ShowMore.tsx
 import { useLayoutEffect as useLayoutEffect5, useRef as useRef13, useState as useState12 } from "react";
+import { IconChevronDown as IconChevronDown4, IconChevronUp } from "@tabler/icons-react";
 import { jsx as jsx54, jsxs as jsxs38 } from "react/jsx-runtime";
 var FADE_CLASSES = { surface: "from-bg-surface", inset: "from-bg-inset" };
-function ShowMore({ children, maxHeight = 96, surface = "surface", className }) {
+function ShowMore({ children, maxHeight = 96, surface = "surface", action, className }) {
   const box = useRef13(null);
   const [open, setOpen] = useState12(false);
   const [overflows, setOverflows] = useState12(false);
@@ -3727,10 +3732,27 @@ function ShowMore({ children, maxHeight = 96, surface = "surface", className })
       children,
       cut && /* @__PURE__ */ jsx54("div", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent", FADE_CLASSES[surface]) })
     ] }),
-    overflows && // `-ml-1.5`: the small button's own 6px inset, so its words start where the content's do.
-    /* @__PURE__ */ jsx54(Button, { variant: "muted", size: "small", className: "-ml-1.5 mt-1", "aria-expanded": open, onClick: () => setOpen((o) => !o), children: open ? "Show less" : "Show more" })
+    action ? /* @__PURE__ */ jsxs38("div", { className: cn("mt-1 flex w-full items-center gap-2", overflows ? "justify-between" : "justify-end"), children: [
+      overflows && /* @__PURE__ */ jsx54(Toggle, { open, onToggle: () => setOpen((o) => !o) }),
+      /* @__PURE__ */ jsx54("div", { className: "-mr-2 flex shrink-0", children: action })
+    ] }) : overflows && /* @__PURE__ */ jsx54(Toggle, { open, onToggle: () => setOpen((o) => !o), className: "mt-1" })
   ] });
 }
+function Toggle({ open, onToggle, className }) {
+  const Icon = open ? IconChevronUp : IconChevronDown4;
+  return /* @__PURE__ */ jsx54(
+    Button,
+    {
+      variant: "outlined",
+      size: "small",
+      leadingIcon: /* @__PURE__ */ jsx54(Icon, { stroke: 1.5, className: "size-3.5" }),
+      className,
+      "aria-expanded": open,
+      onClick: onToggle,
+      children: open ? "Show less" : "Show more"
+    }
+  );
+}
 
 // src/Toolbar.tsx
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
@@ -3908,13 +3930,13 @@ function Property({ label, layout = "row", children, className }) {
 }
 
 // src/Reaction.tsx
-import { Toggle } from "@base-ui/react/toggle";
+import { Toggle as Toggle2 } from "@base-ui/react/toggle";
 import { jsx as jsx61, jsxs as jsxs42 } from "react/jsx-runtime";
 function Reaction({ emoji, count, pressed = false, className, ...props }) {
   return (
     // @estiva-escape(no-copied-look): W1 (Katerina, 24 September: leave alone): a reaction pill shares four words with a field's box by coincidence
     /* @__PURE__ */ jsxs42(
-      Toggle,
+      Toggle2,
       {
         pressed,
         className: cn(