makersclaw 0.2.0 → 0.3.0

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

@@ -0,0 +1,116 @@
+"use client";
+
+// SearchDialog over an assistant's history — the gallery's and the smoke
+// test's surface. Not installed into apps: `makersclaw add search-dialog`
+// lays index.js and search-dialog.jsx only. Press ⌘K (Ctrl+K) anywhere on
+// the page, or the button. "Server search" answers through onSearch after
+// a delay; turn on "Fail the server" to see the error.
+import { useState } from "react";
+import { Button, Field, Kbd, Select, Switch } from "../components/ui";
+import { SearchDialog, SearchPanel } from "../components/blocks/search-dialog";
+
+const LAST_OPENED = [
+  { id: "c1", kind: "chat", title: "Harbour St. lease renewal", snippet: "Counter at 4% over three years, and ask for the fit-out credit back.", date: "Today" },
+  { id: "c2", kind: "chat", title: "Supplier emails for the spring range", snippet: "Two follow-ups a week apart, then call the account manager.", date: "Today" },
+];
+
+const RECENT = [
+  { id: "c3", kind: "chat", title: "Weekly cash position", snippet: "Runway is 14 months at the current burn; payroll moves to the 25th.", date: "Yesterday" },
+  { id: "c4", kind: "chat", title: "Why did March refunds spike", snippet: "Most refunds trace back to the courier switch in week two.", date: "Yesterday" },
+  { id: "c5", kind: "chat", title: "Draft the hiring post for a bookkeeper", snippet: "Part-time, remote, Xero experience; lead with the four-day week.", date: "Sep 18" },
+  { id: "c6", kind: "chat", title: "Compare three courier quotes", snippet: "Parcelwise is cheapest under 2 kg; Northline wins on next-day.", date: "Sep 15" },
+  { id: "c7", kind: "chat", title: "Board update outline", snippet: "Revenue, cash, the two hires, and the one risk: the lease.", date: "Sep 11" },
+];
+
+const IMAGES = [
+  { id: "i1", kind: "image", title: "spring-range-lookbook.jpg", snippet: "Image", date: "Sep 19" },
+  { id: "i2", kind: "image", title: "shopfront-new-signage.png", snippet: "Image", date: "Sep 12" },
+  { id: "i3", kind: "image", title: "packaging-mockup-v3.png", snippet: "Image", date: "Sep 3" },
+];
+
+const DOCS = [
+  { id: "d1", kind: "document", title: "Harbour St. lease — draft 2.pdf", snippet: "PDF", date: "Sep 20" },
+  { id: "d2", kind: "document", title: "Q3 cash flow.xlsx", snippet: "Spreadsheet", date: "Sep 17", icon: "chart" },
+  { id: "d3", kind: "document", title: "Courier contract — Parcelwise.docx", snippet: "Document", date: "Sep 9" },
+  { id: "d4", kind: "document", title: "Brand assets.zip", snippet: "Archive", date: "Aug 30", icon: "archive" },
+];
+
+const PROJECTS = [
+  { id: "p1", kind: "project", title: "Spring range launch", snippet: "Project · 12 chats", date: "Sep 21" },
+  { id: "p2", kind: "project", title: "Second shop — Harbour St.", snippet: "Project · 7 chats", date: "Sep 20" },
+  { id: "p3", kind: "project", title: "Courier switch", snippet: "Project · 4 chats", date: "Aug 28" },
+];
+
+const ALL = [...LAST_OPENED, ...RECENT, ...IMAGES, ...DOCS, ...PROJECTS];
+const SECTIONS = [
+  { heading: "Last opened", results: LAST_OPENED },
+  { heading: "Recent chats", results: RECENT },
+];
+
+const VARIANTS = [
+  { key: "local", label: "Your list, searched in the browser" },
+  { key: "server", label: "Server search (onSearch)" },
+  { key: "plain", label: "No sections, one kind" },
+];
+
+const wait = (ms, signal) =>
+  new Promise((resolve, reject) => {
+    const t = setTimeout(resolve, ms);
+    signal?.addEventListener("abort", () => {
+      clearTimeout(t);
+      reject(new Error("aborted"));
+    });
+  });
+
+export default function SearchDialogDemo() {
+  const [key, setKey] = useState("local");
+  const [open, setOpen] = useState(false);
+  const [fail, setFail] = useState(false);
+  const [picked, setPicked] = useState(null);
+
+  async function onSearch(query, { signal }) {
+    await wait(500, signal);
+    if (fail) throw new Error("The search service did not answer.");
+    const q = query.toLowerCase();
+    return ALL.filter((r) => `${r.title} ${r.snippet}`.toLowerCase().includes(q));
+  }
+
+  const props =
+    key === "server"
+      ? { sections: SECTIONS, onSearch, placeholder: "Search chats, images, documents and projects…" }
+      : key === "plain"
+        ? { results: PROJECTS, placeholder: "Search projects…", hint: "Type a project's name." }
+        : { results: ALL, sections: SECTIONS, placeholder: "Search chats, images, documents and projects…" };
+
+  const onSelect = (r) => setPicked(`${r.kind} · ${r.title}`);
+
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-end gap-x-6 gap-y-2">
+        <Field id="search-variant" label="Variant" className="w-full sm:w-80">
+          <Select id="search-variant" value={key} onChange={(e) => setKey(e.target.value)} options={VARIANTS.map((v) => ({ value: v.key, label: v.label }))} />
+        </Field>
+        {key === "server" ? <Switch id="search-fail" label="Fail the server" checked={fail} onChange={(e) => setFail(e.target.checked)} /> : null}
+      </div>
+
+      <div>
+        <Button variant="secondary" icon="search" onClick={() => setOpen(true)} aria-keyshortcuts="Meta+K Control+K" align="start" className="w-full sm:w-72">
+          <span className="flex-1 text-left text-muted-foreground">Search…</span>
+          <span className="hidden md:inline-flex" aria-hidden="true">
+            <Kbd>⌘</Kbd>
+            <Kbd>K</Kbd>
+          </span>
+        </Button>
+      </div>
+
+      <SearchDialog key={key} open={open} onOpenChange={setOpen} hotkey="k" label="Global search" onSelect={onSelect} {...props} />
+
+      {/* The same box inline, so the page shows it without opening the dialog. */}
+      <SearchPanel key={`inline-${key}`} label="Search, inline" onSelect={onSelect} className="max-w-xl" {...props} />
+
+      <p className="min-h-5 text-xs text-muted-foreground" aria-live="polite">
+        {picked ? `Opened — ${picked}` : "Pick a result to see what onSelect receives."}
+      </p>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,235 @@
+"use client";
+
+import { isValidElement, useEffect, useMemo, useRef, useState } from "react";
+import { Command, IconButton, Image, Sheet, ToggleGroup, commandScore, cx } from "../../ui";
+
+// SearchDialog — one ⌘K box over every kind of record: chats, documents,
+// images, projects, people. Before anything is typed it shows your
+// sections ("Last opened", "Recent"); while typing, the matches with the
+// typed text marked, and kind chips (All, Chats, Images…) to narrow them.
+// Built on the kit's Command (the list, keys and ARIA) inside the kit's
+// Sheet. SearchPanel is the same box inline. See README.md beside this file.
+
+const KINDS = {
+  chat: { label: "Chats", icon: "message-circle" },
+  document: { label: "Documents", icon: "file" },
+  image: { label: "Images", icon: "image" },
+  project: { label: "Projects", icon: "folder" },
+  person: { label: "People", icon: "user" },
+  company: { label: "Companies", icon: "building" },
+  task: { label: "Tasks", icon: "circle-check" },
+  page: { label: "Pages", icon: "file" },
+};
+
+const cap = (s) => String(s).charAt(0).toUpperCase() + String(s).slice(1);
+
+function kindOf(kinds, value) {
+  return kinds.find((k) => k.value === value) ?? { value, label: KINDS[value]?.label ?? cap(value), icon: KINDS[value]?.icon ?? "file" };
+}
+
+/** The typed text marked inside `text`, once, ignoring case. */
+function Marked({ text, needle }) {
+  const s = String(text ?? "");
+  const at = needle ? s.toLowerCase().indexOf(needle) : -1;
+  if (at < 0) return s;
+  return (
+    <>
+      {s.slice(0, at)}
+      <mark className="rounded-sm bg-transparent font-semibold text-foreground underline decoration-primary decoration-2 underline-offset-2">{s.slice(at, at + needle.length)}</mark>
+      {s.slice(at + needle.length)}
+    </>
+  );
+}
+
+function Thumb({ thumb, title }) {
+  if (isValidElement(thumb)) return <span className="flex size-8 shrink-0 overflow-hidden rounded-sm">{thumb}</span>;
+  return <Image src={thumb || undefined} alt="" ratio="square" rounded="sm" className="size-8 shrink-0" title={title} />;
+}
+
+// The best of a result's fields against the query, 0 when none match.
+function score(r, q) {
+  return Math.max(commandScore(r.title, q), r.snippet ? commandScore(r.snippet, q) * 0.7 : 0, ...(r.keywords ?? []).map((k) => commandScore(k, q) * 0.9));
+}
+
+/** A server search: debounced, the older query aborted, failures kept. */
+function useServerSearch(onSearch, query) {
+  const fn = useRef(onSearch);
+  fn.current = onSearch;
+  const on = Boolean(onSearch) && Boolean(query);
+  const [state, setState] = useState({ items: null, loading: false, error: null, query: "" });
+  useEffect(() => {
+    if (!on) return;
+    const ctl = new AbortController();
+    setState((s) => ({ ...s, loading: true, error: null }));
+    const timer = setTimeout(async () => {
+      try {
+        const items = await fn.current(query, { signal: ctl.signal });
+        if (!ctl.signal.aborted) setState({ items: items ?? [], loading: false, error: null, query });
+      } catch (error) {
+        if (!ctl.signal.aborted) setState((s) => ({ ...s, loading: false, error }));
+      }
+    }, 200);
+    return () => {
+      clearTimeout(timer);
+      ctl.abort();
+    };
+  }, [on, query]);
+  return state;
+}
+
+export function SearchPanel({
+  results = [],
+  sections,
+  kinds: kindsProp,
+  onSelect,
+  onSearch,
+  loading = false,
+  placeholder = "Search…",
+  label = "Search",
+  hint = "Type to search.",
+  showDate = true,
+  onClose,
+  autoFocus = false,
+  bare = false,
+  className,
+}) {
+  const [query, setQuery] = useState("");
+  const [kind, setKind] = useState("all");
+  const needle = query.trim().toLowerCase();
+  const server = useServerSearch(onSearch, needle);
+
+  // The chips: the kinds given, or every kind the data holds, in order.
+  const kinds = useMemo(() => {
+    if (kindsProp) return kindsProp;
+    const seen = [];
+    for (const r of [...results, ...(sections ?? []).flatMap((s) => s.results ?? [])]) if (r?.kind && !seen.includes(r.kind)) seen.push(r.kind);
+    return seen.map((v) => kindOf([], v));
+  }, [kindsProp, results, sections]);
+
+  const pass = (r) => kind === "all" || r.kind === kind;
+
+  // `at` keeps values unique when one result sits in two sections.
+  const toItem = (r, group, at = "") => {
+    const k = kindOf(kinds, r.kind);
+    const meta = [r.snippet, showDate && needle ? r.date : null].filter(Boolean);
+    return {
+      value: `${at}${r.id}`,
+      label: <Marked text={r.title} needle={needle} />,
+      description: meta.length ? (
+        <>
+          {r.snippet ? <Marked text={r.snippet} needle={needle} /> : null}
+          {meta.length > 1 ? " · " : null}
+          {showDate && needle && r.date ? r.date : null}
+        </>
+      ) : undefined,
+      icon: r.kind === "image" || r.thumb ? <Thumb thumb={r.thumb} title={r.title} /> : r.icon ?? k.icon,
+      group,
+      result: r,
+    };
+  };
+
+  let items;
+  if (!needle) {
+    items = (sections ?? []).flatMap((s, n) => (s.results ?? []).filter(pass).map((r) => toItem(r, s.heading, `${n}:`)));
+  } else if (onSearch) {
+    items = (server.items ?? []).filter(pass).map((r) => toItem(r));
+  } else {
+    items = results
+      .map((r, i) => ({ r, i, s: pass(r) ? score(r, needle) : 0 }))
+      .filter((x) => x.s > 0)
+      .sort((a, b) => b.s - a.s || a.i - b.i)
+      .map((x) => toItem(x.r));
+  }
+
+  const busy = loading || (Boolean(onSearch) && Boolean(needle) && (server.loading || server.query !== needle) && !server.error);
+  const kindLabel = kind === "all" ? "" : ` in ${kindOf(kinds, kind).label.toLowerCase()}`;
+  const empty = server.error && needle
+    ? "Search failed. Check your connection and try again."
+    : needle
+      ? `No results for “${query.trim()}”${kindLabel}.`
+      : kind !== "all" && (sections ?? []).length
+        ? `Nothing recent${kindLabel}. Type to search.`
+        : hint;
+
+  const chips = kinds.length > 1 ? [{ value: "all", label: "All" }, ...kinds.map((k) => ({ value: k.value, label: k.label }))] : null;
+
+  return (
+    <div className={cx("flex min-w-0 flex-col overflow-hidden bg-popover text-popover-foreground", !bare && "rounded-lg border border-border", className)}>
+      <Command
+        bare
+        label={label}
+        placeholder={placeholder}
+        items={items}
+        filter={false}
+        query={query}
+        onQueryChange={setQuery}
+        loading={busy}
+        empty={empty}
+        autoFocus={autoFocus}
+        listClassName="max-h-[min(24rem,55dvh)]"
+        onSelect={(item) => onSelect?.(item.result)}
+      />
+      {chips || onClose ? (
+        <div className="flex items-center gap-2 border-t border-border px-2 py-1.5">
+          {chips ? (
+            <div className="min-w-0 flex-1 overflow-x-auto">
+              <ToggleGroup size="sm" aria-label="Show only" items={chips} value={kind} onChange={setKind} className="w-max" />
+            </div>
+          ) : (
+            <span className="flex-1" />
+          )}
+          {onClose ? <IconButton icon="x" label="Close search" size="sm" onClick={onClose} /> : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/** SearchPanel in the kit's Sheet: a dialog near the top of a wide window,
+ *  a bottom sheet on a phone. `open` + `onOpenChange`, or uncontrolled
+ *  with `defaultOpen`; `hotkey="k"` binds ⌘K / Ctrl+K to open and close
+ *  it. Choosing a result closes it. */
+export function SearchDialog({ open, defaultOpen = false, onOpenChange, hotkey, label = "Search", onSelect, className, ...panel }) {
+  const controlled = open !== undefined;
+  const [own, setOwn] = useState(defaultOpen);
+  const isOpen = controlled ? open : own;
+  const openRef = useRef(isOpen);
+  openRef.current = isOpen;
+  const changeRef = useRef(null);
+  changeRef.current = (next) => {
+    if (next === openRef.current) return;
+    openRef.current = next;
+    if (!controlled) setOwn(next);
+    onOpenChange?.(next);
+  };
+
+  useEffect(() => {
+    if (!hotkey) return;
+    function onKey(e) {
+      if (e.key?.toLowerCase() !== String(hotkey).toLowerCase() || !(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey) return;
+      e.preventDefault();
+      changeRef.current(!openRef.current);
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [hotkey]);
+
+  return (
+    <Sheet bare label={label} open={isOpen} onClose={() => changeRef.current(false)} side="center" className={cx("sm:mt-[12dvh] sm:max-w-xl", className)}>
+      {/* Mounted only while open, so each opening starts empty on "All". */}
+      {isOpen ? (
+        <SearchPanel
+          bare
+          autoFocus
+          label={label}
+          onClose={() => changeRef.current(false)}
+          onSelect={(r) => {
+            changeRef.current(false);
+            onSelect?.(r);
+          }}
+          {...panel}
+        />
+      ) : null}
+    </Sheet>
+  );
+}

package/registry/blocks/settings-list/README.md

@@ -0,0 +1,171 @@
+# SettingsList
+
+A card of settings, one row each: an icon, a label, a description, a few
+meta lines, a badge, and the row's control. Every change saves on its own —
+no Save button. A flipped switch or a new choice shows at once, a spinner
+sits beside it while it saves, and when the save fails the old value comes
+back with the reason and Try again, on that row only. `variant="matrix"`
+is the notification grid: events down the side, channels across the top.
+
+```jsx
+import { SettingsList } from "../components/blocks/settings-list";   // a Makersclaw app ("./blocks/settings-list" from components/)
+import { SettingsList } from "@/components/makersclaw/blocks/settings-list";   // a shadcn project
+```
+
+It is a client component: render it from a `"use client"` component, and
+load the settings in the server surface (README §4).
+
+## The data
+
+A row:
+
+- `key` — unique in the list (required).
+- `label` — what the setting is (required).
+- `description` — a muted line under it.
+- `icon` — a kit `Icon` name in a muted square; or `media`, any node (an
+  Avatar, a logo).
+- `badge` — `"Current"` or `{ label, tone?, hue?, icon? }` beside the label.
+  `tone` for a status ("Recommended", success), `hue` 1–5 for a kind
+  ("Development").
+- `value` — a line saying what is set now ("+44 7700 900 461", "Not set
+  up"); `valueTone: "set"` draws it in full weight with a check.
+- `meta` — small lines under it: strings, or `{ icon, text }` ("globe
+  Lisbon", "clock Active now").
+- `group` — rows with the same group sit under one heading, in the order
+  the groups first appear.
+- `control` — one of:
+  - `{ type: "switch", value: true }` — saves through `onChange(row, bool)`.
+  - `{ type: "select", value, options: [{ value, label }] }` — saves
+    through `onChange(row, value)`.
+  - `{ type: "button", label, icon?, variant?, tone?, confirm? }` — runs
+    `onAction(row, "button")` (or `key` if given).
+  - `{ type: "actions", items: [{ key, label, icon?, tone?, confirm? }],
+    menu? }` — up to two buttons, or a "⋯" menu for three or more (or
+    `menu: true`); runs `onAction(row, item.key)`.
+  - `{ type: "remove", label?, confirm? }` — an × button (sign a device out,
+    disconnect); runs `onAction(row, "remove")`.
+  - none — a row that only says something.
+  `confirm` asks first, with the kit Confirm: `{ title, body?,
+  confirmLabel?, tone?, consequences?, requireText?, acknowledge? }`.
+- `details` — a node, or `(row) => node`, that opens under the row from a
+  chevron button (the connected account, a copyable code). `defaultOpen`
+  starts it open.
+- `disabled` — the control is shown and cannot be used.
+
+The matrix (`variant="matrix"`) rows are events:
+
+- `key`, `label`, `description`, `group` — as above.
+- `values` — `{ email: true, push: false, sms: null }`, one per channel
+  key. `null` (or missing) means the event is not sent on that channel: a
+  dash, not a switch.
+- `locked` — channel keys that cannot be turned off (`["email"]` for a
+  security alert): the switch shows, disabled, with a lock.
+
+## Props
+
+- `rows` — the rows above. Keep them as the saved truth: when a save
+  succeeds, update the row (or let the server revalidate). Until the rows
+  change, the row shows the new value it saved.
+- `onChange(row, value, channel?)` — save a switch or a select (in the
+  matrix, `channel` is the channel key). Return `{ ok: true }` or `{ ok:
+  false, error }`; a throw counts as failed. Without it, switches and
+  selects are shown and cannot be changed. In a Makersclaw app it is one
+  line over `saveSetting` (lib/actions.js):
+  `onChange={(row, value) => saveSetting({ source: "public.settings", key: row.key, value })}`.
+- `onAction(row, actionKey)` — run a button, a menu item or a remove.
+  Return `{ ok }` like `onChange`. Remove the row from `rows` on success
+  when it is gone (a signed-out device).
+- `variant` — `"list"` (default) or `"matrix"`.
+- `channels` — the matrix's columns: `[{ key, label, icon? }]`.
+- `title`, `description`, `icon` — the card's heading; `icon` in a muted
+  square before it.
+- `badge` — a state beside the heading (`{ label: "On", tone: "success",
+  icon: "circle-check" }`).
+- `actions` — nodes at the heading's end ("Add profile").
+- `footer` — a node under the rows (a Notice with a tip).
+- `loading` — skeleton rows.
+- `error` — the settings could not be loaded: a Notice in place of the
+  rows; `onRetry` adds "Try again".
+- `emptyTitle` (`"Nothing here yet"`) · `emptyBody` · `emptyAction` —
+  shown when `rows` is empty.
+- `disabled` — every control shown and none usable.
+- `failedText` — the reason shown when a save fails without an `error`.
+- `className` — layout around it (width, margin). Never colour.
+
+## Example
+
+```jsx
+// components/Preferences.jsx — client
+"use client";
+import { saveSetting } from "../lib/actions";
+import { SettingsList } from "./blocks/settings-list";
+
+export default function Preferences({ settings }) {
+  const rows = [
+    { key: "digest", icon: "mail", label: "Weekly digest", description: "Every Monday at 8:00.", control: { type: "switch", value: settings.digest === true } },
+    {
+      key: "currency",
+      icon: "dollar",
+      label: "Currency",
+      control: { type: "select", value: settings.currency ?? "usd", options: [{ value: "usd", label: "US dollar" }, { value: "eur", label: "Euro" }] },
+    },
+  ];
+  return (
+    <SettingsList
+      title="Preferences"
+      rows={rows}
+      onChange={(row, value) => saveSetting({ source: "public.settings", key: row.key, value })}
+    />
+  );
+}
+```
+
+Notifications per channel:
+
+```jsx
+<SettingsList
+  variant="matrix"
+  title="Notifications"
+  channels={[{ key: "email", label: "Email", icon: "mail" }, { key: "push", label: "Push", icon: "smartphone" }]}
+  rows={[
+    { key: "mentions", group: "Conversations", label: "Mentions", values: { email: true, push: true } },
+    { key: "signin", group: "Security", label: "New sign-in", values: { email: true, push: false }, locked: ["email"] },
+  ]}
+  onChange={(row, on, channel) => saveSetting({ mode: "json", source: "public.members", column: "notify", id: me.id, key: `${row.key}.${channel}`, value: on })}
+/>
+```
+
+Signed-in devices, each with sign-out:
+
+```jsx
+<SettingsList
+  icon="shield-check"
+  title="Signed-in devices"
+  rows={sessions.map((s) => ({
+    key: s.id,
+    icon: s.kind === "phone" ? "smartphone" : "laptop",
+    label: s.device,
+    badge: s.current ? { label: "This device", tone: "info" } : null,
+    meta: [{ icon: "globe", text: s.place }, { icon: "clock", text: s.lastSeen }],
+    control: s.current ? null : { type: "remove", label: `Sign out ${s.device}`, confirm: { title: "Sign out this device?", confirmLabel: "Sign out" } },
+  }))}
+  onAction={(row) => deleteRow({ source: "public.sessions", id: row.key })}
+/>
+```
+
+## What it will not do
+
+- Save several settings with one button: that is `record-form`.
+- Open a setup flow: a button's `onAction` is yours — open your `Sheet`
+  from it and return `{ ok: true }`.
+- Scroll the matrix sideways on a phone: under 768px each event's switches
+  stack under it, named by channel.
+
+A settings screen it cannot be is your own component in `components/`,
+built from the kit — not an edit to this block. Its files are fixed: `npm
+run check` refuses a change, and `makersclaw add settings-list` restores
+them.
+
+## Credits
+
+Shapes from Creative Tim UI (https://github.com/creativetimofficial/ui, MIT); this is a rewrite on the Makersclaw kit.

package/registry/blocks/settings-list/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "settings-list",
+  "title": "SettingsList",
+  "description": "A card of settings, one row each — icon, label, description, meta lines, a badge, and its control: a Switch, a Select, a Button, a remove button or a menu of actions, with optional details that open under the row. Every change saves on its own through an async callback; the row shows the new value at once, a spinner while it saves, and on failure the old value back with the reason and Try again. variant=\"matrix\" is the notification grid: events by group down the side, channels (email, push, SMS) across, a switch per cell, stacked on a phone.",
+  "useWhen": "An account or workspace settings screen where each setting applies the moment it is changed: preferences, two-step sign-in methods, signed-in devices, connected integrations, billing profiles, notification preferences per channel. Not for a form of fields saved together with one button (record-form).",
+  "tags": ["settings", "preferences", "toggle", "switch", "notifications", "channels", "matrix", "security", "sessions", "devices", "integrations", "two-factor", "billing", "account"],
+  "exports": ["SettingsList"],
+  "files": ["index.js", "settings-list.jsx", "settings-matrix.jsx", "row-state.jsx"],
+  "requires": []
+}