hyper-windowtint 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -5,6 +5,26 @@ All notable changes to `hyper-windowtint` will be documented here.
 The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.2] - 2026-05-16
+
+### Added
+- Colored side stripes on each tab. Each tab now renders a 3–4px full-height
+  bar on its left and right edge in the tab's project color, so the boundary
+  between two tabs visibly shows both projects' colors. Tab colors are now
+  legible at a glance without making a tab active.
+
+## [0.3.1] - 2026-05-16
+
+### Fixed
+- Critical: plugin CSS no longer overrides `.hyper_main`'s `position: fixed`.
+  In 0.3.0 the plugin added `position: relative`, which Hyper's CSS-in-JS
+  scoping elevated to higher specificity than Hyper's own rule. `.hyper_main`
+  then collapsed to its content-height (~2px) and the entire terminal area
+  rendered as an unusable black rectangle (visible tint border + corner badge,
+  but no tabs and no terminal canvas). The border is now drawn as an inset
+  `box-shadow` directly on `.hyper_main` without touching `position`, so the
+  fixed-positioning context from Hyper is preserved.
+
 ## [0.3.0] - 2026-05-16
 
 ### Added

package/index.js

@@ -568,20 +568,20 @@ exports.decorateConfig = (config) => {
     z-index: 1000;
   }` : '';
 
+  // Render the border as an inset box-shadow directly on `.hyper_main`. Hyper
+  // sets `.hyper_main` to `position: fixed; inset: 0` so it fills the window;
+  // we must NOT override `position` here, or the element collapses to its
+  // content-height (~2px) and the entire terminal disappears. The badge
+  // pseudo-element below stays inside `.hyper_main`'s fixed positioning
+  // context, so `position: absolute` on the badge still anchors correctly.
+  const borderWidth = userOpts.borderWidth || '3px';
   const css = `
-  /* hyper-windowtint v0.2 */
+  /* hyper-windowtint v0.3 */
   .hyper_main {
-    position: relative;
-  }
-  .hyper_main::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    border: ${userOpts.borderWidth} solid var(--tint-color, transparent);
-    box-shadow: inset 0 0 28px -10px var(--tint-glow, transparent);
-    z-index: 999;
-    transition: border-color 0.25s ease, box-shadow 0.25s ease;
+    box-shadow:
+      inset 0 0 0 ${borderWidth} var(--tint-color, transparent),
+      inset 0 0 28px -10px var(--tint-glow, transparent);
+    transition: box-shadow 0.25s ease;
   }
   .hyper_main .tabs_title,
   .hyper_main .tabs_borderShim {
@@ -607,7 +607,42 @@ exports.decorateTab = (Tab, { React }) => {
     render() {
       const uid = this.props.windowTintUid;
       const color = this.props.windowTintColor || null;
-      const accent = React.createElement('span', {
+      const hex = color ? color.hex : 'transparent';
+      const baseOpacity = color ? (this.props.isActive ? 1 : 0.7) : 0;
+
+      // Left- and right-edge stripes — full tab height, project color. Two
+      // adjacent tabs put their stripes back-to-back at the boundary, so the
+      // separator visually shows both projects' colors. The first tab's left
+      // edge is often hidden under macOS traffic lights, so doing both sides
+      // means the color is always visible somewhere on every tab.
+      const stripeStyle = (side) => ({
+        position: 'absolute',
+        [side]: 0,
+        top: 0,
+        bottom: 0,
+        width: this.props.isActive ? 4 : 3,
+        background: hex,
+        opacity: color ? 1 : 0,
+        boxShadow: color ? `0 0 8px ${withAlpha(color.hex, '44')}` : 'none',
+        pointerEvents: 'none',
+        transition: 'background 0.2s ease, opacity 0.2s ease, width 0.2s ease, box-shadow 0.2s ease',
+      });
+      const sideAccentLeft = React.createElement('span', {
+        key: 'windowtint-side-left',
+        className: 'windowtint_tabAccentSide windowtint_tabAccentSideLeft',
+        'data-windowtint-uid': uid,
+        style: stripeStyle('left'),
+      });
+      const sideAccentRight = React.createElement('span', {
+        key: 'windowtint-side-right',
+        className: 'windowtint_tabAccentSide windowtint_tabAccentSideRight',
+        'data-windowtint-uid': uid,
+        style: stripeStyle('right'),
+      });
+
+      // Bottom accent — kept for the soft glow under the active tab.
+      const bottomAccent = React.createElement('span', {
+        key: 'windowtint-bottom',
         className: 'windowtint_tabAccent',
         'data-windowtint-uid': uid,
         style: {
@@ -616,15 +651,19 @@ exports.decorateTab = (Tab, { React }) => {
           right: 0,
           bottom: 0,
           height: this.props.isActive ? 3 : 2,
-          background: color ? color.hex : 'transparent',
+          background: hex,
           boxShadow: color ? `0 0 12px ${withAlpha(color.hex, '66')}` : 'none',
-          opacity: color ? (this.props.isActive ? 1 : 0.65) : 0,
+          opacity: baseOpacity,
           pointerEvents: 'none',
           transition: 'background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, height 0.2s ease',
         },
       });
+
       const existing = this.props.customChildrenBefore;
-      const customChildrenBefore = existing ? [accent].concat(existing) : accent;
+      const accents = [sideAccentLeft, sideAccentRight, bottomAccent];
+      const customChildrenBefore = existing
+        ? accents.concat(Array.isArray(existing) ? existing : [existing])
+        : accents;
       return React.createElement(Tab, Object.assign({}, this.props, { customChildrenBefore }));
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyper-windowtint",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Give Hyper terminal tabs distinct color tints, matching tabs from the same project during the current Hyper session.",
   "main": "index.js",
   "files": [