@telepath-computer/television 0.1.117 → 0.1.118
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/canonical/v1/components.js +157 -0
- package/dist/canonical/v1/styles.css +148 -4
- package/dist/cli.cjs +6 -2
- package/dist/skills/television/SKILL.md +71 -8
- package/dist/web/assets/index-B8wrBJd5.css +1 -0
- package/dist/web/assets/{index-B4JThtNB.js → index-CMNMkOMk.js} +200 -98
- package/dist/web/index.html +2 -2
- package/package.json +1 -1
- package/dist/web/assets/index-CQF4vfjH.css +0 -1
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
// Artifact-safe custom elements bundled for /canonical/v1/components.js.
|
|
2
|
+
// Keep this entrypoint small: artifacts import it in sandboxed iframes.
|
|
3
|
+
const CHECK_ICON = `
|
|
4
|
+
<svg viewBox="0 0 12 12" aria-hidden="true" focusable="false">
|
|
5
|
+
<path d="M10.2 3.1 5.1 8.2 2.4 5.5" />
|
|
6
|
+
</svg>
|
|
7
|
+
`;
|
|
8
|
+
const LIST_STYLES = `
|
|
9
|
+
:host {
|
|
10
|
+
display: block;
|
|
11
|
+
margin: var(--checkbox-list-margin, var(--space-12) 0);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
[part~="list"] {
|
|
15
|
+
display: grid;
|
|
16
|
+
gap: var(--checkbox-list-gap, var(--space-6));
|
|
17
|
+
}
|
|
18
|
+
`;
|
|
19
|
+
const ITEM_STYLES = `
|
|
20
|
+
:host {
|
|
21
|
+
display: block;
|
|
22
|
+
--checkbox-size: 1em;
|
|
23
|
+
--checkbox-gap: var(--space-8);
|
|
24
|
+
--checkbox-color: var(--color-primary);
|
|
25
|
+
--checkbox-border-color: var(--color-border);
|
|
26
|
+
--checkbox-bg: transparent;
|
|
27
|
+
--checkbox-check-color: var(--color-bg);
|
|
28
|
+
--checkbox-checked-content-color: var(--color-text-muted);
|
|
29
|
+
--checkbox-checked-decoration: line-through;
|
|
30
|
+
--checkbox-checked-decoration-thickness: 0.08em;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
[part~="label"] {
|
|
34
|
+
display: grid;
|
|
35
|
+
grid-template-columns: var(--checkbox-size) minmax(0, 1fr);
|
|
36
|
+
gap: var(--checkbox-gap);
|
|
37
|
+
align-items: baseline;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
input {
|
|
41
|
+
position: absolute;
|
|
42
|
+
opacity: 0;
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
width: 1px;
|
|
45
|
+
height: 1px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
[part~="box"] {
|
|
49
|
+
display: inline-grid;
|
|
50
|
+
place-items: center;
|
|
51
|
+
width: var(--checkbox-size);
|
|
52
|
+
height: var(--checkbox-size);
|
|
53
|
+
border: 1px solid var(--checkbox-border-color);
|
|
54
|
+
border-radius: var(--checkbox-radius, var(--radius-4));
|
|
55
|
+
background: var(--checkbox-bg);
|
|
56
|
+
color: var(--checkbox-check-color);
|
|
57
|
+
transform: translateY(0.12em);
|
|
58
|
+
cursor: not-allowed;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
[part~="check"] {
|
|
62
|
+
display: block;
|
|
63
|
+
width: calc(var(--checkbox-size) * 0.72);
|
|
64
|
+
height: calc(var(--checkbox-size) * 0.72);
|
|
65
|
+
opacity: 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
[part~="check"] svg {
|
|
69
|
+
display: block;
|
|
70
|
+
width: 100%;
|
|
71
|
+
height: 100%;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
[part~="check"] path {
|
|
75
|
+
fill: none;
|
|
76
|
+
stroke: currentColor;
|
|
77
|
+
stroke-width: 2;
|
|
78
|
+
stroke-linecap: round;
|
|
79
|
+
stroke-linejoin: round;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
[part~="content"] {
|
|
83
|
+
min-width: 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
:host([checked]) [part~="box"] {
|
|
87
|
+
border-color: var(--checkbox-color);
|
|
88
|
+
background: var(--checkbox-color);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
:host([checked]) [part~="check"] {
|
|
92
|
+
opacity: 1;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:host([checked]) [part~="content"] {
|
|
96
|
+
color: var(--checkbox-checked-content-color);
|
|
97
|
+
text-decoration-line: var(--checkbox-checked-decoration);
|
|
98
|
+
text-decoration-thickness: var(--checkbox-checked-decoration-thickness);
|
|
99
|
+
}
|
|
100
|
+
`;
|
|
101
|
+
export class CheckboxListElement extends HTMLElement {
|
|
102
|
+
#root;
|
|
103
|
+
constructor() {
|
|
104
|
+
super();
|
|
105
|
+
this.#root = this.attachShadow({ mode: "open" });
|
|
106
|
+
this.#root.innerHTML = `<style>${LIST_STYLES}</style><div part="list"><slot></slot></div>`;
|
|
107
|
+
}
|
|
108
|
+
connectedCallback() {
|
|
109
|
+
if (!this.hasAttribute("role")) {
|
|
110
|
+
this.setAttribute("role", "list");
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
export class CheckboxItemElement extends HTMLElement {
|
|
115
|
+
static observedAttributes = ["checked"];
|
|
116
|
+
#root;
|
|
117
|
+
#input;
|
|
118
|
+
constructor() {
|
|
119
|
+
super();
|
|
120
|
+
this.#root = this.attachShadow({ mode: "open" });
|
|
121
|
+
this.#root.innerHTML = `
|
|
122
|
+
<style>${ITEM_STYLES}</style>
|
|
123
|
+
<label part="label">
|
|
124
|
+
<input type="checkbox" disabled tabindex="-1">
|
|
125
|
+
<span part="box"><span part="check">${CHECK_ICON}</span></span>
|
|
126
|
+
<span part="content"><slot></slot></span>
|
|
127
|
+
</label>
|
|
128
|
+
`;
|
|
129
|
+
const input = this.#root.querySelector("input");
|
|
130
|
+
if (!(input instanceof HTMLInputElement)) {
|
|
131
|
+
throw new Error("checkbox-item failed to initialize input");
|
|
132
|
+
}
|
|
133
|
+
this.#input = input;
|
|
134
|
+
}
|
|
135
|
+
connectedCallback() {
|
|
136
|
+
if (!this.hasAttribute("role")) {
|
|
137
|
+
this.setAttribute("role", "listitem");
|
|
138
|
+
}
|
|
139
|
+
this.setAttribute("aria-disabled", "true");
|
|
140
|
+
this.#syncChecked();
|
|
141
|
+
}
|
|
142
|
+
attributeChangedCallback() {
|
|
143
|
+
this.#syncChecked();
|
|
144
|
+
}
|
|
145
|
+
#syncChecked() {
|
|
146
|
+
const checked = this.hasAttribute("checked");
|
|
147
|
+
this.#input.checked = checked;
|
|
148
|
+
this.setAttribute("aria-checked", checked ? "true" : "false");
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
if (!customElements.get("checkbox-list")) {
|
|
152
|
+
customElements.define("checkbox-list", CheckboxListElement);
|
|
153
|
+
}
|
|
154
|
+
if (!customElements.get("checkbox-item")) {
|
|
155
|
+
customElements.define("checkbox-item", CheckboxItemElement);
|
|
156
|
+
}
|
|
157
|
+
|
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
* Canonical artifact stylesheet — the curated subset of the design system
|
|
3
3
|
* artifacts inherit at /canonical/v1/styles.css.
|
|
4
4
|
*
|
|
5
|
-
* Includes
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
5
|
+
* Includes the design-system primitives artifacts should inherit by default:
|
|
6
|
+
* reset, fonts, tokens, theme defaults, and conservative document typography for plain
|
|
7
|
+
* semantic HTML. Artifact-specific structure and rhythm should still be
|
|
8
|
+
* authored explicitly in the artifact HTML so agents can see and control the
|
|
9
|
+
* result, but basic prose should not fall back to browser defaults.
|
|
9
10
|
*
|
|
10
11
|
* Source of truth for what's in v1. Edits here change what artifacts inherit.
|
|
11
12
|
*/
|
|
@@ -292,6 +293,149 @@ select {
|
|
|
292
293
|
|
|
293
294
|
|
|
294
295
|
|
|
296
|
+
:root {
|
|
297
|
+
--color-bg: var(--neutral-50);
|
|
298
|
+
--color-bg-muted: var(--neutral-100);
|
|
299
|
+
--color-surface: var(--white);
|
|
300
|
+
--color-surface-muted: var(--neutral-100);
|
|
301
|
+
--color-interactive: var(--neutral-200);
|
|
302
|
+
--color-interactive-hover: var(--neutral-300);
|
|
303
|
+
|
|
304
|
+
/* Borders use alpha so the same hairline reads on light, dark, or
|
|
305
|
+
image bgs without needing a tone-aware swap. */
|
|
306
|
+
--color-border: rgba(0, 0, 0, 0.10);
|
|
307
|
+
--color-border-muted: rgba(0, 0, 0, 0.06);
|
|
308
|
+
|
|
309
|
+
--color-text: var(--neutral-900);
|
|
310
|
+
--color-text-muted: var(--neutral-500);
|
|
311
|
+
--color-link: inherit;
|
|
312
|
+
--color-focus-ring: var(--neutral-500);
|
|
313
|
+
--color-overlay-backdrop: rgb(0 0 0 / 0.5);
|
|
314
|
+
--color-highlight: rgb(255 255 255 / 0.5);
|
|
315
|
+
--color-primary: var(--blue-500);
|
|
316
|
+
--color-danger: var(--red-600);
|
|
317
|
+
|
|
318
|
+
color-scheme: light;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
|
|
322
|
+
|
|
323
|
+
|
|
295
324
|
body {
|
|
296
325
|
font-family: var(--font-sans);
|
|
326
|
+
font-size: calc(var(--text-base) + 0.5px);
|
|
327
|
+
font-weight: var(--font-weight-body);
|
|
328
|
+
line-height: var(--leading-base);
|
|
329
|
+
letter-spacing: 0.015em;
|
|
330
|
+
color: var(--color-text);
|
|
331
|
+
background: var(--color-bg);
|
|
332
|
+
-webkit-font-smoothing: antialiased;
|
|
333
|
+
-moz-osx-font-smoothing: grayscale;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
a {
|
|
337
|
+
color: var(--color-link);
|
|
338
|
+
text-underline-offset: 0.15em;
|
|
339
|
+
text-decoration-thickness: 0.08em;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
h1,
|
|
343
|
+
h2,
|
|
344
|
+
h3,
|
|
345
|
+
h4,
|
|
346
|
+
h5,
|
|
347
|
+
h6 {
|
|
348
|
+
font-weight: 600;
|
|
349
|
+
line-height: 1.25;
|
|
350
|
+
color: inherit;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
h1 {
|
|
354
|
+
font-size: 1.3em;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
h2 {
|
|
358
|
+
font-size: 1.1em;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
h3,
|
|
362
|
+
h4,
|
|
363
|
+
h5,
|
|
364
|
+
h6 {
|
|
365
|
+
font-size: 1em;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
p,
|
|
369
|
+
ul,
|
|
370
|
+
ol,
|
|
371
|
+
blockquote,
|
|
372
|
+
pre,
|
|
373
|
+
hr,
|
|
374
|
+
table {
|
|
375
|
+
margin: var(--space-12) 0;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
:is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol, blockquote, pre, hr, table) {
|
|
379
|
+
margin-top: var(--space-8);
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
ul,
|
|
383
|
+
ol {
|
|
384
|
+
padding-left: var(--space-24);
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
code {
|
|
388
|
+
font-family: var(--font-mono);
|
|
389
|
+
font-size: 0.9em;
|
|
390
|
+
background: var(--color-bg-muted);
|
|
391
|
+
padding: var(--space-2) var(--space-4);
|
|
392
|
+
border-radius: var(--radius-4);
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
pre {
|
|
396
|
+
font-family: var(--font-mono);
|
|
397
|
+
font-size: var(--text-sm);
|
|
398
|
+
background: var(--color-bg-muted);
|
|
399
|
+
padding: var(--space-12);
|
|
400
|
+
border: 1px solid var(--color-border-muted);
|
|
401
|
+
border-radius: var(--radius-8);
|
|
402
|
+
overflow-x: auto;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
pre code {
|
|
406
|
+
background: none;
|
|
407
|
+
padding: 0;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
blockquote {
|
|
411
|
+
padding-left: var(--space-16);
|
|
412
|
+
border-left: 3px solid var(--color-border);
|
|
413
|
+
color: var(--color-text-muted);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
hr {
|
|
417
|
+
border: none;
|
|
418
|
+
border-top: 1px solid var(--color-border);
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
table {
|
|
422
|
+
width: 100%;
|
|
423
|
+
border-collapse: collapse;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
th,
|
|
427
|
+
td {
|
|
428
|
+
padding: var(--space-8) var(--space-12);
|
|
429
|
+
border: 1px solid var(--color-border);
|
|
430
|
+
text-align: left;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
th {
|
|
434
|
+
background: var(--color-bg-muted);
|
|
435
|
+
font-weight: 600;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
img {
|
|
439
|
+
max-width: 100%;
|
|
440
|
+
height: auto;
|
|
297
441
|
}
|
package/dist/cli.cjs
CHANGED
|
@@ -54007,6 +54007,10 @@ var Server = class {
|
|
|
54007
54007
|
acpEnabled: this.acp !== null
|
|
54008
54008
|
});
|
|
54009
54009
|
if (options.canonicalDir) {
|
|
54010
|
+
this.app.use("/canonical/v1", (_req, res, next) => {
|
|
54011
|
+
res.setHeader("Access-Control-Allow-Origin", "*");
|
|
54012
|
+
next();
|
|
54013
|
+
});
|
|
54010
54014
|
this.app.get(
|
|
54011
54015
|
"/canonical/v1/styles.css",
|
|
54012
54016
|
serveCanonicalStyles({ canonicalDir: options.canonicalDir, store: this.store })
|
|
@@ -55380,8 +55384,8 @@ function resolveVercelSkillsInstallerBin() {
|
|
|
55380
55384
|
return localRequire.resolve("skills/bin/cli.mjs");
|
|
55381
55385
|
}
|
|
55382
55386
|
function readCLIVersion() {
|
|
55383
|
-
if ("0.1.
|
|
55384
|
-
return "0.1.
|
|
55387
|
+
if ("0.1.118".length > 0) {
|
|
55388
|
+
return "0.1.118";
|
|
55385
55389
|
}
|
|
55386
55390
|
const devPackageJsonPath = import_node_path11.default.join(getDevPackageDir(), "package.json");
|
|
55387
55391
|
if (!(0, import_node_fs8.existsSync)(devPackageJsonPath)) {
|
|
@@ -475,21 +475,84 @@ For a pending create, the artifact never becomes live. For a pending edit, the p
|
|
|
475
475
|
|
|
476
476
|
# HTML artifact style
|
|
477
477
|
|
|
478
|
-
Write a complete
|
|
479
|
-
canonical stylesheet
|
|
480
|
-
to make the artifact readable with local CSS.
|
|
481
|
-
|
|
482
|
-
Always include the canonical stylesheet:
|
|
478
|
+
Write a complete HTML document for the Television viewer. Always include the
|
|
479
|
+
canonical stylesheet:
|
|
483
480
|
|
|
484
481
|
```html
|
|
485
482
|
<link rel="stylesheet" href="/canonical/v1/styles.css">
|
|
486
483
|
```
|
|
487
484
|
|
|
485
|
+
The canonical stylesheet provides the shared artifact foundation: reset, Hind
|
|
486
|
+
font, design tokens, default semantic theme colors, and conservative document
|
|
487
|
+
typography for plain semantic HTML.
|
|
488
|
+
|
|
489
|
+
Lean on semantic HTML first. Headings, paragraphs, lists, links, code blocks,
|
|
490
|
+
blockquotes, rules, images, and tables have readable defaults. Add local CSS for
|
|
491
|
+
artifact-specific layout, density, hierarchy, or specialized presentations; do
|
|
492
|
+
not recreate baseline prose styling in every artifact.
|
|
493
|
+
|
|
494
|
+
For prose-like documents, consider giving the content enough room above the bottom title bar. A reasonable starting point is 32px padding on the top and sides, with 64px at the bottom; adjust based on the content and layout:
|
|
495
|
+
|
|
496
|
+
```css
|
|
497
|
+
body {
|
|
498
|
+
padding: 32px 32px 64px;
|
|
499
|
+
}
|
|
500
|
+
```
|
|
501
|
+
|
|
502
|
+
## Canonical components
|
|
503
|
+
|
|
504
|
+
For house-style components, import the canonical component bundle:
|
|
505
|
+
|
|
506
|
+
```html
|
|
507
|
+
<script type="module" src="/canonical/v1/components.js"></script>
|
|
508
|
+
```
|
|
509
|
+
|
|
510
|
+
Use checkbox-list components for checklists rather than markdown task syntax:
|
|
511
|
+
|
|
512
|
+
```html
|
|
513
|
+
<checkbox-list>
|
|
514
|
+
<checkbox-item checked>Completed item</checkbox-item>
|
|
515
|
+
<checkbox-item>Open item</checkbox-item>
|
|
516
|
+
</checkbox-list>
|
|
517
|
+
```
|
|
518
|
+
|
|
519
|
+
Checked items render muted and struck through. The checkbox marker is static and
|
|
520
|
+
shows a not-allowed cursor when hovered.
|
|
521
|
+
|
|
522
|
+
Checkbox-list styling API:
|
|
523
|
+
|
|
524
|
+
- `checkbox-list::part(list)` — the internal item stack.
|
|
525
|
+
- `checkbox-item::part(label)` — row containing marker and content.
|
|
526
|
+
- `checkbox-item::part(box)` — visual checkbox marker.
|
|
527
|
+
- `checkbox-item::part(check)` — checkmark.
|
|
528
|
+
- `checkbox-item::part(content)` — item text/content.
|
|
529
|
+
- Useful variables: `--checkbox-list-gap`, `--checkbox-size`,
|
|
530
|
+
`--checkbox-gap`, `--checkbox-color`, `--checkbox-border-color`,
|
|
531
|
+
`--checkbox-radius`, `--checkbox-checked-content-color`,
|
|
532
|
+
`--checkbox-checked-decoration`.
|
|
533
|
+
|
|
534
|
+
Example local variation:
|
|
535
|
+
|
|
536
|
+
```css
|
|
537
|
+
checkbox-list {
|
|
538
|
+
--checkbox-list-gap: 8px;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
checkbox-item {
|
|
542
|
+
--checkbox-color: var(--green-600);
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
checkbox-item::part(box) {
|
|
546
|
+
border-radius: 999px;
|
|
547
|
+
}
|
|
548
|
+
```
|
|
549
|
+
|
|
488
550
|
## Viewport
|
|
489
551
|
|
|
490
|
-
Artifacts render inside a resizable Television card, not a full browser page.
|
|
552
|
+
Artifacts render inside a resizable Television card, not a full browser page.
|
|
553
|
+
The default card is roughly 528px wide by 800px tall. Users may make cards
|
|
491
554
|
narrower, wider, shorter, or taller. Treat 528px × 800px as the first layout
|
|
492
555
|
target, then make sure the artifact still works when narrower.
|
|
493
556
|
|
|
494
|
-
If content overflows, artifacts can scroll vertically. Avoid horizontal scrolling
|
|
495
|
-
wide data table or timeline.
|
|
557
|
+
If content overflows, artifacts can scroll vertically. Avoid horizontal scrolling
|
|
558
|
+
unless the content genuinely requires it, such as a wide data table or timeline.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
artifact-view{display:flex;flex-direction:column;width:100%;height:100%;border-radius:var(--radius-16);background:var(--color-surface);overflow:hidden;transition:box-shadow .15s ease,transform .15s ease}artifact-view .artifact-title-bar{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 6px 0 10px;border:0;box-shadow:inset 0 .5px 0 var(--color-border-muted);font-size:12px;font-weight:500;touch-action:none;-webkit-user-select:none;user-select:none}artifact-view[data-dragging]{box-shadow:0 6px 16px #00000024,0 20px 56px #0000003d}artifact-view[data-dragging] .artifact-title-bar{background:linear-gradient(180deg,var(--color-highlight),transparent),var(--color-surface-muted);backdrop-filter:none;-webkit-backdrop-filter:none}artifact-view .artifact-title-group{display:flex;align-items:center;gap:6px;min-width:0}artifact-view .artifact-title-icon{display:inline-flex;flex:none;color:var(--color-text-muted)}artifact-view .artifact-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}artifact-view .artifact-close-btn{width:20px;height:20px;border-radius:var(--radius-4)}artifact-view .artifact-content{flex:1;min-height:0;overflow:auto;background:var(--color-surface)}artifact-view iframe.artifact-frame,artifact-view webview.artifact-frame{border:0;width:100%;display:block}artifact-view .artifact-placeholder{display:flex;align-items:center;justify-content:center;color:var(--color-text-muted, #888);font-size:12px}layout-view{width:100%;flex:1;min-width:0;min-height:0;display:flex;align-items:flex-start;padding:40px 0 60px;overflow:hidden;overscroll-behavior-x:none;outline:none;position:relative;touch-action:pan-y;--layout-unit-x: 120px;--layout-unit-y: 120px;--layout-gap: 16px;--layout-drag-transition-ms: 0ms;--bg-scale: .96;--bg-opacity: .65;--color-drag-target: color-mix( in srgb, var(--color-border, var(--neutral-300, #cbd5e1)) 55%, transparent )}@media (max-width: 560px){layout-view{padding-top:30px;padding-bottom:60px}}layout-view .track{display:flex;align-items:start;gap:var(--layout-gap);flex-shrink:0;width:max-content;will-change:transform;transition:transform .2s ease}layout-view .node{align-self:start;will-change:transform;z-index:1}layout-view[data-wheel-scrolling]:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:auto}layout-view[data-wheel-scrolling] iframe,layout-view[data-wheel-scrolling] webview{pointer-events:none}layout-view .node-inner{display:grid;grid-template-columns:repeat(4,var(--layout-unit-x));grid-template-rows:repeat(6,var(--layout-unit-y));gap:var(--layout-gap);width:100%}layout-view[data-depth=on] .node[data-foreground]~.node:not([data-foreground]),layout-view[data-depth=on] .node:not([data-foreground]):has(~.node[data-foreground]){z-index:0;opacity:var(--bg-opacity)}layout-view[data-depth=on] .node[data-foreground]~.node:not([data-foreground]) .card-slot>*,layout-view[data-depth=on] .node:not([data-foreground]):has(~.node[data-foreground]) .card-slot>*{pointer-events:none}layout-view[data-depth=on] .node[data-foreground]+.node:not([data-foreground]) .card-slot{--depth-n: .5;transform:scale(var(--bg-scale)) translate(calc(-1 * var(--depth-n) * (1 - var(--bg-scale)) * var(--card-width-px) * 1px));transform-origin:center center;transition:transform .2s ease}layout-view[data-depth=on] .node[data-foreground]+.node:not([data-foreground])+.node:not([data-foreground]) .card-slot{--depth-n: 1.5;transform:scale(var(--bg-scale)) translate(calc(-1 * var(--depth-n) * (1 - var(--bg-scale)) * var(--card-width-px) * 1px));transform-origin:center center;transition:transform .2s ease}layout-view[data-depth=on] .node[data-foreground]+.node:not([data-foreground])+.node:not([data-foreground])+.node:not([data-foreground]) .card-slot{--depth-n: 2.5;transform:scale(var(--bg-scale)) translate(calc(-1 * var(--depth-n) * (1 - var(--bg-scale)) * var(--card-width-px) * 1px));transform-origin:center center;transition:transform .2s ease}layout-view[data-depth=on] .node[data-foreground]+.node:not([data-foreground])+.node:not([data-foreground])+.node:not([data-foreground])+.node:not([data-foreground]) .card-slot{--depth-n: 3.5;transform:scale(var(--bg-scale)) translate(calc(-1 * var(--depth-n) * (1 - var(--bg-scale)) * var(--card-width-px) * 1px));transform-origin:center center;transition:transform .2s ease}layout-view[data-depth=on] .node:not([data-foreground]):has(+.node[data-foreground]) .card-slot{--depth-n: .5;transform:scale(var(--bg-scale)) translate(calc(var(--depth-n) * (1 - var(--bg-scale)) * var(--card-width-px) * 1px));transform-origin:center center;transition:transform .2s ease}layout-view[data-depth=on] .node:not([data-foreground]):has(+.node:not([data-foreground])+.node[data-foreground]) .card-slot{--depth-n: 1.5;transform:scale(var(--bg-scale)) translate(calc(var(--depth-n) * (1 - var(--bg-scale)) * var(--card-width-px) * 1px));transform-origin:center center;transition:transform .2s ease}layout-view[data-depth=on] .node:not([data-foreground]):has(+.node:not([data-foreground])+.node:not([data-foreground])+.node[data-foreground]) .card-slot{--depth-n: 2.5;transform:scale(var(--bg-scale)) translate(calc(var(--depth-n) * (1 - var(--bg-scale)) * var(--card-width-px) * 1px));transform-origin:center center;transition:transform .2s ease}layout-view[data-depth=on] .node:not([data-foreground]):has(+.node:not([data-foreground])+.node:not([data-foreground])+.node:not([data-foreground])+.node[data-foreground]) .card-slot{--depth-n: 3.5;transform:scale(var(--bg-scale)) translate(calc(var(--depth-n) * (1 - var(--bg-scale)) * var(--card-width-px) * 1px));transform-origin:center center;transition:transform .2s ease}layout-view .card-slot{border-radius:var(--radius-12);box-sizing:border-box;cursor:default;min-width:0;min-height:0;position:relative;z-index:1}layout-view .card-slot[data-layout-drag-source=true]{transition:none}layout-view .card-content-mount{width:100%;height:100%}layout-view .card-content-mount>*{width:100%;height:100%}layout-view .drag-source-node{flex:0 0 auto;width:0;height:0;margin-right:calc(-1 * var(--layout-gap));overflow:visible;pointer-events:none}layout-view .drag-source-node .node-inner{display:contents}layout-view .resize-handle{position:absolute;top:0;bottom:0;right:-8px;width:16px;cursor:ew-resize;z-index:3;touch-action:none}layout-view .card-placeholder{border-radius:var(--radius-12);background:var(--color-drag-target);position:relative;z-index:0}layout-view .card-placeholder[data-layout-placeholder-ghost=true]{background:transparent;border:0;opacity:0;pointer-events:none}@keyframes card-focus-pulse{0%{box-shadow:0 0 0 0 var(--color-accent, #3b82f6)}20%{box-shadow:0 0 0 6px color-mix(in srgb,var(--color-accent, #3b82f6) 60%,transparent)}40%{box-shadow:0 0 0 0 transparent}60%{box-shadow:0 0 0 6px color-mix(in srgb,var(--color-accent, #3b82f6) 60%,transparent)}to{box-shadow:0 0 0 0 transparent}}layout-view .card-slot.card-focus-pulse{animation:card-focus-pulse .6s ease-out 1}screen-view{width:100%;flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}screen-select{display:flex;align-items:center;gap:var(--space-6, 6px);flex:1 1 auto;min-width:0;font-size:13px;position:relative}screen-select>segmented-control{flex:none}screen-select>.pills{position:absolute;left:50%;top:0;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-6, 6px);pointer-events:none}screen-select>.pills>*{pointer-events:auto}screen-select segmented-control[variant=glass],screen-select .tab-body[variant=glass]{border-color:var(--tint-300)}screen-select segmented-control[variant=glass][tone=light],screen-select .tab-body[variant=glass][tone=light]{border-color:var(--tint-200)}screen-select .screen-name{max-width:180px;flex:none}screen-select .screen-name .tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}screen-select ui-popover.picker-popover::part(panel){min-width:280px;padding:var(--space-4) var(--space-8)}screen-select .picker{display:grid;gap:var(--space-4);font-weight:var(--font-weight-body);color:var(--color-text)}screen-select .picker-filter{width:100%;height:auto;margin:var(--space-4) 0;padding:2px var(--space-12);border:none;border-radius:var(--radius-8);background:var(--tint-100);color:inherit;font:inherit;font-size:var(--text-sm);font-weight:var(--font-weight-body)}screen-select .picker-filter::placeholder{color:var(--color-text-muted)}screen-select .picker-filter:focus{background:var(--tint-100);border-color:transparent;outline:none;box-shadow:none}screen-select .picker-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;max-height:min(500px,calc(100dvh - 100px));overflow-y:auto}screen-select .picker-section-label{margin:var(--space-4) 0 2px;padding:var(--space-4) var(--space-12);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--font-weight-body)}screen-select .picker-section-label:first-child{margin-top:0}screen-select .picker-row{display:flex;align-items:center;padding:3px var(--space-12);border-radius:var(--radius-8);cursor:default}screen-select .picker-row[data-active]{background:var(--color-overlay-active)}screen-select .picker-row:hover,screen-select .picker-row[data-highlighted]{background:var(--color-overlay-hover)}screen-select .picker-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base)}screen-select .picker-empty{margin:0;padding:6px var(--space-12);color:var(--color-text-muted);font-size:var(--text-sm)}screen-select .tab{position:relative;display:inline-flex;flex:none}screen-select .tab>.tab-body{padding-left:8px;padding-right:11px;position:relative}screen-select .tab>.tab-body>.tab-leading{flex:none;width:var(--control-height-xs);height:var(--control-height-xs);display:inline-flex;align-items:center;justify-content:center;color:var(--tint-700)}screen-select .tab>.tab-body>.tab-leading svg{width:13px;height:13px}screen-select .tab>.tab-close{position:absolute;left:8px;top:50%;transform:translateY(-50%);display:none;z-index:1}screen-select .tab>.tab-close svg{width:12px;height:12px}screen-select .tab[data-active]>.tab-body>.tab-leading,screen-select .tab:hover>.tab-body>.tab-leading{visibility:hidden}screen-select .tab[data-active]>.tab-close,screen-select .tab:hover>.tab-close{display:inline-flex}screen-select .tab:hover>.tab-body[variant=glass]:not([aria-pressed=true]):not(:disabled){background:linear-gradient(var(--color-overlay-hover),var(--color-overlay-hover));backdrop-filter:blur(20px) brightness(.95) saturate(1.8);-webkit-backdrop-filter:blur(20px) brightness(.95) saturate(1.8)}menu-bar-clock{display:inline-flex;align-items:center;align-self:center;gap:var(--space-6, 6px);height:var(--control-height-md);padding:0 14px 2px;border-radius:var(--radius-12);font-size:13px;white-space:nowrap;flex:none}menu-bar-clock[material=glass]{border-color:var(--tint-300)}menu-bar-clock[material=glass][tone=light]{border-color:var(--tint-200)}agent-activity{--rail-x: 7.5px;--rail-top: 19px;--rail-bottom: -1px;display:flex;flex-direction:column;align-self:stretch;flex-shrink:0;margin-bottom:calc(-1 * var(--space-4));transition:padding-bottom .14s ease-out,margin-bottom .14s ease-out;color:#fffc}agent-activity .bar{display:flex;width:100%;height:auto;padding:var(--space-2) var(--space-6);align-items:center;justify-content:flex-start;border:0;gap:var(--space-8);letter-spacing:inherit}agent-activity .bar-static{cursor:default}agent-activity .bar[variant=ghost]:hover:not(:disabled),agent-activity .bar[variant=ghost]:active:not(:disabled),agent-activity .bar[variant=ghost][aria-expanded=true]:not(:disabled),agent-activity .bar[variant=ghost][aria-expanded=true]:hover:not(:disabled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff}agent-activity .indicator{display:inline-flex;align-items:center;justify-content:center;line-height:0}agent-activity .indicator-active{animation:agent-activity-spin 1s steps(8,end) infinite}@keyframes agent-activity-spin{to{transform:rotate(360deg)}}agent-activity[expanded]{gap:var(--space-6);padding-bottom:var(--space-20);margin-bottom:0}agent-activity .panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .14s ease-out,opacity .14s ease-out}agent-activity[expanded] .panel{grid-template-rows:1fr;opacity:1}agent-activity .panel-inner{overflow:hidden;min-height:0}agent-activity .tool-list{list-style:none;margin:0;padding:var(--space-8) 0 0 var(--space-6);display:flex;flex-direction:column}agent-activity .tool-item{display:grid;grid-template-columns:16px 1fr;grid-template-rows:auto auto;padding-bottom:var(--space-20);position:relative}agent-activity .tool-item:last-child{padding-bottom:0}agent-activity .tool-item:before{content:"";position:absolute;left:var(--rail-x);top:var(--rail-top);bottom:var(--rail-bottom);width:1px;background:var(--tint-300)}agent-activity .tool-item:last-child:before{display:none}agent-activity .tool-dot{grid-column:1;grid-row:1;align-self:center;justify-self:center;width:6px;height:6px;border-radius:2px;background:currentColor;opacity:.7;position:relative;top:1px}agent-activity .tool-dot[data-status=completed]{background:var(--green-500);opacity:1}agent-activity .tool-dot[data-status=failed]{background:var(--color-danger);opacity:1}agent-activity .tool-dot[data-status=in_progress]{animation:agent-activity-blink 1s steps(1,end) infinite}@keyframes agent-activity-blink{0%{opacity:.7}50%{opacity:.15}}@media (prefers-reduced-motion: reduce){agent-activity .indicator-active,agent-activity .tool-dot[data-status=in_progress]{animation:none}agent-activity,agent-activity .panel{transition:none}}agent-activity .tool-title{grid-column:2;grid-row:1;padding-left:var(--space-8);font-family:var(--font-mono);font-size:var(--text-sm)}agent-activity .tool-output{grid-column:2;grid-row:2;margin:var(--space-12) 0 0 var(--space-8);border:.5px solid var(--tint-300);border-radius:var(--radius-4);overflow:hidden}agent-activity .tool-text{margin:0;padding:var(--space-8) var(--space-12);background:transparent;border:0;border-radius:0;font-family:var(--font-mono);font-size:var(--text-sm);white-space:pre-wrap;overflow-wrap:anywhere;max-height:calc(10lh + var(--space-4));overflow:hidden}agent-activity .tool-text[data-expanded]{max-height:none;overflow:visible}agent-activity .tool-text-toggle[variant=ghost]{display:flex;width:100%;height:auto;margin:0;padding:var(--space-6) var(--space-12);align-items:center;justify-content:space-between;background:var(--tint-150);border:0;border-top:.5px solid var(--tint-300);border-radius:0;box-shadow:none;color:inherit;font:inherit;font-size:var(--text-sm);letter-spacing:inherit}agent-activity .tool-text-toggle[variant=ghost]:hover:not(:disabled){background:var(--tint-200);box-shadow:none}agent-activity .tool-text-toggle[variant=ghost]:active:not(:disabled){background:var(--tint-300);box-shadow:none}message-history{position:relative;display:flex;flex-direction:column;min-height:0;color:#ffffffe6;line-height:1.5}message-history .history-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:12px;padding:var(--space-20) var(--space-16);overflow-y:auto;mask-image:linear-gradient(to bottom,transparent 0,black var(--space-20),black calc(100% - var(--space-20)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--space-20),black calc(100% - var(--space-20)),transparent 100%)}message-history[data-pinned] .history-scroll{mask-image:linear-gradient(to bottom,transparent 0,black var(--space-20));-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--space-20))}message-history .message{padding:6px 10px;border-radius:var(--radius-8);word-wrap:break-word}message-history .message-user{align-self:flex-start;max-width:85%;background:#ffffff26;white-space:pre-wrap}message-history .message-assistant+.message-user{margin-top:var(--space-24)}message-history .message-assistant{align-self:stretch;padding:0 6px}message-history .message-assistant>:first-child{margin-top:0}message-history .message-assistant>:last-child{margin-bottom:0}message-history .message-assistant p,message-history .message-assistant ul,message-history .message-assistant ol,message-history .message-assistant pre,message-history .message-assistant blockquote{margin:0 0 8px}message-history .message-assistant h1,message-history .message-assistant h2,message-history .message-assistant h3,message-history .message-assistant h4{margin:12px 0 4px;font-weight:600;line-height:1.3}message-history .message-assistant ul,message-history .message-assistant ol{padding-left:20px}message-history .message-assistant code{padding:1px 4px;border-radius:var(--radius-4);background:#ffffff1a;font-family:var(--font-mono);font-size:.9em}message-history .message-assistant pre{padding:8px 10px;border-radius:var(--radius-8);background:#ffffff14;overflow-x:auto}message-history .message-assistant pre code{padding:0;background:none}message-history .message-assistant blockquote{padding-left:10px;border-left:2px solid rgba(255,255,255,.2);color:#ffffffb3}message-history .message-assistant a{color:#fffffff2;text-decoration:underline;text-underline-offset:2px}message-history .history-jump{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:var(--radius-full);background:#ffffff26;color:#ffffffe6;transition:opacity .15s ease}message-history .history-jump:hover{background:#ffffff40}message-history[data-pinned] .history-jump{opacity:0;pointer-events:none}command-panel{display:flex;width:320px;padding:12px 16px;border-radius:var(--radius-16);z-index:1000}command-panel .trigger{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:8px;color:#ffffff8c;line-height:1.4;cursor:text;outline:none}command-panel .trigger .label{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}command-panel .trigger .kbd{flex:0 0 auto;padding:1px 6px;border-radius:var(--radius-4);background:#ffffff1a;border:.5px solid rgba(255,255,255,.15);color:#ffffff8c;font-size:.85em;line-height:1.3;letter-spacing:.02em}command-panel .connecting{flex:1;min-width:0;display:flex;align-items:center;gap:10px;color:#ffffffa6;line-height:1.4;cursor:default}command-panel .connecting .label{flex:1;min-width:0;text-align:left}command-panel .connecting .dots:after{display:inline-block;content:"";animation:command-panel-dots 1.2s steps(4,end) infinite}@keyframes command-panel-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}command-panel .open{flex:1;min-width:0;width:420px;max-width:100%;display:flex;flex-direction:column;gap:10px}command-panel:has(.open){width:auto;padding:0;border-radius:0}command-panel .open .chat{border-radius:var(--radius-16);overflow:hidden;display:flex;flex-direction:column;min-height:0;height:min(60vh,480px)}command-panel .open .chat message-history{flex:1 1 auto;min-height:0}command-panel .open .input{display:flex;align-items:center;gap:8px;border-radius:var(--radius-16);padding:6px 6px 6px 16px;min-height:calc(var(--control-height-md) + 12px);cursor:text}command-panel .open .input .textarea,command-panel .open .input .textarea:focus{flex:1;min-width:0;max-height:192px;padding:0;border:none;border-radius:0;resize:none;outline:none;box-shadow:none;background:transparent;color:#ffffffe6;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4}</content> </invoke> .auth-form{display:flex;flex-direction:column;gap:var(--space-24)}.auth-modal-icon{display:inline-flex;opacity:.8}.auth-input-row{display:flex;flex-direction:column;gap:var(--space-6)}.auth-token-input{width:100%}.auth-token-input-invalid{border-color:#c74343}.auth-modal-error{margin:0;font-size:var(--text-sm);color:#c74343}.auth-submit{align-self:stretch;height:var(--control-height-lg)}connecting-overlay{display:contents}.connecting-overlay-panel{min-height:270px;justify-content:center}:root{--app-wallpaper: url(./wallpaper-s-ICws44wH.jpg);--app-bg: var(--color-bg)}television-app{width:100%;height:100%;display:block;background-color:var(--app-bg);background-image:var(--app-wallpaper);background-position:center;background-size:cover;background-repeat:no-repeat}[electron-draggable]{-webkit-app-region:drag}[electron-draggable] :where(button,input,textarea,select,a,[role=button],[role=combobox]){-webkit-app-region:no-drag}television-app>main{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;-webkit-user-select:none;user-select:none}television-app>main.auth-gate{align-items:center;justify-content:center}television-app>main>screen-view{flex:1;min-height:0}television-app>main>.chrome{position:absolute;top:0;right:0;bottom:0;left:0;padding:8px;pointer-events:none;display:flex;flex-direction:column}television-app>main>.chrome>*{pointer-events:auto}television-app>main>.chrome>.top-row{display:flex;align-items:flex-start;gap:var(--space-8, 8px)}television-app>main>.chrome>.top-row>button[variant=glass]{border-color:var(--tint-300)}television-app>main>.chrome>.top-row>button[variant=glass][tone=light]{border-color:var(--tint-200)}body.electron television-app>main>.chrome>.top-row{padding-left:78px}television-app>main>.chrome>command-panel{margin-top:auto;align-self:flex-end}@media (max-width: 560px){television-app>main>.chrome>command-panel{align-self:center}}:root{--color-bg: var(--neutral-200);--color-border: var(--neutral-300)}html,body{overscroll-behavior-x:none}
|