@q9labsai/chalk-react 4.1.17 → 5.0.0

package/README.md

@@ -13,7 +13,7 @@ pnpm add @q9labsai/chalk-client @q9labsai/chalk-react
 ## Turnkey UI
 
 Provide a Space slug and a `getAccess` callback. Chalk creates and owns the
-client, renders the Entrance by default, and releases its owned client when it
+client, joins directly through CallLimbo, and releases its owned client when it
 unmounts.
 
 ```tsx
@@ -48,36 +48,17 @@ Pass an existing client when its lifecycle belongs to the embedding
 application. Chalk will use it without disposing it.
 
 ```tsx
-<Chalk client={spaceClient} entrance={false} />
+<Chalk client={spaceClient} />
 ```
 
-### Feedback
+`theme` controls color scheme, accent and typed token overrides.
 
-The live surface includes a Feedback action. Opening it captures the Chalk
-surface, bounded Journey and trace context, recent safe diagnostics, and only
-the documented Chalk local-state and cookie fields. The Participant can review,
-refresh, or remove the screenshot before sending a bug, feature request, or
-other feedback directly to Chalk. Screenshot failure never blocks the message.
-
-Embedded products should keep the default `feedbackSource="embedded"`. Chalk's
-first-party web surface sets `feedbackSource="chalk_web"`.
-
-`theme` is the only styling door. `skin` defaults to `"classic"`; choose
-`"chalk"` when you want the hand-drawn Chalk skin. Palette and texture are
-independent from the skin, so the same palette and texture can compose with
-either choice. Chalk emits the closed token-key set as CSS custom properties
-scoped to its root. Size and place Chalk with its parent element.
-
-`colorScheme` accepts `light`, `dark`, or `system`. With `system`, Chalk follows
-the browser preference while keeping explicit token overrides in place.
+`colorScheme` accepts `light` or `dark` and defaults to dark. Use `onColorSchemeChange` to persist the choice from the call details popover.
 
 ```tsx
 <Chalk
   client={spaceClient}
   theme={{
-    skin: "chalk",
-    palette: "warm-charcoal",
-    texture: "paper",
     colorScheme: "dark",
     accent: "#4b9bb8",
     tokens: { canvas: "#152127", surface: "#1d2b31" },
@@ -85,43 +66,6 @@ the browser preference while keeping explicit token overrides in place.
 />
 ```
 
-`COSMIC_CHALK_THEME` is a ready-made Chalk-skin theme with a midnight board,
-moon-white text, comet-blue focus states, and a slate grain. The preset selects
-`skin: "chalk"`; it works on the full Space and the standalone Entrance.
-
-```tsx
-import { Chalk, COSMIC_CHALK_THEME, Entrance } from "@q9labsai/chalk-react";
-
-<Chalk client={spaceClient} theme={COSMIC_CHALK_THEME} />;
-
-<Entrance spaceName="Design review" theme={COSMIC_CHALK_THEME} onJoin={(settings) => spaceClient.join(settings)} />;
-```
-
-## Hand-drawn UI
-
-The `chalk` skin uses the SDK's chalk-drawn controls throughout. Its rough SVG
-edges, powder passes, and focus marks are deterministic, while buttons, inputs,
-toggles, dialogs, menus, and sliders remain native accessible controls. The
-default `classic` skin keeps the same typed palette and texture choices without
-the hand-drawn treatment.
-
-The same pieces are public for custom panels. Each accepts a stable `seed` when
-you want a specific stroke to stay identical across renders.
-Directly imported `Chalk*` primitives keep their hand-drawn identity; the skin
-switch belongs to the turnkey `<Chalk />` and standalone `Entrance` surfaces.
-
-```tsx
-import { ChalkButton, ChalkInput, ChalkPanel, ChalkToggle } from "@q9labsai/chalk-react";
-
-<ChalkPanel seed="participant-settings">
-  <ChalkInput aria-label="Display name" defaultValue="Hasan" seed="display-name" />
-  <ChalkToggle aria-label="Noise suppression" defaultPressed seed="noise-suppression" />
-  <ChalkButton tone="accent" variant="solid" seed="save-settings">
-    Save settings
-  </ChalkButton>
-</ChalkPanel>;
-```
-
 ## Custom UI
 
 `ChalkProvider` only shares a `SpaceClient` with React. It does not join,
@@ -163,11 +107,28 @@ returns it unchanged, and `SpaceClient` handles refresh and recovery.
 
 ## Component maintenance
 
-`transcript-panel-behavior.ts`, `settings-dialog-behavior.ts`, and
-`control-bar-behavior.ts` own the shared contracts, state, and commands for their
-components. Their `Classic*.tsx` and Chalk-skin `*.tsx` counterparts own
-skin-specific rendering; keep behavior out of those paired renderers.
+`control-bar-behavior.ts` owns the shared contracts, state, and commands for the
+controls. The component files own presentation.
 
 The SDK-owned `@q9labsai/chalk-react/preview` dev-tool entrypoint exposes the
 preview contract used by the first-party gallery. Application previews should
 consume that entrypoint instead of reaching into this package's `src` tree.
+
+### Screen sharing
+
+`useScreenShare()` returns the local screen state, optional `capture: { surface, label }`, and `setEnabled(enabled, options?)`. For example, `await share.setEnabled(true, { surface: "browser", audio: true })` opens the browser picker with a tab hint. `surface` is only a hint; read `capture.surface` for what was actually chosen. `audio` publishes a separate `screen_audio` track when the browser returns one. `hasAudio` reports local share audio; `useParticipants()` exposes `media.screenShareHasAudio` for remote shares. `AudioOutput` plays it through the selected call speaker, using the existing participant/global volume controls. Recordings exclude shared tab audio. `useMedia().screenShare` exposes the same capture metadata.
+
+### Message reactions
+
+```ts
+await client.chat.react({ messageId, emoji: "👏", on: true });
+await client.chat.react({ messageId, emoji: "👏", on: false });
+```
+
+The action sets a desired state, never toggles it. Retrying the same request leaves one membership (or none). Anyone with `sendChat` may react. `CHALK_REACTIONS` exports the fixed 24-emoji set shared with call reactions. Unsupported emoji are rejected. A message has at most 128 reaction memberships across all emoji; adding another returns `overloaded`, while removal remains available.
+
+Each message's `reactions` contains `{ emoji, count, participantIds }`; IDs identify who reacted and can be resolved through the participant roster. Old messages/servers may omit the wire fields; the client normalizes them to an empty list and revision `"0"`. New history includes current reactions. Loaded messages update live, and reconnecting reloads their reaction snapshots. Revisions keep delayed broadcasts/history responses from rolling state backward. Actions taken while reconnecting use the same persisted, participant-scoped offline queue as chat messages. They are cleared if the participant or Episode changes and fail if the message has expired. Deleting a message cascades to its reactions under existing retention.
+
+Message reactions are stored separately from recording facts and are not rendered or added to recording timelines yet. Recording validators accept all 24 call-reaction emoji.
+
+`useChat()` returns the same state and `react(input)` action. Each hook message always has a reactions array; each group adds `isMine` for the current participant. Public types are `MessageReaction`, `ReactChatMessage`, and `UseChatResult`. No reaction UI is added by this change.

package/THIRD_PARTY_NOTICES.md

@@ -1,7 +1,6 @@
 # Third-party notices
 
-Parts of the deterministic rough-path and chalk-texture implementation are
-adapted from Drawably/Chalkably.
+Some UI primitives were adapted from Drawably/Chalkably.
 
 MIT License
 

package/dist/bindings/hooks.d.ts

@@ -1,14 +1,33 @@
-import type { Capability, ChatSlice, ConnectionSlice, MediaSlice, OfflineSlice, ParticipantsSlice, ReactionsSlice, RecordingSlice, SelfSlice, SpaceClient, WhiteboardSlice } from "@q9labsai/chalk-client";
+import type { Capability, ChatReaction, ChatMessage, ChatSlice, ConnectionSlice, MediaSlice, OfflineSlice, ParticipantsSlice, ReactionsSlice, RecordingSlice, SelfSlice, SpaceClient, WhiteboardSlice } from "@q9labsai/chalk-client";
 export declare function useSpaceClient(): SpaceClient;
 export declare function useConnection(): ConnectionSlice;
 export declare function useSelf(): SelfSlice;
 export declare function useParticipants(): ParticipantsSlice;
 export declare function useMedia(): MediaSlice;
-export declare function useChat(): ChatSlice;
+export type MessageReaction = ChatReaction & {
+    readonly isMine: boolean;
+};
+export type ReactChatMessage = Omit<ChatMessage, "reactions"> & {
+    readonly reactions: readonly MessageReaction[];
+};
+export type UseChatResult = Omit<ChatSlice, "messages"> & {
+    readonly messages: readonly ReactChatMessage[];
+    readonly react: SpaceClient["chat"]["react"];
+};
+export declare function useChat(): UseChatResult;
 /** Actions held while the connection recovers, and whether the user still has to decide about them. */
 export declare function useOffline(): OfflineSlice;
 export declare function useReactions(): ReactionsSlice;
 export declare function useRecording(): RecordingSlice;
 export declare function useWhiteboard(): WhiteboardSlice;
 export declare function useCan(capability: Capability): boolean;
+/** Local capture state and the action that opens the browser's share picker. */
+export declare function useScreenShare(): {
+    source: import("@q9labsai/chalk-client").MediaSource;
+    state: "unavailable" | "requesting" | "enabled" | "disabled" | "failed";
+    track: MediaStreamTrack | null;
+    hasAudio?: boolean;
+    capture?: import("@q9labsai/chalk-client").ScreenShareCapture;
+    setEnabled: (enabled: boolean, options?: import("@q9labsai/chalk-client").ScreenShareOptions | undefined) => Promise<void>;
+};
 //# sourceMappingURL=hooks.d.ts.map

package/dist/bindings/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/bindings/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,WAAW,EAAiB,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAuB1N,wBAAgB,cAAc,IAAI,WAAW,CAQ5C;AAED,wBAAgB,aAAa,IAAI,eAAe,CAE/C;AAED,wBAAgB,OAAO,IAAI,SAAS,CAEnC;AAED,wBAAgB,eAAe,IAAI,iBAAiB,CAEnD;AAED,wBAAgB,QAAQ,IAAI,UAAU,CAErC;AAED,wBAAgB,OAAO,IAAI,SAAS,CAEnC;AAED,uGAAuG;AACvG,wBAAgB,UAAU,IAAI,YAAY,CAEzC;AAED,wBAAgB,YAAY,IAAI,cAAc,CAE7C;AAED,wBAAgB,YAAY,IAAI,cAAc,CAE7C;AAED,wBAAgB,aAAa,IAAI,eAAe,CAE/C;AAED,wBAAgB,MAAM,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,CAEtD"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/bindings/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,WAAW,EAAiB,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAuBrP,wBAAgB,cAAc,IAAI,WAAW,CAQ5C;AAED,wBAAgB,aAAa,IAAI,eAAe,CAE/C;AAED,wBAAgB,OAAO,IAAI,SAAS,CAEnC;AAED,wBAAgB,eAAe,IAAI,iBAAiB,CAEnD;AAED,wBAAgB,QAAQ,IAAI,UAAU,CAErC;AAED,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG;IAAE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAA;CAAE,CAAC;AAC1E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,GAAG;IAAE,QAAQ,CAAC,SAAS,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,CAAC;AACnH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAAE,QAAQ,CAAC,QAAQ,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC;AAE3J,wBAAgB,OAAO,IAAI,aAAa,CAQvC;AAED,uGAAuG;AACvG,wBAAgB,UAAU,IAAI,YAAY,CAEzC;AAED,wBAAgB,YAAY,IAAI,cAAc,CAE7C;AAED,wBAAgB,YAAY,IAAI,cAAc,CAE7C;AAED,wBAAgB,aAAa,IAAI,eAAe,CAE/C;AAED,wBAAgB,MAAM,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,CAEtD;AAED,gFAAgF;AAChF,wBAAgB,cAAc;;;;;;;EAI7B"}

package/dist/chunk-4U7QZC72.js

@@ -0,0 +1,298 @@
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/utils/icons.tsx
+import {
+  Alert02Icon as Alert02IconSvg,
+  ArrowDown01Icon as ArrowDown01IconSvg,
+  ArrowLeft01Icon as ArrowLeft01IconSvg,
+  ArrowRight01Icon as ArrowRight01IconSvg,
+  CallEnd01Icon as CallEnd01IconSvg,
+  CancelCircleIcon as CancelCircleIconSvg,
+  CheckmarkCircle02Icon as CheckmarkCircle02IconSvg,
+  CircleIcon as CircleIconSvg,
+  FileIcon as FileTextIconSvg,
+  GridIcon as GridIconSvg,
+  WavingHand01Icon as HandIconSvg,
+  LayoutTwoColumnIcon as LayoutTwoColumnIconSvg,
+  LayoutGridIcon as LayoutGridIconSvg,
+  LayoutTableIcon as LayoutTableIconSvg,
+  Loading01Icon as Loading01IconSvg,
+  MicOff01Icon as MicrophoneOff01IconSvg,
+  ComputerVideoIcon as Monitor01IconSvg,
+  ComputerRemoveIcon as MonitorOffIconSvg,
+  Radio01Icon as Radio01IconSvg,
+  SignalFull02Icon as SignalFull02IconSvg,
+  SquareIcon as SquareIconSvg,
+  Sun02Icon as Sun02IconSvg,
+  TextIcon as TextIconSvg,
+  Tick01Icon as Tick01IconSvg,
+  TickDouble01Icon as TickDouble01IconSvg,
+  VideoOffIcon as VideoOffIconSvg,
+  WifiOffIcon as WifiOffIconSvg
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import {
+  Cancel01Icon as StaticCancel01Icon,
+  Clock01Icon as StaticClock01Icon,
+  Copy01Icon as StaticCopy01Icon,
+  CrownIcon as StaticCrown01Icon,
+  Download01Icon as StaticDownload01Icon,
+  Edit02Icon as StaticEdit02Icon,
+  Home01Icon as StaticHome01Icon,
+  Logout01Icon as StaticLogout01Icon,
+  Image01Icon as StaticImage01Icon,
+  InformationCircleIcon as StaticInformationCircleIcon,
+  MaximizeScreenIcon as StaticMaximize01Icon,
+  Message01Icon as StaticMessage01Icon,
+  Mic01Icon as StaticMicrophone01Icon,
+  Moon02Icon as StaticMoon02Icon,
+  MoreVerticalIcon as StaticMoreVerticalIcon,
+  PauseIcon as StaticPauseIcon,
+  PinIcon as StaticPin01Icon,
+  PlayIcon as StaticPlayIcon,
+  PlusSignIcon as StaticPlusSignIcon,
+  QrCode01Icon as StaticQrCode01Icon,
+  RefreshIcon as StaticRefreshIcon,
+  Search01Icon as StaticSearch01Icon,
+  SentIcon as StaticSentIcon,
+  Share08Icon as StaticShare01Icon,
+  Shield02Icon as StaticShield01Icon,
+  SmileIcon as StaticSmileIcon,
+  StarIcon as StaticStarIcon,
+  ThumbsUpIcon as StaticThumbsUpIcon,
+  Upload01Icon as StaticUpload01Icon,
+  UserGroupIcon as StaticUserGroupIcon,
+  UserRemove01Icon as StaticUserRemove01Icon,
+  Video01Icon as StaticVideo01Icon,
+  VolumeHighIcon as StaticVolumeHighIcon,
+  VolumeMute01Icon as StaticVolumeMute01Icon
+} from "@hugeicons/core-free-icons";
+import { jsx } from "react/jsx-runtime";
+var createIcon = (iconSvg) => {
+  const Icon = (props) => /* @__PURE__ */ jsx(HugeiconsIcon, { icon: iconSvg, ...props });
+  return Icon;
+};
+var Alert02Icon = createIcon(Alert02IconSvg);
+var ArrowDown01Icon = createIcon(ArrowDown01IconSvg);
+var ArrowLeft01Icon = createIcon(ArrowLeft01IconSvg);
+var ArrowRight01Icon = createIcon(ArrowRight01IconSvg);
+var CallEnd01Icon = createIcon(CallEnd01IconSvg);
+var Cancel01Icon = createIcon(StaticCancel01Icon);
+var CancelCircleIcon = createIcon(CancelCircleIconSvg);
+var CheckmarkCircle02Icon = createIcon(CheckmarkCircle02IconSvg);
+var CircleIcon = createIcon(CircleIconSvg);
+var Clock01Icon = createIcon(StaticClock01Icon);
+var ColumnIcon = createIcon(LayoutTwoColumnIconSvg);
+var Copy01Icon = createIcon(StaticCopy01Icon);
+var Crown01Icon = createIcon(StaticCrown01Icon);
+var Download01Icon = createIcon(StaticDownload01Icon);
+var Edit02Icon = createIcon(StaticEdit02Icon);
+var FileTextIcon = createIcon(FileTextIconSvg);
+var GridIcon = createIcon(GridIconSvg);
+var HandIcon = createIcon(HandIconSvg);
+var Home01Icon = createIcon(StaticHome01Icon);
+var Logout01Icon = createIcon(StaticLogout01Icon);
+var Image01Icon = createIcon(StaticImage01Icon);
+var InformationCircleIcon = createIcon(StaticInformationCircleIcon);
+var LayoutGridIcon = createIcon(LayoutGridIconSvg);
+var LayoutTableIcon = createIcon(LayoutTableIconSvg);
+var Loading01Icon = createIcon(Loading01IconSvg);
+var Maximize01Icon = createIcon(StaticMaximize01Icon);
+var Message01Icon = createIcon(StaticMessage01Icon);
+var Microphone01Icon = createIcon(StaticMicrophone01Icon);
+var MicrophoneOff01Icon = createIcon(MicrophoneOff01IconSvg);
+var Moon02Icon = createIcon(StaticMoon02Icon);
+var Monitor01Icon = createIcon(Monitor01IconSvg);
+var MonitorOffIcon = createIcon(MonitorOffIconSvg);
+var MoreVerticalIcon = createIcon(StaticMoreVerticalIcon);
+var PauseIcon = createIcon(StaticPauseIcon);
+var Pin01Icon = createIcon(StaticPin01Icon);
+var PlayIcon = createIcon(StaticPlayIcon);
+var PlusSignIcon = createIcon(StaticPlusSignIcon);
+var QrCode01Icon = createIcon(StaticQrCode01Icon);
+var Radio01Icon = createIcon(Radio01IconSvg);
+var RefreshIcon = createIcon(StaticRefreshIcon);
+var Search01Icon = createIcon(StaticSearch01Icon);
+var SentIcon = createIcon(StaticSentIcon);
+var Share01Icon = createIcon(StaticShare01Icon);
+var Shield01Icon = createIcon(StaticShield01Icon);
+var SignalFull02Icon = createIcon(SignalFull02IconSvg);
+var SmileIcon = createIcon(StaticSmileIcon);
+var SquareIcon = createIcon(SquareIconSvg);
+var StarIcon = createIcon(StaticStarIcon);
+var Sun02Icon = createIcon(Sun02IconSvg);
+var TextIcon = createIcon(TextIconSvg);
+var Tick01Icon = createIcon(Tick01IconSvg);
+var TickDouble01Icon = createIcon(TickDouble01IconSvg);
+var Upload01Icon = createIcon(StaticUpload01Icon);
+var UserGroupIcon = createIcon(StaticUserGroupIcon);
+var UserRemove01Icon = createIcon(StaticUserRemove01Icon);
+var Video01Icon = createIcon(StaticVideo01Icon);
+var VideoOffIcon = createIcon(VideoOffIconSvg);
+var VolumeHighIcon = createIcon(StaticVolumeHighIcon);
+var VolumeMute01Icon = createIcon(StaticVolumeMute01Icon);
+var WifiOffIcon = createIcon(WifiOffIconSvg);
+var ThumbsUpIcon = createIcon(StaticThumbsUpIcon);
+
+// src/utils/colorGenerator.ts
+var PARTICIPANT_GRADIENT_PRESETS = [
+  { id: "aurora", label: "Aurora", from: "#0ea5e9", to: "#22c55e" },
+  { id: "ember", label: "Ember", from: "#f97316", to: "#ef4444" },
+  { id: "orchid", label: "Orchid", from: "#a855f7", to: "#ec4899" },
+  { id: "cobalt", label: "Cobalt", from: "#2563eb", to: "#14b8a6" },
+  { id: "gold", label: "Gold", from: "#eab308", to: "#f97316" },
+  { id: "slate", label: "Slate", from: "#64748b", to: "#94a3b8" }
+];
+var AUTO_PALETTE = [
+  ["#315f72", "#dcebef"],
+  ["#5c6650", "#e3eadf"],
+  ["#6b5b4f", "#ece3dc"],
+  ["#64576b", "#e8e0ea"],
+  ["#49645d", "#dfeae6"],
+  ["#665d42", "#ebe6d6"],
+  ["#4d5d73", "#e1e6ec"],
+  ["#6d5158", "#eee0e3"]
+];
+function hashIdentity(identity) {
+  let hash = 2166136261;
+  for (const char of identity.trim().toLowerCase() || "chalk") {
+    hash ^= char.charCodeAt(0);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function resolveGradient(identity = "chalk", preference) {
+  if (preference?.mode === "custom" && preference.from && preference.to) {
+    return [preference.from, preference.to];
+  }
+  return AUTO_PALETTE[hashIdentity(identity) % AUTO_PALETTE.length] ?? ["#64748b", "#94a3b8"];
+}
+function getParticipantInitial(name) {
+  return (name?.trim()?.[0] ?? "?").toUpperCase();
+}
+function getParticipantInitials(name) {
+  const parts = (name ?? "").trim().split(/\s+/).filter(Boolean);
+  const first = parts[0]?.[0] ?? getParticipantInitial(name);
+  const second = parts[1]?.[0] ?? "";
+  return (parts.length > 1 ? first + second : first).toUpperCase();
+}
+function getParticipantColor(identity = "chalk", preference) {
+  const [primary, secondary] = resolveGradient(identity, preference);
+  return {
+    primary,
+    secondary,
+    text: "#ffffff",
+    gradientEnd: secondary
+  };
+}
+function getParticipantGradient(identity = "chalk", preference) {
+  const [primary, secondary] = resolveGradient(identity, preference);
+  return `linear-gradient(135deg, ${primary}, ${secondary})`;
+}
+function getParticipantAvatarGradient(identity = "chalk", preference) {
+  return getParticipantGradient(identity, preference);
+}
+function getParticipantBorder(identity = "chalk", preference) {
+  return getParticipantColor(identity, preference).primary;
+}
+function getParticipantThemeVariables(identity = "chalk", preference) {
+  const colors = getParticipantColor(identity, preference);
+  return {
+    "--primary": colors.primary,
+    "--ring": colors.primary,
+    "--chalk-accent": colors.primary,
+    "--chalk-accent-2": colors.secondary
+  };
+}
+function getParticipantAvatarRecipe(identity = "chalk", preference) {
+  const colors = getParticipantColor(identity, preference);
+  const avatarGradient = getParticipantGradient(identity, preference);
+  return {
+    initials: getParticipantInitials(identity),
+    gradient: avatarGradient,
+    avatarGradient,
+    darkerAvatarGradient: `linear-gradient(135deg, ${colors.primary}, #111827)`,
+    color: colors.primary,
+    border: colors.primary,
+    facehashColors: [colors.primary]
+  };
+}
+
+export {
+  cn,
+  Alert02Icon,
+  ArrowDown01Icon,
+  ArrowLeft01Icon,
+  ArrowRight01Icon,
+  CallEnd01Icon,
+  Cancel01Icon,
+  CancelCircleIcon,
+  CheckmarkCircle02Icon,
+  CircleIcon,
+  Clock01Icon,
+  ColumnIcon,
+  Copy01Icon,
+  Crown01Icon,
+  Download01Icon,
+  Edit02Icon,
+  FileTextIcon,
+  GridIcon,
+  HandIcon,
+  Home01Icon,
+  Logout01Icon,
+  Image01Icon,
+  InformationCircleIcon,
+  LayoutGridIcon,
+  LayoutTableIcon,
+  Loading01Icon,
+  Maximize01Icon,
+  Message01Icon,
+  Microphone01Icon,
+  MicrophoneOff01Icon,
+  Moon02Icon,
+  Monitor01Icon,
+  MonitorOffIcon,
+  MoreVerticalIcon,
+  PauseIcon,
+  Pin01Icon,
+  PlayIcon,
+  PlusSignIcon,
+  QrCode01Icon,
+  Radio01Icon,
+  RefreshIcon,
+  Search01Icon,
+  SentIcon,
+  Share01Icon,
+  Shield01Icon,
+  SignalFull02Icon,
+  SmileIcon,
+  SquareIcon,
+  StarIcon,
+  Sun02Icon,
+  TextIcon,
+  Tick01Icon,
+  TickDouble01Icon,
+  Upload01Icon,
+  UserGroupIcon,
+  UserRemove01Icon,
+  Video01Icon,
+  VideoOffIcon,
+  VolumeHighIcon,
+  VolumeMute01Icon,
+  WifiOffIcon,
+  ThumbsUpIcon,
+  PARTICIPANT_GRADIENT_PRESETS,
+  getParticipantInitial,
+  getParticipantInitials,
+  getParticipantColor,
+  getParticipantGradient,
+  getParticipantAvatarGradient,
+  getParticipantBorder,
+  getParticipantThemeVariables,
+  getParticipantAvatarRecipe
+};