@telepath-computer/television 1.3.7 → 1.3.9

package/dist/skills/television/SKILL.md

@@ -709,7 +709,7 @@ The public icon names are:
 - `phone`, `web`, `tag`, `bookmark`, `table`, `code`, `group`, `up`, `down`
 - `money`, `bank`, `card`, `wallet`, `gauge`, `activity`, `trend-up`
 - `trend-down`, `database`, `server`, `deploy`, `list`, `terminal`, `branch`
-- `shield`, `select`
+- `shield`, `select`, `sidebar`
 
 Choose a name from this catalog. When the catalog has no suitable glyph, use a
 text label or an emoji.

package/dist/skills/television/theming.md

@@ -573,7 +573,7 @@ These four tokens are enough to replace the main surfaces and text, but they do
   --sidebar-background: var(--color-surface-muted);
   --sidebar-text-color: var(--color-text);
   --sidebar-shadow: none;
-  --sidebar-border-color: color-mix(in oklch, var(--color-surface), oklch(from var(--color-surface) 1 0 h) var(--alpha-15));
+  --sidebar-border-color: var(--color-border);
   --sidebar-border: var(--panel-border);
   --sidebar-heading-text-color: var(--color-text-muted);
   --sidebar-heading-font-size: var(--text-md);
@@ -618,6 +618,18 @@ These four tokens are enough to replace the main surfaces and text, but they do
   --wallpaper-overlay-blur: 0px;
 
   /* Navbar and empty stage. */
+  /* The one height of the app's top bars — the navbar and the sidebar
+     titlebar — so controls across the boundary share a band. The value
+     centres the macOS traffic lights (15px top inset, 14px buttons) with even
+     air above and below the cluster. */
+  --app-bar-height: 44px;
+  /* Match the top inset of the standard 24px navbar controls. */
+  --app-bar-padding-inline: 10px;
+  /* The horizontal room an app bar reserves for the traffic-light cluster
+     when it holds the window's top-left corner. Only the desktop shell has
+     the cluster, and it marks the document root; in a browser the
+     reservation is zero. */
+  --traffic-light-x-reserve: 0px;
   --navbar-background: transparent;
   --navbar-text-color: var(--wallpaper-overlay-text-color);
   --navbar-border-color: transparent;
@@ -637,7 +649,7 @@ These four tokens are enough to replace the main surfaces and text, but they do
      a theme's root override wins — a declaration on the component would
      shadow it. */
   --page-gap: var(--space-24);
-  --page-inset: var(--space-12);
+  --page-inset: var(--space-8);
   --page-inactive-blur: 0px;
   --page-inactive-backdrop-blur: var(--wallpaper-overlay-blur);
   --page-inactive-opacity: 0.55;
@@ -674,9 +686,8 @@ These four tokens are enough to replace the main surfaces and text, but they do
   --drag-action-shadow: var(--shadow-sm);
 
 
-  /* The air between the navbar and the stage ([[ui/app/styles.css]] consumes
-     it for the bar's seat and the stage's top padding). */
-  --navbar-gap: var(--space-8);
+  /* The shared top band supplies equal air above and below the tabs. */
+  --navbar-gap: 0px;
 
   /* The artifact frame's radius ([[ui/app/artifact-frame/artifact-frame.frame]]);
      artifact documents also apply it by reference
@@ -687,6 +698,15 @@ These four tokens are enough to replace the main surfaces and text, but they do
 :where([data-theme="dark"]) {
   --app-wallpaper: var(--app-wallpaper-image) center / cover no-repeat, var(--neutral-950);
 }
+
+/* The desktop shell marks the document root; the traffic-light reservation
+   exists only there. */
+:root[data-platform="electron"] {
+  /* The cluster ends at 73px (15px inset, three 14px buttons, two 8px gaps);
+     the bar adds its outer padding to this reservation, leaving air
+     before its first control. */
+  --traffic-light-x-reserve: 72px;
+}
 ```
 
 ## Application structure for this release
@@ -708,7 +728,18 @@ An artifact frame belongs to the application document. The document inside its i
 <div id="foreground-overlay" inert aria-hidden="true"></div>
 ```
 
-`#app` owns the application layout and suppresses ordinary text selection in its contents; readable regions can explicitly restore selection. `.app-sidebar` holds the channel list. The sidebar defaults to 260 pixels wide, resizes between 160 and 350 pixels, and remembers the chosen width per browser. `.app-main` holds the wallpaper, navbar and stage. `.app-main > .top-bar` supplies the inset shared with the stage. `#app:focus` suppresses a ring on the container itself. The wallpaper region establishes a backdrop boundary so overlay blur samples the wallpaper rather than adjacent content, while fixed popovers retain viewport positioning.
+`#app` owns the application layout and suppresses ordinary text selection in its contents; readable regions can explicitly restore selection. `.app-sidebar` holds the channel list. The sidebar defaults to 260 pixels wide, resizes between 160 and 350 pixels, and remembers the chosen width per browser; it can also collapse entirely, the navbar then opening with an expand control and — while a channel is open — a channel-switcher popover, with the collapsed state remembered per browser. `.app-main` holds the wallpaper, navbar and stage. `.app-main > .top-bar` supplies the horizontal control inset; stage padding is separate. Preserve the shell width constraints so overflowing tabs and pages scroll inside their regions without widening the document. `#app:focus` suppresses a ring on the container itself. The wallpaper region establishes a backdrop boundary so overlay blur samples the wallpaper rather than adjacent content, while fixed popovers retain viewport positioning.
+
+During collapse or expansion, `#app[data-sidebar-motion]` contains both resting layouts and one travelling control:
+
+```html
+<button class="sidebar-motion-toggle" variant="ghost" icon aria-label="Collapse sidebar">
+  <span class="expanded-paint" aria-hidden="true"><tv-icon name="sidebar" size="sm"></tv-icon></span>
+  <span class="collapsed-paint" aria-hidden="true"><tv-icon name="sidebar" size="sm"></tv-icon></span>
+</button>
+```
+
+The button is a direct child of `#app`, alongside `.app-sidebar` and `.app-main`. Its two spans carry the sidebar and navbar treatments, clipped at the moving boundary. The resting collapse and expand controls are hidden during motion. Theme rules that change those controls should give the corresponding spans the same treatment. Preserve the application-controlled position, clipping and opacity; shell transitions and animations are suppressed during this motion so they cannot trail the prescribed pose. Artifact documents remain independent.
 
 For the optional iframe surfaces and protected overlay stacking, see [Theme effects and scripts](#theme-effects-and-scripts).
 
@@ -718,32 +749,50 @@ For the optional iframe surfaces and protected overlay stacking, see [Theme effe
 <nav class="sidebar">
   <header class="sidebar-titlebar">
     <button class="channel-create" variant="ghost" icon aria-label="New channel" title="New channel">…</button>
+    <span class="toolbar-separator" role="separator" aria-orientation="vertical"></span>
+    <button class="sidebar-collapse" variant="ghost" icon aria-label="Collapse sidebar" title="Collapse sidebar">…</button>
   </header>
-  <div class="sidebar-body" role="listbox" aria-label="Channels">
-    <div class="channel-group" role="group" aria-labelledby="channel-group-pinned">
-      <div class="channel-group-label" id="channel-group-pinned">Pinned</div>
-      <div class="channel-row">
-        <div class="channel" role="option" aria-selected="true" tabindex="-1">…</div>
-        <button class="channel-menu-trigger" icon variant="ghost" size="sm" tabindex="-1" aria-hidden="true">…</button>
+  <div class="sidebar-body">
+    <div class="channel-list" role="listbox" aria-label="Channels">
+      <div class="channel-group" role="group" aria-labelledby="channel-group-pinned">
+        <div class="channel-group-label" id="channel-group-pinned">Pinned</div>
+        <div class="channel-row">
+          <div class="channel" role="option" aria-selected="true" tabindex="-1">…</div>
+          <button class="channel-menu-trigger" icon variant="ghost" size="sm" tabindex="-1" aria-haspopup="menu">…</button>
+        </div>
       </div>
+      <!-- The Recent group uses channel-group-unpinned. -->
     </div>
-    <!-- The Recent group uses channel-group-unpinned. -->
   </div>
 </nav>
 ```
 
-`.sidebar::after` paints the light inner seam over the sidebar background, alongside its optional soft shadow. `.app-main::before` paints the adjoining fractional dark seam over the wallpaper. Both are pointer-transparent. The sidebar accepts an independent native border; the main region reserves the exterior seam track. `.sidebar-titlebar` reserves the window controls and drag area. `.sidebar-body` scrolls both groups together; `.sidebar:has(.sidebar-body[continues-start]) .sidebar-titlebar` draws the top boundary while content extends above the viewport. `.channel-group + .channel-group` separates the groups, and `.channel-group-label` styles their labels. `.channel-create` sits at the right of the titlebar and is excluded from window dragging.
+`.sidebar::after` paints the light inner seam over the sidebar background, alongside its optional soft shadow. `.app-main::before` paints the adjoining fractional dark seam over the wallpaper. Both are pointer-transparent. The sidebar accepts an independent native border; the main region reserves the exterior seam track. `.sidebar-titlebar` reserves the window controls and drag area; the reservation applies in the desktop shell, which marks the document root `data-platform="electron"`. `.sidebar-body` scrolls both groups together; `.sidebar:has(.sidebar-body[continues-start]) .sidebar-titlebar` draws the top boundary while content extends above the viewport. `.channel-list` holds the groups and their spacing, composed here and inside the collapsed navbar's switcher popover. `.channel-group + .channel-group` separates the groups, and `.channel-group-label` styles their labels. `.channel-create` and `.sidebar-collapse` sit at the right of the titlebar, split by `.toolbar-separator`, and are excluded from window dragging.
 
 The channel name and its menu trigger are siblings within the row. `.channel` owns the name box; `.channel[aria-selected="true"]` paints the selection. The selected row changes `.channel-menu-trigger` text color through `.channel-row:has(> .channel[aria-selected="true"])`. Shared foundation tints follow that color for hover, press and expanded states. A hover or an expanded trigger preserves the unselected row tint through `:where(.channel-row:hover, .channel-row:has(.channel-menu-trigger[aria-expanded="true"])) .channel:not([aria-selected="true"])`. Trigger visibility follows row hover, `:focus-visible`, selected state, and expanded state. Use the expanded trigger state when styling an open menu subject. Panels remain in their authored DOM position when opened.
 
 Renaming replaces the name and menu trigger with `input.channel-rename` and `button.channel-rename-commit`. The field uses shared native-input styling; these selectors retain its placement and the commit treatment in the same row seat. `.channel-row:has(.channel-rename)` keeps its focus ring visible. A dragged row carries `.channel-row.dragged`; an unpinning row also carries `.unpinning` and contains `.channel-drag-action` with a `tv-icon`. `.channel-row.dragged .channel` removes the spare trigger inset. `.channel-drag-action tv-icon` sizes the action glyph; `.channel-placeholder` marks the drop slot.
 
-Row menus use `tv-menu`, `tv-menu-item`, `hr`, and `tv-menu-item[intent="danger"]`. These shared elements supply menu styling and item states. Deletion uses the shared dialog outline below.
+Channel context menus use `tv-menu`, `tv-menu-item`, `hr`, and `tv-menu-item[intent="danger"]`. An open menu is a sibling of the channel name and trigger inside `.channel-row`; its trigger carries `aria-expanded="true"`. The same composition appears in the sidebar and the channel popover. These shared elements supply menu styling and item states. Deletion uses the shared dialog outline below.
 
 ### Navbar and tabs
 
 ```html
 <header class="top-bar">
+  <!-- The lead group renders while the channel sidebar is collapsed. -->
+  <div class="top-bar-lead">
+    <button class="sidebar-expand" variant="ghost" icon aria-label="Show sidebar" title="Show sidebar">…</button>
+    <button class="channel-switcher" variant="ghost" target aria-haspopup="listbox"><span class="channel-switcher-name">…</span>…</button>
+    <!-- The open channel popover stays inside the lead group. -->
+    <tv-popover open class="channel-switcher-pop">
+      <div class="channel-switcher-pop-body">
+        <div class="channel-list" role="listbox" aria-label="Channels">…</div>
+      </div>
+      <footer class="channel-switcher-pop-footer">
+        <button class="channel-create" variant="ghost" icon aria-label="New channel">…</button>
+      </footer>
+    </tv-popover>
+  </div>
   <div class="tab-strip" role="tablist">
     <div class="tab" role="tab" aria-selected="true" tabindex="0">
       <span class="tab-label">…</span>
@@ -753,11 +802,17 @@ Row menus use `tv-menu`, `tv-menu-item`, `hr`, and `tv-menu-item[intent="danger"
 </header>
 ```
 
-`.top-bar` centers `.top-bar > .tab-strip` while tabs fit and keeps `.top-bar-controls` at the trailing edge. With `.tab-strip[data-overflow]`, the strip extends to the left wallpaper boundary and takes the space up to the fixed controls. Both child bands exclude native window dragging; empty bar ground remains available for it.
+`.top-bar` centers `.top-bar > .tab-strip` while tabs fit and keeps `.top-bar-controls` at the trailing edge. With `.tab-strip[data-overflow]`, the strip scrolls within the remaining space. The layout retains an 8-pixel gap before the strip and 48 pixels of draggable ground before the trailing controls; tabs and their edge fades stay clear of both control groups. Both child bands exclude native window dragging; empty bar ground remains available for it. The navbar and sidebar titlebar share the application bar height, with their controls vertically centered.
+
+`.top-bar-lead` appears only while the channel sidebar is collapsed: `.sidebar-expand` reopens it, and — only while a channel is open — `.channel-switcher` (with `.channel-switcher-name` truncating the label) opens `.channel-switcher-pop`, a `tv-popover` composing the channel list over a pinned `.channel-switcher-pop-footer` create bar, its scrolling body `.channel-switcher-pop-body`. While the lead group is present the leading flank refuses to shrink below it, so a long name pushes the strip off-centre rather than clipping.
+
+The popover retains channel row spacing, type and shape, but assigns its colors locally from ordinary panel and option roles. Sidebar-specific color overrides therefore do not set its colors. `.channel-switcher-pop .channel[aria-selected="true"]` keeps primary selection colors. Unselected rows use a neutral highlight for hover, keyboard focus or an open context menu; `.channel-switcher-pop .channel:focus-visible` has no outline. While keyboard focus is visible, a stationary pointer does not highlight a second row. Preserve these distinctions when styling the popover.
+
+All `.top-bar tv-popover` panels have a 600-pixel maximum height, reduced further when the viewport requires it. The channel popover keeps its create footer fixed while `.channel-switcher-pop-body` scrolls. The shared dragged-row, unpin action, placeholder and rename selectors above also apply here. A channel context menu is a child panel of the channel popover; opening it keeps the parent visible, and closing the parent closes its children.
 
-`.top-bar-controls > button:not([intent])` follows the navbar text token. Ordinary ghost buttons share the wallpaper-overlay background, border and blur; hover and pressed/expanded states replace the complete background. Buttons with an intent retain their semantic colours.
+Ordinary controls in both groups — `.top-bar :is(.top-bar-controls, .top-bar-lead) > button:not([intent])` — follow the navbar text token. Ordinary ghost buttons share the wallpaper-overlay background, border and blur; hover and pressed/expanded states replace the complete background. Buttons with an intent retain their semantic colours.
 
-`.tab-strip` scrolls horizontally. Only the right edge fades while more tabs remain to the right. `.tab[data-item-edge-fade]` carries a mask on the individual tab, preserving its backdrop blur; the strip has no mask. `.tab` owns the pill; `.tab-label` truncates its text. `.tab[data-compression="hugging"]` retains intrinsic width, while `.tab[data-compression="capped"]` permits compression to the floor. `.tab:hover:not([aria-selected="true"])` and `.tab:active:not([aria-selected="true"])` style unselected interaction; `.tab[aria-selected="true"]` paints the current page cue. `.tab.dragged` raises the carried tab, and `span.tab-placeholder[aria-hidden="true"]` occupies its drop slot. Nonselected tabs carry `aria-selected="false"` and `tabindex="-1"`.
+`.tab-strip` scrolls horizontally. An edge fades while more tabs remain past it. `.tab[data-item-edge-fade]` carries a mask on the individual tab, preserving its backdrop blur; the strip has no mask. `.tab` owns the pill; `.tab-label` truncates its text. `.tab[data-compression="hugging"]` retains intrinsic width, while `.tab[data-compression="capped"]` permits compression to the floor. `.tab:hover:not([aria-selected="true"])` and `.tab:active:not([aria-selected="true"])` style unselected interaction; `.tab[aria-selected="true"]` paints the current page cue. `.tab.dragged` raises the carried tab, and `span.tab-placeholder[aria-hidden="true"]` occupies its drop slot. Nonselected tabs carry `aria-selected="false"` and `tabindex="-1"`.
 
 ### Stage and pages
 
@@ -798,7 +853,7 @@ An empty channel adds `.stage-empty`, containing an artifact `tv-icon` and a par
 </div>
 ```
 
-`.artifact-frame` owns the border, curve, surface and broad shadow. Its `::before` paints the sharp rim and its `::after` paints a pointer-transparent masked inner highlight over document and titlebar. Background pages suppress the broad shadow while retaining the exterior rim. `.artifact-frame-clip > :is(iframe, webview)` fills the document area through the one-pixel padding track. `.artifact-frame-clip` clips the document and titlebar while the outer frame lets both shadows extend outward. `.artifact-title-bar` paints the lower band, `.artifact-title-bar .artifact-title` takes the remaining width and truncates, and `.artifact-bar-divider` separates navigation from the menu trigger. The two direction buttons use `disabled` to show unavailable history. The document repeats the top clipping radius where required for composited iframe/webview rendering.
+`.artifact-frame` owns the border, curve, surface and broad shadow. Its `::before` paints the sharp rim and its `::after` paints a pointer-transparent masked inner highlight over document and titlebar. Background pages suppress the broad shadow while retaining the exterior rim. `.artifact-frame-clip > :is(iframe, webview)` fills the document area through the one-pixel padding track. `.artifact-frame-clip` clips the document and titlebar while the outer frame lets both shadows extend outward. `.artifact-title-bar` paints the lower band, `.artifact-title-bar .artifact-title` takes the remaining width and truncates, and `.artifact-bar-divider` separates navigation from the menu trigger. The two direction buttons use `disabled` to show unavailable history. In browser demo mode, the frame of an external web page wraps its artifact `tv-icon` in `button.artifact-return` (`icon`, ghost, `sm`) and shows no direction controls. The document repeats the top clipping radius where required for composited iframe/webview rendering.
 
 The artifact menu uses the same shared menu elements and placement as channel menus. Deletion uses the shared dialog outline below.