@typecaast/skins 0.1.0 → 0.2.0

package/dist/chunk-E5K2XXQL.cjs

@@ -0,0 +1,469 @@
+"use client";
+'use strict';
+
+var zod = require('zod');
+var skinKit = require('@typecaast/skin-kit');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/whatsapp/index.ts
+
+// 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 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();
+}
+var Avatar = ({ participant, size = 40 }) => {
+  if (participant.avatar) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: participant.avatar,
+        alt: participant.name,
+        width: size,
+        height: size,
+        style: {
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          objectFit: "cover"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.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: initials(participant.name)
+    }
+  );
+};
+var DoubleTick = ({ color }) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color, fontSize: 13, letterSpacing: -3, marginLeft: 3 }, children: "\u2713\u2713" });
+var Reaction = ({ theme, reaction }) => {
+  const c = WHATSAPP_COLORS[theme];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      style: {
+        ...skinKit.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 Message = ({ theme, message }) => {
+  const c = WHATSAPP_COLORS[theme];
+  const self = message.isSelf;
+  const bubble = {
+    position: "relative",
+    maxWidth: "78%",
+    padding: "6px 8px 5px 9px",
+    borderRadius: RADIUS,
+    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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: self ? "flex-end" : "flex-start",
+        padding: message.isGrouped ? "1px 12px" : "3px 12px",
+        ...skinKit.fadeSlideIn(message.revealProgress, { distance: 5 })
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: bubble, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            skinKit.MessageContent,
+            {
+              nodes: message.content,
+              imageStyle: { borderRadius: 6, maxWidth: 240, marginBottom: 2 }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              style: {
+                float: "right",
+                marginLeft: 8,
+                marginTop: 2,
+                fontSize: 11,
+                color: c.bubbleTime,
+                display: "inline-flex",
+                alignItems: "center",
+                whiteSpace: "nowrap"
+              },
+              children: [
+                formatTime(message.atMs),
+                self ? /* @__PURE__ */ jsxRuntime.jsx(DoubleTick, { color: c.tick }) : null
+              ]
+            }
+          )
+        ] }),
+        message.reactions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: -10,
+              ...self ? { right: 8 } : { left: 8 },
+              display: "flex",
+              gap: 2
+            },
+            children: message.reactions.map((r, i) => /* @__PURE__ */ jsxRuntime.jsx(Reaction, { theme, reaction: r }, i))
+          }
+        ) : null
+      ] })
+    }
+  );
+};
+var TypingIndicator = ({ theme, typing }) => {
+  const c = WHATSAPP_COLORS[theme];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "flex-start",
+        padding: "3px 12px"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            background: c.otherBubble,
+            borderRadius: RADIUS,
+            borderTopLeftRadius: 0,
+            padding: "9px 12px",
+            boxShadow: `0 1px 0.5px rgba(0,0,0,${theme === "dark" ? 0.2 : 0.13})`
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            skinKit.TypingDots,
+            {
+              progress: typing.progress,
+              color: c.subtle,
+              size: 7,
+              gap: 4
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var SystemMessage = ({ 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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        padding: "6px 0",
+        ...skinKit.fadeSlideIn(message.revealProgress, { distance: 0 })
+      },
+      children: /* @__PURE__ */ jsxRuntime.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 Composer = ({ theme, composer }) => {
+  const c = WHATSAPP_COLORS[theme];
+  const hasText = composer.text.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        flex: "0 0 auto",
+        display: "flex",
+        alignItems: "flex-end",
+        gap: 8,
+        padding: "8px 10px",
+        background: c.composerBar
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { style: { color: c.subtle, fontSize: 18 }, children: "\u{1F642}" }),
+              hasText ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                composer.text,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: c.accent }, children: "|" })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: c.placeholder }, children: "Message" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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 Frame = ({
+  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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              flex: "0 0 auto",
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              padding: "8px 12px",
+              background: c.header,
+              color: c.headerText
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 22, marginRight: -2 }, children: "\u2039" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    width: 38,
+                    height: 38,
+                    borderRadius: "50%",
+                    background: "#6a7175",
+                    color: "#fff",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: 15,
+                    fontWeight: 500
+                  },
+                  children: initials(contact)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: { display: "flex", flexDirection: "column", lineHeight: 1.2 },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 16, fontWeight: 600 }, children: contact }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: c.headerSubtle }, children: status })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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,
+  Message,
+  TypingIndicator,
+  Reaction,
+  Composer,
+  SystemMessage,
+  Avatar
+};
+
+// 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 = zod.z.object({
+  /** Contact / group name in the header. */
+  contact: zod.z.string().optional(),
+  /** Header subtitle (e.g. `"online"`, `"last seen recently"`). */
+  status: zod.z.string().optional()
+});
+var whatsapp = skinKit.defineSkin({
+  id: "whatsapp",
+  meta: {
+    name: "WhatsApp",
+    defaultCanvas: { width: 390, height: 760 },
+    supportsThemes: ["light", "dark"],
+    capabilities: whatsappCapabilities,
+    optionsSchema: whatsappOptionsSchema
+  },
+  components: whatsappComponents,
+  tokens: whatsappTokens
+});
+var whatsapp_default = whatsapp;
+
+exports.whatsapp = whatsapp;
+exports.whatsapp_default = whatsapp_default;
+//# sourceMappingURL=chunk-E5K2XXQL.cjs.map
+//# sourceMappingURL=chunk-E5K2XXQL.cjs.map

package/dist/chunk-E5K2XXQL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/whatsapp/tokens.ts","../src/whatsapp/components.tsx","../src/whatsapp/capabilities.ts","../src/whatsapp/index.ts"],"names":["jsx","popIn","fadeSlideIn","jsxs","MessageContent","TypingDots","z","defineSkin"],"mappings":"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","file":"chunk-E5K2XXQL.cjs","sourcesContent":["import type { ResolvedTheme } from \"@typecaast/core\";\nimport type { SkinTokens } from \"@typecaast/skin-kit\";\n\nexport interface WhatsAppColors {\n  wallpaper: string;\n  header: string;\n  headerText: string;\n  headerSubtle: string;\n  text: string;\n  subtle: string;\n  selfBubble: string;\n  selfText: string;\n  otherBubble: string;\n  otherText: string;\n  bubbleTime: string;\n  tick: string;\n  composerBar: string;\n  inputBg: string;\n  placeholder: string;\n  accent: string;\n  reactionBg: string;\n}\n\nexport const WHATSAPP_COLORS: Record<ResolvedTheme, WhatsAppColors> = {\n  light: {\n    wallpaper: \"#efeae2\",\n    header: \"#008069\",\n    headerText: \"#ffffff\",\n    headerSubtle: \"rgba(255,255,255,0.8)\",\n    text: \"#111b21\",\n    subtle: \"#667781\",\n    selfBubble: \"#d9fdd3\",\n    selfText: \"#111b21\",\n    otherBubble: \"#ffffff\",\n    otherText: \"#111b21\",\n    bubbleTime: \"#667781\",\n    tick: \"#53bdeb\",\n    composerBar: \"#f0f2f5\",\n    inputBg: \"#ffffff\",\n    placeholder: \"#8696a0\",\n    accent: \"#00a884\",\n    reactionBg: \"#ffffff\",\n  },\n  dark: {\n    wallpaper: \"#0b141a\",\n    header: \"#202c33\",\n    headerText: \"#e9edef\",\n    headerSubtle: \"#8696a0\",\n    text: \"#e9edef\",\n    subtle: \"#8696a0\",\n    selfBubble: \"#005c4b\",\n    selfText: \"#e9edef\",\n    otherBubble: \"#202c33\",\n    otherText: \"#e9edef\",\n    bubbleTime: \"#8696a0\",\n    tick: \"#53bdeb\",\n    composerBar: \"#202c33\",\n    inputBg: \"#2a3942\",\n    placeholder: \"#8696a0\",\n    accent: \"#00a884\",\n    reactionBg: \"#2a3942\",\n  },\n};\n\nexport const WHATSAPP_FONT_STACK =\n  '\"Helvetica Neue\", Helvetica, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif';\n\nexport const whatsappTokens: { light: SkinTokens; dark: SkinTokens } = {\n  light: {\n    colors: WHATSAPP_COLORS.light as unknown as Record<string, string>,\n  },\n  dark: { colors: WHATSAPP_COLORS.dark as unknown as Record<string, string> },\n};\n","import type { CSSProperties, FC, ReactNode } from \"react\";\nimport type {\n  AvatarProps,\n  ComposerProps,\n  FrameProps,\n  MessageProps,\n  ReactionProps,\n  SystemProps,\n  TypingProps,\n} from \"@typecaast/core\";\nimport {\n  fadeSlideIn,\n  MessageContent,\n  popIn,\n  TypingDots,\n} from \"@typecaast/skin-kit\";\nimport { WHATSAPP_COLORS, WHATSAPP_FONT_STACK } from \"./tokens.js\";\n\nconst RADIUS = 8;\n\nfunction formatTime(atMs: number): string {\n  const base = 9 * 3600 * 1000;\n  const total = Math.floor((base + atMs) / 1000);\n  const h = Math.floor(total / 3600) % 24;\n  const m = Math.floor((total % 3600) / 60);\n  const ampm = h >= 12 ? \"PM\" : \"AM\";\n  const hr = h % 12 === 0 ? 12 : h % 12;\n  return `${hr}:${String(m).padStart(2, \"0\")} ${ampm}`;\n}\n\nfunction initials(name: string): string {\n  return name\n    .split(/\\s+/)\n    .map((w) => w.charAt(0))\n    .slice(0, 2)\n    .join(\"\")\n    .toUpperCase();\n}\n\nconst Avatar: FC<AvatarProps> = ({ participant, size = 40 }) => {\n  if (participant.avatar) {\n    return (\n      <img\n        src={participant.avatar}\n        alt={participant.name}\n        width={size}\n        height={size}\n        style={{\n          width: size,\n          height: size,\n          borderRadius: \"50%\",\n          objectFit: \"cover\",\n        }}\n      />\n    );\n  }\n  return (\n    <div\n      style={{\n        width: size,\n        height: size,\n        borderRadius: \"50%\",\n        background: participant.color ?? \"#6a7175\",\n        color: \"#fff\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        fontSize: size * 0.4,\n        fontWeight: 500,\n      }}\n    >\n      {initials(participant.name)}\n    </div>\n  );\n};\n\nconst DoubleTick: FC<{ color: string }> = ({ color }) => (\n  <span style={{ color, fontSize: 13, letterSpacing: -3, marginLeft: 3 }}>\n    ✓✓\n  </span>\n);\n\nconst Reaction: FC<ReactionProps> = ({ theme, reaction }) => {\n  const c = WHATSAPP_COLORS[theme];\n  return (\n    <span\n      style={{\n        ...popIn(reaction.progress),\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        background: c.reactionBg,\n        borderRadius: 12,\n        padding: \"1px 5px\",\n        fontSize: 12,\n        boxShadow: `0 1px 2px rgba(0,0,0,${theme === \"dark\" ? 0.4 : 0.18})`,\n      }}\n    >\n      {reaction.emoji}\n    </span>\n  );\n};\n\nconst Message: FC<MessageProps> = ({ theme, message }) => {\n  const c = WHATSAPP_COLORS[theme];\n  const self = message.isSelf;\n  const bubble: CSSProperties = {\n    position: \"relative\",\n    maxWidth: \"78%\",\n    padding: \"6px 8px 5px 9px\",\n    borderRadius: RADIUS,\n    background: self ? c.selfBubble : c.otherBubble,\n    color: self ? c.selfText : c.otherText,\n    fontSize: 14.2,\n    lineHeight: 1.32,\n    wordBreak: \"break-word\",\n    boxShadow: `0 1px 0.5px rgba(0,0,0,${theme === \"dark\" ? 0.2 : 0.13})`,\n    ...(self ? { borderTopRightRadius: 0 } : { borderTopLeftRadius: 0 }),\n  };\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: self ? \"flex-end\" : \"flex-start\",\n        padding: message.isGrouped ? \"1px 12px\" : \"3px 12px\",\n        ...fadeSlideIn(message.revealProgress, { distance: 5 }),\n      }}\n    >\n      <div style={{ position: \"relative\" }}>\n        <div style={bubble}>\n          <MessageContent\n            nodes={message.content}\n            imageStyle={{ borderRadius: 6, maxWidth: 240, marginBottom: 2 }}\n          />\n          <span\n            style={{\n              float: \"right\",\n              marginLeft: 8,\n              marginTop: 2,\n              fontSize: 11,\n              color: c.bubbleTime,\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              whiteSpace: \"nowrap\",\n            }}\n          >\n            {formatTime(message.atMs)}\n            {self ? <DoubleTick color={c.tick} /> : null}\n          </span>\n        </div>\n        {message.reactions.length > 0 ? (\n          <div\n            style={{\n              position: \"absolute\",\n              bottom: -10,\n              ...(self ? { right: 8 } : { left: 8 }),\n              display: \"flex\",\n              gap: 2,\n            }}\n          >\n            {message.reactions.map((r, i) => (\n              <Reaction key={i} theme={theme} reaction={r} />\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nconst TypingIndicator: FC<TypingProps> = ({ theme, typing }) => {\n  const c = WHATSAPP_COLORS[theme];\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"flex-start\",\n        padding: \"3px 12px\",\n      }}\n    >\n      <div\n        style={{\n          background: c.otherBubble,\n          borderRadius: RADIUS,\n          borderTopLeftRadius: 0,\n          padding: \"9px 12px\",\n          boxShadow: `0 1px 0.5px rgba(0,0,0,${theme === \"dark\" ? 0.2 : 0.13})`,\n        }}\n      >\n        <TypingDots\n          progress={typing.progress}\n          color={c.subtle}\n          size={7}\n          gap={4}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst SystemMessage: FC<SystemProps> = ({ theme, message }) => {\n  const c = WHATSAPP_COLORS[theme];\n  const text = message.content\n    .map((n) =>\n      n.type === \"text\"\n        ? (n as { spans: { value?: string }[] }).spans\n            .map((s) => s.value ?? \"\")\n            .join(\"\")\n        : \"\",\n    )\n    .join(\" \");\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        padding: \"6px 0\",\n        ...fadeSlideIn(message.revealProgress, { distance: 0 }),\n      }}\n    >\n      <span\n        style={{\n          background: theme === \"dark\" ? \"#182229\" : \"#ffffff\",\n          color: c.subtle,\n          fontSize: 12.5,\n          padding: \"5px 12px\",\n          borderRadius: 8,\n          boxShadow: `0 1px 0.5px rgba(0,0,0,0.13)`,\n        }}\n      >\n        {text}\n      </span>\n    </div>\n  );\n};\n\nconst Composer: FC<ComposerProps> = ({ theme, composer }) => {\n  const c = WHATSAPP_COLORS[theme];\n  const hasText = composer.text.length > 0;\n  return (\n    <div\n      style={{\n        flex: \"0 0 auto\",\n        display: \"flex\",\n        alignItems: \"flex-end\",\n        gap: 8,\n        padding: \"8px 10px\",\n        background: c.composerBar,\n      }}\n    >\n      <div\n        style={{\n          flex: 1,\n          minHeight: 40,\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 8,\n          background: c.inputBg,\n          borderRadius: 22,\n          padding: \"8px 14px\",\n          color: c.text,\n          fontSize: 15,\n        }}\n      >\n        <span style={{ color: c.subtle, fontSize: 18 }}>🙂</span>\n        {hasText ? (\n          <span>\n            {composer.text}\n            <span style={{ color: c.accent }}>|</span>\n          </span>\n        ) : (\n          <span style={{ color: c.placeholder }}>Message</span>\n        )}\n      </div>\n      <span\n        style={{\n          width: 40,\n          height: 40,\n          borderRadius: \"50%\",\n          background: c.accent,\n          color: \"#fff\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          fontSize: 18,\n        }}\n      >\n        {hasText ? \"➤\" : \"🎤\"}\n      </span>\n    </div>\n  );\n};\n\nconst Frame: FC<FrameProps & { children?: ReactNode }> = ({\n  theme,\n  options,\n  children,\n}) => {\n  const c = WHATSAPP_COLORS[theme];\n  const contact =\n    typeof options?.contact === \"string\" ? options.contact : \"WhatsApp\";\n  const status =\n    typeof options?.status === \"string\" ? options.status : \"online\";\n  return (\n    <div\n      style={{\n        fontFamily: WHATSAPP_FONT_STACK,\n        background: c.wallpaper,\n        color: c.text,\n        display: \"flex\",\n        flexDirection: \"column\",\n        height: \"100%\",\n        width: \"100%\",\n        WebkitFontSmoothing: \"antialiased\",\n      }}\n    >\n      <div\n        style={{\n          flex: \"0 0 auto\",\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 10,\n          padding: \"8px 12px\",\n          background: c.header,\n          color: c.headerText,\n        }}\n      >\n        <span style={{ fontSize: 22, marginRight: -2 }}>‹</span>\n        <div\n          style={{\n            width: 38,\n            height: 38,\n            borderRadius: \"50%\",\n            background: \"#6a7175\",\n            color: \"#fff\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            fontSize: 15,\n            fontWeight: 500,\n          }}\n        >\n          {initials(contact)}\n        </div>\n        <div\n          style={{ display: \"flex\", flexDirection: \"column\", lineHeight: 1.2 }}\n        >\n          <span style={{ fontSize: 16, fontWeight: 600 }}>{contact}</span>\n          <span style={{ fontSize: 12, color: c.headerSubtle }}>{status}</span>\n        </div>\n      </div>\n      <div\n        style={{\n          flex: \"1 1 auto\",\n          minHeight: 0,\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"flex-end\",\n          overflow: \"hidden\",\n          padding: \"6px 0\",\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport const whatsappComponents = {\n  Frame,\n  Message,\n  TypingIndicator,\n  Reaction,\n  Composer,\n  SystemMessage,\n  Avatar,\n};\n","import type { Capabilities } from \"@typecaast/skin-kit\";\n\n/** WhatsApp: bubbles + emoji reactions + double-tick receipts; no app cards. */\nexport const whatsappCapabilities: Capabilities = {\n  events: {\n    message: \"native\",\n    composerType: \"native\",\n    send: \"native\",\n    typing: \"native\",\n    reaction: \"native\",\n    readReceipt: \"native\", // double ticks\n    edit: \"native\",\n    delete: \"native\",\n    system: \"fallback\", // centred system pill\n    beat: \"native\",\n  },\n  content: {\n    text: true,\n    image: true,\n  },\n  reactions: true,\n  threads: false,\n  readReceipts: true,\n};\n","import { z } from \"zod\";\nimport { defineSkin } from \"@typecaast/skin-kit\";\nimport { whatsappComponents } from \"./components.js\";\nimport { whatsappCapabilities } from \"./capabilities.js\";\nimport { whatsappTokens } from \"./tokens.js\";\n\nconst whatsappOptionsSchema = z.object({\n  /** Contact / group name in the header. */\n  contact: z.string().optional(),\n  /** Header subtitle (e.g. `\"online\"`, `\"last seen recently\"`). */\n  status: z.string().optional(),\n});\n\n/** A WhatsApp-style skin (light + dark): green accent, double-tick receipts. */\nexport const whatsapp = defineSkin({\n  id: \"whatsapp\",\n  meta: {\n    name: \"WhatsApp\",\n    defaultCanvas: { width: 390, height: 760 },\n    supportsThemes: [\"light\", \"dark\"],\n    capabilities: whatsappCapabilities,\n    optionsSchema: whatsappOptionsSchema,\n  },\n  components: whatsappComponents,\n  tokens: whatsappTokens,\n});\n\n/** Default export so `@typecaast/skins/whatsapp` can be lazy-imported uniformly. */\nexport default whatsapp;\n"]}