@newtonedev/editor 0.1.5 → 0.1.7

package/src/preview/ComponentDetailView.tsx

@@ -1,29 +1,367 @@
-import { useState } from "react";
-import { useTokens } from "@newtonedev/components";
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import { useTokens, useNewtoneTheme, NewtoneProvider } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
 import { getComponent } from "@newtonedev/components";
+import type { TextRole, BreakpointKey, TextSize, RoleScales } from "@newtonedev/fonts";
+import { ROLE_DEFAULT_WEIGHTS, BREAKPOINT_ROLE_SCALE, scaleRoleStep, resolveResponsiveSize } from "@newtonedev/fonts";
 import { ComponentRenderer } from "./ComponentRenderer";
+import { IconBrowserView } from "./IconBrowserView";
+import type { EditorFontEntry } from "../types";
+
+/** Variant IDs that map to unique text roles and get inline weight controls. */
+const ROLE_VARIANT_IDS = new Set([
+  "body",
+  "headline",
+  "title",
+  "heading",
+  "subheading",
+  "label",
+  "caption",
+]);
 
 interface ComponentDetailViewProps {
   readonly componentId: string;
   readonly selectedVariantId: string | null;
-  readonly propOverrides?: Record<string, unknown>;
   readonly onSelectVariant: (variantId: string) => void;
+  readonly propOverrides?: Record<string, unknown>;
+  readonly onPropOverride?: (name: string, value: unknown) => void;
+  readonly roleWeights?: Partial<Record<TextRole, number>>;
+  readonly onRoleWeightChange?: (role: TextRole, weight: number) => void;
+  readonly fontCatalog?: readonly EditorFontEntry[];
+  readonly scopeFontMap?: Record<string, string>;
+}
+
+/**
+ * Determine what kind of weight control to show for a font.
+ * Returns 'slider' for variable fonts (smooth) and fixed-weight fonts (with stops),
+ * or 'none' for single-weight fonts.
+ */
+function getWeightControlType(
+  family: string | undefined,
+  fontCatalog: readonly EditorFontEntry[] | undefined,
+): { type: "slider"; min: number; max: number; stops?: readonly number[] } | { type: "none" } {
+  if (!family) return { type: "none" };
+
+  const entry = fontCatalog?.find((f) => f.family === family);
+
+  if (entry) {
+    if (entry.isVariable) {
+      return {
+        type: "slider",
+        min: entry.weightAxisRange?.min ?? 100,
+        max: entry.weightAxisRange?.max ?? 900,
+      };
+    }
+    if (entry.availableWeights && entry.availableWeights.length > 1) {
+      const sorted = [...entry.availableWeights].sort((a, b) => a - b);
+      return { type: "slider", min: sorted[0], max: sorted[sorted.length - 1], stops: sorted };
+    }
+    return { type: "none" };
+  }
+
+  // Not in catalog — system font or unknown → treat as variable
+  return { type: "slider", min: 100, max: 900 };
+}
+
+/**
+ * Unified weight slider. Smooth for variable fonts, snaps to stops for fixed-weight fonts.
+ * Renders tick marks when stops are provided.
+ */
+function WeightSlider({
+  value,
+  min,
+  max,
+  stops,
+  onChange,
+  textColor,
+  accentColor,
+}: {
+  readonly value: number;
+  readonly min: number;
+  readonly max: number;
+  readonly stops?: readonly number[];
+  readonly onChange: (v: number) => void;
+  readonly textColor: string;
+  readonly accentColor: string;
+}) {
+  const snap = useCallback(
+    (v: number) => {
+      if (!stops) return v;
+      return stops.reduce((prev, curr) =>
+        Math.abs(curr - v) < Math.abs(prev - v) ? curr : prev,
+      );
+    },
+    [stops],
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange(snap(Number(e.target.value)));
+    },
+    [onChange, snap],
+  );
+
+  const range = max - min;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        flexShrink: 0,
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div style={{ position: "relative", width: 80 }}>
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={1}
+          value={value}
+          onChange={handleChange}
+          style={{
+            width: 80,
+            accentColor,
+            cursor: "pointer",
+            display: "block",
+          }}
+        />
+        {stops && range > 0 && (
+          <div
+            style={{
+              position: "relative",
+              width: 80,
+              height: 4,
+              marginTop: -2,
+              pointerEvents: "none",
+            }}
+          >
+            {stops.map((s) => (
+              <div
+                key={s}
+                style={{
+                  position: "absolute",
+                  left: `${((s - min) / range) * 100}%`,
+                  width: 2,
+                  height: 4,
+                  backgroundColor: s === value ? accentColor : textColor,
+                  opacity: s === value ? 1 : 0.3,
+                  borderRadius: 1,
+                  transform: "translateX(-50%)",
+                }}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+      <span
+        style={{
+          fontSize: 11,
+          fontWeight: 500,
+          color: textColor,
+          width: 28,
+          textAlign: "right",
+          fontVariantNumeric: "tabular-nums",
+        }}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
+
+const PREVIEW_TEXT = "The quick brown fox";
+
+/**
+ * Measures its container width via ResizeObserver and displays the live
+ * resolved fontSize/lineHeight from resolveResponsiveSize.
+ */
+function TextAnnotation({
+  role,
+  roleScales,
+  fontFamily,
+  calibrations,
+  weight,
+  textColor,
+  accentColor,
+  previewText = PREVIEW_TEXT,
+}: {
+  readonly role: TextRole;
+  readonly roleScales: RoleScales;
+  readonly fontFamily?: string;
+  readonly calibrations?: Record<string, number>;
+  readonly weight: number;
+  readonly textColor: string;
+  readonly accentColor: string;
+  readonly previewText?: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState<number | null>(null);
+
+  useEffect(() => {
+    const el = containerRef.current?.parentElement;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width;
+      if (w && w > 0) setContainerWidth(w);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const step = roleScales[role].md;
+  const minFs = Math.max(8, Math.round(step.fontSize * 0.7));
+  const maxFs = step.fontSize;
+
+  const resolved = useMemo(() => {
+    if (containerWidth == null) return { fontSize: maxFs, lineHeight: step.lineHeight };
+    return resolveResponsiveSize(
+      {
+        role,
+        size: "md" as TextSize,
+        responsive: true,
+        fontFamily,
+        maxFontSize: maxFs,
+        minFontSize: minFs,
+      },
+      roleScales,
+      { containerWidth, characterCount: previewText.length },
+      calibrations,
+    );
+  }, [role, step, roleScales, fontFamily, calibrations, containerWidth, minFs, maxFs]);
+
+  const range = maxFs - minFs;
+  const position = range > 0 ? ((resolved.fontSize - minFs) / range) * 100 : 100;
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        marginTop: 4,
+        fontSize: 10,
+        color: textColor,
+        fontVariantNumeric: "tabular-nums",
+        letterSpacing: 0.2,
+      }}
+    >
+      <span>{resolved.fontSize}/{resolved.lineHeight} · {weight}</span>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          marginTop: 3,
+        }}
+      >
+        <span style={{ width: 16, textAlign: "right", flexShrink: 0 }}>{minFs}</span>
+        <div
+          style={{
+            flex: 1,
+            height: 1,
+            backgroundColor: textColor,
+            opacity: 0.3,
+            position: "relative",
+          }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              left: `${position}%`,
+              top: "50%",
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              backgroundColor: accentColor,
+              transform: "translate(-50%, -50%)",
+            }}
+          />
+        </div>
+        <span style={{ width: 16, flexShrink: 0 }}>{maxFs}</span>
+      </div>
+    </div>
+  );
 }
 
 export function ComponentDetailView({
   componentId,
   selectedVariantId,
-  propOverrides,
   onSelectVariant,
+  propOverrides,
+  onPropOverride,
+  roleWeights,
+  onRoleWeightChange,
+  fontCatalog,
+  scopeFontMap,
 }: ComponentDetailViewProps) {
   const tokens = useTokens();
+  const { config } = useNewtoneTheme();
   const component = getComponent(componentId);
   const [hoveredId, setHoveredId] = useState<string | null>(null);
+  const [previewBreakpoint, setPreviewBreakpoint] = useState<BreakpointKey>("lg");
+  const [previewText, setPreviewText] = useState(PREVIEW_TEXT);
+
+  const scaledConfig = useMemo(() => {
+    if (previewBreakpoint === "lg") return config;
+    const scales = BREAKPOINT_ROLE_SCALE[previewBreakpoint];
+    const baseRoles = config.typography.roles;
+    const scaledRoles = {} as Record<string, Record<string, { fontSize: number; lineHeight: number }>>;
+    for (const role of Object.keys(baseRoles) as TextRole[]) {
+      const scale = scales[role];
+      scaledRoles[role] = {} as Record<string, { fontSize: number; lineHeight: number }>;
+      for (const size of ["sm", "md", "lg"] as TextSize[]) {
+        const step = baseRoles[role][size];
+        scaledRoles[role][size] = scale === 1.0 ? step : scaleRoleStep(step, scale);
+      }
+    }
+    return { ...config, typography: { ...config.typography, roles: scaledRoles as unknown as typeof config.typography.roles } };
+  }, [config, previewBreakpoint]);
 
   if (!component) return null;
 
+  if (componentId === "icon" && propOverrides && onPropOverride) {
+    return (
+      <div
+        style={{
+          padding: "32px 0 0",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <div style={{ padding: "0 32px", marginBottom: 24 }}>
+          <h2
+            style={{
+              fontSize: 22,
+              fontWeight: 700,
+              color: srgbToHex(tokens.textPrimary.srgb),
+              margin: 0,
+              marginBottom: 4,
+            }}
+          >
+            {component.name}
+          </h2>
+          <p
+            style={{
+              fontSize: 14,
+              color: srgbToHex(tokens.textSecondary.srgb),
+              margin: 0,
+            }}
+          >
+            {component.description}
+          </p>
+        </div>
+        <IconBrowserView
+          selectedIconName={(propOverrides.name as string) ?? "add"}
+          onIconSelect={(name) => onPropOverride("name", name)}
+        />
+      </div>
+    );
+  }
+
   const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
+  const isTextComponent = componentId === "text";
 
   return (
     <div style={{ padding: 32 }}>
@@ -43,84 +381,249 @@ export function ComponentDetailView({
           fontSize: 14,
           color: srgbToHex(tokens.textSecondary.srgb),
           margin: 0,
-          marginBottom: 32,
+          marginBottom: isTextComponent ? 16 : 32,
         }}
       >
         {component.description}
       </p>
 
-      <div
-        style={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
-          gap: 16,
-        }}
-      >
-        {component.variants.map((variant) => {
-          const isSelected = selectedVariantId === variant.id;
-          const isHovered = hoveredId === variant.id;
-
-          const borderColor = isSelected
-            ? interactiveColor
-            : isHovered
-              ? `${interactiveColor}66`
-              : srgbToHex(tokens.border.srgb);
-
-          return (
-            <button
-              key={variant.id}
-              onClick={() => onSelectVariant(variant.id)}
-              onMouseEnter={() => setHoveredId(variant.id)}
-              onMouseLeave={() => setHoveredId(null)}
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "stretch",
-                padding: 16,
-                borderRadius: 12,
-                border: `2px solid ${borderColor}`,
-                backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
-                cursor: "pointer",
-                textAlign: "left",
-                transition: "border-color 150ms ease",
-              }}
-            >
-              <div
+      {isTextComponent && (
+        <div style={{ display: "flex", flexDirection: "column", gap: 12, marginBottom: 16 }}>
+          <input
+            type="text"
+            value={previewText}
+            onChange={(e) => setPreviewText(e.target.value)}
+            placeholder={PREVIEW_TEXT}
+            style={{
+              width: "100%",
+              padding: "8px 12px",
+              fontSize: 14,
+              fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace",
+              color: srgbToHex(tokens.textPrimary.srgb),
+              backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+              border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+              borderRadius: 8,
+              boxSizing: "border-box",
+              outline: "none",
+            }}
+          />
+          <div style={{ display: "flex", gap: 2 }}>
+            {(["sm", "md", "lg"] as const).map((bp) => {
+              const isActive = previewBreakpoint === bp;
+              return (
+                <button
+                  key={bp}
+                  onClick={() => setPreviewBreakpoint(bp)}
+                  style={{
+                    padding: "4px 10px",
+                    fontSize: 11,
+                    fontWeight: isActive ? 600 : 400,
+                    color: isActive ? interactiveColor : srgbToHex(tokens.textSecondary.srgb),
+                    backgroundColor: isActive ? `${interactiveColor}18` : "transparent",
+                    border: `1px solid ${isActive ? interactiveColor : srgbToHex(tokens.border.srgb)}`,
+                    borderRadius: 4,
+                    cursor: "pointer",
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                  }}
+                >
+                  {bp}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {component.previewLayout === "list" ? (
+        <NewtoneProvider config={scaledConfig}>
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            {component.variants.map((variant) => {
+              const isSelected = selectedVariantId === variant.id;
+              const isHovered = hoveredId === variant.id;
+
+              const borderColor = isSelected
+                ? interactiveColor
+                : isHovered
+                  ? `${interactiveColor}66`
+                  : srgbToHex(tokens.border.srgb);
+
+              // Weight control for text roles
+              const showWeightControl =
+                isTextComponent &&
+                ROLE_VARIANT_IDS.has(variant.id) &&
+                onRoleWeightChange;
+
+              const role = variant.props.role as string | undefined;
+              const scope = (variant.props.scope as string) ?? "main";
+
+              let weightControl: React.ReactNode = null;
+              if (showWeightControl && role) {
+                const family = scopeFontMap?.[scope];
+                const controlInfo = getWeightControlType(family, fontCatalog);
+                const currentWeight =
+                  roleWeights?.[role as TextRole] ??
+                  ROLE_DEFAULT_WEIGHTS[role as TextRole] ??
+                  400;
+
+                if (controlInfo.type === "slider") {
+                  // Snap to closest stop for fixed-weight fonts
+                  const displayWeight = controlInfo.stops
+                    ? controlInfo.stops.reduce((prev, curr) =>
+                        Math.abs(curr - currentWeight) < Math.abs(prev - currentWeight) ? curr : prev,
+                      )
+                    : currentWeight;
+
+                  weightControl = (
+                    <WeightSlider
+                      value={displayWeight}
+                      min={controlInfo.min}
+                      max={controlInfo.max}
+                      stops={controlInfo.stops}
+                      onChange={(w) =>
+                        onRoleWeightChange(role as TextRole, w)
+                      }
+                      textColor={srgbToHex(tokens.textSecondary.srgb)}
+                      accentColor={interactiveColor}
+                    />
+                  );
+                }
+              }
+
+              return (
+                <button
+                  key={variant.id}
+                  onClick={() => onSelectVariant(variant.id)}
+                  onMouseEnter={() => setHoveredId(variant.id)}
+                  onMouseLeave={() => setHoveredId(null)}
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 16,
+                    padding: "12px 16px",
+                    borderRadius: 12,
+                    border: `2px solid ${borderColor}`,
+                    backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+                    cursor: "pointer",
+                    textAlign: "left",
+                    transition: "border-color 150ms ease",
+                  }}
+                >
+                  <span
+                    style={{
+                      fontSize: 11,
+                      fontWeight: 500,
+                      color: isSelected
+                        ? interactiveColor
+                        : srgbToHex(tokens.textSecondary.srgb),
+                      width: 88,
+                      flexShrink: 0,
+                      textTransform: "uppercase",
+                      letterSpacing: 0.5,
+                    }}
+                  >
+                    {variant.label}
+                  </span>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <ComponentRenderer
+                      componentId={componentId}
+                      props={variant.props}
+                      previewText={previewText}
+                    />
+                    {isTextComponent && role && scaledConfig.typography.roles[role as TextRole] && (
+                      <TextAnnotation
+                        role={role as TextRole}
+                        roleScales={scaledConfig.typography.roles}
+                        fontFamily={scopeFontMap?.[scope]}
+                        calibrations={scaledConfig.typography.calibrations}
+                        weight={
+                          roleWeights?.[role as TextRole] ??
+                          ROLE_DEFAULT_WEIGHTS[role as TextRole] ??
+                          400
+                        }
+                        textColor={srgbToHex(tokens.textTertiary.srgb)}
+                        accentColor={interactiveColor}
+                        previewText={previewText}
+                      />
+                    )}
+                  </div>
+                  {weightControl && <>{weightControl}</>}
+                </button>
+              );
+            })}
+          </div>
+        </NewtoneProvider>
+      ) : (
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+            gap: 16,
+          }}
+        >
+          {component.variants.map((variant) => {
+            const isSelected = selectedVariantId === variant.id;
+            const isHovered = hoveredId === variant.id;
+
+            const borderColor = isSelected
+              ? interactiveColor
+              : isHovered
+                ? `${interactiveColor}66`
+                : srgbToHex(tokens.border.srgb);
+
+            return (
+              <button
+                key={variant.id}
+                onClick={() => onSelectVariant(variant.id)}
+                onMouseEnter={() => setHoveredId(variant.id)}
+                onMouseLeave={() => setHoveredId(null)}
                 style={{
                   display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  padding: 20,
-                  marginBottom: 12,
-                  borderRadius: 8,
-                  backgroundColor: srgbToHex(tokens.background.srgb),
-                  minHeight: 56,
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  padding: 16,
+                  borderRadius: 12,
+                  border: `2px solid ${borderColor}`,
+                  backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+                  cursor: "pointer",
+                  textAlign: "left",
+                  transition: "border-color 150ms ease",
                 }}
               >
-                <ComponentRenderer
-                  componentId={componentId}
-                  props={
-                    isSelected && propOverrides
-                      ? { ...variant.props, ...propOverrides }
-                      : variant.props
-                  }
-                />
-              </div>
-              <span
-                style={{
-                  fontSize: 13,
-                  fontWeight: isSelected ? 600 : 500,
-                  color: isSelected
-                    ? interactiveColor
-                    : srgbToHex(tokens.textPrimary.srgb),
-                }}
-              >
-                {variant.label}
-              </span>
-            </button>
-          );
-        })}
-      </div>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: 20,
+                    marginBottom: 12,
+                    borderRadius: 8,
+                    backgroundColor: srgbToHex(tokens.background.srgb),
+                    minHeight: 56,
+                  }}
+                >
+                  <ComponentRenderer
+                    componentId={componentId}
+                    props={variant.props}
+                  />
+                </div>
+                <span
+                  style={{
+                    fontSize: 13,
+                    fontWeight: isSelected ? 600 : 500,
+                    color: isSelected
+                      ? interactiveColor
+                      : srgbToHex(tokens.textPrimary.srgb),
+                  }}
+                >
+                  {variant.label}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }