mancha 0.22.7 → 0.23.1

package/docs/03_reactivity.md

@@ -179,6 +179,31 @@ $.items = [];
 $.items.length = 0;
 ```
 
+## Notification Scheduling
+
+Observers do not run on the same tick as the write. Writing a key schedules its
+observers to run once, about 10ms later; any further writes in that window join
+the run already scheduled instead of postponing it:
+
+```js
+$.view = buildView(); // Schedules the run...
+$.view = buildView(); // ...joins it. Observers run once, with the latest value.
+```
+
+Two things follow from that. Observers see only the final value of a burst, so
+they never run against an intermediate state. And a key written continuously
+still notifies every ~10ms rather than being held back indefinitely, so a value
+updated on every pointer move keeps its observers running throughout the drag.
+
+Timing depends only on when a key is first written, not on how often, and is the
+same in the browser, on the server, and in workers.
+
+> **Note:** An observer must not write the key it observes after an `await`.
+> Writes made by an observer's synchronous body are ignored, so the common case
+> of incidental self-writes is safe, but a write from an observer's asynchronous
+> tail is indistinguishable from an outside write and will re-trigger that
+> observer in a loop.
+
 ## Computed Values
 
 Computed values are derived values that automatically update when their dependencies change. Use `$computed` to create a named reactive value that recalculates whenever the values it depends on are modified.

package/docs/05_css.md

@@ -33,7 +33,7 @@ The utility CSS rules are inspired by Tailwind CSS. You can inject them using `i
 This automatically includes:
 - **CSS Reset** (Tailwind Preflight): box-sizing, typography, form resets, media defaults
 - **Base utility classes**: spacing, sizing, colors, layout, typography, and more
-- **On-demand scanning**: responsive variants, pseudo-state variants, color opacity, custom bracket values, and dark mode are generated on-the-fly for only the classes actually used in your markup
+- **On-demand scanning**: responsive variants, orientation variants, pseudo-state variants, color opacity, custom bracket values, and dark mode are generated on-the-fly for only the classes actually used in your markup
 
 ### Media Breakpoints
 
@@ -44,6 +44,18 @@ This automatically includes:
 | `lg:` | `1024px` |
 | `xl:` | `1280px` |
 
+### Orientation
+
+Use the `landscape:` and `portrait:` prefixes to apply styles based on screen orientation (`@media (orientation: …)`) rather than width, so layouts respond to device rotation without picking an arbitrary breakpoint:
+
+```html
+<!-- Stack vertically in portrait, side-by-side in landscape. -->
+<div class="flex flex-col landscape:flex-row">
+  <div class="board">...</div>
+  <div class="moves-panel portrait:hidden">...</div>
+</div>
+```
+
 ### Pseudo States
 
 The following pseudo states are supported for all utilities:
@@ -67,7 +79,7 @@ The `dark:` prefix can be used with any utility class, including colors, spacing
 <div class="bg-[#fff] dark:bg-[#1a1a1a] p-4 dark:border-gray-700">
 ```
 
-> **Note:** Responsive variants (`sm:`, `md:`, etc.), pseudo-state variants (`hover:`, `focus:`, `disabled:`), color opacity (`/N`), dark mode (`dark:`), and custom bracket values are all generated on-demand. Only the classes actually present in your markup are injected, keeping the CSS bundle small.
+> **Note:** Responsive variants (`sm:`, `md:`, etc.), orientation variants (`landscape:`, `portrait:`), pseudo-state variants (`hover:`, `focus:`, `disabled:`), color opacity (`/N`), dark mode (`dark:`), and custom bracket values are all generated on-demand. Only the classes actually present in your markup are injected, keeping the CSS bundle small.
 
 ### Spacing (Margin & Padding)
 
@@ -479,6 +491,15 @@ You can also control the opacity of any color utility by appending `/{opacity}`
 | `bg-auto` | `{"background-size":"auto"}` |
 | `bg-cover` | `{"background-size":"cover"}` |
 | `bg-contain` | `{"background-size":"contain"}` |
+| `bg-center` | `{"background-position":"center"}` |
+| `bg-top` | `{"background-position":"top"}` |
+| `bg-bottom` | `{"background-position":"bottom"}` |
+| `bg-left` | `{"background-position":"left"}` |
+| `bg-right` | `{"background-position":"right"}` |
+| `bg-left-top` | `{"background-position":"left top"}` |
+| `bg-left-bottom` | `{"background-position":"left bottom"}` |
+| `bg-right-top` | `{"background-position":"right top"}` |
+| `bg-right-bottom` | `{"background-position":"right bottom"}` |
 | `bg-no-repeat` | `{"background-repeat":"no-repeat"}` |
 | `bg-fixed` | `{"background-attachment":"fixed"}` |
 | `bg-local` | `{"background-attachment":"local"}` |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mancha",
-	"version": "0.22.7",
+	"version": "0.23.1",
 	"description": "Javscript HTML rendering engine",
 	"main": "dist/index.js",
 	"type": "module",

package/scripts/generate-css-docs.ts

@@ -55,7 +55,7 @@ function generateMarkdown() {
 		"- **CSS Reset** (Tailwind Preflight): box-sizing, typography, form resets, media defaults\n";
 	md += "- **Base utility classes**: spacing, sizing, colors, layout, typography, and more\n";
 	md +=
-		"- **On-demand scanning**: responsive variants, pseudo-state variants, color opacity, custom bracket values, and dark mode are generated on-the-fly for only the classes actually used in your markup\n\n";
+		"- **On-demand scanning**: responsive variants, orientation variants, pseudo-state variants, color opacity, custom bracket values, and dark mode are generated on-the-fly for only the classes actually used in your markup\n\n";
 
 	md += "### Media Breakpoints\n\n";
 	md += "| Prefix | Min Width |\n";
@@ -65,6 +65,17 @@ function generateMarkdown() {
 	}
 	md += "\n";
 
+	md += "### Orientation\n\n";
+	md +=
+		"Use the `landscape:` and `portrait:` prefixes to apply styles based on screen orientation (`@media (orientation: …)`) rather than width, so layouts respond to device rotation without picking an arbitrary breakpoint:\n\n";
+	md += "```html\n";
+	md += "<!-- Stack vertically in portrait, side-by-side in landscape. -->\n";
+	md += '<div class="flex flex-col landscape:flex-row">\n';
+	md += '  <div class="board">...</div>\n';
+	md += '  <div class="moves-panel portrait:hidden">...</div>\n';
+	md += "</div>\n";
+	md += "```\n\n";
+
 	md += "### Pseudo States\n\n";
 	md += "The following pseudo states are supported for all utilities:\n";
 	md += "- `hover:`\n";
@@ -82,7 +93,7 @@ function generateMarkdown() {
 	md += "```html\n";
 	md += '<div class="bg-[#fff] dark:bg-[#1a1a1a] p-4 dark:border-gray-700">\n';
 	md += "```\n\n";
-	md += `> **Note:** Responsive variants (\`sm:\`, \`md:\`, etc.), pseudo-state variants (\`hover:\`, \`focus:\`, \`disabled:\`), color opacity (\`/N\`), dark mode (\`dark:\`), and custom bracket values are all generated on-demand. Only the classes actually present in your markup are injected, keeping the CSS bundle small.\n\n`;
+	md += `> **Note:** Responsive variants (\`sm:\`, \`md:\`, etc.), orientation variants (\`landscape:\`, \`portrait:\`), pseudo-state variants (\`hover:\`, \`focus:\`, \`disabled:\`), color opacity (\`/N\`), dark mode (\`dark:\`), and custom bracket values are all generated on-demand. Only the classes actually present in your markup are injected, keeping the CSS bundle small.\n\n`;
 
 	md += "### Spacing (Margin & Padding)\n\n";
 	md += "Spacing utilities use a 0.25rem (4px) unit by default.\n\n";
@@ -373,6 +384,15 @@ function generateMarkdown() {
 		"bg-auto",
 		"bg-cover",
 		"bg-contain",
+		"bg-center",
+		"bg-top",
+		"bg-bottom",
+		"bg-left",
+		"bg-right",
+		"bg-left-top",
+		"bg-left-bottom",
+		"bg-right-top",
+		"bg-right-bottom",
 		"bg-no-repeat",
 		"bg-fixed",
 		"bg-local",