@teamix-evo/ui 0.4.0 → 0.5.0

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

@@ -1,284 +0,0 @@
-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

@@ -1,116 +0,0 @@
----
-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

@@ -1,149 +0,0 @@
-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

@@ -1,115 +0,0 @@
-/**
- * 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 };