optikos 0.4.0 → 0.5.0

package/dist/optikos.css

@@ -1535,6 +1535,63 @@
   }
 }
 
+@layer optikos {
+  .op-columntotals {
+    display: grid;
+    grid-template-columns: var(--op-grid-cols);
+    box-sizing: border-box;
+    flex: none;
+    overflow: hidden;
+    min-block-size: var(--op-grid-row-height, var(--op-row-height));
+    border-block-start: var(--op-border-width) solid var(--op-grid-header-border, var(--op-color-border-strong));
+    background: var(--op-grid-total-bg, var(--op-color-surface-2));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-columntotals[hidden] {
+    display: none;
+  }
+  .op-columntotals__cell {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    min-inline-size: 0;
+    padding-inline: var(--op-grid-cell-padding-x, var(--op-control-padding-x));
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .op-columntotals__cell--right { justify-content: flex-end; }
+  .op-columntotals__cell--center { justify-content: center; }
+  .op-columntotals__op {
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-normal, normal);
+  }
+  .op-columntotals__btn {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    margin-inline-start: auto;
+    padding: var(--op-space-1);
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    background: transparent;
+    color: var(--op-color-fg-muted);
+    cursor: pointer;
+  }
+  .op-columntotals__btn:hover {
+    background: var(--op-color-hover);
+    color: var(--op-color-fg);
+  }
+  .op-columntotals__btn:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-columntotals--top {
+    border-block-start: 0;
+    border-block-end: var(--op-border-width) solid var(--op-grid-header-border, var(--op-color-border-strong));
+  }
+}
+
 @layer optikos {
   :root {
     --op-dataview-item-width: 10rem;
@@ -1592,6 +1649,16 @@
   }
 }
 
+@layer optikos {
+  .op-exportbar {
+    display: flex;
+    flex: none;
+    gap: var(--op-space-1);
+    margin-inline-start: auto;
+    padding-inline: var(--op-space-2);
+  }
+}
+
 @layer optikos {
   :root {
     --op-filterbuilder-gap: var(--op-space-2);
@@ -1853,6 +1920,18 @@
     padding: var(--op-space-2);
     border-block-start: var(--op-border-width) solid var(--_border);
   }
+  .op-grid__footer {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    border-block-start: var(--op-border-width) solid var(--_border);
+  }
+  .op-grid__footer .op-grid__pager {
+    flex: 1 1 auto;
+    border-block-start: 0;
+  }
   .op-grid .op-virtual {
     min-inline-size: var(--op-grid-min-width);
   }
@@ -2221,6 +2300,13 @@
       transition: none;
     }
   }
+  .op-groupcontrols {
+    display: flex;
+    flex: none;
+    gap: var(--op-space-1);
+    margin-inline-start: auto;
+    padding-inline: var(--op-space-2);
+  }
 }
 
 @layer optikos {
@@ -2362,11 +2448,130 @@
   }
 }
 
+@layer optikos {
+  :root {
+    --op-timeentry-handle: 0.5rem;
+    --op-timeentry-cursor: 0.125rem;
+    --op-timeentry-grip: 0.125rem;
+  }
+  .op-timeline--entry .op-timeline__lane {
+    cursor: crosshair;
+    border-radius: var(--op-radius);
+  }
+  .op-timeline--entry .op-timeline__lane:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-timeline--entry .op-timeline__track {
+    touch-action: pan-y;
+  }
+  .op-timeline--entry .op-timeline__bar {
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+  .op-timeline--entry .op-timeline__bar.is-dragging {
+    cursor: grabbing;
+    z-index: 1;
+    box-shadow: var(--op-shadow);
+  }
+  .op-timeline--entry .op-timeline__bar.is-locked {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  .op-timeline--entry .op-timeline__bar.is-invalid,
+  .op-timeentry__ghost.is-invalid {
+    --op-timeline-c: var(--op-color-danger);
+  }
+  .is-time-dragging {
+    user-select: none;
+  }
+  .op-timeentry__handle {
+    position: absolute;
+    inset-block: 0;
+    inline-size: var(--op-timeentry-handle);
+    cursor: ew-resize;
+  }
+  .op-timeentry__handle--start { inset-inline-start: 0; }
+  .op-timeentry__handle--end { inset-inline-end: 0; }
+  .op-timeentry__handle::after {
+    content: '';
+    position: absolute;
+    inset-block: 25%;
+    inset-inline-start: 40%;
+    inline-size: var(--op-timeentry-grip);
+    border-radius: var(--op-timeentry-grip);
+    background: currentColor;
+    opacity: 0.6;
+  }
+  .op-timeentry__ghost {
+    --op-timeline-c: var(--op-color-primary);
+    position: absolute;
+    inset-block: 0;
+    border: var(--op-border-width) dashed var(--op-timeline-c);
+    border-radius: var(--op-radius);
+    background: color-mix(in srgb, var(--op-timeline-c) 25%, transparent);
+    pointer-events: none;
+  }
+  .op-timeentry__cursor {
+    position: absolute;
+    inset-block: 0;
+    inline-size: var(--op-timeentry-cursor);
+    background: var(--op-color-focus);
+    pointer-events: none;
+  }
+  .op-timeentry__lane.is-under .op-timeline__lane-name { color: var(--op-color-warning); }
+  .op-timeentry__lane.is-met .op-timeline__lane-name { color: var(--op-color-success); }
+  .op-timeentry__lane.is-over .op-timeline__lane-name { color: var(--op-color-danger); }
+  .op-timeentry__grand {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--op-space-3);
+    padding: var(--op-space-2);
+    border-block-start: var(--op-border-width) solid var(--op-color-border-strong);
+    font-size: var(--op-font-size-sm);
+  }
+
+  .op-timeline--vertical.op-timeline--entry .op-timeline__track {
+    touch-action: auto;
+  }
+  .op-timeline--vertical .op-timeentry__handle {
+    inset-block: auto;
+    inset-inline: 0;
+    inline-size: auto;
+    block-size: var(--op-timeentry-handle);
+    cursor: ns-resize;
+  }
+  .op-timeline--vertical .op-timeentry__handle--start { inset-block-start: 0; }
+  .op-timeline--vertical .op-timeentry__handle--end { inset-block-end: 0; }
+  .op-timeline--vertical .op-timeentry__handle::after {
+    inset-block: 40% auto;
+    inset-inline: 25%;
+    inline-size: auto;
+    block-size: var(--op-timeentry-grip);
+  }
+  .op-timeline--vertical .op-timeentry__ghost {
+    inset-block: auto;
+    inset-inline: 0;
+  }
+  .op-timeline--vertical .op-timeentry__cursor {
+    inset-block: auto;
+    inset-inline: 0;
+    inline-size: auto;
+    block-size: var(--op-timeentry-cursor);
+  }
+  .op-timeline--vertical .op-timeentry__grand {
+    grid-column: 1 / -1;
+  }
+}
+
 @layer optikos {
   :root {
     --op-timeline-marker: 0.875rem;
     --op-timeline-when-width: 8rem;
     --op-timeline-lane-width: 8rem;
+    --op-timeline-axis-width: 4rem;
+    --op-timeline-height: 32rem;
     --op-timeline-bar-height: 1.75rem;
     --op-timeline-line: 2px;
   }
@@ -2501,6 +2706,49 @@
     background: var(--op-color-danger);
     pointer-events: none;
   }
+
+  .op-timeline--vertical.op-timeline--range {
+    display: grid;
+    gap: var(--op-space-2);
+  }
+  .op-timeline--vertical .op-timeline__axis,
+  .op-timeline--vertical .op-timeline__lane {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border-block-start: 0;
+    border-inline-start: var(--op-border-width) solid var(--op-color-border);
+    padding-block: 0;
+    padding-inline: var(--op-space-1);
+    min-inline-size: 0;
+  }
+  .op-timeline--vertical .op-timeline__axis {
+    border-inline-start: 0;
+  }
+  .op-timeline--vertical .op-timeline__lane-name {
+    text-align: center;
+    padding-block-end: var(--op-space-1);
+  }
+  .op-timeline--vertical .op-timeline__track,
+  .op-timeline--vertical .op-timeline__axis .op-timeline__track {
+    block-size: var(--op-timeline-height);
+  }
+  .op-timeline--vertical .op-timeline__tick {
+    inset-inline-start: 0;
+    transform: translateY(-50%);
+  }
+  .op-timeline--vertical .op-timeline__bar {
+    inset-block: auto;
+    inset-inline: 0;
+    align-items: flex-start;
+    padding-block: var(--op-space-1);
+  }
+  .op-timeline--vertical .op-timeline__now {
+    inset-block: auto;
+    inset-inline: 0;
+    inline-size: auto;
+    block-size: var(--op-timeline-line);
+  }
 }
 
 @layer optikos {

package/dist/types/build/build.d.ts

@@ -0,0 +1,49 @@
+import { Grid, type GridConfig } from '../components/data/grid/grid.js';
+import { Form, type FormConfig } from '../components/form/form/form.js';
+import type { FilterField } from '../components/data/filterbuilder/filterbuilder.js';
+import type { Column } from '../data/column.js';
+import type { Component } from '../core/component.js';
+export type FieldKind = 'text' | 'email' | 'area' | 'number' | 'money' | 'duration' | 'date' | 'datetime' | 'select' | 'bool';
+type Cfg = Record<string, any>;
+export interface FieldSpec {
+    /** The record's property. */
+    name: string;
+    /** Default: the name as words (`unitPrice` → "Unit price"). */
+    label?: string;
+    /** Default `text`. `duration` is a number of minutes, shown as `7h 30m`. */
+    type?: FieldKind;
+    /** For `select`. */
+    options?: Array<string | number | {
+        value: string | number;
+        label: string;
+    }>;
+    /** Picks the value in a lookup window: a LookupDef or the name given to `registerLookup`. */
+    lookup?: Cfg | string;
+    required?: boolean;
+    readonly?: boolean;
+    /** A band over the grid header and a section of the form. */
+    group?: string;
+    /** Total of the (filtered) rows in the grid: the starting total of the `columnTotals()` plugin. */
+    summary?: Column['summary'];
+    /** Grid column width in px. */
+    width?: number;
+    /** Leaves the field out of some of the builds. */
+    hide?: Array<'grid' | 'form' | 'filter'>;
+    /** Overrides for what each build makes. */
+    column?: Partial<Column>;
+    field?: Cfg;
+    filter?: Partial<FilterField>;
+}
+/** Grid columns: right-aligned numbers and money, formatted dates and booleans. */
+export declare function buildColumns(specs: FieldSpec[]): Column[];
+/** Form fields (instances), in order. */
+export declare function buildFields(specs: FieldSpec[]): Component[];
+/** Fields for a `FilterBuilder`; `bool` filters as a Yes/No choice. */
+export declare function buildFilterFields(specs: FieldSpec[]): FilterField[];
+/** A `Grid` whose columns come from the specs. `cfg` adds or overrides anything (`store`, `selection`, ...). */
+export declare const buildGrid: (specs: FieldSpec[], cfg?: Partial<GridConfig>) => Grid<any>;
+/** A `Form` with the fields in `columns` columns (default 2); specs with a `group` go in a `FieldSet` of that title. */
+export declare function buildForm(specs: FieldSpec[], cfg?: FormConfig & {
+    columns?: number;
+}): Form;
+export {};

package/dist/types/build/index.d.ts

@@ -0,0 +1 @@
+export { buildColumns, buildFields, buildFilterFields, buildGrid, buildForm, type FieldSpec, type FieldKind } from './build.js';

package/dist/types/components/columntotals.d.ts

@@ -0,0 +1 @@
+export * from '../components/data/columntotals/columntotals.js';

package/dist/types/components/data/columntotals/columntotals.d.ts

@@ -0,0 +1,24 @@
+import type { Model } from '../../../data/model.js';
+import type { GridPlugin } from '../grid/grid.js';
+/** An operation offered in the column menu besides the built-in ones. */
+export interface TotalOperation {
+    text: string;
+    /** The column's values and the records of every filtered row. */
+    run: (values: any[], recs: Model[]) => unknown;
+}
+export interface ColumnTotalsOptions {
+    /** Your own operations (a median, a weighted mean...). Offered on every column. */
+    operations?: TotalOperation[];
+    /**
+     * Where the answer goes: `'bar'` (default) keeps it in a bar under the grid; `'modal'` answers in a dialog and `'toast'` in a
+     * notice, once, and nothing stays on the grid.
+     */
+    show?: 'bar' | 'modal' | 'toast';
+    /** `bar` only: under the grid (default) or `'top'`, right under the header, above the rows (a row of the grid itself). */
+    position?: 'bottom' | 'top';
+}
+/**
+ * A button on every column header opens a menu of totals (sum, average, minimum, maximum, count, your own); the choice
+ * shows in a bar under the grid, over every filtered row. A column's `summary` is where it starts and where it is kept.
+ */
+export declare function columnTotals(options?: ColumnTotalsOptions): GridPlugin;

package/dist/types/components/data/exportbar/exportbar.d.ts

@@ -0,0 +1,24 @@
+import type { GridPlugin } from '../grid/grid.js';
+export type ExportBarAction = 'csv' | 'xlsx' | 'page' | 'print';
+export interface ExportBarOptions {
+    /** Each button: `false` leaves it out. `csv`, `xlsx` and `print` default to true; `page` (CSV of the page on screen) to true on a paged grid. */
+    csv?: boolean;
+    xlsx?: boolean;
+    page?: boolean;
+    print?: boolean;
+    /** File name without extension. Default `export`. */
+    filename?: string;
+    /** A heading above the printed table. */
+    title?: string;
+    /** Show the text beside the icons. Default false (icons with a tooltip). */
+    labels?: boolean;
+}
+export interface ExportBar extends GridPlugin {
+    setVisible(action: ExportBarAction, visible: boolean): void;
+    setDisabled(action: ExportBarAction, disabled: boolean): void;
+}
+/**
+ * Export and print buttons inside the grid, in a row with the pager: `plugins: [exportBar({ print: false })]`. They run
+ * `exportGrid` and `printGrid`, which still work on their own from your own buttons.
+ */
+export declare function exportBar(options?: ExportBarOptions): ExportBar;

package/dist/types/components/data/grid/footer.d.ts

@@ -0,0 +1,6 @@
+import type { Grid } from './grid.js';
+/**
+ * The row under a grid where the pager and the plugins' icon buttons sit side by side. Each plugin adds its own group;
+ * the last one out gives the pager back.
+ */
+export declare function addFooterGroup(grid: Grid, group: HTMLElement): () => void;

package/dist/types/components/data/grouping/controls.d.ts

@@ -0,0 +1,27 @@
+import type { Model } from '../../../data/model.js';
+import type { Grid } from '../grid/grid.js';
+export type GroupingControl = 'expand' | 'collapse' | 'by';
+/** A way to group, offered in the "Group by" menu: a record field or any function of the record. */
+export interface GroupChoice {
+    text: string;
+    field?: string;
+    by?: (rec: Model) => unknown;
+}
+interface Target {
+    expandAll(): void;
+    collapseAll(): void;
+    setGroupBy(by: string | ((rec: Model) => unknown) | null): void;
+}
+/** Icon buttons in the grid's footer row (beside the pager): expand all, collapse all and a "Group by" menu. */
+export declare function groupingControls(grid: Grid, target: Target, o: {
+    expand?: boolean;
+    collapse?: boolean;
+    by?: boolean;
+    choices: GroupChoice[];
+    current?: string;
+}): {
+    set: (a: GroupingControl, visible: boolean) => void | undefined;
+    disable: (a: GroupingControl, disabled: boolean) => void | undefined;
+    destroy(): void;
+};
+export {};

package/dist/types/components/data/grouping/grouping.d.ts

@@ -1,6 +1,9 @@
 import type { Model } from '../../../data/model.js';
-import type { Column } from '../../../data/column.js';
+import { summarize } from '../../../data/column.js';
+import { type GroupChoice, type GroupingControl } from './controls.js';
 import type { GridPlugin } from '../grid/grid.js';
+export { summarize };
+export type { GroupChoice, GroupingControl };
 export interface GroupingOptions {
     /** Record field to group by. */
     field?: string;
@@ -12,6 +15,14 @@ export interface GroupingOptions {
     summary?: 'group' | 'grand' | 'both';
     /** Start with every group closed. */
     collapsed?: boolean;
+    /** Icon buttons inside the grid, beside the pager: expand all, collapse all and, with `choices`, a "Group by" menu. `false` leaves one out. */
+    controls?: boolean | {
+        expand?: boolean;
+        collapse?: boolean;
+        by?: boolean;
+    };
+    /** The ways to group offered by the controls' menu (a field or a function each). */
+    choices?: GroupChoice[];
 }
 export interface Grouping extends GridPlugin {
     expandAll(): void;
@@ -20,9 +31,10 @@ export interface Grouping extends GridPlugin {
     setGroupBy(by: string | ((rec: Model) => unknown) | null): void;
     /** Opens or closes one group by its key. */
     toggle(key: unknown, open?: boolean): void;
+    /** The in-grid controls: show or hide one. */
+    setControlVisible(control: GroupingControl, visible: boolean): void;
+    setControlDisabled(control: GroupingControl, disabled: boolean): void;
 }
-/** The value of a column's `summary` over some records. */
-export declare function summarize(col: Column, recs: Model[]): unknown;
 /**
  * Groups the rows of the current page (a remote store groups what it loaded, not the whole set) under a header with
  * its count; the header toggles by click, Enter/Space, → and ←. Sorting works inside each group. Group headers and total

package/dist/types/components/data/timeentry/timeentry.d.ts

@@ -0,0 +1,37 @@
+import type { TimelineItem, TimelinePlugin } from '../timeline/timeline.js';
+export interface TimeEntryOptions {
+    /** Minutes everything snaps to. Default 15. */
+    step?: number;
+    /** Shortest entry, in minutes. Default `step`. */
+    minDuration?: number;
+    /** Length of an entry created with the keyboard, in minutes. Default 60. */
+    duration?: number;
+    /** `false` keeps two entries of one lane from overlapping: a drag stops at the neighbour, a move is refused. Default `true`. */
+    overlap?: boolean;
+    /** Let an entry change lane (drag up/down, ↑/↓). Default `false`. */
+    moveAcrossLanes?: boolean;
+    /** Minutes a lane should add up to: its total is `is-under`, `is-met` or `is-over` that. */
+    target?: number;
+    /** Return `false` to lock an entry (approved, invoiced): it cannot be moved, resized, edited or removed. */
+    editable?: (item: TimelineItem) => boolean;
+    /** Fields of a new entry besides `lane`, `start` and `end`. */
+    defaults?: Partial<TimelineItem>;
+    /**
+     * Opens your own dialog to fill a new entry (`'create'`, after the drag or Enter) or to edit one (`'edit'`, double click
+     * or Enter on a block). Resolve with the fields to set (`title`, `text`, ...), or with `false` to cancel.
+     */
+    form?: (item: TimelineItem, mode: 'create' | 'edit') => Promise<Partial<TimelineItem> | false | void> | Partial<TimelineItem> | false | void;
+}
+/** A duration in minutes as people write it: `7h30`, `8h`, `45m`. */
+export declare function formatDuration(minutes: number): string;
+/**
+ * Creates, moves, resizes and removes entries on a `range` Timeline: drag an empty lane to create, drag a block to move,
+ * its ends to resize; the same with the keyboard (see the ficha). Snaps to `step`, keeps to `from`/`to`, can forbid
+ * overlap and lock entries. Shows each lane's total (and a grand total) against `target`.
+ *
+ * Events on the timeline: `before-create({ lane, start, end })` → `create(item)`, `before-change(item, next, old)` →
+ * `change(item, next, old)`, `before-remove(item)` → `remove(item)`, `edit(item)` (double click, Enter). With a `store`
+ * the records are updated here (the app saves); without, the `items` are.
+ * Touch: a block drags at once; an empty lane needs a long press (about half a second) so a swipe still scrolls.
+ */
+export declare function timeEntry(options?: TimeEntryOptions): TimelinePlugin;

package/dist/types/components/data/timeline/timeline.d.ts

@@ -27,6 +27,8 @@ export interface TimelineConfig extends ComponentConfig {
     to?: string;
     /** `range`: a marker at the current time. Default true. */
     now?: boolean;
+    /** `range`: `horizontal` (time runs left to right, one row per lane, default) or `vertical` (time runs top to bottom, one column per lane). */
+    direction?: 'horizontal' | 'vertical';
     /** Optional features (`timeEntry()`...). See `TimelinePlugin`. */
     plugins?: TimelinePlugin[];
 }
@@ -39,6 +41,7 @@ export interface TimelineScale {
     lo: number;
     hi: number;
     clock: boolean;
+    vertical: boolean;
     parse(v: string): number;
     format(ms: number): string;
 }

package/dist/types/components/exportbar.d.ts

@@ -0,0 +1 @@
+export * from '../components/data/exportbar/exportbar.js';

package/dist/types/components/timeentry.d.ts

@@ -0,0 +1 @@
+export * from '../components/data/timeentry/timeentry.js';

package/dist/types/data/column.d.ts

@@ -20,13 +20,13 @@ export interface Column<T extends Record<string, any> = any> {
     hidden?: boolean;
     /** Pinned to the start or the end while the body scrolls sideways (give it a `width`; default 140). The columns of one edge stay together. */
     locked?: 'start' | 'end';
-    /** With the `grouping()` plugin: what the total row shows for this column. */
+    /** With `grouping()` or `columnTotals()`: what the total shows. Numbers: `sum`, `avg`, `min`, `max`, `count`; dates: `min` (earliest), `max` (latest), `count`; or your own function of the values. */
     summary?: 'sum' | 'avg' | 'min' | 'max' | 'count' | ((values: any[], recs: Model<T>[]) => unknown);
     /** Text for the total of this column (default: the column's `format`, else the plain value). */
     summaryRenderer?: (value: any, col: Column<T>) => string | Node;
     /** Left out while `setPermissionResolver` denies it. */
     permission?: string;
-    /** Name registered with `registerFormat` (`money`, `date`, `number`, `percent`, `bool`) or a function. */
+    /** Name registered with `registerFormat` (`money`, `date`, `number`, `percent`, `bool`, `duration`: minutes as `7h 30m`) or a function. */
     format?: string | Formatter;
     /** Full control over the cell content. Text is escaped; return a Node for markup. */
     renderer?: (value: any, rec: Model<T>, col: Column<T>) => string | Node;
@@ -38,3 +38,5 @@ export interface Column<T extends Record<string, any> = any> {
 }
 /** Cell content for a record: `renderer` first, then `format`, then the plain value. */
 export declare function cellContent<T extends Record<string, any>>(col: Column<T>, rec: Model<T>): string | Node;
+/** The value of a column's `summary` over some records. */
+export declare function summarize(col: Column, recs: Model[]): unknown;

package/dist/types/index.d.ts

@@ -3,6 +3,7 @@ export * from './data/index.js';
 export * from './themes/index.js';
 export * from './motion/index.js';
 export * from './ui/index.js';
+export * from './build/index.js';
 export * from './components/base/avatar/avatar.js';
 export * from './components/base/badge/badge.js';
 export * from './components/base/button/button.js';
@@ -16,7 +17,9 @@ export * from './components/charts/chart/chart.js';
 export * from './components/charts/stat/stat.js';
 export * from './components/chat/chat/chat.js';
 export * from './components/data/cellediting/cellediting.js';
+export * from './components/data/columntotals/columntotals.js';
 export * from './components/data/dataview/dataview.js';
+export * from './components/data/exportbar/exportbar.js';
 export * from './components/data/filterbuilder/filterbuilder.js';
 export * from './components/data/grid/grid.js';
 export * from './components/data/gridexport/gridexport.js';
@@ -26,6 +29,7 @@ export * from './components/data/pagination/pagination.js';
 export * from './components/data/rowediting/rowediting.js';
 export * from './components/data/searchgrid/searchgrid.js';
 export * from './components/data/table/table.js';
+export * from './components/data/timeentry/timeentry.js';
 export * from './components/data/timeline/timeline.js';
 export * from './components/data/tree/tree.js';
 export * from './components/data/treegrid/treegrid.js';

package/dist/ui.js

@@ -1,2 +1,2 @@
-import{a,b,c,d,e,f,g,h,i,j,k}from"./chunk-YXOKWCYS.js";import"./chunk-DWA45BWR.js";import"./chunk-3FCIZKIN.js";import"./chunk-ZSPJZ3ZH.js";import"./chunk-NNR2FNHG.js";import"./chunk-CFGCB37K.js";import"./chunk-U5L76VVB.js";import"./chunk-P4O57S6N.js";import"./chunk-S2CMWKVB.js";import"./chunk-TQPQ4UEA.js";import"./chunk-M7FNPRV4.js";import"./chunk-6PZPBPAD.js";import"./chunk-JJLOUMCJ.js";import"./chunk-4CWYF4O7.js";import"./chunk-5PWPAN62.js";import"./chunk-5BMG5ZBY.js";import"./chunk-JE56CJX2.js";import"./chunk-UQRQH2JW.js";import"./chunk-HRW25TMU.js";import"./chunk-3F4MN2BU.js";import"./chunk-SEW5OCQF.js";import"./chunk-Z6L55FTN.js";import"./chunk-643FOYQB.js";import"./chunk-CMV3F6HR.js";import"./chunk-N2LS4JD6.js";import"./chunk-H25XXQVH.js";import"./chunk-IUOEPAWG.js";import"./chunk-AQ3RTHG5.js";import"./chunk-R32HPK7R.js";import"./chunk-4AZ44KV4.js";import"./chunk-GEJKFE4X.js";import"./chunk-GFFZTFQH.js";import"./chunk-BCVOUMJJ.js";import"./chunk-MNSDGJKA.js";import"./chunk-RG6SHPHF.js";import"./chunk-2YRQULDC.js";import"./chunk-HLS5FI55.js";import"./chunk-DIOJGTUN.js";import"./chunk-BQEFLPDA.js";import"./chunk-2GKIF7A6.js";import"./chunk-OWEQT2HN.js";import"./chunk-E4VNLYO2.js";import"./chunk-676AKAGF.js";import"./chunk-XR677UYD.js";import"./chunk-VV7CFMPZ.js";import"./chunk-TIPK3SCJ.js";import"./chunk-2HNQ2XRY.js";import"./chunk-XQHATUKN.js";import"./chunk-L5SQQFO7.js";import"./chunk-6NCXO5ZP.js";import"./chunk-4AA4FQEM.js";import"./chunk-2UPUC4RK.js";import"./chunk-V5G5JECN.js";import"./chunk-UDXO3KM3.js";import"./chunk-PZSHOSOS.js";import"./chunk-3VDLX7ET.js";import"./chunk-S4QD5NID.js";import"./chunk-4C666HHU.js";export{d as Direction,c as LabelPos,g as LayoutKind,j as Op,e as Region,h as Selection,f as Side,k as ThemeName,i as ToastType,b as Variant,a as ui};
+import{a as b,b as c,c as d,d as e,e as f,f as g,g as h,h as i,i as j,j as k}from"./chunk-LLHDEUIA.js";import{a}from"./chunk-UCWICDYG.js";import"./chunk-OADWLPSF.js";import"./chunk-ADHKL2GM.js";import"./chunk-2I7HDIOU.js";import"./chunk-SEUIIPHS.js";import"./chunk-BRGT4O6Q.js";import"./chunk-3OA3P37P.js";import"./chunk-QOSTS5I3.js";import"./chunk-TVO3Z2BM.js";import"./chunk-G26R2F3W.js";import"./chunk-6TZJO2G2.js";import"./chunk-S3ILIWSW.js";import"./chunk-BTGJ3MP4.js";import"./chunk-AJN66F32.js";import"./chunk-L6DOWGBO.js";import"./chunk-H25XXQVH.js";import"./chunk-5GCTM37D.js";import"./chunk-NAUSRVB6.js";import"./chunk-EO777UIN.js";import"./chunk-FSR6BDVO.js";import"./chunk-J5BZAKC6.js";import"./chunk-T5OGUCY2.js";import"./chunk-OB3VIRQR.js";import"./chunk-GEJKFE4X.js";import"./chunk-LXWCTCZV.js";import"./chunk-JBOKM5YA.js";import"./chunk-Z6HZY2YG.js";import"./chunk-U25QSLAH.js";import"./chunk-HRW25TMU.js";import"./chunk-3F4MN2BU.js";import"./chunk-SEW5OCQF.js";import"./chunk-LHWY6G6Q.js";import"./chunk-MQEALOU3.js";import"./chunk-6NP4AEV4.js";import"./chunk-AQ3RTHG5.js";import"./chunk-BCVOUMJJ.js";import"./chunk-ESRS5ZQV.js";import"./chunk-DIOJGTUN.js";import"./chunk-2GKIF7A6.js";import"./chunk-OWEQT2HN.js";import"./chunk-BQEFLPDA.js";import"./chunk-QVBDBGS4.js";import"./chunk-E4VNLYO2.js";import"./chunk-676AKAGF.js";import"./chunk-VV7CFMPZ.js";import"./chunk-TIPK3SCJ.js";import"./chunk-UDXO3KM3.js";import"./chunk-PZSHOSOS.js";import"./chunk-IODSL7KU.js";import"./chunk-XFDNXSU5.js";import"./chunk-L5SQQFO7.js";import"./chunk-3VDLX7ET.js";import"./chunk-S4QD5NID.js";import"./chunk-6NCXO5ZP.js";import"./chunk-4AA4FQEM.js";import"./chunk-2UPUC4RK.js";import"./chunk-V5G5JECN.js";import"./chunk-4C666HHU.js";export{d as Direction,c as LabelPos,g as LayoutKind,j as Op,e as Region,h as Selection,f as Side,k as ThemeName,i as ToastType,b as Variant,a as ui};
 //# sourceMappingURL=ui.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optikos",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Declarative UI components in plain TypeScript: forms, grids, windows and themes. No runtime dependencies.",
   "keywords": [
     "ui",
@@ -51,6 +51,10 @@
       "types": "./dist/types/ui/index.d.ts",
       "import": "./dist/ui.js"
     },
+    "./build": {
+      "types": "./dist/types/build/index.d.ts",
+      "import": "./dist/build.js"
+    },
     "./testing": {
       "types": "./dist/types/testing/index.d.ts",
       "import": "./dist/testing.js"

package/dist/chunk-2HNQ2XRY.js

@@ -1,2 +0,0 @@
-import{b as t}from"./chunk-XQHATUKN.js";function a(e,n){let r=n.data[e.field];return e.renderer?e.renderer(r,n,e):e.format?t(e.format,r):r==null?"":String(r)}export{a};
-//# sourceMappingURL=chunk-2HNQ2XRY.js.map

package/dist/chunk-2HNQ2XRY.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/data/column.ts"],
-  "sourcesContent": ["import { format, type Formatter } from './format';\nimport type { Model } from './model';\n\n/** A grid/table column. `T` is the record shape: `field` then autocompletes its keys (any string still works). */\nexport interface Column<T extends Record<string, any> = any> {\n  field: Extract<keyof T, string> | (string & {});\n  header?: string;\n  /** Fixed width in px. */\n  width?: number;\n  /** Share of the free space (like CSS `fr`). Default 1 when there is no `width`. */\n  flex?: number;\n  /** A label that groups columns (\"Identification\", \"Values\"...): a band over the header and sections in the column menu. */\n  group?: string;\n  minWidth?: number;\n  /** Upper bound when the user resizes it. */\n  maxWidth?: number;\n  /** `false` keeps a column's width fixed even when the grid has `resizableColumns`. */\n  resizable?: boolean;\n  align?: 'left' | 'center' | 'right';\n  sortable?: boolean;\n  hidden?: boolean;\n  /** Pinned to the start or the end while the body scrolls sideways (give it a `width`; default 140). The columns of one edge stay together. */\n  locked?: 'start' | 'end';\n  /** With the `grouping()` plugin: what the total row shows for this column. */\n  summary?: 'sum' | 'avg' | 'min' | 'max' | 'count' | ((values: any[], recs: Model<T>[]) => unknown);\n  /** Text for the total of this column (default: the column's `format`, else the plain value). */\n  summaryRenderer?: (value: any, col: Column<T>) => string | Node;\n  /** Left out while `setPermissionResolver` denies it. */\n  permission?: string;\n  /** Name registered with `registerFormat` (`money`, `date`, `number`, `percent`, `bool`) or a function. */\n  format?: string | Formatter;\n  /** Full control over the cell content. Text is escaped; return a Node for markup. */\n  renderer?: (value: any, rec: Model<T>, col: Column<T>) => string | Node;\n  cls?: string;\n  /** With the `cellEditing()` grid plugin: `true` (an editor for the value's type), a field type (`'select'`) or a field config. */\n  editor?: boolean | string | Record<string, any>;\n  /** With `cellEditing()`: whether this record's cell can be edited (default: every record, when `editor` is set). */\n  editable?: (rec: Model<T>) => boolean;\n}\n\n/** Cell content for a record: `renderer` first, then `format`, then the plain value. */\nexport function cellContent<T extends Record<string, any>>(col: Column<T>, rec: Model<T>): string | Node {\n  const v = rec.data[col.field];\n  if (col.renderer) return col.renderer(v, rec, col);\n  if (col.format) return format(col.format, v);\n  return v == null ? '' : String(v);\n}\n"],
-  "mappings": "wCAyCO,SAASA,EAA2CC,EAAgBC,EAA8B,CACvG,IAAMC,EAAID,EAAI,KAAKD,EAAI,KAAK,EAC5B,OAAIA,EAAI,SAAiBA,EAAI,SAASE,EAAGD,EAAKD,CAAG,EAC7CA,EAAI,OAAeG,EAAOH,EAAI,OAAQE,CAAC,EACpCA,GAAK,KAAO,GAAK,OAAOA,CAAC,CAClC",
-  "names": ["cellContent", "col", "rec", "v", "format"]
-}

package/dist/chunk-BJWREA76.js

@@ -1,2 +0,0 @@
-import{c as T}from"./chunk-DIOJGTUN.js";import{b as S}from"./chunk-XQHATUKN.js";import{b as h}from"./chunk-PZSHOSOS.js";import{e as _,f as b}from"./chunk-S4QD5NID.js";_("en",{groupTotal:"Total",groupCount:"{n}",groupToggle:"Toggle group"});_("pt-BR",{groupTotal:"Total",groupCount:"{n}",groupToggle:"Alternar grupo"});var A=a=>typeof a=="number"?a:Number(a);function G(a,s){let p=s.map(r=>r.data[a.field]),l=p.filter(r=>r!=null&&r!==""&&!isNaN(A(r))).map(A),g=a.summary;return typeof g=="function"?g(p,s):g==="count"?p.filter(r=>r!=null&&r!=="").length:l.length?g==="sum"?l.reduce((r,y)=>r+y,0):g==="avg"?l.reduce((r,y)=>r+y,0)/l.length:g==="min"?Math.min(...l):Math.max(...l):null}function O(a={}){let s,p=a.by??(a.field?e=>e.data[a.field]:void 0),l=new Set,g=!!a.collapsed,r=[],y=[],M=a.summary??"group",v=e=>e.filter(o=>!o.classList.contains("op-grid__selcell")&&!o.classList.contains("op-grid__actcell"));function L(e,o,u){return{cls:`op-grid__row--total ${u}`,paint(d,f){f.setAttribute("aria-label",e);let t=s.getColumns();v(d).forEach((n,c)=>{let i=t[c];if(!i)return;let E=i.summary?(m=>i.summaryRenderer?i.summaryRenderer(m,i):m==null?"":i.format?S(i.format,m):String(m))(G(i,o)):c===0?e:"";n.replaceChildren(E),n.classList.toggle("op-grid__cell--right",i.align==="right")})}}}function w(){let o=s.getStore().getRange();if(!p)return s.setRowLayout(void 0);let u=new Map;for(let t of o){let n=p(t);u.set(n,[...u.get(n)??[],t])}if(r=[...u.keys()],g){for(let t of r)l.add(String(t));g=!1}let d=[],f=s.getColumns().some(t=>t.summary);for(let[t,n]of u){let c=!l.has(String(t));if(d.push({level:1,expanded:c,cls:"op-grid__row--group",paint(i,E){let[m]=v(i);m.classList.add("is-group-label"),m.replaceChildren(h("span","op-grid__twist",{"aria-hidden":"true"},T("chevron-down")),h("span","op-grid__group-name",{},a.label?a.label(t,n):String(t??"\u2014")),h("span","op-grid__group-count",{},b("groupCount",{n:n.length}))),E.dataset.group=String(t)}}),!!c){for(let i of n)d.push({rec:i,level:2,cls:"is-grouped"});f&&M!=="grand"&&d.push(L(b("groupTotal"),n,"is-group-total"))}}f&&M!=="group"&&d.push(L(b("groupTotal"),o,"is-grand-total")),s.setRowLayout(d)}function k(e,o){let u=String(e),d=o??l.has(u);d!==!l.has(u)&&(d?l.delete(u):l.add(u),w(),s.emit("group-toggle",e,d))}let R=e=>{let o=e?.closest(".op-grid__row--group");return o?r.find(u=>String(u)===o.dataset.group):void 0};return{init(e){s=e;let o=e.el,u=o.querySelector("[role=grid]"),d=t=>{let n=R(t.target);(n!==void 0||t.target.closest(".op-grid__row--group"))&&k(n)},f=t=>{if(t.target!==u)return;let n=s.getRowEntry(s.getActive());if(!n||n.rec||n.level!==1)return;let c=R(document.getElementById(`${s.id}-r${s.getActive()}`)),i=n.expanded;if(t.key==="Enter"||t.key===" ")k(c);else if(t.key==="ArrowRight"&&!i)k(c,!0);else if(t.key==="ArrowLeft"&&i)k(c,!1);else return;t.preventDefault(),t.stopPropagation()};return o.addEventListener("click",d),o.addEventListener("keydown",f,!0),y=[C(e),()=>o.removeEventListener("click",d),()=>o.removeEventListener("keydown",f,!0),()=>s.setRowLayout(void 0)],w(),()=>y.forEach(t=>t())},expandAll(){l.clear(),w()},collapseAll(){for(let e of r)l.add(String(e));w()},toggle:k,setGroupBy(e){p=e===null?void 0:typeof e=="string"?o=>o.data[e]:e,l.clear(),w()}};function C(e){return e.getStore().subscribe(o=>queueMicrotask(()=>!e.destroyed&&w()))}}export{G as a,O as b};
-//# sourceMappingURL=chunk-BJWREA76.js.map