@newtonedev/editor 0.1.1

package/dist/preview/CategoryView.d.ts

@@ -0,0 +1,7 @@
+interface CategoryViewProps {
+    readonly categoryId: string;
+    readonly onNavigateToComponent: (componentId: string) => void;
+}
+export declare function CategoryView({ categoryId, onNavigateToComponent, }: CategoryViewProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=CategoryView.d.ts.map

package/dist/preview/CategoryView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryView.d.ts","sourceRoot":"","sources":["../../src/preview/CategoryView.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,qBAAqB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,qBAAqB,GACtB,EAAE,iBAAiB,kDAuHnB"}

package/dist/preview/ComponentDetailView.d.ts

@@ -0,0 +1,9 @@
+interface ComponentDetailViewProps {
+    readonly componentId: string;
+    readonly selectedVariantId: string | null;
+    readonly propOverrides?: Record<string, unknown>;
+    readonly onSelectVariant: (variantId: string) => void;
+}
+export declare function ComponentDetailView({ componentId, selectedVariantId, propOverrides, onSelectVariant, }: ComponentDetailViewProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ComponentDetailView.d.ts.map

package/dist/preview/ComponentDetailView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentDetailView.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentDetailView.tsx"],"names":[],"mappings":"AAMA,UAAU,wBAAwB;IAChC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjD,QAAQ,CAAC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,eAAe,GAChB,EAAE,wBAAwB,kDA2G1B"}

package/dist/preview/ComponentRenderer.d.ts

@@ -0,0 +1,7 @@
+interface ComponentRendererProps {
+    readonly componentId: string;
+    readonly props: Record<string, unknown>;
+}
+export declare function ComponentRenderer({ componentId, props }: ComponentRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ComponentRenderer.d.ts.map

package/dist/preview/ComponentRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentRenderer.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentRenderer.tsx"],"names":[],"mappings":"AAaA,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAyDD,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,sBAAsB,kDAiC/E"}

package/dist/preview/OverviewView.d.ts

@@ -0,0 +1,7 @@
+interface OverviewViewProps {
+    readonly onNavigateToCategory: (categoryId: string) => void;
+    readonly onNavigateToComponent: (componentId: string) => void;
+}
+export declare function OverviewView({ onNavigateToCategory, onNavigateToComponent, }: OverviewViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OverviewView.d.ts.map

package/dist/preview/OverviewView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverviewView.d.ts","sourceRoot":"","sources":["../../src/preview/OverviewView.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,qBAAqB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED,wBAAgB,YAAY,CAAC,EAC3B,oBAAoB,EACpB,qBAAqB,GACtB,EAAE,iBAAiB,2CAwFnB"}

package/dist/types.d.ts

@@ -0,0 +1,69 @@
+import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { NewtoneThemeConfig } from "@newtonedev/components";
+import type { ReactNode } from "react";
+export interface Preset {
+    readonly id: string;
+    readonly name: string;
+    readonly draft_state: ConfiguratorState;
+    readonly published_state: ConfiguratorState | null;
+}
+export type SaveStatus = "saved" | "saving" | "unsaved" | "error";
+export type ThemeName = "neutral" | "primary" | "secondary" | "strong";
+export type PreviewView = {
+    readonly kind: "overview";
+} | {
+    readonly kind: "category";
+    readonly categoryId: string;
+} | {
+    readonly kind: "component";
+    readonly componentId: string;
+};
+export type SidebarSelection = null | {
+    readonly scope: "component";
+    readonly componentId: string;
+} | {
+    readonly scope: "variant";
+    readonly componentId: string;
+    readonly variantId: string;
+};
+export interface EditorPersistence {
+    /** Save draft state. Called on 2s debounce. */
+    readonly onSaveDraft: (params: {
+        readonly state: ConfiguratorState;
+        readonly presets: readonly Preset[];
+    }) => Promise<{
+        error?: unknown;
+    }>;
+    /** Publish the active preset. */
+    readonly onPublish: (params: {
+        readonly state: ConfiguratorState;
+        readonly presets: readonly Preset[];
+        readonly activePresetId: string;
+    }) => Promise<{
+        error?: unknown;
+    }>;
+    /** Persist preset metadata (used by preset CRUD operations). */
+    readonly persistPresets: (params: {
+        readonly presets: readonly Preset[];
+        readonly activePresetId: string;
+        readonly publishedPresetId: string | null;
+    }) => Promise<void>;
+}
+export interface EditorHeaderSlots {
+    readonly left?: ReactNode;
+    readonly right?: ReactNode;
+}
+export interface EditorProps {
+    readonly initialState: ConfiguratorState;
+    readonly initialIsPublished: boolean;
+    readonly initialPresets: readonly Preset[];
+    readonly initialActivePresetId: string;
+    readonly initialPublishedPresetId: string | null;
+    readonly defaultState: ConfiguratorState;
+    readonly chromeThemeConfig: NewtoneThemeConfig;
+    readonly persistence: EditorPersistence;
+    readonly headerSlots?: EditorHeaderSlots;
+    readonly onNavigate?: (view: PreviewView) => void;
+    readonly initialPreviewView?: PreviewView;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/utils/presets.d.ts

@@ -0,0 +1,5 @@
+import type { Preset } from "../types";
+export declare function findPreset(presets: readonly Preset[], presetId: string): Preset | undefined;
+export declare function updatePresetInArray(presets: readonly Preset[], presetId: string, updater: (preset: Preset) => Preset): readonly Preset[];
+export declare function presetHasUnpublishedChanges(preset: Preset): boolean;
+//# sourceMappingURL=presets.d.ts.map

package/dist/utils/presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/utils/presets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,wBAAgB,UAAU,CACxB,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,QAAQ,EAAE,MAAM,GACf,MAAM,GAAG,SAAS,CAEpB;AAED,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,GAClC,SAAS,MAAM,EAAE,CAEnB;AAED,wBAAgB,2BAA2B,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAMnE"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@newtonedev/editor",
+  "version": "0.1.1",
+  "description": "Shared color system editor for Newtone applications",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/joshuaallenmx/newtone-api.git",
+    "directory": "packages/editor"
+  },
+  "homepage": "https://newtone.dev",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "react-native": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./src/index.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup && rm -f tsconfig.tsbuildinfo && tsc --emitDeclarationOnly",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0"
+  },
+  "dependencies": {
+    "newtone": "^0.1.0",
+    "@newtonedev/components": "^0.1.0",
+    "@newtonedev/configurator": "^0.1.0",
+    "react-native-web": "^0.19.10"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  }
+}

package/src/Editor.tsx

@@ -0,0 +1,128 @@
+import { NewtoneProvider } from "@newtonedev/components";
+import { useEditorState } from "./hooks/useEditorState";
+import { EditorShell } from "./components/EditorShell";
+import { Sidebar } from "./components/Sidebar";
+import { EditorHeader } from "./components/EditorHeader";
+import { ThemeBar } from "./components/ThemeBar";
+import { TableOfContents } from "./components/TableOfContents";
+import { PreviewWindow } from "./components/PreviewWindow";
+import { RightSidebar } from "./components/RightSidebar";
+import type { EditorProps } from "./types";
+
+export function Editor({
+  initialState,
+  initialIsPublished,
+  initialPresets,
+  initialActivePresetId,
+  initialPublishedPresetId,
+  defaultState,
+  chromeThemeConfig,
+  persistence,
+  headerSlots,
+  onNavigate,
+  initialPreviewView,
+}: EditorProps) {
+  const editor = useEditorState({
+    initialState,
+    initialIsPublished,
+    initialPresets,
+    initialActivePresetId,
+    initialPublishedPresetId,
+    defaultState,
+    persistence,
+    onNavigate,
+    initialPreviewView,
+  });
+
+  return (
+    <NewtoneProvider config={chromeThemeConfig}>
+      <EditorShell
+        sidebar={
+          <Sidebar
+            state={editor.configuratorState}
+            dispatch={editor.dispatch}
+            previewColors={editor.previewColors}
+            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}
+            colorMode={editor.colorMode}
+            onColorModeChange={editor.handleColorModeChange}
+          />
+        }
+        navbar={
+          <EditorHeader
+            saveStatus={editor.saveStatus}
+            isPublished={editor.isPublished}
+            publishing={editor.publishing}
+            onPublish={editor.handlePublish}
+            onRetry={() => editor.saveDraft(editor.latestStateRef.current)}
+            headerSlots={headerSlots}
+          />
+        }
+        content={
+          <div
+            style={{
+              flex: 1,
+              display: "flex",
+              overflow: "hidden",
+              minWidth: 0,
+            }}
+          >
+            <TableOfContents
+              activeView={editor.previewView}
+              selectedComponentId={editor.selectedComponentId}
+              onNavigate={editor.handlePreviewNavigate}
+            />
+            <div
+              style={{
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                overflow: "hidden",
+                minWidth: 0,
+              }}
+            >
+              <NewtoneProvider
+                config={editor.themeConfig}
+                initialMode={editor.colorMode}
+                initialTheme={editor.activeTheme}
+                key={`${editor.colorMode}-${editor.activeTheme}`}
+              >
+                <ThemeBar
+                  activeTheme={editor.activeTheme}
+                  onThemeChange={editor.handleThemeChange}
+                />
+                <div style={{ flex: 1, overflowY: "auto", minWidth: 0 }}>
+                  <PreviewWindow
+                    view={editor.previewView}
+                    selectedVariantId={editor.selectedVariantId}
+                    propOverrides={editor.propOverrides}
+                    onNavigate={editor.handlePreviewNavigate}
+                    onSelectVariant={editor.handleSelectVariant}
+                  />
+                </div>
+              </NewtoneProvider>
+            </div>
+          </div>
+        }
+        rightPanel={
+          <RightSidebar
+            selection={editor.sidebarSelection}
+            propOverrides={editor.propOverrides}
+            onPropOverride={editor.handlePropOverride}
+            onResetOverrides={editor.handleResetOverrides}
+            onClose={editor.handleCloseSidebar}
+            onScopeToComponent={editor.handleScopeToComponent}
+          />
+        }
+      />
+    </NewtoneProvider>
+  );
+}

package/src/components/CodeBlock.tsx

@@ -0,0 +1,58 @@
+import { useState, useCallback } from "react";
+import { useTokens, Button } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+
+export function CopyButton({ text }: { readonly text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [text]);
+
+  return (
+    <Button variant="ghost" size="sm" icon={copied ? "check" : "content_copy"} onPress={handleCopy}>
+      {copied ? "Copied!" : "Copy"}
+    </Button>
+  );
+}
+
+export function CodeBlock({
+  code,
+}: {
+  readonly code: string;
+}) {
+  const tokens = useTokens();
+
+  return (
+    <div style={{ position: "relative" }}>
+      <div
+        style={{
+          position: "absolute",
+          top: 8,
+          right: 8,
+        }}
+      >
+        <CopyButton text={code} />
+      </div>
+      <pre
+        style={{
+          backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+          border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+          borderRadius: 8,
+          padding: 16,
+          paddingRight: 80,
+          overflow: "auto",
+          fontSize: 13,
+          lineHeight: 1.5,
+          fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace",
+          color: srgbToHex(tokens.textPrimary.srgb),
+          margin: 0,
+        }}
+      >
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}

package/src/components/EditorHeader.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+import { useTokens, Button } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import type { SaveStatus } from "../types";
+
+interface EditorHeaderProps {
+  readonly saveStatus: SaveStatus;
+  readonly isPublished: boolean;
+  readonly publishing: boolean;
+  readonly onPublish: () => void;
+  readonly onRetry: () => void;
+  readonly headerSlots?: {
+    readonly left?: ReactNode;
+    readonly right?: ReactNode;
+  };
+}
+
+const STATUS_LABEL: Record<SaveStatus, string> = {
+  saved: "Saved",
+  saving: "Saving...",
+  unsaved: "Unsaved changes",
+  error: "Save failed",
+};
+
+export function EditorHeader({
+  saveStatus,
+  isPublished,
+  publishing,
+  onPublish,
+  onRetry,
+  headerSlots,
+}: EditorHeaderProps) {
+  const tokens = useTokens();
+  const borderColor = srgbToHex(tokens.border.srgb);
+
+  const statusColor: Record<SaveStatus, string> = {
+    saved: srgbToHex(tokens.success.srgb),
+    saving: srgbToHex(tokens.warning.srgb),
+    unsaved: srgbToHex(tokens.textSecondary.srgb),
+    error: srgbToHex(tokens.error.srgb),
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "12px 24px",
+        borderBottom: `1px solid ${borderColor}`,
+        backgroundColor: srgbToHex(tokens.background.srgb),
+        flexShrink: 0,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+        {headerSlots?.left}
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <span
+          style={{
+            fontSize: 12,
+            color: statusColor[saveStatus],
+            fontWeight: 500,
+          }}
+        >
+          {STATUS_LABEL[saveStatus]}
+        </span>
+        {saveStatus === "error" && (
+          <Button variant="ghost" size="sm" icon="refresh" onPress={onRetry}>
+            Retry
+          </Button>
+        )}
+        <Button
+          variant="primary"
+          size="sm"
+          icon="publish"
+          onPress={onPublish}
+          disabled={isPublished || publishing}
+        >
+          {publishing ? "Publishing..." : isPublished ? "Published" : "Publish"}
+        </Button>
+        {headerSlots?.right}
+      </div>
+    </div>
+  );
+}

package/src/components/EditorShell.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import { useTokens } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+
+const SIDEBAR_WIDTH = 360;
+
+interface EditorShellProps {
+  readonly sidebar: ReactNode;
+  readonly navbar: ReactNode;
+  readonly content: ReactNode;
+  readonly rightPanel: ReactNode;
+}
+
+export function EditorShell({
+  sidebar,
+  navbar,
+  content,
+  rightPanel,
+}: EditorShellProps) {
+  const tokens = useTokens();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        height: "100vh",
+        overflow: "hidden",
+        backgroundColor: srgbToHex(tokens.background.srgb),
+      }}
+    >
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          height: "100vh",
+          overflow: "hidden",
+          minWidth: 0,
+        }}
+      >
+        {navbar}
+
+        <div
+          style={{
+            display: "flex",
+            flex: 1,
+            overflow: "hidden",
+          }}
+        >
+          {content}
+        </div>
+      </div>
+
+      <div
+        style={{
+          position: "relative",
+          width: SIDEBAR_WIDTH,
+          flexShrink: 0,
+          overflow: "hidden",
+        }}
+      >
+        {sidebar}
+        {rightPanel}
+      </div>
+    </div>
+  );
+}