@ai-matrx/messaging 0.0.0 → 0.1.0

package/dist/tokens.css

@@ -0,0 +1,119 @@
+/**
+ * DEFAULT TOKEN VALUES (C26).
+ *
+ * The package is fully opinionated that these tokens MUST exist, and ships this
+ * sheet so it renders correctly UNTHEMED in a fresh app — that is what makes
+ * the drop-in test pass in under an hour. A host then sets its brand by
+ * overriding the same names; it never forks a component to change a color.
+ *
+ * Import order matters: `tokens.css` first, then your brand overrides, then
+ * `styles.css`. Hardcoded colors inside package components are banned, so every
+ * color the UI can draw is named here.
+ */
+
+:root {
+  /* Surfaces */
+  --mx-msg-bg: #ffffff;
+  --mx-msg-bg-subtle: #f6f7f9;
+  --mx-msg-bg-raised: #ffffff;
+  --mx-msg-bg-hover: rgba(0, 0, 0, 0.04);
+  --mx-msg-bg-active: rgba(0, 0, 0, 0.07);
+  --mx-msg-border: rgba(0, 0, 0, 0.09);
+  --mx-msg-border-strong: rgba(0, 0, 0, 0.16);
+
+  /* Text */
+  --mx-msg-text: #0b0d12;
+  --mx-msg-text-muted: #5c6270;
+  --mx-msg-text-faint: #8b909c;
+  --mx-msg-text-on-accent: #ffffff;
+
+  /* Accent + state */
+  --mx-msg-accent: #2f6bff;
+  --mx-msg-accent-hover: #2559e0;
+  --mx-msg-accent-subtle: rgba(47, 107, 255, 0.12);
+  --mx-msg-danger: #d7263d;
+  --mx-msg-success: #17864a;
+  --mx-msg-warning: #b26a00;
+  --mx-msg-focus-ring: rgba(47, 107, 255, 0.45);
+
+  /* Bubbles */
+  --mx-msg-bubble-mine-bg: var(--mx-msg-accent);
+  --mx-msg-bubble-mine-text: var(--mx-msg-text-on-accent);
+  --mx-msg-bubble-theirs-bg: #eef0f4;
+  --mx-msg-bubble-theirs-text: var(--mx-msg-text);
+  --mx-msg-bubble-radius: 18px;
+  --mx-msg-bubble-radius-tight: 6px;
+
+  /* Avatar palette — deterministic per person, never random per render. */
+  --mx-msg-avatar-0: #5b8def;
+  --mx-msg-avatar-1: #4aa96c;
+  --mx-msg-avatar-2: #d98324;
+  --mx-msg-avatar-3: #b45bd1;
+  --mx-msg-avatar-4: #d15b6f;
+  --mx-msg-avatar-5: #2fa3a3;
+  --mx-msg-avatar-6: #8a7fdb;
+  --mx-msg-avatar-7: #c2913a;
+
+  /* Geometry + motion */
+  --mx-msg-radius: 12px;
+  --mx-msg-radius-sm: 8px;
+  --mx-msg-space: 12px;
+  --mx-msg-font: inherit;
+  --mx-msg-font-size: 15px;
+  --mx-msg-font-size-sm: 13px;
+  --mx-msg-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.07);
+  --mx-msg-motion-fast: 120ms;
+  --mx-msg-motion: 220ms;
+  --mx-msg-ease: cubic-bezier(0.32, 0.72, 0, 1);
+  /* iOS: 44pt minimum touch target. Not negotiable on a phone. */
+  --mx-msg-touch-target: 44px;
+}
+
+/**
+ * Dark values are defined for BOTH the system preference and an explicit
+ * `[data-theme="dark"]`, so a host toggle wins in either direction and a page
+ * never borrows the wrong ground.
+ */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --mx-msg-bg: #0d1015;
+    --mx-msg-bg-subtle: #12161d;
+    --mx-msg-bg-raised: #171c24;
+    --mx-msg-bg-hover: rgba(255, 255, 255, 0.06);
+    --mx-msg-bg-active: rgba(255, 255, 255, 0.1);
+    --mx-msg-border: rgba(255, 255, 255, 0.1);
+    --mx-msg-border-strong: rgba(255, 255, 255, 0.2);
+    --mx-msg-text: #eef1f6;
+    --mx-msg-text-muted: #a2a9b8;
+    --mx-msg-text-faint: #767d8c;
+    --mx-msg-accent: #4b83ff;
+    --mx-msg-accent-hover: #6a99ff;
+    --mx-msg-accent-subtle: rgba(75, 131, 255, 0.18);
+    --mx-msg-danger: #ff6b7d;
+    --mx-msg-success: #45c98a;
+    --mx-msg-warning: #e2a33a;
+    --mx-msg-bubble-theirs-bg: #222833;
+    --mx-msg-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
+  }
+}
+
+:root[data-theme="dark"] {
+  --mx-msg-bg: #0d1015;
+  --mx-msg-bg-subtle: #12161d;
+  --mx-msg-bg-raised: #171c24;
+  --mx-msg-bg-hover: rgba(255, 255, 255, 0.06);
+  --mx-msg-bg-active: rgba(255, 255, 255, 0.1);
+  --mx-msg-border: rgba(255, 255, 255, 0.1);
+  --mx-msg-border-strong: rgba(255, 255, 255, 0.2);
+  --mx-msg-text: #eef1f6;
+  --mx-msg-text-muted: #a2a9b8;
+  --mx-msg-text-faint: #767d8c;
+  --mx-msg-accent: #4b83ff;
+  --mx-msg-accent-hover: #6a99ff;
+  --mx-msg-accent-subtle: rgba(75, 131, 255, 0.18);
+  --mx-msg-danger: #ff6b7d;
+  --mx-msg-success: #45c98a;
+  --mx-msg-warning: #e2a33a;
+  --mx-msg-bubble-theirs-bg: #222833;
+  --mx-msg-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
+}

package/package.json

@@ -1,15 +1,108 @@
 {
   "name": "@ai-matrx/messaging",
-  "version": "0.0.0",
-  "description": "Reserved for the AI Matrx real-time direct and group messaging package.",
+  "version": "0.1.0",
+  "description": "Enterprise, AI-native in-app messaging for Matrx clients: direct/group/org conversations with atomic direct creation, an outbox that never loses a typed message, optimistic send with echo-safe reconciliation, Matrx entity references, actionable messages with idempotent receipts, agents as participants, and a drop-in polished React UI — all realtime on @ai-matrx/realtime.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "license": "MIT",
-  "sideEffects": false,
+  "keywords": [
+    "messaging",
+    "chat",
+    "direct-messages",
+    "supabase",
+    "realtime",
+    "presence",
+    "typing-indicator",
+    "ai-matrx",
+    "agents",
+    "react"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AI-Matrix-Engine/aidream.git",
     "directory": "apps/shared/messaging"
   },
-  "homepage": "https://github.com/AI-Matrix-Engine/aidream",
-  "files": ["README.md"],
-  "publishConfig": { "access": "public" }
-}
+  "homepage": "https://github.com/AI-Matrix-Engine/aidream/tree/main/apps/shared/messaging#readme",
+  "bugs": {
+    "url": "https://github.com/AI-Matrix-Engine/aidream/issues"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/react.d.ts",
+        "default": "./dist/react.js"
+      },
+      "require": {
+        "types": "./dist/react.d.cts",
+        "default": "./dist/react.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@ai-matrx/agents": "latest",
+    "@ai-matrx/realtime": "latest"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@supabase/supabase-js": "^2.108.2",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.20.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.2.3",
+    "jsdom": "^25.0.1",
+    "publint": "^0.3.24",
+    "react": "^19.1.0",
+    "react-dom": "^19.2.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.6"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "pnpm clean && tsup && node ./scripts/copy-css.mjs",
+    "clean": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"",
+    "check:package": "pnpm build && publint && pnpm verify:tarball",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "verify:tarball": "node ./scripts/verify-tarball.mjs"
+  }
+}