@newtonedev/editor 0.1.4 → 0.1.6

package/src/preview/IconBrowserView.tsx

@@ -0,0 +1,187 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Icon, useTokens, ICON_CATALOG } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+
+interface IconBrowserViewProps {
+  readonly selectedIconName: string;
+  readonly onIconSelect: (name: string) => void;
+}
+
+export function IconBrowserView({
+  selectedIconName,
+  onIconSelect,
+}: IconBrowserViewProps) {
+  const tokens = useTokens();
+  const [search, setSearch] = useState("");
+  const [hoveredIcon, setHoveredIcon] = useState<string | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const filteredCategories = useMemo(() => {
+    const q = search.toLowerCase().trim();
+    if (!q) return ICON_CATALOG;
+    return ICON_CATALOG
+      .map((cat) => ({
+        ...cat,
+        icons: cat.icons.filter((name) => name.includes(q)),
+      }))
+      .filter((cat) => cat.icons.length > 0);
+  }, [search]);
+
+  // Scroll to selected icon when it changes externally (user types in sidebar)
+  useEffect(() => {
+    if (!selectedIconName || !scrollRef.current) return;
+    const el = scrollRef.current.querySelector(
+      `[data-icon="${selectedIconName}"]`,
+    );
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [selectedIconName]);
+
+  const accentColor = srgbToHex(tokens.accent.fill.srgb);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0,
+      }}
+    >
+      {/* Search */}
+      <div style={{ padding: "0 32px", flexShrink: 0 }}>
+        <div style={{ position: "relative" }}>
+          <Icon
+            name="search"
+            size={18}
+            color={srgbToHex(tokens.textTertiary.srgb)}
+            style={{
+              position: "absolute",
+              left: 10,
+              top: 9,
+              pointerEvents: "none",
+            }}
+          />
+          <input
+            type="text"
+            placeholder="Search icons..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            style={{
+              width: "100%",
+              padding: "8px 12px 8px 34px",
+              borderRadius: 8,
+              border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+              backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+              color: srgbToHex(tokens.textPrimary.srgb),
+              fontSize: 13,
+              boxSizing: "border-box",
+              outline: "none",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Icon grid */}
+      <div
+        ref={scrollRef}
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          padding: "16px 32px 32px",
+        }}
+      >
+        {filteredCategories.length === 0 && (
+          <p
+            style={{
+              fontSize: 13,
+              color: srgbToHex(tokens.textTertiary.srgb),
+              textAlign: "center",
+              marginTop: 32,
+            }}
+          >
+            No icons found
+          </p>
+        )}
+
+        {filteredCategories.map((category) => (
+          <div key={category.id} style={{ marginBottom: 24 }}>
+            <h3
+              style={{
+                fontSize: 12,
+                fontWeight: 600,
+                color: srgbToHex(tokens.textSecondary.srgb),
+                textTransform: "uppercase",
+                letterSpacing: 0.5,
+                margin: "0 0 8px",
+              }}
+            >
+              {category.label}
+            </h3>
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fill, minmax(80px, 1fr))",
+                gap: 6,
+              }}
+            >
+              {category.icons.map((name) => {
+                const isSelected = selectedIconName === name;
+                const isHovered = hoveredIcon === name;
+
+                const borderColor = isSelected
+                  ? accentColor
+                  : isHovered
+                    ? `${accentColor}66`
+                    : "transparent";
+
+                return (
+                  <button
+                    key={name}
+                    data-icon={name}
+                    onClick={() => onIconSelect(name)}
+                    onMouseEnter={() => setHoveredIcon(name)}
+                    onMouseLeave={() => setHoveredIcon(null)}
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: 4,
+                      padding: "8px 4px 6px",
+                      borderRadius: 8,
+                      border: `2px solid ${borderColor}`,
+                      backgroundColor: isSelected
+                        ? srgbToHex(tokens.backgroundElevated.srgb)
+                        : "transparent",
+                      cursor: "pointer",
+                      transition: "border-color 150ms ease",
+                    }}
+                  >
+                    <Icon name={name} size={40} />
+                    <span
+                      style={{
+                        fontSize: 10,
+                        color: isSelected
+                          ? accentColor
+                          : srgbToHex(tokens.textTertiary.srgb),
+                        fontWeight: isSelected ? 600 : 400,
+                        maxWidth: "100%",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {name}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/preview/OverviewView.tsx

@@ -128,7 +128,7 @@ function ComponentCard({
         padding: 20,
         borderRadius: 12,
         border: `1px solid ${srgbToHex(
-          isHovered ? tokens.interactive.srgb : tokens.border.srgb,
+          isHovered ? tokens.accent.fill.srgb : tokens.border.srgb,
         )}`,
         backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
         cursor: "pointer",

package/src/types.ts

@@ -15,8 +15,6 @@ export interface Preset {
 
 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 }

package/dist/components/ThemeBar.d.ts

@@ -1,8 +0,0 @@
-import type { ThemeName } from "../types";
-interface ThemeBarProps {
-    readonly activeTheme: ThemeName;
-    readonly onThemeChange: (theme: ThemeName) => void;
-}
-export declare function ThemeBar({ activeTheme, onThemeChange }: ThemeBarProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ThemeBar.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeBar.d.ts","sourceRoot":"","sources":["../../src/components/ThemeBar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,UAAU,aAAa;IACrB,QAAQ,CAAC,WAAW,EAAE,SAAS,CAAC;IAChC,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACpD;AASD,wBAAgB,QAAQ,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,aAAa,2CA0DrE"}

package/src/components/ThemeBar.tsx

@@ -1,76 +0,0 @@
-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>
-  );
-}