@m4l-jweb/build 0.2.0 → 0.3.0

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l-jweb/build",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "m4l-jweb: the CLI that builds and packages a device repo into installable Max for Live devices.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -31,6 +31,6 @@
31
31
  "acorn": "^8.17.0",
32
32
  "archiver": "^7.0.1",
33
33
  "typescript": "^5.7.0",
34
- "@m4l-jweb/wrapper": "0.2.0"
34
+ "@m4l-jweb/wrapper": "0.3.0"
35
35
  }
36
36
  }
@@ -17,13 +17,13 @@
17
17
  "format": "prettier --write \"src/**/*.{ts,tsx,css}\" \"scripts/*.mjs\" \"patcher/*.mjs\""
18
18
  },
19
19
  "dependencies": {
20
- "@m4l-jweb/bridge": "^0.2.0",
21
- "@m4l-jweb/surface": "^0.2.0",
20
+ "@m4l-jweb/bridge": "^0.3.0",
21
+ "@m4l-jweb/surface": "^0.3.0",
22
22
  "react": "^19.0.0",
23
23
  "react-dom": "^19.0.0"
24
24
  },
25
25
  "devDependencies": {
26
- "@m4l-jweb/build": "^0.2.0",
26
+ "@m4l-jweb/build": "^0.3.0",
27
27
  "@types/node": "^22.0.0",
28
28
  "@types/react": "^19.0.0",
29
29
  "@types/react-dom": "^19.0.0",
@@ -1,11 +1,17 @@
1
1
  /**
2
2
  * shared/Frame.tsx - the chrome every device wears: a title, a where-am-I badge,
3
- * and a footer carrying the two build stamps.
3
+ * and the two build stamps.
4
4
  *
5
- * The footer is not decoration. Live embeds a COPY of a device into the set, so
5
+ * The stamps are not decoration. Live embeds a COPY of a device into the set, so
6
6
  * reinstalling does not update instances already on tracks - and a stale device
7
7
  * behaves like a bug in code you have already fixed. The stamps make that
8
8
  * visible instead of mysterious.
9
+ *
10
+ * They live in the HEADER, top right, and that placement is load-bearing: the
11
+ * device view is a fixed ~169 px and overgrown UI clips silently at the BOTTOM.
12
+ * A stamp in a footer is a staleness check that disappears exactly when the
13
+ * device has grown enough to be worth checking. Anchored to the header, it
14
+ * survives whatever the device does below it.
9
15
  */
10
16
  import type { ReactNode } from "react";
11
17
  import { inJweb } from "@m4l-jweb/bridge";
@@ -19,15 +25,19 @@ export function Frame({ title, device, children }: { title: string; device: Devi
19
25
  <header>
20
26
  <h1>{title}</h1>
21
27
  <span className={`badge ${inJweb ? "live" : "dev"}`}>{inJweb ? "in Max" : "browser dev"}</span>
28
+ <span className="stamp" title={`ui ${__APP_VERSION__} / wrapper ${device.build ?? "-"}`}>
29
+ {device.stale ? (
30
+ <span className="warn">stale - delete and re-drag the device</span>
31
+ ) : (
32
+ <>
33
+ <span>ui {__APP_VERSION__}</span>
34
+ <span>wrapper {device.build ?? "-"}</span>
35
+ </>
36
+ )}
37
+ </span>
22
38
  </header>
23
39
 
24
40
  <dl>{children}</dl>
25
-
26
- <footer>
27
- <span>ui {__APP_VERSION__}</span>
28
- <span>wrapper {device.build ?? "-"}</span>
29
- {device.stale && <span className="warn">stale install - delete and re-drag the device</span>}
30
- </footer>
31
41
  </main>
32
42
  );
33
43
  }
@@ -87,6 +87,23 @@ h1 {
87
87
  color: var(--fg);
88
88
  }
89
89
 
90
+ /* The build stamps, top right. Deliberately NOT in a footer: the device view is
91
+ a fixed ~169 px and clips at the bottom, so a footer stamp vanishes exactly
92
+ when the UI has grown enough for staleness to be worth checking. The stamps
93
+ are long (version + ISO timestamp), so they ellipsize - the full text is in
94
+ the title attribute, and the hover works in Max's jweb. */
95
+ .stamp {
96
+ color: var(--muted);
97
+ display: flex;
98
+ font-size: 9px;
99
+ gap: 8px;
100
+ margin-left: auto;
101
+ max-width: 45%;
102
+ overflow: hidden;
103
+ text-overflow: ellipsis;
104
+ white-space: nowrap;
105
+ }
106
+
90
107
  dl {
91
108
  column-gap: 10px;
92
109
  display: grid;