@liberfi.io/ui-scaffold 0.1.35 → 0.1.36

package/README.md

@@ -0,0 +1,350 @@
+# @liberfi.io/ui-scaffold
+
+Page layout and scaffold components for the Liberfi React SDK. Provides a responsive layout shell with configurable header/footer, auto-active navigation, and IoC-friendly design.
+
+## Design Philosophy
+
+- **IoC (Inversion of Control)**: The scaffold does not hardcode routing or side effects. Consumers inject `pathname` and `onNavigate` via props, keeping the library framework-agnostic.
+- **Breakpoint-array visibility**: Header and footer visibility is described as an explicit list of breakpoints (e.g. `["desktop", "tablet"]`), making the API symmetric and self-documenting.
+- **Slot-based composition**: Header and footer accept either pre-built components (`ScaffoldHeader`, `ScaffoldFooter`) or arbitrary `ReactNode` for full customisation.
+- **CSS-variable height system**: Fixed header/footer heights are exposed as CSS custom properties (`--scaffold-header-height`, `--scaffold-footer-height`) so children can compute their own height via `calc()`.
+
+## Installation
+
+```bash
+pnpm add @liberfi.io/ui-scaffold
+```
+
+### Peer dependencies
+
+The consumer must provide:
+
+- `react` >= 18
+- `react-dom` >= 18
+- `jotai` >= 2.15.1 (used by the draggable sub-module)
+- `@liberfi.io/ui` (workspace)
+- `@liberfi.io/i18n` (workspace)
+
+## API Reference
+
+### Components
+
+#### `Scaffold`
+
+Main layout container. Manages header/footer areas, CSS variables, responsive visibility, and provides `ScaffoldContext`.
+
+| Prop            | Type                                       | Default                         | Description                                     |
+| --------------- | ------------------------------------------ | ------------------------------- | ----------------------------------------------- |
+| `pathname`      | `string`                                   | `""`                            | Current route pathname for nav active detection |
+| `onNavigate`    | `(href: string) => void`                   | no-op                           | Navigation callback (IoC)                       |
+| `header`        | `ReactNode`                                | —                               | Header slot                                     |
+| `footer`        | `ReactNode`                                | —                               | Footer slot                                     |
+| `headerHeight`  | `number`                                   | `60`                            | Header height in px                             |
+| `footerHeight`  | `number`                                   | `56`                            | Footer height in px                             |
+| `headerVisible` | `LayoutBreakpoint[]`                       | `["desktop","tablet","mobile"]` | Breakpoints where header is visible             |
+| `footerVisible` | `LayoutBreakpoint[]`                       | `[]`                            | Breakpoints where footer is visible             |
+| `className`     | `string`                                   | —                               | Wrapper class                                   |
+| `classNames`    | `{ wrapper?, header?, content?, footer? }` | —                               | Per-section classes                             |
+
+#### `ScaffoldHeader`
+
+Pre-built desktop header with left/nav/right slots.
+
+| Prop       | Type        | Description                                        |
+| ---------- | ----------- | -------------------------------------------------- |
+| `left`     | `ReactNode` | Left slot (e.g. Logo)                              |
+| `right`    | `ReactNode` | Right slot (e.g. account menu)                     |
+| `navItems` | `NavItem[]` | Navigation items with auto-active detection        |
+| `children` | `ReactNode` | Full custom override (ignores left/right/navItems) |
+
+#### `ScaffoldFooter`
+
+Pre-built mobile footer with tab-style navigation.
+
+| Prop       | Type        | Description                                 |
+| ---------- | ----------- | ------------------------------------------- |
+| `navItems` | `NavItem[]` | Navigation items rendered as icon+text tabs |
+| `children` | `ReactNode` | Full custom override (ignores navItems)     |
+
+#### `NavLink`
+
+Single navigation link with auto-active detection. Reads `pathname` and `onNavigate` from `ScaffoldContext`.
+
+| Prop      | Type                   | Default    | Description               |
+| --------- | ---------------------- | ---------- | ------------------------- |
+| `item`    | `NavItem`              | —          | Navigation item to render |
+| `variant` | `"header" \| "footer"` | `"header"` | Visual variant            |
+
+#### `Logo`
+
+Logo link component with desktop/mobile icon variants.
+
+| Prop       | Type        | Default | Description                                 |
+| ---------- | ----------- | ------- | ------------------------------------------- |
+| `icon`     | `ReactNode` | —       | Icon for desktop                            |
+| `miniIcon` | `ReactNode` | —       | Icon for mobile (and desktop when below xl) |
+| `href`     | `string`    | `"/"`   | URL when clicking the logo                  |
+
+### Hooks
+
+#### `useScaffold()`
+
+Returns the full `ScaffoldContextValue`. Must be used within a `<Scaffold>`.
+
+```typescript
+const {
+  pathname,
+  onNavigate,
+  headerHeight,
+  footerHeight,
+  headerVisible,
+  footerVisible,
+  activeNavKey,
+} = useScaffold();
+```
+
+#### `useScaffoldLayout(config)`
+
+Declaratively set the layout for the current page. Overrides on mount, resets to Scaffold defaults on unmount.
+
+```typescript
+useScaffoldLayout({
+  headerVisible?: LayoutBreakpoint[];
+  footerVisible?: LayoutBreakpoint[];
+  activeNavKey?: string;
+});
+```
+
+### Types
+
+#### `LayoutBreakpoint`
+
+```typescript
+type LayoutBreakpoint = "desktop" | "tablet" | "mobile";
+```
+
+Breakpoint mapping: desktop >= 1024px (lg), tablet 640–1023px (sm–lg), mobile < 640px.
+
+#### `NavItem`
+
+```typescript
+type NavItem = {
+  key: string;
+  label: string;
+  href: string;
+  icon?: ReactNode;
+  match?: string | RegExp | ((pathname: string) => boolean);
+};
+```
+
+#### `ScaffoldContextValue`
+
+```typescript
+type ScaffoldContextValue = {
+  pathname: string;
+  onNavigate: (href: string) => void;
+  headerHeight: number;
+  footerHeight: number;
+  headerVisible: LayoutBreakpoint[];
+  footerVisible: LayoutBreakpoint[];
+  activeNavKey: string | undefined;
+  setHeaderVisible: (breakpoints: LayoutBreakpoint[]) => void;
+  setFooterVisible: (breakpoints: LayoutBreakpoint[]) => void;
+  setActiveNavKey: (key: string | undefined) => void;
+  defaultHeaderVisible: LayoutBreakpoint[];
+  defaultFooterVisible: LayoutBreakpoint[];
+};
+```
+
+### Utilities
+
+#### `isNavItemActive(item, pathname)`
+
+Check whether a `NavItem` is active for the given pathname.
+
+#### `getVisibilityClass(breakpoints)`
+
+Map a `LayoutBreakpoint[]` to Tailwind visibility class names.
+
+#### `ALL_BREAKPOINTS`
+
+Constant: `["desktop", "tablet", "mobile"]`.
+
+## Usage Examples
+
+### Basic usage with custom header/footer
+
+```tsx
+import { Scaffold } from "@liberfi.io/ui-scaffold";
+
+function App() {
+  const pathname = usePathname(); // from your router
+  const navigate = useNavigate();
+
+  return (
+    <Scaffold
+      pathname={pathname}
+      onNavigate={navigate}
+      header={<MyCustomHeader />}
+      footer={<MyCustomFooter />}
+      headerVisible={["desktop", "tablet"]}
+      footerVisible={["mobile"]}
+    >
+      <MyPageContent />
+    </Scaffold>
+  );
+}
+```
+
+### Using built-in navigation
+
+```tsx
+import {
+  Scaffold,
+  ScaffoldHeader,
+  ScaffoldFooter,
+  Logo,
+  type NavItem,
+} from "@liberfi.io/ui-scaffold";
+
+const navItems: NavItem[] = [
+  { key: "home", label: "Home", href: "/", icon: <HomeIcon /> },
+  { key: "trade", label: "Trade", href: "/trade", icon: <TradeIcon /> },
+  { key: "account", label: "Account", href: "/account", icon: <AccountIcon /> },
+];
+
+function App() {
+  return (
+    <Scaffold
+      pathname={pathname}
+      onNavigate={navigate}
+      headerVisible={["desktop", "tablet"]}
+      footerVisible={["tablet", "mobile"]}
+      header={
+        <ScaffoldHeader
+          left={<Logo icon={<LogoSvg />} />}
+          navItems={navItems}
+          right={<AccountMenu />}
+        />
+      }
+      footer={<ScaffoldFooter navItems={navItems} />}
+    >
+      {children}
+    </Scaffold>
+  );
+}
+```
+
+### Per-page layout overrides
+
+```tsx
+import { useScaffoldLayout } from "@liberfi.io/ui-scaffold";
+
+function HomePage() {
+  useScaffoldLayout({
+    headerVisible: ["desktop", "tablet"],
+    footerVisible: ["tablet", "mobile"],
+    activeNavKey: "home",
+  });
+  return <HomeContent />;
+}
+
+function TradePage() {
+  useScaffoldLayout({
+    headerVisible: ["desktop", "tablet", "mobile"],
+    footerVisible: [],
+  });
+  return <TradeContent />;
+}
+```
+
+### Using CSS variables for height calculation
+
+```tsx
+function PageContent() {
+  return (
+    <div
+      style={{
+        height:
+          "calc(100vh - var(--scaffold-header-height) - var(--scaffold-footer-height))",
+      }}
+    >
+      {/* content with precise height */}
+    </div>
+  );
+}
+```
+
+### Split View
+
+#### `SplitView`
+
+Resizable split-view container with a draggable handle between two panes. Supports horizontal (left | right) and vertical (top | bottom) splitting, and can be nested for complex layouts.
+
+| Prop           | Type                                | Default        | Description                                              |
+| -------------- | ----------------------------------- | -------------- | -------------------------------------------------------- |
+| `direction`    | `"horizontal" \| "vertical"`        | `"horizontal"` | Split direction                                          |
+| `primary`      | `ReactNode`                         | —              | Content for the primary (first) pane                     |
+| `secondary`    | `ReactNode`                         | —              | Content for the secondary (second) pane                  |
+| `defaultSize`  | `number`                            | `400`          | Initial size of the primary pane in px                   |
+| `minSize`      | `number`                            | `100`          | Minimum size of the primary pane in px                   |
+| `maxSize`      | `number`                            | `Infinity`     | Maximum size of the primary pane in px                   |
+| `onSizeChange` | `(size: number) => void`            | —              | Callback when size changes                               |
+| `persistId`    | `string`                            | —              | Unique id for localStorage persistence (omit to disable) |
+| `className`    | `string`                            | —              | Wrapper class                                            |
+| `classNames`   | `{ primary?, secondary?, handle? }` | —              | Per-section classes                                      |
+
+#### `SplitHandle`
+
+Resize handle rendered between panes. Used internally by `SplitView`, but exported for custom layouts.
+
+| Prop            | Type                            | Description                          |
+| --------------- | ------------------------------- | ------------------------------------ |
+| `direction`     | `"horizontal" \| "vertical"`    | Direction of the split               |
+| `isResizing`    | `boolean`                       | Whether a resize is in progress      |
+| `onResizeStart` | `(e: React.MouseEvent) => void` | Mouse-down handler to begin resizing |
+
+### Split View Usage
+
+#### Horizontal split (left | right)
+
+```tsx
+import { SplitView } from "@liberfi.io/ui-scaffold";
+
+<SplitView
+  direction="horizontal"
+  defaultSize={500}
+  minSize={200}
+  maxSize={800}
+  primary={<ChartPanel />}
+  secondary={<OrderFormPanel />}
+/>;
+```
+
+#### Nested trading dashboard layout
+
+```tsx
+<SplitView
+  direction="horizontal"
+  defaultSize={700}
+  minSize={400}
+  maxSize={1200}
+  primary={
+    <SplitView
+      direction="vertical"
+      defaultSize={450}
+      minSize={200}
+      primary={<ChartPanel />}
+      secondary={<PositionsPanel />}
+    />
+  }
+  secondary={<OrderFormPanel />}
+/>
+```
+
+## Future Improvements
+
+- Animation support for header/footer show/hide transitions
+- `DraggablePanelProvider` integration as an optional Scaffold feature
+- Keyboard navigation and focus management for nav items
+- Touch/pointer event support for SplitView resize on mobile

package/dist/index.d.mts

@@ -145,30 +145,166 @@ type UseDraggablePanelDisclosureReturnType = {
 };
 declare function useDraggablePanelDisclosure(id: string): UseDraggablePanelDisclosureReturnType;
 
-type HeaderProps = PropsWithChildren<{
+/** Responsive breakpoints: desktop (>=1024px), tablet (640–1023px), mobile (<640px) */
+type LayoutBreakpoint = "desktop" | "tablet" | "mobile";
+declare const ALL_BREAKPOINTS: LayoutBreakpoint[];
+/** Navigation item for header links and footer tabs */
+type NavItem = {
+    key: string;
+    label: string;
+    href: string;
+    icon?: ReactNode;
+    /**
+     * Custom active-matching rule.
+     * - function: called with pathname, return true if active
+     * - RegExp: tested against pathname
+     * - string: pathname.startsWith(match)
+     * - undefined: exact match for "/", startsWith for others
+     */
+    match?: string | RegExp | ((pathname: string) => boolean);
+};
+/** Check whether a NavItem is active for the given pathname */
+declare function isNavItemActive(item: NavItem, pathname: string): boolean;
+/**
+ * Map a LayoutBreakpoint[] to Tailwind visibility class names.
+ *
+ * desktop = lg+ (>=1024), tablet = sm..lg (640–1023), mobile = <sm (<640)
+ *
+ * Returns a class string that hides the element on breakpoints NOT in the array.
+ */
+declare function getVisibilityClass(breakpoints: LayoutBreakpoint[]): string;
+
+type ScaffoldContextValue = {
+    /** Current route pathname for nav active detection (IoC) */
+    pathname: string;
+    /** Navigation callback (IoC — no router dependency) */
+    onNavigate: (href: string) => void;
+    /** Header height in px */
+    headerHeight: number;
+    /** Footer height in px */
+    footerHeight: number;
+    /** Toolbar height in px */
+    toolbarHeight: number;
+    /** Breakpoints where the header is visible */
+    headerVisible: LayoutBreakpoint[];
+    /** Breakpoints where the footer is visible */
+    footerVisible: LayoutBreakpoint[];
+    /** Breakpoints where the toolbar is visible */
+    toolbarVisible: LayoutBreakpoint[];
+    /** Override header visibility (used by useScaffoldLayout) */
+    setHeaderVisible: (breakpoints: LayoutBreakpoint[]) => void;
+    /** Override footer visibility (used by useScaffoldLayout) */
+    setFooterVisible: (breakpoints: LayoutBreakpoint[]) => void;
+    /** Override toolbar visibility (used by useScaffoldLayout) */
+    setToolbarVisible: (breakpoints: LayoutBreakpoint[]) => void;
+    /** Default headerVisible from Scaffold props (for reset on unmount) */
+    defaultHeaderVisible: LayoutBreakpoint[];
+    /** Default footerVisible from Scaffold props (for reset on unmount) */
+    defaultFooterVisible: LayoutBreakpoint[];
+    /** Default toolbarVisible from Scaffold props (for reset on unmount) */
+    defaultToolbarVisible: LayoutBreakpoint[];
+};
+declare const ScaffoldContext: react.Context<ScaffoldContextValue | null>;
+/** Read the Scaffold context. Throws if used outside a Scaffold. */
+declare function useScaffold(): ScaffoldContextValue;
+/**
+ * Declaratively set the layout for the current page.
+ * Overrides on mount, resets to Scaffold defaults on unmount.
+ *
+ * @example
+ * useScaffoldLayout({
+ *   headerVisible: ["desktop", "tablet"],
+ *   footerVisible: ["tablet", "mobile"],
+ *   toolbarVisible: ["desktop"],
+ * });
+ */
+declare function useScaffoldLayout(config: {
+    headerVisible?: LayoutBreakpoint[];
+    footerVisible?: LayoutBreakpoint[];
+    toolbarVisible?: LayoutBreakpoint[];
+}): void;
+
+type ScaffoldProps = PropsWithChildren<{
+    /** Current route pathname for nav active detection */
+    pathname?: string;
+    /** Navigation callback (IoC — decoupled from router) */
+    onNavigate?: (href: string) => void;
+    /** Header slot */
+    header?: ReactNode;
+    /** Footer slot (typically mobile tab navigation) */
+    footer?: ReactNode;
+    /** Toolbar slot (typically desktop bottom status bar) */
+    toolbar?: ReactNode;
+    /** Header height in px (default 60) */
+    headerHeight?: number;
+    /** Footer height in px (default 56) */
+    footerHeight?: number;
+    /** Toolbar height in px (default 36) */
+    toolbarHeight?: number;
+    /** Breakpoints where the header is visible (default all) */
+    headerVisible?: LayoutBreakpoint[];
+    /** Breakpoints where the footer is visible (default none) */
+    footerVisible?: LayoutBreakpoint[];
+    /** Breakpoints where the toolbar is visible (default none) */
+    toolbarVisible?: LayoutBreakpoint[];
     className?: string;
+    classNames?: {
+        wrapper?: string;
+        header?: string;
+        content?: string;
+        footer?: string;
+        toolbar?: string;
+    };
 }>;
-declare function Header({ children, className }: HeaderProps): react_jsx_runtime.JSX.Element;
+declare function Scaffold({ children, pathname, onNavigate, header, footer, toolbar, headerHeight, footerHeight, toolbarHeight, headerVisible: defaultHeaderVisible, footerVisible: defaultFooterVisible, toolbarVisible: defaultToolbarVisible, className, classNames, }: ScaffoldProps): react_jsx_runtime.JSX.Element;
 
-type MobileHeaderProps = PropsWithChildren<{
+type ScaffoldHeaderProps = PropsWithChildren<{
+    /** Left slot (e.g. Logo) */
+    left?: ReactNode;
+    /** Right slot (e.g. account menu, settings) */
+    right?: ReactNode;
+    /** Navigation items rendered as horizontal links with auto-active detection */
+    navItems?: NavItem[];
     className?: string;
 }>;
-declare function MobileHeader({ children, className }: MobileHeaderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Pre-built header layout with left / nav / right slots.
+ * Pass `children` for full custom control (left/right/navItems will be ignored).
+ */
+declare function ScaffoldHeader({ children, left, right, navItems, className, }: ScaffoldHeaderProps): react_jsx_runtime.JSX.Element;
 
-type FooterProps = PropsWithChildren<{
+type ScaffoldFooterProps = PropsWithChildren<{
+    /** Navigation items rendered as vertical icon+text tabs */
+    navItems?: NavItem[];
     className?: string;
 }>;
-declare function Footer({ children, className }: FooterProps): react_jsx_runtime.JSX.Element;
+/**
+ * Pre-built footer layout with tab-style navigation.
+ * Pass `children` for full custom control (navItems will be ignored).
+ */
+declare function ScaffoldFooter({ children, navItems, className, }: ScaffoldFooterProps): react_jsx_runtime.JSX.Element;
 
-type PageProps = PropsWithChildren<{
+type ScaffoldToolbarProps = PropsWithChildren<{
+    /** Left-aligned content */
+    left?: ReactNode;
+    /** Right-aligned content */
+    right?: ReactNode;
     className?: string;
 }>;
-declare function Page({ children, className }: PageProps): react_jsx_runtime.JSX.Element;
+/**
+ * Pre-built bottom toolbar layout with left / right slots.
+ * Typically shown on desktop while ScaffoldFooter is shown on mobile.
+ * Pass `children` for full custom control (left/right will be ignored).
+ */
+declare function ScaffoldToolbar({ children, left, right, className, }: ScaffoldToolbarProps): react_jsx_runtime.JSX.Element;
 
-type PageContentProps = PropsWithChildren<{
+type NavLinkProps = {
+    item: NavItem;
+    /** "header" = horizontal text link, "footer" = vertical icon+text tab */
+    variant?: "header" | "footer";
     className?: string;
-}>;
-declare function PageContent({ className, children }: PageContentProps): react_jsx_runtime.JSX.Element;
+};
+declare function NavLink({ item, variant, className }: NavLinkProps): react_jsx_runtime.JSX.Element;
 
 type LogoProps = {
     /** icon for desktop */
@@ -182,14 +318,6 @@ type LogoProps = {
 };
 declare function Logo({ href, icon, miniIcon, className }: LogoProps): react_jsx_runtime.JSX.Element;
 
-type HeaderNavigationProps = PropsWithChildren<{
-    href: string;
-    title: string;
-    active?: boolean;
-    className?: string;
-}>;
-declare function HeaderNavigation({ href, title, active, className, }: HeaderNavigationProps): react_jsx_runtime.JSX.Element;
-
 type RenderAsyncModalProps<P = any, R = any> = {
     /** custom parameters for the modal */
     params?: P;
@@ -222,6 +350,47 @@ type UseAsyncModalReturnType<P = any, R = any> = {
 };
 declare function useAsyncModal<P = any, R = any>(id: string): UseAsyncModalReturnType<P, R>;
 
+type SplitViewProps = {
+    /** Split direction */
+    direction?: "horizontal" | "vertical";
+    /** Content for the primary (first) pane */
+    primary: ReactNode;
+    /** Content for the secondary (second) pane */
+    secondary: ReactNode;
+    /** Initial size of the primary pane in px */
+    defaultSize?: number;
+    /** Minimum size of the primary pane in px */
+    minSize?: number;
+    /** Maximum size of the primary pane in px */
+    maxSize?: number;
+    /** Minimum size of the secondary pane in px */
+    secondaryMinSize?: number;
+    /** Callback when size changes */
+    onSizeChange?: (size: number) => void;
+    /** Unique id for localStorage persistence (omit to disable) */
+    persistId?: string;
+    className?: string;
+    classNames?: {
+        primary?: string;
+        secondary?: string;
+        handle?: string;
+    };
+};
+/**
+ * Resizable split-view container with a draggable handle between two panes.
+ * Supports horizontal (left | right) and vertical (top | bottom) splitting.
+ * Composable: nest SplitViews for complex layouts (e.g. trading dashboards).
+ */
+declare function SplitView({ direction, primary, secondary, defaultSize, minSize, maxSize, secondaryMinSize, onSizeChange, persistId, className, classNames, }: SplitViewProps): react_jsx_runtime.JSX.Element;
+
+type SplitHandleProps = {
+    direction: "horizontal" | "vertical";
+    isResizing: boolean;
+    onResizeStart: (e: React.MouseEvent) => void;
+    className?: string;
+};
+declare function SplitHandle({ direction, isResizing, onResizeStart, className, }: SplitHandleProps): react_jsx_runtime.JSX.Element;
+
 declare global {
     interface Window {
         __LIBERFI_VERSION__?: {
@@ -229,6 +398,6 @@ declare global {
         };
     }
 }
-declare const _default: "0.1.35";
+declare const _default: "0.1.36";
 
-export { AsyncModal, type AsyncModalProps, type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, Footer, type FooterProps, Header, HeaderNavigation, type HeaderNavigationProps, type HeaderProps, Logo, type LogoProps, MobileHeader, type MobileHeaderProps, type OpenAsyncModalOptions, type OpenDraggableModalOptions, type OpenDraggablePanelOptions, Page, PageContent, type PageContentProps, type PageProps, type RenderAsyncModalProps, type UseAsyncModalReturnType, type UseDraggableDisclosureReturnType, type UseDraggableModalDisclosureReturnType, type UseDraggablePanelDisclosureReturnType, useAsyncModal, useDraggableDisclosure, useDraggableModalDisclosure, useDraggablePanelDisclosure, _default as version };
+export { ALL_BREAKPOINTS, AsyncModal, type AsyncModalProps, type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, type LayoutBreakpoint, Logo, type LogoProps, type NavItem, NavLink, type NavLinkProps, type OpenAsyncModalOptions, type OpenDraggableModalOptions, type OpenDraggablePanelOptions, type RenderAsyncModalProps, Scaffold, ScaffoldContext, type ScaffoldContextValue, ScaffoldFooter, type ScaffoldFooterProps, ScaffoldHeader, type ScaffoldHeaderProps, type ScaffoldProps, ScaffoldToolbar, type ScaffoldToolbarProps, SplitHandle, type SplitHandleProps, SplitView, type SplitViewProps, type UseAsyncModalReturnType, type UseDraggableDisclosureReturnType, type UseDraggableModalDisclosureReturnType, type UseDraggablePanelDisclosureReturnType, getVisibilityClass, isNavItemActive, useAsyncModal, useDraggableDisclosure, useDraggableModalDisclosure, useDraggablePanelDisclosure, useScaffold, useScaffoldLayout, _default as version };