@heedkit/sdk-vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 HeedKit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,75 @@
+# @heedkit/sdk-vue
+
+Vue 3 SDK for [HeedKit](https://heedkit.com). Drop-in feature requests,
+voting, comments — themed from your console.
+
+## Install
+
+```bash
+npm i @heedkit/sdk-vue
+```
+
+## Wire the plugin
+
+```ts
+// main.ts
+import { createApp } from "vue";
+import { createHeedKit } from "@heedkit/sdk-vue";
+import App from "./App.vue";
+
+createApp(App)
+  .use(createHeedKit({
+    projectKey: "fh_xxx",
+    user: { externalId: "user-123", email: "alice@example.com", name: "Alice" },
+  }))
+  .mount("#app");
+```
+
+## Mount the widget anywhere
+
+```vue
+<script setup lang="ts">
+import { FeedbackButton } from "@heedkit/sdk-vue";
+</script>
+
+<template>
+  <YourApp />
+  <FeedbackButton label="Feedback" />
+</template>
+```
+
+`FeedbackButton` is a thin Vue wrapper that mounts the shared JS widget into
+`document.body` — same UI as every other HeedKit SDK.
+
+## Imperative open / close
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { FeedbackButton } from "@heedkit/sdk-vue";
+
+const btn = ref<InstanceType<typeof FeedbackButton> | null>(null);
+function openPanel() { btn.value?.open(); }
+</script>
+
+<template>
+  <FeedbackButton ref="btn" :hide-launcher="true" />
+  <button @click="openPanel">Custom trigger</button>
+</template>
+```
+
+## Headless
+
+Inject the underlying client for custom UI:
+
+```ts
+import { inject } from "vue";
+import { HEEDKIT_KEY } from "@heedkit/sdk-vue";
+
+const fh = inject(HEEDKIT_KEY)!;
+await fh.client.list({ sort: "top" });
+```
+
+## License
+
+MIT

package/dist/FeedbackButton.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    label?: string;
+    hideLauncher?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    open: () => void | undefined;
+    close: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/client.d.ts

@@ -0,0 +1,110 @@
+export type Visibility = "public" | "private";
+export type Interaction = "upvote" | "downvote" | "plus_one" | "like";
+export type KindInteractions = Partial<Record<Interaction, boolean>>;
+export type ShowCounts = Partial<Record<FeatureKind, boolean>>;
+export type GroupMode = "tabs" | "list";
+export type Theme = {
+    primary?: string;
+    primaryDark?: string;
+    radius?: number;
+    mode?: "light" | "dark" | "system";
+    font_family?: string;
+    font_size?: "sm" | "md" | "lg";
+    group_mode?: GroupMode;
+    show_counts?: ShowCounts;
+    fontFamily?: string;
+};
+export type EndUser = {
+    externalId?: string;
+    email?: string;
+    name?: string;
+    avatarUrl?: string;
+    platform?: string;
+};
+export type FeatureKind = "feature_request" | "bug_report" | "improvement" | "appreciation" | "other";
+export type Feature = {
+    id: string;
+    title: string;
+    description: string;
+    status: "open" | "planned" | "in_progress" | "shipped" | "declined";
+    kind: FeatureKind;
+    visibility: Visibility;
+    on_roadmap: boolean;
+    tag: string | null;
+    vote_count: number;
+    voted: boolean;
+    platform: string | null;
+    author_name: string | null;
+    created_at: string;
+};
+export type Comment = {
+    id: string;
+    body: string;
+    author_name: string | null;
+    is_internal: boolean;
+    created_at: string;
+};
+export type HeedKitConfig = {
+    projectKey: string;
+    apiUrl?: string;
+    user?: EndUser;
+};
+export type ProjectConfig = {
+    name: string;
+    theme: Theme;
+    enabled_kinds: FeatureKind[];
+    kind_visibility: Record<FeatureKind, Visibility>;
+    kind_interactions: Record<FeatureKind, KindInteractions>;
+    is_public_roadmap?: boolean;
+};
+export type InitResult = {
+    end_user_id: string;
+    project: ProjectConfig;
+};
+/**
+ * Stable per-browser identifier persisted in localStorage. When the customer
+ * doesn't pass `externalId`, we still want votes/submissions to stick to the
+ * same EndUser across page loads — otherwise every refresh would create a new
+ * anonymous account.
+ *
+ * Returns null on the server (SSR), so callers should fall back to a fresh id.
+ */
+export declare function getOrCreateDeviceId(): string | null;
+export declare class HeedKitClient {
+    private apiUrl;
+    private projectKey;
+    private endUserId;
+    private theme;
+    private projectName;
+    private enabledKinds;
+    private kindVisibility;
+    private kindInteractions;
+    constructor(config: HeedKitConfig);
+    init(user?: EndUser): Promise<InitResult>;
+    getTheme(): Theme;
+    getEnabledKinds(): FeatureKind[];
+    getKindVisibility(): Partial<Record<FeatureKind, Visibility>>;
+    getKindInteractions(): Partial<Record<FeatureKind, Partial<Record<Interaction, boolean>>>>;
+    getProjectName(): string;
+    getEndUserId(): string | null;
+    getInteractionsFor(kind: FeatureKind): Interaction[];
+    list(opts?: {
+        status?: string;
+        kind?: FeatureKind;
+        sort?: "top" | "new";
+    }): Promise<Feature[]>;
+    submit(input: {
+        title: string;
+        description?: string;
+        tag?: string;
+        kind?: FeatureKind;
+    }): Promise<Feature>;
+    vote(featureId: string): Promise<{
+        voted: boolean;
+        vote_count: number;
+    }>;
+    listComments(featureId: string): Promise<Comment[]>;
+    comment(featureId: string, body: string): Promise<Comment>;
+    private ensureInit;
+    private request;
+}

package/dist/index.cjs

@@ -0,0 +1,114 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("vue"),ae="https://api.heedkit.com",V="heedkit.device_id";function re(){var e;try{if(typeof window>"u"||!window.localStorage)return null;const t=window.localStorage.getItem(V);if(t)return t;const i="dev_"+(((e=crypto==null?void 0:crypto.randomUUID)==null?void 0:e.call(crypto))??Math.random().toString(36).slice(2));return window.localStorage.setItem(V,i),i}catch{return null}}function W(e){return{id:String(e.id),title:e.title,description:e.description??"",status:e.status,kind:e.kind,visibility:e.visibility,on_roadmap:e.on_roadmap??!1,tag:e.tag??null,vote_count:e.vote_count??0,voted:e.voted??!1,platform:e.platform??null,author_name:e.author_name??e.author??null,created_at:e.created_at}}function Y(e){return{id:String(e.id),body:e.body,author_name:e.author_name??e.author??null,is_internal:e.is_internal??!1,created_at:e.created_at}}class O{constructor(t){this.endUserId=null,this.theme={},this.projectName="",this.enabledKinds=[],this.kindVisibility={},this.kindInteractions={},this.apiUrl=t.apiUrl||ae,this.projectKey=t.projectKey}async init(t={}){const o={external_id:t.externalId??re()??void 0,email:t.email,name:t.name,avatar_url:t.avatarUrl,platform:t.platform||"web"},n=await this.request("/sdk/init","POST",o);this.endUserId=n.end_user_id;const s=n.project??n;return this.theme=s.theme||{},this.projectName=s.name??s.project_name??"",this.enabledKinds=s.enabled_kinds||[],this.kindVisibility=s.kind_visibility||{},this.kindInteractions=s.kind_interactions||{},n}getTheme(){return this.theme}getEnabledKinds(){return this.enabledKinds}getKindVisibility(){return this.kindVisibility}getKindInteractions(){return this.kindInteractions}getProjectName(){return this.projectName}getEndUserId(){return this.endUserId}getInteractionsFor(t){const i=this.kindInteractions[t]||{};return["upvote","downvote","plus_one","like"].filter(o=>i[o])}async list(t={}){this.ensureInit();const i=new URLSearchParams({end_user_id:this.endUserId});t.status&&i.set("status",t.status),t.kind&&i.set("kind",t.kind),t.sort&&i.set("sort",t.sort);const o=await this.request(`/sdk/features?${i}`,"GET");return(Array.isArray(o)?o:o.features??[]).map(s=>W(s))}async submit(t){this.ensureInit();const i=await this.request("/sdk/features","POST",{end_user_id:this.endUserId,title:t.title,description:t.description||"",tag:t.tag||null,kind:t.kind||"feature_request"});return W(i)}async vote(t){return this.ensureInit(),this.request(`/sdk/features/${t}/vote`,"POST",{end_user_id:this.endUserId})}async listComments(t){const i=await this.request(`/sdk/features/${t}/comments`,"GET");return(Array.isArray(i)?i:i.comments??[]).map(n=>Y(n))}async comment(t,i){this.ensureInit();const o=await this.request(`/sdk/features/${t}/comments`,"POST",{end_user_id:this.endUserId,body:i});return Y(o)}ensureInit(){if(!this.endUserId)throw new Error("HeedKit not initialized — call init() first")}async request(t,i,o){const n=await fetch(`${this.apiUrl}${t}`,{method:i,headers:{"Content-Type":"application/json","X-Project-Key":this.projectKey},body:o?JSON.stringify(o):void 0});if(!n.ok){let s=`HTTP ${n.status}`;try{const h=await n.json();s=h.error||h.detail||s}catch{}throw new Error(s)}return n.json()}}const B=Symbol("heedkit");function ie(e){return{install(t){const i=new O(e),o=w.ref(!1),n=w.ref({});i.init(e.user||{}).then(()=>{n.value=i.getTheme(),o.value=!0}),t.provide(B,{client:i,ready:o,theme:n,projectKey:e.projectKey,apiUrl:e.apiUrl,user:e.user})}}}const P={feature_request:{label:"Features",placeholder:"What should we build?",tabIcon:"💡"},bug_report:{label:"Bugs",placeholder:"What's broken?",tabIcon:"🐞"},improvement:{label:"Improvements",placeholder:"What could be better?",tabIcon:"✨"},appreciation:{label:"Appreciation",placeholder:"What did you love?",tabIcon:"❤️"},other:{label:"Other",placeholder:"Tell us anything",tabIcon:"💬"}},oe={upvote:{icon:"▲",label:"Upvote"},downvote:{icon:"▼",label:"Downvote"},plus_one:{icon:"+1",label:"+1"},like:{icon:"♥",label:"Like"}},R={sm:"13px",md:"14px",lg:"16px"},G="heedkit-styles",se=`
+.fk-launcher {
+  position: fixed; bottom: 24px; right: 24px; z-index: 2147483645;
+  background: var(--fh-primary); color: #fff; border: 0; border-radius: 999px;
+  padding: 12px 18px; font-weight: 600; font-size: var(--fh-fs); cursor: pointer;
+  box-shadow: 0 10px 24px rgba(0,0,0,.18); font-family: var(--fh-font);
+  transition: transform .15s ease;
+}
+.fk-launcher:hover { transform: translateY(-1px); }
+.fk-overlay {
+  position: fixed; inset: 0; z-index: 2147483646; display: flex;
+  align-items: center; justify-content: center; padding: 16px;
+  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
+  font-family: var(--fh-font); font-size: var(--fh-fs);
+}
+.fk-panel {
+  width: 100%; max-width: 520px; max-height: 85vh; display: flex; flex-direction: column;
+  background: var(--fh-bg); color: var(--fh-fg);
+  border-radius: calc(var(--fh-radius) * 1.5); overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,.3);
+}
+.fk-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--fh-border); }
+.fk-titlerow { display:flex; justify-content:space-between; align-items:center; }
+.fk-title { font-size: calc(var(--fh-fs) + 6px); font-weight: 700; }
+.fk-close {
+  background: transparent; border: 0; color: var(--fh-muted);
+  font-size: 22px; cursor: pointer; line-height: 1; padding: 0 4px;
+}
+.fk-modes { display:flex; gap: 6px; margin-top: 12px; }
+.fk-mode {
+  border: 0; background: transparent; padding: 6px 12px; border-radius: 999px;
+  font-size: calc(var(--fh-fs) - 1px); font-weight: 600; cursor: pointer;
+  color: var(--fh-muted); font-family: inherit;
+}
+.fk-mode[data-active="true"] { background: var(--fh-primary); color: #fff; }
+.fk-tabs {
+  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--fh-border);
+}
+.fk-tab {
+  border: 0; background: var(--fh-row); color: var(--fh-fg);
+  padding: 6px 12px; border-radius: 999px;
+  font-size: calc(var(--fh-fs) - 1px); font-weight: 500; cursor: pointer; font-family: inherit;
+  display: inline-flex; align-items: center; gap: 6px;
+}
+.fk-tab[data-active="true"] { background: var(--fh-primary); color: #fff; }
+.fk-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
+.fk-empty { text-align: center; padding: 32px; opacity: .6; }
+.fk-loading { text-align: center; padding: 32px; opacity: .6; }
+.fk-row {
+  display: flex; gap: 12px; padding: 12px; margin-bottom: 8px;
+  background: var(--fh-row); border-radius: var(--fh-radius);
+}
+.fk-actions { display:flex; flex-direction: column; gap: 4px; }
+.fk-act {
+  border: 1px solid var(--fh-border); background: transparent;
+  color: var(--fh-fg); border-radius: calc(var(--fh-radius) - 4px);
+  min-width: 44px; padding: 6px 8px; cursor: pointer;
+  display: flex; flex-direction: column; align-items: center; gap: 2px;
+  font-weight: 600; font-size: calc(var(--fh-fs) - 1px); font-family: inherit;
+}
+.fk-act[data-voted="true"] {
+  border: 2px solid var(--fh-primary);
+  background: color-mix(in srgb, var(--fh-primary) 14%, transparent);
+  color: var(--fh-primary);
+}
+.fk-act[disabled] { cursor: default; opacity: .85; }
+.fk-act .fk-glyph { font-size: calc(var(--fh-fs) + 1px); line-height: 1; }
+.fk-meta { flex:1; min-width:0; cursor: pointer; }
+.fk-item-title { font-weight: 600; }
+.fk-item-desc { opacity: .7; font-size: calc(var(--fh-fs) - 1px); margin-top: 4px; }
+.fk-item-badges { display:flex; gap:6px; margin-top:6px; flex-wrap: wrap; }
+.fk-badge {
+  font-size: calc(var(--fh-fs) - 3px); padding: 2px 8px; border-radius: 999px;
+  background: var(--fh-border); color: var(--fh-muted); text-transform: uppercase; letter-spacing: .04em;
+}
+.fk-badge[data-status="planned"] { background: rgba(59,130,246,.15); color: rgb(37,99,235); }
+.fk-badge[data-status="in_progress"] { background: rgba(234,179,8,.18); color: rgb(161,98,7); }
+.fk-badge[data-status="shipped"] { background: rgba(34,197,94,.18); color: rgb(22,101,52); }
+.fk-comments { margin-top: 10px; border-top: 1px solid var(--fh-border); padding-top: 10px; }
+.fk-comment { padding: 6px 0; border-top: 1px dashed var(--fh-border); font-size: calc(var(--fh-fs) - 1px); }
+.fk-comment:first-child { border-top: 0; }
+.fk-comment-author { font-weight: 600; }
+.fk-form { display: flex; flex-direction: column; gap: 12px; }
+.fk-label { font-size: calc(var(--fh-fs) - 1px); font-weight: 500; }
+.fk-input, .fk-textarea {
+  width: 100%; padding: 10px 12px; margin-top: 4px;
+  border-radius: calc(var(--fh-radius) - 2px);
+  border: 1px solid var(--fh-input-border); background: var(--fh-input-bg);
+  color: var(--fh-fg); font-size: var(--fh-fs); font-family: inherit;
+  box-sizing: border-box;
+}
+.fk-textarea { resize: vertical; min-height: 96px; }
+.fk-input:focus, .fk-textarea:focus { outline: 2px solid var(--fh-primary); outline-offset: 1px; }
+.fk-submit {
+  background: var(--fh-primary); color: #fff; border: 0;
+  padding: 12px 14px; border-radius: var(--fh-radius);
+  font-weight: 600; font-size: var(--fh-fs); cursor: pointer; font-family: inherit;
+}
+.fk-submit[disabled] { opacity: .6; cursor: not-allowed; }
+.fk-segmented {
+  display: inline-flex; gap: 4px; padding: 4px; margin-top: 6px;
+  background: var(--fh-row); border-radius: 999px;
+}
+.fk-seg {
+  border: 0; background: transparent; cursor: pointer;
+  padding: 6px 12px; border-radius: 999px; font-size: calc(var(--fh-fs) - 2px);
+  font-weight: 500; color: var(--fh-muted); font-family: inherit;
+}
+.fk-seg[data-active="true"] {
+  background: var(--fh-bg); color: var(--fh-fg);
+  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
+}
+.fk-error { color: rgb(220,38,38); font-size: calc(var(--fh-fs) - 1px); }
+`;function de(){if(document.getElementById(G))return;const e=document.createElement("style");e.id=G,e.textContent=se,document.head.appendChild(e)}function le(e){const t=e.mode||"light";return t==="system"?typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t==="dark"?"dark":"light"}function J(e,t){const i=t.primary||"#0D9488",o=`${t.radius??12}px`,n=le(t)==="dark",s=t.font_family||t.fontFamily||"system-ui, -apple-system, sans-serif",h=R[t.font_size??"md"]??R.md,m={"--fh-primary":i,"--fh-radius":o,"--fh-font":s,"--fh-fs":h,"--fh-bg":n?"#0F172A":"#FFFFFF","--fh-fg":n?"#F1F5F9":"#0F172A","--fh-muted":n?"#94A3B8":"#64748B","--fh-row":n?"#1E293B":"#F8FAFC","--fh-border":n?"#1E293B":"#E2E8F0","--fh-input-bg":n?"#0F172A":"#FFFFFF","--fh-input-border":n?"#334155":"#CBD5E1"};for(const[b,C]of Object.entries(m))e.style.setProperty(b,C)}function a(e,t,i){const o=document.createElement(e);if(t)for(const[n,s]of Object.entries(t))n==="class"?o.className=s:o.setAttribute(n,s);if(i)for(const n of i)n!=null&&o.appendChild(typeof n=="string"?document.createTextNode(n):n);return o}function X(e){de();const t=e.container||document.body,i=new O(e),o=i.init(e.user||{}).catch(b=>(console.warn("[HeedKit] widget init failed; launcher disabled.",b),null));let n=null,s=null;function h(){n&&(n.remove(),n=null)}async function m(){await o&&(n||(n=ce(i,i.getTheme(),h),t.appendChild(n)))}return e.hideLauncher||o.then(b=>{b&&(s=a("button",{class:"fk-launcher",type:"button"},[e.label||"Feedback"]),J(s,i.getTheme()),s.addEventListener("click",m),t.appendChild(s))}),{client:i,open:m,close:h,destroy(){h(),s==null||s.remove()}}}function ce(e,t,i){const o=a("div",{class:"fk-overlay",role:"dialog"});J(o,t),o.addEventListener("click",r=>{r.target===o&&i()});const n=a("div",{class:"fk-panel"});o.appendChild(n);const s=e.getEnabledKinds(),h=t.group_mode||"tabs";let m="browse",b=h==="tabs"&&s.length>0?s[0]:"all",C=[];const F=a("div",{class:"fk-head"}),K=a("div",{class:"fk-titlerow"});K.appendChild(a("div",{class:"fk-title"},[e.getProjectName()||"Feedback"]));const N=a("button",{class:"fk-close",type:"button","aria-label":"Close"},["×"]);N.addEventListener("click",i),K.appendChild(N),F.appendChild(K);const D=a("div",{class:"fk-modes"}),T=a("button",{class:"fk-mode",type:"button"},["Browse"]),A=a("button",{class:"fk-mode",type:"button"},["Suggest"]);D.append(T,A),F.appendChild(D),n.appendChild(F);let k=null;if(h==="tabs"&&s.length>0){k=a("div",{class:"fk-tabs"});const r=a("button",{class:"fk-tab",type:"button"},["All"]);r.dataset.kind="all",k.appendChild(r);for(const p of s){const d=P[p],l=a("button",{class:"fk-tab",type:"button"},[a("span",{},[d.tabIcon]),a("span",{},[d.label])]);l.dataset.kind=p,k.appendChild(l)}n.appendChild(k),k.addEventListener("click",p=>{const d=p.target.closest("[data-kind]");d&&(b=d.dataset.kind,L(),j())})}const v=a("div",{class:"fk-body"});n.appendChild(v);function H(){T.setAttribute("data-active",String(m==="browse")),A.setAttribute("data-active",String(m==="suggest")),k&&(k.style.display=m==="browse"?"":"none")}function L(){if(k)for(const r of Array.from(k.children))r.setAttribute("data-active",String(r.dataset.kind===String(b)))}async function j(){v.replaceChildren(a("div",{class:"fk-loading"},["Loading…"]));try{const r={sort:"top"};b!=="all"&&(r.kind=b),C=await e.list(r)}catch(r){v.replaceChildren(a("div",{class:"fk-empty"},[`Failed to load: ${r.message}`]));return}M()}async function Z(r,p){const d=await e.vote(r.id);r.voted=d.voted,r.vote_count=d.vote_count,M()}function Q(r){const p=e.getInteractionsFor(r.kind),d=(e.getTheme().show_counts||{})[r.kind]!==!1,l=a("div",{class:"fk-actions"});if(p.length===0){if(d){const c=a("button",{class:"fk-act",type:"button",disabled:"true"},[a("span",{},[String(r.vote_count)])]);l.appendChild(c)}return l}for(const c of p){const f=oe[c],u=a("button",{class:"fk-act",type:"button","aria-label":f.label},[a("span",{class:"fk-glyph"},[f.icon]),...d?[a("span",{},[String(r.vote_count)])]:[]]);(c==="upvote"||c==="like"||c==="plus_one")&&u.setAttribute("data-voted",String(r.voted)),u.addEventListener("click",g=>{g.stopPropagation(),Z(r)}),l.appendChild(u)}return l}function M(){if(v.innerHTML="",C.length===0){v.appendChild(a("div",{class:"fk-empty"},["No items yet — be the first!"]));return}for(const r of C)v.appendChild(ee(r))}function ee(r){const p=a("div",{class:"fk-row"});p.appendChild(Q(r));const d=a("div",{class:"fk-meta"});d.appendChild(a("div",{class:"fk-item-title"},[r.title])),r.description&&d.appendChild(a("div",{class:"fk-item-desc"},[r.description]));const l=a("div",{class:"fk-item-badges"});if(r.status&&r.status!=="open"){const u=a("span",{class:"fk-badge"},[r.status.replace("_"," ")]);u.setAttribute("data-status",r.status),l.appendChild(u)}r.tag&&l.appendChild(a("span",{class:"fk-badge"},[r.tag])),l.children.length&&d.appendChild(l);let c=!1;const f=a("div",{class:"fk-comments"});return f.style.display="none",d.appendChild(f),d.addEventListener("click",async()=>{const u=f.style.display==="none";if(f.style.display=u?"":"none",u&&!c){c=!0,f.replaceChildren(a("div",{class:"fk-loading"},["Loading…"]));try{const g=await e.listComments(r.id);f.replaceChildren(...q(r,g))}catch(g){f.replaceChildren(a("div",{class:"fk-error"},[g.message]))}}}),p.appendChild(d),p}function q(r,p){const d=[];if(p.length===0)d.push(a("div",{class:"fk-empty"},["No replies yet."]));else for(const f of p)d.push(a("div",{class:"fk-comment"},[a("span",{class:"fk-comment-author"},[f.author_name||"Anonymous"])," — ",f.body]));const l=a("textarea",{class:"fk-textarea",placeholder:"Add a reply…",rows:"2"}),c=a("button",{class:"fk-submit",type:"button"},["Reply"]);return c.addEventListener("click",async f=>{var u;if(f.stopPropagation(),!!l.value.trim()){c.disabled=!0;try{const g=await e.comment(r.id,l.value);l.value="",c.disabled=!1;const S=await e.listComments(r.id),x=(u=c.parentElement)==null?void 0:u.parentElement;x&&x.replaceChildren(...q(r,S))}catch(g){c.disabled=!1,alert(g.message)}}}),d.push(a("div",{},[l,c])),d}function te(){v.innerHTML="";const p=e.getEnabledKinds().map(y=>({value:y,...P[y]})),d=p.length>0?p:[{value:"other",...P.other}];let l=d[0].value;const c=a("form",{class:"fk-form"}),f=a("label",{class:"fk-label"},["What's this about?"]),u=a("div",{class:"fk-segmented"}),g=[];for(const y of d){const _=a("button",{class:"fk-seg",type:"button"},[y.label]);_.setAttribute("data-active",String(y.value===l)),_.addEventListener("click",()=>{l=y.value,g.forEach((U,ne)=>U.setAttribute("data-active",String(d[ne].value===l))),x.placeholder=d.find(U=>U.value===l).placeholder}),g.push(_),u.appendChild(_)}f.appendChild(u);const S=a("label",{class:"fk-label"},["Title"]),x=a("input",{class:"fk-input",type:"text",placeholder:d[0].placeholder,required:"true"});S.appendChild(x);const $=a("label",{class:"fk-label"},["Description"]),z=a("textarea",{class:"fk-textarea",placeholder:"Any extra context helps.",rows:"4"});$.appendChild(z);const I=a("button",{class:"fk-submit",type:"submit"},["Submit"]);c.append(f,S,$,I),v.appendChild(c),c.addEventListener("submit",async y=>{if(y.preventDefault(),!!x.value.trim()){I.disabled=!0,I.textContent="Submitting…";try{await e.submit({title:x.value,description:z.value,kind:l}),x.value="",z.value="",E("browse"),k&&(b=l,L()),await j()}catch(_){I.disabled=!1,I.textContent="Submit",alert(_.message)}}})}function E(r){m=r,H(),m==="browse"?j():te()}return T.addEventListener("click",()=>E("browse")),A.addEventListener("click",()=>E("suggest")),H(),L(),E("browse"),o}const pe=w.defineComponent({__name:"FeedbackButton",props:{label:{},hideLauncher:{type:Boolean}},setup(e,{expose:t}){const i=e,o=w.inject(B);if(!o)throw new Error("Install the HeedKit plugin first: app.use(createHeedKit(...))");let n=null;function s(){n||(n=X({projectKey:o.projectKey,apiUrl:o.apiUrl,user:o.user,label:i.label,hideLauncher:i.hideLauncher}))}return w.watch(()=>o.ready.value,h=>{h&&s()},{immediate:!0}),w.onMounted(()=>{o.ready.value&&s()}),w.onBeforeUnmount(()=>{n==null||n.destroy(),n=null}),t({open:()=>n==null?void 0:n.open(),close:()=>n==null?void 0:n.close()}),(h,m)=>null}});exports.FeedbackButton=pe;exports.HEEDKIT_KEY=B;exports.HeedKitClient=O;exports.createHeedKit=ie;exports.mount=X;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { createHeedKit, HEEDKIT_KEY, type HeedKitInjection } from "./plugin";
+export { HeedKitClient } from "./client";
+export { mount, type Widget } from "./widget";
+export type { Comment, EndUser, Feature, FeatureKind, HeedKitConfig, GroupMode, InitResult, Interaction, KindInteractions, ShowCounts, Theme, Visibility, } from "./client";
+export { default as FeedbackButton } from "./FeedbackButton.vue";

package/dist/index.js

@@ -0,0 +1,584 @@
+import { ref as q, defineComponent as ne, inject as ae, watch as re, onMounted as ie, onBeforeUnmount as se } from "vue";
+const oe = "https://api.heedkit.com", H = "heedkit.device_id";
+function de() {
+  var e;
+  try {
+    if (typeof window > "u" || !window.localStorage) return null;
+    const t = window.localStorage.getItem(H);
+    if (t) return t;
+    const i = "dev_" + (((e = crypto == null ? void 0 : crypto.randomUUID) == null ? void 0 : e.call(crypto)) ?? Math.random().toString(36).slice(2));
+    return window.localStorage.setItem(H, i), i;
+  } catch {
+    return null;
+  }
+}
+function $(e) {
+  return {
+    id: String(e.id),
+    title: e.title,
+    description: e.description ?? "",
+    status: e.status,
+    kind: e.kind,
+    visibility: e.visibility,
+    on_roadmap: e.on_roadmap ?? !1,
+    tag: e.tag ?? null,
+    vote_count: e.vote_count ?? 0,
+    voted: e.voted ?? !1,
+    platform: e.platform ?? null,
+    author_name: e.author_name ?? e.author ?? null,
+    created_at: e.created_at
+  };
+}
+function V(e) {
+  return {
+    id: String(e.id),
+    body: e.body,
+    author_name: e.author_name ?? e.author ?? null,
+    // The SDK endpoint only ever returns public comments.
+    is_internal: e.is_internal ?? !1,
+    created_at: e.created_at
+  };
+}
+class Y {
+  constructor(t) {
+    this.endUserId = null, this.theme = {}, this.projectName = "", this.enabledKinds = [], this.kindVisibility = {}, this.kindInteractions = {}, this.apiUrl = t.apiUrl || oe, this.projectKey = t.projectKey;
+  }
+  async init(t = {}) {
+    const s = {
+      external_id: t.externalId ?? de() ?? void 0,
+      email: t.email,
+      name: t.name,
+      avatar_url: t.avatarUrl,
+      platform: t.platform || "web"
+    }, n = await this.request("/sdk/init", "POST", s);
+    this.endUserId = n.end_user_id;
+    const o = n.project ?? n;
+    return this.theme = o.theme || {}, this.projectName = o.name ?? o.project_name ?? "", this.enabledKinds = o.enabled_kinds || [], this.kindVisibility = o.kind_visibility || {}, this.kindInteractions = o.kind_interactions || {}, n;
+  }
+  getTheme() {
+    return this.theme;
+  }
+  getEnabledKinds() {
+    return this.enabledKinds;
+  }
+  getKindVisibility() {
+    return this.kindVisibility;
+  }
+  getKindInteractions() {
+    return this.kindInteractions;
+  }
+  getProjectName() {
+    return this.projectName;
+  }
+  getEndUserId() {
+    return this.endUserId;
+  }
+  /// Convenience: which interactions are enabled for a given kind, in stable order.
+  getInteractionsFor(t) {
+    const i = this.kindInteractions[t] || {};
+    return ["upvote", "downvote", "plus_one", "like"].filter(
+      (s) => i[s]
+    );
+  }
+  async list(t = {}) {
+    this.ensureInit();
+    const i = new URLSearchParams({ end_user_id: this.endUserId });
+    t.status && i.set("status", t.status), t.kind && i.set("kind", t.kind), t.sort && i.set("sort", t.sort);
+    const s = await this.request(`/sdk/features?${i}`, "GET");
+    return (Array.isArray(s) ? s : s.features ?? []).map((o) => $(o));
+  }
+  async submit(t) {
+    this.ensureInit();
+    const i = await this.request("/sdk/features", "POST", {
+      end_user_id: this.endUserId,
+      title: t.title,
+      description: t.description || "",
+      tag: t.tag || null,
+      kind: t.kind || "feature_request"
+    });
+    return $(i);
+  }
+  async vote(t) {
+    return this.ensureInit(), this.request(`/sdk/features/${t}/vote`, "POST", {
+      end_user_id: this.endUserId
+    });
+  }
+  async listComments(t) {
+    const i = await this.request(`/sdk/features/${t}/comments`, "GET");
+    return (Array.isArray(i) ? i : i.comments ?? []).map((n) => V(n));
+  }
+  async comment(t, i) {
+    this.ensureInit();
+    const s = await this.request(`/sdk/features/${t}/comments`, "POST", {
+      end_user_id: this.endUserId,
+      body: i
+    });
+    return V(s);
+  }
+  ensureInit() {
+    if (!this.endUserId) throw new Error("HeedKit not initialized — call init() first");
+  }
+  async request(t, i, s) {
+    const n = await fetch(`${this.apiUrl}${t}`, {
+      method: i,
+      headers: {
+        "Content-Type": "application/json",
+        "X-Project-Key": this.projectKey
+      },
+      body: s ? JSON.stringify(s) : void 0
+    });
+    if (!n.ok) {
+      let o = `HTTP ${n.status}`;
+      try {
+        const h = await n.json();
+        o = h.error || h.detail || o;
+      } catch {
+      }
+      throw new Error(o);
+    }
+    return n.json();
+  }
+}
+const G = Symbol("heedkit");
+function me(e) {
+  return {
+    install(t) {
+      const i = new Y(e), s = q(!1), n = q({});
+      i.init(e.user || {}).then(() => {
+        n.value = i.getTheme(), s.value = !0;
+      }), t.provide(G, {
+        client: i,
+        ready: s,
+        theme: n,
+        projectKey: e.projectKey,
+        apiUrl: e.apiUrl,
+        user: e.user
+      });
+    }
+  };
+}
+const U = {
+  feature_request: { label: "Features", placeholder: "What should we build?", tabIcon: "💡" },
+  bug_report: { label: "Bugs", placeholder: "What's broken?", tabIcon: "🐞" },
+  improvement: { label: "Improvements", placeholder: "What could be better?", tabIcon: "✨" },
+  appreciation: { label: "Appreciation", placeholder: "What did you love?", tabIcon: "❤️" },
+  other: { label: "Other", placeholder: "Tell us anything", tabIcon: "💬" }
+}, le = {
+  upvote: { icon: "▲", label: "Upvote" },
+  downvote: { icon: "▼", label: "Downvote" },
+  plus_one: { icon: "+1", label: "+1" },
+  like: { icon: "♥", label: "Like" }
+}, W = { sm: "13px", md: "14px", lg: "16px" }, R = "heedkit-styles", ce = `
+.fk-launcher {
+  position: fixed; bottom: 24px; right: 24px; z-index: 2147483645;
+  background: var(--fh-primary); color: #fff; border: 0; border-radius: 999px;
+  padding: 12px 18px; font-weight: 600; font-size: var(--fh-fs); cursor: pointer;
+  box-shadow: 0 10px 24px rgba(0,0,0,.18); font-family: var(--fh-font);
+  transition: transform .15s ease;
+}
+.fk-launcher:hover { transform: translateY(-1px); }
+.fk-overlay {
+  position: fixed; inset: 0; z-index: 2147483646; display: flex;
+  align-items: center; justify-content: center; padding: 16px;
+  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
+  font-family: var(--fh-font); font-size: var(--fh-fs);
+}
+.fk-panel {
+  width: 100%; max-width: 520px; max-height: 85vh; display: flex; flex-direction: column;
+  background: var(--fh-bg); color: var(--fh-fg);
+  border-radius: calc(var(--fh-radius) * 1.5); overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,.3);
+}
+.fk-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--fh-border); }
+.fk-titlerow { display:flex; justify-content:space-between; align-items:center; }
+.fk-title { font-size: calc(var(--fh-fs) + 6px); font-weight: 700; }
+.fk-close {
+  background: transparent; border: 0; color: var(--fh-muted);
+  font-size: 22px; cursor: pointer; line-height: 1; padding: 0 4px;
+}
+.fk-modes { display:flex; gap: 6px; margin-top: 12px; }
+.fk-mode {
+  border: 0; background: transparent; padding: 6px 12px; border-radius: 999px;
+  font-size: calc(var(--fh-fs) - 1px); font-weight: 600; cursor: pointer;
+  color: var(--fh-muted); font-family: inherit;
+}
+.fk-mode[data-active="true"] { background: var(--fh-primary); color: #fff; }
+.fk-tabs {
+  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--fh-border);
+}
+.fk-tab {
+  border: 0; background: var(--fh-row); color: var(--fh-fg);
+  padding: 6px 12px; border-radius: 999px;
+  font-size: calc(var(--fh-fs) - 1px); font-weight: 500; cursor: pointer; font-family: inherit;
+  display: inline-flex; align-items: center; gap: 6px;
+}
+.fk-tab[data-active="true"] { background: var(--fh-primary); color: #fff; }
+.fk-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
+.fk-empty { text-align: center; padding: 32px; opacity: .6; }
+.fk-loading { text-align: center; padding: 32px; opacity: .6; }
+.fk-row {
+  display: flex; gap: 12px; padding: 12px; margin-bottom: 8px;
+  background: var(--fh-row); border-radius: var(--fh-radius);
+}
+.fk-actions { display:flex; flex-direction: column; gap: 4px; }
+.fk-act {
+  border: 1px solid var(--fh-border); background: transparent;
+  color: var(--fh-fg); border-radius: calc(var(--fh-radius) - 4px);
+  min-width: 44px; padding: 6px 8px; cursor: pointer;
+  display: flex; flex-direction: column; align-items: center; gap: 2px;
+  font-weight: 600; font-size: calc(var(--fh-fs) - 1px); font-family: inherit;
+}
+.fk-act[data-voted="true"] {
+  border: 2px solid var(--fh-primary);
+  background: color-mix(in srgb, var(--fh-primary) 14%, transparent);
+  color: var(--fh-primary);
+}
+.fk-act[disabled] { cursor: default; opacity: .85; }
+.fk-act .fk-glyph { font-size: calc(var(--fh-fs) + 1px); line-height: 1; }
+.fk-meta { flex:1; min-width:0; cursor: pointer; }
+.fk-item-title { font-weight: 600; }
+.fk-item-desc { opacity: .7; font-size: calc(var(--fh-fs) - 1px); margin-top: 4px; }
+.fk-item-badges { display:flex; gap:6px; margin-top:6px; flex-wrap: wrap; }
+.fk-badge {
+  font-size: calc(var(--fh-fs) - 3px); padding: 2px 8px; border-radius: 999px;
+  background: var(--fh-border); color: var(--fh-muted); text-transform: uppercase; letter-spacing: .04em;
+}
+.fk-badge[data-status="planned"] { background: rgba(59,130,246,.15); color: rgb(37,99,235); }
+.fk-badge[data-status="in_progress"] { background: rgba(234,179,8,.18); color: rgb(161,98,7); }
+.fk-badge[data-status="shipped"] { background: rgba(34,197,94,.18); color: rgb(22,101,52); }
+.fk-comments { margin-top: 10px; border-top: 1px solid var(--fh-border); padding-top: 10px; }
+.fk-comment { padding: 6px 0; border-top: 1px dashed var(--fh-border); font-size: calc(var(--fh-fs) - 1px); }
+.fk-comment:first-child { border-top: 0; }
+.fk-comment-author { font-weight: 600; }
+.fk-form { display: flex; flex-direction: column; gap: 12px; }
+.fk-label { font-size: calc(var(--fh-fs) - 1px); font-weight: 500; }
+.fk-input, .fk-textarea {
+  width: 100%; padding: 10px 12px; margin-top: 4px;
+  border-radius: calc(var(--fh-radius) - 2px);
+  border: 1px solid var(--fh-input-border); background: var(--fh-input-bg);
+  color: var(--fh-fg); font-size: var(--fh-fs); font-family: inherit;
+  box-sizing: border-box;
+}
+.fk-textarea { resize: vertical; min-height: 96px; }
+.fk-input:focus, .fk-textarea:focus { outline: 2px solid var(--fh-primary); outline-offset: 1px; }
+.fk-submit {
+  background: var(--fh-primary); color: #fff; border: 0;
+  padding: 12px 14px; border-radius: var(--fh-radius);
+  font-weight: 600; font-size: var(--fh-fs); cursor: pointer; font-family: inherit;
+}
+.fk-submit[disabled] { opacity: .6; cursor: not-allowed; }
+.fk-segmented {
+  display: inline-flex; gap: 4px; padding: 4px; margin-top: 6px;
+  background: var(--fh-row); border-radius: 999px;
+}
+.fk-seg {
+  border: 0; background: transparent; cursor: pointer;
+  padding: 6px 12px; border-radius: 999px; font-size: calc(var(--fh-fs) - 2px);
+  font-weight: 500; color: var(--fh-muted); font-family: inherit;
+}
+.fk-seg[data-active="true"] {
+  background: var(--fh-bg); color: var(--fh-fg);
+  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
+}
+.fk-error { color: rgb(220,38,38); font-size: calc(var(--fh-fs) - 1px); }
+`;
+function pe() {
+  if (document.getElementById(R)) return;
+  const e = document.createElement("style");
+  e.id = R, e.textContent = ce, document.head.appendChild(e);
+}
+function fe(e) {
+  const t = e.mode || "light";
+  return t === "system" ? typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : t === "dark" ? "dark" : "light";
+}
+function J(e, t) {
+  const i = t.primary || "#0D9488", s = `${t.radius ?? 12}px`, n = fe(t) === "dark", o = t.font_family || t.fontFamily || "system-ui, -apple-system, sans-serif", h = W[t.font_size ?? "md"] ?? W.md, m = {
+    "--fh-primary": i,
+    "--fh-radius": s,
+    "--fh-font": o,
+    "--fh-fs": h,
+    "--fh-bg": n ? "#0F172A" : "#FFFFFF",
+    "--fh-fg": n ? "#F1F5F9" : "#0F172A",
+    "--fh-muted": n ? "#94A3B8" : "#64748B",
+    "--fh-row": n ? "#1E293B" : "#F8FAFC",
+    "--fh-border": n ? "#1E293B" : "#E2E8F0",
+    "--fh-input-bg": n ? "#0F172A" : "#FFFFFF",
+    "--fh-input-border": n ? "#334155" : "#CBD5E1"
+  };
+  for (const [b, _] of Object.entries(m)) e.style.setProperty(b, _);
+}
+function a(e, t, i) {
+  const s = document.createElement(e);
+  if (t) for (const [n, o] of Object.entries(t))
+    n === "class" ? s.className = o : s.setAttribute(n, o);
+  if (i)
+    for (const n of i)
+      n != null && s.appendChild(typeof n == "string" ? document.createTextNode(n) : n);
+  return s;
+}
+function ue(e) {
+  pe();
+  const t = e.container || document.body, i = new Y(e), s = i.init(e.user || {}).catch((b) => (console.warn("[HeedKit] widget init failed; launcher disabled.", b), null));
+  let n = null, o = null;
+  function h() {
+    n && (n.remove(), n = null);
+  }
+  async function m() {
+    await s && (n || (n = he(i, i.getTheme(), h), t.appendChild(n)));
+  }
+  return e.hideLauncher || s.then((b) => {
+    b && (o = a("button", { class: "fk-launcher", type: "button" }, [
+      e.label || "Feedback"
+    ]), J(o, i.getTheme()), o.addEventListener("click", m), t.appendChild(o));
+  }), {
+    client: i,
+    open: m,
+    close: h,
+    destroy() {
+      h(), o == null || o.remove();
+    }
+  };
+}
+function he(e, t, i) {
+  const s = a("div", { class: "fk-overlay", role: "dialog" });
+  J(s, t), s.addEventListener("click", (r) => {
+    r.target === s && i();
+  });
+  const n = a("div", { class: "fk-panel" });
+  s.appendChild(n);
+  const o = e.getEnabledKinds(), h = t.group_mode || "tabs";
+  let m = "browse", b = h === "tabs" && o.length > 0 ? o[0] : "all", _ = [];
+  const F = a("div", { class: "fk-head" }), S = a("div", { class: "fk-titlerow" });
+  S.appendChild(a("div", { class: "fk-title" }, [e.getProjectName() || "Feedback"]));
+  const P = a("button", { class: "fk-close", type: "button", "aria-label": "Close" }, ["×"]);
+  P.addEventListener("click", i), S.appendChild(P), F.appendChild(S);
+  const B = a("div", { class: "fk-modes" }), A = a("button", { class: "fk-mode", type: "button" }, ["Browse"]), T = a("button", { class: "fk-mode", type: "button" }, ["Suggest"]);
+  B.append(A, T), F.appendChild(B), n.appendChild(F);
+  let k = null;
+  if (h === "tabs" && o.length > 0) {
+    k = a("div", { class: "fk-tabs" });
+    const r = a("button", { class: "fk-tab", type: "button" }, ["All"]);
+    r.dataset.kind = "all", k.appendChild(r);
+    for (const p of o) {
+      const d = U[p], l = a("button", { class: "fk-tab", type: "button" }, [
+        a("span", {}, [d.tabIcon]),
+        a("span", {}, [d.label])
+      ]);
+      l.dataset.kind = p, k.appendChild(l);
+    }
+    n.appendChild(k), k.addEventListener("click", (p) => {
+      const d = p.target.closest("[data-kind]");
+      d && (b = d.dataset.kind, K(), L());
+    });
+  }
+  const v = a("div", { class: "fk-body" });
+  n.appendChild(v);
+  function N() {
+    A.setAttribute("data-active", String(m === "browse")), T.setAttribute("data-active", String(m === "suggest")), k && (k.style.display = m === "browse" ? "" : "none");
+  }
+  function K() {
+    if (k)
+      for (const r of Array.from(k.children))
+        r.setAttribute(
+          "data-active",
+          String(r.dataset.kind === String(b))
+        );
+  }
+  async function L() {
+    v.replaceChildren(a("div", { class: "fk-loading" }, ["Loading…"]));
+    try {
+      const r = { sort: "top" };
+      b !== "all" && (r.kind = b), _ = await e.list(r);
+    } catch (r) {
+      v.replaceChildren(
+        a("div", { class: "fk-empty" }, [`Failed to load: ${r.message}`])
+      );
+      return;
+    }
+    O();
+  }
+  async function X(r, p) {
+    const d = await e.vote(r.id);
+    r.voted = d.voted, r.vote_count = d.vote_count, O();
+  }
+  function Z(r) {
+    const p = e.getInteractionsFor(r.kind), d = (e.getTheme().show_counts || {})[r.kind] !== !1, l = a("div", { class: "fk-actions" });
+    if (p.length === 0) {
+      if (d) {
+        const c = a("button", { class: "fk-act", type: "button", disabled: "true" }, [
+          a("span", {}, [String(r.vote_count)])
+        ]);
+        l.appendChild(c);
+      }
+      return l;
+    }
+    for (const c of p) {
+      const f = le[c], u = a("button", {
+        class: "fk-act",
+        type: "button",
+        "aria-label": f.label
+      }, [
+        a("span", { class: "fk-glyph" }, [f.icon]),
+        ...d ? [a("span", {}, [String(r.vote_count)])] : []
+      ]);
+      (c === "upvote" || c === "like" || c === "plus_one") && u.setAttribute("data-voted", String(r.voted)), u.addEventListener("click", (g) => {
+        g.stopPropagation(), X(r);
+      }), l.appendChild(u);
+    }
+    return l;
+  }
+  function O() {
+    if (v.innerHTML = "", _.length === 0) {
+      v.appendChild(a("div", { class: "fk-empty" }, ["No items yet — be the first!"]));
+      return;
+    }
+    for (const r of _)
+      v.appendChild(Q(r));
+  }
+  function Q(r) {
+    const p = a("div", { class: "fk-row" });
+    p.appendChild(Z(r));
+    const d = a("div", { class: "fk-meta" });
+    d.appendChild(a("div", { class: "fk-item-title" }, [r.title])), r.description && d.appendChild(a("div", { class: "fk-item-desc" }, [r.description]));
+    const l = a("div", { class: "fk-item-badges" });
+    if (r.status && r.status !== "open") {
+      const u = a("span", { class: "fk-badge" }, [r.status.replace("_", " ")]);
+      u.setAttribute("data-status", r.status), l.appendChild(u);
+    }
+    r.tag && l.appendChild(a("span", { class: "fk-badge" }, [r.tag])), l.children.length && d.appendChild(l);
+    let c = !1;
+    const f = a("div", { class: "fk-comments" });
+    return f.style.display = "none", d.appendChild(f), d.addEventListener("click", async () => {
+      const u = f.style.display === "none";
+      if (f.style.display = u ? "" : "none", u && !c) {
+        c = !0, f.replaceChildren(a("div", { class: "fk-loading" }, ["Loading…"]));
+        try {
+          const g = await e.listComments(r.id);
+          f.replaceChildren(...D(r, g));
+        } catch (g) {
+          f.replaceChildren(
+            a("div", { class: "fk-error" }, [g.message])
+          );
+        }
+      }
+    }), p.appendChild(d), p;
+  }
+  function D(r, p) {
+    const d = [];
+    if (p.length === 0)
+      d.push(a("div", { class: "fk-empty" }, ["No replies yet."]));
+    else
+      for (const f of p)
+        d.push(a("div", { class: "fk-comment" }, [
+          a("span", { class: "fk-comment-author" }, [f.author_name || "Anonymous"]),
+          " — ",
+          f.body
+        ]));
+    const l = a("textarea", {
+      class: "fk-textarea",
+      placeholder: "Add a reply…",
+      rows: "2"
+    }), c = a("button", { class: "fk-submit", type: "button" }, ["Reply"]);
+    return c.addEventListener("click", async (f) => {
+      var u;
+      if (f.stopPropagation(), !!l.value.trim()) {
+        c.disabled = !0;
+        try {
+          const g = await e.comment(r.id, l.value);
+          l.value = "", c.disabled = !1;
+          const E = await e.listComments(r.id), x = (u = c.parentElement) == null ? void 0 : u.parentElement;
+          x && x.replaceChildren(...D(r, E));
+        } catch (g) {
+          c.disabled = !1, alert(g.message);
+        }
+      }
+    }), d.push(a("div", {}, [l, c])), d;
+  }
+  function ee() {
+    v.innerHTML = "";
+    const p = e.getEnabledKinds().map((y) => ({ value: y, ...U[y] })), d = p.length > 0 ? p : [
+      { value: "other", ...U.other }
+    ];
+    let l = d[0].value;
+    const c = a("form", { class: "fk-form" }), f = a("label", { class: "fk-label" }, ["What's this about?"]), u = a("div", { class: "fk-segmented" }), g = [];
+    for (const y of d) {
+      const w = a("button", { class: "fk-seg", type: "button" }, [y.label]);
+      w.setAttribute("data-active", String(y.value === l)), w.addEventListener("click", () => {
+        l = y.value, g.forEach(
+          (z, te) => z.setAttribute("data-active", String(d[te].value === l))
+        ), x.placeholder = d.find((z) => z.value === l).placeholder;
+      }), g.push(w), u.appendChild(w);
+    }
+    f.appendChild(u);
+    const E = a("label", { class: "fk-label" }, ["Title"]), x = a("input", {
+      class: "fk-input",
+      type: "text",
+      placeholder: d[0].placeholder,
+      required: "true"
+    });
+    E.appendChild(x);
+    const M = a("label", { class: "fk-label" }, ["Description"]), j = a("textarea", {
+      class: "fk-textarea",
+      placeholder: "Any extra context helps.",
+      rows: "4"
+    });
+    M.appendChild(j);
+    const C = a("button", { class: "fk-submit", type: "submit" }, ["Submit"]);
+    c.append(f, E, M, C), v.appendChild(c), c.addEventListener("submit", async (y) => {
+      if (y.preventDefault(), !!x.value.trim()) {
+        C.disabled = !0, C.textContent = "Submitting…";
+        try {
+          await e.submit({
+            title: x.value,
+            description: j.value,
+            kind: l
+          }), x.value = "", j.value = "", I("browse"), k && (b = l, K()), await L();
+        } catch (w) {
+          C.disabled = !1, C.textContent = "Submit", alert(w.message);
+        }
+      }
+    });
+  }
+  function I(r) {
+    m = r, N(), m === "browse" ? L() : ee();
+  }
+  return A.addEventListener("click", () => I("browse")), T.addEventListener("click", () => I("suggest")), N(), K(), I("browse"), s;
+}
+const ge = /* @__PURE__ */ ne({
+  __name: "FeedbackButton",
+  props: {
+    label: {},
+    hideLauncher: { type: Boolean }
+  },
+  setup(e, { expose: t }) {
+    const i = e, s = ae(G);
+    if (!s) throw new Error("Install the HeedKit plugin first: app.use(createHeedKit(...))");
+    let n = null;
+    function o() {
+      n || (n = ue({
+        projectKey: s.projectKey,
+        apiUrl: s.apiUrl,
+        user: s.user,
+        label: i.label,
+        hideLauncher: i.hideLauncher
+      }));
+    }
+    return re(() => s.ready.value, (h) => {
+      h && o();
+    }, { immediate: !0 }), ie(() => {
+      s.ready.value && o();
+    }), se(() => {
+      n == null || n.destroy(), n = null;
+    }), t({
+      open: () => n == null ? void 0 : n.open(),
+      close: () => n == null ? void 0 : n.close()
+    }), (h, m) => null;
+  }
+});
+export {
+  ge as FeedbackButton,
+  G as HEEDKIT_KEY,
+  Y as HeedKitClient,
+  me as createHeedKit,
+  ue as mount
+};

package/dist/plugin.d.ts

@@ -0,0 +1,14 @@
+import { type App, type InjectionKey, type Ref } from "vue";
+import { HeedKitClient, type EndUser, type HeedKitConfig, type Theme } from "./client";
+export type HeedKitInjection = {
+    client: HeedKitClient;
+    ready: Ref<boolean>;
+    theme: Ref<Theme>;
+    projectKey: string;
+    apiUrl?: string;
+    user?: EndUser;
+};
+export declare const HEEDKIT_KEY: InjectionKey<HeedKitInjection>;
+export declare function createHeedKit(config: HeedKitConfig): {
+    install(app: App): void;
+};

package/dist/widget.d.ts

@@ -0,0 +1,13 @@
+import { HeedKitClient, type HeedKitConfig } from "./client";
+export type MountOptions = HeedKitConfig & {
+    label?: string;
+    hideLauncher?: boolean;
+    container?: HTMLElement;
+};
+export type Widget = {
+    client: HeedKitClient;
+    open: () => void;
+    close: () => void;
+    destroy: () => void;
+};
+export declare function mount(options: MountOptions): Widget;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@heedkit/sdk-vue",
+  "version": "0.1.0",
+  "description": "HeedKit SDK for Vue 3.",
+  "license": "MIT",
+  "author": "HeedKit",
+  "homepage": "https://github.com/heedkit/heedkit-sdk-vue#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/heedkit/heedkit-sdk-vue.git"
+  },
+  "bugs": {
+    "url": "https://github.com/heedkit/heedkit-sdk-vue/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc --emitDeclarationOnly --declaration --outDir dist",
+    "test": "vitest run src/client.test.ts",
+    "prepublishOnly": "npm run build && npm test"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.12",
+    "vue-tsc": "^2.1.10"
+  }
+}