@newtonedev/editor 0.1.1

package/src/components/RightSidebar.tsx

@@ -0,0 +1,374 @@
+import { useCallback, type KeyboardEvent } from "react";
+import { useTokens, getComponent, generateComponentCode, Select } from "@newtonedev/components";
+import type { EditableProp } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import { CodeBlock } from "./CodeBlock";
+import type { SidebarSelection } from "../types";
+
+interface RightSidebarProps {
+  readonly selection: SidebarSelection;
+  readonly propOverrides: Record<string, unknown>;
+  readonly onPropOverride: (name: string, value: unknown) => void;
+  readonly onResetOverrides: () => void;
+  readonly onClose: () => void;
+  readonly onScopeToComponent: () => void;
+}
+
+export function RightSidebar({
+  selection,
+  propOverrides,
+  onPropOverride,
+  onResetOverrides,
+  onClose,
+  onScopeToComponent,
+}: RightSidebarProps) {
+  const tokens = useTokens();
+  const visible = selection !== null;
+
+  const component = selection ? getComponent(selection.componentId) : null;
+  const variant =
+    selection?.scope === "variant"
+      ? component?.variants.find((v) => v.id === selection.variantId)
+      : null;
+
+  const code = component ? generateComponentCode(component, propOverrides) : "";
+
+  return (
+    <aside
+      aria-label="Component inspector"
+      style={{
+        position: "absolute",
+        inset: 0,
+        zIndex: 1,
+        transform: visible ? "translateX(0)" : "translateX(100%)",
+        opacity: visible ? 1 : 0,
+        transition: "transform 200ms ease, opacity 150ms ease",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: srgbToHex(tokens.background.srgb),
+        borderLeft: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+      }}
+    >
+      {selection && component && (
+        <>
+          {/* Header */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "12px 16px",
+              borderBottom: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+              flexShrink: 0,
+            }}
+          >
+            <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
+              <button
+                onClick={onClose}
+                aria-label="Back to controls"
+                style={{
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  padding: 4,
+                  color: srgbToHex(tokens.textSecondary.srgb),
+                  fontSize: 16,
+                  lineHeight: 1,
+                  flexShrink: 0,
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <svg
+                  width={16}
+                  height={16}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <line x1="19" y1="12" x2="5" y2="12" />
+                  <polyline points="12 19 5 12 12 5" />
+                </svg>
+              </button>
+              {selection.scope === "variant" && variant ? (
+                <>
+                  <button
+                    onClick={onScopeToComponent}
+                    aria-label={`Back to ${component.name} overview`}
+                    style={{
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: 0,
+                      fontSize: 14,
+                      fontWeight: 500,
+                      color: srgbToHex(tokens.interactive.srgb),
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {component.name}
+                  </button>
+                  <span
+                    style={{
+                      fontSize: 13,
+                      color: srgbToHex(tokens.textSecondary.srgb),
+                    }}
+                  >
+                    /
+                  </span>
+                  <span
+                    style={{
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: srgbToHex(tokens.textPrimary.srgb),
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                    }}
+                  >
+                    {variant.label}
+                  </span>
+                </>
+              ) : (
+                <span
+                  style={{
+                    fontSize: 14,
+                    fontWeight: 600,
+                    color: srgbToHex(tokens.textPrimary.srgb),
+                  }}
+                >
+                  {component.name}
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Body */}
+          <div
+            style={{
+              flex: 1,
+              overflowY: "auto",
+              padding: 16,
+            }}
+          >
+            <h3
+              style={{
+                fontSize: 13,
+                fontWeight: 600,
+                color: srgbToHex(tokens.textSecondary.srgb),
+                textTransform: "uppercase",
+                letterSpacing: 0.5,
+                margin: 0,
+                marginBottom: 16,
+              }}
+            >
+              Properties
+            </h3>
+
+            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+              {component.editableProps.map((prop) => (
+                <PropControl
+                  key={prop.name}
+                  prop={prop}
+                  value={propOverrides[prop.name] ?? prop.defaultValue}
+                  onChange={(value) => onPropOverride(prop.name, value)}
+                />
+              ))}
+            </div>
+
+            {selection.scope === "variant" && (
+              <button
+                onClick={onResetOverrides}
+                aria-label="Reset properties to variant defaults"
+                style={{
+                  marginTop: 20,
+                  width: "100%",
+                  padding: "8px 12px",
+                  borderRadius: 6,
+                  border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+                  backgroundColor: "transparent",
+                  color: srgbToHex(tokens.textSecondary.srgb),
+                  fontSize: 13,
+                  cursor: "pointer",
+                }}
+              >
+                Reset to variant defaults
+              </button>
+            )}
+
+            <h3
+              style={{
+                fontSize: 13,
+                fontWeight: 600,
+                color: srgbToHex(tokens.textSecondary.srgb),
+                textTransform: "uppercase",
+                letterSpacing: 0.5,
+                margin: 0,
+                marginTop: 24,
+                marginBottom: 12,
+              }}
+            >
+              Code
+            </h3>
+
+            <CodeBlock code={code} />
+          </div>
+        </>
+      )}
+    </aside>
+  );
+}
+
+function PropControl({
+  prop,
+  value,
+  onChange,
+}: {
+  readonly prop: EditableProp;
+  readonly value: unknown;
+  readonly onChange: (value: unknown) => void;
+}) {
+  const tokens = useTokens();
+
+  const handleToggleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        onChange(!value);
+      }
+    },
+    [onChange, value],
+  );
+
+  const inputStyle = {
+    width: "100%",
+    padding: "6px 10px",
+    borderRadius: 6,
+    border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+    backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+    color: srgbToHex(tokens.textPrimary.srgb),
+    fontSize: 13,
+    fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace",
+    boxSizing: "border-box" as const,
+  };
+
+  return (
+    <div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: 4,
+        }}
+      >
+        <span
+          style={{
+            fontSize: 12,
+            fontWeight: 500,
+            color: srgbToHex(tokens.textPrimary.srgb),
+          }}
+        >
+          {prop.label}
+        </span>
+        <span
+          style={{
+            fontSize: 11,
+            color: srgbToHex(tokens.textSecondary.srgb),
+            fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace",
+          }}
+        >
+          {prop.control}
+        </span>
+      </div>
+
+      {prop.control === "select" && prop.options && (
+        <Select
+          options={prop.options.map((o) => ({
+            label: o.label,
+            value: String(o.value),
+          }))}
+          value={String(value)}
+          onValueChange={(v) => {
+            const option = prop.options!.find((o) => String(o.value) === v);
+            if (option) onChange(option.value);
+          }}
+          size="sm"
+        />
+      )}
+
+      {prop.control === "text" && (
+        <input
+          type="text"
+          value={String(value)}
+          onChange={(e) => onChange(e.target.value)}
+          style={inputStyle}
+        />
+      )}
+
+      {prop.control === "number" && (
+        <input
+          type="number"
+          value={Number(value)}
+          onChange={(e) => onChange(Number(e.target.value))}
+          style={inputStyle}
+        />
+      )}
+
+      {prop.control === "toggle" && (
+        <div
+          role="switch"
+          aria-checked={!!value}
+          aria-label={prop.label}
+          tabIndex={0}
+          onClick={() => onChange(!value)}
+          onKeyDown={handleToggleKeyDown}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 8,
+            cursor: "pointer",
+          }}
+        >
+          <div
+            style={{
+              width: 36,
+              height: 20,
+              borderRadius: 10,
+              backgroundColor: value
+                ? srgbToHex(tokens.interactive.srgb)
+                : srgbToHex(tokens.border.srgb),
+              position: "relative",
+              transition: "background-color 150ms ease",
+              flexShrink: 0,
+            }}
+          >
+            <div
+              style={{
+                width: 16,
+                height: 16,
+                borderRadius: 8,
+                backgroundColor: "#fff",
+                position: "absolute",
+                top: 2,
+                left: value ? 18 : 2,
+                transition: "left 150ms ease",
+              }}
+            />
+          </div>
+          <span
+            style={{
+              fontSize: 12,
+              color: srgbToHex(tokens.textSecondary.srgb),
+            }}
+          >
+            {value ? "true" : "false"}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/Sidebar.tsx

@@ -0,0 +1,332 @@
+import { useState } from "react";
+import { useTokens } from "@newtonedev/components";
+import type { ColorMode } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import type { ColorResult } from "newtone";
+import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { ConfiguratorAction } from "@newtonedev/configurator";
+import {
+  ColorsSection,
+  DynamicRangeSection,
+  IconsSection,
+  FontsSection,
+  OthersSection,
+} from "./sections";
+import { PresetSelector } from "./PresetSelector";
+import type { Preset } from "../types";
+
+const SIDEBAR_WIDTH = 360;
+
+const ACCORDION_SECTIONS = [
+  { id: "dynamic-range", label: "Dynamic Range" },
+  { id: "colors", label: "Colors" },
+  { id: "fonts", label: "Fonts" },
+  { id: "icons", label: "Icons" },
+  { id: "others", label: "Others" },
+] as const;
+
+function SectionIcon({ id }: { readonly id: string }) {
+  const props = {
+    width: 16,
+    height: 16,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round" as const,
+    strokeLinejoin: "round" as const,
+  };
+
+  switch (id) {
+    case "dynamic-range":
+      // Sun/contrast icon
+      return (
+        <svg {...props}>
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+      );
+    case "colors":
+      // Palette/droplet icon
+      return (
+        <svg {...props}>
+          <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
+        </svg>
+      );
+    case "fonts":
+      // Type/text icon
+      return (
+        <svg {...props}>
+          <polyline points="4 7 4 4 20 4 20 7" />
+          <line x1="9" y1="20" x2="15" y2="20" />
+          <line x1="12" y1="4" x2="12" y2="20" />
+        </svg>
+      );
+    case "icons":
+      // Grid icon
+      return (
+        <svg {...props}>
+          <rect x="3" y="3" width="7" height="7" />
+          <rect x="14" y="3" width="7" height="7" />
+          <rect x="3" y="14" width="7" height="7" />
+          <rect x="14" y="14" width="7" height="7" />
+        </svg>
+      );
+    case "others":
+      // Sliders icon
+      return (
+        <svg {...props}>
+          <line x1="4" y1="21" x2="4" y2="14" />
+          <line x1="4" y1="10" x2="4" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="12" />
+          <line x1="12" y1="8" x2="12" y2="3" />
+          <line x1="20" y1="21" x2="20" y2="16" />
+          <line x1="20" y1="12" x2="20" y2="3" />
+          <line x1="1" y1="14" x2="7" y2="14" />
+          <line x1="9" y1="8" x2="15" y2="8" />
+          <line x1="17" y1="16" x2="23" y2="16" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+}
+
+interface SidebarProps {
+  readonly state: ConfiguratorState;
+  readonly dispatch: (action: ConfiguratorAction) => void;
+  readonly previewColors: readonly (readonly ColorResult[])[];
+  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>;
+  readonly colorMode: ColorMode;
+  readonly onColorModeChange: (mode: ColorMode) => void;
+}
+
+export function Sidebar({
+  state,
+  dispatch,
+  previewColors,
+  isDirty,
+  onRevert,
+  presets,
+  activePresetId,
+  publishedPresetId,
+  onSwitchPreset,
+  onCreatePreset,
+  onRenamePreset,
+  onDeletePreset,
+  onDuplicatePreset,
+  colorMode,
+  onColorModeChange,
+}: SidebarProps) {
+  const tokens = useTokens();
+  const [openSections, setOpenSections] = useState<Set<string>>(
+    new Set(["dynamic-range", "colors"]),
+  );
+  const [hoveredSectionId, setHoveredSectionId] = useState<string | null>(null);
+
+  const borderColor = srgbToHex(tokens.border.srgb);
+  const bgColor = srgbToHex(tokens.background.srgb);
+  const hoverBg = `${borderColor}10`;
+
+  const toggleSection = (id: string) => {
+    setOpenSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const renderSectionContent = (sectionId: string) => {
+    switch (sectionId) {
+      case "dynamic-range":
+        return <DynamicRangeSection state={state} dispatch={dispatch} />;
+      case "colors":
+        return (
+          <ColorsSection
+            state={state}
+            dispatch={dispatch}
+            previewColors={previewColors}
+            colorMode={colorMode}
+            onColorModeChange={onColorModeChange}
+          />
+        );
+      case "icons":
+        return <IconsSection state={state} dispatch={dispatch} />;
+      case "fonts":
+        return <FontsSection state={state} dispatch={dispatch} />;
+      case "others":
+        return <OthersSection state={state} dispatch={dispatch} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div
+      style={{
+        width: SIDEBAR_WIDTH,
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        height: "100vh",
+        borderLeft: `1px solid ${borderColor}`,
+        backgroundColor: bgColor,
+      }}
+    >
+      {/* Sticky Header */}
+      <div
+        style={{
+          flexShrink: 0,
+          padding: "16px 20px",
+          borderBottom: `1px solid ${borderColor}`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <span
+          style={{
+            fontSize: 16,
+            fontWeight: 700,
+            color: srgbToHex(tokens.textPrimary.srgb),
+          }}
+        >
+          newtone
+        </span>
+        <PresetSelector
+          presets={presets}
+          activePresetId={activePresetId}
+          publishedPresetId={publishedPresetId}
+          onSwitchPreset={onSwitchPreset}
+          onCreatePreset={onCreatePreset}
+          onRenamePreset={onRenamePreset}
+          onDeletePreset={onDeletePreset}
+          onDuplicatePreset={onDuplicatePreset}
+        />
+      </div>
+
+      {/* Scrollable Accordion Area */}
+      <div
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          overflowX: "hidden",
+        }}
+      >
+        {ACCORDION_SECTIONS.map((section) => {
+          const isOpen = openSections.has(section.id);
+          const isHovered = hoveredSectionId === section.id;
+
+          return (
+            <div key={section.id}>
+              <button
+                onClick={() => toggleSection(section.id)}
+                onMouseEnter={() => setHoveredSectionId(section.id)}
+                onMouseLeave={() => setHoveredSectionId(null)}
+                aria-expanded={isOpen}
+                aria-controls={`section-${section.id}`}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  width: "100%",
+                  padding: "12px 20px",
+                  border: "none",
+                  borderBottom: `1px solid ${borderColor}`,
+                  background: isHovered ? hoverBg : "none",
+                  cursor: "pointer",
+                  fontSize: 14,
+                  fontWeight: 500,
+                  color: srgbToHex(tokens.textPrimary.srgb),
+                  transition: "background-color 100ms ease",
+                }}
+              >
+                <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  <SectionIcon id={section.id} />
+                  {section.label}
+                </span>
+                <svg
+                  width={12}
+                  height={12}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  style={{
+                    transform: isOpen ? "rotate(180deg)" : "none",
+                    transition: "transform 150ms ease",
+                  }}
+                >
+                  <polyline points="6 9 12 15 18 9" />
+                </svg>
+              </button>
+              {isOpen && (
+                <div
+                  id={`section-${section.id}`}
+                  role="region"
+                  aria-label={section.label}
+                  style={{
+                    padding: "16px 20px",
+                    borderBottom: `1px solid ${borderColor}`,
+                  }}
+                >
+                  {renderSectionContent(section.id)}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Sticky Footer */}
+      <div
+        style={{
+          flexShrink: 0,
+          padding: "12px 20px",
+          borderTop: `1px solid ${borderColor}`,
+        }}
+      >
+        <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,
+          }}
+        >
+          Revert Changes
+        </button>
+      </div>
+    </div>
+  );
+}