pagyra-js 0.0.1

package/src/css/layout-property-resolver.ts

@@ -0,0 +1,75 @@
+import type { TrackDefinitionInput, TrackSizeInput, TrackDefinition, TrackSize } from "./style.js";
+import { resolveNumberLike } from "./length.js";
+
+/**
+ * Layout property resolver
+ * Responsibility: Resolve complex layout properties (grid, flexbox)
+ */
+export class LayoutPropertyResolver {
+    /**
+     * Resolve a track size input to absolute values
+     */
+    static resolveTrackSizeInputToAbsolute(
+        track: TrackSizeInput,
+        fontSize: number,
+        rootFontSize: number
+    ): TrackSize {
+        if (track.kind === "fixed") {
+            return {
+                kind: "fixed",
+                size: resolveNumberLike(track.size, fontSize, rootFontSize) ?? 0,
+            };
+        }
+        if (track.kind === "flex") {
+            return {
+                kind: "flex",
+                flex: track.flex,
+                min: resolveNumberLike(track.min, fontSize, rootFontSize),
+                max: resolveNumberLike(track.max, fontSize, rootFontSize),
+            };
+        }
+        return {
+            kind: "auto",
+            min: resolveNumberLike(track.min, fontSize, rootFontSize),
+            max: resolveNumberLike(track.max, fontSize, rootFontSize),
+        };
+    }
+
+    /**
+     * Resolve track definitions (for CSS Grid)
+     */
+    static resolveTrackDefinitionsInput(
+        definitions: TrackDefinitionInput[] | undefined,
+        fontSize: number,
+        rootFontSize: number
+    ): TrackDefinition[] | undefined {
+        if (!definitions) {
+            return undefined;
+        }
+        return definitions.map((definition) => {
+            if (definition.kind === "repeat") {
+                return {
+                    kind: "repeat",
+                    count: definition.count,
+                    track: LayoutPropertyResolver.resolveTrackSizeInputToAbsolute(
+                        definition.track,
+                        fontSize,
+                        rootFontSize
+                    ),
+                };
+            }
+            if (definition.kind === "repeat-auto") {
+                return {
+                    kind: "repeat-auto",
+                    mode: definition.mode,
+                    track: LayoutPropertyResolver.resolveTrackSizeInputToAbsolute(
+                        definition.track,
+                        fontSize,
+                        rootFontSize
+                    ),
+                };
+            }
+            return LayoutPropertyResolver.resolveTrackSizeInputToAbsolute(definition, fontSize, rootFontSize);
+        });
+    }
+}

package/src/css/length.ts

@@ -0,0 +1,141 @@
+export type LengthUnit = "px" | "percent";
+export type RelativeLengthUnit = "em" | "rem";
+
+export interface AbsoluteLength {
+  readonly kind: "absolute";
+  readonly unit: LengthUnit;
+  readonly value: number;
+}
+
+export interface AutoLength {
+  readonly kind: "auto";
+}
+
+export interface RelativeLength {
+  readonly kind: "relative";
+  readonly unit: RelativeLengthUnit;
+  readonly value: number;
+}
+
+export type CSSLength = AbsoluteLength | AutoLength;
+
+export type LengthLike = CSSLength | number | "auto";
+export type LengthInput = LengthLike | RelativeLength;
+export type NumericLength = number | RelativeLength;
+
+export const AUTO_LENGTH: AutoLength = { kind: "auto" };
+
+export function px(value: number): AbsoluteLength {
+  return { kind: "absolute", unit: "px", value };
+}
+
+export function percent(ratio: number): AbsoluteLength {
+  return { kind: "absolute", unit: "percent", value: ratio };
+}
+
+export function relativeLength(unit: RelativeLengthUnit, value: number): RelativeLength {
+  return { kind: "relative", unit, value };
+}
+
+export function isRelativeLength(value: unknown): value is RelativeLength {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  return (value as RelativeLength).kind === "relative";
+}
+
+export function resolveRelativeLength(value: RelativeLength, fontSize: number, rootFontSize: number): number {
+  return value.unit === "em" ? value.value * fontSize : value.value * rootFontSize;
+}
+
+export function resolveNumberLike(
+  value: number | RelativeLength | undefined,
+  fontSize: number,
+  rootFontSize: number,
+): number | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (typeof value === "number") {
+    return value;
+  }
+  return resolveRelativeLength(value, fontSize, rootFontSize);
+}
+
+export function resolveLengthInput(
+  value: LengthInput | undefined,
+  fontSize: number,
+  rootFontSize: number,
+): LengthLike | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (isRelativeLength(value)) {
+    return resolveRelativeLength(value, fontSize, rootFontSize);
+  }
+  return value;
+}
+
+export function isAutoLength(value: LengthLike): value is AutoLength | "auto" {
+  if (typeof value === "string") {
+    return value === "auto";
+  }
+  if (typeof value === "number") {
+    return false;
+  }
+  return value.kind === "auto";
+}
+
+export function normalizeLength(value: LengthLike): CSSLength {
+  if (typeof value === "number") {
+    return px(value);
+  }
+  if (value === "auto") {
+    return AUTO_LENGTH;
+  }
+  return value;
+}
+
+export interface ResolveLengthOptions {
+  auto?: "reference" | "zero" | number;
+}
+
+export function resolveLength(
+  value: LengthLike | undefined,
+  reference: number,
+  options: ResolveLengthOptions = { auto: "reference" },
+): number {
+  const autoBehavior = options.auto ?? "reference";
+  if (value === undefined) {
+    return 0;
+  }
+  if (typeof value === "number") {
+    return value;
+  }
+  if (value === "auto") {
+    return resolveAuto(autoBehavior, reference);
+  }
+  if (value.kind === "auto") {
+    return resolveAuto(autoBehavior, reference);
+  }
+  if (value.unit === "percent") {
+    return value.value * reference;
+  }
+  return value.value;
+}
+
+export function clampMinMax(value: number, minValue: number | undefined, maxValue: number | undefined): number {
+  const upper = maxValue ?? Number.POSITIVE_INFINITY;
+  const lower = minValue ?? Number.NEGATIVE_INFINITY;
+  return Math.min(Math.max(value, lower), upper);
+}
+
+function resolveAuto(autoBehavior: "reference" | "zero" | number, reference: number): number {
+  if (autoBehavior === "reference") {
+    return reference;
+  }
+  if (autoBehavior === "zero") {
+    return 0;
+  }
+  return autoBehavior;
+}

package/src/css/line-height.ts

@@ -0,0 +1,96 @@
+import { resolveRelativeLength, type NumericLength } from "./length.js";
+
+export interface NormalLineHeight {
+  kind: "normal";
+}
+
+export interface UnitlessLineHeight {
+  kind: "unitless";
+  value: number;
+}
+
+export interface AbsoluteLineHeight<TValue = number> {
+  kind: "length";
+  value: TValue;
+}
+
+export type LineHeightValue = NormalLineHeight | UnitlessLineHeight | AbsoluteLineHeight<number>;
+export type LineHeightInput = NormalLineHeight | UnitlessLineHeight | AbsoluteLineHeight<NumericLength>;
+
+export const DEFAULT_NORMAL_LINE_HEIGHT = 1.2;
+
+export function createNormalLineHeight(): NormalLineHeight {
+  return { kind: "normal" };
+}
+
+export function createUnitlessLineHeight(value: number): UnitlessLineHeight {
+  return { kind: "unitless", value };
+}
+
+export function createLengthLineHeight(value: number): AbsoluteLineHeight<number> {
+  return { kind: "length", value };
+}
+
+export function cloneLineHeight(value: LineHeightValue): LineHeightValue {
+  switch (value.kind) {
+    case "normal":
+      return createNormalLineHeight();
+    case "unitless":
+      return createUnitlessLineHeight(value.value);
+    case "length":
+      return createLengthLineHeight(value.value);
+    default:
+      return createNormalLineHeight();
+  }
+}
+
+export function resolveLineHeightInput(
+  input: LineHeightInput,
+  fontSize: number,
+  rootFontSize: number,
+): LineHeightValue {
+  switch (input.kind) {
+    case "normal":
+      return createNormalLineHeight();
+    case "unitless":
+      return createUnitlessLineHeight(input.value);
+    case "length": {
+      const raw = input.value;
+      const pxValue = typeof raw === "number" ? raw : resolveRelativeLength(raw, fontSize, rootFontSize);
+      return createLengthLineHeight(pxValue);
+    }
+    default:
+      return createNormalLineHeight();
+  }
+}
+
+export function lineHeightEquals(a: LineHeightValue, b: LineHeightValue): boolean {
+  if (a.kind !== b.kind) {
+    return false;
+  }
+  if (a.kind === "unitless" || a.kind === "length") {
+    return a.value === (b as UnitlessLineHeight | AbsoluteLineHeight<number>).value;
+  }
+  return true;
+}
+
+export function lineHeightToPx(
+  value: LineHeightValue | undefined,
+  fontSize: number | undefined,
+  normalRatio = DEFAULT_NORMAL_LINE_HEIGHT,
+): number {
+  const size = fontSize ?? 16;
+  if (!value) {
+    return size * normalRatio;
+  }
+  switch (value.kind) {
+    case "normal":
+      return size * normalRatio;
+    case "unitless":
+      return value.value * size;
+    case "length":
+      return value.value;
+    default:
+      return size * normalRatio;
+  }
+}

package/src/css/named-colors.ts

@@ -0,0 +1,150 @@
+export const NAMED_COLORS: Record<string, string> = {
+  "aliceblue": "#f0f8ff",
+  "antiquewhite": "#faebd7",
+  "aqua": "#00ffff",
+  "aquamarine": "#7fffd4",
+  "azure": "#f0ffff",
+  "beige": "#f5f5dc",
+  "bisque": "#ffe4c4",
+  "black": "#000000",
+  "blanchedalmond": "#ffebcd",
+  "blue": "#0000ff",
+  "blueviolet": "#8a2be2",
+  "brown": "#a52a2a",
+  "burlywood": "#deb887",
+  "cadetblue": "#5f9ea0",
+  "chartreuse": "#7fff00",
+  "chocolate": "#d2691e",
+  "coral": "#ff7f50",
+  "cornflowerblue": "#6495ed",
+  "cornsilk": "#fff8dc",
+  "crimson": "#dc143c",
+  "cyan": "#00ffff",
+  "darkblue": "#00008b",
+  "darkcyan": "#008b8b",
+  "darkgoldenrod": "#b8860b",
+  "darkgray": "#a9a9a9",
+  "darkgreen": "#006400",
+  "darkgrey": "#a9a9a9",
+  "darkkhaki": "#bdb76b",
+  "darkmagenta": "#8b008b",
+  "darkolivegreen": "#556b2f",
+  "darkorange": "#ff8c00",
+  "darkorchid": "#9932cc",
+  "darkred": "#8b0000",
+  "darksalmon": "#e9967a",
+  "darkseagreen": "#8fbc8f",
+  "darkslateblue": "#483d8b",
+  "darkslategray": "#2f4f4f",
+  "darkslategrey": "#2f4f4f",
+  "darkturquoise": "#00ced1",
+  "darkviolet": "#9400d3",
+  "deeppink": "#ff1493",
+  "deepskyblue": "#00bfff",
+  "dimgray": "#696969",
+  "dimgrey": "#696969",
+  "dodgerblue": "#1e90ff",
+  "firebrick": "#b22222",
+  "floralwhite": "#fffaf0",
+  "forestgreen": "#228b22",
+  "fuchsia": "#ff00ff",
+  "gainsboro": "#dcdcdc",
+  "ghostwhite": "#f8f8ff",
+  "gold": "#ffd700",
+  "goldenrod": "#daa520",
+  "gray": "#808080",
+  "green": "#008000",
+  "greenyellow": "#adff2f",
+  "grey": "#808080",
+  "honeydew": "#f0fff0",
+  "hotpink": "#ff69b4",
+  "indianred": "#cd5c5c",
+  "indigo": "#4b0082",
+  "ivory": "#fffff0",
+  "khaki": "#f0e68c",
+  "lavender": "#e6e6fa",
+  "lavenderblush": "#fff0f5",
+  "lawngreen": "#7cfc00",
+  "lemonchiffon": "#fffacd",
+  "lightblue": "#add8e6",
+  "lightcoral": "#f08080",
+  "lightcyan": "#e0ffff",
+  "lightgoldenrodyellow": "#fafad2",
+  "lightgray": "#d3d3d3",
+  "lightgreen": "#90ee90",
+  "lightgrey": "#d3d3d3",
+  "lightpink": "#ffb6c1",
+  "lightsalmon": "#ffa07a",
+  "lightseagreen": "#20b2aa",
+  "lightskyblue": "#87cefa",
+  "lightslategray": "#778899",
+  "lightslategrey": "#778899",
+  "lightsteelblue": "#b0c4de",
+  "lightyellow": "#ffffe0",
+  "lime": "#00ff00",
+  "limegreen": "#32cd32",
+  "linen": "#faf0e6",
+  "magenta": "#ff00ff",
+  "maroon": "#800000",
+  "mediumaquamarine": "#66cdaa",
+  "mediumblue": "#0000cd",
+  "mediumorchid": "#ba55d3",
+  "mediumpurple": "#9370db",
+  "mediumseagreen": "#3cb371",
+  "mediumslateblue": "#7b68ee",
+  "mediumspringgreen": "#00fa9a",
+  "mediumturquoise": "#48d1cc",
+  "mediumvioletred": "#c71585",
+  "midnightblue": "#191970",
+  "mintcream": "#f5fffa",
+  "mistyrose": "#ffe4e1",
+  "moccasin": "#ffe4b5",
+  "navajowhite": "#ffdead",
+  "navy": "#000080",
+  "oldlace": "#fdf5e6",
+  "olive": "#808000",
+  "olivedrab": "#6b8e23",
+  "orange": "#ffa500",
+  "orangered": "#ff4500",
+  "orchid": "#da70d6",
+  "palegoldenrod": "#eee8aa",
+  "palegreen": "#98fb98",
+  "paleturquoise": "#afeeee",
+  "palevioletred": "#db7093",
+  "papayawhip": "#ffefd5",
+  "peachpuff": "#ffdab9",
+  "peru": "#cd853f",
+  "pink": "#ffc0cb",
+  "plum": "#dda0dd",
+  "powderblue": "#b0e0e6",
+  "purple": "#800080",
+  "rebeccapurple": "#663399",
+  "red": "#ff0000",
+  "rosybrown": "#bc8f8f",
+  "royalblue": "#4169e1",
+  "saddlebrown": "#8b4513",
+  "salmon": "#fa8072",
+  "sandybrown": "#f4a460",
+  "seagreen": "#2e8b57",
+  "seashell": "#fff5ee",
+  "sienna": "#a0522d",
+  "silver": "#c0c0c0",
+  "skyblue": "#87ceeb",
+  "slateblue": "#6a5acd",
+  "slategray": "#708090",
+  "slategrey": "#708090",
+  "snow": "#fffafa",
+  "springgreen": "#00ff7f",
+  "steelblue": "#4682b4",
+  "tan": "#d2b48c",
+  "teal": "#008080",
+  "thistle": "#d8bfd8",
+  "tomato": "#ff6347",
+  "turquoise": "#40e0d0",
+  "violet": "#ee82ee",
+  "wheat": "#f5deb3",
+  "white": "#ffffff",
+  "whitesmoke": "#f5f5f5",
+  "yellow": "#ffff00",
+  "yellowgreen": "#9acd32"
+};

package/src/css/parsers/background-parser-extended.ts

@@ -0,0 +1,111 @@
+// src/css/parsers/background-parser-extended.ts
+
+import { parseLinearGradient, parseRadialGradient } from "./gradient-parser.js";
+import {
+  parseBackgroundShorthand,
+  applyBackgroundSize,
+  applyBackgroundPosition,
+  applyBackgroundOrigin,
+  applyBackgroundRepeat,
+  ensureLayers,
+} from "./background-parser.js";
+import type { StyleAccumulator } from "../style.js";
+import type { BackgroundClip } from "../background-types.js";
+
+const BACKGROUND_CLIP_VALUES = new Set<BackgroundClip>([
+  "border-box",
+  "padding-box",
+  "content-box",
+  "text",
+]);
+
+export function applyBackgroundSizeDecl(value: string, target: StyleAccumulator): void {
+  applyBackgroundSize(target, value);
+}
+
+export function applyBackgroundPositionDecl(value: string, target: StyleAccumulator): void {
+  applyBackgroundPosition(target, value);
+}
+
+export function applyBackgroundOriginDecl(value: string, target: StyleAccumulator): void {
+  applyBackgroundOrigin(target, value);
+}
+
+export function applyBackgroundRepeatDecl(value: string, target: StyleAccumulator): void {
+  applyBackgroundRepeat(target, value);
+}
+
+export function applyBackgroundClipDecl(value: string, target: StyleAccumulator): void {
+  const layers = ensureLayers(target);
+  if (layers.length === 0) {
+    return;
+  }
+
+  const tokens = value
+    .split(",")
+    .map((token) => token.trim().toLowerCase())
+    .filter((token) => token.length > 0);
+
+  if (tokens.length === 0) {
+    return;
+  }
+
+  for (let i = 0; i < tokens.length; i++) {
+    const clipValue = tokens[i] as BackgroundClip;
+    if (!BACKGROUND_CLIP_VALUES.has(clipValue)) {
+      continue;
+    }
+    const layerIndex = Math.min(i, layers.length - 1);
+    const layer = layers[layerIndex];
+    if (layer) {
+      layer.clip = clipValue as BackgroundClip;
+    }
+  }
+}
+
+export function parseBackgroundImage(value: string, target: StyleAccumulator): void {
+  const trimmed = value.trim();
+
+  // Try to parse gradients first
+  const gradient = parseLinearGradient(value) ?? parseRadialGradient(value);
+  if (gradient) {
+    if (!target.backgroundLayers) {
+      target.backgroundLayers = [];
+    }
+    target.backgroundLayers.push({ kind: "gradient", gradient });
+    return;
+  }
+
+  // If not a gradient, treat as direct url
+  if (trimmed.startsWith('url(')) {
+    if (!target.backgroundLayers) {
+      target.backgroundLayers = [];
+    }
+    target.backgroundLayers.push({
+      kind: "image",
+      url: trimmed,
+      position: { x: "left", y: "top" },
+      size: "auto",
+      repeat: "repeat"
+    });
+  }
+}
+
+export function parseBackground(value: string, target: StyleAccumulator): void {
+  console.log("Processing background property:", value);
+  const layers = parseBackgroundShorthand(value);
+  console.log("Parsed background layers:", layers);
+  if (layers.length > 0) {
+    if (!target.backgroundLayers) {
+      target.backgroundLayers = [];
+    }
+    target.backgroundLayers.push(...layers);
+  }
+}
+
+export function parseObjectFit(value: string, target: StyleAccumulator): void {
+  const normalized = value.trim().toLowerCase();
+  if (["contain", "cover", "fill", "none", "scale-down"].includes(normalized)) {
+    target.objectFit = normalized;
+  }
+}