@portel/photon-core 2.4.0 → 2.5.0

package/dist/ui-types/Chart.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Chart - Purpose-driven type for data visualization
+ *
+ * Automatically renders as a chart with the specified type.
+ *
+ * @example
+ * ```typescript
+ * async revenue() {
+ *   return new Chart('line')
+ *     .title('Monthly Revenue')
+ *     .labels(['Jan', 'Feb', 'Mar', 'Apr'])
+ *     .series('Revenue', [1000, 1500, 1200, 1800])
+ *     .series('Costs', [800, 900, 850, 950]);
+ * }
+ *
+ * async distribution() {
+ *   return new Chart('pie')
+ *     .title('User Distribution')
+ *     .data([
+ *       { label: 'Free', value: 1000 },
+ *       { label: 'Pro', value: 500 },
+ *       { label: 'Enterprise', value: 100 },
+ *     ]);
+ * }
+ * ```
+ */
+import { PhotonUIType } from './base.js';
+export type ChartType = 'line' | 'bar' | 'pie' | 'doughnut' | 'area' | 'scatter' | 'radar';
+export interface ChartSeries {
+    name: string;
+    data: number[];
+    color?: string;
+}
+export interface ChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface ChartOptions {
+    title?: string;
+    subtitle?: string;
+    legend?: boolean | 'top' | 'bottom' | 'left' | 'right';
+    stacked?: boolean;
+    showGrid?: boolean;
+    showValues?: boolean;
+    animate?: boolean;
+    height?: number;
+    colors?: string[];
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+}
+export declare class Chart extends PhotonUIType {
+    readonly _photonType: "chart";
+    private _type;
+    private _labels;
+    private _series;
+    private _data;
+    private _options;
+    /**
+     * Create a new Chart
+     * @param type Chart type (line, bar, pie, etc.)
+     */
+    constructor(type?: ChartType);
+    /**
+     * Set chart title
+     */
+    title(title: string): this;
+    /**
+     * Set chart subtitle
+     */
+    subtitle(subtitle: string): this;
+    /**
+     * Set X-axis labels (for line, bar, area charts)
+     */
+    labels(labels: string[]): this;
+    /**
+     * Add a data series (for line, bar, area charts)
+     */
+    series(name: string, data: number[], color?: string): this;
+    /**
+     * Set pie/doughnut data points
+     */
+    data(points: ChartDataPoint[] | Array<{
+        label: string;
+        value: number;
+    }>): this;
+    /**
+     * Configure legend
+     */
+    legend(position?: boolean | 'top' | 'bottom' | 'left' | 'right'): this;
+    /**
+     * Enable stacked mode (for bar/area charts)
+     */
+    stacked(enabled?: boolean): this;
+    /**
+     * Show/hide grid lines
+     */
+    grid(enabled?: boolean): this;
+    /**
+     * Show values on chart
+     */
+    showValues(enabled?: boolean): this;
+    /**
+     * Enable/disable animations
+     */
+    animate(enabled?: boolean): this;
+    /**
+     * Set chart height
+     */
+    height(pixels: number): this;
+    /**
+     * Set color palette
+     */
+    colors(colors: string[]): this;
+    /**
+     * Set X-axis label
+     */
+    xAxis(label: string): this;
+    /**
+     * Set Y-axis label
+     */
+    yAxis(label: string): this;
+    toJSON(): {
+        _photonType: "chart";
+        chartType: ChartType;
+        labels: string[];
+        series: ChartSeries[];
+        data: ChartDataPoint[];
+        options: ChartOptions;
+    };
+    /**
+     * Render as plain text for MCP clients
+     */
+    toString(): string;
+}
+//# sourceMappingURL=Chart.d.ts.map

package/dist/ui-types/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/ui-types/Chart.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3F,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,qBAAa,KAAM,SAAQ,YAAY;IACrC,QAAQ,CAAC,WAAW,EAAG,OAAO,CAAU;IAExC,OAAO,CAAC,KAAK,CAAY;IACzB,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,KAAK,CAAwB;IACrC,OAAO,CAAC,QAAQ,CAId;IAEF;;;OAGG;gBACS,IAAI,GAAE,SAAkB;IAKpC;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAKhC;;OAEG;IACH,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI;IAK9B;;OAEG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI;IAK1D;;OAEG;IACH,IAAI,CAAC,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,IAAI;IAK9E;;OAEG;IACH,MAAM,CAAC,QAAQ,GAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAc,GAAG,IAAI;IAK5E;;OAEG;IACH,OAAO,CAAC,OAAO,GAAE,OAAc,GAAG,IAAI;IAKtC;;OAEG;IACH,IAAI,CAAC,OAAO,GAAE,OAAc,GAAG,IAAI;IAKnC;;OAEG;IACH,UAAU,CAAC,OAAO,GAAE,OAAc,GAAG,IAAI;IAKzC;;OAEG;IACH,OAAO,CAAC,OAAO,GAAE,OAAc,GAAG,IAAI;IAKtC;;OAEG;IACH,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAK5B;;OAEG;IACH,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI;IAK9B;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,MAAM;;;;;;;;IAWN;;OAEG;IACH,QAAQ,IAAI,MAAM;CAiCnB"}

package/dist/ui-types/Chart.js

@@ -0,0 +1,188 @@
+/**
+ * Chart - Purpose-driven type for data visualization
+ *
+ * Automatically renders as a chart with the specified type.
+ *
+ * @example
+ * ```typescript
+ * async revenue() {
+ *   return new Chart('line')
+ *     .title('Monthly Revenue')
+ *     .labels(['Jan', 'Feb', 'Mar', 'Apr'])
+ *     .series('Revenue', [1000, 1500, 1200, 1800])
+ *     .series('Costs', [800, 900, 850, 950]);
+ * }
+ *
+ * async distribution() {
+ *   return new Chart('pie')
+ *     .title('User Distribution')
+ *     .data([
+ *       { label: 'Free', value: 1000 },
+ *       { label: 'Pro', value: 500 },
+ *       { label: 'Enterprise', value: 100 },
+ *     ]);
+ * }
+ * ```
+ */
+import { PhotonUIType } from './base.js';
+export class Chart extends PhotonUIType {
+    _photonType = 'chart';
+    _type;
+    _labels = [];
+    _series = [];
+    _data = []; // For pie/doughnut
+    _options = {
+        legend: true,
+        showGrid: true,
+        animate: true,
+    };
+    /**
+     * Create a new Chart
+     * @param type Chart type (line, bar, pie, etc.)
+     */
+    constructor(type = 'line') {
+        super();
+        this._type = type;
+    }
+    /**
+     * Set chart title
+     */
+    title(title) {
+        this._options.title = title;
+        return this;
+    }
+    /**
+     * Set chart subtitle
+     */
+    subtitle(subtitle) {
+        this._options.subtitle = subtitle;
+        return this;
+    }
+    /**
+     * Set X-axis labels (for line, bar, area charts)
+     */
+    labels(labels) {
+        this._labels = labels;
+        return this;
+    }
+    /**
+     * Add a data series (for line, bar, area charts)
+     */
+    series(name, data, color) {
+        this._series.push({ name, data, color });
+        return this;
+    }
+    /**
+     * Set pie/doughnut data points
+     */
+    data(points) {
+        this._data = points;
+        return this;
+    }
+    /**
+     * Configure legend
+     */
+    legend(position = true) {
+        this._options.legend = position;
+        return this;
+    }
+    /**
+     * Enable stacked mode (for bar/area charts)
+     */
+    stacked(enabled = true) {
+        this._options.stacked = enabled;
+        return this;
+    }
+    /**
+     * Show/hide grid lines
+     */
+    grid(enabled = true) {
+        this._options.showGrid = enabled;
+        return this;
+    }
+    /**
+     * Show values on chart
+     */
+    showValues(enabled = true) {
+        this._options.showValues = enabled;
+        return this;
+    }
+    /**
+     * Enable/disable animations
+     */
+    animate(enabled = true) {
+        this._options.animate = enabled;
+        return this;
+    }
+    /**
+     * Set chart height
+     */
+    height(pixels) {
+        this._options.height = pixels;
+        return this;
+    }
+    /**
+     * Set color palette
+     */
+    colors(colors) {
+        this._options.colors = colors;
+        return this;
+    }
+    /**
+     * Set X-axis label
+     */
+    xAxis(label) {
+        this._options.xAxisLabel = label;
+        return this;
+    }
+    /**
+     * Set Y-axis label
+     */
+    yAxis(label) {
+        this._options.yAxisLabel = label;
+        return this;
+    }
+    toJSON() {
+        return {
+            _photonType: this._photonType,
+            chartType: this._type,
+            labels: this._labels,
+            series: this._series,
+            data: this._data,
+            options: this._options,
+        };
+    }
+    /**
+     * Render as plain text for MCP clients
+     */
+    toString() {
+        const lines = [];
+        if (this._options.title) {
+            lines.push(`## ${this._options.title}`);
+            if (this._options.subtitle)
+                lines.push(this._options.subtitle);
+            lines.push('');
+        }
+        // Pie/doughnut: show as list
+        if ((this._type === 'pie' || this._type === 'doughnut') && this._data.length > 0) {
+            const total = this._data.reduce((sum, d) => sum + d.value, 0);
+            for (const d of this._data) {
+                const pct = total > 0 ? ((d.value / total) * 100).toFixed(1) : '0';
+                lines.push(`- ${d.label}: ${d.value} (${pct}%)`);
+            }
+            return lines.join('\n');
+        }
+        // Series charts: show as table
+        if (this._series.length > 0 && this._labels.length > 0) {
+            const headers = ['', ...this._series.map(s => s.name)];
+            lines.push('| ' + headers.join(' | ') + ' |');
+            lines.push('| ' + headers.map(() => '---').join(' | ') + ' |');
+            for (let i = 0; i < this._labels.length; i++) {
+                const row = [this._labels[i], ...this._series.map(s => String(s.data[i] ?? ''))];
+                lines.push('| ' + row.join(' | ') + ' |');
+            }
+        }
+        return lines.join('\n');
+    }
+}
+//# sourceMappingURL=Chart.js.map

package/dist/ui-types/Chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.js","sourceRoot":"","sources":["../../src/ui-types/Chart.ts"],"names":[],"mappings":"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"}

package/dist/ui-types/Field.d.ts

@@ -0,0 +1,342 @@
+/**
+ * Field - Unified field system for UI types
+ *
+ * Fields define how data is displayed. They work across Table, Cards, List, etc.
+ * Each field type handles its own rendering logic and formatting.
+ *
+ * @example
+ * ```typescript
+ * import { Field, Table, Cards } from '@portel/photon-core';
+ *
+ * // Define fields once, use anywhere
+ * const productFields = [
+ *   Field.image('thumbnail', { width: 80, rounded: true }),
+ *   Field.text('name', { link: '/products/{id}' }),
+ *   Field.price('price', { original: 'msrp', currency: 'USD' }),
+ *   Field.rating('rating', { count: 'reviewCount' }),
+ *   Field.badge('status', { colors: { active: 'green' } }),
+ *   Field.actions([{ label: 'Edit', method: 'edit' }]),
+ * ];
+ *
+ * // Works in Table
+ * new Table().fields(productFields).rows(data);
+ *
+ * // Works in Cards
+ * new Cards().fields(productFields).items(data);
+ * ```
+ */
+export type FieldAlignment = 'left' | 'center' | 'right';
+export interface BaseFieldOptions {
+    /** Display label (auto-inferred from source if not provided) */
+    label?: string;
+    /** Enable sorting on this field */
+    sortable?: boolean;
+    /** Sort by different field */
+    sortBy?: string;
+    /** Text alignment */
+    align?: FieldAlignment;
+    /** Column width (CSS value like '100px', '20%') */
+    columnWidth?: string;
+    /** Text to show when value is empty/null */
+    emptyText?: string;
+    /** Hide this field */
+    hidden?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Tooltip text */
+    tooltip?: string;
+}
+export interface TextFieldOptions extends BaseFieldOptions {
+    /** Make text a link. Use {field} for interpolation */
+    link?: string;
+    /** Open link in new tab */
+    external?: boolean;
+    /** Truncate text to max characters */
+    truncate?: number;
+    /** Text variant */
+    variant?: 'heading' | 'body' | 'caption' | 'code';
+    /** Make text copyable */
+    copyable?: boolean;
+}
+export interface EmailFieldOptions extends BaseFieldOptions {
+    /** Show as mailto link */
+    linked?: boolean;
+}
+export interface UrlFieldOptions extends BaseFieldOptions {
+    /** Display text (otherwise shows URL) */
+    text?: string;
+    /** Truncate URL display */
+    truncate?: number;
+}
+export interface PhoneFieldOptions extends BaseFieldOptions {
+    /** Show as tel: link */
+    linked?: boolean;
+    /** Format pattern */
+    format?: string;
+}
+export interface NumberFieldOptions extends BaseFieldOptions {
+    /** Decimal places */
+    decimals?: number;
+    /** Use compact notation (1.2K, 5M) */
+    compact?: boolean;
+    /** Prefix text */
+    prefix?: string;
+    /** Suffix text */
+    suffix?: string;
+    /** Locale for formatting */
+    locale?: string;
+}
+export interface CurrencyFieldOptions extends BaseFieldOptions {
+    /** Currency code (USD, EUR, etc.) */
+    currency?: string;
+    /** Locale for formatting */
+    locale?: string;
+    /** Show currency symbol */
+    showSymbol?: boolean;
+    /** Decimal places */
+    decimals?: number;
+}
+export interface PercentFieldOptions extends BaseFieldOptions {
+    /** Decimal places */
+    decimals?: number;
+    /** Multiply by 100 (if value is 0.5 for 50%) */
+    multiply?: boolean;
+}
+export type DateFormat = 'relative' | 'short' | 'medium' | 'long' | 'iso' | string;
+export interface DateFieldOptions extends BaseFieldOptions {
+    /** Date format */
+    format?: DateFormat;
+    /** Show time component */
+    showTime?: boolean;
+    /** Locale for formatting */
+    locale?: string;
+}
+export interface TimeFieldOptions extends BaseFieldOptions {
+    /** Time format */
+    format?: '12h' | '24h';
+    /** Show seconds */
+    showSeconds?: boolean;
+}
+export interface DateRangeFieldOptions extends BaseFieldOptions {
+    /** End date source */
+    endSource: string;
+    /** Format for dates */
+    format?: DateFormat;
+    /** Separator between dates */
+    separator?: string;
+}
+export interface BooleanFieldOptions extends BaseFieldOptions {
+    /** Label for true value */
+    trueLabel?: string;
+    /** Label for false value */
+    falseLabel?: string;
+    /** Icon for true value */
+    trueIcon?: string;
+    /** Icon for false value */
+    falseIcon?: string;
+    /** Use colored badges instead of icons */
+    asBadge?: boolean;
+}
+export interface ImageFieldOptions extends BaseFieldOptions {
+    /** Image width */
+    width?: number;
+    /** Image height */
+    height?: number;
+    /** Make image circular */
+    rounded?: boolean;
+    /** Fallback image URL */
+    fallback?: string;
+    /** Alt text source */
+    altSource?: string;
+    /** Enable lightbox on click */
+    lightbox?: boolean;
+}
+export interface AvatarFieldOptions extends BaseFieldOptions {
+    /** Size in pixels */
+    size?: number;
+    /** Source for name (for initials fallback) */
+    nameSource?: string;
+}
+export interface GalleryFieldOptions extends BaseFieldOptions {
+    /** Max images to show inline */
+    maxVisible?: number;
+    /** Thumbnail size */
+    thumbnailSize?: number;
+}
+export interface FileFieldOptions extends BaseFieldOptions {
+    /** Show file size */
+    showSize?: boolean;
+    /** Show file type icon */
+    showIcon?: boolean;
+}
+export interface BadgeFieldOptions extends BaseFieldOptions {
+    /** Color mapping: { value: color } */
+    colors?: Record<string, string>;
+    /** Icon mapping: { value: icon } */
+    icons?: Record<string, string>;
+    /** Variant style */
+    variant?: 'solid' | 'outline' | 'subtle';
+    /** Size */
+    size?: 'sm' | 'md' | 'lg';
+}
+export interface TagsFieldOptions extends BaseFieldOptions {
+    /** Max tags to show */
+    max?: number;
+    /** Color for tags */
+    color?: string;
+}
+export interface RatingFieldOptions extends BaseFieldOptions {
+    /** Maximum rating value */
+    max?: number;
+    /** Source for review count */
+    countSource?: string;
+    /** Show numeric value */
+    showValue?: boolean;
+    /** Icon for filled star */
+    icon?: string;
+    /** Color for stars */
+    color?: string;
+}
+export interface PriceFieldOptions extends BaseFieldOptions {
+    /** Source for original/compare-at price */
+    originalSource?: string;
+    /** Currency code */
+    currency?: string;
+    /** Locale for formatting */
+    locale?: string;
+    /** Show discount percentage badge */
+    showDiscount?: boolean;
+}
+export interface StockFieldOptions extends BaseFieldOptions {
+    /** Label when in stock */
+    inStockLabel?: string;
+    /** Label when out of stock */
+    outOfStockLabel?: string;
+    /** Threshold for "low stock" warning */
+    lowStockThreshold?: number;
+    /** Label for low stock */
+    lowStockLabel?: string;
+    /** Show quantity */
+    showQuantity?: boolean;
+}
+export interface QuantityFieldOptions extends BaseFieldOptions {
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Method to call on change */
+    onChange?: string;
+}
+export interface UserFieldOptions extends BaseFieldOptions {
+    /** Source for avatar image */
+    avatarSource?: string;
+    /** Source for display name */
+    nameSource?: string;
+    /** Source for secondary text (email, role) */
+    secondarySource?: string;
+    /** Link template */
+    link?: string;
+}
+export interface ReferenceFieldOptions extends BaseFieldOptions {
+    /** Source for display text */
+    displaySource?: string;
+    /** Link template */
+    link?: string;
+    /** Resource type (for routing) */
+    resource?: string;
+}
+export interface ActionItem {
+    /** Button label */
+    label: string;
+    /** Photon method to call */
+    method: string;
+    /** Icon name */
+    icon?: string;
+    /** Button variant */
+    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+    /** Require confirmation */
+    confirm?: boolean | string;
+    /** Confirmation message */
+    confirmMessage?: string;
+    /** Disable condition (field name that must be truthy to disable) */
+    disabledWhen?: string;
+    /** Hide condition */
+    hiddenWhen?: string;
+}
+export interface ActionsFieldOptions extends BaseFieldOptions {
+    /** Show as dropdown menu */
+    dropdown?: boolean;
+    /** Dropdown trigger label */
+    dropdownLabel?: string;
+}
+export type RenderFunction = (value: any, record: Record<string, any>) => string;
+export interface CustomFieldOptions extends BaseFieldOptions {
+    /** Render function */
+    render: RenderFunction;
+}
+export type FieldType = 'text' | 'email' | 'url' | 'phone' | 'number' | 'currency' | 'percent' | 'date' | 'datetime' | 'time' | 'dateRange' | 'boolean' | 'image' | 'avatar' | 'gallery' | 'file' | 'badge' | 'tags' | 'rating' | 'price' | 'stock' | 'quantity' | 'user' | 'reference' | 'actions' | 'custom';
+export interface FieldDefinition {
+    type: FieldType;
+    source: string;
+    options: Record<string, any>;
+    actions?: ActionItem[];
+    render?: RenderFunction;
+}
+/**
+ * Field factory for creating field definitions
+ *
+ * @example
+ * ```typescript
+ * const fields = [
+ *   Field.text('name'),
+ *   Field.email('email'),
+ *   Field.price('price', { currency: 'USD', originalSource: 'msrp' }),
+ *   Field.badge('status', { colors: { active: 'green', inactive: 'gray' } }),
+ *   Field.actions([{ label: 'Edit', method: 'edit' }]),
+ * ];
+ * ```
+ */
+export declare const Field: {
+    text(source: string, options?: TextFieldOptions): FieldDefinition;
+    email(source: string, options?: EmailFieldOptions): FieldDefinition;
+    url(source: string, options?: UrlFieldOptions): FieldDefinition;
+    phone(source: string, options?: PhoneFieldOptions): FieldDefinition;
+    number(source: string, options?: NumberFieldOptions): FieldDefinition;
+    currency(source: string, options?: CurrencyFieldOptions): FieldDefinition;
+    percent(source: string, options?: PercentFieldOptions): FieldDefinition;
+    date(source: string, options?: DateFieldOptions): FieldDefinition;
+    datetime(source: string, options?: DateFieldOptions): FieldDefinition;
+    time(source: string, options?: TimeFieldOptions): FieldDefinition;
+    dateRange(startSource: string, options: DateRangeFieldOptions): FieldDefinition;
+    boolean(source: string, options?: BooleanFieldOptions): FieldDefinition;
+    image(source: string, options?: ImageFieldOptions): FieldDefinition;
+    avatar(source: string, options?: AvatarFieldOptions): FieldDefinition;
+    gallery(source: string, options?: GalleryFieldOptions): FieldDefinition;
+    file(source: string, options?: FileFieldOptions): FieldDefinition;
+    badge(source: string, options?: BadgeFieldOptions): FieldDefinition;
+    tags(source: string, options?: TagsFieldOptions): FieldDefinition;
+    rating(source: string, options?: RatingFieldOptions): FieldDefinition;
+    price(source: string, options?: PriceFieldOptions): FieldDefinition;
+    stock(source: string, options?: StockFieldOptions): FieldDefinition;
+    quantity(source: string, options?: QuantityFieldOptions): FieldDefinition;
+    user(source: string, options?: UserFieldOptions): FieldDefinition;
+    reference(source: string, options?: ReferenceFieldOptions): FieldDefinition;
+    actions(items: ActionItem[], options?: ActionsFieldOptions): FieldDefinition;
+    custom(source: string, render: RenderFunction, options?: BaseFieldOptions): FieldDefinition;
+};
+/**
+ * Get value from record using dot notation
+ */
+export declare function getFieldValue(record: Record<string, any>, source: string): any;
+/**
+ * Format label from source (camelCase → Title Case)
+ */
+export declare function formatFieldLabel(source: string): string;
+/**
+ * Interpolate template string with record values
+ * e.g., "/users/{id}" with { id: 123 } → "/users/123"
+ */
+export declare function interpolateTemplate(template: string, record: Record<string, any>): string;
+//# sourceMappingURL=Field.d.ts.map