@orbit-work/ui 0.1.1 → 0.1.2

package/src/components/Layout/AppLayout/AppLayout.stories.tsx

@@ -1,246 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { TitleBar } from "../../composite/TitleBar"
-import { AppLayout } from "./index"
-
-const meta = {
-  title: "Layout/AppLayout",
-  component: AppLayout,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof AppLayout>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    children: <div style={{ padding: 24 }}>主内容区</div>,
-  },
-}
-
-export const WithHeader: Story = {
-  args: {
-    header: (
-      <div style={{ padding: 16, background: "var(--ow-surface)", borderBottom: "1px solid var(--ow-border)" }}>
-        Header
-      </div>
-    ),
-    children: <div style={{ padding: 24 }}>主内容区</div>,
-  },
-}
-
-export const WithSidebar: Story = {
-  args: {
-    sidebar: (
-      <div
-        style={{
-          width: 240,
-          padding: 16,
-          background: "var(--ow-surface)",
-          borderRight: "1px solid var(--ow-border)",
-        }}
-      >
-        Sidebar
-      </div>
-    ),
-    children: <div style={{ padding: 24 }}>主内容区</div>,
-  },
-}
-
-export const WithFooter: Story = {
-  args: {
-    children: <div style={{ padding: 24 }}>主内容区</div>,
-    footer: (
-      <div style={{ padding: 16, background: "var(--ow-surface)", borderTop: "1px solid var(--ow-border)" }}>
-        Footer
-      </div>
-    ),
-  },
-}
-
-export const Complete: Story = {
-  args: {
-    header: (
-      <div style={{ padding: 16, background: "var(--ow-surface)", borderBottom: "1px solid var(--ow-border)" }}>
-        Header
-      </div>
-    ),
-    sidebar: (
-      <div
-        style={{
-          width: 240,
-          padding: 16,
-          background: "var(--ow-surface)",
-          borderRight: "1px solid var(--ow-border)",
-        }}
-      >
-        Sidebar
-      </div>
-    ),
-    children: <div style={{ padding: 24 }}>主内容区</div>,
-    footer: (
-      <div style={{ padding: 16, background: "var(--ow-surface)", borderTop: "1px solid var(--ow-border)" }}>
-        Footer
-      </div>
-    ),
-  },
-}
-
-export const Contained: Story = {
-  args: {
-    contained: true,
-    header: (
-      <div style={{ padding: 16, background: "var(--ow-surface)", borderBottom: "1px solid var(--ow-border)" }}>
-        Header
-      </div>
-    ),
-    children: <div style={{ padding: 24 }}>受限布局（高度 100%）</div>,
-  },
-  render: (args) => (
-    <div style={{ height: 400, border: "2px dashed var(--ow-border-strong)" }}>
-      <AppLayout {...args} />
-    </div>
-  ),
-}
-
-export const NavigationLayout: Story = {
-  args: {
-    header: (
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 16,
-          padding: "12px 16px",
-          background: "var(--ow-surface)",
-          borderBottom: "1px solid var(--ow-border)",
-        }}
-      >
-        <strong>App Name</strong>
-        <nav style={{ display: "flex", gap: 12 }}>
-          <a href="#" style={{ color: "var(--ow-text-2)" }}>
-            Dashboard
-          </a>
-          <a href="#" style={{ color: "var(--ow-text-2)" }}>
-            Projects
-          </a>
-          <a href="#" style={{ color: "var(--ow-text-2)" }}>
-            Settings
-          </a>
-        </nav>
-      </div>
-    ),
-    sidebar: (
-      <div
-        style={{
-          width: 200,
-          padding: 16,
-          background: "var(--ow-surface)",
-          borderRight: "1px solid var(--ow-border)",
-        }}
-      >
-        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-          <div style={{ padding: 8, background: "var(--ow-surface-2)", borderRadius: 4 }}>Overview</div>
-          <div style={{ padding: 8 }}>Tasks</div>
-          <div style={{ padding: 8 }}>Files</div>
-          <div style={{ padding: 8 }}>Settings</div>
-        </div>
-      </div>
-    ),
-    children: (
-      <div style={{ padding: 24 }}>
-        <h1>Dashboard</h1>
-        <p>主内容放在这里</p>
-      </div>
-    ),
-  },
-}
-
-const Panel = ({ children, label }: { children?: React.ReactNode; label: string }) => (
-  <div style={{ padding: 16, fontSize: 13, color: "var(--ow-text-2)" }}>
-    <div style={{ fontWeight: 500, color: "var(--ow-text)", marginBottom: 8 }}>{label}</div>
-    {children}
-  </div>
-)
-
-/** 三栏骨架：左 SidebarShell 宽度 · 中自适应 · 右详情栏（栏间只用 1px 边分隔）。 */
-export const ThreeColumn: Story = {
-  args: {
-    header: <TitleBar title="工作台" subtitle="三栏骨架" />,
-    sidebar: (
-      <div
-        style={{
-          width: "var(--ow-sidebar-w)",
-          background: "var(--ow-bg)",
-          borderRight: "1px solid var(--ow-border)",
-        }}
-      >
-        <Panel label="侧栏">导航项</Panel>
-      </div>
-    ),
-    aside: <Panel label="详情栏">选中项的属性</Panel>,
-    children: <Panel label="主内容">中栏是唯一自适应栏</Panel>,
-  },
-}
-
-/** 断点：默认 lg（1024）以下整栏收起右栏；把浏览器窗口拉窄可见。 */
-export const ThreeColumnResponsive: Story = {
-  args: {
-    contained: true,
-    header: <TitleBar title="断点演示" subtitle="窄于 md 时收起右栏" />,
-    hideAsideBelow: "md",
-    aside: <Panel label="详情栏">窄屏收起</Panel>,
-    children: <Panel label="主内容">把容器拉窄看右栏收起</Panel>,
-  },
-  render: (args) => (
-    <div style={{ height: 320, border: "1px solid var(--ow-border)", resize: "horizontal", overflow: "hidden" }}>
-      <AppLayout {...args} />
-    </div>
-  ),
-}
-
-/** 右栏永不收起（hideAsideBelow="none"），用于宽屏专用窗口。 */
-export const ThreeColumnAlwaysAside: Story = {
-  args: {
-    contained: true,
-    hideAsideBelow: "none",
-    asideWidth: 260,
-    aside: <Panel label="详情栏">常驻</Panel>,
-    children: <Panel label="主内容">常驻右栏</Panel>,
-  },
-  render: (args) => (
-    <div style={{ height: 280, border: "1px solid var(--ow-border)" }}>
-      <AppLayout {...args} />
-    </div>
-  ),
-}
-
-/** 双主题对照。 */
-export const ThemeMatrix: Story = {
-  args: { children: null },
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 16 }}>
-      {(["light", "dark"] as const).map((theme) => (
-        <div key={theme} data-theme={theme} style={{ background: "var(--ow-bg)", padding: 12 }}>
-          <div style={{ height: 220, border: "1px solid var(--ow-border)", overflow: "hidden" }}>
-            <AppLayout
-              contained
-              hideAsideBelow="none"
-              header={<TitleBar title="工作台" />}
-              sidebar={
-                <div style={{ width: 180, borderRight: "1px solid var(--ow-border)", background: "var(--ow-bg)" }}>
-                  <Panel label="侧栏" />
-                </div>
-              }
-              aside={<Panel label="详情栏" />}
-            >
-              <Panel label="主内容" />
-            </AppLayout>
-          </div>
-        </div>
-      ))}
-    </div>
-  ),
-}

package/src/components/Layout/AppLayout/AppLayoutSource.test.mjs

@@ -1,37 +0,0 @@
-import assert from "node:assert/strict"
-import { readFile } from "node:fs/promises"
-import test from "node:test"
-
-const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
-
-test("三栏骨架：sidebar / main / aside 都有 data-slot 锚点", () => {
-  assert.match(source, /data-slot="app-layout"/)
-  assert.match(source, /data-slot="app-layout-main"/)
-  assert.match(source, /data-slot="app-layout-aside"/)
-  assert.match(source, /data-slot="app-layout-header"/)
-  assert.match(source, /data-slot="app-layout-footer"/)
-})
-
-test("分区滚动：外壳不滚，中栏/右栏各自滚，min-w-0 防溢出", () => {
-  assert.match(source, /appLayoutBodyVariants = cva\("flex flex-1 min-h-0 overflow-hidden"\)/)
-  assert.match(source, /appLayoutMainVariants = cva\("flex-1 min-w-0 overflow-auto/)
-  assert.match(source, /min-h-0 overflow-auto/)
-})
-
-test("右栏断点可配：默认 lg 以下收起", () => {
-  assert.match(source, /hideAsideBelow = "lg"/)
-  assert.match(source, /"max-sm:hidden"/)
-  assert.match(source, /"max-md:hidden"/)
-  assert.match(source, /"max-lg:hidden"/)
-})
-
-test("栏间只用 1px --ow-border 分隔，贴地无影（§5）", () => {
-  assert.match(source, /border-l border-\[color:var\(--ow-border\)\] shadow-none/)
-  assert.doesNotMatch(source, /shadow-\[var\(--ow-shadow/)
-  assert.doesNotMatch(source, /gradient/)
-})
-
-test("中性件：禁信标/荧黄（R3）；无 Tailwind 歧义任意值", () => {
-  assert.doesNotMatch(source, /--ow-yellow|--ow-beacon|--ow-accent-dot/)
-  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
-})

package/src/components/Layout/AppLayout/index.tsx

@@ -1,122 +0,0 @@
-import { cva } from "class-variance-authority"
-import type { ReactNode } from "react"
-import { cn } from "../../../lib/utils"
-
-const appLayoutVariants = cva("flex flex-col w-full", {
-  variants: {
-    contained: {
-      true: "h-full",
-      false: "h-screen",
-    },
-  },
-  defaultVariants: {
-    contained: false,
-  },
-})
-
-const appLayoutHeaderVariants = cva("flex-shrink-0")
-const appLayoutBodyVariants = cva("flex flex-1 min-h-0 overflow-hidden")
-const appLayoutMainVariants = cva("flex-1 min-w-0 overflow-auto flex flex-col p-3")
-const appLayoutFooterVariants = cva("flex-shrink-0")
-
-/* 右栏（详情/属性栏）：贴地立面 = 0 影 + 1px 左边线（§5）；窄屏按断点整栏收起。 */
-const appLayoutAsideVariants = cva(
-  "flex-shrink-0 min-h-0 overflow-auto border-l border-[color:var(--ow-border)] shadow-none",
-  {
-    variants: {
-      hideBelow: {
-        none: "",
-        sm: "max-sm:hidden",
-        md: "max-md:hidden",
-        lg: "max-lg:hidden",
-      },
-    },
-    defaultVariants: { hideBelow: "lg" },
-  },
-)
-
-export type AppLayoutAsideBreakpoint = "none" | "sm" | "md" | "lg"
-
-export interface AppLayoutProps {
-  /**
-   * 顶部通栏区域＝窗口带（`composite/TitleBar` / `WindowBand`，48 高、与地同色、无线）。
-   *
-   * **带只属 windows**（R2 · Terry 2026-09-03 第 1 条）：那边 `frame:false`、三键必须自绘，
-   * 折叠钮跟着住在带里；mac/linux/web 缺省**无带**，折叠钮住进侧栏顶行
-   * （`Layout/SidebarShell` 的 `data-slot="sidebar-toprow"`）。所以本槽是真可选：
-   * `DesktopWorkbenchShell` 只在 `platform === "windows"` 且非 `contained` 时才自动补带。
-   */
-  header?: ReactNode
-  /** 底部区域 */
-  footer?: ReactNode
-  /** 左栏：SidebarShell 元素（自带宽度与折叠逻辑，布局不代管） */
-  sidebar?: ReactNode
-  /** 右栏：详情 / 属性面板（三栏骨架的第三栏）；窄屏按 hideAsideBelow 收起 */
-  aside?: ReactNode
-  /** 右栏宽度，默认 320 */
-  asideWidth?: number | string
-  /** 低于该断点时收起右栏，默认 lg（1024）；"none" 表示永不收起 */
-  hideAsideBelow?: AppLayoutAsideBreakpoint
-  /** 主内容 */
-  children: ReactNode
-  /** 填满父容器而非整个窗口（用于文档预览 / 嵌入场景） */
-  contained?: boolean
-  /** 额外 className */
-  className?: string
-}
-
-/**
- * AppLayout — 应用级布局骨架（DS 2.0 模式层）
- *
- * 三栏骨架：`sidebar`（左，SidebarShell 自带 240 宽与折叠）｜ `children`（中，唯一自适应栏）｜
- * `aside`（右，详情 / 属性面板）。上下另有 `header` / `footer` 通栏。
- *
- * - `header` 即窗口带：R2 起只有 windows 缺省有带（折叠钮在带里），mac/linux/web 与
- *   `contained` 嵌入场景一律无带——那些平台的折叠钮住在侧栏顶行。
- *
- * - 分区滚动：外壳不滚（`min-h-0` + `overflow-hidden`），中栏与右栏各自滚。
- * - 断点：窄屏（默认 < lg）整栏收起右栏；左栏收起由 SidebarShell 的 collapsed 受控。
- * - 立面按 §5：栏间只用 1px `--ow-border` 分隔，不加影不加渐变。
- * - 默认占满窗口（h-screen）；`contained` 时填满父容器（h-full），适合嵌入定高容器。
- */
-export function AppLayout({
-  header,
-  footer,
-  sidebar,
-  aside,
-  asideWidth = 320,
-  hideAsideBelow = "lg",
-  children,
-  contained = false,
-  className = "",
-}: AppLayoutProps) {
-  return (
-    <div data-slot="app-layout" className={cn(appLayoutVariants({ contained }), className)}>
-      {header && (
-        <div data-slot="app-layout-header" className={appLayoutHeaderVariants()}>
-          {header}
-        </div>
-      )}
-      <div data-slot="app-layout-body" className={appLayoutBodyVariants()}>
-        {sidebar}
-        <main data-slot="app-layout-main" className={appLayoutMainVariants()}>
-          {children}
-        </main>
-        {aside && (
-          <aside
-            data-slot="app-layout-aside"
-            className={appLayoutAsideVariants({ hideBelow: hideAsideBelow })}
-            style={{ width: asideWidth, minWidth: asideWidth }}
-          >
-            {aside}
-          </aside>
-        )}
-      </div>
-      {footer && (
-        <div data-slot="app-layout-footer" className={appLayoutFooterVariants()}>
-          {footer}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/Layout/Sidebar/index.tsx

@@ -1,13 +0,0 @@
-"use client"
-
-import { SidebarShell, type SidebarShellProps } from "../SidebarShell"
-
-/**
- * @deprecated DS 2.0 起侧栏壳归口 `SidebarShell`（Layout/SidebarShell）。
- * 本文件是薄兼容导出，供包外（apps/desktop 等）渐进迁移；包内消费方已全部改名。
- * 批次⑤ 产品面收口后移除。
- */
-export const Sidebar = SidebarShell
-
-/** @deprecated 改用 `SidebarShellProps`。 */
-export type SidebarProps = SidebarShellProps