@orcestr/ui 0.0.1 → 0.0.3

package/README.md

@@ -10,6 +10,10 @@
 
 # Orcestr UI
 
+## [Demo](https://orcestr.com/ui)
+
+Open the live example page to inspect Orcestr UI components and patterns in context.
+
 Shared React UI foundation for Orcestr products.
 
 Orcestr UI is a public component library extracted from real Orcestr product work. It collects the interface primitives we reuse across product surfaces: app shell patterns, dense operational controls, workflow states, overlays, form fields, data views, design tokens and theme infrastructure.

package/README.ru.md

@@ -10,6 +10,10 @@
 
 # Orcestr UI
 
+## [Demo](https://orcestr.com/ui)
+
+Открой live example page, чтобы посмотреть компоненты и паттерны Orcestr UI в контексте.
+
 Общая React UI-основа для продуктов Orcestr.
 
 Orcestr UI - публичная библиотека компонентов, выделенная из реальной продуктовой разработки Orcestr. Здесь собираются интерфейсные примитивы, которые переиспользуются в product surfaces: application shell, плотные операционные контролы, workflow-состояния, overlays, поля, data views, design tokens и инфраструктура темы.

package/dist/example/ExampleThemePlayground.d.ts

@@ -165,25 +165,25 @@ export declare const themePlaygroundPresets: readonly [{
     };
     readonly mode: "dark";
     readonly surface: "media";
-    readonly accent: "#fb7185";
-    readonly previewBg: "#120d0e";
-    readonly previewPanel: "#2a1222";
-    readonly previewText: "#fff0f6";
+    readonly accent: "#f0a6d8";
+    readonly previewBg: "#141116";
+    readonly previewPanel: "#1d1820";
+    readonly previewText: "#f7eef7";
     readonly group: "dark";
     readonly overrides: {
         readonly colors: {
-            readonly bg: "#120d0e";
-            readonly panel: "#2a1222";
-            readonly panelSoft: "#3a1830";
-            readonly floating: "#2a1222";
-            readonly brand: "#fb7185";
-            readonly brandStrong: "#fda4af";
-            readonly brandSolid: "#be123c";
-            readonly brandSolidHover: "#e11d48";
-            readonly brandSoft: "rgb(251 113 133 / 18%)";
-            readonly selected: "rgb(251 113 133 / 15%)";
+            readonly bg: "#141116";
+            readonly panel: "#1d1820";
+            readonly panelSoft: "#29212d";
+            readonly floating: "#1d1820";
+            readonly brand: "#f0a6d8";
+            readonly brandStrong: "#ffc1e7";
+            readonly brandSolid: "#a84486";
+            readonly brandSolidHover: "#bc5399";
+            readonly brandSoft: "rgb(240 166 216 / 17%)";
+            readonly selected: "rgb(240 166 216 / 16%)";
             readonly warning: "#fbbf24";
-            readonly warningSoft: "#4a2f0b";
+            readonly warningSoft: "#49371c";
         };
     };
 }, {
@@ -215,23 +215,23 @@ export declare const themePlaygroundPresets: readonly [{
     };
     readonly mode: "dark";
     readonly surface: "orcestr";
-    readonly accent: "#a78bfa";
-    readonly previewBg: "#09091f";
-    readonly previewPanel: "#121234";
-    readonly previewText: "#edf5ff";
+    readonly accent: "#7dd3fc";
+    readonly previewBg: "#080f1c";
+    readonly previewPanel: "#101a2b";
+    readonly previewText: "#e9f3ff";
     readonly group: "dark";
     readonly overrides: {
         readonly colors: {
-            readonly bg: "#09091f";
-            readonly panel: "#121234";
-            readonly panelSoft: "#1b1b4a";
-            readonly floating: "#121234";
-            readonly brand: "#a78bfa";
-            readonly brandStrong: "#c4b5fd";
-            readonly brandSolid: "#7c3aed";
-            readonly brandSolidHover: "#8b5cf6";
-            readonly brandSoft: "rgb(167 139 250 / 17%)";
-            readonly selected: "rgb(167 139 250 / 14%)";
+            readonly bg: "#080f1c";
+            readonly panel: "#101a2b";
+            readonly panelSoft: "#172338";
+            readonly floating: "#101a2b";
+            readonly brand: "#7dd3fc";
+            readonly brandStrong: "#bae6fd";
+            readonly brandSolid: "#0369a1";
+            readonly brandSolidHover: "#0284c7";
+            readonly brandSoft: "rgb(125 211 252 / 16%)";
+            readonly selected: "rgb(125 211 252 / 13%)";
             readonly info: "#22d3ee";
             readonly infoSoft: "#083344";
         };

package/dist/example/ExampleThemePlayground.js

@@ -158,25 +158,25 @@ export const themePlaygroundPresets = [
         },
         mode: 'dark',
         surface: 'media',
-        accent: '#fb7185',
-        previewBg: '#120d0e',
-        previewPanel: '#2a1222',
-        previewText: '#fff0f6',
+        accent: '#f0a6d8',
+        previewBg: '#141116',
+        previewPanel: '#1d1820',
+        previewText: '#f7eef7',
         group: 'dark',
         overrides: {
             colors: {
-                bg: '#120d0e',
-                panel: '#2a1222',
-                panelSoft: '#3a1830',
-                floating: '#2a1222',
-                brand: '#fb7185',
-                brandStrong: '#fda4af',
-                brandSolid: '#be123c',
-                brandSolidHover: '#e11d48',
-                brandSoft: 'rgb(251 113 133 / 18%)',
-                selected: 'rgb(251 113 133 / 15%)',
+                bg: '#141116',
+                panel: '#1d1820',
+                panelSoft: '#29212d',
+                floating: '#1d1820',
+                brand: '#f0a6d8',
+                brandStrong: '#ffc1e7',
+                brandSolid: '#a84486',
+                brandSolidHover: '#bc5399',
+                brandSoft: 'rgb(240 166 216 / 17%)',
+                selected: 'rgb(240 166 216 / 16%)',
                 warning: '#fbbf24',
-                warningSoft: '#4a2f0b',
+                warningSoft: '#49371c',
             },
         },
     },
@@ -210,23 +210,23 @@ export const themePlaygroundPresets = [
         },
         mode: 'dark',
         surface: 'orcestr',
-        accent: '#a78bfa',
-        previewBg: '#09091f',
-        previewPanel: '#121234',
-        previewText: '#edf5ff',
+        accent: '#7dd3fc',
+        previewBg: '#080f1c',
+        previewPanel: '#101a2b',
+        previewText: '#e9f3ff',
         group: 'dark',
         overrides: {
             colors: {
-                bg: '#09091f',
-                panel: '#121234',
-                panelSoft: '#1b1b4a',
-                floating: '#121234',
-                brand: '#a78bfa',
-                brandStrong: '#c4b5fd',
-                brandSolid: '#7c3aed',
-                brandSolidHover: '#8b5cf6',
-                brandSoft: 'rgb(167 139 250 / 17%)',
-                selected: 'rgb(167 139 250 / 14%)',
+                bg: '#080f1c',
+                panel: '#101a2b',
+                panelSoft: '#172338',
+                floating: '#101a2b',
+                brand: '#7dd3fc',
+                brandStrong: '#bae6fd',
+                brandSolid: '#0369a1',
+                brandSolidHover: '#0284c7',
+                brandSoft: 'rgb(125 211 252 / 16%)',
+                selected: 'rgb(125 211 252 / 13%)',
                 info: '#22d3ee',
                 infoSoft: '#083344',
             },

package/dist/example/UiExamplePage.d.ts

@@ -1,2 +1,8 @@
-export declare function UiExamplePage(): import("react/jsx-runtime").JSX.Element;
+import { type OrcestrUiLocale } from '..';
+export type UiExamplePageProps = {
+    locale?: OrcestrUiLocale;
+    defaultLocale?: OrcestrUiLocale;
+    onLocaleChange?: (locale: OrcestrUiLocale) => void;
+};
+export declare function UiExamplePage({ locale: controlledLocale, defaultLocale, onLocaleChange, }?: UiExamplePageProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=UiExamplePage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UiExamplePage.d.ts","sourceRoot":"","sources":["../../src/example/UiExamplePage.tsx"],"names":[],"mappings":"AAwmBA,wBAAgB,aAAa,4CAmC5B"}
+{"version":3,"file":"UiExamplePage.d.ts","sourceRoot":"","sources":["../../src/example/UiExamplePage.tsx"],"names":[],"mappings":"AAWA,OAAO,EAYH,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AA4lBZ,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"}

package/dist/example/UiExamplePage.js

@@ -18,23 +18,34 @@ import {} from './codeSamples';
 import { navGroups, navItems } from './exampleData';
 const ORCESTR_LOGO_SRC = '/assets/orcestr/logo.png';
 const UI_EXAMPLE_SCROLL_LEAD = 50;
-function scrollUiExampleSection(id) {
+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;
+function scrollUiExampleSection(id, behavior = 'auto') {
     const node = document.getElementById(id);
     const scrollRoot = document.querySelector('.oui-app-shell-content-scroll .oui-scroll-area-viewport');
     if (!node || !scrollRoot) {
-        node?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+        node?.scrollIntoView({ block: 'start', behavior });
         return;
     }
     scrollRoot.scrollTo({
         top: uiExampleSectionScrollTop(node, scrollRoot),
-        behavior: 'smooth',
+        behavior,
     });
 }
 function uiExampleSectionScrollTop(node, scrollRoot) {
     const maxTop = scrollRoot
         ? Math.max(0, scrollRoot.scrollHeight - scrollRoot.clientHeight)
         : Number.POSITIVE_INFINITY;
-    return Math.min(maxTop, Math.max(0, node.offsetTop - UI_EXAMPLE_SCROLL_LEAD));
+    const targetTop = scrollRoot
+        ? uiExampleSectionAbsoluteTop(node, scrollRoot)
+        : node.offsetTop;
+    return Math.min(maxTop, Math.max(0, targetTop - UI_EXAMPLE_SCROLL_LEAD));
+}
+function uiExampleSectionAbsoluteTop(node, scrollRoot) {
+    const nodeTop = node.getBoundingClientRect().top;
+    const scrollRootTop = scrollRoot.getBoundingClientRect().top;
+    return scrollRoot.scrollTop + nodeTop - scrollRootTop;
 }
 function UiExampleContent({ activePresetId, onThemePresetChange, onThemeOverridesChange, locale, onLocaleChange, }) {
     const { theme } = useOrcestrTheme();
@@ -70,20 +81,14 @@ function UiExampleContent({ activePresetId, onThemePresetChange, onThemeOverride
         document.documentElement.classList.add('oui-ui-document-lock');
         document.body.classList.add('oui-ui-document-lock');
         const hash = window.location.hash.replace('#', '');
-        let hashSettleTimer = null;
         const hashFrame = hash
             ? window.requestAnimationFrame(() => {
                 scrollUiExampleSection(hash);
-                hashSettleTimer = window.setTimeout(() => {
-                    scrollUiExampleSection(hash);
-                }, 450);
             })
             : null;
         return () => {
             if (hashFrame !== null)
                 window.cancelAnimationFrame(hashFrame);
-            if (hashSettleTimer !== null)
-                window.clearTimeout(hashSettleTimer);
             document.documentElement.classList.remove('oui-ui-document-lock');
             document.body.classList.remove('oui-ui-document-lock');
         };
@@ -209,7 +214,7 @@ function UiExampleSidebar({ onNavigate }) {
         scrollNavigationReleaseTimerRef.current = window.setTimeout(() => {
             if (scrollNavigationTargetRef.current === id)
                 scrollNavigationTargetRef.current = null;
-        }, 900);
+        }, UI_EXAMPLE_SCROLL_LOCK_TIMEOUT_MS);
     }, []);
     useEffect(() => {
         const hash = window.location.hash.replace('#', '');
@@ -233,7 +238,8 @@ function UiExampleSidebar({ onNavigate }) {
                     return;
                 }
                 const targetTop = uiExampleSectionScrollTop(targetNode, scrollRoot);
-                if (Math.abs(scrollRoot.scrollTop - targetTop) <= 2) {
+                if (Math.abs(scrollRoot.scrollTop - targetTop) <=
+                    UI_EXAMPLE_CLICK_TARGET_TOP_TOLERANCE) {
                     scrollNavigationTargetRef.current = null;
                     setActiveSectionValue(lockedTarget);
                 }
@@ -242,10 +248,12 @@ function UiExampleSidebar({ onNavigate }) {
             const bottomDistance = scrollRoot.scrollHeight
                 - scrollRoot.clientHeight
                 - scrollRoot.scrollTop;
-            const top = scrollRoot.scrollTop + 24;
+            const top = scrollRoot.scrollTop + UI_EXAMPLE_ACTIVE_PROBE_OFFSET;
             const next = bottomDistance <= 2
                 ? nodes.at(-1)?.id
-                : nodes.filter((node) => node.offsetTop <= top).at(-1)?.id ?? nodes[0]?.id;
+                : nodes
+                    .filter((node) => uiExampleSectionAbsoluteTop(node, scrollRoot) <= top)
+                    .at(-1)?.id ?? nodes[0]?.id;
             if (next && next !== activeSectionRef.current)
                 setActiveSectionValue(next);
         };
@@ -298,18 +306,26 @@ function UiExampleBrand({ compact = false }) {
 function UiExampleHeaderActions({ compact = false, locale, onLocaleChange, }) {
     return (_jsxs("div", { className: 'oui-ui-topbar-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-topbar-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() {
+export function UiExamplePage({ locale: controlledLocale, defaultLocale = 'ru', onLocaleChange, } = {}) {
     const firstPreset = getThemePlaygroundPreset('orcestr-dark');
     const [activePresetId, setActivePresetId] = useState(firstPreset.id);
     const [mode, setMode] = useState(firstPreset.mode);
     const [surface, setSurface] = useState(firstPreset.surface);
-    const [locale, setLocale] = useState('ru');
+    const [internalLocale, setInternalLocale] = useState(defaultLocale);
     const [themeOverrides, setThemeOverrides] = useState(firstPreset.overrides ?? {});
+    const locale = controlledLocale ?? internalLocale;
     const handleThemePresetChange = useCallback((preset) => {
         setActivePresetId(preset.id);
         setMode(preset.mode);
         setSurface(preset.surface);
         setThemeOverrides(preset.overrides ?? {});
     }, []);
-    return (_jsx(OrcestrUiProvider, { mode: mode, surface: surface, onModeChange: setMode, onSurfaceChange: setSurface, themeOverrides: themeOverrides, locale: locale, children: _jsx(UiExampleContent, { activePresetId: activePresetId, onThemePresetChange: handleThemePresetChange, onThemeOverridesChange: setThemeOverrides, locale: locale, onLocaleChange: setLocale }) }));
+    const handleLocaleChange = useCallback((nextLocale) => {
+        if (onLocaleChange) {
+            onLocaleChange(nextLocale);
+            return;
+        }
+        setInternalLocale(nextLocale);
+    }, [onLocaleChange]);
+    return (_jsx(OrcestrUiProvider, { mode: mode, surface: surface, onModeChange: setMode, onSurfaceChange: setSurface, themeOverrides: themeOverrides, locale: locale, children: _jsx(UiExampleContent, { activePresetId: activePresetId, onThemePresetChange: handleThemePresetChange, onThemeOverridesChange: setThemeOverrides, locale: locale, onLocaleChange: handleLocaleChange }) }));
 }

package/dist/styles/orcestr-ui.css

@@ -1527,7 +1527,7 @@
   height: 1em;
   align-items: center;
   justify-content: center;
-  margin: 0.12em 0.4em 0 0;
+  margin: 0.17em 0.4em 0 0;
   color: var(--oui-icon-text-icon-color, currentColor);
   vertical-align: top;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orcestr/ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Shared React UI package for Orcestr products.",
   "license": "UNLICENSED",
   "type": "module",
@@ -51,7 +51,7 @@
     "release:minor": "node scripts/release.mjs minor",
     "release:major": "node scripts/release.mjs major",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "node --test \"src/**/*.test.mts\""
+    "test": "node scripts/run-tests.mjs"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.99.0",