@vibes.diy/vibe-runtime 2.6.3 → 2.6.4
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 +3 -3
- package/use-viewer-tag.js +14 -112
- package/use-viewer-tag.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vibes.diy/vibe-runtime",
|
|
3
|
-
"version": "2.6.
|
|
3
|
+
"version": "2.6.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"@adviser/cement": "~0.5.34",
|
|
11
|
-
"@vibes.diy/base": "2.6.
|
|
12
|
-
"@vibes.diy/vibe-types": "2.6.
|
|
11
|
+
"@vibes.diy/base": "2.6.4",
|
|
12
|
+
"@vibes.diy/vibe-types": "2.6.4",
|
|
13
13
|
"arktype": "~2.2.1",
|
|
14
14
|
"charwise": "~3.0.1",
|
|
15
15
|
"react": "~19.2.7",
|
package/use-viewer-tag.js
CHANGED
|
@@ -1,14 +1,7 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ViewerTagView } from "@vibes.diy/base";
|
|
2
3
|
import { getRegisteredVibeApi } from "./register-dependencies.js";
|
|
3
|
-
function CameraGlyph({ size }) {
|
|
4
|
-
return (React.createElement("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: size, height: size, style: { display: "block" }, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" },
|
|
5
|
-
React.createElement("path", { d: "M4 7h4l2-2h4l2 2h4a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1Z" }),
|
|
6
|
-
React.createElement("circle", { cx: "12", cy: "12.5", r: "3.5" })));
|
|
7
|
-
}
|
|
8
4
|
export function ViewerTagImpl({ _viewer, style, ...props }) {
|
|
9
|
-
const [uploading, setUploading] = useState(false);
|
|
10
|
-
const [avatarError, setAvatarError] = useState(false);
|
|
11
|
-
const fileRef = useRef(null);
|
|
12
5
|
const slugFromProp = "user" in props && props.user ? props.user.userHandle : "userHandle" in props ? props.userHandle : undefined;
|
|
13
6
|
const resolvedSlug = slugFromProp ?? _viewer?.userHandle ?? "";
|
|
14
7
|
const resolvedAvatarUrl = "user" in props && props.user?.avatarUrl
|
|
@@ -16,117 +9,26 @@ export function ViewerTagImpl({ _viewer, style, ...props }) {
|
|
|
16
9
|
: resolvedSlug
|
|
17
10
|
? `/u/${encodeURIComponent(resolvedSlug)}/avatar`
|
|
18
11
|
: undefined;
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
setAvatarError(false);
|
|
21
|
-
}, [resolvedAvatarUrl]);
|
|
22
12
|
if (("userHandle" in props || "user" in props) && !slugFromProp) {
|
|
23
13
|
return React.createElement("span", { style: { color: "var(--muted, #888)", fontStyle: "italic", fontSize: 13 } }, "no user handle provided");
|
|
24
14
|
}
|
|
25
15
|
const isAnonymousSelf = _viewer === null && !("userHandle" in props) && !("user" in props);
|
|
26
|
-
if (isAnonymousSelf) {
|
|
27
|
-
return (React.createElement("button", { onClick: () => getRegisteredVibeApi()?.requestLogin(), style: {
|
|
28
|
-
display: "inline-flex",
|
|
29
|
-
alignItems: "center",
|
|
30
|
-
gap: 6,
|
|
31
|
-
background: "transparent",
|
|
32
|
-
border: "1px solid var(--accent, #6366f1)",
|
|
33
|
-
borderRadius: 999,
|
|
34
|
-
padding: "5px 14px",
|
|
35
|
-
fontSize: 14,
|
|
36
|
-
color: "var(--accent, #6366f1)",
|
|
37
|
-
cursor: "pointer",
|
|
38
|
-
fontWeight: 500,
|
|
39
|
-
...style,
|
|
40
|
-
} }, "Sign in"));
|
|
41
|
-
}
|
|
42
16
|
const isSelf = _viewer !== null && !("userHandle" in props) && !("user" in props);
|
|
43
|
-
async function
|
|
44
|
-
const file = e.target.files?.[0];
|
|
45
|
-
if (!file)
|
|
46
|
-
return;
|
|
17
|
+
async function handlePickFile(file) {
|
|
47
18
|
const api = getRegisteredVibeApi();
|
|
48
19
|
if (!api)
|
|
49
20
|
return;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
return;
|
|
61
|
-
await api.updateAvatarCid(uploadRes.cid, viewerHandle, file.type);
|
|
62
|
-
}
|
|
63
|
-
finally {
|
|
64
|
-
setUploading(false);
|
|
65
|
-
if (fileRef.current)
|
|
66
|
-
fileRef.current.value = "";
|
|
67
|
-
}
|
|
21
|
+
const viewerHandle = _viewer?.userHandle;
|
|
22
|
+
if (!viewerHandle)
|
|
23
|
+
return;
|
|
24
|
+
const rUpload = await api.putAsset(file, file.type);
|
|
25
|
+
if (rUpload.isErr())
|
|
26
|
+
return;
|
|
27
|
+
const uploadRes = rUpload.Ok();
|
|
28
|
+
if (uploadRes.status !== "ok")
|
|
29
|
+
return;
|
|
30
|
+
await api.updateAvatarCid(uploadRes.cid, viewerHandle, file.type);
|
|
68
31
|
}
|
|
69
|
-
|
|
70
|
-
const hasAvatarImage = Boolean(resolvedAvatarUrl && !avatarError);
|
|
71
|
-
return (React.createElement("span", { style: {
|
|
72
|
-
display: "inline-flex",
|
|
73
|
-
alignItems: "center",
|
|
74
|
-
gap: 8,
|
|
75
|
-
background: "var(--card-bg, rgba(255,255,255,0.07))",
|
|
76
|
-
border: "1px solid var(--border, rgba(255,255,255,0.15))",
|
|
77
|
-
borderRadius: 999,
|
|
78
|
-
padding: "5px 14px 5px 5px",
|
|
79
|
-
fontSize: 14,
|
|
80
|
-
color: "var(--text, #e0e0e0)",
|
|
81
|
-
...style,
|
|
82
|
-
} },
|
|
83
|
-
React.createElement("span", { style: { position: "relative", flexShrink: 0 } },
|
|
84
|
-
React.createElement("span", { onClick: isSelf ? () => fileRef.current?.click() : undefined, style: {
|
|
85
|
-
width: 30,
|
|
86
|
-
height: 30,
|
|
87
|
-
borderRadius: "50%",
|
|
88
|
-
background: "var(--accent, #6366f1)",
|
|
89
|
-
display: "flex",
|
|
90
|
-
alignItems: "center",
|
|
91
|
-
justifyContent: "center",
|
|
92
|
-
fontSize: 12,
|
|
93
|
-
fontWeight: 700,
|
|
94
|
-
color: "white",
|
|
95
|
-
overflow: "hidden",
|
|
96
|
-
cursor: isSelf ? "pointer" : "default",
|
|
97
|
-
opacity: uploading ? 0.5 : 1,
|
|
98
|
-
...(isSelf ? { outline: "2px dashed var(--accent, #818cf8)", outlineOffset: 2 } : {}),
|
|
99
|
-
} },
|
|
100
|
-
hasAvatarImage ? (React.createElement("img", { src: resolvedAvatarUrl, alt: resolvedSlug, onError: () => setAvatarError(true), style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: "50%" } })) : (initial),
|
|
101
|
-
isSelf && !hasAvatarImage && (React.createElement("span", { style: {
|
|
102
|
-
position: "absolute",
|
|
103
|
-
inset: 0,
|
|
104
|
-
background: "rgba(15,12,40,0.72)",
|
|
105
|
-
display: "flex",
|
|
106
|
-
alignItems: "center",
|
|
107
|
-
justifyContent: "center",
|
|
108
|
-
color: "var(--accent-text, var(--accent, #a5b4fc))",
|
|
109
|
-
borderRadius: "50%",
|
|
110
|
-
} },
|
|
111
|
-
React.createElement(CameraGlyph, { size: 13 })))),
|
|
112
|
-
isSelf && hasAvatarImage && (React.createElement("span", { style: {
|
|
113
|
-
position: "absolute",
|
|
114
|
-
right: -1,
|
|
115
|
-
bottom: -1,
|
|
116
|
-
width: 13,
|
|
117
|
-
height: 13,
|
|
118
|
-
borderRadius: "50%",
|
|
119
|
-
background: "rgba(15,12,40,0.9)",
|
|
120
|
-
border: "1px solid var(--border, rgba(255,255,255,0.25))",
|
|
121
|
-
display: "flex",
|
|
122
|
-
alignItems: "center",
|
|
123
|
-
justifyContent: "center",
|
|
124
|
-
lineHeight: 1,
|
|
125
|
-
color: "var(--accent-text, var(--accent, #a5b4fc))",
|
|
126
|
-
pointerEvents: "none",
|
|
127
|
-
} },
|
|
128
|
-
React.createElement(CameraGlyph, { size: 9 })))),
|
|
129
|
-
React.createElement("span", { style: { fontWeight: 500 } }, resolvedSlug),
|
|
130
|
-
isSelf && React.createElement("input", { ref: fileRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileChange })));
|
|
32
|
+
return (React.createElement(ViewerTagView, { slug: resolvedSlug, avatarUrl: resolvedAvatarUrl, editable: isSelf, anonymous: isAnonymousSelf, onSignIn: () => getRegisteredVibeApi()?.requestLogin(), onPickFile: handlePickFile, style: style }));
|
|
131
33
|
}
|
|
132
34
|
//# sourceMappingURL=use-viewer-tag.js.map
|
package/use-viewer-tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-viewer-tag.js","sourceRoot":"","sources":["../jsr/use-viewer-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"use-viewer-tag.js","sourceRoot":"","sources":["../jsr/use-viewer-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAkBlE,MAAM,UAAU,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,EAAsB;IAC5E,MAAM,YAAY,GAAG,MAAM,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAClI,MAAM,YAAY,GAAG,YAAY,IAAI,OAAO,EAAE,UAAU,IAAI,EAAE,CAAC;IAC/D,MAAM,iBAAiB,GACrB,MAAM,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,SAAS;QACtC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;QACtB,CAAC,CAAC,YAAY;YACZ,CAAC,CAAC,MAAM,kBAAkB,CAAC,YAAY,CAAC,SAAS;YACjD,CAAC,CAAC,SAAS,CAAC;IAElB,IAAI,CAAC,YAAY,IAAI,KAAK,IAAI,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;QAChE,OAAO,8BAAM,KAAK,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,8BAAgC,CAAC;IACzH,CAAC;IAGD,MAAM,eAAe,GAAG,OAAO,KAAK,IAAI,IAAI,CAAC,CAAC,YAAY,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,CAAC;IAO3F,MAAM,MAAM,GAAG,OAAO,KAAK,IAAI,IAAI,CAAC,CAAC,YAAY,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,CAAC;IAElF,KAAK,UAAU,cAAc,CAAC,IAAU;QACtC,MAAM,GAAG,GAAG,oBAAoB,EAAE,CAAC;QACnC,IAAI,CAAC,GAAG;YAAE,OAAO;QAGjB,MAAM,YAAY,GAAG,OAAO,EAAE,UAAU,CAAC;QACzC,IAAI,CAAC,YAAY;YAAE,OAAO;QAC1B,MAAM,OAAO,GAAG,MAAM,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACpD,IAAI,OAAO,CAAC,KAAK,EAAE;YAAE,OAAO;QAC5B,MAAM,SAAS,GAAG,OAAO,CAAC,EAAE,EAAE,CAAC;QAC/B,IAAI,SAAS,CAAC,MAAM,KAAK,IAAI;YAAE,OAAO;QAItC,MAAM,GAAG,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACpE,CAAC;IAED,OAAO,CACL,oBAAC,aAAa,IACZ,IAAI,EAAE,YAAY,EAClB,SAAS,EAAE,iBAAiB,EAC5B,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,GAAG,EAAE,CAAC,oBAAoB,EAAE,EAAE,YAAY,EAAE,EACtD,UAAU,EAAE,cAAc,EAC1B,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC"}
|