@flanksource/clicky-ui 0.3.55 → 0.3.56

package/dist/layout/AppShell.nav.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.nav.cjs","names":["cn","useRouter","useNavDrag","NavTree","_Fragment","useState","Icon","ContextMenu"],"sources":["../../src/layout/AppShell.nav.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport { ContextMenu } from \"../overlay/ContextMenu\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport { NavTree } from \"./AppShell.nav.tree\";\nimport type {\n  AppShellNavGroup,\n  AppShellNavItem,\n  AppShellNavSection,\n} from \"./AppShell\";\nimport {\n  NAV_DRAG_ROW_CLASS,\n  NAV_DRAG_ZONE_CLASS,\n  useNavDrag,\n  type NavDragState,\n} from \"./AppShell.nav.drag\";\n\n// Per-group collapsed state. Owned by AppShell (see `useGroupCollapsed` there)\n// and passed down, because AppShell renders NavSections twice — the desktop\n// rail and the mobile drawer — and per-render state behind one storage key\n// would desync: the rail stays mounted while the drawer is open, so a drawer\n// toggle would write localStorage the rail never reads back.\nexport interface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nexport function NavSections({\n  sections,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, index) => (\n        <NavSection\n          key={section.label ?? `section-${index}`}\n          section={section}\n          collapsed={collapsed}\n          groupState={groupState}\n          {...(onNavigate ? { onNavigate } : {})}\n        />\n      ))}\n    </nav>\n  );\n}\n\nfunction NavSection({\n  section,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  section: AppShellNavSection;\n  collapsed: boolean;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  // A collapsed rail shows icons with no folder rows, so there is nothing\n  // legible to aim a drop at — the rail must be expanded to rearrange it.\n  const dragState = useNavDrag(collapsed ? undefined : section.drag);\n  const rootDrop = dragState.props({\n    drop: { key: section.drag?.rootKey ?? \"\", kind: \"section\" },\n  });\n  return (\n    <div\n      className={cn(\"flex flex-col\", rootDrop && NAV_DRAG_ZONE_CLASS)}\n      {...rootDrop}\n    >\n      {section.label &&\n        (collapsed ? (\n          <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n        ) : (\n          <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n            {section.label}\n          </div>\n        ))}\n      {section.variant === \"tree\" && !collapsed ? <NavTree section={section} groupState={groupState} dragState={dragState}\n        renderItem={(item, options) => <NavItemRow item={item} collapsed={false} renderLink={renderLink}\n          {...(options.drag ? { dragState } : {})} {...(onNavigate ? { onNavigate } : {})} />} /> : <>\n      {section.variant !== \"tree\" &&\n        section.items?.map((item) => (\n          <NavItemRow\n            key={item.key}\n            item={item}\n            collapsed={collapsed}\n            renderLink={renderLink}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        ))}\n      {section.groups?.map((group) =>\n        // A collapsed rail has no room for group headings, so the whole\n        // subtree flattens into the icon strip rather than hiding behind\n        // toggles the user cannot see.\n        collapsed ? (\n          flattenGroup(group).map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed\n              renderLink={renderLink}\n              dragState={dragState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))\n        ) : (\n          <NavGroupRows\n            key={group.key}\n            group={group}\n            renderLink={renderLink}\n            groupState={groupState}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        ),\n      )}\n      {section.variant === \"tree\" &&\n        section.items?.map((item) => (\n          <NavItemRow\n            key={item.key}\n            item={item}\n            collapsed={collapsed}\n            renderLink={renderLink}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        ))}\n      </>}\n    </div>\n  );\n}\n\n// flattenGroup collects every destination in a group's subtree — its own row\n// (when it has one), its items, and everything under its nested groups.\nfunction flattenGroup(group: AppShellNavGroup): AppShellNavItem[] {\n  return [\n    ...(group.item ? [group.item] : []),\n    ...group.items,\n    ...(group.groups ?? []).flatMap(flattenGroup),\n  ];\n}\n\nfunction NavGroupRows({\n  group,\n  renderLink,\n  groupState,\n  dragState,\n  onNavigate,\n}: {\n  group: AppShellNavGroup;\n  renderLink: RenderLink;\n  groupState: GroupState;\n  dragState: NavDragState;\n  onNavigate?: () => void;\n}) {\n  const [contextTarget, setContextTarget] = useState<HTMLElement | null>(null);\n  const hasChildren = group.items.length > 0 || (group.groups?.length ?? 0) > 0;\n  const folder = { key: group.key, kind: \"group\" } as const;\n  const folderDrag = dragState.props({ drag: folder, drop: folder });\n  const leafFolderDrag = group.item\n    ? dragState.props({\n        drag: { key: group.item.key, kind: \"item\" },\n        drop: folder,\n      })\n    : undefined;\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed =\n    !group.forceExpanded && groupState.isCollapsed(group.key, fallback);\n  const toggle = () => groupState.toggle(group.key, fallback);\n  const chevron = (\n    <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n      {collapsed ? \"▸\" : \"▾\"}\n    </span>\n  );\n  const groupIcon = group.icon && (\n    <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n      <Icon\n        {...(typeof group.icon === \"string\"\n          ? { name: group.icon }\n          : { icon: group.icon })}\n      />\n    </span>\n  );\n  if (!hasChildren && !group.item) {\n    return (\n      <>\n        <div\n          ref={setContextTarget}\n          className={cn(\n            \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 text-[13px] text-sidebar-foreground\",\n            folderDrag && NAV_DRAG_ROW_CLASS,\n          )}\n          {...folderDrag}\n        >\n          {groupIcon}\n          <span className=\"flex-1 truncate text-left\">{group.label}</span>\n          {group.badge}\n        </div>\n        {group.contextMenu && (\n          <ContextMenu\n            contextTarget={contextTarget}\n            menuLabel={group.contextMenuLabel ?? `${group.label} actions`}\n            menuItems={group.contextMenu}\n          />\n        )}\n      </>\n    );\n  }\n  if (!hasChildren && group.item) {\n    return (\n      <div className=\"flex items-center gap-1\">\n        <div className=\"min-w-0 flex-1\">\n          <NavItemRow\n            item={group.item}\n            collapsed={false}\n            renderLink={renderLink}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        </div>\n        {group.badge}\n      </div>\n    );\n  }\n  return (\n    <div className=\"flex flex-col\">\n      {group.item ? (\n        // Folder AND leaf: the link and the disclosure are siblings. Nesting a\n        // button inside the anchor would be invalid DOM and would make the\n        // click target ambiguous.\n        <div\n          ref={setContextTarget}\n          className={cn(\n            \"group/nav flex items-center gap-1\",\n            leafFolderDrag && NAV_DRAG_ROW_CLASS,\n          )}\n          {...leafFolderDrag}\n        >\n          <div className=\"min-w-0 flex-1\">\n            {/* The row's drag lives on this container, not the link: the same\n                row is dragged as the leaf and dropped on as the folder. */}\n            <NavItemRow\n              item={group.item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          </div>\n          {group.badge}\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${group.label}`}\n            className=\"shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            {chevron}\n          </button>\n          {group.contextMenu && (\n            <ContextMenu\n              contextTarget={contextTarget}\n              menuLabel={\n                group.contextMenuLabel ?? `${group.label} folder actions`\n              }\n              menuItems={group.contextMenu}\n            />\n          )}\n        </div>\n      ) : (\n        <>\n          <button\n            ref={setContextTarget}\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            className={cn(\n              \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n              \"text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55\",\n              folderDrag && NAV_DRAG_ROW_CLASS,\n            )}\n            {...folderDrag}\n          >\n            {groupIcon}\n            <span className=\"flex-1 truncate text-left\">{group.label}</span>\n            {group.badge}\n            {chevron}\n          </button>\n          {group.contextMenu && (\n            <ContextMenu\n              contextTarget={contextTarget}\n              menuLabel={group.contextMenuLabel ?? `${group.label} actions`}\n              menuItems={group.contextMenu}\n            />\n          )}\n        </>\n      )}\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2\">\n          {group.items.map((item) => (\n              <NavItemRow\n                key={item.key}\n                item={item}\n                collapsed={false}\n                renderLink={renderLink}\n                dragState={dragState}\n                {...(onNavigate ? { onNavigate } : {})}\n              />\n            ))}\n          {group.groups?.map((child) => (\n            <NavGroupRows\n              key={child.key}\n              group={child}\n              renderLink={renderLink}\n              groupState={groupState}\n              dragState={dragState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  dragState,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  /** Omitted where an ancestor row owns this item's drag (a folder-and-leaf). */\n  dragState?: NavDragState;\n  onNavigate?: () => void;\n}) {\n  const [contextTarget, setContextTarget] = useState<HTMLElement | null>(null);\n  const target = { key: item.key, kind: \"item\" } as const;\n  const dragProps = dragState?.props({ drag: target, drop: target });\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const children: ReactNode = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    const externalLink = (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {children}\n      </a>\n    );\n    if (!item.contextMenu && !dragProps) return externalLink;\n    return (\n      <div\n        ref={setContextTarget}\n        className={cn(\"w-full\", dragProps && NAV_DRAG_ROW_CLASS)}\n        {...dragProps}\n      >\n        {externalLink}\n        {item.contextMenu && (\n          <ContextMenu\n            contextTarget={contextTarget}\n            menuLabel={item.contextMenuLabel ?? `${String(item.label)} actions`}\n            menuItems={item.contextMenu}\n          />\n        )}\n      </div>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate && !item.contextMenu && !dragProps) return link;\n  return (\n    <div\n      ref={item.contextMenu ? setContextTarget : undefined}\n      className={cn(\"w-full\", dragProps && NAV_DRAG_ROW_CLASS)}\n      {...(onNavigate ? { onClick: onNavigate } : {})}\n      {...dragProps}\n    >\n      {link}\n      {item.contextMenu && (\n        <ContextMenu\n          contextTarget={contextTarget}\n          menuLabel={item.contextMenuLabel ?? `${String(item.label)} actions`}\n          menuItems={item.contextMenu}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AppShell.nav.cjs","names":["cn","useRouter","useNavDrag","NavTree","_Fragment","useState","UiChevronRight","UiChevronDown","Icon","ContextMenu"],"sources":["../../src/layout/AppShell.nav.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { ContextMenu } from \"../overlay/ContextMenu\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport { NavTree } from \"./AppShell.nav.tree\";\nimport type {\n  AppShellNavGroup,\n  AppShellNavItem,\n  AppShellNavSection,\n} from \"./AppShell\";\nimport {\n  NAV_DRAG_ROW_CLASS,\n  NAV_DRAG_ZONE_CLASS,\n  useNavDrag,\n  type NavDragState,\n} from \"./AppShell.nav.drag\";\n\n// Per-group collapsed state. Owned by AppShell (see `useGroupCollapsed` there)\n// and passed down, because AppShell renders NavSections twice — the desktop\n// rail and the mobile drawer — and per-render state behind one storage key\n// would desync: the rail stays mounted while the drawer is open, so a drawer\n// toggle would write localStorage the rail never reads back.\nexport interface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nexport function NavSections({\n  sections,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, index) => (\n        <NavSection\n          key={section.label ?? `section-${index}`}\n          section={section}\n          collapsed={collapsed}\n          groupState={groupState}\n          {...(onNavigate ? { onNavigate } : {})}\n        />\n      ))}\n    </nav>\n  );\n}\n\nfunction NavSection({\n  section,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  section: AppShellNavSection;\n  collapsed: boolean;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  // A collapsed rail shows icons with no folder rows, so there is nothing\n  // legible to aim a drop at — the rail must be expanded to rearrange it.\n  const dragState = useNavDrag(collapsed ? undefined : section.drag);\n  const rootDrop = dragState.props({\n    drop: { key: section.drag?.rootKey ?? \"\", kind: \"section\" },\n  });\n  return (\n    <div\n      className={cn(\"flex flex-col\", rootDrop && NAV_DRAG_ZONE_CLASS)}\n      {...rootDrop}\n    >\n      {section.label &&\n        (collapsed ? (\n          <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n        ) : (\n          <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n            {section.label}\n          </div>\n        ))}\n      {section.variant === \"tree\" && !collapsed ? <NavTree section={section} groupState={groupState} dragState={dragState}\n        renderItem={(item, options) => <NavItemRow item={item} collapsed={false} renderLink={renderLink}\n          {...(options.drag ? { dragState } : {})} {...(onNavigate ? { onNavigate } : {})} />} /> : <>\n      {section.variant !== \"tree\" &&\n        section.items?.map((item) => (\n          <NavItemRow\n            key={item.key}\n            item={item}\n            collapsed={collapsed}\n            renderLink={renderLink}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        ))}\n      {section.groups?.map((group) =>\n        // A collapsed rail has no room for group headings, so the whole\n        // subtree flattens into the icon strip rather than hiding behind\n        // toggles the user cannot see.\n        collapsed ? (\n          flattenGroup(group).map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed\n              renderLink={renderLink}\n              dragState={dragState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))\n        ) : (\n          <NavGroupRows\n            key={group.key}\n            group={group}\n            renderLink={renderLink}\n            groupState={groupState}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        ),\n      )}\n      {section.variant === \"tree\" &&\n        section.items?.map((item) => (\n          <NavItemRow\n            key={item.key}\n            item={item}\n            collapsed={collapsed}\n            renderLink={renderLink}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        ))}\n      </>}\n    </div>\n  );\n}\n\n// flattenGroup collects every destination in a group's subtree — its own row\n// (when it has one), its items, and everything under its nested groups.\nfunction flattenGroup(group: AppShellNavGroup): AppShellNavItem[] {\n  return [\n    ...(group.item ? [group.item] : []),\n    ...group.items,\n    ...(group.groups ?? []).flatMap(flattenGroup),\n  ];\n}\n\nfunction NavGroupRows({\n  group,\n  renderLink,\n  groupState,\n  dragState,\n  onNavigate,\n}: {\n  group: AppShellNavGroup;\n  renderLink: RenderLink;\n  groupState: GroupState;\n  dragState: NavDragState;\n  onNavigate?: () => void;\n}) {\n  const [contextTarget, setContextTarget] = useState<HTMLElement | null>(null);\n  const hasChildren = group.items.length > 0 || (group.groups?.length ?? 0) > 0;\n  const folder = { key: group.key, kind: \"group\" } as const;\n  const folderDrag = dragState.props({ drag: folder, drop: folder });\n  const leafFolderDrag = group.item\n    ? dragState.props({\n        drag: { key: group.item.key, kind: \"item\" },\n        drop: folder,\n      })\n    : undefined;\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed =\n    !group.forceExpanded && groupState.isCollapsed(group.key, fallback);\n  const toggle = () => groupState.toggle(group.key, fallback);\n  const Chevron = collapsed ? UiChevronRight : UiChevronDown;\n  const chevron = (\n    <Chevron aria-hidden className=\"size-3.5 shrink-0 opacity-60\" />\n  );\n  const groupIcon = group.icon && (\n    <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n      <Icon\n        {...(typeof group.icon === \"string\"\n          ? { name: group.icon }\n          : { icon: group.icon })}\n      />\n    </span>\n  );\n  if (!hasChildren && !group.item) {\n    return (\n      <>\n        <div\n          ref={setContextTarget}\n          className={cn(\n            \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 text-[13px] text-sidebar-foreground\",\n            folderDrag && NAV_DRAG_ROW_CLASS,\n          )}\n          {...folderDrag}\n        >\n          {groupIcon}\n          <span className=\"flex-1 truncate text-left\">{group.label}</span>\n          {group.badge}\n        </div>\n        {group.contextMenu && (\n          <ContextMenu\n            contextTarget={contextTarget}\n            menuLabel={group.contextMenuLabel ?? `${group.label} actions`}\n            menuItems={group.contextMenu}\n          />\n        )}\n      </>\n    );\n  }\n  if (!hasChildren && group.item) {\n    return (\n      <div className=\"flex items-center gap-1\">\n        <div className=\"min-w-0 flex-1\">\n          <NavItemRow\n            item={group.item}\n            collapsed={false}\n            renderLink={renderLink}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        </div>\n        {group.badge}\n      </div>\n    );\n  }\n  return (\n    <div className=\"flex flex-col\">\n      {group.item ? (\n        // Folder AND leaf: the link and the disclosure are siblings. Nesting a\n        // button inside the anchor would be invalid DOM and would make the\n        // click target ambiguous.\n        <div\n          ref={setContextTarget}\n          className={cn(\n            \"group/nav flex items-center gap-1 rounded-md\",\n            !collapsed && \"bg-sidebar-accent/50\",\n            leafFolderDrag && NAV_DRAG_ROW_CLASS,\n          )}\n          {...leafFolderDrag}\n        >\n          <div className=\"min-w-0 flex-1\">\n            {/* The row's drag lives on this container, not the link: the same\n                row is dragged as the leaf and dropped on as the folder. */}\n            <NavItemRow\n              item={group.item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          </div>\n          {group.badge}\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${group.label}`}\n            className=\"shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            {chevron}\n          </button>\n          {group.contextMenu && (\n            <ContextMenu\n              contextTarget={contextTarget}\n              menuLabel={\n                group.contextMenuLabel ?? `${group.label} folder actions`\n              }\n              menuItems={group.contextMenu}\n            />\n          )}\n        </div>\n      ) : (\n        <>\n          <button\n            ref={setContextTarget}\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            className={cn(\n              \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n              \"text-left text-[13px] text-sidebar-foreground\",\n              !collapsed && \"bg-sidebar-accent/50\",\n              folderDrag && NAV_DRAG_ROW_CLASS,\n            )}\n            {...folderDrag}\n          >\n            {groupIcon}\n            <span className=\"flex-1 truncate text-left\">{group.label}</span>\n            {group.badge}\n            {chevron}\n          </button>\n          {group.contextMenu && (\n            <ContextMenu\n              contextTarget={contextTarget}\n              menuLabel={group.contextMenuLabel ?? `${group.label} actions`}\n              menuItems={group.contextMenu}\n            />\n          )}\n        </>\n      )}\n      {!collapsed && (\n        <div className=\"ml-4 mt-0.5 flex flex-col gap-0.5\">\n          {group.items.map((item) => (\n              <NavItemRow\n                key={item.key}\n                item={item}\n                collapsed={false}\n                renderLink={renderLink}\n                dragState={dragState}\n                {...(onNavigate ? { onNavigate } : {})}\n              />\n            ))}\n          {group.groups?.map((child) => (\n            <NavGroupRows\n              key={child.key}\n              group={child}\n              renderLink={renderLink}\n              groupState={groupState}\n              dragState={dragState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  dragState,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  /** Omitted where an ancestor row owns this item's drag (a folder-and-leaf). */\n  dragState?: NavDragState;\n  onNavigate?: () => void;\n}) {\n  const [contextTarget, setContextTarget] = useState<HTMLElement | null>(null);\n  const target = { key: item.key, kind: \"item\" } as const;\n  const dragProps = dragState?.props({ drag: target, drop: target });\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const children: ReactNode = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    const externalLink = (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {children}\n      </a>\n    );\n    if (!item.contextMenu && !dragProps) return externalLink;\n    return (\n      <div\n        ref={setContextTarget}\n        className={cn(\"w-full\", dragProps && NAV_DRAG_ROW_CLASS)}\n        {...dragProps}\n      >\n        {externalLink}\n        {item.contextMenu && (\n          <ContextMenu\n            contextTarget={contextTarget}\n            menuLabel={item.contextMenuLabel ?? `${String(item.label)} actions`}\n            menuItems={item.contextMenu}\n          />\n        )}\n      </div>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate && !item.contextMenu && !dragProps) return link;\n  return (\n    <div\n      ref={item.contextMenu ? setContextTarget : undefined}\n      className={cn(\"w-full\", dragProps && NAV_DRAG_ROW_CLASS)}\n      {...(onNavigate ? { onClick: onNavigate } : {})}\n      {...dragProps}\n    >\n      {link}\n      {item.contextMenu && (\n        <ContextMenu\n          contextTarget={contextTarget}\n          menuLabel={item.contextMenuLabel ?? `${String(item.label)} actions`}\n          menuItems={item.contextMenu}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/layout/AppShell.nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.nav.d.ts","sourceRoot":"","sources":["../../src/layout/AppShell.nav.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAGV,kBAAkB,EACnB,MAAM,YAAY,CAAC;AAapB,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAC;IACzD,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,+BAmBA"}
+{"version":3,"file":"AppShell.nav.d.ts","sourceRoot":"","sources":["../../src/layout/AppShell.nav.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAGV,kBAAkB,EACnB,MAAM,YAAY,CAAC;AAapB,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAC;IACzD,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,+BAmBA"}

package/dist/layout/AppShell.nav.js

@@ -1,4 +1,6 @@
 import { cn } from "../lib/utils.js";
+import { UiChevronDown } from "../icons/components/UiChevronDown.js";
+import { UiChevronRight } from "../icons/components/UiChevronRight.js";
 import { Icon } from "../data/Icon.js";
 import { useRouter } from "../rpc/router.js";
 import { ContextMenu } from "../overlay/ContextMenu.js";
@@ -101,10 +103,9 @@ function NavGroupRows({ group, renderLink, groupState, dragState, onNavigate })
 	const fallback = group.defaultCollapsed ?? false;
 	const collapsed = !group.forceExpanded && groupState.isCollapsed(group.key, fallback);
 	const toggle = () => groupState.toggle(group.key, fallback);
-	const chevron = /* @__PURE__ */ jsx("span", {
+	const chevron = /* @__PURE__ */ jsx(collapsed ? UiChevronRight : UiChevronDown, {
 		"aria-hidden": true,
-		className: "text-[0.65rem] opacity-60",
-		children: collapsed ? "▸" : "▾"
+		className: "size-3.5 shrink-0 opacity-60"
 	});
 	const groupIcon = group.icon && /* @__PURE__ */ jsx("span", {
 		className: "flex h-4 w-4 shrink-0 items-center justify-center",
@@ -144,7 +145,7 @@ function NavGroupRows({ group, renderLink, groupState, dragState, onNavigate })
 		className: "flex flex-col",
 		children: [group.item ? /* @__PURE__ */ jsxs("div", {
 			ref: setContextTarget,
-			className: cn("group/nav flex items-center gap-1", leafFolderDrag && "data-[nav-drag=source]:opacity-40 data-[nav-drop=over]:bg-sidebar-accent data-[nav-drop=over]:ring-1 data-[nav-drop=over]:ring-inset data-[nav-drop=over]:ring-sidebar-primary"),
+			className: cn("group/nav flex items-center gap-1 rounded-md", !collapsed && "bg-sidebar-accent/50", leafFolderDrag && "data-[nav-drag=source]:opacity-40 data-[nav-drop=over]:bg-sidebar-accent data-[nav-drop=over]:ring-1 data-[nav-drop=over]:ring-inset data-[nav-drop=over]:ring-sidebar-primary"),
 			...leafFolderDrag,
 			children: [
 				/* @__PURE__ */ jsx("div", {
@@ -176,7 +177,7 @@ function NavGroupRows({ group, renderLink, groupState, dragState, onNavigate })
 			type: "button",
 			onClick: toggle,
 			"aria-expanded": !collapsed,
-			className: cn("flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", "text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55", folderDrag && "data-[nav-drag=source]:opacity-40 data-[nav-drop=over]:bg-sidebar-accent data-[nav-drop=over]:ring-1 data-[nav-drop=over]:ring-inset data-[nav-drop=over]:ring-sidebar-primary"),
+			className: cn("flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", "text-left text-[13px] text-sidebar-foreground", !collapsed && "bg-sidebar-accent/50", folderDrag && "data-[nav-drag=source]:opacity-40 data-[nav-drop=over]:bg-sidebar-accent data-[nav-drop=over]:ring-1 data-[nav-drop=over]:ring-inset data-[nav-drop=over]:ring-sidebar-primary"),
 			...folderDrag,
 			children: [
 				groupIcon,
@@ -192,7 +193,7 @@ function NavGroupRows({ group, renderLink, groupState, dragState, onNavigate })
 			menuLabel: group.contextMenuLabel ?? `${group.label} actions`,
 			menuItems: group.contextMenu
 		})] }), !collapsed && /* @__PURE__ */ jsxs("div", {
-			className: "ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2",
+			className: "ml-4 mt-0.5 flex flex-col gap-0.5",
 			children: [group.items.map((item) => /* @__PURE__ */ jsx(NavItemRow, {
 				item,
 				collapsed: false,

package/dist/layout/AppShell.nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.nav.js","names":["_Fragment"],"sources":["../../src/layout/AppShell.nav.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport { ContextMenu } from \"../overlay/ContextMenu\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport { NavTree } from \"./AppShell.nav.tree\";\nimport type {\n  AppShellNavGroup,\n  AppShellNavItem,\n  AppShellNavSection,\n} from \"./AppShell\";\nimport {\n  NAV_DRAG_ROW_CLASS,\n  NAV_DRAG_ZONE_CLASS,\n  useNavDrag,\n  type NavDragState,\n} from \"./AppShell.nav.drag\";\n\n// Per-group collapsed state. Owned by AppShell (see `useGroupCollapsed` there)\n// and passed down, because AppShell renders NavSections twice — the desktop\n// rail and the mobile drawer — and per-render state behind one storage key\n// would desync: the rail stays mounted while the drawer is open, so a drawer\n// toggle would write localStorage the rail never reads back.\nexport interface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nexport function NavSections({\n  sections,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, index) => (\n        <NavSection\n          key={section.label ?? `section-${index}`}\n          section={section}\n          collapsed={collapsed}\n          groupState={groupState}\n          {...(onNavigate ? { onNavigate } : {})}\n        />\n      ))}\n    </nav>\n  );\n}\n\nfunction NavSection({\n  section,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  section: AppShellNavSection;\n  collapsed: boolean;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  // A collapsed rail shows icons with no folder rows, so there is nothing\n  // legible to aim a drop at — the rail must be expanded to rearrange it.\n  const dragState = useNavDrag(collapsed ? undefined : section.drag);\n  const rootDrop = dragState.props({\n    drop: { key: section.drag?.rootKey ?? \"\", kind: \"section\" },\n  });\n  return (\n    <div\n      className={cn(\"flex flex-col\", rootDrop && NAV_DRAG_ZONE_CLASS)}\n      {...rootDrop}\n    >\n      {section.label &&\n        (collapsed ? (\n          <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n        ) : (\n          <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n            {section.label}\n          </div>\n        ))}\n      {section.variant === \"tree\" && !collapsed ? <NavTree section={section} groupState={groupState} dragState={dragState}\n        renderItem={(item, options) => <NavItemRow item={item} collapsed={false} renderLink={renderLink}\n          {...(options.drag ? { dragState } : {})} {...(onNavigate ? { onNavigate } : {})} />} /> : <>\n      {section.variant !== \"tree\" &&\n        section.items?.map((item) => (\n          <NavItemRow\n            key={item.key}\n            item={item}\n            collapsed={collapsed}\n            renderLink={renderLink}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        ))}\n      {section.groups?.map((group) =>\n        // A collapsed rail has no room for group headings, so the whole\n        // subtree flattens into the icon strip rather than hiding behind\n        // toggles the user cannot see.\n        collapsed ? (\n          flattenGroup(group).map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed\n              renderLink={renderLink}\n              dragState={dragState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))\n        ) : (\n          <NavGroupRows\n            key={group.key}\n            group={group}\n            renderLink={renderLink}\n            groupState={groupState}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        ),\n      )}\n      {section.variant === \"tree\" &&\n        section.items?.map((item) => (\n          <NavItemRow\n            key={item.key}\n            item={item}\n            collapsed={collapsed}\n            renderLink={renderLink}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        ))}\n      </>}\n    </div>\n  );\n}\n\n// flattenGroup collects every destination in a group's subtree — its own row\n// (when it has one), its items, and everything under its nested groups.\nfunction flattenGroup(group: AppShellNavGroup): AppShellNavItem[] {\n  return [\n    ...(group.item ? [group.item] : []),\n    ...group.items,\n    ...(group.groups ?? []).flatMap(flattenGroup),\n  ];\n}\n\nfunction NavGroupRows({\n  group,\n  renderLink,\n  groupState,\n  dragState,\n  onNavigate,\n}: {\n  group: AppShellNavGroup;\n  renderLink: RenderLink;\n  groupState: GroupState;\n  dragState: NavDragState;\n  onNavigate?: () => void;\n}) {\n  const [contextTarget, setContextTarget] = useState<HTMLElement | null>(null);\n  const hasChildren = group.items.length > 0 || (group.groups?.length ?? 0) > 0;\n  const folder = { key: group.key, kind: \"group\" } as const;\n  const folderDrag = dragState.props({ drag: folder, drop: folder });\n  const leafFolderDrag = group.item\n    ? dragState.props({\n        drag: { key: group.item.key, kind: \"item\" },\n        drop: folder,\n      })\n    : undefined;\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed =\n    !group.forceExpanded && groupState.isCollapsed(group.key, fallback);\n  const toggle = () => groupState.toggle(group.key, fallback);\n  const chevron = (\n    <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n      {collapsed ? \"▸\" : \"▾\"}\n    </span>\n  );\n  const groupIcon = group.icon && (\n    <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n      <Icon\n        {...(typeof group.icon === \"string\"\n          ? { name: group.icon }\n          : { icon: group.icon })}\n      />\n    </span>\n  );\n  if (!hasChildren && !group.item) {\n    return (\n      <>\n        <div\n          ref={setContextTarget}\n          className={cn(\n            \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 text-[13px] text-sidebar-foreground\",\n            folderDrag && NAV_DRAG_ROW_CLASS,\n          )}\n          {...folderDrag}\n        >\n          {groupIcon}\n          <span className=\"flex-1 truncate text-left\">{group.label}</span>\n          {group.badge}\n        </div>\n        {group.contextMenu && (\n          <ContextMenu\n            contextTarget={contextTarget}\n            menuLabel={group.contextMenuLabel ?? `${group.label} actions`}\n            menuItems={group.contextMenu}\n          />\n        )}\n      </>\n    );\n  }\n  if (!hasChildren && group.item) {\n    return (\n      <div className=\"flex items-center gap-1\">\n        <div className=\"min-w-0 flex-1\">\n          <NavItemRow\n            item={group.item}\n            collapsed={false}\n            renderLink={renderLink}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        </div>\n        {group.badge}\n      </div>\n    );\n  }\n  return (\n    <div className=\"flex flex-col\">\n      {group.item ? (\n        // Folder AND leaf: the link and the disclosure are siblings. Nesting a\n        // button inside the anchor would be invalid DOM and would make the\n        // click target ambiguous.\n        <div\n          ref={setContextTarget}\n          className={cn(\n            \"group/nav flex items-center gap-1\",\n            leafFolderDrag && NAV_DRAG_ROW_CLASS,\n          )}\n          {...leafFolderDrag}\n        >\n          <div className=\"min-w-0 flex-1\">\n            {/* The row's drag lives on this container, not the link: the same\n                row is dragged as the leaf and dropped on as the folder. */}\n            <NavItemRow\n              item={group.item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          </div>\n          {group.badge}\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${group.label}`}\n            className=\"shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            {chevron}\n          </button>\n          {group.contextMenu && (\n            <ContextMenu\n              contextTarget={contextTarget}\n              menuLabel={\n                group.contextMenuLabel ?? `${group.label} folder actions`\n              }\n              menuItems={group.contextMenu}\n            />\n          )}\n        </div>\n      ) : (\n        <>\n          <button\n            ref={setContextTarget}\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            className={cn(\n              \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n              \"text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55\",\n              folderDrag && NAV_DRAG_ROW_CLASS,\n            )}\n            {...folderDrag}\n          >\n            {groupIcon}\n            <span className=\"flex-1 truncate text-left\">{group.label}</span>\n            {group.badge}\n            {chevron}\n          </button>\n          {group.contextMenu && (\n            <ContextMenu\n              contextTarget={contextTarget}\n              menuLabel={group.contextMenuLabel ?? `${group.label} actions`}\n              menuItems={group.contextMenu}\n            />\n          )}\n        </>\n      )}\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2\">\n          {group.items.map((item) => (\n              <NavItemRow\n                key={item.key}\n                item={item}\n                collapsed={false}\n                renderLink={renderLink}\n                dragState={dragState}\n                {...(onNavigate ? { onNavigate } : {})}\n              />\n            ))}\n          {group.groups?.map((child) => (\n            <NavGroupRows\n              key={child.key}\n              group={child}\n              renderLink={renderLink}\n              groupState={groupState}\n              dragState={dragState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  dragState,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  /** Omitted where an ancestor row owns this item's drag (a folder-and-leaf). */\n  dragState?: NavDragState;\n  onNavigate?: () => void;\n}) {\n  const [contextTarget, setContextTarget] = useState<HTMLElement | null>(null);\n  const target = { key: item.key, kind: \"item\" } as const;\n  const dragProps = dragState?.props({ drag: target, drop: target });\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const children: ReactNode = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    const externalLink = (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {children}\n      </a>\n    );\n    if (!item.contextMenu && !dragProps) return externalLink;\n    return (\n      <div\n        ref={setContextTarget}\n        className={cn(\"w-full\", dragProps && NAV_DRAG_ROW_CLASS)}\n        {...dragProps}\n      >\n        {externalLink}\n        {item.contextMenu && (\n          <ContextMenu\n            contextTarget={contextTarget}\n            menuLabel={item.contextMenuLabel ?? `${String(item.label)} actions`}\n            menuItems={item.contextMenu}\n          />\n        )}\n      </div>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate && !item.contextMenu && !dragProps) return link;\n  return (\n    <div\n      ref={item.contextMenu ? setContextTarget : undefined}\n      className={cn(\"w-full\", dragProps && NAV_DRAG_ROW_CLASS)}\n      {...(onNavigate ? { onClick: onNavigate } : {})}\n      {...dragProps}\n    >\n      {link}\n      {item.contextMenu && (\n        <ContextMenu\n          contextTarget={contextTarget}\n          menuLabel={item.contextMenuLabel ?? `${String(item.label)} actions`}\n          menuItems={item.contextMenu}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AppShell.nav.js","names":["_Fragment"],"sources":["../../src/layout/AppShell.nav.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { ContextMenu } from \"../overlay/ContextMenu\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport { NavTree } from \"./AppShell.nav.tree\";\nimport type {\n  AppShellNavGroup,\n  AppShellNavItem,\n  AppShellNavSection,\n} from \"./AppShell\";\nimport {\n  NAV_DRAG_ROW_CLASS,\n  NAV_DRAG_ZONE_CLASS,\n  useNavDrag,\n  type NavDragState,\n} from \"./AppShell.nav.drag\";\n\n// Per-group collapsed state. Owned by AppShell (see `useGroupCollapsed` there)\n// and passed down, because AppShell renders NavSections twice — the desktop\n// rail and the mobile drawer — and per-render state behind one storage key\n// would desync: the rail stays mounted while the drawer is open, so a drawer\n// toggle would write localStorage the rail never reads back.\nexport interface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nexport function NavSections({\n  sections,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, index) => (\n        <NavSection\n          key={section.label ?? `section-${index}`}\n          section={section}\n          collapsed={collapsed}\n          groupState={groupState}\n          {...(onNavigate ? { onNavigate } : {})}\n        />\n      ))}\n    </nav>\n  );\n}\n\nfunction NavSection({\n  section,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  section: AppShellNavSection;\n  collapsed: boolean;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  // A collapsed rail shows icons with no folder rows, so there is nothing\n  // legible to aim a drop at — the rail must be expanded to rearrange it.\n  const dragState = useNavDrag(collapsed ? undefined : section.drag);\n  const rootDrop = dragState.props({\n    drop: { key: section.drag?.rootKey ?? \"\", kind: \"section\" },\n  });\n  return (\n    <div\n      className={cn(\"flex flex-col\", rootDrop && NAV_DRAG_ZONE_CLASS)}\n      {...rootDrop}\n    >\n      {section.label &&\n        (collapsed ? (\n          <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n        ) : (\n          <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n            {section.label}\n          </div>\n        ))}\n      {section.variant === \"tree\" && !collapsed ? <NavTree section={section} groupState={groupState} dragState={dragState}\n        renderItem={(item, options) => <NavItemRow item={item} collapsed={false} renderLink={renderLink}\n          {...(options.drag ? { dragState } : {})} {...(onNavigate ? { onNavigate } : {})} />} /> : <>\n      {section.variant !== \"tree\" &&\n        section.items?.map((item) => (\n          <NavItemRow\n            key={item.key}\n            item={item}\n            collapsed={collapsed}\n            renderLink={renderLink}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        ))}\n      {section.groups?.map((group) =>\n        // A collapsed rail has no room for group headings, so the whole\n        // subtree flattens into the icon strip rather than hiding behind\n        // toggles the user cannot see.\n        collapsed ? (\n          flattenGroup(group).map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed\n              renderLink={renderLink}\n              dragState={dragState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))\n        ) : (\n          <NavGroupRows\n            key={group.key}\n            group={group}\n            renderLink={renderLink}\n            groupState={groupState}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        ),\n      )}\n      {section.variant === \"tree\" &&\n        section.items?.map((item) => (\n          <NavItemRow\n            key={item.key}\n            item={item}\n            collapsed={collapsed}\n            renderLink={renderLink}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        ))}\n      </>}\n    </div>\n  );\n}\n\n// flattenGroup collects every destination in a group's subtree — its own row\n// (when it has one), its items, and everything under its nested groups.\nfunction flattenGroup(group: AppShellNavGroup): AppShellNavItem[] {\n  return [\n    ...(group.item ? [group.item] : []),\n    ...group.items,\n    ...(group.groups ?? []).flatMap(flattenGroup),\n  ];\n}\n\nfunction NavGroupRows({\n  group,\n  renderLink,\n  groupState,\n  dragState,\n  onNavigate,\n}: {\n  group: AppShellNavGroup;\n  renderLink: RenderLink;\n  groupState: GroupState;\n  dragState: NavDragState;\n  onNavigate?: () => void;\n}) {\n  const [contextTarget, setContextTarget] = useState<HTMLElement | null>(null);\n  const hasChildren = group.items.length > 0 || (group.groups?.length ?? 0) > 0;\n  const folder = { key: group.key, kind: \"group\" } as const;\n  const folderDrag = dragState.props({ drag: folder, drop: folder });\n  const leafFolderDrag = group.item\n    ? dragState.props({\n        drag: { key: group.item.key, kind: \"item\" },\n        drop: folder,\n      })\n    : undefined;\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed =\n    !group.forceExpanded && groupState.isCollapsed(group.key, fallback);\n  const toggle = () => groupState.toggle(group.key, fallback);\n  const Chevron = collapsed ? UiChevronRight : UiChevronDown;\n  const chevron = (\n    <Chevron aria-hidden className=\"size-3.5 shrink-0 opacity-60\" />\n  );\n  const groupIcon = group.icon && (\n    <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n      <Icon\n        {...(typeof group.icon === \"string\"\n          ? { name: group.icon }\n          : { icon: group.icon })}\n      />\n    </span>\n  );\n  if (!hasChildren && !group.item) {\n    return (\n      <>\n        <div\n          ref={setContextTarget}\n          className={cn(\n            \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 text-[13px] text-sidebar-foreground\",\n            folderDrag && NAV_DRAG_ROW_CLASS,\n          )}\n          {...folderDrag}\n        >\n          {groupIcon}\n          <span className=\"flex-1 truncate text-left\">{group.label}</span>\n          {group.badge}\n        </div>\n        {group.contextMenu && (\n          <ContextMenu\n            contextTarget={contextTarget}\n            menuLabel={group.contextMenuLabel ?? `${group.label} actions`}\n            menuItems={group.contextMenu}\n          />\n        )}\n      </>\n    );\n  }\n  if (!hasChildren && group.item) {\n    return (\n      <div className=\"flex items-center gap-1\">\n        <div className=\"min-w-0 flex-1\">\n          <NavItemRow\n            item={group.item}\n            collapsed={false}\n            renderLink={renderLink}\n            dragState={dragState}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        </div>\n        {group.badge}\n      </div>\n    );\n  }\n  return (\n    <div className=\"flex flex-col\">\n      {group.item ? (\n        // Folder AND leaf: the link and the disclosure are siblings. Nesting a\n        // button inside the anchor would be invalid DOM and would make the\n        // click target ambiguous.\n        <div\n          ref={setContextTarget}\n          className={cn(\n            \"group/nav flex items-center gap-1 rounded-md\",\n            !collapsed && \"bg-sidebar-accent/50\",\n            leafFolderDrag && NAV_DRAG_ROW_CLASS,\n          )}\n          {...leafFolderDrag}\n        >\n          <div className=\"min-w-0 flex-1\">\n            {/* The row's drag lives on this container, not the link: the same\n                row is dragged as the leaf and dropped on as the folder. */}\n            <NavItemRow\n              item={group.item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          </div>\n          {group.badge}\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${group.label}`}\n            className=\"shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            {chevron}\n          </button>\n          {group.contextMenu && (\n            <ContextMenu\n              contextTarget={contextTarget}\n              menuLabel={\n                group.contextMenuLabel ?? `${group.label} folder actions`\n              }\n              menuItems={group.contextMenu}\n            />\n          )}\n        </div>\n      ) : (\n        <>\n          <button\n            ref={setContextTarget}\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            className={cn(\n              \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n              \"text-left text-[13px] text-sidebar-foreground\",\n              !collapsed && \"bg-sidebar-accent/50\",\n              folderDrag && NAV_DRAG_ROW_CLASS,\n            )}\n            {...folderDrag}\n          >\n            {groupIcon}\n            <span className=\"flex-1 truncate text-left\">{group.label}</span>\n            {group.badge}\n            {chevron}\n          </button>\n          {group.contextMenu && (\n            <ContextMenu\n              contextTarget={contextTarget}\n              menuLabel={group.contextMenuLabel ?? `${group.label} actions`}\n              menuItems={group.contextMenu}\n            />\n          )}\n        </>\n      )}\n      {!collapsed && (\n        <div className=\"ml-4 mt-0.5 flex flex-col gap-0.5\">\n          {group.items.map((item) => (\n              <NavItemRow\n                key={item.key}\n                item={item}\n                collapsed={false}\n                renderLink={renderLink}\n                dragState={dragState}\n                {...(onNavigate ? { onNavigate } : {})}\n              />\n            ))}\n          {group.groups?.map((child) => (\n            <NavGroupRows\n              key={child.key}\n              group={child}\n              renderLink={renderLink}\n              groupState={groupState}\n              dragState={dragState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  dragState,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  /** Omitted where an ancestor row owns this item's drag (a folder-and-leaf). */\n  dragState?: NavDragState;\n  onNavigate?: () => void;\n}) {\n  const [contextTarget, setContextTarget] = useState<HTMLElement | null>(null);\n  const target = { key: item.key, kind: \"item\" } as const;\n  const dragProps = dragState?.props({ drag: target, drop: target });\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const children: ReactNode = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    const externalLink = (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {children}\n      </a>\n    );\n    if (!item.contextMenu && !dragProps) return externalLink;\n    return (\n      <div\n        ref={setContextTarget}\n        className={cn(\"w-full\", dragProps && NAV_DRAG_ROW_CLASS)}\n        {...dragProps}\n      >\n        {externalLink}\n        {item.contextMenu && (\n          <ContextMenu\n            contextTarget={contextTarget}\n            menuLabel={item.contextMenuLabel ?? `${String(item.label)} actions`}\n            menuItems={item.contextMenu}\n          />\n        )}\n      </div>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate && !item.contextMenu && !dragProps) return link;\n  return (\n    <div\n      ref={item.contextMenu ? setContextTarget : undefined}\n      className={cn(\"w-full\", dragProps && NAV_DRAG_ROW_CLASS)}\n      {...(onNavigate ? { onClick: onNavigate } : {})}\n      {...dragProps}\n    >\n      {link}\n      {item.contextMenu && (\n        <ContextMenu\n          contextTarget={contextTarget}\n          menuLabel={item.contextMenuLabel ?? `${String(item.label)} actions`}\n          menuItems={item.contextMenu}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/layout/SplitPane.cjs

@@ -2,7 +2,9 @@ const require_utils = require("../lib/utils.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/layout/SplitPane.tsx
-function SplitPane({ left, right, defaultSplit = 50, minLeft = 20, minRight = 20, leftClass, rightClass, className, stackOnMobile = false }) {
+function SplitPane({ left, right, defaultSplit = 50, minLeft = 20, minRight = 20, leftClass, rightClass, className, stackOnMobile = false, mobilePane }) {
+	const paged = stackOnMobile && mobilePane !== void 0;
+	const narrowPane = (pane) => !paged ? void 0 : mobilePane === pane ? "flex-1 @3xl/split-pane:block" : "hidden @3xl/split-pane:block";
 	const [split, setSplit] = (0, react.useState)(defaultSplit);
 	const dragging = (0, react.useRef)(false);
 	const container = (0, react.useRef)(null);
@@ -27,28 +29,36 @@ function SplitPane({ left, right, defaultSplit = 50, minLeft = 20, minRight = 20
 		document.body.style.cursor = "col-resize";
 		document.body.style.userSelect = "none";
 	}, [minLeft, minRight]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	const panes = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: container,
-		className: require_utils.cn("flex h-full flex-1 overflow-hidden", stackOnMobile && "flex-col md:flex-row", className),
+		className: require_utils.cn("flex h-full flex-1 overflow-hidden", stackOnMobile ? "w-full flex-col @3xl/split-pane:flex-row" : className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				style: stackOnMobile ? { "--split-pane-width": `${split}%` } : { width: `${split}%` },
-				className: require_utils.cn("min-h-0 overflow-y-auto bg-background", stackOnMobile && "w-full md:w-[var(--split-pane-width)]", leftClass),
+				"data-slot": stackOnMobile ? "split-pane-left" : void 0,
+				className: require_utils.cn("min-h-0 overflow-y-auto bg-background", stackOnMobile && "w-full shrink-0 @3xl/split-pane:w-[var(--split-pane-width)] @3xl/split-pane:flex-none", stackOnMobile && !paged && "max-h-[40%] border-b border-border @3xl/split-pane:max-h-none @3xl/split-pane:border-b-0", leftClass, narrowPane("left")),
 				children: left
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				role: "separator",
 				"aria-orientation": "vertical",
-				className: require_utils.cn("w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary", stackOnMobile && "hidden md:block"),
+				className: require_utils.cn("w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary", stackOnMobile && "hidden @3xl/split-pane:block"),
 				onMouseDown
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				style: stackOnMobile ? { "--split-pane-width": `${100 - split}%` } : { width: `${100 - split}%` },
-				className: require_utils.cn("min-h-0 overflow-hidden bg-background", stackOnMobile && "w-full md:w-[var(--split-pane-width)]", rightClass),
+				"data-slot": stackOnMobile ? "split-pane-right" : void 0,
+				className: require_utils.cn("min-h-0 overflow-hidden bg-background", stackOnMobile && "w-full flex-1 @3xl/split-pane:flex-none @3xl/split-pane:w-[var(--split-pane-width)]", rightClass, narrowPane("right")),
 				children: right
 			})
 		]
 	});
+	if (!stackOnMobile) return panes;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "split-pane",
+		className: require_utils.cn("@container/split-pane flex h-full min-h-0 min-w-0 flex-1", className),
+		children: panes
+	});
 }
 exports.SplitPane = SplitPane;
 

package/dist/layout/SplitPane.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.cjs","names":["useState","useRef","useCallback","cn"],"sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n  /** Content rendered in the left pane. */\n  left: ReactNode;\n  /** Content rendered in the right pane. */\n  right: ReactNode;\n  /** Initial left-pane width as a percentage. */\n  defaultSplit?: number;\n  /** Minimum left-pane width as a percentage. */\n  minLeft?: number;\n  /** Minimum right-pane width as a percentage. */\n  minRight?: number;\n  /** Classes applied to the left pane. */\n  leftClass?: string;\n  /** Classes applied to the right pane. */\n  rightClass?: string;\n  /** Classes applied to the root split container. */\n  className?: string;\n  /** Stack the panes and hide the resize handle below the `md` breakpoint. */\n  stackOnMobile?: boolean;\n};\n\nexport function SplitPane({\n  left,\n  right,\n  defaultSplit = 50,\n  minLeft = 20,\n  minRight = 20,\n  leftClass,\n  rightClass,\n  className,\n  stackOnMobile = false,\n}: SplitPaneProps) {\n  const [split, setSplit] = useState(defaultSplit);\n  const dragging = useRef(false);\n  const container = useRef<HTMLDivElement>(null);\n\n  const onMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      dragging.current = true;\n\n      const onMove = (ev: MouseEvent) => {\n        if (!dragging.current || !container.current) return;\n        const rect = container.current.getBoundingClientRect();\n        const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n        setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n      };\n\n      const onUp = () => {\n        dragging.current = false;\n        document.removeEventListener(\"mousemove\", onMove);\n        document.removeEventListener(\"mouseup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n\n      document.addEventListener(\"mousemove\", onMove);\n      document.addEventListener(\"mouseup\", onUp);\n      document.body.style.cursor = \"col-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [minLeft, minRight],\n  );\n\n  return (\n    <div\n      ref={container}\n      className={cn(\n        \"flex h-full flex-1 overflow-hidden\",\n        stackOnMobile && \"flex-col md:flex-row\",\n        className,\n      )}\n    >\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${split}%` } as CSSProperties)\n            : { width: `${split}%` }\n        }\n        className={cn(\n          \"min-h-0 overflow-y-auto bg-background\",\n          stackOnMobile && \"w-full md:w-[var(--split-pane-width)]\",\n          leftClass,\n        )}\n      >\n        {left}\n      </div>\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={cn(\n          \"w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary\",\n          stackOnMobile && \"hidden md:block\",\n        )}\n        onMouseDown={onMouseDown}\n      />\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${100 - split}%` } as CSSProperties)\n            : { width: `${100 - split}%` }\n        }\n        className={cn(\n          \"min-h-0 overflow-hidden bg-background\",\n          stackOnMobile && \"w-full md:w-[var(--split-pane-width)]\",\n          rightClass,\n        )}\n      >\n        {right}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AA8BA,SAAgB,UAAU,EACxB,MACA,OACA,eAAe,IACf,UAAU,IACV,WAAW,IACX,WACA,YACA,WACA,gBAAgB,SACC;CACjB,MAAM,CAAC,OAAO,aAAA,GAAYA,MAAAA,SAAAA,CAAS,YAAY;CAC/C,MAAM,YAAA,GAAWC,MAAAA,OAAAA,CAAO,KAAK;CAC7B,MAAM,aAAA,GAAYA,MAAAA,OAAAA,CAAuB,IAAI;CAE7C,MAAM,eAAA,GAAcC,MAAAA,YAAAA,EACjB,MAAwB;EACvB,EAAE,eAAe;EACjB,SAAS,UAAU;EAEnB,MAAM,UAAU,OAAmB;GACjC,IAAI,CAAC,SAAS,WAAW,CAAC,UAAU,SAAS;GAC7C,MAAM,OAAO,UAAU,QAAQ,sBAAsB;GACrD,MAAM,OAAQ,GAAG,UAAU,KAAK,QAAQ,KAAK,QAAS;GACtD,SAAS,KAAK,IAAI,SAAS,KAAK,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC;EAC3D;EAEA,MAAM,aAAa;GACjB,SAAS,UAAU;GACnB,SAAS,oBAAoB,aAAa,MAAM;GAChD,SAAS,oBAAoB,WAAW,IAAI;GAC5C,SAAS,KAAK,MAAM,SAAS;GAC7B,SAAS,KAAK,MAAM,aAAa;EACnC;EAEA,SAAS,iBAAiB,aAAa,MAAM;EAC7C,SAAS,iBAAiB,WAAW,IAAI;EACzC,SAAS,KAAK,MAAM,SAAS;EAC7B,SAAS,KAAK,MAAM,aAAa;CACnC,GACA,CAAC,SAAS,QAAQ,CACpB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,KAAK;EACL,WAAWC,cAAAA,GACT,sCACA,iBAAiB,wBACjB,SACF;EANF,UAAA;GAQE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,OACE,gBACK,EAAE,sBAAsB,GAAG,MAAM,GAAG,IACrC,EAAE,OAAO,GAAG,MAAM,GAAG;IAE3B,WAAWA,cAAAA,GACT,yCACA,iBAAiB,yCACjB,SACF;IAEC,UAAA;GACE,CAAA;GACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,MAAK;IACL,oBAAiB;IACjB,WAAWA,cAAAA,GACT,+EACA,iBAAiB,iBACnB;IACa;GACd,CAAA;GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,OACE,gBACK,EAAE,sBAAsB,GAAG,MAAM,MAAM,GAAG,IAC3C,EAAE,OAAO,GAAG,MAAM,MAAM,GAAG;IAEjC,WAAWA,cAAAA,GACT,yCACA,iBAAiB,yCACjB,UACF;IAEC,UAAA;GACE,CAAA;EACF;;AAET"}
+{"version":3,"file":"SplitPane.cjs","names":["useState","useRef","useCallback","cn"],"sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n  /** Content rendered in the left pane. */\n  left: ReactNode;\n  /** Content rendered in the right pane. */\n  right: ReactNode;\n  /** Initial left-pane width as a percentage. */\n  defaultSplit?: number;\n  /** Minimum left-pane width as a percentage. */\n  minLeft?: number;\n  /** Minimum right-pane width as a percentage. */\n  minRight?: number;\n  /** Classes applied to the left pane. */\n  leftClass?: string;\n  /** Classes applied to the right pane. */\n  rightClass?: string;\n  /** Classes applied to the root split container. */\n  className?: string;\n  /**\n   * Stack the panes and hide the resize handle while the split's own width is\n   * below 48rem (the `md` breakpoint) — a container query, so a split nested in\n   * a narrow column stacks even on a wide screen.\n   */\n  stackOnMobile?: boolean;\n  /**\n   * With `stackOnMobile`, pages the narrow split instead of stacking it: only\n   * this pane renders, at full height, and the other appears again once the\n   * split is 48rem wide. A list/detail host sets it from its selection.\n   */\n  mobilePane?: \"left\" | \"right\";\n};\n\nexport function SplitPane({\n  left,\n  right,\n  defaultSplit = 50,\n  minLeft = 20,\n  minRight = 20,\n  leftClass,\n  rightClass,\n  className,\n  stackOnMobile = false,\n  mobilePane,\n}: SplitPaneProps) {\n  const paged = stackOnMobile && mobilePane !== undefined;\n  const narrowPane = (pane: \"left\" | \"right\") =>\n    !paged\n      ? undefined\n      : mobilePane === pane\n        ? \"flex-1 @3xl/split-pane:block\"\n        : \"hidden @3xl/split-pane:block\";\n  const [split, setSplit] = useState(defaultSplit);\n  const dragging = useRef(false);\n  const container = useRef<HTMLDivElement>(null);\n\n  const onMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      dragging.current = true;\n\n      const onMove = (ev: MouseEvent) => {\n        if (!dragging.current || !container.current) return;\n        const rect = container.current.getBoundingClientRect();\n        const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n        setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n      };\n\n      const onUp = () => {\n        dragging.current = false;\n        document.removeEventListener(\"mousemove\", onMove);\n        document.removeEventListener(\"mouseup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n\n      document.addEventListener(\"mousemove\", onMove);\n      document.addEventListener(\"mouseup\", onUp);\n      document.body.style.cursor = \"col-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [minLeft, minRight],\n  );\n\n  const panes = (\n    <div\n      ref={container}\n      className={cn(\n        \"flex h-full flex-1 overflow-hidden\",\n        stackOnMobile ? \"w-full flex-col @3xl/split-pane:flex-row\" : className,\n      )}\n    >\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${split}%` } as CSSProperties)\n            : { width: `${split}%` }\n        }\n        data-slot={stackOnMobile ? \"split-pane-left\" : undefined}\n        className={cn(\n          \"min-h-0 overflow-y-auto bg-background\",\n          stackOnMobile &&\n            \"w-full shrink-0 @3xl/split-pane:w-[var(--split-pane-width)] @3xl/split-pane:flex-none\",\n          stackOnMobile &&\n            !paged &&\n            \"max-h-[40%] border-b border-border @3xl/split-pane:max-h-none @3xl/split-pane:border-b-0\",\n          leftClass,\n          narrowPane(\"left\"),\n        )}\n      >\n        {left}\n      </div>\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={cn(\n          \"w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary\",\n          stackOnMobile && \"hidden @3xl/split-pane:block\",\n        )}\n        onMouseDown={onMouseDown}\n      />\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${100 - split}%` } as CSSProperties)\n            : { width: `${100 - split}%` }\n        }\n        data-slot={stackOnMobile ? \"split-pane-right\" : undefined}\n        className={cn(\n          \"min-h-0 overflow-hidden bg-background\",\n          stackOnMobile &&\n            \"w-full flex-1 @3xl/split-pane:flex-none @3xl/split-pane:w-[var(--split-pane-width)]\",\n          rightClass,\n          narrowPane(\"right\"),\n        )}\n      >\n        {right}\n      </div>\n    </div>\n  );\n\n  if (!stackOnMobile) return panes;\n  // A container cannot query its own width, so the stacking split needs an\n  // outer box to measure; caller classes size that box.\n  return (\n    <div\n      data-slot=\"split-pane\"\n      className={cn(\"@container/split-pane flex h-full min-h-0 min-w-0 flex-1\", className)}\n    >\n      {panes}\n    </div>\n  );\n}\n\n"],"mappings":";;;;AAwCA,SAAgB,UAAU,EACxB,MACA,OACA,eAAe,IACf,UAAU,IACV,WAAW,IACX,WACA,YACA,WACA,gBAAgB,OAChB,cACiB;CACjB,MAAM,QAAQ,iBAAiB,eAAe,KAAA;CAC9C,MAAM,cAAc,SAClB,CAAC,QACG,KAAA,IACA,eAAe,OACb,iCACA;CACR,MAAM,CAAC,OAAO,aAAA,GAAYA,MAAAA,SAAAA,CAAS,YAAY;CAC/C,MAAM,YAAA,GAAWC,MAAAA,OAAAA,CAAO,KAAK;CAC7B,MAAM,aAAA,GAAYA,MAAAA,OAAAA,CAAuB,IAAI;CAE7C,MAAM,eAAA,GAAcC,MAAAA,YAAAA,EACjB,MAAwB;EACvB,EAAE,eAAe;EACjB,SAAS,UAAU;EAEnB,MAAM,UAAU,OAAmB;GACjC,IAAI,CAAC,SAAS,WAAW,CAAC,UAAU,SAAS;GAC7C,MAAM,OAAO,UAAU,QAAQ,sBAAsB;GACrD,MAAM,OAAQ,GAAG,UAAU,KAAK,QAAQ,KAAK,QAAS;GACtD,SAAS,KAAK,IAAI,SAAS,KAAK,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC;EAC3D;EAEA,MAAM,aAAa;GACjB,SAAS,UAAU;GACnB,SAAS,oBAAoB,aAAa,MAAM;GAChD,SAAS,oBAAoB,WAAW,IAAI;GAC5C,SAAS,KAAK,MAAM,SAAS;GAC7B,SAAS,KAAK,MAAM,aAAa;EACnC;EAEA,SAAS,iBAAiB,aAAa,MAAM;EAC7C,SAAS,iBAAiB,WAAW,IAAI;EACzC,SAAS,KAAK,MAAM,SAAS;EAC7B,SAAS,KAAK,MAAM,aAAa;CACnC,GACA,CAAC,SAAS,QAAQ,CACpB;CAEA,MAAM,QACJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,KAAK;EACL,WAAWC,cAAAA,GACT,sCACA,gBAAgB,6CAA6C,SAC/D;EALF,UAAA;GAOE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,OACE,gBACK,EAAE,sBAAsB,GAAG,MAAM,GAAG,IACrC,EAAE,OAAO,GAAG,MAAM,GAAG;IAE3B,aAAW,gBAAgB,oBAAoB,KAAA;IAC/C,WAAWA,cAAAA,GACT,yCACA,iBACE,yFACF,iBACE,CAAC,SACD,4FACF,WACA,WAAW,MAAM,CACnB;IAEC,UAAA;GACE,CAAA;GACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,MAAK;IACL,oBAAiB;IACjB,WAAWA,cAAAA,GACT,+EACA,iBAAiB,8BACnB;IACa;GACd,CAAA;GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,OACE,gBACK,EAAE,sBAAsB,GAAG,MAAM,MAAM,GAAG,IAC3C,EAAE,OAAO,GAAG,MAAM,MAAM,GAAG;IAEjC,aAAW,gBAAgB,qBAAqB,KAAA;IAChD,WAAWA,cAAAA,GACT,yCACA,iBACE,uFACF,YACA,WAAW,OAAO,CACpB;IAEC,UAAA;GACE,CAAA;EACF;;CAGP,IAAI,CAAC,eAAe,OAAO;CAG3B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,WAAWA,cAAAA,GAAG,4DAA4D,SAAS;EAElF,UAAA;CACE,CAAA;AAET"}

package/dist/layout/SplitPane.d.ts

@@ -16,8 +16,18 @@ export type SplitPaneProps = {
     rightClass?: string;
     /** Classes applied to the root split container. */
     className?: string;
-    /** Stack the panes and hide the resize handle below the `md` breakpoint. */
+    /**
+     * Stack the panes and hide the resize handle while the split's own width is
+     * below 48rem (the `md` breakpoint) — a container query, so a split nested in
+     * a narrow column stacks even on a wide screen.
+     */
     stackOnMobile?: boolean;
+    /**
+     * With `stackOnMobile`, pages the narrow split instead of stacking it: only
+     * this pane renders, at full height, and the other appears again once the
+     * split is 48rem wide. A list/detail host sets it from its selection.
+     */
+    mobilePane?: "left" | "right";
 };
-export declare function SplitPane({ left, right, defaultSplit, minLeft, minRight, leftClass, rightClass, className, stackOnMobile, }: SplitPaneProps): import("react").JSX.Element;
+export declare function SplitPane({ left, right, defaultSplit, minLeft, minRight, leftClass, rightClass, className, stackOnMobile, mobilePane, }: SplitPaneProps): import("react").JSX.Element;
 //# sourceMappingURL=SplitPane.d.ts.map

package/dist/layout/SplitPane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../src/layout/SplitPane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC;IAChB,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,YAAiB,EACjB,OAAY,EACZ,QAAa,EACb,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAqB,GACtB,EAAE,cAAc,+BAiFhB"}
+{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../src/layout/SplitPane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC;IAChB,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC/B,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,YAAiB,EACjB,OAAY,EACZ,QAAa,EACb,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAqB,EACrB,UAAU,GACX,EAAE,cAAc,+BA4GhB"}

package/dist/layout/SplitPane.js

@@ -2,7 +2,9 @@ import { cn } from "../lib/utils.js";
 import { useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/layout/SplitPane.tsx
-function SplitPane({ left, right, defaultSplit = 50, minLeft = 20, minRight = 20, leftClass, rightClass, className, stackOnMobile = false }) {
+function SplitPane({ left, right, defaultSplit = 50, minLeft = 20, minRight = 20, leftClass, rightClass, className, stackOnMobile = false, mobilePane }) {
+	const paged = stackOnMobile && mobilePane !== void 0;
+	const narrowPane = (pane) => !paged ? void 0 : mobilePane === pane ? "flex-1 @3xl/split-pane:block" : "hidden @3xl/split-pane:block";
 	const [split, setSplit] = useState(defaultSplit);
 	const dragging = useRef(false);
 	const container = useRef(null);
@@ -27,28 +29,36 @@ function SplitPane({ left, right, defaultSplit = 50, minLeft = 20, minRight = 20
 		document.body.style.cursor = "col-resize";
 		document.body.style.userSelect = "none";
 	}, [minLeft, minRight]);
-	return /* @__PURE__ */ jsxs("div", {
+	const panes = /* @__PURE__ */ jsxs("div", {
 		ref: container,
-		className: cn("flex h-full flex-1 overflow-hidden", stackOnMobile && "flex-col md:flex-row", className),
+		className: cn("flex h-full flex-1 overflow-hidden", stackOnMobile ? "w-full flex-col @3xl/split-pane:flex-row" : className),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				style: stackOnMobile ? { "--split-pane-width": `${split}%` } : { width: `${split}%` },
-				className: cn("min-h-0 overflow-y-auto bg-background", stackOnMobile && "w-full md:w-[var(--split-pane-width)]", leftClass),
+				"data-slot": stackOnMobile ? "split-pane-left" : void 0,
+				className: cn("min-h-0 overflow-y-auto bg-background", stackOnMobile && "w-full shrink-0 @3xl/split-pane:w-[var(--split-pane-width)] @3xl/split-pane:flex-none", stackOnMobile && !paged && "max-h-[40%] border-b border-border @3xl/split-pane:max-h-none @3xl/split-pane:border-b-0", leftClass, narrowPane("left")),
 				children: left
 			}),
 			/* @__PURE__ */ jsx("div", {
 				role: "separator",
 				"aria-orientation": "vertical",
-				className: cn("w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary", stackOnMobile && "hidden md:block"),
+				className: cn("w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary", stackOnMobile && "hidden @3xl/split-pane:block"),
 				onMouseDown
 			}),
 			/* @__PURE__ */ jsx("div", {
 				style: stackOnMobile ? { "--split-pane-width": `${100 - split}%` } : { width: `${100 - split}%` },
-				className: cn("min-h-0 overflow-hidden bg-background", stackOnMobile && "w-full md:w-[var(--split-pane-width)]", rightClass),
+				"data-slot": stackOnMobile ? "split-pane-right" : void 0,
+				className: cn("min-h-0 overflow-hidden bg-background", stackOnMobile && "w-full flex-1 @3xl/split-pane:flex-none @3xl/split-pane:w-[var(--split-pane-width)]", rightClass, narrowPane("right")),
 				children: right
 			})
 		]
 	});
+	if (!stackOnMobile) return panes;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "split-pane",
+		className: cn("@container/split-pane flex h-full min-h-0 min-w-0 flex-1", className),
+		children: panes
+	});
 }
 export { SplitPane };
 

package/dist/layout/SplitPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.js","names":[],"sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n  /** Content rendered in the left pane. */\n  left: ReactNode;\n  /** Content rendered in the right pane. */\n  right: ReactNode;\n  /** Initial left-pane width as a percentage. */\n  defaultSplit?: number;\n  /** Minimum left-pane width as a percentage. */\n  minLeft?: number;\n  /** Minimum right-pane width as a percentage. */\n  minRight?: number;\n  /** Classes applied to the left pane. */\n  leftClass?: string;\n  /** Classes applied to the right pane. */\n  rightClass?: string;\n  /** Classes applied to the root split container. */\n  className?: string;\n  /** Stack the panes and hide the resize handle below the `md` breakpoint. */\n  stackOnMobile?: boolean;\n};\n\nexport function SplitPane({\n  left,\n  right,\n  defaultSplit = 50,\n  minLeft = 20,\n  minRight = 20,\n  leftClass,\n  rightClass,\n  className,\n  stackOnMobile = false,\n}: SplitPaneProps) {\n  const [split, setSplit] = useState(defaultSplit);\n  const dragging = useRef(false);\n  const container = useRef<HTMLDivElement>(null);\n\n  const onMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      dragging.current = true;\n\n      const onMove = (ev: MouseEvent) => {\n        if (!dragging.current || !container.current) return;\n        const rect = container.current.getBoundingClientRect();\n        const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n        setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n      };\n\n      const onUp = () => {\n        dragging.current = false;\n        document.removeEventListener(\"mousemove\", onMove);\n        document.removeEventListener(\"mouseup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n\n      document.addEventListener(\"mousemove\", onMove);\n      document.addEventListener(\"mouseup\", onUp);\n      document.body.style.cursor = \"col-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [minLeft, minRight],\n  );\n\n  return (\n    <div\n      ref={container}\n      className={cn(\n        \"flex h-full flex-1 overflow-hidden\",\n        stackOnMobile && \"flex-col md:flex-row\",\n        className,\n      )}\n    >\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${split}%` } as CSSProperties)\n            : { width: `${split}%` }\n        }\n        className={cn(\n          \"min-h-0 overflow-y-auto bg-background\",\n          stackOnMobile && \"w-full md:w-[var(--split-pane-width)]\",\n          leftClass,\n        )}\n      >\n        {left}\n      </div>\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={cn(\n          \"w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary\",\n          stackOnMobile && \"hidden md:block\",\n        )}\n        onMouseDown={onMouseDown}\n      />\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${100 - split}%` } as CSSProperties)\n            : { width: `${100 - split}%` }\n        }\n        className={cn(\n          \"min-h-0 overflow-hidden bg-background\",\n          stackOnMobile && \"w-full md:w-[var(--split-pane-width)]\",\n          rightClass,\n        )}\n      >\n        {right}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AA8BA,SAAgB,UAAU,EACxB,MACA,OACA,eAAe,IACf,UAAU,IACV,WAAW,IACX,WACA,YACA,WACA,gBAAgB,SACC;CACjB,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,YAAY,OAAuB,IAAI;CAE7C,MAAM,cAAc,aACjB,MAAwB;EACvB,EAAE,eAAe;EACjB,SAAS,UAAU;EAEnB,MAAM,UAAU,OAAmB;GACjC,IAAI,CAAC,SAAS,WAAW,CAAC,UAAU,SAAS;GAC7C,MAAM,OAAO,UAAU,QAAQ,sBAAsB;GACrD,MAAM,OAAQ,GAAG,UAAU,KAAK,QAAQ,KAAK,QAAS;GACtD,SAAS,KAAK,IAAI,SAAS,KAAK,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC;EAC3D;EAEA,MAAM,aAAa;GACjB,SAAS,UAAU;GACnB,SAAS,oBAAoB,aAAa,MAAM;GAChD,SAAS,oBAAoB,WAAW,IAAI;GAC5C,SAAS,KAAK,MAAM,SAAS;GAC7B,SAAS,KAAK,MAAM,aAAa;EACnC;EAEA,SAAS,iBAAiB,aAAa,MAAM;EAC7C,SAAS,iBAAiB,WAAW,IAAI;EACzC,SAAS,KAAK,MAAM,SAAS;EAC7B,SAAS,KAAK,MAAM,aAAa;CACnC,GACA,CAAC,SAAS,QAAQ,CACpB;CAEA,OACE,qBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,sCACA,iBAAiB,wBACjB,SACF;EANF,UAAA;GAQE,oBAAC,OAAD;IACE,OACE,gBACK,EAAE,sBAAsB,GAAG,MAAM,GAAG,IACrC,EAAE,OAAO,GAAG,MAAM,GAAG;IAE3B,WAAW,GACT,yCACA,iBAAiB,yCACjB,SACF;IAEC,UAAA;GACE,CAAA;GACL,oBAAC,OAAD;IACE,MAAK;IACL,oBAAiB;IACjB,WAAW,GACT,+EACA,iBAAiB,iBACnB;IACa;GACd,CAAA;GACD,oBAAC,OAAD;IACE,OACE,gBACK,EAAE,sBAAsB,GAAG,MAAM,MAAM,GAAG,IAC3C,EAAE,OAAO,GAAG,MAAM,MAAM,GAAG;IAEjC,WAAW,GACT,yCACA,iBAAiB,yCACjB,UACF;IAEC,UAAA;GACE,CAAA;EACF;;AAET"}
+{"version":3,"file":"SplitPane.js","names":[],"sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n  /** Content rendered in the left pane. */\n  left: ReactNode;\n  /** Content rendered in the right pane. */\n  right: ReactNode;\n  /** Initial left-pane width as a percentage. */\n  defaultSplit?: number;\n  /** Minimum left-pane width as a percentage. */\n  minLeft?: number;\n  /** Minimum right-pane width as a percentage. */\n  minRight?: number;\n  /** Classes applied to the left pane. */\n  leftClass?: string;\n  /** Classes applied to the right pane. */\n  rightClass?: string;\n  /** Classes applied to the root split container. */\n  className?: string;\n  /**\n   * Stack the panes and hide the resize handle while the split's own width is\n   * below 48rem (the `md` breakpoint) — a container query, so a split nested in\n   * a narrow column stacks even on a wide screen.\n   */\n  stackOnMobile?: boolean;\n  /**\n   * With `stackOnMobile`, pages the narrow split instead of stacking it: only\n   * this pane renders, at full height, and the other appears again once the\n   * split is 48rem wide. A list/detail host sets it from its selection.\n   */\n  mobilePane?: \"left\" | \"right\";\n};\n\nexport function SplitPane({\n  left,\n  right,\n  defaultSplit = 50,\n  minLeft = 20,\n  minRight = 20,\n  leftClass,\n  rightClass,\n  className,\n  stackOnMobile = false,\n  mobilePane,\n}: SplitPaneProps) {\n  const paged = stackOnMobile && mobilePane !== undefined;\n  const narrowPane = (pane: \"left\" | \"right\") =>\n    !paged\n      ? undefined\n      : mobilePane === pane\n        ? \"flex-1 @3xl/split-pane:block\"\n        : \"hidden @3xl/split-pane:block\";\n  const [split, setSplit] = useState(defaultSplit);\n  const dragging = useRef(false);\n  const container = useRef<HTMLDivElement>(null);\n\n  const onMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      dragging.current = true;\n\n      const onMove = (ev: MouseEvent) => {\n        if (!dragging.current || !container.current) return;\n        const rect = container.current.getBoundingClientRect();\n        const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n        setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n      };\n\n      const onUp = () => {\n        dragging.current = false;\n        document.removeEventListener(\"mousemove\", onMove);\n        document.removeEventListener(\"mouseup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n\n      document.addEventListener(\"mousemove\", onMove);\n      document.addEventListener(\"mouseup\", onUp);\n      document.body.style.cursor = \"col-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [minLeft, minRight],\n  );\n\n  const panes = (\n    <div\n      ref={container}\n      className={cn(\n        \"flex h-full flex-1 overflow-hidden\",\n        stackOnMobile ? \"w-full flex-col @3xl/split-pane:flex-row\" : className,\n      )}\n    >\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${split}%` } as CSSProperties)\n            : { width: `${split}%` }\n        }\n        data-slot={stackOnMobile ? \"split-pane-left\" : undefined}\n        className={cn(\n          \"min-h-0 overflow-y-auto bg-background\",\n          stackOnMobile &&\n            \"w-full shrink-0 @3xl/split-pane:w-[var(--split-pane-width)] @3xl/split-pane:flex-none\",\n          stackOnMobile &&\n            !paged &&\n            \"max-h-[40%] border-b border-border @3xl/split-pane:max-h-none @3xl/split-pane:border-b-0\",\n          leftClass,\n          narrowPane(\"left\"),\n        )}\n      >\n        {left}\n      </div>\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={cn(\n          \"w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary\",\n          stackOnMobile && \"hidden @3xl/split-pane:block\",\n        )}\n        onMouseDown={onMouseDown}\n      />\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${100 - split}%` } as CSSProperties)\n            : { width: `${100 - split}%` }\n        }\n        data-slot={stackOnMobile ? \"split-pane-right\" : undefined}\n        className={cn(\n          \"min-h-0 overflow-hidden bg-background\",\n          stackOnMobile &&\n            \"w-full flex-1 @3xl/split-pane:flex-none @3xl/split-pane:w-[var(--split-pane-width)]\",\n          rightClass,\n          narrowPane(\"right\"),\n        )}\n      >\n        {right}\n      </div>\n    </div>\n  );\n\n  if (!stackOnMobile) return panes;\n  // A container cannot query its own width, so the stacking split needs an\n  // outer box to measure; caller classes size that box.\n  return (\n    <div\n      data-slot=\"split-pane\"\n      className={cn(\"@container/split-pane flex h-full min-h-0 min-w-0 flex-1\", className)}\n    >\n      {panes}\n    </div>\n  );\n}\n\n"],"mappings":";;;;AAwCA,SAAgB,UAAU,EACxB,MACA,OACA,eAAe,IACf,UAAU,IACV,WAAW,IACX,WACA,YACA,WACA,gBAAgB,OAChB,cACiB;CACjB,MAAM,QAAQ,iBAAiB,eAAe,KAAA;CAC9C,MAAM,cAAc,SAClB,CAAC,QACG,KAAA,IACA,eAAe,OACb,iCACA;CACR,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,YAAY,OAAuB,IAAI;CAE7C,MAAM,cAAc,aACjB,MAAwB;EACvB,EAAE,eAAe;EACjB,SAAS,UAAU;EAEnB,MAAM,UAAU,OAAmB;GACjC,IAAI,CAAC,SAAS,WAAW,CAAC,UAAU,SAAS;GAC7C,MAAM,OAAO,UAAU,QAAQ,sBAAsB;GACrD,MAAM,OAAQ,GAAG,UAAU,KAAK,QAAQ,KAAK,QAAS;GACtD,SAAS,KAAK,IAAI,SAAS,KAAK,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC;EAC3D;EAEA,MAAM,aAAa;GACjB,SAAS,UAAU;GACnB,SAAS,oBAAoB,aAAa,MAAM;GAChD,SAAS,oBAAoB,WAAW,IAAI;GAC5C,SAAS,KAAK,MAAM,SAAS;GAC7B,SAAS,KAAK,MAAM,aAAa;EACnC;EAEA,SAAS,iBAAiB,aAAa,MAAM;EAC7C,SAAS,iBAAiB,WAAW,IAAI;EACzC,SAAS,KAAK,MAAM,SAAS;EAC7B,SAAS,KAAK,MAAM,aAAa;CACnC,GACA,CAAC,SAAS,QAAQ,CACpB;CAEA,MAAM,QACJ,qBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,sCACA,gBAAgB,6CAA6C,SAC/D;EALF,UAAA;GAOE,oBAAC,OAAD;IACE,OACE,gBACK,EAAE,sBAAsB,GAAG,MAAM,GAAG,IACrC,EAAE,OAAO,GAAG,MAAM,GAAG;IAE3B,aAAW,gBAAgB,oBAAoB,KAAA;IAC/C,WAAW,GACT,yCACA,iBACE,yFACF,iBACE,CAAC,SACD,4FACF,WACA,WAAW,MAAM,CACnB;IAEC,UAAA;GACE,CAAA;GACL,oBAAC,OAAD;IACE,MAAK;IACL,oBAAiB;IACjB,WAAW,GACT,+EACA,iBAAiB,8BACnB;IACa;GACd,CAAA;GACD,oBAAC,OAAD;IACE,OACE,gBACK,EAAE,sBAAsB,GAAG,MAAM,MAAM,GAAG,IAC3C,EAAE,OAAO,GAAG,MAAM,MAAM,GAAG;IAEjC,aAAW,gBAAgB,qBAAqB,KAAA;IAChD,WAAW,GACT,yCACA,iBACE,uFACF,YACA,WAAW,OAAO,CACpB;IAEC,UAAA;GACE,CAAA;EACF;;CAGP,IAAI,CAAC,eAAe,OAAO;CAG3B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4DAA4D,SAAS;EAElF,UAAA;CACE,CAAA;AAET"}

package/dist/layout/Workspace.cjs

@@ -107,39 +107,43 @@ function Workspace({ panes, value, defaultValue = {}, onValueChange, storageKey,
 			right: held("right") || state.sideCollapsed.right
 		}
 	} : state;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_utils.cn("relative grid min-h-0 w-full grid-cols-1 overflow-auto bg-background md:h-full md:grid-cols-[auto_minmax(0,1fr)_auto] md:grid-rows-[minmax(0,1fr)_auto] md:overflow-hidden", className),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceTopRight, {
-				hasLeft: groups.left.length > 0 && !held("left"),
-				hasRight: groups.right.length > 0 && !held("right"),
-				...slots ? { slots } : {},
-				state,
-				update
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Workspace_regions.WorkspaceSideRegion, {
-				location: "left",
-				panes: groups.left,
-				state: shown,
-				update
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Workspace_regions.WorkspaceSingleRegion, {
-				pane: groups.center,
-				state,
-				update
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Workspace_regions.WorkspaceSideRegion, {
-				location: "right",
-				panes: groups.right,
-				state: shown,
-				update
-			}),
-			groups.bottom && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Workspace_regions.WorkspaceSingleRegion, {
-				pane: groups.bottom,
-				state,
-				update
-			})
-		]
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "workspace",
+		className: require_utils.cn("@container/workspace h-full min-h-0 w-full", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative grid h-full min-h-0 w-full grid-cols-1 content-start overflow-auto bg-background @3xl/workspace:grid-cols-[auto_minmax(0,1fr)_auto] @3xl/workspace:grid-rows-[minmax(0,1fr)_auto] @3xl/workspace:content-stretch @3xl/workspace:overflow-hidden",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceTopRight, {
+					hasLeft: groups.left.length > 0 && !held("left"),
+					hasRight: groups.right.length > 0 && !held("right"),
+					...slots ? { slots } : {},
+					state,
+					update
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Workspace_regions.WorkspaceSideRegion, {
+					location: "left",
+					panes: groups.left,
+					state: shown,
+					update
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Workspace_regions.WorkspaceSingleRegion, {
+					pane: groups.center,
+					state,
+					update
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Workspace_regions.WorkspaceSideRegion, {
+					location: "right",
+					panes: groups.right,
+					state: shown,
+					update
+				}),
+				groups.bottom && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Workspace_regions.WorkspaceSingleRegion, {
+					pane: groups.bottom,
+					state,
+					update
+				})
+			]
+		})
 	});
 }
 exports.Workspace = Workspace;