@ai-matrx/meet 0.7.75 → 0.7.76

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog — `@ai-matrx/meet`
 
+## 0.7.76
+
+**The pre-join lobby is the design system, not a second one.** Before this, the
+lobby rendered native `<select>`, `<input type="checkbox">` and pill `<button>`s
+styled by this package's own CSS, so the first screen of every meeting looked
+like a different product, and its settings column was `0.8fr` of the screen
+(≈1,000px wide on a 2560px display, Join button stranded at the far edge).
+
+- Device pickers (`DevicePicker`, also used in the in-room settings) are the
+  design-system `Select`; noise suppression and the join toggles are `Checkbox`
+  + `Label`; the background choice is `SegmentedControl`; Test and Join now are
+  `Button`; the recording-consent notice is `Alert` (`info`).
+- Layout: the settings column holds at 300–400px and the composition centres
+  inside 1,200px.
+- Guard: `components.test.tsx` "the pre-join lobby renders design-system
+  controls, never native ones" (fails on 0.7.75, passes here).
+
+Consumer action: none.
+
 ## 0.7.75
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/react.cjs

@@ -9849,38 +9849,40 @@ function EffectsSettings({ preview }) {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "mx-meet__section", "aria-label": "Effects", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__toggle", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__check", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "input",
+        import_design_system.Checkbox,
         {
-          type: "checkbox",
+          id: "mx-meet-noise",
           checked: effects.effects.noiseSuppression,
-          onChange: (event) => apply({ noiseSuppression: event.target.checked })
+          onCheckedChange: (checked) => apply({ noiseSuppression: checked === true })
         }
       ),
-      "Noise suppression",
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__hint", children: "Filters keyboards, fans and background chatter." })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__check-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.Label, { htmlFor: "mx-meet-noise", children: "Noise suppression" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__hint", children: "Filters keyboards, fans and background chatter." })
+      ] })
     ] }),
     supported ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__field-label", children: "Background" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-meet__pills", role: "radiogroup", "aria-label": "Background", children: ["none", "blur", "image"].map((kind) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "button",
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.Label, { children: "Background" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_design_system.SegmentedControl,
         {
-          type: "button",
-          role: "radio",
-          "aria-checked": effects.effects.background === kind,
-          className: effects.effects.background === kind ? "mx-meet__pill mx-meet__pill--on" : "mx-meet__pill",
-          onClick: () => {
+          value: effects.effects.background,
+          onValueChange: (kind) => {
             if (kind === "image") {
               fileRef.current?.click();
               return;
             }
             apply({ background: kind });
           },
-          children: kind === "none" ? "None" : kind === "blur" ? "Blur" : "Picture\u2026"
-        },
-        kind
-      )) }),
+          data: [
+            { value: "none", label: "None" },
+            { value: "blur", label: "Blur" },
+            { value: "image", label: "Picture\u2026" }
+          ]
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "input",
         {
@@ -10264,10 +10266,10 @@ function PreJoinBody({
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__field-row", children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DevicePicker, { kind: "audiooutput", label: "Speaker" }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          "button",
+          import_design_system.Button,
           {
             type: "button",
-            className: "mx-meet__chip",
+            variant: "outline",
             disabled: speakerTesting,
             onClick: () => {
               setSpeakerTesting(true);
@@ -10276,7 +10278,7 @@ function PreJoinBody({
               );
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SpeakerIcon, { width: 14, height: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SpeakerIcon, {}),
               " ",
               speakerTesting ? "Playing\u2026" : "Test"
             ]
@@ -10285,35 +10287,36 @@ function PreJoinBody({
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DevicePicker, { kind: "videoinput", label: "Camera" }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EffectsSettings, { preview: preview.preview }),
-      recording.consentNotice !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__consent", children: recording.consentNotice }) : null,
+      recording.consentNotice !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.Alert, { variant: "info", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.AlertDescription, { children: recording.consentNotice }) }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__prejoin-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__toggle", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__check", children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "input",
+            import_design_system.Checkbox,
             {
-              type: "checkbox",
+              id: "mx-meet-join-video",
               checked: mode === "video",
-              onChange: (event) => setMode(event.target.checked ? "video" : "audio")
+              onCheckedChange: (checked) => setMode(checked === true ? "video" : "audio")
             }
           ),
-          "Join with video"
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.Label, { htmlFor: "mx-meet-join-video", children: "Join with video" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__toggle", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__check", children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "input",
+            import_design_system.Checkbox,
             {
-              type: "checkbox",
+              id: "mx-meet-join-mic",
               checked: microphone,
-              onChange: (event) => setMicrophone(event.target.checked)
+              onCheckedChange: (checked) => setMicrophone(checked === true)
             }
           ),
-          "Join with microphone"
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.Label, { htmlFor: "mx-meet-join-mic", children: "Join with microphone" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
+          import_design_system.Button,
           {
             type: "button",
-            className: "mx-meet__primary",
+            className: "mx-meet__join",
+            disabled: joining,
             onClick: () => {
               setJoining(true);
               preview.release();
@@ -10386,18 +10389,24 @@ function DevicePicker({
   const devices = useDeviceSnapshot();
   const list = devices?.devices[kind] ?? [];
   if (list.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__field", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__field-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "select",
+  const triggerId = `mx-meet-device-${kind}`;
+  const valueOf = (deviceId2) => deviceId2.length > 0 ? deviceId2 : "default";
+  const current = devices?.selected[kind] ?? host.devices.resolve(kind) ?? "";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.Label, { htmlFor: triggerId, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_design_system.Select,
       {
-        className: "mx-meet__select",
-        value: devices?.selected[kind] ?? host.devices.resolve(kind) ?? "",
-        onChange: (event) => {
-          if (onPick !== void 0) onPick(kind, event.target.value);
-          else host.devices.select(kind, event.target.value);
+        ...current.length > 0 ? { value: valueOf(current) } : {},
+        onValueChange: (value) => {
+          const deviceId2 = list.find((device) => valueOf(device.deviceId) === value)?.deviceId ?? value;
+          if (onPick !== void 0) onPick(kind, deviceId2);
+          else host.devices.select(kind, deviceId2);
         },
-        children: list.map((device) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: device.deviceId, children: device.label.length > 0 ? device.label : `${label} (name hidden)` }, device.deviceId))
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.SelectTrigger, { id: triggerId, "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.SelectValue, { placeholder: label }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.SelectContent, { children: list.map((device) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.SelectItem, { value: valueOf(device.deviceId), children: device.label.length > 0 ? device.label : `${label} (name hidden)` }, device.deviceId || "default")) })
+        ]
       }
     )
   ] });