lemma-sdk 0.2.18 → 0.2.19

package/README.md

@@ -181,6 +181,62 @@ import "lemma-sdk/react/styles.css";
 
 The stylesheet includes the SDK theme tokens and semantic assistant classes. You do not need the Lemma app's internal Tailwind setup just to render the assistant correctly.
 
+#### Important for Tailwind apps
+
+If your app uses Tailwind and installs `lemma-sdk` from npm, Tailwind must scan the SDK package too. Otherwise the assistant can look half-styled: native file inputs may appear, layouts can collapse, spacing disappears, and buttons/header chrome look wrong.
+
+For Tailwind v3, add the SDK package to `content`:
+
+```js
+// tailwind.config.js
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/lemma-sdk/dist/react/**/*.{js,mjs}",
+  ],
+}
+```
+
+If you are developing against a local checkout of the SDK source instead of the published npm package, scan the source files too:
+
+```js
+// tailwind.config.js
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "../lemma-typescript/src/react/**/*.{ts,tsx}",
+  ],
+}
+```
+
+If you alias the package to local SDK source in Vite, make sure the alias points at the React source and stylesheet:
+
+```ts
+// vite.config.ts
+import path from "node:path";
+
+export default {
+  resolve: {
+    alias: {
+      "lemma-sdk/react/styles.css": path.resolve(__dirname, "../lemma-typescript/src/react/styles.css"),
+      "lemma-sdk/react": path.resolve(__dirname, "../lemma-typescript/src/react/index.ts"),
+      "lemma-sdk": path.resolve(__dirname, "../lemma-typescript/src/index.ts"),
+    },
+  },
+};
+```
+
+Quick checklist for developers:
+
+- import `lemma-sdk/react/styles.css` once
+- give the assistant container a real height
+- if the assistant is inside flex/grid, add `min-height: 0` on the relevant parent
+- if you use Tailwind, scan the SDK package or SDK source
+- if you use `AssistantEmbedded`, pass `theme` directly there
+- if you use `AssistantExperienceView`, wrap it in `AssistantThemeScope`
+
 The assistant UI renders markdown by default:
 
 - GitHub-flavored markdown is enabled for assistant and user messages

package/dist/react/styles.css

@@ -86,6 +86,28 @@
 :where(.light, [data-theme="light"], [data-color-scheme="light"], [data-mode="light"]) .lemma-assistant-theme:not([data-lemma-theme="dark"]),
 .lemma-assistant-theme[data-lemma-theme="light"] {
   color-scheme: light;
+  --bg-canvas: #f6f2ea;
+  --bg-surface: #fffdf9;
+  --bg-subtle: #f1ebde;
+  --border-default: #ddd2bb;
+  --border-subtle: #ebe2d0;
+  --text-primary: #241f16;
+  --text-secondary: #5c5344;
+  --text-tertiary: #8a7f6f;
+  --text-inverse: #fffdf9;
+  --text-on-brand: #fffdf9;
+  --brand-primary: #202418;
+  --brand-secondary: #6e8c56;
+  --brand-accent: #c78a2c;
+  --brand-glow: #efe3c7;
+  --state-success: #3e7a3c;
+  --state-error: #b44d36;
+  --state-info: #2f6fb2;
+  --state-warning: #c78a2c;
+  --shadow-xs: 0 1px 2px rgba(36, 31, 22, 0.08);
+  --shadow-sm: 0 8px 24px rgba(36, 31, 22, 0.08);
+  --shadow-md: 0 18px 36px rgba(36, 31, 22, 0.1);
+  --shadow-lg: 0 24px 48px rgba(36, 31, 22, 0.14);
 }
 
 :where(.dark, [data-theme="dark"], [data-color-scheme="dark"], [data-mode="dark"]) .lemma-assistant-theme:not([data-lemma-theme="light"]),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemma-sdk",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "Official TypeScript SDK for Lemma pod-scoped APIs",
   "type": "module",
   "main": "dist/index.js",