monowind 0.1.0

package/dist/wrap.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Greedy word-wrap for monospace text.
+ *
+ * Words are runs of non-whitespace; whitespace runs collapse to single spaces
+ * between fitting words. Browsers also treat a hyphen inside a word as a
+ * break opportunity (break after `-`, no hyphen added) — except before a
+ * digit, per UAX #14 (`2026-08` doesn't break) — so words are further split
+ * into breakable segments. A segment longer than `width` breaks at cell
+ * boundaries. `\n` in the input is a HARD line break — the wrap restarts on
+ * a new line (the source of these is `<br>` elements, converted to `\n` by
+ * the tree builder). A blank hard line still occupies one row.
+ *
+ * Matches how a browser wraps `white-space: normal; overflow-wrap: anywhere`
+ * text in a fixed-width monospace container — we set that in styles.css so
+ * the two agree.
+ */
+export declare function wrapLines(text: string, width: number): string[];
+/** Number of rows `text` occupies at `width` (see wrapLines). */
+export declare function wrapLineCount(text: string, width: number): number;
+/**
+ * Split a word at its internal break opportunities: after each hyphen run,
+ * unless the next character is a digit (UAX #14: no break between a hyphen
+ * and a following number). `"mx-auto"` → `["mx-", "auto"]`;
+ * `"2026-08"` → `["2026-08"]`. Also the unit of min-content width.
+ */
+export declare function breakableSegments(word: string): string[];
+//# sourceMappingURL=wrap.d.ts.map

package/dist/wrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrap.d.ts","sourceRoot":"","sources":["../src/wrap.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAG/D;AAED,iEAAiE;AACjE,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAcxD"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "monowind",
+  "version": "0.1.0",
+  "description": "Text-based user interfaces (TUI) on the web, from ordinary HTML and Tailwind utility classes",
+  "keywords": [
+    "ascii",
+    "monospace",
+    "tailwind",
+    "terminal",
+    "text-based",
+    "tui",
+    "web-component"
+  ],
+  "license": "MIT",
+  "author": "Benoît Rouleau",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/benface/monowind.git",
+    "directory": "packages/core"
+  },
+  "style": "./src/styles.css",
+  "files": [
+    "dist",
+    "src/styles.css"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "style": "./src/styles.css",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "devDependencies": {
+    "@tailwindcss/browser": "^4.3.3",
+    "happy-dom": "^20.11.6",
+    "typescript": "^7.0.2",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11"
+  },
+  "scripts": {
+    "build": "vite build && vite build -c vite.cdn.config.ts && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/src/styles.css

@@ -0,0 +1,145 @@
+/* monowind companion stylesheet — loaded into the light DOM by the app.
+ * The shadow root has its own baked-in styles; this file targets the light-DOM
+ * subtree the host owns.
+ *
+ * Layering: defaults and normalization that USERS may override live in
+ * `@layer base` — Tailwind's utilities layer (and any unlayered author CSS)
+ * then wins over them, matching Tailwind's own preflight behavior. Rules the
+ * ENGINE owns (geometry, typography locking, alignment/overflow enforcement)
+ * stay unlayered with `!important` so no utility can push content off-grid. */
+
+@layer base {
+  mono-wind {
+    display: block;
+    position: relative;
+    /* New stacking context so ancestor z-index / blend-modes don't bleed in
+     * and our own absolute-positioned decorations don't leak out. */
+    isolation: isolate;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 14px;
+    line-height: 1;
+    letter-spacing: 0;
+    /* Default themable focus ring color (see form-controls rule below). */
+    --mw-focus-color: currentColor;
+  }
+
+  /* Normalize native form controls so they don't borrow browser chrome that
+   * would break the grid. Padding, margin, border-width, and box-sizing are
+   * handled by the engine-owned rules below. In `base` so utilities
+   * (text-*, bg-*, …) can restyle controls. */
+  mono-wind :is(button, input, select, textarea) {
+    border-radius: 0;
+    color: inherit;
+    background: transparent;
+    font: inherit;
+    line-height: inherit;
+    text-align: inherit;
+    appearance: none;
+  }
+
+  /* Restore a themable focus ring — `appearance: none` above kills the UA
+   * default, and without this keyboard users can lose track of where focus
+   * is. `outline-offset: -1px` keeps the ring inside the element's box so it
+   * doesn't overlap our decoration layer. */
+  mono-wind :is(button, input, select, textarea, a):focus-visible {
+    outline: 2px solid var(--mw-focus-color);
+    outline-offset: -1px;
+  }
+}
+
+/* Hide the host until the first layout completes to avoid the flash of raw
+ * browser-rendered content (flex without our decorations, elements at their
+ * natural sizes). `visibility: hidden` preserves layout & measurability so
+ * cell metrics can still be probed while invisible. */
+mono-wind:not([data-mw-ready]) {
+  visibility: hidden !important;
+}
+
+/* Lock typography on descendants so the grid metrics stay consistent —
+ * `!important` because user classes (`.text-2xl` etc.) would otherwise beat
+ * these element-selector rules on specificity. */
+mono-wind * {
+  font-family: inherit !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+  letter-spacing: inherit !important;
+  vertical-align: baseline !important;
+}
+
+/* Match the engine's greedy word-wrap: break at spaces, and break long
+ * words at cell boundaries when they overflow. Gated on `measuring` (unlike
+ * the font lock above) so the style reader sees the authored `white-space`
+ * — that's how `nowrap` is detected. */
+mono-wind:not([measuring]) * {
+  white-space: normal !important;
+  overflow-wrap: anywhere !important;
+}
+
+/* Author-requested `white-space: nowrap` (or `pre`) — the engine sized this
+ * box for unwrapped hard lines, so the browser must not wrap either. Wins
+ * over the lock above on specificity. */
+mono-wind:not([measuring]) [data-mw-nowrap] {
+  white-space: nowrap !important;
+}
+
+/* Truncation (`truncate` = nowrap + clip + text-overflow: ellipsis): use
+ * `hidden` rather than the normalized `clip` for this combo — some engines
+ * only apply `text-overflow` to scroll containers, which `clip` boxes are
+ * not. Wins over the `[data-mw-clip]` rule below on specificity. */
+mono-wind:not([measuring]) [data-mw-nowrap][data-mw-clip] {
+  overflow: hidden !important;
+}
+
+/* Every CSS property the engine has taken over on laid-out elements.
+ * Gated on the `measuring` attribute so the style reader still sees the
+ * authored values during its read pass. Being unlayered already beats all
+ * layered CSS (e.g. Tailwind utilities); the `!important` additionally
+ * defends against inline `style=""` attributes (hand-written or CSS-in-JS)
+ * and high-specificity unlayered author CSS. Known escape hatch: Tailwind's
+ * `!` modifier (important-in-layer) still wins, per the cascade spec.
+ *
+ * Geometry: position/box-sizing/left/top/width/height + min/max — set from
+ * the engine-owned --mw-x/y/w/h custom properties.
+ *
+ * Neutralized: border-width (painted as glyphs by the decoration layer),
+ * margin (position:absolute + margin still nudges the element off-grid).
+ *
+ * Owned via `--mw-p{t,r,b,l}` (padding) and `--mw-b{t,r,b,l}` (border cells):
+ * both must land on whole cells. The browser applies the sum as native
+ * padding since we've zeroed native border-width — this way, content sits
+ * inset by exactly the (border + padding) cells the engine planned for.
+ *
+ * Left alone: flex/grid/gap/justify/align — laid-out children are all
+ * position:absolute (out of flow), so nothing consumes them anyway. */
+mono-wind:not([measuring]) [data-mw-laid-out] {
+  position: absolute !important;
+  box-sizing: border-box !important;
+  left: calc(var(--mw-x, 0) * var(--mw-cw, 1px)) !important;
+  top: calc(var(--mw-y, 0) * var(--mw-ch, 1px)) !important;
+  width: calc(var(--mw-w, 0) * var(--mw-cw, 1px)) !important;
+  height: calc(var(--mw-h, 0) * var(--mw-ch, 1px)) !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  max-width: none !important;
+  max-height: none !important;
+  border-width: 0 !important;
+  padding-top: calc((var(--mw-pt, 0) + var(--mw-bt, 0)) * var(--mw-ch, 1px)) !important;
+  padding-right: calc((var(--mw-pr, 0) + var(--mw-br, 0)) * var(--mw-cw, 1px)) !important;
+  padding-bottom: calc((var(--mw-pb, 0) + var(--mw-bb, 0)) * var(--mw-ch, 1px)) !important;
+  padding-left: calc((var(--mw-pl, 0) + var(--mw-bl, 0)) * var(--mw-cw, 1px)) !important;
+  margin: 0 !important;
+}
+
+/* Author-requested `overflow: hidden` or `overflow: clip` — both keep
+ * content inside the engine-allocated box. Uses `clip` (no scroll
+ * container, cheaper, more precise semantic for what we're doing). */
+mono-wind [data-mw-clip] {
+  overflow: clip !important;
+}
+
+/* Force off-grid text alignments back to `start`. `text-left`/`right`/`start`/
+ * `end` all land on whole cells (offset = (W - N) × cell width); `center` and
+ * `justify` produce fractional per-line offsets we can't snap to the grid. */
+mono-wind [data-mw-text-align-blocked] {
+  text-align: start !important;
+}