@drakkar.software/octospaces-ui 0.2.1 → 0.4.0

package/dist/index.js

@@ -398,11 +398,726 @@ 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
+  );
+}
+
+// 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,
   focusRingStyle,