@drakkar.software/octospaces-ui 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { ReactNode } from 'react';
+import { View, StyleProp, ViewStyle } from 'react-native';
 
 /**
  * Theme contract for `@drakkar.software/octospaces-ui`.
@@ -27,6 +27,7 @@ interface Palette {
     surfaceModal: string;
     surfaceInput: string;
     sidebar: string;
+    sidebarPanel: string;
     sidebarActive: string;
     border: string;
     borderSubtle: string;
@@ -458,4 +459,245 @@ interface SpacesRailProps {
  */
 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 };
+/**
+ * Headless themed sidebar panel shell.
+ *
+ * Renders the 240–248px wide panel: a background surface (colors.sidebarPanel),
+ * a right border (colors.border), an optional header slot, the item list
+ * (scrollable by default), and an optional footer slot.
+ *
+ * All content is delegated to the host via slots — only the chrome (bg, border,
+ * width) and the ScrollView wrapper are shared.
+ *
+ * ```tsx
+ * <Sidebar
+ *   header={
+ *     <SidebarHeader
+ *       leading={<SpaceSwitcher variant="sidebar" />}
+ *       actions={<>
+ *         <IconButton name="search" ... />
+ *         <IconButton name="plus" ... />
+ *       </>}
+ *     />
+ *   }
+ *   contentContainerStyle={{ paddingHorizontal: 8 }}
+ * >
+ *   <WorkObjects ... />
+ * </Sidebar>
+ * ```
+ */
+
+interface SidebarProps {
+    /** Header slot — render a {@link SidebarHeader} or custom content above the list. */
+    header?: React.ReactNode;
+    /** Footer slot — pinned below the scroll area. */
+    footer?: React.ReactNode;
+    /** The item list. Wrapped in a ScrollView unless `scrollable` is `false`. */
+    children: React.ReactNode;
+    /** Panel width in pixels. Defaults to `theme.layout.sidebarWidth ?? 248`. */
+    width?: number;
+    /**
+     * When `false`, children are rendered in a plain `View` instead of a `ScrollView`.
+     * Use when the host manages its own scroll (e.g. multiple independent lists).
+     * @default true
+     */
+    scrollable?: boolean;
+    /**
+     * Passed to the `ScrollView`'s `contentContainerStyle` (or to the body `View`
+     * style when `scrollable` is `false`).
+     */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Override the panel background color.
+     * Defaults to `colors.sidebarPanel` from the injected theme.
+     */
+    background?: string;
+}
+declare function Sidebar({ header, footer, children, width, scrollable, contentContainerStyle, background, }: SidebarProps): React.JSX.Element;
+
+/**
+ * Headless themed sidebar header strip.
+ *
+ * Row 1: a `leading` slot (flex:1, typically a space selector or name) + an
+ * optional `actions` row (right-aligned command buttons). An optional `extra`
+ * slot below row 1 accepts additional controls (OctoChat uses this for its
+ * `ModeSwitcher` + jump-to search bar). An optional bottom hairline divider.
+ *
+ * ```tsx
+ * // OctoVault — space switcher + command icons
+ * <SidebarHeader
+ *   leading={<SpaceSwitcher variant="sidebar" />}
+ *   actions={<>
+ *     <IconButton name="search" onPress={openSearch} tooltip="Search" shortcut="⌘K" />
+ *     <IconButton name="plus"   onPress={newPage}    tooltip="New page" shortcut="⌘N" />
+ *     <IconButton name="sidebar" onPress={collapse}  tooltip="Hide sidebar" shortcut="⌘\\" />
+ *   </>}
+ * />
+ *
+ * // OctoChat — space menu + mode switcher + jump-to bar
+ * <SidebarHeader
+ *   leading={<Pressable onPress={onOpenSpaceMenu}>…</Pressable>}
+ *   extra={<><ModeSwitcher /><JumpToBar /></>}
+ *   divider
+ * />
+ * ```
+ */
+
+interface SidebarHeaderProps {
+    /** Leading content (flex:1) — typically the space selector / space name. */
+    leading: React.ReactNode;
+    /**
+     * Right-aligned action buttons row.
+     * OctoVault passes its own `IconButton` components here (with tooltips +
+     * keyboard shortcuts). For simpler headless consumers use `SidebarActionButton`.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Extra slot rendered below the leading+actions row.
+     * Use for secondary controls like a mode switcher or a search bar.
+     */
+    extra?: React.ReactNode;
+    /**
+     * Render a hairline bottom divider in `colors.borderSubtle`.
+     * @default false
+     */
+    divider?: boolean;
+    /**
+     * Style applied to the outer container. Use to set host-specific padding,
+     * gap, background override, etc.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+declare function SidebarHeader({ leading, actions, extra, divider, style, }: SidebarHeaderProps): React.JSX.Element;
+
+/**
+ * Headless themed icon-button primitive for sidebar action slots.
+ *
+ * Renders a square `Pressable` with hover/press wash from the injected theme.
+ * The icon is provided by the host app as a `ReactNode` — this keeps the package
+ * free of `@expo/vector-icons`, `Tooltip`, and keyboard-shortcut concerns.
+ *
+ * Host apps with richer icon buttons (OctoVault's `IconButton` has tooltips,
+ * keyboard-shortcut labels, and haptics) can slot those directly into
+ * `SidebarHeader.actions` instead — this primitive is for simpler headless
+ * consumers.
+ *
+ * ```tsx
+ * <SidebarActionButton
+ *   icon={<Icon name="search" size={15} color={theme.colors.textSecondary} />}
+ *   onPress={openSearch}
+ *   accessibilityLabel="Search"
+ * />
+ * ```
+ */
+
+interface SidebarActionButtonProps {
+    /** Icon element to render — the host provides the icon component, size, and color. */
+    icon: React.ReactNode;
+    onPress: () => void;
+    accessibilityLabel: string;
+    /**
+     * Width and height of the pressable target in pixels.
+     * @default 32
+     */
+    size?: number;
+}
+declare function SidebarActionButton({ icon, onPress, accessibilityLabel, size, }: SidebarActionButtonProps): React.JSX.Element;
+
+/**
+ * Generic themed sidebar navigation row.
+ *
+ * The headless analog of `DiscoverRow` for the sidebar panel. Suitable for
+ * simple link-style rows (explore, threads, pinned, …). Complex item lists
+ * (OctoVault's `ObjectTree`, OctoChat's `RoomCategoryList`) use their own row
+ * components — this primitive is for straightforward nav items.
+ *
+ * Active rows are highlighted with `colors.sidebarActive`. Hovered rows receive
+ * a subtle `colors.primarySubtle` wash.
+ *
+ * ```tsx
+ * <SidebarItem
+ *   label="Threads"
+ *   icon={<Icon name="thread" size={15} color={colors.textSecondary} />}
+ *   active={threadsActive}
+ *   onPress={onOpenThreads}
+ * />
+ * ```
+ */
+
+interface SidebarItemProps {
+    label: string;
+    /** Leading icon element — the host provides the icon component. */
+    icon?: React.ReactNode;
+    /** Highlight the row as the current destination. */
+    active?: boolean;
+    /** Badge shown at the trailing edge — a number or short string. */
+    badge?: number | string;
+    onPress: () => void;
+    onLongPress?: () => void;
+    /** Additional trailing element (e.g. an action button). */
+    trailing?: React.ReactNode;
+    /**
+     * Left indentation level for nested items. Each level adds 16 px.
+     * @default 0
+     */
+    indent?: number;
+}
+declare function SidebarItem({ label, icon, active, badge, onPress, onLongPress, trailing, indent, }: SidebarItemProps): React.JSX.Element;
+
+/**
+ * Full-screen scrim overlay that centers its content. Tapping the backdrop, the
+ * close button, the Escape key (web) or the hardware back (Android) dismisses it.
+ *
+ * All interactive chrome (close button, action buttons) is injected via render
+ * props so this package remains free of @expo/vector-icons, expo-image, and
+ * reanimated. The host app renders its own icon buttons and images.
+ *
+ * @example
+ * ```tsx
+ * import { Lightbox } from '@drakkar.software/octospaces-ui';
+ *
+ * <Lightbox
+ *   visible={zoomed}
+ *   onClose={() => setZoomed(false)}
+ *   renderCloseButton={(onClose) => (
+ *     <IconButton name="x" color={colors.onScrim} onPress={onClose} />
+ *   )}
+ *   renderActions={() => (
+ *     <IconButton name="share" color={colors.onScrim} onPress={handleShare} />
+ *   )}
+ * >
+ *   <Image source={{ uri }} style={{ width: w * 0.92, height: h * 0.82 }} />
+ * </Lightbox>
+ * ```
+ */
+
+interface LightboxProps {
+    visible: boolean;
+    onClose: () => void;
+    /** Centered content — the host renders the full-size image here. */
+    children: ReactNode;
+    /** Accessible label for the backdrop tap-to-close. Default: "Close preview". */
+    closeLabel?: string;
+    /**
+     * Render the close affordance pinned to the top-right corner.
+     * Receives `onClose` so the button can dismiss the overlay.
+     * If omitted, tapping the backdrop or hardware back still closes it.
+     */
+    renderCloseButton?: (onClose: () => void) => ReactNode;
+    /**
+     * Render additional action(s) pinned to the bottom-right corner,
+     * e.g. a save/share button. Return `null` to show nothing.
+     */
+    renderActions?: () => ReactNode;
+}
+/**
+ * Full-screen scrim overlay that centers its children. Headless: all buttons
+ * are injected via render props; the package has no icon or image dependencies.
+ *
+ * Dismissal: backdrop tap · `renderCloseButton` · hardware back (Android) ·
+ * Escape key (web).
+ */
+declare function Lightbox({ visible, onClose, children, closeLabel, renderCloseButton, renderActions, }: LightboxProps): 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, Lightbox, type LightboxProps, type Motion, type MotionToken, OctoSpacesThemeProvider, type OctoSpacesThemeProviderProps, type Opacity, type Palette, type Radii, type RailIconName, type RailSpace, type ShadowToken, type Shadows, Sidebar, SidebarActionButton, type SidebarActionButtonProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, 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

@@ -828,11 +828,295 @@ function SpacesRail({
     renderFoot ? renderFoot() : null
   );
 }
+
+// src/sidebar/Sidebar.tsx
+import React6 from "react";
+import { ScrollView as ScrollView2, View as View5 } from "react-native";
+function Sidebar({
+  header,
+  footer,
+  children,
+  width,
+  scrollable = true,
+  contentContainerStyle,
+  background
+}) {
+  const theme = useOctoSpacesTheme();
+  const { colors, layout } = theme;
+  const panelWidth = width ?? layout["sidebarWidth"] ?? 248;
+  const bg = background ?? colors.sidebarPanel;
+  return /* @__PURE__ */ React6.createElement(
+    View5,
+    {
+      style: {
+        width: panelWidth,
+        backgroundColor: bg,
+        borderRightWidth: 1,
+        borderRightColor: colors.border,
+        flexDirection: "column"
+      }
+    },
+    header ?? null,
+    scrollable ? /* @__PURE__ */ React6.createElement(
+      ScrollView2,
+      {
+        style: { flex: 1 },
+        contentContainerStyle: contentContainerStyle ?? void 0,
+        showsVerticalScrollIndicator: false
+      },
+      children
+    ) : /* @__PURE__ */ React6.createElement(View5, { style: [{ flex: 1 }, contentContainerStyle] }, children),
+    footer ?? null
+  );
+}
+
+// src/sidebar/SidebarHeader.tsx
+import React7 from "react";
+import { StyleSheet, View as View6 } from "react-native";
+function SidebarHeader({
+  leading,
+  actions,
+  extra,
+  divider = false,
+  style
+}) {
+  const theme = useOctoSpacesTheme();
+  const { colors } = theme;
+  return /* @__PURE__ */ React7.createElement(
+    View6,
+    {
+      style: [
+        styles.root,
+        style,
+        divider ? {
+          borderBottomWidth: StyleSheet.hairlineWidth,
+          borderBottomColor: colors.borderSubtle
+        } : void 0
+      ]
+    },
+    /* @__PURE__ */ React7.createElement(View6, { style: styles.row }, /* @__PURE__ */ React7.createElement(View6, { style: styles.leading }, leading), actions != null ? /* @__PURE__ */ React7.createElement(View6, { style: styles.actions }, actions) : null),
+    extra != null ? /* @__PURE__ */ React7.createElement(View6, null, extra) : null
+  );
+}
+var styles = StyleSheet.create({
+  root: {
+    flexDirection: "column"
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  leading: {
+    flex: 1,
+    minWidth: 0
+  },
+  actions: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexShrink: 0
+  }
+});
+
+// src/sidebar/SidebarActionButton.tsx
+import React8, { useState as useState3 } from "react";
+import { Pressable as RNPressable2 } from "react-native";
+var Pressable4 = RNPressable2;
+function SidebarActionButton({
+  icon,
+  onPress,
+  accessibilityLabel,
+  size = 32
+}) {
+  const theme = useOctoSpacesTheme();
+  const { colors, radii } = theme;
+  const [hovered, setHovered] = useState3(false);
+  const [pressed, setPressed] = useState3(false);
+  const bg = pressed ? colors.primaryMuted ?? "rgba(0,0,0,0.10)" : hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.05)" : "transparent";
+  const radius = radii["sm"] ?? 4;
+  return /* @__PURE__ */ React8.createElement(
+    Pressable4,
+    {
+      onPress,
+      onPressIn: () => setPressed(true),
+      onPressOut: () => setPressed(false),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      accessibilityRole: "button",
+      accessibilityLabel,
+      style: {
+        width: size,
+        height: size,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: radius,
+        backgroundColor: bg
+      }
+    },
+    icon
+  );
+}
+
+// src/sidebar/SidebarItem.tsx
+import React9, { useState as useState4 } from "react";
+import { Pressable as RNPressable3, StyleSheet as StyleSheet2, Text as Text5, View as View7 } from "react-native";
+var Pressable5 = RNPressable3;
+function SidebarItem({
+  label,
+  icon,
+  active = false,
+  badge,
+  onPress,
+  onLongPress,
+  trailing,
+  indent = 0
+}) {
+  const theme = useOctoSpacesTheme();
+  const { colors, type: typeScale, fonts, spacing, radii } = theme;
+  const [hovered, setHovered] = useState4(false);
+  const sp1 = spacing["1"] ?? 4;
+  const sp2 = spacing["2"] ?? 8;
+  const sp3 = spacing["3"] ?? 12;
+  const radSm = radii["sm"] ?? 4;
+  const indentPx = indent * 16;
+  const bg = active ? colors.sidebarActive : hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.04)" : "transparent";
+  const textColor = active ? colors.primary : colors.text;
+  return /* @__PURE__ */ React9.createElement(
+    Pressable5,
+    {
+      onPress,
+      onLongPress,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: sp2,
+        paddingVertical: sp1 + 2,
+        paddingLeft: sp3 + indentPx,
+        paddingRight: sp3,
+        borderRadius: radSm,
+        backgroundColor: bg
+      }
+    },
+    icon != null ? /* @__PURE__ */ React9.createElement(View7, { style: styles2.iconSlot }, icon) : null,
+    /* @__PURE__ */ React9.createElement(
+      Text5,
+      {
+        style: {
+          flex: 1,
+          fontSize: typeScale["callout"]?.size ?? 13,
+          lineHeight: typeScale["callout"]?.lineHeight ?? 18,
+          fontWeight: active ? "600" : "400",
+          color: textColor,
+          fontFamily: fonts["body"] ?? void 0
+        },
+        numberOfLines: 1
+      },
+      label
+    ),
+    badge != null ? /* @__PURE__ */ React9.createElement(
+      View7,
+      {
+        style: {
+          minWidth: 16,
+          height: 16,
+          borderRadius: 8,
+          backgroundColor: active ? colors.primary : colors.textTertiary,
+          alignItems: "center",
+          justifyContent: "center",
+          paddingHorizontal: sp1
+        }
+      },
+      /* @__PURE__ */ React9.createElement(
+        Text5,
+        {
+          style: {
+            fontSize: typeScale["micro"]?.size ?? 10,
+            lineHeight: typeScale["micro"]?.lineHeight ?? 14,
+            fontWeight: "700",
+            color: active ? colors.textOnPrimary : colors.textInverse
+          }
+        },
+        String(badge)
+      )
+    ) : null,
+    trailing != null ? trailing : null
+  );
+}
+var styles2 = StyleSheet2.create({
+  iconSlot: { width: 18, alignItems: "center", justifyContent: "center" }
+});
+
+// src/lightbox/Lightbox.tsx
+import React10, { useEffect as useEffect2 } from "react";
+import { Modal, Platform, Pressable as Pressable6, View as View8 } from "react-native";
+function Lightbox({
+  visible,
+  onClose,
+  children,
+  closeLabel = "Close preview",
+  renderCloseButton,
+  renderActions
+}) {
+  const theme = useOctoSpacesTheme();
+  useEffect2(() => {
+    if (!visible || Platform.OS !== "web") return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [visible, onClose]);
+  const pad = theme.spacing["6"] ?? 24;
+  const insetV = theme.spacing["8"] ?? 32;
+  const insetH = theme.spacing["4"] ?? 16;
+  return /* @__PURE__ */ React10.createElement(
+    Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      statusBarTranslucent: true
+    },
+    /* @__PURE__ */ React10.createElement(
+      Pressable6,
+      {
+        style: {
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+          padding: pad,
+          backgroundColor: theme.colors.overlay ?? "rgba(0,0,0,0.85)"
+        },
+        onPress: onClose,
+        accessibilityLabel: closeLabel
+      },
+      /* @__PURE__ */ React10.createElement(
+        View8,
+        {
+          style: { alignItems: "center", justifyContent: "center" },
+          pointerEvents: "box-none"
+        },
+        children
+      ),
+      renderCloseButton ? /* @__PURE__ */ React10.createElement(View8, { style: { position: "absolute", top: insetV, right: insetH } }, renderCloseButton(onClose)) : null,
+      renderActions ? /* @__PURE__ */ React10.createElement(View8, { style: { position: "absolute", bottom: insetV, right: insetH } }, renderActions()) : null
+    )
+  );
+}
 export {
   DiscoverList,
   DiscoverRow,
   DiscoverScreen,
+  Lightbox,
   OctoSpacesThemeProvider,
+  Sidebar,
+  SidebarActionButton,
+  SidebarHeader,
+  SidebarItem,
   SpacesRail,
   avatarTint,
   filterDiscoverEntries,