@limrun/ui 0.8.0 → 0.9.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limrun/ui",
-  "version": "0.8.0",
+  "version": "0.9.0-rc.1",
   "publishConfig": {
     "access": "public"
   },
@@ -13,6 +13,16 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./device-install": {
+      "types": "./dist/device-install/index.d.ts",
+      "import": "./dist/device-install/index.js",
+      "require": "./dist/device-install/index.cjs"
+    },
+    "./device-install/react": {
+      "types": "./dist/device-install/react.d.ts",
+      "import": "./dist/device-install/react.js",
+      "require": "./dist/device-install/react.cjs"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -29,6 +39,7 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@types/node-forge": "^1.3.14",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react-swc": "^4.0.1",
@@ -40,6 +51,8 @@
     "vite-plugin-lib-inject-css": "^2.2.2"
   },
   "dependencies": {
-    "clsx": "^2.1.1"
+    "@foxt/js-srp": "^0.0.3-patch2",
+    "clsx": "^2.1.1",
+    "node-forge": "^1.4.0"
   }
 }

package/src/components/device-install/device-install-dialog.css

@@ -0,0 +1,244 @@
+.lr-device-install {
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.lr-device-install__trigger,
+.lr-device-install__primary,
+.lr-device-install__secondary,
+.lr-device-install__icon-button {
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  cursor: pointer;
+  font: inherit;
+}
+
+.lr-device-install__trigger,
+.lr-device-install__primary {
+  background: #111827;
+  color: #ffffff;
+  padding: 8px 12px;
+}
+
+.lr-device-install__secondary,
+.lr-device-install__icon-button {
+  background: #ffffff;
+  color: #111827;
+  padding: 8px 12px;
+}
+
+.lr-device-install__trigger:disabled,
+.lr-device-install__primary:disabled,
+.lr-device-install__secondary:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.lr-device-install__backdrop {
+  align-items: center;
+  background: rgb(17 24 39 / 0.55);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  padding: 24px;
+  position: fixed;
+  z-index: 50;
+}
+
+.lr-device-install__dialog {
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 24px 80px rgb(15 23 42 / 0.28);
+  color: #111827;
+  max-height: min(90vh, 900px);
+  max-width: 880px;
+  overflow: auto;
+  padding: 24px;
+  width: 100%;
+}
+
+.lr-device-install__header {
+  align-items: flex-start;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+.lr-device-install__header h2,
+.lr-device-install__step h3,
+.lr-device-install__logs h3 {
+  margin: 0;
+}
+
+.lr-device-install__header p,
+.lr-device-install__step p,
+.lr-device-install__logs {
+  color: #4b5563;
+}
+
+.lr-device-install__error {
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 10px;
+  color: #991b1b;
+  margin-bottom: 14px;
+  padding: 10px 12px;
+}
+
+.lr-device-install__steps {
+  display: grid;
+  gap: 12px;
+}
+
+.lr-device-install__step {
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 14px;
+}
+
+.lr-device-install__step--active {
+  border-color: #111827;
+}
+
+.lr-device-install__step-header {
+  align-items: flex-start;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: auto 1fr auto;
+}
+
+.lr-device-install__step-number {
+  align-items: center;
+  background: #111827;
+  border-radius: 999px;
+  color: #ffffff;
+  display: flex;
+  font-size: 13px;
+  font-weight: 700;
+  height: 28px;
+  justify-content: center;
+  width: 28px;
+}
+
+.lr-device-install__status {
+  border-radius: 999px;
+  font-size: 12px;
+  padding: 3px 8px;
+  text-transform: capitalize;
+}
+
+.lr-device-install__status--idle {
+  background: #f3f4f6;
+  color: #4b5563;
+}
+
+.lr-device-install__status--active {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.lr-device-install__status--complete {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.lr-device-install__status--error {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.lr-device-install__step-body {
+  display: grid;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.lr-device-install__grid {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.lr-device-install__field {
+  display: grid;
+  gap: 6px;
+}
+
+.lr-device-install__field span {
+  color: #374151;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.lr-device-install__field input {
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font: inherit;
+  padding: 8px 10px;
+}
+
+.lr-device-install__build-logs {
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.lr-device-install__build-logs summary {
+  cursor: pointer;
+  font-weight: 600;
+  padding: 10px 12px;
+}
+
+.lr-device-install__build-logs pre {
+  background: #0f172a;
+  color: #e5e7eb;
+  margin: 0;
+  max-height: 240px;
+  overflow: auto;
+  padding: 12px;
+  white-space: pre-wrap;
+}
+
+.lr-device-install__device {
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.lr-device-install__logs {
+  border-top: 1px solid #e5e7eb;
+  margin-top: 18px;
+  padding-top: 14px;
+}
+
+.lr-device-install__logs ol {
+  display: grid;
+  gap: 6px;
+  list-style: none;
+  margin: 8px 0 0;
+  max-height: 160px;
+  overflow: auto;
+  padding: 0;
+}
+
+.lr-device-install__logs li {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
+@media (max-width: 760px) {
+  .lr-device-install__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .lr-device-install__step-header {
+    grid-template-columns: auto 1fr;
+  }
+
+  .lr-device-install__status {
+    grid-column: 2;
+  }
+}

package/src/components/device-install/device-install-dialog.tsx

@@ -0,0 +1,363 @@
+import { useId, useState, type ChangeEvent, type ReactNode } from 'react';
+import { clsx } from 'clsx';
+import { useDeviceInstall, type UseDeviceInstallOptions } from '../../hooks/use-device-install';
+import type { DeviceInstallStep, DeviceInstallStepStatus } from '../../core/device-install';
+import './device-install-dialog.css';
+
+export type DeviceInstallDialogProps = UseDeviceInstallOptions & {
+  disabled?: boolean;
+};
+
+const steps: Array<{ id: DeviceInstallStep; title: string; description: string }> = [
+  {
+    id: 'build',
+    title: 'Start a device build',
+    description: 'Upload signing assets if needed, then follow the live build logs until the device build succeeds.',
+  },
+  {
+    id: 'usb',
+    title: 'Access USB procedures',
+    description: 'Allow WebUSB access to the connected iPhone from a Chromium browser on a secure origin.',
+  },
+  {
+    id: 'pair',
+    title: 'Pair with this browser',
+    description: 'Pair once and store the pair record locally so future installs can reuse it.',
+  },
+  {
+    id: 'install',
+    title: 'Start installation',
+    description: 'Relay the last successful device build to the paired iPhone.',
+  },
+];
+
+export function DeviceInstallDialog({
+  disabled,
+  ...hookOptions
+}: DeviceInstallDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [appleAccountName, setAppleAccountName] = useState('');
+  const [applePassword, setApplePassword] = useState('');
+  const [appleTwoFactorCode, setAppleTwoFactorCode] = useState('');
+  const dialogTitleId = useId();
+  const deviceInstall = useDeviceInstall(hookOptions);
+
+  const updateSigningFiles = (field: 'certificateFile' | 'provisioningProfileFile', event: ChangeEvent<HTMLInputElement>) => {
+    deviceInstall.setSigningFiles({
+      [field]: event.currentTarget.files?.[0],
+    });
+  };
+
+  return (
+    <div className="lr-device-install">
+      <button
+        type="button"
+        className="lr-device-install__trigger"
+        disabled={disabled || !hookOptions.apiUrl}
+        onClick={() => setOpen(true)}
+      >
+        Install to iPhone
+      </button>
+
+      {open && (
+        <div className="lr-device-install__backdrop" role="presentation">
+          <section
+            aria-labelledby={dialogTitleId}
+            aria-modal="true"
+            className="lr-device-install__dialog"
+            role="dialog"
+          >
+            <header className="lr-device-install__header">
+              <div>
+                <h2 id={dialogTitleId}>Install to a real iPhone</h2>
+                <p>Follow each step to build, authorize USB, pair, and install from this browser.</p>
+              </div>
+              <button type="button" className="lr-device-install__icon-button" onClick={() => setOpen(false)}>
+                Close
+              </button>
+            </header>
+
+            {deviceInstall.error && <div className="lr-device-install__error">{deviceInstall.error}</div>}
+
+            <div className="lr-device-install__steps">
+              {steps.map((step, index) => (
+                <StepCard
+                  key={step.id}
+                  index={index + 1}
+                  step={step}
+                  active={deviceInstall.currentStep === step.id}
+                  status={deviceInstall.stepStatuses[step.id]}
+                >
+                  {step.id === 'build' && (
+                    <div className="lr-device-install__step-body">
+                      <div className="lr-device-install__grid">
+                        <label className="lr-device-install__field">
+                          <span>Apple ID</span>
+                          <input
+                            type="email"
+                            autoComplete="username"
+                            placeholder="name@example.com"
+                            value={appleAccountName}
+                            onChange={(event) => setAppleAccountName(event.currentTarget.value)}
+                          />
+                        </label>
+                        <label className="lr-device-install__field">
+                          <span>Apple ID password</span>
+                          <input
+                            type="password"
+                            autoComplete="current-password"
+                            placeholder="Password stays in this browser"
+                            value={applePassword}
+                            onChange={(event) => setApplePassword(event.currentTarget.value)}
+                          />
+                        </label>
+                        <label className="lr-device-install__field">
+                          <span>Generated .p12 password</span>
+                          <input
+                            type="password"
+                            placeholder="Used when exporting Apple certificate"
+                            onChange={(event) =>
+                              deviceInstall.setSigningFiles({ certificatePassword: event.currentTarget.value })
+                            }
+                          />
+                        </label>
+                      </div>
+                      <div className="lr-device-install__actions">
+                        <button
+                          type="button"
+                          className="lr-device-install__secondary"
+                          disabled={
+                            disabled ||
+                            !hookOptions.apiUrl ||
+                            !appleAccountName ||
+                            !applePassword ||
+                            deviceInstall.busyAction === 'build'
+                          }
+                          onClick={() =>
+                            void deviceInstall.startAppleIDLogin({
+                              accountName: appleAccountName,
+                              password: applePassword,
+                            })
+                          }
+                        >
+                          {deviceInstall.appleSigningStatus === 'authenticating'
+                            ? 'Signing in...'
+                            : 'Sign in with Apple ID'}
+                        </button>
+                        <span className="lr-device-install__hint">
+                          Apple password is used only by browser-side SRP. Status: {deviceInstall.appleSigningStatus}
+                        </span>
+                      </div>
+                      {deviceInstall.appleSigningStatus === 'two-factor-required' && (
+                        <div className="lr-device-install__grid">
+                          <label className="lr-device-install__field">
+                            <span>Two-factor code</span>
+                            <input
+                              type="text"
+                              inputMode="numeric"
+                              autoComplete="one-time-code"
+                              value={appleTwoFactorCode}
+                              onChange={(event) => setAppleTwoFactorCode(event.currentTarget.value)}
+                            />
+                          </label>
+                          <button
+                            type="button"
+                            className="lr-device-install__secondary"
+                            disabled={!appleTwoFactorCode || deviceInstall.busyAction === 'build'}
+                            onClick={() => void deviceInstall.submitAppleTwoFactorCode(appleTwoFactorCode)}
+                          >
+                            Submit Apple ID code
+                          </button>
+                        </div>
+                      )}
+                      {deviceInstall.appleTeams.length > 0 && (
+                        <label className="lr-device-install__field">
+                          <span>Apple Developer team</span>
+                          <select
+                            value={deviceInstall.selectedAppleTeamID ?? ''}
+                            onChange={(event) =>
+                              deviceInstall.setSelectedAppleTeamID(event.currentTarget.value || undefined)
+                            }
+                          >
+                            {deviceInstall.appleTeams.map((team, index) => {
+                              const teamID =
+                                team.teamId ??
+                                (team.providerId === undefined ? undefined : String(team.providerId)) ??
+                                team.publicProviderId ??
+                                '';
+                              return (
+                                <option key={`${teamID}-${index}`} value={teamID}>
+                                  {team.name ?? 'Apple Developer Team'} {teamID ? `(${teamID})` : ''}
+                                </option>
+                              );
+                            })}
+                          </select>
+                        </label>
+                      )}
+                      <div className="lr-device-install__grid">
+                        <label className="lr-device-install__field">
+                          <span>Certificate (.p12)</span>
+                          <input
+                            type="file"
+                            accept=".p12,application/x-pkcs12"
+                            onChange={(event) => updateSigningFiles('certificateFile', event)}
+                          />
+                        </label>
+                        <label className="lr-device-install__field">
+                          <span>Provisioning profile</span>
+                          <input
+                            type="file"
+                            accept=".mobileprovision"
+                            onChange={(event) => updateSigningFiles('provisioningProfileFile', event)}
+                          />
+                        </label>
+                        <label className="lr-device-install__field">
+                          <span>Uploaded .p12 password</span>
+                          <input
+                            type="password"
+                            placeholder="Export password"
+                            onChange={(event) =>
+                              deviceInstall.setSigningFiles({ certificatePassword: event.currentTarget.value })
+                            }
+                          />
+                        </label>
+                      </div>
+                      <button
+                        type="button"
+                        className="lr-device-install__primary"
+                        disabled={disabled || !deviceInstall.canBuild}
+                        onClick={() => void deviceInstall.startDeviceBuild()}
+                      >
+                        {deviceInstall.busyAction === 'build' ? 'Starting build...' : 'Start device build'}
+                      </button>
+                      <details
+                        className="lr-device-install__build-logs"
+                        open={deviceInstall.buildLogPanelOpen}
+                        onToggle={(event) => deviceInstall.setBuildLogPanelOpen(event.currentTarget.open)}
+                      >
+                        <summary>Build logs ({deviceInstall.buildStatus})</summary>
+                        <pre>
+                          {deviceInstall.buildLogs.length > 0
+                            ? deviceInstall.buildLogs
+                                .filter((line) => line.type !== 'meta')
+                                .map((line) => line.data)
+                                .join('\n')
+                            : 'Build logs will appear here while the device build is running.'}
+                        </pre>
+                      </details>
+                    </div>
+                  )}
+
+                  {step.id === 'usb' && (
+                    <div className="lr-device-install__step-body">
+                      <p>
+                        WebUSB works in Chromium browsers on secure origins. Connect the iPhone over USB and approve
+                        the browser permission prompt.
+                      </p>
+                      <button
+                        type="button"
+                        className="lr-device-install__primary"
+                        disabled={disabled || !deviceInstall.canRequestUSBAccess}
+                        onClick={() => void deviceInstall.requestUSBAccess()}
+                      >
+                        {deviceInstall.busyAction === 'usb' ? 'Selecting iPhone...' : 'Allow USB access'}
+                      </button>
+                      {deviceInstall.device && (
+                        <div className="lr-device-install__device">
+                          {`${deviceInstall.device.productName ?? 'iPhone'} ${
+                            deviceInstall.device.serialNumber ?? ''
+                          }`.trim()}
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {step.id === 'pair' && (
+                    <div className="lr-device-install__step-body">
+                      {deviceInstall.pairConfirmationRequired && (
+                        <p>
+                          Unlock the iPhone and tap <strong>Trust</strong> in the system dialog, then confirm the pair
+                          record.
+                        </p>
+                      )}
+                      <button
+                        type="button"
+                        className="lr-device-install__primary"
+                        disabled={disabled || !deviceInstall.canPairBrowser}
+                        onClick={() => void deviceInstall.pairBrowser()}
+                      >
+                        {deviceInstall.busyAction === 'pair'
+                          ? 'Pairing...'
+                          : deviceInstall.pairConfirmationRequired
+                            ? 'Confirm pair record'
+                            : 'Pair browser'}
+                      </button>
+                      <p>
+                        {deviceInstall.hasPairRecord
+                          ? 'Pair record is stored locally. Installation is available.'
+                          : 'Pair this browser once before installing.'}
+                      </p>
+                    </div>
+                  )}
+
+                  {step.id === 'install' && (
+                    <div className="lr-device-install__step-body">
+                      <button
+                        type="button"
+                        className="lr-device-install__primary"
+                        disabled={disabled || !deviceInstall.canInstall}
+                        onClick={() => void deviceInstall.startInstallation()}
+                      >
+                        {deviceInstall.busyAction === 'install' ? 'Installing...' : 'Install last build'}
+                      </button>
+                      <button type="button" className="lr-device-install__secondary" onClick={deviceInstall.stopRelay}>
+                        Stop relay
+                      </button>
+                    </div>
+                  )}
+                </StepCard>
+              ))}
+            </div>
+
+            <footer className="lr-device-install__logs">
+              <h3>Progress</h3>
+              <ol>
+                {deviceInstall.logs.map((entry, index) => (
+                  <li key={`${index}-${entry.slice(0, 24)}`}>{entry}</li>
+                ))}
+              </ol>
+            </footer>
+          </section>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StepCard({
+  index,
+  step,
+  active,
+  status,
+  children,
+}: {
+  index: number;
+  step: { id: DeviceInstallStep; title: string; description: string };
+  active: boolean;
+  status: DeviceInstallStepStatus;
+  children: ReactNode;
+}) {
+  return (
+    <article className={clsx('lr-device-install__step', active && 'lr-device-install__step--active')}>
+      <div className="lr-device-install__step-header">
+        <div className="lr-device-install__step-number">{index}</div>
+        <div>
+          <h3>{step.title}</h3>
+          <p>{step.description}</p>
+        </div>
+        <span className={clsx('lr-device-install__status', `lr-device-install__status--${status}`)}>{status}</span>
+      </div>
+      {children}
+    </article>
+  );
+}

package/src/components/device-install/index.ts

@@ -0,0 +1,2 @@
+export { DeviceInstallDialog, DeviceInstallDialog as DeviceInstallRelay } from './device-install-dialog';
+export type { DeviceInstallDialogProps } from './device-install-dialog';