design-folio 0.1.0

package/src/viewer/StatePicker.jsx

@@ -0,0 +1,83 @@
+import { LayersIcon } from '../icons.jsx';
+
+/**
+ * Groups an array of state objects by their `group` field.
+ * Preserves the order groups are first encountered.
+ * States without a `group` field are placed under 'Ungrouped'.
+ *
+ * @param {Array} states
+ * @returns {Array<{ group: string, states: Array }>}
+ */
+export function groupStates(states) {
+  const order = [];
+  const map = {};
+
+  for (const s of states) {
+    const group = s.group || 'Ungrouped';
+    if (!map[group]) {
+      map[group] = [];
+      order.push(group);
+    }
+    map[group].push(s);
+  }
+
+  return order.map((group) => ({ group, states: map[group] }));
+}
+
+/**
+ * StatePicker renders a sidebar listing all prototype states grouped by their
+ * `group` field. Clicking an item calls `onSelect(key)`.
+ *
+ * Props:
+ *   states    – array of { key, name, group?, state }
+ *   activeKey – key of the currently active state
+ *   onSelect  – callback(key) when a state is clicked
+ */
+export function StatePicker({ states, activeKey, onSelect }) {
+  const groups = groupStates(states);
+
+  return (
+    <aside aria-label="State picker" className="flex flex-col w-56 shrink-0 h-full overflow-y-auto bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-700">
+      {/* Header */}
+      <div className="flex items-center gap-2 px-3 py-3 border-b border-neutral-200 dark:border-neutral-700">
+        <LayersIcon className="w-4 h-4 text-neutral-500 dark:text-neutral-400" />
+        <span className="text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
+          States
+        </span>
+      </div>
+
+      {/* Groups */}
+      <div className="flex flex-col gap-1 py-2">
+        {groups.map(({ group, states: groupedStates }) => (
+          <section key={group}>
+            <h3 className="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-neutral-400 dark:text-neutral-500">
+              {group}
+            </h3>
+            <ul>
+              {groupedStates.map((s) => {
+                const isActive = s.key === activeKey;
+                return (
+                  <li
+                    key={s.key}
+                    aria-current={isActive ? 'true' : undefined}
+                    onClick={() => onSelect(s.key)}
+                    className={[
+                      'mx-1 px-2 py-1.5 rounded text-sm cursor-pointer select-none',
+                      isActive
+                        ? 'bg-black dark:bg-white text-white dark:text-black'
+                        : 'text-neutral-800 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800',
+                    ].join(' ')}
+                  >
+                    {s.name}
+                  </li>
+                );
+              })}
+            </ul>
+          </section>
+        ))}
+      </div>
+    </aside>
+  );
+}
+
+export default StatePicker;

package/src/viewer/TabNav.jsx

@@ -0,0 +1,40 @@
+import { PlayIcon, GridIcon, ClockIcon, DocumentIcon } from '../icons.jsx';
+
+const TABS = [
+  { id: 'prototype', label: 'Prototype', Icon: PlayIcon },
+  { id: 'screens', label: 'Screens', Icon: GridIcon },
+  { id: 'changelog', label: 'Changelog', Icon: ClockIcon },
+  { id: 'documents', label: 'Documents', Icon: DocumentIcon },
+];
+
+const activeClasses =
+  'font-medium text-black dark:text-white border-b-2 border-black dark:border-white';
+const inactiveClasses =
+  'font-medium text-neutral-500 dark:text-neutral-400 border-b-2 border-transparent hover:text-black dark:hover:text-white hover:border-neutral-300 dark:hover:border-neutral-500';
+const baseClasses = 'transition-colors cursor-pointer';
+
+export default function TabNav({ activeTab, onTabChange }) {
+  return (
+    <nav aria-label="Viewer tabs">
+      <ul className="flex bg-white dark:bg-neutral-900 border-b border-neutral-300 dark:border-neutral-700 list-none m-0 p-0" role="tablist">
+        {TABS.map(({ id, label, Icon }) => {
+          const isActive = activeTab === id;
+          return (
+            <li
+              key={id}
+              role="tab"
+              aria-selected={isActive}
+              aria-label={label}
+              tabIndex={isActive ? 0 : -1}
+              className={`flex items-center gap-1.5 px-5 py-2.5 text-sm ${baseClasses} ${isActive ? activeClasses : inactiveClasses}`}
+              onClick={() => onTabChange(id)}
+            >
+              <Icon className="w-4 h-4" />
+              <span>{label}</span>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

package/src/viewer/ThemeToggle.jsx

@@ -0,0 +1,23 @@
+import { SunIcon, MoonIcon } from '../icons.jsx';
+
+export default function ThemeToggle({ isDark, onToggle }) {
+  return (
+    <button
+      className="flex items-center gap-1.5 px-3 py-1.5 border border-neutral-300 dark:border-neutral-600 rounded-full hover:border-neutral-400 dark:hover:border-neutral-500 transition-colors cursor-pointer"
+      aria-label="Toggle theme"
+      role="switch"
+      aria-checked={isDark}
+      onClick={onToggle}
+    >
+      <SunIcon className={`w-4 h-4 ${isDark ? 'text-neutral-400' : 'text-black'}`} />
+      <span className="w-9 h-5 bg-neutral-300 dark:bg-neutral-600 rounded-full relative block">
+        <span
+          className={`w-4 h-4 bg-white rounded-full absolute top-0.5 shadow-sm block transition-all ${
+            isDark ? 'right-0.5' : 'left-0.5'
+          }`}
+        />
+      </span>
+      <MoonIcon className={`w-4 h-4 ${isDark ? 'text-white' : 'text-neutral-400'}`} />
+    </button>
+  );
+}