@kabel-project/kabel 1.0.7 → 1.0.9

package/dist/util/uid.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Strategy used to generate UIDs.
+ */
+export type UIDStrategy = "uuidv4" | "ulid" | "nanoid" | "short";
+export interface UIDOptions {
+    /** For "nanoid": length of the id (default 21) */
+    size?: number;
+    /** For "nanoid": custom alphabet (default URL-safe) */
+    alphabet?: string;
+}
+/**
+ * Generates an RFC4122-compliant UUID v4.
+ * Uses `crypto.randomUUID` if available.
+ *
+ * @returns {string} UUID v4 string.
+ */
+export declare function uuidv4(): string;
+/**
+ * Generates a 26-character ULID (time-sortable unique ID).
+ *
+ * @param {number} [date] - Optional timestamp in milliseconds. Defaults to `Date.now()`.
+ * @returns {string} ULID string.
+ */
+export declare function ulid(date?: number): string;
+/**
+ * Generates a NanoID-style string.
+ *
+ * @param {number} [size=21] - Length of the generated ID.
+ * @param {string} [alphabet=DEFAULT_ALPHABET] - Alphabet to use.
+ * @returns {string} Generated NanoID string.
+ */
+export declare function nanoid(size?: number, alphabet?: string): string;
+export declare function shortId(): string;
+/**
+ * Generates a UID using the specified strategy.
+ *
+ * @param {UIDStrategy} [strategy="uuidv4"] - The UID strategy to use.
+ * @param {UIDOptions} [opts={}] - Options for the selected strategy.
+ * @returns {string} Generated UID.
+ */
+export declare function generateUID(strategy?: UIDStrategy, opts?: UIDOptions): string;
+//# sourceMappingURL=uid.d.ts.map

package/dist/util/uid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uid.d.ts","sourceRoot":"","sources":["../../util/uid.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEjE,MAAM,WAAW,UAAU;IACvB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAyBD;;;;;GAKG;AACH,wBAAgB,MAAM,IAAI,MAAM,CA0B/B;AAKD;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CA0C1C;AAKD;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,IAAI,GAAE,MAAW,EAAE,QAAQ,GAAE,MAAyB,GAAG,MAAM,CAWrF;AASD,wBAAgB,OAAO,IAAI,MAAM,CAShC;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,QAAQ,GAAE,WAAsB,EAAE,IAAI,GAAE,UAAe,GAAG,MAAM,CAW3F"}

package/{util/unescape-html.ts → dist/util/unescape-html.d.ts}

@@ -1,22 +1,16 @@
-/**
- * Converts HTML-escaped characters in a string back to their literal form.
- *
- * Specifically, it replaces:
- * - `&lt;` with `<`
- * - `&gt;` with `>`
- * - `&quot;` with `"`
- * - `&apos;` with `'`
- * - `&amp;` with `&`
- *
- * @param {string} s - The string containing HTML-escaped characters.
- * @returns {string} The unescaped string with HTML entities replaced by their literal characters.
- */
-function unescapeAttr(s: string): string {
-	return s.replace(/&lt;/g, "<")
-			.replace(/&gt;/g, ">")
-			.replace(/&quot;/g, '"')
-			.replace(/&apos;/g, "'")
-			.replace(/&amp;/g, "&");
-}
-
-export default unescapeAttr;
+/**
+ * Converts HTML-escaped characters in a string back to their literal form.
+ *
+ * Specifically, it replaces:
+ * - `&lt;` with `<`
+ * - `&gt;` with `>`
+ * - `&quot;` with `"`
+ * - `&apos;` with `'`
+ * - `&amp;` with `&`
+ *
+ * @param {string} s - The string containing HTML-escaped characters.
+ * @returns {string} The unescaped string with HTML entities replaced by their literal characters.
+ */
+declare function unescapeAttr(s: string): string;
+export default unescapeAttr;
+//# sourceMappingURL=unescape-html.d.ts.map

package/dist/util/unescape-html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unescape-html.d.ts","sourceRoot":"","sources":["../../util/unescape-html.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,iBAAS,YAAY,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAMvC;AAED,eAAe,YAAY,CAAC"}

package/dist/util/user-state.d.ts

@@ -0,0 +1,37 @@
+type StateChangeCallback = (addedOrRemoved: 0 | 1) => void;
+declare class UserState {
+    private state;
+    private callbacks;
+    /**
+     * Stores the user's current UIX state
+     * Ex: 'typing'
+     */
+    constructor();
+    /**
+     * Adds a state
+     * @param name - The name of the state (ex: 'typing')
+     */
+    setState(name: string): void;
+    /**
+     * Removes a state
+     * @param name - The name of the state (ex: 'typing')
+     */
+    removeState(name: string): void;
+    /**
+     * Checks if a state is active
+     * @param name - The name of the state (ex: 'typing')
+     */
+    hasState(name: string): boolean;
+    /**
+     * Registers a callback for state changes
+     * @param name - Name of the state to check changes for.
+     * @param cb - Callback to call on state change.
+     */
+    onStateChange(name: string, cb: StateChangeCallback): void;
+    /** Internal: triggers callbacks for a state */
+    private triggerCallbacks;
+}
+declare const userState: UserState;
+export default userState;
+export { UserState };
+//# sourceMappingURL=user-state.d.ts.map

package/dist/util/user-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-state.d.ts","sourceRoot":"","sources":["../../util/user-state.ts"],"names":[],"mappings":"AAAA,KAAK,mBAAmB,GAAG,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;AAE3D,cAAM,SAAS;IACX,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,SAAS,CAAqC;IACtD;;;OAGG;;IAMH;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM;IAQrB;;;OAGG;IACH,WAAW,CAAC,IAAI,EAAE,MAAM;IAQxB;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM;IAIrB;;;;OAIG;IACH,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,mBAAmB;IAKnD,+CAA+C;IAC/C,OAAO,CAAC,gBAAgB;CAK3B;AACD,QAAA,MAAM,SAAS,WAAkB,CAAC;AAClC,eAAe,SAAS,CAAC;AACzB,OAAO,EACH,SAAS,EACZ,CAAC"}

package/{util/wait-anim-frames.ts → dist/util/wait-anim-frames.d.ts}

@@ -1,24 +1,11 @@
-/**
- * Delays execution of a callback by a specified number of animation frames.
- *
- * Uses `requestAnimationFrame` to count frames, then calls the provided callback.
- *
- * @param {number} frames - The number of animation frames to wait before executing the callback.
- * @param {() => void} callback - The function to execute after the specified frames have passed.
- */
-function waitFrames(frames: number, callback: () => void): void {
-	let count = 0;
-
-	function step() {
-		count++;
-		if (count >= frames) {
-			callback();
-		} else {
-			requestAnimationFrame(step);
-		}
-	}
-
-	requestAnimationFrame(step);
-}
-
-export default waitFrames;
+/**
+ * Delays execution of a callback by a specified number of animation frames.
+ *
+ * Uses `requestAnimationFrame` to count frames, then calls the provided callback.
+ *
+ * @param {number} frames - The number of animation frames to wait before executing the callback.
+ * @param {() => void} callback - The function to execute after the specified frames have passed.
+ */
+declare function waitFrames(frames: number, callback: () => void): void;
+export default waitFrames;
+//# sourceMappingURL=wait-anim-frames.d.ts.map

package/dist/util/wait-anim-frames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wait-anim-frames.d.ts","sourceRoot":"","sources":["../../util/wait-anim-frames.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,iBAAS,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI,CAa9D;AAED,eAAe,UAAU,CAAC"}

package/dist/util/window-listeners.d.ts

@@ -0,0 +1,8 @@
+type WindowEventKeys = 'resize' | 'scroll' | 'blur' | 'focus' | 'visibilitychange' | 'pointerlockchange' | 'beforeunload';
+type WindowListenersMap = Record<WindowEventKeys, Array<(event: Event) => void>>;
+declare const windowListeners: WindowListenersMap;
+export declare function addWindowListener(type: WindowEventKeys, fn: (event: Event) => void): void;
+export declare function removeWindowListener(type: WindowEventKeys, fn: (event: Event) => void): void;
+export declare function clearWindowListeners(type?: WindowEventKeys): void;
+export default windowListeners;
+//# sourceMappingURL=window-listeners.d.ts.map

package/dist/util/window-listeners.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"window-listeners.d.ts","sourceRoot":"","sources":["../../util/window-listeners.ts"],"names":[],"mappings":"AAAA,KAAK,eAAe,GACjB,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,OAAO,GACP,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,CAAC;AAElB,KAAK,kBAAkB,GAAG,MAAM,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC;AAEjF,QAAA,MAAM,eAAe,EAAE,kBAQtB,CAAC;AAmBF,wBAAgB,iBAAiB,CAChC,IAAI,EAAE,eAAe,EACrB,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,QAG1B;AAED,wBAAgB,oBAAoB,CACnC,IAAI,EAAE,eAAe,EACrB,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,QAK1B;AAED,wBAAgB,oBAAoB,CAAC,IAAI,CAAC,EAAE,eAAe,QAK1D;AAED,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@kabel-project/kabel",
-    "version": "1.0.7",
-    "main": "index.js",
+    "version": "1.0.9",
+    "main": "dist/kabel.js",
     "scripts": {
         "test": "node test-server.js",
         "build": "npx webpack",
@@ -16,6 +16,9 @@
         "node",
         "graph"
     ],
+    "files": [
+        "dist"
+    ],
     "repository": "https://github.com/FentFentFent/Kabel",
     "author": "fentiefentfent",
     "license": "ISC",

package/(1.0.7)kabel.md

@@ -1,18 +0,0 @@
-**chore(release): Kabel 1.0.6 release**
-- Implemented the Apollo renderer, a renderer that tries to match the "sticky note" style of other blueprint interfaces.
-- Added shadow FX to default renderer.
-- Added background pattern system under wsSvg.grid, options in Kabel.inject for grid added as well.
-- Created new /themes folder, created dark and classic (Default) themes, added theme options to inject.
-- Fixed input boxes (comment, raw field) so that when you click at a specific point, the caret starts there.
-- Decided that where you click within a comment input is where it should start editing at.
-- Added wsSvg.dragState to store information about the current block being dragged.
-- Cleaned up the Flyout class to break up large methods into multiple. This makes extensions easier.
-- Implemented headless inject method along with the WorkspaceSVG's headless counterpart class. (Creating simulated workspaces)
-- Cleaned up renderer which was in preparation for the second default renderer.
-- Added full JSDoc comments to renderer for cleanliness and maintainability.
-- Cleaned up comment renderer for easier subclassing.
-- Removed two useless frame-waits in WorkspaceSVG class.
-
-
-**chore(release): Kabel 1.0.7 release**
-- Very minor documentation update.

package/_READ_ME_MEDIA_/documentation/docs.md

@@ -1,293 +0,0 @@
-
-# Kabel Documentation
-
-**Kabel** is a node-based visual programming editor for building interactive, logic-driven UIs in the browser. It’s built around JavaScript and uses SVG for rendering. Kabel supports node creation, custom fields, widgets, toolboxes, and smooth workspace controls.
-
----
-
-## Table of Contents
-
-1. Getting Started
-2. Setting Up Your First Workspace
-3. Creating Your First Node Prototype
-4. Creating a Toolbox
-5. Manipulating Nodes
-6. Serializing & Deserializing Nodes
-7. Finishing Up
-
-## In-depth Docs
-[Kabel API Documentation](../../docs/globals.md)
-
----
-
-## 1. Getting Started
-
-You can include Kabel either via a script tag or import it as a module:
-
-```html
-<script src="./kabel.js"></script>
-```
-
-Once loaded:
-
-```js
-if (typeof Kabel !== 'undefined') {
-	console.log('Kabel is ready!');
-}
-```
-
-That’s all you need to confirm it’s available before initializing a workspace.
-
----
-
-## 2. Setting Up Your First Workspace
-
-The **workspace** is where nodes live and interact. Start by creating an HTML container:
-
-```js
-const el = document.createElement('div');
-Object.assign(el.style, {
-	width: '100vw',
-	height: '100vh',
-	background: '#f0f0f0'
-});
-document.body.appendChild(el);
-```
-
-Then inject Kabel into that container:
-
-```js
-const ws = Kabel.inject(el, {
-    theme: 'Dark',
-    renderer: 'atlas', // Or `Apollo`
-	moveSpeed: 6,
-	controls: {
-		wasd: true,
-		wasdSmooth: true,
-		wasdAccelerate: 1,
-		wasdFriction: 0.9
-	},
-	toolbox: { /* defined later */ }
-});
-```
-
-This gives you a fullscreen workspace with smooth WASD movement controls.
-
----
-
-## 3. Creating Your First Node Prototype
-
-Nodes are defined once as **prototypes** under `Kabel.Nodes`. Here’s an example:
-
-```js
-Kabel.Nodes['my_node'] = {
-	init() {
-		this.jsonInit({
-			previousConnection: true,
-			nextConnection: true,
-			labelText: 'TopbarText',
-			type: 'my_node',
-			primaryColor: '#cc0c00',
-			tertiaryColor: '#660500',
-			arguments: [
-				{ name: 'FLD', type: 'field_str', label: 'LabelText: ', value: 'ValueText' },
-				{ name: 'Dummy', type: 'field_dummy', label: 'Label with no input!' },
-				{ name: 'Conn', type: 'connection', label: 'Label!' },
-				{ name: 'Conn2', type: 'field_both', label: 'lowk: ', value: 'lowk' },
-				{
-					name: 'Dropdown',
-					type: 'dropdown',
-					label: 'lowk dropdown?: ',
-					options: ['Oooo option', { text: 'Opt', value: 'opt' }]
-				}
-			]
-		});
-	}
-};
-```
-
-**Key options:**
-
-* `previousConnection` / `nextConnection` → Whether the node can chain with others.
-* `arguments` → Defines fields, inputs, and connection points.
-* `jsonInit()` → Initializes node configuration.
-
----
-
-## 4. Creating a Toolbox
-
-Toolboxes organize your available nodes:
-
-```js
-toolbox: {
-	type: 'category',
-	contents: [{
-		name: 'Cat',
-		color: '#cc0c00',
-		contents: [{
-			type: 'my_node',
-			arguments: {
-                //FIELD_NAME: FIELD_VALUE
-            }
-		}]
-	}]
-}
-```
-
-**Toolbox types:**
-
-* `'category'` → Groups nodes visually into collapsible sections.
-* `'flyout'` → Displays all nodes in one scrollable list.
-
-**Category JSON fields:**
-
-* `name`: The category name.
-* `color`: The display color.
-* `contents`: Array of node definitions.
-
-> Currently, categories and flyouts can only contain nodes. Support for buttons or UI elements may be added later.
-
----
-
-## 5. Manipulating Node Properties
-
-Once a node is created, you can move, modify, or connect it programmatically:
-
-```js
-const node = new Kabel.NodeSvg(Kabel.Nodes['my_node'], ws);
-node.init();
-
-const node2 = new Kabel.NodeSvg(Kabel.Nodes['my_node'], ws);
-node2.init();
-node2.relativeCoords.set(20, 0);
-```
-
-Connect them:
-
-```js
-node.nextConnection.to = node2;
-node2.previousConnection.from = node;
-ws.redraw();
-```
-
-You can also manipulate the SVG directly (temporary, not saved across rerenders):
-
-```js
-node.svg.highlight('#ff0');
-node.svg.setScale(1);
-node.svg.moveTo(0, 1);
-node.svg.applyTransform('translate(0, 1)');
-node.svg.getRaw(); // Returns the svg.js G element
-```
-
----
-
-### Optional: Widgets
-
-**Widgets** are custom UI overlays within the workspace:
-
-```js
-Kabel.Widgets['testWidget'] = {
-	name: 'Test Widget',
-	width: 150,
-	height: 100,
-	coords: new Kabel.Coordinates(50, 50),
-	html: '<button id="counterBtn">Count: 0</button>',
-	init(widget, container) {
-		let count = 0;
-		const btn = container.querySelector('#counterBtn');
-		if (btn) {
-			btn.addEventListener('click', () => {
-				count++;
-				btn.textContent = 'Count: ' + count;
-			});
-		}
-	}
-};
-
-const myWidget = ws.newWidget('testWidget');
-if (myWidget) myWidget.show();
-```
-
-Widgets let you add custom interactivity or information panels.
-
----
-
-## 6. Serializing Nodes
-
-Kabel supports both **circular** and **non-circular** JSON serialization.
-
-### Circular Serialization
-
-Contains live object references (not exportable as plain JSON, but usable within JS).
-
-```js
-const circular = node.serialize();
-```
-
-Example (simplified):
-
-```json
-{
-	"id": "sisDG24Gp6lc7*S#m#I9c",
-	"type": "my_node",
-	"nextConnection": {
-		"node": "[CircularNodeRef]"
-	},
-	"fields": [...]
-}
-```
-
----
-
-### Non-Circular Serialization
-
-Safe for exporting or saving to files:
-
-```js
-const nonCircular = node.toJson();
-```
-
-Example:
-
-```json
-{
-	"7f7#2Rrt16uFuH^2f2^ad": {
-		"id": "7f7#2Rrt16uFuH^2f2^ad",
-		"type": "my_node",
-		"colors": { "primary": "#cc0c00", "tertiary": "#660500" },
-		"label": "TopbarText",
-		"nextConnection": { "node": "jX^$kh)yHW5p^bx98vD#s" },
-		"fields": [...]
-	}
-}
-```
-
----
-
-### Workspace Serialization
-
-```js
-// Serialize
-const data = workspace.toJson(false); // false = non-circular
-
-// Deserialize
-workspace.fromJson(data);
-```
-
-The serialization format automatically includes the circular/non-circular flag internally.
-
----
-
-## 7. Finishing Up
-
-You can expose internals for quick debugging:
-
-```js
-window.ws = ws;
-window.nodes = [node, node2];
-```
-
-That’s it — you now have a working Kabel workspace with nodes, a toolbox, and serialization support.
-
----