@rubrion/agent-kit-react 0.0.0-stage → 0.1.1

package/dist/styles.css

@@ -0,0 +1,83 @@
+/* agent-kit: the few styles Tailwind utilities can't express (markdown, mascot,
+   motion). Colors come from the shadcn/ui tokens (--primary, --muted, --border…). */
+
+/* The kit's roots carry .ak. On a host without Tailwind's preflight, this resets the
+   elements the components draw, so browser defaults don't show through. In the base
+   layer, so the utilities on each element win. */
+@layer base {
+	:where(.ak, .ak *), :where(.ak, .ak *)::before, :where(.ak, .ak *)::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border, currentColor); }
+	:where(.ak) :where(button, input, textarea, select) { font: inherit; color: inherit; background: transparent; letter-spacing: inherit; }
+	:where(.ak) :where(button, [role="button"]) { cursor: pointer; }
+	:where(.ak) :where(textarea) { resize: none; }
+	:where(.ak) :where(ol, ul, menu) { list-style: none; }
+	:where(.ak) :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
+	:where(.ak) :where(svg, img) { display: block; max-width: 100%; }
+	:where(.ak) :where(a) { color: inherit; text-decoration: inherit; }
+}
+
+@keyframes ak-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+.ak-rise { animation: ak-rise 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
+
+/* The corner button jumping for attention: falls fast, rises slow, so the top of the arc hangs. */
+@keyframes ak-jump {
+	0%, 100% { transform: translateY(-22%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+	50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+}
+.ak-jump { animation: ak-jump 1.8s infinite; }
+
+/* Mascot: an eye. The pupil's follow-the-cursor offset is set inline (Mascot.tsx);
+   these animate the layers inside it, so both combine. */
+.ak-mascot { display: block; flex: 0 0 auto; overflow: visible; color: var(--primary, #555); }
+.ak-mascot__badge { fill: var(--card, #fff); stroke: color-mix(in oklab, var(--foreground, #222) 18%, transparent); }
+.ak-mascot__white { fill: color-mix(in oklab, var(--card, #fff) 92%, var(--foreground, #222)); }
+.ak-mascot__lid, .ak-mascot__lash { stroke: var(--foreground, #222); }
+.ak-mascot__ring { stroke: color-mix(in oklab, var(--card, #fff) 55%, transparent); }
+.ak-mascot__pupil { fill: var(--foreground, #111); }
+.ak-mascot__glint { fill: #fff; opacity: 0.9; }
+.ak-mascot__eye, .ak-mascot__gaze, .ak-mascot__ring, .ak-mascot__iris, .ak-mascot__pupil { transform-box: view-box; transform-origin: 32px 32px; }
+.ak-mascot__look { transition: transform 0.12s ease-out; }
+
+/* Idle: a quick blink now and then. */
+@keyframes ak-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
+.ak-mascot--idle .ak-mascot__eye { animation: ak-blink 5.2s infinite; }
+
+/* Thinking: the gaze drifts up and the pupil narrows, like looking for the answer. */
+@keyframes ak-ponder { 0%, 100% { transform: translate(2.5px, -3.5px); } 50% { transform: translate(-2.5px, -4px); } }
+.ak-mascot--thinking .ak-mascot__gaze { animation: ak-ponder 2.4s ease-in-out infinite; }
+.ak-mascot--thinking .ak-mascot__pupil { transform: scale(0.75); }
+
+/* Using a tool: scanning side to side, the iris ring turning. */
+@keyframes ak-scan { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
+@keyframes ak-turn { to { transform: rotate(360deg); } }
+.ak-mascot--tool .ak-mascot__gaze { animation: ak-scan 1.1s ease-in-out infinite; }
+.ak-mascot--tool .ak-mascot__ring { animation: ak-turn 1.6s linear infinite; }
+
+/* Speaking: the iris pulses with the words. */
+@keyframes ak-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.12); } }
+.ak-mascot--speaking .ak-mascot__iris { animation: ak-pulse 0.5s ease-in-out infinite; }
+.ak-mascot--speaking .ak-mascot__pupil { animation: ak-pulse 0.5s ease-in-out infinite reverse; }
+
+@media (prefers-reduced-motion: reduce) {
+	.ak-rise, .ak-jump, .ak-mascot * { animation: none !important; transition: none !important; }
+}
+
+/* Markdown answers */
+.ak-md { font-size: 0.875rem; line-height: 1.6; overflow-wrap: anywhere; }
+.ak-md > * + * { margin-top: 0.6em; }
+.ak-md h1, .ak-md h2, .ak-md h3 { font-weight: 600; line-height: 1.3; margin-top: 1em; }
+.ak-md h1 { font-size: 1.15em; } .ak-md h2 { font-size: 1.07em; } .ak-md h3 { font-size: 1em; }
+.ak-md ul, .ak-md ol { padding-left: 1.3em; }
+.ak-md ul { list-style: disc; } .ak-md ol { list-style: decimal; }
+.ak-md li + li { margin-top: 0.2em; }
+.ak-md a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
+.ak-md strong { font-weight: 600; }
+.ak-md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: var(--muted); border-radius: 4px; padding: 0.1em 0.35em; }
+.ak-md pre { position: relative; background: var(--muted); border-radius: 8px; padding: 0.75em; overflow-x: auto; }
+.ak-md pre code { background: none; padding: 0; }
+.ak-md blockquote { border-left: 3px solid var(--border); padding-left: 0.8em; color: var(--muted-foreground); }
+.ak-md table { width: 100%; border-collapse: collapse; font-size: 0.95em; display: block; overflow-x: auto; }
+.ak-md th, .ak-md td { border: 1px solid var(--border); padding: 0.3em 0.55em; text-align: left; }
+.ak-md th { background: var(--muted); font-weight: 600; }
+.ak-md hr { border: 0; border-top: 1px solid var(--border); }
+.ak-copy { position: absolute; top: 0.4em; right: 0.4em; font-size: 11px; padding: 0.1em 0.5em; border-radius: 4px; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); opacity: 0; transition: opacity 0.15s; }
+.ak-md pre:hover .ak-copy, .ak-copy:focus-visible { opacity: 1; }

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@rubrion/agent-kit-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "React chat UI for the agent kit: floating chat box, full assistant screen, streamed steps (thinking, tool calls, text).",
+  "license": "MIT",
+  "author": "Rubrion",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "dompurify": "^3.4.17",
+    "marked": "^18.1.2"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.400.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "lucide-react": "^1.65.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typescript": "^5.9.3",
+    "vitest": "^5.0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.