@universe-platform/ui 0.1.0-beta.8 → 0.1.0-beta.9

package/dist/index.d.mts

@@ -1,6 +1,9 @@
 import { ClassValue } from 'clsx';
+import { RecordData, SchemaDef, ColumnDef, CellValue } from '@universe-platform/shared';
+export * from '@universe-platform/shared';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode } from 'react';
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
 
 declare function cn(...inputs: ClassValue[]): string;
 
@@ -18,6 +21,14 @@ declare function openWhatsAppChat(phone: string, defaultCountryCode?: string): v
  */
 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
@@ -57,53 +68,6 @@ interface BaseComponentProps<TData = any, TConfig = Record<string, any>> extends
     "data-testid"?: string;
 }
 
-/**
- * Table data schemas and record definitions for Universe UI components.
- */
-interface ColumnDef {
-    name: string;
-    type?: string;
-    defaultValue?: any;
-    isRequired?: boolean;
-    isUnique?: boolean;
-    referencedTableId?: string;
-    referencedTableName?: string;
-    displayField?: string;
-    currencySymbol?: string;
-    subTableDisplayFields?: string[];
-    contactMapping?: {
-        phoneCol?: string;
-        emailCol?: string;
-        nameParts?: Array<{
-            type: 'LOCAL' | 'PARENT';
-            parentTableId?: string;
-            columnId: string;
-        }>;
-    } | null;
-    order?: number;
-    isHidden?: boolean;
-    config?: {
-        enableWhatsApp?: boolean;
-        actionType?: string;
-        actionPhoneColumn?: string;
-        [key: string]: any;
-    } | null;
-}
-interface SchemaDef {
-    columns?: ColumnDef[];
-    [key: string]: any;
-}
-interface RecordData {
-    id: string;
-    data: Record<string, any>;
-}
-interface DriveFileValue {
-    fileId: string;
-    fileUrl: string;
-    fileName: string;
-    url?: string;
-}
-
 interface TableConfig extends SchemaDef {
 }
 type TableData = RecordData[];
@@ -120,6 +84,145 @@ interface DeleteRecordPayload {
 
 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;
+
 /**
  * UNIVERSE_COMPONENTS
  * Dynamic Component Registry dictionary mapping component type strings (e.g., "TABLE")
@@ -144,11 +247,11 @@ interface ToastContextType {
     showError: (error: string | Error | null | undefined, title?: string) => void;
     removeToast: (id: string) => void;
 }
-declare const ToastContext: React.Context<ToastContextType | undefined>;
+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 ColumnDef, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, type DeleteRecordPayload, type DriveFileValue, type RecordData, type SchemaDef, TableBlock, type TableBlockProps, type TableConfig, type TableData, ToastContext, type ToastContextType, type ToastItem, ToastProvider, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, cn, formatPhoneDisplay, openWhatsAppChat, useToast };
+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, 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,6 +1,9 @@
 import { ClassValue } from 'clsx';
+import { RecordData, SchemaDef, ColumnDef, CellValue } from '@universe-platform/shared';
+export * from '@universe-platform/shared';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode } from 'react';
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
 
 declare function cn(...inputs: ClassValue[]): string;
 
@@ -18,6 +21,14 @@ declare function openWhatsAppChat(phone: string, defaultCountryCode?: string): v
  */
 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
@@ -57,53 +68,6 @@ interface BaseComponentProps<TData = any, TConfig = Record<string, any>> extends
     "data-testid"?: string;
 }
 
-/**
- * Table data schemas and record definitions for Universe UI components.
- */
-interface ColumnDef {
-    name: string;
-    type?: string;
-    defaultValue?: any;
-    isRequired?: boolean;
-    isUnique?: boolean;
-    referencedTableId?: string;
-    referencedTableName?: string;
-    displayField?: string;
-    currencySymbol?: string;
-    subTableDisplayFields?: string[];
-    contactMapping?: {
-        phoneCol?: string;
-        emailCol?: string;
-        nameParts?: Array<{
-            type: 'LOCAL' | 'PARENT';
-            parentTableId?: string;
-            columnId: string;
-        }>;
-    } | null;
-    order?: number;
-    isHidden?: boolean;
-    config?: {
-        enableWhatsApp?: boolean;
-        actionType?: string;
-        actionPhoneColumn?: string;
-        [key: string]: any;
-    } | null;
-}
-interface SchemaDef {
-    columns?: ColumnDef[];
-    [key: string]: any;
-}
-interface RecordData {
-    id: string;
-    data: Record<string, any>;
-}
-interface DriveFileValue {
-    fileId: string;
-    fileUrl: string;
-    fileName: string;
-    url?: string;
-}
-
 interface TableConfig extends SchemaDef {
 }
 type TableData = RecordData[];
@@ -120,6 +84,145 @@ interface DeleteRecordPayload {
 
 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;
+
 /**
  * UNIVERSE_COMPONENTS
  * Dynamic Component Registry dictionary mapping component type strings (e.g., "TABLE")
@@ -144,11 +247,11 @@ interface ToastContextType {
     showError: (error: string | Error | null | undefined, title?: string) => void;
     removeToast: (id: string) => void;
 }
-declare const ToastContext: React.Context<ToastContextType | undefined>;
+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 ColumnDef, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, type DeleteRecordPayload, type DriveFileValue, type RecordData, type SchemaDef, TableBlock, type TableBlockProps, type TableConfig, type TableData, ToastContext, type ToastContextType, type ToastItem, ToastProvider, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, cn, formatPhoneDisplay, openWhatsAppChat, useToast };
+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, 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 };