@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/TableRow/TableRow.module.css

@@ -0,0 +1,290 @@
+/* TableRow
+   ───────────────────────────────────────────────────────────────
+   navigate 모드. 행 전체가 클릭 요소 (anchor 또는 role=button).
+   TableHeader와 짝 — 같은 columns/order/widths 스펙을 공유.
+
+   시각 원칙
+   - line  : 행 하단 hairline. hover 시 전체 행 배경(hover).
+   - plate : 라운드 라인 안쪽 셀. hover 시 라운드 안쪽만 bg 변화.
+   - sm/md/lg : 세로 폭 + 셀 폰트 크기만 차이. padding은 공유.
+   - active : 현재 보고 있는 상세의 선택 상태. hover보다 한 톤 아래.
+   - disabled : 톤 다운 + pointer-events none.
+
+   토큰만 사용 — 색/시간/폰트 리터럴 금지.
+*/
+
+.root {
+  display: flex;
+  align-items: stretch;
+  /* Header와 완전히 동일한 width/min-width 공식.
+     flex 컬럼 셀에 inline max-width:0 + width:0 을 걸어 콘텐츠가 max-content 계산에
+     참여하지 못하게 끊어낸다. 그래야 Row의 .root max-content 합이 Header와 일치. */
+  width: max-content;
+  min-width: 100%;
+  color: var(--fg);
+  text-decoration: none;
+  background: transparent;
+  transition: var(--transition-colors);
+  /* 폰트는 세 사이즈 공통 — 폰트가 바뀌면 테이블 리듬이 흔들린다. */
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+}
+
+/* ── Size ───────────────────────────────────────────────────
+   세로 폭(min-height)만 사이즈 따라 스왑. 테이블 행의 "밀도"가 사이즈의 본질.
+   sm/md는 아주 가까운 두 밀도 — 데이터량이 많을 때 sm, 기본은 md.
+   lg는 이미지(아바타/썸네일)가 셀에 들어가는 경우 전용.
+   Density 축은 space-* 가 자동 반영. */
+.sizeSm { min-height: var(--space-10); }                             /* 40 */
+.sizeMd { min-height: calc(var(--space-10) + var(--space-2)); }      /* 48 */
+.sizeLg { min-height: var(--space-16); }                             /* 64 */
+
+/* ── Variant: line ─────────────────────────────────────────
+   행 하단 hairline — 테이블의 default 흐름. header line variant와 짝. */
+.line {
+  border-bottom: var(--hairline) solid var(--border);
+}
+
+/* 마지막 행은 하단 hairline 없이 — 상위 컨테이너에서 :last-child 적용. */
+.line:last-child {
+  border-bottom: none;
+}
+
+/* line variant는 셀 자체 좌우 패딩을 먹지 않는다 — Header line과 짝.
+   콘텐츠가 테이블 좌/우 경계에 바짝 붙어 "선 사이의 데이터" 톤 유지.
+   plate에서는 .cell 기본 padding-inline을 유지해 셀 간 간격·hover 영역 확보. */
+.line .cell {
+  padding-inline: 0;
+}
+
+/* line variant는 셀 사이에 최소한의 숨 쉴 공간(gap)을 둔다 — 셀 패딩이 0이라
+   콘텐츠가 서로 바짝 붙는 걸 방지. plate는 셀 자체 패딩으로 간격이 생겨 불필요. */
+.line {
+  column-gap: var(--space-2);
+}
+
+/* ── Variant: plate ────────────────────────────────────────
+   라운드 라인. 셀 간격감이 느껴지되 행 자체는 pill처럼 보임.
+   hover/active 배경은 라운드 안쪽에서만 발생.
+   padding은 TableHeader.plate와 동일(space-1 사면 균일)로 — 안쪽 셀들의 가로
+   origin을 헤더와 정확히 맞춰 열이 어긋나지 않도록 보장. */
+.plate {
+  border-radius: var(--radius-lg);
+  padding: var(--space-1);
+}
+
+/* ── Interactive states ────────────────────────────────────
+   anchor/button 역할일 때만 hover/active cursor 반응.
+   active 상태는 hover보다 약한 톤 — hover가 active를 덮어쓰지 않도록
+   active에선 bg를 먼저 깔고 hover 시엔 shadow만 추가. */
+.root[role="row"][aria-selected]:not(.disabled),
+a.root:not(.disabled),
+.root[tabindex]:not(.disabled) {
+  cursor: pointer;
+}
+
+/* hover: 전체 행 bg. active 상태 위에서 hover 시엔 bg를 덮지 않고
+   미세한 ring/강조만 — "hover가 active를 덮어쓰지 않는다" 원칙. */
+a.root:not(.disabled):hover,
+.root[tabindex]:not(.disabled):hover {
+  background: var(--hover);
+}
+
+.active {
+  background: var(--hover);
+}
+
+.active:hover {
+  background: var(--hover) !important; /* hover가 active를 덮지 않도록 유지. */
+}
+
+/* focus-visible — 행 외곽 ring. 키보드 탐색 가시화. */
+a.root:not(.disabled):focus-visible,
+.root[tabindex]:not(.disabled):focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+  border-radius: var(--radius-sm);
+}
+
+.plate:focus-visible {
+  border-radius: var(--radius-lg);
+}
+
+/* ── Disabled ──────────────────────────────────────────── */
+.disabled {
+  color: var(--fg-disabled);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+/* ── CellSlot ──────────────────────────────────────────
+   Header의 .cellSlot과 동일한 flex item 역할 + 추가로 contain: inline-size.
+   자식(.cell → .cellInner → 긴 nowrap 텍스트)의 가로 intrinsic size가
+   부모 .root의 width:max-content 계산에 전파되지 않도록 가로축만 격리한다.
+   이게 없으면 Row마다 콘텐츠 길이가 달라서 root 폭이 달라지고 셀 폭이 어긋남.
+   세로축은 격리 안 함 — min-height/stretch 정상 작동.
+   Header는 라벨이 짧아 전파돼도 min-width 하한에서 끊겨 눈에 안 띔. Row는 필수. */
+.cellSlot {
+  display: flex;
+  flex-shrink: 0;
+  min-width: 0;
+  contain: inline-size;
+}
+
+/* ── Pinned cellSlot ───────────────────────────────────
+   position: sticky는 inline style로 걸림. 배경만 깔아 스크롤되는 셀이 비치지
+   않게 함.
+   contain: inline-size 해제 — 가로 격리가 sticky anchor 계산을 깨 pinned
+   셀 경계가 실제 스크롤 위치와 안 맞는 원인. 세로 늘어남 격리는 유지 안 해도 OK. */
+.cellSlot[data-pinned] {
+  background: var(--bg);
+  contain: none;
+}
+
+/* ── Cell ───────────────────────────────────────────────
+   Header의 .cell과 1:1 동일. slot 안쪽 width:100%로 가득 채우는 콘텐츠 그릇.
+   display:inline-flex 는 Header 그대로 따라감 — flex vs inline-flex 차이가
+   intrinsic 폭 계산에 미묘하게 영향할 수 있어 완전 동일하게 유지.
+
+   mask-image를 cell에 걸어 콘텐츠 overflow 끝단이 자연스럽게 fade.
+   cellInner가 아닌 cell에 걸어 ::selection 하이라이트는 자식(cellInner) 레벨에서
+   정상 렌더되도록. 색 하드코딩 없이 어떤 행 배경(hover/active/selected) 위에서도
+   띠 없이 작동.
+   fade 영역은 2단: 바깥 --space-2(=8px)는 완전 투명, 그 안쪽 --space-3(=12px)은
+   점진적 그라데이션. 합쳐서 20px 폭의 자연스러운 소실 — 좁은 fade가 "뚝 끊긴다"는
+   인상을 주는 걸 방지. */
+.cell {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  padding-inline: var(--space-2);
+  height: 100%;
+  color: inherit;
+  overflow: hidden;
+  mask-image: linear-gradient(
+    to right,
+    #000 0,
+    #000 calc(100% - var(--space-2) - var(--space-3)),
+    transparent calc(100% - var(--space-2)),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    #000 0,
+    #000 calc(100% - var(--space-2) - var(--space-3)),
+    transparent calc(100% - var(--space-2)),
+    transparent 100%
+  );
+}
+
+/* cellInner — 실제 콘텐츠 래퍼. 한 줄 nowrap. mask는 부모 .cell에 걸려 있어
+   콘텐츠 끝단이 자연스럽게 fade. cellInner 자체엔 mask/overflow 조작 없음 —
+   ::selection 하이라이트가 정상 동작하도록 유지. */
+.cellInner {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  width: 100%;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+/* 우측 정렬 셀 — 숫자가 왼쪽부터 사라지도록 cell mask 방향도 좌측으로 뒤집음. */
+.cell[data-align="end"] .cellInner {
+  font-variant-numeric: tabular-nums;
+  justify-content: flex-end;
+}
+
+.cell[data-align="end"] {
+  mask-image: linear-gradient(
+    to left,
+    #000 0,
+    #000 calc(100% - var(--space-2) - var(--space-3)),
+    transparent calc(100% - var(--space-2)),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to left,
+    #000 0,
+    #000 calc(100% - var(--space-2) - var(--space-3)),
+    transparent calc(100% - var(--space-2)),
+    transparent 100%
+  );
+}
+
+/* 가운데 정렬 — 양쪽 fade. */
+.cell[data-align="center"] .cellInner {
+  justify-content: center;
+}
+
+.cell[data-align="center"] {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    transparent var(--space-2),
+    #000 calc(var(--space-2) + var(--space-3)),
+    #000 calc(100% - var(--space-2) - var(--space-3)),
+    transparent calc(100% - var(--space-2)),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    transparent var(--space-2),
+    #000 calc(var(--space-2) + var(--space-3)),
+    #000 calc(100% - var(--space-2) - var(--space-3)),
+    transparent calc(100% - var(--space-2)),
+    transparent 100%
+  );
+}
+
+/* ── Wrap mode ─────────────────────────────────────────
+   긴 셀 콘텐츠를 줄바꿈으로 전부 보여주는 모드.
+   - 행 min-height 해제: 콘텐츠 높이대로 자람.
+   - cell 상단 정렬 + 세로 padding + height:auto: 여러 줄 사이 리듬 유지.
+   - fade mask 제거: 전체 가시화가 목적.
+   - cellInner + 하위 요소의 white-space/min-width 전부 해제: TableCellText/Number 등
+     포맷터가 자체 nowrap을 들고 있어 universal selector로 뚫어야 함. descendant
+     selector는 .cellInner 하위에만 적용돼 selectCell(Checkbox) 영향 없음. */
+.wrap {
+  min-height: 0;
+}
+
+.wrap + .wrap {
+  margin-top: 0;
+}
+
+.wrap .cell {
+  overflow: visible;
+  align-items: flex-start;
+  height: auto;
+  padding-block: var(--space-2);
+  mask-image: none;
+  -webkit-mask-image: none;
+}
+
+.wrap .cellInner {
+  white-space: normal;
+  overflow-wrap: anywhere;
+  align-items: flex-start;
+}
+
+.wrap .cellInner * {
+  white-space: normal;
+  overflow-wrap: anywhere;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* ── Select cell (leading checkbox) ────────────────────
+   체크박스가 자체 크기를 가져 중앙 정렬만 하면 됨 — 좌우 패딩 불필요. */
+.selectCell {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  width: var(--control-h-sm);
+}

package/assets/components/TableRow/TableRow.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import {
+  forwardRef,
+  type AnchorHTMLAttributes,
+  type CSSProperties,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+
+import { Checkbox } from "../Checkbox";
+import type {
+  TableHeaderAlign,
+  TableHeaderColumn,
+  TableHeaderVariant,
+} from "../TableHeader";
+import styles from "./TableRow.module.css";
+
+/* ────────────────────────────────────────────────────────────
+   Types
+   ──────────────────────────────────────────────────────────── */
+
+export type TableRowSize = "sm" | "md" | "lg";
+
+/** Row가 columns 스펙 안에 선택적으로 심을 수 있는 "셀 렌더" 콜백.
+ *  TableHeaderColumn은 label·width만 정의 — 데이터 렌더링 책임은 Row 쪽에서
+ *  columns[i].render(data)로 확장. columns 참조를 공유하면 header와 row가 자동으로
+ *  정렬·폭이 맞는다. */
+export type TableRowColumn<T = unknown> = TableHeaderColumn & {
+  /** 셀 렌더러. 미지정이면 data[key]를 그대로 노출. */
+  render?: (data: T) => ReactNode;
+  /** edit 모드 전용. false면 해당 셀은 활성화·세로선 대상에서 빠지고 read-only로 보임.
+   *  기본은 true — 생략하면 편집 가능 셀로 간주. navigate/select 모드에선 무시된다. */
+  editable?: boolean;
+  /** 사용자가 column 삭제 가능. TableHeader가 context menu / × 액션을 노출.
+   *  기본 false — 삭제는 호출 측 콜백으로 columns 배열 변경. */
+  removable?: boolean;
+  /* resizable / movable / pinned는 TableHeaderColumn에 정의되어 자동 상속. */
+};
+
+type BaseProps<T> = {
+  variant?: TableHeaderVariant;
+  size?: TableRowSize;
+  columns: TableRowColumn<T>[];
+
+  /** 헤더와 공유하는 컬럼 순서. uncontrolled면 columns 원본 순서. */
+  order?: string[];
+  /** 헤더가 resize로 적용한 컬럼별 폭. */
+  widths?: Record<string, number>;
+
+  /** 이 행의 데이터. columns[].render(data) 또는 data[key]로 사용. */
+  data: T;
+
+  /** 맨 앞 체크박스 셀 — 헤더의 selectable과 짝. */
+  selectable?: boolean;
+  selected?: boolean;
+  onSelectedChange?: (next: boolean) => void;
+
+  /** navigate 모드에서 '선택된 행'처럼 보이게 하는 활성 상태 (현재 보고 있는 상세 등). */
+  active?: boolean;
+
+  /** 비활성 — 톤 다운 + 상호작용 차단. */
+  disabled?: boolean;
+
+  /** 셀 콘텐츠 줄바꿈 허용. 기본 false — 긴 텍스트는 한 줄 + 끝단 fade로 잘라냄.
+   *  true면 white-space:normal 로 줄바꿈, 끝단 mask 제거, 행 높이가 콘텐츠 따라 자람.
+   *  보통 테이블 전체 Row에 동일 값을 넘김 — 열별 분기는 지원하지 않음(테이블 리듬 유지). */
+  wrap?: boolean;
+};
+
+/** 두 가지 "render as" 모드:
+ *  - href 있으면 <a>로 렌더 (navigate 라우팅)
+ *  - 아니면 <div role="button">로 렌더 (onClick 핸들러)
+ *  둘 다 안 주면 <div role="row"> (단순 디스플레이). */
+export type TableRowAnchorProps<T> = BaseProps<T> &
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseProps<T> | "role"> & {
+    href: string;
+  };
+
+export type TableRowButtonProps<T> = BaseProps<T> &
+  Omit<HTMLAttributes<HTMLDivElement>, keyof BaseProps<T> | "role"> & {
+    href?: undefined;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+  };
+
+export type TableRowProps<T = unknown> =
+  | TableRowAnchorProps<T>
+  | TableRowButtonProps<T>;
+
+/* ────────────────────────────────────────────────────────────
+   Utilities
+   ──────────────────────────────────────────────────────────── */
+
+function toCssSize(v: number | string | undefined): string | undefined {
+  if (v === undefined) return undefined;
+  return typeof v === "number" ? `${v}px` : v;
+}
+
+function alignToJustify(align: TableHeaderAlign | undefined): CSSProperties["justifyContent"] {
+  return align === "end" ? "flex-end" : align === "center" ? "center" : "flex-start";
+}
+
+function resolveOrder<T>(columns: TableRowColumn<T>[], order?: string[]): string[] {
+  if (!order) return columns.map((c) => c.key);
+  const known = new Set(columns.map((c) => c.key));
+  const filtered = order.filter((k) => known.has(k));
+  const missing = columns.map((c) => c.key).filter((k) => !filtered.includes(k));
+  return [...filtered, ...missing];
+}
+
+/* ────────────────────────────────────────────────────────────
+   TableRow
+   ──────────────────────────────────────────────────────────── */
+
+function TableRowInner<T>(
+  props: TableRowProps<T>,
+  ref: React.ForwardedRef<HTMLDivElement | HTMLAnchorElement>,
+) {
+  const {
+    className,
+    variant = "line",
+    size = "sm",
+    columns,
+    order,
+    widths,
+    data,
+    selectable = false,
+    selected = false,
+    onSelectedChange,
+    active = false,
+    disabled = false,
+    wrap = false,
+    ...rest
+  } = props as BaseProps<T> & {
+    className?: string;
+    href?: string;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+  } & Record<string, unknown>;
+
+  const orderedKeys = resolveOrder(columns, order);
+  const columnMap = new Map(columns.map((c) => [c.key, c]));
+
+  const rootClass = [
+    styles.root,
+    variant === "plate" ? styles.plate : styles.line,
+    size === "sm" ? styles.sizeSm : size === "lg" ? styles.sizeLg : styles.sizeMd,
+    active ? styles.active : "",
+    disabled ? styles.disabled : "",
+    wrap ? styles.wrap : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const isInteractive = !disabled && (!!(props as TableRowAnchorProps<T>).href || !!(props as TableRowButtonProps<T>).onClick);
+
+  /* 체크박스 셀 자체 클릭이 행 클릭으로 전파되지 않도록 stop. */
+  const stop = (e: MouseEvent) => e.stopPropagation();
+
+  const cells = (
+    <>
+      {selectable && (
+        <div className={styles.selectCell} onClick={stop}>
+          <Checkbox
+            checked={selected}
+            disabled={disabled}
+            onChange={(e) => onSelectedChange?.(e.currentTarget.checked)}
+            aria-label="행 선택"
+          />
+        </div>
+      )}
+
+      {orderedKeys.map((key) => {
+        const col = columnMap.get(key);
+        if (!col) return null;
+        const cssWidth = widths?.[col.key] !== undefined ? `${widths[col.key]}px` : toCssSize(col.width);
+        /* Header와 완전히 동일한 2단계 구조 + 동일한 inline 공식.
+           cellSlot: flex item, 폭 결정. cell: slot 안쪽 width:100%로 콘텐츠 그릇. */
+        const slotStyle: CSSProperties = {
+          width: cssWidth,
+          minWidth: toCssSize(col.minWidth) ?? cssWidth,
+          flex: col.flex ? "1 1 0" : undefined,
+          justifyContent: alignToJustify(col.align),
+        };
+        const content = col.render ? col.render(data) : (data as Record<string, ReactNode>)?.[col.key];
+        return (
+          <div key={col.key} className={styles.cellSlot} style={slotStyle}>
+            <div role="cell" className={styles.cell} data-align={col.align ?? "start"}>
+              <span className={styles.cellInner}>{content}</span>
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+
+  /* ── 라우팅: href 있으면 anchor, onClick 있으면 div[role=button], 둘 다 없으면 div[role=row] ── */
+  if (!disabled && "href" in props && props.href) {
+    const { href, onClick, ...anchorRest } = rest as AnchorHTMLAttributes<HTMLAnchorElement> & { href: string };
+    return (
+      <a
+        ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+        className={rootClass}
+        href={href}
+        role="row"
+        aria-selected={active || undefined}
+        aria-disabled={disabled || undefined}
+        onClick={onClick}
+        {...anchorRest}
+      >
+        {cells}
+      </a>
+    );
+  }
+
+  const divRest = rest as HTMLAttributes<HTMLDivElement>;
+  const { onClick, onKeyDown, tabIndex, ...divRestClean } = divRest;
+
+  /* div[role=button] 분기에서 키보드 활성화 — Enter/Space로 클릭 트리거. */
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(e);
+    if (!isInteractive || !onClick) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick(e as unknown as MouseEvent<HTMLDivElement>);
+    }
+  };
+
+  return (
+    <div
+      ref={ref as React.ForwardedRef<HTMLDivElement>}
+      className={rootClass}
+      role="row"
+      aria-selected={active || undefined}
+      aria-disabled={disabled || undefined}
+      tabIndex={isInteractive ? (tabIndex ?? 0) : tabIndex}
+      onClick={isInteractive ? onClick : undefined}
+      onKeyDown={isInteractive ? handleKeyDown : onKeyDown}
+      {...divRestClean}
+    >
+      {cells}
+    </div>
+  );
+}
+
+/* generic + forwardRef 조합 — 캐스팅으로 generic 보존. */
+const TableRow = forwardRef(TableRowInner) as <T>(
+  props: TableRowProps<T> & { ref?: React.ForwardedRef<HTMLDivElement | HTMLAnchorElement> },
+) => ReturnType<typeof TableRowInner>;
+
+export { TableRow };

package/assets/components/TableRow/index.ts

@@ -0,0 +1,8 @@
+export { TableRow } from "./TableRow";
+export type {
+  TableRowProps,
+  TableRowAnchorProps,
+  TableRowButtonProps,
+  TableRowColumn,
+  TableRowSize,
+} from "./TableRow";

package/assets/components/TableRowEdit/TableRowEdit.module.css

@@ -0,0 +1,126 @@
+/* TableRowEdit
+   ───────────────────────────────────────────────────────────────
+   edit 모드 전용 CSS. 레이아웃은 TableRow.module.css를 부분 상속하되
+   .line 클래스는 쓰지 않고 edit 전용 외곽을 여기서 그린다.
+
+   원칙
+   - 세로 구분선 강제: 엑셀/Notion 톤의 "셀 그리드" 신호.
+   - 셀 자체가 입력 영역: 활성 셀 안에 editor가 바로 들어감.
+   - selected 행은 primary-subtle.
+*/
+
+/* ── Row 외곽 ─────────────────────────────────────────────
+   TableRow .line 클래스를 쓰지 않는 이유: .line .cell { padding-inline: 0 }
+   cascade가 edit 모드 셀 좌우 패딩을 지워버림. 하단 hairline과 column-gap은
+   여기서 직접. */
+.edit {
+  cursor: default;
+  border-bottom: var(--hairline) solid var(--border);
+  /* TableHeader(.line)와 동일한 column-gap. gap이 다르면 각 셀 폭이 오른쪽으로
+     갈수록 어긋나 헤더 resize handle 위치와 데이터 Row 세로선이 안 맞음. */
+  column-gap: var(--space-2);
+}
+
+/* ── Size ─────────────────────────────────────────────────
+   edit 전용 2단계. 스프레드시트 톤이라 조밀한 2단만.
+   sm=36(control-h-md), md=40(control-h-lg). TableRow sizeMd(48)보다 작다. */
+.sizeSm { min-height: var(--control-h-md); }
+.sizeMd { min-height: var(--control-h-lg); }
+
+.edit:last-child {
+  border-bottom: none;
+}
+
+/* ── 공통 셀 (edit/readonly) ──────────────────────────────
+   TableRow .cell의 overflow: hidden / mask-image / padding-inline:0 를 전부
+   edit 모드용으로 재설정. mask는 흰 그라데이션 노이즈, padding 0은 글자가
+   세로선에 붙어 보이는 원인. */
+.editCell,
+.readonlyCell {
+  padding-inline: var(--space-2);
+  mask-image: none;
+  -webkit-mask-image: none;
+}
+
+/* ── 세로 구분선 ────────────────────────────────────────── */
+.editCell[data-divider]::before,
+.readonlyCell[data-divider]::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: var(--hairline);
+  background: var(--border);
+  pointer-events: none;
+}
+
+/* ── Edit cell ────────────────────────────────────────────
+   클릭/포커스 타겟. 활성 상태엔 input/select가 셀을 꽉 채움. */
+.editCell {
+  position: relative;
+  cursor: text;
+  transition: var(--transition-colors);
+  outline: none;
+}
+
+
+.edit .editCell:hover {
+  background: var(--hover);
+}
+
+/* ── Read-only cell ────────────────────────────────────── */
+.readonlyCell {
+  cursor: default;
+}
+
+/* ── Active cell ─────────────────────────────────────────
+   active 상태 셀 자체는 톤 변화 없이 그대로. overflow visible로 editor의
+   shadow·multiline 확장이 셀 밖으로 번지도록. z-raised로 세로선/다른 행
+   위에 올라오게 — 헤더(z-sticky)보다는 아래라 아래 방향 확장만 안전. */
+.cellActive {
+  overflow: visible;
+  z-index: var(--z-raised);
+}
+
+/* ── Floating editor host ────────────────────────────────
+   active 셀 위에 떠있는 editor 컨테이너. 톤 변화는 border/shadow만 —
+   포인트 컬러 없이 중성 hairline으로. 셀 bounding box에 정확히 얹혀
+   폭·좌우 origin이 셀과 완전 일치해야 헤더나 옆 셀 아래로 안 들어감.
+   top만 아래로 확장되도록 inset-block-end: auto. */
+.editorHost {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  /* 1줄 상태엔 셀 높이에 딱 맞도록 min-height: 100%. textarea autosize가
+     여러 줄로 늘어나면 host는 content 높이를 따라감(아래로 확장). */
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  padding-inline: var(--space-2);
+  background: var(--bg);
+  border: var(--hairline) solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-md);
+}
+
+/* editor(input/select)는 popover 폭을 꽉 채움. */
+.editorHost > * {
+  width: 100%;
+}
+
+/* ── 키보드 포커스 (활성 전) ───────────────────────────── */
+.editCell:focus-visible:not([data-active]) {
+  box-shadow: var(--ring-shadow);
+  border-radius: var(--radius-sm);
+}
+
+/* ── Selected 행 ───────────────────────────────────────── */
+.selected {
+  background: var(--primary-subtle);
+  color: var(--selected-fg);
+}
+
+.selected:hover {
+  background: var(--primary-subtle) !important;
+}