@aussieljk/forkbook 0.0.0-stage → 0.0.1-2

package/dist/react-native-ui/index.js

@@ -0,0 +1,1448 @@
+import {
+  PortalHost
+} from "../_browser-chunks/chunk-UMDO3KB7.js";
+import {
+  curriedTransparentize$1
+} from "../_browser-chunks/chunk-S6TK43XQ.js";
+import "../_browser-chunks/chunk-LE2LTDW3.js";
+import "../_browser-chunks/chunk-IMSF75WX.js";
+
+// src/react-native-ui/TreeNode.tsx
+import { styled as styled2, useTheme as useTheme2 } from "@aussieljk/forkbook/internal/react-native-theming";
+import React, { forwardRef, useMemo } from "react";
+
+// src/react-native-ui/icon/index.tsx
+import { styled, useTheme } from "@aussieljk/forkbook/internal/react-native-theming";
+import { SymbolView } from "expo-symbols";
+import { jsx } from "react/jsx-runtime";
+function symbolIcon(name, size, defaultColor) {
+  return ({ color, width }) => {
+    let theme = useTheme();
+    return jsx(
+      SymbolView,
+      {
+        name,
+        size: Number(width ?? size),
+        tintColor: color === "currentColor" || !color ? defaultColor(theme) : color
+      }
+    );
+  };
+}
+var text = (theme) => theme.color.defaultText, SearchIcon = symbolIcon("magnifyingglass", 14, (theme) => theme.color.dark), CloseIcon = symbolIcon("xmark.circle", 14, text), MenuIcon = symbolIcon("line.3.horizontal", 14, text), FullscreenIcon = symbolIcon("arrow.up.left.and.arrow.down.right", 14, text), CloseFullscreenIcon = symbolIcon("arrow.down.right.and.arrow.up.left", 14, text), BottomBarToggleIcon = symbolIcon("rectangle.bottomthird.inset.filled", 14, text), ExpandAllIcon = symbolIcon("rectangle.expand.vertical", 14, text), CollapseAllIcon = symbolIcon("rectangle.compress.vertical", 14, text), ComponentIcon = symbolIcon("square.grid.2x2", 12, () => "#029CFD"), GroupIcon = symbolIcon("folder", 14, () => "#6F2CAC"), StoryIcon = symbolIcon("bookmark", 12, () => "#37D5D3"), Chevron = symbolIcon("chevron.right", 8, (theme) => theme.textMutedColor), CollapseIconWrapper = styled.View(({ isExpanded }) => ({
+  width: 8,
+  height: 8,
+  justifyContent: "center",
+  alignItems: "center",
+  transform: isExpanded ? "rotateZ(90deg)" : "none"
+})), CollapseIcon = ({ isExpanded }) => jsx(CollapseIconWrapper, { isExpanded, children: jsx(Chevron, {}) });
+
+// src/react-native-ui/TreeNode.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var BranchNodeText = styled2.Text(({ theme }) => ({
+  textAlign: "left",
+  fontSize: theme.typography.size.s2,
+  flexShrink: 1,
+  color: theme.color.defaultText
+})), BranchNode = styled2.TouchableOpacity(
+  ({ depth = 0, isExpandable = !1, theme }) => ({
+    width: "100%",
+    border: "none",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    alignSelf: "flex-start",
+    paddingLeft: (isExpandable ? 8 : 22) + depth * 18,
+    backgroundColor: "transparent",
+    minHeight: 28,
+    borderRadius: 4,
+    gap: 6,
+    paddingTop: 5,
+    paddingBottom: 4,
+    // will this actually do anything?
+    "&:hover, &:focus": {
+      backgroundColor: curriedTransparentize$1(0.93, theme.color.secondary),
+      outline: "none"
+    }
+  })
+), LeafNode = styled2.TouchableOpacity(({ depth = 0, selected, theme }) => ({
+  alignSelf: "flex-start",
+  cursor: "pointer",
+  color: "inherit",
+  display: "flex",
+  gap: 6,
+  flexDirection: "row",
+  alignItems: "flex-start",
+  paddingLeft: 22 + depth * 18,
+  paddingTop: 5,
+  paddingBottom: 4,
+  backgroundColor: selected ? theme.color.secondary : void 0,
+  // not sure 👇
+  width: "100%",
+  borderRadius: 4,
+  paddingRight: 20,
+  minHeight: 28
+})), LeafNodeText = styled2.Text(({ theme, selected }) => ({
+  fontSize: theme.typography.size.s2,
+  flexShrink: 1,
+  fontWeight: selected ? "bold" : "normal",
+  color: selected ? theme.color.lightest : theme.color.defaultText
+})), Wrapper = styled2.View({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 6,
+  marginTop: 2
+}), GroupNode = React.memo(function({
+  children,
+  isExpanded = !1,
+  isExpandable = !1,
+  ...props
+}) {
+  let theme = useTheme2(), color = useMemo(() => theme.base === "dark" ? theme.color.primary : theme.color.ultraviolet, [theme.base, theme.color.primary, theme.color.ultraviolet]);
+  return jsxs(BranchNode, { isExpandable, ...props, children: [
+    jsxs(Wrapper, { children: [
+      isExpandable && jsx2(CollapseIcon, { isExpanded: !!isExpanded }),
+      jsx2(GroupIcon, { width: 14, height: 14, color })
+    ] }),
+    jsx2(BranchNodeText, { children })
+  ] });
+}), ComponentNode = React.memo(function({
+  children,
+  isExpanded,
+  isExpandable,
+  ...props
+}) {
+  let theme = useTheme2(), color = useMemo(() => theme.color.secondary, [theme.color.secondary]);
+  return jsxs(BranchNode, { isExpandable, ...props, children: [
+    jsxs(Wrapper, { children: [
+      isExpandable && jsx2(CollapseIcon, { isExpanded: !!isExpanded }),
+      jsx2(ComponentIcon, { width: 12, height: 12, color })
+    ] }),
+    jsx2(BranchNodeText, { children })
+  ] });
+}), StoryNode = React.memo(
+  forwardRef(function({ children, ...props }, ref) {
+    let theme = useTheme2(), color = useMemo(() => props.selected ? theme.color.lightest : theme.color.seafoam, [props.selected, theme.color.lightest, theme.color.seafoam]);
+    return jsxs(LeafNode, { ...props, ref, children: [
+      jsx2(Wrapper, { children: jsx2(StoryIcon, { width: 14, height: 14, color }) }),
+      jsx2(LeafNodeText, { selected: props.selected, children })
+    ] });
+  })
+);
+StoryNode.displayName = "StoryNode";
+
+// src/react-native-ui/Tree.tsx
+import { styled as styled3 } from "@aussieljk/forkbook/internal/react-native-theming";
+import React2, { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2 } from "react";
+import {
+  IconButton,
+  useExpanded,
+  createId,
+  getAncestorIds,
+  getDescendantIds,
+  isStoryHoistable,
+  startCase
+} from "@aussieljk/forkbook/internal/react-native-ui-common";
+
+// src/react-native-ui/SelectedNodeProvider.tsx
+import { createContext, useCallback, useContext, useRef } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SelectedNodeContext = createContext({
+  nodeRef: { current: null },
+  setNodeRef: () => {
+  },
+  scrollToSelectedNode: () => {
+  },
+  scrollRef: { current: null }
+}), SelectedNodeProvider = ({ children }) => {
+  let nodeRef = useRef(null), setNodeRef = useCallback((node) => {
+    nodeRef.current = node;
+  }, []), scrollRef = useRef(null), scrollToSelectedNode = useCallback(() => {
+    setTimeout(() => {
+      if (nodeRef?.current && scrollRef?.current)
+        try {
+          nodeRef.current.measureLayout?.(scrollRef.current, (_x, y) => {
+            scrollRef.current?.scrollTo({ y: y - 100, animated: !0 });
+          });
+        } catch {
+        }
+    }, 100);
+  }, []);
+  return jsx3(
+    SelectedNodeContext.Provider,
+    {
+      value: {
+        nodeRef,
+        setNodeRef,
+        scrollToSelectedNode,
+        scrollRef
+      },
+      children
+    }
+  );
+}, useSelectedNode = () => useContext(SelectedNodeContext);
+
+// src/react-native-ui/Tree.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Node = React2.memo(function({
+  item,
+  refId,
+  isOrphan,
+  isDisplayed,
+  isSelected,
+  isFullyExpanded,
+  color: _2,
+  setFullyExpanded,
+  isExpanded,
+  setExpanded,
+  onSelectStoryId
+}) {
+  let { setNodeRef } = useSelectedNode(), setRef = useCallback2(
+    (node) => {
+      isSelected && node && setNodeRef(node);
+    },
+    [isSelected, setNodeRef]
+  );
+  if (!isDisplayed)
+    return null;
+  let id = createId(item.id, refId);
+  if (item.type === "story")
+    return jsx4(LeafNodeStyleWrapper, { children: jsx4(
+      StoryNode,
+      {
+        ref: setRef,
+        selected: isSelected,
+        id,
+        depth: isOrphan ? item.depth : item.depth - 1,
+        onPress: () => {
+          onSelectStoryId(item.id);
+        },
+        children: item.renderLabel?.(item) || item.name
+      },
+      id
+    ) });
+  if (item.type === "root")
+    return jsxs2(RootNode, { id, children: [
+      jsxs2(
+        CollapseButton,
+        {
+          "data-action": "collapse-root",
+          onPress: (event) => {
+            event.preventDefault(), setExpanded({ ids: [item.id], value: !isExpanded });
+          },
+          "aria-expanded": isExpanded,
+          children: [
+            jsx4(CollapseIcon, { isExpanded }),
+            jsx4(RootNodeText, { children: startCase(item.name) })
+          ]
+        }
+      ),
+      isExpanded && jsx4(
+        IconButton,
+        {
+          "aria-label": isFullyExpanded ? "Expand" : "Collapse",
+          "data-action": "expand-all",
+          "data-expanded": isFullyExpanded,
+          onPress: (event) => {
+            event.preventDefault(), setFullyExpanded?.();
+          },
+          children: isFullyExpanded ? jsx4(CollapseAllIcon, {}) : jsx4(ExpandAllIcon, {})
+        }
+      )
+    ] }, id);
+  if (item.type === "component" || item.type === "group") {
+    let BranchNode2 = item.type === "component" ? ComponentNode : GroupNode;
+    return jsx4(
+      BranchNode2,
+      {
+        id,
+        "aria-controls": item.children && item.children[0],
+        "aria-expanded": isExpanded,
+        depth: isOrphan ? item.depth : item.depth - 1,
+        isComponent: item.type === "component",
+        isExpandable: item.children && item.children.length > 0,
+        isExpanded,
+        onPress: (event) => {
+          event.preventDefault(), setExpanded({ ids: [item.id], value: !isExpanded });
+        },
+        children: startCase(item.name)
+      },
+      id
+    );
+  }
+  return null;
+}), LeafNodeStyleWrapper = styled3.View(({ theme }) => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center",
+  paddingRight: 20,
+  color: theme.color.defaultText,
+  backgroundColor: "transparent",
+  minHeight: 28,
+  borderRadius: 4
+})), RootNode = styled3.View(() => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginTop: 16,
+  marginBottom: 4,
+  minHeight: 28
+})), RootNodeText = styled3.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s1,
+  fontWeight: theme.typography.weight.bold,
+  color: theme.textMutedColor,
+  lineHeight: 16,
+  letterSpacing: 2.5,
+  textTransform: "uppercase"
+})), CollapseButton = styled3.TouchableOpacity(() => ({
+  display: "flex",
+  flexDirection: "row",
+  paddingVertical: 0,
+  paddingHorizontal: 8,
+  borderRadius: 4,
+  gap: 6,
+  alignItems: "center",
+  cursor: "pointer",
+  height: 28
+})), Tree = React2.memo(function({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
+  let containerRef = useRef2(null), [rootIds, orphanIds, initialExpanded] = useMemo2(
+    () => Object.keys(data).reduce(
+      (acc, id) => {
+        let item = data[id];
+        return item.type === "root" ? acc[0].push(id) : item.parent || acc[1].push(id), item.type === "root" && item.startCollapsed && (acc[2][id] = !1), acc;
+      },
+      [[], [], {}]
+    ),
+    [data]
+  ), { expandableDescendants } = useMemo2(() => [...orphanIds, ...rootIds].reduce(
+    (acc, nodeId) => (acc.expandableDescendants[nodeId] = getDescendantIds(data, nodeId, !1).filter(
+      (d) => !["story", "docs"].includes(data[d].type)
+    ), acc),
+    { orphansFirst: [], expandableDescendants: {} }
+  ), [data, rootIds, orphanIds]), singleStoryComponentIds = useMemo2(() => Object.keys(data).filter((id) => {
+    let entry = data[id];
+    if (entry.type !== "component") return !1;
+    let { children = [], name } = entry;
+    if (children.length !== 1) return !1;
+    let onlyChild = data[children[0]];
+    return onlyChild.type === "docs" ? !0 : onlyChild.type === "story" ? isStoryHoistable(onlyChild.name, name) : !1;
+  }), [data]), collapsedItems = useMemo2(
+    () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [singleStoryComponentIds]
+  ), collapsedData = useMemo2(() => singleStoryComponentIds.reduce(
+    (acc, id) => {
+      let { children, parent, name } = data[id], [childId] = children;
+      if (parent) {
+        let siblings = [...data[parent].children];
+        siblings[siblings.indexOf(id)] = childId, acc[parent] = { ...data[parent], children: siblings };
+      }
+      return acc[childId] = {
+        ...data[childId],
+        name,
+        parent,
+        depth: data[childId].depth - 1
+      }, acc;
+    },
+    { ...data }
+  ), [data]), ancestry = useMemo2(() => collapsedItems.reduce(
+    (acc, id) => Object.assign(acc, { [id]: getAncestorIds(collapsedData, id) }),
+    {}
+  ), [collapsedItems, collapsedData]), [expanded, setExpanded] = useExpanded({
+    refId,
+    data: collapsedData,
+    initialExpanded,
+    rootIds,
+    selectedStoryId,
+    onSelectStoryId
+  }), treeItems = useMemo2(() => collapsedItems.map((itemId) => {
+    let item = collapsedData[itemId], id = createId(itemId, refId);
+    if (item.type === "root") {
+      let descendants = expandableDescendants[item.id], isFullyExpanded = descendants.every((d) => expanded[d]);
+      return jsx4(
+        Root,
+        {
+          item,
+          refId,
+          isOrphan: !1,
+          isDisplayed: !0,
+          isSelected: selectedStoryId === itemId,
+          isExpanded: !!expanded[itemId],
+          setExpanded,
+          isFullyExpanded,
+          expandableDescendants: descendants,
+          onSelectStoryId,
+          docsMode: !1,
+          color: "",
+          status: {}
+        },
+        id
+      );
+    }
+    let isDisplayed = !item.parent || ancestry[itemId].every((a) => expanded[a]);
+    return jsx4(
+      Node,
+      {
+        item,
+        status: status?.[itemId],
+        refId,
+        color: void 0,
+        docsMode,
+        isOrphan: orphanIds.some((oid) => itemId === oid || itemId.startsWith(`${oid}-`)),
+        isDisplayed,
+        isSelected: selectedStoryId === itemId,
+        isExpanded: !!expanded[itemId],
+        setExpanded,
+        onSelectStoryId
+      },
+      id
+    );
+  }), [
+    ancestry,
+    collapsedData,
+    collapsedItems,
+    docsMode,
+    expandableDescendants,
+    expanded,
+    onSelectStoryId,
+    orphanIds,
+    refId,
+    selectedStoryId,
+    setExpanded,
+    status
+  ]);
+  return jsx4(Container, { ref: containerRef, hasOrphans: isMain && orphanIds.length > 0, children: treeItems });
+}), Container = styled3.View((props) => ({
+  marginTop: props.hasOrphans ? 20 : 0,
+  marginBottom: 20
+})), Root = React2.memo(function({
+  setExpanded,
+  isFullyExpanded,
+  expandableDescendants,
+  ...props
+}) {
+  let setFullyExpanded = useCallback2(
+    () => setExpanded({ ids: expandableDescendants, value: !isFullyExpanded }),
+    [setExpanded, isFullyExpanded, expandableDescendants]
+  );
+  return jsx4(
+    Node,
+    {
+      ...props,
+      setExpanded,
+      isFullyExpanded,
+      setFullyExpanded
+    }
+  );
+});
+
+// src/react-native-ui/Explorer.tsx
+import React4, { useRef as useRef3 } from "react";
+
+// src/react-native-ui/Refs.tsx
+import React3, { useMemo as useMemo3, useCallback as useCallback3, useEffect, useState } from "react";
+import { styled as styled4 } from "@aussieljk/forkbook/internal/react-native-theming";
+import { getStateType } from "@aussieljk/forkbook/internal/react-native-ui-common";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+var Wrapper2 = styled4.View(() => ({
+  position: "relative"
+})), Ref = React3.memo(
+  function(props) {
+    let {
+      index,
+      id: refId,
+      title = refId,
+      isLoading: isLoadingMain,
+      isBrowsing,
+      selectedStoryId,
+      loginUrl,
+      type,
+      expanded = !0,
+      indexError,
+      previewInitialized,
+      setSelection
+    } = props, length = useMemo3(() => index ? Object.keys(index).length : 0, [index]), isLoading = isLoadingMain || (type === "auto-inject" && !previewInitialized || type === "server-checked") || type === "unknown", state = getStateType(isLoading, !!loginUrl && length === 0, !!indexError, !isLoading && length === 0), [isExpanded, setExpanded] = useState(expanded);
+    useEffect(() => {
+      index && selectedStoryId && index[selectedStoryId] && setExpanded(!0);
+    }, [setExpanded, index, selectedStoryId]);
+    let onSelectStoryId = useCallback3(
+      (storyId) => {
+        setSelection({ refId, storyId });
+      },
+      [refId, setSelection]
+    );
+    return jsx5(Fragment, { children: isExpanded && jsx5(Wrapper2, { "data-title": title, isMain: !0, children: state === "ready" && jsx5(
+      Tree,
+      {
+        status: props.status,
+        isBrowsing,
+        isMain: !0,
+        refId,
+        data: index,
+        docsMode: !1,
+        selectedStoryId,
+        onSelectStoryId
+      }
+    ) }) });
+  }
+);
+
+// src/react-native-ui/Explorer.tsx
+import { View } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+import { createElement } from "react";
+var Explorer = React4.memo(function({
+  isLoading,
+  isBrowsing,
+  dataset,
+  selected,
+  setSelection
+}) {
+  let containerRef = useRef3(null);
+  return jsx6(View, { ref: containerRef, id: "storybook-explorer-tree", children: dataset.entries.map(([refId, ref]) => createElement(
+    Ref,
+    {
+      ...ref,
+      key: refId,
+      isLoading,
+      isBrowsing,
+      selectedStoryId: selected?.refId === ref.id ? selected.storyId : null,
+      setSelection
+    }
+  )) });
+});
+
+// src/react-native-ui/Sidebar.tsx
+import React7, { useMemo as useMemo5 } from "react";
+import { styled as styled7 } from "@aussieljk/forkbook/internal/react-native-theming";
+
+// src/react-native-ui/Search.tsx
+import { styled as styled5 } from "@aussieljk/forkbook/internal/react-native-theming";
+import { useFuzzySearchList } from "@nozbe/microfuzz/react";
+import React5, {
+  useCallback as useCallback4,
+  useDeferredValue,
+  useMemo as useMemo4,
+  useRef as useRef4,
+  useState as useState2
+} from "react";
+import { TextInput, View as View2 } from "react-native";
+import {
+  isExpandType,
+  searchItem
+} from "@aussieljk/forkbook/internal/react-native-ui-common";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_MAX_SEARCH_RESULTS = 50, SearchIconWrapper = styled5.View({
+  position: "absolute",
+  top: 0,
+  left: 8,
+  zIndex: 1,
+  pointerEvents: "none",
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  height: "100%"
+}), SearchField = styled5.View({
+  display: "flex",
+  flexDirection: "column",
+  position: "relative"
+}), Input = styled5(TextInput)(({ theme }) => ({
+  height: 32,
+  paddingLeft: 28,
+  paddingRight: 28,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  backgroundColor: "transparent",
+  borderRadius: 6,
+  fontSize: theme.typography.size.s1 + 1,
+  color: theme.color.defaultText,
+  width: "100%"
+})), ClearIcon = styled5.TouchableOpacity(({ theme }) => ({
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  right: 8,
+  zIndex: 1,
+  color: theme.textMutedColor,
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%"
+})), Search = React5.memo(function({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
+  let inputRef = useRef4(null), [inputValue, setInputValue] = useState2(initialQuery), [isOpen, setIsOpen] = useState2(!1), [allComponents, showAllComponents] = useState2(!1), { scrollToSelectedNode } = useSelectedNode(), selectStory = useCallback4(
+    (id, refId) => {
+      setSelection({ storyId: id, refId }), inputRef.current?.blur(), setIsOpen(!1), showAllComponents(!1), scrollToSelectedNode();
+    },
+    [scrollToSelectedNode, setSelection]
+  ), getItemProps = useCallback4(
+    ({ item: result }) => ({
+      icon: result?.item?.type === "component" ? "component" : "story",
+      onPress: () => {
+        result?.item?.type === "story" ? selectStory(result.item.id, result.item.refId) : result?.item?.type === "component" ? selectStory(result.item.children[0], result.item.refId) : isExpandType(result) && result.showAll && result.showAll();
+      },
+      score: result.score,
+      item: result.item,
+      matches: result.matches,
+      isHighlighted: !1
+    }),
+    [selectStory]
+  ), deferredDataset = useDeferredValue(dataset), searchList = useMemo4(() => deferredDataset.entries.reduce((acc, [refId, { index }]) => (index && acc.push(
+    ...Object.values(index).map((item) => searchItem(item, deferredDataset.hash[refId]))
+  ), acc), []), [deferredDataset]), deferredQuery = useDeferredValue(inputValue), queryText = useMemo4(() => deferredQuery ? deferredQuery.trim() : "", [deferredQuery]), getText = useCallback4((item) => [item.name, item.path?.join(" ") ?? ""], []), mapResultItem = useCallback4(
+    ({ item, score, matches }) => ({
+      item,
+      score,
+      matches: matches ?? []
+    }),
+    []
+  ), fuzzyResults = useFuzzySearchList({
+    list: searchList,
+    queryText,
+    getText,
+    mapResultItem
+  }), results = useMemo4(() => {
+    if (!queryText) return [];
+    let maxResults = allComponents ? 1e3 : DEFAULT_MAX_SEARCH_RESULTS, processedResults = [], resultIds = /* @__PURE__ */ new Set(), totalDistinctCount = 0;
+    for (let result of fuzzyResults) {
+      let { item } = result;
+      if (!(!(item.type === "component" || item.type === "docs" || item.type === "story") || resultIds.has(item.parent)) && (resultIds.add(item.id), totalDistinctCount++, processedResults.length < maxResults && processedResults.push(result), allComponents && processedResults.length >= maxResults))
+        break;
+    }
+    return !allComponents && totalDistinctCount > DEFAULT_MAX_SEARCH_RESULTS && processedResults.push({
+      showAll: () => showAllComponents(!0),
+      totalCount: totalDistinctCount,
+      moreCount: totalDistinctCount - DEFAULT_MAX_SEARCH_RESULTS
+    }), processedResults;
+  }, [queryText, fuzzyResults, allComponents]);
+  return jsxs3(View2, { style: { flex: 1 }, children: [
+    jsxs3(SearchField, { children: [
+      jsx7(SearchIconWrapper, { children: jsx7(SearchIcon, {}) }),
+      jsx7(
+        Input,
+        {
+          ref: inputRef,
+          onChangeText: setInputValue,
+          onFocus: () => setIsOpen(!0),
+          onBlur: () => setIsOpen(!1)
+        }
+      ),
+      isOpen && jsx7(
+        ClearIcon,
+        {
+          onPress: () => {
+            setInputValue(""), inputRef.current?.clear();
+          },
+          children: jsx7(CloseIcon, {})
+        }
+      )
+    ] }),
+    children({
+      query: queryText,
+      // The last result can be the "show all" item (ExpandType). SearchResults checks for it.
+      results,
+      isBrowsing: !isOpen || !inputValue.length,
+      closeMenu: () => {
+      },
+      getItemProps,
+      highlightedIndex: null
+    })
+  ] });
+});
+
+// src/react-native-ui/SearchResults.tsx
+import { styled as styled6 } from "@aussieljk/forkbook/internal/react-native-theming";
+import React6, { useCallback as useCallback5 } from "react";
+import {
+  isExpandType as isExpandType2,
+  IconButton as IconButton2,
+  Button
+} from "@aussieljk/forkbook/internal/react-native-ui-common";
+import { View as View3 } from "react-native";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { createElement as createElement2 } from "react";
+var ResultsList = styled6.View({
+  margin: 0,
+  padding: 0,
+  marginTop: 8
+}), ResultRow = styled6.TouchableOpacity(
+  ({ theme, isHighlighted }) => ({
+    width: "100%",
+    border: "none",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    textAlign: "left",
+    color: theme.color.defaultText,
+    fontSize: theme.typography.size.s2,
+    backgroundColor: isHighlighted ? theme.background.hoverable : "transparent",
+    minHeight: 28,
+    borderRadius: 4,
+    gap: 6,
+    paddingTop: 7,
+    paddingBottom: 7,
+    paddingLeft: 8,
+    paddingRight: 8,
+    "&:hover, &:focus": {
+      backgroundColor: curriedTransparentize$1(0.93, theme.color.secondary),
+      outline: "none"
+    }
+  })
+), IconWrapper = styled6.View({
+  marginTop: 2
+}), ResultRowContent = styled6.View(() => ({
+  display: "flex",
+  flexDirection: "column"
+})), NoResults = styled6.View(({ theme }) => ({
+  marginTop: 20,
+  textAlign: "center",
+  fontSize: theme.typography.size.s2,
+  lineHeight: 18,
+  color: theme.color.defaultText
+})), Mark = styled6.Text(({ theme }) => ({
+  backgroundColor: "transparent",
+  color: theme.color.secondary
+})), MoreWrapper = styled6.View({
+  marginTop: 8
+}), RecentlyOpenedTitle = styled6.View(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "space-between",
+  fontSize: theme.typography.size.s1 - 1,
+  fontWeight: theme.typography.weight.bold,
+  minHeight: 28,
+  // letterSpacing: '0.16em', <-- todo
+  textTransform: "uppercase",
+  color: theme.textMutedColor,
+  marginTop: 16,
+  marginBottom: 4,
+  alignItems: "center"
+})), Highlight = React6.memo(
+  function({ children, text: text2, ranges }) {
+    if (!ranges || ranges.length === 0) return jsx8(Text, { children: children ?? text2 });
+    let { nodes: result } = ranges.reduce(
+      ({ cursor, nodes }, [start, end], index, { length }) => (cursor < start && nodes.push(jsx8(Text, { children: text2.slice(cursor, start) }, `text-${index}`)), nodes.push(jsx8(Mark, { children: text2.slice(start, end + 1) }, `mark-${index}`)), index === length - 1 && end + 1 < text2.length && nodes.push(jsx8(Text, { children: text2.slice(end + 1) }, `last-${index}`)), { cursor: end + 1, nodes }),
+      { cursor: 0, nodes: [] }
+    );
+    return jsx8(Text, { children: result });
+  }
+), Title = styled6.Text(({ theme }) => ({
+  justifyContent: "flex-start",
+  color: theme.textMutedColor,
+  fontSize: theme.typography.size.s2
+})), Path = styled6.View(({ theme }) => ({
+  justifyContent: "flex-start",
+  marginVertical: 2,
+  color: theme.textMutedColor,
+  fontSize: theme.typography.size.s1 - 1,
+  flexDirection: "row"
+})), PathText = styled6.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s1 - 1,
+  color: theme.textMutedColor
+})), Result = React6.memo(function({
+  item,
+  matches,
+  icon: _icon,
+  onPress,
+  ...props
+}) {
+  let press = useCallback5(
+    (event) => {
+      event.preventDefault(), onPress?.(event);
+    },
+    [onPress]
+  ), nameHighlights = matches?.[0], pathString = item.path?.join(" ") ?? "";
+  return jsxs4(ResultRow, { ...props, onPress: press, children: [
+    jsxs4(IconWrapper, { children: [
+      item.type === "component" && jsx8(ComponentIcon, { width: "14", height: "14" }),
+      item.type === "story" && jsx8(StoryIcon, { width: "14", height: "14" })
+    ] }),
+    jsxs4(ResultRowContent, { testID: "search-result-item--label", children: [
+      jsx8(Title, { children: jsx8(Highlight, { text: item.name, ranges: nameHighlights, children: item.name }) }),
+      jsx8(Path, { children: jsx8(PathText, { children: jsx8(Highlight, { text: pathString, ranges: matches?.[1], children: item.path?.join(" / ") }) }) })
+    ] })
+  ] });
+}), Text = styled6.Text(({ theme }) => ({
+  color: theme.color.defaultText
+})), SearchResults = React6.memo(function({
+  query,
+  results,
+  closeMenu,
+  getItemProps,
+  highlightedIndex,
+  clearLastViewed
+}) {
+  let handleClearLastViewed = () => {
+    clearLastViewed?.(), closeMenu();
+  };
+  return jsxs4(ResultsList, { children: [
+    results.length > 0 && !query ? jsxs4(RecentlyOpenedTitle, { children: [
+      jsx8(Text, { children: "Recently opened" }),
+      jsx8(IconButton2, { onPress: handleClearLastViewed })
+    ] }) : null,
+    results.length === 0 && query ? jsx8(View3, { children: jsxs4(NoResults, { children: [
+      jsx8(Text, { style: { marginBottom: 8 }, children: "No components found" }),
+      jsx8(Text, { children: "Find components by name or path." })
+    ] }) }) : null,
+    results.map((result, index) => {
+      if (isExpandType2(result))
+        return jsx8(MoreWrapper, { children: jsx8(
+          Button,
+          {
+            ...result,
+            ...getItemProps({ key: `${index}`, index, item: result }),
+            size: "small",
+            text: `Show ${result.moreCount} more results`
+          }
+        ) }, "search-result-expand");
+      let { item } = result, key = `${item.refId}::${item.id}`;
+      return createElement2(
+        Result,
+        {
+          ...result,
+          ...getItemProps({ key, index, item: result }),
+          isHighlighted: highlightedIndex === index,
+          key: item.id
+        }
+      );
+    })
+  ] });
+});
+
+// src/react-native-ui/Sidebar.tsx
+import { useLastViewed } from "@aussieljk/forkbook/internal/react-native-ui-common";
+
+// src/react-native-ui/constants.ts
+var DEFAULT_REF_ID = "storybook_internal";
+
+// src/react-native-ui/Sidebar.tsx
+import { View as View4 } from "react-native";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var Container2 = styled7.View(({ theme }) => ({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: theme.background.content
+})), Top = styled7.View({
+  paddingLeft: 4,
+  paddingRight: 4,
+  paddingTop: 16,
+  flex: 1,
+  flexDirection: "row"
+}), Swap = React7.memo(function({
+  children,
+  condition
+}) {
+  let [a, b] = React7.Children.toArray(children);
+  return jsxs5(Fragment2, { children: [
+    jsx9(View4, { style: { display: condition ? "flex" : "none" }, children: a }),
+    jsx9(View4, { style: { display: condition ? "none" : "flex" }, children: b })
+  ] });
+}), useCombination = (index, indexError, previewInitialized, status, refs) => {
+  let hash = useMemo5(
+    () => ({
+      [DEFAULT_REF_ID]: {
+        index,
+        indexError,
+        previewInitialized,
+        status,
+        title: null,
+        id: DEFAULT_REF_ID,
+        url: "iframe.html"
+      },
+      ...refs
+    }),
+    [refs, index, indexError, previewInitialized, status]
+  );
+  return useMemo5(() => ({ hash, entries: Object.entries(hash) }), [hash]);
+}, Sidebar = React7.memo(function({
+  storyId,
+  refId = DEFAULT_REF_ID,
+  index,
+  indexError,
+  status,
+  previewInitialized,
+  refs = {},
+  setSelection
+}) {
+  let selected = useMemo5(
+    () => storyId ? { storyId, refId } : null,
+    [storyId, refId]
+  ), dataset = useCombination(index, indexError, previewInitialized, status, refs), lastViewedProps = useLastViewed(selected);
+  return jsx9(Container2, { style: { paddingHorizontal: 10 }, children: jsx9(Top, { children: jsx9(Search, { dataset, setSelection, ...lastViewedProps, children: ({ query, results, isBrowsing, closeMenu, getItemProps, highlightedIndex }) => jsxs5(Swap, { condition: isBrowsing, children: [
+    jsx9(
+      Explorer,
+      {
+        dataset,
+        selected,
+        isLoading: !1,
+        isBrowsing,
+        setSelection
+      }
+    ),
+    jsx9(
+      SearchResults,
+      {
+        query,
+        results,
+        closeMenu,
+        getItemProps,
+        highlightedIndex,
+        isLoading: !1,
+        clearLastViewed: lastViewedProps.clearLastViewed
+      }
+    )
+  ] }) }) }) });
+});
+
+// src/react-native-ui/Layout.tsx
+import { styled as styled9, ThemeProvider, useTheme as useTheme5 } from "@aussieljk/forkbook/internal/react-native-theming";
+import {
+  IconButton as IconButton4,
+  LayoutProvider,
+  StorageProvider,
+  useLayout,
+  useStoreBooleanState,
+  useStyle as useStyle2
+} from "@aussieljk/forkbook/internal/react-native-ui-common";
+import { useCallback as useCallback7, useLayoutEffect, useMemo as useMemo9, useRef as useRef7, useState as useState4 } from "react";
+import { ScrollView as ScrollView3, Text as Text4, TouchableOpacity as TouchableOpacity2, View as View6 } from "react-native";
+import { SafeAreaProvider, useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
+import { SET_CURRENT_STORY } from "@aussieljk/forkbook/internal/core-events";
+import {
+  Addon_TypesEnum as Addon_TypesEnum2
+} from "@aussieljk/forkbook/internal/types";
+import { addons as addons2 } from "@aussieljk/forkbook/manager-api";
+
+// src/react-native-ui/MobileAddonsPanel.tsx
+import { BottomSheetModal } from "@expo/ui/community/bottom-sheet";
+import { addons } from "@aussieljk/forkbook/manager-api";
+import { styled as styled8, useTheme as useTheme3 } from "@aussieljk/forkbook/internal/react-native-theming";
+import {
+  Addon_TypesEnum
+} from "@aussieljk/forkbook/internal/types";
+import { forwardRef as forwardRef2, useImperativeHandle, useMemo as useMemo6, useRef as useRef5, useState as useState3 } from "react";
+import { ScrollView, Text as Text2, View as View5 } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconButton as IconButton3, useStyle } from "@aussieljk/forkbook/internal/react-native-ui-common";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var snapPoints = ["25%", "50%", "75%"], MobileAddonsPanel = forwardRef2(
+  ({ storyId, parameters }, ref) => {
+    let theme = useTheme3(), addonsPanelBottomSheetRef = useRef5(null);
+    useImperativeHandle(ref, () => ({
+      setAddonsPanelOpen: (open) => {
+        open ? addonsPanelBottomSheetRef.current?.present() : addonsPanelBottomSheetRef.current?.dismiss();
+      }
+    }));
+    let backgroundStyle = useStyle(() => ({ backgroundColor: theme.background.content }));
+    return jsx10(
+      BottomSheetModal,
+      {
+        ref: addonsPanelBottomSheetRef,
+        index: 1,
+        snapPoints,
+        enablePanDownToClose: !0,
+        backgroundStyle,
+        children: jsx10(
+          AddonsTabs,
+          {
+            onClose: () => {
+              addonsPanelBottomSheetRef.current?.dismiss();
+            },
+            storyId,
+            parameters
+          }
+        )
+      }
+    );
+  }
+);
+MobileAddonsPanel.displayName = "MobileAddonsPanel";
+var addonsTabsContainerStyle = {
+  flex: 1
+}, addonsTabsStyle = {
+  flexDirection: "row",
+  borderBottomWidth: 1,
+  borderBottomColor: "lightgrey"
+}, addonsTabsContentContainerStyle = {
+  justifyContent: "center"
+}, closeIconStyle = {
+  marginRight: 4,
+  marginBottom: 4,
+  alignItems: "center",
+  justifyContent: "center"
+}, addonsScrollStyle = {
+  flex: 1
+}, centeredStyle = {
+  alignItems: "center",
+  justifyContent: "center"
+}, hiddenStyle = {
+  display: "none"
+}, hitSlop = { top: 10, right: 10, bottom: 10, left: 10 }, AddonsTabs = ({
+  onClose,
+  storyId,
+  parameters
+}) => {
+  let panels = useMemo6(() => {
+    let allPanels = addons.getElements(Addon_TypesEnum.PANEL);
+    return Object.fromEntries(
+      Object.entries(allPanels).filter(([, p]) => !p.paramKey || !parameters?.[p.paramKey]?.disable)
+    );
+  }, [parameters]), [addonSelected, setAddonSelected] = useState3(Object.keys(panels)[0]), insets = useSafeAreaInsets(), scrollContentContainerStyle = useStyle(() => ({
+    paddingBottom: insets.bottom + 16
+  })), panelEntries = useMemo6(() => Object.entries(panels), [panels]), activeAddonId = panels[addonSelected] ? addonSelected : panelEntries[0]?.[0];
+  return jsxs6(View5, { style: addonsTabsContainerStyle, children: [
+    jsxs6(View5, { style: addonsTabsStyle, children: [
+      jsx10(
+        ScrollView,
+        {
+          horizontal: !0,
+          showsHorizontalScrollIndicator: !1,
+          contentContainerStyle: addonsTabsContentContainerStyle,
+          children: Object.values(panels).map(({ id, title }) => {
+            let resolvedTitle = typeof title == "function" ? title({}) : title;
+            return jsx10(
+              Tab,
+              {
+                active: id === activeAddonId,
+                onPress: () => setAddonSelected(id),
+                text: String(resolvedTitle)
+              },
+              id
+            );
+          })
+        }
+      ),
+      jsx10(
+        IconButton3,
+        {
+          style: closeIconStyle,
+          hitSlop,
+          Icon: CloseIcon,
+          onPress: () => onClose?.(),
+          accessibilityLabel: "Close addons panel"
+        }
+      )
+    ] }),
+    jsx10(ScrollView, { style: addonsScrollStyle, contentContainerStyle: scrollContentContainerStyle, children: storyId ? panelEntries.length === 0 ? jsx10(View5, { style: centeredStyle, children: jsx10(Text2, { children: "No addons loaded." }) }) : panelEntries.map(([id, p]) => jsx10(View5, { style: id === activeAddonId ? void 0 : hiddenStyle, children: jsx10(PanelRenderer, { panel: p }) }, id)) : jsx10(View5, { style: centeredStyle, children: jsx10(Text2, { children: "No Story Selected" }) }) })
+  ] });
+}, PanelRenderer = ({ panel }) => panel.render({ active: !0 }), Tab = ({ active, onPress, text: text2 }) => {
+  let testID = `addon-tab-${text2.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
+  return jsx10(
+    TabButton,
+    {
+      active,
+      onPress,
+      testID,
+      accessible: !0,
+      accessibilityRole: "tab",
+      accessibilityState: { selected: active },
+      accessibilityLabel: text2,
+      children: jsx10(TabText, { active, children: text2 })
+    }
+  );
+}, TabButton = styled8.TouchableOpacity(({ theme, active }) => ({
+  borderBottomWidth: active ? 2 : 0,
+  borderBottomColor: active ? theme.barSelectedColor : void 0,
+  overflow: "hidden",
+  paddingHorizontal: 15,
+  justifyContent: "center",
+  alignItems: "center"
+})), TabText = styled8.Text(({ theme, active }) => ({
+  color: active ? theme.barSelectedColor : theme.color.mediumdark,
+  textAlign: "center",
+  fontWeight: "bold",
+  fontSize: 12,
+  lineHeight: 12
+}));
+
+// src/react-native-ui/MobileMenuDrawer.tsx
+import BottomSheet from "@expo/ui/community/bottom-sheet";
+import { useTheme as useTheme4 } from "@aussieljk/forkbook/internal/react-native-theming";
+import {
+  forwardRef as forwardRef3,
+  memo,
+  useCallback as useCallback6,
+  useImperativeHandle as useImperativeHandle2,
+  useMemo as useMemo7,
+  useRef as useRef6
+} from "react";
+import { Keyboard, ScrollView as ScrollView2 } from "react-native";
+import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var snapPoints2 = ["50%", "75%"], MobileMenuDrawer = memo(
+  forwardRef3(({ children }, ref) => {
+    let insets = useSafeAreaInsets2(), theme = useTheme4(), menuBottomSheetRef = useRef6(null), { scrollToSelectedNode, scrollRef } = useSelectedNode(), shouldScrollOnOpen = useRef6(!1), handleSheetChange = useCallback6(
+      (index) => {
+        index >= 0 && shouldScrollOnOpen.current && (shouldScrollOnOpen.current = !1, scrollToSelectedNode());
+      },
+      [scrollToSelectedNode]
+    );
+    useImperativeHandle2(ref, () => ({
+      setMobileMenuOpen: (open) => {
+        open ? (shouldScrollOnOpen.current = !0, menuBottomSheetRef.current?.snapToIndex(1)) : (Keyboard.dismiss(), menuBottomSheetRef.current?.close());
+      }
+    }));
+    let bgColorStyle = useMemo7(() => ({ backgroundColor: theme.background.content }), [theme.background.content]), contentContainerStyle = useMemo7(() => ({ paddingBottom: insets.bottom }), [insets.bottom]);
+    return jsx11(
+      BottomSheet,
+      {
+        ref: menuBottomSheetRef,
+        index: -1,
+        snapPoints: snapPoints2,
+        enablePanDownToClose: !0,
+        backgroundStyle: bgColorStyle,
+        onChange: handleSheetChange,
+        children: jsx11(
+          ScrollView2,
+          {
+            ref: scrollRef,
+            keyboardShouldPersistTaps: "handled",
+            contentContainerStyle,
+            children
+          }
+        )
+      }
+    );
+  })
+);
+
+// src/react-native-ui/StorybookLogo.tsx
+import { isValidElement, useEffect as useEffect2, useMemo as useMemo8 } from "react";
+import { Image, Linking, Text as Text3, TouchableOpacity } from "react-native";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var WIDTH = 125, HEIGHT = 25, NoBrandLogo = ({ theme }) => jsx12(
+  Text3,
+  {
+    style: {
+      height: HEIGHT,
+      color: theme.color.defaultText,
+      fontSize: theme.typography.size.m1,
+      fontWeight: "bold"
+    },
+    children: "Forkbook"
+  }
+);
+function isElement(value) {
+  return isValidElement(value);
+}
+var BrandLogo = ({ theme }) => {
+  let brand = theme.brand ?? {}, imageHasNoWidthOrHeight = typeof brand.image == "object" && typeof brand.image == "object" && brand.image !== null && "uri" in brand.image && (!("height" in brand.image) || !("width" in brand.image));
+  if (useEffect2(() => {
+    imageHasNoWidthOrHeight && console.warn(
+      `STORYBOOK: When using a remote image as the brand logo, you must also set the width and height.
+For example:  brand: { image: { uri: 'https://sb.com/img.png', height: 25, width: 25}}`
+    );
+  }, [imageHasNoWidthOrHeight]), !brand.image)
+    return null;
+  if (isElement(brand.image))
+    return brand.image;
+  let image = jsx12(
+    Image,
+    {
+      source: brand.image,
+      resizeMode: brand.resizeMode ?? "contain",
+      style: imageHasNoWidthOrHeight ? { width: WIDTH, height: HEIGHT } : void 0
+    }
+  );
+  return brand.url ? jsx12(
+    TouchableOpacity,
+    {
+      onPress: () => {
+        brand.url && Linking.openURL(brand.url);
+      },
+      children: image
+    }
+  ) : image;
+}, BrandTitle = ({ theme }) => {
+  let brandTitleStyle = useMemo8(() => ({
+    width: WIDTH,
+    height: HEIGHT,
+    color: theme.color.defaultText,
+    fontSize: theme.typography.size.m1
+  }), [theme]), title = jsx12(Text3, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand?.title });
+  return theme.brand?.url ? jsx12(
+    TouchableOpacity,
+    {
+      onPress: () => {
+        theme.brand?.url && Linking.openURL(theme.brand?.url);
+      },
+      children: title
+    }
+  ) : title;
+}, StorybookLogo = ({ theme }) => {
+  let image = useMemo8(() => theme.brand?.image, [theme.brand?.image]), title = useMemo8(() => theme.brand?.title, [theme.brand?.title]);
+  return image ? jsx12(BrandLogo, { theme }) : title ? jsx12(BrandTitle, { theme }) : jsx12(NoBrandLogo, { theme });
+};
+
+// src/react-native-ui/Layout.tsx
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var desktopLogoContainer = {
+  flexDirection: "row",
+  alignItems: "center",
+  paddingTop: 10,
+  paddingLeft: 16,
+  paddingBottom: 4,
+  paddingRight: 10,
+  justifyContent: "space-between"
+}, mobileContentStyle = { flex: 1, overflow: "hidden" }, placeholderObject = {}, iconFloatRightStyle = { marginLeft: "auto" }, navButtonStyle = { flexShrink: 1 }, navButtonHitSlop = { bottom: 10, left: 10, right: 10, top: 10 }, mobileMenuDrawerContentStyle = {
+  paddingLeft: 16,
+  paddingTop: 4,
+  paddingBottom: 4
+}, flex1 = { flex: 1 }, FullUI = ({
+  storage,
+  theme,
+  storyHash,
+  story,
+  storyBackgroundColor,
+  children
+}) => jsx13(ThemeProvider, { theme, children: jsx13(SafeAreaProvider, { children: jsx13(View6, { style: flex1, children: jsx13(StorageProvider, { storage, children: jsxs7(LayoutProvider, { children: [
+  jsx13(
+    Layout,
+    {
+      storyHash,
+      story,
+      storyBackgroundColor,
+      children
+    }
+  ),
+  jsx13(PortalHost, { name: "storybook-lite-ui-root" })
+] }) }) }) }) }), Layout = ({
+  storyHash,
+  story,
+  storyBackgroundColor,
+  children
+}) => {
+  let theme = useTheme5(), mobileMenuDrawerRef = useRef7(null), addonPanelRef = useRef7(null), insets = useSafeAreaInsets3(), { isDesktop } = useLayout(), [desktopSidebarOpen, setDesktopSidebarOpen] = useStoreBooleanState(
+    "desktopSidebarState",
+    !0
+  ), [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = useStoreBooleanState(
+    "desktopPanelState",
+    !0
+  ), hasEnabledPanels = useMemo9(() => {
+    let allPanels = addons2.getElements(Addon_TypesEnum2.PANEL);
+    return Object.values(allPanels).some(
+      (p) => !p.paramKey || !story?.parameters?.[p.paramKey]?.disable
+    );
+  }, [story?.parameters]), [uiHidden, setUiHidden] = useState4(!1);
+  useLayoutEffect(() => {
+    setUiHidden(story?.parameters?.storybookUIVisibility === "hidden");
+  }, [story?.parameters?.storybookUIVisibility]);
+  let desktopSidebarStyle = useStyle2(
+    () => ({
+      width: desktopSidebarOpen ? 240 : void 0,
+      padding: desktopSidebarOpen ? 0 : 10,
+      borderColor: theme.appBorderColor,
+      borderRightWidth: 1
+    }),
+    [desktopSidebarOpen, theme.appBorderColor]
+  ), desktopScrollViewContentContainerStyle = useStyle2(
+    () => ({
+      paddingBottom: insets.bottom
+    }),
+    [insets.bottom]
+  ), desktopAddonsPanelStyle = useStyle2(
+    () => ({
+      height: desktopAddonsPanelOpen ? 300 : void 0,
+      borderTopWidth: 1,
+      borderColor: theme.appBorderColor,
+      paddingTop: desktopAddonsPanelOpen ? 4 : 0,
+      padding: desktopAddonsPanelOpen ? 0 : 10
+    }),
+    [desktopAddonsPanelOpen, theme.appBorderColor]
+  ), containerStyle = useStyle2(() => isDesktop ? {
+    flex: 1,
+    paddingTop: insets.top,
+    backgroundColor: theme.background.content,
+    flexDirection: "row"
+  } : {
+    flex: 1,
+    paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
+    backgroundColor: storyBackgroundColor || theme.background.content
+  }, [
+    storyBackgroundColor,
+    theme.background.content,
+    insets.top,
+    story?.parameters?.noSafeArea,
+    isDesktop
+  ]), storyContentStyle = useStyle2(
+    () => ({
+      flex: 1,
+      overflow: "hidden",
+      backgroundColor: storyBackgroundColor || theme.background.content
+    }),
+    [storyBackgroundColor, theme.background.content]
+  ), fullScreenButtonStyle = useStyle2(
+    () => ({
+      position: "absolute",
+      bottom: uiHidden ? 56 + insets.bottom : 16,
+      right: 16,
+      backgroundColor: theme.background.content,
+      padding: 4,
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: theme.appBorderColor
+    }),
+    [uiHidden, insets.bottom, theme.background.content, theme.appBorderColor]
+  ), menuContainerStyle = useStyle2(
+    () => ({
+      paddingBottom: insets.bottom
+    }),
+    [insets.bottom]
+  ), navButtonTextStyle = useStyle2(
+    () => ({
+      flexShrink: 1,
+      color: theme.barTextColor
+    }),
+    [theme.barTextColor]
+  ), openMobileMenu = useCallback7(() => {
+    mobileMenuDrawerRef.current?.setMobileMenuOpen(!0);
+  }, [mobileMenuDrawerRef]), setSelection = useCallback7((selection) => {
+    if (!selection) return;
+    let newStoryId = selection.storyId;
+    addons2.getChannel().emit(SET_CURRENT_STORY, { storyId: newStoryId });
+  }, []);
+  return jsxs7(View6, { style: containerStyle, children: [
+    isDesktop ? jsx13(View6, { style: desktopSidebarStyle, children: desktopSidebarOpen ? jsxs7(
+      ScrollView3,
+      {
+        keyboardShouldPersistTaps: "handled",
+        contentContainerStyle: desktopScrollViewContentContainerStyle,
+        children: [
+          jsxs7(View6, { style: desktopLogoContainer, children: [
+            jsx13(StorybookLogo, { theme }),
+            jsx13(IconButton4, { onPress: () => setDesktopSidebarOpen(!1), Icon: MenuIcon })
+          ] }),
+          jsx13(
+            Sidebar,
+            {
+              previewInitialized: !0,
+              indexError: void 0,
+              refs: placeholderObject,
+              setSelection,
+              status: placeholderObject,
+              index: storyHash,
+              storyId: story?.id,
+              refId: DEFAULT_REF_ID
+            }
+          )
+        ]
+      }
+    ) : jsx13(IconButton4, { onPress: () => setDesktopSidebarOpen(!0), Icon: MenuIcon }) }) : null,
+    jsxs7(View6, { style: mobileContentStyle, children: [
+      jsx13(View6, { style: storyContentStyle, children }),
+      story?.parameters?.hideFullScreenButton || isDesktop ? null : jsx13(
+        TouchableOpacity2,
+        {
+          style: fullScreenButtonStyle,
+          onPress: () => setUiHidden((prev) => !prev),
+          children: uiHidden ? jsx13(CloseFullscreenIcon, { color: theme.color.mediumdark }) : jsx13(FullscreenIcon, { color: theme.color.mediumdark })
+        }
+      ),
+      isDesktop && hasEnabledPanels ? jsx13(View6, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? jsx13(
+        AddonsTabs,
+        {
+          storyId: story?.id,
+          parameters: story?.parameters,
+          onClose: () => setDesktopAddonsPanelOpen(!1)
+        }
+      ) : jsx13(
+        IconButton4,
+        {
+          style: iconFloatRightStyle,
+          onPress: () => setDesktopAddonsPanelOpen(!0),
+          Icon: BottomBarToggleIcon
+        }
+      ) }) : null
+    ] }),
+    !uiHidden && !isDesktop ? jsx13(Container3, { style: menuContainerStyle, children: jsxs7(Nav, { children: [
+      jsxs7(
+        Button2,
+        {
+          testID: "mobile-menu-button",
+          style: navButtonStyle,
+          hitSlop: navButtonHitSlop,
+          onPress: openMobileMenu,
+          children: [
+            jsx13(MenuIcon, { color: theme.color.mediumdark }),
+            jsxs7(Text4, { style: navButtonTextStyle, numberOfLines: 1, children: [
+              story?.title,
+              "/",
+              story?.name
+            ] })
+          ]
+        }
+      ),
+      hasEnabledPanels && jsx13(
+        IconButton4,
+        {
+          testID: "mobile-addons-button",
+          onPress: () => addonPanelRef.current?.setAddonsPanelOpen(!0),
+          Icon: BottomBarToggleIcon,
+          accessibilityLabel: "Open addons panel"
+        }
+      )
+    ] }) }) : null,
+    isDesktop ? null : jsx13(SelectedNodeProvider, { children: jsxs7(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
+      jsx13(View6, { style: mobileMenuDrawerContentStyle, children: jsx13(StorybookLogo, { theme }) }),
+      jsx13(
+        Sidebar,
+        {
+          previewInitialized: !0,
+          indexError: void 0,
+          refs: placeholderObject,
+          setSelection,
+          status: placeholderObject,
+          index: storyHash,
+          storyId: story?.id,
+          refId: DEFAULT_REF_ID
+        }
+      )
+    ] }) }),
+    !isDesktop && hasEnabledPanels ? jsx13(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id, parameters: story?.parameters }) : null
+  ] });
+}, Nav = styled9.View({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  height: 40,
+  paddingHorizontal: 6
+}), Container3 = styled9.View(({ theme }) => ({
+  alignSelf: "flex-end",
+  width: "100%",
+  backgroundColor: theme.barBg,
+  borderTopColor: theme.appBorderColor,
+  borderTopWidth: 1
+})), Button2 = styled9.TouchableOpacity(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 10,
+  color: theme.color.mediumdark,
+  fontSize: theme.typography.size?.s2 - 1,
+  paddingHorizontal: 7,
+  fontWeight: theme.typography.weight.bold
+}));
+export {
+  ComponentNode,
+  Explorer,
+  FullUI,
+  GroupNode,
+  Layout,
+  LeafNodeStyleWrapper,
+  Node,
+  RootNode,
+  RootNodeText,
+  Sidebar,
+  StoryNode,
+  Tree,
+  useCombination
+};