use-chisel 0.1.0 → 0.1.1

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.
package/README.md CHANGED
@@ -1,7 +1,43 @@
1
1
  # use-chisel
2
2
 
3
+ ## Combined Workspace
4
+
5
+ `use-chisel/workspace` exports `ChiselWorkspace`, `ChiselPreview`,
6
+ `ChiselWorkspaceStyles`, and the `WorkspaceUser` type. Mount `ChiselPreview`
7
+ in your layout and render `ChiselWorkspace` in an authenticated `/chisel` route.
8
+ Pass `user`, `validateSession: () => Promise<boolean>`, and
9
+ `signOut: () => Promise<void>` through a client component. Authentication and
10
+ route handling belong to the host app; see the repository demo for Supabase Auth
11
+ with Google.
12
+
13
+ Edit, Comment, and View share one toolbar. Threads expand from element pins;
14
+ history appears in the sidebar.
15
+ Use **E** for Edit, **C** for Comment, and **V** for View. **Shift+C** toggles
16
+ all comment pins, threads, and the comments sidebar. Shortcuts are ignored
17
+ while typing in form fields or editable content. Comments are browser-local by
18
+ default. Pass a `CommentStore` with `list()` and `mutate(change)` to share them;
19
+ mutations create a comment, edit its proposal, append one reply, or resolve a
20
+ thread. Implement optional `delete(id)` to expose deletion for authors and site
21
+ owners; enforce these permissions in the backend. Keep the client-generated
22
+ comment/reply UUID when retrying a failed mutation so the adapter can make writes
23
+ idempotent. The demo uses authenticated Supabase endpoints with server-derived
24
+ authors; see `apps/demo/lib/comments.ts` and `supabase/` for its adapter, migrations,
25
+ and reviewer access policies.
26
+ `canManageComments` exposes management controls for other reviewers’ threads; optional
27
+ `getReviewLink(rotate?)` enables sharing a client review link.
28
+ The host must enforce
29
+ these permissions in its backend as the demo does. The tweak editor is development-only. The standalone API below remains
30
+ supported.
31
+
32
+ To close reviews when a site goes live, disable the preview integration and
33
+ return 404 from the workspace route on the server. The demo host implements this
34
+ with `CHISEL_ENABLED=0`; production defaults off and staging explicitly sets `1`.
35
+ This is host configuration, not a client-side security toggle in the npm package.
36
+
3
37
  Dev-only visual editing layer for Next.js apps.
4
38
 
39
+ Supports Next.js 14 through 16 with React 18 or 19, including both App Router and Pages Router projects.
40
+
5
41
  ## Install
6
42
 
7
43
  ```bash
@@ -10,7 +46,7 @@ npm install use-chisel
10
46
 
11
47
  ## Use
12
48
 
13
- Mount `Chisel` in your app layout during development:
49
+ Mount `Chisel` in your app layout:
14
50
 
15
51
  ```tsx
16
52
  import { Chisel } from "use-chisel"
@@ -20,13 +56,19 @@ export default function RootLayout({ children }: { children: React.ReactNode })
20
56
  <html lang="en">
21
57
  <body>
22
58
  {children}
23
- {process.env.NODE_ENV === "development" ? <Chisel /> : null}
59
+ <Chisel />
24
60
  </body>
25
61
  </html>
26
62
  )
27
63
  }
28
64
  ```
29
65
 
66
+ Open any route with `?editor` to show the editor:
67
+
68
+ ```txt
69
+ http://localhost:3000?editor
70
+ ```
71
+
30
72
  Add `EditableRegion` when you want copied prompts to include stable source hints:
31
73
 
32
74
  ```tsx
@@ -35,8 +77,28 @@ import { EditableRegion } from "use-chisel"
35
77
  <EditableRegion id="homepage.hero.title">Launch faster</EditableRegion>
36
78
  ```
37
79
 
80
+ Chisel persists route versions in the browser. Local image files are previewed only for the current session; after a reload, re-select the file when prompted. Chisel inspects same-document light DOM. Cross-origin iframes and closed shadow roots are not supported.
81
+
38
82
  ## Publish
39
83
 
40
84
  ```bash
41
85
  npm publish --workspace use-chisel --access public
42
86
  ```
87
+
88
+ A realtime comment adapter can implement optional `CommentStore.subscribe(onChange)`;
89
+ return an unsubscribe function. The workspace refreshes after notifications instead
90
+ of its fallback polling interval. Optional `collaboration` props provide online
91
+ reviewers, page presence, unread thread IDs, and read tracking. A realtime adapter should refresh on reconnect/focus and recover
92
+ when its connection is unavailable. Only acknowledge message activity the reviewer
93
+ has actually seen. The demo's Supabase integration uses these interfaces without
94
+ adding a database SDK dependency to this package.
95
+
96
+ Optional `commentUI` renderers can replace the thread and composer while retaining
97
+ Chisel's workspace behavior. The composer receives
98
+ `renderContent(editor, hasAttachments?, uploading?)` to keep settings, Cancel,
99
+ dictation, and explicit submit in the same form. Custom rich text can be passed as
100
+ optional mutation `body`, with validated upload IDs in `attachmentTokens`. Adapters
101
+ must validate both before storing them and bind uploads to the authenticated user
102
+ and site. Keep the editor and attachment draft when `onSubmit` or `onReply` returns
103
+ `false`; release it only after a successful save. Slate and Supabase remain demo
104
+ dependencies. The built-in local UI remains available without either dependency.
package/dist/index.d.ts CHANGED
@@ -3,6 +3,7 @@ export type ChiselProps = {
3
3
  enabled?: boolean;
4
4
  position?: "left" | "right";
5
5
  projectName?: string;
6
+ embedded?: boolean;
6
7
  };
7
8
  export type DOMRectJSON = {
8
9
  x: number;
@@ -34,11 +35,16 @@ export type EditIntent = {
34
35
  before: string | number | null;
35
36
  after: string | number;
36
37
  }>;
38
+ asset?: {
39
+ fileName: string;
40
+ mimeType: string;
41
+ size: number;
42
+ };
37
43
  };
38
44
  type EditableRegionProps = React.HTMLAttributes<HTMLSpanElement> & {
39
45
  id: string;
40
- as?: keyof JSX.IntrinsicElements;
46
+ as?: keyof React.JSX.IntrinsicElements;
41
47
  };
42
48
  export declare function EditableRegion({ id, as, children, ...props }: EditableRegionProps): React.JSX.Element;
43
- export declare function Chisel({ enabled, position, projectName }: ChiselProps): React.JSX.Element | null;
49
+ export declare function Chisel({ enabled, position, projectName, embedded }: ChiselProps): React.JSX.Element | null;
44
50
  export {};