npm - aberdeen - Versions diffs - 1.5.0 → 1.6.0 - Mend

aberdeen 1.5.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/aberdeen.d.ts +71 -9
package/dist/aberdeen.js +47 -24
package/dist/aberdeen.js.map +3 -3
package/dist/route.js +4 -4
package/dist/route.js.map +3 -3
package/dist-min/aberdeen.js +7 -7
package/dist-min/aberdeen.js.map +3 -3
package/dist-min/route.js.map +2 -2
package/package.json +5 -2
package/skill/SKILL.md +579 -204
package/skill/aberdeen.md +2322 -0
package/skill/dispatcher.md +126 -0
package/skill/prediction.md +73 -0
package/skill/route.md +249 -0
package/skill/transitions.md +59 -0
package/src/aberdeen.ts +121 -35
package/src/route.ts +3 -3
package/skill/references/prediction.md +0 -45
package/skill/references/routing.md +0 -81
package/skill/references/transitions.md +0 -52

package/dist/aberdeen.d.ts CHANGED Viewed

@@ -252,23 +252,85 @@ export declare function merge<T extends object>(dst: T, dstKey: keyof T, value:
  */
 export declare const NO_COPY: unique symbol;
 /**
- * CSS variables that are output as native CSS custom properties.
+ * A reactive object containing CSS variable definitions.
  *
- * When a CSS value starts with `@`, it becomes `var(--name)` (or `var(--mN)` for numeric keys).
- * Pre-initialized with keys '1'-'12' mapping to an exponential rem scale (e.g., @1=0.25rem, @3=1rem).
+ * Any property you assign to `cssVars` becomes available as a CSS custom property throughout your application.
  *
- * Changes to cssVars are automatically reflected in a `<style>` tag in `<head>`, making updates
- * reactive across all elements using those variables.
+ * Use {@link setSpacingCssVars} to optionally initialize `cssVars[1]` through `cssVars[12]` with an exponential spacing scale.
+ *
+ * When you reference a CSS variable in Aberdeen using the `$` prefix (e.g., `$primary`), it automatically resolves to `var(--primary)`.
+ * For numeric keys (which can't be used directly as CSS custom property names), Aberdeen prefixes them with `m` (e.g., `$3` becomes `var(--m3)`).
+ *
+ * When you add the first property to cssVars, Aberdeen automatically creates a reactive `<style>` tag in `<head>`
+ * containing the `:root` CSS custom property declarations. The style tag is automatically removed if cssVars becomes empty.
  *
  * @example
- * ```typescript
+ * ```javascript
+ * import { cssVars, setSpacingCssVars, $ } from 'aberdeen';
+ *
+ * // Optionally initialize spacing scale
+ * setSpacingCssVars(); // Uses defaults: base=1, unit='rem'
+ *
+ * // Define custom colors - style tag is automatically created
  * cssVars.primary = '#3b82f6';
- * cssVars[3] = '16px'; // Override @3 to be 16px instead of 1rem
- * $('p color:@primary'); // Sets color to var(--primary)
- * $('div mt:@3'); // Sets margin-top to var(--m3)
+ * cssVars.danger = '#ef4444';
+ *
+ * // Use in elements with the $ prefix
+ * $('button bg:$primary fg:white');
+ *
+ * // Use spacing (if setSpacingCssVars() was called)
+ * $('div mt:$3'); // Sets margin-top to var(--m3)
  * ```
  */
 export declare const cssVars: Record<string, string>;
+/**
+ * Initializes `cssVars[1]` through `cssVars[12]` with an exponential spacing scale.
+ *
+ * The scale is calculated as `2^(n-3) * base`, providing values from `0.25 * base` to `512 * base`.
+ *
+ * @param base - The base size for the spacing scale (default: 1). If unit is 'rem' or 'em', this is in that unit. If unit is 'px', this is the pixel value.
+ * @param unit - The CSS unit to use (default: 'rem'). Can be 'rem', 'em', 'px', or any other valid CSS unit.
+ *
+ * @example
+ * ```javascript
+ * // Use default scale (0.25rem to 512rem)
+ * setSpacingCssVars();
+ *
+ * // Use custom base size
+ * setSpacingCssVars(16, 'px'); // 4px to 8192px
+ *
+ * // Use em units
+ * setSpacingCssVars(1, 'em'); // 0.25em to 512em
+ * ```
+ */
+export declare function setSpacingCssVars(base?: number, unit?: string): void;
+/**
+ * Returns whether the user's browser prefers a dark color scheme.
+ *
+ * This function is reactive - scopes that call it will re-execute when the
+ * browser's color scheme preference changes (via the `prefers-color-scheme` media query).
+ *
+ * Use this in combination with {@link $} and {@link cssVars} to implement theme switching:
+ *
+ * @returns `true` if the browser prefers dark mode, `false` if it prefers light mode.
+ *
+ * @example
+ * ```javascript
+ * import { darkMode, cssVars, $, mount } from 'aberdeen';
+ *
+ * // Reactively set colors based on browser preference
+ * $(() => {
+ *   if (darkMode()) { // Optionally override this with user settings
+ *     cssVars.bg = '#1a1a1a';
+ *     cssVars.fg = '#e5e5e5';
+ *   } else {
+ *     cssVars.bg = '#ffffff';
+ *     cssVars.fg = '#000000';
+ *   }
+ * });
+ * ```
+ */
+export declare function darkMode(): boolean;
 /**
  * Clone an (optionally proxied) object or array.
  *

package/dist/aberdeen.js CHANGED Viewed

@@ -1017,7 +1017,7 @@ function copyRecursive(dst, src, flags) {
           const old = dst.get(k);
           dst.delete(k);
           if (flags & COPY_EMIT) {
-            emit(dst, k, undefined, old);
+            emit(dst, k, EMPTY, old);
           }
           changed = true;
         }
@@ -1047,7 +1047,7 @@ function copyRecursive(dst, src, flags) {
           const old = dst[k];
           delete dst[k];
           if (flags & COPY_EMIT && old !== undefined) {
-            emit(dst, k, undefined, old);
+            emit(dst, k, EMPTY, old);
           }
           changed = true;
         }
@@ -1064,14 +1064,52 @@ var COPY_EMIT = 64;
 var NO_COPY = Symbol("NO_COPY");
 Promise.prototype[NO_COPY] = true;
 var cssVars = optProxy({});
-for (let i = 1;i <= 12; i++) {
-  cssVars[i] = 2 ** (i - 3) + "rem";
+function setSpacingCssVars(base = 1, unit = "rem") {
+  for (let i = 1;i <= 12; i++) {
+    cssVars[i] = 2 ** (i - 3) * base + unit;
+  }
 }
 var DIGIT_FIRST = /^\d/;
 function cssVarRef(name) {
   const varName = DIGIT_FIRST.test(name) ? `m${name}` : name;
   return `var(--${varName})`;
 }
+if (typeof document !== "undefined") {
+  leakScope(() => {
+    $(() => {
+      if (!isEmpty(cssVars)) {
+        mount(document.head, () => {
+          $("style", () => {
+            let css = `:root {
+`;
+            for (const [key, value] of Object.entries(cssVars)) {
+              const varName = DIGIT_FIRST.test(String(key)) ? `m${key}` : key;
+              css += `  --${varName}: ${value};
+`;
+            }
+            css += "}";
+            $(`#${css}`);
+          });
+        });
+      }
+    });
+  });
+}
+function darkMode() {
+  if (typeof window === "undefined" || !window.matchMedia)
+    return false;
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const changed = proxy(false);
+  changed.value;
+  function onChange() {
+    changed.value = true;
+  }
+  mediaQuery.addEventListener("change", onChange);
+  clean(() => {
+    mediaQuery.removeEventListener("change", onChange);
+  });
+  return mediaQuery.matches;
+}
 function clone(src) {
   if (NO_COPY in src)
     return src;
@@ -1310,7 +1348,7 @@ ${styleToCss(v, prefix)}}
           rules += styleToCss(v, k.includes("&") ? k.replace(/&/g, prefix) : `${prefix} ${k}`);
         }
       } else {
-        const val = v == null || v === false ? "" : typeof v === "string" ? v[0] === "@" ? cssVarRef(v.substring(1)) : v : String(v);
+        const val = v == null || v === false ? "" : typeof v === "string" ? v[0] === "$" ? cssVarRef(v.substring(1)) : v : String(v);
         const expanded = CSS_SHORT[k] || k;
         for (const prop of Array.isArray(expanded) ? expanded : [expanded]) {
           props += `${prop.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}:${val};`;
@@ -1338,7 +1376,7 @@ function applyArg(el, key, value) {
       el.classList.remove(...classes);
   } else if (key[0] === "$") {
     key = key.substring(1);
-    const val = value == null || value === false ? "" : typeof value === "string" ? value[0] === "@" ? cssVarRef(value.substring(1)) : value : String(value);
+    const val = value == null || value === false ? "" : typeof value === "string" ? value[0] === "$" ? cssVarRef(value.substring(1)) : value : String(value);
     const expanded = CSS_SHORT[key] || key;
     if (typeof expanded === "string") {
       el.style[expanded] = val;
@@ -1507,27 +1545,11 @@ function withEmitHandler(handler, func) {
     emit = oldEmitHandler;
   }
 }
-if (typeof document !== "undefined") {
-  leakScope(() => {
-    mount(document.head, () => {
-      $("style", () => {
-        let css = `:root {
-`;
-        for (const [key, value] of Object.entries(cssVars)) {
-          const varName = DIGIT_FIRST.test(String(key)) ? `m${key}` : key;
-          css += `  --${varName}: ${value};
-`;
-        }
-        css += "}";
-        $(`#${css}`);
-      });
-    });
-  });
-}
 export {
   withEmitHandler,
   unproxy,
   unmountAll,
+  setSpacingCssVars,
   setErrorHandler,
   runQueue,
   ref,
@@ -1548,6 +1570,7 @@ export {
   dump,
   derive,
   defaultEmitHandler,
+  darkMode,
   cssVars,
   count,
   copy,
@@ -1557,5 +1580,5 @@ export {
   $
 };
-//# debugId=69BD2D56BBDAB97164756E2164756E21
+//# debugId=30E505D12852725E64756E2164756E21
 //# sourceMappingURL=aberdeen.js.map