@verbumia/feedback 0.1.0

package/dist/vue/index.js

@@ -0,0 +1,172 @@
+import {
+  FeedbackClient,
+  FeedbackError,
+  resolveKeys
+} from "../chunk-OX4RJD5H.js";
+
+// src/vue/index.ts
+import { defineComponent, h, ref, Teleport } from "vue";
+var C = {
+  bg: "#0b0f0e",
+  panel: "#111714",
+  border: "#1f2a25",
+  text: "#e7f5ef",
+  dim: "#8aa79b",
+  emerald: "#10b981",
+  emeraldSoft: "#34d399"
+};
+function createFeedback(config) {
+  const client = new FeedbackClient({
+    apiBase: config.apiBase,
+    projectId: config.projectId,
+    language: config.language,
+    endUserId: config.endUserId,
+    fetchImpl: config.fetchImpl
+  });
+  const isOpen = ref(false);
+  const controller = {
+    open: () => {
+      isOpen.value = true;
+    },
+    close: () => {
+      isOpen.value = false;
+      void client.flush();
+    },
+    client
+  };
+  const FeedbackPanel = defineComponent({
+    name: "VerbumiaFeedbackPanel",
+    setup() {
+      const strings = ref([]);
+      const busy = ref(false);
+      const consented = ref(client.hasConsented);
+      const error = ref(null);
+      async function load() {
+        busy.value = true;
+        error.value = null;
+        try {
+          if (!consented.value) {
+            await client.acceptTos();
+            consented.value = true;
+          }
+          const resolved = resolveKeys(config.keys);
+          const r = await client.getStrings({
+            keys: resolved.length ? resolved : void 0
+          });
+          strings.value = r.strings;
+        } catch (e) {
+          error.value = e instanceof Error ? e.message : "Failed to load";
+        } finally {
+          busy.value = false;
+        }
+      }
+      return () => {
+        if (!isOpen.value) return null;
+        if (!strings.value.length && !busy.value && !error.value) void load();
+        return h(
+          Teleport,
+          { to: "body" },
+          h(
+            "div",
+            {
+              role: "dialog",
+              style: {
+                position: "fixed",
+                inset: 0,
+                zIndex: 2147483600,
+                background: "rgba(0,0,0,.55)",
+                display: "flex",
+                justifyContent: "flex-end"
+              },
+              onClick: controller.close
+            },
+            [
+              h(
+                "div",
+                {
+                  onClick: (e) => e.stopPropagation(),
+                  style: {
+                    width: "min(420px,100%)",
+                    height: "100%",
+                    background: C.bg,
+                    color: C.text,
+                    borderLeft: `1px solid ${C.border}`,
+                    padding: "18px",
+                    fontFamily: "system-ui,sans-serif",
+                    overflowY: "auto"
+                  }
+                },
+                [
+                  h(
+                    "strong",
+                    { style: { color: C.emeraldSoft } },
+                    "Translation feedback"
+                  ),
+                  error.value ? h("p", { style: { color: "#f87171" } }, error.value) : null,
+                  ...strings.value.map(
+                    (s) => h(
+                      "div",
+                      {
+                        key: `${s.namespace}:${s.key}`,
+                        style: {
+                          background: C.panel,
+                          border: `1px solid ${C.border}`,
+                          borderRadius: "10px",
+                          padding: "12px",
+                          margin: "10px 0"
+                        }
+                      },
+                      [
+                        h(
+                          "div",
+                          { style: { fontSize: "12px", color: C.dim } },
+                          `${s.namespace} \xB7 ${s.key}`
+                        ),
+                        h("div", { style: { margin: "6px 0" } }, s.value),
+                        h(
+                          "div",
+                          {},
+                          [1, 2, 3, 4, 5].map(
+                            (n) => h(
+                              "button",
+                              {
+                                key: n,
+                                "aria-label": `${n} stars`,
+                                onClick: () => client.rate({
+                                  namespace: s.namespace,
+                                  key: s.key,
+                                  language: client.language,
+                                  translation_hash: s.translation_hash,
+                                  stars: n
+                                }),
+                                style: {
+                                  background: "transparent",
+                                  border: "none",
+                                  cursor: "pointer",
+                                  fontSize: "20px",
+                                  color: C.border
+                                }
+                              },
+                              "\u2605"
+                            )
+                          )
+                        )
+                      ]
+                    )
+                  )
+                ]
+              )
+            ]
+          )
+        );
+      };
+    }
+  });
+  return { client, isOpen, controller, FeedbackPanel };
+}
+export {
+  FeedbackClient,
+  FeedbackError,
+  createFeedback
+};
+//# sourceMappingURL=index.js.map

package/dist/vue/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/vue/index.ts"],"sourcesContent":["/**\n * `@verbumia/feedback/vue` — idiomatic Vue 3 adapter over the FROZEN\n * /core FeedbackClient (task 611, master-approved). The host-i18n\n * plugin-slot half is descoped (no @verbumia/vue-i18n source) so this is\n * a standalone composable: it takes explicit config, owns an ISOLATED\n * reactive open-state (a closure-scoped ref — opening it re-renders only\n * the panel, never the host app), and exposes an imperative controller.\n * sessionId is server-minted (no client groupingKey). Mirrors the React\n * plugin principles without a second app-wide context.\n */\nimport { defineComponent, h, ref, Teleport, type Ref } from \"vue\";\n\nimport { FeedbackClient } from \"../core/client\";\nimport { resolveKeys } from \"../core/keys\";\nimport type { DeclaredKey, FeedbackString } from \"../core/types\";\n\nexport interface VueFeedbackConfig {\n  apiBase: string;\n  projectId: string;\n  language: string;\n  // No tosVersion — SDK build-time constant (SDK_TOS_VERSION, task 616).\n  endUserId?: string;\n  keys?: DeclaredKey[];\n  fetchImpl?: typeof fetch;\n}\n\nexport interface FeedbackController {\n  open: () => void;\n  close: () => void;\n  client: FeedbackClient;\n}\n\nconst C = {\n  bg: \"#0b0f0e\", panel: \"#111714\", border: \"#1f2a25\",\n  text: \"#e7f5ef\", dim: \"#8aa79b\", emerald: \"#10b981\", emeraldSoft: \"#34d399\",\n};\n\nexport interface VueFeedback {\n  client: FeedbackClient;\n  /** Reactive open-state (isolated; not app-wide provide/inject). */\n  isOpen: Ref<boolean>;\n  controller: FeedbackController;\n  /** Functional panel component — mount once near the app root. */\n  FeedbackPanel: ReturnType<typeof defineComponent>;\n}\n\nexport function createFeedback(config: VueFeedbackConfig): VueFeedback {\n  const client = new FeedbackClient({\n    apiBase: config.apiBase,\n    projectId: config.projectId,\n    language: config.language,\n    endUserId: config.endUserId,\n    fetchImpl: config.fetchImpl,\n  });\n  const isOpen = ref(false);\n  const controller: FeedbackController = {\n    open: () => {\n      isOpen.value = true;\n    },\n    close: () => {\n      isOpen.value = false;\n      void client.flush();\n    },\n    client,\n  };\n\n  const FeedbackPanel = defineComponent({\n    name: \"VerbumiaFeedbackPanel\",\n    setup() {\n      const strings = ref<FeedbackString[]>([]);\n      const busy = ref(false);\n      const consented = ref(client.hasConsented);\n      const error = ref<string | null>(null);\n\n      async function load() {\n        busy.value = true;\n        error.value = null;\n        try {\n          if (!consented.value) {\n            await client.acceptTos();\n            consented.value = true;\n          }\n          const resolved = resolveKeys(config.keys);\n          const r = await client.getStrings({\n            keys: resolved.length ? resolved : undefined,\n          });\n          strings.value = r.strings;\n        } catch (e) {\n          error.value = e instanceof Error ? e.message : \"Failed to load\";\n        } finally {\n          busy.value = false;\n        }\n      }\n\n      return () => {\n        if (!isOpen.value) return null;\n        if (!strings.value.length && !busy.value && !error.value) void load();\n        return h(\n          Teleport,\n          { to: \"body\" },\n          h(\n            \"div\",\n            {\n              role: \"dialog\",\n              style: {\n                position: \"fixed\", inset: 0, zIndex: 2147483600,\n                background: \"rgba(0,0,0,.55)\", display: \"flex\",\n                justifyContent: \"flex-end\",\n              },\n              onClick: controller.close,\n            },\n            [\n              h(\n                \"div\",\n                {\n                  onClick: (e: Event) => e.stopPropagation(),\n                  style: {\n                    width: \"min(420px,100%)\", height: \"100%\",\n                    background: C.bg, color: C.text,\n                    borderLeft: `1px solid ${C.border}`, padding: \"18px\",\n                    fontFamily: \"system-ui,sans-serif\", overflowY: \"auto\",\n                  },\n                },\n                [\n                  h(\"strong\", { style: { color: C.emeraldSoft } },\n                    \"Translation feedback\"),\n                  error.value\n                    ? h(\"p\", { style: { color: \"#f87171\" } }, error.value)\n                    : null,\n                  ...strings.value.map((s) =>\n                    h(\n                      \"div\",\n                      {\n                        key: `${s.namespace}:${s.key}`,\n                        style: {\n                          background: C.panel,\n                          border: `1px solid ${C.border}`,\n                          borderRadius: \"10px\", padding: \"12px\",\n                          margin: \"10px 0\",\n                        },\n                      },\n                      [\n                        h(\"div\", { style: { fontSize: \"12px\", color: C.dim } },\n                          `${s.namespace} · ${s.key}`),\n                        h(\"div\", { style: { margin: \"6px 0\" } }, s.value),\n                        h(\n                          \"div\",\n                          {},\n                          [1, 2, 3, 4, 5].map((n) =>\n                            h(\n                              \"button\",\n                              {\n                                key: n,\n                                \"aria-label\": `${n} stars`,\n                                onClick: () =>\n                                  client.rate({\n                                    namespace: s.namespace, key: s.key,\n                                    language: client.language,\n                                    translation_hash: s.translation_hash,\n                                    stars: n,\n                                  }),\n                                style: {\n                                  background: \"transparent\", border: \"none\",\n                                  cursor: \"pointer\", fontSize: \"20px\",\n                                  color: C.border,\n                                },\n                              },\n                              \"★\",\n                            ),\n                          ),\n                        ),\n                      ],\n                    ),\n                  ),\n                ],\n              ),\n            ],\n          ),\n        );\n      };\n    },\n  });\n\n  return { client, isOpen, controller, FeedbackPanel };\n}\n\nexport { FeedbackClient } from \"../core/client\";\nexport type {\n  DeclaredKey, FeedbackString, RatingInput, SuggestionInput,\n  TokenBundle, StringsResponse, BatchResponse,\n} from \"../core/types\";\nexport { FeedbackError } from \"../core/types\";\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@verbumia/feedback",
+  "version": "0.1.0",
+  "description": "Verbumia End-User Translation Evaluation widget — let your end users rate and suggest translations. React (web) + React Native / Expo.",
+  "license": "MIT",
+  "homepage": "https://verbumia.ca",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/verbumia/verbumia-feedback.git"
+  },
+  "keywords": [
+    "i18n",
+    "translations",
+    "feedback",
+    "ratings",
+    "react",
+    "react-native",
+    "expo",
+    "verbumia"
+  ],
+  "author": "Verbumia",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs"
+    },
+    "./native": {
+      "types": "./dist/native/index.d.ts",
+      "import": "./dist/native/index.js",
+      "require": "./dist/native/index.cjs"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js",
+      "require": "./dist/core/index.cjs"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue/index.js",
+      "require": "./dist/vue/index.cjs"
+    },
+    "./svelte": {
+      "types": "./dist/svelte/index.d.ts",
+      "import": "./dist/svelte/index.js",
+      "require": "./dist/svelte/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CONTRACT.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "@verbumia/react-i18next": ">=0.6.0",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "svelte": ">=4",
+    "vue": ">=3.3"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "@verbumia/react-i18next": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "happy-dom": "^15.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "svelte": "^4.2.20",
+    "tsup": "^8.3.0",
+    "typescript": "^5.5.0",
+    "vitest": "^2.1.0",
+    "vue": "^3.5.34"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm typecheck && pnpm test && pnpm build",
+    "pack:dry-run": "pnpm pack --dry-run"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "provenance": true
+  }
+}