@mieweb/ui 0.10.0-dev.20 → 0.10.0-dev.22

package/agent/mieweb-ui.instructions.md

@@ -198,3 +198,80 @@ abstraction solely to make it contributable.
 Follow the repository's permissions and approval requirements for commits,
 pushes, and PR creation. Do not treat these instructions as authorization to
 publish changes.
+
+## Rule 16: Embedding the Ozwell assistant that acts on the page
+
+Two different things share the "Ozwell" name — pick deliberately:
+
+- **`OzwellChat` / `AIChat` (this library)** — the *chat UI shell*. You own the
+  transport and render messages you already have. Use it when the assistant is
+  part of your own product and you wire the answers yourself (see the
+  [Chat family](https://ui.mieweb.org/?path=/docs/modules-chat-overview--docs)
+  and the [Ozwell backend guide](https://github.com/mieweb/ui/blob/main/src/components/AI/OZWELL-BACKEND.md)).
+- **The embedded Ozwell assistant (`@ozwell/react`, from ozwellai-api)** — a
+  drop-in, page-aware assistant that can **read and act on your page** through
+  tool calls. Use this when the user says things like "add Ozwell" or "let
+  Ozwell click / read / fill something on the page."
+
+To add the page-aware assistant to a `@mieweb/ui` app:
+
+- Install `@ozwell/react` alongside `@mieweb/ui`.
+- Render `OzwellChat` from `@ozwell/react` and declare one tool in `tools` for
+  each page action the user wants Ozwell to perform (click, read, fill, …).
+- Authenticate with a **site-approved agent key** (`agnt_key-…`) via
+  `VITE_OZWELL_AGENT_KEY`. Vite inlines every `VITE_*` value into the browser
+  bundle — this is **not** secret storage, so never expose a parent (`ozw_…`),
+  admin, or model-provider key this way; use a server-side integration when a
+  credential must stay private.
+- Handle each call in `onToolCall(name, args, respond)`: perform the DOM action
+  and **always** `respond(...)`. Return `isError: true` for an unknown tool name
+  or a missing target, so the assistant never claims an action that did not happen.
+- Follow the canonical guide — a full **Vite + MIE UI "Click Hello World"**
+  example — at <https://mieweb.github.io/ozwellai-api/frontend/react/>.
+
+Example — let Ozwell fill a field on the page (adapt the tool to your app's own actions):
+
+```tsx
+import { useState } from 'react';
+import { Input } from '@mieweb/ui';
+import { OzwellChat, type OzwellTool } from '@ozwell/react';
+
+const tools: OzwellTool[] = [{
+  type: 'function',
+  function: {
+    name: 'set_note',
+    description: 'Write text into the Note field when the user asks.',
+    parameters: {
+      type: 'object',
+      properties: { text: { type: 'string', description: 'Text to put in the Note field' } },
+      required: ['text'],
+    },
+  },
+}];
+
+export default function App() {
+  const [note, setNote] = useState('');
+  return (
+    <>
+      <Input label="Note" value={note} onChange={(e) => setNote(e.target.value)} />
+      <output aria-live="polite">Note: {note}</output>
+      <OzwellChat
+        apiKey={import.meta.env.VITE_OZWELL_AGENT_KEY}
+        tools={tools}
+        onToolCall={(name, args, respond) => {
+          if (name !== 'set_note' || typeof args.text !== 'string') {
+            respond({ isError: true, content: [{ type: 'text', text: 'Tool unavailable' }] });
+            return;
+          }
+          setNote(args.text);
+          respond({ content: [{ type: 'text', text: `Note set to "${args.text}"` }] });
+        }}
+      />
+    </>
+  );
+}
+```
+
+Privacy: conversation content stays between the user and Ozwell and is never
+relayed to the host page. The host receives only the tool calls it declares,
+lifecycle/error events, and any data the user explicitly shares (opt-in).

package/dist/kerebron.css

@@ -119,6 +119,34 @@
   color: var(--kb-menu-dropdown-text) !important;
 }
 
+/*
+ * Kerebron leaves headings, lists, links and code to browser defaults, which
+ * Tailwind's preflight strips (headings `inherit`, lists `list-style: none`,
+ * links `color: inherit`) — so "# " and "- " produced real h1/ul nodes that
+ * rendered as plain text while editing. `revert` hands these back to the
+ * browser. (Adapted from mieweb/timehuddle#620.)
+ *
+ * Deliberately NOT in `@layer base`: @mieweb/q ships an *unlayered* preflight
+ * copy, and unlayered author rules beat any layered rule. Unlayered here with
+ * `:where()` keeps specificity at 0,1,0 — above preflight's bare element
+ * selectors (0,0,1) but below Kerebron's own `.kb-editor pre` / `.kb-editor
+ * ul` rules (0,1,1), so its pre-wrap and list padding stay in charge.
+ */
+.kb-editor :where(h1, h2, h3, h4, h5, h6, ol, ul, a, code, pre) {
+  all: revert;
+}
+/* The browser's default link blue is unreadable on the dark editor surface,
+   and the brand blue fails 4.5:1 on white, so each theme gets its own shade.
+   Dark uses primary-400: primary-500 (#64748b) is only ~3.9:1 on the default
+   brand's #0f172a background, while primary-400 (#94a3b8) is ~7:1. */
+.kb-editor :where(a) {
+  color: var(--mieweb-primary-800, #0f749c);
+}
+[data-theme='dark'] .kb-editor :where(a),
+.dark .kb-editor :where(a) {
+  color: var(--mieweb-primary-400, #94a3b8);
+}
+
 /*
  * Kerebron's base.css paints inline shortcode pills green without setting a
  * text color, so the inherited foreground fails WCAG AA contrast. Pin an
@@ -129,6 +157,93 @@
   color: #ffffff;
 }
 
+/*
+ * codecrock's light syntax palette fails WCAG AA on white: keyword #d73 is
+ * 3.1:1, number #099 3.5:1, string #690 3.4:1, comment #998 2.9:1, etc.
+ * (axe color-contrast, caught by the Storybook a11y CI job). Darken each
+ * failing token to a hue-preserving shade ≥4.5:1; tokens already passing
+ * (property, function, type, variable, tag) are left to upstream.
+ */
+.kb-editor .ts-keyword,
+.kb-editor .ts-keyword_operator,
+.kb-editor .ts-function_builtin {
+  color: #b03a00; /* was #d73 (3.1:1) → 6.1:1 */
+}
+.kb-editor .ts-number {
+  color: #007272; /* was #099 (3.5:1) → 5.8:1 */
+}
+.kb-editor .ts-string {
+  color: #557700; /* was #690 (3.4:1) → 5.2:1 */
+}
+.kb-editor .ts-string_special {
+  color: #c22f2f; /* was #d44 (4.2:1) → 5.6:1 */
+}
+.kb-editor .ts-comment {
+  color: #716d5e; /* was #998 (2.9:1) → 5.2:1 */
+}
+.kb-editor .ts-operator {
+  color: #637226; /* upstream #9a6 (2.5:1, misspelt .ts-perator) → 5.3:1 */
+}
+.kb-editor .ts-punctuation,
+.kb-editor .ts-punctuation_bracket {
+  color: #707070; /* was #999 (2.9:1) → 5.0:1 */
+}
+.kb-editor .ts-attribute {
+  color: #8a5c00; /* was #e90 (2.3:1) → 5.8:1 */
+}
+.kb-editor .ts-constant,
+.kb-editor .ts-constant_builtin {
+  color: #006a8e; /* was #0086b3 (4.2:1) → 6.1:1 */
+}
+/*
+ * Dark: codecrock only switches its palette via prefers-color-scheme, which
+ * a class-based dark toggle never matches — so dark surfaces were showing
+ * the light tokens. Re-assert codecrock's own dark (VS Code) palette for
+ * the tokens overridden above under the app's dark selectors.
+ */
+[data-theme='dark'] .kb-editor .ts-keyword,
+[data-theme='dark'] .kb-editor .ts-keyword_operator,
+.dark .kb-editor .ts-keyword,
+.dark .kb-editor .ts-keyword_operator {
+  color: #c586c0;
+}
+[data-theme='dark'] .kb-editor .ts-function_builtin,
+.dark .kb-editor .ts-function_builtin {
+  color: #dcdcaa;
+}
+[data-theme='dark'] .kb-editor .ts-number,
+.dark .kb-editor .ts-number {
+  color: #b5cea8;
+}
+[data-theme='dark'] .kb-editor .ts-string,
+[data-theme='dark'] .kb-editor .ts-string_special,
+.dark .kb-editor .ts-string,
+.dark .kb-editor .ts-string_special {
+  color: #ce9178;
+}
+[data-theme='dark'] .kb-editor .ts-comment,
+.dark .kb-editor .ts-comment {
+  color: #6a9955;
+}
+[data-theme='dark'] .kb-editor .ts-operator,
+[data-theme='dark'] .kb-editor .ts-punctuation,
+[data-theme='dark'] .kb-editor .ts-punctuation_bracket,
+.dark .kb-editor .ts-operator,
+.dark .kb-editor .ts-punctuation,
+.dark .kb-editor .ts-punctuation_bracket {
+  color: #d4d4d4;
+}
+[data-theme='dark'] .kb-editor .ts-attribute,
+.dark .kb-editor .ts-attribute {
+  color: #9cdcfe;
+}
+[data-theme='dark'] .kb-editor .ts-constant,
+[data-theme='dark'] .kb-editor .ts-constant_builtin,
+.dark .kb-editor .ts-constant,
+.dark .kb-editor .ts-constant_builtin {
+  color: #4fc1ff;
+}
+
 /* Overflow-menu icons declare min sizes that burst their compact buttons. */
 .kb-custom-menu__overflow-menu .kb-icon {
   display: inline-flex !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mieweb/ui",
-  "version": "0.10.0-dev.20",
+  "version": "0.10.0-dev.22",
   "description": "A themeable, accessible React component library built with Tailwind CSS",
   "author": "Medical Informatics Engineering, Inc.",
   "license": "SEE LICENSE IN LICENSE",
@@ -286,11 +286,11 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "@kerebron/editor": ">=0.8.6",
-    "@kerebron/editor-kits": ">=0.8.6",
-    "@kerebron/extension-basic-editor": ">=0.8.6",
-    "@kerebron/extension-yjs": ">=0.8.6",
-    "@kerebron/wasm": ">=0.8.6",
+    "@kerebron/editor": ">=0.8.12",
+    "@kerebron/editor-kits": ">=0.8.12",
+    "@kerebron/extension-basic-editor": ">=0.8.12",
+    "@kerebron/extension-yjs": ">=0.8.12",
+    "@kerebron/wasm": ">=0.8.12",
     "@mieweb/q": "1.0.0",
     "ag-grid-community": ">=32.0.0",
     "ag-grid-react": ">=32.0.0",
@@ -423,11 +423,11 @@
     "@esheet/fields": "0.0.5",
     "@esheet/renderer": "0.0.5",
     "@eslint/js": "^9.39.3",
-    "@kerebron/editor": "^0.8.6",
-    "@kerebron/editor-kits": "^0.8.6",
-    "@kerebron/extension-basic-editor": "^0.8.6",
-    "@kerebron/extension-yjs": "^0.8.6",
-    "@kerebron/wasm": "^0.8.6",
+    "@kerebron/editor": "^0.8.12",
+    "@kerebron/editor-kits": "^0.8.12",
+    "@kerebron/extension-basic-editor": "^0.8.12",
+    "@kerebron/extension-yjs": "^0.8.12",
+    "@kerebron/wasm": "^0.8.12",
     "@mieweb/datavis": "link:./packages/datavis",
     "@mieweb/q": "1.0.0",
     "@monaco-editor/react": "^4.7.0",