@vobs/ui 0.1.0

package/dist/workbench.js

@@ -0,0 +1,156 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+import { createUiDomPlan } from './primitives.js';
+export function createStatusBarPlans(options) {
+    return {
+        root: createUiDomPlan('div', 'status-bar', {
+            ...(options.className === undefined ? {} : { className: options.className }),
+            attrs: { id: `${options.id}-statusbar`, ...options.attrs },
+        }),
+        groups: options.groups.map((group) => ({
+            groupId: group.id,
+            items: group.items.map((item) => {
+                const plan = createUiDomPlan('span', 'status-bar-item', {
+                    ...(item.tone === undefined ? {} : { state: item.tone }),
+                    attrs: {
+                        id: `${options.id}-${group.id}-${item.id}`,
+                        ...(item.icon === undefined ? {} : { 'data-icon': item.icon }),
+                        ...(item.tone === undefined ? {} : { 'data-tone': item.tone }),
+                        'data-label': item.label,
+                    },
+                });
+                return {
+                    ...plan,
+                    itemId: item.id,
+                    label: item.label,
+                    ...(item.icon === undefined ? {} : { icon: item.icon }),
+                    ...(item.tone === undefined ? {} : { tone: item.tone }),
+                };
+            }),
+        })),
+    };
+}
+export function createActivityRailPlans(options) {
+    const entries = options.entries.map((entry) => {
+        const base = { entryId: entry.id };
+        switch (entry.kind) {
+            case 'button':
+                return {
+                    ...createUiDomPlan('button', 'activity-rail-button', {
+                        state: entry.active === true ? 'active' : 'idle',
+                        ...(entry.disabled === undefined ? {} : { disabled: entry.disabled }),
+                        attrs: {
+                            id: `${options.id}-${entry.id}`,
+                            type: 'button',
+                            ...(entry.icon === undefined ? {} : { 'data-icon': entry.icon }),
+                            'aria-pressed': entry.active === true ? 'true' : undefined,
+                        },
+                    }),
+                    ...base,
+                    kind: 'button',
+                    icon: entry.icon ?? '',
+                    active: entry.active === true,
+                };
+            case 'divider':
+                return {
+                    ...createUiDomPlan('div', 'activity-rail-divider', {
+                        attrs: { id: `${options.id}-${entry.id}` },
+                    }),
+                    ...base,
+                    kind: 'divider',
+                };
+            default:
+                return {
+                    ...createUiDomPlan('span', 'activity-rail-spacer', {
+                        attrs: { id: `${options.id}-${entry.id}` },
+                    }),
+                    ...base,
+                    kind: 'spacer',
+                };
+        }
+    });
+    return {
+        root: createUiDomPlan('nav', 'activity-rail', {
+            ...(options.className === undefined ? {} : { className: options.className }),
+            attrs: { id: `${options.id}-activityrail`, ...options.attrs },
+        }),
+        entries,
+    };
+}
+export function createWorkbenchTitlebarPlans(options) {
+    const lights = ['close', 'min', 'max'].map((kind) => createUiDomPlan('span', 'workbench-titlebar-light', {
+        state: kind,
+        attrs: { id: `${options.id}-light-${kind}`, 'data-light': kind, 'aria-hidden': 'true' },
+    }));
+    return {
+        root: createUiDomPlan('div', 'workbench-titlebar', {
+            ...(options.className === undefined ? {} : { className: options.className }),
+            attrs: { id: `${options.id}-titlebar`, ...options.attrs },
+        }),
+        left: createUiDomPlan('div', 'workbench-titlebar-left', {
+            attrs: { id: `${options.id}-left` },
+        }),
+        lights,
+        modeChip: createUiDomPlan('span', 'workbench-titlebar-mode-chip', {
+            attrs: {
+                id: `${options.id}-mode`,
+                ...(options.mode === undefined ? {} : { 'data-label': options.mode }),
+            },
+        }),
+        projectSelector: createUiDomPlan('button', 'workbench-titlebar-project-selector', {
+            attrs: {
+                id: `${options.id}-project`,
+                type: 'button',
+                ...(options.project === undefined ? {} : { 'data-label': options.project }),
+            },
+        }),
+        right: createUiDomPlan('div', 'workbench-titlebar-right', {
+            attrs: { id: `${options.id}-right` },
+        }),
+        actions: (options.actions ?? []).map((icon, index) => createUiDomPlan('button', 'workbench-titlebar-action', {
+            attrs: { id: `${options.id}-action-${index}`, type: 'button', 'data-icon': icon },
+        })),
+    };
+}
+export function createChatComposerPlans(options) {
+    const toolButtons = (options.tools ?? ['plus', 'link', 'image']).map((icon, index) => createUiDomPlan('button', 'chat-composer-tool', {
+        attrs: { id: `${options.id}-tool-${index}`, type: 'button', 'data-icon': icon },
+    }));
+    const actionButtons = (options.actions ?? ['mic']).map((icon, index) => createUiDomPlan('button', 'chat-composer-action', {
+        attrs: { id: `${options.id}-action-${index}`, type: 'button', 'data-icon': icon },
+    }));
+    return {
+        root: createUiDomPlan('div', 'chat-composer', {
+            ...(options.className === undefined ? {} : { className: options.className }),
+            attrs: { id: `${options.id}-composer`, ...options.attrs },
+        }),
+        input: createUiDomPlan('textarea', 'chat-composer-input', {
+            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
+            attrs: {
+                id: `${options.id}-input`,
+                ...(options.placeholder === undefined ? {} : { placeholder: options.placeholder }),
+                rows: '1',
+            },
+        }),
+        toolbar: createUiDomPlan('div', 'chat-composer-toolbar', {
+            attrs: { id: `${options.id}-toolbar` },
+        }),
+        tools: createUiDomPlan('div', 'chat-composer-tools', {
+            attrs: { id: `${options.id}-tools` },
+        }),
+        toolButtons,
+        modelSelector: createUiDomPlan('button', 'chat-composer-model', {
+            attrs: {
+                id: `${options.id}-model`,
+                type: 'button',
+                ...(options.model === undefined ? {} : { 'data-label': options.model }),
+            },
+        }),
+        actions: createUiDomPlan('div', 'chat-composer-actions', {
+            attrs: { id: `${options.id}-actions` },
+        }),
+        actionButtons,
+    };
+}

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@vobs/ui",
+  "version": "0.1.0",
+  "description": "Optional design tokens, layouts and UI components for vobs.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "author": "vobsjs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vobsjs/vobs.git",
+    "directory": "packages/features/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/vobsjs/vobs/issues"
+  },
+  "homepage": "https://github.com/vobsjs/vobs#readme",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./feedback": {
+      "types": "./dist/feedback.d.ts",
+      "import": "./dist/feedback.js"
+    },
+    "./app-shell": {
+      "types": "./dist/app-shell.d.ts",
+      "import": "./dist/app-shell.js"
+    },
+    "./complex-inputs": {
+      "types": "./dist/complex-inputs.d.ts",
+      "import": "./dist/complex-inputs.js"
+    },
+    "./data-display": {
+      "types": "./dist/data-display.d.ts",
+      "import": "./dist/data-display.js"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.js"
+    },
+    "./icons/config": {
+      "types": "./dist/icons-config.d.ts",
+      "import": "./dist/icons-config.js"
+    },
+    "./forms": {
+      "types": "./dist/forms.d.ts",
+      "import": "./dist/forms.js"
+    },
+    "./overlay": {
+      "types": "./dist/overlay.d.ts",
+      "import": "./dist/overlay.js"
+    },
+    "./navigation": {
+      "types": "./dist/navigation.d.ts",
+      "import": "./dist/navigation.js"
+    },
+    "./primitives": {
+      "types": "./dist/primitives.d.ts",
+      "import": "./dist/primitives.js"
+    },
+    "./locale/en-US": {
+      "types": "./dist/locale/en-US.d.ts",
+      "import": "./dist/locale/en-US.js"
+    },
+    "./locale/zh-CN": {
+      "types": "./dist/locale/zh-CN.d.ts",
+      "import": "./dist/locale/zh-CN.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./tree": {
+      "types": "./dist/tree.d.ts",
+      "import": "./dist/tree.js"
+    },
+    "./virtual-list": {
+      "types": "./dist/virtual-list.d.ts",
+      "import": "./dist/virtual-list.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./base.css": "./dist/base.css",
+    "./components.css": "./dist/components.css",
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "main": "./dist/index.js",
+  "dependencies": {
+    "@tanstack/virtual-core": "^3.17.7",
+    "@vobs/forms": "0.1.0",
+    "@vobs/i18n": "0.1.0",
+    "@vobs/icons": "0.1.0",
+    "@vobs/runtime-dom": "0.1.0",
+    "@vobs/router": "0.1.0",
+    "@vobs/server-renderer": "0.1.0",
+    "@vobs/reactivity": "0.1.0"
+  },
+  "sideEffects": [
+    "./dist/*.css"
+  ],
+  "engines": {
+    "node": ">=20.19.0"
+  }
+}