@academix-admin/selection-viewer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Academix
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,71 @@
+# @academix-admin/selection-viewer
+
+An imperative **selection sheet** for React — search + pick one item from a list — with a
+controller hook. Built on [`@academix-admin/modal-sheet`](../modal-sheet).
+
+## Install
+
+```bash
+npm install @academix-admin/selection-viewer
+# peer deps
+npm install react react-dom
+```
+
+> `@academix-admin/modal-sheet` is installed as a dependency automatically.
+
+## Usage
+
+```tsx
+'use client';
+import SelectionViewer, { useSelectionController } from '@academix-admin/selection-viewer';
+
+function Page() {
+  const [id, ops, isOpen, selectionState] = useSelectionController();
+
+  return (
+    <>
+      <button onClick={ops.open}>Choose a wallet</button>
+      <SelectionViewer
+        id={id}
+        isOpen={isOpen}
+        onClose={ops.close}
+        titleProp={{ text: 'Select wallet', textColor: '#000' }}
+        selectionState={selectionState}
+      >
+        {wallets.map((w) => (
+          <WalletItem key={w.id} wallet={w} onClick={() => { pick(w); ops.close(); }} />
+        ))}
+      </SelectionViewer>
+    </>
+  );
+}
+```
+
+## Pagination
+
+Pass `onPaginate` to fetch more items as the user nears the bottom of the list (fires once the
+scroll container is within 20% of a viewport-height of its end):
+
+```tsx
+<SelectionViewer
+  ...
+  onPaginate={async () => {
+    const more = await fetchNextPage();
+    return more.length > 0; // return false once there really is nothing left
+  }}
+/>
+```
+
+## `selectionState`
+
+`"initial" | "loading" | "empty" | "error" | "data"` — drives which of `loadingProp` /
+`noResultProp` / `errorProp` renders in place of `children`. You own fetching/filtering entirely;
+the component only renders what you hand it via `children` and this state.
+
+Exports: `SelectionViewer` (default), `useSelectionController`, plus every prop/type
+(`SelectionViewerProps`, `SelectionState`, `TitleProps`, `SearchProps`, `LoadingProps`,
+`NoResultProps`, `ErrorProps`, `CancelButtonProps`, `LayoutProps`, `Padding`, `SnapPoint`).
+
+## License
+
+MIT © Academix

package/dist/index.cjs

@@ -0,0 +1,575 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var modalSheet = require('@academix-admin/modal-sheet');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/SelectionViewer.tsx
+var getStyles = (id) => `
+#${id} .selection-viewer-header {
+  padding: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+
+#${id} .selection-viewer-drag-handle {
+  height: 5px;
+  border-radius: 3px;
+  margin-top: 16px;
+}
+
+#${id} .selection-viewer-container {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+
+#${id} .selection-viewer-title {
+  margin: 0px;
+  font-size: 18px;
+  font-weight: 600;
+  padding: 0px 16px 0px 16px;
+    word-break: break-word;   /* break long words */
+    white-space: normal;      /* allow wrapping */
+}
+
+#${id} .selection-viewer-search {
+  display: flex;
+  align-items: center;
+  margin: 16px 16px 4px 16px;
+  border-radius: 12px;
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+#${id} .selection-viewer-search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 12px 8px;
+  outline: none;
+  font-size: 16px !important;
+  width: 100%;
+}
+
+#${id} .selection-viewer-content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  flex: 1;
+  min-height: 0;
+}
+
+#${id} .selection-viewer-content.vertical {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+#${id} .selection-viewer-content.horizontal {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+#${id} .selection-viewer-no-results,
+#${id} .selection-viewer-error,
+#${id} .selection-viewer-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 120px;
+}
+
+#${id} .selection-viewer-default-no-results {
+  color: #666;
+  font-size: 14px;
+}
+
+#${id} .selection-viewer-default-error {
+  color: red;
+  font-size: 14px;
+}
+
+/* Full screen search mode */
+#${id} .selection-viewer-fullscreen-search {
+//   position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+//   padding-top: env(safe-area-inset-top);
+  width: 100%;
+}
+
+#${id} .selection-viewer-search-back-button {
+  background: none;
+  border: none;
+  padding: 8px;
+  margin-right: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+#${id} .selection-viewer-search-back-button:hover {
+  opacity: 0.7;
+}
+
+#${id} .selection-viewer-search-clear-button {
+  background: none;
+  border: none;
+  padding: 8px;
+  margin-left: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+#${id} .selection-viewer-search-clear-button:hover {
+  opacity: 0.7;
+}
+
+/* React Modal Sheet overrides */
+#${id} .react-modal-sheet-container {
+  max-width: 500px;
+  margin: 0 auto;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+
+#${id} .react-modal-sheet-backdrop {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  pointer-events: auto !important;
+}
+
+#${id} .react-modal-sheet-content {
+  padding: 0 0px 0px 0px;
+  height: 100%;
+}
+
+
+/* Mobile full-width behavior */
+@media (max-width: 500px) {
+  #${id} .react-modal-sheet-container {
+    max-width: 100%;
+    border-radius: 0;
+  }
+}
+
+/* Prevent iOS zooming */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  #${id} .selection-viewer-search-input {
+    font-size: 16px !important;
+  }
+}
+`;
+var useInjectStyles = (id) => {
+  React.useEffect(() => {
+    const styleId = `selection-viewer-styles-${id}`;
+    let styleTag = document.getElementById(styleId);
+    if (!styleTag) {
+      styleTag = document.createElement("style");
+      styleTag.id = styleId;
+      styleTag.innerHTML = getStyles(id);
+      document.head.appendChild(styleTag);
+    }
+    return () => {
+      if (styleTag && document.head.contains(styleTag)) {
+        document.head.removeChild(styleTag);
+      }
+    };
+  }, [id]);
+};
+var SelectionViewer = ({
+  id: providedId,
+  isOpen,
+  backDrop = true,
+  onClose,
+  titleProp,
+  searchProp,
+  loadingProp,
+  noResultProp,
+  errorProp,
+  cancelButton,
+  layoutProp,
+  childrenDirection = "vertical",
+  children,
+  onPaginate,
+  snapPoints = [0, 1],
+  initialSnap = 1,
+  unmountOnClose = true,
+  zIndex = 1e3,
+  maxHeight = "90dvh",
+  minHeight = "65dvh",
+  selectionState = "initial",
+  closeThreshold = 0.2
+}) => {
+  const [id] = React.useState(() => providedId || `selection-${Math.random().toString(36).substring(2, 11)}`);
+  const [searchValue, setSearchValue] = React.useState("");
+  const [isSearchFocused, setIsSearchFocused] = React.useState(false);
+  const [keyboardHeight, setKeyboardHeight] = React.useState(0);
+  const [inputKey, setInputKey] = React.useState(0);
+  const [shouldAutoFocus, setShouldAutoFocus] = React.useState(false);
+  const isPaginating = React.useRef(false);
+  const searchInputRef = React.useRef(null);
+  const sheetRef = React.useRef(null);
+  React.useRef(null);
+  useInjectStyles(id);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !window.visualViewport) return;
+    const handleResize = () => {
+      const vp = window.visualViewport;
+      const kbHeight = window.innerHeight - vp.height;
+      setKeyboardHeight(kbHeight > 0 ? kbHeight : 0);
+    };
+    window.visualViewport.addEventListener("resize", handleResize);
+    window.visualViewport.addEventListener("scroll", handleResize);
+    return () => {
+      window.visualViewport?.removeEventListener("resize", handleResize);
+      window.visualViewport?.removeEventListener("scroll", handleResize);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (!isOpen) {
+      searchInputRef.current?.blur();
+      setSearchValue("");
+      searchProp?.onChange?.("");
+      setShouldAutoFocus(false);
+      return;
+    }
+  }, [isOpen, searchProp?.autoFocus]);
+  const handleOpenEnd = React.useCallback(() => {
+    if (searchProp?.autoFocus && searchInputRef.current) {
+      setInputKey((prev) => prev + 1);
+      setShouldAutoFocus(true);
+      searchInputRef.current.focus();
+      searchInputRef.current.click();
+    }
+  }, [searchProp?.autoFocus]);
+  const handleSearchChange = (e) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    searchProp?.onChange?.(value);
+  };
+  const handleSearchFocus = () => {
+    setIsSearchFocused(true);
+    searchProp?.onFocus?.();
+    requestAnimationFrame(() => {
+      searchInputRef.current?.focus();
+    });
+  };
+  const handleSearchBlur = () => {
+    searchProp?.onBlur?.();
+  };
+  const handleBackFromSearch = () => {
+    setIsSearchFocused(false);
+    if (searchInputRef.current) {
+      searchInputRef.current.blur();
+    }
+  };
+  const clearSearch = () => {
+    setSearchValue("");
+    searchProp?.onChange?.("");
+    if (searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  };
+  const handleScroll = React.useCallback(
+    async (e) => {
+      if (isPaginating.current || !onPaginate) return;
+      const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+      const isNearBottom = scrollHeight - scrollTop <= clientHeight * 1.2;
+      if (isNearBottom) {
+        isPaginating.current = true;
+        const hasMore = await onPaginate();
+        if (!hasMore) {
+          isPaginating.current = false;
+        } else {
+          setTimeout(() => {
+            isPaginating.current = false;
+          }, 500);
+        }
+      }
+    },
+    [onPaginate]
+  );
+  if (!isOpen && unmountOnClose) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    modalSheet.Sheet,
+    {
+      ref: sheetRef,
+      isOpen,
+      onClose,
+      detent: "content",
+      style: { zIndex },
+      maxHeight,
+      onOpenEnd: handleOpenEnd,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          modalSheet.Sheet.Container,
+          {
+            id,
+            style: {
+              maxHeight,
+              minHeight: isSearchFocused ? "100dvh" : minHeight,
+              maxWidth: layoutProp?.maxWidth ?? "800px",
+              margin: "0 auto",
+              width: "100%",
+              left: 0,
+              right: 0,
+              paddingBottom: "calc(0px + env(safe-area-inset-bottom))",
+              background: isSearchFocused ? layoutProp?.fullScreenSearchBackground || layoutProp?.backgroundColor : layoutProp?.backgroundColor,
+              borderTopLeftRadius: isSearchFocused ? "0px" : "16px",
+              borderTopRightRadius: isSearchFocused ? "0px" : "16px"
+            },
+            children: [
+              isSearchFocused ? /* @__PURE__ */ jsxRuntime.jsx(modalSheet.Sheet.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "selection-viewer-fullscreen-search",
+                  style: layoutProp?.fullScreenSearchHeaderStyle,
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "selection-viewer-search", style: {
+                    ...searchProp?.containerStyle,
+                    background: searchProp?.background,
+                    padding: searchProp?.padding ? `${searchProp.padding.t} ${searchProp.padding.r} ${searchProp.padding.b} ${searchProp.padding.l}` : "16px"
+                  }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        className: "selection-viewer-search-back-button",
+                        onClick: handleBackFromSearch,
+                        "aria-label": "Exit search mode",
+                        children: searchProp?.backIcon || /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 18L9 12L15 6", stroke: searchProp?.textColor || "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        ref: searchInputRef,
+                        type: "text",
+                        placeholder: searchProp?.text,
+                        value: searchValue,
+                        onChange: handleSearchChange,
+                        className: searchProp?.className || "selection-viewer-search-input",
+                        style: {
+                          color: searchProp?.textColor,
+                          ...searchProp?.inputStyle
+                        },
+                        onFocus: handleSearchFocus,
+                        onBlur: handleSearchBlur,
+                        autoFocus: shouldAutoFocus
+                      },
+                      inputKey
+                    ),
+                    searchValue && /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        className: "selection-viewer-search-clear-button",
+                        onClick: clearSearch,
+                        "aria-label": "Clear search",
+                        children: searchProp?.clearIcon || /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: searchProp?.textColor || "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                      }
+                    )
+                  ] })
+                }
+              ) }) : /* @__PURE__ */ jsxRuntime.jsxs(modalSheet.Sheet.Header, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "selection-viewer-header", children: [
+                  cancelButton?.position === "left" && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      style: {
+                        position: "absolute",
+                        left: "0px",
+                        top: "8px",
+                        border: "none",
+                        backgroundColor: "transparent",
+                        ...cancelButton.style
+                      },
+                      onClick: cancelButton.onClick || onClose,
+                      children: cancelButton.view || cancelButton.text || "Cancel"
+                    }
+                  ),
+                  !isSearchFocused && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "selection-viewer-drag-handle",
+                      style: {
+                        background: layoutProp?.handleColor || "#ccc",
+                        width: layoutProp?.handleWidth || "40px",
+                        marginBottom: layoutProp?.gapBetweenHandleAndTitle || "12px"
+                      }
+                    }
+                  ),
+                  cancelButton?.position === "right" && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      style: {
+                        position: "absolute",
+                        right: "0px",
+                        top: "8px",
+                        border: "none",
+                        backgroundColor: "transparent",
+                        ...cancelButton.style
+                      },
+                      onClick: cancelButton.onClick || onClose,
+                      children: cancelButton.view || cancelButton.text || "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleProp.containerClass || "selection-viewer-container", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
+                    {
+                      id: `${id}-title`,
+                      className: titleProp.className || "selection-viewer-title",
+                      style: {
+                        marginBottom: layoutProp?.gapBetweenTitleAndSearch || "8px",
+                        color: titleProp?.textColor || "black",
+                        ...titleProp.style
+                      },
+                      children: titleProp.text
+                    }
+                  ) })
+                ] }),
+                searchProp && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "selection-viewer-search",
+                    style: {
+                      background: searchProp.background,
+                      padding: searchProp.padding ? `${searchProp.padding.t} ${searchProp.padding.r} ${searchProp.padding.b} ${searchProp.padding.l}` : "8px 16px",
+                      marginBottom: layoutProp?.gapBetweenSearchAndContent,
+                      ...searchProp.containerStyle
+                    },
+                    children: [
+                      searchProp.prefixIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: searchProp.prefixGap || "8px" }, children: searchProp.prefixIcon }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          ref: searchInputRef,
+                          type: "text",
+                          placeholder: searchProp.text,
+                          value: searchValue,
+                          onChange: handleSearchChange,
+                          className: searchProp.className || "selection-viewer-search-input",
+                          style: {
+                            color: searchProp?.textColor,
+                            ...searchProp.inputStyle
+                          },
+                          onFocus: handleSearchFocus,
+                          onBlur: handleSearchBlur,
+                          autoFocus: shouldAutoFocus
+                        },
+                        inputKey
+                      ),
+                      searchValue && /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          className: "selection-viewer-search-clear-button",
+                          onClick: clearSearch,
+                          "aria-label": "Clear search",
+                          style: { marginLeft: searchProp.suffixGap || "8px" },
+                          children: searchProp.clearIcon || searchProp.suffixIcon || /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                        }
+                      ),
+                      !searchValue && searchProp.suffixIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: searchProp.suffixGap || "8px" }, children: searchProp.suffixIcon })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(modalSheet.Sheet.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `selection-viewer-content ${childrenDirection}`,
+                  onScroll: onPaginate ? handleScroll : void 0,
+                  style: {
+                    paddingTop: isSearchFocused ? layoutProp?.gapBetweenSearchAndContent : "0",
+                    paddingBottom: keyboardHeight > 0 ? `${keyboardHeight + 16}px` : "16px"
+                  },
+                  children: React__default.default.Children.count(children) > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    children,
+                    selectionState === "loading" && /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "selection-viewer-loading",
+                        style: {
+                          padding: loadingProp?.padding ? `${loadingProp.padding.t} ${loadingProp.padding.r} ${loadingProp.padding.b} ${loadingProp.padding.l}` : "16px",
+                          ...loadingProp?.style
+                        },
+                        children: loadingProp?.view
+                      }
+                    )
+                  ] }) : selectionState === "empty" || React__default.default.Children.count(children) <= 0 && (selectionState != "loading" && selectionState != "error") ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "selection-viewer-no-results",
+                      style: {
+                        padding: noResultProp?.padding ? `${noResultProp.padding.t} ${noResultProp.padding.r} ${noResultProp.padding.b} ${noResultProp.padding.l}` : "16px",
+                        ...noResultProp?.style
+                      },
+                      children: noResultProp?.view || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "selection-viewer-default-no-results", children: noResultProp?.text || "No results found" })
+                    }
+                  ) : selectionState === "loading" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "selection-viewer-loading",
+                      style: {
+                        padding: loadingProp?.padding ? `${loadingProp.padding.t} ${loadingProp.padding.r} ${loadingProp.padding.b} ${loadingProp.padding.l}` : "16px",
+                        ...loadingProp?.style
+                      },
+                      children: loadingProp?.view
+                    }
+                  ) : selectionState === "error" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "selection-viewer-error",
+                      style: {
+                        padding: errorProp?.padding ? `${errorProp.padding.t} ${errorProp.padding.r} ${errorProp.padding.b} ${errorProp.padding.l}` : "16px",
+                        ...errorProp?.style
+                      },
+                      children: errorProp?.view || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "selection-viewer-default-error", children: errorProp?.text || "No results found" })
+                    }
+                  ) : null
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(modalSheet.Sheet.Backdrop, { onTap: backDrop ? onClose : void 0 })
+      ]
+    }
+  );
+};
+var useSelectionController = (initialSelectionState) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selectionState, setSelectionState] = React.useState(initialSelectionState || "initial");
+  const [selectionId] = React.useState(() => `selection-${Math.random().toString(36).substring(2, 11)}`);
+  const operations = React.useMemo(() => ({
+    open: () => setIsOpen(true),
+    close: () => setIsOpen(false),
+    toggle: () => setIsOpen((prev) => !prev),
+    setSelectionState
+  }), [setSelectionState]);
+  return [selectionId, operations, isOpen, selectionState];
+};
+var SelectionViewer_default = SelectionViewer;
+
+exports.SelectionViewer = SelectionViewer_default;
+exports.default = SelectionViewer_default;
+exports.useSelectionController = useSelectionController;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map