@typecaast/skins 0.1.0 → 0.2.0

package/dist/chunk-CAHWYIXY.js

@@ -0,0 +1,272 @@
+"use client";
+import { imessageComponents, imessageTokens, imessageFonts, imessageCapabilities, IMESSAGE_FONT_STACK } from './chunk-NCSI7C7I.js';
+import { z } from 'zod';
+import { defineSkin } from '@typecaast/skin-kit';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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 initials(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: initials(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 Frame = ({
+  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
+};
+
+// 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
+});
+var messages_macos_default = messagesMacos;
+
+export { messagesMacos, messages_macos_default };
+//# sourceMappingURL=chunk-CAHWYIXY.js.map
+//# sourceMappingURL=chunk-CAHWYIXY.js.map

package/dist/chunk-CAHWYIXY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/messages-macos/components.tsx","../src/messages-macos/index.ts"],"names":[],"mappings":"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","file":"chunk-CAHWYIXY.js","sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport type { FrameProps, ResolvedTheme } from \"@typecaast/core\";\nimport { imessageComponents } from \"../imessage/components.js\";\nimport { IMESSAGE_COLORS, IMESSAGE_FONT_STACK } from \"../imessage/tokens.js\";\n\n// macOS-specific window/sidebar chrome (bubbles + composer reuse iMessage).\nconst CHROME = {\n  light: {\n    window: \"#ffffff\",\n    sidebar: \"#f5f5f7\",\n    sidebarBorder: \"#e0e0e2\",\n    titleBar: \"#ececee\",\n    text: \"#1d1d1f\",\n    subtle: \"#86868b\",\n    activeRow: \"#0b93f6\",\n    activeText: \"#ffffff\",\n    searchBg: \"#e4e4e6\",\n  },\n  dark: {\n    window: \"#1e1e1e\",\n    sidebar: \"#28282a\",\n    sidebarBorder: \"#3a3a3c\",\n    titleBar: \"#323234\",\n    text: \"#f5f5f7\",\n    subtle: \"#98989d\",\n    activeRow: \"#0b6cff\",\n    activeText: \"#ffffff\",\n    searchBg: \"#3a3a3c\",\n  },\n} as const;\n\nconst TRAFFIC = [\"#ff5f56\", \"#ffbd2e\", \"#27c93f\"];\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 SAMPLE_CONVOS = [\n  { name: \"Sam Carter\", preview: \"you're the best, omw 🏃\", time: \"9:41 AM\" },\n  { name: \"Mum\", preview: \"call me when you can ❤️\", time: \"Yesterday\" },\n  { name: \"Design\", preview: \"Tap to load preview\", time: \"Tuesday\" },\n  { name: \"Alex Rivera\", preview: \"ship it 🚀\", time: \"Monday\" },\n];\n\nconst SidebarRow: FC<{\n  theme: ResolvedTheme;\n  name: string;\n  preview: string;\n  time: string;\n  active: boolean;\n}> = ({ theme, name, preview, time, active }) => {\n  const ch = CHROME[theme];\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        gap: 10,\n        padding: \"8px 10px\",\n        borderRadius: 8,\n        background: active ? ch.activeRow : \"transparent\",\n        color: active ? ch.activeText : ch.text,\n      }}\n    >\n      <div\n        style={{\n          width: 40,\n          height: 40,\n          borderRadius: \"50%\",\n          background: active ? \"rgba(255,255,255,0.25)\" : \"#a9a9af\",\n          color: \"#fff\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          fontSize: 15,\n          flex: \"0 0 40px\",\n        }}\n      >\n        {initials(name)}\n      </div>\n      <div style={{ minWidth: 0, flex: 1 }}>\n        <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n          <span style={{ fontSize: 14, fontWeight: 600 }}>{name}</span>\n          <span\n            style={{\n              fontSize: 11,\n              color: active ? \"rgba(255,255,255,0.8)\" : ch.subtle,\n            }}\n          >\n            {time}\n          </span>\n        </div>\n        <div\n          style={{\n            fontSize: 13,\n            color: active ? \"rgba(255,255,255,0.85)\" : ch.subtle,\n            whiteSpace: \"nowrap\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n          }}\n        >\n          {preview}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst Frame: FC<FrameProps & { children?: ReactNode }> = ({\n  theme,\n  options,\n  children,\n}) => {\n  const ch = CHROME[theme];\n  const contact =\n    typeof options?.contact === \"string\" ? options.contact : \"Messages\";\n  const convos = [\n    { name: contact, preview: \"active now\", time: \"now\" },\n    ...SAMPLE_CONVOS.filter((c) => c.name !== contact),\n  ];\n  return (\n    <div\n      style={{\n        fontFamily: IMESSAGE_FONT_STACK,\n        background: ch.window,\n        color: ch.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          height: 38,\n          background: ch.titleBar,\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 8,\n          padding: \"0 13px\",\n          borderBottom: `1px solid ${ch.sidebarBorder}`,\n        }}\n      >\n        {TRAFFIC.map((color) => (\n          <span\n            key={color}\n            style={{\n              width: 12,\n              height: 12,\n              borderRadius: \"50%\",\n              background: color,\n            }}\n          />\n        ))}\n      </div>\n      <div style={{ flex: \"1 1 auto\", minHeight: 0, display: \"flex\" }}>\n        <div\n          style={{\n            flex: \"0 0 250px\",\n            background: ch.sidebar,\n            borderRight: `1px solid ${ch.sidebarBorder}`,\n            display: \"flex\",\n            flexDirection: \"column\",\n            padding: \"8px 8px 0\",\n          }}\n        >\n          <div\n            style={{\n              background: ch.searchBg,\n              borderRadius: 7,\n              padding: \"5px 9px\",\n              color: ch.subtle,\n              fontSize: 13,\n              marginBottom: 6,\n            }}\n          >\n            🔍 Search\n          </div>\n          {convos.slice(0, 5).map((cv, i) => (\n            <SidebarRow\n              key={cv.name}\n              theme={theme}\n              name={cv.name}\n              preview={cv.preview}\n              time={cv.time}\n              active={i === 0}\n            />\n          ))}\n        </div>\n        <div\n          style={{\n            flex: \"1 1 auto\",\n            minWidth: 0,\n            display: \"flex\",\n            flexDirection: \"column\",\n            background: ch.window,\n          }}\n        >\n          <div\n            style={{\n              flex: \"0 0 auto\",\n              textAlign: \"center\",\n              padding: \"8px 0\",\n              borderBottom: `1px solid ${ch.sidebarBorder}`,\n              fontSize: 13,\n              fontWeight: 600,\n            }}\n          >\n            {contact}\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              paddingBottom: 4,\n            }}\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n// Reuse iMessage bubbles, reactions, typing, composer, avatar — only the Frame\n// differs (window + sidebar + wider layout). Shared tokens (IMESSAGE_COLORS).\nexport const macosComponents = {\n  ...imessageComponents,\n  Frame,\n};\n\nexport { IMESSAGE_COLORS };\n","import { z } from \"zod\";\nimport { defineSkin } from \"@typecaast/skin-kit\";\nimport { macosComponents } from \"./components.js\";\nimport { imessageCapabilities } from \"../imessage/capabilities.js\";\nimport { imessageFonts } from \"../imessage/fonts.js\";\nimport { imessageTokens } from \"../imessage/tokens.js\";\n\nconst macosOptionsSchema = z.object({\n  contact: z.string().optional(),\n});\n\n/**\n * macOS Messages — the desktop counterpart to the iOS skin. Window chrome +\n * a conversation sidebar + a wider layout, sharing iMessage's bubbles, tokens,\n * fonts, and capabilities. Distinct skin, shared internals.\n */\nexport const messagesMacos = defineSkin({\n  id: \"messages-macos\",\n  meta: {\n    name: \"Messages (macOS)\",\n    defaultCanvas: { width: 900, height: 600 },\n    supportsThemes: [\"light\", \"dark\"],\n    capabilities: imessageCapabilities,\n    optionsSchema: macosOptionsSchema,\n    fonts: imessageFonts,\n  },\n  components: macosComponents,\n  tokens: imessageTokens,\n});\n\n/** Default export so `@typecaast/skins/messages-macos` can be lazy-imported uniformly. */\nexport default messagesMacos;\n"]}