@widgetic/design-system 0.5.14 → 0.5.16

package/README.md

@@ -172,6 +172,173 @@ The global styles load the necessary `@font-face` rules. You can apply typograph
 <span class="subtext">Some smaller text.</span>
 ```
 
+### Words of a package (`@widgetic/design-system/i18n`)
+
+A package that has words of its own (the File Browser, the editor, the canvas, the chat, the widget creator) keeps them in one catalog of English messages and lets the page that embeds it change them and choose the language. This is the translator and the Svelte context they all share, so every package reads a message, a plural and a number the same way.
+
+```ts
+// my-package/src/lib/i18n.ts: the catalog, once
+import { createI18n } from '@widgetic/design-system/i18n';
+
+export const MY_MESSAGES = {
+	'upload.clear': 'Clear',
+	'toast.deleted': '{count, plural, one {Deleted # file} other {Deleted # files}}'
+} as const;
+
+export const { provideI18n, useI18n, translateEnglish } = createI18n({ catalog: MY_MESSAGES, label: 'MyPackage' });
+```
+
+```svelte
+<!-- the root component of the package: the page's language, set once and again whenever the props change -->
+<script lang="ts">
+  import { provideI18n } from './i18n';
+  export let locale: string | undefined = undefined;
+  export let messages: Record<string, string> | undefined = undefined;
+  const language = provideI18n({ locale, messages });
+  $: language.update({ locale, messages });
+</script>
+```
+
+```svelte
+<!-- any part below it -->
+<script lang="ts">
+  import { useI18n } from './i18n';
+  const { t } = useI18n();
+</script>
+<button>{$t('upload.clear')}</button>
+<p>{$t('toast.deleted', { count: 3 })}</p>
+```
+
+- A message is text with `{name}` where a value goes and `{count, plural, =0 {…} one {…} other {…}}` for plurals (`#` is the number, written the way the locale writes numbers). `\{`, `\}`, `\#` and `\\` write the character itself.
+- `messages` from the page replace the English text of any key of the catalog; a key it leaves out keeps its English. A key that does not exist, a value that is not text, a template that does not read, or one that asks for a value the message is never given is said once in the console, as `[MyPackage] …` with the nearest real key, and the English stays: a mistake of the page never stops the package.
+- `locale` is a BCP 47 tag (`de`, `pt-BR`): it sets the plural rules and how numbers, dates and lists are written. A tag the browser does not know is said once and English is used.
+- For a language written right to left (`ar`, `he`, `fa`, `ur` …) the translator puts every text value it inserts (a `{name}`) between two invisible marks, the Unicode isolates U+2068 and U+2069, so that the words around a name cannot turn the name around: a file name that starts with a digit, or has a hyphen, would be put in the wrong order otherwise. Numbers, the `#` of a plural and empty values get none, and a left to right language gets none. A screen reader does not say the marks; a test that compares what a screen says in such a language has to leave them out. `createTranslator` takes `isolateValues: true | false` to decide for itself; left out, it follows `locale`.
+- `findMessageProblems(MY_MESSAGES, messages)` lists the same problems without showing anything (for a test or a build step of the page); `createTranslator` is the translator on its own, for code that has no component around it.
+- Each package makes its own with `createI18n`, so two packages on one page (the File Browser inside the editor) each have their own words and never hear each other's.
+- A package with others inside it (an editor that has the File Browser and a rich text editor) takes one flat `messages` from the page and gives each inner package its own keys: `const { slices, unclaimed } = splitMessages(messages, { editor: EDITOR_MESSAGES, fileBrowser: FILE_BROWSER_MESSAGES })`. `slices.editor` holds the entries whose key is in that catalog, and `unclaimed` the entries whose key is in none (a misspelt key): check those with `findMessageProblems` against the catalogs put together, so the page is told once and by the nearest real key.
+
+#### Keeping every word in the catalog (`@widgetic/design-system/i18n/audit`)
+
+For a package's tests only: it reads the source with the Svelte parser and runs in Node, so it must never be imported by code that runs in a page. Three audits run over a package's own source, so a new English sentence cannot slip into a component without somebody noticing.
+
+```ts
+// my-package/tests/i18n.test.ts (node:test; the same calls work in vitest)
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { auditCatalogUsage, auditDesignSystemWords, auditHardCodedText } from '@widgetic/design-system/i18n/audit';
+import { MY_MESSAGES } from '../src/lib/i18n.ts';
+
+const folder = new URL('../src/lib', import.meta.url).pathname;
+const catalogFile = new URL('../src/lib/i18n.ts', import.meta.url).pathname;
+
+test('no sentence is written into a component', () => {
+	const report = auditHardCodedText({
+		folder,
+		exclude: [catalogFile],
+		allowed: [{ file: 'Specimen.svelte', text: 'aA', reason: 'A type specimen, not a word.' }]
+	});
+	assert.deepEqual(report.loose, []); // one line for each text that is not in the catalog
+	assert.deepEqual(report.unusedAllowances, []); // an allowance whose text is gone: take it off
+	assert.deepEqual(report.allowancesWithoutReason, []); // a reason is at least twelve characters
+});
+
+test('the code and the catalog agree', () => {
+	const report = auditCatalogUsage({ folder, catalog: MY_MESSAGES, exclude: [catalogFile] });
+	assert.deepEqual(report.unknownKeys, []); // asked for, but not in the catalog
+	assert.deepEqual(report.wrongValues, []); // a value the message needs and is not given, or one it never uses
+	assert.deepEqual(report.unusedKeys, []); // in the catalog, and nothing asks for it
+	assert.deepEqual(report.messageProblems, []); // a message that does not parse
+	assert.deepEqual(report.oddKeys, []); // not `group.name` in camelCase
+});
+
+test('every design system component that shows words is given all of them', () => {
+	const report = auditDesignSystemWords({
+		folder,
+		componentsWithWords: { ActionModal: ['closeLabel'], Breadcrumbs: ['backLabel', 'rootLabel'] },
+		withoutWords: ['Button', 'Tooltip']
+	});
+	assert.deepEqual(report.missing, []); // a component used without one of its words
+	assert.deepEqual(report.unknown, []); // a component the package imports that is in neither list
+	assert.deepEqual(report.stale, []); // a name in a list that the package no longer imports
+});
+```
+
+- What counts as a word: text in the markup, the attributes that carry words (`title`, `aria-label`, `alt`, `placeholder`, `label`, …), the properties and variables with a word's name (`label`, `message`, `errorMessage`, …) and the strings a listed function returns. Pass `textAttributes`, `textProperties`, `textFunctions` and `messageLookups` to add what a package calls things; they add to the defaults, they never replace them. Pass `messageKeys` (the keys of the catalog) when a table of keys sits in a property that is also a word's name (`{ text: 'chat.contextType.text' }`): a string that is exactly a key is the name of a message, not words.
+- A text a visitor never reads as a word (a CSS unit, a type specimen, English meant for the host page's code) goes into `allowed` with the reason; the audit fails when the text is gone from its file, so the list never outlives the code.
+- A message is asked for with `$t('group.name')`, `t(…)`, `translate(…)` or `translateEnglish(…)`; a package that has its own function says where the key and the values are with `lookups: { messageForVisitor: { key: 2, values: null } }`. A list of descriptors that carry a key writes it as `messageKey` (and the values as `messageValues`), and the audit checks it like a call. A key built in code (`` $t(`filter.${kind}`) ``) is checked as a prefix: at least one key of the catalog must start with `filter.`.
+
+### Right to left (`@widgetic/design-system/i18n` and `components/textDirection`)
+
+A screen that can be read from right to left says so once, and the components below it follow. Nothing changes for a screen that says nothing: a component with no provider above it is left to right, as every component here has always been.
+
+- `resolveTextDirection(locale)` answers `'rtl'` or `'ltr'` for a language tag. It reads the script the language is written in (`ar` and `ar-EG` are Arabic, `he` is Hebrew, `pa-PK` is Arabic script but `pa-IN` is Gurmukhi, `ar-Latn` is Latin and so left to right), and a short list of languages is only the fallback for a browser without `Intl.Locale`. A blank, missing or unreadable tag is `'ltr'`, and it never throws. `resolveLanguageTag(locale)` gives the `lang` of the same tag in its canonical spelling (`pt_BR` becomes `pt-BR`, a blank one is `en`, one that cannot be read is `undefined`: leave `lang` off).
+- The root component of a screen puts the direction in the context, from a store that follows its page's language, and a component that wraps a library reads it:
+
+```svelte
+<!-- the root component of the package -->
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import { provideTextDirection, readTextDirection, type TextDirection } from '@widgetic/design-system/components/textDirection';
+
+  export let dir: TextDirection = 'ltr';
+  const textDirection = writable<TextDirection>(readTextDirection(dir)); // anything but 'rtl' is left to right
+  provideTextDirection(textDirection);
+  $: textDirection.set(readTextDirection(dir));
+</script>
+
+<div {dir}>…</div>
+```
+
+- Why a context and not only the `dir` attribute: the scroll area and the menus of `bits-ui` write `dir="ltr"` on their own element unless they are given the direction, and that one attribute turns a whole screen back from the inside. The scroll area, tooltip, popover, select, dropdown menu, hover card, breadcrumbs and toaster of this package read the context, so a screen that provides it turns around as a whole, and the toaster opens in the bottom corner where a line starts.
+- `dirForUserText(direction)` is the `dir` for text a visitor wrote (the name of a file): `'auto'` on a right to left screen, so a Latin name is not put in the wrong order in a row of Arabic ones, and `undefined` on a left to right one.
+- `shareTextDirection(givenDirection)` is for the root of a package that takes a `dir` prop which may be left out (`givenDirection` is a store that holds the prop): a `dir` that is given is the direction of that screen whatever the screen above it says, one that is left out follows the screen above it (and is left to right when there is none), and everything below reads the answer from the context. It returns the store of the answer, for the component's own decisions (a position worked out in pixels, an arrow key). `useTextDirection()` is what a component reads it with (left to right when nothing above it provides one) and `useOptionalTextDirection()` tells "left to right because the screen says so" from "nobody said anything".
+- `sideAtStart(direction)` and `sideAtEnd(direction)` give the `side` (`'left'` or `'right'`) of a pop-up that opens at the start or the end of the line: the library names the sides of a pop-up by places on the screen, which do not turn around.
+- Write placement in logical terms: `ms-`/`me-`, `ps-`/`pe-`, `start-`/`end-`, `text-start`/`text-end`, `border-s`/`border-e`, `rounded-s`/`rounded-e`/`rounded-ss`, `float-start` in Tailwind; `margin-inline-start`, `inset-inline-end`, `border-start-start-radius` in CSS. Mirror an arrow that means "forward" with `rtl:-scale-x-100`.
+
+#### Keeping it so (`@widgetic/design-system/rtl/audit`)
+
+For a package's tests only (it reads files with `node:fs`, so it must never be imported by code that runs in a page). `auditPhysicalPlacement` reads every `.svelte`, `.ts`, `.js` and `.css` file under a folder (not `node_modules`, `dist`, `.d.ts` files or tests) and reports each class, style and CSS rule that puts something on a physical side, with the logical one to write instead:
+
+```ts
+// my-package/tests/rtl.test.ts
+import { auditPhysicalPlacement } from '@widgetic/design-system/rtl/audit';
+
+const report = auditPhysicalPlacement({
+	folder: new URL('../src', import.meta.url).pathname,
+	skipped: [{ path: 'lib/board/', reason: 'A drawing board: its left and right are the picture, not the language.' }]
+});
+expect(report.filesRead).toBeGreaterThan(0); // it looked at something
+expect(report.lines).toEqual([]); // one line for each physical side
+expect(report.unusedSkips).toEqual([]); // a part that was named and is gone: take it off
+```
+
+A physical side that is meant (a slider's track, a pixel offset that is the same in both directions) says why with the note `rtl-ok` on the same line or the line above.
+
+What the audit reads besides classes and properties: a **shorthand that names the sides by their place** (`margin`, `padding`, `inset`, `scroll-margin`, `scroll-padding`, `border-width`, `border-color`, `border-style` and `border-radius`: `padding: 4px 6px 4px 0` is top, right, bottom, left) is reported when its right and left (or its corners) differ, with the logical property to write (`padding-inline: 0 6px`); one that is the same at both ends is not. A comment hides a line only where it is a comment: a `/*` inside a quoted attribute, an image path or a regular expression does not hide what follows it.
+
+What it cannot see (found by looking at a screen in Arabic, not by the audit, so look at one): a box that is put in place **in pixels** from the left (a dock, a pop-up, a divider) has to be mirrored where it is placed; an element that says `position: relative` itself is moved from where it sits in the flow, which on a right to left screen is its right edge, so a box placed with `left:` says `position: absolute` inline; and `dir="auto"` on a field with **nothing in it yet** reads left to right (there is no first letter), so write it only once there is a value and let an empty field take the direction of the screen.
+
+### Rich text editor (`@widgetic/design-system/shad-editor`)
+
+`ShadEditor` is a TipTap editor with a toolbar. It shows English until the page gives it words in another language:
+
+```svelte
+<script lang="ts">
+  import { ShadEditor, checkShadEditorMessages } from '@widgetic/design-system/shad-editor';
+
+  let html = $state('<p>Hello</p>');
+  const messages = { 'shadEditor.toolbar.bold': 'Fett (⌘B)', 'shadEditor.table.insert': 'Tabelle einfügen' };
+  console.log(checkShadEditorMessages(messages)); // [] when every key exists and every message reads
+</script>
+
+<ShadEditor bind:content={html} locale="de" {messages} />
+```
+
+- `SHAD_EDITOR_MESSAGES` is the catalog, 85 messages: the tooltip of every toolbar button (the keyboard shortcut is part of the message, so a page that wants `Ctrl` for its visitors writes it there), the menus of text styles and alignment, the link, image, colour and highlight pop-ups, the table menu, the names of the quick colours, search and replace, and the bar over an image in the text. A key the page leaves out keeps its English.
+- `checkShadEditorMessages(messages)` lists the keys that do not exist (with the nearest real one), the values that are not text and the templates that do not read, without showing anything.
+- A change of `locale` or `messages` reaches the toolbar, the menus and the images that are already in the text, without making the editor again.
+- Two words are not the editor's to change: the button of the file chooser in the image pop-up is the browser's own, and the colour picker names its window `color picker` in English.
+
 ## Troubleshooting
 
 ### File Case Sensitivity Issues (macOS/Windows Teams)

package/dist/components/CopyableHeader.svelte

@@ -17,6 +17,10 @@
  *   helpUrl="/embed"
  * />
  * ```
+ *
+ * The words of the pop-up that says whether the copy worked are props too (`copiedTitle`, `copiedDescription`,
+ * `copyFailedTitle`, `copyFailedDescription`), so a page in another language can give them. A page that shows its own pop-up
+ * on the `copy` and `copyError` events passes `showInternalToast={false}` instead.
  */
  -->
 <script lang="ts">
@@ -33,6 +37,10 @@ const dispatch = createEventDispatcher();
 // import { toast, Button, Tooltip, Portal } from '@widgetic/design-system/components';
 import { toast, Button, Tooltip, Portal } from './';
 import { IconCopy, IconHelp } from '@tabler/icons-svelte';
+import { sideAtEnd, sideAtStart, useTextDirection } from './textDirection.js';
+
+// The pop-ups open on a side of the screen, and the sides at the start and at the end of the line trade places on a right to left one.
+const textDirection = useTextDirection();
 
 /**
  * COMPONENT PROPS
@@ -48,6 +56,12 @@ export let showHelp = true;
 export let monospaceContent = true;
 export let showStandaloneCopyButton = false;
 export let standaloneCopyButtonText = '';
+/** The pop-up after a copy that worked: its title and the line under it. */
+export let copiedTitle = 'Copied to clipboard';
+export let copiedDescription = 'Content copied successfully.';
+/** The pop-up after a copy that failed: its title and the line under it. */
+export let copyFailedTitle = 'Copy failed';
+export let copyFailedDescription = 'Please try manual selection';
 export let showButtonText = true;
 export let buttonClass = '';
 export let showInternalToast = true;
@@ -127,15 +141,15 @@ async function handleCopyButtonClick(e: MouseEvent) {
   try {
     await navigator.clipboard.writeText(content);
     if (showInternalToast) {
-      showToast('success', 'Copied to clipboard', {
-        description: 'Content copied successfully.',
+      showToast('success', copiedTitle, {
+        description: copiedDescription,
       });
     }
     dispatch('copy', { content });
   } catch (err) {
     if (showInternalToast) {
-      showToast('error', 'Copy failed', {
-        description: 'Please try manual selection',
+      showToast('error', copyFailedTitle, {
+        description: copyFailedDescription,
       });
     }
     dispatch('copyError', { error: err });
@@ -217,7 +231,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
               {#if showHelpTooltip}
                 <Portal target="editor-tooltips">
                   <Tooltip.Content 
-                    side="right" 
+                    side={sideAtEnd($textDirection)} 
                     sideOffset={5}
                     class="bg-[hsl(var(--dark))] text-white z-200000 overflow-hidden rounded-md px-2 py-1.5 shadow-md widgetic-colors widgetic-radius"
                   >
@@ -247,7 +261,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
               >
                 <IconCopy class="w-5 h-5" style="width: 20px !important; height: 20px !important;" />
                 {#if showButtonText}
-                  <span class="ml-2">{standaloneCopyButtonText}</span>
+                  <span class="ms-2">{standaloneCopyButtonText}</span>
                 {/if}
               </Button>
             </Tooltip.Trigger>
@@ -255,7 +269,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
             {#if showCopyTooltip}
               <Portal target="editor-tooltips">
                 <Tooltip.Content 
-                  side="left" 
+                  side={sideAtStart($textDirection)} 
                   sideOffset={5}
                   class="bg-[hsl(var(--dark))] text-white z-200000 overflow-hidden rounded-md px-3 py-1.5 shadow-md widgetic-colors widgetic-radius"
                 >
@@ -272,7 +286,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
               <Button 
                 variant="ghost" 
                 size="icon"
-                class="h-10 w-10 {headerBackgroundColor ? headerBackgroundColor : 'hover:bg-white'} active:scale-95 transition-transform duration-150 mr-[-4px]"
+                class="h-10 w-10 {headerBackgroundColor ? headerBackgroundColor : 'hover:bg-white'} active:scale-95 transition-transform duration-150 me-[-4px]"
                 onclick={handleCopyButtonClick}
                 onmouseenter={handleCopyMouseEnter}
                 onmousemove={handleMouseMove}
@@ -293,7 +307,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
             {#if showCopyTooltip}
               <Portal target="editor-tooltips">
                 <Tooltip.Content 
-                  side="left" 
+                  side={sideAtStart($textDirection)} 
                   sideOffset={5}
                   class="bg-[hsl(var(--dark))] text-white z-200000 overflow-hidden rounded-md px-3 py-1.5 shadow-md widgetic-colors widgetic-radius"
                 >
@@ -312,7 +326,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
     <div 
       bind:this={contentElement}
-      class="copyable-content-area text-[14px] w-full text-left bg-white relative {monospaceContent ? 'font-mono' : ''}"
+      class="copyable-content-area text-[14px] w-full text-start bg-white relative {monospaceContent ? 'font-mono' : ''}"
       style="
         padding: 16px;
         min-height: 80px;
@@ -396,7 +410,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
   :global(.copyable-header-toast) {
     position: fixed !important;
     bottom: 20px !important;
-    right: 20px !important;
+    inset-inline-end: 20px !important;
     top: auto !important;
     display: flex !important;
     align-items: center !important;

package/dist/components/CopyableHeader.svelte.d.ts

@@ -24,6 +24,10 @@ declare const CopyableHeader: $$__sveltets_2_IsomorphicComponent<{
     monospaceContent?: boolean;
     showStandaloneCopyButton?: boolean;
     standaloneCopyButtonText?: string;
+    /** The pop-up after a copy that worked: its title and the line under it. */ copiedTitle?: string;
+    copiedDescription?: string;
+    /** The pop-up after a copy that failed: its title and the line under it. */ copyFailedTitle?: string;
+    copyFailedDescription?: string;
     showButtonText?: boolean;
     buttonClass?: string;
     showInternalToast?: boolean;

package/dist/components/EmptyState.svelte

@@ -83,7 +83,7 @@
     <p class="subtext" style="color: {textColor}">{message}</p>
     
     {#if $$slots.action}
-      <div class="ml-2">
+      <div class="ms-2">
         <slot name="action" />
       </div>
     {/if}

package/dist/components/PasswordInput.svelte

@@ -23,7 +23,7 @@
 <div class="relative widgetic-colors">
   <div class="relative">
     <Input
-      class="pr-[32px]"
+      class="pe-[32px]"
       bind:value
       {name}
       type={showPassword ? 'text' : 'password'}
@@ -36,7 +36,7 @@
     <!-- Toggle Password Visibility -->
     <button
       type="button"
-      class="absolute top-1/2 -translate-y-1/2 right-3 cursor-pointer text-[hsl(var(--sage-green))] hover:text-[hsl(var(--dark))]"
+      class="absolute top-1/2 -translate-y-1/2 end-3 cursor-pointer text-[hsl(var(--sage-green))] hover:text-[hsl(var(--dark))]"
       tabindex="-1"
       on:click={() => showPassword = !showPassword}
     >

package/dist/components/WScrollArea.svelte

@@ -26,7 +26,7 @@ export let element: HTMLElement | null = null;
 <ScrollArea bind:ref={element}
         class={(className ? className + ' ' : '') + "scroll-area-container w-full h-full " + 
               "widgetic-radius widgetic-colors select-text " +  
-              "**:!data-scroll-area-viewport:pr-(--scrollbar-width)"}
+              "**:!data-scroll-area-viewport:pe-(--scrollbar-width)"}
         style="{style} {scrollOutside ? `width: calc(100% + ${scrollbarWidth}px) !important;` : ''}
                 --scrollbar-width: {scrollbarWidth}px; --scrollbar-padding: {scrollbarWidth/4}px; "
         {orientation}
@@ -38,7 +38,7 @@ export let element: HTMLElement | null = null;
                           "[&>div]:bg-[hsl(var(--grey1))] hover:[&>div]:bg-[hsl(var(--grey2))] " + 
                           "[&>div]:transition-colors [&>div]:duration-250"}
       >
-      <div class="actual-viewport {viewPortClass ? viewPortClass + ' ' : ''} absolute inset-0 z-[-1]" style="margin-right: {scrollbarWidth}px;">
+      <div class="actual-viewport {viewPortClass ? viewPortClass + ' ' : ''} absolute inset-0 z-[-1]" style="margin-inline-end: {scrollbarWidth}px;">
         <!-- <div class="viewport-inner absolute border border-red-500" style="inset: {contentPadding}px;"></div> -->
       </div>
       <slot/>

package/dist/components/ic/browser/BrowserInputController.svelte

@@ -285,10 +285,10 @@
             </span>
           </Tooltip.Trigger>
           <Tooltip.Content 
-            side="right" 
+            side={/* rtl-ok: the help text is put where the pointer is, by the style below */ 'right'}
             sideOffset={5}
             class="bg-gray-900 text-white z-99999 overflow-hidden rounded-md px-3 py-1.5 text-sm shadow-md"
-            style="position: fixed; left: {mouseX + 20}px; top: {mouseY}px; z-index: 999999;"
+            style="position: fixed; left: {mouseX + 20}px; top: {mouseY}px; z-index: 999999; /* rtl-ok: the help text follows the pointer, measured from the left edge of the page */"
           >
             <p class="text-sm">{header.helpText}</p>
           </Tooltip.Content>

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ export { default as BrowserInputController } from './ic/browser/BrowserInputCont
 export { default as ActionModal } from './modals/ActionModal.svelte';
 export { default as BaseModal } from './modals/BaseModal.svelte';
 export { default as NewItemDialog } from './modals/NewItemDialog.svelte';
+export type { NewItemDialogMessages, RenameDialogMessages } from './modals/messages';
 export { default as Portal } from './modals/Portal.svelte';
 export { default as RenameDialog } from './modals/RenameDialog.svelte';
 export { Breadcrumbs, type BreadcrumbsProps } from './navigation';

package/dist/components/modals/ActionModal.svelte

@@ -23,11 +23,15 @@
   export let confirmLabel: string = 'Confirm';
   export let onConfirm: () => Promise<any> = async () => {};
   export let cancelLabel: string = 'Cancel';
+  // The words a screen reader says for the close button (see BaseModal)
+  export let closeLabel: string = 'Close modal';
   export let onCancel: () => void = () => {};
   export let width: string = '410px';
   export let height: string = '168px';
   export let target: string = 'action-confirmation-modal'; // target for Portal
   export let isConfirmDisabled: boolean = false;
+  /** When false, a failed confirm can leave the dialog open. Callers close it themselves. */
+  export let closeOnConfirm: boolean = true;
   export let confirmVariant: 'primary' | 'attention' = 'primary';
   export let actionType: string = 'confirm';
 
@@ -75,8 +79,8 @@
     // Dispatch a confirmation event with all items
     dispatch('confirm', { items });
    
-    // Close the modal immediately to allow user to continue working
-    isOpen = false;
+    // Callers that show an error inside the dialog set closeOnConfirm to false.
+    if (closeOnConfirm) isOpen = false;
   }
 
   // Support for restoring modal state
@@ -120,6 +124,7 @@
   width={width}
   height={height}
   titlePadding="small"
+  {closeLabel}
   {modalType}
   {modalData}
   on:restore={handleRestore}

package/dist/components/modals/ActionModal.svelte.d.ts

@@ -26,11 +26,13 @@ declare const ActionModal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pro
     confirmLabel?: string;
     onConfirm?: () => Promise<any>;
     cancelLabel?: string;
+    closeLabel?: string;
     onCancel?: () => void;
     width?: string;
     height?: string;
     target?: string;
     isConfirmDisabled?: boolean;
+    /** When false, a failed confirm can leave the dialog open. Callers close it themselves. */ closeOnConfirm?: boolean;
     confirmVariant?: "primary" | "attention";
     actionType?: string;
     modalType?: string;

package/dist/components/modals/BaseModal.svelte

@@ -33,6 +33,8 @@
   export let enableSpaceKey = false;
   export let isSelected = false;
   export let showScroll = false;
+  // The words a screen reader says for the close button. A page that shows the modal in another language passes its own.
+  export let closeLabel: string = 'Close modal';
 
   // children prop(svelte 5) to replace the traditional slot(svelte 4)
   export let children: any;
@@ -286,13 +288,13 @@
       ></div>
 
       <!-- Close button -->
-      <div class="modal-close-bt-container absolute top-4 right-4 z-1004" transition:fade={{ duration: transitionDuration, easing }}>
+      <div class="modal-close-bt-container absolute top-4 end-4 z-1004" transition:fade={{ duration: transitionDuration, easing }}>
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div 
           class="close-button widgetic-colors p-0 w-10 h-10 bg-[hsl(var(--dark))] hover:bg-[hsl(var(--grey6))] transition-colors duration-200 rounded-full flex items-center justify-center cursor-pointer" 
           on:click|stopPropagation|preventDefault={handleClose}
-          aria-label="Close modal"
+          aria-label={closeLabel}
           role="button"
           tabindex="0"
         >

package/dist/components/modals/BaseModal.svelte.d.ts

@@ -25,6 +25,7 @@ declare const BaseModal: $$__sveltets_2_IsomorphicComponent<{
     enableSpaceKey?: boolean;
     isSelected?: boolean;
     showScroll?: boolean;
+    closeLabel?: string;
     children: any;
 }, {
     click: PointerEvent;

package/dist/components/modals/NewItemDialog.svelte

@@ -10,23 +10,12 @@
   // Import BaseModal as a default import using relative path, similar to RenameDialog
   import BaseModal from './BaseModal.svelte';
   
-  // Name validation function
-  function isValidName(name: string): boolean {
-    if (!name || typeof name !== 'string') return false;
-    const trimmed = name.trim();
-    if (trimmed.length === 0) return false;
-    return /^[a-zA-Z0-9\s]+$/.test(trimmed);
-  }
-  
-  function getNameValidationError(name: string, itemType: string = 'name'): string | null {
-    if (!name || typeof name !== 'string') return `${itemType} is required`;
-    const trimmed = name.trim();
-    if (trimmed.length === 0) return `${itemType} is required`;
-    if (!isValidName(name)) {
-        return `${itemType} can only contain letters, numbers, and spaces`;
-    }
-    return null;
-  }
+  // Words of the dialog and the helper that puts values into them
+  import type { NewItemDialogMessages } from './messages';
+  import { fillMessage } from '../../utils/fillMessage';
+
+  // What a name may be made of: letters, numbers and white space of any script (see utils/itemName)
+  import { findItemNameProblem, isValidItemName, keepAllowedNameCharacters } from '../../utils/itemName';
 
   // Props
   let className = '';
@@ -43,6 +32,10 @@
   export let currentPathNames: string[] = [];
   export let confirmLabel = "Create";
   export let cancelLabel = "Cancel";
+  // The words a screen reader says for the close button (see BaseModal)
+  export let closeLabel = "Close modal";
+  // The words of the validation errors; a key that is left out keeps its English text (see ./messages)
+  export let messages: Partial<NewItemDialogMessages> = {};
   export let modalType: string = "newItem";
   export let modalWidth = "410px";
   export let modalHeight = "168px";
@@ -58,6 +51,19 @@
   // Compute title based on itemType if not provided
   $: displayTitle = title || `New ${itemType.charAt(0).toUpperCase() + itemType.slice(1)}`;
 
+  // The words of the validation errors: the page's own, or English built from the item type ("Folder name is required")
+  $: itemTypeCapitalized = itemType.charAt(0).toUpperCase() + itemType.slice(1);
+  $: text = {
+    invalidTitle: messages.invalidTitle ?? `Invalid ${itemType} name`,
+    required: messages.required ?? `${itemTypeCapitalized} name is required`,
+    invalidCharacters:
+      messages.invalidCharacters ?? `${itemTypeCapitalized} name can only contain letters, numbers, and spaces`,
+    tooLong: fillMessage(
+      messages.tooLong ?? `${itemTypeCapitalized} name cannot exceed {max} characters`,
+      { max: maxLength }
+    )
+  };
+
   $: if (isOpen) {
     itemName = '';
     hasAttemptedSubmit = false;
@@ -66,15 +72,15 @@
 
   $: {
     const trimmedName = itemName.trim();
-    isValid = trimmedName.length > 0 && itemName.length <= maxLength && isValidName(trimmedName);
+    isValid = trimmedName.length > 0 && itemName.length <= maxLength && isValidItemName(trimmedName);
     
     // Update real-time error message
     if (itemName.length > 0) {
       if (itemName.length > maxLength) {
-        currentError = `${itemType.charAt(0).toUpperCase() + itemType.slice(1)} name cannot exceed ${maxLength} characters`;
+        currentError = text.tooLong;
       } else {
-        const nameError = getNameValidationError(trimmedName, itemType.charAt(0).toUpperCase() + itemType.slice(1) + ' name');
-        currentError = nameError || '';
+        const nameProblem = findItemNameProblem(trimmedName);
+        currentError = nameProblem ? text[nameProblem] : '';
       }
     } else {
       currentError = '';
@@ -85,18 +91,18 @@
     hasAttemptedSubmit = true;
     
     // Validate name format
-    const nameError = getNameValidationError(itemName, itemType.charAt(0).toUpperCase() + itemType.slice(1) + ' name');
-    if (nameError) {
-      toast.error(`Invalid ${itemType} name`, {
-        description: nameError
+    const nameProblem = findItemNameProblem(itemName);
+    if (nameProblem) {
+      toast.error(text.invalidTitle, {
+        description: text[nameProblem]
       });
       return;
     }
     
     if (itemName.length > maxLength) {
       // Show error toast for name too long
-      toast.error(`Invalid ${itemType} name`, {
-        description: `${itemType} name cannot exceed ${maxLength} characters`
+      toast.error(text.invalidTitle, {
+        description: text.tooLong
       });
       return;
     }
@@ -106,6 +112,12 @@
     handleClose();
   }
 
+  // Only allow letters, numbers, and spaces (of any script): anything else typed or pasted is dropped
+  function keepAllowedCharacters(inputElement: HTMLInputElement) {
+    inputElement.value = keepAllowedNameCharacters(inputElement.value);
+    itemName = inputElement.value;
+  }
+
   function handleClose() {
     isOpen = false;
     itemName = '';
@@ -131,6 +143,7 @@
   {modalType}
   modalData={combinedModalData}
   title={showTitle ? displayTitle : undefined}
+  {closeLabel}
   {target}
   on:restore={(event: CustomEvent<any>) => {
     if (event.detail) {
@@ -158,10 +171,15 @@
         }}
         oninput={(e) => {
           const target = e.target as HTMLInputElement;
-          // Only allow letters, numbers, and spaces
-          target.value = target.value.replace(/[^a-zA-Z0-9\s]/g, '');
-          itemName = target.value;
+          // An input method (Japanese, Chinese, Korean...) is still building a word: changing the field now would
+          // cancel the word. It is checked when the word is committed, in oncompositionend.
+          if ('isComposing' in e && e.isComposing) {
+            itemName = target.value;
+            return;
+          }
+          keepAllowedCharacters(target);
         }}
+        oncompositionend={(e) => keepAllowedCharacters(e.target as HTMLInputElement)}
         onfocus={(e) => {
           const target = e.target as HTMLInputElement;
           target.placeholder = "";

package/dist/components/modals/NewItemDialog.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { NewItemDialogMessages } from './messages';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -24,6 +25,8 @@ declare const NewItemDialog: $$__sveltets_2_IsomorphicComponent<{
     currentPathNames?: string[];
     confirmLabel?: string;
     cancelLabel?: string;
+    closeLabel?: string;
+    messages?: Partial<NewItemDialogMessages>;
     modalType?: string;
     modalWidth?: string;
     modalHeight?: string;