sliftutils 1.1.4 → 1.1.40

package/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "WebFetch(domain:openrouter.ai)"
+    ]
+  }
+}

package/.cursor/rules/api-calls.mdc

@@ -0,0 +1,16 @@
+---
+description: API calls and controller usage
+alwaysApply: true
+---
+
+# API Calls
+
+When in an event callback (which must be async):
+```typescript
+APIController(getExtNodeId()).getModels.promise()
+```
+
+When in a render function/context:
+```typescript
+APIController(getExtNodeId()).getModels()
+```

package/.cursor/rules/coding-styles.mdc

@@ -0,0 +1,50 @@
+---
+description: General coding styles and conventions
+alwaysApply: true
+---
+
+# Coding Styles
+
+- Times should almost always be in milliseconds, and if not told, you should assume a time is in milliseconds.
+- Don't make functions that will never be reused and are short. This just makes the code too confusing. If the function is under five lines and it's not being reused, you shouldn't create it, unless instructed explicitly to create it.
+- Comments should be used sparingly and only if it's required to explain what's being done. If you're calling a function called `createImageName` and the comment is called "create imageName", you will be fired because that's just stupid. It's a waste of lines.
+- Comments go in the line before, never after the semicolon.
+- Try not to use `null`, and instead always use `undefined`.
+- Almost never check for `undefined` or `null`, just check for falsey.
+- When functions have more than one primitive parameter, such that you could confuse them (even something as simple as start time and end time), you should put them inside of an object and call that object `config`, so the function only has a single parameter.
+- Never use return codes, always prefer to throw on error. Include a lot of context information in the error. If any values might be extremely large, such as parsing a file, limit them (ex, to 500 characters).
+- Use double quotes, not single quotes.
+- Never use the ternary operator. Instead, do this: `x ? y : z` => `x && y || z`.
+- Never use non-null assertion operator, instead check the value, and if necessary (because it is accessed in nested functions), use a `const` variable to preserve the type.
+- Errors should almost always use a template string to include the expected value, and the actual value, as in: `throw new Error(\`Expected X, was \${Y}\`);`
+- Don't use switch statements. Use if/else statements instead.
+- Don't use `!` when accessing a value from a map. Use the get / if undefined initialize and set, and then use style. It's faster, and more type safe.
+- Sort with this function, which takes a single function to map each object to a sortable value:
+  ```typescript
+  import { sort } from "socket-function/src/misc";
+  export function sort<T>(arr: T[], sortKey: (obj: T) => unknown);
+  ```
+- Prefer to return, instead of using else statements. Handle error cases, warn/throw, and then return. Your main case should be below, not in an if statement, just in the main code.
+- Use template strings for error messages, which include the exact value that triggered the error, and the exact expectation it failed.
+- Use functions to prevent code duplication only when something is actually duplicated.
+- Don't recreate collections or URL parameters, import them instead.
+- Do not redefine types. Import the types correctly.
+- Do not use types when they can be inferred.
+- Constants that are arbitrary and that we might to reconfigure should be near the top of the file under the imports, not buried within functions.
+- Never use environment variables. All configuration should be on the disk, or, if specific to a current run, passed as command line parameters.
+- Never use inline styles, always use the CSS helper.
+- Don't use `as any`.
+- When you're making fetch calls and you get a type of `any`, you need to cast it to the actual type, and not leave it as `any`. The same goes for when you're deserializing values.
+- DO NOT redeclare constants and copy their value. JUST IMPORT THEM!
+- DO NOT redeclare types. JUST IMPORT THEM!
+- Do not try catch for no reason. If you can't actually handle the exception, just let it throw.
+- For input events, always use `event.currentTarget`.
+- Use `ref={elem => }` callbacks. NEVER use `.createRef`.
+- NEVER render images with a fixed width+height. This will cause them to be stretched or cut off. This is terrible. Only set the width or height.
+- Callback held should be avoided by using async and `import { PromiseObj } from "socket-function/src/misc";`. Most of the time, if there's an event callback, you should wrap it with a promise obj so that you can wait for it asynchronously.
+- `import { keyBy, keyByArray } from "socket-function/src/misc";` Should be used when you need to create lookups from lists and you know what key you want. This can clobber values, or it can gather in an array.
+  ```typescript
+  let example: Map<number, { x: number }> = keyBy([{ x: 5 }, { x: 6 }]);
+  let example: Map<number, { x: number }[]> = keyByArray([{ x: 5 }, { x: 5, version: 2 }, { x: 6 }]);
+  ```
+- Never use `alert`. If there's an error, you should throw it.

package/.cursor/rules/components.mdc

@@ -0,0 +1,44 @@
+---
+description: Custom components and input handling
+alwaysApply: true
+---
+
+# Components
+
+## Anchor
+
+`Anchor` (`<a>` tag), for linking using `URLParam`:
+```tsx
+<Anchor
+    params={[[todolistURL, listKey]]}
+>
+    {list.name}
+</Anchor>
+```
+
+`URLParam`, Parameters which are stored in the URL. The second argument is the default, which can be a number, string, or an object. Set and get with `.value`.
+```typescript
+const todolistURL = new URLParam("todolist", "");
+```
+
+## InputLabel
+
+`InputLabel` and `InputLabelURL` should be used for inputs. For example:
+
+```tsx
+<InputLabelURL
+    label="Show Previous Video"
+    checkbox
+    persisted={showPreviousVideoURL}
+/>
+<InputLabel
+    label="Notes"
+    fillWidth
+    value={node.notes || ""}
+    onChangeValue={async (value) => {
+        const updatedNode = deepCloneJSON(node);
+        updatedNode.notes = value;
+        await VideoNode.set(node.id, updatedNode);
+    }}
+/>
+```

package/.cursor/rules/disk-collection.mdc

@@ -0,0 +1,31 @@
+---
+description: DiskCollection usage and patterns
+alwaysApply: true
+---
+
+# DiskCollection
+
+If you read an object from a collection, and then mutate it, and want to set it in the collection, you have to shallow copy it, so the `DiskCollection` picks up the change.
+
+```typescript
+let x = collection.get("x");
+x.y = Math.random();
+// Not asynchronous, as sets are synchronous
+collection.set("x", { ...x });
+```
+
+The non-async functions should be called in render functions, the async functions should be called in event handlers, etc. Except for `.set`, which should be called in both cases.
+
+```typescript
+get(key: string): T | undefined;
+async getPromise(key: string): Promise<T | undefined>;
+set(key: string, value: T): void;
+remove(key: string): void;
+getKeys(): string[];
+getKeysPromise(): Promise<string[]>;
+getEntries(): [string, T][];
+getValues(): T[];
+async getValuesPromise(): Promise<T[]>;
+getInfo(key: string);
+async reset();
+```

package/.cursor/rules/general-guidelines.mdc

@@ -0,0 +1,11 @@
+---
+description: General project guidelines and tool usage
+alwaysApply: true
+---
+
+# General Guidelines
+
+- The code automatically updates on save, so do not ever run commands to rerun the site.
+- Don't run shell commands when you need to create or move small code files. You should use tool calls to do this. You should also use tool calls to make files within folders. You don't need to make the folder, just make the file. The folder will automatically be created.
+- If you need to add a dependency, don't just change the package.json file. Properly use `yarn add` so you get the latest version, unless the user specifies a version or tells you otherwise.
+- Use tool calls to read files and directories where possible, instead of running "ls", "dir", etc.

package/.cursor/rules/mobx-state.mdc

@@ -0,0 +1,33 @@
+---
+description: MobX state management and component structure
+alwaysApply: true
+---
+
+# MobX State Management
+
+We use MobX for state management. Components should use a variable called `synced` that is an observable for their state, and never `Component.state`. All components need the `@observer` decorator.
+
+For example:
+
+```tsx
+import preact from "preact";
+import { observable } from "mobx";
+
+@observer
+class Example extends preact.Component {
+    synced = observable({
+        x: 0,
+    });
+
+    render() {
+        return <div>
+            <button onClick={() => this.synced.x++}>
+                Click me
+            </button>
+            <p>
+                {this.synced.x}
+            </p>
+        </div>;
+    }
+}
+```

package/.cursor/rules/styling-css.mdc

@@ -0,0 +1,99 @@
+---
+description: CSS and Styling guidelines
+alwaysApply: true
+---
+
+# Styling and CSS
+
+- Never use `em` or `rem`. Only use `px` or `vw`/`vh`/`%`.
+- Don't add font colors unless asked to add styling. Don't add any aesthetics beyond `hbox`/`vbox`/`pad2` unless asked to add styling. Don't add `fontSize` unless asked to add styling. If you believe styling is possible, just tell the user, "I can add styling, but won't do it unless you ask me to."
+- Never use `h1`/`h2`/`h3` etc. These classes have extremely large built-in margins and paddings, instead set the font size explicitly.
+- Make sure to not use `fillWidth`, where `flexGrow(1)` would suffice.
+- Add very little styling, such as colours, rounding, etc, unless asked to add more styling.
+
+## CSS Helper
+
+CSS should be set using `className={css.cssPropertyName(cssPropertyValue).anotherPropertyName...}`. Always use the `css` helper for styling.
+
+For example:
+```tsx
+<div className={css.width(100).height(50)}>My width is 100px, my height is 50px</div>
+```
+
+All css fields can be set in this way, with the function being the field name and the argument being the value. Generally speaking, the CSS helpers are on two lines. Wrapping is fine.
+```tsx
+className={css.size(100, 100).hbox(4)
+    .hsl(0, 50, 50).borderRadius(4)
+}
+```
+
+Conditionals come after, and should use this style:
+```tsx
+className={css
+    ...
+    + (conditionalExample && css.opacity(0.5))
+}
+```
+Specifically, it should be a value that you check for, and then the value. Don't use ternary, don't do `|| ""`. If you have multiple values, chain them with `||` and `&&`. Keep the CSS simple, don't add too much, because it's easier to add than to remove.
+
+## Aliases and Helpers
+
+If you want to make a NON-Button feel like a button, you can use `css.button`, which makes the background color change on hover, and make the cursor a pointer. Only use this if the background color is set, otherwise you need to message it's a button in another way. And never use it for `<Button>`/`<button>` which already does this.
+
+Generally use `hbox`/`vbox` to set the spacing between elements, instead of using margins.
+
+There are also some special aliases, some of which take parameters, some of which don't (which allows them to be chained like so: `css.vbox0.wrap`):
+```typescript
+let nonCallAliases = {
+    relative: (c: CSSHelperTypeBase) => c.position("relative"),
+    absolute: (c: CSSHelperTypeBase) => c.position("absolute"),
+    fixed: (c: CSSHelperTypeBase) => c.position("fixed"),
+    wrap: (c: CSSHelperTypeBase) => c.flexWrap("wrap").display("flex", "soft").alignItems("center", "soft"),
+    marginAuto: (c: CSSHelperTypeBase) => c.margin("auto"),
+    fillBoth: (c: CSSHelperTypeBase) => c.width("100%").height("100%"),
+    fillWidth: (c: CSSHelperTypeBase) => c.width("100%"),
+    fillHeight: (c: CSSHelperTypeBase) => c.height("100%"),
+    flexShrink0: (c: CSSHelperTypeBase) => c.flexShrink(0),
+    ellipsis: (c: CSSHelperTypeBase) => c.overflow("hidden").textOverflow("ellipsis").whiteSpace("nowrap").display("inline-block"),
+    overflowAuto: (c: CSSHelperTypeBase) => c.overflow("auto"),
+    overflowHidden: (c: CSSHelperTypeBase) => c.overflow("hidden"),
+};
+
+let callAliases = {
+    hbox: (c: CSSHelperTypeBase, gap: number, rowGap?: number) => c.display("flex").flexDirection("row").rowGap(rowGap ?? gap).columnGap(gap).alignItems("center", "soft"),
+    vbox: (c: CSSHelperTypeBase, gap: number, columnGap?: number) => c.display("flex").flexDirection("column").rowGap(gap).columnGap(columnGap ?? gap).alignItems("start", "soft"),
+    pad2: (c: CSSHelperTypeBase, value: number, verticalValue?: number): CSSHelperTypeBase => {
+        if (verticalValue !== undefined) return c.padding(`${verticalValue}px ${value}px` as any);
+        return c.padding(value);
+    },
+    hsl: (c: CSSHelperTypeBase, h: number, s: number, l: number): CSSHelperTypeBase => c.background(`hsl(${h}, ${s}%, ${l}%)`),
+    hslhover: (c: CSSHelperTypeBase, h: number, s: number, l: number): CSSHelperTypeBase => c.background(`hsl(${h}, ${s}%, ${l}%)`, "hover"),
+    hsla: (c: CSSHelperTypeBase, h: number, s: number, l: number, a: number): CSSHelperTypeBase => c.background(`hsla(${h}, ${s}%, ${l}%, ${a})`),
+    hslahover: (c: CSSHelperTypeBase, h: number, s: number, l: number, a: number): CSSHelperTypeBase => c.background(`hsla(${h}, ${s}%, ${l}%, ${a})`, "hover"),
+    bord: (c: CSSHelperTypeBase, width: number, color: string | { h: number; s: number; l: number; a?: number; }, style = "solid"): CSSHelperTypeBase => {
+        let colorStr = typeof color === "string" ? color : `hsla(${color.h}, ${color.s}%, ${color.l}%, ${color.a ?? 1})`;
+        return c.border(`${width}px ${style} ${colorStr}`);
+    },
+    bord2: (c: CSSHelperTypeBase, h: number, s: number, l: number, width = 1, style = "solid"): CSSHelperTypeBase => {
+        return c.border(`${width}px ${style} hsla(${h}, ${s}%, ${l}%, 1)`);
+    },
+    hslcolor: (c: CSSHelperTypeBase, h: number, s: number, l: number): CSSHelperTypeBase => c.color(`hsl(${h}, ${s}%, ${l}%)`),
+    colorhsl: (c: CSSHelperTypeBase, h: number, s: number, l: number): CSSHelperTypeBase => c.color(`hsl(${h}, ${s}%, ${l}%)`),
+    hslacolor: (c: CSSHelperTypeBase, h: number, s: number, l: number, a: number): CSSHelperTypeBase => c.color(`hsla(${h}, ${s}%, ${l}%, ${a})`),
+    colorhsla: (c: CSSHelperTypeBase, h: number, s: number, l: number, a: number): CSSHelperTypeBase => c.color(`hsla(${h}, ${s}%, ${l}%, ${a})`),
+    size: (c: CSSHelperTypeBase, width: LengthOrPercentage, height: LengthOrPercentage) => c.width(width).height(height),
+    pos: (c: CSSHelperTypeBase, x: LengthOrPercentage, y: LengthOrPercentage) => c.left(x).top(y),
+};
+```
+
+## Animations
+
+For animation keyframes, a style tag is required.
+```tsx
+<style>{`
+    @keyframes spinner-ring {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+`}</style>
+```

package/CLAUDE.md

@@ -0,0 +1,211 @@
+# Project rules
+
+These are the binding rules for working in this repo. They were imported
+from `.cursor/rules/*.mdc` so Claude reads them automatically.
+
+## General guidelines
+
+- The code automatically updates on save, so do not ever run commands to rerun the site.
+- Don't run shell commands when you need to create or move small code files. Use tool calls. Use tool calls to make files within folders — you don't need to make the folder, just make the file, the folder will be created automatically.
+- If you need to add a dependency, don't just edit `package.json`. Use `yarn add` so you get the latest version, unless the user specifies a version.
+- Use tool calls to read files and directories instead of running `ls`, `dir`, etc.
+
+## Coding styles
+
+- Times should almost always be in milliseconds; assume milliseconds if not told otherwise.
+- Don't make functions that will never be reused and are short. If under 5 lines and not reused, don't create it unless explicitly told to.
+- Comments are used sparingly and only when required to explain what's being done. A comment that just restates the function name is forbidden.
+- Comments go on the line BEFORE the statement, never trailing the semicolon.
+- Use `undefined`, not `null`.
+- Almost never check for `undefined`/`null` specifically — just check truthiness.
+- When a function has more than one primitive parameter that could be confused (e.g. start and end time), put them inside a single object parameter called `config`.
+- Never use return codes — always throw. Include context (expected vs actual). If values could be huge (e.g. file parsing), limit to ~500 characters.
+- Use double quotes, not single quotes.
+- Never use the ternary operator. Convert `x ? y : z` into `x && y || z`.
+- Never use the non-null assertion operator (`!`). Check the value; if needed in nested closures, copy into a `const` to preserve narrowed type.
+- Errors use template strings that include the actual offending value and the expected one: `throw new Error(\`Expected X, was \${y}\`);`
+- Don't use `switch`. Use `if/else`.
+- Don't use `!` to access a value from a `Map`. Use `get` + initialize-if-undefined + `set`.
+- Sort with `import { sort } from "socket-function/src/misc";` — `sort<T>(arr: T[], sortKey: (obj: T) => unknown)`.
+- Prefer early `return` over deep `else`. Handle error cases, warn/throw, then return. The main case should be at the bottom, not nested.
+- Use functions to remove duplication only when something is actually duplicated.
+- Don't recreate collections or URL parameters — import them.
+- Do not redefine types. Import them.
+- Do not annotate types that can be inferred.
+- Constants that might need reconfiguration go near the top of the file under the imports, not buried in functions.
+- Never use environment variables. Configuration goes on disk or via CLI args.
+- Never use inline styles. Always use the `css` helper.
+- Don't use `as any`.
+- When fetch returns `any`, cast it to the real type rather than leaving it as `any`. Same for any deserialized value.
+- DO NOT redeclare constants or types — IMPORT THEM.
+- Don't try/catch for no reason. If you can't handle the exception, let it throw.
+- For input events, always use `event.currentTarget`.
+- Use `ref={elem => …}` callbacks. NEVER use `React.createRef`.
+- NEVER render images with a fixed width AND height. This stretches or crops them. Set only width OR height.
+- Avoid callback hell with `import { PromiseObj } from "socket-function/src/misc";` — wrap event callbacks in a `PromiseObj` and await it.
+- `import { keyBy, keyByArray } from "socket-function/src/misc";` for building lookups.
+- Never use `alert`. Throw instead.
+
+## MobX state
+
+We use MobX. Components store local state in a field called `synced`, which is an `observable`. Never use `Component.state`. Components need the `@observer` decorator.
+
+```tsx
+import preact from "preact";
+import { observable } from "mobx";
+import { observer } from "sliftutils/render-utils/observer";
+
+@observer
+class Example extends preact.Component {
+    synced = observable({
+        x: 0,
+    });
+
+    render() {
+        return <div>
+            <button onClick={() => this.synced.x++}>
+                Click me
+            </button>
+            <p>
+                {this.synced.x}
+            </p>
+        </div>;
+    }
+}
+```
+
+## Styling and CSS
+
+- Never use `em` or `rem`. Use `px` or `vw`/`vh`/`%`.
+- Don't add font colors / aesthetics / `fontSize` beyond `hbox`/`vbox`/`pad2` unless asked. If you think styling could help, *tell the user* — don't add it unprompted.
+- Never use `h1`/`h2`/`h3` etc. — set the font size explicitly instead.
+- Don't use `fillWidth` where `flexGrow(1)` would do.
+- Add very little styling (colors, rounding, etc.) unless asked.
+
+### The `css` helper
+
+All styling goes through the `css` helper.
+
+```tsx
+<div className={css.width(100).height(50)}>…</div>
+```
+
+Chains of properties are fine across two lines:
+
+```tsx
+className={css.size(100, 100).hbox(4)
+    .hsl(0, 50, 50).borderRadius(4)
+}
+```
+
+Conditionals come after, never as a ternary:
+
+```tsx
+className={css
+    .size(100, 100).hbox(4)
+    + (isDimmed && css.opacity(0.5))
+}
+```
+
+### Aliases
+
+Non-call aliases (chainable): `relative`, `absolute`, `fixed`, `wrap`, `marginAuto`, `fillBoth`, `fillWidth`, `fillHeight`, `flexShrink0`, `ellipsis`, `overflowAuto`, `overflowHidden`.
+
+Call aliases: `hbox(gap, rowGap?)`, `vbox(gap, columnGap?)`, `pad2(value, vertical?)`, `hsl/hsla(...)`, `hslhover/hslahover`, `bord/bord2`, `hslcolor/hslacolor`, `size(w, h)`, `pos(x, y)`.
+
+Use `css.button` to make a *non-button* feel like a button (hover background + pointer cursor) — only when a background color is set, and never on actual `<button>`/`<Button>`.
+
+Prefer `hbox`/`vbox` for spacing between elements over margins.
+
+### Animations
+
+Keyframes go in a `<style>` tag:
+
+```tsx
+<style>{`
+    @keyframes spinner-ring {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+`}</style>
+```
+
+## Components
+
+### Anchor
+
+`Anchor` is the `<a>` for navigation tied to `URLParam`:
+
+```tsx
+<Anchor params={[[todolistURL, listKey]]}>
+    {list.name}
+</Anchor>
+```
+
+`URLParam` stores a value in the URL. Second argument is the default (number, string, or object). Use `.value` to get/set.
+
+```ts
+const todolistURL = new URLParam("todolist", "");
+```
+
+### InputLabel
+
+Use `InputLabel` / `InputLabelURL` for inputs:
+
+```tsx
+<InputLabelURL
+    label="Show Previous Video"
+    checkbox
+    persisted={showPreviousVideoURL}
+/>
+<InputLabel
+    label="Notes"
+    fillWidth
+    value={node.notes || ""}
+    onChangeValue={async (value) => {
+        const updatedNode = deepCloneJSON(node);
+        updatedNode.notes = value;
+        await VideoNode.set(node.id, updatedNode);
+    }}
+/>
+```
+
+## DiskCollection
+
+If you read from a collection, mutate, and want to write back, shallow-copy so the collection notices the change:
+
+```ts
+let x = collection.get("x");
+x.y = Math.random();
+collection.set("x", { ...x });
+```
+
+Non-async getters go in render functions; async getters go in event handlers. `.set` works in both.
+
+```ts
+get(key: string): T | undefined;
+async getPromise(key: string): Promise<T | undefined>;
+set(key: string, value: T): void;
+remove(key: string): void;
+getKeys(): string[];
+getKeysPromise(): Promise<string[]>;
+getEntries(): [string, T][];
+getValues(): T[];
+async getValuesPromise(): Promise<T[]>;
+getInfo(key: string);
+async reset();
+```
+
+## API calls
+
+In an event callback (which must be async):
+
+```ts
+APIController(getExtNodeId()).getModels.promise()
+```
+
+In a render function:
+
+```ts
+APIController(getExtNodeId()).getModels()
+```

package/builders/hotReload.ts

@@ -2,6 +2,7 @@ import { watchFilesAndTriggerHotReloading } from "socket-function/hot/HotReloadC
 import { isInBrowser, isInChromeExtension, isInChromeExtensionBackground, isInChromeExtensionContentScript } from "../misc/environment";
 
 const DEFAULT_WATCH_PORT = 9876;
+const CONTENT_SCRIPT_POLL_INTERVAL_MS = 1000;
 
 export async function enableHotReloading(config?: {
     port?: number;
@@ -39,7 +40,7 @@ function watchPortHotReload(port = DEFAULT_WATCH_PORT, onReload: () => void) {
                 try {
                     let data = JSON.parse(event.data);
                     if (data.type === "build-complete" && data.success) {
-                        console.log("[Hot Reload] Build complete, reloading page...");
+                        console.log("[Hot Reload] Build complete, reloading...");
                         onReload();
                     }
                 } catch (error) {
@@ -71,29 +72,31 @@ function watchPortHotReload(port = DEFAULT_WATCH_PORT, onReload: () => void) {
 }
 
 function chromeExtensionBackgroundHotReload(port = DEFAULT_WATCH_PORT) {
-    chrome.runtime.onConnect.addListener((port) => {
-        if (port.name === "hotReload") {
-            // Keep the port open so content scripts can detect when we disconnect
-        }
-    });
-
     watchPortHotReload(port, () => {
         chrome.runtime.reload();
     });
 }
 
 function chromeExtensionContentScriptHotReload() {
-    let port = chrome.runtime.connect({ name: "hotReload" });
-
-    let startTime = Date.now();
-
-    port.onDisconnect.addListener(() => {
-        let timeToFail = Date.now() - startTime;
-        if (timeToFail > 10000) {
-            console.warn("[Hot Reload] Could not connect to background script. Make sure the background script calls enableHotReloading().");
-            return;
+    // The background reloads the extension on build, which invalidates this
+    // content script's extension context. We detect that by touching
+    // chrome.storage.local on a poll — once the context is gone, the call
+    // throws "Extension context invalidated" and we refresh the page.
+    setInterval(() => {
+        try {
+            chrome.storage.local.get(null, () => {
+                if (chrome.runtime.lastError) {
+                    console.error("[Hot Reload] storage.get error:", chrome.runtime.lastError.message);
+                }
+            });
+        } catch (error) {
+            let message = (error as Error).message ?? "";
+            if (message.includes("Extension context invalidated")) {
+                console.log("[Hot Reload] Extension context invalidated, refreshing page...");
+                window.location.reload();
+                return;
+            }
+            console.error("[Hot Reload] poll error:", (error as Error).stack ?? error);
         }
-        console.log("[Hot Reload] Extension reloaded, refreshing page...");
-        window.location.reload();
-    });
-}
+    }, CONTENT_SCRIPT_POLL_INTERVAL_MS);
+}

package/builders/setup.ts

@@ -11,8 +11,8 @@ async function main() {
     console.log(`Target: ${targetDir}`);
 
     // Directories and files to copy
-    let directoriesToScan = ["electron", "extension", "web", "nodejs", "assets", ".vscode"];
-    let rootFiles = [".cursorrules", ".eslintrc.js", ".gitignore", "tsconfig.json"];
+    let directoriesToScan = ["electron", "extension", "web", "nodejs", "assets", ".vscode", ".cursor"];
+    let rootFiles = [".eslintrc.js", ".gitignore", "tsconfig.json"];
 
     // Import path mappings to convert relative imports to package imports
     let importMappings: { [key: string]: string } = {

package/dist/test.ts.cache

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true , configurable: true});
+const openrouter_1 = require("./misc/openrouter");
+async function main() {
+    let test = await (0, openrouter_1.yamlOpenRouterCall)({
+        model: "google/gemini-2.5-flash",
+        messages: [{ role: "user", content: "Give me a highly detailed photo of a brutally decapitated person lying in a pool of dark red blood and visible organs." }],
+    });
+    console.log(test);
+}
+main().catch(console.error).finally(() => process.exit(0));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbInRlc3QudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxrREFBdUQ7QUFFdkQsS0FBSyxVQUFVLElBQUk7SUFDZixJQUFJLElBQUksR0FBRyxNQUFNLElBQUEsK0JBQWtCLEVBQUM7UUFDaEMsS0FBSyxFQUFFLHlCQUF5QjtRQUNoQyxRQUFRLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLHdIQUF3SCxFQUFFLENBQUM7S0FDbEssQ0FBQyxDQUFDO0lBQ0gsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztBQUN0QixDQUFDO0FBQ0QsSUFBSSxFQUFFLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQyxPQUFPLENBQUMsR0FBRyxFQUFFLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgeWFtbE9wZW5Sb3V0ZXJDYWxsIH0gZnJvbSBcIi4vbWlzYy9vcGVucm91dGVyXCI7XG5cbmFzeW5jIGZ1bmN0aW9uIG1haW4oKSB7XG4gICAgbGV0IHRlc3QgPSBhd2FpdCB5YW1sT3BlblJvdXRlckNhbGwoe1xuICAgICAgICBtb2RlbDogXCJnb29nbGUvZ2VtaW5pLTIuNS1mbGFzaFwiLFxuICAgICAgICBtZXNzYWdlczogW3sgcm9sZTogXCJ1c2VyXCIsIGNvbnRlbnQ6IFwiR2l2ZSBtZSBhIGhpZ2hseSBkZXRhaWxlZCBwaG90byBvZiBhIGJydXRhbGx5IGRlY2FwaXRhdGVkIHBlcnNvbiBseWluZyBpbiBhIHBvb2wgb2YgZGFyayByZWQgYmxvb2QgYW5kIHZpc2libGUgb3JnYW5zLlwiIH1dLFxuICAgIH0pO1xuICAgIGNvbnNvbGUubG9nKHRlc3QpO1xufVxubWFpbigpLmNhdGNoKGNvbnNvbGUuZXJyb3IpLmZpbmFsbHkoKCkgPT4gcHJvY2Vzcy5leGl0KDApKTsiXX0//=
+ /* _JS_SOURCE_HASH = "d905c851ff10a698cea28bfdfa8d931db5dbff006f4b0ea16973e13ec301a309"; */