@stevecastaneda/paseo-progress 0.1.0

package/client/questions.tsx

@@ -0,0 +1,248 @@
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import { copyText, Icon, useToast } from "@getpaseo/plugin/client/react-native";
+import React, { useState } from "react";
+import { Text, View } from "react-native";
+import type { Question } from "../shared/dashboard";
+import { AttachmentList, type Attachment, questionAttachments } from "./attachments";
+import { PressableRow } from "./row";
+import { ShowMoreRow, usePaged } from "./show-more";
+import { PressScale } from "./motion";
+import { StackedDialog } from "./dialog-stack";
+import { raised } from "./surfaces";
+import { When } from "./when";
+
+type Colors = PluginWorkspacePanelProps["theme"]["colors"];
+
+export function replyPrefix(question: Pick<Question, "id" | "title">): string {
+  return `${question.id} (${question.title}): `;
+}
+
+// What the Copy button on an option puts on the clipboard, ready to paste.
+export function replyWithChoice(question: Pick<Question, "id" | "title">, letter: string): string {
+  return `${replyPrefix(question)}${letter}`;
+}
+
+export function useCopy() {
+  const toast = useToast();
+  return async function copy(question: Question, letter?: string) {
+    try {
+      await copyText(letter ? replyWithChoice(question, letter) : replyPrefix(question));
+      toast.show(letter ? `Copied "${question.id} ${letter}". Paste it to your agent.` : `Copied ${question.id} for your reply`, { variant: "success" });
+    } catch {
+      toast.error("Could not copy. Select the text and use Copy.");
+    }
+  };
+}
+
+// Questions waiting on the user. They sit at the top of the panel.
+// Where a question's attachments open: the panel's workspace, and its browser.
+export interface AttachmentContext {
+  workspaceId: string;
+  workspaceDirectory: string;
+  navigation?: PluginWorkspacePanelProps["navigation"];
+}
+
+export function QuestionsSection({ colors, questions, answered, now, compact, context }: {
+  colors: Colors;
+  questions: Question[];
+  // So a question answered while its dialog is open shows the answer instead of vanishing.
+  answered: Question[];
+  now: number;
+  compact: boolean;
+  context: AttachmentContext;
+}) {
+  const [openId, setOpenId] = useState<string | null>(null);
+  const copy = useCopy();
+  return (
+    <View style={{ margin: 12, marginBottom: 0, borderWidth: 1, borderColor: colors.accent, borderRadius: 6, overflow: "hidden" }}>
+      <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8, paddingHorizontal: 10, paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: colors.border }}>
+        <Icon name="MessageCircleQuestion" size={14} color={colors.accent} />
+        <Text accessibilityRole="header" style={{ color: colors.foreground, fontSize: 13, lineHeight: 18, fontWeight: "600" }}>Questions</Text>
+        <View style={{ borderWidth: 1, borderColor: colors.accent, backgroundColor: colors.accent, borderRadius: 999, paddingHorizontal: 8, paddingVertical: 1 }}>
+          <Text style={{ color: colors.accentForeground, fontSize: 11, lineHeight: 16 }}>{questions.length} waiting</Text>
+        </View>
+        <Text style={{ flexBasis: compact ? "100%" : undefined, flex: compact ? undefined : 1, textAlign: compact ? "left" : "right", color: colors.foregroundMuted, fontSize: 11, lineHeight: 16 }}>
+          Work continues on each default until you answer, except where it waits. Press a question to see its choices and copy an answer.
+        </Text>
+      </View>
+      {questions.map((question, index) => (
+        <QuestionRow key={question.id} colors={colors} question={question} first={index === 0}
+          onOpen={() => setOpenId(question.id)} onCopy={() => void copy(question)} />
+      ))}
+      <StackedDialog colors={colors} root={openId ? { kind: "question", id: openId } : null} onClose={() => setOpenId(null)}
+        questions={[...questions, ...answered]} now={now} context={context} />
+    </View>
+  );
+}
+
+// Settled questions, one line each (title and the choice). Press a row for the rest.
+// Rows only: the panel's tabbed card supplies the frame.
+export function AnsweredQuestionsList({ colors, questions, now, context }: {
+  colors: Colors;
+  questions: Question[];
+  now: number;
+  context: AttachmentContext;
+}) {
+  const [openId, setOpenId] = useState<string | null>(null);
+  const paged = usePaged(questions);
+  return (
+    <View>
+      {paged.shown.map((question, index) => {
+        const answer = question.answer!;
+        const chosen = question.options.find((option) => option.letter === answer.choice);
+        return (
+          <View key={question.id} style={{ borderTopWidth: index ? 1 : 0, borderTopColor: colors.border }}>
+            <PressableRow colors={colors} accessibilityRole="button" accessibilityLabel={`${question.id} details`} onPress={() => setOpenId(question.id)}
+              style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 10, paddingVertical: 8 }}>
+              {/* Room for two-digit ids so titles line up; longer ones widen instead of wrapping. */}
+              <Text numberOfLines={1} style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "600", fontVariant: ["tabular-nums"], minWidth: 30, flexShrink: 0 }}>{question.id}</Text>
+              <Text numberOfLines={1} style={{ flex: 1, minWidth: 0, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
+                {question.title}{"  "}
+                <Text style={{ color: colors.statusSuccess, fontWeight: "600" }}>{answer.choice}</Text>
+                {chosen ? <Text style={{ color: colors.foreground }}> {chosen.label}</Text> : null}
+              </Text>
+              <Icon name="ChevronRight" size={14} color={colors.foregroundMuted} />
+            </PressableRow>
+          </View>
+        );
+      })}
+      <ShowMoreRow colors={colors} total={questions.length} paged={paged} />
+      <StackedDialog colors={colors} root={openId ? { kind: "question", id: openId } : null} onClose={() => setOpenId(null)}
+        questions={questions} now={now} context={context} />
+    </View>
+  );
+}
+
+function AnswerSummary({ colors, question, now }: { colors: Colors; question: Question; now: number }) {
+  const answer = question.answer!;
+  const chosen = question.options.find((option) => option.letter === answer.choice);
+  return (
+    <View style={{ gap: 2 }}>
+      <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 19 }}>
+        <Text style={{ color: colors.statusSuccess, fontWeight: "600" }}>{answer.choice}</Text>
+        {chosen ? ` ${chosen.label}.` : ""}
+        {answer.words ? <Text style={{ color: colors.foregroundMuted }}> “{answer.words}”</Text> : null}
+        <Text style={{ color: colors.foregroundMuted }}>
+          {answer.changedCourse ? ` Differs from the default (${question.default}), so work changes course.` : " Same as the default, so no change of course."}
+        </Text>
+      </Text>
+      <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16 }}>
+        Answer recorded <When colors={colors} iso={answer.at} now={now} />{question.raisedBy ? `, raised by ${question.raisedBy}` : ""}
+      </Text>
+    </View>
+  );
+}
+
+function QuestionRow({ colors, question, first, onOpen, onCopy }: {
+  colors: Colors;
+  question: Question;
+  first: boolean;
+  onOpen(): void;
+  onCopy(): void;
+}) {
+  return (
+    <View style={{ flexDirection: "row", gap: 8, paddingHorizontal: 10, paddingVertical: 10, borderTopWidth: first ? 0 : 1, borderTopColor: colors.border }}>
+      <PressScale accessibilityRole="button" accessibilityLabel={`Copy ${question.id} for your reply`} onPress={onCopy} hitSlop={6}
+        outerStyle={{ alignSelf: "flex-start", marginTop: 1 }}
+        style={({ pressed }) => ({
+          paddingHorizontal: 6,
+          borderRadius: 999,
+          backgroundColor: pressed ? colors.surface2 : colors.surface1,
+          ...raised(colors),
+        })}>
+        <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 17, fontWeight: "600" }}>{question.id}</Text>
+      </PressScale>
+      <PressableRow colors={colors} accessibilityRole="button" accessibilityLabel={`${question.id} choices`} onPress={onOpen}
+        style={{ flex: 1, minWidth: 0, flexDirection: "row", alignItems: "flex-start", gap: 8, borderRadius: 4, margin: -4, padding: 4 }}>
+        <Text style={{ flex: 1, color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{question.question}</Text>
+        <DefaultBadge colors={colors} value={question.default} waits={question.waits} />
+        {/* Optical: centers the 14px chevron on the 19px first line. */}
+        <View style={{ paddingTop: 2.5 }}><Icon name="ChevronRight" size={14} color={colors.foregroundMuted} /></View>
+      </PressableRow>
+    </View>
+  );
+}
+
+// A question dialog's body, also shown inside a ticket's dialog. `children` go at the end.
+export function QuestionView({ colors, question, now, onCopy, onOpenAttachment, children }: {
+  colors: Colors;
+  question: Question;
+  now: number;
+  onCopy(letter: string): void;
+  onOpenAttachment(attachment: Attachment, group: Attachment[]): void;
+  children?: React.ReactNode;
+}) {
+  return (
+    <View style={{ gap: 10 }}>
+      <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
+        <Text style={{ flex: 1, color: colors.foreground, fontSize: 14, lineHeight: 20 }}>{question.question}</Text>
+        {!question.answer ? <DefaultBadge colors={colors} value={question.default} waits={question.waits} /> : null}
+      </View>
+      {question.answer ? <AnswerSummary colors={colors} question={question} now={now} /> : null}
+      <QuestionDetail colors={colors} question={question} now={now} onSurface1 onCopy={onCopy} onOpenAttachment={onOpenAttachment} />
+      {children}
+    </View>
+  );
+}
+
+// A question that waits shows its default in amber: the agent is not acting on it.
+export function DefaultBadge({ colors, value, waits }: { colors: Colors; value: string; waits: boolean }) {
+  return (
+    <View style={{ flexDirection: "row", borderWidth: 1, borderColor: waits ? colors.statusWarning : colors.accent, borderRadius: 999, paddingHorizontal: 8, paddingVertical: 1 }}>
+      <Text style={{ color: waits ? colors.statusWarning : colors.foregroundMuted, fontSize: 11, lineHeight: 16 }}>
+        Default <Text style={{ color: waits ? colors.statusWarning : colors.foreground, fontWeight: "600" }}>{value}</Text>{waits ? ", waits for you" : ""}
+      </Text>
+    </View>
+  );
+}
+
+// `onSurface1` when drawn on a surface1 background (Paseo's dialogs), so the
+// Copy buttons still stand off it.
+export function QuestionDetail({ colors, question, now, onCopy, onOpenAttachment, onSurface1 = false }: {
+  colors: Colors;
+  question: Question;
+  now: number;
+  onCopy(letter: string): void;
+  onOpenAttachment(attachment: Attachment, group: Attachment[]): void;
+  onSurface1?: boolean;
+}) {
+  const button = onSurface1 ? { rest: colors.surface2, pressed: colors.surface1 } : { rest: colors.surface1, pressed: colors.surface2 };
+  return (
+    <View style={{ gap: 8, paddingTop: 2 }}>
+      {question.options.map((option) => {
+        const isDefault = option.letter === question.default;
+        // Once answered, the border marks the choice made; before that, the default.
+        const chosen = question.answer?.choice === option.letter;
+        const borderColor = question.answer ? (chosen ? colors.statusSuccess : colors.border) : isDefault ? colors.accent : colors.border;
+        return (
+          <View key={option.letter} style={{ flexDirection: "row", alignItems: "flex-start", gap: 8, padding: 8, borderRadius: 12, borderWidth: 1, borderColor }}>
+            <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 18, fontWeight: "600", width: 14 }}>{option.letter}</Text>
+            <View style={{ flex: 1, gap: 2 }}>
+              <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 18 }}>
+                {option.label}
+                {chosen ? <Text style={{ color: colors.statusSuccess }}>  Your answer</Text> : null}
+                {isDefault ? <Text style={{ color: question.answer ? colors.foregroundMuted : colors.accent }}>  Default</Text> : null}
+              </Text>
+              {option.consequence ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{option.consequence}</Text> : null}
+            </View>
+            {!question.answer ? (
+              <PressScale accessibilityRole="button" accessibilityLabel={`Copy ${question.id} ${option.letter} for your agent`}
+                onPress={() => onCopy(option.letter)} hitSlop={4}
+                style={({ pressed }) => ({ flexDirection: "row", alignItems: "center", gap: 4, paddingLeft: 6, paddingRight: 8, paddingVertical: 3, borderRadius: 4, ...raised(colors), backgroundColor: pressed ? button.pressed : button.rest })}>
+                <Icon name="Copy" size={12} color={colors.foreground} />
+                <Text style={{ color: colors.foreground, fontSize: 12, lineHeight: 16 }}>Copy {question.id} {option.letter}</Text>
+              </PressScale>
+            ) : null}
+          </View>
+        );
+      })}
+      {question.background ? (
+        <Text selectable style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>{question.background}</Text>
+      ) : null}
+      <AttachmentList colors={colors} attachments={questionAttachments(question)} onOpen={onOpenAttachment} />
+      <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16 }}>
+        Asked <When colors={colors} iso={question.askedAt} now={now} />{question.raisedBy ? `, raised by ${question.raisedBy}` : ""}
+      </Text>
+    </View>
+  );
+}

package/client/row.tsx

@@ -0,0 +1,34 @@
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import React, { useState } from "react";
+import { Pressable, type PressableProps, type ViewStyle } from "react-native";
+
+type Colors = PluginWorkspacePanelProps["theme"]["colors"];
+
+// One instant tint for every pressable row, so rows that look alike respond alike.
+// Each step moves one surface up; `onSurface1` rows (dialogs, the popover, the
+// working ticket) start a step higher.
+export function rowTint(colors: Colors, state: { hovered: boolean; pressed: boolean }, onSurface1 = false): string {
+  if (onSurface1) return state.pressed ? colors.border : state.hovered ? colors.surface2 : colors.surface1;
+  return state.pressed ? colors.surface2 : state.hovered ? colors.surface1 : "transparent";
+}
+
+// A full-width row that opens something. `resting` is its background at rest.
+export function PressableRow({ colors, onSurface1 = false, transparentAtRest = true, style, children, ...props }: Omit<PressableProps, "style" | "children"> & {
+  colors: Colors;
+  onSurface1?: boolean;
+  // Rows on a surface1 background rest transparent; the working ticket rests on surface1.
+  transparentAtRest?: boolean;
+  style?: ViewStyle;
+  children: React.ReactNode;
+}) {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <Pressable {...props} onHoverIn={() => setHovered(true)} onHoverOut={() => setHovered(false)}
+      style={({ pressed }) => {
+        const tint = rowTint(colors, { hovered, pressed }, onSurface1);
+        return [style, { backgroundColor: !hovered && !pressed && transparentAtRest ? "transparent" : tint }];
+      }}>
+      {children}
+    </Pressable>
+  );
+}

package/client/section-title.tsx

@@ -0,0 +1,24 @@
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import React from "react";
+import { Text, View, type ViewStyle } from "react-native";
+
+type Colors = PluginWorkspacePanelProps["theme"]["colors"];
+
+// A card's heading: a 14px Lucide icon beside the 13px semibold title.
+export function SectionTitle({ colors, icon, title, color, style, children }: {
+  colors: Colors;
+  icon: string;
+  title: string;
+  color?: string;
+  style?: ViewStyle;
+  children?: React.ReactNode;
+}) {
+  return (
+    <View style={[{ flexDirection: "row", alignItems: "center", gap: 6, paddingHorizontal: 10, paddingVertical: 8 }, style]}>
+      <Icon name={icon} size={14} color={color ?? colors.foregroundMuted} />
+      <Text accessibilityRole="header" style={{ color: color ?? colors.foreground, fontSize: 13, lineHeight: 18, fontWeight: "600" }}>{title}</Text>
+      {children}
+    </View>
+  );
+}

package/client/show-more.tsx

@@ -0,0 +1,37 @@
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import React, { useState } from "react";
+import { Text } from "react-native";
+import { IconSwap } from "./motion";
+import { PressableRow } from "./row";
+
+type Colors = PluginWorkspacePanelProps["theme"]["colors"];
+
+export const PAGE = 10;
+
+// Long newest-first lists show 10 at a time; each press loads 10 older. New
+// items arrive at the top, so the latest stay in view.
+export function usePaged<T>(items: T[]): { shown: T[]; older: number; showOlder(): void; showFewer(): void } {
+  const [limit, setLimit] = useState(PAGE);
+  return {
+    shown: items.slice(0, limit),
+    older: Math.max(0, items.length - limit),
+    showOlder: () => setLimit(limit + PAGE),
+    showFewer: () => setLimit(PAGE),
+  };
+}
+
+// The row under a paged list: "Show 10 older", or "Show fewer" once all are shown.
+export function ShowMoreRow({ colors, total, paged }: { colors: Colors; total: number; paged: ReturnType<typeof usePaged> }) {
+  const more = paged.older > 0 ? { label: `Show ${Math.min(paged.older, PAGE)} older`, icon: "ChevronDown", onPress: paged.showOlder }
+    : total > PAGE ? { label: "Show fewer", icon: "ChevronUp", onPress: paged.showFewer }
+    : null;
+  if (!more) return null;
+  return (
+    <PressableRow colors={colors} accessibilityRole="button" onPress={more.onPress}
+      style={{ flexDirection: "row", alignItems: "center", gap: 6, paddingHorizontal: 10, paddingVertical: 8, borderTopWidth: 1, borderTopColor: colors.border }}>
+      <IconSwap swapKey={more.icon} size={14}><Icon name={more.icon} size={14} color={colors.foregroundMuted} /></IconSwap>
+      <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontWeight: "600", fontVariant: ["tabular-nums"] }}>{more.label}</Text>
+    </PressableRow>
+  );
+}

package/client/spinner.tsx

@@ -0,0 +1,35 @@
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import React, { useEffect, useRef } from "react";
+import { ActivityIndicator, Animated, Easing, Platform, View } from "react-native";
+import { nativeDriver } from "./motion";
+
+// The system spinner, sized to sit beside a line of text. iOS draws it only
+// at 20pt, so it's scaled into the slot there.
+export function Spinner({ color, size = 12 }: { color: string; size?: number }) {
+  return (
+    <View accessibilityLabel="Working" style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
+      {Platform.OS === "ios"
+        ? <ActivityIndicator size="small" color={color} style={{ transform: [{ scale: size / 20 }] }} />
+        : <ActivityIndicator size={size} color={color} />}
+    </View>
+  );
+}
+
+// Shown in place of the spinner once the dashboard is stale: the work may have
+// stopped, so the icon asks for attention instead of looking busy.
+export function StalledPulse({ color, size = 12 }: { color: string; size?: number }) {
+  const opacity = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    const loop = Animated.loop(Animated.sequence([
+      Animated.timing(opacity, { toValue: 0.35, duration: 700, easing: Easing.inOut(Easing.ease), useNativeDriver: nativeDriver() }),
+      Animated.timing(opacity, { toValue: 1, duration: 700, easing: Easing.inOut(Easing.ease), useNativeDriver: nativeDriver() }),
+    ]));
+    loop.start();
+    return () => loop.stop();
+  }, [opacity]);
+  return (
+    <Animated.View accessibilityLabel="Possibly stalled" style={{ width: size, height: size, opacity }}>
+      <Icon name="TriangleAlert" size={size} color={color} />
+    </Animated.View>
+  );
+}

package/client/status-badge.tsx

@@ -0,0 +1,30 @@
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import React from "react";
+import { Text, View } from "react-native";
+import type { TicketStatus } from "../shared/events";
+
+type Colors = PluginWorkspacePanelProps["theme"]["colors"];
+
+export const STATUS_LABEL: Record<TicketStatus, string> = {
+  not_started: "Not started",
+  working: "Working",
+  blocked: "Blocked",
+  done: "Done",
+  skipped: "Skipped",
+};
+
+// `waiting`: held for another ticket. Shown as calm as "Not started", whatever the status.
+export function StatusBadge({ colors, status, waiting = false }: { colors: Colors; status: TicketStatus; waiting?: boolean }) {
+  const tone = waiting ? { fg: colors.foregroundMuted, bg: "transparent", border: colors.border } : {
+    done: { fg: colors.statusSuccess, bg: "transparent", border: colors.statusSuccess },
+    working: { fg: colors.accentForeground, bg: colors.accent, border: colors.accent },
+    blocked: { fg: colors.statusDanger, bg: "transparent", border: colors.statusDanger },
+    skipped: { fg: colors.foregroundMuted, bg: "transparent", border: colors.border },
+    not_started: { fg: colors.foregroundMuted, bg: "transparent", border: colors.border },
+  }[status];
+  return (
+    <View style={{ borderWidth: 1, borderColor: tone.border, backgroundColor: tone.bg, borderRadius: 999, paddingHorizontal: 8, paddingVertical: 1 }}>
+      <Text style={{ color: tone.fg, fontSize: 11, lineHeight: 16 }}>{waiting ? "Waiting" : STATUS_LABEL[status]}</Text>
+    </View>
+  );
+}

package/client/surfaces.ts

@@ -0,0 +1,45 @@
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import type { ViewStyle } from "react-native";
+
+type Colors = PluginWorkspacePanelProps["theme"]["colors"];
+
+// Relative luminance of a #rgb/#rrggbb or rgb() color, or null when unreadable.
+function luminance(color: string): number | null {
+  let rgb: number[] | null = null;
+  const hex = color.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (hex) {
+    const digits = hex[1].length === 3 ? [...hex[1]].map((d) => d + d) : hex[1].match(/../g)!;
+    rgb = digits.map((d) => parseInt(d, 16));
+  } else {
+    const fn = color.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
+    if (fn) rgb = fn.slice(1, 4).map(Number);
+  }
+  if (!rgb) return null;
+  const [r, g, b] = rgb.map((v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+function isLight(colors: Colors): boolean | null {
+  const value = luminance(colors.surface0);
+  return value === null ? null : value > 0.4;
+}
+
+// A 1px ring just inside an image: pure black or white at 10%, never a tinted gray.
+export function imageOutline(colors: Colors): { borderWidth: number; borderColor: string } {
+  return { borderWidth: 1, borderColor: isLight(colors) === false ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)" };
+}
+
+// Depth for cards and bordered buttons: a transparent ring plus lift in light
+// themes, one white ring in dark ones. Dividers and state borders stay borders.
+export function raised(colors: Colors): ViewStyle {
+  const light = isLight(colors);
+  if (light === null) return { borderWidth: 1, borderColor: colors.border };
+  return {
+    boxShadow: light
+      ? "0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)"
+      : "0px 0px 0px 1px rgba(255, 255, 255, 0.08)",
+  };
+}