juxscript 1.1.298 → 1.1.300

package/dist/lib/components/style.d.ts

@@ -0,0 +1,27 @@
+declare class Style {
+    id: string;
+    private _element;
+    constructor(id: string, css: string);
+    /** Replace the entire stylesheet content */
+    setContent(css: string): this;
+    /** Append additional CSS rules */
+    append(css: string): this;
+    /** Get current CSS content */
+    getContent(): string;
+    /** Remove the style tag from the document */
+    remove(): void;
+    getElement(): HTMLStyleElement;
+}
+/**
+ * Inject a CSS string into the document head.
+ *
+ * @example
+ * jux.style('my-styles', `
+ *   .sidebar { background: hsl(var(--card)); }
+ *   .nav-item:hover { background: hsl(var(--accent)); }
+ * `);
+ */
+export declare function style(id: string, css: string): Style;
+export { Style };
+export default style;
+//# sourceMappingURL=style.d.ts.map

package/dist/lib/components/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../lib/components/style.ts"],"names":[],"mappings":"AAEA,cAAM,KAAK;IACP,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,QAAQ,CAAmB;gBAEvB,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM;IASnC,4CAA4C;IAC5C,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK7B,kCAAkC;IAClC,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAKzB,8BAA8B;IAC9B,UAAU,IAAI,MAAM;IAIpB,6CAA6C;IAC7C,MAAM,IAAI,IAAI;IAId,UAAU,IAAI,gBAAgB;CAGjC;AAED;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,KAAK,CAQpD;AAED,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,eAAe,KAAK,CAAC"}

package/dist/lib/components/style.js

@@ -0,0 +1,52 @@
+import generateId from '../utils/idgen.js';
+class Style {
+    constructor(id, css) {
+        this.id = id || generateId();
+        this._element = document.createElement('style');
+        this._element.id = this.id;
+        this._element.setAttribute('data-jux-style', '');
+        this._element.textContent = css;
+        document.head.appendChild(this._element);
+    }
+    /** Replace the entire stylesheet content */
+    setContent(css) {
+        this._element.textContent = css;
+        return this;
+    }
+    /** Append additional CSS rules */
+    append(css) {
+        this._element.textContent += '\n' + css;
+        return this;
+    }
+    /** Get current CSS content */
+    getContent() {
+        return this._element.textContent ?? '';
+    }
+    /** Remove the style tag from the document */
+    remove() {
+        this._element.remove();
+    }
+    getElement() {
+        return this._element;
+    }
+}
+/**
+ * Inject a CSS string into the document head.
+ *
+ * @example
+ * jux.style('my-styles', `
+ *   .sidebar { background: hsl(var(--card)); }
+ *   .nav-item:hover { background: hsl(var(--accent)); }
+ * `);
+ */
+export function style(id, css) {
+    // If a style with this id already exists, update it
+    const existing = document.getElementById(id);
+    if (existing && existing instanceof HTMLStyleElement) {
+        existing.textContent = css;
+        return Object.assign(new Style('__skip__', ''), { _element: existing, id });
+    }
+    return new Style(id, css);
+}
+export { Style };
+export default style;

package/dist/lib/index.d.ts

@@ -8,6 +8,7 @@ import { pageState } from "./state/pageState.js";
 import { data } from "./components/data.js";
 import { store } from "./components/store.js";
 import { devtools } from "./devtools/devtools.js";
+import { style } from "./components/style.js";
 export declare const jux: {
     tag: typeof tag;
     div: typeof div;
@@ -29,6 +30,7 @@ export declare const jux: {
     data: typeof data;
     store: typeof store;
     devtools: typeof devtools;
+    style: typeof style;
 };
 export { pageState };
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;CAgBf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE9C,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;CAiBf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/lib/index.js

@@ -8,6 +8,7 @@ import { pageState } from "./state/pageState.js";
 import { data } from "./components/data.js";
 import { store } from "./components/store.js";
 import { devtools } from "./devtools/devtools.js";
+import { style } from "./components/style.js";
 export const jux = {
     tag,
     div,
@@ -23,7 +24,8 @@ export const jux = {
     checkboxGroup,
     data,
     store,
-    devtools
+    devtools,
+    style
 };
 export { pageState };
 jux.watch = pageState.__watch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.298",
+  "version": "1.1.300",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",