monowind 0.1.3 → 0.1.5

package/src/styles.css

@@ -8,6 +8,10 @@
  * ENGINE owns (geometry, typography locking, alignment/overflow enforcement)
  * stay unlayered with `!important` so no utility can push content off-grid. */
 
+/* Gap-decoration utilities + engine mirrors (specs/gap-decorations.md).
+ * Must precede all rules, per @import syntax. */
+@import "./rules.css";
+
 @layer base {
   mono-wind {
     display: block;
@@ -17,10 +21,16 @@
     isolation: isolate;
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
     font-size: 14px;
-    line-height: 1;
+    /* `normal` picks a line box tall enough for the font's ascent +
+     * descent so inline span backgrounds fit within a row instead of
+     * bleeding into the next. Cell height derives from the probe, so
+     * this stays deterministic — just taller. */
+    line-height: normal;
     letter-spacing: 0;
-    /* Default themable focus ring color (see form-controls rule below). */
-    --mw-focus-color: currentColor;
+    /* Themable fg / bg pair for the focus-invert default. System
+     * colors honor the viewer's color scheme; authors override. */
+    --mw-fg: canvastext;
+    --mw-bg: canvas;
   }
 
   /* Normalize native form controls so they don't borrow browser chrome that
@@ -37,14 +47,81 @@
     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;
+  /* Form controls render their value/caret/selection natively — the
+   * color-transparent rule below excludes them via `:not()`, so this
+   * visible color and themed caret actually stick. */
+  mono-wind :is(input, textarea, select) {
+    color: var(--mw-fg);
+    caret-color: var(--mw-fg);
+  }
+
+  /* Placeholder at half the element's own color, so it tracks both the
+   * theme and the focus-invert. Explicit opacity: Firefox dims its UA
+   * placeholder with opacity, which would double with the color mix. */
+  mono-wind :is(input, textarea)::placeholder {
+    color: color-mix(in srgb, currentcolor 50%, transparent);
+    opacity: 1;
+  }
+
+  /* A required <select> still on its empty placeholder option matches
+   * :invalid — same placeholder treatment (the :invalid specificity
+   * beats the form-control color above; the pair below beats the
+   * focus-invert). currentcolor would self-refer here, so the themed
+   * colors are spelled out. */
+  mono-wind select:invalid {
+    color: color-mix(in srgb, var(--mw-fg) 50%, transparent);
+  }
+  mono-wind select:invalid:focus-visible {
+    color: color-mix(in srgb, var(--mw-bg) 50%, transparent);
+  }
+
+  /* Single-line controls: never wrap, clip overflow. The one-row
+   * floor lives in the tree builder (a CSS min-height on the outer
+   * box gives no content-area guarantee once border + padding exceed
+   * it). */
+  mono-wind :is(input, select) {
+    white-space: nowrap;
+    overflow: hidden;
   }
+
+  /* Textarea: engine controls the size (it auto-grows to fit the
+   * value, so scrolling never has anything to reveal) — the native
+   * resize handle and scrollbars would drag the box off-grid. `clip`
+   * (not `hidden`) so the caret can't scroll the box either: under
+   * `leading-*` the last line's half-leading is a phantom scroll
+   * range that would shift every line off its row. */
+  mono-wind textarea {
+    resize: none;
+    overflow: clip;
+  }
+
+  /* :focus-visible on ANY element: TUI-native invert. Outlines off
+   * (they'd clip against grid glyphs). Where each declaration lands:
+   * bg only shows via the grid (engine reads it during [measuring];
+   * the light-DOM bg is transparent-locked below); color/caret-color
+   * paint on editables (they're the ones exempted from the
+   * color-transparent lock), and get grid-mirrored by the engine for
+   * everyone else. */
+  mono-wind :focus-visible {
+    outline: none;
+    background-color: var(--mw-fg);
+    color: var(--mw-bg);
+    caret-color: var(--mw-bg);
+  }
+}
+
+/* === Modes and selection (engine-owned from here down) =============== */
+
+/* select="grid": pass pointer events through non-interactive light-DOM
+ * elements so drag lands on the grid <pre> (native drag-selection of
+ * the ASCII); interactives opt back into `auto` so clicks still work.
+ * (The slot itself is pointer-events: none in the shadow CSS.) */
+mono-wind[select="grid"] * {
+  pointer-events: none !important;
+}
+mono-wind[select="grid"]
+  :is(a, button, input, select, textarea, label, [tabindex], [role="button"]) {
+  pointer-events: auto !important;
 }
 
 /* Hide the host until the first layout completes to avoid the flash of raw
@@ -55,13 +132,30 @@ mono-wind:not([data-mw-ready]) {
   visibility: hidden !important;
 }
 
+/* Full invert on selection. Both fields spelled out — setting only
+ * `color` makes some engines drop the OS default background. Native
+ * copy still yields the real text (the DOM the browser reads). The
+ * shadow grid mirrors this rule inside element.ts. */
+mono-wind:not([measuring]) *::selection {
+  color: var(--mw-bg, canvas) !important;
+  background: var(--mw-fg, canvastext) !important;
+}
+/* Focus-invert already flipped the element's colors, so re-flipping in
+ * ::selection would land on the same colors as the focused bg and hide
+ * the selection. Swap them back for the focused element. */
+mono-wind:not([measuring]) :focus-visible::selection {
+  color: var(--mw-fg, canvastext) !important;
+  background: var(--mw-bg, canvas) !important;
+}
+
+/* === Typography locks and measuring gates ============================ */
+
 /* Lock the font 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;
-  vertical-align: baseline !important;
 }
 
 /* Grid-template read assist (specs/grid.md), no-Typed-OM engines only
@@ -88,10 +182,21 @@ mono-wind[measuring] [data-mw-degrid] {
  * laid-out ancestor (which sets the row multiple below) — `leading-*` on
  * inline elements is ignored by design. */
 mono-wind:not([measuring]) * {
+  /* Baseline-shift lock (cell-model): gated like the rest, so the style
+   * reader sees the authored/UA vertical-align (table cells read it). */
+  vertical-align: baseline !important;
   white-space: normal !important;
   overflow-wrap: anywhere !important;
   letter-spacing: calc(var(--mw-rls, 0px) + var(--mw-ls) * var(--mw-cw, 1px)) !important;
   line-height: inherit !important;
+  /* Backgrounds paint in the grid too, so the light DOM's own bg goes
+   * transparent — otherwise it would cover the grid (light DOM sits
+   * ON TOP of the grid in the shadow tree so native selection
+   * highlights can show through). The engine still reads authored
+   * background-color during [measuring] (this rule is off then), so
+   * bg-* and focus-invert both make it into the grid paint. */
+  background-color: transparent !important;
+  text-shadow: none !important;
   /* Inline-element horizontal padding, quantized: the engine writes
    * `--mw-ipl`/`--mw-ipr` (whole cells) on inline elements whose authored
    * padding it reserved in the run; everything else gets 0, so raw
@@ -103,6 +208,14 @@ mono-wind:not([measuring]) * {
   padding-right: calc(var(--mw-ipr, 0) * var(--mw-cw, 1px)) !important;
 }
 
+/* Light-DOM text goes invisible so the grid is the only visible copy;
+ * form controls opt out because they render their value/caret/selection
+ * natively (the tree builder skips their content so the grid doesn't
+ * double-render). Events, ARIA, focus, selection all still work. */
+mono-wind:not([measuring]) *:not(input):not(textarea):not(select) {
+  color: transparent !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. */
@@ -128,6 +241,8 @@ mono-wind:not([measuring]) [data-mw-nowrap][data-mw-clip] {
   overflow: hidden !important;
 }
 
+/* === Engine-owned geometry =========================================== */
+
 /* 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
@@ -139,7 +254,7 @@ mono-wind:not([measuring]) [data-mw-nowrap][data-mw-clip] {
  * 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),
+ * Neutralized: border-width (painted as glyphs by the shadow grid),
  * 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):
@@ -203,6 +318,16 @@ mono-wind:not([measuring]) [data-mw-inline-box] {
   max-width: none !important;
   max-height: none !important;
   border-width: 0 !important;
+  /* Gap rules are engine-painted glyphs (specs/gap-decorations.md);
+   * css-gaps browsers must not also paint their native (fractional)
+   * rules — e.g. between an emptied grid's explicit tracks. */
+  column-rule-style: none !important;
+  row-rule-style: none !important;
+  /* Authored z-index applies only where CSS says (positioned, flex/grid
+   * items) — absolutization would otherwise activate it everywhere. The
+   * engine writes --mw-z in exactly those cases; without it the calc()
+   * is invalid at computed-value time and z-index falls back to auto. */
+  z-index: calc(var(--mw-z)) !important;
   padding-top: calc((var(--mw-pt, 0) + var(--mw-bt, 0)) * var(--mw-ch, 1px)) !important;
   padding-right: calc(
     max(0, var(--mw-pr, 0) + var(--mw-br, 0) - var(--mw-ls, 0)) * var(--mw-cw, 1px)
@@ -224,6 +349,18 @@ mono-wind:not([measuring]) [data-mw-inline-box] {
 mono-wind:not([measuring]) [data-mw-inline-box] {
   position: relative !important;
   vertical-align: top !important;
+  /* Same half-leading cancellation as laid-out elements — without it
+   * an inline box's NATIVE ink (a textarea's value under leading-*)
+   * sits centered in its line boxes instead of on its rows. */
+  translate: 0 calc(var(--mw-lhs, 0) * var(--mw-ch, 1px)) !important;
+}
+
+/* Authored `vertical-align: bottom` on an atomic inline box: grid-exact
+ * in every engine (probed), so it passes through; the engine drops the
+ * line's text to the box's last row to match. middle/baseline are
+ * off-grid and behave as top (cell-model deviation). */
+mono-wind:not([measuring]) [data-mw-inline-box][data-mw-vbottom] {
+  vertical-align: bottom !important;
 }
 
 /* Author-requested `overflow: hidden` or `overflow: clip` — both keep
@@ -249,6 +386,8 @@ mono-wind:not([measuring]) [data-mw-inline-inset] {
   left: calc(var(--mw-il) * var(--mw-cw, 1px)) !important;
 }
 
+/* === Engine state attributes (warnings, hiding, alignment) =========== */
+
 /* A container whose direct text was dropped (mixed text + block children,
  * cell-model deviation): the browser would paint that text unpositioned
  * over the laid-out children, so hide it. `visibility` is inherited AND
@@ -264,9 +403,15 @@ mono-wind:not([measuring]) [data-mw-dropped-text] > [data-mw-laid-out] {
   visibility: visible !important;
 }
 
+/* Misparented table content (no anonymous boxes, specs/table.md) and
+ * <col>/<colgroup> boxes: fully hidden, subtree included. */
+mono-wind:not([measuring]) [data-mw-table-hidden] {
+  display: none !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] {
+mono-wind:not([measuring]) [data-mw-text-align-blocked] {
   text-align: start !important;
 }

package/dist/ascii.d.ts

@@ -1,16 +0,0 @@
-import type { LayoutNode } from "./types.ts";
-/**
- * Render a laid-out tree as plain-text ASCII art: borders as box-drawing
- * glyphs, leaf text word-wrapped inside its content box, everything else as
- * spaces.
- *
- * This is the engine's "screenshot without a browser": deterministic,
- * font-independent, and diffable — used for golden regression tests and as
- * a debugging/agent-inspection tool. It intentionally renders geometry the
- * way the browser would paint it (same border-run and word-wrap code), minus
- * colors and fonts.
- *
- * Content that overflows the root box is clipped at the grid edges.
- */
-export declare function renderAscii(root: LayoutNode): string;
-//# sourceMappingURL=ascii.d.ts.map

package/dist/ascii.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ascii.d.ts","sourceRoot":"","sources":["../src/ascii.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAepD"}