@newtonedev/editor 0.1.12 → 0.2.1

package/src/components/PresetSelector.tsx

@@ -1,13 +1,13 @@
 import { useState, useRef, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { useTokens, Icon } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
 import type { Preset } from "../types";
 import { presetHasUnpublishedChanges } from "../utils/presets";
 
 interface PresetSelectorProps {
   readonly presets: readonly Preset[];
   readonly activePresetId: string;
-  readonly publishedPresetId: string | null;
+  readonly defaultVariantId: string | null;
   readonly onSwitchPreset: (presetId: string) => void;
   readonly onCreatePreset: (name: string) => Promise<string>;
   readonly onRenamePreset: (presetId: string, name: string) => void;
@@ -16,49 +16,64 @@ interface PresetSelectorProps {
     presetId: string,
     name: string,
   ) => Promise<string>;
+  readonly onSetDefaultVariant: (presetId: string) => void;
 }
 
 export function PresetSelector({
   presets,
   activePresetId,
-  publishedPresetId,
+  defaultVariantId,
   onSwitchPreset,
   onCreatePreset,
   onRenamePreset,
   onDeletePreset,
   onDuplicatePreset,
+  onSetDefaultVariant,
 }: PresetSelectorProps) {
   const tokens = useTokens();
   const [isOpen, setIsOpen] = useState(false);
   const [renamingId, setRenamingId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState("");
   const [menuOpenId, setMenuOpenId] = useState<string | null>(null);
+  const [menuPos, setMenuPos] = useState<{ top: number; left: number } | null>(
+    null,
+  );
+  const [dropdownPos, setDropdownPos] = useState<{ top: number; left: number } | null>(null);
   const [hoveredId, setHoveredId] = useState<string | null>(null);
   const [hoveredAction, setHoveredAction] = useState<string | null>(null);
+  const triggerAreaRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
   const renameInputRef = useRef<HTMLInputElement>(null);
 
   const activePreset = presets.find((p) => p.id === activePresetId);
 
-  const borderColor = srgbToHex(tokens.border.srgb);
-  const bgColor = srgbToHex(tokens.background.srgb);
-  const textPrimary = srgbToHex(tokens.textPrimary.srgb);
-  const textSecondary = srgbToHex(tokens.textSecondary.srgb);
-  const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
-  const warningColor = srgbToHex(tokens.warning.fill.srgb);
-  const errorColor = srgbToHex(tokens.error.fill.srgb);
+  const borderColor = tokens.colors.primary.main.fontDisabled;
+  const bgColor = tokens.colors.primary.main.background;
+  const textPrimary = tokens.colors.primary.main.fontPrimary;
+  const textSecondary = tokens.colors.primary.main.fontTertiary;
+  const interactiveColor = tokens.colors.secondary.emphasis.fontPrimary;
+  const warningColor = tokens.colors.warning.emphasis.fontPrimary;
+  const errorColor = tokens.colors.error.emphasis.fontPrimary;
   const hoverBg = `${borderColor}18`;
   const activeBg = `${interactiveColor}14`;
 
+  // Close dropdown + context menu on outside click
   useEffect(() => {
     if (!isOpen) return;
     const handleClickOutside = (e: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(e.target as Node)
-      ) {
+      const target = e.target as Node;
+      const inTrigger =
+        triggerAreaRef.current && triggerAreaRef.current.contains(target);
+      const inDropdown =
+        dropdownRef.current && dropdownRef.current.contains(target);
+      const inMenu = menuRef.current && menuRef.current.contains(target);
+      if (!inTrigger && !inDropdown && !inMenu) {
         setIsOpen(false);
+        setDropdownPos(null);
         setMenuOpenId(null);
+        setMenuPos(null);
         setRenamingId(null);
       }
     };
@@ -73,20 +88,26 @@ export function PresetSelector({
     }
   }, [renamingId]);
 
+  const closeMenu = useCallback(() => {
+    setMenuOpenId(null);
+    setMenuPos(null);
+  }, []);
+
   const handleCreate = useCallback(async () => {
-    const name = `Preset ${presets.length + 1}`;
+    const name = `Variant ${presets.length + 1}`;
     const newId = await onCreatePreset(name);
     onSwitchPreset(newId);
     setIsOpen(false);
+    setDropdownPos(null);
   }, [presets.length, onCreatePreset, onSwitchPreset]);
 
   const handleStartRename = useCallback(
     (presetId: string, currentName: string) => {
       setRenamingId(presetId);
       setRenameValue(currentName);
-      setMenuOpenId(null);
+      closeMenu();
     },
-    [],
+    [closeMenu],
   );
 
   const handleCommitRename = useCallback(() => {
@@ -102,25 +123,59 @@ export function PresetSelector({
       if (window.confirm("Delete this preset? This cannot be undone.")) {
         await onDeletePreset(presetId);
       }
-      setMenuOpenId(null);
+      closeMenu();
     },
-    [presets.length, onDeletePreset],
+    [presets.length, onDeletePreset, closeMenu],
   );
 
   const handleDuplicate = useCallback(
     async (presetId: string, sourceName: string) => {
       const newId = await onDuplicatePreset(presetId, `${sourceName} (copy)`);
       onSwitchPreset(newId);
-      setMenuOpenId(null);
+      closeMenu();
       setIsOpen(false);
+      setDropdownPos(null);
     },
-    [onDuplicatePreset, onSwitchPreset],
+    [onDuplicatePreset, onSwitchPreset, closeMenu],
   );
 
+  const openMenu = useCallback(
+    (presetId: string, button: HTMLElement) => {
+      if (menuOpenId === presetId) {
+        closeMenu();
+        return;
+      }
+      const rect = button.getBoundingClientRect();
+      setMenuPos({ top: rect.bottom + 4, left: rect.right + 4 });
+      setMenuOpenId(presetId);
+      setHoveredAction(null);
+    },
+    [menuOpenId, closeMenu],
+  );
+
+  const menuPreset = menuOpenId
+    ? presets.find((p) => p.id === menuOpenId)
+    : null;
+  const menuIsDefault = menuOpenId === defaultVariantId;
+
+  const toggleDropdown = useCallback(() => {
+    if (isOpen) {
+      setIsOpen(false);
+      setDropdownPos(null);
+    } else {
+      if (triggerRef.current) {
+        const rect = triggerRef.current.getBoundingClientRect();
+        setDropdownPos({ top: rect.bottom + 4, left: rect.left });
+      }
+      setIsOpen(true);
+    }
+  }, [isOpen]);
+
   return (
-    <div ref={dropdownRef} style={{ position: "relative" }}>
+    <div ref={triggerAreaRef} style={{ position: "relative" }}>
       <button
-        onClick={() => setIsOpen(!isOpen)}
+        ref={triggerRef}
+        onClick={toggleDropdown}
         style={{
           display: "flex",
           alignItems: "center",
@@ -156,25 +211,26 @@ export function PresetSelector({
         />
       </button>
 
-      {isOpen && (
+      {isOpen && dropdownPos && createPortal(
         <div
+          ref={dropdownRef}
           style={{
-            position: "absolute",
-            top: "calc(100% + 4px)",
-            left: 0,
+            position: "fixed",
+            top: dropdownPos.top,
+            left: dropdownPos.left,
             width: 260,
             backgroundColor: bgColor,
             border: `1px solid ${borderColor}`,
             borderRadius: 8,
             boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
-            zIndex: 100,
+            zIndex: 10000,
             overflow: "hidden",
           }}
         >
           <div style={{ maxHeight: 240, overflowY: "auto", padding: "4px 0" }}>
             {presets.map((preset) => {
               const isActive = preset.id === activePresetId;
-              const isPublishedPreset = preset.id === publishedPresetId;
+              const isDefaultVariant = preset.id === defaultVariantId;
               const hasChanges = presetHasUnpublishedChanges(preset);
               const isHovered = hoveredId === preset.id;
               const isRenaming = renamingId === preset.id;
@@ -226,6 +282,7 @@ export function PresetSelector({
                         onClick={() => {
                           onSwitchPreset(preset.id);
                           setIsOpen(false);
+                          setDropdownPos(null);
                         }}
                         style={{
                           flex: 1,
@@ -259,7 +316,7 @@ export function PresetSelector({
                             }}
                           />
                         )}
-                        {isPublishedPreset && (
+                        {isDefaultVariant && (
                           <span
                             style={{
                               fontSize: 10,
@@ -272,7 +329,7 @@ export function PresetSelector({
                               lineHeight: "14px",
                             }}
                           >
-                            API
+                            Default
                           </span>
                         )}
                       </div>
@@ -281,7 +338,7 @@ export function PresetSelector({
                         <button
                           onClick={(e) => {
                             e.stopPropagation();
-                            setMenuOpenId(isMenuShown ? null : preset.id);
+                            openMenu(preset.id, e.currentTarget);
                           }}
                           style={{
                             display: "flex",
@@ -297,105 +354,15 @@ export function PresetSelector({
                             flexShrink: 0,
                           }}
                         >
-                          <Icon name="more_vert" size={14} color={textSecondary} />
+                          <Icon
+                            name="more_vert"
+                            size={14}
+                            color={textSecondary}
+                          />
                         </button>
                       )}
                     </>
                   )}
-
-                  {isMenuShown && !isRenaming && (
-                    <div
-                      style={{
-                        position: "absolute",
-                        top: 0,
-                        right: -140,
-                        width: 130,
-                        backgroundColor: bgColor,
-                        border: `1px solid ${borderColor}`,
-                        borderRadius: 6,
-                        boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
-                        zIndex: 101,
-                        overflow: "hidden",
-                      }}
-                    >
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleStartRename(preset.id, preset.name);
-                        }}
-                        onMouseEnter={() => setHoveredAction("rename")}
-                        onMouseLeave={() => setHoveredAction(null)}
-                        style={{
-                          display: "block",
-                          width: "100%",
-                          padding: "8px 12px",
-                          border: "none",
-                          backgroundColor:
-                            hoveredAction === "rename"
-                              ? hoverBg
-                              : "transparent",
-                          color: textPrimary,
-                          fontSize: 12,
-                          textAlign: "left",
-                          cursor: "pointer",
-                        }}
-                      >
-                        Rename
-                      </button>
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleDuplicate(preset.id, preset.name);
-                        }}
-                        onMouseEnter={() => setHoveredAction("duplicate")}
-                        onMouseLeave={() => setHoveredAction(null)}
-                        style={{
-                          display: "block",
-                          width: "100%",
-                          padding: "8px 12px",
-                          border: "none",
-                          backgroundColor:
-                            hoveredAction === "duplicate"
-                              ? hoverBg
-                              : "transparent",
-                          color: textPrimary,
-                          fontSize: 12,
-                          textAlign: "left",
-                          cursor: "pointer",
-                        }}
-                      >
-                        Duplicate
-                      </button>
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleDelete(preset.id);
-                        }}
-                        onMouseEnter={() => setHoveredAction("delete")}
-                        onMouseLeave={() => setHoveredAction(null)}
-                        disabled={presets.length <= 1}
-                        style={{
-                          display: "block",
-                          width: "100%",
-                          padding: "8px 12px",
-                          border: "none",
-                          backgroundColor:
-                            hoveredAction === "delete"
-                              ? hoverBg
-                              : "transparent",
-                          color:
-                            presets.length <= 1 ? textSecondary : errorColor,
-                          fontSize: 12,
-                          textAlign: "left",
-                          cursor:
-                            presets.length <= 1 ? "not-allowed" : "pointer",
-                          opacity: presets.length <= 1 ? 0.5 : 1,
-                        }}
-                      >
-                        Delete
-                      </button>
-                    </div>
-                  )}
                 </div>
               );
             })}
@@ -421,9 +388,124 @@ export function PresetSelector({
             }}
           >
             <Icon name="add" size={14} color={textSecondary} />
-            New preset
+            New variant
+          </button>
+        </div>,
+        document.body,
+      )}
+
+      {/* Context menu — rendered outside the overflow:hidden dropdown panel */}
+      {menuOpenId && menuPreset && menuPos && createPortal(
+        <div
+          ref={menuRef}
+          style={{
+            position: "fixed",
+            top: menuPos.top,
+            left: menuPos.left,
+            width: 140,
+            backgroundColor: bgColor,
+            border: `1px solid ${borderColor}`,
+            borderRadius: 6,
+            boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
+            zIndex: 10000,
+            overflow: "hidden",
+          }}
+        >
+          {!menuIsDefault && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onSetDefaultVariant(menuOpenId);
+                closeMenu();
+              }}
+              onMouseEnter={() => setHoveredAction("default")}
+              onMouseLeave={() => setHoveredAction(null)}
+              style={{
+                display: "block",
+                width: "100%",
+                padding: "8px 12px",
+                border: "none",
+                backgroundColor:
+                  hoveredAction === "default" ? hoverBg : "transparent",
+                color: textPrimary,
+                fontSize: 12,
+                textAlign: "left",
+                cursor: "pointer",
+              }}
+            >
+              Make default
+            </button>
+          )}
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              handleStartRename(menuPreset.id, menuPreset.name);
+            }}
+            onMouseEnter={() => setHoveredAction("rename")}
+            onMouseLeave={() => setHoveredAction(null)}
+            style={{
+              display: "block",
+              width: "100%",
+              padding: "8px 12px",
+              border: "none",
+              backgroundColor:
+                hoveredAction === "rename" ? hoverBg : "transparent",
+              color: textPrimary,
+              fontSize: 12,
+              textAlign: "left",
+              cursor: "pointer",
+            }}
+          >
+            Rename
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDuplicate(menuPreset.id, menuPreset.name);
+            }}
+            onMouseEnter={() => setHoveredAction("duplicate")}
+            onMouseLeave={() => setHoveredAction(null)}
+            style={{
+              display: "block",
+              width: "100%",
+              padding: "8px 12px",
+              border: "none",
+              backgroundColor:
+                hoveredAction === "duplicate" ? hoverBg : "transparent",
+              color: textPrimary,
+              fontSize: 12,
+              textAlign: "left",
+              cursor: "pointer",
+            }}
+          >
+            Duplicate
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDelete(menuPreset.id);
+            }}
+            onMouseEnter={() => setHoveredAction("delete")}
+            onMouseLeave={() => setHoveredAction(null)}
+            disabled={presets.length <= 1}
+            style={{
+              display: "block",
+              width: "100%",
+              padding: "8px 12px",
+              border: "none",
+              backgroundColor:
+                hoveredAction === "delete" ? hoverBg : "transparent",
+              color: presets.length <= 1 ? textSecondary : errorColor,
+              fontSize: 12,
+              textAlign: "left",
+              cursor: presets.length <= 1 ? "not-allowed" : "pointer",
+              opacity: presets.length <= 1 ? 0.5 : 1,
+            }}
+          >
+            Delete
           </button>
-        </div>
+        </div>,
+        document.body,
       )}
     </div>
   );

package/src/components/PreviewWindow.tsx

@@ -1,6 +1,5 @@
 import { useCallback } from "react";
-import { useTokens } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
+import { Frame } from "@newtonedev/components";
 import type { TextRole } from "@newtonedev/fonts";
 import { OverviewView } from "../preview/OverviewView";
 import { CategoryView } from "../preview/CategoryView";
@@ -32,8 +31,6 @@ export function PreviewWindow({
   fontCatalog,
   scopeFontMap,
 }: PreviewWindowProps) {
-  const tokens = useTokens();
-
   const handleNavigateToCategory = useCallback(
     (categoryId: string) => onNavigate({ kind: "category", categoryId }),
     [onNavigate],
@@ -45,13 +42,9 @@ export function PreviewWindow({
   );
 
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        backgroundColor: srgbToHex(tokens.background.srgb),
-      }}
+    <Frame
+      direction="vertical"
+      height="fill"
     >
       <div style={{ flex: 1, overflowY: "auto" }}>
         {view.kind === "overview" && (
@@ -80,6 +73,6 @@ export function PreviewWindow({
           />
         )}
       </div>
-    </div>
+    </Frame>
   );
 }

package/src/components/PrimaryNav.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { useState } from "react";
 import { useTokens, Icon, CATEGORIES } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
+
 
 interface PrimaryNavProps {
   readonly activeSectionId: string | null;
@@ -15,11 +15,11 @@ export function PrimaryNav({ activeSectionId, onSelectSection, footer }: Primary
   const tokens = useTokens();
   const [hoveredId, setHoveredId] = useState<string | null>(null);
 
-  const bg = srgbToHex(tokens.background.srgb);
-  const borderColor = srgbToHex(tokens.border.srgb);
-  const activeBg = srgbToHex(tokens.backgroundInteractive.srgb);
-  const iconColor = srgbToHex(tokens.textSecondary.srgb);
-  const activeIconColor = srgbToHex(tokens.textPrimary.srgb);
+  const bg = tokens.colors.primary.main.background;
+  const borderColor = tokens.colors.primary.main.fontDisabled;
+  const activeBg = tokens.colors.primary.main.divider;
+  const iconColor = tokens.colors.primary.main.fontTertiary;
+  const activeIconColor = tokens.colors.primary.main.fontPrimary;
 
   return (
     <nav