@snailycfx/stylesheet 1.0.12 → 1.0.14

package/out/core/engine/index.d.ts

@@ -1,14 +1,8 @@
 import type { LayoutNode } from "./node";
 export { createNode, updateNodeStyle, removeNode, markLayoutDirty, getRoot, findContainingBlockForAbsolute } from "./node";
 export type { LayoutNode } from "./node";
-/**
- * Marca el nodo como dirty y agenda un layout pass en el próximo frame.
- * Llama a esto cuando cambia un estilo o el tamaño de un contenedor.
- */
+export declare function setEngineRoot(node: LayoutNode): void;
+export declare function getEngineRoot(): LayoutNode | undefined;
 export declare function runLayout(node: LayoutNode): void;
-/**
- * Ejecuta el layout inmediatamente sin esperar al próximo frame.
- * Usar solo cuando necesitas los valores computados de forma síncrona.
- */
 export declare function runLayoutImmediate(node: LayoutNode): void;
 //# sourceMappingURL=index.d.ts.map

package/out/core/engine/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/engine/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAOxC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,eAAe,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,QAAQ,CAAA;AAC1H,YAAY,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AA0BxC;;;GAGG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAGhD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAIzD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/engine/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAOxC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,eAAe,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,QAAQ,CAAA;AAC1H,YAAY,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAMxC,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAEpD;AAED,wBAAgB,aAAa,IAAI,UAAU,GAAG,SAAS,CAEtD;AAmBD,wBAAgB,SAAS,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAGhD;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAIzD"}

package/out/core/engine/init.luau

@@ -1,69 +1,46 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
-local _node = TS.import(script, script, "node")
-local getRoot = _node.getRoot
-local markLayoutDirty = _node.markLayoutDirty
+local markLayoutDirty = TS.import(script, script, "node").markLayoutDirty
 local computeFlexLayout = TS.import(script, script, "flex").computeFlexLayout
 local computeGridLayout = TS.import(script, script, "grid").computeGridLayout
 local computeAbsoluteLayout = TS.import(script, script, "absolute").computeAbsoluteLayout
 local resolvePixels = TS.import(script, script.Parent, "parse").resolvePixels
-local _node_1 = TS.import(script, script, "node")
-exports.createNode = _node_1.createNode
-exports.updateNodeStyle = _node_1.updateNodeStyle
-exports.removeNode = _node_1.removeNode
-exports.markLayoutDirty = _node_1.markLayoutDirty
-exports.getRoot = _node_1.getRoot
-exports.findContainingBlockForAbsolute = _node_1.findContainingBlockForAbsolute
+local _node = TS.import(script, script, "node")
+exports.createNode = _node.createNode
+exports.updateNodeStyle = _node.updateNodeStyle
+exports.removeNode = _node.removeNode
+exports.markLayoutDirty = _node.markLayoutDirty
+exports.getRoot = _node.getRoot
+exports.findContainingBlockForAbsolute = _node.findContainingBlockForAbsolute
+-- ── Raíz global del engine ────────────────────────────────────────────────────
+local engineRoot
+local function setEngineRoot(node)
+	engineRoot = node
+end
+local function getEngineRoot()
+	return engineRoot
+end
 -- ── Batching ──────────────────────────────────────────────────────────────────
--- Acumulamos nodos sucios y ejecutamos un único layout pass por frame
 local scheduled = false
-local pendingRoots = {}
 local runLayoutImmediate
-local function scheduleLayout(root)
-	local _root = root
-	pendingRoots[_root] = true
-	if scheduled then
+local function scheduleLayout()
+	if scheduled or not engineRoot then
 		return nil
 	end
 	scheduled = true
-	-- Diferir al siguiente Heartbeat para batching automático
 	local RunService = game:GetService("RunService")
-	local conn = RunService.Heartbeat:Once(function()
+	RunService.Heartbeat:Once(function()
 		scheduled = false
-		local _array = {}
-		local _length = #_array
-		for _v in pendingRoots do
-			_length += 1
-			_array[_length] = _v
-		end
-		local roots = _array
-		table.clear(pendingRoots)
-		for _, r in roots do
-			if r.layoutDirty then
-				runLayoutImmediate(r)
-			end
+		if engineRoot and engineRoot.layoutDirty then
+			runLayoutImmediate(engineRoot)
 		end
 	end)
-	local _ = conn
-	local _1 = nil
 end
---[[
-	*
-	 * Marca el nodo como dirty y agenda un layout pass en el próximo frame.
-	 * Llama a esto cuando cambia un estilo o el tamaño de un contenedor.
-	 
-]]
 local function runLayout(node)
 	markLayoutDirty(node)
-	scheduleLayout(getRoot(node))
+	scheduleLayout()
 end
---[[
-	*
-	 * Ejecuta el layout inmediatamente sin esperar al próximo frame.
-	 * Usar solo cuando necesitas los valores computados de forma síncrona.
-	 
-]]
 local layoutNode
 function runLayoutImmediate(node)
 	if not node.layoutDirty then
@@ -73,13 +50,12 @@ function runLayoutImmediate(node)
 	layoutNode(node, absSize.X, absSize.Y)
 end
 -- ── Layout recursivo ──────────────────────────────────────────────────────────
-local computeBlockLayout, writeLayout, reparentIfNeeded
+local computeBlockLayout, writeLayout
 function layoutNode(node, containerWidth, containerHeight)
 	if not node.layoutDirty then
 		return nil
 	end
 	local style = node.style
-	-- Tamaño propio
 	node.computedWidth = if style.width ~= nil then resolvePixels(style.width, containerWidth) else containerWidth
 	node.computedHeight = if style.height ~= nil then resolvePixels(style.height, containerHeight) else containerHeight
 	if #node.children == 0 then
@@ -87,7 +63,6 @@ function layoutNode(node, containerWidth, containerHeight)
 		return nil
 	end
 	local display = style.display
-	-- ── Layout de hijos en flujo ───────────────────────────────────────────────
 	local childLayouts
 	if display == "flex" then
 		childLayouts = computeFlexLayout(node, node.computedWidth, node.computedHeight)
@@ -96,7 +71,7 @@ function layoutNode(node, containerWidth, containerHeight)
 	else
 		childLayouts = computeBlockLayout(node, node.computedWidth, node.computedHeight)
 	end
-	-- ── Escribir y recursión: in-flow ─────────────────────────────────────────
+	-- In-flow children
 	for i = 0, #node.children - 1 do
 		local child = node.children[i + 1]
 		if child.style.position == "absolute" then
@@ -112,13 +87,12 @@ function layoutNode(node, containerWidth, containerHeight)
 		child.computedWidth = layout.width
 		child.computedHeight = layout.height
 		writeLayout(child.instance, layout.x, layout.y, layout.width, layout.height)
-		-- Solo recalcular hijos si el tamaño cambió
 		if sizeChanged then
 			child.layoutDirty = true
 		end
 		layoutNode(child, layout.width, layout.height)
 	end
-	-- ── Escribir y recursión: absolute ────────────────────────────────────────
+	-- Absolute children
 	for _, child in node.children do
 		if child.style.position ~= "absolute" then
 			continue
@@ -129,7 +103,6 @@ function layoutNode(node, containerWidth, containerHeight)
 		child.computedY = abs.y
 		child.computedWidth = abs.width
 		child.computedHeight = abs.height
-		reparentIfNeeded(child, abs.containingBlock)
 		writeLayout(child.instance, abs.x, abs.y, abs.width, abs.height)
 		if sizeChanged then
 			child.layoutDirty = true
@@ -138,7 +111,6 @@ function layoutNode(node, containerWidth, containerHeight)
 	end
 	node.layoutDirty = false
 end
--- ── Block layout ──────────────────────────────────────────────────────────────
 function computeBlockLayout(node, containerWidth, containerHeight)
 	local yOffset = 0
 	local results = {}
@@ -164,16 +136,12 @@ function computeBlockLayout(node, containerWidth, containerHeight)
 	end
 	return results
 end
--- ── Helpers ───────────────────────────────────────────────────────────────────
 function writeLayout(instance, x, y, w, h)
 	instance.Position = UDim2.new(0, x, 0, y)
 	instance.Size = UDim2.new(0, w, 0, h)
 end
-function reparentIfNeeded(node, containingBlock)
-	if node.instance.Parent ~= containingBlock.instance then
-		node.instance.Parent = containingBlock.instance
-	end
-end
+exports.setEngineRoot = setEngineRoot
+exports.getEngineRoot = getEngineRoot
 exports.runLayout = runLayout
 exports.runLayoutImmediate = runLayoutImmediate
 return exports

package/out/core/index.d.ts

@@ -10,7 +10,7 @@ export type { MiscStyle } from "./types/style/misc";
 export { parseColor } from "./parse/color";
 export { parseUDim, parseUDim2, resolvePixels } from "./parse/udim";
 export { parseGridTemplate, resolveTrackSizes } from "./parse/grid";
-export { createNode, updateNodeStyle, removeNode, runLayout, runLayoutImmediate, markLayoutDirty, getRoot } from "./engine";
+export { createNode, updateNodeStyle, removeNode, runLayout, runLayoutImmediate, markLayoutDirty, getRoot, setEngineRoot, getEngineRoot, findContainingBlockForAbsolute } from "./engine";
 export type { LayoutNode } from "./engine";
 export { writeVisual } from "./writer";
 //# sourceMappingURL=index.d.ts.map

package/out/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAC1F,YAAY,EAAE,YAAY,EAAE,MAAS,uBAAuB,CAAA;AAC5D,YAAY,EAAE,SAAS,EAAE,MAAY,oBAAoB,CAAA;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC/D,YAAY,EAAE,WAAW,EAAE,MAAU,sBAAsB,CAAA;AAC3D,YAAY,EAAE,SAAS,EAAE,MAAY,oBAAoB,CAAA;AACzD,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AACnI,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACzE,YAAY,EAAE,SAAS,EAAE,MAAY,oBAAoB,CAAA;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAoC,eAAe,CAAA;AACxE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,MAAU,cAAc,CAAA;AACvE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAU,cAAc,CAAA;AAEvE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,kBAAkB,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAC3H,YAAY,EAAE,UAAU,EAAE,MAA+B,UAAU,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAmC,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAC1F,YAAY,EAAE,YAAY,EAAE,MAAS,uBAAuB,CAAA;AAC5D,YAAY,EAAE,SAAS,EAAE,MAAY,oBAAoB,CAAA;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC/D,YAAY,EAAE,WAAW,EAAE,MAAU,sBAAsB,CAAA;AAC3D,YAAY,EAAE,SAAS,EAAE,MAAY,oBAAoB,CAAA;AACzD,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AACnI,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACzE,YAAY,EAAE,SAAS,EAAE,MAAY,oBAAoB,CAAA;AAEzD,OAAO,EAAE,UAAU,EAAE,MAA4C,eAAe,CAAA;AAChF,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,MAAkB,cAAc,CAAA;AAC/E,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAkB,cAAc,CAAA;AAE/E,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,kBAAkB,EAAE,eAAe,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,8BAA8B,EAAE,MAAM,UAAU,CAAA;AACzL,YAAY,EAAE,UAAU,EAAE,MAAuC,UAAU,CAAA;AAE3E,OAAO,EAAE,WAAW,EAAE,MAA2C,UAAU,CAAA"}

package/out/core/init.luau

@@ -17,5 +17,8 @@ exports.runLayout = _engine.runLayout
 exports.runLayoutImmediate = _engine.runLayoutImmediate
 exports.markLayoutDirty = _engine.markLayoutDirty
 exports.getRoot = _engine.getRoot
+exports.setEngineRoot = _engine.setEngineRoot
+exports.getEngineRoot = _engine.getEngineRoot
+exports.findContainingBlockForAbsolute = _engine.findContainingBlockForAbsolute
 exports.writeVisual = TS.import(script, script, "writer").writeVisual
 return exports

package/out/core/parse/udim.d.ts

@@ -1,8 +1,5 @@
 import type { UDimValue } from "../types";
 export declare function parseUDim(value: UDimValue): UDim;
 export declare function parseUDim2(x: UDimValue, y: UDimValue): UDim2;
-/**
- * Resuelve un UDimValue a píxeles absolutos dado el tamaño del contenedor.
- */
 export declare function resolvePixels(value: UDimValue, containerSize: number): number;
 //# sourceMappingURL=udim.d.ts.map

package/out/core/parse/udim.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"udim.d.ts","sourceRoot":"","sources":["../../../src/core/parse/udim.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEzC,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAkBhD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,CAI5D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,CAkB7E"}
+{"version":3,"file":"udim.d.ts","sourceRoot":"","sources":["../../../src/core/parse/udim.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAuBzC,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAYhD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,CAI5D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,CAY7E"}

package/out/core/parse/udim.luau

@@ -1,19 +1,47 @@
 -- Compiled with roblox-ts v3.0.0
+--[[
+	*
+	 * Extrae scale y offset de strings tipo "50%+16" o "50%-16"
+	 * usando dos match separados para evitar problemas con LuaTuple.
+	 
+]]
+local function parseMixed(str)
+	local scaleStr = (string.match(str, "^(%d+%.?%d*)%%[%+%-]"))
+	if scaleStr == nil then
+		return nil
+	end
+	local offsetStr = (string.match(str, "[%+%-](%d+%.?%d*)$"))
+	if offsetStr == nil then
+		return nil
+	end
+	local sign = (string.match(str, "%%(%+?%-?)%d"))
+	local scale = tonumber(scaleStr) / 100
+	local offset = tonumber(offsetStr) * (if sign == "-" then -1 else 1)
+	return {
+		scale = scale,
+		offset = offset,
+	}
+end
+local function parseScaleOnly(str)
+	local scaleStr = (string.match(str, "^(%d+%.?%d*)%%$"))
+	if scaleStr == nil then
+		return nil
+	end
+	return tonumber(scaleStr) / 100
+end
 local function parseUDim(value)
 	local _value = value
 	if typeof(_value) == "number" then
 		return UDim.new(0, value)
 	end
 	local str = value
-	-- "50%+16" o "50%-16"
-	local mixed = { string.match(str, "^(%d+%.?%d*)%%([%+%-]%d+%.?%d*)$") }
+	local mixed = parseMixed(str)
 	if mixed ~= nil then
-		return UDim.new(tonumber(mixed[1]) / 100, tonumber(mixed[2]))
+		return UDim.new(mixed.scale, mixed.offset)
 	end
-	-- "50%"
-	local scaleOnly = { string.match(str, "^(%d+%.?%d*)%%$") }
-	if scaleOnly ~= nil then
-		return UDim.new(tonumber(scaleOnly[1]) / 100, 0)
+	local scale = parseScaleOnly(str)
+	if scale ~= nil then
+		return UDim.new(scale, 0)
 	end
 	local _condition = tonumber(str)
 	if _condition == nil then
@@ -26,26 +54,19 @@ local function parseUDim2(x, y)
 	local uy = parseUDim(y)
 	return UDim2.new(ux.Scale, ux.Offset, uy.Scale, uy.Offset)
 end
---[[
-	*
-	 * Resuelve un UDimValue a píxeles absolutos dado el tamaño del contenedor.
-	 
-]]
 local function resolvePixels(value, containerSize)
 	local _value = value
 	if typeof(_value) == "number" then
 		return value
 	end
 	local str = value
-	local mixed = { string.match(str, "^(%d+%.?%d*)%%([%+%-]%d+%.?%d*)$") }
+	local mixed = parseMixed(str)
 	if mixed ~= nil then
-		local scale = tonumber(mixed[1]) / 100
-		local offset = tonumber(mixed[2])
-		return containerSize * scale + offset
+		return containerSize * mixed.scale + mixed.offset
 	end
-	local scaleOnly = { string.match(str, "^(%d+%.?%d*)%%$") }
-	if scaleOnly ~= nil then
-		return containerSize * (tonumber(scaleOnly[1]) / 100)
+	local scale = parseScaleOnly(str)
+	if scale ~= nil then
+		return containerSize * scale
 	end
 	local _condition = tonumber(str)
 	if _condition == nil then

package/out/core/writer/init.luau

@@ -213,16 +213,39 @@ function writeText(instance, style, prev)
 		return nil
 	end
 	local text = instance
+	-- Defaults CSS: left + top cuando no se especifica
+	local _condition = style.textAlign == nil
+	if _condition then
+		local _result = prev
+		if _result ~= nil then
+			_result = _result.textAlign
+		end
+		_condition = _result == nil
+	end
+	if _condition then
+		text.TextXAlignment = Enum.TextXAlignment.Left
+	end
+	local _condition_1 = style.verticalAlign == nil
+	if _condition_1 then
+		local _result = prev
+		if _result ~= nil then
+			_result = _result.verticalAlign
+		end
+		_condition_1 = _result == nil
+	end
+	if _condition_1 then
+		text.TextYAlignment = Enum.TextYAlignment.Top
+	end
 	local _exp = style.color
 	local _result = prev
 	if _result ~= nil then
 		_result = _result.color
 	end
-	local _condition = _exp ~= _result
-	if _condition then
-		_condition = style.color ~= nil
+	local _condition_2 = _exp ~= _result
+	if _condition_2 then
+		_condition_2 = style.color ~= nil
 	end
-	if _condition then
+	if _condition_2 then
 		text.TextColor3 = parseColor(style.color)
 	end
 	local _exp_1 = style.fontSize
@@ -230,11 +253,11 @@ function writeText(instance, style, prev)
 	if _result_1 ~= nil then
 		_result_1 = _result_1.fontSize
 	end
-	local _condition_1 = _exp_1 ~= _result_1
-	if _condition_1 then
-		_condition_1 = style.fontSize ~= nil
+	local _condition_3 = _exp_1 ~= _result_1
+	if _condition_3 then
+		_condition_3 = style.fontSize ~= nil
 	end
-	if _condition_1 then
+	if _condition_3 then
 		text.TextSize = style.fontSize
 	end
 	local _exp_2 = style.fontFamily
@@ -242,11 +265,11 @@ function writeText(instance, style, prev)
 	if _result_2 ~= nil then
 		_result_2 = _result_2.fontFamily
 	end
-	local _condition_2 = _exp_2 ~= _result_2
-	if _condition_2 then
-		_condition_2 = style.fontFamily ~= nil
+	local _condition_4 = _exp_2 ~= _result_2
+	if _condition_4 then
+		_condition_4 = style.fontFamily ~= nil
 	end
-	if _condition_2 then
+	if _condition_4 then
 		text.Font = style.fontFamily
 	end
 	local _exp_3 = style.textTransparency
@@ -254,11 +277,11 @@ function writeText(instance, style, prev)
 	if _result_3 ~= nil then
 		_result_3 = _result_3.textTransparency
 	end
-	local _condition_3 = _exp_3 ~= _result_3
-	if _condition_3 then
-		_condition_3 = style.textTransparency ~= nil
+	local _condition_5 = _exp_3 ~= _result_3
+	if _condition_5 then
+		_condition_5 = style.textTransparency ~= nil
 	end
-	if _condition_3 then
+	if _condition_5 then
 		text.TextTransparency = style.textTransparency
 	end
 	local _exp_4 = style.textScaled
@@ -266,11 +289,11 @@ function writeText(instance, style, prev)
 	if _result_4 ~= nil then
 		_result_4 = _result_4.textScaled
 	end
-	local _condition_4 = _exp_4 ~= _result_4
-	if _condition_4 then
-		_condition_4 = style.textScaled ~= nil
+	local _condition_6 = _exp_4 ~= _result_4
+	if _condition_6 then
+		_condition_6 = style.textScaled ~= nil
 	end
-	if _condition_4 then
+	if _condition_6 then
 		text.TextScaled = style.textScaled
 	end
 	local _exp_5 = style.textWrapped
@@ -278,11 +301,11 @@ function writeText(instance, style, prev)
 	if _result_5 ~= nil then
 		_result_5 = _result_5.textWrapped
 	end
-	local _condition_5 = _exp_5 ~= _result_5
-	if _condition_5 then
-		_condition_5 = style.textWrapped ~= nil
+	local _condition_7 = _exp_5 ~= _result_5
+	if _condition_7 then
+		_condition_7 = style.textWrapped ~= nil
 	end
-	if _condition_5 then
+	if _condition_7 then
 		text.TextWrapped = style.textWrapped
 	end
 	local _exp_6 = style.lineHeight
@@ -290,11 +313,11 @@ function writeText(instance, style, prev)
 	if _result_6 ~= nil then
 		_result_6 = _result_6.lineHeight
 	end
-	local _condition_6 = _exp_6 ~= _result_6
-	if _condition_6 then
-		_condition_6 = style.lineHeight ~= nil
+	local _condition_8 = _exp_6 ~= _result_6
+	if _condition_8 then
+		_condition_8 = style.lineHeight ~= nil
 	end
-	if _condition_6 then
+	if _condition_8 then
 		text.LineHeight = style.lineHeight
 	end
 	local _exp_7 = style.textAlign
@@ -302,11 +325,11 @@ function writeText(instance, style, prev)
 	if _result_7 ~= nil then
 		_result_7 = _result_7.textAlign
 	end
-	local _condition_7 = _exp_7 ~= _result_7
-	if _condition_7 then
-		_condition_7 = style.textAlign ~= nil
+	local _condition_9 = _exp_7 ~= _result_7
+	if _condition_9 then
+		_condition_9 = style.textAlign ~= nil
 	end
-	if _condition_7 then
+	if _condition_9 then
 		text.TextXAlignment = TEXT_X[style.textAlign] or Enum.TextXAlignment.Left
 	end
 	local _exp_8 = style.verticalAlign
@@ -314,11 +337,11 @@ function writeText(instance, style, prev)
 	if _result_8 ~= nil then
 		_result_8 = _result_8.verticalAlign
 	end
-	local _condition_8 = _exp_8 ~= _result_8
-	if _condition_8 then
-		_condition_8 = style.verticalAlign ~= nil
+	local _condition_10 = _exp_8 ~= _result_8
+	if _condition_10 then
+		_condition_10 = style.verticalAlign ~= nil
 	end
-	if _condition_8 then
+	if _condition_10 then
 		text.TextYAlignment = TEXT_Y[style.verticalAlign] or Enum.TextYAlignment.Center
 	end
 end

package/out/elements/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/elements/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,cAAc,CAAA;AACnE,OAAO,KAAK,EAAE,QAAQ,EAAc,MAAM,SAAS,CAAA;AAUnD,UAAU,SAAS;IAClB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,UAAU,gBAAiB,SAAQ,SAAS;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB;AAwGD,wBAAgB,GAAG,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAgBxD;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAmBjG;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,gBAAgB,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAwBtF;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,SAAS,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAwB3H;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,GAAG;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,YAAY,CAAC,EAAE,OAAO,CAAA;CACtB,GAAG,KAAK,CAAC,YAAY,CAoBrB;AAED,wBAAgB,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG;IACrC,eAAe,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,KAAK,CAAC,YAAY,CA4BrB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAU3D;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAmBjH;AAGD,eAAO,MAAM,GAAG,YAAM,CAAA;AACtB,eAAO,MAAM,IAAI,aAAO,CAAA;AACxB,eAAO,MAAM,MAAM,eAAS,CAAA;AAC5B,eAAO,MAAM,GAAG,YAAM,CAAA;AACtB,eAAO,MAAM,KAAK,cAAQ,CAAA;AAC1B,eAAO,MAAM,EAAE,WAAK,CAAA;AACpB,eAAO,MAAM,MAAM,eAAS,CAAA;AAC5B,eAAO,MAAM,KAAK,cAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/elements/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,cAAc,CAAA;AACnE,OAAO,KAAK,EAAE,QAAQ,EAAc,MAAM,SAAS,CAAA;AAOnD,UAAU,SAAS;IAClB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,UAAU,gBAAiB,SAAQ,SAAS;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB;AAkFD,wBAAgB,GAAG,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAgBxD;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAmBjG;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,gBAAgB,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAwBtF;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,SAAS,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAwB3H;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,GAAG;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,YAAY,CAAC,EAAE,OAAO,CAAA;CACtB,GAAG,KAAK,CAAC,YAAY,CAoBrB;AAED,wBAAgB,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG;IACrC,eAAe,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,KAAK,CAAC,YAAY,CA4BrB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAgB3D;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAmBjH;AAGD,eAAO,MAAM,GAAG,YAAM,CAAA;AACtB,eAAO,MAAM,IAAI,aAAO,CAAA;AACxB,eAAO,MAAM,MAAM,eAAS,CAAA;AAC5B,eAAO,MAAM,GAAG,YAAM,CAAA;AACtB,eAAO,MAAM,KAAK,cAAQ,CAAA;AAC1B,eAAO,MAAM,EAAE,WAAK,CAAA;AACpB,eAAO,MAAM,MAAM,eAAS,CAAA;AAC5B,eAAO,MAAM,KAAK,cAAQ,CAAA"}

package/out/elements/init.luau

@@ -11,17 +11,14 @@ local updateNodeStyle = _core.updateNodeStyle
 local removeNode = _core.removeNode
 local runLayout = _core.runLayout
 local writeVisual = _core.writeVisual
-local getRoot = _core.getRoot
 local StyleSheet = TS.import(script, script.Parent, "stylesheet").StyleSheet
--- ── Context ───────────────────────────────────────────────────────────────────
-local NodeContext = React.createContext(nil)
+local NodeContext = TS.import(script, script.Parent, "provider").NodeContext
 -- ── Tipos ─────────────────────────────────────────────────────────────────────
 -- ── Hook central ──────────────────────────────────────────────────────────────
 local function useLayoutNode(ref, style, className, disabled)
 	local parentNode = useContext(NodeContext)
 	local nodeRef = useRef()
 	local prevStyleRef = useRef()
-	-- Fusión de estilos — solo recalcular si alguno de los dos cambió
 	local base = StyleSheet:compose(className, style)
 	local activeStyle = if disabled and base[":disabled"] then StyleSheet:withPseudo(base, ":disabled") else base
 	useEffect(function()
@@ -29,25 +26,12 @@ local function useLayoutNode(ref, style, className, disabled)
 		if not instance then
 			return nil
 		end
-		-- Primer montaje — esperar a que la instancia tenga AbsoluteSize real
 		local node = createNode(instance, activeStyle, parentNode)
 		nodeRef.current = node
 		prevStyleRef.current = activeStyle
 		writeVisual(instance, activeStyle)
-		-- Si ya tiene tamaño, layout inmediato. Si no, esperar al primer resize
-		local doFirstLayout = function()
-			local size = instance.AbsoluteSize
-			if size.X > 0 or size.Y > 0 then
-				runLayout(getRoot(node))
-			end
-		end
-		doFirstLayout()
-		local sizeConn = instance:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
-			doFirstLayout()
-			runLayout(getRoot(node))
-		end)
-		-- Pseudo-estado :hover
-		local connections = { sizeConn }
+		runLayout(node)
+		local connections = {}
 		if base[":hover"] then
 			local hoverStyle = StyleSheet:withPseudo(base, ":hover")
 			local _arg0 = instance.MouseEnter:Connect(function()
@@ -64,7 +48,6 @@ local function useLayoutNode(ref, style, className, disabled)
 			table.insert(connections, _arg1)
 			-- ▲ Array.push ▲
 		end
-		-- Pseudo-estado :active
 		if base[":active"] then
 			local activeStateStyle = StyleSheet:withPseudo(base, ":active")
 			local btn = instance
@@ -93,11 +76,10 @@ local function useLayoutNode(ref, style, className, disabled)
 			-- ▲ ReadonlyArray.forEach ▲
 			removeNode(node)
 			if parentNode then
-				runLayout(getRoot(parentNode))
+				runLayout(parentNode)
 			end
 		end
 	end, {})
-	-- Actualizar estilo cuando cambia
 	useEffect(function()
 		local node = nodeRef.current
 		if not node then
@@ -110,7 +92,7 @@ local function useLayoutNode(ref, style, className, disabled)
 		updateNodeStyle(node, activeStyle)
 		writeVisual(node.instance, activeStyle, prev)
 		prevStyleRef.current = activeStyle
-		runLayout(getRoot(node))
+		runLayout(node)
 	end, { activeStyle })
 	return nodeRef.current
 end
@@ -317,7 +299,7 @@ local function video(props)
 		value = node,
 	}, React.createElement("videoframe", _attributes, props.children))
 end
--- Aliases PascalCase para uso como JSX components
+-- PascalCase aliases para uso como JSX components
 local Div = div
 local Span = span
 local Button = button

package/out/index.d.ts

@@ -1,4 +1,5 @@
 export { StyleSheet } from "./stylesheet";
+export { StyleSheetProvider } from "./provider";
 export * as elements from "./elements";
 export type { RbxStyle, RbxStyleBase } from "./core";
 export type { UDimValue, ColorValue, GradientStop } from "./core";
@@ -6,6 +7,6 @@ export type { SpacingStyle, SizeStyle, BackgroundStyle } from "./core";
 export type { BorderStyle, TextStyle } from "./core";
 export type { LayoutStyle, Display, FlexDirection, JustifyContent, AlignItems, AlignContent, FlexWrap } from "./core";
 export type { PositionStyle, PositionType, MiscStyle } from "./core";
-export { writeVisual, runLayout, runLayoutImmediate, markLayoutDirty, getRoot, createNode, updateNodeStyle, removeNode, parseColor, parseUDim, parseUDim2 } from "./core";
+export { writeVisual, runLayout, runLayoutImmediate, markLayoutDirty, getRoot, setEngineRoot, createNode, updateNodeStyle, removeNode, parseColor, parseUDim, parseUDim2 } from "./core";
 export type { LayoutNode } from "./core";
 //# sourceMappingURL=index.d.ts.map

package/out/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAS,cAAc,CAAA;AAC5C,OAAO,KAAK,QAAQ,MAAU,YAAY,CAAA;AAE1C,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAA+B,QAAQ,CAAA;AAC7E,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,MAAkB,QAAQ,CAAA;AAC7E,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAa,QAAQ,CAAA;AAC7E,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAA+B,QAAQ,CAAA;AAC7E,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACrH,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAe,QAAQ,CAAA;AAG7E,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,kBAAkB,EAAE,eAAe,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACzK,YAAY,EAAE,UAAU,EAAE,MAA4C,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAiB,cAAc,CAAA;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAS,YAAY,CAAA;AAClD,OAAO,KAAK,QAAQ,MAAkB,YAAY,CAAA;AAElD,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAA+B,QAAQ,CAAA;AAC7E,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,MAAkB,QAAQ,CAAA;AAC7E,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAa,QAAQ,CAAA;AAC7E,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAA+B,QAAQ,CAAA;AAC7E,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACrH,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAe,QAAQ,CAAA;AAG7E,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,kBAAkB,EAAE,eAAe,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACxL,YAAY,EAAE,UAAU,EAAE,MAA4C,QAAQ,CAAA"}

package/out/init.luau

@@ -2,14 +2,16 @@
 local TS = _G[script]
 local exports = {}
 exports.StyleSheet = TS.import(script, script, "stylesheet").StyleSheet
+exports.StyleSheetProvider = TS.import(script, script, "provider").StyleSheetProvider
 exports.elements = TS.import(script, script, "elements")
--- API avanzada para extensión del paquete
+-- API avanzada
 local _core = TS.import(script, script, "core")
 exports.writeVisual = _core.writeVisual
 exports.runLayout = _core.runLayout
 exports.runLayoutImmediate = _core.runLayoutImmediate
 exports.markLayoutDirty = _core.markLayoutDirty
 exports.getRoot = _core.getRoot
+exports.setEngineRoot = _core.setEngineRoot
 exports.createNode = _core.createNode
 exports.updateNodeStyle = _core.updateNodeStyle
 exports.removeNode = _core.removeNode

package/out/provider/index.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import type { LayoutNode } from "../core";
+export declare const NodeContext: React.Context<LayoutNode | undefined>;
+interface StyleSheetProviderProps {
+    target: Frame;
+    children?: React.ReactNode;
+}
+export declare function StyleSheetProvider(props: StyleSheetProviderProps): React.ReactElement;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/out/provider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/provider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,cAAc,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC,eAAO,MAAM,WAAW,uCAAyD,CAAA;AAEjF,UAAU,uBAAuB;IAChC,MAAM,EAAE,KAAK,CAAA;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CA8DrF"}

package/out/provider/init.luau

@@ -0,0 +1,69 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
+local useState = _react.useState
+local _core = TS.import(script, script.Parent, "core")
+local setEngineRoot = _core.setEngineRoot
+local runLayoutImmediate = _core.runLayoutImmediate
+local NodeContext = React.createContext(nil)
+local function StyleSheetProvider(props)
+	local bodyRef = useRef()
+	-- Crear el nodo raíz ANTES del primer render de los hijos
+	-- usando useState con initializer para que esté disponible inmediatamente
+	local rootNode = useState(function()
+		-- Nodo placeholder — la instancia se asigna cuando bodyRef está disponible
+		return {
+			instance = nil,
+			style = {
+				display = "flex",
+				flexDirection = "column",
+			},
+			children = {},
+			parent = nil,
+			computedWidth = props.target.AbsoluteSize.X,
+			computedHeight = props.target.AbsoluteSize.Y,
+			computedX = 0,
+			computedY = 0,
+			layoutDirty = true,
+			visualDirty = false,
+			lastVisualStyle = nil,
+		}
+	end)
+	useEffect(function()
+		local body = bodyRef.current
+		if not body then
+			return nil
+		end
+		-- Asignar la instancia real ahora que el Frame existe
+		rootNode.instance = body
+		setEngineRoot(rootNode)
+		local doLayout = function()
+			local size = props.target.AbsoluteSize
+			rootNode.computedWidth = size.X
+			rootNode.computedHeight = size.Y
+			rootNode.layoutDirty = true
+			runLayoutImmediate(rootNode)
+		end
+		doLayout()
+		local conn = (props.target):GetPropertyChangedSignal("AbsoluteSize"):Connect(doLayout)
+		return function()
+			conn:Disconnect()
+			setEngineRoot(nil)
+		end
+	end, {})
+	return React.createElement(NodeContext.Provider, {
+		value = rootNode,
+	}, React.createElement("frame", {
+		ref = bodyRef,
+		Size = UDim2.fromScale(1, 1),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}, props.children))
+end
+return {
+	StyleSheetProvider = StyleSheetProvider,
+	NodeContext = NodeContext,
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@snailycfx/stylesheet",
-    "version": "1.0.12",
+    "version": "1.0.14",
     "description": "CSS-inspired StyleSheet system for roblox-ts and @rbxts/react",
     "main": "out/init.lua",
     "types": "out/index.d.ts",