@telepath-computer/television 0.1.128 → 0.1.142
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 +83 -0
- package/dist/canonical/v1/styles.css +0 -2
- package/dist/cli.cjs +2092 -6806
- package/dist/onboarding/television-onboarding/assets/television.svg +71 -0
- package/dist/onboarding/television-onboarding/index.html +203 -0
- package/dist/skills/television/SKILL.md +135 -180
- package/dist/skills/{television-calendar → tv-calendar}/SKILL.md +4 -5
- package/dist/skills/{television-table → tv-table}/SKILL.md +1 -1
- package/dist/skills/{television-theme → tv-theme}/SKILL.md +10 -10
- package/dist/views/markdown/index.html +20 -18
- package/dist/web/assets/artifact-bridge-C9leJZpr.js +1 -0
- package/dist/web/assets/clouds-CAYIArXj.jpg +0 -0
- package/dist/web/assets/favicon-DaYMFRha.svg +71 -0
- package/dist/web/assets/main-DxIXVlLQ.css +1 -0
- package/dist/web/assets/main-L9xlsQn4.js +706 -0
- package/dist/web/assets/urlUnsupported-DBXzijdI.js +1 -0
- package/dist/web/index.html +4 -2
- package/dist/web/views/url-unsupported/index.html +97 -0
- package/package.json +1 -1
- package/dist/web/assets/index-BvBbQr_I.js +0 -709
- package/dist/web/assets/index-C__bLj7I.css +0 -1
- package/dist/web/assets/wallpaper-s-ICws44wH.jpg +0 -0
- /package/dist/skills/{television-calendar → tv-calendar}/calendar.css +0 -0
- /package/dist/skills/{television-calendar → tv-calendar}/calendar.js +0 -0
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg id="TV_-_Black" data-name="TV - Black" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 55 55">
|
|
3
|
+
<defs>
|
|
4
|
+
<style>
|
|
5
|
+
.cls-1, .cls-2 {
|
|
6
|
+
fill: none;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.cls-3 {
|
|
10
|
+
fill: #0015ff;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.cls-4 {
|
|
14
|
+
fill: #ff01d0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.cls-5 {
|
|
18
|
+
fill: #40d2b3;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.cls-6 {
|
|
22
|
+
fill: url(#linear-gradient);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.cls-7 {
|
|
26
|
+
fill: #38c428;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.cls-2 {
|
|
30
|
+
stroke: #fff;
|
|
31
|
+
stroke-width: 3px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.cls-8 {
|
|
35
|
+
fill: #fff;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.cls-9 {
|
|
39
|
+
fill: #ffcd27;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.cls-10 {
|
|
43
|
+
fill: #d24043;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.cls-11 {
|
|
47
|
+
clip-path: url(#clippath);
|
|
48
|
+
}
|
|
49
|
+
</style>
|
|
50
|
+
<linearGradient id="linear-gradient" x1="27.5" y1="1.45" x2="27.5" y2="53.55" gradientUnits="userSpaceOnUse">
|
|
51
|
+
<stop offset="0" stop-color="#000"/>
|
|
52
|
+
<stop offset="1" stop-color="#262626"/>
|
|
53
|
+
</linearGradient>
|
|
54
|
+
<clipPath id="clippath">
|
|
55
|
+
<path class="cls-1" d="M14.2,7.7h26.6c3.15,0,5.7,2.66,5.7,5.94v27.72c0,3.28-2.55,5.94-5.7,5.94H14.2c-3.15,0-5.7-2.66-5.7-5.94V13.64c0-3.28,2.55-5.94,5.7-5.94Z"/>
|
|
56
|
+
</clipPath>
|
|
57
|
+
</defs>
|
|
58
|
+
<path class="cls-6" d="M12.5,1.45h30c5.47,0,10.48,4.46,10.89,9.98.73,10.7.73,21.44,0,32.13-.41,5.52-5.42,9.98-10.89,9.98H12.5c-5.47,0-10.48-4.46-10.89-9.98-.73-10.7-.73-21.44,0-32.13C2.02,5.91,7.03,1.45,12.5,1.45Z"/>
|
|
59
|
+
<g class="cls-11">
|
|
60
|
+
<g>
|
|
61
|
+
<rect class="cls-8" x="8.5" y="7.7" width="38" height="39.6" rx="5.7" ry="5.7"/>
|
|
62
|
+
<path class="cls-7" d="M27.5,48.78V6.71h-9.98v42.07h9.98Z"/>
|
|
63
|
+
<path class="cls-4" d="M27.5,6.71v42.07h9.97V6.71h-9.97Z"/>
|
|
64
|
+
<path class="cls-5" d="M22.75,48.29c-3.8-18.22-1.58-34.98,0-41.08h-11.88v41.08c3.96.33,11.88.79,11.88,0Z"/>
|
|
65
|
+
<path class="cls-10" d="M32.25,7.21c3.8,18.22,1.58,34.98,0,41.08h11.88V7.21c-3.96-.33-11.88-.79-11.88,0Z"/>
|
|
66
|
+
<path class="cls-9" d="M15.62,47.3c-5.7-17.42-2.38-33.66,0-39.6H7.07v39.6s9.03.49,8.55,0Z"/>
|
|
67
|
+
<path class="cls-3" d="M38.92,6.93c5.69,17.76,2.37,34.31,0,40.36h8.53V6.93s-9.01-.5-8.53,0Z"/>
|
|
68
|
+
</g>
|
|
69
|
+
</g>
|
|
70
|
+
<path class="cls-2" d="M14.2,8.74h26.6c2.56,0,5.25,2.06,5.8,4.64,1.89,9.31,1.89,18.91,0,28.23-.55,2.58-3.25,4.64-5.8,4.64H14.2c-2.56,0-5.25-2.06-5.8-4.64-1.89-9.31-1.89-18.91,0-28.23.55-2.58,3.25-4.64,5.8-4.64Z"/>
|
|
71
|
+
</svg>
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Welcome to Television</title>
|
|
7
|
+
<link rel="stylesheet" href="/canonical/v1/styles.css">
|
|
8
|
+
<script type="module" src="/canonical/v1/components.js"></script>
|
|
9
|
+
<style>
|
|
10
|
+
html {
|
|
11
|
+
min-height: 100%;
|
|
12
|
+
background: linear-gradient(135deg, #ffffff 0%, #f2f2f2 100%);
|
|
13
|
+
background-attachment: fixed;
|
|
14
|
+
overscroll-behavior: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
body {
|
|
18
|
+
margin: 0;
|
|
19
|
+
padding: 48px;
|
|
20
|
+
min-height: 100%;
|
|
21
|
+
box-sizing: border-box;
|
|
22
|
+
background: transparent;
|
|
23
|
+
font-size: 15px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
ui-icon {
|
|
27
|
+
position: relative;
|
|
28
|
+
top: 1px;
|
|
29
|
+
color: var(--color-text-muted);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.logo {
|
|
33
|
+
width: 22px;
|
|
34
|
+
height: 22px;
|
|
35
|
+
margin-left: 2px;
|
|
36
|
+
margin-right: -2px;
|
|
37
|
+
vertical-align: -3px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
h1 {
|
|
41
|
+
margin-bottom: 10px;
|
|
42
|
+
font-size: 24px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.lede {
|
|
46
|
+
margin-bottom: 18px;
|
|
47
|
+
color: var(--color-text-muted);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.keycap {
|
|
51
|
+
display: inline-block;
|
|
52
|
+
margin: 0 2px;
|
|
53
|
+
padding: 0 3px;
|
|
54
|
+
border: 1px solid var(--color-border);
|
|
55
|
+
border-radius: 6px;
|
|
56
|
+
background: var(--color-bg-muted);
|
|
57
|
+
font-size: 14px;
|
|
58
|
+
font-weight: 600;
|
|
59
|
+
line-height: 1.3;
|
|
60
|
+
white-space: nowrap;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.prompts {
|
|
64
|
+
position: relative;
|
|
65
|
+
max-width: 460px;
|
|
66
|
+
height: 220px;
|
|
67
|
+
margin: 24px auto;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.prompt {
|
|
71
|
+
position: absolute;
|
|
72
|
+
display: grid;
|
|
73
|
+
grid-template-columns: 22px minmax(0, 1fr);
|
|
74
|
+
gap: 8px;
|
|
75
|
+
align-items: flex-start;
|
|
76
|
+
width: 238px;
|
|
77
|
+
min-height: 104px;
|
|
78
|
+
margin: 0;
|
|
79
|
+
padding: 14px;
|
|
80
|
+
border: 1px solid var(--color-border);
|
|
81
|
+
border-radius: 14px;
|
|
82
|
+
background: #fff;
|
|
83
|
+
box-shadow: 0 6px 18px rgb(0 0 0 / 0.06);
|
|
84
|
+
color: color-mix(in srgb, var(--color-text) 82%, var(--color-text-muted));
|
|
85
|
+
font-size: 13.5px;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.prompt svg {
|
|
89
|
+
width: 22px;
|
|
90
|
+
height: 22px;
|
|
91
|
+
color: var(--color-primary);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.prompt svg.weather-icon {
|
|
95
|
+
color: #ffcc28;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.prompt svg.todo-icon {
|
|
99
|
+
color: #41d1b3;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.prompt svg.food-icon {
|
|
103
|
+
color: #d14144;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.prompt:nth-child(1) {
|
|
107
|
+
left: -48px;
|
|
108
|
+
top: 0;
|
|
109
|
+
width: 298px;
|
|
110
|
+
transform: rotate(-4deg);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.prompt:nth-child(2) {
|
|
114
|
+
right: -52px;
|
|
115
|
+
top: 40px;
|
|
116
|
+
min-height: 78px;
|
|
117
|
+
transform: rotate(5deg);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.prompt:nth-child(3) {
|
|
121
|
+
left: 74px;
|
|
122
|
+
top: 106px;
|
|
123
|
+
width: 310px;
|
|
124
|
+
transform: rotate(2deg);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@media (max-width: 560px) {
|
|
128
|
+
.prompts {
|
|
129
|
+
display: flex;
|
|
130
|
+
flex-direction: column;
|
|
131
|
+
align-items: center;
|
|
132
|
+
height: auto;
|
|
133
|
+
gap: 8px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.prompt {
|
|
137
|
+
position: static;
|
|
138
|
+
width: min(350px, 100%);
|
|
139
|
+
min-height: 0;
|
|
140
|
+
transform: none !important;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.callout {
|
|
145
|
+
margin-top: 28px;
|
|
146
|
+
padding: 12px 14px;
|
|
147
|
+
border: 1px solid var(--color-border);
|
|
148
|
+
border-radius: 10px;
|
|
149
|
+
background: color-mix(in srgb, oklch(0.86 0.01 255.67) 22%, var(--color-bg-muted));
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.callout h2 {
|
|
153
|
+
display: flex;
|
|
154
|
+
gap: 6px;
|
|
155
|
+
align-items: center;
|
|
156
|
+
margin-top: 0;
|
|
157
|
+
color: color-mix(in srgb, var(--blue-700) 24%, var(--color-text-muted));
|
|
158
|
+
font-size: 12px;
|
|
159
|
+
font-weight: 800;
|
|
160
|
+
letter-spacing: 0.06em;
|
|
161
|
+
text-transform: uppercase;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.callout-icon {
|
|
165
|
+
width: 16px;
|
|
166
|
+
height: 16px;
|
|
167
|
+
flex: none;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.callout p {
|
|
171
|
+
color: color-mix(in srgb, var(--blue-900) 28%, var(--color-text-muted));
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.callout p:last-child {
|
|
175
|
+
margin-bottom: 0;
|
|
176
|
+
}
|
|
177
|
+
</style>
|
|
178
|
+
</head>
|
|
179
|
+
<body>
|
|
180
|
+
<h1>You’re on <img class="logo" src="./assets/television.svg" alt=""> Television!</h1>
|
|
181
|
+
|
|
182
|
+
<p class="lede">Television is the missing GUI for your personal agent, created by the team at Telepath. We’re glad you’re here.</p>
|
|
183
|
+
|
|
184
|
+
<p>This card is an <ui-icon name="subtract-square" weight="duotone"></ui-icon> <strong>Artifact</strong>: a live surface your agent can create, edit, and update. Artifacts can be notes, editable documents, dashboards, web pages, reports, or custom web apps.</p>
|
|
185
|
+
|
|
186
|
+
<p>Artifacts live on <ui-icon name="squares-four" weight="duotone"></ui-icon> <strong>Screens</strong>. We put you on <strong>TV Guide</strong> to start. Double-click its name to rename it, use <ui-icon name="plus" weight="bold"></ui-icon> to add more screens, and drag artifacts to arrange them. Your open screens appear as tabs up the top. If you close one, you can find it again by clicking <ui-icon name="squares-four" weight="bold"></ui-icon>.</p>
|
|
187
|
+
|
|
188
|
+
<p>To create or change an artifact, just describe what you want to see. Try asking your agent…</p>
|
|
189
|
+
|
|
190
|
+
<div class="prompts">
|
|
191
|
+
<p class="prompt"><svg class="weather-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M139.84,84.41v0a68.22,68.22,0,0,0-41.65,46v-.11a44.08,44.08,0,0,0-38.54,5h0a48,48,0,1,1,80.19-50.94Z" opacity="0.2"/><path d="M164,72a76.2,76.2,0,0,0-20.26,2.73,55.63,55.63,0,0,0-9.41-11.54l9.51-13.57a8,8,0,1,0-13.11-9.18L121.22,54A55.9,55.9,0,0,0,96,48c-.58,0-1.16,0-1.74,0L91.37,31.71a8,8,0,1,0-15.75,2.77L78.5,50.82A56.1,56.1,0,0,0,55.23,65.67L41.61,56.14a8,8,0,1,0-9.17,13.11L46,78.77A55.55,55.55,0,0,0,40,104c0,.57,0,1.15,0,1.72L23.71,108.6a8,8,0,0,0,1.38,15.88,8.24,8.24,0,0,0,1.39-.12l16.32-2.88a55.74,55.74,0,0,0,5.86,12.42A52,52,0,0,0,84,224h80a76,76,0,0,0,0-152ZM56,104a40,40,0,0,1,72.54-23.24,76.26,76.26,0,0,0-35.62,40,52.14,52.14,0,0,0-31,4.17A40,40,0,0,1,56,104ZM164,208H84a36,36,0,1,1,4.78-71.69c-.37,2.37-.63,4.79-.77,7.23a8,8,0,0,0,16,.92,58.91,58.91,0,0,1,1.88-11.81c0-.16.09-.32.12-.48A60.06,60.06,0,1,1,164,208Z"/></svg><span>What’s the 3-day weather forecast for New York City? Include a nice icon for each day’s weather. Update it twice a day.</span></p>
|
|
192
|
+
<p class="prompt"><svg class="todo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z" opacity="0.2"/><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208H208Z"/></svg><span>Open my to-do list from my Obsidian vault.</span></p>
|
|
193
|
+
<p class="prompt"><svg class="food-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,40V168H152S152,64,208,40Z" opacity="0.2"/><path d="M72,88V40a8,8,0,0,1,16,0V88a8,8,0,0,1-16,0ZM216,40V224a8,8,0,0,1-16,0V176H152a8,8,0,0,1-8-8,268.75,268.75,0,0,1,7.22-56.88c9.78-40.49,28.32-67.63,53.63-78.47A8,8,0,0,1,216,40ZM200,53.9c-32.17,24.57-38.47,84.42-39.7,106.1H200ZM119.89,38.69a8,8,0,1,0-15.78,2.63L112,88.63a32,32,0,0,1-64,0l7.88-47.31a8,8,0,1,0-15.78-2.63l-8,48A8.17,8.17,0,0,0,32,88a48.07,48.07,0,0,0,40,47.32V224a8,8,0,0,0,16,0V135.32A48.07,48.07,0,0,0,128,88a8.17,8.17,0,0,0-.11-1.31Z"/></svg><span>Research the best Thai restaurants in San Francisco and give me a report on the top three. Include photos.</span></p>
|
|
194
|
+
</div>
|
|
195
|
+
|
|
196
|
+
<p>Your agent will usually know when to answer by creating an artifact. If it replies in chat instead, just say: “put that on my TV.”</p>
|
|
197
|
+
|
|
198
|
+
<section class="callout">
|
|
199
|
+
<h2><svg class="callout-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><g transform="translate(256 0) scale(-1 1)"><path d="M240,120a40,40,0,0,1-40,40H160V80h40A40,40,0,0,1,240,120Z" opacity="0.2"/><path d="M248,120a48.05,48.05,0,0,0-48-48H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48.07,48.07,0,0,0,248,120ZM48,199.93V40h0c42.81,35.91,86.63,45,104,47.24v65.48C134.65,155,90.84,164.07,48,199.93Zm131,8,0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z"/></g></svg>Spread the word</h2>
|
|
200
|
+
<p>Television isn’t public yet, but it’s not a secret. If you make something cool, we’d love you to share it!</p>
|
|
201
|
+
</section>
|
|
202
|
+
</body>
|
|
203
|
+
</html>
|