// Shared screen primitives + modals. Entry-point: loaded after ui.jsx, before app.jsx. // Also loads the screen modules. const ScreenHeader = ({ icon, title, subtitle, right }) => (

{icon}

{title}

{subtitle &&

{subtitle}

}

{right}

); const Banner = ({ tone = "info", icon, children }) => (

{icon} {children}

); const Table = ({ columns, rows }) => (

{columns.map(c => ( ))} {rows.length === 0 ? ( ) : rows.map((r, i) => ( {columns.map(c => ( ))} ))}

{c.label}
No results.
{c.render ? c.render(r) : r[c.key]}

); const FormField = ({ label, hint, children }) => (

{label}

{children}

{hint &&

{hint}

}

); // =============== MODALS =============== const AddCreditsModal = ({ open, onClose, onConfirm }) => { const presets = [10, 25, 50, 100, 250]; const [amt, setAmt] = React.useState(25); return ( Cancel { onConfirm(amt); onClose(); }}>Add ${amt} }>

Credits are charged to your saved payment method. They never expire.

{presets.map(p => ( ))}

setAmt(Number(e.target.value)||0)} /> ); }; const AddProjectModal = ({ open, onClose, onConfirm }) => { const [name, setName] = React.useState(""); const [desc, setDesc] = React.useState(""); return ( Cancel { onConfirm({ name, desc }); onClose(); setName(""); setDesc(""); }}>Create project }> setName(e.target.value)} placeholder="my-new-project"/> setDesc(e.target.value)} placeholder="What is this project for?"/> ); }; const InviteMemberModal = ({ open, onClose, onConfirm }) => { const [email, setEmail] = React.useState(""); const [role, setRole] = React.useState("Member"); return ( Cancel { onConfirm({ email, role }); onClose(); setEmail(""); }}>Send invite }> setEmail(e.target.value)} placeholder="teammate@example.com" type="email"/>

{["Member","Admin","Owner"].map(r=>( ))}

); }; const EditAddressModal = ({ open, onClose, value, onConfirm }) => { const [v, setV] = React.useState(value || ""); React.useEffect(()=>setV(value||""), [value, open]); return ( Cancel { onConfirm(v); onClose(); }}>Save }>

setV(e.target.value)} rows={5}/>
      </FormField>
      <style>{`
        .hx-ta { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; background: var(--panel); color: var(--ink); }
        .hx-ta:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
      `}</style>
    </Modal>
  );
};

const EditPaymentModal = ({ open, onClose, onConfirm }) => (
  <Modal open={open} onClose={onClose} title="Update payment method" width={460}
    footer={<>
      <Btn kind="secondary" onClick={onClose}>Cancel</Btn>
      <Btn kind="primary" onClick={() => { onConfirm(); onClose(); }}>Save card</Btn>
    </>}>
    <FormField label="Card number"><Input placeholder="•••• •••• •••• ••••" /></FormField>
    <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
      <FormField label="Expiry"><Input placeholder="MM / YY"/></FormField>
      <FormField label="CVC"><Input placeholder="•••"/></FormField>
    </div>
    <FormField label="Name on card"><Input placeholder="Full name"/></FormField>
  </Modal>
);

const EditTaxModal = ({ open, onClose, onConfirm }) => {
  const [type, setType] = React.useState("GSTIN");
  const [val, setVal] = React.useState("");
  return (
    <Modal open={open} onClose={onClose} title="Tax ID" width={460}
      footer={<>
        <Btn kind="secondary" onClick={onClose}>Cancel</Btn>
        <Btn kind="primary" onClick={() => { onConfirm({ type, val }); onClose(); }} disabled={!val}>Save</Btn>
      </>}>
      <FormField label="Tax ID type">
        <div style={{display:"grid",gridTemplateColumns:"repeat(4, 1fr)",gap:8}}>
          {["GSTIN","VAT","EIN","ABN"].map(t=>(
            <button key={t} className={`hx-amt ${type===t?"on":""}`} onClick={()=>setType(t)}>{t}</button>
          ))}
        </div>
      </FormField>
      <FormField label="ID number"><Input value={val} onChange={e=>setVal(e.target.value)} placeholder={type==="GSTIN" ? "22AAAAA0000A1Z5" : "1234567890"}/></FormField>
    </Modal>
  );
};

const CreateKeyModal = ({ open, onClose, onConfirm }) => {
  const [name, setName] = React.useState("");
  const [project, setProject] = React.useState("Default Project");
  return (
    <Modal open={open} onClose={onClose} title="Create API key" width={460}
      footer={<>
        <Btn kind="secondary" onClick={onClose}>Cancel</Btn>
        <Btn kind="primary" disabled={!name} onClick={()=>{onConfirm({name, project}); onClose(); setName("");}}>Create key</Btn>
      </>}>
      <FormField label="Name" hint="A descriptive label for this key (e.g. 'prod-server')."><Input value={name} onChange={e=>setName(e.target.value)} placeholder="key name"/></FormField>
      <FormField label="Project"><Input value={project} onChange={e=>setProject(e.target.value)}/></FormField>
    </Modal>
  );
};

const AutoRechargeModal = ({ open, onClose, value, onConfirm }) => {
  const [threshold, setThreshold] = React.useState(value?.threshold || 5);
  const [amount, setAmount] = React.useState(value?.amount || 25);
  React.useEffect(()=>{ if(value){ setThreshold(value.threshold); setAmount(value.amount); }}, [value, open]);
  return (
    <Modal open={open} onClose={onClose} title="Auto-recharge thresholds" width={460}
      footer={<>
        <Btn kind="secondary" onClick={onClose}>Cancel</Btn>
        <Btn kind="primary" onClick={()=>{onConfirm({threshold, amount}); onClose();}}>Save thresholds</Btn>
      </>}>
      <FormField label="Trigger auto-recharge when balance falls below">
        <Input prefix="$" type="number" value={threshold} onChange={e=>setThreshold(Number(e.target.value)||0)}/>
      </FormField>
      <FormField label="Recharge by">
        <Input prefix="$" type="number" value={amount} onChange={e=>setAmount(Number(e.target.value)||0)}/>
      </FormField>
    </Modal>
  );
};

Object.assign(window, {
  ScreenHeader, Banner, Table, FormField,
  AddCreditsModal, AddProjectModal, InviteMemberModal, EditAddressModal,
  EditPaymentModal, EditTaxModal, CreateKeyModal, AutoRechargeModal,
});