@opencxh/ui-kit 3.165.0 → 3.172.0

package/dist/src/meeting/MeetingGrid.d.ts

@@ -1,12 +1,39 @@
 import { ReactNode } from 'react';
 export interface MeetingGridProps {
     tiles: ReactNode[];
+    /**
+     * De tegel die het vlak krijgt — de dominante spreker, of de tegenpartij in een
+     * 1-op-1. De rest komt als strip eronder te staan.
+     */
     pinned?: ReactNode;
+    /**
+     * Hoeveel striptegels er hoogstens naast elkaar mogen. Wat er overblijft wordt één
+     * `+N`-tegel. Zonder dit past een vergadering van twaalf mensen zich in een dock van
+     * 448px in twaalf onleesbare streepjes, en dat is geen weergave meer maar een rij.
+     */
+    maxStrip?: number;
     className?: string;
 }
+export declare function columnsFor(count: number): string;
 /**
  * Layout primitive for meeting views. When `pinned` is provided it gets the
- * dominant area and remaining tiles render in a sidebar/strip. Otherwise tiles
+ * dominant area and remaining tiles render in a strip underneath. Otherwise tiles
  * flow in an auto-sized grid.
+ *
+ * **Het vlak bepaalt de tegels, niet andersom.** Elke cel is `min-w-0 min-h-0` en de rijen
+ * delen de hoogte (`auto-rows-fr`), zodat het raster past in de doos die het krijgt. Geef de
+ * tegels daarom `fill` mee: een tegel die zijn hoogte uit zijn eigen breedte haalt
+ * (`aspect-video`, de standaard) duwt het raster buiten zijn oevers zodra het vlak lager is
+ * dan die verhouding — precies wat er in de dock gebeurde.
  */
-export declare function MeetingGrid({ tiles, pinned, className }: MeetingGridProps): import("react").JSX.Element;
+/**
+ * Hoeveel striptegels er getoond worden, en hoeveel er als `+N` overblijven.
+ *
+ * De teller neemt zelf een plek in — anders vervangt hij één tegel door de mededeling dat er
+ * één tegel weg is, en dat is geen winst. Bij precies genoeg ruimte blijft hij dus weg.
+ */
+export declare function splitStrip(count: number, maxStrip?: number): {
+    shown: number;
+    hidden: number;
+};
+export declare function MeetingGrid({ tiles, pinned, maxStrip, className }: MeetingGridProps): import("react").JSX.Element;

package/dist/src/meeting/ParticipantTile.d.ts

@@ -19,5 +19,15 @@ export interface ParticipantTileProps {
  * Provider-agnostic participant tile. Shows avatar + name when no video is
  * available; otherwise renders the `videoSlot` passed by the caller (typically
  * a <VideoSurface /> wired to a provider-specific stream renderer).
+ *
+ * **Alles binnenin schaalt met de tegel, niet met het venster.** De tegel is zelf een
+ * container (`@container`), zodat de avatar een percentage van zijn eigen breedte kan zijn en
+ * de naam pas verschijnt als er plek voor is. Dat is het verschil tussen een gesprek in de
+ * hoek-dock en hetzelfde gesprek in theater-modus: dezelfde component, twee maten, en de
+ * viewport-breakpoints van Tailwind (`md:`) zeggen daar niets zinnigs over — die kijken naar
+ * het scherm, terwijl de tegel 120px breed kan zijn op een 4K-monitor.
+ *
+ * Vaste maten stonden hier eerder wél: een avatar van 64px en een naamlabel met `max-w-35`.
+ * In een striptegel van 90px was de avatar breder dan de tegel en dekte het label hem af.
  */
 export declare function ParticipantTile({ name, avatarUrl, muted, speaking, hasVideo, videoSlot, className, fill, }: ParticipantTileProps): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencxh/ui-kit",
-  "version": "3.165.0",
+  "version": "3.172.0",
   "description": "Theme-aware UI component library for OpenCXH platform",
   "type": "module",
   "exports": {