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

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

@@ -0,0 +1,513 @@
+import { useEffect, 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: 'signing',
+    title: 'Prepare signing',
+    description: 'Choose Apple ID login or upload certificates, then confirm the target developer device.',
+  },
+  {
+    id: 'connect',
+    title: 'Connect and pair',
+    description: 'Connect the iPhone with WebUSB, then pair this browser so installs can use the device.',
+  },
+  {
+    id: 'build',
+    title: 'Check and build',
+    description: 'Verify the device and provisioning profile are ready, then start the signed build.',
+  },
+  {
+    id: 'install',
+    title: 'Start installation',
+    description: 'Relay the last successful device build to the paired iPhone.',
+  },
+];
+
+type SigningSection = 'apple-id' | 'upload';
+
+export function DeviceInstallDialog({
+  disabled,
+  ...hookOptions
+}: DeviceInstallDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [openStep, setOpenStep] = useState<DeviceInstallStep>('signing');
+  const [signingSection, setSigningSection] = useState<SigningSection>();
+  const [appleAccountName, setAppleAccountName] = useState('');
+  const [applePassword, setApplePassword] = useState('');
+  const [appleTwoFactorCode, setAppleTwoFactorCode] = useState('');
+  const dialogTitleId = useId();
+  const deviceInstall = useDeviceInstall(hookOptions);
+
+  useEffect(() => {
+    setOpenStep(deviceInstall.currentStep);
+  }, [deviceInstall.currentStep]);
+
+  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>Prepare signing, connect and pair the device, build, then 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}
+                  open={openStep === step.id}
+                  status={deviceInstall.stepStatuses[step.id]}
+                  onToggle={() => setOpenStep(step.id)}
+                >
+                  {step.id === 'signing' && (
+                    <div className="lr-device-install__step-body">
+                      <div className="lr-device-install__choice-grid">
+                        <button
+                          type="button"
+                          className={clsx(
+                            'lr-device-install__choice',
+                            signingSection === 'apple-id' && 'lr-device-install__choice--active',
+                          )}
+                          onClick={() => setSigningSection('apple-id')}
+                        >
+                          <strong>Apple ID login</strong>
+                          <span>Sign in, choose team, bundle ID, devices, then generate signing assets.</span>
+                        </button>
+                        <button
+                          type="button"
+                          className={clsx(
+                            'lr-device-install__choice',
+                            signingSection === 'upload' && 'lr-device-install__choice--active',
+                          )}
+                          onClick={() => setSigningSection('upload')}
+                        >
+                          <strong>Upload certificates</strong>
+                          <span>Use an existing .p12 certificate and provisioning profile.</span>
+                        </button>
+                      </div>
+
+                      {signingSection === 'apple-id' && (
+                        <div className="lr-device-install__section-panel">
+                          <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>
+                            {!deviceInstall.hasReusableAppleCertificate && (
+                              <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 === 'signing'
+                              }
+                              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 === 'signing'}
+                                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.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.applePortalSummary && (
+                            <p className="lr-device-install__hint">
+                              Found {deviceInstall.applePortalSummary.certificateCount} certificates and{' '}
+                              {deviceInstall.applePortalSummary.profileCount} provisioning profiles.
+                            </p>
+                          )}
+                          {deviceInstall.hasReusableAppleCertificate && (
+                            <p className="lr-device-install__hint">
+                              Reusing the certificate and private key stored in this browser.
+                            </p>
+                          )}
+                          <button
+                            type="button"
+                            className="lr-device-install__primary"
+                            disabled={disabled || !deviceInstall.canPrepareAppleSigningAssets}
+                            onClick={() => void deviceInstall.prepareAppleSigningAssets()}
+                          >
+                            {deviceInstall.appleSigningStatus === 'preparing-assets'
+                              ? 'Preparing signing assets...'
+                              : 'Generate certificate and profile'}
+                          </button>
+                        </div>
+                      )}
+
+                      {signingSection === 'upload' && (
+                        <div className="lr-device-install__section-panel">
+                          <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>
+                          <p className="lr-device-install__hint">
+                            The provisioning profile will be checked against the connected iPhone before the build starts.
+                          </p>
+                        </div>
+                      )}
+
+                      {deviceInstall.hasSigningAssets && (
+                        <p>Signing assets are stored in this browser for the selected bundle and device.</p>
+                      )}
+                    </div>
+                  )}
+
+                  {step.id === 'connect' && (
+                    <div className="lr-device-install__step-body">
+                      <p>
+                        WebUSB works in Chromium browsers on secure origins. Connect the iPhone over USB, approve the
+                        browser permission prompt, then pair this browser.
+                      </p>
+                      <div className="lr-device-install__actions">
+                        <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>
+                        <button
+                          type="button"
+                          className="lr-device-install__secondary"
+                          disabled={disabled || !deviceInstall.canPairBrowser}
+                          onClick={() => void deviceInstall.pairBrowser()}
+                        >
+                          {deviceInstall.busyAction === 'pair'
+                            ? 'Pairing...'
+                            : deviceInstall.pairConfirmationRequired
+                              ? 'Confirm pair record'
+                              : 'Pair browser'}
+                        </button>
+                      </div>
+                      {deviceInstall.device && (
+                        <div className="lr-device-install__device">
+                          {`${deviceInstall.device.productName ?? 'iPhone'} ${
+                            deviceInstall.device.serialNumber ?? ''
+                          }`.trim()}
+                        </div>
+                      )}
+                      {deviceInstall.pairConfirmationRequired && (
+                        <p>
+                          Unlock the iPhone and tap <strong>Trust</strong> in the system dialog, then confirm the pair
+                          record.
+                        </p>
+                      )}
+                      <p>
+                        {deviceInstall.hasPairRecord
+                          ? 'Pair record is stored locally. Continue to the build check.'
+                          : 'Pair this browser once before building and installing.'}
+                      </p>
+                    </div>
+                  )}
+
+                  {step.id === 'build' && (
+                    <div className="lr-device-install__step-body">
+                      <div className="lr-device-install__checklist">
+                        <StatusLine label="Signing assets" ready={deviceInstall.hasSigningInputs} pendingText="Ready to verify" />
+                        <StatusLine label="USB device" ready={!!deviceInstall.device} />
+                        <StatusLine label="Pair record" ready={deviceInstall.hasPairRecord} />
+                        <StatusLine
+                          label="Profile includes connected device"
+                          ready={deviceInstall.connectedDeviceInProfile}
+                          pendingText="Checked when the build starts"
+                        />
+                      </div>
+                      {deviceInstall.device &&
+                        deviceInstall.appleTeams.length > 0 &&
+                        !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__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 === '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,
+  open,
+  status,
+  onToggle,
+  children,
+}: {
+  index: number;
+  step: { id: DeviceInstallStep; title: string; description: string };
+  active: boolean;
+  open: boolean;
+  status: DeviceInstallStepStatus;
+  onToggle: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <article className={clsx('lr-device-install__step', active && 'lr-device-install__step--active')}>
+      <button
+        type="button"
+        className="lr-device-install__step-header"
+        aria-expanded={open}
+        onClick={onToggle}
+      >
+        <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 === 'complete' ? '✓ Completed' : status}
+        </span>
+      </button>
+      {open && children}
+    </article>
+  );
+}
+
+function StatusLine({
+  label,
+  ready,
+  pendingText = 'Not ready',
+}: {
+  label: string;
+  ready?: boolean;
+  pendingText?: string;
+}) {
+  const text = ready === undefined ? pendingText : ready ? 'Ready' : 'Needs attention';
+  return (
+    <div className="lr-device-install__check-row">
+      <span>{label}</span>
+      <strong>{text}</strong>
+    </div>
+  );
+}

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';

package/src/components/inspect-overlay.css

@@ -9,6 +9,11 @@
   /* When click-to-select is enabled, the container also captures clicks
      that fall outside any box so we can clear selection. */
   pointer-events: auto;
+  /* Match Chrome DevTools' crosshair cursor while inspect mode is active.
+     The merged `.rc-inspect-overlay-select .rc-inspect-box` rule below
+     restates the cursor on each inner box, since `.rc-inspect-box` sets
+     its own `cursor: pointer`. */
+  cursor: crosshair;
 }
 
 .rc-inspect-box {
@@ -32,6 +37,7 @@
 
 .rc-inspect-overlay-select .rc-inspect-box {
   pointer-events: auto;
+  cursor: crosshair;
 }
 
 .rc-inspect-box-disabled {

package/src/components/inspect-overlay.tsx

@@ -7,8 +7,9 @@ import {
   AxElement,
   AxPlatform,
   AxSnapshot,
+  axCliTapCommand,
   axElementRoleLabel,
-  axElementSelectorExpression,
+  axElementSelectorObject,
   axElementSummary,
   axElementsEqual,
   clampAxFrameForScreen,
@@ -37,6 +38,10 @@ export interface InspectOverlayProps {
   highlightedId: string | null;
   selectedId: string | null;
   mode: InspectMode;
+  // Optional instance id used to render the "Copy command" CLI snippet
+  // (e.g. `lim ios tap-element --ax-label 'Sign in' --id <instanceId>`)
+  // in the info card. When omitted the Copy command button is hidden.
+  instanceId?: string;
   // Current pointer position in viewport coordinates (clientX/Y). Drives the
   // cursor-anchored preview card while hovering. null when the pointer is
   // outside the device.
@@ -117,6 +122,10 @@ const InspectBox = memo(
           if (!selectable) return;
           e.preventDefault();
           e.stopPropagation();
+          // Chrome DevTools parity: clicking the already-selected element
+          // is a no-op. Re-firing the selection change callback would
+          // needlessly reset the card anchor and consumer-side state.
+          if (selected) return;
           onClick(element, { x: e.clientX, y: e.clientY });
         }}
         style={{
@@ -151,6 +160,9 @@ interface InfoCardProps {
   anchor: { x: number; y: number };
   cursorAnchored: boolean;
   showActions: boolean;
+  // Used to render the "Copy command" CLI snippet. When absent the button
+  // is hidden.
+  instanceId?: string;
   // Receives the element AND the viewport-space coordinate to tap at
   // (the frozen click position). Tapping at the click point — rather than
   // the element's frame center — preserves the user's aim when the
@@ -180,6 +192,7 @@ const InfoCard = memo(function InfoCard({
   anchor,
   cursorAnchored,
   showActions,
+  instanceId,
   onTap,
 }: InfoCardProps) {
   const [copied, setCopied] = useState<string | null>(null);
@@ -235,11 +248,26 @@ const InfoCard = memo(function InfoCard({
     return { left: `${left}px`, top: `${top}px`, transform };
   }, [anchor.x, anchor.y]);
 
-  const selectorExpr = useMemo(() => axElementSelectorExpression(element, platform), [element, platform]);
+  // "Copy selector" returns the raw selector hash as JSON (the same shape
+  // accepted by the CLI / instance API). Every available selector field is
+  // included so the consumer can disambiguate (e.g. `AXLabel + type`).
+  const selectorObject = useMemo(() => axElementSelectorObject(element, platform), [element, platform]);
+  const selectorJson = useMemo(
+    () => (selectorObject ? JSON.stringify(selectorObject, null, 2) : null),
+    [selectorObject],
+  );
+  // "Copy command" emits a selector-based `lim … tap-element …` invocation
+  // that targets this exact element on this exact instance, robust to
+  // layout changes that would invalidate a coordinate-based tap.
+  const cliCommand = useMemo(
+    () => (instanceId ? axCliTapCommand(element, platform, instanceId) : null),
+    [element, platform, instanceId],
+  );
+
   const primaryIdField = platform === 'ios' ? element.selectors.AXUniqueId : element.selectors.resourceId;
   const primaryIdLabel = platform === 'ios' ? 'AXUniqueId' : 'resourceId';
 
-  const handleCopy = useCallback(async (text: string | undefined, key: string) => {
+  const handleCopy = useCallback(async (text: string | null, key: string) => {
     if (!text) return;
     const ok = await copyToClipboard(text);
     if (ok) setCopied(key);
@@ -308,21 +336,22 @@ const InfoCard = memo(function InfoCard({
           <button
             type="button"
             className={clsx('rc-inspect-card-btn', copied === 'selector' && 'rc-inspect-card-btn-copied')}
-            disabled={!selectorExpr}
-            title={selectorExpr ?? 'No usable selector for this element'}
-            onClick={() => handleCopy(selectorExpr ?? undefined, 'selector')}
+            disabled={!selectorJson}
+            title={selectorJson ?? 'No usable selector for this element'}
+            onClick={() => handleCopy(selectorJson, 'selector')}
           >
             {copied === 'selector' ? 'Copied!' : 'Copy selector'}
           </button>
-          <button
-            type="button"
-            className={clsx('rc-inspect-card-btn', copied === 'id' && 'rc-inspect-card-btn-copied')}
-            disabled={!primaryIdField}
-            title={primaryIdField ?? `No ${primaryIdLabel}`}
-            onClick={() => handleCopy(primaryIdField, 'id')}
-          >
-            {copied === 'id' ? 'Copied!' : `Copy ${primaryIdLabel}`}
-          </button>
+          {cliCommand && (
+            <button
+              type="button"
+              className={clsx('rc-inspect-card-btn', copied === 'command' && 'rc-inspect-card-btn-copied')}
+              title={cliCommand}
+              onClick={() => handleCopy(cliCommand, 'command')}
+            >
+              {copied === 'command' ? 'Copied!' : 'Copy command'}
+            </button>
+          )}
         </div>
       )}
     </div>,
@@ -340,6 +369,7 @@ export const InspectOverlay = memo(function InspectOverlay({
   highlightedId,
   selectedId,
   mode,
+  instanceId,
   cursorPosition,
   frozenCursorPosition,
   onSelectChange,
@@ -429,6 +459,7 @@ export const InspectOverlay = memo(function InspectOverlay({
           anchor={anchor}
           cursorAnchored={cursorAnchored}
           showActions={showActions}
+          instanceId={instanceId}
           onTap={onTapElement}
         />
       )}