@patchedcodes/hackathon-widget 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,91 @@
+# @patchedcodes/hackathon-widget
+
+AI-powered frontend editor widget — modify live web interfaces using natural language.
+
+Renders a floating chat button on your page. Users type a natural-language command, the widget captures a screenshot, sends it to your backend, and applies the resulting changes.
+
+## Install
+
+```bash
+npm install @patchedcodes/hackathon-widget
+```
+
+or
+
+```bash
+pnpm add @patchedcodes/hackathon-widget
+```
+
+## Quick Start
+
+```ts
+import { init } from "@patchedcodes/hackathon-widget";
+
+init({
+  endpoint: "https://your-backend.com/api/command",
+  projectId: "my-project",
+});
+```
+
+That's it. A floating button appears in the bottom-right corner of your page.
+
+## Configuration
+
+`init()` accepts a `WidgetConfig` object:
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `endpoint` | `string` | **(required)** | Backend URL that receives command POST requests. |
+| `projectId` | `string` | **(required)** | Project identifier sent with each request so the backend knows which repo to modify. |
+| `position` | `"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"` | `"bottom-right"` | Position of the floating widget button. |
+| `theme` | `"light" \| "dark"` | `"light"` | Widget color theme. |
+| `headers` | `Record<string, string>` | `{}` | Custom headers sent with backend requests (e.g. auth tokens). |
+| `onDeployReady` | `(branch: string, previewUrl: string) => void` | — | Called when a deployment is ready, before the user clicks "Apply". |
+| `onError` | `(error: Error) => void` | — | Called when an error occurs. |
+| `onOpen` | `() => void` | — | Called when the widget panel is opened. |
+| `onClose` | `() => void` | — | Called when the widget panel is closed. |
+
+## Callbacks
+
+```ts
+init({
+  endpoint: "https://your-backend.com/api/command",
+  projectId: "my-project",
+  onDeployReady: (branch, previewUrl) => {
+    console.log(`Deploy ready on branch ${branch}: ${previewUrl}`);
+  },
+  onError: (error) => {
+    console.error("Widget error:", error);
+  },
+  onOpen: () => console.log("Widget opened"),
+  onClose: () => console.log("Widget closed"),
+});
+```
+
+## Programmatic Control
+
+`init()` returns the underlying `DevloyedWidget` custom element, which exposes methods for programmatic control:
+
+```ts
+const widget = init({
+  endpoint: "https://your-backend.com/api/command",
+  projectId: "my-project",
+});
+
+// Open, close, or toggle the chat panel
+widget.open();
+widget.close();
+widget.toggle();
+```
+
+## TypeScript
+
+Types are shipped with the package — no separate `@types/` install needed. You can import them directly:
+
+```ts
+import type { WidgetConfig } from "@patchedcodes/hackathon-widget";
+```
+
+## License
+
+MIT