makersclaw 0.2.0 → 0.3.1

package/registry/blocks/chat/text.jsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+import { IconButton, cx } from "../../ui";
+
+// ChatText — a message's words, drawn safely. No HTML is ever parsed and
+// no markdown library is loaded: the text is split by hand and every piece
+// is a React text node, so "<script>" in a message is shown, not run.
+//
+// What it understands, and nothing more:
+//   ```lang … ```   a code block (an unclosed fence runs to the end, so a
+//                    block that is still streaming already looks like one)
+//   `code`          a code span
+//   **bold**        strong text
+//   line breaks     kept as they were typed
+// Links, headings, lists and tables stay plain text.
+
+const FENCE = /```([^\n`]*)\n?([\s\S]*?)(?:```|$)/g;
+const INLINE = /(`[^`\n]+`|\*\*[^*\n]+\*\*)/g;
+
+function blocks(text) {
+  const out = [];
+  let last = 0;
+  for (const m of text.matchAll(FENCE)) {
+    // A block stands on its own line: the newline on either side of it is
+    // the block's, not the text's.
+    if (m.index > last) out.push({ type: "text", body: text.slice(last, m.index).replace(/\n$/, "") });
+    out.push({ type: "code", lang: m[1].trim(), body: m[2].replace(/\n$/, "") });
+    last = m.index + m[0].length;
+    if (text[last] === "\n") last += 1;
+  }
+  if (last < text.length) out.push({ type: "text", body: text.slice(last) });
+  return out;
+}
+
+function Inline({ text, tone }) {
+  return text.split(INLINE).map((piece, i) => {
+    if (piece.length > 2 && piece.startsWith("`") && piece.endsWith("`")) {
+      return (
+        <code
+          key={i}
+          className={cx("rounded-sm px-1 py-0.5 font-mono text-[0.9em]", tone === "primary" ? "bg-primary-foreground/15" : "bg-muted")}
+        >
+          {piece.slice(1, -1)}
+        </code>
+      );
+    }
+    if (piece.length > 4 && piece.startsWith("**") && piece.endsWith("**")) {
+      return (
+        <strong key={i} className="font-semibold">
+          {piece.slice(2, -2)}
+        </strong>
+      );
+    }
+    return piece;
+  });
+}
+
+function CodeBlock({ lang, body }) {
+  const [copied, setCopied] = useState(false);
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(body);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // No clipboard (an insecure origin): the code is still selectable.
+    }
+  }
+  return (
+    <div className="my-2 min-w-0 overflow-hidden rounded-md border border-border bg-muted text-foreground first:mt-0 last:mb-0">
+      <div className="flex min-h-9 items-center justify-between gap-2 border-b border-border pl-3">
+        <span className="truncate font-mono text-xs text-muted-foreground">{lang || "code"}</span>
+        <IconButton icon={copied ? "check" : "copy"} label={copied ? "Copied" : "Copy code"} size="sm" onClick={copy} />
+      </div>
+      <pre className="overflow-x-auto p-3 font-mono text-xs leading-relaxed">
+        <code>{body}</code>
+      </pre>
+    </div>
+  );
+}
+
+/** The words of one message. `tone` is "primary" inside a user bubble;
+ *  `trailing` sits inline after the last word (a streaming caret). */
+export function ChatText({ text, tone, trailing, className }) {
+  const value = String(text ?? "");
+  const parts = blocks(value);
+  const end = parts.length - 1;
+  return (
+    <div className={cx("min-w-0 whitespace-pre-wrap [overflow-wrap:anywhere]", className)}>
+      {parts.map((b, i) =>
+        b.type === "code" ? (
+          <CodeBlock key={i} lang={b.lang} body={b.body} />
+        ) : (
+          <span key={i}>
+            <Inline text={b.body} tone={tone} />
+            {i === end ? trailing : null}
+          </span>
+        ),
+      )}
+      {parts[end]?.type === "text" ? null : trailing}
+    </div>
+  );
+}

package/registry/blocks/code-editor/README.md

@@ -0,0 +1,210 @@
+# CodeEditor
+
+A code editor in the workspace theme. Three modes: **SQL** (keywords,
+functions, and your database's tables and columns in autocomplete),
+**JSON** (checked as you type; mistakes are underlined and said in plain
+words — "A comma is missing before this", "Keys need double quotes") and
+**plain text**. Line numbers, find and replace (Cmd/Ctrl+F), folding in
+JSON, multiple cursors, and a run hook: Cmd/Ctrl+Enter runs the selection,
+or the SQL statement under the cursor. A quiet status line under the text
+shows problems (click to jump to the next one), the cursor's line and
+column, the mode and — when there is a run hook — a Run button, which is
+how a phone runs.
+
+It is [CodeMirror 6](https://codemirror.net) (MIT) underneath. Every
+colour is a workspace token read by the browser (`var(--color-…)`), so a
+change of theme or of light/dark repaints it with no work. Syntax colours
+come from the chart hues: keywords `chart-1` (the primary), text in
+quotes `chart-2`, numbers and true/false/null `chart-3`, functions
+`chart-4`, columns, keys and types `chart-5`; comments step back into
+`muted-foreground`. `json-editor` and `sql-console` are built on this
+block: they import it, never `@codemirror/*`.
+
+```jsx
+import { CodeEditor, useCodeEditor } from "../components/blocks/code-editor";   // a Makersclaw app ("./blocks/code-editor" from components/)
+import { CodeEditor, useCodeEditor } from "@/components/makersclaw/blocks/code-editor";   // a shadcn project
+```
+
+`CodeEditor` is a client component: render it from a `"use client"`
+component. The helpers (`splitStatements`, `statementAt`, `checkJson`,
+`formatJson`…) are plain functions and work on the server too.
+
+`makersclaw add code-editor` adds the CodeMirror packages
+(`@codemirror/state`, `view`, `commands`, `language`, `autocomplete`,
+`search`, `lint`, `lang-sql`, `lang-json`, and `@lezer/highlight` — pinned,
+exact) to package.json: run `npm install` after. They load with the page
+(no `import()`): the editor is created after the first render, and until
+then — on the server — the box shows the text with its line numbers.
+
+## Props
+
+- `value` — the text, controlled. A new `value` that is not the editor's
+  text replaces it (loading another query); pass back exactly what
+  `onChange` gave you and nothing resets, the cursor included.
+- `defaultValue` — the starting text, uncontrolled. With neither, empty.
+- `onChange(text)` — every edit, with the whole text. Debounce a save
+  yourself.
+- `language` — `"text"` (default) · `"sql"` · `"json"`.
+- `dialect` — SQL only: `"postgres"` (default) · `"mysql"` · `"mariadb"` ·
+  `"sqlite"` · `"mssql"` · `"standard"`. Sets keywords, functions and
+  quoting (and whether `\'` escapes a quote when finding the statement to
+  run: MySQL and MariaDB only).
+- `schema` — SQL only: the tables autocomplete offers.
+  `[{ name, schema?, description?, columns: [{ name, type?, description?,
+  primaryKey? } | "name"] }]`. A table completes with its column count
+  beside it and its description in a side note; `deals.` offers its
+  columns with their types (`uuid · key`); in a query that names a table,
+  its columns complete bare. Tables with a `schema` nest under it
+  (`auth.users`); `defaultSchema` (e.g. `"public"`) lets that schema's
+  tables complete without the prefix. Change it and autocomplete follows.
+- `completions` — extra words to complete in any mode: strings, or
+  `{ label, type?, detail?, info?, apply? }` (`type` picks the little icon:
+  `"variable"`, `"function"`, `"keyword"`, `"property"`, `"type"`).
+  Saved snippets, `{{variables}}`, function names.
+- `onRun({ text, statement, from, to, selection, all })` — Cmd/Ctrl+Enter
+  and the Run button. `statement` is what to run: the selection when there
+  is one; else, in SQL, the statement under the cursor (split on `;` —
+  quotes, comments and `$$` bodies respected; a cursor just after a `;`
+  runs the statement before it); else the whole text. Shift+Cmd/Ctrl+Enter
+  runs everything (`all: true`). `from`/`to` are its offsets in `text`, so
+  a caller can map an error position back. The range lights up for a
+  moment. Without `onRun` there is no Run button and the keys do nothing.
+- `runLabel` — the button's word, default `"Run"` (`"Run query"`,
+  `"Send"`).
+- `onSave(text)` — Cmd/Ctrl+S (the browser's save dialog is held back).
+  Without it the keys are the browser's.
+- `diagnostics` — problems found outside the editor (a database error, a
+  server-side check), drawn on the text: `[{ message, severity?, …where }]`
+  where "where" is `{ from, to }` offsets, `{ line, col?, endLine?,
+  endCol? }` (1-based; no `col` underlines the whole line) or
+  `{ position }` (a 1-based character position, as Postgres reports
+  `error.position`). `severity` is `"error"` (default), `"warning"` or
+  `"info"`. They belong to the text they were found in: **they show until
+  the text changes**, then clear themselves. Pass `[]` to clear sooner.
+- `lint(text) → problems` — a check of your own, run 300ms after typing
+  stops; same shape as `diagnostics`; may be async.
+- `validate` — JSON only: `true` (default) checks the text as you type.
+- `readOnly` — `false` (default). `true` shows the text read-only: it can
+  still be selected, searched and copied.
+- `lineNumbers` — `true` (default).
+- `wrap` — `false` (default): long lines scroll sideways. `true` wraps.
+- `placeholder` — shown while the text is empty: say what goes here
+  ("Write a query — try SELECT * FROM deals").
+- `height` — a fixed height (px number or CSS length); the text scrolls
+  inside. Without it the editor grows with its text from `minHeight`
+  (120) to `maxHeight` (480), then scrolls.
+- `tabSize` — `2` (default). Tab indents; **Esc then Tab** leaves the
+  editor, so it never traps the keyboard.
+- `autoFocus` — `false` (default).
+- `footer` — `true` (default) shows the status line. `false` hides it
+  (a block that draws its own).
+- `frameless` — `false` (default). `true` drops the border and card fill,
+  for an editor inside a panel that already has them.
+- `label` — what a screen reader calls the editor (default: the mode's
+  name).
+- `editorRef` — a ref from `useCodeEditor()`; `.current` is the handle.
+- `className` — the frame's classes (a width, a margin, `h-full`).
+
+### The handle
+
+`const ed = useCodeEditor()`, `<CodeEditor editorRef={ed} />`, then:
+
+- `ed.current.getValue()` / `setValue(text)`
+- `getSelection()` → `{ from, to, text }` · `select(from, to?)` ·
+  `replaceSelection(text)` · `insert(text)` (at the cursor, then focus)
+- `goTo(line, col?)` — move the cursor there, scroll, focus (a results
+  panel's "show me the error")
+- `cursor()` → `{ line, col }`
+- `statementAtCursor()` → `{ from, to, text }` or null
+- `run(all?)` — as the keys; `format()` — JSON only, lays it out again
+  (also Shift+Alt+F)
+- `focus()`; `view` — the CodeMirror view, for the rare thing no prop does
+
+### Keys
+
+Cmd/Ctrl+Enter run · Shift+Cmd/Ctrl+Enter run all · Cmd/Ctrl+S save ·
+Cmd/Ctrl+F find · Cmd/Ctrl+Z / Shift+Cmd/Ctrl+Z undo/redo ·
+Ctrl+Space complete · Cmd/Ctrl+/ comment · Alt+drag a column ·
+Shift+Alt+F format JSON · Esc, Tab leave the editor.
+
+## The helpers
+
+Plain functions, on the server too.
+
+- `splitStatements(sql, { backslash? })` → `[{ from, to, text }]` — the
+  statements in a script, trimmed, without their `;`. Comment-only
+  stretches are not statements.
+- `statementAt(sql, pos, { backslash? })` → the statement to run for a
+  cursor at `pos`, or null.
+- `sqlNamespace(tables)` → `{ namespace, tables }` — the `schema` prop as
+  the SQL mode reads it (you do not need it to use the editor).
+- `checkJson(text, { allowEmpty? })` → `{ ok: true, value }` or
+  `{ ok: false, error: { message, from, to, line, col } }` — the same
+  words in every browser.
+- `formatJson(text, { indent = 2, width = 80 })` → the text laid out
+  again, keys, order and numbers exactly as written (`indent: 0`
+  minifies); null when it is not valid JSON.
+- `stringifyJson(value)` → a value as 2-space JSON, short lists on one
+  line.
+- `lineCol(text, offset)`, `offsetOf(text, line, col)`,
+  `normalizeDiagnostics(text, problems)` — positions both ways.
+
+## Example
+
+```jsx
+"use client";
+import { useState } from "react";
+import { CodeEditor, useCodeEditor } from "../components/blocks/code-editor";
+
+const TABLES = [
+  { name: "deals", description: "Every open and closed deal", columns: [
+    { name: "id", type: "uuid", primaryKey: true },
+    { name: "account_id", type: "uuid" },
+    { name: "amount", type: "numeric" },
+    { name: "stage", type: "text", description: "lead · qualified · proposal · won · lost" },
+    { name: "closed_at", type: "timestamptz" },
+  ] },
+  { name: "accounts", columns: [{ name: "id", type: "uuid", primaryKey: true }, { name: "name", type: "text" }] },
+];
+
+export function QueryBox({ runQuery }) {
+  const [sql, setSql] = useState("SELECT stage, sum(amount)\nFROM deals\nGROUP BY stage;");
+  const [problems, setProblems] = useState([]);
+  const ed = useCodeEditor();
+
+  async function run({ statement, from }) {
+    const r = await runQuery(statement);              // your server action: { ok, rows } or { ok: false, error, position }
+    if (r.ok) setProblems([]);
+    else setProblems([{ position: from + (r.position ?? 1), message: r.error }]);
+  }
+
+  return (
+    <CodeEditor
+      language="sql"
+      schema={TABLES}
+      value={sql}
+      onChange={setSql}
+      onRun={run}
+      diagnostics={problems}
+      placeholder="Write a query — try SELECT * FROM deals"
+      editorRef={ed}
+    />
+  );
+}
+```
+
+JSON, read-only, fixed height:
+
+```jsx
+<CodeEditor language="json" value={JSON.stringify(payload, null, 2)} readOnly height={240} />
+```
+
+## What it will not do
+
+- It is not an IDE: no language server, no go-to-definition, no type
+  checking. SQL is checked by running it (hand the database's error back
+  through `diagnostics`); JSON is checked here.
+- Modes are SQL, JSON and plain text. Another language is another mode
+  in this block, not a package a screen imports.
+- It never runs anything: `onRun` hands you the statement.
+- No live collaboration (that needs a sync server).

package/registry/blocks/code-editor/block.json

@@ -0,0 +1,22 @@
+{
+  "name": "code-editor",
+  "title": "CodeEditor",
+  "description": "A code editor (CodeMirror 6) in the workspace theme: SQL with the database's tables and columns in autocomplete, JSON checked as you type with plain-words errors, or plain text; line numbers, problems underlined in the text with a dot in the gutter, find and replace, folding, and a run hook on Cmd/Ctrl+Enter that runs the selection or the statement under the cursor. A quiet status line shows problems, the cursor, the mode and a Run button. Helpers split SQL into statements and check or format JSON anywhere, the server included.",
+  "useWhen": "A screen edits code or structured text: a SQL console, a query in a report, a JSON config or payload, a webhook body, a template, a script. json-editor and sql-console are built on it. Not for prose (doc-editor), one line of text (the kit's Input), or showing a diagram (diagram).",
+  "tags": ["code", "editor", "codemirror", "sql", "query", "json", "syntax highlighting", "autocomplete", "lint", "monospace", "console", "script", "config"],
+  "exports": ["CodeEditor", "useCodeEditor", "LANGUAGES", "SQL_DIALECTS", "splitStatements", "statementAt", "sqlNamespace", "checkJson", "formatJson", "stringifyJson", "lineCol", "offsetOf", "normalizeDiagnostics"],
+  "files": ["index.js", "code-editor.jsx", "codemirror.js", "theme.js", "sql.js", "json.js", "text.js"],
+  "requires": [],
+  "dependencies": {
+    "@codemirror/state": "6.7.6",
+    "@codemirror/view": "6.43.13",
+    "@codemirror/commands": "6.11.1",
+    "@codemirror/language": "6.12.4",
+    "@codemirror/autocomplete": "6.20.3",
+    "@codemirror/search": "6.7.2",
+    "@codemirror/lint": "6.9.7",
+    "@codemirror/lang-sql": "6.10.0",
+    "@codemirror/lang-json": "6.0.2",
+    "@lezer/highlight": "1.2.3"
+  }
+}