@widgetic/design-system 0.5.14 → 0.5.16

package/dist/components/ui/range-calendar/range-calendar-prev-button.svelte.d.ts

@@ -1,5 +1,12 @@
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-export type RangeCalendarPrevButtonProps = RangeCalendarPrimitive.PrevButtonProps;
-declare const RangeCalendarPrevButton: import("svelte").Component<RangeCalendarPrimitive.PrevButtonProps, {}, "ref">;
+export type RangeCalendarPrevButtonProps = RangeCalendarPrimitive.PrevButtonProps & {
+    /**
+     * The name a screen reader gives the button, in the page's language. The library names the button "Previous" and
+     * keeps that name whatever props it is given, so this one is put on the button after the library's own. English
+     * ("Previous") when it is not given.
+     */
+    label?: string;
+};
+declare const RangeCalendarPrevButton: import("svelte").Component<RangeCalendarPrevButtonProps, {}, "ref">;
 type RangeCalendarPrevButton = ReturnType<typeof RangeCalendarPrevButton>;
 export default RangeCalendarPrevButton;

package/dist/components/ui/range-calendar/range-calendar.svelte

@@ -1,11 +1,17 @@
 <script lang="ts" module>
 	import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	export type RangeCalendarProps = WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps>;
+	export type RangeCalendarProps = WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> & {
+		/** The name a screen reader gives the button to the previous month, in the page's language. English when not given. */
+		previousLabel?: string;
+		/** The name a screen reader gives the button to the next month, in the page's language. English when not given. */
+		nextLabel?: string;
+	};
 </script>
 
 <script lang="ts">
 		import * as RangeCalendar from "./index.js";
 	import { cn } from "../../../utils.js";
+	import { describeCalendarWeekdayHeading } from "../../../i18n/localeDate.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,6 +19,9 @@
 		placeholder = $bindable(),
 		weekdayFormat = "short",
 		class: className,
+		previousLabel,
+		nextLabel,
+		locale: calendarLocale = 'en',
 		...restProps
 	}: RangeCalendarProps = $props();
 </script>
@@ -22,23 +31,26 @@
 	bind:value
 	bind:placeholder
 	{weekdayFormat}
+	locale={calendarLocale}
 	class={cn("p-3", className)}
 	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
 		<RangeCalendar.Header>
-			<RangeCalendar.PrevButton />
+			<RangeCalendar.PrevButton label={previousLabel} />
 			<RangeCalendar.Heading />
-			<RangeCalendar.NextButton />
+			<RangeCalendar.NextButton label={nextLabel} />
 		</RangeCalendar.Header>
 		<RangeCalendar.Months>
 			{#each months as month}
 				<RangeCalendar.Grid>
 					<RangeCalendar.GridHead>
 						<RangeCalendar.GridRow class="flex">
-							{#each weekdays as weekday}
-								<RangeCalendar.HeadCell>
-									{weekday.slice(0, 2)}
+							{#each weekdays as weekday, weekdayIndex}
+								{@const weekdayHeading = describeCalendarWeekdayHeading(String(calendarLocale), weekdayIndex)}
+								<!-- A one-letter name (a language written right to left) carries the whole name for a screen reader. -->
+								<RangeCalendar.HeadCell aria-label={weekdayHeading.fullName}>
+									{weekdayHeading.label || weekday}
 								</RangeCalendar.HeadCell>
 							{/each}
 						</RangeCalendar.GridRow>

package/dist/components/ui/range-calendar/range-calendar.svelte.d.ts

@@ -1,6 +1,11 @@
 import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-export type RangeCalendarProps = WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps>;
+export type RangeCalendarProps = WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> & {
+    /** The name a screen reader gives the button to the previous month, in the page's language. English when not given. */
+    previousLabel?: string;
+    /** The name a screen reader gives the button to the next month, in the page's language. English when not given. */
+    nextLabel?: string;
+};
 import * as RangeCalendar from "./index.js";
-declare const RangeCalendar: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.RootProps, "child">, "children">, {}, "placeholder" | "ref" | "value">;
+declare const RangeCalendar: import("svelte").Component<RangeCalendarProps, {}, "placeholder" | "ref" | "value">;
 type RangeCalendar = ReturnType<typeof RangeCalendar>;
 export default RangeCalendar;

package/dist/components/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -20,7 +20,7 @@
 	{orientation}
 	class={cn(
 		"flex touch-none select-none transition-colors",
-		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+		orientation === "vertical" && "h-full w-2.5 border-s border-s-transparent p-px",
 		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
 		className
 	)}

package/dist/components/ui/scroll-area/scroll-area.svelte

@@ -2,6 +2,11 @@
 	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
 	import { Scrollbar } from "./index.js";
 	import { cn } from "../../../utils.js";
+	import { useTextDirection } from "../../textDirection.js";
+
+	// The library writes dir="ltr" on its own element unless it is told the direction, and that turns everything
+	// inside the scroll area left to right even on a right to left screen.
+	const textDirection = useTextDirection();
 
 	let {
 		ref = $bindable(null),
@@ -18,7 +23,7 @@
 	} = $props();
 </script>
 
-<ScrollAreaPrimitive.Root bind:ref {...restProps} class={cn("relative overflow-hidden", className)}>
+<ScrollAreaPrimitive.Root bind:ref dir={$textDirection} {...restProps} class={cn("relative overflow-hidden", className)}>
 	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
 		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>

package/dist/components/ui/select/select-content.svelte

@@ -3,6 +3,11 @@
 	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
 	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
 	import { cn } from "../../../utils.js";
+	import { useTextDirection } from "../../textDirection.js";
+
+	// The library writes dir="ltr" on the floating element unless it is told the direction: left to right text and
+	// alignment inside a menu of a right to left screen.
+	const textDirection = useTextDirection();
 
 	let {
 		ref = $bindable(null),
@@ -20,6 +25,7 @@
 	<SelectPrimitive.Content
 		bind:ref
 		{sideOffset}
+		dir={$textDirection}
 		class={cn(
 			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 			className

package/dist/components/ui/select/select-group-heading.svelte

@@ -15,6 +15,6 @@
 
 <SelectPrimitive.GroupHeading
 	bind:ref
-	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	class={cn("py-1.5 ps-8 pe-2 text-sm font-semibold", className)}
 	{...restProps}
 />

package/dist/components/ui/select/select-item.svelte

@@ -21,13 +21,13 @@
 	bind:ref
 	{value}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ selected, highlighted })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="absolute start-2 flex size-3.5 items-center justify-center">
 			{#if selected}
 				<Check class="size-4" />
 			{/if}

package/dist/components/ui/slider/slider.svelte

@@ -5,6 +5,11 @@
 
 <script lang="ts">
 		import { cn } from "../../../utils.js";
+	import { useTextDirection } from "../../textDirection.js";
+
+	// The slider of the library is left to right unless it is told: on a right to left screen the smallest value is at the
+	// right end, like the rest of the screen, and the arrow keys follow.
+	const textDirection = useTextDirection();
 
 	let {
 		ref = $bindable(null),
@@ -22,6 +27,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	bind:value={value as never}
 	bind:ref
 	class={cn("relative flex w-full touch-none select-none items-center", className)}
+	dir={$textDirection}
 	{...restProps}
 >
 	{#snippet children({ thumbs })}

package/dist/components/ui/switch/switch.svelte

@@ -25,7 +25,7 @@
 >
 	<SwitchPrimitive.Thumb
 		class={cn(
-			"bg-background pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+			"bg-background pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:-translate-x-5"
 		)}
 	/>
 </SwitchPrimitive.Root>

package/dist/components/ui/table/table-cell.svelte

@@ -18,7 +18,7 @@
 
 <td
 	bind:this={ref}
-	class={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+	class={cn("p-4 align-middle [&:has([role=checkbox])]:pe-0", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/table/table-head.svelte

@@ -19,7 +19,7 @@
 <th
 	bind:this={ref}
 	class={cn(
-		"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+		"text-muted-foreground h-12 px-4 text-start align-middle font-medium [&:has([role=checkbox])]:pe-0",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/tooltip/tooltip-content.svelte

@@ -5,6 +5,11 @@
 
 <script lang="ts">
 	import { cn } from "../../../utils.js";
+	import { useTextDirection } from "../../textDirection.js";
+
+	// The library writes dir="ltr" on the floating element unless it is told the direction: left to right text and
+	// alignment inside a menu of a right to left screen.
+	const textDirection = useTextDirection();
 
 	let {
 		ref = $bindable(null),
@@ -17,6 +22,7 @@
 <TooltipPrimitive.Content
 	bind:ref
 	{sideOffset}
+	dir={$textDirection}
 	class={cn(
 		"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
 		className

package/dist/i18n/audit/catalogUsage.d.ts

@@ -0,0 +1,36 @@
+import { type MessageProblem } from '../translator.ts';
+import { type MessageCall, type MessageCallOptions } from './messageCalls.ts';
+/**
+ * The catalog and the code have to agree: every message the code asks for exists, is given the values it asks for, and
+ * every message of the catalog is asked for somewhere (so nobody translates a sentence that never appears).
+ */
+/** Lower-case dotted names, each with a word after the dot: `upload.cancel`, `toast.renameFailed`. */
+export declare const DEFAULT_KEY_SHAPE: RegExp;
+export interface CatalogUsageOptions extends MessageCallOptions {
+    /** The folder of the package's source. */
+    folder: string;
+    /** The English messages of the package. */
+    catalog: Readonly<Record<string, string>>;
+    /** Files to leave out (full paths): the catalog's own file holds every key as text. */
+    exclude?: readonly string[];
+    /** The shape every key has. */
+    keyShape?: RegExp;
+}
+export interface CatalogUsageReport {
+    /** The files that were read. */
+    fileCount: number;
+    /** Every place that asks for a message. */
+    calls: MessageCall[];
+    /** One line for each call that asks for a message the catalog does not have. */
+    unknownKeys: string[];
+    /** One line for each call that gives a message the wrong values (a missing one, or one it does not ask for). */
+    wrongValues: string[];
+    /** Messages of the catalog that nothing asks for. */
+    unusedKeys: string[];
+    /** Problems in the English messages themselves: a message that does not parse, or asks for a value it was not given. */
+    messageProblems: MessageProblem[];
+    /** Keys that do not have the shape. */
+    oddKeys: string[];
+}
+/** Reads the package and compares the messages the code asks for with the catalog. */
+export declare function auditCatalogUsage(options: CatalogUsageOptions): CatalogUsageReport;

package/dist/i18n/audit/catalogUsage.js

@@ -0,0 +1,58 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { findMessageProblems, valueNamesOfTemplate } from "../translator.js";
+import { findMessageCalls } from "./messageCalls.js";
+import { listSourceFiles } from "./syntaxTree.js";
+/**
+ * The catalog and the code have to agree: every message the code asks for exists, is given the values it asks for, and
+ * every message of the catalog is asked for somewhere (so nobody translates a sentence that never appears).
+ */
+/** Lower-case dotted names, each with a word after the dot: `upload.cancel`, `toast.renameFailed`. */
+export const DEFAULT_KEY_SHAPE = /^[a-z][A-Za-z0-9]*(\.[A-Za-z][A-Za-z0-9]*)+$/;
+function describeCall(folder, call) {
+    return `${path.relative(folder, call.file).split(path.sep).join('/')}:${call.line} ${call.via} '${call.key}${call.keyIsPrefix ? '${…}' : ''}'`;
+}
+/** Reads the package and compares the messages the code asks for with the catalog. */
+export function auditCatalogUsage(options) {
+    const { folder, catalog } = options;
+    const excluded = new Set(options.exclude ?? []);
+    const catalogKeys = Object.keys(catalog);
+    const sourceFiles = listSourceFiles(folder).filter((file) => !excluded.has(file));
+    const sources = new Map(sourceFiles.map((file) => [file, fs.readFileSync(file, 'utf8')]));
+    const calls = sourceFiles.flatMap((file) => findMessageCalls(file, sources.get(file), options));
+    const has = (key) => Object.prototype.hasOwnProperty.call(catalog, key);
+    const unknownKeys = calls
+        .filter((call) => (call.keyIsPrefix ? !catalogKeys.some((key) => key.startsWith(call.key)) : !has(call.key)))
+        .map((call) => describeCall(folder, call));
+    const wrongValues = [];
+    for (const call of calls) {
+        if (call.keyIsPrefix || call.valueNames === null || !has(call.key))
+            continue;
+        const asked = valueNamesOfTemplate(catalog[call.key]);
+        const missing = asked.filter((name) => !call.valueNames?.includes(name));
+        const extra = call.valueNames.filter((name) => !asked.includes(name));
+        if (missing.length > 0 || extra.length > 0) {
+            wrongValues.push(`${describeCall(folder, call)}: ${missing.length > 0 ? `missing ${missing.join(', ')}` : ''}${missing.length > 0 && extra.length > 0 ? '; ' : ''}${extra.length > 0 ? `not asked for ${extra.join(', ')}` : ''}`);
+        }
+    }
+    const allSource = [...sources.values()].join('\n');
+    const prefixes = calls.filter((call) => call.keyIsPrefix).map((call) => call.key);
+    const unusedKeys = catalogKeys.filter((key) => {
+        if (prefixes.some((prefix) => key.startsWith(prefix)))
+            return false;
+        if (calls.some((call) => !call.keyIsPrefix && call.key === key))
+            return false;
+        // A key kept in a list of keys is used where the list is read.
+        return !(allSource.includes(`'${key}'`) || allSource.includes(`"${key}"`));
+    });
+    const keyShape = options.keyShape ?? DEFAULT_KEY_SHAPE;
+    return {
+        fileCount: sourceFiles.length,
+        calls,
+        unknownKeys,
+        wrongValues,
+        unusedKeys,
+        messageProblems: findMessageProblems(catalog, catalog),
+        oddKeys: catalogKeys.filter((key) => !keyShape.test(key))
+    };
+}

package/dist/i18n/audit/designSystemWords.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Some components of the design system carry English of their own (the close button of a window, "Back" in the path above
+ * the files, "Loading PDF..."). The design system lets a page replace each of those words with a prop, but a component that
+ * is used without the prop quietly shows English. This reads the syntax tree of each file of a package and reports a
+ * component that shows words and is used without all of them.
+ */
+/** Where the design system's components come from, unless a package says otherwise. Its icons, stores and the like show no words. */
+export declare const DEFAULT_COMPONENTS_MODULES: readonly string[];
+export interface DesignSystemWordsOptions {
+    /** The folder of the package's source. */
+    folder: string;
+    /**
+     * The props that carry the words of each component of the design system the package uses, as the design system
+     * documents them. A component is listed with every prop that holds a word a visitor can see or hear.
+     */
+    componentsWithWords: Readonly<Record<string, readonly string[]>>;
+    /** The components and functions the package uses that show no words of their own: the words come in as content. */
+    withoutWords: readonly string[];
+    /** The module names the design system's components are imported from. */
+    componentsModules?: readonly string[];
+    /** Files to leave out (paths, as `folder` joined with the name). */
+    exclude?: readonly string[];
+}
+export interface DesignSystemUse {
+    file: string;
+    line: number;
+    /** The name the design system exports. */
+    component: string;
+    /** The names of the attributes written on it; `null` when a spread (`{...props}`) hides them. */
+    attributes: string[] | null;
+}
+export interface DesignSystemWordsReport {
+    /** Every use of a design-system component in a Svelte template. */
+    uses: DesignSystemUse[];
+    /** The design-system components that a `.ts` file of the package passes on: the name the file exports → the name in the design system. */
+    passedOn: Map<string, string>;
+    /** Everything the package imports from the design system's components module. */
+    importedNames: Set<string>;
+    /** One line for each use of a component that shows words, without all of its words. */
+    missing: string[];
+    /** Names the package imports that are in neither list: a new component has to be put in one of them. */
+    unknown: string[];
+    /** Names in a list that the package no longer imports. */
+    stale: string[];
+}
+/** Reads every file of a package and compares what it uses of the design system with what each component says it shows. */
+export declare function auditDesignSystemWords(options: DesignSystemWordsOptions): DesignSystemWordsReport;

package/dist/i18n/audit/designSystemWords.js

@@ -0,0 +1,137 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { lineOf, listSourceFiles, parseFile, walkTree } from "./syntaxTree.js";
+/**
+ * Some components of the design system carry English of their own (the close button of a window, "Back" in the path above
+ * the files, "Loading PDF..."). The design system lets a page replace each of those words with a prop, but a component that
+ * is used without the prop quietly shows English. This reads the syntax tree of each file of a package and reports a
+ * component that shows words and is used without all of them.
+ */
+/** Where the design system's components come from, unless a package says otherwise. Its icons, stores and the like show no words. */
+export const DEFAULT_COMPONENTS_MODULES = ['@widgetic/design-system/components'];
+/** The name a side of an export specifier gives: an identifier's `name`, or the text of `export { x as 'a b' }`. */
+function nameOfSpecifier(node) {
+    if (!node)
+        return undefined;
+    if (node.type === 'Identifier')
+        return node.name;
+    return typeof node.value === 'string' ? node.value : undefined;
+}
+/**
+ * Local name → exported name, for what a file imports from the design system's components (types are left out). Also what
+ * it imports from a file of the package itself that passes a component of the design system on (see
+ * {@link namesPassedOnFromTheDesignSystem}): a barrel like `components/modals/index.ts`, which would otherwise hide the
+ * component from the audit.
+ */
+function importsOf(program, modules, passedOn) {
+    const imports = new Map();
+    for (const statement of program?.body ?? []) {
+        if (statement.type !== 'ImportDeclaration' || statement.importKind === 'type')
+            continue;
+        const source = String(statement.source?.value);
+        const fromDesignSystem = modules.has(source);
+        const fromThePackage = source.startsWith('$lib') || source.startsWith('.');
+        if (!fromDesignSystem && !fromThePackage)
+            continue;
+        for (const specifier of statement.specifiers) {
+            if (specifier.importKind === 'type')
+                continue;
+            if (specifier.type === 'ImportSpecifier') {
+                const exported = specifier.imported.name ?? specifier.imported.value;
+                if (fromDesignSystem)
+                    imports.set(specifier.local.name, exported);
+                else if (passedOn.has(exported))
+                    imports.set(specifier.local.name, passedOn.get(exported));
+            }
+            else if (fromDesignSystem) {
+                // `import * as X` and `import X`: the audit cannot tell which component `<X.Y>` is, so it says so
+                imports.set(specifier.local.name, `${specifier.local.name}.*`);
+            }
+        }
+    }
+    return imports;
+}
+/**
+ * The design system's components that a `.ts` file of the package passes on (`import { RenameDialog } from
+ * '@widgetic/design-system/components'; export { RenameDialog };`, or `export { RenameDialog } from '...'`), as the name the
+ * file exports → the name the design system gives it. A file that then imports the name from that file is using the
+ * design system's component all the same.
+ */
+function namesPassedOnFromTheDesignSystem(files, modules) {
+    const passedOn = new Map();
+    for (const { file, source } of files) {
+        if (!file.endsWith('.ts'))
+            continue;
+        const program = parseFile(file, source).tree.module?.content;
+        const imports = importsOf(program, modules, new Map());
+        for (const statement of program?.body ?? []) {
+            if (statement.type !== 'ExportNamedDeclaration')
+                continue;
+            // `exportKind` is the TypeScript parser's addition to the tree; the types of the tree do not know it.
+            if (statement.exportKind === 'type')
+                continue;
+            for (const specifier of statement.specifiers ?? []) {
+                const local = nameOfSpecifier(specifier.local);
+                const exported = nameOfSpecifier(specifier.exported);
+                if (local === undefined || exported === undefined)
+                    continue;
+                if (modules.has(String(statement.source?.value)))
+                    passedOn.set(exported, local);
+                else if (statement.source === null && imports.has(local))
+                    passedOn.set(exported, imports.get(local));
+            }
+        }
+    }
+    return passedOn;
+}
+function readFile(file, source, modules, passedOn) {
+    const { tree, text } = parseFile(file, source);
+    const imports = new Map([...importsOf(tree.instance?.content, modules, passedOn), ...importsOf(tree.module?.content, modules, passedOn)]);
+    const uses = [];
+    for (const { node } of walkTree(tree.fragment)) {
+        if (node.type !== 'Component')
+            continue;
+        const exported = imports.get(String(node.name).split('.')[0]);
+        if (exported === undefined)
+            continue;
+        const attributes = node.attributes ?? [];
+        const hasSpread = attributes.some((attribute) => attribute.type === 'SpreadAttribute');
+        uses.push({
+            file,
+            line: lineOf(text, node.start),
+            component: exported,
+            attributes: hasSpread ? null : attributes.filter((attribute) => typeof attribute.name === 'string').map((attribute) => attribute.name)
+        });
+    }
+    return { uses, imported: [...imports.values()] };
+}
+/** Reads every file of a package and compares what it uses of the design system with what each component says it shows. */
+export function auditDesignSystemWords(options) {
+    const modules = new Set(options.componentsModules ?? DEFAULT_COMPONENTS_MODULES);
+    const excluded = new Set(options.exclude ?? []);
+    const sourceFiles = listSourceFiles(options.folder)
+        .filter((file) => !excluded.has(file))
+        .map((file) => ({ file, source: fs.readFileSync(file, 'utf8') }));
+    const passedOn = namesPassedOnFromTheDesignSystem(sourceFiles, modules);
+    const found = sourceFiles.map(({ file, source }) => readFile(file, source, modules, passedOn));
+    const uses = found.flatMap((entry) => entry.uses);
+    const importedNames = new Set(found.flatMap((entry) => entry.imported));
+    const missing = [];
+    for (const use of uses) {
+        const words = Object.prototype.hasOwnProperty.call(options.componentsWithWords, use.component) ? options.componentsWithWords[use.component] : undefined;
+        if (!words)
+            continue;
+        const place = `${path.relative(options.folder, use.file).split(path.sep).join('/')}:${use.line} <${use.component}>`;
+        if (use.attributes === null) {
+            missing.push(`${place}: has a {...spread}; write the props out so the audit can see them`);
+            continue;
+        }
+        const absent = words.filter((word) => !use.attributes?.includes(word));
+        if (absent.length > 0)
+            missing.push(`${place}: no ${absent.join(', ')}`);
+    }
+    const listed = new Set([...Object.keys(options.componentsWithWords), ...options.withoutWords]);
+    const unknown = [...importedNames].filter((name) => !listed.has(name));
+    const stale = [...listed].filter((name) => !importedNames.has(name));
+    return { uses, passedOn, importedNames, missing, unknown, stale };
+}

package/dist/i18n/audit/hardCodedText.d.ts

@@ -0,0 +1,40 @@
+import { type VisibleText, type VisibleTextOptions } from './visibleText.ts';
+/**
+ * Every word a visitor can read must come from the message catalog, or a page cannot translate it. This reads the syntax
+ * tree of each file of a package and reports the English that is written into a file, except for the texts the package
+ * allows (with the reason for each).
+ */
+/** A text that is allowed to be written into a file. Keep the list short: a word here is a word no page can translate. */
+export interface AllowedText {
+    /** The path of the file inside the package's source folder, with `/` between the parts. */
+    file: string;
+    /** The text as the scan reads it (spaces folded, `{}` where a value goes). */
+    text: string;
+    /** Why no page needs to translate it: a type specimen, a CSS unit, English for the host page's code. */
+    reason: string;
+}
+export interface HardCodedTextOptions extends VisibleTextOptions {
+    /** The folder of the package's source. */
+    folder: string;
+    /** `svelte` (the default) reads the components; `source` reads the TypeScript files too, for a package that keeps sentences there. */
+    files?: 'svelte' | 'source';
+    /** Files to leave out (full paths): the catalog's own file holds every sentence by design. */
+    exclude?: readonly string[];
+    allowed?: readonly AllowedText[];
+}
+export interface HardCodedTextReport {
+    /** Every file that was read, as a path relative to the folder with `/` between the parts. */
+    files: string[];
+    /** Everything a visitor can read in those files. */
+    found: VisibleText[];
+    /** One line for each text that is written into a file and is not allowed. */
+    loose: string[];
+    /** Allowed texts that are gone from their file (take them off the list). */
+    unusedAllowances: AllowedText[];
+    /** Allowed texts that give no reason. */
+    allowancesWithoutReason: AllowedText[];
+}
+/** One line that says where a text is and what it says. */
+export declare function describeVisibleText(folder: string, found: VisibleText): string;
+/** Reads the package and reports the English that is written into its files. */
+export declare function auditHardCodedText(options: HardCodedTextOptions): HardCodedTextReport;

package/dist/i18n/audit/hardCodedText.js

@@ -0,0 +1,27 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { listSourceFiles, listSvelteFiles } from "./syntaxTree.js";
+import { findVisibleText } from "./visibleText.js";
+function relativePath(folder, file) {
+    return path.relative(folder, file).split(path.sep).join('/');
+}
+/** One line that says where a text is and what it says. */
+export function describeVisibleText(folder, found) {
+    const place = found.where ? ` ${found.where}` : '';
+    return `${relativePath(folder, found.file)}:${found.line} [${found.kind}${place}] "${found.text.length > 90 ? `${found.text.slice(0, 90)}…` : found.text}"`;
+}
+/** Reads the package and reports the English that is written into its files. */
+export function auditHardCodedText(options) {
+    const excluded = new Set(options.exclude ?? []);
+    const allowed = options.allowed ?? [];
+    const listed = options.files === 'source' ? listSourceFiles(options.folder) : listSvelteFiles(options.folder);
+    const files = listed.filter((file) => !excluded.has(file));
+    const found = [];
+    for (const file of files)
+        found.push(...findVisibleText(file, fs.readFileSync(file, 'utf8'), options));
+    const isAllowed = (entry) => allowed.some((candidate) => candidate.file === relativePath(options.folder, entry.file) && candidate.text === entry.text);
+    const loose = found.filter((entry) => !isAllowed(entry)).map((entry) => describeVisibleText(options.folder, entry));
+    const unusedAllowances = allowed.filter((candidate) => !found.some((entry) => relativePath(options.folder, entry.file) === candidate.file && entry.text === candidate.text));
+    const allowancesWithoutReason = allowed.filter((candidate) => candidate.reason.trim().length < 12);
+    return { files: files.map((file) => relativePath(options.folder, file)), found, loose, unusedAllowances, allowancesWithoutReason };
+}

package/dist/i18n/audit/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Test tooling for the words of a Widgetic package: three audits a package runs in its own tests, so that no English is
+ * written into a screen, every message the code asks for is in the catalog, and every design-system component that shows
+ * words is given them.
+ *
+ *   import { auditHardCodedText, auditCatalogUsage, auditDesignSystemWords } from '@widgetic/design-system/i18n/audit';
+ *
+ *   const report = auditHardCodedText({ folder: SOURCE_FOLDER, allowed: ALLOWED });
+ *   expect(report.loose).toEqual([]);
+ *
+ * It reads the source of a package with Svelte's own parser, so it runs in Node (a test, a build step) and a page never
+ * loads it. Nothing here changes what a visitor sees.
+ */
+export { auditCatalogUsage, DEFAULT_KEY_SHAPE, type CatalogUsageOptions, type CatalogUsageReport } from './catalogUsage.ts';
+export { auditDesignSystemWords, DEFAULT_COMPONENTS_MODULES, type DesignSystemUse, type DesignSystemWordsOptions, type DesignSystemWordsReport } from './designSystemWords.ts';
+export { auditHardCodedText, describeVisibleText, type AllowedText, type HardCodedTextOptions, type HardCodedTextReport } from './hardCodedText.ts';
+export { DEFAULT_LOOKUPS, findMessageCalls, type MessageCall, type MessageCallOptions, type MessageLookup } from './messageCalls.ts';
+export { listSourceFiles, listSvelteFiles } from './syntaxTree.ts';
+export { DEFAULT_MESSAGE_LOOKUPS, DEFAULT_TEXT_ATTRIBUTES, DEFAULT_TEXT_PROPERTIES, DEFAULT_TEXT_VARIABLE_PATTERN, findVisibleText, type VisibleText, type VisibleTextOptions } from './visibleText.ts';

package/dist/i18n/audit/index.js

@@ -0,0 +1,19 @@
+/**
+ * Test tooling for the words of a Widgetic package: three audits a package runs in its own tests, so that no English is
+ * written into a screen, every message the code asks for is in the catalog, and every design-system component that shows
+ * words is given them.
+ *
+ *   import { auditHardCodedText, auditCatalogUsage, auditDesignSystemWords } from '@widgetic/design-system/i18n/audit';
+ *
+ *   const report = auditHardCodedText({ folder: SOURCE_FOLDER, allowed: ALLOWED });
+ *   expect(report.loose).toEqual([]);
+ *
+ * It reads the source of a package with Svelte's own parser, so it runs in Node (a test, a build step) and a page never
+ * loads it. Nothing here changes what a visitor sees.
+ */
+export { auditCatalogUsage, DEFAULT_KEY_SHAPE } from "./catalogUsage.js";
+export { auditDesignSystemWords, DEFAULT_COMPONENTS_MODULES } from "./designSystemWords.js";
+export { auditHardCodedText, describeVisibleText } from "./hardCodedText.js";
+export { DEFAULT_LOOKUPS, findMessageCalls } from "./messageCalls.js";
+export { listSourceFiles, listSvelteFiles } from "./syntaxTree.js";
+export { DEFAULT_MESSAGE_LOOKUPS, DEFAULT_TEXT_ATTRIBUTES, DEFAULT_TEXT_PROPERTIES, DEFAULT_TEXT_VARIABLE_PATTERN, findVisibleText } from "./visibleText.js";