@tomako/tools-runtime 0.1.0

package/src/features/tools/social-profile-kit/widget/profile-canvas.tsx

@@ -0,0 +1,318 @@
+"use client";
+
+import { Download, Minus, Moon, Plus, Sun } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Button } from "@tomako/ui/button";
+import type { PlatformGenerationStatus } from "../../../../lib/tools/social-profile-kit.generation";
+import type {
+    SocialPlatformProfile,
+    SocialProfileMode,
+    SocialProfilePlatform,
+    SocialProfileTheme,
+} from "../../../../lib/tools/social-profile-kit.schema";
+import { cn } from "@tomako/ui/cn";
+
+import { ContextEditor } from "./context-editor";
+import { ProfilePreview } from "./profile-preview";
+import type {
+    EditableTextField,
+    EditingProfileText,
+    ProfilePreviewDevice,
+    SelectedProfileElement,
+    SocialProfileKitCopy,
+} from "./types";
+
+function platformZoomBase(platform: SocialProfilePlatform) {
+  if (platform === "instagram" || platform === "tiktok") return 0.8;
+  if (
+    platform === "linkedin-company" ||
+    platform === "youtube" ||
+    platform === "facebook"
+  ) {
+    return 0.9;
+  }
+  return 1;
+}
+
+export function ProfileCanvas({
+  copy,
+  platform,
+  profile,
+  mode,
+  theme,
+  zoom,
+  zoomMode,
+  platformStatus,
+  selected,
+  editing,
+  onThemeChange,
+  onZoomChange,
+  onAutoZoomChange,
+  onFitZoom,
+  onSelect,
+  onUpload,
+  onRetryBanner,
+  onDownloadSelected,
+  onDownloadPlatform,
+  onReplaceColor,
+  onCopyText,
+  onStartEdit,
+  onStopEdit,
+  onTextChange,
+}: {
+  copy: SocialProfileKitCopy;
+  platform: SocialProfilePlatform;
+  profile: SocialPlatformProfile;
+  mode: SocialProfileMode;
+  theme: SocialProfileTheme;
+  zoom: number;
+  zoomMode: "auto" | "manual";
+  platformStatus: PlatformGenerationStatus;
+  selected: SelectedProfileElement | null;
+  editing: EditingProfileText;
+  onThemeChange: (theme: SocialProfileTheme) => void;
+  onZoomChange: (zoom: number) => void;
+  onAutoZoomChange: (zoom: number) => void;
+  onFitZoom: () => void;
+  onSelect: (element: SelectedProfileElement | null) => void;
+  onUpload: (file: File) => void;
+  onRetryBanner: () => void;
+  onDownloadSelected: () => void;
+  onDownloadPlatform: () => void;
+  onReplaceColor: () => void;
+  onCopyText: (field: EditableTextField, value: string) => void;
+  onStartEdit: (field: EditableTextField, device: ProfilePreviewDevice) => void;
+  onStopEdit: () => void;
+  onTextChange: (field: EditableTextField, value: string) => void;
+}) {
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const previewStackRef = useRef<HTMLDivElement>(null);
+  const desktopPreviewRef = useRef<HTMLDivElement>(null);
+  const [layoutSize, setLayoutSize] = useState({
+    canvasWidth: 0,
+    desktopWidth: 0,
+    stackWidth: 0,
+    stackHeight: 0,
+  });
+  const zoomBase = platformZoomBase(platform);
+  const displayZoom = zoom / zoomBase;
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const stack = previewStackRef.current;
+    const desktop = desktopPreviewRef.current;
+    if (!canvas || !stack || !desktop) return;
+
+    let frame = 0;
+    const measure = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        setLayoutSize({
+          canvasWidth: canvas.clientWidth,
+          desktopWidth: desktop.offsetWidth,
+          stackWidth: stack.offsetWidth,
+          stackHeight: stack.offsetHeight,
+        });
+      });
+    };
+
+    measure();
+
+    const ResizeObserverCtor = window.ResizeObserver;
+    const observer = ResizeObserverCtor ? new ResizeObserverCtor(measure) : null;
+    observer?.observe(canvas);
+    observer?.observe(stack);
+    observer?.observe(desktop);
+    window.addEventListener("resize", measure);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [platform, profile, theme, mode]);
+
+  useEffect(() => {
+    if (zoomMode !== "auto") return;
+    if (!layoutSize.canvasWidth || !layoutSize.desktopWidth) return;
+
+    const isMobile = window.matchMedia("(max-width: 767px)").matches;
+    const availableWidth = Math.max(layoutSize.canvasWidth - 32, 1);
+    const fitZoom = isMobile
+      ? Math.max(0.55 * zoomBase, Math.min(zoomBase, availableWidth / layoutSize.desktopWidth))
+      : zoomBase;
+    const nextZoom = Math.round(fitZoom * 100) / 100;
+
+    if (Math.abs(nextZoom - zoom) > 0.01) {
+      onAutoZoomChange(nextZoom);
+    }
+  }, [
+    layoutSize.canvasWidth,
+    layoutSize.desktopWidth,
+    onAutoZoomChange,
+    platform,
+    zoom,
+    zoomBase,
+    zoomMode,
+  ]);
+
+  const scaledWidth = layoutSize.stackWidth
+    ? Math.ceil(layoutSize.stackWidth * zoom)
+    : undefined;
+  const scaledHeight = layoutSize.stackHeight
+    ? Math.ceil(layoutSize.stackHeight * zoom)
+    : undefined;
+
+  return (
+    <section className="relative overflow-hidden rounded-3xl border bg-[#eef7fb] p-4 shadow-sm md:p-6">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-2 rounded-xl border bg-card/80 p-1">
+          <Button
+            type="button"
+            size="icon"
+            variant="ghost"
+            aria-label={copy.canvas.zoomOut}
+            onClick={() => onZoomChange(Math.max(0.55 * zoomBase, zoom - 0.1 * zoomBase))}
+          >
+            <Minus className="size-4" />
+          </Button>
+          <button
+            type="button"
+            className={cn(
+              "min-w-12 rounded-md px-2 text-center text-xs font-medium transition hover:bg-secondary",
+              zoomMode === "auto" ? "text-foreground" : "text-muted-foreground",
+            )}
+            aria-label={copy.canvas.fit}
+            onClick={onFitZoom}
+          >
+            {Math.round(displayZoom * 100)}%
+          </button>
+          <Button
+            type="button"
+            size="icon"
+            variant="ghost"
+            aria-label={copy.canvas.zoomIn}
+            onClick={() => onZoomChange(Math.min(1.2 * zoomBase, zoom + 0.1 * zoomBase))}
+          >
+            <Plus className="size-4" />
+          </Button>
+        </div>
+        <div className="flex flex-wrap items-center justify-end gap-2">
+          {platformStatus !== "ready" ? (
+            <div className="rounded-full border bg-card/80 px-3 py-1.5 text-xs font-medium text-muted-foreground">
+              {platformStatus === "idle"
+                ? copy.actions.generate
+                : platformStatus === "failed"
+                  ? copy.status.failed
+                  : copy.actions.generating}
+            </div>
+          ) : null}
+          <div className="flex items-center gap-1 rounded-md border bg-card/80 p-0.5">
+            <Button
+              type="button"
+              size="sm"
+              variant={theme === "light" ? "default" : "ghost"}
+              className="h-8 rounded-[5px] px-3 text-xs"
+              onClick={() => onThemeChange("light")}
+            >
+              <Sun className="size-4" />
+              {copy.canvas.light}
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              variant={theme === "dark" ? "default" : "ghost"}
+              className="h-8 rounded-[5px] px-3 text-xs"
+              onClick={() => onThemeChange("dark")}
+            >
+              <Moon className="size-4" />
+              {copy.canvas.dark}
+            </Button>
+          </div>
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            className="h-8 rounded-md px-3 text-xs"
+            onClick={onDownloadPlatform}
+          >
+            <Download className="size-4" />
+            {copy.actions.currentPlatform}
+          </Button>
+        </div>
+      </div>
+
+      <div
+        ref={canvasRef}
+        className={cn(
+          "relative h-[min(720px,calc(100vh-9rem))] min-h-[520px] overflow-auto rounded-2xl border bg-background/80 p-4 md:p-8",
+          theme === "dark" ? "bg-slate-900" : "",
+        )}
+        onClick={() => onSelect(null)}
+      >
+        <div
+          className="relative mx-auto transition-[height,width]"
+          style={{
+            width: scaledWidth,
+            height: scaledHeight,
+          }}
+        >
+          <div
+            ref={previewStackRef}
+            className="flex w-fit origin-top-left flex-col items-center gap-6 transition-transform md:w-max md:flex-row md:items-start md:gap-10"
+            style={{ transform: `scale(${zoom})` }}
+          >
+            <div ref={desktopPreviewRef}>
+              <ProfilePreview
+                copy={copy}
+                platform={platform}
+                profile={profile}
+                mode={mode}
+                device="desktop"
+                theme={theme}
+                platformStatus={platformStatus}
+                onRetryBanner={onRetryBanner}
+                selected={selected}
+                editing={editing}
+                onSelect={onSelect}
+                onStartEdit={onStartEdit}
+                onStopEdit={onStopEdit}
+                onTextChange={onTextChange}
+                onCopyText={onCopyText}
+              />
+            </div>
+            <ProfilePreview
+              copy={copy}
+              platform={platform}
+              profile={profile}
+              mode={mode}
+              device="mobile"
+              theme={theme}
+              platformStatus={platformStatus}
+              onRetryBanner={onRetryBanner}
+              selected={selected}
+              editing={editing}
+              onSelect={onSelect}
+              onStartEdit={onStartEdit}
+              onStopEdit={onStopEdit}
+              onTextChange={onTextChange}
+              onCopyText={onCopyText}
+            />
+          </div>
+        </div>
+
+        <ContextEditor
+          copy={copy}
+          selected={selected}
+          profile={profile}
+          containerRef={canvasRef}
+          zoom={zoom}
+          onUpload={onUpload}
+          onDownload={onDownloadSelected}
+          onReplaceColor={onReplaceColor}
+        />
+      </div>
+    </section>
+  );
+}

package/src/features/tools/social-profile-kit/widget/profile-preview/bluesky-preview.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import {
+  MoreHorizontal,
+  Plus,
+  Search,
+} from "lucide-react";
+
+import { BlueskyIcon } from "../../../../../assets/icons/brands/social/bluesky-icon";
+import { cn } from "@tomako/ui/cn";
+
+import {
+  BannerStatusOverlay,
+  EditableText,
+  avatarBackground,
+  bannerBackground,
+  imageTargetAttrs,
+  type PlatformPreviewProps,
+} from "./shared";
+
+export function BlueskyProfilePreview(props: PlatformPreviewProps) {
+  const {
+    copy,
+    profile,
+    device,
+    theme,
+    selected,
+    editing,
+    platformStatus,
+    onRetryBanner,
+    onSelect,
+    onStartEdit,
+    onStopEdit,
+    onTextChange,
+    onCopyText,
+  } = props;
+  const compact = device === "mobile";
+  const dark = theme === "dark";
+  const handle = profile.username.startsWith("@") ? profile.username : `@${profile.username}`;
+
+  return (
+    <article
+      className={cn(
+        "overflow-hidden rounded-[22px] border font-sans shadow-sm",
+        compact ? "w-[304px]" : "w-[520px]",
+        dark
+          ? "border-[#203040] bg-[#0f1823] text-white"
+          : "border-[#d8e5f2] bg-white text-[#0f1419]",
+      )}
+      onClick={() => onSelect({ kind: "text", field: "displayName" })}
+    >
+      <div className={cn("flex items-center gap-3 border-b px-4", compact ? "h-11" : "h-12")}>
+        <span className="flex size-7 items-center justify-center rounded-full bg-[#1083fe] text-white">
+          <BlueskyIcon className="size-4" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="h-2.5 w-28 rounded-full bg-muted" />
+        </div>
+        <Search className="size-4 text-muted-foreground" />
+      </div>
+
+      <div className="relative">
+        <button
+          type="button"
+          onClick={(event) => {
+            event.stopPropagation();
+            onSelect({ kind: "banner", device });
+          }}
+          {...imageTargetAttrs("banner", device)}
+          className={cn(
+            "block w-full overflow-hidden text-left transition",
+            compact ? "h-[104px]" : "h-[156px]",
+            selected?.kind === "banner" ? "ring-2 ring-[#1083fe] ring-inset" : "",
+          )}
+          style={bannerBackground(profile)}
+          aria-label="Edit Bluesky banner"
+        >
+          <span className="block h-full w-full bg-[radial-gradient(circle_at_78%_24%,rgba(255,255,255,.3),transparent_18%),linear-gradient(135deg,rgba(16,131,254,.24),rgba(255,255,255,0)_42%)]" />
+          <BannerStatusOverlay
+            copy={copy}
+            status={platformStatus}
+            onRetry={onRetryBanner}
+          />
+        </button>
+        <button
+          type="button"
+          onClick={(event) => {
+            event.stopPropagation();
+            onSelect({ kind: "avatar", device });
+          }}
+          {...imageTargetAttrs("avatar", device)}
+          className={cn(
+            "absolute flex items-center justify-center overflow-hidden rounded-full border-4 font-bold text-white shadow-sm transition",
+            compact ? "left-4 top-[70px] size-[80px] text-2xl" : "left-5 top-[104px] size-[108px] text-3xl",
+            dark ? "border-[#0f1823]" : "border-white",
+            selected?.kind === "avatar" ? "ring-2 ring-[#1083fe] ring-offset-2" : "",
+          )}
+          style={avatarBackground(profile)}
+          aria-label="Edit Bluesky avatar"
+        >
+          {profile.avatar.src ? null : profile.displayName.slice(0, 1)}
+        </button>
+      </div>
+
+      <div className={cn("px-4 pb-4", compact ? "pt-12" : "pt-16")}>
+        <div className="flex justify-end gap-2">
+          <button
+            className="inline-flex h-8 items-center gap-1 rounded-full bg-[#1083fe] px-4 text-xs font-bold text-white"
+            type="button"
+          >
+            <Plus className="size-3" />
+            {copy.actions.follow}
+          </button>
+          <button
+            className={cn(
+              "flex h-8 w-8 items-center justify-center rounded-full border",
+              dark ? "border-[#2d4054]" : "border-[#d8e5f2]",
+            )}
+            type="button"
+          >
+            <MoreHorizontal className="size-4" />
+          </button>
+        </div>
+        <EditableText
+          field="displayName"
+          device={device}
+          value={profile.displayName}
+          selected={selected}
+          editing={editing}
+          copy={copy}
+          className={cn("font-bold leading-tight", compact ? "text-xl" : "text-2xl")}
+          onSelect={onSelect}
+          onStartEdit={onStartEdit}
+          onStopEdit={onStopEdit}
+          onChange={onTextChange}
+          onCopy={onCopyText}
+        />
+        <EditableText
+          field="username"
+          device={device}
+          value={handle}
+          selected={selected}
+          editing={editing}
+          copy={copy}
+          className="mt-1 text-sm text-[#66798f]"
+          onSelect={onSelect}
+          onStartEdit={onStartEdit}
+          onStopEdit={onStopEdit}
+          onChange={onTextChange}
+          onCopy={onCopyText}
+        />
+        <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-[#66798f]">
+          <span><strong className={dark ? "text-white" : "text-[#0f1419]"}>20.5K</strong> followers</span>
+          <span><strong className={dark ? "text-white" : "text-[#0f1419]"}>1,697</strong> following</span>
+          <span><strong className={dark ? "text-white" : "text-[#0f1419]"}>10</strong> posts</span>
+        </div>
+        <EditableText
+          field="bio"
+          device={device}
+          value={profile.bio}
+          selected={selected}
+          editing={editing}
+          copy={copy}
+          className="mt-3 text-sm leading-snug"
+          onSelect={onSelect}
+          onStartEdit={onStartEdit}
+          onStopEdit={onStopEdit}
+          onChange={onTextChange}
+          onCopy={onCopyText}
+        />
+        <div className="mt-4 flex items-center gap-2 text-xs text-[#66798f]">
+          <div className="flex -space-x-2">
+            {[0, 1, 2].map((index) => (
+              <span
+                key={index}
+                className="size-6 rounded-full border-2 border-background"
+                style={{
+                  background: `linear-gradient(135deg, ${profile.colors[index + 1]}, ${profile.colors[0]})`,
+                }}
+              />
+            ))}
+          </div>
+          <span>Followed by early users and 23 others</span>
+        </div>
+      </div>
+    </article>
+  );
+}

package/src/features/tools/social-profile-kit/widget/profile-preview/facebook-preview.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import {
+    Home,
+    MessageCircle,
+    ThumbsUp,
+    UserPlus
+} from "lucide-react";
+
+import { cn } from "@tomako/ui/cn";
+
+
+import {
+    BannerStatusOverlay,
+    EditableText,
+    avatarBackground,
+    bannerBackground,
+    imageTargetAttrs,
+    profileHost,
+    type PlatformPreviewProps
+} from "./shared";
+
+export function FacebookProfilePreview(props: PlatformPreviewProps) {
+  const {
+    copy,
+    profile,
+    device,
+    theme,
+    selected,
+    editing,
+    mode = "brandCompany",
+    platformStatus,
+    onRetryBanner,
+    onSelect,
+    onStartEdit,
+    onStopEdit,
+    onTextChange,
+    onCopyText,
+  } = props;
+  const compact = device === "mobile";
+  const dark = theme === "dark";
+  const business = mode === "brandCompany";
+
+  return (
+    <article
+      className={cn(
+        "overflow-hidden rounded-[18px] border font-sans shadow-sm",
+        compact ? "w-[304px]" : "w-[560px]",
+        dark ? "border-[#3a3b3c] bg-[#18191a] text-[#e4e6eb]" : "border-[#dddfe2] bg-white text-[#050505]",
+      )}
+      onClick={() => onSelect({ kind: "text", field: "displayName" })}
+    >
+      <div className="flex h-10 items-center gap-2 border-b px-4">
+        <span className="flex size-7 items-center justify-center rounded-full bg-[#1877f2] font-bold text-white">f</span>
+        <div className={cn("h-7 flex-1 rounded-full", dark ? "bg-[#3a3b3c]" : "bg-[#f0f2f5]")} />
+        <Home className="size-4 text-muted-foreground" />
+      </div>
+      <div className="relative">
+        <button
+          type="button"
+          onClick={(event) => {
+            event.stopPropagation();
+            onSelect({ kind: "banner", device });
+          }}
+          {...imageTargetAttrs("banner", device)}
+          className={cn(
+            "relative block w-full overflow-hidden rounded-b-lg text-left",
+            compact ? "h-[112px]" : "h-[190px]",
+            selected?.kind === "banner" ? "ring-2 ring-[#1877f2] ring-inset" : "",
+          )}
+          style={bannerBackground(profile)}
+        >
+          <span className="absolute inset-0 bg-[radial-gradient(circle_at_78%_24%,rgba(255,255,255,.38),transparent_18%),linear-gradient(180deg,transparent_58%,rgba(0,0,0,.22))]" />
+          <BannerStatusOverlay
+            copy={copy}
+            status={platformStatus}
+            onRetry={onRetryBanner}
+          />
+        </button>
+        <button
+          type="button"
+          onClick={(event) => {
+            event.stopPropagation();
+            onSelect({ kind: "avatar", device });
+          }}
+          {...imageTargetAttrs("avatar", device)}
+          className={cn(
+            "absolute flex items-center justify-center overflow-hidden rounded-full border-4 font-bold text-white shadow",
+            compact ? "-bottom-10 left-4 size-24 text-2xl" : "-bottom-14 left-6 size-32 text-3xl",
+            dark ? "border-[#18191a]" : "border-white",
+            selected?.kind === "avatar" ? "ring-2 ring-[#1877f2] ring-offset-2" : "",
+          )}
+          style={avatarBackground(profile)}
+        >
+          {profile.avatar.src ? null : profile.displayName.slice(0, 1)}
+        </button>
+      </div>
+      <div className={cn("px-4", compact ? "pt-12" : "pt-16")}>
+        <div className={cn("flex gap-3", compact ? "flex-col" : "items-end justify-between")}>
+          <div className="min-w-0">
+            <EditableText
+              field="displayName"
+              device={device}
+              value={profile.displayName}
+              selected={selected}
+              editing={editing}
+              copy={copy}
+              className={cn("font-bold", compact ? "text-xl" : "text-3xl")}
+              onSelect={onSelect}
+              onStartEdit={onStartEdit}
+              onStopEdit={onStopEdit}
+              onChange={onTextChange}
+              onCopy={onCopyText}
+            />
+            <EditableText
+              field="bio"
+              device={device}
+              value={business ? profile.bio : `${profile.bio} · 4.8K friends`}
+              selected={selected}
+              editing={editing}
+              copy={copy}
+              className="mt-1 text-sm text-muted-foreground"
+              onSelect={onSelect}
+              onStartEdit={onStartEdit}
+              onStopEdit={onStopEdit}
+              onChange={onTextChange}
+              onCopy={onCopyText}
+            />
+          </div>
+          <div className="flex gap-2">
+            <button className="inline-flex h-9 items-center gap-1 rounded-md bg-[#1877f2] px-3 text-xs font-semibold text-white" type="button">
+              {business ? <ThumbsUp className="size-3.5" /> : <UserPlus className="size-3.5" />}
+              {business ? "Like" : "Add friend"}
+            </button>
+            <button className={cn("inline-flex h-9 items-center gap-1 rounded-md px-3 text-xs font-semibold", dark ? "bg-[#3a3b3c]" : "bg-[#e4e6eb]")} type="button">
+              <MessageCircle className="size-3.5" /> Message
+            </button>
+          </div>
+        </div>
+        <div className="mt-4 flex gap-5 border-y text-xs font-semibold text-muted-foreground">
+          {(business ? ["Posts", "About", "Reviews", "Photos"] : ["Posts", "About", "Friends", "Photos"]).map((tab, index) => (
+            <span key={tab} className={cn("py-3", index === 0 ? "border-b-2 border-[#1877f2] text-[#1877f2]" : "")}>{tab}</span>
+          ))}
+        </div>
+        <div className={cn("grid gap-3 py-4", compact ? "" : "grid-cols-[180px_1fr]")}>
+          <div className={cn("rounded-xl p-3", dark ? "bg-[#242526]" : "bg-[#f0f2f5]")}>
+            <div className="mb-2 text-sm font-semibold">{business ? "Intro" : "Details"}</div>
+            <div className="space-y-2 text-xs text-muted-foreground">
+              <p>{business ? "Software company" : "Digital creator"}</p>
+              <p>{business ? `${profileHost(profile)}` : "Lives in Worldwide"}</p>
+              <p>{business ? "12K followers" : "Joined May 2023"}</p>
+            </div>
+          </div>
+          <div className={cn("rounded-xl p-3", dark ? "bg-[#242526]" : "bg-white border")}>
+            <div className="flex gap-2">
+              <span className="size-8 rounded-full" style={avatarBackground(profile)} />
+              <div className="h-8 flex-1 rounded-full bg-muted" />
+            </div>
+            <div
+              className="mt-3 aspect-video rounded-lg bg-secondary"
+              style={{ background: `linear-gradient(135deg, ${profile.colors[1]}, ${profile.colors[2]})` }}
+            />
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}

package/src/features/tools/social-profile-kit/widget/profile-preview/index.ts

@@ -0,0 +1 @@
+export { ProfilePreview } from "./profile-preview";