@devframes/hub-ui-onboard 1.2.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-PRESENT Anthony Fu <https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/client/embedded.js

@@ -0,0 +1,104 @@
+//#region src/client/.generated/css.ts
+var e = import.meta.url, t = new URL("./", e), n = 1e3, r = "devframes-onboard-hidden", i = (e, n) => fetch(new URL(`__onboard/${e}`, t), n);
+async function a() {
+	return (await i("status")).json();
+}
+async function o() {
+	await import(
+		/* @vite-ignore */
+		new URL(`embedded.js?onboard=${Date.now()}`, t).href
+);
+}
+function s() {
+	let e = localStorage.getItem("devframes-color-scheme");
+	return e === "dark" || e === "light" ? e === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function c(e) {
+	let t = e.logo;
+	return !t || typeof t == "string" ? t : s() ? t.dark ?? t.light : t.light;
+}
+function l(e, t) {
+	let n = document.createElement("span");
+	n.className = `${t} flex items-center justify-center`;
+	let r = c(e);
+	if (r) {
+		let e = document.createElement("img");
+		e.src = r, e.alt = "", e.draggable = !1, e.className = "w-full h-full object-contain", n.append(e);
+	} 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>";
+	return n;
+}
+function u(e, t, n) {
+	let r = document.createElement("button");
+	return r.type = "button", r.className = e, r.textContent = t, r.addEventListener("click", n), r;
+}
+function d(e) {
+	let t = document.createElement("devframes-onboard"), c = t.attachShadow({ mode: "open" }), d = document.createElement("style");
+	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)}";
+	let f = document.createElement("div");
+	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);
+	let { messages: p, branding: m } = e, h = document.createElement("button");
+	h.type = "button", h.className = "devframes-onboard-pill", h.title = p.title, h.setAttribute("aria-haspopup", "dialog"), h.setAttribute("aria-expanded", "false");
+	let g = document.createElement("span");
+	g.className = "devframes-onboard-glow", h.append(l(m, "w-3 h-3"));
+	let _ = document.createElement("div");
+	_.className = "devframes-onboard-panel", _.setAttribute("role", "dialog"), _.hidden = !0;
+	let v = document.createElement("div");
+	v.className = "flex items-center gap-2 font-medium";
+	let y = document.createElement("span");
+	y.textContent = p.title, v.append(l(m, "w-5 h-5"), y);
+	let b = document.createElement("p");
+	b.className = "color-muted m-0", b.textContent = p.description;
+	let x = document.createElement("code");
+	x.className = "devframes-onboard-command", x.textContent = e.command;
+	let S = document.createElement("p");
+	S.className = "m-0 text-xs", S.hidden = !0;
+	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, () => {
+		sessionStorage.setItem(r, "1"), t.remove();
+	}), T = u("btn-action justify-center text-sm color-muted", p.disable, () => void N()), E = document.createElement("div");
+	E.className = "grid grid-cols-2 gap-1", E.append(w, T);
+	let D = document.createElement("div");
+	D.className = "flex flex-col gap-2", D.append(E, C), _.append(v, b, x, S, D), f.append(g, h, _);
+	let O = !1, k = (e) => {
+		O = e, _.hidden = !O, h.setAttribute("aria-expanded", String(O));
+	};
+	h.addEventListener("click", () => k(!O)), document.addEventListener("keydown", (e) => {
+		e.key === "Escape" && O && k(!1);
+	}), document.addEventListener("pointerdown", (e) => {
+		O && !e.composedPath().includes(t) && k(!1);
+	});
+	function A(e) {
+		let { state: t } = e;
+		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}` : "";
+	}
+	async function j() {
+		let e = await a();
+		if (e.state === "ready") {
+			t.remove(), await o();
+			return;
+		}
+		A(e), e.state === "installing" && setTimeout(() => void j(), n);
+	}
+	async function M() {
+		A({
+			...e,
+			state: "installing"
+		}), await i("install", { method: "POST" }), await j();
+	}
+	async function N() {
+		(await i("disable", { method: "POST" })).ok && t.remove();
+	}
+	A(e), e.state === "installing" && j(), document.body.append(t);
+}
+async function f() {
+	if (window.parent !== window || sessionStorage.getItem(r)) return;
+	let e = await a();
+	if (e.state !== "disabled" && e.state !== "installed") {
+		if (e.state === "ready") {
+			await o();
+			return;
+		}
+		d(e);
+	}
+}
+f();
+//#endregion

package/dist/index.d.mts

@@ -0,0 +1,92 @@
+//#region src/types.d.ts
+/** A logo URL, or one per color scheme. Same shape as hub-ui's `BrandingLogo`. */
+type OnboardingLogo = string | {
+  light: string;
+  dark?: string;
+};
+/** The subset of hub-ui's `DevframeBranding` the two-button panel renders. */
+interface OnboardingBranding {
+  /** Product name shown in the panel and used in the default strings. Default: `Devframes`. */
+  productName?: string;
+  logo?: OnboardingLogo;
+  /** Primary accent as a CSS color; retints the pill glow and the primary button. */
+  primaryColor?: string;
+}
+/** Every string the panel renders. Defaults derive from `branding.productName`. */
+interface OnboardingMessages {
+  /** Pill tooltip and panel heading. */
+  title: string;
+  /** Short sentence under the heading. */
+  description: string;
+  install: string;
+  /** Hides the button for this browser tab (`sessionStorage`). */
+  hide: string;
+  /** Writes the state file; the host stops injecting the button. */
+  disable: string;
+  installing: string;
+  /** Shown when the install finished and no hot swap happened. */
+  restart: string;
+  retry: string;
+}
+/** A web-standard request handler the hub exposes once installed. */
+type OnboardingHandler = (request: Request) => Response | Promise<Response>;
+interface CreateOnboardingOptions {
+  /** Packages to install when the user clicks Install. Package specs as the package manager accepts them. */
+  packages: string[];
+  /** Mount base. Default: the hub default `/__devframes/`. */
+  base?: string;
+  /** Project directory the install runs in. Default: `process.cwd()`. */
+  cwd?: string;
+  /** Directory of the `hub-ui-onboard.json` state file. Default: `<cwd>/node_modules/.devframe`. */
+  stateDir?: string;
+  /** Install as a devDependency. Default: `true`. */
+  dev?: boolean;
+  branding?: OnboardingBranding;
+  messages?: Partial<OnboardingMessages>;
+  /**
+   * Called once the packages are installed and verified. Return a handler
+   * to take over every request at `base` in this process; the floating
+   * button then loads `<base>embedded.js` from it. Return nothing to ask the
+   * user to restart the dev server.
+   */
+  onInstalled?: () => void | OnboardingHandler | Promise<void | OnboardingHandler>;
+}
+type OnboardingState = 'idle' | 'installing' | 'installed' | 'ready' | 'error' | 'disabled';
+/** The `GET <base>__onboard/status` body. */
+interface OnboardingStatus {
+  state: OnboardingState;
+  /** The exact command Install runs, for the panel's preview line. */
+  command: string;
+  branding: OnboardingBranding;
+  messages: OnboardingMessages;
+  error?: {
+    code: string;
+    message: string;
+  };
+}
+interface Onboarding {
+  /** Web-standard handler for every request under `base`. */
+  handler: OnboardingHandler;
+  /** Connect-style bridge for Node servers (Vite, Express, Fastify with middie). */
+  nodeMiddleware: (req: import('node:http').IncomingMessage, res: import('node:http').ServerResponse, next?: (err?: unknown) => void) => void;
+  /** `true` when the user disabled DevTools in an earlier session; skip injecting `scriptSrc`. */
+  disabled: boolean;
+  /**
+   * `true` when every named package was already in `node_modules` at
+   * creation. `onInstalled` then runs on the first request, which already
+   * reaches its handler; the button never shows.
+   */
+  installed: boolean;
+  /** `<base>embedded.js`: the `<script type="module">` URL to inject. */
+  scriptSrc: string;
+}
+//#endregion
+//#region src/index.d.ts
+/**
+ * Create the stand-in for a hub UI that is not installed yet: a request
+ * handler that serves the floating button at `<base>embedded.js` and the
+ * `__onboard/*` routes it talks to.
+ */
+export declare function createOnboarding(options: CreateOnboardingOptions): Onboarding;
+//#endregion
+export type { CreateOnboardingOptions, Onboarding, OnboardingBranding, OnboardingHandler, OnboardingLogo, OnboardingMessages, OnboardingState, OnboardingStatus };

package/dist/index.mjs

@@ -0,0 +1,307 @@
+import { Buffer } from "node:buffer";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import process from "node:process";
+import { Readable } from "node:stream";
+import { pipeline } from "node:stream/promises";
+import { fileURLToPath } from "node:url";
+import { Diagnostic, createConsoleReporter, defineDiagnostics } from "nostics";
+import { detect, resolveCommand } from "package-manager-detector";
+import { exec } from "tinyexec";
+//#region src/diagnostics.ts
+/**
+* `DF90xx` is this package's range (see `.agents/08-diagnostics.md`). It
+* uses `nostics` directly: the package must stay free of `devframe` so a
+* host can ship it while devframe itself is not installed.
+*/
+const diagnostics = defineDiagnostics({
+	docsBase: "https://devfra.me/errors",
+	reporters: [createConsoleReporter()],
+	codes: {
+		DF9000: {
+			why: "`createOnboarding()` received no packages to install.",
+			fix: "Pass at least one package spec in `packages`, for example `packages: ['@nuxt/devtools']`."
+		},
+		DF9001: {
+			why: (p) => `\`${p.command}\` exited with code ${p.exitCode ?? "unknown"}.${p.stderr ? `\n${p.stderr}` : ""}`,
+			fix: "Run the command in a terminal to see the package manager's full output, then click Install again."
+		},
+		DF9002: {
+			why: (p) => `The install finished, but "${p.name}" is not in ${p.cwd}/node_modules.`,
+			fix: "Make sure that `cwd` points at the project that should receive the dependency (in a workspace, the package that runs the dev server)."
+		},
+		DF9003: {
+			why: (p) => `\`onInstalled\` threw after the packages were installed: ${p.reason}`,
+			fix: "The packages are installed. Fix the error in your `onInstalled` callback, or restart the dev server to load them."
+		},
+		DF9004: {
+			why: (p) => `The onboarding state file ${p.file} could not be read or written.`,
+			fix: "Make sure that `stateDir` is writable, or point it at another directory."
+		}
+	}
+});
+//#endregion
+//#region src/install.ts
+/** The `add` command for the project's package manager, `npm` when none is detected. */
+async function resolveInstallCommand(plan) {
+	const agent = (await detect({ cwd: plan.cwd }))?.agent ?? "npm";
+	const args = [...plan.dev ? ["-D"] : [], ...plan.packages];
+	return resolveCommand(agent, "add", args);
+}
+function formatCommand(command) {
+	return [command.command, ...command.args].join(" ");
+}
+/**
+* Run the install and make sure that each named package landed in
+* `<cwd>/node_modules`. Throws a `DF9001` / `DF9002` diagnostic on failure.
+*/
+async function runInstall(plan, command) {
+	const result = await exec(command.command, command.args, { nodeOptions: {
+		cwd: plan.cwd,
+		env: {
+			...process.env,
+			CI: "1"
+		}
+	} });
+	if (result.exitCode !== 0) throw diagnostics.DF9001({
+		command: formatCommand(command),
+		exitCode: result.exitCode,
+		stderr: result.stderr.trim().slice(-2048)
+	});
+	for (const name of namedPackages(plan)) if (!isInstalled(plan.cwd, name)) throw diagnostics.DF9002({
+		name,
+		cwd: plan.cwd
+	});
+}
+/**
+* `true` when every named package is already in `<cwd>/node_modules`, so the
+* onboarding has nothing to install. Path, URL and alias specs cannot be
+* checked by name, so a plan made only of those is never "already installed".
+*/
+function packagesInstalled(plan) {
+	const names = namedPackages(plan);
+	return names.length > 0 && names.every((name) => isInstalled(plan.cwd, name));
+}
+function isInstalled(cwd, name) {
+	return existsSync(join(cwd, "node_modules", name));
+}
+function namedPackages(plan) {
+	return plan.packages.map(packageName).filter((name) => name !== void 0);
+}
+/**
+* The package name of a bare spec (`foo`, `@scope/foo@^1`), or `undefined`
+* for a path, URL or alias spec whose installed name is not in the spec.
+*/
+function packageName(spec) {
+	return /^((?:@[\w.~-]+\/)?[\w.~-]+)(?:@[^/]*)?$/.exec(spec)?.[1];
+}
+//#endregion
+//#region src/index.ts
+const STATE_FILE = "hub-ui-onboard.json";
+/** `devframes` → `/devframes/`, same rule as `normalizeHubBase` in `@devframes/hub`. */
+function normalizeBase(base) {
+	return `/${base}/`.replace(/\/{2,}/g, "/");
+}
+/**
+* The built button lives next to the built entry (`dist/index.mjs` →
+* `dist/client/embedded.js`). Running from source (tests), fall back to
+* the package's `dist/`.
+*/
+function clientFile() {
+	const here = fileURLToPath(new URL(".", import.meta.url));
+	const sibling = join(here, "client/embedded.js");
+	return existsSync(sibling) ? sibling : join(here, "../dist/client/embedded.js");
+}
+function defaultMessages(productName) {
+	return {
+		title: productName,
+		description: `${productName} enables development features in your project. Install it with:`,
+		install: `Install ${productName}`,
+		hide: "Hide for now",
+		disable: "Disable entirely",
+		installing: "Installing...",
+		restart: `Installed. Restart your dev server to open ${productName}.`,
+		retry: "Retry"
+	};
+}
+function json(body, status = 200) {
+	return Response.json(body, {
+		status,
+		headers: { "Cache-Control": "no-store" }
+	});
+}
+/**
+* A browser sends `Origin` on every POST. Any other page on the same machine
+* must not be able to start an install, so the origin has to match the
+* request's own host (port included, which `Sec-Fetch-Site: same-site` ignores).
+*/
+function isSameOrigin(request) {
+	const origin = request.headers.get("origin");
+	if (origin) return new URL(origin).host === new URL(request.url).host;
+	const site = request.headers.get("sec-fetch-site");
+	return !site || site === "same-origin" || site === "none";
+}
+function readDisabled(file) {
+	if (!existsSync(file)) return false;
+	try {
+		return JSON.parse(readFileSync(file, "utf8")).disabled === true;
+	} catch (cause) {
+		diagnostics.DF9004({
+			file,
+			cause
+		});
+		return false;
+	}
+}
+async function toRequest(req) {
+	const url = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+	const headers = new Headers();
+	for (const [name, value] of Object.entries(req.headers)) for (const item of Array.isArray(value) ? value : [value]) if (item !== void 0) headers.append(name, item);
+	const method = req.method ?? "GET";
+	const body = method === "GET" || method === "HEAD" ? void 0 : Buffer.concat(await req.toArray());
+	return new Request(url, {
+		method,
+		headers,
+		body
+	});
+}
+async function sendResponse(res, response) {
+	res.statusCode = response.status;
+	response.headers.forEach((value, name) => res.setHeader(name, value));
+	if (!response.body) {
+		res.end();
+		return;
+	}
+	await pipeline(Readable.fromWeb(response.body), res).catch((cause) => {
+		if (!(cause instanceof Error && "code" in cause && cause.code === "ERR_STREAM_PREMATURE_CLOSE")) throw cause;
+	});
+}
+/**
+* Create the stand-in for a hub UI that is not installed yet: a request
+* handler that serves the floating button at `<base>embedded.js` and the
+* `__onboard/*` routes it talks to.
+*/
+function createOnboarding(options) {
+	if (options.packages.length === 0) throw diagnostics.DF9000();
+	const base = normalizeBase(options.base ?? "/__devframes/");
+	const cwd = options.cwd ?? process.cwd();
+	const stateFile = join(options.stateDir ?? join(cwd, "node_modules/.devframe"), STATE_FILE);
+	const plan = {
+		cwd,
+		packages: options.packages,
+		dev: options.dev ?? true
+	};
+	const branding = options.branding ?? {};
+	const messages = {
+		...defaultMessages(branding.productName?.trim() || "Devframes"),
+		...options.messages
+	};
+	const disabled = readDisabled(stateFile);
+	const installed = !disabled && packagesInstalled(plan);
+	let state = disabled ? "disabled" : installed ? "installed" : "idle";
+	let error;
+	let delegate;
+	let command;
+	const getCommand = () => command ??= resolveInstallCommand(plan);
+	function fail(cause, fallback) {
+		const diagnostic = cause instanceof Diagnostic ? cause : fallback();
+		error = {
+			code: diagnostic.code,
+			message: diagnostic.message
+		};
+		state = "error";
+	}
+	/** Hand the base to the host's hub, if it offers one. */
+	async function activate() {
+		try {
+			const next = await options.onInstalled?.();
+			delegate = typeof next === "function" ? next : void 0;
+			state = delegate ? "ready" : "installed";
+		} catch (cause) {
+			fail(cause, () => diagnostics.DF9003({
+				reason: cause instanceof Error ? cause.message : String(cause),
+				cause
+			}));
+		}
+	}
+	async function install() {
+		state = "installing";
+		error = void 0;
+		let resolved;
+		try {
+			resolved = await getCommand();
+			await runInstall(plan, resolved);
+		} catch (cause) {
+			const command = resolved ? formatCommand(resolved) : plan.packages.join(" ");
+			fail(cause, () => diagnostics.DF9001({
+				command,
+				exitCode: void 0,
+				stderr: String(cause)
+			}));
+			return;
+		}
+		await activate();
+	}
+	let activated;
+	function disable() {
+		try {
+			mkdirSync(join(stateFile, ".."), { recursive: true });
+			writeFileSync(stateFile, JSON.stringify({ disabled: true }));
+		} catch (cause) {
+			const diagnostic = diagnostics.DF9004({
+				file: stateFile,
+				cause
+			});
+			return json({
+				code: diagnostic.code,
+				message: diagnostic.message
+			}, 500);
+		}
+		state = "disabled";
+		return new Response(null, { status: 204 });
+	}
+	async function status() {
+		return {
+			state,
+			command: formatCommand(await getCommand()),
+			branding,
+			messages,
+			error
+		};
+	}
+	const handler = async (request) => {
+		if (installed) await (activated ??= activate());
+		if (delegate) return delegate(request);
+		const { pathname } = new URL(request.url);
+		if (!pathname.startsWith(base)) return new Response(null, { status: 404 });
+		const route = `${request.method} ${pathname.slice(base.length)}`;
+		if (route === "GET embedded.js") return new Response(await readFile(clientFile()), { headers: {
+			"Content-Type": "text/javascript; charset=utf-8",
+			"Cache-Control": "no-store"
+		} });
+		if (route === "GET __onboard/status") return json(await status());
+		if (route === "POST __onboard/install" || route === "POST __onboard/disable") {
+			if (!isSameOrigin(request)) return new Response(null, { status: 403 });
+			if (route.endsWith("disable")) return disable();
+			if (state === "idle" || state === "error") install();
+			return new Response(null, { status: 202 });
+		}
+		return new Response(null, { status: 404 });
+	};
+	return {
+		handler,
+		nodeMiddleware(req, res, next) {
+			if (!(req.url ?? "/").startsWith(base)) {
+				next?.();
+				return;
+			}
+			toRequest(req).then((request) => handler(request)).then((response) => sendResponse(res, response)).catch((cause) => next ? next(cause) : res.destroy(cause));
+		},
+		disabled,
+		installed,
+		scriptSrc: `${base}embedded.js`
+	};
+}
+//#endregion
+export { createOnboarding };

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@devframes/hub-ui-onboard",
+  "type": "module",
+  "version": "1.2.1",
+  "description": "A tiny stand-in for the devframe hub UI: a floating button that installs it on demand.",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/devframes/devframe#readme",
+  "repository": {
+    "directory": "packages/hub-ui-onboard",
+    "type": "git",
+    "url": "git+https://github.com/devframes/devframe.git"
+  },
+  "bugs": "https://github.com/devframes/devframe/issues",
+  "keywords": [
+    "devtools",
+    "devframe",
+    "hub",
+    "onboard"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "nostics": "^1.3.0",
+    "package-manager-detector": "^1.8.0",
+    "tinyexec": "^1.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.4",
+    "tsdown": "^0.23.0",
+    "tsx": "^4.23.15",
+    "unocss": "^66.10.5",
+    "vite": "^8.3.2",
+    "vitest": "^5.0.3"
+  },
+  "scripts": {
+    "build": "pnpm run build:css && tsdown && vite build --config vite.client.config.ts",
+    "build:css": "tsx scripts/build-css.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}