@ai-matrx/canvas 0.0.0-bootstrap.0 → 0.1.0

package/dist/styles.css

@@ -0,0 +1,451 @@
+@import "@ai-matrx/tap-target/styles.css";
+
+/*
+ * @ai-matrx/canvas — structural CSS (C26).
+ *
+ * Every colour comes from a --mxc-* token. Hosts set the token VALUES (see
+ * tokens.css for the shipped defaults); this sheet never hardcodes a colour.
+ */
+
+.mxc-column {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: var(--mxc-width, 640px);
+  height: 100%;
+  min-height: 0;
+  flex: none;
+  background: var(--mxc-bg);
+  color: var(--mxc-fg);
+  border-left: 1px solid var(--mxc-border);
+  /* The column owns the top edge of the window: no header sits above it. */
+  padding-top: var(--mxc-safe-top, 0px);
+  isolation: isolate;
+}
+
+.mxc-column[data-fullscreen] {
+  width: 100%;
+  border-left: 0;
+}
+
+.mxc-width-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -3px;
+  width: 6px;
+  cursor: col-resize;
+  z-index: 2;
+  touch-action: none;
+}
+
+.mxc-width-handle:hover,
+.mxc-width-handle:focus-visible {
+  background: var(--mxc-accent-soft);
+  outline: none;
+}
+
+:root[data-mxc-resizing],
+:root[data-mxc-resizing] * {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+.mxc-layout {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+}
+
+.mxc-split {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+}
+
+.mxc-split[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+.mxc-split-child {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+}
+
+.mxc-split-handle {
+  flex: none;
+  background: var(--mxc-border);
+  touch-action: none;
+  position: relative;
+}
+
+.mxc-split[data-orientation="horizontal"] > .mxc-split-handle {
+  width: 1px;
+  cursor: col-resize;
+}
+
+.mxc-split[data-orientation="vertical"] > .mxc-split-handle {
+  height: 1px;
+  cursor: row-resize;
+}
+
+/* A wide invisible grab area around the 1px line. */
+.mxc-split-handle::after {
+  content: "";
+  position: absolute;
+  inset: -3px;
+}
+
+.mxc-split-handle:hover {
+  background: var(--mxc-accent);
+}
+
+.mxc-pane {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--mxc-bg);
+}
+
+.mxc-pane[data-drop] {
+  box-shadow: inset 0 0 0 2px var(--mxc-accent);
+}
+
+.mxc-pane-header {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  height: var(--mxc-header-h, 2.75rem);
+  padding: 0 0.25rem 0 0.375rem;
+  border-bottom: 1px solid var(--mxc-border);
+  background: var(--mxc-header-bg);
+}
+
+.mxc-tabs {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.mxc-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.mxc-tab {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  max-width: 13rem;
+  height: 1.875rem;
+  padding: 0 0.25rem 0 0.5rem;
+  border-radius: 0.5rem;
+  font-size: 0.8125rem;
+  line-height: 1;
+  color: var(--mxc-muted);
+  cursor: pointer;
+  user-select: none;
+}
+
+.mxc-tab:hover {
+  background: var(--mxc-hover);
+  color: var(--mxc-fg);
+}
+
+.mxc-tab[data-active] {
+  background: var(--mxc-tab-active-bg);
+  color: var(--mxc-fg);
+}
+
+.mxc-pane:not([data-focused]) .mxc-tab[data-active] {
+  background: var(--mxc-hover);
+}
+
+.mxc-tab:focus-visible {
+  outline: 2px solid var(--mxc-accent);
+  outline-offset: -2px;
+}
+
+.mxc-tab-icon {
+  flex: none;
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.mxc-tab-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mxc-tab-close {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: inherit;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.mxc-tab:hover .mxc-tab-close,
+.mxc-tab[data-active] .mxc-tab-close,
+.mxc-tab-close:focus-visible {
+  opacity: 0.7;
+}
+
+.mxc-tab-close:hover {
+  opacity: 1;
+  background: var(--mxc-hover);
+}
+
+.mxc-pane-actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+}
+
+.mxc-pane-body {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.mxc-item {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.mxc-item[hidden] {
+  display: none;
+}
+
+.mxc-loading {
+  flex: 1 1 auto;
+  background: linear-gradient(90deg, transparent, var(--mxc-hover), transparent);
+  background-size: 200% 100%;
+  animation: mxc-shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes mxc-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+.mxc-problem,
+.mxc-empty {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.5rem;
+  font-size: 0.875rem;
+  color: var(--mxc-muted);
+  text-align: center;
+}
+
+.mxc-problem p {
+  margin: 0;
+}
+
+.mxc-problem-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.mxc-text-button {
+  border: 1px solid var(--mxc-border);
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--mxc-fg);
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+.mxc-text-button:hover {
+  background: var(--mxc-hover);
+}
+
+.mxc-launcher {
+  margin: auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+  gap: 0.5rem;
+  width: min(32rem, 100%);
+  padding: 1.5rem;
+}
+
+.mxc-launcher-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--mxc-border);
+  border-radius: 0.625rem;
+  background: transparent;
+  color: var(--mxc-fg);
+  font-size: 0.8125rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mxc-launcher-item:hover {
+  background: var(--mxc-hover);
+}
+
+.mxc-launcher-icon {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  color: var(--mxc-muted);
+}
+
+.mxc-menu {
+  z-index: var(--mxc-menu-z, 10000);
+  min-width: 11rem;
+  padding: 0.25rem;
+  border: 1px solid var(--mxc-border);
+  border-radius: 0.625rem;
+  background: var(--mxc-bg);
+  color: var(--mxc-fg);
+  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35);
+  font-size: 0.8125rem;
+}
+
+.mxc-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4375rem 0.5rem;
+  border-radius: 0.375rem;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+}
+
+.mxc-menu-item[data-highlighted] {
+  background: var(--mxc-hover);
+}
+
+.mxc-menu-item[data-destructive] {
+  color: var(--mxc-danger);
+}
+
+.mxc-menu-item svg {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  color: var(--mxc-muted);
+}
+
+.mxc-menu-separator {
+  height: 1px;
+  margin: 0.25rem 0;
+  background: var(--mxc-border);
+}
+
+.mxc-toggle {
+  position: relative;
+  display: inline-flex;
+}
+
+.mxc-toggle[data-open] {
+  color: var(--mxc-accent);
+}
+
+.mxc-toggle-badge {
+  position: absolute;
+  top: 0.125rem;
+  right: 0.125rem;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  border-radius: 999px;
+  background: var(--mxc-accent);
+  color: var(--mxc-accent-fg);
+  font-size: 0.625rem;
+  line-height: 1rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+/* CanvasFrame — for hosts without their own shell. */
+.mxc-frame {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.mxc-frame-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.mxc-frame-main[hidden] {
+  display: none;
+}
+
+/* Phone-only controls (hide the canvas without closing a single tab). */
+.mxc-phone-only {
+  display: none !important;
+}
+
+/* Phones: the canvas is a full-screen layer over the app. */
+@media (max-width: 767px) {
+  .mxc-phone-only {
+    display: inline-flex !important;
+  }
+
+  /* A phone canvas is already full screen. */
+  .mxc-desktop-only {
+    display: none !important;
+  }
+
+  .mxc-column {
+    position: fixed;
+    inset: 0;
+    z-index: var(--mxc-mobile-z, 60);
+    width: 100%;
+    border-left: 0;
+    padding-top: env(safe-area-inset-top, 0px);
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+  }
+
+  .mxc-width-handle {
+    display: none;
+  }
+
+  .mxc-split[data-orientation="horizontal"] {
+    flex-direction: column;
+  }
+
+  .mxc-split[data-orientation="horizontal"] > .mxc-split-handle {
+    width: auto;
+    height: 1px;
+    cursor: row-resize;
+  }
+}

package/dist/tokens.css

@@ -0,0 +1,49 @@
+/*
+ * @ai-matrx/canvas — DEFAULT token values (C26). Import this only in a host
+ * that has no theme of its own; a themed host maps the --mxc-* tokens to its
+ * own design tokens instead.
+ */
+
+:root {
+  --mxc-bg: #ffffff;
+  --mxc-header-bg: #fafafa;
+  --mxc-fg: #18181b;
+  --mxc-muted: #71717a;
+  --mxc-border: #e4e4e7;
+  --mxc-hover: rgba(0, 0, 0, 0.05);
+  --mxc-tab-active-bg: rgba(0, 0, 0, 0.08);
+  --mxc-accent: #2563eb;
+  --mxc-accent-soft: rgba(37, 99, 235, 0.25);
+  --mxc-accent-fg: #ffffff;
+  --mxc-danger: #dc2626;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --mxc-bg: #1c1c1f;
+    --mxc-header-bg: #18181b;
+    --mxc-fg: #f4f4f5;
+    --mxc-muted: #a1a1aa;
+    --mxc-border: #3f3f46;
+    --mxc-hover: rgba(255, 255, 255, 0.06);
+    --mxc-tab-active-bg: rgba(255, 255, 255, 0.1);
+    --mxc-accent: #60a5fa;
+    --mxc-accent-soft: rgba(96, 165, 250, 0.3);
+    --mxc-accent-fg: #0b1220;
+    --mxc-danger: #f87171;
+  }
+}
+
+.dark {
+  --mxc-bg: #1c1c1f;
+  --mxc-header-bg: #18181b;
+  --mxc-fg: #f4f4f5;
+  --mxc-muted: #a1a1aa;
+  --mxc-border: #3f3f46;
+  --mxc-hover: rgba(255, 255, 255, 0.06);
+  --mxc-tab-active-bg: rgba(255, 255, 255, 0.1);
+  --mxc-accent: #60a5fa;
+  --mxc-accent-soft: rgba(96, 165, 250, 0.3);
+  --mxc-accent-fg: #0b1220;
+  --mxc-danger: #f87171;
+}

package/package.json

@@ -1,14 +1,93 @@
 {
   "name": "@ai-matrx/canvas",
-  "version": "0.0.0-bootstrap.0",
-  "description": "Name reservation only. The functional Canvas release is being prepared; this bootstrap contains no implementation.",
+  "version": "0.1.0",
+  "description": "The AI Matrx canvas: a docked right-hand column with split panes, tabs, full screen, a kind registry, Redux-compatible state and persistence.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "license": "MIT",
-  "files": [
-    "README.md"
-  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AI-Matrix-Engine/aidream.git",
     "directory": "apps/shared/canvas"
+  },
+  "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": {
+    "@radix-ui/react-dropdown-menu": "latest",
+    "@ai-matrx/tap-target": "latest"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@types/node": "^26.6.2",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "jsdom": "^30.1.1",
+    "publint": "^0.3.24",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vitest": "^5.0.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "pnpm clean && tsup",
+    "clean": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "check:package": "pnpm build && node ../scripts/check-exports-agreement.mjs && publint && pnpm verify:tarball",
+    "verify:tarball": "node scripts/verify-tarball.mjs"
   }
-}
+}