@flanksource/clicky-ui 0.3.15 → 0.3.17

package/dist/layout/AppSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSidebar.js","sources":["../../src/layout/AppSidebar.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSidebar } from \"../icons\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\n\n// AppSidebar / AppLayout are a router-agnostic application shell: a collapsible\n// left navigation rail driven by declarative sections, plus a flex layout that\n// pairs it with an optional header and the routed content. Navigation and active\n// state come from the RouterAdapter (see ../rpc/router) — by default a plain\n// <a href={to}> browser adapter, or the host's react-router/memory adapter via\n// RouterProvider. The `pathname` and `renderLink` props still override the\n// adapter for cases where a rail's active state is independent of the URL.\n//\n// A section may carry flat `items` and/or collapsible `groups`. Groups are for\n// high-cardinality clusters (e.g. provider surfaces) that benefit from being\n// folded away; their open/closed state persists per `group.key`.\n\nexport interface AppNavItem {\n  /** Stable key; also used as the React key. */\n  key: string;\n  title: string;\n  /** Destination passed to renderLink (or href for external items). */\n  to: string;\n  icon?: ReactNode;\n  /** Render a plain anchor (new-tab style) instead of a routed link. */\n  external?: boolean;\n  /** Optional trailing adornment (count, status dot, etc.). */\n  badge?: ReactNode;\n}\n\nexport interface AppNavGroup {\n  /** Stable key; also the persistence key for collapsed state. */\n  key: string;\n  label: string;\n  icon?: ReactNode;\n  /** Collapsed on first render until the user toggles it. */\n  defaultCollapsed?: boolean;\n  items?: AppNavItem[];\n  /** Nested groups (one extra level, e.g. Providers > Xero). */\n  groups?: AppNavGroup[];\n}\n\nexport interface AppNavSection {\n  /** Section heading; omitted for the leading section. */\n  label?: string;\n  items?: AppNavItem[];\n  /** Collapsible groups rendered after the flat items. */\n  groups?: AppNavGroup[];\n}\n\nexport interface AppSidebarProps {\n  sections: AppNavSection[];\n  /** Current path for active-state. Defaults to the RouterAdapter's pathname. */\n  pathname?: string;\n  /** Render routed links. Defaults to the RouterAdapter's renderLink (a plain\n   *  <a href={to}> unless a RouterProvider supplies a router Link). */\n  renderLink?: RenderLink;\n  /** Branding shown at the top of the expanded rail (logo/title). */\n  header?: ReactNode;\n  /** Pinned to the bottom of the rail (theme switcher, version, etc.). */\n  footer?: ReactNode;\n  /** localStorage key persisting the rail collapsed state. */\n  collapsedStorageKey?: string;\n  /** localStorage key persisting per-group collapsed state. */\n  groupCollapsedStorageKey?: string;\n  /** Override the default prefix-match active test. */\n  isActive?: (pathname: string, to: string) => boolean;\n  className?: string;\n}\n\nconst DEFAULT_COLLAPSE_KEY = \"clicky-ui:app-sidebar:collapsed\";\nconst DEFAULT_GROUP_COLLAPSE_KEY = \"clicky-ui:app-sidebar:groups\";\n\nfunction defaultIsActive(pathname: string, to: string): boolean {\n  if (to === \"/\") return pathname === \"/\";\n  return pathname === to || pathname.startsWith(`${to}/`);\n}\n\nfunction useCollapsed(storageKey: string): [boolean, () => void] {\n  const [collapsed, setCollapsed] = useState<boolean>(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.localStorage.getItem(storageKey) === \"true\";\n  });\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    window.localStorage.setItem(storageKey, String(collapsed));\n  }, [collapsed, storageKey]);\n  return [collapsed, () => setCollapsed((c) => !c)];\n}\n\ninterface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nfunction readGroupState(storageKey: string): Record<string, boolean> {\n  if (typeof window === \"undefined\") return {};\n  try {\n    const raw = window.localStorage.getItem(storageKey);\n    if (!raw) return {};\n    const parsed = JSON.parse(raw);\n    return parsed && typeof parsed === \"object\" ? (parsed as Record<string, boolean>) : {};\n  } catch {\n    return {};\n  }\n}\n\nfunction useGroupCollapsed(storageKey: string): GroupState {\n  const [state, setState] = useState<Record<string, boolean>>(() => readGroupState(storageKey));\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    try {\n      window.localStorage.setItem(storageKey, JSON.stringify(state));\n    } catch {\n      // Sidebar state is a UX nicety; private-mode storage failures are safe to swallow.\n    }\n  }, [state, storageKey]);\n  return {\n    isCollapsed: (key, fallback) => state[key] ?? fallback,\n    toggle: (key, fallback) => setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) })),\n  };\n}\n\nfunction flattenGroupItems(groups: AppNavGroup[]): AppNavItem[] {\n  const out: AppNavItem[] = [];\n  for (const group of groups) {\n    if (group.items) out.push(...group.items);\n    if (group.groups) out.push(...flattenGroupItems(group.groups));\n  }\n  return out;\n}\n\nexport function AppSidebar({\n  sections,\n  pathname: pathnameProp,\n  renderLink: renderLinkProp,\n  header,\n  footer,\n  collapsedStorageKey = DEFAULT_COLLAPSE_KEY,\n  groupCollapsedStorageKey = DEFAULT_GROUP_COLLAPSE_KEY,\n  isActive = defaultIsActive,\n  className,\n}: AppSidebarProps) {\n  const router = useRouter();\n  const pathname = pathnameProp ?? router.pathname;\n  const renderLink = renderLinkProp ?? router.renderLink;\n  const [collapsed, toggleCollapsed] = useCollapsed(collapsedStorageKey);\n  const groupState = useGroupCollapsed(groupCollapsedStorageKey);\n  return (\n    <nav\n      className={cn(\n        \"flex shrink-0 flex-col overflow-hidden border-r border-border bg-muted/30 transition-[width] duration-200\",\n        collapsed ? \"w-16\" : \"w-64\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"flex shrink-0 items-center border-b border-border py-3\",\n          collapsed ? \"justify-center px-2\" : \"justify-between px-4\",\n        )}\n      >\n        {!collapsed && <div className=\"min-w-0 flex-1\">{header}</div>}\n        <button\n          type=\"button\"\n          onClick={toggleCollapsed}\n          aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n          title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n          className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\"\n        >\n          <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <div className={cn(\"flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto py-2\", collapsed ? \"px-2\" : \"px-3\")}>\n        {sections.map((section, i) => (\n          <div key={section.label ?? `section-${i}`} className=\"flex flex-col\">\n            {section.label && <SectionLabel collapsed={collapsed}>{section.label}</SectionLabel>}\n            {section.items?.map((item) => (\n              <SidebarItem\n                key={item.key}\n                item={item}\n                active={isActive(pathname, item.to)}\n                collapsed={collapsed}\n                renderLink={renderLink}\n              />\n            ))}\n            {section.groups?.map((group) =>\n              collapsed ? (\n                flattenGroupItems([group]).map((item) => (\n                  <SidebarItem\n                    key={item.key}\n                    item={item}\n                    active={isActive(pathname, item.to)}\n                    collapsed\n                    renderLink={renderLink}\n                  />\n                ))\n              ) : (\n                <SidebarGroup\n                  key={group.key}\n                  group={group}\n                  pathname={pathname}\n                  isActive={isActive}\n                  renderLink={renderLink}\n                  groupState={groupState}\n                />\n              ),\n            )}\n          </div>\n        ))}\n      </div>\n\n      {footer && <div className={cn(\"mt-auto border-t border-border py-3\", collapsed ? \"px-2\" : \"px-4\")}>{footer}</div>}\n    </nav>\n  );\n}\n\nfunction SidebarGroup({\n  group,\n  pathname,\n  isActive,\n  renderLink,\n  groupState,\n}: {\n  group: AppNavGroup;\n  pathname: string;\n  isActive: (pathname: string, to: string) => boolean;\n  renderLink: RenderLink;\n  groupState: GroupState;\n}) {\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed = groupState.isCollapsed(group.key, fallback);\n  return (\n    <div className=\"flex flex-col\">\n      <button\n        type=\"button\"\n        onClick={() => groupState.toggle(group.key, fallback)}\n        aria-expanded={!collapsed}\n        className=\"flex items-center gap-2 rounded-md px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground transition-colors hover:bg-accent/40\"\n      >\n        {group.icon && <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">{group.icon}</span>}\n        <span className=\"flex-1 truncate text-left\">{group.label}</span>\n        <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n          {collapsed ? \"▸\" : \"▾\"}\n        </span>\n      </button>\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-border/60 pl-2\">\n          {group.items?.map((item) => (\n            <SidebarItem\n              key={item.key}\n              item={item}\n              active={isActive(pathname, item.to)}\n              collapsed={false}\n              renderLink={renderLink}\n            />\n          ))}\n          {group.groups?.map((sub) => (\n            <SidebarGroup\n              key={sub.key}\n              group={sub}\n              pathname={pathname}\n              isActive={isActive}\n              renderLink={renderLink}\n              groupState={groupState}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SidebarItem({\n  item,\n  active,\n  collapsed,\n  renderLink,\n}: {\n  item: AppNavItem;\n  active: boolean;\n  collapsed: boolean;\n  renderLink: RenderLink;\n}) {\n  const className = cn(\n    \"flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[13px] text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    active && \"bg-accent font-medium text-accent-foreground\",\n  );\n  const title = collapsed ? item.title : undefined;\n  const children = (\n    <>\n      {item.icon && <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">{item.icon}</span>}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.title}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n\n  if (item.external) {\n    return (\n      <a href={item.to} className={className} title={title} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  return renderLink({ key: item.key, to: item.to, className, children, ...(title ? { title } : {}) });\n}\n\nfunction SectionLabel({ children, collapsed }: { children: ReactNode; collapsed: boolean }) {\n  if (collapsed) {\n    return <div className=\"mx-2 mb-1 mt-3 border-t border-border first:mt-2\" />;\n  }\n  return (\n    <div className=\"mb-0.5 mt-3 px-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground first:mt-2\">\n      {children}\n    </div>\n  );\n}\n\nexport interface AppLayoutProps {\n  sidebar: ReactNode;\n  header?: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\n/** Flex shell pairing the sidebar rail with an optional header and the routed\n * content area. The content area scrolls independently of the rail. */\nexport function AppLayout({ sidebar, header, children, className }: AppLayoutProps) {\n  return (\n    <div className={cn(\"flex h-full min-h-0 w-full overflow-hidden bg-background\", className)}>\n      {sidebar}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {header}\n        <main className=\"min-h-0 min-w-0 flex-1 overflow-y-auto\">{children}</main>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppSidebar.js","sources":["../../src/layout/AppSidebar.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSidebar } from \"../icons\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport {\n  contentWidthClassName,\n  type ContentWidth,\n} from \"./content-width\";\n\n// AppSidebar / AppLayout are a router-agnostic application shell: a collapsible\n// left navigation rail driven by declarative sections, plus a flex layout that\n// pairs it with an optional header and the routed content. Navigation and active\n// state come from the RouterAdapter (see ../rpc/router) — by default a plain\n// <a href={to}> browser adapter, or the host's react-router/memory adapter via\n// RouterProvider. The `pathname` and `renderLink` props still override the\n// adapter for cases where a rail's active state is independent of the URL.\n//\n// A section may carry flat `items` and/or collapsible `groups`. Groups are for\n// high-cardinality clusters (e.g. provider surfaces) that benefit from being\n// folded away; their open/closed state persists per `group.key`.\n\nexport interface AppNavItem {\n  /** Stable key; also used as the React key. */\n  key: string;\n  title: string;\n  /** Destination passed to renderLink (or href for external items). */\n  to: string;\n  icon?: ReactNode;\n  /** Render a plain anchor (new-tab style) instead of a routed link. */\n  external?: boolean;\n  /** Optional trailing adornment (count, status dot, etc.). */\n  badge?: ReactNode;\n}\n\nexport interface AppNavGroup {\n  /** Stable key; also the persistence key for collapsed state. */\n  key: string;\n  label: string;\n  icon?: ReactNode;\n  /** Collapsed on first render until the user toggles it. */\n  defaultCollapsed?: boolean;\n  items?: AppNavItem[];\n  /** Nested groups (one extra level, e.g. Providers > Xero). */\n  groups?: AppNavGroup[];\n}\n\nexport interface AppNavSection {\n  /** Section heading; omitted for the leading section. */\n  label?: string;\n  items?: AppNavItem[];\n  /** Collapsible groups rendered after the flat items. */\n  groups?: AppNavGroup[];\n}\n\nexport interface AppSidebarProps {\n  sections: AppNavSection[];\n  /** Current path for active-state. Defaults to the RouterAdapter's pathname. */\n  pathname?: string;\n  /** Render routed links. Defaults to the RouterAdapter's renderLink (a plain\n   *  <a href={to}> unless a RouterProvider supplies a router Link). */\n  renderLink?: RenderLink;\n  /** Branding shown at the top of the expanded rail (logo/title). */\n  header?: ReactNode;\n  /** Pinned to the bottom of the rail (theme switcher, version, etc.). */\n  footer?: ReactNode;\n  /** localStorage key persisting the rail collapsed state. */\n  collapsedStorageKey?: string;\n  /** localStorage key persisting per-group collapsed state. */\n  groupCollapsedStorageKey?: string;\n  /** Override the default prefix-match active test. */\n  isActive?: (pathname: string, to: string) => boolean;\n  className?: string;\n}\n\nconst DEFAULT_COLLAPSE_KEY = \"clicky-ui:app-sidebar:collapsed\";\nconst DEFAULT_GROUP_COLLAPSE_KEY = \"clicky-ui:app-sidebar:groups\";\n\nfunction defaultIsActive(pathname: string, to: string): boolean {\n  if (to === \"/\") return pathname === \"/\";\n  return pathname === to || pathname.startsWith(`${to}/`);\n}\n\nfunction useCollapsed(storageKey: string): [boolean, () => void] {\n  const [collapsed, setCollapsed] = useState<boolean>(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.localStorage.getItem(storageKey) === \"true\";\n  });\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    window.localStorage.setItem(storageKey, String(collapsed));\n  }, [collapsed, storageKey]);\n  return [collapsed, () => setCollapsed((c) => !c)];\n}\n\ninterface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nfunction readGroupState(storageKey: string): Record<string, boolean> {\n  if (typeof window === \"undefined\") return {};\n  try {\n    const raw = window.localStorage.getItem(storageKey);\n    if (!raw) return {};\n    const parsed = JSON.parse(raw);\n    return parsed && typeof parsed === \"object\" ? (parsed as Record<string, boolean>) : {};\n  } catch {\n    return {};\n  }\n}\n\nfunction useGroupCollapsed(storageKey: string): GroupState {\n  const [state, setState] = useState<Record<string, boolean>>(() => readGroupState(storageKey));\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    try {\n      window.localStorage.setItem(storageKey, JSON.stringify(state));\n    } catch {\n      // Sidebar state is a UX nicety; private-mode storage failures are safe to swallow.\n    }\n  }, [state, storageKey]);\n  return {\n    isCollapsed: (key, fallback) => state[key] ?? fallback,\n    toggle: (key, fallback) => setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) })),\n  };\n}\n\nfunction flattenGroupItems(groups: AppNavGroup[]): AppNavItem[] {\n  const out: AppNavItem[] = [];\n  for (const group of groups) {\n    if (group.items) out.push(...group.items);\n    if (group.groups) out.push(...flattenGroupItems(group.groups));\n  }\n  return out;\n}\n\nexport function AppSidebar({\n  sections,\n  pathname: pathnameProp,\n  renderLink: renderLinkProp,\n  header,\n  footer,\n  collapsedStorageKey = DEFAULT_COLLAPSE_KEY,\n  groupCollapsedStorageKey = DEFAULT_GROUP_COLLAPSE_KEY,\n  isActive = defaultIsActive,\n  className,\n}: AppSidebarProps) {\n  const router = useRouter();\n  const pathname = pathnameProp ?? router.pathname;\n  const renderLink = renderLinkProp ?? router.renderLink;\n  const [collapsed, toggleCollapsed] = useCollapsed(collapsedStorageKey);\n  const groupState = useGroupCollapsed(groupCollapsedStorageKey);\n  return (\n    <nav\n      className={cn(\n        \"flex shrink-0 flex-col overflow-hidden border-r border-border bg-muted/30 transition-[width] duration-200\",\n        collapsed ? \"w-16\" : \"w-64\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"flex shrink-0 items-center border-b border-border py-3\",\n          collapsed ? \"justify-center px-2\" : \"justify-between px-4\",\n        )}\n      >\n        {!collapsed && <div className=\"min-w-0 flex-1\">{header}</div>}\n        <button\n          type=\"button\"\n          onClick={toggleCollapsed}\n          aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n          title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n          className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\"\n        >\n          <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <div className={cn(\"flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto py-2\", collapsed ? \"px-2\" : \"px-3\")}>\n        {sections.map((section, i) => (\n          <div key={section.label ?? `section-${i}`} className=\"flex flex-col\">\n            {section.label && <SectionLabel collapsed={collapsed}>{section.label}</SectionLabel>}\n            {section.items?.map((item) => (\n              <SidebarItem\n                key={item.key}\n                item={item}\n                active={isActive(pathname, item.to)}\n                collapsed={collapsed}\n                renderLink={renderLink}\n              />\n            ))}\n            {section.groups?.map((group) =>\n              collapsed ? (\n                flattenGroupItems([group]).map((item) => (\n                  <SidebarItem\n                    key={item.key}\n                    item={item}\n                    active={isActive(pathname, item.to)}\n                    collapsed\n                    renderLink={renderLink}\n                  />\n                ))\n              ) : (\n                <SidebarGroup\n                  key={group.key}\n                  group={group}\n                  pathname={pathname}\n                  isActive={isActive}\n                  renderLink={renderLink}\n                  groupState={groupState}\n                />\n              ),\n            )}\n          </div>\n        ))}\n      </div>\n\n      {footer && <div className={cn(\"mt-auto border-t border-border py-3\", collapsed ? \"px-2\" : \"px-4\")}>{footer}</div>}\n    </nav>\n  );\n}\n\nfunction SidebarGroup({\n  group,\n  pathname,\n  isActive,\n  renderLink,\n  groupState,\n}: {\n  group: AppNavGroup;\n  pathname: string;\n  isActive: (pathname: string, to: string) => boolean;\n  renderLink: RenderLink;\n  groupState: GroupState;\n}) {\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed = groupState.isCollapsed(group.key, fallback);\n  return (\n    <div className=\"flex flex-col\">\n      <button\n        type=\"button\"\n        onClick={() => groupState.toggle(group.key, fallback)}\n        aria-expanded={!collapsed}\n        className=\"flex items-center gap-2 rounded-md px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground transition-colors hover:bg-accent/40\"\n      >\n        {group.icon && <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">{group.icon}</span>}\n        <span className=\"flex-1 truncate text-left\">{group.label}</span>\n        <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n          {collapsed ? \"▸\" : \"▾\"}\n        </span>\n      </button>\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-border/60 pl-2\">\n          {group.items?.map((item) => (\n            <SidebarItem\n              key={item.key}\n              item={item}\n              active={isActive(pathname, item.to)}\n              collapsed={false}\n              renderLink={renderLink}\n            />\n          ))}\n          {group.groups?.map((sub) => (\n            <SidebarGroup\n              key={sub.key}\n              group={sub}\n              pathname={pathname}\n              isActive={isActive}\n              renderLink={renderLink}\n              groupState={groupState}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SidebarItem({\n  item,\n  active,\n  collapsed,\n  renderLink,\n}: {\n  item: AppNavItem;\n  active: boolean;\n  collapsed: boolean;\n  renderLink: RenderLink;\n}) {\n  const className = cn(\n    \"flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[13px] text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    active && \"bg-accent font-medium text-accent-foreground\",\n  );\n  const title = collapsed ? item.title : undefined;\n  const children = (\n    <>\n      {item.icon && <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">{item.icon}</span>}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.title}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n\n  if (item.external) {\n    return (\n      <a href={item.to} className={className} title={title} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  return renderLink({ key: item.key, to: item.to, className, children, ...(title ? { title } : {}) });\n}\n\nfunction SectionLabel({ children, collapsed }: { children: ReactNode; collapsed: boolean }) {\n  if (collapsed) {\n    return <div className=\"mx-2 mb-1 mt-3 border-t border-border first:mt-2\" />;\n  }\n  return (\n    <div className=\"mb-0.5 mt-3 px-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground first:mt-2\">\n      {children}\n    </div>\n  );\n}\n\nexport interface AppLayoutProps {\n  sidebar: ReactNode;\n  header?: ReactNode;\n  children: ReactNode;\n  /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */\n  contentWidth?: ContentWidth;\n  className?: string;\n}\n\n/** Flex shell pairing the sidebar rail with an optional header and the routed\n * content area. The content area scrolls independently of the rail. */\nexport function AppLayout({\n  sidebar,\n  header,\n  children,\n  contentWidth = \"contained\",\n  className,\n}: AppLayoutProps) {\n  return (\n    <div className={cn(\"flex h-full min-h-0 w-full overflow-hidden bg-background\", className)}>\n      {sidebar}\n      <div\n        data-slot=\"app-layout-column\"\n        className=\"@container/app-content flex min-w-0 flex-1 flex-col\"\n      >\n        {header && (\n          <div\n            data-slot=\"app-layout-header-content\"\n            data-content-width={contentWidth}\n            className={contentWidthClassName(contentWidth)}\n          >\n            {header}\n          </div>\n        )}\n        <main className=\"min-h-0 min-w-0 flex-1 overflow-y-auto\">\n          <div\n            data-slot=\"app-layout-content\"\n            data-content-width={contentWidth}\n            className={contentWidthClassName(contentWidth)}\n          >\n            {children}\n          </div>\n        </main>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/layout/Panel.cjs

@@ -1,15 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
-const toneRing = {
-  default: "",
-  danger: "border-l-2 border-l-red-500",
-  warning: "border-l-2 border-l-yellow-500",
-  success: "border-l-2 border-l-green-500",
-  info: "border-l-2 border-l-blue-500"
-};
+const PanelFrame = require("./PanelFrame.cjs");
 function Panel({
   title,
   icon,
@@ -24,41 +17,32 @@ function Panel({
   children
 }) {
   const hasHeader = title !== void 0 || icon !== void 0 || actions !== void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PanelFrame.PanelFrame,
     {
-      className: utils.cn(
-        "rounded-md border border-border bg-card overflow-hidden",
-        toneRing[tone],
-        className
-      ),
-      children: [
-        hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: utils.cn(
-              "flex items-center gap-2 px-density-3 py-density-2 border-b border-border",
-              headerClassName
+      ...hasHeader ? {
+        header: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+            icon && /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                ...typeof icon === "string" ? { name: icon } : { icon },
+                className: "text-base text-muted-foreground"
+              }
             ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-                icon && /* @__PURE__ */ jsxRuntime.jsx(
-                  Icon.Icon,
-                  {
-                    ...typeof icon === "string" ? { name: icon } : { icon },
-                    className: "text-base text-muted-foreground"
-                  }
-                ),
-                title !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm truncate text-card-foreground", children: title }),
-                count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground", children: count })
-              ] }),
-              actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(padded && "px-density-3 py-density-2", bodyClassName), children }),
-        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-density-3 py-density-2 border-t border-border", children: footer })
-      ]
+            title !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-medium text-card-foreground", children: title }),
+            count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground", children: count })
+          ] }),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
+        ] })
+      } : {},
+      ...footer !== void 0 ? { footer } : {},
+      tone,
+      padded,
+      ...className !== void 0 ? { className } : {},
+      ...headerClassName !== void 0 ? { headerClassName } : {},
+      ...bodyClassName !== void 0 ? { bodyClassName } : {},
+      children
     }
   );
 }

package/dist/layout/Panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.cjs","sources":["../../src/layout/Panel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type PanelTone = \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n\nexport type PanelProps = {\n  /** Header title. Omit (with no icon/count/actions) to render a headerless card. */\n  title?: ReactNode;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Optional count pill shown after the title. */\n  count?: number;\n  /** Right-aligned header content (copy buttons, summaries, links). */\n  actions?: ReactNode;\n  /** Optional footer row below the body. */\n  footer?: ReactNode;\n  /** Semantic left-border accent. */\n  tone?: PanelTone;\n  /** Pad the body. Defaults to true; pass false for flush row lists. */\n  padded?: boolean;\n  /** Classes applied to the panel root. */\n  className?: string;\n  /** Classes applied to the header row. */\n  headerClassName?: string;\n  /** Classes applied to the body. */\n  bodyClassName?: string;\n  /** Panel content. */\n  children: ReactNode;\n};\n\nconst toneRing: Record<PanelTone, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-l-red-500\",\n  warning: \"border-l-2 border-l-yellow-500\",\n  success: \"border-l-2 border-l-green-500\",\n  info: \"border-l-2 border-l-blue-500\",\n};\n\n/**\n * A non-collapsible carded surface with an optional header. Use for content\n * panels (checks, results, comments) where {@link Section}'s disclosure\n * behaviour isn't wanted. Sits on `bg-card` with a border and rounded corners.\n */\nexport function Panel({\n  title,\n  icon,\n  count,\n  actions,\n  footer,\n  tone = \"default\",\n  padded = true,\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: PanelProps) {\n  const hasHeader = title !== undefined || icon !== undefined || actions !== undefined;\n  return (\n    <div\n      className={cn(\n        \"rounded-md border border-border bg-card overflow-hidden\",\n        toneRing[tone],\n        className,\n      )}\n    >\n      {hasHeader && (\n        <div\n          className={cn(\n            \"flex items-center gap-2 px-density-3 py-density-2 border-b border-border\",\n            headerClassName,\n          )}\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n                className=\"text-base text-muted-foreground\"\n              />\n            )}\n            {title !== undefined && (\n              <span className=\"font-medium text-sm truncate text-card-foreground\">{title}</span>\n            )}\n            {count !== undefined && (\n              <span className=\"inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground\">\n                {count}\n              </span>\n            )}\n          </div>\n          {actions && <div className=\"flex shrink-0 items-center gap-1\">{actions}</div>}\n        </div>\n      )}\n      <div className={cn(padded && \"px-density-3 py-density-2\", bodyClassName)}>{children}</div>\n      {footer && <div className=\"px-density-3 py-density-2 border-t border-border\">{footer}</div>}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","Icon"],"mappings":";;;;;AA+BA,MAAM,WAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAOO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,UAAU,UAAa,SAAS,UAAa,YAAY;AAC3E,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,SAAS,IAAI;AAAA,QACb;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,aACCD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA;AAAA,cAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,gBAAA,QACCE,2BAAAA;AAAAA,kBAACC,KAAAA;AAAAA,kBAAA;AAAA,oBACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,oBACnD,WAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGb,UAAU,UACTD,2BAAAA,IAAC,QAAA,EAAK,WAAU,qDAAqD,UAAA,OAAM;AAAA,gBAE5E,UAAU,UACTA,2BAAAA,IAAC,QAAA,EAAK,WAAU,wHACb,UAAA,MAAA,CACH;AAAA,cAAA,GAEJ;AAAA,cACC,WAAWA,2BAAAA,IAAC,OAAA,EAAI,WAAU,oCAAoC,UAAA,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAG3EA,+BAAC,SAAI,WAAWD,MAAAA,GAAG,UAAU,6BAA6B,aAAa,GAAI,UAAS;AAAA,QACnF,UAAUC,2BAAAA,IAAC,OAAA,EAAI,WAAU,oDAAoD,UAAA,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3F;;"}
+{"version":3,"file":"Panel.cjs","sources":["../../src/layout/Panel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { PanelFrame, type PanelTone } from \"./PanelFrame\";\n\nexport type { PanelTone } from \"./PanelFrame\";\n\nexport type PanelProps = {\n  /** Header title. Omit (with no icon/count/actions) to render a headerless card. */\n  title?: ReactNode;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Optional count pill shown after the title. */\n  count?: number;\n  /** Right-aligned header content (copy buttons, summaries, links). */\n  actions?: ReactNode;\n  /** Optional footer row below the body. */\n  footer?: ReactNode;\n  /** Semantic left-border accent. */\n  tone?: PanelTone;\n  /** Pad the body. Defaults to true; pass false for flush row lists. */\n  padded?: boolean;\n  /** Classes applied to the panel root. */\n  className?: string;\n  /** Classes applied to the header row. */\n  headerClassName?: string;\n  /** Classes applied to the body. */\n  bodyClassName?: string;\n  /** Panel content. */\n  children: ReactNode;\n};\n\n/**\n * A non-collapsible carded surface with an optional header. Use for content\n * panels (checks, results, comments) where {@link Section}'s disclosure\n * behaviour isn't wanted. Sits on `bg-card` with a border and rounded corners.\n */\nexport function Panel({\n  title,\n  icon,\n  count,\n  actions,\n  footer,\n  tone = \"default\",\n  padded = true,\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: PanelProps) {\n  const hasHeader =\n    title !== undefined || icon !== undefined || actions !== undefined;\n  return (\n    <PanelFrame\n      {...(hasHeader\n        ? {\n            header: (\n              <>\n                <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n                  {icon && (\n                    <Icon\n                      {...(typeof icon === \"string\"\n                        ? { name: icon }\n                        : { icon })}\n                      className=\"text-base text-muted-foreground\"\n                    />\n                  )}\n                  {title !== undefined && (\n                    <span className=\"truncate text-sm font-medium text-card-foreground\">\n                      {title}\n                    </span>\n                  )}\n                  {count !== undefined && (\n                    <span className=\"inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground\">\n                      {count}\n                    </span>\n                  )}\n                </div>\n                {actions && (\n                  <div className=\"flex shrink-0 items-center gap-1\">\n                    {actions}\n                  </div>\n                )}\n              </>\n            ),\n          }\n        : {})}\n      {...(footer !== undefined ? { footer } : {})}\n      tone={tone}\n      padded={padded}\n      {...(className !== undefined ? { className } : {})}\n      {...(headerClassName !== undefined ? { headerClassName } : {})}\n      {...(bodyClassName !== undefined ? { bodyClassName } : {})}\n    >\n      {children}\n    </PanelFrame>\n  );\n}\n"],"names":["jsx","PanelFrame","jsxs","Fragment","Icon"],"mappings":";;;;;AAoCO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,YACJ,UAAU,UAAa,SAAS,UAAa,YAAY;AAC3D,SACEA,2BAAAA;AAAAA,IAACC,WAAAA;AAAAA,IAAA;AAAA,MACE,GAAI,YACD;AAAA,QACE,QACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,UAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,YAAA,QACCF,2BAAAA;AAAAA,cAACI,KAAAA;AAAAA,cAAA;AAAA,gBACE,GAAI,OAAO,SAAS,WACjB,EAAE,MAAM,KAAA,IACR,EAAE,KAAA;AAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAGb,UAAU,UACTJ,2BAAAA,IAAC,QAAA,EAAK,WAAU,qDACb,UAAA,OACH;AAAA,YAED,UAAU,UACTA,2BAAAA,IAAC,QAAA,EAAK,WAAU,wHACb,UAAA,MAAA,CACH;AAAA,UAAA,GAEJ;AAAA,UACC,WACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,oCACZ,UAAA,QAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,IAGJ,CAAA;AAAA,MACH,GAAI,WAAW,SAAY,EAAE,OAAA,IAAW,CAAA;AAAA,MACzC;AAAA,MACA;AAAA,MACC,GAAI,cAAc,SAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MAC9C,GAAI,oBAAoB,SAAY,EAAE,gBAAA,IAAoB,CAAA;AAAA,MAC1D,GAAI,kBAAkB,SAAY,EAAE,cAAA,IAAkB,CAAA;AAAA,MAEtD;AAAA,IAAA;AAAA,EAAA;AAGP;;"}

package/dist/layout/Panel.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { StaticIconComponent } from '../data/Icon';
-export type PanelTone = "default" | "danger" | "warning" | "success" | "info";
+import { PanelTone } from './PanelFrame';
+export type { PanelTone } from './PanelFrame';
 export type PanelProps = {
     /** Header title. Omit (with no icon/count/actions) to render a headerless card. */
     title?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/layout/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG;IACvB,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAUF;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,IAAgB,EAChB,MAAa,EACb,SAAS,EACT,eAAe,EACf,aAAa,EACb,QAAQ,GACT,EAAE,UAAU,2CAwCZ"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/layout/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG;IACvB,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,IAAgB,EAChB,MAAa,EACb,SAAS,EACT,eAAe,EACf,aAAa,EACb,QAAQ,GACT,EAAE,UAAU,2CAgDZ"}

package/dist/layout/Panel.js

@@ -1,13 +1,6 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { cn } from "../lib/utils.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Icon } from "../data/Icon.js";
-const toneRing = {
-  default: "",
-  danger: "border-l-2 border-l-red-500",
-  warning: "border-l-2 border-l-yellow-500",
-  success: "border-l-2 border-l-green-500",
-  info: "border-l-2 border-l-blue-500"
-};
+import { PanelFrame } from "./PanelFrame.js";
 function Panel({
   title,
   icon,
@@ -22,41 +15,32 @@ function Panel({
   children
 }) {
   const hasHeader = title !== void 0 || icon !== void 0 || actions !== void 0;
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    PanelFrame,
     {
-      className: cn(
-        "rounded-md border border-border bg-card overflow-hidden",
-        toneRing[tone],
-        className
-      ),
-      children: [
-        hasHeader && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex items-center gap-2 px-density-3 py-density-2 border-b border-border",
-              headerClassName
+      ...hasHeader ? {
+        header: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+            icon && /* @__PURE__ */ jsx(
+              Icon,
+              {
+                ...typeof icon === "string" ? { name: icon } : { icon },
+                className: "text-base text-muted-foreground"
+              }
             ),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-                icon && /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    ...typeof icon === "string" ? { name: icon } : { icon },
-                    className: "text-base text-muted-foreground"
-                  }
-                ),
-                title !== void 0 && /* @__PURE__ */ jsx("span", { className: "font-medium text-sm truncate text-card-foreground", children: title }),
-                count !== void 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground", children: count })
-              ] }),
-              actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: cn(padded && "px-density-3 py-density-2", bodyClassName), children }),
-        footer && /* @__PURE__ */ jsx("div", { className: "px-density-3 py-density-2 border-t border-border", children: footer })
-      ]
+            title !== void 0 && /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-card-foreground", children: title }),
+            count !== void 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground", children: count })
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
+        ] })
+      } : {},
+      ...footer !== void 0 ? { footer } : {},
+      tone,
+      padded,
+      ...className !== void 0 ? { className } : {},
+      ...headerClassName !== void 0 ? { headerClassName } : {},
+      ...bodyClassName !== void 0 ? { bodyClassName } : {},
+      children
     }
   );
 }

package/dist/layout/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../src/layout/Panel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type PanelTone = \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n\nexport type PanelProps = {\n  /** Header title. Omit (with no icon/count/actions) to render a headerless card. */\n  title?: ReactNode;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Optional count pill shown after the title. */\n  count?: number;\n  /** Right-aligned header content (copy buttons, summaries, links). */\n  actions?: ReactNode;\n  /** Optional footer row below the body. */\n  footer?: ReactNode;\n  /** Semantic left-border accent. */\n  tone?: PanelTone;\n  /** Pad the body. Defaults to true; pass false for flush row lists. */\n  padded?: boolean;\n  /** Classes applied to the panel root. */\n  className?: string;\n  /** Classes applied to the header row. */\n  headerClassName?: string;\n  /** Classes applied to the body. */\n  bodyClassName?: string;\n  /** Panel content. */\n  children: ReactNode;\n};\n\nconst toneRing: Record<PanelTone, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-l-red-500\",\n  warning: \"border-l-2 border-l-yellow-500\",\n  success: \"border-l-2 border-l-green-500\",\n  info: \"border-l-2 border-l-blue-500\",\n};\n\n/**\n * A non-collapsible carded surface with an optional header. Use for content\n * panels (checks, results, comments) where {@link Section}'s disclosure\n * behaviour isn't wanted. Sits on `bg-card` with a border and rounded corners.\n */\nexport function Panel({\n  title,\n  icon,\n  count,\n  actions,\n  footer,\n  tone = \"default\",\n  padded = true,\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: PanelProps) {\n  const hasHeader = title !== undefined || icon !== undefined || actions !== undefined;\n  return (\n    <div\n      className={cn(\n        \"rounded-md border border-border bg-card overflow-hidden\",\n        toneRing[tone],\n        className,\n      )}\n    >\n      {hasHeader && (\n        <div\n          className={cn(\n            \"flex items-center gap-2 px-density-3 py-density-2 border-b border-border\",\n            headerClassName,\n          )}\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n                className=\"text-base text-muted-foreground\"\n              />\n            )}\n            {title !== undefined && (\n              <span className=\"font-medium text-sm truncate text-card-foreground\">{title}</span>\n            )}\n            {count !== undefined && (\n              <span className=\"inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground\">\n                {count}\n              </span>\n            )}\n          </div>\n          {actions && <div className=\"flex shrink-0 items-center gap-1\">{actions}</div>}\n        </div>\n      )}\n      <div className={cn(padded && \"px-density-3 py-density-2\", bodyClassName)}>{children}</div>\n      {footer && <div className=\"px-density-3 py-density-2 border-t border-border\">{footer}</div>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AA+BA,MAAM,WAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAOO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,UAAU,UAAa,SAAS,UAAa,YAAY;AAC3E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,IAAI;AAAA,QACb;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,gBAAA,QACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,oBACnD,WAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGb,UAAU,UACT,oBAAC,QAAA,EAAK,WAAU,qDAAqD,UAAA,OAAM;AAAA,gBAE5E,UAAU,UACT,oBAAC,QAAA,EAAK,WAAU,wHACb,UAAA,MAAA,CACH;AAAA,cAAA,GAEJ;AAAA,cACC,WAAW,oBAAC,OAAA,EAAI,WAAU,oCAAoC,UAAA,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAG3E,oBAAC,SAAI,WAAW,GAAG,UAAU,6BAA6B,aAAa,GAAI,UAAS;AAAA,QACnF,UAAU,oBAAC,OAAA,EAAI,WAAU,oDAAoD,UAAA,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3F;"}
+{"version":3,"file":"Panel.js","sources":["../../src/layout/Panel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { PanelFrame, type PanelTone } from \"./PanelFrame\";\n\nexport type { PanelTone } from \"./PanelFrame\";\n\nexport type PanelProps = {\n  /** Header title. Omit (with no icon/count/actions) to render a headerless card. */\n  title?: ReactNode;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Optional count pill shown after the title. */\n  count?: number;\n  /** Right-aligned header content (copy buttons, summaries, links). */\n  actions?: ReactNode;\n  /** Optional footer row below the body. */\n  footer?: ReactNode;\n  /** Semantic left-border accent. */\n  tone?: PanelTone;\n  /** Pad the body. Defaults to true; pass false for flush row lists. */\n  padded?: boolean;\n  /** Classes applied to the panel root. */\n  className?: string;\n  /** Classes applied to the header row. */\n  headerClassName?: string;\n  /** Classes applied to the body. */\n  bodyClassName?: string;\n  /** Panel content. */\n  children: ReactNode;\n};\n\n/**\n * A non-collapsible carded surface with an optional header. Use for content\n * panels (checks, results, comments) where {@link Section}'s disclosure\n * behaviour isn't wanted. Sits on `bg-card` with a border and rounded corners.\n */\nexport function Panel({\n  title,\n  icon,\n  count,\n  actions,\n  footer,\n  tone = \"default\",\n  padded = true,\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: PanelProps) {\n  const hasHeader =\n    title !== undefined || icon !== undefined || actions !== undefined;\n  return (\n    <PanelFrame\n      {...(hasHeader\n        ? {\n            header: (\n              <>\n                <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n                  {icon && (\n                    <Icon\n                      {...(typeof icon === \"string\"\n                        ? { name: icon }\n                        : { icon })}\n                      className=\"text-base text-muted-foreground\"\n                    />\n                  )}\n                  {title !== undefined && (\n                    <span className=\"truncate text-sm font-medium text-card-foreground\">\n                      {title}\n                    </span>\n                  )}\n                  {count !== undefined && (\n                    <span className=\"inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground\">\n                      {count}\n                    </span>\n                  )}\n                </div>\n                {actions && (\n                  <div className=\"flex shrink-0 items-center gap-1\">\n                    {actions}\n                  </div>\n                )}\n              </>\n            ),\n          }\n        : {})}\n      {...(footer !== undefined ? { footer } : {})}\n      tone={tone}\n      padded={padded}\n      {...(className !== undefined ? { className } : {})}\n      {...(headerClassName !== undefined ? { headerClassName } : {})}\n      {...(bodyClassName !== undefined ? { bodyClassName } : {})}\n    >\n      {children}\n    </PanelFrame>\n  );\n}\n"],"names":[],"mappings":";;;AAoCO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,YACJ,UAAU,UAAa,SAAS,UAAa,YAAY;AAC3D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAI,YACD;AAAA,QACE,QACE,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,YAAA,QACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAI,OAAO,SAAS,WACjB,EAAE,MAAM,KAAA,IACR,EAAE,KAAA;AAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAGb,UAAU,UACT,oBAAC,QAAA,EAAK,WAAU,qDACb,UAAA,OACH;AAAA,YAED,UAAU,UACT,oBAAC,QAAA,EAAK,WAAU,wHACb,UAAA,MAAA,CACH;AAAA,UAAA,GAEJ;AAAA,UACC,WACC,oBAAC,OAAA,EAAI,WAAU,oCACZ,UAAA,QAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,IAGJ,CAAA;AAAA,MACH,GAAI,WAAW,SAAY,EAAE,OAAA,IAAW,CAAA;AAAA,MACzC;AAAA,MACA;AAAA,MACC,GAAI,cAAc,SAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MAC9C,GAAI,oBAAoB,SAAY,EAAE,gBAAA,IAAoB,CAAA;AAAA,MAC1D,GAAI,kBAAkB,SAAY,EAAE,cAAA,IAAkB,CAAA;AAAA,MAEtD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/layout/PanelFrame.cjs

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const toneRing = {
+  default: "",
+  danger: "border-l-2 border-l-red-500",
+  warning: "border-l-2 border-l-yellow-500",
+  success: "border-l-2 border-l-green-500",
+  info: "border-l-2 border-l-blue-500"
+};
+function PanelFrame({
+  header,
+  footer,
+  tone = "default",
+  padded = true,
+  bodyVisible = true,
+  className,
+  headerClassName,
+  bodyClassName,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "overflow-hidden rounded-md border border-border bg-card",
+        toneRing[tone],
+        className
+      ),
+      children: [
+        header !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(
+              "flex items-center gap-2 px-density-3 py-density-2",
+              bodyVisible && "border-b border-border",
+              headerClassName
+            ),
+            children: header
+          }
+        ),
+        bodyVisible && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(padded && "px-density-3 py-density-2", bodyClassName),
+            children
+          }
+        ),
+        bodyVisible && footer !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border px-density-3 py-density-2", children: footer })
+      ]
+    }
+  );
+}
+exports.PanelFrame = PanelFrame;
+//# sourceMappingURL=PanelFrame.cjs.map

package/dist/layout/PanelFrame.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelFrame.cjs","sources":["../../src/layout/PanelFrame.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type PanelTone = \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n\nexport type PanelFrameProps = {\n  header?: ReactNode;\n  footer?: ReactNode;\n  tone?: PanelTone;\n  padded?: boolean;\n  bodyVisible?: boolean;\n  className?: string;\n  headerClassName?: string;\n  bodyClassName?: string;\n  children: ReactNode;\n};\n\nconst toneRing: Record<PanelTone, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-l-red-500\",\n  warning: \"border-l-2 border-l-yellow-500\",\n  success: \"border-l-2 border-l-green-500\",\n  info: \"border-l-2 border-l-blue-500\",\n};\n\nexport function PanelFrame({\n  header,\n  footer,\n  tone = \"default\",\n  padded = true,\n  bodyVisible = true,\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: PanelFrameProps) {\n  return (\n    <div\n      className={cn(\n        \"overflow-hidden rounded-md border border-border bg-card\",\n        toneRing[tone],\n        className,\n      )}\n    >\n      {header !== undefined && (\n        <div\n          className={cn(\n            \"flex items-center gap-2 px-density-3 py-density-2\",\n            bodyVisible && \"border-b border-border\",\n            headerClassName,\n          )}\n        >\n          {header}\n        </div>\n      )}\n      {bodyVisible && (\n        <div\n          className={cn(padded && \"px-density-3 py-density-2\", bodyClassName)}\n        >\n          {children}\n        </div>\n      )}\n      {bodyVisible && footer !== undefined && (\n        <div className=\"border-t border-border px-density-3 py-density-2\">\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;AAiBA,MAAM,WAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,SAAS,IAAI;AAAA,QACb;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,WAAW,UACVC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA,eAAe;AAAA,cACf;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJ,eACCC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,MAAAA,GAAG,UAAU,6BAA6B,aAAa;AAAA,YAEjE;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJ,eAAe,WAAW,yCACxB,OAAA,EAAI,WAAU,oDACZ,UAAA,OAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/layout/PanelFrame.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type PanelTone = "default" | "danger" | "warning" | "success" | "info";
+export type PanelFrameProps = {
+    header?: ReactNode;
+    footer?: ReactNode;
+    tone?: PanelTone;
+    padded?: boolean;
+    bodyVisible?: boolean;
+    className?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+    children: ReactNode;
+};
+export declare function PanelFrame({ header, footer, tone, padded, bodyVisible, className, headerClassName, bodyClassName, children, }: PanelFrameProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PanelFrame.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelFrame.d.ts","sourceRoot":"","sources":["../../src/layout/PanelFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9E,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAUF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,MAAM,EACN,IAAgB,EAChB,MAAa,EACb,WAAkB,EAClB,SAAS,EACT,eAAe,EACf,aAAa,EACb,QAAQ,GACT,EAAE,eAAe,2CAkCjB"}

package/dist/layout/PanelFrame.js

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+const toneRing = {
+  default: "",
+  danger: "border-l-2 border-l-red-500",
+  warning: "border-l-2 border-l-yellow-500",
+  success: "border-l-2 border-l-green-500",
+  info: "border-l-2 border-l-blue-500"
+};
+function PanelFrame({
+  header,
+  footer,
+  tone = "default",
+  padded = true,
+  bodyVisible = true,
+  className,
+  headerClassName,
+  bodyClassName,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-md border border-border bg-card",
+        toneRing[tone],
+        className
+      ),
+      children: [
+        header !== void 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 px-density-3 py-density-2",
+              bodyVisible && "border-b border-border",
+              headerClassName
+            ),
+            children: header
+          }
+        ),
+        bodyVisible && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(padded && "px-density-3 py-density-2", bodyClassName),
+            children
+          }
+        ),
+        bodyVisible && footer !== void 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-density-3 py-density-2", children: footer })
+      ]
+    }
+  );
+}
+export {
+  PanelFrame
+};
+//# sourceMappingURL=PanelFrame.js.map

package/dist/layout/PanelFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelFrame.js","sources":["../../src/layout/PanelFrame.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type PanelTone = \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n\nexport type PanelFrameProps = {\n  header?: ReactNode;\n  footer?: ReactNode;\n  tone?: PanelTone;\n  padded?: boolean;\n  bodyVisible?: boolean;\n  className?: string;\n  headerClassName?: string;\n  bodyClassName?: string;\n  children: ReactNode;\n};\n\nconst toneRing: Record<PanelTone, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-l-red-500\",\n  warning: \"border-l-2 border-l-yellow-500\",\n  success: \"border-l-2 border-l-green-500\",\n  info: \"border-l-2 border-l-blue-500\",\n};\n\nexport function PanelFrame({\n  header,\n  footer,\n  tone = \"default\",\n  padded = true,\n  bodyVisible = true,\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: PanelFrameProps) {\n  return (\n    <div\n      className={cn(\n        \"overflow-hidden rounded-md border border-border bg-card\",\n        toneRing[tone],\n        className,\n      )}\n    >\n      {header !== undefined && (\n        <div\n          className={cn(\n            \"flex items-center gap-2 px-density-3 py-density-2\",\n            bodyVisible && \"border-b border-border\",\n            headerClassName,\n          )}\n        >\n          {header}\n        </div>\n      )}\n      {bodyVisible && (\n        <div\n          className={cn(padded && \"px-density-3 py-density-2\", bodyClassName)}\n        >\n          {children}\n        </div>\n      )}\n      {bodyVisible && footer !== undefined && (\n        <div className=\"border-t border-border px-density-3 py-density-2\">\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAiBA,MAAM,WAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,IAAI;AAAA,QACb;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,WAAW,UACV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,eAAe;AAAA,cACf;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJ,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,UAAU,6BAA6B,aAAa;AAAA,YAEjE;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJ,eAAe,WAAW,8BACxB,OAAA,EAAI,WAAU,oDACZ,UAAA,OAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/layout/Section.cjs

@@ -4,15 +4,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
+const PanelFrame = require("./PanelFrame.cjs");
 const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
 const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
-const toneRing = {
-  default: "",
-  danger: "border-l-2 border-red-500",
-  warning: "border-l-2 border-yellow-500",
-  success: "border-l-2 border-green-500",
-  info: "border-l-2 border-blue-500"
-};
 function Section({
   title,
   summary,
@@ -43,47 +37,63 @@ function Section({
         className: "text-muted-foreground text-xs"
       }
     ),
-    icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-base" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm flex-1 truncate", children: title })
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("rounded-md border border-border bg-background", toneRing[tone], className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: utils.cn(
-          "w-full flex items-center gap-2 px-density-3 py-density-2 text-left",
-          headerClassName
-        ),
-        children: [
-          collapsible ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: toggle,
-              "aria-expanded": open,
-              className: "flex flex-1 min-w-0 items-center gap-2 text-left rounded-sm hover:bg-accent/50 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-              children: leading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 min-w-0 items-center gap-2", children: leading }),
-          summary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground shrink-0", children: summary })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("px-density-3 py-density-2 border-t border-border", bodyClassName), children })
-  ] });
-}
-function DetailEmptyState({ icon, label, description, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("p-density-6 text-center text-muted-foreground", className), children: [
     icon && /* @__PURE__ */ jsxRuntime.jsx(
       Icon.Icon,
       {
         ...typeof icon === "string" ? { name: icon } : { icon },
-        className: "text-3xl mb-density-2"
+        className: "text-base"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label }),
-    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-density-1 opacity-70", children: description })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm flex-1 truncate", children: title })
   ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PanelFrame.PanelFrame,
+    {
+      header: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        collapsible ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: toggle,
+            "aria-expanded": open,
+            className: "flex min-w-0 flex-1 items-center gap-2 rounded-sm text-left transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            children: leading
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: leading }),
+        summary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: summary })
+      ] }),
+      tone,
+      bodyVisible: open,
+      className: utils.cn("overflow-visible bg-background", className),
+      headerClassName: utils.cn("w-full text-left", headerClassName),
+      ...bodyClassName !== void 0 ? { bodyClassName } : {},
+      children
+    }
+  );
+}
+function DetailEmptyState({
+  icon,
+  label,
+  description,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn("p-density-6 text-center text-muted-foreground", className),
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            ...typeof icon === "string" ? { name: icon } : { icon },
+            className: "text-3xl mb-density-2"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-density-1 opacity-70", children: description })
+      ]
+    }
+  );
 }
 exports.DetailEmptyState = DetailEmptyState;
 exports.Section = Section;