twico-ui 1.0.2 → 1.1.0

package/dist/index.d.cts

@@ -1900,6 +1900,24 @@ interface TreeViewProps extends React.HTMLAttributes<HTMLDivElement> {
 
 declare function TreeView(props: TreeViewProps): React.JSX.Element;
 
+interface AppShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /** The sidebar element (e.g. a `<Sidebar/>`), rendered full-height on the inline-start side. */
+  sidebar?: React.ReactNode;
+  /**
+   * Topbar content, rendered in a fixed header above the scrollable content. The header is a flex
+   * row with `space-between`, so pass two groups (left/right) and they spread to the edges.
+   */
+  header?: React.ReactNode;
+  /** Main content — fills the remaining space and scrolls independently of the sidebar/header. */
+  children?: React.ReactNode;
+  /** Overall shell height (CSS length). Use a fixed value to embed the shell in a smaller region. @default "100dvh" */
+  height?: string | number;
+  /** Pad the scrollable content region. @default true */
+  padded?: boolean;
+}
+
+declare function AppShell(props: AppShellProps): React.JSX.Element;
+
 /** Generic, token-styled element — the building block for non-flex layout. */
 interface BoxProps extends React.HTMLAttributes<HTMLElement> {
   /** Element/tag to render. @default "div" */
@@ -2186,4 +2204,4 @@ declare function useScrollLock(locked?: boolean): void;
 /** A stable, SSR-safe unique id (optionally prefixed). */
 declare function useId(prefix?: string): string;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, Avatar, AvatarMenu, type AvatarMenuProps, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Carousel, type CarouselProps, Chart, type ChartDatum, type ChartProps, Checkbox, type CheckboxProps, Code, type CodeProps, ColorPicker, type ColorPickerProps, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, Container, type ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableColumn, type DatatableProps, type DatatableQuery, type DatatableRowAction, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, Grid, type GridProps, Heading, type HeadingProps, IconButton, type IconButtonProps, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, List, type ListItemData, type ListProps, Menu, type MenuItemDef, type MenuProps, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarLink, type NavbarProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioProps, Rating, type RatingProps, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, ToastViewport, type ToastViewportProps, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, type UseColorSchemeOptions, type UseKeyPressOptions, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, AppShell, type AppShellProps, Avatar, AvatarMenu, type AvatarMenuProps, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Carousel, type CarouselProps, Chart, type ChartDatum, type ChartProps, Checkbox, type CheckboxProps, Code, type CodeProps, ColorPicker, type ColorPickerProps, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, Container, type ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableColumn, type DatatableProps, type DatatableQuery, type DatatableRowAction, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, Grid, type GridProps, Heading, type HeadingProps, IconButton, type IconButtonProps, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, List, type ListItemData, type ListProps, Menu, type MenuItemDef, type MenuProps, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarLink, type NavbarProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioProps, Rating, type RatingProps, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, ToastViewport, type ToastViewportProps, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, type UseColorSchemeOptions, type UseKeyPressOptions, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };

package/dist/index.d.ts

@@ -1900,6 +1900,24 @@ interface TreeViewProps extends React.HTMLAttributes<HTMLDivElement> {
 
 declare function TreeView(props: TreeViewProps): React.JSX.Element;
 
+interface AppShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /** The sidebar element (e.g. a `<Sidebar/>`), rendered full-height on the inline-start side. */
+  sidebar?: React.ReactNode;
+  /**
+   * Topbar content, rendered in a fixed header above the scrollable content. The header is a flex
+   * row with `space-between`, so pass two groups (left/right) and they spread to the edges.
+   */
+  header?: React.ReactNode;
+  /** Main content — fills the remaining space and scrolls independently of the sidebar/header. */
+  children?: React.ReactNode;
+  /** Overall shell height (CSS length). Use a fixed value to embed the shell in a smaller region. @default "100dvh" */
+  height?: string | number;
+  /** Pad the scrollable content region. @default true */
+  padded?: boolean;
+}
+
+declare function AppShell(props: AppShellProps): React.JSX.Element;
+
 /** Generic, token-styled element — the building block for non-flex layout. */
 interface BoxProps extends React.HTMLAttributes<HTMLElement> {
   /** Element/tag to render. @default "div" */
@@ -2186,4 +2204,4 @@ declare function useScrollLock(locked?: boolean): void;
 /** A stable, SSR-safe unique id (optionally prefixed). */
 declare function useId(prefix?: string): string;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, Avatar, AvatarMenu, type AvatarMenuProps, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Carousel, type CarouselProps, Chart, type ChartDatum, type ChartProps, Checkbox, type CheckboxProps, Code, type CodeProps, ColorPicker, type ColorPickerProps, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, Container, type ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableColumn, type DatatableProps, type DatatableQuery, type DatatableRowAction, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, Grid, type GridProps, Heading, type HeadingProps, IconButton, type IconButtonProps, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, List, type ListItemData, type ListProps, Menu, type MenuItemDef, type MenuProps, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarLink, type NavbarProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioProps, Rating, type RatingProps, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, ToastViewport, type ToastViewportProps, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, type UseColorSchemeOptions, type UseKeyPressOptions, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, AppShell, type AppShellProps, Avatar, AvatarMenu, type AvatarMenuProps, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Carousel, type CarouselProps, Chart, type ChartDatum, type ChartProps, Checkbox, type CheckboxProps, Code, type CodeProps, ColorPicker, type ColorPickerProps, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, Container, type ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableColumn, type DatatableProps, type DatatableQuery, type DatatableRowAction, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, Grid, type GridProps, Heading, type HeadingProps, IconButton, type IconButtonProps, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, List, type ListItemData, type ListProps, Menu, type MenuItemDef, type MenuProps, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarLink, type NavbarProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioProps, Rating, type RatingProps, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, ToastViewport, type ToastViewportProps, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, type UseColorSchemeOptions, type UseKeyPressOptions, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };

package/dist/index.mjs

@@ -8670,6 +8670,135 @@ function Rating({
     }
   );
 }
+var TOOLTIP_CSS = `
+.twc-tooltip-wrap { display: inline-flex; }
+.twc-tooltip {
+  position: fixed; z-index: var(--z-tooltip); pointer-events: none;
+  padding: 6px 10px; border-radius: var(--radius-md);
+  background: var(--color-text); color: var(--color-surface);
+  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-medium);
+  line-height: 1.3; white-space: nowrap; box-shadow: var(--shadow-md);
+  opacity: 0; transform: scale(0.9); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);
+}
+.twc-tooltip[data-show="true"] { opacity: 1; transform: scale(1); }
+.twc-tooltip[data-place="top"]    { transform-origin: bottom center; translate: -50% 0; }
+.twc-tooltip[data-place="bottom"] { transform-origin: top center; translate: -50% 0; }
+.twc-tooltip[data-place="left"]   { transform-origin: right center; translate: 0 -50%; }
+.twc-tooltip[data-place="right"]  { transform-origin: left center; translate: 0 -50%; }
+.twc-tooltip[data-show="true"][data-place="top"], .twc-tooltip[data-show="true"][data-place="bottom"] { transform: scale(1); }
+.twc-tooltip__arrow { position: absolute; width: 7px; height: 7px; background: var(--color-text); transform: rotate(45deg); }
+.twc-tooltip[data-place="top"] .twc-tooltip__arrow    { bottom: -3px; left: 50%; margin-left: -3.5px; }
+.twc-tooltip[data-place="bottom"] .twc-tooltip__arrow { top: -3px; left: 50%; margin-left: -3.5px; }
+.twc-tooltip[data-place="left"] .twc-tooltip__arrow   { right: -3px; top: 50%; margin-top: -3.5px; }
+.twc-tooltip[data-place="right"] .twc-tooltip__arrow  { left: -3px; top: 50%; margin-top: -3.5px; }
+@media (prefers-reduced-motion: reduce) { .twc-tooltip { transition: opacity var(--duration-fast) linear; transform: none; } }
+`;
+function Tooltip({
+  children,
+  label,
+  placement = "top",
+  delay = 120,
+  className = "",
+  ...rest
+}) {
+  const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
+  const id = React23__default.useId();
+  const [show, setShow] = React23__default.useState(false);
+  const [coords, setCoords] = React23__default.useState(null);
+  const timer = React23__default.useRef(null);
+  const wrapRef = React23__default.useRef(null);
+  const tipRef = React23__default.useRef(null);
+  const open = () => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setShow(true), delay);
+  };
+  const close = () => {
+    clearTimeout(timer.current);
+    setShow(false);
+  };
+  React23__default.useEffect(() => () => clearTimeout(timer.current), []);
+  const place = React23__default.useCallback(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const cx = Math.round(r.left + r.width / 2), cy = Math.round(r.top + r.height / 2);
+    const vw = window.innerWidth, vh = window.innerHeight, gap = 8, margin = 8;
+    const tip = tipRef.current;
+    const tw = tip ? tip.offsetWidth : 0, th = tip ? tip.offsetHeight : 0;
+    const clampX = (c) => tw ? Math.round(Math.min(Math.max(c, margin + tw / 2), vw - margin - tw / 2)) : c;
+    const clampY = (c) => th ? Math.round(Math.min(Math.max(c, margin + th / 2), vh - margin - th / 2)) : c;
+    const base = { left: "auto", right: "auto", top: "auto", bottom: "auto" };
+    if (placement === "bottom") setCoords({ ...base, left: clampX(cx), top: Math.round(r.bottom + gap) });
+    else if (placement === "left") setCoords({ ...base, top: clampY(cy), right: Math.round(vw - r.left + gap) });
+    else if (placement === "right") setCoords({ ...base, top: clampY(cy), left: Math.round(r.right + gap) });
+    else setCoords({ ...base, left: clampX(cx), bottom: Math.round(vh - r.top + gap) });
+  }, [placement]);
+  React23__default.useEffect(() => {
+    place();
+  }, [place]);
+  React23__default.useEffect(() => {
+    if (!show) return void 0;
+    place();
+    const onMove = () => place();
+    window.addEventListener("scroll", onMove, true);
+    window.addEventListener("resize", onMove);
+    return () => {
+      window.removeEventListener("scroll", onMove, true);
+      window.removeEventListener("resize", onMove);
+    };
+  }, [show, place]);
+  React23__default.useEffect(() => {
+    if (!show) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        clearTimeout(timer.current);
+        setShow(false);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [show]);
+  const describedBy = show ? id : void 0;
+  const trigger = React23__default.isValidElement(children) && children.type !== React23__default.Fragment ? React23__default.cloneElement(children, {
+    "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
+  }) : /* @__PURE__ */ jsx("span", { "aria-describedby": describedBy, children });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: wrapRef,
+      className: `twc-tooltip-wrap ${className}`,
+      onMouseEnter: open,
+      onMouseLeave: close,
+      onFocus: open,
+      onBlur: close,
+      ...rest,
+      children: [
+        __twcStyles,
+        trigger,
+        coords ? createPortal(
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              ref: tipRef,
+              id,
+              className: "twc-tooltip",
+              "data-place": placement,
+              "data-show": show || void 0,
+              role: "tooltip",
+              "aria-hidden": show ? void 0 : "true",
+              style: { position: "fixed", left: coords.left, right: coords.right, top: coords.top, bottom: coords.bottom },
+              children: [
+                label,
+                /* @__PURE__ */ jsx("span", { className: "twc-tooltip__arrow", "aria-hidden": "true" })
+              ]
+            }
+          ),
+          document.body
+        ) : null
+      ]
+    }
+  );
+}
 var SIDEBAR_CSS = `
 .twc-sidebar { display: flex; flex-direction: column; height: 100%; font-family: var(--font-sans);
   background: var(--color-surface); border-inline-end: var(--border-thin) solid var(--color-border);
@@ -8753,10 +8882,10 @@ function Sidebar({
           "data-active": it.active || void 0,
           "aria-current": it.active ? "page" : void 0,
           onClick: it.onClick,
-          title: collapsed && labelStr != null ? labelStr : void 0,
           "aria-label": collapsed && labelStr != null ? labelStr : void 0
         };
-        return href != null ? /* @__PURE__ */ jsx("a", { href, ...common, children: inner }, i) : /* @__PURE__ */ jsx("button", { type: "button", ...common, children: inner }, i);
+        const node = href != null ? /* @__PURE__ */ jsx("a", { href, ...common, children: inner }, i) : /* @__PURE__ */ jsx("button", { type: "button", ...common, children: inner }, i);
+        return collapsed && labelStr != null ? /* @__PURE__ */ jsx(Tooltip, { label: labelStr, placement: "right", style: { display: "block" }, children: node }, i) : node;
       })()
     ) }),
     footer || collapsible ? /* @__PURE__ */ jsxs("div", { className: "twc-sidebar__foot", children: [
@@ -9898,135 +10027,6 @@ function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps
     )) })
   ] });
 }
-var TOOLTIP_CSS = `
-.twc-tooltip-wrap { display: inline-flex; }
-.twc-tooltip {
-  position: fixed; z-index: var(--z-tooltip); pointer-events: none;
-  padding: 6px 10px; border-radius: var(--radius-md);
-  background: var(--color-text); color: var(--color-surface);
-  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-medium);
-  line-height: 1.3; white-space: nowrap; box-shadow: var(--shadow-md);
-  opacity: 0; transform: scale(0.9); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);
-}
-.twc-tooltip[data-show="true"] { opacity: 1; transform: scale(1); }
-.twc-tooltip[data-place="top"]    { transform-origin: bottom center; translate: -50% 0; }
-.twc-tooltip[data-place="bottom"] { transform-origin: top center; translate: -50% 0; }
-.twc-tooltip[data-place="left"]   { transform-origin: right center; translate: 0 -50%; }
-.twc-tooltip[data-place="right"]  { transform-origin: left center; translate: 0 -50%; }
-.twc-tooltip[data-show="true"][data-place="top"], .twc-tooltip[data-show="true"][data-place="bottom"] { transform: scale(1); }
-.twc-tooltip__arrow { position: absolute; width: 7px; height: 7px; background: var(--color-text); transform: rotate(45deg); }
-.twc-tooltip[data-place="top"] .twc-tooltip__arrow    { bottom: -3px; left: 50%; margin-left: -3.5px; }
-.twc-tooltip[data-place="bottom"] .twc-tooltip__arrow { top: -3px; left: 50%; margin-left: -3.5px; }
-.twc-tooltip[data-place="left"] .twc-tooltip__arrow   { right: -3px; top: 50%; margin-top: -3.5px; }
-.twc-tooltip[data-place="right"] .twc-tooltip__arrow  { left: -3px; top: 50%; margin-top: -3.5px; }
-@media (prefers-reduced-motion: reduce) { .twc-tooltip { transition: opacity var(--duration-fast) linear; transform: none; } }
-`;
-function Tooltip({
-  children,
-  label,
-  placement = "top",
-  delay = 120,
-  className = "",
-  ...rest
-}) {
-  const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
-  const id = React23__default.useId();
-  const [show, setShow] = React23__default.useState(false);
-  const [coords, setCoords] = React23__default.useState(null);
-  const timer = React23__default.useRef(null);
-  const wrapRef = React23__default.useRef(null);
-  const tipRef = React23__default.useRef(null);
-  const open = () => {
-    clearTimeout(timer.current);
-    timer.current = setTimeout(() => setShow(true), delay);
-  };
-  const close = () => {
-    clearTimeout(timer.current);
-    setShow(false);
-  };
-  React23__default.useEffect(() => () => clearTimeout(timer.current), []);
-  const place = React23__default.useCallback(() => {
-    const el = wrapRef.current;
-    if (!el) return;
-    const r = el.getBoundingClientRect();
-    const cx = Math.round(r.left + r.width / 2), cy = Math.round(r.top + r.height / 2);
-    const vw = window.innerWidth, vh = window.innerHeight, gap = 8, margin = 8;
-    const tip = tipRef.current;
-    const tw = tip ? tip.offsetWidth : 0, th = tip ? tip.offsetHeight : 0;
-    const clampX = (c) => tw ? Math.round(Math.min(Math.max(c, margin + tw / 2), vw - margin - tw / 2)) : c;
-    const clampY = (c) => th ? Math.round(Math.min(Math.max(c, margin + th / 2), vh - margin - th / 2)) : c;
-    const base = { left: "auto", right: "auto", top: "auto", bottom: "auto" };
-    if (placement === "bottom") setCoords({ ...base, left: clampX(cx), top: Math.round(r.bottom + gap) });
-    else if (placement === "left") setCoords({ ...base, top: clampY(cy), right: Math.round(vw - r.left + gap) });
-    else if (placement === "right") setCoords({ ...base, top: clampY(cy), left: Math.round(r.right + gap) });
-    else setCoords({ ...base, left: clampX(cx), bottom: Math.round(vh - r.top + gap) });
-  }, [placement]);
-  React23__default.useEffect(() => {
-    place();
-  }, [place]);
-  React23__default.useEffect(() => {
-    if (!show) return void 0;
-    place();
-    const onMove = () => place();
-    window.addEventListener("scroll", onMove, true);
-    window.addEventListener("resize", onMove);
-    return () => {
-      window.removeEventListener("scroll", onMove, true);
-      window.removeEventListener("resize", onMove);
-    };
-  }, [show, place]);
-  React23__default.useEffect(() => {
-    if (!show) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") {
-        clearTimeout(timer.current);
-        setShow(false);
-      }
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [show]);
-  const describedBy = show ? id : void 0;
-  const trigger = React23__default.isValidElement(children) && children.type !== React23__default.Fragment ? React23__default.cloneElement(children, {
-    "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
-  }) : /* @__PURE__ */ jsx("span", { "aria-describedby": describedBy, children });
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ref: wrapRef,
-      className: `twc-tooltip-wrap ${className}`,
-      onMouseEnter: open,
-      onMouseLeave: close,
-      onFocus: open,
-      onBlur: close,
-      ...rest,
-      children: [
-        __twcStyles,
-        trigger,
-        coords ? createPortal(
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              ref: tipRef,
-              id,
-              className: "twc-tooltip",
-              "data-place": placement,
-              "data-show": show || void 0,
-              role: "tooltip",
-              "aria-hidden": show ? void 0 : "true",
-              style: { position: "fixed", left: coords.left, right: coords.right, top: coords.top, bottom: coords.bottom },
-              children: [
-                label,
-                /* @__PURE__ */ jsx("span", { className: "twc-tooltip__arrow", "aria-hidden": "true" })
-              ]
-            }
-          ),
-          document.body
-        ) : null
-      ]
-    }
-  );
-}
 var TREE_CSS = `
 .twc-tree { font-family: var(--font-sans); font-size: var(--text-sm); user-select: none; }
 .twc-tree__group { list-style: none; margin: 0; padding: 0; }
@@ -10197,6 +10197,34 @@ function TreeView({
     )) })
   ] });
 }
+var SHELL_CSS = `
+.twc-shell { display: flex; overflow: hidden; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); }
+.twc-shell__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; height: 100%; }
+.twc-shell__header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
+  min-height: 60px; padding-inline: var(--space-5); border-bottom: var(--border-thin) solid var(--color-border); background: var(--color-surface); }
+.twc-shell__content { flex: 1 1 auto; min-height: 0; overflow: auto; }
+.twc-shell__content[data-padded="true"] { padding: var(--space-6) var(--space-5); }
+`;
+function AppShell({
+  sidebar,
+  header,
+  children,
+  height = "100dvh",
+  padded = true,
+  className = "",
+  style,
+  ...rest
+}) {
+  const __twcStyles = useScopedStyles("twc-shell-styles", SHELL_CSS);
+  return /* @__PURE__ */ jsxs("div", { className: `twc-shell ${className}`.trim(), style: { height, ...style }, ...rest, children: [
+    __twcStyles,
+    sidebar,
+    /* @__PURE__ */ jsxs("div", { className: "twc-shell__main", children: [
+      header != null ? /* @__PURE__ */ jsx("header", { className: "twc-shell__header", children: header }) : null,
+      /* @__PURE__ */ jsx("main", { className: "twc-shell__content", "data-padded": padded ? "true" : void 0, children })
+    ] })
+  ] });
+}
 function sp(v) {
   if (v == null) return void 0;
   return typeof v === "number" ? `var(--space-${String(v).replace(".", "-")})` : v;
@@ -10833,6 +10861,6 @@ function useId(prefix = "twc") {
   return prefix ? `${prefix}-${raw.replace(/:/g, "")}` : raw;
 }
 
-export { Accordion, Alert, Avatar, AvatarMenu, Badge, Box, Breadcrumb, Button, Card, Carousel, Chart, Checkbox, Code, ColorPicker, Combobox, CommandPalette, Container, Currency, CurrencyField, Datatable, DatePicker, DateRangePicker, Dialog, Divider, Drawer, EmptyState, Field, FileUpload, Grid, Heading, IconButton, Input, Kanban, List, Menu, MultiSelect, Navbar, Pagination, Popover, Progress, Radio, Rating, Select, Sidebar, Skeleton, Slider, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, Tag, Text, Textarea, Timeline, Toast, ToastProvider, ToastViewport, Tooltip, TreeView, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };
+export { Accordion, Alert, AppShell, Avatar, AvatarMenu, Badge, Box, Breadcrumb, Button, Card, Carousel, Chart, Checkbox, Code, ColorPicker, Combobox, CommandPalette, Container, Currency, CurrencyField, Datatable, DatePicker, DateRangePicker, Dialog, Divider, Drawer, EmptyState, Field, FileUpload, Grid, Heading, IconButton, Input, Kanban, List, Menu, MultiSelect, Navbar, Pagination, Popover, Progress, Radio, Rating, Select, Sidebar, Skeleton, Slider, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, Tag, Text, Textarea, Timeline, Toast, ToastProvider, ToastViewport, Tooltip, TreeView, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map