@tomako/tools-runtime 0.1.0

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

@@ -0,0 +1,391 @@
+"use client";
+
+import {
+    AlertCircle,
+    Check,
+    Loader2,
+    Play
+} from "lucide-react";
+import type { KeyboardEvent } from "react";
+import { useRef } from "react";
+
+import {
+    SOCIAL_PROFILE_PLATFORM_SPECS
+} from "../../../../../lib/tools/social-profile-kit.constants";
+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 type {
+    EditableTextField,
+    EditingProfileText,
+    ProfilePreviewDevice,
+    SelectedProfileElement,
+    SocialProfileKitCopy,
+} from "../types";
+
+export type PlatformPreviewProps = {
+  copy: SocialProfileKitCopy;
+  profile: SocialPlatformProfile;
+  device: ProfilePreviewDevice;
+  theme: SocialProfileTheme;
+  selected: SelectedProfileElement | null;
+  editing: EditingProfileText;
+  mode?: SocialProfileMode;
+  platformStatus: PlatformGenerationStatus;
+  onRetryBanner: () => void;
+  onSelect: (element: SelectedProfileElement) => void;
+  onStartEdit: (field: EditableTextField, device: ProfilePreviewDevice) => void;
+  onStopEdit: () => void;
+  onTextChange: (field: EditableTextField, value: string) => void;
+  onCopyText: (field: EditableTextField, value: string) => void;
+};
+
+export function isTextSelected(
+  selected: SelectedProfileElement | null,
+  field: EditableTextField,
+) {
+  return selected?.kind === "text" && selected.field === field;
+}
+
+export function hasBanner(platform: SocialProfilePlatform, profile: SocialPlatformProfile) {
+  return (
+    SOCIAL_PROFILE_PLATFORM_SPECS[platform].supportsBanner &&
+    profile.banner?.kind !== "notApplicable"
+  );
+}
+
+export function avatarBackground(profile: SocialPlatformProfile) {
+  return {
+    backgroundImage:
+      profile.avatar.src != null
+        ? `url(${profile.avatar.src})`
+        : `linear-gradient(135deg, ${profile.colors[1]}, ${profile.colors[2]})`,
+    backgroundColor: "#ffffff",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: profile.avatar.kind === "uploaded" ? "contain" : "cover",
+    backgroundPosition: "center",
+  };
+}
+
+export function bannerBackground(profile: SocialPlatformProfile) {
+  return {
+    backgroundImage:
+      profile.banner?.src != null
+        ? `url(${profile.banner.src})`
+        : `linear-gradient(135deg, ${profile.colors[2]}, ${profile.colors[3]}, ${profile.colors[1]})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+  };
+}
+
+export function BannerStatusOverlay({
+  copy,
+  status,
+  onRetry,
+}: {
+  copy: SocialProfileKitCopy;
+  status: PlatformGenerationStatus;
+  onRetry?: () => void;
+}) {
+  if (status === "ready" || status === "idle") return null;
+
+  const failed = status === "failed";
+
+  return (
+    <span
+      className={cn(
+        "pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/28 px-4 text-center backdrop-blur-[1px]",
+        failed ? "bg-red-950/35" : "",
+      )}
+    >
+      <span
+        role={failed && onRetry ? "button" : undefined}
+        tabIndex={failed && onRetry ? 0 : undefined}
+        onClick={(event) => {
+          if (!failed || !onRetry) return;
+          event.stopPropagation();
+          onRetry();
+        }}
+        onKeyDown={(event) => {
+          if (!failed || !onRetry) return;
+          if (event.key !== "Enter" && event.key !== " ") return;
+          event.preventDefault();
+          event.stopPropagation();
+          onRetry();
+        }}
+        className={cn(
+          "inline-flex max-w-[80%] items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold shadow-sm",
+          failed
+            ? "pointer-events-auto cursor-pointer border-red-200/60 bg-red-50/95 text-red-700 hover:bg-red-100"
+            : "border-white/55 bg-white/92 text-[#0f1419]",
+        )}
+      >
+        {failed ? (
+          <AlertCircle className="size-3.5 shrink-0" />
+        ) : (
+          <Loader2 className="size-3.5 shrink-0 animate-spin" />
+        )}
+        <span className="truncate">
+          {copy.elements.banner}{" "}
+          {failed ? `${copy.status.failed} · ${copy.actions.regenerate}` : copy.status.generating}
+        </span>
+      </span>
+    </span>
+  );
+}
+
+export function imageTargetAttrs(
+  kind: "avatar" | "banner",
+  device: ProfilePreviewDevice,
+) {
+  return {
+    "data-profile-element": kind,
+    "data-profile-device": device,
+  };
+}
+
+export function EditableText({
+  field,
+  device,
+  value,
+  selected,
+  editing,
+  copy: _copy,
+  className,
+  onSelect,
+  onStartEdit,
+  onStopEdit,
+  onChange,
+  onCopy,
+}: {
+  field: EditableTextField;
+  device: ProfilePreviewDevice;
+  value?: string;
+  selected: SelectedProfileElement | null;
+  editing: EditingProfileText;
+  copy: SocialProfileKitCopy;
+  className?: string;
+  onSelect: (element: SelectedProfileElement) => void;
+  onStartEdit: (field: EditableTextField, device: ProfilePreviewDevice) => void;
+  onStopEdit: () => void;
+  onChange: (field: EditableTextField, value: string) => void;
+  onCopy: (field: EditableTextField, value: string) => void;
+}) {
+  const clickTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  void _copy;
+  const active = isTextSelected(selected, field);
+  const isEditing = editing?.field === field && editing.device === device;
+
+  if (!value) return null;
+
+  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (event.key === "Enter" || event.key === "Escape") {
+      event.currentTarget.blur();
+    }
+  }
+
+  function clearClickTimer() {
+    if (clickTimerRef.current) {
+      clearTimeout(clickTimerRef.current);
+      clickTimerRef.current = null;
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative rounded-md ring-offset-2 transition",
+        active ? "ring-2 ring-[#5BA8A0]" : "hover:bg-background/70",
+        className,
+      )}
+    >
+      {isEditing ? (
+        <input
+          autoFocus
+          value={value}
+          onChange={(event) => onChange(field, event.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={onStopEdit}
+          className="w-full rounded-md border border-input bg-background px-2 py-1 text-inherit outline-none"
+        />
+      ) : (
+        <button
+          type="button"
+          className="w-full text-left text-inherit"
+          onClick={(event) => {
+            event.stopPropagation();
+            onSelect({ kind: "text", field });
+            clearClickTimer();
+            clickTimerRef.current = setTimeout(() => {
+              onCopy(field, value);
+              clickTimerRef.current = null;
+            }, 220);
+          }}
+          onDoubleClick={(event) => {
+            event.stopPropagation();
+            clearClickTimer();
+            onSelect({ kind: "text", field });
+            onStartEdit(field, device);
+          }}
+        >
+          {value}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function Avatar({
+  profile,
+  device,
+  selected,
+  onSelect,
+}: {
+  profile: SocialPlatformProfile;
+  device: ProfilePreviewDevice;
+  selected: SelectedProfileElement | null;
+  onSelect: (element: SelectedProfileElement) => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        event.stopPropagation();
+        onSelect({ kind: "avatar", device });
+      }}
+      {...imageTargetAttrs("avatar", device)}
+      className={cn(
+        "flex size-16 items-center justify-center overflow-hidden rounded-full border-4 border-card text-lg font-bold text-white shadow-sm",
+        selected?.kind === "avatar" ? "ring-2 ring-[#5BA8A0]" : "",
+      )}
+      style={avatarBackground(profile)}
+    >
+      {profile.avatar.src ? null : profile.displayName.slice(0, 1)}
+    </button>
+  );
+}
+
+export function Banner({
+  copy,
+  platform,
+  profile,
+  device,
+  platformStatus,
+  selected,
+  onRetryBanner,
+  onSelect,
+}: {
+  copy: SocialProfileKitCopy;
+  platform: SocialProfilePlatform;
+  profile: SocialPlatformProfile;
+  device: ProfilePreviewDevice;
+  platformStatus: PlatformGenerationStatus;
+  selected: SelectedProfileElement | null;
+  onRetryBanner: () => void;
+  onSelect: (element: SelectedProfileElement) => void;
+}) {
+  if (!hasBanner(platform, profile)) return null;
+
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        event.stopPropagation();
+        onSelect({ kind: "banner", device });
+      }}
+      {...imageTargetAttrs("banner", device)}
+      className={cn(
+        "relative h-24 w-full overflow-hidden rounded-xl border text-left transition",
+        selected?.kind === "banner"
+          ? "ring-2 ring-[#5BA8A0] ring-offset-2"
+          : "",
+      )}
+      style={bannerBackground(profile)}
+    >
+      <BannerStatusOverlay
+        copy={copy}
+        status={platformStatus}
+        onRetry={onRetryBanner}
+      />
+    </button>
+  );
+}
+
+export function VerifiedBadge({ compact }: { compact: boolean }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full bg-[#1d9bf0] text-white",
+        compact ? "size-3.5" : "size-4",
+      )}
+      aria-label="Verified"
+    >
+      <Check className={compact ? "size-2.5" : "size-3"} strokeWidth={3} />
+    </span>
+  );
+}
+
+export function profileHost(profile: SocialPlatformProfile) {
+  if (profile.website) return profile.website;
+  const fallback = profile.displayName
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "");
+  return `${fallback || "profile"}.app`;
+}
+
+export function MediaTileGrid({
+  profile,
+  compact,
+  kind = "square",
+  count,
+  dense = false,
+}: {
+  profile: SocialPlatformProfile;
+  compact: boolean;
+  kind?: "square" | "video" | "pin";
+  count?: number;
+  dense?: boolean;
+}) {
+  const tileCount = count ?? (compact ? 6 : 9);
+  const [ink = "#202938", primary = "#6fb7aa", secondary = "#f5a36c", accent = "#f7d37a"] = profile.colors;
+  const backgrounds = [
+    `linear-gradient(135deg, ${primary}, ${secondary})`,
+    `linear-gradient(135deg, ${ink}, ${accent})`,
+    `linear-gradient(135deg, ${secondary}, ${primary})`,
+    `linear-gradient(135deg, ${accent}, ${ink})`,
+    `linear-gradient(135deg, ${primary}, ${accent})`,
+    `linear-gradient(135deg, ${ink}, ${primary})`,
+  ];
+  return (
+    <div className={cn("grid gap-1", kind === "pin" ? "grid-cols-2" : "grid-cols-3")}>
+      {Array.from({ length: tileCount }).map((_, index) => (
+        <div
+          key={index}
+          className={cn(
+            "relative overflow-hidden bg-secondary",
+            kind === "video"
+              ? dense
+                ? "aspect-[3/4]"
+                : "aspect-[9/14]"
+              : kind === "pin"
+                ? "aspect-[3/4] rounded-xl"
+                : "aspect-square",
+          )}
+          style={{
+            background: backgrounds[index % backgrounds.length],
+          }}
+        >
+          {kind === "video" ? (
+            <Play className="absolute bottom-1 left-1 size-3 fill-white text-white" />
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,148 @@
+"use client";
+
+import {
+    Heart,
+    Link2,
+    MessageCircle,
+    MoreHorizontal,
+    Send
+} from "lucide-react";
+
+import { cn } from "@tomako/ui/cn";
+
+
+import {
+    EditableText,
+    avatarBackground,
+    imageTargetAttrs,
+    profileHost,
+    type PlatformPreviewProps
+} from "./shared";
+
+export function ThreadsProfilePreview(props: PlatformPreviewProps) {
+  const {
+    copy,
+    profile,
+    device,
+    theme,
+    selected,
+    editing,
+    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-[26px] border font-sans shadow-sm",
+        compact ? "w-[300px]" : "w-[430px]",
+        dark ? "border-[#2c2c2c] bg-black text-white" : "border-[#e5e5e5] bg-white text-[#101010]",
+      )}
+      onClick={() => onSelect({ kind: "text", field: "displayName" })}
+    >
+      <div className={cn("flex items-center justify-between border-b px-4", compact ? "h-12" : "h-14")}>
+        <span className="text-lg font-bold">@</span>
+        <div className="text-sm font-semibold">{handle.replace(/^@/, "")}</div>
+        <MoreHorizontal className="size-5" />
+      </div>
+      <div className="px-5 py-5">
+        <div className="flex items-start gap-4">
+          <div className="min-w-0 flex-1">
+            <EditableText
+              field="displayName"
+              device={device}
+              value={profile.displayName}
+              selected={selected}
+              editing={editing}
+              copy={copy}
+              className="text-xl font-bold"
+              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-muted-foreground"
+              onSelect={onSelect}
+              onStartEdit={onStartEdit}
+              onStopEdit={onStopEdit}
+              onChange={onTextChange}
+              onCopy={onCopyText}
+            />
+          </div>
+          <button
+            type="button"
+            onClick={(event) => {
+              event.stopPropagation();
+              onSelect({ kind: "avatar", device });
+            }}
+            {...imageTargetAttrs("avatar", device)}
+            className={cn(
+              "flex items-center justify-center overflow-hidden rounded-full border font-bold text-white shadow-sm",
+              compact ? "size-20 text-2xl" : "size-24 text-3xl",
+              dark ? "border-[#222]" : "border-[#f2f2f2]",
+              selected?.kind === "avatar" ? "ring-2 ring-black ring-offset-2" : "",
+            )}
+            style={avatarBackground(profile)}
+            aria-label="Edit Threads avatar"
+          >
+            {profile.avatar.src ? null : profile.displayName.slice(0, 1)}
+          </button>
+        </div>
+        <EditableText
+          field="bio"
+          device={device}
+          value={profile.bio}
+          selected={selected}
+          editing={editing}
+          copy={copy}
+          className="mt-4 text-sm leading-snug"
+          onSelect={onSelect}
+          onStartEdit={onStartEdit}
+          onStopEdit={onStopEdit}
+          onChange={onTextChange}
+          onCopy={onCopyText}
+        />
+        <div className="mt-3 flex items-center gap-2 text-sm text-muted-foreground">
+          <Link2 className="size-4" />
+          <span>{profileHost(profile)}</span>
+        </div>
+        <div className="mt-4 flex items-center justify-between">
+          <span className="text-sm text-muted-foreground">12.4K followers</span>
+          <button className="h-9 rounded-full bg-foreground px-5 text-sm font-semibold text-background" type="button">
+            Follow
+          </button>
+        </div>
+      </div>
+      <div className="border-t px-5 py-4">
+        {["Launch notes for the week.", "A small workflow that saved us time."].map((text, index) => (
+          <div key={text} className={cn("flex gap-3 py-3", index > 0 ? "border-t" : "")}>
+            <span className="size-8 shrink-0 rounded-full" style={avatarBackground(profile)} />
+            <div className="min-w-0 flex-1">
+              <div className="text-sm font-semibold">{profile.displayName}</div>
+              <p className="mt-1 text-sm text-muted-foreground">{text}</p>
+              <div className="mt-2 flex gap-4 text-muted-foreground">
+                <Heart className="size-4" />
+                <MessageCircle className="size-4" />
+                <Send className="size-4" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </article>
+  );
+}