@yartsun/hypershadow-widget 0.1.4 → 0.1.5

package/README.md

@@ -12,11 +12,98 @@ Chat widget for Hypershadow platform with WebSocket communication.
 # Install dependencies
 npm i
 
-# Build the project
+# Build the main demo app (for local development)
 npm run build
+
+# Build library bundle (used as npm package entry)
+npm run build:lib
+
+# Build standalone bundle (for script tag / external embedding)
+npm run build:vanilla
+
+# Build everything
+npm run build:all
+```
+
+Build output will be located in the `/dist` directory:
+
+- `dist/lib` – library build used by `@yartsun/hypershadow-widget`
+- `dist/standalone` – standalone build (IIFE + ES module)
+
+## Library usage (ESM / TypeScript)
+
+Install the package:
+
+```bash
+npm i @yartsun/hypershadow-widget
+```
+
+Use the library entry (components/helpers from `dist/lib`), for example:
+
+```ts
+import { /* your exports */ } from '@yartsun/hypershadow-widget';
+```
+
+### Standalone entry (ESM)
+
+For embedding the widget into any host app (Nuxt, React, vanilla, etc.) you can use the
+standalone entry that is now exported via package `exports`:
+
+```ts
+import { mount } from '@yartsun/hypershadow-widget/standalone';
+
+mount({
+  target: '#chat-widget',
+  props: {
+    isEmbedded: true,
+    isPreview: true,
+    // link: 'wss://your-websocket-server.com/chat',
+    // configWidget: { ... }
+  },
+});
+```
+
+This entry is backed by:
+
+- JS: `dist/standalone/hs-widget.es.js`
+- Types: `types/standalone.d.ts`
+
+### ESM usage examples
+
+**Nuxt / Vue (client-only mount)**:
+
+```ts
+// Any client-only hook (e.g. onMounted in a component)
+import { mount } from '@yartsun/hypershadow-widget/standalone';
+
+onMounted(() => {
+  mount({
+    target: '#chat-widget',
+    props: {
+      isEmbedded: true,
+      isPreview: true,
+    },
+  });
+});
+```
+
+**Plain ESM/TypeScript app**:
+
+```ts
+import { mount } from '@yartsun/hypershadow-widget/standalone';
+
+document.addEventListener('DOMContentLoaded', () => {
+  mount({
+    target: '#chat-widget',
+    props: {
+      link: 'wss://your-websocket-server.com/chat',
+    },
+  });
+});
 ```
 
-Build output will be located in the `/dist` directory
+For `<script>`/IIFE-based usage and more advanced configuration examples,
+see `STANDALONE.md`.
 
 ## Module Federation Usage
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yartsun/hypershadow-widget",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/types/standalone.d.ts

@@ -2,15 +2,28 @@
 // This file is shipped with the npm package and is used for ESM/TS imports like:
 //   import { mount } from '@yartsun/hypershadow-widget/standalone';
 
-import type { App } from 'vue';
-
 export type StandaloneMountOptions = {
   target: string | HTMLElement;
   props?: Record<string, any>;
 };
 
-// Mounts the chat widget into the given DOM target and returns the Vue app instance.
-export declare function mount(options: StandaloneMountOptions): App<Element>;
+export interface StandaloneWidgetApi {
+  id: string | any;
+  setScenario: (type: string, options?: any) => Promise<void>;
+  clearScenario: () => Promise<void>;
+  setOpen: (open: boolean) => void;
+  setActive: (active: boolean) => void;
+  setInputDisabled: (disabled: boolean) => void;
+  setShowReconnectNotice: (show: boolean) => void;
+  setMessages: (list: any[]) => void;
+  pushMessage: (msg: any) => void;
+  setSnippet: (data: any | null) => void;
+  resetToLive: () => Promise<void>;
+}
+
+// Mounts the chat widget into the given DOM target and returns the same control API
+// object that is registered in window.hswWidgets[widgetId].
+export declare function mount(options: StandaloneMountOptions): StandaloneWidgetApi;
 
 declare const _default: {
   mount: typeof mount;