@opencxh/ui-kit 3.166.0 → 3.175.1

package/dist/src/forms/Form.d.ts

@@ -1,4 +1,4 @@
-import { InternalSDK } from '@opencxh/domain';
+import { InvokeOptions } from '@opencxh/domain';
 import { default as React } from 'react';
 export type FormFieldType = "text" | "email" | "password" | "number" | "tel" | "url" | "color" | "textarea" | "select" | "segmented" | "checkbox" | "radio" | "date" | "file" | "folder" | "custom" | "array";
 /**
@@ -148,6 +148,15 @@ export interface FormButtonProps {
     /** Additional CSS classes */
     className?: string;
 }
+/**
+ * The sliver of an app SDK that `Form` needs: one call to the server. Nothing here knows
+ * about the rest of the SDK, which is the point.
+ */
+export interface FormInvoker {
+    http: {
+        invoke<T = any>(options: InvokeOptions): Promise<T>;
+    };
+}
 export interface FormProps<T = Record<string, any>> {
     /** Form groups */
     groups: FormGroup<T>[];
@@ -184,7 +193,16 @@ export interface FormProps<T = Record<string, any>> {
      */
     ref?: React.RefObject<HTMLFormElement | null>;
     /** SDK instance */
-    sdk?: InternalSDK<any>;
+    /**
+     * A handle that can call the server, for the storage fields (`storage`, `folder`).
+     *
+     * Typed as the one method used rather than as the whole `InternalSDK`. That type moved
+     * to `@opencxh/app-sdk` — it is that package's promise, not part of the vocabulary —
+     * and ui-kit has no dependency on it, nor should it need one to render a form. Asking
+     * for what it uses also keeps the storage fields' eventual move out of here (they are
+     * slated to become a federated resource) from being blocked by a type import.
+     */
+    sdk?: FormInvoker;
 }
 /**
  * Generic Form component with groups, validation, and conditional rendering

package/dist/src/index.d.ts

@@ -23,7 +23,7 @@ export { Switch, type SwitchProps } from './input/Switch';
 export { StorageInput, type StorageInputProps } from './input/StorageInput';
 export { TextArea, type TextAreaProps } from './input/TextArea';
 export { TextField, type TextFieldProps } from './input/TextField';
-export { Form, FormSection, type FormButtonProps, type FormFieldType, type FormGroup, type FormGroupItem, type FormProps } from './forms/Form';
+export { Form, FormSection, type FormButtonProps, type FormFieldType, type FormGroup, type FormGroupItem, type FormInvoker, type FormProps } from './forms/Form';
 export { autofillProps, type AutofillProps } from './forms/autofill';
 export { Dropdown, type DropdownOption, type DropdownProps } from './overlays/Dropdown';
 export { ConfirmDialog, type ConfirmDialogProps } from './overlays/ConfirmDialog';

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.166.0",
+  "version": "3.175.1",
   "description": "Theme-aware UI component library for OpenCXH platform",
   "type": "module",
   "exports": {
@@ -37,6 +37,9 @@
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
@@ -45,10 +48,11 @@
     "eslint": "^9.15.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
+    "jsdom": "^26.1.0",
     "typescript": "6.0.3",
     "vite": "7.1.7",
     "vite-plugin-dts": "^5.0.3",
-    "vitest": "^2.1.8"
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "react": ">=19.2.4",