{"_id":"@athon-labs/help-widget-svelte","name":"@athon-labs/help-widget-svelte","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@athon-labs/help-widget-svelte","version":"0.0.1","private":false,"type":"module","description":"Svelte help widget that reports issues to your backend for Athon ingest.","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"publishConfig":{"access":"public"},"dependencies":{"@athon-labs/help-widget-core":"^0.0.1"},"peerDependencies":{"svelte":"^5.0.0"},"devDependencies":{"@sveltejs/package":"^2.5.0","svelte":"^5.30.2","svelte-check":"^4.3.0","typescript":"^5.8.3"},"scripts":{"build":"svelte-package -i src/lib","typecheck":"svelte-check --tsconfig ./tsconfig.json"},"_id":"@athon-labs/help-widget-svelte@0.0.1","_integrity":"sha512-Kfi/y/pDN6F7h6r7qlbGZnIu18XfjwOI3QSzCkPThXhOKCt6GURDpSPujJzCoIkv2m7riEfD2FuD2E7JoQVG6w==","_resolved":"/private/var/folders/29/mc0szw4x6370qzrffd0xbg_w0000gn/T/ef43960412a785c132da8aaf74f932db/athon-labs-help-widget-svelte-0.0.1.tgz","_from":"file:athon-labs-help-widget-svelte-0.0.1.tgz","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-Kfi/y/pDN6F7h6r7qlbGZnIu18XfjwOI3QSzCkPThXhOKCt6GURDpSPujJzCoIkv2m7riEfD2FuD2E7JoQVG6w==","shasum":"74037273bfe6a3d3ba1a2ae93df9e27876671e96","tarball":"https://registry.npmjs.org/@athon-labs/help-widget-svelte/-/help-widget-svelte-0.0.1.tgz","fileCount":6,"unpackedSize":16447,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHAAqZO0St5Sv/ZAvYY4ZCsSVLfWVJOVKD7KOv3iPn9QAiAYzw0D12bq0bVAJk0M6oDWtWrXkvcdJ1m4XkrmgNyUhQ=="}]},"_npmUser":{"name":"thethind","email":"harminder@thind.dev"},"directories":{},"maintainers":[{"name":"thethind","email":"harminder@thind.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/help-widget-svelte_0.0.1_1787332136691_0.7500744490456672"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-21T17:08:56.446Z","0.0.1":"2026-08-21T17:08:56.863Z","modified":"2026-08-21T17:08:57.085Z"},"maintainers":[{"name":"thethind","email":"harminder@thind.dev"}],"description":"Svelte help widget that reports issues to your backend for Athon ingest.","readme":"# @athon-labs/help-widget-svelte\n\nSvelte 5 help widget for SvelteKit or plain Svelte. Pass the logged-in user and a URL on **your** backend. The widget POSTs title, message, reporter fields, and screenshots there. Keep the Athon `sk_live_*` key on the server.\n\n## Install\n\n```bash\nnpm install @athon-labs/help-widget-svelte\n```\n\n## Usage\n\n```svelte\n<script lang=\"ts\">\n  import { HelpWidget } from '@athon-labs/help-widget-svelte';\n\n  let { user }: { user: { id: string; email: string; name: string } } = $props();\n</script>\n\n<HelpWidget\n  endpoint=\"/api/support/report\"\n  {user}\n  color=\"#3d8f78\"\n  launcher=\"help\"\n  position=\"bottom-right\"\n  metadata={{ userType: user.role, phone: user.phone, profilePicture: user.avatarUrl }}\n/>\n```\n\n## Props\n\n| Prop | Type | Notes |\n| --- | --- | --- |\n| `endpoint` | `string` | Your backend URL. Required. |\n| `user` | `{ id, email, name }` | Currently logged-in user. Required. |\n| `headers` | `Record<string, string>` | Extra request headers. |\n| `credentials` | `RequestCredentials` | Defaults to `include` so session cookies are sent. |\n| `defaultTitle` | `string` | Prefills the title field. |\n| `color` | `string` | Brand color for the launcher, header, and send button. Defaults to Athon verdigris. |\n| `launcher` | `'help' \\\\| 'bug'` | `help` shows the word Help. `bug` shows a bug icon. |\n| `position` | `'bottom-right' \\\\| 'bottom-left' \\\\| 'top-right' \\\\| 'top-left'` | Corner. Defaults to `bottom-right`. |\n| `metadata` | `Record<string, string \\\\| number \\\\| boolean \\\\| null>` | Extra key-values stored on the issue (user type, phone, avatar, …). |\n| `onSuccess` | `(result: unknown) => void` | Called with the JSON body from your endpoint. |\n| `onError` | `(error: Error) => void` | Called when capture or submit fails. |\n| `class` | `string` | Added to the launcher root. |\n\n## Screenshots\n\nUsers can capture the entire screen, the current window/tab, or attach photos. The browser will prompt for screen-share permission. Dismissing the picker is ignored. Images must be PNG, JPEG, WebP, or GIF (max 5).\n\n## Backend proxy\n\nThe widget does not talk to Athon directly. Your server receives the multipart POST, adds `appId` (or `projectId`) and `Authorization: Bearer sk_live_…`, then forwards to Athon ingest.\n\n```bash\nATHON_LIVE_KEY=sk_live_…\nATHON_APP_ID=app_…\nATHON_INGEST_URL=https://YOUR_ATHON_HOST/api/v1/ingest/issues\n```\n\n### SvelteKit\n\n`src/routes/api/support/report/+server.ts`:\n\n```ts\nimport { env } from '$env/dynamic/private';\nimport type { RequestHandler } from './$types';\n\nexport const POST: RequestHandler = async ({ request }) => {\n  const form = await request.formData();\n  form.set('appId', env.ATHON_APP_ID);\n\n  const upstream = await fetch(env.ATHON_INGEST_URL, {\n    method: 'POST',\n    headers: { Authorization: `Bearer ${env.ATHON_LIVE_KEY}` },\n    body: form,\n  });\n\n  return new Response(await upstream.text(), {\n    status: upstream.status,\n    headers: { 'content-type': upstream.headers.get('content-type') ?? 'application/json' },\n  });\n};\n```\n\nPoint `<HelpWidget endpoint=\"/api/support/report\" />` at that route.\n\n### Next.js\n\n`app/api/support/report/route.ts`:\n\n```ts\nexport async function POST(request: Request) {\n  const form = await request.formData();\n  form.set('appId', process.env.ATHON_APP_ID ?? '');\n\n  const upstream = await fetch(process.env.ATHON_INGEST_URL ?? '', {\n    method: 'POST',\n    headers: { Authorization: `Bearer ${process.env.ATHON_LIVE_KEY}` },\n    body: form,\n  });\n\n  return new Response(await upstream.text(), {\n    status: upstream.status,\n    headers: { 'content-type': upstream.headers.get('content-type') ?? 'application/json' },\n  });\n}\n```\n\n### Node.js\n\nNode 18+. Do not run a JSON body parser on this route.\n\n```js\nimport { createServer } from 'node:http';\n\nconst server = createServer(async (req, res) => {\n  if (req.method !== 'POST' || req.url !== '/api/support/report') {\n    res.writeHead(404);\n    res.end('Not found');\n    return;\n  }\n\n  const incoming = new Request('http://local/api/support/report', {\n    method: 'POST',\n    headers: req.headers,\n    body: req,\n    duplex: 'half',\n  });\n\n  const form = await incoming.formData();\n  form.set('appId', process.env.ATHON_APP_ID ?? '');\n\n  const upstream = await fetch(process.env.ATHON_INGEST_URL ?? '', {\n    method: 'POST',\n    headers: { Authorization: `Bearer ${process.env.ATHON_LIVE_KEY}` },\n    body: form,\n  });\n\n  res.writeHead(upstream.status, {\n    'content-type': upstream.headers.get('content-type') ?? 'application/json',\n  });\n  res.end(await upstream.text());\n});\n\nserver.listen(3000);\n```\n\nExpress, Next.js Pages Router, and Hono examples are in [`@athon-labs/help-widget-core` proxy docs](../help-widget-core/docs/proxy.md).\n","readmeFilename":"README.md","_rev":"1-c10723fb3dd6904b352bf73b03dbc22a"}