@typecaast/skins 0.1.0 → 0.2.0

package/dist/chunk-7IC3DRCQ.js

@@ -0,0 +1,718 @@
+"use client";
+import { z } from 'zod';
+import { defineSkin, MessageContent, fadeSlideIn, popIn } from '@typecaast/skin-kit';
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/telegram/index.ts
+
+// src/telegram/tokens.ts
+var TELEGRAM_COLORS = {
+  light: {
+    bg: "#d5e3f0",
+    headerBg: "#ffffff",
+    headerText: "#000000",
+    headerSubtle: "#3390ec",
+    subtle: "#a1aab3",
+    link: "#3390ec",
+    mentionText: "#3390ec",
+    nameColor: "#3390ec",
+    incomingBg: "#ffffff",
+    incomingText: "#000000",
+    incomingMeta: "#a1aab3",
+    outgoingBg: "#effdde",
+    outgoingText: "#000000",
+    outgoingMeta: "#5fb15a",
+    tick: "#5fb15a",
+    reactionBg: "#e8f3ff",
+    reactionText: "#3390ec",
+    composerBg: "#ffffff",
+    composerFieldBg: "#ffffff",
+    composerBorder: "#e3e8ec",
+    placeholder: "#a1aab3",
+    accent: "#3390ec",
+    accentText: "#ffffff",
+    buttonBg: "rgba(51,144,236,0.10)",
+    buttonText: "#3390ec",
+    systemBg: "rgba(0,0,0,0.26)",
+    systemText: "#ffffff",
+    shadow: "0 1px 0.5px rgba(0,0,0,0.13)"
+  },
+  dark: {
+    bg: "#0e1621",
+    headerBg: "#17212b",
+    headerText: "#ffffff",
+    headerSubtle: "#6cb7eb",
+    subtle: "#6d7f8f",
+    link: "#62bcf9",
+    mentionText: "#62bcf9",
+    nameColor: "#62bcf9",
+    incomingBg: "#182533",
+    incomingText: "#ffffff",
+    incomingMeta: "#6d7f8f",
+    outgoingBg: "#2b5278",
+    outgoingText: "#ffffff",
+    outgoingMeta: "#8badd6",
+    tick: "#72d5fd",
+    reactionBg: "#213040",
+    reactionText: "#62bcf9",
+    composerBg: "#17212b",
+    composerFieldBg: "#17212b",
+    composerBorder: "#101921",
+    placeholder: "#6d7f8f",
+    accent: "#3390ec",
+    accentText: "#ffffff",
+    buttonBg: "rgba(98,188,249,0.12)",
+    buttonText: "#62bcf9",
+    systemBg: "rgba(0,0,0,0.4)",
+    systemText: "#ffffff",
+    shadow: "0 1px 2px rgba(0,0,0,0.35)"
+  }
+};
+var telegramTokens = {
+  light: {
+    colors: TELEGRAM_COLORS.light
+  },
+  dark: { colors: TELEGRAM_COLORS.dark }
+};
+
+// src/telegram/fonts.ts
+var telegramFonts = [
+  {
+    family: "Roboto",
+    intended: "system-ui / Roboto",
+    weights: [400, 500, 700],
+    sources: [
+      {
+        url: "https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2",
+        weight: 400,
+        format: "woff2"
+      },
+      {
+        url: "https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fBBc-.woff2",
+        weight: 500,
+        format: "woff2"
+      },
+      {
+        url: "https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBBc-.woff2",
+        weight: 700,
+        format: "woff2"
+      }
+    ]
+  }
+];
+var TELEGRAM_FONT_STACK = 'Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif';
+var AVATAR_SIZE = 34;
+var BUBBLE_RADIUS = 12;
+var TAIL_RADIUS = 6;
+function joinNames(names) {
+  if (names.length <= 1) return names[0] ?? "";
+  if (names.length === 2) return `${names[0]} and ${names[1]}`;
+  return `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}`;
+}
+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, fontWeight: 500 },
+    code: {
+      fontFamily: "Menlo, Monaco, Consolas, monospace",
+      fontSize: "0.9em"
+    }
+  };
+}
+var Avatar = ({
+  theme,
+  participant,
+  size = AVATAR_SIZE
+}) => {
+  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",
+          display: "block"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": participant.name,
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        background: participant.color ?? "#3390ec",
+        color: "#ffffff",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontWeight: 600,
+        fontSize: size * 0.4
+      },
+      children: initials(participant.name)
+    }
+  );
+};
+var ReactionTooltip = ({ names }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    role: "tooltip",
+    style: {
+      position: "absolute",
+      bottom: "calc(100% + 6px)",
+      left: "50%",
+      transform: "translateX(-50%)",
+      zIndex: 20,
+      whiteSpace: "nowrap",
+      background: "rgba(0,0,0,0.82)",
+      color: "#fff",
+      borderRadius: 8,
+      padding: "5px 9px",
+      fontSize: 12,
+      boxShadow: "0 4px 14px rgba(0,0,0,0.4)",
+      pointerEvents: "none"
+    },
+    children: joinNames(names)
+  }
+);
+var Reaction = ({ theme, reaction }) => {
+  const c = TELEGRAM_COLORS[theme];
+  const [hover, setHover] = useState(false);
+  const hasReactors = reaction.byNames.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: {
+        position: "relative",
+        display: "inline-flex",
+        ...popIn(reaction.progress)
+      },
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 3,
+              background: c.reactionBg,
+              color: c.reactionText,
+              borderRadius: 12,
+              padding: "2px 8px",
+              height: 22,
+              fontSize: 12.5,
+              fontWeight: 600,
+              cursor: hasReactors ? "pointer" : "default"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: 13 }, children: reaction.emoji }),
+              /* @__PURE__ */ jsx("span", { style: { fontVariantNumeric: "tabular-nums" }, children: reaction.count })
+            ]
+          }
+        ),
+        hover && hasReactors ? /* @__PURE__ */ jsx(ReactionTooltip, { names: reaction.byNames }) : null
+      ]
+    }
+  );
+};
+var Dot = ({ c, delay }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    style: {
+      width: 5,
+      height: 5,
+      borderRadius: "50%",
+      background: c.headerSubtle,
+      display: "inline-block",
+      animation: `tc-tg-typing 1.2s ${delay}ms infinite ease-in-out`
+    }
+  }
+);
+var TypingIndicator = ({ theme, author }) => {
+  const c = TELEGRAM_COLORS[theme];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-end",
+        gap: 8,
+        padding: "2px 12px 4px"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { width: AVATAR_SIZE, flex: "0 0 auto" }, children: /* @__PURE__ */ jsx(Avatar, { theme, participant: author }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 4,
+              background: c.incomingBg,
+              borderRadius: `${BUBBLE_RADIUS}px ${BUBBLE_RADIUS}px ${BUBBLE_RADIUS}px ${TAIL_RADIUS}px`,
+              padding: "10px 12px",
+              boxShadow: c.shadow
+            },
+            children: [
+              /* @__PURE__ */ jsx("style", { children: "@keyframes tc-tg-typing{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}" }),
+              /* @__PURE__ */ jsx(Dot, { c, delay: 0 }),
+              /* @__PURE__ */ jsx(Dot, { c, delay: 160 }),
+              /* @__PURE__ */ jsx(Dot, { c, delay: 320 })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var Caret = ({ color }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    style: {
+      display: "inline-block",
+      width: 1.5,
+      height: "1.05em",
+      background: color,
+      marginLeft: 1,
+      verticalAlign: "text-bottom"
+    }
+  }
+);
+var PaperPlane = ({ color }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: color,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { d: "M2.5 12 21 3.5 17 21l-5.2-4.6L9 20l-.6-5.1L2.5 12Z" })
+  }
+);
+var Composer = ({ theme, composer }) => {
+  const c = TELEGRAM_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 12px",
+        background: c.composerBg
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              minWidth: 0,
+              border: `1px solid ${c.composerBorder}`,
+              borderRadius: 18,
+              background: c.composerFieldBg,
+              padding: "9px 14px",
+              minHeight: 20,
+              fontSize: 15,
+              color: c.incomingText,
+              boxShadow: c.shadow
+            },
+            children: hasText ? /* @__PURE__ */ jsxs("span", { children: [
+              composer.text,
+              /* @__PURE__ */ jsx(Caret, { color: c.accent })
+            ] }) : /* @__PURE__ */ jsx("span", { style: { color: c.placeholder }, children: "Message" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: "0 0 auto",
+              width: 38,
+              height: 38,
+              borderRadius: "50%",
+              background: hasText ? c.accent : "transparent",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx(PaperPlane, { color: hasText ? c.accentText : c.placeholder })
+          }
+        )
+      ]
+    }
+  );
+};
+var Meta = ({
+  c,
+  atMs,
+  outgoing
+}) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 3,
+      fontSize: 11,
+      lineHeight: 1,
+      color: outgoing ? c.outgoingMeta : c.incomingMeta,
+      float: "right",
+      marginLeft: 8,
+      marginTop: 6,
+      position: "relative",
+      top: 4
+    },
+    children: [
+      formatTime(atMs),
+      outgoing ? /* @__PURE__ */ jsx("span", { style: { color: c.tick }, children: "\u2713\u2713" }) : null
+    ]
+  }
+);
+var Message = ({ theme, message, author }) => {
+  const c = TELEGRAM_COLORS[theme];
+  const outgoing = message.isSelf;
+  const grouped = message.isGrouped;
+  const radius = outgoing ? `${BUBBLE_RADIUS}px ${BUBBLE_RADIUS}px ${grouped ? BUBBLE_RADIUS : TAIL_RADIUS}px ${BUBBLE_RADIUS}px` : `${BUBBLE_RADIUS}px ${BUBBLE_RADIUS}px ${BUBBLE_RADIUS}px ${grouped ? BUBBLE_RADIUS : TAIL_RADIUS}px`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: outgoing ? "row-reverse" : "row",
+        alignItems: "flex-end",
+        gap: 8,
+        padding: grouped ? "1px 12px" : "3px 12px 1px",
+        ...fadeSlideIn(message.revealProgress)
+      },
+      children: [
+        outgoing ? null : /* @__PURE__ */ jsx("div", { style: { width: AVATAR_SIZE, flex: "0 0 auto" }, children: grouped ? null : /* @__PURE__ */ jsx(Avatar, { theme, participant: author }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { maxWidth: "78%", display: "flex", flexDirection: "column" },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    background: outgoing ? c.outgoingBg : c.incomingBg,
+                    color: outgoing ? c.outgoingText : c.incomingText,
+                    borderRadius: radius,
+                    padding: "6px 10px 7px",
+                    boxShadow: c.shadow,
+                    wordBreak: "break-word",
+                    fontSize: 15,
+                    lineHeight: 1.35
+                  },
+                  children: [
+                    !outgoing && !grouped ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          color: author.color ?? c.nameColor,
+                          fontWeight: 600,
+                          fontSize: 13.5,
+                          marginBottom: 2
+                        },
+                        children: author.name
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx(
+                      MessageContent,
+                      {
+                        nodes: message.content,
+                        styles: markStyles(c),
+                        imageStyle: { borderRadius: 8, marginTop: 2, maxWidth: 320 }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Meta, { c, atMs: message.atMs, outgoing })
+                  ]
+                }
+              ),
+              message.reactions.length > 0 ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: 4,
+                    marginTop: 4,
+                    flexWrap: "wrap",
+                    justifyContent: outgoing ? "flex-end" : "flex-start"
+                  },
+                  children: message.reactions.map((r, i) => /* @__PURE__ */ jsx(Reaction, { theme, reaction: r }, i))
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var SystemMessage = ({ theme, message, author }) => {
+  const c = TELEGRAM_COLORS[theme];
+  const actions = message.system?.actions ?? [];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-end",
+        gap: 8,
+        padding: "3px 12px 1px",
+        ...fadeSlideIn(message.revealProgress)
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { width: AVATAR_SIZE, flex: "0 0 auto" }, children: author ? /* @__PURE__ */ jsx(Avatar, { theme, participant: author }) : null }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { maxWidth: "78%", display: "flex", flexDirection: "column" },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    background: c.incomingBg,
+                    color: c.incomingText,
+                    borderRadius: `${BUBBLE_RADIUS}px ${BUBBLE_RADIUS}px ${BUBBLE_RADIUS}px ${TAIL_RADIUS}px`,
+                    padding: "6px 10px 7px",
+                    boxShadow: c.shadow,
+                    fontSize: 15,
+                    lineHeight: 1.35
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          color: author?.color ?? c.nameColor,
+                          fontWeight: 600,
+                          fontSize: 13.5,
+                          marginBottom: 2
+                        },
+                        children: author?.name ?? "Bot"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(MessageContent, { nodes: message.content, styles: markStyles(c) }),
+                    /* @__PURE__ */ jsx(Meta, { c, atMs: message.atMs, outgoing: false })
+                  ]
+                }
+              ),
+              actions.length > 0 ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 3,
+                    marginTop: 4
+                  },
+                  children: actions.map((a, i) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        background: c.buttonBg,
+                        color: c.buttonText,
+                        borderRadius: 8,
+                        padding: "9px 12px",
+                        textAlign: "center",
+                        fontSize: 14,
+                        fontWeight: 500,
+                        cursor: "default"
+                      },
+                      children: a.label
+                    },
+                    i
+                  ))
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var Frame = ({
+  theme,
+  options,
+  children
+}) => {
+  const c = TELEGRAM_COLORS[theme];
+  const title = typeof options?.title === "string" && options.title || typeof options?.contact === "string" && options.contact || "Group chat";
+  const status = typeof options?.status === "string" && options.status ? options.status : "online";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        fontFamily: TELEGRAM_FONT_STACK,
+        background: c.bg,
+        color: c.incomingText,
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        width: "100%",
+        fontSize: 15,
+        WebkitFontSmoothing: "antialiased"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "header",
+          {
+            style: {
+              flex: "0 0 auto",
+              padding: "9px 14px",
+              background: c.headerBg,
+              borderBottom: `1px solid ${c.composerBorder}`,
+              display: "flex",
+              alignItems: "center",
+              gap: 12
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { color: c.headerSubtle, fontSize: 22, lineHeight: 1 }, children: "\u2039" }),
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontWeight: 600,
+                      fontSize: 15,
+                      color: c.headerText,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { style: { fontSize: 12.5, color: c.headerSubtle }, children: status })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: "50%",
+                    background: c.accent,
+                    color: "#fff",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontWeight: 600,
+                    fontSize: 14
+                  },
+                  children: initials(title)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: "1 1 auto",
+              minHeight: 0,
+              display: "flex",
+              flexDirection: "column",
+              paddingBottom: 6
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+var telegramComponents = {
+  Frame,
+  Message,
+  TypingIndicator,
+  Reaction,
+  Composer,
+  SystemMessage,
+  Avatar
+};
+
+// src/telegram/capabilities.ts
+var telegramCapabilities = {
+  events: {
+    message: "native",
+    reaction: "native",
+    typing: "native",
+    // "X is typing…" (rendered in-thread)
+    composerType: "native",
+    send: "native",
+    edit: "native",
+    delete: "native",
+    readReceipt: "unsupported",
+    // shown as double-ticks on the bubble, not a step
+    system: "native",
+    // bot message + inline keyboard
+    beat: "native"
+  },
+  content: {
+    text: true,
+    image: true
+  },
+  reactions: true,
+  threads: false,
+  readReceipts: false
+};
+
+// src/telegram/index.ts
+var telegramOptionsSchema = z.object({
+  /** Chat title shown in the header (e.g. `"PostHog team"`). */
+  title: z.string().optional(),
+  /** Alias for the title (matches other contact-style skins). */
+  contact: z.string().optional(),
+  /** Header subtitle, e.g. `"online"` or `"last seen recently"`. */
+  status: z.string().optional()
+});
+var telegram = defineSkin({
+  id: "telegram",
+  meta: {
+    name: "Telegram",
+    defaultCanvas: { width: 440, height: 780 },
+    supportsThemes: ["light", "dark"],
+    capabilities: telegramCapabilities,
+    optionsSchema: telegramOptionsSchema,
+    fonts: telegramFonts
+  },
+  components: telegramComponents,
+  tokens: telegramTokens
+});
+var telegram_default = telegram;
+
+export { TELEGRAM_COLORS, telegram, telegram_default };
+//# sourceMappingURL=chunk-7IC3DRCQ.js.map
+//# sourceMappingURL=chunk-7IC3DRCQ.js.map