@universe-platform/ui 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/index.d.mts

@@ -1,7 +1,39 @@
 import { ClassValue } from 'clsx';
+import { ColumnDef } from './columns';
+export { BaseColumnDef, COLUMN_CAPABILITIES, COLUMN_DEFAULT_INPUT_CONFIG, COLUMN_TYPES, COLUMN_TYPE_LABELS, ColumnCapabilities, ColumnConfig, ColumnConfigMap, ColumnDef, ColumnDefaultInputConfig, ColumnInfo, ColumnType, CurrencyConfig, ExtendedColumnInfo, GoogleContactConfig, GoogleContactNamePart, PhoneConfig, RelationConfig, SubTableConfig, TEXT_REPRESENTABLE_TYPES, TextRepresentableColumnType, TypedColumnDef, isTextRepresentable } from './columns';
+import { RecordData, CellValue } from './records';
+export { CellValue, ColumnValueMap, DriveFileValue, GoogleContactValue, LinkValue, RecordData, SubTableEntryValue, SubTableResolvedEntryValue } from './records';
+export { BaseComponent, ComponentType, EditorApp, EditorPage, PageComponent, PageInput, TableComponent } from './pages';
+import { SchemaDef } from './schema';
+export { SchemaDef, TableMeta } from './schema';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
 
 declare function cn(...inputs: ClassValue[]): string;
 
+/**
+ * WhatsApp opener and phone formatting utilities.
+ */
+/**
+ * Robust WhatsApp Opener (Desktop App with Web Fallback).
+ * Tries the direct protocol first (whatsapp://) and falls back to WhatsApp Web
+ * if the app is not installed (window didn't lose focus).
+ */
+declare function openWhatsAppChat(phone: string, defaultCountryCode?: string): void;
+/**
+ * Formats a phone number for local UI display (e.g. Israeli 05X-XXX-XXXX format).
+ */
+declare function formatPhoneDisplay(phone: string): string;
+
+interface PastelPalette {
+    bg: string;
+    text: string;
+    border: string;
+}
+declare const PASTEL_PALETTES: PastelPalette[];
+declare function getDeterministicPastelBadge(key: string): PastelPalette;
+
 /**
  * Core definitions for Universe UI components.
  * These interfaces define the standard contract that all generic visual components
@@ -41,6 +73,216 @@ interface BaseComponentProps<TData = any, TConfig = Record<string, any>> extends
     "data-testid"?: string;
 }
 
-declare const isUiLibraryReady = true;
+interface TableConfig extends SchemaDef {
+}
+type TableData = RecordData[];
+interface TableBlockProps extends BaseComponentProps<TableData, TableConfig> {
+    exportAction?: (payload: any) => Promise<any>;
+}
+interface CreateRecordPayload {
+    records: RecordData[];
+}
+interface UpdateRecordPayload {
+    modifications: Record<string, Record<string, any>>;
+}
+interface DeleteRecordPayload {
+    ids: string[];
+}
+
+declare function TableBlock(props: TableBlockProps): react_jsx_runtime.JSX.Element;
+
+interface UseColumnResizeOptions {
+    storageKey: string;
+    defaultWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    getMinColWidth?: (colName: string) => number;
+}
+declare function useColumnResize({ storageKey, defaultWidth, minWidth, maxWidth, getMinColWidth, }: UseColumnResizeOptions): {
+    columnWidths: Record<string, number>;
+    setColumnWidths: react.Dispatch<react.SetStateAction<Record<string, number>>>;
+    resizingCol: {
+        name: string;
+        startWidth: number;
+        startX: number;
+        minWidth: number;
+    } | null;
+    startResize: (colName: string, currentWidth: number, clientX: number, customMinWidth?: number) => void;
+    getWidth: (colName: string, fallback?: number) => number;
+    minWidth: number;
+};
+
+interface UseColumnReorderOptions {
+    onReorder: (draggedName: string, dropTargetName: string) => void | Promise<void>;
+    disabled?: boolean;
+}
+declare function useColumnReorder({ onReorder, disabled, }: UseColumnReorderOptions): {
+    draggedColName: string | null;
+    dragOverColName: string | null;
+    isDragging: (colName: string) => boolean;
+    isDragOver: (colName: string) => boolean;
+    getHeaderDragProps: (colName: string) => {
+        draggable: boolean;
+        onDragStart?: undefined;
+        onDragOver?: undefined;
+        onDragLeave?: undefined;
+        onDrop?: undefined;
+        onDragEnd?: undefined;
+    } | {
+        draggable: boolean;
+        onDragStart: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+        onDragLeave: () => void;
+        onDrop: (e: React.DragEvent) => void;
+        onDragEnd: () => void;
+    };
+};
+
+/**
+ * Measure the width of a given text string in canvas 2D context using the specified font.
+ */
+declare function measureTextWidth(text: string, font?: string): number;
+interface SplitTitleResult {
+    isSingleWord: boolean;
+    line1: string;
+    line2?: string;
+}
+/**
+ * Splits a header title:
+ * - 1 word: stays on 1 line.
+ * - 2 or more words: divided as equally as possible between 2 lines without cutting any word.
+ */
+declare function splitHeaderTitle(name: string): SplitTitleResult;
+/**
+ * Calculate the minimum column width needed to display the header title cleanly:
+ * - If 1 word: minimum width is that word + padding + icon.
+ * - If 2+ words: minimum width is the longest line + padding + icon.
+ * - For specialized field types like GOOGLE_CONTACT: ensures room for button.
+ * Words are NEVER cut or truncated with ellipsis.
+ */
+declare function calculateMinColumnWidth(name: string, isSubTable?: boolean, colType?: string): number;
+interface ColumnHeaderTitleProps {
+    name: string;
+    width?: number;
+    isSubTable?: boolean;
+}
+/**
+ * Header title component:
+ * - Default / when enough width: takes up entire line on 1 single row.
+ * - When column is shrunk below full-line width: divides evenly into 2 rows without cutting any word.
+ * - Single words always stay on 1 row.
+ */
+declare function ColumnHeaderTitle({ name, width, isSubTable }: ColumnHeaderTitleProps): react_jsx_runtime.JSX.Element;
+
+declare function formatConflictCellValue(rawVal: any, colDef?: ColumnDef | {
+    name: string;
+    type?: string;
+    config?: any;
+}, relationOptionsMap?: Record<string, any[]>): react__default.ReactNode;
+
+interface DatePickerCellProps {
+    value: CellValue<'DATE'> | Date | number;
+    onChange: (value: CellValue<'DATE'>) => void;
+    column?: ColumnDef;
+    readOnly?: boolean;
+}
+declare function DatePickerCell({ value, onChange, readOnly }: DatePickerCellProps): react_jsx_runtime.JSX.Element;
+
+interface TimePickerCellProps {
+    value: CellValue<'TIME'> | Date;
+    onChange: (value: CellValue<'TIME'>) => void;
+    column?: ColumnDef;
+    readOnly?: boolean;
+}
+declare function parseTimeParts(val: any): {
+    hour: number;
+    minute: number;
+} | null;
+declare function formatTimeIso(hour: number, minute: number): string;
+declare function formatTimeInput(input: string | null | undefined): string;
+declare function TimePickerCell({ value, onChange, readOnly }: TimePickerCellProps): react_jsx_runtime.JSX.Element;
+
+interface LinkPickerCellProps {
+    value: CellValue<'LINK'> | string;
+    onChange: (value: CellValue<'LINK'>) => void;
+    column?: ColumnDef;
+    readOnly?: boolean;
+}
+declare function parseLinkValue(val: CellValue<'LINK'> | string): {
+    url: string;
+    label: string;
+};
+declare function resolveProtocol(url: string): string;
+declare function LinkPickerCell({ value, onChange, readOnly }: LinkPickerCellProps): react_jsx_runtime.JSX.Element;
+
+interface RelationPickerCellProps {
+    value: CellValue<'RELATION'> | string;
+    onChange: (value: CellValue<'RELATION'>) => void;
+    column: ColumnDef<'RELATION'> | ColumnDef;
+    context?: any;
+    rowId?: string;
+    readOnly?: boolean;
+}
+/**
+ * Normalizes any relation value into a canonical string[] of record IDs.
+ * Handles legacy single-string records, empty strings, null/undefined, and object shapes.
+ */
+declare function normalizeRelationValue(val: any): string[];
+declare function RelationPickerCell({ value, onChange, column, context, rowId, readOnly, }: RelationPickerCellProps): react_jsx_runtime.JSX.Element;
+
+interface RelationFilterOption {
+    id: string;
+    label: string;
+}
+type RelationFilterPayload = string[] | {
+    operator: 'notIn';
+    values: string[];
+} | undefined;
+interface RelationFilterPopoverProps {
+    isOpen: boolean;
+    onClose: () => void;
+    column: ColumnDef;
+    triggerRect: DOMRect | null;
+    options: RelationFilterOption[];
+    filterValue?: string[] | {
+        operator: 'notIn';
+        values: string[];
+    };
+    selectedValues?: string[];
+    onSelectionChange: (payload: RelationFilterPayload) => void;
+    isLoading?: boolean;
+}
+declare function RelationFilterPopover({ isOpen, onClose, column, triggerRect, options, filterValue, selectedValues, onSelectionChange, isLoading, }: RelationFilterPopoverProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * UNIVERSE_COMPONENTS
+ * Dynamic Component Registry dictionary mapping component type strings (e.g., "TABLE")
+ * to their respective React component implementation.
+ */
+declare const UNIVERSE_COMPONENTS: {
+    readonly TABLE: typeof TableBlock;
+};
+type ComponentRegistry = typeof UNIVERSE_COMPONENTS;
+type UniverseComponentType = keyof ComponentRegistry;
+
+interface ToastItem {
+    id: string;
+    message: string;
+    type?: "error" | "success" | "info" | "warning";
+    title?: string;
+    duration?: number;
+}
+interface ToastContextType {
+    toasts: ToastItem[];
+    addToast: (toast: Omit<ToastItem, "id">) => string;
+    showError: (error: string | Error | null | undefined, title?: string) => void;
+    removeToast: (id: string) => void;
+}
+declare const ToastContext: react__default.Context<ToastContextType | undefined>;
+declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+declare function useToast(): ToastContextType;
 
-export { type BaseComponentProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentState, cn, isUiLibraryReady };
+export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, PASTEL_PALETTES, type PastelPalette, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type SplitTitleResult, TableBlock, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, calculateMinColumnWidth, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, getDeterministicPastelBadge, measureTextWidth, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, splitHeaderTitle, useColumnReorder, useColumnResize, useToast };

package/dist/index.d.ts

@@ -1,7 +1,39 @@
 import { ClassValue } from 'clsx';
+import { ColumnDef } from './columns';
+export { BaseColumnDef, COLUMN_CAPABILITIES, COLUMN_DEFAULT_INPUT_CONFIG, COLUMN_TYPES, COLUMN_TYPE_LABELS, ColumnCapabilities, ColumnConfig, ColumnConfigMap, ColumnDef, ColumnDefaultInputConfig, ColumnInfo, ColumnType, CurrencyConfig, ExtendedColumnInfo, GoogleContactConfig, GoogleContactNamePart, PhoneConfig, RelationConfig, SubTableConfig, TEXT_REPRESENTABLE_TYPES, TextRepresentableColumnType, TypedColumnDef, isTextRepresentable } from './columns';
+import { RecordData, CellValue } from './records';
+export { CellValue, ColumnValueMap, DriveFileValue, GoogleContactValue, LinkValue, RecordData, SubTableEntryValue, SubTableResolvedEntryValue } from './records';
+export { BaseComponent, ComponentType, EditorApp, EditorPage, PageComponent, PageInput, TableComponent } from './pages';
+import { SchemaDef } from './schema';
+export { SchemaDef, TableMeta } from './schema';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
 
 declare function cn(...inputs: ClassValue[]): string;
 
+/**
+ * WhatsApp opener and phone formatting utilities.
+ */
+/**
+ * Robust WhatsApp Opener (Desktop App with Web Fallback).
+ * Tries the direct protocol first (whatsapp://) and falls back to WhatsApp Web
+ * if the app is not installed (window didn't lose focus).
+ */
+declare function openWhatsAppChat(phone: string, defaultCountryCode?: string): void;
+/**
+ * Formats a phone number for local UI display (e.g. Israeli 05X-XXX-XXXX format).
+ */
+declare function formatPhoneDisplay(phone: string): string;
+
+interface PastelPalette {
+    bg: string;
+    text: string;
+    border: string;
+}
+declare const PASTEL_PALETTES: PastelPalette[];
+declare function getDeterministicPastelBadge(key: string): PastelPalette;
+
 /**
  * Core definitions for Universe UI components.
  * These interfaces define the standard contract that all generic visual components
@@ -41,6 +73,216 @@ interface BaseComponentProps<TData = any, TConfig = Record<string, any>> extends
     "data-testid"?: string;
 }
 
-declare const isUiLibraryReady = true;
+interface TableConfig extends SchemaDef {
+}
+type TableData = RecordData[];
+interface TableBlockProps extends BaseComponentProps<TableData, TableConfig> {
+    exportAction?: (payload: any) => Promise<any>;
+}
+interface CreateRecordPayload {
+    records: RecordData[];
+}
+interface UpdateRecordPayload {
+    modifications: Record<string, Record<string, any>>;
+}
+interface DeleteRecordPayload {
+    ids: string[];
+}
+
+declare function TableBlock(props: TableBlockProps): react_jsx_runtime.JSX.Element;
+
+interface UseColumnResizeOptions {
+    storageKey: string;
+    defaultWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    getMinColWidth?: (colName: string) => number;
+}
+declare function useColumnResize({ storageKey, defaultWidth, minWidth, maxWidth, getMinColWidth, }: UseColumnResizeOptions): {
+    columnWidths: Record<string, number>;
+    setColumnWidths: react.Dispatch<react.SetStateAction<Record<string, number>>>;
+    resizingCol: {
+        name: string;
+        startWidth: number;
+        startX: number;
+        minWidth: number;
+    } | null;
+    startResize: (colName: string, currentWidth: number, clientX: number, customMinWidth?: number) => void;
+    getWidth: (colName: string, fallback?: number) => number;
+    minWidth: number;
+};
+
+interface UseColumnReorderOptions {
+    onReorder: (draggedName: string, dropTargetName: string) => void | Promise<void>;
+    disabled?: boolean;
+}
+declare function useColumnReorder({ onReorder, disabled, }: UseColumnReorderOptions): {
+    draggedColName: string | null;
+    dragOverColName: string | null;
+    isDragging: (colName: string) => boolean;
+    isDragOver: (colName: string) => boolean;
+    getHeaderDragProps: (colName: string) => {
+        draggable: boolean;
+        onDragStart?: undefined;
+        onDragOver?: undefined;
+        onDragLeave?: undefined;
+        onDrop?: undefined;
+        onDragEnd?: undefined;
+    } | {
+        draggable: boolean;
+        onDragStart: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+        onDragLeave: () => void;
+        onDrop: (e: React.DragEvent) => void;
+        onDragEnd: () => void;
+    };
+};
+
+/**
+ * Measure the width of a given text string in canvas 2D context using the specified font.
+ */
+declare function measureTextWidth(text: string, font?: string): number;
+interface SplitTitleResult {
+    isSingleWord: boolean;
+    line1: string;
+    line2?: string;
+}
+/**
+ * Splits a header title:
+ * - 1 word: stays on 1 line.
+ * - 2 or more words: divided as equally as possible between 2 lines without cutting any word.
+ */
+declare function splitHeaderTitle(name: string): SplitTitleResult;
+/**
+ * Calculate the minimum column width needed to display the header title cleanly:
+ * - If 1 word: minimum width is that word + padding + icon.
+ * - If 2+ words: minimum width is the longest line + padding + icon.
+ * - For specialized field types like GOOGLE_CONTACT: ensures room for button.
+ * Words are NEVER cut or truncated with ellipsis.
+ */
+declare function calculateMinColumnWidth(name: string, isSubTable?: boolean, colType?: string): number;
+interface ColumnHeaderTitleProps {
+    name: string;
+    width?: number;
+    isSubTable?: boolean;
+}
+/**
+ * Header title component:
+ * - Default / when enough width: takes up entire line on 1 single row.
+ * - When column is shrunk below full-line width: divides evenly into 2 rows without cutting any word.
+ * - Single words always stay on 1 row.
+ */
+declare function ColumnHeaderTitle({ name, width, isSubTable }: ColumnHeaderTitleProps): react_jsx_runtime.JSX.Element;
+
+declare function formatConflictCellValue(rawVal: any, colDef?: ColumnDef | {
+    name: string;
+    type?: string;
+    config?: any;
+}, relationOptionsMap?: Record<string, any[]>): react__default.ReactNode;
+
+interface DatePickerCellProps {
+    value: CellValue<'DATE'> | Date | number;
+    onChange: (value: CellValue<'DATE'>) => void;
+    column?: ColumnDef;
+    readOnly?: boolean;
+}
+declare function DatePickerCell({ value, onChange, readOnly }: DatePickerCellProps): react_jsx_runtime.JSX.Element;
+
+interface TimePickerCellProps {
+    value: CellValue<'TIME'> | Date;
+    onChange: (value: CellValue<'TIME'>) => void;
+    column?: ColumnDef;
+    readOnly?: boolean;
+}
+declare function parseTimeParts(val: any): {
+    hour: number;
+    minute: number;
+} | null;
+declare function formatTimeIso(hour: number, minute: number): string;
+declare function formatTimeInput(input: string | null | undefined): string;
+declare function TimePickerCell({ value, onChange, readOnly }: TimePickerCellProps): react_jsx_runtime.JSX.Element;
+
+interface LinkPickerCellProps {
+    value: CellValue<'LINK'> | string;
+    onChange: (value: CellValue<'LINK'>) => void;
+    column?: ColumnDef;
+    readOnly?: boolean;
+}
+declare function parseLinkValue(val: CellValue<'LINK'> | string): {
+    url: string;
+    label: string;
+};
+declare function resolveProtocol(url: string): string;
+declare function LinkPickerCell({ value, onChange, readOnly }: LinkPickerCellProps): react_jsx_runtime.JSX.Element;
+
+interface RelationPickerCellProps {
+    value: CellValue<'RELATION'> | string;
+    onChange: (value: CellValue<'RELATION'>) => void;
+    column: ColumnDef<'RELATION'> | ColumnDef;
+    context?: any;
+    rowId?: string;
+    readOnly?: boolean;
+}
+/**
+ * Normalizes any relation value into a canonical string[] of record IDs.
+ * Handles legacy single-string records, empty strings, null/undefined, and object shapes.
+ */
+declare function normalizeRelationValue(val: any): string[];
+declare function RelationPickerCell({ value, onChange, column, context, rowId, readOnly, }: RelationPickerCellProps): react_jsx_runtime.JSX.Element;
+
+interface RelationFilterOption {
+    id: string;
+    label: string;
+}
+type RelationFilterPayload = string[] | {
+    operator: 'notIn';
+    values: string[];
+} | undefined;
+interface RelationFilterPopoverProps {
+    isOpen: boolean;
+    onClose: () => void;
+    column: ColumnDef;
+    triggerRect: DOMRect | null;
+    options: RelationFilterOption[];
+    filterValue?: string[] | {
+        operator: 'notIn';
+        values: string[];
+    };
+    selectedValues?: string[];
+    onSelectionChange: (payload: RelationFilterPayload) => void;
+    isLoading?: boolean;
+}
+declare function RelationFilterPopover({ isOpen, onClose, column, triggerRect, options, filterValue, selectedValues, onSelectionChange, isLoading, }: RelationFilterPopoverProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * UNIVERSE_COMPONENTS
+ * Dynamic Component Registry dictionary mapping component type strings (e.g., "TABLE")
+ * to their respective React component implementation.
+ */
+declare const UNIVERSE_COMPONENTS: {
+    readonly TABLE: typeof TableBlock;
+};
+type ComponentRegistry = typeof UNIVERSE_COMPONENTS;
+type UniverseComponentType = keyof ComponentRegistry;
+
+interface ToastItem {
+    id: string;
+    message: string;
+    type?: "error" | "success" | "info" | "warning";
+    title?: string;
+    duration?: number;
+}
+interface ToastContextType {
+    toasts: ToastItem[];
+    addToast: (toast: Omit<ToastItem, "id">) => string;
+    showError: (error: string | Error | null | undefined, title?: string) => void;
+    removeToast: (id: string) => void;
+}
+declare const ToastContext: react__default.Context<ToastContextType | undefined>;
+declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+declare function useToast(): ToastContextType;
 
-export { type BaseComponentProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentState, cn, isUiLibraryReady };
+export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, PASTEL_PALETTES, type PastelPalette, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type SplitTitleResult, TableBlock, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, calculateMinColumnWidth, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, getDeterministicPastelBadge, measureTextWidth, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, splitHeaderTitle, useColumnReorder, useColumnResize, useToast };