@newtonedev/editor 0.1.10 → 0.1.11

package/dist/Editor.d.ts

@@ -1,3 +1,3 @@
 import type { EditorProps } from "./types";
-export declare function Editor({ initialState, initialIsPublished, initialPresets, initialActivePresetId, initialPublishedPresetId, defaultState, chromeThemeConfig, persistence, headerSlots, onNavigate, initialPreviewView, manifestUrl, fontCatalog, }: EditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function Editor({ initialState, initialIsPublished, initialPresets, initialActivePresetId, initialPublishedPresetId, defaultState, chromeThemeConfig, persistence, headerSlots, navFooter, onNavigate, initialPreviewView, manifestUrl, fontCatalog, }: EditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Editor.d.ts.map

package/dist/Editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,EACrB,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,WAAW,GACZ,EAAE,WAAW,2CAuJb"}
+{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,EACrB,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,WAAW,GACZ,EAAE,WAAW,2CAwJb"}

package/dist/components/EditorHeader.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { SaveStatus } from "../types";
+import type { SaveStatus, Preset } from "../types";
 interface EditorHeaderProps {
     readonly saveStatus: SaveStatus;
     readonly isPublished: boolean;
@@ -10,7 +10,15 @@ interface EditorHeaderProps {
         readonly left?: ReactNode;
         readonly right?: ReactNode;
     };
+    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 declare function EditorHeader({ saveStatus, isPublished, publishing, onPublish, onRetry, headerSlots, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorHeader({ saveStatus, isPublished, publishing, onPublish, onRetry, headerSlots, presets, activePresetId, publishedPresetId, onSwitchPreset, onCreatePreset, onRenamePreset, onDeletePreset, onDuplicatePreset, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=EditorHeader.d.ts.map

package/dist/components/EditorHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorHeader.d.ts","sourceRoot":"","sources":["../../src/components/EditorHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,UAAU,iBAAiB;IACzB,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAC;IAChC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE;QACrB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;QAC1B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;KAC5B,CAAC;CACH;AASD,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,WAAW,GACZ,EAAE,iBAAiB,2CAsDnB"}
+{"version":3,"file":"EditorHeader.d.ts","sourceRoot":"","sources":["../../src/components/EditorHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGnD,UAAU,iBAAiB;IACzB,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAC;IAChC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE;QACrB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;QAC1B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;KAC5B,CAAC;IACF,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAC3D,QAAQ,CAAC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,QAAQ,CAAC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,QAAQ,CAAC,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;CACjF;AASD,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,WAAW,EACX,OAAO,EACP,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,iBAAiB,GAClB,EAAE,iBAAiB,2CAgEnB"}

package/dist/components/PrimaryNav.d.ts

@@ -1,7 +1,9 @@
+import type { ReactNode } from "react";
 interface PrimaryNavProps {
     readonly activeSectionId: string | null;
     readonly onSelectSection: (sectionId: string) => void;
+    readonly footer?: ReactNode;
 }
-export declare function PrimaryNav({ activeSectionId, onSelectSection }: PrimaryNavProps): import("react/jsx-runtime").JSX.Element;
+export declare function PrimaryNav({ activeSectionId, onSelectSection, footer }: PrimaryNavProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=PrimaryNav.d.ts.map

package/dist/components/PrimaryNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryNav.d.ts","sourceRoot":"","sources":["../../src/components/PrimaryNav.tsx"],"names":[],"mappings":"AAIA,UAAU,eAAe;IACvB,QAAQ,CAAC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAID,wBAAgB,UAAU,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,EAAE,eAAe,2CAgE/E"}
+{"version":3,"file":"PrimaryNav.d.ts","sourceRoot":"","sources":["../../src/components/PrimaryNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,UAAU,eAAe;IACvB,QAAQ,CAAC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;CAC7B;AAID,wBAAgB,UAAU,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,eAAe,2CAqEvF"}

package/dist/components/Sidebar.d.ts

@@ -1,16 +1,7 @@
-import type { Preset } from "../types";
 interface SidebarProps {
     readonly isDirty: boolean;
     readonly onRevert: () => void;
-    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 declare function Sidebar({ isDirty, onRevert, presets, activePresetId, publishedPresetId, onSwitchPreset, onCreatePreset, onRenamePreset, onDeletePreset, onDuplicatePreset, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ isDirty, onRevert, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Sidebar.d.ts.map

package/dist/components/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/components/Sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIvC,UAAU,YAAY;IACpB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAC3D,QAAQ,CAAC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,QAAQ,CAAC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,QAAQ,CAAC,iBAAiB,EAAE,CAC1B,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,MAAM,KACT,OAAO,CAAC,MAAM,CAAC,CAAC;CACtB;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,OAAO,EACP,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,iBAAiB,GAClB,EAAE,YAAY,2CA0Fd"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/components/Sidebar.tsx"],"names":[],"mappings":"AAKA,UAAU,YAAY;IACpB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAQ,GACT,EAAE,YAAY,2CA+Ed"}

package/dist/hooks/useEditorState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEditorState.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,KAAK,EACV,MAAM,EACN,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,UAAU,CAAC;AAIlB,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACrC,QAAQ,CAAC,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3C,QAAQ,CAAC,qBAAqB,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,wBAAwB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjD,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,YAAY,EACZ,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,WAAW,GACZ,EAAE,qBAAqB;;;;;;;;;gCAsON,iBAAiB;;;;2CA3GxB,WAAW;8CAsBN,MAAM;8CA8BN,MAAM;2CAwFX,SAAS;;;;;4CA3DL,MAAM,SAAS,OAAO;;;;;;;;;;;;;;;EAkMpC"}
+{"version":3,"file":"useEditorState.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,KAAK,EACV,MAAM,EACN,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,UAAU,CAAC;AAIlB,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACrC,QAAQ,CAAC,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3C,QAAQ,CAAC,qBAAqB,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,wBAAwB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjD,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,YAAY,EACZ,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,WAAW,GACZ,EAAE,qBAAqB;;;;;;;;;gCAwON,iBAAiB;;;;2CA3GxB,WAAW;8CAsBN,MAAM;8CA8BN,MAAM;2CAwFX,SAAS;;;;;4CA3DL,MAAM,SAAS,OAAO;;;;;;;;;;;;;;;EAkMpC"}

package/dist/index.cjs

@@ -266,11 +266,12 @@ function useEditorState({
   const [colorMode, setColorMode] = react.useState(
     initialState.preview.mode
   );
+  const defaultCategoryId = components.CATEGORIES[0]?.id ?? "colors";
   const [previewView, setPreviewView] = react.useState(
-    initialPreviewView ?? { kind: "overview" }
+    initialPreviewView ?? { kind: "category", categoryId: defaultCategoryId }
   );
   const [activeSectionId, setActiveSectionId] = react.useState(
-    components.CATEGORIES[0]?.id ?? "colors"
+    (initialPreviewView?.kind === "category" ? initialPreviewView.categoryId : void 0) ?? defaultCategoryId
   );
   const [sidebarSelection, setSidebarSelection] = react.useState(null);
   const [propOverrides, setPropOverrides] = react.useState(
@@ -370,11 +371,10 @@ function useEditorState({
     (sectionId) => {
       setActiveSectionId(sectionId);
       const sectionComponents = components.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 }
@@ -383,7 +383,6 @@ function useEditorState({
       } else {
         const view = { kind: "category", categoryId: sectionId };
         setPreviewView(view);
-        onNavigate?.(view);
         setSidebarSelection(null);
         setPropOverrides({});
       }
@@ -639,6 +638,94 @@ function EditorShell({
     }
   );
 }
+var SIDEBAR_WIDTH2 = 360;
+function Sidebar({
+  isDirty,
+  onRevert
+}) {
+  const tokens = components.useTokens();
+  const borderColor = newtone.srgbToHex(tokens.border.srgb);
+  const bgColor = newtone.srgbToHex(tokens.background.srgb);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width: SIDEBAR_WIDTH2,
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        height: "100vh",
+        borderLeft: `1px solid ${borderColor}`,
+        backgroundColor: bgColor
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              padding: "16px 20px",
+              borderBottom: `1px solid ${borderColor}`,
+              display: "flex",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  fontSize: 16,
+                  fontWeight: 700,
+                  color: newtone.srgbToHex(tokens.textPrimary.srgb)
+                },
+                children: "newtone"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              overflowX: "hidden"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              padding: "12px 20px",
+              borderTop: `1px solid ${borderColor}`
+            },
+            children: /* @__PURE__ */ jsxRuntime.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 ? newtone.srgbToHex(tokens.textPrimary.srgb) : newtone.srgbToHex(tokens.textSecondary.srgb),
+                  fontSize: 13,
+                  cursor: isDirty ? "pointer" : "not-allowed",
+                  opacity: isDirty ? 1 : 0.5
+                },
+                children: "Revert Changes"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 function PresetSelector({
   presets,
   activePresetId,
@@ -1042,118 +1129,6 @@ function PresetSelector({
     )
   ] });
 }
-var SIDEBAR_WIDTH2 = 360;
-function Sidebar({
-  isDirty,
-  onRevert,
-  presets,
-  activePresetId,
-  publishedPresetId,
-  onSwitchPreset,
-  onCreatePreset,
-  onRenamePreset,
-  onDeletePreset,
-  onDuplicatePreset
-}) {
-  const tokens = components.useTokens();
-  const borderColor = newtone.srgbToHex(tokens.border.srgb);
-  const bgColor = newtone.srgbToHex(tokens.background.srgb);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: {
-        width: SIDEBAR_WIDTH2,
-        flexShrink: 0,
-        display: "flex",
-        flexDirection: "column",
-        height: "100vh",
-        borderLeft: `1px solid ${borderColor}`,
-        backgroundColor: bgColor
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              flexShrink: 0,
-              padding: "16px 20px",
-              borderBottom: `1px solid ${borderColor}`,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  style: {
-                    fontSize: 16,
-                    fontWeight: 700,
-                    color: newtone.srgbToHex(tokens.textPrimary.srgb)
-                  },
-                  children: "newtone"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                PresetSelector,
-                {
-                  presets,
-                  activePresetId,
-                  publishedPresetId,
-                  onSwitchPreset,
-                  onCreatePreset,
-                  onRenamePreset,
-                  onDeletePreset,
-                  onDuplicatePreset
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              flex: 1,
-              overflowY: "auto",
-              overflowX: "hidden"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              flexShrink: 0,
-              padding: "12px 20px",
-              borderTop: `1px solid ${borderColor}`
-            },
-            children: /* @__PURE__ */ jsxRuntime.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 ? newtone.srgbToHex(tokens.textPrimary.srgb) : newtone.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...",
@@ -1166,7 +1141,15 @@ function EditorHeader({
   publishing,
   onPublish,
   onRetry,
-  headerSlots
+  headerSlots,
+  presets,
+  activePresetId,
+  publishedPresetId,
+  onSwitchPreset,
+  onCreatePreset,
+  onRenamePreset,
+  onDeletePreset,
+  onDuplicatePreset
 }) {
   const tokens = components.useTokens();
   const borderColor = newtone.srgbToHex(tokens.border.srgb);
@@ -1189,7 +1172,22 @@ function EditorHeader({
         flexShrink: 0
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: headerSlots?.left }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
+          headerSlots?.left,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PresetSelector,
+            {
+              presets,
+              activePresetId,
+              publishedPresetId,
+              onSwitchPreset,
+              onCreatePreset,
+              onRenamePreset,
+              onDeletePreset,
+              onDuplicatePreset
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
@@ -1221,7 +1219,7 @@ function EditorHeader({
   );
 }
 var NAV_WIDTH = 60;
-function PrimaryNav({ activeSectionId, onSelectSection }) {
+function PrimaryNav({ activeSectionId, onSelectSection, footer }) {
   const tokens = components.useTokens();
   const [hoveredId, setHoveredId] = react.useState(null);
   const bg = newtone.srgbToHex(tokens.background.srgb);
@@ -1229,7 +1227,7 @@ function PrimaryNav({ activeSectionId, onSelectSection }) {
   const activeBg = newtone.srgbToHex(tokens.backgroundInteractive.srgb);
   const iconColor = newtone.srgbToHex(tokens.textSecondary.srgb);
   const activeIconColor = newtone.srgbToHex(tokens.textPrimary.srgb);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
       "aria-label": "Section navigation",
@@ -1244,41 +1242,44 @@ function PrimaryNav({ activeSectionId, onSelectSection }) {
         backgroundColor: bg,
         borderRight: `1px solid ${borderColor}`
       },
-      children: components.CATEGORIES.map((category) => {
-        const isActive = activeSectionId === category.id;
-        const isHovered = hoveredId === category.id;
-        return /* @__PURE__ */ jsxRuntime.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: [
+        components.CATEGORIES.map((category) => {
+          const isActive = activeSectionId === category.id;
+          const isHovered = hoveredId === category.id;
+          return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                components.Icon,
+                {
+                  name: category.icon ?? "circle",
+                  size: 24,
+                  color: isActive ? activeIconColor : iconColor
+                }
+              )
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              components.Icon,
-              {
-                name: category.icon ?? "circle",
-                size: 24,
-                color: isActive ? activeIconColor : iconColor
-              }
-            )
-          },
-          category.id
-        );
-      })
+            category.id
+          );
+        }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "auto", paddingBottom: 12 }, children: footer })
+      ]
     }
   );
 }
@@ -2588,7 +2589,7 @@ function OthersSection({ state, dispatch }) {
     ] })
   ] });
 }
-var PANEL_WIDTH = 280;
+var PANEL_WIDTH = 360;
 function ConfiguratorPanel({
   activeSectionId,
   state,
@@ -2635,7 +2636,7 @@ function ConfiguratorPanel({
     }
   );
 }
-var TOC_WIDTH = 220;
+var TOC_WIDTH = 360;
 function TableOfContents({
   activeSectionId,
   activeView,
@@ -3570,7 +3571,7 @@ function ComponentDetailView({
   scopeFontMap
 }) {
   const tokens = components.useTokens();
-  const { config } = components.useNewtoneTheme();
+  const { config, mode } = components.useNewtoneTheme();
   const component = components.getComponent(componentId);
   const [hoveredId, setHoveredId] = react.useState(null);
   const [previewBreakpoint, setPreviewBreakpoint] = react.useState("lg");
@@ -3713,7 +3714,7 @@ function ComponentDetailView({
         );
       }) })
     ] }),
-    component.previewLayout === "list" ? /* @__PURE__ */ jsxRuntime.jsx(components.NewtoneProvider, { config: scaledConfig, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: component.variants.map((variant) => {
+    component.previewLayout === "list" ? /* @__PURE__ */ jsxRuntime.jsx(components.NewtoneProvider, { config: scaledConfig, initialMode: mode, children: /* @__PURE__ */ jsxRuntime.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` : newtone.srgbToHex(tokens.border.srgb);
@@ -3806,7 +3807,7 @@ function ComponentDetailView({
         },
         variant.id
       );
-    }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+    }) }) }, mode) : /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         style: {
@@ -4446,6 +4447,7 @@ function Editor({
   chromeThemeConfig,
   persistence,
   headerSlots,
+  navFooter,
   onNavigate,
   initialPreviewView,
   manifestUrl,
@@ -4491,15 +4493,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__ */ jsxRuntime.jsx(
@@ -4510,7 +4504,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__ */ jsxRuntime.jsxs(
@@ -4527,7 +4529,8 @@ function Editor({
               PrimaryNav,
               {
                 activeSectionId: editor.activeSectionId,
-                onSelectSection: editor.handleSectionChange
+                onSelectSection: editor.handleSectionChange,
+                footer: navFooter
               }
             ),
             editor.activeSectionId === "components" ? /* @__PURE__ */ jsxRuntime.jsx(