pagyra-js 0.0.1

package/src/css/properties/flexbox.ts

@@ -0,0 +1,44 @@
+import type { LengthLike } from "../length.js";
+import { AlignItems, AlignContent, JustifyContent } from "../enums.js";
+import type { GapProperties } from "./gap.js";
+
+export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
+export type AlignSelfValue = AlignItems | "auto";
+
+/**
+ * Flexbox layout CSS properties.
+ * Handles flex container and flex item properties.
+ * 
+ * Extends GapProperties to inherit rowGap and columnGap,
+ * enabling proper gap support in flex layouts as per modern CSS Flexbox spec.
+ */
+export interface FlexboxProperties extends GapProperties {
+    /** Flex container direction */
+    flexDirection: FlexDirection;
+
+    /** Whether flex items wrap */
+    flexWrap: boolean;
+
+    /** Flex grow factor */
+    flexGrow: number;
+
+    /** Flex shrink factor */
+    flexShrink: number;
+
+    /** Flex basis (initial size) */
+    flexBasis: LengthLike;
+
+    /** Main axis alignment */
+    justifyContent: JustifyContent;
+
+    /** Cross axis alignment for items */
+    alignItems: AlignItems;
+
+    /** Cross axis alignment for lines */
+    alignContent: AlignContent;
+
+    /** Individual item alignment override */
+    alignSelf: AlignSelfValue;
+
+    // rowGap and columnGap are inherited from GapProperties
+}

package/src/css/properties/gap.ts

@@ -0,0 +1,14 @@
+/**
+ * Gap properties for layout containers (Grid, Flex, etc.)
+ * Defines spacing between child items in a container.
+ * 
+ * These properties are shared across multiple layout modes to follow
+ * the DRY principle and maintain consistency.
+ */
+export interface GapProperties {
+    /** Gap between rows (in pixels) */
+    rowGap: number;
+
+    /** Gap between columns or items in row direction (in pixels) */
+    columnGap: number;
+}

package/src/css/properties/grid.ts

@@ -0,0 +1,94 @@
+import type { NumericLength } from "../length.js";
+import type { GapProperties } from "./gap.js";
+
+export type GridAutoFlow = "row" | "column" | "row dense" | "column dense";
+
+// Track size types (resolved, in pixels)
+export interface FixedTrackSize {
+    kind: "fixed";
+    size: number;
+}
+
+export interface FlexTrackSize {
+    kind: "flex";
+    flex: number;
+    min?: number;
+    max?: number;
+}
+
+export interface AutoTrackSize {
+    kind: "auto";
+    min?: number;
+    max?: number;
+}
+
+export type TrackSize = FixedTrackSize | FlexTrackSize | AutoTrackSize;
+
+export interface RepeatTrackDefinition {
+    kind: "repeat";
+    count: number;
+    track: TrackSize;
+}
+
+export interface AutoRepeatTrackDefinition {
+    kind: "repeat-auto";
+    mode: "auto-fit" | "auto-fill";
+    track: TrackSize;
+}
+
+export type TrackDefinition = TrackSize | RepeatTrackDefinition | AutoRepeatTrackDefinition;
+
+// Track size input types (with length units)
+export interface FixedTrackSizeInput {
+    kind: "fixed";
+    size: NumericLength;
+}
+
+export interface FlexTrackSizeInput {
+    kind: "flex";
+    flex: number;
+    min?: NumericLength;
+    max?: NumericLength;
+}
+
+export interface AutoTrackSizeInput {
+    kind: "auto";
+    min?: NumericLength;
+    max?: NumericLength;
+}
+
+export type TrackSizeInput = FixedTrackSizeInput | FlexTrackSizeInput | AutoTrackSizeInput;
+
+export interface RepeatTrackDefinitionInput {
+    kind: "repeat";
+    count: number;
+    track: TrackSizeInput;
+}
+
+export interface AutoRepeatTrackDefinitionInput {
+    kind: "repeat-auto";
+    mode: "auto-fit" | "auto-fill";
+    track: TrackSizeInput;
+}
+
+export type TrackDefinitionInput = TrackSizeInput | RepeatTrackDefinitionInput | AutoRepeatTrackDefinitionInput;
+
+/**
+ * Grid layout CSS properties.
+ * Handles CSS Grid container and item properties.
+ * 
+ * Extends GapProperties to inherit rowGap and columnGap,
+ * following the DRY principle and enabling shared gap utilities.
+ */
+export interface GridProperties extends GapProperties {
+    /** Column track definitions */
+    trackListColumns: TrackDefinition[];
+
+    /** Row track definitions */
+    trackListRows: TrackDefinition[];
+
+    /** Auto-placement flow direction */
+    autoFlow: GridAutoFlow;
+
+    // rowGap and columnGap are inherited from GapProperties
+}

package/src/css/properties/layout.ts

@@ -0,0 +1,59 @@
+import type { LengthLike } from "../length.js";
+import { Display, Position } from "../enums.js";
+
+/**
+ * Layout-related CSS properties.
+ * Handles positioning, sizing, and display modes.
+ */
+export interface LayoutProperties {
+    /** Display mode (block, inline, flex, grid, etc.) */
+    display: Display;
+
+    /** Positioning mode (static, relative, absolute, fixed) */
+    position: Position;
+
+    /** Stacking order */
+    zIndex: number | "auto";
+
+    /** Element width */
+    width: LengthLike;
+
+    /** Element height */
+    height: LengthLike;
+
+    /** Minimum width constraint */
+    minWidth?: LengthLike;
+
+    /** Maximum width constraint */
+    maxWidth?: LengthLike;
+
+    /** Minimum height constraint */
+    minHeight?: LengthLike;
+
+    /** Maximum height constraint */
+    maxHeight?: LengthLike;
+
+    /** Top offset for positioned elements */
+    top?: LengthLike;
+
+    /** Right offset for positioned elements */
+    right?: LengthLike;
+
+    /** Bottom offset for positioned elements */
+    bottom?: LengthLike;
+
+    /** Left offset for positioned elements */
+    left?: LengthLike;
+
+    /** Logical inline-start inset (for writing modes) */
+    insetInlineStart?: LengthLike;
+
+    /** Logical inline-end inset (for writing modes) */
+    insetInlineEnd?: LengthLike;
+
+    /** Logical block-start inset (for writing modes) */
+    insetBlockStart?: LengthLike;
+
+    /** Logical block-end inset (for writing modes) */
+    insetBlockEnd?: LengthLike;
+}

package/src/css/properties/misc.ts

@@ -0,0 +1,44 @@
+import { FloatMode, ClearMode, TableLayoutMode, BorderModel } from "../enums.js";
+import { CustomPropertiesMap } from "../custom-properties.js";
+
+/**
+ * Miscellaneous CSS properties.
+ * Handles specialized properties like float, list styling, table layout, and page breaks.
+ */
+export interface MiscProperties {
+    /** Float positioning */
+    float: FloatMode;
+
+    /** Clear float behavior */
+    clear: ClearMode;
+
+    /** List item marker type */
+    listStyleType: string;
+
+    /** Image/video object-fit mode */
+    objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+
+    /** Table layout algorithm */
+    tableLayout: TableLayoutMode;
+
+    /** Table border model (separate or collapse) */
+    borderModel: BorderModel;
+
+    /** Page break before element */
+    breakBefore: string;
+
+    /** Page break after element */
+    breakAfter: string;
+
+    /** Page break inside element */
+    breakInside: string;
+
+    /** Minimum lines at bottom of page/column */
+    widows: number;
+
+    /** Minimum lines at top of page/column */
+    orphans: number;
+
+    /** CSS Custom Properties (Variables) */
+    customProperties?: CustomPropertiesMap;
+}

package/src/css/properties/typography.ts

@@ -0,0 +1,71 @@
+import type { LineHeightValue } from "../line-height.js";
+import type { WhiteSpace, TextWrap, WritingMode } from "../enums.js";
+
+export type TextTransform = "none" | "uppercase" | "lowercase" | "capitalize";
+export type OverflowWrap = "normal" | "break-word" | "anywhere";
+
+/**
+ * Typography and text-related CSS properties.
+ * Handles font styling, text formatting, and text layout.
+ */
+export interface TypographyProperties {
+    /** Font size in pixels */
+    fontSize: number;
+
+    /** Font family name or stack */
+    fontFamily?: string;
+
+    /** Font weight (100-900) */
+    fontWeight?: number;
+
+    /** Font style (normal, italic, oblique) */
+    fontStyle?: string;
+
+    /** Font variant (normal, small-caps) */
+    fontVariant?: string;
+
+    /** Line height (absolute or relative) */
+    lineHeight: LineHeightValue;
+
+    /** Letter spacing in pixels */
+    letterSpacing: number;
+
+    /** Word spacing in pixels */
+    wordSpacing: number;
+
+    /** Horizontal text alignment */
+    textAlign?: string;
+
+    /** Text indentation */
+    textIndent: import("../length.js").LengthLike;
+
+    /** Text transformation (uppercase, lowercase, etc.) */
+    textTransform: TextTransform;
+
+    /** Text decoration line (underline, line-through, etc.) */
+    textDecorationLine?: string;
+
+    /** Text decoration color */
+    textDecorationColor?: string;
+
+    /** Text decoration style (solid, dashed, etc.) */
+    textDecorationStyle?: string;
+
+    /** Vertical alignment */
+    verticalAlign?: string;
+
+    /** White space handling */
+    whiteSpace: WhiteSpace;
+
+    /** Text wrapping mode */
+    textWrap: TextWrap;
+
+    /** Overflow wrap behavior */
+    overflowWrap: OverflowWrap;
+
+    /** Writing mode (horizontal-tb, vertical-rl, etc.) */
+    writingMode: WritingMode;
+
+    /** Text color */
+    color?: string;
+}

package/src/css/properties/visual.ts

@@ -0,0 +1,68 @@
+import type { NumericLength } from "../length.js";
+import type { BackgroundLayer } from "../background-types.js";
+import { OverflowMode } from "../enums.js";
+import type { ClipPath } from "../clip-path-types.js";
+
+// Box shadow types
+export interface BoxShadow {
+    inset: boolean;
+    offsetX: number;
+    offsetY: number;
+    blurRadius: number;
+    spreadRadius: number;
+    color?: string;
+}
+
+export interface BoxShadowInput {
+    inset: boolean;
+    offsetX: NumericLength;
+    offsetY: NumericLength;
+    blurRadius: NumericLength;
+    spreadRadius: NumericLength;
+    color?: string;
+}
+
+// Text shadow types
+export interface TextShadow {
+    offsetX: number;
+    offsetY: number;
+    blurRadius: number;
+    color?: string;
+}
+
+export interface TextShadowInput {
+    offsetX: NumericLength;
+    offsetY: NumericLength;
+    blurRadius?: NumericLength;
+    color?: string;
+}
+
+/**
+ * Visual effects and rendering CSS properties.
+ * Handles backgrounds, shadows, opacity, transforms, and overflow.
+ */
+export interface VisualProperties {
+    /** Background layers (colors, images, gradients) */
+    backgroundLayers?: BackgroundLayer[];
+
+    /** Box shadows */
+    boxShadows: BoxShadow[];
+
+    /** Text shadows */
+    textShadows: TextShadow[];
+
+    /** Element opacity (0-1) */
+    opacity: number;
+
+    /** CSS transform */
+    transform?: string;
+
+    /** Horizontal overflow behavior */
+    overflowX: OverflowMode;
+
+    /** Vertical overflow behavior */
+    overflowY: OverflowMode;
+
+    /** Clipping path applied to the element */
+    clipPath?: ClipPath;
+}

package/src/css/selectors/matcher.ts

@@ -0,0 +1,219 @@
+import type { Simple, AttrCond, Pseudo, Combinator } from "./types.js";
+import { parseSelector } from "./parser.js";
+import { simpleKey } from "./simple-key.js";
+
+/**
+ * Cria um predicado (el)=>boolean que testa o seletor.
+ * - Avaliação right-to-left
+ * - Suporte a combinadores: ', '>', '+', '~'
+ * - Suporte a tag/#id/.classe/[attr]/:first/last/nth-child/:not(simple)
+ * - Memoização por nó para matches de "Simple"
+ */
+export function createSelectorMatcher(selector: string): ((el: Element) => boolean) | null {
+  const chain = parseSelector(selector);
+  if (!chain) return null;
+
+  // Cache: (el) -> (simpleKey -> boolean)
+  type MatchCache = WeakMap<Element, Map<string, boolean>>;
+  const cache: MatchCache = new WeakMap();
+
+  function memo(el: Element, s: Simple, raw: (e: Element, s: Simple) => boolean): boolean {
+    let m = cache.get(el);
+    if (!m) { m = new Map(); cache.set(el, m); }
+    const k = simpleKey(s);
+    if (m.has(k)) return m.get(k)!;
+    const ok = raw(el, s);
+    m.set(k, ok);
+    return ok;
+  }
+
+  // Helpers DOM (assumem DOM-like API; adapte se teu DOM for custom)
+  function getAttr(el: Element, name: string): string | null {
+    const value = (el as any).getAttribute ? (el as any).getAttribute(name) : null;
+    return value;
+  }
+
+  function matchAttr(el: Element, cond: AttrCond): boolean {
+    const v = getAttr(el, cond.name);
+    if (cond.op === 'exists') {
+      const result = v !== null;
+      return result;
+    }
+    if (v === null) {
+      return false;
+    }
+    let result: boolean;
+    switch (cond.op) {
+      case '=':   result = v === cond.value!; break;
+      case '~=':  result = v.split(/\s+/).includes(cond.value!); break;
+      case '|=': result = v === cond.value! || v.startsWith(cond.value! + '-'); break;
+      case '^=':  result = v.startsWith(cond.value!); break;
+      case '$=': result = v.endsWith(cond.value!); break;
+      case '*=':  result = v.includes(cond.value!); break;
+      default: result = false; break;
+    }
+    return result;
+  }
+
+  function indexInParent(el: Element): number {
+    const p = el.parentElement;
+    if (!p) {
+      return -1;
+    }
+    let idx = 0;
+    for (let n = p.firstElementChild; n; n = n.nextElementSibling) {
+      idx++;
+      if (n === el) {
+        return idx;
+      }
+    }
+    return -1;
+  }
+
+  function matchesPseudo(el: Element, p: Pseudo): boolean {
+    if (p.kind === 'first-child') {
+      const result = indexInParent(el) === 1;
+      return result;
+    }
+    if (p.kind === 'last-child') {
+      const parent = el.parentElement;
+      if (!parent) {
+        return false;
+      }
+      const result = parent.lastElementChild === el;
+      return result;
+    }
+    if (p.kind === 'nth-child') {
+      const k = indexInParent(el);
+      if (k < 1) {
+        return false;
+      }
+      const { a, b } = p;
+      let result: boolean;
+      if (a === 0) {
+        result = k === b;
+      } else {
+        result = (k - b) % a === 0 && (k - b) / a >= 0;
+      }
+      return result;
+    }
+    if (p.kind === 'not') {
+      const result = !matchesSimple(el, p.inner);
+      return result;
+    }
+    if (p.kind === 'root') {
+      const doc = (el as any).ownerDocument;
+      if (!doc || !doc.documentElement) {
+        return false;
+      }
+      return doc.documentElement === el;
+    }
+    return false;
+  }
+
+  function matchesSimple(el: Element, s: Simple): boolean {
+    if (s.tag && el.tagName.toLowerCase() !== s.tag) {
+      return false;
+    }
+    if (s.id && (el as any).id !== s.id) {
+      return false;
+    }
+    const cl: DOMTokenList | undefined = (el as any).classList;
+    for (const cls of s.classes) {
+      if (!cl?.contains?.(cls)) {
+        return false;
+      }
+    }
+    for (const a of s.attrs) {
+      if (!matchAttr(el, a)) {
+        return false;
+      }
+    }
+    for (const z of s.pseudos) {
+      if (!matchesPseudo(el, z)) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  // Matcher right-to-left
+  return function match(el: Element): boolean {
+    let current: Element | null = el;
+    let i = chain.length - 1;
+
+    if (!current) {
+      return false;
+    }
+    if (!memo(current, chain[i].simple, matchesSimple)) {
+      return false;
+    }
+    i--;
+
+    while (i >= 0) {
+      const needed = chain[i];
+      const comb = chain[i + 1].combinatorToLeft as Combinator | undefined;
+
+      if (comb === '>') {
+        current = current!.parentElement;
+        if (!current) {
+          return false;
+        }
+        if (!memo(current, needed.simple, matchesSimple)) {
+          return false;
+        }
+        i--; continue;
+      }
+
+      if (comb === ' ') {
+        let anc: Element | null = current!.parentElement, found = false;
+        while (anc) {
+          if (memo(anc, needed.simple, matchesSimple)) {
+            current = anc;
+            found = true;
+            break;
+          }
+          anc = anc.parentElement;
+        }
+        if (!found) {
+          return false;
+        }
+        i--; continue;
+      }
+
+      if (comb === '+') {
+        const sib = current!.previousElementSibling as Element | null;
+        if (!sib) {
+          return false;
+        }
+        if (!memo(sib, needed.simple, matchesSimple)) {
+          return false;
+        }
+        current = sib; i--; continue;
+      }
+
+      if (comb === '~') {
+        let sib = current!.previousElementSibling as Element | null, found = false;
+        while (sib) {
+          if (memo(sib, needed.simple, matchesSimple)) {
+            current = sib;
+            found = true;
+            break;
+          }
+          sib = sib.previousElementSibling as Element | null;
+        }
+        if (!found) {
+          return false;
+        }
+        i--; continue;
+      }
+
+      // sem combinador à esquerda (primeiro item, raro cair aqui)
+      if (!memo(current!, needed.simple, matchesSimple)) {
+        return false;
+      }
+      i--;
+    }
+    return true;
+  };
+}