@v-ibe/core 0.1.0

package/dist/router/trie.js

@@ -0,0 +1,126 @@
+import { Service } from "../DI/decorators/service.js";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc(target, name));
+  __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn(it) && (target = it);
+  }
+  return __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var _Trie_decorators, _init;
+_Trie_decorators = [Service];
+class Trie {
+  constructor() {
+    this.root = this.createNode();
+    this._maxDepth = 0;
+  }
+  // 'insert' ahora acepta un id, loader, metadata, policies y slot.
+  insert(id, path, loader, metadata, policies, slot) {
+    const segments = path.split("/").filter(Boolean);
+    let currentNode = this.root;
+    this._maxDepth = Math.max(this._maxDepth, segments.length + 1);
+    for (const segment of segments) {
+      if (segment.startsWith(":")) {
+        const paramName = segment.slice(1);
+        if (!currentNode.dynamicChild) {
+          currentNode.dynamicChild = this.createNode();
+          currentNode.dynamicChild.paramName = paramName;
+        }
+        currentNode = currentNode.dynamicChild;
+      } else {
+        if (!currentNode.staticChildren.has(segment)) {
+          currentNode.staticChildren.set(segment, this.createNode());
+        }
+        currentNode = currentNode.staticChildren.get(segment);
+      }
+    }
+    const candidate = {
+      id,
+      // UUID único de la ruta
+      path,
+      // Guardar el path original de la ruta
+      loader,
+      metadata,
+      policies,
+      slot
+    };
+    if (!currentNode.candidates) {
+      currentNode.candidates = [];
+    }
+    currentNode.candidates.push(candidate);
+  }
+  find(path) {
+    const segments = path.split("/").filter(Boolean);
+    const params = {};
+    const candidatesByLevel = [];
+    let currentNode = this.root;
+    if (currentNode.candidates && currentNode.candidates.length > 0) {
+      candidatesByLevel.push([...currentNode.candidates]);
+    }
+    if (segments.length === 0) {
+      if (candidatesByLevel.length > 0) {
+        return { candidatesByLevel, params };
+      }
+      return null;
+    }
+    for (const segment of segments) {
+      if (currentNode.staticChildren.has(segment)) {
+        currentNode = currentNode.staticChildren.get(segment);
+      } else if (currentNode.dynamicChild) {
+        currentNode = currentNode.dynamicChild;
+        params[currentNode.paramName] = segment;
+      } else {
+        return null;
+      }
+      if (currentNode.candidates && currentNode.candidates.length > 0) {
+        candidatesByLevel.push([...currentNode.candidates]);
+      }
+    }
+    if (candidatesByLevel.length > 0) {
+      return {
+        candidatesByLevel,
+        params
+      };
+    }
+    return null;
+  }
+  /**
+   * Retorna la profundidad máxima de rutas registradas en el Trie
+   * @returns Número de niveles (0 = solo root, 1 = un segmento, etc.)
+   */
+  get maxDepth() {
+    return this._maxDepth;
+  }
+  createNode() {
+    return { staticChildren: /* @__PURE__ */ new Map() };
+  }
+}
+_init = __decoratorStart();
+Trie = __decorateElement(_init, 0, "Trie", _Trie_decorators, Trie);
+__runInitializers(_init, 1, Trie);
+export {
+  Trie
+};

package/dist/router/trie.types.d.ts

@@ -0,0 +1,36 @@
+import { Constructor } from '../DI/types';
+/**
+ * Representa un candidato de ruta (un componente con su configuración)
+ */
+export interface RouteCandidate {
+    /** ID único de la ruta (UUID generado en build time) */
+    id: string;
+    /** Path original de la ruta (ej: '/store/:storeId') */
+    path: string;
+    loader: (signal?: AbortSignal) => Promise<any>;
+    metadata?: Record<string, any>;
+    policies?: Constructor<any>[];
+    /** Nombre del slot donde se renderizará este componente (@main, @sidebar, etc.) */
+    slot?: string;
+}
+export interface RouteNode {
+    /** Hijos con rutas estáticas. La clave es el segmento de la ruta (ej: 'users'). */
+    staticChildren: Map<string, RouteNode>;
+    /** Nodo hijo para rutas dinámicas (ej: ':id'). Solo puede haber uno por nivel. */
+    dynamicChild?: RouteNode;
+    /** Nodo hijo para rutas wildcard (ej: '*'). */
+    wildcardChild?: RouteNode;
+    /** Si el nodo es dinámico, almacena el nombre del parámetro (ej: 'id'). */
+    paramName?: string;
+    /** Array de candidatos para este nodo (múltiples componentes pueden compartir el mismo path) */
+    candidates?: RouteCandidate[];
+}
+/**
+ * Resultado de la búsqueda en el Trie.
+ * Los candidatos están agrupados por nivel de anidamiento.
+ */
+export interface FindResult {
+    /** Candidatos agrupados por nivel: candidatesByLevel[0] = candidatos del nivel raíz, etc. */
+    candidatesByLevel: RouteCandidate[][];
+    params: Record<string, string>;
+}

package/dist/styles/base-style-sheet.d.ts

@@ -0,0 +1,96 @@
+import { BaseComponent } from '../components/base-component';
+/**
+ * BaseStyleSheet - Core styling system for the framework
+ *
+ * This class provides reactive CSS styling for components using the @Rule decorator.
+ * It manages a CSSStyleSheet internally and supports both Shadow DOM and document-level styles.
+ *
+ * Usage with @Rule decorator:
+ * ```typescript
+ * class MyStyles extends BaseStyleSheet {
+ *   @State width = 100;
+ *
+ *   @Rule(':host')
+ *   get hostStyles() {
+ *     return {
+ *       display: 'grid',
+ *       width: this.width,  // Reactive!
+ *     };
+ *   }
+ * }
+ * ```
+ */
+export declare class BaseStyleSheet {
+    protected stylesheet: CSSStyleSheet;
+    protected ruleIndexMap: Map<string, number>;
+    protected cleanupFunctions: (() => void)[];
+    protected selectorSymbolMap: Map<string, symbol>;
+    protected documentStyleElement: HTMLStyleElement | null;
+    protected documentRuleMap: Map<string, {
+        index: number;
+        effect: any;
+    }>;
+    constructor();
+    /**
+     * Returns the internal CSSStyleSheet
+     * Used by @UseStyles decorator to attach styles to components
+     */
+    getStyleSheet(): CSSStyleSheet;
+    /**
+     * Sets the host component and initializes styles
+     * Called by @UseStyles decorator when attaching styles to a component
+     */
+    setHost(component: BaseComponent): void;
+    /**
+     * Applies styles to the document (<head>) instead of Shadow DOM
+     * Used by @ForDocument decorator for global styles
+     *
+     * Creates a <style> element and syncs reactive CSS rules to it
+     */
+    applyToDocument(): void;
+    /**
+     * Synchronizes the internal CSSStyleSheet with the document <style> element
+     * Called automatically when rules update in @ForDocument mode
+     */
+    private syncDocumentStyles;
+    /**
+     * Updates a specific CSS rule in the stylesheet
+     * This is the core method used by @Rule decorator to update reactive styles
+     *
+     * @param selector - The CSS selector for this rule
+     * @param cssText - The complete CSS rule text (including selector and braces)
+     * @param indexKey - Unique symbol to track this rule's position
+     */
+    protected updateSpecificRule(selector: string, cssText: string, indexKey: symbol): void;
+    /**
+     * Adjusts all rule indices after a rule deletion
+     * This ensures the index tracking remains correct
+     */
+    private adjustIndicesAfterDeletion;
+    /**
+     * Registers a cleanup function to be called on disposal
+     * Used by @Rule decorator to clean up reactive effects
+     */
+    registerCleanup(cleanupFn: () => void): void;
+    /**
+     * Cleans up all resources
+     * Called when the component is destroyed
+     */
+    dispose(): void;
+    /**
+     * Returns debug information about the stylesheet
+     * Useful for development and debugging
+     */
+    getDebugInfo(): {
+        totalRules: number;
+        ruleIndexMap: Map<string, number>;
+    };
+    /**
+     * Optional hook for subclasses to implement
+     * Called after setHost() to perform custom initialization
+     *
+     * Note: With @Rule decorator, this is typically not needed
+     * as decorators automatically register rules
+     */
+    protected styles(): void;
+}

package/dist/styles/base-style-sheet.js

@@ -0,0 +1,149 @@
+import { HOST_KEY } from "../behaviors/constants.js";
+class BaseStyleSheet {
+  constructor() {
+    this.cleanupFunctions = [];
+    this.selectorSymbolMap = /* @__PURE__ */ new Map();
+    this.documentStyleElement = null;
+    this.documentRuleMap = /* @__PURE__ */ new Map();
+    this.stylesheet = new CSSStyleSheet();
+    this.ruleIndexMap = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Returns the internal CSSStyleSheet
+   * Used by @UseStyles decorator to attach styles to components
+   */
+  getStyleSheet() {
+    return this.stylesheet;
+  }
+  /**
+   * Sets the host component and initializes styles
+   * Called by @UseStyles decorator when attaching styles to a component
+   */
+  setHost(component) {
+    const hostKey = this.constructor[HOST_KEY];
+    if (hostKey) {
+      this[hostKey] = component;
+    }
+    if (typeof this.styles === "function") {
+      this.styles();
+    }
+  }
+  /**
+   * Applies styles to the document (<head>) instead of Shadow DOM
+   * Used by @ForDocument decorator for global styles
+   *
+   * Creates a <style> element and syncs reactive CSS rules to it
+   */
+  applyToDocument() {
+    if (!this.documentStyleElement) {
+      this.documentStyleElement = document.createElement("style");
+      this.documentStyleElement.setAttribute("data-framework-document-styles", this.constructor.name);
+      document.head.appendChild(this.documentStyleElement);
+    }
+    this.syncDocumentStyles();
+  }
+  /**
+   * Synchronizes the internal CSSStyleSheet with the document <style> element
+   * Called automatically when rules update in @ForDocument mode
+   */
+  syncDocumentStyles() {
+    if (!this.documentStyleElement) return;
+    const cssText = Array.from(this.stylesheet.cssRules).map((rule) => rule.cssText).join("\n");
+    this.documentStyleElement.textContent = cssText;
+  }
+  /**
+   * Updates a specific CSS rule in the stylesheet
+   * This is the core method used by @Rule decorator to update reactive styles
+   *
+   * @param selector - The CSS selector for this rule
+   * @param cssText - The complete CSS rule text (including selector and braces)
+   * @param indexKey - Unique symbol to track this rule's position
+   */
+  updateSpecificRule(selector, cssText, indexKey) {
+    try {
+      const currentIndex = this[indexKey];
+      if (currentIndex !== void 0 && currentIndex < this.stylesheet.cssRules.length) {
+        this.stylesheet.deleteRule(currentIndex);
+        this.adjustIndicesAfterDeletion(currentIndex);
+        this.ruleIndexMap.delete(selector);
+      }
+      const newIndex = this.stylesheet.insertRule(
+        cssText,
+        this.stylesheet.cssRules.length
+      );
+      this[indexKey] = newIndex;
+      this.ruleIndexMap.set(selector, newIndex);
+      if (this.documentStyleElement) {
+        this.syncDocumentStyles();
+      }
+    } catch (error) {
+      console.error("Error updating rule:", error);
+      console.error("Problematic CSS:", cssText);
+    }
+  }
+  /**
+   * Adjusts all rule indices after a rule deletion
+   * This ensures the index tracking remains correct
+   */
+  adjustIndicesAfterDeletion(deletedIndex) {
+    for (const [selector, index] of this.ruleIndexMap.entries()) {
+      if (index > deletedIndex) {
+        this.ruleIndexMap.set(selector, index - 1);
+      }
+    }
+    const symbolKeys = Object.getOwnPropertySymbols(this);
+    for (const symbolKey of symbolKeys) {
+      const currentIndex = this[symbolKey];
+      if (typeof currentIndex === "number" && currentIndex > deletedIndex) {
+        this[symbolKey] = currentIndex - 1;
+      }
+    }
+  }
+  /**
+   * Registers a cleanup function to be called on disposal
+   * Used by @Rule decorator to clean up reactive effects
+   */
+  registerCleanup(cleanupFn) {
+    this.cleanupFunctions.push(cleanupFn);
+  }
+  /**
+   * Cleans up all resources
+   * Called when the component is destroyed
+   */
+  dispose() {
+    while (this.stylesheet.cssRules.length > 0) {
+      this.stylesheet.deleteRule(0);
+    }
+    if (this.documentStyleElement && this.documentStyleElement.parentNode) {
+      this.documentStyleElement.parentNode.removeChild(this.documentStyleElement);
+      this.documentStyleElement = null;
+    }
+    this.cleanupFunctions.forEach((cleanup) => cleanup());
+    this.cleanupFunctions.length = 0;
+    this.ruleIndexMap.clear();
+    this.selectorSymbolMap.clear();
+    this.documentRuleMap.clear();
+  }
+  /**
+   * Returns debug information about the stylesheet
+   * Useful for development and debugging
+   */
+  getDebugInfo() {
+    return {
+      totalRules: this.stylesheet.cssRules.length,
+      ruleIndexMap: new Map(this.ruleIndexMap)
+    };
+  }
+  /**
+   * Optional hook for subclasses to implement
+   * Called after setHost() to perform custom initialization
+   *
+   * Note: With @Rule decorator, this is typically not needed
+   * as decorators automatically register rules
+   */
+  styles() {
+  }
+}
+export {
+  BaseStyleSheet
+};

package/dist/styles/decorators/factories.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Creates a decorator for custom DOM events
+ * @param eventName Custom event name
+ * @example const UserAction = CustomEvent('user-action');
+ *          @UserAction userActionFired!: boolean;
+ */
+declare const CustomEvent: (eventName: string) => () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, boolean>) => (this: This, initialValue: boolean) => boolean;
+/**
+ * Creates a decorator that tracks if a specific element is in viewport
+ * @param selector CSS selector for the element to observe
+ * @example const HeaderVisible = ElementInView('.header');
+ *          @HeaderVisible headerInView!: boolean;
+ */
+declare const ElementInView: (selector: string) => () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, boolean>) => (this: This, initialValue: boolean) => boolean;
+export declare const MediaQuery: (queryString: string) => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, boolean>) => (this: This, initialValue: boolean) => boolean;
+export declare const WindowSize: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, {
+    width: number;
+    height: number;
+}>) => (this: This, initialValue: {
+    width: number;
+    height: number;
+}) => {
+    width: number;
+    height: number;
+};
+export declare const WindowWidth: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, number>) => (this: This, initialValue: number) => number;
+export declare const WindowHeight: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, number>) => (this: This, initialValue: number) => number;
+export declare const ScrollPosition: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, number>) => (this: This, initialValue: number) => number;
+export declare const ScrollXY: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, {
+    x: number;
+    y: number;
+}>) => (this: This, initialValue: {
+    x: number;
+    y: number;
+}) => {
+    x: number;
+    y: number;
+};
+export declare const NetworkStatus: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, boolean>) => (this: This, initialValue: boolean) => boolean;
+export declare const DeviceOrientation: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, OrientationType>) => (this: This, initialValue: OrientationType) => OrientationType;
+export declare const PageVisibility: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, boolean>) => (this: This, initialValue: boolean) => boolean;
+export declare const ReducedMotion: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, boolean>) => (this: This, initialValue: boolean) => boolean;
+export declare const DarkMode: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, boolean>) => (this: This, initialValue: boolean) => boolean;
+export declare const MousePosition: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, {
+    x: number;
+    y: number;
+}>) => (this: This, initialValue: {
+    x: number;
+    y: number;
+}) => {
+    x: number;
+    y: number;
+};
+export declare const MouseX: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, number>) => (this: This, initialValue: number) => number;
+export declare const MouseY: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, number>) => (this: This, initialValue: number) => number;
+export declare const KeyPressed: (key: string) => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, boolean>) => (this: This, initialValue: boolean) => boolean;
+export declare const ModifierKeys: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, {
+    ctrl: boolean;
+    shift: boolean;
+    alt: boolean;
+    meta: boolean;
+}>) => (this: This, initialValue: {
+    ctrl: boolean;
+    shift: boolean;
+    alt: boolean;
+    meta: boolean;
+}) => {
+    ctrl: boolean;
+    shift: boolean;
+    alt: boolean;
+    meta: boolean;
+};
+export declare const WindowFocus: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, boolean>) => (this: This, initialValue: boolean) => boolean;
+export declare const TextSelection: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, number | boolean>) => (this: This, initialValue: number | boolean) => number | boolean;
+export declare const FrameRate: () => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, number>) => (this: This, initialValue: number) => number;
+export { CustomEvent, ElementInView };

package/dist/styles/decorators/factories.js

@@ -0,0 +1,11 @@
+import { createEventDecorator } from "../../reactivity/decorators/create-event-decorator.js";
+import { eventListener } from "../../reactivity/signals/event.js";
+const createMediaQuerySignal = (queryString) => eventListener(
+  window.matchMedia(queryString),
+  "change",
+  () => window.matchMedia(queryString).matches
+);
+const MediaQuery = createEventDecorator(createMediaQuerySignal);
+export {
+  MediaQuery
+};