claude-code-swarm 0.0.1 → 0.3.3

package/references/openteams/editor/src/components/nodes/ChannelNode.tsx

@@ -0,0 +1,103 @@
+import { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import type { ChannelNodeData } from '../../types/editor';
+import { getChannelColors } from './node-styles';
+
+function ChannelNodeComponent({ data, selected }: NodeProps & { data: ChannelNodeData }) {
+  const colors = getChannelColors();
+  const maxSignals = 5;
+  const displaySignals = data.signals.slice(0, maxSignals);
+  const extraCount = data.signals.length - displaySignals.length;
+
+  return (
+    <div
+      style={{
+        borderColor: selected ? 'var(--color-accent)' : colors.border,
+        borderWidth: '2px',
+        borderStyle: 'solid',
+        backgroundColor: colors.bg,
+        borderRadius: '12px',
+        padding: '0',
+        minWidth: '200px',
+        maxWidth: '240px',
+        fontSize: '13px',
+        boxShadow: selected ? '0 0 0 2px var(--color-accent)' : '0 1px 3px rgba(0,0,0,0.1)',
+        cursor: 'pointer',
+      }}
+    >
+      <Handle type="target" position={Position.Top} style={{ background: colors.badge }} />
+      <Handle type="source" position={Position.Bottom} style={{ background: colors.badge }} />
+
+      {/* Header */}
+      <div style={{
+        padding: '8px 10px',
+        borderBottom: '1px solid var(--color-border-subtle)',
+      }}>
+        <div style={{
+          fontWeight: 600,
+          color: 'var(--color-text)',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '4px',
+        }}>
+          <span style={{ color: colors.badge, fontSize: '14px' }}>{'\u25C6'}</span>
+          {data.channelName}
+        </div>
+        {data.description && (
+          <div style={{
+            color: 'var(--color-text-muted)',
+            fontSize: '11px',
+            marginTop: '2px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}>
+            {data.description}
+          </div>
+        )}
+      </div>
+
+      {/* Signals */}
+      <div style={{
+        padding: '6px 10px',
+        borderBottom: '1px solid var(--color-border-subtle)',
+      }}>
+        {displaySignals.map(signal => (
+          <div key={signal} style={{
+            color: 'var(--color-text-secondary)',
+            fontSize: '11px',
+            fontFamily: 'monospace',
+            padding: '1px 0',
+          }}>
+            {signal}
+          </div>
+        ))}
+        {extraCount > 0 && (
+          <div style={{
+            color: 'var(--color-text-muted)',
+            fontSize: '11px',
+            fontStyle: 'italic',
+          }}>
+            +{extraCount} more
+          </div>
+        )}
+      </div>
+
+      {/* Summary */}
+      <div style={{
+        padding: '5px 10px',
+        display: 'flex',
+        gap: '8px',
+        color: 'var(--color-text-muted)',
+        fontSize: '11px',
+      }}>
+        <span>{data.emitterCount} emitter{data.emitterCount !== 1 ? 's' : ''}</span>
+        <span>{'\u00B7'}</span>
+        <span>{data.subscriberCount} subscriber{data.subscriberCount !== 1 ? 's' : ''}</span>
+      </div>
+    </div>
+  );
+}
+
+export const ChannelNode = memo(ChannelNodeComponent);

package/references/openteams/editor/src/components/nodes/RoleNode.tsx

@@ -0,0 +1,157 @@
+import { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import type { RoleNodeData } from '../../types/editor';
+import { getRoleColors, getBorderStyle, TOPOLOGY_BADGES } from './node-styles';
+
+function RoleNodeComponent({ data, selected }: NodeProps & { data: RoleNodeData }) {
+  const hasErrors = data.errors.length > 0;
+  const hasWarnings = data.warnings.length > 0;
+  const colors = getRoleColors(data.topologyPosition);
+  const border = getBorderStyle(data.topologyPosition, hasErrors, hasWarnings, !!selected);
+  const badge = TOPOLOGY_BADGES[data.topologyPosition];
+
+  const subsCount = data.subscribesTo.length;
+  const emitsCount = data.emits.length;
+  const routesCount = data.peerRoutesOut + data.peerRoutesIn;
+
+  const capDisplay = data.capabilities.slice(0, 2);
+  const capExtra = data.capabilities.length - capDisplay.length;
+
+  return (
+    <div
+      style={{
+        borderColor: border.borderColor,
+        borderWidth: border.borderWidth,
+        borderStyle: border.borderStyle,
+        backgroundColor: colors.bg,
+        borderRadius: '8px',
+        padding: '0',
+        minWidth: '240px',
+        maxWidth: '280px',
+        fontSize: '13px',
+        boxShadow: selected ? '0 0 0 2px var(--color-accent)' : '0 1px 3px rgba(0,0,0,0.1)',
+        cursor: 'pointer',
+      }}
+    >
+      <Handle type="target" position={Position.Top} style={{ background: colors.badge }} />
+      <Handle type="source" position={Position.Bottom} style={{ background: colors.badge }} />
+
+      {/* Header */}
+      <div style={{
+        padding: '8px 10px',
+        borderBottom: '1px solid var(--color-border-subtle)',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+      }}>
+        <div style={{ minWidth: 0, flex: 1 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            {badge && (
+              <span style={{ color: colors.badge, fontSize: '14px' }}>{badge}</span>
+            )}
+            <span style={{
+              fontWeight: 600,
+              color: 'var(--color-text)',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}>
+              {data.roleName}
+            </span>
+          </div>
+          {data.displayName && data.displayName !== data.roleName && (
+            <div style={{
+              color: 'var(--color-text-muted)',
+              fontSize: '12px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              marginTop: '1px',
+            }}>
+              {data.displayName}
+            </div>
+          )}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '4px', flexShrink: 0 }}>
+          {data.model && (
+            <span style={{
+              background: colors.badge,
+              color: '#fff',
+              padding: '1px 6px',
+              borderRadius: '4px',
+              fontSize: '11px',
+              fontWeight: 500,
+            }}>
+              {data.model}
+            </span>
+          )}
+          {hasErrors && (
+            <span style={{
+              background: 'var(--color-danger)',
+              color: '#fff',
+              padding: '1px 5px',
+              borderRadius: '4px',
+              fontSize: '11px',
+              fontWeight: 600,
+            }}>
+              {data.errors.length}
+            </span>
+          )}
+          {hasWarnings && !hasErrors && (
+            <span style={{
+              background: 'var(--color-warning)',
+              color: '#000',
+              padding: '1px 5px',
+              borderRadius: '4px',
+              fontSize: '11px',
+              fontWeight: 600,
+            }}>
+              {data.warnings.length}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Capabilities */}
+      {data.capabilities.length > 0 && (
+        <div style={{
+          padding: '6px 10px',
+          borderBottom: '1px solid var(--color-border-subtle)',
+          color: 'var(--color-text-muted)',
+          fontSize: '12px',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}>
+          {capDisplay.join(' \u00B7 ')}
+          {capExtra > 0 && ` \u00B7 +${capExtra}`}
+        </div>
+      )}
+
+      {/* Signal summary */}
+      <div style={{
+        padding: '6px 10px',
+        display: 'flex',
+        gap: '8px',
+        color: 'var(--color-text-muted)',
+        fontSize: '12px',
+      }}>
+        {emitsCount > 0 && (
+          <span title="Signals emitted">{'\u25B2'} emits {emitsCount}</span>
+        )}
+        {subsCount > 0 && (
+          <span title="Channel subscriptions">{'\u25BC'} subs {subsCount}</span>
+        )}
+        {routesCount > 0 && (
+          <span title="Peer routes">{'\u2192'} routes {routesCount}</span>
+        )}
+        {emitsCount === 0 && subsCount === 0 && routesCount === 0 && (
+          <span style={{ fontStyle: 'italic' }}>no communication</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export const RoleNode = memo(RoleNodeComponent);

package/references/openteams/editor/src/components/nodes/node-styles.ts

@@ -0,0 +1,101 @@
+import type { RoleNodeData } from '../../types/editor';
+import { useThemeStore } from '../../stores/theme-store';
+
+export type TopologyPosition = RoleNodeData['topologyPosition'];
+
+export interface NodeColors {
+  border: string;
+  bg: string;
+  badge: string;
+}
+
+const ROLE_COLORS: Record<TopologyPosition, NodeColors> = {
+  root: {
+    border: '#3b82f6',
+    bg: '#eff6ff',       // blue-50
+    badge: '#3b82f6',
+  },
+  companion: {
+    border: '#14b8a6',
+    bg: '#f0fdfa',       // teal-50
+    badge: '#14b8a6',
+  },
+  spawned: {
+    border: '#6b7280',
+    bg: '#f9fafb',       // gray-50
+    badge: '#6b7280',
+  },
+};
+
+const DARK_ROLE_COLORS: Record<TopologyPosition, NodeColors> = {
+  root: {
+    border: '#3b82f6',
+    bg: '#1e3a5f',
+    badge: '#3b82f6',
+  },
+  companion: {
+    border: '#14b8a6',
+    bg: '#134e4a',
+    badge: '#14b8a6',
+  },
+  spawned: {
+    border: '#6b7280',
+    bg: '#1f2937',
+    badge: '#6b7280',
+  },
+};
+
+function isDark(): boolean {
+  return useThemeStore.getState().resolvedTheme === 'dark';
+}
+
+export function getRoleColors(position: TopologyPosition): NodeColors {
+  return isDark() ? DARK_ROLE_COLORS[position] : ROLE_COLORS[position];
+}
+
+export const CHANNEL_COLORS: NodeColors = {
+  border: '#8b5cf6',
+  bg: '#faf5ff',       // purple-50
+  badge: '#8b5cf6',
+};
+
+export const DARK_CHANNEL_COLORS: NodeColors = {
+  border: '#8b5cf6',
+  bg: '#2e1065',
+  badge: '#8b5cf6',
+};
+
+export function getChannelColors(): NodeColors {
+  return isDark() ? DARK_CHANNEL_COLORS : CHANNEL_COLORS;
+}
+
+export const TOPOLOGY_BADGES: Record<TopologyPosition, string> = {
+  root: '\u2605',       // ★
+  companion: '\u25C6',  // ◆
+  spawned: '',
+};
+
+export function getBorderStyle(
+  position: TopologyPosition,
+  hasErrors: boolean,
+  hasWarnings: boolean,
+  isSelected: boolean,
+): { borderColor: string; borderWidth: string; borderStyle: string } {
+  const colors = getRoleColors(position);
+
+  if (hasErrors) {
+    return { borderColor: 'var(--color-danger)', borderWidth: '2px', borderStyle: 'solid' };
+  }
+  if (hasWarnings) {
+    return { borderColor: 'var(--color-warning)', borderWidth: '2px', borderStyle: 'solid' };
+  }
+  if (isSelected) {
+    return { borderColor: 'var(--color-accent)', borderWidth: '2px', borderStyle: 'solid' };
+  }
+
+  return {
+    borderColor: colors.border,
+    borderWidth: position === 'spawned' ? '1px' : '2px',
+    borderStyle: position === 'spawned' ? 'dashed' : 'solid',
+  };
+}

package/references/openteams/editor/src/components/sidebar/Sidebar.tsx

@@ -0,0 +1,227 @@
+import { useConfigStore } from '../../stores/config-store';
+import { useCanvasStore } from '../../stores/canvas-store';
+import { useHistoryStore } from '../../stores/history-store';
+import { BUNDLED_TEMPLATES } from '../../lib/bundled-templates';
+import { loadTemplate } from '../../lib/load-template';
+import type { RoleNodeData } from '../../types/editor';
+
+export function Sidebar() {
+  const roles = useConfigStore(s => s.roles);
+  const channels = useConfigStore(s => s.channels);
+  const topologyRoot = useConfigStore(s => s.topologyRoot);
+  const topologyCompanions = useConfigStore(s => s.topologyCompanions);
+  const setSelection = useCanvasStore(s => s.setSelection);
+  const handleLoadTemplate = (key: string) => {
+    const template = BUNDLED_TEMPLATES[key];
+    if (template) {
+      loadTemplate(template.manifest, template.roles);
+    }
+  };
+
+  const handleAddRole = () => {
+    const store = useConfigStore.getState();
+    const canvas = useCanvasStore.getState();
+    const history = useHistoryStore.getState();
+
+    let name = 'new-role';
+    let i = 1;
+    while (store.roles.has(name)) {
+      name = `new-role-${i++}`;
+    }
+
+    history.pushSnapshot();
+
+    store.setRole(name, {
+      name,
+      displayName: name,
+      description: '',
+      capabilities: [],
+    });
+
+    const data: RoleNodeData = {
+      kind: 'role',
+      roleName: name,
+      displayName: name,
+      description: '',
+      topologyPosition: 'spawned',
+      capabilities: [],
+      emits: [],
+      subscribesTo: [],
+      peerRoutesOut: 0,
+      peerRoutesIn: 0,
+      canSpawn: [],
+      errors: [],
+      warnings: [],
+    };
+
+    canvas.addNode({
+      id: `role-${name}`,
+      type: 'role',
+      position: { x: 100 + Math.random() * 200, y: 100 + Math.random() * 200 },
+      data,
+    });
+
+    setSelection(`role-${name}`, null);
+  };
+
+  const handleAddChannel = () => {
+    const store = useConfigStore.getState();
+    const canvas = useCanvasStore.getState();
+    const history = useHistoryStore.getState();
+
+    let name = 'new_channel';
+    let i = 1;
+    while (store.channels[name]) {
+      name = `new_channel_${i++}`;
+    }
+
+    history.pushSnapshot();
+
+    store.setChannel(name, { signals: ['NEW_SIGNAL'] });
+
+    canvas.addNode({
+      id: `channel-${name}`,
+      type: 'channel',
+      position: { x: 300 + Math.random() * 200, y: 100 + Math.random() * 200 },
+      data: {
+        kind: 'channel',
+        channelName: name,
+        description: '',
+        signals: ['NEW_SIGNAL'],
+        emitterCount: 0,
+        subscriberCount: 0,
+      },
+    });
+
+    setSelection(`channel-${name}`, null);
+  };
+
+  return (
+    <div style={{
+      width: '240px',
+      background: 'var(--color-sidebar)',
+      borderRight: '1px solid var(--color-border)',
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      flexShrink: 0,
+    }}>
+      {/* Block Palette */}
+      <div style={{ padding: '12px', borderBottom: '1px solid var(--color-border)' }}>
+        <div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--color-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+          Add Blocks
+        </div>
+        <div style={{ display: 'flex', gap: '6px' }}>
+          <button onClick={handleAddRole} style={blockBtnStyle('#3b82f6')} data-testid="add-role">
+            + Role
+          </button>
+          <button onClick={handleAddChannel} style={blockBtnStyle('#8b5cf6')} data-testid="add-channel">
+            + Channel
+          </button>
+        </div>
+      </div>
+
+      {/* Config Tree */}
+      <div style={{ flex: 1, overflow: 'auto', padding: '12px' }}>
+        <div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--color-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+          Roles ({roles.size})
+        </div>
+        {Array.from(roles.keys()).map(name => {
+          const isRoot = name === topologyRoot;
+          const isCompanion = topologyCompanions.includes(name);
+          return (
+            <div
+              key={name}
+              onClick={() => setSelection(`role-${name}`, null)}
+              data-testid={`sidebar-role-${name}`}
+              style={{
+                padding: '4px 8px',
+                cursor: 'pointer',
+                fontSize: '13px',
+                color: 'var(--color-text)',
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '4px',
+              }}
+              onMouseOver={e => (e.currentTarget.style.background = 'var(--color-border)')}
+              onMouseOut={e => (e.currentTarget.style.background = 'none')}
+            >
+              <span style={{ color: isRoot ? '#3b82f6' : isCompanion ? '#14b8a6' : '#6b7280', fontSize: '11px' }}>
+                {isRoot ? '\u2605' : isCompanion ? '\u25C6' : '\u25CB'}
+              </span>
+              {name}
+            </div>
+          );
+        })}
+
+        <div style={{ fontSize: '11px', fontWeight: 600, color: 'var(--color-text-muted)', marginTop: '16px', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+          Channels ({Object.keys(channels).length})
+        </div>
+        {Object.keys(channels).map(name => (
+          <div
+            key={name}
+            onClick={() => setSelection(`channel-${name}`, null)}
+            data-testid={`sidebar-channel-${name}`}
+            style={{
+              padding: '4px 8px',
+              cursor: 'pointer',
+              fontSize: '12px',
+              color: 'var(--color-text)',
+              borderRadius: '4px',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+            }}
+            onMouseOver={e => (e.currentTarget.style.background = 'var(--color-border)')}
+            onMouseOut={e => (e.currentTarget.style.background = 'none')}
+          >
+            <span style={{ color: '#8b5cf6', fontSize: '11px' }}>{'\u25C6'}</span>
+            {name}
+          </div>
+        ))}
+      </div>
+
+      {/* Template Selector */}
+      <div style={{ padding: '12px', borderTop: '1px solid var(--color-border)' }}>
+        <div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--color-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+          Templates
+        </div>
+        <select
+          value=""
+          onChange={e => { if (e.target.value) handleLoadTemplate(e.target.value); }}
+          data-testid="template-select"
+          style={{
+            width: '100%',
+            padding: '6px 8px',
+            fontSize: '13px',
+            border: '1px solid var(--color-border)',
+            borderRadius: '4px',
+            background: 'var(--color-elevated)',
+            color: 'var(--color-text)',
+            boxSizing: 'border-box',
+          }}
+        >
+          <option value="" disabled>Select a template...</option>
+          {Object.keys(BUNDLED_TEMPLATES).sort().map(key => (
+            <option key={key} value={key}>{key}</option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}
+
+function blockBtnStyle(color: string): React.CSSProperties {
+  return {
+    flex: 1,
+    background: color,
+    color: '#fff',
+    border: 'none',
+    borderRadius: '6px',
+    padding: '8px',
+    cursor: 'pointer',
+    fontWeight: 600,
+    fontSize: '13px',
+  };
+}

package/references/openteams/editor/src/components/toolbar/ExportModal.tsx

@@ -0,0 +1,110 @@
+import { useState, useMemo } from 'react';
+import JSZip from 'jszip';
+import { compileToYaml } from '../../lib/compiler';
+import type { CompiledFile } from '../../lib/compiler';
+
+interface Props {
+  onClose: () => void;
+}
+
+export function ExportModal({ onClose }: Props) {
+  const files = useMemo(() => compileToYaml(), []);
+  const [activeFile, setActiveFile] = useState(0);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (content: string) => {
+    await navigator.clipboard.writeText(content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleDownloadZip = async () => {
+    const zip = new JSZip();
+    for (const f of files) {
+      zip.file(f.path, f.content);
+    }
+    const blob = await zip.generateAsync({ type: 'blob' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'template.zip';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div style={overlayStyle} onClick={onClose} data-testid="export-modal-overlay">
+      <div style={modalStyle} onClick={e => e.stopPropagation()} data-testid="export-modal">
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+          <h3 style={{ margin: 0, fontSize: '17px', color: 'var(--color-text)' }}>Export Template</h3>
+          <button onClick={onClose} style={closeBtnStyle} data-testid="export-close">{'\u00D7'}</button>
+        </div>
+
+        {/* File tabs */}
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px', marginBottom: '12px' }}>
+          {files.map((f, i) => (
+            <button
+              key={f.path}
+              onClick={() => setActiveFile(i)}
+              data-testid={`export-tab-${f.path}`}
+              style={{
+                padding: '4px 10px',
+                fontSize: '12px',
+                border: '1px solid var(--color-border)',
+                borderRadius: '4px',
+                background: i === activeFile ? 'var(--color-accent)' : 'var(--color-bg)',
+                color: i === activeFile ? '#fff' : 'var(--color-text-muted)',
+                cursor: 'pointer',
+                fontFamily: 'monospace',
+              }}
+            >
+              {f.path}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div style={{ position: 'relative' }}>
+          <pre style={preStyle} data-testid="export-content">
+            {files[activeFile]?.content || ''}
+          </pre>
+          <button
+            onClick={() => handleCopy(files[activeFile]?.content || '')}
+            style={{ ...copyBtnStyle, position: 'absolute', top: '8px', right: '8px' }}
+          >
+            {copied ? 'Copied!' : 'Copy'}
+          </button>
+        </div>
+
+        {/* Actions */}
+        <div style={{ display: 'flex', gap: '8px', marginTop: '12px', justifyContent: 'flex-end' }}>
+          <button onClick={handleDownloadZip} style={actionBtnStyle}>
+            Download All
+          </button>
+          <button onClick={onClose} style={{ ...actionBtnStyle, background: 'var(--color-border)', color: 'var(--color-text)' }}>
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const overlayStyle: React.CSSProperties = {
+  position: 'fixed', inset: 0, background: 'var(--color-overlay)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000,
+};
+const modalStyle: React.CSSProperties = {
+  background: 'var(--color-surface)', borderRadius: '12px', padding: '20px', width: '720px', maxHeight: '80vh', display: 'flex', flexDirection: 'column', boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+};
+const closeBtnStyle: React.CSSProperties = {
+  background: 'none', border: 'none', fontSize: '20px', cursor: 'pointer', color: 'var(--color-text-muted)',
+};
+const preStyle: React.CSSProperties = {
+  background: 'var(--color-bg)', border: '1px solid var(--color-border)', borderRadius: '8px', padding: '12px', fontSize: '12px', fontFamily: 'monospace', overflow: 'auto', maxHeight: '400px', whiteSpace: 'pre-wrap', margin: 0, color: 'var(--color-text)',
+};
+const copyBtnStyle: React.CSSProperties = {
+  background: 'var(--color-accent)', color: '#fff', border: 'none', borderRadius: '4px', padding: '4px 10px', fontSize: '12px', cursor: 'pointer',
+};
+const actionBtnStyle: React.CSSProperties = {
+  background: 'var(--color-accent)', color: '#fff', border: 'none', borderRadius: '6px', padding: '8px 16px', fontSize: '14px', cursor: 'pointer', fontWeight: 600,
+};