bhjsdev · ohxyz · Jun 9, 2026 · Jun 4, 2026 · Jun 5, 2026 · Jun 5, 2026
@@ -1,3 +1,3 @@
 VITE_DEFAULT_SASH_MIN_WIDTH=100
 VITE_DEFAULT_SASH_MIN_HEIGHT=100
-VITE_DEFAULT_DEBUG=false
+VITE_DEBUG=false
@@ -1,9 +1,31 @@
 # CLAUDE.md
 
-## Git rules
+## Git
 
-- **Never `git commit` or `git push` unless explicitly asked in that same message.** Approval doesn't carry over — ask each time.
+- **Don't `git commit` or `git push` unless the same message explicitly asks for it.** Approval doesn't carry over — ask each time.
+- When committing, print the commit message in your reply.
+- Type commits that only touch `dev/` as plain `chore:` — never `feat:`/`fix:`, no `(dev)` scope. It's test scaffolding, not library source (see [Dev pages](#dev-pages-dev)).
 
 ## Testing
 
-- Don't run tests or build after completing a feature or fixing a bug unless asked.
+- Don't run tests or builds after finishing a feature or fix unless asked.
+
+## Naming
+
+- Suffix DOM-element variables with `El`, and keep the noun specific: `activeGlassEl`, not `activeEl`. Name element accessors `get<Noun>` to match (e.g. `getActiveGlass`).
+- Name constants for the context they apply to, not just the quantity: `MIN_RESIZE_WIDTH`, not `MIN_WIDTH` — so they aren't confused with unrelated values like creation-time defaults.
+- Prefer established domain/library terms and match their conventional meaning. Don't pick a name whose well-known meaning differs from what the code does — e.g. jQuery's `unwrap` removes the wrapper in place, so `extractChildNodes` is clearer for moving children into a fragment.
+
+## Comments
+
+- Comment only when it adds something the code doesn't already say.
+- Keep comments to 2 lines max, 100 chars per line. If one genuinely needs more, prefix it with `RATIONAL:`.
+
+## Debug sentinel values
+
+- Leave repeating-digit literals like `222` and `333` in default/fallback paths alone — they're intentional debug sentinels, not magic numbers. Don't rename them to constants or replace them. If one surfaces in a lower-level API or the rendered output, a guard upstream was bypassed and a real value leaked — investigate that instead.
+
+## Dev pages (`dev/`)
+
+- Treat `dev/` as test scaffolding for manually exercising features/bugs, not shippable library source.
+- Put interactive testing items (buttons, inputs, forms, selects, etc.) in the `.html` file, not the `.js`. The paired `.js` queries them with `document.querySelector(...)` and wires up behavior with `addEventListener`. See `dev/features/add-remove-pane.html` / `add-remove-pane.js` for the pattern.
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="./bwin-detached-glass.js"></script>
+    <title>Detached Glass</title>
+  </head>
+
+  <body>
+    <main>
+      <h2>BinaryWindow - detached glass</h2>
+      <label>offset <input type="number" id="offset" value="0" /></label>
+      <label>offsetX <input type="number" id="offsetX" /></label>
+      <label>offsetY <input type="number" id="offsetY" /></label>
+      <div>
+        <button id="add-default">Add default</button>
+        <button data-position="top-left">Add top-left</button>
+        <button data-position="top-right">Add top-right</button>
+        <button data-position="bottom-left">Add bottom-left</button>
+        <button data-position="bottom-right">Add bottom-right</button>
+        <button data-position="center">Add center</button>
+      </div>
+      <section id="container"></section>
+    </main>
+  </body>
+</html>
@@ -0,0 +1,135 @@
+import {
+  BinaryWindow,
+  DEFAULT_GLASS_ACTIONS,
+  BUILTIN_ACTIONS,
+  DEFAULT_DETACHED_GLASS_ACTIONS,
+} from '../../src';
+
+const elem = document.createElement('div');
+const zIndex = 100;
+
+elem.textContent = 'z-index: ' + zIndex;
+elem.style.backgroundColor = 'hsl(120 100% 90%)';
+elem.style.width = '200px';
+elem.style.height = '400px';
+elem.style.position = 'absolute';
+elem.style.top = '0';
+elem.style.left = '0';
+elem.style.opacity = '0.8';
+elem.style.zIndex = zIndex;
+
+const elem2 = document.createElement('div');
+elem2.textContent = 'z-index: ' + (zIndex + 1);
+elem2.style.backgroundColor = 'hsl(240 100% 90%)';
+elem2.style.width = '300px';
+elem2.style.height = '400px';
+elem2.style.position = 'absolute';
+elem2.style.top = '50px';
+elem2.style.left = '50px';
+elem2.style.opacity = '0.8';
+elem2.style.zIndex = zIndex + 1;
+
+const parentElem = document.createElement('div');
+parentElem.style.position = 'relative';
+parentElem.appendChild(elem);
+parentElem.appendChild(elem2);
+
+const settings = {
+  width: 777,
+  height: 444,
+  actions: [BUILTIN_ACTIONS],
+  children: [
+    {
+      position: 'left',
+      size: '40%',
+      children: [
+        {
+          position: 'top',
+          size: '50%',
+          content: createGlassContent('top-left'),
+          title: 'Top-left pane',
+        },
+        {
+          position: 'bottom',
+          size: '50%',
+          content: createGlassContent('bottom-left'),
+          title: 'Bottom-left pane',
+        },
+      ],
+    },
+    {
+      children: [
+        {
+          position: 'top',
+          size: '30%',
+          content: createGlassContent('top-right'),
+          title: 'Top-right pane',
+        },
+        { position: 'bottom', size: '70%', content: parentElem, title: 'Bottom pane' },
+      ],
+    },
+  ],
+};
+
+const bwin = new BinaryWindow(settings);
+bwin.mount(document.querySelector('#container'));
+
+// Distinguishable, interactive content so the glass body is visible while dragging.
+function createGlassContent(label) {
+  const wrapEl = document.createElement('div');
+  wrapEl.style.padding = '8px';
+  wrapEl.style.fontFamily = 'sans-serif';
+  wrapEl.style.fontSize = '12px';
+
+  const headingEl = document.createElement('h3');
+  headingEl.textContent = `Content: ${label}`;
+  headingEl.style.margin = '0 0 8px';
+  wrapEl.appendChild(headingEl);
+
+  const inputEl = document.createElement('input');
+  inputEl.type = 'text';
+  inputEl.placeholder = 'type here…';
+  inputEl.style.width = '100%';
+  inputEl.style.boxSizing = 'border-box';
+  inputEl.style.marginBottom = '8px';
+  wrapEl.appendChild(inputEl);
+
+  const listEl = document.createElement('ul');
+  listEl.style.margin = '0';
+  listEl.style.paddingLeft = '18px';
+  for (let i = 1; i <= 8; i += 1) {
+    const itemEl = document.createElement('li');
+    itemEl.textContent = `${label} — row ${i}`;
+    listEl.appendChild(itemEl);
+  }
+  wrapEl.appendChild(listEl);
+
+  return wrapEl;
+}
+
+const offsetInput = document.querySelector('#offset');
+const offsetXInput = document.querySelector('#offsetX');
+const offsetYInput = document.querySelector('#offsetY');
+
+// Empty input → undefined, so genStylesByPosition can fall back to `offset`.
+const toOffset = (input) => (input.value === '' ? undefined : Number(input.value));
+
+document.querySelectorAll('button[data-position]').forEach((button) => {
+  button.addEventListener('click', () => {
+    bwin.addDetachedGlass({
+      position: button.dataset.position,
+      title: button.dataset.position,
+      offset: Number(offsetInput.value),
+      offsetX: toOffset(offsetXInput),
+      offsetY: toOffset(offsetYInput),
+      content: createGlassContent(button.dataset.position),
+    });
+  });
+});
+
+// No options → exercises the DetachedGlass constructor defaults.
+document.querySelector('#add-default').addEventListener('click', () => {
+  bwin.addDetachedGlass({ content: createGlassContent('default') });
+});
+
+// document.querySelector('#add-default').click();
@@ -15,7 +15,7 @@
   <body>
     <nav>
       <menu class="_menu">
-        <li><button id="_toggle-bg">Toggle BG</button></li>
+        <li><button id="_toggle-theme">Toggle Theme</button></li>
       </menu>
     </nav>
     <iframe id="_frame"></iframe>

@@ -45,13 +45,23 @@ function route() {
 window.addEventListener('hashchange', route);
 route();
 
-navEl.querySelector('#_toggle-bg').addEventListener('click', () => {
-  const bgColor = 'hsl(0 0 90)';
-  const bodyEl = iframeEl.contentDocument?.body;
+navEl.querySelector('#_toggle-theme').addEventListener('click', () => {
+  const frameDoc = iframeEl.contentDocument;
+  const windowEls = frameDoc?.querySelectorAll('bw-window');
 
-  if (!bodyEl) return;
+  if (!windowEls?.length) return;
 
-  // Compare against '' rather than bgColor: the CSSOM re-serializes colors on
-  // read (e.g. hsl() -> rgb()), so equality with the original string fails.
-  bodyEl.style.backgroundColor = bodyEl.style.backgroundColor ? '' : bgColor;
+  const goDark = windowEls[0].getAttribute('theme') !== 'dark';
+
+  windowEls.forEach((windowEl) => {
+    if (goDark) {
+      windowEl.setAttribute('theme', 'dark');
+    } else {
+      windowEl.removeAttribute('theme');
+    }
+  });
+
+  frameDoc.body.style.backgroundColor = goDark ? 'hsl(0 0% 12%)' : '';
+  frameDoc.body.style.color = goDark ? 'hsl(0 0% 90%)' : '';
+  frameDoc.documentElement.style.colorScheme = goDark ? 'dark' : '';
 });
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}