hyper-windowtint 0.3.2 → 0.3.5

package/CHANGELOG.md

@@ -5,6 +5,52 @@ 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.5] - 2026-05-16
+
+### Fixed
+- Color collisions across projects. Previously every project root got an
+  independent random seed, and two random seeds could hash to the same
+  palette index — so two unrelated projects regularly came out the same
+  color. `seedForProjectRoot` now tracks which palette indices are in use
+  by other active projects and rolls candidate seeds until it finds one
+  that hashes to an unused slot. The first 12 distinct project roots in
+  a Hyper session are now guaranteed to get 12 distinct colors; only
+  projects 13+ have to collide.
+
+## [0.3.4] - 2026-05-16
+
+### Changed
+- README now references real screenshots in `docs/` instead of a placeholder.
+
+### Removed
+- Dead code left over from 0.3.3's `decorateTab` removal: the `uidToColor`
+  map, the `tintVersion` counter and its `WINDOWTINT_COLOR_CHANGE` dispatch,
+  and the `reduceUI` export. None affected runtime; they only existed to
+  feed the now-removed per-tab decorations. `index.js` drops from 647 to 622
+  lines.
+
+## [0.3.3] - 2026-05-16
+
+### Changed
+- Corner color-name badge now defaults to **off**. Opt back in with
+  `config.windowTint.showBadge: true` in `~/.hyper.js`.
+
+### Removed
+- The bottom underline accent and the left/right edge stripes that 0.3.2
+  added via `decorateTab`'s `customChildrenBefore`. Hyper 3.x's Tab
+  component does not render plugin-injected children, so these decorations
+  were never actually painting on most users' screens. The `decorateTab`,
+  `getTabProps`, and `mapHeaderState` exports have been removed entirely
+  since they only served those non-rendering decorations.
+- The dead-code path that depended on those exports.
+
+### Note
+- The window-level signals — colored window border, top line in the tab
+  bar, and the active-tab background gradient — all still work and remain
+  the primary at-a-glance project indicator. Per-tab outlines for inactive
+  tabs are deferred to a future release pending a different mechanism
+  (likely a renderer-side DOM observer) that bypasses Hyper's prop-dropping.
+
 ## [0.3.2] - 2026-05-16
 
 ### Added

package/index.js

@@ -99,7 +99,7 @@ function readUserConfig(config) {
   return {
     palette: palette.length ? palette : DEFAULT_PALETTE,
     borderWidth: typeof u.borderWidth === 'string' ? u.borderWidth : '3px',
-    showBadge: u.showBadge !== false,
+    showBadge: u.showBadge === true,
     glow: u.glow !== false,
   };
 }
@@ -200,16 +200,49 @@ async function resolveProjectRootAsync(cwd) {
   }
 }
 
-function createRandomSeed() {
-  return `windowtint:${Date.now().toString(36)}:${Math.random().toString(36).slice(2)}`;
+function createRandomSeed(salt) {
+  return `windowtint:${Date.now().toString(36)}:${Math.random().toString(36).slice(2)}${salt != null ? ':' + salt : ''}`;
 }
 
+// Main-process palette-size hint for collision avoidance. The user can
+// override the palette in their renderer-side config, but main can't see
+// that, so we assume the default 12-slot palette here. If a user shrinks
+// their palette, the worst case is that we'll still allocate indices 0–11
+// uniformly — they just won't all be reachable in the renderer.
+const COLLISION_AVOIDANCE_PALETTE_SIZE = DEFAULT_PALETTE.length;
+
 function seedForProjectRoot(root) {
   if (!root) return root;
-  if (!projectSeedCache.has(root)) {
-    projectSeedCache.set(root, createRandomSeed());
+  if (projectSeedCache.has(root)) return projectSeedCache.get(root);
+
+  // Figure out which palette indices are currently taken by other projects
+  // so we can prefer a slot that isn't already in use.
+  const paletteSize = COLLISION_AVOIDANCE_PALETTE_SIZE;
+  const usedIndices = new Set();
+  projectSeedCache.forEach((existingSeed) => {
+    usedIndices.add(hashToIndex(existingSeed, paletteSize));
+  });
+
+  // Brute-force candidate seeds until one hashes to an unused index, or we
+  // run out of attempts. Probability of a single attempt being clean is
+  // (paletteSize - usedIndices.size) / paletteSize, so 200 attempts is more
+  // than enough until ~11 colors are taken.
+  let seed = null;
+  if (usedIndices.size < paletteSize) {
+    for (let i = 0; i < 200; i++) {
+      const candidate = createRandomSeed(i);
+      if (!usedIndices.has(hashToIndex(candidate, paletteSize))) {
+        seed = candidate;
+        break;
+      }
+    }
   }
-  return projectSeedCache.get(root);
+  // Fallback: more projects than colors, or 200 attempts didn't find a clean
+  // index — just take a random seed and accept the collision.
+  if (!seed) seed = createRandomSeed();
+
+  projectSeedCache.set(root, seed);
+  return seed;
 }
 
 exports.decorateSessionOptions = (options) => {
@@ -356,13 +389,9 @@ exports.onUnload = () => {
 
 // uid → seed, populated by the rpc listener installed lazily inside middleware.
 const uidToSeed = new Map();
-const uidToColor = new Map();
 let rpcListenerInstalled = false;
 let rpcSeedListener = null;
 let currentSeed = null;
-let tintVersion = 0;
-
-const WINDOWTINT_COLOR_CHANGE = 'WINDOWTINT_COLOR_CHANGE';
 
 function applyTint(color, opts) {
   if (typeof document === 'undefined' || !color) return;
@@ -378,16 +407,11 @@ function tintForUid(uid) {
   const seed = uidToSeed.get(uid) || uid;
   if (seed === currentSeed) return;
   currentSeed = seed;
-  const color = colorForSeed(seed);
-  applyTint(color, userOpts);
-  uidToColor.set(uid, color);
+  applyTint(colorForSeed(seed), userOpts);
 }
 
 function setSeedForUid(uid, seed) {
   uidToSeed.set(uid, seed);
-  const color = colorForSeed(seed);
-  uidToColor.set(uid, color);
-  return color;
 }
 
 function installRpcListener(store) {
@@ -399,8 +423,6 @@ function installRpcListener(store) {
     try {
       if (!payload || !payload.uid || !payload.seed) return;
       setSeedForUid(payload.uid, payload.seed);
-      tintVersion += 1;
-      store.dispatch({ type: WINDOWTINT_COLOR_CHANGE, version: tintVersion });
 
       // If the seed arrived after the session was already tinted (race —
       // shouldn't happen in practice because we emit seed before `session
@@ -425,9 +447,7 @@ exports.onRendererUnload = () => {
     rpcSeedListener = null;
     rpcListenerInstalled = false;
     uidToSeed.clear();
-    uidToColor.clear();
     currentSeed = null;
-    tintVersion = 0;
   } catch (e) { /* swallow */ }
 };
 
@@ -590,10 +610,6 @@ exports.decorateConfig = (config) => {
   .hyper_main .tab_tab.tab_active {
     background: linear-gradient(180deg, var(--tint-tab-bg, transparent), transparent);
   }
-  .hyper_main .tab_tab.tab_active .windowtint_tabAccent {
-    height: 3px;
-    opacity: 1;
-  }
   ${badgeCSS}
   `;
 
@@ -602,118 +618,15 @@ exports.decorateConfig = (config) => {
   });
 };
 
-exports.decorateTab = (Tab, { React }) => {
-  return class WindowTintTab extends React.PureComponent {
-    render() {
-      const uid = this.props.windowTintUid;
-      const color = this.props.windowTintColor || null;
-      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: {
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          bottom: 0,
-          height: this.props.isActive ? 3 : 2,
-          background: hex,
-          boxShadow: color ? `0 0 12px ${withAlpha(color.hex, '66')}` : 'none',
-          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 accents = [sideAccentLeft, sideAccentRight, bottomAccent];
-      const customChildrenBefore = existing
-        ? accents.concat(Array.isArray(existing) ? existing : [existing])
-        : accents;
-      return React.createElement(Tab, Object.assign({}, this.props, { customChildrenBefore }));
-    }
-  };
-};
-
-exports.getTabProps = (tab, parentProps, props) => {
-  try {
-    if (!tab || !tab.uid) return props;
-    const colors = parentProps && parentProps.windowTintTabColors;
-    return Object.assign({}, props, {
-      windowTintUid: tab.uid,
-      windowTintColor: colors && colors[tab.uid] ? colors[tab.uid] : null,
-      windowTintVersion: parentProps && parentProps.windowTintVersion,
-    });
-  } catch (e) {
-    return props;
-  }
-};
-
-exports.mapHeaderState = (state, props) => {
-  try {
-    const colors = {};
-    const activeSessions = state.termGroups && state.termGroups.activeSessions;
-    if (activeSessions) {
-      Object.keys(activeSessions).forEach((rootGroupUid) => {
-        const sessionUid = activeSessions[rootGroupUid];
-        const color = uidToColor.get(sessionUid);
-        if (color) colors[rootGroupUid] = color;
-      });
-    }
-    return Object.assign({}, props, {
-      windowTintTabColors: colors,
-      windowTintVersion: state.ui && state.ui.windowTintVersion,
-    });
-  } catch (e) {
-    return props;
-  }
-};
-
-exports.reduceUI = (state, action) => {
-  if (!action || action.type !== WINDOWTINT_COLOR_CHANGE) return state;
-  try {
-    if (state && typeof state.set === 'function') {
-      return state.set('windowTintVersion', action.version);
-    }
-    return Object.assign({}, state, { windowTintVersion: action.version });
-  } catch (e) {
-    return state;
-  }
-};
+// No `decorateTab` export in this version. Hyper 3.x's Tab component drops
+// most plugin-injected props (`customChildrenBefore`, `style`, `className`,
+// `borderColor` all observed dropped on this user's build), so per-tab
+// decoration via the documented API doesn't actually paint. The window-level
+// CSS variables set by the middleware already communicate the active
+// project's color via the window border, the active-tab background gradient,
+// and the colored top line in the tab bar — that's enough for now.
+// Per-tab outlines for inactive tabs may come back in a future release using
+// a different mechanism (e.g. a renderer-side DOM observer).
 
 // Redux middleware: re-tint when sessions are added or switched, using the
 // project-group seed if available, falling back to session UID.

package/package.json

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