@snailycfx/stylesheet 1.0.11 → 1.0.13

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
@@ -79,7 +56,6 @@ function layoutNode(node, containerWidth, containerHeight)
 		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
@@ -138,7 +112,6 @@ function layoutNode(node, containerWidth, containerHeight)
 	end
 	node.layoutDirty = false
 end
--- ── Block layout ──────────────────────────────────────────────────────────────
 function computeBlockLayout(node, containerWidth, containerHeight)
 	local yOffset = 0
 	local results = {}
@@ -164,7 +137,6 @@ 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)
@@ -174,6 +146,8 @@ function reparentIfNeeded(node, containingBlock)
 		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/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/core/parse/color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAgBpD"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/core/parse/color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAoBpD"}

package/out/core/parse/color.luau

@@ -14,7 +14,8 @@ local function parseColor(value)
 	end
 	local str = value
 	local hex = (string.gsub(str, "#", ""))
-	local expanded = if #hex == 3 then string.rep(string.sub(hex, 1, 1), 2) .. string.rep(string.sub(hex, 2, 2), 2) .. string.rep(string.sub(hex, 3, 3), 2) else hex
+	-- Expandir shorthand #rgb → #rrggbb
+	local expanded = if #hex == 3 then string.rep(string.sub(hex, 1, 1), 2) .. string.rep(string.sub(hex, 2, 2), 2) .. string.rep(string.sub(hex, 3, 3), 2) elseif #hex == 8 then string.sub(hex, 1, 6) else hex
 	return Color3.fromHex(expanded)
 end
 return {

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,CAgBhD;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,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,17 +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
-	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
-	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
@@ -30,15 +60,13 @@ local function resolvePixels(value, containerSize)
 		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/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,22 @@
+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;
+}
+/**
+ * Raíz del engine de layout. Debe envolver toda la UI.
+ * Crea un Frame invisible que ocupa el 100% del target
+ * y actúa como el "body" del que cuelgan todos los elementos.
+ *
+ * @example
+ * export = (target: Frame) => {
+ *     const root = createRoot(target)
+ *     root.render(<StyleSheetProvider target={target}><App /></StyleSheetProvider>)
+ *     return () => root.unmount()
+ * }
+ */
+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,KAA4B,MAAM,cAAc,CAAA;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAKzC,eAAO,MAAM,WAAW,uCAAyD,CAAA;AAIjF,UAAU,uBAAuB;IAChC,MAAM,EAAE,KAAK,CAAA;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAsDrF"}

package/out/provider/init.luau

@@ -0,0 +1,74 @@
+-- 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 _core = TS.import(script, script.Parent, "core")
+local createNode = _core.createNode
+local setEngineRoot = _core.setEngineRoot
+local runLayoutImmediate = _core.runLayoutImmediate
+-- ── Context ───────────────────────────────────────────────────────────────────
+local NodeContext = React.createContext(nil)
+-- ── StyleSheetProvider ────────────────────────────────────────────────────────
+--[[
+	*
+	 * Raíz del engine de layout. Debe envolver toda la UI.
+	 * Crea un Frame invisible que ocupa el 100% del target
+	 * y actúa como el "body" del que cuelgan todos los elementos.
+	 *
+	 * @example
+	 * export = (target: Frame) => {
+	 *     const root = createRoot(target)
+	 *     root.render(<StyleSheetProvider target={target}><App /></StyleSheetProvider>)
+	 *     return () => root.unmount()
+	 * }
+	 
+]]
+local function StyleSheetProvider(props)
+	local bodyRef = useRef()
+	local rootNodeRef = useRef()
+	useEffect(function()
+		local body = bodyRef.current
+		if not body then
+			return nil
+		end
+		-- Crear el nodo raíz — sin padre, es la raíz del árbol
+		local rootNode = createNode(body, {
+			width = "100%",
+			height = "100%",
+			display = "flex",
+			flexDirection = "column",
+		})
+		rootNodeRef.current = rootNode
+		setEngineRoot(rootNode)
+		-- Ejecutar layout inmediato con el tamaño real del target
+		local doLayout = function()
+			local size = props.target.AbsoluteSize
+			body.Size = UDim2.fromOffset(size.X, size.Y)
+			rootNode.computedWidth = size.X
+			rootNode.computedHeight = size.Y
+			rootNode.layoutDirty = true
+			runLayoutImmediate(rootNode)
+		end
+		doLayout()
+		-- Escuchar resize del target — un solo listener para todo el árbol
+		local conn = (props.target):GetPropertyChangedSignal("AbsoluteSize"):Connect(doLayout)
+		return function()
+			conn:Disconnect()
+			setEngineRoot(nil)
+		end
+	end, {})
+	return React.createElement(NodeContext.Provider, {
+		value = rootNodeRef.current,
+	}, 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.11",
+    "version": "1.0.13",
     "description": "CSS-inspired StyleSheet system for roblox-ts and @rbxts/react",
     "main": "out/init.lua",
     "types": "out/index.d.ts",