{"_id":"@boryslav-golubiev/webui","name":"@boryslav-golubiev/webui","dist-tags":{"latest":"0.14.1"},"versions":{"0.14.1":{"name":"@boryslav-golubiev/webui","version":"0.14.1","description":"Shared UI components for Qwen Code packages","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./followup":{"types":"./dist/followup.d.ts","import":"./dist/followup.js","require":"./dist/followup.cjs"},"./icons":{"types":"./dist/components/icons/index.d.ts","import":"./dist/components/icons/index.js","require":"./dist/components/icons/index.cjs"},"./tailwind.preset":"./tailwind.preset.cjs","./styles.css":"./dist/styles.css"},"sideEffects":["**/*.css"],"publishConfig":{"access":"public"},"scripts":{"dev":"vite build --watch","build":"vite build && vite build --config vite.config.followup.ts","typecheck":"tsc --noEmit","lint":"eslint src --ext .ts,.tsx","lint:fix":"eslint src --ext .ts,.tsx --fix","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"peerDependencies":{"@boryslav-golubiev/qwen-code-plus-core":">=0.13.1","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"@boryslav-golubiev/qwen-code-plus-core":{"optional":true}},"dependencies":{"markdown-it":"^14.1.0"},"devDependencies":{"@types/markdown-it":"^14.1.2","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","@vitejs/plugin-react":"^4.2.0","autoprefixer":"^10.4.0","postcss":"^8.4.0","tailwindcss":"^3.4.0","typescript":"^5.0.0","vite":"^5.0.0","vite-plugin-dts":"^4.5.4","storybook":"^10.1.11","@storybook/react-vite":"^10.1.11","@chromatic-com/storybook":"^5.0.0","@storybook/addon-vitest":"^10.1.11","@storybook/addon-a11y":"^10.1.11","@storybook/addon-docs":"^10.1.11","@storybook/addon-onboarding":"^10.1.11","eslint-plugin-storybook":"^10.1.11","playwright":"^1.57.0","@vitest/browser":"^3.2.4","@vitest/coverage-v8":"^3.2.4"},"keywords":["qwen","ui","components","shared"],"author":{"name":"Qwen Team"},"license":"MIT","gitHead":"6785a8d9089c82fe90268e97c3e31d612023656f","_id":"@boryslav-golubiev/webui@0.14.1","_nodeVersion":"25.8.2","_npmVersion":"11.11.1","dist":{"integrity":"sha512-r2pj0o8cRCR/zpEppJS65VUSlMXKlaoHhRz4H/c8vJKHBBlSMfbazN/hlAUrzBidba0u6nXIA2rA8D/kjTFZ3A==","shasum":"6f011ec27e415b304ea2943838420cdf7ae5a73a","tarball":"https://registry.npmjs.org/@boryslav-golubiev/webui/-/webui-0.14.1.tgz","fileCount":17,"unpackedSize":3698077,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCveJ6PNQJ8JK2DTNrWGH0Mj+mK1cjMOIZs63+fJ91fYwIgGUGnuxNZ/mE78cGQtDjZJJC7zc2rDuxyqJIFEOhnbdE="}]},"_npmUser":{"name":"boryslav-golubiev","email":"borislav.golu@gmail.com"},"directories":{},"maintainers":[{"name":"boryslav-golubiev","email":"borislav.golu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/webui_0.14.1_1775515379034_0.4935562024900355"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-06T22:42:58.934Z","0.14.1":"2026-04-06T22:42:59.288Z","modified":"2026-04-06T22:42:59.802Z"},"maintainers":[{"name":"boryslav-golubiev","email":"borislav.golu@gmail.com"}],"description":"Shared UI components for Qwen Code packages","keywords":["qwen","ui","components","shared"],"author":{"name":"Qwen Team"},"license":"MIT","readme":"# @qwen-code/webui\n\nA shared React component library for Qwen Code applications, providing cross-platform UI components with consistent styling and behavior.\n\n## Features\n\n- **Cross-platform support**: Components work seamlessly across VS Code extension, web, and other platforms\n- **Platform Context**: Abstraction layer for platform-specific capabilities\n- **Tailwind CSS**: Shared styling preset for consistent design\n- **TypeScript**: Full type definitions for all components\n- **Storybook**: Interactive component documentation and development\n- **Multiple Build Formats**: Supports ESM, CJS, and UMD formats for different environments\n- **CDN Usage**: Can be loaded directly in browsers via CDN\n\n## Installation\n\n```bash\nnpm install @qwen-code/webui\n```\n\n## CDN Usage\n\nYou can also use this library directly in the browser via CDN:\n\n### Option 1: With JSX Support (using Babel)\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <!-- Load React -->\n    <script\n      crossorigin\n      src=\"https://unpkg.com/react@18/umd/react.production.min.js\"\n    ></script>\n    <script\n      crossorigin\n      src=\"https://unpkg.com/react-dom@18/umd/react-dom.production.min.js\"\n    ></script>\n\n    <!-- Load Babel Standalone for JSX processing -->\n    <script src=\"https://unpkg.com/@babel/standalone@7.23.6/babel.min.js\"></script>\n\n    <!-- Manually create the jsxRuntime object to satisfy the dependency -->\n    <script>\n      // Provide a minimal JSX runtime for builds that expect react/jsx-runtime globals.\n      const withKey = (props, key) =>\n        key == null ? props : Object.assign({}, props, { key });\n      const jsx = (type, props, key) =>\n        React.createElement(type, withKey(props, key));\n      const jsxRuntime = {\n        Fragment: React.Fragment,\n        jsx,\n        jsxs: jsx,\n        jsxDEV: jsx,\n      };\n\n      window.ReactJSXRuntime = jsxRuntime;\n      window['react/jsx-runtime'] = jsxRuntime;\n      window['react/jsx-dev-runtime'] = jsxRuntime;\n    </script>\n\n    <!-- Load the webui library -->\n    <script src=\"https://unpkg.com/@qwen-code/webui@0.1.0-beta.2/dist/index.umd.js\"></script>\n\n    <!-- Load the CSS -->\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/@qwen-code/webui@0.1.0-beta.2/dist/styles.css\"\n    />\n  </head>\n  <body>\n    <div id=\"root\"></div>\n\n    <script type=\"text/babel\">\n      // Access components from the global QwenCodeWebUI object\n      const { ChatViewer } = QwenCodeWebUI;\n\n      // Use the components with JSX support\n      const App = () => (\n        <ChatViewer messages={/* your messages */} />\n      );\n\n      ReactDOM.render(<App />, document.getElementById('root'));\n    </script>\n  </body>\n</html>\n```\n\n### Option 2: Without JSX (using React.createElement directly)\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <!-- Load React -->\n    <script\n      crossorigin\n      src=\"https://unpkg.com/react@18/umd/react.production.min.js\"\n    ></script>\n    <script\n      crossorigin\n      src=\"https://unpkg.com/react-dom@18/umd/react-dom.production.min.js\"\n    ></script>\n\n    <!-- Manually create the jsxRuntime object to satisfy the dependency -->\n    <script>\n      // Provide a minimal JSX runtime for builds that expect react/jsx-runtime globals.\n      const withKey = (props, key) =>\n        key == null ? props : Object.assign({}, props, { key });\n      const jsx = (type, props, key) =>\n        React.createElement(type, withKey(props, key));\n      const jsxRuntime = {\n        Fragment: React.Fragment,\n        jsx,\n        jsxs: jsx,\n        jsxDEV: jsx,\n      };\n\n      window.ReactJSXRuntime = jsxRuntime;\n      window['react/jsx-runtime'] = jsxRuntime;\n      window['react/jsx-dev-runtime'] = jsxRuntime;\n    </script>\n\n    <!-- Load the webui library -->\n    <script src=\"https://unpkg.com/@qwen-code/webui@0.1.0-beta.2/dist/index.umd.js\"></script>\n\n    <!-- Load the CSS -->\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/@qwen-code/webui@0.1.0-beta.2/dist/styles.css\"\n    />\n  </head>\n  <body>\n    <div id=\"root\"></div>\n\n    <script>\n      // Access components from the global QwenCodeWebUI object\n      const { ChatViewer } = QwenCodeWebUI;\n\n      // Use the components with React.createElement (no JSX)\n      const App = React.createElement(ChatViewer, {\n        messages: [\n          /* your messages */\n        ],\n      });\n\n      ReactDOM.render(App, document.getElementById('root'));\n    </script>\n  </body>\n</html>\n```\n\nFor a complete working example, see [examples/cdn-usage-demo.html](./examples/cdn-usage-demo.html).\n\n## Quick Start\n\n```tsx\nimport { Button, Input, Tooltip } from '@qwen-code/webui';\nimport { PlatformProvider } from '@qwen-code/webui/context';\n\nfunction App() {\n  return (\n    <PlatformProvider value={platformContext}>\n      <Button variant=\"primary\" onClick={handleClick}>\n        Click me\n      </Button>\n    </PlatformProvider>\n  );\n}\n```\n\n## Components\n\n### UI Components\n\n#### Button\n\n```tsx\nimport { Button } from '@qwen-code/webui';\n\n<Button variant=\"primary\" size=\"md\" loading={false}>\n  Submit\n</Button>;\n```\n\n**Props:**\n\n- `variant`: 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline'\n- `size`: 'sm' | 'md' | 'lg'\n- `loading`: boolean\n- `leftIcon`: ReactNode\n- `rightIcon`: ReactNode\n- `fullWidth`: boolean\n\n#### Input\n\n```tsx\nimport { Input } from '@qwen-code/webui';\n\n<Input\n  label=\"Email\"\n  placeholder=\"Enter email\"\n  error={hasError}\n  errorMessage=\"Invalid email\"\n/>;\n```\n\n**Props:**\n\n- `size`: 'sm' | 'md' | 'lg'\n- `error`: boolean\n- `errorMessage`: string\n- `label`: string\n- `helperText`: string\n- `leftElement`: ReactNode\n- `rightElement`: ReactNode\n\n#### Tooltip\n\n```tsx\nimport { Tooltip } from '@qwen-code/webui';\n\n<Tooltip content=\"Helpful tip\">\n  <span>Hover me</span>\n</Tooltip>;\n```\n\n### Icons\n\n```tsx\nimport { FileIcon, FolderIcon, CheckIcon } from '@qwen-code/webui/icons';\n\n<FileIcon size={16} className=\"text-gray-500\" />;\n```\n\nAvailable icon categories:\n\n- **FileIcons**: FileIcon, FolderIcon, SaveDocumentIcon\n- **StatusIcons**: CheckIcon, ErrorIcon, WarningIcon, LoadingIcon\n- **NavigationIcons**: ArrowLeftIcon, ArrowRightIcon, ChevronIcon\n- **EditIcons**: EditIcon, DeleteIcon, CopyIcon\n- **SpecialIcons**: SendIcon, StopIcon, CloseIcon\n\n### Layout Components\n\n- `Container`: Main layout wrapper\n- `Header`: Application header\n- `Footer`: Application footer\n- `Sidebar`: Side navigation\n- `Main`: Main content area\n\n### Message Components\n\n- `Message`: Chat message display\n- `MessageList`: List of messages\n- `MessageInput`: Message input field\n- `WaitingMessage`: Loading/waiting state\n- `InterruptedMessage`: Interrupted state display\n\n## Platform Context\n\nThe Platform Context provides an abstraction layer for platform-specific capabilities:\n\n```tsx\nimport { PlatformProvider, usePlatform } from '@qwen-code/webui/context';\n\nconst platformContext = {\n  postMessage: (message) => vscode.postMessage(message),\n  onMessage: (handler) => {\n    window.addEventListener('message', handler);\n    return () => window.removeEventListener('message', handler);\n  },\n  openFile: (path) => {\n    /* platform-specific */\n  },\n  platform: 'vscode',\n};\n\nfunction App() {\n  return (\n    <PlatformProvider value={platformContext}>\n      <YourApp />\n    </PlatformProvider>\n  );\n}\n\nfunction Component() {\n  const { postMessage, platform } = usePlatform();\n  // Use platform capabilities\n}\n```\n\n## Tailwind Preset\n\nUse the shared Tailwind preset for consistent styling:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  presets: [require('@qwen-code/webui/tailwind.preset.cjs')],\n  // your customizations\n};\n```\n\n## Development\n\n### Running Storybook\n\n```bash\ncd packages/webui\nnpm run storybook\n```\n\n### Building\n\n```bash\nnpm run build\n```\n\n### Type Checking\n\n```bash\nnpm run typecheck\n```\n\n## Project Structure\n\n```\npackages/webui/\n├── src/\n│   ├── components/\n│   │   ├── icons/          # Icon components\n│   │   ├── layout/         # Layout components\n│   │   ├── messages/       # Message components\n│   │   └── ui/             # UI primitives\n│   ├── context/            # Platform context\n│   ├── hooks/              # Custom hooks\n│   └── types/              # Type definitions\n├── .storybook/             # Storybook config\n├── tailwind.preset.cjs     # Shared Tailwind preset\n└── vite.config.ts          # Build configuration\n```\n\n## License\n\nApache-2.0\n","readmeFilename":"README.md","_rev":"1-ee2fbb84230ea76c5c19260aaeb6f6b3"}