@newtonedev/editor 0.1.1

package/src/components/PresetSelector.tsx

@@ -0,0 +1,455 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useTokens } 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 onSwitchPreset: (presetId: string) => void;
+  readonly onCreatePreset: (name: string) => Promise<string>;
+  readonly onRenamePreset: (presetId: string, name: string) => void;
+  readonly onDeletePreset: (presetId: string) => Promise<void>;
+  readonly onDuplicatePreset: (
+    presetId: string,
+    name: string,
+  ) => Promise<string>;
+}
+
+export function PresetSelector({
+  presets,
+  activePresetId,
+  publishedPresetId,
+  onSwitchPreset,
+  onCreatePreset,
+  onRenamePreset,
+  onDeletePreset,
+  onDuplicatePreset,
+}: 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 [hoveredId, setHoveredId] = useState<string | null>(null);
+  const [hoveredAction, setHoveredAction] = useState<string | null>(null);
+  const dropdownRef = 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.interactive.srgb);
+  const warningColor = srgbToHex(tokens.warning.srgb);
+  const errorColor = srgbToHex(tokens.error.srgb);
+  const hoverBg = `${borderColor}18`;
+  const activeBg = `${interactiveColor}14`;
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+        setMenuOpenId(null);
+        setRenamingId(null);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (renamingId && renameInputRef.current) {
+      renameInputRef.current.focus();
+      renameInputRef.current.select();
+    }
+  }, [renamingId]);
+
+  const handleCreate = useCallback(async () => {
+    const name = `Preset ${presets.length + 1}`;
+    const newId = await onCreatePreset(name);
+    onSwitchPreset(newId);
+    setIsOpen(false);
+  }, [presets.length, onCreatePreset, onSwitchPreset]);
+
+  const handleStartRename = useCallback(
+    (presetId: string, currentName: string) => {
+      setRenamingId(presetId);
+      setRenameValue(currentName);
+      setMenuOpenId(null);
+    },
+    [],
+  );
+
+  const handleCommitRename = useCallback(() => {
+    if (renamingId && renameValue.trim()) {
+      onRenamePreset(renamingId, renameValue.trim());
+    }
+    setRenamingId(null);
+  }, [renamingId, renameValue, onRenamePreset]);
+
+  const handleDelete = useCallback(
+    async (presetId: string) => {
+      if (presets.length <= 1) return;
+      if (window.confirm("Delete this preset? This cannot be undone.")) {
+        await onDeletePreset(presetId);
+      }
+      setMenuOpenId(null);
+    },
+    [presets.length, onDeletePreset],
+  );
+
+  const handleDuplicate = useCallback(
+    async (presetId: string, sourceName: string) => {
+      const newId = await onDuplicatePreset(presetId, `${sourceName} (copy)`);
+      onSwitchPreset(newId);
+      setMenuOpenId(null);
+      setIsOpen(false);
+    },
+    [onDuplicatePreset, onSwitchPreset],
+  );
+
+  return (
+    <div ref={dropdownRef} style={{ position: "relative" }}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "4px 10px",
+          borderRadius: 6,
+          border: `1px solid ${borderColor}`,
+          backgroundColor: "transparent",
+          color: textPrimary,
+          fontSize: 12,
+          fontWeight: 500,
+          cursor: "pointer",
+          maxWidth: 160,
+        }}
+      >
+        <span
+          style={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {activePreset?.name ?? "Default"}
+        </span>
+        <svg
+          width={10}
+          height={10}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          style={{
+            transform: isOpen ? "rotate(180deg)" : "none",
+            transition: "transform 150ms ease",
+            flexShrink: 0,
+          }}
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div
+          style={{
+            position: "absolute",
+            top: "calc(100% + 4px)",
+            left: 0,
+            width: 260,
+            backgroundColor: bgColor,
+            border: `1px solid ${borderColor}`,
+            borderRadius: 8,
+            boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+            zIndex: 100,
+            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 hasChanges = presetHasUnpublishedChanges(preset);
+              const isHovered = hoveredId === preset.id;
+              const isRenaming = renamingId === preset.id;
+              const isMenuShown = menuOpenId === preset.id;
+
+              return (
+                <div
+                  key={preset.id}
+                  onMouseEnter={() => setHoveredId(preset.id)}
+                  onMouseLeave={() => setHoveredId(null)}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    padding: "6px 12px",
+                    backgroundColor: isActive
+                      ? activeBg
+                      : isHovered
+                        ? hoverBg
+                        : "transparent",
+                    cursor: isRenaming ? "default" : "pointer",
+                    transition: "background-color 100ms ease",
+                    position: "relative",
+                  }}
+                >
+                  {isRenaming ? (
+                    <input
+                      ref={renameInputRef}
+                      value={renameValue}
+                      onChange={(e) => setRenameValue(e.target.value)}
+                      onBlur={handleCommitRename}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") handleCommitRename();
+                        if (e.key === "Escape") setRenamingId(null);
+                      }}
+                      style={{
+                        flex: 1,
+                        fontSize: 13,
+                        padding: "2px 6px",
+                        border: `1px solid ${interactiveColor}`,
+                        borderRadius: 4,
+                        backgroundColor: bgColor,
+                        color: textPrimary,
+                        outline: "none",
+                      }}
+                    />
+                  ) : (
+                    <>
+                      <div
+                        onClick={() => {
+                          onSwitchPreset(preset.id);
+                          setIsOpen(false);
+                        }}
+                        style={{
+                          flex: 1,
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 6,
+                          minWidth: 0,
+                        }}
+                      >
+                        <span
+                          style={{
+                            fontSize: 13,
+                            fontWeight: isActive ? 600 : 400,
+                            color: textPrimary,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                          }}
+                        >
+                          {preset.name}
+                        </span>
+                        {hasChanges && (
+                          <span
+                            title="Unpublished changes"
+                            style={{
+                              width: 6,
+                              height: 6,
+                              borderRadius: "50%",
+                              backgroundColor: warningColor,
+                              flexShrink: 0,
+                            }}
+                          />
+                        )}
+                        {isPublishedPreset && (
+                          <span
+                            style={{
+                              fontSize: 10,
+                              fontWeight: 600,
+                              color: interactiveColor,
+                              padding: "1px 4px",
+                              borderRadius: 3,
+                              border: `1px solid ${interactiveColor}`,
+                              flexShrink: 0,
+                              lineHeight: "14px",
+                            }}
+                          >
+                            API
+                          </span>
+                        )}
+                      </div>
+
+                      {(isHovered || isMenuShown) && (
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setMenuOpenId(isMenuShown ? null : preset.id);
+                          }}
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: 24,
+                            height: 24,
+                            border: "none",
+                            background: "none",
+                            color: textSecondary,
+                            cursor: "pointer",
+                            borderRadius: 4,
+                            flexShrink: 0,
+                          }}
+                        >
+                          <svg
+                            width={14}
+                            height={14}
+                            viewBox="0 0 24 24"
+                            fill="currentColor"
+                          >
+                            <circle cx={12} cy={5} r={2} />
+                            <circle cx={12} cy={12} r={2} />
+                            <circle cx={12} cy={19} r={2} />
+                          </svg>
+                        </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>
+              );
+            })}
+          </div>
+
+          <button
+            onClick={handleCreate}
+            onMouseEnter={() => setHoveredAction("create")}
+            onMouseLeave={() => setHoveredAction(null)}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              width: "100%",
+              padding: "10px 12px",
+              border: "none",
+              borderTop: `1px solid ${borderColor}`,
+              backgroundColor:
+                hoveredAction === "create" ? hoverBg : "transparent",
+              color: textSecondary,
+              fontSize: 13,
+              cursor: "pointer",
+            }}
+          >
+            <svg
+              width={14}
+              height={14}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <line x1={12} y1={5} x2={12} y2={19} />
+              <line x1={5} y1={12} x2={19} y2={12} />
+            </svg>
+            New preset
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/PreviewWindow.tsx

@@ -0,0 +1,69 @@
+import { useCallback } from "react";
+import { useTokens } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import { OverviewView } from "../preview/OverviewView";
+import { CategoryView } from "../preview/CategoryView";
+import { ComponentDetailView } from "../preview/ComponentDetailView";
+import type { PreviewView } from "../types";
+
+interface PreviewWindowProps {
+  readonly view: PreviewView;
+  readonly selectedVariantId: string | null;
+  readonly propOverrides?: Record<string, unknown>;
+  readonly onNavigate: (view: PreviewView) => void;
+  readonly onSelectVariant: (variantId: string) => void;
+}
+
+export function PreviewWindow({
+  view,
+  selectedVariantId,
+  propOverrides,
+  onNavigate,
+  onSelectVariant,
+}: PreviewWindowProps) {
+  const tokens = useTokens();
+
+  const handleNavigateToCategory = useCallback(
+    (categoryId: string) => onNavigate({ kind: "category", categoryId }),
+    [onNavigate],
+  );
+
+  const handleNavigateToComponent = useCallback(
+    (componentId: string) => onNavigate({ kind: "component", componentId }),
+    [onNavigate],
+  );
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        backgroundColor: srgbToHex(tokens.background.srgb),
+      }}
+    >
+      <div style={{ flex: 1, overflowY: "auto" }}>
+        {view.kind === "overview" && (
+          <OverviewView
+            onNavigateToCategory={handleNavigateToCategory}
+            onNavigateToComponent={handleNavigateToComponent}
+          />
+        )}
+        {view.kind === "category" && (
+          <CategoryView
+            categoryId={view.categoryId}
+            onNavigateToComponent={handleNavigateToComponent}
+          />
+        )}
+        {view.kind === "component" && (
+          <ComponentDetailView
+            componentId={view.componentId}
+            selectedVariantId={selectedVariantId}
+            propOverrides={propOverrides}
+            onSelectVariant={onSelectVariant}
+          />
+        )}
+      </div>
+    </div>
+  );
+}