{
  "id": "unit-converter",
  "name": "Unit Converter",
  "category": "utilities",
  "tags": ["converter", "units", "measurement", "metric"],
  "description": "Convert length, weight, temperature, volume.",
  "triggers": ["unit converter", "convert units", "measurement", "metric"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "const UnitConverter = () => {\n  const [category, setCategory] = React.useState('length');\n  const [from, setFrom] = React.useState('m');\n  const [to, setTo] = React.useState('ft');\n  const [value, setValue] = React.useState(1);\n  const [result, setResult] = React.useState('');\n\n  const units = {\n    length: {\n      m: 1, km: 1000, cm: 0.01, mm: 0.001, mi: 1609.34, yd: 0.9144, ft: 0.3048, in: 0.0254\n    },\n    weight: {\n      kg: 1, g: 0.001, mg: 0.000001, lb: 0.453592, oz: 0.0283495, st: 6.35029\n    },\n    temperature: {\n      C: 'C', F: 'F', K: 'K'\n    },\n    volume: {\n      l: 1, ml: 0.001, gal: 3.78541, qt: 0.946353, pt: 0.473176, cup: 0.236588, floz: 0.0295735\n    }\n  };\n\n  const unitLabels = {\n    length: { m: 'Meters', km: 'Kilometers', cm: 'Centimeters', mm: 'Millimeters', mi: 'Miles', yd: 'Yards', ft: 'Feet', in: 'Inches' },\n    weight: { kg: 'Kilograms', g: 'Grams', mg: 'Milligrams', lb: 'Pounds', oz: 'Ounces', st: 'Stone' },\n    temperature: { C: 'Celsius', F: 'Fahrenheit', K: 'Kelvin' },\n    volume: { l: 'Liters', ml: 'Milliliters', gal: 'Gallons (US)', qt: 'Quarts', pt: 'Pints', cup: 'Cups', floz: 'Fluid Ounces' }\n  };\n\n  React.useEffect(() => {\n    const keys = Object.keys(units[category]);\n    setFrom(keys[0]);\n    setTo(keys[1] || keys[0]);\n    setResult('');\n  }, [category]);\n\n  const convert = () => {\n    const v = Number(value);\n    if (isNaN(v)) { setResult('Invalid input'); return; }\n    if (category === 'temperature') {\n      let celsius;\n      if (from === 'C') celsius = v;\n      else if (from === 'F') celsius = (v - 32) * 5 / 9;\n      else if (from === 'K') celsius = v - 273.15;\n      let out;\n      if (to === 'C') out = celsius;\n      else if (to === 'F') out = celsius * 9 / 5 + 32;\n      else if (to === 'K') out = celsius + 273.15;\n      setResult(out.toFixed(4).replace(/\\.0+$/, '').replace(/(\\.\\d+?)0+$/, '$1'));\n    } else {\n      const base = v * units[category][from];\n      const out = base / units[category][to];\n      setResult(out.toFixed(6).replace(/\\.0+$/, '').replace(/(\\.\\d+?)0+$/, '$1'));\n    }\n  };\n\n  React.useEffect(() => {\n    convert();\n  }, [value, from, to, category]);\n\n  return React.createElement('div', { style: { fontFamily: 'system-ui, sans-serif', padding: '16px', display: 'flex', flexDirection: 'column', gap: '14px', height: '100%', overflow: 'auto' } },\n    React.createElement('h3', { style: { margin: 0, fontSize: '16px', fontWeight: 600, color: '#111827' } }, 'Unit Converter'),\n    React.createElement('div', { style: { display: 'flex', gap: '8px' } },\n      ['length', 'weight', 'temperature', 'volume'].map(c => React.createElement('button', {\n        key: c,\n        onClick: () => setCategory(c),\n        style: {\n          flex: 1,\n          fontSize: '12px',\n          padding: '6px',\n          borderRadius: '4px',\n          border: '1px solid #d1d5db',\n          background: category === c ? '#2563eb' : '#fff',\n          color: category === c ? '#fff' : '#374151',\n          cursor: 'pointer',\n          fontWeight: 600,\n          textTransform: 'capitalize'\n        }\n      }, c))\n    ),\n    React.createElement('div', { style: { background: '#f9fafb', borderRadius: '8px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '10px' } },\n      React.createElement('div', null,\n        React.createElement('div', { style: { fontSize: '11px', fontWeight: 600, color: '#6b7280', marginBottom: '4px' } }, 'Value'),\n        React.createElement('input', { type: 'number', value: value, onChange: e => setValue(e.target.value), style: { width: '100%', fontSize: '14px', padding: '8px', borderRadius: '4px', border: '1px solid #d1d5db', boxSizing: 'border-box' } })\n      ),\n      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: '8px', alignItems: 'end' } },\n        React.createElement('div', null,\n          React.createElement('div', { style: { fontSize: '11px', fontWeight: 600, color: '#6b7280', marginBottom: '4px' } }, 'From'),\n          React.createElement('select', { value: from, onChange: e => setFrom(e.target.value), style: { width: '100%', fontSize: '13px', padding: '8px', borderRadius: '4px', border: '1px solid #d1d5db' } },\n            Object.keys(units[category]).map(u => React.createElement('option', { key: u, value: u }, unitLabels[category][u]))\n          )\n        ),\n        React.createElement('div', { style: { fontSize: '18px', color: '#6b7280', paddingBottom: '8px' } }, '↔'),\n        React.createElement('div', null,\n          React.createElement('div', { style: { fontSize: '11px', fontWeight: 600, color: '#6b7280', marginBottom: '4px' } }, 'To'),\n          React.createElement('select', { value: to, onChange: e => setTo(e.target.value), style: { width: '100%', fontSize: '13px', padding: '8px', borderRadius: '4px', border: '1px solid #d1d5db' } },\n            Object.keys(units[category]).map(u => React.createElement('option', { key: u, value: u }, unitLabels[category][u]))\n          )\n        )\n      ),\n      React.createElement('div', { style: { background: '#eff6ff', borderRadius: '6px', padding: '12px', textAlign: 'center', marginTop: '4px' } },\n        React.createElement('div', { style: { fontSize: '11px', color: '#2563eb', fontWeight: 600 } }, 'RESULT'),\n        React.createElement('div', { style: { fontSize: '20px', fontWeight: 700, color: '#111827', marginTop: '4px' } }, result, ' ', unitLabels[category][to])\n      )\n    )\n  );\n};\nrender(<UnitConverter/>);",
  "placeholders": []
}