@orbit-work/ui 0.1.0

package/package.json

@@ -0,0 +1,119 @@
+{
+  "name": "@orbit-work/ui",
+  "version": "0.1.0",
+  "description": "Orbitwork Design System — React components with light/dark theme support.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./browser-annotation-popup": {
+      "types": "./dist/browser-annotation-popup.d.ts",
+      "import": "./dist/browser-annotation-popup.js",
+      "require": "./dist/browser-annotation-popup.cjs"
+    },
+    "./appearance": {
+      "types": "./dist/appearance.d.ts",
+      "import": "./dist/appearance.js",
+      "require": "./dist/appearance.cjs"
+    },
+    "./about-window": {
+      "types": "./dist/about-window.d.ts",
+      "import": "./dist/about-window.js",
+      "require": "./dist/about-window.cjs"
+    },
+    "./styles/orbitwork.css": "./dist/orbitwork.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "dev": "tsup --watch",
+    "lint": "biome lint src/",
+    "lint:fix": "biome lint --write src/",
+    "format": "biome format --write src/",
+    "check": "biome check src/",
+    "test": "node --test \"src/**/*.test.mjs\" \"scripts/*.test.mjs\"",
+    "typecheck": "tsc --noEmit",
+    "storybook": "npm run generate:tokens && storybook dev -p 6006",
+    "build-storybook": "npm run generate:tokens && storybook build",
+    "test-storybook": "test-storybook --url http://127.0.0.1:6006",
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "new-component": "node scripts/new-component.mjs",
+    "check:stories": "node scripts/check-stories.mjs",
+    "check:stories:all": "node scripts/check-stories.mjs --all",
+    "check:ds2": "node scripts/check-ds2.mjs",
+    "check:utilities": "node scripts/check-missing-utilities.mjs",
+    "generate:tokens": "node scripts/generate-tokens-css.mjs",
+    "test:ds2": "node --test \"scripts/*.test.mjs\""
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "docx-preview": "^0.4.0",
+    "exceljs": "^4.4.0",
+    "jszip": "^3.10.1",
+    "pptxtojson": "^2.1.0",
+    "rc-tree": "^5.13.1",
+    "shiki": "^1.23.1",
+    "tailwind-merge": "^3.6.0",
+    "x-data-spreadsheet": "1.1.9"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.3.0",
+    "@storybook/addon-a11y": "^10.5.10",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/addon-themes": "^10.5.10",
+    "@storybook/addon-vitest": "^10.5.10",
+    "@storybook/instrumenter": "^8.6.14",
+    "@storybook/react-vite": "^10.5.10",
+    "@storybook/test": "^8.6.15",
+    "@storybook/test-runner": "^0.24.4",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/user-event": "^14.6.6",
+    "@types/jest-image-snapshot": "^6.4.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitest/browser-playwright": "5.0.0",
+    "aria-query": "^5.3.2",
+    "chromatic": "^18.6.1",
+    "esbuild": "^0.27.7",
+    "jest-image-snapshot": "^6.5.2",
+    "lz-string": "^1.5.0",
+    "playwright": "1.62.1",
+    "postcss": "^8.5.26",
+    "postcss-import": "^17.0.0",
+    "pretty-format": "^30.5.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^10.5.10",
+    "tailwindcss": "^4.3.3",
+    "tsup": "^8.0.0",
+    "typescript": "^5.6.3",
+    "vitest": "5.0.0"
+  },
+  "peerDependencies": {
+    "echarts": ">=5.0.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "echarts": {
+      "optional": true
+    }
+  }
+}

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

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

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

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

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