claude-code-swarm 0.3.2 → 0.3.4

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

@@ -1,103 +0,0 @@
-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

@@ -1,157 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,227 +0,0 @@
-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

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