badgecraft 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.
Files changed (73) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/LICENSE +21 -0
  3. package/README.md +406 -0
  4. package/cli/index.mjs +143 -0
  5. package/cli/render.d.ts +20 -0
  6. package/cli/render.mjs +87 -0
  7. package/cli/studio.mjs +98 -0
  8. package/dist/badge-B-g_9WFj.d.ts +79 -0
  9. package/dist/badge-CCjUxNIG.d.cts +79 -0
  10. package/dist/chunk-3OMN635U.js +44 -0
  11. package/dist/chunk-3OMN635U.js.map +1 -0
  12. package/dist/chunk-BRT5S5PF.cjs +3418 -0
  13. package/dist/chunk-BRT5S5PF.cjs.map +1 -0
  14. package/dist/chunk-EBDSIGZR.cjs +48 -0
  15. package/dist/chunk-EBDSIGZR.cjs.map +1 -0
  16. package/dist/chunk-RRYBMB25.js +3410 -0
  17. package/dist/chunk-RRYBMB25.js.map +1 -0
  18. package/dist/cli-browser.js +526 -0
  19. package/dist/element.cjs +176 -0
  20. package/dist/element.cjs.map +1 -0
  21. package/dist/element.d.cts +31 -0
  22. package/dist/element.d.ts +31 -0
  23. package/dist/element.js +174 -0
  24. package/dist/element.js.map +1 -0
  25. package/dist/index.cjs +47 -0
  26. package/dist/index.cjs.map +1 -0
  27. package/dist/index.d.cts +58 -0
  28. package/dist/index.d.ts +58 -0
  29. package/dist/index.js +17 -0
  30. package/dist/index.js.map +1 -0
  31. package/dist/react.cjs +60 -0
  32. package/dist/react.cjs.map +1 -0
  33. package/dist/react.d.cts +29 -0
  34. package/dist/react.d.ts +29 -0
  35. package/dist/react.js +55 -0
  36. package/dist/react.js.map +1 -0
  37. package/dist/studio/assets/badge-9Zq6e9Ht.js +524 -0
  38. package/dist/studio/assets/base-ItCYnbux.css +1 -0
  39. package/dist/studio/assets/base-LFa9cTPp.js +1 -0
  40. package/dist/studio/assets/element-CCTxyf61.js +1 -0
  41. package/dist/studio/assets/index-BVuSTaz-.css +1 -0
  42. package/dist/studio/assets/index-CTTcx2pV.js +28 -0
  43. package/dist/studio/assets/option-keys-CKi71y0n.js +1 -0
  44. package/dist/studio/assets/react-Cq5Erey2.js +9 -0
  45. package/dist/studio/assets/react-DyJFYpWJ.js +1 -0
  46. package/dist/studio/assets/studio-C6plMNOe.css +1 -0
  47. package/dist/studio/assets/studio-DBcSY6tV.js +1 -0
  48. package/dist/studio/assets/style-C2sJ2Xy3.css +1 -0
  49. package/dist/studio/assets/vue-BpGwr3iF.js +1 -0
  50. package/dist/studio/element.html +31 -0
  51. package/dist/studio/env/studio.hdr +5 -0
  52. package/dist/studio/index.html +24 -0
  53. package/dist/studio/logos/apple.svg +1 -0
  54. package/dist/studio/logos/atlassian.svg +1 -0
  55. package/dist/studio/logos/google.svg +1 -0
  56. package/dist/studio/logos/meta.svg +1 -0
  57. package/dist/studio/react.html +16 -0
  58. package/dist/studio/studio.html +27 -0
  59. package/dist/studio/vue.html +15 -0
  60. package/dist/types-CHM3-ZZV.d.cts +204 -0
  61. package/dist/types-CHM3-ZZV.d.ts +204 -0
  62. package/dist/vue.cjs +93 -0
  63. package/dist/vue.cjs.map +1 -0
  64. package/dist/vue.d.cts +115 -0
  65. package/dist/vue.d.ts +115 -0
  66. package/dist/vue.js +87 -0
  67. package/dist/vue.js.map +1 -0
  68. package/docs/cli.md +146 -0
  69. package/docs/gallery.jpg +0 -0
  70. package/docs/performance.md +151 -0
  71. package/docs/render-quality.md +220 -0
  72. package/docs/studio.jpg +0 -0
  73. package/package.json +163 -0
package/dist/studio/index.html ADDED
@@ -0,0 +1,24 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
6
+ <meta name="description" content="Turn any SVG into an interactive 3D badge in metal, enamel, glitter, and more. A tiny, dependency-free library for React, Vue, Web Components, and plain HTML, with a free badge Studio." />
7
+ <meta name="theme-color" content="#09090b" />
8
+ <meta property="og:title" content="badgecraft: any SVG, crafted into a badge" />
9
+ <meta property="og:description" content="Interactive 3D badges from your icons and logos. Design one in the Studio, then export a PNG or copy the code." />
10
+ <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 1.5 21 6.75v10.5L12 22.5 3 17.25V6.75Z%22 fill=%22%23e7c46e%22/%3E%3Cpath d=%22M12 5.2 17.8 8.6v6.8L12 18.8l-5.8-3.4V8.6Z%22 fill=%22%2317181c%22/%3E%3C/svg%3E" />
11
+ <title>badgecraft · Turn any SVG into a 3D badge</title>
12
+ <script type="module" crossorigin src="./assets/index-CTTcx2pV.js"></script>
13
+ <link rel="modulepreload" crossorigin href="./assets/badge-9Zq6e9Ht.js">
14
+ <link rel="modulepreload" crossorigin href="./assets/option-keys-CKi71y0n.js">
15
+ <link rel="modulepreload" crossorigin href="./assets/react-Cq5Erey2.js">
16
+ <link rel="modulepreload" crossorigin href="./assets/base-LFa9cTPp.js">
17
+ <link rel="stylesheet" crossorigin href="./assets/base-ItCYnbux.css">
18
+ <link rel="stylesheet" crossorigin href="./assets/index-BVuSTaz-.css">
19
+ </head>
20
+ <body>
21
+ <div id="root"></div>
22
+ <noscript>badgecraft turns any SVG into an interactive 3D badge. Enable JavaScript to see live badges, or visit https://github.com/ParthJadhav/badgecraft.</noscript>
23
+ </body>
24
+ </html>
package/dist/studio/logos/apple.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#000000" d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>
package/dist/studio/logos/atlassian.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#0052CC" d="M7.12 11.084a.683.683 0 00-1.16.126L.075 22.974a.703.703 0 00.63 1.018h8.19a.678.678 0 00.63-.39c1.767-3.65.696-9.203-2.406-12.52zM11.434.386a15.515 15.515 0 00-.906 15.317l3.95 7.9a.703.703 0 00.628.388h8.19a.703.703 0 00.63-1.017L12.63.38a.664.664 0 00-1.196.006z"/></svg>
package/dist/studio/logos/google.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 22 22"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
package/dist/studio/logos/meta.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#0081FB" d="M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z"/></svg>
package/dist/studio/react.html ADDED
@@ -0,0 +1,16 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>badgecraft · React</title>
7
+ <script type="module" crossorigin src="./assets/react-DyJFYpWJ.js"></script>
8
+ <link rel="modulepreload" crossorigin href="./assets/badge-9Zq6e9Ht.js">
9
+ <link rel="modulepreload" crossorigin href="./assets/option-keys-CKi71y0n.js">
10
+ <link rel="modulepreload" crossorigin href="./assets/react-Cq5Erey2.js">
11
+ <link rel="stylesheet" crossorigin href="./assets/style-C2sJ2Xy3.css">
12
+ </head>
13
+ <body>
14
+ <div id="root"></div>
15
+ </body>
16
+ </html>
package/dist/studio/studio.html ADDED
@@ -0,0 +1,27 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
6
+ <meta name="description" content="Turn your SVG into an interactive 3D badge. Pick a finish, download a PNG, or copy working code for React, Vue, Web Components, or plain HTML." />
7
+ <meta name="theme-color" content="#09090b" />
8
+ <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 1.5 21 6.75v10.5L12 22.5 3 17.25V6.75Z%22 fill=%22%23e7c46e%22/%3E%3Cpath d=%22M12 5.2 17.8 8.6v6.8L12 18.8l-5.8-3.4V8.6Z%22 fill=%22%2317181c%22/%3E%3C/svg%3E" />
9
+ <!-- Sample artwork downloads alongside the app bundle (see site/shared/artwork.ts). -->
10
+ <link rel="preload" href="./logos/google.svg" as="fetch" crossorigin />
11
+ <link rel="preload" href="./logos/apple.svg" as="fetch" crossorigin />
12
+ <link rel="preload" href="./logos/meta.svg" as="fetch" crossorigin />
13
+ <link rel="preload" href="./logos/atlassian.svg" as="fetch" crossorigin />
14
+ <title>Badge Studio · badgecraft</title>
15
+ <script type="module" crossorigin src="./assets/studio-DBcSY6tV.js"></script>
16
+ <link rel="modulepreload" crossorigin href="./assets/badge-9Zq6e9Ht.js">
17
+ <link rel="modulepreload" crossorigin href="./assets/option-keys-CKi71y0n.js">
18
+ <link rel="modulepreload" crossorigin href="./assets/react-Cq5Erey2.js">
19
+ <link rel="modulepreload" crossorigin href="./assets/base-LFa9cTPp.js">
20
+ <link rel="stylesheet" crossorigin href="./assets/base-ItCYnbux.css">
21
+ <link rel="stylesheet" crossorigin href="./assets/studio-C6plMNOe.css">
22
+ </head>
23
+ <body>
24
+ <div id="root"></div>
25
+ <noscript>Badge Studio needs JavaScript and WebGL2 to render badges.</noscript>
26
+ </body>
27
+ </html>
package/dist/studio/vue.html ADDED
@@ -0,0 +1,15 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>badgecraft · Vue</title>
7
+ <script type="module" crossorigin src="./assets/vue-BpGwr3iF.js"></script>
8
+ <link rel="modulepreload" crossorigin href="./assets/badge-9Zq6e9Ht.js">
9
+ <link rel="modulepreload" crossorigin href="./assets/option-keys-CKi71y0n.js">
10
+ <link rel="stylesheet" crossorigin href="./assets/style-C2sJ2Xy3.css">
11
+ </head>
12
+ <body>
13
+ <div id="app"></div>
14
+ </body>
15
+ </html>
package/dist/types-CHM3-ZZV.d.cts ADDED
@@ -0,0 +1,204 @@
1
+ /**
2
+ * Public option types for badgecraft.
3
+ *
4
+ * Sizes that are "fractions of the badge" are relative to the badge's square
5
+ * bounding box (1 = full width of the badge).
6
+ */
7
+ type MaterialPreset = 'gold' | 'rose-gold' | 'white-gold' | 'matte-gold' | 'brushed-gold' | 'silver' | 'brushed-silver' | 'platinum' | 'chrome' | 'copper' | 'bronze' | 'brass' | 'titanium' | 'gunmetal' | 'black-chrome' | 'enamel' | 'matte-enamel' | 'candy' | 'glitter' | 'pearl' | 'holographic' | 'onyx' | 'obsidian';
8
+ type BrushDirection = 'circular' | 'radial' | 'horizontal' | 'vertical';
9
+ /**
10
+ * A physically based material. Mirrors the glTF / MeshPhysicalMaterial model:
11
+ * a base layer (dielectric ↔ metal) with an optional clear-coat on top.
12
+ */
13
+ interface Material {
14
+ /** Base color (any CSS color). For metals this is the specular (F0) tint. */
15
+ color?: string;
16
+ /** Take the base color from the SVG instead of `color`. Defaults to true for the enamel slot. */
17
+ useSvgColor?: boolean;
18
+ /** 0 = dielectric (enamel, paint), 1 = metal. */
19
+ metalness?: number;
20
+ /** Microfacet roughness, 0 = mirror, 1 = fully diffuse. */
21
+ roughness?: number;
22
+ /** Strength of a glossy clear-coat layer on top of the base (0..1). */
23
+ clearcoat?: number;
24
+ /** Roughness of the clear-coat layer. */
25
+ clearcoatRoughness?: number;
26
+ /** Index of refraction for dielectric reflectance (default 1.5). */
27
+ ior?: number;
28
+ /** Thin-film interference strength (soap bubble / oil slick / anodized look). */
29
+ iridescence?: number;
30
+ /** Thin-film thickness in nanometres (100–1200). */
31
+ iridescenceThickness?: number;
32
+ /** Amount of sparkling metallic flakes (0..1). */
33
+ flakes?: number;
34
+ /** Flake density: number of flakes across the badge. */
35
+ flakeScale?: number;
36
+ /** Strength of brushed-metal streaks (0..1). */
37
+ brushed?: number;
38
+ /** Direction of the brushing pattern. */
39
+ brushDirection?: BrushDirection;
40
+ /** Self-illumination of the base color (0..1), useful for "glowing" enamel. */
41
+ emissive?: number;
42
+ }
43
+ /** Either a preset name or a material, optionally extending a preset. */
44
+ type MaterialInput = MaterialPreset | (Material & {
45
+ preset?: MaterialPreset;
46
+ });
47
+ /** The four material slots every badge is built from. */
48
+ type MaterialSlot = 'metal' | 'enamel' | 'base' | 'accent';
49
+ /**
50
+ * How a region of the SVG is sculpted:
51
+ * - `raised`: rounded metal wire (strokes) or bevelled plateau (fills)
52
+ * - `inset`: recessed, slightly domed enamel pool
53
+ * - `flat`: sits on the backplate
54
+ * - `none`: excluded from the badge
55
+ */
56
+ type ReliefRole = 'raised' | 'inset' | 'flat' | 'none';
57
+ /**
58
+ * - `cloisonne`: strokes become raised metal wires, fills become enamel.
59
+ * - `embossed`: every shape becomes raised metal on an enamel backplate.
60
+ * - `auto`: cloisonné if the SVG has strokes or several colours, embossed for
61
+ * single-colour artwork (logos, solid icons).
62
+ */
63
+ type BadgeMode = 'auto' | 'cloisonne' | 'embossed';
64
+ type FrameShape = 'circle' | 'hexagon' | 'octagon' | 'shield' | 'square' | 'diamond' | 'star';
65
+ interface FrameOptions {
66
+ /** Built-in shape, or `path` for a custom one. */
67
+ shape?: FrameShape;
68
+ /** Custom frame path in a 0..100 coordinate space. */
69
+ path?: string;
70
+ /** Inset of the artwork inside the frame (fraction of the frame, default 0.2). */
71
+ padding?: number;
72
+ /** Material slot used for the frame's backplate (default `base`). */
73
+ material?: MaterialSlot;
74
+ /** Width of an extra inner decorative wire (fraction of badge, default 0 = none). */
75
+ innerRing?: number;
76
+ }
77
+ type ProfileShape = 'round' | 'soft' | 'chamfer';
78
+ interface ReliefOptions {
79
+ /** Height of the front relief (fraction of badge, default 0.05). */
80
+ depth?: number;
81
+ /** Thickness of the back plate (fraction of badge, default 0.03). */
82
+ thickness?: number;
83
+ /** Height of the backplate relative to the wire tops (0..1, default 0.3). */
84
+ floor?: number;
85
+ /** Cross-section of raised wires and bevels. */
86
+ profile?: ProfileShape;
87
+ /** Bevel width of raised filled shapes (fraction of badge, default 0.02). */
88
+ bevel?: number;
89
+ /** Rounding of the outer edge (fraction of badge, default 0.014). */
90
+ edge?: number;
91
+ /** How far enamel is filled above the floor (0..1 of depth, default 0.16). */
92
+ enamelLevel?: number;
93
+ /** Extra doming of enamel pools (0..1 of depth, default 0.12). Negative = concave. */
94
+ enamelDome?: number;
95
+ /** Distance over which enamel domes up from the walls (fraction of badge, default 0.05). */
96
+ domeWidth?: number;
97
+ /** Smoothing of the height field in pixels at 512px resolution (default 0.9). */
98
+ smoothing?: number;
99
+ /** Ambient-occlusion strength (0..1, default 0.7). */
100
+ ao?: number;
101
+ }
102
+ type EnvironmentPreset = 'studio' | 'soft' | 'sunset' | 'night' | 'neon';
103
+ interface EnvironmentLight {
104
+ /** Degrees around the badge. 0 = behind the viewer, positive = right. */
105
+ azimuth: number;
106
+ /** Degrees above the horizon. */
107
+ elevation: number;
108
+ /** Width and height of a rectangular softbox, or the diameter of a round one (degrees). */
109
+ size?: [number, number] | number;
110
+ shape?: 'rect' | 'circle';
111
+ color?: string;
112
+ intensity?: number;
113
+ /** Edge softness (0..1). */
114
+ softness?: number;
115
+ }
116
+ interface ProceduralEnvironment {
117
+ /** Sky colour straight up. */
118
+ top?: string;
119
+ /** Colour at the horizon. */
120
+ horizon?: string;
121
+ /** Floor colour straight down. */
122
+ bottom?: string;
123
+ /** Overall multiplier. */
124
+ intensity?: number;
125
+ lights?: EnvironmentLight[];
126
+ }
127
+ interface ImageEnvironment {
128
+ /** URL of an equirectangular image (.hdr Radiance RGBE, or any browser image format). */
129
+ url: string;
130
+ intensity?: number;
131
+ }
132
+ type EnvironmentInput = EnvironmentPreset | (string & {}) | ProceduralEnvironment | ImageEnvironment;
133
+ type ToneMapping = 'neutral' | 'aces' | 'agx' | 'none';
134
+ type Interaction = 'tilt' | 'drag' | 'none';
135
+ type IdleAnimation = 'none' | 'float' | 'shine';
136
+ interface BadgeOptions {
137
+ /** SVG markup, a URL to an SVG, or an SVG element. */
138
+ svg: string | SVGElement;
139
+ mode?: BadgeMode;
140
+ /** Material for raised wires and the outer rim. Default `gold`. */
141
+ metal?: MaterialInput;
142
+ /** Material for enamel fills. Default glossy `enamel` using SVG colours. */
143
+ enamel?: MaterialInput;
144
+ /** Material for the backplate. Default dark `onyx` enamel. */
145
+ base?: MaterialInput;
146
+ /** Secondary material, assigned with `data-material="accent"`. Default `silver`. */
147
+ accent?: MaterialInput;
148
+ /** Value of `currentColor` inside the SVG (default `#ffffff`). */
149
+ color?: string;
150
+ /** Wrap the artwork in a badge shape. */
151
+ frame?: FrameShape | FrameOptions | null;
152
+ /** Width of the metal rim around the silhouette (fraction of badge, default 0.03, 0 disables). */
153
+ rim?: number;
154
+ /**
155
+ * Add metal wires around every filled shape (fraction of badge). `auto` turns
156
+ * this on for multi-colour artwork without strokes.
157
+ */
158
+ outline?: number | 'auto';
159
+ /** Fill enclosed holes of the silhouette with the backplate (default true). */
160
+ fillHoles?: boolean;
161
+ relief?: ReliefOptions;
162
+ environment?: EnvironmentInput;
163
+ /** Rotate the environment around the badge (degrees). */
164
+ environmentRotation?: number;
165
+ exposure?: number;
166
+ toneMapping?: ToneMapping;
167
+ /** Pointer interaction. Default `tilt`. */
168
+ interaction?: Interaction;
169
+ /** Maximum tilt angle in degrees for `tilt` interaction (default 18). */
170
+ tiltMax?: number;
171
+ /**
172
+ * Resting orientation in degrees. A slight 3/4 view shows the badge's metal
173
+ * edge, like Apple's award renders. Default `{ pitch: -5, yaw: -8 }`.
174
+ */
175
+ pose?: {
176
+ pitch?: number;
177
+ yaw?: number;
178
+ roll?: number;
179
+ };
180
+ idle?: IdleAnimation;
181
+ /** Render the flat "not yet earned" outline instead of the rendered badge. */
182
+ locked?: boolean;
183
+ lockedColor?: string;
184
+ /** Opacity of the soft drop shadow (0 disables, default 0.35). */
185
+ shadow?: number;
186
+ /** Resolution of the baked relief maps in pixels, or `auto` (default). */
187
+ quality?: 'auto' | number;
188
+ /** Empty space around the badge for tilting, as a fraction of the canvas (default 0.06). */
189
+ padding?: number;
190
+ /** Called when the badge has been baked and drawn for the first time. */
191
+ onReady?: () => void;
192
+ onError?: (error: Error) => void;
193
+ }
194
+ interface BadgecraftHandle {
195
+ /** Spin the badge around its vertical axis. */
196
+ spin(turns?: number): void;
197
+ /** Sweep a highlight across the badge once. */
198
+ glint(): void;
199
+ /** Snapshot of the current frame. */
200
+ toDataURL(type?: string, quality?: number): string;
201
+ toBlob(type?: string, quality?: number): Promise<Blob | null>;
202
+ }
203
+
204
+ export type { BadgeOptions as B, EnvironmentInput as E, FrameOptions as F, IdleAnimation as I, Material as M, ProceduralEnvironment as P, ReliefOptions as R, ToneMapping as T, BadgeMode as a, BadgecraftHandle as b, BrushDirection as c, EnvironmentLight as d, EnvironmentPreset as e, FrameShape as f, ImageEnvironment as g, Interaction as h, MaterialInput as i, MaterialPreset as j, MaterialSlot as k, ProfileShape as l, ReliefRole as m };
package/dist/types-CHM3-ZZV.d.ts ADDED
@@ -0,0 +1,204 @@
1
+ /**
2
+ * Public option types for badgecraft.
3
+ *
4
+ * Sizes that are "fractions of the badge" are relative to the badge's square
5
+ * bounding box (1 = full width of the badge).
6
+ */
7
+ type MaterialPreset = 'gold' | 'rose-gold' | 'white-gold' | 'matte-gold' | 'brushed-gold' | 'silver' | 'brushed-silver' | 'platinum' | 'chrome' | 'copper' | 'bronze' | 'brass' | 'titanium' | 'gunmetal' | 'black-chrome' | 'enamel' | 'matte-enamel' | 'candy' | 'glitter' | 'pearl' | 'holographic' | 'onyx' | 'obsidian';
8
+ type BrushDirection = 'circular' | 'radial' | 'horizontal' | 'vertical';
9
+ /**
10
+ * A physically based material. Mirrors the glTF / MeshPhysicalMaterial model:
11
+ * a base layer (dielectric ↔ metal) with an optional clear-coat on top.
12
+ */
13
+ interface Material {
14
+ /** Base color (any CSS color). For metals this is the specular (F0) tint. */
15
+ color?: string;
16
+ /** Take the base color from the SVG instead of `color`. Defaults to true for the enamel slot. */
17
+ useSvgColor?: boolean;
18
+ /** 0 = dielectric (enamel, paint), 1 = metal. */
19
+ metalness?: number;
20
+ /** Microfacet roughness, 0 = mirror, 1 = fully diffuse. */
21
+ roughness?: number;
22
+ /** Strength of a glossy clear-coat layer on top of the base (0..1). */
23
+ clearcoat?: number;
24
+ /** Roughness of the clear-coat layer. */
25
+ clearcoatRoughness?: number;
26
+ /** Index of refraction for dielectric reflectance (default 1.5). */
27
+ ior?: number;
28
+ /** Thin-film interference strength (soap bubble / oil slick / anodized look). */
29
+ iridescence?: number;
30
+ /** Thin-film thickness in nanometres (100–1200). */
31
+ iridescenceThickness?: number;
32
+ /** Amount of sparkling metallic flakes (0..1). */
33
+ flakes?: number;
34
+ /** Flake density: number of flakes across the badge. */
35
+ flakeScale?: number;
36
+ /** Strength of brushed-metal streaks (0..1). */
37
+ brushed?: number;
38
+ /** Direction of the brushing pattern. */
39
+ brushDirection?: BrushDirection;
40
+ /** Self-illumination of the base color (0..1), useful for "glowing" enamel. */
41
+ emissive?: number;
42
+ }
43
+ /** Either a preset name or a material, optionally extending a preset. */
44
+ type MaterialInput = MaterialPreset | (Material & {
45
+ preset?: MaterialPreset;
46
+ });
47
+ /** The four material slots every badge is built from. */
48
+ type MaterialSlot = 'metal' | 'enamel' | 'base' | 'accent';
49
+ /**
50
+ * How a region of the SVG is sculpted:
51
+ * - `raised`: rounded metal wire (strokes) or bevelled plateau (fills)
52
+ * - `inset`: recessed, slightly domed enamel pool
53
+ * - `flat`: sits on the backplate
54
+ * - `none`: excluded from the badge
55
+ */
56
+ type ReliefRole = 'raised' | 'inset' | 'flat' | 'none';
57
+ /**
58
+ * - `cloisonne`: strokes become raised metal wires, fills become enamel.
59
+ * - `embossed`: every shape becomes raised metal on an enamel backplate.
60
+ * - `auto`: cloisonné if the SVG has strokes or several colours, embossed for
61
+ * single-colour artwork (logos, solid icons).
62
+ */
63
+ type BadgeMode = 'auto' | 'cloisonne' | 'embossed';
64
+ type FrameShape = 'circle' | 'hexagon' | 'octagon' | 'shield' | 'square' | 'diamond' | 'star';
65
+ interface FrameOptions {
66
+ /** Built-in shape, or `path` for a custom one. */
67
+ shape?: FrameShape;
68
+ /** Custom frame path in a 0..100 coordinate space. */
69
+ path?: string;
70
+ /** Inset of the artwork inside the frame (fraction of the frame, default 0.2). */
71
+ padding?: number;
72
+ /** Material slot used for the frame's backplate (default `base`). */
73
+ material?: MaterialSlot;
74
+ /** Width of an extra inner decorative wire (fraction of badge, default 0 = none). */
75
+ innerRing?: number;
76
+ }
77
+ type ProfileShape = 'round' | 'soft' | 'chamfer';
78
+ interface ReliefOptions {
79
+ /** Height of the front relief (fraction of badge, default 0.05). */
80
+ depth?: number;
81
+ /** Thickness of the back plate (fraction of badge, default 0.03). */
82
+ thickness?: number;
83
+ /** Height of the backplate relative to the wire tops (0..1, default 0.3). */
84
+ floor?: number;
85
+ /** Cross-section of raised wires and bevels. */
86
+ profile?: ProfileShape;
87
+ /** Bevel width of raised filled shapes (fraction of badge, default 0.02). */
88
+ bevel?: number;
89
+ /** Rounding of the outer edge (fraction of badge, default 0.014). */
90
+ edge?: number;
91
+ /** How far enamel is filled above the floor (0..1 of depth, default 0.16). */
92
+ enamelLevel?: number;
93
+ /** Extra doming of enamel pools (0..1 of depth, default 0.12). Negative = concave. */
94
+ enamelDome?: number;
95
+ /** Distance over which enamel domes up from the walls (fraction of badge, default 0.05). */
96
+ domeWidth?: number;
97
+ /** Smoothing of the height field in pixels at 512px resolution (default 0.9). */
98
+ smoothing?: number;
99
+ /** Ambient-occlusion strength (0..1, default 0.7). */
100
+ ao?: number;
101
+ }
102
+ type EnvironmentPreset = 'studio' | 'soft' | 'sunset' | 'night' | 'neon';
103
+ interface EnvironmentLight {
104
+ /** Degrees around the badge. 0 = behind the viewer, positive = right. */
105
+ azimuth: number;
106
+ /** Degrees above the horizon. */
107
+ elevation: number;
108
+ /** Width and height of a rectangular softbox, or the diameter of a round one (degrees). */
109
+ size?: [number, number] | number;
110
+ shape?: 'rect' | 'circle';
111
+ color?: string;
112
+ intensity?: number;
113
+ /** Edge softness (0..1). */
114
+ softness?: number;
115
+ }
116
+ interface ProceduralEnvironment {
117
+ /** Sky colour straight up. */
118
+ top?: string;
119
+ /** Colour at the horizon. */
120
+ horizon?: string;
121
+ /** Floor colour straight down. */
122
+ bottom?: string;
123
+ /** Overall multiplier. */
124
+ intensity?: number;
125
+ lights?: EnvironmentLight[];
126
+ }
127
+ interface ImageEnvironment {
128
+ /** URL of an equirectangular image (.hdr Radiance RGBE, or any browser image format). */
129
+ url: string;
130
+ intensity?: number;
131
+ }
132
+ type EnvironmentInput = EnvironmentPreset | (string & {}) | ProceduralEnvironment | ImageEnvironment;
133
+ type ToneMapping = 'neutral' | 'aces' | 'agx' | 'none';
134
+ type Interaction = 'tilt' | 'drag' | 'none';
135
+ type IdleAnimation = 'none' | 'float' | 'shine';
136
+ interface BadgeOptions {
137
+ /** SVG markup, a URL to an SVG, or an SVG element. */
138
+ svg: string | SVGElement;
139
+ mode?: BadgeMode;
140
+ /** Material for raised wires and the outer rim. Default `gold`. */
141
+ metal?: MaterialInput;
142
+ /** Material for enamel fills. Default glossy `enamel` using SVG colours. */
143
+ enamel?: MaterialInput;
144
+ /** Material for the backplate. Default dark `onyx` enamel. */
145
+ base?: MaterialInput;
146
+ /** Secondary material, assigned with `data-material="accent"`. Default `silver`. */
147
+ accent?: MaterialInput;
148
+ /** Value of `currentColor` inside the SVG (default `#ffffff`). */
149
+ color?: string;
150
+ /** Wrap the artwork in a badge shape. */
151
+ frame?: FrameShape | FrameOptions | null;
152
+ /** Width of the metal rim around the silhouette (fraction of badge, default 0.03, 0 disables). */
153
+ rim?: number;
154
+ /**
155
+ * Add metal wires around every filled shape (fraction of badge). `auto` turns
156
+ * this on for multi-colour artwork without strokes.
157
+ */
158
+ outline?: number | 'auto';
159
+ /** Fill enclosed holes of the silhouette with the backplate (default true). */
160
+ fillHoles?: boolean;
161
+ relief?: ReliefOptions;
162
+ environment?: EnvironmentInput;
163
+ /** Rotate the environment around the badge (degrees). */
164
+ environmentRotation?: number;
165
+ exposure?: number;
166
+ toneMapping?: ToneMapping;
167
+ /** Pointer interaction. Default `tilt`. */
168
+ interaction?: Interaction;
169
+ /** Maximum tilt angle in degrees for `tilt` interaction (default 18). */
170
+ tiltMax?: number;
171
+ /**
172
+ * Resting orientation in degrees. A slight 3/4 view shows the badge's metal
173
+ * edge, like Apple's award renders. Default `{ pitch: -5, yaw: -8 }`.
174
+ */
175
+ pose?: {
176
+ pitch?: number;
177
+ yaw?: number;
178
+ roll?: number;
179
+ };
180
+ idle?: IdleAnimation;
181
+ /** Render the flat "not yet earned" outline instead of the rendered badge. */
182
+ locked?: boolean;
183
+ lockedColor?: string;
184
+ /** Opacity of the soft drop shadow (0 disables, default 0.35). */
185
+ shadow?: number;
186
+ /** Resolution of the baked relief maps in pixels, or `auto` (default). */
187
+ quality?: 'auto' | number;
188
+ /** Empty space around the badge for tilting, as a fraction of the canvas (default 0.06). */
189
+ padding?: number;
190
+ /** Called when the badge has been baked and drawn for the first time. */
191
+ onReady?: () => void;
192
+ onError?: (error: Error) => void;
193
+ }
194
+ interface BadgecraftHandle {
195
+ /** Spin the badge around its vertical axis. */
196
+ spin(turns?: number): void;
197
+ /** Sweep a highlight across the badge once. */
198
+ glint(): void;
199
+ /** Snapshot of the current frame. */
200
+ toDataURL(type?: string, quality?: number): string;
201
+ toBlob(type?: string, quality?: number): Promise<Blob | null>;
202
+ }
203
+
204
+ export type { BadgeOptions as B, EnvironmentInput as E, FrameOptions as F, IdleAnimation as I, Material as M, ProceduralEnvironment as P, ReliefOptions as R, ToneMapping as T, BadgeMode as a, BadgecraftHandle as b, BrushDirection as c, EnvironmentLight as d, EnvironmentPreset as e, FrameShape as f, ImageEnvironment as g, Interaction as h, MaterialInput as i, MaterialPreset as j, MaterialSlot as k, ProfileShape as l, ReliefRole as m };
package/dist/vue.cjs ADDED
@@ -0,0 +1,93 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var chunkEBDSIGZR_cjs = require('./chunk-EBDSIGZR.cjs');
6
+ var chunkBRT5S5PF_cjs = require('./chunk-BRT5S5PF.cjs');
7
+ var vue = require('vue');
8
+
9
+ var material = [String, Object];
10
+ var bool = { type: Boolean, default: void 0 };
11
+ var Badgecraft2 = vue.defineComponent({
12
+ name: "Badgecraft",
13
+ props: {
14
+ svg: { type: [String, Object], required: true },
15
+ mode: String,
16
+ metal: material,
17
+ enamel: material,
18
+ base: material,
19
+ accent: material,
20
+ color: String,
21
+ frame: [String, Object],
22
+ rim: Number,
23
+ outline: [Number, String],
24
+ fillHoles: bool,
25
+ relief: Object,
26
+ environment: [String, Object],
27
+ environmentRotation: Number,
28
+ exposure: Number,
29
+ toneMapping: String,
30
+ interaction: String,
31
+ tiltMax: Number,
32
+ pose: Object,
33
+ idle: String,
34
+ locked: bool,
35
+ lockedColor: String,
36
+ shadow: Number,
37
+ quality: [Number, String],
38
+ padding: Number,
39
+ /** Width and height (number = px). Default 160. */
40
+ size: { type: [Number, String], default: 160 },
41
+ /** Accessible label. */
42
+ alt: String
43
+ },
44
+ emits: {
45
+ ready: () => true,
46
+ error: (error) => error instanceof Error
47
+ },
48
+ setup(props, { emit, expose }) {
49
+ const host = vue.ref();
50
+ let badge = null;
51
+ const options = () => ({
52
+ ...chunkEBDSIGZR_cjs.pickOptions(props),
53
+ onReady: () => emit("ready"),
54
+ onError: (error) => emit("error", error)
55
+ });
56
+ vue.onMounted(() => {
57
+ badge = new chunkBRT5S5PF_cjs.Badgecraft(host.value, options());
58
+ });
59
+ vue.watch(options, (next) => badge?.setOptions(next), { deep: true });
60
+ vue.onBeforeUnmount(() => {
61
+ badge?.destroy();
62
+ badge = null;
63
+ });
64
+ expose({
65
+ spin: (turns) => badge?.spin(turns),
66
+ glint: () => badge?.glint(),
67
+ toDataURL: (type, quality) => badge?.toDataURL(type, quality) ?? "",
68
+ toBlob: (type, quality) => badge?.toBlob(type, quality) ?? Promise.resolve(null),
69
+ instance: () => badge
70
+ });
71
+ return () => {
72
+ const dim = chunkEBDSIGZR_cjs.cssSize(props.size);
73
+ return vue.h("div", {
74
+ ref: host,
75
+ role: "img",
76
+ "aria-label": props.alt,
77
+ style: { display: "inline-block", position: "relative", width: dim, height: dim }
78
+ });
79
+ };
80
+ }
81
+ });
82
+ var BadgecraftPlugin = {
83
+ install(app) {
84
+ app.component("Badgecraft", Badgecraft2);
85
+ }
86
+ };
87
+ var vue_default = Badgecraft2;
88
+
89
+ exports.Badgecraft = Badgecraft2;
90
+ exports.BadgecraftPlugin = BadgecraftPlugin;
91
+ exports.default = vue_default;
92
+ //# sourceMappingURL=vue.cjs.map
93
+ //# sourceMappingURL=vue.cjs.map
package/dist/vue.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/vue/index.ts"],"names":["Badgecraft","defineComponent","ref","pickOptions","onMounted","watch","onBeforeUnmount","cssSize","h"],"mappings":"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","file":"vue.cjs","sourcesContent":["import {\n defineComponent,\n h,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n type App,\n type PropType,\n} from 'vue'\nimport { Badgecraft as Badge } from '../badge'\nimport { cssSize, pickOptions } from '../option-keys'\nimport type {\n BadgeMode,\n BadgeOptions,\n EnvironmentInput,\n FrameOptions,\n FrameShape,\n IdleAnimation,\n Interaction,\n MaterialInput,\n ReliefOptions,\n ToneMapping,\n} from '../types'\n\nexport type * from '../types'\n\nconst material = [String, Object] as PropType<MaterialInput>\n// Booleans default to undefined so the library's own defaults apply.\nconst bool = { type: Boolean, default: undefined }\n\n/**\n * Vue 3 binding for badgecraft.\n *\n * ```vue\n * <Badgecraft svg=\"/award.svg\" metal=\"gold\" :size=\"200\" @ready=\"...\" />\n * ```\n */\nexport const Badgecraft = defineComponent({\n name: 'Badgecraft',\n props: {\n svg: { type: [String, Object] as PropType<string | SVGElement>, required: true },\n mode: String as PropType<BadgeMode>,\n metal: material,\n enamel: material,\n base: material,\n accent: material,\n color: String,\n frame: [String, Object] as PropType<FrameShape | FrameOptions | null>,\n rim: Number,\n outline: [Number, String] as PropType<number | 'auto'>,\n fillHoles: bool,\n relief: Object as PropType<ReliefOptions>,\n environment: [String, Object] as PropType<EnvironmentInput>,\n environmentRotation: Number,\n exposure: Number,\n toneMapping: String as PropType<ToneMapping>,\n interaction: String as PropType<Interaction>,\n tiltMax: Number,\n pose: Object as PropType<BadgeOptions['pose']>,\n idle: String as PropType<IdleAnimation>,\n locked: bool,\n lockedColor: String,\n shadow: Number,\n quality: [Number, String] as PropType<number | 'auto'>,\n padding: Number,\n /** Width and height (number = px). Default 160. */\n size: { type: [Number, String], default: 160 },\n /** Accessible label. */\n alt: String,\n },\n emits: {\n ready: () => true,\n error: (error: Error) => error instanceof Error,\n },\n setup(props, { emit, expose }) {\n const host = ref<HTMLDivElement>()\n let badge: Badge | null = null\n\n const options = (): BadgeOptions => ({\n ...pickOptions(props as unknown as Record<string, unknown>),\n onReady: () => emit('ready'),\n onError: (error: Error) => emit('error', error),\n })\n\n onMounted(() => {\n badge = new Badge(host.value!, options())\n })\n watch(options, (next) => badge?.setOptions(next), { deep: true })\n onBeforeUnmount(() => {\n badge?.destroy()\n badge = null\n })\n\n expose({\n spin: (turns?: number) => badge?.spin(turns),\n glint: () => badge?.glint(),\n toDataURL: (type?: string, quality?: number) => badge?.toDataURL(type, quality) ?? '',\n toBlob: (type?: string, quality?: number) => badge?.toBlob(type, quality) ?? Promise.resolve(null),\n instance: () => badge,\n })\n\n return () => {\n const dim = cssSize(props.size)\n return h('div', {\n ref: host,\n role: 'img',\n 'aria-label': props.alt,\n style: { display: 'inline-block', position: 'relative', width: dim, height: dim },\n })\n }\n },\n})\n\n/** `app.use(BadgecraftPlugin)` registers `<Badgecraft>` globally. */\nexport const BadgecraftPlugin = {\n install(app: App) {\n app.component('Badgecraft', Badgecraft)\n },\n}\n\nexport default Badgecraft\n"]}