JSX DSL Components

Pitaj.io implements a tightly typed, sandboxed JSX Component Library (Domain Specific Language). This system guarantees that every widget rendered in the chat stream is visually polished, fully responsive, and safe from client vulnerabilities.

Component Reference

1. Layout & Structure

<Container>: Base root wrapper with automatic padding and border styling.
<Card>: Sub-panel container with subtle stroke styling and background elevation.
<Stack direction="row|column" gap={4}>: Flexible linear alignment with controlled gap spacing.
<Grid cols={2} gap={4}>: Responsive multi-column layout grid.

2. Form Inputs & Interactive Controls

<Input type="text|number|email" label="..." value={...} onChange={...} />: Validated input element with floating labels.
<Slider min={0} max={100} step={1} value={...} onChange={...} />: Numeric slider control for immediate value exploration.
<Select options={[...]} value={...} onChange={...} />: Accessible dropdown selection element.
<Switch checked={...} onChange={...} label="..." />: Binary toggle switch.
<Button variant="primary|secondary|outline" onClick={...}>: Action trigger supporting loading spinners and icons.

3. Data Presentation & Metrics

<Metric label="Estimated Savings" value="$1,240/yr" trend="+15%" />: Prominent KPI display for computation outcomes.
<Badge variant="success|warning|info">: Small semantic badge indicator.
<Progress value={65} max={100} />: Progress bar representing completion percentage.

Code Example: Solar Energy ROI Calculator

Here is how an interactive Pitaj JSX component is assembled:

<Container className="space-y-4 p-4 bg-slate-900 border border-slate-800 rounded-2xl text-white">
  <Stack direction="column" gap={2}>
    <h3 className="text-lg font-semibold">Solar Energy Savings Calculator</h3>
    <p className="text-sm text-slate-400">Estimate your annual financial return based on monthly power consumption.</p>
  </Stack>

  <Card className="p-4 bg-slate-800/50 border border-slate-700/60 rounded-xl space-y-3">
    <div className="flex justify-between text-sm">
      <span className="text-slate-300">Average Monthly Electric Bill</span>
      <span className="font-bold text-blue-400">${state.monthlyBill}</span>
    </div>
    <Slider
      min={50}
      max={500}
      step={10}
      value={state.monthlyBill}
      onChange={(val) => setState({ ...state, monthlyBill: val })}
    />
  </Card>

  <Grid cols={2} gap={3}>
    <Metric
      label="Annual Savings"
      value={`$${Math.round(state.monthlyBill * 12 * 0.75)}`}
      className="bg-emerald-950/40 border border-emerald-800/50 p-3 rounded-xl"
    />
    <Metric
      label="Estimated Payback"
      value="4.2 yrs"
      className="bg-blue-950/40 border border-blue-800/50 p-3 rounded-xl"
    />
  </Grid>

  <Button
    variant="primary"
    className="w-full justify-center py-2.5 bg-blue-600 hover:bg-blue-500 rounded-xl font-medium"
    onClick={() => emit('submit_quote', { savings: state.monthlyBill * 12 * 0.75 })}
  >
    Request a Free Engineering Assessment
  </Button>
</Container>