@ryndesign/preview 0.1.1

package/client/src/components/TokenEditor.tsx

@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+
+interface Props {
+  tokens: any[];
+  onTokenUpdate: (path: string, value: unknown) => void;
+}
+
+function formatValue(value: any): string {
+  if (!value) return '';
+  switch (value.type) {
+    case 'color': return value.hex;
+    case 'dimension': return `${value.value}${value.unit}`;
+    case 'fontWeight': return String(value.value);
+    case 'duration': return `${value.value}${value.unit}`;
+    case 'number': return String(value.value);
+    default: return JSON.stringify(value);
+  }
+}
+
+export function TokenEditor({ tokens, onTokenUpdate }: Props) {
+  const [search, setSearch] = useState('');
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+
+  if (tokens.length === 0) {
+    return <p style={{ color: 'var(--text-secondary)', fontSize: 13 }}>No tokens loaded</p>;
+  }
+
+  // Group tokens by first path segment
+  const groups: Record<string, any[]> = {};
+  for (const token of tokens) {
+    const group = token.path[0];
+    if (!groups[group]) groups[group] = [];
+    groups[group].push(token);
+  }
+
+  const filteredGroups: Record<string, any[]> = {};
+  for (const [group, groupTokens] of Object.entries(groups)) {
+    const filtered = search
+      ? groupTokens.filter(t => t.path.join('.').toLowerCase().includes(search.toLowerCase()))
+      : groupTokens;
+    if (filtered.length > 0) {
+      filteredGroups[group] = filtered;
+    }
+  }
+
+  return (
+    <div>
+      <input
+        className="search-input"
+        type="text"
+        placeholder="Filter tokens..."
+        value={search}
+        onChange={e => setSearch(e.target.value)}
+      />
+      {Object.entries(filteredGroups).map(([group, groupTokens]) => (
+        <div className="token-group" key={group}>
+          <h3 onClick={() => setCollapsed(prev => ({ ...prev, [group]: !prev[group] }))}>
+            {collapsed[group] ? '▸' : '▾'} {group} ({groupTokens.length})
+          </h3>
+          {!collapsed[group] && groupTokens.map((token: any) => {
+            const path = token.path.join('.');
+            const value = token.$value;
+            return (
+              <div className="token-item" key={path}>
+                {value.type === 'color' && (
+                  <div className="color-swatch" style={{ background: value.hex }}>
+                    <input
+                      type="color"
+                      value={value.hex}
+                      onChange={e => onTokenUpdate(path, e.target.value)}
+                    />
+                  </div>
+                )}
+                {value.type === 'dimension' && (
+                  <input
+                    className="token-input"
+                    type="number"
+                    value={value.value}
+                    onChange={e => onTokenUpdate(path, `${e.target.value}${value.unit}`)}
+                    style={{ width: 60 }}
+                  />
+                )}
+                {value.type === 'fontWeight' && (
+                  <select
+                    className="token-input"
+                    value={value.value}
+                    onChange={e => onTokenUpdate(path, Number(e.target.value))}
+                    style={{ width: 80 }}
+                  >
+                    {[100, 200, 300, 400, 500, 600, 700, 800, 900].map(w => (
+                      <option key={w} value={w}>{w}</option>
+                    ))}
+                  </select>
+                )}
+                {value.type === 'number' && (
+                  <input
+                    className="token-input"
+                    type="number"
+                    value={value.value}
+                    onChange={e => onTokenUpdate(path, Number(e.target.value))}
+                    style={{ width: 60 }}
+                  />
+                )}
+                <span className="token-name">{token.path.slice(1).join('.')}</span>
+                <span className="token-value">{formatValue(value)}</span>
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}

package/client/src/hooks/useTokens.ts

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+
+export function useTokens(send: (msg: Record<string, unknown>) => void) {
+  const updateToken = useCallback((path: string, value: unknown, theme?: string) => {
+    send({
+      type: 'token-update',
+      theme,
+      path,
+      value,
+    });
+  }, [send]);
+
+  return { updateToken };
+}

package/client/src/hooks/useWebSocket.ts

@@ -0,0 +1,116 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+interface TokenSet {
+  metadata: { name?: string; description?: string };
+  tokens: any[];
+  groups: any[];
+  themes: { default: string; themes: Record<string, any> };
+}
+
+interface WsState {
+  connected: boolean;
+  tokenSet: TokenSet | null;
+  components: any[];
+  snippets: Record<string, string>;
+}
+
+export function useWebSocket() {
+  const [state, setState] = useState<WsState>({
+    connected: false,
+    tokenSet: null,
+    components: [],
+    snippets: {},
+  });
+  const wsRef = useRef<WebSocket | null>(null);
+
+  const send = useCallback((msg: Record<string, unknown>) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify(msg));
+    }
+  }, []);
+
+  const requestSnippets = useCallback((platform: string, component: string) => {
+    fetch(`/api/snippets?platform=${platform}&component=${component}`)
+      .then(r => r.json())
+      .then(data => {
+        setState(prev => ({ ...prev, snippets: { ...prev.snippets, [`${platform}:${component}`]: data.code ?? '' } }));
+      })
+      .catch(() => {});
+
+    fetch(`/api/snippets?platform=${platform}&type=tokens`)
+      .then(r => r.json())
+      .then(data => {
+        setState(prev => ({ ...prev, snippets: { ...prev.snippets, [`${platform}:tokens`]: data.code ?? '' } }));
+      })
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    function connect() {
+      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const ws = new WebSocket(`${protocol}//${location.host}`);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        setState(prev => ({ ...prev, connected: true }));
+      };
+
+      ws.onmessage = (event) => {
+        const msg = JSON.parse(event.data);
+        switch (msg.type) {
+          case 'init':
+          case 'full-state':
+            setState(prev => ({
+              ...prev,
+              tokenSet: msg.tokenSet,
+              components: msg.components ?? prev.components,
+            }));
+            break;
+          case 'rebuild-complete':
+            if (msg.tokenSet) {
+              setState(prev => ({
+                ...prev,
+                tokenSet: msg.tokenSet,
+                components: msg.components ?? prev.components,
+              }));
+            }
+            break;
+        }
+      };
+
+      ws.onclose = () => {
+        setState(prev => ({ ...prev, connected: false }));
+        setTimeout(connect, 2000);
+      };
+    }
+
+    connect();
+
+    // Fallback: fetch initial data via REST
+    fetch('/api/tokens').then(r => r.json()).then(data => {
+      setState(prev => {
+        if (prev.tokenSet) return prev;
+        return { ...prev, tokenSet: data };
+      });
+    }).catch(() => {});
+
+    fetch('/api/components').then(r => r.json()).then(data => {
+      if (Array.isArray(data)) {
+        setState(prev => ({ ...prev, components: data }));
+      }
+    }).catch(() => {});
+
+    return () => {
+      wsRef.current?.close();
+    };
+  }, []);
+
+  return {
+    connected: state.connected,
+    tokenSet: state.tokenSet,
+    components: state.components,
+    snippets: state.snippets,
+    send,
+    requestSnippets,
+  };
+}

package/client/src/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);