@open-slide/core 0.0.11 → 0.0.13

package/src/app/components/inspector/{InspectorPanel.tsx → inspector-panel.tsx}

@@ -6,10 +6,11 @@ import {
   Bold,
   ImageIcon,
   Italic,
-  Trash2,
   X,
 } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Field, NumberField, Section } from '@/components/panel/panel-fields';
+import { PANEL_TRANSITION_MS, PanelShell, useAnimatedOpen } from '@/components/panel/panel-shell';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -19,8 +20,6 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Select,
   SelectContent,
@@ -35,13 +34,9 @@ import { Toggle } from '@/components/ui/toggle';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { type AssetEntry, useAssets } from '@/lib/assets';
 import { findSlideSource } from '@/lib/inspector/fiber';
-import type { SlideComment } from '@/lib/inspector/useComments';
-import type { EditOp } from '@/lib/inspector/useEditor';
+import type { EditOp } from '@/lib/inspector/use-editor';
 import { cn } from '@/lib/utils';
-import { type SelectedTarget, useInspector } from './InspectorProvider';
-
-const PANEL_W = 340;
-const PANEL_TRANSITION_MS = 280;
+import { type SelectedTarget, useInspector } from './inspector-provider';
 
 type ElementSnapshot = {
   fontSize: number;
@@ -54,10 +49,11 @@ type ElementSnapshot = {
   letterSpacing: number;
   text: string | null;
   imageSrc: string | null;
+  placeholder: { hint: string; width?: number; height?: number } | null;
 };
 
 export function InspectorPanel() {
-  const { active, slideId, selected, setSelected, bufferOps, pendingCount, comments, add, remove } =
+  const { active, slideId, selected, setSelected, bufferOps, pendingCount, add, applyEdit } =
     useInspector();
   const [snapshot, setSnapshot] = useState<ElementSnapshot | null>(null);
   const reloadCounter = useReloadCounter();
@@ -116,24 +112,15 @@ export function InspectorPanel() {
   );
 
   // `pinned` keeps the last selection rendered through the close-out
-  // animation; `animVisible` lags one frame so the width transition
-  // fires on the 0 → PANEL_W flip.
+  // animation so the panel's contents don't blank out before it collapses.
   const targetOpen = active && !!selected && !!snapshot;
   const [pinned, setPinned] = useState<{ s: SelectedTarget; n: ElementSnapshot } | null>(null);
-  const [animVisible, setAnimVisible] = useState(false);
+  const animVisible = useAnimatedOpen(targetOpen && !!pinned);
 
   useEffect(() => {
     if (selected && snapshot) setPinned({ s: selected, n: snapshot });
   }, [selected, snapshot]);
 
-  useEffect(() => {
-    if (targetOpen && pinned) {
-      const id = requestAnimationFrame(() => setAnimVisible(true));
-      return () => cancelAnimationFrame(id);
-    }
-    setAnimVisible(false);
-  }, [targetOpen, pinned]);
-
   useEffect(() => {
     if (!targetOpen && pinned) {
       const t = setTimeout(() => setPinned(null), PANEL_TRANSITION_MS);
@@ -145,114 +132,91 @@ export function InspectorPanel() {
   const { s: pinSelected, n: pinSnapshot } = pinned;
 
   return (
-    <aside
-      data-inspector-ui
-      className="flex h-full shrink-0 justify-end overflow-hidden bg-card transition-[width,border-left-width] ease-out"
-      style={{
-        width: animVisible ? PANEL_W : 0,
-        borderLeftWidth: animVisible ? 1 : 0,
-        transitionDuration: `${PANEL_TRANSITION_MS}ms`,
-      }}
-    >
-      <div style={{ width: PANEL_W }} className="flex h-full shrink-0 flex-col">
-        <header className="flex shrink-0 items-center justify-between gap-2 border-b px-3 py-2.5">
+    <PanelShell
+      uiAttr="inspector"
+      animVisible={animVisible}
+      header={
+        <>
           <div className="flex min-w-0 items-center gap-2">
-            <span className="rounded-md bg-muted px-1.5 py-0.5 font-mono text-[11px] text-foreground">
+            <span className="font-heading text-[12px] font-semibold tracking-tight">Inspect</span>
+            <span aria-hidden className="h-3 w-px bg-hairline" />
+            <span className="rounded-[3px] border border-hairline bg-card px-1.5 py-px font-mono text-[10.5px] text-foreground/85">
               &lt;{pinSelected.anchor.tagName.toLowerCase()}&gt;
             </span>
           </div>
           <Button
             variant="ghost"
-            size="icon"
-            className="size-7 text-muted-foreground hover:text-foreground"
+            size="icon-sm"
+            className="text-muted-foreground hover:text-foreground"
             onClick={() => setSelected(null)}
             aria-label="Deselect"
           >
             <X className="size-3.5" />
           </Button>
-        </header>
-
-        <ScrollArea className="flex flex-1 flex-col">
-          <div className="flex min-h-full flex-col">
-            {pinSnapshot.text !== null && (
-              <Section title="Content">
-                <ContentField snapshot={pinSnapshot} apply={apply} />
-              </Section>
-            )}
-
-            <Separator />
-
-            <Section title="Typography">
-              <FontSizeField snapshot={pinSnapshot} apply={apply} />
-              <FontWeightField snapshot={pinSnapshot} apply={apply} />
-              <StyleToggles snapshot={pinSnapshot} apply={apply} />
-              <LineHeightField snapshot={pinSnapshot} apply={apply} />
-              <LetterSpacingField snapshot={pinSnapshot} apply={apply} />
-              <TextAlignField snapshot={pinSnapshot} apply={apply} />
-            </Section>
-
-            <Separator />
-
-            <Section title="Color">
-              <ColorField
-                label="Text"
-                value={pinSnapshot.color}
-                onChange={(v) => apply([{ kind: 'set-style', key: 'color', value: v }])}
-                clearable={false}
-              />
-              <ColorField
-                label="Background"
-                value={pinSnapshot.backgroundColor ?? '#ffffff'}
-                dim={!pinSnapshot.backgroundColor}
-                onChange={(v) => apply([{ kind: 'set-style', key: 'backgroundColor', value: v }])}
-                onClear={() => apply([{ kind: 'set-style', key: 'backgroundColor', value: null }])}
-                clearable
-              />
-            </Section>
-
-            {pinSnapshot.imageSrc !== null && (
-              <>
-                <Separator />
-                <Section title="Image">
-                  <ImageField slideId={slideId} src={pinSnapshot.imageSrc} apply={apply} />
-                </Section>
-              </>
-            )}
-
-            <Separator />
-
-            <div className="mt-auto">
-              <CommentsSection
-                comments={comments}
-                selected={pinSelected}
-                onAdd={add}
-                onRemove={remove}
-              />
-            </div>
-          </div>
-        </ScrollArea>
-      </div>
-    </aside>
-  );
-}
+        </>
+      }
+      footer={<CommentsSection selected={pinSelected} onAdd={add} />}
+    >
+      {pinSnapshot.text !== null && (
+        <Section title="Content">
+          <ContentField snapshot={pinSnapshot} apply={apply} />
+        </Section>
+      )}
 
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <section className="px-4 py-4">
-      <div className="mb-3 text-[10px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
-        {title}
-      </div>
-      <div className="flex flex-col gap-3">{children}</div>
-    </section>
-  );
-}
+      <Separator />
+
+      <Section title="Typography">
+        <FontSizeField snapshot={pinSnapshot} apply={apply} />
+        <FontWeightField snapshot={pinSnapshot} apply={apply} />
+        <StyleToggles snapshot={pinSnapshot} apply={apply} />
+        <LineHeightField snapshot={pinSnapshot} apply={apply} />
+        <LetterSpacingField snapshot={pinSnapshot} apply={apply} />
+        <TextAlignField snapshot={pinSnapshot} apply={apply} />
+      </Section>
+
+      <Separator />
+
+      <Section title="Color">
+        <ColorField
+          label="Text"
+          value={pinSnapshot.color}
+          onChange={(v) => apply([{ kind: 'set-style', key: 'color', value: v }])}
+          clearable={false}
+        />
+        <ColorField
+          label="Background"
+          value={pinSnapshot.backgroundColor ?? '#ffffff'}
+          dim={!pinSnapshot.backgroundColor}
+          onChange={(v) => apply([{ kind: 'set-style', key: 'backgroundColor', value: v }])}
+          onClear={() => apply([{ kind: 'set-style', key: 'backgroundColor', value: null }])}
+          clearable
+        />
+      </Section>
 
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div className="grid grid-cols-[80px_1fr] items-center gap-3">
-      <Label className="text-[11px] font-normal text-muted-foreground">{label}</Label>
-      <div className="flex min-w-0 items-center gap-2">{children}</div>
-    </div>
+      {pinSnapshot.imageSrc !== null && (
+        <>
+          <Separator />
+          <Section title="Image">
+            <ImageField slideId={slideId} src={pinSnapshot.imageSrc} apply={apply} />
+          </Section>
+        </>
+      )}
+
+      {pinSnapshot.placeholder && (
+        <>
+          <Separator />
+          <Section title="Image placeholder">
+            <PlaceholderField
+              slideId={slideId}
+              hint={pinSnapshot.placeholder.hint}
+              line={pinSelected.line}
+              column={pinSelected.column}
+              applyEdit={applyEdit}
+            />
+          </Section>
+        </>
+      )}
+    </PanelShell>
   );
 }
 
@@ -604,40 +568,6 @@ function ColorField({
   );
 }
 
-function NumberField({
-  value,
-  onChange,
-  min,
-  max,
-  step = 1,
-  suffix,
-}: {
-  value: number;
-  onChange: (n: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  suffix?: string;
-}) {
-  return (
-    <div className="flex h-8 shrink-0 items-center rounded-md border bg-background pr-2 shadow-xs focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50">
-      <input
-        type="number"
-        value={value}
-        onChange={(e) => {
-          const n = Number(e.target.value);
-          if (Number.isFinite(n)) onChange(n);
-        }}
-        min={min}
-        max={max}
-        step={step}
-        className="h-full w-12 bg-transparent px-2 text-right text-[11px] tabular-nums outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-      />
-      {suffix && <span className="text-[10px] text-muted-foreground">{suffix}</span>}
-    </div>
-  );
-}
-
 function ImageField({
   slideId,
   src,
@@ -694,6 +624,61 @@ function ImageField({
   );
 }
 
+function PlaceholderField({
+  slideId,
+  hint,
+  line,
+  column,
+  applyEdit,
+}: {
+  slideId: string;
+  hint: string;
+  line: number;
+  column: number;
+  applyEdit: (line: number, column: number, ops: EditOp[]) => Promise<void>;
+}) {
+  const [open, setOpen] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  return (
+    <div className="space-y-2">
+      <p className="text-[11px] leading-relaxed text-muted-foreground">
+        Hint: <span className="font-medium text-foreground">{hint}</span>
+      </p>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="w-full"
+        disabled={submitting}
+        onClick={() => setOpen(true)}
+      >
+        <ImageIcon className="size-3.5" />
+        Replace…
+      </Button>
+      {open && (
+        <AssetPickerDialog
+          slideId={slideId}
+          onClose={() => setOpen(false)}
+          onPick={async (asset) => {
+            setOpen(false);
+            setSubmitting(true);
+            try {
+              await applyEdit(line, column, [
+                {
+                  kind: 'replace-placeholder-with-image',
+                  assetPath: `./assets/${asset.name}`,
+                },
+              ]);
+            } finally {
+              setSubmitting(false);
+            }
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
 function AssetPickerDialog({
   slideId,
   onClose,
@@ -757,15 +742,11 @@ function AssetPickerDialog({
 }
 
 function CommentsSection({
-  comments,
   selected,
   onAdd,
-  onRemove,
 }: {
-  comments: SlideComment[];
   selected: { line: number; column: number };
   onAdd: (line: number, column: number, text: string) => Promise<void>;
-  onRemove: (id: string) => Promise<void>;
 }) {
   const [draft, setDraft] = useState('');
   const [submitting, setSubmitting] = useState(false);
@@ -783,68 +764,29 @@ function CommentsSection({
   };
 
   return (
-    <Section title={comments.length ? `Comments · ${comments.length}` : 'Comments'}>
+    <Section title="Note for the agent">
       <div className="flex flex-col gap-2">
-        <Textarea
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-              e.preventDefault();
-              submit();
-            }
-          }}
-          placeholder="Describe a change for the agent…"
-          className="min-h-16 resize-none text-xs"
-        />
-        <div className="flex items-center justify-between">
-          <span className="text-[10px] text-muted-foreground">⌘/Ctrl + Enter</span>
-          <Button
-            size="sm"
-            disabled={submitting || !draft.trim()}
-            onClick={submit}
-            className="h-7 px-2.5 text-[11px]"
-          >
-            Add comment
+        <div className="comment-cue rounded-[6px]">
+          <Textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                submit();
+              }
+            }}
+            placeholder="Describe a change for the agent…"
+            className="min-h-16 resize-none text-[12px]"
+          />
+        </div>
+        <div className="flex items-center justify-between gap-2">
+          <span className="font-mono text-[10.5px] text-muted-foreground/70">⌘↵ to send</span>
+          <Button size="sm" variant="brand" disabled={submitting || !draft.trim()} onClick={submit}>
+            Add note
           </Button>
         </div>
       </div>
-
-      {comments.length === 0 ? (
-        <p className="text-[11px] text-muted-foreground">No comments yet.</p>
-      ) : (
-        <>
-          <ul className="flex flex-col gap-1">
-            {comments.map((c) => (
-              <li
-                key={c.id}
-                className="group flex items-start gap-2 rounded-md border bg-background px-2.5 py-2 transition-colors hover:bg-muted/40"
-              >
-                <div className="min-w-0 flex-1">
-                  <div className="font-mono text-[10px] text-muted-foreground">line {c.line}</div>
-                  <div className="mt-0.5 text-xs leading-relaxed break-words">{c.note}</div>
-                </div>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="size-6 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 hover:text-destructive"
-                  onClick={() => onRemove(c.id)}
-                  aria-label="Delete comment"
-                >
-                  <Trash2 className="size-3.5" />
-                </Button>
-              </li>
-            ))}
-          </ul>
-          <p className="text-[10px] text-muted-foreground">
-            Run{' '}
-            <code className="rounded bg-muted px-1 py-0.5 font-mono text-foreground">
-              /apply-comments
-            </code>{' '}
-            to apply.
-          </p>
-        </>
-      )}
     </Section>
   );
 }
@@ -856,6 +798,15 @@ function readSnapshot(el: HTMLElement): ElementSnapshot {
     el.tagName === 'IMG'
       ? (el as HTMLImageElement).currentSrc || (el as HTMLImageElement).src || null
       : null;
+  const ph = el.dataset.slidePlaceholder ?? null;
+  const placeholder =
+    ph !== null
+      ? {
+          hint: ph,
+          width: el.dataset.placeholderW ? Number(el.dataset.placeholderW) : undefined,
+          height: el.dataset.placeholderH ? Number(el.dataset.placeholderH) : undefined,
+        }
+      : null;
 
   return {
     fontSize: parseFloat(cs.fontSize) || 16,
@@ -868,6 +819,7 @@ function readSnapshot(el: HTMLElement): ElementSnapshot {
     letterSpacing: parseLetterSpacing(cs.letterSpacing),
     text,
     imageSrc,
+    placeholder,
   };
 }