@kabel-project/kabel 1.0.7

package/src/prototypes.ts

@@ -0,0 +1,9 @@
+import { NodePrototype } from "./node-types";
+
+/**
+ * A registry of all node prototypes by name.
+ * Maps a string key (node type name) to a NodePrototype object
+ */
+const NodePrototypes: { [key: string]: NodePrototype } = {};
+
+export default NodePrototypes;

package/src/renderer-map.ts

@@ -0,0 +1,86 @@
+import type RendererType from "../renderers/renderer";
+import Renderer from "../renderers/renderer";
+/**
+ * Interface for the renderer map.
+ * Maps a string key (renderer name) to a renderer class.
+ */
+interface RendererMapInterface {
+    [key: string]: typeof RendererType;
+}
+
+// Top-level renderer map storage
+const RendererMap: RendererMapInterface = {};
+
+/**
+ * Class for managing registered renderer classes.
+ * Provides methods to register, delete, get, list, and resolve renderers.
+ */
+class RMap {
+    /**
+     * Registers a renderer class under a given name.
+     * @param RendererCls The renderer class to register
+     * @param optName Optional name to register under. Defaults to `RendererCls.NAME`
+     */
+    static register(RendererCls: typeof RendererType, optName?: string) {
+        const name = optName ?? RendererCls.NAME;
+        RendererMap[name] = RendererCls;
+    }
+
+    /**
+     * Deletes a renderer from the map by name.
+     * Cannot delete the "default" renderer.
+     * @param name The name of the renderer to delete
+     * @returns `true` if deleted, `false` otherwise
+     */
+    static delete(name: string) {
+        if (name === 'default') return false;
+        if (RendererMap[name]) {
+            delete RendererMap[name];
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Retrieves a renderer class by name.
+     * Returns the default renderer if the name is not found.
+     * @param name The name of the renderer to get
+     * @returns The renderer class
+     */
+    static get(name: string): typeof RendererType {
+        const Renderer = require("../renderers/renderer").default as typeof RendererType;
+        return RendererMap[name] ?? RendererMap['default'] ?? Renderer;
+    }
+
+    /**
+     * Lists all registered renderer names.
+     * @returns Array of registered renderer names
+     */
+    static list() {
+        return Object.keys(RendererMap);
+    }
+
+    /**
+     * Resolves input into a renderer class.
+     * - If `input` is undefined, returns the default renderer
+     * - If `input` is a string, returns the renderer with that name
+     * - If `input` is a class, returns the class itself
+     * @param input Optional renderer name or class
+     * @returns Renderer class
+     */
+    static resolve(input?: string | typeof RendererType): typeof RendererType {
+        const Renderer = require("../renderers/renderer").default as typeof RendererType;
+
+        if (!input) return RendererMap['default'] ?? Renderer;
+
+        if (typeof input === 'string') return RMap.get(input);
+
+        if (typeof input === 'function') return input as typeof RendererType;
+
+        return RendererMap['default'] ?? Renderer;
+    }
+}
+
+// Default renderers registered in core.ts
+
+export { RMap, RendererMap };

package/src/styles.css

@@ -0,0 +1,224 @@
+/* Workspace wrapper: horizontal layout */
+.KabelWorkspaceWrapper {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    background: #f0f0f0;
+    /* light gray background */
+    overflow: hidden;
+    position: relative;
+}
+
+/* Toolbox panel (left) */
+.KabelToolbox {
+    width: 12%;
+    min-width: 150px;
+    height: 100%;
+    background: rgba(240, 240, 240, 0.95);
+    border-right: 1px solid #ccc;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+    overflow-y: auto;
+}
+
+/* Context menu container */
+.KabelContextMenu {
+    position: absolute;
+    background: #1e1e2f;
+    color: #000000;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+    padding: 4px 0;
+    font-family: 'Segoe UI', sans-serif;
+    font-size: 14px;
+    min-width: 160px;
+    z-index: 9999;
+    user-select: none;
+    overflow: visible;
+    height: auto;
+    transition: opacity 0.15s ease, transform 0.15s ease;
+    opacity: 0;
+    transform: scale(0.95);
+    display: flex;
+    flex-direction: column;
+}
+
+/* Show state */
+.KabelContextMenu.show {
+    opacity: 1;
+    transform: scale(1);
+}
+
+/* Individual option */
+.KabelContextOption {
+    padding: 8px 16px;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease;
+}
+.KabelContextOption:hover {
+    background: #b0adb0;
+    color: #fff;
+}
+.KabelContextOption.disabled {
+	opacity: 0.35;
+	cursor: not-allowed;
+	color: #777; /* dim it so it's obviously off */
+	background: transparent;
+	pointer-events: none;
+}
+
+/* make sure hover never triggers visually */
+.KabelContextOption.disabled:hover {
+	background: transparent;
+	color: #777;
+}
+
+/* Optional: active click effect */
+.KabelContextOption:active {
+    background: #fff;
+    color: #000;
+}
+
+/* Scrollbar if too many options */
+.KabelContextMenu::-webkit-scrollbar {
+    width: 6px;
+}
+
+.KabelContextMenu::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+}
+
+/* Category buttons */
+
+.KabelCategoryRow {
+    background: #fff;
+    border: 1px solid #ccc;
+    padding: 4px 8px;
+    margin-bottom: 4px;
+    border-radius: 4px;
+    height: 5%;
+    padding: 6px;
+    cursor: pointer;
+    text-align: left;
+    transition: background 0.2s, color 0.2s;
+}
+
+.KabelToolbox button:hover {
+    background: #e6e6e6;
+    color: #333;
+}
+
+.KabelConnectionBubbleHighlight {
+    stroke: yellow !important;
+    stroke-width: 6px !important;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+    filter: drop-shadow(0 0 6px rgba(255, 255, 0, 0.9));
+}
+
+.KabelConnectionBubbleHighlightWrong {
+    stroke: rgb(255, 0, 0) !important;
+    stroke-width: 6px !important;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+    filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.9));
+}
+
+/* Container */
+.KabelDropdownMenu {
+    position: absolute;
+    display: none;
+    background: #1e1e1e;
+    color: #f0f0f0;
+    font-family: sans-serif;
+    font-size: 14px;
+    border: 1px solid #333;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    padding: 4px 0;
+    z-index: 9999;
+    user-select: none;
+    animation: fadeIn 0.15s ease-out;
+}
+
+/* Dropdown items */
+.KabelDropdownItem {
+    padding: 6px 12px;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+
+/* Hover + focus states */
+.KabelDropdownItem:hover,
+.KabelDropdownItem:focus {
+    background: #2d2d2d;
+}
+
+/* Active (clicked) state */
+.KabelDropdownItem:active {
+    background: #3a3a3a;
+}
+
+/* Optional: highlight selected value */
+.KabelDropdownItem.selected {
+    background: #444;
+    font-weight: 600;
+}
+
+/* Smooth open effect */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-3px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+
+
+/* Flyout panel (right) */
+.KabelFlyout {
+    width: 20%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.95);
+    border-left: 1px solid #ccc;
+    box-sizing: border-box;
+    overflow-y: auto;
+    position: relative;
+    /* for absolute positioning of nodes inside */
+    display: none;
+    /* hidden by default */
+    padding: 8px;
+}
+
+/* Flyout nodes */
+.KabelFlyoutNode {
+    padding: 6px 10px;
+    margin-bottom: 4px;
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+    transition: background 0.2s;
+}
+
+.KabelFlyoutNode:hover {
+    background: #e0e0e0;
+}
+
+/* SVG workspace area */
+.KabelWorkspaceWrapper svg {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    /* white canvas background */
+    display: block;
+}

package/src/toolbox.ts

@@ -0,0 +1,125 @@
+import Flyout from "./flyout";
+import { InjectOptions, TblxCategoryStruct, TblxNodeStruct } from "./inject";
+import WorkspaceSvg, { WSTheme } from "./workspace-svg";
+import Category from "./category";
+
+/**
+ * Represents the toolbox in a Kabel workspace.
+ * The toolbox can be either a flyout or a category-based toolbox.
+ */
+class Toolbox {
+    /** Toolbox type: 1 = category toolbox, 2 = flyout toolbox */
+    type: 1 | 2;
+
+    /** Reference to the workspace this toolbox belongs to */
+    workspace: WorkspaceSvg;
+
+    /** Workspace options for initialization */
+    wsOptions: InjectOptions;
+
+    /** Flyout instance for node display */
+    _flyout: Flyout;
+
+    /** Contents of the toolbox (nodes or categories) */
+    _contents: TblxNodeStruct[] | TblxCategoryStruct[];
+
+    /** DOM container element for the toolbox */
+    container: HTMLDivElement;
+
+    /** List of categories (if using a category toolbox) */
+    _categories: Category[] = [];
+
+    /**
+     * Creates a new Toolbox instance attached to a workspace.
+     * @param workspace The workspace instance to attach this toolbox to
+     */
+    constructor(workspace: WorkspaceSvg) {
+        this.workspace = workspace;
+        this.wsOptions = this.getOptions();
+        this.type = this.wsOptions.toolbox?.type == "flyout" ? 2 : 1;
+        this._contents = this.wsOptions.toolbox?.contents ?? [];
+
+        // Pass toolbox reference to flyout
+        this._flyout = new Flyout(this);
+
+        // Create container element
+        this.container = document.createElement("div");
+        this.container.className = "KabelToolbox";
+        this.container.style.position = "absolute";
+        this.container.style.left = "0";
+        this.container.style.top = "0";
+        this.container.style.width = "20%";
+        this.container.style.height = "100%";
+        this.container.style.background = "rgba(240,240,240,0.9)";
+        this.container.style.overflowY = "auto";
+
+        // Append to workspace top layer
+        workspace._wsTop.appendChild(this.container);
+
+        // Initialize toolbox depending on type
+        if (this.type === 1) this.initCategoryToolbox();
+        if (this.type === 2) this.initFlyoutToolbox();
+    }
+    /**
+     * Applies a WSTheme to the toolbox and flyout elements.
+     * @param theme The workspace theme to apply
+     */
+    updateStyles(theme: WSTheme) {
+        if (!theme?.UIStyles) return;
+
+        const { toolboxCategoriesBG, toolboxFlyoutBG } = theme.UIStyles;
+
+        const applyStyles = (el: HTMLElement, styles?: Partial<CSSStyleDeclaration>) => {
+            if (!styles) return;
+
+            for (const key in styles) {
+                const k = key as keyof CSSStyleDeclaration;
+                const v = styles[k];
+                // Only assign if value exists
+                if (v !== undefined) {
+                    // cast to any to avoid TS errors
+                    (el.style as any)[k] = v;
+                }
+            }
+        };
+
+        if (this.type === 1) applyStyles(this.container, toolboxCategoriesBG);
+        if (this._flyout?.container) applyStyles(this._flyout.container, toolboxFlyoutBG);
+    }
+
+
+    /**
+     * Retrieves the workspace options.
+     * @returns The workspace's InjectOptions
+     */
+    getOptions() {
+        return this.workspace.options;
+    }
+
+    /**
+     * Initializes a category-based toolbox.
+     * Converts the toolbox contents into Category instances and attaches them.
+     */
+    initCategoryToolbox() {
+        const categories = this._contents as TblxCategoryStruct[];
+        categories.forEach(cData => {
+            const category = new Category(this, cData);
+            this._categories.push(category);
+        });
+
+        // Hide flyout when workspace is clicked
+        this.workspace.svg.on("click", () => this._flyout.hide());
+    }
+
+    /**
+     * Initializes a flyout toolbox.
+     * Fills the flyout with the node definitions from the toolbox contents.
+     */
+    initFlyoutToolbox() {
+        this.container.style.display = "none";
+        const nodes = this._contents as TblxNodeStruct[];
+        this._flyout.fill(nodes);
+    }
+}
+
+export default Toolbox;

package/src/types.ts

@@ -0,0 +1,205 @@
+import Kabel from './core';
+import { DropdownContainer } from './dropdown-menu';
+import WorkspaceSvg from './workspace-svg';
+
+// -------------------- Types --------------------
+/**
+ * Represents the UIX (UI experience utilities) portion of Kabel.
+ */
+export interface KabelUIX {
+    /**
+     * Event system for SVG.js elements, allowing reusable functionality and event handling.
+     */
+    events: typeof Kabel.UIX.events;
+    /** handles loading fonts from Google fonts and possibly other CDNs in the future. */
+    FontManager: typeof Kabel.UIX.FontManager;
+    /**
+     * Stores the current state of the user.
+     */
+    userState: typeof Kabel.UIX.userState;
+
+    /**
+     * window listener system.
+     */
+    windowListeners: typeof Kabel.UIX.windowListeners;
+}
+
+/**
+ * Utility functions and classes provided by Kabel.
+ */
+export interface KabelUtils {
+    /** Path manipulation utilities. */
+    Path: typeof Kabel.Utils.Path;
+
+    /** Wait for a number of animation frames. */
+    waitFrames: typeof Kabel.Utils.waitFrames;
+
+    /** SVG utilities. */
+    SVG: typeof Kabel.Utils.SVG;
+
+    /** Parses a color string into an internal format. */
+    parseColor: typeof Kabel.Utils.parseColor;
+
+    /** Unique ID generation utilities. */
+    UID: typeof Kabel.Utils.UID;
+
+    /** Event emitter class for custom events. */
+    EventEmitter: typeof Kabel.Utils.EventEmitter;
+
+    /** Checks if an object has a property. */
+    hasProp: typeof Kabel.Utils.hasProp;
+
+    /** Styler helper functions. */
+    styler: typeof Kabel.Utils.styler;
+
+    /** Styler class for managing styles. */
+    Styler: typeof Kabel.Utils.Styler;
+
+    /** Escapes HTML for safe insertion into the DOM. */
+    escapeHTML: typeof Kabel.Utils.escapeHTML;
+
+    /** Unescapes HTML strings back to their original form. */
+    unescapeHTML: typeof Kabel.Utils.unescapeHTML;
+}
+
+/**
+ * Node rendering utilities and classes.
+ */
+export interface KabelNodeRendering {
+    /** Map of registered node renderers. */
+    rendererMap: typeof Kabel.nodeRendering.rendererMap;
+    
+    Apollo: typeof Kabel.nodeRendering.Apollo;
+    Atlas: typeof Kabel.nodeRendering.Atlas;
+
+    /** Node renderer class. */
+    Renderer: typeof Kabel.nodeRendering.Renderer;
+
+    /** Constant class to be instantiated and used in node rendering. */
+    RendererConstants: typeof Kabel.nodeRendering.RendererConstants;
+    /**
+     * used by the renderer to create RepresenterNodes for each rendered node. (node.svg API is provided by this)
+     */
+    Representer: typeof Kabel.nodeRendering.Representer;
+    /**
+     * Class behind node.svg API. Represents a renderer's DrawState.
+     */
+    RepresenterNode: typeof Kabel.nodeRendering.RepresenterNode;
+}
+
+/**
+ * Comment rendering utilities and classes.
+ */
+export interface KabelCommentRendering {
+    /** Comment model class. */
+    CommentModel: typeof Kabel.commentRendering.CommentModel;
+
+    /** Comment renderer class. */
+    CommentRenderer: typeof Kabel.commentRendering.CommentRenderer;
+}
+/** The current environment */
+export interface KabelEnv {
+    isBrowser: boolean;
+    isNode: boolean;
+    isWebWorker: boolean;
+}
+/**
+ * The main Kabel interface exposing core functionality, utilities, renderers, and UI components.
+ */
+export interface KabelInterface {
+    env: KabelEnv
+    /** UI experience utilities section */
+    UIX: KabelUIX;
+
+    /** Context menu utilities. */
+    ContextMenu: typeof Kabel.ContextMenu;
+
+    /** Utility functions and classes. */
+    Utils: KabelUtils;
+
+    /** Widget system for creating interactive UI components. */
+    Widget: typeof Kabel.Widget;
+
+    /** Color categories for nodes and other UI elements. */
+    CategoryColors: typeof Kabel.CategoryColors;
+
+    /** Connection system for nodes. */
+    Connection: typeof Kabel.Connection;
+
+    /** Coordinates utility. */
+    Coordinates: typeof Kabel.Coordinates;
+
+    /** Base field class for node inputs. */
+    Field: typeof Kabel.Field;
+
+    /** Dummy field placeholder class. */
+    DummyField: typeof Kabel.DummyField;
+
+    /** Mapping of fields by type or ID. */
+    FieldMap: typeof Kabel.FieldMap;
+
+    /** Number input field for nodes. */
+    NumberField: typeof Kabel.NumberField;
+
+    /** Optional connection field. */
+    OptConnectField: typeof Kabel.OptConnectField;
+
+    /** Text input field for nodes. */
+    TextField: typeof Kabel.TextField;
+
+    /** Function to create a new workspace in kabel */
+    inject: typeof Kabel.inject;
+    /** Function to create a new workspace in kabel (headless) */
+    injectHeadless: typeof Kabel.injectHeadless;
+    /** Message type for injections. */
+    InjectMsg: typeof Kabel.InjectMsg;
+
+    /** Clears the main workspace. */
+    clearMainWorkspace: typeof Kabel.clearMainWorkspace;
+
+    /** Retrieves the main workspace instance. */
+    getMainWorkspace: typeof Kabel.getMainWorkspace;
+
+    /** Sets the main workspace instance. */
+    setMainWorkspace: typeof Kabel.setMainWorkspace;
+
+    /** NodeSVG class, represents a node in the workspace */
+    NodeSvg: typeof Kabel.NodeSvg;
+
+    /** Collection of registered node prototypes. */
+    Nodes: typeof Kabel.Nodes;
+
+    /** Collection of registered widget prototypes. */
+    Widgets: typeof Kabel.Widgets;
+
+    /** Workspace SVG class. */
+    WorkspaceSvg: typeof Kabel.WorkspaceSvg;
+
+    /** Workspace controller class which moves the workspace camera based on user interactions. */
+    WorkspaceController: typeof Kabel.WorkspaceController;
+
+    /** WASD controller for navigating the workspace. */
+    WASDController: typeof Kabel.WASDController;
+
+    /** Node rendering container, contains Renderer and RendererConstants classes */
+    nodeRendering: KabelNodeRendering;
+    /**
+     * A bunch of atlas renderer related classes.
+     */
+    atlas: typeof Kabel.atlas;
+    /**
+     * A bunch of apollo renderer related classes
+     */
+    apollo: typeof Kabel.apollo;
+    
+    /** Comment rendering container, contains CommentModel and CommentRenderer classes. */
+    commentRendering: KabelCommentRendering;
+
+    /** The currently active main workspace instance. */
+    _mainWorkspace: WorkspaceSvg;
+
+    /** Dropdown UI singleton container. */
+    Dropdown: DropdownContainer;
+}
+
+export default KabelInterface;