@orbit-work/ui 0.1.2-preview.0 → 0.1.2

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

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

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

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

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

@@ -1,69 +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")
-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)
-})