@tacktext/widget 0.1.0

package/README.md

@@ -0,0 +1,49 @@
+# @tacktext/widget
+
+Drop-in commenting for web prototypes. Pin comments to any element, capture screenshots, and collaborate with your team — like Figma comments, but for live sites.
+
+## Quick Start
+
+```bash
+npx @tacktext/widget init
+```
+
+This detects your framework, generates a project ID, and adds Tack to your entry file. Deploy your app and share the link — anyone with the link can leave feedback.
+
+## Manual Setup
+
+```bash
+npm install @tacktext/widget
+```
+
+```typescript
+import { Tack } from '@tacktext/widget'
+
+Tack.init({ projectId: 'your-project-id' })
+```
+
+Or via script tag:
+
+```html
+<script src="https://unpkg.com/@tacktext/widget"></script>
+<script>Tack.init({ projectId: 'your-project-id' })</script>
+```
+
+## How It Works
+
+- Click the comment bubble to enter comment mode
+- Click any element to pin a comment
+- Comments are anchored to elements and reposition on scroll/resize
+- Screenshots are captured automatically with each comment
+- Sign in with Google to get persistent identity and presence indicators
+- All data syncs in real-time across viewers
+
+## Auth
+
+Tack uses Google OAuth scoped to `@plaid.com`. Unauthenticated users can view comments but must sign in to post.
+
+## Stack
+
+- Widget runs in a Shadow DOM — won't interfere with your app's styles
+- Backend: Next.js on Vercel + Supabase (Postgres, Auth, Realtime, Storage)
+- Screenshots via html2canvas (lazy-loaded, ~1.4MB on first capture)

package/dist/cli.js

@@ -0,0 +1,208 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/cli.ts
+var fs = __toESM(require("fs"));
+var path = __toESM(require("path"));
+var readline = __toESM(require("readline"));
+var crypto = __toESM(require("crypto"));
+async function prompt(question) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+function generateSlug(name) {
+  const base = name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  const suffix = crypto.randomBytes(3).toString("hex");
+  return `${base}-${suffix}`;
+}
+function detectFramework() {
+  const cwd = process.cwd();
+  const pkgPath = path.join(cwd, "package.json");
+  if (!fs.existsSync(pkgPath)) {
+    return "unknown";
+  }
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+  const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+  if (deps["next"]) return "nextjs";
+  if (deps["vite"]) return "vite";
+  if (deps["react-scripts"]) return "cra";
+  return "unknown";
+}
+function findEntryFile(framework) {
+  const cwd = process.cwd();
+  const candidates = {
+    nextjs: [
+      "src/app/layout.tsx",
+      "src/app/layout.js",
+      "app/layout.tsx",
+      "app/layout.js",
+      "src/pages/_app.tsx",
+      "src/pages/_app.js",
+      "pages/_app.tsx",
+      "pages/_app.js"
+    ],
+    vite: [
+      "src/main.tsx",
+      "src/main.ts",
+      "src/main.jsx",
+      "src/main.js"
+    ],
+    cra: [
+      "src/index.tsx",
+      "src/index.ts",
+      "src/index.jsx",
+      "src/index.js"
+    ],
+    unknown: [
+      "src/main.tsx",
+      "src/main.ts",
+      "src/index.tsx",
+      "src/index.ts",
+      "src/App.tsx",
+      "src/App.jsx",
+      "index.html"
+    ]
+  };
+  for (const candidate of candidates[framework] || candidates.unknown) {
+    const fullPath = path.join(cwd, candidate);
+    if (fs.existsSync(fullPath)) {
+      return fullPath;
+    }
+  }
+  return null;
+}
+function injectWidget(entryFile, projectSlug) {
+  const content = fs.readFileSync(entryFile, "utf-8");
+  const ext = path.extname(entryFile);
+  if (content.includes("@tacktext/widget")) {
+    console.log("\u26A0\uFE0F  Tack widget already present in", path.basename(entryFile));
+    return;
+  }
+  let newContent;
+  if (ext === ".html") {
+    const scriptTag = `  <script src="https://unpkg.com/@tacktext/widget"></script>
+  <script>Tack.init({ projectId: '${projectSlug}' })</script>
+</body>`;
+    newContent = content.replace("</body>", scriptTag);
+  } else {
+    const importStatement = `import { Tack } from '@tacktext/widget'
+`;
+    const initStatement = `
+// Initialize Tack feedback widget
+if (typeof window !== 'undefined') {
+  Tack.init({ projectId: '${projectSlug}' })
+}
+`;
+    if (content.includes("'use client'")) {
+      newContent = content.replace("'use client'", `'use client'
+${importStatement}`);
+    } else if (content.includes('"use client"')) {
+      newContent = content.replace('"use client"', `"use client"
+${importStatement}`);
+    } else {
+      newContent = importStatement + content;
+    }
+    const lines = newContent.split("\n");
+    let insertIndex = 0;
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim();
+      if (line.startsWith("import ") || line.startsWith("//") || line === "" || line.startsWith("'use") || line.startsWith('"use')) {
+        insertIndex = i + 1;
+      } else {
+        break;
+      }
+    }
+    lines.splice(insertIndex, 0, initStatement);
+    newContent = lines.join("\n");
+  }
+  fs.writeFileSync(entryFile, newContent);
+  console.log("\u2705 Added Tack widget to", path.basename(entryFile));
+}
+async function main() {
+  const args = process.argv.slice(2);
+  const command = args[0];
+  if (command === "init") {
+    let projectName = args.slice(1).join(" ");
+    console.log("\n\u{1F4CC} Tack - Feedback for Prototypes\n");
+    if (!projectName) {
+      const pkgPath = path.join(process.cwd(), "package.json");
+      if (fs.existsSync(pkgPath)) {
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+        projectName = pkg.name || "";
+      }
+      if (!projectName || projectName === "my-app") {
+        projectName = await prompt("Project name: ");
+      } else {
+        const useDefault = await prompt(`Project name (${projectName}): `);
+        if (useDefault) projectName = useDefault;
+      }
+    }
+    if (!projectName) {
+      console.error("\u274C Project name is required");
+      process.exit(1);
+    }
+    const slug = generateSlug(projectName);
+    console.log(`
+\u{1F4E6} Project ID: ${slug}`);
+    const framework = detectFramework();
+    console.log(`\u{1F50D} Detected: ${framework}`);
+    const entryFile = findEntryFile(framework);
+    if (!entryFile) {
+      console.log("\n\u26A0\uFE0F  Could not detect entry file. Add this to your app manually:\n");
+      console.log(`   import { Tack } from '@tacktext/widget'`);
+      console.log(`   Tack.init({ projectId: '${slug}' })
+`);
+      return;
+    }
+    injectWidget(entryFile, slug);
+    console.log("\n\u{1F389} Tack is ready!\n");
+    console.log("Next steps:");
+    console.log("  1. Deploy your app");
+    console.log("  2. Share the link - anyone can add feedback");
+    console.log("  3. Click the \u{1F4AC} button to view/add comments\n");
+    console.log(`To claim this project later: https://tacktext.vercel.app/claim/${slug}
+`);
+  } else {
+    console.log(`
+\u{1F4CC} Tack CLI - Feedback for Prototypes
+
+Usage:
+  npx @tacktext/widget init [project-name]    Add Tack to your project
+
+Examples:
+  npx @tacktext/widget init "My Prototype"
+  npx @tacktext/widget init
+`);
+  }
+}
+main().catch(console.error);

package/dist/index.d.mts

@@ -0,0 +1,67 @@
+interface TackConfig {
+    projectId: string;
+    apiUrl?: string;
+    supabaseUrl?: string;
+    supabaseKey?: string;
+}
+
+declare class TackWidget {
+    private config;
+    private api;
+    private auth;
+    private container;
+    private shadowRoot;
+    private selector;
+    private form;
+    private panel;
+    private pins;
+    private card;
+    private realtime;
+    private presence;
+    private commentMode;
+    private comments;
+    private currentVersion;
+    private currentPagePath;
+    private originalPushState;
+    private originalReplaceState;
+    private pollingInterval;
+    private boundOnUrlChange;
+    constructor(config: TackConfig);
+    mount(): Promise<void>;
+    private joinPresence;
+    signIn(): Promise<void>;
+    private getPagePath;
+    private setupUrlChangeDetection;
+    private onUrlChange;
+    private createToggleButton;
+    private toggleCommentMode;
+    private enableCommentMode;
+    private disableCommentMode;
+    private onPanelClose;
+    private onShare;
+    private injectPageStyles;
+    private setPanelOpen;
+    private updateToggleAria;
+    private loadComments;
+    private onElementSelected;
+    private onCommentSubmit;
+    private onCommentClick;
+    private onPinClick;
+    private onCardClose;
+    private onResolve;
+    private onReply;
+    private onEdit;
+    private onDelete;
+    private scrollToComment;
+    private handleDeepLink;
+    private subscribeToRealtime;
+    private handleRealtimeEvent;
+    private showToast;
+    destroy(): void;
+}
+
+declare const Tack: {
+    init(config: TackConfig): TackWidget;
+};
+
+export { Tack, type TackConfig, TackWidget };

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+interface TackConfig {
+    projectId: string;
+    apiUrl?: string;
+    supabaseUrl?: string;
+    supabaseKey?: string;
+}
+
+declare class TackWidget {
+    private config;
+    private api;
+    private auth;
+    private container;
+    private shadowRoot;
+    private selector;
+    private form;
+    private panel;
+    private pins;
+    private card;
+    private realtime;
+    private presence;
+    private commentMode;
+    private comments;
+    private currentVersion;
+    private currentPagePath;
+    private originalPushState;
+    private originalReplaceState;
+    private pollingInterval;
+    private boundOnUrlChange;
+    constructor(config: TackConfig);
+    mount(): Promise<void>;
+    private joinPresence;
+    signIn(): Promise<void>;
+    private getPagePath;
+    private setupUrlChangeDetection;
+    private onUrlChange;
+    private createToggleButton;
+    private toggleCommentMode;
+    private enableCommentMode;
+    private disableCommentMode;
+    private onPanelClose;
+    private onShare;
+    private injectPageStyles;
+    private setPanelOpen;
+    private updateToggleAria;
+    private loadComments;
+    private onElementSelected;
+    private onCommentSubmit;
+    private onCommentClick;
+    private onPinClick;
+    private onCardClose;
+    private onResolve;
+    private onReply;
+    private onEdit;
+    private onDelete;
+    private scrollToComment;
+    private handleDeepLink;
+    private subscribeToRealtime;
+    private handleRealtimeEvent;
+    private showToast;
+    destroy(): void;
+}
+
+declare const Tack: {
+    init(config: TackConfig): TackWidget;
+};
+
+export { Tack, type TackConfig, TackWidget };