@telepath-computer/television 0.1.177 → 0.1.179
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 +25 -7
- package/dist/canonical/v1/styles.css +17 -1
- package/dist/cli.cjs +1187 -392
- package/dist/onboarding/README.md +35 -0
- package/dist/onboarding/business-ops/about.html +150 -0
- package/dist/onboarding/business-ops/retention-vs-releases.html +572 -0
- package/dist/onboarding/business-ops/revenue-vs-goals.html +621 -0
- package/dist/onboarding/onboarding-screens.json +167 -0
- package/dist/onboarding/productivity/about.html +149 -0
- package/dist/onboarding/productivity/company-todos/index.html +121 -0
- package/dist/onboarding/productivity/company-todos/task.css +205 -0
- package/dist/onboarding/productivity/company-todos/task.js +307 -0
- package/dist/onboarding/productivity/meeting-prep.html +440 -0
- package/dist/onboarding/productivity/priorities-today.html +409 -0
- package/dist/onboarding/productivity/todays-calendar/calendar.css +1 -0
- package/dist/onboarding/productivity/todays-calendar/calendar.js +716 -0
- package/dist/onboarding/productivity/todays-calendar/index.html +52 -0
- package/dist/onboarding/research/about.html +152 -0
- package/dist/onboarding/research/draft-blog-post.md +30 -0
- package/dist/onboarding/research/open-model-research.html +542 -0
- package/dist/onboarding/research/todays-news.html +503 -0
- package/dist/onboarding/{television-onboarding → tv-guide/welcome}/index.html +5 -5
- package/dist/skills/television/SKILL.md +44 -0
- package/dist/skills/tv-tasks/SKILL.md +241 -0
- package/dist/skills/tv-tasks/task.css +205 -0
- package/dist/skills/tv-tasks/task.js +307 -0
- package/dist/views/markdown/index.html +1 -1
- package/dist/web/assets/calendar-DToAnkzj.png +0 -0
- package/dist/web/assets/main-5017mprd.css +1 -0
- package/dist/web/assets/main-C-OjKUzX.js +865 -0
- package/dist/web/assets/markdown-DdDrJuVK.png +0 -0
- package/dist/web/assets/table-oeG9uAN1.png +0 -0
- package/dist/web/assets/tasks-D4xqXFPl.png +0 -0
- package/dist/web/index.html +2 -2
- package/package.json +1 -1
- package/dist/web/assets/main-BSAIRhnY.js +0 -768
- package/dist/web/assets/main-o9Z-XUYA.css +0 -1
- /package/dist/onboarding/{television-onboarding → tv-guide/welcome}/assets/television.svg +0 -0
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 1,
|
|
3
|
+
"focusScreen": "tv-guide",
|
|
4
|
+
"screens": [
|
|
5
|
+
{
|
|
6
|
+
"slug": "tv-guide",
|
|
7
|
+
"name": "TV Guide",
|
|
8
|
+
"artifacts": [
|
|
9
|
+
{
|
|
10
|
+
"slug": "welcome",
|
|
11
|
+
"title": "Welcome to Television"
|
|
12
|
+
}
|
|
13
|
+
],
|
|
14
|
+
"layout": [
|
|
15
|
+
{
|
|
16
|
+
"type": "card",
|
|
17
|
+
"slug": "welcome",
|
|
18
|
+
"width": 5
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"slug": "business-ops",
|
|
24
|
+
"name": "Business ops",
|
|
25
|
+
"artifacts": [
|
|
26
|
+
{
|
|
27
|
+
"slug": "about",
|
|
28
|
+
"title": "About this screen"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"slug": "revenue-vs-goals",
|
|
32
|
+
"title": "Revenue vs. goals"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"slug": "retention-vs-releases",
|
|
36
|
+
"title": "Retention vs. recent releases"
|
|
37
|
+
}
|
|
38
|
+
],
|
|
39
|
+
"layout": [
|
|
40
|
+
{
|
|
41
|
+
"type": "card",
|
|
42
|
+
"slug": "about",
|
|
43
|
+
"width": 2,
|
|
44
|
+
"height": 6
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"type": "card",
|
|
48
|
+
"slug": "revenue-vs-goals",
|
|
49
|
+
"width": 5,
|
|
50
|
+
"height": 6
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"type": "card",
|
|
54
|
+
"slug": "retention-vs-releases",
|
|
55
|
+
"width": 5,
|
|
56
|
+
"height": 6
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"slug": "productivity",
|
|
62
|
+
"name": "Productivity",
|
|
63
|
+
"artifacts": [
|
|
64
|
+
{
|
|
65
|
+
"slug": "about",
|
|
66
|
+
"title": "About this screen"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"slug": "priorities-today",
|
|
70
|
+
"title": "Priorities for Today"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"slug": "company-todos",
|
|
74
|
+
"title": "Company To-dos"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"slug": "todays-calendar",
|
|
78
|
+
"title": "Today's Calendar"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"slug": "meeting-prep",
|
|
82
|
+
"title": "Meeting prep"
|
|
83
|
+
}
|
|
84
|
+
],
|
|
85
|
+
"layout": [
|
|
86
|
+
{
|
|
87
|
+
"type": "card",
|
|
88
|
+
"slug": "about",
|
|
89
|
+
"width": 2,
|
|
90
|
+
"height": 6
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"type": "card",
|
|
94
|
+
"slug": "priorities-today",
|
|
95
|
+
"width": 4,
|
|
96
|
+
"height": 6
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"type": "card",
|
|
100
|
+
"slug": "company-todos",
|
|
101
|
+
"width": 4,
|
|
102
|
+
"height": 6
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"type": "card",
|
|
106
|
+
"slug": "todays-calendar",
|
|
107
|
+
"width": 2,
|
|
108
|
+
"height": 6
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"type": "card",
|
|
112
|
+
"slug": "meeting-prep",
|
|
113
|
+
"width": 4,
|
|
114
|
+
"height": 6
|
|
115
|
+
}
|
|
116
|
+
]
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"slug": "research",
|
|
120
|
+
"name": "Research",
|
|
121
|
+
"artifacts": [
|
|
122
|
+
{
|
|
123
|
+
"slug": "about",
|
|
124
|
+
"title": "About this screen"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"slug": "todays-news",
|
|
128
|
+
"title": "Today's AI News"
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"slug": "open-model-research",
|
|
132
|
+
"title": "Open model research"
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"slug": "draft-blog-post",
|
|
136
|
+
"title": "Draft blog post"
|
|
137
|
+
}
|
|
138
|
+
],
|
|
139
|
+
"layout": [
|
|
140
|
+
{
|
|
141
|
+
"type": "card",
|
|
142
|
+
"slug": "about",
|
|
143
|
+
"width": 2,
|
|
144
|
+
"height": 6
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"type": "card",
|
|
148
|
+
"slug": "todays-news",
|
|
149
|
+
"width": 3,
|
|
150
|
+
"height": 6
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"type": "card",
|
|
154
|
+
"slug": "open-model-research",
|
|
155
|
+
"width": 5,
|
|
156
|
+
"height": 6
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"type": "card",
|
|
160
|
+
"slug": "draft-blog-post",
|
|
161
|
+
"width": 4,
|
|
162
|
+
"height": 6
|
|
163
|
+
}
|
|
164
|
+
]
|
|
165
|
+
}
|
|
166
|
+
]
|
|
167
|
+
}
|
|
@@ -0,0 +1,149 @@
|
|
|
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>About this screen</title>
|
|
7
|
+
<link rel="stylesheet" href="/canonical/v1/styles.css">
|
|
8
|
+
<script type="module" src="/canonical/v1/components.js"></script>
|
|
9
|
+
<style>
|
|
10
|
+
/* Shared base for onboarding artifacts ([[../index.md]]): document padding
|
|
11
|
+
and the centered content shell. Typography, text color, and background
|
|
12
|
+
are the canonical stylesheet's — nothing in this set restates or pins
|
|
13
|
+
them, so artifacts follow the active theme ([[../index.md#^respect-theme]]). */
|
|
14
|
+
|
|
15
|
+
* {
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
body {
|
|
20
|
+
margin: 0;
|
|
21
|
+
padding: var(--space-32, 32px) var(--space-32, 32px) var(--space-64, 64px);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.shell {
|
|
25
|
+
max-width: 720px;
|
|
26
|
+
margin: 0 auto;
|
|
27
|
+
display: grid;
|
|
28
|
+
/* Pin the single column to the container so a wide child (a data table)
|
|
29
|
+
scrolls inside its own .table-wrap instead of stretching the track and
|
|
30
|
+
overflowing the card. */
|
|
31
|
+
grid-template-columns: minmax(0, 1fr);
|
|
32
|
+
gap: var(--space-20, 20px);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Card-density headings ([[../index.md]]): document-scale h1 is oversized
|
|
36
|
+
inside a TV card. */
|
|
37
|
+
h1 {
|
|
38
|
+
margin: 0;
|
|
39
|
+
font-size: var(--text-xl, 17px);
|
|
40
|
+
font-weight: 600;
|
|
41
|
+
line-height: 1.25;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* A lead paragraph (the .lede or .summary-deck standfirst) belongs in the
|
|
45
|
+
header, tight beneath the title — not a full grid-gap below it. Every
|
|
46
|
+
onboarding artifact places its lead this way so the spacing is uniform. */
|
|
47
|
+
header > .lede,
|
|
48
|
+
header > .summary-deck {
|
|
49
|
+
margin-top: var(--space-8, 8px);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
/* The About-card idiom ([[../index.md#^about-cards]]): a lede in primary
|
|
54
|
+
text, then a stack of example prompts rendered as callout blockquotes —
|
|
55
|
+
no box, a left accent rule, a blue kicker label, and the quoted ask set
|
|
56
|
+
muted and italic so it reads as a quotation rather than body copy. One
|
|
57
|
+
accent for all three (the rule is decoration, not a categorization). */
|
|
58
|
+
|
|
59
|
+
/* The About cards read as the screen's guide, not an example result: they sit
|
|
60
|
+
on a post-it yellow surface, a deliberate exception to the set's "artifacts
|
|
61
|
+
don't set backgrounds" rule. The surface is a fixed ramp token (yellow in
|
|
62
|
+
any theme, like a sticky note), so the text and accent are pinned to fixed
|
|
63
|
+
dark amber tones rather than the theme's own text colors — those would flip
|
|
64
|
+
light and vanish on the yellow in a dark theme ([[../index.md#^about-cards]]). */
|
|
65
|
+
body {
|
|
66
|
+
background: var(--yellow-100);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.lede {
|
|
70
|
+
margin: 0;
|
|
71
|
+
color: var(--neutral-900);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.prompt-list {
|
|
75
|
+
display: grid;
|
|
76
|
+
gap: var(--space-24, 24px);
|
|
77
|
+
margin: 0;
|
|
78
|
+
padding: 0;
|
|
79
|
+
list-style: none;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* A callout blockquote: the accent rule down the left, text offset from it,
|
|
83
|
+
no surrounding card. The ask is muted italic; the kicker is upright. */
|
|
84
|
+
.prompt {
|
|
85
|
+
position: relative;
|
|
86
|
+
padding-left: var(--space-20, 20px);
|
|
87
|
+
line-height: 1.5;
|
|
88
|
+
color: var(--neutral-700);
|
|
89
|
+
font-style: italic;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.prompt::before {
|
|
93
|
+
content: "";
|
|
94
|
+
position: absolute;
|
|
95
|
+
inset: 0 auto 0 0;
|
|
96
|
+
width: 3px;
|
|
97
|
+
border-radius: var(--radius-full, 9999px);
|
|
98
|
+
background: var(--yellow-700);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.prompt > span {
|
|
102
|
+
display: block;
|
|
103
|
+
margin-bottom: var(--space-6, 6px);
|
|
104
|
+
color: var(--yellow-800);
|
|
105
|
+
font-size: var(--text-sm, 12px);
|
|
106
|
+
font-weight: 600;
|
|
107
|
+
font-style: normal;
|
|
108
|
+
letter-spacing: 0.06em;
|
|
109
|
+
text-transform: uppercase;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
</style>
|
|
113
|
+
</head>
|
|
114
|
+
<body>
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
<main class="shell">
|
|
119
|
+
<header>
|
|
120
|
+
<h1>About this screen</h1>
|
|
121
|
+
|
|
122
|
+
<p class="lede">
|
|
123
|
+
This screen shows examples of TV artifacts focused on personal
|
|
124
|
+
productivity. Instead of using a separate to-do app, calendar, or
|
|
125
|
+
notepad, you can have your agent synthesize all of that information into
|
|
126
|
+
a single view that helps you better manage your day.
|
|
127
|
+
</p>
|
|
128
|
+
</header>
|
|
129
|
+
|
|
130
|
+
<ul class="prompt-list">
|
|
131
|
+
<li class="prompt">
|
|
132
|
+
<span>Try asking your agent</span>
|
|
133
|
+
Every morning, read my meeting notes for the past few days, look at
|
|
134
|
+
today's calendar, and give me an artifact on my TV that helps me
|
|
135
|
+
prioritize my day.
|
|
136
|
+
</li>
|
|
137
|
+
<li class="prompt">
|
|
138
|
+
<span>Try asking your agent</span>
|
|
139
|
+
Put today's calendar and my to-do list on my TV.
|
|
140
|
+
</li>
|
|
141
|
+
<li class="prompt">
|
|
142
|
+
<span>Try asking your agent</span>
|
|
143
|
+
Help me prepare for my meeting today with Priya.
|
|
144
|
+
</li>
|
|
145
|
+
</ul>
|
|
146
|
+
</main>
|
|
147
|
+
|
|
148
|
+
</body>
|
|
149
|
+
</html>
|
|
@@ -0,0 +1,121 @@
|
|
|
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>Company To-dos</title>
|
|
7
|
+
<link rel="stylesheet" href="/canonical/v1/styles.css">
|
|
8
|
+
<script type="module" src="/canonical/v1/components.js"></script>
|
|
9
|
+
<link rel="stylesheet" href="./task.css">
|
|
10
|
+
<script type="module" src="./task.js"></script>
|
|
11
|
+
<style>
|
|
12
|
+
|
|
13
|
+
</style>
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<header>
|
|
19
|
+
<h1>Company To-dos</h1>
|
|
20
|
+
<p>Wednesday, July 8</p>
|
|
21
|
+
</header>
|
|
22
|
+
|
|
23
|
+
<tv-task-list>
|
|
24
|
+
|
|
25
|
+
<tv-task-section>
|
|
26
|
+
<header><h2>Overdue</h2></header>
|
|
27
|
+
|
|
28
|
+
<tv-task>
|
|
29
|
+
<tv-task-checkbox></tv-task-checkbox>
|
|
30
|
+
<tv-task-body>
|
|
31
|
+
<tv-task-title>Define pilot success metric for Acme</tv-task-title>
|
|
32
|
+
<tv-task-note>"Accepted autonomous actions per analyst hour" plus rollback rate.</tv-task-note>
|
|
33
|
+
<tv-task-meta>
|
|
34
|
+
<tv-task-meta-due date="2026-07-04"></tv-task-meta-due>
|
|
35
|
+
<tv-task-meta-item><tv-icon name="hash"></tv-icon>Acme Pilot</tv-task-meta-item>
|
|
36
|
+
<tv-task-meta-tag>urgent</tv-task-meta-tag>
|
|
37
|
+
</tv-task-meta>
|
|
38
|
+
</tv-task-body>
|
|
39
|
+
</tv-task>
|
|
40
|
+
|
|
41
|
+
</tv-task-section>
|
|
42
|
+
|
|
43
|
+
<tv-task-section>
|
|
44
|
+
<header><h2>Today</h2></header>
|
|
45
|
+
|
|
46
|
+
<tv-task>
|
|
47
|
+
<tv-task-checkbox></tv-task-checkbox>
|
|
48
|
+
<tv-task-body>
|
|
49
|
+
<tv-task-title>Synthesize NeonBank and Mallory Health calls into a customer story</tv-task-title>
|
|
50
|
+
<tv-task-note>Painful workflow, before/after demo, measurable outcome — for the seed deck.</tv-task-note>
|
|
51
|
+
<tv-task-meta>
|
|
52
|
+
<tv-task-meta-due date="2026-07-08"></tv-task-meta-due>
|
|
53
|
+
<tv-task-meta-item><tv-icon name="hash"></tv-icon>Seed Deck</tv-task-meta-item>
|
|
54
|
+
|
|
55
|
+
</tv-task-meta>
|
|
56
|
+
</tv-task-body>
|
|
57
|
+
</tv-task>
|
|
58
|
+
|
|
59
|
+
<tv-task>
|
|
60
|
+
<tv-task-checkbox></tv-task-checkbox>
|
|
61
|
+
<tv-task-body>
|
|
62
|
+
<tv-task-title>Send rough metrics to Jake for investor update</tv-task-title>
|
|
63
|
+
<tv-task-note>Pipeline and burn numbers — defer visual polish.</tv-task-note>
|
|
64
|
+
<tv-task-meta>
|
|
65
|
+
<tv-task-meta-due date="2026-07-08"></tv-task-meta-due>
|
|
66
|
+
<tv-task-meta-item><tv-icon name="hash"></tv-icon>Investor Update</tv-task-meta-item>
|
|
67
|
+
|
|
68
|
+
</tv-task-meta>
|
|
69
|
+
</tv-task-body>
|
|
70
|
+
</tv-task>
|
|
71
|
+
|
|
72
|
+
<tv-task>
|
|
73
|
+
<tv-task-checkbox></tv-task-checkbox>
|
|
74
|
+
<tv-task-body>
|
|
75
|
+
<tv-task-title>Prep for 1:1 with Priya</tv-task-title>
|
|
76
|
+
<tv-task-note>Review two solutions for unblocking the dev team.</tv-task-note>
|
|
77
|
+
<tv-task-meta>
|
|
78
|
+
<tv-task-meta-due date="2026-07-08"></tv-task-meta-due>
|
|
79
|
+
<tv-task-meta-item><tv-icon name="hash"></tv-icon>Platform Reliability</tv-task-meta-item>
|
|
80
|
+
|
|
81
|
+
</tv-task-meta>
|
|
82
|
+
</tv-task-body>
|
|
83
|
+
</tv-task>
|
|
84
|
+
|
|
85
|
+
</tv-task-section>
|
|
86
|
+
|
|
87
|
+
<tv-task-section>
|
|
88
|
+
<header><h2>Upcoming</h2></header>
|
|
89
|
+
|
|
90
|
+
<tv-task>
|
|
91
|
+
<tv-task-checkbox></tv-task-checkbox>
|
|
92
|
+
<tv-task-body>
|
|
93
|
+
<tv-task-title>Follow up with NeonBank on procurement map</tv-task-title>
|
|
94
|
+
<tv-task-note>Confirm whether their security team needs the audit trail before next week.</tv-task-note>
|
|
95
|
+
<tv-task-meta>
|
|
96
|
+
<tv-task-meta-due date="2026-07-10"></tv-task-meta-due>
|
|
97
|
+
<tv-task-meta-item><tv-icon name="hash"></tv-icon>Acme Pilot</tv-task-meta-item>
|
|
98
|
+
|
|
99
|
+
</tv-task-meta>
|
|
100
|
+
</tv-task-body>
|
|
101
|
+
</tv-task>
|
|
102
|
+
|
|
103
|
+
<tv-task>
|
|
104
|
+
<tv-task-checkbox></tv-task-checkbox>
|
|
105
|
+
<tv-task-body>
|
|
106
|
+
<tv-task-title>Redesign investor deck</tv-task-title>
|
|
107
|
+
<tv-task-note>Visual polish — wait until the customer story and metrics spine are locked.</tv-task-note>
|
|
108
|
+
<tv-task-meta>
|
|
109
|
+
<tv-task-meta-due date="2026-07-14"></tv-task-meta-due>
|
|
110
|
+
<tv-task-meta-item><tv-icon name="hash"></tv-icon>Seed Deck</tv-task-meta-item>
|
|
111
|
+
|
|
112
|
+
</tv-task-meta>
|
|
113
|
+
</tv-task-body>
|
|
114
|
+
</tv-task>
|
|
115
|
+
|
|
116
|
+
</tv-task-section>
|
|
117
|
+
|
|
118
|
+
</tv-task-list>
|
|
119
|
+
|
|
120
|
+
</body>
|
|
121
|
+
</html>
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Task styles for the tv-tasks artifact skill.
|
|
3
|
+
* Targets the `tv-task-*` element/attribute vocabulary (no classes); uses
|
|
4
|
+
* canonical design tokens (--color-*, --space-*, --radius-*, --text-*).
|
|
5
|
+
*
|
|
6
|
+
* Behavioral parts live in their own web components' shadow DOM:
|
|
7
|
+
* <tv-task-checkbox> — the circular pop checkbox + focus ring
|
|
8
|
+
* <tv-task-meta-due> — the due-date glyph + label; task.css only colors it.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
/* The amber for a task due today. Not a canonical token, so it gets one
|
|
13
|
+
named source here rather than being sprinkled as a literal. */
|
|
14
|
+
--task-due-today: #EA880B;
|
|
15
|
+
/* Highlight hue — the highlighted row's wash derives from this one knob.
|
|
16
|
+
Set it on any ancestor (or the row itself) to retint. */
|
|
17
|
+
--task-highlight: var(--task-due-today);
|
|
18
|
+
/* Skill-local muted: a shade darker than the canonical --color-text-muted
|
|
19
|
+
(neutral-500, L 0.553) so notes hold their own against the darker meta
|
|
20
|
+
treatment below. Declared at :root, so it recolors ALL muted text on the
|
|
21
|
+
page (canonical components included) — deliberate for a single-skill
|
|
22
|
+
artifact; revisit if skills ever share a page. */
|
|
23
|
+
--color-text-muted: oklch(0.52 0 0);
|
|
24
|
+
/* The meta line recedes a step behind the note: 85% of muted. */
|
|
25
|
+
--task-meta-text: color-mix(in srgb, var(--color-text-muted) 85%, transparent);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* One task row — a checkbox column + the body column. */
|
|
29
|
+
tv-task {
|
|
30
|
+
display: grid;
|
|
31
|
+
grid-template-columns: 18px 1fr;
|
|
32
|
+
column-gap: var(--space-12, 12px);
|
|
33
|
+
padding: var(--space-8, 8px) var(--space-4, 4px);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* The content column of a row (title / note / meta). */
|
|
37
|
+
tv-task-body {
|
|
38
|
+
display: block;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
tv-task-title {
|
|
42
|
+
display: block;
|
|
43
|
+
font-weight: var(--font-weight-body);
|
|
44
|
+
line-height: 1.35;
|
|
45
|
+
}
|
|
46
|
+
/* Completed — tracks the checkbox's reflected host attribute live, not a
|
|
47
|
+
static class. (The real <input> lives in the component's shadow DOM, where
|
|
48
|
+
:has() can't reach it.) */
|
|
49
|
+
tv-task:has(tv-task-checkbox[checked]) tv-task-title {
|
|
50
|
+
color: var(--color-text-muted);
|
|
51
|
+
text-decoration: line-through;
|
|
52
|
+
}
|
|
53
|
+
/* A completed task's due date no longer matters — always mute it, overriding
|
|
54
|
+
the today/overdue emphasis. */
|
|
55
|
+
tv-task:has(tv-task-checkbox[checked]) tv-task-meta-due {
|
|
56
|
+
color: var(--task-meta-text);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
tv-task-note {
|
|
60
|
+
display: block;
|
|
61
|
+
color: var(--color-text-muted);
|
|
62
|
+
font-size: calc(var(--text-sm) + 1px);
|
|
63
|
+
line-height: 1.4;
|
|
64
|
+
margin-top: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Shared metadata line under the title/note — holds the due date, project,
|
|
68
|
+
and label pills. */
|
|
69
|
+
tv-task-meta {
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-wrap: wrap;
|
|
72
|
+
align-items: center;
|
|
73
|
+
gap: var(--space-8, 8px);
|
|
74
|
+
margin-top: var(--space-2, 2px);
|
|
75
|
+
font-size: var(--text-sm);
|
|
76
|
+
color: var(--task-meta-text);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Generic icon + text meta item (project, area, …). The <tv-task-meta-due>
|
|
80
|
+
component supplies its own inline-flex/gap/icon, so it isn't styled here
|
|
81
|
+
beyond color. */
|
|
82
|
+
tv-task-meta-item {
|
|
83
|
+
display: inline-flex;
|
|
84
|
+
align-items: center;
|
|
85
|
+
gap: var(--space-2, 2px);
|
|
86
|
+
white-space: nowrap;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Due-date urgency — the <tv-task-meta-due> component reflects its computed
|
|
90
|
+
state; task.css only colors it. Default / upcoming stay muted (inherited
|
|
91
|
+
from tv-task-meta). */
|
|
92
|
+
tv-task-meta-due[state="today"] { color: var(--task-due-today); }
|
|
93
|
+
tv-task-meta-due[state="overdue"] { color: var(--color-danger); }
|
|
94
|
+
|
|
95
|
+
/* Label pill — labels, tags, and contexts are the same thing. */
|
|
96
|
+
tv-task-meta-tag {
|
|
97
|
+
display: inline-flex;
|
|
98
|
+
align-items: center;
|
|
99
|
+
height: 18px;
|
|
100
|
+
padding: 0 5px;
|
|
101
|
+
padding-bottom: 1px;
|
|
102
|
+
border-radius: 6px;
|
|
103
|
+
background: var(--color-bg-muted);
|
|
104
|
+
color: var(--task-meta-text);
|
|
105
|
+
font-size: var(--text-sm);
|
|
106
|
+
line-height: 1.5;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Disabled — the row reads muted rather than dimmed. */
|
|
110
|
+
tv-task:has(tv-task-checkbox[disabled]) tv-task-title {
|
|
111
|
+
color: var(--color-text-muted);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* ---- List container ----
|
|
115
|
+
No frame of its own: the artifact page is the surface, and Television's
|
|
116
|
+
artifact-view supplies the card chrome around the document. (The frameset
|
|
117
|
+
design frame adds its own preview-only border.) */
|
|
118
|
+
|
|
119
|
+
tv-task-list {
|
|
120
|
+
display: block;
|
|
121
|
+
padding: 0 var(--space-16, 16px) var(--space-16, 16px);
|
|
122
|
+
}
|
|
123
|
+
/* Nothing above the list (no page heading): give it its own top breathing
|
|
124
|
+
room. When a header precedes it, the gap is the subtitle's house margin —
|
|
125
|
+
or the h1 rule below when there is no subtitle. */
|
|
126
|
+
tv-task-list:first-child {
|
|
127
|
+
padding-top: var(--space-16, 16px);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* The artifact's own heading lives on the page, above the list, as the house
|
|
131
|
+
page-header idiom (header > h1 + p) — house typography styles it; the
|
|
132
|
+
skill only aligns it with the list's interior padding. */
|
|
133
|
+
header:has(+ tv-task-list) {
|
|
134
|
+
padding: var(--space-16, 16px) var(--space-16, 16px) 0;
|
|
135
|
+
}
|
|
136
|
+
/* A header whose last child is the h1 (no subtitle) has no house margin
|
|
137
|
+
below it — supply the gap the subtitle's margin would have given. */
|
|
138
|
+
header:has(+ tv-task-list) > h1:last-child {
|
|
139
|
+
margin-bottom: var(--space-12, 12px);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Section headers lay their title out inline. */
|
|
143
|
+
tv-task-section > header {
|
|
144
|
+
display: flex;
|
|
145
|
+
align-items: baseline;
|
|
146
|
+
gap: var(--space-6, 6px);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* ---- Section ----
|
|
150
|
+
A titled group of tasks. Generic — the title can be a when-bucket (Today /
|
|
151
|
+
Upcoming / Someday), a project, or an area. Rows separate by whitespace;
|
|
152
|
+
sections by more whitespace + their header. */
|
|
153
|
+
tv-task-section {
|
|
154
|
+
display: block;
|
|
155
|
+
margin-top: var(--space-20, 20px);
|
|
156
|
+
}
|
|
157
|
+
tv-task-section:first-of-type { margin-top: 0; }
|
|
158
|
+
|
|
159
|
+
tv-task-section > header { padding-bottom: var(--space-6, 6px); }
|
|
160
|
+
tv-task-section > header h2 {
|
|
161
|
+
margin: 0;
|
|
162
|
+
font-size: var(--text-base);
|
|
163
|
+
font-weight: 600;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
/* Task count beside a section heading — the author writes the number, the
|
|
167
|
+
skill only styles it. Inline right of the heading (the header's baseline
|
|
168
|
+
flex places it), never floated to the far edge. */
|
|
169
|
+
tv-task-count {
|
|
170
|
+
color: var(--task-meta-text);
|
|
171
|
+
font-size: var(--text-sm);
|
|
172
|
+
font-weight: var(--font-weight-body);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* Empty state — shown when a section or list has no tasks. */
|
|
176
|
+
tv-task-placeholder {
|
|
177
|
+
display: block;
|
|
178
|
+
color: var(--color-text-muted);
|
|
179
|
+
text-align: center;
|
|
180
|
+
padding: var(--space-32, 32px) var(--space-16, 16px);
|
|
181
|
+
font-size: calc(var(--text-sm) + 1px);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
/* Highlighted row — sanctioned emphasis: a soft wash derived from
|
|
186
|
+
--task-highlight. No edge lines — rows are borderless throughout. */
|
|
187
|
+
tv-task[highlighted] {
|
|
188
|
+
background: color-mix(in srgb, var(--task-highlight) 10%, transparent);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* ---- Dark mode ----
|
|
192
|
+
The canonical theme is light-only, so the skill carries its own dark token
|
|
193
|
+
set, applied when the document has data-theme="dark". */
|
|
194
|
+
[data-theme="dark"] {
|
|
195
|
+
--color-bg: var(--neutral-950);
|
|
196
|
+
--color-bg-muted: var(--neutral-900);
|
|
197
|
+
--color-surface: var(--neutral-800);
|
|
198
|
+
--color-text: var(--neutral-50);
|
|
199
|
+
--color-text-muted: var(--neutral-400);
|
|
200
|
+
/* Re-derive: custom properties resolve where declared, so without this the
|
|
201
|
+
meta tone would keep the light-mode muted it was mixed from. */
|
|
202
|
+
--task-meta-text: color-mix(in srgb, var(--color-text-muted) 85%, transparent);
|
|
203
|
+
--color-border: rgba(255, 255, 255, 0.14);
|
|
204
|
+
color-scheme: dark;
|
|
205
|
+
}
|