@arbidocs/blocks 0.4.109 → 0.4.110

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbidocs/blocks",
-  "version": "0.4.109",
+  "version": "0.4.110",
   "description": "Composable, domain-neutral UI blocks for ARBI apps, organised by capability (retrieval, facts, agents, workspaces, citations, collaboration) plus shell, theme and site primitives, on top of @arbidocs/react.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -108,6 +108,12 @@
       "require": "./dist/calendar/index.cjs"
     },
     "./calendar.css": "./src/calendar/calendar.css",
+    "./calls": {
+      "types": "./dist/calls/index.d.ts",
+      "import": "./dist/calls/index.js",
+      "require": "./dist/calls/index.cjs"
+    },
+    "./calls.css": "./src/calls/calls.css",
     "./studio": {
       "types": "./dist/studio/index.d.ts",
       "import": "./dist/studio/index.js",
@@ -214,6 +220,9 @@
       "calendar": [
         "./dist/calendar/index.d.ts"
       ],
+      "calls": [
+        "./dist/calls/index.d.ts"
+      ],
       "studio": [
         "./dist/studio/index.d.ts"
       ],
@@ -257,7 +266,8 @@
     "src/docx/styles.css",
     "src/docx/layout/layout.css",
     "src/docx/README.md",
-    "src/calendar/calendar.css"
+    "src/calendar/calendar.css",
+    "src/calls/calls.css"
   ],
   "scripts": {
     "build": "rm -rf dist && tsup && tsc -p tsconfig.build.json",
@@ -270,8 +280,8 @@
     "example:test:e2e": "playwright test -c examples/custom-ui/playwright.config.ts"
   },
   "dependencies": {
-    "@arbidocs/client": "0.4.109",
-    "@arbidocs/coedit": "0.4.109",
+    "@arbidocs/client": "0.4.110",
+    "@arbidocs/coedit": "0.4.110",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -313,7 +323,7 @@
     "y-protocols": "^1.0.6"
   },
   "peerDependencies": {
-    "@arbidocs/react": "0.4.109",
+    "@arbidocs/react": "0.4.110",
     "@lexical/html": "0.35.0",
     "@lexical/link": "0.35.0",
     "@lexical/list": "0.35.0",

package/src/calls/calls.css

@@ -0,0 +1,157 @@
+/*
+ * Call tiles (`@arbidocs/blocks/calls.css`). Everything around the tiles is plain ARBI chrome
+ * (theme tokens via Tailwind classes); only the video tiles need rules of their own. They sit on
+ * the deep brand navy (`--hero`) so video and initials read the same in light and dark.
+ */
+
+.call-tile-box > .call-tile {
+  width: 100%;
+  height: 100%;
+}
+
+.call-tile {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  container-type: size;
+  border-radius: var(--radius);
+  background-color: hsl(var(--hero));
+  color: #fff;
+}
+
+/* Camera video fills its 16:9 tile; a share is letterboxed so nothing on it is cut off. */
+.call-tile video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% 30%;
+}
+.call-tile[data-source='screen'] video {
+  object-fit: contain;
+}
+/* A selfie view flips the <video> element only: names, initials and icons are siblings, never
+ * inside the transform (a recording drawn from the <video> stays unmirrored too). */
+.call-tile[data-mirror='true'] > video {
+  transform: scaleX(-1);
+}
+
+.call-tile-placeholder {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+.call-tile-avatar {
+  display: flex;
+  width: clamp(2.5rem, 22cqmin, 6rem);
+  aspect-ratio: 1;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: rgb(255 255 255 / 0.14);
+  font-size: clamp(0.875rem, 8cqmin, 1.75rem);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+.call-tile-avatar-sm {
+  width: 2.25rem;
+  font-size: 0.8125rem;
+}
+
+/* A tile too short for both (a filmstrip thumbnail): the name chip carries the person; the large
+ * initials would sit under it. */
+@container (max-height: 96px) {
+  .call-tile-placeholder .call-tile-avatar {
+    display: none;
+  }
+}
+
+/* The name, once, bottom-left (the app's person pill, on its own surface), and the tile's state
+ * icons in a small dark chip beside it. */
+.call-tile-name {
+  position: absolute;
+  left: 0.5rem;
+  bottom: 0.5rem;
+  display: flex;
+  max-width: calc(100% - 1rem);
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  font-weight: 500;
+}
+.call-tile-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: var(--radius);
+  background-color: rgb(0 0 0 / 0.6);
+  padding: 0.1875rem 0.375rem;
+  color: #fff;
+}
+.call-tile-signal {
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+  display: flex;
+  border-radius: var(--radius);
+  background-color: rgb(0 0 0 / 0.6);
+  padding: 0.125rem;
+  color: hsl(var(--yellow-solid));
+}
+
+/* Who is talking: a brand-cyan frame over the video that thickens with the voice level, and a
+ * ring around the avatar that grows with it (camera off). Never colour alone: the name chip also
+ * shows a sound icon, and the panel says "Speaking: …". */
+.call-tile::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 0 solid transparent;
+  border-radius: inherit;
+  pointer-events: none;
+  transition:
+    border-width 60ms linear,
+    border-color 120ms ease-out;
+}
+.call-tile[data-speaking='true']::after {
+  border-color: hsl(var(--theme-cyan));
+  border-width: calc(2px + var(--call-level, 0) * 4px);
+}
+.call-tile-avatar {
+  transition: box-shadow 60ms linear;
+}
+.call-tile[data-speaking='true'] .call-tile-avatar {
+  box-shadow:
+    0 0 0 3px hsl(var(--theme-cyan)),
+    0 0 0 calc(3px + var(--call-level, 0) * 14px) hsl(var(--theme-cyan) / 0.35);
+}
+.call-tile-speaking {
+  color: hsl(var(--theme-cyan));
+}
+
+.call-tile-more {
+  flex-direction: column;
+  gap: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Reduced motion: a steady ring while someone talks, no pulsing with the level. */
+@media (prefers-reduced-motion: reduce) {
+  .call-tile::after,
+  .call-tile-avatar {
+    transition: none;
+  }
+  .call-tile[data-speaking='true']::after {
+    border-width: 4px;
+  }
+  .call-tile[data-speaking='true'] .call-tile-avatar {
+    box-shadow:
+      0 0 0 3px hsl(var(--theme-cyan)),
+      0 0 0 8px hsl(var(--theme-cyan) / 0.35);
+  }
+}