heroshot 0.11.4 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cli/cli.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import { C as intro, D as setVerbose, E as outro, O as spinner, S as error, T as note, _ as loadConfig, a as launchBrowser, c as generateSessionKey, d as loadSession, f as saveLocalKey, g as getConfigPath, h as ensureHeroshotDirectory, k as verbose, l as getSessionPath, m as sessionExists, n as snippetAction, o as DEFAULT_VIEWPORT, p as saveSession, r as sync, s as EDITOR_DIR, u as loadLocalKey, v as saveConfig, w as log, x as generateUid, y as VIEWPORT_PRESETS } from "../snippet-
|
|
2
|
+
import { C as intro, D as setVerbose, E as outro, O as spinner, S as error, T as note, _ as loadConfig, a as launchBrowser, c as generateSessionKey, d as loadSession, f as saveLocalKey, g as getConfigPath, h as ensureHeroshotDirectory, k as verbose, l as getSessionPath, m as sessionExists, n as snippetAction, o as DEFAULT_VIEWPORT, p as saveSession, r as sync, s as EDITOR_DIR, u as loadLocalKey, v as saveConfig, w as log, x as generateUid, y as VIEWPORT_PRESETS } from "../snippet-BYzU_uSZ.js";
|
|
3
3
|
import { existsSync, readFileSync, rmSync } from "node:fs";
|
|
4
4
|
import path from "node:path";
|
|
5
5
|
import { Command } from "commander";
|
package/dist/mcp/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import { _ as loadConfig, b as screenshotSchema, g as getConfigPath, i as filterScreenshots, r as sync, t as generateSnippets, v as saveConfig, x as generateUid } from "../snippet-
|
|
2
|
+
import { _ as loadConfig, b as screenshotSchema, g as getConfigPath, i as filterScreenshots, r as sync, t as generateSnippets, v as saveConfig, x as generateUid } from "../snippet-BYzU_uSZ.js";
|
|
3
3
|
import { z } from "zod";
|
|
4
4
|
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
|
|
5
5
|
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
|
|
@@ -87,7 +87,7 @@ function log$1(text) {
|
|
|
87
87
|
//#region src/actionSchema.ts
|
|
88
88
|
/**
|
|
89
89
|
* Action Schemas — Pre-screenshot actions that run before capturing.
|
|
90
|
-
*
|
|
90
|
+
* Uses Playwright locator API, supporting all selector formats: CSS, XPath, text, role, shadow DOM.
|
|
91
91
|
* Reference: https://github.com/microsoft/playwright-mcp
|
|
92
92
|
*
|
|
93
93
|
* ROADMAP extensions (not in Playwright MCP):
|
|
@@ -96,7 +96,7 @@ function log$1(text) {
|
|
|
96
96
|
*/
|
|
97
97
|
const clickActionSchema = z.object({
|
|
98
98
|
type: z.literal("click"),
|
|
99
|
-
selector: z.string().describe("
|
|
99
|
+
selector: z.string().describe("Element selector (CSS, XPath, text, role, or shadow DOM)"),
|
|
100
100
|
doubleClick: z.boolean().optional().describe("Whether to perform a double click"),
|
|
101
101
|
button: z.enum([
|
|
102
102
|
"left",
|
|
@@ -114,7 +114,7 @@ const clickActionSchema = z.object({
|
|
|
114
114
|
}).describe("Click an element. Use to dismiss cookie banners, open menus, expand dropdowns.");
|
|
115
115
|
const typeActionSchema = z.object({
|
|
116
116
|
type: z.literal("type"),
|
|
117
|
-
selector: z.string().describe("
|
|
117
|
+
selector: z.string().describe("Input element selector (CSS, XPath, text, role, or shadow DOM)"),
|
|
118
118
|
text: z.string().describe("Text to type into the element"),
|
|
119
119
|
submit: z.boolean().optional().describe("Whether to press Enter after typing (submit form)"),
|
|
120
120
|
slowly: z.boolean().optional().describe("Type one character at a time for key handlers"),
|
|
@@ -122,12 +122,12 @@ const typeActionSchema = z.object({
|
|
|
122
122
|
}).describe("Type text into an input, textarea, or contenteditable element.");
|
|
123
123
|
const hoverActionSchema = z.object({
|
|
124
124
|
type: z.literal("hover"),
|
|
125
|
-
selector: z.string().describe("
|
|
125
|
+
selector: z.string().describe("Element selector (CSS, XPath, text, role, or shadow DOM)"),
|
|
126
126
|
timeout: z.number().int().positive().optional().describe("Timeout in milliseconds")
|
|
127
127
|
}).describe("Hover over an element to trigger :hover states, show tooltips, or reveal menus.");
|
|
128
128
|
const selectOptionActionSchema = z.object({
|
|
129
129
|
type: z.literal("select_option"),
|
|
130
|
-
selector: z.string().describe("
|
|
130
|
+
selector: z.string().describe("Select element selector (CSS, XPath, text, role, or shadow DOM)"),
|
|
131
131
|
values: z.array(z.string()).describe("Option values to select. Supports multiple."),
|
|
132
132
|
timeout: z.number().int().positive().optional().describe("Timeout in milliseconds")
|
|
133
133
|
}).describe("Select one or more options in a native <select> dropdown.");
|
|
@@ -137,8 +137,8 @@ const pressKeyActionSchema = z.object({
|
|
|
137
137
|
}).describe("Press a keyboard key or combination. Use to close modals, submit forms, etc.");
|
|
138
138
|
const dragActionSchema = z.object({
|
|
139
139
|
type: z.literal("drag"),
|
|
140
|
-
from: z.string().describe("
|
|
141
|
-
to: z.string().describe("
|
|
140
|
+
from: z.string().describe("Selector of the element to drag"),
|
|
141
|
+
to: z.string().describe("Selector of the drop target"),
|
|
142
142
|
timeout: z.number().int().positive().optional().describe("Timeout in milliseconds")
|
|
143
143
|
}).describe("Drag an element and drop it onto another.");
|
|
144
144
|
const waitActionSchema = z.object({
|
|
@@ -155,12 +155,12 @@ const navigateActionSchema = z.object({
|
|
|
155
155
|
const evaluateActionSchema = z.object({
|
|
156
156
|
type: z.literal("evaluate"),
|
|
157
157
|
function: z.string().describe("JavaScript function: () => { ... } or (el) => { ... }"),
|
|
158
|
-
selector: z.string().optional().describe("
|
|
158
|
+
selector: z.string().optional().describe("Element selector to pass to function")
|
|
159
159
|
}).describe("Run arbitrary JavaScript in the browser context. Escape hatch for DOM manipulation.");
|
|
160
160
|
const fillFormActionSchema = z.object({
|
|
161
161
|
type: z.literal("fill_form"),
|
|
162
162
|
fields: z.array(z.object({
|
|
163
|
-
selector: z.string().describe("
|
|
163
|
+
selector: z.string().describe("Form field selector"),
|
|
164
164
|
value: z.string().describe("Value to fill. Checkboxes: \"true\"/\"false\""),
|
|
165
165
|
fieldType: z.enum([
|
|
166
166
|
"textbox",
|
|
@@ -179,7 +179,7 @@ const handleDialogActionSchema = z.object({
|
|
|
179
179
|
}).describe("Set up handler for browser dialog. Place BEFORE action that triggers dialog.");
|
|
180
180
|
const fileUploadActionSchema = z.object({
|
|
181
181
|
type: z.literal("file_upload"),
|
|
182
|
-
selector: z.string().describe("
|
|
182
|
+
selector: z.string().describe("File input element selector"),
|
|
183
183
|
paths: z.array(z.string()).describe("File paths to upload (absolute or relative to config)")
|
|
184
184
|
}).describe("Upload one or more files through a file input element.");
|
|
185
185
|
const resizeActionSchema = z.object({
|
|
@@ -189,7 +189,7 @@ const resizeActionSchema = z.object({
|
|
|
189
189
|
}).describe("Resize the browser viewport mid-flow.");
|
|
190
190
|
const hideActionSchema = z.object({
|
|
191
191
|
type: z.literal("hide"),
|
|
192
|
-
selectors: z.array(z.string()).describe("
|
|
192
|
+
selectors: z.array(z.string()).describe("Element selectors to hide (display: none)")
|
|
193
193
|
}).describe("Hide elements from screenshot. Use to remove cookie banners, chat widgets, ads.");
|
|
194
194
|
/** Union of all supported action types. Actions execute sequentially before screenshot. */
|
|
195
195
|
const actionSchema = z.discriminatedUnion("type", [
|
|
@@ -301,7 +301,7 @@ const screenshotSchema = z.object({
|
|
|
301
301
|
id: z.string().min(1).default(generateUid).describe("Unique identifier (auto-generated if omitted)"),
|
|
302
302
|
name: z.string().min(1).describe("Display name, also used to derive the output filename"),
|
|
303
303
|
url: z.url().describe("Full URL of the page to capture"),
|
|
304
|
-
selector: z.string().optional().describe("
|
|
304
|
+
selector: z.string().optional().describe("Element selector for capture (omit for full-page). Supports Playwright selector formats: CSS (.class, #id), shadow DOM (host >> child), XPath (xpath=...), text (text=...), role (role=button[name=\"OK\"]), and chained selectors."),
|
|
305
305
|
padding: paddingSchema.optional().describe("Expand capture area beyond element bounds"),
|
|
306
306
|
scroll: scrollPositionSchema.optional().describe("Scroll position to restore before capturing"),
|
|
307
307
|
paddingFill: paddingFillSchema.optional().describe("Background fill for padding area: \"inherit\" (default) shows page content, \"solid\" fills with detected background color"),
|
|
@@ -1068,36 +1068,23 @@ function scrollTo({ x, y }) {
|
|
|
1068
1068
|
//#endregion
|
|
1069
1069
|
//#region src/sync/elementFinder.ts
|
|
1070
1070
|
/**
|
|
1071
|
-
*
|
|
1072
|
-
*
|
|
1071
|
+
* Normalize selector for Playwright compatibility.
|
|
1072
|
+
* Converts legacy `>>>` shadow-piercing syntax to Playwright's `>>`.
|
|
1073
|
+
*/
|
|
1074
|
+
function normalizeSelector(selector) {
|
|
1075
|
+
return selector.replaceAll(">>>", ">>").replaceAll(" ", " ").trim();
|
|
1076
|
+
}
|
|
1077
|
+
/**
|
|
1078
|
+
* Find element using Playwright's locator API with retries.
|
|
1079
|
+
* Supports all Playwright selector formats including shadow DOM piercing.
|
|
1073
1080
|
*/
|
|
1074
1081
|
async function findElement(page, selector, maxAttempts = 10, intervalMs = 500) {
|
|
1082
|
+
const normalizedSelector = normalizeSelector(selector);
|
|
1075
1083
|
for (let attempt = 1; attempt <= maxAttempts; attempt++) {
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
let current = document;
|
|
1081
|
-
|
|
1082
|
-
for (const part of parts) {
|
|
1083
|
-
if (!part) continue;
|
|
1084
|
-
|
|
1085
|
-
const root = current instanceof Element
|
|
1086
|
-
? (current.shadowRoot ?? current)
|
|
1087
|
-
: current;
|
|
1088
|
-
|
|
1089
|
-
const found = root.querySelector(part);
|
|
1090
|
-
if (!found) return null;
|
|
1091
|
-
|
|
1092
|
-
current = found;
|
|
1093
|
-
}
|
|
1094
|
-
|
|
1095
|
-
return current instanceof Element ? current : null;
|
|
1096
|
-
})()
|
|
1097
|
-
`);
|
|
1098
|
-
const element = handle.asElement();
|
|
1099
|
-
if (element) return element;
|
|
1100
|
-
await handle.dispose();
|
|
1084
|
+
try {
|
|
1085
|
+
const element = await page.locator(normalizedSelector).elementHandle({ timeout: intervalMs });
|
|
1086
|
+
if (element) return element;
|
|
1087
|
+
} catch {}
|
|
1101
1088
|
if (attempt < maxAttempts) await page.waitForTimeout(intervalMs);
|
|
1102
1089
|
}
|
|
1103
1090
|
return null;
|
|
@@ -1740,8 +1727,8 @@ async function captureParallel(options) {
|
|
|
1740
1727
|
captureSpinner.message(`Capturing ${progress.captured}/${progress.total}: ${result.name}`);
|
|
1741
1728
|
};
|
|
1742
1729
|
const batchPromises = batches.map(async (batch) => limit(async () => executeBatch(batch, outputDirectory, captureOptions, browserOptions, onProgress)));
|
|
1743
|
-
const
|
|
1744
|
-
for (const
|
|
1730
|
+
const settledResults = await Promise.allSettled(batchPromises);
|
|
1731
|
+
for (const settled of settledResults) if (settled.status === "fulfilled") allResults.push(...settled.value);
|
|
1745
1732
|
return allResults;
|
|
1746
1733
|
}
|
|
1747
1734
|
|
|
@@ -1918,6 +1905,7 @@ async function executeCapture(context) {
|
|
|
1918
1905
|
*/
|
|
1919
1906
|
async function sync(options = {}) {
|
|
1920
1907
|
const configPath = options.configPath ?? getConfigPath();
|
|
1908
|
+
if (options.configPath && !existsSync(options.configPath)) throw new Error(`Config file not found: ${options.configPath}`);
|
|
1921
1909
|
const config = options.config ?? loadConfig(configPath);
|
|
1922
1910
|
if (config.screenshots.length === 0) {
|
|
1923
1911
|
warn("No screenshots defined.");
|
package/editor/dist/editor.js
CHANGED
|
@@ -3594,7 +3594,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
|
|
|
3594
3594
|
((_a = window.__svelte ?? (window.__svelte = {})).v ?? (_a.v = /* @__PURE__ */ new Set())).add(PUBLIC_VERSION);
|
|
3595
3595
|
}
|
|
3596
3596
|
function extractSelectorName(selector) {
|
|
3597
|
-
const parts = selector.split(/ ?(
|
|
3597
|
+
const parts = selector.split(/ ?(?:>>>|>>|>) ?/);
|
|
3598
3598
|
const lastPart = parts.at(-1) ?? selector;
|
|
3599
3599
|
const idMatch = /#([a-z0-9_-]+)/i.exec(lastPart);
|
|
3600
3600
|
if (idMatch == null ? void 0 : idMatch[1]) {
|
|
@@ -4107,16 +4107,17 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
|
|
|
4107
4107
|
if (parent) {
|
|
4108
4108
|
current = parent;
|
|
4109
4109
|
} else if (root2 instanceof ShadowRoot) {
|
|
4110
|
-
path.unshift("
|
|
4110
|
+
path.unshift(">>");
|
|
4111
4111
|
current = root2.host;
|
|
4112
4112
|
} else {
|
|
4113
4113
|
current = null;
|
|
4114
4114
|
}
|
|
4115
4115
|
}
|
|
4116
|
-
return path.join(" > ").replaceAll(">
|
|
4116
|
+
return path.join(" > ").replaceAll("> >> >", " >> ");
|
|
4117
4117
|
}
|
|
4118
4118
|
function querySelectorPiercing(selector) {
|
|
4119
|
-
const
|
|
4119
|
+
const normalized = selector.replaceAll(">>>", ">>");
|
|
4120
|
+
const parts = normalized.split(">>").map((p) => p.trim()).filter(Boolean);
|
|
4120
4121
|
let foundElement = null;
|
|
4121
4122
|
for (const part of parts) {
|
|
4122
4123
|
if (!part) continue;
|
|
@@ -4137,7 +4138,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
|
|
|
4137
4138
|
return foundElement;
|
|
4138
4139
|
}
|
|
4139
4140
|
function findElementBySelector(selector) {
|
|
4140
|
-
return selector.includes(">>>") ? querySelectorPiercing(selector) : document.querySelector(selector);
|
|
4141
|
+
return selector.includes(">>>") || selector.includes(">>") ? querySelectorPiercing(selector) : document.querySelector(selector);
|
|
4141
4142
|
}
|
|
4142
4143
|
var root_4 = /* @__PURE__ */ from_html(`<div role="button" tabindex="-1" class="fixed pointer-events-auto cursor-pointer"></div>`);
|
|
4143
4144
|
var root_5 = /* @__PURE__ */ from_html(`<div role="button" tabindex="-1" class="fixed pointer-events-auto cursor-pointer"></div>`);
|
|
@@ -5683,7 +5684,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
|
|
|
5683
5684
|
append($$anchor, fragment);
|
|
5684
5685
|
pop();
|
|
5685
5686
|
}
|
|
5686
|
-
const styles = '/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\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 *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-tracking: 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-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n --color-red-500: oklch(63.7% .237 25.331);\n --color-green-400: oklch(79.2% .209 151.711);\n --color-green-500: oklch(72.3% .219 149.579);\n --color-green-600: oklch(62.7% .194 149.214);\n --color-green-700: oklch(52.7% .154 150.069);\n --color-blue-400: oklch(70.7% .165 254.624);\n --color-blue-500: oklch(62.3% .214 259.815);\n --color-blue-600: oklch(54.6% .245 262.881);\n --color-slate-300: oklch(86.9% .022 252.894);\n --color-slate-400: oklch(70.4% .04 256.788);\n --color-slate-500: oklch(55.4% .046 257.417);\n --color-slate-600: oklch(44.6% .043 257.281);\n --color-slate-700: oklch(37.2% .044 257.287);\n --color-slate-800: oklch(27.9% .041 260.031);\n --color-slate-900: oklch(20.8% .042 265.755);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .75rem;\n --text-xs--line-height: calc(1 / .75);\n --text-sm: .875rem;\n --text-sm--line-height: calc(1.25 / .875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --tracking-wide: .025em;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-heroshot-primary: #22c55e;\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\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\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, 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\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\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 opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type="button"], [type="reset"], [type="submit"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden="until-found"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n\n .pointer-events-none {\n pointer-events: none;\n }\n\n .collapse {\n visibility: collapse;\n }\n\n .visible {\n visibility: visible;\n }\n\n .sr-only {\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n\n .top-4 {\n top: calc(var(--spacing) * 4);\n }\n\n .z-\\[2147483646\\] {\n z-index: 2147483646;\n }\n\n .z-\\[2147483647\\] {\n z-index: 2147483647;\n }\n\n .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n\n .box-border {\n box-sizing: border-box;\n }\n\n .block {\n display: block;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .table {\n display: table;\n }\n\n .h-0\\.5 {\n height: calc(var(--spacing) * .5);\n }\n\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .h-screen {\n height: 100vh;\n }\n\n .max-h-\\[calc\\(100vh-32px\\)\\] {\n max-height: calc(100vh - 32px);\n }\n\n .w-0\\.5 {\n width: calc(var(--spacing) * .5);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n\n .w-64 {\n width: calc(var(--spacing) * 64);\n }\n\n .w-80 {\n width: calc(var(--spacing) * 80);\n }\n\n .w-screen {\n width: 100vw;\n }\n\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n\n .min-w-5 {\n min-width: calc(var(--spacing) * 5);\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .flex-shrink-0 {\n flex-shrink: 0;\n }\n\n .border-collapse {\n border-collapse: collapse;\n }\n\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .transform {\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .cursor-text {\n cursor: text;\n }\n\n .resize {\n resize: both;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .items-center {\n align-items: center;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .gap-0\\.5 {\n gap: calc(var(--spacing) * .5);\n }\n\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n :where(.space-y-1 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-1\\.5 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n .truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .rounded {\n border-radius: .25rem;\n }\n\n .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-\\[3px\\] {\n border-style: var(--tw-border-style);\n border-width: 3px;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-blue-500 {\n border-color: var(--color-blue-500);\n }\n\n .border-heroshot-primary {\n border-color: var(--color-heroshot-primary);\n }\n\n .border-slate-600 {\n border-color: var(--color-slate-600);\n }\n\n .border-slate-700 {\n border-color: var(--color-slate-700);\n }\n\n .border-slate-700\\/50 {\n border-color: #31415880;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .border-slate-700\\/50 {\n border-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent);\n }\n }\n\n .bg-black\\/50 {\n background-color: #00000080;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-black\\/50 {\n background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n }\n }\n\n .bg-black\\/85 {\n background-color: #000000d9;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-black\\/85 {\n background-color: color-mix(in oklab, var(--color-black) 85%, transparent);\n }\n }\n\n .bg-blue-600 {\n background-color: var(--color-blue-600);\n }\n\n .bg-green-500 {\n background-color: var(--color-green-500);\n }\n\n .bg-green-700 {\n background-color: var(--color-green-700);\n }\n\n .bg-heroshot-primary\\/10 {\n background-color: #22c55e1a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-heroshot-primary\\/10 {\n background-color: color-mix(in oklab, var(--color-heroshot-primary) 10%, transparent);\n }\n }\n\n .bg-heroshot-primary\\/50 {\n background-color: #22c55e80;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-heroshot-primary\\/50 {\n background-color: color-mix(in oklab, var(--color-heroshot-primary) 50%, transparent);\n }\n }\n\n .bg-slate-600 {\n background-color: var(--color-slate-600);\n }\n\n .bg-slate-700 {\n background-color: var(--color-slate-700);\n }\n\n .bg-slate-700\\/50 {\n background-color: #31415880;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-slate-700\\/50 {\n background-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent);\n }\n }\n\n .bg-slate-800 {\n background-color: var(--color-slate-800);\n }\n\n .bg-slate-900 {\n background-color: var(--color-slate-900);\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .p-1\\.5 {\n padding: calc(var(--spacing) * 1.5);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n\n .px-1 {\n padding-inline: calc(var(--spacing) * 1);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-6 {\n padding-block: calc(var(--spacing) * 6);\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-left {\n text-align: left;\n }\n\n .font-mono {\n font-family: var(--font-mono);\n }\n\n .font-sans {\n font-family: var(--font-sans);\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .text-\\[9px\\] {\n font-size: 9px;\n }\n\n .text-\\[10px\\] {\n font-size: 10px;\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .tracking-wide {\n --tw-tracking: var(--tracking-wide);\n letter-spacing: var(--tracking-wide);\n }\n\n .text-slate-300 {\n color: var(--color-slate-300);\n }\n\n .text-slate-400 {\n color: var(--color-slate-400);\n }\n\n .text-slate-500 {\n color: var(--color-slate-500);\n }\n\n .text-white {\n color: var(--color-white);\n }\n\n .uppercase {\n text-transform: uppercase;\n }\n\n .opacity-60 {\n opacity: .6;\n }\n\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-2xl {\n --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .ring-2 {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .ring-blue-400 {\n --tw-ring-color: var(--color-blue-400);\n }\n\n .ring-green-400 {\n --tw-ring-color: var(--color-green-400);\n }\n\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .filter {\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, 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\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\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --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\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n @media (hover: hover) {\n .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n\n .hover\\:border-slate-500:hover {\n border-color: var(--color-slate-500);\n }\n\n .hover\\:bg-green-600:hover {\n background-color: var(--color-green-600);\n }\n\n .hover\\:bg-red-500:hover {\n background-color: var(--color-red-500);\n }\n\n .hover\\:bg-slate-500:hover {\n background-color: var(--color-slate-500);\n }\n\n .hover\\:bg-slate-600:hover {\n background-color: var(--color-slate-600);\n }\n\n .hover\\:bg-slate-700:hover {\n background-color: var(--color-slate-700);\n }\n\n .hover\\:bg-white\\/10:hover {\n background-color: #ffffff1a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .hover\\:bg-white\\/10:hover {\n background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n }\n }\n\n .hover\\:text-white:hover {\n color: var(--color-white);\n }\n }\n\n .focus\\:border-blue-500:focus {\n border-color: var(--color-blue-500);\n }\n\n .focus\\:outline-none:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n}\n\nbutton {\n cursor: pointer;\n}\n\n[data-theme="dark"] {\n --color-slate-50: #f8fafc;\n --color-slate-100: #f1f5f9;\n --color-slate-200: #e2e8f0;\n --color-slate-300: #cbd5e1;\n --color-slate-400: #94a3b8;\n --color-slate-500: #64748b;\n --color-slate-600: #475569;\n --color-slate-700: #334155;\n --color-slate-800: #1e293b;\n --color-slate-900: #0f172a;\n --color-slate-950: #020617;\n --theme-text: #fff;\n --theme-text-muted: #94a3b8;\n}\n\n[data-theme="light"] {\n --color-slate-50: #020617;\n --color-slate-100: #0f172a;\n --color-slate-200: #1e293b;\n --color-slate-300: #334155;\n --color-slate-400: #475569;\n --color-slate-500: #64748b;\n --color-slate-600: #94a3b8;\n --color-slate-700: #e2e8f0;\n --color-slate-800: #f1f5f9;\n --color-slate-900: #f8fafc;\n --color-slate-950: #fff;\n --theme-text: #0f172a;\n --theme-text-muted: #475569;\n}\n\n[data-theme="light"] .text-white {\n color: var(--theme-text);\n}\n\n@property --tw-translate-x {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-rotate-x {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-rotate-y {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-rotate-z {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-skew-x {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-skew-y {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-space-y-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-font-weight {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-tracking {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-ring-color {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-ring-offset-width {\n syntax: "<length>";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n syntax: "*";\n inherits: false;\n initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-outline-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-blur {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-brightness {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-contrast {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-grayscale {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-hue-rotate {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-invert {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-opacity {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-saturate {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-sepia {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-drop-shadow {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-drop-shadow-color {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-duration {\n syntax: "*";\n inherits: false\n}\n';
|
|
5687
|
+
const styles = '/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\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 *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-tracking: 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-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n --color-red-500: oklch(63.7% .237 25.331);\n --color-green-400: oklch(79.2% .209 151.711);\n --color-green-500: oklch(72.3% .219 149.579);\n --color-green-600: oklch(62.7% .194 149.214);\n --color-green-700: oklch(52.7% .154 150.069);\n --color-blue-400: oklch(70.7% .165 254.624);\n --color-blue-500: oklch(62.3% .214 259.815);\n --color-blue-600: oklch(54.6% .245 262.881);\n --color-slate-300: oklch(86.9% .022 252.894);\n --color-slate-400: oklch(70.4% .04 256.788);\n --color-slate-500: oklch(55.4% .046 257.417);\n --color-slate-600: oklch(44.6% .043 257.281);\n --color-slate-700: oklch(37.2% .044 257.287);\n --color-slate-800: oklch(27.9% .041 260.031);\n --color-slate-900: oklch(20.8% .042 265.755);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .75rem;\n --text-xs--line-height: calc(1 / .75);\n --text-sm: .875rem;\n --text-sm--line-height: calc(1.25 / .875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --tracking-wide: .025em;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-heroshot-primary: #22c55e;\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\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\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, 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\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\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 opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type="button"], [type="reset"], [type="submit"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden="until-found"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n\n .pointer-events-none {\n pointer-events: none;\n }\n\n .collapse {\n visibility: collapse;\n }\n\n .visible {\n visibility: visible;\n }\n\n .sr-only {\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n\n .top-4 {\n top: calc(var(--spacing) * 4);\n }\n\n .z-\\[2147483646\\] {\n z-index: 2147483646;\n }\n\n .z-\\[2147483647\\] {\n z-index: 2147483647;\n }\n\n .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n\n .box-border {\n box-sizing: border-box;\n }\n\n .block {\n display: block;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .table {\n display: table;\n }\n\n .h-0\\.5 {\n height: calc(var(--spacing) * .5);\n }\n\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .h-screen {\n height: 100vh;\n }\n\n .max-h-\\[calc\\(100vh-32px\\)\\] {\n max-height: calc(100vh - 32px);\n }\n\n .w-0\\.5 {\n width: calc(var(--spacing) * .5);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n\n .w-64 {\n width: calc(var(--spacing) * 64);\n }\n\n .w-80 {\n width: calc(var(--spacing) * 80);\n }\n\n .w-screen {\n width: 100vw;\n }\n\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n\n .min-w-5 {\n min-width: calc(var(--spacing) * 5);\n }\n\n .flex-1, .flex-\\[1\\] {\n flex: 1;\n }\n\n .flex-shrink-0 {\n flex-shrink: 0;\n }\n\n .border-collapse {\n border-collapse: collapse;\n }\n\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .transform {\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .cursor-text {\n cursor: text;\n }\n\n .resize {\n resize: both;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .items-center {\n align-items: center;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .gap-0\\.5 {\n gap: calc(var(--spacing) * .5);\n }\n\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n :where(.space-y-1 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-1\\.5 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n .truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .rounded {\n border-radius: .25rem;\n }\n\n .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-\\[3px\\] {\n border-style: var(--tw-border-style);\n border-width: 3px;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-blue-500 {\n border-color: var(--color-blue-500);\n }\n\n .border-heroshot-primary {\n border-color: var(--color-heroshot-primary);\n }\n\n .border-slate-600 {\n border-color: var(--color-slate-600);\n }\n\n .border-slate-700 {\n border-color: var(--color-slate-700);\n }\n\n .border-slate-700\\/50 {\n border-color: #31415880;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .border-slate-700\\/50 {\n border-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent);\n }\n }\n\n .bg-black\\/50 {\n background-color: #00000080;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-black\\/50 {\n background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n }\n }\n\n .bg-black\\/85 {\n background-color: #000000d9;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-black\\/85 {\n background-color: color-mix(in oklab, var(--color-black) 85%, transparent);\n }\n }\n\n .bg-blue-600 {\n background-color: var(--color-blue-600);\n }\n\n .bg-green-500 {\n background-color: var(--color-green-500);\n }\n\n .bg-green-700 {\n background-color: var(--color-green-700);\n }\n\n .bg-heroshot-primary\\/10 {\n background-color: #22c55e1a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-heroshot-primary\\/10 {\n background-color: color-mix(in oklab, var(--color-heroshot-primary) 10%, transparent);\n }\n }\n\n .bg-heroshot-primary\\/50 {\n background-color: #22c55e80;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-heroshot-primary\\/50 {\n background-color: color-mix(in oklab, var(--color-heroshot-primary) 50%, transparent);\n }\n }\n\n .bg-slate-600 {\n background-color: var(--color-slate-600);\n }\n\n .bg-slate-700 {\n background-color: var(--color-slate-700);\n }\n\n .bg-slate-700\\/50 {\n background-color: #31415880;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-slate-700\\/50 {\n background-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent);\n }\n }\n\n .bg-slate-800 {\n background-color: var(--color-slate-800);\n }\n\n .bg-slate-900 {\n background-color: var(--color-slate-900);\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .p-1\\.5 {\n padding: calc(var(--spacing) * 1.5);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n\n .px-1 {\n padding-inline: calc(var(--spacing) * 1);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-6 {\n padding-block: calc(var(--spacing) * 6);\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-left {\n text-align: left;\n }\n\n .font-mono {\n font-family: var(--font-mono);\n }\n\n .font-sans {\n font-family: var(--font-sans);\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .text-\\[9px\\] {\n font-size: 9px;\n }\n\n .text-\\[10px\\] {\n font-size: 10px;\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .tracking-wide {\n --tw-tracking: var(--tracking-wide);\n letter-spacing: var(--tracking-wide);\n }\n\n .text-slate-300 {\n color: var(--color-slate-300);\n }\n\n .text-slate-400 {\n color: var(--color-slate-400);\n }\n\n .text-slate-500 {\n color: var(--color-slate-500);\n }\n\n .text-white {\n color: var(--color-white);\n }\n\n .uppercase {\n text-transform: uppercase;\n }\n\n .opacity-60 {\n opacity: .6;\n }\n\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-2xl {\n --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .ring-2 {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .ring-blue-400 {\n --tw-ring-color: var(--color-blue-400);\n }\n\n .ring-green-400 {\n --tw-ring-color: var(--color-green-400);\n }\n\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .filter {\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, 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\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\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --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\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n @media (hover: hover) {\n .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n\n .hover\\:border-slate-500:hover {\n border-color: var(--color-slate-500);\n }\n\n .hover\\:bg-green-600:hover {\n background-color: var(--color-green-600);\n }\n\n .hover\\:bg-red-500:hover {\n background-color: var(--color-red-500);\n }\n\n .hover\\:bg-slate-500:hover {\n background-color: var(--color-slate-500);\n }\n\n .hover\\:bg-slate-600:hover {\n background-color: var(--color-slate-600);\n }\n\n .hover\\:bg-slate-700:hover {\n background-color: var(--color-slate-700);\n }\n\n .hover\\:bg-white\\/10:hover {\n background-color: #ffffff1a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .hover\\:bg-white\\/10:hover {\n background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n }\n }\n\n .hover\\:text-white:hover {\n color: var(--color-white);\n }\n }\n\n .focus\\:border-blue-500:focus {\n border-color: var(--color-blue-500);\n }\n\n .focus\\:outline-none:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n}\n\nbutton {\n cursor: pointer;\n}\n\n[data-theme="dark"] {\n --color-slate-50: #f8fafc;\n --color-slate-100: #f1f5f9;\n --color-slate-200: #e2e8f0;\n --color-slate-300: #cbd5e1;\n --color-slate-400: #94a3b8;\n --color-slate-500: #64748b;\n --color-slate-600: #475569;\n --color-slate-700: #334155;\n --color-slate-800: #1e293b;\n --color-slate-900: #0f172a;\n --color-slate-950: #020617;\n --theme-text: #fff;\n --theme-text-muted: #94a3b8;\n}\n\n[data-theme="light"] {\n --color-slate-50: #020617;\n --color-slate-100: #0f172a;\n --color-slate-200: #1e293b;\n --color-slate-300: #334155;\n --color-slate-400: #475569;\n --color-slate-500: #64748b;\n --color-slate-600: #94a3b8;\n --color-slate-700: #e2e8f0;\n --color-slate-800: #f1f5f9;\n --color-slate-900: #f8fafc;\n --color-slate-950: #fff;\n --theme-text: #0f172a;\n --theme-text-muted: #475569;\n}\n\n[data-theme="light"] .text-white {\n color: var(--theme-text);\n}\n\n@property --tw-translate-x {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-rotate-x {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-rotate-y {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-rotate-z {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-skew-x {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-skew-y {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-space-y-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-font-weight {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-tracking {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-ring-color {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-ring-offset-width {\n syntax: "<length>";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n syntax: "*";\n inherits: false;\n initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-outline-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-blur {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-brightness {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-contrast {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-grayscale {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-hue-rotate {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-invert {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-opacity {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-saturate {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-sepia {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-drop-shadow {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-drop-shadow-color {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-duration {\n syntax: "*";\n inherits: false\n}\n';
|
|
5687
5688
|
function initToolbar() {
|
|
5688
5689
|
var _a2;
|
|
5689
5690
|
if (globalThis.__heroshot) {
|
package/package.json
CHANGED
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "heroshot",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.12.0",
|
|
4
4
|
"description": "Define your screenshots once, update them forever with one command",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Ondrej Machala",
|
|
7
7
|
"license": "MIT",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/omachala/heroshot"
|
|
11
|
+
},
|
|
12
|
+
"publishConfig": {
|
|
13
|
+
"provenance": true,
|
|
14
|
+
"access": "public"
|
|
15
|
+
},
|
|
8
16
|
"bin": {
|
|
9
17
|
"heroshot": "dist/cli/cli.js",
|
|
10
18
|
"heroshot-mcp": "dist/mcp/index.js"
|