@limrun/ui 0.9.0-rc.2 → 0.9.0-rc.5

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

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

@@ -1,432 +0,0 @@
-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>
-                          {deviceInstall.applePortalSummary && (
-                            <p className="lr-device-install__hint">
-                              Found {deviceInstall.applePortalSummary.certificateCount} certificates and{' '}
-                              {deviceInstall.applePortalSummary.profileCount} provisioning profiles.
-                            </p>
-                          )}
-                        </>
-                      )}
-                      {deviceInstall.appleAppIDs.length > 0 && (
-                        <label className="lr-device-install__field">
-                          <span>Bundle ID</span>
-                          <select
-                            value={deviceInstall.appleBundleID}
-                            onChange={(event) => deviceInstall.setAppleBundleID(event.currentTarget.value)}
-                          >
-                            {deviceInstall.appleAppIDs.map((appID, index) => {
-                              const bundleID = appID.identifier ?? appID.bundleId ?? '';
-                              return (
-                                <option key={`${bundleID}-${index}`} value={bundleID}>
-                                  {appID.name ?? bundleID} {bundleID ? `(${bundleID})` : ''}
-                                </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>
-                      )}
-                      {deviceInstall.appleDevices.length > 0 && (
-                        <label className="lr-device-install__field">
-                          <span>Apple Developer devices</span>
-                          <select
-                            multiple
-                            value={deviceInstall.selectedAppleDeviceIDs}
-                            onChange={(event) =>
-                              deviceInstall.setSelectedAppleDeviceIDs(
-                                Array.from(event.currentTarget.selectedOptions).map((option) => option.value),
-                              )
-                            }
-                          >
-                            {deviceInstall.appleDevices.map((appleDevice) => (
-                              <option key={appleDevice.deviceId ?? appleDevice.deviceNumber} value={appleDevice.deviceId ?? ''}>
-                                {appleDevice.name ?? appleDevice.model ?? 'Apple device'} {appleDevice.deviceNumber ?? ''}
-                              </option>
-                            ))}
-                          </select>
-                        </label>
-                      )}
-                      {deviceInstall.device && !deviceInstall.connectedAppleDeviceRegistered && (
-                        <button
-                          type="button"
-                          className="lr-device-install__secondary"
-                          disabled={disabled || !!deviceInstall.busyAction}
-                          onClick={() => void deviceInstall.registerConnectedAppleDevice()}
-                        >
-                          Register connected iPhone
-                        </button>
-                      )}
-                      <button
-                        type="button"
-                        className="lr-device-install__secondary"
-                        disabled={disabled || !deviceInstall.canPrepareAppleSigningAssets}
-                        onClick={() => void deviceInstall.prepareAppleSigningAssets()}
-                      >
-                        {deviceInstall.appleSigningStatus === 'preparing-assets'
-                          ? 'Preparing signing assets...'
-                          : 'Generate certificate and profile'}
-                      </button>
-                      {deviceInstall.hasSigningAssets && (
-                        <p>Signing assets are stored in this browser for the selected bundle and device.</p>
-                      )}
-                    </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

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