@vobs/ui 0.1.0

package/dist/icons-config.d.ts

@@ -0,0 +1,25 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+export interface IconConfig {
+    readonly sources: Readonly<Record<string, SvgIconSource>>;
+    readonly shell?: IconShellManifest;
+}
+export interface IconShellManifest {
+    readonly topbar?: readonly string[];
+    readonly sidebar?: readonly string[];
+    readonly statusbar?: readonly string[];
+}
+export interface SvgIconSource {
+    readonly kind: 'vobs.svg-icon-source';
+    readonly packageName: string;
+    readonly options?: SvgIconSourceOptions;
+}
+export interface SvgIconSourceOptions {
+    readonly size?: 16 | 20 | 24 | (number & {});
+    readonly variant?: string;
+    readonly path?: string;
+}
+export declare function defineIconConfig<const Config extends IconConfig>(config: Config): Config;
+export declare function svgIconSource(packageName: string, options?: SvgIconSourceOptions): SvgIconSource;

package/dist/icons-config.js

@@ -0,0 +1,14 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+export function defineIconConfig(config) {
+    return config;
+}
+export function svgIconSource(packageName, options) {
+    return {
+        kind: 'vobs.svg-icon-source',
+        packageName,
+        ...(options === undefined ? {} : { options }),
+    };
+}

package/dist/icons.d.ts

@@ -0,0 +1,41 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+import { createIconRegistry, type IconDefinition, type IconRegistry, type IconResolver } from '@vobs/icons';
+import { type ComponentProps, type InjectionKey } from '@vobs/runtime-dom';
+export interface UiIconEnvironment {
+    readonly icons?: IconRegistry | IconResolver;
+}
+export interface IconProps {
+    readonly name?: string;
+    readonly icon?: IconDefinition;
+    readonly title?: string;
+    readonly decorative?: boolean | string;
+    readonly size?: string | number;
+    readonly color?: string;
+}
+export interface UiIconRenderModel {
+    readonly icon: IconDefinition;
+    readonly title?: string;
+    readonly decorative?: boolean;
+    readonly size?: string | number;
+    readonly color?: string;
+}
+export type UiEnvironment = UiIconEnvironment;
+export type CreateUiEnvironmentOptions = UiIconEnvironment;
+export type UiIconSource = UiIconEnvironment | IconRegistry | IconResolver;
+export interface UiIconProviderContext {
+    provide<T>(key: InjectionKey<T>, value: T): () => void;
+}
+export declare const UiIconEnvironmentKey: InjectionKey<UiIconEnvironment>;
+export declare function createUiEnvironment(options?: CreateUiEnvironmentOptions): UiEnvironment;
+export declare function provideUiIcons(context: UiIconProviderContext, source: UiIconSource): () => void;
+export declare function resolveUiIcon(environment: UiIconEnvironment, icon: IconDefinition | string): IconDefinition | undefined;
+export declare function createIconRenderModel(props: ComponentProps<IconProps>, environment: UiIconEnvironment): UiIconRenderModel;
+export declare const Icon: import("@vobs/runtime-core").ComponentDefinition<IconProps, Record<string, never>, IconComponentScope, Readonly<Record<string, Readonly<Record<string, unknown>>>>>;
+interface IconComponentScope {
+    readonly props: ComponentProps<IconProps>;
+    readonly environment: UiIconEnvironment;
+}
+export { createIconRegistry, type IconDefinition, type IconRegistry, type IconResolver };

package/dist/icons.js

@@ -0,0 +1,185 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+import { createIconElement, createIconRegistry, resolveIcon, } from '@vobs/icons';
+import { effect } from '@vobs/reactivity';
+import { createCompiledTemplate, createInjectionKey, createRuntimeError, defineComponent, } from '@vobs/runtime-dom';
+export const UiIconEnvironmentKey = createInjectionKey('vobs.ui.icons');
+export function createUiEnvironment(options = {}) {
+    return options.icons === undefined ? {} : { icons: options.icons };
+}
+export function provideUiIcons(context, source) {
+    return context.provide(UiIconEnvironmentKey, normalizeUiIconEnvironment(source));
+}
+export function resolveUiIcon(environment, icon) {
+    return resolveIcon(icon, environment.icons);
+}
+export function createIconRenderModel(props, environment) {
+    const icon = resolveIconProp(props, environment);
+    return {
+        icon,
+        ...readIconTitle(props),
+        ...readIconDecorative(props),
+        ...readIconSize(props),
+        ...readIconColor(props),
+    };
+}
+export const Icon = defineComponent({
+    template: createCompiledTemplate({
+        templateId: 'k-icon',
+        sourceId: '@vobs/ui/icons',
+        rootTag: 'svg',
+        mount(owner, scope, environment) {
+            const root = document.createElementNS(svgNamespace, 'svg');
+            applyProtocolAttributes(root);
+            applyBaseClass(root);
+            bindIconRoot(owner, root, scope, environment);
+            return { root, refs: {} };
+        },
+        hydrate(owner, root, scope, environment) {
+            const svg = root;
+            applyProtocolAttributes(svg);
+            applyBaseClass(svg);
+            bindIconRoot(owner, svg, scope, environment);
+            return { root: svg, refs: {} };
+        },
+    }),
+    props: ['name', 'icon', 'title', 'decorative', 'size', 'color'],
+    setup(context) {
+        return {
+            props: context.props,
+            environment: context.maybeInject(UiIconEnvironmentKey) ?? createUiEnvironment(),
+        };
+    },
+});
+const svgNamespace = 'http://www.w3.org/2000/svg';
+function bindIconRoot(owner, root, scope, environment) {
+    owner.run(() => {
+        const stop = effect(() => {
+            const model = createIconRenderModel(scope.props, scope.environment);
+            renderIconRoot(root, model);
+        }, { scheduler: environment.scheduler });
+        owner.own(stop);
+    });
+}
+function renderIconRoot(root, model) {
+    const next = createIconElement(document, model.icon, toIconRenderOptions(model));
+    applyProtocolAttributes(next);
+    next.setAttribute('data-icon-name', model.icon.name);
+    root.replaceChildren(...Array.from(next.childNodes).map((node) => node.cloneNode(true)));
+    syncIconAttributes(root, next);
+    applyIconPresentation(root, model);
+}
+function syncIconAttributes(root, source) {
+    for (const attribute of controlledIconAttributes)
+        root.removeAttribute(attribute);
+    for (const attribute of Array.from(source.attributes)) {
+        root.setAttribute(attribute.name, attribute.value);
+    }
+}
+const controlledIconAttributes = [
+    'xmlns',
+    'viewBox',
+    'width',
+    'height',
+    'fill',
+    'aria-hidden',
+    'role',
+    'aria-label',
+    'color',
+    'data-icon-name',
+    'data-vobs-template',
+    'data-vobs-protocol',
+];
+function toIconRenderOptions(model) {
+    return {
+        ...readDefined('title', model.title),
+        ...readDefined('decorative', model.decorative),
+        ...readDefined('size', normalizeIconSize(model.size)),
+    };
+}
+function resolveIconProp(props, environment) {
+    const direct = props.icon?.value;
+    if (direct !== undefined)
+        return direct;
+    const name = readOptionalString(props.name?.value);
+    if (name === undefined) {
+        throw createRuntimeError('KUI001', 'Icon requires either `name` or `icon`');
+    }
+    const icon = resolveUiIcon(environment, name);
+    if (icon === undefined) {
+        throw createRuntimeError('KUI002', `Icon is not registered: ${name}`);
+    }
+    return icon;
+}
+function normalizeUiIconEnvironment(source) {
+    if (typeof source === 'function')
+        return { icons: source };
+    if ('resolve' in source)
+        return { icons: source };
+    return source;
+}
+function readIconTitle(props) {
+    const title = readOptionalString(props.title?.value);
+    return title === undefined ? {} : { title };
+}
+function readIconDecorative(props) {
+    const decorative = readOptionalBoolean(props.decorative?.value);
+    return decorative === undefined ? {} : { decorative };
+}
+function readIconSize(props) {
+    const size = props.size?.value;
+    return typeof size === 'string' || typeof size === 'number' ? { size } : {};
+}
+function readIconColor(props) {
+    const color = readOptionalString(props.color?.value);
+    return color === undefined ? {} : { color };
+}
+function readOptionalString(value) {
+    return typeof value === 'string' && value.length > 0 ? value : undefined;
+}
+function readOptionalBoolean(value) {
+    if (typeof value === 'boolean')
+        return value;
+    if (value === '')
+        return true;
+    if (value === 'true')
+        return true;
+    if (value === 'false')
+        return false;
+    return undefined;
+}
+function readDefined(name, value) {
+    return (value === undefined ? {} : { [name]: value });
+}
+function applyProtocolAttributes(root) {
+    root.setAttribute('data-vobs-template', 'k-icon');
+    root.setAttribute('data-vobs-protocol', '1');
+}
+function applyBaseClass(root) {
+    root.classList.add('k-icon');
+}
+function applyIconPresentation(root, model) {
+    if (model.color === undefined)
+        root.removeAttribute('color');
+    else
+        root.setAttribute('color', model.color);
+}
+function normalizeIconSize(size) {
+    if (size === undefined || typeof size === 'number')
+        return size;
+    switch (size) {
+        case 'xs':
+            return 'var(--k-icon-xs)';
+        case 'sm':
+            return 'var(--k-icon-sm)';
+        case 'md':
+            return 'var(--k-icon-md)';
+        case 'lg':
+            return 'var(--k-icon-lg)';
+        default:
+            return /^\d+(?:\.\d+)?$/u.test(size) ? `${size}px` : size;
+    }
+}
+export { createIconRegistry };

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+import { type ComponentRegistry, type InjectionScope } from '@vobs/runtime-dom';
+import { type AppShellConfigInput } from './app-shell.js';
+import { type UiIconSource } from './icons.js';
+export * from './theme.js';
+export * from './icons.js';
+export * from './calendar.js';
+export * from './calendar-picker.js';
+export * from './workbench.js';
+export { AppShell, UiAppShellEnvironmentKey, createAppShellRegistry, defineAppShell, defineAppShellConfig, provideUiAppShells, resolveActiveAppShellNavItemId, resolveAppShellState, resolveAppShellStatus, type AppShellAccountConfig, type AppShellAccountMenuItem, type AppShellAccountMenuItemKind, type AppShellAccountMenuItemTone, type AppShellAction, type AppShellBrandConfig, type AppShellConfigInput, type AppShellContentMode, type AppShellDefinition, type AppShellDefinitionRecord, type AppShellNavigationConfig, type AppShellNavItem, type AppShellNavItemTone, type AppShellPageHeaderConfig, type AppShellProps, type AppShellRegistry, type AppShellRouteConfig, type AppShellSidebarMode, type AppShellStatusbarConfig, type AppShellThemeIconConfig, type AppShellThemeConfig, type AppShellTopbarConfig, type ResolvedAppShellState, type ResolvedAppShellStatus, } from './app-shell.js';
+export interface SetupUiOptions {
+    readonly icons?: true | UiIconSource;
+    readonly appShells?: AppShellConfigInput;
+}
+export interface UiSetupEnvironment {
+    readonly components: ComponentRegistry;
+    readonly injections?: InjectionScope;
+}
+export declare function setupUi(options?: SetupUiOptions): UiSetupEnvironment;

package/dist/index.js

@@ -0,0 +1,32 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+import { createInjectionScope, } from '@vobs/runtime-dom';
+import { AppShell, provideUiAppShells } from './app-shell.js';
+import { CalendarPicker } from './calendar-picker.js';
+import { Icon, provideUiIcons } from './icons.js';
+export * from './theme.js';
+export * from './icons.js';
+export * from './calendar.js';
+export * from './calendar-picker.js';
+export * from './workbench.js';
+export { AppShell, UiAppShellEnvironmentKey, createAppShellRegistry, defineAppShell, defineAppShellConfig, provideUiAppShells, resolveActiveAppShellNavItemId, resolveAppShellState, resolveAppShellStatus, } from './app-shell.js';
+export function setupUi(options = {}) {
+    const components = {
+        'k-app-shell': AppShell,
+        'k-icon': Icon,
+        'k-calendar-picker': CalendarPicker,
+    };
+    const injections = createInjectionScope();
+    if (options.icons !== undefined && options.icons !== true) {
+        provideUiIcons(injections, options.icons);
+    }
+    if (options.appShells !== undefined) {
+        provideUiAppShells(injections, options.appShells);
+    }
+    if (options.icons === undefined || options.icons === true) {
+        return options.appShells === undefined ? { components } : { components, injections };
+    }
+    return { components, injections };
+}

package/dist/locale/en-US.d.ts

@@ -0,0 +1,31 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+export declare const enUSLocale = "en-US";
+export declare const enUSMessages: {
+    close: string;
+    previous: string;
+    next: string;
+    noData: string;
+    loading: string;
+    chooseDate: string;
+    notification: string;
+    menu: string;
+    tabs: string;
+};
+declare const _default: {
+    locale: string;
+    messages: {
+        close: string;
+        previous: string;
+        next: string;
+        noData: string;
+        loading: string;
+        chooseDate: string;
+        notification: string;
+        menu: string;
+        tabs: string;
+    };
+};
+export default _default;

package/dist/locale/en-US.js

@@ -0,0 +1,20 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+export const enUSLocale = 'en-US';
+export const enUSMessages = {
+    close: 'Close',
+    previous: 'Previous',
+    next: 'Next',
+    noData: 'No data',
+    loading: 'Loading',
+    chooseDate: 'Choose date',
+    notification: 'Notification',
+    menu: 'Menu',
+    tabs: 'Tabs',
+};
+export default {
+    locale: enUSLocale,
+    messages: enUSMessages,
+};

package/dist/locale/zh-CN.d.ts

@@ -0,0 +1,31 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+export declare const zhCNLocale = "zh-CN";
+export declare const zhCNMessages: {
+    close: string;
+    previous: string;
+    next: string;
+    noData: string;
+    loading: string;
+    chooseDate: string;
+    notification: string;
+    menu: string;
+    tabs: string;
+};
+declare const _default: {
+    locale: string;
+    messages: {
+        close: string;
+        previous: string;
+        next: string;
+        noData: string;
+        loading: string;
+        chooseDate: string;
+        notification: string;
+        menu: string;
+        tabs: string;
+    };
+};
+export default _default;

package/dist/locale/zh-CN.js

@@ -0,0 +1,20 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+export const zhCNLocale = 'zh-CN';
+export const zhCNMessages = {
+    close: '关闭',
+    previous: '上一页',
+    next: '下一页',
+    noData: '暂无数据',
+    loading: '加载中',
+    chooseDate: '选择日期',
+    notification: '通知',
+    menu: '菜单',
+    tabs: '标签页',
+};
+export default {
+    locale: zhCNLocale,
+    messages: zhCNMessages,
+};