element-prompt-builder
Version:
React component library for inspecting DOM elements and generating AI prompts
687 lines (669 loc) • 86.8 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
ElementHighlighter: () => ElementHighlighter,
ElementInspector: () => ElementInspector,
ElementSelector: () => ElementSelector,
createElementsPrompt: () => createElementsPrompt,
generateElementContext: () => generateElementContext,
getElementAttributes: () => getElementAttributes,
getMostSpecificElementAtPoint: () => getMostSpecificElementAtPoint,
getOffsetsFromPointToElement: () => getOffsetsFromPointToElement,
getXPathForElement: () => getXPathForElement,
isElementAtPoint: () => isElementAtPoint
});
module.exports = __toCommonJS(index_exports);
// #style-inject:#style-inject
function styleInject(css, { insertAt } = {}) {
if (!css || typeof document === "undefined") return;
const head = document.head || document.getElementsByTagName("head")[0];
const style = document.createElement("style");
style.type = "text/css";
if (insertAt === "top") {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
// src/styles/global.css
styleInject('/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root,\n :host {\n --font-sans:\n ui-sans-serif,\n system-ui,\n sans-serif,\n "Apple Color Emoji",\n "Segoe UI Emoji",\n "Segoe UI Symbol",\n "Noto Color Emoji";\n --font-mono:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n "Liberation Mono",\n "Courier New",\n monospace;\n --color-red-400: oklch(70.4% 0.191 22.216);\n --color-red-700: oklch(50.5% 0.213 27.518);\n --color-blue-50: oklch(97% 0.014 254.604);\n --color-blue-200: oklch(88.2% 0.059 254.128);\n --color-blue-500: oklch(62.3% 0.214 259.815);\n --color-blue-700: oklch(48.8% 0.243 264.376);\n --color-blue-800: oklch(42.4% 0.199 265.638);\n --color-blue-950: oklch(28.2% 0.091 267.935);\n --color-indigo-500: oklch(58.5% 0.233 277.117);\n --color-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-500: oklch(55.1% 0.027 264.364);\n --color-gray-600: oklch(44.6% 0.03 256.802);\n --color-gray-700: oklch(37.3% 0.034 259.733);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-xl: 0.75rem;\n --animate-spin: spin 1s linear infinite;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html,\n :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b,\n strong {\n font-weight: bolder;\n }\n code,\n kbd,\n samp,\n pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol,\n ul,\n menu {\n list-style: none;\n }\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n button,\n input,\n select,\n optgroup,\n textarea,\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::-moz-placeholder {\n opacity: 1;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::-moz-placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit,\n ::-webkit-datetime-edit-year-field,\n ::-webkit-datetime-edit-month-field,\n ::-webkit-datetime-edit-day-field,\n ::-webkit-datetime-edit-hour-field,\n ::-webkit-datetime-edit-minute-field,\n ::-webkit-datetime-edit-second-field,\n ::-webkit-datetime-edit-millisecond-field,\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button,\n input:where([type=button], [type=reset], [type=submit]),\n ::file-selector-button {\n -webkit-appearance: button;\n -moz-appearance: button;\n appearance: button;\n }\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=until-found])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .visible {\n visibility: visible;\n }\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-width: 0;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .inset-y-0 {\n inset-block: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-\\[0\\.5px\\] {\n top: 0.5px;\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-6 {\n right: calc(var(--spacing) * 6);\n }\n .bottom-6 {\n bottom: calc(var(--spacing) * 6);\n }\n .left-\\[0\\.5px\\] {\n left: 0.5px;\n }\n .z-50 {\n z-index: 50;\n }\n .z-\\[9998\\] {\n z-index: 9998;\n }\n .z-\\[9999\\] {\n z-index: 9999;\n }\n .z-\\[10000\\] {\n z-index: 10000;\n }\n .z-\\[10001\\] {\n z-index: 10001;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n .-ml-1 {\n margin-left: calc(var(--spacing) * -1);\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .inline {\n display: inline;\n }\n .inline-flex {\n display: inline-flex;\n }\n .field-sizing-content {\n field-sizing: content;\n }\n .h-0 {\n height: calc(var(--spacing) * 0);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-screen {\n height: 100vh;\n }\n .min-h-16 {\n min-height: calc(var(--spacing) * 16);\n }\n .w-0 {\n width: calc(var(--spacing) * 0);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n .w-\\[350px\\] {\n width: 350px;\n }\n .w-full {\n width: 100%;\n }\n .w-screen {\n width: 100vw;\n }\n .min-w-\\[8rem\\] {\n min-width: 8rem;\n }\n .min-w-\\[300px\\] {\n min-width: 300px;\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .cursor-cell {\n cursor: cell;\n }\n .cursor-default {\n cursor: default;\n }\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .items-center {\n align-items: center;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n .border-t-8 {\n border-top-style: var(--tw-border-style);\n border-top-width: 8px;\n }\n .border-r-8 {\n border-right-style: var(--tw-border-style);\n border-right-width: 8px;\n }\n .border-b-8 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 8px;\n }\n .border-l-8 {\n border-left-style: var(--tw-border-style);\n border-left-width: 8px;\n }\n .\\!border-none {\n --tw-border-style: none !important;\n border-style: none !important;\n }\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-red-400 {\n border-color: var(--color-red-400);\n }\n .border-transparent {\n border-color: transparent;\n }\n .border-t-gray-800 {\n border-top-color: var(--color-gray-800);\n }\n .border-t-white {\n border-top-color: var(--color-white);\n }\n .border-b-gray-800 {\n border-bottom-color: var(--color-gray-800);\n }\n .border-b-white {\n border-bottom-color: var(--color-white);\n }\n .bg-\\[\\#3b82f6\\] {\n background-color: #3b82f6;\n }\n .bg-\\[\\#93c5fd\\] {\n background-color: #93c5fd;\n }\n .bg-\\[\\#2563eb\\] {\n background-color: #2563eb;\n }\n .bg-\\[rgba\\(52\\,53\\,65\\,0\\.8\\)\\] {\n background-color: rgba(52, 53, 65, 0.8);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .fill-black {\n fill: var(--color-black);\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .px-0 {\n padding-inline: calc(var(--spacing) * 0);\n }\n .px-0\\.5 {\n padding-inline: calc(var(--spacing) * 0.5);\n }\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * 0.5);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .pr-\\[40px\\] {\n padding-right: 40px;\n }\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[15px\\] {\n font-size: 15px;\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .\\!whitespace-nowrap {\n white-space: nowrap !important;\n }\n .text-blue-500 {\n color: var(--color-blue-500);\n }\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n .text-gray-700 {\n color: var(--color-gray-700);\n }\n .text-red-400 {\n color: var(--color-red-400);\n }\n .text-white {\n color: var(--color-white);\n }\n .underline {\n text-decoration-line: underline;\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-25 {\n opacity: 25%;\n }\n .opacity-50 {\n opacity: 50%;\n }\n .opacity-75 {\n opacity: 75%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .\\!shadow-none {\n --tw-shadow: 0 0 #0000 !important;\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow) !important;\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-xs {\n --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .\\!ring-0 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow) !important;\n }\n .ring {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .outline-hidden {\n --tw-outline-style: none;\n outline-style: none;\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n }\n .transition {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to,\n opacity,\n box-shadow,\n transform,\n translate,\n scale,\n rotate,\n filter,\n -webkit-backdrop-filter,\n backdrop-filter,\n display,\n visibility,\n content-visibility,\n overlay,\n pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[color\\,box-shadow\\] {\n transition-property: color, box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-100 {\n --tw-duration: 100ms;\n transition-duration: 100ms;\n }\n .duration-150 {\n --tw-duration: 150ms;\n transition-duration: 150ms;\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .hover\\:border-red-700 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-red-700);\n }\n }\n }\n .hover\\:bg-\\[\\#1d4ed8\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #1d4ed8;\n }\n }\n }\n .hover\\:bg-\\[\\#60a5fa\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #60a5fa;\n }\n }\n }\n .hover\\:bg-\\[\\#2563eb\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #2563eb;\n }\n }\n }\n .hover\\:text-blue-700 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-blue-700);\n }\n }\n }\n .hover\\:text-red-700 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-red-700);\n }\n }\n }\n .focus\\:border-indigo-500 {\n &:focus {\n border-color: var(--color-indigo-500);\n }\n }\n .focus\\:ring-0 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n .focus\\:ring-indigo-500 {\n &:focus {\n --tw-ring-color: var(--color-indigo-500);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .focus-visible\\:ring-1 {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n .focus-visible\\:ring-\\[3px\\] {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n .focus-visible\\:outline-hidden {\n &:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n }\n }\n .disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .data-disabled\\:pointer-events-none {\n &[data-disabled] {\n pointer-events: none;\n }\n }\n .data-disabled\\:opacity-50 {\n &[data-disabled] {\n opacity: 50%;\n }\n }\n .\\*\\*\\:data-tag\\:rounded {\n :is(& *) {\n &[data-tag] {\n border-radius: 0.25rem;\n }\n }\n }\n .\\*\\*\\:data-tag\\:bg-blue-200 {\n :is(& *) {\n &[data-tag] {\n background-color: var(--color-blue-200);\n }\n }\n }\n .\\*\\*\\:data-tag\\:py-px {\n :is(& *) {\n &[data-tag] {\n padding-block: 1px;\n }\n }\n }\n .\\*\\*\\:data-tag\\:text-blue-950 {\n :is(& *) {\n &[data-tag] {\n color: var(--color-blue-950);\n }\n }\n }\n .md\\:text-sm {\n @media (width >= 48rem) {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n }\n .dark\\:text-gray-600 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-gray-600);\n }\n }\n .dark\\:\\*\\*\\:data-tag\\:bg-blue-800 {\n @media (prefers-color-scheme: dark) {\n :is(& *) {\n &[data-tag] {\n background-color: var(--color-blue-800);\n }\n }\n }\n }\n .dark\\:\\*\\*\\:data-tag\\:text-blue-50 {\n @media (prefers-color-scheme: dark) {\n :is(& *) {\n &[data-tag] {\n color: var(--color-blue-50);\n }\n }\n }\n }\n}\nbody span[data-tag] {\n background-color: #ebf5fb !important;\n color: #1566a4 !important;\n border-radius: 4px !important;\n}\n.bg-\\[\\#3b82f6\\] {\n background-color: #3b82f6;\n}\n.hover\\:bg-\\[\\#2563eb\\]:hover {\n background-color: #2563eb;\n}\n.-translate-y-1\\/2 {\n transform: translateY(-50%);\n}\n.border-red-400 {\n border-color: #ff6467;\n}\n.border-t-8 {\n border-top-width: 8px !important;\n}\n.border-b-8 {\n border-bottom-width: 8px !important;\n}\n.border-r-8 {\n border-right-width: 8px !important;\n}\n.border-l-8 {\n border-left-width: 8px !important;\n}\n.border-transparent {\n border-color: transparent !important;\n}\n.border-t-white {\n border-top-color: white !important;\n}\n.border-b-white {\n border-bottom-color: white !important;\n}\n.shadow-lg {\n box-shadow:\n 0 0 #0000,\n 0 0 #0000,\n 0 0 #0000,\n 0 0 #0000,\n 0 10px 15px -3px #0000001a,\n 0 4px 6px -4px #0000001a;\n}\n.text-red-400 {\n color: #ff6467;\n}\n.hover\\:border-red-700 {\n border-color: #c10007;\n}\n.hover\\:text-red-700 {\n color: #c10007;\n}\n.bg-\\[\\#4f39f6\\] {\n background-color: #4f39f6;\n}\n.hover\\:bg-\\[\\#432dd7\\]:hover {\n background-color: #432dd7;\n}\n.text-gray-700 {\n color: #364153;\n}\n.text-xs {\n font-size: 12px;\n}\n.text-white {\n color: white;\n}\n.pr-\\[40px\\] {\n padding-right: 40px !important;\n}\n.text-blue-500 {\n color: #2b7fff;\n}\n.element-inspector-menu {\n color: black;\n}\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *,\n ::before,\n ::after,\n ::backdrop {\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-duration: initial;\n }\n }\n}\n');
// src/ElementSelector.tsx
var import_react = require("react");
// src/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
var isElementAtPoint = (element, clientX, clientY) => {
const boundingRect = element.getBoundingClientRect();
const isInHorizontalBounds = clientX >= boundingRect.left && clientX <= boundingRect.left + boundingRect.width;
const isInVerticalBounds = clientY >= boundingRect.top && clientY <= boundingRect.top + boundingRect.height;
return isInHorizontalBounds && isInVerticalBounds;
};
function getOffsetsFromPointToElement(refElement, x, y) {
const referenceClientBounds = refElement.getBoundingClientRect();
const offsetTop = (y - referenceClientBounds.top) * 100 / referenceClientBounds.height;
const offsetLeft = (x - referenceClientBounds.left) * 100 / referenceClientBounds.width;
return {
offsetTop,
offsetLeft
};
}
var getXPathForElement = (element, useId = true) => {
if (element.id && useId) {
return `//*[@id="${element.id}"]`;
}
let nodeElem = element;
const parts = [];
while (nodeElem && Node.ELEMENT_NODE === nodeElem.nodeType) {
let nbOfPreviousSiblings = 0;
let hasNextSiblings = false;
let sibling = nodeElem.previousSibling;
while (sibling) {
if (sibling.nodeType !== Node.DOCUMENT_TYPE_NODE && sibling.nodeName === nodeElem.nodeName) {
nbOfPreviousSiblings++;
}
sibling = sibling.previousSibling;
}
sibling = nodeElem.nextSibling;
while (sibling) {
if (sibling.nodeName === nodeElem.nodeName) {
hasNextSiblings = true;
break;
}
sibling = sibling.nextSibling;
}
const prefix = nodeElem.prefix ? `${nodeElem.prefix}:` : "";
const nth = nbOfPreviousSiblings || hasNextSiblings ? `[${nbOfPreviousSiblings + 1}]` : "";
parts.push(prefix + nodeElem.localName + nth);
nodeElem = nodeElem.parentElement;
}
return parts.length ? `/${parts.reverse().join("/")}` : "";
};
function getElementAttributes(element) {
const attrs = {};
const priorityAttrs = [
"id",
"class",
"name",
"type",
"href",
"src",
"alt",
"for",
"placeholder"
];
const dataAttrs = [];
for (let i = 0; i < element.attributes.length; i++) {
const attr = element.attributes[i];
if (attr.name.startsWith("data-")) {
dataAttrs.push({ name: attr.name, value: attr.value });
} else if (priorityAttrs.includes(attr.name.toLowerCase()) || attr.name.toLowerCase() !== "style") {
attrs[attr.name] = attr.value;
}
}
dataAttrs.forEach((da) => {
attrs[da.name] = da.value;
});
return attrs;
}
function generateElementContext(element, index, totalElements) {
var _a;
let context = "";
if (totalElements > 1) {
context += `#### Element ${index + 1}
`;
}
context += `- **Tag**: ${element.tagName.toLowerCase()}
`;
const id = element.id;
if (id) {
context += `- **ID**: ${id}
`;
}
const classes = Array.from(element.classList).join(", ");
if (classes) {
context += `- **Classes**: ${classes}
`;
}
const attributes = getElementAttributes(element);
if (Object.keys(attributes).length > 0) {
context += `- **Attributes**:
`;
for (const [key, value] of Object.entries(attributes)) {
if (key.toLowerCase() !== "class" || !classes) {
context += ` - ${key}: ${value}
`;
}
}
}
const text = (_a = element.innerText) == null ? void 0 : _a.trim();
if (text) {
const maxLength = 100;
context += `- **Text**: ${text.length > maxLength ? `${text.substring(0, maxLength)}...` : text}
`;
}
context += `- **Structural Context**:
`;
if (element.parentElement) {
const parent = element.parentElement;
context += ` - **Parent**:
`;
context += ` - Tag: ${parent.tagName.toLowerCase()}
`;
if (parent.id) {
context += ` - ID: ${parent.id}
`;
}
const parentClasses = Array.from(parent.classList).join(", ");
if (parentClasses) {
context += ` - Classes: ${parentClasses}
`;
}
} else {
context += ` - **Parent**: No parent element found (likely root or disconnected)
`;
}
try {
const styles = window.getComputedStyle(element);
const relevantStyles = {
color: styles.color,
backgroundColor: styles.backgroundColor,
fontSize: styles.fontSize,
fontWeight: styles.fontWeight,
display: styles.display
};
context += `- **Styles**:
`;
for (const [key, value] of Object.entries(relevantStyles)) {
context += ` - ${key}: ${value}
`;
}
} catch (e) {
context += `- **Styles**: Could not retrieve computed styles
`;
}
context += `
`;
return context;
}
function createElementsPrompt(selectedElements, userPrompt) {
if (!selectedElements || selectedElements.length === 0) {
return `
${userPrompt}
### Context
No specific element was selected on the page. Please analyze the page code in general or ask for clarification.`.trim();
}
let detailedContext = "";
const totalElements = selectedElements.length;
selectedElements.forEach((element, index) => {
detailedContext += generateElementContext(element, index, totalElements);
});
const sectionHeader = totalElements > 1 ? "### Selected Elements" : "### Selected Element";
return `
${userPrompt}
${sectionHeader}
${detailedContext.trim()}`.trim();
}
function getMostSpecificElementAtPoint(x, y, excludeSelector) {
const fullExcludeSelector = excludeSelector ? `${excludeSelector}, .element-selector, [data-element-selector="true"]` : `.element-selector, [data-element-selector="true"]`;
const elements = document.elementsFromPoint(x, y);
const eligibleElements = elements.filter((element) => {
if (fullExcludeSelector && (element.matches(fullExcludeSelector) || element.closest(fullExcludeSelector))) {
return false;
}
if (element.tagName !== "svg" && element.closest("svg")) {
return false;
}
if (element.classList.contains("element-selector") || element.hasAttribute("data-element-selector")) {
return false;
}
return isElementAtPoint(element, x, y);
});
if (eligibleElements.length === 0) {
return document.body;
}
return eligibleElements[0];
const sortedElements = [...eligibleElements].sort((a, b) => {
const aDepth = getElementDepth(a);
const bDepth = getElementDepth(b);
if (aDepth !== bDepth) {
return bDepth - aDepth;
}
const aChildren = a.children.length;
const bChildren = b.children.length;
if (aChildren !== bChildren) {
return aChildren - bChildren;
}
const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();
const aArea = aRect.width * aRect.height;
const bArea = bRect.width * bRect.height;
return aArea - bArea;
});
return sortedElements[0];
}
function getElementDepth(element) {
let depth = 0;
let current = element;
while (current.parentElement) {
depth++;
current = current.parentElement;
}
return depth;
}
var extractElementProperties = (el) => {
const getDirectTextContent = (element) => {
const hasChildElementsWithText = Array.from(element.children).some((child) => {
return child.textContent && child.textContent.trim().length > 0;
});
if (hasChildElementsWithText) {
return "";
}
let text = "";
for (const node of element.childNodes) {
if (node.nodeType === Node.TEXT_NODE) {
text += node.textContent || "";
}
}
return text.trim();
};
const checkIsDuplicated = (element) => {
const simplifyId = element.getAttribute("data-simplify-id");
if (!simplifyId) {
return false;
}
const elementsWithSameId = document.querySelectorAll(`[data-simplify-id="${simplifyId}"]`);
return elementsWithSameId.length > 1;
};
const getElementStyles = (element) => {
const styles = {};
for (let i = 0; i < element.style.length; i++) {
const prop = element.style[i];
const value = element.style.getPropertyValue(prop);
if (value) {
const camelProp = prop.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
styles[camelProp] = value;
}
}
return styles;
};
return {
tagName: el.tagName,
id: el.id,
className: typeof el.className === "string" ? el.className : el.className.baseVal || "",
style: getElementStyles(el),
isDuplicated: checkIsDuplicated(el),
textContent: getDirectTextContent(el),
attributes: Array.from(el.attributes).map((attr) => ({
name: attr.name,
value: attr.value
}))
};
};
var getAllFormElements = () => {
const formElements = Array.from(
document.querySelectorAll("[data-name][data-description]")
).filter((formEl) => formEl instanceof HTMLElement);
const dataNames = formElements.map((el) => el.getAttribute("data-name") || "");
return dataNames.filter(Boolean);
};
function generateEventHandlerPrompt(payload) {
const { event, action, elements } = payload;
if (!event || !action || (elements == null ? void 0 : elements.length) === 0) {
return "";
}
let actionDescription = "";
if (action === "triggerWorkflow") {
actionDescription = `trigger the following workflow`;
}
return `
###
- Add an event handler to this element that will listen for the "${event}" event and ${actionDescription} when triggered.`;
}
// src/ElementSelector.tsx
var import_jsx_runtime = require("react/jsx-runtime");
function ElementSelector({
onElementHovered,
onElementUnhovered,
onElementSelected,
ignoreList = [],
excludeSelector = "",
className = "",
style = {}
}) {
const lastHoveredElement = (0, import_react.useRef)(null);
const handleMouseMove = (0, import_react.useCallback)(
(event) => {
const { clientX, clientY } = event;
const overlayElement = event.currentTarget;
if (overlayElement) {
overlayElement.style.pointerEvents = "none";
}
const refElement = getMostSpecificElementAtPoint(clientX, clientY, excludeSelector);
if (overlayElement) {
overlayElement.style.pointerEvents = "auto";
}
if (ignoreList.includes(refElement)) return;
if (refElement === overlayElement || overlayElement && overlayElement.contains(refElement)) {
return;
}
if (lastHoveredElement.current !== refElement) {
lastHoveredElement.current = refElement;
onElementHovered(refElement);
}
},
[onElementHovered, ignoreList, excludeSelector]
);
const handleMouseLeave = (0, import_react.useCallback)(() => {
lastHoveredElement.current = null;
onElementUnhovered();
}, [onElementUnhovered]);
const handleMouseClick = (0, import_react.useCallback)(
(event) => {
event.preventDefault();
event.stopPropagation();
const { clientX, clientY } = event;
const overlayElement = event.currentTarget;
if (overlayElement) {
overlayElement.style.pointerEvents = "none";
}
const clickedElement = getMostSpecificElementAtPoint(clientX, clientY, excludeSelector);
if (overlayElement) {
overlayElement.style.pointerEvents = "auto";
}
if (clickedElement === overlayElement || overlayElement && overlayElement.contains(clickedElement)) {
return;
}
lastHoveredElement.current = clickedElement;
onElementSelected(clickedElement);
},
[onElementSelected, ignoreList, excludeSelector]
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
className: cn(
"element-selector fixed inset-0 h-screen w-screen cursor-cell z-[9999] pointer-events-auto",
className
),
"data-element-selector": "true",
style,
onMouseMove: handleMouseMove,
onMouseLeave: handleMouseLeave,
onClick: handleMouseClick,
role: "button",
tabIndex: 0
}
);
}
// src/ElementHighlighter.tsx
var import_react2 = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
function ElementHighlighter({
element,
className = "",
style = {},
updateRate = 30,
children,
borderColor = "rgba(59, 130, 246, 0.8)",
backgroundColor = "rgba(59, 130, 246, 0.2)"
}) {
const boxRef = (0, import_react2.useRef)(null);
const updateIntervalRef = (0, import_react2.useRef)(null);
const updateBoxPosition = (0, import_react2.useCallback)(() => {
if (boxRef.current && element) {
const referenceRect = element.getBoundingClientRect();
boxRef.current.style.top = `${referenceRect.top - 8}px`;
boxRef.current.style.left = `${referenceRect.left - 8}px`;
boxRef.current.style.width = `${referenceRect.width + 16}px`;
boxRef.current.style.height = `${referenceRect.height + 16}px`;
}
}, [element]);
(0, import_react2.useEffect)(() => {
updateBoxPosition();
if (updateRate > 0) {
const intervalId = window.setInterval(() => {
updateBoxPosition();
}, 1e3 / updateRate);
updateIntervalRef.current = intervalId;
return () => {
if (updateIntervalRef.current !== null) {
window.clearInterval(updateIntervalRef.current);
}
};
}
}, [updateBoxPosition, updateRate]);
(0, import_react2.useEffect)(() => {
const handleResize = () => {
updateBoxPosition();
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, [updateBoxPosition]);
const customStyle = {
...style,
borderColor
// backgroundColor,
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: cn(
"element-highlighter fixed flex items-center justify-center rounded-md border-2 transition-all duration-100 z-[9998] pointer-events-none",
className
),
style: customStyle,
ref: boxRef,
children
}
);
}
// src/ElementInspector.tsx
var import_react9 = require("react");
// src/constants.ts
var UI_CONSTANTS = {
// Menu dimensions
MENU_WIDTH: 350,
// Width of the control menu in pixels
MENU_HEIGHT: 52,
// Height of the control menu in pixels
// Spacing and offsets
SPACING: 10,
// Standard spacing for margins and padding
ARROW_LEFT_OFFSET: 20,
// Left offset for the arrow from menu edge
// Z-index values
Z_INDEX: 1e4
// Standard z-index for UI elements
};
// src/components/bubble-menu/MenuArrow.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var MenuArrow = ({
isMenuAboveElement,
bubblePosition,
isDarkMode,
isVisible
}) => {
var _a;
const menuHeight = ((_a = document.querySelector(".element-inspector-menu")) == null ? void 0 : _a.clientHeight) || UI_CONSTANTS.MENU_HEIGHT;
const topPosition = isMenuAboveElement ? `${bubblePosition.top + menuHeight}px` : `${bubblePosition.top - 8}px`;
const leftPosition = `${bubblePosition.left + UI_CONSTANTS.ARROW_LEFT_OFFSET}px`;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
{
className: cn(
"element-inspector-menu-arrow pointer-events-none fixed z-[10001] h-0 w-0 border-r-8 border-l-8 border-transparent transition-all duration-150",
{
"border-t-8": isMenuAboveElement,
"border-b-8": !isMenuAboveElement,
"border-t-white": isMenuAboveElement && !isDarkMode,
"border-t-gray-800": isMenuAboveElement && isDarkMode,
"border-b-white": !isMenuAboveElement && !isDarkMode,
"border-b-gray-800": !isMenuAboveElement && isDarkMode,
"opacity-0": !isVisible,
"opacity-100": isVisible
}
),
style: {
top: topPosition,
left: leftPosition
},
"aria-hidden": "true"
}
);
};
// src/components/MentionChat.tsx
var import_react3 = __toESM(require("react"));
// src/stores/workflows.ts
var import_zustand = require("zustand");
var useWorkflowsStore = (0, import_zustand.create)()((set, get) => ({
// Initial state
workflows: [],
workflowId: "",
// Actions to update workflows state
setWorkflowId: (workflowId) => set({ workflowId }),
setWorkflows: (data) => set({
workflows: data
}),
getworkflows: () => {
return get().workflows;
}
}));
// src/stores/elementEvent.ts
var import_zustand2 = require("zustand");
var useEleventEventStore = (0, import_zustand2.create)()((set, get) => ({
// Initial state
selectedAction: "",
selectedEvent: "",
showEventForm: false,
// Actions to update eleventEvent state
setSelectedAction: (selectedAction) => set({ selectedAction }),
setSelectedEvent: (selectedEvent) => set({
selectedEvent
}),
setShowEventForm: (showEventForm) => set({
showEventForm
}),
getSelectedAction: () => {
return get().selectedAction;
},
getSelectedEvent: () => {
return get().selectedEvent;
},
getShowEventForm: () => {
return get().showEventForm;
}
}));
// src/components/ui/mention.tsx
var MentionPrimitive = __toESM(require("@diceui/mention"));
var React3 = __toESM(require("react"));
var import_jsx_runtime4 = require("react/jsx-runtime");
var Mention = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
MentionPrimitive.Root,
{
"data-slot": "mention",
ref,
className: cn(
"**:data-tag:rounded **:data-tag:bg-blue-200 **:data-tag:py-px **:data-tag:text-blue-950 dark:**:data-tag:bg-blue-800 dark:**:data-tag:text-blue-50",
className
),
...props
}
));
Mention.displayName = MentionPrimitive.Root.displayName;
var MentionLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
MentionPrimitive.Label,
{
"data-slot": "mention-label",
ref,
className: cn("px-0.5 py-1.5 font-semibold text-sm", className),
...props
}
));
MentionLabel.displayName = MentionPrimitive.Label.displayName;
var MentionInput = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
MentionPrimitive.Input,
{
"data-slot": "mention-input",
ref,
className: cn(
"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className
),
...props
}
));
MentionInput.displayName = MentionPrimitive.Input.displayName;
var MentionContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MentionPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
MentionPrimitive.Content,
{
"data-slot": "mention-content",
ref,
className: cn(
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
className
),
...props,
children
}
) }));
MentionContent.displayName = MentionPrimitive.Content.displayName;
var MentionItem = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
MentionPrimitive.Item,
{
"data-slot": "mention-item",
ref,
className: cn(
"relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-50",
className
),
...props,
children
}
));
MentionItem.displayName = MentionPrimitive.Item.displayName;
// src/Icons.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var IconSquareDashedPointer = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-square-dashed-mouse-pointer-icon lucide-square-dashed-mouse-pointer", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66