@sherpahow/sherpa-sdk
Version:
Sherpa JavaScript SDK for in-app help and product tours. Built with TypeScript, Lit web components, and Nano Stores.
1,519 lines • 179 kB
JavaScript
var __freeze = Object.freeze;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a2, b2) => {
for (var prop in b2 || (b2 = {}))
if (__hasOwnProp.call(b2, prop))
__defNormalProp(a2, prop, b2[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b2)) {
if (__propIsEnum.call(b2, prop))
__defNormalProp(a2, prop, b2[prop]);
}
return a2;
};
var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
var __async = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e2) {
reject(e2);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e2) {
reject(e2);
}
};
var step = (x2) => x2.done ? resolve(x2.value) : Promise.resolve(x2.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
var _a, _b, _c, _d, _e2, _f, _a2, _b2, _c2, _d2, _e3, _f2, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J;
function e(e2 = {}) {
const t2 = (() => {
var _a3;
try {
if ("undefined" != typeof window && void 0 !== import.meta && E) return { backendUrl: E.VITE_BACKEND_URL, nodeEnv: (_a3 = E.NODE_ENV) != null ? _a3 : E.MODE };
} catch (d2) {
}
return "undefined" != typeof process && process.env ? { backendUrl: process.env.BACKEND_URL || process.env.VITE_BACKEND_URL || "", nodeEnv: "production", useMock: "true" === process.env.VITE_USE_MOCK } : { backendUrl: "http://localhost:8080/api", nodeEnv: "development", useMock: 0 };
})();
if ("test" === t2.nodeEnv) {
const t3 = z.getInstance();
return e2.serviceKey && t3.setServiceKey(e2.serviceKey), t3;
}
const i2 = C.getInstance(t2.backendUrl);
return e2.serviceKey && i2.setServiceKey(e2.serviceKey), i2;
}
function t() {
return M || (M = e()), M;
}
function i() {
M = null;
}
function s(t2) {
return M = e(t2), M;
}
function o(e2, t2) {
if (!ce(e2) || !e2.hasOwnProperty("raw")) throw Error("invalid template strings array");
return void 0 !== ee ? ee.createHTML(t2) : t2;
}
function n(e2, t2, i2 = e2, s2) {
var _a3, _b3, _c3;
if (t2 === ye) return t2;
let o2 = void 0 !== s2 ? (_a3 = i2.i) == null ? void 0 : _a3[s2] : i2.m;
const r2 = ae(t2) ? void 0 : t2.v;
return (o2 == null ? void 0 : o2.constructor) !== r2 && ((_b3 = o2 == null ? void 0 : o2.S) == null ? void 0 : _b3.call(o2, 0), void 0 === r2 ? o2 = void 0 : (o2 = new r2(e2), o2.A(e2, i2, s2)), void 0 !== s2 ? ((_c3 = i2.i) != null ? _c3 : i2.i = [])[s2] = o2 : i2.m = o2), void 0 !== o2 && (t2 = n(e2, o2.I(e2, t2.values), o2, s2)), t2;
}
function r() {
if (document.querySelector("#sherpa-css-reset")) return;
const e2 = document.createElement("style");
e2.id = "sherpa-css-reset", e2.textContent = De.cssText, document.head.insertBefore(e2, document.head.firstChild);
}
function a() {
const e2 = document.querySelector("#sherpa-css-reset");
e2 && e2.remove();
}
function c(e2) {
return (t2, i2) => "object" == typeof i2 ? je(e2, t2, i2) : ((e3, t3, i3) => {
const s2 = t3.hasOwnProperty(i3);
return t3.constructor.createProperty(i3, e3), s2 ? Object.getOwnPropertyDescriptor(t3, i3) : void 0;
})(e2, t2, i2);
}
function l(e2) {
return c(__spreadProps(__spreadValues({}, e2), { state: 1, attribute: 0 }));
}
function d(e2) {
return (t2, i2) => ((e3, t3, i3) => (i3.configurable = 1, i3.enumerable = 1, Reflect.decorate && "object" != typeof t3 && Object.defineProperty(e3, t3, i3), i3))(t2, i2, { get() {
return ((t3) => {
var _a3, _b3;
return (_b3 = (_a3 = t3.renderRoot) == null ? void 0 : _a3.querySelector(e2)) != null ? _b3 : null;
})(this);
} });
}
var p, h, u, m, b, g, f, y, x, v, w, k;
const S = {}, T = { docs_dashboard_filters: { type: "DOCS", id: "docs_dashboard_filters", title: "Dashboard Filter Usage Guide", description: "Learn how to use dashboard filters effectively to analyze your data...", externalUrl: "https://help.example.com/dashboard-filters" }, docs_notification_settings: { type: "DOCS", id: "docs_notification_settings", title: "Notification Settings Guide", description: "Configure your notification preferences and manage alerts...", internalHtml: "\n <h1>Notification Settings Guide</h1>\n <p>Configure your notification preferences and manage alerts effectively.</p>\n <h2>Email Notifications</h2>\n <ul>\n <li>Daily digest emails</li>\n <li>Real-time alerts</li>\n <li>Weekly summaries</li>\n </ul>\n <h2>Push Notifications</h2>\n <p>Enable push notifications for mobile devices to stay updated on the go.</p>\n <h2>Slack Integration</h2>\n <p>Connect your Slack workspace to receive notifications directly in your channels.</p>\n " }, docs_report_creation: { type: "DOCS", id: "docs_report_creation", title: "Creating Custom Reports", description: "Step-by-step guide to creating custom reports and analytics...", internalHtml: '\n <h1>Creating Custom Reports</h1>\n <p>Learn how to create powerful custom reports to analyze your data.</p>\n <h2>Getting Started</h2>\n <ol>\n <li>Navigate to the Reports section</li>\n <li>Click "Create New Report"</li>\n <li>Select your data source</li>\n <li>Choose visualization type</li>\n </ol>\n <h2>Advanced Features</h2>\n <ul>\n <li>Custom filters and grouping</li>\n <li>Scheduled report delivery</li>\n <li>Export options (PDF, Excel, CSV)</li>\n </ul>\n ' }, docs_getting_started: { type: "DOCS", id: "docs_getting_started", title: "Getting Started Guide", description: "Welcome! This guide will help you get started with our platform...", externalUrl: "https://guide.flex.team/ko/articles/10256534-%EA%B3%B5%EC%A7%80%EC%82%AC%ED%95%AD-%EC%9E%91%EC%84%B1%ED%95%98%EA%B8%B0" }, docs_advanced_features: { type: "DOCS", id: "docs_advanced_features", title: "Advanced Features Overview", description: "Discover advanced functionality and expert tips...", internalHtml: "\n <h1>Advanced Features Overview</h1>\n <p>Discover advanced functionality and expert tips to maximize your productivity.</p>\n <h2>Automation</h2>\n <p>Set up automated workflows to streamline repetitive tasks.</p>\n <h2>API Integration</h2>\n <p>Connect with external services using our comprehensive API.</p>\n <h2>Custom Dashboards</h2>\n <p>Build personalized dashboards with drag-and-drop widgets.</p>\n <h2>Team Collaboration</h2>\n <p>Share resources and collaborate effectively with team members.</p>\n " } }, A = { 테스트: { serviceKey: "demo-service", id: "3511354f-af9a-484f-97b1-447852b63268", title: "폴리시에 새 멤버 추가하기", description: "폴리시에 새로운 멤버를 추가할 수 있습니다.", status: "published", buildUrl: "https://app.spendit.kr/policy/85310895/members", triggering: {}, schemaVersion: "1.0.0", questions: ["초대할 팀원의 이메일 주소를 입력해주세요."], createdAt: "2025-06-16T07:57:09.657177Z", createdBy: "user", updatedAt: "2025-06-16T07:57:09.657190Z", updatedBy: "user", steps: [{ id: "6b67be3f-ded2-4321-b753-72aeb471c441", stepId: 0, selector: { primary: "div.sc-gjLLEI > button:nth-child(1)", fallback: { xpath: '//button[normalize-space(text())="멤버 추가"]', css: null, query: 'tag:button and text:"멤버 추가" and class:sc-ifyrAs and visible and enabled' } }, element: { tagName: "button", type: "button", id: null, name: null, placeholder: null, value: null, textContent: "멤버 추가", innerHTML: '<i url="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAN5JREFUSA3tVTsOwjAMja2Kc3GFngGWwgAzYkTMMEAXOANX4FwMMYlEpchpmjiQiXSp38vzR69WCkr4LHaXDSKe3DSt9fZ+XJ9dLhZjTFDqvDYu5axXt1rtWVKKqFaXctarK7YaEF+8yhjHNRyDvXs5GcIASOZsDqBaV0OkHgY/iTS4/FTc8At/Shw6+wzSmsFCEo9PV3qp3xH/17ixP/FU0365XMlbOAy33PedSboO2L7Nqq9uh653uVgs/sak9YwXHeO4hmNxY14gF9fGuc6J86rVYstyE6rVuc6J896QMCzHI66TyQAAAABJRU5ErkJggg==" width="10" height="10" class="sc-guDLey egWNJi"></i><span>멤버 추가</span>', outerHTML: '<button buttontype="line-default" type="button" class="sc-ifyrAs sc-dJGMql kUamLq jNcJqv"><i url="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAN5JREFUSA3tVTsOwjAMja2Kc3GFngGWwgAzYkTMMEAXOANX4FwMMYlEpchpmjiQiXSp38vzR69WCkr4LHaXDSKe3DSt9fZ+XJ9dLhZjTFDqvDYu5axXt1rtWVKKqFaXctarK7YaEF+8yhjHNRyDvXs5GcIASOZsDqBaV0OkHgY/iTS4/FTc8At/Shw6+wzSmsFCEo9PV3qp3xH/17ixP/FU0365XMlbOAy33PedSboO2L7Nqq9uh653uVgs/sak9YwXHeO4hmNxY14gF9fGuc6J86rVYstyE6rVuc6J896QMCzHI66TyQAAAABJRU5ErkJggg==" width="10" height="10" class="sc-guDLey egWNJi"></i><span>멤버 추가</span></button>', attributes: { type: "button", class: "sc-ifyrAs sc-dJGMql kUamLq jNcJqv", buttontype: "line-default" }, aria: {}, dataset: {}, classList: ["sc-ifyrAs", "sc-dJGMql", "kUamLq", "jNcJqv"], boundingRect: { x: 167, y: 202, width: 84.890625, height: 30 } }, actionType: "click", guide: { placement: { translate: { x: 20, y: 0 }, targetSize: { width: 84.890625, height: 30 }, direction: { x: "right", y: "center" } }, type: "beacon" }, logic: { condition: {}, disableNext: 0, disablePrev: 1 }, pageChange: null, delayMs: 0, metadata: { llmGenerated: 1 }, createdAt: "2025-06-16T07:57:10.611049Z", updatedAt: "2025-06-16T07:57:10.611049Z" }, { id: "2e77a4f3-16bd-4b5a-9a4d-e31829bf816b", stepId: 1, selector: { primary: "div.sc-cUPRRX > button:nth-child(1)", fallback: { xpath: '//button[normalize-space(text())="새 멤버 초대스팬딧에 아직 가입하지 않은새 멤버를 초대합니다."]', css: "button.gGQimM", query: 'tag:button and text:"새 멤버 초대스팬딧에 아직 가입하지 않은새 멤버를 초대합니다." and class:sc-fMeROS and visible and enabled' } }, element: { tagName: "button", type: "button", id: null, name: null, placeholder: null, value: null, textContent: "새 멤버 초대스팬딧에 아직 가입하지 않은새 멤버를 초대합니다.", innerHTML: '<span class="sc-dHLqeo kQZbUe">새 멤버 초대</span><i url="/dc41d63e515b6a767d64040f25dc126c.svg" width="30" height="24" class="sc-guDLey ewRZjK"></i><span class="sc-jEZPox ejnvco"><span>스팬딧에 아직 가입하지 않은<br>새 멤버를 초대합니다.</span></span>', outerHTML: '<button type="button" class="sc-fMeROS gROjbw"><span class="sc-dHLqeo kQZbUe">새 멤버 초대</span><i url="/dc41d63e515b6a767d64040f25dc126c.svg" width="30" height="24" class="sc-guDLey ewRZjK"></i><span class="sc-jEZPox ejnvco"><span>스팬딧에 아직 가입하지 않은<br>새 멤버를 초대합니다.</span></span></button>', attributes: { type: "button", class: "sc-fMeROS gROjbw" }, aria: {}, dataset: {}, classList: ["sc-fMeROS", "gROjbw"], boundingRect: { x: 557.5, y: 231, width: 204, height: 144.015625 } }, actionType: "click", guide: { placement: { translate: { x: 20, y: 0 }, targetSize: { width: 204, height: 144.015625 }, direction: { x: "right", y: "center" } }, type: "beacon" }, logic: { condition: {}, disableNext: 0, disablePrev: 0 }, pageChange: null, delayMs: 0, metadata: { llmGenerated: 1 }, createdAt: "2025-06-16T07:57:10.611049Z", updatedAt: "2025-06-16T07:57:10.611049Z" }, { id: "1923e390-9a44-4d65-b22f-b6c5cc007a03", stepId: 2, selector: { primary: 'button[buttonsize="medium"][buttontype="primary"][type="button"]', fallback: { xpath: '//button[normalize-space(text())="다음"]', css: "div.sc-dmXWDj > button:nth-child(2)", query: 'tag:button and text:"다음" and class:sc-ifyrAs and visible and enabled' } }, element: { tagName: "button", type: "button", id: null, name: null, placeholder: null, value: null, textContent: "확인", innerHTML: "확인", outerHTML: '<button disabled="" buttonsize="medium" buttontype="primary" type="button" class="sc-ifyrAs sc-dJGMql kUamLq ftVNsq">확인</button>', attributes: { type: "button", class: "sc-ifyrAs sc-dJGMql kUamLq ftVNsq", disabled: "", buttonsize: "medium", buttontype: "primary" }, aria: {}, dataset: {}, classList: ["sc-ifyrAs", "sc-dJGMql", "kUamLq", "ftVNsq"], boundingRect: { x: 1050.734375, y: 426, width: 43.765625, height: 33 } }, actionType: "click", guide: { placement: { translate: { x: -20, y: 0 }, targetSize: { width: 43.765625, height: 33 }, direction: { x: "left", y: "center" } }, type: "beacon" }, logic: { condition: {}, disableNext: 0, disablePrev: 0 }, pageChange: null, delayMs: 0, metadata: { llmGenerated: 1 }, createdAt: "2025-06-16T07:57:10.611049Z", updatedAt: "2025-06-16T07:57:10.611049Z" }, { id: "d3391f98-768c-4de1-ad0c-aea734e411a3", stepId: 3, selector: { primary: 'input[styles="\\[object\\ Object\\]"][placeholder="이메일\\ 주소를\\ 입력해주세요"][type="text"]', fallback: { xpath: "/body/div[2]/div[2]/div/div/div/div/div[2]/div/ul/li/input", css: "input.dicSRm", query: "tag:input and class:sc-imiRDh and visible and enabled" } }, element: { tagName: "input", type: "text", id: null, name: null, placeholder: "이메일 주소를 입력해주세요", value: "oung1002@naver.com ", textContent: null, innerHTML: "", outerHTML: '<input class="sc-imiRDh dicSRm sc-eIPYkq kJkAq" styles="[object Object]" placeholder="이메일 주소를 입력해주세요" type="text" value="oung1002@naver.com ">', attributes: { type: "text", class: "sc-imiRDh dicSRm sc-eIPYkq kJkAq", value: "oung1002@naver.com ", styles: "[object Object]", placeholder: "이메일 주소를 입력해주세요" }, aria: {}, dataset: {}, classList: ["sc-imiRDh", "dicSRm", "sc-eIPYkq", "kJkAq"], boundingRect: { x: 567.5, y: 243, width: 195, height: 19 } }, actionType: "input", guide: { placement: { translate: { x: 20, y: 0 }, targetSize: { width: 195, height: 19 }, direction: { x: "right", y: "center" } }, type: "tooltip", content: "업무용 이메일 입력 시, 신규 멤버에게 정책 초대장이 발송되어 협업이 신속하게 시작됩니다. 실제 사용하는 회사 이메일을 입력하면 승인 속도가 빨라집니다.", width: 300, recommendation: { type: "input", value: ["oung1002@naver.com"], options: null, inputSelector: { primary: 'input[styles="\\[object\\ Object\\]"][placeholder="이메일\\ 주소를\\ 입력해주세요"][type="text"]', fallback: { xpath: "/body/div[2]/div[2]/div/div/div/div/div[2]/div/ul/li/input", css: "input.dicSRm", query: "tag:input and class:sc-imiRDh and visible and enabled" } }, optionSelector: { primary: 'input[styles="\\[object\\ Object\\]"][placeholder="이메일\\ 주소를\\ 입력해주세요"][type="text"]', fallback: { xpath: "/body/div[2]/div[2]/div/div/div/div/div[2]/div/ul/li/input", css: "input.dicSRm", query: "tag:input and class:sc-imiRDh and visible and enabled" } } } }, logic: { condition: {}, disableNext: 0, disablePrev: 0 }, pageChange: null, delayMs: 0, metadata: { llmGenerated: 1 }, createdAt: "2025-06-16T07:57:10.611049Z", updatedAt: "2025-06-16T07:57:10.611049Z" }], totalSteps: 4 }, "basic-tour": { id: "basic-tour", serviceKey: "service-1", title: "Basic User Profile Tour", description: "A simple tour covering basic form interactions and user information entry", status: "published", buildUrl: "http://localhost:4000/dev/demos/features/", questions: [], steps: [{ id: "basic-step-1", tourId: "basic-tour", stepId: 0, actionType: "read", selector: { primary: "#username", fallback: { css: 'input[name="username"]' } }, guide: { type: "tooltip", content: "Let's start with the basics! Enter your username in this field.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#username", fallback: { css: 'input[name="username"]' } } } }, { id: "basic-step-2", tourId: "basic-tour", stepId: 1, actionType: "input", selector: { primary: "#email", fallback: { css: 'input[name="email"]' } }, guide: { type: "tooltip", content: "Now add your email address for account notifications.", placement: { translate: { x: 0, y: -10 }, targetSize: { width: 300, height: 40 }, direction: { x: "left", y: "top" } }, recommendation: { type: "input", value: ["user@example.com"], inputSelector: { primary: "#email", fallback: { css: 'input[name="email"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#email", fallback: { css: 'input[name="email"]' } } } }, { id: "basic-step-3", tourId: "basic-tour", stepId: 2, actionType: "click", selector: { primary: "#save-profile", fallback: { css: ".success-button" } }, guide: { type: "beacon", placement: { translate: { x: 0, y: -5 }, targetSize: { width: 120, height: 40 }, direction: { x: "center", y: "top" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#save-profile", fallback: { css: ".success-button" } } } }], triggering: { shareableLink: "?sherpa=basic-tour" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "radix-ui-basic": { id: "radix-ui-basic", serviceKey: "test-service", title: "Radix UI Basic Components Tour", description: "A guided tour through basic Radix UI components", status: "published", buildUrl: "http://localhost:4000/tests/fixtures/radix-ui-react.html", steps: [{ id: "radix-step-1", tourId: "radix-ui-basic", stepId: 0, actionType: "read", selector: { primary: '[data-testid="radix-checkbox-basic"]', fallback: { css: ".checkbox-root" } }, guide: { type: "tooltip", content: "Welcome to the Radix UI components tour! Let's start with this checkbox component.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 200, height: 40 }, direction: { x: "right", y: "center" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: '[data-testid="radix-checkbox-basic"]', fallback: { css: ".checkbox-root" } } }, delayMs: 0 }, { id: "radix-step-2", tourId: "radix-ui-basic", stepId: 1, actionType: "input", selector: { primary: '[data-testid="radix-checkbox-basic"]', fallback: { css: ".checkbox-root" } }, guide: { type: "tooltip", content: "Click this checkbox to see how it changes state. Notice how the component updates smoothly.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 200, height: 40 }, direction: { x: "right", y: "center" } }, recommendation: { type: "checkbox", value: ["true"], inputSelector: { primary: '[data-testid="radix-checkbox-basic"]', fallback: { css: ".checkbox-root" } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: '[data-testid="radix-checkbox-basic"]', fallback: { css: ".checkbox-root" } } }, delayMs: 500 }, { id: "radix-step-3", tourId: "radix-ui-basic", stepId: 2, actionType: "input", selector: { primary: '[data-testid="radix-radio-option-1"]', fallback: { css: ".radio-root" } }, guide: { type: "tooltip", content: "Now let's try a radio button. Click here to select Option 1.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 200, height: 40 }, direction: { x: "right", y: "center" } }, recommendation: { type: "radio", value: ["option1"], inputSelector: { primary: '[data-testid="radix-radio-option-1"]', fallback: { css: ".radio-root" } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: '[data-testid="radix-radio-option-1"]', fallback: { css: ".radio-root" } } }, delayMs: 500 }, { id: "radix-step-4", tourId: "radix-ui-basic", stepId: 3, actionType: "read", selector: { primary: '[data-testid="radix-component-states"]', fallback: { css: ".states-display" } }, guide: { type: "tooltip", content: "Great! Check out this states display to see how your interactions have updated the component states in real-time.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 400, height: 200 }, direction: { x: "center", y: "top" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: '[data-testid="radix-component-states"]', fallback: { css: ".states-display" } } }, delayMs: 1e3 }], triggering: { shareableLink: "?sherpa=radix-ui-basic" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "radix-ui-advanced": { id: "radix-ui-advanced", serviceKey: "test-service", title: "Radix UI Advanced Components Tour", description: "An advanced tour covering all Radix UI components", status: "published", buildUrl: "http://localhost:4000/tests/fixtures/radix-ui-react.html", steps: [{ id: "radix-adv-step-1", tourId: "radix-ui-advanced", stepId: 0, actionType: "input", selector: { primary: '[data-testid="radix-select-basic"]', fallback: { css: ".select-trigger" } }, guide: { type: "tooltip", content: "Welcome to the advanced tour! Let's start with the select component. Click to open the dropdown.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 200, height: 40 }, direction: { x: "right", y: "center" } }, recommendation: { type: "select", value: ["option2"], inputSelector: { primary: '[data-testid="radix-select-basic"]', fallback: { css: ".select-trigger" } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: '[data-testid="radix-select-basic"]', fallback: { css: ".select-trigger" } } }, delayMs: 0 }, { id: "radix-adv-step-2", tourId: "radix-ui-advanced", stepId: 1, actionType: "input", selector: { primary: '[data-testid="radix-switch-basic"]', fallback: { css: ".switch-root" } }, guide: { type: "tooltip", content: "Now let's toggle this switch. Switches are great for binary settings.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 150, height: 40 }, direction: { x: "right", y: "center" } }, recommendation: { type: "checkbox", value: ["true"], inputSelector: { primary: '[data-testid="radix-switch-basic"]', fallback: { css: ".switch-root" } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: '[data-testid="radix-switch-basic"]', fallback: { css: ".switch-root" } } }, delayMs: 500 }, { id: "radix-adv-step-3", tourId: "radix-ui-advanced", stepId: 2, actionType: "input", selector: { primary: '[data-testid="toggle-left"]', fallback: { css: ".toggle-group-item" } }, guide: { type: "tooltip", content: "Try clicking on the toggle button group. These are useful for segmented controls.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 100, height: 40 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: '[data-testid="toggle-left"]', fallback: { css: ".toggle-group-item" } } }, delayMs: 500 }, { id: "radix-adv-step-4", tourId: "radix-ui-advanced", stepId: 3, actionType: "input", selector: { primary: '[data-testid="radix-tab-3"]', fallback: { css: ".tabs-trigger" } }, guide: { type: "tooltip", content: "Finally, let's switch to Tab 3 to see how tabs work in Radix UI.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 100, height: 40 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: '[data-testid="radix-tab-3"]', fallback: { css: ".tabs-trigger" } } }, delayMs: 500 }, { id: "radix-adv-step-5", tourId: "radix-ui-advanced", stepId: 4, actionType: "read", selector: { primary: '[data-testid="radix-tab-panel-3"]', fallback: { css: ".tabs-content" } }, guide: { type: "tooltip", content: "Perfect! You've completed the advanced tour. Notice how all the component states are tracked and displayed below.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 100 }, direction: { x: "center", y: "center" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: '[data-testid="radix-tab-panel-3"]', fallback: { css: ".tabs-content" } } }, delayMs: 1e3 }], triggering: { shareableLink: "?sherpa=radix-ui-advanced" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "edge-cases-tour": { id: "edge-cases-tour", serviceKey: "service-1", title: "Edge Cases & Complex Interactions Tour", description: "Comprehensive tour testing multiple checkboxes, complex recommendations, and edge scenarios", status: "published", buildUrl: "http://localhost:4000/dev/demos/features/", steps: [{ id: "edge-step-2", tourId: "edge-cases-tour", stepId: 0, actionType: "input", selector: { primary: "#notification-preferences-group", fallback: { css: ".checkbox-group" } }, guide: { type: "tooltip", content: "Watch as we select multiple notification preferences simultaneously. This tests the SDK's multi-checkbox recommendation capability.", placement: { translate: { x: 0, y: -10 }, targetSize: { width: 400, height: 120 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "checkbox", value: ["email", "sms", "push"], inputSelector: { primary: 'input[name="notifications"]', fallback: { css: '.checkbox-group input[type="checkbox"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#notification-preferences", fallback: { css: ".checkbox-group" } }, disableNext: 1, disablePrev: 1 }, delayMs: 500 }, { id: "edge-step-3", tourId: "edge-cases-tour", stepId: 1, actionType: "input", selector: { primary: "#feature-access", fallback: { css: ".checkbox-group" } }, guide: { type: "tooltip", content: "Now let's test feature access selections. We'll enable advanced features for power users.", placement: { translate: { x: 0, y: -10 }, targetSize: { width: 400, height: 100 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "checkbox", value: ["analytics", "reporting", "api"], inputSelector: { primary: 'input[name="features"]', fallback: { css: '#feature-access input[type="checkbox"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#feature-access", fallback: { css: ".checkbox-group" } } }, delayMs: 300 }, { id: "edge-step-4", tourId: "edge-cases-tour", stepId: 2, actionType: "click", selector: { primary: "#beacon-primary", fallback: { css: ".beacon-target" } }, guide: { type: "beacon", placement: { translate: { x: 0, y: -10 }, targetSize: { width: 200, height: 50 }, direction: { x: "center", y: "top" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#beacon-primary", fallback: { css: ".beacon-target" } } }, delayMs: 200 }, { id: "edge-step-5", tourId: "edge-cases-tour", stepId: 3, actionType: "read", selector: { primary: "#tooltip-positioned", fallback: { css: ".tooltip-target" } }, guide: { type: "tooltip", content: "This demonstrates precise tooltip positioning with complex content. The SDK can handle various placement scenarios and content lengths.", placement: { translate: { x: 20, y: -15 }, targetSize: { width: 350, height: 80 }, direction: { x: "right", y: "top" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#tooltip-positioned", fallback: { css: ".tooltip-target" } } }, delayMs: 300 }, { id: "edge-step-6", tourId: "edge-cases-tour", stepId: 5, actionType: "input", selector: { primary: "#nested-input-a", fallback: { css: 'input[name="nestedA"]' } }, guide: { type: "tooltip", content: "Testing nested form interactions. This input is within a complex grid layout.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "input", value: ["Nested value A"], inputSelector: { primary: "#nested-input-a", fallback: { css: 'input[name="nestedA"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#nested-input-a", fallback: { css: 'input[name="nestedA"]' } } } }], triggering: { shareableLink: "?sherpa=edge-cases-tour" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "personalization-tour": { id: "personalization-tour", serviceKey: "service-1", title: "Dynamic Personalization Tour", description: "Dynamic tour that adapts content based on user experience level, use case, and urgency", status: "published", buildUrl: "http://localhost:4000/dev/demos/features/", questions: ["What is your experience level with this platform?", "What is your primary use case?", "How urgent is your current task?", "Any specific features you want to focus on?"], steps: [{ id: "personal-step-1", tourId: "personalization-tour", stepId: 0, actionType: "input", selector: { primary: "#user-experience", fallback: { css: 'select[name="experience"]' } }, guide: { type: "tooltip", content: "This tour will adapt based on your selections. Let's start by setting your experience level.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "select", value: ["intermediate"], inputSelector: { primary: "#user-experience", fallback: { css: 'select[name="experience"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#user-experience", fallback: { css: 'select[name="experience"]' } } } }, { id: "personal-step-2", tourId: "personalization-tour", stepId: 1, actionType: "input", selector: { primary: "#use-case", fallback: { css: 'select[name="useCase"]' } }, guide: { type: "tooltip", content: "Your use case will influence the recommendations. Choose what best describes your needs.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "select", value: ["business"], inputSelector: { primary: "#use-case", fallback: { css: 'select[name="useCase"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#use-case", fallback: { css: 'select[name="useCase"]' } } } }, { id: "personal-step-3", tourId: "personalization-tour", stepId: 2, actionType: "input", selector: { primary: "#urgency", fallback: { css: 'select[name="urgency"]' } }, guide: { type: "tooltip", content: "Task urgency affects the pace and depth of guidance. Set your priority level.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "select", value: ["medium"], inputSelector: { primary: "#urgency", fallback: { css: 'select[name="urgency"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#urgency", fallback: { css: 'select[name="urgency"]' } } } }, { id: "personal-step-4", tourId: "personalization-tour", stepId: 3, actionType: "read", selector: { primary: "#bio", fallback: { css: 'textarea[name="bio"]' } }, guide: { type: "tooltip", content: "Based on your selections (Intermediate, Business, Medium Priority), here's a personalized tip: Focus on building a professional bio that highlights your business expertise.", placement: { translate: { x: 0, y: 10 }, targetSize: { width: 400, height: 120 }, direction: { x: "center", y: "top" } }, recommendation: { type: "input", value: ["Experienced business professional focused on driving growth and innovation through strategic technology implementations."], inputSelector: { primary: "#bio", fallback: { css: 'textarea[name="bio"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#bio", fallback: { css: 'textarea[name="bio"]' } } } }], triggering: { shareableLink: "?sherpa=personalization-tour" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "conditional-tour": { id: "conditional-tour", serviceKey: "service-1", title: "Conditional Logic & Dynamic Content Tour", description: "Advanced tour demonstrating conditional logic, dynamic content, and complex flows", status: "published", buildUrl: "http://localhost:4000/dev/demos/features/", steps: [{ id: "conditional-step-1", tourId: "conditional-tour", stepId: 0, actionType: "input", selector: { primary: "#conditional-trigger", fallback: { css: 'select[name="conditionalTrigger"]' } }, guide: { type: "tooltip", content: "This tour demonstrates conditional logic. Select an option to see how the interface adapts dynamically.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 350, height: 60 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "select", value: ["show-advanced"], inputSelector: { primary: "#conditional-trigger", fallback: { css: 'select[name="conditionalTrigger"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#conditional-trigger", fallback: { css: 'select[name="conditionalTrigger"]' } } } }, { id: "conditional-step-2", tourId: "conditional-tour", stepId: 1, actionType: "input", selector: { primary: "#advanced-setting", fallback: { css: 'input[name="advancedSetting"]' } }, guide: { type: "tooltip", content: "Great! The advanced options appeared. This demonstrates conditional UI visibility based on user choices.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "input", value: ["Advanced configuration enabled"], inputSelector: { primary: "#advanced-setting", fallback: { css: 'input[name="advancedSetting"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#advanced-setting", fallback: { css: 'input[name="advancedSetting"]' } } } }, { id: "conditional-step-3", tourId: "conditional-tour", stepId: 2, actionType: "click", selector: { primary: "#add-dynamic-content", fallback: { css: "button" } }, guide: { type: "beacon", placement: { translate: { x: 0, y: -5 }, targetSize: { width: 160, height: 40 }, direction: { x: "center", y: "top" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#add-dynamic-content", fallback: { css: "button" } } } }, { id: "conditional-step-4", tourId: "conditional-tour", stepId: 3, actionType: "read", selector: { primary: "#dynamic-content", fallback: { css: ".dynamic-content" } }, guide: { type: "tooltip", content: "Notice how new content was added dynamically. The SDK can handle tours that interact with changing DOM content.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 400, height: 100 }, direction: { x: "center", y: "center" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#dynamic-content", fallback: { css: ".dynamic-content" } } }, delayMs: 500 }], triggering: { shareableLink: "?sherpa=conditional-tour" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "missing-element-tour": { id: "missing-element-tour", serviceKey: "service-1", title: "Missing Element Error Tour", description: "Tour that targets non-existent elements to test error handling", status: "published", buildUrl: "http://localhost:4000/dev/demos/features/", steps: [{ id: "missing-step-1", tourId: "missing-element-tour", stepId: 0, actionType: "read", selector: { primary: "#non-existent-element", fallback: { css: ".does-not-exist" } }, guide: { type: "tooltip", content: "This step should trigger an error because the target element doesn't exist.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#non-existent-element", fallback: { css: ".does-not-exist" } } } }], triggering: { shareableLink: "?sherpa=missing-element-tour" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "invalid-selector-tour": { id: "invalid-selector-tour", serviceKey: "service-1", title: "Invalid Selector Error Tour", description: "Tour with invalid CSS selectors to test error handling", status: "published", buildUrl: "http://localhost:4000/dev/demos/features/", steps: [{ id: "invalid-step-1", tourId: "invalid-selector-tour", stepId: 0, actionType: "read", selector: { primary: "###invalid:::selector", fallback: { css: "[[[malformed" } }, guide: { type: "tooltip", content: "This step has an invalid CSS selector and should trigger an error.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "###invalid:::selector", fallback: { css: "[[[malformed" } } } }], triggering: { shareableLink: "?sherpa=invalid-selector-tour" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "demo-tour": { id: "demo-tour", serviceKey: "service-1", title: "Complete Product Tour Complete Product Tour Complete Product Tour", description: "A comprehensive demonstration tour showcasing all SDK features including forms, preferences, and advanced interactions", status: "published", buildUrl: "http://localhost:4000/dev/demos/features/", steps: [{ id: "step-1", tourId: "demo-tour", stepId: 0, actionType: "read", selector: { primary: "#username", fallback: { css: 'input[name="username"]' } }, guide: { type: "tooltip", content: "Welcome to the Sherpa SDK demo! Let's start by filling out your profile information. This comprehensive tour will guide you through all the form fields.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#username", fallback: { css: 'input[name="username"]' } } } }, { id: "step-2", tourId: "demo-tour", stepId: 1, actionType: "input", selector: { primary: "#email", fallback: { css: 'input[name="email"]' } }, guide: { type: "tooltip", content: "Now enter your email address. This will be used for notifications and account recovery.", placement: { translate: { x: 0, y: -10 }, targetSize: { width: 300, height: 40 }, direction: { x: "left", y: "top" } }, recommendation: { type: "input", value: ["john.doe@company.com"], inputSelector: { primary: "#email", fallback: { css: 'input[name="email"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#email", fallback: { css: 'input[name="email"]' } } } }, { id: "step-3", tourId: "demo-tour", stepId: 2, actionType: "input", selector: { primary: "#role", fallback: { css: 'select[name="role"]' } }, guide: { type: "tooltip", content: "Select your role in the organization. This helps customize your experience.", placement: { translate: { x: 0, y: 5 }, targetSize: { width: 300, height: 40 }, direction: { x: "right", y: "top" } }, recommendation: { type: "select", value: ["manager"], inputSelector: { primary: "#role", fallback: { css: 'select[name="role"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#role", fallback: { css: 'select[name="role"]' } } }, delayMs: 0 }, { id: "step-4", tourId: "demo-tour", stepId: 3, actionType: "input", selector: { primary: "#department", fallback: { css: 'select[name="department"]' } }, guide: { type: "tooltip", content: "Choose your department. This information helps us provide relevant content and features.", placement: { translate: { x: 0, y: 5 }, targetSize: { width: 300, height: 40 }, direction: { x: "left", y: "top" } }, recommendation: { type: "select", value: ["engineering"], inputSelector: { primary: "#department", fallback: { css: 'select[name="department"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#department", fallback: { css: 'select[name="department"]' } } }, delayMs: 0 }, { id: "step-5", tourId: "demo-tour", stepId: 4, actionType: "input", selector: { primary: "#email-notifications", fallback: { css: 'input[value="email"]' } }, guide: { type: "tooltip", content: "Configure your notification preferences. We recommend enabling email notifications to stay updated.", placement: { translate: { x: 0, y: -5 }, targetSize: { width: 350, height: 100 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "checkbox", value: ["email"], inputSelector: { primary: "#email-notifications", fallback: { css: 'input[value="email"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#email-notifications", fallback: { css: 'input[value="email"]' } } }, delayMs: 0 }, { id: "step-6", tourId: "demo-tour", stepId: 5, actionType: "input", selector: { primary: "#theme-auto", fallback: { css: 'input[value="auto"]' } }, guide: { type: "tooltip", content: "Choose your preferred theme. We recommend the auto setting which adapts to your system preferences.", placement: { translate: { x: 0, y: -5 }, targetSize: { width: 300, height: 80 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "radio", value: ["auto"], inputSelector: { primary: "#theme-auto", fallback: { css: 'input[value="auto"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#theme-auto", fallback: { css: 'input[value="auto"]' } } }, delayMs: 0 }, { id: "step-7", tourId: "demo-tour", stepId: 6, actionType: "input", selector: { primary: "#bio", fallback: { css: 'textarea[name="bio"]' } }, guide: { type: "tooltip", content: "Tell us about yourself! This bio will be displayed on your profile page and helps others understand your background.", placement: { translate: { x: 0, y: 10 }, targetSize: { width: 400, height: 120 }, direction: { x: "center", y: "top" } }, recommendation: { type: "input", value: ["I am passionate about technology and innovation..."], inputSelector: { primary: "#bio", fallback: { css: 'textarea[name="bio"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#bio", fallback: { css: 'textarea[name="bio"]' } } }, delayMs: 0 }, { id: "step-8", tourId: "demo-tour", stepId: 7, actionType: "click", selector: { primary: "#save-profile", fallback: { css: ".save-btn" } }, guide: { type: "beacon", placement: { translate: { x: 0, y: -5 }, targetSize: { width: 120, height: 40 }, direction: { x: "center", y: "top" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#save-profile", fallback: { css: ".save-btn" } } } }, { id: "step-9", tourId: "demo-tour", stepId: 8, actionType: "click", selector: { primary: "#reset-form", fallback: { css: "button" } }, guide: { type: "tooltip", content: "This button resets the form. Try clicking it to see how the form clears all fields.", placement: { translate: { x: 0, y: -5 }, targetSize: { width: 120, height: 40 }, direction: { x: "center", y: "top" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#reset-form", fallback: { css: "button" } } } }, { id: "step-10", tourId: "demo-tour", stepId: 9, actionType: "read", selector: { primary: "#analytics-log", fallback: { css: ".demo-section" } }, guide: { type: "tooltip", content: "The analytics section shows real-time tracking of user interactions. This is where you can monitor engagement and user behavior patterns.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 400, height: 200 }, direction: { x: "center", y: "center" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#analytics-log", fallback: { css: ".demo-section" } } }, delayMs: 0 }], triggering: { shareableLink: "?sherpa=demo-tour" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "advanced-tour": { id: "advanced-tour", serviceKey: "service-1", title: "Advanced Features Tour", description: "Explore advanced SDK capabilities including conditional flows, complex form interactions, and multi-step workflows", status: "published", buildUrl: "http://localhost:4000/dev/demos/features/", questions: [], steps: [{ id: "adv-step-1", tourId: "advanced-tour", stepId: 0, actionType: "read", selector: { primary: "#export-data", fallback: { css: "button" } }, guide: { type: "tooltip", content: "Welcome to the advanced tour! This showcases complex interactions, conditional flows, and advanced SDK features. Let's start with some quick actions.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 350, height: 60 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#export-data", fallback: { css: "button" } } } }, { id: "adv-step-2", tourId: "advanced-tour", stepId: 1, actionType: "click", selector: { primary: "#export-data", fallback: { css: "button" } }, guide: { type: "beacon", placement: { translate: { x: -5, y: 0 }, targetSize: { width: 120, height: 40 }, direction: { x: "left", y: "center" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#export-data", fallback: { css: "button" } } }, delayMs: 0 }, { id: "adv-step-3", tourId: "advanced-tour", stepId: 2, actionType: "input", selector: { primary: "#push-notifications", fallback: { css: 'input[value="push"]' } }, guide: { type: "tooltip", content: "Now let's quickly fill in multiple fields. Choose multiple notification preferences to see how the SDK handles complex selections.", placement: { translate: { x: 0, y: -10 }, targetSize: { width: 400, height: 120 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "checkbox", value: ["push"], inputSelector: { primary: "#push-notifications", fallback: { css: 'input[value="push"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#push-notifications", fallback: { css: 'input[value="push"]' } } }, delayMs: 0 }, { id: "adv-step-4", tourId: "advanced-tour", stepId: 3, actionType: "input", selector: { primary: "#sms-notifications", fallback: { css: 'input[value="sms"]' } }, guide: { type: "tooltip", content: "Let's also enable SMS notifications for comprehensive coverage.", placement: { translate: { x: 0, y: -5 }, targetSize: { width: 320, height: 80 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "checkbox", value: ["sms"], inputSelector: { primary: "#sms-notifications", fallback: { css: 'input[value="sms"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#sms-notifications", fallback: { css: 'input[value="sms"]' } } }, delayMs: 100 }, { id: "adv-step-5", tourId: "advanced-tour", stepId: 4, actionType: "input", selector: { primary: ".multi-checkbox-demo", fallback: { css: ".checkbox-group" } }, guide: { type: "tooltip", content: "Now let's demonstrate multi-checkbox selection. This recommendation will check multiple checkboxes at once.", placement: { translate: { x: 0, y: -10 }, targetSize: { width: 400, height: 100 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "checkbox", value: ["email", "sms", "push"], inputSelector: { primary: ".notification-preferences", fallback: { css: 'input[name="notifications"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: ".multi-checkbox-demo", fallback: { css: ".checkbox-group" } } }, delayMs: 200 }, { id: "adv-step-6", tourId: "advanced-tour", stepId: 5, actionType: "read", selector: { primary: "#analytics-log", fallback: { css: ".demo-section" } }, guide: { type: "tooltip", content: "Excellent! You've completed the advanced tour showcasing complex workflows, multiple selections, and varied timing. This demonstrates the SDK's capability to handle sophisticated user interactions.", placement: { translate: { x: 0, y: -10 }, targetSize: { width: 400, height: 100 }, direction: { x: "center", y: "top" } } }, logic: { condition: { action: "end", type: "element-doesnt-exist" }, selector: { primary: "#analytics-log", fallback: { css: ".demo-section" } } }, delayMs: 500 }], triggering: { shareableLink: "?sherpa=advanced-tour" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "계정 설정": { id: "advanced-tour", serviceKey: "service-1", title: "초기 계정 세팅", description: "초기 계정 세팅 방법을 안내합니다.", status: "published", buildUrl: "http://localhost:4000/dev/demos/features/", steps: [], triggering: { shareableLink: "?sherpa=advanced-tour" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "home-tour": { id: "home-tour", serviceKey: "demo-service", title: "Home Page Tour", description: "A tour designed for the home page", status: "published", buildUrl: "http://localhost:4000/dev/demos/navigation-test.html", steps: [{ id: "home-step-1", tourId: "home-tour", stepId: 0, actionType: "read", selector: { primary: "#username", fallback: { css: 'input[name="username"]' } }, guide: { type: "tooltip", content: "Welcome to the home page tour! This tour stays on the current page since the buildUrl matches.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#username", fallback: { css: 'input[name="username"]' } } } }, { id: "home-step-2", tourId: "home-tour", stepId: 1, actionType: "input", selector: { primary: "#email", fallback: { css: 'input[name="email"]' } }, guide: { type: "tooltip", content: "Enter your email address here.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } }, recommendation: { type: "input", value: ["demo@example.com"], inputSelector: { primary: "#email", fallback: { css: 'input[name="email"]' } } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#email", fallback: { css: 'input[name="email"]' } } } }], triggering: { shareableLink: "?sherpa=home-tour" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "dashboard-tour": { id: "dashboard-tour", serviceKey: "demo-service", title: "Dashboard Tour", description: "A tour designed for the dashboard page", status: "published", buildUrl: "http://localhost:4000/dev/demos/navigation-test-dashboard.html", steps: [{ id: "dashboard-step-1", tourId: "dashboard-tour", stepId: 0, actionType: "read", selector: { primary: "#dashboard-title", fallback: { css: "h1" } }, guide: { type: "tooltip", content: "Welcome to the dashboard! This tour automatically navigated you here from another page.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#dashboard-title", fallback: { css: "h1" } } } }, { id: "dashboard-step-2", tourId: "dashboard-tour", stepId: 1, actionType: "click", selector: { primary: "#dashboard-button", fallback: { css: "button" } }, guide: { type: "beacon", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 40, height: 40 }, direction: { x: "center", y: "center" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#dashboard-button", fallback: { css: "button" } } } }], triggering: { shareableLink: "?sherpa=dashboard-tour" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "settings-tour": { id: "settings-tour", serviceKey: "demo-service", title: "Settings Tour", description: "A tour designed for the settings page", status: "published", buildUrl: "http://localhost:4000/dev/demos/navigation-test-settings.html", steps: [{ id: "settings-step-1", tourId: "settings-tour", stepId: 0, actionType: "read", selector: { primary: "#settings-panel", fallback: { css: ".settings-container" } }, guide: { type: "tooltip", content: "Welcome to the settings page! Navigation worked perfectly.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#settings-panel", fallback: { css: ".settings-container" } } } }], triggering: { shareableLink: "?sherpa=settings-tour" }, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0" }, "step-redirect-test": { id: "step-redirect-test", serviceKey: "demo-service", title: "Step Redirect Test Tour", description: "A tour to test step redirect functionality on URL changes", status: "published", buildUrl: "http://localhost:4000/dev/demos/navigation-test.html", steps: [{ id: "redirect-step-1", tourId: "step-redirect-test", stepId: 0, actionType: "read", selector: { primary: "#username", fallback: { css: 'input[name="username"]' } }, guide: { type: "tooltip", content: "Step 1: This step has stepRedirects configured. Navigate to /search to test redirect.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#username", fallback: { css: 'input[name="username"]' } }, stepRedirects: [{ type: "url-matched", data: { url: "/search" }, stepId: 2 }, { type: "url-matched", data: { url: "http://localhost:4000/dev/demos/search.html" }, stepId: 2 }] } }, { id: "redirect-step-2", tourId: "step-redirect-test", stepId: 1, actionType: "read", selector: { primary: "#password", fallback: { css: 'input[name="password"]' } }, guide: { type: "tooltip", content: "Step 2: This step uses navigateToStep (legacy). Navigate to /features to test redirect.", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#password", fallback: { css: 'input[name="password"]' } }, stepRedirects: [{ type: "url-matched", data: { url: "/features" }, stepId: 3 }, { type: "url-matched", data: { url: "http://localhost:4000/dev/demos/features.html" }, stepId: 3 }] } }, { id: "redirect-step-3", tourId: "step-redirect-test", stepId: 2, actionType: "read", selector: { primary: "#search-input", fallback: { css: 'input[type="search"]' } }, guide: { type: "tooltip", content: "Step 3: You were redirected here from step 1 when navigating to search page!", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#search-input", fallback: { css: 'input[type="search"]' } } } }, { id: "redirect-step-4", tourId: "step-redirect-test", stepId: 3, actionType: "read", selector: { primary: "#features-list", fallback: { css: ".features" } }, guide: { type: "tooltip", content: "Step 4: You were redirected here from step 2 when navigating to features page!", placement: { translate: { x: 0, y: 0 }, targetSize: { width: 300, height: 40 }, direction: { x: "center", y: "bottom" } } }, logic: { condition: { action: "skip", type: "element-doesnt-exist" }, selector: { primary: "#features-list", fallback: { css: ".features" } } } }], triggering: {}, createdAt: "2024-01-01T00:00:00Z", createdBy: "system", updatedAt: "2024-01-01T00:00:00Z", updatedBy: "system", schemaVersion: "1.0.0", questions: ["What would you like to learn about step redirects?"], totalSteps: 4 } }, I = { "user-123": { userId: "user-123", profile: { name: "John Doe", email: "john@example.com", role: "developer", metadata: { department: "engineering" } }, createdAt: "2024-01-01T00:00:00Z", updatedAt: "2024-01-15T10:30:00Z" } };
class z {
constructor() {
this.analyticsQueue = [], this.serviceKey = null;
}
static getInstance() {
return z.instance || (z.instance = new z()), z.instance;
}
setServiceKey(e2) {
this.serviceKey = e2;
}
getServiceKey() {
return this.serviceKey;
}
getAuthHeaders() {
const e2 = { "Content-Type": "application/json" };
return this.serviceKey && (e2["x-service-key"] = this.serviceKey), e2;
}
getTourById(e2) {
return __async(this, null, function* () {
yield this.delay(200);
const t2 = A[e2];
if (!t2) throw this.createErrorResponse("TOUR_NOT_FOUND", "Tour with ID ".concat(e2, " not found"));
return this.createSuccessResponse({ id: t2.id, serviceKey: t2.serviceKey, title: t2.title, description: t2.description || "", status: t2.status, buildUrl: t2.buildUrl, steps: t2.steps, triggering: t2.triggering, schemaVersion: t2.schemaVersion, createdAt: t2.createdAt, createdBy: t2.createdBy, updatedAt: t2.updatedAt, updatedBy: t2.updatedBy });
});
}
getDocsById(e2) {
return __async(this, null, function* () {
yield this.delay(200);
const t2 = T[e2];
if (!t2) throw this.createErrorResponse("DOCS_NOT_FOUND", "Document with ID ".concat(e2, " not found"));
return this.createSuccessResponse(t2);
});
}
personalize(e2) {
return __async(this, null, function* () {
return yield this.delay(1e3), this.createSuccessResponse({ steps: { "step-1": { content: "맞춤형 가이드: ".concat(e2.context, "에 맞는 설명입니다."), recommendationValue: ["맞춤 값"] } } });
});
}
trackEvent(e2) {
return __async(this, null, function* () {
yield this.delay(50), this.analyticsQueue.push(e2.event);
const t2 = e2.event.sessionId;
return S[t2] || (S[t2] = []), S[t2].push(e2.event), 10 > this.analyticsQueue.length || (yield this.batchTrackEvents({ events: [...this.analyticsQueue] }), this.analyticsQueue = []), this.createSuccessResponse({ queued: 1 });
});
}
batchTrackEvents(e2) {
return __async(this, null, function* () {
yield this.delay(200);
const t2 = [];
let i2 = 0;
return e2.events.forEach((e3, s2) => {
e3.eventName && e3.sessionId ? (S[e3.sessionId] || (S[e3.sessionId] = []), S[e3.sessionId].push(e3), i2++) : t2.push({ eventIndex: s2, error: "Missing required fields: eventName or sessionId" });
}), this.createSuccessResponse({ processed: i2, failed: t2.length, failures: t2.length > 0 ? t2 : void 0 });
});
}
upsertUser(e2) {
return __async(this, null, function* () {
yield this.delay(100);
const t2 = I[e2.userId], i2 = !t2;
return I[e2.userId] = { userId: e2.userId, profile: e2.profile, createdAt: (t2 == null ? void 0 : t2.createdAt) || (/* @__PURE__ */ new Date()).toISOString(), updatedAt: (/* @__PURE__ */ new Date()).toISOString() }, this.createSuccessResponse({ userId: e2.userId, created: i2 });
});
}
getWorkspaceConfig(e2) {
return __async(this, null, function* () {
return yield this.delay(100), this.createSuccessResponse({ workspaceId: e2.workspaceId, name: "Demo Workspace", features: { personalization: 1, analytics: 1, search: 1, maxConcurrentTours: 3 }, rateLimit: { requestsPerMinute: 100, burstLimit: 200 }, branding: { primaryColor: "#3b82f6", logo: "https://example.com/logo.png", fontFamily: "Inter, system-ui, sans-serif" } });
});
}
search(e2) {
return __async(this, null, function* () {
yield this.delay(800), this.getAuthHeaders();
const t2 = [], i2 = e2.query.toLowerCase();
return Object.values(A).forEach((e3) => {
var _a3;
const s2 = e3.title.toLowerCase().includes(i2), o2 = (_a3 = e3.description) == null ? void 0 : _a3.toLowerCase().includes(i2);
(s2 || o2) && t2.push({ type: "TOUR", id: e3.id, title: e3.title, description: e3.description || "", questions: this.generateContextQuestions(e3.title) });
}), (i2.includes("navigation") || i2.includes("url") || i2.includes("test") || i2.includes("네비게이션") || i2.includes("페이지") || i2.includes("이동")) && t2.push({ type: "TOUR", id: "home-tour", title: "Home Page Tour", description: "A tour designed for the home page with URL navigation testing", questions: ["Want to test staying on the same page?", "Need help with home page features?"] }, { type: "TOUR", id: "dashboard-tour", title: "Dashboard Tour", description: "Auto-navigate to dashboard page and explore features", questions: ["Want to explore dashboard features?", "Need help with data visualization?"] }, { type: "TOUR", id: "profile-tour", title: "Profile Tour", description: "Navigate to profile page and learn profile management", questions: ["Need help managing your profile?", "Want to update your information?"] }, { type: "TOUR", id: "settings-tour", title: "Settings Tour", description: "Navigate to settings page and configure your preferences", questions: ["Need help with settings?", "Want to configure preferences?"] }), (i2.includes("가이드") || i2.includes("문서") || i2.includes("계정")) && t2.push({ type: "DOCS", id: "docs-001", title: "어드민 계정 설정 가이드", description: "어드민 계정 설정 방법을 안내합니다." }), (i2.includes("보고서") || i2.includes("지출") || i2.includes("R") || i2.includes("표기")) && t2.push({ type: "FAQ", id: "faq-001", title: "보고서 지출의 R 표기는?", description: "지출에 표기되는 R은 반려, 즉 해당 지출이 포함된 보고서가 반려된 이력이 있다는 표시입니다. 이 지출을 새로운 보고서에 포함하여도 R 표시가 유지됩니다." }), (i2.includes("비밀번호") || i2.includes("로그인") || i2.includes("계정")) && t2.push({ type: "FAQ", id: "faq-002", title: "비밀번호를 잊어버렸어요", description: '로그인 페이지의 "비밀번호 찾기" 버튼을 클릭하고 등록된 이메일을 입력하면 재설정 링크를 보내드립니다.' }), this.createSuccessResponse({ comment: "카드사 계정 비밀번호 변경, 카드 재발급, 또는 공용 법인카드를 다른 사용자가 결제한 경우 등으로 인해 카드 내역이 보이지 않을 수 있어요.", results: t2 });
});
}
getRecommendations(e2) {
return __async(this, null, function* () {
yield this.delay(100);
const t2 = [], i2 = e2.pathname;
return t2.push({ type: "TOUR", id: "테스트", title: "테스트 투어", description: "테스트 투어 설명", questions: ["테스트 투어 질문"] }), i2.includes("dashboard") && t2.push({ type: "TOUR", id: "tour-dashboard", title: "대시보드 둘러보기", description: "대시보드의 주요 기능을 소개합니다.", questions: ["어떤 데이터를 중점적으로 보고 싶으신가요?"] }), i2.includes("계정") && t2.push({ type: "DOCS", id: "docs-settings", title: "계정 설정 가이드", description: "각종 설정 방법을 안내합니다." }), (i2.includes("search") || i2.includes("demo")) && t2.push({ type: "TOUR", id: "home-tour", title: "Home Page Tour", description: "Test URL navigation with home page tour", questions: ["Want to test navigation features?"] }, { type: "TOUR", id: "dashboard-tour", title: "Dashboard Tour", description: "Auto-navigate to dashboard and explore", questions: ["Ready to explore the dashboard?"] }), t2.push({ type: "FAQ", id: "faq-recommended-001", title: "자주 묻는 질문: 계정 설정", description: "계정 설정과 관련된 가장 많이 묻는 질문과 답변입니다." }), this.createSuccessResponse(t2);
});
}
updateUser(e2) {
return __async(this, null, function* () {
yield this.delay(100);
});
}
delay(e2) {
return new Promise((t2) => setTimeout(t2, e2));
}
createSuccessResponse(e2) {
return { data: e2, requestId: this.generateRequestId(), timestamp: Date.now(), version: "1.0.0" };
}
createErrorResponse(e2, t2, i2) {
throw { code: e2, message: t2, details: i2, requestId: this.generateRequestId(), timestamp: Date.now() };
}
generateRequestId() {
return "req_".concat(Date.now(), "_").concat(Math.random().toString(36).substr(2, 9));
}
getAnalyticsQueue() {
return [...this.analyticsQueue];
}
clearAnalyticsQueue() {
this.analyticsQueue = [];
}
getMockSessionAnalytics() {
return __spreadValues({}, S);
}
clearMockSessionAnalytics() {
Object.keys(S).forEach((e2) => {
delete S[e2];
});
}
generateContextQuestions(e2) {
return e2.toLowerCase().includes("analytics") || e2.toLowerCase().includes("report") ? ["What metrics are most important to you?", "How often do you create reports?", "What is your experience level with analytics?", "Any specific reporting needs?"] : e2.toLowerCase().includes("dashboard") ? ["What type of data do you work with most?", "How often do you use dashboards?", "What is your primary role?", "Any specific dashboard features you need help with?"] : e2.toLowerCase().includes("settings") || e2.toLowerCase().includes("config") ? ["What type of settings do you want to configure?", "How frequently do you use this platform?", "What is your primary role?", "Any specific configuration needs?"] : ["What department or team are you in? (HR, Accounting, etc.)", "What would you like to focus on?", "What is your role? (New hire, Manager, Team lead, etc.)", "Any special situations or requirements?"];
}
track(e2) {
return this.trackEvent({ event: e2 });
}
}
class C {
constructor(e2) {
this.serviceKey = null, this.baseURL = e2.endsWith("/") ? e2.slice(0, -1) : e2;
}
static getInstance(e2) {
if (!C.instance) {
if (!e2) throw Error("BaseURL is required for the first instance creation");
C.instance = new C(e2);
}
return C.instance;
}
setServiceKey(e2) {
this.serviceKey = e2;
}
getServiceKey() {
return this.serviceKey;
}
getAuthHeaders() {
const e2 = { "Content-Type": "application/json" };
return this.serviceKey && (e2["x-service-key"] = this.serviceKey), e2;
}
makeRequest(_0) {
return __async(this, arguments, function* (e2, t2 = {}) {
const i2 = "".concat(this.baseURL).concat(e2), s2 = __spreadValues(__spreadValues({}, this.getAuthHeaders()), t2.headers);
let o2 = __spreadValues({}, t2);
if (t2.body && "string" == typeof t2.body) try {
const e3 = JSON.parse(t2.body);
o2.body = JSON.stringify(e3);
} catch (d2) {
o2.body = t2.body;
}
try {
const e3 = yield fetch(i2, __spreadProps(__spreadValues({}, o2), { headers: s2 }));
if (!e3.ok) {
const t4 = yield e3.json().catch(() => ({}));
throw this.createAPIError(e3.status, t4.message || "HTTP ".concat(e3.status, ": ").concat(e3.statusText), t4);
}
const t3 = yield e3.json();
return this.createSuccessResponse(t3);
} catch (n2) {
if (n2 && "object" == typeof n2 && "code" in n2) throw n2;
throw this.createAPIError(500, n2 instanceof Error ? n2.message : "Network error", { originalError: n2 });
}
});
}
getTourById(e2) {
return __async(this, null, function* () {
return this.makeRequest("/tours/".concat(e2, "/with-steps"));
});
}
getDocsById(e2) {
return __async(this, null, function* () {
return this.makeRequest("/docs/" + e2);
});
}
personalize(e2) {
return __async(this, null, function* () {
return this.makeRequest("/personalize", { method: "POST", body: JSON.stringify(e2) });
});
}
trackEvent(e2) {
return __async(this, null, function* () {
return Promise.resolve({ data: { eventId: "123", queued: 1, request: e2 }, requestId: this.generateRequestId(), timestamp: Date.now() });
});
}
batchTrackEvents(e2) {
return __async(this, null, function* () {
return Promise.resolve({ data: { processed: 1, failed: 0, request: e2 }, requestId: this.generateRequestId(), timestamp: Date.now() });
});
}
upsertUser(e2) {
return __async(this, null, function* () {
return this.makeRequest("/users", { method: "POST", body: JSON.stringify(e2) });
});
}
getWorkspaceConfig(e2) {
return __async(this, null, function* () {
return this.makeRequest("/workspaces/".concat(e2.workspaceId, "/config"));
});
}
search(e2) {
return __async(this, null, function* () {
return this.makeRequest("/search", { method: "POST", body: JSON.stringify(e2) });
});
}
getRecommendations(e2) {
return __async(this, null, function* () {
return this.makeRequest("/recommendations", { method: "POST", body: JSON.stringify(e2) });
});
}
track(e2) {
return __async(this, null, function* () {
return yield this.trackEvent({ event: e2 });
});
}
updateUser(e2) {
return __async(this, null, function* () {
yield this.upsertUser({ userId: e2.id || "unknown", profile: e2 });
});
}
createSuccessResponse(e2) {
return { data: e2, requestId: this.generateRequestId(), timestamp: Date.now() };
}
createAPIError(e2, t2, i2) {
return { code: this.getErrorCodeFromStatus(e2), message: t2, details: i2, requestId: this.generateRequestId(), timestamp: Date.now() };
}
getErrorCodeFromStatus(e2) {
switch (e2) {
case 400:
return "BAD_REQUEST";
case 401:
return "UNAUTHORIZED";
case 403:
return "FORBIDDEN";
case 404:
return "NOT_FOUND";
case 409:
return "CONFLICT";
case 422:
return "VALIDATION_ERROR";
case 429:
return "RATE_LIMIT_EXCEEDED";
case 500:
return "INTERNAL_SERVER_ERROR";
case 502:
return "BAD_GATEWAY";
case 503:
return "SERVICE_UNAVAILABLE";
case 504:
return "GATEWAY_TIMEOUT";
default:
return "UNKNOWN_ERROR";
}
}
generateRequestId() {
return Math.random().toString(36).substr(2, 9);
}
}
const E = { MODE: "production", VITE_BACKEND_URL: "https://sherpa-backend-production-e9ca.up.railway.app/api/v1" };
let M = null;
const R = globalThis, U = R.ShadowRoot && (void 0 === R.ShadyCSS || R.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, $ = Symbol(), O = /* @__PURE__ */ new WeakMap();
let D = class {
constructor(e2, t2, i2) {
if (this.M = 1, i2 !== $) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
this.cssText = e2, this.t = t2;
}
get styleSheet() {
let e2 = this.o;
const t2 = this.t;
if (U && void 0 === e2) {
const i2 = void 0 !== t2 && 1 === t2.length;
i2 && (e2 = O.get(t2)), void 0 === e2 && ((this.o = e2 = new CSSStyleSheet()).replaceSync(this.cssText), i2 && O.set(t2, e2));
}
return e2;
}
toString() {
return this.cssText;
}
};
const L = (e2, ...t2) => {
const i2 = 1 === e2.length ? e2[0] : t2.reduce((t3, i3, s2) => t3 + ((e3) => {
if (1 == e3.M) return e3.cssText;
if ("number" == typeof e3) return e3;
throw Error("Value passed to 'css' function must be a 'css' function result: " + e3 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
})(i3) + e2[s2 + 1], e2[0]);
return new D(i2, e2, $);
}, B = U ? (e2) => e2 : (e2) => e2 instanceof CSSStyleSheet ? ((e3) => {
let t2 = "";
for (const i2 of e3.cssRules) t2 += i2.cssText;
return ((e4) => new D("string" == typeof e4 ? e4 : e4 + "", void 0, $))(t2);
})(e2) : e2, { is: N, defineProperty: j, getOwnPropertyDescriptor: P, getOwnPropertyNames: q, getOwnPropertySymbols: _, getPrototypeOf: F } = Object, Z = globalThis, V = Z.trustedTypes, K = V ? V.emptyScript : "", W = Z.reactiveElementPolyfillSupport, H = { toAttribute(e2, t2) {
switch (t2) {
case Boolean:
e2 = e2 ? K : null;
break;
case Object:
case Array:
e2 = null == e2 ? e2 : JSON.stringify(e2);
}
return e2;
}, fromAttribute(e2, t2) {
let i2 = e2;
switch (t2) {
case Boolean:
i2 = null !== e2;
break;
case Number:
i2 = null === e2 ? null : +e2;
break;
case Object:
case Array:
try {
i2 = JSON.parse(e2);
} catch (e3) {
i2 = null;
}
}
return i2;
} }, Y = (e2, t2) => !N(e2, t2), J = { attribute: 1, type: String, converter: H, reflect: 0, useDefault: 0, hasChanged: Y };
(_a = Symbol.metadata) != null ? _a : Symbol.metadata = Symbol("metadata"), (_b = Z.litPropertyMetadata) != null ? _b : Z.litPropertyMetadata = /* @__PURE__ */ new WeakMap();
let G = class extends HTMLElement {
static addInitializer(e2) {
var _a3;
this.R(), ((_a3 = this.l) != null ? _a3 : this.l = []).push(e2);
}
static get observedAttributes() {
return this.finalize(), this.U && [...this.U.keys()];
}
static createProperty(e2, t2 = J) {
if (t2.state && (t2.attribute = 0), this.R(), this.prototype.hasOwnProperty(e2) && ((t2 = Object.create(t2)).wrapped = 1), this.elementProperties.set(e2, t2), !t2.noAccessor) {
const i2 = Symbol(), s2 = this.getPropertyDescriptor(e2, i2, t2);
void 0 !== s2 && j(this.prototype, e2, s2);
}
}
static getPropertyDescriptor(e2, t2, i2) {
var _a3;
const { get: s2, set: o2 } = (_a3 = P(this.prototype, e2)) != null ? _a3 : { get() {
return this[t2];
}, set(e3) {
this[t2] = e3;
} };
return { get: s2, set(t3) {
const n2 = s2 == null ? void 0 : s2.call(this);
o2 == null ? void 0 : o2.call(this, t3), this.requestUpdate(e2, n2, i2);
}, configurable: 1, enumerable: 1 };
}
static getPropertyOptions(e2) {
var _a3;
return (_a3 = this.elementProperties.get(e2)) != null ? _a3 : J;
}
static R() {
if (this.hasOwnProperty("elementProperties")) return;
const e2 = F(this);
e2.finalize(), void 0 !== e2.l && (this.l = [...e2.l]), this.elementProperties = new Map(e2.elementProperties);
}
static finalize() {
if (this.hasOwnProperty("finalized")) return;
if (this.finalized = 1, this.R(), this.hasOwnProperty("properties")) {
const e3 = this.properties, t2 = [...q(e3), ..._(e3)];
for (const i2 of t2) this.createProperty(i2, e3[i2]);
}
const e2 = this[Symbol.metadata];
if (null !== e2) {
const t2 = litPropertyMetadata.get(e2);
if (void 0 !== t2) for (const [e3, i2] of t2) this.elementProperties.set(e3, i2);
}
this.U = /* @__PURE__ */ new Map();
for (const [t2, i2] of this.elementProperties) {
const e3 = this.D(t2, i2);
void 0 !== e3 && this.U.set(e3, t2);
}
this.elementStyles = this.finalizeStyles(this.styles);
}
static finalizeStyles(e2) {
const t2 = [];
if (Array.isArray(e2)) {
const i2 = new Set(e2.flat(1 / 0).reverse());
for (const e3 of i2) t2.unshift(B(e3));
} else void 0 !== e2 && t2.push(B(e2));
return t2;
}
static D(e2, t2) {
const i2 = t2.attribute;
return 0 == i2 ? void 0 : "string" == typeof i2 ? i2 : "string" == typeof e2 ? e2.toLowerCase() : void 0;
}
constructor() {
super(), this.L = void 0, this.isUpdatePending = 0, this.hasUpdated = 0, this.B = null, this.N();
}
N() {
var _a3;
this.P = new Promise((e2) => this.enableUpdating = e2), this.q = /* @__PURE__ */ new Map(), this._(), this.requestUpdate(), (_a3 = this.constructor.l) == null ? void 0 : _a3.forEach((e2) => e2(this));
}
addController(e2) {
var _a3, _b3;
((_a3 = this.F) != null ? _a3 : this.F = /* @__PURE__ */ new Set()).add(e2), void 0 !== this.renderRoot && this.isConnected && ((_b3 = e2.hostConnected) == null ? void 0 : _b3.call(e2));
}
removeController(e2) {
var _a3;
(_a3 = this.F) == null ? void 0 : _a3.delete(e2);
}
_() {
const e2 = /* @__PURE__ */ new Map(), t2 = this.constructor.elementProperties;
for (const i2 of t2.keys()) this.hasOwnProperty(i2) && (e2.set(i2, this[i2]), delete this[i2]);
e2.size > 0 && (this.L = e2);
}
createRenderRoot() {
var _a3;
const e2 = (_a3 = this.shadowRoot) != null ? _a3 : this.attachShadow(this.constructor.shadowRootOptions);
return ((e3, t2) => {
if (U) e3.adoptedStyleSheets = t2.map((e4) => e4 instanceof CSSStyleSheet ? e4 : e4.styleSheet);
else for (const i2 of t2) {
const t3 = document.createElement("style"), s2 = R.litNonce;
void 0 !== s2 && t3.setAttribute("nonce", s2), t3.textContent = i2.cssText, e3.appendChild(t3);
}
})(e2, this.constructor.elementStyles), e2;
}
connectedCallback() {
var _a3, _b3;
(_a3 = this.renderRoot) != null ? _a3 : this.renderRoot = this.createRenderRoot(), this.enableUpdating(1), (_b3 = this.F) == null ? void 0 : _b3.forEach((e2) => {
var _a4;
return (_a4 = e2.hostConnected) == null ? void 0 : _a4.call(e2);
});
}
enableUpdating(e2) {
}
disconnectedCallback() {
var _a3;
(_a3 = this.F) == null ? void 0 : _a3.forEach((e2) => {
var _a4;
return (_a4 = e2.hostDisconnected) == null ? void 0 : _a4.call(e2);
});
}
attributeChangedCallback(e2, t2, i2) {
this.Z(e2, i2);
}
V(e2, t2) {
var _a3;
const i2 = this.constructor.elementProperties.get(e2), s2 = this.constructor.D(e2, i2);
if (void 0 !== s2 && 1 == i2.reflect) {
const o2 = (void 0 !== ((_a3 = i2.converter) == null ? void 0 : _a3.toAttribute) ? i2.converter : H).toAttribute(t2, i2.type);
this.B = e2, null == o2 ? this.removeAttribute(s2) : this.setAttribute(s2, o2), this.B = null;
}
}
Z(e2, t2) {
var _a3, _b3, _c3, _d3;
const i2 = this.constructor, s2 = i2.U.get(e2);
if (void 0 !== s2 && this.B !== s2) {
const e3 = i2.getPropertyOptions(s2), o2 = "function" == typeof e3.converter ? { fromAttribute: e3.converter } : void 0 !== ((_a3 = e3.converter) == null ? void 0 : _a3.fromAttribute) ? e3.converter : H;
this.B = s2, this[s2] = (_d3 = (_c3 = o2.fromAttribute(t2, e3.type)) != null ? _c3 : (_b3 = this.K) == null ? void 0 : _b3.get(s2)) != null ? _d3 : null, this.B = null;
}
}
requestUpdate(e2, t2, i2) {
var _a3, _b3;
if (void 0 !== e2) {
const s2 = this.constructor, o2 = this[e2];
if (i2 != null ? i2 : i2 = s2.getPropertyOptions(e2), !(((_a3 = i2.hasChanged) != null ? _a3 : Y)(o2, t2) || i2.useDefault && i2.reflect && o2 === ((_b3 = this.K) == null ? void 0 : _b3.get(e2)) && !this.hasAttribute(s2.D(e2, i2)))) return;
this.C(e2, t2, i2);
}
0 == this.isUpdatePending && (this.P = this.W());
}
C(e2, t2, { useDefault: i2, reflect: s2, wrapped: o2 }, n2) {
var _a3, _b3, _c3;
i2 && !((_a3 = this.K) != null ? _a3 : this.K = /* @__PURE__ */ new Map()).has(e2) && (this.K.set(e2, (_b3 = n2 != null ? n2 : t2) != null ? _b3 : this[e2]), 1 != o2 || void 0 !== n2) || (this.q.has(e2) || (this.hasUpdated || i2 || (t2 = void 0), this.q.set(e2, t2)), 1 == s2 && this.B !== e2 && ((_c3 = this.H) != null ? _c3 : this.H = /* @__PURE__ */ new Set()).add(e2));
}
W() {
return __async(this, null, function* () {
this.isUpdatePending = 1;
try {
yield this.P;
} catch (e3) {
Promise.reject(e3);
}
const e2 = this.scheduleUpdate();
return null != e2 && (yield e2), !this.isUpdatePending;
});
}
scheduleUpdate() {
return this.performUpdate();
}
performUpdate() {
var _a3, _b3;
if (!this.isUpdatePending) return;
if (!this.hasUpdated) {
if ((_a3 = this.renderRoot) != null ? _a3 : this.renderRoot = this.createRenderRoot(), this.L) {
for (const [e4, t3] of this.L) this[e4] = t3;
this.L = void 0;
}
const e3 = this.constructor.elementProperties;
if (e3.size > 0) for (const [t3, i2] of e3) {
const { wrapped: e4 } = i2, s2 = this[t3];
1 != e4 || this.q.has(t3) || void 0 === s2 || this.C(t3, void 0, i2, s2);
}
}
let e2 = 0;
const t2 = this.q;
try {
e2 = this.shouldUpdate(t2), e2 ? (this.willUpdate(t2), (_b3 = this.F) == null ? void 0 : _b3.forEach((e3) => {
var _a4;
return (_a4 = e3.hostUpdate) == null ? void 0 : _a4.call(e3);
}), this.update(t2)) : this.Y();
} catch (t3) {
throw e2 = 0, this.Y(), t3;
}
e2 && this.J(t2);
}
willUpdate(e2) {
}
J(e2) {
var _a3;
(_a3 = this.F) == null ? void 0 : _a3.forEach((e3) => {
var _a4;
return (_a4 = e3.hostUpdated) == null ? void 0 : _a4.call(e3);
}), this.hasUpdated || (this.hasUpdated = 1, this.firstUpdated(e2)), this.updated(e2);
}
Y() {
this.q = /* @__PURE__ */ new Map(), this.isUpdatePending = 0;
}
get updateComplete() {
return this.getUpdateComplete();
}
getUpdateComplete() {
return this.P;
}
shouldUpdate(e2) {
return 1;
}
update(e2) {
this.H && (this.H = this.H.forEach((e3) => this.V(e3, this[e3]))), this.Y();
}
updated(e2) {
}
firstUpdated(e2) {
}
};
G.elementStyles = [], G.shadowRootOptions = { mode: "open" }, G.elementProperties = /* @__PURE__ */ new Map(), G.finalized = /* @__PURE__ */ new Map(), W == null ? void 0 : W({ ReactiveElement: G }), ((_c = Z.reactiveElementVersions) != null ? _c : Z.reactiveElementVersions = []).push("2.1.0");
const X = globalThis, Q = X.trustedTypes, ee = Q ? Q.createPolicy("lit-html", { createHTML: (e2) => e2 }) : void 0, te = "$lit$", ie = "lit$".concat(Math.random().toFixed(9).slice(2), "$"), se = "?" + ie, oe = "<".concat(se, ">"), ne = document, re = () => ne.createComment(""), ae = (e2) => null === e2 || "object" != typeof e2 && "function" != typeof e2, ce = Array.isArray, le = "[ \n\f\r]", de = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, pe = /-->/g, he = />/g, ue = RegExp(">|".concat(le, "(?:([^\\s\"'>=/]+)(").concat(le, "*=").concat(le, "*(?:[^ \n\f\r\"'`<>=]|(\"|')|))|$)"), "g"), me = /'/g, be = /"/g, ge = /^(?:script|style|textarea|title)$/i, fe = (e2, ...t2) => ({ G: 1, strings: e2, values: t2 }), ye = Symbol.for("lit-noChange"), xe = Symbol.for("lit-nothing"), ve = /* @__PURE__ */ new WeakMap(), we = ne.createTreeWalker(ne, 129), ke = (e2, t2) => {
const i2 = e2.length - 1, s2 = [];
let n2, r2 = 2 === t2 ? "<svg>" : 3 === t2 ? "<math>" : "", a2 = de;
for (let o2 = 0; i2 > o2; o2++) {
const t3 = e2[o2];
let i3, c2, l2 = -1, d2 = 0;
for (; t3.length > d2 && (a2.lastIndex = d2, c2 = a2.exec(t3), null !== c2); ) d2 = a2.lastIndex, a2 === de ? "!--" === c2[1] ? a2 = pe : void 0 !== c2[1] ? a2 = he : void 0 !== c2[2] ? (ge.test(c2[2]) && (n2 = RegExp("</" + c2[2], "g")), a2 = ue) : void 0 !== c2[3] && (a2 = ue) : a2 === ue ? ">" === c2[0] ? (a2 = n2 != null ? n2 : de, l2 = -1) : void 0 === c2[1] ? l2 = -2 : (l2 = a2.lastIndex - c2[2].length, i3 = c2[1], a2 = void 0 === c2[3] ? ue : '"' === c2[3] ? be : me) : a2 === be || a2 === me ? a2 = ue : a2 === pe || a2 === he ? a2 = de : (a2 = ue, n2 = void 0);
const p2 = a2 === ue && e2[o2 + 1].startsWith("/>") ? " " : "";
r2 += a2 === de ? t3 + oe : 0 > l2 ? t3 + ie + (-2 === l2 ? o2 : p2) : (s2.push(i3), t3.slice(0, l2) + te + t3.slice(l2) + ie + p2);
}
return [o(e2, r2 + (e2[i2] || "<?>") + (2 === t2 ? "</svg>" : 3 === t2 ? "</math>" : "")), s2];
};
class Se {
constructor({ strings: e2, G: t2 }, i2) {
let s2;
this.parts = [];
let o2 = 0, n2 = 0;
const r2 = e2.length - 1, a2 = this.parts, [c2, l2] = ke(e2, t2);
if (this.el = Se.createElement(c2, i2), we.currentNode = this.el.content, 2 === t2 || 3 === t2) {
const e3 = this.el.content.firstChild;
e3.replaceWith(...e3.childNodes);
}
for (; null !== (s2 = we.nextNode()) && r2 > a2.length; ) {
if (1 === s2.nodeType) {
if (s2.hasAttributes()) for (const e3 of s2.getAttributeNames()) if (e3.endsWith(te)) {
const t3 = l2[n2++], i3 = s2.getAttribute(e3).split(ie), r3 = /([.?@])?(.*)/.exec(t3);
a2.push({ type: 1, index: o2, name: r3[2], strings: i3, ctor: "." === r3[1] ? ze : "?" === r3[1] ? Ce : "@" === r3[1] ? Ee : Ie }), s2.removeAttribute(e3);
} else e3.startsWith(ie) && (a2.push({ type: 6, index: o2 }), s2.removeAttribute(e3));
if (ge.test(s2.tagName)) {
const e3 = s2.textContent.split(ie), t3 = e3.length - 1;
if (t3 > 0) {
s2.textContent = Q ? Q.emptyScript : "";
for (let i3 = 0; t3 > i3; i3++) s2.append(e3[i3], re()), we.nextNode(), a2.push({ type: 2, index: ++o2 });
s2.append(e3[t3], re());
}
}
} else if (8 === s2.nodeType) if (s2.data === se) a2.push({ type: 2, index: o2 });
else {
let e3 = -1;
for (; -1 !== (e3 = s2.data.indexOf(ie, e3 + 1)); ) a2.push({ type: 7, index: o2 }), e3 += ie.length - 1;
}
o2++;
}
}
static createElement(e2, t2) {
const i2 = ne.createElement("template");
return i2.innerHTML = e2, i2;
}
}
class Te {
constructor(e2, t2) {
this.X = [], this.ee = void 0, this.te = e2, this.ie = t2;
}
get parentNode() {
return this.ie.parentNode;
}
get se() {
return this.ie.se;
}
u(e2) {
var _a3;
const { el: { content: t2 }, parts: i2 } = this.te, s2 = ((_a3 = e2 == null ? void 0 : e2.creationScope) != null ? _a3 : ne).importNode(t2, 1);
we.currentNode = s2;
let o2 = we.nextNode(), n2 = 0, r2 = 0, a2 = i2[0];
for (; void 0 !== a2; ) {
if (n2 === a2.index) {
let t3;
2 === a2.type ? t3 = new Ae(o2, o2.nextSibling, this, e2) : 1 === a2.type ? t3 = new a2.ctor(o2, a2.name, a2.strings, this, e2) : 6 === a2.type && (t3 = new Me(o2, this, e2)), this.X.push(t3), a2 = i2[++r2];
}
n2 !== (a2 == null ? void 0 : a2.index) && (o2 = we.nextNode(), n2++);
}
return we.currentNode = ne, s2;
}
p(e2) {
let t2 = 0;
for (const i2 of this.X) void 0 !== i2 && (void 0 !== i2.strings ? (i2.oe(e2, i2, t2), t2 += i2.strings.length - 2) : i2.oe(e2[t2])), t2++;
}
}
class Ae {
get se() {
var _a3, _b3;
return (_b3 = (_a3 = this.ie) == null ? void 0 : _a3.se) != null ? _b3 : this.ne;
}
constructor(e2, t2, i2, s2) {
var _a3;
this.type = 2, this.re = xe, this.ee = void 0, this.ae = e2, this.ce = t2, this.ie = i2, this.options = s2, this.ne = (_a3 = s2 == null ? void 0 : s2.isConnected) != null ? _a3 : 1;
}
get parentNode() {
let e2 = this.ae.parentNode;
const t2 = this.ie;
return void 0 !== t2 && 11 === (e2 == null ? void 0 : e2.nodeType) && (e2 = t2.parentNode), e2;
}
get startNode() {
return this.ae;
}
get endNode() {
return this.ce;
}
oe(e2, t2 = this) {
e2 = n(this, e2, t2), ae(e2) ? e2 === xe || null == e2 || "" === e2 ? (this.re !== xe && this.le(), this.re = xe) : e2 !== this.re && e2 !== ye && this.de(e2) : void 0 !== e2.G ? this.$(e2) : void 0 !== e2.nodeType ? this.T(e2) : ((e3) => ce(e3) || "function" == typeof (e3 == null ? void 0 : e3[Symbol.iterator]))(e2) ? this.k(e2) : this.de(e2);
}
O(e2) {
return this.ae.parentNode.insertBefore(e2, this.ce);
}
T(e2) {
this.re !== e2 && (this.le(), this.re = this.O(e2));
}
de(e2) {
this.re !== xe && ae(this.re) ? this.ae.nextSibling.data = e2 : this.T(ne.createTextNode(e2)), this.re = e2;
}
$(e2) {
var _a3;
const { values: t2, G: i2 } = e2, s2 = "number" == typeof i2 ? this.pe(e2) : (void 0 === i2.el && (i2.el = Se.createElement(o(i2.h, i2.h[0]), this.options)), i2);
if (((_a3 = this.re) == null ? void 0 : _a3.te) === s2) this.re.p(t2);
else {
const e3 = new Te(s2, this), i3 = e3.u(this.options);
e3.p(t2), this.T(i3), this.re = e3;
}
}
pe(e2) {
let t2 = ve.get(e2.strings);
return void 0 === t2 && ve.set(e2.strings, t2 = new Se(e2)), t2;
}
k(e2) {
ce(this.re) || (this.re = [], this.le());
const t2 = this.re;
let i2, s2 = 0;
for (const o2 of e2) s2 === t2.length ? t2.push(i2 = new Ae(this.O(re()), this.O(re()), this, this.options)) : i2 = t2[s2], i2.oe(o2), s2++;
t2.length > s2 && (this.le(i2 && i2.ce.nextSibling, s2), t2.length = s2);
}
le(e2 = this.ae.nextSibling, t2) {
var _a3;
for ((_a3 = this.he) == null ? void 0 : _a3.call(this, 0, 1, t2); e2 && e2 !== this.ce; ) {
const t3 = e2.nextSibling;
e2.remove(), e2 = t3;
}
}
setConnected(e2) {
var _a3;
void 0 === this.ie && (this.ne = e2, (_a3 = this.he) == null ? void 0 : _a3.call(this, e2));
}
}
class Ie {
get tagName() {
return this.element.tagName;
}
get se() {
return this.ie.se;
}
constructor(e2, t2, i2, s2, o2) {
this.type = 1, this.re = xe, this.ee = void 0, this.element = e2, this.name = t2, this.ie = s2, this.options = o2, i2.length > 2 || "" !== i2[0] || "" !== i2[1] ? (this.re = Array(i2.length - 1).fill(new String()), this.strings = i2) : this.re = xe;
}
oe(e2, t2 = this, i2, s2) {
const o2 = this.strings;
let r2 = 0;
if (void 0 === o2) e2 = n(this, e2, t2, 0), r2 = !ae(e2) || e2 !== this.re && e2 !== ye, r2 && (this.re = e2);
else {
const s3 = e2;
let a2, c2;
for (e2 = o2[0], a2 = 0; o2.length - 1 > a2; a2++) c2 = n(this, s3[i2 + a2], t2, a2), c2 === ye && (c2 = this.re[a2]), r2 || (r2 = !ae(c2) || c2 !== this.re[a2]), c2 === xe ? e2 = xe : e2 !== xe && (e2 += (c2 != null ? c2 : "") + o2[a2 + 1]), this.re[a2] = c2;
}
r2 && !s2 && this.j(e2);
}
j(e2) {
e2 === xe ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e2 != null ? e2 : "");
}
}
class ze extends Ie {
constructor() {
super(...arguments), this.type = 3;
}
j(e2) {
this.element[this.name] = e2 === xe ? void 0 : e2;
}
}
class Ce extends Ie {
constructor() {
super(...arguments), this.type = 4;
}
j(e2) {
this.element.toggleAttribute(this.name, !!e2 && e2 !== xe);
}
}
class Ee extends Ie {
constructor(e2, t2, i2, s2, o2) {
super(e2, t2, i2, s2, o2), this.type = 5;
}
oe(e2, t2 = this) {
var _a3;
if ((e2 = (_a3 = n(this, e2, t2, 0)) != null ? _a3 : xe) === ye) return;
const i2 = this.re, s2 = e2 === xe && i2 !== xe || e2.capture !== i2.capture || e2.once !== i2.once || e2.passive !== i2.passive, o2 = e2 !== xe && (i2 === xe || s2);
s2 && this.element.removeEventListener(this.name, this, i2), o2 && this.element.addEventListener(this.name, this, e2), this.re = e2;
}
handleEvent(e2) {
var _a3, _b3;
"function" == typeof this.re ? this.re.call((_b3 = (_a3 = this.options) == null ? void 0 : _a3.host) != null ? _b3 : this.element, e2) : this.re.handleEvent(e2);
}
}
class Me {
constructor(e2, t2, i2) {
this.element = e2, this.type = 6, this.ee = void 0, this.ie = t2, this.options = i2;
}
get se() {
return this.ie.se;
}
oe(e2) {
n(this, e2);
}
}
const Re = X.litHtmlPolyfillSupport;
Re == null ? void 0 : Re(Se, Ae), ((_d = X.litHtmlVersions) != null ? _d : X.litHtmlVersions = []).push("3.3.0");
const Ue = globalThis;
class $e extends G {
constructor() {
super(...arguments), this.renderOptions = { host: this }, this.ue = void 0;
}
createRenderRoot() {
var _a3, _b3;
const e2 = super.createRenderRoot();
return (_b3 = (_a3 = this.renderOptions).renderBefore) != null ? _b3 : _a3.renderBefore = e2.firstChild, e2;
}
update(e2) {
const t2 = this.render();
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e2), this.ue = ((e3, t3, i2) => {
var _a3, _b3;
const s2 = (_a3 = i2 == null ? void 0 : i2.renderBefore) != null ? _a3 : t3;
let o2 = s2.me;
if (void 0 === o2) {
const e4 = (_b3 = i2 == null ? void 0 : i2.renderBefore) != null ? _b3 : null;
s2.me = o2 = new Ae(t3.insertBefore(re(), e4), e4, void 0, i2 != null ? i2 : {});
}
return o2.oe(e3), o2;
})(t2, this.renderRoot, this.renderOptions);
}
connectedCallback() {
var _a3;
super.connectedCallback(), (_a3 = this.ue) == null ? void 0 : _a3.setConnected(1);
}
disconnectedCallback() {
var _a3;
super.disconnectedCallback(), (_a3 = this.ue) == null ? void 0 : _a3.setConnected(0);
}
render() {
return ye;
}
}
$e.be = 1, $e.finalized = 1, (_e2 = Ue.litElementHydrateSupport) == null ? void 0 : _e2.call(Ue, { LitElement: $e });
const Oe = Ue.litElementPolyfillSupport;
Oe == null ? void 0 : Oe({ LitElement: $e }), ((_f = Ue.litElementVersions) != null ? _f : Ue.litElementVersions = []).push("4.2.0");
const De = L(_a2 || (_a2 = __template(["\n /* Box sizing rules */\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n /* Prevent font size inflation */\n html {\n -moz-text-size-adjust: none;\n -webkit-text-size-adjust: none;\n text-size-adjust: none;\n }\n\n /* Remove default margin in favour of better control in authored CSS */\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n figure,\n blockquote,\n dl,\n dd {\n margin: 0;\n }\n\n /* Remove list styles on ul, ol elements with a list role */\n ul[role='list'],\n ol[role='list'] {\n list-style: none;\n }\n\n /* Set core body defaults */\n body {\n min-height: 100vh;\n line-height: 1.5;\n }\n\n /* Balance text wrapping on headings */\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n text-wrap: balance;\n }\n\n /* A elements that don't have a class get default styles */\n a:not([class]) {\n text-decoration-skip-ink: auto;\n color: currentColor;\n }\n\n /* Make images easier to work with */\n img,\n picture {\n max-width: 100%;\n display: block;\n }\n\n /* Inherit fonts for inputs and buttons */\n input,\n button,\n textarea,\n select {\n font-family: inherit;\n }\n\n /* Make sure textareas without a rows attribute are not tiny */\n textarea:not([rows]) {\n min-height: 10em;\n }\n\n /* Anything that has been anchored to should have extra scroll margin */\n :target {\n scroll-margin-block: 5ex;\n }\n\n /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n @media (prefers-reduced-motion: reduce) {\n html:focus-within {\n scroll-behavior: auto;\n }\n\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }\n\n /* Remove default button styles */\n button {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n }\n\n /* Remove default fieldset styles */\n fieldset {\n border: none;\n padding: 0;\n margin: 0;\n }\n\n /* Remove default legend styles */\n legend {\n padding: 0;\n }\n\n /* Ensure consistent table styling */\n table {\n border-collapse: collapse;\n border-spacing: 0;\n }\n\n /* Remove default styles from form elements */\n input,\n textarea,\n select {\n background: none;\n border: none;\n outline: none;\n }\n\n /* Ensure consistent styling for interactive elements */\n [role='button'],\n [role='link'] {\n cursor: pointer;\n }\n\n /* Ensure hidden elements are properly hidden */\n [hidden] {\n display: none !important;\n }\n\n /* Improve readability for screen readers */\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n"]))), Le = L(_b2 || (_b2 = __template(["\n ", "\n\n /* Sherpa-specific resets with low specificity to allow className override */\n :host {\n /* Reset any inherited styles */\n all: initial;\n\n /* Set default font family */\n font-family:\n -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n\n /* Ensure proper box model */\n box-sizing: border-box;\n\n /* Reset text properties */\n color: inherit;\n font-size: 14px;\n line-height: 1.5;\n\n /* Reset positioning */\n position: static;\n\n /* Reset display */\n display: block;\n }\n\n /* Ensure all child elements use border-box */\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n /* Reset common elements within Sherpa components - only apply to elements without classes */\n h1:not([class]),\n h2:not([class]),\n h3:not([class]),\n h4:not([class]),\n h5:not([class]),\n h6:not([class]) {\n margin: 0;\n padding: 0;\n border: 0;\n font-family: inherit;\n vertical-align: baseline;\n }\n\n /* Ensure buttons are properly styled - only apply to buttons without classes */\n button:not([class]) {\n border: none;\n cursor: pointer;\n font-family: inherit;\n }\n\n /* Ensure inputs are properly styled - only apply to inputs without classes */\n input:not([class]),\n textarea:not([class]),\n select:not([class]) {\n border: none;\n outline: none;\n font-family: inherit;\n }\n\n /* Ensure proper focus styles for all elements */\n *:focus-visible {\n outline: 2px solid #005fcc;\n outline-offset: 2px;\n }\n\n /* Prevent text selection on interactive elements without classes */\n button:not([class]),\n [role='button']:not([class]) {\n user-select: none;\n }\n\n /* Ensure proper cursor for interactive elements without classes */\n button:not([class]),\n [role='button']:not([class]),\n [role='link']:not([class]) {\n cursor: pointer;\n }\n\n /* Ensure proper display for hidden elements */\n [hidden] {\n display: none !important;\n }\n\n /* \n * Custom class priority guarantee\n * Any element with a class attribute will have its styles prioritized\n * over the reset styles above due to CSS specificity rules\n */\n [class] {\n /* This empty rule ensures that any element with a class \n will have higher specificity than the reset rules above */\n }\n"])), De), Be = (e2) => (t2, i2) => {
void 0 !== i2 ? i2.addInitializer(() => {
customElements.define(e2, t2);
}) : customElements.define(e2, t2);
}, Ne = { attribute: 1, type: String, converter: H, reflect: 0, hasChanged: Y }, je = (e2 = Ne, t2, i2) => {
const { kind: s2, metadata: o2 } = i2;
let n2 = globalThis.litPropertyMetadata.get(o2);
if (void 0 === n2 && globalThis.litPropertyMetadata.set(o2, n2 = /* @__PURE__ */ new Map()), "setter" === s2 && ((e2 = Object.create(e2)).wrapped = 1), n2.set(i2.name, e2), "accessor" === s2) {
const { name: s3 } = i2;
return { set(i3) {
const o3 = t2.get.call(this);
t2.set.call(this, i3), this.requestUpdate(s3, o3, e2);
}, init(t3) {
return void 0 !== t3 && this.C(s3, void 0, e2, t3), t3;
} };
}
if ("setter" === s2) {
const { name: s3 } = i2;
return function(i3) {
const o3 = this[s3];
t2.call(this, i3), this.requestUpdate(s3, o3, e2);
};
}
throw Error("Unsupported decorator location: " + s2);
};
p = Object.defineProperty, h = Object.getOwnPropertyDescriptor, u = (e2, t2, i2, s2) => {
var o2, n2, r2 = s2 > 1 ? void 0 : s2 ? h(t2, i2) : t2;
for (o2 = e2.length - 1; o2 >= 0; o2--) (n2 = e2[o2]) && (r2 = (s2 ? n2(t2, i2, r2) : n2(r2)) || r2);
return s2 && r2 && p(t2, i2, r2), r2;
};
let Pe = class extends $e {
constructor() {
super(...arguments), this.isVisible = 0, this.updatePosition = () => {
if (!this.targetElement || !this.guide) return;
const e2 = this.targetElement.getBoundingClientRect(), { placement: t2 } = this.guide, i2 = window.innerHeight, s2 = window.innerWidth;
if (-50 > e2.bottom || e2.top > i2 + 50 || -50 > e2.right || e2.left > s2 + 50) return this.isVisible = 0, void 0;
let o2 = e2.left + t2.translate.x, n2 = e2.top + t2.translate.y;
const { direction: r2 } = t2, a2 = "center" !== r2.x && "center" === r2.y;
if ("center" !== r2.y) {
switch (r2.y) {
case "top":
n2 = e2.top - 10;
break;
case "bottom":
n2 = e2.bottom + 10;
}
switch (r2.x) {
case "left":
o2 = e2.left - 180;
break;
case "right":
o2 = e2.right - 180;
break;
case "center":
o2 = e2.left + e2.width / 2 - 180;
}
} else if (a2) {
switch (r2.x) {
case "left":
o2 = e2.left - 360 - 10;
break;
case "right":
o2 = e2.right + 10;
}
n2 = e2.top + e2.height / 2;
} else o2 = e2.left + e2.width / 2 - 180, n2 = e2.top + e2.height / 2;
10 > o2 && (o2 = 10), o2 + 360 > s2 - 10 && (o2 = s2 - 360 - 10), this.style.left = o2 + "px", this.style.top = n2 + "px", this.isVisible = 1, this.updateComplete.then(() => {
var _a3;
const i3 = (_a3 = this.shadowRoot) == null ? void 0 : _a3.querySelector(".tooltip");
if (i3) {
const s3 = i3.getBoundingClientRect();
let o3 = n2;
"center" !== t2.direction.y && "top" === t2.direction.y ? o3 = e2.top - s3.height - 10 : ("center" !== t2.direction.x && "center" === t2.direction.y || "center" === t2.direction.y) && (o3 = e2.top + e2.height / 2 - s3.height / 2), this.style.top = o3 + "px", this.updateArrowPosition(e2, s3);
}
});
}, this.handleApplyRecommendation = () => {
this.stepId && this.dispatchEvent(new CustomEvent("apply-recommendation", { detail: { stepId: this.stepId }, bubbles: 1, composed: 1 }));
}, this.handlePrev = () => {
this.dispatchEvent(new CustomEvent("previous-step", { bubbles: 1, composed: 1 }));
}, this.handleNext = () => {
this.dispatchEvent(new CustomEvent("next-step", { bubbles: 1, composed: 1 }));
}, this.handleClose = () => {
this.dispatchEvent(new CustomEvent("close-tooltip", { bubbles: 1, composed: 1 }));
};
}
connectedCallback() {
super.connectedCallback(), this.updatePosition(), window.addEventListener("resize", this.updatePosition), window.addEventListener("scroll", this.updatePosition);
}
disconnectedCallback() {
super.disconnectedCallback(), window.removeEventListener("resize", this.updatePosition), window.removeEventListener("scroll", this.updatePosition);
}
updated(e2) {
(e2.has("guide") || e2.has("targetElement")) && this.updatePosition();
}
updateArrowPosition(e2, t2) {
var _a3;
const i2 = (_a3 = this.shadowRoot) == null ? void 0 : _a3.querySelector(".arrow");
if (!i2 || !this.guide) return;
const { direction: s2 } = this.guide.placement, o2 = e2.left + e2.width / 2, n2 = e2.top + e2.height / 2, r2 = parseFloat(this.style.left.replace("px", "")), a2 = parseFloat(this.style.top.replace("px", "")), c2 = "center" !== s2.x && "center" === s2.y;
"center" !== s2.y ? (i2.style.left = Math.max(12, Math.min(t2.width - 12, o2 - r2)) + "px", i2.style.removeProperty("top"), i2.style.removeProperty("right")) : c2 ? (i2.style.top = Math.max(12, Math.min(t2.height - 12, n2 - a2)) + "px", i2.style.removeProperty("left"), i2.style.removeProperty("right")) : (i2.style.removeProperty("top"), i2.style.removeProperty("left"), i2.style.removeProperty("right"));
}
getArrowClass() {
if (!this.guide || !this.targetElement) return "";
const { direction: e2 } = this.guide.placement;
if ("center" !== e2.y) {
if ("bottom" === e2.y) return "arrow arrow-top";
if ("top" === e2.y) return "arrow arrow-bottom";
} else if ("center" !== e2.x && "center" === e2.y) {
if ("right" === e2.x) return "arrow arrow-left";
if ("left" === e2.x) return "arrow arrow-right";
}
return "arrow arrow-top";
}
getRecommendationDisplayText() {
var _a3;
if (!((_a3 = this.guide) == null ? void 0 : _a3.recommendation) || !this.guide.recommendation.value) return null;
const { recommendation: e2 } = this.guide, t2 = e2.value;
if (!t2.length) return null;
const i2 = t2.map((t3) => this.getValueDisplayText(t3, e2.type)).filter((e3) => null !== e3);
return i2.length > 0 ? i2.join(" & ") : null;
}
getValueDisplayText(e2, t2) {
if (!this.targetElement) return e2;
try {
switch (t2) {
case "radio":
return this.getRadioLabelForValue(e2) || e2;
case "checkbox":
return this.getCheckboxLabelForValue(e2) || e2;
case "select":
return this.getSelectOptionLabelForValue(e2) || e2;
default:
return e2;
}
} catch (i2) {
return e2;
}
}
getRadioLabelForValue(e2) {
var _a3, _b3;
if (!((_b3 = (_a3 = this.guide) == null ? void 0 : _a3.recommendation) == null ? void 0 : _b3.inputSelector)) return null;
const t2 = this.findRecommendationTargetElement();
if (!t2) return null;
const i2 = this.getRadioGroup(t2);
for (const s2 of Array.from(i2)) if (s2.value === e2) return this.getRadioLabel(s2);
return null;
}
getCheckboxLabelForValue(e2) {
var _a3, _b3;
if (!((_b3 = (_a3 = this.guide) == null ? void 0 : _a3.recommendation) == null ? void 0 : _b3.inputSelector)) return null;
const t2 = this.findRecommendationTargetElement();
if (!t2) return null;
const i2 = (t2.closest("form") || document).querySelectorAll('input[type="checkbox"]');
for (const s2 of Array.from(i2)) if (s2.value === e2) return this.getCheckboxLabel(s2);
return null;
}
getSelectOptionLabelForValue(e2) {
var _a3, _b3, _c3;
if (!((_b3 = (_a3 = this.guide) == null ? void 0 : _a3.recommendation) == null ? void 0 : _b3.inputSelector)) return null;
const t2 = this.findRecommendationTargetElement();
if (!t2 || "SELECT" !== t2.tagName) return null;
const i2 = t2.querySelector('option[value="'.concat(e2, '"]'));
return i2 && ((_c3 = i2.textContent) == null ? void 0 : _c3.trim()) || null;
}
findRecommendationTargetElement() {
var _a3, _b3;
if (!((_b3 = (_a3 = this.guide) == null ? void 0 : _a3.recommendation) == null ? void 0 : _b3.inputSelector)) return this.targetElement || null;
const { inputSelector: e2 } = this.guide.recommendation;
try {
const t2 = document.querySelector(e2.primary);
if (t2) return t2;
} catch (t2) {
}
if (e2.fallback) {
if (e2.fallback.css) try {
const t2 = document.querySelector(e2.fallback.css);
if (t2) return t2;
} catch (t2) {
}
if (e2.fallback.xpath) try {
const t2 = document.evaluate(e2.fallback.xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
if (t2.singleNodeValue) return t2.singleNodeValue;
} catch (t2) {
}
}
return this.targetElement || null;
}
getRadioGroup(e2) {
return e2.name ? (e2.closest("form") || document).querySelectorAll('input[type="radio"][name="'.concat(e2.name, '"]')) : document.querySelectorAll('input[type="radio"]:not([name])');
}
getRadioLabel(e2) {
var _a3;
if (e2.id) {
const t3 = document.querySelector('label[for="'.concat(e2.id, '"]'));
if (t3) return this.extractTextContent(t3);
}
const t2 = e2.closest("label");
if (t2) return this.extractTextContent(t2, e2);
const i2 = e2.getAttribute("aria-label");
if (i2) return i2.trim();
const s2 = e2.getAttribute("aria-labelledby");
if (s2) {
const e3 = s2.trim().split(/\s+/), t3 = [];
for (const i3 of e3) {
const e4 = document.getElementById(i3);
if (e4) {
const i4 = this.extractTextContent(e4);
i4 && t3.push(i4);
}
}
if (t3.length > 0) return t3.join(" ");
}
const o2 = e2.nextSibling;
if (o2 && o2.nodeType === Node.TEXT_NODE) {
const e3 = (_a3 = o2.textContent) == null ? void 0 : _a3.trim();
if (e3) return e3;
}
const n2 = e2.nextElementSibling;
if (n2 && ("SPAN" === n2.tagName || "DIV" === n2.tagName || n2.classList.contains("radio-label"))) return this.extractTextContent(n2);
const r2 = e2.parentElement;
return r2 ? this.extractTextContent(r2, e2) : null;
}
getCheckboxLabel(e2) {
var _a3;
if (e2.id) {
const t3 = document.querySelector('label[for="'.concat(e2.id, '"]'));
if (t3) return this.extractTextContent(t3);
}
const t2 = e2.closest("label");
if (t2) return this.extractTextContent(t2, e2);
const i2 = e2.getAttribute("aria-label");
if (i2) return i2.trim();
const s2 = e2.getAttribute("aria-labelledby");
if (s2) {
const e3 = s2.trim().split(/\s+/), t3 = [];
for (const i3 of e3) {
const e4 = document.getElementById(i3);
if (e4) {
const i4 = this.extractTextContent(e4);
i4 && t3.push(i4);
}
}
if (t3.length > 0) return t3.join(" ");
}
const o2 = e2.nextSibling;
if (o2 && o2.nodeType === Node.TEXT_NODE) {
const e3 = (_a3 = o2.textContent) == null ? void 0 : _a3.trim();
if (e3) return e3;
}
const n2 = e2.nextElementSibling;
if (n2 && ("SPAN" === n2.tagName || "DIV" === n2.tagName || n2.classList.contains("checkbox-label"))) return this.extractTextContent(n2);
const r2 = e2.parentElement;
return r2 ? this.extractTextContent(r2, e2) : null;
}
extractTextContent(e2, t2) {
var _a3;
if (!e2) return null;
const i2 = e2.cloneNode(1);
if (t2) {
const e3 = i2.querySelector('[type="'.concat(t2.getAttribute("type"), '"]'));
e3 == null ? void 0 : e3.remove();
}
const s2 = i2.querySelectorAll("input, button, svg, img, .icon");
for (const n2 of Array.from(s2)) n2.remove();
const o2 = (_a3 = i2.textContent) == null ? void 0 : _a3.trim();
return o2 && o2.length > 0 ? o2 : null;
}
isPreviousDisabled() {
var _a3, _b3;
return this.isPersonalizing || !!((_a3 = this.step) == null ? void 0 : _a3.logic.disablePrev) || 0 === ((_b3 = this.step) == null ? void 0 : _b3.stepId);
}
isNextDisabled() {
var _a3;
return this.isPersonalizing || !!((_a3 = this.step) == null ? void 0 : _a3.logic.disableNext);
}
render() {
if (!this.guide || !this.isVisible) return xe;
const e2 = this.guide.content && this.guide.content.trim().length > 0, t2 = this.guide.recommendation && this.guide.recommendation.value, i2 = this.getRecommendationDisplayText();
return fe(_j || (_j = __template(['\n <div class="tooltip">\n <div class="', '"></div>\n\n <div class="tooltip-header', '">\n ', '\n\n <button\n class="close-btn"\n @click="', '"\n aria-label="Close tooltip"\n title="툴크 숨기기"\n >\n ×\n </button>\n </div>\n\n <div class="tooltip-actions">\n <div class="actions-row">\n ', '\n\n <div class="nav-section">\n ', '\n <button\n class="btn btn-nav"\n @click="', '"\n aria-label="Previous step"\n title="이전 단계"\n ?disabled="', '"\n >\n ←\n </button>\n <button\n class="btn btn-nav"\n @click="', '"\n aria-label="Next step"\n title="다음 단계"\n ?disabled="', '"\n >\n →\n </button>\n </div>\n </div>\n </div>\n </div>\n '])), this.getArrowClass(), e2 || this.isPersonalizing ? "" : " no-content", this.isPersonalizing ? fe(_c2 || (_c2 = __template(['\n <div class="tooltip-content">\n <div class="skeleton skeleton-content"></div>\n <div class="skeleton skeleton-content"></div>\n <div class="skeleton-loading-indicator">\n <div class="skeleton-spinner"></div>\n <span>개인화된 콘텐츠를 불러오는 중...</span>\n </div>\n </div>\n ']))) : e2 ? fe(_d2 || (_d2 = __template([' <p class="tooltip-content">', "</p> "])), this.guide.content) : fe(_e3 || (_e3 = __template(["<div></div>"]))), this.handleClose, this.isPersonalizing ? fe(_f2 || (_f2 = __template(['\n <div class="recommendation-section">\n <div class="skeleton skeleton-recommendation"></div>\n </div>\n ']))) : t2 && i2 ? fe(_g || (_g = __template(['\n <div class="recommendation-section">\n <p class="recommendation">\n 추천 입력값:\n <span class="recommendation-value">', "</span>\n </p>\n </div>\n "])), i2) : fe(_h || (_h = __template(["<div></div>"]))), t2 && !this.isPersonalizing ? fe(_i || (_i = __template(['\n <button\n class="btn btn-apply"\n @click="', '"\n aria-label="Apply recommendation"\n >\n 적용\n </button>\n '])), this.handleApplyRecommendation) : xe, this.handlePrev, this.isPreviousDisabled(), this.handleNext, this.isNextDisabled());
}
};
Pe.styles = L(_k || (_k = __template(["\n ", "\n\n :host {\n position: fixed;\n z-index: 1000;\n pointer-events: none;\n font-family:\n -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n }\n\n .tooltip {\n position: fixed;\n width: 360px;\n border-radius: 8px;\n background: var(--bg, #ffffff);\n border: 1px solid var(--border, #e5e7eb);\n box-shadow:\n 0 10px 38px -10px rgba(22, 23, 24, 0.35),\n 0 10px 20px -15px rgba(22, 23, 24, 0.2);\n z-index: 1000;\n pointer-events: auto;\n animation: tooltipFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .tooltip-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 12px;\n padding: 16px 16px 12px;\n min-height: auto;\n }\n\n .tooltip-header.no-content {\n padding: 8px 16px 0;\n min-height: 16px;\n }\n\n .tooltip-content {\n flex: 1;\n line-height: 1.5;\n color: var(--text-secondary, #6b7280);\n font-size: 14px;\n margin: 0;\n }\n\n .close-btn {\n width: 24px;\n height: 24px;\n background: none;\n border: none;\n color: var(--text-muted, #9ca3af);\n cursor: pointer;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: 300;\n transition: all 0.15s ease;\n flex-shrink: 0;\n margin-top: -2px;\n margin-right: -2px;\n }\n\n .close-btn:hover {\n color: var(--text, #374151);\n background-color: var(--hover-bg, #f3f4f6);\n }\n\n .tooltip-actions {\n padding: 0 16px 8px;\n }\n\n .actions-row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 4px;\n }\n\n .recommendation-section {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-height: 28px;\n }\n\n .recommendation {\n font-size: 13px;\n color: var(--text-muted, #6b7280);\n margin: 0;\n word-wrap: break-word;\n word-break: break-word;\n max-width: 200px;\n line-height: 1.4;\n }\n\n .recommendation-value {\n font-weight: 600;\n color: var(--text, #1f2937);\n }\n\n .nav-section {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n }\n\n .btn {\n border: none;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n font-family: inherit;\n }\n\n .btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n background: var(--disabled-bg, #f9fafb) !important;\n color: var(--disabled-text, #9ca3af) !important;\n border-color: var(--disabled-border, #e5e7eb) !important;\n transform: none !important;\n box-shadow: none !important;\n }\n\n .btn-apply {\n height: 28px;\n padding: 0 12px;\n border: 1px solid #16a34a;\n color: #16a34a;\n background: transparent;\n font-size: 12px;\n }\n\n .btn-apply:hover:not(:disabled) {\n background: #f0fdf4;\n border-color: #15803d;\n color: #15803d;\n }\n\n .btn-apply:active:not(:disabled) {\n background: #dcfce7;\n }\n\n .btn-nav {\n width: 28px;\n height: 28px;\n background: var(--button-secondary-bg, #f3f4f6);\n color: var(--text, #374151);\n border: 1px solid var(--border, #e5e7eb);\n font-size: 14px;\n }\n\n .btn-nav:hover:not(:disabled) {\n background: var(--button-secondary-hover, #e5e7eb);\n border-color: var(--border-hover, #d1d5db);\n }\n\n .btn-nav:active:not(:disabled) {\n background: var(--button-secondary-active, #d1d5db);\n }\n\n .btn-nav:disabled {\n background: var(--disabled-bg, #f9fafb) !important;\n color: var(--disabled-text, #9ca3af) !important;\n border-color: var(--disabled-border, #e5e7eb) !important;\n position: relative;\n }\n\n .btn-nav:disabled::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 2px;\n height: 16px;\n background: var(--disabled-text, #9ca3af);\n transform: translate(-50%, -50%) rotate(45deg);\n opacity: 0.6;\n }\n\n .arrow {\n position: absolute;\n width: 12px;\n height: 12px;\n background: var(--bg, #ffffff);\n border: 1px solid var(--border, #e5e7eb);\n transform: rotate(45deg);\n z-index: 1001;\n }\n\n .arrow-top {\n top: -6px;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n border-bottom: none;\n border-right: none;\n }\n\n .arrow-bottom {\n bottom: -6px;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n border-top: none;\n border-left: none;\n }\n\n .arrow-left {\n left: -6px;\n top: 50%;\n transform: translateY(-50%) rotate(45deg);\n border-top: none;\n border-right: none;\n }\n\n .arrow-right {\n right: -6px;\n top: 50%;\n transform: translateY(-50%) rotate(45deg);\n border-bottom: none;\n border-left: none;\n }\n\n @keyframes tooltipFadeIn {\n from {\n opacity: 0;\n transform: scale(0.96) translateY(-2px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }\n\n /* CSS custom properties for theming */\n :host {\n --bg: #ffffff;\n --border: #e5e7eb;\n --text: #1f2937;\n --text-secondary: #6b7280;\n --text-muted: #9ca3af;\n --hover-bg: #f3f4f6;\n --button-secondary-bg: #f3f4f6;\n --button-secondary-hover: #e5e7eb;\n --button-secondary-active: #d1d5db;\n --border-hover: #d1d5db;\n --disabled-bg: #f9fafb;\n --disabled-text: #9ca3af;\n --disabled-border: #e5e7eb;\n }\n /* \n @media (prefers-color-scheme: dark) {\n :host {\n --bg: #1f2937;\n --border: #374151;\n --text: #f9fafb;\n --text-secondary: #d1d5db;\n --text-muted: #9ca3af;\n --hover-bg: #374151;\n --button-secondary-bg: #374151;\n --button-secondary-hover: #4b5563;\n --button-secondary-active: #6b7280;\n --border-hover: #4b5563;\n }\n } */\n\n /* High contrast mode */\n /* @media (prefers-contrast: high) {\n :host {\n --border: #000000;\n --text-muted: #000000;\n }\n } */\n\n /* Responsive adjustments */\n @media (max-width: 500px) {\n .tooltip {\n width: calc(100vw - 32px);\n max-width: 360px;\n }\n }\n\n /* Skeleton Loading Styles */\n .skeleton {\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: skeleton-shimmer 1.5s ease-in-out infinite;\n border-radius: 4px;\n }\n\n .skeleton-content {\n height: 16px;\n width: 100%;\n margin-bottom: 8px;\n }\n\n .skeleton-content:last-child {\n width: 75%;\n margin-bottom: 0;\n }\n\n .skeleton-recommendation {\n height: 14px;\n width: 120px;\n }\n\n .skeleton-loading-indicator {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--text-muted, #6b7280);\n font-size: 12px;\n padding: 8px 0;\n }\n\n .skeleton-spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--border, #e5e7eb);\n border-top: 2px solid var(--text-muted, #6b7280);\n border-radius: 50%;\n animation: skeleton-spin 1s linear infinite;\n }\n\n @keyframes skeleton-shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n }\n\n @keyframes skeleton-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n /* Reduced motion support for skeleton */\n @media (prefers-reduced-motion: reduce) {\n .skeleton {\n animation: none;\n background: #f0f0f0;\n }\n .skeleton-spinner {\n animation: none;\n }\n }\n "])), Le), u([c({ type: Object })], Pe.prototype, "guide", 2), u([c({ type: Object })], Pe.prototype, "targetElement", 2), u([c({ type: String })], Pe.prototype, "stepId", 2), u([c({ type: Boolean })], Pe.prototype, "isPersonalizing", 2), u([c({ type: Object })], Pe.prototype, "step", 2), u([l()], Pe.prototype, "isVisible", 2), Pe = u([Be("sherpa-tooltip")], Pe);
const qe = Object.freeze({ __proto__: null, get SherpaTooltip() {
return Pe;
} });
m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, g = (e2, t2, i2, s2) => {
var o2, n2, r2 = s2 > 1 ? void 0 : s2 ? b(t2, i2) : t2;
for (o2 = e2.length - 1; o2 >= 0; o2--) (n2 = e2[o2]) && (r2 = (s2 ? n2(t2, i2, r2) : n2(r2)) || r2);
return s2 && r2 && m(t2, i2, r2), r2;
};
let _e = class extends $e {
constructor() {
super(...arguments), this.isVisible = 0, this.updatePosition = () => {
if (!this.targetElement) return;
const e2 = this.targetElement.getBoundingClientRect(), t2 = e2.top + e2.height / 2;
this.style.left = e2.left + e2.width / 2 + "px", this.style.top = t2 + "px", this.isVisible = 1;
}, this.handleClick = () => {
if (this.targetElement) {
const e2 = new MouseEvent("click", { view: window, bubbles: 1, cancelable: 1, composed: 1 });
this.targetElement.dispatchEvent(e2);
}
this.dispatchEvent(new CustomEvent("beacon-click", { detail: { stepId: this.stepId, targetElement: this.targetElement }, bubbles: 1, composed: 1 }));
}, this.handleKeydown = (e2) => {
"Enter" !== e2.key && " " !== e2.key || (e2.preventDefault(), this.handleClick());
};
}
connectedCallback() {
super.connectedCallback(), this.updatePosition(), window.addEventListener("resize", this.updatePosition), window.addEventListener("scroll", this.updatePosition);
}
disconnectedCallback() {
super.disconnectedCallback(), window.removeEventListener("resize", this.updatePosition), window.removeEventListener("scroll", this.updatePosition);
}
updated(e2) {
e2.has("targetElement") && this.updatePosition();
}
render() {
return this.isVisible ? fe(_l || (_l = __template(['\n <div\n class="beacon"\n @click="', '"\n @keydown="', '"\n role="button"\n aria-label="Tour step indicator - Click here or the highlighted element to continue"\n tabindex="0"\n title="Click to continue tour"\n ></div>\n '])), this.handleClick, this.handleKeydown) : fe(_m || (_m = __template([""])));
}
};
_e.styles = L(_n || (_n = __template(["\n :host {\n position: fixed;\n z-index: 999998;\n pointer-events: none;\n }\n\n .beacon {\n position: relative;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: rgba(34, 197, 94, 0.7);\n box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);\n animation: pulse 1.5s infinite;\n pointer-events: auto;\n cursor: pointer;\n transform: translate(-50%, -50%);\n }\n\n @keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);\n }\n 70% {\n box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);\n }\n }\n\n .beacon:hover {\n background: rgba(34, 197, 94, 0.9);\n }\n\n /* Reduced motion support */\n @media (prefers-reduced-motion: reduce) {\n .beacon {\n animation: none;\n }\n }\n "]))), g([c({ type: Object })], _e.prototype, "targetElement", 2), g([c({ type: String })], _e.prototype, "stepId", 2), g([l()], _e.prototype, "isVisible", 2), _e = g([Be("sherpa-beacon")], _e);
const Fe = Object.freeze({ __proto__: null, get SherpaBeacon() {
return _e;
} });
f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, x = (e2, t2, i2, s2) => {
var o2, n2, r2 = s2 > 1 ? void 0 : s2 ? y(t2, i2) : t2;
for (o2 = e2.length - 1; o2 >= 0; o2--) (n2 = e2[o2]) && (r2 = (s2 ? n2(t2, i2, r2) : n2(r2)) || r2);
return s2 && r2 && f(t2, i2, r2), r2;
};
let Ze = class extends $e {
constructor() {
super(...arguments), this.isFirstStep = 0, this.isLastStep = 0, this.progress = 0, this.showInfoPanel = 0, this.elementSearchStatus = "idle", this.userMessage = "", this.position = "bottom", this.handlePrevious = () => {
this.dispatchEvent(new CustomEvent("previous-step", { bubbles: 1, composed: 1 }));
}, this.handleNext = () => {
this.dispatchEvent(new CustomEvent("next-step", { bubbles: 1, composed: 1 }));
}, this.handleEnd = () => {
this.dispatchEvent(new CustomEvent("end-tour", { bubbles: 1, composed: 1 }));
}, this.handleRetry = () => {
this.elementSearchStatus = "searching", this.userMessage = "페이지 요소를 기다리는 중입니다. 잠시만 기다려주세요...", this.dispatchEvent(new CustomEvent("retry-element-search", { bubbles: 1, composed: 1 }));
}, this.handleHideInfo = () => {
this.showInfoPanel = 0;
};
}
connectedCallback() {
super.connectedCallback(), this.updatePosition();
}
updatePosition() {
"top" === this.position ? (this.style.top = "0", this.style.bottom = "") : (this.style.top = "", this.style.bottom = "0");
}
renderProgressBar() {
var _a3;
if (!((_a3 = this.tourState) == null ? void 0 : _a3.steps)) return xe;
const e2 = this.tourState.steps.length, t2 = this.tourState.currentStepIndex;
let i2 = 0;
return 1 === e2 ? i2 = 100 : e2 > 1 && (i2 = t2 / (e2 - 1) * 100), i2 = Math.max(0, Math.min(100, i2)), 0 === i2 && 0 === t2 && (i2 = 5), fe(_o || (_o = __template([' <div class="progress-bar" style="width: ', '%"></div> '])), i2);
}
renderInfoPanel() {
return this.showInfoPanel && this.userMessage ? fe(_t || (_t = __template(['\n <div class="info-panel ', '">\n <div class="info-content">\n <div class="info-icon">\n ', '\n </div>\n\n <div class="info-message">', '</div>\n\n <div class="info-actions">\n ', "\n ", "\n </div>\n </div>\n </div>\n "])), this.elementSearchStatus, "searching" === this.elementSearchStatus ? fe(_p || (_p = __template([' <div class="spinner"></div> ']))) : "error" === this.elementSearchStatus ? fe(_q || (_q = __template(['\n <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">\n <path\n d="M12 2L1 21h22L12 2zm0 3.99L19.53 19H4.47L12 5.99zM11 16h2v2h-2v-2zm0-6h2v4h-2v-4z"\n />\n </svg>\n ']))) : xe, this.userMessage, "error" === this.elementSearchStatus ? fe(_r || (_r = __template(['\n <button class="btn btn-text btn-info" @click="', '">\n 다시 시도\n </button>\n '])), this.handleRetry) : xe, "searching" === this.elementSearchStatus ? fe(_s || (_s = __template([' <button class="btn btn-info" @click="', '">숨기기</button> '])), this.handleHideInfo) : xe) : xe;
}
showElementSearching(e2 = "페이지 요소를 기다리는 중입니다. 잠시만 기다려주세요...") {
this.elementSearchStatus = "searching", this.userMessage = e2, this.showInfoPanel = 1;
}
showElementError(e2 = "요소를 찾을 수 없습니다. 다시 시도해주세요.") {
this.elementSearchStatus = "error", this.userMessage = e2, this.showInfoPanel = 1;
}
hideInfoPanel() {
this.showInfoPanel = 0;
}
setPosition(e2) {
this.position = e2, this.updatePosition();
}
render() {
var _a3, _b3, _c3;
if (!((_a3 = this.tourState) == null ? void 0 : _a3.isActive) || !((_b3 = this.tourState) == null ? void 0 : _b3.steps)) return xe;
const e2 = this.tourState.currentStepIndex + 1, t2 = this.tourState.steps.length;
return fe(_u || (_u = __template(['\n <div class="control-panel ', '" role="toolbar" tabindex="0">\n <div class="panel-main">\n <div class="panel-left">\n <div class="tour-title">', '</div>\n\n <div class="progress-bar-container">', '</div>\n\n <div class="step-counter">', " / ", '</div>\n </div>\n\n <div class="panel-controls">\n <button\n class="btn btn-text"\n @click="', '"\n ?disabled="', '"\n aria-label="Previous step"\n style="padding-left: 0px;"\n >\n <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">\n <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />\n </svg>\n 이전\n </button>\n\n <button\n class="btn btn-next"\n @click="', '"\n aria-label="Next step"\n style="padding-right: 0px;"\n >\n ', '\n <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">\n <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />\n </svg>\n </button>\n\n <div class="control-divider">\n <button class="btn btn-icon" @click="', '" aria-label="End tour">\n <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">\n <path\n d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"\n />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n ', "\n </div>\n "])), this.position, ((_c3 = this.tourState.tour) == null ? void 0 : _c3.title) || "Tour", this.renderProgressBar(), e2, t2, this.handlePrevious, this.isFirstStep, this.handleNext, this.isLastStep ? "완료" : "다음", this.handleEnd, this.renderInfoPanel());
}
};
Ze.styles = L(_v || (_v = __template(["\n :host {\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n z-index: 2147483647;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n width: 570px;\n }\n\n .control-panel {\n background: var(--bg, #ffffff);\n border: 1px solid var(--border-muted, #e5e7eb);\n box-shadow:\n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n overflow: hidden;\n transition: all 0.3s ease;\n user-select: none;\n min-height: 56px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .control-panel.top {\n top: 0;\n border-top: 0;\n border-radius: 0 0 0.5rem 0.5rem;\n flex-direction: column;\n }\n\n .control-panel.bottom {\n bottom: 0;\n border-bottom: 0;\n border-radius: 0.5rem 0.5rem 0 0;\n flex-direction: column-reverse;\n }\n\n .panel-main {\n height: 40px;\n padding: 8px 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n }\n\n .panel-left {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 40px;\n }\n\n .tour-title {\n font-size: 14px;\n font-weight: 500;\n color: var(--text, #1f2937);\n line-height: 1.3;\n white-space: wrap;\n word-break: break-all;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 230px;\n height: 40px;\n margin-left: 4px;\n text-align: left;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n }\n\n .progress-bar-container {\n position: relative;\n height: 6px;\n flex: 1;\n min-width: 110px;\n background: rgba(0, 0, 0, 0.08);\n border-radius: 8px;\n overflow: hidden;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n }\n\n .progress-bar {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);\n border-radius: 8px;\n transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n min-width: 6px;\n z-index: 1;\n box-shadow:\n 0 1px 3px rgba(102, 126, 234, 0.3),\n 0 0 0 1px rgba(255, 255, 255, 0.1) inset;\n }\n\n .progress-bar::before {\n content: '';\n position: absolute;\n top: 0;\n left: -50%;\n width: 50%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent 0%,\n rgba(255, 255, 255, 0.4) 50%,\n transparent 100%\n );\n animation: shimmer 1.5s ease-in-out infinite;\n border-radius: 8px;\n }\n\n .progress-dot {\n height: 6px;\n border-radius: 9999px;\n transition: all 0.2s ease;\n }\n\n .progress-dot.current {\n width: 16px;\n background: #22c55e;\n }\n\n .progress-dot.completed {\n width: 6px;\n background: #22c55e;\n }\n\n .progress-dot.pending {\n width: 6px;\n background: var(--muted, #d1d5db);\n }\n\n .step-counter {\n font-size: 12px;\n color: var(--text-muted, #6b7280);\n white-space: nowrap;\n text-align: center;\n min-width: 34px;\n }\n\n .panel-controls {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .btn {\n border: none;\n border-radius: 4px;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n background: var(--disabled-bg, #f9fafb) !important;\n color: var(--disabled-text, #9ca3af) !important;\n border-color: var(--disabled-border, #e5e7eb) !important;\n transform: none !important;\n box-shadow: none !important;\n }\n\n .btn-text {\n height: 24px;\n padding: 0 8px;\n background: transparent;\n color: var(--text, #374151);\n border: 1px solid var(--border-muted, #e5e7eb);\n }\n\n .btn-text:disabled {\n background: var(--disabled-bg, #f9fafb) !important;\n color: var(--disabled-text, #9ca3af) !important;\n border-color: var(--disabled-border, #e5e7eb) !important;\n position: relative;\n }\n\n .btn-text:disabled::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 1px;\n height: 12px;\n background: var(--disabled-text, #9ca3af);\n transform: translate(-50%, -50%) rotate(45deg);\n opacity: 0.6;\n }\n\n .btn-text:hover:not(:disabled) {\n background: var(--hover-bg, #f9fafb);\n }\n\n .btn-next {\n height: 24px;\n padding: 0 8px;\n background: #22c55e;\n color: #ffffff;\n }\n\n .btn-next:disabled {\n background: var(--disabled-bg, #f9fafb) !important;\n color: var(--disabled-text, #9ca3af) !important;\n border: 1px solid var(--disabled-border, #e5e7eb) !important;\n position: relative;\n }\n\n .btn-next:disabled::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 1px;\n height: 12px;\n background: var(--disabled-text, #9ca3af);\n transform: translate(-50%, -50%) rotate(45deg);\n opacity: 0.6;\n }\n\n .btn-next:hover:not(:disabled) {\n background: #16a34a;\n }\n\n .btn-icon {\n width: 16px;\n height: 16px;\n padding: 0;\n background: transparent;\n color: var(--text-muted, #6b7280);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .btn-icon:hover {\n background: var(--hover-bg, #f9fafb);\n color: var(--text, #1f2937);\n }\n\n .control-divider {\n border-left: 1px solid var(--border-muted, #e5e7eb);\n height: 16px;\n margin: 0 4px;\n padding-left: 8px;\n margin-left: 4px;\n }\n\n .info-panel {\n padding: 12px 16px;\n background: var(--bg, #ffffff);\n width: 100%;\n box-sizing: border-box;\n }\n\n .control-panel.top .info-panel {\n border-top: 1px solid var(--border-muted, #e5e7eb);\n animation: slideInFromTop 0.3s ease;\n }\n\n .control-panel.bottom .info-panel {\n border-bottom: 1px solid var(--border-muted, #e5e7eb);\n animation: slideInFromBottom 0.3s ease;\n }\n\n .info-content {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .info-icon {\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .info-message {\n flex: 1;\n font-size: 14px;\n color: var(--text, #1f2937);\n }\n\n .info-actions {\n display: flex;\n gap: 8px;\n }\n\n .info-panel.searching .info-icon {\n color: #3b82f6;\n }\n\n .info-panel.error .info-icon {\n color: #f97316;\n }\n\n .btn-info {\n height: 28px;\n padding: 0 12px;\n font-size: 12px;\n }\n\n .spinner {\n width: 16px;\n height: 16px;\n border: 2px solid #e5e7eb;\n border-top: 2px solid #3b82f6;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes shimmer {\n 0% {\n left: -50%;\n }\n 100% {\n left: 100%;\n }\n }\n\n @keyframes slideInFromTop {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideInFromBottom {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* CSS custom properties for theming */\n :host {\n --bg: #ffffff;\n --border-muted: #e5e7eb;\n --text: #1f2937;\n --text-muted: #6b7280;\n --muted: #d1d5db;\n --hover-bg: #f9fafb;\n --disabled-bg: #f9fafb;\n --disabled-text: #9ca3af;\n --disabled-border: #e5e7eb;\n }\n /* \n @media (prefers-color-scheme: dark) {\n :host {\n --bg: #1f2937;\n --border-muted: #374151;\n --text: #f9fafb;\n --text-muted: #9ca3af;\n --muted: #4b5563;\n --hover-bg: #374151;\n }\n } */\n\n /* High contrast mode */\n /* @media (prefers-contrast: high) {\n :host {\n --border-muted: #000000;\n --text-muted: #000000;\n }\n } */\n\n /* Reduced motion support */\n /* @media (prefers-reduced-motion: reduce) {\n .info-panel {\n animation: none;\n }\n .spinner {\n animation: none;\n }\n } */\n "]))), x([c({ type: Object })], Ze.prototype, "tourState", 2), x([c({ type: Boolean })], Ze.prototype, "isFirstStep", 2), x([c({ type: Boolean })], Ze.prototype, "isLastStep", 2), x([c({ type: Number })], Ze.prototype, "progress", 2), x([l()], Ze.prototype, "showInfoPanel", 2), x([l()], Ze.prototype, "elementSearchStatus", 2), x([l()], Ze.prototype, "userMessage", 2), x([l()], Ze.prototype, "position", 2), Ze = x([Be("sherpa-control-panel")], Ze);
const Ve = Object.freeze({ __proto__: null, get SherpaControlPanel() {
return Ze;
} });
v = Object.defineProperty, w = Object.getOwnPropertyDescriptor, k = (e2, t2, i2, s2) => {
var o2, n2, r2 = s2 > 1 ? void 0 : s2 ? w(t2, i2) : t2;
for (o2 = e2.length - 1; o2 >= 0; o2--) (n2 = e2[o2]) && (r2 = (s2 ? n2(t2, i2, r2) : n2(r2)) || r2);
return s2 && r2 && v(t2, i2, r2), r2;
};
const Ke = [{ name: "Minimized", width: 400, height: 180 }, { name: "Small", width: 400, height: 500 }, { name: "Medium", width: 500, height: 600 }, { name: "Large", width: 600, height: 700 }];
let We = class extends $e {
constructor() {
super(...arguments), this.size = "Medium", this.visible = 0, this.position = { x: 0, y: 0 }, this.isMinimized = 0, this.isDragging = 0, this.isLoading = 0, this.hasError = 0, this.errorMessage = "", this.showSizeMenu = 0, this.isDocumentLoaded = 0, this.dragStart = { x: 0, y: 0 }, this.dragMouseStart = { x: 0, y: 0 }, this.handleWindowResize = () => {
this.constrainPosition();
}, this.handleMouseMove = (e2) => {
if (!this.isDragging) return;
e2.preventDefault();
const t2 = e2.clientY - this.dragMouseStart.y, i2 = Math.max(0, Math.min(window.innerWidth - this.ge.width, this.dragStart.x + (e2.clientX - this.dragMouseStart.x))), s2 = Math.max(0, Math.min(window.innerHeight - 50, this.dragStart.y + t2));
this.position = { x: i2, y: s2 }, this.container && (this.container.style.transform = "translate3d(".concat(this.position.x, "px, ").concat(this.position.y, "px, 0)"));
}, this.handleMouseUp = () => {
var _a3;
this.isDragging && (this.isDragging = 0, (_a3 = this.container) == null ? void 0 : _a3.classList.remove("dragging"));
}, this.handleKeyDown = (e2) => {
"Escape" === e2.key && (this.showSizeMenu ? this.showSizeMenu = 0 : this.handleClose());
}, this.handleSizeButtonClick = (e2) => {
e2.target.closest(".size-dropdown") || (this.showSizeMenu = 0);
};
}
get ge() {
return Ke.find((e2) => e2.name === this.size);
}
get sizeOptions() {
const e2 = window.innerHeight - 100;
return [...Ke.slice(0, 3), __spreadProps(__spreadValues({}, Ke[3]), { height: Math.min(Ke[3].height, e2) })];
}
connectedCallback() {
super.connectedCallback(), this.setupEventListeners(), this.centerOnScreen(), requestAnimationFrame(() => {
this.updateStyles();
});
}
firstUpdated() {
this.updateStyles();
}
disconnectedCallback() {
super.disconnectedCallback(), this.cleanupEventListeners(), this.cleanupBlobUrl();
}
cleanupBlobUrl() {
this.currentBlobUrl && (URL.revokeObjectURL(this.currentBlobUrl), this.currentBlobUrl = void 0);
}
updated(e2) {
if (super.updated(e2), e2.has("document") && this.document) {
const t2 = e2.get("document");
(t2 == null ? void 0 : t2.id) !== this.document.id && (this.isDocumentLoaded = 0, this.fetchDocsEntity());
}
e2.has("initialPosition") && this.initialPosition && (this.position = __spreadValues({}, this.initialPosition)), (e2.has("position") || e2.has("size")) && this.updateStyles(), e2.has("visible") && this.visible && this.updateStyles();
}
setupEventListeners() {
document.addEventListener("mousemove", this.handleMouseMove, { passive: 0 }), document.addEventListener("mouseup", this.handleMouseUp, { passive: 1 }), document.addEventListener("keydown", this.handleKeyDown, { passive: 1 }), document.addEventListener("click", this.handleSizeButtonClick, { passive: 1 }), window.addEventListener("resize", this.handleWindowResize, { passive: 1 });
}
cleanupEventListeners() {
document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp), document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("click", this.handleSizeButtonClick), window.removeEventListener("resize", this.handleWindowResize);
}
constrainPosition() {
const e2 = window.innerWidth - this.ge.width, t2 = window.innerHeight - this.ge.height, i2 = Math.max(0, Math.min(this.position.x, e2)), s2 = Math.max(0, Math.min(this.position.y, t2));
i2 === this.position.x && s2 === this.position.y || (this.position = { x: i2, y: s2 }, this.updateStyles());
}
centerOnScreen() {
if (this.initialPosition) return;
const e2 = window.innerWidth, t2 = window.innerHeight;
this.position = { x: Math.max(50, (e2 - this.ge.width) / 2), y: Math.max(50, (t2 - this.ge.height) / 2) };
}
createProxiedHTML(e2) {
return '\n <!DOCTYPE html>\n <html>\n <head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Loading...</title>\n <style>\n body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif;\n background: #f8f9fa;\n }\n .loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 200px;\n color: #6b7280;\n }\n .spinner {\n width: 32px;\n height: 32px;\n border: 2px solid #e5e7eb;\n border-top: 2px solid #3b82f6;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin-bottom: 16px;\n }\n .content-frame {\n width: 100%;\n height: calc(100vh);\n border: none;\n background: white;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n }\n .error {\n background: #fef2f2;\n border: 1px solid #fecaca;\n border-radius: 8px;\n padding: 16px;\n color: #dc2626;\n text-align: center;\n }\n .proxy-notice {\n background: #eff6ff;\n border: 1px solid #bfdbfe;\n border-radius: 8px;\n padding: 8px 12px;\n margin-bottom: 8px;\n font-size: 12px;\n color: #1e40af;\n text-align: center;\n }\n .navigation-bar {\n background: #ffffff;\n border: 1px solid #e5e7eb;\n border-radius: 8px 8px 0 0;\n padding: 8px 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n color: #6b7280;\n margin-bottom: 0;\n }\n .url-display {\n flex: 1;\n background: #f9fafb;\n border: 1px solid #e5e7eb;\n border-radius: 4px;\n padding: 4px 8px;\n font-family: monospace;\n font-size: 12px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n </style>\n </head>\n <body>\n <div id="loading" class="loading">\n <div class="spinner"></div>\n <p>Loading content...</p>\n </div>\n <div id="error" class="error" style="display: none;">\n <p>Failed to load content. <a href="'.concat(e2, '" target="_blank" rel="noopener noreferrer">Open original page</a></p>\n </div>\n <div id="content" style="display: none;">\n \n </div>\n \n <script>\n let currentUrl = \'').concat(e2, "';\n let currentIframe = null;\n\n function proxyUrl(url) {\n return 'https://api.allorigins.win/get?url=' + encodeURIComponent(url);\n }\n \n function isAbsoluteUrl(url) {\n return /^https?:\\/\\//.test(url);\n }\n \n function resolveUrl(baseUrl, relativeUrl) {\n if (isAbsoluteUrl(relativeUrl)) {\n return relativeUrl;\n }\n \n try {\n return new URL(relativeUrl, baseUrl).href;\n } catch (e) {\n return relativeUrl;\n }\n }\n \n function interceptLinks(iframe, baseUrl) {\n try {\n const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;\n \n // Intercept all link clicks\n iframeDoc.addEventListener('click', function(e) {\n const target = e.target.closest('a');\n if (target && target.href) {\n e.preventDefault();\n e.stopPropagation();\n \n const newUrl = resolveUrl(baseUrl, target.href);\n if (isAbsoluteUrl(newUrl)) {\n loadProxiedContent(newUrl);\n }\n }\n }, true);\n \n // Intercept form submissions\n iframeDoc.addEventListener('submit', function(e) {\n const form = e.target;\n if (form.action) {\n e.preventDefault();\n const newUrl = resolveUrl(baseUrl, form.action);\n if (isAbsoluteUrl(newUrl)) {\n loadProxiedContent(newUrl);\n }\n }\n }, true);\n \n // Update base href to ensure relative links work\n const baseElement = iframeDoc.querySelector('base');\n if (!baseElement) {\n const newBase = iframeDoc.createElement('base');\n newBase.href = baseUrl;\n const head = iframeDoc.querySelector('head');\n if (head) {\n head.insertBefore(newBase, head.firstChild);\n }\n }\n \n } catch (error) {\n console.warn('Could not intercept links due to cross-origin restrictions:', error);\n }\n }\n \n async function loadProxiedContent(url = currentUrl) {\n try {\n document.getElementById('loading').style.display = 'flex';\n document.getElementById('error').style.display = 'none';\n \n if (currentIframe) {\n currentIframe.remove();\n }\n \n const response = await fetch(proxyUrl(url));\n \n if (!response.ok) {\n throw new Error('Proxy request failed: ' + response.status);\n }\n \n const data = await response.json();\n \n if (data.contents) {\n currentUrl = url;\n \n // Create a new iframe with the content\n const iframe = document.createElement('iframe');\n iframe.className = 'content-frame';\n iframe.sandbox = 'allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox';\n \n // Set content and wait for load\n iframe.onload = function() {\n interceptLinks(iframe, url);\n };\n \n iframe.srcdoc = data.contents;\n currentIframe = iframe;\n \n document.getElementById('content').appendChild(iframe);\n document.getElementById('loading').style.display = 'none';\n document.getElementById('content').style.display = 'block';\n } else {\n throw new Error('No content received from proxy');\n }\n } catch (error) {\n console.error('Failed to load proxied content:', error);\n document.getElementById('loading').style.display = 'none';\n document.getElementById('error').style.display = 'block';\n }\n }\n \n // Load content when page is ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => loadProxiedContent());\n } else {\n loadProxiedContent();\n }\n <\/script>\n </body>\n </html>\n ");
}
augmentContent(e2) {
return '<html lang="ko">\n<head>\n <meta charset="UTF-8">\n <title>Sherpa Docs</title>\n <style>\n body {\n font-family: \'Segoe UI\', sans-serif;\n line-height: 1.6;\n padding: 20px;\n background-color: #f9f9f9;\n }\n h2 {\n color: #333;\n }\n .notice {\n background-color: #fff8e1;\n border-left: 6px solid #ffca28;\n padding: 15px;\n margin-bottom: 20px;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 30px;\n background-color: #fff;\n }\n th, td {\n border: 1px solid #ddd;\n padding: 10px;\n vertical-align: top;\n }\n th {\n background-color: #f1f1f1;\n text-align: center;\n }\n td {\n white-space: pre-line;\n }\n \n img {\n max-width: 100%;\n height: auto;\n }\n\n .highlight {\n font-weight: bold;\n }\n\n .notice {\n background-color: #fff8e1;\n border-left: 6px solid #ffca28;\n padding: 15px;\n margin-bottom: 20px;\n }\n </style>\n</head>\n<body>\n '.concat(e2, "\n</body>\n</html>");
}
fetchDocsEntity() {
return __async(this, null, function* () {
if (this.document) try {
this.isLoading = 1, this.hasError = 0;
const e2 = t(), i2 = yield e2.getDocsById(this.document.id);
if (!i2.data) throw Error("No document data received");
this.docsEntity = i2.data, this.loadDocument();
} catch (e2) {
this.hasError = 1, this.errorMessage = "Failed to fetch document details", this.isLoading = 0;
}
});
}
loadDocument() {
return __async(this, null, function* () {
if (this.docsEntity && !this.isDocumentLoaded) {
this.isLoading = 1, this.hasError = 0, this.cleanupBlobUrl();
try {
if (!this.iframe && (yield this.updateComplete, !this.iframe)) return this.hasError = 1, this.errorMessage = "Failed to initialize iframe", this.isLoading = 0, void 0;
if (this.docsEntity.externalUrl) yield this.loadDirectURL(this.docsEntity.externalUrl);
else if (this.docsEntity.internalHtml) {
const e2 = new Blob([this.augmentContent(this.docsEntity.internalHtml)], { type: "text/html" });
this.currentBlobUrl = URL.createObjectURL(e2), this.iframe.src = this.currentBlobUrl;
} else {
const e2 = this.createDocumentHTML();
this.currentBlobUrl = URL.createObjectURL(new Blob([e2], { type: "text/html" })), this.iframe.src = this.currentBlobUrl;
}
this.isDocumentLoaded = 1;
} catch (e2) {
this.hasError = 1, this.errorMessage = "Failed to load document", this.isLoading = 0;
}
}
});
}
loadDirectURL(e2) {
return __async(this, null, function* () {
return new Promise((t2, i2) => {
if (!this.iframe) return i2(Error("Iframe not available")), void 0;
let s2, o2, n2, r2 = 0;
const a2 = () => {
s2 && clearTimeout(s2), o2 && clearTimeout(o2), n2 && clearInterval(n2), this.iframe.removeEventListener("load", l2), this.iframe.removeEventListener("error", p2);
}, c2 = () => {
var _a3;
try {
const t3 = this.iframe.contentDocument || ((_a3 = this.iframe.contentWindow) == null ? void 0 : _a3.document), i3 = this.iframe.contentWindow;
if (!t3) return 1;
if ("about:blank" === t3.location.href) return 1;
if (!t3.body || "" === t3.body.innerHTML.trim()) return 1;
const s3 = t3.body.textContent || "";
if (["refused to frame", "x-frame-options", "content security policy", "frame-ancestors", "not allowed to frame"].some((e3) => s3.toLowerCase().includes(e3))) return 1;
try {
if (i3 && i3.location.href !== e2 && !i3.location.href.startsWith(e2)) return 1;
} catch (d2) {
}
return 0;
} catch (t3) {
return 1;
}
}, l2 = () => {
r2 || (o2 = window.setTimeout(() => {
r2 || (r2 = 1, a2(), c2() ? this.loadProxiedURL(e2).then(t2).catch(i2) : t2());
}, 200));
}, p2 = () => {
r2 || (r2 = 1, a2(), this.loadProxiedURL(e2).then(t2).catch(i2));
};
this.iframe.addEventListener("load", l2), this.iframe.addEventListener("error", p2), s2 = window.setTimeout(() => {
r2 || (r2 = 1, a2(), this.loadProxiedURL(e2).then(t2).catch(i2));
}, 4e3), n2 = setInterval(() => {
if (!r2 && this.iframe.src === e2) try {
const s3 = this.iframe.contentDocument;
s3 && "about:blank" !== s3.location.href || r2 || (r2 = 1, a2(), this.loadProxiedURL(e2).then(t2).catch(i2));
} catch (d2) {
}
}, 2e3);
try {
this.iframe.src = e2;
} catch (h2) {
a2(), this.loadProxiedURL(e2).then(t2).catch(i2);
}
});
});
}
loadProxiedURL(e2) {
return __async(this, null, function* () {
if (!this.iframe) throw Error("Iframe not available");
this.cleanupBlobUrl();
const t2 = this.createProxiedHTML(e2);
this.currentBlobUrl = URL.createObjectURL(new Blob([t2], { type: "text/html" })), this.iframe.src = this.currentBlobUrl;
});
}
createDocumentHTML() {
var _a3, _b3, _c3;
return "\n <!DOCTYPE html>\n <html>\n <head>\n <title>".concat((_a3 = this.document) == null ? void 0 : _a3.title, '</title>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <style>\n body {\n font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif;\n line-height: 1.6;\n color: #333;\n max-width: 800px;\n margin: 0 auto;\n padding: 40px 20px;\n background: #fff;\n }\n h1 {\n color: #2563eb;\n border-bottom: 2px solid #e5e7eb;\n padding-bottom: 10px;\n }\n .meta {\n color: #6b7280;\n font-size: 14px;\n margin-bottom: 30px;\n }\n .content {\n font-size: 16px;\n }\n .placeholder {\n background: #f3f4f6;\n border-radius: 8px;\n padding: 20px;\n margin: 20px 0;\n border-left: 4px solid #3b82f6;\n }\n </style>\n </head>\n <body style="margin: 0; padding: 0;">\n <h1>').concat(((_b3 = this.document) == null ? void 0 : _b3.title) || "Knowledge Base Document", '</h1>\n <div class="meta">\n Document ID: ').concat((_c3 = this.document) == null ? void 0 : _c3.id, ' • Type: Knowledge Base Article\n </div>\n <div class="content">\n <div class="placeholder">\n <strong>📚 Knowledge Base Content</strong>\n <p>This is a placeholder for Docs content. In a real implementation, this would contain:</p>\n <ul>\n <li>Step-by-step instructions</li>\n <li>Screenshots and diagrams</li>\n <li>FAQ sections</li>\n <li>Related articles</li>\n <li>Contact information</li>\n </ul>\n <p>The content would be fetched from your knowledge base API and rendered here.</p>\n </div>\n </div>\n </body>\n </html>\n ');
}
updateStyles() {
this.container && (this.container.style.transform = "translate3d(".concat(this.position.x, "px, ").concat(this.position.y, "px, 0)"), this.container.style.width = this.ge.width + "px", this.container.style.height = this.ge.height + "px");
}
handleHeaderMouseDown(e2) {
var _a3;
e2.preventDefault(), this.isDragging = 1, this.dragStart = __spreadValues({}, this.position), this.dragMouseStart = { x: e2.clientX, y: e2.clientY }, (_a3 = this.container) == null ? void 0 : _a3.classList.add("dragging");
}
handleSizeMenuToggle(e2) {
e2.stopPropagation(), this.isMinimized ? (this.isMinimized = 0, this.showSizeMenu = 1) : this.showSizeMenu = !this.showSizeMenu;
}
handleSizeSelect(e2, t2) {
t2.stopPropagation(), "Minimized" === e2.name ? this.isMinimized = 1 : (this.isMinimized = 0, this.size = e2.name, this.constrainPosition()), this.showSizeMenu = 0, this.updateStyles();
}
getCurrentSizeOption() {
return this.sizeOptions.find(this.isMinimized ? (e2) => "Minimized" === e2.name : (e2) => e2.width === this.ge.width && e2.height === this.ge.height);
}
handleClose() {
var _a3;
this.setAttribute("closing", ""), this.dispatchEvent(new CustomEvent("close-docs", { detail: { documentId: (_a3 = this.document) == null ? void 0 : _a3.id }, bubbles: 1, composed: 1 }));
}
handleIframeLoad() {
this.isLoading = 0, this.hasError = 0, this.docsEntity && !this.isDocumentLoaded && this.loadDocument();
}
handleIframeError() {
this.isLoading && (this.hasError = 1, this.errorMessage = "Failed to load document content", this.isLoading = 0);
}
handleOpenInNewTab() {
var _a3;
((_a3 = this.docsEntity) == null ? void 0 : _a3.externalUrl) && window.open(this.docsEntity.externalUrl, "_blank", "noopener,noreferrer");
}
renderBookIcon() {
return fe(_w || (_w = __template(['\n <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">\n <path\n stroke-linecap="round"\n stroke-linejoin="round"\n d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C20.168 18.477 18.582 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"\n />\n </svg>\n '])));
}
renderSizeIcon() {
return fe(_x || (_x = __template(['\n <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">\n <path\n stroke-linecap="round"\n stroke-linejoin="round"\n d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"\n />\n </svg>\n '])));
}
renderCloseIcon() {
return fe(_y || (_y = __template(['\n <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">\n <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />\n </svg>\n '])));
}
renderErrorIcon() {
return fe(_z || (_z = __template(['\n <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">\n <path\n stroke-linecap="round"\n stroke-linejoin="round"\n d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"\n />\n </svg>\n '])));
}
renderExternalLinkIcon() {
return fe(_A || (_A = __template(['\n <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">\n <path\n stroke-linecap="round"\n stroke-linejoin="round"\n d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"\n />\n </svg>\n '])));
}
render() {
var _a3;
if (!this.visible || !this.document) return fe(_B || (_B = __template([""])));
const e2 = ["docs-container", this.isMinimized && "minimized", this.isDragging && "dragging"].filter(Boolean).join(" "), t2 = ["docs-content", this.isMinimized && "hidden"].filter(Boolean).join(" "), i2 = this.getCurrentSizeOption();
return fe(_I || (_I = __template(['\n <div\n class="', '"\n style="transform: translate3d(', "px, ", "px, 0); width: ", "px; height: ", 'px; "\n >\n <div class="docs-header" @mousedown=', '>\n <div class="docs-icon">', '</div>\n <h3 class="docs-title">', '</h3>\n <div class="docs-controls">\n <div class="size-dropdown">\n <button class="docs-button size" @click=', ' title="Resize">\n ', '\n </button>\n <div class="size-menu ', '">\n ', '\n </div>\n </div>\n <button class="docs-button close" @click=', ' title="Close">\n ', '\n </button>\n </div>\n </div>\n\n <div class="', '">\n <!-- Always render iframe, but show loading overlay when needed -->\n <iframe\n class="docs-iframe"\n @load=', "\n @error=", '\n title="', '"\n sandbox="allow-same-origin allow-scripts allow-forms"\n style="', '"\n ></iframe>\n\n ', "\n ", "\n </div>\n </div>\n "])), e2, this.position.x, this.position.y, this.ge.width, this.ge.height, this.handleHeaderMouseDown, this.renderBookIcon(), this.document.title, this.handleSizeMenuToggle, this.renderSizeIcon(), this.showSizeMenu ? "visible" : "", this.sizeOptions.map((e3) => fe(_E || (_E = __template(['\n <div\n class="size-option ', '"\n @click=', "\n >\n <span>", "</span>\n ", "\n </div>\n "])), (i2 == null ? void 0 : i2.name) === e3.name ? "active" : "", (t3) => this.handleSizeSelect(e3, t3), e3.name, "Minimized" === e3.name ? fe(_C || (_C = __template([""]))) : fe(_D || (_D = __template(['<span class="size-dimensions"\n >', "×", "</span\n >"])), e3.width, e3.height))), this.handleClose, this.renderCloseIcon(), t2, this.handleIframeLoad, this.handleIframeError, this.document.title, this.isLoading || this.hasError ? "visibility: hidden;" : "", this.isLoading ? fe(_F || (_F = __template(['\n <div class="docs-loading">\n <div class="docs-loading-spinner"></div>\n <p>Loading document...</p>\n </div>\n ']))) : "", this.hasError ? fe(_H || (_H = __template(['\n <div class="docs-error">\n <div class="docs-error-icon">', '</div>\n <div class="docs-error-title">Failed to Load</div>\n <div class="docs-error-message">', "</div>\n ", "\n </div>\n "])), this.renderErrorIcon(), this.errorMessage, ((_a3 = this.docsEntity) == null ? void 0 : _a3.externalUrl) ? fe(_G || (_G = __template(['\n <button\n class="docs-open-external"\n @click=', '\n title="Open in new tab"\n >\n ', " Open in New Tab\n </button>\n "])), this.handleOpenInNewTab, this.renderExternalLinkIcon()) : "") : "");
}
};
We.styles = L(_J || (_J = __template(["\n :host {\n --sherpa-docs-surface: rgba(31, 41, 55, 0.98);\n --sherpa-docs-border: rgba(255, 255, 255, 0.2);\n --sherpa-docs-text: #ffffff;\n --sherpa-docs-text-muted: #d1d5db;\n --sherpa-docs-primary: #3b82f6;\n --sherpa-docs-primary-hover: #2563eb;\n --sherpa-docs-danger: #ef4444;\n --sherpa-docs-danger-hover: #dc2626;\n --sherpa-docs-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);\n\n position: absolute;\n top: 0;\n left: 0;\n z-index: 9998;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n user-select: none;\n contain: layout style paint;\n will-change: transform;\n }\n\n .docs-container {\n position: fixed;\n display: flex;\n flex-direction: column;\n background: var(--sherpa-docs-surface);\n opacity: 0.98;\n backdrop-filter: blur(20px);\n border: 1px solid var(--sherpa-docs-border);\n border-radius: 12px;\n box-shadow: var(--sherpa-docs-shadow);\n overflow: hidden;\n transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n min-width: 400px;\n transform-origin: top left;\n pointer-events: auto;\n }\n\n .docs-container.dragging {\n transform: rotate(2deg);\n box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.6);\n transition: none;\n z-index: 12001;\n }\n\n .docs-container.minimized {\n height: auto !important;\n }\n\n .docs-header {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n background: rgba(255, 255, 255, 0.05);\n border-bottom: 1px solid var(--sherpa-docs-border);\n cursor: move;\n user-select: none;\n touch-action: none;\n }\n\n .docs-header:hover {\n background: rgba(255, 255, 255, 0.08);\n }\n\n .docs-icon {\n width: 20px;\n height: 20px;\n margin-right: 8px;\n color: var(--sherpa-primary);\n flex-shrink: 0;\n }\n\n .docs-title {\n flex: 1;\n color: var(--sherpa-docs-text);\n font-size: 14px;\n font-weight: 600;\n margin: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .docs-controls {\n display: flex;\n align-items: center;\n gap: 4px;\n margin-left: 12px;\n }\n\n .docs-button {\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--sherpa-docs-text-muted);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n padding: 0;\n }\n\n .docs-button:hover {\n background: rgba(255, 255, 255, 0.1);\n color: var(--sherpa-docs-text);\n }\n\n .docs-button.minimize:hover {\n background: rgba(251, 191, 36, 0.2);\n color: #fbbf24;\n }\n\n .docs-button.size:hover {\n background: rgba(59, 130, 246, 0.2);\n color: var(--sherpa-docs-primary);\n }\n\n .docs-button.close:hover {\n background: rgba(239, 68, 68, 0.2);\n color: var(--sherpa-docs-danger);\n }\n\n .docs-button svg {\n width: 16px;\n height: 16px;\n }\n\n .size-dropdown {\n position: relative;\n display: inline-block;\n }\n\n .size-menu {\n position: absolute;\n top: 100%;\n right: 0;\n background: var(--sherpa-docs-surface);\n border: 1px solid var(--sherpa-docs-border);\n border-radius: 8px;\n box-shadow: var(--sherpa-docs-shadow);\n min-width: 160px;\n z-index: 12002;\n opacity: 0;\n transform: translateY(-10px);\n transition: all 0.2s ease;\n pointer-events: none;\n }\n\n .size-menu.visible {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n }\n\n .size-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 12px;\n color: var(--sherpa-docs-text);\n cursor: pointer;\n font-size: 13px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n }\n\n .size-option:last-child {\n border-bottom: none;\n }\n\n .size-option:hover {\n background: rgba(255, 255, 255, 0.1);\n }\n\n .size-option.active {\n background: rgba(59, 130, 246, 0.2);\n color: var(--sherpa-docs-primary);\n }\n\n .size-dimensions {\n color: var(--sherpa-docs-text-muted);\n font-size: 11px;\n }\n\n .docs-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n position: relative; /* Enable absolute positioning for loading/error overlays */\n }\n\n .docs-content.hidden {\n display: none;\n }\n\n .docs-iframe {\n flex: 1;\n border: none;\n width: 100%;\n background: white;\n border-radius: 0 0 11px 11px;\n }\n\n .docs-loading {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n color: var(--sherpa-docs-text-muted);\n background: var(--sherpa-docs-surface);\n border-radius: 0 0 11px 11px;\n }\n\n .docs-loading-spinner {\n width: 32px;\n height: 32px;\n border: 2px solid rgba(255, 255, 255, 0.1);\n border-top: 2px solid var(--sherpa-primary);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin-bottom: 16px;\n }\n\n .docs-error {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n color: var(--sherpa-docs-text-muted);\n text-align: center;\n background: var(--sherpa-docs-surface);\n border-radius: 0 0 11px 11px;\n }\n\n .docs-error-icon {\n width: 48px;\n height: 48px;\n color: var(--sherpa-docs-danger);\n margin-bottom: 16px;\n }\n\n .docs-error-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--sherpa-docs-text);\n margin-bottom: 8px;\n }\n\n .docs-error-message {\n font-size: 14px;\n line-height: 1.5;\n }\n\n .docs-open-external {\n margin-top: 16px;\n padding: 8px 16px;\n background: var(--sherpa-docs-primary);\n color: white;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n text-decoration: none;\n }\n\n .docs-open-external:hover {\n background: var(--sherpa-docs-primary-hover);\n transform: translateY(-1px);\n }\n\n .docs-open-external svg {\n width: 16px;\n height: 16px;\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes slideIn {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(-20px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }\n\n @keyframes slideOut {\n from {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n to {\n opacity: 0;\n transform: scale(0.95) translateY(-20px);\n }\n }\n\n :host([closing]) .docs-container {\n /* animation: slideOut 0.2s ease-out forwards; */\n }\n\n :host(:not([closing])) .docs-container {\n /* animation: slideIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); */\n }\n\n @media (prefers-reduced-motion: reduce) {\n * {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n }\n "]))), k([c({ type: String })], We.prototype, "size", 2), k([c({ type: Boolean, reflect: 1 })], We.prototype, "visible", 2), k([c({ type: Object })], We.prototype, "document", 2), k([c({ type: Object })], We.prototype, "initialPosition", 2), k([l()], We.prototype, "docsEntity", 2), k([l()], We.prototype, "position", 2), k([l()], We.prototype, "isMinimized", 2), k([l()], We.prototype, "isDragging", 2), k([l()], We.prototype, "isLoading", 2), k([l()], We.prototype, "hasError", 2), k([l()], We.prototype, "errorMessage", 2), k([l()], We.prototype, "showSizeMenu", 2), k([l()], We.prototype, "isDocumentLoaded", 2), k([l()], We.prototype, "currentBlobUrl", 2), k([d(".docs-container")], We.prototype, "container", 2), k([d(".docs-iframe")], We.prototype, "iframe", 2), We = k([Be("sherpa-docs")], We);
const He = Object.freeze({ __proto__: null, get SherpaDocs() {
return We;
} });
export {
z as M,
C as P,
L as a,
r as b,
s as c,
a as d,
d as e,
e as f,
t as g,
i as h,
$e as i,
qe as j,
Fe as k,
Ve as l,
He as m,
c as n,
l as r,
Le as s,
Be as t,
fe as x
};