@telepath-computer/television 0.1.128 → 0.1.142

package/dist/skills/{television-theme → tv-theme}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: television-theme
+name: tv-theme
 description: Author a Television theme — capture intent as a skill, render to <storagePath>/themes/<name>/theme.css. The skill survives Television token-surface changes across releases.
 ---
 
@@ -40,7 +40,7 @@ Television is a single-screen-at-a-time display for AI-generated artifacts. The
 
 - **The app shell.** A single window that always shows one active screen. There's no home page; the active screen is the page.
 - **`<screen-select>`** — a top-edge or corner control listing available screens; lets the user switch.
-- **`<command-panel>`** — persistent chrome that floats over content (bottom or corner). Hosts global commands and the chat input + message stream. Uses paper material in dark tone by default.
+- **`<command-panel>`** — persistent chrome that floats over content (bottom or corner). Hosts global commands and command panel input/content. Uses paper material in dark tone by default.
 - **`<screen-view>` → `<layout-view>`** — page container holding the scrollable canvas where artifact cards live.
 - **`<artifact-view>`** — each artifact card. Glass-material title bar wrapping a paper-material content surface (the artifact's rendered HTML, in an iframe).
 - **Popovers, dropdowns, modals** — paper-material panels for transient and modal UI.
@@ -117,7 +117,7 @@ cat <television-checkout>/packages/ui/styles/tokens.css <television-checkout>/pa
 Themes have two complementary tools:
 
 - **Override semantic tokens on `:root`** when you want a change to propagate everywhere it's relevant — every paper surface, every body text, every focus ring. One token edit, system-wide effect. Use this for the look's foundations: backgrounds, foregrounds, primary accents, border weights.
-- **Override specific selectors** when the intent is local to a surface — the chat input gets a special background, the artifact title bar uses a custom font, the layout canvas gets a subtle background image. Selectors give surgical control; tokens can't always express what a design wants.
+- **Override specific selectors** when the intent is local to a surface — the command panel input gets a special background, the artifact title bar uses a custom font, the layout canvas gets a subtle background image. Selectors give surgical control; tokens can't always express what a design wants.
 
 Both are first-class. A typical theme uses tokens for ~80% of its effect and selector-level rules for the rest. Don't avoid selectors out of orthodoxy; use them where they fit.
 
@@ -138,7 +138,7 @@ Theme levers:
 
 - Want a flat colored background? `:root { --app-wallpaper: none; }` and override `--color-bg` (or `--app-bg` directly for finer control).
 - Want a custom wallpaper? `:root { --app-wallpaper: url(my-bg.jpg); }` where `my-bg.jpg` is in the theme's `resources/` folder (the server will rewrite the relative URL).
-- The default-look bundled wallpaper is `packages/web/src/assets/wallpaper-s.jpg` — themes don't import or reference it; they replace the variable.
+- The default-look bundled wallpaper is `packages/web/src/assets/wallpapers/clouds.jpg` — themes don't import or reference it; they replace the variable.
 
 ### Buttons
 
@@ -147,7 +147,7 @@ Television has three button stories: variant-styled buttons, ghost buttons (chro
 What each consumes:
 
 - **Default `<button>`** — `--color-text` (text), `--color-interactive` (resting bg), `--color-interactive-hover` (hover bg), `--control-height-md` (28px outer height), `--shadow-control` (subtle drop shadow on resting state).
-- **`<button variant="ghost">`** — fully chromeless, no fill. Hover/active backgrounds use `--color-overlay-hover` / `--color-overlay-active` (semantic overlay tokens that auto-flip with the surface's `tone`). The ghost-button auto-tone watcher (`packages/ui/utils/button-tone.ts`) samples the surface under each ghost button and sets `tone="dark"` or `tone="light"` on the button itself so its hover tint reads against the local backdrop.
+- **`<button variant="ghost">`** — fully chromeless, no fill. Hover/active backgrounds use `--color-overlay-hover` / `--color-overlay-active` (semantic overlay tokens that auto-flip with the surface's `tone`). The transparent-chrome auto-tone watcher (`packages/ui/utils/button-tone.ts`) samples `[variant="ghost"]`, `[variant="glass"]`, and `[material="glass"]` when they create a new tone boundary; nested transparent chrome inherits an ancestor `tone` unless it explicitly declares its own.
 - **`<button variant="primary">`** — emphasis button. Fills with `--color-primary` for the bg, `--white` for text.
 - **Icon-only buttons** — `<button icon-only>` becomes a square at `--control-height-md` per side.
 
@@ -173,9 +173,9 @@ Theme levers:
 - Adjust `--color-border` to change the title bar's edge weight.
 - Adjust the title's font weight or letter spacing via selector-level rules on `artifact-view > header` if the design needs a non-token change (comment the rule with purpose).
 
-### Command panel — input + chat stream
+### Command panel — input + content
 
-`<command-panel>` is the persistent chrome at the bottom (or corner) of the app. It hosts the chat input (typically a textarea) and the message stream above it. By default uses **paper** material in **dark** tone, **`level="overlay"`** (no shadow — it's bonded to the viewport).
+`<command-panel>` is the persistent chrome at the bottom (or corner) of the app. It hosts the command panel input (typically a textarea) and command panel content above it. By default uses **paper** material in **dark** tone, **`level="overlay"`** (no shadow — it's bonded to the viewport).
 
 What it consumes:
 
@@ -189,8 +189,8 @@ Theme levers:
 
 - Override the dark-tone surface color: target `[tone="dark"]` in your theme and set `--color-surface` (or set it on `command-panel` directly with a purpose comment).
 - Adjust message-stream separator weight via `--color-border-muted`.
-- Adjust the chat input's affordance via `--color-interactive`.
-- For dramatic looks (a saturated chat background, a textured chat surface), target `command-panel` directly with a purpose comment.
+- Adjust the command panel input's affordance via `--color-interactive`.
+- For dramatic looks (a saturated command panel background, a textured command panel surface), target `command-panel` directly with a purpose comment.
 
 ### Popovers and dropdowns
 
@@ -310,7 +310,7 @@ Create a new skill — wherever skills live in the user's environment. Folder la
 
 The SKILL.md should have:
 
-- **Frontmatter** with `name` following the convention `tv-theme-<name>` (e.g. `tv-theme-paperlike`) and `description` (one-line aesthetic summary). The `tv-theme-` prefix scopes the skill to Television theming so it's discoverable alongside the bundled `television-theme` meta-skill.
+- **Frontmatter** with `name` following the convention `tv-theme-<name>` (e.g. `tv-theme-paperlike`) and `description` (one-line aesthetic summary). The `tv-theme-` prefix scopes the skill to Television theming so it's discoverable alongside the bundled `tv-theme` meta-skill.
 - **Intent.** 1–3 paragraphs describing the look and the user-facing pitch. Specific enough that another agent (or you, six months later) could re-author this theme from scratch from this section alone.
 - **References.** Optional — inspirations, links, screenshots, brand/product references.
 - **Design choices.** Bulleted list of decisions with rationale. E.g. *"Background is near-black to evoke low-light comfort"*, *"Primary accent is muted teal — saturated enough to read on dark, restrained enough not to scream."*