makersclaw 0.2.0 → 0.3.1

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

@@ -0,0 +1,415 @@
+"use client";
+
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Button, Card, Confirm, Empty, Notice, Separator, Sheet, Skeleton, cx } from "../../ui";
+import { RecordField, WIDE } from "./record-fields";
+import { checkAll, checkField } from "./rules";
+
+// RecordForm — edit (or create) one record from a list of fields: the
+// fields are data, grouped into titled sections, drawn with the kit's
+// parts. It holds the draft, checks it as the founder types, and saves it
+// through `onSave`, which answers { ok } — or { ok: false, error, errors }
+// with a message per field, shown under that field. In a card, on a page,
+// or in a dialog (a centred Sheet).
+
+const SAVED_FOR = 3000;
+
+function sameValues(a, b) {
+  try {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } catch {
+    return a === b;
+  }
+}
+
+/** The fields' starting values: the record's, else each field's default. */
+function startFrom(fields, values) {
+  const out = { ...(values ?? {}) };
+  for (const f of fields) {
+    if (out[f.name] !== undefined) continue;
+    if (f.defaultValue !== undefined) out[f.name] = f.defaultValue;
+    else if (f.type === "checkboxes" || f.type === "images" || f.type === "tags" || (f.type === "combobox" && f.multiple)) out[f.name] = [];
+    else if (f.type === "checkbox" || f.type === "switch") out[f.name] = false;
+  }
+  return out;
+}
+
+/** What goes out: numbers as numbers, text trimmed, hidden fields dropped. */
+function outOf(fields, draft) {
+  const out = { ...draft };
+  for (const f of fields) {
+    const v = out[f.name];
+    if (f.type === "number" && typeof v === "string") out[f.name] = v.trim() === "" ? null : Number(v);
+    else if (typeof v === "string" && f.trim !== false && f.type !== "password") out[f.name] = v.trim();
+  }
+  return out;
+}
+
+export function RecordForm({
+  sections: sectionsProp,
+  fields: fieldsProp,
+  values,
+  onSave,
+  onCancel,
+  onDelete,
+  onChange,
+  title,
+  description,
+  container = "card",
+  layout = "stacked",
+  columns = 2,
+  open = true,
+  onClose,
+  submitLabel = "Save changes",
+  cancelLabel = "Cancel",
+  savedLabel = "Saved",
+  deleteLabel = "Delete",
+  confirmDelete,
+  requireChanges = true,
+  loading = false,
+  error: loadError,
+  onRetry,
+  emptyLabel = "There is nothing to fill in here yet.",
+  className,
+}) {
+  const formId = useId();
+  const sections = useMemo(
+    () => (sectionsProp?.length ? sectionsProp : fieldsProp?.length ? [{ fields: fieldsProp }] : []),
+    [sectionsProp, fieldsProp],
+  );
+  const allFields = useMemo(() => sections.flatMap((s) => s.fields ?? []), [sections]);
+
+  const [baseline, setBaseline] = useState(() => startFrom(allFields, values));
+  const [draft, setDraft] = useState(baseline);
+  const [touched, setTouched] = useState({});
+  const [errors, setErrors] = useState({});
+  const [formError, setFormError] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [savedAt, setSavedAt] = useState(null);
+  const [asking, setAsking] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const seen = useRef(values);
+  const alive = useRef(true);
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+
+  // A new record (a different `values`) starts the form over.
+  useEffect(() => {
+    if (sameValues(seen.current, values)) return;
+    seen.current = values;
+    const fresh = startFrom(allFields, values);
+    setBaseline(fresh);
+    setDraft(fresh);
+    setTouched({});
+    setErrors({});
+    setFormError(null);
+  }, [values, allFields]);
+
+  // A dialog opens on the record as it stands, not on last time's edits.
+  const wasOpen = useRef(open);
+  useEffect(() => {
+    if (open && !wasOpen.current) {
+      setDraft(baseline);
+      setTouched({});
+      setErrors({});
+      setFormError(null);
+      setSavedAt(null);
+    }
+    wasOpen.current = open;
+  }, [open, baseline]);
+
+  useEffect(() => {
+    if (!savedAt) return;
+    const t = setTimeout(() => setSavedAt(null), SAVED_FOR);
+    return () => clearTimeout(t);
+  }, [savedAt]);
+
+  const visible = (f) => (typeof f.when === "function" ? f.when(draft) : true);
+  const shownFields = allFields.filter(visible);
+  const dirty = !sameValues(draft, baseline);
+  const idOf = (name) => `${formId}-${name}`;
+
+  function set(name, value) {
+    const next = { ...draft, [name]: value };
+    setDraft(next);
+    setSavedAt(null);
+    onChange?.(next);
+    // A field already marked wrong is checked again as it is fixed, and so
+    // is a field that must match this one (a confirm).
+    setErrors((e) => {
+      const out = { ...e };
+      for (const f of allFields) {
+        const mine = f.name === name && (out[name] !== undefined || touched[name]);
+        const pointer = f.matches === name && out[f.name] !== undefined;
+        if (!mine && !pointer) continue;
+        const m = checkField(f, next);
+        if (m) out[f.name] = m;
+        else delete out[f.name];
+      }
+      return out;
+    });
+  }
+
+  function blur(name) {
+    setTouched((t) => (t[name] ? t : { ...t, [name]: true }));
+    const f = allFields.find((x) => x.name === name);
+    if (!f) return;
+    const m = checkField(f, draft);
+    setErrors((e) => {
+      if (m) return { ...e, [name]: m };
+      if (e[name] === undefined) return e;
+      const { [name]: _drop, ...rest } = e;
+      return rest;
+    });
+  }
+
+  function focusField(name) {
+    if (typeof document === "undefined") return;
+    const el = document.getElementById(idOf(name));
+    if (!el) return;
+    const target = el.matches("input,select,textarea,button") ? el : el.querySelector("input:not([type=hidden]),select,textarea,button");
+    target?.focus();
+  }
+
+  function reset() {
+    setDraft(baseline);
+    setTouched({});
+    setErrors({});
+    setFormError(null);
+  }
+
+  async function submit(e) {
+    e?.preventDefault?.();
+    if (saving || !onSave) return;
+    const found = checkAll(shownFields, draft);
+    setErrors(found);
+    const bad = shownFields.find((f) => found[f.name]);
+    if (bad) {
+      const n = Object.keys(found).length;
+      setFormError(n === 1 ? "One field needs attention." : `${n} fields need attention.`);
+      focusField(bad.name);
+      return;
+    }
+    setFormError(null);
+    setSaving(true);
+    // A field hidden by its `when` is not sent.
+    const kept = { ...draft };
+    for (const f of allFields) if (!shownFields.includes(f)) delete kept[f.name];
+    const out = outOf(shownFields, kept);
+    const changed = Object.keys(out).filter((k) => !sameValues(out[k], baseline[k]));
+    let res;
+    try {
+      res = await onSave(out, { changed });
+    } catch (err) {
+      res = { ok: false, error: err?.message };
+    }
+    if (!alive.current) return;
+    setSaving(false);
+    if (res?.ok) {
+      setBaseline(draft);
+      setTouched({});
+      setSavedAt(Date.now());
+      if (container === "dialog") onClose?.();
+      return;
+    }
+    const fieldErrors = res?.errors && typeof res.errors === "object" ? res.errors : {};
+    setErrors(fieldErrors);
+    const named = shownFields.find((f) => fieldErrors[f.name]);
+    setFormError(res?.error || (named ? "Some fields were not accepted. Fix them and save again." : "The changes were not saved. Try again."));
+    if (named) focusField(named.name);
+  }
+
+  async function remove() {
+    setDeleting(true);
+    let res;
+    try {
+      res = await onDelete();
+    } catch (err) {
+      res = { ok: false, error: err?.message };
+    }
+    if (!alive.current) return;
+    setDeleting(false);
+    setAsking(false);
+    if (!res?.ok) setFormError(res?.error || "It was not deleted. Try again.");
+    else if (container === "dialog") onClose?.();
+  }
+
+  function cancel() {
+    reset();
+    if (container === "dialog") onClose?.();
+    onCancel?.();
+  }
+
+  const split = layout === "split" && container !== "dialog";
+  const grid = columns >= 2 && container !== "dialog" ? "grid gap-4 sm:grid-cols-2" : "grid gap-4";
+  const busy = saving || deleting;
+
+  let body;
+  if (loadError) {
+    body = (
+      <Notice tone="danger" title="This could not be loaded" action={onRetry ? <Button size="sm" onClick={onRetry}>Try again</Button> : null}>
+        {loadError}
+      </Notice>
+    );
+  } else if (loading) {
+    body = (
+      <div aria-busy="true" aria-label="Loading" className={grid}>
+        {[0, 1, 2, 3].map((i) => (
+          <div key={i} className="grid gap-2">
+            <Skeleton className="w-24" />
+            <Skeleton shape="rect" className="h-11 w-full" />
+          </div>
+        ))}
+      </div>
+    );
+  } else if (allFields.length === 0) {
+    body = <Empty icon="file" title={emptyLabel} />;
+  } else {
+    body = (
+      <div className={cx("grid", split ? "gap-8" : "gap-6")}>
+        {sections.map((section, si) => {
+          const fields = (section.fields ?? []).filter(visible);
+          if (fields.length === 0) return null;
+          const head =
+            section.title || section.description ? (
+              <div className="min-w-0">
+                {section.title ? <h3 className="text-sm font-semibold text-foreground">{section.title}</h3> : null}
+                {section.description ? <p className="mt-1 text-sm text-muted-foreground">{section.description}</p> : null}
+              </div>
+            ) : null;
+          const cols = section.columns ?? columns;
+          const sectionGrid = cols >= 2 && container !== "dialog" ? "grid gap-4 sm:grid-cols-2" : "grid gap-4";
+          return (
+            <div key={section.key ?? section.title ?? si} className="grid gap-6">
+              {si > 0 && split ? <Separator /> : null}
+              <section className={split ? "grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-8" : "grid gap-4"}>
+                {head}
+                <div className={sectionGrid}>
+                  {fields.map((f) => {
+                    const wide = f.width === "full" || (f.width !== "half" && WIDE.has(f.type ?? "text"));
+                    return (
+                      <div key={f.name} className={cx("min-w-0", wide && "sm:col-span-2")}>
+                        <RecordField
+                          field={f}
+                          id={idOf(f.name)}
+                          value={draft[f.name]}
+                          values={draft}
+                          error={errors[f.name]}
+                          disabled={busy}
+                          onChange={(v) => set(f.name, v)}
+                          onBlur={() => blur(f.name)}
+                        />
+                      </div>
+                    );
+                  })}
+                </div>
+              </section>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  const ready = !loading && !loadError && allFields.length > 0;
+  const status = (
+    <p aria-live="polite" className="min-w-0 flex-1 text-sm text-muted-foreground">
+      {saving ? "Saving…" : savedAt ? savedLabel : dirty ? "Unsaved changes" : ""}
+    </p>
+  );
+  const buttons = ready ? (
+    <>
+      {onDelete && container !== "dialog" ? (
+        <Button variant="danger" onClick={() => setAsking(true)} disabled={busy} className="max-sm:order-last max-sm:w-full">
+          {deleteLabel}
+        </Button>
+      ) : null}
+      {container !== "dialog" ? status : null}
+      {onCancel || container === "dialog" || dirty ? (
+        <Button variant="quiet" onClick={cancel} disabled={busy}>
+          {onCancel || container === "dialog" ? cancelLabel : "Discard"}
+        </Button>
+      ) : null}
+      <Button type="submit" form={formId} variant="primary" loading={saving} disabled={deleting || (requireChanges && !dirty)}>
+        {submitLabel}
+      </Button>
+    </>
+  ) : null;
+
+  const notice = formError ? (
+    <Notice tone="danger" onDismiss={() => setFormError(null)}>
+      {formError}
+    </Notice>
+  ) : null;
+
+  const form = (
+    <form id={formId} noValidate onSubmit={submit} className="grid gap-6" aria-busy={saving || undefined}>
+      {notice}
+      {body}
+    </form>
+  );
+
+  const deleteDialog = onDelete ? (
+    <Confirm
+      open={asking}
+      onClose={() => setAsking(false)}
+      onConfirm={remove}
+      busy={deleting}
+      tone="danger"
+      title={confirmDelete?.title ?? `${deleteLabel}?`}
+      body={confirmDelete?.body ?? "This cannot be undone."}
+      confirmLabel={confirmDelete?.confirmLabel ?? deleteLabel}
+      consequences={confirmDelete?.consequences}
+      requireText={confirmDelete?.requireText}
+      acknowledge={confirmDelete?.acknowledge}
+    />
+  ) : null;
+
+  if (container === "dialog") {
+    return (
+      <Sheet
+        open={open}
+        onClose={onClose}
+        side="center"
+        title={title}
+        description={description}
+        className={className}
+        footer={buttons}
+      >
+        {form}
+      </Sheet>
+    );
+  }
+
+  const footer = buttons ? <div className="flex flex-wrap items-center justify-end gap-2 border-t border-border pt-4">{buttons}</div> : null;
+
+  if (container === "page") {
+    return (
+      <div className={cx("grid gap-6", className)}>
+        {title || description ? (
+          <header className="min-w-0">
+            {title ? <h2 className="text-xl font-semibold leading-tight">{title}</h2> : null}
+            {description ? <p className="mt-1 max-w-prose text-sm text-muted-foreground">{description}</p> : null}
+          </header>
+        ) : null}
+        {form}
+        {footer}
+        {deleteDialog}
+      </div>
+    );
+  }
+
+  return (
+    <Card title={title} description={description} className={className}>
+      <div className="grid gap-6">
+        {form}
+        {footer}
+      </div>
+      {deleteDialog}
+    </Card>
+  );
+}

package/registry/blocks/record-form/rules.js

@@ -0,0 +1,81 @@
+// What a field's value must be, as data: required, the type's own shape
+// (an email, a web address, a number in range), a length, a pattern, a
+// match with another field, and the field's own `validate`. One message
+// per field, the first rule it breaks. Plain functions: no React.
+
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+/** Is there nothing in it? "", null, [], an unticked box, a 0 rating. */
+export function isBlank(value, type) {
+  if (value === undefined || value === null) return true;
+  if (typeof value === "string") return value.trim() === "";
+  if (Array.isArray(value)) return value.length === 0;
+  if (type === "checkbox" || type === "switch") return value !== true;
+  if (type === "rating") return !value;
+  return false;
+}
+
+/** The first thing wrong with `field`'s value in `values`, or null. */
+export function checkField(field, values) {
+  const type = field.type ?? "text";
+  const value = values[field.name];
+  const label = field.label ?? field.name;
+  if (isBlank(value, type)) {
+    // An empty confirm is wrong only once there is something to confirm.
+    if (field.matches && !isBlank(values[field.matches])) return field.matchMessage ?? "These do not match.";
+    if (!field.required) return null;
+    if (type === "checkbox" || type === "switch") return field.requiredMessage ?? "This must be ticked to go on.";
+    if (["select", "combobox", "radio", "choice-cards", "date", "rating"].includes(type)) return field.requiredMessage ?? `Choose ${lower(label)}.`;
+    if (type === "photo" || type === "images") return field.requiredMessage ?? `Add ${lower(label)}.`;
+    return field.requiredMessage ?? `${label} is required.`;
+  }
+  if (typeof value === "string") {
+    const text = value.trim();
+    if (type === "email" && !EMAIL.test(text)) return "Enter an email like name@company.com.";
+    if (type === "url" && !isUrl(text)) return "Enter a full address, starting with https://.";
+    if (type === "number") {
+      const n = Number(text);
+      if (!Number.isFinite(n)) return "Enter a number.";
+      if (field.min !== undefined && n < Number(field.min)) return `Enter ${field.min} or more.`;
+      if (field.max !== undefined && n > Number(field.max)) return `Enter ${field.max} or less.`;
+    }
+    if (field.minLength && text.length < field.minLength) return `Use at least ${field.minLength} characters.`;
+    if (field.maxLength && text.length > field.maxLength) return `Use ${field.maxLength} characters at most.`;
+    if (field.pattern && !new RegExp(`^(?:${field.pattern})$`).test(text)) return field.patternMessage ?? "This is not in the expected form.";
+  }
+  if (Array.isArray(value) && field.maxItems && value.length > field.maxItems) return `Choose ${field.maxItems} at most.`;
+  if (field.matches && value !== values[field.matches]) return field.matchMessage ?? "These do not match.";
+  if (typeof field.validate === "function") {
+    try {
+      const said = field.validate(value, values);
+      if (typeof said === "string" && said) return said;
+    } catch (e) {
+      return e?.message ?? "This value was refused.";
+    }
+  }
+  return null;
+}
+
+/** Every visible field's message, as { name: message }. */
+export function checkAll(fields, values) {
+  const errors = {};
+  for (const f of fields) {
+    const m = checkField(f, values);
+    if (m) errors[f.name] = m;
+  }
+  return errors;
+}
+
+function isUrl(text) {
+  try {
+    const u = new URL(text);
+    return u.protocol === "http:" || u.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+function lower(label) {
+  const s = String(label);
+  return s.length > 1 && s[1] === s[1].toLowerCase() ? s[0].toLowerCase() + s.slice(1) : s;
+}

package/registry/blocks/record-notes/README.md

@@ -0,0 +1,139 @@
+# RecordNotes
+
+The notes kept on one record — a deal, a contact, a company — to sit
+beside its `record-form`. A composer at the top adds a note (rich text,
+`@` to mention a teammate, Cmd/Ctrl+Enter or Add note). The notes follow,
+newest first, grouped under "Today", "Yesterday", "Mon 21 Sep", each with
+its author, "2 h ago" and the body as written. Your own notes have a ⋯
+menu: Edit opens the same composer in place, Delete asks first.
+
+Every save goes out through an async callback that answers `{ ok }`. The
+block keeps no copy of the notes: when a callback succeeds, the page puts
+the change into `notes`. When one fails, the words stay and the block
+says why — under the composer, or on the note.
+
+```jsx
+import { RecordNotes } from "../components/blocks/record-notes";   // a Makersclaw app ("./blocks/record-notes" from components/)
+import { RecordNotes } from "@/components/makersclaw/blocks/record-notes";   // a shadcn project
+```
+
+It is a client component: render it from a `"use client"` component, and
+load the notes in the server surface (README §4). `makersclaw add
+record-notes` adds `comment-box` and `doc-editor` with it (and the editor's
+npm packages: run `npm install` after).
+
+## The data
+
+A note in `notes`:
+
+```js
+{
+  id: "n-204",
+  author: { id: "u-lena", name: "Lena Fischer", src: "https://…/lena.jpg" },
+  body: [ /* the doc onAdd gave you (BlockNote JSON) */ ],   // or a plain string
+  createdAt: "2026-09-23T09:12:00Z",   // ISO string, Date or ms
+  updatedAt: null,                     // set → "(edited)"
+}
+```
+
+One table, a row per note: `record_id`, `author_id`, `body jsonb`,
+`body_text` (`docToText(doc)` from `doc-editor`, for search), `created_at`,
+`updated_at`. A note is the author's: by default only notes whose
+`author.id` is `me.id` (or that carry `mine: true`) get Edit and Delete.
+
+## Props
+
+- `notes` — required: the record's notes, any order (the block sorts by
+  `createdAt`).
+- `me` — `{ id, name, src? }`, who is writing: their avatar is beside the
+  composer, and their notes are editable.
+- `onAdd(doc)` — `async`, returns `{ ok: true }` or `{ ok: false, error? }`.
+  Add the note to `notes` before answering ok. Without it there is no
+  composer (a read-only log).
+- `onEdit(note, doc)` — `async`, `{ ok }`. Replace the note's body (and set
+  `updatedAt`). Without it there is no Edit.
+- `onDelete(note)` — `async`, `{ ok }`, after the reader confirms. Drop the
+  note from `notes`. Without it there is no Delete.
+- `canEdit(note)` — who may edit and delete which note, when "the author"
+  is not the rule (an admin may delete any note). Default: the author.
+- `mentions` — `async (query) => [{ id, label, description? }]`: turns on
+  `@` in the composer.
+- `title` — `"Notes"`; the card's heading and the list's name.
+- `description` — a line under the title.
+- `placeholder` — `"Add a note…"`.
+- `addLabel` — the composer's button, `"Add note"`.
+- `emptyText` — shown when there are no notes.
+- `order` — `"newest"` (default: composer on top, newest first) ·
+  `"oldest"` (a log read top to bottom, composer at the end).
+- `frame` — `"card"` (default: a Card with the title and a count) ·
+  `"none"` (just the composer and notes, for a tab or a sheet that has its
+  own heading).
+- `className` — layout around it.
+
+## Example
+
+```jsx
+// components/DealNotes.jsx — client
+"use client";
+import { useState } from "react";
+import { deleteRow, insertRow, updateRow } from "../lib/actions";
+import { RecordNotes } from "./blocks/record-notes";
+import { docToText } from "./blocks/doc-editor";
+
+export default function DealNotes({ deal, me, team, initial }) {
+  const [notes, setNotes] = useState(initial);
+  const findPeople = async (q) =>
+    team.filter((p) => p.name.toLowerCase().includes(q.toLowerCase())).map((p) => ({ id: p.id, label: p.name }));
+
+  async function add(doc) {
+    const res = await insertRow({
+      source: "public.deal_notes",
+      values: { deal_id: deal.id, author_id: me.id, body: doc, body_text: docToText(doc) },
+    });
+    if (!res.ok) return res;
+    setNotes((n) => [{ id: res.id, author: me, body: doc, createdAt: new Date() }, ...n]);
+    return { ok: true };
+  }
+
+  async function edit(note, doc) {
+    const updatedAt = new Date();
+    const res = await updateRow({ source: "public.deal_notes", id: note.id, patch: { body: doc, body_text: docToText(doc), updated_at: updatedAt } });
+    if (res.ok) setNotes((n) => n.map((x) => (x.id === note.id ? { ...x, body: doc, updatedAt } : x)));
+    return res;
+  }
+
+  async function remove(note) {
+    const res = await deleteRow({ source: "public.deal_notes", id: note.id });
+    if (res.ok) setNotes((n) => n.filter((x) => x.id !== note.id));
+    return res;
+  }
+
+  return <RecordNotes notes={notes} me={me} onAdd={add} onEdit={edit} onDelete={remove} mentions={findPeople} />;
+}
+```
+
+Beside the form, on a record page:
+
+```jsx
+<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_24rem]">
+  <RecordForm … />
+  <DealNotes … />
+</div>
+```
+
+## What it will not do
+
+- Pin, tag, react to or reply under a note: a note is a dated entry, not
+  a thread (`comment-box` for a discussion).
+- Log activity by itself (emails sent, stage changes): pass those in as
+  notes if you want them in the list, with no `onEdit`/`onDelete` rights.
+- Page or search the notes: it draws what it is given, sorted. Load the
+  latest few dozen and a "Show older" of your own.
+- Collaborate live: two people editing one note is last-write-wins.
+- Notify anyone mentioned: read `docMentions(doc)` in `onAdd` and send it
+  yourself.
+
+A notes panel it cannot be is your own component in `components/`,
+built from `comment-box`'s `CommentComposer`, `CommentBody` and
+`CommentTime` — not an edit to this block. Its files are fixed: `npm run
+check` refuses a change, and `makersclaw add record-notes` restores them.

package/registry/blocks/record-notes/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "record-notes",
+  "title": "RecordNotes",
+  "description": "Dated rich-text notes on one record (a deal, a contact, a company), to sit beside record-form: a composer with @mentions and Cmd/Ctrl+Enter adds a note; the notes follow newest first (or oldest), grouped by day, each with author avatar, name and relative time; your own notes edit in place and delete after a confirm. Every save is an async callback answering { ok }; a failure keeps the words and says why where it happened.",
+  "useWhen": "A record page keeps a running log of notes: call notes on a deal, context on a contact, a history on a customer or a candidate. Not a discussion thread without edit and delete (comment-box), not one long document per record (doc-editor or doc-page), not an automatic activity feed.",
+  "tags": ["notes", "record", "deal", "contact", "crm", "log", "history", "comment", "mention", "rich text", "blocknote", "edit", "delete"],
+  "exports": ["RecordNotes"],
+  "files": ["index.js", "record-notes.jsx"],
+  "requires": ["comment-box", "doc-editor"]
+}