terminoir 0.6.0 → 0.8.0

package/dist/index.js

@@ -46,6 +46,11 @@ export { default as Inline } from './components/Inline.svelte';
 export { default as Text } from './components/Text.svelte';
 export { default as Disclosure } from './components/Disclosure.svelte';
 export { default as GroupedList } from './components/GroupedList.svelte';
+export { default as Timeline } from './components/Timeline.svelte';
+export { default as BucketGrid } from './components/BucketGrid.svelte';
+export { default as GridLayout } from './components/GridLayout.svelte';
+export { default as ExpressionEditor } from './components/ExpressionEditor.svelte';
+export { describe as describeExpression, isComplete as isCompleteExpression, } from './utils/expression.js';
 export { default as SegmentBar } from './components/SegmentBar.svelte';
 export { default as NavSection } from './components/NavSection.svelte';
 export { default as Spacer } from './components/Spacer.svelte';
@@ -60,7 +65,11 @@ export { default as List } from './components/List.svelte';
 export { default as ListItem } from './components/ListItem.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export { default as FormRow } from './components/FormRow.svelte';
+export { default as PropertyRow } from './components/PropertyRow.svelte';
 // Inputs
+export { default as ChipSelect } from './components/ChipSelect.svelte';
+export { default as DateField } from './components/DateField.svelte';
+export { dayLabel, dayUrgency, parseYmd } from './utils/dayLabel.js';
 export { default as SearchPicker } from './components/SearchPicker.svelte';
 export { default as FileButton } from './components/FileButton.svelte';
 export { default as TitleInput } from './components/TitleInput.svelte';

package/dist/utils/componentTypes.d.ts

@@ -15,6 +15,18 @@ export type PickerOption = {
     icon?: string;
     iconColor?: string;
 };
+export type ChipSelectOption = {
+    id: string;
+    label: string;
+    /** Dot colour (palette name or CSS colour); grey when unset. */
+    color?: string;
+    /** Id of the `ChipSelectGroup` heading it sits under. */
+    group?: string;
+};
+export type ChipSelectGroup = {
+    id: string;
+    label: string;
+};
 export type RadioCardOption = {
     value: string;
     label: string;

package/dist/utils/dayLabel.d.ts

@@ -0,0 +1,7 @@
+/** How far a day is from today, for colouring deadlines. */
+export type DayUrgency = 'past' | 'today' | 'future';
+/** Local-midnight Date for `YYYY-MM-DD`, or null when the text is not a calendar date. */
+export declare function parseYmd(ymd: string): Date | null;
+/** "Today", "Tomorrow", "Yesterday", a weekday within the next week, else "Nov 12" (plus the year when it differs). */
+export declare function dayLabel(date: Date, today?: Date): string;
+export declare function dayUrgency(date: Date, today?: Date): DayUrgency;

package/dist/utils/dayLabel.js

@@ -0,0 +1,35 @@
+import { addDays, sameDay, startOfDay } from './calendar.js';
+const DAYS_SHOWN_AS_WEEKDAY = 6;
+const YMD = /^(\d{4})-(\d{2})-(\d{2})$/;
+/** Local-midnight Date for `YYYY-MM-DD`, or null when the text is not a calendar date. */
+export function parseYmd(ymd) {
+    const match = YMD.exec(ymd.trim());
+    if (!match)
+        return null;
+    const [, year, month, day] = match.map(Number);
+    const date = new Date(year, month - 1, day);
+    return date.getMonth() === month - 1 && date.getDate() === day ? date : null;
+}
+/** "Today", "Tomorrow", "Yesterday", a weekday within the next week, else "Nov 12" (plus the year when it differs). */
+export function dayLabel(date, today = new Date()) {
+    const day = startOfDay(date);
+    const now = startOfDay(today);
+    if (sameDay(day, now))
+        return 'Today';
+    if (sameDay(day, addDays(now, 1)))
+        return 'Tomorrow';
+    if (sameDay(day, addDays(now, -1)))
+        return 'Yesterday';
+    if (day > now && day <= addDays(now, DAYS_SHOWN_AS_WEEKDAY)) {
+        return day.toLocaleDateString(undefined, { weekday: 'long' });
+    }
+    const withYear = day.getFullYear() !== now.getFullYear();
+    return day.toLocaleDateString(undefined, { month: 'short', day: 'numeric', ...(withYear && { year: 'numeric' }) });
+}
+export function dayUrgency(date, today = new Date()) {
+    const day = startOfDay(date);
+    const now = startOfDay(today);
+    if (sameDay(day, now))
+        return 'today';
+    return day < now ? 'past' : 'future';
+}

package/dist/utils/expression.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Typed expression trees for a block editor. The op catalogue (e.g. Oyster's
+ * `GET /expressions/ops`) says what each op returns and what its slots accept; the editor only
+ * offers ops whose result fits the slot, so users cannot build an ill-typed tree.
+ */
+export type ExpressionKind = 'boolean' | 'number' | 'date' | 'text' | 'value' | 'ids';
+export type ExpressionSlot = {
+    name: string;
+    kind: ExpressionKind;
+    many?: boolean;
+};
+export type ExpressionOp = {
+    op: string;
+    label: string;
+    group: string;
+    returns: ExpressionKind;
+    slots: ExpressionSlot[];
+    /** Plain fields on the node. A param named `key` picks a field; others are typed in. */
+    params: string[];
+};
+export type ExpressionField = {
+    key: string;
+    label?: string;
+    kind?: ExpressionKind;
+};
+export type ExpressionNode = {
+    op: string;
+    [key: string]: unknown;
+};
+/** A slot of `kind` accepts an op returning `returns` (`value` is the wildcard both ways, `ids` only fits `ids`). */
+export declare function fits(kind: ExpressionKind, returns: ExpressionKind): boolean;
+export declare function opsFor(kind: ExpressionKind, ops: ExpressionOp[]): ExpressionOp[];
+/** A fresh node for an op: empty single slots, one empty entry in list slots, blank params. */
+export declare function emptyNode(op: ExpressionOp): ExpressionNode;
+/** Text typed into a param, as the value it stands for (numbers and true/false become typed). */
+export declare function parseParam(param: string, text: string): unknown;
+export declare function paramText(value: unknown): string;
+/** True when every slot is filled and every key param names a field. */
+export declare function isComplete(node: unknown, ops: ExpressionOp[]): boolean;
+/** Plain-English reading of a tree, built from op labels and slot names (no per-op templates). */
+export declare function describe(node: unknown, ops: ExpressionOp[], fields?: ExpressionField[]): string;
+export type ExpressionPath = (string | number)[];
+/** A copy of `root` with the value at `path` replaced (`undefined` removes a list entry). */
+export declare function setAt(root: unknown, path: ExpressionPath, value: unknown): unknown;
+/** Ops grouped by their `group`, in first-seen order, for an `<optgroup>` picker. */
+export declare function groupOps(ops: ExpressionOp[]): {
+    group: string;
+    ops: ExpressionOp[];
+}[];

package/dist/utils/expression.js

@@ -0,0 +1,116 @@
+/**
+ * Typed expression trees for a block editor. The op catalogue (e.g. Oyster's
+ * `GET /expressions/ops`) says what each op returns and what its slots accept; the editor only
+ * offers ops whose result fits the slot, so users cannot build an ill-typed tree.
+ */
+/** A slot of `kind` accepts an op returning `returns` (`value` is the wildcard both ways, `ids` only fits `ids`). */
+export function fits(kind, returns) {
+    if (kind === 'ids' || returns === 'ids')
+        return kind === returns;
+    return kind === 'value' || returns === 'value' || kind === returns;
+}
+export function opsFor(kind, ops) {
+    return ops.filter((op) => fits(kind, op.returns));
+}
+/** A fresh node for an op: empty single slots, one empty entry in list slots, blank params. */
+export function emptyNode(op) {
+    const node = { op: op.op };
+    for (const slot of op.slots)
+        node[slot.name] = slot.many ? [] : null;
+    for (const param of op.params)
+        node[param] = param === 'options' ? [] : '';
+    return node;
+}
+/** Text typed into a param, as the value it stands for (numbers and true/false become typed). */
+export function parseParam(param, text) {
+    if (param === 'options')
+        return text.split(',').map((s) => s.trim()).filter(Boolean);
+    const trimmed = text.trim();
+    if (param === 'key')
+        return trimmed;
+    if (trimmed === 'true' || trimmed === 'false')
+        return trimmed === 'true';
+    if (trimmed !== '' && !Number.isNaN(Number(trimmed)))
+        return Number(trimmed);
+    return text;
+}
+export function paramText(value) {
+    if (Array.isArray(value))
+        return value.join(', ');
+    return value == null ? '' : String(value);
+}
+/** True when every slot is filled and every key param names a field. */
+export function isComplete(node, ops) {
+    if (!node || typeof node !== 'object')
+        return false;
+    const n = node;
+    const spec = ops.find((o) => o.op === n.op);
+    if (!spec)
+        return false;
+    if (spec.params.includes('key') && !n.key)
+        return false;
+    return spec.slots.every((slot) => {
+        const value = n[slot.name];
+        if (slot.many)
+            return Array.isArray(value) && value.length > 0 && value.every((v) => isComplete(v, ops));
+        return isComplete(value, ops);
+    });
+}
+/** Plain-English reading of a tree, built from op labels and slot names (no per-op templates). */
+export function describe(node, ops, fields = []) {
+    if (!node || typeof node !== 'object')
+        return '…';
+    const n = node;
+    const spec = ops.find((o) => o.op === n.op);
+    if (!spec)
+        return n.op;
+    const label = spec.label.toLowerCase();
+    if ('key' in n && spec.params.includes('key')) {
+        const field = fields.find((f) => f.key === n.key);
+        const name = field?.label ?? (n.key ? String(n.key) : '…');
+        return spec.slots.length ? `${label} ${name}` : spec.op === 'field' ? name : `${label} ${name}`;
+    }
+    if (spec.params.includes('value') && !spec.slots.length)
+        return JSON.stringify(n.value ?? '');
+    const part = (v) => describe(v, ops, fields);
+    const names = spec.slots.map((s) => s.name);
+    if (names.length === 2 && names[0] === 'left')
+        return `${part(n.left)} ${label} ${part(n.right)}`;
+    const many = spec.slots.find((s) => s.many);
+    if (many) {
+        const items = (Array.isArray(n[many.name]) ? n[many.name] : []).map(part);
+        return items.length > 1 ? `(${items.join(` ${label} `)})` : (items[0] ?? '…');
+    }
+    const pieces = spec.slots.map((s) => part(n[s.name]));
+    const options = spec.params.includes('options') ? ` ${paramText(n.options)}` : '';
+    if (!pieces.length)
+        return label;
+    if (pieces.length > 1)
+        return `${label} ${pieces.join(', ')}`;
+    // "is empty", "is one of" read after their argument; "not", "days until" before it.
+    return label.startsWith('is ') ? `${pieces[0]} ${label}${options}` : `${label} ${pieces[0]}`;
+}
+/** A copy of `root` with the value at `path` replaced (`undefined` removes a list entry). */
+export function setAt(root, path, value) {
+    if (!path.length)
+        return value;
+    const [head, ...rest] = path;
+    if (Array.isArray(root)) {
+        const next = root.slice();
+        const index = Number(head);
+        if (!rest.length && value === undefined)
+            next.splice(index, 1);
+        else
+            next[index] = setAt(root[index], rest, value);
+        return next;
+    }
+    const obj = (root && typeof root === 'object' ? root : {});
+    return { ...obj, [head]: setAt(obj[head], rest, value) };
+}
+/** Ops grouped by their `group`, in first-seen order, for an `<optgroup>` picker. */
+export function groupOps(ops) {
+    const groups = new Map();
+    for (const op of ops)
+        groups.set(op.group, [...(groups.get(op.group) ?? []), op]);
+    return [...groups].map(([group, list]) => ({ group, ops: list }));
+}

package/dist/utils/layout.d.ts

@@ -0,0 +1,15 @@
+/** Reading-order grid layout helpers: drag to reorder, drag an edge to change column span. */
+export type GridItem = {
+    id: string;
+    span: number;
+};
+export declare function moveTo<T extends {
+    id: string;
+}>(items: T[], id: string, index: number): T[];
+/** Index of the item whose centre is nearest to a point (ties keep the earlier one). */
+export declare function nearestIndex(centres: {
+    x: number;
+    y: number;
+}[], x: number, y: number): number;
+/** Column span after dragging an edge by `dx` pixels, snapped to whole columns and clamped. */
+export declare function spanAfterDrag(span: number, dx: number, columnWidth: number, min: number, max: number): number;

package/dist/utils/layout.js

@@ -0,0 +1,27 @@
+/** Reading-order grid layout helpers: drag to reorder, drag an edge to change column span. */
+export function moveTo(items, id, index) {
+    const from = items.findIndex((i) => i.id === id);
+    if (from < 0)
+        return items;
+    const next = items.slice();
+    const [item] = next.splice(from, 1);
+    next.splice(Math.max(0, Math.min(index, next.length)), 0, item);
+    return next;
+}
+/** Index of the item whose centre is nearest to a point (ties keep the earlier one). */
+export function nearestIndex(centres, x, y) {
+    let best = 0;
+    let bestDistance = Infinity;
+    centres.forEach((c, i) => {
+        const distance = (c.x - x) ** 2 + (c.y - y) ** 2;
+        if (distance < bestDistance)
+            [best, bestDistance] = [i, distance];
+    });
+    return best;
+}
+/** Column span after dragging an edge by `dx` pixels, snapped to whole columns and clamped. */
+export function spanAfterDrag(span, dx, columnWidth, min, max) {
+    if (columnWidth <= 0)
+        return span;
+    return Math.max(min, Math.min(max, span + Math.round(dx / columnWidth)));
+}

package/dist/utils/timeline.d.ts

@@ -0,0 +1,36 @@
+export type TimelineItem = {
+    id: string;
+    title: string;
+    start: Date;
+    /** Inclusive last day; defaults to `start` (a one-day bar). */
+    end?: Date;
+    /** Palette name or CSS colour for the bar. */
+    color?: string;
+    /** Rows sharing a group sit under one heading. */
+    group?: string;
+};
+export type TimelineBar = {
+    item: TimelineItem;
+    left: number;
+    width: number;
+};
+export type TimelineRow = {
+    group: string | null;
+    bars: TimelineBar[];
+};
+export type TimelineScale = {
+    start: Date;
+    days: number;
+    ticks: {
+        date: Date;
+        left: number;
+    }[];
+};
+/** The day range covering every bar (padded a day each side) and evenly spaced day ticks. */
+export declare function timelineScale(items: TimelineItem[], today?: Date): TimelineScale;
+/** One bar per item as left/width percentages of the scale; ends before starts are clamped. */
+export declare function timelineBar(item: TimelineItem, scale: TimelineScale): TimelineBar;
+/** Bars in groups (first-seen order; ungrouped first), each group sorted by start. */
+export declare function timelineRows(items: TimelineItem[], scale: TimelineScale): TimelineRow[];
+/** Where today falls on the scale (percent), or null when outside it. */
+export declare function todayOffset(scale: TimelineScale, today?: Date): number | null;

package/dist/utils/timeline.js

@@ -0,0 +1,48 @@
+import { addDays, startOfDay } from './calendar.js';
+const DAY_MS = 86_400_000;
+const PAD_DAYS = 1;
+const MAX_TICKS = 12;
+function dayIndex(from, d) {
+    return Math.round((startOfDay(d).getTime() - from.getTime()) / DAY_MS);
+}
+/** The day range covering every bar (padded a day each side) and evenly spaced day ticks. */
+export function timelineScale(items, today = new Date()) {
+    const starts = items.map((i) => startOfDay(i.start).getTime());
+    const ends = items.map((i) => startOfDay(i.end ?? i.start).getTime());
+    const first = starts.length ? Math.min(...starts) : startOfDay(today).getTime();
+    const last = ends.length ? Math.max(...ends) : first;
+    const start = addDays(new Date(first), -PAD_DAYS);
+    const days = Math.round((last - first) / DAY_MS) + 1 + 2 * PAD_DAYS;
+    const step = Math.max(1, Math.ceil(days / MAX_TICKS));
+    const ticks = [];
+    for (let i = 0; i < days; i += step)
+        ticks.push({ date: addDays(start, i), left: (i / days) * 100 });
+    return { start, days, ticks };
+}
+/** One bar per item as left/width percentages of the scale; ends before starts are clamped. */
+export function timelineBar(item, scale) {
+    const from = dayIndex(scale.start, item.start);
+    const to = Math.max(from, dayIndex(scale.start, item.end ?? item.start));
+    return { item, left: (from / scale.days) * 100, width: ((to - from + 1) / scale.days) * 100 };
+}
+/** Bars in groups (first-seen order; ungrouped first), each group sorted by start. */
+export function timelineRows(items, scale) {
+    const groups = new Map();
+    for (const item of items) {
+        const key = item.group ?? null;
+        groups.set(key, [...(groups.get(key) ?? []), item]);
+    }
+    const keys = [...groups.keys()].sort((a, b) => (a === null ? -1 : b === null ? 1 : 0));
+    return keys.map((group) => ({
+        group,
+        bars: (groups.get(group) ?? [])
+            .slice()
+            .sort((a, b) => a.start.getTime() - b.start.getTime())
+            .map((item) => timelineBar(item, scale)),
+    }));
+}
+/** Where today falls on the scale (percent), or null when outside it. */
+export function todayOffset(scale, today = new Date()) {
+    const i = dayIndex(scale.start, today);
+    return i < 0 || i >= scale.days ? null : ((i + 0.5) / scale.days) * 100;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminoir",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Terminoir \u2014 Liquid Glass design tokens and Svelte 5 UI components.",
   "license": "Apache-2.0",
   "type": "module",