@olenbetong/appframe-ds 1.0.3 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olenbetong/appframe-ds
 
+## 1.1.0
+
+### Minor Changes
+
+- 7a3a3fc: The package's strings (grid, filter builder, bindings, lookups, MDI) are looked up in their own globalization project, `appframe-ds`, through `createLocalizer` from appframe-core 2.14, so one translation covers every app instead of one per article. On a page whose template renders `af.i18n["appframe-ds"]` the strings are harvested under that project; on any other page the lookup falls back to the article's strings as before.
+
 ## 1.0.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -71,8 +71,8 @@
     "react-dom": "19.3.0",
     "react-window": "2.3.1",
     "@olenbetong/appframe-core": "2.14.0",
-    "@olenbetong/appframe-react": "2.2.1",
-    "@olenbetong/appframe-data": "1.7.2"
+    "@olenbetong/appframe-data": "1.7.2",
+    "@olenbetong/appframe-react": "2.2.1"
   },
   "devDependencies": {
     "@digdir/designsystemet-react": "1.21.1",

package/src/AfLookup/Lookup.tsx

@@ -2,7 +2,6 @@ import "./Lookup.css";
 
 import { Button, Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { type DistributiveOmit, useLookupState } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
@@ -10,6 +9,7 @@ import { useRef } from "react";
 import { createPortal } from "react-dom";
 
 import { LookupCombobox, type LookupComboboxProps } from "./LookupCombobox.js";
+import { getLocalizedString } from "../i18n.js";
 
 export type AfLookupProps<T extends Record<string, unknown>> = DistributiveOmit<LookupComboboxProps<T>, "value"> & {
 	/**

package/src/AfLookup/LookupCombobox.tsx

@@ -1,7 +1,6 @@
 import "./LookupCombobox.css";
 
 import { Button, Textfield } from "@digdir/designsystemet-react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import type { DataObject } from "@olenbetong/appframe-data";
 import { type LookupColumn, useComboboxData } from "@olenbetong/appframe-react";
 
@@ -10,6 +9,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { List, type RowComponentProps, useDynamicRowHeight, useListRef } from "react-window";
 
 import { LookupGrid } from "./LookupGrid.js";
+import { getLocalizedString } from "../i18n.js";
 
 export interface LookupComboboxBaseProps<T extends Record<string, unknown>> {
 	nullable?: boolean;

package/src/AfLookup/LookupEdit.tsx

@@ -2,7 +2,6 @@ import "./Lookup.css";
 
 import { Button, Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import type { DistributiveOmit } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
@@ -10,6 +9,7 @@ import type React from "react";
 
 import type { LookupComboboxProps } from "./LookupCombobox.js";
 import { useLookup } from "./Lookup.js";
+import { getLocalizedString } from "../i18n.js";
 
 export type AfLookupEditProps<T extends Record<string, unknown>> = DistributiveOmit<
 	LookupComboboxProps<T>,

package/src/AfLookup/LookupGrid.tsx

@@ -1,11 +1,11 @@
 import "./LookupGrid.css";
 
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import type { LookupColumn } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
 import { useEffect, useMemo } from "react";
 import { List, type RowComponentProps, useListRef } from "react-window";
+import { getLocalizedString } from "../i18n.js";
 
 const ROW_HEIGHT = 40;
 const HEADER_HEIGHT = 40;

package/src/autocomplete/Autocomplete.tsx

@@ -3,7 +3,6 @@ import "./Autocomplete.css";
 import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
 import { ChipRemovable } from "@digdir/designsystemet-react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useId, useMemo, useRef } from "react";
 
 import { AutocompleteFrame } from "./AutocompleteFrame.js";
@@ -16,6 +15,7 @@ import {
 	handleInputValueChange,
 	useControlled,
 } from "./utils.js";
+import { getLocalizedString } from "../i18n.js";
 
 export interface AutocompleteProps<
 	Option,

package/src/autocomplete/AutocompleteFrame.tsx

@@ -1,11 +1,11 @@
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import { FieldDescription, Label, Spinner, ValidationMessage } from "@digdir/designsystemet-react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import clsx from "clsx";
 import { type ReactNode, type Ref, useEffect, useRef, useState } from "react";
 
 import type { AutocompleteSize } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
 
 export interface AutocompleteFrameProps {
 	id?: string;

package/src/autocomplete/Combobox.tsx

@@ -3,7 +3,6 @@ import "./Autocomplete.css";
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import { ChipRemovable } from "@digdir/designsystemet-react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useEffect, useId, useMemo, useRef } from "react";
 
 import { AutocompleteFrame } from "./AutocompleteFrame.js";
@@ -17,6 +16,7 @@ import {
 	mapChangeReason,
 	useControlled,
 } from "./utils.js";
+import { getLocalizedString } from "../i18n.js";
 
 export interface ComboboxProps<Option, Multiple extends boolean | undefined = false> extends AutocompleteBaseProps<
 	Option,

package/src/binding/BoundNumericTextField.tsx

@@ -1,7 +1,7 @@
 import { Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
-import { getLocalizedString, localize } from "@olenbetong/appframe-core";
 import { useField } from "@olenbetong/appframe-react";
 import { useEffect, useState } from "react";
+import { getLocalizedString, localize } from "../i18n.js";
 
 /**
  * A Designsystemet `Textfield` bound to an Appframe data source field via `useField`.

package/src/binding/CancelButton.tsx

@@ -1,8 +1,8 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
 import { ArrowUndoIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useCancelButton } from "@olenbetong/appframe-react";
 import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
+import { getLocalizedString } from "../i18n.js";
 
 export const CancelButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
 	HTMLButtonElement,

package/src/binding/CancelIconButton.tsx

@@ -1,8 +1,8 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
 import { ArrowUndoIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useCancelButton } from "@olenbetong/appframe-react";
 import { forwardRef } from "react";
+import { getLocalizedString } from "../i18n.js";
 
 export const CancelIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function CancelIconButton(
 	{ onClick, children, ...props },

package/src/binding/DataEditToolbar.tsx

@@ -1,11 +1,11 @@
 import { Button, Tooltip } from "@digdir/designsystemet-react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import type { DataObject } from "@olenbetong/appframe-data";
 import { useCurrentIndex, useDataLength, useDataObject } from "@olenbetong/appframe-react";
 import { CancelIconButton } from "./CancelIconButton.js";
 import { RefreshRowIconButton } from "./RefreshRowIconButton.js";
 import { SaveIconButton } from "./SaveIconButton.js";
+import { getLocalizedString } from "../i18n.js";
 
 function IndexNavigator({ dataObject }: { dataObject: DataObject<any> }) {
 	let count = useDataLength(dataObject);

package/src/binding/DeleteButton.tsx

@@ -1,8 +1,8 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
 import { TrashIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { type DeletePrompt, useDeleteButton } from "@olenbetong/appframe-react";
 import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
+import { getLocalizedString } from "../i18n.js";
 
 export type DeleteButtonProps = ButtonProps & { index?: number; prompt?: DeletePrompt };
 

package/src/binding/DeleteIconButton.tsx

@@ -1,8 +1,8 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
 import { TrashIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { type DeletePrompt, useDeleteButton } from "@olenbetong/appframe-react";
 import { forwardRef } from "react";
+import { getLocalizedString } from "../i18n.js";
 
 export type DeleteIconButtonProps = Omit<ButtonProps, "icon"> & { index?: number; prompt?: DeletePrompt };
 

package/src/binding/RefreshButton.tsx

@@ -1,8 +1,8 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
 import { ArrowsCirclepathIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useRefreshButton } from "@olenbetong/appframe-react";
 import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
+import { getLocalizedString } from "../i18n.js";
 
 export const RefreshButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
 	HTMLButtonElement,

package/src/binding/RefreshIconButton.tsx

@@ -1,8 +1,8 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
 import { ArrowsCirclepathIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useDataObject, useLoading } from "@olenbetong/appframe-react";
 import { forwardRef } from "react";
+import { getLocalizedString } from "../i18n.js";
 
 export const RefreshIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function RefreshIconButton(
 	{ onClick, children, loading, ...props },

package/src/binding/RefreshRowIconButton.tsx

@@ -1,8 +1,8 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
 import { ArrowsCirclepathIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useRefreshRowButton } from "@olenbetong/appframe-react";
 import { forwardRef } from "react";
+import { getLocalizedString } from "../i18n.js";
 
 export type RefreshRowIconButtonProps = Omit<ButtonProps, "icon"> & { index?: number };
 

package/src/binding/SaveButton.tsx

@@ -1,8 +1,8 @@
 import { Badge, BadgePosition, Button, type ButtonProps } from "@digdir/designsystemet-react";
 import { FloppydiskIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useSaveButton } from "@olenbetong/appframe-react";
 import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
+import { getLocalizedString } from "../i18n.js";
 
 export const SaveButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
 	HTMLButtonElement,

package/src/binding/SaveIconButton.tsx

@@ -1,8 +1,8 @@
 import { Badge, BadgePosition, Button, type ButtonProps } from "@digdir/designsystemet-react";
 import { FloppydiskIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useSaveButton } from "@olenbetong/appframe-react";
 import { forwardRef } from "react";
+import { getLocalizedString } from "../i18n.js";
 
 export const SaveIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function SaveIconButton(
 	{ onClick, children, loading, ...props },

package/src/filter/ChipListInput.tsx

@@ -1,6 +1,6 @@
 import { ChipRemovable, Textfield } from "@digdir/designsystemet-react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useState } from "react";
+import { getLocalizedString } from "../i18n.js";
 
 export type ChipListInputProps = {
 	value: string[];

package/src/filter/FieldFilterPanel.tsx

@@ -9,7 +9,6 @@ import {
 	type FilterExpression,
 	type FilterOperator,
 	type FilterTree,
-	getLocalizedString,
 	getOperatorLabel,
 	getOperatorsForField,
 	normalizeOperator,
@@ -21,6 +20,7 @@ import { type ReactNode, useMemo, useState } from "react";
 import { getInListValues, setInListValues } from "./fieldFilter.js";
 import { FilterValueEditor } from "./FilterValueEditor.js";
 import { supportsDistinctValues, useDistinctValues } from "./useDistinctValues.js";
+import { getLocalizedString } from "../i18n.js";
 
 export type FieldFilterPanelProps = {
 	/** The field being filtered. Decides the operators and the value editor. */

package/src/filter/FilterBuilder.tsx

@@ -9,7 +9,6 @@ import {
 	createEmptyFilter,
 	findSavedFilter,
 	type FilterTree,
-	getLocalizedString,
 	isEmptyFilter,
 	pruneFilter,
 	type SavedFilter,
@@ -26,6 +25,7 @@ import { FilterShareDialog } from "./FilterShareDialog.js";
 import { SavedFilterTree } from "./SavedFilterTree.js";
 import type { FilterEditorSize, GetFieldOptions } from "./types.js";
 import type { FieldMetadata } from "@olenbetong/appframe-core";
+import { getLocalizedString } from "../i18n.js";
 
 export type FilterBuilderProps = {
 	/** The fields the user can filter on. Fields with `excludeFromFilter` are hidden. */

package/src/filter/FilterEditor.tsx

@@ -1,12 +1,13 @@
 import "./FilterEditor.css";
 
-import { type FilterTree, getLocalizedString, toFilterTree } from "@olenbetong/appframe-core";
+import { type FilterTree, toFilterTree } from "@olenbetong/appframe-core";
 import clsx from "clsx";
 import { useMemo, useState } from "react";
 
 import { FilterGroupEditor } from "./FilterGroupEditor.js";
 import { FilterStringField } from "./FilterStringField.js";
 import type { FilterEditorProps } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
 
 /**
  * The criteria tree of the filter builder. Groups can be nested and each group

package/src/filter/FilterGroupEditor.tsx

@@ -9,7 +9,6 @@ import {
 	type FilterNode,
 	type FilterPath,
 	type FilterTree,
-	getLocalizedString,
 	getNodeAtPath,
 	insertNodeAtPath,
 	isExpression,
@@ -22,6 +21,7 @@ import { Combobox } from "../autocomplete/index.js";
 
 import { FilterRow, getFieldLabel } from "./FilterRow.js";
 import type { FilterEditorSize, GetFieldOptions } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
 
 export type FilterGroupEditorProps = {
 	/** The whole tree. Groups edit it through their own `path`. */

package/src/filter/FilterNameDialog.tsx

@@ -1,8 +1,8 @@
 import "./FilterNameDialog.css";
 
 import { Button, Dialog, Heading, Textfield } from "@digdir/designsystemet-react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useEffect, useState } from "react";
+import { getLocalizedString } from "../i18n.js";
 
 export type FilterNameDialogProps = {
 	open: boolean;

package/src/filter/FilterRow.tsx

@@ -6,7 +6,6 @@ import {
 	type FieldMetadata,
 	type FilterExpression,
 	type FilterOperator,
-	getLocalizedString,
 	getOperatorLabel,
 	getOperatorsForField,
 	normalizeOperator,
@@ -15,6 +14,7 @@ import { Combobox } from "../autocomplete/index.js";
 
 import { FilterValueEditor } from "./FilterValueEditor.js";
 import type { FilterEditorSize, GetFieldOptions } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
 
 export function getFieldLabel(field: FieldMetadata) {
 	return field.caption || field.name;

package/src/filter/FilterShareDialog.tsx

@@ -1,11 +1,11 @@
 import { Button, Dialog, Heading, Select, Table } from "@digdir/designsystemet-react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { type FilterPermission, useDebounce, useFilterPermissions } from "@olenbetong/appframe-react";
 import { Combobox } from "../autocomplete/index.js";
 import { PersonGroupIcon, PersonIcon, TrashIcon } from "@navikt/aksel-icons";
 import { useEffect, useState } from "react";
 
 import "./FilterShareDialog.css";
+import { getLocalizedString } from "../i18n.js";
 
 type PermissionCandidate = {
 	primKey: string;

package/src/filter/FilterStringField.tsx

@@ -1,9 +1,10 @@
 import { Textfield, ValidationMessage } from "@digdir/designsystemet-react";
-import { type FilterTree, getLocalizedString, toFilterTree } from "@olenbetong/appframe-core";
+import { type FilterTree, toFilterTree } from "@olenbetong/appframe-core";
 import { useFilterConversion } from "@olenbetong/appframe-react";
 import { useEffect, useState } from "react";
 
 import type { FilterEditorSize } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
 
 export type FilterStringFieldProps = {
 	filter: FilterTree;

package/src/filter/FilterValueEditor.tsx

@@ -7,7 +7,6 @@ import {
 	type FilterOperator,
 	getDynamicValueLabel,
 	getDynamicValuesForField,
-	getLocalizedString,
 	getOperatorArity,
 	getValueType,
 	normalizeOperator,
@@ -16,6 +15,7 @@ import { Combobox } from "../autocomplete/index.js";
 
 import { ChipListInput } from "./ChipListInput.js";
 import type { FilterEditorSize, FilterValueOption } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
 
 export type FilterValueEditorProps = {
 	expression: FilterExpression;

package/src/filter/SavedFilterTree.tsx

@@ -1,10 +1,5 @@
 import { Dropdown } from "@digdir/designsystemet-react";
-import {
-	canDeleteSavedFilter,
-	canRenameSavedFilter,
-	getLocalizedString,
-	type SavedFilter,
-} from "@olenbetong/appframe-core";
+import { canDeleteSavedFilter, canRenameSavedFilter, type SavedFilter } from "@olenbetong/appframe-core";
 import {
 	ChevronDownIcon,
 	ChevronRightIcon,
@@ -20,6 +15,7 @@ import clsx from "clsx";
 import { useState } from "react";
 
 import "./SavedFilterTree.css";
+import { getLocalizedString } from "../i18n.js";
 
 /** `null` is the "new filter" node, i.e. no saved filter selected. */
 export type SavedFilterSelection = number | null;

package/src/filter/fieldFilter.ts

@@ -3,13 +3,13 @@ import {
 	type FilterExpression,
 	type FilterOperator,
 	type FilterTree,
-	getLocalizedString,
 	getOperatorArity,
 	getOperatorLabel,
 	getValueType,
 	isExpression,
 	normalizeOperator,
 } from "@olenbetong/appframe-core";
+import { getLocalizedString } from "../i18n.js";
 
 /**
  * The criteria a header filter owns for a field: the expressions directly in

package/src/grid/AfGridColumnsPanel.tsx

@@ -5,10 +5,10 @@ import {
 	gridColumnVisibilityModelSelector,
 	useGridSelector,
 } from "@mui/x-data-grid-premium";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 
 import { useState } from "react";
 import { useAfGridContext } from "./AfGridContext.js";
+import { getLocalizedString } from "../i18n.js";
 
 export type AfGridColumnsPanelProps = {
 	open: boolean;

package/src/grid/AfGridError.tsx

@@ -1,10 +1,10 @@
 import { Alert, Button } from "@digdir/designsystemet-react";
 import type { GridApi } from "@mui/x-data-grid-premium";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import type { DataObject } from "@olenbetong/appframe-data";
 import { useError } from "@olenbetong/appframe-react";
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { getLocalizedString } from "../i18n.js";
 
 type AfGridErrorProps = {
 	apiRef: React.RefObject<GridApi | null>;

package/src/grid/AfHeaderFilterCell.tsx

@@ -1,12 +1,7 @@
 import { Button, Popover } from "@digdir/designsystemet-react";
 import type { GridRenderHeaderFilterProps } from "@mui/x-data-grid-premium";
 import { FunnelFillIcon, FunnelIcon, XMarkIcon } from "@navikt/aksel-icons";
-import {
-	createExpression,
-	type FieldMetadata,
-	type FilterExpression,
-	getLocalizedString,
-} from "@olenbetong/appframe-core";
+import { createExpression, type FieldMetadata, type FilterExpression } from "@olenbetong/appframe-core";
 import type { DataObject } from "@olenbetong/appframe-data";
 import { useState } from "react";
 
@@ -16,6 +11,7 @@ import { AfHeaderFilterPanel } from "./AfHeaderFilterPanel.js";
 import { getSimpleValue, isSimpleFieldFilter, summarizeFieldFilter } from "../filter/fieldFilter.js";
 import { findFilterField } from "./useAfFilter.js";
 import type { AfGridColDef } from "./useAfColumns.js";
+import { getLocalizedString } from "../i18n.js";
 
 export type AfHeaderFilterCellProps = GridRenderHeaderFilterProps & {
 	dataObject: DataObject<any>;

package/src/grid/AfHeaderFilterPanel.tsx

@@ -4,13 +4,13 @@ import {
 	type FieldMetadata,
 	type FilterExpression,
 	type FilterTree,
-	getLocalizedString,
 	isCompleteExpression,
 } from "@olenbetong/appframe-core";
 import type { DataObject } from "@olenbetong/appframe-data";
 import { useEffect, useState } from "react";
 
 import { FieldFilterPanel } from "../filter/FieldFilterPanel.js";
+import { getLocalizedString } from "../i18n.js";
 
 export type AfHeaderFilterPanelProps = {
 	open: boolean;

package/src/grid/Toolbar.tsx

@@ -17,7 +17,6 @@ import {
 	PlusIcon,
 	TableIcon,
 } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { type DataObject, exportOptionsFromDataObject } from "@olenbetong/appframe-data";
 import { useDataObject, useLoading, usePermissions } from "@olenbetong/appframe-react";
 
@@ -25,6 +24,7 @@ import { openDataObjectReportWithProgress } from "../report-downloader/index.js"
 import { useAfGridContext } from "./AfGridContext.js";
 import { addRow } from "./editing.js";
 import type { AfGridApi } from "./useAfGridApi.js";
+import { getLocalizedString } from "../i18n.js";
 
 export function GridToolbarAddButton({ onClick }: { onClick: () => void }) {
 	return (

package/src/grid/editing.ts

@@ -1,10 +1,10 @@
 import { type GridApi, gridFocusCellSelector, gridVisibleColumnDefinitionsSelector } from "@mui/x-data-grid-premium";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { type DataObject, uid } from "@olenbetong/appframe-data";
 
 import type React from "react";
 
 import type { AfGridApi } from "./useAfGridApi.js";
+import { getLocalizedString } from "../i18n.js";
 
 /**
  * Starts a new row. With a new item row on the grid that row is focused and put

package/src/grid/filter.ts

@@ -11,7 +11,7 @@ import {
 	getGridSingleSelectOperators,
 	getGridStringOperators,
 } from "@mui/x-data-grid-premium";
-import { getLocalizedString } from "@olenbetong/appframe-core";
+import { getLocalizedString } from "../i18n.js";
 
 const stringOperators = getGridStringOperators();
 const numericOperators = getGridNumericOperators();

package/src/grid/index.tsx

@@ -11,7 +11,6 @@ import {
 	type GridFilterModel,
 	useGridApiRef,
 } from "@mui/x-data-grid-premium";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { type DataObject, uid } from "@olenbetong/appframe-data";
 import { DataObjectProvider, useLoading } from "@olenbetong/appframe-react";
 
@@ -60,6 +59,7 @@ import { useAfRowEditModel } from "./useAfRowEditModel.js";
 import { useAfRowGrouping } from "./useAfRowGrouping.js";
 import { useAfServerAggregation } from "./useAfServerAggregation.js";
 import { useAfSortModel } from "./useAfSortModel.js";
+import { getLocalizedString } from "../i18n.js";
 
 export * from "./formatters.js";
 export * as MuiDataGrid from "@mui/x-data-grid-premium";

package/src/grid/localization.ts

@@ -1,5 +1,5 @@
 import type { GridLocaleText } from "@mui/x-data-grid-premium";
-import { getLocalizedString, localize } from "@olenbetong/appframe-core";
+import { getLocalizedString, localize } from "../i18n.js";
 
 export type AfGridLocaleTextExt = GridLocaleText & {
 	filterOperatorNotContains: string;

package/src/grid/useAfColumns.tsx

@@ -19,7 +19,6 @@ import {
 	useGridSelector,
 } from "@mui/x-data-grid-premium";
 import { FloppydiskIcon, PencilIcon, TrashIcon, XMarkIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { type DataObject, uid } from "@olenbetong/appframe-data";
 import { usePermissions } from "@olenbetong/appframe-react";
 
@@ -30,6 +29,7 @@ import { deleteRow } from "./editing.js";
 import { operators } from "./filter.js";
 import { dateTimeValueFormatter, dateValueFormatter } from "./formatters.js";
 import { isNewItemRow } from "./useAfNewItemRow.js";
+import { getLocalizedString } from "../i18n.js";
 
 /** `auto-generated-group-footer-`, without spelling it out: every group's total row shares it. */
 const AGGREGATION_FOOTER_ID_PREFIX = String(getAggregationFooterRowIdFromGroupId(""));

package/src/grid/useAfNewItemRow.ts

@@ -8,7 +8,6 @@ import {
 	gridFocusCellSelector,
 	gridVisibleColumnDefinitionsSelector,
 } from "@mui/x-data-grid-premium";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import { type DataObject, uid } from "@olenbetong/appframe-data";
 import { setDataObjectField, usePermissions } from "@olenbetong/appframe-react";
 
@@ -16,6 +15,7 @@ import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { AfGridApi } from "./useAfGridApi.js";
+import { getLocalizedString } from "../i18n.js";
 
 /**
  * Row id of the new item row. It never collides with a data row, whose id is

package/src/i18n.ts

@@ -0,0 +1,13 @@
+/*
+ * The package's strings live in their own globalization project, `appframe-ds`, so one
+ * translation covers every app and the package can word a term its own way. The templates
+ * render the dictionary as af.i18n["appframe-ds"]; on a page that does not (a legacy
+ * template) the localizer falls back to the article's strings, exactly as before. See
+ * `createLocalizer` in @olenbetong/appframe-core.
+ */
+
+import { createLocalizer } from "@olenbetong/appframe-core";
+
+export const PROJECT = "appframe-ds";
+
+export const { getLocalizedString, localize } = createLocalizer(PROJECT);

package/src/layout/AppMenu.tsx

@@ -1,9 +1,8 @@
 import "./AppMenu.css";
 
-import { getLocalizedString } from "@olenbetong/appframe-core";
-
 import clsx from "clsx";
 import type React from "react";
+import { getLocalizedString } from "../i18n.js";
 
 type MenuHeaderProps = {
 	children?: React.ReactNode[] | React.ReactNode;

package/src/layout/ErrorBoundary.tsx

@@ -1,6 +1,5 @@
 import "./ErrorBoundary.css";
 
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import type { DataObject } from "@olenbetong/appframe-data";
 import { useError } from "@olenbetong/appframe-react";
 
@@ -8,6 +7,7 @@ import { Component, useEffect } from "react";
 import { useAsyncError, useRouteError } from "react-router";
 
 import { PageContainer } from "./PageContainer.js";
+import { getLocalizedString } from "../i18n.js";
 
 function parseError(error: unknown) {
 	let message = "Unspecified error";

package/src/mdi/Mdi.test.tsx

@@ -9,6 +9,10 @@ import type { MdiApi, MdiDocumentProps, MdiDocumentTypes, MdiLayoutSpec } from "
 
 vi.mock("@olenbetong/appframe-core", () => ({
 	getLocalizedString: (value: string) => value,
+	createLocalizer: () => ({
+		getLocalizedString: (value: string) => value,
+		localize: (parts: TemplateStringsArray) => parts.join(""),
+	}),
 }));
 
 function Note({ params }: MdiDocumentProps<{ label: string }>) {

package/src/mdi/MdiConfirmCloseDialog.tsx

@@ -1,7 +1,7 @@
 import { Button, Dialog, Heading, Paragraph } from "@digdir/designsystemet-react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 
 import type { MdiConfirmCloseResult, MdiDocumentInfo } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
 
 export type MdiConfirmCloseDialogProps = {
 	/** The document being closed, or `null` when the dialog is closed */

package/src/mdi/MdiPanel.tsx

@@ -1,11 +1,11 @@
 import { Button } from "@digdir/designsystemet-react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import type { IDockviewPanelProps } from "dockview-react";
 import { useSyncExternalStore } from "react";
 import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 
 import { useMdiController } from "./MdiContext.js";
 import { MdiDocumentIdContext } from "./MdiDocumentContext.js";
+import { getLocalizedString } from "../i18n.js";
 
 function MdiErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
 	let message = error instanceof Error ? error.message : String(error);

package/src/mdi/MdiRestore.test.tsx

@@ -9,6 +9,10 @@ import type { MdiDocumentProps, MdiDocumentTypes, MdiLayout, MdiLayoutSpec } fro
 
 vi.mock("@olenbetong/appframe-core", () => ({
 	getLocalizedString: (value: string) => value,
+	createLocalizer: () => ({
+		getLocalizedString: (value: string) => value,
+		localize: (parts: TemplateStringsArray) => parts.join(""),
+	}),
 }));
 
 function Doc({ id }: MdiDocumentProps) {

package/src/page/PageHeader.tsx

@@ -1,13 +1,12 @@
 import "./PageHeader.css";
 
-import { getLocalizedString } from "@olenbetong/appframe-core";
-
 import clsx from "clsx";
 import type React from "react";
 
 import { type AppMenuProps } from "../layout/AppMenu.js";
 import { AppMenuDrawer, useAppMenuDrawer } from "../layout/AppMenuDrawer.js";
 import { PageBlock, type PageBlockWidth } from "./PageBlock.js";
+import { getLocalizedString } from "../i18n.js";
 
 export type PageHeaderVariant = "appbar" | "plain";
 

package/src/report-downloader/components/StatusItem.tsx

@@ -1,8 +1,9 @@
 import { Button, Paragraph, Spinner } from "@digdir/designsystemet-react";
 import { CheckmarkCircleFillIcon, ExclamationmarkTriangleFillIcon, XMarkOctagonFillIcon } from "@navikt/aksel-icons";
-import { type DownloadItem, getLocalizedString } from "@olenbetong/appframe-core";
+import { type DownloadItem } from "@olenbetong/appframe-core";
 
 import clsx from "clsx";
+import { getLocalizedString } from "../../i18n.js";
 
 const statuses: Record<string, { icon: React.ReactNode; text: string }> = {
 	cancelled: {

package/src/sortable/SortableItemList.tsx

@@ -2,7 +2,6 @@ import "./SortableItemList.css";
 
 import { Button, Dropdown } from "@digdir/designsystemet-react";
 import { DragVerticalIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 import clsx from "clsx";
 import type React from "react";
 import { createContext, useContext, useId, useRef } from "react";
@@ -13,6 +12,7 @@ import { DropIndicator } from "./DropIndicator.js";
 import type { SortableRecord } from "./types.js";
 import { type SortableItemState, useSortableItem } from "./useSortableItem.js";
 import { type SortableList, type SortableListOptions, useSortableList } from "./useSortableList.js";
+import { getLocalizedString } from "../i18n.js";
 
 export interface SortableItemContextValue<T extends SortableRecord = SortableRecord> {
 	record: T;