@newtonedev/editor 0.1.1

package/src/components/TableOfContents.tsx

@@ -0,0 +1,152 @@
+import { useState } from "react";
+import {
+  useTokens,
+  CATEGORIES,
+  getComponentsByCategory,
+} from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import type { PreviewView } from "../types";
+
+interface TableOfContentsProps {
+  readonly activeView: PreviewView;
+  readonly selectedComponentId: string | null;
+  readonly onNavigate: (view: PreviewView) => void;
+}
+
+const TOC_WIDTH = 220;
+
+export function TableOfContents({
+  activeView,
+  selectedComponentId,
+  onNavigate,
+}: TableOfContentsProps) {
+  const tokens = useTokens();
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+
+  const borderColor = srgbToHex(tokens.border.srgb);
+  const activeColor = srgbToHex(tokens.interactive.srgb);
+  const textPrimary = srgbToHex(tokens.textPrimary.srgb);
+  const textSecondary = srgbToHex(tokens.textSecondary.srgb);
+  const hoverBg = `${borderColor}20`;
+
+  const isOverviewActive = activeView.kind === "overview";
+
+  return (
+    <nav
+      aria-label="Component navigation"
+      style={{
+        width: TOC_WIDTH,
+        flexShrink: 0,
+        overflowY: "auto",
+        borderRight: `1px solid ${borderColor}`,
+        padding: "16px 0",
+        backgroundColor: srgbToHex(tokens.background.srgb),
+      }}
+    >
+      <button
+        onClick={() => onNavigate({ kind: "overview" })}
+        onMouseEnter={() => setHoveredId("overview")}
+        onMouseLeave={() => setHoveredId(null)}
+        aria-current={isOverviewActive ? "page" : undefined}
+        style={{
+          display: "block",
+          width: "100%",
+          padding: "6px 20px",
+          border: "none",
+          background: isOverviewActive
+            ? `${activeColor}14`
+            : hoveredId === "overview"
+              ? hoverBg
+              : "none",
+          cursor: "pointer",
+          textAlign: "left",
+          fontSize: 13,
+          fontWeight: isOverviewActive ? 600 : 400,
+          color: isOverviewActive ? activeColor : textPrimary,
+          transition: "background-color 100ms ease",
+        }}
+      >
+        Overview
+      </button>
+
+      {CATEGORIES.map((category) => {
+        const components = getComponentsByCategory(category.id);
+        const isCategoryActive =
+          activeView.kind === "category" &&
+          activeView.categoryId === category.id;
+
+        return (
+          <div key={category.id} style={{ marginTop: 16 }}>
+            <button
+              onClick={() =>
+                onNavigate({ kind: "category", categoryId: category.id })
+              }
+              onMouseEnter={() => setHoveredId(`cat-${category.id}`)}
+              onMouseLeave={() => setHoveredId(null)}
+              aria-current={isCategoryActive ? "page" : undefined}
+              style={{
+                display: "block",
+                width: "100%",
+                padding: "6px 20px",
+                border: "none",
+                background: isCategoryActive
+                  ? `${activeColor}14`
+                  : hoveredId === `cat-${category.id}`
+                    ? hoverBg
+                    : "none",
+                cursor: "pointer",
+                textAlign: "left",
+                fontSize: 11,
+                fontWeight: 600,
+                color: isCategoryActive ? activeColor : textSecondary,
+                textTransform: "uppercase",
+                letterSpacing: 0.5,
+                transition: "background-color 100ms ease",
+              }}
+            >
+              {category.name}
+            </button>
+
+            {components.map((comp) => {
+              const isComponentActive =
+                (activeView.kind === "component" &&
+                  activeView.componentId === comp.id) ||
+                selectedComponentId === comp.id;
+
+              return (
+                <button
+                  key={comp.id}
+                  onClick={() =>
+                    onNavigate({ kind: "component", componentId: comp.id })
+                  }
+                  onMouseEnter={() => setHoveredId(comp.id)}
+                  onMouseLeave={() => setHoveredId(null)}
+                  aria-current={isComponentActive ? "page" : undefined}
+                  style={{
+                    display: "block",
+                    width: "100%",
+                    padding: "4px 20px 4px 32px",
+                    border: "none",
+                    background: isComponentActive
+                      ? `${activeColor}14`
+                      : hoveredId === comp.id
+                        ? hoverBg
+                        : "none",
+                    cursor: "pointer",
+                    textAlign: "left",
+                    fontSize: 13,
+                    fontWeight: isComponentActive ? 600 : 400,
+                    color: isComponentActive ? activeColor : textPrimary,
+                    transition: "background-color 100ms ease",
+                  }}
+                >
+                  {comp.name}
+                </button>
+              );
+            })}
+          </div>
+        );
+      })}
+    </nav>
+  );
+}

package/src/components/ThemeBar.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { useTokens } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import type { ThemeName } from "../types";
+
+interface ThemeBarProps {
+  readonly activeTheme: ThemeName;
+  readonly onThemeChange: (theme: ThemeName) => void;
+}
+
+const THEME_CHIPS: readonly { id: ThemeName; label: string }[] = [
+  { id: "neutral", label: "Neutral" },
+  { id: "primary", label: "Primary" },
+  { id: "secondary", label: "Secondary" },
+  { id: "strong", label: "Strong" },
+];
+
+export function ThemeBar({ activeTheme, onThemeChange }: ThemeBarProps) {
+  const tokens = useTokens();
+  const [hoveredChipId, setHoveredChipId] = useState<string | null>(null);
+
+  const borderColor = srgbToHex(tokens.border.srgb);
+  const interactiveColor = srgbToHex(tokens.interactive.srgb);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        padding: "8px 24px",
+        borderBottom: `1px solid ${borderColor}`,
+        backgroundColor: srgbToHex(tokens.background.srgb),
+        flexShrink: 0,
+      }}
+    >
+      {/* Theme Chips */}
+      <div style={{ display: "flex", gap: 8 }} role="group" aria-label="Theme">
+        {THEME_CHIPS.map((chip) => {
+          const isActive = chip.id === activeTheme;
+          const isHovered = hoveredChipId === chip.id;
+
+          return (
+            <button
+              key={chip.id}
+              onClick={() => onThemeChange(chip.id)}
+              onMouseEnter={() => setHoveredChipId(chip.id)}
+              onMouseLeave={() => setHoveredChipId(null)}
+              aria-pressed={isActive}
+              style={{
+                padding: "4px 12px",
+                borderRadius: 16,
+                border: `1px solid ${srgbToHex(
+                  isActive ? tokens.interactive.srgb : tokens.border.srgb,
+                )}`,
+                backgroundColor: isActive
+                  ? interactiveColor
+                  : isHovered
+                    ? `${interactiveColor}10`
+                    : "transparent",
+                color: isActive
+                  ? "#fff"
+                  : srgbToHex(tokens.textPrimary.srgb),
+                fontSize: 12,
+                fontWeight: 500,
+                cursor: "pointer",
+                transition: "background-color 150ms ease",
+              }}
+            >
+              {chip.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}