@teamix-evo/ui 0.2.0 → 0.4.0

package/src/components/page-header/page-header.tsx

@@ -0,0 +1,284 @@
+import * as React from 'react';
+import { ArrowLeft } from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+import { Skeleton, SkeletonParagraph } from '@/components/skeleton/skeleton';
+
+// ─── PageHeader: 顶层容器(<header>) ─────────────────────────────────────────
+
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * 右下角背景装饰图 URL — 通过 inline `style.backgroundImage` 注入(Tailwind 不支持
+   * 动态 URL)。固定 `bg-no-repeat bg-right-bottom`。
+   */
+  backgroundImage?: string;
+}
+
+const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(
+  ({ className, backgroundImage, style, children, ...props }, ref) => {
+    const bgStyle: React.CSSProperties | undefined = backgroundImage
+      ? {
+          backgroundImage: `url(${backgroundImage})`,
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'right bottom',
+          ...style,
+        }
+      : style;
+
+    return (
+      <header
+        ref={ref}
+        className={cn(
+          'relative flex min-h-[var(--page-header-height)] flex-col gap-4',
+          className,
+        )}
+        style={bgStyle}
+        {...props}
+      >
+        {children}
+      </header>
+    );
+  },
+);
+PageHeader.displayName = 'PageHeader';
+
+// ─── PageHeaderNav: 导航层(面包屑 + 右侧链接)──────────────────────────────
+
+const PageHeaderNav = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'flex min-h-5 items-center justify-between text-xs',
+      className,
+    )}
+    {...props}
+  />
+));
+PageHeaderNav.displayName = 'PageHeaderNav';
+
+// ─── PageHeaderContent: 主内容区(左右双列)─────────────────────────────────
+
+const PageHeaderContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'flex flex-wrap items-start justify-between gap-4',
+      className,
+    )}
+    {...props}
+  />
+));
+PageHeaderContent.displayName = 'PageHeaderContent';
+
+// ─── PageHeaderHeading: 标题行 ───────────────────────────────────────────────
+
+export interface PageHeaderHeadingProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * 前置返回按钮。为 `true` 时渲染 `ArrowLeft` 图标按钮,点击触发 `onBack`。
+   * @default false
+   */
+  goBack?: boolean;
+  /** 返回按钮点击回调。 */
+  onBack?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const PageHeaderHeading = React.forwardRef<
+  HTMLDivElement,
+  PageHeaderHeadingProps
+>(({ className, goBack = false, onBack, children, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center gap-3', className)}
+    {...props}
+  >
+    {goBack ? (
+      <button
+        type="button"
+        onClick={onBack}
+        aria-label="返回"
+        className={cn(
+          'inline-flex size-8 shrink-0 cursor-pointer items-center justify-center text-muted-foreground transition-colors',
+          'hover:text-foreground',
+          'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+        )}
+      >
+        <ArrowLeft className="size-5" aria-hidden="true" />
+      </button>
+    ) : null}
+    {children}
+  </div>
+));
+PageHeaderHeading.displayName = 'PageHeaderHeading';
+
+// ─── PageHeaderDescription: 描述文字(<p>) ──────────────────────────────────
+
+const PageHeaderDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('my-2 text-xs text-muted-foreground', className)}
+    {...props}
+  />
+));
+PageHeaderDescription.displayName = 'PageHeaderDescription';
+
+// ─── PageHeaderActions: 操作按钮区 ───────────────────────────────────────────
+
+const PageHeaderActions = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'flex shrink-0 items-center gap-[var(--button-gap)]',
+      className,
+    )}
+    {...props}
+  />
+));
+PageHeaderActions.displayName = 'PageHeaderActions';
+
+// ─── PageHeaderData / PageHeaderDataItem: 数据概览 ───────────────────────────
+
+const PageHeaderData = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex shrink-0 items-end gap-6', className)}
+    {...props}
+  />
+));
+PageHeaderData.displayName = 'PageHeaderData';
+
+const dataItemColor = {
+  default: 'text-foreground',
+  primary: 'text-primary',
+  success: 'text-success',
+  warning: 'text-warning',
+  destructive: 'text-destructive',
+} as const;
+
+export interface PageHeaderDataItemProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** 数据标签(上行,muted 小字)。 */
+  label: React.ReactNode;
+  /**
+   * 值的语义色(调色板) — 对齐 [ADR 0021](../../../../../docs/adr/0021-semantic-color-api-unification.md)。
+   *
+   * 填充背景类场景 default 本身为中性色,省略 muted 档;信息色用 `primary`,不收 `info`。
+   * @default "default"
+   */
+  color?: keyof typeof dataItemColor;
+}
+
+const PageHeaderDataItem = React.forwardRef<
+  HTMLDivElement,
+  PageHeaderDataItemProps
+>(({ className, label, color = 'default', children, ...props }, ref) => (
+  <div ref={ref} className={cn('flex flex-col', className)} {...props}>
+    <span className="text-xs text-muted-foreground">{label}</span>
+    <span
+      className={cn(
+        'text-base font-semibold tabular-nums',
+        dataItemColor[color],
+      )}
+    >
+      {children}
+    </span>
+  </div>
+));
+PageHeaderDataItem.displayName = 'PageHeaderDataItem';
+
+// ─── PageHeaderFooter: 底部详情 ──────────────────────────────────────────────
+
+const PageHeaderFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('mt-4 border-t border-t-border pt-4', className)}
+    {...props}
+  />
+));
+PageHeaderFooter.displayName = 'PageHeaderFooter';
+
+// ─── PageHeaderSkeleton: 骨架屏 ──────────────────────────────────────────────
+
+export interface PageHeaderSkeletonProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * 显示面包屑骨架行。
+   * @default true
+   */
+  showNav?: boolean;
+  /**
+   * 显示描述骨架行。
+   * @default true
+   */
+  showDescription?: boolean;
+  /**
+   * 显示底部详情骨架(3 列 × 2 行网格)。
+   * @default false
+   */
+  showFooter?: boolean;
+}
+
+const PageHeaderSkeleton = React.forwardRef<
+  HTMLDivElement,
+  PageHeaderSkeletonProps
+>(
+  (
+    {
+      className,
+      showNav = true,
+      showDescription = true,
+      showFooter = false,
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col gap-4', className)}
+      aria-busy="true"
+      {...props}
+    >
+      {showNav ? <Skeleton shape="line" className="h-3 w-48" /> : null}
+      <div className="flex items-center gap-3">
+        <Skeleton shape="rect" className="size-8 rounded-md" />
+        <Skeleton shape="line" className="h-6 w-80" />
+      </div>
+      {showDescription ? <Skeleton shape="line" className="h-4 w-96" /> : null}
+      {showFooter ? <SkeletonParagraph rows={2} className="pt-3" /> : null}
+    </div>
+  ),
+);
+PageHeaderSkeleton.displayName = 'PageHeaderSkeleton';
+
+// ─── exports ─────────────────────────────────────────────────────────────────
+
+export {
+  PageHeader,
+  PageHeaderNav,
+  PageHeaderContent,
+  PageHeaderHeading,
+  PageHeaderDescription,
+  PageHeaderActions,
+  PageHeaderData,
+  PageHeaderDataItem,
+  PageHeaderFooter,
+  PageHeaderSkeleton,
+};

package/src/components/page-shell/page-shell.meta.md

@@ -0,0 +1,116 @@
+---
+id: page-shell
+name: PageShell
+displayName: 页面壳
+type: component
+category: layout
+since: 0.1.0
+package: '@teamix-evo/ui'
+---
+
+# PageShell 页面壳
+
+页面级三明治壳 — `header` + `sidebar` + `children` 三 slot 任意组合,覆盖"全屏 / 仅顶部 / 仅左导 / 顶部+左导" 四种页面形态。`background` prop 走 shadcn 语义槽枚举(`background` / `muted` / `card` / `sidebar` / `accent`),亮暗模式由 [`@teamix-evo/tokens`](../../../../tokens/) 文件自动管。
+
+PageShell 传 `sidebar` 时内部用 [`<SidebarProvider embedded>`](../sidebar/sidebar.meta.md) —— ui Sidebar 的嵌入模式,sidebar-container 自动走 `position: relative + h-full`(替代默认 `fixed inset-y-0 h-svh`),与 header 共存而不被撑到 viewport 顶端。消费方不再需要手写 `!relative !top-0 !h-full` hack。
+
+## When to use
+
+- **应用主页面骨架** — 控制台 / dashboard / 管理后台等所有需要 sidebar/topbar 的页面
+- **无 sidebar 全屏页** — 登录页 / 错误页 / 落地页(不传 `sidebar` 即可)
+- **opentrek 风格无吊顶 layout** — 仅传 `sidebar`,主区背景设 `muted`
+- **uni-manager 风格吊顶+左导** — 同时传 `header={<UmTopbar />}` 与 `sidebar={<Sidebar />}`
+
+## When NOT to use
+
+- **页面内子布局**(分屏 / 多面板)→ 直接用 flex / grid,PageShell 是页面级唯一壳
+- **Modal / Drawer 内的布局** → 这些组件自带容器,不要再叠 PageShell
+- **路由级布局共享** — 这是 React Router / Next.js layout 层职责,PageShell 是渲染层
+
+## Props
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `header` | `ReactNode` | – | – | 顶部条 slot — 通常是 UmTopbar / 自建 navbar。不传则不渲染顶部。 |
+| `sidebar` | `ReactNode` | – | – | 左侧 slot — 通常是 ui `<Sidebar>` 或基于它组合的整装件(如 OpSidebar)。不传则不渲染 sidebar 与 SidebarProvider。 |
+| `background` | `'background' \| 'muted' \| 'card' \| 'sidebar' \| 'accent'` | `'background'` | – | 主区背景 — 走 shadcn 语义槽枚举,亮暗模式由 token 文件自动切换。 |
+| `sidebarWidth` | `string` | `'14rem'` | – | sidebar 宽度 — 透传给 SidebarProvider 的 `--sidebar-width` CSS 变量。仅在传 `sidebar` 时生效。 |
+<!-- auto:props:end -->
+
+## 依赖
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具 |
+| `sidebar` | component | shadcn Sidebar 25 primitives |
+<!-- auto:deps:end -->
+
+## AI 生成纪律
+
+### 硬约束
+
+- **不传 `sidebar` 时不要在 children 内调用 `useSidebar()`** — PageShell 不传 sidebar 即不渲染 SidebarProvider,无 sidebar context
+- **`background` 必须用枚举值,不要传 raw className** — 想要其他背景请扩 `PageShellBackground` 枚举或在 children 内自加 wrapper
+- **不要在 PageShell 外再包 `SidebarProvider`** — PageShell 传 sidebar 时自带,重复包会破坏 cookie 持久化与 Cmd+B 快捷键
+- **sidebar slot 传 ui `<Sidebar>` 时不需要再加 `className="!relative ..."`** — PageShell 已注入 scoped CSS 覆盖
+
+### 推荐范式
+
+- 全屏:`<PageShell><LoginForm /></PageShell>`
+- opentrek 无吊顶:`<PageShell background="muted" sidebar={<OpSidebar />}><OpPageContainer>...</OpPageContainer></PageShell>`
+- uni-manager 吊顶+左导:`<PageShell header={<UmTopbar ... />} sidebar={<Sidebar>...</Sidebar>}><UmPageContainer>...</UmPageContainer></PageShell>`
+
+### 反例
+
+- ❌ 在 PageShell 外手动包 `<SidebarProvider>` — 重复 provider
+- ❌ `background="#f7f7f7"` 传颜色值 — 必须用枚举,违反 token discipline
+- ❌ 不传 `sidebar` 但 children 内用 `useSidebar()` — 报错"must be used within a SidebarProvider"
+
+## Examples
+
+```tsx
+import { PageShell } from '@/components/page-shell/page-shell';
+import { Sidebar, SidebarContent, SidebarMenu, ... } from '@/components/sidebar/sidebar';
+
+// 全屏单区 — 登录页
+<PageShell>
+  <LoginForm />
+</PageShell>
+
+// 仅顶部 — 简单页面
+<PageShell header={<Navbar />}>
+  <main>...</main>
+</PageShell>
+
+// 仅 sidebar — opentrek 风格(灰底)
+<PageShell background="muted" sidebar={<OpSidebar />}>
+  <OpPageContainer header={...}>...</OpPageContainer>
+</PageShell>
+
+// 完整三明治 — uni-manager 风格(白底)
+<PageShell
+  header={<UmTopbar brand={...} menus={...} ... />}
+  sidebar={<Sidebar collapsible="icon">...</Sidebar>}
+  sidebarWidth="14rem"
+>
+  <UmPageContainer header={<PageHeader>...</PageHeader>}>
+    <DataTable ... />
+  </UmPageContainer>
+</PageShell>
+```
+
+## 实现细节
+
+PageShell 传 `sidebar` 时,内部用 `<SidebarProvider embedded ...>` 启用 ui Sidebar 的嵌入模式。该模式下 [Sidebar](../sidebar/sidebar.meta.md) 的 `sidebar-container` 自动从默认 `fixed inset-y-0 h-svh` 切到 `relative h-full`,让 sidebar 跟 header 在同一布局流里垂直对齐 —— 完全声明式,无 scoped CSS、无 `!important` 覆盖。
+
+`embedded` 是 ui SidebarProvider 的原生 prop(默认 `false` 保持 shadcn 全屏行为),由 context 透传给所有下游 `<Sidebar>` 自动响应。
+
+## 关联
+
+- 范本组件:[Sidebar](../sidebar/sidebar.meta.md) — PageShell 内嵌的 SidebarProvider / SidebarInset 来自这里
+- 关联组件:[PageHeader](../page-header/page-header.meta.md) — 页面内 PageContainer 的 header slot 首选
+- 关联 ADR:[ADR 0005](../../../../../docs/adr/0005-ui-no-variant.md) — ui 不感知 variant,具体页面壳由 biz-ui 的 OpPageContainer / UmPageContainer 在 PageShell 内拼装

package/src/components/page-shell/page-shell.stories.tsx

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Bell, Home, Inbox, Settings, Users } from 'lucide-react';
+
+import { PageShell } from './page-shell';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarTrigger,
+} from '@/components/sidebar/sidebar';
+import { Button } from '@/components/button/button';
+
+const meta: Meta<typeof PageShell> = {
+  title: '布局 · Layout/PageShell',
+  component: PageShell,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'PageShell — 页面三明治壳。`header` + `sidebar` + `children` 三 slot 任意组合;`background` prop 走 shadcn 语义槽枚举(`background` / `muted` / `card` / `sidebar` / `accent`),亮暗模式由 token 文件自动管。内部为传入的 ui `<Sidebar>` 注入 scoped CSS 覆盖默认 `position: fixed`,让 sidebar 跟 header 共存而不被撑到 viewport 顶端。',
+      },
+    },
+  },
+  argTypes: {
+    background: {
+      control: 'inline-radio',
+      options: ['background', 'muted', 'card', 'sidebar', 'accent'],
+    },
+    sidebarWidth: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PageShell>;
+
+// ─── 共享 demo 内容 ──────────────────────────────────────────────────────
+
+function DemoHeader() {
+  return (
+    <header className="flex h-14 items-center justify-between border-b border-border bg-background px-6">
+      <span className="text-sm font-semibold">TopBar</span>
+      <Button variant="ghost" size="sm">
+        <Bell className="size-4" /> 通知
+      </Button>
+    </header>
+  );
+}
+
+function DemoSidebar() {
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <div className="flex items-center justify-between px-2 py-2">
+          <span className="text-sm font-semibold group-data-[collapsible=icon]:hidden">
+            Logo
+          </span>
+          <SidebarTrigger />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarMenu>
+            {[
+              { id: 'home', title: '首页', icon: Home },
+              { id: 'inbox', title: '收件箱', icon: Inbox },
+              { id: 'team', title: '团队', icon: Users },
+              { id: 'settings', title: '设置', icon: Settings },
+            ].map((it) => (
+              <SidebarMenuItem key={it.id}>
+                <SidebarMenuButton tooltip={it.title}>
+                  <it.icon />
+                  <span>{it.title}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}
+
+function DemoMain({ label = '主区内容' }: { label?: string }) {
+  return (
+    <div className="px-6 py-4">
+      <h1 className="text-2xl font-semibold text-foreground">{label}</h1>
+      <p className="mt-2 text-sm text-muted-foreground">
+        PageShell 提供布局壳,具体内容由 PageContainer + 业务组件填充。
+      </p>
+    </div>
+  );
+}
+
+// ─── Stories ─────────────────────────────────────────────────────────────
+
+/**
+ * Fullscreen — 不传 `header` 与 `sidebar`,只渲染 children。适合登录页 / 错误页 / 落地页。
+ */
+export const Fullscreen: Story = {
+  args: { background: 'background' },
+  render: (args) => (
+    <PageShell {...args}>
+      <DemoMain label="全屏单区" />
+    </PageShell>
+  ),
+};
+
+/**
+ * WithHeader — 仅传 `header`,顶部条 + 全宽主区。
+ */
+export const WithHeader: Story = {
+  args: { background: 'background' },
+  render: (args) => (
+    <PageShell {...args} header={<DemoHeader />}>
+      <DemoMain label="顶部 + 全宽主区" />
+    </PageShell>
+  ),
+};
+
+/**
+ * WithSidebar — 仅传 `sidebar`,左导 + 主区。无吊顶布局(opentrek 风格,主区背景常用 `muted`)。
+ */
+export const WithSidebar: Story = {
+  args: { background: 'muted' },
+  render: (args) => (
+    <PageShell {...args} sidebar={<DemoSidebar />}>
+      <DemoMain label="左导 + 主区(muted 背景)" />
+    </PageShell>
+  ),
+};
+
+/**
+ * Complete — header + sidebar + children 完整三明治。切 controls 看不同 `background`。
+ */
+export const Complete: Story = {
+  args: { background: 'background' },
+  render: (args) => (
+    <PageShell {...args} header={<DemoHeader />} sidebar={<DemoSidebar />}>
+      <DemoMain label="吊顶 + 左导 + 主区" />
+    </PageShell>
+  ),
+};

package/src/components/page-shell/page-shell.tsx

@@ -0,0 +1,115 @@
+/**
+ * PageShell — 页面三明治壳(layout-level composed component)
+ *
+ * 用 shadcn Sidebar primitives 组合一个"顶部 header(可选) + 左侧 sidebar(可选) + 主区"
+ * 的页面骨架。三个 slot 都可空,组合出四种页面形态:
+ *
+ *   1. 不传 header & sidebar         → 全屏单区(登录页 / 错误页)
+ *   2. 仅 header                     → 顶部条 + 全宽主区
+ *   3. 仅 sidebar                    → 左导 + 主区(opentrek 那种无吊顶 layout)
+ *   4. header + sidebar              → 吊顶 + 左导 + 主区(uni-manager 那种)
+ *
+ * 主区背景由 `background` prop 切换 — 用 shadcn 语义槽枚举,亮暗由 token 文件自动管。
+ *
+ * 传 `sidebar` 时,PageShell 内部用 `<SidebarProvider embedded>` —— ui Sidebar 的嵌入模式,
+ * sidebar-container 自动走 `position: relative + h-full`(替代默认 `fixed inset-y-0 h-svh`),
+ * 与 header 共存而不被撑到 viewport 顶端。
+ */
+import * as React from 'react';
+
+import { cn } from '@/utils/cn';
+import { SidebarInset, SidebarProvider } from '@/components/sidebar/sidebar';
+
+export type PageShellBackground =
+  | 'background'
+  | 'muted'
+  | 'card'
+  | 'sidebar'
+  | 'accent';
+
+const BG_CLASS: Record<PageShellBackground, string> = {
+  background: 'bg-background',
+  muted: 'bg-muted',
+  card: 'bg-card',
+  sidebar: 'bg-sidebar',
+  accent: 'bg-accent',
+};
+
+export interface PageShellProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** 顶部条 slot — 通常是 UmTopbar / 自建 navbar。不传则不渲染顶部。 */
+  header?: React.ReactNode;
+  /** 左侧 slot — 通常是 ui `<Sidebar>` 或基于它组合的整装件(如 OpSidebar)。不传则不渲染 sidebar 与 SidebarProvider。 */
+  sidebar?: React.ReactNode;
+  /** 主区内容。 */
+  children: React.ReactNode;
+  /**
+   * 主区背景 — 走 shadcn 语义槽枚举,亮暗模式由 token 文件自动切换。
+   * @default "background"
+   */
+  background?: PageShellBackground;
+  /**
+   * sidebar 宽度 — 透传给 SidebarProvider 的 `--sidebar-width` CSS 变量。仅在传 `sidebar` 时生效。
+   * @default "14rem"
+   */
+  sidebarWidth?: string;
+}
+
+const PageShell = React.forwardRef<HTMLDivElement, PageShellProps>(
+  function PageShell(
+    {
+      header,
+      sidebar,
+      children,
+      background = 'background',
+      sidebarWidth = '14rem',
+      className,
+      style,
+      ...rest
+    },
+    ref,
+  ) {
+    const bgClass = BG_CLASS[background];
+
+    if (!sidebar) {
+      return (
+        <div
+          ref={ref}
+          className={cn('flex min-h-svh w-full flex-col', className)}
+          style={style}
+          {...rest}
+        >
+          {header}
+          <main className={cn('flex-1 overflow-y-auto', bgClass)}>
+            {children}
+          </main>
+        </div>
+      );
+    }
+
+    return (
+      <SidebarProvider
+        ref={ref}
+        embedded
+        className={cn('!flex-col', className)}
+        style={
+          {
+            '--sidebar-width': sidebarWidth,
+            ...style,
+          } as React.CSSProperties
+        }
+        {...rest}
+      >
+        {header}
+        <div className="flex w-full flex-1 min-h-0">
+          {sidebar}
+          <SidebarInset className={cn('!min-h-0 overflow-y-auto', bgClass)}>
+            {children}
+          </SidebarInset>
+        </div>
+      </SidebarProvider>
+    );
+  },
+);
+PageShell.displayName = 'PageShell';
+
+export { PageShell };