@newtonedev/editor 0.1.10 → 0.1.12

package/dist/index.js

@@ -264,11 +264,12 @@ function useEditorState({
   const [colorMode, setColorMode] = useState(
     initialState.preview.mode
   );
+  const defaultCategoryId = CATEGORIES[0]?.id ?? "colors";
   const [previewView, setPreviewView] = useState(
-    initialPreviewView ?? { kind: "overview" }
+    initialPreviewView ?? { kind: "category", categoryId: defaultCategoryId }
   );
   const [activeSectionId, setActiveSectionId] = useState(
-    CATEGORIES[0]?.id ?? "colors"
+    (initialPreviewView?.kind === "category" ? initialPreviewView.categoryId : void 0) ?? defaultCategoryId
   );
   const [sidebarSelection, setSidebarSelection] = useState(null);
   const [propOverrides, setPropOverrides] = useState(
@@ -368,11 +369,10 @@ function useEditorState({
     (sectionId) => {
       setActiveSectionId(sectionId);
       const sectionComponents = getComponentsByCategory(sectionId);
+      onNavigate?.({ kind: "category", categoryId: sectionId });
       if (sectionComponents.length === 1) {
         const comp = sectionComponents[0];
-        const view = { kind: "component", componentId: comp.id };
-        setPreviewView(view);
-        onNavigate?.(view);
+        setPreviewView({ kind: "component", componentId: comp.id });
         const firstVariantId = comp.variants[0]?.id;
         setSidebarSelection(
           firstVariantId ? { scope: "variant", componentId: comp.id, variantId: firstVariantId } : { scope: "component", componentId: comp.id }
@@ -381,7 +381,6 @@ function useEditorState({
       } else {
         const view = { kind: "category", categoryId: sectionId };
         setPreviewView(view);
-        onNavigate?.(view);
         setSidebarSelection(null);
         setPropOverrides({});
       }
@@ -637,6 +636,94 @@ function EditorShell({
     }
   );
 }
+var SIDEBAR_WIDTH2 = 360;
+function Sidebar({
+  isDirty,
+  onRevert
+}) {
+  const tokens = useTokens();
+  const borderColor = srgbToHex(tokens.border.srgb);
+  const bgColor = srgbToHex(tokens.background.srgb);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: SIDEBAR_WIDTH2,
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        height: "100vh",
+        borderLeft: `1px solid ${borderColor}`,
+        backgroundColor: bgColor
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              padding: "16px 20px",
+              borderBottom: `1px solid ${borderColor}`,
+              display: "flex",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: 16,
+                  fontWeight: 700,
+                  color: srgbToHex(tokens.textPrimary.srgb)
+                },
+                children: "newtone"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              overflowX: "hidden"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              padding: "12px 20px",
+              borderTop: `1px solid ${borderColor}`
+            },
+            children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                disabled: !isDirty,
+                onClick: onRevert,
+                "aria-label": "Revert all changes to the last saved version",
+                style: {
+                  width: "100%",
+                  padding: "8px 16px",
+                  borderRadius: 6,
+                  border: `1px solid ${borderColor}`,
+                  backgroundColor: "transparent",
+                  color: isDirty ? srgbToHex(tokens.textPrimary.srgb) : srgbToHex(tokens.textSecondary.srgb),
+                  fontSize: 13,
+                  cursor: isDirty ? "pointer" : "not-allowed",
+                  opacity: isDirty ? 1 : 0.5
+                },
+                children: "Revert Changes"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 function PresetSelector({
   presets,
   activePresetId,
@@ -1040,118 +1127,6 @@ function PresetSelector({
     )
   ] });
 }
-var SIDEBAR_WIDTH2 = 360;
-function Sidebar({
-  isDirty,
-  onRevert,
-  presets,
-  activePresetId,
-  publishedPresetId,
-  onSwitchPreset,
-  onCreatePreset,
-  onRenamePreset,
-  onDeletePreset,
-  onDuplicatePreset
-}) {
-  const tokens = useTokens();
-  const borderColor = srgbToHex(tokens.border.srgb);
-  const bgColor = srgbToHex(tokens.background.srgb);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        width: SIDEBAR_WIDTH2,
-        flexShrink: 0,
-        display: "flex",
-        flexDirection: "column",
-        height: "100vh",
-        borderLeft: `1px solid ${borderColor}`,
-        backgroundColor: bgColor
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              flexShrink: 0,
-              padding: "16px 20px",
-              borderBottom: `1px solid ${borderColor}`,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    fontSize: 16,
-                    fontWeight: 700,
-                    color: srgbToHex(tokens.textPrimary.srgb)
-                  },
-                  children: "newtone"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                PresetSelector,
-                {
-                  presets,
-                  activePresetId,
-                  publishedPresetId,
-                  onSwitchPreset,
-                  onCreatePreset,
-                  onRenamePreset,
-                  onDeletePreset,
-                  onDuplicatePreset
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flex: 1,
-              overflowY: "auto",
-              overflowX: "hidden"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flexShrink: 0,
-              padding: "12px 20px",
-              borderTop: `1px solid ${borderColor}`
-            },
-            children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                disabled: !isDirty,
-                onClick: onRevert,
-                "aria-label": "Revert all changes to the last saved version",
-                style: {
-                  width: "100%",
-                  padding: "8px 16px",
-                  borderRadius: 6,
-                  border: `1px solid ${borderColor}`,
-                  backgroundColor: "transparent",
-                  color: isDirty ? srgbToHex(tokens.textPrimary.srgb) : srgbToHex(tokens.textSecondary.srgb),
-                  fontSize: 13,
-                  cursor: isDirty ? "pointer" : "not-allowed",
-                  opacity: isDirty ? 1 : 0.5
-                },
-                children: "Revert Changes"
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
 var STATUS_LABEL = {
   saved: "Saved",
   saving: "Saving...",
@@ -1164,7 +1139,15 @@ function EditorHeader({
   publishing,
   onPublish,
   onRetry,
-  headerSlots
+  headerSlots,
+  presets,
+  activePresetId,
+  publishedPresetId,
+  onSwitchPreset,
+  onCreatePreset,
+  onRenamePreset,
+  onDeletePreset,
+  onDuplicatePreset
 }) {
   const tokens = useTokens();
   const borderColor = srgbToHex(tokens.border.srgb);
@@ -1187,7 +1170,22 @@ function EditorHeader({
         flexShrink: 0
       },
       children: [
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: headerSlots?.left }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
+          headerSlots?.left,
+          /* @__PURE__ */ jsx(
+            PresetSelector,
+            {
+              presets,
+              activePresetId,
+              publishedPresetId,
+              onSwitchPreset,
+              onCreatePreset,
+              onRenamePreset,
+              onDeletePreset,
+              onDuplicatePreset
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
           /* @__PURE__ */ jsx(
             "span",
@@ -1219,7 +1217,7 @@ function EditorHeader({
   );
 }
 var NAV_WIDTH = 60;
-function PrimaryNav({ activeSectionId, onSelectSection }) {
+function PrimaryNav({ activeSectionId, onSelectSection, footer }) {
   const tokens = useTokens();
   const [hoveredId, setHoveredId] = useState(null);
   const bg = srgbToHex(tokens.background.srgb);
@@ -1227,7 +1225,7 @@ function PrimaryNav({ activeSectionId, onSelectSection }) {
   const activeBg = srgbToHex(tokens.backgroundInteractive.srgb);
   const iconColor = srgbToHex(tokens.textSecondary.srgb);
   const activeIconColor = srgbToHex(tokens.textPrimary.srgb);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "nav",
     {
       "aria-label": "Section navigation",
@@ -1242,41 +1240,44 @@ function PrimaryNav({ activeSectionId, onSelectSection }) {
         backgroundColor: bg,
         borderRight: `1px solid ${borderColor}`
       },
-      children: CATEGORIES.map((category) => {
-        const isActive = activeSectionId === category.id;
-        const isHovered = hoveredId === category.id;
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => onSelectSection(category.id),
-            onMouseEnter: () => setHoveredId(category.id),
-            onMouseLeave: () => setHoveredId(null),
-            title: category.name,
-            "aria-current": isActive ? "page" : void 0,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: 44,
-              height: 44,
-              borderRadius: 12,
-              border: "none",
-              backgroundColor: isActive ? activeBg : isHovered ? `${borderColor}20` : "transparent",
-              cursor: "pointer",
-              transition: "background-color 150ms"
+      children: [
+        CATEGORIES.map((category) => {
+          const isActive = activeSectionId === category.id;
+          const isHovered = hoveredId === category.id;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onSelectSection(category.id),
+              onMouseEnter: () => setHoveredId(category.id),
+              onMouseLeave: () => setHoveredId(null),
+              title: category.name,
+              "aria-current": isActive ? "page" : void 0,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 44,
+                height: 44,
+                borderRadius: 12,
+                border: "none",
+                backgroundColor: isActive ? activeBg : isHovered ? `${borderColor}20` : "transparent",
+                cursor: "pointer",
+                transition: "background-color 150ms"
+              },
+              children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: category.icon ?? "circle",
+                  size: 24,
+                  color: isActive ? activeIconColor : iconColor
+                }
+              )
             },
-            children: /* @__PURE__ */ jsx(
-              Icon,
-              {
-                name: category.icon ?? "circle",
-                size: 24,
-                color: isActive ? activeIconColor : iconColor
-              }
-            )
-          },
-          category.id
-        );
-      })
+            category.id
+          );
+        }),
+        footer && /* @__PURE__ */ jsx("div", { style: { marginTop: "auto", paddingBottom: 12 }, children: footer })
+      ]
     }
   );
 }
@@ -1584,33 +1585,21 @@ function ColorsSection({
           editableValue: true
         }
       ),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, alignItems: "flex-end" }, children: [
-        /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
-          Select,
-          {
-            options: STRENGTH_OPTIONS,
-            value: palette.desaturationStrength,
-            onValueChange: (strength) => dispatch({
-              type: "SET_PALETTE_DESAT_STRENGTH",
-              index: activePaletteIndex,
-              strength
-            }),
-            label: "Desaturation"
-          }
-        ) }),
-        palette.desaturationStrength !== "none" && /* @__PURE__ */ jsx("div", { style: { paddingBottom: 2 }, children: /* @__PURE__ */ jsx(
-          Toggle,
-          {
-            value: palette.desaturationDirection === "dark",
-            onValueChange: (v) => dispatch({
-              type: "SET_PALETTE_DESAT_DIRECTION",
-              index: activePaletteIndex,
-              direction: v ? "dark" : "light"
-            }),
-            label: "Invert"
-          }
-        ) })
-      ] }),
+      /* @__PURE__ */ jsx(
+        Slider,
+        {
+          value: Math.round((palette.desaturation ?? 0) * 100),
+          onValueChange: (v) => dispatch({
+            type: "SET_PALETTE_DESATURATION",
+            index: activePaletteIndex,
+            desaturation: v / 100
+          }),
+          min: -100,
+          max: 100,
+          label: "Desaturation",
+          editableValue: true
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, alignItems: "flex-end" }, children: [
         /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
           Select,
@@ -2586,7 +2575,7 @@ function OthersSection({ state, dispatch }) {
     ] })
   ] });
 }
-var PANEL_WIDTH = 280;
+var PANEL_WIDTH = 360;
 function ConfiguratorPanel({
   activeSectionId,
   state,
@@ -2633,7 +2622,7 @@ function ConfiguratorPanel({
     }
   );
 }
-var TOC_WIDTH = 220;
+var TOC_WIDTH = 360;
 function TableOfContents({
   activeSectionId,
   activeView,
@@ -3568,7 +3557,7 @@ function ComponentDetailView({
   scopeFontMap
 }) {
   const tokens = useTokens();
-  const { config } = useNewtoneTheme();
+  const { config, mode } = useNewtoneTheme();
   const component = getComponent(componentId);
   const [hoveredId, setHoveredId] = useState(null);
   const [previewBreakpoint, setPreviewBreakpoint] = useState("lg");
@@ -3711,7 +3700,7 @@ function ComponentDetailView({
         );
       }) })
     ] }),
-    component.previewLayout === "list" ? /* @__PURE__ */ jsx(NewtoneProvider, { config: scaledConfig, children: /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: component.variants.map((variant) => {
+    component.previewLayout === "list" ? /* @__PURE__ */ jsx(NewtoneProvider, { config: scaledConfig, initialMode: mode, children: /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: 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);
@@ -3804,7 +3793,7 @@ function ComponentDetailView({
         },
         variant.id
       );
-    }) }) }) : /* @__PURE__ */ jsx(
+    }) }) }, mode) : /* @__PURE__ */ jsx(
       "div",
       {
         style: {
@@ -4444,6 +4433,7 @@ function Editor({
   chromeThemeConfig,
   persistence,
   headerSlots,
+  navFooter,
   onNavigate,
   initialPreviewView,
   manifestUrl,
@@ -4489,15 +4479,7 @@ function Editor({
         Sidebar,
         {
           isDirty: editor.isDirty,
-          onRevert: editor.handleRevert,
-          presets: editor.presets,
-          activePresetId: editor.activePresetId,
-          publishedPresetId: editor.publishedPresetId,
-          onSwitchPreset: editor.switchPreset,
-          onCreatePreset: editor.createPreset,
-          onRenamePreset: editor.renamePreset,
-          onDeletePreset: editor.deletePreset,
-          onDuplicatePreset: editor.duplicatePreset
+          onRevert: editor.handleRevert
         }
       ),
       navbar: /* @__PURE__ */ jsx(
@@ -4508,7 +4490,15 @@ function Editor({
           publishing: editor.publishing,
           onPublish: editor.handlePublish,
           onRetry: () => editor.saveDraft(editor.latestStateRef.current),
-          headerSlots
+          headerSlots,
+          presets: editor.presets,
+          activePresetId: editor.activePresetId,
+          publishedPresetId: editor.publishedPresetId,
+          onSwitchPreset: editor.switchPreset,
+          onCreatePreset: editor.createPreset,
+          onRenamePreset: editor.renamePreset,
+          onDeletePreset: editor.deletePreset,
+          onDuplicatePreset: editor.duplicatePreset
         }
       ),
       content: /* @__PURE__ */ jsxs(
@@ -4525,7 +4515,8 @@ function Editor({
               PrimaryNav,
               {
                 activeSectionId: editor.activeSectionId,
-                onSelectSection: editor.handleSectionChange
+                onSelectSection: editor.handleSectionChange,
+                footer: navFooter
               }
             ),
             editor.activeSectionId === "components" ? /* @__PURE__ */ jsx(