@formicoidea/labre-core 0.30.1 → 0.32.0

package/dist/_pkgs/data-view/core/group-by/define.js

@@ -1,7 +1,9 @@
 import hash from '@emotion/hash';
+import { addDays, differenceInCalendarDays, format as fmt, isToday, isTomorrow, isYesterday, startOfDay, startOfMonth, startOfWeek, startOfYear, } from 'date-fns';
 import { t } from '../logical/type-presets.js';
 import { createUniComponentFromWebComponent } from '../utils/uni-component/uni-component.js';
 import { BooleanGroupView } from './renderer/boolean-group.js';
+import { DateGroupView } from './renderer/date-group.js';
 import { NumberGroupView } from './renderer/number-group.js';
 import { SelectGroupView } from './renderer/select-group.js';
 import { StringGroupView } from './renderer/string-group.js';
@@ -12,6 +14,117 @@ export const ungroups = {
     key: 'Ungroups',
     value: null,
 };
+const WEEK_OPTS_MON = { weekStartsOn: 1 };
+const WEEK_OPTS_SUN = { weekStartsOn: 0 };
+const rangeLabel = (a, b) => `${fmt(a, 'MMM d yyyy')} – ${fmt(b, 'MMM d yyyy')}`;
+/**
+ * A date property can be read at several grains — relative to today, by day,
+ * by week, by month, by year. Each grain is its own group-by config, named so
+ * that a stored `groupBy.name` can pick the grain back up on reload.
+ */
+const buildDateCfg = (name, grouper, groupName) => createGroupByConfig({
+    name,
+    matchType: t.date.instance(),
+    groupName: (_t, v) => groupName(v),
+    defaultKeys: _t => [ungroups],
+    valuesGroup: (v, _t) => grouper(v),
+    addToGroup: (group, _old) => group,
+    view: createUniComponentFromWebComponent(DateGroupView),
+});
+const dateRelativeCfg = buildDateCfg('date-relative', v => {
+    if (v == null)
+        return [ungroups];
+    const day = startOfDay(new Date(v));
+    const daysDiff = differenceInCalendarDays(day, startOfDay(new Date()));
+    if (isToday(day))
+        return [{ key: 'today', value: +day }];
+    if (isTomorrow(day))
+        return [{ key: 'tomorrow', value: +day }];
+    if (isYesterday(day))
+        return [{ key: 'yesterday', value: +day }];
+    if (daysDiff > 0) {
+        if (daysDiff <= 7)
+            return [{ key: 'next7', value: +day }];
+        if (daysDiff <= 30)
+            return [{ key: 'next30', value: +day }];
+        const month = startOfMonth(day);
+        return [{ key: `${+month}`, value: +month }];
+    }
+    const daysAgo = -daysDiff;
+    if (daysAgo <= 7)
+        return [{ key: 'last7', value: +day }];
+    if (daysAgo <= 30)
+        return [{ key: 'last30', value: +day }];
+    const month = startOfMonth(day);
+    return [{ key: `${+month}`, value: +month }];
+}, v => {
+    if (v == null)
+        return '';
+    const day = startOfDay(new Date(v));
+    const daysDiff = differenceInCalendarDays(day, startOfDay(new Date()));
+    if (isToday(day))
+        return 'Today';
+    if (isTomorrow(day))
+        return 'Tomorrow';
+    if (isYesterday(day))
+        return 'Yesterday';
+    if (daysDiff > 0) {
+        if (daysDiff <= 7)
+            return 'Next 7 days';
+        if (daysDiff <= 30)
+            return 'Next 30 days';
+        return fmt(new Date(v), 'MMM yyyy');
+    }
+    const daysAgo = -daysDiff;
+    if (daysAgo <= 7)
+        return 'Last 7 days';
+    if (daysAgo <= 30)
+        return 'Last 30 days';
+    return fmt(new Date(v), 'MMM yyyy');
+});
+const dateDayCfg = buildDateCfg('date-day', v => {
+    if (v == null)
+        return [ungroups];
+    const day = startOfDay(new Date(v));
+    return [{ key: `${+day}`, value: +day }];
+}, v => (v ? fmt(new Date(v), 'MMM d yyyy') : ''));
+const dateWeekSunCfg = buildDateCfg('date-week-sun', v => {
+    if (v == null)
+        return [ungroups];
+    const week = startOfWeek(new Date(v), WEEK_OPTS_SUN);
+    return [{ key: `${+week}`, value: +week }];
+}, v => (v ? rangeLabel(new Date(v), addDays(new Date(v), 6)) : ''));
+const dateWeekMonCfg = buildDateCfg('date-week-mon', v => {
+    if (v == null)
+        return [ungroups];
+    const week = startOfWeek(new Date(v), WEEK_OPTS_MON);
+    return [{ key: `${+week}`, value: +week }];
+}, v => (v ? rangeLabel(new Date(v), addDays(new Date(v), 6)) : ''));
+const dateMonthCfg = buildDateCfg('date-month', v => {
+    if (v == null)
+        return [ungroups];
+    const month = startOfMonth(new Date(v));
+    return [{ key: `${+month}`, value: +month }];
+}, v => (v ? fmt(new Date(v), 'MMM yyyy') : ''));
+const dateYearCfg = buildDateCfg('date-year', v => {
+    if (v == null)
+        return [ungroups];
+    const year = startOfYear(new Date(v));
+    return [{ key: `${+year}`, value: +year }];
+}, v => (v ? fmt(new Date(v), 'yyyy') : ''));
+/**
+ * The grains a date property offers, in the order the picker shows them. The
+ * first one is what `matcher.match` returns for a date property that has no
+ * grain stored yet.
+ */
+export const dateGroupByConfigs = [
+    dateRelativeCfg,
+    dateDayCfg,
+    dateWeekSunCfg,
+    dateWeekMonCfg,
+    dateMonthCfg,
+    dateYearCfg,
+];
 export const groupByMatchers = [
     createGroupByConfig({
         name: 'select',
@@ -172,4 +285,5 @@ export const groupByMatchers = [
         addToGroup: v => v,
         view: createUniComponentFromWebComponent(BooleanGroupView),
     }),
+    ...dateGroupByConfigs,
 ];

package/dist/_pkgs/data-view/core/group-by/matcher.d.ts

@@ -2,6 +2,13 @@ import type { DataSource } from '../data-source/base.js';
 import { Matcher_ } from '../logical/matcher.js';
 import type { GroupByConfig } from './types.js';
 export declare const createGroupByMatcher: (list: GroupByConfig[]) => Matcher_<GroupByConfig, import("../index.js").TypeInstance>;
+/**
+ * Resolve a group-by config by the name a stored `groupBy` carries. A property
+ * type can offer several configs — a date reads as relative, by day, by week,
+ * by month or by year — and only the stored name says which one the reader
+ * chose; matching on the type alone would silently snap back to the default.
+ */
+export declare const findGroupByConfigByName: (dataSource: DataSource, name: string) => GroupByConfig | undefined;
 export declare class GroupByService {
     private readonly dataSource;
     constructor(dataSource: DataSource);

package/dist/_pkgs/data-view/core/group-by/matcher.js

@@ -4,6 +4,19 @@ import { groupByMatchers } from './define.js';
 export const createGroupByMatcher = (list) => {
     return new Matcher_(list, v => v.matchType);
 };
+/**
+ * Resolve a group-by config by the name a stored `groupBy` carries. A property
+ * type can offer several configs — a date reads as relative, by day, by week,
+ * by month or by year — and only the stored name says which one the reader
+ * chose; matching on the type alone would silently snap back to the default.
+ */
+export const findGroupByConfigByName = (dataSource, name) => {
+    const service = getGroupByService(dataSource);
+    return [
+        ...(service?.allExternalGroupByConfig() ?? []),
+        ...groupByMatchers,
+    ].find(config => config.name === name);
+};
 export class GroupByService {
     constructor(dataSource) {
         this.dataSource = dataSource;

package/dist/_pkgs/data-view/core/group-by/renderer/boolean-group.js

@@ -2,21 +2,21 @@ import { CheckBoxCheckSolidIcon, CheckBoxUnIcon } from '@blocksuite/icons/lit';
 import { css, html } from 'lit';
 import { BaseGroup } from './base.js';
 export class BooleanGroupView extends BaseGroup {
-    static { this.styles = css `
-    .data-view-group-title-boolean-view {
-      display: flex;
-      align-items: center;
-    }
-    .data-view-group-title-boolean-view svg {
-      width: 20px;
-      height: 20px;
-    }
+    static { this.styles = css `
+    .data-view-group-title-boolean-view {
+      display: flex;
+      align-items: center;
+    }
+    .data-view-group-title-boolean-view svg {
+      width: 20px;
+      height: 20px;
+    }
   `; }
     render() {
-        return html ` <div class="data-view-group-title-boolean-view">
+        return html ` <div class="data-view-group-title-boolean-view">
       ${this.value
             ? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
-            : CheckBoxUnIcon()}
+            : CheckBoxUnIcon()}
     </div>`;
     }
 }

package/dist/_pkgs/data-view/core/group-by/renderer/date-group.d.ts

@@ -0,0 +1,9 @@
+import { ShadowlessElement } from '../../../../std/index.js';
+import type { Group } from '../trait.js';
+declare const DateGroupView_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
+export declare class DateGroupView extends DateGroupView_base {
+    static styles: import("lit").CSSResult;
+    accessor group: Group;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/_pkgs/data-view/core/group-by/renderer/date-group.js

@@ -0,0 +1,97 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { SignalWatcher, WithDisposable } from '../../../../global/lit/index.js';
+import { ShadowlessElement } from '../../../../std/index.js';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+let DateGroupView = (() => {
+    let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _group_decorators;
+    let _group_initializers = [];
+    let _group_extraInitializers = [];
+    return class DateGroupView extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _group_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _group_decorators, { kind: "accessor", name: "group", static: false, private: false, access: { has: obj => "group" in obj, get: obj => obj.group, set: (obj, value) => { obj.group = value; } }, metadata: _metadata }, _group_initializers, _group_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = css `
+    .dv-date-group {
+      border-radius: 8px;
+      padding: 4px 8px;
+      width: max-content;
+      cursor: default;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .dv-date-group:hover {
+      background-color: var(--affine-hover-color);
+    }
+    .counter {
+      flex-shrink: 0;
+      min-width: 22px;
+      height: 22px;
+      border-radius: 4px;
+      background: var(--affine-background-secondary-color);
+      color: var(--affine-text-secondary-color);
+      font-size: var(--data-view-cell-text-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `; }
+        #group_accessor_storage = __runInitializers(this, _group_initializers, void 0);
+        get group() { return this.#group_accessor_storage; }
+        set group(value) { this.#group_accessor_storage = value; }
+        render() {
+            const name = this.group.name$.value;
+            // Use contextual name based on the property when value is null
+            const displayName = name ||
+                (this.group.value === null
+                    ? `No ${this.group.property.name$.value}`
+                    : 'Ungroups');
+            return html `<div class="dv-date-group">
+      <span>${displayName}</span>
+    </div>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _group_extraInitializers);
+        }
+    };
+})();
+export { DateGroupView };

package/dist/_pkgs/data-view/core/group-by/setting.js

@@ -200,6 +200,73 @@ let GroupSetting = (() => {
     };
 })();
 export { GroupSetting };
+/**
+ * The grains a date property can be read at, in the order the picker offers
+ * them. Keys match the group-by config names registered in `define.ts`.
+ */
+const dateGroupModes = [
+    { name: 'date-relative', label: 'Relative' },
+    { name: 'date-day', label: 'Day' },
+    { name: 'date-week-mon', label: 'Week (starts Monday)' },
+    { name: 'date-week-sun', label: 'Week (starts Sunday)' },
+    { name: 'date-month', label: 'Month' },
+    { name: 'date-year', label: 'Year' },
+];
+const dateGroupModeLabel = (name) => dateGroupModes.find(mode => mode.name === name)?.label ?? '';
+const dateGroupSettingItems = (group, reopen) => [
+    menu.subMenu({
+        name: 'Group dates by',
+        postfix: html `
+      <div
+        style="font-size: 12px;line-height: 20px;color: var(--affine-text-secondary-color);margin-right: 4px;margin-left: 8px;"
+      >
+        ${dateGroupModeLabel(group.groupInfo$.value?.config.name)}
+      </div>
+    `,
+        options: {
+            title: { text: 'Group dates by' },
+            items: dateGroupModes.map(mode => menu.action({
+                name: mode.label,
+                isSelected: group.groupInfo$.value?.config.name === mode.name,
+                select: () => {
+                    group.changeGroupMode(mode.name);
+                    reopen();
+                },
+            })),
+        },
+    }),
+    menu.subMenu({
+        name: 'Order',
+        postfix: html `
+      <div
+        style="font-size: 12px;line-height: 20px;color: var(--affine-text-secondary-color);margin-right: 4px;margin-left: 8px;"
+      >
+        ${group.sortAsc$.value ? 'Oldest first' : 'Newest first'}
+      </div>
+    `,
+        options: {
+            title: { text: 'Order' },
+            items: [
+                menu.action({
+                    name: 'Oldest first',
+                    isSelected: group.sortAsc$.value,
+                    select: () => {
+                        group.setDateSortOrder(true);
+                        reopen();
+                    },
+                }),
+                menu.action({
+                    name: 'Newest first',
+                    isSelected: !group.sortAsc$.value,
+                    select: () => {
+                        group.setDateSortOrder(false);
+                        reopen();
+                    },
+                }),
+            ],
+        },
+    }),
+];
 export const selectGroupByProperty = (group, ops) => {
     const view = group.view;
     return {
@@ -301,13 +368,25 @@ export const popGroupSetting = (target, group, onBack) => {
                     ],
                 }),
                 menu.group({
-                    items: [
-                        menu => html ` <data-view-group-setting
-                @mouseenter="${() => menu.closeSubMenu()}"
-                .groupTrait="${group}"
-                .columnId="${groupProperty.id}"
-              ></data-view-group-setting>`,
-                    ],
+                    items: group.isDateGroup$.value
+                        ? dateGroupSettingItems(group, () => {
+                            menuHandler.close();
+                            popGroupSetting(target, group, onBack);
+                        })
+                        : [],
+                }),
+                menu.group({
+                    // A date grouping has no manual group order: its groups are derived
+                    // from the dates themselves and read chronologically.
+                    items: group.isDateGroup$.value
+                        ? []
+                        : [
+                            menu => html ` <data-view-group-setting
+                    @mouseenter="${() => menu.closeSubMenu()}"
+                    .groupTrait="${group}"
+                    .columnId="${groupProperty.id}"
+                  ></data-view-group-setting>`,
+                        ],
                 }),
                 menu.group({
                     items: [

package/dist/_pkgs/data-view/core/group-by/trait.d.ts

@@ -24,10 +24,30 @@ export declare class Group<RawValue = unknown, JsonValue = unknown, Data extends
     get tType(): TypeInstance;
     get view(): import("../../../affine-shared/types/uni-component.js").UniComponent<import("./types.js").GroupRenderProps<unknown, {}>>;
 }
+export declare const isDateGroupInfo: (groupInfo: GroupInfo | undefined) => boolean;
+/**
+ * Order the group keys. Date groups read chronologically — their keys are
+ * timestamps, or the relative buckets from last30 to next30 — so the manual
+ * drag order does not apply to them and `sortGroup` is bypassed.
+ */
+export declare const orderGroupKeys: (keys: string[], groupInfo: GroupInfo | undefined, sortGroup: (keys: string[]) => string[], sortAsc: boolean) => string[];
+/**
+ * Move `groupKey` to `position` inside `keys`, or leave the order untouched
+ * when the move cannot be honoured: an unknown group, an unknown anchor, or a
+ * group dropped onto itself. Reordering blindly would splice at index -1 and
+ * quietly destroy the manual order of an unrelated group.
+ */
+export declare const reorderGroupKeys: (keys: string[], groupKey: string, position: InsertToPosition) => string[];
 export declare class GroupTrait {
     private readonly groupBy$;
     view: SingleView;
     private readonly ops;
+    /**
+     * Reading direction of a date grouping. Kept in a signal so the UI can flip
+     * it, and mirrored from the stored `groupBy.sort` so a reload reads the same
+     * way round.
+     */
+    sortAsc$: import("@preact/signals-core").Signal<boolean>;
     groupInfo$: ReadonlySignal<GroupInfo<unknown, unknown, Record<string, unknown>> | undefined>;
     staticInfo$: ReadonlySignal<{
         staticMap: {
@@ -50,6 +70,20 @@ export declare class GroupTrait {
         changeGroupSort: (keys: string[]) => void;
         changeRowSort: (groupKeys: string[], groupKey: string, keys: string[]) => void;
     });
+    /**
+     * Whether the current grouping reads a date property, and so offers grains
+     * and a reading direction rather than a manual group order.
+     */
+    isDateGroup$: ReadonlySignal<boolean>;
+    /**
+     * Re-read the same property at another grain — relative, day, week, month,
+     * year — keeping the reading direction.
+     */
+    changeGroupMode(modeName: string): void;
+    /**
+     * Flip a date grouping between oldest-first and newest-first.
+     */
+    setDateSortOrder(asc: boolean): void;
     addToGroup(rowId: string, key: string): void;
     changeCardSort(groupKey: string, cardIds: string[]): void;
     changeGroup(columnId: string | undefined): void;

package/dist/_pkgs/data-view/core/group-by/trait.js

@@ -1,9 +1,10 @@
 import { insertPositionToIndex, } from '../../../affine-shared/utils/index.js';
-import { computed } from '@preact/signals-core';
+import { computed, effect, signal, } from '@preact/signals-core';
 import { createTraitKey } from '../traits/key.js';
 import { computedLock } from '../utils/lock.js';
+import { compareDateKeys } from './compare-date-keys.js';
 import { defaultGroupBy } from './default.js';
-import { getGroupByService } from './matcher.js';
+import { findGroupByConfigByName, getGroupByService } from './matcher.js';
 export class Group {
     constructor(key, value, groupInfo, manager) {
         this.key = key;
@@ -32,6 +33,46 @@ export class Group {
         return this.config.view;
     }
 }
+export const isDateGroupInfo = (groupInfo) => groupInfo?.config.matchType.name === 'Date';
+/**
+ * Order the group keys. Date groups read chronologically — their keys are
+ * timestamps, or the relative buckets from last30 to next30 — so the manual
+ * drag order does not apply to them and `sortGroup` is bypassed.
+ */
+export const orderGroupKeys = (keys, groupInfo, sortGroup, sortAsc) => {
+    if (isDateGroupInfo(groupInfo)) {
+        return [...keys].sort(compareDateKeys(groupInfo?.config.name, sortAsc));
+    }
+    return sortGroup(keys);
+};
+/**
+ * Move `groupKey` to `position` inside `keys`, or leave the order untouched
+ * when the move cannot be honoured: an unknown group, an unknown anchor, or a
+ * group dropped onto itself. Reordering blindly would splice at index -1 and
+ * quietly destroy the manual order of an unrelated group.
+ */
+export const reorderGroupKeys = (keys, groupKey, position) => {
+    const currentIndex = keys.findIndex(key => key === groupKey);
+    if (currentIndex < 0) {
+        return keys;
+    }
+    if (typeof position === 'object') {
+        if (position.id === groupKey) {
+            return keys;
+        }
+        if (!keys.includes(position.id)) {
+            return keys;
+        }
+    }
+    const reordered = [...keys];
+    reordered.splice(currentIndex, 1);
+    const index = insertPositionToIndex(position, reordered, key => key);
+    if (index < 0) {
+        return keys;
+    }
+    reordered.splice(index, 0, groupKey);
+    return reordered;
+};
 export class GroupTrait {
     get addGroup() {
         return this.property$.value?.meta$.value?.config.addGroup;
@@ -40,6 +81,12 @@ export class GroupTrait {
         this.groupBy$ = groupBy$;
         this.view = view;
         this.ops = ops;
+        /**
+         * Reading direction of a date grouping. Kept in a signal so the UI can flip
+         * it, and mirrored from the stored `groupBy.sort` so a reload reads the same
+         * way round.
+         */
+        this.sortAsc$ = signal(true);
         this.groupInfo$ = computed(() => {
             const groupBy = this.groupBy$.value;
             if (!groupBy) {
@@ -54,7 +101,12 @@ export class GroupTrait {
                 return;
             }
             const groupByService = getGroupByService(this.view.manager.dataSource);
-            const result = groupByService?.matcher.match(tType);
+            // The stored name wins: a date property offers several grains and only the
+            // name says which one was chosen. Matching on the type alone would snap a
+            // "by month" grouping back to the default grain on every reload.
+            const result = (groupBy.name != null
+                ? findGroupByConfigByName(this.view.manager.dataSource, groupBy.name)
+                : undefined) ?? groupByService?.matcher.match(tType);
             if (!result) {
                 return;
             }
@@ -105,7 +157,7 @@ export class GroupTrait {
             if (!groupMap) {
                 return;
             }
-            const sortedGroup = this.ops.sortGroup(Object.keys(groupMap));
+            const sortedGroup = orderGroupKeys(Object.keys(groupMap), this.groupInfo$.value, this.ops.sortGroup, this.sortAsc$.value);
             sortedGroup.forEach(key => {
                 if (!groupMap[key])
                     return;
@@ -129,6 +181,44 @@ export class GroupTrait {
             }
             return groupInfo.property;
         });
+        /**
+         * Whether the current grouping reads a date property, and so offers grains
+         * and a reading direction rather than a manual group order.
+         */
+        this.isDateGroup$ = computed(() => isDateGroupInfo(this.groupInfo$.value));
+        // Mirror the stored reading direction into the signal the UI drives.
+        effect(() => {
+            const desc = this.groupBy$.value?.sort?.desc;
+            if (desc != null && this.sortAsc$.value === desc) {
+                this.sortAsc$.value = !desc;
+            }
+        });
+    }
+    /**
+     * Re-read the same property at another grain — relative, day, week, month,
+     * year — keeping the reading direction.
+     */
+    changeGroupMode(modeName) {
+        const propertyId = this.property$.value?.id;
+        if (!propertyId) {
+            return;
+        }
+        this.ops.groupBySet({
+            type: 'groupBy',
+            columnId: propertyId,
+            name: modeName,
+            sort: { desc: !this.sortAsc$.value },
+        });
+    }
+    /**
+     * Flip a date grouping between oldest-first and newest-first.
+     */
+    setDateSortOrder(asc) {
+        this.sortAsc$.value = asc;
+        const groupBy = this.groupBy$.value;
+        if (groupBy) {
+            this.ops.groupBySet({ ...groupBy, sort: { desc: !asc } });
+        }
     }
     addToGroup(rowId, key) {
         this.view.lockRows(false);
@@ -164,7 +254,11 @@ export class GroupTrait {
         const column = this.view.propertyGetOrCreate(columnId);
         const propertyMeta = this.view.manager.dataSource.propertyMetaGet(column.type$.value);
         if (propertyMeta) {
-            this.ops.groupBySet(defaultGroupBy(this.view.manager.dataSource, propertyMeta, column.id, column.data$.value));
+            const groupBy = defaultGroupBy(this.view.manager.dataSource, propertyMeta, column.id, column.data$.value);
+            if (groupBy) {
+                groupBy.sort = { desc: !this.sortAsc$.value };
+            }
+            this.ops.groupBySet(groupBy);
         }
     }
     changeGroupSort(keys) {
@@ -214,11 +308,13 @@ export class GroupTrait {
         if (!groups) {
             return;
         }
-        const keys = groups.map(v => v.key);
-        keys.splice(keys.findIndex(key => key === groupKey), 1);
-        const index = insertPositionToIndex(position, keys, key => key);
-        keys.splice(index, 0, groupKey);
-        this.changeGroupSort(keys);
+        const currentKeys = groups.map(v => v.key);
+        const reorderedKeys = reorderGroupKeys(currentKeys, groupKey, position);
+        if (currentKeys.length === reorderedKeys.length &&
+            currentKeys.every((key, index) => key === reorderedKeys[index])) {
+            return;
+        }
+        this.changeGroupSort(reorderedKeys);
     }
     removeFromGroup(rowId, key) {
         this.view.lockRows(false);

package/dist/_pkgs/data-view/core/index.d.ts

@@ -3,7 +3,7 @@ export * from './component/index.js';
 export { DataSourceBase } from './data-source/base.js';
 export { DataViewRootUILogic } from './data-view.js';
 export * from './filter/index.js';
-export * from './group-by';
+export * from './group-by/index.js';
 export * from './logical/index.js';
 export * from './property/index.js';
 export type { DataViewSelection } from './types.js';

package/dist/_pkgs/data-view/core/index.js

@@ -3,7 +3,7 @@ export * from './component/index.js';
 export { DataSourceBase } from './data-source/base.js';
 export { DataViewRootUILogic } from './data-view.js';
 export * from './filter/index.js';
-export * from './group-by';
+export * from './group-by/index.js';
 export * from './logical/index.js';
 export * from './property/index.js';
 export * from './types.js';

package/dist/_pkgs/data-view/core/property/utils.d.ts

@@ -1,5 +1,5 @@
-import type { DataSource } from '../data-source/base';
-import type { PropertyConfig } from './types';
+import type { DataSource } from '../data-source/base.js';
+import type { PropertyConfig } from './types.js';
 export declare const fromJson: <Data, RawValue, JsonValue>(config: PropertyConfig<Data, RawValue, JsonValue>, { value, data, dataSource, }: {
     value: unknown;
     data: Data;