@devframes/hub-ui-onboard 1.2.2 → 1.2.3

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/dist/client/embedded.js +96 -56
  2. package/dist/index.d.mts +2 -1
  3. package/dist/index.mjs +6 -8
  4. package/package.json +3 -2
package/dist/client/embedded.js CHANGED
@@ -9,87 +9,127 @@ async function o() {
9
9
  new URL(`embedded.js?onboard=${Date.now()}`, t).href
10
10
  );
11
11
  }
12
- function s() {
12
+ var s = matchMedia("(prefers-color-scheme: dark)");
13
+ function c() {
13
14
  let e = localStorage.getItem("devframes-color-scheme");
14
- return e === "dark" || e === "light" ? e === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
15
+ if (e === "dark" || e === "light") return e === "dark";
16
+ let { classList: t } = document.documentElement;
17
+ return t.contains("dark") ? !0 : !t.contains("light") && s.matches;
15
18
  }
16
- function c(e) {
19
+ function l(e) {
17
20
  let t = e.logo;
18
- return !t || typeof t == "string" ? t : s() ? t.dark ?? t.light : t.light;
21
+ return !t || typeof t == "string" ? t : c() ? t.dark ?? t.light : t.light;
19
22
  }
20
- function l(e, t) {
23
+ function u(e, t) {
24
+ let n = l(t);
25
+ if (n) {
26
+ let t = document.createElement("img");
27
+ t.src = n, t.alt = "", t.draggable = !1, t.className = "w-full h-full object-contain", e.replaceChildren(t);
28
+ } else e.innerHTML = "<svg viewBox=\"0 0 500 500\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Devframe logo\"><path d=\"M238.464 40H66V236.007H104.577C220.688 236.007 232.79 158.437 232.79 121.733C232.79 108.867 243.38 108.867 243.38 121.733C251.318 236.701 356.35 245.457 365.527 246.223L365.542 246.224C374.619 246.981 382.561 251.521 365.542 254.548C253.592 264.765 243.758 364.282 243.38 375.634C243.002 386.986 235.438 399.851 232.79 375.634C222.957 274.603 144.289 257.954 104.577 257.954H66V460.772H238.464C358.356 460.772 452.152 371.472 452.152 251.521C452.152 131.571 356.465 40 238.464 40Z\" fill=\"url(#devframes-onboard-logo-gradient)\" stroke=\"#86997F\" stroke-opacity=\"0.5\" stroke-width=\"1.33156\"/><defs><radialGradient id=\"devframes-onboard-logo-gradient\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(399.011 555.102 -568.423 408.982 -11.6221 -34.9218)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#ADC77F\"/><stop offset=\"0.71903\" stop-color=\"#517158\"/><stop offset=\"1\" stop-color=\"#486954\"/></radialGradient></defs></svg>";
29
+ }
30
+ function d(e, t) {
21
31
  let n = document.createElement("span");
22
- n.className = `${t} flex items-center justify-center`;
23
- let r = c(e);
24
- if (r) {
25
- let e = document.createElement("img");
26
- e.src = r, e.alt = "", e.draggable = !1, e.className = "w-full h-full object-contain", n.append(e);
27
- } else n.innerHTML = "<svg viewBox=\"0 0 500 500\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Devframe logo\"><path d=\"M238.464 40H66V236.007H104.577C220.688 236.007 232.79 158.437 232.79 121.733C232.79 108.867 243.38 108.867 243.38 121.733C251.318 236.701 356.35 245.457 365.527 246.223L365.542 246.224C374.619 246.981 382.561 251.521 365.542 254.548C253.592 264.765 243.758 364.282 243.38 375.634C243.002 386.986 235.438 399.851 232.79 375.634C222.957 274.603 144.289 257.954 104.577 257.954H66V460.772H238.464C358.356 460.772 452.152 371.472 452.152 251.521C452.152 131.571 356.465 40 238.464 40Z\" fill=\"url(#devframes-onboard-logo-gradient)\" stroke=\"#86997F\" stroke-opacity=\"0.5\" stroke-width=\"1.33156\"/><defs><radialGradient id=\"devframes-onboard-logo-gradient\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(399.011 555.102 -568.423 408.982 -11.6221 -34.9218)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#ADC77F\"/><stop offset=\"0.71903\" stop-color=\"#517158\"/><stop offset=\"1\" stop-color=\"#486954\"/></radialGradient></defs></svg>";
28
- return n;
32
+ return n.className = `${t} flex items-center justify-center`, u(n, e), n;
29
33
  }
30
- function u(e, t, n) {
34
+ function f(e, t, n) {
31
35
  let r = document.createElement("button");
32
36
  return r.type = "button", r.className = e, r.textContent = t, r.addEventListener("click", n), r;
33
37
  }
34
- function d(e) {
35
- let t = document.createElement("devframes-onboard"), c = t.attachShadow({ mode: "open" }), d = document.createElement("style");
36
- d.textContent = "*,:before,:after{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--un-onboard-default-border-color,#e5e7eb)}:before,:after{--un-onboard-content:\"\"}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.devframes-onboard-root:hover .devframes-onboard-glow{opacity:.6}.devframes-onboard-pill{z-index:2147483644;--un-onboard-border-opacity:.13;border-width:1px;border-color:rgb(153 153 153/var(--un-onboard-border-opacity));--un-onboard-backdrop-blur:blur(7px);width:1.5rem;height:1.5rem;backdrop-filter:var(--un-onboard-backdrop-blur) var(--un-onboard-backdrop-brightness) var(--un-onboard-backdrop-contrast) var(--un-onboard-backdrop-grayscale) var(--un-onboard-backdrop-hue-rotate) var(--un-onboard-backdrop-invert) var(--un-onboard-backdrop-opacity) var(--un-onboard-backdrop-saturate) var(--un-onboard-backdrop-sepia);--un-onboard-shadow:var(--un-onboard-shadow-inset) 0 1px 3px 0 var(--un-onboard-shadow-color,#0000001a),var(--un-onboard-shadow-inset) 0 1px 2px -1px var(--un-onboard-shadow-color,#0000001a);box-shadow:var(--un-onboard-ring-offset-shadow), var(--un-onboard-ring-shadow), var(--un-onboard-shadow);cursor:pointer;-webkit-user-select:none;user-select:none;outline-offset:2px;opacity:.25;--un-onboard-ring-opacity:1;--un-onboard-ring-color:rgb(117 166 126/var(--un-onboard-ring-opacity));background-color:#ffffffa6;border-radius:9999px;outline:2px solid #0000;justify-content:center;align-items:center;padding:0;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:1rem;left:1rem}.devframes-onboard-pill:hover{--un-onboard-scale-x:1.05;--un-onboard-scale-y:1.05;transform:translateX(var(--un-onboard-translate-x)) translateY(var(--un-onboard-translate-y)) translateZ(var(--un-onboard-translate-z)) rotate(var(--un-onboard-rotate)) rotateX(var(--un-onboard-rotate-x)) rotateY(var(--un-onboard-rotate-y)) rotateZ(var(--un-onboard-rotate-z)) skewX(var(--un-onboard-skew-x)) skewY(var(--un-onboard-skew-y)) scaleX(var(--un-onboard-scale-x)) scaleY(var(--un-onboard-scale-y)) scaleZ(var(--un-onboard-scale-z));opacity:1}.devframes-onboard-pill:focus-visible{opacity:1;--un-onboard-ring-width:2px;--un-onboard-ring-offset-shadow:var(--un-onboard-ring-inset) 0 0 0 var(--un-onboard-ring-offset-width) var(--un-onboard-ring-offset-color);--un-onboard-ring-shadow:var(--un-onboard-ring-inset) 0 0 0 calc(var(--un-onboard-ring-width) + var(--un-onboard-ring-offset-width)) var(--un-onboard-ring-color);box-shadow:var(--un-onboard-ring-offset-shadow), var(--un-onboard-ring-shadow), var(--un-onboard-shadow)}.dark .devframes-onboard-pill{background-color:#111c}.devframes-onboard-pill[aria-expanded=true]{opacity:1}.devframes-onboard-glow{pointer-events:none;opacity:0;filter:blur(60px);background-image:linear-gradient(45deg, var(--colors-primary-300,#adc77f), var(--colors-primary-500,#517158), var(--colors-primary-DEFAULT,#486954));border-radius:9999px;width:10rem;height:10rem;transition-property:opacity;transition-duration:1s;transition-timing-function:cubic-bezier(0,0,.2,1);position:absolute;bottom:-6.5rem;left:-1rem;transform:translate(-50%,-50%)}.devframes-onboard-panel{z-index:2147483644;--un-onboard-border-opacity:.13;border-width:1px;border-color:rgb(153 153 153/var(--un-onboard-border-opacity));--un-onboard-bg-opacity:1;background-color:rgb(255 255 255/var(--un-onboard-bg-opacity));--un-onboard-text-opacity:1;width:20rem;max-width:calc(100vw - 2rem);color:rgb(38 38 38/var(--un-onboard-text-opacity));--un-onboard-shadow:var(--un-onboard-shadow-inset) 0 10px 15px -3px var(--un-onboard-shadow-color,#0000001a),var(--un-onboard-shadow-inset) 0 4px 6px -4px var(--un-onboard-shadow-color,#0000001a);box-shadow:var(--un-onboard-ring-offset-shadow), var(--un-onboard-ring-shadow), var(--un-onboard-shadow);transform-origin:0 100%;border-radius:.5rem;flex-direction:column;gap:.75rem;padding:1rem;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:.875rem;line-height:1.5;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:3rem;left:1rem}.dark .devframes-onboard-panel{--un-onboard-bg-opacity:1;background-color:rgb(17 17 17/var(--un-onboard-bg-opacity));--un-onboard-text-opacity:1;color:rgb(229 229 229/var(--un-onboard-text-opacity))}.devframes-onboard-panel[hidden]{pointer-events:none;--un-onboard-scale-x:.95;--un-onboard-scale-y:.95;transform:translateX(var(--un-onboard-translate-x)) translateY(var(--un-onboard-translate-y)) translateZ(var(--un-onboard-translate-z)) rotate(var(--un-onboard-rotate)) rotateX(var(--un-onboard-rotate-x)) rotateY(var(--un-onboard-rotate-y)) rotateZ(var(--un-onboard-rotate-z)) skewX(var(--un-onboard-skew-x)) skewY(var(--un-onboard-skew-y)) scaleX(var(--un-onboard-scale-x)) scaleY(var(--un-onboard-scale-y)) scaleZ(var(--un-onboard-scale-z));opacity:0;display:block}.devframes-onboard-command{-webkit-user-select:all;user-select:all;word-break:break-all;--un-onboard-bg-opacity:1;background-color:rgb(246 246 246/var(--un-onboard-bg-opacity));--un-onboard-text-opacity:1;color:rgb(82 82 82/var(--un-onboard-text-opacity));border-radius:.25rem;padding:.375rem .5rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.75rem;line-height:1rem;display:block}.dark .devframes-onboard-command{--un-onboard-bg-opacity:1;background-color:rgb(16 16 16/var(--un-onboard-bg-opacity));--un-onboard-text-opacity:1;color:rgb(163 163 163/var(--un-onboard-text-opacity))}@media print{.devframes-onboard-pill,.devframes-onboard-panel{display:none}}@media (prefers-reduced-motion:reduce){.devframes-onboard-pill,.devframes-onboard-panel,.devframes-onboard-glow{transition:none}}*,:before,:after,::backdrop{--un-onboard-rotate:0;--un-onboard-rotate-x:0;--un-onboard-rotate-y:0;--un-onboard-rotate-z:0;--un-onboard-scale-x:1;--un-onboard-scale-y:1;--un-onboard-scale-z:1;--un-onboard-skew-x:0;--un-onboard-skew-y:0;--un-onboard-translate-x:0;--un-onboard-translate-y:0;--un-onboard-translate-z:0;--un-onboard-pan-x: ;--un-onboard-pan-y: ;--un-onboard-pinch-zoom: ;--un-onboard-scroll-snap-strictness:proximity;--un-onboard-ordinal: ;--un-onboard-slashed-zero: ;--un-onboard-numeric-figure: ;--un-onboard-numeric-spacing: ;--un-onboard-numeric-fraction: ;--un-onboard-border-spacing-x:0;--un-onboard-border-spacing-y:0;--un-onboard-ring-offset-shadow:0 0 #0000;--un-onboard-ring-shadow:0 0 #0000;--un-onboard-shadow-inset: ;--un-onboard-shadow:0 0 #0000;--un-onboard-ring-inset: ;--un-onboard-ring-offset-width:0px;--un-onboard-ring-offset-color:#fff;--un-onboard-ring-width:0px;--un-onboard-ring-color:#93c5fd80;--un-onboard-blur: ;--un-onboard-brightness: ;--un-onboard-contrast: ;--un-onboard-drop-shadow: ;--un-onboard-grayscale: ;--un-onboard-hue-rotate: ;--un-onboard-invert: ;--un-onboard-saturate: ;--un-onboard-sepia: ;--un-onboard-backdrop-blur: ;--un-onboard-backdrop-brightness: ;--un-onboard-backdrop-contrast: ;--un-onboard-backdrop-grayscale: ;--un-onboard-backdrop-hue-rotate: ;--un-onboard-backdrop-invert: ;--un-onboard-backdrop-opacity: ;--un-onboard-backdrop-saturate: ;--un-onboard-backdrop-sepia: }.btn-action:disabled{pointer-events:none;opacity:.3!important}.btn-primary:disabled{pointer-events:none;opacity:.5}.btn-action{--un-onboard-border-opacity:.13;border-width:1px;border-color:rgb(153 153 153/var(--un-onboard-border-opacity));opacity:.75;outline-offset:2px;border-radius:.25rem;outline:2px solid #0000;align-items:center;gap:.5rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex}.btn-primary{--un-onboard-bg-opacity:1;background-color:rgb(from var(--colors-primary-500,#578861) r g b / var(--un-onboard-bg-opacity));--un-onboard-text-opacity:1;color:rgb(255 255 255/var(--un-onboard-text-opacity));outline-offset:2px;border-width:1px;border-color:#0000;border-radius:.25rem;outline:2px solid #0000;align-items:center;gap:.5rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex}.btn-action:hover{--un-onboard-bg-opacity:.08;background-color:rgb(153 153 153/var(--un-onboard-bg-opacity));opacity:1}.btn-primary:hover{--un-onboard-bg-opacity:1;background-color:rgb(from var(--colors-primary-600,#40704b) r g b / var(--un-onboard-bg-opacity))}.btn-action:focus-visible,.btn-primary:focus-visible{--un-onboard-ring-width:2px;--un-onboard-ring-offset-shadow:var(--un-onboard-ring-inset) 0 0 0 var(--un-onboard-ring-offset-width) var(--un-onboard-ring-offset-color);--un-onboard-ring-shadow:var(--un-onboard-ring-inset) 0 0 0 calc(var(--un-onboard-ring-width) + var(--un-onboard-ring-offset-width)) var(--un-onboard-ring-color);box-shadow:var(--un-onboard-ring-offset-shadow), var(--un-onboard-ring-shadow), var(--un-onboard-shadow);--un-onboard-ring-color:rgb(from var(--colors-primary-500,#578861) r g b / .4)}@property --scroll-fade-t{syntax:\"<length-percentage>\";inherits:false;initial-value:0}@property --scroll-fade-b{syntax:\"<length-percentage>\";inherits:false;initial-value:0}@property --scroll-fade-s{syntax:\"<length-percentage>\";inherits:false;initial-value:0}@property --scroll-fade-e{syntax:\"<length-percentage>\";inherits:false;initial-value:0}@property --scroll-fade-mask{syntax:\"*\";inherits:false}@property --shimmer-angle{syntax:\"<angle>\";inherits:true;initial-value:20deg}@property --shimmer-image{syntax:\"*\";inherits:false}@property --shimmer-text-fill{syntax:\"*\";inherits:false}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.m-0{margin:0}.contents{display:contents}.h-3{height:.75rem}.h-5{height:1.25rem}.h-full{height:100%}.w-3{width:.75rem}.w-5{width:1.25rem}.w-full{width:100%}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.object-contain{object-fit:contain}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.dark .dark\\:text-red-400{--un-onboard-text-opacity:1;color:rgb(248 113 113/var(--un-onboard-text-opacity))}.text-red-600{--un-onboard-text-opacity:1;color:rgb(220 38 38/var(--un-onboard-text-opacity))}.font-medium{font-weight:500}*,:before,:after,::backdrop{--un-onboard-rotate:0;--un-onboard-rotate-x:0;--un-onboard-rotate-y:0;--un-onboard-rotate-z:0;--un-onboard-scale-x:1;--un-onboard-scale-y:1;--un-onboard-scale-z:1;--un-onboard-skew-x:0;--un-onboard-skew-y:0;--un-onboard-translate-x:0;--un-onboard-translate-y:0;--un-onboard-translate-z:0;--un-onboard-pan-x: ;--un-onboard-pan-y: ;--un-onboard-pinch-zoom: ;--un-onboard-scroll-snap-strictness:proximity;--un-onboard-ordinal: ;--un-onboard-slashed-zero: ;--un-onboard-numeric-figure: ;--un-onboard-numeric-spacing: ;--un-onboard-numeric-fraction: ;--un-onboard-border-spacing-x:0;--un-onboard-border-spacing-y:0;--un-onboard-ring-offset-shadow:0 0 #0000;--un-onboard-ring-shadow:0 0 #0000;--un-onboard-shadow-inset: ;--un-onboard-shadow:0 0 #0000;--un-onboard-ring-inset: ;--un-onboard-ring-offset-width:0px;--un-onboard-ring-offset-color:#fff;--un-onboard-ring-width:0px;--un-onboard-ring-color:#93c5fd80;--un-onboard-blur: ;--un-onboard-brightness: ;--un-onboard-contrast: ;--un-onboard-drop-shadow: ;--un-onboard-grayscale: ;--un-onboard-hue-rotate: ;--un-onboard-invert: ;--un-onboard-saturate: ;--un-onboard-sepia: ;--un-onboard-backdrop-blur: ;--un-onboard-backdrop-brightness: ;--un-onboard-backdrop-contrast: ;--un-onboard-backdrop-grayscale: ;--un-onboard-backdrop-hue-rotate: ;--un-onboard-backdrop-invert: ;--un-onboard-backdrop-opacity: ;--un-onboard-backdrop-saturate: ;--un-onboard-backdrop-sepia: }*,:before,:after{border-color:#8882}.border-base{--un-onboard-border-opacity:.13;border-color:rgb(153 153 153/var(--un-onboard-border-opacity))}.bg-active{--un-onboard-bg-opacity:.13;background-color:rgb(153 153 153/var(--un-onboard-bg-opacity))}.bg-base{--un-onboard-bg-opacity:1;background-color:rgb(255 255 255/var(--un-onboard-bg-opacity))}.dark .bg-base{--un-onboard-bg-opacity:1;background-color:rgb(17 17 17/var(--un-onboard-bg-opacity))}.bg-hover{--un-onboard-bg-opacity:.08;background-color:rgb(153 153 153/var(--un-onboard-bg-opacity))}.bg-secondary{--un-onboard-bg-opacity:1;background-color:rgb(246 246 246/var(--un-onboard-bg-opacity))}.dark .bg-secondary{--un-onboard-bg-opacity:1;background-color:rgb(16 16 16/var(--un-onboard-bg-opacity))}.color-active{--un-onboard-text-opacity:1;color:rgb(from var(--colors-primary-600,#40704b) r g b / var(--un-onboard-text-opacity))}.dark .color-active{--un-onboard-text-opacity:1;color:rgb(from var(--colors-primary-300,#93c69d) r g b / var(--un-onboard-text-opacity))}.color-base{--un-onboard-text-opacity:1;color:rgb(38 38 38/var(--un-onboard-text-opacity))}.dark .color-base{--un-onboard-text-opacity:1;color:rgb(229 229 229/var(--un-onboard-text-opacity))}.color-faint,.dark .color-faint{--un-onboard-text-opacity:1;color:rgb(115 115 115/var(--un-onboard-text-opacity))}.color-muted{--un-onboard-text-opacity:1;color:rgb(82 82 82/var(--un-onboard-text-opacity))}.dark .color-muted{--un-onboard-text-opacity:1;color:rgb(163 163 163/var(--un-onboard-text-opacity))}:root,:host,.devframes-accent-scope{--devframe-primary-DEFAULT:var(--devframe-primary);--devframe-primary-600:color-mix(in oklab, var(--devframe-primary), white 9%);--devframe-primary-500:color-mix(in oklab, var(--devframe-primary), white 18%);--devframe-primary-400:color-mix(in oklab, var(--devframe-primary), white 34%);--devframe-primary-300:color-mix(in oklab, var(--devframe-primary), white 54%);--colors-primary-DEFAULT:var(--devframe-primary-DEFAULT,#3a6a45);--colors-primary-600:var(--devframe-primary-600,#40704b);--colors-primary-500:var(--devframe-primary-500,#578861);--colors-primary-400:var(--devframe-primary-400,#75a67e);--colors-primary-300:var(--devframe-primary-300,#93c69d)}";
37
- let f = document.createElement("div");
38
- f.className = [s() ? "dark" : "light", "devframes-onboard-root"].join(" "), f.style.display = "contents", c.append(d, f), e.branding.primaryColor && t.style.setProperty("--devframe-primary", e.branding.primaryColor);
39
- let { messages: p, branding: m } = e, h = document.createElement("button");
40
- h.type = "button", h.className = "devframes-onboard-pill", h.title = p.title, h.setAttribute("aria-haspopup", "dialog"), h.setAttribute("aria-expanded", "false");
41
- let g = document.createElement("span");
42
- g.className = "devframes-onboard-glow", h.append(l(m, "w-3 h-3"));
43
- let _ = document.createElement("div");
44
- _.className = "devframes-onboard-panel", _.setAttribute("role", "dialog"), _.hidden = !0;
45
- let v = document.createElement("div");
46
- v.className = "flex items-center gap-2 font-medium";
38
+ function p(e) {
39
+ let t = document.createElement("devframes-onboard"), l = t.attachShadow({ mode: "open" }), p = document.createElement("style");
40
+ p.textContent = "*,:before,:after{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--un-onboard-default-border-color,#e5e7eb)}:before,:after{--un-onboard-content:\"\"}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.devframes-onboard-root:hover .devframes-onboard-glow{opacity:.6}.devframes-onboard-pill{z-index:2147483644;--un-onboard-border-opacity:.13;border-width:1px;border-color:rgb(153 153 153/var(--un-onboard-border-opacity));--un-onboard-backdrop-blur:blur(7px);width:1.5rem;height:1.5rem;backdrop-filter:var(--un-onboard-backdrop-blur) var(--un-onboard-backdrop-brightness) var(--un-onboard-backdrop-contrast) var(--un-onboard-backdrop-grayscale) var(--un-onboard-backdrop-hue-rotate) var(--un-onboard-backdrop-invert) var(--un-onboard-backdrop-opacity) var(--un-onboard-backdrop-saturate) var(--un-onboard-backdrop-sepia);--un-onboard-shadow:var(--un-onboard-shadow-inset) 0 1px 3px 0 var(--un-onboard-shadow-color,#0000001a),var(--un-onboard-shadow-inset) 0 1px 2px -1px var(--un-onboard-shadow-color,#0000001a);box-shadow:var(--un-onboard-ring-offset-shadow), var(--un-onboard-ring-shadow), var(--un-onboard-shadow);cursor:pointer;-webkit-user-select:none;user-select:none;outline-offset:2px;opacity:.25;--un-onboard-ring-opacity:1;--un-onboard-ring-color:rgb(117 166 126/var(--un-onboard-ring-opacity));background-color:#ffffffa6;border-radius:9999px;outline:2px solid #0000;justify-content:center;align-items:center;padding:0;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:1rem;left:1rem}.devframes-onboard-pill:hover{--un-onboard-scale-x:1.05;--un-onboard-scale-y:1.05;transform:translateX(var(--un-onboard-translate-x)) translateY(var(--un-onboard-translate-y)) translateZ(var(--un-onboard-translate-z)) rotate(var(--un-onboard-rotate)) rotateX(var(--un-onboard-rotate-x)) rotateY(var(--un-onboard-rotate-y)) rotateZ(var(--un-onboard-rotate-z)) skewX(var(--un-onboard-skew-x)) skewY(var(--un-onboard-skew-y)) scaleX(var(--un-onboard-scale-x)) scaleY(var(--un-onboard-scale-y)) scaleZ(var(--un-onboard-scale-z));opacity:1}.devframes-onboard-pill:focus-visible{opacity:1;--un-onboard-ring-width:2px;--un-onboard-ring-offset-shadow:var(--un-onboard-ring-inset) 0 0 0 var(--un-onboard-ring-offset-width) var(--un-onboard-ring-offset-color);--un-onboard-ring-shadow:var(--un-onboard-ring-inset) 0 0 0 calc(var(--un-onboard-ring-width) + var(--un-onboard-ring-offset-width)) var(--un-onboard-ring-color);box-shadow:var(--un-onboard-ring-offset-shadow), var(--un-onboard-ring-shadow), var(--un-onboard-shadow)}.dark .devframes-onboard-pill{background-color:#111c}.devframes-onboard-pill[aria-expanded=true]{opacity:1}.devframes-onboard-glow{pointer-events:none;opacity:0;filter:blur(60px);background-image:linear-gradient(45deg, var(--colors-primary-300,#adc77f), var(--colors-primary-500,#517158), var(--colors-primary-DEFAULT,#486954));border-radius:9999px;width:10rem;height:10rem;transition-property:opacity;transition-duration:1s;transition-timing-function:cubic-bezier(0,0,.2,1);position:absolute;bottom:-6.5rem;left:-1rem;transform:translate(-50%,-50%)}.devframes-onboard-panel{z-index:2147483644;--un-onboard-border-opacity:.13;border-width:1px;border-color:rgb(153 153 153/var(--un-onboard-border-opacity));--un-onboard-bg-opacity:1;background-color:rgb(255 255 255/var(--un-onboard-bg-opacity));--un-onboard-text-opacity:1;width:25rem;max-width:calc(100vw - 2rem);color:rgb(38 38 38/var(--un-onboard-text-opacity));--un-onboard-shadow:var(--un-onboard-shadow-inset) 0 10px 15px -3px var(--un-onboard-shadow-color,#0000001a),var(--un-onboard-shadow-inset) 0 4px 6px -4px var(--un-onboard-shadow-color,#0000001a);box-shadow:var(--un-onboard-ring-offset-shadow), var(--un-onboard-ring-shadow), var(--un-onboard-shadow);transform-origin:0 100%;border-radius:.5rem;flex-direction:column;gap:.75rem;padding:1rem;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:.875rem;line-height:1.5;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:3rem;left:1rem}.dark .devframes-onboard-panel{--un-onboard-bg-opacity:1;background-color:rgb(17 17 17/var(--un-onboard-bg-opacity));--un-onboard-text-opacity:1;color:rgb(229 229 229/var(--un-onboard-text-opacity))}.devframes-onboard-panel[hidden]{pointer-events:none;--un-onboard-scale-x:.95;--un-onboard-scale-y:.95;transform:translateX(var(--un-onboard-translate-x)) translateY(var(--un-onboard-translate-y)) translateZ(var(--un-onboard-translate-z)) rotate(var(--un-onboard-rotate)) rotateX(var(--un-onboard-rotate-x)) rotateY(var(--un-onboard-rotate-y)) rotateZ(var(--un-onboard-rotate-z)) skewX(var(--un-onboard-skew-x)) skewY(var(--un-onboard-skew-y)) scaleX(var(--un-onboard-scale-x)) scaleY(var(--un-onboard-scale-y)) scaleZ(var(--un-onboard-scale-z));opacity:0;display:block}.devframes-onboard-command{-webkit-user-select:all;user-select:all;word-break:break-all;--un-onboard-bg-opacity:1;background-color:rgb(246 246 246/var(--un-onboard-bg-opacity));--un-onboard-text-opacity:1;color:rgb(82 82 82/var(--un-onboard-text-opacity));border-radius:.25rem;padding:.375rem 2rem .375rem .5rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.75rem;line-height:1rem;display:block}.dark .devframes-onboard-command{--un-onboard-bg-opacity:1;background-color:rgb(16 16 16/var(--un-onboard-bg-opacity));--un-onboard-text-opacity:1;color:rgb(163 163 163/var(--un-onboard-text-opacity))}.devframes-onboard-command-row{position:relative}.devframes-onboard-copy{cursor:pointer;--un-onboard-text-opacity:1;width:1.5rem;height:1.5rem;color:rgb(82 82 82/var(--un-onboard-text-opacity));opacity:.6;outline-offset:2px;--un-onboard-ring-opacity:1;--un-onboard-ring-color:rgb(117 166 126/var(--un-onboard-ring-opacity));background-color:#0000;border-style:none;border-radius:.25rem;outline:2px solid #0000;justify-content:center;align-items:center;padding:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:.25rem;right:.25rem}.dark .devframes-onboard-copy{--un-onboard-text-opacity:1;color:rgb(163 163 163/var(--un-onboard-text-opacity))}.devframes-onboard-copy:hover{opacity:1}.devframes-onboard-copy:focus-visible{opacity:1;--un-onboard-ring-width:2px;--un-onboard-ring-offset-shadow:var(--un-onboard-ring-inset) 0 0 0 var(--un-onboard-ring-offset-width) var(--un-onboard-ring-offset-color);--un-onboard-ring-shadow:var(--un-onboard-ring-inset) 0 0 0 calc(var(--un-onboard-ring-width) + var(--un-onboard-ring-offset-width)) var(--un-onboard-ring-color);box-shadow:var(--un-onboard-ring-offset-shadow), var(--un-onboard-ring-shadow), var(--un-onboard-shadow)}.devframes-onboard-spinner[hidden]{display:none}@media print{.devframes-onboard-pill,.devframes-onboard-panel{display:none}}@media (prefers-reduced-motion:reduce){.devframes-onboard-pill,.devframes-onboard-panel,.devframes-onboard-glow{transition:none}.devframes-onboard-spinner.animate-spin{animation-duration:3s}}*,:before,:after,::backdrop{--un-onboard-rotate:0;--un-onboard-rotate-x:0;--un-onboard-rotate-y:0;--un-onboard-rotate-z:0;--un-onboard-scale-x:1;--un-onboard-scale-y:1;--un-onboard-scale-z:1;--un-onboard-skew-x:0;--un-onboard-skew-y:0;--un-onboard-translate-x:0;--un-onboard-translate-y:0;--un-onboard-translate-z:0;--un-onboard-pan-x: ;--un-onboard-pan-y: ;--un-onboard-pinch-zoom: ;--un-onboard-scroll-snap-strictness:proximity;--un-onboard-ordinal: ;--un-onboard-slashed-zero: ;--un-onboard-numeric-figure: ;--un-onboard-numeric-spacing: ;--un-onboard-numeric-fraction: ;--un-onboard-border-spacing-x:0;--un-onboard-border-spacing-y:0;--un-onboard-ring-offset-shadow:0 0 #0000;--un-onboard-ring-shadow:0 0 #0000;--un-onboard-shadow-inset: ;--un-onboard-shadow:0 0 #0000;--un-onboard-ring-inset: ;--un-onboard-ring-offset-width:0px;--un-onboard-ring-offset-color:#fff;--un-onboard-ring-width:0px;--un-onboard-ring-color:#93c5fd80;--un-onboard-blur: ;--un-onboard-brightness: ;--un-onboard-contrast: ;--un-onboard-drop-shadow: ;--un-onboard-grayscale: ;--un-onboard-hue-rotate: ;--un-onboard-invert: ;--un-onboard-saturate: ;--un-onboard-sepia: ;--un-onboard-backdrop-blur: ;--un-onboard-backdrop-brightness: ;--un-onboard-backdrop-contrast: ;--un-onboard-backdrop-grayscale: ;--un-onboard-backdrop-hue-rotate: ;--un-onboard-backdrop-invert: ;--un-onboard-backdrop-opacity: ;--un-onboard-backdrop-saturate: ;--un-onboard-backdrop-sepia: }.i-ph-check{--un-onboard-icon:url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32'/%3E%3C/svg%3E\");-webkit-mask:var(--un-onboard-icon) no-repeat;mask:var(--un-onboard-icon) no-repeat;color:inherit;background-color:currentColor;width:1.11em;height:1.11em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-ph-copy{--un-onboard-icon:url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8m-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z'/%3E%3C/svg%3E\");-webkit-mask:var(--un-onboard-icon) no-repeat;mask:var(--un-onboard-icon) no-repeat;color:inherit;background-color:currentColor;width:1.11em;height:1.11em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-ph-spinner{--un-onboard-icon:url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M136 32v32a8 8 0 0 1-16 0V32a8 8 0 0 1 16 0m37.25 58.75a8 8 0 0 0 5.66-2.35l22.63-22.62a8 8 0 0 0-11.32-11.32L167.6 77.09a8 8 0 0 0 5.65 13.66M224 120h-32a8 8 0 0 0 0 16h32a8 8 0 0 0 0-16m-45.09 47.6a8 8 0 0 0-11.31 11.31l22.62 22.63a8 8 0 0 0 11.32-11.32ZM128 184a8 8 0 0 0-8 8v32a8 8 0 0 0 16 0v-32a8 8 0 0 0-8-8m-50.91-16.4l-22.63 22.62a8 8 0 0 0 11.32 11.32l22.62-22.63a8 8 0 0 0-11.31-11.31M72 128a8 8 0 0 0-8-8H32a8 8 0 0 0 0 16h32a8 8 0 0 0 8-8m-6.22-73.54a8 8 0 0 0-11.32 11.32L77.09 88.4A8 8 0 0 0 88.4 77.09Z'/%3E%3C/svg%3E\");-webkit-mask:var(--un-onboard-icon) no-repeat;mask:var(--un-onboard-icon) no-repeat;color:inherit;background-color:currentColor;width:1.11em;height:1.11em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.btn-action:disabled{pointer-events:none;opacity:.3!important}.btn-primary:disabled{pointer-events:none;opacity:.5}.btn-action{--un-onboard-border-opacity:.13;border-width:1px;border-color:rgb(153 153 153/var(--un-onboard-border-opacity));opacity:.75;outline-offset:2px;border-radius:.25rem;outline:2px solid #0000;align-items:center;gap:.5rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex}.btn-primary{--un-onboard-bg-opacity:1;background-color:rgb(from var(--colors-primary-500,#578861) r g b / var(--un-onboard-bg-opacity));--un-onboard-text-opacity:1;color:rgb(255 255 255/var(--un-onboard-text-opacity));outline-offset:2px;border-width:1px;border-color:#0000;border-radius:.25rem;outline:2px solid #0000;align-items:center;gap:.5rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex}.btn-action:hover{--un-onboard-bg-opacity:.08;background-color:rgb(153 153 153/var(--un-onboard-bg-opacity));opacity:1}.btn-primary:hover{--un-onboard-bg-opacity:1;background-color:rgb(from var(--colors-primary-600,#40704b) r g b / var(--un-onboard-bg-opacity))}.btn-action:focus-visible,.btn-primary:focus-visible{--un-onboard-ring-width:2px;--un-onboard-ring-offset-shadow:var(--un-onboard-ring-inset) 0 0 0 var(--un-onboard-ring-offset-width) var(--un-onboard-ring-offset-color);--un-onboard-ring-shadow:var(--un-onboard-ring-inset) 0 0 0 calc(var(--un-onboard-ring-width) + var(--un-onboard-ring-offset-width)) var(--un-onboard-ring-color);box-shadow:var(--un-onboard-ring-offset-shadow), var(--un-onboard-ring-shadow), var(--un-onboard-shadow);--un-onboard-ring-color:rgb(from var(--colors-primary-500,#578861) r g b / .4)}@property --scroll-fade-t{syntax:\"<length-percentage>\";inherits:false;initial-value:0}@property --scroll-fade-b{syntax:\"<length-percentage>\";inherits:false;initial-value:0}@property --scroll-fade-s{syntax:\"<length-percentage>\";inherits:false;initial-value:0}@property --scroll-fade-e{syntax:\"<length-percentage>\";inherits:false;initial-value:0}@property --scroll-fade-mask{syntax:\"*\";inherits:false}@property --shimmer-angle{syntax:\"<angle>\";inherits:true;initial-value:20deg}@property --shimmer-image{syntax:\"*\";inherits:false}@property --shimmer-text-fill{syntax:\"*\";inherits:false}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.m-0{margin:0}.contents{display:contents}.h-3{height:.75rem}.h-5{height:1.25rem}.h-full{height:100%}.w-3{width:.75rem}.w-5{width:1.25rem}.w-full{width:100%}.flex{display:flex}.flex-col{flex-direction:column}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.object-contain{object-fit:contain}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.dark .dark\\:text-red-400{--un-onboard-text-opacity:1;color:rgb(248 113 113/var(--un-onboard-text-opacity))}.text-red-600{--un-onboard-text-opacity:1;color:rgb(220 38 38/var(--un-onboard-text-opacity))}.font-medium{font-weight:500}*,:before,:after,::backdrop{--un-onboard-rotate:0;--un-onboard-rotate-x:0;--un-onboard-rotate-y:0;--un-onboard-rotate-z:0;--un-onboard-scale-x:1;--un-onboard-scale-y:1;--un-onboard-scale-z:1;--un-onboard-skew-x:0;--un-onboard-skew-y:0;--un-onboard-translate-x:0;--un-onboard-translate-y:0;--un-onboard-translate-z:0;--un-onboard-pan-x: ;--un-onboard-pan-y: ;--un-onboard-pinch-zoom: ;--un-onboard-scroll-snap-strictness:proximity;--un-onboard-ordinal: ;--un-onboard-slashed-zero: ;--un-onboard-numeric-figure: ;--un-onboard-numeric-spacing: ;--un-onboard-numeric-fraction: ;--un-onboard-border-spacing-x:0;--un-onboard-border-spacing-y:0;--un-onboard-ring-offset-shadow:0 0 #0000;--un-onboard-ring-shadow:0 0 #0000;--un-onboard-shadow-inset: ;--un-onboard-shadow:0 0 #0000;--un-onboard-ring-inset: ;--un-onboard-ring-offset-width:0px;--un-onboard-ring-offset-color:#fff;--un-onboard-ring-width:0px;--un-onboard-ring-color:#93c5fd80;--un-onboard-blur: ;--un-onboard-brightness: ;--un-onboard-contrast: ;--un-onboard-drop-shadow: ;--un-onboard-grayscale: ;--un-onboard-hue-rotate: ;--un-onboard-invert: ;--un-onboard-saturate: ;--un-onboard-sepia: ;--un-onboard-backdrop-blur: ;--un-onboard-backdrop-brightness: ;--un-onboard-backdrop-contrast: ;--un-onboard-backdrop-grayscale: ;--un-onboard-backdrop-hue-rotate: ;--un-onboard-backdrop-invert: ;--un-onboard-backdrop-opacity: ;--un-onboard-backdrop-saturate: ;--un-onboard-backdrop-sepia: }*,:before,:after{border-color:#8882}.border-base{--un-onboard-border-opacity:.13;border-color:rgb(153 153 153/var(--un-onboard-border-opacity))}.bg-active{--un-onboard-bg-opacity:.13;background-color:rgb(153 153 153/var(--un-onboard-bg-opacity))}.bg-base{--un-onboard-bg-opacity:1;background-color:rgb(255 255 255/var(--un-onboard-bg-opacity))}.dark .bg-base{--un-onboard-bg-opacity:1;background-color:rgb(17 17 17/var(--un-onboard-bg-opacity))}.bg-hover{--un-onboard-bg-opacity:.08;background-color:rgb(153 153 153/var(--un-onboard-bg-opacity))}.bg-secondary{--un-onboard-bg-opacity:1;background-color:rgb(246 246 246/var(--un-onboard-bg-opacity))}.dark .bg-secondary{--un-onboard-bg-opacity:1;background-color:rgb(16 16 16/var(--un-onboard-bg-opacity))}.color-active{--un-onboard-text-opacity:1;color:rgb(from var(--colors-primary-600,#40704b) r g b / var(--un-onboard-text-opacity))}.dark .color-active{--un-onboard-text-opacity:1;color:rgb(from var(--colors-primary-300,#93c69d) r g b / var(--un-onboard-text-opacity))}.color-base{--un-onboard-text-opacity:1;color:rgb(38 38 38/var(--un-onboard-text-opacity))}.dark .color-base{--un-onboard-text-opacity:1;color:rgb(229 229 229/var(--un-onboard-text-opacity))}.color-faint,.dark .color-faint{--un-onboard-text-opacity:1;color:rgb(115 115 115/var(--un-onboard-text-opacity))}.color-muted{--un-onboard-text-opacity:1;color:rgb(82 82 82/var(--un-onboard-text-opacity))}.dark .color-muted{--un-onboard-text-opacity:1;color:rgb(163 163 163/var(--un-onboard-text-opacity))}:root,:host,.devframes-accent-scope{--devframe-primary-DEFAULT:var(--devframe-primary);--devframe-primary-600:color-mix(in oklab, var(--devframe-primary), white 9%);--devframe-primary-500:color-mix(in oklab, var(--devframe-primary), white 18%);--devframe-primary-400:color-mix(in oklab, var(--devframe-primary), white 34%);--devframe-primary-300:color-mix(in oklab, var(--devframe-primary), white 54%);--colors-primary-DEFAULT:var(--devframe-primary-DEFAULT,#3a6a45);--colors-primary-600:var(--devframe-primary-600,#40704b);--colors-primary-500:var(--devframe-primary-500,#578861);--colors-primary-400:var(--devframe-primary-400,#75a67e);--colors-primary-300:var(--devframe-primary-300,#93c69d)}";
41
+ let m = document.createElement("div");
42
+ m.className = "devframes-onboard-root", m.style.display = "contents", l.append(p, m), e.branding.primaryColor && t.style.setProperty("--devframe-primary", e.branding.primaryColor);
43
+ let { messages: h, branding: g } = e, _ = g.productName ?? "Devframes", v = document.createElement("button");
44
+ v.type = "button", v.className = "devframes-onboard-pill", v.title = h.title, v.setAttribute("aria-haspopup", "dialog"), v.setAttribute("aria-expanded", "false");
47
45
  let y = document.createElement("span");
48
- y.textContent = p.title, v.append(l(m, "w-5 h-5"), y);
49
- let b = document.createElement("p");
50
- b.className = "color-muted m-0", b.textContent = p.description;
51
- let x = document.createElement("code");
52
- x.className = "devframes-onboard-command", x.textContent = e.command;
53
- let S = document.createElement("p");
54
- S.className = "m-0 text-xs", S.hidden = !0;
55
- let C = u("btn-primary text-sm justify-center", p.install, () => void M()), w = u("btn-action justify-center text-sm color-muted", p.hide, () => {
46
+ y.className = "devframes-onboard-glow";
47
+ let b = d(g, "w-3 h-3"), x = document.createElement("span");
48
+ x.className = "devframes-onboard-spinner i-ph-spinner animate-spin", v.append(b);
49
+ let S = document.createElement("div");
50
+ S.className = "devframes-onboard-panel", S.setAttribute("role", "dialog"), S.hidden = !0;
51
+ let C = document.createElement("div");
52
+ C.className = "flex items-center gap-2 font-medium";
53
+ let w = document.createElement("span");
54
+ w.textContent = h.title;
55
+ let T = d(g, "w-5 h-5");
56
+ C.append(T, w);
57
+ let E = () => {
58
+ let e = c();
59
+ m.classList.toggle("dark", e), m.classList.toggle("light", !e), u(b, g), u(T, g);
60
+ };
61
+ E(), s.addEventListener("change", E), new MutationObserver(E).observe(document.documentElement, {
62
+ attributes: !0,
63
+ attributeFilter: ["class"]
64
+ });
65
+ let D = document.createElement("p");
66
+ D.className = "color-muted m-0", D.textContent = h.description;
67
+ let O = document.createElement("code");
68
+ O.className = "devframes-onboard-command", e.command.forEach((t, n) => {
69
+ let r = document.createElement("span");
70
+ r.textContent = t, n > 2 ? (r.style.color = "var(--devframe-primary)", r.style.fontWeight = "medium") : r.style.opacity = "0.75", O.append(r), n < e.command.length - 1 && O.append(document.createTextNode(" "));
71
+ });
72
+ let k = document.createElement("button");
73
+ k.type = "button", k.className = "devframes-onboard-copy", k.title = "Copy command", k.setAttribute("aria-label", "Copy command");
74
+ let A = document.createElement("span");
75
+ A.className = "i-ph-copy", k.append(A);
76
+ let j;
77
+ k.addEventListener("click", async () => {
78
+ try {
79
+ await navigator.clipboard.writeText(e.command.join(" ")), A.className = "i-ph-check", k.title = "Copied";
80
+ } catch {
81
+ return;
82
+ }
83
+ clearTimeout(j), j = setTimeout(() => {
84
+ A.className = "i-ph-copy", k.title = "Copy command";
85
+ }, 1500);
86
+ });
87
+ let M = document.createElement("div");
88
+ M.className = "devframes-onboard-command-row", M.append(O, k);
89
+ let N = document.createElement("p");
90
+ N.className = "m-0 text-xs", N.hidden = !0;
91
+ let P = f("btn-primary text-sm justify-center gap-1", h.install, () => void G()), F = document.createElement("span");
92
+ F.className = "devframes-onboard-spinner i-ph-spinner animate-spin", F.hidden = !0;
93
+ let I = document.createElement("span");
94
+ I.textContent = h.install, P.replaceChildren(F, I);
95
+ let L = f("btn-action justify-center text-sm color-muted", h.hide, () => {
56
96
  sessionStorage.setItem(r, "1"), t.remove();
57
- }), T = u("btn-action justify-center text-sm color-muted", p.disable, () => void N()), E = document.createElement("div");
58
- E.className = "grid grid-cols-2 gap-1", E.append(w, T);
59
- let D = document.createElement("div");
60
- D.className = "flex flex-col gap-2", D.append(E, C), _.append(v, b, x, S, D), f.append(g, h, _);
61
- let O = !1, k = (e) => {
62
- O = e, _.hidden = !O, h.setAttribute("aria-expanded", String(O));
97
+ }), R = f("btn-action justify-center text-sm color-muted", h.disable, () => void K()), z = document.createElement("div");
98
+ z.className = "grid grid-cols-2 gap-1", z.append(L, R);
99
+ let B = document.createElement("div");
100
+ B.className = "flex flex-col gap-2", B.append(z, P), S.append(C, D, M, N, B), m.append(y, v, S);
101
+ let V = !1, H = (e) => {
102
+ V = e, S.hidden = !V, v.setAttribute("aria-expanded", String(V));
63
103
  };
64
- h.addEventListener("click", () => k(!O)), document.addEventListener("keydown", (e) => {
65
- e.key === "Escape" && O && k(!1);
104
+ v.addEventListener("click", () => H(!V)), document.addEventListener("keydown", (e) => {
105
+ e.key === "Escape" && V && H(!1);
66
106
  }), document.addEventListener("pointerdown", (e) => {
67
- O && !e.composedPath().includes(t) && k(!1);
107
+ V && !e.composedPath().includes(t) && H(!1);
68
108
  });
69
- function A(e) {
70
- let { state: t } = e;
71
- C.disabled = t === "installing", C.textContent = t === "error" ? p.retry : p.install, C.hidden = t === "installed", S.hidden = t !== "installing" && t !== "installed" && t !== "error", S.className = `m-0 text-xs ${t === "error" ? "text-red-600 dark:text-red-400" : "color-muted"}`, S.textContent = t === "installing" ? p.installing : t === "installed" ? p.restart : t === "error" ? `${e.error?.code}: ${e.error?.message}` : "";
109
+ function U(e) {
110
+ let { state: t } = e, n = t === "installing" || t === "installed";
111
+ P.disabled = n, L.disabled = n, R.disabled = n, F.hidden = t !== "installing", v.replaceChildren(t === "installing" ? x : b), I.textContent = t === "installing" ? `Installing ${_}...` : t === "installed" ? h.restart : t === "error" ? h.retry : h.install, N.hidden = t !== "error", N.className = "m-0 text-xs text-red-600 dark:text-red-400", N.textContent = t === "error" ? `${e.error?.code}: ${e.error?.message}` : "";
72
112
  }
73
- async function j() {
113
+ async function W() {
74
114
  let e = await a();
75
115
  if (e.state === "ready") {
76
116
  t.remove(), await o();
77
117
  return;
78
118
  }
79
- A(e), e.state === "installing" && setTimeout(() => void j(), n);
119
+ U(e), e.state === "installing" && setTimeout(() => void W(), n);
80
120
  }
81
- async function M() {
82
- A({
121
+ async function G() {
122
+ U({
83
123
  ...e,
84
124
  state: "installing"
85
- }), await i("install", { method: "POST" }), await j();
125
+ }), await i("install", { method: "POST" }), await W();
86
126
  }
87
- async function N() {
127
+ async function K() {
88
128
  (await i("disable", { method: "POST" })).ok && t.remove();
89
129
  }
90
- A(e), e.state === "installing" && j(), document.body.append(t);
130
+ U(e), e.state === "installing" && W(), document.body.append(t);
91
131
  }
92
- async function f() {
132
+ async function m() {
93
133
  if (window.parent !== window || sessionStorage.getItem(r)) return;
94
134
  let e = await a();
95
135
  if (e.state !== "disabled" && e.state !== "installed") {
@@ -97,8 +137,8 @@ async function f() {
97
137
  await o();
98
138
  return;
99
139
  }
100
- d(e);
140
+ p(e);
101
141
  }
102
142
  }
103
- f();
143
+ m();
104
144
  //#endregion
package/dist/index.d.mts CHANGED
@@ -56,7 +56,7 @@ type OnboardingState = 'idle' | 'installing' | 'installed' | 'ready' | 'error' |
56
56
  interface OnboardingStatus {
57
57
  state: OnboardingState;
58
58
  /** The exact command Install runs, for the panel's preview line. */
59
- command: string;
59
+ command: string[];
60
60
  branding: OnboardingBranding;
61
61
  messages: OnboardingMessages;
62
62
  error?: {
@@ -82,6 +82,7 @@ interface Onboarding {
82
82
  }
83
83
  //#endregion
84
84
  //#region src/index.d.ts
85
+ export declare function defaultMessages(productName: string): OnboardingMessages;
85
86
  /**
86
87
  * Create the stand-in for a hub UI that is not installed yet: a request
87
88
  * handler that serves the floating button at `<base>embedded.js` and the
package/dist/index.mjs CHANGED
@@ -49,9 +49,6 @@ async function resolveInstallCommand(plan) {
49
49
  const args = [...plan.dev ? ["-D"] : [], ...plan.packages];
50
50
  return resolveCommand(agent, "add", args);
51
51
  }
52
- function formatCommand(command) {
53
- return [command.command, ...command.args].join(" ");
54
- }
55
52
  /**
56
53
  * Run the install and make sure that each named package landed in
57
54
  * `<cwd>/node_modules`. Throws a `DF9001` / `DF9002` diagnostic on failure.
@@ -65,7 +62,7 @@ async function runInstall(plan, command) {
65
62
  }
66
63
  } });
67
64
  if (result.exitCode !== 0) throw diagnostics.DF9001({
68
- command: formatCommand(command),
65
+ command: [command.command, ...command.args].join(" "),
69
66
  exitCode: result.exitCode,
70
67
  stderr: result.stderr.trim().slice(-2048)
71
68
  });
@@ -118,7 +115,7 @@ function defaultMessages(productName) {
118
115
  title: productName,
119
116
  description: `${productName} enables development features in your project. Install it with:`,
120
117
  install: `Install ${productName}`,
121
- hide: "Hide for now",
118
+ hide: "Hide in this session",
122
119
  disable: "Disable entirely",
123
120
  installing: "Installing...",
124
121
  restart: `Installed. Restart your dev server to open ${productName}.`,
@@ -233,7 +230,7 @@ function createOnboarding(options) {
233
230
  resolved = await getCommand();
234
231
  await runInstall(plan, resolved);
235
232
  } catch (cause) {
236
- const command = resolved ? formatCommand(resolved) : plan.packages.join(" ");
233
+ const command = resolved ? [resolved.command, ...resolved.args].join(" ") : plan.packages.join(" ");
237
234
  fail(cause, () => diagnostics.DF9001({
238
235
  command,
239
236
  exitCode: void 0,
@@ -262,9 +259,10 @@ function createOnboarding(options) {
262
259
  return new Response(null, { status: 204 });
263
260
  }
264
261
  async function status() {
262
+ const command = await getCommand();
265
263
  return {
266
264
  state,
267
- command: formatCommand(await getCommand()),
265
+ command: [command.command, ...command.args],
268
266
  branding,
269
267
  messages,
270
268
  error
@@ -304,4 +302,4 @@ function createOnboarding(options) {
304
302
  };
305
303
  }
306
304
  //#endregion
307
- export { createOnboarding };
305
+ export { createOnboarding, defaultMessages };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@devframes/hub-ui-onboard",
3
3
  "type": "module",
4
- "version": "1.2.2",
4
+ "version": "1.2.3",
5
5
  "description": "A tiny stand-in for the devframe hub UI: a floating button that installs it on demand.",
6
6
  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
7
7
  "license": "MIT",
@@ -44,6 +44,7 @@
44
44
  "build": "pnpm run build:css && tsdown && vite build --config vite.client.config.ts",
45
45
  "build:css": "tsx scripts/build-css.ts",
46
46
  "typecheck": "tsc --noEmit",
47
- "test": "vitest run"
47
+ "test": "vitest run",
48
+ "play": "pnpm run build:css && pnpm -C playground play"
48
49
  }
49
50
  }