@sybilion/uilib 1.3.5 → 1.3.8

package/dist/esm/components/ui/GridLayout/GridLayout.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './GridLayout.styl.js';
+
+function GridLayout({ children, colWidth = 300, gap = 'var(--p-2)', className, as: asProp, }) {
+    const As = asProp ?? 'div';
+    return (jsx(As, { className: cn(S.root, className), style: {
+            maxWidth: '100%',
+            gap: gap,
+            display: 'grid',
+            gridTemplateColumns: `repeat(auto-fit, minmax(${colWidth}px, 1fr))`,
+        }, children: children }));
+}
+
+export { GridLayout };

package/dist/esm/components/ui/GridLayout/GridLayout.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.GridLayout_root__VF9sR{display:grid;min-width:0;width:100%}.GridLayout_root__VF9sR>*{min-width:300px}";
+var S = {"root":"GridLayout_root__VF9sR"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Page/AppShell/AppShell.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.AppShell_root__ONlNK{display:grid;flex:1;grid-template-areas:\"main\";grid-template-columns:1fr;min-height:0;min-height:100%;width:100%}@media (min-width:768px){.AppShell_root__ONlNK{grid-template-areas:\"sidebar main\";grid-template-columns:var(--sidebar-width) 1fr}[data-slot=sidebar-wrapper][data-state=collapsed] .AppShell_root__ONlNK{grid-template-columns:0 1fr}}.AppShell_mainColumn__Emn1p{display:flex;flex:1;flex-direction:column;grid-area:main;min-height:0;min-width:0}[data-slot=sidebar-wrapper][data-state=collapsed] .AppShell_mainColumn__Emn1p{margin-left:var(--p-3)}.AppShell_mainBody__IoVuy{background-color:var(--page-color);border-radius:var(--p-4);display:flex;flex:1;flex-direction:column;min-width:0;padding-bottom:var(--page-y-padding)}";
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.AppShell_root__ONlNK{display:grid;flex:1;grid-template-areas:\"main\";grid-template-columns:1fr;min-height:0;min-height:100%;width:100%}@media (min-width:1100px){.AppShell_root__ONlNK{grid-template-areas:\"sidebar main\";grid-template-columns:var(--sidebar-width) 1fr}[data-slot=sidebar-wrapper][data-state=collapsed] .AppShell_root__ONlNK{grid-template-columns:0 1fr}}.AppShell_mainColumn__Emn1p{display:flex;flex:1;flex-direction:column;grid-area:main;min-height:0;min-width:0}[data-slot=sidebar-wrapper][data-state=collapsed] .AppShell_mainColumn__Emn1p{margin-left:var(--p-3)}.AppShell_mainBody__IoVuy{background-color:var(--page-color);border-radius:var(--p-4);display:flex;flex:1;flex-direction:column;min-width:0;padding-bottom:var(--page-y-padding)}";
 var S = {"root":"AppShell_root__ONlNK","mainColumn":"AppShell_mainColumn__Emn1p","mainBody":"AppShell_mainBody__IoVuy"};
 styleInject(css_248z);
 

package/dist/esm/components/ui/Sidebar/Sidebar.js

@@ -8,7 +8,7 @@ import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Too
 import { clampSidebarWidthPx, CHAT_WIDTH_STORAGE_KEY, SIDEBAR_WIDTH_DEFAULT_PX, SIDEBAR_WIDTH_MIN_PX, SIDEBAR_WIDTH_STORAGE_KEY_PX, SIDEBAR_WIDTH_STORAGE_KEY_PCT, CHAT_WIDTH_DEFAULT_PX, CHAT_WIDTH_MIN_PX, defaultChatWidthPx, clampChatWidthPx } from '../../../hooks/panelWidth.js';
 import useElemDrag from '../../../hooks/useDragElem.js';
 import useEvent from '../../../hooks/useEvent.js';
-import { useIsMobile } from '../../../hooks/useIsMobile.js';
+import { useIsSidebarSheetLayout } from '../../../hooks/useIsSidebarSheetLayout.js';
 import { useShellWidthObserver } from '../../../hooks/useShellWidthObserver.js';
 import { setCookie, getCookie } from '../../../lib/cookie.js';
 import { getCookiePreferences } from '../../../lib/cookie-consent/cookie-consent.js';
@@ -68,8 +68,8 @@ function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, cla
     const sidebarLsKey = sidebarWidthStorageKey ?? SIDEBAR_WIDTH_STORAGE_KEY_PX;
     const allowPersistSidebarWidth = persistSidebarWidthWithoutConsent ||
         Boolean(getCookiePreferences(userId)?.functional);
-    const isMobile = useIsMobile();
-    const [isOpen, setIsOpen] = useState(isMobile ? false : defaultOpen);
+    const isSidebarSheetLayout = useIsSidebarSheetLayout();
+    const [isOpen, setIsOpen] = useState(isSidebarSheetLayout ? false : defaultOpen);
     const wrapperRef = useRef(null);
     const shellWidthRef = useRef(0);
     const prevShellWidthRef = useRef(0);
@@ -194,14 +194,20 @@ function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, cla
         allowPersistSidebarWidth,
     ]);
     useLayoutEffect(() => {
-        if (!shellEl || isMobile)
+        if (!shellEl || isSidebarSheetLayout)
             return;
         fitPanelWidthsToShell();
-    }, [shellEl, chatPanelOpen, isMobile, isOpen, fitPanelWidthsToShell]);
+    }, [
+        shellEl,
+        chatPanelOpen,
+        isSidebarSheetLayout,
+        isOpen,
+        fitPanelWidthsToShell,
+    ]);
     useShellWidthObserver(shellEl, handleShellResize);
     const setOpen = useCallback((value, options) => {
         const useViewTransition = options?.viewTransition !== false &&
-            !isMobile &&
+            !isSidebarSheetLayout &&
             'startViewTransition' in document &&
             document.startViewTransition;
         if (useViewTransition) {
@@ -215,7 +221,7 @@ function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, cla
         if (getCookiePreferences(userId)?.functional) {
             setCookie('isSidebarOpen', value.toString(), 60 * 60 * 24 * 7);
         }
-    }, [isMobile, userId]);
+    }, [isSidebarSheetLayout, userId]);
     const toggleSidebar = useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);
     useEffect(() => {
         const shell = wrapperRef.current;
@@ -223,7 +229,7 @@ function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, cla
             return;
         if (chatPanelOpen) {
             shell.setAttribute('data-chat-open', '');
-            if (isMobile) {
+            if (isSidebarSheetLayout) {
                 shell.style.setProperty('--chat-panel-width', '100%');
                 shell.style.setProperty('--chat-panel-height', '100dvh');
             }
@@ -237,7 +243,7 @@ function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, cla
             shell.style.setProperty('--chat-panel-width', '0px');
             shell.style.removeProperty('--chat-panel-height');
         }
-    }, [chatPanelOpen, isMobile, chatWidthPx]);
+    }, [chatPanelOpen, isSidebarSheetLayout, chatWidthPx]);
     useEffect(() => {
         return () => {
             const shell = wrapperRef.current;
@@ -291,18 +297,17 @@ function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, cla
                 }, className: cn(SidebarStem.sidebarWrapper, className), ...props, children: [jsx("div", { className: SidebarStem.sidebarMainShell, children: children }), jsx("div", { ref: onChatPanelMount, className: SidebarStem.chatPanelMount, "data-slot": "chat-panel-mount" })] }) }) }));
 }
 function Sidebar({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, side = 'left', variant = 'sidebar', collapsible = 'offcanvas', children, fullHeightResizer = false, ...props }) {
-    const isMobile = useIsMobile();
+    const isSidebarSheetLayout = useIsSidebarSheetLayout();
     const { isOpen, setOpen } = useSidebar();
-    // Only force-close on mobile. Do not call setOpen(true) on desktop — that ran on every
-    // load and overwrote the isSidebarOpen cookie (collapsed → opened + cookie "true").
+    /** Narrow shell: sidebar is a sheet; collapse when crossing into this mode (preserve cookie semantics elsewhere). */
     useEffect(() => {
-        if (isMobile)
+        if (isSidebarSheetLayout)
             setOpen(false);
-    }, [isMobile, setOpen]);
+    }, [isSidebarSheetLayout, setOpen]);
     if (collapsible === 'none') {
         return (jsx("div", { "data-slot": "sidebar", className: cn(SidebarStem.sidebarNone, className), ...props, children: children }));
     }
-    if (isMobile) {
+    if (isSidebarSheetLayout) {
         return (jsx(Sheet, { open: isOpen, onOpenChange: setOpen, ...props, children: jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", className: cn(SidebarStem.sheetContentSidebar, className), style: {
                     '--gap-top': '40px',
                     '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
@@ -364,7 +369,7 @@ function PanelResizeHandle({ className, edge, isActive, startWidthPx, getShellWi
 }
 function SidebarResizeHandle({ className, side = 'left', ...props }) {
     const { isOpen, sidebarWidthPx, setSidebarWidthPx, getShellWidth } = useSidebar();
-    const isMobile = useIsMobile();
+    const isSidebarSheetLayout = useIsSidebarSheetLayout();
     const edge = side === 'left' ? 'trailing' : 'leading';
     const onDragWidth = useCallback((rawPx) => {
         setSidebarWidthPx(rawPx, { persist: false });
@@ -372,10 +377,10 @@ function SidebarResizeHandle({ className, side = 'left', ...props }) {
     const onDragComplete = useCallback((finalRawPx) => {
         setSidebarWidthPx(finalRawPx, { persist: true });
     }, [setSidebarWidthPx]);
-    if (isMobile || !isOpen) {
+    if (isSidebarSheetLayout || !isOpen) {
         return null;
     }
-    return (jsx(PanelResizeHandle, { edge: edge, isActive: isOpen && !isMobile, startWidthPx: sidebarWidthPx, getShellWidth: getShellWidth, onDragWidth: onDragWidth, onDragComplete: onDragComplete, "data-sidebar": "resize-handle", "data-slot": "sidebar-resize-handle", "data-side": side, className: cn(SidebarStem.sidebarResizeHandle, className), ...props }));
+    return (jsx(PanelResizeHandle, { edge: edge, isActive: isOpen && !isSidebarSheetLayout, startWidthPx: sidebarWidthPx, getShellWidth: getShellWidth, onDragWidth: onDragWidth, onDragComplete: onDragComplete, "data-sidebar": "resize-handle", "data-slot": "sidebar-resize-handle", "data-side": side, className: cn(SidebarStem.sidebarResizeHandle, className), ...props }));
 }
 function SidebarFooter({ className, ...props }) {
     return (jsx("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn(SidebarStem.sidebarFooter, className), ...props }));
@@ -421,9 +426,9 @@ function SidebarMenuSubItem({ className, ...props }) {
 function SidebarMenuSubButton({ asChild = false, size = 'md', isActive = false, tooltip, className, onClick, ...props }) {
     const Comp = asChild ? Slot : 'a';
     const { isOpen, setOpen } = useSidebar();
-    const isMobile = useIsMobile();
+    const isSidebarSheetLayout = useIsSidebarSheetLayout();
     const handleClick = (event) => {
-        if (isMobile && isOpen)
+        if (isSidebarSheetLayout && isOpen)
             setOpen(false);
         onClick?.(event);
     };
@@ -435,7 +440,7 @@ function SidebarMenuSubButton({ asChild = false, size = 'md', isActive = false,
             children: tooltip,
         };
     }
-    return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: button }), jsx(TooltipContent, { side: "right", align: "center", hidden: !isOpen || isMobile, ...tooltip })] }));
+    return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: button }), jsx(TooltipContent, { side: "right", align: "center", hidden: !isOpen || isSidebarSheetLayout, ...tooltip })] }));
 }
 
 export { PanelResizeHandle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarResizeHandle, SidebarSeparator, SidebarTrigger, useSidebar };

package/dist/esm/hooks/index.js

@@ -1,2 +1,3 @@
 export { useIsMobile } from './useIsMobile.js';
+export { useIsSidebarSheetLayout } from './useIsSidebarSheetLayout.js';
 export { default as useEvent } from './useEvent.js';

package/dist/esm/hooks/panelWidth.js

@@ -8,6 +8,10 @@ const CHAT_WIDTH_DEFAULT_PX = 800;
 const SHELL_MAX_FRACTION = 0.4;
 const CHAT_WIDTH_ABS_MAX_PX = 800;
 const CENTRAL_AREA_MIN_PX = 800;
+/** Viewport below this uses sheet sidebar + single-column shell (central + sidebar mins cannot coexist). */
+const SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX = CENTRAL_AREA_MIN_PX + SIDEBAR_WIDTH_MIN_PX;
+/** `max-width` for media queries (`innerWidth < SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX`). */
+const SIDEBAR_SHEET_LAYOUT_MAX_WIDTH_PX = SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX - 1;
 function maxSidebarWidthPx(shellWidth) {
     return Math.floor(shellWidth * SHELL_MAX_FRACTION);
 }
@@ -43,4 +47,4 @@ function defaultChatWidthPx(shellWidth) {
     return clampChatWidthPx(CHAT_WIDTH_DEFAULT_PX, shellWidth, SIDEBAR_WIDTH_DEFAULT_PX);
 }
 
-export { CENTRAL_AREA_MIN_PX, CHAT_WIDTH_ABS_MAX_PX, CHAT_WIDTH_DEFAULT_PX, CHAT_WIDTH_MIN_PX, CHAT_WIDTH_STORAGE_KEY, SHELL_MAX_FRACTION, SIDEBAR_WIDTH_DEFAULT_PX, SIDEBAR_WIDTH_MIN_PX, SIDEBAR_WIDTH_STORAGE_KEY_PCT, SIDEBAR_WIDTH_STORAGE_KEY_PX, clampChatWidthPx, clampSidebarWidthPx, defaultChatWidthPx, maxChatWidthPx, maxSidebarWidthPx };
+export { CENTRAL_AREA_MIN_PX, CHAT_WIDTH_ABS_MAX_PX, CHAT_WIDTH_DEFAULT_PX, CHAT_WIDTH_MIN_PX, CHAT_WIDTH_STORAGE_KEY, SHELL_MAX_FRACTION, SIDEBAR_SHEET_LAYOUT_MAX_WIDTH_PX, SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX, SIDEBAR_WIDTH_DEFAULT_PX, SIDEBAR_WIDTH_MIN_PX, SIDEBAR_WIDTH_STORAGE_KEY_PCT, SIDEBAR_WIDTH_STORAGE_KEY_PX, clampChatWidthPx, clampSidebarWidthPx, defaultChatWidthPx, maxChatWidthPx, maxSidebarWidthPx };

package/dist/esm/hooks/useIsSidebarSheetLayout.js

@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+import { SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX } from './panelWidth.js';
+
+/** True when viewport cannot fit mains min + sidebar min — use Sheet sidebar + single-column AppShell. */
+function useIsSidebarSheetLayout() {
+    const [narrow, setNarrow] = useState(typeof window !== 'undefined'
+        ? window.innerWidth < SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX
+        : undefined);
+    useEffect(() => {
+        const maxW = SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX - 1;
+        const mql = window.matchMedia(`(max-width: ${maxW}px)`);
+        const onChange = () => {
+            setNarrow(window.innerWidth < SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX);
+        };
+        mql.addEventListener('change', onChange);
+        setNarrow(window.innerWidth < SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+    return !!narrow;
+}
+
+export { useIsSidebarSheetLayout };

package/dist/esm/index.js

@@ -1,4 +1,6 @@
 export { useIsMobile } from './hooks/useIsMobile.js';
+export { useIsSidebarSheetLayout } from './hooks/useIsSidebarSheetLayout.js';
+export { CENTRAL_AREA_MIN_PX, SIDEBAR_SHEET_LAYOUT_MAX_WIDTH_PX, SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX, SIDEBAR_WIDTH_MIN_PX } from './hooks/panelWidth.js';
 export { ThemeProvider, useTheme } from './contexts/theme-context.js';
 export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme.js';
 export { SybilionAuthProvider, createSybilionApiFetch, getSybilionApiOriginFromSdk, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth } from './sybilion-auth/SybilionAuthProvider.js';
@@ -36,6 +38,7 @@ export { DropZone } from './components/ui/DropZone/DropZone.js';
 export { FlickeringGrid } from './components/ui/FlickeringGrid/FlickeringGrid.js';
 export { Foldable } from './components/ui/Foldable/Foldable.js';
 export { Gap } from './components/ui/Gap/Gap.js';
+export { GridLayout } from './components/ui/GridLayout/GridLayout.js';
 export { Image } from './components/ui/Image/Image.js';
 export { ImageWithFallback } from './components/ui/ImageWithFallback/ImageWithFallback.js';
 export { Input } from './components/ui/Input/Input.js';

package/dist/esm/types/src/components/ui/GridLayout/GridLayout.d.ts

@@ -0,0 +1,9 @@
+import type { ElementType, ReactNode } from 'react';
+export interface GridLayoutProps {
+    children: ReactNode;
+    colWidth?: number;
+    gap?: string;
+    className?: string;
+    as?: ElementType;
+}
+export declare function GridLayout({ children, colWidth, gap, className, as: asProp, }: GridLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/docs/pages/GridLayoutPage.d.ts

@@ -0,0 +1 @@
+export default function GridLayoutPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useIsMobile } from './useIsMobile';
+export { useIsSidebarSheetLayout } from './useIsSidebarSheetLayout';
 export { default as useEvent, type UseEventParams } from './useEvent';

package/dist/esm/types/src/hooks/panelWidth.d.ts

@@ -8,6 +8,10 @@ export declare const CHAT_WIDTH_DEFAULT_PX = 800;
 export declare const SHELL_MAX_FRACTION = 0.4;
 export declare const CHAT_WIDTH_ABS_MAX_PX = 800;
 export declare const CENTRAL_AREA_MIN_PX = 800;
+/** Viewport below this uses sheet sidebar + single-column shell (central + sidebar mins cannot coexist). */
+export declare const SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX: number;
+/** `max-width` for media queries (`innerWidth < SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX`). */
+export declare const SIDEBAR_SHEET_LAYOUT_MAX_WIDTH_PX: number;
 export type ClampSidebarWidthOpts = {
     chatPanelOpen: boolean;
     chatWidthPx: number;

package/dist/esm/types/src/hooks/useIsSidebarSheetLayout.d.ts

@@ -0,0 +1,2 @@
+/** True when viewport cannot fit mains min + sidebar min — use Sheet sidebar + single-column AppShell. */
+export declare function useIsSidebarSheetLayout(): boolean;

package/dist/esm/types/src/index.d.ts

@@ -1,4 +1,6 @@
 export { useIsMobile } from './hooks/useIsMobile';
+export { useIsSidebarSheetLayout } from './hooks/useIsSidebarSheetLayout';
+export { CENTRAL_AREA_MIN_PX, SIDEBAR_SHEET_LAYOUT_MAX_WIDTH_PX, SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX, SIDEBAR_WIDTH_MIN_PX, } from './hooks/panelWidth';
 export * from './contexts/theme-context';
 export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme';
 export * from './sybilion-auth';
@@ -25,6 +27,7 @@ export * from './components/ui/DropZone/DropZone';
 export * from './components/ui/FlickeringGrid';
 export * from './components/ui/Foldable';
 export * from './components/ui/Gap/Gap';
+export * from './components/ui/GridLayout/GridLayout';
 export * from './components/ui/Image';
 export * from './components/ui/ImageWithFallback';
 export * from './components/ui/Input';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.5",
+  "version": "1.3.8",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/GridLayout/GridLayout.styl

@@ -0,0 +1,9 @@
+@import '../../../lib/theme.styl'
+
+.root
+  display grid
+  width 100%
+  min-width 0
+
+  > *
+    min-width 300px

package/src/components/ui/GridLayout/GridLayout.styl.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/GridLayout/GridLayout.tsx

@@ -0,0 +1,38 @@
+import cn from 'classnames';
+import type { CSSProperties, ElementType, ReactNode } from 'react';
+
+import S from './GridLayout.styl';
+
+export interface GridLayoutProps {
+  children: ReactNode;
+  colWidth?: number;
+  gap?: string;
+  className?: string;
+  as?: ElementType;
+}
+
+export function GridLayout({
+  children,
+  colWidth = 300,
+  gap = 'var(--p-2)',
+  className,
+  as: asProp,
+}: GridLayoutProps) {
+  const As = asProp ?? 'div';
+
+  return (
+    <As
+      className={cn(S.root, className)}
+      style={
+        {
+          maxWidth: '100%',
+          gap: gap,
+          display: 'grid',
+          gridTemplateColumns: `repeat(auto-fit, minmax(${colWidth}px, 1fr))`,
+        } as CSSProperties
+      }
+    >
+      {children}
+    </As>
+  );
+}

package/src/components/ui/Page/AppShell/AppShell.styl

@@ -1,5 +1,7 @@
 @import 'lib/theme.styl'
 
+SIDEBAR_SHEET_SPLIT = 1100px
+
 .root
   display grid
   flex 1
@@ -9,12 +11,12 @@
   grid-template-columns 1fr
   grid-template-areas "main"
 
-  @media (min-width MOBILE)
+  @media (min-width SIDEBAR_SHEET_SPLIT)
     grid-template-columns var(--sidebar-width) 1fr
     grid-template-areas "sidebar main"
 
   :global([data-slot="sidebar-wrapper"][data-state="collapsed"]) &
-    @media (min-width MOBILE)
+    @media (min-width SIDEBAR_SHEET_SPLIT)
       grid-template-columns 0 1fr
 
 .mainColumn

package/src/components/ui/Sidebar/Sidebar.tsx

@@ -37,7 +37,7 @@ import {
 } from '#uilib/hooks/panelWidth';
 import useElemDrag, { Delta } from '#uilib/hooks/useDragElem';
 import useEvent from '#uilib/hooks/useEvent';
-import { useIsMobile } from '#uilib/hooks/useIsMobile';
+import { useIsSidebarSheetLayout } from '#uilib/hooks/useIsSidebarSheetLayout';
 import { useShellWidthObserver } from '#uilib/hooks/useShellWidthObserver';
 import { getCookie, setCookie } from '#uilib/lib/cookie';
 import { getCookiePreferences } from '#uilib/lib/cookie-consent/cookie-consent';
@@ -153,8 +153,10 @@ function SidebarProvider({
     persistSidebarWidthWithoutConsent ||
     Boolean(getCookiePreferences(userId)?.functional);
 
-  const isMobile = useIsMobile();
-  const [isOpen, setIsOpen] = useState(isMobile ? false : defaultOpen);
+  const isSidebarSheetLayout = useIsSidebarSheetLayout();
+  const [isOpen, setIsOpen] = useState(
+    isSidebarSheetLayout ? false : defaultOpen,
+  );
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const shellWidthRef = useRef(0);
   const prevShellWidthRef = useRef(0);
@@ -297,9 +299,15 @@ function SidebarProvider({
   ]);
 
   useLayoutEffect(() => {
-    if (!shellEl || isMobile) return;
+    if (!shellEl || isSidebarSheetLayout) return;
     fitPanelWidthsToShell();
-  }, [shellEl, chatPanelOpen, isMobile, isOpen, fitPanelWidthsToShell]);
+  }, [
+    shellEl,
+    chatPanelOpen,
+    isSidebarSheetLayout,
+    isOpen,
+    fitPanelWidthsToShell,
+  ]);
 
   useShellWidthObserver(shellEl, handleShellResize);
 
@@ -307,7 +315,7 @@ function SidebarProvider({
     (value: boolean, options?: SetSidebarOpenOptions) => {
       const useViewTransition =
         options?.viewTransition !== false &&
-        !isMobile &&
+        !isSidebarSheetLayout &&
         'startViewTransition' in document &&
         document.startViewTransition;
 
@@ -323,7 +331,7 @@ function SidebarProvider({
         setCookie('isSidebarOpen', value.toString(), 60 * 60 * 24 * 7);
       }
     },
-    [isMobile, userId],
+    [isSidebarSheetLayout, userId],
   );
 
   const toggleSidebar = useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);
@@ -333,7 +341,7 @@ function SidebarProvider({
     if (!shell) return;
     if (chatPanelOpen) {
       shell.setAttribute('data-chat-open', '');
-      if (isMobile) {
+      if (isSidebarSheetLayout) {
         shell.style.setProperty('--chat-panel-width', '100%');
         shell.style.setProperty('--chat-panel-height', '100dvh');
       } else {
@@ -345,7 +353,7 @@ function SidebarProvider({
       shell.style.setProperty('--chat-panel-width', '0px');
       shell.style.removeProperty('--chat-panel-height');
     }
-  }, [chatPanelOpen, isMobile, chatWidthPx]);
+  }, [chatPanelOpen, isSidebarSheetLayout, chatWidthPx]);
 
   useEffect(() => {
     return () => {
@@ -447,14 +455,13 @@ function Sidebar({
   fullHeightResizer = false,
   ...props
 }: SidebarProps) {
-  const isMobile = useIsMobile();
+  const isSidebarSheetLayout = useIsSidebarSheetLayout();
   const { isOpen, setOpen } = useSidebar();
 
-  // Only force-close on mobile. Do not call setOpen(true) on desktop — that ran on every
-  // load and overwrote the isSidebarOpen cookie (collapsed → opened + cookie "true").
+  /** Narrow shell: sidebar is a sheet; collapse when crossing into this mode (preserve cookie semantics elsewhere). */
   useEffect(() => {
-    if (isMobile) setOpen(false);
-  }, [isMobile, setOpen]);
+    if (isSidebarSheetLayout) setOpen(false);
+  }, [isSidebarSheetLayout, setOpen]);
 
   if (collapsible === 'none') {
     return (
@@ -468,7 +475,7 @@ function Sidebar({
     );
   }
 
-  if (isMobile) {
+  if (isSidebarSheetLayout) {
     return (
       <Sheet open={isOpen} onOpenChange={setOpen} {...props}>
         <SheetContent
@@ -640,7 +647,7 @@ function SidebarResizeHandle({
 }: ComponentProps<'div'> & { side?: 'left' | 'right' }) {
   const { isOpen, sidebarWidthPx, setSidebarWidthPx, getShellWidth } =
     useSidebar();
-  const isMobile = useIsMobile();
+  const isSidebarSheetLayout = useIsSidebarSheetLayout();
 
   const edge: 'leading' | 'trailing' = side === 'left' ? 'trailing' : 'leading';
 
@@ -658,14 +665,14 @@ function SidebarResizeHandle({
     [setSidebarWidthPx],
   );
 
-  if (isMobile || !isOpen) {
+  if (isSidebarSheetLayout || !isOpen) {
     return null;
   }
 
   return (
     <PanelResizeHandle
       edge={edge}
-      isActive={isOpen && !isMobile}
+      isActive={isOpen && !isSidebarSheetLayout}
       startWidthPx={sidebarWidthPx}
       getShellWidth={getShellWidth}
       onDragWidth={onDragWidth}
@@ -877,10 +884,10 @@ function SidebarMenuSubButton({
 }) {
   const Comp = asChild ? Slot : 'a';
   const { isOpen, setOpen } = useSidebar();
-  const isMobile = useIsMobile();
+  const isSidebarSheetLayout = useIsSidebarSheetLayout();
 
   const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    if (isMobile && isOpen) setOpen(false);
+    if (isSidebarSheetLayout && isOpen) setOpen(false);
     onClick?.(event);
   };
 
@@ -910,7 +917,7 @@ function SidebarMenuSubButton({
       <TooltipContent
         side="right"
         align="center"
-        hidden={!isOpen || isMobile}
+        hidden={!isOpen || isSidebarSheetLayout}
         {...tooltip}
       />
     </Tooltip>

package/src/docs/pages/GridLayoutPage.tsx

@@ -0,0 +1,64 @@
+import type { CSSProperties } from 'react';
+
+import { GridLayout } from '#uilib/components/ui/GridLayout/GridLayout';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const tileStyle: CSSProperties = {
+  margin: 0,
+  padding: 'var(--p-4)',
+  borderRadius: 'var(--p-3)',
+  border: '1px solid var(--border)',
+  backgroundColor: 'var(--muted)',
+};
+
+function Tile({ label }: { label: string }) {
+  return <p style={tileStyle}>{label}</p>;
+}
+
+export default function GridLayoutPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'GridLayout' }]}
+        title="GridLayout"
+        subheader="Responsive CSS grid (`repeat(auto-fit, minmax(colWidth, 1fr))`), optional gap, polymorphic root via `as`."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}
+      >
+        <section>
+          <h3 style={{ marginBottom: '0.75rem' }}>Default (colWidth 300)</h3>
+          <p
+            style={{
+              marginBottom: '1rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            Tiles wrap to new rows when the viewport is narrow; each cell keeps
+            at least 300px min width before wrapping.
+          </p>
+          <GridLayout>
+            <Tile label="Item A" />
+            <Tile label="Item B" />
+            <Tile label="Item C" />
+            <Tile label="Item D" />
+          </GridLayout>
+        </section>
+        <section>
+          <h3 style={{ marginBottom: '0.75rem' }}>
+            colWidth 180, gap var(--p-4)
+          </h3>
+          <GridLayout colWidth={180} gap="var(--p-4)">
+            <Tile label="Narrow 1" />
+            <Tile label="Narrow 2" />
+            <Tile label="Narrow 3" />
+          </GridLayout>
+        </section>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/registry.ts

@@ -157,6 +157,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Layout',
     load: () => import('./pages/FoldablePage'),
   },
+  {
+    slug: 'grid-layout',
+    title: 'GridLayout',
+    section: 'Layout',
+    load: () => import('./pages/GridLayoutPage'),
+  },
   {
     slug: 'image',
     title: 'Image',

package/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { useIsMobile } from './useIsMobile';
+export { useIsSidebarSheetLayout } from './useIsSidebarSheetLayout';
 export { default as useEvent, type UseEventParams } from './useEvent';

package/src/hooks/panelWidth.ts

@@ -10,6 +10,14 @@ export const SHELL_MAX_FRACTION = 0.4;
 export const CHAT_WIDTH_ABS_MAX_PX = 800;
 export const CENTRAL_AREA_MIN_PX = 800;
 
+/** Viewport below this uses sheet sidebar + single-column shell (central + sidebar mins cannot coexist). */
+export const SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX =
+  CENTRAL_AREA_MIN_PX + SIDEBAR_WIDTH_MIN_PX;
+
+/** `max-width` for media queries (`innerWidth < SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX`). */
+export const SIDEBAR_SHEET_LAYOUT_MAX_WIDTH_PX =
+  SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX - 1;
+
 export type ClampSidebarWidthOpts = {
   chatPanelOpen: boolean;
   chatWidthPx: number;

package/src/hooks/useIsSidebarSheetLayout.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+import { SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX } from '#uilib/hooks/panelWidth';
+
+/** True when viewport cannot fit mains min + sidebar min — use Sheet sidebar + single-column AppShell. */
+export function useIsSidebarSheetLayout(): boolean {
+  const [narrow, setNarrow] = useState<boolean | undefined>(
+    typeof window !== 'undefined'
+      ? window.innerWidth < SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX
+      : undefined,
+  );
+
+  useEffect(() => {
+    const maxW = SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX - 1;
+    const mql = window.matchMedia(`(max-width: ${maxW}px)`);
+    const onChange = () => {
+      setNarrow(window.innerWidth < SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX);
+    };
+    mql.addEventListener('change', onChange);
+    setNarrow(window.innerWidth < SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!narrow;
+}

package/src/index.ts

@@ -1,4 +1,11 @@
 export { useIsMobile } from './hooks/useIsMobile';
+export { useIsSidebarSheetLayout } from './hooks/useIsSidebarSheetLayout';
+export {
+  CENTRAL_AREA_MIN_PX,
+  SIDEBAR_SHEET_LAYOUT_MAX_WIDTH_PX,
+  SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX,
+  SIDEBAR_WIDTH_MIN_PX,
+} from './hooks/panelWidth';
 export * from './contexts/theme-context';
 export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme';
 export * from './sybilion-auth';
@@ -25,6 +32,7 @@ export * from './components/ui/DropZone/DropZone';
 export * from './components/ui/FlickeringGrid';
 export * from './components/ui/Foldable';
 export * from './components/ui/Gap/Gap';
+export * from './components/ui/GridLayout/GridLayout';
 export * from './components/ui/Image';
 export * from './components/ui/ImageWithFallback';
 export * from './components/ui/Input';