@orbit-work/ui 0.1.0

package/src/components/composite/WCardShell/WCardShell.stories.tsx

@@ -0,0 +1,228 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Settings } from "../Icons"
+import { WCardShell } from "./index"
+
+/**
+ * WCardShell 已降为 `Card`（Primitives/Card）的挂件配方：立面、槽位、状态全由 Card 提供，
+ * 这里只剩「拖拽把手头」这一层。新代码请直接用 Card。
+ */
+const meta = {
+  title: "Composite/WCardShell",
+  component: WCardShell,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof WCardShell>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {
+  args: {
+    title: "Card Title",
+    children: <div style={{ padding: 16 }}>Card content goes here</div>,
+  },
+}
+
+export const WithAddAction: Story = {
+  args: {
+    title: "Add Items",
+    actions: "add",
+    onAdd: () => console.log("add"),
+    children: <div style={{ padding: 16 }}>Click the plus icon to add items</div>,
+  },
+}
+
+export const WithEditAction: Story = {
+  args: {
+    title: "Edit Mode",
+    actions: "edit",
+    onEdit: () => console.log("edit"),
+    children: <div style={{ padding: 16 }}>Click the edit icon to modify content</div>,
+  },
+}
+
+export const WithCloseAction: Story = {
+  args: {
+    title: "Closable Card",
+    actions: "close",
+    onClose: () => console.log("close"),
+    children: <div style={{ padding: 16 }}>Click the close icon to dismiss</div>,
+  },
+}
+
+export const WithAddCloseActions: Story = {
+  args: {
+    title: "Multiple Actions",
+    actions: "addClose",
+    onAdd: () => console.log("add"),
+    onClose: () => console.log("close"),
+    children: <div style={{ padding: 16 }}>Both add and close actions available</div>,
+  },
+}
+
+export const WithCustomActions: Story = {
+  args: {
+    title: "Custom Actions",
+    actions: (
+      <>
+        <button type="button" style={{ padding: "4px 8px", fontSize: 12 }} onClick={() => console.log("custom 1")}>
+          <Settings />
+        </button>
+        <button type="button" style={{ padding: "4px 8px", fontSize: 12 }} onClick={() => console.log("custom 2")}>
+          Save
+        </button>
+      </>
+    ),
+    children: <div style={{ padding: 16 }}>Custom action buttons in header</div>,
+  },
+}
+
+/** 拖拽把手恒为中性三点：旧 dragColor 的红黄绿档已下线（R3 中性件不带彩色装饰）。 */
+export const NeutralDragHandle: Story = {
+  args: {
+    title: "中性拖拽把手",
+    children: <div style={{ padding: 16 }}>把手只有三个中性点，不再有红黄绿</div>,
+  },
+}
+
+export const ShortHeight: Story = {
+  args: {
+    title: "Short Card",
+    short: true,
+    children: <div style={{ padding: 16 }}>Compact card with reduced height</div>,
+  },
+}
+
+export const Draggable: Story = {
+  args: {
+    title: "Draggable Card",
+    draggable: true,
+    onDragStart: () => console.log("drag start"),
+    onDragOver: () => console.log("drag over"),
+    onDragEnd: () => console.log("drag end"),
+    children: <div style={{ padding: 16 }}>This card can be dragged</div>,
+  },
+}
+
+/** 兼容位：dragColor 仍可传但已无效，把手保持中性。 */
+export const DraggableLegacyDragColor: Story = {
+  args: {
+    title: "旧参数 dragColor（无效）",
+    draggable: true,
+    dragColor: true,
+    onDragStart: () => console.log("drag start"),
+    onDragEnd: () => console.log("drag end"),
+    children: <div style={{ padding: 16 }}>传了 dragColor 也不会变色</div>,
+  },
+}
+
+export const LongTitle: Story = {
+  args: {
+    title: "This is a very long card title that might overflow or wrap to multiple lines",
+    actions: "close",
+    onClose: () => console.log("close"),
+    children: <div style={{ padding: 16 }}>Card with long title text</div>,
+  },
+}
+
+export const RichContent: Story = {
+  args: {
+    title: "Rich Content Card",
+    actions: "edit",
+    onEdit: () => console.log("edit"),
+    children: (
+      <div style={{ padding: 16, fontSize: 14, lineHeight: 1.6 }}>
+        <h4 style={{ margin: "0 0 8px 0", fontSize: 14, fontWeight: 600 }}>Section Title</h4>
+        <p style={{ margin: "0 0 12px 0" }}>
+          This card contains rich formatted content with multiple paragraphs and sections.
+        </p>
+        <ul style={{ margin: 0, paddingLeft: 20 }}>
+          <li>Item one</li>
+          <li>Item two</li>
+          <li>Item three</li>
+        </ul>
+      </div>
+    ),
+  },
+}
+
+export const EmptyContent: Story = {
+  args: {
+    title: "Empty Card",
+    actions: "add",
+    onAdd: () => console.log("add"),
+    children: (
+      <div style={{ padding: 32, textAlign: "center", color: "var(--ow-text-3)", fontSize: 13 }}>No content yet</div>
+    ),
+  },
+}
+
+export const WithCustomClassName: Story = {
+  args: {
+    title: "Custom Styled",
+    className: "custom-card-class",
+    children: <div style={{ padding: 16 }}>Card with custom className</div>,
+  },
+}
+
+export const MultipleCards: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: 16, gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))" }}>
+      <WCardShell title="Card 1" actions="add" onAdd={() => console.log("add 1")}>
+        <div style={{ padding: 16 }}>First card content</div>
+      </WCardShell>
+      <WCardShell title="Card 2" actions="edit" onEdit={() => console.log("edit 2")}>
+        <div style={{ padding: 16 }}>Second card content</div>
+      </WCardShell>
+      <WCardShell title="Card 3" actions="close" onClose={() => console.log("close 3")}>
+        <div style={{ padding: 16 }}>Third card content</div>
+      </WCardShell>
+    </div>
+  ),
+}
+
+export const Dashboard: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: 16, gridTemplateColumns: "repeat(2, 1fr)" }}>
+      <WCardShell
+        title="Tasks"
+        actions="addClose"
+        onAdd={() => console.log("add task")}
+        onClose={() => console.log("close")}
+      >
+        <div style={{ padding: 16, fontSize: 14 }}>
+          <div style={{ marginBottom: 8 }}>✓ Complete project setup</div>
+          <div style={{ marginBottom: 8 }}>✓ Design components</div>
+          <div style={{ color: "var(--ow-text-3)" }}>○ Write documentation</div>
+        </div>
+      </WCardShell>
+      <WCardShell title="Metrics" actions="edit" onEdit={() => console.log("edit metrics")}>
+        <div
+          style={{ padding: 16, fontSize: 14, fontFamily: "var(--ow-font-mono)", fontVariantNumeric: "tabular-nums" }}
+        >
+          <div style={{ marginBottom: 8 }}>Total: 1,234</div>
+          <div style={{ marginBottom: 8 }}>Active: 567</div>
+          <div>Completed: 890</div>
+        </div>
+      </WCardShell>
+      <WCardShell title="Recent Activity" short>
+        <div style={{ padding: 16, fontSize: 13, color: "var(--ow-text-2)" }}>Updated 2 minutes ago</div>
+      </WCardShell>
+      <WCardShell title="Notifications" actions="close" short onClose={() => console.log("close notifications")}>
+        <div style={{ padding: 16, fontSize: 13 }}>3 new notifications</div>
+      </WCardShell>
+    </div>
+  ),
+}
+
+export const ChineseTitle: Story = {
+  args: {
+    title: "工作卡片",
+    actions: "addClose",
+    onAdd: () => console.log("添加"),
+    onClose: () => console.log("关闭"),
+    children: <div style={{ padding: 16 }}>中文内容展示</div>,
+  },
+}

package/src/components/composite/WCardShell/index.tsx

@@ -0,0 +1,101 @@
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+import { Button } from "../../primitives"
+import { Card } from "../../primitives/Card"
+import { Close, Edit, Plus } from "../Icons"
+
+export type WCardAction = "add" | "edit" | "close" | "addClose"
+
+export interface WCardShellProps {
+  title: string
+  actions?: WCardAction | ReactNode
+  /** @deprecated 无效：拖拽把手恒为中性三点（R3 中性件不带彩色装饰），红黄绿彩色档已下线。 */
+  dragColor?: boolean
+  children: ReactNode
+  className?: string
+  short?: boolean
+  draggable?: boolean
+  onDragStart?: () => void
+  onDragOver?: () => void
+  onDragEnd?: () => void
+  onAdd?: () => void
+  onEdit?: () => void
+  onClose?: () => void
+}
+
+function ActionButtons({
+  actions,
+  onAdd,
+  onEdit,
+  onClose,
+}: Pick<WCardShellProps, "actions" | "onAdd" | "onEdit" | "onClose">) {
+  if (typeof actions !== "string") return <>{actions}</>
+  return (
+    <>
+      {(actions === "add" || actions === "addClose") && (
+        <Button variant="ghost" size="sm" type="button" title="Add" icon={<Plus />} onClick={onAdd} />
+      )}
+      {actions === "edit" && (
+        <Button variant="ghost" size="sm" type="button" title="Edit" icon={<Edit />} onClick={onEdit} />
+      )}
+      {(actions === "close" || actions === "addClose") && (
+        <Button variant="ghost" size="sm" type="button" title="Close" icon={<Close />} onClick={onClose} />
+      )}
+    </>
+  )
+}
+
+/**
+ * WCardShell — 桌面挂件卡配方（`Card` 骨架 ＋ 拖拽把手头）。
+ *
+ * @deprecated 卡壳已并入 `Card`（primitives）。新代码直接用 `Card`：需要把手就把把手节点
+ * 放进 `header` 槽、滚动体走 `bodyClassName`。本件保留为薄配方，只为不打断挂件面消费方。
+ */
+export function WCardShell({
+  title,
+  actions,
+  children,
+  className = "",
+  short,
+  draggable,
+  onDragStart,
+  onDragOver,
+  onDragEnd,
+  onAdd,
+  onEdit,
+  onClose,
+}: WCardShellProps) {
+  return (
+    <Card
+      data-slot="wcard"
+      data-ow-state={short ? "short" : undefined}
+      className={cn("min-h-0 flex-shrink-0 data-[ow-state=short]:h-auto", className)}
+      padding="none"
+      bodyClassName="flex-1 min-h-0 overflow-auto p-3.5"
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDragEnd={onDragEnd}
+      header={
+        <div className="grid grid-cols-[auto_1fr_auto] items-center gap-2">
+          <div data-ow-part="drag" className="flex gap-0.5" aria-hidden="true">
+            <span className="w-0.5 h-0.5 [border-radius:var(--ow-radius-pill)] bg-ow-text-2" />
+            <span className="w-0.5 h-0.5 [border-radius:var(--ow-radius-pill)] bg-ow-text-2" />
+            <span className="w-0.5 h-0.5 [border-radius:var(--ow-radius-pill)] bg-ow-text-2" />
+          </div>
+          <div
+            data-ow-part="title"
+            className="font-semibold text-ow-fs-ui leading-none font-[family-name:var(--ow-font-sans)] text-ow-text text-center"
+          >
+            {title}
+          </div>
+          <div data-ow-part="actions" className="flex gap-0.5">
+            <ActionButtons actions={actions} onAdd={onAdd} onEdit={onEdit} onClose={onClose} />
+          </div>
+        </div>
+      }
+    >
+      {children}
+    </Card>
+  )
+}

package/src/components/composite/index.ts

@@ -0,0 +1,81 @@
+export * from "./ActionBar"
+export * from "./ActionStatus"
+export * from "./AskQuestionCardView"
+export * from "./AssistantChannelCard"
+export * from "./AssistantToggleRow"
+export * from "./AttachmentCard"
+export * from "./BackButton"
+export * from "./Banner"
+export * from "./BeaconIcons"
+export * from "./BeaconSpinner"
+export * from "./OrbitworkLogo"
+export * from "./OrbitworkModal"
+export * from "./CatalogStates"
+export * from "./Charts"
+export * from "./CodeBlock"
+export * from "./CodeDiff"
+export * from "./CodePreview"
+export * from "./CommandPalette"
+export * from "./ContentRecommendation"
+export * from "./ContextChip"
+export * from "./ContextUsageIndicatorView"
+export * from "./Controls"
+export * from "./CreateProjectDialog"
+export * from "./DataTable"
+export * from "./DataManagementSectionView"
+export * from "./DetailChrome"
+export * from "./DetailPanel"
+export * from "./DetailScaffold"
+export * from "./Dialog"
+export * from "./DropZone"
+export * from "./FeedbackContextMenuView"
+export * from "./FeedbackDialogView"
+export * from "./FileReferenceCard"
+export * from "./FilterBar"
+export * from "./FormField"
+export * from "./FSelect"
+export * from "./HomeBackdrop"
+export * from "./Icons"
+export * from "./ImageCard"
+export * from "./ImagePreview"
+export * from "./ListRow"
+export * from "./Markdown"
+export * from "./MarkdownPreview"
+export * from "./MarkdownPreviewModalView"
+export * from "./MessageFeedbackDialog"
+export * from "./ModelCatalogErrorState"
+export * from "./ModelModalityFlow"
+export * from "./ModelPickerList"
+export * from "./ModelSelect"
+export * from "./ModelsSettingsSectionView"
+export * from "./NativeControls"
+export * from "./NavMenu"
+export * from "./NoPlanPanelView"
+export * from "./OpenWithButton"
+export * from "./PageHead"
+export * from "./PlanFeatureIcon"
+export * from "./PlanSettingsSectionView"
+export * from "./Popover"
+export * from "./PptxRenderer"
+export * from "./ProjectSelect"
+export * from "./RadioCard"
+export * from "./RowOverflowMenu"
+export * from "./SandboxPermissionPrompt"
+export * from "./SearchInput"
+export * from "./SearchResult"
+export * from "./SelectionBulkBar"
+export * from "./Section"
+export * from "./ShareStrip"
+export * from "./ShortcutSheet"
+export * from "./SitesArtifactCardView"
+export * from "./Skeleton"
+export * from "./Splash"
+export * from "./StatusTag"
+export * from "./StepList"
+export * from "./Tag"
+export * from "./TimePicker"
+export * from "./TitleBar"
+export * from "./Toast"
+export * from "./TranscriptDividers"
+export * from "./Tooltip"
+export * from "./WCardShell"

package/src/components/domain/artifacts/ArtifactPreviewSidebarView/ArtifactPreviewSidebarView.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ArtifactPreviewSidebarView } from "./index"
+
+const meta = {
+  title: "Components/ArtifactPreviewSidebarView",
+  component: ArtifactPreviewSidebarView,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ArtifactPreviewSidebarView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// 本地 fixture（.storybook/public/fixtures/，见该目录 README）。原来 PDF / Office 两个 story
+// 的 url 指向公网 example.com：PDF 的 iframe 渲出的是 example.com 的网页而不是 PDF，
+// Office 直接被 CORS 拦掉。离线与 CI 下这两格演示都不成立。
+const samplePdfUrl = "/fixtures/sample.pdf"
+const samplePptxUrl = "/fixtures/sample.pptx"
+
+/**
+ * 故事里的 MD → 节点渲染器替身：真实宿主传自己的渲染器，本件只负责壳。
+ * 传了它才出「预览／源码」两个视图（也才出页签）。
+ */
+const renderMarkdown = (content: string) => (
+  <div className="ow-md-rendered">
+    {content
+      .split("\n\n")
+      .map((block) => (block.startsWith("# ") ? <h1 key={block}>{block.slice(2)}</h1> : <p key={block}>{block}</p>))}
+  </div>
+)
+
+export const MarkdownPreview: Story = {
+  args: {
+    preview: {
+      kind: "markdown",
+      name: "README.md",
+      path: "/project/README.md",
+      content: "# Hello World\n\nThis is a markdown preview.\n\nItem 1 · Item 2 · Item 3",
+    },
+    panelMode: "normal",
+    renderMarkdown,
+    onPanelModeChange: () => {},
+    onClose: () => alert("Close"),
+    onOpenDefault: () => alert("Open in default app"),
+  },
+}
+
+export const CodePreview: Story = {
+  args: {
+    preview: {
+      kind: "code",
+      name: "example.ts",
+      path: "/src/example.ts",
+      content: 'function hello() {\n  console.log("Hello, world!");\n}\n\nhello();',
+      language: "typescript",
+    },
+    panelMode: "normal",
+    onPanelModeChange: () => {},
+    onClose: () => {},
+    onOpenDefault: () => {},
+  },
+}
+
+export const PDFPreview: Story = {
+  args: {
+    preview: {
+      kind: "pdf",
+      name: "document.pdf",
+      path: "/docs/document.pdf",
+      url: samplePdfUrl,
+    },
+    panelMode: "normal",
+    onPanelModeChange: () => {},
+    onClose: () => {},
+    onOpenDefault: () => {},
+  },
+}
+
+export const OfficePreview: Story = {
+  args: {
+    preview: {
+      kind: "office",
+      name: "presentation.pptx",
+      path: "/slides/presentation.pptx",
+      url: samplePptxUrl,
+      fileType: "powerpoint",
+    },
+    panelMode: "normal",
+    onPanelModeChange: () => {},
+    onClose: () => {},
+    onOpenDefault: () => {},
+  },
+}
+
+export const WideMode: Story = {
+  args: {
+    preview: {
+      kind: "markdown",
+      name: "ARCHITECTURE.md",
+      path: "/docs/ARCHITECTURE.md",
+      content:
+        "# Architecture\n\nThis document describes the system architecture.\n\nBuild, ship, observe —— 三段闭环。",
+    },
+    panelMode: "wide",
+    renderMarkdown,
+    onPanelModeChange: () => {},
+    onClose: () => {},
+    onOpenDefault: () => {},
+  },
+}
+
+/** 空态 G5：网页产物不内嵌进侧栏，信标母题 ＋ 一句话 ＋ 出口动作。 */
+export const WebEmptyState: Story = {
+  args: {
+    preview: {
+      kind: "web",
+      name: "landing.html",
+      path: "/site/landing.html",
+      url: "https://example.com/landing.html",
+    },
+    panelMode: "normal",
+    onPanelModeChange: () => {},
+    onClose: () => {},
+    onOpenDefault: () => {},
+  },
+}

package/src/components/domain/artifacts/ArtifactPreviewSidebarView/ArtifactPreviewSidebarViewSource.test.mjs

@@ -0,0 +1,69 @@
+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")
+const styles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+/** 本族的 CSS 段：.artifact-sidebar 开头到 .owwindow-drag-strip 之前。 */
+const family = styles.slice(styles.indexOf(".artifact-sidebar {"), styles.indexOf(".owwindow-drag-strip"))
+
+test("preview sidebar head is a 48 band the same color as the ground, no rule", () => {
+  // 屏级判断表：54px 头带 → 48（--ow-titlebar-h）、与地同色、无分隔线。
+  assert.match(family, /\.artifact-sidebar__head \{[^}]*height: var\(--ow-titlebar-h, 48px\);/s)
+  assert.match(family, /\.artifact-sidebar__head \{[^}]*background: var\(--ow-bg\);/s)
+  assert.doesNotMatch(family, /\.artifact-sidebar__head \{[^}]*border-bottom:/s)
+  assert.doesNotMatch(family, /\.artifact-sidebar__head \{[^}]*height: 54px/s)
+})
+
+test("head readouts and icon buttons sit on the shell idiom", () => {
+  // §7 读数：文件名 mono＋tabular-nums，与 FilePreviewDialog 标题栏同口径。
+  assert.match(family, /\.artifact-sidebar__name \{[^}]*var\(--ow-font-mono\)/s)
+  assert.match(family, /\.artifact-sidebar__name \{[^}]*font-variant-numeric: tabular-nums;/s)
+  // 图标钮不再手搓：坐原语 Button ghost/sm（28×28、--ow-radius-action=8、焦点环）。
+  assert.doesNotMatch(family, /\.artifact-sidebar__action \{[^}]*width: 30px/s)
+  assert.doesNotMatch(family, /\.artifact-sidebar__action \{ width: 28px/)
+  assert.doesNotMatch(source, /variant="unstyled"/)
+  const actions = source.match(/className="artifact-sidebar__action"/g) ?? []
+  assert.equal(actions.length, 3)
+  assert.equal((source.match(/variant="ghost"\n\s*size="sm"/g) ?? []).length, 3)
+  // 无彩选中：按下态取 --ow-selected-bg，不引任何极色。
+  assert.match(family, /\.artifact-sidebar__action\[aria-pressed="true"\][^}]*var\(--ow-selected-bg\)/)
+})
+
+test("embedded previewers give up their own chrome so the filename shows once", () => {
+  // §5 一件事只有一层边：预览器一律走「坐进壳里」的开关，不再自绘立面与文件名行。
+  assert.match(source, /<MarkdownPreview\s+bare/)
+  assert.match(source, /<PdfPreview[^>]*chrome=\{false\}/s)
+  assert.match(source, /<OfficePreview[^>]*chrome=\{false\}/s)
+  // 侧栏自己不再手搓 md-preview 立面（那正是重复文件名行的来源）。
+  assert.doesNotMatch(source, /data-slot="md-preview"/)
+  assert.doesNotMatch(source, /data-ow-part="filename"/)
+})
+
+test("the only tab set is the underline primitive, and it owns the only rule", () => {
+  // 屏级判断表：页签一套（底线式）。原语自己不画基线，基线由本族容器给，且选中的 2px 压在其上。
+  assert.match(source, /<Tabs\s/)
+  assert.doesNotMatch(source, /data-ow-part="tabs"/)
+  assert.doesNotMatch(source, /data-ow-part="tab"/)
+  assert.match(
+    family,
+    /\.artifact-sidebar__tabs \{[^}]*border-bottom: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\);/s,
+  )
+  assert.match(family, /\.artifact-sidebar__tabs > \[data-ow-part="tab"\] \{ margin-bottom: -1px; \}/)
+})
+
+test("empty content lands on the G5 beacon empty state", () => {
+  assert.match(source, /<EmptyState/)
+  assert.match(family, /\.artifact-sidebar__empty \{[^}]*align-items: center;[^}]*justify-content: center;/s)
+})
+
+test("floating panel states use the pop tier, never the modal tier", () => {
+  // §5：wide 与窄屏侧栏是弹层，落 --ow-shadow-pop；--ow-shadow-3（=modal 档）只属真模态。
+  assert.match(family, /\.artifact-sidebar--wide \{[^}]*box-shadow: var\(--ow-shadow-pop\);/s)
+  assert.doesNotMatch(family, /--ow-shadow-3/)
+  assert.doesNotMatch(family, /--ow-shadow-modal/)
+  // 贴地的常态侧栏本体零影（窄屏 @media 里的那份是弹层形态，不在此列）。
+  const grounded = family.slice(0, family.indexOf("@media"))
+  assert.doesNotMatch(grounded, /\.artifact-sidebar \{[^}]*box-shadow/s)
+})