@le-space/ui 0.6.27 → 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 +158 -118
  3. package/shared/index.d.ts +1 -1
  4. package/shared/index.js +2 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@le-space/ui",
3
- "version": "0.6.27",
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.27",
48
- "@le-space/core": "0.6.27",
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.27";
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) {
@@ -3776,9 +3776,7 @@ function defaultState(props = {}) {
3776
3776
  instanceName: props.instanceName ?? DEFAULT_INSTANCE_NAME,
3777
3777
  ucanStoreBootstrap: defaultUcanStoreBootstrapInput(props),
3778
3778
  tierId: DEFAULT_TIER_ID,
3779
- showAdvanced: Boolean(
3780
- props.manifestJson?.trim() || props.sshPublicKey?.trim()
3781
- ),
3779
+ showAdvanced: false,
3782
3780
  showInstances: props.showInstances ?? true,
3783
3781
  showPasteManifest: Boolean(props.manifestJson?.trim()),
3784
3782
  busy: {
@@ -6127,7 +6125,13 @@ var basePanelStyle = {
6127
6125
  position: "fixed",
6128
6126
  zIndex: 9999,
6129
6127
  width: "min(28rem, calc(100vw - 2rem))",
6130
- 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",
6131
6135
  border: "1px solid var(--le-space-sponsor-relay-panel-border, rgba(199, 210, 254, 0.22))",
6132
6136
  borderRadius: "1.4rem",
6133
6137
  background: "var(--le-space-sponsor-relay-panel-bg, rgba(49, 46, 129, 0.94))",
@@ -6138,6 +6142,8 @@ var basePanelStyle = {
6138
6142
  };
6139
6143
  var fieldStyle = {
6140
6144
  width: "100%",
6145
+ minWidth: 0,
6146
+ boxSizing: "border-box",
6141
6147
  borderRadius: "0.8rem",
6142
6148
  border: "1px solid rgba(255,255,255,0.16)",
6143
6149
  background: "rgba(248,250,252,0.98)",
@@ -6161,6 +6167,7 @@ var secondaryButtonStyle = {
6161
6167
  backdropFilter: "blur(8px)"
6162
6168
  };
6163
6169
  var primaryButtonStyle = {
6170
+ boxSizing: "border-box",
6164
6171
  borderRadius: "0.95rem",
6165
6172
  border: "1px solid rgba(251, 191, 36, 0.42)",
6166
6173
  background: "linear-gradient(135deg, #f6c453 0%, #f59e0b 100%)",
@@ -6172,6 +6179,14 @@ var primaryButtonStyle = {
6172
6179
  lineHeight: 1.1,
6173
6180
  boxShadow: "0 10px 24px rgba(245, 158, 11, 0.24)"
6174
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
+ };
6175
6190
  var dangerButtonStyle = {
6176
6191
  borderRadius: "0.95rem",
6177
6192
  border: "1px solid rgba(248, 113, 113, 0.45)",
@@ -7195,128 +7210,143 @@ function SponsorRelayFab(props) {
7195
7210
  state.showInstances ? /* @__PURE__ */ jsxs(
7196
7211
  "div",
7197
7212
  {
7198
- style: { marginTop: "1rem", display: "grid", gap: "0.7rem" },
7213
+ style: {
7214
+ ...containedContentStyle,
7215
+ marginTop: "1rem",
7216
+ display: "grid",
7217
+ gap: "0.7rem"
7218
+ },
7199
7219
  children: [
7200
7220
  state.instances.map((entry) => {
7201
7221
  const confirmedRegistration = confirmedRegistrationByInstanceHash.get(
7202
7222
  entry.instance.item_hash
7203
7223
  ) ?? null;
7204
- return /* @__PURE__ */ jsxs("details", { open: true, children: [
7205
- /* @__PURE__ */ jsx("summary", { children: /* @__PURE__ */ jsxs(
7206
- "span",
7207
- {
7208
- style: {
7209
- display: "inline-flex",
7210
- alignItems: "center",
7211
- gap: "0.55rem",
7212
- flexWrap: "wrap"
7213
- },
7214
- children: [
7215
- (entry.instance.content?.metadata?.name ?? deploymentInstanceFallbackLabel(state)) + " \xB7 " + shortHash(entry.instance.item_hash),
7216
- bootstrapUiEnabled && confirmedRegistration ? /* @__PURE__ */ jsxs(
7217
- "span",
7218
- {
7219
- style: {
7220
- display: "inline-flex",
7221
- alignItems: "center",
7222
- gap: "0.32rem",
7223
- padding: "0.16rem 0.45rem",
7224
- borderRadius: "999px",
7225
- background: "rgba(34, 197, 94, 0.16)",
7226
- color: "#86efac",
7227
- fontSize: "0.7rem",
7228
- fontWeight: 700
7229
- },
7230
- children: [
7231
- /* @__PURE__ */ jsx(
7232
- "span",
7233
- {
7234
- "aria-hidden": "true",
7235
- style: {
7236
- width: "0.45rem",
7237
- height: "0.45rem",
7238
- borderRadius: "999px",
7239
- background: "#22c55e",
7240
- boxShadow: "0 0 0 3px rgba(34, 197, 94, 0.18)"
7241
- }
7242
- }
7243
- ),
7244
- "Aleph bootstrap registered"
7245
- ]
7246
- }
7247
- ) : null
7248
- ]
7249
- }
7250
- ) }),
7251
- /* @__PURE__ */ jsxs(
7252
- "div",
7253
- {
7254
- style: {
7255
- display: "grid",
7256
- gap: "0.35rem",
7257
- marginTop: "0.55rem"
7258
- },
7259
- children: [
7260
- /* @__PURE__ */ jsxs("div", { children: [
7261
- "Status: ",
7262
- entry.details.messageStatus
7263
- ] }),
7264
- bootstrapUiEnabled && confirmedRegistration ? /* @__PURE__ */ jsxs("div", { children: [
7265
- "Bootstrap registration:",
7266
- " ",
7267
- shortHash(
7268
- confirmedRegistration.messageHash ?? confirmedRegistration.content?.registrationId ?? "confirmed",
7269
- 14,
7270
- 8
7271
- )
7272
- ] }) : null,
7273
- /* @__PURE__ */ jsxs("div", { children: [
7274
- "Host IPv4: ",
7275
- entry.details.hostIpv4 ?? "-"
7276
- ] }),
7277
- /* @__PURE__ */ jsxs("div", { children: [
7278
- "IPv6: ",
7279
- entry.details.ipv6 ?? "-"
7280
- ] }),
7281
- /* @__PURE__ */ jsxs("div", { children: [
7282
- "VM IPv4: ",
7283
- entry.details.vmIpv4 ?? "-"
7284
- ] }),
7285
- /* @__PURE__ */ jsxs("div", { children: [
7286
- "SSH: ",
7287
- entry.details.sshCommand ?? "-"
7288
- ] }),
7289
- /* @__PURE__ */ jsxs("div", { children: [
7290
- "Ports: ",
7291
- joinMappedPorts(entry.details.mappedPorts)
7292
- ] }),
7293
- /* @__PURE__ */ jsxs("div", { children: [
7294
- "Submitted:",
7295
- " ",
7296
- formatDateTime(
7297
- entry.instance.reception_time ?? entry.instance.time
7298
- )
7299
- ] }),
7300
- /* @__PURE__ */ jsx(
7301
- "button",
7302
- {
7303
- type: "button",
7304
- style: dangerButtonStyle,
7305
- onClick: () => void controller.deleteInstance(
7306
- entry.instance.item_hash
7307
- ),
7308
- children: state.busy.deletingInstanceHash === entry.instance.item_hash ? "Deleting\u2026" : "Delete"
7309
- }
7310
- )
7311
- ]
7312
- }
7313
- )
7314
- ] }, 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
+ );
7315
7344
  }),
7316
7345
  bootstrapUiEnabled && orphanRegistrations.length > 0 ? /* @__PURE__ */ jsxs(
7317
7346
  "div",
7318
7347
  {
7319
7348
  style: {
7349
+ ...containedContentStyle,
7320
7350
  display: "grid",
7321
7351
  gap: "0.7rem",
7322
7352
  padding: "0.85rem",
@@ -7335,6 +7365,7 @@ function SponsorRelayFab(props) {
7335
7365
  "div",
7336
7366
  {
7337
7367
  style: {
7368
+ ...containedContentStyle,
7338
7369
  display: "grid",
7339
7370
  gap: "0.35rem",
7340
7371
  padding: "0.75rem",
@@ -7343,7 +7374,16 @@ function SponsorRelayFab(props) {
7343
7374
  border: "1px solid rgba(255,255,255,0.08)"
7344
7375
  },
7345
7376
  children: [
7346
- /* @__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
+ ),
7347
7387
  /* @__PURE__ */ jsxs("div", { children: [
7348
7388
  "Peer: ",
7349
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.27";
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.27";
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) {
@@ -3775,9 +3775,7 @@ function defaultState(props = {}) {
3775
3775
  instanceName: props.instanceName ?? DEFAULT_INSTANCE_NAME,
3776
3776
  ucanStoreBootstrap: defaultUcanStoreBootstrapInput(props),
3777
3777
  tierId: DEFAULT_TIER_ID,
3778
- showAdvanced: Boolean(
3779
- props.manifestJson?.trim() || props.sshPublicKey?.trim()
3780
- ),
3778
+ showAdvanced: false,
3781
3779
  showInstances: props.showInstances ?? true,
3782
3780
  showPasteManifest: Boolean(props.manifestJson?.trim()),
3783
3781
  busy: {