npm - @framed-dev/react - Versions diffs - 0.2.0 → 0.3.0 - Mend

@framed-dev/react 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md CHANGED Viewed

@@ -1,83 +1,36 @@
-# @framed-dev/react
+# @framed/react
-Self-hosted website feedback and specification platform.
+Collect visual feedback and export AI-ready prompts.
-[![npm version](https://img.shields.io/npm/v/@framed-dev/react.svg)](https://www.npmjs.com/package/@framed-dev/react)
+[![npm version](https://img.shields.io/npm/v/@framed/react.svg)](https://www.npmjs.com/package/@framed/react)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
-## What is Framed?
+## What it does
-Framed is a complete feedback and project specification platform that you can self-host in your own Supabase project. It includes:
-- **Feedback Widget** - Visual feedback collection with screenshots, element selection, and annotations
-- **Dashboard** - Project overview and task management
-- **AI Export** - Copy structured prompts for Bolt, Lovable, Cursor, or any AI coding assistant
+- **Visual selection** — Click any element on your site to attach feedback
+- **Screenshot capture** — Capture and annotate screenshots
+- **Task organization** — Organize and prioritize feedback as tasks
+- **AI export** — Copy structured prompts for Bolt, Lovable, or Cursor
 ## Quick Start
-### 1. Initialize (sets up database)
-```bash
-npx @framed-dev/cli init
-```
-This will:
-- Detect your project type (Next.js, Vite, etc.)
-- Collect your Supabase credentials
-- Scaffold basic route files
-Then run migrations:
-```bash
-npx @framed-dev/cli migrate
-```
-This creates all required database tables, RLS policies, and storage buckets in your Supabase project.
-### 2. Install SDK
 ```bash
-npm install @framed-dev/react
-# or
-pnpm add @framed-dev/react
+npm install @framed/react
 ```
-### 3. Configure Tailwind
-```js
-// tailwind.config.js
-const framedPreset = require('@framed-dev/react/tailwind');
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  presets: [framedPreset],
-  content: [
-    './app/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@framed-dev/react/dist/**/*.{js,mjs}',
-  ],
-};
-```
-### 4. Add Provider & Widget
 ```tsx
-// app/layout.tsx (Next.js App Router)
-import { FramedProvider, FeedbackWidget } from '@framed-dev/react';
+// app/layout.tsx
+import { FramedProvider, FeedbackWidget } from '@framed/react';
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>
         <FramedProvider
           config={{
-            projectId: 'my-project',
-            mode: 'sync',
-            auth: { mode: 'dev' }, // Change to 'magic_link' for production
-            sync: {
-              supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL!,
-              apiKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
-            },
+            supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL!,
+            supabaseKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
           }}
         >
           {children}
@@ -89,202 +42,78 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
-### 5. Add Framed Routes (Recommended)
-Use `FramedApp` with a catch-all route for the complete wizard experience:
-```tsx
-// app/framed/[[...slug]]/page.tsx
-"use client";
-import { FramedApp } from '@framed-dev/react';
-import '@framed-dev/react/widget-styles.css';
-export default function FramedPage() {
-  return <FramedApp basename="/framed" />;
-}
-```
-This provides all routes automatically:
-- `/framed` - Dashboard
-- `/framed/wizard/:id/phase1` - Discovery (Phase 1)
-- `/framed/wizard/:id/phase2` - Detailing (Phase 2)
-- `/framed/wizard/:id/phase3` - Overview (Phase 3)
-- `/framed/wizard/:id/phase4` - Review & Feedback (Phase 4)
-- `/framed/wizard/:id/phase5` - Manage & Maintain (Phase 5)
-- `/framed/wizard/:id/build-spec` - AI Export
 ## Environment Variables
 ```env
-# Required
 NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
-NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
-# Only needed for migrations (not in client code)
-SUPABASE_SERVICE_ROLE_KEY=eyJ...
-# Optional: Premium features via Framed.dev API
-NEXT_PUBLIC_FRAMED_LICENSE_KEY=framed_lic_xxx
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbG...
 ```
-## Configuration Options
-```tsx
-interface FramedConfig {
-  projectId: string;              // Your project identifier
-  mode: 'local' | 'sync';         // 'local' for localStorage, 'sync' for Supabase
-  auth: {
-    mode: 'dev' | 'local' | 'magic_link';
-    loginRoute?: string;          // Custom login page route
-  };
-  sync?: {
-    supabaseUrl: string;
-    apiKey: string;               // Supabase anon key
-  };
-  widget?: {
-    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-    theme?: 'light' | 'dark' | 'auto';
-    hotkey?: string;
-  };
-}
+## Database Setup
+Run this in your Supabase SQL editor:
+```sql
+create table framed_tasks (
+  id uuid primary key default gen_random_uuid(),
+  project_id text,
+  type text not null,
+  status text not null default 'open',
+  element jsonb,
+  page jsonb not null,
+  feedback jsonb not null,
+  task jsonb not null,
+  attachments jsonb,
+  meta jsonb not null,
+  created_at timestamptz default now(),
+  updated_at timestamptz default now()
+);
+alter table framed_tasks enable row level security;
+create policy "Allow all for authenticated users" on framed_tasks
+  for all using (auth.role() = 'authenticated');
 ```
-## Route Helpers
+## Configuration
-Use the built-in route helpers for consistent navigation:
-```tsx
-import { framedRoutes } from '@framed-dev/react';
-// Routes
-framedRoutes.dashboard        // '/framed'
-framedRoutes.login            // '/framed/login'
-framedRoutes.project('123')   // '/framed/project/123'
-framedRoutes.review('123')    // '/framed/project/123/review'
-framedRoutes.build('123')     // '/framed/project/123/build'
-framedRoutes.manage('123')    // '/framed/project/123/manage'
-```
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `supabaseUrl` | `string` | Yes | Your Supabase project URL |
+| `supabaseKey` | `string` | Yes | Your Supabase anon key |
+| `projectId` | `string` | No | Group tasks by project |
+| `theme` | `'light' \| 'dark'` | No | Widget theme (default: light) |
 ## Hooks
-### useFramed
-Access the full Framed context:
-```tsx
-import { useFramed } from '@framed-dev/react';
-function MyComponent() {
-  const {
-    tasks,
-    openTasks,
-    isAuthenticated,
-    refreshTasks,
-    saveTask,
-    features,
-  } = useFramed();
-  return <div>{openTasks.length} open tasks</div>;
-}
-```
-### useFramedTasks
-Simplified access to tasks:
 ```tsx
-import { useFramedTasks } from '@framed-dev/react';
+import { useTasks } from '@framed/react';
 function TaskList() {
-  const { tasks, openTasks, completedTasks, markDone } = useFramedTasks();
+  const { tasks, openTasks, markDone, copyPrompt } = useTasks();
   return (
-    <ul>
-      {openTasks.map(task => (
-        <li key={task.id}>
-          {task.feedback.raw}
-          <button onClick={() => markDone(task.id)}>Done</button>
-        </li>
-      ))}
-    </ul>
+    <div>
+      <p>{openTasks.length} open tasks</p>
+      <button onClick={() => copyPrompt()}>Copy AI Prompt</button>
+    </div>
   );
 }
 ```
-## Components
+### Available hooks
-### FeedbackWidget
+- `useTasks()` — Access tasks, mark done, copy AI prompt
+- `useFramed()` — Access full provider context
-The main feedback collection widget:
+## Export to AI Tools
-```tsx
-import { FeedbackWidget } from '@framed-dev/react';
+1. Collect feedback via widget
+2. Open drawer → click **Copy AI Prompt**
+3. Paste in Bolt, Lovable, or Cursor
+4. AI implements the changes
-<FeedbackWidget
-  position="bottom-right"
-  theme="light"
-  hotkey="f"
-/>
-```
-### TasksReadyPanel
-Display pending tasks with AI export:
-```tsx
-import { TasksReadyPanel } from '@framed-dev/react';
-<TasksReadyPanel
-  showCopyPrompt
-  onTaskClick={(task) => console.log(task)}
-/>
-```
-## Premium Features
-Get a license key at [framed.dev](https://framed.dev) for:
-- **AI-powered task parsing** - Natural language to structured tasks
-- **PageSpeed analysis** - Automated performance reports
-- **SEO audits** - Comprehensive site analysis
-- **Analytics dashboard** - Usage and engagement metrics
-- **White-label branding** - Custom widget appearance
-## Local Development Mode
-For development without Supabase:
-```tsx
-<FramedProvider
-  config={{
-    projectId: 'dev',
-    mode: 'local',  // Uses localStorage
-    auth: { mode: 'dev' },
-  }}
->
-  {children}
-  <FeedbackWidget />
-</FramedProvider>
-```
-This stores all data in localStorage - perfect for prototyping.
-## CLI Commands
-```bash
-# Initialize Framed in your project
-npx @framed-dev/cli init
-# Run database migrations
-npx @framed-dev/cli migrate
-# Show migrations without executing
-npx @framed-dev/cli migrate --dry-run
-```
+The prompt includes task details, element selectors, page context, and suggested changes — everything the AI needs to make the fix.
 ## License
@@ -294,4 +123,4 @@ MIT
 - [GitHub](https://github.com/framed-dev/framed-widget)
 - [Issues](https://github.com/framed-dev/framed-widget/issues)
-- [Framed.dev](https://framed.dev) - Premium features
+- Docs: Coming soon