@telepath-computer/television 0.1.206 → 0.1.208
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 +1 -258
- package/dist/canonical/v1/styles.css +372 -312
- package/dist/cli.cjs +3749 -3629
- package/dist/onboarding/README.md +17 -12
- package/dist/onboarding/business-ops/about.html +4 -8
- package/dist/onboarding/business-ops/retention-vs-releases.html +0 -9
- package/dist/onboarding/business-ops/revenue-vs-goals.html +0 -11
- package/dist/onboarding/onboarding-channels.json +114 -0
- package/dist/onboarding/productivity/about.html +4 -8
- package/dist/onboarding/productivity/company-todos/index.html +0 -3
- package/dist/onboarding/productivity/company-todos/task.css +3 -3
- package/dist/onboarding/productivity/company-todos/task.js +1 -4
- package/dist/onboarding/productivity/meeting-prep.html +0 -7
- package/dist/onboarding/productivity/priorities-today.html +0 -7
- package/dist/onboarding/productivity/todays-calendar/calendar.js +327 -643
- package/dist/onboarding/productivity/todays-calendar/index.html +0 -4
- package/dist/onboarding/research/about.html +5 -9
- package/dist/onboarding/research/open-model-research.html +0 -9
- package/dist/onboarding/research/todays-news.html +3 -10
- package/dist/onboarding/tv-guide/welcome/index.html +5 -5
- package/dist/skills/television/SKILL.md +180 -136
- package/dist/skills/tv-calendar/calendar.js +327 -643
- package/dist/skills/tv-tasks/SKILL.md +10 -9
- package/dist/skills/tv-tasks/task.css +5 -6
- package/dist/skills/tv-tasks/task.js +2 -5
- package/dist/skills/tv-theme/SKILL.md +293 -193
- package/dist/views/artifact-missing/index.html +125 -60
- package/dist/views/markdown/index.html +22 -45
- package/dist/web/assets/artifact-bridge-BXDhGuL-.js +1 -0
- package/dist/web/assets/{artifactMissing-DY3nzD0p.js → artifactMissing-9rcTXhkH.js} +1 -1
- package/dist/web/assets/main-Blg8fuaV.css +1 -0
- package/dist/web/assets/main-C15ixkrL.js +593 -0
- package/dist/web/assets/{urlUnsupported-B2K6eB7H.js → urlUnsupported-kgq7Zh2V.js} +1 -1
- package/dist/web/index.html +4 -3
- package/dist/web/views/artifact-missing/index.html +125 -60
- package/dist/web/views/url-unsupported/index.html +127 -74
- package/package.json +2 -2
- package/dist/onboarding/onboarding-screens.json +0 -167
- package/dist/skills/tv-calendar/THIRD-PARTY-NOTICES.txt +0 -36
- package/dist/web/assets/artifact-bridge-BhiFDvPj.js +0 -1
- package/dist/web/assets/main-5017mprd.css +0 -1
- package/dist/web/assets/main-DdeZRdEy.js +0 -865
- /package/dist/canonical/v1/fonts/{Hind-Variable.woff2 → Hind-Variable.933e9900.woff2} +0 -0
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: television
|
|
3
|
-
description: Mental model, when to create artifacts, how Television's bundled skills fit together, and where the admin guide lives. Read for
|
|
3
|
+
description: Mental model, when to create artifacts, how Television's bundled skills fit together, and where the admin guide lives. Read for channel, artifact, and CLI work, and before installing, upgrading, or reconfiguring Television.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
# Television
|
|
8
8
|
|
|
9
|
-
Television is a persistent artifact
|
|
9
|
+
Television is a persistent artifact channel for agents.
|
|
10
10
|
|
|
11
|
-
Load this skill when you need to create, update, inspect, focus, delete, or otherwise manage Television
|
|
11
|
+
Load this skill when you need to create, update, inspect, focus, delete, or otherwise manage Television channels and artifacts.
|
|
12
12
|
|
|
13
13
|
Re-read this skill only if it is not already in your context or you know it changed.
|
|
14
14
|
|
|
@@ -34,20 +34,20 @@ When the artifact is the real answer, keep the final reply short. Tell the user
|
|
|
34
34
|
|
|
35
35
|
### Core entities
|
|
36
36
|
|
|
37
|
-
- A **
|
|
38
|
-
- An **artifact** is a registry record shown on exactly one
|
|
39
|
-
-
|
|
37
|
+
- A **channel** is a named viewer surface with a layout.
|
|
38
|
+
- An **artifact** is a registry record shown on exactly one channel.
|
|
39
|
+
- Channel layout is the source of truth for where an artifact appears.
|
|
40
40
|
|
|
41
41
|
That relationship matters:
|
|
42
42
|
|
|
43
|
-
- creating an artifact places it on a
|
|
44
|
-
-
|
|
45
|
-
- deleting an artifact removes its registry record and its
|
|
46
|
-
- moving the same underlying path or URL to another
|
|
43
|
+
- creating an artifact places it on a channel immediately
|
|
44
|
+
- reordering an artifact's tab page is a browser UI tab-drag gesture; the CLI does not expose layout mutation today
|
|
45
|
+
- deleting an artifact removes its registry record and its tab page from the channel
|
|
46
|
+
- moving the same underlying path or URL to another channel means deleting the old artifact and creating a new artifact with the same path or URL on the target channel
|
|
47
47
|
|
|
48
|
-
### Onboarding
|
|
48
|
+
### Onboarding channels
|
|
49
49
|
|
|
50
|
-
Fresh installations receive a small set of bundled onboarding
|
|
50
|
+
Fresh installations receive a small set of bundled onboarding channels, each installed exactly once per storage directory. After installation they are ordinary channels: rename, edit, or delete them like any other, and Television never re-creates or overwrites what changed. You can tell one apart from a user-created channel by the `onboarding` marker containing its stable channel slug — visible in `tv list-channels` / `tv get-channel` output; user-created channels have no such field. Marked channels appear as ordinary unpinned channels and receive no special browser promotion. The marker changes nothing about how you manage the channel.
|
|
51
51
|
|
|
52
52
|
### Artifact shapes
|
|
53
53
|
|
|
@@ -67,7 +67,7 @@ Questions to keep straight:
|
|
|
67
67
|
|
|
68
68
|
- should this result be markdown, HTML, or a URL pointer?
|
|
69
69
|
- where should the underlying file live?
|
|
70
|
-
- should it appear on the current
|
|
70
|
+
- should it appear on the current channel, another existing channel, or a new channel?
|
|
71
71
|
- should the user see it immediately, or should it be prepared without moving their attention yet?
|
|
72
72
|
|
|
73
73
|
Those questions interact, but they are not the same question.
|
|
@@ -86,7 +86,7 @@ Read the entire document before acting. If your web fetch tool returned a summar
|
|
|
86
86
|
|
|
87
87
|
## Telemetry awareness and control
|
|
88
88
|
|
|
89
|
-
Television collects anonymous, content-free telemetry by default to understand early usage and improve the product. Telemetry records predefined usage events and content-free classifications; it does not record artifact paths or URLs, artifact titles,
|
|
89
|
+
Television collects anonymous, content-free telemetry by default to understand early usage and improve the product. Telemetry records predefined usage events and content-free classifications; it does not record artifact paths or URLs, artifact titles, channel names, theme names, file contents, or user-authored text.
|
|
90
90
|
|
|
91
91
|
If the user wants to opt out, you turn telemetry off for them by running `tv telemetry disable` against the running server (`tv telemetry enable` turns it back on); `tv status` reports the current telemetry state. The command needs a live server. Television also honors the standard `DO_NOT_TRACK` environment variable when it is set, but `tv telemetry disable` is the intended way to opt out. Install- and upgrade-time telemetry duties — the disclosure to give the user and the `--installed-by-agent` flag — are covered in the admin guide (see the Administration section above).
|
|
92
92
|
|
|
@@ -94,7 +94,7 @@ If the user wants to opt out, you turn telemetry off for them by running `tv tel
|
|
|
94
94
|
|
|
95
95
|
Television guidance is split across bundled skills.
|
|
96
96
|
|
|
97
|
-
- Use this skill for
|
|
97
|
+
- Use this skill for channels, focus, artifact decisions, and the `tv` CLI. Required means the knowledge is required, not that you must re-read it before every Television action.
|
|
98
98
|
- Install the bundled Television skills into the agent harness skills folder with `tv skills install <path>` (for example `~/.openclaw/skills`, `~/.hermes/skills`, or `~/.agents/skills`) or use `tv skills install -i` before artifact authoring work.
|
|
99
99
|
- For specialized HTML work, load the matching skill such as `tv-calendar` or `tv-table`.
|
|
100
100
|
|
|
@@ -103,11 +103,11 @@ Television guidance is split across bundled skills.
|
|
|
103
103
|
|
|
104
104
|
# TV CLI capabilities
|
|
105
105
|
|
|
106
|
-
Use this document when you need to reason about what the `tv` CLI can do, which command family fits the user's request, and how focus and
|
|
106
|
+
Use this document when you need to reason about what the `tv` CLI can do, which command family fits the user's request, and how focus and channel placement should be decided.
|
|
107
107
|
|
|
108
108
|
## Agent recovery surfaces
|
|
109
109
|
|
|
110
|
-
The `television` skill is the primary guidance surface for Television
|
|
110
|
+
The `television` skill is the primary guidance surface for Television channels, focus, and artifact work. Keep that guidance available; re-read it only if it is not already in context or you know it changed.
|
|
111
111
|
|
|
112
112
|
Install bundled Television skills with either:
|
|
113
113
|
|
|
@@ -129,14 +129,14 @@ tv help
|
|
|
129
129
|
tv help <command>
|
|
130
130
|
```
|
|
131
131
|
|
|
132
|
-
`tv help <command>` is the source of truth for per-command semantics that are not obvious from the name — focus decisions, cascading effects, JSON vs plain-text output, and distinctions between superficially similar commands (delete-artifact vs remove-
|
|
132
|
+
`tv help <command>` is the source of truth for per-command semantics that are not obvious from the name — focus decisions, cascading effects, JSON vs plain-text output, and distinctions between superficially similar commands (delete-artifact vs remove-channel, focus-channel vs focus-artifact). Read it before choosing a command when you are unsure.
|
|
133
133
|
|
|
134
134
|
Commands group into four intents:
|
|
135
135
|
|
|
136
|
-
- **
|
|
136
|
+
- **Channel and display commands** — create, inspect, remove, or switch channels, or change the active display theme (`create-channel`, `list-channels`, `get-channel`, `remove-channel`, `focus-channel`, `focus-status`, `set-theme`).
|
|
137
137
|
- **Artifact creation commands** — register path or URL artifacts (`create-path-artifact`, `create-url-artifact`).
|
|
138
138
|
- **Artifact management commands** — inspect, retitle, repoint, focus, list, or delete existing artifacts (`delete-artifact`, `get-artifact`, `list-artifacts`, `update-artifact`, `focus-artifact`).
|
|
139
|
-
- **Server and environment commands** — operate on the Television server itself (`serve`, `status`, `stop`, `storage-path`, `skills install`).
|
|
139
|
+
- **Server and environment commands** — operate on the Television server itself (`serve`, `status`, `stop`, `storage-path`, `telemetry`, `skills install`).
|
|
140
140
|
|
|
141
141
|
When the CLI rejects a command, follow the directive it prints rather than guessing flags.
|
|
142
142
|
|
|
@@ -156,10 +156,10 @@ Use read commands when you need authoritative state for planning or verification
|
|
|
156
156
|
|
|
157
157
|
Television separates state changes from focus. Choosing where an artifact lives is one decision; choosing whether the user's attention moves there is a separate one.
|
|
158
158
|
|
|
159
|
-
- **
|
|
160
|
-
- **artifact focus** is transient: clients
|
|
159
|
+
- **channel focus** is persistent: which channel the user is currently looking at
|
|
160
|
+
- **artifact focus** is transient: clients select the artifact's tab page, switching channels first when needed
|
|
161
161
|
|
|
162
|
-
There is a persisted focused
|
|
162
|
+
There is a persisted focused channel.
|
|
163
163
|
There is not a persisted focused artifact.
|
|
164
164
|
|
|
165
165
|
Important consequence: creating something does not by itself answer whether the user should be taken to it now.
|
|
@@ -168,10 +168,10 @@ Important consequence: creating something does not by itself answer whether the
|
|
|
168
168
|
|
|
169
169
|
Create commands require an explicit focus decision.
|
|
170
170
|
|
|
171
|
-
- `tv create-
|
|
171
|
+
- `tv create-channel` requires exactly one of `--focus-channel` or `--no-focus`
|
|
172
172
|
- `tv create-path-artifact` and `tv create-url-artifact` require exactly one of `--focus-artifact` or `--no-focus`
|
|
173
173
|
|
|
174
|
-
If you omit that decision, the CLI rejects the command. Dedicated `focus-
|
|
174
|
+
If you omit that decision, the CLI rejects the command. Dedicated `focus-channel` and `focus-artifact` commands can also move attention later as separate steps.
|
|
175
175
|
|
|
176
176
|
## Choosing the focus directive
|
|
177
177
|
|
|
@@ -181,9 +181,9 @@ Rules of thumb:
|
|
|
181
181
|
|
|
182
182
|
- **focus now** when seeing the result immediately is part of successfully answering the request
|
|
183
183
|
- **`--no-focus`** when the user is likely to want the result available without breaking their current flow, or when the work should run in the background
|
|
184
|
-
- **direct `focus-
|
|
184
|
+
- **direct `focus-channel` / `focus-artifact` commands** when placement and attention movement should happen as separate steps
|
|
185
185
|
|
|
186
|
-
When your action would not be visually obvious to the user — you used `--no-focus`, you placed something on a non-current
|
|
186
|
+
When your action would not be visually obvious to the user — you used `--no-focus`, you placed something on a non-current channel, or you moved focus — tell them what you did, name the channel, and say what they should see. Otherwise the Television display may not change in a way they can interpret.
|
|
187
187
|
|
|
188
188
|
## Listening for focus intent in the user's language
|
|
189
189
|
|
|
@@ -194,7 +194,7 @@ Phrases that usually indicate the user wants attention moved:
|
|
|
194
194
|
- "show me", "show me that", "let me see it", "let me review it"
|
|
195
195
|
- "switch to", "change to", "go to", "take me there", "open it"
|
|
196
196
|
- "put it on screen", "put it on my screen", "bring it up"
|
|
197
|
-
- references to the **active**, **current**, **showing**, or **visible**
|
|
197
|
+
- references to the **active**, **current**, **showing**, or **visible** channel or artifact
|
|
198
198
|
|
|
199
199
|
Phrases that usually indicate the user wants the work to happen without disturbing their current view:
|
|
200
200
|
|
|
@@ -204,42 +204,42 @@ Phrases that usually indicate the user wants the work to happen without disturbi
|
|
|
204
204
|
|
|
205
205
|
These are illustrative, not exhaustive. When the language is ambiguous or unusual, reason about the user's attention stream instead of pattern-matching keywords.
|
|
206
206
|
|
|
207
|
-
##
|
|
207
|
+
## Channel placement
|
|
208
208
|
|
|
209
|
-
Artifact creation commands require `--
|
|
209
|
+
Artifact creation commands require `--channel` because new artifacts need immediate channel membership. Reordering an artifact's tab page on its current channel is a browser UI tab-drag gesture; the CLI does not expose layout mutation today. To move the same underlying path or URL to a different channel, delete the old artifact and create a new artifact on the target channel with the same path or URL.
|
|
210
210
|
|
|
211
211
|
Think carefully about whether the user means:
|
|
212
212
|
|
|
213
|
-
- create something new on a
|
|
214
|
-
-
|
|
215
|
-
- delete an artifact from its
|
|
216
|
-
- recreate the same path or URL on a different
|
|
213
|
+
- create something new on a channel
|
|
214
|
+
- reorder an artifact's tab page on its current channel in the browser UI
|
|
215
|
+
- delete an artifact from its channel
|
|
216
|
+
- recreate the same path or URL on a different channel
|
|
217
217
|
|
|
218
218
|
Those are different operations with different consequences. The per-command help text spells out which is which.
|
|
219
219
|
|
|
220
|
-
### Choosing the right
|
|
220
|
+
### Choosing the right channel
|
|
221
221
|
|
|
222
222
|
When deciding where an artifact should go:
|
|
223
223
|
|
|
224
|
-
- If the current
|
|
225
|
-
- If the current
|
|
226
|
-
- If the work belongs on a different existing
|
|
227
|
-
- Sometimes a new
|
|
224
|
+
- If the current channel is the right place and the user should see the result immediately, create the artifact there with `--focus-artifact`.
|
|
225
|
+
- If the current channel is the right place but the work should appear without interrupting their reading flow, create it with `--no-focus`.
|
|
226
|
+
- If the work belongs on a different existing channel, place it there. Then decide whether to focus or merely tell the user where it is.
|
|
227
|
+
- Sometimes a new channel is the right call.
|
|
228
228
|
|
|
229
|
-
### When to create a new
|
|
229
|
+
### When to create a new channel
|
|
230
230
|
|
|
231
|
-
Reach for `tv create-
|
|
231
|
+
Reach for `tv create-channel` when:
|
|
232
232
|
|
|
233
|
-
- the request is meaningfully separate from the current
|
|
233
|
+
- the request is meaningfully separate from the current channel's purpose
|
|
234
234
|
- the result should become its own durable workspace the user can return to
|
|
235
|
-
- mixing it into the current
|
|
235
|
+
- mixing it into the current channel would make the user's mental model worse
|
|
236
236
|
|
|
237
|
-
Default to placing things on an existing
|
|
237
|
+
Default to placing things on an existing channel unless one of those conditions is true. Spawning a new channel for every request fragments the user's workspace; spawning none ever forces unrelated content together.
|
|
238
238
|
|
|
239
239
|
|
|
240
240
|
# Artifact workflow
|
|
241
241
|
|
|
242
|
-
Read this document for Television artifact work: creating files, registering path or URL artifacts, browser-only
|
|
242
|
+
Read this document for Television artifact work: creating files, registering path or URL artifacts, browser-only tab-page reordering, deleting, and updating titles.
|
|
243
243
|
|
|
244
244
|
If you need bundled Television authoring skills installed first, copy them into the agent harness skills folder with `tv skills install <path>` (for example `~/.openclaw/skills`, `~/.hermes/skills`, or `~/.agents/skills`) or use `tv skills install -i`.
|
|
245
245
|
|
|
@@ -332,7 +332,7 @@ Good examples:
|
|
|
332
332
|
- "Starting the artifact now."
|
|
333
333
|
- "Reviewing the draft and source material."
|
|
334
334
|
- "Writing the HTML and checking it in the browser."
|
|
335
|
-
- "Registering the artifact on your
|
|
335
|
+
- "Registering the artifact on your channel."
|
|
336
336
|
- "Done."
|
|
337
337
|
|
|
338
338
|
Avoid:
|
|
@@ -347,7 +347,7 @@ Avoid:
|
|
|
347
347
|
2. Register it:
|
|
348
348
|
|
|
349
349
|
```bash
|
|
350
|
-
tv create-path-artifact --
|
|
350
|
+
tv create-path-artifact --channel "<channel-id>" --title "Artifact title" --path /absolute/path/to/file.md --focus-artifact
|
|
351
351
|
```
|
|
352
352
|
|
|
353
353
|
Rules:
|
|
@@ -363,13 +363,13 @@ HTML can be a single file or a directory bundle.
|
|
|
363
363
|
Single-file example:
|
|
364
364
|
|
|
365
365
|
```bash
|
|
366
|
-
tv create-path-artifact --
|
|
366
|
+
tv create-path-artifact --channel "<channel-id>" --title "Artifact title" --path /absolute/path/to/report.html --focus-artifact
|
|
367
367
|
```
|
|
368
368
|
|
|
369
369
|
Directory example (trailing slash optional):
|
|
370
370
|
|
|
371
371
|
```bash
|
|
372
|
-
tv create-path-artifact --
|
|
372
|
+
tv create-path-artifact --channel "<channel-id>" --title "Artifact title" --path /absolute/path/to/dashboard --focus-artifact
|
|
373
373
|
```
|
|
374
374
|
|
|
375
375
|
A directory artifact needs root `index.html` or `index.htm`. Keep sibling assets relative so they resolve through the artifact proxy:
|
|
@@ -426,13 +426,13 @@ tv update-artifact --id "<artifact-id>" --path /absolute/path/to/new-target
|
|
|
426
426
|
tv update-artifact --id "<artifact-id>" --url "https://example.com/next"
|
|
427
427
|
```
|
|
428
428
|
|
|
429
|
-
The new path follows the same rules as creation (file or indexed directory, trailing separator optional). Rendering follows the new pointer immediately, and for path artifacts the content watcher retargets with it. Prefer repointing over delete-and-recreate when the artifact should keep its identity and
|
|
429
|
+
The new path follows the same rules as creation (file or indexed directory, trailing separator optional). Rendering follows the new pointer immediately, and for path artifacts the content watcher retargets with it. Prefer repointing over delete-and-recreate when the artifact should keep its identity and channel placement.
|
|
430
430
|
|
|
431
|
-
|
|
431
|
+
Reordering an artifact's tab page on its current channel is a browser UI tab-drag gesture; the CLI does not expose layout mutation today.
|
|
432
432
|
|
|
433
|
-
To move the same underlying path or URL to another
|
|
433
|
+
To move the same underlying path or URL to another channel, delete the existing artifact and create a new one on the target channel with the same `--path` or `--url`.
|
|
434
434
|
|
|
435
|
-
To delete the registry record and remove its
|
|
435
|
+
To delete the registry record and remove its tab page from the channel:
|
|
436
436
|
|
|
437
437
|
```bash
|
|
438
438
|
tv delete-artifact --id "<artifact-id>"
|
|
@@ -443,7 +443,7 @@ tv delete-artifact --id "<artifact-id>"
|
|
|
443
443
|
URL artifacts point at external `http(s)://` pages.
|
|
444
444
|
|
|
445
445
|
```bash
|
|
446
|
-
tv create-url-artifact --
|
|
446
|
+
tv create-url-artifact --channel "<channel-id>" --title "Artifact title" --url https://example.com --no-focus
|
|
447
447
|
```
|
|
448
448
|
|
|
449
449
|
Rules:
|
|
@@ -482,32 +482,31 @@ If the browser placeholder for an ordinary non-Television URL is not sufficient,
|
|
|
482
482
|
|
|
483
483
|
# HTML artifact style
|
|
484
484
|
|
|
485
|
-
Write a complete HTML document for the Television viewer.
|
|
486
|
-
|
|
485
|
+
Write a complete HTML document for the Television viewer. Load both canonical
|
|
486
|
+
v1 resources in the document head:
|
|
487
487
|
|
|
488
488
|
```html
|
|
489
489
|
<link rel="stylesheet" href="/canonical/v1/styles.css">
|
|
490
|
+
<script type="module" src="/canonical/v1/components.js"></script>
|
|
490
491
|
```
|
|
491
492
|
|
|
492
|
-
The
|
|
493
|
-
|
|
494
|
-
|
|
493
|
+
The stylesheet provides Television's reset, Hind font, public design tokens,
|
|
494
|
+
semantic document defaults, and published element styles. The script registers
|
|
495
|
+
the published custom elements. Add local CSS for the artifact's own layout,
|
|
496
|
+
density, hierarchy, and specialized presentation.
|
|
495
497
|
|
|
496
498
|
Lean on semantic HTML first. Headings, paragraphs, lists, links, code blocks,
|
|
497
|
-
blockquotes, rules, images, and tables
|
|
498
|
-
|
|
499
|
-
|
|
499
|
+
blockquotes, rules, images, and tables receive readable document styling from
|
|
500
|
+
the canonical sheet. Rely on those defaults instead of recreating baseline
|
|
501
|
+
typography in each artifact.
|
|
500
502
|
|
|
501
503
|
## Page header
|
|
502
504
|
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
the card name, or a subtitle line carrying context like a date, a person, or
|
|
507
|
-
a status.
|
|
505
|
+
The artifact frame's title bar already names the artifact. Add a page header
|
|
506
|
+
when the document benefits from its own masthead, such as a more specific title
|
|
507
|
+
or a subtitle carrying a date, person, or status.
|
|
508
508
|
|
|
509
|
-
|
|
510
|
-
optionally one `<p>` subtitle:
|
|
509
|
+
Use a `<header>` containing an `<h1>` and, when useful, one `<p>` subtitle:
|
|
511
510
|
|
|
512
511
|
```html
|
|
513
512
|
<header>
|
|
@@ -516,12 +515,12 @@ optionally one `<p>` subtitle:
|
|
|
516
515
|
</header>
|
|
517
516
|
```
|
|
518
517
|
|
|
519
|
-
A
|
|
520
|
-
|
|
521
|
-
above do the differentiating. The idiom is house language: use it as-is,
|
|
522
|
-
don't restyle it per artifact.
|
|
518
|
+
A lead paragraph in a header is automatically muted and drawn close to its
|
|
519
|
+
heading.
|
|
523
520
|
|
|
524
|
-
For prose-like documents,
|
|
521
|
+
For prose-like documents, 32px padding on the top and sides with 64px at the
|
|
522
|
+
bottom is a useful starting point. Adapt it to the document's content and
|
|
523
|
+
available space:
|
|
525
524
|
|
|
526
525
|
```css
|
|
527
526
|
body {
|
|
@@ -529,34 +528,86 @@ body {
|
|
|
529
528
|
}
|
|
530
529
|
```
|
|
531
530
|
|
|
532
|
-
##
|
|
533
|
-
|
|
534
|
-
The canonical stylesheet exposes a small, closed spacing scale for custom layouts:
|
|
535
|
-
`--space-2`, `--space-4`, `--space-6`, `--space-8`, `--space-10`,
|
|
536
|
-
`--space-12`, `--space-16`, `--space-20`, `--space-24`, `--space-32`,
|
|
537
|
-
`--space-48`, and `--space-64`.
|
|
531
|
+
## Canonical tokens
|
|
538
532
|
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
artifact-authored CSS, always include the matching fallback so the artifact still
|
|
542
|
-
renders if the canonical stylesheet is unavailable:
|
|
533
|
+
Use these public custom properties in artifact-authored CSS. Include a literal
|
|
534
|
+
fallback when the artifact should remain readable without the canonical sheet:
|
|
543
535
|
|
|
544
536
|
```css
|
|
545
|
-
.
|
|
537
|
+
.panel {
|
|
546
538
|
padding: var(--space-16, 16px);
|
|
547
539
|
gap: var(--space-12, 12px);
|
|
540
|
+
color: var(--color-text, #222);
|
|
548
541
|
}
|
|
549
542
|
```
|
|
550
543
|
|
|
544
|
+
Fallbacks are paired: a guarded ground goes with a guarded text color, using
|
|
545
|
+
values that read together.
|
|
546
|
+
|
|
547
|
+
This published inventory is closed. Do not invent token names; when no public
|
|
548
|
+
token expresses a value, use an intentional literal, and when one does, use the
|
|
549
|
+
documented token with a literal fallback where appropriate.
|
|
550
|
+
|
|
551
|
+
### Color values and ramps
|
|
552
|
+
|
|
553
|
+
- Base: `--black`, `--white`.
|
|
554
|
+
- Neutral: `--neutral-50`, `--neutral-100`, `--neutral-200`,
|
|
555
|
+
`--neutral-300`, `--neutral-400`, `--neutral-500`, `--neutral-600`,
|
|
556
|
+
`--neutral-700`, `--neutral-800`, `--neutral-900`, `--neutral-950`.
|
|
557
|
+
- Alpha: `--alpha-50`, `--alpha-100`, `--alpha-200`, `--alpha-300`,
|
|
558
|
+
`--alpha-400`, `--alpha-500`, `--alpha-600`, `--alpha-700`,
|
|
559
|
+
`--alpha-800`, `--alpha-900`, `--alpha-950`.
|
|
560
|
+
- Blue: `--blue-50`, `--blue-100`, `--blue-200`, `--blue-300`,
|
|
561
|
+
`--blue-400`, `--blue-500`, `--blue-600`, `--blue-700`, `--blue-800`,
|
|
562
|
+
`--blue-900`.
|
|
563
|
+
- Red: `--red-50`, `--red-100`, `--red-200`, `--red-300`, `--red-400`,
|
|
564
|
+
`--red-500`, `--red-600`, `--red-700`, `--red-800`, `--red-900`.
|
|
565
|
+
- Yellow: `--yellow-50`, `--yellow-100`, `--yellow-200`, `--yellow-300`,
|
|
566
|
+
`--yellow-400`, `--yellow-500`, `--yellow-600`, `--yellow-700`,
|
|
567
|
+
`--yellow-800`, `--yellow-900`, `--yellow-950`.
|
|
568
|
+
- Green: `--green-50`, `--green-100`, `--green-200`, `--green-300`,
|
|
569
|
+
`--green-400`, `--green-500`, `--green-600`, `--green-700`,
|
|
570
|
+
`--green-800`, `--green-900`.
|
|
571
|
+
- Orange: `--orange-50`, `--orange-100`, `--orange-200`, `--orange-300`,
|
|
572
|
+
`--orange-400`, `--orange-500`, `--orange-600`, `--orange-700`,
|
|
573
|
+
`--orange-800`, `--orange-900`.
|
|
574
|
+
- Purple: `--purple-50`, `--purple-100`, `--purple-200`, `--purple-300`,
|
|
575
|
+
`--purple-400`, `--purple-500`, `--purple-600`, `--purple-700`,
|
|
576
|
+
`--purple-800`, `--purple-900`.
|
|
577
|
+
- Current-color tints: `--tint-50`, `--tint-100`, `--tint-200`,
|
|
578
|
+
`--tint-300`, `--tint-400`, `--tint-500`, `--tint-600`, `--tint-700`,
|
|
579
|
+
`--tint-800`, `--tint-900`, `--tint-950`.
|
|
580
|
+
|
|
581
|
+
Prefer the semantic roles when they express the intended meaning:
|
|
582
|
+
`--color-text`, `--color-text-muted`, `--color-primary`,
|
|
583
|
+
`--color-on-primary`, `--color-selected`, `--color-link`, `--color-danger`,
|
|
584
|
+
`--color-success`, `--color-warning`, `--color-background`, `--color-surface`,
|
|
585
|
+
`--color-surface-muted`, `--color-border`, and `--color-border-muted`.
|
|
586
|
+
|
|
587
|
+
### Type
|
|
588
|
+
|
|
589
|
+
- Scale and line height: `--text-base`, `--text-sm`, `--text-md`,
|
|
590
|
+
`--text-lg`, `--text-xl`, `--text-2xl`, `--text-3xl`, `--text-4xl`,
|
|
591
|
+
`--text-scale`, `--leading-base`.
|
|
592
|
+
- Families: `--font-sans`, `--font-mono`.
|
|
593
|
+
- Weights: `--font-weight-normal`, `--font-weight-medium`,
|
|
594
|
+
`--font-weight-body`, `--font-weight-semibold`.
|
|
595
|
+
|
|
596
|
+
### Spacing, radii, and elevation
|
|
597
|
+
|
|
598
|
+
- Spacing: `--space-2`, `--space-4`, `--space-6`, `--space-8`,
|
|
599
|
+
`--space-10`, `--space-12`, `--space-16`, `--space-20`, `--space-24`,
|
|
600
|
+
`--space-32`, `--space-48`, `--space-64`.
|
|
601
|
+
- Radii: `--radius-4`, `--radius-6`, `--radius-8`, `--radius-12`,
|
|
602
|
+
`--radius-16`, `--radius-24`, `--radius-full`.
|
|
603
|
+
- Floating-panel elevation: `--shadow-panel`.
|
|
604
|
+
|
|
551
605
|
## Canonical components
|
|
552
606
|
|
|
553
|
-
|
|
607
|
+
### Static checkbox lists
|
|
554
608
|
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
```
|
|
558
|
-
|
|
559
|
-
Use checkbox-list components for checklists rather than markdown task syntax:
|
|
609
|
+
Use `checkbox-list` and `checkbox-item` for a checklist whose state is authored
|
|
610
|
+
into the document:
|
|
560
611
|
|
|
561
612
|
```html
|
|
562
613
|
<checkbox-list>
|
|
@@ -565,60 +616,53 @@ Use checkbox-list components for checklists rather than markdown task syntax:
|
|
|
565
616
|
</checkbox-list>
|
|
566
617
|
```
|
|
567
618
|
|
|
568
|
-
|
|
569
|
-
shows a not-allowed cursor
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
- `checkbox-list::part(list)` — the internal item stack.
|
|
574
|
-
- `checkbox-item::part(label)` — row containing marker and content.
|
|
575
|
-
- `checkbox-item::part(box)` — visual checkbox marker.
|
|
576
|
-
- `checkbox-item::part(check)` — checkmark.
|
|
577
|
-
- `checkbox-item::part(content)` — item text/content.
|
|
578
|
-
- Useful variables: `--checkbox-list-gap`, `--checkbox-size`,
|
|
579
|
-
`--checkbox-gap`, `--checkbox-color`, `--checkbox-border-color`,
|
|
580
|
-
`--checkbox-radius`, `--checkbox-checked-content-color`,
|
|
581
|
-
`--checkbox-checked-decoration`.
|
|
582
|
-
|
|
583
|
-
Example local variation:
|
|
619
|
+
`checked` marks a completed `checkbox-item`. Checked rows render muted and
|
|
620
|
+
struck through, and the marker shows a not-allowed cursor to communicate its
|
|
621
|
+
static nature. The list is presentational and does not toggle when pressed.
|
|
622
|
+
`--checkbox-color` is the checkbox item's documented styling property:
|
|
584
623
|
|
|
585
624
|
```css
|
|
586
|
-
checkbox-list {
|
|
587
|
-
--checkbox-list-gap: 8px;
|
|
588
|
-
}
|
|
589
|
-
|
|
590
625
|
checkbox-item {
|
|
591
626
|
--checkbox-color: var(--green-600);
|
|
592
627
|
}
|
|
593
|
-
|
|
594
|
-
checkbox-item::part(box) {
|
|
595
|
-
border-radius: 999px;
|
|
596
|
-
}
|
|
597
628
|
```
|
|
598
629
|
|
|
599
630
|
### Icons
|
|
600
631
|
|
|
601
|
-
`<tv-icon name="…" size="
|
|
602
|
-
|
|
632
|
+
`<tv-icon name="…" size="sm|md|lg|xl" spinning>` is the complete authoring
|
|
633
|
+
shape. Supply `name`. Omit `size` beside text so the icon follows the current
|
|
634
|
+
font size, or choose `sm`, `md`, `lg`, or `xl` for a standalone icon. Add the
|
|
635
|
+
boolean `spinning` attribute for continuous activity.
|
|
603
636
|
|
|
604
|
-
-
|
|
605
|
-
|
|
606
|
-
- `plus`
|
|
607
|
-
- `squares-four`
|
|
608
|
-
- `subtract-square`
|
|
609
|
-
- `television`
|
|
637
|
+
`tv-icon` may be composed inside an author-created shadow root; it renders and
|
|
638
|
+
sizes there the same way it does in document light DOM.
|
|
610
639
|
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
## Viewport
|
|
617
|
-
|
|
618
|
-
Artifacts render inside a resizable Television card, not a full browser page.
|
|
619
|
-
The default card is roughly 528px wide by 800px tall. Users may make cards
|
|
620
|
-
narrower, wider, shorter, or taller. Treat 528px × 800px as the first layout
|
|
621
|
-
target, then make sure the artifact still works when narrower.
|
|
640
|
+
```html
|
|
641
|
+
<tv-icon name="check" size="md"></tv-icon>
|
|
642
|
+
<tv-icon name="spinner" size="md" spinning></tv-icon>
|
|
643
|
+
```
|
|
622
644
|
|
|
623
|
-
|
|
624
|
-
|
|
645
|
+
The public icon names are:
|
|
646
|
+
|
|
647
|
+
- `check`, `close`, `copy`, `pin`, `search`, `add`, `more`, `settings`
|
|
648
|
+
- `expand`, `collapse`, `collapse-up`, `skills`, `notification`, `artifact`
|
|
649
|
+
- `spinner`, `locked`, `unpin`, `back`, `forward`, `television`, `calendar`
|
|
650
|
+
- `grid`, `hash`, `delete`, `edit`, `link`, `external`, `download`, `reload`
|
|
651
|
+
- `warning`, `info`, `file`, `folder`, `clock`, `user`, `upload`, `star`
|
|
652
|
+
- `home`, `send`, `filter`, `sort`, `help`, `chart`, `image`, `chat`
|
|
653
|
+
- `location`, `play`, `pause`, `stop`, `video`, `music`, `error`, `email`
|
|
654
|
+
- `phone`, `web`, `tag`, `bookmark`, `table`, `code`, `group`, `up`, `down`
|
|
655
|
+
- `money`, `bank`, `card`, `wallet`, `gauge`, `activity`, `trend-up`
|
|
656
|
+
- `trend-down`, `database`, `server`, `deploy`, `list`, `terminal`, `branch`
|
|
657
|
+
- `shield`
|
|
658
|
+
|
|
659
|
+
Choose a name from this catalog. When the catalog has no suitable glyph, use a
|
|
660
|
+
text label or an emoji.
|
|
661
|
+
|
|
662
|
+
## Available document space
|
|
663
|
+
|
|
664
|
+
Television presents each artifact as its own document inside a resizable
|
|
665
|
+
artifact frame. Build responsive layouts from the document's available width
|
|
666
|
+
and height. Vertical document scrolling is appropriate for overflow; reserve
|
|
667
|
+
horizontal scrolling for content that needs width, such as a data table or
|
|
668
|
+
timeline.
|