@vobs/ui 0.2.0 → 1.0.0

package/dist/app-shell.d.ts

@@ -1,199 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { type UiAttributes, type UiDensity, type UiDomPlan } from './primitives.js';
-import { type ReadonlySignal } from '@vobs/reactivity';
-import { type RouteLocation } from '@vobs/router';
-import { type ComponentProps, type InjectionKey } from '@vobs/runtime-dom';
-import { type UiEnvironment } from './icons.js';
-import type { BrandInput, ThemeName } from './theme.js';
-export type AppShellContentMode = 'contained' | 'scroll';
-export type AppShellSidebarMode = 'collapsed' | 'expanded' | 'hidden';
-export type AppShellNavItemTone = 'danger' | 'default' | 'success' | 'warning';
-export interface AppShellNavItem {
-    readonly id: string;
-    readonly label: string;
-    readonly route?: string;
-    readonly href?: string;
-    readonly icon?: string;
-    readonly match?: string | readonly string[];
-    readonly active?: boolean;
-    readonly disabled?: boolean;
-    readonly badge?: string | number;
-    readonly tone?: AppShellNavItemTone;
-    readonly state?: string;
-}
-export interface AppShellAction {
-    readonly id: string;
-    readonly label: string;
-    readonly icon?: string;
-    readonly badge?: string | number;
-    readonly intent?: string;
-    readonly pressed?: boolean;
-    readonly disabled?: boolean;
-}
-export type AppShellAccountMenuItemTone = 'danger' | 'default';
-export type AppShellAccountMenuItemKind = 'item' | 'separator';
-export interface AppShellAccountMenuItem {
-    readonly id: string;
-    readonly label?: string;
-    readonly kind?: AppShellAccountMenuItemKind;
-    readonly route?: string;
-    readonly href?: string;
-    readonly icon?: string;
-    readonly disabled?: boolean;
-    readonly tone?: AppShellAccountMenuItemTone;
-}
-export interface AppShellBrandConfig {
-    readonly label: string;
-    readonly href?: string;
-    readonly mark?: string;
-}
-export interface AppShellNavigationConfig {
-    readonly primary?: readonly AppShellNavItem[];
-    readonly utility?: readonly AppShellNavItem[];
-}
-export interface AppShellAccountConfig {
-    readonly label: string;
-    readonly initials?: string;
-    readonly icon?: string;
-    readonly menu?: readonly AppShellAccountMenuItem[];
-    readonly menuExpanded?: boolean;
-}
-export interface AppShellTopbarConfig {
-    readonly actions?: readonly AppShellAction[];
-    readonly account?: AppShellAccountConfig;
-}
-export interface AppShellPageHeaderConfig {
-    readonly kicker?: string;
-    readonly titleFallback?: string;
-    readonly descriptionFallback?: string;
-}
-export interface AppShellStatusbarConfig {
-    readonly text?: string;
-    readonly icon?: string;
-    readonly version?: string;
-    readonly pendingText?: string;
-    readonly pendingIcon?: string;
-}
-export interface AppShellThemeIconConfig {
-    readonly dark?: string;
-    readonly light?: string;
-}
-export interface AppShellThemeConfig {
-    readonly mode?: ThemeName;
-    readonly brand?: BrandInput;
-    readonly brands?: readonly BrandInput[];
-    readonly icons?: AppShellThemeIconConfig;
-    readonly accent?: BrandInput;
-    readonly persist?: boolean;
-}
-export interface AppShellRouteConfig {
-    readonly path?: string;
-    readonly route?: string;
-    readonly title?: string;
-    readonly description?: string;
-    readonly status?: string;
-    readonly activeNav?: string;
-}
-export interface AppShellDefinition {
-    readonly id: string;
-    readonly title?: string;
-    readonly brand: AppShellBrandConfig;
-    readonly navigation?: AppShellNavigationConfig;
-    readonly routes?: readonly AppShellRouteConfig[];
-    readonly pageHeader?: AppShellPageHeaderConfig;
-    readonly topbar?: AppShellTopbarConfig;
-    readonly statusbar?: AppShellStatusbarConfig;
-    readonly sidebarMode?: AppShellSidebarMode;
-    readonly contentMode?: AppShellContentMode;
-    readonly theme?: AppShellThemeConfig;
-    readonly className?: string;
-}
-export type AppShellDefinitionRecord = Readonly<Record<string, Omit<AppShellDefinition, 'id'> & {
-    readonly id?: string;
-}>>;
-export type AppShellConfigInput = AppShellDefinition | readonly AppShellDefinition[] | AppShellDefinitionRecord;
-export interface AppShellRegistry {
-    readonly shells: readonly AppShellDefinition[];
-    get(id: string): AppShellDefinition | undefined;
-}
-export interface UiAppShellEnvironment {
-    readonly appShells: AppShellRegistry;
-}
-export interface UiAppShellProviderContext {
-    provide<T>(key: InjectionKey<T>, value: T): () => void;
-}
-export interface AppShellProps {
-    readonly shell?: string;
-}
-export interface ResolvedAppShellState {
-    readonly activeId: string | undefined;
-    readonly title: string;
-    readonly description: string;
-    readonly status: string;
-    readonly page: AppShellRouteConfig | undefined;
-}
-export interface ResolvedAppShellStatus {
-    readonly state: 'idle' | 'pending';
-    readonly text: string;
-    readonly icon?: string;
-}
-export declare const UiAppShellEnvironmentKey: InjectionKey<UiAppShellEnvironment>;
-export declare function defineAppShell<const Shell extends AppShellDefinition>(shell: Shell): Shell;
-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 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 currentRoute: ReadonlySignal<RouteLocation | null>;
-    readonly pendingRoute: ReadonlySignal<RouteLocation | null>;
-}
-export interface AppShellPlanOptions {
-    readonly id?: string;
-    readonly brandLabel: string;
-    readonly brandHref?: string;
-    readonly navItems: readonly AppShellNavItem[];
-    readonly utilityItems?: readonly AppShellNavItem[];
-    readonly actions?: readonly AppShellAction[];
-    readonly activeId?: string;
-    readonly sidebarMode?: AppShellSidebarMode;
-    readonly contentMode?: AppShellContentMode;
-    readonly title?: string;
-    readonly subtitle?: string;
-    readonly commandLabel?: string;
-    readonly commandShortcut?: string;
-    readonly density?: UiDensity;
-    readonly className?: string;
-    readonly attrs?: UiAttributes;
-}
-export interface AppShellPlans {
-    readonly root: UiDomPlan<'div'>;
-    readonly sidebar: UiDomPlan<'aside'>;
-    readonly brand: UiDomPlan<'a'>;
-    readonly nav: UiDomPlan<'nav'>;
-    readonly navItems: readonly UiDomPlan<'a'>[];
-    readonly navBadges: readonly UiDomPlan<'span'>[];
-    readonly utilityNav: UiDomPlan<'nav'> | undefined;
-    readonly utilityItems: readonly UiDomPlan<'a'>[];
-    readonly topbar: UiDomPlan<'header'>;
-    readonly commandTrigger: UiDomPlan<'button'> | undefined;
-    readonly actions: readonly UiDomPlan<'button'>[];
-    readonly main: UiDomPlan<'main'>;
-    readonly pageFrame: UiDomPlan<'section'>;
-    readonly pageHeader: UiDomPlan<'header'>;
-    readonly pageTitle: UiDomPlan<'h1'> | undefined;
-    readonly pageSubtitle: UiDomPlan<'p'> | undefined;
-    readonly pageToolbar: UiDomPlan<'div'>;
-    readonly pageBody: UiDomPlan<'section'>;
-}
-export declare function createAppShellPlans(options: AppShellPlanOptions): AppShellPlans;
-export declare function resolveAppShellSidebarMode(viewportWidth: number, preferred?: AppShellSidebarMode): AppShellSidebarMode;
-export declare function getNextAppShellNavItemId(items: readonly AppShellNavItem[], activeId: string | undefined, key: string): string | undefined;

package/dist/app-shell.js

@@ -1,370 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { createUiDomPlan, } from './primitives.js';
-import { effect, signal } from '@vobs/reactivity';
-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 { createUiEnvironment, UiIconEnvironmentKey } from './icons.js';
-export const UiAppShellEnvironmentKey = createInjectionKey('vobs.ui.appShells');
-export function defineAppShell(shell) {
-    return shell;
-}
-export function defineAppShellConfig(config) {
-    return config;
-}
-export function createAppShellRegistry(config) {
-    const shells = normalizeAppShellConfig(config);
-    const map = new Map(shells.map((shell) => [shell.id, shell]));
-    return {
-        shells,
-        get(id) {
-            return map.get(id);
-        },
-    };
-}
-export function provideUiAppShells(context, config) {
-    return context.provide(UiAppShellEnvironmentKey, {
-        appShells: createAppShellRegistry(config),
-    });
-}
-export function resolveAppShellState(shell, route) {
-    const routePath = typeof route === 'string' ? route : route?.path;
-    const page = resolveAppShellPage(shell, routePath);
-    const navItems = collectAppShellNavItems(shell);
-    const activeId = resolveActiveAppShellNavItemId(routePath, navItems, page?.activeNav);
-    return {
-        activeId,
-        title: page?.title ?? shell.pageHeader?.titleFallback ?? shell.title ?? '',
-        description: page?.description ?? shell.pageHeader?.descriptionFallback ?? '',
-        status: page?.status ?? shell.statusbar?.text ?? '',
-        page,
-    };
-}
-export function resolveAppShellStatus(shell, route, pendingRoute) {
-    if (pendingRoute !== null && pendingRoute !== undefined) {
-        const pending = resolveAppShellState(shell, pendingRoute);
-        const textBase = shell.statusbar?.pendingText ?? 'Loading';
-        return {
-            state: 'pending',
-            text: pending.title.length === 0 ? textBase : `${textBase} ${pending.title}`,
-            ...(shell.statusbar?.pendingIcon === undefined && shell.statusbar?.icon === undefined
-                ? {}
-                : { icon: shell.statusbar?.pendingIcon ?? shell.statusbar?.icon }),
-        };
-    }
-    const current = resolveAppShellState(shell, route);
-    return {
-        state: 'idle',
-        text: current.status || shell.statusbar?.text || '',
-        ...(shell.statusbar?.icon === undefined ? {} : { icon: shell.statusbar.icon }),
-    };
-}
-export function resolveActiveAppShellNavItemId(routePath, items, activeNav) {
-    if (activeNav !== undefined && items.some((item) => item.id === activeNav))
-        return activeNav;
-    if (routePath === undefined)
-        return items.find((item) => item.active === true)?.id;
-    const path = normalizeRoutePath(routePath);
-    const patternMatched = items.find((item) => {
-        const patterns = normalizeMatchPatterns(item.match);
-        return patterns.some((pattern) => matchRoutePattern(pattern, path));
-    });
-    if (patternMatched !== undefined)
-        return patternMatched.id;
-    let best;
-    for (const item of items) {
-        const href = routeItemPath(item);
-        if (href === undefined)
-            continue;
-        if (path !== href && !path.startsWith(`${href}/`))
-            continue;
-        if (best === undefined || href.length > best.length) {
-            best = { id: item.id, length: href.length };
-        }
-    }
-    return best?.id;
-}
-export const AppShell = defineComponent({
-    template: createCompiledTemplate({
-        templateId: 'k-app-shell',
-        sourceId: '@vobs/ui/app-shell',
-        rootTag: 'div',
-        mount(owner, scope, environment) {
-            return mountAppShell(owner, scope, environment);
-        },
-    }),
-    props: ['shell'],
-    setup(context) {
-        const currentRoute = context.maybeInject(CurrentRouteKey) ?? signal(null);
-        const pendingRoute = context.maybeInject(PendingRouteKey) ?? signal(null);
-        const appShellEnvironment = context.maybeInject(UiAppShellEnvironmentKey);
-        if (appShellEnvironment === undefined) {
-            throw createRuntimeError('KUI010', 'App shell config is not provided');
-        }
-        return {
-            props: context.props,
-            appShells: appShellEnvironment.appShells,
-            icons: context.maybeInject(UiIconEnvironmentKey) ?? createUiEnvironment(),
-            currentRoute,
-            pendingRoute,
-        };
-    },
-});
-export function createAppShellPlans(options) {
-    const sidebarMode = options.sidebarMode ?? 'expanded';
-    const activeId = options.activeId ?? options.navItems.find((item) => item.active === true)?.id;
-    const utilityItems = options.utilityItems ?? [];
-    return {
-        root: createUiDomPlan('div', 'app-shell', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            ...(options.density === undefined ? {} : { density: options.density }),
-            state: sidebarMode,
-            attrs: {
-                id: options.id,
-                ...options.attrs,
-                'data-sidebar-mode': sidebarMode,
-                'data-content-mode': options.contentMode ?? 'contained',
-            },
-        }),
-        sidebar: createUiDomPlan('aside', 'app-shell-sidebar', {
-            state: sidebarMode,
-            attrs: {
-                id: options.id === undefined ? undefined : `${options.id}-sidebar`,
-                'aria-label': 'Primary',
-                'data-sidebar-mode': sidebarMode,
-            },
-        }),
-        brand: createUiDomPlan('a', 'app-shell-brand', {
-            attrs: {
-                href: options.brandHref ?? '#',
-                'aria-label': options.brandLabel,
-                'data-label': options.brandLabel,
-            },
-        }),
-        nav: createUiDomPlan('nav', 'app-shell-nav', {
-            attrs: {
-                'aria-label': 'Primary navigation',
-                'data-count': options.navItems.length,
-            },
-        }),
-        navItems: options.navItems.map((item) => createNavItemPlan(options, item, activeId)),
-        navBadges: options.navItems.map((item) => createNavBadgePlan(item)),
-        utilityNav: utilityItems.length === 0
-            ? undefined
-            : createUiDomPlan('nav', 'app-shell-utility-nav', {
-                attrs: {
-                    'aria-label': 'Utility navigation',
-                    'data-count': utilityItems.length,
-                },
-            }),
-        utilityItems: utilityItems.map((item) => createNavItemPlan(options, item, activeId)),
-        topbar: createUiDomPlan('header', 'app-shell-topbar', {
-            attrs: {
-                id: options.id === undefined ? undefined : `${options.id}-topbar`,
-                'data-action-count': options.actions?.length ?? 0,
-            },
-        }),
-        commandTrigger: options.commandLabel === undefined
-            ? undefined
-            : createUiDomPlan('button', 'app-shell-command-trigger', {
-                attrs: {
-                    type: 'button',
-                    'aria-label': options.commandLabel,
-                    'data-label': options.commandLabel,
-                    'data-shortcut': options.commandShortcut,
-                },
-            }),
-        actions: (options.actions ?? []).map((action) => createUiDomPlan('button', 'app-shell-action', {
-            ...(action.disabled === undefined ? {} : { disabled: action.disabled }),
-            state: action.disabled === true ? 'disabled' : action.pressed === true ? 'pressed' : 'idle',
-            attrs: {
-                type: 'button',
-                'aria-label': action.label,
-                'aria-pressed': action.pressed === undefined ? undefined : action.pressed ? 'true' : 'false',
-                'data-action-id': action.id,
-                'data-label': action.label,
-            },
-        })),
-        main: createUiDomPlan('main', 'app-shell-main', {
-            attrs: {
-                id: options.id === undefined ? undefined : `${options.id}-main`,
-            },
-        }),
-        pageFrame: createUiDomPlan('section', 'app-shell-page-frame'),
-        pageHeader: createUiDomPlan('header', 'app-shell-page-header'),
-        pageTitle: options.title === undefined
-            ? undefined
-            : createUiDomPlan('h1', 'app-shell-page-title', {
-                attrs: { 'data-title': options.title },
-            }),
-        pageSubtitle: options.subtitle === undefined
-            ? undefined
-            : createUiDomPlan('p', 'app-shell-page-subtitle', {
-                attrs: { 'data-subtitle': options.subtitle },
-            }),
-        pageToolbar: createUiDomPlan('div', 'app-shell-page-toolbar', {
-            attrs: { role: 'toolbar' },
-        }),
-        pageBody: createUiDomPlan('section', 'app-shell-page-body', {
-            state: options.contentMode ?? 'contained',
-            attrs: {
-                'data-mode': options.contentMode ?? 'contained',
-            },
-        }),
-    };
-}
-export function resolveAppShellSidebarMode(viewportWidth, preferred = 'expanded') {
-    if (!Number.isFinite(viewportWidth) || viewportWidth < 768)
-        return 'hidden';
-    if (viewportWidth < 1100)
-        return preferred === 'hidden' ? 'hidden' : 'collapsed';
-    return preferred;
-}
-export function getNextAppShellNavItemId(items, activeId, key) {
-    const enabled = items.filter((item) => item.disabled !== true);
-    if (enabled.length === 0)
-        return activeId;
-    const currentIndex = Math.max(-1, enabled.findIndex((item) => item.id === activeId));
-    if (key === 'Home')
-        return enabled[0]?.id;
-    if (key === 'End')
-        return enabled.at(-1)?.id;
-    if (key === 'ArrowUp')
-        return enabled.at(currentIndex - 1)?.id ?? enabled.at(-1)?.id;
-    if (key === 'ArrowDown')
-        return enabled[(currentIndex + 1) % enabled.length]?.id;
-    return activeId;
-}
-function createNavItemPlan(options, item, activeId) {
-    const active = item.id === activeId || item.active === true;
-    return createUiDomPlan('a', 'app-shell-nav-item', {
-        ...(item.disabled === undefined ? {} : { disabled: item.disabled }),
-        state: item.disabled === true ? 'disabled' : active ? 'active' : 'idle',
-        attrs: {
-            id: options.id === undefined ? undefined : `${options.id}-${item.id}-nav`,
-            href: item.disabled === true ? undefined : (item.href ?? item.route ?? '#'),
-            'aria-current': active ? 'page' : undefined,
-            tabindex: active && item.disabled !== true ? 0 : -1,
-            'data-nav-id': item.id,
-            'data-label': item.label,
-            'data-tone': item.tone ?? 'default',
-            'data-has-badge': item.badge === undefined ? undefined : 'true',
-        },
-    });
-}
-function createNavBadgePlan(item) {
-    return createUiDomPlan('span', 'app-shell-nav-badge', {
-        attrs: {
-            'aria-hidden': 'true',
-            'data-value': item.badge,
-        },
-    });
-}
-function mountAppShell(owner, scope, environment) {
-    const shell = readAppShell(scope);
-    const frame = createAppShellFrame(shell, scope, environment);
-    const pageBody = frame.root.querySelector('.kui-app-shell-page-body');
-    if (pageBody !== null) {
-        mountSlot(owner, pageBody, 'default', environment.slots?.default, undefined);
-    }
-    bindAppShellThemeControls(owner, frame, shell, scope, environment);
-    bindAppShellAccountMenu(owner, frame, shell);
-    syncAppShellFrame(frame, shell, resolveAppShellState(shell, scope.currentRoute.value), resolveAppShellStatus(shell, scope.currentRoute.value, scope.pendingRoute.value), scope, environment);
-    owner.run(() => {
-        const stop = effect(() => {
-            const state = resolveAppShellState(shell, scope.currentRoute.value);
-            const status = resolveAppShellStatus(shell, scope.currentRoute.value, scope.pendingRoute.value);
-            syncAppShellFrame(frame, shell, state, status, scope, environment);
-        }, { scheduler: environment.scheduler });
-        owner.own(stop);
-    });
-    return { root: frame.root, refs: {} };
-}
-function readAppShell(scope) {
-    const id = readOptionalString(scope.props.shell?.value);
-    if (id === undefined)
-        throw createRuntimeError('KUI011', 'App shell requires `shell`');
-    const shell = scope.appShells.get(id);
-    if (shell === undefined)
-        throw createRuntimeError('KUI012', `App shell is not registered: ${id}`);
-    return shell;
-}
-function normalizeAppShellConfig(config) {
-    if (Array.isArray(config)) {
-        const list = config;
-        return list;
-    }
-    if ('brand' in config && typeof config.id === 'string') {
-        const single = config;
-        return [single];
-    }
-    const record = config;
-    const definitions = [];
-    for (const id of Object.keys(record)) {
-        const shell = record[id];
-        if (shell === undefined)
-            continue;
-        definitions.push(shell.id === undefined ? { ...shell, id } : shell);
-    }
-    return definitions;
-}
-function collectAppShellNavItems(shell) {
-    return [...(shell.navigation?.primary ?? []), ...(shell.navigation?.utility ?? [])];
-}
-function resolveAppShellPage(shell, routePath) {
-    if (routePath === undefined)
-        return undefined;
-    const path = normalizeRoutePath(routePath);
-    return [...(shell.routes ?? [])]
-        .map((page) => ({ page, score: scoreRoutePattern(page.path ?? page.route, path) }))
-        .filter((candidate) => candidate.score >= 0)
-        .sort((left, right) => right.score - left.score)[0]?.page;
-}
-function scoreRoutePattern(pattern, path) {
-    if (pattern === undefined)
-        return -1;
-    if (!matchRoutePattern(pattern, path))
-        return -1;
-    const normalized = normalizeRoutePath(pattern);
-    const staticSegments = normalized.split('/').filter((segment) => !isDynamicSegment(segment));
-    return normalized.length + staticSegments.length * 10;
-}
-function matchRoutePattern(pattern, routePath) {
-    const patternSegments = normalizeRoutePath(pattern).split('/').filter(Boolean);
-    const routeSegments = normalizeRoutePath(routePath).split('/').filter(Boolean);
-    for (let index = 0; index < patternSegments.length; index += 1) {
-        const segment = patternSegments[index];
-        if (segment === '*')
-            return true;
-        if (routeSegments[index] === undefined)
-            return false;
-        if (segment !== undefined && !isDynamicSegment(segment) && segment !== routeSegments[index]) {
-            return false;
-        }
-    }
-    return patternSegments.length === routeSegments.length;
-}
-function isDynamicSegment(segment) {
-    return segment !== undefined && (segment.startsWith(':') || /^\[[^\]]+\]$/u.test(segment));
-}
-function normalizeMatchPatterns(match) {
-    if (match === undefined)
-        return [];
-    return typeof match === 'string' ? [match] : match;
-}
-function routeItemPath(item) {
-    const path = item.route ?? item.href;
-    return path === undefined ? undefined : normalizeRoutePath(path);
-}
-function normalizeRoutePath(path) {
-    const [withoutHash] = path.split('#', 1);
-    const [withoutQuery] = (withoutHash ?? path).split('?', 1);
-    const normalized = withoutQuery === '' ? '/' : (withoutQuery ?? '/');
-    return normalized.length > 1 ? normalized.replace(/\/+$/u, '') : normalized;
-}
-function readOptionalString(value) {
-    return typeof value === 'string' && value.length > 0 ? value : undefined;
-}

package/dist/base.css

@@ -1,52 +0,0 @@
-@layer vobs.base {
-  :where(html) {
-    font-family: var(--font-family-default);
-    font-size: var(--body-base-font-size);
-    line-height: var(--body-base-line-height);
-    background: var(--bg-base-default);
-    color: var(--text-default);
-  }
-
-  :where(*, *::before, *::after) {
-    box-sizing: border-box;
-  }
-
-  :where(body) {
-    margin: 0;
-    background: var(--bg-base-default);
-    color: var(--text-default);
-  }
-
-  :where(button, input, select, textarea) {
-    font: inherit;
-  }
-
-  :where(.k-icon) {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    flex: none;
-    color: currentColor;
-    vertical-align: -0.125em;
-  }
-
-  :where(:focus-visible) {
-    outline: 2px solid var(--border-brand);
-    outline-offset: 2px;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :where(*, *::before, *::after) {
-      scroll-behavior: auto !important;
-      transition-duration: 0.01ms !important;
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-    }
-  }
-
-  @media (forced-colors: active) {
-    :where(:focus-visible) {
-      outline-color: Highlight;
-    }
-  }
-}

package/dist/calendar-picker.d.ts

@@ -1,45 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { type ComponentProps } from '@vobs/runtime-dom';
-/**
- * Calendar picker template component (recipe layer, scheme A② — wraps plans into a ready-to-use component).
- *
- * `<k-calendar-picker :value="date" @update="onDate" />`
- *
- * - Input (readonly, opens on click) + calendar popover (rendered from createCalendarPlans, clicks handled via event delegation).
- * - Interaction state machine: open (popover toggle) + displayMonth (displayed month, prev/next rolls across years).
- * - Picking a day → emit('update', iso) + close the popover; outside click / Escape closes.
- * - SSR: renders only the input (popover is closed by default, client-only interaction).
- * - Styles: .kui-calendar-picker / .kui-calendar-* in components.css (same token source).
- */
-export type CalendarPickerProps = {
-    /** Selected value 'YYYY-MM-DD' (signal-backed, externally controlled). */
-    readonly value?: string;
-    /** Initial displayed month 'YYYY-MM' (default: the month of value, or the current month). */
-    readonly month?: string;
-    readonly min?: string;
-    readonly max?: string;
-    readonly disabled?: boolean;
-    readonly locale?: string;
-    readonly placeholder?: string;
-    readonly className?: string;
-    readonly [key: string]: unknown;
-};
-export interface CalendarPickerEvents extends Record<string, (...args: never[]) => unknown> {
-    /** Day picked: payload is 'YYYY-MM-DD'. */
-    update: (...args: readonly [iso: string]) => unknown;
-    /** Popover opened. */
-    open: (...args: readonly []) => unknown;
-    /** Popover closed. */
-    close: (...args: readonly []) => unknown;
-}
-export interface CalendarPickerScope {
-    readonly props: ComponentProps<CalendarPickerProps>;
-    readonly emit: <Name extends keyof CalendarPickerEvents & string>(name: Name, ...args: Parameters<CalendarPickerEvents[Name]>) => void;
-}
-/** Component definition: `<k-calendar-picker :value="date" @update="onDate" />`. */
-export declare const CalendarPicker: import("@vobs/runtime-core").ComponentDefinition<CalendarPickerProps, CalendarPickerEvents, CalendarPickerScope, Readonly<Record<string, Readonly<Record<string, unknown>>>>>;
-/** Server template (SSR): only the input (popover closed by default). */
-export declare const CalendarPickerServerTemplate: import("@vobs/server-renderer").ServerTemplate<CalendarPickerScope>;