@le-space/ui 0.6.26 → 0.6.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +3 -3
  2. package/react/index.js +165 -121
  3. package/shared/index.d.ts +1 -1
  4. package/shared/index.js +9 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@le-space/ui",
3
- "version": "0.6.26",
3
+ "version": "0.6.28",
4
4
  "description": "Floating Aleph Relay Button UI components for Svelte and React.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -44,8 +44,8 @@
44
44
  "url": "https://github.com/NiKrause/relay-button/issues"
45
45
  },
46
46
  "dependencies": {
47
- "@le-space/browser": "0.6.26",
48
- "@le-space/core": "0.6.26",
47
+ "@le-space/browser": "0.6.28",
48
+ "@le-space/core": "0.6.28",
49
49
  "viem": "^2.53.1"
50
50
  },
51
51
  "peerDependencies": {
package/react/index.js CHANGED
@@ -43,7 +43,7 @@ var RECENT_INSTANCE_RUNTIME_GRACE_MS = 10 * 60 * 1e3;
43
43
  var DEPLOYMENT_PENDING_WARNING_MS = 3 * 60 * 1e3;
44
44
 
45
45
  // src/shared/package-version.ts
46
- var UI_PACKAGE_VERSION = "0.6.26";
46
+ var UI_PACKAGE_VERSION = "0.6.28";
47
47
 
48
48
  // src/shared/format.ts
49
49
  function shortHash(value, head = 8, tail = 6) {
@@ -136,11 +136,10 @@ async function fetchWithTimeout(input, init = {}, timeoutMs = 15e3) {
136
136
 
137
137
  // ../browser/src/aleph-api.ts
138
138
  var DEFAULT_ALEPH_API_HOSTS = [
139
- "https://api3.aleph.im",
140
139
  "https://api2.aleph.im",
141
140
  "https://api.aleph.im"
142
141
  ];
143
- var DEFAULT_ALEPH_API_HOST = DEFAULT_ALEPH_API_HOSTS[0] ?? "https://api3.aleph.im";
142
+ var DEFAULT_ALEPH_API_HOST = DEFAULT_ALEPH_API_HOSTS[0] ?? "https://api2.aleph.im";
144
143
  var DEFAULT_CRN_LIST_URL = "https://crns-list.aleph.sh/crns.json";
145
144
  var DEFAULT_ALEPH_SCHEDULER_API_HOST = "https://scheduler.api.aleph.cloud";
146
145
  var DEFAULT_2N6_API_HOST = "https://api.2n6.me";
@@ -826,7 +825,12 @@ function watchWallet(onChange, provider = getEthereumProvider()) {
826
825
  // ../browser/src/client.ts
827
826
  function normalizeApiHost(value) {
828
827
  const trimmed = value.trim().replace(/\/+$/u, "");
829
- return trimmed ? trimmed : null;
828
+ if (!trimmed) return null;
829
+ try {
830
+ if (new URL(trimmed).hostname.toLowerCase() === "api3.aleph.im") return null;
831
+ } catch {
832
+ }
833
+ return trimmed;
830
834
  }
831
835
  function normalizeApiHosts(input, fallbackApiHost) {
832
836
  const rawValues = Array.isArray(input) ? input : typeof input === "string" ? input.split(/[\s,]+/u) : [];
@@ -3772,9 +3776,7 @@ function defaultState(props = {}) {
3772
3776
  instanceName: props.instanceName ?? DEFAULT_INSTANCE_NAME,
3773
3777
  ucanStoreBootstrap: defaultUcanStoreBootstrapInput(props),
3774
3778
  tierId: DEFAULT_TIER_ID,
3775
- showAdvanced: Boolean(
3776
- props.manifestJson?.trim() || props.sshPublicKey?.trim()
3777
- ),
3779
+ showAdvanced: false,
3778
3780
  showInstances: props.showInstances ?? true,
3779
3781
  showPasteManifest: Boolean(props.manifestJson?.trim()),
3780
3782
  busy: {
@@ -6123,7 +6125,13 @@ var basePanelStyle = {
6123
6125
  position: "fixed",
6124
6126
  zIndex: 9999,
6125
6127
  width: "min(28rem, calc(100vw - 2rem))",
6126
- overflow: "auto",
6128
+ maxWidth: "calc(100vw - 2rem)",
6129
+ minWidth: 0,
6130
+ boxSizing: "border-box",
6131
+ overflowX: "hidden",
6132
+ overflowY: "auto",
6133
+ overflowWrap: "anywhere",
6134
+ wordBreak: "break-word",
6127
6135
  border: "1px solid var(--le-space-sponsor-relay-panel-border, rgba(199, 210, 254, 0.22))",
6128
6136
  borderRadius: "1.4rem",
6129
6137
  background: "var(--le-space-sponsor-relay-panel-bg, rgba(49, 46, 129, 0.94))",
@@ -6134,6 +6142,8 @@ var basePanelStyle = {
6134
6142
  };
6135
6143
  var fieldStyle = {
6136
6144
  width: "100%",
6145
+ minWidth: 0,
6146
+ boxSizing: "border-box",
6137
6147
  borderRadius: "0.8rem",
6138
6148
  border: "1px solid rgba(255,255,255,0.16)",
6139
6149
  background: "rgba(248,250,252,0.98)",
@@ -6157,6 +6167,7 @@ var secondaryButtonStyle = {
6157
6167
  backdropFilter: "blur(8px)"
6158
6168
  };
6159
6169
  var primaryButtonStyle = {
6170
+ boxSizing: "border-box",
6160
6171
  borderRadius: "0.95rem",
6161
6172
  border: "1px solid rgba(251, 191, 36, 0.42)",
6162
6173
  background: "linear-gradient(135deg, #f6c453 0%, #f59e0b 100%)",
@@ -6168,6 +6179,14 @@ var primaryButtonStyle = {
6168
6179
  lineHeight: 1.1,
6169
6180
  boxShadow: "0 10px 24px rgba(245, 158, 11, 0.24)"
6170
6181
  };
6182
+ var containedContentStyle = {
6183
+ minWidth: 0,
6184
+ maxWidth: "100%",
6185
+ boxSizing: "border-box",
6186
+ overflowWrap: "anywhere",
6187
+ wordBreak: "break-word",
6188
+ whiteSpace: "normal"
6189
+ };
6171
6190
  var dangerButtonStyle = {
6172
6191
  borderRadius: "0.95rem",
6173
6192
  border: "1px solid rgba(248, 113, 113, 0.45)",
@@ -7191,128 +7210,143 @@ function SponsorRelayFab(props) {
7191
7210
  state.showInstances ? /* @__PURE__ */ jsxs(
7192
7211
  "div",
7193
7212
  {
7194
- style: { marginTop: "1rem", display: "grid", gap: "0.7rem" },
7213
+ style: {
7214
+ ...containedContentStyle,
7215
+ marginTop: "1rem",
7216
+ display: "grid",
7217
+ gap: "0.7rem"
7218
+ },
7195
7219
  children: [
7196
7220
  state.instances.map((entry) => {
7197
7221
  const confirmedRegistration = confirmedRegistrationByInstanceHash.get(
7198
7222
  entry.instance.item_hash
7199
7223
  ) ?? null;
7200
- return /* @__PURE__ */ jsxs("details", { open: true, children: [
7201
- /* @__PURE__ */ jsx("summary", { children: /* @__PURE__ */ jsxs(
7202
- "span",
7203
- {
7204
- style: {
7205
- display: "inline-flex",
7206
- alignItems: "center",
7207
- gap: "0.55rem",
7208
- flexWrap: "wrap"
7209
- },
7210
- children: [
7211
- (entry.instance.content?.metadata?.name ?? deploymentInstanceFallbackLabel(state)) + " \xB7 " + shortHash(entry.instance.item_hash),
7212
- bootstrapUiEnabled && confirmedRegistration ? /* @__PURE__ */ jsxs(
7213
- "span",
7214
- {
7215
- style: {
7216
- display: "inline-flex",
7217
- alignItems: "center",
7218
- gap: "0.32rem",
7219
- padding: "0.16rem 0.45rem",
7220
- borderRadius: "999px",
7221
- background: "rgba(34, 197, 94, 0.16)",
7222
- color: "#86efac",
7223
- fontSize: "0.7rem",
7224
- fontWeight: 700
7225
- },
7226
- children: [
7227
- /* @__PURE__ */ jsx(
7228
- "span",
7229
- {
7230
- "aria-hidden": "true",
7231
- style: {
7232
- width: "0.45rem",
7233
- height: "0.45rem",
7234
- borderRadius: "999px",
7235
- background: "#22c55e",
7236
- boxShadow: "0 0 0 3px rgba(34, 197, 94, 0.18)"
7237
- }
7238
- }
7239
- ),
7240
- "Aleph bootstrap registered"
7241
- ]
7242
- }
7243
- ) : null
7244
- ]
7245
- }
7246
- ) }),
7247
- /* @__PURE__ */ jsxs(
7248
- "div",
7249
- {
7250
- style: {
7251
- display: "grid",
7252
- gap: "0.35rem",
7253
- marginTop: "0.55rem"
7254
- },
7255
- children: [
7256
- /* @__PURE__ */ jsxs("div", { children: [
7257
- "Status: ",
7258
- entry.details.messageStatus
7259
- ] }),
7260
- bootstrapUiEnabled && confirmedRegistration ? /* @__PURE__ */ jsxs("div", { children: [
7261
- "Bootstrap registration:",
7262
- " ",
7263
- shortHash(
7264
- confirmedRegistration.messageHash ?? confirmedRegistration.content?.registrationId ?? "confirmed",
7265
- 14,
7266
- 8
7267
- )
7268
- ] }) : null,
7269
- /* @__PURE__ */ jsxs("div", { children: [
7270
- "Host IPv4: ",
7271
- entry.details.hostIpv4 ?? "-"
7272
- ] }),
7273
- /* @__PURE__ */ jsxs("div", { children: [
7274
- "IPv6: ",
7275
- entry.details.ipv6 ?? "-"
7276
- ] }),
7277
- /* @__PURE__ */ jsxs("div", { children: [
7278
- "VM IPv4: ",
7279
- entry.details.vmIpv4 ?? "-"
7280
- ] }),
7281
- /* @__PURE__ */ jsxs("div", { children: [
7282
- "SSH: ",
7283
- entry.details.sshCommand ?? "-"
7284
- ] }),
7285
- /* @__PURE__ */ jsxs("div", { children: [
7286
- "Ports: ",
7287
- joinMappedPorts(entry.details.mappedPorts)
7288
- ] }),
7289
- /* @__PURE__ */ jsxs("div", { children: [
7290
- "Submitted:",
7291
- " ",
7292
- formatDateTime(
7293
- entry.instance.reception_time ?? entry.instance.time
7294
- )
7295
- ] }),
7296
- /* @__PURE__ */ jsx(
7297
- "button",
7298
- {
7299
- type: "button",
7300
- style: dangerButtonStyle,
7301
- onClick: () => void controller.deleteInstance(
7302
- entry.instance.item_hash
7303
- ),
7304
- children: state.busy.deletingInstanceHash === entry.instance.item_hash ? "Deleting\u2026" : "Delete"
7305
- }
7306
- )
7307
- ]
7308
- }
7309
- )
7310
- ] }, entry.instance.item_hash);
7224
+ return /* @__PURE__ */ jsxs(
7225
+ "details",
7226
+ {
7227
+ open: true,
7228
+ style: containedContentStyle,
7229
+ children: [
7230
+ /* @__PURE__ */ jsx("summary", { style: containedContentStyle, children: /* @__PURE__ */ jsxs(
7231
+ "span",
7232
+ {
7233
+ style: {
7234
+ display: "inline-flex",
7235
+ alignItems: "center",
7236
+ gap: "0.55rem",
7237
+ flexWrap: "wrap"
7238
+ },
7239
+ children: [
7240
+ (entry.instance.content?.metadata?.name ?? deploymentInstanceFallbackLabel(state)) + " \xB7 " + shortHash(entry.instance.item_hash),
7241
+ bootstrapUiEnabled && confirmedRegistration ? /* @__PURE__ */ jsxs(
7242
+ "span",
7243
+ {
7244
+ style: {
7245
+ display: "inline-flex",
7246
+ alignItems: "center",
7247
+ gap: "0.32rem",
7248
+ padding: "0.16rem 0.45rem",
7249
+ borderRadius: "999px",
7250
+ background: "rgba(34, 197, 94, 0.16)",
7251
+ color: "#86efac",
7252
+ fontSize: "0.7rem",
7253
+ fontWeight: 700
7254
+ },
7255
+ children: [
7256
+ /* @__PURE__ */ jsx(
7257
+ "span",
7258
+ {
7259
+ "aria-hidden": "true",
7260
+ style: {
7261
+ width: "0.45rem",
7262
+ height: "0.45rem",
7263
+ borderRadius: "999px",
7264
+ background: "#22c55e",
7265
+ boxShadow: "0 0 0 3px rgba(34, 197, 94, 0.18)"
7266
+ }
7267
+ }
7268
+ ),
7269
+ "Aleph bootstrap registered"
7270
+ ]
7271
+ }
7272
+ ) : null
7273
+ ]
7274
+ }
7275
+ ) }),
7276
+ /* @__PURE__ */ jsxs(
7277
+ "div",
7278
+ {
7279
+ style: {
7280
+ ...containedContentStyle,
7281
+ display: "grid",
7282
+ gap: "0.35rem",
7283
+ marginTop: "0.55rem"
7284
+ },
7285
+ children: [
7286
+ /* @__PURE__ */ jsxs("div", { children: [
7287
+ "Status: ",
7288
+ entry.details.messageStatus
7289
+ ] }),
7290
+ bootstrapUiEnabled && confirmedRegistration ? /* @__PURE__ */ jsxs("div", { children: [
7291
+ "Bootstrap registration:",
7292
+ " ",
7293
+ shortHash(
7294
+ confirmedRegistration.messageHash ?? confirmedRegistration.content?.registrationId ?? "confirmed",
7295
+ 14,
7296
+ 8
7297
+ )
7298
+ ] }) : null,
7299
+ /* @__PURE__ */ jsxs("div", { children: [
7300
+ "Host IPv4: ",
7301
+ entry.details.hostIpv4 ?? "-"
7302
+ ] }),
7303
+ /* @__PURE__ */ jsxs("div", { children: [
7304
+ "IPv6: ",
7305
+ entry.details.ipv6 ?? "-"
7306
+ ] }),
7307
+ /* @__PURE__ */ jsxs("div", { children: [
7308
+ "VM IPv4: ",
7309
+ entry.details.vmIpv4 ?? "-"
7310
+ ] }),
7311
+ /* @__PURE__ */ jsxs("div", { children: [
7312
+ "SSH: ",
7313
+ entry.details.sshCommand ?? "-"
7314
+ ] }),
7315
+ /* @__PURE__ */ jsxs("div", { children: [
7316
+ "Ports: ",
7317
+ joinMappedPorts(entry.details.mappedPorts)
7318
+ ] }),
7319
+ /* @__PURE__ */ jsxs("div", { children: [
7320
+ "Submitted:",
7321
+ " ",
7322
+ formatDateTime(
7323
+ entry.instance.reception_time ?? entry.instance.time
7324
+ )
7325
+ ] }),
7326
+ /* @__PURE__ */ jsx(
7327
+ "button",
7328
+ {
7329
+ type: "button",
7330
+ style: dangerButtonStyle,
7331
+ onClick: () => void controller.deleteInstance(
7332
+ entry.instance.item_hash
7333
+ ),
7334
+ children: state.busy.deletingInstanceHash === entry.instance.item_hash ? "Deleting\u2026" : "Delete"
7335
+ }
7336
+ )
7337
+ ]
7338
+ }
7339
+ )
7340
+ ]
7341
+ },
7342
+ entry.instance.item_hash
7343
+ );
7311
7344
  }),
7312
7345
  bootstrapUiEnabled && orphanRegistrations.length > 0 ? /* @__PURE__ */ jsxs(
7313
7346
  "div",
7314
7347
  {
7315
7348
  style: {
7349
+ ...containedContentStyle,
7316
7350
  display: "grid",
7317
7351
  gap: "0.7rem",
7318
7352
  padding: "0.85rem",
@@ -7331,6 +7365,7 @@ function SponsorRelayFab(props) {
7331
7365
  "div",
7332
7366
  {
7333
7367
  style: {
7368
+ ...containedContentStyle,
7334
7369
  display: "grid",
7335
7370
  gap: "0.35rem",
7336
7371
  padding: "0.75rem",
@@ -7339,7 +7374,16 @@ function SponsorRelayFab(props) {
7339
7374
  border: "1px solid rgba(255,255,255,0.08)"
7340
7375
  },
7341
7376
  children: [
7342
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700 }, children: (entry.content?.registrationId ?? "registration") + " \xB7 " + shortHash(registrationHash ?? "unknown") }),
7377
+ /* @__PURE__ */ jsx(
7378
+ "div",
7379
+ {
7380
+ style: {
7381
+ ...containedContentStyle,
7382
+ fontWeight: 700
7383
+ },
7384
+ children: (entry.content?.registrationId ?? "registration") + " \xB7 " + shortHash(registrationHash ?? "unknown")
7385
+ }
7386
+ ),
7343
7387
  /* @__PURE__ */ jsxs("div", { children: [
7344
7388
  "Peer: ",
7345
7389
  entry.content?.peerId ?? "-"
package/shared/index.d.ts CHANGED
@@ -332,7 +332,7 @@ declare const STALE_INSTANCE_ALLOCATION_COOLDOWN_MS: number;
332
332
  declare const RECENT_INSTANCE_RUNTIME_GRACE_MS: number;
333
333
  declare const DEPLOYMENT_PENDING_WARNING_MS: number;
334
334
 
335
- declare const UI_PACKAGE_VERSION = "0.6.26";
335
+ declare const UI_PACKAGE_VERSION = "0.6.28";
336
336
 
337
337
  interface RootfsRequiredPortForward {
338
338
  port: number;
package/shared/index.js CHANGED
@@ -42,7 +42,7 @@ var RECENT_INSTANCE_RUNTIME_GRACE_MS = 10 * 60 * 1e3;
42
42
  var DEPLOYMENT_PENDING_WARNING_MS = 3 * 60 * 1e3;
43
43
 
44
44
  // src/shared/package-version.ts
45
- var UI_PACKAGE_VERSION = "0.6.26";
45
+ var UI_PACKAGE_VERSION = "0.6.28";
46
46
 
47
47
  // src/shared/format.ts
48
48
  function shortHash(value, head = 8, tail = 6) {
@@ -135,11 +135,10 @@ async function fetchWithTimeout(input, init = {}, timeoutMs = 15e3) {
135
135
 
136
136
  // ../browser/src/aleph-api.ts
137
137
  var DEFAULT_ALEPH_API_HOSTS = [
138
- "https://api3.aleph.im",
139
138
  "https://api2.aleph.im",
140
139
  "https://api.aleph.im"
141
140
  ];
142
- var DEFAULT_ALEPH_API_HOST = DEFAULT_ALEPH_API_HOSTS[0] ?? "https://api3.aleph.im";
141
+ var DEFAULT_ALEPH_API_HOST = DEFAULT_ALEPH_API_HOSTS[0] ?? "https://api2.aleph.im";
143
142
  var DEFAULT_CRN_LIST_URL = "https://crns-list.aleph.sh/crns.json";
144
143
  var DEFAULT_ALEPH_SCHEDULER_API_HOST = "https://scheduler.api.aleph.cloud";
145
144
  var DEFAULT_2N6_API_HOST = "https://api.2n6.me";
@@ -825,7 +824,12 @@ function watchWallet(onChange, provider = getEthereumProvider()) {
825
824
  // ../browser/src/client.ts
826
825
  function normalizeApiHost(value) {
827
826
  const trimmed = value.trim().replace(/\/+$/u, "");
828
- return trimmed ? trimmed : null;
827
+ if (!trimmed) return null;
828
+ try {
829
+ if (new URL(trimmed).hostname.toLowerCase() === "api3.aleph.im") return null;
830
+ } catch {
831
+ }
832
+ return trimmed;
829
833
  }
830
834
  function normalizeApiHosts(input, fallbackApiHost) {
831
835
  const rawValues = Array.isArray(input) ? input : typeof input === "string" ? input.split(/[\s,]+/u) : [];
@@ -3771,9 +3775,7 @@ function defaultState(props = {}) {
3771
3775
  instanceName: props.instanceName ?? DEFAULT_INSTANCE_NAME,
3772
3776
  ucanStoreBootstrap: defaultUcanStoreBootstrapInput(props),
3773
3777
  tierId: DEFAULT_TIER_ID,
3774
- showAdvanced: Boolean(
3775
- props.manifestJson?.trim() || props.sshPublicKey?.trim()
3776
- ),
3778
+ showAdvanced: false,
3777
3779
  showInstances: props.showInstances ?? true,
3778
3780
  showPasteManifest: Boolean(props.manifestJson?.trim()),
3779
3781
  busy: {