@newtonedev/editor 0.1.5 → 0.1.7

package/src/preview/ComponentRenderer.tsx

@@ -18,6 +18,7 @@ import { srgbToHex } from "newtone";
 interface ComponentRendererProps {
   readonly componentId: string;
   readonly props: Record<string, unknown>;
+  readonly previewText?: string;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -93,7 +94,7 @@ function WrapperPreview(props: AnyProps) {
   );
 }
 
-export function ComponentRenderer({ componentId, props }: ComponentRendererProps) {
+export function ComponentRenderer({ componentId, props, previewText }: ComponentRendererProps) {
   const noop = useCallback(() => {}, []);
 
   switch (componentId) {
@@ -128,12 +129,13 @@ export function ComponentRenderer({ componentId, props }: ComponentRendererProps
     case "text":
       return (
         <Text
+          scope={props.scope as AnyProps}
+          role={props.role as AnyProps}
           size={props.size as AnyProps}
-          weight={props.weight as AnyProps}
           color={props.color as AnyProps}
-          font={props.font as AnyProps}
+          responsive
         >
-          The quick brown fox
+          {previewText || "The quick brown fox"}
         </Text>
       );
     case "icon":

package/src/preview/IconBrowserView.tsx

@@ -0,0 +1,187 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Icon, useTokens, ICON_CATALOG } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+
+interface IconBrowserViewProps {
+  readonly selectedIconName: string;
+  readonly onIconSelect: (name: string) => void;
+}
+
+export function IconBrowserView({
+  selectedIconName,
+  onIconSelect,
+}: IconBrowserViewProps) {
+  const tokens = useTokens();
+  const [search, setSearch] = useState("");
+  const [hoveredIcon, setHoveredIcon] = useState<string | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const filteredCategories = useMemo(() => {
+    const q = search.toLowerCase().trim();
+    if (!q) return ICON_CATALOG;
+    return ICON_CATALOG
+      .map((cat) => ({
+        ...cat,
+        icons: cat.icons.filter((name) => name.includes(q)),
+      }))
+      .filter((cat) => cat.icons.length > 0);
+  }, [search]);
+
+  // Scroll to selected icon when it changes externally (user types in sidebar)
+  useEffect(() => {
+    if (!selectedIconName || !scrollRef.current) return;
+    const el = scrollRef.current.querySelector(
+      `[data-icon="${selectedIconName}"]`,
+    );
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [selectedIconName]);
+
+  const accentColor = srgbToHex(tokens.accent.fill.srgb);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0,
+      }}
+    >
+      {/* Search */}
+      <div style={{ padding: "0 32px", flexShrink: 0 }}>
+        <div style={{ position: "relative" }}>
+          <Icon
+            name="search"
+            size={18}
+            color={srgbToHex(tokens.textTertiary.srgb)}
+            style={{
+              position: "absolute",
+              left: 10,
+              top: 9,
+              pointerEvents: "none",
+            }}
+          />
+          <input
+            type="text"
+            placeholder="Search icons..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            style={{
+              width: "100%",
+              padding: "8px 12px 8px 34px",
+              borderRadius: 8,
+              border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+              backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+              color: srgbToHex(tokens.textPrimary.srgb),
+              fontSize: 13,
+              boxSizing: "border-box",
+              outline: "none",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Icon grid */}
+      <div
+        ref={scrollRef}
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          padding: "16px 32px 32px",
+        }}
+      >
+        {filteredCategories.length === 0 && (
+          <p
+            style={{
+              fontSize: 13,
+              color: srgbToHex(tokens.textTertiary.srgb),
+              textAlign: "center",
+              marginTop: 32,
+            }}
+          >
+            No icons found
+          </p>
+        )}
+
+        {filteredCategories.map((category) => (
+          <div key={category.id} style={{ marginBottom: 24 }}>
+            <h3
+              style={{
+                fontSize: 12,
+                fontWeight: 600,
+                color: srgbToHex(tokens.textSecondary.srgb),
+                textTransform: "uppercase",
+                letterSpacing: 0.5,
+                margin: "0 0 8px",
+              }}
+            >
+              {category.label}
+            </h3>
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fill, minmax(80px, 1fr))",
+                gap: 6,
+              }}
+            >
+              {category.icons.map((name) => {
+                const isSelected = selectedIconName === name;
+                const isHovered = hoveredIcon === name;
+
+                const borderColor = isSelected
+                  ? accentColor
+                  : isHovered
+                    ? `${accentColor}66`
+                    : "transparent";
+
+                return (
+                  <button
+                    key={name}
+                    data-icon={name}
+                    onClick={() => onIconSelect(name)}
+                    onMouseEnter={() => setHoveredIcon(name)}
+                    onMouseLeave={() => setHoveredIcon(null)}
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: 4,
+                      padding: "8px 4px 6px",
+                      borderRadius: 8,
+                      border: `2px solid ${borderColor}`,
+                      backgroundColor: isSelected
+                        ? srgbToHex(tokens.backgroundElevated.srgb)
+                        : "transparent",
+                      cursor: "pointer",
+                      transition: "border-color 150ms ease",
+                    }}
+                  >
+                    <Icon name={name} size={40} />
+                    <span
+                      style={{
+                        fontSize: 10,
+                        color: isSelected
+                          ? accentColor
+                          : srgbToHex(tokens.textTertiary.srgb),
+                        fontWeight: isSelected ? 600 : 400,
+                        maxWidth: "100%",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {name}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/types.ts

@@ -1,7 +1,16 @@
 import type { ConfiguratorState } from "@newtonedev/configurator";
 import type { NewtoneThemeConfig } from "@newtonedev/components";
+import type { FontRuntimeMetrics, GoogleFontEntry } from "@newtonedev/fonts";
 import type { ReactNode } from "react";
 
+/** Font catalog entry enriched with weight metadata for the editor. */
+export interface EditorFontEntry extends GoogleFontEntry {
+  readonly isVariable?: boolean;
+  readonly availableWeights?: readonly number[];
+  /** Weight axis range for variable fonts (from Google Fonts API wght axis). */
+  readonly weightAxisRange?: { readonly min: number; readonly max: number };
+}
+
 // --- Data types ---
 
 export interface Preset {
@@ -43,6 +52,8 @@ export interface EditorPersistence {
     readonly state: ConfiguratorState;
     readonly presets: readonly Preset[];
     readonly activePresetId: string;
+    readonly calibrations?: Record<string, number>;
+    readonly fontMetrics?: Record<string, FontRuntimeMetrics>;
   }) => Promise<{ error?: unknown }>;
 
   /** Persist preset metadata (used by preset CRUD operations). */
@@ -72,4 +83,8 @@ export interface EditorProps {
   readonly headerSlots?: EditorHeaderSlots;
   readonly onNavigate?: (view: PreviewView) => void;
   readonly initialPreviewView?: PreviewView;
+  /** URL of the font manifest for metrics lookup at publish time. */
+  readonly manifestUrl?: string;
+  /** Curated fonts available in the font picker, enriched with weight metadata. */
+  readonly fontCatalog?: readonly EditorFontEntry[];
 }

package/src/utils/lookupFontMetrics.ts

@@ -0,0 +1,52 @@
+import type { FontScope } from '@newtonedev/fonts';
+import type { FontSlot } from '@newtonedev/components';
+import type { FontRuntimeMetrics } from '@newtonedev/fonts';
+
+/**
+ * Look up FontRuntimeMetrics for all font scopes from the font manifest.
+ *
+ * Called at publish time alongside measureFontCalibrations. Fetches the
+ * manifest JSON from the given URL and extracts metrics for each unique
+ * font family in the current typography configuration.
+ *
+ * Deduplicates by family name so a font used in multiple scopes is
+ * looked up only once. Returns empty object if manifest is unavailable.
+ *
+ * @param fonts - The typography.fonts record from ConfiguratorState.
+ * @param manifestUrl - URL of the font manifest (e.g., Supabase Storage public URL).
+ * @returns Map of fontFamily → FontRuntimeMetrics.
+ */
+export async function lookupFontMetrics(
+  fonts: Record<FontScope, FontSlot> | undefined,
+  manifestUrl: string | undefined,
+): Promise<Record<string, FontRuntimeMetrics>> {
+  if (!fonts || !manifestUrl) return {};
+
+  try {
+    const res = await fetch(manifestUrl);
+    if (!res.ok) return {};
+    const manifest = await res.json();
+
+    const result: Record<string, FontRuntimeMetrics> = {};
+    const seen = new Set<string>();
+
+    for (const slot of Object.values(fonts) as FontSlot[]) {
+      const family = slot.config.family;
+      if (seen.has(family)) continue;
+      seen.add(family);
+
+      const entry = manifest.families?.[family];
+      if (entry?.metrics) {
+        result[family] = {
+          naturalLineHeightRatio: entry.metrics.naturalLineHeightRatio,
+          verticalCenterOffset: entry.metrics.verticalCenterOffset,
+          features: entry.metrics.features ?? [],
+        };
+      }
+    }
+
+    return result;
+  } catch {
+    return {};
+  }
+}

package/src/utils/measureFonts.ts

@@ -0,0 +1,41 @@
+import type { FontScope } from '@newtonedev/fonts';
+import type { FontSlot } from '@newtonedev/components';
+import { measureAvgCharWidth } from '@newtonedev/components';
+
+/**
+ * Measure avgCharWidth ratios for all font scopes at publish time.
+ *
+ * Deduplicates by font family name so a font used in multiple scopes is
+ * measured only once. Waits for fonts to load via `document.fonts.ready`
+ * before measuring, since the editor always preloads fonts for preview.
+ *
+ * Called in `handlePublish` before writing to persistence so that calibration
+ * data is included in the published config served to consumer sites.
+ *
+ * @param fonts - The typography.fonts record from ConfiguratorState.
+ * @returns Map of fontFamily → avgCharWidthRatio (e.g. `{ "Inter": 0.52 }`).
+ *          Returns empty object if called outside a browser context.
+ */
+export async function measureFontCalibrations(
+  fonts: Record<FontScope, FontSlot> | undefined,
+): Promise<Record<string, number>> {
+  if (!fonts || typeof document === 'undefined') return {};
+
+  const calibrations: Record<string, number> = {};
+  const seen = new Set<string>();
+
+  for (const slot of Object.values(fonts) as FontSlot[]) {
+    const { family, fallback } = slot.config;
+    if (seen.has(family)) continue;
+    seen.add(family);
+
+    const ratio = await measureAvgCharWidth(
+      family,
+      slot.weights.regular,
+      fallback,
+    );
+    calibrations[family] = ratio;
+  }
+
+  return calibrations;
+}