entasis 0.13.1 → 0.13.2

package/dist/components/ScrollArea/scrollArea.svelte.d.ts

@@ -0,0 +1,130 @@
+export interface ScrollAreaOptions {
+    delay: number;
+    type: 'auto' | 'always' | 'scroll' | 'hover';
+    scrollOnEdges: boolean;
+    /**
+     * Px of content that may stay hidden past an edge before that edge counts as overflowing.
+     * Defaults to 1.
+     */
+    overflowEdgeThreshold?: number;
+    /**
+     * Writing direction of the viewport. In `rtl` the horizontal offset runs from 0 down to a
+     * negative number, so every horizontal read and write is mirrored. Defaults to `ltr`.
+     */
+    direction?: () => 'ltr' | 'rtl';
+}
+declare const ScrollArea_base: new (props: ScrollAreaOptions) => {} & ScrollAreaOptions;
+export declare class ScrollArea extends ScrollArea_base {
+    viewportElement: HTMLElement | undefined;
+    contentElement: HTMLElement | undefined;
+    scrollbarXElement: HTMLElement | undefined;
+    scrollbarYElement: HTMLElement | undefined;
+    scrollY: number;
+    scrollX: number;
+    dragOffset: number;
+    viewportDimensions: {
+        width: number;
+        height: number;
+    };
+    contentDimensions: {
+        width: number;
+        height: number;
+    };
+    measureVersion: number;
+    maxScrollY: number;
+    scrollbarYEnabled: boolean;
+    maxScrollX: number;
+    scrollbarXEnabled: boolean;
+    visible: boolean;
+    visibleX: boolean;
+    rtl: boolean;
+    trackYThickness: number;
+    trackXThickness: number;
+    private edgeThreshold;
+    overflowYStart: number;
+    overflowYEnd: number;
+    overflowXStart: number;
+    overflowXEnd: number;
+    hasOverflowYStart: boolean;
+    hasOverflowYEnd: boolean;
+    hasOverflowXStart: boolean;
+    hasOverflowXEnd: boolean;
+    canScrollUp: boolean;
+    canScrollDown: boolean;
+    thumbRect: {
+        readonly current: DOMRect;
+        reference: (ref: HTMLElement) => (() => void) | undefined;
+    };
+    trackRect: {
+        readonly current: DOMRect;
+        reference: (ref: HTMLElement) => (() => void) | undefined;
+    };
+    trackRectX: {
+        readonly current: DOMRect;
+        reference: (ref: HTMLElement) => (() => void) | undefined;
+    };
+    private trackYLength;
+    private trackXLength;
+    /** Thumb length the content ratio asks for, before any overscroll shrinks it. */
+    thumbYBaseSize: number;
+    thumbXBaseSize: number;
+    overscrollY: number;
+    overscrollX: number;
+    thumbYSize: number;
+    thumbXSize: number;
+    private savedScrollSnapType;
+    private pauseScrollSnap;
+    private restoreScrollSnap;
+    isDraggingY: boolean;
+    dragY: import("svelte/attachments").Attachment<HTMLElement>;
+    isDraggingX: boolean;
+    dragX: import("svelte/attachments").Attachment<HTMLElement>;
+    overflowing: boolean;
+    hoover: {
+        reference: (ref: HTMLElement) => () => void;
+        destroy: () => void;
+        cancel: () => void;
+        readonly isHovered: boolean;
+    };
+    thumbYPosition: number;
+    /** Distance from the track's inline start to the thumb's inline start edge. */
+    thumbXPosition: number;
+    /** The horizontal thumb's `translateX` in px: mirrored in RTL, where the track fills from the right. */
+    thumbXTranslate: number;
+    isScrolling: boolean;
+    private scrollingTimer;
+    private clearScrollingTimer;
+    /** Horizontal scroll offset as distance from the inline start, whatever the direction. */
+    private readScrollX;
+    /** Scrolls horizontally to a distance from the inline start. */
+    private writeScrollX;
+    /** Re-resolves the writing direction; true when it flipped. */
+    private syncDirection;
+    private readScrollOffsets;
+    private handleScroll;
+    handleTrackClick: (event: MouseEvent) => void;
+    handleTrackClickX: (event: MouseEvent) => void;
+    private measureFrame;
+    private lastExtentY;
+    private lastExtentX;
+    /**
+     * Read the live boxes and publish them. Idempotent: state is only written when a number
+     * actually moved, so a chatty MutationObserver cannot start a re-render loop.
+     */
+    measure: () => void;
+    /** Coalesce bursts of observer callbacks into one post-layout measurement. */
+    private scheduleMeasure;
+    private cancelScheduledMeasure;
+    viewportAttachment: (element: HTMLElement) => () => void;
+    contentAttachment: (element: HTMLElement) => () => void;
+    private forwardWheelToViewport;
+    private keepFocusOnPress;
+    trackAttachment: (element: HTMLElement) => () => void;
+    trackAttachmentX: (element: HTMLElement) => () => void;
+    private scrollAnimationFrame;
+    private edgeScrollSpeed;
+    get scrollOnEdgesAttachment(): ((element: HTMLElement) => () => void) | null;
+    private startEdgeScroll;
+    private stopEdgeScroll;
+}
+export {};

package/dist/generated/componentContract.d.ts

@@ -1830,7 +1830,7 @@ export declare const componentInventory: readonly [{
     readonly id: "i18n";
     readonly subpath: "entasis/i18n";
     readonly sourceIndex: "src/lib/i18n/index.ts";
-    readonly exportedSymbols: readonly ["I18n", "I18nInput", "LocaleCode", "LocaleMeta", "Messages", "en", "localeList", "locales", "setI18n", "useI18n"];
+    readonly exportedSymbols: readonly ["I18n", "I18nInput", "LocaleCode", "LocaleMeta", "Messages", "ar", "de", "en", "es", "fr", "ja", "localeList", "locales", "pt", "setI18n", "useI18n", "zh"];
     readonly docs: readonly [];
     readonly capabilities: readonly ["svelte", "localization"];
     readonly relatedComponents: readonly ["theme"];

package/dist/generated/componentContract.js

@@ -4467,11 +4467,18 @@ export const componentInventory = [
             'LocaleCode',
             'LocaleMeta',
             'Messages',
+            'ar',
+            'de',
             'en',
+            'es',
+            'fr',
+            'ja',
             'localeList',
             'locales',
+            'pt',
             'setI18n',
-            'useI18n'
+            'useI18n',
+            'zh'
         ],
         docs: [],
         capabilities: ['svelte', 'localization'],

package/dist/i18n/I18n.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { BROWSER, DEV } from 'esm-env';
 	import { setI18n, setI18nDirection } from './context.svelte.js';
-	import { locales, type LocaleCode } from './locales.js';
-	import type { Messages } from './en.js';
+	import { loadLocaleMessages, localeDirection } from './localeCatalogs.js';
+	import type { LocaleCode } from './locales.js';
+	import { en, type Messages } from './en.js';
 
 	let {
 		locale = $bindable('en'),
+		catalogs,
 		messages,
 		dir,
 		manageDocument = true,
@@ -13,6 +16,12 @@
 	}: {
 		/** Active locale, bindable so a language picker can drive it. */
 		locale?: LocaleCode;
+		/**
+		 * Catalogs available without loading, by locale: `catalogs={{ fr }}` with `fr` imported from
+		 * `entasis/i18n`. A locale missing here loads its catalog on demand (English shows until it
+		 * arrives, and server rendering stays English), so pass the locales an app renders first.
+		 */
+		catalogs?: Partial<Record<LocaleCode, Messages>>;
 		/** Extra per-key overrides merged on top of the locale's messages. */
 		messages?: Partial<Messages>;
 		/** Force a text direction; defaults to the active locale's direction (rtl for Arabic). */
@@ -23,9 +32,32 @@
 		children?: Snippet;
 	} = $props();
 
+	let loaded = $state<Partial<Record<LocaleCode, Messages>>>({});
+	// While a switched-to locale loads, keep showing the previous catalog rather than English.
+	let shown: Messages = en;
+	const catalog = $derived.by(() => {
+		const next = locale === 'en' ? en : (catalogs?.[locale] ?? loaded[locale]);
+		if (next) shown = next;
+		return next ?? shown;
+	});
+
+	if (DEV && !BROWSER && locale !== 'en' && !catalogs?.[locale]) {
+		console.warn(
+			`entasis: <I18n locale="${locale}"> has no catalog for "${locale}" and renders English on the server. Pass catalogs={{ ... }} with the catalog imported from 'entasis/i18n'.`
+		);
+	}
+
+	$effect(() => {
+		const code = locale;
+		if (code === 'en' || catalogs?.[code] || loaded[code]) return;
+		loadLocaleMessages(code)?.then((catalog) => {
+			loaded[code] = catalog;
+		});
+	});
+
 	// Provide the merged catalog to all descendants. The getter keeps them reactive to `locale`.
-	setI18n(() => ({ ...locales[locale].messages, ...messages }));
-	setI18nDirection(() => dir ?? locales[locale].dir);
+	setI18n(() => ({ ...catalog, ...messages }));
+	setI18nDirection(() => dir ?? localeDirection(locale));
 
 	// Client-only: mirror direction + language onto the document element.
 	// Restore the prior values on unmount / when manageDocument turns off, so a page-scoped
@@ -35,7 +67,7 @@
 		const root = document.documentElement;
 		const prevDir = root.dir;
 		const prevLang = root.lang;
-		root.dir = dir ?? locales[locale].dir;
+		root.dir = dir ?? localeDirection(locale);
 		root.lang = locale;
 		return () => {
 			root.dir = prevDir;

package/dist/i18n/I18n.svelte.d.ts

@@ -1,9 +1,15 @@
 import type { Snippet } from 'svelte';
-import { type LocaleCode } from './locales.js';
-import type { Messages } from './en.js';
+import type { LocaleCode } from './locales.js';
+import { type Messages } from './en.js';
 type $$ComponentProps = {
     /** Active locale, bindable so a language picker can drive it. */
     locale?: LocaleCode;
+    /**
+     * Catalogs available without loading, by locale: `catalogs={{ fr }}` with `fr` imported from
+     * `entasis/i18n`. A locale missing here loads its catalog on demand (English shows until it
+     * arrives, and server rendering stays English), so pass the locales an app renders first.
+     */
+    catalogs?: Partial<Record<LocaleCode, Messages>>;
     /** Extra per-key overrides merged on top of the locale's messages. */
     messages?: Partial<Messages>;
     /** Force a text direction; defaults to the active locale's direction (rtl for Arabic). */

package/dist/i18n/i18n.mcp.d.ts

@@ -1 +1 @@
-export declare const i18nDescription = "\n# Internationalization\n\nImport from `entasis/i18n`.\n\nI18n provides locale messages to child components. setI18n and useI18n set and read the component context. en is the English message set; Messages and I18nInput describe translation inputs. locales and localeList expose the supported locale inventory with LocaleCode and LocaleMeta types.\n";
+export declare const i18nDescription = "\n# Internationalization\n\nImport from `entasis/i18n`.\n\nI18n provides locale messages to child components. setI18n and useI18n set and read the component context. en is the English message set; Messages and I18nInput describe translation inputs. es, fr, de, ja, zh, pt and ar are the other catalogs, exported by name so an app bundles only the ones it imports: `<I18n locale=\"fr\" catalogs={{ fr }}>`. A locale missing from catalogs loads its catalog on demand and renders English until then, including on the server. locales and localeList expose the supported locale inventory with LocaleCode and LocaleMeta types; they import every catalog, so keep them for language pickers.\n";

package/dist/i18n/i18n.mcp.js

@@ -3,5 +3,5 @@ export const i18nDescription = `
 
 Import from \`entasis/i18n\`.
 
-I18n provides locale messages to child components. setI18n and useI18n set and read the component context. en is the English message set; Messages and I18nInput describe translation inputs. locales and localeList expose the supported locale inventory with LocaleCode and LocaleMeta types.
+I18n provides locale messages to child components. setI18n and useI18n set and read the component context. en is the English message set; Messages and I18nInput describe translation inputs. es, fr, de, ja, zh, pt and ar are the other catalogs, exported by name so an app bundles only the ones it imports: \`<I18n locale="fr" catalogs={{ fr }}>\`. A locale missing from catalogs loads its catalog on demand and renders English until then, including on the server. locales and localeList expose the supported locale inventory with LocaleCode and LocaleMeta types; they import every catalog, so keep them for language pickers.
 `;

package/dist/i18n/index.d.ts

@@ -1,4 +1,11 @@
 export { default as I18n } from './I18n.svelte';
 export { en, type Messages } from './en.js';
+export { es } from './es.js';
+export { fr } from './fr.js';
+export { de } from './de.js';
+export { ja } from './ja.js';
+export { zh } from './zh.js';
+export { pt } from './pt.js';
+export { ar } from './ar.js';
 export { setI18n, useI18n, type I18nInput } from './context.svelte.js';
 export { locales, localeList, type LocaleCode, type LocaleMeta } from './locales.js';

package/dist/i18n/index.js

@@ -1,4 +1,11 @@
 export { default as I18n } from './I18n.svelte';
 export { en } from './en.js';
+export { es } from './es.js';
+export { fr } from './fr.js';
+export { de } from './de.js';
+export { ja } from './ja.js';
+export { zh } from './zh.js';
+export { pt } from './pt.js';
+export { ar } from './ar.js';
 export { setI18n, useI18n } from './context.svelte.js';
 export { locales, localeList } from './locales.js';

package/dist/i18n/localeCatalogs.d.ts

@@ -0,0 +1,6 @@
+import type { Messages } from './en.js';
+import type { LocaleCode } from './locales.js';
+/** Load a shipped locale's catalog on demand. Repeated calls share one request. */
+export declare const loadLocaleMessages: (code: LocaleCode) => Promise<Messages> | undefined;
+/** Text direction of a shipped locale, without importing its catalog. */
+export declare const localeDirection: (code: LocaleCode) => "ltr" | "rtl";

package/dist/i18n/localeCatalogs.js

@@ -0,0 +1,28 @@
+/**
+ * One dynamic import per locale, so a bundler emits each catalog as its own chunk and an app
+ * only downloads the locales it renders. English is the built-in default and never loads.
+ */
+const loaders = {
+    es: () => import('./es.js').then((m) => m.es),
+    fr: () => import('./fr.js').then((m) => m.fr),
+    de: () => import('./de.js').then((m) => m.de),
+    ja: () => import('./ja.js').then((m) => m.ja),
+    'zh-CN': () => import('./zh.js').then((m) => m.zh),
+    'pt-BR': () => import('./pt.js').then((m) => m.pt),
+    ar: () => import('./ar.js').then((m) => m.ar)
+};
+const pending = new Map();
+/** Load a shipped locale's catalog on demand. Repeated calls share one request. */
+export const loadLocaleMessages = (code) => {
+    if (code === 'en')
+        return undefined;
+    let request = pending.get(code);
+    if (!request) {
+        request = loaders[code]();
+        pending.set(code, request);
+        request.catch(() => pending.delete(code));
+    }
+    return request;
+};
+/** Text direction of a shipped locale, without importing its catalog. */
+export const localeDirection = (code) => (code === 'ar' ? 'rtl' : 'ltr');

package/dist/i18n/locales.d.ts

@@ -8,7 +8,11 @@ export type LocaleMeta = {
     /** The message catalog for this locale. */
     messages: Messages;
 };
-/** All shipped locales. Pass `locales[code].messages` to `setI18n` and set `document.dir` from `locales[code].dir`. */
+/**
+ * Every shipped locale with its catalog, for a language picker. Importing it bundles all eight
+ * catalogs: an app with a fixed locale imports that catalog by name instead (`import { fr } from
+ * 'entasis/i18n'`) and passes it to `<I18n catalogs={{ fr }}>` or `setI18n`.
+ */
 export declare const locales: Record<LocaleCode, LocaleMeta>;
 export declare const localeList: {
     /** Native language name, for a language picker. */

package/dist/i18n/locales.js

@@ -6,7 +6,11 @@ import { ja } from './ja.js';
 import { zh } from './zh.js';
 import { pt } from './pt.js';
 import { ar } from './ar.js';
-/** All shipped locales. Pass `locales[code].messages` to `setI18n` and set `document.dir` from `locales[code].dir`. */
+/**
+ * Every shipped locale with its catalog, for a language picker. Importing it bundles all eight
+ * catalogs: an app with a fixed locale imports that catalog by name instead (`import { fr } from
+ * 'entasis/i18n'`) and passes it to `<I18n catalogs={{ fr }}>` or `setI18n`.
+ */
 export const locales = {
     en: { name: 'English', dir: 'ltr', messages: en },
     es: { name: 'Español', dir: 'ltr', messages: es },
@@ -17,7 +21,7 @@ export const locales = {
     'pt-BR': { name: 'Português (Brasil)', dir: 'ltr', messages: pt },
     ar: { name: 'العربية', dir: 'rtl', messages: ar }
 };
-export const localeList = Object.entries(locales).map(([code, meta]) => ({
+export const localeList = /* @__PURE__ */ Object.entries(locales).map(([code, meta]) => ({
     code: code,
     ...meta
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "entasis",
-	"version": "0.13.1",
+	"version": "0.13.2",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -150,7 +150,7 @@
 		"lightgallery": "^3.0.0",
 		"melt": "^0.44.0",
 		"runed": "^0.37.1",
-		"svelte-streamdown": "^4.2.1",
+		"svelte-streamdown": "^5.0.0",
 		"svelte-themes": "^2.0.10",
 		"valibot": "^1.5.0"
 	},