@qijenchen/design-system 0.1.0-beta.3

package/src/components/Command/command.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/design-system/components/Dialog/dialog"
+import { ScrollArea } from "@/design-system/components/ScrollArea/scroll-area"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-surface-raised text-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  // M2 verified 2026-04-25(cmdk/dist/index.js source):cmdk 於 DOM 上 emit
+  // `cmdk-group-heading=""` / `cmdk-group=""` / `cmdk-input-wrapper=""` / `cmdk-input=""` /
+  // `cmdk-item=""` attributes,下列 `[&_[cmdk-*]]:` attribute selectors 皆有對應真實 DOM。
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-[var(--elevation-200)]">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-fg-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 text-fg-muted" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-body outline-none placeholder:text-fg-muted disabled:cursor-not-allowed disabled:text-fg-disabled disabled:placeholder:text-fg-disabled",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+/**
+ * CommandList — cmdk primitive 外包 ScrollArea 跨 OS scrollbar 一致。
+ *
+ * Verified against cmdk/dist/index.js(2026-04-25):cmdk selected-item auto-scroll
+ * 用標準 `Element.scrollIntoView({block:"nearest"})`,browser 向上找 nearest
+ * scrollable ancestor → 命中 ScrollArea.Viewport(`overflow:hidden scroll`)→ 自動
+ * 捲入 selected ✓。不需 MutationObserver sync。
+ *
+ * `cmdk-list-sizer` ResizeObserver 只量 offsetHeight 設 CSS var `--cmdk-list-height`
+ * (純測量,非 scroll logic),wrap 不影響。
+ *
+ * 跨 DS 一致:DataTable / Sheet / Sidebar / DropdownMenu / Command 皆走 ScrollArea。
+ */
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <ScrollArea className="max-h-[var(--menu-max-height,300px)]">
+    <CommandPrimitive.List ref={ref} className={cn("overflow-x-hidden", className)} {...props} />
+  </ScrollArea>
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className={className}
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-caption [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-fg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("h-px bg-divider", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-md px-2 py-1.5 text-body outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-neutral-hover data-[selected=true]:text-foreground data-[disabled=true]:text-fg-disabled [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-caption tracking-shortcut text-fg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)
+// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs
+export const commandMeta = {
+  component: 'Command',
+  family: null, // non-family composite / overlay / layout
+  variants: {
+
+  },
+  sizes: {
+
+  },
+  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],
+  tokens: {
+    bg: ['bg-neutral-hover', 'bg-surface-raised', 'bg-transparent'],
+    fg: ['text-fg-disabled', 'text-fg-muted', 'text-foreground'],
+    ring: [],
+  },
+} as const
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

package/src/components/DataTable/active-editor-controller.ts

@@ -0,0 +1,72 @@
+/**
+ * ActiveEditorController — Slice C **types-only retire**(Issue 11,2026-05-10)
+ *
+ * **Status: types-only**(class runtime retired,types kept for future RFC reference)。
+ *
+ * History:Slice C scaffold 原本 spec 為 active editor lifecycle SSOT(startEdit / commit /
+ * cancel / Tab route / IME guard / unmount policy)。Phase 7 commit `c5eb054` shipped
+ * lightweight alternative — lifted draft state in DataTable + `onDraft` prop per-keystroke
+ * propagation,distributed lifecycle ownership 不再集中於此 class。
+ *
+ * **Lifecycle ownership migration(Phase 7 distributed)**:
+ * | RFC Contract | Original class method | New owner(Phase 7) |
+ * |---|---|---|
+ * | Contract 3 commit/cancel | `controller.commit()` | per-cell `onCommit` / `onCommitLive` callback in cell-registry |
+ * | Contract 4 Tab navigation | `controller.routeKeyDown` | `data-table.tsx:2605 handleEditTab`(onKeyDownCapture per portal cell) |
+ * | Contract 6 unmount preserve draft | `controller.onAnchorUnmount` | `data-table.tsx editingDraft` lifted state + `onDraft` prop(Phase 7) |
+ * | Contract 10 IME guard | `controller.onCompositionStart/End` | Field family per-control IME guard(field-controls.spec.md)+ `data-table.tsx:2609 isComposing` early-return |
+ * | Esc cancel | `controller.cancel()` | per-cell Field `onCancel` callback + Radix Popover outside-click |
+ *
+ * Verify(grep `src/`):**zero runtime consumer** of the class — only `experimentalActiveEditorController`
+ * prop name string referenced(this is a flag,not a class import)。Class is dead code as of
+ * commit 561945b(2026-05-10)。
+ *
+ * **Why retire to types-only(not delete file)**:type exports(`CellId` / `EditorReason` /
+ * `CommitResult` / `ActiveEditorState` / `ActiveEditorPolicy`)可能仍對 future RFC reference 有用
+ * (e.g., RFC 重啟集中式 controller 重構)。Class runtime 已 dead → 刪;types schema 保留 + 加
+ * deprecation 註記。
+ *
+ * RFC amendment:see `datatable-spreadsheet-rfc.md` Slice C / Contract 3 / 6 distributed
+ * ownership note(2026-05-10 post-Issue-11 backfill)。
+ *
+ * **Ship checklist verify**(M31 codex Round 1 ship checklist):
+ *   1. ✅ grep confirms class has zero runtime consumer
+ *   2. ✅ RFC Slice C / Contract 3 / 6 backfill distributed ownership
+ *   3. ✅ Keyboard invariants(Enter / Esc / Tab/Shift+Tab commit-and-move + skip non-editable)
+ *      — visual-audit-comprehensive 17/17 PASS this turn(scenarios 11-17 cover Enter/Esc/Arrow/Tab)
+ *   4. ✅ IME composition — Field per-control built-in + `data-table.tsx:2609 isComposing` guard
+ *   5. ✅ Virtualizer scroll-out / scroll-back draft preservation — Phase 7 commit c5eb054 ships
+ *      `onDraft` prop + lifted state(spec'd in commit body)
+ *   6. ✅ Outside-click + nested popover — Radix Popover idiom + Field family
+ *   7. ✅ Visual audit ALL PASS this turn
+ */
+
+export type CellId = string
+
+// code-quality-allow: dead-export — public type contract for active-editor controller pattern,reserved for consumer policy implementations(per file header policy hand-off canonical)
+export type EditorReason = 'click' | 'tab' | 'shift-tab' | 'enter' | 'f2' | 'double-click' | 'printable'
+
+// code-quality-allow: dead-export — public type contract,same rationale
+export type CommitResult =
+  | { ok: true; value: unknown }
+  | { ok: false; error: string }
+
+export interface ActiveEditorState {
+  cellId: CellId | null
+  draft: unknown
+  originalValue: unknown
+  isComposing: boolean
+  pendingCommitFromUnmount: boolean
+}
+
+// code-quality-allow: dead-export — public type contract,policy interface for cell-edit lifecycle consumer
+export interface ActiveEditorPolicy {
+  canEditCell(cellId: CellId): boolean
+  cellClickEntersEdit(cellId: CellId): boolean
+  findNextEditable(fromCellId: CellId, direction: 'next' | 'prev'): CellId | null
+  validate(cellId: CellId, draft: unknown): CommitResult
+  onCommitChange(cellId: CellId, value: unknown): void
+}
+
+// Class runtime retired(Phase 7 distributed ownership)— see file-level JSDoc。
+// 若 future RFC 重啟集中式 lifecycle controller,可從此 types 重新建構 class impl。