@iamfiro/design 0.0.0-stage → 0.3.0

package/lib/types/components/ChatComposer/ChatComposer.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+import './ChatComposer.css';
+export interface ChatComposerProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Enter or the send button. The text is cleared afterwards. */
+    onSubmit?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** A reply is being generated: the send button turns into stop, and Esc stops too. */
+    pending?: boolean;
+    onStop?: () => void;
+    /** Shows the + button on the left. */
+    onAttach?: () => void;
+    attachLabel?: string;
+    /** Left side of the toolbar, after +: mode chips, etc. */
+    tools?: ReactNode;
+    /** Right side of the toolbar, before send: model picker, voice, etc. */
+    actions?: ReactNode;
+    /** Above the text: attached files, quoted message. */
+    attachments?: ReactNode;
+    /** A strip under a hairline: connected apps, a hint. */
+    footer?: ReactNode;
+    /** Grows with the text up to this many lines, then scrolls. Default 8 (md) / 4 (sm). */
+    maxRows?: number;
+    /**
+     * md: the text above a toolbar · sm: one compact row — text, `actions` and a small send button
+     * side by side — for replies and comments. It still grows with the text up to `maxRows`.
+     */
+    size?: 'sm' | 'md';
+    autoFocus?: boolean;
+    name?: string;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * The message box of a chat. Enter sends, Shift+Enter adds a line (ignored while composing
+ * Korean with an IME). The text grows to `maxRows`; clicking anywhere on the empty surface
+ * puts the caret in the text.
+ */
+export declare function ChatComposer({ value: valueProp, defaultValue, onValueChange, onSubmit, placeholder, disabled, pending, onStop, onAttach, attachLabel, tools, actions, attachments, footer, maxRows, size, autoFocus, name, 'aria-label': ariaLabel, className, }: ChatComposerProps): import("react").JSX.Element;

package/lib/types/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type CodeLanguage } from './highlight';
+import './CodeBlock.css';
+export interface CodeBlockProps {
+    code: string;
+    language?: CodeLanguage;
+    /** Shown in a header row (file name, tab title…). */
+    title?: ReactNode;
+    /** One-line command style with a `$` prompt (install snippets). */
+    command?: boolean;
+    showLineNumbers?: boolean;
+    /** Collapse tall code to this height with a "더 보기" toggle. */
+    maxHeight?: number;
+    copyable?: boolean;
+    className?: string;
+}
+/** Read-only code with light syntax colors and a copy button. */
+export declare function CodeBlock({ code, language, title, command, showLineNumbers, maxHeight, copyable, className, }: CodeBlockProps): import("react").JSX.Element;

package/lib/types/components/CodeBlock/highlight.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A tiny highlighter: enough to read TSX / CSS / shell snippets in docs.
+ * It tokenizes with one ordered regex per language; anything unmatched is plain text.
+ */
+export type CodeLanguage = 'tsx' | 'css' | 'bash' | 'text';
+export interface Token {
+    type: 'plain' | 'comment' | 'string' | 'keyword' | 'tag' | 'attr' | 'number' | 'fn' | 'punct' | 'prop';
+    text: string;
+}
+export declare function tokenize(code: string, language: CodeLanguage): Token[];

package/lib/types/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,61 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type ColorFormat } from './color';
+import type { ColorPreset } from './presets';
+import './ColorPicker.css';
+export { CHART_COLOR_PRESETS } from './presets';
+export type { ColorPreset } from './presets';
+export interface ColorPickerProps {
+    /** Hex string: `#rrggbb`, or `#rrggbbaa` when `alpha` is on and the color is see-through. */
+    value?: string;
+    defaultValue?: string;
+    /** Fires on every change, also while dragging (preview). */
+    onValueChange?: (value: string) => void;
+    /** Fires once per finished change: pointer up, a key press, Enter / blur in a field, a swatch click. Not after Esc. */
+    onValueCommit?: (value: string) => void;
+    /** Adds the opacity slider and field; the value may then carry an alpha byte. */
+    alpha?: boolean;
+    /** Which text fields to show (and copy): HEX · RGB · HSL. */
+    format?: ColorFormat;
+    defaultFormat?: ColorFormat;
+    onFormatChange?: (format: ColorFormat) => void;
+    /** Preset swatches: CSS colors or token names. `CHART_COLOR_PRESETS` is a ready set. */
+    presets?: Array<string | ColorPreset>;
+    presetsLabel?: ReactNode;
+    /** Recently used colors (controlled). A color is added when focus leaves the picker after a change. */
+    recentColors?: string[];
+    defaultRecentColors?: string[];
+    onRecentColorsChange?: (colors: string[]) => void;
+    /** Hides the recent row entirely. */
+    showRecent?: boolean;
+    maxRecent?: number;
+    /** Show the screen eyedropper button when the browser supports it (EyeDropper API). */
+    eyeDropper?: boolean;
+    /** Show a copy button for the value in the current format. */
+    copyable?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * A color picker panel: saturation/brightness area, hue and opacity sliders, HEX · RGB · HSL fields,
+ * presets, recent colors, eyedropper and copy. Dragging previews (onValueChange), letting go commits
+ * (onValueCommit), Esc mid-drag restores the color from before the drag.
+ */
+export declare function ColorPicker({ value: valueProp, defaultValue, onValueChange, onValueCommit, alpha, format: formatProp, defaultFormat, onFormatChange, presets, presetsLabel, recentColors, defaultRecentColors, onRecentColorsChange, showRecent, maxRecent, eyeDropper, copyable, disabled, className, style, 'aria-label': ariaLabel, }: ColorPickerProps): import("react").JSX.Element;
+export interface ColorFieldProps extends Omit<ColorPickerProps, 'className' | 'style'> {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    size?: 'sm' | 'md' | 'lg';
+    invalid?: boolean;
+    /** Popover width in px. */
+    popoverWidth?: number;
+    /** Submits the hex value with forms. */
+    name?: string;
+    id?: string;
+    className?: string;
+    'aria-labelledby'?: string;
+}
+/** A field that looks like an input (color chip + value) and opens a ColorPicker in a popover. */
+export declare function ColorField({ value: valueProp, defaultValue, onValueChange, format: formatProp, defaultFormat, onFormatChange, recentColors, defaultRecentColors, onRecentColorsChange, open: openProp, defaultOpen, onOpenChange, size, invalid, popoverWidth, name, id, className, disabled, alpha, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...pickerProps }: ColorFieldProps): import("react").JSX.Element;

package/lib/types/components/ColorPicker/color.d.ts

@@ -0,0 +1,48 @@
+/** Red, green, blue 0–255 and alpha 0–1. */
+export interface Rgba {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/** Hue 0–360, saturation / value 0–1, alpha 0–1 (the picker's working model). */
+export interface Hsva {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+/** Hue 0–360, saturation / lightness 0–1, alpha 0–1. */
+export interface Hsla {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+}
+export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+export declare const clamp: (n: number, lo: number, hi: number) => number;
+/** #rgb, #rgba, #rrggbb, #rrggbbaa (the # is optional). */
+export declare function parseHex(input: string): Rgba | null;
+/** rgb(59 130 246) · rgba(59, 130, 246, 0.5) · bare "59, 130, 246". */
+export declare function parseRgb(input: string): Rgba | null;
+/** hsl(217 91% 60%) · hsla(217, 91%, 60%, 0.5) · bare "217, 91%, 60%". */
+export declare function parseHsl(input: string): Rgba | null;
+/** Any of the formats above. */
+export declare function parseColor(input: string): Rgba | null;
+export declare function rgbToHsv({ r, g, b, a }: Rgba): Hsva;
+export declare function hsvToRgb({ h, s, v, a }: Hsva): Rgba;
+export declare function rgbToHsl({ r, g, b, a }: Rgba): Hsla;
+export declare function hslToRgb({ h, s, l, a }: Hsla): Rgba;
+export declare const hsvToHex: (c: Hsva, alpha?: boolean) => string;
+export declare const hexToHsv: (hex: string) => Hsva | null;
+/** #rrggbb, or #rrggbbaa when `alpha` is on and the color isn't opaque. Lowercase. */
+export declare function formatHex({ r, g, b, a }: Rgba, alpha?: boolean): string;
+export declare function formatRgb({ r, g, b, a }: Rgba): string;
+export declare function formatHsl(rgb: Rgba): string;
+export declare function formatColor(rgb: Rgba, format: ColorFormat, alpha?: boolean): string;
+/** Normalizes any accepted color string to the picker's value (#rrggbb / #rrggbbaa), or null. */
+export declare function normalizeHex(input: string, alpha?: boolean): string | null;
+/** WCAG relative luminance 0–1 (alpha ignored). */
+export declare function luminance({ r, g, b }: Rgba): number;
+/** Whether dark marks (a check, text) read better than white ones on this color. */
+export declare const isLight: (rgb: Rgba) => boolean;

package/lib/types/components/ColorPicker/presets.d.ts

@@ -0,0 +1,7 @@
+/** A preset swatch: a CSS color or a token name (`--chart-1`), with an optional name for the tooltip. */
+export interface ColorPreset {
+    color: string;
+    label?: string;
+}
+/** The chart series tokens, a handy default palette. */
+export declare const CHART_COLOR_PRESETS: ColorPreset[];

package/lib/types/components/Combobox/Combobox.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import { type ListOption, type OptionState } from '../Listbox/Listbox';
+import './Combobox.css';
+interface ComboboxBaseProps<V extends string> {
+    options: ListOption<V>[];
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    invalid?: boolean;
+    leading?: ReactNode;
+    /** Custom matcher; defaults to label + keywords, ignoring case and spaces. */
+    filter?: (option: ListOption<V>, query: string) => boolean;
+    /** Controlled search text. */
+    inputValue?: string;
+    onInputChange?: (text: string) => void;
+    /** Adds a "'query' 추가" row when nothing matches exactly; you add the option and select it. */
+    onCreate?: (query: string) => void;
+    createLabel?: (query: string) => ReactNode;
+    emptyText?: ReactNode;
+    /** Bold the matched part of each label (default on). */
+    highlight?: boolean;
+    renderOption?: (option: ListOption<V>, state: OptionState & {
+        query: string;
+    }) => ReactNode;
+    maxHeight?: number;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+export type ComboboxProps<V extends string> = ComboboxBaseProps<V> & ({
+    multiple?: false;
+    value?: V | null;
+    defaultValue?: V | null;
+    onValueChange?: (value: V | null) => void;
+} | {
+    multiple: true;
+    value?: V[];
+    defaultValue?: V[];
+    onValueChange?: (value: V[]) => void;
+});
+export declare const defaultComboboxFilter: <V extends string>(o: ListOption<V>, q: string) => boolean;
+/**
+ * Searchable select. Type to filter, arrows to move, Enter to pick, Escape to close.
+ * `multiple` keeps the list open and shows picks as removable tags (Backspace removes the last).
+ */
+export declare function Combobox<V extends string>(props: ComboboxProps<V>): import("react").JSX.Element;
+export {};

package/lib/types/components/CommandMenu/CommandMenu.d.ts

@@ -0,0 +1,51 @@
+import { type MouseEvent, type ReactElement, type ReactNode } from 'react';
+/** One command row. */
+export interface CommandItem {
+    id: string;
+    label: string;
+    /** Gray text after the label: the app, a channel, a path. Searched too when it's a string. */
+    hint?: ReactNode;
+    /** Leading tile (IconTile with a logo or icon). */
+    icon?: ReactNode;
+    /** Key names that run it while the menu is open, e.g. ['mod', '1']. Shown as key caps. */
+    shortcut?: string[];
+    /** Extra search terms (aliases, English names, …). */
+    keywords?: string[];
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+export interface CommandGroup {
+    heading: string;
+    items: CommandItem[];
+}
+export interface CommandMenuProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** A button that opens the menu. */
+    trigger?: ReactElement<{
+        onClick?: (e: MouseEvent) => void;
+    }>;
+    groups: CommandGroup[];
+    /** Called with every command that runs (after the item's own onSelect). */
+    onSelect?: (item: CommandItem) => void;
+    /** Letter that toggles the menu with ⌘ (Mac) / Ctrl from anywhere on the page. `null` turns it off. */
+    shortcutKey?: string | null;
+    placeholder?: string;
+    /** Custom matching; the default looks at the label, a string hint and keywords. */
+    filter?: (item: CommandItem, query: string) => boolean;
+    emptyText?: (query: string) => ReactNode;
+    /** Bottom hint row. `false` hides it. */
+    footer?: ReactNode | false;
+    /** Close after a command runs. */
+    closeOnSelect?: boolean;
+    /** Accessible name of the dialog (not shown). */
+    title?: string;
+}
+export declare function defaultCommandFilter(item: CommandItem, query: string): boolean;
+/**
+ * A ⌘K palette: a search field over grouped commands. Arrows move, Enter runs, Tab jumps to the
+ * next section, each command's shortcut runs it directly, and Esc or a click outside closes it.
+ * Assembled from Dialog (bare, top), Input (bare), Listbox, Kbd and Text.
+ */
+export declare function CommandMenu({ open: openProp, defaultOpen, onOpenChange, trigger, groups, onSelect, shortcutKey, placeholder, filter, emptyText, footer, closeOnSelect, title, }: CommandMenuProps): import("react").JSX.Element;

package/lib/types/components/Comment/Comment.d.ts

@@ -0,0 +1,45 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type DateInput } from '../../primitives';
+import './Comment.css';
+export interface CommentProps {
+    /** Who wrote it. A string also draws the default avatar. */
+    author: ReactNode;
+    /** Replaces the default avatar (a string `author` gets `<Avatar name={author} />`). */
+    avatar?: ReactNode;
+    /** When it was written; shown as relative time ("2분 전") with the full date on hover. */
+    date?: DateInput;
+    /** Small things after the name: a role Badge, "수정됨". */
+    meta?: ReactNode;
+    /** Buttons on the right (reply, react, more). They appear while the comment is hovered or focused. */
+    actions?: ReactNode;
+    /** The message. Inline `<Text variant="code">` chips work inside. */
+    children?: ReactNode;
+    /** Under the message: attachments, a status line (`Collapsible variant="inline"`), reactions. */
+    footer?: ReactNode;
+    /**
+     * A follow-up from the same author right after their previous message: no avatar or name,
+     * just the text lined up under the previous one, closer together.
+     */
+    continued?: boolean;
+    /** Avatar size in px. The text column lines up with it. */
+    avatarSize?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** One message in a comment thread or discussion: avatar, name, relative time, text, actions. */
+export declare function Comment({ author, avatar, date, meta, actions, children, footer, continued, avatarSize, className, style, }: CommentProps): import("react").JSX.Element;
+export declare namespace Comment {
+    var Thread: typeof CommentThread;
+}
+export interface CommentThreadProps {
+    /** `Comment`s, oldest first. */
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * A column of comments separated by space, never by lines. `continued` comments sit closer
+ * to the one before them, so one person's run of messages reads as a group.
+ */
+export declare function CommentThread({ children, className, style, 'aria-label': ariaLabel }: CommentThreadProps): import("react").JSX.Element;

package/lib/types/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from 'react';
+import { DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub } from '../DropdownMenu/DropdownMenu';
+import './ContextMenu.css';
+export interface ContextMenuProps {
+    /** The area that opens the menu on right-click, touch long-press, or Shift+F10 / the ContextMenu key. */
+    trigger: ReactNode;
+    /** Items, labels, separators and submenus — the same parts as DropdownMenu. */
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Leave the browser's own context menu in place. */
+    disabled?: boolean;
+    /** Minimum panel width in px. */
+    minWidth?: number;
+    'aria-label'?: string;
+}
+/**
+ * A menu that opens where you right-click. On touch, holding still for TIMING.longPress opens it;
+ * from the keyboard, Shift+F10 or the ContextMenu key opens it under the focused element.
+ * The panel flips left / up near the viewport edge and stays inside it. Esc, an outside press
+ * or picking an item closes it, and focus returns to where it was.
+ */
+export declare function ContextMenu({ trigger, children, open: openProp, defaultOpen, onOpenChange, disabled, minWidth, 'aria-label': ariaLabel, }: ContextMenuProps): import("react").JSX.Element;
+export declare namespace ContextMenu {
+    var Item: typeof DropdownMenuItem;
+    var CheckboxItem: typeof DropdownMenuCheckboxItem;
+    var RadioGroup: typeof DropdownMenuRadioGroup;
+    var RadioItem: typeof DropdownMenuRadioItem;
+    var Label: typeof DropdownMenuLabel;
+    var Separator: typeof DropdownMenuSeparator;
+    var Sub: typeof DropdownMenuSub;
+}
+export declare const ContextMenuItem: typeof DropdownMenuItem;
+export declare const ContextMenuCheckboxItem: typeof DropdownMenuCheckboxItem;
+export declare const ContextMenuRadioGroup: typeof DropdownMenuRadioGroup;
+export declare const ContextMenuRadioItem: typeof DropdownMenuRadioItem;
+export declare const ContextMenuLabel: typeof DropdownMenuLabel;
+export declare const ContextMenuSeparator: typeof DropdownMenuSeparator;
+export declare const ContextMenuSub: typeof DropdownMenuSub;

package/lib/types/components/DataGrid/DataGrid.d.ts

@@ -0,0 +1,43 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type GridCellEdit, type GridColumn, type GridRow, type GridView } from './types';
+import './DataGrid.css';
+export interface DataGridProps<R extends GridRow> {
+    rows?: R[];
+    defaultRows?: R[];
+    onRowsChange?: (rows: R[]) => void;
+    columns?: GridColumn<R>[];
+    defaultColumns?: GridColumn<R>[];
+    onColumnsChange?: (columns: GridColumn<R>[]) => void;
+    /** Sort · filter · group · search · density. Keep it to save a "view". */
+    view?: GridView;
+    defaultView?: Partial<GridView>;
+    onViewChange?: (view: GridView) => void;
+    selectedRowIds?: string[];
+    defaultSelectedRowIds?: string[];
+    onSelectedRowIdsChange?: (ids: string[]) => void;
+    /** Builds a new row (+ 새로 만들기, paste past the end). Gets values from active filters / group. */
+    createRow?: (values: Record<string, unknown>) => R;
+    /** Every committed cell change (typing, paste, fill, clear). */
+    onCellEdit?: (edit: GridCellEdit<R>) => void;
+    /** Data can't change; sorting, filtering, resizing and copying still work. */
+    readOnly?: boolean;
+    /** Users may add, rename, retype and delete columns. */
+    columnEditing?: boolean;
+    toolbar?: boolean;
+    title?: ReactNode;
+    /** Extra controls at the end of the toolbar. */
+    actions?: ReactNode;
+    footer?: boolean;
+    /** Max height of the scrolling area. */
+    height?: number | string;
+    emptyState?: ReactNode;
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Spreadsheet-grade data table: Notion-style typed properties, views (sort · filter · group ·
+ * search), Sheets-style range selection, keyboard editing, clipboard and fill handle, column
+ * resize · reorder · pin · hide, row drag, footer calculations, undo/redo and row virtualization.
+ */
+export declare function DataGrid<R extends GridRow>(props: DataGridProps<R>): import("react").JSX.Element;

package/lib/types/components/DataGrid/GridPopover.d.ts

@@ -0,0 +1,43 @@
+import { type ReactNode } from 'react';
+import type { Anchor } from './anchor';
+export interface GridPopoverProps {
+    anchor: Anchor;
+    closing?: boolean;
+    onClose: () => void;
+    align?: 'start' | 'center' | 'end';
+    width?: number;
+    maxHeight?: number;
+    /**
+     * Where focus goes once the panel is positioned: the panel itself (menus, arrow keys work),
+     * its first text field, or its last one (a just-added filter rule). Omit to leave focus alone.
+     */
+    initialFocus?: 'panel' | 'input' | 'lastInput';
+    className?: string;
+    /** Keep focus where it is when the panel is pressed (editor popovers, the text stays in the cell). */
+    keepFocus?: boolean;
+    label?: string;
+    children: ReactNode;
+}
+/** Portal panel with the shared `.ds-popover` look, outside-press + Esc dismissal and exit animation. */
+export declare function GridPopover({ anchor, closing, onClose, align, width, maxHeight, initialFocus, className, keepFocus, label, children, }: GridPopoverProps): import("react").ReactPortal;
+export interface MenuItem {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    /** Text on the right (shortcut, current value). */
+    hint?: ReactNode;
+    checked?: boolean;
+    danger?: boolean;
+    disabled?: boolean;
+    /** Opens a nested page instead of acting. */
+    submenu?: boolean;
+    onSelect: () => void;
+}
+export type MenuEntry = MenuItem | 'separator' | {
+    heading: string;
+};
+/** Keyboard-navigable list of actions (↑↓ Home End, Enter, typeahead-free). */
+export declare function Menu({ items, className }: {
+    items: MenuEntry[];
+    className?: string;
+}): import("react").JSX.Element;

package/lib/types/components/DataGrid/anchor.d.ts

@@ -0,0 +1,5 @@
+import type { RefObject } from 'react';
+/** Something a popover can hang from: an element, or a point (right-click menus). */
+export type Anchor = RefObject<HTMLElement | null>;
+export declare function pointAnchor(x: number, y: number): Anchor;
+export declare function elementAnchor(el: Element | null): Anchor;

package/lib/types/components/DataGrid/model.d.ts

@@ -0,0 +1,61 @@
+import type { GridAggregate, GridColumn, GridColumnType, GridFilterOp, GridNumberFormat, GridOption, GridRow, GridView } from './types';
+import type { Tone } from '../../primitives';
+export declare const typeOf: (c: GridColumn<GridRow>) => GridColumnType;
+export declare function isEmptyValue(v: unknown): boolean;
+export declare const formatNumber: (n: number, format?: GridNumberFormat, decimals?: number) => string;
+export declare const toISODate: (d: Date) => string;
+export declare const todayISO: () => string;
+/** '2026-10-25' → '10월 25일' (the year only when it isn't this year). */
+export declare function formatDate(iso: string): string;
+/** Accepts 2026-10-25, 2026.10.25, 10/25, 10월 25일, 오늘, 내일, 어제. */
+export declare function parseDate(text: string): string | null;
+export declare function parseNumber(text: string): number | null;
+export declare const parseBoolean: (text: string) => boolean;
+/** Plain text of a value, for copying, searching and the edit field. */
+export declare function valueToText(column: GridColumn<GridRow>, v: unknown): string;
+/** Display text (formatted), used by default cells and footers. */
+export declare function displayText(column: GridColumn<GridRow>, v: unknown): string;
+export type ParseResult = {
+    ok: true;
+    value: unknown;
+    newOptions?: GridOption[];
+} | {
+    ok: false;
+    error: string;
+};
+/** Text → typed value. Unknown select labels become new options unless the column forbids it. */
+export declare function parseValue(column: GridColumn<GridRow>, text: string): ParseResult;
+export declare const nextOptionTone: (options?: GridOption[]) => Tone;
+/** Convert a value when a column changes type. */
+export declare function convertValue(from: GridColumn<GridRow>, to: GridColumn<GridRow>, v: unknown): unknown;
+/** Options a select column needs after a type change (every distinct label in the data). */
+export declare function optionsFromValues(rows: GridRow[], key: string, existing?: GridOption[]): GridOption[];
+export declare const FILTER_OPS: Record<GridColumnType, GridFilterOp[]>;
+export declare const FILTER_OP_LABEL: Record<GridFilterOp, string>;
+export declare const opNeedsValue: (op: GridFilterOp) => boolean;
+export declare function viewRows<R extends GridRow>(rows: R[], columns: GridColumn<R>[], view: GridView): R[];
+export interface GridGroup<R extends GridRow> {
+    key: string;
+    label: string;
+    /** The value new rows in this group get. */
+    value: unknown;
+    tone?: Tone;
+    rows: R[];
+}
+export declare function groupRows<R extends GridRow>(rows: R[], column: GridColumn<R>): GridGroup<R>[];
+export declare const AGGREGATE_LABEL: Record<GridAggregate, string>;
+export declare function aggregatesFor(type: GridColumnType): GridAggregate[];
+export declare function aggregate(column: GridColumn<GridRow>, rows: GridRow[], kind: GridAggregate): {
+    label: string;
+    value: string;
+} | null;
+export declare function toTSV(cells: string[][]): string;
+export declare function parseTSV(text: string): string[][];
+export declare function toCSV(columns: GridColumn<GridRow>[], rows: GridRow[]): string;
+/**
+ * Values for `count` cells after `source`. Numbers with a steady step continue the series
+ * (1, 2 → 3, 4); anything else repeats the pattern, like Sheets.
+ */
+export declare function fillSeries(source: unknown[], count: number): unknown[];
+export declare const filterOptions: (options: GridOption[], query: string) => GridOption[];
+export declare const newId: (prefix?: string) => string;

package/lib/types/components/DataGrid/panels.d.ts

@@ -0,0 +1,63 @@
+import type { GridAggregate, GridColumn, GridColumnType, GridOption, GridRow, GridSort, GridView } from './types';
+export interface ColumnMenuActions {
+    rename: (name: string) => void;
+    setType: (type: GridColumnType) => void;
+    update: (patch: Partial<GridColumn<GridRow>>) => void;
+    sort: (dir: 'asc' | 'desc') => void;
+    filter: () => void;
+    group: () => void;
+    insert: (side: 'left' | 'right') => void;
+    duplicate: () => void;
+    hide: () => void;
+    remove: () => void;
+}
+export declare function ColumnMenu({ column, grouped, canEditColumns, actions, }: {
+    column: GridColumn<GridRow>;
+    grouped: boolean;
+    canEditColumns: boolean;
+    actions: ColumnMenuActions;
+}): import("react").JSX.Element;
+export declare function AggregateMenu({ column, onPick }: {
+    column: GridColumn<GridRow>;
+    onPick: (a: GridAggregate) => void;
+}): import("react").JSX.Element;
+export declare function FilterPanel({ columns, view, onChange, }: {
+    columns: GridColumn<GridRow>[];
+    view: GridView;
+    onChange: (patch: Partial<GridView>) => void;
+}): import("react").JSX.Element;
+export declare function SortPanel({ columns, sorts, onChange }: {
+    columns: GridColumn<GridRow>[];
+    sorts: GridSort[];
+    onChange: (s: GridSort[]) => void;
+}): import("react").JSX.Element;
+export declare function GroupMenu({ columns, groupBy, onPick }: {
+    columns: GridColumn<GridRow>[];
+    groupBy: string | null;
+    onPick: (key: string | null) => void;
+}): import("react").JSX.Element;
+export declare function PropertiesPanel({ columns, onUpdate, onShowAll, }: {
+    columns: GridColumn<GridRow>[];
+    onUpdate: (key: string, patch: Partial<GridColumn<GridRow>>) => void;
+    onShowAll: (hidden: boolean) => void;
+}): import("react").JSX.Element;
+export declare function ViewPanel({ view, onChange, onExport }: {
+    view: GridView;
+    onChange: (p: Partial<GridView>) => void;
+    onExport: () => void;
+}): import("react").JSX.Element;
+export declare function OptionList({ options, query, selected, active, multiple, creatable, onActive, onPick, onRemove, }: {
+    options: GridOption[];
+    query: string;
+    selected: string[];
+    active: number;
+    multiple: boolean;
+    creatable: boolean;
+    onActive: (i: number) => void;
+    onPick: (label: string) => void;
+    onRemove: (label: string) => void;
+}): import("react").JSX.Element;
+export declare function DatePicker({ value, onPick }: {
+    value: string | null;
+    onPick: (iso: string | null) => void;
+}): import("react").JSX.Element;

package/lib/types/components/DataGrid/typeMeta.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import type { GridColumnType } from './types';
+export declare const TYPE_META: Record<GridColumnType, {
+    label: string;
+    icon: ReactNode;
+}>;