@telepath-computer/television 0.1.177 → 0.1.178

package/dist/canonical/v1/components.js

@@ -173,14 +173,20 @@ const ICONS = {
         regular: `<path d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z"/>`,
         duotone: `<path d="M112,56v48a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8h48A8,8,0,0,1,112,56Zm88-8H152a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V56A8,8,0,0,0,200,48Zm-96,96H56a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V152A8,8,0,0,0,104,144Zm96,0H152a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V152A8,8,0,0,0,200,144Z" opacity="0.2"/><path d="M200,136H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48ZM104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Z"/>`,
     },
+    "calendar-blank": {
+        regular: `<path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/>`,
+    },
+    hash: {
+        regular: `<path d="M224,88H175.4l8.47-46.57a8,8,0,0,0-15.74-2.86l-9,49.43H111.4l8.47-46.57a8,8,0,0,0-15.74-2.86L95.14,88H48a8,8,0,0,0,0,16H92.23L83.5,152H32a8,8,0,0,0,0,16H80.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,80,224a8,8,0,0,0,7.86-6.57l9-49.43H144.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,144,224a8,8,0,0,0,7.86-6.57l9-49.43H208a8,8,0,0,0,0-16H163.77l8.73-48H224a8,8,0,0,0,0-16Zm-76.5,64H99.77l8.73-48h47.73Z"/>`,
+    },
 };
 const STYLES = `
   :host {
     display: inline-flex;
-    width: var(--ui-icon-size, 1em);
-    height: var(--ui-icon-size, 1em);
+    width: var(--tv-icon-size, 1em);
+    height: var(--tv-icon-size, 1em);
     vertical-align: -0.125em;
-    color: var(--ui-icon-color, currentColor);
+    color: var(--tv-icon-color, currentColor);
   }
 
   svg {
@@ -191,7 +197,7 @@ const STYLES = `
   }
 `;
 function isIconName(value) {
-    return value === "plus" || value === "subtract-square" || value === "squares-four" || value === "television";
+    return value === "plus" || value === "subtract-square" || value === "squares-four" || value === "television" || value === "calendar-blank" || value === "hash";
 }
 function isIconWeight(value) {
     return value === "regular" || value === "bold" || value === "duotone";
@@ -219,7 +225,7 @@ export class IconElement extends HTMLElement {
       <style>${STYLES}</style>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true" focusable="false">${source}</svg>
     `;
-        this.style.setProperty("--ui-icon-size", `${size}px`);
+        this.style.setProperty("--tv-icon-size", `${size}px`);
     }
     #name() {
         const value = this.getAttribute("name");
@@ -234,7 +240,7 @@ export class IconElement extends HTMLElement {
         return value === MEDIUM_ICON_SIZE || value === LARGE_ICON_SIZE ? value : DEFAULT_ICON_SIZE;
     }
 }
-if (!customElements.get("ui-icon")) {
-    customElements.define("ui-icon", IconElement);
+if (!customElements.get("tv-icon")) {
+    customElements.define("tv-icon", IconElement);
 }
 

package/dist/canonical/v1/styles.css

@@ -327,7 +327,11 @@ body {
   line-height: var(--leading-base);
   letter-spacing: 0.015em;
   color: var(--color-text);
-  background: var(--color-bg);
+  /* The artifact page is the card surface — Television's artifact-view frames
+     the whole document as a card, so the default page background is the
+     surface color. A muted backdrop (--color-bg) is something an artifact
+     opts into, not the default. */
+  background: var(--color-surface);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -378,6 +382,18 @@ table {
   margin-top: var(--space-8);
 }
 
+/* Page-header idiom: a <header> holds a heading and optionally one <p>
+   subtitle — a date line, a description. A paragraph inside any header is a
+   subtitle: slightly smaller than body prose, at body weight, hugging its
+   heading — proximity and the heading above do the differentiating. */
+header p {
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-body);
+}
+header :is(h1, h2, h3, h4, h5, h6) + p {
+  margin-top: var(--space-2);
+}
+
 ul,
 ol {
   padding-left: var(--space-24);

package/dist/cli.cjs

@@ -52695,8 +52695,8 @@ var Server = class {
   };
 };
 function readServerPackageVersion() {
-  if ("0.1.177".length > 0) {
-    return telemetryVersion("0.1.177");
+  if ("0.1.178".length > 0) {
+    return telemetryVersion("0.1.178");
   }
   const packageJsonPath = import_node_path11.default.resolve(import_node_path11.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)), "..", "package.json");
   if (!(0, import_node_fs9.existsSync)(packageJsonPath)) return telemetryVersion("0.0.0");
@@ -53769,8 +53769,8 @@ function resolveVercelSkillsInstallerBin() {
   return localRequire.resolve("skills/bin/cli.mjs");
 }
 function readCLIVersion() {
-  if ("0.1.177".length > 0) {
-    return "0.1.177";
+  if ("0.1.178".length > 0) {
+    return "0.1.178";
   }
   const devPackageJsonPath = import_node_path15.default.join(getDevPackageDir(), "package.json");
   if (!(0, import_node_fs12.existsSync)(devPackageJsonPath)) {

package/dist/onboarding/television-onboarding/index.html

@@ -23,7 +23,7 @@
       font-size: 15px;
     }
 
-    ui-icon {
+    tv-icon {
       position: relative;
       top: 1px;
       color: var(--color-text-muted);
@@ -181,9 +181,9 @@
 
   <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>
 
-  <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>
+  <p>This card is an <tv-icon name="subtract-square" weight="duotone"></tv-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>
 
-  <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>
+  <p>Artifacts live on <tv-icon name="squares-four" weight="duotone"></tv-icon> <strong>Screens</strong>. We put you on <strong>TV Guide</strong> to start. Double-click its name to rename it, use <tv-icon name="plus" weight="bold"></tv-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 <tv-icon name="squares-four" weight="bold"></tv-icon>.</p>
 
   <p>To create or change an artifact, just describe what you want to see. Try asking your agent…</p>
 

package/dist/skills/television/SKILL.md

@@ -494,6 +494,29 @@ blockquotes, rules, images, and tables have readable defaults. Add local CSS for
 artifact-specific layout, density, hierarchy, or specialized presentations; do
 not recreate baseline prose styling in every artifact.
 
+## Page header
+
+A page header is optional — the Television card already names the artifact in
+its title bar, so don't add one just to repeat that. Add one when the document
+benefits from its own masthead: a title that differs from or says more than
+the card name, or a subtitle line carrying context like a date, a person, or
+a status.
+
+When you do, use the house header idiom — a `<header>` holding an `<h1>` and
+optionally one `<p>` subtitle:
+
+```html
+<header>
+  <h1>Quarterly plan</h1>
+  <p>Friday, June 26</p>
+</header>
+```
+
+A `<p>` inside any `<header>` renders as a subtitle — slightly smaller than
+body prose, at body weight, hugging its heading; proximity and the heading
+above do the differentiating. The idiom is house language: use it as-is,
+don't restyle it per artifact.
+
 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:
 
 ```css
@@ -569,6 +592,23 @@ checkbox-item::part(box) {
 }
 ```
 
+### Icons
+
+`<tv-icon name="…" size="16|24|32">` renders a glyph from the canonical
+catalog. The catalog is small and closed — these are the only valid names:
+
+- `calendar-blank`
+- `hash`
+- `plus`
+- `squares-four`
+- `subtract-square`
+- `television`
+
+Do not invent other names (an unknown name silently renders the
+`subtract-square` fallback, which looks like a broken glyph). If no glyph
+fits, use text without an icon; if a glyph is genuinely needed and none
+fits, use an emoji instead of `<tv-icon>`.
+
 ## Viewport
 
 Artifacts render inside a resizable Television card, not a full browser page.

package/dist/skills/tv-tasks/SKILL.md

@@ -0,0 +1,241 @@
+---
+name: tv-tasks
+description: Create to-do list HTML artifacts for Television, to visualize tasks, plans, check them off, etc.
+---
+
+# Authoring a task list
+
+Know the main `television` skill first (re-read only if it's not in context or
+changed) — it covers the Television workflow, artifact registration, and the
+canonical HTML house style. This skill only adds the task-list vocabulary.
+
+A calm, scannable to-do list: sections of task rows, each with a checkbox,
+title, optional note, and a metadata line (due date, project, tags). You author
+plain `tv-task-*` markup; the CSS and two small components do the rest.
+
+## Load these
+
+Every artifact is self-contained. Carry `task.css` and `task.js` from this skill
+folder into the output (don't reference `/skills/tv-tasks/…` URLs).
+
+For a directory artifact, copy both next to `index.html` and load them with the
+canonical boilerplate:
+
+```html
+<link rel="stylesheet" href="/canonical/v1/styles.css" />
+<script type="module" src="/canonical/v1/components.js"></script>
+<link rel="stylesheet" href="./task.css" />
+<script type="module" src="./task.js"></script>
+```
+
+For a single-file artifact, inline `task.css`/`task.js` into `<style>` and
+`<script type="module">` tags instead. `components.js` gives you `<tv-icon>`;
+`task.js` registers `<tv-task-checkbox>` and `<tv-task-meta-due>`.
+
+A task list is not a prose document: don't add `body` padding (the house
+style doc suggests it for prose) — `tv-task-list` and the page header supply
+their own gutters. Leave the body at zero.
+
+## Markup
+
+Author this shape — a page header, then a list of sections and rows:
+
+```html
+<header>
+  <h1>Television</h1>
+  <p>Wednesday, June 25</p>
+</header>
+
+<tv-task-list>
+  <tv-task-section>
+    <header><h2>Today</h2></header>
+
+    <tv-task>
+      <tv-task-checkbox></tv-task-checkbox>
+      <tv-task-body>
+        <tv-task-title>Review the task-list example</tv-task-title>
+        <tv-task-note>Density, grouping, and Things-like hierarchy.</tv-task-note>
+        <tv-task-meta>
+          <tv-task-meta-due date="2026-06-26"></tv-task-meta-due>
+          <tv-task-meta-item><tv-icon name="hash"></tv-icon>TV Skills</tv-task-meta-item>
+          <tv-task-meta-tag>design</tv-task-meta-tag>
+        </tv-task-meta>
+      </tv-task-body>
+    </tv-task>
+  </tv-task-section>
+</tv-task-list>
+```
+
+## Components
+
+### `<tv-task-list>`
+The list root. One per view, holding the sections (or bare rows). It draws no
+frame of its own — the page is the surface, and Television supplies the card
+chrome around the artifact.
+
+### Headers — `<header>` + `<h1>`/`<h2>` + optional `<p>`
+
+A page title is optional — the Television card already names the artifact, so
+a bare list is fine. Add one when the list benefits from its own masthead: a
+date line ("Today" lists usually carry the date), a person, a context the
+card name doesn't say. When you do, use the house header idiom *above*
+`<tv-task-list>` (not inside it): a `<header>` with an `<h1>` and optionally
+a `<p>` subtitle. House styles own its look; the skill only aligns it with
+the list. Title each section with an `<h2>` inside the section's own
+`<header>`. Keep these as real HTML headings, not `tv-task-*`, so the
+document outline stays navigable.
+
+### `<tv-task-section>`
+A titled group of rows: a `<header>` then the `<tv-task>`s. Group by one
+meaningful axis — a when-bucket (Today / Upcoming / Someday), a project, or an
+area. A few purposeful groups read well; one section per task defeats the point,
+and a flat handful of tasks needs no sections at all. Don't render a section
+with no tasks — omit it entirely unless the user asked to see the empty group.
+
+### `<tv-task-count>`
+An optional task count beside a section heading:
+`<header><h2>Today</h2><tv-task-count>3</tv-task-count></header>`. Renders
+inline right of the heading — muted, unbolded, never floated to the far edge.
+You write the number; nothing counts for you — keep it true to the rows
+actually in the section, and skip it when it adds nothing.
+
+### `<tv-task>`
+One task row — a `<tv-task-checkbox>` followed by a `<tv-task-body>`. Give it a
+plain `id` if you'll wire interactivity. One per task.
+
+Add `highlighted` to emphasize a row: a soft wash, amber by default. The hue
+is one knob — `--task-highlight` — settable inline for a single row (`<tv-task highlighted style="--task-highlight: #7C5CFF">`)
+or on an ancestor to retint every highlight in the list. Highlight only with
+a good reason: the user asked for it, or the emphasis clearly benefits them
+(the one row they should see first). At more than one or two per list the
+emphasis stops meaning anything.
+
+### `<tv-task-checkbox>`
+The circular checkbox at the head of each row; every row has exactly one. Add
+`checked` to mark a task done (the row strikes through and mutes) or `disabled`
+to mute a row without completing it. No label — it takes its accessible name from
+the row's `<tv-task-title>`. On user toggle it emits a bubbling `toggle` event
+and exposes a `checked` property (see Interactivity).
+
+### `<tv-task-body>`
+The content column right of the checkbox — wraps the title, note, and meta. One
+per row, always present.
+
+### `<tv-task-title>`
+The task's name, as plain text. Required, one per row; keep it a short imperative
+line.
+
+### `<tv-task-note>`
+A brief, muted one-line description under the title. Optional — add it only when
+the title doesn't say enough, and keep it to a single line. Most tasks are
+clearer without one.
+
+### `<tv-task-meta>`
+The metadata line under the title/note. It holds any mix of the three chips
+below, in any order. Include it only when the task has metadata — otherwise omit
+it.
+
+### `<tv-task-meta-due>`
+A due date: `<tv-task-meta-due date="YYYY-MM-DD">`. Give it only the machine
+date — it computes urgency (today → amber, overdue → red, upcoming → muted),
+writes the human label ("Today", "Tomorrow", "Jun 20"), and draws the calendar
+glyph. Never hand-format the date or set a color. At most one per task.
+
+### `<tv-task-meta-item>`
+The escape hatch for metadata that isn't a date or tag — an `<tv-icon>` plus
+text, like a project or context:
+
+```html
+<tv-task-meta-item><tv-icon name="hash"></tv-icon>TV Skills</tv-task-meta-item>
+```
+
+Useful, but restrained: one or two at most. A row crowded with chips stops being
+scannable.
+
+### `<tv-task-meta-tag>`
+
+A small pill for a label or tag: `<tv-task-meta-tag>design</tv-task-meta-tag>`.
+Repeatable, but a few keywords — not a tag soup. Two or three sharpen a row; six
+bury it.
+
+### `<tv-task-placeholder>`
+
+A centered, muted empty-state message:
+`<tv-task-placeholder>Nothing here yet</tv-task-placeholder>`. Rarely needed —
+by default an empty section simply isn't rendered (see `<tv-task-section>`).
+Use it only when showing the empty group is the point — the user asked to see
+it, or an interactive list empties itself and the space must not collapse.
+
+## Interactivity
+
+- On user toggle a checkbox emits a bubbling `toggle` event; read the new state
+  from `e.checked`. Setting `el.checked = true/false` programmatically reflects
+  the attribute (completes/uncompletes the row) but emits nothing.
+- Listen once on the list and delegate. Give each `<tv-task>` a plain `id` and
+  identify the toggled task with `e.target.closest("tv-task").id`.
+- Nothing is persisted — wire the handler to whatever you want (localStorage, a
+  `fetch` to your own API, …). On load, restore state by setting `el.checked`.
+
+```js
+const list = document.querySelector("tv-task-list");
+list.addEventListener("toggle", (e) => {
+  const id = e.target.closest("tv-task").id;
+  save(id, e.checked); // your persistence; nothing is stored for you
+});
+```
+
+## Example variations
+
+Completed and disabled rows:
+
+```html
+<tv-task>
+  <tv-task-checkbox checked></tv-task-checkbox>
+  <tv-task-body><tv-task-title>Ship the icon migration</tv-task-title></tv-task-body>
+</tv-task>
+<tv-task>
+  <tv-task-checkbox disabled></tv-task-checkbox>
+  <tv-task-body><tv-task-title>Blocked on review</tv-task-title></tv-task-body>
+</tv-task>
+```
+
+An overdue date and multiple tags — same markup, the component colors it:
+
+```html
+<tv-task-meta>
+  <tv-task-meta-due date="2026-06-10"></tv-task-meta-due>
+  <tv-task-meta-tag>urgent</tv-task-meta-tag>
+  <tv-task-meta-tag>backend</tv-task-meta-tag>
+</tv-task-meta>
+```
+
+A highlighted row, retinted to match the artifact's accent:
+
+```html
+<tv-task highlighted style="--task-highlight: #7C5CFF">
+  <tv-task-checkbox></tv-task-checkbox>
+  <tv-task-body><tv-task-title>Sign the lease by Friday</tv-task-title></tv-task-body>
+</tv-task>
+```
+
+Dark mode — set `data-theme="dark"` on `<html>` (the page header and body
+background live outside the list, so scoping dark to the list would leave
+them light):
+
+```html
+<html data-theme="dark">
+  …
+</html>
+```
+
+## Guidelines
+
+- **Icons are always `<tv-icon name="…">`** — never a span or inline SVG. In
+  metadata use `calendar-blank` (handled by the due component) and `hash`
+  (project); for other `tv-task-meta-item`s pick from the canonical icon
+  catalog (listed in the main `television` skill) — names outside it render
+  a broken-looking fallback.
+- **Sizing is `size="16|24|32"`** on `<tv-icon>` — no em or inline sizes.
+- **Rows are flat by default** — no backdrop, no dividers; whitespace does
+  the separating. If you restyle rows (background, radius, spacing), keep
+  that model in mind — deliberate, list-wide changes, not per-row chrome.

package/dist/skills/tv-tasks/task.css

@@ -0,0 +1,205 @@
+/*
+ * Task styles for the tv-tasks artifact skill.
+ * Targets the `tv-task-*` element/attribute vocabulary (no classes); uses
+ * canonical design tokens (--color-*, --space-*, --radius-*, --text-*).
+ *
+ * Behavioral parts live in their own web components' shadow DOM:
+ *   <tv-task-checkbox>  — the circular pop checkbox + focus ring
+ *   <tv-task-meta-due>  — the due-date glyph + label; task.css only colors it.
+ */
+
+:root {
+  /* The amber for a task due today. Not a canonical token, so it gets one
+     named source here rather than being sprinkled as a literal. */
+  --task-due-today: #EA880B;
+  /* Highlight hue — the highlighted row's wash derives from this one knob.
+     Set it on any ancestor (or the row itself) to retint. */
+  --task-highlight: var(--task-due-today);
+  /* Skill-local muted: a shade darker than the canonical --color-text-muted
+     (neutral-500, L 0.553) so notes hold their own against the darker meta
+     treatment below. Declared at :root, so it recolors ALL muted text on the
+     page (canonical components included) — deliberate for a single-skill
+     artifact; revisit if skills ever share a page. */
+  --color-text-muted: oklch(0.52 0 0);
+  /* The meta line recedes a step behind the note: 85% of muted. */
+  --task-meta-text: color-mix(in srgb, var(--color-text-muted) 85%, transparent);
+}
+
+/* One task row — a checkbox column + the body column. */
+tv-task {
+  display: grid;
+  grid-template-columns: 18px 1fr;
+  column-gap: var(--space-12, 12px);
+  padding: var(--space-8, 8px) var(--space-4, 4px);
+}
+
+/* The content column of a row (title / note / meta). */
+tv-task-body {
+  display: block;
+}
+
+tv-task-title {
+  display: block;
+  font-weight: var(--font-weight-body);
+  line-height: 1.35;
+}
+/* Completed — tracks the checkbox's reflected host attribute live, not a
+   static class. (The real <input> lives in the component's shadow DOM, where
+   :has() can't reach it.) */
+tv-task:has(tv-task-checkbox[checked]) tv-task-title {
+  color: var(--color-text-muted);
+  text-decoration: line-through;
+}
+/* A completed task's due date no longer matters — always mute it, overriding
+   the today/overdue emphasis. */
+tv-task:has(tv-task-checkbox[checked]) tv-task-meta-due {
+  color: var(--task-meta-text);
+}
+
+tv-task-note {
+  display: block;
+  color: var(--color-text-muted);
+  font-size: calc(var(--text-sm) + 1px);
+  line-height: 1.4;
+  margin-top: 0;
+}
+
+/* Shared metadata line under the title/note — holds the due date, project,
+   and label pills. */
+tv-task-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8, 8px);
+  margin-top: var(--space-2, 2px);
+  font-size: var(--text-sm);
+  color: var(--task-meta-text);
+}
+
+/* Generic icon + text meta item (project, area, …). The <tv-task-meta-due>
+   component supplies its own inline-flex/gap/icon, so it isn't styled here
+   beyond color. */
+tv-task-meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2, 2px);
+  white-space: nowrap;
+}
+
+/* Due-date urgency — the <tv-task-meta-due> component reflects its computed
+   state; task.css only colors it. Default / upcoming stay muted (inherited
+   from tv-task-meta). */
+tv-task-meta-due[state="today"] { color: var(--task-due-today); }
+tv-task-meta-due[state="overdue"] { color: var(--color-danger); }
+
+/* Label pill — labels, tags, and contexts are the same thing. */
+tv-task-meta-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 5px;
+  padding-bottom: 1px;
+  border-radius: 6px;
+  background: var(--color-bg-muted);
+  color: var(--task-meta-text);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+/* Disabled — the row reads muted rather than dimmed. */
+tv-task:has(tv-task-checkbox[disabled]) tv-task-title {
+  color: var(--color-text-muted);
+}
+
+/* ---- List container ----
+   No frame of its own: the artifact page is the surface, and Television's
+   artifact-view supplies the card chrome around the document. (The frameset
+   design frame adds its own preview-only border.) */
+
+tv-task-list {
+  display: block;
+  padding: 0 var(--space-16, 16px) var(--space-16, 16px);
+}
+/* Nothing above the list (no page heading): give it its own top breathing
+   room. When a header precedes it, the gap is the subtitle's house margin —
+   or the h1 rule below when there is no subtitle. */
+tv-task-list:first-child {
+  padding-top: var(--space-16, 16px);
+}
+
+/* The artifact's own heading lives on the page, above the list, as the house
+   page-header idiom (header > h1 + p) — house typography styles it; the
+   skill only aligns it with the list's interior padding. */
+header:has(+ tv-task-list) {
+  padding: var(--space-16, 16px) var(--space-16, 16px) 0;
+}
+/* A header whose last child is the h1 (no subtitle) has no house margin
+   below it — supply the gap the subtitle's margin would have given. */
+header:has(+ tv-task-list) > h1:last-child {
+  margin-bottom: var(--space-12, 12px);
+}
+
+/* Section headers lay their title out inline. */
+tv-task-section > header {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-6, 6px);
+}
+
+/* ---- Section ----
+   A titled group of tasks. Generic — the title can be a when-bucket (Today /
+   Upcoming / Someday), a project, or an area. Rows separate by whitespace;
+   sections by more whitespace + their header. */
+tv-task-section {
+  display: block;
+  margin-top: var(--space-20, 20px);
+}
+tv-task-section:first-of-type { margin-top: 0; }
+
+tv-task-section > header { padding-bottom: var(--space-6, 6px); }
+tv-task-section > header h2 {
+  margin: 0;
+  font-size: var(--text-base);
+  font-weight: 600;
+}
+
+/* Task count beside a section heading — the author writes the number, the
+   skill only styles it. Inline right of the heading (the header's baseline
+   flex places it), never floated to the far edge. */
+tv-task-count {
+  color: var(--task-meta-text);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-body);
+}
+
+/* Empty state — shown when a section or list has no tasks. */
+tv-task-placeholder {
+  display: block;
+  color: var(--color-text-muted);
+  text-align: center;
+  padding: var(--space-32, 32px) var(--space-16, 16px);
+  font-size: calc(var(--text-sm) + 1px);
+}
+
+
+/* Highlighted row — sanctioned emphasis: a soft wash derived from
+   --task-highlight. No edge lines — rows are borderless throughout. */
+tv-task[highlighted] {
+  background: color-mix(in srgb, var(--task-highlight) 10%, transparent);
+}
+
+/* ---- Dark mode ----
+   The canonical theme is light-only, so the skill carries its own dark token
+   set, applied when the document has data-theme="dark". */
+[data-theme="dark"] {
+  --color-bg: var(--neutral-950);
+  --color-bg-muted: var(--neutral-900);
+  --color-surface: var(--neutral-800);
+  --color-text: var(--neutral-50);
+  --color-text-muted: var(--neutral-400);
+  /* Re-derive: custom properties resolve where declared, so without this the
+     meta tone would keep the light-mode muted it was mixed from. */
+  --task-meta-text: color-mix(in srgb, var(--color-text-muted) 85%, transparent);
+  --color-border: rgba(255, 255, 255, 0.14);
+  color-scheme: dark;
+}