@dennisrongo/dsh-weather 0.3.1 → 0.4.0

package/README.md

@@ -5,10 +5,11 @@
 **npm:** [`@dennisrongo/dsh-weather`](https://www.npmjs.com/package/@dennisrongo/dsh-weather) ·
 **source:** [dennisrongo/dsh-plugins](https://github.com/dennisrongo/dsh-plugins/tree/main/plugins/dsh-weather)
 
-Weather bar for the [DeepSeek Harness](https://github.com/deepseek-ai/dsh) web UI — current conditions, a short hourly outlook, humidity and wind, pinned to the bottom-center of the page.
+Weather bar for the [DeepSeek Harness](https://github.com/deepseek-ai/dsh) web UI — current conditions, a short hourly outlook, humidity and wind, pinned across the top of the page.
 
 - **Data:** [Open-Meteo](https://open-meteo.com) (free, no API key) via the browser.
-- **Location:** `localStorage["dsh-weather:location"] = "Your City"` if set, else coarse IP geolocation (ipapi.co), else New York.
+- **Location:** `localStorage["dsh-weather:location"] = "Your City"` if set, else a coarse IP-geolocation provider chain, else New York.
+- **Placement:** drag the pill anywhere. Until you move it, it stays centred on the space the shell has actually left it, not on the viewport — it measures the shell frame's content box (which already excludes `dsh-mission-control`'s docked rail) and subtracts any overlay flying a `data-dsh-overlay-claim="right"` marker, today `dsh-plan-board`'s plan panel. After a drag the spot is remembered (cookie `dsh-weather-pos`, with `localStorage["dsh-weather:pos"]` as a fallback) so it survives a web UI or DSH Desktop restart. Click the temperature to toggle units; that does not start a drag.
 - **Mount point:** additive `shell.overlay` slot — pure-consumer client plugin, empty host half.
 - **Units:** Fahrenheit by default — click the temperature to toggle °F/°C. The choice is remembered in `localStorage["dsh-weather:unit"]`.
 - **Refresh:** every 15 min, plus a manual ⟳ button.
@@ -34,4 +35,4 @@ pnpm test
       name: '@dennisrongo/dsh-weather'
 ```
 
-Restart the profile; the bar appears at the bottom of the web UI.
+Restart the profile; the bar appears across the top of the web UI.

package/lib/client.js

@@ -44,6 +44,81 @@ __export(client_exports, {
 });
 module.exports = __toCommonJS(client_exports);
 var import_react = __toESM(require("react"), 1);
+
+// src/position.ts
+var POS_COOKIE = "dsh-weather-pos";
+var POS_KEY = "dsh-weather:pos";
+var MAX_AGE = 31536e4;
+function formatPos(pos) {
+  return `${pos.x.toFixed(4)},${pos.y.toFixed(4)}`;
+}
+function parsePos(raw) {
+  if (raw == null || raw === "") return null;
+  const comma = raw.indexOf(",");
+  if (comma === -1) return null;
+  const x = Number(raw.slice(0, comma));
+  const y = Number(raw.slice(comma + 1));
+  if (!Number.isFinite(x) || !Number.isFinite(y)) return null;
+  if (x < 0 || x > 1 || y < 0 || y > 1) return null;
+  return { x, y };
+}
+function rangeOf(box) {
+  const minLeft = box.pad;
+  const maxLeft = Math.max(minLeft, box.viewW - box.width - box.pad);
+  const minTop = Math.max(box.pad, box.minTop);
+  const maxTop = Math.max(minTop, box.viewH - box.height - box.pad);
+  return { minLeft, maxLeft, minTop, maxTop };
+}
+function clampPx(left, top, box) {
+  const { minLeft, maxLeft, minTop, maxTop } = rangeOf(box);
+  return {
+    left: Math.min(maxLeft, Math.max(minLeft, left)),
+    top: Math.min(maxTop, Math.max(minTop, top))
+  };
+}
+function posToPx(pos, box) {
+  const { minLeft, maxLeft, minTop, maxTop } = rangeOf(box);
+  return {
+    left: minLeft + pos.x * (maxLeft - minLeft),
+    top: minTop + pos.y * (maxTop - minTop)
+  };
+}
+function pxToPos(left, top, box) {
+  const { minLeft, maxLeft, minTop, maxTop } = rangeOf(box);
+  const spanX = maxLeft - minLeft;
+  const spanY = maxTop - minTop;
+  return {
+    x: spanX <= 0 ? 0 : (left - minLeft) / spanX,
+    y: spanY <= 0 ? 0 : (top - minTop) / spanY
+  };
+}
+function readCookie(jar, name) {
+  for (const part of jar.split(";")) {
+    const at = part.indexOf("=");
+    if (at === -1) continue;
+    if (part.slice(0, at).trim() !== name) continue;
+    return decodeURIComponent(part.slice(at + 1).trim());
+  }
+  return void 0;
+}
+function posCookieWrite(pos) {
+  return `${POS_COOKIE}=${encodeURIComponent(formatPos(pos))}; Path=/; Max-Age=${MAX_AGE}; SameSite=Lax`;
+}
+function loadPosFromStores(jar, storageGet) {
+  try {
+    const cookie = readCookie(jar, POS_COOKIE);
+    const fromCookie = parsePos(cookie);
+    if (fromCookie) return fromCookie;
+  } catch {
+  }
+  try {
+    return parsePos(storageGet(POS_KEY));
+  } catch {
+    return null;
+  }
+}
+
+// src/client.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var inject = ["slots"];
 function describeCode(code, isDay = true) {
@@ -94,6 +169,24 @@ function saveUnit(unit) {
   } catch {
   }
 }
+function loadPos() {
+  try {
+    return loadPosFromStores(document.cookie, (key) => window.localStorage.getItem(key));
+  } catch {
+    return null;
+  }
+}
+function savePos(pos) {
+  try {
+    document.cookie = posCookieWrite(pos);
+  } catch {
+  }
+  try {
+    window.localStorage.setItem(POS_KEY, formatPos(pos));
+  } catch {
+  }
+}
+var DRAG_THRESHOLD_PX = 4;
 var DEFAULT_LOCATION = { latitude: 40.7128, longitude: -74.006, label: "New York" };
 var GEO_TIMEOUT_MS = 4e3;
 var GEO_PROVIDERS = [
@@ -191,6 +284,9 @@ async function fetchWeather() {
 var BAR_STYLES = `
 .dshwx {
   position: fixed;
+  /* Centred on the viewport only until the bar has measured the shell (see
+     useBandFit): the real centre is the middle of the span no docked overlay
+     has claimed, written inline. */
   left: 50%;
   transform: translateX(-50%);
   top: 8px;
@@ -208,9 +304,10 @@ var BAR_STYLES = `
   font: 400 13px/1.4 var(--dsw-font-family, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
   font-variant-numeric: tabular-nums;
   box-shadow: var(--dsw-shadow-lv3, 0 0 1px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.12));
-  cursor: default;
+  cursor: grab;
   user-select: none;
   white-space: nowrap;
+  touch-action: none;
   /* DSH Desktop on Windows overlays a 36px window-drag strip at the top of the
      viewport (#dsh-desktop-windows-drag-region: -webkit-app-region: drag,
      z-index 2147483644, pointer-events: none) that the compositor resolves
@@ -226,9 +323,12 @@ var BAR_STYLES = `
 body.dsh-desktop-windows-titlebar-layout .dshwx {
   /* Clear the desktop drag strip: 36px strip + the usual 8px gap. The body
      class is added by DSH Desktop's preload on Windows only, so the browser
-     and non-Windows builds keep top: 8px. */
+     and non-Windows builds keep top: 8px. A user-placed inline top overrides
+     this; clampPx's minTop keeps a drag from parking back inside the strip. */
   top: 44px;
 }
+.dshwx[data-placed] { transform: none; }
+.dshwx[data-dragging] { cursor: grabbing; }
 body[data-ds-dark-theme] .dshwx { box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.5); }
 .dshwx[hidden] { display: none; }
 .dshwx-icon { font-size: 16px; }
@@ -242,6 +342,13 @@ body[data-ds-dark-theme] .dshwx { box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 8px 2
 .dshwx-temp:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.08)); }
 .dshwx-temp:focus-visible { outline: 2px solid var(--dsw-alias-label-caption, #81858c); outline-offset: 1px; }
 .dshwx-label { color: var(--dsw-alias-label-secondary, #cfd3d6); }
+/* The bar is a ~200px pill in the shell's top band \u2014 a small surface, so the
+   loading state stays TEXT rather than becoming a skeleton, which would be
+   heavier than the string it replaced. It takes the dim caption tone the other
+   plugins use for the same rung; a MODIFIER rather than a change to
+   .dshwx-label, which is shared with the loaded condition text and must keep
+   its secondary weight. */
+.dshwx-label.loading { color: var(--dsw-alias-label-tertiary, #adb2b8); }
 .dshwx-where {
   color: var(--dsw-alias-label-tertiary, #adb2b8);
   max-width: 160px; overflow: hidden; text-overflow: ellipsis;
@@ -262,37 +369,62 @@ body[data-ds-dark-theme] .dshwx { box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 8px 2
 @keyframes dshwx-spin { to { transform: rotate(360deg); } }
 .dshwx-error { color: var(--dsw-alias-state-error-primary, #ef4444); font-size: 12px; }
 /* --- Responsive tiers ---------------------------------------------------
-   The bar is a single nowrap pill, so narrow screens shed detail rather than
-   wrap. Each tier also drops the separator that preceded the hidden group,
-   otherwise stray dividers float with nothing between them. */
+   The bar is a single nowrap pill, so it sheds detail rather than wrap. Each
+   tier also drops the separator that preceded the hidden group, otherwise
+   stray dividers float with nothing between them.
+
+   Keyed on the MEASURED band (data-fit), not on a viewport media query. The
+   space this bar actually gets is the shell's content box minus whatever a
+   docked overlay has claimed, so a 2400px window with a plan panel open can
+   leave the bar less room than a phone \u2014 a media query would call that "full"
+   and let the pill run under the panel. The measurement falls back to the
+   viewport when there is no shell frame, so the tiers still work standalone. */
 
 /* Tablet: drop the hourly outlook and the humidity/wind readout. */
-@media (max-width: 720px) {
-  .dshwx-hours, .dshwx-meta { display: none; }
-  .dshwx-sep-hours, .dshwx-sep-meta { display: none; }
-}
+.dshwx[data-fit="tablet"] .dshwx-hours,
+.dshwx[data-fit="tablet"] .dshwx-meta,
+.dshwx[data-fit="tablet"] .dshwx-sep-hours,
+.dshwx[data-fit="tablet"] .dshwx-sep-meta,
+.dshwx[data-fit="phone"] .dshwx-hours,
+.dshwx[data-fit="phone"] .dshwx-meta,
+.dshwx[data-fit="phone"] .dshwx-sep-hours,
+.dshwx[data-fit="phone"] .dshwx-sep-meta,
+.dshwx[data-fit="tiny"] .dshwx-hours,
+.dshwx[data-fit="tiny"] .dshwx-meta,
+.dshwx[data-fit="tiny"] .dshwx-sep-hours,
+.dshwx[data-fit="tiny"] .dshwx-sep-meta { display: none; }
 
 /* Phone: tighten spacing, shrink the place name, and give the controls
    touch-sized hit areas without changing the pill's visual weight. */
-@media (max-width: 520px) {
-  .dshwx {
-    gap: 7px;
-    padding: 4px 10px;
-    max-width: calc(100vw - 16px);
-    font-size: 12px;
-  }
-  .dshwx-where { max-width: 92px; }
-  .dshwx-icon { font-size: 14px; }
-  .dshwx-temp { font-size: 13px; padding: 5px 7px; margin: -4px -3px; }
-  .dshwx-refresh { padding: 7px; margin: -5px; }
+.dshwx[data-fit="phone"],
+.dshwx[data-fit="tiny"] {
+  gap: 7px;
+  padding: 4px 10px;
+  font-size: 12px;
 }
+.dshwx[data-fit="phone"] .dshwx-where,
+.dshwx[data-fit="tiny"] .dshwx-where { max-width: 92px; }
+.dshwx[data-fit="phone"] .dshwx-icon,
+.dshwx[data-fit="tiny"] .dshwx-icon { font-size: 14px; }
+.dshwx[data-fit="phone"] .dshwx-temp,
+.dshwx[data-fit="tiny"] .dshwx-temp { font-size: 13px; padding: 5px 7px; margin: -4px -3px; }
+.dshwx[data-fit="phone"] .dshwx-refresh,
+.dshwx[data-fit="tiny"] .dshwx-refresh { padding: 7px; margin: -5px; }
 
 /* Very narrow: the place name is the least load-bearing text \u2014 the icon,
    temperature and condition carry the meaning. */
-@media (max-width: 380px) {
-  .dshwx-where, .dshwx-sep-where { display: none; }
-  .dshwx { gap: 6px; }
-}
+.dshwx[data-fit="tiny"] .dshwx-where,
+.dshwx[data-fit="tiny"] .dshwx-sep-where { display: none; }
+.dshwx[data-fit="tiny"] { gap: 6px; }
+
+/* Nowhere left to stand. Better absent for the moment a full-width overlay is
+   up than a clipped stub sliding under it.
+
+   visibility, NOT display. A display:none bar has no box, so
+   getBoundingClientRect reports zero height, the band measurement has no rows
+   to test claimants against and bails \u2014 and the bar would stay hidden forever
+   after the overlay that squeezed it went away. A hidden box is still a box. */
+.dshwx[data-fit="none"] { visibility: hidden; pointer-events: none; }
 
 /* Coarse pointers (touch) get the larger hit areas at any width. */
 @media (pointer: coarse) {
@@ -313,10 +445,230 @@ function injectStyles() {
   tag.textContent = BAR_STYLES;
   document.head.appendChild(tag);
 }
+var CLAIM_SELECTOR = '[data-dsh-overlay-claim="right"]';
+var BAND_GUTTER = 16;
+function zoomOf(el) {
+  const own = el.currentCSSZoom;
+  if (typeof own === "number" && own > 0) return own;
+  const width = el.getBoundingClientRect().width;
+  return el.offsetWidth > 0 && width > 0 ? width / el.offsetWidth : 1;
+}
+function desktopMinTop() {
+  return document.body.classList.contains("dsh-desktop-windows-titlebar-layout") ? 44 : 8;
+}
+function clampBoxOf(el, zoom) {
+  const rect = el.getBoundingClientRect();
+  return {
+    width: rect.width / zoom,
+    height: rect.height / zoom,
+    viewW: window.innerWidth / zoom,
+    viewH: window.innerHeight / zoom,
+    minTop: desktopMinTop(),
+    pad: 8
+  };
+}
+function tierOf(width) {
+  if (width === void 0) return "full";
+  if (width < 200) return "none";
+  if (width <= 380) return "tiny";
+  if (width <= 520) return "phone";
+  if (width <= 720) return "tablet";
+  return "full";
+}
+function measureBand(band) {
+  const layer = document.querySelector("[data-shell-overlay]");
+  const frame = layer?.parentElement ?? null;
+  let left = 0;
+  let right = window.innerWidth;
+  if (frame !== null) {
+    const rect = frame.getBoundingClientRect();
+    const style = getComputedStyle(frame);
+    const zoom = zoomOf(frame);
+    left = rect.left + (parseFloat(style.paddingLeft) || 0) * zoom;
+    right = rect.right - (parseFloat(style.paddingRight) || 0) * zoom;
+  }
+  for (const claim of Array.from(document.querySelectorAll(CLAIM_SELECTOR))) {
+    const rect = claim.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) continue;
+    if (rect.bottom <= band.top || rect.top >= band.bottom) continue;
+    if (rect.right < right - 1) continue;
+    right = Math.min(right, rect.left);
+  }
+  return {
+    centre: left + (right - left) / 2,
+    width: right - left - BAND_GUTTER * 2,
+    zoom: frame === null ? 1 : zoomOf(frame)
+  };
+}
+function useBandFit(ref) {
+  const [fit, setFit] = import_react.default.useState(null);
+  import_react.default.useLayoutEffect(() => {
+    const el = ref.current;
+    if (el === null) return;
+    const measure = () => {
+      const self = el.getBoundingClientRect();
+      if (self.height === 0) return;
+      const next = measureBand({ top: self.top, bottom: self.bottom });
+      setFit(
+        (prev) => prev !== null && Math.abs(prev.centre - next.centre) < 0.5 && Math.abs(prev.width - next.width) < 0.5 && prev.zoom === next.zoom ? prev : next
+      );
+    };
+    measure();
+    const layer = document.querySelector("[data-shell-overlay]");
+    const frame = layer?.parentElement ?? null;
+    const resize = new ResizeObserver(measure);
+    if (frame !== null) resize.observe(frame);
+    if (layer !== null) resize.observe(layer);
+    const scaleWatch = new MutationObserver(measure);
+    scaleWatch.observe(document.body, { attributes: true, attributeFilter: ["style", "class"] });
+    const mutation = new MutationObserver((records) => {
+      if (records.every((record) => el.contains(record.target))) return;
+      measure();
+    });
+    if (layer !== null) {
+      mutation.observe(layer, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ["style", "data-dsh-overlay-claim", "hidden"]
+      });
+    }
+    if (frame !== null) mutation.observe(frame, { attributes: true, attributeFilter: ["style"] });
+    window.addEventListener("resize", measure);
+    return () => {
+      resize.disconnect();
+      scaleWatch.disconnect();
+      mutation.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [ref]);
+  return fit;
+}
 function WeatherBar() {
   const [state, setState] = import_react.default.useState({ status: "loading" });
   const [busy, setBusy] = import_react.default.useState(false);
   const [unit, setUnit] = import_react.default.useState(loadUnit);
+  const [placed, setPlaced] = import_react.default.useState(loadPos);
+  const [livePx, setLivePx] = import_react.default.useState(null);
+  const [dragging, setDragging] = import_react.default.useState(false);
+  const drag = import_react.default.useRef(null);
+  const ref = import_react.default.useRef(null);
+  const fit = useBandFit(ref);
+  const parked = placed !== null || dragging;
+  const measured = tierOf(fit?.width);
+  const fitTier = parked && measured === "none" ? "tiny" : measured;
+  import_react.default.useLayoutEffect(() => {
+    if (placed === null || dragging) return;
+    const el = ref.current;
+    if (el === null) return;
+    const apply2 = () => {
+      const zoom = zoomOf(el);
+      if (el.getBoundingClientRect().height === 0) return;
+      const next = posToPx(placed, clampBoxOf(el, zoom));
+      setLivePx(
+        (prev) => prev !== null && Math.abs(prev.left - next.left) < 0.5 && Math.abs(prev.top - next.top) < 0.5 ? prev : next
+      );
+    };
+    apply2();
+    const resize = new ResizeObserver(apply2);
+    resize.observe(el);
+    const scaleWatch = new MutationObserver(apply2);
+    scaleWatch.observe(document.body, { attributes: true, attributeFilter: ["style", "class"] });
+    window.addEventListener("resize", apply2);
+    return () => {
+      resize.disconnect();
+      scaleWatch.disconnect();
+      window.removeEventListener("resize", apply2);
+    };
+  }, [placed, dragging]);
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    const node = event.target;
+    if (node instanceof Element && node.closest("button")) return;
+    const el = ref.current;
+    if (el === null) return;
+    const zoom = zoomOf(el);
+    const rect = el.getBoundingClientRect();
+    el.setPointerCapture(event.pointerId);
+    drag.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      origLeft: rect.left / zoom,
+      origTop: rect.top / zoom,
+      zoom,
+      moved: false
+    };
+  };
+  const onPointerMove = (event) => {
+    const session = drag.current;
+    if (session === null || event.pointerId !== session.pointerId) return;
+    const el = ref.current;
+    if (el === null) return;
+    const dx = event.clientX - session.startX;
+    const dy = event.clientY - session.startY;
+    if (!session.moved) {
+      if (dx * dx + dy * dy < DRAG_THRESHOLD_PX * DRAG_THRESHOLD_PX) return;
+      session.moved = true;
+      setDragging(true);
+    }
+    const next = clampPx(
+      session.origLeft + dx / session.zoom,
+      session.origTop + dy / session.zoom,
+      clampBoxOf(el, session.zoom)
+    );
+    setLivePx(next);
+  };
+  const endDrag = (event) => {
+    const session = drag.current;
+    if (session === null || event.pointerId !== session.pointerId) return;
+    drag.current = null;
+    const el = ref.current;
+    if (!session.moved || el === null) {
+      setDragging(false);
+      return;
+    }
+    const box = clampBoxOf(el, session.zoom);
+    const next = clampPx(
+      session.origLeft + (event.clientX - session.startX) / session.zoom,
+      session.origTop + (event.clientY - session.startY) / session.zoom,
+      box
+    );
+    const pos = pxToPos(next.left, next.top, box);
+    setPlaced(pos);
+    setLivePx(next);
+    setDragging(false);
+    savePos(pos);
+  };
+  const bandStyle = fit === null || fit.width <= 0 ? {} : {
+    left: `${fit.centre / fit.zoom}px`,
+    maxWidth: `${fit.width / fit.zoom}px`
+  };
+  const parkedStyle = livePx === null ? { transform: "none" } : {
+    left: `${livePx.left}px`,
+    top: `${livePx.top}px`,
+    transform: "none"
+  };
+  const shell = {
+    ref,
+    className: "dshwx",
+    // A parked bar must not vanish when a dock claims the top band — the user
+    // put it somewhere on purpose. Map the squeezed-out tier up to tiny so it
+    // still sheds rather than hiding.
+    "data-fit": fitTier,
+    // A non-positive width is the squeezed-out case: the `none` tier hides the
+    // bar, and writing a negative max-width would be an ignored declaration
+    // that left it at full size behind the overlay.
+    //
+    // Both lengths are divided by the zoom: `fit` is measured in viewport px
+    // and these are author px the zoom scales again (see zoomOf).
+    ...parked ? { "data-placed": "", style: parkedStyle } : fit === null || fit.width <= 0 ? {} : { style: bandStyle },
+    ...dragging ? { "data-dragging": "" } : {},
+    onPointerDown,
+    onPointerMove,
+    onPointerUp: endDrag,
+    onPointerCancel: endDrag
+  };
   const toggleUnit = () => {
     setUnit((prev) => {
       const next = prev === "C" ? "F" : "C";
@@ -350,13 +702,13 @@ function WeatherBar() {
     fetchWeather().then(setState).catch((e) => setState({ status: "error", error: String(e?.message ?? e) })).finally(() => setBusy(false));
   };
   if (state.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dshwx", "aria-live": "polite", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-icon", children: "\u{1F321}\uFE0F" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-label", children: "Loading weather\u2026" })
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...shell, role: "status", "aria-live": "polite", "aria-busy": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-icon", "aria-hidden": "true", children: "\u{1F321}\uFE0F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-label loading", children: "Loading weather\u2026" })
     ] });
   }
   if (state.status === "error" || !state.now) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dshwx", "aria-live": "polite", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...shell, "aria-live": "polite", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-icon", children: "\u26A0\uFE0F" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-error", title: state.error, children: "Weather unavailable" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: `dshwx-refresh${busy ? " busy" : ""}`, "data-dsh-no-drag": "", title: "Retry", onClick: reload, children: "\u27F3" })
@@ -365,7 +717,7 @@ function WeatherBar() {
   const { icon, label } = describeCode(state.now.weatherCode, state.now.isDay);
   const other = unit === "C" ? "F" : "C";
   const title = `${label} in ${state.where ?? ""} \u2014 feels like ${fmtTemp(state.now.apparentC, unit)}, humidity ${state.now.humidity}%, wind ${Math.round(state.now.windKph)} km/h \xB7 click the temperature for \xB0${other}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dshwx", title, "aria-live": "polite", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...shell, title, "aria-live": "polite", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-icon", children: icon }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",

package/lib/index.js

@@ -1,6 +1,88 @@
+// src/position.ts
+var POS_COOKIE = "dsh-weather-pos";
+var POS_KEY = "dsh-weather:pos";
+var MAX_AGE = 31536e4;
+function formatPos(pos) {
+  return `${pos.x.toFixed(4)},${pos.y.toFixed(4)}`;
+}
+function parsePos(raw) {
+  if (raw == null || raw === "") return null;
+  const comma = raw.indexOf(",");
+  if (comma === -1) return null;
+  const x = Number(raw.slice(0, comma));
+  const y = Number(raw.slice(comma + 1));
+  if (!Number.isFinite(x) || !Number.isFinite(y)) return null;
+  if (x < 0 || x > 1 || y < 0 || y > 1) return null;
+  return { x, y };
+}
+function rangeOf(box) {
+  const minLeft = box.pad;
+  const maxLeft = Math.max(minLeft, box.viewW - box.width - box.pad);
+  const minTop = Math.max(box.pad, box.minTop);
+  const maxTop = Math.max(minTop, box.viewH - box.height - box.pad);
+  return { minLeft, maxLeft, minTop, maxTop };
+}
+function clampPx(left, top, box) {
+  const { minLeft, maxLeft, minTop, maxTop } = rangeOf(box);
+  return {
+    left: Math.min(maxLeft, Math.max(minLeft, left)),
+    top: Math.min(maxTop, Math.max(minTop, top))
+  };
+}
+function posToPx(pos, box) {
+  const { minLeft, maxLeft, minTop, maxTop } = rangeOf(box);
+  return {
+    left: minLeft + pos.x * (maxLeft - minLeft),
+    top: minTop + pos.y * (maxTop - minTop)
+  };
+}
+function pxToPos(left, top, box) {
+  const { minLeft, maxLeft, minTop, maxTop } = rangeOf(box);
+  const spanX = maxLeft - minLeft;
+  const spanY = maxTop - minTop;
+  return {
+    x: spanX <= 0 ? 0 : (left - minLeft) / spanX,
+    y: spanY <= 0 ? 0 : (top - minTop) / spanY
+  };
+}
+function readCookie(jar, name) {
+  for (const part of jar.split(";")) {
+    const at = part.indexOf("=");
+    if (at === -1) continue;
+    if (part.slice(0, at).trim() !== name) continue;
+    return decodeURIComponent(part.slice(at + 1).trim());
+  }
+  return void 0;
+}
+function posCookieWrite(pos) {
+  return `${POS_COOKIE}=${encodeURIComponent(formatPos(pos))}; Path=/; Max-Age=${MAX_AGE}; SameSite=Lax`;
+}
+function loadPosFromStores(jar, storageGet) {
+  try {
+    const cookie = readCookie(jar, POS_COOKIE);
+    const fromCookie = parsePos(cookie);
+    if (fromCookie) return fromCookie;
+  } catch {
+  }
+  try {
+    return parsePos(storageGet(POS_KEY));
+  } catch {
+    return null;
+  }
+}
+
 // src/index.ts
 function apply() {
 }
 export {
-  apply
+  POS_COOKIE,
+  POS_KEY,
+  apply,
+  clampPx,
+  formatPos,
+  loadPosFromStores,
+  parsePos,
+  posCookieWrite,
+  posToPx,
+  pxToPos
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dennisrongo/dsh-weather",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Weather bar for DeepSeek Harness (dsh) — current conditions at the bottom of the web UI via Open-Meteo, rendered into shell.overlay",
   "type": "module",
   "license": "MIT",
@@ -29,7 +29,7 @@
     "postbuild": "node build/postbuild.mjs",
     "deploy": "node build/postbuild.mjs",
     "typecheck": "tsc --noEmit",
-    "test": "node build/build.mjs && node test/smoke.mjs"
+    "test": "node build/build.mjs && node test/smoke.mjs && node test/position.mjs"
   },
   "dsh": {
     "bundle": {