tempest-react-sdk 0.29.0 → 0.30.0

package/bin/lib/alias/index.mjs

@@ -7,7 +7,7 @@ import { collectFiles } from "./collect.mjs";
 import { discoverAlias } from "./discover.mjs";
 import { rewriteCss } from "./rewrite-css.mjs";
 import { rewriteSource } from "./rewrite.mjs";
-import { loadTypeScript } from "./typescript.mjs";
+import { loadTypeScript, typeScriptUnavailableReason } from "./typescript.mjs";
 
 export { collectFiles } from "./collect.mjs";
 export { discoverAlias } from "./discover.mjs";
@@ -15,7 +15,7 @@ export { rewriteCss } from "./rewrite-css.mjs";
 export { rewriteSource } from "./rewrite.mjs";
 export { isInsideBase, toAlias } from "./specifier.mjs";
 export { readTsconfig } from "./tsconfig.mjs";
-export { loadTypeScript } from "./typescript.mjs";
+export { describeTypeScript, loadTypeScript, typeScriptUnavailableReason } from "./typescript.mjs";
 
 /**
  * Convert relative imports that climb out of their directory into alias imports.
@@ -42,7 +42,13 @@ export function aliasImports({ root, targets, dryRun = false }) {
     const empty = { files: [], total: 0, errors: [] };
 
     const ts = loadTypeScript(root);
-    if (!ts) return { status: "no-typescript", ...empty };
+    if (!ts) {
+        return {
+            status: "no-typescript",
+            reason: typeScriptUnavailableReason(root),
+            ...empty,
+        };
+    }
 
     const alias = discoverAlias({ root, ts });
     if (!alias) return { status: "no-alias", ...empty };

package/bin/lib/alias/tsconfig.mjs

@@ -6,19 +6,62 @@ import { dirname, isAbsolute, join, resolve } from "node:path";
 
 const MAX_EXTENDS_DEPTH = 16;
 
+/**
+ * Strip the JSONC a tsconfig is allowed to contain: `//` and block comments, and
+ * a trailing comma before `}` or `]`.
+ *
+ * Needed because `ts.readConfigFile` is not always available — TypeScript 7 does
+ * not ship the classic API — and a plain `JSON.parse` chokes on the comments
+ * every Vite-generated tsconfig has. Losing the whole config to a comment would
+ * silently drop the `strict`/`jsx`/`paths` checks.
+ *
+ * Comment markers inside a string are left alone, which matters: `"paths"` and
+ * `"extends"` values legitimately hold `//` (a URL, a Windows share).
+ *
+ * @param {string} text
+ * @returns {string} Plain JSON.
+ */
+export function stripJsonc(text) {
+    let out = "";
+    let i = 0;
+    while (i < text.length) {
+        const ch = text[i];
+        if (ch === '"') {
+            let j = i + 1;
+            while (j < text.length && text[j] !== '"') j += text[j] === "\\" ? 2 : 1;
+            out += text.slice(i, Math.min(j + 1, text.length));
+            i = j + 1;
+            continue;
+        }
+        if (ch === "/" && text[i + 1] === "/") {
+            const end = text.indexOf("\n", i);
+            i = end < 0 ? text.length : end;
+            continue;
+        }
+        if (ch === "/" && text[i + 1] === "*") {
+            const end = text.indexOf("*/", i + 2);
+            i = end < 0 ? text.length : end + 2;
+            continue;
+        }
+        out += ch;
+        i += 1;
+    }
+    return out.replace(/,(\s*[}\]])/g, "$1");
+}
+
 /**
  * Parse one tsconfig file into its raw JSON object.
  *
- * Prefers `ts.readConfigFile`, which accepts the JSONC dialect `tsc` accepts
- * (comments, trailing commas). Falls back to `JSON.parse` so a project without
- * TypeScript installed still gets the previous behavior instead of nothing.
+ * Prefers `ts.readConfigFile`, which accepts the exact dialect `tsc` accepts.
+ * Falls back to a JSONC-tolerant parse so a project without the classic
+ * TypeScript API still gets its config read instead of nothing.
  *
  * @param {string} path - Absolute path to a tsconfig file.
  * @param {object | null} ts - The `typescript` module, or `null`.
  * @returns {object | null} The raw config object, or `null` when unreadable.
  */
 function parseConfigFile(path, ts) {
-    if (ts) {
+    if (ts && typeof ts.readConfigFile === "function") {
         const { config, error } = ts.readConfigFile(path, (p) => {
             try {
                 return readFileSync(p, "utf8");
@@ -29,7 +72,7 @@ function parseConfigFile(path, ts) {
         return error || !config ? null : config;
     }
     try {
-        return JSON.parse(readFileSync(path, "utf8"));
+        return JSON.parse(stripJsonc(readFileSync(path, "utf8")));
     } catch {
         return null;
     }

package/bin/lib/alias/typescript.mjs

@@ -3,6 +3,23 @@
 import { createRequire } from "node:module";
 import { join } from "node:path";
 
+/**
+ * The classic-API members every codemod in this CLI needs.
+ *
+ * TypeScript 7 is the native port: its package still installs under the name
+ * `typescript`, but the `.` export is a version stub — the JS API moved behind
+ * `typescript/unstable/*` with a different shape. So "the module resolved" no
+ * longer implies "the API is there", and calling into it blew up with
+ * `ts.readConfigFile is not a function` — a stack trace out of `tempest doctor`,
+ * which is the command people run first.
+ */
+const REQUIRED_API = ["readConfigFile", "createSourceFile", "forEachChild"];
+
+/** True when the resolved module exposes the classic compiler API. */
+function hasClassicApi(module) {
+    return Boolean(module) && REQUIRED_API.every((name) => typeof module[name] === "function");
+}
+
 /**
  * Load `typescript` from the project's `node_modules`.
  *
@@ -11,13 +28,66 @@ import { join } from "node:path";
  * compiler version than the one that type-checks it would let syntax the app
  * accepts fail here.
  *
+ * Returns `null` both when TypeScript is absent and when the install does not
+ * expose the classic API, because callers treat the two the same way — report it
+ * and leave the source untouched. Use {@link describeTypeScript} to say which of
+ * the two happened.
+ *
  * @param {string} root - Project root, the directory holding `node_modules`.
- * @returns {object | null} The `typescript` module, or `null` when not installed.
+ * @returns {object | null} The `typescript` module, or `null`.
  */
 export function loadTypeScript(root) {
     try {
-        return createRequire(join(root, "package.json"))("typescript");
+        const module = createRequire(join(root, "package.json"))("typescript");
+        return hasClassicApi(module) ? module : null;
     } catch {
         return null;
     }
 }
+
+/**
+ * What the project's TypeScript install is, so a message can say the truth
+ * instead of "not installed" about a package that is right there.
+ *
+ * @param {string} root - Project root.
+ * @returns {{ status: "ok" | "missing" | "api-unavailable", version: string | null }}
+ */
+export function describeTypeScript(root) {
+    let resolve_;
+    try {
+        resolve_ = createRequire(join(root, "package.json"));
+    } catch {
+        return { status: "missing", version: null };
+    }
+    let version = null;
+    try {
+        version = resolve_("typescript/package.json")?.version ?? null;
+    } catch {
+        return { status: "missing", version: null };
+    }
+    try {
+        return {
+            status: hasClassicApi(resolve_("typescript")) ? "ok" : "api-unavailable",
+            version,
+        };
+    } catch {
+        return { status: "api-unavailable", version };
+    }
+}
+
+/**
+ * One line explaining why a codemod cannot run, or `null` when it can.
+ *
+ * @param {string} root - Project root.
+ * @returns {string | null}
+ */
+export function typeScriptUnavailableReason(root) {
+    const { status, version } = describeTypeScript(root);
+    if (status === "ok") return null;
+    if (status === "missing") return "typescript não instalado (npm i -D typescript)";
+    return (
+        `typescript ${version ?? "?"} não expõe a API clássica do compilador — o 7 publica só ` +
+        "`typescript/unstable/*`, com outra forma. Pra usar os codemods, tenha o TypeScript 6 " +
+        "instalado; o resto do comando segue normal"
+    );
+}

package/bin/lib/alias/typescript.test.mjs

@@ -0,0 +1,120 @@
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, join } from "node:path";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { readTsconfig, stripJsonc } from "./tsconfig.mjs";
+import { describeTypeScript, loadTypeScript, typeScriptUnavailableReason } from "./typescript.mjs";
+
+let root;
+
+/** Write a file under the fixture, creating parent directories. */
+function write(rel, text) {
+    const full = join(root, rel);
+    mkdirSync(dirname(full), { recursive: true });
+    writeFileSync(full, text);
+}
+
+/**
+ * Fake an installed `typescript` whose main module exports `exports`.
+ *
+ * TypeScript 7 is exactly this shape: the package resolves, the version is there,
+ * and the classic API is not — it moved to `typescript/unstable/*`.
+ */
+function fakeTypeScript(version, exports) {
+    write(
+        "node_modules/typescript/package.json",
+        JSON.stringify({ name: "typescript", version, main: "index.js" }),
+    );
+    write("node_modules/typescript/index.js", `module.exports = ${exports};`);
+}
+
+beforeEach(() => {
+    root = mkdtempSync(join(tmpdir(), "tempest-ts-"));
+    write("package.json", JSON.stringify({ name: "fixture" }));
+});
+
+afterEach(() => {
+    rmSync(root, { recursive: true, force: true });
+});
+
+describe("loadTypeScript", () => {
+    it("returns null when typescript is not installed", () => {
+        expect(loadTypeScript(root)).toBeNull();
+        expect(describeTypeScript(root)).toEqual({ status: "missing", version: null });
+        expect(typeScriptUnavailableReason(root)).toContain("não instalado");
+    });
+
+    it("returns null for an install without the classic compiler API", () => {
+        fakeTypeScript("7.0.2", '{ version: "7.0.2", versionMajorMinor: "7.0" }');
+        expect(loadTypeScript(root)).toBeNull();
+        expect(describeTypeScript(root)).toEqual({ status: "api-unavailable", version: "7.0.2" });
+        const reason = typeScriptUnavailableReason(root);
+        expect(reason).toContain("7.0.2");
+        expect(reason).toContain("unstable");
+    });
+
+    it("returns the module when the classic API is there", () => {
+        fakeTypeScript(
+            "6.0.3",
+            "{ readConfigFile: () => ({}), createSourceFile: () => ({}), forEachChild: () => {} }",
+        );
+        expect(loadTypeScript(root)).not.toBeNull();
+        expect(describeTypeScript(root)).toEqual({ status: "ok", version: "6.0.3" });
+        expect(typeScriptUnavailableReason(root)).toBeNull();
+    });
+
+    it("treats a partial API as unavailable rather than half-usable", () => {
+        fakeTypeScript("7.1.0", "{ createSourceFile: () => ({}) }");
+        expect(loadTypeScript(root)).toBeNull();
+    });
+});
+
+describe("stripJsonc", () => {
+    it("removes line and block comments", () => {
+        expect(stripJsonc('{ // hi\n "a": 1 /* there */ }')).toBe('{ \n "a": 1  }');
+    });
+
+    it("removes a trailing comma before a close", () => {
+        expect(JSON.parse(stripJsonc('{ "a": [1, 2,], }'))).toEqual({ a: [1, 2] });
+    });
+
+    it("leaves comment markers inside strings alone", () => {
+        expect(JSON.parse(stripJsonc('{ "url": "https://x.dev/a", "p": "a/*b" }'))).toEqual({
+            url: "https://x.dev/a",
+            p: "a/*b",
+        });
+    });
+
+    it("survives an unterminated comment instead of throwing", () => {
+        expect(() => stripJsonc('{ "a": 1 } /* forever')).not.toThrow();
+    });
+});
+
+describe("readTsconfig without the compiler API", () => {
+    it("still reads a tsconfig that has comments and a trailing comma", () => {
+        write(
+            "tsconfig.json",
+            '{\n  // the app\n  "compilerOptions": {\n    "strict": true,\n    "paths": { "@/*": ["./src/*"] },\n  },\n}\n',
+        );
+        const config = readTsconfig({ root, ts: null });
+        expect(config.compilerOptions.strict).toBe(true);
+        expect(config.compilerOptions.paths["@/*"]).toEqual(["./src/*"]);
+    });
+
+    it("follows extends with the fallback parser", () => {
+        write("base.json", '{ "compilerOptions": { "jsx": "react-jsx" } } // base\n');
+        write(
+            "tsconfig.json",
+            '{ "extends": "./base.json", "compilerOptions": { "strict": true } }',
+        );
+        const config = readTsconfig({ root, ts: null });
+        expect(config.compilerOptions).toMatchObject({ jsx: "react-jsx", strict: true });
+    });
+
+    it("ignores a `ts` that cannot read a config file", () => {
+        write("tsconfig.json", '{ "compilerOptions": { "strict": true } }');
+        const config = readTsconfig({ root, ts: { version: "7.0.2" } });
+        expect(config.compilerOptions.strict).toBe(true);
+    });
+});

package/bin/lib/css/extract.mjs

@@ -25,7 +25,7 @@ import { existsSync, readFileSync, writeFileSync } from "node:fs";
 import { join, relative } from "node:path";
 
 import { discoverAlias } from "../alias/discover.mjs";
-import { loadTypeScript } from "../alias/typescript.mjs";
+import { loadTypeScript, typeScriptUnavailableReason } from "../alias/typescript.mjs";
 import { collectSources, indexClassUses, resolveSpecifier } from "./references.mjs";
 import { parseCss } from "./parse.mjs";
 import { declSignature } from "./semantic.mjs";
@@ -192,8 +192,7 @@ export function planExtraction({ analysis, root, target, prefix = "u-" }) {
     if (!ts) {
         return {
             status: "no-typescript",
-            message:
-                "typescript não instalado — a reescrita do TSX precisa do compilador do projeto",
+            message: `a reescrita do TSX precisa do compilador do projeto: ${typeScriptUnavailableReason(root)}`,
             groups: [],
             refusals: [],
         };

package/bin/lib/doctor/doctor.e2e.test.mjs

@@ -155,6 +155,50 @@ describe("tempest doctor — generic findings still surface", () => {
     });
 });
 
+describe("tempest doctor — a project on TypeScript 7", () => {
+    /**
+     * TypeScript 7 is the native port: same package name, and no classic compiler
+     * API — it moved to `typescript/unstable/*`. Before this was detected, `doctor`
+     * died with `ts.readConfigFile is not a function` on any such project, which is
+     * the worst possible failure for the command people run first.
+     */
+    beforeEach(() => {
+        thirdPartyApp();
+        write("node_modules/typescript/package.json", {
+            name: "typescript",
+            version: "7.0.2",
+            main: "index.js",
+        });
+        write(
+            "node_modules/typescript/index.js",
+            'module.exports = { version: "7.0.2", versionMajorMinor: "7.0" };',
+        );
+    });
+
+    it("does not crash, and still reports the tsconfig checks", () => {
+        const { out, code } = doctor();
+        expect(out).not.toContain("is not a function");
+        expect(out).toContain("moduleResolution: bundler");
+        expect(code).toBe(0);
+    });
+
+    it("says the codemods are unavailable, and why", () => {
+        const { out } = doctor();
+        expect(out).toContain("no classic compiler API");
+        expect(out).toContain("every other pass runs");
+    });
+
+    it("reads a tsconfig with comments through the fallback parser", () => {
+        writeFileSync(
+            join(root, "tsconfig.json"),
+            '{\n  // vite default\n  "compilerOptions": { "strict": true, "jsx": "react-jsx", "moduleResolution": "bundler" },\n}\n',
+        );
+        const { out } = doctor();
+        expect(out).toContain("strict mode on");
+        expect(out).not.toContain("strict mode off");
+    });
+});
+
 describe("tempest doctor — stylesheets", () => {
     beforeEach(thirdPartyApp);
 

package/bin/tempest.mjs

@@ -12,7 +12,7 @@ import { mkdir, writeFile } from "node:fs/promises";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { aliasImports } from "./lib/alias/index.mjs";
-import { loadTypeScript } from "./lib/alias/typescript.mjs";
+import { describeTypeScript, loadTypeScript } from "./lib/alias/typescript.mjs";
 import { readTsconfig } from "./lib/alias/tsconfig.mjs";
 import { analyzeCss, applyCssFixes, applyExtraction, planExtraction } from "./lib/css/index.mjs";
 import { checkLucide } from "./lib/doctor/lucide.mjs";
@@ -535,6 +535,21 @@ function doctor() {
     const tsc = readTsconfig({ root: ROOT, ts: loadTypeScript(ROOT) });
     if (tsc) {
         checks.push(["section", "TypeScript"]);
+        /*
+         * TypeScript 7 installs under the same package name and does not ship the
+         * classic compiler API — it lives behind `typescript/unstable/*` with a
+         * different shape. The tsconfig checks below keep working (they fall back to
+         * a JSONC-tolerant parse), but the codemods cannot run, and saying so here is
+         * better than each pass reporting it as if TypeScript were missing.
+         */
+        const tsInstall = describeTypeScript(ROOT);
+        if (tsInstall.status === "api-unavailable") {
+            checks.push([
+                "info",
+                `typescript ${tsInstall.version} has no classic compiler API`,
+                "`tempest fix` skips the alias and --extract-css codemods — they need the TypeScript 6 API; every other pass runs",
+            ]);
+        }
         const co = tsc.compilerOptions;
         // The `@/*` alias is the SDK's convention, not a health property: a project
         // that has not adopted the SDK is not wrong for lacking it.
@@ -855,7 +870,7 @@ function parseFixArgs(args) {
 function reportAlias(result, dryRun) {
     if (result.status === "no-typescript") {
         console.log(
-            `${c.yellow}! typescript not installed — skipping alias pass${c.reset} ${c.dim}(npm i -D typescript)${c.reset}`,
+            `${c.yellow}! alias pass skipped${c.reset} ${c.dim}— ${result.reason ?? "typescript não instalado"}${c.reset}`,
         );
         return;
     }

package/dist/components/Chat/Chat.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("../EmptyState/EmptyState.cjs"),n=require("../VisuallyHidden/VisuallyHidden.cjs"),r=require("./chat-groups.cjs"),i=require("./Chat.module.cjs"),a=require("./ChatComposer.cjs");let o=require("react"),s=require("react/jsx-runtime");var c={sending:`◌`,sent:`✓`,read:`✓✓`,failed:`!`};function l({messages:l,currentUserId:u,onSend:d,onRetry:f,typing:p=[],renderAvatar:m,header:h,emptyState:g,groupWindowMs:_,locale:v=`pt-BR`,now:y,placeholder:b,composerActions:x,composerDisabled:S,onSendError:C,className:w,...T}){let E=r.chatStrings(v),D=r.groupMessages({messages:l,currentUserId:u,windowMs:_}),O=(0,o.useRef)(null),k=(0,o.useRef)(null),A=(0,o.useRef)(!0),j=()=>{let e=k.current;if(!e)return;let t=e.scrollHeight-e.scrollTop-e.clientHeight;A.current=t<48};(0,o.useLayoutEffect)(()=>{let e=k.current;!e||!A.current||(e.scrollTop=e.scrollHeight)},[l,p]),(0,o.useEffect)(()=>{let e=k.current;e&&(e.scrollTop=e.scrollHeight)},[]);let M=r.typingLabel(p,v);return(0,s.jsxs)(`div`,{className:e.cn(i.default.panel,w),...T,children:[h&&(0,s.jsx)(`header`,{className:i.default.header,children:h}),(0,s.jsx)(`div`,{ref:k,className:i.default.thread,onScroll:j,role:`log`,"aria-live":`polite`,"aria-relevant":`additions text`,tabIndex:0,"aria-label":E.thread,children:l.length===0?g??(0,s.jsx)(t.EmptyState,{title:E.empty}):D.map(t=>t.kind===`day`?(0,s.jsx)(`div`,{className:i.default.day,children:(0,s.jsx)(`span`,{className:i.default.dayLabel,children:r.dayLabel(t.date,{locale:v,now:y})})},t.key):(0,s.jsxs)(`div`,{className:e.cn(i.default.run,t.own&&i.default.ownRun),children:[m&&(0,s.jsx)(`div`,{className:i.default.avatar,"aria-hidden":`true`,children:m(t.messages[0])}),(0,s.jsxs)(`div`,{className:i.default.runBody,children:[(0,s.jsx)(`span`,{className:i.default.author,children:t.own?E.you:t.authorName??t.authorId}),(0,s.jsx)(`ul`,{className:i.default.bubbles,children:t.messages.map(a=>(0,s.jsxs)(`li`,{className:i.default.bubbleRow,children:[(0,s.jsxs)(`div`,{className:e.cn(i.default.bubble,t.own&&i.default.ownBubble,a.status===`failed`&&i.default.failedBubble),children:[(0,s.jsx)(`div`,{className:i.default.body,children:a.body}),(0,s.jsxs)(`div`,{className:i.default.meta,children:[(0,s.jsx)(`time`,{dateTime:new Date(a.sentAt).toISOString(),children:r.timeLabel(a.sentAt,v)}),t.own&&a.status&&(0,s.jsxs)(`span`,{className:e.cn(i.default.status,a.status===`failed`&&i.default.statusFailed),title:E[a.status],children:[(0,s.jsx)(`span`,{"aria-hidden":`true`,children:c[a.status]}),(0,s.jsx)(n.VisuallyHidden,{children:E[a.status]})]})]})]}),a.status===`failed`&&f&&(0,s.jsx)(`button`,{type:`button`,className:i.default.retry,onClick:()=>f(a),children:E.retry})]},a.id))})]})]},t.key))}),M&&(0,s.jsx)(`p`,{className:i.default.typing,"aria-live":`polite`,children:M}),d&&(0,s.jsx)(a.ChatComposer,{ref:O,onSend:d,locale:v,placeholder:b,actions:x,disabled:S,onError:C})]})}exports.Chat=l;
+//# sourceMappingURL=Chat.cjs.map

package/dist/components/Chat/Chat.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.cjs","names":[],"sources":["../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport { EmptyState } from \"../EmptyState\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { ChatComposer, type ChatComposerHandle } from \"./ChatComposer\";\nimport {\n    chatStrings,\n    dayLabel,\n    groupMessages,\n    timeLabel,\n    typingLabel,\n    type ChatMessage,\n} from \"./chat-groups\";\nimport styles from \"./Chat.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onSubmit\";\n\nexport interface ChatProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The thread, **oldest first**. Never reordered by the component. */\n    messages: readonly ChatMessage[];\n    /** Author id treated as \"own\" — decides side, colour and status ticks. */\n    currentUserId?: string;\n    /** Renders the composer when given. Receives the trimmed text. */\n    onSend?: (text: string) => void | Promise<void>;\n    /** Enables the retry control on a `\"failed\"` message. */\n    onRetry?: (message: ChatMessage) => void;\n    /** Names currently typing. One, two or a count is phrased for you. */\n    typing?: readonly string[];\n    /** Avatar for the first message of a run — an `<Avatar>`, an `<Icon>`. */\n    renderAvatar?: (message: ChatMessage) => ReactNode;\n    /** Rendered above the thread, inside the panel. */\n    header?: ReactNode;\n    /** Shown when there are no messages. */\n    emptyState?: ReactNode;\n    /** Gap that still keeps consecutive messages in one run. Default 5 min. */\n    groupWindowMs?: number;\n    /** Locale for labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Reference instant for \"Hoje\"/\"Ontem\". Default: now, at render time. */\n    now?: number;\n    /** Placeholder for the composer. */\n    placeholder?: string;\n    /** Extra controls inside the composer, before the send button. */\n    composerActions?: ReactNode;\n    /** Disable the composer — no permission, thread archived, offline. */\n    composerDisabled?: boolean;\n    /** Called when `onSend` rejects. The draft stays in the field either way. */\n    onSendError?: (error: unknown) => void;\n}\n\n/** Status glyph and label for an outgoing message. */\nconst STATUS_GLYPH: Record<NonNullable<ChatMessage[\"status\"]>, string> = {\n    sending: \"◌\",\n    sent: \"✓\",\n    read: \"✓✓\",\n    failed: \"!\",\n};\n\n/**\n * A message thread: grouped by author and by day, own messages on one side, with\n * delivery state, a typing indicator and an optional composer.\n *\n * Presentational and controlled, like the rest of the SDK: it takes a list and\n * emits intent (`onSend`, `onRetry`). Where messages come from — REST, the SDK's\n * `createWebSocket`, an SSE stream — and how an optimistic insert is done stay with\n * the app, because those differ per backend and a component that assumed one would\n * be wrong for most.\n *\n * It works as a comment thread too: that is the same component with\n * `currentUserId` set and no `typing`.\n *\n * @example\n * <Chat\n *     messages={messages}\n *     currentUserId={me.id}\n *     typing={typingNames}\n *     onSend={(text) => send({ text })}\n *     onRetry={(message) => resend(message.id)}\n * />\n */\nexport function Chat({\n    messages,\n    currentUserId,\n    onSend,\n    onRetry,\n    typing = [],\n    renderAvatar,\n    header,\n    emptyState,\n    groupWindowMs,\n    locale = \"pt-BR\",\n    now,\n    placeholder,\n    composerActions,\n    composerDisabled,\n    onSendError,\n    className,\n    ...rest\n}: ChatProps) {\n    const strings = chatStrings(locale);\n    const sections = groupMessages({ messages, currentUserId, windowMs: groupWindowMs });\n    const composer = useRef<ChatComposerHandle | null>(null);\n    const thread = useRef<HTMLDivElement | null>(null);\n    const stuckToBottom = useRef(true);\n\n    /**\n     * Remember whether the reader is at the bottom, before the next batch lands.\n     *\n     * A thread that always scrolls to the newest message yanks somebody out of the\n     * history they were reading, every time anyone types. So the jump only happens\n     * when they were already at the bottom — the same rule every chat app converges\n     * on. The 48px slack covers a partially visible last row.\n     */\n    const trackPosition = (): void => {\n        const node = thread.current;\n        if (!node) return;\n        const distance = node.scrollHeight - node.scrollTop - node.clientHeight;\n        stuckToBottom.current = distance < 48;\n    };\n\n    useLayoutEffect(() => {\n        const node = thread.current;\n        if (!node || !stuckToBottom.current) return;\n        node.scrollTop = node.scrollHeight;\n    }, [messages, typing]);\n\n    useEffect(() => {\n        const node = thread.current;\n        if (!node) return;\n        node.scrollTop = node.scrollHeight;\n        // Mount lands on the newest message; from then on `trackPosition` decides.\n    }, []);\n\n    const typingText = typingLabel(typing, locale);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {header && <header className={styles.header}>{header}</header>}\n\n            <div\n                ref={thread}\n                className={styles.thread}\n                onScroll={trackPosition}\n                role=\"log\"\n                aria-live=\"polite\"\n                aria-relevant=\"additions text\"\n                tabIndex={0}\n                aria-label={strings.thread}\n            >\n                {messages.length === 0\n                    ? (emptyState ?? <EmptyState title={strings.empty} />)\n                    : sections.map((section) =>\n                          section.kind === \"day\" ? (\n                              <div key={section.key} className={styles.day}>\n                                  <span className={styles.dayLabel}>\n                                      {dayLabel(section.date, { locale, now })}\n                                  </span>\n                              </div>\n                          ) : (\n                              <div\n                                  key={section.key}\n                                  className={cn(styles.run, section.own && styles.ownRun)}\n                              >\n                                  {renderAvatar && (\n                                      <div className={styles.avatar} aria-hidden=\"true\">\n                                          {renderAvatar(section.messages[0])}\n                                      </div>\n                                  )}\n                                  <div className={styles.runBody}>\n                                      <span className={styles.author}>\n                                          {section.own\n                                              ? strings.you\n                                              : (section.authorName ?? section.authorId)}\n                                      </span>\n                                      <ul className={styles.bubbles}>\n                                          {section.messages.map((message) => (\n                                              <li key={message.id} className={styles.bubbleRow}>\n                                                  <div\n                                                      className={cn(\n                                                          styles.bubble,\n                                                          section.own && styles.ownBubble,\n                                                          message.status === \"failed\" &&\n                                                              styles.failedBubble,\n                                                      )}\n                                                  >\n                                                      <div className={styles.body}>\n                                                          {message.body}\n                                                      </div>\n                                                      <div className={styles.meta}>\n                                                          <time\n                                                              dateTime={new Date(\n                                                                  message.sentAt,\n                                                              ).toISOString()}\n                                                          >\n                                                              {timeLabel(message.sentAt, locale)}\n                                                          </time>\n                                                          {section.own && message.status && (\n                                                              <span\n                                                                  className={cn(\n                                                                      styles.status,\n                                                                      message.status === \"failed\" &&\n                                                                          styles.statusFailed,\n                                                                  )}\n                                                                  title={strings[message.status]}\n                                                              >\n                                                                  <span aria-hidden=\"true\">\n                                                                      {STATUS_GLYPH[message.status]}\n                                                                  </span>\n                                                                  <VisuallyHidden>\n                                                                      {strings[message.status]}\n                                                                  </VisuallyHidden>\n                                                              </span>\n                                                          )}\n                                                      </div>\n                                                  </div>\n                                                  {message.status === \"failed\" && onRetry && (\n                                                      <button\n                                                          type=\"button\"\n                                                          className={styles.retry}\n                                                          onClick={() => onRetry(message)}\n                                                      >\n                                                          {strings.retry}\n                                                      </button>\n                                                  )}\n                                              </li>\n                                          ))}\n                                      </ul>\n                                  </div>\n                              </div>\n                          ),\n                      )}\n            </div>\n\n            {typingText && (\n                <p className={styles.typing} aria-live=\"polite\">\n                    {typingText}\n                </p>\n            )}\n\n            {onSend && (\n                <ChatComposer\n                    ref={composer}\n                    onSend={onSend}\n                    locale={locale}\n                    placeholder={placeholder}\n                    actions={composerActions}\n                    disabled={composerDisabled}\n                    onError={onSendError}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Chat/Chat.js

@@ -0,0 +1,126 @@
+import { cn as e } from "../../utils/cn.js";
+import { EmptyState as t } from "../EmptyState/EmptyState.js";
+import { VisuallyHidden as n } from "../VisuallyHidden/VisuallyHidden.js";
+import { chatStrings as r, dayLabel as i, groupMessages as a, timeLabel as o, typingLabel as s } from "./chat-groups.js";
+import c from "./Chat.module.js";
+import { ChatComposer as l } from "./ChatComposer.js";
+import { useEffect as u, useLayoutEffect as d, useRef as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/Chat/Chat.tsx
+var h = {
+	sending: "◌",
+	sent: "✓",
+	read: "✓✓",
+	failed: "!"
+};
+function g({ messages: g, currentUserId: _, onSend: v, onRetry: y, typing: b = [], renderAvatar: x, header: S, emptyState: C, groupWindowMs: w, locale: T = "pt-BR", now: E, placeholder: D, composerActions: O, composerDisabled: k, onSendError: A, className: j, ...M }) {
+	let N = r(T), P = a({
+		messages: g,
+		currentUserId: _,
+		windowMs: w
+	}), F = f(null), I = f(null), L = f(!0), R = () => {
+		let e = I.current;
+		if (!e) return;
+		let t = e.scrollHeight - e.scrollTop - e.clientHeight;
+		L.current = t < 48;
+	};
+	d(() => {
+		let e = I.current;
+		!e || !L.current || (e.scrollTop = e.scrollHeight);
+	}, [g, b]), u(() => {
+		let e = I.current;
+		e && (e.scrollTop = e.scrollHeight);
+	}, []);
+	let z = s(b, T);
+	return /* @__PURE__ */ m("div", {
+		className: e(c.panel, j),
+		...M,
+		children: [
+			S && /* @__PURE__ */ p("header", {
+				className: c.header,
+				children: S
+			}),
+			/* @__PURE__ */ p("div", {
+				ref: I,
+				className: c.thread,
+				onScroll: R,
+				role: "log",
+				"aria-live": "polite",
+				"aria-relevant": "additions text",
+				tabIndex: 0,
+				"aria-label": N.thread,
+				children: g.length === 0 ? C ?? /* @__PURE__ */ p(t, { title: N.empty }) : P.map((t) => t.kind === "day" ? /* @__PURE__ */ p("div", {
+					className: c.day,
+					children: /* @__PURE__ */ p("span", {
+						className: c.dayLabel,
+						children: i(t.date, {
+							locale: T,
+							now: E
+						})
+					})
+				}, t.key) : /* @__PURE__ */ m("div", {
+					className: e(c.run, t.own && c.ownRun),
+					children: [x && /* @__PURE__ */ p("div", {
+						className: c.avatar,
+						"aria-hidden": "true",
+						children: x(t.messages[0])
+					}), /* @__PURE__ */ m("div", {
+						className: c.runBody,
+						children: [/* @__PURE__ */ p("span", {
+							className: c.author,
+							children: t.own ? N.you : t.authorName ?? t.authorId
+						}), /* @__PURE__ */ p("ul", {
+							className: c.bubbles,
+							children: t.messages.map((r) => /* @__PURE__ */ m("li", {
+								className: c.bubbleRow,
+								children: [/* @__PURE__ */ m("div", {
+									className: e(c.bubble, t.own && c.ownBubble, r.status === "failed" && c.failedBubble),
+									children: [/* @__PURE__ */ p("div", {
+										className: c.body,
+										children: r.body
+									}), /* @__PURE__ */ m("div", {
+										className: c.meta,
+										children: [/* @__PURE__ */ p("time", {
+											dateTime: new Date(r.sentAt).toISOString(),
+											children: o(r.sentAt, T)
+										}), t.own && r.status && /* @__PURE__ */ m("span", {
+											className: e(c.status, r.status === "failed" && c.statusFailed),
+											title: N[r.status],
+											children: [/* @__PURE__ */ p("span", {
+												"aria-hidden": "true",
+												children: h[r.status]
+											}), /* @__PURE__ */ p(n, { children: N[r.status] })]
+										})]
+									})]
+								}), r.status === "failed" && y && /* @__PURE__ */ p("button", {
+									type: "button",
+									className: c.retry,
+									onClick: () => y(r),
+									children: N.retry
+								})]
+							}, r.id))
+						})]
+					})]
+				}, t.key))
+			}),
+			z && /* @__PURE__ */ p("p", {
+				className: c.typing,
+				"aria-live": "polite",
+				children: z
+			}),
+			v && /* @__PURE__ */ p(l, {
+				ref: F,
+				onSend: v,
+				locale: T,
+				placeholder: D,
+				actions: O,
+				disabled: k,
+				onError: A
+			})
+		]
+	});
+}
+//#endregion
+export { g as Chat };
+
+//# sourceMappingURL=Chat.js.map

package/dist/components/Chat/Chat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.js","names":[],"sources":["../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport { EmptyState } from \"../EmptyState\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { ChatComposer, type ChatComposerHandle } from \"./ChatComposer\";\nimport {\n    chatStrings,\n    dayLabel,\n    groupMessages,\n    timeLabel,\n    typingLabel,\n    type ChatMessage,\n} from \"./chat-groups\";\nimport styles from \"./Chat.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onSubmit\";\n\nexport interface ChatProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The thread, **oldest first**. Never reordered by the component. */\n    messages: readonly ChatMessage[];\n    /** Author id treated as \"own\" — decides side, colour and status ticks. */\n    currentUserId?: string;\n    /** Renders the composer when given. Receives the trimmed text. */\n    onSend?: (text: string) => void | Promise<void>;\n    /** Enables the retry control on a `\"failed\"` message. */\n    onRetry?: (message: ChatMessage) => void;\n    /** Names currently typing. One, two or a count is phrased for you. */\n    typing?: readonly string[];\n    /** Avatar for the first message of a run — an `<Avatar>`, an `<Icon>`. */\n    renderAvatar?: (message: ChatMessage) => ReactNode;\n    /** Rendered above the thread, inside the panel. */\n    header?: ReactNode;\n    /** Shown when there are no messages. */\n    emptyState?: ReactNode;\n    /** Gap that still keeps consecutive messages in one run. Default 5 min. */\n    groupWindowMs?: number;\n    /** Locale for labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Reference instant for \"Hoje\"/\"Ontem\". Default: now, at render time. */\n    now?: number;\n    /** Placeholder for the composer. */\n    placeholder?: string;\n    /** Extra controls inside the composer, before the send button. */\n    composerActions?: ReactNode;\n    /** Disable the composer — no permission, thread archived, offline. */\n    composerDisabled?: boolean;\n    /** Called when `onSend` rejects. The draft stays in the field either way. */\n    onSendError?: (error: unknown) => void;\n}\n\n/** Status glyph and label for an outgoing message. */\nconst STATUS_GLYPH: Record<NonNullable<ChatMessage[\"status\"]>, string> = {\n    sending: \"◌\",\n    sent: \"✓\",\n    read: \"✓✓\",\n    failed: \"!\",\n};\n\n/**\n * A message thread: grouped by author and by day, own messages on one side, with\n * delivery state, a typing indicator and an optional composer.\n *\n * Presentational and controlled, like the rest of the SDK: it takes a list and\n * emits intent (`onSend`, `onRetry`). Where messages come from — REST, the SDK's\n * `createWebSocket`, an SSE stream — and how an optimistic insert is done stay with\n * the app, because those differ per backend and a component that assumed one would\n * be wrong for most.\n *\n * It works as a comment thread too: that is the same component with\n * `currentUserId` set and no `typing`.\n *\n * @example\n * <Chat\n *     messages={messages}\n *     currentUserId={me.id}\n *     typing={typingNames}\n *     onSend={(text) => send({ text })}\n *     onRetry={(message) => resend(message.id)}\n * />\n */\nexport function Chat({\n    messages,\n    currentUserId,\n    onSend,\n    onRetry,\n    typing = [],\n    renderAvatar,\n    header,\n    emptyState,\n    groupWindowMs,\n    locale = \"pt-BR\",\n    now,\n    placeholder,\n    composerActions,\n    composerDisabled,\n    onSendError,\n    className,\n    ...rest\n}: ChatProps) {\n    const strings = chatStrings(locale);\n    const sections = groupMessages({ messages, currentUserId, windowMs: groupWindowMs });\n    const composer = useRef<ChatComposerHandle | null>(null);\n    const thread = useRef<HTMLDivElement | null>(null);\n    const stuckToBottom = useRef(true);\n\n    /**\n     * Remember whether the reader is at the bottom, before the next batch lands.\n     *\n     * A thread that always scrolls to the newest message yanks somebody out of the\n     * history they were reading, every time anyone types. So the jump only happens\n     * when they were already at the bottom — the same rule every chat app converges\n     * on. The 48px slack covers a partially visible last row.\n     */\n    const trackPosition = (): void => {\n        const node = thread.current;\n        if (!node) return;\n        const distance = node.scrollHeight - node.scrollTop - node.clientHeight;\n        stuckToBottom.current = distance < 48;\n    };\n\n    useLayoutEffect(() => {\n        const node = thread.current;\n        if (!node || !stuckToBottom.current) return;\n        node.scrollTop = node.scrollHeight;\n    }, [messages, typing]);\n\n    useEffect(() => {\n        const node = thread.current;\n        if (!node) return;\n        node.scrollTop = node.scrollHeight;\n        // Mount lands on the newest message; from then on `trackPosition` decides.\n    }, []);\n\n    const typingText = typingLabel(typing, locale);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {header && <header className={styles.header}>{header}</header>}\n\n            <div\n                ref={thread}\n                className={styles.thread}\n                onScroll={trackPosition}\n                role=\"log\"\n                aria-live=\"polite\"\n                aria-relevant=\"additions text\"\n                tabIndex={0}\n                aria-label={strings.thread}\n            >\n                {messages.length === 0\n                    ? (emptyState ?? <EmptyState title={strings.empty} />)\n                    : sections.map((section) =>\n                          section.kind === \"day\" ? (\n                              <div key={section.key} className={styles.day}>\n                                  <span className={styles.dayLabel}>\n                                      {dayLabel(section.date, { locale, now })}\n                                  </span>\n                              </div>\n                          ) : (\n                              <div\n                                  key={section.key}\n                                  className={cn(styles.run, section.own && styles.ownRun)}\n                              >\n                                  {renderAvatar && (\n                                      <div className={styles.avatar} aria-hidden=\"true\">\n                                          {renderAvatar(section.messages[0])}\n                                      </div>\n                                  )}\n                                  <div className={styles.runBody}>\n                                      <span className={styles.author}>\n                                          {section.own\n                                              ? strings.you\n                                              : (section.authorName ?? section.authorId)}\n                                      </span>\n                                      <ul className={styles.bubbles}>\n                                          {section.messages.map((message) => (\n                                              <li key={message.id} className={styles.bubbleRow}>\n                                                  <div\n                                                      className={cn(\n                                                          styles.bubble,\n                                                          section.own && styles.ownBubble,\n                                                          message.status === \"failed\" &&\n                                                              styles.failedBubble,\n                                                      )}\n                                                  >\n                                                      <div className={styles.body}>\n                                                          {message.body}\n                                                      </div>\n                                                      <div className={styles.meta}>\n                                                          <time\n                                                              dateTime={new Date(\n                                                                  message.sentAt,\n                                                              ).toISOString()}\n                                                          >\n                                                              {timeLabel(message.sentAt, locale)}\n                                                          </time>\n                                                          {section.own && message.status && (\n                                                              <span\n                                                                  className={cn(\n                                                                      styles.status,\n                                                                      message.status === \"failed\" &&\n                                                                          styles.statusFailed,\n                                                                  )}\n                                                                  title={strings[message.status]}\n                                                              >\n                                                                  <span aria-hidden=\"true\">\n                                                                      {STATUS_GLYPH[message.status]}\n                                                                  </span>\n                                                                  <VisuallyHidden>\n                                                                      {strings[message.status]}\n                                                                  </VisuallyHidden>\n                                                              </span>\n                                                          )}\n                                                      </div>\n                                                  </div>\n                                                  {message.status === \"failed\" && onRetry && (\n                                                      <button\n                                                          type=\"button\"\n                                                          className={styles.retry}\n                                                          onClick={() => onRetry(message)}\n                                                      >\n                                                          {strings.retry}\n                                                      </button>\n                                                  )}\n                                              </li>\n                                          ))}\n                                      </ul>\n                                  </div>\n                              </div>\n                          ),\n                      )}\n            </div>\n\n            {typingText && (\n                <p className={styles.typing} aria-live=\"polite\">\n                    {typingText}\n                </p>\n            )}\n\n            {onSend && (\n                <ChatComposer\n                    ref={composer}\n                    onSend={onSend}\n                    locale={locale}\n                    placeholder={placeholder}\n                    actions={composerActions}\n                    disabled={composerDisabled}\n                    onError={onSendError}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Chat/Chat.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_panel_xUVw0`,t=`tempest_header_muoPu`,n=`tempest_thread_-j8yS`,r=`tempest_day_uLsWA`,i=`tempest_dayLabel_m8rDy`,a=`tempest_run_jOUv7`,o=`tempest_ownRun_3XTG5`,s=`tempest_avatar_d9SYT`,c=`tempest_runBody_nHQC3`,l=`tempest_author_4MRkd`,u=`tempest_bubbles_VYaQ0`,d=`tempest_bubbleRow_QSc41`,f=`tempest_bubble_GGFcU`,p=`tempest_ownBubble_agOMW`,m=`tempest_failedBubble_kT3F5`,h=`tempest_body_1aH2F`,g=`tempest_meta_3fNx8`,_=`tempest_status_EeiUt`,v=`tempest_statusFailed_Bfro1`,y=`tempest_retry_DAbIj`,b=`tempest_typing_zdp3O`,x=`tempest_composer_krOGl`,S=`tempest_field_fBY-q`,C=`tempest_composerActions_MYwQx`,w=`tempest_send_NwcaR`,T={panel:e,header:t,thread:n,day:r,dayLabel:i,run:a,ownRun:o,avatar:s,runBody:c,author:l,bubbles:u,bubbleRow:d,bubble:f,ownBubble:p,failedBubble:m,body:h,meta:g,status:_,statusFailed:v,retry:y,typing:b,composer:x,field:S,composerActions:C,send:w};exports.author=l,exports.avatar=s,exports.body=h,exports.bubble=f,exports.bubbleRow=d,exports.bubbles=u,exports.composer=x,exports.composerActions=C,exports.day=r,exports.dayLabel=i,exports.default=T,exports.failedBubble=m,exports.field=S,exports.header=t,exports.meta=g,exports.ownBubble=p,exports.ownRun=o,exports.panel=e,exports.retry=y,exports.run=a,exports.runBody=c,exports.send=w,exports.status=_,exports.statusFailed=v,exports.thread=n,exports.typing=b;
+//# sourceMappingURL=Chat.module.cjs.map