@typecaast/skins 0.1.0

package/dist/index.js

@@ -0,0 +1,2673 @@
+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
+});
+
+// src/registry.ts
+var builtinSkins = {
+  slack,
+  "claude-code": claudeCode,
+  imessage,
+  whatsapp,
+  cursor,
+  "messages-macos": messagesMacos,
+  discord
+};
+function getSkin(id) {
+  return builtinSkins[id];
+}
+
+export { SLACK_COLORS, builtinSkins, claudeCode, cursor, discord, getSkin, imessage, messagesMacos, slack, whatsapp };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map