@drakkar.software/octospaces-ui 0.2.1 → 0.3.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { View } from 'react-native';
 
 /**
  * Theme contract for `@drakkar.software/octospaces-ui`.
@@ -349,4 +350,112 @@ interface DiscoverScreenProps {
 }
 declare function DiscoverScreen({ loadEntries, renderIcon, onOpen, title, emptyMessage, emptySearchMessage, searchEnabled, reloadRef, }: DiscoverScreenProps): React.JSX.Element;
 
-export { type ColorScheme, type DiscoverEntry, DiscoverList, type DiscoverListProps, DiscoverRow, type DiscoverRowProps, DiscoverScreen, type DiscoverScreenProps, type Easing, type Fonts, type LabelTracking, type Layers, type Layout, type Motion, type MotionToken, OctoSpacesThemeProvider, type OctoSpacesThemeProviderProps, type Opacity, type Palette, type Radii, type ShadowToken, type Shadows, type Spacing, type Swatches, type Theme, type TypeScale, type Typography, avatarTint, filterDiscoverEntries, focusRingStyle, glowShadow, paperBorder, presenceColor, sortDiscoverEntries, statusColor, swatch, useOctoSpacesTheme, verificationColor };
+/**
+ * Shared types for the SpacesRail component.
+ *
+ * Structurally compatible with `Space` from `@drakkar.software/octochat-sdk` /
+ * `@drakkar.software/octospaces-sdk` — apps can pass their domain objects directly
+ * without a runtime conversion step.
+ */
+/** A minimal space descriptor for the rail: id + display info + badge state. */
+interface RailSpace {
+    /** Unique space identifier. */
+    id: string;
+    /** Short display name or initials shown as a monogram when no image is available. */
+    short: string;
+    /** Optional image URI (data URI or URL) rendered as the tile background via
+     *  `SpacesRailProps.renderTileImage`. */
+    image?: string;
+    /** Unread-message count shown as a badge overlay. */
+    unread?: number;
+    /** Whether the space is muted (shows a mute-corner icon when `renderIcon` is provided). */
+    muted?: boolean;
+}
+/** Named icon slots injected into the rail via `SpacesRailProps.renderIcon`. */
+type RailIconName = 'dm' | 'lock' | 'mute' | 'add';
+
+/**
+ * Headless, abstractly-themed vertical spaces rail.
+ *
+ * The component reads the injected {@link Theme} via `useOctoSpacesTheme()` and
+ * delegates all app-specific concerns to props:
+ *
+ * - Icons are rendered by `renderIcon` (keeps `@expo/vector-icons` out of this package).
+ * - Space tile images are rendered by `renderTileImage` (keeps `expo-image` out too).
+ * - Unread badges are rendered by `renderBadge`.
+ * - The rail foot (account avatar + menu) is rendered by `renderFoot`.
+ * - Web drag-reorder is wired via the `useTileDnd` hook prop (see below).
+ *
+ * All React Native primitives used here ship with the `react-native` peer dep.
+ */
+
+interface SpacesRailProps {
+    /** The spaces to show in the scrollable column. */
+    spaces: RailSpace[];
+    /** The currently-active space id (or null / undefined for none). */
+    activeId?: string | null;
+    /** Called when the user selects a space tile. */
+    onSelect?: (id: string) => void;
+    /** Called when the user taps the "add" tile. */
+    onAdd?: () => void;
+    /** When provided, renders a leading DM-home tile. */
+    onSelectDms?: () => void;
+    /** Whether the DM-home tile is the active selection. */
+    dmsActive?: boolean;
+    /** Unread count for the DM-home tile badge. */
+    dmUnread?: number;
+    /** Accessibility label for the DM-home tile (default: "Direct messages"). */
+    dmLabel?: string;
+    /** Accessibility label for the add-space tile (default: "Create or join a space"). */
+    addLabel?: string;
+    /**
+     * Render a named icon at the given size and color. Used for the DM tile icon
+     * (`'dm'`), the E2EE lock corner (`'lock'`), the mute corner (`'mute'`),
+     * and the add tile icon (`'add'`). Return `null` to suppress the icon slot.
+     * If omitted, all icon slots render nothing.
+     */
+    renderIcon?: (name: RailIconName, size: number, color: string) => React.ReactNode;
+    /**
+     * Render an image filling the tile background. Only called when `space.image`
+     * is set. The component must fill its parent (`StyleSheet.absoluteFill` or
+     * equivalent). If omitted, the short-name monogram is shown instead.
+     */
+    renderTileImage?: (space: RailSpace) => React.ReactNode;
+    /**
+     * Render an unread badge. Only called when `space.unread > 0`.
+     * If omitted, badges are not shown.
+     */
+    renderBadge?: (count: number) => React.ReactNode;
+    /**
+     * When `true`, each tile shows a small E2EE-lock corner badge (bottom-right).
+     * Requires `renderIcon` to be provided (otherwise the corner renders nothing).
+     * Default: `false`.
+     */
+    showLockCorner?: boolean;
+    /**
+     * Render the pinned rail foot (e.g. the account avatar and popover).
+     * The host app owns this entirely — identity state stays out of the package.
+     */
+    renderFoot?: () => React.ReactNode;
+    /**
+     * **Hook injection for web drag-reorder.** When provided, each space tile is
+     * wrapped in a `DndTile` that calls `useTileDnd(spaceId)` unconditionally at
+     * the top of its render — treat this prop as a React hook and keep it stable
+     * for the lifetime of a `SpacesRail` mount (always provided or always absent).
+     * Omit on native / in apps that don't need DnD.
+     */
+    useTileDnd?: (spaceId: string) => {
+        ref?: React.Ref<View>;
+        over?: boolean;
+    };
+}
+/**
+ * Vertical spaces rail — a 64px-wide column of square space tiles, a DM-home tile,
+ * an add-space tile, and a pinned foot for the account widget.
+ *
+ * Styled entirely from the injected {@link Theme} via `useOctoSpacesTheme()`.
+ * All icons, images, badges, and the account foot are provided by the host app.
+ */
+declare function SpacesRail({ spaces, activeId, onSelect, onAdd, onSelectDms, dmsActive, dmUnread, dmLabel, addLabel, renderIcon, renderTileImage, renderBadge, showLockCorner, renderFoot, useTileDnd, }: SpacesRailProps): React.JSX.Element;
+
+export { type ColorScheme, type DiscoverEntry, DiscoverList, type DiscoverListProps, DiscoverRow, type DiscoverRowProps, DiscoverScreen, type DiscoverScreenProps, type Easing, type Fonts, type LabelTracking, type Layers, type Layout, type Motion, type MotionToken, OctoSpacesThemeProvider, type OctoSpacesThemeProviderProps, type Opacity, type Palette, type Radii, type RailIconName, type RailSpace, type ShadowToken, type Shadows, SpacesRail, type SpacesRailProps, type Spacing, type Swatches, type Theme, type TypeScale, type Typography, avatarTint, filterDiscoverEntries, focusRingStyle, glowShadow, paperBorder, presenceColor, sortDiscoverEntries, statusColor, swatch, useOctoSpacesTheme, verificationColor };

package/dist/index.js

@@ -398,11 +398,442 @@ function DiscoverScreen({
     }
   ));
 }
+
+// src/sidebar/SpacesRail.tsx
+import React5, { useState as useState2 } from "react";
+import {
+  Pressable as RNPressable,
+  ScrollView,
+  Text as Text4,
+  View as View4
+} from "react-native";
+
+// src/sidebar/tile-state.ts
+function railTileState(state, tokens, radiusActive, radiusDefault) {
+  const { active, hovered, over } = state;
+  let bg;
+  let borderColor;
+  let borderWidth;
+  let labelColor;
+  if (active) {
+    bg = tokens.primary;
+    borderColor = "transparent";
+    borderWidth = 0;
+    labelColor = tokens.textOnPrimary;
+  } else if (hovered) {
+    bg = tokens.primaryMuted;
+    borderColor = tokens.railTileHoverBorder;
+    borderWidth = 1;
+    labelColor = tokens.railTileHoverInk;
+  } else {
+    bg = tokens.railTile;
+    borderColor = tokens.borderSubtle;
+    borderWidth = 1;
+    labelColor = tokens.textSecondary;
+  }
+  if (over && !active) {
+    borderColor = tokens.primary;
+    borderWidth = 1;
+  }
+  const radius = active || hovered || over ? radiusActive : radiusDefault;
+  const shadow = active ? glowShadow(tokens.railGlow, 8, 0.3) : null;
+  return { bg, borderColor, borderWidth, radius, labelColor, shadow };
+}
+
+// src/sidebar/SpacesRail.tsx
+var Pressable3 = RNPressable;
+function resolveRailTokens(theme) {
+  const { colors, swatches } = theme;
+  return {
+    primary: colors.primary,
+    primaryMuted: colors.primaryMuted,
+    primarySubtle: colors.primarySubtle,
+    surfaceInput: colors.surfaceInput,
+    borderSubtle: colors.borderSubtle,
+    textOnPrimary: colors.textOnPrimary,
+    textSecondary: colors.textSecondary,
+    textTertiary: colors.textTertiary,
+    railTile: swatches["railTile"] ?? colors.surfaceInput,
+    railTileHoverBorder: swatches["railTileHoverBorder"] ?? colors.primarySubtle,
+    railGlow: swatches["railGlow"] ?? colors.primary,
+    railTileHoverInk: swatches["railTileHoverInk"] ?? colors.primary
+  };
+}
+var TILE_SIZE = 40;
+var CORNER_SIZE = 16;
+var BADGE_OFFSET = -5;
+var CORNER_OFFSET = -3;
+function TileContent({
+  space,
+  labelColor,
+  fontFamily,
+  fontSize,
+  lineHeight,
+  cornerBg,
+  cornerBorder,
+  cornerIconColor,
+  renderIcon,
+  renderTileImage,
+  renderBadge,
+  showLockCorner
+}) {
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, space.image && renderTileImage ? renderTileImage(space) : /* @__PURE__ */ React5.createElement(
+    Text4,
+    {
+      style: {
+        fontSize,
+        lineHeight,
+        fontWeight: "700",
+        fontFamily: fontFamily ?? void 0,
+        color: labelColor
+      },
+      numberOfLines: 1
+    },
+    space.short
+  ), showLockCorner && renderIcon ? /* @__PURE__ */ React5.createElement(
+    View4,
+    {
+      style: {
+        position: "absolute",
+        bottom: CORNER_OFFSET,
+        right: CORNER_OFFSET,
+        width: CORNER_SIZE,
+        height: CORNER_SIZE,
+        borderRadius: CORNER_SIZE / 2,
+        borderWidth: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: cornerBg,
+        borderColor: cornerBorder
+      }
+    },
+    renderIcon("lock", 9, cornerIconColor)
+  ) : null, space.muted && renderIcon ? /* @__PURE__ */ React5.createElement(
+    View4,
+    {
+      style: {
+        position: "absolute",
+        bottom: CORNER_OFFSET,
+        left: CORNER_OFFSET,
+        width: CORNER_SIZE,
+        height: CORNER_SIZE,
+        borderRadius: CORNER_SIZE / 2,
+        borderWidth: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: cornerBg,
+        borderColor: cornerBorder
+      }
+    },
+    renderIcon("mute", 9, cornerIconColor)
+  ) : null, space.unread ? /* @__PURE__ */ React5.createElement(
+    View4,
+    {
+      style: {
+        position: "absolute",
+        top: BADGE_OFFSET,
+        right: BADGE_OFFSET
+      }
+    },
+    renderBadge ? renderBadge(space.unread) : null
+  ) : null);
+}
+function PlainTile({
+  space,
+  active,
+  onPress,
+  tokens,
+  radiusActive,
+  radiusDefault,
+  renderIcon,
+  renderTileImage,
+  renderBadge,
+  showLockCorner,
+  cornerBg,
+  cornerBorder,
+  fontFamily,
+  fontSize,
+  lineHeight
+}) {
+  const [hovered, setHovered] = useState2(false);
+  const s = railTileState({ active, hovered, over: false }, tokens, radiusActive, radiusDefault);
+  return /* @__PURE__ */ React5.createElement(
+    Pressable3,
+    {
+      onPress,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      accessibilityRole: "button",
+      accessibilityLabel: space.short,
+      style: {
+        position: "relative",
+        width: TILE_SIZE,
+        height: TILE_SIZE,
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        borderRadius: s.radius,
+        backgroundColor: s.bg,
+        borderWidth: s.borderWidth,
+        borderColor: s.borderColor,
+        ...s.shadow ?? {}
+      }
+    },
+    /* @__PURE__ */ React5.createElement(
+      TileContent,
+      {
+        space,
+        labelColor: s.labelColor,
+        fontFamily,
+        fontSize,
+        lineHeight,
+        cornerBg,
+        cornerBorder,
+        cornerIconColor: tokens.textTertiary,
+        renderIcon,
+        renderTileImage,
+        renderBadge,
+        showLockCorner
+      }
+    )
+  );
+}
+function DndTile({
+  space,
+  active,
+  onPress,
+  tokens,
+  radiusActive,
+  radiusDefault,
+  renderIcon,
+  renderTileImage,
+  renderBadge,
+  showLockCorner,
+  cornerBg,
+  cornerBorder,
+  fontFamily,
+  fontSize,
+  lineHeight,
+  dnd
+}) {
+  const [hovered, setHovered] = useState2(false);
+  const { ref, over = false } = dnd(space.id);
+  const s = railTileState({ active, hovered, over }, tokens, radiusActive, radiusDefault);
+  return /* @__PURE__ */ React5.createElement(
+    Pressable3,
+    {
+      ref,
+      onPress,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      accessibilityRole: "button",
+      accessibilityLabel: space.short,
+      style: {
+        position: "relative",
+        width: TILE_SIZE,
+        height: TILE_SIZE,
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        borderRadius: s.radius,
+        backgroundColor: s.bg,
+        borderWidth: s.borderWidth,
+        borderColor: s.borderColor,
+        ...s.shadow ?? {}
+      }
+    },
+    /* @__PURE__ */ React5.createElement(
+      TileContent,
+      {
+        space,
+        labelColor: s.labelColor,
+        fontFamily,
+        fontSize,
+        lineHeight,
+        cornerBg,
+        cornerBorder,
+        cornerIconColor: tokens.textTertiary,
+        renderIcon,
+        renderTileImage,
+        renderBadge,
+        showLockCorner
+      }
+    )
+  );
+}
+function SpacesRail({
+  spaces,
+  activeId,
+  onSelect,
+  onAdd,
+  onSelectDms,
+  dmsActive = false,
+  dmUnread,
+  dmLabel = "Direct messages",
+  addLabel = "Create or join a space",
+  renderIcon,
+  renderTileImage,
+  renderBadge,
+  showLockCorner = false,
+  renderFoot,
+  useTileDnd
+}) {
+  const theme = useOctoSpacesTheme();
+  const { colors, spacing, radii, type: typeScale, fonts, layout } = theme;
+  const tokens = resolveRailTokens(theme);
+  const railWidth = layout["railWidth"] ?? 64;
+  const spaceV = spacing["2"] ?? 8;
+  const spaceXs = spacing["1"] ?? 4;
+  const spaceS = spacing["2"] ?? 8;
+  const spaceMd = spacing["3"] ?? 12;
+  const radiusActive = radii["lg"] ?? 12;
+  const radiusDefault = radii["xl"] ?? 16;
+  const footnoteSize = typeScale["footnote"]?.size ?? 12;
+  const footnoteLineH = typeScale["footnote"]?.lineHeight ?? 18;
+  const monoFont = fonts["mono"] ?? void 0;
+  const cornerBg = colors.sidebar;
+  const cornerBorder = colors.border;
+  const tileShared = {
+    tokens,
+    radiusActive,
+    radiusDefault,
+    renderIcon,
+    renderTileImage,
+    renderBadge,
+    showLockCorner,
+    cornerBg,
+    cornerBorder,
+    fontFamily: monoFont,
+    fontSize: footnoteSize,
+    lineHeight: footnoteLineH
+  };
+  const [dmHovered, setDmHovered] = useState2(false);
+  const dmTileStyle = railTileState(
+    { active: dmsActive, hovered: dmHovered, over: false },
+    tokens,
+    radiusActive,
+    radiusDefault
+  );
+  const dmIconColor = dmsActive ? colors.textOnPrimary : dmHovered ? tokens.railTileHoverInk : colors.textSecondary;
+  const [addHovered, setAddHovered] = useState2(false);
+  const hasDnd = !!useTileDnd;
+  return /* @__PURE__ */ React5.createElement(
+    View4,
+    {
+      style: {
+        width: railWidth,
+        paddingVertical: spaceMd,
+        borderRightWidth: 1,
+        borderRightColor: colors.border,
+        backgroundColor: colors.sidebar,
+        alignItems: "center",
+        gap: spaceS
+      }
+    },
+    /* @__PURE__ */ React5.createElement(
+      ScrollView,
+      {
+        style: { alignSelf: "stretch", flex: 1 },
+        contentContainerStyle: {
+          alignItems: "center",
+          gap: spaceV,
+          paddingVertical: spaceXs
+        },
+        showsVerticalScrollIndicator: false
+      },
+      onSelectDms ? /* @__PURE__ */ React5.createElement(View4, { style: { position: "relative" } }, /* @__PURE__ */ React5.createElement(
+        Pressable3,
+        {
+          onPress: onSelectDms,
+          onMouseEnter: () => setDmHovered(true),
+          onMouseLeave: () => setDmHovered(false),
+          accessibilityRole: "button",
+          accessibilityLabel: dmLabel,
+          style: {
+            width: TILE_SIZE,
+            height: TILE_SIZE,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: dmTileStyle.radius,
+            backgroundColor: dmTileStyle.bg,
+            borderWidth: dmTileStyle.borderWidth,
+            borderColor: dmTileStyle.borderColor,
+            ...dmTileStyle.shadow ?? {}
+          }
+        },
+        renderIcon ? renderIcon("dm", 20, dmIconColor) : null
+      ), showLockCorner && renderIcon ? /* @__PURE__ */ React5.createElement(
+        View4,
+        {
+          style: {
+            position: "absolute",
+            bottom: CORNER_OFFSET,
+            right: CORNER_OFFSET,
+            width: CORNER_SIZE,
+            height: CORNER_SIZE,
+            borderRadius: CORNER_SIZE / 2,
+            borderWidth: 1,
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: cornerBg,
+            borderColor: cornerBorder
+          }
+        },
+        renderIcon("lock", 9, tokens.textTertiary)
+      ) : null, dmUnread ? /* @__PURE__ */ React5.createElement(View4, { style: { position: "absolute", top: BADGE_OFFSET, right: BADGE_OFFSET } }, renderBadge ? renderBadge(dmUnread) : null) : null) : null,
+      spaces.map(
+        (s) => hasDnd ? /* @__PURE__ */ React5.createElement(
+          DndTile,
+          {
+            key: s.id,
+            space: s,
+            active: s.id === activeId,
+            onPress: () => onSelect?.(s.id),
+            dnd: useTileDnd,
+            ...tileShared
+          }
+        ) : /* @__PURE__ */ React5.createElement(
+          PlainTile,
+          {
+            key: s.id,
+            space: s,
+            active: s.id === activeId,
+            onPress: () => onSelect?.(s.id),
+            ...tileShared
+          }
+        )
+      ),
+      /* @__PURE__ */ React5.createElement(
+        Pressable3,
+        {
+          onPress: onAdd,
+          onMouseEnter: () => setAddHovered(true),
+          onMouseLeave: () => setAddHovered(false),
+          accessibilityRole: "button",
+          accessibilityLabel: addLabel,
+          style: {
+            width: TILE_SIZE,
+            height: TILE_SIZE,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: radiusDefault,
+            borderWidth: 1,
+            borderStyle: "dashed",
+            borderColor: addHovered ? colors.border : colors.borderSubtle
+          }
+        },
+        renderIcon ? renderIcon("add", 16, addHovered ? tokens.railTileHoverInk : colors.textTertiary) : null
+      )
+    ),
+    renderFoot ? renderFoot() : null
+  );
+}
 export {
   DiscoverList,
   DiscoverRow,
   DiscoverScreen,
   OctoSpacesThemeProvider,
+  SpacesRail,
   avatarTint,
   filterDiscoverEntries,
   focusRingStyle,