makersclaw 0.1.0 → 0.3.0

package/registry/blocks/share-dialog/README.md

@@ -0,0 +1,113 @@
+# ShareDialog
+
+Who can see a record, and how to let more people in. An invite field
+that takes several emails at once (with an access level), the people who
+already have access (each with a menu: can view, can edit, remove),
+sharing switches ("Allow comments"), and a link with a copy button that
+turns to a check. Each section shows when you give its data or callback.
+`ShareDialog` puts it in the kit's `Sheet` (a dialog; a bottom sheet on a
+phone); `SharePanel` is the same body inline, for a settings page.
+
+Every change goes out through an async callback that returns `{ ok: true }`
+or `{ ok: false, error }`. A role change or a switch shows at once and goes
+back when the save fails, with the reason on screen.
+
+```jsx
+import { ShareDialog, SharePanel } from "../components/blocks/share-dialog";   // a Makersclaw app ("./blocks/share-dialog" from components/)
+import { ShareDialog, SharePanel } from "@/components/makersclaw/blocks/share-dialog";   // a shadcn project
+```
+
+A client component: render it from a `"use client"` component.
+
+## The data
+
+`people` is who has access now: `[{ id?, name?, email, src?, role, roleLabel?, locked?, pending? }]`.
+
+- `role` is one of `roles`' values. A role outside them (an owner) shows
+  as a badge, with `roleLabel` as its words.
+- `locked: true` — no menu for this person (the owner, yourself).
+- `pending: true` — invited, not joined yet: "Invite sent" or an
+  "Invited" badge.
+- `src` — a photo; the kit's `Avatar` shows initials without one.
+
+## Props
+
+Both components take these. Everything is optional; a section shows only
+when its data or callback is there.
+
+- `people` — the list above. `[]` shows `empty`; leave it out to hide the
+  section.
+- `roles` — the access levels, in order: `[{ value, label }]`. Default
+  `[{ value: "view", label: "Can view" }, { value: "edit", label: "Can edit" }]`.
+- `onInvite(emails, role)` — shows the invite field. Async, `{ ok, error }`.
+  The field splits on commas, spaces and semicolons, drops duplicates and
+  people who already have access, and refuses anything that is not an
+  email before it calls you. Add the invited people to `people` yourself
+  (with `pending: true`). With two or more `roles`, a picker beside the
+  field chooses the role.
+- `inviteRole` — every invite gets this role, and no picker shows.
+- `onRoleChange(person, role)` — each person's access becomes a menu.
+  Async, `{ ok, error }`. Update `people` on success.
+- `onRemove(person)` — "Remove access" in that menu. Async. Take the
+  person out of `people` on success.
+- `link` — a URL to share: a read-only field with a copy button, then a
+  "Copy link" button. Copying uses the browser's clipboard. A blocked
+  clipboard shows a message.
+- `onCopy(link)` — called after a copy (analytics, "link created"). Async
+  and optional; a failure shows.
+- `previewHref` or `onPreview` — a "Preview" button beside "Copy link".
+- `settings` — switches: `[{ id, label, description?, icon?, checked, disabled? }]`.
+- `onSettingChange(id, next)` — async, `{ ok, error }`. The switch goes
+  back when it fails.
+- `youId` — the `id` (or email) of the person looking: "(you)" after their name.
+- `inviteLabel` · `invitePlaceholder` · `peopleLabel` · `linkLabel` ·
+  `empty` — the words. Defaults: "Invite by email", "Emails, separated by
+  commas", "People with access", "Share link", "Only you have access so far."
+- `className` — on the panel.
+
+`ShareDialog` also takes:
+
+- `open` · `onClose()` — controlled. Esc, a press outside and the ✕ close it.
+- `title` — default "Share". `description` — a line under it.
+- `footer` — buttons under the body (a "Done").
+
+## Example
+
+```jsx
+"use client";
+import { useState } from "react";
+import { Button } from "../components/ui";
+import { ShareDialog } from "../components/blocks/share-dialog";
+
+export function ShareProject({ project, members, invite, setRole, remove }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button icon="share" onClick={() => setOpen(true)}>Share</Button>
+      <ShareDialog
+        open={open}
+        onClose={() => setOpen(false)}
+        title={`Share “${project.name}”`}
+        people={members}
+        onInvite={(emails, role) => invite(project.id, emails, role)}   // server actions returning { ok, error }
+        onRoleChange={(person, role) => setRole(project.id, person.id, role)}
+        onRemove={(person) => remove(project.id, person.id)}
+        link={`https://app.example.com/p/${project.id}`}
+      />
+    </>
+  );
+}
+```
+
+## What it will not do
+
+- Send the invite email or create the access row: `onInvite` does.
+- Search your directory as you type. The field takes addresses; for a
+  people picker, use the kit's `Combobox`.
+- Make the link public or private by itself. Put that switch in `settings`
+  and change `link` from your callback.
+- Show a person's access per page or field. It has one role per person.
+
+## Credits
+
+Ported from blocks.so (https://blocks.so, dialogs 08 and 09, MIT) and Creative Tim UI (https://github.com/creativetimofficial/ui, modals-03, MIT), rewritten on the Makersclaw kit.

package/registry/blocks/share-dialog/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "share-dialog",
+  "title": "ShareDialog",
+  "description": "Who can see a record and how to let more people in: invite by email (comma separated, with an access level), each person with their access in a menu (can view, can edit, remove), sharing switches, and a link with a copy button that turns to a check. A dialog, or the same body inline (SharePanel). Every change is an async callback; a failure shows and the old value comes back.",
+  "useWhen": "A record, project, document or workspace can be shared: an \"Invite\" or \"Share\" button, a members list with roles, a public link to copy.",
+  "tags": ["share", "invite", "members", "collaborators", "access", "permissions", "roles", "team", "link", "copy link", "dialog", "modal"],
+  "exports": ["ShareDialog", "SharePanel"],
+  "files": ["index.js", "share-dialog.jsx"],
+  "requires": []
+}

package/registry/blocks/share-dialog/demo.jsx

@@ -0,0 +1,140 @@
+"use client";
+
+// ShareDialog, every variant — the gallery's and the smoke test's
+// surface. Not installed into apps: `makersclaw add share-dialog` lays
+// index.js and share-dialog.jsx only. People live in memory; turn on
+// "Fail the next save" to watch a change go back with its reason.
+import { useState } from "react";
+import { Button, Card, Field, Select, Switch } from "../components/ui";
+import { ShareDialog, SharePanel } from "../components/blocks/share-dialog";
+
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const TEAM = [
+  { id: "u1", name: "Amara Okafor", email: "amara@harbourline.co", role: "owner", roleLabel: "Owner", locked: true },
+  { id: "u2", name: "Jonas Lindqvist", email: "jonas@harbourline.co", role: "edit" },
+  { id: "u3", name: "Priya Raman", email: "priya@harbourline.co", role: "view" },
+  { id: "u4", name: "Mateo Alvarez", email: "mateo@fieldnotes.studio", role: "view" },
+];
+
+const MEMBERS = [
+  { id: "m1", name: "Amara Okafor", email: "amara@harbourline.co", role: "member" },
+  { id: "m2", name: "Jonas Lindqvist", email: "jonas@harbourline.co", role: "member" },
+  { id: "m3", name: "Priya Raman", email: "priya@harbourline.co", role: "admin" },
+  { id: "m4", name: "Wen Zhao", email: "wen@harbourline.co", role: "member" },
+];
+
+const WORKSPACE_ROLES = [
+  { value: "member", label: "Member" },
+  { value: "admin", label: "Admin" },
+];
+
+const VARIANTS = [
+  { key: "invite", label: "Invite members — roles as badges" },
+  { key: "link", label: "Share & collaborate — link and switch" },
+  { key: "full", label: "Share with new members — access menus" },
+  { key: "empty", label: "Nobody else yet — inline panel" },
+];
+
+export default function ShareDialogDemo() {
+  const [key, setKey] = useState("full");
+  const [open, setOpen] = useState(false);
+  const [fail, setFail] = useState(false);
+  const [team, setTeam] = useState(TEAM);
+  const [members, setMembers] = useState(MEMBERS);
+  const [solo, setSolo] = useState([]);
+  const [comments, setComments] = useState(true);
+  const [log, setLog] = useState(null);
+
+  // One fake server: waits, then fails once when asked to.
+  async function save(what, apply) {
+    await wait(600);
+    if (fail) {
+      setFail(false);
+      return { ok: false, error: "The server did not answer. Try again." };
+    }
+    apply?.();
+    setLog(what);
+    return { ok: true };
+  }
+
+  const invite = (list, setList) => (emails, role) =>
+    save(`invited ${emails.join(", ")} as ${role}`, () =>
+      setList((xs) => [...xs, ...emails.map((email) => ({ id: email, email, role, pending: true }))]),
+    );
+
+  const variantProps = {
+    invite: {
+      title: "Invite members",
+      description: "Add people to the Harbourline workspace. Check your company's policy before inviting anyone outside it.",
+      people: members,
+      roles: WORKSPACE_ROLES,
+      inviteRole: "member",
+      onInvite: invite(members, setMembers),
+      invitePlaceholder: "name@company.com",
+      inviteLabel: "Email",
+      peopleLabel: "People with existing access",
+    },
+    link: {
+      title: "Share & collaborate",
+      description: "Anyone with the link can open the Q4 launch plan.",
+      link: "https://harbourline.app/p/q4-launch-plan?share=8fk2",
+      previewHref: "#preview",
+      onCopy: (l) => save(`copied ${l}`),
+      settings: [{ id: "comments", label: "Allow comments and suggestions", icon: "message-circle", checked: comments }],
+      onSettingChange: (id, next) => save(`${id} → ${next ? "on" : "off"}`, () => setComments(next)),
+    },
+    full: {
+      title: "Share with new members",
+      description: "Give teammates and outside collaborators access to the Q4 launch plan.",
+      people: team,
+      youId: "u1",
+      onInvite: invite(team, setTeam),
+      onRoleChange: (p, role) => save(`${p.email} → ${role}`, () => setTeam((xs) => xs.map((x) => (x.id === p.id ? { ...x, role } : x)))),
+      onRemove: (p) => save(`removed ${p.email}`, () => setTeam((xs) => xs.filter((x) => x.id !== p.id))),
+      link: "https://harbourline.app/p/q4-launch-plan",
+      onCopy: (l) => save(`copied ${l}`),
+    },
+    empty: {
+      people: solo,
+      onInvite: invite(solo, setSolo),
+      onRoleChange: (p, role) => save(`${p.email} → ${role}`, () => setSolo((xs) => xs.map((x) => (x.id === p.id ? { ...x, role } : x)))),
+      onRemove: (p) => save(`removed ${p.email}`, () => setSolo((xs) => xs.filter((x) => x.id !== p.id))),
+    },
+  };
+  const props = variantProps[key];
+
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-end gap-x-6 gap-y-2">
+        <Field id="share-variant" label="Variant" className="w-full sm:w-80">
+          <Select id="share-variant" value={key} onChange={(e) => setKey(e.target.value)} options={VARIANTS.map((v) => ({ value: v.key, label: v.label }))} />
+        </Field>
+        <Switch id="share-fail" label="Fail the next save" checked={fail} onChange={(e) => setFail(e.target.checked)} />
+      </div>
+
+      {key === "empty" ? (
+        <Card title="Sharing" description="Nobody else can see the Q4 launch plan yet." className="max-w-xl">
+          <SharePanel key={key} {...props} />
+        </Card>
+      ) : (
+        <>
+          <div>
+            <Button variant="primary" icon={key === "invite" ? "user-plus" : "share"} onClick={() => setOpen(true)}>
+              {key === "invite" ? "Invite members" : "Share"}
+            </Button>
+          </div>
+          <ShareDialog key={key} open={open} onClose={() => setOpen(false)} {...props} />
+          {/* The same body inline, so the page shows it without opening the dialog. */}
+          <Card title={props.title} description={props.description} className="max-w-lg">
+            <SharePanel {...props} />
+          </Card>
+        </>
+      )}
+
+      <p className="min-h-5 break-all text-xs text-muted-foreground" aria-live="polite">
+        {log ? `Saved — ${log}` : "Invite, change access or copy the link to see what the callbacks receive."}
+      </p>
+    </div>
+  );
+}

package/registry/blocks/share-dialog/index.js

@@ -0,0 +1,3 @@
+// The ShareDialog block — `makersclaw add share-dialog`. Fixed: compose
+// it through its props (README.md beside this file).
+export { ShareDialog, SharePanel } from "./share-dialog";

package/registry/blocks/share-dialog/share-dialog.jsx

@@ -0,0 +1,384 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { Avatar, Badge, Button, Icon, InputGroup, Item, Menu, Notice, Select, Sheet, Switch, cx } from "../../ui";
+
+// ShareDialog — who can see a thing, and how to let more people in:
+// invite by email, each person's access, a link to copy, a few sharing
+// switches. SharePanel is the same body without the dialog, for a
+// settings page. Every change goes out through an async callback that
+// returns { ok } or { ok: false, error }; the dialog shows the failure
+// and puts the old value back. See README.md beside this file.
+
+const DEFAULT_ROLES = [
+  { value: "view", label: "Can view" },
+  { value: "edit", label: "Can edit" },
+];
+
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function failure(result) {
+  return result && result.ok === false ? result.error || "That did not save. Try again." : null;
+}
+
+async function attempt(fn) {
+  try {
+    return failure(await fn());
+  } catch (e) {
+    return e?.message || String(e);
+  }
+}
+
+/** "a@x.com, b@y.com; c@z.com" → { good: [...], bad: [...] }, deduped. */
+function parseEmails(text) {
+  const all = String(text)
+    .split(/[\s,;]+/)
+    .map((s) => s.trim())
+    .filter(Boolean);
+  const seen = new Set();
+  const good = [];
+  const bad = [];
+  for (const e of all) {
+    const k = e.toLowerCase();
+    if (seen.has(k)) continue;
+    seen.add(k);
+    (EMAIL.test(e) ? good : bad).push(e);
+  }
+  return { good, bad };
+}
+
+function InviteRow({ onInvite, roles, inviteRole, placeholder, people, label }) {
+  const id = useId();
+  const [text, setText] = useState("");
+  const [role, setRole] = useState(inviteRole ?? roles[0]?.value);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [note, setNote] = useState(null);
+
+  async function submit(e) {
+    e.preventDefault();
+    if (busy) return;
+    setNote(null);
+    const { good, bad } = parseEmails(text);
+    if (!good.length && !bad.length) {
+      setError("Type at least one email address.");
+      return;
+    }
+    if (bad.length) {
+      setError(`${bad.join(", ")} ${bad.length === 1 ? "is not an email address" : "are not email addresses"}.`);
+      return;
+    }
+    const have = new Set((people ?? []).map((p) => String(p.email ?? "").toLowerCase()));
+    const fresh = good.filter((e) => !have.has(e.toLowerCase()));
+    if (!fresh.length) {
+      setError(good.length === 1 ? `${good[0]} already has access.` : "Everyone listed already has access.");
+      return;
+    }
+    setError(null);
+    setBusy(true);
+    const failed = await attempt(() => onInvite(fresh, role));
+    setBusy(false);
+    if (failed) {
+      setError(failed);
+      return;
+    }
+    setText("");
+    setNote(fresh.length === 1 ? `Invited ${fresh[0]}.` : `Invited ${fresh.length} people.`);
+  }
+
+  const picker =
+    roles.length > 1 && !inviteRole ? (
+      <Select
+        aria-label="Access for the people you invite"
+        value={role}
+        onChange={(e) => setRole(e.target.value)}
+        options={roles}
+        disabled={busy}
+        className="sm:w-36"
+      />
+    ) : null;
+
+  return (
+    <form onSubmit={submit} className="grid gap-2" noValidate>
+      <label htmlFor={id} className="text-sm font-medium text-foreground">
+        {label}
+      </label>
+      <div className="flex flex-col gap-2 sm:flex-row">
+        <div className="min-w-0 flex-1">
+          <InputGroup
+            id={id}
+            icon="user-plus"
+            type="text"
+            inputMode="email"
+            autoComplete="off"
+            placeholder={placeholder}
+            value={text}
+            onChange={(e) => {
+              setText(e.target.value);
+              if (error) setError(null);
+            }}
+            invalid={Boolean(error)}
+            aria-describedby={error ? `${id}-error` : note ? `${id}-note` : undefined}
+            disabled={busy}
+          />
+        </div>
+        {picker}
+        <Button type="submit" variant="primary" loading={busy}>
+          Invite
+        </Button>
+      </div>
+      {error ? (
+        <p id={`${id}-error`} role="alert" className="text-xs text-destructive">
+          {error}
+        </p>
+      ) : note ? (
+        <p id={`${id}-note`} role="status" className="text-xs text-muted-foreground">
+          {note}
+        </p>
+      ) : null}
+    </form>
+  );
+}
+
+function PersonRow({ person, roles, onRoleChange, onRemove, onError, you }) {
+  const [role, setRole] = useState(person.role);
+  const [busy, setBusy] = useState(false);
+  useEffect(() => setRole(person.role), [person.role]);
+
+  const known = roles.find((r) => r.value === role);
+  const editable = !person.locked && known && (onRoleChange || onRemove);
+
+  async function change(next) {
+    if (next === role || busy) return;
+    const before = role;
+    setRole(next); // shows at once; goes back if the save fails
+    setBusy(true);
+    const failed = await attempt(() => onRoleChange(person, next));
+    setBusy(false);
+    if (failed) {
+      setRole(before);
+      onError(`${person.name ?? person.email}: ${failed}`);
+    }
+  }
+
+  async function remove() {
+    setBusy(true);
+    const failed = await attempt(() => onRemove(person));
+    setBusy(false);
+    if (failed) onError(`${person.name ?? person.email} still has access: ${failed}`);
+  }
+
+  const roleLabel = known?.label ?? person.roleLabel ?? String(role ?? "");
+
+  const items = editable
+    ? [
+        onRoleChange && { type: "radio", label: "Access", value: role, onValueChange: change, options: roles },
+        onRoleChange && onRemove && { type: "separator" },
+        onRemove && { label: "Remove access", icon: "trash", tone: "danger", onSelect: remove },
+      ]
+    : [];
+
+  const meta = editable ? (
+    <Menu
+      label={`${roleLabel}, access for ${person.name ?? person.email}`}
+      trigger={
+        <span className="inline-flex items-center gap-1 text-sm">
+          {busy ? <span className="text-muted-foreground">Saving…</span> : roleLabel}
+          <Icon name="chevron-down" size={14} className="text-muted-foreground" />
+        </span>
+      }
+      items={items}
+    />
+  ) : (
+    <Badge variant="outline">{roleLabel}</Badge>
+  );
+
+  return (
+    <li>
+      <Item
+        size="sm"
+        media={<Avatar name={person.name ?? person.email} src={person.src} size="sm" />}
+        title={
+          <>
+            {person.name ?? person.email}
+            {you ? <span className="font-normal text-muted-foreground"> (you)</span> : null}
+          </>
+        }
+        description={person.name ? person.email : person.pending ? "Invite sent" : undefined}
+        meta={person.pending && person.name ? <Badge variant="soft">Invited</Badge> : undefined}
+        actions={meta}
+        className={cx(busy && "opacity-70")}
+      />
+    </li>
+  );
+}
+
+function LinkRow({ link, onCopy, onPreview, previewHref, label }) {
+  const id = useId();
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState(null);
+  const timer = useRef(null);
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  async function copy() {
+    setError(null);
+    let failed = null;
+    try {
+      if (!navigator.clipboard?.writeText) throw new Error("This browser blocks copying. Select the link and copy it by hand.");
+      await navigator.clipboard.writeText(link);
+      failed = await attempt(() => onCopy?.(link));
+    } catch (e) {
+      failed = e?.message || "Copying failed. Select the link and copy it by hand.";
+    }
+    if (failed) {
+      setError(failed);
+      return;
+    }
+    setCopied(true);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), 1600);
+  }
+
+  return (
+    <div className="grid gap-2">
+      <label htmlFor={id} className="text-sm font-medium text-foreground">
+        {label}
+      </label>
+      <InputGroup
+        id={id}
+        icon="link"
+        readOnly
+        value={link}
+        onFocus={(e) => e.target.select()}
+        action={{ label: copied ? "Copied" : "Copy link", icon: copied ? "check" : "copy", onClick: copy }}
+      />
+      <p role="status" className={cx("text-xs", error ? "text-destructive" : "text-muted-foreground", !error && !copied && "sr-only")}>
+        {error ?? (copied ? "Link copied." : "")}
+      </p>
+      <div className="flex flex-col gap-2 sm:flex-row">
+        <Button variant="secondary" icon={copied ? "check" : "copy"} onClick={copy} className="sm:flex-1">
+          {copied ? "Copied" : "Copy link"}
+        </Button>
+        {previewHref || onPreview ? (
+          <Button variant="secondary" icon="external" href={previewHref} onClick={onPreview} target={previewHref ? "_blank" : undefined} rel={previewHref ? "noreferrer" : undefined} className="sm:flex-1">
+            Preview
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function SettingRow({ setting, onSettingChange, onError }) {
+  const id = useId();
+  const [on, setOn] = useState(Boolean(setting.checked));
+  const [busy, setBusy] = useState(false);
+  useEffect(() => setOn(Boolean(setting.checked)), [setting.checked]);
+
+  async function toggle(e) {
+    const next = e.target.checked;
+    setOn(next);
+    setBusy(true);
+    const failed = await attempt(() => onSettingChange?.(setting.id, next));
+    setBusy(false);
+    if (failed) {
+      setOn(!next);
+      onError(`${setting.label}: ${failed}`);
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-between gap-4 rounded-md border border-border px-3">
+      <div className="min-w-0 py-2">
+        <label htmlFor={id} className="flex items-center gap-2 text-sm font-medium">
+          {setting.icon ? <Icon name={setting.icon} size={16} className="shrink-0 text-muted-foreground" /> : null}
+          {setting.label}
+        </label>
+        {setting.description ? <p className="text-xs text-muted-foreground">{setting.description}</p> : null}
+      </div>
+      <Switch id={id} checked={on} onChange={toggle} disabled={busy || setting.disabled} />
+    </div>
+  );
+}
+
+/** The body: invite, people, settings, link — each shows when its data or
+ *  callback is given. */
+export function SharePanel({
+  people,
+  roles = DEFAULT_ROLES,
+  onInvite,
+  inviteRole,
+  onRoleChange,
+  onRemove,
+  link,
+  onCopy,
+  onPreview,
+  previewHref,
+  settings,
+  onSettingChange,
+  youId,
+  inviteLabel = "Invite by email",
+  invitePlaceholder = "Emails, separated by commas",
+  peopleLabel = "People with access",
+  linkLabel = "Share link",
+  empty = "Only you have access so far.",
+  className,
+}) {
+  const [error, setError] = useState(null);
+  const list = people ?? null;
+
+  return (
+    <div className={cx("grid gap-5", className)}>
+      {onInvite ? <InviteRow onInvite={onInvite} roles={roles} inviteRole={inviteRole} placeholder={invitePlaceholder} people={list} label={inviteLabel} /> : null}
+
+      {settings?.length ? (
+        <div className="grid gap-2">
+          {settings.map((s) => (
+            <SettingRow key={s.id} setting={s} onSettingChange={onSettingChange} onError={setError} />
+          ))}
+        </div>
+      ) : null}
+
+      {list ? (
+        <section className="grid gap-1" aria-label={peopleLabel}>
+          <h3 className="text-sm font-medium">{peopleLabel}</h3>
+          {list.length ? (
+            <ul className="grid divide-y divide-border">
+              {list.map((p) => (
+                <PersonRow
+                  key={p.id ?? p.email}
+                  person={p}
+                  roles={roles}
+                  onRoleChange={onRoleChange}
+                  onRemove={onRemove}
+                  onError={setError}
+                  you={youId != null && (p.id ?? p.email) === youId}
+                />
+              ))}
+            </ul>
+          ) : (
+            <p className="py-3 text-sm text-muted-foreground">{empty}</p>
+          )}
+        </section>
+      ) : null}
+
+      {error ? (
+        <Notice tone="danger" onDismiss={() => setError(null)}>
+          {error}
+        </Notice>
+      ) : null}
+
+      {link ? <LinkRow link={link} onCopy={onCopy} onPreview={onPreview} previewHref={previewHref} label={linkLabel} /> : null}
+    </div>
+  );
+}
+
+/** SharePanel in the kit's Sheet: a dialog on a wide window, a bottom
+ *  sheet on a phone. Controlled: `open` + `onClose`. */
+export function ShareDialog({ open, onClose, title = "Share", description, footer, className, ...panel }) {
+  return (
+    <Sheet open={open} onClose={onClose} side="center" title={title} description={description} footer={footer} className={className}>
+      {open ? <SharePanel {...panel} /> : null}
+    </Sheet>
+  );
+}