@telepath-computer/television 0.1.141 → 0.1.143

package/dist/canonical/v1/components.js

@@ -154,4 +154,87 @@ if (!customElements.get("checkbox-list")) {
 if (!customElements.get("checkbox-item")) {
     customElements.define("checkbox-item", CheckboxItemElement);
 }
+const DEFAULT_ICON_SIZE = 16;
+const MEDIUM_ICON_SIZE = 24;
+const LARGE_ICON_SIZE = 32;
+const ICONS = {
+    plus: {
+        regular: `<path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/>`,
+        bold: `<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"/>`,
+    },
+    "subtract-square": {
+        regular: `<path d="M224,160V96a8,8,0,0,0-8-8H168V40a8,8,0,0,0-8-8H40a8,8,0,0,0-8,8V160a8,8,0,0,0,8,8H88v48a8,8,0,0,0,8,8H216a8,8,0,0,0,8-8V160Zm-60.69,48-40-40h33.38l40,40ZM168,156.69V123.31l40,40v33.38Zm40-16L171.31,104H208ZM48,48H152v56h0v48H48Zm56,123.31L140.69,208H104Z"/>`,
+        duotone: `<path d="M216,96V216H96V160h64V96Z" opacity="0.2"/><path d="M216,88H168V40a8,8,0,0,0-8-8H40a8,8,0,0,0-8,8V160a8,8,0,0,0,8,8H88v48a8,8,0,0,0,8,8H216a8,8,0,0,0,8-8V96A8,8,0,0,0,216,88ZM48,48H152V152H48ZM208,208H104V168h56a8,8,0,0,0,8-8V104h40Z"/>`,
+    },
+    television: {
+        regular: `<path d="M216,64H147.31l34.35-34.34a8,8,0,1,0-11.32-11.32L128,60.69,85.66,18.34A8,8,0,0,0,74.34,29.66L108.69,64H40A16,16,0,0,0,24,80V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V80A16,16,0,0,0,216,64ZM40,80H144V200H40ZM216,200H160V80h56V200Zm-16-84a12,12,0,1,1-12-12A12,12,0,0,1,200,116Zm0,48a12,12,0,1,1-12-12A12,12,0,0,1,200,164Z"/>`,
+    },
+    "squares-four": {
+        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"/>`,
+    },
+};
+const STYLES = `
+  :host {
+    display: inline-flex;
+    width: var(--ui-icon-size, 1em);
+    height: var(--ui-icon-size, 1em);
+    vertical-align: -0.125em;
+    color: var(--ui-icon-color, currentColor);
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+`;
+function isIconName(value) {
+    return value === "plus" || value === "subtract-square" || value === "squares-four" || value === "television";
+}
+function isIconWeight(value) {
+    return value === "regular" || value === "bold" || value === "duotone";
+}
+export class IconElement extends HTMLElement {
+    static observedAttributes = ["name", "weight", "size"];
+    #root;
+    constructor() {
+        super();
+        this.#root = this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+        this.#render();
+    }
+    attributeChangedCallback() {
+        this.#render();
+    }
+    #render() {
+        const name = this.#name();
+        const weight = this.#weight();
+        const size = this.#size();
+        const icon = ICONS[name];
+        const source = icon[weight] ?? icon.regular;
+        this.#root.innerHTML = `
+      <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`);
+    }
+    #name() {
+        const value = this.getAttribute("name");
+        return isIconName(value) ? value : "subtract-square";
+    }
+    #weight() {
+        const value = this.getAttribute("weight");
+        return isIconWeight(value) ? value : "regular";
+    }
+    #size() {
+        const value = Number(this.getAttribute("size"));
+        return value === MEDIUM_ICON_SIZE || value === LARGE_ICON_SIZE ? value : DEFAULT_ICON_SIZE;
+    }
+}
+if (!customElements.get("ui-icon")) {
+    customElements.define("ui-icon", IconElement);
+}
 

package/dist/canonical/v1/styles.css

@@ -20,8 +20,6 @@ html,
 body {
   margin: 0;
   padding: 0;
-  width: 100%;
-  height: 100%;
 }
 
 h1,

package/dist/cli.cjs

@@ -50042,7 +50042,7 @@ var import_meta = {};
 var ONBOARDING_ARTIFACT_ID = "television-onboarding";
 var ONBOARDING_SCREEN_NAME = "TV Guide";
 var ONBOARDING_ARTIFACT_TITLE = "Welcome to Television";
-var ONBOARDING_ARTIFACT_FILENAME = "television-onboarding.html";
+var ONBOARDING_ARTIFACT_DIRNAME = "television-onboarding";
 var ONBOARDING_ARTIFACT_SENTINEL_VERSION = 1;
 function getDefaultOnboardingArtifactSourcePath() {
   const moduleURL = import_meta.url;
@@ -50052,7 +50052,7 @@ function getDefaultOnboardingArtifactSourcePath() {
   const sourcePath = import_node_path10.default.resolve(
     import_node_path10.default.dirname((0, import_node_url.fileURLToPath)(moduleURL)),
     "../assets",
-    ONBOARDING_ARTIFACT_FILENAME
+    ONBOARDING_ARTIFACT_DIRNAME
   );
   return (0, import_node_fs8.existsSync)(sourcePath) ? sourcePath : void 0;
 }
@@ -50149,7 +50149,7 @@ var ServerStore = class extends EventTarget {
     const artifact = this.createKindArtifact(input);
     const previousLayout = screen.layout;
     this.writeArtifact(artifact);
-    screen.layout = [...screen.layout, createCardNode(artifact.id)];
+    screen.layout = [...screen.layout, createCardNode(artifact.id, input.card)];
     try {
       this.persistScreen(screen);
     } catch (error48) {
@@ -50613,16 +50613,17 @@ var ServerStore = class extends EventTarget {
         return;
       }
       const screenID = this.resolveActiveScreenID(this.activeScreenID) ?? this.pickPreferredScreenID();
-      const onboardingPath = import_node_path11.default.join(getAgentArtifactsDir(this.storagePath), ONBOARDING_ARTIFACT_FILENAME);
+      const onboardingPath = import_node_path11.default.join(getAgentArtifactsDir(this.storagePath), ONBOARDING_ARTIFACT_DIRNAME) + import_node_path11.default.sep;
       if (!(0, import_node_fs9.existsSync)(onboardingPath)) {
-        (0, import_node_fs9.copyFileSync)(this.onboardingArtifactSourcePath, onboardingPath);
+        (0, import_node_fs9.cpSync)(this.onboardingArtifactSourcePath, onboardingPath, { recursive: true });
       }
       this.createArtifact({
         id: ONBOARDING_ARTIFACT_ID,
         kind: "path",
         title: ONBOARDING_ARTIFACT_TITLE,
         screenID,
-        path: onboardingPath
+        path: onboardingPath,
+        card: { width: 5 }
       });
       this.writeOnboardingArtifactSentinel();
     } catch (error48) {
@@ -50842,8 +50843,8 @@ function resolveVercelSkillsInstallerBin() {
   return localRequire.resolve("skills/bin/cli.mjs");
 }
 function readCLIVersion() {
-  if ("0.1.141".length > 0) {
-    return "0.1.141";
+  if ("0.1.143".length > 0) {
+    return "0.1.143";
   }
   const devPackageJsonPath = import_node_path12.default.join(getDevPackageDir(), "package.json");
   if (!(0, import_node_fs10.existsSync)(devPackageJsonPath)) {
@@ -50973,12 +50974,12 @@ function resolveCanonicalDir() {
 function resolveOnboardingArtifactSourcePath() {
   if (process.argv[1]) {
     const entryDir = import_node_path12.default.dirname((0, import_node_fs10.realpathSync)(process.argv[1]));
-    const resolved = import_node_path12.default.resolve(entryDir, "./onboarding/television-onboarding.html");
+    const resolved = import_node_path12.default.resolve(entryDir, "./onboarding/television-onboarding");
     return (0, import_node_fs10.existsSync)(resolved) ? resolved : void 0;
   }
   const devPath = import_node_path12.default.resolve(
     getDevPackageDir(),
-    "../server/assets/television-onboarding.html"
+    "../server/assets/television-onboarding"
   );
   return (0, import_node_fs10.existsSync)(devPath) ? devPath : void 0;
 }

package/dist/onboarding/television-onboarding/assets/television.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="TV_-_Black" data-name="TV - Black" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 55 55">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: none;
+      }
+
+      .cls-3 {
+        fill: #0015ff;
+      }
+
+      .cls-4 {
+        fill: #ff01d0;
+      }
+
+      .cls-5 {
+        fill: #40d2b3;
+      }
+
+      .cls-6 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-7 {
+        fill: #38c428;
+      }
+
+      .cls-2 {
+        stroke: #fff;
+        stroke-width: 3px;
+      }
+
+      .cls-8 {
+        fill: #fff;
+      }
+
+      .cls-9 {
+        fill: #ffcd27;
+      }
+
+      .cls-10 {
+        fill: #d24043;
+      }
+
+      .cls-11 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="27.5" y1="1.45" x2="27.5" y2="53.55" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#000"/>
+      <stop offset="1" stop-color="#262626"/>
+    </linearGradient>
+    <clipPath id="clippath">
+      <path class="cls-1" d="M14.2,7.7h26.6c3.15,0,5.7,2.66,5.7,5.94v27.72c0,3.28-2.55,5.94-5.7,5.94H14.2c-3.15,0-5.7-2.66-5.7-5.94V13.64c0-3.28,2.55-5.94,5.7-5.94Z"/>
+    </clipPath>
+  </defs>
+  <path class="cls-6" d="M12.5,1.45h30c5.47,0,10.48,4.46,10.89,9.98.73,10.7.73,21.44,0,32.13-.41,5.52-5.42,9.98-10.89,9.98H12.5c-5.47,0-10.48-4.46-10.89-9.98-.73-10.7-.73-21.44,0-32.13C2.02,5.91,7.03,1.45,12.5,1.45Z"/>
+  <g class="cls-11">
+    <g>
+      <rect class="cls-8" x="8.5" y="7.7" width="38" height="39.6" rx="5.7" ry="5.7"/>
+      <path class="cls-7" d="M27.5,48.78V6.71h-9.98v42.07h9.98Z"/>
+      <path class="cls-4" d="M27.5,6.71v42.07h9.97V6.71h-9.97Z"/>
+      <path class="cls-5" d="M22.75,48.29c-3.8-18.22-1.58-34.98,0-41.08h-11.88v41.08c3.96.33,11.88.79,11.88,0Z"/>
+      <path class="cls-10" d="M32.25,7.21c3.8,18.22,1.58,34.98,0,41.08h11.88V7.21c-3.96-.33-11.88-.79-11.88,0Z"/>
+      <path class="cls-9" d="M15.62,47.3c-5.7-17.42-2.38-33.66,0-39.6H7.07v39.6s9.03.49,8.55,0Z"/>
+      <path class="cls-3" d="M38.92,6.93c5.69,17.76,2.37,34.31,0,40.36h8.53V6.93s-9.01-.5-8.53,0Z"/>
+    </g>
+  </g>
+  <path class="cls-2" d="M14.2,8.74h26.6c2.56,0,5.25,2.06,5.8,4.64,1.89,9.31,1.89,18.91,0,28.23-.55,2.58-3.25,4.64-5.8,4.64H14.2c-2.56,0-5.25-2.06-5.8-4.64-1.89-9.31-1.89-18.91,0-28.23.55-2.58,3.25-4.64,5.8-4.64Z"/>
+</svg>

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

@@ -0,0 +1,203 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Welcome to Television</title>
+  <link rel="stylesheet" href="/canonical/v1/styles.css">
+  <script type="module" src="/canonical/v1/components.js"></script>
+  <style>
+    html {
+      min-height: 100%;
+      background: linear-gradient(135deg, #ffffff 0%, #f2f2f2 100%);
+      background-attachment: fixed;
+      overscroll-behavior: none;
+    }
+
+    body {
+      margin: 0;
+      padding: 48px;
+      min-height: 100%;
+      box-sizing: border-box;
+      background: transparent;
+      font-size: 15px;
+    }
+
+    ui-icon {
+      position: relative;
+      top: 1px;
+      color: var(--color-text-muted);
+    }
+
+    .logo {
+      width: 22px;
+      height: 22px;
+      margin-left: 2px;
+      margin-right: -2px;
+      vertical-align: -3px;
+    }
+
+    h1 {
+      margin-bottom: 10px;
+      font-size: 24px;
+    }
+
+    .lede {
+      margin-bottom: 18px;
+      color: var(--color-text-muted);
+    }
+
+    .keycap {
+      display: inline-block;
+      margin: 0 2px;
+      padding: 0 3px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-bg-muted);
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 1.3;
+      white-space: nowrap;
+    }
+
+    .prompts {
+      position: relative;
+      max-width: 460px;
+      height: 220px;
+      margin: 24px auto;
+    }
+
+    .prompt {
+      position: absolute;
+      display: grid;
+      grid-template-columns: 22px minmax(0, 1fr);
+      gap: 8px;
+      align-items: flex-start;
+      width: 238px;
+      min-height: 104px;
+      margin: 0;
+      padding: 14px;
+      border: 1px solid var(--color-border);
+      border-radius: 14px;
+      background: #fff;
+      box-shadow: 0 6px 18px rgb(0 0 0 / 0.06);
+      color: color-mix(in srgb, var(--color-text) 82%, var(--color-text-muted));
+      font-size: 13.5px;
+    }
+
+    .prompt svg {
+      width: 22px;
+      height: 22px;
+      color: var(--color-primary);
+    }
+
+    .prompt svg.weather-icon {
+      color: #ffcc28;
+    }
+
+    .prompt svg.todo-icon {
+      color: #41d1b3;
+    }
+
+    .prompt svg.food-icon {
+      color: #d14144;
+    }
+
+    .prompt:nth-child(1) {
+      left: -48px;
+      top: 0;
+      width: 298px;
+      transform: rotate(-4deg);
+    }
+
+    .prompt:nth-child(2) {
+      right: -52px;
+      top: 40px;
+      min-height: 78px;
+      transform: rotate(5deg);
+    }
+
+    .prompt:nth-child(3) {
+      left: 74px;
+      top: 106px;
+      width: 310px;
+      transform: rotate(2deg);
+    }
+
+    @media (max-width: 560px) {
+      .prompts {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: auto;
+        gap: 8px;
+      }
+
+      .prompt {
+        position: static;
+        width: min(350px, 100%);
+        min-height: 0;
+        transform: none !important;
+      }
+    }
+
+    .callout {
+      margin-top: 28px;
+      padding: 12px 14px;
+      border: 1px solid var(--color-border);
+      border-radius: 10px;
+      background: color-mix(in srgb, oklch(0.86 0.01 255.67) 22%, var(--color-bg-muted));
+    }
+
+    .callout h2 {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      margin-top: 0;
+      color: color-mix(in srgb, var(--blue-700) 24%, var(--color-text-muted));
+      font-size: 12px;
+      font-weight: 800;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .callout-icon {
+      width: 16px;
+      height: 16px;
+      flex: none;
+    }
+
+    .callout p {
+      color: color-mix(in srgb, var(--blue-900) 28%, var(--color-text-muted));
+    }
+
+    .callout p:last-child {
+      margin-bottom: 0;
+    }
+  </style>
+</head>
+<body>
+  <h1>You’re on <img class="logo" src="./assets/television.svg" alt=""> Television!</h1>
+
+  <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>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>To create or change an artifact, just describe what you want to see. Try asking your agent…</p>
+
+  <div class="prompts">
+    <p class="prompt"><svg class="weather-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M139.84,84.41v0a68.22,68.22,0,0,0-41.65,46v-.11a44.08,44.08,0,0,0-38.54,5h0a48,48,0,1,1,80.19-50.94Z" opacity="0.2"/><path d="M164,72a76.2,76.2,0,0,0-20.26,2.73,55.63,55.63,0,0,0-9.41-11.54l9.51-13.57a8,8,0,1,0-13.11-9.18L121.22,54A55.9,55.9,0,0,0,96,48c-.58,0-1.16,0-1.74,0L91.37,31.71a8,8,0,1,0-15.75,2.77L78.5,50.82A56.1,56.1,0,0,0,55.23,65.67L41.61,56.14a8,8,0,1,0-9.17,13.11L46,78.77A55.55,55.55,0,0,0,40,104c0,.57,0,1.15,0,1.72L23.71,108.6a8,8,0,0,0,1.38,15.88,8.24,8.24,0,0,0,1.39-.12l16.32-2.88a55.74,55.74,0,0,0,5.86,12.42A52,52,0,0,0,84,224h80a76,76,0,0,0,0-152ZM56,104a40,40,0,0,1,72.54-23.24,76.26,76.26,0,0,0-35.62,40,52.14,52.14,0,0,0-31,4.17A40,40,0,0,1,56,104ZM164,208H84a36,36,0,1,1,4.78-71.69c-.37,2.37-.63,4.79-.77,7.23a8,8,0,0,0,16,.92,58.91,58.91,0,0,1,1.88-11.81c0-.16.09-.32.12-.48A60.06,60.06,0,1,1,164,208Z"/></svg><span>What’s the 3-day weather forecast for New York City? Include a nice icon for each day’s weather. Update it twice a day.</span></p>
+    <p class="prompt"><svg class="todo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z" opacity="0.2"/><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208H208Z"/></svg><span>Open my to-do list from my Obsidian vault.</span></p>
+    <p class="prompt"><svg class="food-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,40V168H152S152,64,208,40Z" opacity="0.2"/><path d="M72,88V40a8,8,0,0,1,16,0V88a8,8,0,0,1-16,0ZM216,40V224a8,8,0,0,1-16,0V176H152a8,8,0,0,1-8-8,268.75,268.75,0,0,1,7.22-56.88c9.78-40.49,28.32-67.63,53.63-78.47A8,8,0,0,1,216,40ZM200,53.9c-32.17,24.57-38.47,84.42-39.7,106.1H200ZM119.89,38.69a8,8,0,1,0-15.78,2.63L112,88.63a32,32,0,0,1-64,0l7.88-47.31a8,8,0,1,0-15.78-2.63l-8,48A8.17,8.17,0,0,0,32,88a48.07,48.07,0,0,0,40,47.32V224a8,8,0,0,0,16,0V135.32A48.07,48.07,0,0,0,128,88a8.17,8.17,0,0,0-.11-1.31Z"/></svg><span>Research the best Thai restaurants in San Francisco and give me a report on the top three. Include photos.</span></p>
+  </div>
+
+  <p>Your agent will usually know when to answer by creating an artifact. If it replies in chat instead, just say: “put that on my TV.”</p>
+
+  <section class="callout">
+    <h2><svg class="callout-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><g transform="translate(256 0) scale(-1 1)"><path d="M240,120a40,40,0,0,1-40,40H160V80h40A40,40,0,0,1,240,120Z" opacity="0.2"/><path d="M248,120a48.05,48.05,0,0,0-48-48H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48.07,48.07,0,0,0,248,120ZM48,199.93V40h0c42.81,35.91,86.63,45,104,47.24v65.48C134.65,155,90.84,164.07,48,199.93Zm131,8,0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z"/></g></svg>Spread the word</h2>
+    <p>Television isn’t public yet, but it’s not a secret. If you make something cool, we’d love you to share it!</p>
+  </section>
+</body>
+</html>