use-chisel 0.1.8 → 0.1.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "use-chisel",
-  "version": "0.1.8",
-  "description": "Dev-only visual editing layer for Next.js apps.",
+  "version": "0.1.10",
+  "description": "Hosted website reviews and visual editing for Next.js.",
   "type": "module",
   "keywords": [
     "nextjs",
@@ -63,7 +63,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json && node -e \"const fs=require('node:fs');for(const f of ['review-ui.css','workspace-design.css'])fs.copyFileSync('src/review/'+f,'dist/review/'+f)\" && esbuild dist/index.js dist/workspace-entry.js dist/hosted-entry.js dist/review-entry.js dist/review-content-entry.js --bundle --minify --format=esm --platform=browser --loader:.css=text --external:react --external:react/jsx-runtime --external:react-dom --external:use-chisel --external:slate --external:slate-history --external:slate-react --define:process.env.NODE_ENV=process.env.NODE_ENV --outdir=dist --allow-overwrite",
+    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.json --emitDeclarationOnly && node build.mjs",
     "prepack": "npm run build",
     "test": "vitest run",
     "typecheck": "tsc -p tsconfig.json --noEmit"
@@ -74,7 +74,7 @@
     "react-dom": ">=18 <20"
   },
   "dependencies": {
-    "lucide-react": "^1.61.0",
+    "html-to-image": "^1.11.13",
     "slate": "^0.110.2",
     "slate-history": "^0.110.3",
     "slate-react": "^0.110.3"
@@ -83,6 +83,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.7",
     "esbuild": "^0.28.1",
+    "lucide-react": "^1.61.0",
     "vitest": "^5.0.5"
   }
 }

package/src/review/workspace-design.css

@@ -2,6 +2,7 @@
 .feedback-shell.chisel-review .comment-thread[data-native-ui=true],.feedback-shell.chisel-review .comment-box-native{border:0;border-radius:16px;background:var(--chisel-ui-surface);box-shadow:var(--chisel-ui-popover-shadow)}
 .feedback-shell.chisel-review .comment-thread[data-expanded=false]{border-radius:16px 16px 16px 0}
 .chisel-review-thread-content,.review-thread,.review-comment-content{width:100%;min-width:0}
+.review-capture-context{margin:4px 12px 8px;font-size:12px;line-height:18px;color:var(--chisel-ui-muted);overflow-wrap:anywhere}
 .review-comment,.feedback-shell.chisel-review .chisel-review-message{display:flex;align-items:flex-start;gap:12px;padding:12px 20px}
 .review-comment-content,.chisel-review-message-content{flex:1;min-width:0}
 .review-comment-avatar{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--chisel-ui-avatar);color:var(--chisel-ui-avatar-text);font-size:12px}
@@ -16,7 +17,11 @@
 @media(hover:none){.review-comment-edit{opacity:1}}
 .review-inline-edit{border:1px solid var(--chisel-ui-border);border-radius:10px;padding:8px}
 .review-inline-edit-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}
-.review-inline-edit-actions button{min-height:32px;padding:0 10px;border:0;border-radius:6px;background:var(--chisel-ui-hover);color:var(--chisel-ui-text)}
+.review-inline-edit-actions button{min-height:40px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--chisel-ui-text)}
+.review-inline-edit-actions button:last-child{background:var(--chisel-ui-action);color:var(--chisel-ui-action-text)}
+.review-inline-edit-actions button:not(:last-child):hover{background:var(--chisel-ui-hover)}
+.review-inline-edit-actions button:disabled{opacity:.45}
+@media(pointer:coarse){.review-inline-edit-actions button{min-height:44px}}
 .review-comment-body,.chisel-rich-body{font-size:14px;line-height:21px;white-space:pre-wrap;overflow-wrap:anywhere}
 .review-comment-body p{margin:0;min-height:21px}.review-comment-body p+p{margin-top:8px}
 .review-comment-body a{color:var(--chisel-ui-accent-text);text-decoration:underline;text-underline-offset:3px}
@@ -52,6 +57,7 @@
 .chisel-attachment-preview>button:not(.review-media-thumbnail){position:absolute;top:0;right:0;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:0 8px;background:var(--chisel-ui-surface);color:var(--chisel-ui-text)}
 .review-retry-upload{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--chisel-ui-text);font:inherit}
 .review-retry-upload:hover{background:var(--chisel-ui-hover)}
+.chisel-attachment-controls .review-retry-upload[aria-label]{min-width:40px;justify-content:center}
 .chisel-attachment-preview>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px;font-size:12px}
 .feedback-shell.chisel-review .chisel-expand-thread{display:inline-flex;align-items:center;margin:0 20px 8px 60px;min-height:40px;padding:0;border:0;background:transparent;color:var(--chisel-ui-secondary);font-size:13px}
 .chisel-review [data-slate-placeholder]{opacity:1!important;color:var(--chisel-ui-secondary)}
@@ -61,11 +67,13 @@
 .review-media-thumbnail img,.review-media-thumbnail video{display:block;width:100%;height:120px;object-fit:contain}
 .review-media-play{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#0009;color:white;transform:translate(-50%,-50%)}
 .review-media-lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:var(--chisel-ui-text)}
+.review-media-lightbox[open]{display:flex;align-items:center;justify-content:center}
 .review-media-lightbox::backdrop{background:#000b}
-.review-media-lightbox-content{display:flex;flex-direction:column;width:min(100%,1000px);max-height:100%;margin:auto;border-radius:12px;overflow:hidden;background:var(--chisel-ui-surface);box-shadow:0 16px 48px #0006}
+.review-media-lightbox-content{display:flex;flex-direction:column;width:fit-content;min-width:min(320px,100%);max-width:min(100%,1000px);max-height:100%;margin:auto;border-radius:12px;overflow:hidden;background:var(--chisel-ui-surface);box-shadow:0 16px 48px #0006}
 .review-media-lightbox-content header{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px 8px 16px}
 .review-media-lightbox-content header span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.review-media-lightbox-content header a{color:var(--chisel-ui-text);font-size:13px}
+.review-media-lightbox-content header a{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;min-height:40px;padding:0;border-radius:8px;color:var(--chisel-ui-text);font-size:13px}
+.review-media-lightbox-content header a:hover{background:var(--chisel-ui-hover)}
 .review-media-lightbox-content header button{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--chisel-ui-text)}
 .review-media-lightbox-content header button:hover{background:var(--chisel-ui-hover)}
 .review-media-lightbox-content>img,.review-media-lightbox-content>video{display:block;min-height:0;max-width:100%;max-height:calc(100dvh - 104px);margin:auto;object-fit:contain;background:#000}

package/dist/persistence.d.ts

@@ -1,30 +0,0 @@
-export declare const STORAGE_SCHEMA_VERSION: 1;
-export type StoredElementChange = {
-    selector: string;
-    sourceHint?: string;
-    text?: string;
-    styles: Partial<Record<string, string>>;
-    asset?: {
-        fileName: string;
-        mimeType: string;
-        size: number;
-    };
-};
-export type StoredVersion = {
-    id: string;
-    name: string;
-    elements: Record<string, StoredElementChange>;
-};
-export type VersionEnvelope = {
-    schemaVersion: typeof STORAGE_SCHEMA_VERSION;
-    activeVersionId: string;
-    versions: StoredVersion[];
-};
-export type StorageResult = {
-    envelope?: VersionEnvelope;
-    warning?: string;
-    migrated: boolean;
-};
-export declare function createVersionEnvelope(versions: StoredVersion[], activeVersionId: string): VersionEnvelope;
-export declare function parseVersionStorage(raw: string | null): StorageResult;
-export declare function isVersionEnvelope(value: unknown): value is VersionEnvelope;

package/dist/review/media-lightbox.d.ts

@@ -1,8 +0,0 @@
-type Media = {
-    src: string;
-    name: string;
-    mimeType: string;
-    onError?(): void;
-};
-export declare function MediaPreview({ src, name, mimeType, onError }: Media): import("react").JSX.Element;
-export {};

package/dist/theme.d.ts

@@ -1 +0,0 @@
-export declare const themeCSS = "\n:is(.chisel-root,.feedback-shell,.chisel-sign-in,.chisel-color-picker,.comment-box) :focus{outline:none}\n.chisel-root,.feedback-shell,.chisel-sign-in,.chisel-color-picker,.comment-box{color-scheme:light;--chisel-ui-panel-shadow:0 4px 20px rgba(0,0,0,.08);--chisel-ui-canvas:#f7f7f7;--chisel-ui-surface:#ffffff;--chisel-ui-raised:#f5f5f5;--chisel-ui-inset:#eeeeee;--chisel-ui-hover:#f0f0f0;--chisel-ui-selected:#eaeaea;--chisel-ui-border:#e2e2e2;--chisel-ui-border-strong:#c4c4c4;--chisel-ui-text:#242424;--chisel-ui-secondary:#626262;--chisel-ui-muted:#686868;--chisel-ui-focus:#2468d3;--chisel-ui-accent-text:#2468d3;--chisel-ui-accent-surface:#edf4ff;--chisel-ui-action:#242424;--chisel-ui-action-text:#ffffff;--chisel-ui-danger:#b33737;--chisel-ui-avatar:#ededed;--chisel-ui-avatar-text:#565656;--chisel-ui-scrollbar:#c2c2c2;--chisel-ui-checker-light:#e5e5e5;--chisel-ui-checker-dark:#c7c7c7;}\n@media(prefers-color-scheme:dark){.chisel-root,.feedback-shell,.chisel-sign-in,.chisel-color-picker,.comment-box{color-scheme:dark;--chisel-ui-panel-shadow:0 4px 20px #0003;--chisel-ui-canvas:#171717;--chisel-ui-surface:#222222;--chisel-ui-raised:#2a2a2a;--chisel-ui-inset:#191919;--chisel-ui-hover:#303030;--chisel-ui-selected:#383838;--chisel-ui-border:#3c3c3c;--chisel-ui-border-strong:#555555;--chisel-ui-text:#ededed;--chisel-ui-secondary:#b7b7b7;--chisel-ui-muted:#a5a5a5;--chisel-ui-focus:#8bb9ff;--chisel-ui-accent-text:#8bb9ff;--chisel-ui-accent-surface:#253447;--chisel-ui-action:#ededed;--chisel-ui-action-text:#111111;--chisel-ui-danger:#ffa5a5;--chisel-ui-avatar:#383838;--chisel-ui-avatar-text:#cccccc;--chisel-ui-scrollbar:#50504d;--chisel-ui-checker-light:#555555;--chisel-ui-checker-dark:#333333;}\n}\n\n.chisel-root,.feedback-shell,.chisel-sign-in,.chisel-color-picker,.comment-box{--chisel-ui-font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;--chisel-ui-space:4px;--chisel-ui-control:40px;--chisel-ui-radius:8px;--chisel-ui-text-size:13px;--chisel-ui-small:12px;--chisel-ui-motion:120ms cubic-bezier(.2,0,0,1);--chisel-ui-popover-shadow:0 2px 6px #0000000f,0 12px 36px #0000001f;}\n@media(prefers-color-scheme:dark){.chisel-root,.feedback-shell,.chisel-sign-in,.chisel-color-picker,.comment-box{--chisel-ui-popover-shadow:0 0 0 1px #ffffff0d,0 4px 12px #0003,0 16px 40px #0004;}}\n";

package/dist/workspace/area.d.ts

@@ -1,10 +0,0 @@
-import type { CommentArea } from './comments';
-export declare function areaAt(area: CommentArea, doc: Document | null, scroll: {
-    x: number;
-    y: number;
-}): {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-};

package/dist/workspace/color-picker.d.ts

@@ -1,6 +0,0 @@
-export default function ColorPicker({ label, value, onChange, disabled }: {
-    label: string;
-    value: string;
-    onChange(value: string): void;
-    disabled: boolean;
-}): import("react").JSX.Element;

package/dist/workspace/color.d.ts

@@ -1,9 +0,0 @@
-export type HSV = {
-    h: number;
-    s: number;
-    v: number;
-    a: number;
-};
-export declare function rgbToHsv(r: number, g: number, b: number, a?: number): HSV;
-export declare function hsvToHex({ h, s, v, a }: HSV): string;
-export declare function readColor(value: string): HSV;

package/dist/workspace/comment-drag-handle.d.ts

@@ -1,3 +0,0 @@
-export default function CommentDragHandle({ onMoveStart }: {
-    onMoveStart?: () => void;
-}): import("react").JSX.Element;

package/dist/workspace/composer-position.d.ts

@@ -1,13 +0,0 @@
-type Size = {
-    width: number;
-    height: number;
-};
-export declare function composerPosition(pin: {
-    x: number;
-    y: number;
-}, card: Size, viewport: Size): {
-    left: number;
-    top: number;
-    maxHeight: number;
-};
-export {};

package/dist/workspace/confirmation.d.ts

@@ -1,11 +0,0 @@
-type Confirmation = {
-    title: string;
-    description: string;
-    action: string;
-    danger?: boolean;
-};
-export declare function useConfirmation(): {
-    confirm: (next: Confirmation) => Promise<boolean>;
-    dialog: import("react").JSX.Element | null;
-};
-export {};

package/dist/workspace/hover-dismiss.d.ts

@@ -1,4 +0,0 @@
-export declare function createHoverDismiss(onClose: () => void): {
-    cancel: () => void;
-    schedule(): void;
-};

package/dist/workspace/mode-shortcuts.d.ts

@@ -1 +0,0 @@
-export declare function modeShortcut(event: KeyboardEvent): "comment" | "edit" | "view" | "toggle-comments" | undefined;

package/dist/workspace/page-control.d.ts

@@ -1,7 +0,0 @@
-export default function PageControl({ path, routes, disabled, onNavigate, onOpen }: {
-    path: string;
-    routes: string[];
-    disabled: boolean;
-    onNavigate(input: string): Promise<boolean>;
-    onOpen?(): void;
-}): import("react").JSX.Element;

package/dist/workspace/preview-navigation.d.ts

@@ -1,4 +0,0 @@
-export declare function normalizePreviewPath(input: string, origin: string, currentPath?: string): string | null;
-export declare function previewPagePath(path: string): string;
-export declare function previewPath(win: Pick<Window, "location">): string | null;
-export declare function observePreviewNavigation(win: Window, onNavigate: (path: string) => void): () => void;

package/dist/workspace/thread-morph.d.ts

@@ -1 +0,0 @@
-export declare function animateThread(card: HTMLElement, closing?: boolean, previous?: Animation | null): Animation | null;