@crispy-seed/data-table 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,323 @@
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import * as react from 'react';
+
+declare interface DataTableVariant {
+  /**
+  * @default "card"
+  */
+  surface: "card" | "bleed";
+/**
+  * @default false
+  */
+  interactive: boolean;
+}
+
+declare type DataTableVariantProps = Partial<DataTableVariant>;
+
+type DataTableSortDirection = "asc" | "desc";
+interface DataTableSortState {
+    key: string;
+    dir: DataTableSortDirection;
+}
+
+type DataTableFilterMode = "is" | "isnot";
+interface DataTableColumnFilter {
+    mode: DataTableFilterMode;
+    /**
+     * Checked values. One checked value reads as "is X"/"is not X"; several read as
+     * Attio's "is any of X, Y"/"is not any of X, Y" -- the exact same predicate, just
+     * more values in the set (crisp's own `applyFilters`, `tabletoolbar.tsx`, treats
+     * `isanyof` as membership-in-`values` too). An empty array means the picker is open
+     * with nothing checked yet, not "match nothing" -- see `isFilterActive` below.
+     */
+    values: string[];
+}
+type DataTableFilterState = Record<string, DataTableColumnFilter>;
+
+/**
+ * The six aggregations DATATABLE-ATTIO-SPEC.md's ColumnCalc footer offers (crisp's own
+ * `ColumnCalc` ships nine -- adding percent-empty/-filled and a "none" clearing op --
+ * but this table's contract is exactly the six named in the spec doc: count /
+ * countFilled / sum / average / min / max). `count`/`countFilled` apply to every
+ * column; `sum`/`average`/`min`/`max` only make sense on a numeric column, so the
+ * styled layer only offers those four when the column's cell type is number/currency
+ * (see DataTable.tsx's `ColumnCalcMenu`).
+ */
+type DataTableCalcOp = "count" | "countFilled" | "sum" | "average" | "min" | "max";
+
+type DataTableCellType = "text" | "entity" | "url" | "email" | "tags" | "status" | "number" | "currency" | "date" | "datetime" | "rating" | "checkbox";
+
+/** A `select`/`reference`/`actor` editor's own choice list -- `value`/`label` are
+ *  required (the committed string and what the row reads), `avatar` is read only by
+ *  `reference`/`actor` (a photo URL; absent renders a generic person glyph, matching
+ *  crisp's own `DataReferenceEditor` fallback). */
+interface DataTableEditOption {
+    value: string;
+    label: string;
+    avatar?: string;
+}
+
+interface DataTableColumn<TRow> {
+    /**
+     * `data`의 각 행에서 이 열의 값을 찾는 key입니다. `render`가 없으면 `type`에 맞는
+     * 기본 렌더러(또는 문자열 표시)로 값을 그립니다.
+     */
+    key: string;
+    /** 헤더 셀에 표시할 내용입니다. */
+    header: react.ReactNode;
+    /** 이 열을 클릭해 정렬할 수 있는지 여부입니다. */
+    sortable?: boolean;
+    /**
+     * Attio 셀 타입입니다. 생략하면 `"text"`(그대로 문자열 표시)로 취급합니다.
+     * `render`가 있으면 `type`은 (정렬/정렬-정렬 이외의) 표시에는 쓰이지 않습니다.
+     */
+    type?: DataTableCellType;
+    /** 셀 내용을 직접 그립니다. 지정하면 `type`의 기본 렌더러 대신 이것을 사용합니다.
+     *  `editable`이어도 편집/always-live 상태에는 영향이 없습니다 -- 이 필드는 REST
+     *  상태의 표시만 바꿉니다. */
+    render?: (row: TRow) => react.ReactNode;
+    /** `type: "currency"`의 통화 기호입니다. @default "$" */
+    symbol?: string;
+    /** `type: "rating"`의 별 개수입니다. @default 5 */
+    maxRating?: number;
+    /**
+     * 정렬/검색/필터/내보내기가 공유하는 단 하나의 값 접근자입니다 (DATATABLE-ATTIO-
+     * SPEC.md의 Column API). 생략하면 `row[key]`를 그대로 씁니다 -- `render`는 표시만
+     * 바꿀 뿐 이 접근자를 대체하지 않습니다 (표시용 JSX와 비교 가능한 값은 다를 수
+     * 있음).
+     */
+    value?: (row: TRow) => unknown;
+    /** 툴바의 검색창이 이 열도 검색할지 여부입니다. 기본은 검색 대상에서 제외입니다
+     *  (GRC의 `Column<T>` 계약과 동일) -- 명시적으로 표시한 열만 검색됩니다. */
+    searchable?: boolean;
+    /**
+     * 이 열의 값 목록입니다. 지정하면 헤더에 "is / is not / is any of" 체크박스
+     * 필터 피커가 붙습니다 -- 자유 텍스트 열은 생략합니다(필터 UI 없음).
+     */
+    filterValues?: string[];
+    /**
+     * 이 열의 초기 너비(px)입니다. 생략하면 다른 미지정 열들과 폭을 균등하게 나눠
+     * 갖는(flex: 1) 기존 동작을 유지합니다 -- 드래그로 리사이즈하거나 `columnWidths`로
+     * 제어하면 이 값 대신 그 너비를 씁니다.
+     */
+    width?: number;
+    /** 이 열의 드래그 리사이즈를 끕니다 (테이블 전체의 `resizable`이 켜져 있어도).
+     *  @default true */
+    resizable?: boolean;
+    /** ColumnCalc 합계 푸터에 이 열의 트리거를 표시합니다 (테이블 전체의
+     *  `columns.some(c => c.summary)`가 푸터 행 자체를 렌더링할지를 결정합니다). */
+    summary?: boolean;
+    /** 아직 아무 것도 고르지 않았을 때 ColumnCalc가 시작하는 연산입니다. 생략하면
+     *  "Add calculation"으로 비어 있는 채 시작합니다. */
+    summaryDefaultOp?: DataTableCalcOp;
+    /**
+     * 인라인 편집을 켭니다 (DATATABLE-ATTIO-SPEC.md 트랜치 5). `editor`가 없는 플레인
+     * `editable` 열은 더블클릭으로 텍스트/숫자 입력(`cellType`이 없거나 `"number"`)
+     * 또는 날짜/일시 입력(`cellType: "date"`/`"datetime"`)을 엽니다 -- Enter/blur
+     * 커밋, Escape 취소. `editor`가 있으면 그 편집기가 대신 열립니다. `type: "rating"`/
+     * `"checkbox"`, `editor: "switch"`는 always-live(더블클릭 없이 바로 조작 =
+     * 커밋)입니다. 커밋은 테이블의 `onEdit`으로 갑니다. */
+    editable?: boolean;
+    /** 플레인 `editable` 열(=`editor` 없음)이 여는 편집기의 종류입니다. 생략하면
+     *  텍스트 입력(seed `TextField`)입니다. `"number"`는 같은 `TextField`를
+     *  `type="number"`로 엽니다. `"date"`/`"datetime"`는 네이티브
+     *  `date`/`datetime-local` 입력을 엽니다. `type`(표시 렌더러)과는 독립적입니다 --
+     *  예: `type: "currency"` + `cellType: "number"`는 화면엔 통화로 보이지만
+     *  편집기는 평범한 숫자 입력입니다. GRC의 `Column<T>.cellType`과 동일한 계약. */
+    cellType?: "number" | "date" | "datetime";
+    /** `editable`이 여는 편집기를 `cellType` 대신 지정합니다. `"select"`/`"reference"`/
+     *  `"actor"`는 더블클릭으로 seed `Select`를 엽니다(`reference`/`actor`는 검색 +
+     *  아바타). `"switch"`는 always-live seed `Switch`입니다. */
+    editor?: "select" | "switch" | "reference" | "actor";
+    /** `editor: "select"`의 선택지입니다. */
+    options?: DataTableEditOption[];
+    /** `editor: "reference"`/`"actor"`의 선택지입니다 (`avatar`가 있으면 아바타로,
+     *  없으면 기본 사람 아이콘으로 표시). */
+    refOptions?: DataTableEditOption[];
+    /**
+     * 편집기가 읽는 raw 값입니다 (`value`와 다름 -- `value`는 정렬/검색/필터/내보내기가
+     * 공유하는, 표시용으로 가공됐을 수 있는 접근자인 반면 `editValue`는 편집기 위젯이
+     * 그대로 기대하는 타입, 예: `editor: "switch"`/`type: "checkbox"`의 실제
+     * `boolean`, `type: "rating"`의 `number`, `select`/`reference`/`actor`가 고를
+     * 옵션의 문자열 그 자체입니다). 생략하면 `value`(또는 `row[key]`)를 그대로 씁니다.
+     */
+    editValue?: (row: TRow) => string | number | boolean;
+}
+interface DataTableProps<TRow extends {
+    id: string;
+}> extends DataTableVariantProps, Omit<PrimitiveProps, "asChild">, Omit<react.HTMLAttributes<HTMLDivElement>, "children"> {
+    columns: DataTableColumn<TRow>[];
+    data: TRow[];
+    /** `type`이 있는 열의 number/currency/date/datetime 표시에 쓰는 로캘입니다. @default "en-US" */
+    locale?: string;
+    /** 제어할 정렬 상태입니다. */
+    sort?: DataTableSortState;
+    /** 비제어 방식으로 사용할 때의 초기 정렬 상태입니다. */
+    defaultSort?: DataTableSortState;
+    /** 정렬 가능한 열을 클릭해 정렬 상태가 바뀔 때 호출됩니다. */
+    onSortChange?: (sort: DataTableSortState) => void;
+    /**
+     * 정렬 아이콘입니다. `idle`은 정렬 가능하지만 아직 정렬되지 않은 열의 헤더에
+     * (호버 시에만 드러나는) 기본 표시로 쓰이고, `asc`/`desc`는 실제로 정렬된 열에
+     * 씁니다. 생략하면 karrot 아이콘 셋의 chevron을 씁니다.
+     */
+    sortIcon?: {
+        idle?: react.ReactNode;
+        asc?: react.ReactNode;
+        desc?: react.ReactNode;
+    };
+    /** 왼쪽에 40px짜리 체크박스 선택 열을 추가합니다. */
+    selectable?: boolean;
+    /** 제어할 선택된 행 id 목록입니다. */
+    selectedIds?: string[];
+    /** 비제어 방식으로 사용할 때의 초기 선택된 행 id 목록입니다. */
+    defaultSelectedIds?: string[];
+    /** 선택된 행이 바뀔 때 호출됩니다. */
+    onSelectionChange?: (selectedIds: string[]) => void;
+    /** 전체 선택 체크박스의 접근성 이름입니다. */
+    selectAllLabel?: string;
+    /** 각 행 체크박스의 접근성 이름입니다. */
+    getRowSelectionLabel?: (row: TRow) => string;
+    /** 선택 체크박스가 checked일 때 표시할 아이콘입니다. 생략하면 karrot의 체크 아이콘을
+     *  씁니다. */
+    selectionCheckedIcon?: react.ReactNode;
+    /** 전체 선택 체크박스가 일부만 선택됐을 때(indeterminate) 표시할 아이콘입니다.
+     *  생략하면 karrot의 minus 아이콘을 씁니다. */
+    selectionIndeterminateIcon?: react.ReactNode;
+    /** 제어할 검색어입니다. */
+    query?: string;
+    /** 비제어 방식으로 사용할 때의 초기 검색어입니다. */
+    defaultQuery?: string;
+    /** 검색어가 바뀔 때 호출됩니다. */
+    onQueryChange?: (query: string) => void;
+    /** 검색창의 placeholder입니다. */
+    searchPlaceholder?: string;
+    /** 검색창의 접근성 이름입니다. */
+    searchLabel?: string;
+    /** 제어할 열별 필터 상태입니다. */
+    filters?: DataTableFilterState;
+    /** 비제어 방식으로 사용할 때의 초기 필터 상태입니다. */
+    defaultFilters?: DataTableFilterState;
+    /** 필터 상태가 바뀔 때 호출됩니다. */
+    onFiltersChange?: (filters: DataTableFilterState) => void;
+    /** 툴바에 행 개수를 표시할지 여부입니다. @default true */
+    showCount?: boolean;
+    /**
+     * 행 개수 텍스트를 직접 만듭니다. 생략하면 crisp의 기본 형식을 씁니다: 검색/필터로
+     * 줄지 않았으면 "N rows"(단수는 "row"), 줄었으면 "N of M".
+     */
+    countLabel?: (shown: number, total: number) => react.ReactNode;
+    /** 헤더의 열별 메뉴(이름 변경 / 숨기기 / 왼쪽·오른쪽으로 이동)를 켭니다, seed `Menu`. */
+    columnMenu?: boolean;
+    /** 헤더를 드래그해 열 순서를 바꿀 수 있게 합니다. @default true */
+    reorderable?: boolean;
+    /** 열 경계를 드래그해 너비를 바꿀 수 있게 합니다 (열별로 `resizable: false`로 끌 수
+     *  있습니다). @default true */
+    resizable?: boolean;
+    /** 제어할 열 순서(key 목록)입니다. */
+    columnOrder?: string[];
+    /** 비제어 방식으로 사용할 때의 초기 열 순서입니다. */
+    defaultColumnOrder?: string[];
+    /** 열 순서가 바뀔 때(드래그 재배치, 메뉴의 이동) 호출됩니다. */
+    onColumnOrderChange?: (order: string[]) => void;
+    /** 제어할, 숨겨진 열의 key 목록입니다. */
+    hiddenColumnKeys?: string[];
+    /** 비제어 방식으로 사용할 때의 초기 숨김 목록입니다. */
+    defaultHiddenColumnKeys?: string[];
+    /** 숨김 목록이 바뀔 때 호출됩니다. */
+    onHiddenColumnKeysChange?: (hidden: string[]) => void;
+    /** 제어할 열 너비(px) 맵입니다. */
+    columnWidths?: Record<string, number>;
+    /** 비제어 방식으로 사용할 때의 초기 열 너비 맵입니다. */
+    defaultColumnWidths?: Record<string, number>;
+    /** 열 너비가 바뀔 때(드래그 리사이즈) 호출됩니다. */
+    onColumnWidthsChange?: (widths: Record<string, number>) => void;
+    /** 제어할 열 이름 오버라이드 맵입니다 (열 메뉴의 인라인 이름 변경). */
+    columnLabels?: Record<string, string>;
+    /** 비제어 방식으로 사용할 때의 초기 열 이름 오버라이드입니다. */
+    defaultColumnLabels?: Record<string, string>;
+    /** 열 이름이 바뀔 때 호출됩니다. */
+    onColumnLabelsChange?: (labels: Record<string, string>) => void;
+    /** 순서/숨김/이름 중 무엇이든 바뀌어 "실제로 보여줄 열 목록"이 달라질 때마다,
+     *  그 결과(순서·숨김·이름이 반영된 `columns`)를 통째로 받는 편의 콜백입니다 --
+     *  위 세 쌍의 콜백을 각각 다루는 대신 한 곳에서 "지금 보이는 열 구성"을 저장하고
+     *  싶은 소비자를 위한 것입니다. */
+    onColumnsChange?: (columns: DataTableColumn<TRow>[]) => void;
+    /** 제어할, 열별 ColumnCalc 연산입니다. */
+    columnCalcOps?: Record<string, DataTableCalcOp>;
+    /** 비제어 방식으로 사용할 때의 초기 열별 ColumnCalc 연산입니다. */
+    defaultColumnCalcOps?: Record<string, DataTableCalcOp>;
+    /** 한 열의 ColumnCalc 연산이 바뀔 때 호출됩니다. */
+    onColumnCalcOpsChange?: (ops: Record<string, DataTableCalcOp>) => void;
+    /** 가로 스크롤 중 맨 앞 열(선택 열이 있으면 그것까지 포함)을 고정하고, 스크롤
+     *  그림자를 보여줍니다. */
+    stickyFirst?: boolean;
+    /** 가로 스크롤 중 맨 뒤 열을 고정합니다. */
+    stickyLast?: boolean;
+    /**
+     * `editable` 셀의 인라인 편집 커밋입니다. `Promise`를 반환하면 그 동안 셀이
+     * pending 상태(위젯 옆 스피너)를 보이고, resolve되면 편집이 닫히고, reject되면
+     * 마지막으로 알려진 값으로 되돌아가면서 셀 아래 거절 메시지를 보여줍니다 (crisp의
+     * 비동기 인식 `onEdit`과 동일한 계약). 동기(값 반환 없음)면 그 자리에서 즉시
+     * 커밋됩니다.
+     */
+    onEdit?: (id: string, key: string, value: string) => Promise<void> | void;
+    /** 행을 클릭할 수 있게 하는 호버 표시입니다 (crisp의 3%/4% 포그라운드 틴트). 커서
+     *  모양은 `onRowClick`이 있는지에 따로 달려 있습니다 -- 이 값과 독립적으로 켤 수
+     *  있습니다(crisp의 두 prop, `interactive`/`onRowClick`도 서로 독립적입니다). */
+    interactive?: boolean;
+    /** 행(선택/편집 대상이 아닌 셀)을 클릭했을 때 호출됩니다 -- 나중에 레코드 패널을
+     *  여는 용도 등에 씁니다. */
+    onRowClick?: (row: TRow) => void;
+    /** 주어지면 맨 아래에 crisp가 측정한 "+ New" 추가 행 버튼을 렌더링합니다. */
+    onAddRow?: () => void;
+    /** 추가 행 버튼의 라벨입니다. @default "New record" */
+    addRowLabel?: react.ReactNode;
+    /** 전체 본문을 이 상태로 대체합니다(로딩 아이콘 + `loadingLabel`) -- 필터/정렬
+     *  재조회나 최초 로드처럼 행 전체가 아직 없을 때를 위한 것입니다. `error`/빈 상태
+     *  보다 우선합니다. 인라인 스크롤 로딩 표시기(`onLoadMore`)와는 별개입니다. */
+    loading?: boolean;
+    /** `loading`일 때 스피너 옆에 보이는 텍스트입니다. @default "Loading..." */
+    loadingLabel?: react.ReactNode;
+    /** 주어지면 행 대신 이 내용을 본문에 렌더링합니다(crisp의 `.crisp-datatable-empty`
+     *  칸 재사용). `loading`보다는 아래, 빈 상태보다는 위 우선순위입니다. */
+    error?: react.ReactNode;
+    /** 검색/필터를 거치고도 행이 하나도 없을 때 본문에 렌더링할 내용입니다.
+     *  @default "No results." */
+    empty?: react.ReactNode;
+    /**
+     * Attio 스타일 무한 스크롤: 스크롤 컨테이너 바닥 근처의 sentinel 행이 뷰에 들어오면
+     * 호출됩니다. `Promise`를 반환하면 그동안 자동으로 `loadingMore`가 켜집니다(직접
+     * 제어하려면 `loadingMore`를 명시하세요). 생략하면 무한 스크롤 자체가 꺼집니다 --
+     * sentinel 행도, observer도 전혀 만들어지지 않습니다. 수동 페이지네이션 UI는 없습니다.
+     */
+    onLoadMore?: () => void | Promise<void>;
+    /** 다음 페이지가 더 있는지 여부입니다. `false`가 되면 sentinel 행이 사라지고 더는
+     *  트리거되지 않습니다. @default true */
+    hasMore?: boolean;
+    /** 이미 로드가 진행 중인지 여부(제어형) -- 생략하면 `onLoadMore`가 반환한
+     *  `Promise`로부터 내부적으로 계산합니다. */
+    loadingMore?: boolean;
+    /**
+     * 스크롤 컨테이너(`.crisp-table-scroll`에 대응하는 요소) 자체에 얹는 props입니다 --
+     * crisp의 `scrollProps` 계약과 동일: 예) `scrollProps={{ style: { maxHeight:
+     * "calc(100vh - 220px)" } }}`로 바운드된(내부 스크롤하는) 테이블을 만듭니다.
+     * `ref`/`onScroll`은 내부에서 소유합니다(가로 스크롤 그림자 추적용이라 전달해도
+     * 무시됩니다). 생략하면(기본값) 이 요소는 높이를 스스로 갖지 않고 콘텐츠 높이만큼
+     * 자라며, `flex: 1; min-height: 0`이 항상 켜져 있으므로 `<DataTable>` 자신에게
+     * `style={{ height: "100%" }}` 같은 바운드를 주는 것만으로도 "전체 높이" 모드가
+     * 됩니다 -- 새 prop 없이 기존 `style` 전달만으로 두 모드 다 지원됩니다.
+     */
+    scrollProps?: Omit<react.ComponentPropsWithoutRef<"div">, "ref" | "onScroll">;
+}
+/**
+ * @see https://seed-design.io/react/components/data-table
+ */
+declare const DataTable: <TRow extends {
+    id: string;
+}>(props: DataTableProps<TRow> & {
+    ref?: react.ForwardedRef<HTMLDivElement>;
+}) => react.ReactElement;
+
+export { DataTable };
+export type { DataTableColumn, DataTableProps };

package/dist/index.js

@@ -0,0 +1,10 @@
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+export { E as DataTable } from './DataTable-12s-Bd20OuMs.js';

package/dist/resize-12s-jQY-PX67.cjs

@@ -0,0 +1,58 @@
+'use client';
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+var jsxRuntime = require('react/jsx-runtime');
+var DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-CTRzgvMT.cjs');
+
+/**
+ * The column-edge resize grip -- geometry ported from crisp's `resizablepanel`
+ * recipe's "column" variant (`resizablepanel.recipe.ts`): a 7px hit target straddling
+ * the 1px grid line (not a 1px target of its own -- far too thin to reliably grab),
+ * its 3px inner bar invisible at rest and brand-solid on hover/drag. Uses native
+ * Pointer Capture (`setPointerCapture`) rather than a `window`-level listener pair:
+ * once captured, this SAME element keeps receiving `pointermove`/`pointerup` even
+ * after the cursor leaves it, so the drag math can live entirely in this one
+ * handler set with no effect/cleanup to get wrong.
+ */ function ColumnResizeHandle({ columnKey, width }) {
+    const { beginColumnResize, updateColumnResize, endColumnResize, isColumnResizing } = DataTable12sZml1x9Kr12s.useDataTableContext();
+    return /*#__PURE__*/ jsxRuntime.jsx("span", {
+        // Mouse/pointer-drag only for now (no keyboard equivalent yet) -- `aria-hidden`
+        // rather than `role="separator"` + `aria-label`, which would otherwise fold
+        // "Resize column" into the OWNING header cell's own accessible name (a
+        // columnheader's name is the concatenation of its own text plus every
+        // descendant's), turning "Name" into "Name Resize column" for anyone using an
+        // accessible-name query -- including this file's own tests.
+        "aria-hidden": "true",
+        className: "seed-data-table-resize-handle",
+        "data-resizing": isColumnResizing(columnKey),
+        draggable: false,
+        onPointerDown: (event)=>{
+            event.stopPropagation();
+            event.preventDefault();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            const startWidth = width ?? event.currentTarget.closest('[role="columnheader"]')?.getBoundingClientRect().width ?? 150;
+            beginColumnResize(columnKey, event.clientX, startWidth);
+        },
+        onPointerMove: (event)=>{
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                updateColumnResize(event.clientX);
+            }
+        },
+        onPointerUp: (event)=>{
+            event.currentTarget.releasePointerCapture(event.pointerId);
+            endColumnResize();
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+            className: "seed-data-table-resize-handle-inner"
+        })
+    });
+}
+
+exports.ColumnResizeHandle = ColumnResizeHandle;

package/dist/resize-12s-nsMvrmLt.js

@@ -0,0 +1,58 @@
+'use client';
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+import { jsx } from 'react/jsx-runtime';
+import { u as useDataTableContext } from './DataTable-12s-Zml1x9Kr-12s-Coi-3lUa.js';
+
+/**
+ * The column-edge resize grip -- geometry ported from crisp's `resizablepanel`
+ * recipe's "column" variant (`resizablepanel.recipe.ts`): a 7px hit target straddling
+ * the 1px grid line (not a 1px target of its own -- far too thin to reliably grab),
+ * its 3px inner bar invisible at rest and brand-solid on hover/drag. Uses native
+ * Pointer Capture (`setPointerCapture`) rather than a `window`-level listener pair:
+ * once captured, this SAME element keeps receiving `pointermove`/`pointerup` even
+ * after the cursor leaves it, so the drag math can live entirely in this one
+ * handler set with no effect/cleanup to get wrong.
+ */ function ColumnResizeHandle({ columnKey, width }) {
+    const { beginColumnResize, updateColumnResize, endColumnResize, isColumnResizing } = useDataTableContext();
+    return /*#__PURE__*/ jsx("span", {
+        // Mouse/pointer-drag only for now (no keyboard equivalent yet) -- `aria-hidden`
+        // rather than `role="separator"` + `aria-label`, which would otherwise fold
+        // "Resize column" into the OWNING header cell's own accessible name (a
+        // columnheader's name is the concatenation of its own text plus every
+        // descendant's), turning "Name" into "Name Resize column" for anyone using an
+        // accessible-name query -- including this file's own tests.
+        "aria-hidden": "true",
+        className: "seed-data-table-resize-handle",
+        "data-resizing": isColumnResizing(columnKey),
+        draggable: false,
+        onPointerDown: (event)=>{
+            event.stopPropagation();
+            event.preventDefault();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            const startWidth = width ?? event.currentTarget.closest('[role="columnheader"]')?.getBoundingClientRect().width ?? 150;
+            beginColumnResize(columnKey, event.clientX, startWidth);
+        },
+        onPointerMove: (event)=>{
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                updateColumnResize(event.clientX);
+            }
+        },
+        onPointerUp: (event)=>{
+            event.currentTarget.releasePointerCapture(event.pointerId);
+            endColumnResize();
+        },
+        children: /*#__PURE__*/ jsx("span", {
+            className: "seed-data-table-resize-handle-inner"
+        })
+    });
+}
+
+export { ColumnResizeHandle as C };

package/dist/states-12s-CLO_uVue.cjs

@@ -0,0 +1,125 @@
+'use client';
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var DataTable12s = require('./DataTable-12s-8LMBtS2u.cjs');
+var DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-CTRzgvMT.cjs');
+
+/**
+ * A small inline spinner, not seed's own `ProgressCircle` -- that component's
+ * smallest size (24px) is already bigger than crisp's own measured 16px loading
+ * icon, the same gap `editors.tsx`'s `EditPendingIndicator` already works around for
+ * its own (smaller still, 14px) in-cell pending spinner. Same shape, one size up,
+ * reusing the SAME global `rotate` keyframe (this file's own qvism recipe slot
+ * nests `.seed-data-table-loading-spinner` under it) rather than a third near-
+ * identical spinner.
+ */ function LoadingSpinner() {
+    return /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+        className: "seed-data-table-loading-spinner",
+        width: 16,
+        height: 16,
+        viewBox: "0 0 16 16",
+        fill: "none",
+        role: "presentation",
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("circle", {
+                cx: 8,
+                cy: 8,
+                r: 6.5,
+                stroke: "currentColor",
+                strokeOpacity: 0.25,
+                strokeWidth: 2
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                d: "M14.5 8a6.5 6.5 0 0 0-6.5-6.5",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                strokeLinecap: "round"
+            })
+        ]
+    });
+}
+/** The full-body empty/error row's own content -- one `<tr>`/`<td colSpan>` wrapping
+ *  this, rendered by `DataTable.tsx` itself (it already owns `totalCols`). Shared by
+ *  `empty` and `error` alike, matching crisp's own single `.crisp-datatable-empty`
+ *  class doing double duty for both. */ function EmptyStateContent({ children, classNames }) {
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: classNames.emptyState,
+        children: children
+    });
+}
+/** The full-body loading row's own content (spinner + `loadingLabel`). */ function LoadingStateContent({ label, classNames }) {
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: classNames.loadingState,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(LoadingSpinner, {}),
+            label
+        ]
+    });
+}
+/**
+ * Infinite scroll's own sentinel + "loading more" row -- the LAST child of
+ * `<tbody>` while `hasMore` (the headless `useDataTableInfiniteScroll`'s own
+ * return, read off context the same way `SelectAllCheckbox` reads `selectionState`).
+ * Renders nothing once `hasMore` is false -- there is no manual pagination
+ * fallback, matching DATATABLE-ATTIO-SPEC.md's auto-load-only contract. While a
+ * fetch is in flight (`loadingMore`) the SAME row shows the compact spinner
+ * (`loadingState`'s own `[data-inline]` modifier, a normal 36px row); at rest it's
+ * an empty sentinel row the IntersectionObserver watches.
+ */ function InfiniteScrollRow({ colSpan, classNames, loadingLabel }) {
+    const { sentinelRef, hasMore, loadingMore } = DataTable12sZml1x9Kr12s.useDataTableContext();
+    if (!hasMore) return null;
+    return /*#__PURE__*/ jsxRuntime.jsx("tr", {
+        ref: sentinelRef,
+        "aria-hidden": loadingMore ? undefined : "true",
+        children: /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.DataTableCell, {
+            colSpan: colSpan,
+            children: loadingMore && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: classNames.loadingState,
+                "data-inline": "",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(LoadingSpinner, {}),
+                    loadingLabel
+                ]
+            })
+        })
+    });
+}
+/** The trailing "+ New" add-row footer -- crisp's own `.crisp-datatable-addrow`
+ *  inside a zero-padding `.crisp-datatable-addcell`, its own `<tfoot>` (a table can
+ *  have more than one; the ColumnCalc summary footer, when both are present, is a
+ *  separate one, matching crisp's own two independent `<TableFooter>` rows). */ function AddRowFooter({ onAddRow, addRowLabel, colSpan, classNames }) {
+    return /*#__PURE__*/ jsxRuntime.jsx("tfoot", {
+        children: /*#__PURE__*/ jsxRuntime.jsx("tr", {
+            children: /*#__PURE__*/ jsxRuntime.jsx("td", {
+                className: classNames.addRowCell,
+                colSpan: colSpan,
+                children: /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                    type: "button",
+                    className: classNames.addRow,
+                    onClick: onAddRow,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.IconPlusLine_default, {
+                            size: 15
+                        }),
+                        addRowLabel
+                    ]
+                })
+            })
+        })
+    });
+}
+
+exports.AddRowFooter = AddRowFooter;
+exports.EmptyStateContent = EmptyStateContent;
+exports.InfiniteScrollRow = InfiniteScrollRow;
+exports.LoadingStateContent = LoadingStateContent;