@newtonedev/editor 0.1.1

package/src/components/FontPicker.tsx

@@ -0,0 +1,351 @@
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { useTokens } from "@newtonedev/components";
+import {
+  GOOGLE_FONTS,
+  SYSTEM_FONTS,
+} from "@newtonedev/components";
+import type { GoogleFontEntry, SystemFontEntry, FontConfig } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+
+type FontSlot = "default" | "display" | "mono";
+
+interface FontPickerProps {
+  readonly label: string;
+  readonly slot: FontSlot;
+  readonly currentFont: FontConfig;
+  readonly onSelect: (font: FontConfig) => void;
+}
+
+/** Preload all curated Google Fonts for preview on first dropdown open. */
+let previewLoaded = false;
+function preloadFontsForPreview() {
+  if (previewLoaded || typeof document === "undefined") return;
+  previewLoaded = true;
+  const families = GOOGLE_FONTS.map(
+    (f) => `family=${f.family.replace(/ /g, "+")}:wght@400`,
+  ).join("&");
+  const url = `https://fonts.googleapis.com/css2?${families}&display=swap`;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = url;
+  document.head.appendChild(link);
+}
+
+function googleFontToConfig(entry: GoogleFontEntry): FontConfig {
+  return {
+    type: "google",
+    family: entry.family,
+    fallback: entry.fallback,
+  };
+}
+
+function systemFontToConfig(entry: SystemFontEntry): FontConfig {
+  return {
+    type: "system",
+    family: entry.family,
+    fallback: entry.fallback,
+  };
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  "sans-serif": "Sans Serif",
+  serif: "Serif",
+  monospace: "Monospace",
+  display: "Display",
+};
+
+const CATEGORY_ORDER: readonly string[] = [
+  "sans-serif",
+  "serif",
+  "monospace",
+  "display",
+];
+const MONO_CATEGORY_ORDER: readonly string[] = [
+  "monospace",
+  "sans-serif",
+  "serif",
+  "display",
+];
+
+export function FontPicker({
+  label,
+  slot,
+  currentFont,
+  onSelect,
+}: FontPickerProps) {
+  const tokens = useTokens();
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const labelColor = srgbToHex(tokens.textSecondary.srgb);
+  const textColor = srgbToHex(tokens.textPrimary.srgb);
+  const bgColor = srgbToHex(tokens.backgroundElevated.srgb);
+  const borderColor = srgbToHex(tokens.border.srgb);
+  const hoverColor = srgbToHex(tokens.backgroundSunken.srgb);
+  const interactiveColor = srgbToHex(tokens.interactive.srgb);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleMouseDown(e: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+        setSearch("");
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      preloadFontsForPreview();
+      requestAnimationFrame(() => searchInputRef.current?.focus());
+    }
+  }, [isOpen]);
+
+  const categoryOrder = slot === "mono" ? MONO_CATEGORY_ORDER : CATEGORY_ORDER;
+
+  const filteredGoogleFonts = useMemo(() => {
+    const query = search.toLowerCase().trim();
+    const fonts = query
+      ? GOOGLE_FONTS.filter((f) => f.family.toLowerCase().includes(query))
+      : GOOGLE_FONTS;
+
+    const grouped: Record<string, GoogleFontEntry[]> = {};
+    for (const cat of categoryOrder) {
+      const inCategory = fonts.filter((f) => f.category === cat);
+      if (inCategory.length > 0) {
+        grouped[cat] = inCategory;
+      }
+    }
+    return grouped;
+  }, [search, categoryOrder]);
+
+  const filteredSystemFonts = useMemo(() => {
+    const query = search.toLowerCase().trim();
+    return query
+      ? SYSTEM_FONTS.filter((f) => f.family.toLowerCase().includes(query))
+      : [...SYSTEM_FONTS];
+  }, [search]);
+
+  const handleSelect = useCallback(
+    (font: FontConfig) => {
+      onSelect(font);
+      setIsOpen(false);
+      setSearch("");
+    },
+    [onSelect],
+  );
+
+  const fontFamily = currentFont.family.includes(" ")
+    ? `"${currentFont.family}"`
+    : currentFont.family;
+
+  return (
+    <div ref={containerRef} style={{ position: "relative" }}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        style={{
+          width: "100%",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "6px 10px",
+          borderRadius: 6,
+          border: `1px solid ${isOpen ? interactiveColor : borderColor}`,
+          background: "transparent",
+          cursor: "pointer",
+          outline: "none",
+        }}
+      >
+        <span style={{ fontSize: 12, color: labelColor }}>{label}</span>
+        <span
+          style={{
+            fontSize: 12,
+            color: textColor,
+            fontFamily: `${fontFamily}, ${currentFont.fallback}`,
+            maxWidth: 140,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {currentFont.family}
+        </span>
+      </button>
+
+      {isOpen && (
+        <div
+          style={{
+            position: "absolute",
+            top: "calc(100% + 4px)",
+            left: 0,
+            right: 0,
+            zIndex: 100,
+            background: bgColor,
+            border: `1px solid ${borderColor}`,
+            borderRadius: 8,
+            boxShadow: "0 4px 16px rgba(0,0,0,0.15)",
+            maxHeight: 320,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+          }}
+        >
+          <div style={{ padding: "8px 8px 4px" }}>
+            <input
+              ref={searchInputRef}
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search fonts..."
+              style={{
+                width: "100%",
+                padding: "6px 8px",
+                fontSize: 12,
+                borderRadius: 4,
+                border: `1px solid ${borderColor}`,
+                background: "transparent",
+                color: textColor,
+                outline: "none",
+                boxSizing: "border-box",
+              }}
+            />
+          </div>
+
+          <div style={{ overflowY: "auto", padding: "4px 0" }}>
+            {filteredSystemFonts.length > 0 && (
+              <div>
+                <div
+                  style={{
+                    fontSize: 10,
+                    fontWeight: 600,
+                    color: labelColor,
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                    padding: "6px 12px 2px",
+                  }}
+                >
+                  System
+                </div>
+                {filteredSystemFonts.map((f) => (
+                  <FontOption
+                    key={f.family}
+                    family={f.family}
+                    fallback={f.fallback}
+                    isSelected={
+                      currentFont.family === f.family &&
+                      currentFont.type === "system"
+                    }
+                    textColor={textColor}
+                    hoverColor={hoverColor}
+                    interactiveColor={interactiveColor}
+                    onSelect={() => handleSelect(systemFontToConfig(f))}
+                  />
+                ))}
+              </div>
+            )}
+
+            {Object.entries(filteredGoogleFonts).map(([category, fonts]) => (
+              <div key={category}>
+                <div
+                  style={{
+                    fontSize: 10,
+                    fontWeight: 600,
+                    color: labelColor,
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                    padding: "8px 12px 2px",
+                  }}
+                >
+                  {CATEGORY_LABELS[category] ?? category}
+                </div>
+                {fonts.map((f) => (
+                  <FontOption
+                    key={f.family}
+                    family={f.family}
+                    fallback={f.fallback}
+                    isSelected={
+                      currentFont.family === f.family &&
+                      currentFont.type === "google"
+                    }
+                    textColor={textColor}
+                    hoverColor={hoverColor}
+                    interactiveColor={interactiveColor}
+                    onSelect={() => handleSelect(googleFontToConfig(f))}
+                  />
+                ))}
+              </div>
+            ))}
+
+            {filteredSystemFonts.length === 0 &&
+              Object.keys(filteredGoogleFonts).length === 0 && (
+                <div
+                  style={{
+                    padding: "12px",
+                    fontSize: 12,
+                    color: labelColor,
+                    textAlign: "center",
+                  }}
+                >
+                  No fonts found
+                </div>
+              )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function FontOption({
+  family,
+  fallback,
+  isSelected,
+  textColor,
+  hoverColor,
+  interactiveColor,
+  onSelect,
+}: {
+  readonly family: string;
+  readonly fallback: string;
+  readonly isSelected: boolean;
+  readonly textColor: string;
+  readonly hoverColor: string;
+  readonly interactiveColor: string;
+  readonly onSelect: () => void;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const fontFamily = family.includes(" ") ? `"${family}"` : family;
+
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        display: "block",
+        width: "100%",
+        padding: "5px 12px",
+        fontSize: 13,
+        fontFamily: `${fontFamily}, ${fallback}`,
+        color: isSelected ? interactiveColor : textColor,
+        background: hovered ? hoverColor : "transparent",
+        border: "none",
+        cursor: "pointer",
+        textAlign: "left",
+        outline: "none",
+        fontWeight: isSelected ? 600 : 400,
+      }}
+    >
+      {family}
+    </button>
+  );
+}