@stnd/account 0.2.10 → 0.2.11
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/CHANGELOG.md +8 -0
- package/package.json +2 -2
- package/ui/Avatar.svelte +25 -103
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stnd/account",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.11",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"svelte": "./ui/UserMenu.svelte",
|
|
6
6
|
"main": "./index.module.js",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"kysely-d1": "^0.4.0",
|
|
25
25
|
"nanostores": "^1.4.0",
|
|
26
26
|
"wrangler": "^4.129.0",
|
|
27
|
-
"@stnd/art": "0.1.
|
|
27
|
+
"@stnd/art": "0.1.2",
|
|
28
28
|
"@stnd/icon": "0.2.2",
|
|
29
29
|
"@stnd/log": "0.5.1",
|
|
30
30
|
"@stnd/styles": "0.9.0",
|
package/ui/Avatar.svelte
CHANGED
|
@@ -1,115 +1,37 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Standard Avatar (@stnd/account)
|
|
3
|
+
|
|
4
|
+
Consumes the universal procedural SVG Avatar engine from @stnd/art.
|
|
5
|
+
Complies with DRY law by delegating to the single source of truth.
|
|
6
|
+
-->
|
|
1
7
|
<script>
|
|
2
|
-
|
|
3
|
-
* Standard Avatar — A premium, reusable avatar component.
|
|
4
|
-
* Handles:
|
|
5
|
-
* 1. Profile Image (src)
|
|
6
|
-
* 2. Generative Art Fallback (via @stnd/art)
|
|
7
|
-
* 3. Initials overlay
|
|
8
|
-
*
|
|
9
|
-
* When used inside an <IdentityProvider>, it auto-reads
|
|
10
|
-
* the user's visual identity. Otherwise, falls back to
|
|
11
|
-
* name/email props as the seed.
|
|
12
|
-
*/
|
|
13
|
-
import { getContext } from "svelte";
|
|
14
|
-
import GenerativeArt from "@stnd/art/components/GenerativeArt.svelte";
|
|
15
|
-
import { hashCode } from "@stnd/art/lib/seed.js";
|
|
16
|
-
import { all as allStyles } from "@stnd/art/lib/styles/index.js";
|
|
8
|
+
import ArtAvatar from "@stnd/art/components/Avatar.svelte";
|
|
17
9
|
|
|
18
10
|
let {
|
|
19
11
|
src = null,
|
|
20
12
|
name = "",
|
|
13
|
+
username = "",
|
|
21
14
|
email = "",
|
|
15
|
+
seed = null,
|
|
22
16
|
size = "var(--space-12)",
|
|
17
|
+
variant = "auto",
|
|
18
|
+
showInitials = false,
|
|
23
19
|
border = false,
|
|
24
20
|
shadow = false,
|
|
21
|
+
class: className = "",
|
|
25
22
|
} = $props();
|
|
26
|
-
|
|
27
|
-
// Try to read identity from context (IdentityProvider)
|
|
28
|
-
// Falls back to local seed derivation if not wrapped
|
|
29
|
-
const getIdentity = getContext("identity") ?? null;
|
|
30
|
-
|
|
31
|
-
const localSeed = $derived(name || email || "guest");
|
|
32
|
-
const localHash = $derived(hashCode(localSeed));
|
|
33
|
-
const localStyle = $derived(allStyles[localHash % allStyles.length].name);
|
|
34
|
-
|
|
35
|
-
// Use identity context if available, otherwise derive locally
|
|
36
|
-
const seed = $derived(
|
|
37
|
-
getIdentity ? getIdentity().seed("avatar") : localSeed,
|
|
38
|
-
);
|
|
39
|
-
const style = $derived(
|
|
40
|
-
getIdentity ? getIdentity().signatureStyle : localStyle,
|
|
41
|
-
);
|
|
42
|
-
|
|
43
|
-
const initial = $derived(
|
|
44
|
-
(name || (getIdentity ? getIdentity().username : "") || email || "?")
|
|
45
|
-
.split(/[ @._-]/)
|
|
46
|
-
.filter(Boolean)
|
|
47
|
-
.map((part) => part[0])
|
|
48
|
-
.join("")
|
|
49
|
-
.slice(0, 2)
|
|
50
|
-
.toUpperCase(),
|
|
51
|
-
);
|
|
52
23
|
</script>
|
|
53
24
|
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
{
|
|
61
|
-
|
|
62
|
-
{
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
</div>
|
|
68
|
-
|
|
69
|
-
<style>
|
|
70
|
-
.stnd-avatar {
|
|
71
|
-
width: var(--avatar-size);
|
|
72
|
-
height: var(--avatar-size);
|
|
73
|
-
border-radius: 50%;
|
|
74
|
-
overflow: hidden;
|
|
75
|
-
position: relative;
|
|
76
|
-
display: flex;
|
|
77
|
-
align-items: center;
|
|
78
|
-
justify-content: center;
|
|
79
|
-
background: var(--color-background);
|
|
80
|
-
flex-shrink: 0;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.has-border {
|
|
84
|
-
outline: 2px solid var(--identity-primary, oklch(100% 0 0 / 0.3));
|
|
85
|
-
outline-offset: -2px;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.has-shadow {
|
|
89
|
-
box-shadow: 0 2px 12px var(--identity-glow, oklch(0% 0 0 / 0.25));
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
img {
|
|
93
|
-
width: 100%;
|
|
94
|
-
height: 100%;
|
|
95
|
-
object-fit: cover;
|
|
96
|
-
filter: saturate(0.9);
|
|
97
|
-
display: block;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
img:hover {
|
|
101
|
-
filter: saturate(1);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.initials {
|
|
105
|
-
font-size: calc(var(--avatar-size) * 0.35);
|
|
106
|
-
font-weight: 700;
|
|
107
|
-
letter-spacing: -0.02em;
|
|
108
|
-
color: var(--color-on-accent, white);
|
|
109
|
-
text-shadow:
|
|
110
|
-
0 1px 4px rgba(0, 0, 0, 0.4),
|
|
111
|
-
0 0 12px rgba(0, 0, 0, 0.15);
|
|
112
|
-
font-family: var(--font-interface);
|
|
113
|
-
pointer-events: none;
|
|
114
|
-
}
|
|
115
|
-
</style>
|
|
25
|
+
<ArtAvatar
|
|
26
|
+
{src}
|
|
27
|
+
{name}
|
|
28
|
+
{username}
|
|
29
|
+
{email}
|
|
30
|
+
{seed}
|
|
31
|
+
{size}
|
|
32
|
+
{variant}
|
|
33
|
+
{showInitials}
|
|
34
|
+
{border}
|
|
35
|
+
{shadow}
|
|
36
|
+
class={className}
|
|
37
|
+
/>
|