@compose-market/theme 0.0.91 → 0.0.92

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.
@@ -15,12 +15,14 @@
15
15
  100% { transform: translate3d(0, calc(100vh + 100px), 0); }
16
16
  }
17
17
 
18
- .cm-marquee-track {
18
+ .cm-marquee-track,
19
+ .marquee-track {
19
20
  animation: cm-marquee-scroll linear infinite;
20
21
  will-change: transform;
21
22
  }
22
23
 
23
- .cm-marquee-track-reverse {
24
+ .cm-marquee-track-reverse,
25
+ .marquee-track-reverse {
24
26
  animation: cm-marquee-scroll-reverse linear infinite;
25
27
  will-change: transform;
26
28
  }
@@ -83,19 +85,23 @@
83
85
  position: relative;
84
86
  display: grid;
85
87
  min-width: 0;
86
- min-height: clamp(4.25rem, 13cqi, 5.6rem);
88
+ min-height: clamp(4.35rem, 12cqi, 5.8rem);
89
+ aspect-ratio: 2.7;
87
90
  place-items: center;
88
91
  overflow: hidden;
89
92
  border: 1px solid hsl(var(--primary) / 0.18);
90
93
  border-radius: 12px;
91
94
  background:
92
- linear-gradient(145deg, hsl(226 21% 23% / 0.34), hsl(221 50% 9% / 0.24)),
93
- radial-gradient(circle at 50% 0%, hsl(var(--primary) / 0.12), transparent 64%);
95
+ linear-gradient(145deg, hsl(226 21% 23% / 0.5), hsl(221 50% 9% / 0.52)),
96
+ radial-gradient(ellipse at 50% 0%, hsl(var(--primary) / 0.2), transparent 62%),
97
+ radial-gradient(ellipse at 100% 100%, hsl(var(--accent) / 0.16), transparent 58%);
94
98
  box-shadow:
95
- inset 0 1px 0 hsl(0 0% 100% / 0.07),
96
- 0 0 36px hsl(var(--primary) / 0.05);
97
- padding: clamp(0.72rem, 2.4cqi, 1rem);
98
- backdrop-filter: blur(16px) saturate(1.12);
99
+ inset 0 1px 0 hsl(0 0% 100% / 0.1),
100
+ inset 0 -1px 0 hsl(var(--primary) / 0.1),
101
+ 0 0 28px hsl(var(--primary) / 0.08),
102
+ 0 0 48px hsl(var(--accent) / 0.04);
103
+ padding: clamp(0.38rem, 1.2cqi, 0.68rem);
104
+ backdrop-filter: blur(16px) saturate(1.18);
99
105
  transition:
100
106
  transform 180ms ease,
101
107
  border-color 220ms ease,
@@ -108,9 +114,9 @@
108
114
  inset: -1px;
109
115
  pointer-events: none;
110
116
  background:
111
- linear-gradient(135deg, hsl(var(--primary) / 0.14), transparent 48%),
112
- linear-gradient(315deg, hsl(var(--accent) / 0.14), transparent 52%);
113
- opacity: 0.55;
117
+ linear-gradient(135deg, hsl(var(--primary) / 0.2), transparent 48%),
118
+ linear-gradient(315deg, hsl(var(--accent) / 0.18), transparent 52%);
119
+ opacity: 0.72;
114
120
  }
115
121
 
116
122
  .cm-partner-badge::after {
@@ -161,9 +167,10 @@
161
167
  .cm-partner-badge img {
162
168
  position: relative;
163
169
  z-index: 1;
164
- width: auto;
165
- max-width: min(100%, 18rem);
166
- height: clamp(2rem, 7cqi, 3.45rem);
170
+ width: min(92%, 20rem);
171
+ max-width: 100%;
172
+ height: auto;
173
+ max-height: 76%;
167
174
  object-fit: contain;
168
175
  }
169
176
 
@@ -176,6 +183,19 @@
176
183
  overflow: hidden;
177
184
  }
178
185
 
186
+ .cm-partner-marquee__row,
187
+ .partners-marquee__row {
188
+ display: flex;
189
+ width: max-content;
190
+ min-width: 100%;
191
+ }
192
+
193
+ .cm-partner-marquee__inner,
194
+ .partners-marquee__inner {
195
+ display: flex;
196
+ gap: clamp(0.58rem, 1.8cqi, 0.85rem);
197
+ }
198
+
179
199
  .cm-partner-marquee::before,
180
200
  .cm-partner-marquee::after {
181
201
  content: "";
@@ -196,6 +216,13 @@
196
216
  background: linear-gradient(270deg, hsl(var(--background) / 0.9), transparent);
197
217
  }
198
218
 
219
+ .cm-partner-marquee:hover .cm-marquee-track,
220
+ .cm-partner-marquee:hover .cm-marquee-track-reverse,
221
+ .cm-partner-marquee:focus-within .cm-marquee-track,
222
+ .cm-partner-marquee:focus-within .cm-marquee-track-reverse {
223
+ animation-play-state: paused;
224
+ }
225
+
199
226
  .cm-partner-logo {
200
227
  display: grid;
201
228
  height: clamp(2.45rem, 7cqi, 3rem);
@@ -204,8 +231,14 @@
204
231
  flex: 0 0 auto;
205
232
  border: 1px solid hsl(var(--primary) / 0.12);
206
233
  border-radius: 10px;
207
- background: hsl(221 50% 9% / 0.34);
234
+ background:
235
+ radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.06), transparent 42%),
236
+ radial-gradient(circle at 100% 100%, hsl(var(--accent) / 0.055), transparent 48%),
237
+ hsl(240 38% 3% / 0.78);
208
238
  padding-inline: clamp(0.8rem, 2.6cqi, 1.15rem);
239
+ box-shadow:
240
+ inset 0 1px 0 hsl(0 0% 100% / 0.035),
241
+ inset 0 0 18px hsl(var(--primary) / 0.025);
209
242
  transition:
210
243
  transform 180ms ease,
211
244
  border-color 220ms ease,
@@ -216,8 +249,14 @@
216
249
  .cm-partner-logo:hover {
217
250
  transform: translateY(-1px);
218
251
  border-color: hsl(var(--primary) / 0.46);
219
- background: hsl(221 50% 9% / 0.52);
220
- box-shadow: 0 0 20px hsl(var(--primary) / 0.1);
252
+ background:
253
+ radial-gradient(circle at 16% 0%, hsl(var(--primary) / 0.13), transparent 44%),
254
+ radial-gradient(circle at 100% 100%, hsl(var(--accent) / 0.12), transparent 52%),
255
+ hsl(221 50% 7% / 0.86);
256
+ box-shadow:
257
+ 0 0 16px hsl(var(--primary) / 0.1),
258
+ 0 0 24px hsl(var(--accent) / 0.07),
259
+ inset 0 0 20px hsl(var(--primary) / 0.04);
221
260
  }
222
261
 
223
262
  .cm-partner-logo img {
@@ -225,13 +264,13 @@
225
264
  max-width: 6.25rem;
226
265
  height: clamp(0.85rem, 3cqi, 1.25rem);
227
266
  object-fit: contain;
228
- filter: grayscale(1) brightness(0.74);
229
- opacity: 0.76;
267
+ filter: grayscale(1) saturate(0.72) brightness(0.78) contrast(0.96);
268
+ opacity: 0.72;
230
269
  transition: filter 220ms ease, opacity 220ms ease;
231
270
  }
232
271
 
233
272
  .cm-partner-logo:hover img {
234
- filter: grayscale(0) brightness(1.1);
273
+ filter: grayscale(0) saturate(1.08) brightness(1.08) contrast(1.02) drop-shadow(0 0 9px hsl(var(--primary) / 0.16));
235
274
  opacity: 1;
236
275
  }
237
276
 
@@ -309,7 +348,9 @@
309
348
 
310
349
  @media (prefers-reduced-motion: reduce) {
311
350
  .cm-marquee-track,
351
+ .marquee-track,
312
352
  .cm-marquee-track-reverse,
353
+ .marquee-track-reverse,
313
354
  .cm-partner-badge::after {
314
355
  animation-duration: 0.01ms !important;
315
356
  animation-iteration-count: 1 !important;
@@ -1,8 +1,41 @@
1
- /**
2
- * Mirror Module
3
- *
4
- * CSS class-name constants for the MirrorPane component pattern.
5
- * No React components — these are CSS-only shared classes.
6
- */
1
+ import * as React from "react";
7
2
  export { mirrorStyles } from "./styles";
3
+ export interface ComposeMirrorTab {
4
+ id: string;
5
+ label: React.ReactNode;
6
+ icon?: React.ReactNode;
7
+ tone?: "cyan" | "fuchsia";
8
+ }
9
+ export interface ComposeMirrorBadge {
10
+ label: React.ReactNode;
11
+ tone?: "neutral" | "cyan" | "fuchsia" | "green" | "warning" | "danger";
12
+ }
13
+ export interface ComposeMirrorPaneProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
14
+ title?: React.ReactNode;
15
+ subtitle?: React.ReactNode;
16
+ icon?: React.ReactNode;
17
+ tabs?: ComposeMirrorTab[];
18
+ activeTab?: string;
19
+ onTabChange?: (tab: string) => void;
20
+ badges?: ComposeMirrorBadge[];
21
+ empty?: boolean;
22
+ emptyIcon?: React.ReactNode;
23
+ emptyText?: React.ReactNode;
24
+ footer?: React.ReactNode;
25
+ }
26
+ export declare function ComposeMirrorPane({ className, title, subtitle, icon, tabs, activeTab, onTabChange, badges, empty, emptyIcon, emptyText, footer, children, ...props }: ComposeMirrorPaneProps): React.JSX.Element;
27
+ export interface ComposeMirrorSectionProps extends React.HTMLAttributes<HTMLDivElement> {
28
+ label?: React.ReactNode;
29
+ compact?: boolean;
30
+ }
31
+ export declare function ComposeMirrorSection({ className, label, compact, children, ...props }: ComposeMirrorSectionProps): React.JSX.Element;
32
+ export interface ComposeMirrorRowProps extends React.HTMLAttributes<HTMLDivElement> {
33
+ label: React.ReactNode;
34
+ value: React.ReactNode;
35
+ }
36
+ export declare function ComposeMirrorRow({ className, label, value, ...props }: ComposeMirrorRowProps): React.JSX.Element;
37
+ export interface ComposeMirrorPricingProps extends React.HTMLAttributes<HTMLDivElement> {
38
+ unit?: React.ReactNode;
39
+ }
40
+ export declare function ComposeMirrorPricing({ className, unit, children, ...props }: ComposeMirrorPricingProps): React.JSX.Element;
8
41
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/mirror/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/mirror/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;CACxE;AAED,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACjG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAMD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,IAAS,EACT,SAAS,EACT,WAAW,EACX,MAAW,EACX,KAAa,EACb,SAAS,EACT,SAAS,EACT,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,qBA4DxB;AAED,MAAM,WAAW,yBAA0B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,qBAUvH;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,qBAO5F;AAED,MAAM,WAAW,yBAA0B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,qBAOtG"}
@@ -1,8 +1,20 @@
1
- /**
2
- * Mirror Module
3
- *
4
- * CSS class-name constants for the MirrorPane component pattern.
5
- * No React components — these are CSS-only shared classes.
6
- */
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { cx } from "../internal/cx";
7
3
  export { mirrorStyles } from "./styles";
4
+ function badgeTone(value) {
5
+ return value || "neutral";
6
+ }
7
+ export function ComposeMirrorPane({ className, title, subtitle, icon, tabs = [], activeTab, onTabChange, badges = [], empty = false, emptyIcon, emptyText, footer, children, ...props }) {
8
+ const content = empty ? (_jsxs("div", { className: "cm-mirror-pane__empty", children: [emptyIcon ? _jsx("div", { className: "cm-mirror-pane__empty-icon", children: emptyIcon }) : null, emptyText ? _jsx("p", { className: "cm-mirror-pane__empty-text", children: emptyText }) : null] })) : (_jsxs(_Fragment, { children: [(title || subtitle || icon || badges.length > 0) ? (_jsxs("div", { className: "cm-mirror-pane__model-header", children: [icon ? _jsx("div", { className: "cm-mirror-pane__model-icon-box", children: icon }) : null, _jsxs("div", { className: "cm-mirror-pane__model-copy", children: [title ? (_jsxs("div", { className: "cm-mirror-pane__model-name-row", children: [_jsx("h3", { className: "cm-mirror-pane__model-name", children: title }), badges.length > 0 ? (_jsx("span", { className: "cm-mirror-pane__model-types", children: badges.map((badge, index) => (_jsx("span", { className: "cm-mirror-pane__badge", "data-tone": badgeTone(badge.tone), children: badge.label }, index))) })) : null] })) : null, subtitle ? _jsx("p", { className: "cm-mirror-pane__model-provider", children: subtitle }) : null] })] })) : null, children] }));
9
+ return (_jsxs("div", { className: cx("cm-mirror-pane", className), ...props, children: [tabs.length > 0 ? (_jsx("div", { className: "cm-mirror-pane__toolbar", children: tabs.map((tab) => (_jsxs("button", { type: "button", className: cx("cm-mirror-pane__toolbar-btn", activeTab === tab.id && `cm-mirror-pane__toolbar-btn--active-${tab.tone || "cyan"}`), onClick: () => onTabChange?.(tab.id), "aria-pressed": activeTab === tab.id, "aria-label": typeof tab.label === "string" ? tab.label : undefined, children: [tab.icon, _jsx("span", { className: "cm-mirror-pane__toolbar-label", children: tab.label })] }, tab.id))) })) : null, _jsx("div", { className: "cm-mirror-pane__body", children: content }), footer ? _jsx("div", { className: "cm-mirror-pane__footer", children: footer }) : null] }));
10
+ }
11
+ export function ComposeMirrorSection({ className, label, compact = true, children, ...props }) {
12
+ return (_jsxs("section", { className: cx("cm-mirror-pane__section", compact && "cm-mirror-pane__section--compact", className), ...props, children: [label ? _jsx("span", { className: "cm-mirror-pane__section-label", children: label }) : null, children] }));
13
+ }
14
+ export function ComposeMirrorRow({ className, label, value, ...props }) {
15
+ return (_jsxs("div", { className: cx("cm-mirror-pane__kv-row", className), ...props, children: [_jsx("span", { className: "cm-mirror-pane__kv-label", children: label }), _jsx("span", { className: "cm-mirror-pane__kv-value", children: value })] }));
16
+ }
17
+ export function ComposeMirrorPricing({ className, unit, children, ...props }) {
18
+ return (_jsxs("div", { className: cx("cm-mirror-pane__pricing-compact", className), ...props, children: [_jsx("div", { className: "cm-mirror-pane__pricing-entries", children: children }), unit ? _jsx("span", { className: "cm-mirror-pane__pricing-unit", children: unit }) : null] }));
19
+ }
8
20
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/mirror/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/mirror/index.tsx"],"names":[],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Mirror Pane Styles
3
3
  *
4
- * BEM CSS for the MirrorPane component pattern (model info panel).
4
+ * Shared BEM CSS for model/detail panes.
5
5
  */
6
- export declare const mirrorStyles = "\n/* \u2500\u2500 Mirror Pane \u2500\u2500 */\n.cm-mirror-pane {\n display: flex;\n flex-direction: column;\n border: 1px solid hsl(var(--primary) / 0.3);\n border-radius: 8px;\n background: hsl(var(--card));\n overflow: hidden;\n height: 100%;\n}\n\n/* Toolbar (icon tabs) */\n.cm-mirror-pane__toolbar {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 8px;\n border-bottom: 1px solid hsl(var(--sidebar-border));\n background: hsl(var(--background) / 0.3);\n}\n\n.cm-mirror-pane__toolbar-btn {\n padding: 8px;\n border-radius: 6px;\n border: none;\n background: transparent;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n transition: color 0.15s ease, background 0.15s ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.cm-mirror-pane__toolbar-btn:hover {\n color: hsl(var(--foreground));\n background: hsl(var(--muted));\n}\n\n.cm-mirror-pane__toolbar-btn--active-cyan {\n background: hsl(var(--primary) / 0.2);\n color: hsl(var(--primary));\n}\n\n.cm-mirror-pane__toolbar-btn--active-fuchsia {\n background: hsl(var(--accent) / 0.2);\n color: hsl(var(--accent));\n}\n\n/* Body */\n.cm-mirror-pane__body {\n padding: 12px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n flex: 1;\n overflow-y: auto;\n}\n\n@media (min-width: 640px) {\n .cm-mirror-pane__body {\n padding: 16px;\n }\n}\n\n@media (min-width: 768px) {\n .cm-mirror-pane__body {\n padding: 20px;\n }\n}\n\n/* Model identity */\n.cm-mirror-pane__model-header {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n}\n\n.cm-mirror-pane__model-icon-box {\n padding: 8px;\n background: hsl(var(--primary) / 0.1);\n border: 1px solid hsl(var(--primary) / 0.3);\n border-radius: 8px;\n flex-shrink: 0;\n}\n\n.cm-mirror-pane__model-copy {\n min-width: 0;\n flex: 1;\n}\n\n.cm-mirror-pane__model-name {\n font-weight: 600;\n color: hsl(var(--foreground));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 14px;\n}\n\n@media (min-width: 768px) {\n .cm-mirror-pane__model-name {\n font-size: 16px;\n }\n}\n\n.cm-mirror-pane__model-provider {\n font-size: 12px;\n color: hsl(var(--muted-foreground));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Section panel */\n.cm-mirror-pane__section {\n border-radius: 2px;\n border: 1px solid hsl(var(--sidebar-border));\n background: hsl(var(--background) / 0.3);\n padding: 12px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.cm-mirror-pane__section-label {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: hsl(var(--muted-foreground));\n}\n\n/* Key-value rows */\n.cm-mirror-pane__kv-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n font-family: var(--font-mono, monospace);\n}\n\n.cm-mirror-pane__kv-label {\n color: hsl(var(--muted-foreground));\n}\n\n.cm-mirror-pane__kv-value {\n color: hsl(var(--foreground));\n text-align: right;\n}\n\n/* Pricing sub-panel */\n.cm-mirror-pane__pricing-block {\n border-radius: 2px;\n border: 1px solid hsl(var(--sidebar-border));\n background: hsl(var(--background) / 0.4);\n padding: 8px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.cm-mirror-pane__pricing-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n}\n\n.cm-mirror-pane__pricing-name {\n font-family: var(--font-mono, monospace);\n color: hsl(var(--primary));\n}\n\n/* Description block */\n.cm-mirror-pane__description {\n border-radius: 2px;\n border: 1px solid hsl(var(--sidebar-border));\n background: hsl(var(--background) / 0.3);\n padding: 12px;\n color: hsl(var(--muted-foreground));\n line-height: 1.6;\n}\n\n/* Settings: tool group */\n.cm-mirror-pane__tool-group {\n border-radius: 2px;\n border: 1px solid hsl(var(--primary) / 0.2);\n background: hsl(var(--primary) / 0.05);\n padding: 12px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.cm-mirror-pane__tool-group--fuchsia {\n border-color: hsl(var(--accent) / 0.2);\n background: hsl(var(--accent) / 0.05);\n}\n\n.cm-mirror-pane__tool-group-label {\n font-size: 12px;\n font-family: var(--font-mono, monospace);\n}\n\n.cm-mirror-pane__tool-toggle {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.cm-mirror-pane__tool-toggle-label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n}\n\n/* Empty state */\n.cm-mirror-pane__empty {\n padding: 16px 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n text-align: center;\n}\n\n.cm-mirror-pane__empty-icon {\n width: 40px;\n height: 40px;\n color: hsl(var(--muted-foreground) / 0.4);\n margin-bottom: 12px;\n}\n\n.cm-mirror-pane__empty-text {\n font-size: 14px;\n color: hsl(var(--muted-foreground) / 0.7);\n}\n\n/* No-params state */\n.cm-mirror-pane__no-params {\n border-radius: 2px;\n border: 1px solid hsl(var(--sidebar-border));\n background: hsl(var(--background) / 0.3);\n padding: 16px;\n font-size: 14px;\n color: hsl(var(--muted-foreground));\n}\n";
6
+ export declare const mirrorStyles = "\n.cm-mirror-pane {\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n height: 100%;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: 16px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.42), hsl(221 50% 9% / 0.34)),\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.09), transparent 34%),\n hsl(224 36% 13% / 0.24);\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.06),\n 0 0 34px hsl(var(--primary) / 0.06);\n color: hsl(var(--foreground));\n font-family: var(--font-sans), sans-serif;\n backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-mirror-pane__toolbar {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: 0.35rem;\n padding: 0.45rem;\n border-bottom: 1px solid hsl(var(--primary) / 0.1);\n background: hsl(221 50% 9% / 0.28);\n}\n\n.cm-mirror-pane__toolbar-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.4rem;\n min-width: 2.2rem;\n min-height: 2.2rem;\n padding: 0 0.62rem;\n border: 1px solid transparent;\n border-radius: 999px;\n background: transparent;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n transition:\n transform 160ms ease,\n border-color 180ms ease,\n background-color 180ms ease,\n color 180ms ease,\n box-shadow 180ms ease;\n}\n\n.cm-mirror-pane__toolbar-btn:hover,\n.cm-mirror-pane__toolbar-btn:focus-visible {\n outline: none;\n color: hsl(var(--foreground));\n border-color: hsl(var(--primary) / 0.2);\n background: hsl(var(--primary) / 0.08);\n}\n\n.cm-mirror-pane__toolbar-btn--active-cyan {\n border-color: hsl(var(--primary) / 0.36);\n background: hsl(var(--primary) / 0.12);\n color: hsl(var(--primary));\n box-shadow: 0 0 18px hsl(var(--primary) / 0.12);\n}\n\n.cm-mirror-pane__toolbar-btn--active-fuchsia {\n border-color: hsl(var(--accent) / 0.34);\n background: hsl(var(--accent) / 0.11);\n color: hsl(var(--accent));\n box-shadow: 0 0 18px hsl(var(--accent) / 0.1);\n}\n\n.cm-mirror-pane__toolbar-btn svg {\n width: 1rem;\n height: 1rem;\n}\n\n.cm-mirror-pane__toolbar-label {\n display: none;\n}\n\n@container (min-width: 24rem) {\n .cm-mirror-pane__toolbar-label {\n display: inline;\n }\n}\n\n.cm-mirror-pane__body {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n gap: clamp(0.75rem, 3cqi, 1rem);\n overflow: auto;\n padding: clamp(0.75rem, 3cqi, 1rem);\n}\n\n.cm-mirror-pane__footer {\n flex: 0 0 auto;\n border-top: 1px solid hsl(var(--primary) / 0.1);\n padding: 0.75rem 1rem;\n}\n\n.cm-mirror-pane__empty {\n flex: 1;\n min-height: 14rem;\n display: grid;\n place-items: center;\n align-content: center;\n gap: 0.75rem;\n padding: 1.5rem;\n text-align: center;\n}\n\n.cm-mirror-pane__empty-icon {\n display: inline-flex;\n color: hsl(var(--primary));\n opacity: 0.72;\n}\n\n.cm-mirror-pane__empty-icon svg {\n width: 2.5rem;\n height: 2.5rem;\n}\n\n.cm-mirror-pane__empty-text {\n max-width: 18rem;\n color: hsl(var(--muted-foreground));\n line-height: 1.45;\n}\n\n.cm-mirror-pane__model-header {\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n min-width: 0;\n}\n\n.cm-mirror-pane__model-icon-box {\n display: grid;\n width: 2.65rem;\n height: 2.65rem;\n place-items: center;\n flex: 0 0 auto;\n border: 1px solid hsl(var(--primary) / 0.24);\n border-radius: 12px;\n background: hsl(var(--primary) / 0.09);\n color: hsl(var(--primary));\n box-shadow: inset 0 0 18px hsl(var(--primary) / 0.08);\n}\n\n.cm-mirror-pane__model-icon-box svg {\n width: 1.2rem;\n height: 1.2rem;\n}\n\n.cm-mirror-pane__model-copy {\n flex: 1;\n min-width: 0;\n display: grid;\n gap: 0.25rem;\n}\n\n.cm-mirror-pane__model-name-row {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n min-width: 0;\n flex-wrap: wrap;\n}\n\n.cm-mirror-pane__model-name {\n min-width: 0;\n margin: 0;\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: clamp(0.98rem, 4cqi, 1.14rem);\n font-weight: 800;\n line-height: 1.08;\n overflow-wrap: anywhere;\n}\n\n.cm-mirror-pane__model-types {\n display: inline-flex;\n align-items: center;\n gap: 0.3rem;\n flex-wrap: wrap;\n}\n\n.cm-mirror-pane__badge {\n display: inline-flex;\n align-items: center;\n min-height: 1.35rem;\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: 999px;\n background: hsl(var(--primary) / 0.08);\n color: hsl(var(--primary));\n padding: 0 0.45rem;\n font-family: var(--font-mono), monospace;\n font-size: 0.6rem;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n}\n\n.cm-mirror-pane__badge[data-tone=\"fuchsia\"] {\n border-color: hsl(var(--accent) / 0.24);\n background: hsl(var(--accent) / 0.1);\n color: hsl(var(--accent));\n}\n\n.cm-mirror-pane__badge[data-tone=\"green\"] {\n border-color: hsl(142 71% 45% / 0.28);\n background: hsl(142 71% 45% / 0.1);\n color: hsl(142 71% 55%);\n}\n\n.cm-mirror-pane__badge[data-tone=\"warning\"] {\n border-color: hsl(42 100% 48% / 0.28);\n background: hsl(42 100% 48% / 0.1);\n color: hsl(42 100% 58%);\n}\n\n.cm-mirror-pane__badge[data-tone=\"danger\"] {\n border-color: hsl(var(--destructive) / 0.3);\n background: hsl(var(--destructive) / 0.12);\n color: hsl(var(--destructive));\n}\n\n.cm-mirror-pane__model-provider,\n.cm-mirror-pane__model-id {\n margin: 0;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n line-height: 1.35;\n overflow-wrap: anywhere;\n}\n\n.cm-mirror-pane__model-id {\n color: hsl(var(--primary) / 0.72);\n}\n\n.cm-mirror-pane__description,\n.cm-mirror-pane__description--clamped,\n.cm-mirror-pane__section,\n.cm-mirror-pane__pricing-compact,\n.cm-mirror-pane__pricing-block,\n.cm-mirror-pane__tool-group,\n.cm-mirror-pane__no-params,\n.cm-mirror-pane__text-area,\n.cm-mirror-pane__field {\n border: 1px solid hsl(var(--primary) / 0.12);\n border-radius: 12px;\n background: hsl(221 50% 9% / 0.3);\n}\n\n.cm-mirror-pane__description,\n.cm-mirror-pane__description--clamped {\n padding: 0.75rem;\n color: hsl(var(--muted-foreground));\n line-height: 1.5;\n}\n\n.cm-mirror-pane__section {\n display: flex;\n flex-direction: column;\n gap: 0.6rem;\n min-width: 0;\n}\n\n.cm-mirror-pane__section--compact {\n padding: 0.75rem;\n}\n\n.cm-mirror-pane__section-label,\n.cm-mirror-pane__tool-group-label {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 800;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n}\n\n.cm-mirror-pane__io-row,\n.cm-mirror-pane__kv-row,\n.cm-mirror-pane__pricing-header,\n.cm-mirror-pane__tool-toggle {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n min-width: 0;\n}\n\n.cm-mirror-pane__io-row {\n align-items: flex-start;\n}\n\n.cm-mirror-pane__io-label,\n.cm-mirror-pane__kv-label {\n flex: 0 0 auto;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.7rem;\n}\n\n.cm-mirror-pane__io-badges,\n.cm-mirror-pane__kv-grid,\n.cm-mirror-pane__pricing-entries,\n.cm-mirror-pane__custom-content,\n.cm-mirror-pane__custom-section {\n display: flex;\n flex-direction: column;\n gap: 0.45rem;\n min-width: 0;\n}\n\n.cm-mirror-pane__io-badges {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.cm-mirror-pane__kv-value {\n min-width: 0;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.74rem;\n text-align: right;\n overflow-wrap: anywhere;\n}\n\n.cm-mirror-pane__pricing-compact,\n.cm-mirror-pane__pricing-block,\n.cm-mirror-pane__tool-group {\n display: flex;\n flex-direction: column;\n gap: 0.45rem;\n padding: 0.62rem 0.7rem;\n}\n\n.cm-mirror-pane__pricing-unit {\n color: hsl(var(--muted-foreground) / 0.72);\n font-family: var(--font-mono), monospace;\n font-size: 0.64rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.cm-mirror-pane__pricing-name {\n color: hsl(var(--accent));\n font-family: var(--font-mono), monospace;\n font-weight: 700;\n}\n\n.cm-mirror-pane__tool-group {\n border-color: hsl(var(--primary) / 0.18);\n background: hsl(var(--primary) / 0.05);\n}\n\n.cm-mirror-pane__tool-group--fuchsia {\n border-color: hsl(var(--accent) / 0.18);\n background: hsl(var(--accent) / 0.05);\n}\n\n.cm-mirror-pane__tool-toggle-label {\n display: inline-flex;\n align-items: center;\n gap: 0.42rem;\n min-width: 0;\n color: hsl(var(--foreground));\n}\n\n.cm-mirror-pane__tool-toggle-label svg,\n.cm-mirror-pane__tool-toggle-label-icon {\n width: 1rem;\n height: 1rem;\n flex: 0 0 auto;\n}\n\n.cm-mirror-pane__text-area {\n width: 100%;\n min-height: 7rem;\n padding: 0.72rem;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.78rem;\n resize: vertical;\n}\n\n.cm-mirror-pane__field {\n width: 100%;\n min-height: 2.45rem;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.78rem;\n}\n\n.cm-mirror-pane__field:focus,\n.cm-mirror-pane__field:focus-visible,\n.cm-mirror-pane__text-area:focus,\n.cm-mirror-pane__text-area:focus-visible {\n outline: none;\n border-color: hsl(var(--primary) / 0.5);\n box-shadow: 0 0 0 1px hsl(var(--primary) / 0.16);\n}\n\n.cm-mirror-pane__param-description,\n.cm-mirror-pane__no-params {\n color: hsl(var(--muted-foreground));\n font-size: 0.78rem;\n line-height: 1.4;\n}\n\n.cm-mirror-pane__no-params {\n padding: 1rem;\n text-align: center;\n}\n\n@container (max-width: 22rem) {\n .cm-mirror-pane__io-row,\n .cm-mirror-pane__kv-row,\n .cm-mirror-pane__pricing-header,\n .cm-mirror-pane__tool-toggle {\n align-items: flex-start;\n flex-direction: column;\n gap: 0.35rem;\n }\n\n .cm-mirror-pane__kv-value {\n text-align: left;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .cm-mirror-pane__toolbar-btn {\n transition-duration: 0.01ms !important;\n }\n}\n";
7
7
  //# sourceMappingURL=styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/mirror/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,YAAY,2pKA2PxB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/mirror/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,YAAY,uhUAgcxB,CAAC"}