@q9labsai/chalk-react-native 4.1.17 → 5.0.0

package/src/frame/regions.ts

@@ -0,0 +1,60 @@
+import type { EdgeInsets } from "react-native-safe-area-context";
+import type { Frame } from "../motion/MovingFrame";
+
+/**
+ * How the call is arranged, as in the mockup's `mode()`:
+ * - `portrait`: a phone held upright, or an iPad in narrow Split View.
+ * - `landscape`: a phone on its side; the stage takes the screen and the controls fade (L1).
+ * - `pad`: an iPad (or a large tablet) with the laptop arrangement and the side card.
+ */
+export type Arrangement = "portrait" | "landscape" | "pad";
+
+/** The iPad uses the phone layout (portrait or landscape) until the laptop arrangement ships. */
+export function arrangementFor(width: number, height: number): Arrangement {
+  return width > height ? "landscape" : "portrait";
+}
+
+export type FrameRegions = {
+  readonly header: Frame;
+  readonly stage: Frame;
+  readonly dock: Frame;
+};
+
+/** Gap between tiles, and between the stage and the screen's sides on a phone. */
+export const STAGE_GAP = 8;
+
+/**
+ * The header, stage and dock boxes for each arrangement, in screen points, from the mockup's
+ * `stageRect()` and chrome CSS. The stage never changes when the controls fade.
+ * `cardOpen` is the iPad side card, which takes 352 pt from the stage.
+ */
+export function frameRegions(arrangement: Arrangement, width: number, height: number, insets: EdgeInsets, cardOpen = false): FrameRegions {
+  const { top, bottom, left, right } = insets;
+  if (arrangement === "portrait") {
+    const headerHeight = 52;
+    const dockHeight = 52;
+    // The dock sits 8 pt above the safe area, plus 6 pt for the label under the audio output button (R1).
+    const dockBottom = bottom + 8 + 6;
+    const stageTop = top + headerHeight;
+    return {
+      header: { x: left, y: top, width: width - left - right, height: headerHeight },
+      stage: { x: left + STAGE_GAP, y: stageTop, width: width - left - right - 2 * STAGE_GAP, height: height - stageTop - (bottom + 8 + dockHeight + 14) - 8 },
+      dock: { x: left, y: height - dockBottom - dockHeight, width: width - left - right, height: dockHeight },
+    };
+  }
+  if (arrangement === "landscape") {
+    const dockHeight = 52;
+    const topEdge = top + 8;
+    return {
+      header: { x: left, y: topEdge, width: width - left - right, height: 44 },
+      stage: { x: left + STAGE_GAP, y: topEdge, width: width - left - right - 2 * STAGE_GAP, height: height - topEdge - bottom - 4 },
+      dock: { x: left, y: height - (bottom + 6) - dockHeight, width: width - left - right, height: dockHeight },
+    };
+  }
+  const stageTop = top + 60;
+  return {
+    header: { x: 0, y: top, width, height: 60 },
+    stage: { x: 16, y: stageTop, width: width - 32 - (cardOpen ? 352 : 0), height: height - stageTop - (bottom + 16 + 44 + 16) },
+    dock: { x: 0, y: height - (bottom + 16) - 44, width, height: 44 },
+  };
+}

package/src/haptics/haptics.ts

@@ -0,0 +1,19 @@
+import { impactAsync, ImpactFeedbackStyle, NotificationFeedbackType, notificationAsync, selectionAsync } from "expo-haptics";
+
+/**
+ * The call's haptic moments, and only these. The mockup marks mute, hand raise and leave;
+ * a sheet ticks when a drag crosses the point where letting go closes it.
+ */
+export const haptics = {
+  mute: () => fire(impactAsync(ImpactFeedbackStyle.Light)),
+  handRaise: () => fire(impactAsync(ImpactFeedbackStyle.Medium)),
+  leave: () => fire(notificationAsync(NotificationFeedbackType.Warning)),
+  sheetDetent: () => fire(selectionAsync()),
+} as const;
+
+export type HapticMoment = keyof typeof haptics;
+
+// A device without a haptic engine rejects; the moment simply passes without feedback.
+function fire(feedback: Promise<void>): void {
+  feedback.catch(() => undefined);
+}

package/src/header/CallDetailsSheet.tsx

@@ -0,0 +1,139 @@
+import { setStringAsync } from "expo-clipboard";
+import type { RefObject } from "react";
+import { Platform, Pressable, Share, StyleSheet, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { useDeviceLayout } from "../frame/device-layout";
+import { usePreferences } from "../frame/preferences";
+import { Icon } from "../icons/Icon";
+import { usePressAnimation } from "../motion/press";
+import { BottomSheet } from "../primitives/BottomSheet";
+import { ChalkText } from "../primitives/ChalkText";
+import { CopyButton } from "../primitives/CopyButton";
+import { IconButton } from "../primitives/IconButton";
+import { MenuSection } from "../primitives/Menu";
+import { SegmentedControl } from "../primitives/SegmentedControl";
+import { Switch } from "../primitives/Switch";
+import { useTheme } from "../theme/theme";
+import { sizes, type ColorScheme } from "../theme/tokens";
+import { QrCode } from "./QrCode";
+
+export type CallDetailsSheetProps = {
+  readonly open: boolean;
+  readonly onClose: () => void;
+  readonly callName: string;
+  /** The call's link; without it the Share section is left out. */
+  readonly inviteLink?: string;
+  readonly returnFocusRef?: RefObject<View | null>;
+};
+
+const DETAILS_TOP = 58;
+
+const SCHEMES = [
+  { value: "dark", label: "Dark", testID: "details.appearance.dark" },
+  { value: "light", label: "Light", testID: "details.appearance.light" },
+] as const;
+
+/**
+ * Call details (`#info`), opened from the call's name: the link with copy, share and a QR code,
+ * then the appearance and sound choices.
+ */
+export function CallDetailsSheet({ open, onClose, callName, inviteLink, returnFocusRef }: CallDetailsSheetProps): React.JSX.Element {
+  const preferences = usePreferences();
+  const layout = useDeviceLayout();
+  // `.dev .infop` keeps its top 58 pt under the safe area on a phone too, so the sheet runs from there to the bottom edge.
+  const heightRatio = (layout.height - layout.insets.top - DETAILS_TOP) / layout.height;
+  return (
+    <BottomSheet accessibilityLabel={callName} heightRatio={heightRatio} inset={14} onClose={onClose} open={open} returnFocusRef={returnFocusRef} testID="sheet.details" variant="popover">
+      <View style={styles.heading}>
+        <ChalkText accessibilityRole="header" numberOfLines={1} style={styles.title} variant="cardTitle">
+          {callName}
+        </ChalkText>
+        <IconButton accessibilityLabel="Close" icon="x" onPress={onClose} size={36} testID="details.close" tone="ghost" />
+      </View>
+      {inviteLink ? <ShareSection link={inviteLink} /> : null}
+      <Section first={!inviteLink}>
+        <MenuRow end={<SegmentedControl<ColorScheme> accessibilityLabel="Appearance" onChange={preferences.setColorScheme} options={SCHEMES} size="compact" testID="details.appearance" value={preferences.colorScheme} />} label="Appearance" />
+        <MenuRow end={<Switch accessibilityLabel="Sounds" onValueChange={preferences.setSoundsEnabled} testID="details.sounds" value={preferences.soundsEnabled} />} label="Sounds" />
+      </Section>
+    </BottomSheet>
+  );
+}
+
+function ShareSection({ link }: { readonly link: string }): React.JSX.Element {
+  const { colors } = useTheme();
+  return (
+    <Section first>
+      <MenuSection label="Share" />
+      <View style={[styles.link, { backgroundColor: colors.hover }]} testID="details.link">
+        <ChalkText numberOfLines={1} selectable style={styles.linkText} variant="bodyMedium">
+          {displayLink(link)}
+        </ChalkText>
+        <View style={styles.linkButtons}>
+          <CopyButton accessibilityLabel="Copy link" announcement="Link copied" onCopy={() => setStringAsync(link).then(() => undefined)} testID="details.copy" />
+          <ShareButton link={link} />
+        </View>
+      </View>
+      <View style={styles.qr}>
+        <QrCode size={112} value={link} />
+        <ChalkText style={styles.qrText} tone="textSoft" variant="meta">
+          Scan with a phone camera to join this call.
+        </ChalkText>
+      </View>
+    </Section>
+  );
+}
+
+/** The link as people read it, `chalkmeet.com/q9-team`, without the scheme or the invite token. */
+export function displayLink(link: string): string {
+  return link.replace(/^https?:\/\//u, "").replace(/[#?].*$/u, "");
+}
+
+/** `.cp` with the share icon: a 36 pt round button that darkens and shrinks while pressed. */
+function ShareButton({ link }: { readonly link: string }): React.JSX.Element {
+  const { colors } = useTheme();
+  const press = usePressAnimation("small");
+  const share = () => {
+    Share.share(Platform.OS === "ios" ? { url: link } : { message: link }).catch(() => undefined);
+  };
+  return (
+    <Pressable accessibilityLabel="Share link" accessibilityRole="button" hitSlop={4} onPress={share} onPressIn={press.onPressIn} onPressOut={press.onPressOut} testID="details.share">
+      {({ pressed }) => (
+        <Animated.View style={[styles.round, pressed ? { backgroundColor: colors.pressed } : null, press.scaleStyle]}>
+          <Icon color={colors.text} name="iosShare" />
+        </Animated.View>
+      )}
+    </Pressable>
+  );
+}
+
+/** `.isec`: sections after the first sit under a hairline. */
+function Section({ first = false, children }: { readonly first?: boolean; readonly children: React.ReactNode }): React.JSX.Element {
+  const { colors } = useTheme();
+  return <View style={[styles.section, first ? null : { borderTopWidth: 1, borderTopColor: colors.line }]}>{children}</View>;
+}
+
+/** `.mi` holding its own control at the end, such as the appearance switch (`.mi.appr`). */
+function MenuRow({ label, end }: { readonly label: string; readonly end: React.ReactNode }): React.JSX.Element {
+  return (
+    <View style={styles.row}>
+      <ChalkText numberOfLines={1} style={styles.rowLabel}>
+        {label}
+      </ChalkText>
+      {end}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  heading: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8, paddingTop: 2, paddingBottom: 4, paddingLeft: 10 },
+  title: { flexShrink: 1 },
+  section: { paddingTop: 4, paddingBottom: 8 },
+  link: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8, height: 44, marginHorizontal: 6, paddingLeft: 14, paddingRight: 4, borderRadius: 999 },
+  linkText: { flexShrink: 1 },
+  linkButtons: { flexDirection: "row", gap: 2 },
+  round: { width: 36, height: 36, borderRadius: 18, alignItems: "center", justifyContent: "center" },
+  qr: { flexDirection: "row", alignItems: "center", gap: 14, marginTop: 10, marginHorizontal: 6, marginBottom: 2 },
+  qrText: { flex: 1 },
+  row: { flexDirection: "row", alignItems: "center", gap: 10, minHeight: sizes.menuRowPhone, paddingHorizontal: 10 },
+  rowLabel: { flex: 1 },
+});

package/src/header/Header.tsx

@@ -0,0 +1,107 @@
+import { forwardRef, memo, useEffect, useState } from "react";
+import { Pressable, StyleSheet, View, type View as ViewType } from "react-native";
+import Animated from "react-native-reanimated";
+import { useConnection, useRecording } from "../hooks/space-hooks";
+import { useMeasuredRef } from "../frame/measurement";
+import { Icon } from "../icons/Icon";
+import { usePressAnimation } from "../motion/press";
+import { ChalkText } from "../primitives/ChalkText";
+import { useTheme } from "../theme/theme";
+import type { Arrangement } from "../frame/regions";
+
+export type HeaderProps = {
+  readonly callName: string;
+  readonly arrangement: Arrangement;
+  readonly onOpenDetails: () => void;
+  /** The call details sheet is open. */
+  readonly detailsOpen: boolean;
+};
+
+/**
+ * The call header (`.hdr`): the call's name with its chevron, which opens the call details, then
+ * the Rec dot while the call is recorded (K5) and the timer. In landscape the name sits in a
+ * pill and the timer is left out.
+ */
+export const Header = memo(
+  forwardRef<ViewType, HeaderProps>(function Header({ callName, arrangement, onOpenDetails, detailsOpen }, ref) {
+    const { colors } = useTheme();
+    const press = usePressAnimation("pill");
+    const landscape = arrangement === "landscape";
+    const headerStyle = [styles.header, arrangement === "pad" ? styles.pad : landscape ? styles.landscape : styles.portrait];
+    const headerRef = useMeasuredRef<ViewType>("frame.header", headerStyle);
+    const nameStyle = [styles.name, landscape ? [styles.namePill, { backgroundColor: colors.raised, boxShadow: `0px 0px 0px 1px ${colors.lineStrong}` }] : null];
+    const nameRef = useMeasuredRef<ViewType>("header.name", nameStyle);
+    return (
+      <View pointerEvents="box-none" ref={headerRef} style={headerStyle} testID="frame.header">
+        <Pressable accessibilityLabel={`Call details, ${callName}`} accessibilityRole="button" accessibilityState={{ expanded: detailsOpen }} onPress={onOpenDetails} onPressIn={press.onPressIn} onPressOut={press.onPressOut} ref={ref} style={styles.nameButton} testID="header.name">
+          <Animated.View ref={nameRef} style={[nameStyle, press.scaleStyle]}>
+            <ChalkText numberOfLines={1} style={styles.nameText} variant="bodyStrong">
+              {callName}
+            </ChalkText>
+            <Icon color={colors.textMuted} name="down" size={16} />
+          </Animated.View>
+        </Pressable>
+        <View style={styles.status}>
+          <RecordingDot />
+          {landscape ? null : <CallTimer />}
+        </View>
+      </View>
+    );
+  }),
+);
+
+/** `.rec`: a red dot and "Rec" while the call is being recorded, seen by everyone in it. */
+function RecordingDot(): React.JSX.Element | null {
+  const { colors } = useTheme();
+  const status = useRecording().current?.status;
+  if (status !== "recording" && status !== "stopping") return null;
+  return (
+    <View accessibilityLabel="This call is being recorded" accessible style={styles.rec} testID="header.recording">
+      <View style={[styles.recDot, { backgroundColor: colors.danger }]} />
+      <ChalkText variant="meta">Rec</ChalkText>
+    </View>
+  );
+}
+
+/** Minutes and seconds since the call started, in tabular figures. Re-renders once a second, alone. */
+function CallTimer(): React.JSX.Element | null {
+  const { episode } = useConnection();
+  const startedAt = episode?.startedAt ? Date.parse(episode.startedAt) : null;
+  const [now, setNow] = useState(Date.now);
+  useEffect(() => {
+    if (startedAt === null) return;
+    const timer = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(timer);
+  }, [startedAt]);
+  if (startedAt === null) return null;
+  return (
+    <ChalkText accessibilityLabel={`Call time ${formatElapsed(now - startedAt)}`} tabular testID="header.timer" tone="textMuted" variant="bodyMedium">
+      {formatElapsed(now - startedAt)}
+    </ChalkText>
+  );
+}
+
+export function formatElapsed(milliseconds: number): string {
+  const total = Math.max(0, Math.floor(milliseconds / 1000));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total % 3600) / 60);
+  const seconds = String(total % 60).padStart(2, "0");
+  return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
+}
+
+const styles = StyleSheet.create({
+  header: { flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8 },
+  portrait: { paddingLeft: 14, paddingRight: 12 },
+  landscape: { paddingHorizontal: 8, justifyContent: "flex-start" },
+  pad: { paddingLeft: 24, paddingRight: 16 },
+  nameButton: { flexShrink: 1 },
+  // `.nameb`: 44 pt high, pulled 6 pt left so the text lines up with the header padding.
+  name: { flexDirection: "row", alignItems: "center", gap: 4, height: 44, paddingHorizontal: 6, marginLeft: -6, borderRadius: 999 },
+  // `.lnd .title`: a 40 pt pill. The mockup pulls `.nameb` 6 pt into the pill's 2 pt padding, so the
+  // text starts 2 pt in, and the name's own 6 pt plus the pill's 12 pt follow the chevron.
+  namePill: { height: 40, marginLeft: 0, paddingLeft: 2, paddingRight: 18 },
+  nameText: { flexShrink: 1 },
+  status: { flexDirection: "row", alignItems: "center", gap: 10 },
+  rec: { flexDirection: "row", alignItems: "center", gap: 6 },
+  recDot: { width: 8, height: 8, borderRadius: 4 },
+});

package/src/header/QrCode.tsx

@@ -0,0 +1,34 @@
+import { memo, useMemo } from "react";
+import { View } from "react-native";
+import Svg, { Path, Rect } from "react-native-svg";
+import { encode } from "uqr";
+import { fixed } from "../theme/tokens";
+
+/** The call link as a QR code (`svg.qr`): black on white with a two-module quiet zone, in both themes. */
+export const QrCode = memo(function QrCode({ value, size }: { readonly value: string; readonly size: number }): React.JSX.Element {
+  const { path, modules } = useMemo(() => {
+    const { data, size: count } = encode(value, { ecc: "M", border: 2 });
+    // One rectangle per run of dark modules in a row, so no antialiased seams show between them.
+    let d = "";
+    data.forEach((row, y) => {
+      let start = -1;
+      row.forEach((dark, x) => {
+        if (dark && start < 0) start = x;
+        if (start >= 0 && (!dark || x === row.length - 1)) {
+          const end = dark ? x + 1 : x;
+          d += `M${start} ${y}h${end - start}v1h${start - end}z`;
+          start = -1;
+        }
+      });
+    });
+    return { path: d, modules: count };
+  }, [value]);
+  return (
+    <View accessibilityLabel={`QR code for ${value}`} accessibilityRole="image" accessible style={{ width: size, height: size, borderRadius: 8, overflow: "hidden" }} testID="details.qr">
+      <Svg height={size} viewBox={`0 0 ${modules} ${modules}`} width={size}>
+        <Rect fill={fixed.qrLight} height={modules} width={modules} x={0} y={0} />
+        <Path d={path} fill={fixed.qrDark} />
+      </Svg>
+    </View>
+  );
+});

package/src/icons/Icon.tsx

@@ -0,0 +1,35 @@
+import { memo } from "react";
+import Svg, { Circle, Path, Rect } from "react-native-svg";
+import type { IconElement } from "./icon-element";
+import { iconElements } from "./icon-paths";
+
+export type IconName = keyof typeof iconElements;
+
+export type IconProps = {
+  readonly name: IconName;
+  readonly color: string;
+  /** The mockup draws icons at 20 pt by default, 16 to 18 pt in tags and menus. */
+  readonly size?: number;
+  readonly strokeWidth?: number;
+};
+
+/** One icon from the mockup's 24-unit, 1.75-stroke line set. Icons are decorative; label the control that holds them. */
+export const Icon = memo(function Icon({ name, color, size = 20, strokeWidth = 1.75 }: IconProps): React.JSX.Element {
+  return (
+    <Svg accessibilityElementsHidden fill="none" height={size} importantForAccessibility="no-hide-descendants" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} viewBox="0 0 24 24" width={size}>
+      {iconElements[name].map((element: IconElement, index) => renderElement(element, index, color))}
+    </Svg>
+  );
+});
+
+function renderElement(element: IconElement, key: number, color: string): React.JSX.Element {
+  const shared = { fill: element.fill === "currentColor" ? color : "none", strokeWidth: element.strokeWidth, transform: element.transform };
+  switch (element.kind) {
+    case "path":
+      return <Path key={key} {...shared} d={element.d} />;
+    case "rect":
+      return <Rect key={key} {...shared} height={element.height} rx={element.rx} width={element.width} x={element.x} y={element.y} />;
+    case "circle":
+      return <Circle key={key} {...shared} cx={element.cx} cy={element.cy} r={element.r} />;
+  }
+}

package/src/icons/icon-element.ts

@@ -0,0 +1,11 @@
+type Stroke = {
+  readonly strokeWidth?: number;
+  /** `currentColor` fills the shape with the icon colour; otherwise shapes are stroked only. */
+  readonly fill?: "currentColor";
+  readonly transform?: string;
+};
+
+export type IconElement =
+  | (Stroke & { readonly kind: "path"; readonly d: string })
+  | (Stroke & { readonly kind: "rect"; readonly x: number; readonly y: number; readonly width: number; readonly height: number; readonly rx?: number })
+  | (Stroke & { readonly kind: "circle"; readonly cx: number; readonly cy: number; readonly r: number });

package/src/icons/icon-paths.ts

@@ -0,0 +1,199 @@
+// Generated from the mobile mockup's icon set (`const P` in mobile-mockup.html). Regenerate rather than edit by hand.
+import type { IconElement } from "./icon-element";
+
+export const iconElements = {
+  mic: [
+    { kind: "rect", x: 9, y: 2, width: 6, height: 12, rx: 3 },
+    { kind: "path", d: "M19 10v1a7 7 0 0 1-14 0v-1M12 18v4" },
+  ],
+  micOff: [{ kind: "path", d: "M2 2l20 20M15 9.3V5a3 3 0 0 0-5.7-1.3M9 9v2a3 3 0 0 0 5.1 2.1M17 17a7 7 0 0 1-12-6v-1M19 10v1a7 7 0 0 1-.1 1.2M12 18v4" }],
+  cam: [
+    { kind: "path", d: "M16 10.5l5-3v9l-5-3z" },
+    { kind: "rect", x: 2, y: 6, width: 14, height: 12, rx: 2 },
+  ],
+  camOff: [{ kind: "path", d: "M2 2l20 20M10.7 6H14a2 2 0 0 1 2 2v3.3l1 1 4-2.8v8M16 16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2" }],
+  down: [{ kind: "path", d: "M6 9l6 6 6-6" }],
+  shield: [{ kind: "path", d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }],
+  globe: [
+    { kind: "circle", cx: 12, cy: 12, r: 9 },
+    { kind: "path", d: "M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" },
+  ],
+  pause: [{ kind: "path", d: "M9 5v14M15 5v14", strokeWidth: 2.5 }],
+  shareOff: [
+    { kind: "rect", x: 2, y: 3, width: 20, height: 14, rx: 2 },
+    { kind: "path", d: "M8 21h8M12 17v4M9.5 7.5l5 5M14.5 7.5l-5 5" },
+  ],
+  monitor: [
+    { kind: "rect", x: 2, y: 3, width: 20, height: 14, rx: 2 },
+    { kind: "path", d: "M8 21h8M12 17v4" },
+  ],
+  appwin: [
+    { kind: "rect", x: 3, y: 4, width: 18, height: 16, rx: 2 },
+    { kind: "path", d: "M3 9h18M6.5 6.5h.01M9 6.5h.01" },
+  ],
+  tabi: [
+    { kind: "path", d: "M3 20V7a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v10z" },
+    { kind: "path", d: "M3 11h18" },
+  ],
+  swap: [{ kind: "path", d: "M17 3l4 4-4 4M21 7H9M7 21l-4-4 4-4M3 17h12" }],
+  fill: [
+    { kind: "rect", x: 3, y: 5, width: 18, height: 14, rx: 2 },
+    { kind: "path", d: "M7 12h10M7 12l2.5-2.5M7 12l2.5 2.5M17 12l-2.5-2.5M17 12l-2.5 2.5" },
+  ],
+  fit: [
+    { kind: "rect", x: 3, y: 5, width: 18, height: 14, rx: 2 },
+    { kind: "rect", x: 7.5, y: 9, width: 9, height: 6, rx: 1 },
+  ],
+  zoomIn: [
+    { kind: "circle", cx: 11, cy: 11, r: 7 },
+    { kind: "path", d: "M21 21l-4.3-4.3M8 11h6M11 8v6" },
+  ],
+  zoomOut: [
+    { kind: "circle", cx: 11, cy: 11, r: 7 },
+    { kind: "path", d: "M21 21l-4.3-4.3M8 11h6" },
+  ],
+  pip: [
+    { kind: "rect", x: 2, y: 4, width: 20, height: 16, rx: 2 },
+    { kind: "rect", x: 12, y: 12, width: 7, height: 5, rx: 1, fill: "currentColor" },
+  ],
+  undo: [
+    { kind: "path", d: "M9 14L4 9l5-5" },
+    { kind: "path", d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" },
+  ],
+  redo: [
+    { kind: "path", d: "M15 14l5-5-5-5" },
+    { kind: "path", d: "M20 9H9.5a5.5 5.5 0 0 0 0 11H13" },
+  ],
+  vol: [
+    { kind: "path", d: "M11 5L6 9H2v6h4l5 4z" },
+    { kind: "path", d: "M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14" },
+  ],
+  qr: [
+    { kind: "rect", x: 3, y: 3, width: 7, height: 7, rx: 1.5 },
+    { kind: "rect", x: 14, y: 3, width: 7, height: 7, rx: 1.5 },
+    { kind: "rect", x: 3, y: 14, width: 7, height: 7, rx: 1.5 },
+    { kind: "path", d: "M14 14h3v3M21 14v.01M14 21h3M21 17v4h-1" },
+  ],
+  up2: [{ kind: "path", d: "M18 15l-6-6-6 6" }],
+  right: [{ kind: "path", d: "M9 18l6-6-6-6" }],
+  share: [
+    { kind: "rect", x: 2, y: 3, width: 20, height: 14, rx: 2 },
+    { kind: "path", d: "M8 21h8M12 17v4M9 10l3-3 3 3M12 7v6" },
+  ],
+  smile: [
+    { kind: "circle", cx: 12, cy: 12, r: 9 },
+    { kind: "path", d: "M8.5 14.5s1.3 1.8 3.5 1.8 3.5-1.8 3.5-1.8M9 9.5h.01M15 9.5h.01" },
+  ],
+  pen: [
+    { kind: "path", d: "M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z" },
+    { kind: "path", d: "M15 5l4 4" },
+  ],
+  rec: [
+    { kind: "circle", cx: 12, cy: 12, r: 9 },
+    { kind: "circle", cx: 12, cy: 12, r: 3.5, fill: "currentColor" },
+  ],
+  max: [{ kind: "path", d: "M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3" }],
+  min: [{ kind: "path", d: "M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3" }],
+  hang: [
+    {
+      kind: "path",
+      transform: "rotate(135 12 12)",
+      d: "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z",
+    },
+  ],
+  link: [
+    { kind: "path", d: "M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.8 1.7" },
+    { kind: "path", d: "M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7" },
+  ],
+  chat: [{ kind: "path", d: "M7.9 20A9 9 0 1 0 4 16.1L2 22z" }],
+  grid: [
+    { kind: "rect", x: 3, y: 3, width: 7.5, height: 7.5, rx: 1.5 },
+    { kind: "rect", x: 13.5, y: 3, width: 7.5, height: 7.5, rx: 1.5 },
+    { kind: "rect", x: 3, y: 13.5, width: 7.5, height: 7.5, rx: 1.5 },
+    { kind: "rect", x: 13.5, y: 13.5, width: 7.5, height: 7.5, rx: 1.5 },
+  ],
+  spot: [
+    { kind: "rect", x: 3, y: 3, width: 18, height: 12.5, rx: 2 },
+    { kind: "path", d: "M4 20.5h3M10.5 20.5h3M17 20.5h3" },
+  ],
+  more: [{ kind: "path", d: "M5 12h.01M12 12h.01M19 12h.01", strokeWidth: 3 }],
+  x: [{ kind: "path", d: "M18 6L6 18M6 6l12 12" }],
+  clip: [{ kind: "path", d: "M20.5 11.2l-8.4 8.4a5 5 0 0 1-7.1-7.1l8.4-8.4a3.3 3.3 0 0 1 4.7 4.7l-8.4 8.4a1.7 1.7 0 0 1-2.4-2.4l7.7-7.7" }],
+  dl: [{ kind: "path", d: "M12 4v11M7 10.5l5 5 5-5M5 20h14" }],
+  left: [{ kind: "path", d: "M15 18l-6-6 6-6" }],
+  plus: [{ kind: "path", d: "M12 5v14M5 12h14" }],
+  alert: [
+    { kind: "circle", cx: 12, cy: 12, r: 9 },
+    { kind: "path", d: "M12 7.5v5.5M12 16.5v.01" },
+  ],
+  lock: [
+    { kind: "rect", x: 5, y: 11, width: 14, height: 9, rx: 2 },
+    { kind: "path", d: "M8 11V8a4 4 0 0 1 8 0v3" },
+  ],
+  clock: [
+    { kind: "circle", cx: 12, cy: 12, r: 9 },
+    { kind: "path", d: "M12 7v5l3 2" },
+  ],
+  img: [
+    { kind: "rect", x: 3, y: 4, width: 18, height: 16, rx: 2.5 },
+    { kind: "circle", cx: 9, cy: 10, r: 1.8 },
+    { kind: "path", d: "M21 15.5l-4.8-4.8L6 20" },
+  ],
+  smileP: [
+    { kind: "path", d: "M20.9 11a9 9 0 1 1-7.9-7.9" },
+    { kind: "path", d: "M8.5 14.5s1.3 1.8 3.5 1.8 3.5-1.8 3.5-1.8M9 9.5h.01M15 9.5h.01M19 2v6M16 5h6" },
+  ],
+  check: [{ kind: "path", d: "M20 6L9 17l-5-5" }],
+  hand: [
+    { kind: "path", d: "M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v6M10 10.5V6a2 2 0 0 0-4 0v8" },
+    { kind: "path", d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.3l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15" },
+  ],
+  pin: [{ kind: "path", d: "M12 17v5M9 10.8a2 2 0 0 1-1.1 1.8l-1.8.9A2 2 0 0 0 5 15.2V17h14v-1.8a2 2 0 0 0-1.1-1.8l-1.8-.9a2 2 0 0 1-1.1-1.8V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" }],
+  search: [
+    { kind: "circle", cx: 11, cy: 11, r: 7 },
+    { kind: "path", d: "M21 21l-4.3-4.3" },
+  ],
+  up: [{ kind: "path", d: "M12 19V5M5 12l7-7 7 7" }],
+  retry: [
+    { kind: "path", d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" },
+    { kind: "path", d: "M3 3v5h5" },
+  ],
+  home: [{ kind: "path", d: "M3 10.5L12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" }],
+  users: [
+    { kind: "path", d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" },
+    { kind: "circle", cx: 9, cy: 7, r: 4 },
+    { kind: "path", d: "M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8" },
+  ],
+  pointer: [{ kind: "path", d: "M4 4l7 17 2.5-7.5L21 11z" }],
+  square: [{ kind: "rect", x: 4, y: 4, width: 16, height: 16, rx: 2 }],
+  type: [{ kind: "path", d: "M4 7V4h16v3M9 20h6M12 4v16" }],
+  eraser: [{ kind: "path", d: "M7 21l-4.3-4.3a1 1 0 0 1 0-1.4l10-10a1 1 0 0 1 1.4 0l5.6 5.6a1 1 0 0 1 0 1.4L13 21M22 21H7M5 11l9 9" }],
+  copy: [
+    { kind: "rect", x: 9, y: 9, width: 12, height: 12, rx: 2 },
+    { kind: "path", d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" },
+  ],
+  edit: [
+    { kind: "path", d: "M12 20h9" },
+    { kind: "path", d: "M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" },
+  ],
+  flip: [
+    { kind: "path", d: "M20 12a8 8 0 0 0-14.3-4.9M4 12a8 8 0 0 0 14.3 4.9" },
+    { kind: "path", d: "M5.2 3.2v4.2h4.2M18.8 20.8v-4.2h-4.2" },
+  ],
+  earpiece: [{ kind: "path", d: "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z" }],
+  buds: [{ kind: "path", d: "M8 3.5A3.5 3.5 0 0 0 4.5 7v1A2.5 2.5 0 0 0 7 10.5h1V20a1.5 1.5 0 0 0 3 0V6.5A3 3 0 0 0 8 3.5zM16 3.5A3.5 3.5 0 0 1 19.5 7v1a2.5 2.5 0 0 1-2.5 2.5h-1V20a1.5 1.5 0 0 1-3 0V6.5a3 3 0 0 1 3-3z" }],
+  iosShare: [
+    { kind: "path", d: "M12 3v12M8 7l4-4 4 4" },
+    { kind: "path", d: "M8 10H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-2" },
+  ],
+  paste: [
+    { kind: "rect", x: 8, y: 2, width: 8, height: 4, rx: 1 },
+    { kind: "path", d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" },
+  ],
+  file: [
+    { kind: "path", d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" },
+    { kind: "path", d: "M14 2v6h6" },
+  ],
+  trash: [{ kind: "path", d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }],
+  moon: [{ kind: "path", d: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" }],
+} as const satisfies Readonly<Record<string, readonly IconElement[]>>;

package/src/index.ts

@@ -1,15 +1,12 @@
-export { Chalk } from "./components/Chalk";
-export type { ChalkFeatures, ChalkProps, ChalkTheme, ChalkThemeTokens, SpaceLayout } from "./components/Chalk";
-export { Entrance } from "./components/Entrance";
-export type { EntranceProps, EntranceSettings } from "./components/Entrance";
-export { Logo } from "./components/logo/Logo";
-export type { LogoMotion, LogoProps, LogoVariant } from "./components/logo/Logo";
+export { Chalk } from "./frame/Chalk";
+export type { ChalkProps } from "./frame/Chalk";
+export { ChalkArrival } from "./status/ChalkArrival";
+export type { ArrivalState, ChalkArrivalProps } from "./status/ChalkArrival";
+export type { Permission } from "./toasts/CallEventToasts";
+export type { ColorScheme, Palette } from "./theme/tokens";
 export { ChalkProvider, useSpaceClient } from "./context/space-client-context";
 export type { ChalkProviderProps } from "./context/space-client-context";
 export { useCan, useChat, useConnection, useMedia, useParticipants, useReactions, useRecording, useSelf, useWhiteboard } from "./hooks/space-hooks";
-export { Theme, createNativeTheme } from "./ui/theme";
 export { extractSpaceInviteFromLink, getClipboardInviteSuggestion, parseSpaceInviteLink } from "./invites";
 export type { SpaceInviteLink } from "./invites";
 export { buildChalkInviteLink } from "./utils/build-chalk-invite-link";
-export { getThemeMode, isDarkThemePalette, resolveNativeAppearance, THEME_PALETTES, THEME_TEXTURES } from "./ui/appearance";
-export type { NativeAppearance, NativeAppearanceTokens, NativeShadowToken, NativeTextureBlendMode, NativeTextureDescriptor, NativeTextureKind, ThemeAppearance, ThemeMode, ThemePalette, ThemeTexture } from "./ui/appearance";