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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limrun/ui",
-  "version": "0.9.0-rc.5",
+  "version": "0.9.0-rc.7",
   "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": {
@@ -31,6 +41,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",
@@ -44,6 +55,8 @@
     "vitest": "^2.1.9"
   },
   "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,325 @@
+.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;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: auto 1fr auto;
+  padding: 0;
+  text-align: left;
+  width: 100%;
+}
+
+.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__choice-grid {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.lr-device-install__choice {
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  color: inherit;
+  cursor: pointer;
+  display: grid;
+  gap: 6px;
+  padding: 12px;
+  text-align: left;
+}
+
+.lr-device-install__choice span {
+  color: #4b5563;
+  font-size: 13px;
+}
+
+.lr-device-install__choice--active {
+  border-color: #111827;
+  box-shadow: 0 0 0 1px #111827;
+}
+
+.lr-device-install__section-panel {
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  display: grid;
+  gap: 12px;
+  padding: 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,
+.lr-device-install__field select {
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font: inherit;
+  padding: 8px 10px;
+}
+
+.lr-device-install__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.lr-device-install__hint {
+  color: #6b7280;
+  font-size: 13px;
+}
+
+.lr-device-install__checklist {
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  display: grid;
+  overflow: hidden;
+}
+
+.lr-device-install__check-row {
+  align-items: center;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  padding: 10px 12px;
+}
+
+.lr-device-install__check-row + .lr-device-install__check-row {
+  border-top: 1px solid #e5e7eb;
+}
+
+.lr-device-install__check-row strong {
+  color: #111827;
+  font-size: 13px;
+}
+
+.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__choice-grid,
+  .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;
+  }
+}