on_the_money 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,65 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [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.0] — 2026-05-18
+
+### Breaking
+
+- **`otm-lint` reduced to four HTML / cross-file rules.** The bundled linter no longer enforces JS or CSS rules. Twelve rules dropped: JS-001, JS-003, JS-009, JS-011, JS-015, JS-016, JS-019, HTML-014, HTML-018, HTML-020, HTML-021, HTML-022, CSS-006, CSS-012. Their enforcement now lives in `eslint-plugin-otm`, `stylelint-plugin-otm`, the stylelint built-in `declaration-no-important`, and recommended companions like `eslint-plugin-no-unsanitized` and `html-validate`.
+- **`otm-lint` only scans `.html` files now.** JS and CSS files are silently ignored by the binary; route them through ESLint and Stylelint.
+- **Dropped runtime dependencies** `espree` and `css-tree` from devDependencies; the linter no longer parses JS/CSS.
+
+### Added
+
+- **`eslint-plugin-otm`** with five rules: `prefer-on`, `prefer-the-set`, `flat-state`, `prefer-submit`, `no-style-mutation`. Distributed via `on_the_money/eslint-plugin`.
+- **`eslint-config-otm`** shareable flat-config at `on_the_money/eslint-config`.
+- **`stylelint-plugin-otm`** with one rule: `prefer-attribute-selector`. Distributed via `on_the_money/stylelint-plugin`.
+- **`stylelint-config-otm`** at `on_the_money/stylelint-config` — enables our rule plus stylelint's built-in `declaration-no-important`.
+
+### Changed
+
+- **README** linter section rewritten to describe the three-tool stack (ESLint + Stylelint + otm-lint) instead of a single bundled linter.
+- **Linter `flat-state` rule** now catches `the({ nested: ... })` single-arg batch case, which the old `Linter.js` missed.
+
+### Rationale
+
+The old `Linter.js` was an attempt at a one-tool-fits-all frontend linter that reimplemented innerHTML detection, !important banning, and inline-handler banning — all of which existing ecosystem tools do better, with editor LSP integration, inline disables, configurable severity, and SARIF reporters. The reorientation positions `otm-lint` as a small auxiliary tool for the cross-file checks no other ecosystem covers, while the heavy lifting goes to ESLint + Stylelint + html-validate where it already belongs.
+
+## [0.2.0] — 2026-05-18
+
+### Breaking
+
+- **Removed import-time auto-handshake.** Importing `on_the_money` is now side-effect-free. Consumers must call `await the.boot()` at their entry point. The old auto-call performed a network fetch and DOM mutation on import.
+- **Removed `the.ready` promise.** Boot is explicit now; await `the.boot()` directly.
+- **Removed `the(form)` polymorphic shape.** Form extraction is only via `the.form(formEl)`.
+- **`the(string, undefined)` now throws.** Two args means set; missing val is a contract violation. Previously silently coerced to the string `"undefined"`.
+
+### Added
+
+- **`the.boot(options?)`** explicit init. Accepts `{ signal, locales, dictionary, namespace }` for abort, override path, inline dictionary, and configurable localStorage prefix.
+- **`the.flat(obj, sep = "_")`** recursive flatten helper. Composes `the.form` output into `the(el, {...})` batch input.
+- **`the.dictionary`** and **`the.locale`** as live accessors on the exported `the`. Hot-swap supported.
+- **`on()` returns an unsubscribe function.** `const off = on(...); off()` detaches the listener.
+- **Boolean coercion in `the()` setter.** `the(el, "checked", true)` writes `"true"`; `false` writes `"false"`. Eliminates the truthy-`"false"`-string footgun.
+- **`otm-lint` default-excludes** `node_modules`, `dist`, `.git`, and dotdirs. Consumer projects no longer get drowned in dependency false-positives.
+
+### Changed
+
+- **Framing.** "Anti-Framework" rhetoric dropped. Now self-describes as an opinionated, attribute-driven, standards-oriented modern framework.
+- **`the(...)` dispatch** rewritten on a single Element-first-arg disambiguator. Three disjoint first-arg types (Element / string / plain Object) eliminate the prior ambiguity that produced silent mis-dispatch on `the("k", undefined)`.
+- **`route()`** resolves `href` via `new URL(link.href, window.location.href)` instead of reading the anchor's `.origin`/`.pathname` IDL properties. Robust under non-browser DOM implementations.
+- **Tests co-located** next to source (`src/core/On.test.js`, etc.). Integration suite remains at `test/integration.test.js`.
+- **`exports."."`** points at the built `dist/on_the_money.min.js`; raw ESM source available as `./src` subpath.
+- **README** rewritten as an LLM authoring context document.
+
+### Fixed
+
+- Coverage thresholds adjusted from 80/80/100 to 50/50/50 (the global engineering baseline) — the 100% function gate was demanding test acrobatics for paths like `route()` that need a full window.
+- `the.form` no longer requires `FormData` global; uses `querySelectorAll` over named controls for test environment compatibility.
+
+## [0.1.1] — 2026-03-18
+
+Initial public surface. Auto-handshake, polymorphic `the()` dispatch including `the(form)`, `the.ready` promise.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 PossumTech Laboratories
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,433 @@
+# on_the_money.js
+
+Opinionated, attribute-driven, standards-oriented modern framework for the web. <2KB gzip. Native browser APIs only. ESNext.
+
+State lives in DOM attributes. Reactivity comes from `[data-text]` and `[data-i18n]` selectors. Events use one delegated listener per `(parent, type)` pair. Routing uses the History API. Localization uses `Intl`. There is no virtual DOM, no JSX, no transpilation step, no proprietary tooling. The framework is a thin layer of conventions over the platform.
+
+## Install
+
+```bash
+npm install on_the_money
+```
+
+## Quickstart
+
+A complete two-file app. `index.html` carries semantic structure, `app.js` carries behavior.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title data-i18n="app_title"></title>
+  <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2/css/pico.classless.min.css">
+  <script type="module" src="./app.js"></script>
+</head>
+<body>
+  <main>
+    <h1 data-i18n="app_title"></h1>
+    <p>Hello, <strong data-text="user">friend</strong>.</p>
+    <button data-action="greet">Greet</button>
+  </main>
+</body>
+</html>
+```
+
+```javascript
+// app.js
+import { the, on } from "on_the_money";
+
+await the.boot({
+  dictionary: { app_title: "On The Money" },
+});
+
+on("main", "click", '[data-action="greet"]', () => {
+  the("user", "Alice");
+});
+```
+
+The framework rehydrates body `data-*` and `[data-text]` from `localStorage` on boot; subsequent `the()` writes both the attribute and persist to `localStorage["otm:KEY"]`.
+
+## Pico Classless integration
+
+Pico Classless is the recommended companion stylesheet. It styles semantic HTML directly — no classes, no JS. Include the stylesheet once:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2/css/pico.classless.min.css">
+```
+
+Then write semantic HTML (`<main>`, `<nav>`, `<article>`, `<form>`, `<button>`, `<input>` with `<label>`, etc.). on_the_money's conventions all use `data-*` and `aria-*` attributes, so they layer cleanly under Pico's element-targeted CSS.
+
+## Exports
+
+```javascript
+import { on, the, _t, route, $, $$ } from "on_the_money";
+```
+
+Aliases on `the`: `the.t === _t`, `the.route === route`, `the.form(formEl)`, `the.flat(obj, sep?)`, `the.boot(options?)`.
+Live accessors on `the`: `the.dictionary`, `the.locale`.
+
+## API
+
+### `on(parent, event, selector, fn)` — event delegation
+
+| Arg | Type | Notes |
+| --- | --- | --- |
+| `parent` | `Element \| string \| null` | If string, resolved via `document.querySelector`. If falsy, defaults to `document.body`. |
+| `event` | `string` | Any DOM event name (`"click"`, `"submit"`, `"mounted"`, etc.). |
+| `selector` | `string` | CSS selector matched via `event.target.closest(selector)`. |
+| `fn` | `(event, target) => void` | `target` is the element the selector matched. |
+
+Returns an `() => void` unsubscribe function.
+
+```javascript
+const off = on("#list", "click", "[data-action='delete']", (e, target) => {
+  target.closest("[data-item]").remove();
+});
+off(); // detaches the listener
+```
+
+### `on.emit(el, event, detail)` — `CustomEvent` dispatch
+
+Dispatches a bubbling, cancelable `CustomEvent` on `el`. `el` may be an element or a selector string.
+
+```javascript
+on.emit("#cart", "items-changed", { count: 3 });
+```
+
+### `the(...)` — state
+
+Polymorphic on a single disambiguator: `args[0] instanceof Element`. Three call shapes per scope (get, set, batch).
+
+| Call | Behavior | Returns |
+| --- | --- | --- |
+| `the(key)` | Read body `data-KEY` (or aria-mapped equivalent). | `string \| null` |
+| `the(key, val)` | Write body attribute + `localStorage["otm:KEY"]` + descendant `[data-text="key"]`. | `document.body` |
+| `the({ k: v, ... })` | Batch global write. | `document.body` |
+| `the(el, key)` | Read scoped attribute on `el`. | `string \| null` |
+| `the(el, key, val)` | Write scoped attribute on `el` + descendant `[data-text="key"]`. | `el` |
+| `the(el, { k: v, ... })` | Batch scoped write. | `el` |
+
+- **ARIA mapping** (key → attribute): `expanded`, `selected`, `hidden`, `checked`, `disabled` → `aria-*`. All other keys → `data-*`.
+- **Booleans coerce** to `"true"`/`"false"` inside the setter. `the(el, "checked", true)` writes `"true"`.
+- **Values MUST be flat primitives.** Pass nested objects through `the.flat(...)` first.
+- **`the(key, undefined)` throws.** Two args means set; missing val is a contract violation.
+
+### `the.form(formEl)` — form extraction
+
+Walks `input, select, textarea` descendants. Skips unnamed, disabled, submit/button/reset controls, and unchecked checkboxes/radios. Parses bracket-notation names into a nested object:
+
+```javascript
+the.form(form);
+// <input name="user[name]" value="Alice">     → { user: { name: "Alice" } }
+// <input name="tags[]" value="a">             → { tags: ["a", ...] }
+// <input name="tags[]" value="b">
+```
+
+Returns a **nested** object (matches browser submission semantics). Compose with `the.flat` before feeding to `the(el, {...})`.
+
+### `the.flat(obj, sep = "_")` — nested-to-flat
+
+```javascript
+the.flat({ user: { name: "Alice" }, tags: ["a", "b"] });
+// → { user_name: "Alice", tags_0: "a", tags_1: "b" }
+
+the.flat({ a: { b: 1 } }, ".");
+// → { "a.b": 1 }
+```
+
+Throws on non-object input.
+
+### `the.boot(options?)` — explicit init
+
+Importing the module does **nothing**. Call `the.boot()` at the consumer's entry point.
+
+```javascript
+await the.boot({ signal, locales, dictionary, namespace });
+```
+
+| Option | Type | Behavior |
+| --- | --- | --- |
+| `signal` | `AbortSignal` | Aborts the i18n fetch. |
+| `locales` | `string` | Override the `<meta name="i18n" content>` path. |
+| `dictionary` | `object` | Inline dictionary; skips the fetch entirely. |
+| `namespace` | `string` | Sets `localStorage` prefix to `${namespace}:` (default `otm:`). Must be set before any state ops. |
+
+Boot sequence:
+1. Resolve locale: `?lang=` query → `localStorage["${prefix}lang"]` → `navigator.language`. Writes `the.locale`.
+2. Resolve dictionary: inline `dictionary` → `fetch(${path}/${target}.json)` if `<meta name="i18n">` or `locales` option is present. Falls back through full → base → `data-fallback`.
+3. Replay `localStorage` entries matching the prefix (except `${prefix}lang`) back onto body `data-*` and `[data-text]`.
+4. Run `_t()` to hydrate `[data-i18n]`.
+
+### `_t(key, options)` — `Intl` localization
+
+```javascript
+_t("hello");                                       // string lookup in the.dictionary
+_t("hello", { name: "Alice" });                    // {name} → "Alice"
+_t("items", { qty: 5 });                           // Intl.PluralRules picks { one, other } entry
+_t("price", { val: 9.99, type: "currency" });      // Intl.NumberFormat (USD)
+_t("when", { val: Date.now(), type: "date" });     // Intl.DateTimeFormat
+
+_t(node);                                          // hydrate every [data-i18n] inside node
+_t();                                              // hydrate document.body
+```
+
+Missing dictionary keys preserve existing `textContent` (SEO fallback).
+
+`[data-i18n]` element binding:
+
+```html
+<span data-i18n="cart_items" data-i18n-qty="3"></span>
+<span data-i18n="price" data-i18n-val="9.99" data-i18n-type="currency"></span>
+```
+
+### `route(callback)` — pushState router
+
+```javascript
+route((pathname, search, hash) => {
+  // render whatever fits this route
+});
+```
+
+Fires the callback on initial mount, on `popstate`, on `hashchange`, and on intercepted internal `<a>` clicks. Skips interception for `data-external`, `target="_blank"`, and cross-origin hrefs. Hash-only same-page links are left to the browser; `hashchange` still triggers the callback.
+
+### `$(context, selector)` / `$$(context, selector)` — context-aware DOM query
+
+```javascript
+$(el, ".child");        // first match (Element | null)
+$$(el, ".child");       // all matches (Array)
+$(".child");            // shorthand: context = document
+$$(".child");
+```
+
+### `$.clone(parent, selector)` — template instantiation
+
+```javascript
+const el = $.clone("#list", "#tmp");
+```
+
+Clones the first element of `<template selector>`, runs `_t(el)` for i18n hydration, appends to `parent`, dispatches a bubbling `mounted` CustomEvent (`detail: { parent }`), and returns the mounted element. Throws if `parent` or template is missing.
+
+## Patterns
+
+### Form intake
+
+```javascript
+on("#todo-form", "submit", (e) => {
+  e.preventDefault();
+  const data = the.form(e.target);                          // { task, tags: [...] }
+  the($.clone("#todo-list", "#todo-item"), the.flat(data)); // task, tags_0, tags_1 → attrs
+});
+```
+
+### List rendering with i18n
+
+```html
+<template id="post-card">
+  <article data-item>
+    <h2 data-text="title"></h2>
+    <p data-i18n="posted_at" data-i18n-val=""></p>
+  </article>
+</template>
+<section id="posts"></section>
+```
+
+```javascript
+for (const post of posts) {
+  const el = $.clone("#posts", "#post-card");
+  the(el, { title: post.title });
+  $(el, '[data-i18n="posted_at"]').setAttribute("data-i18n-val", post.created_at);
+}
+_t();
+```
+
+### Routing (multi-page SPA)
+
+```javascript
+route((path) => {
+  the("page", path === "/" ? "home" : path.slice(1));
+});
+```
+
+```css
+main > section { display: none; }
+[data-page="home"]    main > section[data-route="home"]    { display: block; }
+[data-page="about"]   main > section[data-route="about"]   { display: block; }
+[data-page="contact"] main > section[data-route="contact"] { display: block; }
+```
+
+### Hot dictionary swap
+
+```javascript
+on("nav", "click", "[data-lang]", async (_e, link) => {
+  const lang = link.getAttribute("data-lang");
+  the.locale = lang;
+  the.dictionary = await (await fetch(`/locales/${lang}.json`)).json();
+  _t();
+});
+```
+
+### Namespaced state
+
+```javascript
+// Two apps on the same origin can coexist:
+await the.boot({ namespace: "dashboard" }); // localStorage keys: dashboard:theme, etc.
+```
+
+### Cleanup with on() unsubscribe
+
+```javascript
+const off = on("#modal", "click", "[data-action='close']", closeModal);
+on.emit(document.body, "modal-closed");
+off(); // detach when modal is destroyed
+```
+
+### Server-side rendering (no extra API)
+
+There's no SSR shim. Emit `data-*` attributes from the server:
+
+```html
+<!-- rendered server-side -->
+<body data-theme="dark" data-user="Alice">
+  <h1 data-text="user">Alice</h1>
+</body>
+```
+
+On the client:
+
+```javascript
+await the.boot();   // localStorage values, if any, override the server-rendered attrs
+```
+
+The framework reads existing attributes via `the(key)` without modification, so server-rendered state is observable immediately. `the.boot()` only mutates when localStorage has matching keys.
+
+## Lint stack
+
+on_the_money ships a three-tool stack. Each layer covers what the others can't.
+
+### 1. JavaScript — ESLint + `eslint-plugin-otm`
+
+```bash
+npm install -D eslint
+```
+
+```javascript
+// eslint.config.js
+import otm from "on_the_money/eslint-config";
+import nounsanitized from "eslint-plugin-no-unsanitized";
+
+export default [
+  ...otm,
+  nounsanitized.configs.recommended,
+];
+```
+
+| Rule | Source | Behavior |
+| --- | --- | --- |
+| `otm/prefer-on` | eslint-plugin-otm | Ban `addEventListener`; use `on()`. |
+| `otm/prefer-the-set` | eslint-plugin-otm | Ban `textContent`/`innerText`/`nodeValue` assignment. |
+| `otm/flat-state` | eslint-plugin-otm | Ban nested objects/arrays in `the()` calls. |
+| `otm/prefer-submit` | eslint-plugin-otm | Warn on `on(btn, "click", ...)` for form data. |
+| `otm/no-style-mutation` | eslint-plugin-otm | Ban `el.style.* = ...`. |
+| `no-unsanitized/no-inner-html` | external | Ban `innerHTML`/`outerHTML`. |
+| `no-unsanitized/method` | external | Ban `document.write`, `insertAdjacentHTML`. |
+
+### 2. CSS — Stylelint + `stylelint-plugin-otm`
+
+```bash
+npm install -D stylelint stylelint-config-standard
+```
+
+```javascript
+// stylelint.config.js
+import otm from "on_the_money/stylelint-config";
+
+export default {
+  extends: ["stylelint-config-standard"],
+  ...otm,
+};
+```
+
+| Rule | Source | Behavior |
+| --- | --- | --- |
+| `otm/prefer-attribute-selector` | stylelint-plugin-otm | Ban `.class` selectors; use `[data-state="..."]`. |
+| `declaration-no-important` | stylelint built-in | Ban `!important`. |
+
+### 3. HTML / cross-file — `otm-lint`
+
+```bash
+npx otm-lint --check ./src
+```
+
+| Rule | Forbidden | Use instead |
+| --- | --- | --- |
+| **HTML-004** | Naked text in HTML | Wrap in a semantic tag or use `data-i18n="key"`. |
+| **HTML-017** | `<div data-action="...">` without `role`/`tabindex` | Use a `<button>` or other interactive element. |
+| **HTML-023** | `data-i18n="..."` without `<meta name="i18n">` | Declare the i18n endpoint. |
+| **HTML-024** | `data-available="..."` doesn't match locales folder | Keep the manifest aligned with the actual locale files. |
+
+`otm-lint` default-excludes `node_modules`, `dist`, `.git`, and dotdirs. It only scans `.html` — everything else delegates to the layers above.
+
+### Recommended companions (not shipped)
+
+| Concern | Tool |
+| --- | --- |
+| HTML correctness (lang/charset/viewport, inline handlers, deprecated attrs) | `html-validate` |
+| Static a11y | `eslint-plugin-jsx-a11y` (works on plain HTML via parsers) |
+| Runtime a11y | `axe-core` via Playwright/Cypress against the rendered page |
+| Supply-chain | `npm audit`, `osv-scanner` |
+
+## Suggested project layout
+
+```
+my-app/
+├── index.html              # Pico + meta tags + script entry
+├── app.js                  # await the.boot(); register handlers
+├── locales/
+│   ├── en.json
+│   ├── es.json
+│   └── fr.json
+├── styles.css              # attribute-selector-driven custom CSS (optional)
+└── views/
+    ├── home.html           # fragment imported via fetch + $.clone, or inline <template>
+    └── about.html
+```
+
+`<meta name="i18n" content="/locales" data-available="en,es,fr" data-fallback="en">` directs `the.boot()` to fetch `/locales/{lang}.json` automatically.
+
+## Repository layout (contributors)
+
+```
+src/
+├── core/
+│   ├── index.js           # public exports
+│   ├── On.js              # event delegation + emit
+│   ├── The.js             # state, i18n, boot, route, form, flat
+│   └── Select.js          # $, $$, clone
+└── linter/
+    ├── main.js            # otm-lint binary entrypoint
+    ├── cli.js             # directory scan, output
+    └── Linter.js          # rule implementations
+test/
+└── integration.test.js    # cross-module integration suite
+dist/
+└── on_the_money.min.js    # built ESM bundle (esbuild)
+```
+
+Unit tests are co-located with source: `src/core/On.test.js`, etc.
+
+## Commands
+
+| Script | Purpose |
+| --- | --- |
+| `npm test` | Run all tests (`node --test`). |
+| `npm run test:coverage` | Tests + coverage report (50/50/50 line/branch/function gate). |
+| `npm run lint` | Biome formatter + import order. |
+| `npm run build` | Build `dist/on_the_money.min.js` via esbuild. |
+| `npm run check` | `lint + build + test + coverage`. CI gate. |
+| `npm run otm` | Self-lint `examples/` against project rules. |
+
+## License
+
+MIT. Source and issues: <https://github.com/possumtech/on_the_money.js>

package/dist/on_the_money.min.js

@@ -0,0 +1 @@
+var b=class{static on(t,n,o,e){let r=typeof t=="string"?document.querySelector(t):t||document.body,a=i=>{let s=i.target.closest(o);s&&r.contains(s)&&e.call(s,i,s)};return r.addEventListener(n,a),()=>r.removeEventListener(n,a)}static emit(t,n,o){let e=typeof t=="string"?document.querySelector(t):t,r=new CustomEvent(n,{bubbles:!0,cancelable:!0,detail:o});e.dispatchEvent(r)}};var l=class c{static dictionary={};static locale=typeof navigator<"u"?navigator.language:"en-US";static prefix="otm:";static the(...t){if(t.length===0)throw new TypeError("the(): missing args");return t[0]instanceof Element?c.#e(t[0],t.slice(1)):c.#e(document.body,t)}static#e(t,n){let[o,e]=n,r=t===document.body;if(n.length===1&&typeof o=="string")return c.#o(t,o);if(n.length===2&&typeof o=="string"){if(typeof e>"u")throw new TypeError(`the(${JSON.stringify(o)}, undefined): val is required for set`);return c.#t(t,o,e),r&&localStorage.setItem(`${c.prefix}${o}`,e),t}if(n.length===1&&o?.constructor===Object){for(let[a,i]of Object.entries(o))c.#t(t,a,i),r&&localStorage.setItem(`${c.prefix}${a}`,i);return t}throw new TypeError(`the(): unrecognized call shape (${n.map(a=>typeof a).join(", ")})`)}static flat(t,n="_"){if(t===null||typeof t!="object")throw new TypeError("the.flat: input must be an object");let o={},e=(r,a)=>{if(r===null||typeof r!="object"){o[a]=r;return}for(let[i,s]of Object.entries(r))e(s,a?`${a}${n}${i}`:i)};return e(t,""),o}static form(t){let n={},o=t.querySelectorAll("input, select, textarea");for(let e of o){let r=e.name;if(!r||e.disabled)continue;let a=(e.type||"text").toLowerCase();if(a==="submit"||a==="button"||a==="reset"||(a==="checkbox"||a==="radio")&&!(e.checked??e.hasAttribute("checked")))continue;let i=e.value??e.getAttribute("value")??"";c.#n(n,r,i)}return n}static#n(t,n,o){let e=n.split(/[\[\]]/).filter(Boolean),r=t;for(let a=0;a<e.length;a++){let i=e[a];a===e.length-1?r[i]!==void 0?(Array.isArray(r[i])||(r[i]=[r[i]]),r[i].push(o)):r[i]=o:(r[i]=r[i]||{},r=r[i])}}static _t(t,n={}){if(typeof Node<"u"?t instanceof Node:t?.nodeType){let a=t.querySelectorAll?[t,...t.querySelectorAll("[data-i18n]")]:[t];for(let i of a)if(i.hasAttribute?.("data-i18n")){let s=i.getAttribute("data-i18n"),d={};for(let u of i.attributes)if(u.name.startsWith("data-i18n-")&&u.name!=="data-i18n-type"){let y=u.name.replace("data-i18n-","");d[y]=u.value}let f=i.getAttribute("data-i18n-type");i.textContent=c._t(s,{...d,type:f})}return t}if(!t)return c._t(document.body),"";let e=c.dictionary[t];if(!e)return t;if(typeof e=="object"){let a=n.qty!==void 0?Number(n.qty):0,i=new Intl.PluralRules(c.locale).select(a);e=e[i]||e.other||t}if(typeof e!="string")return t;let r=e;for(let[a,i]of Object.entries(n)){let s=i;if(a==="val"&&n.type){let d=Number(i),f=n.type==="currency"?new Intl.NumberFormat(c.locale,{style:"currency",currency:"USD"}):n.type==="date"?new Intl.DateTimeFormat(c.locale):new Intl.NumberFormat(c.locale);s=n.type==="date"?f.format(new Date(i)):f.format(d)}r=r.replace(`{${a}}`,s)}return r}static route(t){if(typeof window>"u")return;let n=()=>t(window.location.pathname,window.location.search,window.location.hash);window.addEventListener("popstate",n),window.addEventListener("hashchange",n),document.addEventListener("click",o=>{let e=o.target.closest("a");if(!e||!e.getAttribute("href")||e.hasAttribute("data-external")||e.target==="_blank")return;let r=new URL(e.getAttribute("href"),window.location.href);r.origin===window.location.origin&&(r.pathname===window.location.pathname&&r.search===window.location.search&&r.hash||(o.preventDefault(),window.history.pushState({},"",r.href),n()))}),n()}static#o(t,n){let e={expanded:"aria-expanded",selected:"aria-selected",hidden:"aria-hidden",checked:"aria-checked",disabled:"aria-disabled"}[n]||`data-${n}`;return t.getAttribute(e)}static#t(t,n,o){let r={expanded:"aria-expanded",selected:"aria-selected",hidden:"aria-hidden",checked:"aria-checked",disabled:"aria-disabled"}[n]||`data-${n}`,a=typeof o=="boolean"?o?"true":"false":o;if(t.setAttribute(r,a),t.querySelectorAll){let i=t.querySelectorAll(`[data-text="${n}"]`);for(let s of i)s.textContent=a}t.getAttribute?.("data-text")===n&&(t.textContent=a)}static async boot({signal:t,locales:n,dictionary:o,namespace:e}={}){e&&(c.prefix=`${e}:`);let r=typeof window<"u"&&window.location?window.location.search:"",a=new URLSearchParams(r),i=(typeof navigator<"u"?navigator.language:null)||document.documentElement.lang||"en";if(c.locale=a.get("lang")||localStorage.getItem(`${c.prefix}lang`)||i,o)c.dictionary=o;else{let s=document.querySelector('meta[name="i18n"]'),d=n||s?.getAttribute("content");if(d){let f=s?.getAttribute("data-fallback")||"en",u=(s?.getAttribute("data-available")||"").split(",").map(p=>p.trim().toLowerCase()),y=c.locale.toLowerCase(),g=y.split("-")[0],w=f;u.includes(y)?w=y:u.includes(g)&&(w=g);try{let p=await fetch(`${d}/${w}.json`,{signal:t});p.ok&&(c.dictionary=await p.json())}catch(p){if(t?.aborted)throw p;console.warn("otm: i18n fetch failed",p)}}}for(let s=0;s<localStorage.length;s++){let d=localStorage.key(s);if(d.startsWith(c.prefix)){let f=d.slice(c.prefix.length);if(f!=="lang"){let u=localStorage.getItem(d);c.#t(document.body,f,u)}}}c._t()}};var h=class{static $(t,n){let o=t,e=n;return typeof o=="string"&&(e=o,o=document),o.querySelector(e)}static $$(t,n){let o=t,e=n;return typeof o=="string"&&(e=o,o=document),Array.from(o.querySelectorAll(e))}static clone(t,n){let o=typeof t=="string"?document.querySelector(t):t,e=document.querySelector(n);if(!o)throw new Error(`Parent not found: ${t}`);if(!e)throw new Error(`Template not found: ${n}`);let r=e.content.cloneNode(!0).firstElementChild;l._t(r),o.appendChild(r);let a=new CustomEvent("mounted",{bubbles:!0,detail:{parent:o}});return r.dispatchEvent(a),r}};var x=b.on;x.emit=b.emit;var m=l.the,$=l._t,A=l.route;m.t=$;m.route=A;m.form=l.form;m.flat=l.flat;m.boot=l.boot;Object.defineProperty(m,"dictionary",{get:()=>l.dictionary,set:c=>{l.dictionary=c}});Object.defineProperty(m,"locale",{get:()=>l.locale,set:c=>{l.locale=c}});var v=h.$;v.clone=h.clone;var S=h.$$,T={on:x,the:m,$:v,$$:S,_t:$};export{v as $,S as $$,$ as _t,T as default,x as on,A as route,m as the};

package/package.json

@@ -0,0 +1,61 @@
+{
+	"name": "on_the_money",
+	"version": "0.3.0",
+	"description": "Opinionated, attribute-driven, standards-oriented modern framework. <2KB gzip. Native browser APIs only.",
+	"type": "module",
+	"main": "dist/on_the_money.min.js",
+	"module": "dist/on_the_money.min.js",
+	"bin": {
+		"otm-lint": "./src/linter/main.js"
+	},
+	"exports": {
+		".": "./dist/on_the_money.min.js",
+		"./src": "./src/core/index.js",
+		"./eslint-plugin": "./src/eslint/plugin.js",
+		"./eslint-config": "./src/eslint/config.js",
+		"./stylelint-plugin": "./src/stylelint/plugin.js",
+		"./stylelint-config": "./src/stylelint/config.js"
+	},
+	"files": [
+		"src/**/*.js",
+		"!src/**/*.test.js",
+		"dist",
+		"README.md",
+		"LICENSE",
+		"CHANGELOG.md"
+	],
+	"scripts": {
+		"build": "esbuild src/core/index.js --bundle --minify --format=esm --outfile=dist/on_the_money.min.js",
+		"test": "node --test --test-concurrency=1 src/core/*.test.js src/linter/*.test.js src/eslint/*.test.js src/stylelint/*.test.js test/integration.test.js",
+		"test:coverage": "node --test --test-concurrency=1 --experimental-test-coverage --test-coverage-lines=50 --test-coverage-branches=50 --test-coverage-functions=50 src/core/*.test.js src/linter/*.test.js src/eslint/*.test.js src/stylelint/*.test.js test/integration.test.js",
+		"check": "npm run lint && npm run build && npm run test && npm run test:coverage",
+		"lint": "biome check ./src ./test ./examples",
+		"lint:fix": "biome check --write ./src ./test ./examples",
+		"otm": "node src/linter/main.js --check examples",
+		"prepack": "npm run build",
+		"prepublishOnly": "npm run check"
+	},
+	"engines": {
+		"node": ">=24.0.0"
+	},
+	"dependencies": {
+		"parse5": "7.2.1"
+	},
+	"peerDependencies": {
+		"stylelint": ">=16"
+	},
+	"peerDependenciesMeta": {
+		"stylelint": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@biomejs/biome": "1.9.4",
+		"esbuild": "0.25.0",
+		"eslint": "10.4.0",
+		"linkedom": "0.18.6",
+		"postcss-selector-parser": "7.1.1",
+		"stylelint": "17.11.1"
+	},
+	"license": "MIT"
+}

package/src/core/On.js

@@ -0,0 +1,27 @@
+export default class On {
+	static on(parent, event, selector, fn) {
+		const container =
+			typeof parent === "string"
+				? document.querySelector(parent)
+				: parent || document.body;
+
+		const handler = (e) => {
+			const target = e.target.closest(selector);
+			if (target && container.contains(target)) {
+				fn.call(target, e, target);
+			}
+		};
+		container.addEventListener(event, handler);
+		return () => container.removeEventListener(event, handler);
+	}
+
+	static emit(el, event, detail) {
+		const target = typeof el === "string" ? document.querySelector(el) : el;
+		const customEvent = new CustomEvent(event, {
+			bubbles: true,
+			cancelable: true,
+			detail,
+		});
+		target.dispatchEvent(customEvent);
+	}
+}

package/src/core/Select.js

@@ -0,0 +1,55 @@
+import The from "./The.js";
+
+export default class Select {
+	static $(context, selector) {
+		let ctx = context;
+		let sel = selector;
+		if (typeof ctx === "string") {
+			sel = ctx;
+			ctx = document;
+		}
+		return ctx.querySelector(sel);
+	}
+
+	static $$(context, selector) {
+		let ctx = context;
+		let sel = selector;
+		if (typeof ctx === "string") {
+			sel = ctx;
+			ctx = document;
+		}
+		return Array.from(ctx.querySelectorAll(sel));
+	}
+
+	/**
+	 * Clones a template and attaches it to a parent.
+	 * This ensures the element is immediately part of the DOM lifecycle.
+	 * @param {HTMLElement|string} parent - The target container
+	 * @param {string} selector - The template ID/selector
+	 * @returns {HTMLElement} The mounted element
+	 */
+	static clone(parent, selector) {
+		const container =
+			typeof parent === "string" ? document.querySelector(parent) : parent;
+		const template = document.querySelector(selector);
+
+		if (!container) throw new Error(`Parent not found: ${parent}`);
+		if (!template) throw new Error(`Template not found: ${selector}`);
+
+		const el = template.content.cloneNode(true).firstElementChild;
+
+		// Surgical hydration of the new fragment before mounting
+		The._t(el);
+
+		container.appendChild(el);
+
+		// Trigger a 'mounted' custom event for lifecycle hooks
+		const event = new CustomEvent("mounted", {
+			bubbles: true,
+			detail: { parent: container },
+		});
+		el.dispatchEvent(event);
+
+		return el;
+	}
+}