@tavus/cvi-ui 0.0.1-beta.1 → 0.0.1-beta.3

package/dist/templates/tsx/components/controls.tsx

@@ -0,0 +1,279 @@
+import React, { memo, useMemo } from "react";
+import {
+  useAudioTrack,
+  useDaily,
+  useDevices,
+  useLocalSessionId,
+  useVideoTrack,
+} from "@daily-co/daily-react";
+
+export const SelectDevice = ({
+  value,
+  devices,
+  disabled,
+  onChange,
+}: {
+  value: string | undefined;
+  devices: { device: MediaDeviceInfo }[];
+  disabled: boolean;
+  onChange: (value: string) => void;
+}) => {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      disabled={disabled}
+      style={{
+        height: "3rem",
+        width: "5.5rem",
+        borderRadius: "9999px",
+        backgroundColor: "rgba(255, 255, 255, 0.2)",
+        padding: "0 0.75rem",
+        border: "1px solid rgba(255, 255, 255, 0.2)",
+        backdropFilter: "blur(10px)",
+      }}
+    >
+      {devices.map(({ device }) => (
+        <option key={device.deviceId} value={device.deviceId}>
+          {device.label}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export const MicrophoneButton = memo(() => {
+  const daily = useDaily();
+  const localSessionId = useLocalSessionId();
+  const localAudio = useAudioTrack(localSessionId);
+  const { micState, microphones, currentMic, setMicrophone } = useDevices();
+  const isMicReady = useMemo(() => micState === "granted", [micState]);
+  const mutedAudio = localAudio.isOff;
+
+  const handleClick = () => {
+    daily?.setLocalAudio(mutedAudio);
+  };
+
+  return (
+    <div style={{
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "9999px",
+      backdropFilter: "blur(4px)"
+    }}>
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={!isMicReady}
+        style={{
+          position: "absolute",
+          left: 0,
+          top: 0,
+          zIndex: 10,
+          height: "3rem",
+          width: "3rem",
+          borderRadius: "9999px",
+          backgroundColor: "white",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          opacity: !isMicReady ? "0.5" : "1"
+        }}
+      >
+        <span>
+          {mutedAudio || !isMicReady ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              role="img"
+              aria-label="Microphone Muted"
+            >
+              <path
+                d="M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21"
+                stroke="#020617"
+                strokeWidth="1.66667"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <rect
+                x="1.30225"
+                y="3"
+                width="26"
+                height="2.24738"
+                rx="1.12369"
+                transform="rotate(30 1.30225 3)"
+                fill="#020617"
+              />
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z"
+                fill="#020617"
+              />
+              <path
+                d="M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z"
+                fill="#020617"
+              />
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              role="img"
+              aria-label="Microphone"
+            >
+              <path
+                d="M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z"
+                fill="#020617"
+                stroke="#020617"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21"
+                stroke="#020617"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          )}
+        </span>
+        <span style={{ position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0" }}>Microphone</span>
+      </button>
+      <SelectDevice
+        value={currentMic?.device?.deviceId}
+        devices={microphones || []}
+        disabled={!isMicReady}
+        onChange={(val) => setMicrophone(val)}
+      />
+    </div>
+  );
+});
+
+MicrophoneButton.displayName = "MicrophoneButton";
+
+export const CameraButton = memo(() => {
+  const daily = useDaily();
+  const localSessionId = useLocalSessionId();
+  const localVideo = useVideoTrack(localSessionId);
+  const { currentCam, camState, cameras, setCamera } = useDevices();
+  const isCamReady = camState === "granted";
+  const mutedVideo = localVideo.isOff;
+
+  const handleClick = () => {
+    daily?.setLocalVideo(mutedVideo);
+  };
+
+  return (
+    <div style={{
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "9999px",
+      backdropFilter: "blur(4px)"
+    }}>
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={!isCamReady || !currentCam}
+        style={{
+          position: "absolute",
+          left: 0,
+          top: 0,
+          zIndex: 10,
+          height: "3rem",
+          width: "3rem",
+          borderRadius: "9999px",
+          backgroundColor: "white",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          opacity: (!isCamReady || !currentCam) ? "0.5" : "1"
+        }}
+      >
+        <span>
+          {mutedVideo ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              role="img"
+              aria-label="Camera Muted"
+            >
+              <g clipPath="url(#clip0_7082_14220)">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z"
+                  fill="#020617"
+                />
+                <rect
+                  x="0.777222"
+                  y="2.64844"
+                  width="26.7988"
+                  height="2.24738"
+                  rx="1.12369"
+                  transform="rotate(30 0.777222 2.64844)"
+                  fill="#020617"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_7082_14220">
+                  <rect width="24" height="24" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              role="img"
+              aria-label="Camera"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z"
+                fill="#020617"
+              />
+            </svg>
+          )}
+        </span>
+        <span style={{ position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0" }}>Camera</span>
+      </button>
+      <SelectDevice
+        value={currentCam?.device?.deviceId}
+        devices={cameras || []}
+        disabled={!isCamReady}
+        onChange={(val) => setCamera(val)}
+      />
+    </div>
+  );
+});
+
+CameraButton.displayName = "CameraButton";
+
+export const Controls = memo(() => {
+  return (
+    <div style={{ display: 'flex', gap: '10px' }}>
+      <MicrophoneButton />
+      <CameraButton />
+    </div>
+  );
+});

package/dist/templates/tsx/components/cvi-provider.tsx

@@ -0,0 +1,9 @@
+import { DailyProvider } from "@daily-co/daily-react";
+
+export const CVIProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <DailyProvider>
+      {children}
+    </DailyProvider>
+  )
+}

package/dist/types/templates/components.d.ts

@@ -0,0 +1,44 @@
+export declare const components: readonly [{
+    readonly name: "audio-wave";
+    readonly path: "components/audio-wave";
+}, {
+    readonly name: "controls";
+    readonly path: "components/controls";
+}, {
+    readonly name: "conversation-01";
+    readonly path: "components/conversation-01";
+}, {
+    readonly name: "cvi-provider";
+    readonly path: "components/cvi-provider";
+}, {
+    readonly name: "hair-check-01";
+    readonly path: "components/hair-check-01";
+}, {
+    readonly name: "cvi-events-hooks";
+    readonly path: "hooks/cvi-events-hooks";
+}, {
+    readonly name: "use-cvi-call";
+    readonly path: "hooks/use-cvi-call";
+}, {
+    readonly name: "use-local-camera";
+    readonly path: "hooks/use-local-camera";
+}, {
+    readonly name: "use-local-microphone";
+    readonly path: "hooks/use-local-microphone";
+}, {
+    readonly name: "use-local-screenshare";
+    readonly path: "hooks/use-local-screenshare";
+}, {
+    readonly name: "use-remote-participant-ids";
+    readonly path: "hooks/use-remote-participant-ids";
+}, {
+    readonly name: "use-replica-ids";
+    readonly path: "hooks/use-replica-ids";
+}, {
+    readonly name: "use-request-permissions";
+    readonly path: "hooks/use-request-permissions";
+}, {
+    readonly name: "use-start-haircheck";
+    readonly path: "hooks/use-start-haircheck";
+}];
+export type Component = typeof components[number];

package/dist/types/templates/index.d.ts

@@ -0,0 +1,2 @@
+export * as tsx from './tsx';
+export * as jsx from './jsx';

package/dist/types/templates/jsx/index.d.ts

@@ -0,0 +1,14 @@
+export { default as "audio-wave" } from './components/audio-wave.json';
+export { default as "controls" } from './components/controls.json';
+export { default as "conversation-01" } from './components/conversation-01.json';
+export { default as "cvi-provider" } from './components/cvi-provider.json';
+export { default as "hair-check-01" } from './components/hair-check-01.json';
+export { default as "cvi-events-hooks" } from './hooks/cvi-events-hooks.json';
+export { default as "use-cvi-call" } from './hooks/use-cvi-call.json';
+export { default as "use-local-camera" } from './hooks/use-local-camera.json';
+export { default as "use-local-microphone" } from './hooks/use-local-microphone.json';
+export { default as "use-local-screenshare" } from './hooks/use-local-screenshare.json';
+export { default as "use-remote-participant-ids" } from './hooks/use-remote-participant-ids.json';
+export { default as "use-replica-ids" } from './hooks/use-replica-ids.json';
+export { default as "use-request-permissions" } from './hooks/use-request-permissions.json';
+export { default as "use-start-haircheck" } from './hooks/use-start-haircheck.json';

package/dist/types/templates/tsx/index.d.ts

@@ -0,0 +1,14 @@
+export { default as "audio-wave" } from './components/audio-wave.json';
+export { default as "controls" } from './components/controls.json';
+export { default as "conversation-01" } from './components/conversation-01.json';
+export { default as "cvi-provider" } from './components/cvi-provider.json';
+export { default as "hair-check-01" } from './components/hair-check-01.json';
+export { default as "cvi-events-hooks" } from './hooks/cvi-events-hooks.json';
+export { default as "use-cvi-call" } from './hooks/use-cvi-call.json';
+export { default as "use-local-camera" } from './hooks/use-local-camera.json';
+export { default as "use-local-microphone" } from './hooks/use-local-microphone.json';
+export { default as "use-local-screenshare" } from './hooks/use-local-screenshare.json';
+export { default as "use-remote-participant-ids" } from './hooks/use-remote-participant-ids.json';
+export { default as "use-replica-ids" } from './hooks/use-replica-ids.json';
+export { default as "use-request-permissions" } from './hooks/use-request-permissions.json';
+export { default as "use-start-haircheck" } from './hooks/use-start-haircheck.json';

package/dist/types/utils/version-utils.d.ts

@@ -0,0 +1,3 @@
+export declare function removeVersionSuffix(name: string): string;
+export declare function getDefaultVersion(name: string): string;
+export declare function mapUserInputToComponentName(userInput: string): string;

package/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "@tavus/cvi-ui",
-	"version": "0.0.1-beta.1",
+	"version": "0.0.1-beta.3",
 	"description": "A CLI tool for installing and managing CVI components",
-  "publishConfig": {
-    "access": "public"
-  },
+	"publishConfig": {
+		"access": "public"
+	},
 	"keywords": [
 		"cvi",
 		"conversational-video-interface",
@@ -43,6 +43,7 @@
 		"@types/fs-extra": "^11.0.4",
 		"@types/node": "^22.14.0",
 		"@types/prompts": "^2.4.9",
+		"@types/update-notifier": "^6.0.8",
 		"eslint": "^9.24.0",
 		"globals": "^16.0.0",
 		"prettier": "^3.5.3",
@@ -62,6 +63,7 @@
 		"ora": "^8.2.0",
 		"prompts": "^2.4.2",
 		"tsconfig-paths": "^4.2.0",
+		"update-notifier": "^7.3.1",
 		"zod": "^3.24.2"
 	}
 }

package/src/templates/components.ts

@@ -0,0 +1,18 @@
+export const components = [
+  { name: 'audio-wave', path: 'components/audio-wave' },
+  { name: 'controls', path: 'components/controls' },
+  { name: 'conversation-01', path: 'components/conversation-01' },
+  { name: 'cvi-provider', path: 'components/cvi-provider' },
+  { name: 'hair-check-01', path: 'components/hair-check-01' },
+  { name: 'cvi-events-hooks', path: 'hooks/cvi-events-hooks' },
+  { name: 'use-cvi-call', path: 'hooks/use-cvi-call' },
+  { name: 'use-local-camera', path: 'hooks/use-local-camera' },
+  { name: 'use-local-microphone', path: 'hooks/use-local-microphone' },
+  { name: 'use-local-screenshare', path: 'hooks/use-local-screenshare' },
+  { name: 'use-remote-participant-ids', path: 'hooks/use-remote-participant-ids' },
+  { name: 'use-replica-ids', path: 'hooks/use-replica-ids' },
+  { name: 'use-request-permissions', path: 'hooks/use-request-permissions' },
+  { name: 'use-start-haircheck', path: 'hooks/use-start-haircheck' }
+] as const;
+
+export type Component = typeof components[number];

package/src/templates/index.ts

@@ -0,0 +1,2 @@
+export * as tsx from './tsx';
+export * as jsx from './jsx';

package/src/templates/jsx/components/audio-wave.json

@@ -0,0 +1,5 @@
+{
+  "type": "components",
+  "content": "import React, { useCallback, useRef, memo } from 'react';\nimport { useActiveSpeakerId } from '@daily-co/daily-react';\nimport { useAudioLevelObserver } from '@daily-co/daily-react';\nimport styles from './audio-wave.module.css';\n\nexport const AudioWave = memo(({ id }) => {\n\tconst activeSpeakerId = useActiveSpeakerId();\n\tconst isActiveSpeaker = activeSpeakerId === id;\n\n\tconst leftBarRef = useRef(null);\n\tconst centerBarRef = useRef(null);\n\tconst rightBarRef = useRef(null);\n\tconst animationFrameRef = useRef(undefined);\n\n\tuseAudioLevelObserver(\n\t\tid,\n\t\tuseCallback((volume) => {\n\t\t\t// Cancel any pending animation frame to prevent accumulation\n\t\t\tif (animationFrameRef.current) {\n\t\t\t\tcancelAnimationFrame(animationFrameRef.current);\n\t\t\t}\n\n\t\t\t// Use requestAnimationFrame to batch DOM updates\n\t\t\tanimationFrameRef.current = requestAnimationFrame(() => {\n\t\t\t\tconst scaledVolume = Number(Math.max(0.01, volume).toFixed(2));\n\t\t\t\tif (leftBarRef.current && centerBarRef.current && rightBarRef.current) {\n\t\t\t\t\tleftBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t\tcenterBarRef.current.style.height = `${20 + scaledVolume * 130}%`;\n\t\t\t\t\trightBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t}\n\t\t\t});\n\t\t}, [])\n\t);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.waveContainer}>\n\t\t\t\t<div\n\t\t\t\t\tref={leftBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tref={centerBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tref={rightBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nAudioWave.displayName = 'AudioWave';\n",
+  "styles": ".container {\n\toverflow: hidden;\n\tborder: 1px solid white;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tborder-radius: 9999px;\n\twill-change: transform;\n\ttransform: translateZ(0);\n}\n\n.waveContainer {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 0.125rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.bar {\n\twidth: 0.25rem;\n\theight: 0.25rem;\n\tbackground-color: white;\n\tborder-radius: 9999px;\n\ttransition: height 200ms ease-out;\n\twill-change: height;\n\ttransform: translateZ(0);\n}\n\n.barInactive {\n\twidth: 0.25rem !important;\n\theight: 0.25rem !important;\n}\n"
+}

package/src/templates/jsx/components/controls.json

@@ -0,0 +1,10 @@
+{
+  "type": "components",
+  "content": "import React, { memo } from 'react';\nimport { useDevices } from '@daily-co/daily-react';\nimport { useLocalCamera } from '../../hooks/use-local-camera';\nimport { useLocalMicrophone } from '../../hooks/use-local-microphone';\nimport { useLocalScreenshare } from '../../hooks/use-local-screenshare';\nimport styles from './controls.module.css';\n\nexport const SelectDevice = ({ value, devices, disabled, onChange }) => {\n\treturn (\n\t\t<div className={styles.selectDeviceContainer}>\n\t\t\t<select\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={styles.selectDevice}\n\t\t\t>\n\t\t\t\t{devices.map(({ device }) => (\n\t\t\t\t\t<option key={device.deviceId} value={device.deviceId}>\n\t\t\t\t\t\t{device.label}\n\t\t\t\t\t</option>\n\t\t\t\t))}\n\t\t\t</select>\n\t\t\t<span className={styles.selectArrow}>\n\t\t\t\t<svg\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 6L8 10L12 6\"\n\t\t\t\t\t\tstroke=\"#fff\"\n\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</div>\n\t);\n};\n\nexport const MicrophoneButton = memo(() => {\n\tconst { onToggleMicrophone, isMicReady, isMicMuted } = useLocalMicrophone();\n\tconst { microphones, currentMic, setMicrophone } = useDevices();\n\n\treturn (\n\t\t<div className={styles.deviceButtonContainer}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onToggleMicrophone}\n\t\t\t\tdisabled={!isMicReady}\n\t\t\t\tclassName={styles.deviceButton}\n\t\t\t>\n\t\t\t\t<span className={styles.deviceButtonIcon}>\n\t\t\t\t\t{isMicMuted || !isMicReady ? (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Microphone Muted\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"1.66667\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tx=\"1.30225\"\n\t\t\t\t\t\t\t\ty=\"3\"\n\t\t\t\t\t\t\t\twidth=\"26\"\n\t\t\t\t\t\t\t\theight=\"2.24738\"\n\t\t\t\t\t\t\t\trx=\"1.12369\"\n\t\t\t\t\t\t\t\ttransform=\"rotate(30 1.30225 3)\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\td=\"M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Microphone\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t<span className={styles.srOnly}>Microphone</span>\n\t\t\t</button>\n\t\t\t<SelectDevice\n\t\t\t\tvalue={currentMic?.device?.deviceId}\n\t\t\t\tdevices={microphones || []}\n\t\t\t\tdisabled={!isMicReady}\n\t\t\t\tonChange={(val) => setMicrophone(val)}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nMicrophoneButton.displayName = 'MicrophoneButton';\n\nexport const CameraButton = memo(() => {\n\tconst { onToggleCamera, isCamReady, isCamMuted } = useLocalCamera();\n\tconst { currentCam, cameras, setCamera } = useDevices();\n\n\treturn (\n\t\t<div className={styles.deviceButtonContainer}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onToggleCamera}\n\t\t\t\tdisabled={!isCamReady || !currentCam}\n\t\t\t\tclassName={styles.deviceButton}\n\t\t\t>\n\t\t\t\t<span className={styles.deviceButtonIcon}>\n\t\t\t\t\t{isCamMuted ? (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Camera Muted\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<g clipPath=\"url(#clip0_7082_14220)\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z\"\n\t\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\t\tx=\"0.777222\"\n\t\t\t\t\t\t\t\t\ty=\"2.64844\"\n\t\t\t\t\t\t\t\t\twidth=\"26.7988\"\n\t\t\t\t\t\t\t\t\theight=\"2.24738\"\n\t\t\t\t\t\t\t\t\trx=\"1.12369\"\n\t\t\t\t\t\t\t\t\ttransform=\"rotate(30 0.777222 2.64844)\"\n\t\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t<clipPath id=\"clip0_7082_14220\">\n\t\t\t\t\t\t\t\t\t<rect width=\"24\" height=\"24\" fill=\"white\" />\n\t\t\t\t\t\t\t\t</clipPath>\n\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Camera\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\td=\"M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t<span className={styles.srOnly}>Camera</span>\n\t\t\t</button>\n\t\t\t<SelectDevice\n\t\t\t\tvalue={currentCam?.device?.deviceId}\n\t\t\t\tdevices={cameras || []}\n\t\t\t\tdisabled={!isCamReady}\n\t\t\t\tonChange={(val) => setCamera(val)}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nCameraButton.displayName = 'CameraButton';\n\nexport const ScreenShareButton = memo(() => {\n\tconst { onToggleScreenshare, isScreenSharing } = useLocalScreenshare();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={onToggleScreenshare}\n\t\t\tclassName={`${styles.deviceButtonContainer} ${styles.screenShareButton}`}\n\t\t>\n\t\t\t<span>\n\t\t\t\t{isScreenSharing ? (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Screen Share\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M21.0008 19C21.2557 19.0003 21.5009 19.0979 21.6862 19.2728C21.8715 19.4478 21.9831 19.687 21.998 19.9414C22.013 20.1958 21.9302 20.4464 21.7666 20.6418C21.603 20.8373 21.3709 20.9629 21.1178 20.993L21.0008 21H3.00085C2.74597 20.9997 2.50081 20.9021 2.31548 20.7272C2.13014 20.5522 2.01861 20.313 2.00367 20.0586C1.98874 19.8042 2.07152 19.5536 2.23511 19.3582C2.3987 19.1627 2.63075 19.0371 2.88385 19.007L3.00085 19H21.0008ZM19.0008 4C19.5054 3.99984 19.9914 4.19041 20.3614 4.5335C20.7314 4.87659 20.958 5.34684 20.9958 5.85L21.0008 6V16C21.001 16.5046 20.8104 16.9906 20.4673 17.3605C20.1243 17.7305 19.654 17.9572 19.1508 17.995L19.0008 18H5.00085C4.49627 18.0002 4.01028 17.8096 3.6403 17.4665C3.27032 17.1234 3.04369 16.6532 3.00585 16.15L3.00085 16V6C3.00069 5.49542 3.19125 5.00943 3.53434 4.63945C3.87743 4.26947 4.34769 4.04284 4.85085 4.005L5.00085 4H19.0008Z\"\n\t\t\t\t\t\t\tfill=\"#2D65FF\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t) : (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Screen Share\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M20.9999 19C21.2547 19.0003 21.4999 19.0979 21.6852 19.2728C21.8706 19.4478 21.9821 19.687 21.997 19.9414C22.012 20.1958 21.9292 20.4464 21.7656 20.6418C21.602 20.8373 21.37 20.9629 21.1169 20.993L20.9999 21H2.99987C2.74499 20.9997 2.49984 20.9021 2.3145 20.7272C2.12916 20.5522 2.01763 20.313 2.0027 20.0586C1.98776 19.8042 2.07054 19.5536 2.23413 19.3582C2.39772 19.1627 2.62977 19.0371 2.88287 19.007L2.99987 19H20.9999ZM18.9999 4C19.5044 3.99984 19.9904 4.19041 20.3604 4.5335C20.7304 4.87659 20.957 5.34684 20.9949 5.85L20.9999 6V16C21 16.5046 20.8095 16.9906 20.4664 17.3605C20.1233 17.7305 19.653 17.9572 19.1499 17.995L18.9999 18H4.99987C4.49529 18.0002 4.0093 17.8096 3.63932 17.4665C3.26934 17.1234 3.04271 16.6532 3.00487 16.15L2.99987 16V6C2.99971 5.49542 3.19028 5.00943 3.53337 4.63945C3.87646 4.26947 4.34671 4.04284 4.84987 4.005L4.99987 4H18.9999Z\"\n\t\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</button>\n\t);\n});\n\nScreenShareButton.displayName = 'ScreenShareButton';\n",
+  "styles": "/* SelectDevice styles */\n.selectDevice {\n\theight: 3rem;\n\twidth: 5.5rem;\n\tborder-radius: 9999px;\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tpadding: 0 0.75rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n\tbackdrop-filter: blur(10px);\n\tcolor: transparent;\n\tpadding-right: 2rem; /* space for arrow */\n\tbox-sizing: border-box;\n\t-webkit-appearance: none;\n\t-moz-appearance: none;\n\tappearance: none;\n\tcursor: pointer;\n}\n\n.selectDevice::-ms-expand {\n\tdisplay: none;\n}\n\n.selectDevice option {\n\tcolor: transparent;\n\tbackground-color: transparent;\n}\n\n.selectDevice:focus {\n\toutline: none;\n}\n\n/* Device button container styles */\n.deviceButtonContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n}\n\n/* Device button styles */\n.deviceButton {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 10;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: 1px solid transparent;\n\tcursor: pointer;\n}\n\n.deviceButtonIcon {\n\tdisplay: flex;\n}\n\n.deviceButton:disabled {\n\topacity: 0.5;\n}\n\n/* Screen reader only text */\n.srOnly {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder-width: 0;\n}\n\n/* Controls container */\n.controlsContainer {\n\tdisplay: flex;\n\tgap: 1rem;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n.selectDeviceContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.selectArrow {\n\tposition: absolute;\n\tright: 1rem;\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\theight: 100%;\n}\n\n.screenShareButton {\n\tcursor: pointer;\n\tposition: relative;\n\theight: 3rem;\n\twidth: 3rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n}\n",
+  "componentsDependencies": [
+    "use-local-camera",
+    "use-local-microphone",
+    "use-local-screenshare"
+  ]
+}

package/src/templates/jsx/components/conversation-01.json

@@ -0,0 +1,11 @@
+{
+  "type": "components",
+  "content": "import React, { useEffect } from 'react';\nimport {\n\tDailyAudio,\n\tDailyVideo,\n\tuseDaily,\n\tuseDevices,\n\tuseLocalSessionId,\n\tuseMeetingState,\n\tuseScreenVideoTrack,\n\tuseVideoTrack,\n} from '@daily-co/daily-react';\nimport { MicrophoneButton, CameraButton, ScreenShareButton } from '../controls';\nimport { useLocalScreenshare } from '../../hooks/use-local-screenshare';\nimport { useReplicaIDs } from '../../hooks/use-replica-ids';\nimport { AudioWave } from '../audio-wave';\n\nimport styles from './conversation.module.css';\n\nconst VideoPreview = React.memo(({ id }) => {\n\tconst videoState = useVideoTrack(id);\n\tconst widthVideo = videoState.track?.getSettings()?.width;\n\tconst heightVideo = videoState.track?.getSettings()?.height;\n\tconst isVertical = widthVideo && heightVideo ? widthVideo < heightVideo : false;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.previewVideoContainer} ${isVertical ? styles.previewVideoContainerVertical : ''} ${videoState.isOff ? styles.previewVideoContainerHidden : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={id}\n\t\t\t\ttype=\"video\"\n\t\t\t\tclassName={`${styles.previewVideo} ${isVertical ? styles.previewVideoVertical : ''} ${videoState.isOff ? styles.previewVideoHidden : ''}`}\n\t\t\t/>\n\n\t\t\t<div className={styles.audioWaveContainer}>\n\t\t\t\t<AudioWave id={id} />\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nconst PreviewVideos = React.memo(() => {\n\tconst localId = useLocalSessionId();\n\tconst { isScreenSharing } = useLocalScreenshare();\n\tconst replicaIds = useReplicaIDs();\n\tconst replicaId = replicaIds[0];\n\n\treturn (\n\t\t<>\n\t\t\t{isScreenSharing && <VideoPreview id={replicaId} />}\n\t\t\t<VideoPreview id={localId} />\n\t\t</>\n\t);\n});\n\nconst MainVideo = React.memo(() => {\n\tconst replicaIds = useReplicaIDs();\n\tconst localId = useLocalSessionId();\n\tconst videoState = useVideoTrack(replicaIds[0]);\n\tconst screenVideoState = useScreenVideoTrack(localId);\n\tconst isScreenSharing = !screenVideoState.isOff;\n\t// This is one to one call, so we can use the first replica id\n\tconst replicaId = replicaIds[0];\n\n\tif (!replicaId) {\n\t\treturn (\n\t\t\t<div className={styles.waitingContainer}>\n\t\t\t\t<p>Connecting...</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Switching between replica video and screen sharing video\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mainVideoContainer} ${isScreenSharing ? styles.mainVideoContainerScreenSharing : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={isScreenSharing ? localId : replicaId}\n\t\t\t\ttype={isScreenSharing ? 'screenVideo' : 'video'}\n\t\t\t\tclassName={`${styles.mainVideo} \n\t\t\t\t${isScreenSharing ? styles.mainVideoScreenSharing : ''} \n\t\t\t\t${videoState.isOff ? styles.mainVideoHidden : ''}`}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nexport const Conversation = React.memo(({ onLeave, conversation }) => {\n\tconst daily = useDaily();\n\tconst meetingState = useMeetingState();\n\tconst { hasMicError } = useDevices();\n\n\tuseEffect(() => {\n\t\tif (meetingState === 'error') {\n\t\t\tonLeave();\n\t\t}\n\t}, [meetingState, onLeave]);\n\n\t// Initialize call when conversation is available\n\tuseEffect(() => {\n\t\tif (conversation?.conversation_url) {\n\t\t\tdaily?.join({\n\t\t\t\turl: conversation.conversation_url,\n\t\t\t});\n\t\t}\n\t}, [conversation, daily]);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.videoContainer}>\n\t\t\t\t{hasMicError && (\n\t\t\t\t\t<div className={styles.errorContainer}>\n\t\t\t\t\t\t<p>Camera or microphone access denied. Please check your settings and try again.</p>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Main video */}\n\t\t\t\t<div className={styles.mainVideoContainer}>\n\t\t\t\t\t<MainVideo />\n\t\t\t\t</div>\n\n\t\t\t\t{/* Self view */}\n\t\t\t\t<div className={styles.selfViewContainer}>\n\t\t\t\t\t<PreviewVideos />\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className={styles.footer}>\n\t\t\t\t<div className={styles.footerControls}>\n\t\t\t\t\t<MicrophoneButton />\n\t\t\t\t\t<CameraButton />\n\t\t\t\t\t<ScreenShareButton />\n\t\t\t\t\t<button type=\"button\" className={styles.leaveButton} onClick={onLeave}>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Leave Call\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M18 6L6 18M6 6L18 18\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<DailyAudio />\n\t\t</div>\n\t);\n});\n",
+  "styles": ".container {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n\tbackground: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\n\tbackground-size: 400% 400%;\n\tanimation: gradient 15s ease infinite;\n}\n\n@media (min-width: 768px) {\n\t.container {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.errorContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: rgba(248, 250, 252, 0.08);\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n\ttext-align: center;\n}\n\n.videoContainer {\n\tposition: relative;\n\tz-index: 5;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.footer {\n\tposition: absolute;\n\tbottom: 1.5rem;\n\tleft: 0;\n\tright: 0;\n\tz-index: 20;\n}\n\n.footerControls {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 16px;\n}\n\n.leaveButton {\n\tbackground: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n\tcolor: white;\n\tborder: none;\n\tfont-size: 16px;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: #ef4444;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.leaveButton:hover {\n\topacity: 0.8;\n}\n\n/* ReplicaVideo styles */\n.mainVideoContainer {\n\tbackground: transparent;\n\twidth: 100%;\n\theight: 100%;\n\tposition: relative;\n}\n\n.mainVideoContainerScreenSharing {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.mainVideo {\n\tposition: absolute;\n\tinset: 0;\n\tobject-position: center;\n\tobject-fit: cover !important;\n\theight: 100%;\n\twidth: 100%;\n\ttransition: all 0.3s ease;\n}\n\n.mainVideoScreenSharing {\n\tobject-fit: contain !important;\n}\n\n.mainVideoHidden {\n\tdisplay: none;\n}\n\n/* PreviewVideo styles */\n.previewVideoContainer {\n\tposition: relative;\n\tbackground: rgba(2, 6, 23, 0.3);\n\taspect-ratio: 16/9;\n\twidth: 11rem;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\tmax-height: 120px;\n\tz-index: 10;\n}\n\n@media (min-width: 768px) {\n\t.previewVideoContainer {\n\t\tmax-height: 100%;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.previewVideoContainer {\n\t\twidth: 17.875rem;\n\t}\n}\n\n.previewVideoContainerVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n}\n\n.previewVideoContainerHidden {\n\tbackground: transparent;\n\tdisplay: none;\n}\n\n.previewVideo {\n\twidth: 100%;\n\theight: auto;\n\tmax-height: 120px;\n}\n\n@media (min-width: 768px) {\n\t.previewVideo {\n\t\tmax-height: 100%;\n\t}\n}\n\n.previewVideoVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n\tobject-fit: cover;\n}\n\n.previewVideoHidden {\n\tdisplay: none;\n}\n\n/* Main video container */\n.mainVideoContainer {\n\twidth: 100%;\n\theight: 100%;\n}\n\n/* Self view container */\n.selfViewContainer {\n\tposition: absolute;\n\tbottom: 5rem;\n\tleft: 1rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-direction: column;\n\tgap: 0.75rem;\n}\n\n@media (min-width: 768px) {\n\t.selfViewContainer {\n\t\tbottom: 1rem;\n\t}\n}\n\n/* Waiting message container */\n/* Start of Selection */\n.waitingContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: transparent;\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n}\n\n@keyframes gradient {\n\t0% {\n\t\tbackground-position: 0% 50%;\n\t}\n\t50% {\n\t\tbackground-position: 100% 50%;\n\t}\n\t100% {\n\t\tbackground-position: 0% 50%;\n\t}\n}\n/* End of Selection */\n\n.audioWaveContainer {\n\tposition: absolute;\n\tbottom: 0.5rem;\n\tright: 0.5rem;\n}\n",
+  "componentsDependencies": [
+    "controls",
+    "use-local-screenshare",
+    "use-replica-ids",
+    "audio-wave"
+  ]
+}

package/src/templates/jsx/components/cvi-provider.json

@@ -0,0 +1,5 @@
+{
+  "type": "components",
+  "content": "import { DailyProvider } from '@daily-co/daily-react';\n\nexport const CVIProvider = ({ children }) => {\n\treturn <DailyProvider>{children}</DailyProvider>;\n};\n",
+  "styles": ""
+}

package/src/templates/jsx/components/hair-check-01.json

@@ -0,0 +1,10 @@
+{
+  "type": "components",
+  "content": "import React, { memo, useEffect } from 'react';\nimport { DailyVideo, useDaily } from '@daily-co/daily-react';\nimport { CameraButton, MicrophoneButton } from '../controls';\nimport { useStartHaircheck } from '../../hooks/use-start-haircheck';\nimport { useLocalCamera } from '../../hooks/use-local-camera';\n\nimport styles from './hair-check.module.css';\n\nconst JoinBtn = ({ onClick, disabled, className, loading }) => {\n\treturn (\n\t\t<button\n\t\t\tclassName={`${styles.buttonJoin} ${className || ''}`}\n\t\t\ttype=\"button\"\n\t\t\tonClick={onClick}\n\t\t\tdisabled={disabled || loading}\n\t\t>\n\t\t\t<div className={styles.buttonJoinInner}>{loading ? 'Joining...' : 'Join Video Chat'}</div>\n\t\t</button>\n\t);\n};\n\nexport const HairCheck = memo(({ isJoinBtnLoading = false, onJoin, onCancel }) => {\n\tconst daily = useDaily();\n\tconst { localSessionId, isCamMuted } = useLocalCamera();\n\n\tconst {\n\t\tisPermissionsPrompt,\n\t\tisPermissionsLoading,\n\t\tisPermissionsGranted,\n\t\tisPermissionsDenied,\n\t\trequestPermissions,\n\t} = useStartHaircheck();\n\n\tuseEffect(() => {\n\t\trequestPermissions();\n\t}, []);\n\n\tconst onCancelHairCheck = () => {\n\t\tif (daily) {\n\t\t\tdaily.leave();\n\t\t}\n\t\tonCancel?.();\n\t};\n\n\tconst getDescription = () => {\n\t\tif (isPermissionsPrompt) {\n\t\t\treturn 'Make sure your camera and mic are ready!';\n\t\t}\n\t\tif (isPermissionsLoading) {\n\t\t\treturn 'Getting your camera and mic ready...';\n\t\t}\n\t\tif (isPermissionsDenied) {\n\t\t\treturn 'Camera and mic access denied. Allow permissions to continue.';\n\t\t}\n\t\treturn \"You're all set! Your device is ready.\";\n\t};\n\treturn (\n\t\t<div className={styles.haircheckBlock}>\n\t\t\t{isPermissionsGranted && !isCamMuted ? (\n\t\t\t\t<DailyVideo type=\"video\" sessionId={localSessionId} mirror className={styles.dailyVideo} />\n\t\t\t) : (\n\t\t\t\t<div className={styles.haircheckUserPlaceholder}>\n\t\t\t\t\t<span className={styles.haircheckUserIcon}>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"88\"\n\t\t\t\t\t\t\theight=\"89\"\n\t\t\t\t\t\t\tviewBox=\"0 0 88 89\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\taria-label=\"Haircheck User\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M44 48.6406C17.952 48.6406 8.80005 61.8406 8.80005 70.6406V83.8406H79.2001V70.6406C79.2001 61.8406 70.0481 48.6406 44 48.6406Z\"\n\t\t\t\t\t\t\t\tfill=\"url(#paint0_linear_7135_21737)\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M44 44.2406C54.9352 44.2406 63.7999 35.3759 63.7999 24.4406C63.7999 13.5054 54.9352 4.64062 44 4.64062C33.0647 4.64062 24.2 13.5054 24.2 24.4406C24.2 35.3759 33.0647 44.2406 44 44.2406Z\"\n\t\t\t\t\t\t\t\tfill=\"url(#paint1_linear_7135_21737)\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t<linearGradient\n\t\t\t\t\t\t\t\t\tid=\"paint0_linear_7135_21737\"\n\t\t\t\t\t\t\t\t\tx1=\"36.5001\"\n\t\t\t\t\t\t\t\t\ty1=\"43\"\n\t\t\t\t\t\t\t\t\tx2=\"44.0001\"\n\t\t\t\t\t\t\t\t\ty2=\"97.5\"\n\t\t\t\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<stop stopColor=\"white\" />\n\t\t\t\t\t\t\t\t\t<stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n\t\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t\t<linearGradient\n\t\t\t\t\t\t\t\t\tid=\"paint1_linear_7135_21737\"\n\t\t\t\t\t\t\t\t\tx1=\"44\"\n\t\t\t\t\t\t\t\t\ty1=\"4.64062\"\n\t\t\t\t\t\t\t\t\tx2=\"44\"\n\t\t\t\t\t\t\t\t\ty2=\"44.2406\"\n\t\t\t\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<stop stopColor=\"white\" />\n\t\t\t\t\t\t\t\t\t<stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n\t\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<div className={styles.haircheckSidebar}>\n\t\t\t\t<div className={styles.haircheckSidebarContent}>\n\t\t\t\t\t{isPermissionsDenied ? (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={onCancelHairCheck}\n\t\t\t\t\t\t\tclassName={`${styles.buttonCancel} ${styles.buttonJoinMobile}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<JoinBtn\n\t\t\t\t\t\t\tloading={isJoinBtnLoading}\n\t\t\t\t\t\t\tdisabled={!isPermissionsGranted}\n\t\t\t\t\t\t\tclassName={styles.buttonJoinMobile}\n\t\t\t\t\t\t\tonClick={onJoin}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<div />\n\t\t\t\t\t<div className={styles.haircheckContent}>\n\t\t\t\t\t\t<div className={styles.haircheckDescription}>{getDescription()}</div>\n\t\t\t\t\t\t{isPermissionsDenied ? (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={onCancelHairCheck}\n\t\t\t\t\t\t\t\tclassName={`${styles.buttonCancel} ${styles.buttonJoinDesktop}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<JoinBtn\n\t\t\t\t\t\t\t\tloading={isJoinBtnLoading}\n\t\t\t\t\t\t\t\tdisabled={!isPermissionsGranted}\n\t\t\t\t\t\t\t\tclassName={styles.buttonJoinDesktop}\n\t\t\t\t\t\t\t\tonClick={onJoin}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={styles.haircheckControls}>\n\t\t\t\t\t\t<MicrophoneButton />\n\t\t\t\t\t\t<CameraButton />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nHairCheck.displayName = 'HairCheck';\n",
+  "styles": "/* Button Component */\n/* Start of Selection */\n.buttonCancel {\n\tpadding: 1rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(239, 68, 68, 0.8);\n\tborder-radius: 9999px;\n\tcolor: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n\toutline: none;\n}\n\n.buttonCancel:hover {\n\tbackground-color: rgba(239, 68, 68, 1);\n}\n/* End of Selection */\n\n/* ButtonJoin Component */\n.buttonJoin {\n\tpadding: 5px;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tborder-radius: 9999px;\n\tcolor: white;\n\theight: 3.625rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n}\n\n.buttonJoinInner {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: #32c75c;\n\tborder-radius: 9999px;\n\tpadding: 1rem;\n\tbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n\theight: 3rem;\n\ttransition: background-color 0.2s;\n\tfont-weight: 500;\n\tmin-width: 8.5rem;\n}\n\n.buttonJoin:hover .buttonJoinInner {\n\tbackground-color: rgba(62, 192, 97, 0.9);\n}\n\n.buttonJoin:disabled .buttonJoinInner {\n\tbackground-color: rgba(34, 197, 94, 0.5);\n\tcursor: not-allowed;\n}\n\n.buttonJoinDesktop {\n\tdisplay: none;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinDesktop {\n\t\tdisplay: flex;\n\t}\n}\n\n.buttonJoinMobile {\n\tposition: absolute;\n\ttop: -5.125rem;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tz-index: 20;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinMobile {\n\t\tdisplay: none;\n\t}\n}\n\n/* HaircheckScreen Component */\n.haircheckBlock {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n}\n\n@media (min-width: 768px) {\n\t.haircheckBlock {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.dailyVideo {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover !important;\n\tposition: absolute;\n\tinset: 0;\n\ttransition: opacity 0.3s ease-in-out;\n}\n\n.haircheckUserPlaceholder {\n\tposition: absolute;\n\tinset: 0;\n\tbackground-color: #334155;\n\tz-index: 5;\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckUserIcon {\n\twidth: 12.5rem;\n\theight: 12.5rem;\n\tborder-radius: 9999px;\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckSidebar {\n\tposition: absolute;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\twidth: 100%;\n\tbackground-color: rgba(2, 6, 23, 0.45);\n\tbackdrop-filter: blur(20px);\n\tborder-left: 1px solid rgba(255, 255, 255, 0.2);\n\tz-index: 5;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebar {\n\t\tleft: auto;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 17.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebar {\n\t\twidth: 23rem;\n\t}\n}\n\n.haircheckSidebarContent {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 1.5rem 1.25rem;\n\tgap: 1.5rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 1rem 1.25rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 2rem 1.25rem;\n\t}\n}\n\n.haircheckContent {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 2rem;\n}\n\n.haircheckDescription {\n\tcolor: #ffffff;\n\tfont-size: 1.125rem;\n\tfont-weight: 500;\n}\n\n@media (min-width: 768px) {\n\t.haircheckDescription {\n\t\tfont-size: 1.25rem;\n\t}\n}\n\n.haircheckControls {\n\tdisplay: flex;\n\talign-items: flex-end;\n\tjustify-content: space-between;\n\tgap: 1rem;\n}\n",
+  "componentsDependencies": [
+    "controls",
+    "use-start-haircheck",
+    "use-local-camera"
+  ]
+}

package/src/templates/jsx/hooks/cvi-events-hooks.json

@@ -0,0 +1,5 @@
+{
+  "type": "hooks",
+  "content": "import { useCallback } from 'react';\nimport { useAppMessage, useDailyEvent } from '@daily-co/daily-react';\n\nexport function useObservableEvent(callback) {\n\treturn useDailyEvent(\n\t\t'app-message',\n\t\tuseCallback(\n\t\t\t(event) => {\n\t\t\t\tcallback(event.data);\n\t\t\t},\n\t\t\t[callback]\n\t\t)\n\t);\n}\n\nexport function useSendAppMessage() {\n\tconst sendAppMessage = useAppMessage();\n\n\treturn useCallback(\n\t\t(message) => {\n\t\t\tsendAppMessage({ msg: message }, '*');\n\t\t},\n\t\t[sendAppMessage]\n\t);\n}\n",
+  "styles": ""
+}

package/src/templates/jsx/hooks/use-cvi-call.json

@@ -0,0 +1,5 @@
+{
+  "type": "hooks",
+  "content": "import { useCallback } from 'react';\nimport { useDaily } from '@daily-co/daily-react';\n\nexport const useCVICall = () => {\n\tconst daily = useDaily();\n\n\tconst joinCall = useCallback(\n\t\t({ url }) => {\n\t\t\tdaily?.join({\n\t\t\t\turl: url,\n\t\t\t});\n\t\t},\n\t\t[daily]\n\t);\n\n\tconst leaveCall = useCallback(() => {\n\t\tdaily?.leave();\n\t}, [daily]);\n\n\treturn { joinCall, leaveCall };\n};\n",
+  "styles": ""
+}

package/src/templates/jsx/hooks/use-local-camera.json

@@ -0,0 +1,5 @@
+{
+  "type": "hooks",
+  "content": "import { useCallback, useMemo } from 'react';\nimport { useDaily, useDevices, useLocalSessionId, useVideoTrack } from '@daily-co/daily-react';\n\nexport const useLocalCamera = () => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff: isCamMuted } = useVideoTrack(localSessionId);\n\tconst { camState } = useDevices();\n\tconst isCamReady = useMemo(() => camState === 'granted', [camState]);\n\n\tconst onToggleCamera = useCallback(() => {\n\t\tdaily?.setLocalVideo(isCamMuted);\n\t}, [daily, isCamMuted]);\n\n\treturn {\n\t\tisCamReady,\n\t\tisCamMuted,\n\t\tlocalSessionId,\n\t\tonToggleCamera,\n\t};\n};\n",
+  "styles": ""
+}

package/src/templates/jsx/hooks/use-local-microphone.json

@@ -0,0 +1,5 @@
+{
+  "type": "hooks",
+  "content": "import { useCallback, useMemo } from 'react';\nimport { useAudioTrack, useDaily, useDevices, useLocalSessionId } from '@daily-co/daily-react';\n\nexport const useLocalMicrophone = () => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff: isMicMuted } = useAudioTrack(localSessionId);\n\tconst { micState } = useDevices();\n\tconst isMicReady = useMemo(() => micState === 'granted', [micState]);\n\n\tconst onToggleMicrophone = useCallback(() => {\n\t\tdaily?.setLocalAudio(isMicMuted);\n\t}, [daily, isMicMuted]);\n\n\treturn {\n\t\tisMicReady,\n\t\tisMicMuted,\n\t\tlocalSessionId,\n\t\tonToggleMicrophone,\n\t};\n};\n",
+  "styles": ""
+}

package/src/templates/jsx/hooks/use-local-screenshare.json

@@ -0,0 +1,5 @@
+{
+  "type": "hooks",
+  "content": "import { useCallback } from 'react';\nimport { useDaily, useLocalSessionId, useScreenVideoTrack } from '@daily-co/daily-react';\n\nexport const useLocalScreenshare = () => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff } = useScreenVideoTrack(localSessionId);\n\tconst isScreenSharing = !isOff;\n\n\tconst onToggleScreenshare = useCallback(() => {\n\t\tif (isScreenSharing) {\n\t\t\tdaily?.stopScreenShare();\n\t\t} else {\n\t\t\tdaily?.startScreenShare({\n\t\t\t\tdisplayMediaOptions: {\n\t\t\t\t\taudio: false,\n\t\t\t\t\tselfBrowserSurface: 'exclude',\n\t\t\t\t\tsurfaceSwitching: 'include',\n\t\t\t\t\tvideo: {\n\t\t\t\t\t\twidth: 1920,\n\t\t\t\t\t\theight: 1080,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [daily, isScreenSharing]);\n\n\treturn {\n\t\tisScreenSharing,\n\t\tlocalSessionId,\n\t\tonToggleScreenshare,\n\t};\n};\n",
+  "styles": ""
+}

package/src/templates/jsx/hooks/use-remote-participant-ids.json

@@ -0,0 +1,5 @@
+{
+  "type": "hooks",
+  "content": "import { useParticipantIds } from '@daily-co/daily-react';\n\nexport const useRemoteParticipantIDs = () => {\n\tconst remoteParticipantIds = useParticipantIds({ filter: 'remote' });\n\n\treturn remoteParticipantIds;\n};\n",
+  "styles": ""
+}

package/src/templates/jsx/hooks/use-replica-ids.json

@@ -0,0 +1,5 @@
+{
+  "type": "hooks",
+  "content": "import { useParticipantIds } from '@daily-co/daily-react';\n\nexport const useReplicaIDs = () => {\n\tconst replicasIDs = useParticipantIds({\n\t\tfilter: (participant) => participant.user_id.includes('tavus-replica'),\n\t});\n\n\treturn replicasIDs;\n};\n",
+  "styles": ""
+}

package/src/templates/jsx/hooks/use-request-permissions.json

@@ -0,0 +1,5 @@
+{
+  "type": "hooks",
+  "content": "import { useCallback } from 'react';\nimport { useDaily } from '@daily-co/daily-react';\n\nexport const useRequestPermissions = () => {\n\tconst daily = useDaily();\n\n\tconst requestPermissions = useCallback(async () => {\n\t\treturn await daily.startCamera({\n\t\t\tstartVideoOff: false,\n\t\t\tstartAudioOff: false,\n\t\t\taudioSource: 'default',\n\t\t\tinputSettings: {\n\t\t\t\taudio: {\n\t\t\t\t\tprocessor: {\n\t\t\t\t\t\ttype: 'noise-cancellation',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}, [daily]);\n\n\treturn requestPermissions;\n};\n",
+  "styles": ""
+}