@stll/workspace-ui 0.13.1 → 0.14.1

package/README.md

@@ -32,6 +32,25 @@ import { SortChips } from "@stll/workspace-ui/sorts";
 import { WorkspaceViewSwitcher } from "@stll/workspace-ui/view-switcher";
 ```
 
+## Formatting locale
+
+Field values and column calculations format numbers, money and dates in the
+reader's formatting locale, which can differ from the UI language that
+`use-intl`'s `IntlProvider` serves messages in (an English interface with
+German number formatting, say). Render them inside
+`WorkspaceUiFormattingProvider`; without it they throw rather than fall back
+to the UI language.
+
+```tsx
+import { WorkspaceUiFormattingProvider } from "@stll/workspace-ui/formatting";
+
+<IntlProvider locale="en" messages={messages} timeZone="Europe/Prague">
+  <WorkspaceUiFormattingProvider locale="de-DE" timeZone="Europe/Prague">
+    {children}
+  </WorkspaceUiFormattingProvider>
+</IntlProvider>;
+```
+
 The package also exposes a root entry for code that uses several workspace
 surfaces together. Focused modules, including the responsive action toolbar,
 are intentionally available through explicit subpaths; use those subpaths to

package/dist/calculations.js

@@ -1,6 +1,6 @@
 import { formatCalculationResult } from "./calculation-format.js";
 import { applyCalculationSelection } from "./calculation-selection.js";
-import { useFormatter, useLocale } from "use-intl";
+import { useFormatter, useFormattingLocale } from "./formatting.js";
 import { runCalculation } from "@stll/calculations";
 import { formatMoneyCents } from "@stll/money";
 import { Button } from "@stll/ui/button";
@@ -95,7 +95,7 @@ const useCalculation = ({ kind, labels, values, scopeValues }) => {
 const ColumnCalculation = (params) => /* @__PURE__ */ jsx(CalculationSummary, { calculation: useCalculation(params) });
 const useCalculationFormatters = () => {
 	const format = useFormatter();
-	const locale = useLocale();
+	const locale = useFormattingLocale();
 	return {
 		number: (value) => format.number(value),
 		money: (amountCents, currency) => formatMoneyCents({

package/dist/column-sort.d.ts

@@ -0,0 +1,20 @@
+//#region src/column-sort.d.ts
+/**
+ * The vocabulary a table column's order is described in: which kind of value
+ * it orders by, and which way. The kind decides how a header names each
+ * direction (a date oldest first, a name A to Z, a count lowest first).
+ */
+export declare const COLUMN_SORT_KINDS: readonly ["text", "date", "number"];
+export type ColumnSortKind = (typeof COLUMN_SORT_KINDS)[number];
+/** The two ways a column orders its rows. */
+export declare const SORT_DIRECTIONS: readonly ["asc", "desc"];
+export type SortDirection = (typeof SORT_DIRECTIONS)[number];
+/**
+ * What each direction of each kind is called, in the reader's language: total
+ * over both, so every place that names an order (a header's sort items, a
+ * view's sort chips) reads its wording from one record the caller translates.
+ */
+export type SortDirectionLabels = Record<ColumnSortKind, Record<SortDirection, string>>;
+/** The direction a stored `desc` flag orders in. */
+export declare const sortDirectionOf: (desc: boolean) => SortDirection;
+//#endregion

package/dist/column-sort.js

@@ -0,0 +1,17 @@
+//#region src/column-sort.ts
+/**
+* The vocabulary a table column's order is described in: which kind of value
+* it orders by, and which way. The kind decides how a header names each
+* direction (a date oldest first, a name A to Z, a count lowest first).
+*/
+const COLUMN_SORT_KINDS = [
+	"text",
+	"date",
+	"number"
+];
+/** The two ways a column orders its rows. */
+const SORT_DIRECTIONS = ["asc", "desc"];
+/** The direction a stored `desc` flag orders in. */
+const sortDirectionOf = (desc) => desc ? "desc" : "asc";
+//#endregion
+export { COLUMN_SORT_KINDS, SORT_DIRECTIONS, sortDirectionOf };

package/dist/conditions/builder.js

@@ -2,9 +2,9 @@ import { appendChild, asGroup, buildLeaf, isConditionOperator, isMultiValue, lea
 import { panic } from "better-result";
 import { Button } from "@stll/ui/button";
 import { PlusIcon, XIcon } from "@stll/ui/icons";
+import { createContext, use } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@stll/ui/utils";
-import { createContext, use } from "react";
 import { DatePickerPopover } from "@stll/ui/date-picker-popover";
 import { Input } from "@stll/ui/input";
 import { Select, SelectItem, SelectPopup, SelectSeparator, SelectTrigger, SelectValue } from "@stll/ui/select";

package/dist/field-value.d.ts

@@ -1,5 +1,5 @@
 import { GenericProperty, WorkspaceFieldContent } from "./types.js";
-import { useFormatter } from "use-intl";
+import { useFormatter } from "./formatting.js";
 //#region src/field-value.d.ts
 export type FieldValueVariant = "default" | "table" | "kanban";
 type PropertyContentType = GenericProperty["content"]["type"];
@@ -68,5 +68,5 @@ type PendingSkeletonProps = {
 };
 export declare const PendingSkeleton: ({ contentType }: PendingSkeletonProps) => import("react").JSX.Element;
 export declare const getSelectPropertyColor: (property: GenericProperty, option: string | null) => import("@stll/ui/option-color").ColorVariants | undefined;
-export declare const getIntClassName: (variant: FieldValueVariant) => "text-muted-foreground bg-muted/60 rounded px-1.5 py-0.5 text-xs leading-none tabular-nums" | "block max-w-full min-w-0 truncate text-start tabular-nums" | "block min-w-0 max-w-full truncate text-start text-sm tabular-nums";
+export declare const getIntClassName: (variant: FieldValueVariant) => "block max-w-full min-w-0 truncate text-start tabular-nums" | "block min-w-0 max-w-full truncate text-start text-sm tabular-nums" | "text-muted-foreground bg-muted/60 rounded px-1.5 py-0.5 text-xs leading-none tabular-nums";
 //#endregion

package/dist/field-value.js

@@ -1,11 +1,12 @@
+import { useFormatter, useFormattingLocale } from "./formatting.js";
 import { emptyColor, resolveOptionColor } from "./colors.js";
 import { getClipFieldValueLabel } from "./field-value-logic.js";
 import { Result } from "better-result";
-import { useFormatter, useLocale, useTranslations } from "use-intl";
 import { formatMoneyCents } from "@stll/money";
 import { SquareMinusIcon } from "@stll/ui/icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Temporal } from "temporal-polyfill/full";
+import { useTranslations } from "use-intl";
 import { BidiText } from "@stll/ui/bidi-text";
 import { Skeleton } from "@stll/ui/skeleton";
 import { cn } from "@stll/ui/utils";
@@ -84,7 +85,7 @@ const formatIntFieldValue = ({ content, format }) => {
 	})).unwrapOr(`${format.number(content.value)} ${currency}`);
 };
 const MoneyFieldValue = ({ content, variant }) => {
-	const locale = useLocale();
+	const locale = useFormattingLocale();
 	return /* @__PURE__ */ jsx("span", {
 		className: cn(getIntClassName(variant ?? "default")),
 		children: formatMoneyCents({

package/dist/formatting.d.ts

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from "react";
+import { createFormatter } from "use-intl/core";
+//#region src/formatting.d.ts
+type Formatter = ReturnType<typeof createFormatter>;
+export type WorkspaceUiFormattingProviderProps = PropsWithChildren<{
+  /**
+   * The reader's formatting locale (region, calendar, numbering system and
+   * week start as `-u-` extensions), which may differ from the UI language
+   * the host's `IntlProvider` serves messages in.
+   */
+  locale: string;
+  timeZone: string;
+}>;
+/**
+ * Supplies the locale this package formats numbers, money and dates in.
+ * Components that format read it here rather than from `use-intl`, whose
+ * locale is the UI language.
+ */
+export declare const WorkspaceUiFormattingProvider: ({ children, locale, timeZone }: WorkspaceUiFormattingProviderProps) => import("react").JSX.Element;
+export declare const useFormatter: () => Formatter;
+export declare const useFormattingLocale: () => string;
+//#endregion

package/dist/formatting.js

@@ -0,0 +1,33 @@
+import { panic } from "better-result";
+import { createContext, useContext, useMemo } from "react";
+import { createFormatter } from "use-intl/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/formatting.tsx
+const FormattingContext = createContext(void 0);
+/**
+* Supplies the locale this package formats numbers, money and dates in.
+* Components that format read it here rather than from `use-intl`, whose
+* locale is the UI language.
+*/
+const WorkspaceUiFormattingProvider = ({ children, locale, timeZone }) => {
+	const formatting = useMemo(() => ({
+		formatter: createFormatter({
+			locale,
+			timeZone
+		}),
+		locale
+	}), [locale, timeZone]);
+	return /* @__PURE__ */ jsx(FormattingContext, {
+		value: formatting,
+		children
+	});
+};
+const useFormatting = () => {
+	const formatting = useContext(FormattingContext);
+	if (!formatting) panic("@stll/workspace-ui formats numbers and dates in the host's formatting locale; render this component inside WorkspaceUiFormattingProvider");
+	return formatting;
+};
+const useFormatter = () => useFormatting().formatter;
+const useFormattingLocale = () => useFormatting().locale;
+//#endregion
+export { WorkspaceUiFormattingProvider, useFormatter, useFormattingLocale };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { WorkspaceViewSwitcher, WorkspaceViewSwitcherEditing, WorkspaceViewSwitcherItem, WorkspaceViewSwitcherProps, WorkspaceViewSwitcherReorder } from "./view-switcher.js";
 import { CalculationFormatters, CalculationLabels, FormatCalculationParams, FormattedCalculation, formatCalculationResult } from "./calculation-format.js";
 import { ApplyCalculationSelectionParams, CalculationSelection, applyCalculationSelection } from "./calculation-selection.js";
 import { CalculationKindPicker, CalculationKindPickerProps, CalculationPicker, CalculationPickerProps, CalculationProperty, CalculationResult, CalculationSummary, CalculationSummaryProps, ColumnCalculation, UseCalculationParams, WorkspaceCalculationLabels, useCalculation } from "./calculations.js";
@@ -7,11 +8,11 @@ import { PropertyIcon, PropertyIconType } from "./property-icon.js";
 import { CONDITION_OPERATORS, ConditionOperator, FieldOption, FieldOptionChoice, FieldValueType, ValueEditorKind, appendChild, asGroup, buildLeaf, fieldForNode, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, removeChild, replaceChild, valueEditorFor } from "./conditions/logic.js";
 import { ConditionBuilder, ConditionBuilderLabels, ConditionCapabilities, FormulaCellRenderCtx, ValueEditorRenderCtx } from "./conditions/builder.js";
 import { getClipFieldValueLabel } from "./field-value-logic.js";
+import { WorkspaceUiFormattingProvider, WorkspaceUiFormattingProviderProps } from "./formatting.js";
 import { FieldValue, IntFieldValue, MoneyFieldValue, PersonFieldValue } from "./field-value.js";
-import { SortChips, SortChipsLabels, SortChipsProps, SortDescriptor, SortableProperty, sortDirectionHint } from "./sorts.js";
+import { SortChips, SortChipsLabels, SortChipsProps, SortDescriptor, SortableProperty } from "./sorts.js";
 import { TableSkeletonRows } from "./table-skeleton-rows.js";
 import { CreateWorkspaceKanbanSchemaParams, KANBAN_EMPTY_GROUP_VISIBILITIES, KANBAN_SAVED_VIEW_STATE_VERSION, KanbanBoardPresentation, KanbanEmptyGroupVisibility, KanbanPresentedBand, KanbanPresentedLane, KanbanSavedAxisState, KanbanSavedGroupAxisState, KanbanSavedGroupReference, KanbanSavedSubgroupState, KanbanSavedViewState, KanbanSavedViewStateV1, ResolveWorkspaceKanbanViewParams, ResolvedWorkspaceKanbanView, WorkspaceKanbanBuiltInGroupLabel, WorkspaceKanbanGroupingChoice, WorkspaceKanbanGroupingPickerLabels, WorkspaceKanbanGroupingPickerProps, WorkspaceKanbanProperty, createWorkspaceKanbanSchema, getWorkspaceKanbanGroupingChoices, normalizeKanbanSavedViewState, presentKanbanBoard, resolveWorkspaceKanbanView } from "./kanban-view.js";
 import { WorkspaceKanbanGroupingPicker } from "./kanban-grouping-picker.js";
-import { WorkspaceViewSwitcher, WorkspaceViewSwitcherEditing, WorkspaceViewSwitcherItem, WorkspaceViewSwitcherProps, WorkspaceViewSwitcherReorder } from "./view-switcher.js";
 import { WorkspaceFrame, WorkspaceFrameEndRail, WorkspaceFrameInspector, WorkspaceFrameNavigation, WorkspaceFrameNavigationItem, WorkspaceFrameProps, WorkspaceFrameTopBar } from "./workspace-frame.js";
-export { type ApplyCalculationSelectionParams, CONDITION_OPERATORS, type CalculationFormatters, CalculationKindPicker, type CalculationKindPickerProps, type CalculationLabels, CalculationPicker, type CalculationPickerProps, type CalculationProperty, type CalculationResult, type CalculationSelection, CalculationSummary, type CalculationSummaryProps, type ColorVariants, ColumnCalculation, ConditionBuilder, type ConditionBuilderLabels, type ConditionCapabilities, type ConditionOperator, type CreateWorkspaceKanbanSchemaParams, FIELD_CONTENT_TYPES, type FieldContent, type FieldOption, type FieldOptionChoice, FieldValue, type FieldValueType, type FormatCalculationParams, type FormattedCalculation, type FormulaCellRenderCtx, type GenericProperty, IntFieldValue, KANBAN_EMPTY_GROUP_VISIBILITIES, KANBAN_SAVED_VIEW_STATE_VERSION, type KanbanBoardPresentation, type KanbanEmptyGroupVisibility, type KanbanPresentedBand, type KanbanPresentedLane, type KanbanSavedAxisState, type KanbanSavedGroupAxisState, type KanbanSavedGroupReference, type KanbanSavedSubgroupState, type KanbanSavedViewState, type KanbanSavedViewStateV1, MoneyFieldValue, type OptionColor, PersonFieldValue, PropertyIcon, type PropertyIconType, type ResolveWorkspaceKanbanViewParams, type ResolvedWorkspaceKanbanView, SortChips, type SortChipsLabels, type SortChipsProps, type SortDescriptor, type SortableProperty, TableSkeletonRows, type UseCalculationParams, type ValueEditorKind, type ValueEditorRenderCtx, type WorkspaceCalculationLabels, type WorkspaceFieldContent, WorkspaceFrame, type WorkspaceFrameEndRail, type WorkspaceFrameInspector, type WorkspaceFrameNavigation, type WorkspaceFrameNavigationItem, type WorkspaceFrameProps, type WorkspaceFrameTopBar, type WorkspaceKanbanBuiltInGroupLabel, type WorkspaceKanbanGroupingChoice, WorkspaceKanbanGroupingPicker, type WorkspaceKanbanGroupingPickerLabels, type WorkspaceKanbanGroupingPickerProps, type WorkspaceKanbanProperty, WorkspaceViewSwitcher, type WorkspaceViewSwitcherEditing, type WorkspaceViewSwitcherItem, type WorkspaceViewSwitcherProps, type WorkspaceViewSwitcherReorder, appendChild, applyCalculationSelection, asGroup, buildLeaf, createWorkspaceKanbanSchema, emptyColor, fieldForNode, formatCalculationResult, getClipFieldValueLabel, getWorkspaceKanbanGroupingChoices, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, normalizeKanbanSavedViewState, operandsEqual, operatorsFor, optionColors, presentKanbanBoard, removeChild, replaceChild, resolveOptionColor, resolveWorkspaceKanbanView, sortDirectionHint, useCalculation, valueEditorFor };
+export { type ApplyCalculationSelectionParams, CONDITION_OPERATORS, type CalculationFormatters, CalculationKindPicker, type CalculationKindPickerProps, type CalculationLabels, CalculationPicker, type CalculationPickerProps, type CalculationProperty, type CalculationResult, type CalculationSelection, CalculationSummary, type CalculationSummaryProps, type ColorVariants, ColumnCalculation, ConditionBuilder, type ConditionBuilderLabels, type ConditionCapabilities, type ConditionOperator, type CreateWorkspaceKanbanSchemaParams, FIELD_CONTENT_TYPES, type FieldContent, type FieldOption, type FieldOptionChoice, FieldValue, type FieldValueType, type FormatCalculationParams, type FormattedCalculation, type FormulaCellRenderCtx, type GenericProperty, IntFieldValue, KANBAN_EMPTY_GROUP_VISIBILITIES, KANBAN_SAVED_VIEW_STATE_VERSION, type KanbanBoardPresentation, type KanbanEmptyGroupVisibility, type KanbanPresentedBand, type KanbanPresentedLane, type KanbanSavedAxisState, type KanbanSavedGroupAxisState, type KanbanSavedGroupReference, type KanbanSavedSubgroupState, type KanbanSavedViewState, type KanbanSavedViewStateV1, MoneyFieldValue, type OptionColor, PersonFieldValue, PropertyIcon, type PropertyIconType, type ResolveWorkspaceKanbanViewParams, type ResolvedWorkspaceKanbanView, SortChips, type SortChipsLabels, type SortChipsProps, type SortDescriptor, type SortableProperty, TableSkeletonRows, type UseCalculationParams, type ValueEditorKind, type ValueEditorRenderCtx, type WorkspaceCalculationLabels, type WorkspaceFieldContent, WorkspaceFrame, type WorkspaceFrameEndRail, type WorkspaceFrameInspector, type WorkspaceFrameNavigation, type WorkspaceFrameNavigationItem, type WorkspaceFrameProps, type WorkspaceFrameTopBar, type WorkspaceKanbanBuiltInGroupLabel, type WorkspaceKanbanGroupingChoice, WorkspaceKanbanGroupingPicker, type WorkspaceKanbanGroupingPickerLabels, type WorkspaceKanbanGroupingPickerProps, type WorkspaceKanbanProperty, WorkspaceUiFormattingProvider, type WorkspaceUiFormattingProviderProps, WorkspaceViewSwitcher, type WorkspaceViewSwitcherEditing, type WorkspaceViewSwitcherItem, type WorkspaceViewSwitcherProps, type WorkspaceViewSwitcherReorder, appendChild, applyCalculationSelection, asGroup, buildLeaf, createWorkspaceKanbanSchema, emptyColor, fieldForNode, formatCalculationResult, getClipFieldValueLabel, getWorkspaceKanbanGroupingChoices, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, normalizeKanbanSavedViewState, operandsEqual, operatorsFor, optionColors, presentKanbanBoard, removeChild, replaceChild, resolveOptionColor, resolveWorkspaceKanbanView, useCalculation, valueEditorFor };

package/dist/index.js

@@ -1,5 +1,6 @@
 import { formatCalculationResult } from "./calculation-format.js";
 import { applyCalculationSelection } from "./calculation-selection.js";
+import { WorkspaceUiFormattingProvider } from "./formatting.js";
 import { CalculationKindPicker, CalculationPicker, CalculationSummary, ColumnCalculation, useCalculation } from "./calculations.js";
 import { emptyColor, optionColors, resolveOptionColor } from "./colors.js";
 import { getClipFieldValueLabel } from "./field-value-logic.js";
@@ -7,11 +8,11 @@ import { FieldValue, IntFieldValue, MoneyFieldValue, PersonFieldValue } from "./
 import { CONDITION_OPERATORS, appendChild, asGroup, buildLeaf, fieldForNode, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, removeChild, replaceChild, valueEditorFor } from "./conditions/logic.js";
 import { ConditionBuilder } from "./conditions/builder.js";
 import { PropertyIcon } from "./property-icon.js";
-import { SortChips, sortDirectionHint } from "./sorts.js";
+import { SortChips } from "./sorts.js";
 import { TableSkeletonRows } from "./table-skeleton-rows.js";
 import { FIELD_CONTENT_TYPES } from "./types.js";
 import { KANBAN_EMPTY_GROUP_VISIBILITIES, KANBAN_SAVED_VIEW_STATE_VERSION, createWorkspaceKanbanSchema, getWorkspaceKanbanGroupingChoices, normalizeKanbanSavedViewState, presentKanbanBoard, resolveWorkspaceKanbanView } from "./kanban-view.js";
 import { WorkspaceKanbanGroupingPicker } from "./kanban-grouping-picker.js";
 import { WorkspaceViewSwitcher } from "./view-switcher.js";
 import { WorkspaceFrame } from "./workspace-frame.js";
-export { CONDITION_OPERATORS, CalculationKindPicker, CalculationPicker, CalculationSummary, ColumnCalculation, ConditionBuilder, FIELD_CONTENT_TYPES, FieldValue, IntFieldValue, KANBAN_EMPTY_GROUP_VISIBILITIES, KANBAN_SAVED_VIEW_STATE_VERSION, MoneyFieldValue, PersonFieldValue, PropertyIcon, SortChips, TableSkeletonRows, WorkspaceFrame, WorkspaceKanbanGroupingPicker, WorkspaceViewSwitcher, appendChild, applyCalculationSelection, asGroup, buildLeaf, createWorkspaceKanbanSchema, emptyColor, fieldForNode, formatCalculationResult, getClipFieldValueLabel, getWorkspaceKanbanGroupingChoices, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, normalizeKanbanSavedViewState, operandsEqual, operatorsFor, optionColors, presentKanbanBoard, removeChild, replaceChild, resolveOptionColor, resolveWorkspaceKanbanView, sortDirectionHint, useCalculation, valueEditorFor };
+export { CONDITION_OPERATORS, CalculationKindPicker, CalculationPicker, CalculationSummary, ColumnCalculation, ConditionBuilder, FIELD_CONTENT_TYPES, FieldValue, IntFieldValue, KANBAN_EMPTY_GROUP_VISIBILITIES, KANBAN_SAVED_VIEW_STATE_VERSION, MoneyFieldValue, PersonFieldValue, PropertyIcon, SortChips, TableSkeletonRows, WorkspaceFrame, WorkspaceKanbanGroupingPicker, WorkspaceUiFormattingProvider, WorkspaceViewSwitcher, appendChild, applyCalculationSelection, asGroup, buildLeaf, createWorkspaceKanbanSchema, emptyColor, fieldForNode, formatCalculationResult, getClipFieldValueLabel, getWorkspaceKanbanGroupingChoices, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, normalizeKanbanSavedViewState, operandsEqual, operatorsFor, optionColors, presentKanbanBoard, removeChild, replaceChild, resolveOptionColor, resolveWorkspaceKanbanView, useCalculation, valueEditorFor };

package/dist/sorts.d.ts

@@ -1,3 +1,4 @@
+import { ColumnSortKind, SortDirectionLabels } from "./column-sort.js";
 import { PropertyIconType } from "./property-icon.js";
 //#region src/sorts.d.ts
 /** One sort a view carries. */
@@ -10,12 +11,16 @@ export type SortableProperty = {
   id: string;
   name: string;
   type: PropertyIconType;
+  /** What the property orders by, which decides what its chip calls each direction. */
+  sortKind: ColumnSortKind;
 };
 export type SortChipsLabels = {
   /** Accessible name of the "add a sort" trigger. */
   add: string;
   /** Accessible name of a chip's remove button. */
   remove: string;
+  /** What a chip calls its direction, per kind: the header menu's wording. */
+  directions: SortDirectionLabels;
 };
 export type SortChipsProps = {
   sorts: readonly SortDescriptor[];
@@ -37,10 +42,4 @@ export type SortChipsProps = {
  * draws.
  */
 export declare const SortChips: ({ sorts, properties, onUpdate, labels, maxSorts }: SortChipsProps) => import("react").JSX.Element;
-/**
- * What ascending means depends on what is being sorted: A→Z for words, 1→9 for
- * numbers, an arrow for dates. A type with no idiom falls back to the arrow
- * icon, which is why this returns null rather than a default string.
- */
-export declare const sortDirectionHint: (propertyType: string | undefined, desc: boolean) => string | null;
 //#endregion

package/dist/sorts.js

@@ -1,6 +1,7 @@
+import { sortDirectionOf } from "./column-sort.js";
 import { PropertyIcon } from "./property-icon.js";
 import { Button } from "@stll/ui/button";
-import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon, XIcon } from "@stll/ui/icons";
+import { ArrowUpDownIcon, XIcon } from "@stll/ui/icons";
 import { Menu, MenuItem, MenuPopup, MenuTrigger } from "@stll/ui/menu";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/sorts.tsx
@@ -27,7 +28,7 @@ const SortChips = ({ sorts, properties, onUpdate, labels, maxSorts }) => /* @__P
 			} : candidate));
 		},
 		propertyName: property.name,
-		propertyType: property.type
+		sortKind: property.sortKind
 	}, sort.propertyId);
 }), /* @__PURE__ */ jsx(AddSortButton, {
 	disabled: maxSorts !== void 0 && sorts.length >= maxSorts,
@@ -36,51 +37,24 @@ const SortChips = ({ sorts, properties, onUpdate, labels, maxSorts }) => /* @__P
 	properties,
 	sortedPropertyIds: new Set(sorts.map((sort) => sort.propertyId))
 })] });
-/**
-* What ascending means depends on what is being sorted: A→Z for words, 1→9 for
-* numbers, an arrow for dates. A type with no idiom falls back to the arrow
-* icon, which is why this returns null rather than a default string.
-*/
-const sortDirectionHint = (propertyType, desc) => {
-	if (!propertyType) return null;
-	switch (propertyType) {
-		case "text":
-		case "single-select":
-		case "multi-select":
-		case "file":
-		case "person": return desc ? "Z→A" : "A→Z";
-		case "int":
-		case "money": return desc ? "9→1" : "1→9";
-		case "date": return desc ? "↓" : "↑";
-		default: return null;
-	}
-};
-const SortChip = ({ propertyName, propertyType, desc, onToggle, onRemove, labels }) => {
-	const SortIcon = desc ? ArrowDownIcon : ArrowUpIcon;
-	const hint = sortDirectionHint(propertyType, desc);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "bg-muted/50 flex items-center rounded-md border",
-		children: [/* @__PURE__ */ jsxs(Button, {
-			onClick: onToggle,
-			size: "xs",
-			variant: "ghost",
-			children: [
-				!hint && /* @__PURE__ */ jsx(SortIcon, {}),
-				propertyName,
-				hint && /* @__PURE__ */ jsx("span", {
-					className: "text-muted-foreground",
-					children: hint
-				})
-			]
-		}), /* @__PURE__ */ jsx(Button, {
-			"aria-label": labels.remove,
-			onClick: onRemove,
-			size: "icon-xs",
-			variant: "ghost",
-			children: /* @__PURE__ */ jsx(XIcon, {})
+const SortChip = ({ propertyName, sortKind, desc, onToggle, onRemove, labels }) => /* @__PURE__ */ jsxs("div", {
+	className: "bg-muted/50 flex items-center rounded-md border",
+	children: [/* @__PURE__ */ jsxs(Button, {
+		onClick: onToggle,
+		size: "xs",
+		variant: "ghost",
+		children: [propertyName, /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: labels.directions[sortKind][sortDirectionOf(desc)]
 		})]
-	});
-};
+	}), /* @__PURE__ */ jsx(Button, {
+		"aria-label": labels.remove,
+		onClick: onRemove,
+		size: "icon-xs",
+		variant: "ghost",
+		children: /* @__PURE__ */ jsx(XIcon, {})
+	})]
+});
 const AddSortButton = ({ properties, sortedPropertyIds, onAdd, labels, disabled }) => /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
 	"aria-label": labels.add,
 	disabled,
@@ -98,4 +72,4 @@ const AddSortButton = ({ properties, sortedPropertyIds, onAdd, labels, disabled
 	children: [/* @__PURE__ */ jsx(PropertyIcon, { type: property.type }), property.name]
 }, property.id)) })] });
 //#endregion
-export { SortChips, sortDirectionHint };
+export { SortChips };

package/dist/view-switcher.js

@@ -2,9 +2,9 @@
 import { Button } from "@stll/ui/button";
 import { EllipsisVerticalIcon } from "@stll/ui/icons";
 import { Menu, MenuPopup, MenuTrigger } from "@stll/ui/menu";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@stll/ui/utils";
-import { useCallback, useEffect, useRef, useState } from "react";
 import { attachClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge/attach-closest-edge";
 import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge/extract-closest-edge";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/workspace-ui",
-  "version": "0.13.1",
+  "version": "0.14.1",
   "description": "Reusable workspace presentation components and view helpers for Stella.",
   "keywords": [
     "calculations",
@@ -47,6 +47,10 @@
       "types": "./dist/colors.d.ts",
       "import": "./dist/colors.js"
     },
+    "./column-sort": {
+      "types": "./dist/column-sort.d.ts",
+      "import": "./dist/column-sort.js"
+    },
     "./conditions": {
       "types": "./dist/conditions/index.d.ts",
       "import": "./dist/conditions/index.js"
@@ -63,6 +67,10 @@
       "types": "./dist/field-value-logic.d.ts",
       "import": "./dist/field-value-logic.js"
     },
+    "./formatting": {
+      "types": "./dist/formatting.d.ts",
+      "import": "./dist/formatting.js"
+    },
     "./kanban-grouping-picker": {
       "types": "./dist/kanban-grouping-picker.d.ts",
       "import": "./dist/kanban-grouping-picker.js"
@@ -122,7 +130,7 @@
     "@stll/calculations": "^0.1.3",
     "@stll/conditions": "^0.4.0",
     "@stll/money": "^0.3.1",
-    "@stll/ui": "^0.52.0",
+    "@stll/ui": "^0.54.0",
     "better-result": "3.0.1",
     "temporal-polyfill": "1.0.5",
     "use-intl": "4.14.9"
@@ -130,7 +138,7 @@
   "devDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^3.0.0",
-    "@base-ui/react": "1.8.0",
+    "@base-ui/react": "1.9.0",
     "@stll/property-testing": "0.0.0",
     "@stll/typescript-config": "0.0.0",
     "@tanstack/react-table": "9.3.1",
@@ -141,7 +149,8 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "tailwindcss": "4.3.3",
-    "tsdown": "0.23.0"
+    "tsdown": "0.23.0",
+    "tsrs": "0.18.0-ts7.1.0-dev.20260929"
   },
   "peerDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^4.0.0",