entasis 0.9.3 → 0.10.1

package/dist/generated/componentMcpRegistry.js

@@ -130,6 +130,7 @@ import { themeDescription } from '../components/Theme/theme.mcp.js';
 import { i18nDescription } from '../i18n/i18n.mcp.js';
 import { tailwindPluginDescription } from '../tailwind/index.mcp.js';
 import { themePluginDescription } from '../tailwind/theme.mcp.js';
+import { colorPaletteDescription } from '../tailwind/palette.mcp.js';
 import { typesDescription } from '../types/types.mcp.js';
 import { cvaDescription } from '../utils/cva/cva.mcp.js';
 import { schedulingDescription } from '../utils/scheduling/scheduling.mcp.js';
@@ -269,6 +270,7 @@ export const componentMcpRegistry = {
     i18n: i18nDescription,
     'tailwind-plugin': tailwindPluginDescription,
     'theme-tailwind-plugin': themePluginDescription,
+    'color-palette': colorPaletteDescription,
     types: typesDescription,
     cva: cvaDescription,
     scheduling: schedulingDescription,

package/dist/i18n/ar.js

@@ -134,7 +134,7 @@ export const ar = {
     mapMarker: (label) => `علامة الخريطة ${label}`,
     linkTo: (url) => `رابط إلى ${url}`,
     pageRenderError: (pageNumber) => `تعذّر عرض الصفحة ${pageNumber}`,
-    paginationSummary: (startItem, endItem, totalItems) => `${startItem}-${endItem} من ${totalItems}`,
+    paginationSummary: (startItem, endItem, totalItems) => `${startItem}–${endItem} من ${totalItems}`,
     currentPage: (page) => `صفحة ${page}، الصفحة الحالية`,
     goToPage: (page) => `الانتقال إلى صفحة ${page}`,
     expandPanel: (index) => `توسيع اللوحة ${index}`,

package/dist/i18n/de.js

@@ -134,7 +134,7 @@ export const de = {
     mapMarker: (label) => `Kartenmarkierung ${label}`,
     linkTo: (url) => `Link zu ${url}`,
     pageRenderError: (pageNumber) => `Seite ${pageNumber} konnte nicht gerendert werden`,
-    paginationSummary: (startItem, endItem, totalItems) => `${startItem}-${endItem} von ${totalItems}`,
+    paginationSummary: (startItem, endItem, totalItems) => `${startItem}–${endItem} von ${totalItems}`,
     currentPage: (page) => `Seite ${page}, aktuelle Seite`,
     goToPage: (page) => `Gehe zu Seite ${page}`,
     expandPanel: (index) => `Bereich ${index} erweitern`,

package/dist/i18n/en.js

@@ -142,7 +142,7 @@ export const en = {
     mapMarker: (label) => `Map marker ${label}`,
     linkTo: (url) => `Link to ${url}`,
     pageRenderError: (pageNumber) => `Could not render page ${pageNumber}`,
-    paginationSummary: (startItem, endItem, totalItems) => `${startItem}-${endItem} of ${totalItems}`,
+    paginationSummary: (startItem, endItem, totalItems) => `${startItem}–${endItem} of ${totalItems}`,
     currentPage: (page) => `Page ${page}, current page`,
     goToPage: (page) => `Go to page ${page}`,
     expandPanel: (index) => `Expand panel ${index}`,

package/dist/i18n/es.js

@@ -134,7 +134,7 @@ export const es = {
     mapMarker: (label) => `Marcador del mapa ${label}`,
     linkTo: (url) => `Enlace a ${url}`,
     pageRenderError: (pageNumber) => `No se ha podido representar la página ${pageNumber}`,
-    paginationSummary: (startItem, endItem, totalItems) => `${startItem}-${endItem} de ${totalItems}`,
+    paginationSummary: (startItem, endItem, totalItems) => `${startItem}–${endItem} de ${totalItems}`,
     currentPage: (page) => `Página ${page}, página actual`,
     goToPage: (page) => `Ir a la página ${page}`,
     expandPanel: (index) => `Expandir panel ${index}`,

package/dist/i18n/fr.js

@@ -134,7 +134,7 @@ export const fr = {
     mapMarker: (label) => `Marqueur de carte ${label}`,
     linkTo: (url) => `Lien vers ${url}`,
     pageRenderError: (pageNumber) => `Impossible d'afficher la page ${pageNumber}`,
-    paginationSummary: (startItem, endItem, totalItems) => `${startItem}-${endItem} sur ${totalItems}`,
+    paginationSummary: (startItem, endItem, totalItems) => `${startItem}–${endItem} sur ${totalItems}`,
     currentPage: (page) => `Page ${page}, page actuelle`,
     goToPage: (page) => `Aller à la page ${page}`,
     expandPanel: (index) => `Développer le panneau ${index}`,

package/dist/i18n/pt.js

@@ -134,7 +134,7 @@ export const pt = {
     mapMarker: (label) => `Marcador do mapa ${label}`,
     linkTo: (url) => `Link para ${url}`,
     pageRenderError: (pageNumber) => `Não foi possível renderizar a página ${pageNumber}`,
-    paginationSummary: (startItem, endItem, totalItems) => `${startItem}-${endItem} de ${totalItems}`,
+    paginationSummary: (startItem, endItem, totalItems) => `${startItem}–${endItem} de ${totalItems}`,
     currentPage: (page) => `Página ${page}, página atual`,
     goToPage: (page) => `Ir para a página ${page}`,
     expandPanel: (index) => `Expandir painel ${index}`,

package/dist/i18n/zh.js

@@ -134,7 +134,7 @@ export const zh = {
     mapMarker: (label) => `地图标记 ${label}`,
     linkTo: (url) => `链接到 ${url}`,
     pageRenderError: (pageNumber) => `无法渲染第 ${pageNumber} 页`,
-    paginationSummary: (startItem, endItem, totalItems) => `${startItem}-${endItem}，共 ${totalItems}`,
+    paginationSummary: (startItem, endItem, totalItems) => `${startItem}–${endItem}，共 ${totalItems}`,
     currentPage: (page) => `第 ${page} 页，当前页`,
     goToPage: (page) => `前往第 ${page} 页`,
     expandPanel: (index) => `展开面板 ${index}`,

package/dist/tailwind/colors.d.ts

@@ -326,7 +326,8 @@ type Colors = {
 };
 export declare const variants: readonly ["Light", "Lighter", "Dark", "Muted", "Contrast"];
 export declare const colors: readonly ["primary", "secondary", "danger", "success", "warning", "info", "neutral"];
-type ColorThemeOption = {
+/** Inputs of {@link generateColorPalette}: the seed colours plus mode and tuning options. */
+export type ColorPaletteOptions = {
     saturation?: number;
     luminance?: number;
     colorscheme?: 'dark' | 'light';
@@ -334,7 +335,7 @@ type ColorThemeOption = {
     'state-pressed-opacity'?: number;
     'state-selected-opacity'?: number;
 } & ColorTheme;
-export declare const generateBaseColors: (theme: ColorThemeOption) => {
+export declare const generateBaseColors: (theme: ColorPaletteOptions) => {
     colors: Colors;
     surface: {
         DEFAULT: string;
@@ -344,7 +345,13 @@ export declare const generateBaseColors: (theme: ColorThemeOption) => {
         floating: string | null;
     };
 };
-export declare const generateColorPalette: (opts: ColorThemeOption) => {
+/**
+ * The palette the theme plugin writes for one theme, computed at runtime: every semantic role with
+ * its generated variants, the surface ladder, and the state-layer opacities. `cssVariables` maps
+ * `--color-*` and `--state-*` custom properties to values, ready to set on an element to theme its
+ * subtree (a brand colour chosen at runtime, a preview of a palette).
+ */
+export declare const generateColorPalette: (opts: ColorPaletteOptions) => {
     colorsPalette: {
         primary: {
             DEFAULT: string;

package/dist/tailwind/colors.js

@@ -386,6 +386,12 @@ export const generateBaseColors = (theme) => {
     });
     return { colors: baseColors, surface };
 };
+/**
+ * The palette the theme plugin writes for one theme, computed at runtime: every semantic role with
+ * its generated variants, the surface ladder, and the state-layer opacities. `cssVariables` maps
+ * `--color-*` and `--state-*` custom properties to values, ready to set on an element to theme its
+ * subtree (a brand colour chosen at runtime, a preview of a palette).
+ */
 export const generateColorPalette = (opts) => {
     const { luminance, saturation, colorscheme } = opts;
     const { colors, surface } = generateBaseColors(opts);

package/dist/tailwind/palette.d.ts

@@ -0,0 +1,5 @@
+import { generateColorPalette } from './colors.js';
+export { generateColorPalette };
+export type { ColorPaletteOptions, ColorTheme } from './colors.js';
+/** What {@link generateColorPalette} returns. */
+export type ColorPalette = ReturnType<typeof generateColorPalette>;

package/dist/tailwind/palette.js

@@ -0,0 +1,4 @@
+// The palette generator without the Tailwind plugin around it, so runtime theming does not need
+// `tailwindcss` installed.
+import { generateColorPalette } from './colors.js';
+export { generateColorPalette };

package/dist/tailwind/palette.mcp.d.ts

@@ -0,0 +1 @@
+export declare const colorPaletteDescription = "\n# Color palette\n\n`generateColorPalette` from `entasis/color-palette` computes, at runtime, the palette the theme\nplugin writes for one theme. It takes the same inputs as a `@plugin 'entasis/tailwind-plugin/theme'`\ndeclaration (`primary`, `secondary`, `danger`, `success`, `warning`, `info`, `neutral`,\n`surface`, their `-light`/`-muted`/\u2026 overrides, `colorscheme`, `luminance`, `saturation`\nand the `state-*-opacity` values) and does not import Tailwind.\n\n```svelte\n<script lang=\"ts\">\n\timport { generateColorPalette } from 'entasis/color-palette';\n\n\tlet brand = $state('#0f766e');\n\tconst palette = $derived(\n\t\tgenerateColorPalette({ colorscheme: 'light', primary: brand, surface: '#fafafa', neutral: '#18181b' })\n\t);\n\tconst style = $derived(\n\t\tObject.entries(palette.cssVariables)\n\t\t\t.map(([name, value]) => `${name}: ${value}`)\n\t\t\t.join('; ')\n\t);\n</script>\n\n<div {style}>\n\t<!-- Components in here use the generated palette. -->\n</div>\n```\n\n- `cssVariables` maps `--color-*` and `--state-*` custom properties to values. Setting them on an\n  element themes its subtree, since every utility reads those variables.\n- `colorsPalette` holds the resolved hex colours for each role and variant.\n- Spacing, radius, typography and the state roles stay on `Theme`'s `designTokens`.\n";

package/dist/tailwind/palette.mcp.js

@@ -0,0 +1,34 @@
+export const colorPaletteDescription = `
+# Color palette
+
+\`generateColorPalette\` from \`entasis/color-palette\` computes, at runtime, the palette the theme
+plugin writes for one theme. It takes the same inputs as a \`@plugin 'entasis/tailwind-plugin/theme'\`
+declaration (\`primary\`, \`secondary\`, \`danger\`, \`success\`, \`warning\`, \`info\`, \`neutral\`,
+\`surface\`, their \`-light\`/\`-muted\`/… overrides, \`colorscheme\`, \`luminance\`, \`saturation\`
+and the \`state-*-opacity\` values) and does not import Tailwind.
+
+\`\`\`svelte
+<script lang="ts">
+	import { generateColorPalette } from './palette.ts';
+
+	let brand = $state('#0f766e');
+	const palette = $derived(
+		generateColorPalette({ colorscheme: 'light', primary: brand, surface: '#fafafa', neutral: '#18181b' })
+	);
+	const style = $derived(
+		Object.entries(palette.cssVariables)
+			.map(([name, value]) => \`\${name}: \${value}\`)
+			.join('; ')
+	);
+</script>
+
+<div {style}>
+	<!-- Components in here use the generated palette. -->
+</div>
+\`\`\`
+
+- \`cssVariables\` maps \`--color-*\` and \`--state-*\` custom properties to values. Setting them on an
+  element themes its subtree, since every utility reads those variables.
+- \`colorsPalette\` holds the resolved hex colours for each role and variant.
+- Spacing, radius, typography and the state roles stay on \`Theme\`'s \`designTokens\`.
+`;

package/dist/utils/layers.svelte.js

@@ -5,6 +5,7 @@
 import { on } from 'svelte/events';
 import { getContext, hasContext, setContext, untrack } from 'svelte';
 import { SvelteSet } from 'svelte/reactivity';
+import { Registry } from './registry.svelte.js';
 import { LAYER_Z_BASE, LAYER_Z_STEP } from '../components/Theme/theme.layers.js';
 const LAYER_CONTEXT = Symbol('entasis:layer');
 export class LayerHandle {
@@ -66,14 +67,14 @@ export class LayerHandle {
     };
 }
 export class LayerStack {
-    // Raw (non-proxied) and replaced immutably on every change: handles are class instances
-    // with their own signals, and pushing them through a deep `$state` proxy was observed to
-    // desync the proxy's length from its entries once layers unmount in bulk (entries read
-    // back as `undefined`), which broke every overlay opened afterwards.
-    #layers = $state.raw([]);
+    // A plain registry rather than reactive state read, filtered and written back: see
+    // `Registry`. A teardown in another async batch used to restore an old list and drop every
+    // layer registered meanwhile (after a docs tab switch, dialogs opened with no backdrop and
+    // ignored Escape).
+    #layers = new Registry();
     #seq = 0;
     /** Open layers sorted bottom → top. */
-    open = $derived(this.#layers.filter((layer) => layer.isOpen).sort((a, b) => a.openOrder - b.openOrder));
+    open = $derived(this.#layers.items.filter((layer) => layer.isOpen).sort((a, b) => a.openOrder - b.openOrder));
     topModal = $derived([...this.open].reverse().find((layer) => layer.isModal));
     ofKind(kind) {
         return this.open.filter((layer) => layer.kind === kind);
@@ -99,7 +100,7 @@ export class LayerStack {
     register(options) {
         const handle = new LayerHandle(this, options);
         setContext(LAYER_CONTEXT, handle);
-        this.#layers = [...this.#layers, handle];
+        this.#layers.add(handle);
         $effect(() => {
             if (options.isOpen()) {
                 untrack(() => {
@@ -111,7 +112,7 @@ export class LayerStack {
         return handle;
     }
     remove(handle) {
-        this.#layers = this.#layers.filter((layer) => layer !== handle);
+        this.#layers.delete(handle);
     }
     #onKeyDown = (event) => {
         if (event.key !== 'Escape' || event.defaultPrevented)

package/dist/utils/registry.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A list that components join while they initialise and leave when they are torn down: open
+ * layers, a dialog's nested dialogs, a page's shell overrides.
+ *
+ * The entries live in a plain array mutated in place. Reading a reactive array, filtering it and
+ * writing it back is not safe for this: under Svelte's async mode a component torn down in one
+ * batch can read state another batch has written as it was before, so a teardown's
+ * `list = list.filter(...)` restores the old list and drops every entry added meanwhile. A deep
+ * `$state` proxy has its own trouble: it wraps stored objects, so identity checks against the
+ * original miss. Each change writes a fresh token instead, which no stale read can equal, and
+ * `items` re-reads the array whenever the token moves.
+ */
+export declare class Registry<T> {
+    #private;
+    /** The entries in the order they joined. Reading it subscribes to every change. */
+    get items(): readonly T[];
+    /** Adds an entry and returns the function that removes it, safe to call more than once. */
+    add(entry: T): () => void;
+    delete(entry: T): void;
+    clear(): void;
+}

package/dist/utils/registry.svelte.js

@@ -0,0 +1,49 @@
+/**
+ * A list that components join while they initialise and leave when they are torn down: open
+ * layers, a dialog's nested dialogs, a page's shell overrides.
+ *
+ * The entries live in a plain array mutated in place. Reading a reactive array, filtering it and
+ * writing it back is not safe for this: under Svelte's async mode a component torn down in one
+ * batch can read state another batch has written as it was before, so a teardown's
+ * `list = list.filter(...)` restores the old list and drops every entry added meanwhile. A deep
+ * `$state` proxy has its own trouble: it wraps stored objects, so identity checks against the
+ * original miss. Each change writes a fresh token instead, which no stale read can equal, and
+ * `items` re-reads the array whenever the token moves.
+ */
+export class Registry {
+    #entries = [];
+    #changed = $state.raw({});
+    #items = $derived.by(() => {
+        void this.#changed;
+        return [...this.#entries];
+    });
+    /** The entries in the order they joined. Reading it subscribes to every change. */
+    get items() {
+        return this.#items;
+    }
+    /** Adds an entry and returns the function that removes it, safe to call more than once. */
+    add(entry) {
+        this.#entries.push(entry);
+        this.#changed = {};
+        let present = true;
+        return () => {
+            if (!present)
+                return;
+            present = false;
+            this.delete(entry);
+        };
+    }
+    delete(entry) {
+        const index = this.#entries.indexOf(entry);
+        if (index < 0)
+            return;
+        this.#entries.splice(index, 1);
+        this.#changed = {};
+    }
+    clear() {
+        if (this.#entries.length === 0)
+            return;
+        this.#entries.length = 0;
+        this.#changed = {};
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "entasis",
-	"version": "0.9.3",
+	"version": "0.10.1",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -804,6 +804,10 @@
 			"types": "./dist/tailwind/theme.d.ts",
 			"default": "./dist/tailwind/theme.js"
 		},
+		"./color-palette": {
+			"types": "./dist/tailwind/palette.d.ts",
+			"default": "./dist/tailwind/palette.js"
+		},
 		"./types": {
 			"types": "./dist/types/index.d.ts",
 			"default": "./dist/types/index.js"
@@ -1225,6 +1229,9 @@
 			"tailwind-plugin/theme": [
 				"dist/tailwind/theme.d.ts"
 			],
+			"color-palette": [
+				"dist/tailwind/palette.d.ts"
+			],
 			"types": [
 				"dist/types/index.d.ts"
 			],