@orcestr/ui 0.1.0 → 0.2.0

package/dist/example/ExampleThemePlayground.d.ts

@@ -32,17 +32,17 @@ export declare const themePlaygroundPresets: readonly [{
     readonly previewText: "#f4f6f8";
     readonly group: "dark";
 }, {
-    readonly id: "operations-dark";
+    readonly id: "deliveries-dark";
     readonly label: {
-        readonly ru: "Operations";
-        readonly en: "Operations";
+        readonly ru: "Deliveries";
+        readonly en: "Deliveries";
     };
     readonly description: {
         readonly ru: "Плотная тема для повторяющейся операционной работы.";
-        readonly en: "Dense theme for repeated operational work.";
+        readonly en: "Dense theme for deliveries workflows.";
     };
     readonly mode: "dark";
-    readonly surface: "operations";
+    readonly surface: "deliveries";
     readonly accent: "#34d399";
     readonly previewBg: "#07140f";
     readonly previewPanel: "#0d2119";
@@ -159,24 +159,24 @@ export declare const themePlaygroundPresets: readonly [{
                 readonly surface: "#122f3a";
             };
         };
-        readonly radii: {
+        readonly radius: {
             readonly md: "5px";
             readonly lg: "7px";
             readonly xl: "10px";
         };
     };
 }, {
-    readonly id: "media-dark";
+    readonly id: "beauty-dark";
     readonly label: {
-        readonly ru: "Media dark";
-        readonly en: "Media dark";
+        readonly ru: "Beauty dark";
+        readonly en: "Beauty dark";
     };
     readonly description: {
         readonly ru: "Мягкая темная тема для контентных интерфейсов.";
         readonly en: "Soft dark theme for content-heavy interfaces.";
     };
     readonly mode: "dark";
-    readonly surface: "media";
+    readonly surface: "beauty";
     readonly accent: "#f0a6d8";
     readonly previewBg: "#141116";
     readonly previewPanel: "#1d1820";
@@ -204,17 +204,17 @@ export declare const themePlaygroundPresets: readonly [{
         };
     };
 }, {
-    readonly id: "catalog-dark";
+    readonly id: "jewelry-dark";
     readonly label: {
-        readonly ru: "Catalog dark";
-        readonly en: "Catalog dark";
+        readonly ru: "Jewelry dark";
+        readonly en: "Jewelry dark";
     };
     readonly description: {
         readonly ru: "Точная темная тема для структурированных каталогов.";
         readonly en: "Precise dark theme for structured index surfaces.";
     };
     readonly mode: "dark";
-    readonly surface: "catalog";
+    readonly surface: "jewelry";
     readonly accent: "#e6c26a";
     readonly previewBg: "#11100d";
     readonly previewPanel: "#191712";
@@ -276,17 +276,17 @@ export declare const themePlaygroundPresets: readonly [{
     readonly previewText: "#111827";
     readonly group: "light";
 }, {
-    readonly id: "operations-light";
+    readonly id: "deliveries-light";
     readonly label: {
-        readonly ru: "Operations light";
-        readonly en: "Operations light";
+        readonly ru: "Deliveries light";
+        readonly en: "Deliveries light";
     };
     readonly description: {
         readonly ru: "Плотная светлая тема для повторяющейся операционной работы.";
         readonly en: "Dense light theme for repeated operational work.";
     };
     readonly mode: "light";
-    readonly surface: "operations";
+    readonly surface: "deliveries";
     readonly accent: "#047857";
     readonly previewBg: "#eefbf4";
     readonly previewPanel: "#ffffff";
@@ -308,17 +308,17 @@ export declare const themePlaygroundPresets: readonly [{
         };
     };
 }, {
-    readonly id: "media-light";
+    readonly id: "beauty-light";
     readonly label: {
-        readonly ru: "Media light";
-        readonly en: "Media light";
+        readonly ru: "Beauty light";
+        readonly en: "Beauty light";
     };
     readonly description: {
         readonly ru: "Мягкая светлая тема для контентных интерфейсов.";
         readonly en: "Soft light theme for content-heavy interfaces.";
     };
     readonly mode: "light";
-    readonly surface: "media";
+    readonly surface: "beauty";
     readonly accent: "#db2777";
     readonly previewBg: "#fff1f8";
     readonly previewPanel: "#ffffff";
@@ -340,17 +340,17 @@ export declare const themePlaygroundPresets: readonly [{
         };
     };
 }, {
-    readonly id: "catalog-light";
+    readonly id: "jewelry-light";
     readonly label: {
-        readonly ru: "Catalog light";
-        readonly en: "Catalog light";
+        readonly ru: "Jewelry light";
+        readonly en: "Jewelry light";
     };
     readonly description: {
         readonly ru: "Теплая светлая тема для структурированных каталогов.";
         readonly en: "Warm light theme for structured index surfaces.";
     };
     readonly mode: "light";
-    readonly surface: "catalog";
+    readonly surface: "jewelry";
     readonly accent: "#9b6f12";
     readonly previewBg: "#fbfaf6";
     readonly previewPanel: "#ffffff";

package/dist/example/ExampleThemePlayground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleThemePlayground.d.ts","sourceRoot":"","sources":["../../src/example/ExampleThemePlayground.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAC,MAAM,OAAO,CAAC;AAElG,OAAO,EAOH,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EAExB,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AAEZ,KAAK,aAAa,GAAG,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,aAAa,CAAC;IACrB,WAAW,EAAE,aAAa,CAAC;IAC3B,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyaY,CAAC;AAOhD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAE1E,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,aAAa,GAAG,WAAW,CAEvE;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,UAE5E;AAED,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,UAElF;AA0FD,wBAAgB,sBAAsB,CAAC,EACnC,cAAc,EACd,KAAK,EACL,MAAM,EACN,cAAc,EACd,sBAAsB,GACzB,EAAE;IACC,cAAc,EAAE,aAAa,CAAC;IAC9B,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,sBAAsB,EAAE,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC;CAC3E,2CAwFA;AAED,wBAAgB,mBAAmB,CAAC,EAChC,cAAc,EACd,MAAM,EACN,cAAc,GACjB,EAAE;IACC,cAAc,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE,eAAe,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACjD,2CAkDA;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,WAAW,GAMlD,aAAa,CACrB"}
+{"version":3,"file":"ExampleThemePlayground.d.ts","sourceRoot":"","sources":["../../src/example/ExampleThemePlayground.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAEpG,OAAO,EAOH,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EAExB,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AAEZ,KAAK,aAAa,GAAG,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,aAAa,CAAC;IACrB,WAAW,EAAE,aAAa,CAAC;IAC3B,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyaY,CAAC;AAOhD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAE1E,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,aAAa,GAAG,WAAW,CAEvE;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,UAE5E;AAED,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,UAElF;AA0GD,wBAAgB,sBAAsB,CAAC,EACnC,cAAc,EACd,KAAK,EACL,MAAM,EACN,cAAc,EACd,sBAAsB,GACzB,EAAE;IACC,cAAc,EAAE,aAAa,CAAC;IAC9B,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,sBAAsB,EAAE,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC;CAC3E,2CAwFA;AAED,wBAAgB,mBAAmB,CAAC,EAChC,cAAc,EACd,MAAM,EACN,cAAc,GACjB,EAAE;IACC,cAAc,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE,eAAe,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACjD,2CAoDA;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,WAAW,GAMlD,aAAa,CACrB"}

package/dist/example/ExampleThemePlayground.js

@@ -22,17 +22,17 @@ export const themePlaygroundPresets = [
         group: 'dark',
     },
     {
-        id: 'operations-dark',
+        id: 'deliveries-dark',
         label: {
-            ru: 'Operations',
-            en: 'Operations',
+            ru: 'Deliveries',
+            en: 'Deliveries',
         },
         description: {
             ru: 'Плотная тема для повторяющейся операционной работы.',
-            en: 'Dense theme for repeated operational work.',
+            en: 'Dense theme for deliveries workflows.',
         },
         mode: 'dark',
-        surface: 'operations',
+        surface: 'deliveries',
         accent: '#34d399',
         previewBg: '#07140f',
         previewPanel: '#0d2119',
@@ -151,7 +151,7 @@ export const themePlaygroundPresets = [
                     surface: '#122f3a',
                 },
             },
-            radii: {
+            radius: {
                 md: '5px',
                 lg: '7px',
                 xl: '10px',
@@ -159,17 +159,17 @@ export const themePlaygroundPresets = [
         },
     },
     {
-        id: 'media-dark',
+        id: 'beauty-dark',
         label: {
-            ru: 'Media dark',
-            en: 'Media dark',
+            ru: 'Beauty dark',
+            en: 'Beauty dark',
         },
         description: {
             ru: 'Мягкая темная тема для контентных интерфейсов.',
             en: 'Soft dark theme for content-heavy interfaces.',
         },
         mode: 'dark',
-        surface: 'media',
+        surface: 'beauty',
         accent: '#f0a6d8',
         previewBg: '#141116',
         previewPanel: '#1d1820',
@@ -198,17 +198,17 @@ export const themePlaygroundPresets = [
         },
     },
     {
-        id: 'catalog-dark',
+        id: 'jewelry-dark',
         label: {
-            ru: 'Catalog dark',
-            en: 'Catalog dark',
+            ru: 'Jewelry dark',
+            en: 'Jewelry dark',
         },
         description: {
             ru: 'Точная темная тема для структурированных каталогов.',
             en: 'Precise dark theme for structured index surfaces.',
         },
         mode: 'dark',
-        surface: 'catalog',
+        surface: 'jewelry',
         accent: '#e6c26a',
         previewBg: '#11100d',
         previewPanel: '#191712',
@@ -273,17 +273,17 @@ export const themePlaygroundPresets = [
         group: 'light',
     },
     {
-        id: 'operations-light',
+        id: 'deliveries-light',
         label: {
-            ru: 'Operations light',
-            en: 'Operations light',
+            ru: 'Deliveries light',
+            en: 'Deliveries light',
         },
         description: {
             ru: 'Плотная светлая тема для повторяющейся операционной работы.',
             en: 'Dense light theme for repeated operational work.',
         },
         mode: 'light',
-        surface: 'operations',
+        surface: 'deliveries',
         accent: '#047857',
         previewBg: '#eefbf4',
         previewPanel: '#ffffff',
@@ -306,17 +306,17 @@ export const themePlaygroundPresets = [
         },
     },
     {
-        id: 'media-light',
+        id: 'beauty-light',
         label: {
-            ru: 'Media light',
-            en: 'Media light',
+            ru: 'Beauty light',
+            en: 'Beauty light',
         },
         description: {
             ru: 'Мягкая светлая тема для контентных интерфейсов.',
             en: 'Soft light theme for content-heavy interfaces.',
         },
         mode: 'light',
-        surface: 'media',
+        surface: 'beauty',
         accent: '#db2777',
         previewBg: '#fff1f8',
         previewPanel: '#ffffff',
@@ -339,17 +339,17 @@ export const themePlaygroundPresets = [
         },
     },
     {
-        id: 'catalog-light',
+        id: 'jewelry-light',
         label: {
-            ru: 'Catalog light',
-            en: 'Catalog light',
+            ru: 'Jewelry light',
+            en: 'Jewelry light',
         },
         description: {
             ru: 'Теплая светлая тема для структурированных каталогов.',
             en: 'Warm light theme for structured index surfaces.',
         },
         mode: 'light',
-        surface: 'catalog',
+        surface: 'jewelry',
         accent: '#9b6f12',
         previewBg: '#fbfaf6',
         previewPanel: '#ffffff',
@@ -443,19 +443,28 @@ export function themePresetDescription(preset, locale) {
 }
 const flatTokenSections = [
     'colors',
-    'radii',
+    'radius',
     'spacing',
     'breakpoints',
     'shadows',
-    'typography',
+    'text',
     'motion',
     'toast',
+    'scrollbar',
     'states',
     'density',
     'zIndex',
     'components',
 ];
-const statusKeys = ['neutral', 'primary', 'secondary', 'success', 'warning', 'danger', 'info'];
+const statusKeys = [
+    'neutral',
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'info',
+];
 const COLOR_TOKEN_COMMIT_DELAY_MS = 180;
 const themePlaygroundCopy = {
     ru: {
@@ -471,13 +480,14 @@ const themePlaygroundCopy = {
         statuses: 'Статусы',
         tokenSections: {
             colors: 'Цвета',
-            radii: 'Радиусы',
+            radius: 'Радиус',
             spacing: 'Отступы',
             breakpoints: 'Брейкпоинты',
             shadows: 'Тени',
-            typography: 'Типографика',
+            text: 'Текст',
             motion: 'Движение',
             toast: 'Toast',
+            scrollbar: 'Scrollbar',
             states: 'Состояния',
             density: 'Плотность',
             zIndex: 'Z-index',
@@ -497,13 +507,14 @@ const themePlaygroundCopy = {
         statuses: 'Statuses',
         tokenSections: {
             colors: 'Colors',
-            radii: 'Radii',
+            radius: 'Radius',
             spacing: 'Spacing',
             breakpoints: 'Breakpoints',
             shadows: 'Shadows',
-            typography: 'Typography',
+            text: 'Text',
             motion: 'Motion',
             toast: 'Toast',
+            scrollbar: 'Scrollbar',
             states: 'States',
             density: 'Density',
             zIndex: 'Z-index',
@@ -514,7 +525,7 @@ const themePlaygroundCopy = {
 export function ExampleThemePlayground({ activePresetId, theme, locale, onPresetChange, onThemeOverridesChange, }) {
     const activePreset = getThemePlaygroundPreset(activePresetId);
     const copy = themePlaygroundCopy[locale];
-    return (_jsxs("section", { id: 'theme', className: 'oui-section oui-ui-section', children: [_jsx("div", { className: 'oui-ui-section-head', children: _jsxs("div", { children: [_jsx("h2", { className: 'oui-ui-section-title', children: copy.title }), _jsx("p", { className: 'oui-ui-description', children: copy.description })] }) }), _jsxs("div", { className: 'oui-theme-playground', children: [_jsx(Stack, { className: 'oui-theme-playground-presets', g: 2, children: _jsx(ThemePresetSelector, { activePresetId: activePreset.id, locale: locale, onPresetChange: onPresetChange }) }), _jsxs("div", { className: 'oui-section oui-theme-preview', children: [_jsxs("div", { className: 'oui-theme-preview-head', children: [_jsx(Text, { fw: 760, children: copy.tokenEditor }), _jsx(Button, { size: 1, v: 'surface', onClick: () => onPresetChange(activePreset), children: copy.resetPreset })] }), _jsxs(ScrollArea, { className: 'oui-theme-preview-scroll', highlights: true, highlightColor: 'var(--oui-section-nested-solid-bg)', highlightTop: {
+    return (_jsxs("section", { id: "theme", className: "oui-section oui-ui-section", children: [_jsx("div", { className: "oui-ui-section-head", children: _jsxs("div", { children: [_jsx("h2", { className: "oui-ui-section-title", children: copy.title }), _jsx("p", { className: "oui-ui-description", children: copy.description })] }) }), _jsxs("div", { className: "oui-theme-playground", children: [_jsx(Stack, { className: "oui-theme-playground-presets", g: 2, children: _jsx(ThemePresetSelector, { activePresetId: activePreset.id, locale: locale, onPresetChange: onPresetChange }) }), _jsxs("div", { className: "oui-section oui-theme-preview", children: [_jsxs("div", { className: "oui-theme-preview-head", children: [_jsx(Text, { fw: 760, children: copy.tokenEditor }), _jsx(Button, { size: 1, v: "surface", onClick: () => onPresetChange(activePreset), children: copy.resetPreset })] }), _jsxs(ScrollArea, { className: "oui-theme-preview-scroll", highlights: true, highlightColor: "var(--oui-section-nested-solid-bg)", highlightTop: {
                                     start: 2,
                                     fadeDistance: 28,
                                     maxOpacity: 0.94,
@@ -522,10 +533,10 @@ export function ExampleThemePlayground({ activePresetId, theme, locale, onPreset
                                     start: 2,
                                     fadeDistance: 28,
                                     maxOpacity: 0.94,
-                                }, children: [_jsxs("div", { className: 'oui-theme-token-editor', children: [flatTokenSections.map((section) => (_jsx(TokenSection, { title: tokenSectionLabel(section, locale), section: section, values: tokenSectionValues(theme, section), onTokenChange: (key, value) => updateFlatToken(onThemeOverridesChange, section, key, value) }, section))), statusKeys.map((statusKey) => (_jsx(TokenSection, { title: `${copy.statuses} / ${statusKey}`, section: 'status', statusKey: statusKey, values: theme.status[statusKey], onTokenChange: (key, value) => updateStatusToken(onThemeOverridesChange, statusKey, key, String(value)) }, `status-${statusKey}`)))] }), _jsxs(Flex, { g: 2, wrap: true, children: [_jsx(Button, { size: 1, children: copy.primaryAction }), _jsx(Button, { size: 1, v: 'surface', children: copy.surface }), _jsx(Button, { size: 1, v: 'ghost', children: copy.secondary }), _jsx(Badge, { tone: 'success', children: copy.ready }), _jsx(Badge, { tone: 'warning', children: copy.warning })] })] })] })] })] }));
+                                }, children: [_jsxs("div", { className: "oui-theme-token-editor", children: [flatTokenSections.map((section) => (_jsx(TokenSection, { title: tokenSectionLabel(section, locale), section: section, values: tokenSectionValues(theme, section), onTokenChange: (key, value) => updateFlatToken(onThemeOverridesChange, section, key, value) }, section))), statusKeys.map((statusKey) => (_jsx(TokenSection, { title: `${copy.statuses} / ${statusKey}`, section: "status", statusKey: statusKey, values: theme.status[statusKey], onTokenChange: (key, value) => updateStatusToken(onThemeOverridesChange, statusKey, key, String(value)) }, `status-${statusKey}`)))] }), _jsxs(Flex, { g: 2, wrap: true, children: [_jsx(Button, { size: 1, children: copy.primaryAction }), _jsx(Button, { size: 1, v: "surface", children: copy.surface }), _jsx(Button, { size: 1, v: "ghost", children: copy.secondary }), _jsx(Badge, { tone: "success", children: copy.ready }), _jsx(Badge, { tone: "warning", children: copy.warning })] })] })] })] })] }));
 }
 export function ThemePresetSelector({ activePresetId, locale, onPresetChange, }) {
-    return (_jsx("div", { className: 'oui-theme-preset-grid', children: themePresetGroups.map((group) => (_jsxs("div", { className: 'oui-theme-preset-group', children: [_jsx("div", { className: 'oui-theme-preset-group-label', children: group.label[locale] }), _jsx(ScrollArea, { className: 'oui-theme-preset-scroll', highlights: true, highlightColor: 'var(--oui-section-solid-bg)', highlightTop: {
+    return (_jsx("div", { className: "oui-theme-preset-grid", children: themePresetGroups.map((group) => (_jsxs("div", { className: "oui-theme-preset-group", children: [_jsx("div", { className: "oui-theme-preset-group-label", children: group.label[locale] }), _jsx(ScrollArea, { className: "oui-theme-preset-scroll", highlights: true, highlightColor: "var(--oui-section-solid-bg)", highlightTop: {
                         start: 1,
                         fadeDistance: 18,
                         maxOpacity: 0.94,
@@ -533,9 +544,9 @@ export function ThemePresetSelector({ activePresetId, locale, onPresetChange, })
                         start: 1,
                         fadeDistance: 18,
                         maxOpacity: 0.94,
-                    }, children: _jsx("div", { className: 'oui-theme-preset-list', children: themePlaygroundPresets
+                    }, children: _jsx("div", { className: "oui-theme-preset-list", children: themePlaygroundPresets
                             .filter((preset) => preset.group === group.key)
-                            .map((preset) => (_jsxs("button", { type: 'button', className: 'oui-theme-preset-card', "data-active": activePresetId === preset.id ? 'true' : undefined, style: themePresetPreviewStyle(preset), onClick: () => onPresetChange(preset), children: [_jsxs("span", { className: 'oui-theme-preset-preview', children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsxs("span", { className: 'oui-theme-preset-body', children: [_jsx("strong", { children: themePresetLabel(preset, locale) }), _jsx("span", { children: themePresetDescription(preset, locale) })] })] }, preset.id))) }) })] }, group.key))) }));
+                            .map((preset) => (_jsxs("button", { type: "button", className: "oui-theme-preset-card", "data-active": activePresetId === preset.id ? 'true' : undefined, style: themePresetPreviewStyle(preset), onClick: () => onPresetChange(preset), children: [_jsxs("span", { className: "oui-theme-preset-preview", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsxs("span", { className: "oui-theme-preset-body", children: [_jsx("strong", { children: themePresetLabel(preset, locale) }), _jsx("span", { children: themePresetDescription(preset, locale) })] })] }, preset.id))) }) })] }, group.key))) }));
 }
 export function themePresetPreviewStyle(preset) {
     return {
@@ -546,7 +557,7 @@ export function themePresetPreviewStyle(preset) {
     };
 }
 function TokenSection({ title, section, statusKey, values, onTokenChange, }) {
-    return (_jsxs("div", { className: 'oui-theme-token-section', children: [_jsx(Text, { fs: '12px', fw: 760, tone: 'muted', children: title }), _jsx("div", { className: 'oui-theme-token-grid', children: Object.entries(values).map(([key, value]) => (_jsx(ThemeTokenControl, { label: readableTokenName(key), path: statusKey ? `${statusKey}.${key}` : key, section: section, value: value, onChange: (next) => onTokenChange(key, next) }, `${title}-${key}`))) })] }));
+    return (_jsxs("div", { className: "oui-theme-token-section", children: [_jsx(Text, { fs: "12px", fw: 760, tone: "muted", children: title }), _jsx("div", { className: "oui-theme-token-grid", children: Object.entries(values).map(([key, value]) => (_jsx(ThemeTokenControl, { label: readableTokenName(key), path: statusKey ? `${statusKey}.${key}` : key, section: section, value: value, onChange: (next) => onTokenChange(key, next) }, `${title}-${key}`))) })] }));
 }
 function ThemeTokenControl({ label, path, section, value, onChange, }) {
     const valueText = String(value);
@@ -568,11 +579,14 @@ function ThemeTokenControl({ label, path, section, value, onChange, }) {
             return;
         onChange(colorDraft);
     };
-    return (_jsxs("div", { className: 'oui-theme-token oui-theme-token-control', children: [_jsx("span", { className: 'oui-theme-token-swatch', style: {
-                    background: visibleColorValue ?? (section === 'colors' || section === 'status'
-                        ? valueText
-                        : 'var(--oui-primary-surface)'),
-                }, children: colorInputValue ? (_jsx("input", { className: 'oui-theme-token-swatch-input', type: 'color', value: visibleColorValue ?? colorInputValue, "aria-label": `${label} color`, onChange: (event) => setColorDraft(event.target.value), onBlur: commitColorDraft })) : null }), _jsxs("span", { className: 'oui-theme-token-text', children: [_jsx(Text, { fs: '12px', fw: 700, children: label }), _jsx(Text, { fs: '11px', tone: 'muted', children: path })] }), _jsx("span", { className: 'oui-theme-token-control-field', children: selectOptions ? (_jsx("select", { value: valueText, "aria-label": label, onChange: (event) => onChange(event.target.value), children: selectOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })) : (_jsx("input", { type: typeof value === 'number' ? 'number' : 'text', value: valueText, "aria-label": label, onChange: (event) => onChange(typeof value === 'number' ? Number(event.target.value) : event.target.value) })) })] }));
+    return (_jsxs("div", { className: "oui-theme-token oui-theme-token-control", children: [_jsx("span", { className: "oui-theme-token-swatch", style: {
+                    background: visibleColorValue ??
+                        (section === 'colors' || section === 'status'
+                            ? valueText
+                            : 'var(--oui-primary-surface)'),
+                }, children: colorInputValue ? (_jsx("input", { className: "oui-theme-token-swatch-input", type: "color", value: visibleColorValue ?? colorInputValue, "aria-label": `${label} color`, onChange: (event) => setColorDraft(event.target.value), onBlur: commitColorDraft })) : null }), _jsxs("span", { className: "oui-theme-token-text", children: [_jsx(Text, { fs: "12px", fw: 700, children: label }), _jsx(Text, { fs: "11px", tone: "muted", children: path })] }), _jsx("span", { className: "oui-theme-token-control-field", children: selectOptions ? (_jsx("select", { value: valueText, "aria-label": label, onChange: (event) => onChange(event.target.value), children: selectOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })) : (_jsx("input", { type: typeof value === 'number' ? 'number' : 'text', value: valueText, "aria-label": label, onChange: (event) => onChange(typeof value === 'number'
+                        ? Number(event.target.value)
+                        : event.target.value) })) })] }));
 }
 function updateFlatToken(updateOverrides, section, key, value) {
     if (section === 'colors' && key.includes('.')) {

package/dist/example/UiExamplePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiExamplePage.d.ts","sourceRoot":"","sources":["../../src/example/UiExamplePage.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAWH,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AA2mBZ,MAAM,MAAM,kBAAkB,GAAG;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EAAE,gBAAgB,EACxB,aAAoB,EACpB,cAAc,GACjB,GAAE,kBAAuB,2CA8CzB"}
+{"version":3,"file":"UiExamplePage.d.ts","sourceRoot":"","sources":["../../src/example/UiExamplePage.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAaH,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AAolBZ,MAAM,MAAM,kBAAkB,GAAG;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EAAE,gBAAgB,EACxB,aAAoB,EACpB,cAAc,GACjB,GAAE,kBAAuB,2CAmDzB"}

package/dist/example/UiExamplePage.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { LuBell, LuBox, LuCalendar, LuCheck, LuClipboardList, LuExternalLink, LuFileText, LuLayoutDashboard, LuMousePointerClick, LuPanelTop, LuRefreshCw, LuSettings, LuTrash2, } from 'react-icons/lu';
-import { AppShell, AppShellContent, AppShellHeader, AppSidebar, OrcestrUiProvider, ScrollArea, useOrcestrTheme, useToast, } from '..';
-import { LayoutSection, TypographySection } from './ExampleBasicsSections';
+import { memo, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { LuBell, LuCheck, LuExternalLink, LuLanguages, LuRefreshCw, LuTrash2, } from 'react-icons/lu';
+import { AppShell, AppShellContent, AppShellHeader, AppSidebar, IconButton, Menu, OrcestrUiProvider, ScrollArea, useOrcestrTheme, useToast, } from '..';
+import { LayoutSection, TextSection } from './ExampleBasicsSections';
 import { ActionsSection } from './ExampleActionsSection';
 import { ApplicationSection } from './ExampleApplicationSection';
 import { FieldsSection } from './ExampleFieldsSection';
@@ -22,6 +22,18 @@ const UI_EXAMPLE_SCROLL_LEAD = 50;
 const UI_EXAMPLE_ACTIVE_PROBE_OFFSET = UI_EXAMPLE_SCROLL_LEAD + 220;
 const UI_EXAMPLE_CLICK_TARGET_TOP_TOLERANCE = 180;
 const UI_EXAMPLE_SCROLL_LOCK_TIMEOUT_MS = 1600;
+const MemoFoundationsSection = memo(FoundationsSection);
+const MemoTextSection = memo(TextSection);
+const MemoIconTextSection = memo(IconTextSection);
+const MemoLayoutSection = memo(LayoutSection);
+const MemoActionsSection = memo(ActionsSection);
+const MemoFieldsSection = memo(FieldsSection);
+const MemoSelectionSection = memo(SelectionSection);
+const MemoStateCardSection = memo(StateCardSection);
+const MemoBadgeSection = memo(BadgeSection);
+const MemoDataSection = memo(DataSection);
+const MemoOverlaysSection = memo(OverlaysSection);
+const MemoApplicationSection = memo(ApplicationSection);
 function scrollUiExampleSection(id, behavior = 'auto') {
     const node = document.getElementById(id);
     const scrollRoot = document.querySelector('.oui-app-shell-content-scroll .oui-scroll-area-viewport');
@@ -38,9 +50,7 @@ function uiExampleSectionScrollTop(node, scrollRoot) {
     const maxTop = scrollRoot
         ? Math.max(0, scrollRoot.scrollHeight - scrollRoot.clientHeight)
         : Number.POSITIVE_INFINITY;
-    const targetTop = scrollRoot
-        ? uiExampleSectionAbsoluteTop(node, scrollRoot)
-        : node.offsetTop;
+    const targetTop = scrollRoot ? uiExampleSectionAbsoluteTop(node, scrollRoot) : node.offsetTop;
     return Math.min(maxTop, Math.max(0, targetTop - UI_EXAMPLE_SCROLL_LEAD));
 }
 function uiExampleSectionAbsoluteTop(node, scrollRoot) {
@@ -79,6 +89,7 @@ function UiExampleContent({ activePresetId, onThemePresetChange, onThemeOverride
         from: '2026-06-01',
         to: '2026-06-26',
     });
+    const openPalette = useCallback(() => setPaletteOpen(true), []);
     useEffect(() => {
         document.documentElement.classList.add('oui-ui-document-lock');
         document.body.classList.add('oui-ui-document-lock');
@@ -173,7 +184,7 @@ function UiExampleContent({ activePresetId, onThemePresetChange, onThemeOverride
             },
         ];
     }, [locale, toast]);
-    return (_jsxs(AppShell, { sidebarOpen: mobileNavOpen, onSidebarOpenChange: setMobileNavOpen, header: _jsx(AppShellHeader, { visibility: 'mobile', sidebarOpen: mobileNavOpen, onSidebarOpenChange: setMobileNavOpen, actions: _jsx(UiExampleHeaderActions, { compact: true, locale: locale, onLocaleChange: onLocaleChange }), children: _jsx(UiExampleHeaderTitle, { locale: locale }) }), sidebar: _jsx(UiExampleSidebar, { onNavigate: () => setMobileNavOpen(false) }), children: [_jsxs("div", { className: 'oui-ui-workspace', children: [_jsx("div", { className: 'oui-ui-workspace-main', children: _jsxs(AppShellContent, { children: [_jsx(ExampleThemePlayground, { activePresetId: activePresetId, theme: theme, locale: locale, onPresetChange: onThemePresetChange, onThemeOverridesChange: onThemeOverridesChange }), _jsx(FoundationsSection, { onOpenCode: setCodeExample }), _jsx(TypographySection, { onOpenCode: setCodeExample }), _jsx(IconTextSection, { onOpenCode: setCodeExample }), _jsx(LayoutSection, { onOpenCode: setCodeExample }), _jsx(ActionsSection, { menuItems: menuItems, onOpenCode: setCodeExample, onOpenPalette: () => setPaletteOpen(true) }), _jsx(FieldsSection, { stepperValue: stepperValue, onStepperValueChange: setStepperValue, dateValue: dateValue, onDateValueChange: setDateValue, dateRange: dateRange, onDateRangeChange: setDateRange, onOpenCode: setCodeExample }), _jsx(SelectionSection, { locale: locale, segment: segment, onSegmentChange: setSegment, selectValue: selectValue, onSelectValueChange: setSelectValue, selectNoChevronValue: selectNoChevronValue, onSelectNoChevronValueChange: setSelectNoChevronValue, selectPlainValue: selectPlainValue, onSelectPlainValueChange: setSelectPlainValue, comboValue: comboValue, onComboValueChange: setComboValue, entityValue: entityValue, onEntityValueChange: setEntityValue, paginatedValue: paginatedValue, onPaginatedValueChange: setPaginatedValue, ownerValues: ownerValues, onOwnerValuesChange: setOwnerValues, radioValue: radioValue, onRadioValueChange: setRadioValue, tabValue: tabValue, onTabValueChange: setTabValue, onOpenCode: setCodeExample, onToast: toast.push }), _jsx(StateCardSection, { onOpenCode: setCodeExample }), _jsx(BadgeSection, { onOpenCode: setCodeExample }), _jsx(DataSection, { onOpenCode: setCodeExample }), _jsx(OverlaysSection, { setModalOpen: setModalOpen, setBlurModalOpen: setBlurModalOpen, setFastModalOpen: setFastModalOpen, setRiseModalOpen: setRiseModalOpen, setSlowModalOpen: setSlowModalOpen, setDangerModalOpen: setDangerModalOpen, onOpenCode: setCodeExample }), _jsx(ApplicationSection, { onOpenCode: setCodeExample })] }) }), _jsx(UiExampleThemeRail, { activePresetId: activePresetId, locale: locale, onThemePresetChange: onThemePresetChange })] }), _jsx(CodePreviewModal, { example: codeExample, onClose: () => setCodeExample(null) }), _jsx(ExampleOverlays, { locale: locale, modalOpen: modalOpen, setModalOpen: setModalOpen, nestedOpen: nestedOpen, setNestedOpen: setNestedOpen, blurModalOpen: blurModalOpen, setBlurModalOpen: setBlurModalOpen, blurNestedOpen: blurNestedOpen, setBlurNestedOpen: setBlurNestedOpen, blurFinalOpen: blurFinalOpen, setBlurFinalOpen: setBlurFinalOpen, fastModalOpen: fastModalOpen, setFastModalOpen: setFastModalOpen, slowModalOpen: slowModalOpen, setSlowModalOpen: setSlowModalOpen, riseModalOpen: riseModalOpen, setRiseModalOpen: setRiseModalOpen, dangerModalOpen: dangerModalOpen, setDangerModalOpen: setDangerModalOpen, paletteOpen: paletteOpen, setPaletteOpen: setPaletteOpen, onToast: toast.push })] }));
+    return (_jsxs(AppShell, { sidebarOpen: mobileNavOpen, onSidebarOpenChange: setMobileNavOpen, header: _jsx(AppShellHeader, { sidebarOpen: mobileNavOpen, onSidebarOpenChange: setMobileNavOpen, navigationVisibility: "mobile", actions: _jsx(UiExampleHeaderActions, { compact: true, locale: locale, onLocaleChange: onLocaleChange }) }), sidebar: _jsx(UiExampleSidebar, { onNavigate: () => setMobileNavOpen(false) }), children: [_jsxs("div", { className: "oui-ui-workspace", children: [_jsx("div", { className: "oui-ui-workspace-main", children: _jsxs(AppShellContent, { children: [_jsx(ExampleThemePlayground, { activePresetId: activePresetId, theme: theme, locale: locale, onPresetChange: onThemePresetChange, onThemeOverridesChange: onThemeOverridesChange }), _jsx(MemoFoundationsSection, { onOpenCode: setCodeExample }), _jsx(MemoTextSection, { onOpenCode: setCodeExample }), _jsx(MemoIconTextSection, { onOpenCode: setCodeExample }), _jsx(MemoLayoutSection, { onOpenCode: setCodeExample }), _jsx(MemoActionsSection, { menuItems: menuItems, onOpenCode: setCodeExample, onOpenPalette: openPalette }), _jsx(MemoFieldsSection, { stepperValue: stepperValue, onStepperValueChange: setStepperValue, dateValue: dateValue, onDateValueChange: setDateValue, dateRange: dateRange, onDateRangeChange: setDateRange, onOpenCode: setCodeExample }), _jsx(MemoSelectionSection, { locale: locale, segment: segment, onSegmentChange: setSegment, selectValue: selectValue, onSelectValueChange: setSelectValue, selectNoChevronValue: selectNoChevronValue, onSelectNoChevronValueChange: setSelectNoChevronValue, selectPlainValue: selectPlainValue, onSelectPlainValueChange: setSelectPlainValue, comboValue: comboValue, onComboValueChange: setComboValue, entityValue: entityValue, onEntityValueChange: setEntityValue, paginatedValue: paginatedValue, onPaginatedValueChange: setPaginatedValue, ownerValues: ownerValues, onOwnerValuesChange: setOwnerValues, radioValue: radioValue, onRadioValueChange: setRadioValue, tabValue: tabValue, onTabValueChange: setTabValue, onOpenCode: setCodeExample, onToast: toast.push }), _jsx(MemoStateCardSection, { onOpenCode: setCodeExample }), _jsx(MemoBadgeSection, { onOpenCode: setCodeExample }), _jsx(MemoDataSection, { onOpenCode: setCodeExample }), _jsx(MemoOverlaysSection, { setModalOpen: setModalOpen, setBlurModalOpen: setBlurModalOpen, setFastModalOpen: setFastModalOpen, setRiseModalOpen: setRiseModalOpen, setSlowModalOpen: setSlowModalOpen, setDangerModalOpen: setDangerModalOpen, onOpenCode: setCodeExample }), _jsx(MemoApplicationSection, { onOpenCode: setCodeExample })] }) }), _jsx(UiExampleThemeRail, { activePresetId: activePresetId, locale: locale, onThemePresetChange: onThemePresetChange })] }), _jsx(CodePreviewModal, { example: codeExample, onClose: () => setCodeExample(null) }), _jsx(ExampleOverlays, { locale: locale, modalOpen: modalOpen, setModalOpen: setModalOpen, nestedOpen: nestedOpen, setNestedOpen: setNestedOpen, blurModalOpen: blurModalOpen, setBlurModalOpen: setBlurModalOpen, blurNestedOpen: blurNestedOpen, setBlurNestedOpen: setBlurNestedOpen, blurFinalOpen: blurFinalOpen, setBlurFinalOpen: setBlurFinalOpen, fastModalOpen: fastModalOpen, setFastModalOpen: setFastModalOpen, slowModalOpen: slowModalOpen, setSlowModalOpen: setSlowModalOpen, riseModalOpen: riseModalOpen, setRiseModalOpen: setRiseModalOpen, dangerModalOpen: dangerModalOpen, setDangerModalOpen: setDangerModalOpen, paletteOpen: paletteOpen, setPaletteOpen: setPaletteOpen, onToast: toast.push })] }));
 }
 function UiExampleThemeRail({ activePresetId, locale, onThemePresetChange, }) {
     const presets = useMemo(() => {
@@ -189,7 +200,7 @@ function UiExampleThemeRail({ activePresetId, locale, onThemePresetChange, }) {
         }
         return next;
     }, []);
-    return (_jsxs("aside", { className: 'oui-ui-theme-rail', "aria-label": 'Theme presets', children: [_jsx("div", { className: 'oui-ui-theme-rail-title', children: "Themes" }), _jsx(ScrollArea, { className: 'oui-ui-theme-rail-scroll', highlights: true, highlightColor: 'var(--oui-ui-theme-rail-highlight-bg)', highlightTop: {
+    return (_jsxs("aside", { className: "oui-ui-theme-rail", "aria-label": "Theme presets", children: [_jsx("div", { className: "oui-ui-theme-rail-title", children: "Themes" }), _jsx(ScrollArea, { className: "oui-ui-theme-rail-scroll", highlights: true, highlightColor: "var(--oui-ui-theme-rail-highlight-bg)", highlightTop: {
                     start: 18,
                     fadeDistance: 90,
                     maxOpacity: 0.94,
@@ -197,7 +208,7 @@ function UiExampleThemeRail({ activePresetId, locale, onThemePresetChange, }) {
                     start: 12,
                     fadeDistance: 90,
                     maxOpacity: 0.94,
-                }, children: _jsx("div", { className: 'oui-ui-theme-rail-list', children: presets.map((preset) => (_jsxs("button", { type: 'button', className: 'oui-ui-theme-rail-item', "data-active": activePresetId === preset.id ? 'true' : undefined, style: themePresetPreviewStyle(preset), onClick: () => onThemePresetChange(preset), children: [_jsxs("span", { className: 'oui-ui-theme-rail-preview', "aria-hidden": true, children: [_jsx("span", {}), _jsx("span", {})] }), _jsx("span", { className: 'oui-ui-theme-rail-name', children: themePresetLabel(preset, locale) })] }, preset.id))) }) })] }));
+                }, children: _jsx("div", { className: "oui-ui-theme-rail-list", children: presets.map((preset) => (_jsxs("button", { type: "button", className: "oui-ui-theme-rail-item", "data-active": activePresetId === preset.id ? 'true' : undefined, style: themePresetPreviewStyle(preset), onClick: () => onThemePresetChange(preset), children: [_jsxs("span", { className: "oui-ui-theme-rail-preview", "aria-hidden": true, children: [_jsx("span", {}), _jsx("span", {})] }), _jsx("span", { className: "oui-ui-theme-rail-name", children: themePresetLabel(preset, locale) })] }, preset.id))) }) })] }));
 }
 function UiExampleSidebar({ onNavigate }) {
     const [activeSection, setActiveSection] = useState('theme');
@@ -206,7 +217,7 @@ function UiExampleSidebar({ onNavigate }) {
     const scrollNavigationReleaseTimerRef = useRef(null);
     const setActiveSectionValue = useCallback((id) => {
         activeSectionRef.current = id;
-        setActiveSection((current) => current === id ? current : id);
+        setActiveSection((current) => (current === id ? current : id));
     }, []);
     const lockScrollNavigationTarget = useCallback((id) => {
         scrollNavigationTargetRef.current = id;
@@ -247,15 +258,13 @@ function UiExampleSidebar({ onNavigate }) {
                 }
                 return;
             }
-            const bottomDistance = scrollRoot.scrollHeight
-                - scrollRoot.clientHeight
-                - scrollRoot.scrollTop;
+            const bottomDistance = scrollRoot.scrollHeight - scrollRoot.clientHeight - scrollRoot.scrollTop;
             const top = scrollRoot.scrollTop + UI_EXAMPLE_ACTIVE_PROBE_OFFSET;
             const next = bottomDistance <= 2
                 ? nodes.at(-1)?.id
-                : nodes
+                : (nodes
                     .filter((node) => uiExampleSectionAbsoluteTop(node, scrollRoot) <= top)
-                    .at(-1)?.id ?? nodes[0]?.id;
+                    .at(-1)?.id ?? nodes[0]?.id);
             if (next && next !== activeSectionRef.current)
                 setActiveSectionValue(next);
         };
@@ -287,53 +296,31 @@ function UiExampleSidebar({ onNavigate }) {
         items: group.items.map((item) => ({
             key: item.id,
             label: item.label,
-            icon: uiExampleNavIcon(item.id),
             active: activeSection === item.id,
             onSelect: () => navigateToSection(item.id),
         })),
     })), [activeSection, navigateToSection]);
-    return (_jsx(AppSidebar, { className: 'oui-ui-main-sidebar', header: _jsx(UiExampleBrand, {}), itemH: 34, groups: sidebarNavGroups, footer: (_jsxs("button", { type: 'button', className: 'oui-ui-sidebar-footer-action', onClick: () => navigateToSection('app-shell-example'), children: [_jsx(LuSettings, { size: 15, "aria-hidden": true }), _jsx("span", { children: "Application components" })] })) }));
-}
-function UiExampleHeaderTitle({ locale }) {
-    const title = locale === 'ru'
-        ? 'Единый язык компонентов для всех модулей.'
-        : 'One component language for every module.';
-    const subtitle = locale === 'ru'
-        ? 'Одна тема, предсказуемый интерфейс.'
-        : 'One theme, predictable interface.';
-    return (_jsxs("div", { className: 'oui-ui-header-title', children: [_jsx("strong", { children: title }), _jsx("span", { children: subtitle })] }));
-}
-function uiExampleNavIcon(id) {
-    const size = 16;
-    if (id === 'theme')
-        return _jsx(LuSettings, { size: size });
-    if (id === 'foundations')
-        return _jsx(LuLayoutDashboard, { size: size });
-    if (id === 'buttons-example')
-        return _jsx(LuMousePointerClick, { size: size });
-    if (id === 'text-fields-example')
-        return _jsx(LuFileText, { size: size });
-    if (id === 'selects-example')
-        return _jsx(LuCheck, { size: size });
-    if (id === 'data-table-example')
-        return _jsx(LuClipboardList, { size: size });
-    if (id === 'toast-example')
-        return _jsx(LuBell, { size: size });
-    if (id === 'app-shell-example')
-        return _jsx(LuPanelTop, { size: size });
-    if (id === 'app-sidebar-example')
-        return _jsx(LuLayoutDashboard, { size: size });
-    if (id === 'special-modal-example')
-        return _jsx(LuBox, { size: size });
-    if (id === 'date-range-example')
-        return _jsx(LuCalendar, { size: size });
-    return null;
+    return (_jsx(AppSidebar, { className: "oui-ui-main-sidebar", header: _jsx(UiExampleBrand, {}), itemH: 34, groups: sidebarNavGroups }));
 }
 function UiExampleBrand({ compact = false }) {
-    return (_jsxs("div", { className: 'oui-ui-brand', "data-compact": compact ? 'true' : undefined, children: [_jsx("span", { className: 'oui-ui-brand-mark', "aria-hidden": 'true', children: _jsx("img", { className: 'oui-ui-brand-logo', src: ORCESTR_LOGO_SRC, alt: '' }) }), _jsx("span", { className: 'oui-ui-brand-text', children: _jsx("strong", { children: "Orcestr UI" }) })] }));
+    return (_jsxs("div", { className: "oui-ui-brand", "data-compact": compact ? 'true' : undefined, children: [_jsx("span", { className: "oui-ui-brand-mark", "aria-hidden": "true", children: _jsx("img", { className: "oui-ui-brand-logo", src: ORCESTR_LOGO_SRC, alt: "" }) }), _jsx("span", { className: "oui-ui-brand-text", children: _jsx("strong", { children: "Orcestr UI" }) })] }));
 }
 function UiExampleHeaderActions({ compact = false, locale, onLocaleChange, }) {
-    return (_jsxs("div", { className: 'oui-ui-header-actions', "data-compact": compact ? 'true' : undefined, children: [_jsxs("span", { className: 'oui-ui-language-switch', "aria-label": 'UI example language', children: [_jsx("span", { className: 'oui-ui-language-label', children: locale === 'ru' ? 'Язык' : 'Language' }), ['ru', 'en'].map((item) => (_jsx("button", { type: 'button', className: 'oui-ui-language-option', "data-active": locale === item ? 'true' : undefined, "aria-pressed": locale === item, onClick: () => onLocaleChange(item), children: item.toUpperCase() }, item)))] }), _jsxs("a", { className: 'oui-ui-header-link', href: 'https://github.com/Artasov/orcestr', target: '_blank', rel: 'noreferrer', children: [_jsx(LuExternalLink, { size: 14, "aria-hidden": true }), _jsx("span", { children: "GitHub" })] })] }));
+    const languageItems = useMemo(() => [
+        {
+            key: 'ru',
+            label: 'RU',
+            icon: locale === 'ru' ? _jsx(LuCheck, { size: 14 }) : undefined,
+            onSelect: () => onLocaleChange('ru'),
+        },
+        {
+            key: 'en',
+            label: 'EN',
+            icon: locale === 'en' ? _jsx(LuCheck, { size: 14 }) : undefined,
+            onSelect: () => onLocaleChange('en'),
+        },
+    ], [locale, onLocaleChange]);
+    return (_jsxs("div", { className: "oui-ui-header-actions", "data-compact": compact ? 'true' : undefined, children: [_jsx(Menu, { items: languageItems, trigger: _jsx(IconButton, { className: "oui-ui-language-button", size: 2, v: "pad", icon: _jsx(LuLanguages, { size: 16 }), "aria-label": `Language: ${locale.toUpperCase()}` }) }), _jsxs("a", { className: "oui-ui-header-link", href: "https://github.com/Artasov/orcestr", target: "_blank", rel: "noreferrer", children: [_jsx(LuExternalLink, { size: 14, "aria-hidden": true }), _jsx("span", { children: "GitHub" })] })] }));
 }
 export function UiExamplePage({ locale: controlledLocale, defaultLocale = 'ru', onLocaleChange, } = {}) {
     const firstPreset = getThemePlaygroundPreset('orcestr-dark');