@vobs/ui 0.2.0 → 0.3.0

package/dist/app-shell.d.ts

@@ -4,16 +4,23 @@
  */
 import { type UiAttributes, type UiDensity, type UiDomPlan } from './primitives.js';
 import { type ReadonlySignal } from '@vobs/reactivity';
+import { type I18nInstance } from '@vobs/i18n';
 import { type RouteLocation } from '@vobs/router';
+import type { TranslationAdapter } from '@vobs/runtime-core';
 import { type ComponentProps, type InjectionKey } from '@vobs/runtime-dom';
 import { type UiEnvironment } from './icons.js';
-import type { BrandInput, ThemeName } from './theme.js';
+import type { BrandInput, ThemePreference } from './theme.js';
 export type AppShellContentMode = 'contained' | 'scroll';
 export type AppShellSidebarMode = 'collapsed' | 'expanded' | 'hidden';
 export type AppShellNavItemTone = 'danger' | 'default' | 'success' | 'warning';
+export interface AppShellTextConfig {
+    readonly key: string;
+    readonly fallback?: string;
+}
+export type AppShellText = string | AppShellTextConfig;
 export interface AppShellNavItem {
     readonly id: string;
-    readonly label: string;
+    readonly label: AppShellText;
     readonly route?: string;
     readonly href?: string;
     readonly icon?: string;
@@ -26,7 +33,7 @@ export interface AppShellNavItem {
 }
 export interface AppShellAction {
     readonly id: string;
-    readonly label: string;
+    readonly label: AppShellText;
     readonly icon?: string;
     readonly badge?: string | number;
     readonly intent?: string;
@@ -37,7 +44,7 @@ export type AppShellAccountMenuItemTone = 'danger' | 'default';
 export type AppShellAccountMenuItemKind = 'item' | 'separator';
 export interface AppShellAccountMenuItem {
     readonly id: string;
-    readonly label?: string;
+    readonly label?: AppShellText;
     readonly kind?: AppShellAccountMenuItemKind;
     readonly route?: string;
     readonly href?: string;
@@ -46,7 +53,7 @@ export interface AppShellAccountMenuItem {
     readonly tone?: AppShellAccountMenuItemTone;
 }
 export interface AppShellBrandConfig {
-    readonly label: string;
+    readonly label: AppShellText;
     readonly href?: string;
     readonly mark?: string;
 }
@@ -55,26 +62,43 @@ export interface AppShellNavigationConfig {
     readonly utility?: readonly AppShellNavItem[];
 }
 export interface AppShellAccountConfig {
-    readonly label: string;
+    readonly label: AppShellText;
     readonly initials?: string;
     readonly icon?: string;
     readonly menu?: readonly AppShellAccountMenuItem[];
     readonly menuExpanded?: boolean;
 }
+export interface AppShellLanguageOption {
+    readonly locale: string;
+    readonly label: AppShellText;
+}
+export interface AppShellLanguageConfig {
+    readonly label?: AppShellText;
+    readonly icon?: string;
+    readonly options: readonly AppShellLanguageOption[];
+}
 export interface AppShellTopbarConfig {
     readonly actions?: readonly AppShellAction[];
+    readonly language?: AppShellLanguageConfig;
     readonly account?: AppShellAccountConfig;
 }
 export interface AppShellPageHeaderConfig {
-    readonly kicker?: string;
-    readonly titleFallback?: string;
-    readonly descriptionFallback?: string;
+    readonly visible?: boolean;
+    readonly kicker?: AppShellText;
+    readonly titleFallback?: AppShellText;
+    readonly descriptionFallback?: AppShellText;
+}
+export interface AppShellRoutePageHeaderConfig {
+    readonly visible?: boolean;
+    readonly kicker?: AppShellText;
+    readonly title?: AppShellText;
+    readonly description?: AppShellText;
 }
 export interface AppShellStatusbarConfig {
-    readonly text?: string;
+    readonly text?: AppShellText;
     readonly icon?: string;
-    readonly version?: string;
-    readonly pendingText?: string;
+    readonly version?: AppShellText;
+    readonly pendingText?: AppShellText;
     readonly pendingIcon?: string;
 }
 export interface AppShellThemeIconConfig {
@@ -82,7 +106,7 @@ export interface AppShellThemeIconConfig {
     readonly light?: string;
 }
 export interface AppShellThemeConfig {
-    readonly mode?: ThemeName;
+    readonly mode?: ThemePreference;
     readonly brand?: BrandInput;
     readonly brands?: readonly BrandInput[];
     readonly icons?: AppShellThemeIconConfig;
@@ -92,14 +116,15 @@ export interface AppShellThemeConfig {
 export interface AppShellRouteConfig {
     readonly path?: string;
     readonly route?: string;
-    readonly title?: string;
-    readonly description?: string;
-    readonly status?: string;
+    readonly title?: AppShellText;
+    readonly description?: AppShellText;
+    readonly status?: AppShellText;
     readonly activeNav?: string;
+    readonly pageHeader?: false | AppShellRoutePageHeaderConfig;
 }
 export interface AppShellDefinition {
     readonly id: string;
-    readonly title?: string;
+    readonly title?: AppShellText;
     readonly brand: AppShellBrandConfig;
     readonly navigation?: AppShellNavigationConfig;
     readonly routes?: readonly AppShellRouteConfig[];
@@ -134,6 +159,13 @@ export interface ResolvedAppShellState {
     readonly description: string;
     readonly status: string;
     readonly page: AppShellRouteConfig | undefined;
+    readonly pageHeader: ResolvedAppShellPageHeader;
+}
+export interface ResolvedAppShellPageHeader {
+    readonly visible: boolean;
+    readonly kicker: string;
+    readonly title: string;
+    readonly description: string;
 }
 export interface ResolvedAppShellStatus {
     readonly state: 'idle' | 'pending';
@@ -145,14 +177,17 @@ export declare function defineAppShell<const Shell extends AppShellDefinition>(s
 export declare function defineAppShellConfig<const Config extends AppShellConfigInput>(config: Config): Config;
 export declare function createAppShellRegistry(config: AppShellConfigInput): AppShellRegistry;
 export declare function provideUiAppShells(context: UiAppShellProviderContext, config: AppShellConfigInput): () => void;
-export declare function resolveAppShellState(shell: AppShellDefinition, route: RouteLocation | string | null | undefined): ResolvedAppShellState;
-export declare function resolveAppShellStatus(shell: AppShellDefinition, route: RouteLocation | string | null | undefined, pendingRoute: RouteLocation | string | null | undefined): ResolvedAppShellStatus;
+export declare function resolveAppShellState(shell: AppShellDefinition, route: RouteLocation | string | null | undefined, translate?: (key: string) => string): ResolvedAppShellState;
+export declare function resolveAppShellStatus(shell: AppShellDefinition, route: RouteLocation | string | null | undefined, pendingRoute: RouteLocation | string | null | undefined, translate?: (key: string) => string): ResolvedAppShellStatus;
+export declare function resolveAppShellText(value: AppShellText | undefined, translate?: (key: string) => string): string | undefined;
 export declare function resolveActiveAppShellNavItemId(routePath: string | undefined, items: readonly AppShellNavItem[], activeNav: string | undefined): string | undefined;
 export declare const AppShell: import("@vobs/runtime-core").ComponentDefinition<AppShellProps, Record<string, never>, AppShellComponentScope, Readonly<Record<string, Readonly<Record<string, unknown>>>>>;
 export interface AppShellComponentScope {
     readonly props: ComponentProps<AppShellProps>;
     readonly appShells: AppShellRegistry;
     readonly icons: UiEnvironment;
+    readonly i18n: I18nInstance | undefined;
+    readonly translation: TranslationAdapter | undefined;
     readonly currentRoute: ReadonlySignal<RouteLocation | null>;
     readonly pendingRoute: ReadonlySignal<RouteLocation | null>;
 }
@@ -166,6 +201,7 @@ export interface AppShellPlanOptions {
     readonly activeId?: string;
     readonly sidebarMode?: AppShellSidebarMode;
     readonly contentMode?: AppShellContentMode;
+    readonly pageHeaderVisible?: boolean;
     readonly title?: string;
     readonly subtitle?: string;
     readonly commandLabel?: string;

package/dist/app-shell.js

@@ -4,9 +4,10 @@
  */
 import { createUiDomPlan, } from './primitives.js';
 import { effect, signal } from '@vobs/reactivity';
+import { I18nKey } from '@vobs/i18n';
 import { CurrentRouteKey, PendingRouteKey } from '@vobs/router';
-import { createCompiledTemplate, createInjectionKey, createRuntimeError, defineComponent, mountSlot, } from '@vobs/runtime-dom';
-import { bindAppShellAccountMenu, bindAppShellThemeControls, createAppShellFrame, syncAppShellFrame, } from './app-shell-dom.js';
+import { createCompiledTemplate, createInjectionKey, createRuntimeError, defineComponent, mountSlot, TranslationAdapterKey, } from '@vobs/runtime-dom';
+import { bindAppShellAccountMenu, bindAppShellActions, bindAppShellLanguageMenu, bindAppShellThemeControls, createAppShellFrame, syncAppShellFrame, } from './app-shell-dom.js';
 import { createUiEnvironment, UiIconEnvironmentKey } from './icons.js';
 export const UiAppShellEnvironmentKey = createInjectionKey('vobs.ui.appShells');
 export function defineAppShell(shell) {
@@ -30,23 +31,25 @@ export function provideUiAppShells(context, config) {
         appShells: createAppShellRegistry(config),
     });
 }
-export function resolveAppShellState(shell, route) {
+export function resolveAppShellState(shell, route, translate) {
     const routePath = typeof route === 'string' ? route : route?.path;
     const page = resolveAppShellPage(shell, routePath);
     const navItems = collectAppShellNavItems(shell);
     const activeId = resolveActiveAppShellNavItemId(routePath, navItems, page?.activeNav);
+    const pageHeader = resolveAppShellPageHeader(shell, page, translate);
     return {
         activeId,
-        title: page?.title ?? shell.pageHeader?.titleFallback ?? shell.title ?? '',
-        description: page?.description ?? shell.pageHeader?.descriptionFallback ?? '',
-        status: page?.status ?? shell.statusbar?.text ?? '',
+        title: pageHeader.title,
+        description: pageHeader.description,
+        status: resolveAppShellText(page?.status ?? shell.statusbar?.text, translate) ?? '',
         page,
+        pageHeader,
     };
 }
-export function resolveAppShellStatus(shell, route, pendingRoute) {
+export function resolveAppShellStatus(shell, route, pendingRoute, translate) {
     if (pendingRoute !== null && pendingRoute !== undefined) {
-        const pending = resolveAppShellState(shell, pendingRoute);
-        const textBase = shell.statusbar?.pendingText ?? 'Loading';
+        const pending = resolveAppShellState(shell, pendingRoute, translate);
+        const textBase = resolveAppShellText(shell.statusbar?.pendingText, translate) ?? 'Loading';
         return {
             state: 'pending',
             text: pending.title.length === 0 ? textBase : `${textBase} ${pending.title}`,
@@ -55,13 +58,20 @@ export function resolveAppShellStatus(shell, route, pendingRoute) {
                 : { icon: shell.statusbar?.pendingIcon ?? shell.statusbar?.icon }),
         };
     }
-    const current = resolveAppShellState(shell, route);
+    const current = resolveAppShellState(shell, route, translate);
     return {
         state: 'idle',
-        text: current.status || shell.statusbar?.text || '',
+        text: current.status || resolveAppShellText(shell.statusbar?.text, translate) || '',
         ...(shell.statusbar?.icon === undefined ? {} : { icon: shell.statusbar.icon }),
     };
 }
+export function resolveAppShellText(value, translate) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === 'string')
+        return value;
+    return translate?.(value.key) ?? value.fallback ?? value.key;
+}
 export function resolveActiveAppShellNavItemId(routePath, items, activeNav) {
     if (activeNav !== undefined && items.some((item) => item.id === activeNav))
         return activeNav;
@@ -108,6 +118,8 @@ export const AppShell = defineComponent({
             props: context.props,
             appShells: appShellEnvironment.appShells,
             icons: context.maybeInject(UiIconEnvironmentKey) ?? createUiEnvironment(),
+            i18n: context.maybeInject(I18nKey),
+            translation: context.maybeInject(TranslationAdapterKey),
             currentRoute,
             pendingRoute,
         };
@@ -182,10 +194,10 @@ export function createAppShellPlans(options) {
             state: action.disabled === true ? 'disabled' : action.pressed === true ? 'pressed' : 'idle',
             attrs: {
                 type: 'button',
-                'aria-label': action.label,
+                'aria-label': resolveAppShellText(action.label),
                 'aria-pressed': action.pressed === undefined ? undefined : action.pressed ? 'true' : 'false',
                 'data-action-id': action.id,
-                'data-label': action.label,
+                'data-label': resolveAppShellText(action.label),
             },
         })),
         main: createUiDomPlan('main', 'app-shell-main', {
@@ -194,7 +206,13 @@ export function createAppShellPlans(options) {
             },
         }),
         pageFrame: createUiDomPlan('section', 'app-shell-page-frame'),
-        pageHeader: createUiDomPlan('header', 'app-shell-page-header'),
+        pageHeader: createUiDomPlan('header', 'app-shell-page-header', {
+            state: options.pageHeaderVisible === false ? 'hidden' : 'visible',
+            attrs: {
+                hidden: options.pageHeaderVisible === false,
+                'aria-hidden': options.pageHeaderVisible === false ? 'true' : undefined,
+            },
+        }),
         pageTitle: options.title === undefined
             ? undefined
             : createUiDomPlan('h1', 'app-shell-page-title', {
@@ -249,7 +267,7 @@ function createNavItemPlan(options, item, activeId) {
             'aria-current': active ? 'page' : undefined,
             tabindex: active && item.disabled !== true ? 0 : -1,
             'data-nav-id': item.id,
-            'data-label': item.label,
+            'data-label': resolveAppShellText(item.label),
             'data-tone': item.tone ?? 'default',
             'data-has-badge': item.badge === undefined ? undefined : 'true',
         },
@@ -271,18 +289,31 @@ function mountAppShell(owner, scope, environment) {
         mountSlot(owner, pageBody, 'default', environment.slots?.default, undefined);
     }
     bindAppShellThemeControls(owner, frame, shell, scope, environment);
+    bindAppShellActions(owner, frame, shell);
     bindAppShellAccountMenu(owner, frame, shell);
-    syncAppShellFrame(frame, shell, resolveAppShellState(shell, scope.currentRoute.value), resolveAppShellStatus(shell, scope.currentRoute.value, scope.pendingRoute.value), scope, environment);
+    bindAppShellLanguageMenu(owner, frame, shell, scope, environment);
+    syncAppShellFrame(frame, shell, resolveShellState(shell, scope), resolveShellStatus(shell, scope), scope, environment);
     owner.run(() => {
         const stop = effect(() => {
-            const state = resolveAppShellState(shell, scope.currentRoute.value);
-            const status = resolveAppShellStatus(shell, scope.currentRoute.value, scope.pendingRoute.value);
+            void scope.translation?.locale?.value;
+            const state = resolveShellState(shell, scope);
+            const status = resolveShellStatus(shell, scope);
             syncAppShellFrame(frame, shell, state, status, scope, environment);
         }, { scheduler: environment.scheduler });
         owner.own(stop);
     });
     return { root: frame.root, refs: {} };
 }
+function resolveShellState(shell, scope) {
+    return resolveAppShellState(shell, scope.currentRoute.value, appShellTranslate(scope));
+}
+function resolveShellStatus(shell, scope) {
+    return resolveAppShellStatus(shell, scope.currentRoute.value, scope.pendingRoute.value, appShellTranslate(scope));
+}
+function appShellTranslate(scope) {
+    const translation = scope.translation;
+    return translation === undefined ? undefined : (key) => translation.t(key);
+}
 function readAppShell(scope) {
     const id = readOptionalString(scope.props.shell?.value);
     if (id === undefined)
@@ -323,6 +354,20 @@ function resolveAppShellPage(shell, routePath) {
         .filter((candidate) => candidate.score >= 0)
         .sort((left, right) => right.score - left.score)[0]?.page;
 }
+function resolveAppShellPageHeader(shell, page, translate) {
+    const routeHeader = page?.pageHeader;
+    const header = routeHeader === false ? undefined : routeHeader;
+    const title = resolveAppShellText(header?.title ?? page?.title ?? shell.pageHeader?.titleFallback ?? shell.title, translate) ?? '';
+    const description = resolveAppShellText(header?.description ?? page?.description ?? shell.pageHeader?.descriptionFallback, translate) ?? '';
+    return {
+        visible: routeHeader === false ? false : (header?.visible ?? shell.pageHeader?.visible ?? true),
+        kicker: resolveAppShellText(header?.kicker ?? shell.pageHeader?.kicker ?? shell.title, translate) ??
+            resolveAppShellText(shell.brand.label, translate) ??
+            '',
+        title,
+        description,
+    };
+}
 function scoreRoutePattern(pattern, path) {
     if (pattern === undefined)
         return -1;

package/dist/base.css

@@ -31,8 +31,7 @@
   }
 
   :where(:focus-visible) {
-    outline: 2px solid var(--border-brand);
-    outline-offset: 2px;
+    outline: 1px solid var(--border-brand);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/complex-inputs.js

@@ -137,10 +137,11 @@ export function createUploadTransportStateContract(options = {}) {
     const disabled = options.disabled === true;
     const maxRetries = normalizeRetryCount(options.maxRetries);
     const retryingIds = normalizeIds(options.retryingIds);
+    const retryingSet = new Set(retryingIds);
     const files = (options.files ?? []).map((file) => uploadTransportFileContract(file, {
         disabled,
         maxRetries,
-        retrying: retryingIds.includes(file.id),
+        retrying: retryingSet.has(file.id),
         serverErrors: normalizeServerErrors(options.serverErrors?.[file.id], file.serverError),
     }));
     const fileCount = files.length;
@@ -291,13 +292,14 @@ export function createCascaderAdvancedStateContract(options) {
     const visibleIds = options.visibleIds === undefined
         ? flattenedOptions.map((option) => option.id)
         : normalizeCascaderIds(options.visibleIds, new Set(flattenedOptions.map((option) => option.id)));
+    const visibleSet = new Set(visibleIds);
     const allowedSet = options.allowedIds === undefined
         ? undefined
         : new Set(normalizeCascaderIds(options.allowedIds, new Set(flattenedOptions.map((option) => option.id))));
     const deniedIds = normalizeCascaderIds(options.deniedIds, new Set(flattenedOptions.map((option) => option.id)));
     const deniedSet = new Set(deniedIds);
     const optionContracts = flattenedOptions.map((option) => {
-        const visible = visibleIds.includes(option.id);
+        const visible = visibleSet.has(option.id);
         const allowed = !deniedSet.has(option.id) && (allowedSet === undefined || allowedSet.has(option.id));
         const reason = allowed ? '' : (options.disabledReasons?.[option.id] ?? 'Permission denied');
         return {
@@ -658,9 +660,11 @@ function normalizeCascaderIds(ids, knownIds) {
     if (ids === undefined)
         return [];
     const result = [];
+    const seen = new Set();
     for (const id of ids) {
-        if (!knownIds.has(id) || result.includes(id))
+        if (!knownIds.has(id) || seen.has(id))
             continue;
+        seen.add(id);
         result.push(id);
     }
     return result;