@typecaast/skins 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,2662 +1,26 @@
-import { z } from 'zod';
-import { defineSkin, MessageContent, fadeSlideIn, popIn, TypingDots } from '@typecaast/skin-kit';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-// src/slack/index.ts
-
-// src/slack/tokens.ts
-var SLACK_COLORS = {
-  light: {
-    bg: "#ffffff",
-    text: "#1d1c1d",
-    subtle: "#616061",
-    border: "#e2e2e2",
-    headerBg: "#ffffff",
-    link: "#1264a3",
-    mentionText: "#1264a3",
-    mentionBg: "#e8f5fa",
-    codeText: "#e01e5a",
-    codeBg: "#f6f6f6",
-    codeBorder: "#e2e2e2",
-    reactionBg: "#f8f8f8",
-    reactionBorder: "#e2e2e2",
-    reactionText: "#454245",
-    composerBg: "#ffffff",
-    composerBorder: "#8d8d8d",
-    placeholder: "#8d8d8d",
-    primary: "#007a5a",
-    primaryText: "#ffffff",
-    buttonBorder: "#d1d1d1",
-    buttonText: "#1d1c1d",
-    appBadgeBg: "#e8e8e8",
-    appBadgeText: "#616061",
-    cardBar: "#dddddd",
-    caret: "#1264a3"
-  },
-  dark: {
-    bg: "#1a1d21",
-    text: "#d1d2d3",
-    subtle: "#ababad",
-    border: "#35373b",
-    headerBg: "#1a1d21",
-    link: "#1d9bd1",
-    mentionText: "#1d9bd1",
-    mentionBg: "rgba(29,155,209,0.12)",
-    codeText: "#e06c9a",
-    codeBg: "#222529",
-    codeBorder: "#35373b",
-    reactionBg: "#222529",
-    reactionBorder: "#35373b",
-    reactionText: "#d1d2d3",
-    composerBg: "#222529",
-    composerBorder: "#565856",
-    placeholder: "#9a9b9d",
-    primary: "#007a5a",
-    primaryText: "#ffffff",
-    buttonBorder: "#565856",
-    buttonText: "#d1d2d3",
-    appBadgeBg: "#35373b",
-    appBadgeText: "#ababad",
-    cardBar: "#35373b",
-    caret: "#1d9bd1"
-  }
-};
-var slackTokens = {
-  light: { colors: SLACK_COLORS.light },
-  dark: { colors: SLACK_COLORS.dark }
-};
-
-// src/slack/fonts.ts
-var slackFonts = [
-  {
-    family: "Lato",
-    weights: [400, 700, 900],
-    sources: [
-      {
-        url: "https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXiWtFCc.woff2",
-        weight: 400,
-        format: "woff2"
-      },
-      {
-        url: "https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2",
-        weight: 700,
-        format: "woff2"
-      },
-      {
-        url: "https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh50XSwiPGQ3q5d0.woff2",
-        weight: 900,
-        format: "woff2"
-      }
-    ]
-  }
-];
-var SLACK_FONT_STACK = 'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
-var AVATAR_RADIUS = 8;
-function formatTime(atMs) {
-  const base = 9 * 3600 * 1e3;
-  const total = Math.floor((base + atMs) / 1e3);
-  const h = Math.floor(total / 3600) % 24;
-  const m = Math.floor(total % 3600 / 60);
-  const ampm = h >= 12 ? "PM" : "AM";
-  const hr = h % 12 === 0 ? 12 : h % 12;
-  return `${hr}:${String(m).padStart(2, "0")} ${ampm}`;
-}
-function initials(name) {
-  return name.split(/\s+/).map((w) => w.charAt(0)).slice(0, 2).join("").toUpperCase();
-}
-function markStyles(c) {
-  return {
-    link: { color: c.link, textDecoration: "none" },
-    mention: {
-      color: c.mentionText,
-      background: c.mentionBg,
-      borderRadius: 3,
-      padding: "0 2px",
-      fontWeight: 600
-    },
-    code: {
-      color: c.codeText,
-      background: c.codeBg,
-      border: `1px solid ${c.codeBorder}`,
-      borderRadius: 3,
-      padding: "1px 4px",
-      fontFamily: "Menlo, Monaco, Consolas, monospace",
-      fontSize: "0.85em"
-    }
-  };
-}
-var Avatar = ({ theme, participant, size = 36 }) => {
-  const c = SLACK_COLORS[theme];
-  if (participant.avatar) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: participant.avatar,
-        alt: participant.name,
-        width: size,
-        height: size,
-        style: {
-          width: size,
-          height: size,
-          borderRadius: AVATAR_RADIUS,
-          objectFit: "cover",
-          display: "block"
-        }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "aria-label": participant.name,
-      style: {
-        width: size,
-        height: size,
-        borderRadius: AVATAR_RADIUS,
-        background: participant.color ?? "#4a154b",
-        color: "#ffffff",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontWeight: 700,
-        fontSize: size * 0.4,
-        border: theme === "dark" ? `1px solid ${c.border}` : void 0
-      },
-      children: initials(participant.name)
-    }
-  );
-};
-var Reaction = ({ theme, reaction }) => {
-  const c = SLACK_COLORS[theme];
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      style: {
-        ...popIn(reaction.progress),
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 4,
-        background: c.reactionBg,
-        border: `1px solid ${c.reactionBorder}`,
-        color: c.reactionText,
-        borderRadius: 12,
-        padding: "1px 7px",
-        height: 22,
-        fontSize: 12
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: 13 }, children: reaction.emoji }),
-        /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontVariantNumeric: "tabular-nums" }, children: reaction.count })
-      ]
-    }
-  );
-};
-var TypingIndicator = ({ theme, typing, author }) => {
-  const c = SLACK_COLORS[theme];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 6,
-        padding: "2px 16px 4px 60px",
-        color: c.subtle,
-        fontSize: 12
-      },
-      children: [
-        /* @__PURE__ */ jsx(TypingDots, { progress: typing.progress, color: c.subtle, size: 5 }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          author.name,
-          " is typing\u2026"
-        ] })
-      ]
-    }
-  );
-};
-var Caret = ({ color }) => /* @__PURE__ */ jsx(
-  "span",
-  {
-    style: {
-      display: "inline-block",
-      width: 1.5,
-      height: "1.05em",
-      background: color,
-      marginLeft: 1,
-      verticalAlign: "text-bottom"
-    }
-  }
-);
-var Composer = ({ theme, composer }) => {
-  const c = SLACK_COLORS[theme];
-  const hasText = composer.text.length > 0;
-  return /* @__PURE__ */ jsx("div", { style: { flex: "0 0 auto", padding: "4px 16px 14px" }, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        border: `1px solid ${c.composerBorder}`,
-        borderRadius: 8,
-        background: c.composerBg,
-        padding: "9px 12px",
-        minHeight: 22,
-        fontSize: 15,
-        color: c.text
-      },
-      children: hasText ? /* @__PURE__ */ jsxs("span", { children: [
-        composer.text,
-        /* @__PURE__ */ jsx(Caret, { color: c.caret })
-      ] }) : /* @__PURE__ */ jsx("span", { style: { color: c.placeholder }, children: "Reply\u2026" })
-    }
-  ) });
-};
-function buttonStyle(c, primary) {
-  const base = {
-    borderRadius: 4,
-    padding: "7px 12px",
-    fontWeight: 700,
-    fontSize: 13,
-    cursor: "default",
-    fontFamily: "inherit",
-    lineHeight: 1
-  };
-  return primary ? { ...base, background: c.primary, color: c.primaryText, border: "none" } : {
-    ...base,
-    background: "transparent",
-    color: c.buttonText,
-    border: `1px solid ${c.buttonBorder}`
-  };
-}
-var SystemMessage = ({ theme, message, author }) => {
-  const c = SLACK_COLORS[theme];
-  const actions = message.system?.actions ?? [];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        gap: 8,
-        padding: "8px 16px 2px",
-        ...fadeSlideIn(message.revealProgress)
-      },
-      children: [
-        /* @__PURE__ */ jsx("div", { style: { flex: "0 0 36px", width: 36 }, children: author ? /* @__PURE__ */ jsx(Avatar, { theme, participant: author, size: 36 }) : null }),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, color: c.text }, children: author?.name ?? "App" }),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  fontSize: 10,
-                  fontWeight: 700,
-                  letterSpacing: 0.4,
-                  background: c.appBadgeBg,
-                  color: c.appBadgeText,
-                  borderRadius: 2,
-                  padding: "1px 4px"
-                },
-                children: "APP"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: c.subtle }, children: formatTime(message.atMs) })
-          ] }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                marginTop: 4,
-                borderLeft: `4px solid ${c.cardBar}`,
-                borderRadius: 2,
-                paddingLeft: 12
-              },
-              children: [
-                /* @__PURE__ */ jsx("div", { style: { color: c.text }, children: /* @__PURE__ */ jsx(MessageContent, { nodes: message.content, styles: markStyles(c) }) }),
-                actions.length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8, marginTop: 8 }, children: actions.map((a, i) => /* @__PURE__ */ jsx("button", { type: "button", style: buttonStyle(c, i === 0), children: a.label }, i)) }) : null
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-var Message = ({ theme, message, author }) => {
-  const c = SLACK_COLORS[theme];
-  const grouped = message.isGrouped;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        gap: 8,
-        padding: grouped ? "2px 16px" : "8px 16px 2px",
-        ...fadeSlideIn(message.revealProgress)
-      },
-      children: [
-        /* @__PURE__ */ jsx("div", { style: { flex: "0 0 36px", width: 36 }, children: grouped ? null : /* @__PURE__ */ jsx(Avatar, { theme, participant: author, size: 36 }) }),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-          grouped ? null : /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 8 }, children: [
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, color: c.text }, children: author.name }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: c.subtle }, children: formatTime(message.atMs) })
-          ] }),
-          /* @__PURE__ */ jsx("div", { style: { color: c.text, wordBreak: "break-word" }, children: /* @__PURE__ */ jsx(
-            MessageContent,
-            {
-              nodes: message.content,
-              styles: markStyles(c),
-              imageStyle: {
-                borderRadius: 8,
-                marginTop: 4,
-                border: `1px solid ${c.border}`,
-                maxWidth: 360
-              }
-            }
-          ) }),
-          message.reactions.length > 0 ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                display: "flex",
-                gap: 4,
-                marginTop: 4,
-                flexWrap: "wrap"
-              },
-              children: message.reactions.map((r, i) => /* @__PURE__ */ jsx(Reaction, { theme, reaction: r }, i))
-            }
-          ) : null
-        ] })
-      ]
-    }
-  );
-};
-var Frame = ({
-  theme,
-  options,
-  children
-}) => {
-  const c = SLACK_COLORS[theme];
-  const channel = typeof options?.channel === "string" ? options.channel : "#general";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        fontFamily: SLACK_FONT_STACK,
-        background: c.bg,
-        color: c.text,
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        width: "100%",
-        fontSize: 15,
-        lineHeight: 1.46668,
-        WebkitFontSmoothing: "antialiased"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "header",
-          {
-            style: {
-              flex: "0 0 auto",
-              padding: "10px 16px",
-              borderBottom: `1px solid ${c.border}`,
-              display: "flex",
-              alignItems: "baseline",
-              gap: 8
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { style: { fontWeight: 900, fontSize: 18, color: c.text }, children: "Thread" }),
-              /* @__PURE__ */ jsx("span", { style: { color: c.subtle, fontSize: 13 }, children: channel })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flex: "1 1 auto",
-              minHeight: 0,
-              display: "flex",
-              flexDirection: "column"
-            },
-            children
-          }
-        )
-      ]
-    }
-  );
-};
-var slackComponents = {
-  Frame,
-  Message,
-  TypingIndicator,
-  Reaction,
-  Composer,
-  SystemMessage,
-  Avatar
-};
-
-// src/slack/capabilities.ts
-var slackCapabilities = {
-  events: {
-    message: "native",
-    reaction: "native",
-    typing: "native",
-    // "X is typing…"
-    composerType: "native",
-    send: "native",
-    edit: "native",
-    delete: "native",
-    readReceipt: "unsupported",
-    // Slack has no per-message read receipts in threads
-    system: "native",
-    // app/PR cards
-    beat: "native"
-  },
-  content: {
-    text: true,
-    image: true
-  },
-  reactions: true,
-  threads: true,
-  readReceipts: false
-};
-
-// src/slack/index.ts
-var slackOptionsSchema = z.object({
-  /** Channel label shown in the thread header (e.g. `"#alerts"`). */
-  channel: z.string().optional(),
-  showThreadHeader: z.boolean().optional()
-});
-var slack = defineSkin({
-  id: "slack",
-  meta: {
-    name: "Slack",
-    defaultCanvas: { width: 880, height: 720 },
-    supportsThemes: ["light", "dark"],
-    capabilities: slackCapabilities,
-    optionsSchema: slackOptionsSchema,
-    fonts: slackFonts
-  },
-  components: slackComponents,
-  tokens: slackTokens
-});
-
-// src/claude-code/tokens.ts
-var TUI_COLORS = {
-  bg: "#1a1a1a",
-  titleBar: "#2a2a2a",
-  border: "#3a3a3a",
-  text: "#e6e6e6",
-  dim: "#8b8b8b",
-  prompt: "#d97757",
-  // Claude coral
-  accent: "#d97757",
-  spinner: "#d97757",
-  system: "#7aa2f7",
-  // tool/blue
-  cursor: "#d97757",
-  dotRed: "#ff5f56",
-  dotYellow: "#ffbd2e",
-  dotGreen: "#27c93f"
-};
-var MONO_STACK = '"JetBrains Mono", "SF Mono", Menlo, Monaco, "Cascadia Code", "Roboto Mono", monospace';
-function flatten(content) {
-  return content.map((node) => {
-    if (node.type === "text") {
-      const spans = node.spans;
-      return spans.map(
-        (s) => typeof s.value === "string" ? s.value : typeof s.label === "string" ? s.label : typeof s.href === "string" ? s.href : ""
-      ).join("");
-    }
-    if (node.type === "image") {
-      const alt = node.alt;
-      return `[image${alt ? `: ${alt}` : ""}]`;
-    }
-    return "";
-  }).join(" ");
-}
-function streamed(text, progress) {
-  if (progress >= 1) return text;
-  return text.slice(0, Math.round(progress * text.length));
-}
-var lineStyle = {
-  padding: "2px 0",
-  whiteSpace: "pre-wrap",
-  wordBreak: "break-word"
-};
-var Avatar2 = () => null;
-var Reaction2 = ({ reaction }) => /* @__PURE__ */ jsxs("span", { style: { color: TUI_COLORS.dim }, children: [
-  " ",
-  reaction.emoji
-] });
-var SPINNER = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
-var TypingIndicator2 = ({ typing }) => {
-  const frame = Math.floor(typing.progress * SPINNER.length * 6) % SPINNER.length;
-  return /* @__PURE__ */ jsxs("div", { style: { ...lineStyle, color: TUI_COLORS.dim }, children: [
-    /* @__PURE__ */ jsx("span", { style: { color: TUI_COLORS.spinner }, children: SPINNER[frame] }),
-    " Thinking\u2026"
-  ] });
-};
-var Message2 = ({ message }) => {
-  const text = streamed(flatten(message.content), message.revealProgress);
-  if (message.isSelf) {
-    return /* @__PURE__ */ jsxs("div", { style: { ...lineStyle, display: "flex", gap: 8 }, children: [
-      /* @__PURE__ */ jsx("span", { style: { color: TUI_COLORS.prompt }, children: "\u276F" }),
-      /* @__PURE__ */ jsx("span", { style: { color: TUI_COLORS.text }, children: text })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { style: { ...lineStyle, display: "flex", gap: 8 }, children: [
-    /* @__PURE__ */ jsx("span", { style: { color: TUI_COLORS.accent }, children: "\u23FA" }),
-    /* @__PURE__ */ jsx("span", { style: { color: TUI_COLORS.text }, children: text })
-  ] });
-};
-var SystemMessage2 = ({ message }) => {
-  const text = streamed(flatten(message.content), message.revealProgress);
-  return /* @__PURE__ */ jsxs("div", { style: { ...lineStyle, display: "flex", gap: 8, color: TUI_COLORS.dim }, children: [
-    /* @__PURE__ */ jsx("span", { style: { color: TUI_COLORS.system }, children: "\u23BF" }),
-    /* @__PURE__ */ jsx("span", { children: text })
-  ] });
-};
-var Composer2 = ({ composer }) => /* @__PURE__ */ jsxs(
-  "div",
-  {
-    style: {
-      display: "flex",
-      gap: 8,
-      padding: "6px 0 2px",
-      marginTop: 6,
-      borderTop: `1px solid ${TUI_COLORS.border}`
-    },
-    children: [
-      /* @__PURE__ */ jsx("span", { style: { color: TUI_COLORS.prompt }, children: "\u276F" }),
-      /* @__PURE__ */ jsxs("span", { style: { whiteSpace: "pre-wrap", color: TUI_COLORS.text }, children: [
-        composer.text,
-        /* @__PURE__ */ jsx("span", { style: { color: TUI_COLORS.cursor }, children: "\u2588" })
-      ] })
-    ]
-  }
-);
-var Dot = ({ color }) => /* @__PURE__ */ jsx(
-  "span",
-  {
-    style: {
-      width: 11,
-      height: 11,
-      borderRadius: "50%",
-      background: color,
-      display: "inline-block"
-    }
-  }
-);
-var Frame2 = ({
-  options,
-  children
-}) => {
-  const title = typeof options?.title === "string" ? options.title : "claude \u2014 typecaast";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        fontFamily: MONO_STACK,
-        background: TUI_COLORS.bg,
-        color: TUI_COLORS.text,
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        width: "100%",
-        fontSize: 13,
-        lineHeight: 1.5,
-        WebkitFontSmoothing: "antialiased"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              flex: "0 0 auto",
-              height: 30,
-              background: TUI_COLORS.titleBar,
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              padding: "0 12px",
-              borderBottom: `1px solid ${TUI_COLORS.border}`
-            },
-            children: [
-              /* @__PURE__ */ jsx(Dot, { color: TUI_COLORS.dotRed }),
-              /* @__PURE__ */ jsx(Dot, { color: TUI_COLORS.dotYellow }),
-              /* @__PURE__ */ jsx(Dot, { color: TUI_COLORS.dotGreen }),
-              /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, color: TUI_COLORS.dim, fontSize: 12 }, children: title })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flex: "1 1 auto",
-              minHeight: 0,
-              display: "flex",
-              flexDirection: "column",
-              padding: "10px 14px",
-              overflow: "hidden"
-            },
-            children
-          }
-        )
-      ]
-    }
-  );
-};
-var tuiComponents = {
-  Frame: Frame2,
-  Message: Message2,
-  TypingIndicator: TypingIndicator2,
-  Reaction: Reaction2,
-  Composer: Composer2,
-  SystemMessage: SystemMessage2,
-  Avatar: Avatar2
-};
-
-// src/claude-code/capabilities.ts
-var tuiCapabilities = {
-  events: {
-    message: "native",
-    composerType: "native",
-    send: "native",
-    typing: "native",
-    // spinner
-    system: "native",
-    // tool/output lines
-    reaction: "unsupported",
-    readReceipt: "unsupported",
-    edit: "native",
-    delete: "native",
-    beat: "native"
-  },
-  content: {
-    text: true,
-    image: false
-    // terminals don't render images
-  },
-  reactions: false,
-  threads: false,
-  readReceipts: false
-};
-
-// src/claude-code/fonts.ts
-var tuiFonts = [
-  {
-    family: "JetBrains Mono",
-    weights: [400, 700],
-    sources: [
-      {
-        url: "https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.woff2",
-        weight: 400,
-        format: "woff2"
-      },
-      {
-        url: "https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-700-normal.woff2",
-        weight: 700,
-        format: "woff2"
-      }
-    ]
-  }
-];
-
-// src/claude-code/index.ts
-var tuiOptionsSchema = z.object({
-  /** Title-bar label (e.g. `"claude — zsh"`). */
-  title: z.string().optional()
-});
-var claudeCode = defineSkin({
-  id: "claude-code",
-  meta: {
-    name: "Claude Code (TUI)",
-    defaultCanvas: { width: 720, height: 480 },
-    supportsThemes: ["dark"],
-    capabilities: tuiCapabilities,
-    optionsSchema: tuiOptionsSchema,
-    fonts: tuiFonts
-  },
-  components: tuiComponents
-});
-
-// src/imessage/tokens.ts
-var IMESSAGE_COLORS = {
-  light: {
-    bg: "#ffffff",
-    text: "#000000",
-    subtle: "#8e8e93",
-    selfBubble: "#0b93f6",
-    selfText: "#ffffff",
-    otherBubble: "#e9e9eb",
-    otherText: "#000000",
-    navBg: "rgba(249,249,249,0.94)",
-    navBorder: "rgba(0,0,0,0.12)",
-    statusText: "#000000",
-    composerBg: "#ffffff",
-    composerBorder: "#d1d1d6",
-    placeholder: "#8e8e93",
-    keyboardBg: "#d1d4db",
-    keyBg: "#ffffff",
-    keyText: "#000000",
-    keyShadow: "rgba(0,0,0,0.28)",
-    tapbackBg: "#e9e9eb",
-    link: "#0b93f6"
-  },
-  dark: {
-    bg: "#000000",
-    text: "#ffffff",
-    subtle: "#8e8e93",
-    selfBubble: "#0b93f6",
-    selfText: "#ffffff",
-    otherBubble: "#26252a",
-    otherText: "#ffffff",
-    navBg: "rgba(22,22,22,0.92)",
-    navBorder: "rgba(255,255,255,0.12)",
-    statusText: "#ffffff",
-    composerBg: "#1c1c1e",
-    composerBorder: "#38383a",
-    placeholder: "#8e8e93",
-    keyboardBg: "#1c1c1e",
-    keyBg: "#6b6b6f",
-    keyText: "#ffffff",
-    keyShadow: "rgba(0,0,0,0.5)",
-    tapbackBg: "#26252a",
-    link: "#0b93f6"
-  }
-};
-var IMESSAGE_FONT_STACK = 'Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif';
-var imessageTokens = {
-  light: {
-    colors: IMESSAGE_COLORS.light
-  },
-  dark: { colors: IMESSAGE_COLORS.dark }
-};
-var RADIUS = 18;
-var TAIL = 5;
-function initials2(name) {
-  return name.split(/\s+/).map((w) => w.charAt(0)).slice(0, 2).join("").toUpperCase();
-}
-function markStyles2(c) {
-  return {
-    link: { color: c.link, textDecoration: "underline" },
-    code: {
-      fontFamily: "Menlo, monospace",
-      fontSize: "0.9em"
-    }
-  };
-}
-var StatusBar = ({ theme }) => {
-  const c = IMESSAGE_COLORS[theme];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        flex: "0 0 auto",
-        height: 44,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: "0 24px",
-        color: c.statusText,
-        fontWeight: 600,
-        fontSize: 15
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { children: "9:41" }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: { display: "inline-flex", alignItems: "flex-end", gap: 1.5 },
-              children: [5, 7, 9, 11].map((h, i) => /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    width: 3,
-                    height: h,
-                    borderRadius: 1,
-                    background: c.statusText
-                  }
-                },
-                i
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600 }, children: "5G" }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                display: "inline-block",
-                width: 24,
-                height: 12,
-                borderRadius: 3,
-                border: `1px solid ${c.statusText}`,
-                position: "relative",
-                opacity: 0.9
-              },
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    position: "absolute",
-                    inset: 1.5,
-                    width: "70%",
-                    borderRadius: 1,
-                    background: c.statusText
-                  }
-                }
-              )
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-var Avatar3 = ({ participant, size = 30 }) => {
-  if (participant.avatar) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: participant.avatar,
-        alt: participant.name,
-        width: size,
-        height: size,
-        style: {
-          width: size,
-          height: size,
-          borderRadius: "50%",
-          objectFit: "cover"
-        }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        background: participant.color ?? "#a9a9af",
-        color: "#fff",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: size * 0.4,
-        fontWeight: 500
-      },
-      children: initials2(participant.name)
-    }
-  );
-};
-var NavBar = ({ theme, title, participant }) => {
-  const c = IMESSAGE_COLORS[theme];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        flex: "0 0 auto",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 3,
-        padding: "4px 0 8px",
-        background: c.navBg,
-        borderBottom: `0.5px solid ${c.navBorder}`,
-        backdropFilter: "blur(20px)"
-      },
-      children: [
-        participant ? /* @__PURE__ */ jsx(Avatar3, { theme, participant, size: 42 }) : null,
-        /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, fontWeight: 500, color: c.text }, children: [
-          title,
-          /* @__PURE__ */ jsx("span", { style: { marginLeft: 3, color: c.subtle }, children: "\u203A" })
-        ] })
-      ]
-    }
-  );
-};
-var Reaction3 = ({ theme, reaction }) => {
-  const c = IMESSAGE_COLORS[theme];
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      style: {
-        ...popIn(reaction.progress),
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        background: c.tapbackBg,
-        borderRadius: 12,
-        padding: "2px 6px",
-        fontSize: 12,
-        boxShadow: `0 1px 2px ${theme === "dark" ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.15)"}`
-      },
-      children: reaction.emoji
-    }
-  );
-};
-var Message3 = ({ theme, message }) => {
-  const c = IMESSAGE_COLORS[theme];
-  const self = message.isSelf;
-  const bubbleStyle = {
-    maxWidth: "72%",
-    padding: "7px 12px",
-    borderRadius: RADIUS,
-    background: self ? c.selfBubble : c.otherBubble,
-    color: self ? c.selfText : c.otherText,
-    fontSize: 16,
-    lineHeight: 1.3,
-    wordBreak: "break-word",
-    ...self ? { borderBottomRightRadius: TAIL } : { borderBottomLeftRadius: TAIL }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        justifyContent: self ? "flex-end" : "flex-start",
-        padding: message.isGrouped ? "1px 12px" : "3px 12px",
-        ...fadeSlideIn(message.revealProgress, { distance: 6 })
-      },
-      children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-        /* @__PURE__ */ jsx("div", { style: bubbleStyle, children: /* @__PURE__ */ jsx(
-          MessageContent,
-          {
-            nodes: message.content,
-            styles: markStyles2(c),
-            imageStyle: { borderRadius: 14, maxWidth: 240, marginTop: 2 }
-          }
-        ) }),
-        message.reactions.length > 0 ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: -14,
-              ...self ? { left: -6 } : { right: -6 },
-              display: "flex",
-              gap: 2
-            },
-            children: message.reactions.map((r, i) => /* @__PURE__ */ jsx(Reaction3, { theme, reaction: r }, i))
-          }
-        ) : null
-      ] })
-    }
-  );
-};
-var TypingIndicator3 = ({ theme, typing }) => {
-  const c = IMESSAGE_COLORS[theme];
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        justifyContent: "flex-start",
-        padding: "3px 12px"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            background: c.otherBubble,
-            borderRadius: RADIUS,
-            borderBottomLeftRadius: TAIL,
-            padding: "10px 14px"
-          },
-          children: /* @__PURE__ */ jsx(
-            TypingDots,
-            {
-              progress: typing.progress,
-              color: c.subtle,
-              size: 8,
-              gap: 5
-            }
-          )
-        }
-      )
-    }
-  );
-};
-var SystemMessage3 = ({ theme, message }) => {
-  const c = IMESSAGE_COLORS[theme];
-  const text = message.content.map(
-    (n) => n.type === "text" ? n.spans.map((s) => s.value ?? "").join("") : ""
-  ).join(" ");
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        textAlign: "center",
-        color: c.subtle,
-        fontSize: 12,
-        fontWeight: 500,
-        padding: "8px 0",
-        ...fadeSlideIn(message.revealProgress, { distance: 0 })
-      },
-      children: text
-    }
-  );
-};
-var Composer3 = ({ theme, composer }) => {
-  const c = IMESSAGE_COLORS[theme];
-  const hasText = composer.text.length > 0;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        flex: "0 0 auto",
-        display: "flex",
-        alignItems: "flex-end",
-        gap: 8,
-        padding: "8px 12px"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              width: 30,
-              height: 30,
-              borderRadius: "50%",
-              background: theme === "dark" ? "#1c1c1e" : "#e9e9eb",
-              color: c.subtle,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: 20
-            },
-            children: "+"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flex: 1,
-              minHeight: 34,
-              display: "flex",
-              alignItems: "center",
-              border: `1px solid ${c.composerBorder}`,
-              borderRadius: 18,
-              padding: "5px 12px",
-              background: c.composerBg,
-              color: c.text,
-              fontSize: 16
-            },
-            children: hasText ? /* @__PURE__ */ jsxs("span", { children: [
-              composer.text,
-              /* @__PURE__ */ jsx("span", { style: { color: c.selfBubble }, children: "|" })
-            ] }) : /* @__PURE__ */ jsx("span", { style: { color: c.placeholder }, children: "iMessage" })
-          }
-        ),
-        hasText ? /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              width: 30,
-              height: 30,
-              borderRadius: "50%",
-              background: c.selfBubble,
-              color: "#fff",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: 17
-            },
-            children: "\u2191"
-          }
-        ) : null
-      ]
-    }
-  );
-};
-var KEY_ROWS = [
-  ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
-  ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
-  ["\u21E7", "z", "x", "c", "v", "b", "n", "m", "\u232B"]
-];
-var Keyboard = ({ theme }) => {
-  const c = IMESSAGE_COLORS[theme];
-  const key = (label, wide = false) => /* @__PURE__ */ jsx(
-    "span",
-    {
-      style: {
-        flex: wide ? 1.6 : 1,
-        textAlign: "center",
-        padding: "9px 0",
-        borderRadius: 5,
-        background: label === "\u21E7" || label === "\u232B" ? "transparent" : c.keyBg,
-        color: c.keyText,
-        fontSize: 16,
-        fontWeight: 400,
-        boxShadow: label === "\u21E7" || label === "\u232B" ? "none" : `0 1px 0 ${c.keyShadow}`,
-        textTransform: label.length === 1 ? "uppercase" : "none"
-      },
-      children: label
-    },
-    label
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        flex: "0 0 auto",
-        background: c.keyboardBg,
-        padding: "6px 3px 4px",
-        display: "flex",
-        flexDirection: "column",
-        gap: 7
-      },
-      children: [
-        KEY_ROWS.map((row, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: 5,
-              padding: i === 1 ? "0 18px" : "0 3px"
-            },
-            children: row.map((k) => key(k, k === "\u21E7" || k === "\u232B"))
-          },
-          i
-        )),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 5, padding: "0 3px" }, children: [
-          key("123", true),
-          key("space", false),
-          key("return", true)
-        ] })
-      ]
-    }
-  );
-};
-var Frame3 = ({
-  theme,
-  options,
-  children
-}) => {
-  const c = IMESSAGE_COLORS[theme];
-  const contact = typeof options?.contact === "string" ? options.contact : "Messages";
-  const showKeyboard = options?.keyboard !== false;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        fontFamily: IMESSAGE_FONT_STACK,
-        background: c.bg,
-        color: c.text,
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        width: "100%",
-        WebkitFontSmoothing: "antialiased"
-      },
-      children: [
-        /* @__PURE__ */ jsx(StatusBar, { theme }),
-        /* @__PURE__ */ jsx(NavBar, { theme, title: contact }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flex: "1 1 auto",
-              minHeight: 0,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "flex-end",
-              overflow: "hidden",
-              paddingBottom: 4
-            },
-            children
-          }
-        ),
-        showKeyboard ? /* @__PURE__ */ jsx(Keyboard, { theme }) : null
-      ]
-    }
-  );
-};
-var imessageComponents = {
-  Frame: Frame3,
-  Message: Message3,
-  TypingIndicator: TypingIndicator3,
-  Reaction: Reaction3,
-  Composer: Composer3,
-  SystemMessage: SystemMessage3,
-  Avatar: Avatar3
-};
-
-// src/imessage/capabilities.ts
-var imessageCapabilities = {
-  events: {
-    message: "native",
-    composerType: "native",
-    send: "native",
-    typing: "native",
-    // dot bubble
-    reaction: "native",
-    // tapbacks
-    readReceipt: "native",
-    // "Delivered" / "Read"
-    edit: "native",
-    delete: "native",
-    system: "fallback",
-    // rendered as centered grey text, not an app card
-    beat: "native"
-  },
-  content: {
-    text: true,
-    image: true
-  },
-  reactions: true,
-  threads: false,
-  readReceipts: true
-};
-
-// src/imessage/fonts.ts
-var imessageFonts = [
-  {
-    family: "Inter",
-    intended: "SF Pro",
-    weights: [400, 500, 600],
-    sources: [
-      {
-        url: "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.woff2",
-        weight: 400,
-        format: "woff2"
-      },
-      {
-        url: "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-600-normal.woff2",
-        weight: 600,
-        format: "woff2"
-      }
-    ]
-  }
-];
-
-// src/imessage/index.ts
-var imessageOptionsSchema = z.object({
-  /** Contact name shown in the nav bar. */
-  contact: z.string().optional(),
-  /** Show the on-screen keyboard (default true). */
-  keyboard: z.boolean().optional()
-});
-var imessage = defineSkin({
-  id: "imessage",
-  meta: {
-    name: "iMessage (iOS)",
-    defaultCanvas: { width: 390, height: 844 },
-    supportsThemes: ["light", "dark"],
-    capabilities: imessageCapabilities,
-    optionsSchema: imessageOptionsSchema,
-    fonts: imessageFonts
-  },
-  components: imessageComponents,
-  tokens: imessageTokens
-});
-
-// src/whatsapp/tokens.ts
-var WHATSAPP_COLORS = {
-  light: {
-    wallpaper: "#efeae2",
-    header: "#008069",
-    headerText: "#ffffff",
-    headerSubtle: "rgba(255,255,255,0.8)",
-    text: "#111b21",
-    subtle: "#667781",
-    selfBubble: "#d9fdd3",
-    selfText: "#111b21",
-    otherBubble: "#ffffff",
-    otherText: "#111b21",
-    bubbleTime: "#667781",
-    tick: "#53bdeb",
-    composerBar: "#f0f2f5",
-    inputBg: "#ffffff",
-    placeholder: "#8696a0",
-    accent: "#00a884",
-    reactionBg: "#ffffff"
-  },
-  dark: {
-    wallpaper: "#0b141a",
-    header: "#202c33",
-    headerText: "#e9edef",
-    headerSubtle: "#8696a0",
-    text: "#e9edef",
-    subtle: "#8696a0",
-    selfBubble: "#005c4b",
-    selfText: "#e9edef",
-    otherBubble: "#202c33",
-    otherText: "#e9edef",
-    bubbleTime: "#8696a0",
-    tick: "#53bdeb",
-    composerBar: "#202c33",
-    inputBg: "#2a3942",
-    placeholder: "#8696a0",
-    accent: "#00a884",
-    reactionBg: "#2a3942"
-  }
-};
-var WHATSAPP_FONT_STACK = '"Helvetica Neue", Helvetica, -apple-system, "Segoe UI", Roboto, Arial, sans-serif';
-var whatsappTokens = {
-  light: {
-    colors: WHATSAPP_COLORS.light
-  },
-  dark: { colors: WHATSAPP_COLORS.dark }
-};
-var RADIUS2 = 8;
-function formatTime2(atMs) {
-  const base = 9 * 3600 * 1e3;
-  const total = Math.floor((base + atMs) / 1e3);
-  const h = Math.floor(total / 3600) % 24;
-  const m = Math.floor(total % 3600 / 60);
-  const ampm = h >= 12 ? "PM" : "AM";
-  const hr = h % 12 === 0 ? 12 : h % 12;
-  return `${hr}:${String(m).padStart(2, "0")} ${ampm}`;
-}
-function initials3(name) {
-  return name.split(/\s+/).map((w) => w.charAt(0)).slice(0, 2).join("").toUpperCase();
-}
-var Avatar4 = ({ participant, size = 40 }) => {
-  if (participant.avatar) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: participant.avatar,
-        alt: participant.name,
-        width: size,
-        height: size,
-        style: {
-          width: size,
-          height: size,
-          borderRadius: "50%",
-          objectFit: "cover"
-        }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        background: participant.color ?? "#6a7175",
-        color: "#fff",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: size * 0.4,
-        fontWeight: 500
-      },
-      children: initials3(participant.name)
-    }
-  );
-};
-var DoubleTick = ({ color }) => /* @__PURE__ */ jsx("span", { style: { color, fontSize: 13, letterSpacing: -3, marginLeft: 3 }, children: "\u2713\u2713" });
-var Reaction4 = ({ theme, reaction }) => {
-  const c = WHATSAPP_COLORS[theme];
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      style: {
-        ...popIn(reaction.progress),
-        display: "inline-flex",
-        alignItems: "center",
-        background: c.reactionBg,
-        borderRadius: 12,
-        padding: "1px 5px",
-        fontSize: 12,
-        boxShadow: `0 1px 2px rgba(0,0,0,${theme === "dark" ? 0.4 : 0.18})`
-      },
-      children: reaction.emoji
-    }
-  );
-};
-var Message4 = ({ theme, message }) => {
-  const c = WHATSAPP_COLORS[theme];
-  const self = message.isSelf;
-  const bubble = {
-    position: "relative",
-    maxWidth: "78%",
-    padding: "6px 8px 5px 9px",
-    borderRadius: RADIUS2,
-    background: self ? c.selfBubble : c.otherBubble,
-    color: self ? c.selfText : c.otherText,
-    fontSize: 14.2,
-    lineHeight: 1.32,
-    wordBreak: "break-word",
-    boxShadow: `0 1px 0.5px rgba(0,0,0,${theme === "dark" ? 0.2 : 0.13})`,
-    ...self ? { borderTopRightRadius: 0 } : { borderTopLeftRadius: 0 }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        justifyContent: self ? "flex-end" : "flex-start",
-        padding: message.isGrouped ? "1px 12px" : "3px 12px",
-        ...fadeSlideIn(message.revealProgress, { distance: 5 })
-      },
-      children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-        /* @__PURE__ */ jsxs("div", { style: bubble, children: [
-          /* @__PURE__ */ jsx(
-            MessageContent,
-            {
-              nodes: message.content,
-              imageStyle: { borderRadius: 6, maxWidth: 240, marginBottom: 2 }
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              style: {
-                float: "right",
-                marginLeft: 8,
-                marginTop: 2,
-                fontSize: 11,
-                color: c.bubbleTime,
-                display: "inline-flex",
-                alignItems: "center",
-                whiteSpace: "nowrap"
-              },
-              children: [
-                formatTime2(message.atMs),
-                self ? /* @__PURE__ */ jsx(DoubleTick, { color: c.tick }) : null
-              ]
-            }
-          )
-        ] }),
-        message.reactions.length > 0 ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: -10,
-              ...self ? { right: 8 } : { left: 8 },
-              display: "flex",
-              gap: 2
-            },
-            children: message.reactions.map((r, i) => /* @__PURE__ */ jsx(Reaction4, { theme, reaction: r }, i))
-          }
-        ) : null
-      ] })
-    }
-  );
-};
-var TypingIndicator4 = ({ theme, typing }) => {
-  const c = WHATSAPP_COLORS[theme];
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        justifyContent: "flex-start",
-        padding: "3px 12px"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            background: c.otherBubble,
-            borderRadius: RADIUS2,
-            borderTopLeftRadius: 0,
-            padding: "9px 12px",
-            boxShadow: `0 1px 0.5px rgba(0,0,0,${theme === "dark" ? 0.2 : 0.13})`
-          },
-          children: /* @__PURE__ */ jsx(
-            TypingDots,
-            {
-              progress: typing.progress,
-              color: c.subtle,
-              size: 7,
-              gap: 4
-            }
-          )
-        }
-      )
-    }
-  );
-};
-var SystemMessage4 = ({ theme, message }) => {
-  const c = WHATSAPP_COLORS[theme];
-  const text = message.content.map(
-    (n) => n.type === "text" ? n.spans.map((s) => s.value ?? "").join("") : ""
-  ).join(" ");
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        justifyContent: "center",
-        padding: "6px 0",
-        ...fadeSlideIn(message.revealProgress, { distance: 0 })
-      },
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          style: {
-            background: theme === "dark" ? "#182229" : "#ffffff",
-            color: c.subtle,
-            fontSize: 12.5,
-            padding: "5px 12px",
-            borderRadius: 8,
-            boxShadow: `0 1px 0.5px rgba(0,0,0,0.13)`
-          },
-          children: text
-        }
-      )
-    }
-  );
-};
-var Composer4 = ({ theme, composer }) => {
-  const c = WHATSAPP_COLORS[theme];
-  const hasText = composer.text.length > 0;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        flex: "0 0 auto",
-        display: "flex",
-        alignItems: "flex-end",
-        gap: 8,
-        padding: "8px 10px",
-        background: c.composerBar
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              flex: 1,
-              minHeight: 40,
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              background: c.inputBg,
-              borderRadius: 22,
-              padding: "8px 14px",
-              color: c.text,
-              fontSize: 15
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { style: { color: c.subtle, fontSize: 18 }, children: "\u{1F642}" }),
-              hasText ? /* @__PURE__ */ jsxs("span", { children: [
-                composer.text,
-                /* @__PURE__ */ jsx("span", { style: { color: c.accent }, children: "|" })
-              ] }) : /* @__PURE__ */ jsx("span", { style: { color: c.placeholder }, children: "Message" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              width: 40,
-              height: 40,
-              borderRadius: "50%",
-              background: c.accent,
-              color: "#fff",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: 18
-            },
-            children: hasText ? "\u27A4" : "\u{1F3A4}"
-          }
-        )
-      ]
-    }
-  );
-};
-var Frame4 = ({
-  theme,
-  options,
-  children
-}) => {
-  const c = WHATSAPP_COLORS[theme];
-  const contact = typeof options?.contact === "string" ? options.contact : "WhatsApp";
-  const status = typeof options?.status === "string" ? options.status : "online";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        fontFamily: WHATSAPP_FONT_STACK,
-        background: c.wallpaper,
-        color: c.text,
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        width: "100%",
-        WebkitFontSmoothing: "antialiased"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              flex: "0 0 auto",
-              display: "flex",
-              alignItems: "center",
-              gap: 10,
-              padding: "8px 12px",
-              background: c.header,
-              color: c.headerText
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { style: { fontSize: 22, marginRight: -2 }, children: "\u2039" }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    width: 38,
-                    height: 38,
-                    borderRadius: "50%",
-                    background: "#6a7175",
-                    color: "#fff",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    fontSize: 15,
-                    fontWeight: 500
-                  },
-                  children: initials3(contact)
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: { display: "flex", flexDirection: "column", lineHeight: 1.2 },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { style: { fontSize: 16, fontWeight: 600 }, children: contact }),
-                    /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: c.headerSubtle }, children: status })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flex: "1 1 auto",
-              minHeight: 0,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "flex-end",
-              overflow: "hidden",
-              padding: "6px 0"
-            },
-            children
-          }
-        )
-      ]
-    }
-  );
-};
-var whatsappComponents = {
-  Frame: Frame4,
-  Message: Message4,
-  TypingIndicator: TypingIndicator4,
-  Reaction: Reaction4,
-  Composer: Composer4,
-  SystemMessage: SystemMessage4,
-  Avatar: Avatar4
-};
-
-// src/whatsapp/capabilities.ts
-var whatsappCapabilities = {
-  events: {
-    message: "native",
-    composerType: "native",
-    send: "native",
-    typing: "native",
-    reaction: "native",
-    readReceipt: "native",
-    // double ticks
-    edit: "native",
-    delete: "native",
-    system: "fallback",
-    // centred system pill
-    beat: "native"
-  },
-  content: {
-    text: true,
-    image: true
-  },
-  reactions: true,
-  threads: false,
-  readReceipts: true
-};
-
-// src/whatsapp/index.ts
-var whatsappOptionsSchema = z.object({
-  /** Contact / group name in the header. */
-  contact: z.string().optional(),
-  /** Header subtitle (e.g. `"online"`, `"last seen recently"`). */
-  status: z.string().optional()
-});
-var whatsapp = defineSkin({
-  id: "whatsapp",
-  meta: {
-    name: "WhatsApp",
-    defaultCanvas: { width: 390, height: 760 },
-    supportsThemes: ["light", "dark"],
-    capabilities: whatsappCapabilities,
-    optionsSchema: whatsappOptionsSchema
-  },
-  components: whatsappComponents,
-  tokens: whatsappTokens
-});
-
-// src/cursor/tokens.ts
-var CURSOR_COLORS = {
-  dark: {
-    bg: "#1a1a1a",
-    header: "#1a1a1a",
-    border: "#2d2d2d",
-    text: "#d4d4d4",
-    dim: "#858585",
-    userBg: "#262626",
-    userBorder: "#333333",
-    codeBg: "#2a2a2a",
-    codeText: "#ce9178",
-    accent: "#4d9fff",
-    composerBg: "#202020",
-    composerBorder: "#3a3a3a",
-    placeholder: "#6e6e6e",
-    chipBg: "#2a2a2a",
-    link: "#4d9fff"
-  },
-  light: {
-    bg: "#ffffff",
-    header: "#ffffff",
-    border: "#e8e8e8",
-    text: "#1e1e1e",
-    dim: "#6e6e6e",
-    userBg: "#f4f4f4",
-    userBorder: "#e8e8e8",
-    codeBg: "#f0f0f0",
-    codeText: "#a31515",
-    accent: "#0a72ff",
-    composerBg: "#f9f9f9",
-    composerBorder: "#e2e2e2",
-    placeholder: "#9a9a9a",
-    chipBg: "#f0f0f0",
-    link: "#0a72ff"
-  }
-};
-var CURSOR_FONT_STACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif';
-var cursorTokens = {
-  light: { colors: CURSOR_COLORS.light },
-  dark: { colors: CURSOR_COLORS.dark }
-};
-function markStyles3(c) {
-  return {
-    link: { color: c.link, textDecoration: "none" },
-    code: {
-      fontFamily: "Menlo, Monaco, monospace",
-      fontSize: "0.86em",
-      background: c.codeBg,
-      color: c.codeText,
-      borderRadius: 4,
-      padding: "1px 4px"
-    }
-  };
-}
-var Avatar5 = () => null;
-var Reaction5 = () => null;
-var Message5 = ({ theme, message }) => {
-  const c = CURSOR_COLORS[theme];
-  const self = message.isSelf;
-  if (self) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: { padding: "5px 12px", ...fadeSlideIn(message.revealProgress) },
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              background: c.userBg,
-              border: `1px solid ${c.userBorder}`,
-              borderRadius: 8,
-              padding: "8px 11px",
-              color: c.text,
-              fontSize: 13,
-              lineHeight: 1.5
-            },
-            children: /* @__PURE__ */ jsx(MessageContent, { nodes: message.content, styles: markStyles3(c) })
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        padding: "5px 12px 9px",
-        color: c.text,
-        fontSize: 13,
-        lineHeight: 1.6,
-        ...fadeSlideIn(message.revealProgress)
-      },
-      children: /* @__PURE__ */ jsx(MessageContent, { nodes: message.content, styles: markStyles3(c) })
-    }
-  );
-};
-var SystemMessage5 = ({ theme, message }) => {
-  const c = CURSOR_COLORS[theme];
-  const text = message.content.map(
-    (n) => n.type === "text" ? n.spans.map((s) => s.value ?? "").join("") : ""
-  ).join(" ");
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        margin: "4px 12px",
-        padding: "6px 10px",
-        borderLeft: `2px solid ${c.accent}`,
-        background: c.userBg,
-        borderRadius: 4,
-        color: c.dim,
-        fontSize: 12,
-        fontFamily: "Menlo, monospace",
-        ...fadeSlideIn(message.revealProgress, { distance: 0 })
-      },
-      children: text
-    }
-  );
-};
-var TypingIndicator5 = ({ theme, typing }) => {
-  const c = CURSOR_COLORS[theme];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 7,
-        padding: "5px 12px",
-        color: c.dim,
-        fontSize: 12.5
-      },
-      children: [
-        /* @__PURE__ */ jsx(TypingDots, { progress: typing.progress, color: c.accent, size: 5 }),
-        "Generating\u2026"
-      ]
-    }
-  );
-};
-var Composer5 = ({ theme, composer }) => {
-  const c = CURSOR_COLORS[theme];
-  const hasText = composer.text.length > 0;
-  const chip = {
-    fontSize: 11,
-    color: c.dim,
-    background: c.chipBg,
-    borderRadius: 5,
-    padding: "2px 7px"
-  };
-  return /* @__PURE__ */ jsx("div", { style: { flex: "0 0 auto", padding: "8px 12px 12px" }, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        border: `1px solid ${c.composerBorder}`,
-        borderRadius: 10,
-        background: c.composerBg,
-        padding: "9px 11px",
-        color: c.text,
-        fontSize: 13
-      },
-      children: [
-        /* @__PURE__ */ jsx("div", { style: { minHeight: 18 }, children: hasText ? /* @__PURE__ */ jsxs("span", { children: [
-          composer.text,
-          /* @__PURE__ */ jsx("span", { style: { color: c.accent }, children: "\u258D" })
-        ] }) : /* @__PURE__ */ jsx("span", { style: { color: c.placeholder }, children: "Plan, search, build anything" }) }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              marginTop: 9
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6 }, children: [
-                /* @__PURE__ */ jsx("span", { style: chip, children: "\u221E Agent" }),
-                /* @__PURE__ */ jsx("span", { style: chip, children: "claude-4.5-sonnet" })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    width: 22,
-                    height: 22,
-                    borderRadius: 6,
-                    background: hasText ? c.accent : c.chipBg,
-                    color: hasText ? "#fff" : c.dim,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    fontSize: 13
-                  },
-                  children: "\u2191"
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  ) });
-};
-var Frame5 = ({
-  theme,
-  options,
-  children
-}) => {
-  const c = CURSOR_COLORS[theme];
-  const title = typeof options?.title === "string" ? options.title : "Chat";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        fontFamily: CURSOR_FONT_STACK,
-        background: c.bg,
-        color: c.text,
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        width: "100%",
-        WebkitFontSmoothing: "antialiased"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              flex: "0 0 auto",
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              padding: "8px 12px",
-              borderBottom: `1px solid ${c.border}`,
-              fontSize: 12,
-              color: c.dim
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: c.text }, children: title }),
-              /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto", fontSize: 14 }, children: "\uFF0B" }),
-              /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: "\u22EF" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flex: "1 1 auto",
-              minHeight: 0,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "flex-end",
-              overflow: "hidden",
-              padding: "6px 0"
-            },
-            children
-          }
-        )
-      ]
-    }
-  );
-};
-var cursorComponents = {
-  Frame: Frame5,
-  Message: Message5,
-  TypingIndicator: TypingIndicator5,
-  Reaction: Reaction5,
-  Composer: Composer5,
-  SystemMessage: SystemMessage5,
-  Avatar: Avatar5
-};
-
-// src/cursor/index.ts
-var cursorCapabilities = {
-  events: {
-    message: "native",
-    composerType: "native",
-    send: "native",
-    typing: "native",
-    system: "native",
-    reaction: "unsupported",
-    readReceipt: "unsupported",
-    edit: "native",
-    delete: "native",
-    beat: "native"
-  },
-  content: { text: true, image: true },
-  reactions: false,
-  threads: false,
-  readReceipts: false
-};
-var cursorOptionsSchema = z.object({
-  title: z.string().optional()
-});
-var cursor = defineSkin({
-  id: "cursor",
-  meta: {
-    name: "Cursor panel",
-    defaultCanvas: { width: 400, height: 600 },
-    supportsThemes: ["dark", "light"],
-    capabilities: cursorCapabilities,
-    optionsSchema: cursorOptionsSchema
-  },
-  components: cursorComponents,
-  tokens: cursorTokens
-});
-var CHROME = {
-  light: {
-    window: "#ffffff",
-    sidebar: "#f5f5f7",
-    sidebarBorder: "#e0e0e2",
-    titleBar: "#ececee",
-    text: "#1d1d1f",
-    subtle: "#86868b",
-    activeRow: "#0b93f6",
-    activeText: "#ffffff",
-    searchBg: "#e4e4e6"
-  },
-  dark: {
-    window: "#1e1e1e",
-    sidebar: "#28282a",
-    sidebarBorder: "#3a3a3c",
-    titleBar: "#323234",
-    text: "#f5f5f7",
-    subtle: "#98989d",
-    activeRow: "#0b6cff",
-    activeText: "#ffffff",
-    searchBg: "#3a3a3c"
-  }
-};
-var TRAFFIC = ["#ff5f56", "#ffbd2e", "#27c93f"];
-function initials4(name) {
-  return name.split(/\s+/).map((w) => w.charAt(0)).slice(0, 2).join("").toUpperCase();
-}
-var SAMPLE_CONVOS = [
-  { name: "Sam Carter", preview: "you're the best, omw \u{1F3C3}", time: "9:41 AM" },
-  { name: "Mum", preview: "call me when you can \u2764\uFE0F", time: "Yesterday" },
-  { name: "Design", preview: "Tap to load preview", time: "Tuesday" },
-  { name: "Alex Rivera", preview: "ship it \u{1F680}", time: "Monday" }
-];
-var SidebarRow = ({ theme, name, preview, time, active }) => {
-  const ch = CHROME[theme];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        gap: 10,
-        padding: "8px 10px",
-        borderRadius: 8,
-        background: active ? ch.activeRow : "transparent",
-        color: active ? ch.activeText : ch.text
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: 40,
-              height: 40,
-              borderRadius: "50%",
-              background: active ? "rgba(255,255,255,0.25)" : "#a9a9af",
-              color: "#fff",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: 15,
-              flex: "0 0 40px"
-            },
-            children: initials4(name)
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-            /* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 600 }, children: name }),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  fontSize: 11,
-                  color: active ? "rgba(255,255,255,0.8)" : ch.subtle
-                },
-                children: time
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                fontSize: 13,
-                color: active ? "rgba(255,255,255,0.85)" : ch.subtle,
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis"
-              },
-              children: preview
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-var Frame6 = ({
-  theme,
-  options,
-  children
-}) => {
-  const ch = CHROME[theme];
-  const contact = typeof options?.contact === "string" ? options.contact : "Messages";
-  const convos = [
-    { name: contact, preview: "active now", time: "now" },
-    ...SAMPLE_CONVOS.filter((c) => c.name !== contact)
-  ];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        fontFamily: IMESSAGE_FONT_STACK,
-        background: ch.window,
-        color: ch.text,
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        width: "100%",
-        WebkitFontSmoothing: "antialiased"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flex: "0 0 auto",
-              height: 38,
-              background: ch.titleBar,
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              padding: "0 13px",
-              borderBottom: `1px solid ${ch.sidebarBorder}`
-            },
-            children: TRAFFIC.map((color) => /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  width: 12,
-                  height: 12,
-                  borderRadius: "50%",
-                  background: color
-                }
-              },
-              color
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { style: { flex: "1 1 auto", minHeight: 0, display: "flex" }, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                flex: "0 0 250px",
-                background: ch.sidebar,
-                borderRight: `1px solid ${ch.sidebarBorder}`,
-                display: "flex",
-                flexDirection: "column",
-                padding: "8px 8px 0"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      background: ch.searchBg,
-                      borderRadius: 7,
-                      padding: "5px 9px",
-                      color: ch.subtle,
-                      fontSize: 13,
-                      marginBottom: 6
-                    },
-                    children: "\u{1F50D} Search"
-                  }
-                ),
-                convos.slice(0, 5).map((cv, i) => /* @__PURE__ */ jsx(
-                  SidebarRow,
-                  {
-                    theme,
-                    name: cv.name,
-                    preview: cv.preview,
-                    time: cv.time,
-                    active: i === 0
-                  },
-                  cv.name
-                ))
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                flex: "1 1 auto",
-                minWidth: 0,
-                display: "flex",
-                flexDirection: "column",
-                background: ch.window
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      flex: "0 0 auto",
-                      textAlign: "center",
-                      padding: "8px 0",
-                      borderBottom: `1px solid ${ch.sidebarBorder}`,
-                      fontSize: 13,
-                      fontWeight: 600
-                    },
-                    children: contact
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      flex: "1 1 auto",
-                      minHeight: 0,
-                      display: "flex",
-                      flexDirection: "column",
-                      justifyContent: "flex-end",
-                      overflow: "hidden",
-                      paddingBottom: 4
-                    },
-                    children
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-var macosComponents = {
-  ...imessageComponents,
-  Frame: Frame6
-};
-
-// src/messages-macos/index.ts
-var macosOptionsSchema = z.object({
-  contact: z.string().optional()
-});
-var messagesMacos = defineSkin({
-  id: "messages-macos",
-  meta: {
-    name: "Messages (macOS)",
-    defaultCanvas: { width: 900, height: 600 },
-    supportsThemes: ["light", "dark"],
-    capabilities: imessageCapabilities,
-    optionsSchema: macosOptionsSchema,
-    fonts: imessageFonts
-  },
-  components: macosComponents,
-  tokens: imessageTokens
-});
-
-// src/discord/tokens.ts
-var DISCORD = {
-  bg: "#313338",
-  channelBarBorder: "#26282c",
-  text: "#dbdee1",
-  muted: "#949ba4",
-  username: "#f2f3f5",
-  timestamp: "#949ba4",
-  reactionBg: "#2b2d31",
-  reactionBorder: "#3f4147",
-  reactionText: "#dbdee1",
-  composerBg: "#383a40",
-  placeholder: "#6d7079",
-  mentionText: "#c9cdfb",
-  mentionBg: "rgba(88,101,242,0.3)",
-  codeBg: "#2b2d31",
-  codeText: "#dbdee1",
-  link: "#00a8fc",
-  hashtag: "#80848e"
-};
-var DISCORD_FONT_STACK = '"gg sans", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
-var GUTTER = 56;
-function formatTime3(atMs) {
-  const base = 9 * 3600 * 1e3;
-  const total = Math.floor((base + atMs) / 1e3);
-  const h = Math.floor(total / 3600) % 24;
-  const m = Math.floor(total % 3600 / 60);
-  const ampm = h >= 12 ? "PM" : "AM";
-  const hr = h % 12 === 0 ? 12 : h % 12;
-  return `Today at ${hr}:${String(m).padStart(2, "0")} ${ampm}`;
-}
-function initials5(name) {
-  return name.split(/\s+/).map((w) => w.charAt(0)).slice(0, 2).join("").toUpperCase();
-}
-var markStyles4 = {
-  link: { color: DISCORD.link, textDecoration: "none" },
-  mention: {
-    color: DISCORD.mentionText,
-    background: DISCORD.mentionBg,
-    borderRadius: 3,
-    padding: "0 2px",
-    fontWeight: 500
-  },
-  code: {
-    fontFamily: "Menlo, Consolas, monospace",
-    fontSize: "0.85em",
-    background: DISCORD.codeBg,
-    color: DISCORD.codeText,
-    borderRadius: 3,
-    padding: "1px 4px"
-  }
-};
-var Avatar6 = ({ participant, size = 40 }) => {
-  if (participant.avatar) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: participant.avatar,
-        alt: participant.name,
-        width: size,
-        height: size,
-        style: {
-          width: size,
-          height: size,
-          borderRadius: "50%",
-          objectFit: "cover"
-        }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        background: participant.color ?? "#5865f2",
-        color: "#fff",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: size * 0.4,
-        fontWeight: 500
-      },
-      children: initials5(participant.name)
-    }
-  );
-};
-var Reaction6 = ({ reaction }) => /* @__PURE__ */ jsxs(
-  "span",
-  {
-    style: {
-      ...popIn(reaction.progress),
-      display: "inline-flex",
-      alignItems: "center",
-      gap: 5,
-      background: DISCORD.reactionBg,
-      border: `1px solid ${DISCORD.reactionBorder}`,
-      borderRadius: 8,
-      padding: "2px 7px",
-      fontSize: 13,
-      color: DISCORD.reactionText
-    },
-    children: [
-      /* @__PURE__ */ jsx("span", { children: reaction.emoji }),
-      /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 12 }, children: reaction.count })
-    ]
-  }
-);
-var Message6 = ({ message, author }) => {
-  const roleColor = author.color ?? DISCORD.username;
-  const body = /* @__PURE__ */ jsxs("div", { style: { color: DISCORD.text, fontSize: 15, lineHeight: 1.375 }, children: [
-    /* @__PURE__ */ jsx(
-      MessageContent,
-      {
-        nodes: message.content,
-        styles: markStyles4,
-        imageStyle: { borderRadius: 8, marginTop: 4, maxWidth: 320 }
-      }
-    ),
-    message.reactions.length > 0 ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: { display: "flex", gap: 4, marginTop: 5, flexWrap: "wrap" },
-        children: message.reactions.map((r, i) => /* @__PURE__ */ jsx(Reaction6, { theme: "dark", reaction: r }, i))
-      }
-    ) : null
-  ] });
-  if (message.isGrouped) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          padding: `1px 16px 1px ${GUTTER}px`,
-          ...fadeSlideIn(message.revealProgress, { distance: 4 })
-        },
-        children: body
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        gap: 16,
-        padding: "8px 16px 2px",
-        ...fadeSlideIn(message.revealProgress, { distance: 4 })
-      },
-      children: [
-        /* @__PURE__ */ jsx(Avatar6, { theme: "dark", participant: author, size: 40 }),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 8 }, children: [
-            /* @__PURE__ */ jsx("span", { style: { color: roleColor, fontWeight: 500, fontSize: 15 }, children: author.name }),
-            /* @__PURE__ */ jsx("span", { style: { color: DISCORD.timestamp, fontSize: 12 }, children: formatTime3(message.atMs) })
-          ] }),
-          body
-        ] })
-      ]
-    }
-  );
-};
-var SystemMessage6 = ({ message }) => {
-  const text = message.content.map(
-    (n) => n.type === "text" ? n.spans.map((s) => s.value ?? "").join("") : ""
-  ).join(" ");
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        gap: 16,
-        alignItems: "center",
-        padding: "4px 16px 4px 24px",
-        color: DISCORD.muted,
-        fontSize: 14,
-        ...fadeSlideIn(message.revealProgress, { distance: 0 })
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { style: { color: "#3ba55c" }, children: "\uFF0B" }),
-        text
-      ]
-    }
-  );
-};
-var TypingIndicator6 = ({ typing, author }) => /* @__PURE__ */ jsxs(
-  "div",
-  {
-    style: {
-      display: "flex",
-      alignItems: "center",
-      gap: 8,
-      padding: "2px 16px 4px",
-      color: DISCORD.text,
-      fontSize: 13
-    },
-    children: [
-      /* @__PURE__ */ jsx(TypingDots, { progress: typing.progress, color: DISCORD.muted, size: 5 }),
-      /* @__PURE__ */ jsxs("span", { children: [
-        /* @__PURE__ */ jsx("strong", { children: author.name }),
-        " is typing\u2026"
-      ] })
-    ]
-  }
-);
-var Composer6 = ({ composer }) => {
-  const hasText = composer.text.length > 0;
-  return /* @__PURE__ */ jsx("div", { style: { flex: "0 0 auto", padding: "0 16px 18px" }, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        background: DISCORD.composerBg,
-        borderRadius: 8,
-        padding: "11px 14px",
-        color: DISCORD.text,
-        fontSize: 15,
-        display: "flex",
-        alignItems: "center",
-        gap: 12
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { style: { color: DISCORD.muted, fontSize: 20 }, children: "\uFF0B" }),
-        hasText ? /* @__PURE__ */ jsxs("span", { children: [
-          composer.text,
-          /* @__PURE__ */ jsx("span", { style: { color: DISCORD.text }, children: "|" })
-        ] }) : /* @__PURE__ */ jsx("span", { style: { color: DISCORD.placeholder }, children: "Message #general" })
-      ]
-    }
-  ) });
-};
-var Frame7 = ({
-  options,
-  children
-}) => {
-  const channel = typeof options?.channel === "string" ? options.channel : "general";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        fontFamily: DISCORD_FONT_STACK,
-        background: DISCORD.bg,
-        color: DISCORD.text,
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        width: "100%",
-        WebkitFontSmoothing: "antialiased"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              flex: "0 0 auto",
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              padding: "12px 16px",
-              borderBottom: `1px solid ${DISCORD.channelBarBorder}`,
-              boxShadow: "0 1px 0 rgba(0,0,0,0.2)"
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { style: { color: DISCORD.hashtag, fontSize: 22, fontWeight: 600 }, children: "#" }),
-              /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 16, color: "#f2f3f5" }, children: channel })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flex: "1 1 auto",
-              minHeight: 0,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "flex-end",
-              overflow: "hidden",
-              paddingBottom: 6
-            },
-            children
-          }
-        )
-      ]
-    }
-  );
-};
-var discordComponents = {
-  Frame: Frame7,
-  Message: Message6,
-  TypingIndicator: TypingIndicator6,
-  Reaction: Reaction6,
-  Composer: Composer6,
-  SystemMessage: SystemMessage6,
-  Avatar: Avatar6
-};
-
-// src/discord/index.ts
-var discordCapabilities = {
-  events: {
-    message: "native",
-    composerType: "native",
-    send: "native",
-    typing: "native",
-    reaction: "native",
-    system: "native",
-    edit: "native",
-    delete: "native",
-    readReceipt: "unsupported",
-    beat: "native"
-  },
-  content: { text: true, image: true },
-  reactions: true,
-  threads: true,
-  readReceipts: false
-};
-var discordOptionsSchema = z.object({
-  /** Channel name (rendered after the `#`). */
-  channel: z.string().optional()
-});
-var discord = defineSkin({
-  id: "discord",
-  meta: {
-    name: "Discord",
-    defaultCanvas: { width: 600, height: 480 },
-    supportsThemes: ["dark"],
-    capabilities: discordCapabilities,
-    optionsSchema: discordOptionsSchema
-  },
-  components: discordComponents
-});
+"use client";
+import { whatsapp } from './chunk-JDPMZ572.js';
+export { whatsapp } from './chunk-JDPMZ572.js';
+import { claudeCode } from './chunk-M54H2ZJJ.js';
+export { claudeCode } from './chunk-M54H2ZJJ.js';
+import { cursor } from './chunk-3WKOSJVB.js';
+export { cursor } from './chunk-3WKOSJVB.js';
+import { imessage } from './chunk-JZVM4T2A.js';
+export { imessage } from './chunk-JZVM4T2A.js';
+import { discord } from './chunk-OC7WDISK.js';
+export { discord } from './chunk-OC7WDISK.js';
+import { messagesMacos } from './chunk-CAHWYIXY.js';
+export { messagesMacos } from './chunk-CAHWYIXY.js';
+import './chunk-NCSI7C7I.js';
+import { slack } from './chunk-UFC4ODW5.js';
+export { SLACK_COLORS, slack } from './chunk-UFC4ODW5.js';
+import { telegram } from './chunk-7IC3DRCQ.js';
+export { TELEGRAM_COLORS, telegram } from './chunk-7IC3DRCQ.js';
 
 // src/registry.ts
 var builtinSkins = {
   slack,
+  telegram,
   "claude-code": claudeCode,
   imessage,
   whatsapp,
@@ -2668,6 +32,6 @@ function getSkin(id) {
   return builtinSkins[id];
 }
 
-export { SLACK_COLORS, builtinSkins, claudeCode, cursor, discord, getSkin, imessage, messagesMacos, slack, whatsapp };
+export { builtinSkins, getSkin };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map