@drakkar.software/octospaces-ui 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -0,0 +1,34 @@
+# Changelog — @drakkar.software/octospaces-ui
+
+## 0.4.2
+
+### `SpaceSwitcher` — `onTriggerPress` override
+
+Added an optional `onTriggerPress?: () => void` prop to `SpaceSwitcher`.
+
+When provided:
+- The trigger button's `onPress` calls `onTriggerPress` instead of opening the
+  built-in dropdown.
+- The chevron icon is hidden (the button no longer implies a picker).
+- The `renderContainer` callback is never invoked.
+
+Use this on surfaces where a dropdown is redundant (e.g. a desktop sidebar that
+already has a rail for space switching) and a single tap to navigate to the
+space-details page is the right UX.
+
+Fully backward-compatible — existing consumers that do not pass `onTriggerPress`
+retain identical behaviour.
+
+---
+
+## 0.4.1
+
+- `Lightbox` component added (headless fullscreen media viewer + zoom).
+
+## 0.4.0
+
+- `Sidebar`, `SidebarHeader`, `SidebarActionButton`, `SidebarItem` — shared
+  desktop sidebar panel shell and primitives.
+- `SpaceSwitcher` — headless space picker trigger with `renderContainer` delegation.
+- `sidebarPanel` added to `Palette` type (panel background distinct from rail
+  background `sidebar`).

package/dist/index.d.ts

@@ -649,12 +649,13 @@ declare function SidebarItem({ label, icon, active, badge, onPress, onLongPress,
  * Headless themed space-switcher component.
  *
  * Renders a trigger button (active-space avatar + name + chevron) that opens a
- * dropdown listing all spaces with per-row selection, a "join or create" action,
+ * dropdown listing all spaces with per-row selection (+ optional unread badges),
+ * a "see all" overflow row, a "join or create" action, a "browse spaces" action,
  * optional space settings, and an app-provided footer slot (account section, etc.).
  *
  * The popup container (Popover on desktop, Sheet on mobile) is fully delegated to
  * the host via `renderContainer` so this package stays free of modal dependencies.
- * Avatars and icons are delegated via render-props for the same reason.
+ * Avatars, icons and badges are delegated via render-props for the same reason.
  *
  * @example
  * ```tsx
@@ -674,13 +675,34 @@ declare function SidebarItem({ label, icon, active, badge, onPress, onLongPress,
  *   )}
  *   renderIcon={(name, size, color) => <Icon name={SWITCHER_ICON[name]} size={size} color={color} />}
  *   renderContainer={({ isOpen, onClose, anchorRef, children }) => (
- *     <>
- *       <Popover visible={isOpen} onClose={onClose} anchorRef={anchorRef} placement="bottom-start" width={240}>
- *         {children}
- *       </Popover>
- *     </>
+ *     <Popover visible={isOpen} onClose={onClose} anchorRef={anchorRef} placement="bottom-start" width={240}>
+ *       {children}
+ *     </Popover>
  *   )}
- *   footerSlot={<AccountSwitcher onRequestClose={...} onViewProfile={...} />}
+ *   footerSlot={(close) => <AccountSwitcher onRequestClose={close} onViewProfile={...} />}
+ * />
+ *
+ * // OctoChat — appbar variant with bottom Sheet, overflow + badges
+ * <SpaceSwitcher
+ *   spaces={spaces}
+ *   activeId={activeId}
+ *   onSelect={(id) => { tapFeedback(); setActiveId(id); }}
+ *   onAdd={() => router.push('/join')}
+ *   onBrowse={() => router.push('/spaces/explore')}
+ *   onSettings={() => router.push(`/space/${activeId}`)}
+ *   maxVisible={5}
+ *   onSeeAll={() => router.push('/spaces')}
+ *   seeAllLabel="See all spaces"
+ *   variant="appbar"
+ *   renderTriggerAvatar={(space, size) => <Avatar label={space?.short ?? ''} image={space?.image} size={size} />}
+ *   renderSpaceAvatar={(space, size) => <Avatar label={space.short ?? ''} image={space.image} size={size} />}
+ *   renderIcon={(name, size, color) => <Icon name={SWITCHER_ICON[name]} size={size} color={color} />}
+ *   renderBadge={(count) => <Badge count={count} />}
+ *   renderTriggerBadge={() => <UnreadDot />}
+ *   renderContainer={({ isOpen, onClose, children }) => (
+ *     <BottomSheet visible={isOpen} onClose={onClose}>{children}</BottomSheet>
+ *   )}
+ *   footerSlot={(close) => <AccountSwitcher onRequestClose={close} onViewProfile={...} />}
  * />
  * ```
  */
@@ -693,9 +715,11 @@ interface SwitcherSpace {
     short?: string;
     /** Uploaded space image URI; absent → host renders monogram. */
     image?: string;
+    /** Unread message count displayed as a badge on the row. */
+    unread?: number;
 }
 /** Icon name union for the switcher's built-in glyphs. */
-type SwitcherIconName = 'chevron-down' | 'check' | 'plus' | 'gear';
+type SwitcherIconName = 'chevron-down' | 'chevron-right' | 'check' | 'plus' | 'gear' | 'globe';
 interface SpaceSwitcherProps {
     spaces: SwitcherSpace[];
     activeId?: string | null;
@@ -705,6 +729,10 @@ interface SpaceSwitcherProps {
     onAdd?: () => void;
     /** Override the add-row label. @default "Join or create a space" */
     addLabel?: string;
+    /** "Browse spaces" action (e.g. a public directory). Omit to hide the row. */
+    onBrowse?: () => void;
+    /** Override the browse-row label. @default "Browse spaces" */
+    browseLabel?: string;
     /**
      * "Space settings" action. Only shown when both `onSettings` and `activeId`
      * are provided. Omit to hide.
@@ -712,6 +740,17 @@ interface SpaceSwitcherProps {
     onSettings?: () => void;
     /** Override the settings-row label. @default "Space settings" */
     settingsLabel?: string;
+    /**
+     * When set, limits how many space rows are rendered inline.
+     * If `spaces.length > maxVisible` AND `onSeeAll` is also set, a "See all"
+     * row is appended after the visible rows. Without `onSeeAll`, overflow rows
+     * are simply hidden.
+     */
+    maxVisible?: number;
+    /** Called when the user taps the "See all" overflow row. */
+    onSeeAll?: () => void;
+    /** Override the see-all-row label. @default "See all spaces" */
+    seeAllLabel?: string;
     /**
      * Visual variant:
      * - `'sidebar'` — compact left-aligned trigger for the desktop sidebar header.
@@ -735,6 +774,11 @@ interface SpaceSwitcherProps {
      * Omit to render nothing in the avatar slot.
      */
     renderTriggerAvatar?: (space: SwitcherSpace | null, size: number) => React.ReactNode;
+    /**
+     * Render an overlay node anchored top-right of the trigger avatar — used for
+     * an "other spaces have unread" aggregate indicator. Omit to hide the overlay.
+     */
+    renderTriggerBadge?: () => React.ReactNode;
     /**
      * Render a space row's leading avatar.
      * Receives the `SwitcherSpace` and a pixel size.
@@ -742,17 +786,23 @@ interface SpaceSwitcherProps {
      */
     renderSpaceAvatar?: (space: SwitcherSpace, size: number) => React.ReactNode;
     /**
-     * Render an icon glyph. Name is one of `'chevron-down' | 'check' | 'plus' | 'gear'`.
+     * Render an icon glyph. Name is one of the `SwitcherIconName` union values.
      * Omit to hide chevron, check, and action icons (spaces remain selectable).
      */
     renderIcon?: (name: SwitcherIconName, size: number, color: string) => React.ReactNode;
+    /**
+     * Render an unread-count badge on a space row.
+     * Receives the count (always > 0 when called). Omit to hide badges.
+     */
+    renderBadge?: (count: number) => React.ReactNode;
     /**
      * Footer rendered below the space list + action rows — use for account-switcher
-     * sections (with separator if needed). Fully app-owned.
+     * sections. Receives `close` so the account section can dismiss the dropdown after
+     * an action (e.g. `<AccountSwitcher onRequestClose={close} />`). Fully app-owned.
      */
-    footerSlot?: React.ReactNode;
+    footerSlot?: (close: () => void) => React.ReactNode;
 }
-declare function SpaceSwitcher({ spaces, activeId, onSelect, onAdd, addLabel, onSettings, settingsLabel, variant, renderContainer, renderTriggerAvatar, renderSpaceAvatar, renderIcon, footerSlot, }: SpaceSwitcherProps): React.JSX.Element;
+declare function SpaceSwitcher({ spaces, activeId, onSelect, onAdd, addLabel, onBrowse, browseLabel, onSettings, settingsLabel, maxVisible, onSeeAll, seeAllLabel, variant, renderContainer, renderTriggerAvatar, renderTriggerBadge, renderSpaceAvatar, renderIcon, renderBadge, footerSlot, }: SpaceSwitcherProps): React.JSX.Element;
 
 /**
  * Full-screen scrim overlay that centers its content. Tapping the backdrop, the

package/dist/index.js

@@ -1059,13 +1059,20 @@ function SpaceSwitcher({
   onSelect,
   onAdd,
   addLabel = "Join or create a space",
+  onBrowse,
+  browseLabel = "Browse spaces",
   onSettings,
   settingsLabel = "Space settings",
+  maxVisible,
+  onSeeAll,
+  seeAllLabel = "See all spaces",
   variant,
   renderContainer,
   renderTriggerAvatar,
+  renderTriggerBadge,
   renderSpaceAvatar,
   renderIcon,
+  renderBadge,
   footerSlot
 }) {
   const theme = useOctoSpacesTheme();
@@ -1083,10 +1090,18 @@ function SpaceSwitcher({
     close();
     onAdd?.();
   };
+  const handleBrowse = () => {
+    close();
+    onBrowse?.();
+  };
   const handleSettings = () => {
     close();
     onSettings?.();
   };
+  const handleSeeAll = () => {
+    close();
+    onSeeAll?.();
+  };
   const sp1 = sp["1"] ?? 4;
   const sp2 = sp["2"] ?? 8;
   const sp3 = sp["3"] ?? 12;
@@ -1097,7 +1112,9 @@ function SpaceSwitcher({
   const bodyLine = typeScale["callout"]?.lineHeight ?? 18;
   const labelSize = typeScale["caption"]?.size ?? 11;
   const labelLine = typeScale["caption"]?.lineHeight ?? 16;
-  const triggerStyle = variant === "sidebar" ? {
+  const overflow = maxVisible != null && onSeeAll != null && spaces.length > maxVisible;
+  const visibleSpaces = overflow ? spaces.slice(0, maxVisible) : spaces;
+  const baseStyle = variant === "sidebar" ? {
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
@@ -1105,8 +1122,7 @@ function SpaceSwitcher({
     paddingHorizontal: sp2,
     paddingVertical: sp1 + 2,
     borderRadius: radMd,
-    minWidth: 0,
-    backgroundColor: triggerHovered ? colors.primarySubtle ?? "rgba(0,0,0,0.05)" : "transparent"
+    minWidth: 0
   } : {
     flexDirection: "row",
     alignItems: "center",
@@ -1114,8 +1130,7 @@ function SpaceSwitcher({
     gap: sp2,
     paddingHorizontal: sp2,
     paddingVertical: sp1,
-    borderRadius: radMd,
-    backgroundColor: triggerHovered ? colors.primarySubtle ?? "rgba(0,0,0,0.05)" : "transparent"
+    borderRadius: radMd
   };
   const dropdownContent = /* @__PURE__ */ React10.createElement(View8, { style: { paddingVertical: sp1 } }, spaces.length > 0 ? /* @__PURE__ */ React10.createElement(
     SectionLabel,
@@ -1128,7 +1143,7 @@ function SpaceSwitcher({
       paddingH: sp4,
       paddingV: sp1
     }
-  ) : null, spaces.map((s) => /* @__PURE__ */ React10.createElement(
+  ) : null, visibleSpaces.map((s) => /* @__PURE__ */ React10.createElement(
     SpaceRow,
     {
       key: s.id,
@@ -1137,6 +1152,23 @@ function SpaceSwitcher({
       onPress: () => handleSelect(s.id),
       renderAvatar: renderSpaceAvatar,
       renderIcon,
+      renderBadge,
+      colors,
+      bodyFont,
+      bodySize,
+      bodyLine,
+      sp2,
+      sp3,
+      sp4,
+      radMd
+    }
+  )), overflow ? /* @__PURE__ */ React10.createElement(
+    ActionRow,
+    {
+      label: seeAllLabel,
+      iconName: "chevron-right",
+      onPress: handleSeeAll,
+      renderIcon,
       colors,
       bodyFont,
       bodySize,
@@ -1146,7 +1178,7 @@ function SpaceSwitcher({
       sp4,
       radMd
     }
-  )), onAdd ? /* @__PURE__ */ React10.createElement(
+  ) : null, onAdd ? /* @__PURE__ */ React10.createElement(
     ActionRow,
     {
       label: spaces.length > 0 ? addLabel : "Create your first space",
@@ -1162,6 +1194,22 @@ function SpaceSwitcher({
       sp4,
       radMd
     }
+  ) : null, onBrowse ? /* @__PURE__ */ React10.createElement(
+    ActionRow,
+    {
+      label: browseLabel,
+      iconName: "globe",
+      onPress: handleBrowse,
+      renderIcon,
+      colors,
+      bodyFont,
+      bodySize,
+      bodyLine,
+      sp2,
+      sp3,
+      sp4,
+      radMd
+    }
   ) : null, onSettings && active ? /* @__PURE__ */ React10.createElement(
     ActionRow,
     {
@@ -1188,7 +1236,7 @@ function SpaceSwitcher({
         marginHorizontal: sp2
       }
     }
-  ), footerSlot) : null);
+  ), footerSlot(close)) : null);
   return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
     Pressable6,
     {
@@ -1200,9 +1248,14 @@ function SpaceSwitcher({
       onPress: () => setOpen(true),
       onMouseEnter: () => setTriggerHovered(true),
       onMouseLeave: () => setTriggerHovered(false),
-      style: triggerStyle
+      style: ({ pressed }) => [
+        baseStyle,
+        {
+          backgroundColor: pressed ? colors.primarySubtle ?? "rgba(0,0,0,0.08)" : triggerHovered ? colors.primarySubtle ?? "rgba(0,0,0,0.05)" : "transparent"
+        }
+      ]
     },
-    renderTriggerAvatar ? renderTriggerAvatar(active, 22) : null,
+    renderTriggerAvatar != null || renderTriggerBadge != null ? /* @__PURE__ */ React10.createElement(View8, { style: styles3.avatarWrap }, renderTriggerAvatar ? renderTriggerAvatar(active, 22) : null, renderTriggerBadge ? /* @__PURE__ */ React10.createElement(View8, { style: styles3.triggerBadge }, renderTriggerBadge()) : null) : null,
     /* @__PURE__ */ React10.createElement(
       Text6,
       {
@@ -1223,6 +1276,10 @@ function SpaceSwitcher({
     renderIcon ? renderIcon("chevron-down", 14, colors.textTertiary) : null
   ), renderContainer({ isOpen: open, onClose: close, anchorRef, children: dropdownContent }));
 }
+var styles3 = StyleSheet3.create({
+  avatarWrap: { position: "relative" },
+  triggerBadge: { position: "absolute", top: -2, right: -2 }
+});
 function SectionLabel({ label, color, size, lineHeight, font, paddingH, paddingV }) {
   return /* @__PURE__ */ React10.createElement(
     Text6,
@@ -1248,6 +1305,7 @@ function SpaceRow({
   onPress,
   renderAvatar,
   renderIcon,
+  renderBadge,
   colors,
   bodyFont,
   bodySize,
@@ -1258,7 +1316,7 @@ function SpaceRow({
   radMd
 }) {
   const [hovered, setHovered] = useState5(false);
-  const bg = hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.04)" : "transparent";
+  const unread = space.unread ?? 0;
   return /* @__PURE__ */ React10.createElement(
     Pressable6,
     {
@@ -1268,15 +1326,15 @@ function SpaceRow({
       onPress,
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
-      style: {
+      style: ({ pressed }) => ({
         flexDirection: "row",
         alignItems: "center",
         gap: sp3,
         paddingHorizontal: sp4,
         paddingVertical: sp2,
         borderRadius: radMd,
-        backgroundColor: bg
-      }
+        backgroundColor: pressed ? colors.primarySubtle ?? "rgba(0,0,0,0.08)" : hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.04)" : "transparent"
+      })
     },
     renderAvatar ? renderAvatar(space, 24) : null,
     /* @__PURE__ */ React10.createElement(
@@ -1295,6 +1353,7 @@ function SpaceRow({
       },
       space.name
     ),
+    unread > 0 && renderBadge ? renderBadge(unread) : null,
     active && renderIcon ? renderIcon("check", 15, colors.primary) : null
   );
 }
@@ -1313,7 +1372,6 @@ function ActionRow({
   radMd
 }) {
   const [hovered, setHovered] = useState5(false);
-  const bg = hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.04)" : "transparent";
   return /* @__PURE__ */ React10.createElement(
     Pressable6,
     {
@@ -1322,15 +1380,15 @@ function ActionRow({
       onPress,
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
-      style: {
+      style: ({ pressed }) => ({
         flexDirection: "row",
         alignItems: "center",
         gap: sp3,
         paddingHorizontal: sp4,
         paddingVertical: sp2,
         borderRadius: radMd,
-        backgroundColor: bg
-      }
+        backgroundColor: pressed ? colors.primarySubtle ?? "rgba(0,0,0,0.08)" : hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.04)" : "transparent"
+      })
     },
     renderIcon ? /* @__PURE__ */ React10.createElement(View8, { style: { width: 24, alignItems: "center", justifyContent: "center" } }, renderIcon(iconName, 15, colors.textSecondary)) : null,
     /* @__PURE__ */ React10.createElement(