@hienlh/ppm 0.23.14 → 0.23.16

package/src/web/components/design/comments/comments-send-preview.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Send } from "@/lib/icons";
 import { DesignResponsiveDialog } from "../dialogs/design-responsive-dialog";
@@ -5,8 +6,8 @@ import { DesignResponsiveDialog } from "../dialogs/design-responsive-dialog";
 /**
  * The whole message "Send to AI" is about to put in the design chat, shown before it goes
  * anywhere. Element context inside it came from the design's files, which an agent wrote,
- * so the user reads what the next agent will read. Confirming only fills the composer;
- * sending is still the user's own press.
+ * so the user reads what the next agent will read — and may edit it, since the words are
+ * theirs to send. Confirming only fills the composer; sending is still the user's own press.
  */
 
 export interface SendPreview {
@@ -19,24 +20,35 @@ export interface SendPreview {
 export function CommentsSendPreview({ preview, onCancel, onConfirm }: {
   preview: SendPreview | null;
   onCancel: () => void;
-  onConfirm: () => void;
+  /** Called with the text as the user left it. */
+  onConfirm: (text: string) => void;
 }) {
+  const [draft, setDraft] = useState("");
+  // A new preview replaces whatever was typed into the last one.
+  useEffect(() => { setDraft(preview?.text ?? ""); }, [preview]);
+  const edited = !!preview && draft !== preview.text;
+
   return (
     <DesignResponsiveDialog
       open={!!preview}
       onClose={onCancel}
       title="Put this in the design chat?"
-      description="This is the full message. It lands in the chat's composer as an attachment; nothing is sent until you send it there."
+      description="This is the full message, and you can edit it. It lands in the chat's composer as an attachment; nothing is sent until you send it there."
       className="md:max-w-2xl"
       footer={<>
+        {edited && <Button variant="ghost" onClick={() => setDraft(preview.text)}>Reset</Button>}
         <Button variant="outline" onClick={onCancel}>Cancel</Button>
-        <Button onClick={onConfirm}><Send className="size-4" /> Put in chat</Button>
+        <Button onClick={() => onConfirm(draft)} disabled={!draft.trim()}><Send className="size-4" /> Put in chat</Button>
       </>}
     >
       {preview && (
-        <pre className="whitespace-pre-wrap break-words rounded-md border border-border bg-surface-elevated p-3 font-mono text-xs leading-relaxed">
-          {preview.text}
-        </pre>
+        <textarea
+          aria-label="Message to put in the design chat"
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          spellCheck={false}
+          className="block h-[55vh] min-h-40 w-full resize-y rounded-md border border-border bg-surface-elevated p-3 font-mono text-xs leading-relaxed outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        />
       )}
     </DesignResponsiveDialog>
   );

package/src/web/components/design/comments/design-comments-layer.tsx

@@ -30,6 +30,7 @@ export function DesignCommentsOverlay({ feature, fit, stage, isMobile, selection
         stage={stage}
         actions={{
           onOpen: feature.openComment,
+          onReply: feature.replyToComment,
           onResolve: (c) => feature.resolveComment(c, true),
           onSend: feature.sendComment,
           onDelete: feature.deleteComment,
@@ -48,7 +49,6 @@ export function DesignCommentsOverlay({ feature, fit, stage, isMobile, selection
         target={feature.composerTarget}
         onClose={feature.closeComposer}
         onSubmit={feature.submitComposer}
-        onDelete={feature.deleteFromComposer}
       />
       <CommentsSendPreview preview={feature.preview} onCancel={feature.cancelPreview} onConfirm={feature.confirmPreview} />
     </>
@@ -60,8 +60,10 @@ export function DesignCommentsSidePanel({ feature }: { feature: DesignCommentsFe
     <CommentsPanel
       state={feature.state}
       statusOf={feature.pins.statusOf}
+      thread={feature.thread}
       actions={{
         onOpen: feature.openComment,
+        onReply: feature.replyToComment,
         onResolve: feature.resolveComment,
         onSend: feature.sendComment,
         onDelete: feature.deleteComment,

package/src/web/components/design/comments/use-comment-pins.ts

@@ -25,6 +25,9 @@ import type { CommentPatch } from "@/lib/design/api-design-comments";
 /** `elsewhere`: the comment is on another page of the design than the one on screen. */
 export type PinStatus = "pinned" | "moved" | "detached" | "pending" | "elsewhere";
 
+/** How a status reads beside a comment; pinned and pending say nothing. */
+export const PIN_STATUS_LABEL: Partial<Record<PinStatus, string>> = { detached: "Detached", moved: "Moved", elsewhere: "On another page" };
+
 export interface CommentPins {
   rects: ReadonlyMap<string, PinRect>;
   statusOf: (id: string) => PinStatus;

package/src/web/components/design/comments/use-design-comments-feature.ts

@@ -12,10 +12,12 @@ import { anchorFromPicked, useElementPicker } from "./use-element-picker";
 import { useCommentPins } from "./use-comment-pins";
 import type { ComposerTarget } from "./comment-composer";
 import type { SendPreview } from "./comments-send-preview";
+import type { ThreadActions } from "./comment-thread-view";
 
 /**
  * Pinned comments for one design tab: the list, the picker, the pins, and the flows that
- * join them — comment on an element, open a comment, and "Send to AI".
+ * join them — comment on an element, open a thread (in the panel, in place of the list),
+ * reply to it, and "Send to AI".
  *
  * Sending never sends. It builds the message, shows it whole in the preview, and only on
  * confirmation puts it in the design chat's composer, where the user sends it (or not).
@@ -23,9 +25,7 @@ import type { SendPreview } from "./comments-send-preview";
  * composer the user can actually see and focus.
  */
 
-type Composer =
-  | { mode: "create" | "send"; el: PickedElement }
-  | { mode: "edit"; comment: DesignComment };
+type Composer = { mode: "create" | "send"; el: PickedElement };
 
 /** Two frames: the pane switch has to be rendered before the composer can take focus. */
 const afterPaint = () => new Promise<void>((r) => requestAnimationFrame(() => requestAnimationFrame(() => r())));
@@ -38,6 +38,7 @@ export function useDesignCommentsFeature(tab: DesignTabContextValue, bridge: Des
   const [composer, setComposer] = useState<Composer | null>(null);
   const [preview, setPreview] = useState<SendPreview | null>(null);
   const [panelOpen, setPanelOpen] = useState(false);
+  const [thread, setThread] = useState<{ id: string; focusReply: boolean } | null>(null);
   const picker = useElementPicker(bridge, (el) => setComposer({ mode: "create", el }));
   const pins = useCommentPins(bridge, state.open, state.update);
   const onPanelOpen = useRef(opts.onPanelOpen);
@@ -45,16 +46,18 @@ export function useDesignCommentsFeature(tab: DesignTabContextValue, bridge: Des
 
   const togglePanel = useCallback(() => {
     if (!panelOpen) onPanelOpen.current();
+    else setThread(null);
     setPanelOpen(!panelOpen);
   }, [panelOpen]);
-  const closePanel = useCallback(() => setPanelOpen(false), []);
+  const closePanel = useCallback(() => { setPanelOpen(false); setThread(null); }, []);
+  const openThread = useCallback((c: Pick<DesignComment, "id">, focusReply = false) => {
+    setThread({ id: c.id, focusReply });
+    if (!panelOpen) onPanelOpen.current();
+    setPanelOpen(true);
+  }, [panelOpen]);
 
   const composerTarget = useMemo<ComposerTarget | null>(() => {
     if (!composer) return null;
-    if (composer.mode === "edit") {
-      const c = composer.comment;
-      return { mode: "edit", tag: c.anchor.tag, text: c.anchor.quote.exact, initialBody: c.body };
-    }
     return { mode: composer.mode, tag: composer.el.tag, text: composer.el.text, markup: composer.el.outerHtml };
   }, [composer]);
 
@@ -64,8 +67,6 @@ export function useDesignCommentsFeature(tab: DesignTabContextValue, bridge: Des
       await state.add(anchorFromPicked(composer.el), body);
       picker.clear();
       toast.success("Comment added");
-    } else if (composer.mode === "edit") {
-      await state.update(composer.comment.id, { body });
     } else {
       const anchor = anchorFromPicked(composer.el);
       // The snippet comes from the server, out of the source file, never from the page.
@@ -76,12 +77,6 @@ export function useDesignCommentsFeature(tab: DesignTabContextValue, bridge: Des
     setComposer(null);
   }, [composer, state, picker, projectName, slug]);
 
-  const deleteFromComposer = useCallback(async () => {
-    if (composer?.mode !== "edit") return;
-    await state.remove(composer.comment.id);
-    setComposer(null);
-  }, [composer, state]);
-
   const sendComments = useCallback((list: readonly DesignComment[]) => {
     if (list.length === 0) return;
     setPreview({
@@ -91,9 +86,9 @@ export function useDesignCommentsFeature(tab: DesignTabContextValue, bridge: Des
     });
   }, [slug]);
 
-  const confirmPreview = useCallback(async () => {
+  const confirmPreview = useCallback(async (text: string) => {
     const p = preview;
-    if (!p) return;
+    if (!p || !text.trim()) return;
     setPreview(null);
     if (isMobile) {
       // Sheets are portalled, so they would stay over the chat pane.
@@ -101,21 +96,41 @@ export function useDesignCommentsFeature(tab: DesignTabContextValue, bridge: Des
       showDesignChat(tabId);
       await afterPaint();
     }
-    deliverToDesignChat(tabId, p.text, p.label);
+    deliverToDesignChat(tabId, text, p.label);
     const results = await Promise.allSettled(p.ids.map((id) => state.update(id, { sent: true })));
     if (results.some((r) => r.status === "rejected")) toast.warning("The message is in the chat, but some comments could not be marked as sent");
   }, [preview, isMobile, tabId, state]);
 
+  const resolveComment = (c: Pick<DesignComment, "id">, resolved = true) => {
+    state.update(c.id, { resolved }).catch(failed("Could not update the comment"));
+  };
+  const deleteComment = (c: Pick<DesignComment, "id">) => {
+    state.remove(c.id).then(() => setThread((t) => (t?.id === c.id ? null : t))).catch(failed("Could not delete the comment"));
+  };
+  const threadActions = (id: string): ThreadActions => ({
+    onBack: () => setThread(null),
+    onEditBody: async (body) => { await state.update(id, { body }); },
+    onResolve: (resolved) => resolveComment({ id }, resolved),
+    onSend: () => { const c = state.comments?.find((x) => x.id === id); if (c) sendComments([c]); },
+    onDelete: () => deleteComment({ id }),
+    onDeleteLinkThreads: (linkId) => state.removeLinkThreads(linkId),
+    onReply: async (body) => { await state.reply(id, body); },
+    onEditReply: async (replyId, body) => { await state.editReply(id, replyId, body); },
+    onDeleteReply: (replyId) => state.removeReply(id, replyId),
+  });
+
   return {
     state, picker, pins, panelOpen, togglePanel, closePanel,
-    composerTarget, closeComposer: () => setComposer(null), submitComposer, deleteFromComposer,
-    preview, cancelPreview: () => setPreview(null), confirmPreview: () => { void confirmPreview().catch(failed("Could not put the message in the chat")); },
+    thread: thread ? { ...thread, actions: threadActions(thread.id) } : null,
+    composerTarget, closeComposer: () => setComposer(null), submitComposer,
+    preview, cancelPreview: () => setPreview(null), confirmPreview: (text: string) => { void confirmPreview(text).catch(failed("Could not put the message in the chat")); },
     openCount: state.open.length,
     commentOnSelected: () => { if (picker.selected) setComposer({ mode: "create", el: picker.selected }); },
     sendSelected: () => { if (picker.selected) setComposer({ mode: "send", el: picker.selected }); },
-    openComment: (c: DesignComment) => setComposer({ mode: "edit", comment: c }),
-    resolveComment: (c: DesignComment, resolved = true) => { state.update(c.id, { resolved }).catch(failed("Could not update the comment")); },
-    deleteComment: (c: DesignComment) => { state.remove(c.id).catch(failed("Could not delete the comment")); },
+    openComment: (c: Pick<DesignComment, "id">) => openThread(c),
+    replyToComment: (c: Pick<DesignComment, "id">) => openThread(c, true),
+    resolveComment,
+    deleteComment,
     sendComment: (c: DesignComment) => sendComments([c]),
     sendAllOpen: () => sendComments(state.open),
   };

package/src/web/components/design/comments/use-design-comments.ts

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
-  createDesignComment, deleteDesignComment, listDesignComments, updateDesignComment, type CommentPatch,
+  addDesignCommentReply, createDesignComment, deleteDesignComment, deleteDesignCommentReply, deleteShareLinkThreads,
+  listDesignComments, updateDesignComment, updateDesignCommentReply, type CommentPatch,
 } from "@/lib/design/api-design-comments";
-import { isOpenComment, type CommentAnchor, type DesignComment } from "../../../../shared/design-comment-types";
+import { isOpenComment, type CommentAnchor } from "../../../../shared/design-comment-types";
+import type { DesignCommentOwnerView } from "../../../../shared/design-comment-thread-types";
 
 /**
  * One design's comments, kept in step with the server.
@@ -10,27 +12,35 @@ import { isOpenComment, type CommentAnchor, type DesignComment } from "../../../
  * `.design/` is not watched, so the list refreshes on `design:comments_changed` — which also
  * covers another device commenting on the same design. Every change this client makes is
  * applied locally at once from the server's answer; the event that follows only confirms it.
- * Refetches are debounced, because marking N comments sent is N events.
+ * Refetches are debounced, because marking N comments sent is N events. A deleted reply or a
+ * link's threads come back with no body to apply, so those are dropped locally the same way.
  */
 
 export const COMMENTS_CHANGED_EVENT = "design:comments_changed";
 
+type Thread = DesignCommentOwnerView;
+
 export interface DesignCommentsState {
-  comments: DesignComment[] | null;
+  comments: Thread[] | null;
   /** Open comments in the order they were made; a pin's number is its index here plus one. */
-  open: DesignComment[];
-  resolved: DesignComment[];
+  open: Thread[];
+  resolved: Thread[];
   error: string | null;
   reload: () => void;
-  add: (anchor: CommentAnchor, body: string) => Promise<DesignComment>;
-  update: (id: string, patch: CommentPatch) => Promise<DesignComment>;
+  add: (anchor: CommentAnchor, body: string) => Promise<Thread>;
+  update: (id: string, patch: CommentPatch) => Promise<Thread>;
   remove: (id: string) => Promise<void>;
+  reply: (id: string, body: string) => Promise<Thread>;
+  editReply: (id: string, replyId: string, body: string) => Promise<Thread>;
+  removeReply: (id: string, replyId: string) => Promise<void>;
+  /** Every thread reviewers on one share link started. */
+  removeLinkThreads: (linkId: string) => Promise<void>;
 }
 
-const byCreated = (a: DesignComment, b: DesignComment) => (a.createdAt < b.createdAt ? -1 : a.createdAt > b.createdAt ? 1 : 0);
+const byCreated = (a: Thread, b: Thread) => (a.createdAt < b.createdAt ? -1 : a.createdAt > b.createdAt ? 1 : 0);
 
 export function useDesignComments(projectName: string, slug: string): DesignCommentsState {
-  const [comments, setComments] = useState<DesignComment[] | null>(null);
+  const [comments, setComments] = useState<Thread[] | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const reload = useCallback(() => {
@@ -56,7 +66,7 @@ export function useDesignComments(projectName: string, slug: string): DesignComm
     };
   }, [projectName, slug, reload]);
 
-  const replace = useCallback((next: DesignComment) => {
+  const replace = useCallback((next: Thread) => {
     setComments((list) => {
       const rest = (list ?? []).filter((c) => c.id !== next.id);
       return [...rest, next].sort(byCreated);
@@ -80,10 +90,32 @@ export function useDesignComments(projectName: string, slug: string): DesignComm
     setComments((list) => (list ?? []).filter((c) => c.id !== id));
   }, [projectName, slug]);
 
+  const reply = useCallback(async (id: string, body: string) => {
+    const thread = await addDesignCommentReply(projectName, slug, id, body);
+    replace(thread);
+    return thread;
+  }, [projectName, slug, replace]);
+
+  const editReply = useCallback(async (id: string, replyId: string, body: string) => {
+    const thread = await updateDesignCommentReply(projectName, slug, id, replyId, body);
+    replace(thread);
+    return thread;
+  }, [projectName, slug, replace]);
+
+  const removeReply = useCallback(async (id: string, replyId: string) => {
+    await deleteDesignCommentReply(projectName, slug, id, replyId);
+    setComments((list) => (list ?? []).map((c) => (c.id === id ? { ...c, replies: c.replies.filter((r) => r.id !== replyId) } : c)));
+  }, [projectName, slug]);
+
+  const removeLinkThreads = useCallback(async (linkId: string) => {
+    await deleteShareLinkThreads(projectName, slug, linkId);
+    setComments((list) => (list ?? []).filter((c) => !(c.author.kind === "guest" && c.author.linkId === linkId)));
+  }, [projectName, slug]);
+
   const { open, resolved } = useMemo(() => {
     const sorted = [...(comments ?? [])].sort(byCreated);
     return { open: sorted.filter(isOpenComment), resolved: sorted.filter((c) => !isOpenComment(c)) };
   }, [comments]);
 
-  return { comments, open, resolved, error, reload, add, update, remove };
+  return { comments, open, resolved, error, reload, add, update, remove, reply, editReply, removeReply, removeLinkThreads };
 }

package/src/web/components/design/design-toolbar.tsx

@@ -1,7 +1,7 @@
 import type { ElementType, ReactNode } from "react";
 import {
   Columns2, Download, History, Maximize2, MessageSquare, MessageSquarePlus, Monitor, MoreHorizontal, MousePointerClick, Move,
-  Presentation, RefreshCw, Send, SlidersHorizontal, Smartphone, Sparkles, Tablet, Undo2,
+  Presentation, RefreshCw, Send, Share2, SlidersHorizontal, Smartphone, Sparkles, Tablet, Undo2,
 } from "@/lib/icons";
 import { toast } from "sonner";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
@@ -20,6 +20,7 @@ import { DesignLayoutMenu, DesignPaneSwitch } from "./design-layout-controls";
 import type { DesignVariantsFeature } from "./variants/use-design-variants";
 import { DesignVariantMenu } from "./variants/design-variant-controls";
 import { ToolbarBadge } from "./design-toolbar-badge";
+import type { DesignShareFeature } from "./share/design-share-dialog";
 
 /**
  * The canvas toolbar and its registry.
@@ -43,6 +44,7 @@ export interface DesignToolbarContext extends DesignTabContextValue {
   undo: DesignUndoFeature;
   exports: DesignExportFeature;
   variants: DesignVariantsFeature;
+  share: DesignShareFeature;
 }
 
 export interface DesignToolbarItem {
@@ -89,6 +91,11 @@ export const DESIGN_TOOLBAR_ITEMS: DesignToolbarItem[] = [
     badge: (ctx) => ctx.comments.openCount || null,
     run: (ctx) => ctx.comments.togglePanel(),
   },
+  {
+    // Opens the Share dialog; with PPM sign-in off it explains why nothing can be shared.
+    id: "share", label: "Share for review", icon: Share2, placement: "bar",
+    isActive: (ctx) => ctx.share.open, run: (ctx) => ctx.share.setOpen(true),
+  },
   {
     // Offered whenever design.json parses; with no tweaks declared the panel asks the AI for some.
     id: "tweaks", label: "Tweaks", icon: SlidersHorizontal, placement: "bar",
@@ -187,7 +194,9 @@ export function DesignToolbar({ ctx }: { ctx: DesignToolbarContext }) {
           disabled={item.isDisabled?.(ctx)} onClick={() => item.run(ctx)}
           className={cn(iconBtn, "relative", item.isActive?.(ctx) && "bg-surface-elevated text-foreground")}>
           <item.icon className="size-4" />
-          <ToolbarBadge count={item.badge?.(ctx)} className="absolute -right-1 -top-1" />
+          {/* Inside the button's top edge: the toolbar is only 2px taller than its buttons and a
+              window or split clips anything above it, so a badge raised past the edge is cut off. */}
+          <ToolbarBadge count={item.badge?.(ctx)} className="absolute -right-1.5 top-0" />
         </button>
       ))}
       {more.length > 0 && (

package/src/web/components/design/share/design-share-dialog.tsx

@@ -0,0 +1,81 @@
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Loader2 } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { shareBlockedReason } from "@/lib/design/design-share-address-state";
+import { SHARE_LIMITS } from "../../../../shared/design-share-types";
+import { DesignResponsiveDialog } from "../dialogs/design-responsive-dialog";
+import { useDesignTab } from "../design-tab-context";
+import { ShareAddressBlock } from "./share-address-block";
+import { NewShareLinkFields, useNewShareLinkForm } from "./new-share-link-form";
+import { SharedLinksList } from "./shared-links-list";
+import { useShareAddress } from "./use-share-address";
+import { useShareLinks } from "./use-share-links";
+
+/**
+ * Share for review: where links open, a new link (label, expiry, version), and the design's
+ * existing links with their actions. A dialog on desktop, a bottom sheet on a phone, with
+ * Create in the footer. While PPM sign-in is off nothing can be created and existing links
+ * read as paused, because the server opens none of them.
+ */
+
+export interface DesignShareFeature {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export function useDesignShare(): DesignShareFeature {
+  const [open, setOpen] = useState(false);
+  return useMemo(() => ({ open, setOpen }), [open]);
+}
+
+export function DesignShareDialog({ feature }: { feature: DesignShareFeature }) {
+  const { projectName, slug } = useDesignTab();
+  const address = useShareAddress(feature.open);
+  const links = useShareLinks(projectName, slug, feature.open);
+  const form = useNewShareLinkForm(links);
+  const blocked = shareBlockedReason(address.address, links.links?.length ?? 0, SHARE_LIMITS.maxLinksPerDesign);
+  const signinOff = address.view.kind === "signin-off";
+
+  const create = async () => {
+    if (blocked) return;
+    const link = await form.submit();
+    if (!link) return;
+    // No Copy action on the toast: a modal dialog blocks clicks outside itself, so the row's
+    // own Copy button is the one that works. On a phone the list sits below the form.
+    toast.success("Link created");
+    requestAnimationFrame(() => {
+      document.querySelector(`[data-link-id="${CSS.escape(link.id)}"]`)?.scrollIntoView({ block: "nearest" });
+    });
+  };
+
+  return (
+    <DesignResponsiveDialog
+      open={feature.open}
+      onClose={() => feature.setOpen(false)}
+      title="Share for review"
+      description="Reviewers open a saved version of this design and pin comments on it. They never see the live copy."
+      className="sm:max-w-lg"
+      footer={<>
+        <Button variant="outline" onClick={() => feature.setOpen(false)}>Close</Button>
+        <Button onClick={() => void create()} disabled={!!blocked || form.creating} data-testid="share-create"
+          title={blocked ?? undefined}>
+          {form.creating && <Loader2 className="size-4 animate-spin" />}
+          {signinOff ? blocked : "Create link"}
+        </Button>
+      </>}
+    >
+      <div className="flex flex-col gap-4" data-testid="share-dialog">
+        <ShareAddressBlock view={address.view} onStart={() => void address.startTemporary()} onRetryLoad={() => void address.refresh()} />
+        {!signinOff && (
+          <section className="flex flex-col gap-2">
+            <h3 className="text-xs font-semibold uppercase tracking-wide text-text-subtle">New link</h3>
+            <NewShareLinkFields form={form} projectName={projectName} slug={slug} />
+            {blocked && !form.error && address.address && <p className="text-xs text-text-subtle">{blocked}</p>}
+          </section>
+        )}
+        <SharedLinksList links={links} address={address.address} />
+      </div>
+    </DesignResponsiveDialog>
+  );
+}

package/src/web/components/design/share/new-share-link-form.tsx

@@ -0,0 +1,85 @@
+import { useCallback, useState } from "react";
+import {
+  DEFAULT_SHARE_EXPIRY, expiryFromChoice, toDateInputValue, type ShareExpiryChoice,
+} from "@/lib/design/design-share-expiry";
+import { SHARE_LIMITS, type DesignShareLink } from "../../../../shared/design-share-types";
+import { ShareExpiryPicker } from "./share-expiry-picker";
+import { CURRENT_VERSION, ShareVersionPicker } from "./share-version-picker";
+import type { ShareLinksFeature } from "./use-share-links";
+
+/**
+ * The New link part of the Share dialog: label, expiry and version. The Create button lives
+ * in the dialog's footer (the thumb zone on a phone), so the form's state is a hook the
+ * dialog holds and hands to both.
+ */
+
+export interface NewShareLinkForm {
+  label: string;
+  setLabel: (label: string) => void;
+  expiry: ShareExpiryChoice;
+  setExpiry: (choice: ShareExpiryChoice) => void;
+  version: string;
+  setVersion: (version: string) => void;
+  error: string | null;
+  creating: boolean;
+  submit: () => Promise<DesignShareLink | null>;
+}
+
+const message = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+export function useNewShareLinkForm(links: ShareLinksFeature): NewShareLinkForm {
+  const [label, setLabel] = useState("");
+  const [expiry, setExpiry] = useState<ShareExpiryChoice>(() => ({
+    preset: DEFAULT_SHARE_EXPIRY, customDate: toDateInputValue(Date.now() + 14 * 24 * 60 * 60 * 1000),
+  }));
+  const [version, setVersion] = useState(CURRENT_VERSION);
+  const [error, setError] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+
+  const submit = useCallback(async () => {
+    const expiresAt = expiryFromChoice(expiry, Date.now());
+    if (!expiresAt.ok) { setError(expiresAt.error); return null; }
+    setCreating(true);
+    setError(null);
+    try {
+      const link = await links.create({ label: label.trim() || undefined, expiresAt: expiresAt.expiresAt, version });
+      setLabel("");
+      setVersion(CURRENT_VERSION);
+      return link;
+    } catch (e) {
+      setError(message(e) || "Could not create the link");
+      return null;
+    } finally {
+      setCreating(false);
+    }
+  }, [expiry, label, version, links]);
+
+  const setExpiryAndClear = useCallback((choice: ShareExpiryChoice) => { setExpiry(choice); setError(null); }, []);
+  return { label, setLabel, expiry, setExpiry: setExpiryAndClear, version, setVersion, error, creating, submit };
+}
+
+const field = "flex flex-col gap-1.5";
+const caption = "text-xs font-medium text-text-subtle";
+
+export function NewShareLinkFields({ form, projectName, slug }: { form: NewShareLinkForm; projectName: string; slug: string }) {
+  return (
+    <form className="flex flex-col gap-3" onSubmit={(e) => { e.preventDefault(); void form.submit(); }} data-testid="share-new-link">
+      <div className={field}>
+        <label htmlFor="share-new-label" className={caption}>Label (optional)</label>
+        <input id="share-new-label" value={form.label} maxLength={SHARE_LIMITS.maxLabelChars}
+          placeholder="For example: Client review" onChange={(e) => form.setLabel(e.target.value)}
+          className="min-h-11 w-full rounded-md border border-border bg-background px-3 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary md:min-h-9" />
+      </div>
+      <div className={field}>
+        <span className={caption}>Expires after</span>
+        <ShareExpiryPicker idPrefix="share-new" value={form.expiry} onChange={form.setExpiry} />
+      </div>
+      <div className={field}>
+        <label htmlFor="share-new-version" className={caption}>Version reviewers see</label>
+        <ShareVersionPicker id="share-new-version" projectName={projectName} slug={slug}
+          value={form.version} onChange={form.setVersion} />
+      </div>
+      {form.error && <p className="text-xs text-destructive" role="alert" data-testid="share-new-error">{form.error}</p>}
+    </form>
+  );
+}

package/src/web/components/design/share/share-address-block.tsx

@@ -0,0 +1,101 @@
+import type { ReactNode } from "react";
+import { Globe, Loader2, Lock, TriangleAlert } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { openSettings } from "@/components/settings/open-settings";
+import { openRemoteAccess } from "@/components/settings/remote-access/remote-access-tab-store";
+import { QUICK_ADDRESS_WARNING, SIGNIN_OFF_REASON, type ShareAddressView } from "@/lib/design/design-share-address-state";
+
+/**
+ * Where share links open: the stable address, the temporary one with its warning, or no
+ * public address with the two ways to get one. With PPM sign-in off it says only that
+ * sharing waits for sign-in, because a link would otherwise open all of PPM.
+ */
+
+const btn = "min-h-11 cursor-pointer md:min-h-9";
+
+function Box({ tone = "plain", icon, children, testId }: {
+  tone?: "plain" | "warn"; icon: ReactNode; children: ReactNode; testId: string;
+}) {
+  return (
+    <div data-testid={testId}
+      className={cn("flex gap-3 rounded-lg border p-3 text-sm leading-relaxed",
+        tone === "warn" ? "border-warning/40 bg-warning/10" : "border-border bg-surface-elevated/40")}>
+      <span className="mt-0.5 shrink-0 text-text-subtle">{icon}</span>
+      <div className="flex min-w-0 flex-1 flex-col gap-2">{children}</div>
+    </div>
+  );
+}
+
+const SetUpPermanent = () => (
+  <Button variant="outline" className={btn} onClick={() => openRemoteAccess("public-link")}>Set up a permanent address</Button>
+);
+
+export function ShareAddressBlock({ view, onStart, onRetryLoad }: {
+  view: ShareAddressView;
+  onStart: () => void;
+  onRetryLoad: () => void;
+}) {
+  switch (view.kind) {
+    case "loading":
+      return <Box testId="share-address-loading" icon={<Loader2 className="size-4 animate-spin" />}>Reading the public address…</Box>;
+    case "error":
+      return (
+        <Box testId="share-address-error" tone="warn" icon={<TriangleAlert className="size-4" />}>
+          <p>Could not read the public address: {view.message}</p>
+          <div><Button variant="outline" className={btn} onClick={onRetryLoad}>Try again</Button></div>
+        </Box>
+      );
+    case "signin-off":
+      return (
+        <Box testId="share-address-signin-off" tone="warn" icon={<Lock className="size-4" />}>
+          <p className="font-medium">{SIGNIN_OFF_REASON}</p>
+          <p className="text-text-2">
+            A share link reaches PPM itself, so with sign-in off anyone holding one could open all of PPM.
+            Existing links are paused until sign-in is back on.
+          </p>
+          <div><Button variant="outline" className={btn} onClick={() => openSettings("general")}>Open General</Button></div>
+        </Box>
+      );
+    case "named":
+    case "quick":
+      return (
+        <Box testId={`share-address-${view.kind}`} tone={view.kind === "quick" || view.warning ? "warn" : "plain"}
+          icon={view.kind === "quick" ? <TriangleAlert className="size-4" /> : <Globe className="size-4" />}>
+          <p>Links open at <span className="break-all font-medium text-foreground">{view.url}</span></p>
+          {view.warning && <p className="text-text-2">{view.warning}</p>}
+          {view.kind === "quick" && <>
+            <p className="text-text-2">{QUICK_ADDRESS_WARNING}</p>
+            <div><SetUpPermanent /></div>
+          </>}
+        </Box>
+      );
+    case "starting":
+      return (
+        <Box testId="share-address-starting" icon={<Loader2 className="size-4 animate-spin" />}>
+          Starting a temporary public address… This usually takes a few seconds.
+        </Box>
+      );
+    case "failed":
+    case "none": {
+      const failed = view.kind === "failed";
+      const darkTunnel = view.kind === "none" && view.enabled;
+      return (
+        <Box testId={failed ? "share-address-failed" : "share-address-none"} tone={failed || darkTunnel ? "warn" : "plain"}
+          icon={<TriangleAlert className="size-4" />}>
+          {failed ? <p>{view.message}</p> : <>
+            <p>{darkTunnel ? "The public address is switched on but not connected right now." : "There is no public address yet."}</p>
+            {view.warning && <p className="text-text-2">{view.warning}</p>}
+            <p className="text-text-2">Until there is one, links open only where this PPM is reachable from.</p>
+          </>}
+          <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
+            <Button className={btn} onClick={onStart}>
+              {failed ? "Try again" : darkTunnel ? "Reconnect the public address" : "Start a temporary public address"}
+            </Button>
+            <SetUpPermanent />
+          </div>
+        </Box>
+      );
+    }
+  }
+}