makersclaw 0.2.0 → 0.3.1

package/registry/blocks/record-notes/demo.jsx

@@ -0,0 +1,179 @@
+"use client";
+
+// RecordNotes three ways — the gallery's and the smoke test's surface. Not
+// installed into apps. Saves are pretend: a switch makes them fail.
+//   Deal     beside a deal's details: newest first, your notes editable.
+//   Log      a contact's history read top to bottom, no card of its own.
+//   Empty    a new record with no notes yet.
+import { useState } from "react";
+import { Badge, Card, Switch, TabPanel, Tabs } from "../components/ui";
+import { RecordNotes } from "../components/blocks/record-notes";
+
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+const ago = (hours) => new Date(Date.now() - hours * 3_600_000).toISOString();
+
+const TEAM = [
+  { id: "u-priya", label: "Priya Raman", description: "Account executive" },
+  { id: "u-tomas", label: "Tomás Ortega", description: "Solutions engineer" },
+  { id: "u-june", label: "June Okafor", description: "Sales lead" },
+  { id: "u-lena", label: "Lena Fischer", description: "Customer success" },
+];
+const findPeople = async (query) => {
+  const q = query.toLowerCase();
+  return TEAM.filter((p) => p.label.toLowerCase().includes(q));
+};
+const person = (id) => ({ id, name: TEAM.find((p) => p.id === id).label });
+const ME = person("u-june");
+
+const t = (text, styles = {}) => ({ type: "text", text, styles });
+const at = (id) => ({ type: "mention", props: { id, label: TEAM.find((p) => p.id === id).label } });
+
+const DEAL_NOTES = [
+  {
+    id: "n1",
+    author: person("u-priya"),
+    createdAt: ago(2),
+    body: [
+      { type: "paragraph", content: [t("Call with Dana (Head of Ops). They want "), t("40 seats", { bold: true }), t(" from January, SSO is a must.")] },
+      { type: "bulletListItem", content: [t("Budget signed off for Q1")] },
+      { type: "bulletListItem", content: [t("Security review needs our SOC 2 report")] },
+    ],
+  },
+  {
+    id: "n2",
+    author: ME,
+    createdAt: ago(5),
+    updatedAt: ago(4),
+    body: [{ type: "paragraph", content: [at("u-tomas"), t(" can you run the SSO demo on Thursday? Dana's IT lead will join.")] }],
+  },
+  {
+    id: "n3",
+    author: person("u-tomas"),
+    createdAt: ago(28),
+    body: [
+      { type: "paragraph", content: [t("Sandbox is set up for them. Checklist before the demo:")] },
+      { type: "checkListItem", props: { checked: true }, content: [t("Okta test tenant")] },
+      { type: "checkListItem", content: [t("SCIM provisioning with 5 test users")] },
+    ],
+  },
+  {
+    id: "n4",
+    author: ME,
+    createdAt: ago(24 * 6),
+    body: [{ type: "paragraph", content: [t("Inbound from the pricing page. Came in through the "), t("Teams", { italic: true }), t(" plan calculator.")] }],
+  },
+];
+
+function usePretendNotes(initial, failing) {
+  const [notes, setNotes] = useState(initial);
+  const answer = async () => {
+    await wait(600);
+    return failing ? { ok: false, error: "The server is not answering. Nothing was saved; try again." } : null;
+  };
+  return {
+    notes,
+    onAdd: async (doc) => {
+      const bad = await answer();
+      if (bad) return bad;
+      setNotes((n) => [...n, { id: `n${Date.now()}`, author: ME, body: doc, createdAt: new Date().toISOString() }]);
+      return { ok: true };
+    },
+    onEdit: async (note, doc) => {
+      const bad = await answer();
+      if (bad) return bad;
+      setNotes((n) => n.map((x) => (x.id === note.id ? { ...x, body: doc, updatedAt: new Date().toISOString() } : x)));
+      return { ok: true };
+    },
+    onDelete: async (note) => {
+      const bad = await answer();
+      if (bad) return bad;
+      setNotes((n) => n.filter((x) => x.id !== note.id));
+      return { ok: true };
+    },
+  };
+}
+
+function DealDemo() {
+  const [failing, setFailing] = useState(false);
+  const store = usePretendNotes(DEAL_NOTES, failing);
+  return (
+    <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_26rem]">
+      <Card
+        title="Northwind Logistics — Teams plan"
+        description="Owner June Okafor · Close date 15 Dec"
+        actions={<Badge tone="info">Proposal</Badge>}
+        className="h-fit min-w-0"
+      >
+        <dl className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+          <div>
+            <dt className="text-muted-foreground">Amount</dt>
+            <dd className="font-medium">$38,400 / yr</dd>
+          </div>
+          <div>
+            <dt className="text-muted-foreground">Seats</dt>
+            <dd className="font-medium">40</dd>
+          </div>
+          <div>
+            <dt className="text-muted-foreground">Contact</dt>
+            <dd className="font-medium">Dana Whitfield</dd>
+          </div>
+          <div>
+            <dt className="text-muted-foreground">Source</dt>
+            <dd className="font-medium">Pricing page</dd>
+          </div>
+        </dl>
+        <div className="mt-4 border-t border-border pt-3">
+          <Switch id="rn-fail" label="Saves fail" checked={failing} onChange={(e) => setFailing(e.target.checked)} />
+        </div>
+      </Card>
+      <RecordNotes {...store} me={ME} mentions={findPeople} description="Only you can edit or delete your own notes." />
+    </div>
+  );
+}
+
+const CONTACT_LOG = [
+  { id: "l1", author: person("u-lena"), createdAt: ago(24 * 40), body: "Onboarded. Wants a monthly check-in, first Tuesday." },
+  { id: "l2", author: person("u-lena"), createdAt: ago(24 * 9), body: [{ type: "paragraph", content: [t("Asked about exporting invoices to "), t("Xero", { bold: true }), t(". Logged a feature request.")] }] },
+  { id: "l3", author: ME, createdAt: ago(3), body: [{ type: "paragraph", content: [t("Renewal call booked for Friday. "), at("u-lena"), t(" joins.")] }] },
+];
+
+function LogDemo() {
+  const store = usePretendNotes(CONTACT_LOG, false);
+  return (
+    <Card title="Dana Whitfield" description="Head of Operations, Northwind Logistics" className="max-w-2xl">
+      <RecordNotes {...store} me={ME} mentions={findPeople} order="oldest" frame="none" title="History" placeholder="Log a call, a meeting, a thought…" addLabel="Log it" />
+    </Card>
+  );
+}
+
+function EmptyDemo() {
+  const store = usePretendNotes([], false);
+  return <RecordNotes {...store} me={ME} mentions={findPeople} className="max-w-xl" />;
+}
+
+export default function RecordNotesDemo() {
+  const [tab, setTab] = useState("deal");
+  return (
+    <div className="grid gap-4">
+      <Tabs
+        aria-label="RecordNotes variants"
+        value={tab}
+        onChange={setTab}
+        tabs={[
+          { key: "deal", label: "Deal" },
+          { key: "log", label: "Log" },
+          { key: "empty", label: "Empty" },
+        ]}
+      />
+      <TabPanel tab="deal" value={tab}>
+        <DealDemo />
+      </TabPanel>
+      <TabPanel tab="log" value={tab}>
+        <LogDemo />
+      </TabPanel>
+      <TabPanel tab="empty" value={tab}>
+        <EmptyDemo />
+      </TabPanel>
+    </div>
+  );
+}

package/registry/blocks/record-notes/index.js

@@ -0,0 +1,4 @@
+// The RecordNotes block — `makersclaw add record-notes`. Fixed: compose it
+// through its props (README.md beside this file). Built on comment-box
+// (its composer, body and time) and doc-editor (the editor underneath).
+export { RecordNotes } from "./record-notes";

package/registry/blocks/record-notes/record-notes.jsx

@@ -0,0 +1,266 @@
+"use client";
+
+// RecordNotes — the dated notes kept on one record (a deal, a contact), to
+// sit beside record-form. A composer adds a note; the notes follow, grouped
+// by day, each with its author and time; your own notes have Edit (in
+// place, the same composer) and Delete (after a Confirm).
+//
+// Every save is an async callback answering { ok }. The block holds no
+// copy of the notes: the page adds, replaces or drops the note in `notes`
+// when its callback succeeds, and the block shows a failure where it
+// happened (under the composer, or on the note).
+//
+// Days ("Today", "Yesterday") are the reader's, known only in the
+// browser: the server draws the notes as one list, and the day headings
+// appear once mounted — never a mismatch between the two renders.
+import { useEffect, useRef, useState } from "react";
+import { Avatar, Badge, Card, Confirm, Menu, cx } from "../../ui";
+import { CommentBody, CommentComposer, CommentTime } from "../comment-box";
+import { docToText } from "../doc-editor";
+
+const nameOf = (author) => (typeof author === "string" ? author : author?.name) || "Someone";
+const srcOf = (author) => (typeof author === "object" && author ? author.src : undefined);
+const idOf = (author) => (typeof author === "object" && author ? author.id : undefined);
+
+const toMs = (v) => {
+  if (v === undefined || v === null || v === "") return NaN;
+  return (v instanceof Date ? v : new Date(v)).getTime();
+};
+
+function useMounted() {
+  const [on, setOn] = useState(false);
+  useEffect(() => setOn(true), []);
+  return on;
+}
+
+function dayOf(ms) {
+  const d = new Date(ms);
+  d.setHours(0, 0, 0, 0);
+  return d.getTime();
+}
+
+function dayLabel(day, now) {
+  const today = dayOf(now);
+  if (day === today) return "Today";
+  if (day === today - 86_400_000) return "Yesterday";
+  const d = new Date(day);
+  const sameYear = d.getFullYear() === new Date(now).getFullYear();
+  return new Intl.DateTimeFormat(undefined, { weekday: "short", day: "numeric", month: "short", ...(sameYear ? {} : { year: "numeric" }) }).format(d);
+}
+
+/** Split sorted notes into runs of one day each: [{ day, label, notes }]. */
+function byDay(notes, now) {
+  const out = [];
+  for (const n of notes) {
+    const ms = toMs(n.createdAt);
+    const day = Number.isNaN(ms) ? null : dayOf(ms);
+    const last = out[out.length - 1];
+    if (last && last.day === day) last.notes.push(n);
+    else out.push({ day, label: day === null ? "Undated" : dayLabel(day, now), notes: [n] });
+  }
+  return out;
+}
+
+const snippet = (doc, max = 120) => {
+  const text = docToText(doc).replace(/\s+/g, " ").trim();
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+};
+
+function Note({ note, own, editing, onStartEdit, onStopEdit, onEdit, onAskDelete, error, mentions }) {
+  const name = nameOf(note.author);
+  const self = useRef(null);
+  const was = useRef(editing);
+  useEffect(() => {
+    // Back from editing: the caret was in the composer, which is gone.
+    if (was.current && !editing) self.current?.focus();
+    was.current = editing;
+  }, [editing]);
+
+  return (
+    <li>
+      <article ref={self} tabIndex={-1} aria-label={`Note by ${name}`} className="flex gap-3 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring">
+        <Avatar name={name} src={srcOf(note.author)} size="sm" className="mt-0.5 shrink-0" />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start gap-2">
+            <p className="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2 pt-1 text-sm">
+              <span className="font-medium">{name}</span>
+              <CommentTime date={note.createdAt} />
+              {note.updatedAt || note.edited ? <span className="text-xs text-muted-foreground">(edited)</span> : null}
+            </p>
+            {own && !editing ? (
+              <Menu
+                size="md"
+                label={`Note by ${name}, actions`}
+                className="-me-2 -mt-2 shrink-0"
+                items={[
+                  onEdit && { label: "Edit", icon: "pencil", onSelect: onStartEdit },
+                  onAskDelete && { label: "Delete", icon: "trash", tone: "danger", onSelect: onAskDelete },
+                ]}
+              />
+            ) : null}
+          </div>
+          {editing ? (
+            <CommentComposer
+              className="mt-2"
+              defaultValue={note.body}
+              onSubmit={(doc) => onEdit(note, doc)}
+              onCancel={onStopEdit}
+              mentions={mentions}
+              submitLabel="Save"
+              submitIcon={null}
+              busyLabel="Saving…"
+              failedText="Couldn't save the change. Your edit is still here; try again."
+              label={`Edit note by ${name}`}
+              clearOnSubmit={false}
+              autoFocus
+            />
+          ) : (
+            <CommentBody doc={note.body} className="mt-0.5" />
+          )}
+          {error ? (
+            <p role="alert" className="mt-1.5 text-xs text-destructive">
+              {error}
+            </p>
+          ) : null}
+        </div>
+      </article>
+    </li>
+  );
+}
+
+export function RecordNotes({
+  notes,
+  me,
+  onAdd,
+  onEdit,
+  onDelete,
+  canEdit,
+  mentions,
+  title = "Notes",
+  description,
+  placeholder = "Add a note…",
+  addLabel = "Add note",
+  emptyText = "No notes yet. The first one starts the record's history.",
+  order = "newest",
+  frame = "card",
+  className,
+}) {
+  const mounted = useMounted();
+  const [editing, setEditing] = useState(null);
+  const [asking, setAsking] = useState(null);
+  const [deleting, setDeleting] = useState(false);
+  const [errors, setErrors] = useState({});
+  const listRef = useRef(null);
+
+  const list = (Array.isArray(notes) ? notes : [])
+    .map((n, i) => ({ n, i, ms: toMs(n.createdAt) }))
+    .sort((a, b) => {
+      const x = Number.isNaN(a.ms) ? -Infinity : a.ms;
+      const y = Number.isNaN(b.ms) ? -Infinity : b.ms;
+      return (order === "oldest" ? x - y : y - x) || a.i - b.i;
+    })
+    .map((x) => x.n);
+
+  const keyOf = (n, i) => n.id ?? `note-${i}`;
+  const isOwn = (n) => (canEdit ? !!canEdit(n) : n.mine === true || (me?.id !== undefined && idOf(n.author) === me.id));
+  const setError = (key, msg) => setErrors((e) => ({ ...e, [key]: msg }));
+
+  async function saveEdit(note, doc) {
+    let res;
+    try {
+      res = await onEdit(note, doc);
+    } catch (e) {
+      res = { ok: false, error: e?.message };
+    }
+    if (res && res.ok === false) return res;
+    setEditing(null);
+    setError(note.id, null);
+    return { ok: true };
+  }
+
+  async function confirmDelete() {
+    const note = asking;
+    if (!note) return;
+    setDeleting(true);
+    let res;
+    try {
+      res = await onDelete(note);
+    } catch (e) {
+      res = { ok: false, error: e?.message };
+    }
+    setDeleting(false);
+    setAsking(null);
+    if (res && res.ok === false) {
+      setError(note.id, res.error || "Couldn't delete this note. Try again.");
+      return;
+    }
+    listRef.current?.focus();
+  }
+
+  const composer = onAdd ? (
+    <CommentComposer onSubmit={onAdd} author={me} mentions={mentions} placeholder={placeholder} submitLabel={addLabel} submitIcon="plus" busyLabel="Adding…" failedText="Couldn't add the note. It is still here; try again." label="New note" />
+  ) : null;
+
+  const renderNote = (n, i) => {
+    const key = keyOf(n, i);
+    return (
+      <Note
+        key={key}
+        note={n}
+        own={isOwn(n)}
+        editing={editing === key}
+        onStartEdit={() => {
+          setError(n.id, null);
+          setEditing(key);
+        }}
+        onStopEdit={() => setEditing(null)}
+        onEdit={onEdit ? saveEdit : null}
+        onAskDelete={onDelete ? () => setAsking(n) : null}
+        error={errors[n.id]}
+        mentions={mentions}
+      />
+    );
+  };
+
+  const groups = mounted ? byDay(list, Date.now()) : [{ day: "all", label: null, notes: list }];
+  const body = (
+    <div className="grid gap-5">
+      {order !== "oldest" ? composer : null}
+      {list.length === 0 ? (
+        <p className="text-sm text-muted-foreground">{emptyText}</p>
+      ) : (
+        <div ref={listRef} tabIndex={-1} aria-label={`${title}, ${list.length}`} role="region" className="grid gap-5 outline-none">
+          {groups.map((g) => (
+            <section key={g.day ?? "undated"} aria-label={g.label ?? undefined} className="grid gap-3">
+              {g.label ? (
+                <h3 className="flex items-center gap-3 text-xs font-medium text-muted-foreground">
+                  <span className="shrink-0">{g.label}</span>
+                  <span aria-hidden="true" className="h-px flex-1 bg-border" />
+                </h3>
+              ) : null}
+              <ul className="grid gap-4">{g.notes.map((n) => renderNote(n, list.indexOf(n)))}</ul>
+            </section>
+          ))}
+        </div>
+      )}
+      {order === "oldest" ? composer : null}
+      <Confirm
+        open={!!asking}
+        onClose={() => (deleting ? null : setAsking(null))}
+        onConfirm={confirmDelete}
+        title="Delete this note?"
+        body={asking ? `“${snippet(asking.body) || "Empty note"}” will be gone for everyone on this record.` : null}
+        confirmLabel="Delete note"
+        tone="danger"
+        busy={deleting}
+      />
+    </div>
+  );
+
+  if (frame === "none") return <div className={className}>{body}</div>;
+  return (
+    <Card title={title} description={description} actions={list.length ? <Badge variant="soft">{list.length}</Badge> : null} className={cx("min-w-0", className)}>
+      {body}
+    </Card>
+  );
+}

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

@@ -0,0 +1,108 @@
+# SearchDialog
+
+One search over every kind of record in an app: chats, documents, images,
+projects, people. Before anything is typed it shows your sections ("Last
+opened", "Recent chats"). While typing it shows the matches, best first,
+with the typed text marked, a date, and a thumbnail for an image. Chips
+under the list (All, Chats, Images, Documents, Projects) narrow it to one
+kind. Arrow keys move, Enter opens, Esc closes, ⌘K / Ctrl+K toggles it.
+
+It is the kit's `Command` (the list, the keys, the screen-reader wiring)
+inside the kit's `Sheet`: a dialog near the top of a wide window, a
+bottom sheet on a phone. `SearchPanel` is the same box inline, for a
+search page or a sidebar.
+
+```jsx
+import { SearchDialog, SearchPanel } from "../components/blocks/search-dialog";   // a Makersclaw app ("./blocks/search-dialog" from components/)
+import { SearchDialog, SearchPanel } from "@/components/makersclaw/blocks/search-dialog";   // a shadcn project
+```
+
+A client component: render it from a `"use client"` component.
+
+## The data
+
+A result is `{ id, kind, title, snippet?, date?, thumb?, icon?, keywords? }`.
+
+- `id` — unique within its kind list.
+- `kind` — `"chat"`, `"document"`, `"image"`, `"project"`, `"person"`,
+  `"company"`, `"task"`, `"page"`, or your own word. It picks the icon
+  and the chip.
+- `title` — the line that is searched and marked.
+- `snippet` — a line under it: an excerpt, a file type. Searched too.
+- `date` — shown after the snippet while searching ("Sep 4", "Today").
+  Format it yourself.
+- `thumb` — an image URL (or a node) shown instead of the icon. Every
+  `image` result gets a square, with an image glyph when there is no URL.
+- `icon` — a kit `Icon` name, instead of the kind's.
+- `keywords` — matched, never shown (a person's company, a project's client).
+
+## Props
+
+Both components take these.
+
+- `results` — everything that can be found, searched in the browser. Leave
+  it out when `onSearch` does the searching.
+- `onSelect(result)` — the result chosen (click or Enter). Open it here.
+  The dialog closes itself first.
+- `sections` — what shows before anything is typed:
+  `[{ heading, results }]`, in order. A result may sit in two sections.
+  Leave it out and the empty box shows `hint`.
+- `onSearch(query, { signal })` — async; return the results for `query`.
+  Called 200ms after typing stops. A newer query aborts the older one
+  (pass `signal` to `fetch`). A throw shows "Search failed". The chips
+  filter what comes back.
+- `kinds` — the chips, in order: `[{ value, label, icon? }]`. Default:
+  every kind in `results` and `sections`, in order of first appearance,
+  labelled from the list above ("Chats", "Images"). One kind, no chips.
+- `loading` — `true` while you fetch `results` yourself.
+- `placeholder` — default "Search…".
+- `hint` — what the empty box says before typing. Default "Type to search."
+- `showDate` — default `true`.
+- `label` — what a screen reader calls the box. Default "Search".
+- `className` — on the box (`SearchPanel`) or the dialog (`SearchDialog`).
+
+`SearchDialog` also takes:
+
+- `open` · `onOpenChange(open)` — controlled; or `defaultOpen`.
+- `hotkey` — `"k"` binds ⌘K / Ctrl+K anywhere on the page to open and
+  close it. Bind no key an input on the page already uses.
+
+## Example
+
+```jsx
+"use client";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Button } from "../components/ui";
+import { SearchDialog } from "../components/blocks/search-dialog";
+
+export function GlobalSearch({ recent, search }) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button icon="search" onClick={() => setOpen(true)}>Search</Button>
+      <SearchDialog
+        open={open}
+        onOpenChange={setOpen}
+        hotkey="k"
+        sections={[{ heading: "Recent", results: recent }]}
+        onSearch={(q) => search(q)}   // a server action returning results
+        onSelect={(r) => router.push(`/${r.kind}s/${r.id}`)}
+      />
+    </>
+  );
+}
+```
+
+## What it will not do
+
+- Index anything. It searches the list you give it, or asks your server.
+- Lay images out as a grid. An image result is a row with a thumbnail.
+- Remember recent searches. Keep them yourself and pass them as a section.
+- Run commands ("New invoice", "Go to settings"). For a command palette
+  use the kit's `CommandDialog`.
+
+## Credits
+
+Ported from blocks.so (https://blocks.so, command-menu-04, MIT), rewritten on the Makersclaw kit.

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

@@ -0,0 +1,10 @@
+{
+  "name": "search-dialog",
+  "title": "SearchDialog",
+  "description": "One ⌘K search over every kind of record — chats, documents, images, projects, people. Before typing it shows your sections (Last opened, Recent); while typing, ranked matches with the typed text marked, a date, image thumbnails, and kind chips (All, Chats, Images…) to narrow them. Searches your list in the browser, or your server through an async onSearch. Built on the kit's Command; SearchPanel is the same box inline.",
+  "useWhen": "An app has more than one kind of record and wants one global search box or ⌘K palette to find any of them, or a search page with type filters.",
+  "tags": ["search", "global search", "command", "cmdk", "command palette", "spotlight", "find", "filter", "recent", "quick open", "jump to"],
+  "exports": ["SearchDialog", "SearchPanel"],
+  "files": ["index.js", "search-dialog.jsx"],
+  "requires": []
+}